/* ==========================================================================
   Psy.Link — Rubrique « Blog » (accueil, archives de catégorie, article, auteur)
   Dépend de site.css (tokens, base, boutons), de accueil.css (sections
   mutualisées : .conteneur, .entete-section-ligne, .section-cta-finale) et,
   sur la page article seulement, de motif.css (corps rédactionnel :
   .section-article, .article-grille, .article-sommaire, .article-contenu).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. En-tête de rubrique (accueil, catégorie, auteur)
   -------------------------------------------------------------------------- */
.blog-heros {
    background: linear-gradient(180deg, var(--doux) 0%, var(--blanc) 100%);
    border-bottom: 1px solid var(--ligne);
    padding: 46px 0 40px;
}

.blog-heros h1 {
    font-family: var(--ff-titre);
    color: var(--encre);
    letter-spacing: -.02em;
    line-height: 1.12;
    margin: 10px 0 14px;
    font-size: clamp(30px, 4.4vw, 48px);
}

.blog-heros-accroche {
    font-size: 17px;
    line-height: 1.62;
    color: var(--gris);
    max-width: 64ch;
    margin: 0;
}

/* Le fil d'ariane de motif.css est prévu pour un fond sombre : sur ces
   en-têtes clairs, il faut reprendre les couleurs de texte courantes.
   Repris de ressource.css, où la règle sert les mêmes en-têtes. */
/* motif.css habille le fil d'ariane pour un fond sombre : ses liens y sont
   blancs. Sur les en-têtes clairs du blog, il faut reprendre la main sur le
   conteneur ET sur les liens, faute de quoi « Accueil › Blog » reste illisible.
   La classe est ciblée sans préfixe : le fil apparaît aussi bien dans
   .blog-heros (index, catégorie, auteur) que dans .blog-article-heros. */
.fil-ariane-clair {
    color: var(--gris-clair);
}

.fil-ariane-clair a {
    color: var(--gris);
}

.fil-ariane-clair a:hover {
    color: var(--vert-fonce);
    text-decoration: underline;
}

.fil-ariane-clair [aria-current="page"] {
    color: var(--gris-clair);
}

/* Les retours à la ligne décoratifs d'un titre gênent plus qu'ils n'aident
   dès que la ligne est déjà courte. */
.masque-mobile {
    display: none;
}

.blog-sous-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}


/* --------------------------------------------------------------------------
   2. Carrousel « à la une »
   -------------------------------------------------------------------------- */
.blog-une {
    padding: 44px 0 8px;
    background: var(--blanc);
}

.blog-une-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.blog-une-entete h2 {
    font-size: clamp(20px, 2.4vw, 26px);
    margin: 0;
}

.blog-une-commandes {
    display: flex;
    gap: 8px;
}

.blog-une-fleche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--rayon-pill);
    border: 1px solid var(--ligne);
    background: var(--blanc);
    color: var(--encre);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.blog-une-fleche:hover {
    border-color: var(--vert);
    background: var(--vert-clair);
    color: var(--vert-fonce);
}

/* La piste défile au doigt comme à la flèche : scroll-snap fait tout le
   travail de calage, le script ne fait que déclencher le défilement et suivre
   la position. */
.blog-une-piste {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Marge de respiration : sans elle, l'ombre des cartes est rognée. */
    padding: 6px 0 18px;
}

.blog-une-piste::-webkit-scrollbar {
    display: none;
}

.blog-une-carte {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.blog-une-lien {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre-sm);
    height: 100%;
    transition: transform .24s ease, box-shadow .24s ease;
}

.blog-une-lien:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre);
}

.blog-une-image {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--menthe);
    min-height: 380px;
}

.blog-une-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.blog-une-lien:hover .blog-une-image img {
    transform: scale(1.04);
}

.blog-une-corps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 38px 40px;
}

.blog-une-categorie {
    display: inline-flex;
    padding: 6px 14px;
    border-radius: var(--rayon-pill);
    background: var(--vert-clair);
    color: var(--vert-fonce);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.blog-une-titre {
    font-family: var(--ff-titre);
    color: var(--encre);
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0;
}

.blog-une-chapeau {
    color: var(--gris);
    font-size: 16px;
    line-height: 1.6;
}

.blog-une-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    color: var(--gris-clair);
    font-size: 13px;
    font-weight: 600;
    /* Repousse la méta et le bouton en bas de la carte, quelle que soit la
       longueur du chapô : les trois cartes du carrousel s'alignent. */
    margin-top: auto;
}

.blog-une-meta-auteur {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--encre);
}

.blog-une-action {
    display: block;
    margin-top: 4px;
}

.blog-une-points {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-bottom: 8px;
}

.blog-une-point {
    width: 26px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: var(--rayon-pill);
    background: var(--ligne);
    cursor: pointer;
    transition: background .2s ease, width .2s ease;
}

