/* Les badges des cartes : une étude conduite se vend (marine), une démonstration se donne (turquoise, texte en encre) */
.bq-res__type--etude { background-color: var(--brand-fill); color: var(--on-fill); }
/* un modèle historique : ce qui est à reprendre, sur la carte même (audit de Codex du 7 octobre, C4) */
.bq-res__alerte, .bq-acces__alerte { display: block; margin: 6px 0 0; padding: 4px 0 4px 10px; border-left: 3px solid var(--data-warm); font-size: 13px; line-height: 1.4; color: var(--ink); }
.bq-res__type--demo { background-color: var(--brand-focus); color: var(--on-focus); }
/* La passerelle vers l'offre : une ligne de texte sous la navigation, pas un bandeau */
.bq-passerelle { margin: 22px 0 0; font-size: 15px; color: var(--muted); text-align: center; }
.bq-passerelle a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--brand-primary); text-underline-offset: 3px; }
.bq-passerelle a:hover { text-decoration-thickness: 2px; }
.bq-passerelle__ou { margin: 0 6px; }  /* deux liens soulignés ne se touchent plus (revue du 12 octobre) */

/* Les outils, dans leur partie */
.bq-outil { padding: 18px 18px 6px; border-radius: 14px; background-image: linear-gradient(135deg, rgba(var(--rgb-focus), .16), rgba(var(--rgb-focus), 0) 60%); border: 2px solid var(--brand-focus); }
.bq-outil .bq-bloc__titre { display: flex; align-items: center; gap: 10px; font: 400 22px/1.2 var(--font-editorial) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--brand-primary) !important; }
.bq-outil__badge { padding: 4px 10px; border-radius: 6px; background-color: var(--brand-fill); font: 700 11px/1.2 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--on-fill); }
.bq-outil .bq-ex { border: 0; background: none; padding: 0; }
.bq-outil .bq-ex > .bq-ex__titre { display: none; }
/* Une demande de projet vend : ni badge, ni cadre turquoise, ni filet pointillé ; sa carte (outils_site) suffit */
.bq-outil.bq-outil--sobre { padding: 0; border: 0; border-radius: 0; background: none; }
.bq-bloc.bq-outil--sobre { padding-top: 0; border-top: 0; }
.bq-outil--sobre > .bq-bloc__titre { margin-bottom: 12px; }

/* L'essentiel : un jeu de fiches à dérouler */
.bq-fichier__g { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 16px; align-items: start; padding-top: 12px; }
.bq-fichier .bq-essentiel, .bq-fichier .bq-essentiel:last-child { position: relative; border: 0; border-radius: 4px 12px 12px 12px; background-color: var(--paper-bright); box-shadow: 0 1px 0 var(--line-strong), 0 8px 18px rgba(var(--rgb-bleu), .09); transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.bq-fichier .bq-essentiel:not([open]):hover { transform: translateY(-5px) rotate(-.7deg); box-shadow: 0 1px 0 var(--line-strong), 0 16px 28px rgba(var(--rgb-bleu), .16); }
.bq-fichier .bq-essentiel:nth-child(2n):not([open]):hover { transform: translateY(-5px) rotate(.7deg); }
.bq-fichier .bq-essentiel[open] { grid-column: 1 / -1; box-shadow: 0 1px 0 var(--line-strong), 0 14px 30px rgba(var(--rgb-bleu), .14); }
.bq-fichier .bq-essentiel summary { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "picto titre" "amorce amorce" "tirer tirer"; gap: 8px 12px; align-items: center; padding: 18px 18px 14px; font: inherit; }
.bq-fichier .bq-essentiel summary::-webkit-details-marker { display: none; }
.bq-fichier .bq-essentiel summary::before { content: none; }
.bq-ess__onglet { position: absolute; left: 0; top: -14px; padding: 4px 12px 3px; border-radius: 6px 6px 0 0; background-color: var(--brand-focus); font: 700 11px/1.2 var(--font-interface); letter-spacing: .08em; text-transform: uppercase; color: var(--on-focus); }
.bq-ess__onglet span { font-weight: 400; }  /* « /3 » : à 0,6 d'opacité, 3,7:1 (contre-audit de Codex) ; la graisse suffit */
.bq-essentiel--etapes .bq-ess__onglet { background-color: #a9c4e6; }
.bq-essentiel--cartes .bq-ess__onglet { background-color: var(--warm-moyen); color: var(--ink); }  /* l'aplat chaud fonce la nuit : l'encre suit */
.bq-essentiel--liste .bq-ess__onglet { background-color: #cfe8c9; }
.bq-ess__picto { grid-area: picto; width: 38px; height: 34px; fill: none; stroke: var(--brand-primary); stroke-width: 2.4; stroke-linecap: round; }
.bq-ess__titre { grid-area: titre; font: 400 21px/1.2 var(--font-editorial); color: var(--brand-primary); }
.bq-ess__amorce { grid-area: amorce; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: italic 400 15px/1.45 var(--font-editorial); color: var(--muted); }
.bq-ess__tirer { grid-area: tirer; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 2px solid var(--brand-primary); font: 700 13px/1 var(--font-interface); color: var(--brand-primary); transition: background-color 200ms, color 200ms; }
.bq-ess__tirer::before { content: "Dérouler la fiche"; }
.bq-ess__tirer::after { content: "▾"; transition: transform 260ms var(--ease-out); }
.bq-fichier .bq-essentiel:not([open]):hover .bq-ess__tirer { background-color: var(--brand-fill); color: var(--on-fill); }
.bq-fichier .bq-essentiel[open] .bq-ess__tirer::before { content: "Replier"; }
.bq-fichier .bq-essentiel[open] .bq-ess__tirer::after { transform: rotate(180deg); }
.bq-fichier .bq-essentiel[open] .bq-ess__amorce { display: none; }
.bq-fichier .bq-essentiel[open] summary { grid-template-areas: "picto titre" "tirer tirer"; border-bottom: 2px dashed var(--line-strong); }
.bq-fichier .bq-essentiel > div { padding: 16px 22px 18px 58px; background-image: linear-gradient(90deg, transparent 40px, rgba(var(--rgb-warm), .35) 40px, rgba(var(--rgb-warm), .35) 42px, transparent 42px), repeating-linear-gradient(transparent 0 27px, rgba(var(--rgb-bleu), .06) 27px 28px); border-radius: 0 0 12px 12px; }
.bq-fichier .bq-essentiel.est-anime > div { animation: bq-derouler 620ms var(--ease-out) both; }
@keyframes bq-derouler { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 900px) { .bq-fichier .bq-essentiel > div { padding: 14px 14px 16px 20px; background-image: repeating-linear-gradient(transparent 0 27px, rgba(var(--rgb-bleu), .06) 27px 28px); } }
@media (prefers-reduced-motion: reduce) { .bq-fichier .bq-essentiel, .bq-fichier .bq-essentiel.est-anime > div { transition: none; animation: none; } .bq-fichier .bq-essentiel:not([open]):hover { transform: none; } }

.bq-essentiel .bq-source { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.bq-essentiel ul { margin: 0 0 12px; }
.bq-tiroir__corps > .bq-tiroir__texte + .bq-bloc { margin-top: 4px; }

/* Les fiches illustrées */
.bq-fichier .bq-essentiel summary { grid-template-columns: 58px minmax(0, 1fr); }
.bq-fichier .bq-ess__picto { display: none; }
.bq-ess__medaillon { grid-area: picto; width: 58px; height: 58px; transition: transform 300ms var(--ease-out); }
.bq-fichier .bq-essentiel:not([open]):hover .bq-ess__medaillon { transform: rotate(-6deg) scale(1.06); }
.bq-ess__grand { float: right; width: 128px; height: 128px; margin: 0 0 10px 18px; shape-outside: circle(50%); }
.bq-essentiel .bq-cartes > li { position: relative; padding-top: 44px; }
.bq-essentiel .bq-cartes > li .bq-picto { position: absolute; left: 14px; top: 10px; }
.bq-essentiel b.bq-chiffre { display: inline-block; padding: 0 6px; border-radius: 6px; background: rgba(var(--rgb-focus), .22) !important; font: 400 1.25em/1.2 var(--font-editorial); color: var(--brand-primary); animation: none !important; }
.bq-essentiel q.bq-exergue { display: block; margin: 10px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--brand-focus); font: italic 400 20px/1.4 var(--font-editorial); color: var(--brand-primary); quotes: "« " " »"; }
.bq-essentiel--texte > div > p:first-of-type::first-letter { float: left; margin: 4px 8px 0 0; font: 400 52px/.8 var(--font-editorial); color: var(--brand-primary); }
@media (max-width: 900px) { .bq-ess__grand { width: 84px; height: 84px; } }

/* Scènes HTML des boîtes 1, 3 et 4 */
.sc-k { margin: 0 0 8px; font: 700 12px/1.3 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-accent); }
.sc-note { margin: 12px 0 0; font: italic 400 14px/1.4 var(--font-editorial); color: var(--muted); }
.sc-source { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.sc-tampon { --actif: 0; position: absolute; padding: 6px 14px; border: 4px solid currentColor; border-radius: 6px; font: 900 18px/1 var(--font-interface); letter-spacing: .08em; color: var(--brand-primary); background-color: rgba(var(--rgb-papier), .85); pointer-events: none; white-space: nowrap; }
.sc-tampon.chaud { color: var(--data-warm-texte); }  /* le chaud de la charte, foncé : un tampon de 18 px (13 sur téléphone) doit tenir 4,5:1 */
.sc-tampon.focus { color: var(--brand-primary); }
.sc-tampon--grand { font-size: 26px; }
.sc-predatrice__tampon { display: flex; justify-content: flex-end; margin-top: 14px; min-height: 44px; }
.sc-predatrice__tampon .sc-tampon { position: static; }
.sc-tampon--centre { left: 50%; top: 46%; margin-left: -110px; }
.bq-demo__scene .cq-entre { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.bq-demo__scene div.cq-entre:not(.sc-barre__v), .bq-demo__scene li.cq-entre { transform: translateY(calc((1 - var(--actif)) * 10px)); }

.sc-pourquoi { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: start; }
.sc-idee { padding: 16px; border: 3px solid var(--brand-primary); border-radius: 10px; background-color: var(--paper-bright); }
.sc-idee__t { margin: 0; font: italic 400 20px/1.35 var(--font-editorial); }
.sc-idee__ici { margin: 10px 0 0; font-weight: 700; color: var(--brand-primary); }
.sc-rayon { display: grid; gap: 10px; }
.sc-etude { position: relative; min-height: 64px; padding: 12px 16px; border: 2px solid var(--line-strong); border-radius: 8px; background-color: var(--paper-bright); }
.sc-etude__dos { position: absolute; left: 16px; top: 18px; font: 700 22px/1 var(--font-interface); color: var(--line-strong); }
.sc-etude__face { position: relative; background-color: var(--paper-bright); }
.sc-etude__face p { margin: 0; font-size: 16px; }
.sc-etude .sc-tampon { right: 12px; top: 50%; margin-top: -16px; font-size: 14px; }

.sc-rayonnages { display: grid; gap: 14px; }
.sc-etagere { display: grid; grid-template-columns: 190px 1fr 170px; gap: 14px; align-items: end; padding-bottom: 6px; border-bottom: 6px solid var(--brand-primary); }
.sc-etagere__nom { margin: 0; font: 700 15px/1.25 var(--font-interface); color: var(--brand-primary); }
.sc-livres { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; }
.sc-livre { display: inline-flex; align-items: center; height: var(--h); padding: 4px 8px; border-radius: 3px 3px 0 0; background-color: var(--brand-focus); color: var(--on-focus); font: 700 12px/1.1 var(--font-interface); writing-mode: horizontal-tb; }
.sc-livre:nth-child(even) { background-color: #a9dbe1; }
.sc-livre:nth-child(3n) { background-color: var(--surface-tint); border: 1px solid var(--line-strong); }
.sc-etagere__quoi { margin: 0; font: italic 400 16px/1.3 var(--font-editorial); color: var(--ink); }

.sc-moteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sc-moteur { padding: 12px; border: 2px solid var(--line-strong); border-radius: 8px; background-color: var(--paper-bright); }
.sc-recherche { display: grid; gap: 4px; padding: 8px 10px; border: 2px solid var(--brand-primary); border-radius: 10px; font-size: 13px; }
.sc-recherche__site { font: 700 11px/1 var(--font-interface); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-accent); }
.sc-recherche__q { font-family: ui-monospace, Menlo, monospace; color: var(--ink); overflow-wrap: anywhere; }
.sc-resultats { margin: 10px 0 6px; padding-left: 18px; font-size: 14px; }
.sc-resultats .sc-bruit { color: var(--muted); text-decoration: line-through; }
.sc-verdict { margin: 0; font: 700 15px/1.3 var(--font-interface); color: var(--brand-primary); }

.sc-boule { display: grid; grid-template-columns: auto 1fr 1fr; gap: 18px; align-items: center; }
.sc-article { display: inline-block; padding: 10px 14px; border: 2px solid var(--brand-primary); border-radius: 6px; background-color: var(--paper-bright); }
.sc-article p { margin: 0; }
.sc-article--centre { border-width: 3px; }
.sc-article--mini { margin: 3px; padding: 6px 10px; font-size: 13px; border-color: var(--line-strong); }
.sc-branche { padding-left: 14px; border-left: 4px solid var(--brand-focus); }

.sc-halluc { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: start; }
.sc-reference { position: relative; padding: 16px; border: 2px solid var(--line-strong); border-radius: 8px; background-color: var(--paper-bright); }
.sc-reference__t { margin: 0; font: 400 17px/1.45 var(--font-editorial); }
.sc-reference { padding-bottom: 58px; }
.sc-reference .sc-tampon { right: 14px; bottom: 12px; font-size: 20px; }
.sc-verifs { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sc-verif { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 6px; background-color: var(--paper-bright); }
.sc-coche { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-weight: 700; color: var(--on-fill); }
.sc-coche.oui { background-color: var(--brand-focus); color: var(--on-focus); }
.sc-coche.non { background-color: var(--data-warm-texte); }

.sc-hindex { max-width: 760px; margin: 0 auto; }
.sc-hgraph { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 6px; height: 260px; padding: 0 0 22px; border-bottom: 2px solid var(--ink); }
.sc-hbarre { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.sc-hbarre__b { display: block; height: calc(var(--v) * 100%); min-height: 2px; background-color: var(--line-strong); border-radius: 3px 3px 0 0; transition: background-color 400ms; }
.slide[data-etat="a2"] .sc-hbarre__b.dans { background-color: var(--brand-focus); color: var(--on-focus); }
.sc-hbarre__c { position: absolute; bottom: calc(var(--v, 0) * 100% + 4px); left: 0; right: 0; text-align: center; font: 700 12px/1 var(--font-interface); }
.sc-hbarre__r { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--muted); }
.sc-hdiagonale { position: absolute; left: 0; bottom: 22px; width: 100%; height: calc(12 / 50 * (100% - 22px)); background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--data-warm) 50%, transparent calc(50% + 1.5px)); pointer-events: none; }
.sc-hcarre { position: absolute; left: 0; bottom: 22px; width: calc(7 / 12 * 100%); height: calc(7 / 50 * (100% - 22px)); border: 3px dashed var(--brand-primary); pointer-events: none; }
.sc-hlecture { margin: 14px 0 0; font-size: 16px; }
.sc-hlegende { margin: 6px 0 0; font-size: 12px; color: var(--muted); text-align: right; }

.sc-chaine { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; }
.sc-pas { position: relative; display: grid; gap: 4px; padding: 14px; border: 2px solid var(--brand-primary); border-radius: 10px; background-color: var(--paper-bright); }
.sc-pas b { font: 700 17px/1.2 var(--font-interface); color: var(--brand-primary); }
.sc-pas span:last-child { font-size: 14px; }
.sc-pas__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background-color: var(--brand-focus); font: 700 14px/1 var(--font-interface); color: var(--on-focus); }
.sc-pas:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); font: 700 18px/1 var(--font-interface); color: var(--brand-primary); }
.sc-predatrice { position: relative; padding-top: 6px; }

