/* ============================================================================
 * Base — typographie + layout général + a11y
 * v0.8.0 : Inter partout, palette sobre, fond blanc
 * ========================================================================== */


/* ===== Body =============================================================
 * v0.8.7 : fond global passé de blanc pur à --cn-ivoire-95 (#FAF6EE).
 * Ce ton "papier journal premium" donne plus de chaleur éditoriale et
 * supporte mieux la lecture longue (manifeste, doctrine, tribunes).
 * Les éléments qui doivent ressortir (cards, header, footer, citation)
 * conservent un fond blanc pour créer un léger relief.
 * ========================================================================= */

html {
    background-color: var(--cn-ivoire-95);
    /* v0.10.25 : compensation du header sticky fixed lors des scrolls
       d'ancre internes (clic sur un item du sommaire TOC, lien #section).
       Sans ça, le titre cliqué se retrouve caché derrière .cn-sticky-top
       et le lecteur voit le paragraphe suivant collé en haut de viewport,
       pas le titre visé — sensation que "ça atterrit trop bas".
       La custom property --cn-sticky-top-height est posée par main.js
       (sticky top compensation : mesure réelle au load + ResizeObserver
       qui suit la hauteur quand le breadcrumb wrap, quand l'admin bar
       WP est présente, etc.). Fallback 96px pour le tout premier paint
       avant exécution du JS — couvre header desktop + breadcrumb-bar.
       scroll-behavior: smooth rend le saut visible plutôt qu'instantané ;
       il est désactivé automatiquement par reset.css quand
       prefers-reduced-motion est actif (a11y respectée). */
    scroll-padding-top: var(--cn-sticky-top-height, 96px);
    scroll-behavior: smooth;
}
body {
    font-family: var(--cn-font-body);
    font-size: var(--cn-text-base);
    font-weight: var(--cn-weight-regular);
    line-height: var(--cn-leading-normal);
    color: var(--cn-bleu-nuit);
    background-color: var(--cn-ivoire-95);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Inter font features pour un rendu propre */
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}


/* ===== Skip link ======================================================== */

.cn-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: var(--cn-space-3) var(--cn-space-4);
    background-color: var(--cn-bleu-nuit);
    color: var(--cn-blanc);
    font-family: var(--cn-font-body);
    font-size: var(--cn-text-sm);
    font-weight: var(--cn-weight-medium);
    text-decoration: none;
}
.cn-skip-link:focus {
    left: var(--cn-space-2);
    top: var(--cn-space-2);
    border-radius: var(--cn-radius-md);
}


/* ===== Hiérarchie des titres ==========================================
 * Inter pour tous les titres. Letter-spacing négatif pour les gros titres
 * (compense la "respiration" naturelle d'Inter qui peut faire mou en
 * grand). */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cn-font-body);
    font-weight: var(--cn-weight-semibold);
    line-height: var(--cn-leading-snug);
    color: var(--cn-bleu-nuit);
    letter-spacing: -0.015em;
}

h1 {
    font-size: var(--cn-text-3xl);
    line-height: var(--cn-leading-tight);
    letter-spacing: -0.025em;
    font-weight: var(--cn-weight-bold);
}
h2 {
    font-size: var(--cn-text-2xl);
    letter-spacing: -0.02em;
}
h3 { font-size: var(--cn-text-xl); }
h4 { font-size: var(--cn-text-lg); }
h5 { font-size: var(--cn-text-base); }
h6 { font-size: var(--cn-text-sm); text-transform: uppercase; letter-spacing: 0.06em; }

@media (min-width: 1024px) {
    h1 { font-size: var(--cn-text-4xl); }
    h2 { font-size: var(--cn-text-3xl); }
}

/* Espacements verticaux */
h2 { margin-top: var(--cn-space-12); margin-bottom: var(--cn-space-4); }
h3 { margin-top: var(--cn-space-8);  margin-bottom: var(--cn-space-3); }
h4 { margin-top: var(--cn-space-6);  margin-bottom: var(--cn-space-2); }

p { margin-bottom: var(--cn-space-4); }


/* ===== Liens ============================================================ */