.blog-une-point.est-courant {
    width: 40px;
    background: var(--vert);
}


/* --------------------------------------------------------------------------
   3. Barre de catégories
   -------------------------------------------------------------------------- */
.blog-categories-barre {
    padding: 26px 0 4px;
    background: var(--blanc);
}

/* Les fondus sont posés sur l'enveloppe et non sur la piste : ils doivent
   rester immobiles pendant que les pastilles défilent dessous. Leur opacité
   est pilotée par le script, pour ne pas voiler la première ou la dernière
   pastille quand la liste est au bout de sa course. */
.blog-pills-enveloppe {
    position: relative;
}

.blog-pills-enveloppe::before,
.blog-pills-enveloppe::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .22s ease;
    z-index: 1;
}

.blog-pills-enveloppe::before {
    left: 0;
    background: linear-gradient(90deg, var(--blanc) 20%, rgba(255, 255, 255, 0) 100%);
}

.blog-pills-enveloppe::after {
    right: 0;
    background: linear-gradient(270deg, var(--blanc) 20%, rgba(255, 255, 255, 0) 100%);
}

.blog-pills-enveloppe.a-gauche::before,
.blog-pills-enveloppe.a-droite::after {
    opacity: 1;
}

.blog-pills {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Un peu d'air en haut et en bas : sans cela le halo de focus des
       pastilles est coupé par le débordement masqué. */
    padding: 4px 0;
}

.blog-pills::-webkit-scrollbar {
    display: none;
}

.blog-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 17px;
    border-radius: var(--rayon-pill);
    border: 1px solid var(--ligne);
    background: var(--blanc);
    color: var(--encre);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.blog-pill span {
    font-size: 12px;
    font-weight: 700;
    color: var(--gris-clair);
}

.blog-pill:hover {
    border-color: var(--vert);
    color: var(--vert-fonce);
}

/* Pas de .active : conflit avec Bootstrap/Metronic ailleurs dans le projet. */
.blog-pill.est-courante {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

.blog-pill.est-courante span {
    color: rgba(255, 255, 255, .7);
}

.blog-pill-sm {
    padding: 6px 13px;
    font-size: 13px;
}


/* --------------------------------------------------------------------------
   4. Grille d'articles
   -------------------------------------------------------------------------- */
.blog-liste {
    padding: 34px 0 76px;
    background: var(--blanc);
}

.blog-liste-suite {
    background: var(--doux);
    border-top: 1px solid var(--ligne);
    padding: 72px 0;
}

.blog-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 26px;
}

.blog-carte {
    display: flex;
}

.blog-carte-lien {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--blanc);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre-sm);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.blog-carte-lien:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre);
    border-color: transparent;
}

.blog-carte-image {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--menthe);
    aspect-ratio: 3 / 2;
}

.blog-carte-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.blog-carte-lien:hover .blog-carte-image img {
    transform: scale(1.05);
}

.blog-carte-categorie {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 6px 13px;
    border-radius: var(--rayon-pill);
    background: rgba(255, 255, 255, .94);
    color: var(--teal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: var(--ombre-sm);
}

.blog-carte-corps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 20px;
    /* La carte occupe toute la hauteur de sa cellule pour que les pieds de
       carte s'alignent d'une colonne à l'autre. */
    flex: 1;
}

.blog-carte-titre {
    font-family: var(--ff-titre);
    color: var(--encre);
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -.015em;
    margin: 0;
}

.blog-carte-chapeau {
    color: var(--gris);
    font-size: 15px;
    line-height: 1.55;
}

.blog-carte-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--ligne);
}

