/* ============================================================================
 * Components — v0.8.0
 * 
 * Inter partout. Palette sobre v2.6. Fond blanc dominant.
 * Style proche de la v0.6.0 (qui marchait), enrichi des features v0.7.1.
 * ========================================================================== */


/* ============================================================================
 * cn-sticky-top — barre fixe en haut au scroll
 *
 * v0.8.14 : passé de position: sticky à position: fixed pour garantir un
 * comportement vraiment statique. Sticky avait des comportements imprévus
 * dans un body display: flex.
 *
 * Conséquence : le wrapper sort du flux. Pour ne pas que le contenu de
 * <main> soit masqué derrière, un JS calcule la hauteur réelle du
 * sticky-top et applique un padding-top équivalent au <main> (voir main.js).
 *
 * - Sur la home (pas de breadcrumb) : seul le header est dans le sticky.
 * - Sur les pages internes : header + breadcrumb-bar (avec filet or en
 *   bordure inférieure qui sépare la zone fixe du contenu défilant).
 *
 * z-index 100 : au-dessus du contenu, en-dessous du search overlay (1000)
 * et du FAB édition admin (9000).
 * ========================================================================== */

.cn-sticky-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: var(--cn-blanc);
}

/* Quand la barre d'admin WordPress est visible (utilisateur connecté),
   décaler le sticky-top de sa hauteur pour qu'il ne soit pas masqué :
   - 32px sur desktop
   - 46px sur mobile (≤782px : admin bar plus haute) */
body.admin-bar .cn-sticky-top {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .cn-sticky-top {
        top: 46px;
    }
}

.cn-breadcrumb-bar {
    background-color: var(--cn-ivoire-95);
    border-bottom: var(--cn-border-thick) solid var(--cn-or);
}
.cn-breadcrumb-bar .cn-breadcrumb {
    /* Le breadcrumb dans la bar a un padding plus généreux que sa version
       inline d'origine. */
    padding-block: var(--cn-space-3);
}


/* ============================================================================
 * cn-site-header
 * ========================================================================== */

.cn-site-header {
    background-color: var(--cn-blanc);
    border-bottom: var(--cn-border-thin) solid var(--cn-bleu-nuit-10);
    position: relative;
    z-index: 50;
}

.cn-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cn-space-4);
    padding-block: var(--cn-space-4);
    max-width: var(--cn-content-ultra);
    margin-inline: auto;
    padding-inline: var(--cn-content-edge);
}
@media (min-width: 1024px) {
    .cn-site-header__inner { padding-block: var(--cn-space-5); }
}

/* Brand : lockup image officiel */
.cn-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--cn-space-4);
    text-decoration: none;
    color: var(--cn-bleu-nuit);
    flex-shrink: 0; /* v0.11.42 — le brand ne se laisse JAMAIS comprimer par le flex (cause de l'écrasement du lockup) */
}
.cn-brand:hover { color: var(--cn-bleu-nuit); }

/* v0.11.17 : 2 surfaces brand coexistent dans le DOM, CSS bascule entre
   elles. Convention de breakpoints :
     - < 1024px    : pas pertinent, header passe en mode burger
     - 1024-1279   : hexagone seul (cn-brand__mark) — gain de place
                     pour cohabiter avec le menu et un éventuel FAB
                     à droite (cn-assistant, cn-accounts).
     - >= 1280px   : lockup horizontal complet (cn-brand__lockup)
                     + tagline à droite.

   Par défaut (mobile) : lockup visible, mark caché. Les media queries
   ci-dessous réécrivent au besoin. */
.cn-brand__lockup-wrap { display: block; }
.cn-brand__mark { display: none; }

.cn-brand__lockup {
    display: block;
    height: 44px;
    width: auto;
    object-fit: contain; /* v0.11.42 — sécurité : ratio préservé même si la box est contrainte (jamais d'étirement) */
}
@media (min-width: 1024px) { .cn-brand__lockup { height: 52px; } }
@media (min-width: 1800px) { .cn-brand__lockup { height: 60px; } }

/* Logo : hexagone seul réservé au desktop TRÈS étroit (1024-1099px).
   v0.11.46 — découplé des menus. Le logo complet (lockup) ne coûte qu'~100px
   de plus que l'hexagone et tient dès qu'on a la largeur desktop : ce n'est
   PAS lui qui faisait déborder le header (c'étaient la tagline, les compteurs
   et la recherche large). On affiche donc le lockup dès 1100px ; l'hexagone ne
   sert plus que sur la frange 1024-1099px. Les menus en format long (compteurs)
   et la recherche large gardent leur seuil propre (1560px), la tagline le sien
   (1600px, cf. plus bas) — chacun apparaît quand il tient. */
@media (min-width: 1024px) and (max-width: 1099.98px) {
    .cn-brand__lockup-wrap { display: none; }
    .cn-brand__mark {
        display: block;
        height: 44px;
        width: 44px;
        object-fit: contain;
    }
}

/* Tagline 2 lignes à droite du lockup.
   v0.11.59 (C218) : seuil abaissé 1800px -> 1600px. À 1800px l'inner du
   header est plafonné par --cn-content-ultra (=1600px sous 1680px de
   viewport), si bien qu'entre ~1560 et 1800px on avait compteurs +
   recherche large affichés ET un large vide au centre, mais le slogan
   restait caché. Le cluster droit (nav + recherche + compte) tient avec
   beaucoup de marge dès 1560px : le slogan (~145px) loge donc dès 1600px
   sans serrer la nav au point de bascule (1560px lui serait trop juste). */
.cn-brand__tagline {
    display: none;
}
@media (min-width: 1600px) {
    .cn-brand__tagline {
        display: inline-flex;
        flex-direction: column;
        gap: 1px;
        padding-left: var(--cn-space-4);
        border-left: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
        line-height: var(--cn-leading-snug);
    }
}
.cn-brand__tagline-line {
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-regular);
    color: var(--cn-bleu-nuit-50);
}


/* ============================================================================
 * cn-nav — Navigation desktop
 * ========================================================================== */

.cn-nav { display: none; }
@media (min-width: 1024px) {
    .cn-nav {
        display: flex;
        align-items: center;
        gap: var(--cn-space-5);
    }
}

.cn-nav__list {
    display: flex;
    align-items: center;
    gap: var(--cn-space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.cn-nav__item { margin: 0; }

.cn-nav__link {
    font-size: var(--cn-text-base);
    font-weight: var(--cn-weight-medium);
    color: var(--cn-bleu-nuit);
    text-decoration: none;
    padding: var(--cn-space-2) 0;
    border-bottom: var(--cn-border-medium) solid transparent;
    transition: color var(--cn-duration-fast) var(--cn-easing),
                border-color var(--cn-duration-fast) var(--cn-easing);
}
.cn-nav__link:hover,
.cn-nav__link:focus-visible {
    color: var(--cn-or);
    border-color: var(--cn-or);
}
.cn-nav__link[aria-current="page"] {
    color: var(--cn-bleu-nuit);
    border-color: var(--cn-bleu-nuit);
}

/* v0.11.17 : compteurs numériques des items "N piliers / N domaines /
   N mesures" enveloppés dans un span isolable. Visibles sur desktop
   confortable (>= 1440px), masqués sur la zone 1024-1439px
   où la barre est étroite et doit cohabiter avec un FAB à droite.
   Le &nbsp; insécable est À L'INTÉRIEUR du span : il disparaît avec
   le compteur, le mot (piliers, domaines, mesures) ne se retrouve pas
   précédé d'un espace flottant.

   Effet :
     - >= 1440 : "6 piliers", "32 domaines", "392 mesures"
     - 1024-1439 : "piliers", "domaines", "mesures"
     - < 1024 : drawer mobile, géré séparément
*/
.cn-nav__link-count {
    display: inline;
}
/* v0.11.38 : borne haute relevée 1279.98 -> 1439.98. La barre serrait
   aussi entre 1280 et 1440 (lockup complet + tagline déjà affichés à
   >=1280, mais compteurs visibles + recherche large). 1440 est le
   breakpoint « confortable » canonique du thème (lockup height,
   --cn-content-wide). >>> SEUIL NAV CONFORTABLE : 3 occurrences à garder
   synchrones (ici, recherche 220px, recherche compacte). <<< */
@media (min-width: 1024px) and (max-width: 1559.98px) {
    .cn-nav__link-count {
        display: none;
    }
    /* Le menu peut se permettre de respirer un peu plus quand les
       compteurs disparaissent — labels plus courts. */
    .cn-nav__list {
        gap: var(--cn-space-4);
    }
    /* v0.11.18 : capitalisation de la première lettre des items menu
       en zone intermédiaire. Quand le compteur "6 " disparaît, le mot
       "piliers" se retrouve seul en minuscule alors que les autres
       items ("Manifeste", "Pragmatisme", "Tribunes") sont capitalisés.
       Cohérence visuelle : on capitalise la première lettre via CSS
       uniquement dans cette tranche.

       Choix de text-transform: capitalize plutôt que ::first-letter :
         - capitalize fonctionne sur tout type d'inline (a, span, etc.)
           sans dépendre du contexte block/inline-block.
         - Idempotent : "Manifeste", "Pragmatisme", "Tribunes" déjà
           capitalisés restent identiques.
         - Risque latent : si un futur item devient bi-mot
           ("Tribunes récentes"), il deviendrait "Tribunes Récentes".
           À ce jour aucun item du menu n'est bi-mot — surveiller si
           ça change.

       Le HTML conserve "piliers/domaines/mesures" en minuscule pour
       que le rendu >= 1440px lise correctement "6 piliers, 30 domaines,
       351 mesures" (en français, on n'écrit pas "6 Piliers"). */
    .cn-nav__link {
        text-transform: capitalize;
    }
}

.cn-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--cn-space-2);
    padding: var(--cn-space-2) var(--cn-space-4);
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
    color: var(--cn-bleu-nuit);
    background-color: transparent;
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit);
    border-radius: var(--cn-radius-md);
    text-decoration: none;
    transition: background-color var(--cn-duration-fast) var(--cn-easing),
                color var(--cn-duration-fast) var(--cn-easing);
}
.cn-nav__cta:hover,
.cn-nav__cta:focus-visible {
    background-color: var(--cn-bleu-nuit);
    color: var(--cn-blanc);
}
.cn-nav__cta-arrow {
    transition: transform var(--cn-duration-normal) var(--cn-easing);
}
.cn-nav__cta:hover .cn-nav__cta-arrow {
    transform: translateX(3px);
}


/* ============================================================================
 * cn-account — contrôle de compte fixe dans le header (v0.11.29)
 *
 * Bonhomme + connexion/déconnexion, toujours visible en haut à droite, EN PLUS
 * du FAB cn-assistant. La macro components/account-control.twig est rendue deux
 * fois : variante 'desktop' (dans .cn-nav, >=1024px) et 'mobile' (dans
 * .cn-mobile-controls, <1024px). On bascule la visibilité par variante pour
 * coller au pattern existant (recherche + menu).
 * ========================================================================== */

.cn-account {
    display: inline-flex;
    align-items: center;
    gap: var(--cn-space-2);
}

/* Visibilité par variante — mêmes seuils que .cn-nav / .cn-mobile-controls. */
.cn-account--desktop { display: none; }
@media (min-width: 1024px) {
    .cn-account--desktop { display: inline-flex; }
    .cn-account--mobile  { display: none; }
}

.cn-account__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--cn-bleu-nuit);
    background: transparent;
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    border-radius: var(--cn-radius-full);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--cn-duration-fast) var(--cn-easing),
                border-color var(--cn-duration-fast) var(--cn-easing),
                background-color var(--cn-duration-fast) var(--cn-easing);
}
.cn-account__btn:hover,
.cn-account__btn:focus-visible {
    border-color: var(--cn-bleu-nuit-50);
    color: var(--cn-or);
}
.cn-account__btn svg { width: 20px; height: 20px; display: block; }

/* Bonhomme déconnecté : silhouette atténuée. */
.cn-account__person { color: var(--cn-bleu-nuit-50); }

/* Avatar connecté : initiale du prénom sur pastille bleu nuit. */
.cn-account__person--auth {
    color: var(--cn-blanc);
    background-color: var(--cn-bleu-nuit);
    border-color: var(--cn-bleu-nuit);
}
.cn-account__person--auth:hover,
.cn-account__person--auth:focus-visible {
    color: var(--cn-blanc);
    background-color: var(--cn-bleu-nuit-95);
    border-color: var(--cn-bleu-nuit-95);
}
.cn-account__avatar {
    font-family: var(--cn-font-sans);
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-bold);
    line-height: 1;
    text-transform: uppercase;
}

/* v0.11.39 : pastille avec photo de profil. La photo (purement locale au
   widget cn-assistant, dataURL JPEG) est injectée en background-image par le
   JS du thème via l'événement 'cn-assistant:identity'. On masque l'initiale
   et on neutralise le fond/texte bleu nuit (l'image couvre toute la pastille,
   qui reste ronde via le border-radius du .cn-account__btn). */
.cn-account__person--has-photo {
    background-color: var(--cn-bleu-nuit-20);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;
}
.cn-account__person--has-photo .cn-account__avatar { display: none; }
/* Au survol : on garde la photo (pas de retour au fond bleu), seul le liseré
   se renforce pour le feedback — cohérent avec le reste de la nav. */
.cn-account__person--has-photo:hover,
.cn-account__person--has-photo:focus-visible {
    background-color: var(--cn-bleu-nuit-20);
    border-color: var(--cn-bleu-nuit);
}

/* Déconnexion : reste sobre, vire à l'or au survol comme le reste de la nav. */
.cn-account__auth--logout:hover,
.cn-account__auth--logout:focus-visible {
    color: var(--cn-or);
    border-color: var(--cn-bleu-nuit-50);
}

/* Desktop : cibles légèrement plus généreuses, alignées sur la barre de nav. */
@media (min-width: 1024px) {
    .cn-account__btn { width: 42px; height: 42px; }
    .cn-account__btn svg { width: 21px; height: 21px; }
}


/* ============================================================================
 * cn-mobile-controls (loupe + burger)
 * ========================================================================== */

.cn-mobile-controls {
    display: flex;
    align-items: center;
    gap: var(--cn-space-2);
}
@media (min-width: 1024px) {
    /* v0.11.32 — masquer TOUT le conteneur mobile, pas seulement ses enfants.
       En restant display:flex avec un contenu de largeur nulle, il occupait le
       dernier slot du justify-content:space-between de .cn-site-header__inner et
       repoussait .cn-nav (donc les icônes de compte) vers le milieu-droite au
       lieu du bord droit du conteneur. En le retirant du flux, .cn-nav vient se
       coller au bord droit (= bord droit des blocs de contenu), en miroir du
       logo collé à gauche → symétrie demandée. */
    .cn-mobile-controls { display: none; }
}

.cn-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--cn-bleu-nuit);
    background: transparent;
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    border-radius: var(--cn-radius-md);
    cursor: pointer;
}
.cn-nav-toggle:hover { border-color: var(--cn-bleu-nuit-50); }

