/* LaReunion.ai — l'atlas des preuves.
   Papier blanc, encre noire, filets ; la couleur réservée aux lieux, toujours cerclée d'encre. Deux fontes
   servies d'ici (la politique de sécurité de la page interdit le reste), avec un repli aux métriques ajustées
   pour que rien ne bouge quand elles arrivent. Le fil de relevé de la marge est la seule audace : des
   pseudo-éléments, aucune image, rien dans l'ordre de tabulation. */

@font-face{font-family:Archivo;src:url('../vendor/home-archivo-black.woff2?v=1') format('woff2');font-weight:400 900;font-display:swap}   /* une seule graisse (900), déclarée 400-900 : la même face en 400 (titres) et en 700 (badge, boutons), jamais de gras synthétique */
@font-face{font-family:Spline;src:url('../vendor/home-spline-400.woff2?v=1') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"Archivo Fallback";src:local("Arial Black");font-weight:400 900;size-adjust:100%;ascent-override:103.5%;descent-override:31.2%;line-gap-override:0%}   /* mesuré le 16/09 : largeur ×0,9999, métriques win 1035/312 */
@font-face{font-family:"Spline Fallback";src:local("Arial");size-adjust:100%;ascent-override:96.35%;descent-override:23.65%;line-gap-override:0%}   /* largeur ×1,0007, métriques typo 1927/473 sur 2000 */

:root{
  --papier:#fff;--encre:#000;
  --gris:#6b6f72;           /* la voix secondaire : 5,07:1 sur papier */
  --trame:#e2e2df;          /* filets mineurs, ombres à plat — jamais une bordure de composant */
  --lave:#ff4a17;--lave-texte:#c93400;--lagon:#00a9c0;--soufre:#ffc531;--canne:#1fa84c;
  --nuit:#0b1c33;--erreur:#c8320c;--papier-gris:#c9c9c6;--papier-sourd:#9a9a97;
  --enamel:var(--encre);--halo:rgba(0,0,0,.18);
  --display:Archivo,"Archivo Fallback","Arial Black",sans-serif;
  --texte:Spline,"Spline Fallback",Arial,system-ui,sans-serif;
  --marge:clamp(22px,4.6vw,76px);--large:1420px;--pb:clamp(56px,6vw,96px);
  --colonnes:1fr 1fr;--gouttiere:40px;   /* une seule grille : deux colonnes égales, un même axe pour la seconde colonne sur toute la page (une, questions, relevés, encart, notes) */
  scroll-behavior:smooth;scroll-padding-top:84px;
}
[data-email=lagon]{--enamel:var(--lagon);--halo:rgba(0,169,192,.35)}
[data-email=lave]{--enamel:var(--lave);--halo:rgba(255,74,23,.35)}
[data-email=soufre]{--enamel:var(--soufre);--halo:rgba(255,197,49,.45)}
[data-email=canne]{--enamel:var(--canne);--halo:rgba(31,168,76,.35)}
[data-email=encre]{--enamel:var(--encre);--halo:rgba(0,0,0,.18)}
[data-email=gris]{--enamel:var(--papier-gris);--halo:rgba(0,0,0,.12)}   /* les notes du Fil : un nœud sourd, cerclé d'encre comme les autres */

*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--encre);font:400 16px/1.6 var(--texte);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.045em;margin:0}
h1{font-size:clamp(42px,5.8vw,84px);line-height:.95}
h2{font-size:clamp(32px,3.75vw,54px);line-height:1.02;text-wrap:balance}
p{margin:0;text-wrap:pretty}   /* pas de mot seul en dernière ligne */
a{color:inherit;text-decoration:none}
button{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit}
button:disabled{cursor:wait;opacity:.5}
input,select{font:inherit;color:inherit}
a,button,input,select,summary{touch-action:manipulation}
:focus-visible{outline:2px solid var(--encre);outline-offset:2px;box-shadow:0 0 0 6px var(--papier)}
[hidden]{display:none!important}
::selection{background:var(--soufre);color:var(--encre)}
.skip-link{position:fixed;top:8px;left:8px;z-index:30;background:var(--encre);color:var(--papier);padding:12px 16px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand-mark{display:block;flex:none;overflow:visible}
.brand-mark .neural-links path{stroke-width:3.1}
.brand-mark .neural-nodes circle{stroke-width:2.9}
.neural-links path{fill:none;stroke:var(--encre);stroke-linecap:round;stroke-linejoin:round}
.neural-nodes circle{stroke:var(--encre);paint-order:stroke fill}

/* ── Les puces et les nœuds : l'émail du thème, cerclé d'encre ─────────────────────────────────── */
.puce,.legende li::before,.sources::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--enamel);border:1.5px solid var(--encre);flex:none}