.blog-carte-duree {
    color: var(--gris-clair);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.blog-vide {
    color: var(--gris);
    font-size: 16px;
    padding: 40px 0;
    text-align: center;
}

.blog-vide a {
    color: var(--vert-fonce);
    font-weight: 600;
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   5. Pagination
   -------------------------------------------------------------------------- */
.blog-pagination {
    margin-top: 44px;
    text-align: center;
}

.blog-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.blog-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: var(--rayon-pill);
    border: 1px solid var(--ligne);
    background: var(--blanc);
    color: var(--encre);
    font-size: 14px;
    font-weight: 700;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.blog-page:hover {
    border-color: var(--vert);
    color: var(--vert-fonce);
}

.blog-page.est-courante {
    background: var(--teal);
    border-color: var(--teal);
    color: #fff;
}

.blog-page-ellipse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    color: var(--gris-clair);
}

.blog-pagination-etat {
    margin: 16px 0 0;
    color: var(--gris-clair);
    font-size: 13px;
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   6. Article
   -------------------------------------------------------------------------- */
.blog-article-heros {
    background: linear-gradient(180deg, var(--doux) 0%, var(--blanc) 100%);
    padding: 46px 0 0;
}

/* Colonne de lecture : le titre et le chapô d'un article ne doivent pas
   s'étaler sur toute la largeur du conteneur, contrairement à l'image. */
.blog-article-heros-corps {
    max-width: 800px;
}

.blog-article-heros h1 {
    font-family: var(--ff-titre);
    color: var(--encre);
    font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.12;
    letter-spacing: -.025em;
    margin: 16px 0 16px;
}

.blog-article-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.blog-article-chapeau {
    font-size: 19px;
    line-height: 1.6;
    color: var(--gris);
    margin: 0 0 26px;
}

.blog-article-image {
    margin: 30px 0 0;
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--menthe);
    box-shadow: var(--ombre-sm);
    aspect-ratio: 16 / 9;
}

.blog-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-article-blog {
    padding-top: 56px;
}

.blog-renvoi-motif {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    margin: 36px 0;
    padding: 24px 26px;
    border-radius: var(--rayon);
    background: var(--doux);
    border: 1px solid var(--ligne);
}

.blog-renvoi-motif strong {
    display: block;
    color: var(--encre);
    font-size: 17px;
    margin-bottom: 4px;
}

.blog-renvoi-motif p {
    margin: 0;
    color: var(--gris);
    font-size: 15px;
}


/* --------------------------------------------------------------------------
   6 bis. Partage d'un article
   -------------------------------------------------------------------------- */
.blog-partage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin: 40px 0 0;
    padding: 18px 22px;
    border-radius: var(--rayon);
    background: var(--doux);
    border: 1px solid var(--ligne);
}

.blog-partage-libelle {
    font-size: 14px;
    font-weight: 700;
    color: var(--encre);
}

.blog-partage-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-right: auto;
}

.blog-partage-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--rayon-pill);
    border: 1px solid var(--ligne);
    background: #fff;
    color: var(--gris);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.blog-partage-bouton:hover {
    border-color: var(--vert);
    background: var(--vert-clair);
    color: var(--vert-fonce);
}

.blog-partage-bouton[hidden] {
    display: none;
}

.blog-partage-confirmation {
    font-size: 13px;
    font-weight: 700;
    color: var(--vert-fonce);
}

.blog-partage-confirmation[hidden] {
    display: none;
}

@media (max-width: 560px) {
    .blog-partage {
        padding: 16px;
        gap: 10px 12px;
    }

    .blog-partage-libelle {
        width: 100%;
    }
}


/* --------------------------------------------------------------------------
   7. Signature et bloc auteur
   -------------------------------------------------------------------------- */
.blog-signature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: 18px 0 26px;
    border-top: 1px solid var(--ligne);
}

.blog-signature-auteur {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.blog-signature-identite {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.blog-signature-identite strong {
    color: var(--encre);
    font-size: 15px;
}

.blog-signature-identite span {
    color: var(--gris-clair);
    font-size: 13px;
}

.blog-signature-auteur:hover .blog-signature-identite strong {
    color: var(--vert-fonce);
}

.blog-signature-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    color: var(--gris-clair);
    font-size: 13px;
    font-weight: 600;
}

.blog-avatar {
    width: 46px;
    height: 46px;
    border-radius: var(--rayon-pill);
    object-fit: cover;
    background: var(--menthe);
    flex: 0 0 auto;
}

.blog-avatar-sm {
    width: 30px;
    height: 30px;
}

/* Médaillon de repli : les initiales, quand l'auteur n'a pas de photo. */
.blog-avatar-initiales {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--menthe);
    color: var(--teal);
    font-weight: 800;
    letter-spacing: .02em;
    font-size: 15px;
    text-transform: uppercase;
}

.blog-avatar-sm.blog-avatar-initiales {
    font-size: 11px;
}

.blog-auteur-carte {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin: 44px 0 0;
    padding: 28px;
    border-radius: var(--rayon);
    background: var(--doux);
    border: 1px solid var(--ligne);
}

.blog-auteur-carte-photo {
    width: 92px;
    height: 92px;
    border-radius: var(--rayon-pill);
    object-fit: cover;
    background: var(--menthe);
    flex: 0 0 auto;
    font-size: 26px;
}

.blog-auteur-carte-corps {
    flex: 1;
    min-width: 0;
}

