/*
 * contenus.css — La rédaction
 * ----------------------------
 * Mission : Styliser tout le contenu éditorial issu des fichiers JSON
 *           (blog, carnet, portfolio) et les pages de lecture associées.
 *
 * Périmètre :
 *   - Page liste  : À la une, sidebar (recherche / catégories / tags), grille cartes
 *   - Page lecture : hero, layout 2 colonnes, TDM, bio, similaires, barre progression
 *   - Composants partagés : badges, tags, pagination
 *
 * Nomenclature : préfixe "contenus-" pour la liste, "contenu-" pour la lecture
 *
 * Variables de section (surchargeables par page via <style> inline) :
 *   --section-couleur       → couleur principale de la section (bleu par défaut)
 *   --section-couleur-clair → version claire associée
 *
 * Breakpoints :
 *   Mobile  : max-width 48rem  (768px)
 *   Tablette: max-width 64rem  (1024px)
 */


/* ============================================================
   VARIABLES DE SECTION — par défaut bleu (blog)
   Surcharge par page : <style>:root { --section-couleur: var(--vert); … }</style>
   ============================================================ */

:root {
    --section-couleur:       var(--bleu);
    --section-couleur-clair: var(--bleu-clair);
    --contenus-radius:       0.75rem;
    --contenus-ombre:        0 2px 12px rgba(38, 48, 45, .08);
}


/* ============================================================
   CONTENUS-PAGE — Enveloppe principale (liste)
   ============================================================ */

.contenus-page {
    max-width: 75rem;                               /* ← AJUSTE ICI la largeur de la page */
    margin: 0 auto;
    padding: 0 1.5rem 5rem;                         /* Desktop : marges confortables */
}

/* ---- RESPONSIVE MOBILE ---- */

@media (max-width: 48rem) {

    .contenus-page {
        padding: 0 1rem 3rem;                    /* ← AJUSTE ICI — 0.75rem ≈ 12px de chaque côté */
    }
}


/* ============================================================
   CONTENUS-TAG-ACTIF — bandeau mode ?tag=
   ============================================================ */

.contenus-tag-actif {
    background: var(--section-couleur-clair);
    border-bottom: 1px solid rgba(38, 48, 45, .1);
    padding: 0.65rem 2rem;
}

.contenus-tag-actif__inner {
    max-width: 75rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--noir);
}

.contenus-tag-actif__reset {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--noir-clair);
    text-decoration: none;
    border: 1.5px solid var(--noir-clair);
    border-radius: 2rem;
    padding: 0.2rem 0.65rem;
    transition: color .15s, border-color .15s;
}

.contenus-tag-actif__reset:hover {
    color: var(--noir);
    border-color: var(--noir);
}


/* ============================================================
   CONTENUS-UNE — Article mis en avant (image à gauche)
   ============================================================ */

.contenus-une {
    margin: 2.5rem 0 0;
}

.contenus-une__label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--noir-clair);
    margin-bottom: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Trait décoratif après le label */
.contenus-une__label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(38, 48, 45, .1);
}

/* Carte : grille image gauche / texte droite */
.contenus-une__carte {
    display: grid;
    grid-template-columns: 45% 1fr;                /* ← AJUSTE ICI la proportion image/texte */
    background: var(--blanc);
    border-radius: var(--contenus-radius);
    overflow: hidden;
    border: 1px solid rgba(38, 48, 45, .07);
    box-shadow: var(--contenus-ombre);
    min-height: 300px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s;
}

.contenus-une__carte:hover {
    box-shadow: 0 12px 40px rgba(38, 48, 45, .13);
}

/* Zone image */
.contenus-une__media {
    position: relative;
    overflow: hidden;
}

.contenus-une__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.contenus-une__carte:hover .contenus-une__image {
    transform: scale(1.04);
}

/* Badge "Nouveau" ou "Épinglé" sur l'image */
.contenus-une__epingle {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--section-couleur);
    color: var(--blanc);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.28rem 0.75rem;
    border-radius: 2rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Zone texte */
.contenus-une__corps {
    padding: 2rem 2rem 1.75rem;                     /* ← AJUSTE ICI le padding intérieur */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.875rem;
}