/* ── L'en-tête ──────────────────────────────────────────────────────────────────────────────────── */
.en-tete{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--large);margin-inline:auto;padding:12px var(--marge);background:var(--papier)}
.en-tete::after{content:"";position:absolute;left:var(--marge);right:var(--marge);bottom:0;border-bottom:1px solid var(--trame)}
.marque{display:inline-flex;align-items:center;gap:12px;min-height:44px;white-space:nowrap}
.marque-nom{font:400 26px/1 var(--display);letter-spacing:-.045em}
.chip{display:inline-block;background:var(--lave);color:var(--papier);font:700 19px/1 var(--display);letter-spacing:-.02em;padding:3px 5px 4px;margin-left:4px;vertical-align:1px}   /* blanc sur lave 3,36:1 : texte large (≥ 18,66 px en 700), seuil 3:1 */
.en-tete nav{display:flex;align-items:center;gap:26px;font-size:14px}
.nav-texte{min-height:44px;display:inline-flex;align-items:center;color:var(--gris);transition:color .16s}
.nav-texte:hover{color:var(--encre)}
.nav-join{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--encre);white-space:nowrap;transition:background .16s,color .16s}
.nav-join:hover{background:var(--encre);color:var(--papier)}
.nav-court{display:none}

/* ── Les planches et leurs cartouches ───────────────────────────────────────────────────────────── */
.planche{position:relative;max-width:var(--large);margin-inline:auto;padding:var(--pb) var(--marge) calc(var(--pb) * .6)}
.cartouche{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;border-top:1.5px solid var(--encre);padding-top:14px;margin-bottom:40px;font-size:12.5px;line-height:1.6;color:var(--gris)}
.cartouche b{font-weight:400}
.cartouche-piece{border-top:1px solid var(--trame);margin-bottom:24px}
.cartouche-lieu::before{content:"";position:absolute;left:calc(var(--marge) / -2 - 7px);top:18px;width:14px;height:14px;border-radius:50%;background:var(--enamel);border:1.5px solid var(--encre);transition:background .2s .45s}
.tete-grille{display:grid;grid-template-columns:var(--colonnes);gap:20px var(--gouttiere);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.tete-grille p{color:var(--gris);max-width:56ch;font-size:15px}
.note-planche{margin-top:clamp(32px,4vw,56px);padding-top:20px;border-top:1px solid var(--trame);font-size:12.5px;color:var(--gris);line-height:1.7;display:grid;grid-template-columns:var(--colonnes);gap:0 var(--gouttiere)}   /* le filet fait la largeur de la planche, le texte tient l'axe de la seconde colonne */
.note-planche span{grid-column:2;max-width:64ch}

/* Le fil de relevé (≥ 861 px) : un trait d'encre dans la marge, à marge/2 à gauche du contenu — il ne prend
   jamais un pixel au texte. Chaque planche trace son segment ; les planches se touchent, le fil est continu. */
@media(min-width:861px){
  .planche.trace::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--marge) / 2);width:1.5px;background:var(--encre)}
  .planche-film::before{top:var(--pt)}
  .fil-anime .planche.trace::before{transform:scaleY(0);transform-origin:top;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .fil-anime .planche.is-lue::before{transform:none}
  .fil-anime .trace:not(.is-lue)>.cartouche>.cartouche-lieu::before{background:var(--papier)}
  .fil-anime .trace.is-lue>.cartouche>.cartouche-lieu::before{animation:echo .7s .45s}
  .releves-grille .ecran{position:sticky;top:92px}   /* la figure suit le tableau, sans rien animer — en colonne (≤ 860), elle passerait sur les lignes */
  .fil-noeud::before{content:"";position:absolute;left:calc(var(--marge) / -2 - 7px);top:34px;width:14px;height:14px;border-radius:50%;background:var(--enamel);border:1.5px solid var(--encre)}   /* le nœud du billet, sur le fil */
}
@keyframes echo{from{box-shadow:0 0 0 0 var(--halo)}to{box-shadow:0 0 0 10px transparent}}

