/* =====================================================================
   ATELIER v4 — « N° 01, une monographie vivante »
   ---------------------------------------------------------------------
   Concept : une monographie de studio (catalogue raisonné) qui respire.
   Colonnes justifiées, planches numérotées en chiffres romains (fig. I/II/
   III), colophon — la patte du designer graphique. La planche II est
   VIVANTE : le code s'y tape puis s'exécute — la preuve dev, incrustée
   dans l'objet imprimé. Deux voix typographiques : Fraunces italique (le
   geste) et JetBrains Mono (la machine).

   Direction éditoriale (dé-IA) : encre/ivoire/or, coins nets, hairlines,
   zéro dégradé de texte, zéro glow, une seule prise de risque = l'échelle.
   Charte motion : reveals one-shot en bloc (aucune cascade), reduced-motion
   = état final direct, aucun rAF permanent.
   ===================================================================== */
.av4 {
    --enc:   #0a0907;   /* encre */
    --enc2:  #14110d;
    --ivo:   #ede5d6;   /* ivoire */
    --ivo2:  #c4bcac;
    --mute:  #8a8377;   /* graphite lisible (>=4.5:1) */
    --or:    #c8a25c;   /* or */
    --line:  rgba(237, 229, 214, 0.14);
    --line2: rgba(237, 229, 214, 0.28);
    --disp:  'Syne', sans-serif;
    --serif: Georgia, serif;
    --body:  'Onest', system-ui, sans-serif;
    --mono:  'JetBrains Mono', ui-monospace, monospace;

    background: var(--enc);
    color: var(--ivo);
    font-family: var(--body);
    overflow-x: clip;
}
.av4 ::selection { background: var(--or); color: var(--enc); }

/* Largeur de composition + gouttières (pleine largeur maîtrisée) */
.av4-wrap { max-width: 1280px; margin: 0 auto; padding-inline: clamp(1.25rem, 5vw, 3.5rem); }

/* ── Reveal one-shot EN BLOC (jamais de cascade) ─────────────── */
.av4-in { opacity: 0; transform: translateY(16px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.av4-in.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .av4-in { opacity: 1; transform: none; transition: none; } }

/* ── Bandeau colophon (métadonnées de « publication ») ───────── */
/* Grille régulière plutôt qu'un `space-between` : les cinq mentions ont
   des largeurs très inégales (« N° 01 » 44px contre « L'atelier · cahier
   de travail » 252px), et l'espace restant se répartissait entre elles
   en trous irréguliers — ça se lisait comme du désordre. En colonnes de
   même largeur, elles s'alignent comme les lignes d'un cartouche, et le
   nombre de colonnes suit l'écran sans jamais laisser un orphelin. */
.av4-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.55rem 2rem;
    align-items: baseline;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mute);
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
    margin-top: var(--nav-h, 64px);
}
.av4-meta b { color: var(--ivo); font-weight: 500; }
.av4-meta .or { color: var(--or); }