.blog-auteur-carte-surtitre {
    display: block;
    color: var(--gris-clair);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.blog-auteur-carte-nom {
    font-family: var(--ff-titre);
    color: var(--encre);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.blog-auteur-carte-nom:hover {
    color: var(--vert-fonce);
}

.blog-auteur-carte-titre {
    margin: 3px 0 10px;
    color: var(--vert-fonce);
    font-size: 14px;
    font-weight: 600;
}

.blog-auteur-carte-bio {
    margin: 0 0 14px;
    color: var(--gris);
    font-size: 15px;
    line-height: 1.6;
}

.blog-auteur-carte-liens {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
}

.blog-lien-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: var(--rayon-pill);
    border: 1px solid var(--ligne);
    background: var(--blanc);
    color: var(--encre);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .2s ease, color .2s ease;
}

.blog-lien-social:hover {
    border-color: var(--vert);
    color: var(--vert-fonce);
}


/* --------------------------------------------------------------------------
   8. Page auteur
   -------------------------------------------------------------------------- */
.blog-auteur-heros {
    padding-bottom: 48px;
}

.blog-auteur-profil {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 34px;
    align-items: start;
    margin-top: 26px;
}

.blog-auteur-profil-photo {
    width: 168px;
    height: 168px;
    border-radius: var(--rayon);
    object-fit: cover;
    background: var(--menthe);
    box-shadow: var(--ombre-sm);
    font-size: 46px;
}

.blog-auteur-profil-corps h1 {
    margin: 10px 0 6px;
    font-size: clamp(28px, 3.6vw, 40px);
}

.blog-auteur-profil-titre {
    margin: 0 0 16px;
    color: var(--vert-fonce);
    font-size: 16px;
    font-weight: 600;
}

.blog-auteur-profil-bio {
    color: var(--gris);
    font-size: 16px;
    line-height: 1.68;
    max-width: 68ch;
}

.blog-auteur-profil-bio p {
    margin: 0 0 1em;
}

.blog-auteur-profil-liens {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}


/* --------------------------------------------------------------------------
   9. Texte de fond d'une catégorie
   -------------------------------------------------------------------------- */
.blog-categorie-texte {
    background: var(--doux);
    border-top: 1px solid var(--ligne);
    padding: 64px 0;
}

/* Le texte de fond est posé sur une carte blanche, détachée du fond doux de la
   section. Deux raisons : la colonne de lecture se distingue nettement de la
   grille d'articles au-dessus, et les encarts CTA — dont le fond est
   précisément « doux » — redeviennent visibles au lieu de se fondre dedans. */
.blog-categorie-texte .article-contenu {
    max-width: 820px;
    margin: 0 auto;
    padding: 46px 52px;
    background: #fff;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-sm);
}

/* Premier paragraphe en chapô, comme sur un article. */
.blog-categorie-texte .article-contenu>p:first-child {
    font-size: 18px;
    line-height: 1.65;
    color: var(--encre);
}

/* Le premier titre de section n'a pas besoin de sa marge haute : la carte
   apporte déjà l'espace. */
.blog-categorie-texte .article-contenu>h2:first-child {
    margin-top: 0;
}

/* Les encarts ne débordent pas de la carte. */
.blog-categorie-texte .cta-contenu {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 860px) {
    .blog-categorie-texte .article-contenu {
        padding: 28px 22px;
        border-radius: var(--rayon-sm);
    }

    .blog-categorie-texte .article-contenu>p:first-child {
        font-size: 16.5px;
    }
}


/* --------------------------------------------------------------------------
   10. Encart « prendre rendez-vous » (chargé en AJAX)
   -------------------------------------------------------------------------- */
.cta-psy {
    margin: 0 0 34px;
    padding: 22px 24px;
    border-radius: var(--rayon);
    border: 1px solid var(--ligne);
    background: #fff;
}

.cta-psy.cta-style-carte {
    border-color: transparent;
    box-shadow: var(--ombre);
}

.cta-psy.cta-style-bandeau {
    background: var(--vert-clair);
    border-color: rgba(49, 169, 159, .35);
}

.cta-psy-surtitre {
    margin: 0 0 16px;
    font-family: var(--ff-titre);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--teal);
}

.cta-psy-carte {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 18px;
    align-items: center;
}

.cta-psy-photo {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: var(--rayon-sm);
    overflow: hidden;
    background: var(--menthe);
}

.cta-psy-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-psy-corps {
    min-width: 0;
}

.cta-psy-nom {
    font-family: var(--ff-titre);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--encre);
}

.cta-psy-nom:hover {
    color: var(--vert-fonce);
}

.cta-psy-titre {
    margin: 2px 0 8px;
    font-size: 13.5px;
    color: var(--gris);
}

.cta-psy-infos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 13px;
    color: var(--gris-clair);
    font-weight: 600;
}

.cta-psy-creneaux {
    margin-top: 12px;
}

.cta-psy-creneaux-libelle {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gris-clair);
    margin-bottom: 6px;
}

.cta-psy-creneaux-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.cta-psy-creneau {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--rayon-pill);
    border: 1px solid var(--ligne);
    background: var(--doux);
    font-size: 13px;
    transition: border-color .18s ease, background .18s ease;
}

.cta-psy-creneau strong {
    color: var(--encre);
    font-weight: 700;
}

.cta-psy-creneau span {
    color: var(--vert-fonce);
    font-weight: 700;
}

.cta-psy-creneau:hover {
    border-color: var(--vert);
    background: var(--vert-clair);
}

.cta-psy-action {
    flex: 0 0 auto;
}