/* ── Le bandeau : la lave à fond perdu, entre la une et les preuves. Une ligne en blanc, texte large
   (≥ 24 px : 3,36:1 suffit), calée sur la marge des planches ; ni bouton, ni puce, ni fil. ──────────── */
.bandeau{background:var(--lave);color:var(--papier);font:400 clamp(24px,2.6vw,38px)/1.1 var(--display);letter-spacing:-.045em;padding:clamp(34px,3.5vw,50px) max(var(--marge),calc((100% - var(--large)) / 2 + var(--marge)))}

/* ── La une et le film, sur le papier ───────────────────────────────────────────────────────────── */
.planche-film{--pt:clamp(16px,2vw,28px);padding-top:var(--pt);padding-bottom:var(--pb)}
.planche-film .cartouche{border-top:0;padding-top:0}   /* sous le filet de l'en-tête, pas de second filet */
.planche-film .cartouche-lieu::before{top:4px}
.planche-film .cartouche>span{color:var(--lave-texte)}   /* 5,28:1 sur papier */
.film-grille{display:grid;grid-template-columns:var(--colonnes);gap:var(--gouttiere);align-items:start}
.film-copie h1{margin-bottom:24px}
.intro{max-width:40ch;margin-bottom:28px;color:var(--gris)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 26px;background:var(--lave);color:var(--papier);border:1.5px solid var(--encre);font:700 19px/1.2 var(--display);letter-spacing:-.02em;transition:background .16s,color .16s}   /* blanc sur lave 3,36:1 : texte large (19 px en 700) */
.bouton:hover{background:var(--encre);color:var(--papier)}
.lien-texte{display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:1.2;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color .16s}   /* souligné sous le mot, comme « Entrez » ; la boîte de 44 px reste la cible */
.lien-texte:hover,.lien-inline:hover{color:var(--lave-texte)}
.ligne-beta{margin-top:20px;font-size:14px;color:var(--gris)}
.entrez,.lien-inline,.notes details a{position:relative;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.entrez::before,.lien-inline::before,.notes details a::before{content:"";position:absolute;inset:-14px 0}   /* la cible de 44 px, sans toucher la ligne ni l'anneau de focus, qui suit le texte (un padding l'aurait fait mordre la ligne du dessus) */
.entrez{color:var(--lave-texte)}
.film{margin:0}
.film figcaption{margin-top:20px;font-size:14px;color:var(--gris);line-height:1.6}
.film-cadre{position:relative;aspect-ratio:16/9;border:1.5px solid var(--encre);background:var(--nuit);box-shadow:12px 12px 0 var(--trame);overflow:hidden}
.film-video,.plate-affiche{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.plate-son{position:absolute;top:12px;right:14px;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;background:var(--papier);color:var(--encre);font:400 13px/1 var(--display);border:1.5px solid var(--encre);transition:background .16s,color .16s}
.plate-son::before{content:"";width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--lave)}
.plate-son:hover{background:var(--encre);color:var(--papier)}
.legende{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--gris)}
.legende li{display:flex;align-items:center;gap:8px}
.film-legende{margin-top:32px;padding-top:20px;border-top:1px solid var(--trame)}
.film-legende::before{content:"Dans le film\A0:"}

/* ── Quatre questions : la question et sa réponse côte à côte, puis l'écran réel en pleine largeur de planche
   (les panneaux de l'application y restent lisibles), sa légende, ses sources ────────────────────────── */