a {
    color: var(--cn-bleu-nuit);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--cn-bleu-nuit-50);
    transition: color var(--cn-duration-fast) var(--cn-easing),
                text-decoration-color var(--cn-duration-fast) var(--cn-easing);
}
a:hover {
    color: var(--cn-or);
    text-decoration-color: var(--cn-or);
}

.cn-no-underline,
nav a,
.cn-card a,
.cn-button a {
    text-decoration: none;
}
.cn-no-underline:hover,
nav a:hover {
    color: var(--cn-or);
}


/* ===== Méta / eyebrow / breadcrumb ====================================== */

.cn-meta,
.cn-eyebrow,
.cn-breadcrumb,
.cn-tag,
nav,
button,
.cn-button {
    font-family: var(--cn-font-body);
}

.cn-meta {
    color: var(--cn-bleu-nuit-50);
    font-size: var(--cn-text-sm);
}

.cn-eyebrow {
    font-size: var(--cn-text-xs);
    font-weight: var(--cn-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cn-or);
}


/* ===== Codes =========================================================== */

code, kbd, pre {
    font-family: var(--cn-font-mono);
    font-size: 0.9em;
}
code {
    color: var(--cn-bleu-nuit);
    background-color: var(--cn-bleu-nuit-10);
    padding: 0.1em 0.4em;
    border-radius: var(--cn-radius-sm);
}


/* ===== LAYOUT — containers étendus ====================================== */

.cn-container {
    width: 100%;
    max-width: var(--cn-content-wide);
    margin-inline: auto;
    padding-inline: var(--cn-content-edge);
}

.cn-container--prose {
    max-width: var(--cn-content-prose);
}

.cn-container--ultra {
    max-width: var(--cn-content-ultra);
}


/* ===== Main ============================================================ */

.cn-main {
    flex: 1 0 auto;
    /* v0.11.44 — réserve l'espace du header fixe DÈS le premier paint, pour
       éviter le saut de contenu. Le header (.cn-sticky-top) est position:fixed
       (hors flux) ; auparavant seul main.js posait le padding-top (au load),
       d'où un flash : le contenu démarrait sous le header puis descendait d'un
       coup. On réserve désormais en CSS via --cn-sticky-top-height (que main.js
       met à la hauteur réelle sur <html>) ; le fallback couvre le tout premier
       paint, avant exécution du JS. */
    padding-top: var(--cn-sticky-top-height, 88px);
}

/* Fallback du premier paint quand l'admin bar WP (32px) est présente. */
.admin-bar .cn-main {
    padding-top: var(--cn-sticky-top-height, 120px);
}


/* ===== Body flex (footer en bas) ====================================== */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* ===== Listes prose =================================================== */

ul:not([role="list"]),
ol:not([role="list"]) {
    margin-block: var(--cn-space-4);
    padding-inline-start: var(--cn-space-6);
}
/* v0.10.37 : restriction aux listes prose ajoutée — cohérente avec la
   règle voisine. Avant : li + li s'appliquait globalement, contaminant
   les <ul role="list"> stylées en grid/flex (les items 2..N recevaient
   un margin-top: 8px qui désalignait le premier item de ses voisins
   dans une rangée de grille). Maintenant : la règle n'affecte que les
   listes prose natives, exactement comme le bloc ul:not([role="list"])
   au-dessus.
   v0.10.38 : :not([role="list"]) enveloppé dans un second :where() pour
   neutraliser sa contribution à la spécificité. Sans cela, le sélecteur
   passait de (0,0,2) à (0,1,2) et écrasait des règles applicatives
   ciblant des classes simples (ex. .cn-nav__item { margin: 0 }), créant
   un désalignement régression dans la top bar (premier item Manifeste
   décalé par rapport aux suivants). Avec le double :where(), spécificité
   totale = (0,0,2) — strictement identique à l'ancienne règle li + li,
   donc aucun écrasement régression possible. */
:where(ul, ol):where(:not([role="list"])) > li + li {
    margin-top: var(--cn-space-2);
}