.cn-nav-toggle__icon { width: 22px; height: 22px; }
.cn-nav-toggle[aria-expanded="true"] .cn-nav-toggle__icon-open { display: none; }
.cn-nav-toggle[aria-expanded="false"] .cn-nav-toggle__icon-close { display: none; }


/* ============================================================================
 * Champ recherche inline (header)
 *
 * Inspiré de WordPress Twenty Twenty-Five : un champ avec loupe à gauche
 * dans le champ, bordure pleinement arrondie. Pas de fond coloré au repos
 * pour ne pas créer de tâche visuelle dans le header. Au focus : fond blanc
 * et bordure plus marquée.
 * ========================================================================== */

.cn-header-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    border-radius: var(--cn-radius-full);
    padding-left: var(--cn-space-4);
    transition: border-color var(--cn-duration-fast) var(--cn-easing),
                background-color var(--cn-duration-fast) var(--cn-easing),
                box-shadow var(--cn-duration-fast) var(--cn-easing);
}
.cn-header-search:hover {
    border-color: var(--cn-bleu-nuit-50);
}
.cn-header-search:focus-within {
    border-color: var(--cn-bleu-nuit);
    background-color: var(--cn-blanc);
    box-shadow: 0 0 0 3px rgba(15, 40, 69, 0.08);
}
.cn-header-search__icon {
    flex-shrink: 0;
    color: var(--cn-bleu-nuit-50);
    pointer-events: none;
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-header-search:hover .cn-header-search__icon,
.cn-header-search:focus-within .cn-header-search__icon {
    color: var(--cn-bleu-nuit);
}
.cn-header-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    flex-shrink: 0;
}
.cn-header-search__submit:hover .cn-header-search__icon {
    color: var(--cn-or);
}
.cn-header-search__input {
    flex: 1;
    width: 180px;
    border: 0;
    outline: 0;
    background: transparent;
    padding: var(--cn-space-2) var(--cn-space-4) var(--cn-space-2) var(--cn-space-2);
    font-family: var(--cn-font-body);
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit);
    line-height: 1.4;
}
.cn-header-search__input::placeholder {
    color: var(--cn-bleu-nuit-50);
}
.cn-header-search__input::-webkit-search-decoration,
.cn-header-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
/* v0.11.38 : recherche large décalée de >=1280 à >=1440 (cf. SEUIL NAV
   CONFORTABLE). En dessous de 1440, la barre reste compacte. */
@media (min-width: 1560px) {
    .cn-header-search__input { width: 220px; }
}

/* v0.11.17/38 : en zone compacte 1024-1439, on rétrécit la barre
   recherche au strict minimum (icône seule + input 100px) pour laisser
   le maximum de place au menu et au FAB. La barre garde sa forme
   pill et reste fonctionnelle. */
@media (min-width: 1024px) and (max-width: 1559.98px) {
    .cn-header-search {
        padding-left: var(--cn-space-2);
    }
    .cn-header-search__input {
        width: 100px;
        padding-right: var(--cn-space-2);
    }
    .cn-header-search:focus-within .cn-header-search__input {
        width: 180px;
    }
}

/* Bouton loupe mobile (le champ inline est masqué sur mobile, le bouton
   reste accessible) */
.cn-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--cn-bleu-nuit);
    background: transparent;
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    border-radius: var(--cn-radius-full);
    cursor: pointer;
    transition: border-color var(--cn-duration-fast) var(--cn-easing),
                color var(--cn-duration-fast) var(--cn-easing);
}
.cn-search-toggle:hover,
.cn-search-toggle:focus-visible {
    border-color: var(--cn-bleu-nuit);
    color: var(--cn-bleu-nuit);
}

/* Le champ inline n'apparait qu'à partir de 1024 (vit dans cn-nav qui est
   masqué en dessous). Sur mobile, c'est le bouton loupe qui ouvre l'overlay. */

.cn-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(15, 40, 69, 0.96);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--cn-space-20);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: cn-overlay-in var(--cn-duration-normal) var(--cn-easing);
}
.cn-search-overlay[hidden] { display: none; }

@keyframes cn-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cn-search-overlay__inner {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--cn-content-edge);
}

.cn-search-overlay__close {
    position: absolute;
    top: calc(-1 * var(--cn-space-12));
    right: var(--cn-content-edge);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cn-blanc);
    background: transparent;
    border: var(--cn-border-thin) solid rgba(255, 255, 255, 0.3);
    border-radius: var(--cn-radius-md);
    cursor: pointer;
    transition: all var(--cn-duration-fast) var(--cn-easing);
}
.cn-search-overlay__close:hover {
    color: var(--cn-or);
    border-color: var(--cn-or);
}

.cn-search-overlay__form {
    display: flex;
    align-items: stretch;
    background-color: var(--cn-blanc);
    border-radius: var(--cn-radius-full);
    overflow: hidden;
    padding-left: var(--cn-space-5);
    box-shadow: var(--cn-shadow-lg);
}

.cn-search-overlay__input {
    flex: 1;
    padding: var(--cn-space-4) var(--cn-space-4);
    border: 0;
    outline: 0;
    font-family: var(--cn-font-body);
    font-size: var(--cn-text-lg);
    color: var(--cn-bleu-nuit);
    background: transparent;
    min-width: 0;
}
.cn-search-overlay__input::placeholder {
    color: var(--cn-bleu-nuit-50);
}

.cn-search-overlay__submit {
    display: inline-flex;
    align-items: center;
    gap: var(--cn-space-2);
    padding: 0 var(--cn-space-5);
    background-color: var(--cn-bleu-nuit);
    color: var(--cn-blanc);
    border: 0;
    border-radius: 0 var(--cn-radius-full) var(--cn-radius-full) 0;
    font-family: var(--cn-font-body);
    font-size: var(--cn-text-base);
    font-weight: var(--cn-weight-medium);
    cursor: pointer;
    transition: background-color var(--cn-duration-fast) var(--cn-easing);
}
.cn-search-overlay__submit:hover {
    background-color: var(--cn-or);
    color: var(--cn-bleu-nuit);
}
.cn-search-overlay__submit span { display: none; }
@media (min-width: 640px) {
    .cn-search-overlay__submit span { display: inline; }
}

.cn-search-overlay__hint {
    margin: var(--cn-space-6) 0 0 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--cn-text-sm);
}
.cn-search-overlay__hint kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: var(--cn-font-mono);
    font-size: 0.85em;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    color: var(--cn-blanc);
}


/* ============================================================================
 * Drawer mobile
 * ========================================================================== */

.cn-mobile-nav {
    background-color: var(--cn-blanc);
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
}
.cn-mobile-nav[hidden] { display: none; }
@media (min-width: 1024px) { .cn-mobile-nav { display: none !important; } }

.cn-mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: var(--cn-space-3) var(--cn-content-edge);
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-1);
}
.cn-mobile-nav__item { margin: 0; }
.cn-mobile-nav__link {
    display: block;
    padding: var(--cn-space-3) 0;
    font-size: var(--cn-text-lg);
    font-weight: var(--cn-weight-medium);
    color: var(--cn-bleu-nuit);
    text-decoration: none;
    border-bottom: var(--cn-border-thin) solid var(--cn-bleu-nuit-10);
}
.cn-mobile-nav__link:last-child { border-bottom: 0; }
.cn-mobile-nav__link:hover,
.cn-mobile-nav__link:focus-visible { color: var(--cn-or); }


/* ============================================================================
 * cn-site-footer
 * ========================================================================== */

.cn-site-footer {
    margin-top: var(--cn-space-20);
    background-color: var(--cn-bleu-nuit);
    color: var(--cn-bleu-nuit-20);
    flex-shrink: 0;
}

.cn-site-footer__inner {
    max-width: var(--cn-content-ultra);
    margin-inline: auto;
    padding: var(--cn-space-12) var(--cn-content-edge);
}
@media (min-width: 1024px) {
    .cn-site-footer__inner { padding-block: var(--cn-space-16); }
}

.cn-site-footer__top {
    display: grid;
    gap: var(--cn-space-10);
    grid-template-columns: 1fr;
    margin-bottom: var(--cn-space-10);
}
@media (min-width: 768px) {
    .cn-site-footer__top {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: var(--cn-space-12);
    }
}

.cn-site-footer__lockup {
    display: block;
    height: 40px;
    width: auto;
    margin-bottom: var(--cn-space-4);
}
@media (min-width: 1024px) { .cn-site-footer__lockup { height: 48px; } }

.cn-site-footer__brand p {
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit-20);
    line-height: var(--cn-leading-relaxed);
    margin: 0;
    /* v0.10.5 : largeur progressive sur grands écrans pour éviter le rendu
       en colonne étroite quand il y a de la place. 38ch en base, élargi à
       54ch sur desktop standard et 64ch sur ultra-wide. */
    max-width: 38ch;
}
@media (min-width: 1024px) {
    .cn-site-footer__brand p { max-width: 48ch; }
}
@media (min-width: 1440px) {
    .cn-site-footer__brand p { max-width: 56ch; }
}
@media (min-width: 1680px) {
    .cn-site-footer__brand p { max-width: 64ch; }
}

.cn-site-footer__col h2 {
    font-size: var(--cn-text-xs);
    font-weight: var(--cn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cn-or);
    margin: 0 0 var(--cn-space-4) 0;
}
.cn-site-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-2);
}
.cn-site-footer__col a {
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit-20);
    text-decoration: none;
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-site-footer__col a:hover,
.cn-site-footer__col a:focus-visible { color: var(--cn-or); }

.cn-site-footer__bottom {
    padding-top: var(--cn-space-6);
    border-top: var(--cn-border-thin) solid rgba(255, 255, 255, 0.10);
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-4);
    font-size: var(--cn-text-xs);
    color: var(--cn-bleu-nuit-20);
}
.cn-site-footer__bottom p { margin: 0; }
@media (min-width: 640px) {
    .cn-site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--cn-space-6);
    }
}

/* Bloc copyright sur 2 lignes — la 1ère mentionne le titulaire moral
   (Coalition Nationale), la 2ème mentionne le titulaire légal des droits
   (Olivier Rimmel). Pas de filet de séparation : la hiérarchie typographique
   (taille, couleur) suffit à lire les deux lignes comme distinctes. */
.cn-site-footer__copyright {
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-2);
    line-height: 1.5;
}
.cn-site-footer__copyright-line {
    margin: 0;
}
.cn-site-footer__copyright-line--secondary {
    color: var(--cn-bleu-nuit-50);
    max-width: 36em;
}

.cn-site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cn-space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.cn-site-footer__legal li { margin: 0; }
.cn-site-footer__legal a {
    color: var(--cn-bleu-nuit-20);
    text-decoration: none;
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-site-footer__legal a:hover { color: var(--cn-or); }


/* ============================================================================
 * Breadcrumb
 *
 * v0.8.8 : layout texte inline traditionnel (pas de flex sur __list).
 * Avantage : <a> et <span> ont la même baseline naturelle puisqu'ils
 * partagent la même font-family et font-size. Le séparateur SVG est
 * en `display: inline-block` avec `vertical-align: middle` pour rester
 * centré sur la ligne de texte.
 *
 * Précédentes tentatives en flex créaient de subtils décalages selon
 * le font-weight (regular vs medium) car flex ignore vertical-align
 * et le align-items: center repose sur la box height qui peut varier.
 * ========================================================================== */

.cn-breadcrumb {
    margin: 0;
    padding-block: var(--cn-space-4);
    line-height: 1.5;
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit-50);
}
.cn-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cn-breadcrumb__item {
    display: inline;
}
/* Séparateur SVG inline en background, parfaitement centré verticalement */
.cn-breadcrumb__item + .cn-breadcrumb__item::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 6px;
    height: 10px;
    margin: 0 var(--cn-space-3);
    background-color: var(--cn-bleu-nuit-20);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'><path d='M1 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'><path d='M1 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    /* Léger ajustement vertical : le SVG est centré sur la x-height,
       on remonte de 1px pour s'aligner sur le baseline visuel */
    transform: translateY(-1px);
}
.cn-breadcrumb__link {
    color: var(--cn-bleu-nuit-50);
    text-decoration: none;
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-breadcrumb__link:hover { color: var(--cn-or); }
.cn-breadcrumb__current {
    color: var(--cn-bleu-nuit);
    font-weight: var(--cn-weight-medium);
}


/* ============================================================================
 * Sections génériques (page-section, home-section)
 * ========================================================================== */

.cn-home-section,
.cn-page-section {
    padding-block: var(--cn-space-12);
}
@media (min-width: 1024px) {
    .cn-home-section,
    .cn-page-section { padding-block: var(--cn-space-16); }
}

.cn-home-section--manchette {
    padding-top: var(--cn-space-10);
    padding-bottom: var(--cn-space-12);
}
@media (min-width: 1024px) {
    .cn-home-section--manchette {
        padding-top: var(--cn-space-16);
        padding-bottom: var(--cn-space-20);
    }
}

.cn-home-section--cta,
.cn-page-section--alt {
    /* Inversion : sur fond global ivoire-95, les sections "alt" passent en
       blanc franc pour créer le rythme visuel. */
    background-color: var(--cn-blanc);
}

.cn-home-section + .cn-home-section,
.cn-page-section + .cn-page-section {
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-10);
}
.cn-home-section--cta + .cn-home-section,
.cn-home-section + .cn-home-section--cta,
.cn-page-section + .cn-page-section--alt,
.cn-page-section--alt + .cn-page-section { border-top: 0; }

.cn-home-section__header,
.cn-page-section__header {
    margin-bottom: var(--cn-space-10);
}
.cn-home-section__title,
.cn-page-section__title {
    margin: 0 0 var(--cn-space-3) 0;
    font-size: var(--cn-text-2xl);
    font-weight: var(--cn-weight-bold);
    line-height: var(--cn-leading-snug);
    letter-spacing: -0.02em;
}
@media (min-width: 1024px) {
    .cn-home-section__title,
    .cn-page-section__title { font-size: var(--cn-text-3xl); }
}
.cn-home-section__lede {
    /* Pas de max-width — laisse le texte exploiter la largeur disponible
       du container. Le lede de la home tient sur une seule ligne en desktop
       large, ce qui était l'intention éditoriale. */
    margin: 0;
    font-size: var(--cn-text-lg);
    color: var(--cn-bleu-nuit-80);
    line-height: var(--cn-leading-relaxed);
}