.piece{padding-top:clamp(24px,2.6vw,40px)}
.piece-grille{display:grid;grid-template-columns:var(--colonnes);grid-template-areas:"q t" "e e";gap:32px var(--gouttiere);align-items:start}
.piece h3{grid-area:q;font-size:clamp(24px,2.3vw,34px);line-height:1.12;text-wrap:balance}
.piece-texte{grid-area:t}
.piece-texte p{font-size:15px;line-height:1.65;max-width:56ch}
.piece-texte .sources{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--gris)}   /* plus précis que .piece-texte p, sinon 15 px */
.sources::before{margin-top:5px}
figure img[data-src]{display:none}   /* différée et pas encore demandée : sans JavaScript, seul le <noscript> montre l'image ; home.js retire data-src au chargement */
.ecran{margin:0;min-width:0}
.piece-grille .ecran{grid-area:e}
.ecran img{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1.5px solid var(--encre);box-shadow:8px 8px 0 var(--trame);background:var(--trame)}
.ecran figcaption{margin-top:18px;font-size:12.5px;color:var(--gris);line-height:1.6;max-width:72ch}
.ecran-basse{max-width:704px}

/* ── Les points de vue : une planche contact — 35 cadres à la file, 7 par rang (5 rangs pleins), rangés par
   thème, la légende des thèmes en tête. Des cadres, pas des cartes : un filet, aucune ombre, aucun survol
   (rien n'y est cliquable). Le rang étire chaque cadre à sa hauteur. ───────────────────────────────────── */
.planche-vues .legende{margin-bottom:22px}
.grille{display:grid;grid-template-columns:repeat(7,1fr);gap:18px 14px;list-style:none;margin:0;padding:0}
.grille figure{height:100%;margin:0;border:1px solid var(--encre);background:var(--papier)}
.grille img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-bottom:1px solid var(--encre);background:var(--trame)}
.grille figcaption{padding:8px 10px 10px;font-size:12.5px;line-height:1.4}
.grille b{display:block;font-weight:400;color:var(--encre)}
.grille .theme{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--gris)}

/* ── Les relevés : la figure, puis le tableau ───────────────────────────────────────────────────── */
.planche-releves{padding-bottom:var(--pb)}   /* avant un bloc à fond perdu, le même blanc qu'après (86 px à 1440) */
.releves-grille{display:grid;grid-template-columns:var(--colonnes);gap:32px var(--gouttiere);align-items:start}
.releves{width:100%;border-collapse:collapse}
.releves th,.releves td{padding:14px 0;border-bottom:1px solid var(--trame);text-align:left;vertical-align:top;font-weight:400}
.releves thead th{font-size:12.5px;color:var(--gris);padding-top:0;border-bottom:1.5px solid var(--encre)}
.releves thead th:last-child,.releves td{text-align:right}
.releves tbody th{font-size:15px;line-height:1.4}
.releves th small{display:block;font-size:12.5px;color:var(--gris);margin-top:2px}
.releves td{font:400 clamp(26px,2.4vw,34px)/1 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:24px}
.chiffre{display:inline-block}
.releves .sous th{padding-left:22px}   /* la ligne « dont », rattachée à la précédente */
.releves .sous td{font-size:clamp(20px,1.6vw,24px)}

/* ── Le Fil : chaque billet un nœud sur le fil de relevé — sa date et son type dans la première colonne, le titre et
   le résumé sur l'axe de la seconde ; le nœud prend l'émail du type, cerclé d'encre, posé sur le fil dans la marge.
   Le même nœud sert l'accueil (les quatre derniers) et l'index /fil (tous). ─────────────────────────────────────── */