.sc-colonnes { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sc-col { padding: 14px 16px; border: 2px solid var(--line-strong); border-radius: 10px; background-color: var(--paper-bright); }
.sc-col__t { margin: 0 0 10px; font: 700 16px/1.3 var(--font-interface); color: var(--brand-primary); }
.sc-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sc-puce { padding: 6px 10px; border-radius: 6px; background-color: var(--surface-tint); font-size: 15px; }
.sc-socle { grid-column: 1 / -1; padding: 10px 14px; border-radius: 8px; background-color: var(--brand-fill); color: var(--on-fill); text-align: center; font-weight: 700; }
.sc-etiquette-verte { margin: 10px 0 0; padding: 6px 10px; border-radius: 6px; background-color: rgba(var(--rgb-focus), .3); font-weight: 700; }
.sc-etiquette-chaude { margin: 10px 0 0; padding: 6px 10px; border-radius: 6px; background-color: rgba(var(--rgb-warm), .14); color: var(--data-warm-texte); font-weight: 700; }
.sc-col--voile { position: relative; overflow: hidden; }
.bq-demo__scene div.sc-voile { transform: none; }
.sc-biais .sc-tampon--centre { top: -16px; }
.sc-voile { position: absolute; inset: 44px 0 0; display: grid; place-items: center; padding: 16px; background: repeating-linear-gradient(135deg, rgba(240,244,250,.94) 0 14px, rgba(228,234,244,.94) 14px 28px); text-align: center; font: italic 400 18px/1.4 var(--font-editorial); }

.sc-384 { text-align: center; max-width: 760px; margin: 0 auto; }
.sc-384__pop { margin: 0; font-size: 18px; } .sc-384__pop b { font: 400 44px/1.1 var(--font-editorial); color: var(--brand-primary); display: block; }
.sc-384__q { margin: 8px auto 14px; max-width: 52ch; font: italic 400 18px/1.4 var(--font-editorial); }
.sc-384__n { margin: 0; font: 400 96px/1 var(--font-editorial); color: var(--data-warm-texte); }
.sc-384__s { margin: 4px 0 14px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--muted); }
.sc-384__mais, .sc-384__quali { margin: 8px auto 0; max-width: 64ch; padding: 10px 14px; border-radius: 8px; background-color: var(--paper-bright); border: 2px solid var(--line-strong); text-align: left; }

.sc-criteres { display: grid; gap: 14px; }
.sc-critere__t { margin: 0 0 6px; font: 700 16px/1.3 var(--font-interface); color: var(--brand-primary); }
.sc-curseur { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 12px; align-items: center; font-size: 14px; }
.sc-curseur__d { text-align: right; }
.sc-curseur__piste { height: 10px; border-radius: 5px; background: linear-gradient(to right, var(--brand-focus), var(--line-strong) 50%, var(--brand-fill)); }

.sc-chemins { display: grid; gap: 16px; }
.sc-piste { padding: 12px 16px; border-radius: 10px; border: 2px solid var(--line-strong); background-color: var(--paper-bright); }
.sc-piste__t { margin: 0 0 8px; font: 700 16px/1.3 var(--font-interface); }
.sc-piste__route { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-obstacle { padding: 6px 10px; border-radius: 6px; font-size: 14px; }
.sc-piste.sans .sc-obstacle { background-color: rgba(var(--rgb-warm), .14); color: var(--data-warm-texte); border: 2px solid var(--data-warm); }
.sc-piste.avec .sc-obstacle { background-color: rgba(var(--rgb-focus), .25); border: 2px solid var(--brand-focus); text-decoration: line-through; text-decoration-color: var(--brand-primary); }
.sc-piste.avec .sc-obstacle::before { content: "✓ prévu · "; text-decoration: none; font-weight: 700; color: var(--brand-primary); }
.sc-piste__fin { margin: 8px 0 0; font-weight: 700; }
.sc-piste.sans .sc-piste__fin { color: var(--data-warm-texte); } .sc-piste.avec .sc-piste__fin { color: var(--brand-primary); }

.sc-titre { text-align: center; }
.sc-titre__brut { margin: 0 0 16px; font: italic 400 22px/1.3 var(--font-editorial); color: var(--muted); }
.sc-titre__construit { margin: 0; min-height: 3em; font: 400 26px/1.35 var(--font-editorial); }
.sc-morceau { display: inline; border-radius: 4px; padding: 0 2px; }
.sc-morceau--design { background-color: rgba(var(--rgb-focus), .35); } .sc-morceau--objet { background-color: rgba(var(--rgb-warm), .18); } .sc-morceau--pop { background-color: rgba(var(--rgb-bleu), .14); }
.sc-titre__legende { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.sc-pastille { padding: 2px 10px; border-radius: 999px; font: 700 12px/1.6 var(--font-interface); }
.sc-pastille--design { background-color: rgba(var(--rgb-focus), .35); } .sc-pastille--objet { background-color: rgba(var(--rgb-warm), .18); } .sc-pastille--pop { background-color: rgba(var(--rgb-bleu), .14); }
.sc-acronyme { margin: 18px 0 0; font: 900 40px/1 var(--font-interface); letter-spacing: .12em; color: var(--brand-primary); }
.sc-acronyme__s { margin: 4px 0 0; font: italic 400 16px/1.3 var(--font-editorial); color: var(--muted); }
.sc-acronyme__p { display: inline-block; color: var(--data-warm-texte); transform: translateY(calc((1 - var(--actif)) * -40px)) rotate(calc((1 - var(--actif)) * -25deg)); transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1), opacity 300ms; }
.sc-acronyme__tampon { display: flex; justify-content: center; min-height: 46px; margin-top: 10px; }
.sc-acronyme__tampon .sc-tampon { position: static; }
.sc-acronyme__blague { margin: 6px 0 0; font: italic 400 17px/1.4 var(--font-editorial); }

.sc-entonnoir { display: grid; gap: 8px; justify-items: center; }
.sc-niveau { display: grid; gap: 2px; padding: 12px 18px; border-radius: 8px; background-color: var(--brand-fill); color: var(--on-fill); text-align: center; }
.sc-niveau b { font: 700 17px/1.2 var(--font-interface); } .sc-niveau span { font-size: 14px; opacity: .9; }
.sc-niveau--1 { width: 100%; } .sc-niveau--2 { width: 84%; } .sc-niveau--3 { width: 68%; background-color: #2c5d9e; } .sc-niveau--4 { width: 52%; background-color: var(--brand-focus); color: var(--on-focus); }

.sc-cible { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 28px; align-items: center; }
.sc-cible__svg { width: 100%; height: auto; display: block; }
.sc-cible__pts { font: 700 16px var(--font-interface); fill: var(--brand-fill); }
.sc-joueurs { display: flex; gap: 14px; margin: 8px 0 0; font-weight: 700; }
.sc-joueur i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; border: 2px solid var(--ink); }
.sc-regles { display: grid; gap: 10px; }
.sc-regle { display: grid; gap: 2px; padding: 10px 14px; border-left: 6px solid var(--brand-focus); border-radius: 6px; background-color: var(--paper-bright); }
.sc-regles__lecon { margin: 4px 0 0; font: italic 400 18px/1.4 var(--font-editorial); }

.sc-couples { display: grid; gap: 10px; }
.sc-couple { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.sc-couple__o, .sc-couple__c { position: relative; padding: 10px 12px 10px 44px; border-radius: 8px; border: 2px solid var(--line-strong); background-color: var(--paper-bright); }
.sc-couple__c { border-color: var(--brand-focus); }
.sc-couple p { margin: 4px 0 0; font-size: 14px; }
.sc-couple__lien { font: 700 22px/1 var(--font-interface); color: var(--brand-primary); }
.sc-num { position: absolute; left: 10px; top: 10px; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--brand-fill); color: var(--on-fill); font: 700 13px/1 var(--font-interface); }

.sc-barres { max-width: 820px; margin: 0 auto; display: grid; gap: 6px; }
.sc-barre { display: grid; grid-template-columns: 210px 1fr 64px; gap: 10px; align-items: center; font-size: 14px; }
.sc-barre__piste { height: 18px; border-radius: 4px; background-color: var(--line); overflow: hidden; }
.sc-barre__v { display: block; height: 100%; width: calc(var(--v) * 100% * var(--actif)); background-color: var(--brand-fill); transition: width 700ms var(--ease-out); opacity: 1 !important; }
.sc-barre--rs .sc-barre__v { background-color: var(--data-warm); }
.sc-barre__p { font: 700 14px/1 var(--font-interface); }
.sc-barres__lecon { margin: 10px 0 0; font: italic 400 18px/1.4 var(--font-editorial); }

.sc-critere-texte { max-width: 900px; margin: 0 auto; }
.sc-versions { display: grid; }
.sc-versions > * { grid-area: 1 / 1; }
.sc-version { margin: 0; padding: 14px 18px; border-radius: 8px; border: 3px solid var(--brand-primary); background-color: var(--paper-bright); font: 400 20px/1.45 var(--font-editorial); }
.sc-version--liste { padding-left: 38px; }
.sc-remarques { display: grid; margin-top: 12px; }
.sc-remarques > * { grid-area: 1 / 1; }
.sc-remarques__g { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-remarque { padding: 8px 12px; border-radius: 6px; background-color: rgba(var(--rgb-warm), .14); color: var(--ink); font-size: 15px; border-left: 5px solid var(--data-warm); }
.sc-remarque--bonus { background-color: rgba(var(--rgb-focus), .25); border-left-color: var(--brand-focus); }

.sc-filtres { display: grid; gap: 8px; justify-items: center; }
.sc-filtre { display: grid; gap: 2px; width: 100%; max-width: 760px; padding: 10px 16px; border-radius: 8px; border: 2px solid var(--brand-primary); background-color: var(--paper-bright); text-align: center; }
.sc-filtre span { font-size: 14px; }
.sc-filtre--pop { background-color: var(--brand-fill); color: var(--on-fill); }
.sc-filtre--non { max-width: 640px; border-style: dashed; }
.sc-filtre--ex { max-width: 540px; border-color: var(--data-warm); }
.sc-filtres__lecon { margin: 4px 0 0; font: italic 400 17px/1.4 var(--font-editorial); text-align: center; }

.sc-anticiper .sc-carte-q { display: grid; gap: 4px; margin-bottom: 8px; padding: 8px 10px; border-radius: 6px; background-color: var(--surface-tint); }
.sc-anticiper .sc-carte-q span { font-size: 14px; }

@media (max-width: 900px) {
  .sc-pourquoi, .sc-halluc, .sc-colonnes, .sc-cible, .sc-boule { grid-template-columns: 1fr; }
  .sc-etagere { grid-template-columns: 1fr; }
  .sc-moteurs, .sc-chaine { grid-template-columns: 1fr; }
  .sc-pas:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -16px; transform: none; }
  .sc-couple { grid-template-columns: 1fr; } .sc-couple__lien { justify-self: center; transform: rotate(90deg); }
  .sc-barre { grid-template-columns: 120px 1fr 52px; }
  .sc-curseur { grid-template-columns: 1fr; } .sc-curseur__d { text-align: left; }
  .sc-384__n { font-size: 72px; }
  .sc-niveau--2, .sc-niveau--3, .sc-niveau--4 { width: 100%; }
  .sc-predatrice__tampon .sc-tampon { font-size: 16px; white-space: normal; text-align: center; max-width: 100%; }
  .sc-tampon--centre { left: 8%; right: 8%; margin-left: 0; text-align: center; white-space: normal; font-size: 15px; }
}

/* Scènes de la boîte 4 */
.sc-pile { display: inline-grid; }
.sc-pile > * { grid-area: 1 / 1; }
.sc-depli { max-height: calc(var(--actif) * 150px); overflow: hidden; transition: max-height 460ms var(--ease-out), opacity 380ms var(--ease-out); }

.sc-escalier { display: grid; gap: 4px; }
.sc-esc__rang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); grid-template-areas: "p s" "u ."; gap: 2px 16px; align-items: center; }
.sc-esc__porte { grid-area: p; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 10px 14px; border: 2px solid var(--brand-primary); border-radius: 8px; background-color: var(--paper-bright); }
.sc-esc__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background-color: var(--brand-fill); color: var(--on-fill); font: 700 15px/1 var(--font-interface); }
.sc-esc__q { margin: 0; font: 700 16px/1.3 var(--font-interface); }
.sc-esc__p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.sc-esc__sortie { grid-area: s; display: grid; gap: 2px; padding: 8px 12px; border-radius: 8px; background-color: rgba(var(--rgb-focus), .22); border-left: 5px solid var(--brand-focus); }
.sc-esc__fleche { font: 700 13px/1 var(--font-interface); color: var(--brand-accent); }
.sc-esc__sortie b { font: 700 16px/1.2 var(--font-interface); color: var(--brand-primary); }
.sc-esc__suite { grid-area: u; margin: 0; padding-left: 20px; font: 700 13px/1.6 var(--font-interface); color: var(--muted); }
.sc-esc__ex { display: block; margin-top: 4px; font: italic 400 14px/1.35 var(--font-editorial); color: var(--ink); }
.sc-esc__riph { display: grid; gap: 4px; padding: 12px 16px; border-radius: 8px; background-color: var(--brand-fill); color: var(--on-fill); }
.sc-esc__riph b { font: 700 20px/1 var(--font-interface); }
.sc-esc__riph .sc-esc__ex { color: var(--on-fill); }