.cn-home-section__more {
    margin: var(--cn-space-10) 0 0 0;
    /* v0.10.5 : flex pour accueillir 2 CTA (Mesures + Pistes pragmatiques)
       côte à côte sur desktop, empilés sur mobile. */
    display: flex;
    flex-wrap: wrap;
    gap: var(--cn-space-6) var(--cn-space-10);
}
.cn-home-section__more a {
    font-size: var(--cn-text-base);
    font-weight: var(--cn-weight-medium);
    text-decoration: none;
    color: var(--cn-bleu-nuit);
    border-bottom: var(--cn-border-medium) solid var(--cn-or);
    padding-bottom: var(--cn-space-1);
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-home-section__more a:hover { color: var(--cn-or); }
.cn-home-section__more .cn-arrow {
    transition: transform var(--cn-duration-normal) var(--cn-easing);
    display: inline-block;
}
.cn-home-section__more a:hover .cn-arrow { transform: translateX(4px); }

.cn-page-section__count {
    color: var(--cn-bleu-nuit-50);
    font-weight: var(--cn-weight-regular);
    font-size: 0.7em;
    margin-left: var(--cn-space-2);
    /* v0.11.24 : alignement vertical du compteur "(N)" qui apparaissait
       décalé vers le haut par rapport au texte du titre H2. La taille
       réduite (0.7em) + le line-height hérité du h2 (snug, ~1.3) créaient
       un effet visuel de désalignement. middle force le centrage sur la
       hauteur de ligne du parent. */
    vertical-align: middle;
}


/* ============================================================================
 * Helper : flèche universelle
 * ========================================================================== */

.cn-arrow {
    display: inline-block;
    margin-left: 2px;
    line-height: 1;
}


/* ============================================================================
 * MANCHETTE ÉDITORIALE
 *
 * v0.8.5 : layout 2 colonnes sur desktop pour exploiter toute la largeur
 * de la fenêtre. Auparavant la manchette était limitée à 26-30ch, ce qui
 * créait un énorme vide à droite sur les écrans larges.
 *
 * Mobile/tablet (<1024px) : empilage vertical (flex-direction: column)
 *   ┌────────────────────────┐
 *   │  primary (eyebrow + H1)│
 *   ├────────────────────────┤
 *   │  secondary (excerpt+CTA)│
 *   └────────────────────────┘
 *
 * Desktop ≥1024 : grille 2 colonnes
 *   ┌─────────────────┬──────────────────┐
 *   │ primary         │ secondary        │
 *   │ eyebrow         │ excerpt          │
 *   │ H1 GROS         │ ...              │
 *   │ baseline        │ CTA →            │
 *   └─────────────────┴──────────────────┘
 * ========================================================================== */

.cn-manchette {
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-6);
}

@media (min-width: 1024px) {
    .cn-manchette {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: var(--cn-space-12);
        align-items: start;
    }
}
@media (min-width: 1440px) {
    .cn-manchette {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: var(--cn-space-16);
    }
}

.cn-manchette__primary {
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-5);
}

.cn-manchette__secondary {
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-6);
    /* Alignement strict sur le haut : le texte secondaire commence à la
       même hauteur que la première ligne du H1, ce qui peut paraître étrange
       avec un H1 long mais préserve la rigueur du grid (filet supérieur =
       même distance gauche/droite). C'est ce qu'Olivier a explicitement
       demandé en v0.8.10. */
}

.cn-manchette__eyebrow {
    margin: 0;
}
/* v0.11.69 : typologie de la piste, juste après « PISTE PRAGMATIQUE ».
   Même eyebrow (capitales/interlettrage hérités de .cn-eyebrow) mais encre
   atténuée + graisse normale, pour distinguer le type de contenu (or) de
   sa typologie (encre douce) sans alourdir la ligne. */
.cn-manchette__eyebrow-typo {
    color: var(--cn-bleu-nuit-50);
    font-weight: var(--cn-weight-regular);
}

.cn-manchette__title {
    margin: 0;
    font-size: var(--cn-text-3xl);
    font-weight: var(--cn-weight-bold);
    line-height: var(--cn-leading-tight);
    letter-spacing: -0.025em;
    color: var(--cn-bleu-nuit);
}
@media (min-width: 768px) {
    .cn-manchette__title { font-size: var(--cn-text-4xl); }
}
@media (min-width: 1024px) {
    .cn-manchette__title { font-size: var(--cn-text-5xl); }
}
@media (min-width: 1440px) {
    .cn-manchette__title { font-size: var(--cn-text-6xl); }
}
.cn-manchette__title a {
    color: inherit;
    text-decoration: none;
}
.cn-manchette__title a:hover { color: var(--cn-bleu-nuit-95); }

/* v0.11.70 : résumé court sous le titre (colonne gauche). Encre soutenue,
   plus présent que la baseline (qui reste la signature générique du projet),
   et « un cran en dessous » de l'accroche complète de droite. */
.cn-manchette__subtitle {
    margin: 0;
    font-size: var(--cn-text-lg);
    line-height: var(--cn-leading-snug);
    color: var(--cn-bleu-nuit-80);
}
@media (min-width: 1024px) {
    .cn-manchette__subtitle { font-size: var(--cn-text-xl); }
}

.cn-manchette__baseline {
    margin: 0;
    font-size: var(--cn-text-base);
    font-weight: var(--cn-weight-regular);
    color: var(--cn-bleu-nuit-50);
}
@media (min-width: 1024px) {
    .cn-manchette__baseline { font-size: var(--cn-text-lg); }
}

.cn-manchette__excerpt {
    margin: 0;
    font-size: var(--cn-text-lg);
    line-height: var(--cn-leading-relaxed);
    color: var(--cn-bleu-nuit-80);
}
@media (min-width: 1440px) {
    .cn-manchette__excerpt { font-size: var(--cn-text-xl); }
}

.cn-manchette__cta { margin: 0; }
.cn-manchette__cta a {
    display: inline-flex;
    align-items: center;
    gap: var(--cn-space-2);
    font-size: var(--cn-text-base);
    font-weight: var(--cn-weight-medium);
    color: var(--cn-bleu-nuit);
    text-decoration: none;
    padding-bottom: var(--cn-space-1);
    border-bottom: var(--cn-border-medium) solid var(--cn-or);
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-manchette__cta a:hover { color: var(--cn-or); }
.cn-manchette__cta .cn-arrow {
    transition: transform var(--cn-duration-normal) var(--cn-easing);
}
.cn-manchette__cta a:hover .cn-arrow { transform: translateX(4px); }


/* ============================================================================
 * PILLAR CARDS (homepage)
 *
 * v0.8.4 : refonte sans numérotation 01-06, sans barre verticale colorée.
 * À la place : icône SVG en haut de la card dans la couleur du pilier,
 * subtilement teintée pour ne pas dominer visuellement.
 * ========================================================================== */

.cn-pillars-grid {
    display: grid;
    gap: var(--cn-space-4);
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .cn-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--cn-space-5);
    }
}
@media (min-width: 1024px) {
    .cn-pillars-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--cn-space-6);
    }
}

/* ============================================================================
 * PILLAR CARD — v0.10.6
 *
 * Structure : <article> qui contient un <a> principal (zone titre+desc) et
 * 1-2 <a> méta (mesures, pistes pragmatiques). Le hover global d'élévation
 * est piloté par :has(:hover) sur l'article. Chaque sous-lien a son propre
 * hover plus prononcé.
 *
 * Couleur d'accent : --cn-or uniformément pour tous les piliers (décision
 * v0.10.5).
 * ========================================================================== */

.cn-pillar-card {
    --cn-pillar-color: var(--cn-or);
    display: flex;
    flex-direction: column;
    padding: var(--cn-space-6);
    background-color: var(--cn-blanc);
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-10);
    border-radius: var(--cn-radius-lg);
    color: var(--cn-bleu-nuit);
    min-height: 260px;
    transition: border-color var(--cn-duration-fast) var(--cn-easing),
                box-shadow var(--cn-duration-normal) var(--cn-easing),
                transform var(--cn-duration-normal) var(--cn-easing);
}
/* Hover global de la card : déclenché si un descendant interactif est
   survolé ou focusé. Plus subtil qu'avant car on a 2-3 zones cliquables. */
.cn-pillar-card:has(:hover),
.cn-pillar-card:focus-within {
    border-color: var(--cn-pillar-color);
    box-shadow: var(--cn-shadow-md);
    transform: translateY(-2px);
}

/* ===== Zone principale (icône + titre + description) ===== */
.cn-pillar-card__main {
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-3);
    flex-grow: 1;
    color: inherit;
    text-decoration: none;
}

.cn-pillar-card__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--cn-radius-md);
    background-color: color-mix(in srgb, var(--cn-pillar-color) 10%, transparent);
    color: var(--cn-pillar-color);
    margin-bottom: var(--cn-space-2);
    transition: background-color var(--cn-duration-fast) var(--cn-easing);
}
.cn-pillar-card__main:hover .cn-pillar-card__icon-wrap {
    background-color: color-mix(in srgb, var(--cn-pillar-color) 18%, transparent);
}
.cn-pillar-icon {
    display: block;
}

.cn-pillar-card__title {
    margin: 0;
    font-size: var(--cn-text-xl);
    font-weight: var(--cn-weight-semibold);
    line-height: var(--cn-leading-snug);
    letter-spacing: -0.012em;
    color: var(--cn-bleu-nuit);
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-pillar-card__main:hover .cn-pillar-card__title {
    color: var(--cn-pillar-color);
}

.cn-pillar-card__desc {
    margin: 0;
    flex-grow: 1;
    font-size: var(--cn-text-sm);
    line-height: var(--cn-leading-normal);
    color: var(--cn-bleu-nuit-80);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Bloc compteurs cliquables (pied de card) ===== */
.cn-pillar-card__meta {
    margin: var(--cn-space-4) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-2);
    padding-top: var(--cn-space-3);
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-10);
}

.cn-pillar-card__meta-link {
    /* v0.10.19 : flèche collée juste après le texte (au lieu de "space-between"
       qui la jetait au bord droit). Le lien ne prend plus toute la largeur
       du bloc — il s'aligne à gauche, taille intrinsèque. */
    display: inline-flex;
    align-items: center;
    gap: var(--cn-space-2);
    padding: var(--cn-space-1) 0;
    /* width: fit-content garantit que la zone cliquable ne s'étend pas plus
       que le contenu (sinon avec un parent flex column, l'item peut s'étirer). */
    width: fit-content;
    align-self: flex-start;
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
    color: var(--cn-bleu-nuit-80);
    text-decoration: none;
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-pillar-card__meta-link:hover,
.cn-pillar-card__meta-link:focus-visible {
    color: var(--cn-pillar-color);
}
.cn-pillar-card__meta-count {
    font-variant-numeric: tabular-nums;
}
.cn-pillar-card__meta-arrow {
    color: var(--cn-pillar-color);
    transition: transform var(--cn-duration-normal) var(--cn-easing);
    flex-shrink: 0;
}
.cn-pillar-card__meta-link:hover .cn-pillar-card__meta-arrow,
.cn-pillar-card__meta-link:focus-visible .cn-pillar-card__meta-arrow {
    transform: translateX(4px);
}


/* ============================================================================
 * TRIBUNES TEASERS (homepage)
 * ========================================================================== */

.cn-tribunes-list {
    display: grid;
    gap: var(--cn-space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .cn-tribunes-list {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--cn-space-6);
    }
}

.cn-tribune-teaser {
    display: flex;
    flex-direction: column;
    padding: var(--cn-space-5) 0;
    text-decoration: none;
    color: var(--cn-bleu-nuit);
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-tribune-teaser:hover { color: var(--cn-bleu-nuit); }

.cn-tribune-teaser__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cn-space-3);
    margin: 0 0 var(--cn-space-2) 0;
}
.cn-tribune-teaser__top-row .cn-tribune-teaser__date {
    margin: 0;
}

.cn-tribune-teaser__date {
    margin: 0 0 var(--cn-space-2) 0;
    font-size: var(--cn-text-xs);
    font-weight: var(--cn-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-bleu-nuit-50);
}

.cn-tribune-teaser__title {
    margin: 0 0 var(--cn-space-3) 0;
    font-size: var(--cn-text-lg);
    line-height: var(--cn-leading-snug);
    font-weight: var(--cn-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--cn-bleu-nuit);
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-tribune-teaser:hover .cn-tribune-teaser__title { color: var(--cn-or); }

.cn-tribune-teaser__excerpt {
    flex-grow: 1;
    margin: 0 0 var(--cn-space-4) 0;
    font-size: var(--cn-text-sm);
    line-height: var(--cn-leading-normal);
    color: var(--cn-bleu-nuit-80);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-tribune-teaser__more {
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
    color: var(--cn-or);
    transition: transform var(--cn-duration-normal) var(--cn-easing);
    display: inline-block;
}
.cn-tribune-teaser:hover .cn-tribune-teaser__more {
    transform: translateX(4px);
}


/* ============================================================================
 * KICKER CATÉGORIE TRIBUNE (v0.10.0)
 *
 * Badge affiché à droite du titre des tribunes pour signaler la catégorie
 * éditoriale (Piste Pragmatique / Analyse / Doctrine).
 *
 * Source des données : taxonomie cn_tribune_categorie (cn-data-model v0.5.0+)
 * Helper PHP : CNT\get_tribune_categorie( WP_Post $tribune )
 *
 * Trois variantes par modificateur de classe : --piste-pragmatique, --analyse-mouvement,
 * --doctrine. Couleurs distinctes pour différencier visuellement les familles.
 * ========================================================================== */

.cn-tribune-teaser__heading,
.cn-tribune-header__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cn-space-3);
    flex-wrap: wrap;
}