/* ── HERO — la thèse à l'échelle du chapiteau ────────────────── */
.av4-hero { padding: clamp(3.5rem, 9vh, 8rem) 0 clamp(3rem, 7vh, 6rem); }
.av4-kicker {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--or);
    margin: 0 0 clamp(1.5rem, 4vh, 2.75rem);
}
.av4-thesis {
    font-family: var(--disp);
    font-weight: 800;
    font-size: clamp(2.6rem, 8.5vw, 7rem);
    line-height: 0.9;
    letter-spacing: -0.045em;
    margin: 0;
    color: var(--ivo);
    text-wrap: balance;
}
.av4-thesis .proof {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.025em;
    color: var(--or);
    /* léger débord à gauche : signature typographique d'imprimé */
    margin-left: -0.04em;
}
.av4-hero-foot {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: end;
    margin-top: clamp(2.5rem, 6vh, 4.5rem);
}
.av4-lede {
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    line-height: 1.6;
    color: var(--ivo2);
    max-width: none;
    margin: 0;
    text-align: left;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.av4-lede em { font-family: var(--serif); font-style: italic; color: var(--ivo); }

/* Sommaire = table des matières de la monographie */
.av4-toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.av4-toc li { border-bottom: 1px solid var(--line); }
.av4-toc a {
    display: grid;
    grid-template-columns: 2.4rem 1fr auto;
    align-items: baseline;
    gap: 1rem;
    padding: 0.9rem 0.15rem;
    text-decoration: none;
    color: var(--ivo2);
    transition: color 0.25s, padding-left 0.35s cubic-bezier(.16,1,.3,1);
}
.av4-toc a:hover { color: var(--ivo); padding-left: 0.65rem; }
.av4-toc .rn { font-family: var(--mono); font-size: 0.74rem; color: var(--or); }
.av4-toc .di { font-family: var(--disp); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.av4-toc .pr { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); text-align: right; }

/* ── PLANCHE (section) ───────────────────────────────────────── */
.av4-planche { padding: clamp(4rem, 10vh, 7.5rem) 0; border-top: 1px solid var(--line); }
/* La 1re colonne était en `auto` : elle se dimensionnait sur le texte de
   l'étiquette, donc « fig. I » (200px) < « fig. II » (234px) < « fig. III »
   (267px) → la colonne de texte de chaque planche démarrait 33px plus à
   droite que la précédente, en escalier. Largeur fixe : les trois planches
   partagent le même rail. La valeur suit l'échelle de .av4-fig
   (clamp(2.2rem, 5vw, 3.6rem) × ~4,64 = largeur de « fig. III »). */
.av4-head { display: grid; grid-template-columns: clamp(10.3rem, 23.2vw, 16.8rem) 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 6vh, 3.75rem); }
.av4-fig {
    font-family: var(--mono);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 500;
    line-height: 0.9;
    color: var(--or);
    letter-spacing: -0.02em;
}
.av4-fig small { display: block; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); margin-top: 0.6rem; }
.av4-h2 { font-family: var(--disp); font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.0; letter-spacing: -0.035em; color: var(--ivo); margin: 0 0 0.75rem; }
.av4-h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--or); }
/* Le texte va jusqu'au bord de sa colonne : bridé à 58ch il s'arrêtait
   265px avant le bord droit, et la planche paraissait mal calée. */
.av4-note { font-size: 1rem; line-height: 1.62; color: var(--ivo2); max-width: none; margin: 0; text-align: left; -webkit-hyphens: auto; hyphens: auto; }

/* ── I · LE DESSIN — planche contact (specimens) ─────────────── */
.av4-specimens { columns: 3; column-gap: 1.5rem; }
.av4-spec { break-inside: avoid; margin: 0 0 1.5rem; }
.av4-spec a { display: block; text-decoration: none; color: inherit; }
.av4-spec-frame { position: relative; border: 1px solid var(--line); background: var(--enc2); overflow: hidden; }
.av4-spec-frame img { width: 100%; height: auto; display: block; filter: saturate(0.9) contrast(1.02); transition: filter 0.4s ease, transform 0.6s cubic-bezier(.16,1,.3,1); }
.av4-spec a:hover .av4-spec-frame img { filter: saturate(1.05); transform: scale(1.02); }
.av4-spec a:hover .av4-spec-frame { border-color: var(--line2); }
.av4-cap { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--mute); padding: 0.6rem 0.1rem 0; transition: color 0.25s; }
.av4-spec a:hover .av4-cap { color: var(--or); }

/* stagger d'apparition (sur les IMAGES, pas le texte : ce n'est pas une
   cascade de texte — c'est un accrochage de planches) */