.contenus-une__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.contenus-une__titre {
    font-size: 1.5rem;                              /* ← AJUSTE ICI */
    font-weight: 800;
    line-height: 1.25;
    color: var(--noir);
    margin: 0;
    transition: color .2s;
}

.contenus-une__carte:hover .contenus-une__titre {
    color: var(--section-couleur);
}

.contenus-une__extrait {
    font-size: 0.92rem;
    color: var(--noir-clair);
    line-height: 1.65;
    margin: 0;
}

.contenus-une__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(38, 48, 45, .07);
}

@media (max-width: 48rem) {
    .contenus-une__carte {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .contenus-une__media {
        aspect-ratio: 16 / 7;
    }

    .contenus-une__corps {
        padding: 1.25rem;
    }

    .contenus-une__titre {
        font-size: 1.2rem;
    }
}


/* ============================================================
   CONTENUS-LAYOUT — Grille sidebar + colonne droite
   ============================================================ */

.contenus-layout {
    display: grid;
    grid-template-columns: 16rem 1fr;              /* ← AJUSTE ICI la largeur sidebar */
    gap: 3rem;                                      /* ← AJUSTE ICI l'espace */
    align-items: start;
    margin-top: 2.5rem;
}

@media (max-width: 64rem) {
    .contenus-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}


/* ============================================================
   CONTENUS-SIDEBAR — Filtres, recherche, tags
   ============================================================ */

.contenus-sidebar {
    position: sticky;
    top: 2rem;                                      /* ← AJUSTE ICI selon la hauteur du header */
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

@media (max-width: 64rem) {
    .contenus-sidebar {
        position: static;
    }
}

/* Bloc générique sidebar */
.contenus-sidebar__bloc {
    background: var(--blanc);
    border-radius: var(--contenus-radius);
    border: 1px solid rgba(38, 48, 45, .07);
    padding: 1.1rem;
    box-shadow: var(--contenus-ombre);
}

/* ── Accordéon : bouton titre ── */
.contenus-sidebar__accordeon-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--noir-clair);
    cursor: pointer;
    text-align: left;
}

/* Chevron — rotation quand ouvert */
.contenus-sidebar__accordeon-chevron {
    width: 0.85rem;
    height: 0.85rem;
    transition: transform .25s ease;
    opacity: .5;
    flex-shrink: 0;
}

.contenus-sidebar__accordeon-btn[aria-expanded="true"] .contenus-sidebar__accordeon-chevron {
    transform: rotate(180deg);
}

/* Corps accordéon — fermé par défaut */
.contenus-sidebar__accordeon-corps {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .3s ease, opacity .25s ease;
}

.contenus-sidebar__accordeon-corps.ouvert {
    max-height: 600px;                              /* ← Assez grand pour tout le contenu */
    opacity: 1;
}

/* ── Recherche ── */
.contenus-sidebar__recherche {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
}

.contenus-sidebar__recherche input {
    width: 100%;
    padding: 0.52rem 2rem 0.52rem 0.75rem;
    border: 1px solid rgba(38, 48, 45, .12);
    border-radius: 0.5rem;
    font-size: 0.82rem;
    font-family: inherit;
    background: var(--coton);
    color: var(--noir);
    transition: border-color .2s, background .2s;
}

.contenus-sidebar__recherche input:focus {
    outline: none;
    border-color: var(--section-couleur);
    background: var(--blanc);
}

.contenus-sidebar__recherche input::placeholder {
    color: var(--noir-clair);
}

.contenus-sidebar__recherche svg {
    position: absolute;
    right: 0.6rem;
    color: var(--noir-clair);
    pointer-events: none;
}

/* ── Catégories ── */
.contenus-sidebar__cats {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.75rem;
}

.contenus-sidebar__cat-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.45rem 0.625rem;
    border-radius: 0.4rem;
    border: none;
    background: transparent;
    color: var(--noir);
    font-family: inherit;
    font-size: 0.83rem;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}

.contenus-sidebar__cat-btn:hover {
    background: rgba(38, 48, 45, .05);
}