/* Squelette de chargement : réserve la place de la carte pour que le texte de
   l'article ne saute pas quand elle arrive. */
.cta-psy-squelette {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 18px;
    align-items: center;
}

.cta-psy-squelette-photo {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: var(--rayon-sm);
    background: var(--doux);
}

.cta-psy-squelette-lignes {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cta-psy-squelette-lignes span {
    display: block;
    height: 11px;
    border-radius: 6px;
    background: var(--doux);
}

.cta-psy-squelette-lignes span:nth-child(1) {
    width: 45%;
}

.cta-psy-squelette-lignes span:nth-child(2) {
    width: 70%;
}

.cta-psy-squelette-lignes span:nth-child(3) {
    width: 35%;
}

@media (prefers-reduced-motion: no-preference) {
    .cta-psy-squelette-photo,
    .cta-psy-squelette-lignes span {
        animation: blog-pulsation 1.4s ease-in-out infinite;
    }
}

@keyframes blog-pulsation {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}


/* --------------------------------------------------------------------------
   11. Champs de formulaire (ressource et auto-évaluation)
   -------------------------------------------------------------------------- */
.blog-formulaire-ligne {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.blog-champ {
    display: block;
    margin-bottom: 14px;
}

.blog-champ>span {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--encre);
}

.blog-champ input {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-sm);
    background: #fff;
    font-family: var(--ff);
    font-size: 15px;
    color: var(--encre);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.blog-champ input:focus {
    outline: none;
    border-color: var(--vert);
    box-shadow: 0 0 0 3px rgba(49, 169, 159, .18);
}

.blog-consentement {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 18px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gris);
    cursor: pointer;
}

.blog-consentement input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--vert);
}

.blog-formulaire-mention {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--gris-clair);
}

/* Message d'échec de l'envoi, posé au-dessus des champs. */
.blog-formulaire-erreur {
    margin: 0 0 14px;
    padding: 12px 15px;
    border-radius: var(--rayon-sm);
    background: rgba(214, 69, 69, .1);
    border: 1px solid rgba(214, 69, 69, .35);
    color: #a32d2d;
    font-size: 14px;
    font-weight: 600;
}

.blog-formulaire-erreur[hidden] {
    display: none;
}

/* Envoi en cours : le bouton reste lisible mais n'invite plus au clic. */
.blog-formulaire .btn.est-en-cours {
    opacity: .6;
    cursor: progress;
}