.cn-tribune-kicker {
    display: inline-block;
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid var(--cn-bleu-nuit-20);
    border-radius: 999px;
    font-family: var(--cn-font-sans);
    font-size: var(--cn-text-xs);
    font-weight: var(--cn-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: var(--cn-blanc);
    color: var(--cn-bleu-nuit);
    transition: all var(--cn-duration-fast) var(--cn-easing);
}

/* Variante Piste Pragmatique : bordure or pour signaler le caractère opérationnel */
.cn-tribune-kicker--piste-pragmatique {
    border-color: var(--cn-or);
    color: var(--cn-or);
}

/* Variante Analyse : bleu nuit subtil */
.cn-tribune-kicker--analyse-mouvement {
    border-color: var(--cn-bleu-nuit-20);
    color: var(--cn-bleu-nuit);
}

/* Variante Doctrine : bleu nuit affirmé pour signaler le caractère structurant */
.cn-tribune-kicker--doctrine {
    background-color: var(--cn-bleu-nuit);
    border-color: var(--cn-bleu-nuit);
    color: var(--cn-blanc);
}

/* Variante Note Publique : signal institutionnel — fond ivoire et bordure or */
.cn-tribune-kicker--note-publique {
    background-color: var(--cn-ivoire, #F5F0E8);
    border-color: var(--cn-or);
    color: var(--cn-bleu-nuit);
}

/* Hover sur le teaser : le kicker reste lisible */
.cn-tribune-teaser:hover .cn-tribune-kicker--piste-pragmatique {
    background-color: var(--cn-or);
    color: var(--cn-blanc);
}
.cn-tribune-teaser:hover .cn-tribune-kicker--doctrine {
    background-color: var(--cn-bleu-nuit-90, var(--cn-bleu-nuit));
}

/* ============================================================================
 * INTRO CONTEXTUELLE TRIBUNE (v0.10.0)
 *
 * Encart affiché au-dessus du content sur la fiche tribune, avec la phrase
 * de présentation contextuelle (term_description de la catégorie).
 * Single source of truth gérée dans cn-data-model.
 * ========================================================================== */

.cn-tribune-intro {
    margin: 0 0 var(--cn-space-8);
    padding: var(--cn-space-5) var(--cn-space-6);
    background-color: var(--cn-ivoire, #F5F0E8);
    border-left: var(--cn-border-thick) solid var(--cn-or);
    color: var(--cn-bleu-nuit);
    font-family: var(--cn-font-sans);
    font-size: var(--cn-text-sm);
    line-height: 1.6;
}

.cn-tribune-intro p {
    margin: 0;
}


/* ============================================================================
 * CTA COMPARER LES PROGRAMMES
 * ========================================================================== */

.cn-cta-comparison {
    max-width: 70ch;
    padding: var(--cn-space-8) var(--cn-space-6);
    background-color: var(--cn-blanc);
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    border-left: var(--cn-border-thick) solid var(--cn-or);
    border-radius: var(--cn-radius-md);
}
@media (min-width: 1024px) {
    .cn-cta-comparison {
        padding: var(--cn-space-10) var(--cn-space-10);
    }
}

.cn-cta-comparison__title {
    margin: 0 0 var(--cn-space-4) 0;
    font-size: var(--cn-text-2xl);
    font-weight: var(--cn-weight-bold);
}

.cn-cta-comparison__lede {
    margin: 0 0 var(--cn-space-6) 0;
    font-size: var(--cn-text-base);
    line-height: var(--cn-leading-relaxed);
    color: var(--cn-bleu-nuit-80);
}

.cn-cta-comparison__cta { margin: 0; }
.cn-cta-comparison__cta a {
    display: inline-flex;
    align-items: center;
    gap: var(--cn-space-2);
    padding: var(--cn-space-3) var(--cn-space-5);
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
    color: var(--cn-blanc);
    background-color: var(--cn-bleu-nuit);
    border-radius: var(--cn-radius-md);
    text-decoration: none;
    transition: background-color var(--cn-duration-fast) var(--cn-easing);
}
.cn-cta-comparison__cta a:hover,
.cn-cta-comparison__cta a:focus-visible {
    background-color: var(--cn-bleu-nuit-95);
    color: var(--cn-blanc);
}
.cn-cta-comparison__cta .cn-arrow {
    transition: transform var(--cn-duration-normal) var(--cn-easing);
}
.cn-cta-comparison__cta a:hover .cn-arrow { transform: translateX(4px); }


/* ============================================================================
 * TERM HEADER (page pilier, page domaine)
 * ========================================================================== */

.cn-term-header {
    --cn-term-color: var(--cn-or);
    padding-block: var(--cn-space-10) var(--cn-space-12);
    /* Ligne séparatrice TOUJOURS or, peu importe la couleur thématique du
       pilier ou domaine. Cohérence visuelle exigée par l'utilisateur :
       le filet or est l'identité graphique du site, pas la couleur du pilier
       qui s'applique aux eyebrows et hovers.
       
       v0.8.13 : la border-top est retirée — le filet or est désormais
       porté par .cn-breadcrumb-bar (sticky en haut). */
    background-color: var(--cn-blanc);
}
@media (min-width: 1024px) {
    .cn-term-header { padding-block: var(--cn-space-12) var(--cn-space-16); }
}

.cn-term-header__eyebrow {
    color: var(--cn-term-color);
    margin: 0 0 var(--cn-space-4) 0;
}
.cn-term-header__parent-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
.cn-term-header__parent-link:hover { color: var(--cn-or); }

.cn-term-header__title {
    margin: 0 0 var(--cn-space-6) 0;
    font-size: var(--cn-text-3xl);
    font-weight: var(--cn-weight-bold);
    line-height: var(--cn-leading-tight);
    letter-spacing: -0.025em;
    /* Pas de max-width — exploite la largeur du container ultra. */
}
@media (min-width: 1024px) {
    .cn-term-header__title { font-size: var(--cn-text-4xl); }
}
@media (min-width: 1440px) {
    .cn-term-header__title { font-size: var(--cn-text-5xl); }
}

.cn-term-header__intro {
    max-width: 60ch;
    color: var(--cn-bleu-nuit-80);
    font-size: var(--cn-text-lg);
    line-height: var(--cn-leading-relaxed);
}
.cn-term-header__intro p { margin: 0 0 var(--cn-space-4) 0; }


/* ============================================================================
 * DOMAINE CARD (page pilier)
 * ========================================================================== */

.cn-domaines-grid {
    display: grid;
    gap: var(--cn-space-4);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .cn-domaines-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--cn-space-5);
    }
}
@media (min-width: 1280px) {
    .cn-domaines-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cn-domaine-card {
    display: flex;
    align-items: flex-start;
    gap: var(--cn-space-4);
    padding: var(--cn-space-5);
    background-color: var(--cn-blanc);
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-10);
    border-radius: var(--cn-radius-md);
    color: var(--cn-bleu-nuit);
    text-decoration: none;
    transition: border-color var(--cn-duration-fast) var(--cn-easing),
                box-shadow var(--cn-duration-normal) var(--cn-easing),
                transform var(--cn-duration-normal) var(--cn-easing);
}
.cn-domaine-card:hover {
    border-color: var(--cn-or);
    box-shadow: var(--cn-shadow-sm);
    transform: translateY(-1px);
    color: var(--cn-bleu-nuit);
}

.cn-domaine-card__code {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cn-radius-sm);
    background-color: var(--cn-ivoire);
    font-family: var(--cn-font-mono);
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
    color: var(--cn-bleu-nuit);
    letter-spacing: 0.02em;
}
.cn-domaine-card__body { flex: 1; min-width: 0; }
.cn-domaine-card__title {
    margin: 0 0 var(--cn-space-2) 0;
    font-size: var(--cn-text-lg);
    font-weight: var(--cn-weight-semibold);
    line-height: var(--cn-leading-snug);
    letter-spacing: -0.01em;
}
.cn-domaine-card:hover .cn-domaine-card__title { color: var(--cn-or); }
.cn-domaine-card__desc {
    margin: 0 0 var(--cn-space-3) 0;
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit-80);
    line-height: var(--cn-leading-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cn-domaine-card__meta {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit-50);
}


/* ============================================================================
 * MESURES — liste compacte
 * ========================================================================== */

.cn-mesures-list {
    display: flex;
    flex-direction: column;
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
}
.cn-mesure-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--cn-space-3);
    padding: var(--cn-space-4) var(--cn-space-2);
    border-bottom: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    color: var(--cn-bleu-nuit);
    text-decoration: none;
    transition: background-color var(--cn-duration-fast) var(--cn-easing);
}
.cn-mesure-row:hover {
    background-color: var(--cn-blanc);
    color: var(--cn-bleu-nuit);
}

.cn-mesure-row__code {
    font-family: var(--cn-font-mono);
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
    color: var(--cn-or);
    white-space: nowrap;
    min-width: 56px;
}
.cn-mesure-row__title {
    font-size: var(--cn-text-base);
    line-height: var(--cn-leading-snug);
    color: var(--cn-bleu-nuit);
}
.cn-mesure-row:hover .cn-mesure-row__title { color: var(--cn-bleu-nuit-95); }
.cn-mesure-row__taxonomies {
    display: none;
    font-size: var(--cn-text-xs);
    color: var(--cn-bleu-nuit-50);
    grid-column: 2;
    grid-row: 2;
    margin-top: 2px;
}
.cn-mesure-row__arrow {
    color: var(--cn-bleu-nuit-50);
    transition: transform var(--cn-duration-normal) var(--cn-easing),
                color var(--cn-duration-fast) var(--cn-easing);
}
.cn-mesure-row:hover .cn-mesure-row__arrow {
    transform: translateX(4px);
    color: var(--cn-or);
}

@media (min-width: 768px) {
    .cn-mesure-row {
        grid-template-columns: auto 1fr auto auto;
        gap: var(--cn-space-4);
    }
    .cn-mesure-row__taxonomies {
        display: inline;
        grid-column: 3;
        grid-row: 1;
        margin-top: 0;
        text-align: right;
    }
}


/* ============================================================================
 * MESURE — single (header + layout 2 cols)
 * ========================================================================== */

.cn-mesure-header {
    --cn-mesure-color: var(--cn-or);
    padding-block: var(--cn-space-10) var(--cn-space-8);
    /* Le filet or est porté par .cn-breadcrumb-bar depuis v0.8.13. */
}
@media (min-width: 1024px) {
    .cn-mesure-header { padding-block: var(--cn-space-12) var(--cn-space-10); }
}
.cn-mesure-header__code { color: var(--cn-mesure-color); margin: 0 0 var(--cn-space-3) 0; }
.cn-mesure-header__title {
    margin: 0 0 var(--cn-space-6) 0;
    font-size: var(--cn-text-3xl);
    font-weight: var(--cn-weight-bold);
    line-height: var(--cn-leading-tight);
    letter-spacing: -0.02em;
    /* Pas de max-width : le titre exploite toute la largeur du container
       disponible (cn-container--ultra, jusqu'à 2200px sur grands écrans). */
}
@media (min-width: 1024px) {
    .cn-mesure-header__title { font-size: var(--cn-text-4xl); }
}
@media (min-width: 1440px) {
    .cn-mesure-header__title { font-size: var(--cn-text-5xl); }
}


/* ===== Taxonomy meta row (sous H1 mesure) ===== */

.cn-taxonomy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cn-space-5);
    margin: 0;
    padding: var(--cn-space-4) 0;
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    border-bottom: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
}
.cn-taxonomy-meta__item { display: flex; flex-direction: column; gap: 2px; }
.cn-taxonomy-meta__label {
    font-size: var(--cn-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-bleu-nuit-50);
    margin: 0;
    font-weight: var(--cn-weight-semibold);
}
.cn-taxonomy-meta__value {
    margin: 0;
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
    color: var(--cn-bleu-nuit);
}
.cn-taxonomy-meta__value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--cn-bleu-nuit-20);
    transition: color var(--cn-duration-fast) var(--cn-easing),
                border-color var(--cn-duration-fast) var(--cn-easing);
}
.cn-taxonomy-meta__value a:hover {
    color: var(--cn-or);
    border-color: var(--cn-or);
}


/* ===== Mesure layout (prose + aside) ===== */

.cn-mesure-layout {
    padding-block: var(--cn-space-10);
}
@media (min-width: 1024px) {
    .cn-mesure-layout { padding-block: var(--cn-space-12); }
}
.cn-mesure-layout__grid {
    display: grid;
    gap: var(--cn-space-10);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .cn-mesure-layout__grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: var(--cn-space-12);
    }
}


/* ===== Accroche éditoriale de la mesure (chapô) =====
 * v0.11.3 — Chapô bleu nuit affiché au-dessus du content prose. Source :
 * champ ACF cn_accroche, lu inline dans single-cn_mesure.php. */

.cn-mesure-accroche {
    font-size: var(--cn-text-lg);
    line-height: 1.6;
    font-weight: var(--cn-weight-medium);
    color: var(--cn-bleu-nuit);
    margin: 0 0 var(--cn-space-6) 0;
}
@media (min-width: 768px) {
    .cn-mesure-accroche {
        font-size: var(--cn-text-xl);
    }
}


/* ===== Sections sémantiques de la mesure (diagnostic / proposition) =====
 * v0.11.4 — Affichage des champs WYSIWYG cn_diagnostic et cn_proposition
 * du schéma cn-data-model v0.6 (get_mesure_schema). Présentation
 * narrative : pas de h2 visibles ("Diagnostic", "Proposition") pour
 * éviter le style fiche administrative. Distinction sémantique
 * uniquement portée par les classes BEM (cn-mesure-section--diagnostic,
 * cn-mesure-section--proposition) pour usages CSS et JS futurs
 * (citation ciblée, ancres, partage de section).
 *
 * L'espacement entre sections successives (et entre accroche et première
 * section) est géré ici. Le rendu interne (paragraphes, listes, etc.)
 * hérite de la prose .cn-prose globale. */

.cn-mesure-section {
    margin-top: var(--cn-space-8);
}
.cn-mesure-section:first-child {
    margin-top: 0;
}
/* Reset prose : éviter double-margin sur le premier enfant des sections */
.cn-mesure-section > :first-child {
    margin-top: 0;
}


/* ===== Aside contexte ===== */

.cn-aside-context {
    --cn-context-color: var(--cn-or);
    padding: var(--cn-space-6);
    background-color: var(--cn-blanc);
    border-radius: var(--cn-radius-md);
    /* v0.11.14 — Relief subtil pour détacher la carte du fond global
       ivoire-95 de la page, qui rend les cartes blanches peu lisibles
       en l'absence d'ombre. --cn-shadow-md = 0 4px 6px -1px rgba(...) */
    box-shadow: var(--cn-shadow-md);
}
/* v0.11.10 — Sticky retiré de .cn-aside-context : le double-sticky avec
   .cn-aside-rating (qui devient lui aussi sticky en desktop) créait des
   bugs d'empilement quand le scroll dépassait les 2 éléments. Désormais,
   c'est le widget vote (interaction utilisateur prioritaire) qui reste
   collé en haut au scroll, pas le contexte (information statique). */
.cn-aside-context__title {
    margin: 0 0 var(--cn-space-4) 0;
    font-size: var(--cn-text-xs);
    font-weight: var(--cn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-bleu-nuit-50);
}
.cn-aside-context__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-3);
}
.cn-aside-context__item { display: flex; flex-direction: column; gap: 2px; }
.cn-aside-context__label {
    font-size: var(--cn-text-xs);
    color: var(--cn-bleu-nuit-50);
}
.cn-aside-context__link {
    --cn-context-color: var(--cn-or);
    display: inline-flex;
    align-items: center;
    gap: var(--cn-space-2);
    font-size: var(--cn-text-base);
    font-weight: var(--cn-weight-semibold);
    color: var(--cn-bleu-nuit);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color var(--cn-duration-fast) var(--cn-easing),
                color var(--cn-duration-fast) var(--cn-easing);
    padding-bottom: 2px;
}
.cn-aside-context__link:hover {
    color: var(--cn-context-color);
    border-color: var(--cn-context-color);
}


/* ===== Mesure — encart "Pour citer cette mesure" =====
   v0.10.29 : composant dédié aux mesures, qui présente la référence comme
   un identifiant citable. Coexiste avec .cn-aside-context dans la colonne
   aside du single mesure. Ne s'applique PAS aux PP/tribunes (cf. doctrine
   d'épuration). */

.cn-mesure-cite {
    margin-top: var(--cn-space-4);
    padding: var(--cn-space-6);
    background-color: var(--cn-blanc);
    border-radius: var(--cn-radius-md);
    border-left: 3px solid var(--cn-or);
    /* v0.11.14 — Relief subtil aligné sur .cn-aside-context et le
       widget compact cn-rating (v0.5.5+). Les trois cartes aside ont
       désormais la même box-shadow pour ressortir uniformément sur
       le fond ivoire-95 de la page. */
    box-shadow: var(--cn-shadow-md);
}

.cn-mesure-cite__title {
    margin: 0 0 var(--cn-space-3) 0;
    font-size: var(--cn-text-xs);
    font-weight: var(--cn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-bleu-nuit-50);
}

.cn-mesure-cite__lede {
    margin: 0 0 var(--cn-space-4) 0;
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit-80);
    line-height: var(--cn-leading-snug);
}