.contenus-sidebar__cat-btn.actif {
    background: var(--section-couleur-clair);
    font-weight: 600;
}

/* Badge compteur catégorie — arrondi gris */
.contenus-sidebar__cat-count {
    font-size: 0.7rem;
    color: var(--noir-clair);
    background: rgba(38, 48, 45, .08);
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
    flex-shrink: 0;
}

.contenus-sidebar__cat-btn.actif .contenus-sidebar__cat-count {
    background: rgba(38, 48, 45, .14);
}

/* ── Nuage de tags ── */
.contenus-sidebar__nuage {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.4rem;
    align-items: baseline;
    margin-top: 0.75rem;
}

.contenus-sidebar__tag {
    display: inline-block;
    padding: 0.18rem 0.5rem;
    border-radius: 2rem;
    background: rgba(38, 48, 45, .06);
    color: var(--noir-clair);
    font-size: 0.78rem;
    text-decoration: none;
    transition: background .2s, color .2s;
    cursor: pointer;
    font-family: inherit;
    border: none;
}

.contenus-sidebar__tag:hover,
.contenus-sidebar__tag.actif {
    background: var(--section-couleur-clair);
    color: var(--noir);
}

/* Compteur tag — discret, juste le chiffre entre parenthèses */
.contenus-sidebar__tag-count {
    font-size: 0.7em;
    opacity: .55;
    margin-left: 0.15em;
}


/* ============================================================
   CONTENUS-GRILLE — Grille 3 colonnes d'articles
   ============================================================ */

.contenus-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);          /* ← AJUSTE ICI */
    gap: 1.25rem;
}

@media (max-width: 64rem) {
    .contenus-grille {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 48rem) {
    .contenus-grille {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   CONTENUS-CARTE — Carte article blog (variante Épurée)
   ============================================================ */

.contenus-carte {
    background: var(--blanc);
    border-radius: var(--contenus-radius);
    overflow: hidden;
    border: 1px solid rgba(38, 48, 45, .07);
    box-shadow: var(--contenus-ombre);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}

.contenus-carte:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(38, 48, 45, .1);
}

/* Masquage JS via [hidden] */
.contenus-carte[hidden] {
    display: none !important;
}

/* Zone image — contexte pour le badge */
.contenus-carte__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.contenus-carte__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
    filter: saturate(.9);
}

.contenus-carte:hover .contenus-carte__image {
    transform: scale(1.04);
    filter: saturate(1);
}

/* Badge temps de lecture — coin haut droite sur l'image */
.contenus-blog__badge-lecture {
    position: absolute;
    top: 0.6rem;                                    /* ← AJUSTE ICI */
    right: 0.6rem;                                  /* ← AJUSTE ICI */
    background: rgba(26, 35, 32, .72);
    backdrop-filter: blur(4px);
    color: var(--blanc);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, .15);
    letter-spacing: .02em;
    pointer-events: none;
    white-space: nowrap;
}

/* Corps de la carte */
.contenus-carte__corps {
    padding: 1rem 1.1rem 1rem;                      /* ← AJUSTE ICI */
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}

/* Badge catégorie */
.contenus-carte__categorie {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 0.2rem 0.65rem;
    border-radius: 2rem;
    align-self: flex-start;
    background: var(--section-couleur-clair);
    color: var(--noir);
    transition: background .2s;
}

/* Couleurs catégorie selon la section */
.contenus-carte__categorie--sante      { background: var(--vert-clair);   }
.contenus-carte__categorie--bienetre   { background: var(--bleu-clair);   }
.contenus-carte__categorie--cosmetique { background: var(--marron-clair); }
.contenus-carte__categorie--marketing  { background: rgba(38, 48, 45, .1); }

/* Titre */
.contenus-carte__titre {
    font-size: 0.93rem;                             /* ← AJUSTE ICI */
    font-weight: 700;
    line-height: 1.4;
    color: var(--noir);
    margin: 0;
}

.contenus-carte__titre a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

.contenus-carte__titre a:hover {
    color: var(--section-couleur);
}