.blog-formulaire-mention a {
    color: var(--vert-fonce);
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   12. Ressource à télécharger
   -------------------------------------------------------------------------- */
.blog-ressource {
    margin: 48px 0 8px;
    padding: 30px;
    border-radius: var(--rayon);
    background: linear-gradient(180deg, var(--vert-clair) 0%, var(--doux) 100%);
    border: 1px solid rgba(49, 169, 159, .3);
    /* Cible de l'ancre posée par les encarts [cta_telechargement] : sans marge
       haute, l'en-tête flottant recouvrirait le titre. */
    scroll-margin-top: 110px;
}

.blog-ressource-grille {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 26px;
    align-items: start;
}

.blog-ressource-visuel {
    display: flex;
    justify-content: center;
}

.blog-ressource-document {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 128px;
    border-radius: var(--rayon-sm);
    background: #fff;
    color: var(--teal);
    box-shadow: var(--ombre-sm);
    border: 1px solid var(--ligne);
}

.blog-ressource-format {
    position: absolute;
    bottom: -10px;
    padding: 4px 10px;
    border-radius: var(--rayon-pill);
    background: var(--teal);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
}

.blog-ressource-corps h2 {
    margin: 10px 0 10px;
    font-size: clamp(20px, 2.4vw, 26px);
}

.blog-ressource-description {
    margin: 0 0 20px;
    color: var(--gris);
    font-size: 15.5px;
    line-height: 1.6;
}


/* Demande validée : le bloc change de ton, on est passé de la demande à
   l'accusé de réception. */
.blog-ressource.est-confirmee {
    background: linear-gradient(180deg, #fff 0%, var(--doux) 100%);
    border-color: var(--ligne);
}

.blog-ressource-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    margin-bottom: 12px;
    border-radius: var(--rayon-pill);
    background: var(--vert);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.blog-ressource.est-confirmee .blog-ressource-document {
    border-color: var(--vert);
    color: var(--vert-fonce);
}


/* --------------------------------------------------------------------------
   13. Fenêtre proposée après un téléchargement
   -------------------------------------------------------------------------- */
.popup-psy {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Une règle d'auteur l'emporte sur la feuille du navigateur : sans ce rappel,
   le `display: flex` ci-dessus laisserait la fenêtre visible malgré `hidden`. */
.popup-psy[hidden] {
    display: none;
}

body.a-popup-ouverte {
    overflow: hidden;
}

.popup-psy-voile {
    position: absolute;
    inset: 0;
    background: rgba(11, 87, 104, .55);
    backdrop-filter: blur(3px);
}

.popup-psy-boite {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    /* La tache décorative déborde volontairement du coin : sans overflow-x
       explicite, `overflow-y: auto` fait basculer l'axe horizontal en `auto`
       lui aussi, et la fenêtre gagne une barre de défilement latérale. */
    overflow-x: hidden;
    overflow-y: auto;
    padding: 34px 34px 28px;
    border-radius: var(--rayon);
    background: #fff;
    box-shadow: var(--ombre-lg);
    animation: popup-psy-entree .26s ease both;
}

@keyframes popup-psy-entree {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .popup-psy-boite {
        animation: none;
    }
}

/* Tache de couleur, reprise du bloc de fin d'article. */
.popup-psy-tache {
    position: absolute;
    top: -40px;
    right: -30px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 174, 30, .28) 0%, rgba(255, 174, 30, 0) 70%);
    pointer-events: none;
}

.popup-psy-croix {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--rayon-pill);
    background: var(--doux);
    color: var(--gris);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.popup-psy-croix:hover {
    background: var(--vert-clair);
    color: var(--vert-fonce);
}

.popup-psy-entete {
    position: relative;
    margin-bottom: 22px;
}

.popup-psy-entete h2 {
    margin: 12px 0 10px;
    font-size: clamp(21px, 3vw, 26px);
    line-height: 1.2;
}

.popup-psy-texte {
    margin: 0;
    color: var(--gris);
    font-size: 15px;
    line-height: 1.6;
}

.popup-psy-texte strong {
    color: var(--encre);
}

.popup-psy-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: var(--rayon-pill);
    background: var(--vert);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.popup-psy-lien-direct {
    display: inline-block;
    margin-top: 12px;
    color: var(--vert-fonce);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.popup-psy-lien-direct[hidden] {
    display: none;
}

/* Séparation entre la confirmation et la proposition de rendez-vous : deux
   messages distincts, qu'il ne faut pas donner à lire d'un seul bloc. */
.popup-psy-separateur {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 18px;
    color: var(--gris-clair);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.popup-psy-separateur[hidden],
.popup-psy-suite[hidden] {
    display: none;
}

.popup-psy-separateur::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ligne);
}

.popup-psy-relance {
    margin: 0 0 16px;
    color: var(--gris);
    font-size: 15px;
    line-height: 1.6;
}

.popup-psy-relance strong {
    display: block;
    margin-bottom: 3px;
    font-family: var(--ff-titre);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--encre);
}

/* La carte reprise de l'article s'adapte à la largeur de la fenêtre : trois
   colonnes n'y tiendraient pas. */
.popup-psy-contenu .cta-psy-carte {
    grid-template-columns: 76px 1fr;
    gap: 16px;
    padding: 18px;
    border-radius: var(--rayon-sm);
    border: 1px solid var(--ligne);
    background: var(--doux);
}

.popup-psy-contenu .cta-psy-photo {
    width: 76px;
    height: 76px;
}

.popup-psy-contenu .cta-psy-action {
    grid-column: 1 / -1;
    width: 100%;
}

.popup-psy-plus-tard {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 10px;
    border: 0;
    background: transparent;
    color: var(--gris-clair);
    font-family: var(--ff);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.popup-psy-plus-tard:hover {
    color: var(--gris);
    text-decoration: underline;
}

/* Sur mobile, la fenêtre se cale en bas de l'écran : le pouce y accède, et le
   contexte de la page reste visible au-dessus. */
@media (max-width: 560px) {
    .popup-psy {
        align-items: flex-end;
        padding: 0;
    }

    /* Nom d'animation distinct plutôt qu'une redéfinition de popup-psy-entree :
       deux @keyframes homonymes se résolvent par l'ordre du document, ce qui se
       relit mal. */
    .popup-psy-boite {
        width: 100%;
        max-height: 88vh;
        padding: 28px 20px 20px;
        border-radius: var(--rayon) var(--rayon) 0 0;
        animation-name: popup-psy-entree-bas;
    }
}

@keyframes popup-psy-entree-bas {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/* --------------------------------------------------------------------------
   13 bis. Auto-évaluation
   -------------------------------------------------------------------------- */
.blog-test {
    margin: 0 0 38px;
    padding: 28px 30px;
    border-radius: var(--rayon);
    background: #fff;
    border: 1px solid var(--ligne);
    box-shadow: var(--ombre-sm);
    scroll-margin-top: 110px;
}

.blog-test-entete h2 {
    margin: 10px 0 10px;
    font-size: clamp(20px, 2.4vw, 26px);
}

.blog-test-accroche {
    margin: 0 0 10px;
    color: var(--gris);
    font-size: 15.5px;
    line-height: 1.6;
}

.blog-test-consignes {
    margin: 0 0 10px;
    padding: 12px 15px;
    border-radius: var(--rayon-sm);
    background: var(--doux);
    color: var(--gris);
    font-size: 14px;
}

.blog-test-avertissement {
    margin: 0;
    font-size: 13px;
    color: var(--gris-clair);
    font-style: italic;
}

.blog-test-demarrage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-top: 22px;
}

/* Une règle d'auteur l'emporte sur la feuille du navigateur : sans ce rappel,
   le `display: flex` ci-dessus maintient le bloc à l'écran alors que le script
   a posé l'attribut `hidden`, et le bouton « Faire le test » reste affiché
   au-dessus du questionnaire ouvert. */
.blog-test-demarrage[hidden],
.blog-test-progression[hidden] {
    display: none;
}

.blog-test-duree {
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-clair);
}