.sc-uni { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 18px; align-items: center; }
.sc-uni__form { padding: 12px 16px; border: 2px solid var(--line-strong); border-radius: 10px; background-color: var(--paper-bright); }
.sc-uni__rang { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); font-size: 15px; }
.sc-uni__rang--doute { background-color: rgba(var(--rgb-warm), .08); margin: 0 -8px; padding: 5px 8px; }
.sc-uni__rang--ajout { border-top: 2px dashed var(--data-warm); }
.sc-uni__pile { display: inline-grid; justify-self: end; }
.sc-uni__pile > * { grid-area: 1 / 1; }
.sc-uni__r { justify-self: end; display: inline-block; min-width: 44px; padding: 3px 8px; border-radius: 999px; text-align: center; font: 700 13px/1.2 var(--font-interface); }
.sc-uni__r--non { background-color: var(--surface-tint); color: var(--brand-primary); border: 1px solid var(--line-strong); }
.sc-uni__r--oui { background-color: var(--brand-focus); color: var(--on-focus); }
.sc-uni__r--change { background-color: rgba(var(--rgb-warm), .15); color: var(--data-warm-texte); border-color: var(--data-warm); }
.sc-uni__verdict { position: relative; display: grid; justify-items: center; gap: 10px; min-height: 120px; align-content: center; }
.sc-uni__verdict .sc-tampon { position: static; font-size: 22px; }
.sc-uni__tient { margin: 0; font: italic 400 17px/1.35 var(--font-editorial); text-align: center; }

.sc-nuancier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 10px; overflow: hidden; border: 2px solid var(--line-strong); }
.sc-nuance { display: grid; align-content: start; gap: 8px; padding: 12px; min-height: 260px; }
.sc-nuance--hors { background-color: rgba(var(--rgb-focus), .18); }
.sc-nuance--gris { background-image: repeating-linear-gradient(135deg, rgba(150,160,175,.16) 0 10px, rgba(150,160,175,.06) 10px 20px); }
.sc-nuance--riph { background-color: rgba(var(--rgb-bleu), .10); }
.sc-nuance__t { margin: 0 0 4px; font: 700 13px/1 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-primary); }
.sc-nuance__cas { display: grid; gap: 3px; padding: 8px 10px; border-radius: 6px; background-color: var(--paper-bright); border: 1px solid var(--line-strong); }
.sc-nuance__cas b { font-size: 15px; line-height: 1.3; }
.sc-nuance__cas span { font: italic 400 14px/1.3 var(--font-editorial); color: var(--muted); }
.sc-nuancier__lecon { margin: 12px 0 0; padding: 10px 14px; border-left: 5px solid var(--data-warm); background-color: var(--paper-bright); font: italic 400 17px/1.4 var(--font-editorial); }

.sc-sources3__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sc-source3 { position: relative; display: grid; align-content: start; gap: 6px; min-height: 190px; padding: 12px 14px 54px; border: 2px solid var(--brand-primary); border-radius: 10px; background-color: var(--paper-bright); }
.sc-source3__t { margin: 0; font: 700 16px/1.3 var(--font-interface); color: var(--brand-primary); }
.sc-source3 p { margin: 0; font-size: 15px; }
.sc-source3 .sc-tampon { left: 14px; bottom: 12px; font-size: 15px; }
.sc-sources3__fin { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background-color: var(--brand-fill); color: var(--on-fill); font-size: 17px; text-align: center; }

.sc-essai { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sc-cond { display: grid; grid-template-columns: auto minmax(0, 1fr) 70px; gap: 12px; align-items: center; padding: 10px 14px; border: 2px solid var(--line-strong); border-radius: 8px; background-color: var(--paper-bright); }
.sc-cond__l { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--brand-primary); font: 700 14px/1 var(--font-interface); color: var(--brand-primary); }
.sc-cond p { margin: 0; font-size: 15px; }
.sc-cond__inter { display: grid; place-items: center; height: 30px; border-radius: 999px; background-color: var(--line); }
.sc-cond__non { padding: 4px 12px; border-radius: 999px; background-color: var(--brand-fill); color: var(--on-fill); font: 700 13px/1 var(--font-interface); }
.sc-essai__regle { margin: 2px 0 0; font: italic 400 16px/1.4 var(--font-editorial); color: var(--muted); }
.sc-essai__tampon { display: flex; justify-content: center; min-height: 48px; margin: 10px 0 14px; }
.sc-essai__tampon .sc-tampon { position: static; font-size: 20px; }

.sc-mrs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-bottom: 66px; }
.sc-mr { position: relative; display: grid; align-content: start; gap: 4px; padding: 12px 14px; border: 2px solid var(--line-strong); border-radius: 10px; background-color: var(--paper-bright); }
.sc-mr--3 { border: 3px solid var(--brand-primary); }
.sc-mr p { margin: 0 0 6px; font-size: 15px; }
.sc-mr .sc-mr__code { margin: 0; font: 400 34px/1 var(--font-editorial); color: var(--brand-primary); }
.sc-mr .sc-mr__quoi { margin: 0 0 6px; font: 700 14px/1.3 var(--font-interface); }
.sc-mr .sc-mr__mot { font: italic 400 16px/1.35 var(--font-editorial); color: var(--brand-accent); }
.sc-mrs__tampon { right: 10px; bottom: 4px; font-size: 15px; }
/* MR-001 écartée : un cadre pointillé et des textes gris, plus une opacité de 0,45 (2,09:1 sur son code, contre-audit de Codex) */
.slide:is([data-etat="a4"], [data-etat="a5"]) .sc-mr--1 { border-style: dashed; background-color: var(--paper); }
.slide:is([data-etat="a4"], [data-etat="a5"]) .sc-mr--1 :is(.sc-mr__code, .sc-mr__quoi, .sc-mr__mot) { color: var(--muted); }
.slide:is([data-etat="a4"], [data-etat="a5"]) .sc-mr--1 .sc-mr__code { text-decoration: line-through; text-decoration-color: rgba(var(--rgb-warm), .7); }

.sc-notice__doc { max-width: 620px; margin: 0 auto; padding: 16px 18px; border-radius: 4px; background-color: var(--paper-bright); box-shadow: 0 4px 18px rgba(var(--rgb-bleu), .14); }
.sc-notice__titre { margin: 0 0 10px; font: 400 22px/1.2 var(--font-editorial); color: var(--brand-primary); }
.sc-rub { display: grid; gap: 2px; padding: 6px 10px; margin-bottom: 4px; border-left: 4px solid var(--line-strong); font-size: 15px; }
.sc-rub b { font: 700 14px/1.3 var(--font-interface); }
.sc-rub span { font-size: 14px; color: var(--muted); }
.sc-rub--donnees { border-left-color: var(--brand-focus); background-color: rgba(var(--rgb-focus), .10); }
.sc-rub--donnees .sc-pile span { color: var(--ink); }
.sc-rub__change { color: var(--data-warm-texte) !important; }
.sc-rub--quali { position: relative; border-left-color: var(--data-warm); background-color: rgba(var(--rgb-warm), .08); }
.sc-rub--quali em { position: absolute; right: 8px; top: 6px; font: 700 11px/1 var(--font-interface); font-style: normal; color: var(--data-warm-texte); letter-spacing: .06em; text-transform: uppercase; }
.sc-notice__lecon { max-width: 620px; margin: 12px auto 0; font: italic 400 17px/1.4 var(--font-editorial); text-align: center; }