.fil-liste{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--encre)}
.planche-fil .legende{margin-bottom:22px}
.fil-noeud{position:relative;display:grid;grid-template-columns:var(--colonnes);gap:8px var(--gouttiere);align-items:start;padding:28px 0;border-bottom:1px solid var(--trame)}
.fil-noeud>.fil-meta{padding-top:7px}   /* la date à hauteur de la première ligne du titre */
.fil-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:12.5px;color:var(--gris);line-height:1.6}
.fil-type{display:inline-flex;align-items:center;gap:8px}
.fil-brouillon{border:1px solid var(--encre);padding:0 6px;color:var(--encre);font-size:11.5px;line-height:1.5;letter-spacing:.02em}
.fil-corps{min-width:0}
/* h3 sous le h2 de la planche de l'accueil, h2 sous le h1 de /fil : même dessin (ordre des titres sans trou) */
.fil-noeud :is(h2,h3){font-size:clamp(22px,2.1vw,30px);line-height:1.12;letter-spacing:-.04em;text-wrap:balance}
.fil-noeud :is(h2,h3) a{transition:color .16s}
.fil-noeud :is(h2,h3) a:hover{color:var(--lave-texte)}
.fil-resume{margin-top:10px;font-size:15px;line-height:1.65;color:var(--gris);max-width:56ch}
.fil-lire{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-size:14px}
.fil-lire::before{content:none}   /* la boîte de 44 px suffit : pas de cible étendue qui mordrait le résumé */
.h1-fil{font-size:clamp(32px,3.75vw,54px);line-height:1.02;text-wrap:balance}   /* le h1 de l'index du Fil, à la taille d'un h2 de planche */

/* ── La page d'un billet : le titre et le résumé côte à côte, l'écran en pleine largeur de planche, puis « en bref »
   dans la première colonne et le corps sur l'axe de la seconde, 68 caractères par ligne ──────────────────────────── */
.planche-billet{padding-bottom:var(--pb)}
.billet-tete{display:grid;grid-template-columns:var(--colonnes);gap:24px var(--gouttiere);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.billet-tete h1{font-size:clamp(34px,4.2vw,62px);line-height:1;text-wrap:balance}
.billet-resume{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--gris);max-width:44ch}
.billet-intro .fil-meta{margin-top:18px}
.planche-billet>.ecran{margin-bottom:clamp(32px,4vw,56px)}
.billet-grille{display:grid;grid-template-columns:var(--colonnes);gap:32px var(--gouttiere);align-items:start}
.billet-marge{position:sticky;top:92px;font-size:13px;line-height:1.6;color:var(--gris);max-width:34ch}
.billet-marge p{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--trame)}
.billet-marge b{font-weight:400;color:var(--encre)}
.billet-marge .lien-inline{color:var(--encre)}
.corps{max-width:68ch;font-size:17px;line-height:1.65}
.corps p,.corps ul,.corps ol,.corps blockquote,.corps pre,.corps .ecran{margin:0 0 1.25em}
.corps h2{font-size:clamp(24px,2.2vw,32px);line-height:1.12;margin:1.6em 0 .6em}
.corps h3{font-size:clamp(19px,1.6vw,23px);line-height:1.2;margin:1.4em 0 .5em}
.corps>:first-child{margin-top:0}
.corps ul,.corps ol{padding-left:1.3em}
.corps li{margin-bottom:.4em;padding-left:.2em}
.corps li::marker{color:var(--gris)}
.corps a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color .16s}
.corps a:hover{color:var(--lave-texte)}
.corps strong{font:400 .92em/1 var(--display);letter-spacing:-.02em}   /* l'appui en Archivo, jamais un gras synthétique de Spline */
.corps blockquote{border-left:1.5px solid var(--encre);padding:2px 0 2px 22px;color:var(--gris)}
.corps blockquote p:last-child{margin-bottom:0}
.corps code{font:400 .9em/1.4 ui-monospace,Consolas,Menlo,monospace;background:var(--trame);padding:.1em .35em}
.corps pre{background:var(--trame);padding:16px 18px;overflow:auto;font-size:14px;line-height:1.5}
.corps pre code{background:none;padding:0;font-size:inherit}
.corps hr{border:0;border-top:1px solid var(--trame);margin:2em 0}
.corps .ecran img{box-shadow:none}
.billet-suite span{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;max-width:none}