/* Extrait */
.contenus-carte__extrait {
    font-size: 0.82rem;
    color: var(--noir-clair);
    line-height: 1.6;
    flex: 1;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;                          /* ← AJUSTE ICI le nb de lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pied de carte */
.contenus-carte__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(38, 48, 45, .06);
    margin-top: auto;
}

/* Tags inline en bas de carte */
.contenus-carte__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.contenus-carte__tag {
    font-size: 0.68rem;
    color: var(--noir-clair);
    background: rgba(38, 48, 45, .06);
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.contenus-carte__tag:hover {
    background: var(--section-couleur-clair);
    color: var(--noir);
}

/* Date */
.contenus-carte__badge-date {
    font-size: 0.72rem;
    color: var(--noir-clair);
    white-space: nowrap;
}

/* Lien "Lire →" */
.contenus-carte__lien {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--section-couleur);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .2s;
}

.contenus-carte__lien:hover {
    opacity: .75;
}


/* ============================================================
   CONTENUS-VIDE — Message aucun résultat
   ============================================================ */

.contenus-vide {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--noir-clair);
    font-size: 0.9rem;
    background: var(--blanc);
    border-radius: var(--contenus-radius);
    border: 1px dashed rgba(38, 48, 45, .15);
}

.contenus-vide[hidden] {
    display: none;
}


/* ============================================================
   CONTENUS-PAGINATION — Blog, carnet, portfolio
   ============================================================ */

.contenus-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
}

.contenus-pagination__btn {
    padding: 0.5rem 1.1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(38, 48, 45, .12);
    background: var(--blanc);
    color: var(--noir);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: border-color .2s, color .2s;
}

.contenus-pagination__btn:hover {
    border-color: var(--section-couleur);
    color: var(--section-couleur);
}

.contenus-pagination__btn--inactif {
    opacity: .35;
    pointer-events: none;
    cursor: default;
}

.contenus-pagination__info {
    font-size: 0.78rem;
    color: var(--noir-clair);
    padding: 0 0.5rem;
}


/* ============================================================
   ══════════ PAGES DE LECTURE ══════════
   contenu-lecture-* : article, note, projet
   ============================================================ */


/* ── Barre de progression lecture (fixe en haut) ── */

.contenu-barre-progression {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;                                    /* ← AJUSTE ICI l'épaisseur */
    width: 0%;
    background: var(--section-couleur);
    border-radius: 0 2px 2px 0;
    z-index: 300;
    transition: width .1s linear;
    pointer-events: none;
}


/* ── Layout 2 colonnes ── */

.contenu-lecture {
    max-width: 75rem;                               /* ← AJUSTE ICI */
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    display: grid;
    grid-template-columns: 14rem 1fr;               /* ← AJUSTE ICI la largeur sidebar */
    gap: 3rem;
    align-items: start;
}

@media (max-width: 64rem) {
    .contenu-lecture {
        grid-template-columns: 1fr;
        padding: 2rem 1.25rem 3rem;
        gap: 2rem;
    }
}


/* ── Sidebar lecture ── */

.contenu-lecture__sidebar {
    position: sticky;
    top: 2rem;                                      /* ← AJUSTE ICI selon hauteur header */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 64rem) {
    .contenu-lecture__sidebar {
        position: static;
    }
}

/* Bloc générique sidebar lecture */
.contenu-lecture__sidebar-bloc {
    background: var(--blanc);
    border-radius: var(--contenus-radius);
    border: 1px solid rgba(38, 48, 45, .07);
    padding: 1.1rem;
    box-shadow: var(--contenus-ombre);
}


/* ── Table des matières ── */

/* Bouton titre (accordéon) */
.contenu-tdm__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--noir-clair);
    cursor: pointer;
    margin-bottom: 0;
}

/* Chevron */
.contenu-tdm__chevron {
    width: 0.82rem;
    height: 0.82rem;
    opacity: .5;
    transition: transform .25s ease;
    flex-shrink: 0;
}

.contenu-tdm__btn[aria-expanded="true"] .contenu-tdm__chevron {
    transform: rotate(180deg);
}

/* Liste des entrées */
.contenu-tdm__liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.75rem;
    overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease;
}