.sc-promesses { position: relative; display: grid; gap: 8px; }
.sc-promesses__tete, .sc-promesse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sc-promesse__p { margin: 0; padding: 10px 12px; border-radius: 8px; background-color: var(--paper-bright); border: 2px solid var(--brand-primary); font: italic 400 16px/1.35 var(--font-editorial); }
.sc-promesse__r { margin: 0; padding: 10px 12px; border-radius: 8px; background-color: rgba(var(--rgb-warm), .10); border-left: 5px solid var(--data-warm); font-size: 15px; }
.sc-promesses__tampon { display: flex; justify-content: flex-end; min-height: 44px; margin: 4px 0 12px; }
.sc-promesses__tampon .sc-tampon { position: static; }
.sc-promesses__lecon { margin: 0; font: italic 400 17px/1.4 var(--font-editorial); }

.sc-reecrs { display: grid; gap: 18px; }
.sc-reecr { display: grid; gap: 6px; }
.sc-reecr__avant, .sc-reecr__apres { margin: 0; padding: 12px 14px; border-radius: 8px; font: italic 400 19px/1.35 var(--font-editorial); }
.sc-reecr__avant { background-color: var(--paper-bright); border: 2px dashed var(--line-strong); }
.slide[data-etat="a2"] .sc-reecr__estompe.cq-des-a2 .sc-reecr__avant, .slide[data-etat="a3"] .sc-reecr__estompe.cq-des-a2 .sc-reecr__avant, .slide[data-etat="a4"] .sc-reecr__estompe.cq-des-a2 .sc-reecr__avant, .slide[data-etat="a4"] .sc-reecr__estompe.cq-des-a4 .sc-reecr__avant { text-decoration: line-through; text-decoration-color: rgba(var(--rgb-warm), .6); }
.sc-reecr__apres { display: grid; gap: 2px; background-color: var(--paper-bright); border: 2px solid var(--brand-primary); }
.sc-reecr__apres span { font: 700 11px/1 var(--font-interface); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-accent); }
.sc-reecr__pb { margin: 0; padding-left: 12px; border-left: 4px solid var(--data-warm); font-size: 15px; color: var(--data-warm-texte); }

.sc-op { display: grid; gap: 14px; }
.sc-op__bloc { padding: 12px 14px; border: 2px solid var(--line-strong); border-radius: 10px; background-color: var(--paper-bright); }
.sc-op__bloc--mr4 { border-color: var(--brand-primary); }
.sc-op__t { margin: 0 0 8px; font: 700 15px/1.3 var(--font-interface); color: var(--brand-primary); }
.sc-op__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-op__ligne i { font-style: normal; color: var(--muted); }
.sc-op__pas { padding: 6px 12px; border-radius: 999px; background-color: var(--surface-tint); font: 700 14px/1.2 var(--font-interface); }
.sc-op__pas--effort { background-color: var(--brand-fill); color: var(--on-fill); }
.sc-op__pas--vide { border: 2px dashed var(--line-strong); background-color: transparent; color: var(--muted); }
.sc-op__sortie { flex-basis: 100%; margin-top: 4px; padding-left: 10px; border-left: 4px solid var(--data-warm); font: italic 400 16px/1.35 var(--font-editorial); }
.sc-op__lecon { margin: 0; font: italic 400 18px/1.4 var(--font-editorial); }

.sc-mr4__frise { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sc-mr4__pas { position: relative; display: grid; align-content: start; gap: 4px; padding: 10px 12px; border-top: 6px solid var(--brand-primary); border-radius: 6px; background-color: var(--paper-bright); }
.sc-mr4__pas b { font: 700 15px/1.3 var(--font-interface); }
.sc-mr4__pas span { font-size: 14px; color: var(--muted); }
.sc-mr4__bonus { display: grid; gap: 2px; margin-top: 14px; padding: 10px 14px; border-radius: 8px; background-color: rgba(var(--rgb-focus), .22); }
.sc-mr4__bonus span { font: italic 400 16px/1.35 var(--font-editorial); }

.sc-hdh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sc-hdh__groupe { padding: 10px 12px; border-radius: 8px; background-color: var(--paper-bright); border: 2px solid var(--line-strong); }
.sc-hdh__g { margin: 0 0 6px; font: 700 12px/1 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-accent); }
.sc-hdh__champ { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 8px; padding: 4px 0; border-top: 1px solid var(--line); }
.sc-hdh__n { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background-color: var(--surface-tint); font: 700 11px/1 var(--font-interface); color: var(--brand-primary); }
.sc-hdh__champ b { font: 700 14px/1.3 var(--font-interface); }
.sc-hdh__v { display: block; margin-top: 2px; padding: 3px 8px; border-radius: 4px; background-color: rgba(var(--rgb-focus), .20); font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--ink); }

.sc-roles { display: grid; gap: 14px; }
.sc-roles__chaine { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto auto auto minmax(0, 1fr); gap: 8px; align-items: center; }
.sc-role { display: grid; align-content: start; gap: 4px; padding: 10px 12px; border-radius: 8px; border-top: 5px solid var(--brand-focus); background-color: var(--paper-bright); }
.sc-role b { font: 700 15px/1.3 var(--font-interface); color: var(--brand-primary); }
.sc-role span { font-size: 14px; }
.sc-role em { font: italic 400 14px/1.3 var(--font-editorial); color: var(--muted); }
.sc-role__fleche { display: grid; justify-items: center; gap: 2px; font: 700 12px/1.2 var(--font-interface); color: var(--brand-accent); }
.sc-role__fleche::after { content: "→"; font-size: 22px; line-height: 1; color: var(--brand-primary); }
.sc-role__fleche i { font-style: normal; white-space: nowrap; }
.sc-roles__donnees span { display: inline-block; padding: 14px 12px; border-radius: 50% / 22%; background-color: var(--brand-fill); color: var(--on-fill); font: 700 14px/1.2 var(--font-interface); text-align: center; }
.sc-roles__dpo { display: grid; gap: 2px; padding: 10px 14px; border: 2px dashed var(--data-warm); border-radius: 10px; background-color: rgba(var(--rgb-warm), .06); text-align: center; }
.sc-roles__dpo b { font: 700 15px/1.3 var(--font-interface); color: var(--data-warm-texte); }
.sc-roles__dpo em { font: italic 400 14px/1.3 var(--font-editorial); color: var(--muted); }

.sc-chaine-d__g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.sc-maillon:not(:last-child)::after { content: ""; position: absolute; right: -22px; top: 46px; width: 26px; height: 14px; border: 3px solid var(--brand-primary); border-radius: 9px; background-color: var(--paper); z-index: 1; }
.sc-maillon { position: relative; display: grid; align-content: start; gap: 4px; min-height: 140px; padding: 10px; border: 3px solid var(--brand-primary); border-radius: 18px; background-color: var(--paper-bright); }
.sc-maillon b { font: 700 14px/1.2 var(--font-interface); color: var(--brand-primary); }
.sc-maillon span { font-size: 13.5px; }
.sc-maillon--faible { border-style: dashed; }
.sc-maillon .sc-tampon { left: 4px; bottom: -14px; font-size: 12px; padding: 4px 8px; border-width: 3px; }
.sc-chaine-d__lecon { margin: 22px 0 0; font: italic 400 17px/1.4 var(--font-editorial); }

@media (max-width: 900px) {
  .sc-esc__rang { grid-template-columns: 1fr; grid-template-areas: "p" "s" "u"; }
  .sc-uni, .sc-sources3__g, .sc-mrs, .sc-hdh, .sc-promesses__tete, .sc-promesse { grid-template-columns: 1fr; }
  .sc-roles__chaine { grid-template-columns: 1fr; justify-items: stretch; }
  .sc-role__fleche::after { content: "↓"; }
  .sc-roles__donnees { justify-self: center; }
  .sc-nuancier { grid-template-columns: 1fr; }
  .sc-nuance { min-height: 0; }
  .sc-mr4__frise { grid-template-columns: 1fr; }
  .sc-chaine-d__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-maillon:nth-child(2n)::after { display: none; }
  .sc-uni__verdict { min-height: 70px; }
  .sc-essai__tampon .sc-tampon, .sc-mrs__tampon { white-space: normal; text-align: center; font-size: 15px; }
  .sc-mrs__tampon { left: 8px; right: 8px; }
  .sc-cond { grid-template-columns: auto minmax(0, 1fr) 56px; gap: 8px; padding: 8px 10px; }
}
.sc-reecr__estompe { --reste: 1; }
.slide:is([data-etat="a1"], [data-etat="a2"], [data-etat="a3"], [data-etat="a4"], [data-etat="a5"], [data-etat="a6"]) .sc-reecr__estompe.cq-des-a1 > * { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(var(--rgb-warm), .7); }
.slide:is([data-etat="a2"], [data-etat="a3"], [data-etat="a4"], [data-etat="a5"], [data-etat="a6"]) .sc-reecr__estompe.cq-des-a2 > * { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(var(--rgb-warm), .7); }
.slide:is([data-etat="a3"], [data-etat="a4"], [data-etat="a5"], [data-etat="a6"]) .sc-reecr__estompe.cq-des-a3 > * { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(var(--rgb-warm), .7); }
.slide:is([data-etat="a4"], [data-etat="a5"], [data-etat="a6"]) .sc-reecr__estompe.cq-des-a4 > * { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(var(--rgb-warm), .7); }
.slide:is([data-etat="a5"], [data-etat="a6"]) .sc-reecr__estompe.cq-des-a5 > * { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(var(--rgb-warm), .7); }
.slide:is([data-etat="a6"]) .sc-reecr__estompe.cq-des-a6 > * { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(var(--rgb-warm), .7); }