.blog-test-progression {
    margin: 22px 0 20px;
}

.blog-test-progression-barre {
    height: 7px;
    border-radius: var(--rayon-pill);
    background: var(--doux);
    overflow: hidden;
}

.blog-test-progression-barre span {
    display: block;
    height: 100%;
    border-radius: var(--rayon-pill);
    background: var(--vert);
    transition: width .3s ease;
}

.blog-test-progression-etat {
    margin: 8px 0 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gris-clair);
}

/* Sans JavaScript, toutes les étapes restent affichées à la suite : le
   masquage n'est appliqué qu'une fois le parcours pris en main par le script. */
.blog-test-etape {
    border: 0;
    padding: 0;
    margin: 0 0 26px;
}

.blog-test.est-interactif .blog-test-etape {
    display: none;
}

.blog-test.est-interactif .blog-test-etape.est-active {
    display: block;
}

.blog-test-question {
    display: flex;
    align-items: baseline;
    gap: 11px;
    padding: 0;
    margin-bottom: 18px;
    font-family: var(--ff-titre);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--encre);
}

.blog-test-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: var(--rayon-pill);
    background: var(--vert-clair);
    color: var(--vert-fonce);
    font-size: 13px;
    font-weight: 800;
}

.blog-test-groupe {
    margin: 16px 0 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--gris-clair);
}

.blog-test-choix {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.blog-test-choix-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: var(--rayon-sm);
    border: 1px solid var(--ligne);
    background: #fff;
    font-size: 15px;
    color: var(--encre);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
}

.blog-test-choix-option:hover {
    border-color: var(--vert);
    background: var(--doux);
}

.blog-test-choix-option input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--vert);
}

/* :has() n'est pas universel : l'état coché reste lisible sans lui, le bouton
   radio étant visible. La règle n'est donc qu'un renfort. */
.blog-test-choix-option:has(input:checked) {
    border-color: var(--vert);
    background: var(--vert-clair);
    font-weight: 600;
}

.blog-test-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.blog-test-coordonnees-texte {
    margin: 0 0 20px;
    color: var(--gris);
    font-size: 15px;
}


/* --------------------------------------------------------------------------
   14. Résultats d'une auto-évaluation
   -------------------------------------------------------------------------- */
.blog-resultat {
    padding: 44px 0 72px;
    background: var(--blanc);
}

.blog-resultat-scores {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.blog-resultat-score {
    flex: 1 1 180px;
    padding: 20px 22px;
    border-radius: var(--rayon);
    border: 1px solid var(--ligne);
    background: var(--doux);
}

.blog-resultat-score-total {
    background: var(--vert-clair);
    border-color: rgba(49, 169, 159, .35);
}

.blog-resultat-score-libelle {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gris-clair);
    margin-bottom: 6px;
}

.blog-resultat-score-valeur {
    font-family: var(--ff-titre);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--teal);
}

.blog-resultat-interpretation {
    margin-bottom: 26px;
    padding: 26px 28px;
    border-radius: var(--rayon);
    border: 1px solid var(--ligne);
    background: #fff;
    box-shadow: var(--ombre-sm);
}

.blog-resultat-interpretation h2 {
    margin: 0 0 12px;
    font-size: 21px;
}

.blog-resultat-vide {
    padding: 26px 28px;
    border-radius: var(--rayon);
    background: var(--doux);
    color: var(--gris);
    font-size: 15.5px;
    line-height: 1.6;
}

/* Proposition de rendez-vous posée juste sous les interprétations : elle se
   détache du reste de la page, c'est le moment où elle a le plus de sens. */