/* État caché via [hidden] ou classe fermee */
.contenu-tdm__liste[hidden] {
    display: none;
}

.contenu-tdm__item a {
    display: block;
    font-size: 0.78rem;
    color: var(--noir-clair);
    padding: 0.3rem 0.5rem;
    border-radius: 0.35rem;
    text-decoration: none;
    border-left: 2px solid transparent;
    line-height: 1.4;
    transition: background .15s, color .15s, border-color .15s;
}

.contenu-tdm__item a:hover,
.contenu-tdm__item a.actif {
    background: var(--section-couleur-clair);
    border-left-color: var(--section-couleur);
    color: var(--noir);
}

.contenu-tdm__item a.actif {
    font-weight: 600;
}

/* H3 — légèrement indenté */
.contenu-tdm__item--h3 a {
    padding-left: 1rem;                             /* ← AJUSTE ICI l'indentation */
    font-size: 0.72rem;
}


/* ── CTA sidebar lecture ── */

.contenu-lecture__cta {
    padding: 1.1rem;
    border-radius: var(--contenus-radius);
    background: var(--section-couleur-clair);
    border: 1px solid rgba(38, 48, 45, .07);
}

.contenu-lecture__cta-titre {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--noir);
    margin-bottom: 0.4rem;
    line-height: 1.35;
}

.contenu-lecture__cta-texte {
    font-size: 0.75rem;
    color: var(--noir-clair);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.contenu-lecture__cta-btn {
    display: block;
    text-align: center;
    background: var(--section-couleur);
    color: var(--blanc);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .2s;
}

.contenu-lecture__cta-btn:hover {
    opacity: .85;
}


/* ── Carte client — sidebar portfolio ── */

.contenu-projet-client {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.contenu-projet-client__logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: var(--section-couleur);
    color: var(--blanc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 800;
    flex-shrink: 0;
}

.contenu-projet-client__nom {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--noir);
    margin: 0;
}

.contenu-projet-client__secteur {
    font-size: 0.75rem;
    color: var(--noir-clair);
    margin: 0.1rem 0 0;
}


/* ── Fiche projet — sidebar portfolio ── */

.contenu-projet-fiche {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contenu-projet-fiche__champ {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(38, 48, 45, .06);
}

.contenu-projet-fiche__champ:last-of-type {
    border-bottom: none;
}

.contenu-projet-fiche__label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--noir-clair);
}

.contenu-projet-fiche__valeur {
    font-size: 0.85rem;
    color: var(--noir);
    font-weight: 600;
}

.contenu-projet-fiche__lien {
    display: block;
    margin-top: 0.75rem;
    background: var(--section-couleur);
    color: var(--blanc);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-align: center;
    transition: opacity .2s;
}

.contenu-projet-fiche__lien:hover {
    opacity: .85;
}


/* ── Corps de l'article ── */

.contenu-lecture__corps {
    min-width: 0;                                   /* Évite le débordement dans la grille */
}

/* Prose — styles typographiques du contenu HTML */
.contenu-lecture__prose {
    max-width: 680px;                               /* ← AJUSTE ICI la largeur de lecture */
}

.contenu-lecture__prose h2 {
    font-size: 1.3rem;                              /* ← AJUSTE ICI */
    font-weight: 700;
    color: var(--noir);
    margin: 2.25rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--section-couleur-clair);
    scroll-margin-top: 5.5rem;                      /* ← Compense le header sticky */
    line-height: 1.3;
}

.contenu-lecture__prose h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--noir);
    margin: 1.75rem 0 0.5rem;
    scroll-margin-top: 5.5rem;
}

.contenu-lecture__prose p {
    font-size: 0.97rem;
    color: var(--noir);
    line-height: 1.85;                              /* ← AJUSTE ICI l'interligne */
    margin-bottom: 1.1rem;
}

.contenu-lecture__prose strong {
    font-weight: 700;
    color: var(--noir);
}

.contenu-lecture__prose em {
    font-style: italic;
}