.ex-likert__bornes { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.ex-likert__rang { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ex-likert__rang p { margin: 0; font: italic 400 18px/1.35 var(--font-editorial); }
.ex-likert__echelle { display: flex; gap: 6px; }
.ex-likert__echelle button { appearance: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--line-strong); background-color: var(--paper-bright); font: 700 15px/1 var(--font-interface); color: var(--brand-primary); cursor: pointer; }
.ex-likert__echelle button[aria-checked="true"] { background-color: var(--brand-fill); border-color: var(--brand-primary); color: var(--on-fill); }
.ex-likert__revelation { margin-top: 14px; padding: 14px 16px; border-left: 6px solid var(--data-warm); border-radius: 6px; background-color: var(--paper-bright); animation: bq-monte 460ms var(--ease-out); }
.ex-likert__revelation p { margin: 0 0 8px; }
.ex-orient__questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ex-orient__questions fieldset { margin: 0; min-width: 0; padding: 10px 12px; border: 2px solid var(--line-strong); border-radius: 8px; background-color: var(--paper-bright); }
.ex-orient__questions legend { padding: 0 4px; font: 700 15px/1.3 var(--font-interface); }
.ex-orient__questions label { display: block; margin-top: 6px; font-size: 15px; }
.ex-orient__verdict { margin-top: 12px; padding: 14px 18px; border-radius: 8px; background-color: var(--brand-fill); color: var(--on-fill); }
.ex-orient__verdict p { margin: 0 0 8px; }
.ex-orient__verdict a { color: var(--on-fill); font-weight: 700; }
.ex-orient__methode { font: 400 24px/1.2 var(--font-editorial); color: var(--brand-focus); }
.ex-orient__attente { font-style: italic; }
.ex-score__qs { display: grid; gap: 6px; }
.ex-score__q { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.ex-score__q p { margin: 0; font-size: 16px; }
.ex-score__choix { display: flex; gap: 6px; }
.ex-score__choix button { appearance: none; border: 2px solid var(--line-strong); border-radius: 999px; padding: 6px 14px; background-color: var(--paper-bright); font: 700 14px/1 var(--font-interface); color: var(--brand-primary); cursor: pointer; }
.ex-score__choix button[aria-pressed="true"][data-v="1"] { background-color: var(--brand-focus); border-color: var(--brand-primary); color: var(--on-focus); }
.ex-score__choix button[aria-pressed="true"][data-v="0"] { background-color: rgba(var(--rgb-warm), .15); border-color: var(--data-warm); color: var(--data-warm-texte); }
.ex-score__resultat { margin-top: 12px; padding: 12px 16px; border-radius: 8px; background-color: var(--paper-bright); border: 2px solid var(--line-strong); }
.ex-score__jauge { height: 12px; border-radius: 6px; background-color: var(--line); overflow: hidden; }
.ex-score__jauge span { display: block; height: 100%; width: calc(var(--s, 0) * 100%); background-color: var(--brand-focus); transition: width 400ms var(--ease-out); color: var(--on-focus); }
.ex-score__n { margin: 8px 0 4px; font: 400 30px/1 var(--font-editorial); color: var(--brand-primary); }
.ex-score__lecture { margin: 0; font-size: 14px; color: var(--muted); }
.ex-score__a-verifier { margin: 8px 0 0; padding-left: 20px; font-size: 14px; }
.ex-mission ol { margin: 0 0 12px; padding-left: 22px; }
.ex-mission li { margin-bottom: 6px; }
.ex-mission__liens { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-mission__liens .bq-bouton { text-decoration: none; }
.ex-mission__rappel { margin: 12px 0 0; padding: 10px 14px; border-radius: 6px; background-color: var(--surface-tint); font-size: 15px; }
.ex-arbre__chemin { display: grid; gap: 10px; }
.ex-arbre__noeud { padding: 12px 14px; border: 2px solid var(--line-strong); border-radius: 8px; background-color: var(--paper-bright); animation: bq-monte 360ms var(--ease-out); }
.ex-arbre__noeud:has([aria-pressed="true"]) { border-color: var(--brand-primary); }
.ex-arbre__q { margin: 0; font: 700 16px/1.35 var(--font-interface); }
.ex-arbre__precision { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.ex-arbre__choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ex-arbre__choix button { appearance: none; border: 2px solid var(--line-strong); border-radius: 999px; padding: 7px 16px; background-color: var(--paper-bright); font: 700 14px/1.2 var(--font-interface); color: var(--brand-primary); cursor: pointer; transition: background-color 200ms, border-color 200ms, color 200ms; }
.ex-arbre__choix button:hover { border-color: var(--brand-primary); }
.ex-arbre__choix button[aria-pressed="true"] { background-color: var(--brand-fill); border-color: var(--brand-primary); color: var(--on-fill); }
.ex-arbre__verdict { margin-top: 12px; padding: 14px 18px; border-radius: 8px; background-color: var(--brand-fill); color: var(--on-fill); animation: bq-monte 460ms var(--ease-out); }
.ex-arbre__verdict p { margin: 0 0 8px; }
.ex-arbre__verdict a { color: var(--on-fill); font-weight: 700; }
.ex-arbre__titre { font: 400 24px/1.2 var(--font-editorial); color: var(--brand-focus); }
.ex-arbre__reprendre { appearance: none; margin-top: 10px; border: 0; background: none; padding: 0; font: 700 14px/1 var(--font-interface); color: var(--brand-primary); text-decoration: underline; cursor: pointer; }
.ex-arbre__avert { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.ex-calc__l { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 90px; gap: 10px; align-items: end; padding: 8px 0; border-top: 1px solid var(--line); }
.ex-calc__nom { display: grid; font: 700 15px/1.3 var(--font-interface); }
.ex-calc__nom small { font: 400 13px/1.3 var(--font-interface); color: var(--muted); }
.ex-calc__l label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.ex-calc__l input { width: 100%; padding: 6px 8px; border: 2px solid var(--line-controle); border-radius: 6px; font: 700 15px/1.2 var(--font-interface); color: var(--ink); background-color: var(--paper-bright); }
.ex-calc__l input:focus { outline: 3px solid var(--brand-primary); outline-offset: 1px; }
.ex-calc__r { font: 400 24px/1 var(--font-editorial); color: var(--brand-primary); text-align: right; }
.ex-calc__total, .ex-calc__final { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 14px; border-radius: 8px; }
.ex-calc__total { border-top: 3px solid var(--brand-primary); font-weight: 700; }
.ex-calc__final { background-color: var(--brand-fill); color: var(--on-fill); }
.ex-calc__total output, .ex-calc__final output { font: 400 30px/1 var(--font-editorial); }
.ex-calc__final output { color: var(--brand-focus); }
.ex-calc__lecture { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.ex-calc__alerte { margin: 10px 0 0; font: 700 14px/1.4 var(--font-interface); color: var(--data-warm-texte); }
.ex-erreur { font: 700 12px/1.3 var(--font-interface); color: var(--data-warm-texte); }
.bq-ex input[aria-invalid="true"] { border-color: var(--data-warm); box-shadow: 0 0 0 2px rgba(var(--rgb-warm), .22); }
.ex-at__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ex-at__champ { display: grid; gap: 4px; }
.ex-at__champ span { font: 700 13px/1.3 var(--font-interface); letter-spacing: .04em; color: var(--brand-primary); }
.ex-at__champ textarea { width: 100%; padding: 8px 10px; border: 2px solid var(--line-controle); border-radius: 8px; font: 400 15px/1.4 var(--font-interface); color: var(--ink); background-color: var(--paper-bright); resize: vertical; }
.ex-at__champ textarea:focus { outline: 3px solid var(--brand-primary); outline-offset: 1px; }  /* l'anneau du site, pas un liseré turquoise à 1,9:1 */
.ex-at__rendu { margin-top: 14px; padding: 14px 18px; border-radius: 10px; background-color: var(--brand-fill); color: var(--on-fill); }
.ex-at__k { margin: 0 0 6px; font: 700 12px/1 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--on-fill-accent); }
.ex-at__texte { margin: 0 0 10px; font: italic 400 19px/1.45 var(--font-editorial); }
.ex-at__texte .ex-at__vide { font-style: italic; text-decoration: underline dotted; text-underline-offset: 3px; }  /* un indice à compléter : la couleur de son texte, sur fond clair comme sur l'aplat navy (à 0,55 d'opacité : 3,99:1) */
.ex-at__rendu :focus-visible { outline-color: var(--brand-focus); }  /* turquoise sur l'encart marine (3,2:1) ; le marine s'y confondait */
.ex-at__copier { appearance: none; border: 2px solid var(--paper-bright); border-radius: 999px; padding: 6px 14px; background: none; font: 700 13px/1 var(--font-interface); color: var(--on-fill); cursor: pointer; }
.ex-at__note { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.ex-essai__g { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ex-essai__form { display: grid; gap: 10px; }
.ex-essai__q { margin: 0; min-width: 0; padding: 10px 12px; border: 2px solid var(--line-strong); border-radius: 8px; background-color: var(--paper-bright); }
.ex-essai__q legend { padding: 0 4px; font: 700 14px/1.3 var(--font-interface); color: var(--brand-primary); }
.ex-essai__q input[type="number"], .ex-essai__q textarea { width: 100%; max-width: 220px; padding: 6px 8px; border: 2px solid var(--line-controle); border-radius: 6px; font: 400 15px/1.3 var(--font-interface); }
.ex-essai__q textarea { max-width: none; }
.ex-essai__q input:focus, .ex-essai__q textarea:focus { outline: 3px solid var(--brand-primary); outline-offset: 1px; }
.ex-essai__choix { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; }
.ex-essai__echelle { display: flex; flex-wrap: wrap; gap: 4px; }
.ex-essai__echelle input { position: absolute; opacity: 0; }
.ex-essai__echelle span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-strong); font: 700 13px/1 var(--font-interface); color: var(--brand-primary); cursor: pointer; }
.ex-essai__echelle input:checked + span { background-color: var(--brand-fill); border-color: var(--brand-primary); color: var(--on-fill); }
.ex-essai__echelle input:focus-visible + span { box-shadow: 0 0 0 3px rgba(var(--rgb-focus), .5); }
.ex-essai__filtre { margin-top: 8px; padding: 8px 10px; border-left: 4px solid var(--brand-focus); background-color: rgba(var(--rgb-focus), .12); animation: bq-monte 360ms var(--ease-out); }
.ex-essai__filtre p { margin: 0 0 6px; font: 700 13px/1.3 var(--font-interface); }
.ex-essai__base { position: sticky; top: 80px; padding: 12px 14px; border-radius: 10px; background-color: var(--brand-fill); color: var(--on-fill); }
.ex-essai__k { margin: 0 0 8px; font: 700 12px/1 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--on-fill-accent); }
.ex-essai__base table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ex-essai__base th { padding: 4px 6px; text-align: left; font: 700 11px/1.2 var(--font-interface); letter-spacing: .06em; text-transform: uppercase; color: var(--on-fill-accent); border-bottom: 1px solid rgba(255,255,255,.3); }
.ex-essai__base td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.14); vertical-align: top; }
.ex-essai__base td:first-child { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.ex-essai__base td:nth-child(2) { font-weight: 700; }
.ex-essai__base td:last-child { font-style: italic; }  /* plus d'opacité sur du blanc posé sur le navy : 4,47:1 */
.ex-essai__base tr.est-neuf td { animation: ex-flash 900ms ease-out; }
@keyframes ex-flash { from { background-color: rgba(var(--rgb-focus), .45); } to { background-color: transparent; } }
.ex-essai__note { margin: 10px 0 0; font-size: 13px; opacity: .85; }
.ex-pc__puces { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.ex-pc__puces button { flex: none; display: inline-flex; align-items: center; gap: 6px; scroll-snap-align: start; appearance: none; padding: 5px 12px 5px 5px; border: 2px solid var(--line-strong); border-radius: 999px; background-color: var(--paper-bright); font: 700 13px/1.2 var(--font-interface); color: var(--brand-primary); cursor: pointer; white-space: nowrap; }
.ex-pc__puces button span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--surface-tint); font-size: 12px; }
.ex-pc__puces button.est-vu span { background-color: var(--brand-focus); color: var(--on-focus); }
.ex-pc__puces button[aria-selected="true"] { background-color: var(--brand-fill); border-color: var(--brand-primary); color: var(--on-fill); }
.ex-pc__puces button[aria-selected="true"] span { background-color: var(--brand-focus); color: var(--on-focus); }
.ex-pc__fenetre { position: relative; overflow: clip; border-radius: 12px; }
.ex-pc__piste { position: relative; }
.ex-pc__p { min-width: 0; padding: 16px 18px; background-color: var(--paper-bright); border: 2px solid var(--line-strong); border-radius: 12px; transition: transform 420ms var(--ease-out), opacity 320ms var(--ease-out), visibility 0s linear 420ms; }
.ex-pc__p:not(.est-actif) { position: absolute; top: 0; left: 0; width: 100%; visibility: hidden; opacity: 0; pointer-events: none; }
.ex-pc__p.est-avant { transform: translateX(-30%); }
.ex-pc__p.est-apres { transform: translateX(30%); }
.ex-pc__p.est-actif { position: relative; opacity: 1; transform: none; transition-delay: 0s; }
.ex-pc__n { margin: 0; font: 700 11px/1 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-accent); }
.ex-pc__p h4 { margin: 4px 0 10px; font: 400 24px/1.2 var(--font-editorial); color: var(--brand-primary); }
.ex-pc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ex-pc__cols p { margin: 0; font-size: 15px; }
.ex-pc__k { margin-bottom: 4px !important; font: 700 12px/1.2 var(--font-interface) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ex-pc__rep { padding: 10px 12px; border-radius: 8px; background-color: rgba(var(--rgb-focus), .16); border-left: 5px solid var(--brand-focus); }
.ex-pc__rep p:last-child { font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; }
.ex-pc__conseil { margin: 12px 0 0; padding-left: 12px; border-left: 4px solid var(--data-warm); font: italic 400 16px/1.4 var(--font-editorial); }
.ex-pc__nav { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ex-pc__nav button { appearance: none; border: 2px solid var(--brand-primary); border-radius: 999px; padding: 6px 14px; background-color: var(--paper-bright); font: 700 13px/1 var(--font-interface); color: var(--brand-primary); cursor: pointer; }
.ex-pc__nav button:disabled { opacity: .35; cursor: default; }
.ex-pc__barre { flex: 1; height: 6px; border-radius: 3px; background-color: var(--line); overflow: hidden; }
.ex-pc__barre span { display: block; height: 100%; width: calc(var(--v, 0) * 100%); background-color: var(--brand-focus); transition: width 360ms var(--ease-out); color: var(--on-focus); }
@media (prefers-reduced-motion: reduce) { .ex-pc__p { transition: none; } }
.ex-taille__g { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ex-taille__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ex-taille__champs label, .ex-taille__ligne label { display: grid; align-content: start; gap: 4px; font: 700 13px/1.3 var(--font-interface); color: var(--brand-primary); }
.ex-taille__champs small { font: 400 12px/1.3 var(--font-interface); color: var(--muted); }
.ex-taille input, .ex-taille select { width: 100%; padding: 7px 9px; border: 2px solid var(--line-controle); border-radius: 6px; background-color: var(--paper-bright); font: 700 15px/1.2 var(--font-interface); color: var(--ink); }
.ex-taille input:focus, .ex-taille select:focus { outline: 3px solid var(--brand-primary); outline-offset: 1px; }
.ex-taille__resultat { padding: 16px 18px; border-radius: 12px; background-color: var(--brand-fill); color: var(--on-fill); }
.ex-taille__k { margin: 0; font: 700 12px/1 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--on-fill-accent); }
.ex-taille__n { margin: 6px 0; font: 400 56px/1 var(--font-editorial); }
.ex-taille__part, .ex-taille__sollic { margin: 4px 0 0; font-size: 15px; }
.ex-taille__part b, .ex-taille__sollic b { color: var(--on-fill-accent); }
.ex-taille__sg { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background-color: var(--paper-bright); border: 2px solid var(--line-strong); }
.ex-taille__sg summary { cursor: pointer; font: 700 15px/1.3 var(--font-interface); color: var(--brand-primary); }
.ex-taille__lignes { display: grid; gap: 8px; margin-top: 10px; }
.ex-taille__ligne { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 90px; gap: 10px; align-items: end; }
/* l'intitulé ne s'affiche qu'une fois, en tête de colonne ; les lecteurs d'écran l'entendent à chaque ligne */
.ex-taille__ligne + .ex-taille__ligne label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ex-taille__ligne output { font: 400 24px/1.2 var(--font-editorial); color: var(--brand-primary); text-align: right; }
.ex-taille__ajout { margin-top: 10px; appearance: none; border: 2px dashed var(--brand-primary); border-radius: 999px; padding: 6px 14px; background: none; font: 700 13px/1 var(--font-interface); color: var(--brand-primary); cursor: pointer; }
.ex-taille__total { margin: 10px 0 0; font-size: 15px; }
.ex-taille__total b { font: 400 22px/1 var(--font-editorial); color: var(--brand-primary); }
.ex-taille__note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .ex-taille__g, .ex-taille__champs { grid-template-columns: 1fr; } .ex-taille__ligne { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 48px; gap: 6px; } .ex-taille__ligne output { font-size: 20px; } .ex-pc__cols { grid-template-columns: 1fr; } .ex-essai__g { grid-template-columns: 1fr; } .ex-essai__base { position: static; } .ex-at__champs { grid-template-columns: 1fr; } .ex-calc__l { grid-template-columns: 1fr 1fr; } .ex-calc__nom, .ex-calc__r { grid-column: 1 / -1; } .ex-calc__r { text-align: left; } .ex-orient__questions { grid-template-columns: 1fr; } .ex-likert__rang, .ex-score__q { grid-template-columns: 1fr; } }
/* Les exercices qui réagissent (8 octobre 2026) : le style de mecaniques.js.
   Tout passe par les rôles de couleur du site (expecttools/jetons.py), donc par ses deux thèmes. Un exercice vit dans un
   panneau plus étroit que l'écran : les mises en page suivent la largeur de l'exercice (requêtes de conteneur), pas celle
   de la fenêtre. */
.mc { container-type: inline-size; }
.mc__corps { display: grid; gap: 14px; }
.mc p { margin: 0; }
.mc-petit { font-size: 14px; }
.mc-muet { color: var(--muted); }
.mc-fictif { display: inline-block; padding: 2px 9px; border-radius: 999px; background-color: var(--surface-tint); font: 700 11px/1.5 var(--font-interface); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mc-rangee { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mc-etiq { font: 700 12px/1.3 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mc-but { font: 400 20px/1.35 var(--font-editorial); color: var(--ink); }

.mc-btn { appearance: none; border: 2px solid var(--brand-primary); background-color: var(--paper-bright); color: var(--brand-primary); border-radius: 8px; padding: 9px 14px;
  font: 700 15px/1.3 var(--font-interface); cursor: pointer; text-align: left; transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; }
.mc-btn:hover { background-color: var(--surface-tint); }
.mc-btn--plein, .mc-btn[aria-pressed="true"] { background-color: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-fill); }
.mc-btn--plein:hover, .mc-btn[aria-pressed="true"]:hover { background-color: var(--brand-fill); filter: brightness(1.1); }
.mc-btn--discret { border-color: var(--line-strong); color: var(--ink); font-weight: 600; }
.mc-btn--petit { padding: 6px 11px; font-size: 14px; }
.mc-btn[disabled] { opacity: .45; cursor: default; }
.mc :focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }

.mc-verdict { display: grid; gap: 4px; padding: 11px 14px; border-radius: 10px; border-left: 5px solid var(--line-strong); background-color: var(--surface-tint); }
.mc-verdict--juste { border-left-color: var(--brand-focus); background-color: var(--surface-alt-libre); }
.mc-verdict--faux { border-left-color: var(--data-warm); background-color: var(--warm-pale); }
.mc-verdict__titre { font: 800 12px/1.3 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mc-verdict--juste .mc-verdict__titre { color: var(--brand-focus-texte); }
.mc-verdict--faux .mc-verdict__titre { color: var(--data-warm-texte); }

/* L'enquêtée qui répond */
.mc-enq { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
@container (max-width: 680px) { .mc-enq { grid-template-columns: minmax(0, 1fr); } }
.mc-enq__scene { display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 16px; border-radius: 12px; background-color: var(--surface-tint); }
.mc-perso { display: flex; gap: 12px; align-items: center; }
.mc-perso svg { width: 56px; height: 56px; flex: none; }
.mc-perso p { font-size: 15px; line-height: 1.35; }
.mc-fil { display: flex; flex-direction: column; gap: 10px; }
.mc-bulle { max-width: 90%; padding: 10px 14px; border-radius: 16px; font-size: 16px; line-height: 1.45; }
.mc-bulle--vous { align-self: flex-end; background-color: var(--brand-fill); color: var(--on-fill); border-bottom-right-radius: 4px; }
.mc-bulle--elle { align-self: flex-start; background-color: var(--paper-bright); border: 1px solid var(--line-strong); border-bottom-left-radius: 4px; font: italic 400 17px/1.45 var(--font-editorial); color: var(--ink); }
.mc-bulle--papier { align-self: stretch; max-width: none; white-space: pre-line; background-color: var(--paper-bright); border: 2px dashed var(--line-strong); border-radius: 8px; font-weight: 600; color: var(--ink); }
.mc-attente { display: inline-flex; gap: 5px; padding: 4px 2px; }
.mc-attente i { width: 7px; height: 7px; border-radius: 50%; background-color: var(--muted); animation: mc-sauter 1s infinite ease-in-out; }
.mc-attente i:nth-child(2) { animation-delay: .15s; } .mc-attente i:nth-child(3) { animation-delay: .3s; }
@keyframes mc-sauter { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.mc-didascalie { align-self: flex-start; font: italic 400 14px/1.4 var(--font-editorial); color: var(--muted); }
.mc-mots { align-self: flex-start; font: 700 12px/1.3 var(--font-interface); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mc-enq__pupitre { display: flex; flex-direction: column; gap: 12px; }
.mc-choix { display: grid; gap: 8px; }
.mc-choix .mc-btn { font-weight: 600; color: var(--ink); border-color: var(--line-strong); }
.mc-choix .mc-btn:hover { border-color: var(--brand-primary); }
.mc-choix .mc-btn.est-choisi { border-color: var(--brand-primary); background-color: var(--surface-tint); }
.mc-choix .mc-btn.est-essaye::after { content: " · essayée"; font-weight: 400; color: var(--muted); }

/* La pile à trier */
.mc-pile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.mc-pile--seule { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
@container (max-width: 680px) { .mc-pile { grid-template-columns: minmax(0, 1fr); } }
.mc-table { position: relative; height: 230px; touch-action: pan-y; }
.mc-carte { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 20px; border-radius: 14px; background-color: var(--paper-bright);
  border: 1.5px solid var(--line-strong); box-shadow: 0 18px 40px -26px rgba(var(--rgb-encre), .45); cursor: grab; user-select: none; transition: transform 320ms var(--ease-out), opacity 320ms ease-out; }
.mc-carte.est-tiree { transition: none; cursor: grabbing; }
.mc-carte--fixe { cursor: default; }
.mc-carte--dessous { transform: translateY(10px) scale(.96); opacity: .55; cursor: default; }
.mc-carte__texte { font: 400 21px/1.3 var(--font-editorial); color: var(--ink); }
.mc-carte__n { font: 700 12px/1.3 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mc-tampon { position: absolute; top: 16px; right: 16px; max-width: calc(100% - 32px); padding: 4px 12px; border: 4px solid currentColor; border-radius: 6px;
  font: 900 18px/1.1 var(--font-interface); letter-spacing: .05em; text-transform: uppercase; transform: rotate(-7deg); opacity: 0; transition: opacity 150ms ease-out; }
.mc-tampon--g { left: 16px; right: auto; transform: rotate(7deg); }
.mc-tampon--juste { color: var(--brand-focus-texte); } .mc-tampon--faux { color: var(--data-warm-texte); }
.mc-boutons { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.mc-boutons .mc-btn { text-align: center; padding-inline: 8px; }
.mc-etat { display: flex; flex-wrap: wrap; gap: 16px; font: 700 14px/1.3 var(--font-interface); color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-etat b { color: var(--ink); }
.mc-fin { display: grid; gap: 10px; padding: 20px; border-radius: 14px; background-color: var(--surface-tint); }
.mc-fin__score { font: 400 42px/1 var(--font-editorial); color: var(--brand-primary); }
.mc-droite { display: grid; gap: 12px; align-content: start; }

/* La baignoire : prévalence et incidence */
.mc-bain { margin: 0; padding: 12px; border-radius: 12px; background-color: var(--surface-tint); display: grid; gap: 8px; }
.mc-bain svg { display: block; width: 100%; height: auto; }
.mc-bain__tuyau { fill: none; stroke: var(--muted); stroke-width: 11; stroke-linecap: round; }
.mc-goutte { fill: var(--brand-focus); opacity: .75; }
.mc-bain__cuve { fill: var(--paper-bright); stroke: var(--brand-primary); stroke-width: 4; }
.mc-bain__eau { fill: var(--brand-focus); fill-opacity: .45; }
.mc-bain__lab { font: 800 20px var(--font-interface); fill: var(--ink); }
.mc-bain__sous { font: 400 16px var(--font-interface); fill: var(--muted); }
.mc-bain figcaption { font-size: 14px; color: var(--ink); }
.mc-bain.est-incidence .mc-goutte { animation: mc-tomber .9s infinite ease-in; }
.mc-bain.est-incidence .mc-goutte--2 { animation-delay: .3s; } .mc-bain.est-incidence .mc-goutte--3 { animation-delay: .6s; }
@keyframes mc-tomber { from { transform: translateY(-14px); opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
.mc-bain.est-incidence .mc-bain__lab--inc, .mc-bain.est-prevalence .mc-bain__lab--prev { fill: var(--data-warm-texte); }
.mc-bain.est-prevalence .mc-bain__eau { fill-opacity: .85; }

/* Le graphique qui se dessine */
.mc-labo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: start; }
@container (max-width: 680px) { .mc-labo { grid-template-columns: minmax(0, 1fr); } }
.mc-labo__cmd { display: grid; gap: 12px; align-content: start; }
.mc-labo__fig { padding: 12px; border-radius: 12px; background-color: var(--surface-tint); }
.mc-labo__fig svg { display: block; width: 100%; height: auto; }
.mc-labo__fig text { fill: var(--ink); font-family: var(--font-interface); }
.mc-labo__fig .mc-t-muet { fill: var(--muted); }
.mc-cas { font: 800 12px/1.3 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-primary); }
.mc-curseur { display: grid; gap: 6px; font-size: 14px; }
.mc-curseur input { width: 100%; accent-color: var(--data-warm); }
.mc-chiffres { display: flex; flex-wrap: wrap; gap: 10px 22px; font-variant-numeric: tabular-nums; }
.mc-chiffres div { display: grid; }
.mc-chiffres b { font: 400 26px/1.1 var(--font-editorial); }
.mc-chiffres .mc-moy b { color: var(--data-warm-texte); } .mc-chiffres .mc-med b { color: var(--brand-focus-texte); }
.mc-chiffres span { font: 700 12px/1.3 var(--font-interface); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Le casting */
.mc-badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 10px; background-color: var(--surface-tint); }
.mc-badge { appearance: none; touch-action: none; border: 2px solid var(--brand-primary); border-radius: 999px; padding: 7px 13px; background-color: var(--paper-bright); color: var(--brand-primary); font: 700 14px/1.2 var(--font-interface); cursor: grab; }
.mc-badge[aria-pressed="true"] { background-color: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-fill); box-shadow: 0 0 0 4px var(--surface-alt-libre); }
.mc-badge--fantome { position: fixed; z-index: 60; pointer-events: none; transform: translate(-50%, -50%) rotate(-4deg); box-shadow: 0 12px 24px -10px rgba(var(--rgb-encre), .5); }
.mc-persos { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; }
.mc-perso-carte { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line-strong); background-color: var(--paper-bright); }
.mc-perso-carte svg { width: 50px; height: 50px; }
.mc-perso-carte.est-survole { border-color: var(--brand-primary); box-shadow: 0 0 0 4px var(--surface-alt-libre); }
.mc-perso-carte.est-juste { border-color: var(--brand-focus); } .mc-perso-carte.est-faux { border-color: var(--data-warm); }
.mc-perso__nom { font: 700 15px/1.3 var(--font-interface); color: var(--ink); }
.mc-perso__role { font: italic 400 15px/1.4 var(--font-editorial); color: var(--muted); }
.mc-place { appearance: none; min-height: 40px; padding: 8px 10px; border: 2px dashed var(--line-strong); border-radius: 8px; background: transparent; color: var(--muted); font: 600 14px/1.25 var(--font-interface); cursor: pointer; text-align: center; }
.mc-place.est-pleine { border-style: solid; border-color: var(--brand-fill); background-color: var(--brand-fill); color: var(--on-fill); }

/* La réparation */
.mc-rep { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.mc-qrep { position: relative; display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 12px; border: 1.5px solid var(--line-strong); background-color: var(--paper-bright); }
.mc-qrep.est-reparee { border-color: var(--brand-focus); }
.mc-papier { display: grid; gap: 8px; padding: 12px 14px; border-radius: 8px; background-color: var(--surface-tint); font-size: 15px; color: var(--ink); }
.mc-papier ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.mc-papier li::before { content: "☐ "; color: var(--muted); }
.mc-papier mark { background-color: rgba(var(--rgb-focus), .35); color: inherit; border-radius: 3px; padding: 0 2px; }
.mc-qrep > .mc-rangee { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.mc-qrep > .mc-rangee .mc-btn { text-align: center; }
.mc-sceau { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border: 3px solid var(--brand-focus-texte); border-radius: 6px; color: var(--brand-focus-texte); font: 900 13px/1.2 var(--font-interface); letter-spacing: .06em; transform: rotate(-6deg); }

/* Le questionnaire au régime */
.mc-regime__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(190px, .8fr); gap: 10px; }
@container (max-width: 680px) { .mc-regime__tete { grid-template-columns: minmax(0, 1fr); } }
.mc-obj { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: 10px; background-color: var(--surface-tint); }
.mc-obj p { font: 400 17px/1.35 var(--font-editorial); color: var(--ink); }
.mc-pastille { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font: 800 13px/1 var(--font-interface); color: #0f172a; }
.mc-jauge { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--line-strong); }
.mc-jauge__chiffre { font: 400 30px/1 var(--font-editorial); color: var(--brand-primary); font-variant-numeric: tabular-nums; }
.mc-jauge__barre { height: 10px; border-radius: 5px; background-color: var(--surface-tint); overflow: hidden; }
.mc-jauge__barre span { display: block; height: 100%; background-color: var(--data-warm); transition: width 400ms ease-out; }
.mc-regime__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mc-rq { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 10px; border: 1.5px solid var(--line-strong); background-color: var(--paper-bright); transition: opacity 300ms ease-out; }
.mc-rq.est-retiree { opacity: .5; }
.mc-rq.est-retiree .mc-rq__texte { text-decoration: line-through; text-decoration-color: var(--data-warm); }
.mc-rq.est-juste { border-color: var(--brand-focus); } .mc-rq.est-faux { border-color: var(--data-warm); }
.mc-rq__texte { font-size: 15px; color: var(--ink); }
.mc-rq__retour { font-size: 14px; }

/* Le fil du questionnaire */
.mc-fil-outil { display: grid; gap: 22px; }
.mc-fil__etape { display: grid; gap: 10px; }
.mc-fil__titre { display: flex; gap: 10px; align-items: center; font: 400 20px/1.3 var(--font-editorial); color: var(--brand-primary); }
.mc-fil__titre span { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background-color: var(--brand-fill); color: var(--on-fill); font: 800 13px/1 var(--font-interface); }
.mc-bilan { padding: 11px 15px; border-radius: 10px; font-weight: 600; color: var(--ink); }
.mc-bilan.casse { background-color: var(--warm-pale); border-left: 5px solid var(--data-warm); }
.mc-bilan.tient { background-color: var(--surface-alt-libre); border-left: 5px solid var(--brand-focus); }
.mc-objectifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.mc-objectif { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 10px; background-color: var(--surface-tint); border-top: 6px solid var(--c); }
.mc-objectif__tete { display: flex; gap: 8px; align-items: center; font: 700 13px/1.2 var(--font-interface); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mc-champ { width: 100%; padding: 8px 10px; border: 1.5px solid var(--line-controle); border-radius: 6px; background-color: var(--paper-bright); color: var(--ink); font: 400 15px/1.35 var(--font-interface); resize: vertical; }
.mc-champ::placeholder { color: var(--data-warm-texte); opacity: 1; }
.mc-drapeau { justify-self: start; padding: 3px 10px; border-radius: 999px; font: 700 13px/1.4 var(--font-interface); }
.mc-drapeau--alerte { background-color: var(--warm-pale); color: var(--data-warm-texte); border: 1.5px solid var(--data-warm); }
.mc-drapeau--ok { background-color: var(--surface-alt-libre); color: var(--brand-focus-texte); }
.mc-question { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.mc-question__ligne { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mc-puce { appearance: none; min-width: 36px; height: 32px; padding: 0 11px; border-radius: 999px; border: 2px solid var(--line-strong); background-color: var(--paper-bright); color: var(--ink); font: 800 13px/1 var(--font-interface); cursor: pointer; }
.mc-puce:hover { border-color: var(--brand-primary); }
.mc-puce[aria-pressed="true"] { background-color: var(--c); border-color: var(--c); color: #0f172a; }
.mc-puce--aucun[aria-pressed="true"] { background-color: var(--surface-tint); border-color: var(--muted); color: var(--ink); }
.mc-puce--retirer { margin-left: auto; color: var(--muted); font-weight: 600; }
.mc-plan summary { list-style: none; cursor: pointer; }
.mc-plan summary::-webkit-details-marker { display: none; }
.mc-plan summary::after { content: "▸"; color: var(--muted); font-size: 16px; transition: transform 200ms ease-out; }
.mc-plan[open] summary::after { transform: rotate(90deg); }
.mc-plan-liste { display: grid; gap: 10px; }
.mc-plan-liste article { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; background-color: var(--surface-tint); border-left: 6px solid var(--c); font-size: 15px; color: var(--ink); }
.mc-plan-liste .mc-vide { color: var(--data-warm-texte); font-style: italic; }

/* La salle d'attente */
.mc-protocole { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--line-strong); background-color: var(--paper-bright); }
.mc-protocole__titre { font: 400 21px/1.3 var(--font-editorial); color: var(--brand-primary); }
.mc-protocole dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 15px; }
.mc-protocole dt { font: 700 13px/1.5 var(--font-interface); color: var(--muted); }
.mc-protocole dd { margin: 0; color: var(--ink); }
.mc-protocole ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mc-protocole li { padding: 4px 10px; border-radius: 999px; background-color: var(--surface-tint); font-size: 14px; color: var(--ink); }
@container (max-width: 520px) { .mc-protocole dl { grid-template-columns: minmax(0, 1fr); } }
.mc-accueil { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 108px; padding: 16px 18px; border-radius: 12px; background-color: var(--surface-tint); }
.mc-accueil svg { width: 66px; height: 66px; }
.mc-accueil__qui { font: 700 13px/1.3 var(--font-interface); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mc-accueil__parole { font: italic 400 20px/1.4 var(--font-editorial); color: var(--ink); }
.mc-portes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@container (max-width: 600px) { .mc-portes { grid-template-columns: minmax(0, 1fr); } }
.mc-zone { display: grid; gap: 8px; align-content: start; }
.mc-zone__btn { appearance: none; display: grid; gap: 4px; justify-items: center; padding: 14px 10px; border-radius: 12px; border: 2px solid var(--brand-primary); background-color: var(--paper-bright); color: var(--ink); text-align: center; cursor: pointer; transition: background-color 150ms ease-out; }
.mc-zone__btn:hover { background-color: var(--surface-tint); }
.mc-zone__btn[disabled] { opacity: .5; cursor: default; }
.mc-zone__btn svg { width: 52px; height: 52px; }
.mc-zone__nom { font: 800 16px/1.2 var(--font-interface); color: var(--brand-primary); }
.mc-zone__sous { font-size: 13px; color: var(--muted); }
.mc-zone__gens { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.mc-jeton { padding: 3px 10px; border-radius: 999px; font: 700 13px/1.4 var(--font-interface); }
.mc-jeton--juste { background-color: var(--surface-alt-libre); color: var(--brand-focus-texte); } .mc-jeton--faux { background-color: var(--warm-pale); color: var(--data-warm-texte); }

/* Le titre qui se précise */
.mc-titre__avant { font-size: 15px; color: var(--muted); }
.mc-titre__avant s { text-decoration-color: var(--data-warm); text-decoration-thickness: 2px; }
.mc-titre__apres { min-height: 92px; padding: 16px 18px; border-radius: 12px; background-color: var(--surface-tint); font: 400 24px/1.4 var(--font-editorial); color: var(--ink); }
.mc-trou { display: inline-block; padding: 0 6px; border-bottom: 2px dashed var(--data-warm); color: var(--data-warm-texte); font: italic 400 .72em/1.6 var(--font-interface); }
.mc-rempli { background-color: rgba(var(--rgb-focus), .32); border-radius: 4px; padding: 0 3px; }
.mc-precision { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 360px; }
.mc-precision span { display: grid; gap: 4px; font: 700 11px/1.2 var(--font-interface); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mc-precision span::before { content: ""; height: 8px; border-radius: 4px; background-color: var(--line-strong); }
.mc-precision span.ok::before { background-color: var(--brand-focus); }
.mc-briques { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-brique { appearance: none; padding: 9px 14px; border-radius: 8px; border: 2px solid var(--line-strong); background-color: var(--paper-bright); color: var(--ink); font: 600 15px/1.3 var(--font-interface); cursor: pointer; }
.mc-brique:hover { border-color: var(--brand-primary); }
.mc-brique[disabled] { opacity: .4; cursor: default; }
.mc-brique.est-secouee { animation: mc-secouer .4s; border-color: var(--data-warm); }
@keyframes mc-secouer { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@media (prefers-reduced-motion: reduce) {
  .mc *, .mc *::before, .mc *::after { animation: none !important; transition: none !important; }
  .mc-bain.est-incidence .mc-goutte { opacity: .9; }
}
@media print { .mc-table { height: auto; } .mc-carte { position: static; } .mc-carte--dessous, .mc-boutons { display: none; } }

.bq-biblio { margin: 40px 0 8px; padding: 26px 28px 28px; border-radius: 14px; background-color: var(--paper-bright); border: 2px solid var(--line-strong); }
.bq-biblio__tete h2 { margin: 2px 0 6px; font: 400 30px/1.15 var(--font-editorial); color: var(--brand-primary); }
.bq-biblio__tete p:last-child { margin: 0 0 18px; max-width: 80ch; font-size: 15px; color: var(--muted); }
/* Le rayon : une figure, qui garde ses couleurs la nuit. Une planche par rangée, qui se répète quand le rayon passe à la ligne. */
/* le meuble épouse ses livres : deux références font une petite étagère, pas un long rayon vide */
.bq-rayon { --bois: #10263f; --bois-clair: #1d3a5c; --or: #e2b04a; --rang: 192px; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0 0 30px; padding: 0 16px; border: 12px solid var(--bois); border-width: 12px 12px 0;
  border-radius: 10px 10px 4px 4px; background: linear-gradient(90deg, rgba(16,38,63,.06) 1px, transparent 1px) 0 0 / 46px 100%, #e8eef6;
  box-shadow: 0 0 0 1px var(--line-strong), 0 26px 40px -30px rgba(var(--rgb-encre), .7); }  /* le filet : le bois disparaîtrait sur la page de nuit */
.bq-rayon__livres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 3px; margin: 0 -16px; padding: 0 16px; list-style: none;
  background: linear-gradient(transparent calc(var(--rang) - 16px), var(--bois-clair) calc(var(--rang) - 16px), var(--bois) var(--rang)) 0 0 / 100% var(--rang) repeat-y; }
.bq-rayon__livres > li { display: flex; align-items: flex-end; height: var(--rang); padding-bottom: 16px; box-sizing: border-box; }
.bq-rayon__livres > li.bq-rayon__deco { gap: 12px; margin-left: auto; padding: 0 6px 16px 18px; }
.bq-rayon__plante { width: 58px; height: 76px; } .bq-rayon__loupe { width: 44px; height: 44px; transform: rotate(-20deg); }
.bq-dos { --c: #1a4585; --t: #fff; --l: 34px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px; width: var(--l); height: var(--h);
  padding: 9px 0 7px; box-sizing: border-box; border-radius: 3px 3px 1px 1px; background-color: var(--c); color: var(--t); text-decoration: none;
  box-shadow: inset -4px 0 0 rgba(0,0,0,.16), inset 2px 0 0 rgba(255,255,255,.2), 0 -1px 0 rgba(0,0,0,.08); transition: transform 200ms var(--ease-out); }
.bq-dos:hover, .bq-dos:focus-visible { transform: translateY(-12px); }
.bq-dos:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.bq-dos__nom { writing-mode: vertical-rl; transform: rotate(180deg); min-height: 0; overflow: hidden; white-space: nowrap; font: 400 14px/1 var(--font-editorial); }
.bq-dos__an { padding-top: 5px; border-top: 1px solid currentColor; font: 700 10px/1 var(--font-interface); }
.bq-dos--ouvrage { --l: 44px; background-image: linear-gradient(var(--or), var(--or)), linear-gradient(var(--or), var(--or));
  background-size: 100% 2px; background-position: 0 4px, 0 calc(100% - 26px); background-repeat: no-repeat; }
.bq-dos--chapitre { --c: #0066a8; --l: 38px; }
.bq-dos--article { --c: #62c4cf; --t: #0f172a; --l: 30px; }
.bq-dos--manuscrit { --c: #a8441b; --l: 32px; }
.bq-dos--rapport { --c: #5b4a8b; --l: 40px; }
.bq-dos--guide { --c: #cfe8c9; --t: #0f172a; --l: 38px; }
.bq-dos--texte { --c: #f3c3a9; --t: #0f172a; --l: 34px; }
.bq-dos--donnees { --c: #a9c4e6; --t: #0f172a; --l: 34px; }
/* Le fichier : une fiche de catalogue par référence */
.bq-biblio__liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bq-ref { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 12px 18px 34px; border-radius: 4px; background-color: var(--paper-bright);
  border: 1px solid var(--line-strong); box-shadow: 0 1px 0 var(--line-strong), 0 10px 18px -14px rgba(var(--rgb-encre), .35); scroll-margin: 96px 0 120px; }
.bq-ref::after { content: ""; position: absolute; left: 50%; bottom: 11px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background-color: var(--surface-tint);
  box-shadow: inset 0 1px 2px rgba(var(--rgb-encre), .3); }
.bq-ref:target { box-shadow: 0 0 0 3px var(--brand-focus), 0 16px 26px -16px rgba(var(--rgb-encre), .45); animation: bq-ref-tiree 650ms var(--ease-out); }
@keyframes bq-ref-tiree { from { transform: translateY(-16px); } to { transform: none; } }
.bq-ref__tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; padding-bottom: 8px; border-bottom: 2px solid rgba(var(--rgb-warm), .55); }
.bq-ref__cote { font: 600 12px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .08em; color: var(--muted); }
.bq-ref__type { flex: none; padding: 3px 10px; border-radius: 999px; background-color: var(--c, #1a4585); color: var(--t, #fff); font: 700 11px/1.3 var(--font-interface);
  letter-spacing: .08em; text-transform: uppercase; }
.bq-ref--ouvrage { --c: #1a4585; --t: #fff; } .bq-ref--chapitre { --c: #0066a8; --t: #fff; } .bq-ref--article { --c: #62c4cf; --t: #0f172a; }
.bq-ref--manuscrit { --c: #a8441b; --t: #fff; } .bq-ref--rapport { --c: #5b4a8b; --t: #fff; } .bq-ref--guide { --c: #cfe8c9; --t: #0f172a; }
.bq-ref--texte { --c: #f3c3a9; --t: #0f172a; } .bq-ref--donnees { --c: #a9c4e6; --t: #0f172a; }
.bq-ref__corps.a-couverture { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.bq-ref__corps p { margin: 0; }
.bq-ref__vignette img { display: block; width: 62px; height: 82px; object-fit: cover; border-radius: 3px; box-shadow: 0 4px 10px rgba(var(--rgb-bleu), .18); background-color: var(--plaque); }
.bq-ref__auteurs { font: 700 13px/1.3 var(--font-interface); letter-spacing: .04em; text-transform: uppercase; color: var(--brand-accent); }
.bq-ref__titre { margin: 4px 0 !important; font: 400 19px/1.3 var(--font-editorial); color: var(--ink); }
.bq-ref__support { font-size: 14px; color: var(--muted); }
.bq-ref__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.bq-ref__actions a { font: 700 14px/1.2 var(--font-interface); color: var(--brand-primary); }
.bq-ref__copier { appearance: none; border: 0; background: none; padding: 0; font: 700 14px/1.2 var(--font-interface); color: var(--muted); text-decoration: underline dotted; cursor: pointer; }
.bq-ref__copier.est-copie { color: var(--brand-primary); text-decoration: none; }
@media (max-width: 900px) { .bq-biblio { padding: 18px 16px 22px; } .bq-rayon { padding: 0 10px; border-width: 10px 10px 0; } .bq-rayon__livres { margin: 0 -10px; padding: 0 10px; } .bq-rayon__livres > li.bq-rayon__deco { display: none; }
  .bq-biblio__liste { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .bq-dos { transition: none; } .bq-ref:target { animation: none; } }
@media print { .bq-rayon { display: none; } .bq-ref { break-inside: avoid; box-shadow: none; } }

/* Disposition horizontale (prototype) */
body[data-disposition="horizontale"] .bq-depliage { display: none; }
/* les onglets passent à la ligne plutôt que de cacher le dernier hors de l'écran, sans indice (téléphone) */
.bq-ong { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 4px; margin: 0 0 12px; }
.bq-ong button { flex: none; display: inline-flex; align-items: center; gap: 8px; appearance: none; padding: 8px 16px 8px 10px; border: 2px solid var(--line-strong); border-radius: 999px; background-color: var(--paper-bright); font: 700 14px/1.2 var(--font-interface); color: var(--brand-primary); cursor: pointer; transition: background-color 200ms, color 200ms, border-color 200ms; }
.bq-ong button i { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background-color: var(--surface-tint); font-style: normal; font-size: 12px; }
.bq-ong button:hover { border-color: var(--brand-primary); }
.bq-ong button[aria-selected="true"] { background-color: var(--brand-fill); border-color: var(--brand-primary); color: var(--on-fill); }
.bq-ong button[aria-selected="true"] i { background-color: var(--brand-focus); color: var(--on-focus); }
/* Le panneau actif reste dans le flux et donne sa hauteur ; les autres glissent par-dessus, hors flux. */
.bq-ong__piste { position: relative; overflow: clip; }
/* une colonne à la largeur du panneau : en « auto », elle prenait la largeur minimale du rail des fiches (696 px dans un panneau de
   318 px sur téléphone), et le panneau coupait la fiche ouverte (réaudit de Codex du 7 octobre, N2) */
.bq-ong__p { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 2px; transition: transform 420ms var(--ease-out), opacity 320ms var(--ease-out), visibility 0s linear 420ms; }
.bq-ong__p:not(.est-actif) { position: absolute; top: 0; left: 0; width: 100%; visibility: hidden; opacity: 0; pointer-events: none; }
.bq-ong__p.est-avant { transform: translateX(-24%); }
.bq-ong__p.est-apres { transform: translateX(24%); }
.bq-ong__p.est-actif { position: relative; transform: none; opacity: 1; transition-delay: 0s; }
.bq-ong__p > .bq-bloc:first-child:not(.bq-outil) { border-top: 0; padding-top: 0; margin-top: 0; }
.bq-ong__p > .bq-bloc:first-child:not(.bq-outil) > .bq-bloc__titre { display: none; }
.bq-ong__ensuite { justify-self: end; appearance: none; border: 0; background: none; padding: 4px 0; font: 700 14px/1.2 var(--font-interface); color: var(--brand-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bq-ong__p { transition: none; } }

/* Les rails */
.bq-rail { position: relative; }
body[data-disposition="horizontale"] .bq-fichier__g, body[data-disposition="horizontale"] .bq-ressources {
  display: flex; align-items: flex-start; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding: 14px 4px 14px; scrollbar-width: thin; }
body[data-disposition="horizontale"] .bq-fichier__g > details { flex: 0 0 260px; scroll-snap-align: start; transition: flex-basis 380ms var(--ease-out); }
body[data-disposition="horizontale"] .bq-fichier__g > details[open] { flex-basis: min(760px, 88%); grid-column: auto; }
body[data-disposition="horizontale"] .bq-ressources > * { flex: 0 0 240px; scroll-snap-align: start; }
.bq-rail__f { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border: 2px solid var(--brand-primary); border-radius: 50%; background-color: var(--paper-bright); box-shadow: 0 4px 12px rgba(var(--rgb-bleu), .18); font: 700 18px/1 var(--font-interface); color: var(--brand-primary); cursor: pointer; }
.bq-rail__f[hidden] { display: none; }
.bq-rail__pos { height: 4px; margin: 2px 4px 0; border-radius: 2px; background-color: var(--line); overflow: hidden; }
.bq-rail__pos[hidden] { display: none; }
.bq-rail__pos span { display: block; height: 100%; border-radius: 2px; background-color: var(--brand-focus); transition: margin-left 120ms linear; color: var(--on-focus); }
body[data-disposition="horizontale"] .bq-ressources.bq-grille-longue { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); overflow: visible; }
body[data-disposition="horizontale"] .bq-ressources.bq-grille-longue > [hidden] { display: none; }
.bq-voir-plus { justify-self: start; margin-top: 10px; appearance: none; border: 2px solid var(--brand-primary); border-radius: 999px; padding: 6px 14px; background-color: var(--paper-bright); font: 700 13px/1 var(--font-interface); color: var(--brand-primary); cursor: pointer; }
.bq-ong button:focus-visible, .bq-rail__f:focus-visible, .bq-voir-plus:focus-visible, .bq-ong__ensuite:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
.bq-rail__f--g { left: -22px; } .bq-rail__f--d { right: -22px; }  /* dans la marge : posées dans la rangée, elles couvraient la dernière carte */
@media (max-width: 900px) { .bq-rail__f { display: none; } body[data-disposition="horizontale"] .bq-fichier__g > details[open] { flex-basis: 92%; } }
/* À l'impression : les panneaux l'un sous l'autre, les rails en grille, rien de replié */
@media print {
  .bq-ong, .bq-ong__ensuite, .bq-rail__f, .bq-rail__pos, .bq-voir-plus { display: none !important; }
  .bq-ong__p, .bq-ong__p:not(.est-actif) { position: static !important; width: auto !important; visibility: visible !important; opacity: 1 !important; transform: none !important; }
  .bq-ong__p + .bq-ong__p { margin-top: 24px; }
  body[data-disposition="horizontale"] .bq-fichier__g, body[data-disposition="horizontale"] .bq-ressources { flex-wrap: wrap; overflow: visible; }
  body[data-disposition="horizontale"] .bq-fichier__g > details, body[data-disposition="horizontale"] .bq-fichier__g > details[open] { flex: 1 1 100%; }
  body[data-disposition="horizontale"] .bq-ressources.bq-grille-longue > [hidden] { display: block !important; }
}