.cn-mesure-cite__row {
    display: flex;
    align-items: center;
    gap: var(--cn-space-2);
    flex-wrap: wrap;
}

.cn-mesure-cite__ref {
    font-family: var(--cn-font-mono);
    font-size: var(--cn-text-lg);
    font-weight: var(--cn-weight-semibold);
    color: var(--cn-or);
    background: transparent;
    padding: 0;
    /* user-select: all → un triple-clic ou un select-all sélectionne pile
       le code, pas le bloc autour. Facilite le copier-coller manuel
       quand le bouton n'est pas utilisé. */
    user-select: all;
    -webkit-user-select: all;
}

/* v0.10.32 : bouton Copier devient icon-button minimaliste — fini les
   encadrés carrés. Cohérent avec l'iconographie outline du site et avec
   les boutons de partage refaits en parallèle. Hover or sur fond ivoire-95
   pour le feedback. État is-copied : couleur or persistante 1.5s + label
   sr-only basculé vers "Copié !" (logique JS inchangée).
   v0.10.33 : ajout d'un swap d'icône (presse-papiers ↔ checkmark) avec
   animation pop sur la classe .is-copied. Feedback visuel net pour
   confirmer la copie réussie, sans changer la logique JS qui pose déjà
   .is-copied pendant 1.5s. */
.cn-mesure-cite__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cn-space-2);
    background: transparent;
    border: 0;
    border-radius: var(--cn-radius-sm);
    color: var(--cn-bleu-nuit-50);
    cursor: pointer;
    /* v0.10.35 : line-height: 0 neutralise tout artefact de baseline du
       texte (le label sr-only Copier/Copié) qui pouvait potentiellement
       décaler verticalement le SVG selon la métrique de la fonte. Avec
       line-height: 0, le centrage flex porte uniquement sur les box des
       SVG (display: block), garanti pixel-parfait. */
    line-height: 0;
    transition: color var(--cn-duration-fast) var(--cn-easing),
                background-color var(--cn-duration-fast) var(--cn-easing);
}

.cn-mesure-cite__copy:hover,
.cn-mesure-cite__copy:focus-visible {
    color: var(--cn-or);
    background-color: var(--cn-ivoire-95);
}

.cn-mesure-cite__copy.is-copied {
    color: var(--cn-or);
    background-color: var(--cn-ivoire-95);
}

.cn-mesure-cite__copy-icon { display: block; }

/* Swap d'icône : par défaut on voit le presse-papiers ; quand .is-copied
   est posée par le JS, on bascule au checkmark avec une petite animation
   pop (scale + fade) pour confirmer visuellement la copie. */
.cn-mesure-cite__copy-icon--success { display: none; }

.cn-mesure-cite__copy.is-copied .cn-mesure-cite__copy-icon--default {
    display: none;
}
.cn-mesure-cite__copy.is-copied .cn-mesure-cite__copy-icon--success {
    display: block;
    animation: cnCopyPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes cnCopyPop {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

/* Respect prefers-reduced-motion : on garde le swap d'icône (information
   utile) mais on supprime l'animation pop (effet purement décoratif). */
@media (prefers-reduced-motion: reduce) {
    .cn-mesure-cite__copy.is-copied .cn-mesure-cite__copy-icon--success {
        animation: none;
    }
}


/* ---- Section partage (v0.10.31) ---------------------------------------
   Une rangée d'icônes-bouton sous le bloc référence.
   v0.10.32 : refonte cosmétique — encadrés carrés retirés, icônes en
   style outline cohérent (Lucide-like). Cause du décalage du X corrigée :
   les paths SVG ont désormais des bounding boxes équivalentes (y≈2 → y≈22
   pour toutes les icônes), donc plus d'asymétrie verticale même sans
   container carré pour les masquer. Alignement vertical garanti par
   flex align-items: center sur la liste.
   ---------------------------------------------------------------------- */

.cn-mesure-cite__share-label {
    margin: var(--cn-space-5) 0 var(--cn-space-3) 0;
    font-size: var(--cn-text-xs);
    font-weight: var(--cn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-bleu-nuit-50);
}

.cn-mesure-cite__share-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cn-space-1);
}

.cn-mesure-cite__share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cn-space-2);
    color: var(--cn-bleu-nuit-50);
    text-decoration: none;
    border-radius: var(--cn-radius-sm);
    /* v0.10.35 : line-height: 0 pour la même raison que le bouton copy —
       le span sr-only à côté du SVG pouvait introduire un décalage
       vertical via la métrique de la fonte. Centrage flex désormais
       basé uniquement sur les box des SVG (display: block). */
    line-height: 0;
    transition: color var(--cn-duration-fast) var(--cn-easing),
                background-color var(--cn-duration-fast) var(--cn-easing);
}

.cn-mesure-cite__share:hover,
.cn-mesure-cite__share:focus-visible {
    color: var(--cn-or);
    background-color: var(--cn-ivoire-95);
}

.cn-mesure-cite__share svg { display: block; }

/* v0.10.39 : la règle .cn-mesure-cite__share--x svg { translateY(...) }
   a été RETIRÉE. C'était un hack de compensation perceptuelle qui
   tentait de masquer la différence de bbox visible entre le path X
   officiel (filled, ~80% du viewBox) et les paths outline Lucide
   (~92% avec stroke). 5 itérations successives n'ont pas trouvé la
   bonne valeur parce que la cause est inhérente, pas calibrable.
   3 options propres soumises à Olivier (A: accepter, B: tout outline,
   C: tout filled) — voir mesure-cite.twig pour le commentaire complet.
   Cette version est l'option A : aucun hack, alignement géométrique
   strict (centres SVG à y=10), différence visuelle inhérente acceptée
   en attendant le choix d'option. */


/* ============================================================================
 * TRIBUNE — single (header + body)
 * ========================================================================== */

.cn-tribune-header {
    padding-block: var(--cn-space-10) var(--cn-space-8);
    /* Le filet or est porté par .cn-breadcrumb-bar depuis v0.8.13. */
}
@media (min-width: 1024px) {
    .cn-tribune-header { padding-block: var(--cn-space-12) var(--cn-space-10); }
}
.cn-tribune-header__title {
    margin: 0 0 var(--cn-space-4) 0;
    font-size: var(--cn-text-3xl);
    font-weight: var(--cn-weight-bold);
    line-height: var(--cn-leading-tight);
    letter-spacing: -0.025em;
}
@media (min-width: 1024px) {
    .cn-tribune-header__title { font-size: var(--cn-text-4xl); }
}
.cn-tribune-header__subtitle {
    margin: 0 0 var(--cn-space-6) 0;
    font-size: var(--cn-text-lg);
    color: var(--cn-bleu-nuit-80);
    line-height: var(--cn-leading-snug);
}
.cn-tribune-header__byline {
    margin: var(--cn-space-6) 0 0 0;
    padding-top: var(--cn-space-4);
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit-50);
    display: flex;
    flex-wrap: wrap;
    gap: var(--cn-space-3);
}
.cn-tribune-header__author {
    color: var(--cn-bleu-nuit);
    font-weight: var(--cn-weight-medium);
}

.cn-tribune-body { padding-block: var(--cn-space-10) var(--cn-space-12); }


/* ============================================================================
 * PAGE ÉDITORIALE — header + layout TOC
 * ========================================================================== */

.cn-page-header {
    padding-block: var(--cn-space-10) var(--cn-space-8);
    /* Ligne séparatrice or — cohérent avec tous les autres types de page
       (archive, mesure, tribune, terme). Auparavant cette page était la
       seule en bleu nuit, créant une incohérence visuelle.
       
       v0.8.13 : retiré, le filet or est porté par .cn-breadcrumb-bar. */
}
@media (min-width: 1024px) {
    .cn-page-header { padding-block: var(--cn-space-12) var(--cn-space-10); }
}
.cn-page-header__title {
    margin: 0 0 var(--cn-space-3) 0;
    font-size: var(--cn-text-3xl);
    font-weight: var(--cn-weight-bold);
    line-height: var(--cn-leading-tight);
    letter-spacing: -0.025em;
    /* Pas de max-width — exploite la largeur du container ultra. */
}
@media (min-width: 1024px) {
    .cn-page-header__title { font-size: var(--cn-text-4xl); }
}
@media (min-width: 1440px) {
    .cn-page-header__title { font-size: var(--cn-text-5xl); }
}
.cn-page-header__subtitle {
    margin: 0;
    font-size: var(--cn-text-lg);
    color: var(--cn-bleu-nuit-80);
    line-height: var(--cn-leading-snug);
}

.cn-page-layout {
    padding-block: var(--cn-space-10);
}
@media (min-width: 1024px) {
    .cn-page-layout { padding-block: var(--cn-space-12); }
}
.cn-page-layout__grid {
    display: grid;
    gap: var(--cn-space-10);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .cn-page-layout__grid {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: var(--cn-space-12);
    }
}
@media (min-width: 1440px) {
    .cn-page-layout__grid {
        grid-template-columns: 280px minmax(0, 1fr);
    }
}


/* ===== TOC sidebar ===== */

.cn-toc {
    font-size: var(--cn-text-sm);
}
@media (min-width: 1024px) {
    .cn-toc {
        position: sticky;
        top: var(--cn-space-8);
        max-height: calc(100vh - var(--cn-space-16));
        overflow-y: auto;
    }
}
.cn-toc__title {
    font-size: var(--cn-text-xs);
    font-weight: var(--cn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-bleu-nuit-50);
    margin: 0 0 var(--cn-space-4) 0;
}
.cn-toc__list, .cn-toc__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Sublist (H3 sous H2) : indentation simple sans trait vertical décoratif */
.cn-toc__sublist {
    margin-top: var(--cn-space-2);
    margin-bottom: var(--cn-space-3);
    padding-left: var(--cn-space-4);
}
.cn-toc__item {
    margin: 0 0 var(--cn-space-3) 0;
}
.cn-toc__item--h2 {
    font-weight: var(--cn-weight-medium);
}
.cn-toc__item--h3 {
    font-size: 0.95em;
    color: var(--cn-bleu-nuit-80);
}
.cn-toc__link {
    color: var(--cn-bleu-nuit-80);
    text-decoration: none;
    line-height: var(--cn-leading-snug);
    display: inline-block;
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-toc__item--h2 > .cn-toc__link {
    color: var(--cn-bleu-nuit);
}
.cn-toc__link:hover { color: var(--cn-or); }


/* ============================================================================
 * PROSE (mesures, tribunes, pages éditoriales)
 *
 * Largeur de lecture progressive :
 *  - Mobile/tablet : 100% (limité par le container)
 *  - Desktop standard : 680px (lecture confortable, ~80-90 caractères/ligne)
 *  - Desktop wide ≥1440 : 800px
 *  - Ultra-wide ≥1680 : 880px
 *  - Ultra-wide ≥1920 : 960px (texte de doctrine, paragraphes longs)
 *
 * Au-delà la lecture devient inconfortable (>100 caractères/ligne) — on
 * privilégie alors d'avoir des marges blanches et la TOC à gauche.
 * ========================================================================== */

.cn-prose {
    max-width: var(--cn-content-prose);
    font-size: var(--cn-text-base);
    line-height: var(--cn-leading-relaxed);
    color: var(--cn-bleu-nuit);
}
@media (min-width: 1024px) {
    .cn-prose { font-size: var(--cn-text-lg); }
}
@media (min-width: 1440px) {
    .cn-prose { max-width: 920px; }
}
@media (min-width: 1680px) {
    .cn-prose { max-width: 1000px; }
}
@media (min-width: 1920px) {
    .cn-prose { max-width: 1100px; }
}
.cn-prose > * + * { margin-top: var(--cn-space-4); }
/* v0.10.31 : annule la marge du tout premier élément de la prose. Sans
   cette règle, le premier H2 (ex. "Diagnostic" en tête d'une page mesure)
   hérite de margin-top: var(--cn-space-12), ce qui décale le contenu de
   ~48px par rapport au top de la grid → désalignement visible avec le
   premier bloc de l'aside ("CETTE MESURE S'INSCRIT DANS"). Pattern
   standard de prose styling : le premier enfant n'a jamais de marge
   supérieure puisque l'écart vertical est porté par le container. */
.cn-prose > :first-child { margin-top: 0; }
.cn-prose h2 {
    margin-top: var(--cn-space-12);
    font-size: var(--cn-text-2xl);
    line-height: var(--cn-leading-snug);
    font-weight: var(--cn-weight-bold);
    letter-spacing: -0.02em;
}
@media (min-width: 1024px) {
    .cn-prose h2 { font-size: var(--cn-text-3xl); }
}
.cn-prose h3 {
    margin-top: var(--cn-space-8);
    font-size: var(--cn-text-xl);
    font-weight: var(--cn-weight-semibold);
}
.cn-prose h4 {
    margin-top: var(--cn-space-6);
    font-size: var(--cn-text-lg);
    font-weight: var(--cn-weight-semibold);
}
.cn-prose ul, .cn-prose ol { padding-left: var(--cn-space-6); }
.cn-prose li { margin-bottom: var(--cn-space-2); }
/* Le style blockquote est géré globalement dans base.css : citation
   centrée, en grand, avec guillemets typographiques or en décoration.
   Pas d'override ici. */
.cn-prose a {
    color: var(--cn-bleu-nuit);
    text-decoration: underline;
    text-decoration-color: var(--cn-or);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
.cn-prose a:hover { color: var(--cn-or); }


/* ============================================================================
 * PAGINATION prev/next
 * ========================================================================== */

.cn-pagination-pn {
    margin-block: var(--cn-space-12);
    padding-block: var(--cn-space-6);
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    border-bottom: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
}
.cn-pagination-pn__parent {
    margin: 0 0 var(--cn-space-6) 0;
    text-align: center;
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
}
.cn-pagination-pn__parent a {
    color: var(--cn-bleu-nuit);
    text-decoration: none;
    border-bottom: var(--cn-border-medium) solid var(--cn-or);
    padding-bottom: 2px;
}
.cn-pagination-pn__parent a:hover { color: var(--cn-or); }
.cn-pagination-pn__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cn-space-4);
}
.cn-pagination-pn__cell--prev { text-align: left; }
.cn-pagination-pn__cell--next { text-align: right; }
.cn-pagination-pn__link {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--cn-bleu-nuit);
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-pagination-pn__link:hover { color: var(--cn-or); }
.cn-pagination-pn__direction {
    display: inline-flex;
    align-items: center;
    gap: var(--cn-space-1);
    font-size: var(--cn-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cn-bleu-nuit-50);
    margin-bottom: var(--cn-space-1);
}
.cn-pagination-pn__cell--next .cn-pagination-pn__direction { justify-content: flex-end; }
.cn-pagination-pn__icon {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}
.cn-pagination-pn__link:hover .cn-pagination-pn__direction { color: var(--cn-or); }
.cn-pagination-pn__title {
    font-size: var(--cn-text-base);
    font-weight: var(--cn-weight-semibold);
    line-height: var(--cn-leading-snug);
}
.cn-pagination-pn__sublabel {
    font-size: var(--cn-text-xs);
    color: var(--cn-bleu-nuit-50);
    margin-top: 2px;
}