.av4-specimens .av4-spec { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.av4-specimens.is-in .av4-spec { opacity: 1; transform: none; }
.av4-specimens.is-in .av4-spec:nth-child(2) { transition-delay: .07s; }
.av4-specimens.is-in .av4-spec:nth-child(3) { transition-delay: .14s; }
.av4-specimens.is-in .av4-spec:nth-child(4) { transition-delay: .21s; }
.av4-specimens.is-in .av4-spec:nth-child(5) { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .av4-specimens .av4-spec { opacity: 1; transform: none; transition: none; } }

/* ── II · LE CODE — la planche VIVANTE (signature) ───────────── */
.av4-vivante { position: relative; border: 1px solid var(--line2); background: var(--enc2); }
/* Marques de repérage d'impression (registration marks) aux 4 coins */
.av4-vivante::before,
.av4-vivante::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--or);
    opacity: 0.6;
    pointer-events: none;
}
.av4-vivante::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.av4-vivante::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.av4-vivante-grid { display: grid; grid-template-columns: 1.1fr 1fr; }
.av4-code { padding: 1.6rem; border-right: 1px solid var(--line); min-height: 360px; max-height: 460px; overflow-y: auto; }
.av4-code pre { margin: 0; font-family: var(--mono); font-size: 0.78rem; line-height: 1.7; color: rgba(237,229,214,0.86); white-space: pre-wrap; word-break: break-word; }
.av4-caret { display: inline-block; width: 8px; height: 1em; background: var(--or); vertical-align: text-bottom; animation: av4-caret .9s steps(1) infinite; }
@keyframes av4-caret { 50% { opacity: 0; } }
.av4-vivante.is-done .av4-caret { display: none; }
.av4-out { position: relative; min-height: 360px; background: var(--enc); }
.av4-out iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* le curseur devient stylet sur la planche (le curseur souleve le relief) */
.av4-out, .av4-out iframe { cursor: crosshair; }
@media (pointer: coarse) { .av4-out, .av4-out iframe { cursor: default; } }
.av4-out .av4-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.av4-vivante-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 1.6rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--mute); }
.av4-vivante-bar a { color: var(--or); text-decoration: none; border-bottom: 1px solid rgba(200,162,92,.4); padding-bottom: 1px; transition: border-color .25s; }
.av4-vivante-bar a:hover { border-bottom-color: var(--or); }

/* ── III · L'ÉCRAN — en production (défilé) ──────────────────── */
.av4-defile { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.1rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(200,162,92,.4) transparent; }
.av4-ecran { flex: 0 0 clamp(300px, 46vw, 560px); scroll-snap-align: start; margin: 0; }
.av4-ecran a { display: block; text-decoration: none; color: inherit; }
.av4-ecran-frame { border: 1px solid var(--line); background: var(--enc2); overflow: hidden; }
.av4-ecran-frame img { width: 100%; height: auto; display: block; transition: transform 0.6s cubic-bezier(.16,1,.3,1); }
.av4-ecran a:hover .av4-ecran-frame img { transform: scale(1.03); }
.av4-ecran a:hover .av4-ecran-frame { border-color: var(--line2); }
.av4-hint { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin: 0.9rem 0 0; }