.contenu-lecture__prose a {
    color: var(--section-couleur);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.contenu-lecture__prose a:hover {
    color: var(--noir);
}

.contenu-lecture__prose ul {
    margin: 0 0 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contenu-lecture__prose ul li {
    font-size: 0.97rem;
    color: var(--noir);
    line-height: 1.7;
}

.contenu-lecture__prose ul li::marker {
    color: var(--section-couleur);
}

.contenu-lecture__prose ol {
    margin: 0 0 1.1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contenu-lecture__prose ol li {
    font-size: 0.97rem;
    color: var(--noir);
    line-height: 1.7;
}

.contenu-lecture__prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--section-couleur);
    background: var(--section-couleur-clair);
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
    color: var(--noir-clair);
    font-size: 0.93rem;
    line-height: 1.7;
}

.contenu-lecture__prose blockquote p {
    margin-bottom: 0;
}

.contenu-lecture__prose img {
    width: 100%;
    border-radius: var(--contenus-radius);
    margin: 1.5rem 0;
    display: block;
    box-shadow: var(--contenus-ombre);
}


/* ── Tags en bas d'article ── */

.contenu-lecture__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(38, 48, 45, .08);
}

.contenu-lecture__tags-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--noir-clair);
}

.contenu-lecture__tags-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.contenu-lecture__tag {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--noir-clair);
    background: rgba(38, 48, 45, .07);
    padding: 0.2rem 0.6rem;
    border-radius: 2rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.contenu-lecture__tag:hover {
    background: var(--section-couleur-clair);
    color: var(--noir);
}


/* ── Articles similaires ── */

.contenu-similaires {
    background: var(--coton);
    border-top: 1px solid rgba(38, 48, 45, .07);
    padding: 3rem 1.5rem 4rem;
}

.contenu-similaires__inner {
    max-width: 75rem;
    margin: 0 auto;
}

.contenu-similaires__label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--noir-clair);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.contenu-similaires__label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(38, 48, 45, .1);
}

.contenu-similaires__grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.contenu-similaire-carte {
    background: var(--blanc);
    border-radius: var(--contenus-radius);
    overflow: hidden;
    border: 1px solid rgba(38, 48, 45, .07);
    box-shadow: var(--contenus-ombre);
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
}

.contenu-similaire-carte:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(38, 48, 45, .1);
}

.contenu-similaire-carte__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.contenu-similaire-carte__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.contenu-similaire-carte:hover .contenu-similaire-carte__media img {
    transform: scale(1.04);
}

/* Placeholder couleur si pas d'image */
.contenu-similaire-carte__media--placeholder {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contenu-similaire-carte__media--sante      { background: linear-gradient(135deg, var(--vert-clair), var(--vert)); }
.contenu-similaire-carte__media--bienetre   { background: linear-gradient(135deg, var(--bleu-clair), var(--bleu)); }
.contenu-similaire-carte__media--cosmetique { background: linear-gradient(135deg, var(--marron-clair), var(--marron)); }
.contenu-similaire-carte__media--marketing  { background: linear-gradient(135deg, rgba(38,48,45,.1), rgba(38,48,45,.25)); }

.contenu-similaire-carte__corps {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.contenu-similaire-carte__cat {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 2rem;
    align-self: flex-start;
    color: var(--noir);
}

.contenu-similaire-carte__cat--sante      { background: var(--vert-clair);   }
.contenu-similaire-carte__cat--bienetre   { background: var(--bleu-clair);   }
.contenu-similaire-carte__cat--cosmetique { background: var(--marron-clair); }
.contenu-similaire-carte__cat--marketing  { background: rgba(38,48,45,.1);   }

.contenu-similaire-carte__titre {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--noir);
    margin: 0;
}

.contenu-similaire-carte__date {
    font-size: 0.72rem;
    color: var(--noir-clair);
    margin-top: auto;
    padding-top: 0.5rem;
    display: block;
}

@media (max-width: 64rem) {
    .contenu-similaires__grille {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 48rem) {
    .contenu-similaires__grille {
        grid-template-columns: 1fr;
    }

    .contenu-similaires {
        padding: 2.5rem 1.25rem 3rem;
    }
}


/* ============================================================
   ACCESSIBILITÉ — sr-only
   ============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}