.cta-psy-resultat {
    margin: 34px 0;
    padding: 26px 28px;
    background: linear-gradient(180deg, var(--vert-clair) 0%, #fff 100%);
    border-color: rgba(49, 169, 159, .35);
}

.cta-psy-resultat .cta-psy-surtitre {
    font-size: 18px;
    margin-bottom: 6px;
}

.cta-psy-accroche {
    margin: 0 0 18px;
    color: var(--gris);
    font-size: 15px;
    line-height: 1.6;
    max-width: 62ch;
}

.cta-psy-resultat .cta-psy-carte {
    padding: 18px;
    border-radius: var(--rayon-sm);
    background: #fff;
    border: 1px solid var(--ligne);
}

.blog-resultat-avertissement {
    margin: 30px 0;
    padding: 22px 24px;
    border-radius: var(--rayon);
    background: rgba(255, 174, 30, .12);
    border: 1px solid rgba(255, 174, 30, .4);
}

.blog-resultat-avertissement strong {
    display: block;
    margin-bottom: 5px;
    color: #8a6410;
    font-size: 16px;
}

.blog-resultat-avertissement p {
    margin: 0;
    font-size: 14.5px;
    color: var(--gris);
}

.blog-resultat-avertissement a {
    color: var(--vert-fonce);
    font-weight: 700;
    text-decoration: underline;
}

.blog-resultat-retour {
    margin: 0;
}


/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 861px) {
    .masque-mobile {
        display: inline;
    }
}

@media (max-width: 1024px) {
    .blog-une-lien {
        grid-template-columns: 1fr;
    }

    .blog-une-image {
        min-height: 260px;
        aspect-ratio: 16 / 9;
    }

    .blog-une-corps {
        padding: 28px 26px 30px;
    }
}

@media (max-width: 860px) {
    .blog-heros,
    .blog-article-heros {
        padding-top: 32px;
    }

    .blog-une {
        padding-top: 32px;
    }

    /* Les flèches n'ont plus d'intérêt là où le carrousel se fait au doigt :
       restent les points, qui disent où l'on en est. */
    .blog-une-commandes {
        display: none;
    }

    .blog-une-piste {
        gap: 14px;
    }

    .blog-liste {
        padding: 26px 0 56px;
    }

    .blog-liste-suite {
        padding: 52px 0;
    }

    .blog-grille {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-auteur-profil {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-auteur-profil-photo {
        width: 120px;
        height: 120px;
        font-size: 34px;
    }

    .blog-auteur-carte {
        flex-direction: column;
        gap: 18px;
        padding: 22px;
    }

    .blog-article-chapeau {
        font-size: 17px;
    }

    .blog-article-image {
        border-radius: var(--rayon-sm);
    }

    .blog-renvoi-motif {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    /* La carte du psychologue passe en pile : à cette largeur, trois colonnes
       réduiraient la photo et le bouton à presque rien. */
    .cta-psy-carte {
        grid-template-columns: 64px 1fr;
        gap: 14px;
    }

    .cta-psy-photo,
    .cta-psy-squelette-photo {
        width: 64px;
        height: 64px;
    }

    .cta-psy-squelette {
        grid-template-columns: 64px 1fr;
    }

    .cta-psy-action {
        grid-column: 1 / -1;
        width: 100%;
    }

    .blog-ressource {
        padding: 24px 20px;
    }

    .blog-ressource-grille {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-ressource-visuel {
        justify-content: flex-start;
    }

    .blog-test {
        padding: 22px 20px;
    }

    .blog-formulaire-ligne {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .blog-resultat-interpretation,
    .blog-resultat-vide {
        padding: 22px 20px;
    }

    .blog-test-navigation .btn-lg {
        width: 100%;
    }
}

@media (max-width: 560px) {
    /* Les pastilles atteignent le bord de l'écran : la barre se lit alors comme
       une bande qui défile, et non comme une liste tronquée. */
    .blog-categories-barre .conteneur {
        padding-right: 0;
    }

    .blog-pills {
        padding-right: 20px;
    }

    .blog-une-titre {
        font-size: 21px;
    }

    .blog-une-corps {
        padding: 22px 20px 24px;
        gap: 12px;
    }

    .blog-page {
        min-width: 38px;
        height: 38px;
        padding: 0 11px;
    }

    /* Sur un écran étroit, « ‹ Précédent » mange la place des numéros : le
       libellé cède la sienne au seul chevron, repris en ::before pour que le
       lien ne se retrouve pas vide. */
    .blog-page-prec,
    .blog-page-suiv {
        font-size: 0;
    }

    .blog-page-prec::before,
    .blog-page-suiv::before {
        font-size: 20px;
        line-height: 1;
    }

    .blog-page-prec::before {
        content: "‹";
    }

    .blog-page-suiv::before {
        content: "›";
    }
}


/* --------------------------------------------------------------------------
   11. Animations réduites
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .blog-une-piste {
        scroll-behavior: auto;
    }

    .blog-carte-lien,
    .blog-une-lien,
    .blog-carte-image img,
    .blog-une-image img {
        transition: none;
    }

    .blog-carte-lien:hover,
    .blog-une-lien:hover {
        transform: none;
    }

    .blog-carte-lien:hover .blog-carte-image img,
    .blog-une-lien:hover .blog-une-image img {
        transform: none;
    }
}