/* ── COLOPHON ────────────────────────────────────────────────── */
.av4-colophon { padding: clamp(4.5rem, 11vh, 8rem) 0 clamp(4rem, 9vh, 7rem); border-top: 1px solid var(--line); }
.av4-colophon .av4-h2 { font-size: clamp(2.2rem, 6vw, 4.2rem); margin-bottom: 1rem; }
.av4-colophon p { color: var(--ivo2); max-width: none; margin: 0 0 2.5rem; line-height: 1.6; text-align: left; -webkit-hyphens: auto; hyphens: auto; }
.av4-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.av4-btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--disp); font-weight: 700; font-size: 0.95rem; text-decoration: none; padding: 0.95rem 1.7rem; border: 1px solid var(--ivo); color: var(--ivo); background: transparent; transition: background .25s, color .25s, border-color .25s; }
.av4-btn--primary { background: var(--ivo); color: var(--enc); }
.av4-btn--primary:hover { background: var(--or); border-color: var(--or); color: var(--enc); }
.av4-btn--ghost:hover { border-color: var(--or); color: var(--or); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 960px) {
    .av4-hero-foot { grid-template-columns: 1fr; gap: 2.5rem; }
    .av4-head { grid-template-columns: 1fr; gap: 0.9rem; align-items: start; }
    .av4-specimens { columns: 2; }
    .av4-vivante-grid { grid-template-columns: 1fr; }
    .av4-code { border-right: none; border-bottom: 1px solid var(--line); min-height: 0; }
    .av4-out { min-height: 320px; }
}
@media (max-width: 620px) {
    /* « discours » ne rentrait pas : à 72px le mot mesure 458px pour 345
       disponibles à 390px de large, et comme rien ne peut le couper
       (overflow-wrap normal), il était rogné — on lisait « discou ».
       Taille recalée sur la largeur d'écran, avec césure autorisée en
       dernier recours pour les très petits écrans. */
    .av4-thesis {
        font-size: clamp(2.2rem, 13.5vw, 3.5rem);
        line-height: 0.92;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    .av4-specimens { columns: 1; }
    .av4-toc a { grid-template-columns: 2rem 1fr; }
    .av4-toc .pr { display: none; }
    .av4-lede, .av4-note, .av4-colophon p { text-align: left; hyphens: manual; }
}

/* ── Thème clair ─────────────────────────────────────────────── */
html[data-theme="light"] .av4 {
    --enc:  #faf6ec;
    --enc2: #f1ebdd;
    --ivo:  #191612;
    --ivo2: #4a443a;
    --mute: #6c665c;
    --line:  rgba(25, 22, 18, 0.14);
    --line2: rgba(25, 22, 18, 0.3);
}
html[data-theme="light"] .av4-btn--primary { background: #191612; color: #faf6ec; border-color: #191612; }
html[data-theme="light"] .av4-btn--primary:hover { background: var(--or); border-color: var(--or); color: #191612; }

/* ── Neutralise les décorations génériques héritées des section[id] ──── */
/* Traits verticaux / numéros ::before-::after qui coupaient les titres « fig ». */
.av4 section[id]::before,
.av4 section[id]::after,
.av4 section[id] > .container::before,
.av4 section[id] > .container::after { content: none !important; display: none !important; }

/* ── FOOTER — colophon d'imprimé (achevé d'imprimer) ─────────────────── */
.av4-foot {
    background: #0a0907;
    color: #b9b0a0;
    border-top: 1px solid rgba(237, 229, 214, 0.14);
    padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(2rem, 4vh, 2.75rem);
    font-family: 'Onest', system-ui, sans-serif;
}
.av4-foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem 3rem; align-items: start; }
.av4-foot-mark { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: #ede5d6; margin: 0 0 0.9rem; }
.av4-foot-line { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.7; color: #8a8377; margin: 0; }
.av4-foot-line b { color: #ede5d6; font-weight: 500; }
.av4-foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 2.5rem; }
.av4-foot-links a { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; letter-spacing: 0.05em; color: #b9b0a0; text-decoration: none; transition: color 0.2s; width: max-content; }
.av4-foot-links a:hover { color: var(--gold); }
.av4-foot-copy { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6c665c; margin: clamp(2rem, 5vh, 3rem) 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(237, 229, 214, 0.08); }
@media (max-width: 620px) { .av4-foot-links { grid-template-columns: 1fr; } }
html[data-theme="light"] .av4-foot { background: #faf6ec; color: #4a443a; border-top-color: rgba(25,22,18,.14); }
html[data-theme="light"] .av4-foot-mark { color: #191612; }
html[data-theme="light"] .av4-foot-line b { color: #191612; }
html[data-theme="light"] .av4-foot-links a { color: #4a443a; }
html[data-theme="light"] .av4-foot-copy { color: #6c665c; border-top-color: rgba(25,22,18,.1); }

/* ── FOND VIVANT du hero — champ vectoriel génératif (on-page) ───────── */
.av4-hero { position: relative; isolation: isolate; }
.av4-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
    /* fondu sur les bords : le champ vit dans les marges, le texte reste net */
    -webkit-mask-image: radial-gradient(115% 88% at 28% 42%, transparent 0%, transparent 26%, #000 62%);
            mask-image: radial-gradient(115% 88% at 28% 42%, transparent 0%, transparent 26%, #000 62%);
}
.av4-hero-canvas.is-ready { opacity: 1; }
.av4-hero > :not(.av4-hero-canvas) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .av4-hero-canvas { transition: none; } }

/* Ceinture-bretelles : aucune décoration ::before/::after sur les titres
   « fig » ni leur en-tête (élimine tout trait hérité qui traverserait le texte). */
.av4 .av4-fig::before, .av4 .av4-fig::after,
.av4 .av4-head::before, .av4 .av4-head::after,
.av4 .av4-fig small::before, .av4 .av4-fig small::after { content: none !important; display: none !important; background: none !important; }

/* Le trait vertical bleu au-dessus des titres « fig » = .chapter-mark,
   injecté par script.js dans chaque section[id]. Déco générique du portfolio
   qui n'a rien à faire dans la monographie → masquée. */
.av4 .chapter-mark { display: none !important; }

/* ── Thème clair : ce que l'inversion des jetons n'a pas couvert ───── */
/* Trois éléments gardaient des couleurs pensées pour le fond d'encre. */

/* 1. Le code de la planche vivante était ivoire sur crème, contraste 1.1.
      Il suit désormais le jeton, qui s'inverse avec le thème. */
html[data-theme="light"] .av4-code pre { color: rgba(25, 22, 18, 0.88); }
html[data-theme="light"] .av4-caret { background: #6b5220; }

/* 2. L'en-tête restait sombre au-dessus d'une page crème. */
html[data-theme="light"] #header {
    background: rgba(250, 246, 236, 0.9);
    border-bottom: 1px solid rgba(25, 22, 18, 0.12);
}
html[data-theme="light"] #header .nav-link,
html[data-theme="light"] #header .logo { color: #191612; }
html[data-theme="light"] #header .nav-link:hover { color: #6b5220; }
/* le bouton Contact était en encre sur encre, contraste 1 */
html[data-theme="light"] #header .nav-cta {
    background: #191612;
    color: #faf6ec;
    border-color: #191612;
}
html[data-theme="light"] #header .nav-cta:hover { background: var(--gold); color: #191612; }
html[data-theme="light"] .hamburger-line { background: #191612; }

/* La bascule DESIGN · DEV garde le traitement de BARRE SOMBRE ici, même
   en thème clair — comme .nav-link et .logo juste au-dessus.
   Pourquoi : sur /atelier la barre reste sombre en thème clair. La règle
   qui gagne est `html.editorial-page header#header` (styles.css, (1,1,2)),
   qui bat le correctif clair de ce fichier ((1,1,1)) ; l'intention écrite
   plus haut (« l'en-tête restait sombre au-dessus d'une page crème ») n'est
   donc pas tenue, et c'est antérieur à cette bascule. Constat, pas
   correction : redresser la barre d'/atelier est un autre chantier.
   Ce qui EST corrigé ici : le module 133 peignait la bascule en encre
   SOMBRE dès data-theme="light", sans savoir que cette barre-là reste
   sombre — mesuré au pixel sur le fond réel rgb(40,39,37) : 1,20:1 pour
   l'état inactif et 2,14:1 (design) / 1,81:1 (dev) pour l'actif. Illisible,
   et vu en capture avant d'être mesuré.
   Les valeurs ci-dessous sont exactement celles du thème sombre de 133 ;
   la portée #header ne peut pas fuir vers les autres pages, ce fichier
   n'étant chargé que par /atelier. */
html[data-theme="light"] #header .couloir-link { color: rgba(255, 255, 255, 0.55); }
html[data-theme="light"] #header .couloir-link:hover,
html[data-theme="light"] #header .couloir-link:focus-visible { color: rgba(255, 255, 255, 0.92); }
html[data-theme="light"] #header .couloir-sep { color: rgba(255, 255, 255, 0.35); }
/* Les deux teintes d'état actif sont ÉCLAIRCIES du strict nécessaire par
   rapport à celles du thème sombre (#c8724f / #257cff). Raison mesurée :
   ce fond-ci n'est pas le même. En thème sombre la barre d'/atelier
   compose sur rgb(9,9,8) ; en thème clair, le même rgba(10,9,7,0.88) se
   pose sur une page crème et compose sur rgb(40,39,37) — un charbon
   nettement plus clair. Les valeurs du sombre y tombent à 4,25:1 (design)
   et 3,84:1 (dev), sous le seuil AA.
   Même teinte, même saturation, luminosité HSL montée du minimum requis
   (54,7 → 57,7 % et 57,3 → 62,8 %) : 4,66:1 et 4,60:1 sur le fond
   RÉELLEMENT mesuré au pixel. */
html[data-theme="light"][data-couloir="design"] #header .couloir-link.is-active { color: #cc7b5b; }   /* couleur-fixe: la bascule montre la couleur de CHAQUE couloir, elle ne peut pas suivre l'actif */
html[data-theme="light"][data-couloir="dev"] #header .couloir-link.is-active { color: #418dff; }   /* couleur-fixe: la bascule montre la couleur de CHAQUE couloir, elle ne peut pas suivre l'actif */

/* 3. Le bandeau de métadonnées et les planches suivent le thème. */
html[data-theme="light"] .av4-meta { color: #6c665c; }
html[data-theme="light"] .av4-meta b { color: #191612; }