/* ── L'encart : la planche s'inverse, une seule fois ────────────────────────────────────────────── */
.encart{background:var(--encre);color:var(--papier)}
.encart-in{max-width:var(--large);margin-inline:auto;padding:var(--pb) var(--marge) calc(var(--pb) * .8)}
.cartouche-encart{border-top-color:var(--papier-sourd);color:var(--papier-sourd)}
.encart-grille{display:grid;grid-template-columns:var(--colonnes);gap:var(--gouttiere);align-items:center}
.encart-copie h2{font-size:clamp(40px,4.6vw,66px);line-height:.98;margin-bottom:24px}
.encart-copie p{color:var(--papier-gris);max-width:38ch}
.encart-detail{font-size:14px;margin-top:16px}
.carte{background:var(--papier);color:var(--encre);border:1.5px solid var(--encre);padding:32px 34px;max-width:560px;width:100%;justify-self:start}   /* posée sur l'axe de la seconde colonne */
.carte-etat{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--gris);margin-bottom:20px}
.carte h3{font-size:clamp(20px,1.7vw,24px);line-height:1.15;margin-bottom:10px}
.carte-intro{color:var(--gris);font-size:14px;line-height:1.6;margin-bottom:8px}
.champ{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.champ label{font-size:14px}
.facultatif{font-size:12.5px;color:var(--gris);margin-left:6px}
.champ input,.champ select{border:1px solid var(--encre);border-radius:0;background:var(--papier);min-height:48px;padding:10px 12px;width:100%;min-width:0;color:var(--encre);font-size:16px}
.consentement{display:flex;align-items:flex-start;gap:11px;color:var(--gris);font-size:13px;line-height:1.6;margin:22px 0}
.consentement input{flex:none;width:18px;height:18px;accent-color:var(--encre);margin-top:1px}
.bouton-envoi{width:100%}
.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status:empty{display:none}
.form-status{font-size:14px;color:var(--erreur);margin-top:16px}
.lien-inline{transition:color .16s}
.carte-pied{font-size:12.5px;color:var(--gris);line-height:1.7;margin-top:14px}
.succes{padding:12px 0}
.succes-coche{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--canne);color:var(--encre);border:1.5px solid var(--encre);font-size:24px;margin-bottom:22px}
.succes p{font-size:15px;color:var(--gris);margin-top:10px}

/* ── Les questions ──────────────────────────────────────────────────────────────────────────────── */
.planche.notes{padding-bottom:var(--pb)}
.notes-grille{display:grid;grid-template-columns:var(--colonnes);gap:32px var(--gouttiere)}
.notes h2{font-size:clamp(28px,3vw,42px);max-width:12ch}
.notes details{border-bottom:1px solid var(--trame)}
.notes summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:48px;padding:12px 0;cursor:pointer;list-style:none}
.notes summary::-webkit-details-marker{display:none}
.notes summary>span{font-size:24px;line-height:1;color:var(--gris);transition:transform .16s}
.notes details[open] summary>span{transform:rotate(45deg)}
.notes details p{font-size:14px;color:var(--gris);line-height:1.75;padding-bottom:20px;max-width:64ch}
.notes details a{color:var(--encre)}

/* ── Le colophon ────────────────────────────────────────────────────────────────────────────────── */
.colophon{border-top:1.5px solid var(--encre)}
.colophon-in{max-width:var(--large);margin-inline:auto;padding:clamp(40px,4.4vw,64px) var(--marge) clamp(28px,3vw,44px);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:22px var(--gouttiere)}   /* la marque et sa ligne, puis la nav sur son rang : la ligne garde sa mesure */
.marque-pied{gap:18px}
.marque-pied .marque-nom{font-size:34px}
.marque-pied .chip{font-size:22px;padding:4px 6px 5px}
.colophon-ligne{color:var(--gris);font-size:14px}
.colophon-ligne .lien-inline{color:var(--encre)}
.colophon-nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 22px;font-size:14px;color:var(--gris)}
.colophon-nav a,.colophon-nav button{min-height:44px;display:inline-flex;align-items:center;transition:color .16s}
.colophon-nav a:hover,.colophon-nav button:hover{color:var(--encre)}
.colophon-nav .lien-inline{text-decoration:none}
.colophon-nav .lien-inline::before{content:none}   /* déjà 44 px par la rangée */
.colophon-annee{grid-column:1/-1;color:var(--gris);font-size:12.5px;border-top:1px solid var(--trame);padding-top:20px}