/* ============================================================================
 * PAGINATION numérique unifiée (.cn-pagination) — v0.11.73
 * Archives mesures / pistes pragmatiques / tribunes : un seul design.
 * Markup = paginate_links() type 'plain' enrobé par pagination-numeric.twig.
 * Prev/Next = boutons carrés à chevron SVG ; numéros = boutons carrés ;
 * page courante = pleine en bleu nuit.
 * ========================================================================== */

.cn-pagination {
    margin-top: var(--cn-space-10);
    display: flex;
    flex-wrap: wrap;
    gap: var(--cn-space-2);
    justify-content: center;
    align-items: center;
    font-size: var(--cn-text-sm);
}
.cn-pagination .page-numbers {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 var(--cn-space-3);
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    border-radius: var(--cn-radius-md);
    background-color: var(--cn-blanc);
    color: var(--cn-bleu-nuit);
    font-weight: var(--cn-weight-medium);
    line-height: 1;
    text-decoration: none;
    transition: border-color var(--cn-duration-fast) var(--cn-easing),
                background-color var(--cn-duration-fast) var(--cn-easing),
                color var(--cn-duration-fast) var(--cn-easing);
}
.cn-pagination a.page-numbers:hover {
    border-color: var(--cn-or);
    background-color: var(--cn-or-10);
    color: var(--cn-bleu-nuit);
}
.cn-pagination a.page-numbers:focus-visible {
    outline: var(--cn-border-medium) solid var(--cn-or);
    outline-offset: 2px;
}
.cn-pagination .page-numbers.current {
    background-color: var(--cn-bleu-nuit);
    border-color: var(--cn-bleu-nuit);
    color: var(--cn-blanc);
}
.cn-pagination .page-numbers.dots {
    min-width: auto;
    padding: 0 var(--cn-space-1);
    border-color: transparent;
    background: transparent;
    color: var(--cn-bleu-nuit-50);
}
/* Boutons Précédent / Suivant : carrés, chevron centré. */
.cn-pagination .page-numbers.prev,
.cn-pagination .page-numbers.next {
    width: 2.5rem;
    padding: 0;
    color: var(--cn-bleu-nuit);
}
.cn-pagination__icon {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
}


/* ============================================================================
 * ARCHIVE HEADER + LAYOUT
 * ========================================================================== */

.cn-archive-header {
    padding-block: var(--cn-space-10) var(--cn-space-8);
    /* Le filet or est porté par .cn-breadcrumb-bar depuis v0.8.13. */
}
@media (min-width: 1024px) {
    .cn-archive-header { padding-block: var(--cn-space-12) var(--cn-space-10); }
}
.cn-archive-header__title {
    margin: 0 0 var(--cn-space-3) 0;
    /* v0.10.12 : agrandi pour cohérence avec /pistes-pragmatiques/ qui
       utilise --cn-text-5xl. Toutes les pages d'archive ont désormais
       la même taille de H1 sur grand écran. */
    font-size: var(--cn-text-4xl);
    font-weight: var(--cn-weight-bold);
    line-height: var(--cn-leading-tight);
    letter-spacing: -0.025em;
    /* Pas de max-width : sur grand écran le titre doit pouvoir tenir
       sur une seule ligne. Sur mobile le wrap se fait naturellement
       quand la fenêtre est trop étroite, mais "France&nbsp;2050"
       et le compte de mesures restent insécables. */
}
@media (min-width: 1024px) {
    .cn-archive-header__title { font-size: var(--cn-text-5xl); }
}
.cn-archive-header__lede {
    margin: 0 0 var(--cn-space-3) 0;
    /* v0.10.12 : retiré max-width 60ch — laisse le lede prendre toute la
       largeur du container ultra. Cohérent avec le lede PP (sans max-width). */
    font-size: var(--cn-text-lg);
    color: var(--cn-bleu-nuit-80);
}
/* v0.10.15 : portion en or ajoutée après le H1 sur certaines archives
   (ex. /pistes-pragmatiques/typologie/economie-souverainete/ affiche
   "Pistes pragmatiques — Économie & souveraineté"). */
.cn-archive-header__subtitle {
    color: var(--cn-or-95);
    font-weight: var(--cn-weight-medium);
}
.cn-archive-header__count {
    margin: 0;
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit-50);
}

.cn-archive-layout {
    padding-block: var(--cn-space-10);
}
.cn-archive-layout__grid {
    display: grid;
    gap: var(--cn-space-8);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .cn-archive-layout__grid {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: var(--cn-space-10);
    }
}
.cn-archive-layout__empty {
    padding: var(--cn-space-8);
    background-color: var(--cn-blanc);
    border-radius: var(--cn-radius-md);
    text-align: center;
    color: var(--cn-bleu-nuit-80);
}


/* ============================================================================
 * FILTER SIDEBAR (v0.10.9, unifié)
 *
 * Composant utilisé par les 3 archives (mesures, pistes pragmatiques, tribunes).
 * Design : sobre, fond ivoire-90, fieldsets séparés par des filets fins,
 * radios + checkboxes avec compteurs alignés à droite, bouton or "Filtrer"
 * clairement identifiable.
 *
 * Cohérent avec le markup généré par components/filter-sidebar.twig.
 * ========================================================================== */

.cn-filter-sidebar {
    align-self: start;
}

.cn-filters {
    background-color: var(--cn-ivoire-90);
    border-radius: var(--cn-radius-md);
    padding: var(--cn-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-4);
}

.cn-filters__title {
    margin: 0 0 var(--cn-space-2) 0;
    font-size: var(--cn-text-xs);
    font-weight: var(--cn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-bleu-nuit-50);
}

.cn-filters__group {
    border: 0;
    margin: 0;
    padding: 0;
    /* v0.10.24 : padding-top plus aéré entre le séparateur (border-top)
       et le label de section ("TYPOLOGIE", "PILIER"…). Avant: space-4
       (≈16px) trop tassé. Désormais: space-5 (≈20px) pour respirer.
       v0.10.30 : ce padding-top space-5 s'applique désormais à TOUS les
       groupes, y compris le premier. Avant, une règle :first-of-type
       (héritée de v0.10.12) imposait padding-top: 0 sur le premier
       fieldset pour qu'il "colle au haut du panneau" — produisait un
       rythme vertical incohérent : "PILIER" (premier groupe) collait
       à sa ligne grise alors que "HORIZON", "DOMAINE", "RECHERCHE"…
       respiraient sous la leur. Règle supprimée, l'air sous le filet
       gris est désormais identique partout dans le panneau. */
    padding-top: var(--cn-space-5);
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
}

.cn-filters__legend {
    display: block;
    /* v0.10.24 : margin-bottom space-4 (avant space-3) pour plus d'air
       entre le label "TYPOLOGIE" et la liste de liens en dessous.
       v0.10.25 : padding horizontal = space-3 pour aligner le libellé
       ("TYPOLOGIE", "PILIER", "RECHERCHE"…) sur la grille interne
       du panneau. Avant : padding 0 → le texte du label collait au
       bord du panneau alors que le texte des liens en dessous était
       à space-3 du bord (à cause du padding du __link). Désormais
       libellés ET items partagent le même point d'ancrage gauche. */
    margin: 0 0 var(--cn-space-4) 0;
    padding: 0 var(--cn-space-3);
    font-size: var(--cn-text-xs);
    font-weight: var(--cn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-bleu-nuit-50);
}

.cn-filters__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-1);
}

.cn-filters__item { }

/* v0.10.23 : navigation par liens directs (plus de radio buttons + bouton
   "Filtrer"). Le clic sur un libellé navigue immédiatement vers la page
   filtrée. État actif = lien correspondant à l'URL courante. */
.cn-filters__link {
    display: flex;
    align-items: center;
    gap: var(--cn-space-3);
    padding: var(--cn-space-2) var(--cn-space-3);
    border-radius: var(--cn-radius-sm);
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit);
    line-height: var(--cn-leading-snug);
    text-decoration: none;
    transition: background-color var(--cn-duration-fast) var(--cn-easing),
                color var(--cn-duration-fast) var(--cn-easing);
}
.cn-filters__link:hover {
    color: var(--cn-or);
    background-color: rgba(184, 150, 46, 0.08);
}
.cn-filters__link.is-active {
    background-color: var(--cn-bleu-nuit);
    color: var(--cn-ivoire);
    font-weight: var(--cn-weight-medium);
}
.cn-filters__link.is-active .cn-filters__count {
    color: var(--cn-or-50);
}
.cn-filters__link.is-active .cn-filters__name--all {
    color: var(--cn-ivoire);
    font-style: normal;
}

.cn-filters__name {
    flex: 1;
}
.cn-filters__name--all {
    color: var(--cn-bleu-nuit-50);
    font-style: italic;
}

.cn-filters__count {
    color: var(--cn-bleu-nuit-50);
    font-size: var(--cn-text-xs);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.cn-filters__search-form {
    /* v0.10.23/v0.10.24 : form recherche autonome — submit on Enter, pas
       de bouton. Padding-top aligné sur les autres groupes (space-5)
       pour cohérence visuelle. */
    border: 0;
    margin: 0;
    padding: 0;
    padding-top: var(--cn-space-5);
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    display: block;
}

.cn-filters__search {
    width: 100%;
    /* v0.10.25 : margin-top retiré. L'espace label "RECHERCHE" ↔ input
       est désormais piloté uniquement par le margin-bottom du __legend
       (space-4), ce qui aligne l'air label↔contenu sur celui des autres
       groupes (label↔liste). Avant : space-4 + space-3 = 28px, plus
       large que les 16px des autres sections → désalignement vertical
       perçu en bas du panneau. */
    margin-top: 0;
    padding: var(--cn-space-2) var(--cn-space-3);
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    border-radius: var(--cn-radius-md);
    font-family: var(--cn-font-body);
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit);
    background-color: var(--cn-blanc);
}
.cn-filters__search:focus-visible {
    border-color: var(--cn-or);
    outline: 2px solid var(--cn-or-50);
    outline-offset: 0;
}

/* v0.10.23 : .cn-filters__actions et .cn-filters__reset retirés —
   plus de bouton "Filtrer" ni de lien "Tout effacer" (on utilise
   le lien "Tous" en tête de chaque groupe pour ça). */


/* ============================================================================
 * BOUTONS — .cn-button + variantes
 *
 * Le bouton "Filtrer" sur les sidebars d'archive utilise .cn-button--primary.
 * v0.10.9 : avant cette version, .cn-button n'avait qu'une font-family — d'où
 * un bouton "Filtrer" qui ressemblait à un texte plat et donnait l'impression
 * de ne pas fonctionner. Désormais clairement identifiable comme un bouton.
 * ========================================================================== */

.cn-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cn-space-2);
    padding: var(--cn-space-3) var(--cn-space-5);
    border: var(--cn-border-thin) solid transparent;
    border-radius: var(--cn-radius-md);
    font-family: var(--cn-font-body);
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--cn-duration-fast) var(--cn-easing),
                border-color var(--cn-duration-fast) var(--cn-easing),
                color var(--cn-duration-fast) var(--cn-easing),
                transform var(--cn-duration-fast) var(--cn-easing);
}
.cn-button:focus-visible {
    outline: 2px solid var(--cn-or-50);
    outline-offset: 2px;
}
.cn-button:active {
    transform: translateY(1px);
}

/* Variante primaire : fond or, texte bleu nuit */
.cn-button--primary {
    background-color: var(--cn-or);
    color: var(--cn-bleu-nuit);
    border-color: var(--cn-or);
}
.cn-button--primary:hover {
    background-color: var(--cn-or-95);
    border-color: var(--cn-or-95);
    color: var(--cn-bleu-nuit);
}

/* Variante secondaire : fond transparent, bord bleu nuit */
.cn-button--secondary {
    background-color: transparent;
    color: var(--cn-bleu-nuit);
    border-color: var(--cn-bleu-nuit);
}
.cn-button--secondary:hover {
    background-color: var(--cn-bleu-nuit);
    color: var(--cn-blanc);
}


/* ============================================================================
 * BOUTON ÉDITER FLOTTANT (FAB) — admin connecté
 * ========================================================================== */

.cn-edit-fab {
    position: fixed;
    bottom: var(--cn-space-6);
    left: var(--cn-space-6); /* v0.11.31 — déplacé en bas-gauche (était bas-droite) */
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: var(--cn-space-2);
    padding: var(--cn-space-3) var(--cn-space-5);
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
    color: var(--cn-blanc);
    background-color: var(--cn-bleu-nuit);
    border: var(--cn-border-medium) solid var(--cn-or);
    border-radius: var(--cn-radius-full);
    text-decoration: none;
    box-shadow: var(--cn-shadow-lg);
    transition: transform var(--cn-duration-normal) var(--cn-easing),
                background-color var(--cn-duration-fast) var(--cn-easing);
}
.cn-edit-fab:hover {
    color: var(--cn-bleu-nuit);
    background-color: var(--cn-or);
    transform: scale(1.04);
}
.cn-edit-fab__icon { font-size: 1.1em; }


/* ============================================================================
 * VUE ADMIN MESURES (/mesures-admin/)
 * ========================================================================== */

.cn-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--cn-text-sm);
    background-color: var(--cn-blanc);
    margin-block: var(--cn-space-6);
}
.cn-admin-table thead th {
    background-color: var(--cn-bleu-nuit-10);
    padding: var(--cn-space-3) var(--cn-space-4);
    text-align: left;
    font-weight: var(--cn-weight-semibold);
    font-size: var(--cn-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cn-bleu-nuit-80);
    border-bottom: var(--cn-border-medium) solid var(--cn-bleu-nuit-20);
    position: sticky;
    top: 0;
    z-index: 1;
}
.cn-admin-table tbody td {
    padding: var(--cn-space-3) var(--cn-space-4);
    border-bottom: var(--cn-border-thin) solid var(--cn-bleu-nuit-10);
    vertical-align: middle;
}
.cn-admin-table tbody tr:hover { background-color: var(--cn-ivoire-95); }
.cn-admin-table .cn-admin-code {
    font-family: var(--cn-font-mono);
    color: var(--cn-or);
    white-space: nowrap;
}
.cn-admin-table .cn-admin-status {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--cn-text-xs);
    font-weight: var(--cn-weight-medium);
    border-radius: var(--cn-radius-sm);
}
.cn-admin-table .cn-admin-status--publish {
    background-color: rgba(30, 126, 52, 0.10);
    color: var(--cn-succes);
}
.cn-admin-table .cn-admin-status--draft {
    background-color: var(--cn-or-10);
    color: var(--cn-or);
}
.cn-admin-table .cn-admin-actions {
    white-space: nowrap;
    text-align: right;
}
.cn-admin-table .cn-admin-actions a {
    display: inline-block;
    padding: var(--cn-space-1) var(--cn-space-2);
    color: var(--cn-bleu-nuit);
    text-decoration: none;
    font-weight: var(--cn-weight-medium);
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-admin-table .cn-admin-actions a:hover { color: var(--cn-or); }
.cn-admin-table .cn-admin-actions a + a {
    border-left: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    margin-left: var(--cn-space-1);
}

.cn-admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cn-space-3);
    align-items: center;
    margin-bottom: var(--cn-space-6);
    padding: var(--cn-space-4);
    background-color: var(--cn-blanc);
    border-radius: var(--cn-radius-md);
}
.cn-admin-toolbar__count {
    margin-right: auto;
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit-80);
}
.cn-admin-toolbar select,
.cn-admin-toolbar input[type="search"] {
    padding: var(--cn-space-2) var(--cn-space-3);
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    border-radius: var(--cn-radius-md);
    font-family: var(--cn-font-body);
    font-size: var(--cn-text-sm);
    background-color: var(--cn-blanc);
    color: var(--cn-bleu-nuit);
}