/* ===== Citations =======================================================
 * v0.9.1 : guillemets typographiques or grandes mais CONTENUES dans la
 * box du blockquote — fini les débordements `left: -3rem` qui chevauchaient
 * le sommaire du manifeste, fini les `bottom: -0.6em` qui sortaient en
 * dehors de la prose.
 *
 * Stratégie :
 *  - padding-top et padding-left généreux dans le blockquote
 *  - guillemets en absolute mais avec coordonnées POSITIVES, dans la box
 *  - léger fond ivoire-90 + filet or à gauche pour bien délimiter
 *  - les guillemets sont à 0.85 d'opacité pour rester décoratives sans
 *    dominer le texte
 *
 * Les <hr> markdown adjacents sont toujours masqués via :has().
 */

blockquote {
    position: relative;
    margin: var(--cn-space-10) 0;
    padding: var(--cn-space-10) var(--cn-space-12) var(--cn-space-10) var(--cn-space-16);
    color: var(--cn-bleu-nuit);
    font-style: italic;
    font-size: 1.1em;
    line-height: var(--cn-leading-snug);
    border: 0;
    background-color: rgba(184, 150, 46, 0.05); /* léger fond or transparent */
    border-left: 3px solid var(--cn-or);
    border-radius: 0 var(--cn-radius-md) var(--cn-radius-md) 0;
    /* Pas d'overflow:hidden pour que d'éventuels enfants longs (liens) ne
       soient pas tronqués, mais les pseudo-éléments restent dans la box
       grâce aux coordonnées positives ci-dessous. */
}
@media (min-width: 1024px) {
    blockquote {
        padding: var(--cn-space-12) var(--cn-space-16) var(--cn-space-12) var(--cn-space-20);
        font-size: 1.2em;
    }
}
/* Guillemet ouvrant : DANS la box, en haut à gauche au-dessus du filet or */
blockquote::before {
    content: "\201C";
    position: absolute;
    left: var(--cn-space-3);
    top: var(--cn-space-1);
    font-family: Georgia, 'Times New Roman', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 3.5em;
    line-height: 1;
    color: var(--cn-or);
    opacity: 0.5;
    pointer-events: none;
}
@media (min-width: 1024px) {
    blockquote::before {
        font-size: 4em;
        left: var(--cn-space-4);
    }
}
/* Guillemet fermant : DANS la box, en bas à droite */
blockquote::after {
    content: "\201D";
    position: absolute;
    right: var(--cn-space-3);
    bottom: var(--cn-space-1);
    font-family: Georgia, 'Times New Roman', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 3.5em;
    line-height: 1;
    color: var(--cn-or);
    opacity: 0.5;
    pointer-events: none;
}
@media (min-width: 1024px) {
    blockquote::after {
        font-size: 4em;
        right: var(--cn-space-4);
    }
}
blockquote p {
    margin: 0;
    position: relative; /* place le texte au-dessus des guillemets décoratives */
    z-index: 1;
}
blockquote p + p {
    margin-top: var(--cn-space-3);
}


/* ===== Hr — séparateurs prose discrets ================================== */

hr {
    margin: var(--cn-space-10) auto;
    border: 0;
    height: 1px;
    width: 60%;
    max-width: 200px;
    background-color: var(--cn-bleu-nuit-20);
}
/* Masquer les hr collés à un blockquote, dans les deux sens */
hr:has(+ blockquote),
blockquote + hr {
    display: none;
}


/* ===== Figures ======================================================== */

figure { margin: var(--cn-space-8) 0; }
figcaption {
    margin-top: var(--cn-space-2);
    font-family: var(--cn-font-body);
    font-size: var(--cn-text-sm);
    color: var(--cn-bleu-nuit-50);
    text-align: center;
}


/* ===== Tableaux ======================================================= */

table {
    margin-block: var(--cn-space-6);
    font-size: var(--cn-text-sm);
}
th, td {
    padding: var(--cn-space-3) var(--cn-space-4);
    text-align: left;
    border-bottom: var(--cn-border-thin) solid var(--cn-bleu-nuit-20);
}
th {
    font-family: var(--cn-font-body);
    font-weight: var(--cn-weight-semibold);
    color: var(--cn-bleu-nuit);
    background-color: var(--cn-bleu-nuit-10);
}


/* ===== Tabular numbers (chiffres alignés) ============================= */

.cn-tabular { font-variant-numeric: tabular-nums; }


/* ===== Helper a11y ==================================================== */

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


/* ===== Sélection ====================================================== */

::selection {
    background-color: var(--cn-or-50);
    color: var(--cn-bleu-nuit);
}