/* ── La note de confidentialité ─────────────────────────────────────────────────────────────────── */
dialog{width:min(600px,calc(100vw - 28px));max-height:calc(100dvh - 48px);padding:28px 30px;border:1.5px solid var(--encre);color:var(--encre);background:var(--papier)}
dialog::backdrop{background:#000000c4}
.dialogue-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.dialogue-tete h2{font-size:26px}
.dialogue-tete button{border:1.5px solid var(--encre);width:44px;height:44px;font-size:22px;flex:none;line-height:1;transition:background .16s,color .16s}
.dialogue-tete button:hover{background:var(--encre);color:var(--papier)}
.dialogue-corps{font-size:14px;color:var(--gris);line-height:1.65}
.dialogue-corps p{margin-top:14px}
.dialogue-corps a{color:var(--encre);text-decoration:underline}
.dialogue-version{font-size:12.5px}
.dialogue-version span{white-space:nowrap}   /* un identifiant ne se coupe pas */

/* ── Adaptations ────────────────────────────────────────────────────────────────────────────────── */
@media(max-width:1179px){
  :root{--gouttiere:32px}
  .grille{grid-template-columns:repeat(5,1fr)}
  .piece-grille{row-gap:24px}
  .tete-grille{row-gap:16px}
}
@media(max-width:860px){
  :root{scroll-padding-top:72px}
  .nav-texte{display:none}
  .cartouche{margin-bottom:24px}
  .cartouche-piece{margin-bottom:20px}
  .cartouche-lieu::before{position:static;display:inline-block;margin-right:8px;vertical-align:-2px}
  .tete-grille,.film-grille,.piece-grille,.releves-grille,.encart-grille,.notes-grille,.colophon-in,.note-planche,.fil-noeud,.billet-tete,.billet-grille{grid-template-columns:1fr}
  .fil-noeud{padding:22px 0}
  .billet-marge{position:static;max-width:none}
  .corps{font-size:16px}
  .note-planche span{grid-column:auto}
  .film-grille{gap:28px}
  .film-cadre{box-shadow:8px 8px 0 var(--trame)}
  .film-legende{margin-top:24px}
  .piece-grille{grid-template-areas:"q" "t" "e";gap:16px}   /* la réponse sous sa question, l'écran et sa légende ensuite */
  .grille{grid-template-columns:repeat(3,1fr);gap:14px 10px}
  .encart-copie h2{font-size:clamp(36px,9vw,48px)}
  .carte{justify-self:stretch;max-width:none;padding:26px 22px}
  .colophon-in{gap:20px}
  .colophon-nav{gap:0 18px}
  .marque-pied .marque-nom{font-size:28px}
  .marque-pied .brand-mark{width:52px;height:47px}
}
@media(max-width:480px){
  h1{font-size:42px}
  .bandeau{letter-spacing:-.06em}   /* la ligne tient en une à 390 px (346 px utiles) sans descendre sous 24 px */
  .nav-long{display:none}
  .nav-court{display:inline}
  .nav-join{padding:0 14px;font-size:13px}
  .marque-nom{font-size:20px}
  .marque{gap:9px}
  .en-tete{gap:12px}
  .en-tete .brand-mark{width:26px;height:24px}
  .chip{font-size:19px;padding:2px 4px 3px}
  .marque-pied{gap:14px}
  .marque-pied .marque-nom{font-size:24px}
  .grille .theme{display:none}
  .grille{grid-template-columns:repeat(2,1fr)}   /* deux par rang : la vignette pèse plus que sa légende */
  .film-legende,.colophon-nav{flex-direction:column;align-items:flex-start}   /* une liste se lit en colonne */
  .film-legende{gap:6px}
  .colophon-nav{gap:0}
  .bouton-envoi{padding-inline:12px}   /* le libellé tient sur une ligne à 390 px (300 px de large) */
  .billet-marge p{grid-template-columns:6.5em 1fr}
}
@media(prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}