/* ============================================================================
 * Recherche — page /recherche/ (formulaire + résultats)
 * ========================================================================== */

.cn-search-form {
    display: flex;
    align-items: stretch;
    margin: var(--cn-space-6) 0 0 0;
    max-width: 600px;
    background-color: var(--cn-blanc);
    border-radius: var(--cn-radius-md);
    overflow: hidden;
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
}
.cn-search-form__input {
    flex: 1;
    padding: var(--cn-space-3) var(--cn-space-5);
    border: 0;
    outline: 0;
    background-color: transparent;
    font-family: var(--cn-font-body);
    font-size: var(--cn-text-base);
    color: var(--cn-bleu-nuit);
    min-width: 0;
}
.cn-search-form__submit {
    display: inline-flex;
    align-items: center;
    gap: var(--cn-space-2);
    padding: 0 var(--cn-space-5);
    background-color: var(--cn-bleu-nuit);
    color: var(--cn-blanc);
    border: 0;
    font-family: var(--cn-font-body);
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
    cursor: pointer;
    transition: background-color var(--cn-duration-fast) var(--cn-easing);
}
.cn-search-form__submit:hover {
    background-color: var(--cn-or);
    color: var(--cn-bleu-nuit);
}

.cn-search-results {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
}
.cn-search-result {
    display: flex;
    flex-direction: column;
    padding: var(--cn-space-5) 0;
    border-bottom: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    color: var(--cn-bleu-nuit);
    text-decoration: none;
    transition: background-color var(--cn-duration-fast) var(--cn-easing),
                padding var(--cn-duration-fast) var(--cn-easing);
}
.cn-search-result:hover {
    background-color: var(--cn-blanc);
    color: var(--cn-bleu-nuit);
    padding-inline: var(--cn-space-4);
}
.cn-search-result__meta {
    margin: 0 0 var(--cn-space-2) 0;
    font-size: var(--cn-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-or);
    font-weight: var(--cn-weight-medium);
}
.cn-search-result__title {
    margin: 0 0 var(--cn-space-2) 0;
    font-size: var(--cn-text-lg);
    font-weight: var(--cn-weight-semibold);
    line-height: var(--cn-leading-snug);
    letter-spacing: -0.01em;
    color: var(--cn-bleu-nuit);
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
@media (min-width: 1024px) {
    .cn-search-result__title { font-size: var(--cn-text-xl); }
}
.cn-search-result:hover .cn-search-result__title {
    color: var(--cn-or);
}
.cn-search-result__excerpt {
    margin: 0;
    font-size: var(--cn-text-sm);
    line-height: var(--cn-leading-normal);
    color: var(--cn-bleu-nuit-80);
}
.cn-search-result__excerpt mark {
    background-color: var(--cn-or-10);
    color: var(--cn-bleu-nuit);
    padding: 0 2px;
    border-radius: 2px;
    font-weight: var(--cn-weight-medium);
}


/* ============================================================================
 * SINGLE TRIBUNE — layout 2 colonnes (v0.9.1)
 *
 * Reprise du pattern .cn-page-layout du manifeste : prose principale à
 * gauche (flex), aside fixe à droite avec méta-info + autres tribunes.
 * Sur mobile : empilé.
 * ========================================================================== */

.cn-tribune-layout {
    padding-block: var(--cn-space-10);
}
@media (min-width: 1024px) {
    .cn-tribune-layout { padding-block: var(--cn-space-12); }
}
.cn-tribune-layout__grid {
    display: grid;
    gap: var(--cn-space-10);
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .cn-tribune-layout__grid {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: var(--cn-space-12);
        align-items: start;
    }
}
@media (min-width: 1440px) {
    .cn-tribune-layout__grid {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}
.cn-tribune-layout__main {
    min-width: 0;
}
.cn-tribune-layout__aside {
    min-width: 0;
}
@media (min-width: 1024px) {
    .cn-tribune-layout__aside {
        position: sticky;
        top: calc(var(--cn-sticky-top-height, 120px) + var(--cn-space-4));
    }
}

.cn-tribune-aside {
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-8);
    padding: var(--cn-space-6);
    background-color: var(--cn-blanc);
    border-radius: var(--cn-radius-md);
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-10);
}
.cn-tribune-aside__block { }
.cn-tribune-aside__block + .cn-tribune-aside__block {
    padding-top: var(--cn-space-6);
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-10);
}
.cn-tribune-aside__title {
    margin: 0 0 var(--cn-space-3) 0;
    font-size: var(--cn-text-xs);
    font-weight: var(--cn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cn-bleu-nuit-50);
}
.cn-tribune-aside__meta {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--cn-space-2) var(--cn-space-4);
    font-size: var(--cn-text-sm);
}
.cn-tribune-aside__meta dt {
    color: var(--cn-bleu-nuit-50);
}
.cn-tribune-aside__meta dd {
    margin: 0;
    color: var(--cn-bleu-nuit);
}

.cn-tribune-aside__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-4);
}
.cn-tribune-aside__item { }
.cn-tribune-aside__link {
    display: block;
    color: var(--cn-bleu-nuit);
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-tribune-aside__link:hover { color: var(--cn-or); }
.cn-tribune-aside__date {
    margin: 0 0 var(--cn-space-1) 0;
    font-size: var(--cn-text-xs);
    color: var(--cn-bleu-nuit-50);
}
.cn-tribune-aside__title-link {
    margin: 0;
    font-size: var(--cn-text-sm);
    line-height: var(--cn-leading-snug);
    font-weight: var(--cn-weight-medium);
}
.cn-tribune-aside__more-link {
    margin-top: var(--cn-space-4);
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
}
.cn-tribune-aside__more-link a {
    color: var(--cn-or);
}
.cn-tribune-aside__more-link a:hover {
    color: var(--cn-or-95);
}


/* ============================================================================
 * ARCHIVE TRIBUNES — grille de teasers + pagination (v0.9.1)
 * ========================================================================== */

.cn-tribunes-archive {
    padding-block: var(--cn-space-10) var(--cn-space-16);
}
@media (min-width: 1024px) {
    .cn-tribunes-archive { padding-block: var(--cn-space-12) var(--cn-space-20); }
}

.cn-tribunes-archive__grid {
    display: grid;
    gap: var(--cn-space-6);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .cn-tribunes-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--cn-space-8);
    }
}
@media (min-width: 1280px) {
    .cn-tribunes-archive__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cn-tribunes-archive__pagination {
    margin-top: var(--cn-space-12);
    display: flex;
    justify-content: center;
}
.cn-tribunes-archive__pagination-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--cn-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
/* v0.10.14 : tous les <li> sont des flex containers en stretch, donc leurs
   enfants <a> sont forcés à prendre la hauteur intégrale du <li>. Plus
   aucune variance possible entre l'élément current et les autres. */
.cn-tribunes-archive__pagination-list > li {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

.cn-tribunes-archive__pagination-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Hauteur fixe — appliquée à tous les boutons (numéros + prev/next) */
    height: 2.5rem;
    padding: 0 var(--cn-space-3);
    margin: 0;
    font-family: var(--cn-font-body);
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
    line-height: 1;
    color: var(--cn-bleu-nuit);
    text-decoration: none;
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    border-radius: var(--cn-radius-md);
    background-color: var(--cn-blanc);
    transition: all var(--cn-duration-fast) var(--cn-easing);
}
/* v0.10.14 : variante --num : largeur FIXE pour les numéros (pas min-width).
   Garantit que tous les numéros — courant ou pas — font exactement la même
   taille de carré. */
.cn-tribunes-archive__pagination-link--num {
    width: 2.5rem;
    padding: 0;
}
.cn-tribunes-archive__pagination-link--prev,
.cn-tribunes-archive__pagination-link--next {
    padding: 0 var(--cn-space-4);
}
.cn-tribunes-archive__pagination-link:hover {
    border-color: var(--cn-or);
    color: var(--cn-or);
}
.cn-tribunes-archive__pagination-link.is-current {
    background-color: var(--cn-bleu-nuit);
    border-color: var(--cn-bleu-nuit);
    color: var(--cn-blanc);
}

/* ============================================================
   v0.11.0 (S21) — Doctrine catalogue vivant C192
   Badges cycle de vie + page /archives/
   ============================================================ */

/* Badges statut — usage : <span class="cn-badge cn-badge-{statut}">…</span> */
.cn-badge {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 3px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
    border: 1px solid transparent;
}
.cn-badge-actif      { background: #e6f4ea; color: #1e7e34; border-color: #c3e6cb; }
.cn-badge-implemente { background: #cfe8ff; color: #0b5e9e; border-color: #b6daff; }
.cn-badge-archive    { background: #efece5; color: #6c6256; border-color: #d8d3c4; }
.cn-badge-eteint     { background: #f8d7da; color: #842029; border-color: #f1aeb5; }

/* Page /archives/ */
.cn-archives {
    max-width: 920px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    color: var(--cn-color-ink, #0F2845);
}
.cn-archives .cn-page-header {
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--cn-color-rule, #d6d0c2);
    padding-bottom: 1.25rem;
}
.cn-archives h1 {
    font-family: var(--cn-font-serif, 'Source Serif 4', Georgia, serif);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    margin: 0 0 .75rem 0;
}
.cn-archives .cn-intro {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--cn-color-ink-soft, #2a3f59);
    max-width: 65ch;
}
.cn-archives .cn-archives-count {
    margin-top: 1rem;
    font-size: .92rem;
    color: var(--cn-color-ink-mute, #5e6c80);
    font-style: italic;
}
.cn-archive-section {
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cn-color-rule, #d6d0c2);
}
.cn-archive-section:first-of-type {
    border-top: none;
    padding-top: 0;
}
.cn-archive-section h2 {
    font-family: var(--cn-font-serif, 'Source Serif 4', Georgia, serif);
    font-size: 1.35rem;
    margin: 0 0 .25rem 0;
}
.cn-archive-section h2 .cn-count {
    font-size: .85rem;
    color: var(--cn-color-ink-mute, #5e6c80);
    font-weight: 400;
    font-family: var(--cn-font-sans, Inter, sans-serif);
}
.cn-archive-section .cn-section-desc {
    color: var(--cn-color-ink-mute, #5e6c80);
    font-size: .92rem;
    margin: 0 0 1.25rem 0;
}
.cn-archive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cn-archive-item {
    padding: 1.1rem 1rem;
    border-left: 3px solid var(--cn-color-rule, #d6d0c2);
    background: var(--cn-color-paper-soft, #faf6ee);
    margin-bottom: .75rem;
    border-radius: 0 3px 3px 0;
}
.cn-archive-section--implemente .cn-archive-item { border-left-color: #0b5e9e; }
.cn-archive-section--archive    .cn-archive-item { border-left-color: #b8a368; }
.cn-archive-section--eteint     .cn-archive-item { border-left-color: #842029; }

.cn-archive-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .65rem;
    margin-bottom: .4rem;
}
.cn-archive-num {
    font-family: var(--cn-font-mono, 'JetBrains Mono', monospace);
    font-size: .85rem;
    color: var(--cn-color-ink-mute, #5e6c80);
    background: rgba(0,0,0,.04);
    padding: .05rem .4rem;
    border-radius: 2px;
}
.cn-archive-title {
    font-weight: 600;
    color: var(--cn-color-ink, #0F2845);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
}
.cn-archive-title:hover { border-bottom-color: var(--cn-color-accent, #B8962E); }
.cn-archive-motif {
    margin: .3rem 0;
    color: var(--cn-color-ink-soft, #2a3f59);
    font-size: .95rem;
    line-height: 1.55;
}
.cn-archive-meta, .cn-archive-remplace {
    margin: .3rem 0 0;
    font-size: .88rem;
    color: var(--cn-color-ink-mute, #5e6c80);
}
.cn-archive-remplace a { color: var(--cn-color-accent, #B8962E); }

/* Badge inline sur listing de mesures (archive-cn_mesure) */
.cn-mesure-row .cn-badge,
.cn-mesure-card .cn-badge { margin-right: .5rem; }

/* État "vide" */
.cn-archives .cn-empty {
    padding: 2rem;
    background: var(--cn-color-paper-soft, #faf6ee);
    border-left: 3px solid var(--cn-color-rule, #d6d0c2);
    color: var(--cn-color-ink-mute, #5e6c80);
    font-style: italic;
}

/* =====================================================================
   v0.11.7 — Section "Votre avis compte" (widget de notation cn-rating)
   ---------------------------------------------------------------------
   Wrapper éditorial autour du widget rendu par le plugin cn-rating.
   Le widget lui-même (.cn-rating) a son propre styling défini dans
   cn-rating.css (max-width 720px, centré, couleurs Coalition Nationale).
   Cette section fournit le cadre :
     - container ultra cohérent avec le reste de la page
     - titre H2 et intro éditoriale
     - centrage du widget dans la zone large
     - rythme vertical entre le contenu principal et les sections suivantes
   ================================================================== */

.cn-rating-section {
    background-color: var(--cn-blanc);
    /* Pas de --alt pour permettre une distinction avec "Mesures liées" /
       "Pistes liées" qui sont en --alt. Si la section suivante est --alt,
       on garde une transition douce. */
}

.cn-rating-section__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--cn-space-8) auto;
}

.cn-rating-section__intro {
    margin: 0;
    font-size: var(--cn-text-base);
    color: var(--cn-bleu-nuit-70, var(--cn-bleu-nuit-80));
    line-height: var(--cn-leading-relaxed);
}

.cn-rating-section__widget {
    /* Centre le widget cn-rating (max-width 720px) dans la zone ultra. */
    display: flex;
    justify-content: center;
}

.cn-rating-section__widget .cn-rating {
    /* Le widget a déjà margin: 32px 0 par défaut — on l'annule ici
       puisque c'est la section qui pilote l'espacement vertical. */
    margin: 0;
    width: 100%;
}

/* ===== v0.11.8/v0.11.9 — Widget de notation compact dans l'aside =====
   Wrapper d'espacement pour le widget cn-rating en mode "compact" inséré
   dans la barre latérale des single mesures (v0.11.8) ET des pistes
   pragmatiques (v0.11.9).
   
   Sur les MESURES : placé entre le bloc "Cette mesure s'inscrit dans"
   (.cn-aside-context) et "Pour citer cette mesure" (.cn-mesure-cite).
   
   Sur les PISTES PRAGMATIQUES : placé sous le bloc "Cette piste
   s'inscrit dans" (le seul bloc de l'aside des PP — pas de bloc cite).
   
   Le widget lui-même (.cn-rating--compact) a son propre styling défini
   dans cn-rating.css (fond ivoire-95, border-radius 10px, padding interne).
   Ce wrapper ne sert qu'à orchestrer le rythme vertical avec les autres
   blocs de l'aside. */

.cn-aside-rating {
    margin-top: var(--cn-space-4);
}

/* v0.11.10 — Widget vote sticky en desktop : reste collé en haut quand
   on scroll la prose principale. Pré-requis : align-self start sur le
   parent grid item (cn-mesure-layout__aside / cn-pp-layout__aside) pour
   qu'il prenne sa hauteur naturelle au lieu de s'étirer à la hauteur de
   la colonne prose. Sans align-self start, le sticky ne s'amorce pas
   (le container est aussi haut que la page → "scroll-position" jamais
   dépassée). */
@media (min-width: 1024px) {
    .cn-mesure-layout__aside,
    .cn-pp-layout__aside {
        align-self: start;
    }
    .cn-aside-rating {
        position: sticky;
        top: var(--cn-space-8);
    }
}

/* Le widget compact occupe la pleine largeur de l'aside (déjà géré par
   .cn-rating--compact { max-width: none } dans cn-rating.css), on garde
   juste un petit rythme visuel cohérent avec les autres blocs aside. */


/* ============================================================================
 * v0.11.15 (S22) — Navigation par domaines
 *
 * Sélecteurs ajoutés :
 *   .cn-domaines-index               wrapper page /domaines/
 *   .cn-domaines-index__section      section par pilier (6 sections)
 *   .cn-domaines-index__pilier-*     header de chaque section
 *   .cn-domaine-card__meta-line      ligne de meta dans la card (mesures, pistes)
 *   .cn-domaine-card__meta-sep       séparateur visuel entre 2 metas
 *   .cn-pistes-list / .cn-piste-item liste des PP sur la page domaine
 *   .cn-term-header__index-link      lien "← Tous les domaines" dans l'eyebrow
 *   .cn-term-header__eyebrow-sep     séparateur visuel ·
 *   .cn-page-section__more           CTA sous une section (page pilier)
 *   .cn-page-header__intro           intro de la page index
 *   .cn-empty-state                  message "Aucun X"
 *
 * Toutes les couleurs passent par les CSS vars de la charte v2.6.
 * Cohérent avec la stack du reste du thème : sobre, sans ornementation.
 * ========================================================================== */

/* --- Wrapper + sections par pilier --- */
.cn-domaines-index {
    /* Pas de padding-block : chaque section gère son rythme.
       Le filet or séparateur entre sections vient du border-top du section
       suivant (cohérent avec .cn-page-section + .cn-page-section). */
}

.cn-domaines-index__section {
    padding-block: var(--cn-space-10) var(--cn-space-12);
    border-top: var(--cn-border-thin) solid var(--cn-bleu-nuit-10);
}
.cn-domaines-index__section:first-child {
    border-top: 0;
    padding-top: var(--cn-space-6);
}
@media (min-width: 1024px) {
    .cn-domaines-index__section {
        padding-block: var(--cn-space-12) var(--cn-space-16);
    }
}

.cn-domaines-index__pilier-header {
    margin-bottom: var(--cn-space-6);
}
@media (min-width: 1024px) {
    .cn-domaines-index__pilier-header {
        margin-bottom: var(--cn-space-8);
    }
}

.cn-domaines-index__pilier-eyebrow {
    /* L'eyebrow porte la couleur du pilier via --cn-term-color hérité du
       parent .cn-domaines-index__section. Discret mais identifiant.

       v0.11.21 : depuis l'inversion de l'ordre H2/eyebrow (eyebrow placé
       APRÈS le H2 du pilier), l'eyebrow se retrouve collé au titre.
       v0.11.23 : margin-top ajoutée pour laisser respirer la séparation
       entre le nom du pilier et le sous-titre meta « N domaines ·
       N mesures · N pistes pragmatiques ». */
    color: var(--cn-bleu-nuit-50);
    margin: var(--cn-space-3) 0 var(--cn-space-2) 0;
}

.cn-domaines-index__pilier-title {
    margin: 0;
    font-size: var(--cn-text-2xl);
    font-weight: var(--cn-weight-bold);
    line-height: var(--cn-leading-tight);
    letter-spacing: -0.02em;
}
@media (min-width: 1024px) {
    .cn-domaines-index__pilier-title { font-size: var(--cn-text-3xl); }
}

.cn-domaines-index__pilier-link {
    color: var(--cn-bleu-nuit);
    /* Marqueur visuel : filet de couleur pilier sous le titre, façon onglet.
       Comme la couleur est passée en --cn-term-color au section, on hérite. */
    border-bottom: 3px solid var(--cn-term-color, var(--cn-or));
    padding-bottom: var(--cn-space-1);
    display: inline-flex;
    align-items: baseline;
    gap: var(--cn-space-2);
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-domaines-index__pilier-link:hover {
    color: var(--cn-term-color, var(--cn-or));
}
.cn-domaines-index__pilier-link .cn-arrow {
    transition: transform var(--cn-duration-normal) var(--cn-easing);
}
.cn-domaines-index__pilier-link:hover .cn-arrow {
    transform: translateX(4px);
}

/* --- Card domaine : ligne de meta enrichie (mesures + pistes) --- */
/* La .cn-domaine-card__meta reste un flex justify-content:space-between
   avec la flèche à droite. On insère plusieurs spans à gauche : meta-line,
   sep, meta-line. Sur mobile étroit, autorise un wrap si les deux compteurs
   ne tiennent pas. */
.cn-domaine-card__meta {
    flex-wrap: wrap;
    gap: var(--cn-space-1) var(--cn-space-2);
}
.cn-domaine-card__meta-line {
    /* Pas de style propre — hérite de .cn-domaine-card__meta. */
}
.cn-domaine-card__meta-sep {
    color: var(--cn-bleu-nuit-30);
}
.cn-domaine-card__meta .cn-arrow {
    margin-left: auto;
    transition: transform var(--cn-duration-normal) var(--cn-easing);
}
.cn-domaine-card:hover .cn-domaine-card__meta .cn-arrow {
    transform: translateX(4px);
}

/* --- Eyebrow page domaine : lien "← Tous les domaines" --- */
.cn-term-header__index-link {
    color: var(--cn-bleu-nuit-50);
    border-bottom: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
    padding-bottom: 1px;
    transition: color var(--cn-duration-fast) var(--cn-easing),
                border-color var(--cn-duration-fast) var(--cn-easing);
}
.cn-term-header__index-link:hover {
    color: var(--cn-or);
    border-bottom-color: var(--cn-or);
}
.cn-term-header__eyebrow-sep {
    color: var(--cn-bleu-nuit-30);
    margin: 0 var(--cn-space-1);
}

/* --- Liste des pistes pragmatiques sur la page domaine --- */
.cn-pistes-list {
    list-style: none;
    padding: 0;
    margin: var(--cn-space-6) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--cn-space-3);
}
@media (min-width: 768px) {
    .cn-pistes-list {
        gap: var(--cn-space-4);
    }
}

.cn-piste-item {
    /* Reset : pas de bullet, pas de margin externe. Le gap du parent gère
       l'espacement. */
}

.cn-piste-item__link {
    display: flex;
    align-items: flex-start;
    gap: var(--cn-space-4);
    padding: var(--cn-space-4) var(--cn-space-5);
    background-color: var(--cn-blanc);
    border: var(--cn-border-thin) solid var(--cn-bleu-nuit-10);
    border-radius: var(--cn-radius-md);
    color: var(--cn-bleu-nuit);
    transition: border-color var(--cn-duration-fast) var(--cn-easing),
                box-shadow var(--cn-duration-normal) var(--cn-easing),
                transform var(--cn-duration-normal) var(--cn-easing);
}
.cn-piste-item__link:hover {
    border-color: var(--cn-or);
    box-shadow: var(--cn-shadow-sm);
    transform: translateY(-1px);
    color: var(--cn-bleu-nuit);
}

.cn-piste-item__body {
    flex: 1;
    min-width: 0;
}

.cn-piste-item__title {
    margin: 0 0 var(--cn-space-2) 0;
    font-size: var(--cn-text-base);
    font-weight: var(--cn-weight-semibold);
    line-height: var(--cn-leading-snug);
    letter-spacing: -0.01em;
    color: var(--cn-bleu-nuit);
    display: inline-flex;
    align-items: baseline;
    gap: var(--cn-space-2);
}
.cn-piste-item__link:hover .cn-piste-item__title {
    color: var(--cn-or);
}
@media (min-width: 1024px) {
    .cn-piste-item__title { font-size: var(--cn-text-lg); }
}

.cn-piste-item__flagship {
    /* Étoile flagship : or, taille discrète pour ne pas voler la vedette
       au titre. Cohérent avec le badge "★ Flagship" de la page Pragmatisme. */
    color: var(--cn-or);
    font-size: 0.9em;
    line-height: 1;
}

.cn-piste-item__excerpt {
    margin: 0;
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit-80);
    line-height: var(--cn-leading-normal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cn-piste-item__arrow {
    flex-shrink: 0;
    align-self: center;
    color: var(--cn-bleu-nuit-50);
    transition: transform var(--cn-duration-normal) var(--cn-easing),
                color var(--cn-duration-fast) var(--cn-easing);
}
.cn-piste-item__link:hover .cn-piste-item__arrow {
    transform: translateX(4px);
    color: var(--cn-or);
}

/* --- CTA "Voir l'ensemble des domaines" sous la grille pilier --- */
.cn-page-section__more {
    margin: var(--cn-space-8) 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cn-space-6) var(--cn-space-10);
}
.cn-page-section__more-link {
    font-size: var(--cn-text-base);
    font-weight: var(--cn-weight-medium);
    text-decoration: none;
    color: var(--cn-bleu-nuit);
    border-bottom: var(--cn-border-medium) solid var(--cn-or);
    padding-bottom: var(--cn-space-1);
    transition: color var(--cn-duration-fast) var(--cn-easing);
}
.cn-page-section__more-link:hover {
    color: var(--cn-or);
}
.cn-page-section__more-link .cn-arrow {
    transition: transform var(--cn-duration-normal) var(--cn-easing);
    display: inline-block;
}
.cn-page-section__more-link:hover .cn-arrow {
    transform: translateX(4px);
}

/* --- Intro de la page index /domaines/ --- */
.cn-page-header__intro {
    margin: 0;
    font-size: var(--cn-text-lg);
    color: var(--cn-bleu-nuit-80);
    line-height: var(--cn-leading-normal);
    max-width: 70ch; /* Lisibilité prose */
}
@media (min-width: 1024px) {
    .cn-page-header__intro {
        font-size: var(--cn-text-xl);
    }
}

/* --- Lede d'une section (sous-titre intro sous le h2) ---
   v0.11.24 : retrait du max-width: 70ch qui contraignait le texte sur
   2 lignes alors que la fenêtre permettait 1 ligne. Cohérent avec le
   choix éditorial v0.11.21+ de laisser les introductions exploiter
   toute la largeur du container ultra sur les pages domaines. */
.cn-page-section__lede {
    margin: var(--cn-space-2) 0 var(--cn-space-4) 0;
    font-size: var(--cn-text-base);
    color: var(--cn-bleu-nuit-80);
    line-height: var(--cn-leading-normal);
}

/* --- Empty state générique --- */
.cn-empty-state {
    margin: var(--cn-space-8) 0;
    padding: var(--cn-space-6);
    text-align: center;
    color: var(--cn-bleu-nuit-50);
    background-color: var(--cn-ivoire);
    border-radius: var(--cn-radius-md);
    font-size: var(--cn-text-base);
}

/* ============================================================================
 * FIN v0.11.15 — Navigation par domaines
 * ========================================================================== */

/* ===========================================================================
 * v0.11.21 (S22) — Modificateurs --wide pour les intros pleine largeur
 *
 * Les paragraphes d'intro (cn-page-header__intro et cn-term-header__intro)
 * étaient bridés en max-width étroit (60-70ch) pour rester confortables
 * en prose. Sur grand écran, cette contrainte laisse de larges zones
 * vides à droite — peu adapté quand l'intro est courte (3-4 lignes) et
 * que le bloc qui suit (sections, grilles) prend toute la largeur.
 *
 * Le modificateur --wide retire le max-width : l'intro s'étend sur toute
 * la largeur du container ultra. Appliqué uniquement quand on veut cet
 * effet (page index /domaines/, page d'un domaine). Le défaut sans
 * modificateur reste la prose bornée pour les autres surfaces (mesure,
 * piste pragmatique, tribune) qui restent lisibles en colonne étroite.
 *
 * Cible :
 *   .cn-page-header__intro--wide  → intro de la page /domaines/
 *   .cn-term-header__intro--wide  → intro du header sur une page domaine
 * ======================================================================== */

.cn-page-header__intro--wide,
.cn-term-header__intro--wide {
    max-width: none;
}

/* v0.11.24 : surcharge spécifique pour neutraliser le max-width de
   .cn-prose quand combinée avec --wide. Le markup typique sur la page
   d'un domaine est :
       <div class="cn-term-header__intro cn-term-header__intro--wide cn-prose">
   et .cn-prose impose à elle seule max-width: 920/1000/1100px (selon
   breakpoint), ce qui surchargeait notre max-width: none ci-dessus à
   cause d'une spécificité égale et d'un ordre source défavorable.
   Sélecteur composé (.X.Y) → spécificité plus haute, surcharge garantie.

   Couvre les deux cas de structure HTML :
     - même élément porte les 2 classes : .cn-X--wide.cn-prose
     - .cn-prose est un descendant : .cn-X--wide .cn-prose */
.cn-page-header__intro--wide.cn-prose,
.cn-page-header__intro--wide .cn-prose,
.cn-term-header__intro--wide.cn-prose,
.cn-term-header__intro--wide .cn-prose {
    max-width: none;
}

/* v0.11.23 : ancien plafond 95ch sur >= 1280px supprimé. Olivier a
   constaté que ce plafond laissait toujours de la place vide à droite
   sur très grand écran (1440-1920px) alors que la grille des cards en
   dessous, elle, exploite pleinement le container ultra. Choix
   éditorial assumé : l'intro suit la largeur du container ultra, sans
   plafond artificiel. La fenêtre du navigateur définit la cadence de
   lecture. */

/* ===========================================================================
 * FIN v0.11.21
 * ======================================================================== */

/* ===========================================================================
 * cn-404 — page "Page introuvable"
 * v0.11.47 : la page 404 (cn-container--prose, sans .cn-page-header) n'avait
 * aucun espacement vertical : l'eyebrow « Erreur 404 » se collait au filet
 * séparateur du header fixe. On aligne le padding-top sur celui des en-têtes
 * de page (.cn-page-header) pour la cohérence, avec de l'air en bas.
 * ======================================================================== */
.cn-404 {
    padding-block: var(--cn-space-10) var(--cn-space-16);
}
@media (min-width: 1024px) {
    .cn-404 { padding-block: var(--cn-space-12) var(--cn-space-16); }
}