/* 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 du site ===== */
/* Études · Des réponses libres : la colonne de réponses, les thèmes et leurs comptes, un thème expliqué */
.sc-rl { display: grid; gap: 12px; }
.sc-rl__haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sc-rl__col { display: grid; gap: 8px; position: relative; }
.sc-rl__k { margin: 0; font: 800 12px/1.3 var(--font-interface); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary); }
.sc-rl__pile { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sc-rl__pile li { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background-color: var(--paper-bright); font-size: 13.5px; line-height: 1.4;
  box-shadow: 0 2px 0 var(--line); }
.sc-rl__col { container-type: inline-size; }
/* « NOMS MASQUÉS, EN LOCAL » : un bloc, pas un mot coupé ; son corps suit la colonne, et au plus étroit il passe sur deux lignes
   dans un seul cadre (en ligne, le cadre se cassait au retour à la ligne, « LOCAL » sous le trait : retour de Nicolas) */
.sc-rl__tampon .sc-tampon { position: static; display: inline-block; max-width: 100%; padding: 5px 10px; white-space: normal; text-align: center; line-height: 1.15; letter-spacing: .05em; font-size: 14px; font-size: clamp(12px, 6.4cqi, 18px); }
.sc-rl__themes { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sc-rl__theme { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: baseline; font-size: 14px; }
.sc-rl__theme b { font: 700 15px/1 var(--font-interface); color: var(--brand-primary); font-variant-numeric: tabular-nums; }
.sc-rl__barre { grid-column: 1 / -1; height: 8px; border-radius: 4px; background-color: var(--line); overflow: hidden; }
.sc-rl__barre i { display: block; width: var(--v); height: 100%; border-radius: 4px; background-color: var(--brand-fill); }
.sc-rl__note { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.sc-rl__meca { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--brand-primary); background-color: var(--paper-bright); }
.sc-rl__roles { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sc-rl__role { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: baseline; padding-left: 10px; border-left: 3px solid var(--brand-focus); font-size: 14px; line-height: 1.4; }
.sc-rl__role--2 { border-left-color: var(--brand-primary); } .sc-rl__role--3 { border-left-color: var(--ep-blue); }
.sc-rl__role b { font: 800 12px/1.3 var(--font-interface); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.sc-rl__lecon { margin: 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 560px) { .sc-rl__haut { grid-template-columns: minmax(0, 1fr); } }
/* Le parcours */
.sc-parcours { display: grid; gap: 16px; }
.sc-parcours__chemin { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 18px 0 0; list-style: none; }
.sc-parcours__chemin::before { content: ""; position: absolute; left: 6%; right: 6%; top: 30px; height: 4px; border-radius: 2px; background-image: repeating-linear-gradient(90deg, var(--brand-primary) 0 14px, transparent 14px 22px); }
.sc-parcours__station { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; }
.sc-parcours__point { position: relative; width: 26px; height: 26px; border-radius: 50%; background-color: var(--brand-fill); box-shadow: 0 0 0 6px var(--paper-bright); }
.sc-parcours__station b { font: 400 19px/1.2 var(--font-editorial); color: var(--brand-primary); }
.sc-parcours__station small { font-size: 13px; color: var(--muted); }
.sc-parcours__tampon { position: static !important; margin-top: 6px; }
/* Quatre stations dans une colonne de 480 px : un tampon de 18 px (141 px pour DISTANCE) débordait sur sa voisine (retour
   extérieur du 5 octobre). Le corps des titres et des tampons suit la largeur du chemin ; au-delà, il garde sa taille. */
.sc-parcours__chemin { container-type: inline-size; }
.sc-parcours__station b { font-size: clamp(15px, 3.7cqi, 19px); }
.sc-parcours .sc-parcours__tampon { max-width: 100%; padding: 5px 9px; border-width: 3px; letter-spacing: .05em; font-size: 14px; font-size: clamp(12px, 2.7cqi, 18px); }
.sc-parcours__rupture { display: block; font: italic 400 14px/1.3 var(--font-editorial); color: var(--data-warm-texte); }
.sc-parcours__bulles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-parcours__voix { position: relative; padding: 10px 14px; border-radius: 14px 14px 14px 2px; background-color: var(--paper-bright); border: 2px solid var(--line-strong); font: italic 400 16px/1.35 var(--font-editorial); }
.sc-parcours__lecon, .sc-rac__lecon, .sc-dens__lecon { margin: 0; padding: 12px 16px; border-left: 4px solid var(--brand-focus); background-color: var(--paper-bright); font: 400 17px/1.45 var(--font-editorial); }
/* Les restes à charge */
.sc-rac { display: grid; gap: 14px; }
.sc-rac__axe { position: relative; height: 120px; margin: 6px 24px 0 6px; }
.sc-rac__regle { position: absolute; left: 0; right: 0; top: 70px; height: 6px; border-radius: 3px; background-image: linear-gradient(90deg, var(--brand-focus), var(--brand-primary) 45%, var(--data-warm)); }
.sc-rac__zero { position: absolute; left: 0; top: 84px; font: 700 13px/1 var(--font-interface); color: var(--muted); }
.sc-rac__repere { position: absolute; left: calc(var(--x) * 100%); top: 0; transform: translateX(-50%); display: grid; justify-items: center; text-align: center; white-space: nowrap; }
.sc-rac__repere::after { content: ""; width: 3px; height: 30px; margin-top: 4px; background-color: currentColor; }
.sc-rac__repere b { font: 400 28px/1 var(--font-editorial); }
.sc-rac__repere small { font: 700 12px/1.2 var(--font-interface); text-transform: uppercase; letter-spacing: .08em; }
.sc-rac__repere--med { color: var(--brand-primary); } .sc-rac__repere--moy { color: var(--data-warm-texte); } .sc-rac__repere--d9 { color: var(--ink); transform: translateX(-90%); }
.sc-rac__renonce { padding: 14px 16px; border-radius: 10px; background-color: var(--paper-bright); border: 2px solid var(--line-strong); }
.sc-rac__renonce p { margin: 0 0 10px; font: 400 18px/1.35 var(--font-editorial); } .sc-rac__renonce p b { font-size: 26px; color: var(--data-warm-texte); }
.sc-rac__barres { display: grid; gap: 8px; }
.sc-rac__barres span { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 54px; align-items: center; min-height: 34px; padding: 0 10px; border-radius: 6px; background-color: var(--surface-tint); overflow: hidden; }
.sc-rac__barres span::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background-color: rgba(var(--rgb-warm), .28); }
.sc-rac__barres i, .sc-rac__barres b { position: relative; } .sc-rac__barres i { font: normal 400 15px/1.2 var(--font-interface); } .sc-rac__barres b { font: 400 20px/1 var(--font-editorial); text-align: right; }
.sc-rac__tampon { justify-self: end; }
.sc-rac__tampon .sc-tampon, .sc-dens__tampon .sc-tampon, .sc-conf__tampon .sc-tampon, .sc-consult__tampon .sc-tampon { position: static; }
/* Les sept étapes */
.sc-sept { display: grid; gap: 12px; }
.sc-sept__frise { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-sept__case { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 10px; background-color: var(--paper-bright); border: 2px solid var(--line-strong); text-align: center; }
.sc-sept__case b { font: 400 16px/1.2 var(--font-editorial); color: var(--brand-primary); }
.sc-sept__frise { container-type: inline-size; }  /* sept cases de 64 px : « Le protocole » et « L'analyse » débordaient */
.sc-sept__case { padding-inline: 2px; } .sc-sept__case b { font-size: clamp(12px, 2.5cqi, 16px); }
.sc-sept__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background-color: var(--brand-fill); color: var(--on-fill); font: 700 15px/1 var(--font-interface); }
.bq-demo[data-etat="a1"] .sc-sept__case--1, .bq-demo[data-etat="a2"] .sc-sept__case--2, .bq-demo[data-etat="a3"] .sc-sept__case--3, .bq-demo[data-etat="a4"] .sc-sept__case--4, .bq-demo[data-etat="a5"] .sc-sept__case--5 { border-color: var(--brand-primary); background-color: var(--surface-tint); }
.sc-sept__qui--vous > span:first-child, .sc-sept__qui .sc-sept__vous { background-color: var(--warm-doux); }  /* ce qui revient au client : la question, la validation */
.sc-sept__vous { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 700 13px/1.4 var(--font-interface); color: var(--ink); }
.sc-sept__qui { margin: 0; font: 400 17px/1.4 var(--font-editorial); }
.sc-sept__qui span { display: inline-block; margin-right: 6px; padding: 2px 10px; border-radius: 999px; background-color: var(--brand-focus); font: 700 13px/1.4 var(--font-interface); color: var(--on-focus); }
.sc-sept__qui--fin span { background-color: var(--warm-moyen); }
/* Le guide d'entretien */
.sc-guide { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sc-guide .sc-note { grid-column: 1 / -1; }
.sc-guide__feuille { padding: 18px 18px 14px 46px; border-radius: 4px; background-color: var(--paper-bright); box-shadow: 0 1px 0 var(--line-strong), 0 8px 18px rgba(var(--rgb-bleu), .09); background-image: linear-gradient(90deg, transparent 32px, rgba(var(--rgb-warm), .35) 32px, rgba(var(--rgb-warm), .35) 34px, transparent 34px); }
.sc-guide__q { margin: 0 0 10px; font: 400 18px/1.35 var(--font-editorial); }
.sc-guide__q--faible { color: var(--muted); text-decoration: line-through; }
.sc-guide__q--neuf { color: var(--brand-primary); }
.sc-guide__marge { margin: -4px 0 10px; padding: 6px 10px; border-radius: 6px; background-color: #fff6d6; font: italic 400 15px/1.35 var(--font-editorial); transform: rotate(-1deg); }
.sc-guide__temps, .sc-conf__temps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: t; }
.sc-guide__temps li, .sc-conf__temps li { counter-increment: t; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; padding: 10px 12px; border-radius: 10px; background-color: var(--paper-bright); border: 2px solid var(--line-strong); }
.sc-guide__temps li::before, .sc-conf__temps li::before { content: counter(t); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background-color: var(--brand-fill); color: var(--on-fill); font: 700 14px/1 var(--font-interface); }
.sc-guide__temps b, .sc-conf__temps b { font: 400 18px/1.2 var(--font-editorial); color: var(--brand-primary); }
.sc-guide__temps span, .sc-conf__temps span { font-size: 14px; color: var(--muted); }
.sc-guide__tampon { position: absolute !important; right: 10px; top: -8px; }
/* La conférence */
.sc-conf { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: center; }
.sc-conf__scene { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; padding: 64px 18px 18px; border-radius: 12px; background-color: var(--brand-fill); min-height: 220px; }
.sc-conf__pupitre { position: absolute; left: 50%; top: 14px; width: 70px; height: 34px; margin-left: -35px; border-radius: 6px 6px 0 0; background-color: var(--brand-focus); color: var(--on-focus); }
.sc-conf__tete { justify-self: center; width: 34px; height: 34px; border-radius: 50% 50% 8px 8px; background-color: rgba(var(--rgb-papier), .85); }
.sc-conf__tampon { position: absolute; right: 0; bottom: -10px; }
/* L'effectif et la densité */
.sc-dens { display: grid; gap: 14px; }
.sc-dens__bloc { display: grid; gap: 8px; }
.sc-dens__l { display: grid; grid-template-columns: 150px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font: 700 14px/1.2 var(--font-interface); }
.sc-dens__piste { height: 22px; border-radius: 4px; background-color: var(--paper-bright); overflow: hidden; }
.sc-dens__v { display: block; height: 100%; width: calc(var(--v) * 100%); background-color: var(--ep-blue); transform-origin: left; }
.sc-dens__l b { font: 400 22px/1 var(--font-editorial); text-align: right; }
.sc-dens__limites { display: flex; flex-wrap: wrap; gap: 8px; } .sc-dens__limites span { padding: 6px 12px; border-radius: 999px; border: 2px dashed var(--data-warm); font: italic 400 16px/1.2 var(--font-editorial); }
.sc-dens__tampon { justify-self: end; }
/* La consultation */
.sc-consult { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sc-consult .sc-note { grid-column: 1 / -1; }
.sc-consult__phrase, .sc-consult__relance { margin: 0 0 8px; padding: 10px 14px; border-radius: 14px 14px 14px 2px; background-color: var(--paper-bright); border: 2px solid var(--line-strong); font: italic 400 17px/1.35 var(--font-editorial); }
.sc-consult__relance { border-radius: 14px 14px 2px 14px; margin-left: 30px; border-color: var(--brand-primary); }
.sc-consult__signaux { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sc-consult__signal { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 10px; border-left: 4px solid var(--data-warm); background-color: var(--warm-pale); }
.sc-consult__signal b { font: 700 13px/1.2 var(--font-interface); text-transform: uppercase; letter-spacing: .06em; color: var(--data-warm-texte); }
.sc-consult__signal span { font: italic 400 15px/1.3 var(--font-editorial); }
.sc-consult__fiche { padding: 16px; 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); }
.sc-consult__fiche ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.sc-consult__tampon { justify-self: end; grid-column: 2; }
/* Classer, ou analyser */
.sc-ca { position: relative; display: grid; gap: 12px; }
.sc-ca__verbatim { margin: 0; padding: 12px 16px; border-radius: 4px; background-color: var(--paper-bright); box-shadow: 0 1px 0 var(--line-strong), 0 8px 18px rgba(var(--rgb-bleu), .09); font: italic 400 18px/1.5 var(--font-editorial); }
.sc-ca__u { transition: background-color 400ms ease-out, box-shadow 400ms ease-out; }
.bq-demo[data-etat="a3"] .sc-ca__u--1, .bq-demo[data-etat="a4"] .sc-ca__u--1 { background-color: rgba(83,205,212,.3); }
.bq-demo[data-etat="a3"] .sc-ca__u--2, .bq-demo[data-etat="a4"] .sc-ca__u--2 { background-color: rgba(var(--rgb-bleu), .14); }
.bq-demo[data-etat="a3"] .sc-ca__u--3, .bq-demo[data-etat="a4"] .sc-ca__u--3 { background-color: rgba(var(--rgb-warm), .18); }
.sc-ca__deux { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 12px; align-items: start; }
.sc-ca__classe, .sc-ca__analyse { padding: 12px 14px; border-radius: 12px; background-color: var(--paper-bright); border: 2px solid var(--line-strong); }
.sc-ca__analyse { border-color: var(--brand-primary); }
.sc-ca__k { margin: 0 0 8px; font: 800 12px/1.3 var(--font-interface); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sc-ca__analyse .sc-ca__k { color: var(--brand-primary); }
.sc-ca__case { display: inline-block; margin: 0; padding: 6px 12px; border: 2px dashed var(--line-strong); border-radius: 8px; font: 700 15px/1.3 var(--font-interface); }
.sc-ca__compte { margin: 8px 0 0; font-size: 14px; } .sc-ca__compte b { font: 400 24px/1 var(--font-editorial); color: var(--brand-primary); }
.sc-ca__dit { margin: 8px 0 0; font: italic 400 15px/1.4 var(--font-editorial); color: var(--muted); }
.sc-ca__enrichi { margin: 0 0 10px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.sc-ca__enrichi li { padding: 3px 9px; border-radius: 999px; background-color: var(--surface-tint); font-size: 13px; }
.sc-ca__enrichi span { margin-right: 5px; font: 800 11px/1 var(--font-interface); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-primary); }
.sc-ca__unites { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sc-ca__idee { margin: 0; font: 700 16px/1.4 var(--font-interface); color: var(--brand-primary); }
.sc-ca__m { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: .3em; border: 1.5px solid currentColor; border-radius: 50%;
  font: 700 .62em/1 var(--font-interface); font-style: normal; letter-spacing: 0; vertical-align: .15em; }
.sc-ca__unite { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 10px; align-items: baseline; padding: 6px 8px; border-radius: 8px; border-left: 4px solid var(--brand-focus); background-color: var(--paper-bright); }
.sc-ca__unite--2 { border-left-color: var(--brand-primary); } .sc-ca__unite--3 { border-left-color: var(--data-warm); }
.sc-ca__unite b { white-space: nowrap; font: 800 12px/1.3 var(--font-interface); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.sc-ca__unite span { font-size: 14px; line-height: 1.35; }
.sc-ca__unite small { grid-column: 2; font: italic 400 13px/1.3 var(--font-editorial); color: var(--muted); }
.sc-ca__lecon { margin: 0; padding: 10px 14px; border-left: 4px solid var(--brand-focus); background-color: var(--paper-bright); font: 400 16px/1.45 var(--font-editorial); }
.sc-ca__tampon { justify-self: end; } .sc-ca__tampon .sc-tampon { position: static; }
/* Le sommaire d'un rapport */
.sc-som { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 14px 18px; align-items: start; }
.sc-som__couv { display: grid; align-content: start; gap: 6px; min-height: 230px; padding: 18px 16px; border-radius: 4px 12px 12px 4px; background-color: var(--brand-fill); color: var(--on-fill);
  box-shadow: inset 6px 0 0 rgba(0,0,0,.18), 0 12px 22px -14px rgba(var(--rgb-encre), .5); }
.sc-som__k { margin: 0; font: 800 11px/1.3 var(--font-interface); letter-spacing: .14em; text-transform: uppercase; color: #c9f3f5; }
.sc-som__titre { margin: 0; font: 400 22px/1.15 var(--font-editorial); }
.sc-som__sous { margin: auto 0 0; font-size: 13px; color: #dbe7f5; }
.sc-som__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sc-som__ligne { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; align-items: baseline; padding: 7px 10px; border-radius: 8px; background-color: var(--paper-bright); border: 1px solid var(--line-strong); }
.sc-som__n { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background-color: var(--brand-focus); font: 700 13px/1 var(--font-interface); color: var(--on-focus); }
.sc-som__ligne b { font: 400 17px/1.25 var(--font-editorial); color: var(--brand-primary); }
.sc-som__ligne small { font-size: 13px; line-height: 1.35; color: var(--muted); }
.sc-som__plein { grid-column: 1 / -1; } .sc-som__lecon { margin: 0; padding: 10px 14px; border-left: 4px solid var(--brand-focus); background-color: var(--paper-bright); font: 400 16px/1.45 var(--font-editorial); }
.sc-som .sc-note { grid-column: 1 / -1; }
/* L'étude séquentielle */
.sc-seq { display: grid; gap: 12px; }
.sc-seq__phases { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); gap: 12px; align-items: start; }
.sc-seq__phase { padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line-strong); background-color: var(--paper-bright); }
.sc-seq__p2 .sc-seq__phase { border-color: var(--brand-primary); }
.sc-seq__k { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 800 12px/1.3 var(--font-interface); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary); }
.sc-seq__k i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--brand-fill); color: var(--on-fill); font-style: normal; letter-spacing: 0; }
.sc-seq ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sc-seq__voix { display: block; font: italic 400 16px/1.35 var(--font-editorial); }
.sc-seq__dim { display: inline-block; margin-top: 3px; padding: 1px 9px; border-radius: 999px; background-color: var(--brand-focus); font: 700 12px/1.5 var(--font-interface); color: var(--on-focus); }
.sc-seq__item { display: block; font-size: 14px; line-height: 1.35; }
.sc-seq__mesure { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center; gap: 8px; margin-top: 4px; }
.sc-seq__barre { height: 10px; border-radius: 5px; background-color: var(--line); overflow: hidden; }
.sc-seq__barre i { display: block; width: var(--v); height: 100%; border-radius: 5px; background-color: var(--brand-fill); }
.sc-seq__mesure b { font: 700 14px/1 var(--font-interface); color: var(--brand-primary); text-align: right; }
.sc-seq__fleche { display: grid; place-items: center; align-self: center; width: 36px; height: 36px; border-radius: 50%; background-color: var(--brand-focus); font: 700 18px/1 var(--font-interface); color: var(--on-focus); }
.sc-seq__lecon { margin: 0; padding: 10px 14px; border-left: 4px solid var(--brand-focus); background-color: var(--paper-bright); font: 400 16px/1.45 var(--font-editorial); }
/* La question choisit la méthode */
.sc-meth { position: relative; display: grid; gap: 12px; }
.sc-meth__rangs { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.sc-meth__rang { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); align-items: center; gap: 12px 40px; }
.sc-meth__q { margin: 0; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background-color: var(--paper-bright); box-shadow: 0 1px 0 var(--line-strong), 0 8px 18px rgba(var(--rgb-bleu), .09); font: italic 400 18px/1.35 var(--font-editorial); }
.sc-meth__m { position: relative; display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 4px 14px; padding: 10px 14px; border: 2px solid var(--brand-primary); border-radius: 12px; background-color: var(--paper-bright); }
.sc-meth__m::before { content: ""; position: absolute; right: calc(100% + 10px); top: 50%; width: 22px; border-top: 2px solid var(--brand-primary); }
.sc-meth__m::after { content: ""; position: absolute; right: calc(100% + 3px); top: calc(50% - 6px); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 9px solid var(--brand-primary); }
.sc-meth__nom { grid-row: span 2; align-self: center; display: grid; gap: 2px; margin: 0; }
.sc-meth__nom b { font: 400 23px/1.1 var(--font-editorial); letter-spacing: -.01em; color: var(--brand-primary); }
.sc-meth__nom span { font-size: 13px; line-height: 1.35; color: var(--muted); }
.sc-meth__dit { margin: 0; font-size: 14px; line-height: 1.4; }
.sc-meth__dit i { display: inline-block; margin-right: 6px; font: 800 11px/1.2 var(--font-interface); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary); }
.sc-meth__dit--non { color: var(--muted); } .sc-meth__dit--non i { color: var(--muted); }
.sc-meth__lecon { margin: 0; padding: 10px 14px; border-left: 4px solid var(--brand-focus); background-color: var(--paper-bright); font: 400 16px/1.45 var(--font-editorial); }
.sc-meth__tampon { justify-self: end; margin-top: -4px; }
/* La chaîne de preuve (ExpectQuali) */
.sc-preuve { position: relative; display: grid; gap: 10px; }
.sc-preuve__qui { display: block; margin-bottom: 4px; font: 800 12px/1.2 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sc-preuve__extrait { margin: 0; padding: 14px 16px; border-radius: 4px; background-color: var(--paper-bright); box-shadow: 0 1px 0 var(--line-strong), 0 8px 18px rgba(var(--rgb-bleu), .09); font: italic 400 18px/1.45 var(--font-editorial); }
.sc-preuve__ancre { transition: background-color 400ms ease-out, box-shadow 400ms ease-out; }
.bq-demo[data-etat="a2"] .sc-preuve__ancre, .bq-demo[data-etat="a3"] .sc-preuve__ancre { background-color: rgba(83,205,212,.32); box-shadow: 0 2px 0 var(--brand-primary); }
.sc-preuve__prop, .sc-preuve__ctrl, .sc-preuve__decision { padding: 10px 14px; border-radius: 10px; border: 2px solid var(--line-strong); background-color: var(--paper-bright); font-size: 15px; line-height: 1.45; }
.sc-preuve__prop { border-style: dashed; margin-right: 22%; } .sc-preuve__prop b { font: 400 19px/1.3 var(--font-editorial); }
.sc-preuve__ctrl { margin-left: 8%; border-left: 4px solid var(--data-warm); }
.sc-preuve__decision { border-color: var(--brand-primary); } .sc-preuve__decision s { color: var(--muted); } .sc-preuve__decision b { font: 400 19px/1.3 var(--font-editorial); color: var(--brand-primary); }
.sc-preuve__trace { margin: 0; padding: 10px 14px; border-left: 4px solid var(--brand-focus); background-color: var(--paper-bright); font: 400 16px/1.45 var(--font-editorial); }
.sc-preuve__tampon { justify-self: end; }
/* Une base de verbatims (ExpectQuali) */
.sc-base { position: relative; display: grid; gap: 10px; }
/* Études · Protéger les personnes : quatre stations, une phrase dont les noms tombent, la leçon */
.sc-prot { display: grid; gap: 12px; }
.sc-prot__chemin { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: p; }
.sc-prot__station { counter-increment: p; display: grid; align-content: start; gap: 4px; padding: 12px 12px 14px; border-radius: 8px; border-top: 3px solid var(--brand-primary);
  background-color: var(--paper-bright); box-shadow: 0 1px 0 var(--line-strong); }
.sc-prot__station b { font: 700 15px/1.3 var(--font-interface); color: var(--brand-primary); }
.sc-prot__station b::before { content: counter(p) " · "; color: var(--muted); }
.sc-prot__station span { font-size: 14px; line-height: 1.45; color: var(--ink); }
.sc-prot__dit { margin: 0; padding: 10px 14px; border-left: 4px solid var(--brand-focus); background-color: var(--paper-bright); font: italic 400 17px/1.5 var(--font-editorial); color: var(--ink); }
.sc-prot__dit small { display: block; margin-bottom: 4px; font: 700 12px/1.3 var(--font-interface); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sc-prot__lecon { margin: 0; font: 400 16px/1.45 var(--font-editorial); color: var(--ink); }
.sc-prot__tampon { justify-self: end; max-width: 100%; } .sc-prot__tampon .sc-tampon { position: static; display: inline-block; max-width: 100%; white-space: normal; text-align: center; }  /* dans le flux, comme les autres scènes : en absolu, il sortait du cadre */
@media (max-width: 760px) { .sc-prot__chemin { grid-template-columns: minmax(0, 1fr); } }
.sc-base__lignes { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: l; }
.sc-base__ligne { counter-increment: l; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 7px 10px 7px 40px; position: relative; border-radius: 6px; background-color: var(--paper-bright); border: 1px solid var(--line-strong); font: 400 15px/1.4 var(--font-interface); }
.sc-base__ligne::before { content: counter(l); position: absolute; left: 10px; top: 8px; font: 700 12px/1.2 var(--font-interface); color: var(--muted); }
.sc-base__texte { flex: 1 1 220px; }
.sc-base__marque { padding: 0 4px; border-radius: 4px; background-color: var(--surface-tint); font: 700 13px/1.4 var(--font-interface); color: var(--brand-primary); }
/* Une ligne exclue se marque par son fond, un filet et le barré ; plus par l'opacité, qui pâlissait aussi la raison de
   l'exclusion (2,81:1 à 12 px, audit de Codex du 5 octobre) : c'est une explication, pas une commande désactivée */
.bq-demo:is([data-etat="a2"], [data-etat="a3"]) .sc-base__ligne--exclue { background-color: var(--warm-pale); box-shadow: inset 3px 0 0 var(--data-warm); }
.bq-demo:is([data-etat="a2"], [data-etat="a3"]) .sc-base__ligne--exclue .sc-base__texte { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(var(--rgb-warm), .7); }
.sc-base__exclu { font: 700 12px/1.3 var(--font-interface); color: var(--warm-fonce); }
.sc-base__th { padding: 1px 8px; border-radius: 999px; background-color: var(--brand-focus); font: 700 12px/1.4 var(--font-interface); color: var(--on-focus); }
.sc-base__n, .sc-base__themes { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.sc-base__n b { font: 400 22px/1 var(--font-editorial); color: var(--brand-primary); } .sc-base__themes b { font: 400 18px/1 var(--font-editorial); color: var(--brand-primary); margin-left: 4px; }
.sc-base__lecon { margin: 0; padding: 10px 14px; border-left: 4px solid var(--brand-focus); background-color: var(--paper-bright); font: 400 16px/1.45 var(--font-editorial); }
.sc-base__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.sc-base__swap { display: inline-grid; } .sc-base__swap > * { grid-area: 1 / 1; }
.vt-chap .bq-demo .sc-base__swap > .cq-entre { opacity: var(--actif); }  /* un échange : la marque prend la place du nom, sans filigrane par-dessus */
.bq-demo:not([data-etat=""]) .sc-base__avant { display: none; } .bq-demo[data-etat=""] .sc-base__marque { visibility: hidden; }
.sc-meth__tampon .sc-tampon, .sc-preuve__tampon .sc-tampon, .sc-base__tampon .sc-tampon { position: static; }
/* Une scène ne s'élargit jamais au-delà de son cadre : ses colonnes peuvent rétrécir, ses tampons passer à la ligne */
.sc-parcours, .sc-rac, .sc-sept, .sc-dens { grid-template-columns: minmax(0, 1fr); }
.sc-rac__legende { display: none; margin: -6px 0 0; font: 700 12px/1.3 var(--font-interface); color: var(--muted); }
@media (max-width: 760px) {
  .sc-ca .sc-tampon { display: inline-block; white-space: normal; max-width: 100%; text-align: center; font-size: 15px; line-height: 1.15; }  /* un bloc : en ligne, le cadre se cassait au retour à la ligne */ .sc-ca > *, .sc-ca__deux > * { min-width: 0; }
  .sc-ca__deux, .sc-som { grid-template-columns: minmax(0, 1fr); } .sc-som__couv { min-height: 0; } .sc-ca__unite { grid-template-columns: minmax(0, 1fr); } .sc-ca__unite small { grid-column: auto; }
  .sc-seq__phases { grid-template-columns: minmax(0, 1fr); } .sc-seq__fleche { transform: rotate(90deg); justify-self: center; }
  .sc-meth__rang { grid-template-columns: minmax(0, 1fr); gap: 6px; } .sc-meth__m { grid-template-columns: minmax(0, 1fr); margin-left: 18px; }
  .sc-meth__m::before { right: auto; left: -14px; top: -8px; width: 0; height: 22px; border-top: 0; border-left: 2px solid var(--brand-primary); } .sc-meth__m::after { display: none; }
  .sc-meth__nom { grid-row: auto; }
  .sc-rac .sc-tampon, .sc-dens .sc-tampon, .sc-conf .sc-tampon, .sc-consult .sc-tampon, .sc-guide .sc-tampon, .sc-parcours .sc-tampon, .sc-preuve .sc-tampon, .sc-base .sc-tampon { display: inline-block; max-width: 100%; white-space: normal; font-size: 13px; line-height: 1.15; text-align: center; }  /* un bloc : en ligne, le cadre se cassait à la ligne */
  .sc-rac__repere small { display: none; } .sc-rac__legende { display: block; }
  .sc-rac .sc-tampon, .sc-dens .sc-tampon, .sc-conf .sc-tampon, .sc-consult .sc-tampon, .sc-guide .sc-tampon, .sc-parcours .sc-tampon { display: inline-block; max-width: 100%; white-space: normal; text-align: center; }  /* un tampon long passe à la ligne au lieu de sortir de la scène */
  .sc-rac__axe { height: 150px; } .sc-rac__regle { top: 100px; } .sc-rac__zero { top: 114px; }
  .sc-rac__repere { top: 30px; } .sc-rac__repere b { font-size: 18px; }
  .sc-rac__repere--moy { top: 0; } .sc-rac__repere--moy::after { height: 60px; }
  .sc-guide__tampon { position: static !important; justify-self: start; }
  .sc-preuve__prop { margin-right: 0; } .sc-preuve__ctrl { margin-left: 0; }
  .sc-parcours__chemin, .sc-sept__frise { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-parcours__chemin::before { display: none; }
  .sc-parcours__bulles, .sc-guide, .sc-conf, .sc-consult { grid-template-columns: minmax(0, 1fr); }
  .sc-dens__l { grid-template-columns: minmax(0, 1fr) 60px; } .sc-dens__l > span:first-child { grid-column: 1 / -1; }
  .sc-rac__repere b { font-size: 20px; } .sc-rac__axe { margin-right: 30px; } .sc-consult__tampon { grid-column: 1; }
}

/* Les réalisations (venues de prestations.py : elles vivent maintenant dans À propos, audit par personas du 6 octobre) */
@media (min-width: 1200px) { .st-realisations:has(> :last-child:nth-child(10)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }  /* 10 : deux rangées de cinq */
/* Ce que Nicolas a développé avec l'IA : une grille de cartes, une couleur de filet par famille */
.st-realisations { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.st-real { display: grid; align-content: start; gap: 6px; padding: 16px 18px; border-radius: 0 0 12px 12px; border-top: 4px solid var(--brand-primary); background-color: var(--paper-bright);
  box-shadow: 0 1px 0 var(--line-strong), 0 10px 22px -16px rgba(var(--rgb-encre), .3); }
.st-real--données-ouvertes { border-top-color: var(--brand-focus); } .st-real--outils { border-top-color: var(--ep-blue); } .st-real--création { border-top-color: var(--brand-focus); }
.st-real__k { font: 800 11px/1.3 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.st-real b { font: 400 21px/1.15 var(--font-editorial); color: var(--brand-primary); }
.st-real p { margin: 0; font-size: 14px; line-height: 1.45; }
.st-real a { justify-self: start; display: inline-flex; align-items: center; min-height: 36px; font: 700 14px/1.2 var(--font-interface); color: var(--brand-primary); }
/* ===== Blocs et outils du site ===== */
.st-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* toutes les cases d'un mur à la même hauteur, d'une ligne à l'autre : un nom écrit ne fait pas une case plus haute qu'un logo */
/* Les tuiles : un objet, un nom, une promesse, trois mots ; le filet alterne marine et turquoise */
.st-tuiles { margin: 22px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st-tuile { position: relative; display: grid; align-content: start; justify-items: start; gap: 6px; padding: 18px 18px 20px; border-top: 4px solid var(--brand-primary);
  border-radius: 0 0 14px 14px; background-color: var(--paper-bright); box-shadow: 0 1px 0 var(--line-strong), 0 12px 26px -18px rgba(var(--rgb-encre), .35);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
/* un seul filet : l'alternance bleu et turquoise ne voulait rien dire (audit par personas du 6 octobre) */
.st-tuile:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line-strong), 0 18px 30px -18px rgba(var(--rgb-encre), .42); }
.st-tuile__objet { width: 84px; height: 70px; margin-bottom: 4px; transition: transform 220ms var(--ease-out); }
.st-tuile:hover .st-tuile__objet { transform: rotate(-4deg) scale(1.05); }
.st-tuile > b { font: 400 24px/1.12 var(--font-editorial); letter-spacing: -.01em; color: var(--brand-primary); }
.st-tuile > i { font: italic 400 17px/1.35 var(--font-editorial); color: var(--ink); }
.st-tuile__mots { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.st-tuile__mots li { padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font: 600 13px/1.35 var(--font-interface); color: var(--ink); background-color: var(--paper-bright); }
.st-tuile__acquis { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.st-tuile__acquis li { position: relative; padding-left: 22px; font: 600 14px/1.35 var(--font-interface); }
.st-tuile__acquis li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--brand-focus-texte); }
.st-tuile__ligne { margin: 4px 0 0; font-size: 14px; line-height: 1.4; }
.st-tuile__ligne span { display: block; font: 800 11px/1.3 var(--font-interface); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.st-tuile__liens { margin: 8px 0 0; font: 700 14px/1.4 var(--font-interface); }
.st-tuile__liens a { color: var(--brand-primary); }
.st-tuile__badge { position: absolute; top: 14px; right: 14px; padding: 2px 9px; border-radius: 999px; background-color: var(--paper-bright); box-shadow: inset 0 0 0 1px var(--line-strong); font: 800 11px/1.5 var(--font-interface);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 1000px) { .st-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .st-tuiles { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .st-tuile, .st-tuile__objet { transition: none; } .st-tuile:hover { transform: none; } .st-tuile:hover .st-tuile__objet { transform: none; } }
/* La chaîne : des étapes numérotées sur un fil vertical, un verbe et une ligne */
.st-chaine { margin: 6px 0 18px; padding: 0; list-style: none; counter-reset: chaine; }
.st-chaine li { position: relative; display: grid; gap: 2px; padding: 0 0 16px 46px; counter-increment: chaine; }
.st-chaine li::before { content: counter(chaine); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background-color: var(--brand-fill); color: var(--on-fill); font: 700 14px/1 var(--font-interface); }
.st-chaine li:first-child::before { background-color: var(--brand-focus); color: var(--on-focus); }  /* l'anonymisation, avant tout */
.st-chaine li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background-color: var(--line-strong); }
.st-chaine b { font: 700 16px/1.35 var(--font-interface); color: var(--ink); }
.st-chaine span { font-size: 15px; line-height: 1.5; color: var(--muted); }
.st-logos { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.st-logos li { display: grid; place-items: center; min-height: 92px; padding: 14px 18px; border-radius: 12px; background-color: var(--paper-bright); border: 2px solid var(--line); overflow: hidden; container-type: inline-size; }
/* une base commune, prise sur la largeur de la case ; chaque logo en reçoit la même surface (--l), agrandi pour que sa marge ne compte pas (--s) */
.st-logos img { --base: clamp(42px, 22cqi, 76px); width: auto; height: auto; max-width: min(100%, calc(var(--base) * var(--l, 100))); max-height: 72px; object-fit: contain;
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--s, 1)); }
.st-logos__nom span { display: block; max-width: 100%; font: 700 clamp(12px, 13cqi, 22px)/1.15 var(--font-interface); letter-spacing: -.01em; color: var(--ink); text-align: center;
  overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 400px) { .st-logos li { padding: 12px 10px; } }
.st-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.st-photos figure { margin: 0; } .st-photos img { display: block; width: 100%; aspect-ratio: 4 / 3 !important; object-fit: cover; object-position: center 30%; border-radius: 10px; }  /* !important : la construction pose sur chaque image sa proportion d'origine ; un portrait au milieu de paysages ouvrait un trou */
.st-photos figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
.st-photos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .st-photos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .st-photos--4 { grid-template-columns: minmax(0, 1fr); } }
.st-chiffres dl { display: flex; flex-wrap: wrap; margin: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.st-chiffres dl > div { flex: 1 1 130px; display: flex; flex-direction: column-reverse; padding: 12px 16px 12px 0; }
.st-chiffres dl > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.st-chiffres dd { margin: 0; font: 400 38px/1 var(--font-editorial); color: var(--brand-primary); }
.st-chiffres dt { margin-top: 4px; font: 700 13px/1.3 var(--font-interface); color: var(--muted); }
.st-cat { display: grid; gap: 12px; }
.st-cat__barre { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.st-cherche, .st-select { display: grid; gap: 4px; font: 700 13px/1.2 var(--font-interface); color: var(--muted); }
.st-cherche input, .st-select select { min-height: 44px; padding: 0 12px; border: 2px solid var(--line-controle); border-radius: 8px; background-color: var(--paper-bright); font: 400 16px/1.2 var(--font-interface); color: var(--ink); }
.st-cherche input { min-width: 260px; }
.st-cherche input:focus, .st-select select:focus { outline: 3px solid var(--brand-primary); outline-offset: 1px; }
.st-filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.st-filtres button { min-height: 44px; padding: 0 14px; border: 2px solid var(--line-strong); border-radius: 999px; background-color: var(--paper-bright); font: 700 14px/1 var(--font-interface); color: var(--brand-primary); cursor: pointer; }
.st-filtres button[aria-pressed="true"] { background-color: var(--brand-fill); border-color: var(--brand-primary); color: var(--on-fill); }
.st-cat__compte { margin: 0; font: 700 13px/1.2 var(--font-interface); color: var(--muted); }
.st-cat__vide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 16px; border: 2px dashed var(--line-strong); border-radius: 10px; }
.st-cat__vide[hidden] { display: none; }
.st-cat__vide p { margin: 0; font: 400 19px/1.35 var(--font-editorial); }
.st-cat__vide button, .st-demande__repli button { min-height: 44px; padding: 0 14px; border: 2px solid var(--brand-primary); border-radius: 8px; background-color: var(--paper-bright); font: 700 14px/1 var(--font-interface); color: var(--brand-primary); cursor: pointer; }
.st-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.st-video[hidden], .st-chanson[hidden], .st-pub[hidden] { display: none; }
.st-video__ecran { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background-color: var(--brand-fill); }
.st-video__ecran:focus-within { outline: 3px solid var(--brand-primary); outline-offset: 2px; box-shadow: 0 0 0 6px var(--paper-bright); }  /* le contour du bouton, rogné par le cadre, passe au cadre */
.st-video__ecran button { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.st-video__ecran img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
.st-video__ecran button:hover img { transform: scale(1.04); }
.st-video__play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background-color: rgba(var(--rgb-navy), .9); box-shadow: 0 0 0 4px rgba(var(--rgb-papier), .85); }
.st-video__play::after { content: ""; position: absolute; left: 23px; top: 18px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--paper-bright); }
.st-video__ecran iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-video h3, .st-chanson h3 { margin: 8px 0 4px; font: 400 20px/1.25 var(--font-editorial); color: var(--brand-primary); }
.st-video__meta { margin: 8px 0 0; font: 700 12px/1.3 var(--font-interface); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.st-video__ev { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.st-video__resume { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.est-lue .st-video__resume { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* un clip sans identifiant connu : l'écran renvoie à la chaîne */
.st-video__chaine { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; color: var(--on-fill); font: 700 14px/1.2 var(--font-interface); text-align: center; text-decoration: none; }
.st-video__chaine:hover { text-decoration: underline; }
/* une chanson qui a un clip le dit : un badge dans la ligne des thèmes, et le clip à voir sous le texte */
.st-badge { display: inline-block; margin-right: 4px; padding: 2px 8px; border-radius: 999px; background-color: var(--brand-focus); color: var(--on-focus); font: 800 11px/1.4 var(--font-interface); letter-spacing: .06em; vertical-align: 1px; }
.st-chanson__clip { margin: 4px 0 0; font: 700 14px/1.3 var(--font-interface); }
.st-chanson__clip a, .st-chanson__clip button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; color: var(--brand-primary); text-decoration: underline; cursor: pointer; }
.st-chanson__clip button[hidden] { display: none; }
.st-pubs { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.st-pub { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 4px 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.st-pub__an { margin: 0; font: 400 26px/1 var(--font-editorial); color: var(--brand-primary); }
.st-pub__meta { margin: 0; font: 700 12px/1.3 var(--font-interface); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.st-pub h3 { margin: 4px 0; font: 400 20px/1.3 var(--font-editorial); color: var(--ink); }
.st-pub__revue { margin: 0; font-size: 14px; } .st-pub__auteurs { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.st-pub__apport { margin-top: 6px; } .st-pub__apport summary { min-height: 44px; padding: 12px 0; cursor: pointer; font: 700 13px/1.3 var(--font-interface); color: var(--brand-primary); }
.st-pub__apport p { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--brand-focus); background-color: var(--surface-tint); font: 400 15px/1.45 var(--font-editorial); }
.st-pub__liens { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 4px 0 0; font: 700 13px/1.2 var(--font-interface); }
.st-pub__liens a, .st-pub__liens button { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.st-pub__liens button { padding: 0; border: 0; background: none; font: inherit; color: var(--brand-primary); text-decoration: underline; cursor: pointer; }
/* La demande : une carte blanche au filet marine, sans l'habillage turquoise de ce qu'on donne (elle vend, retour du 5 octobre).
   Deux questions, le champ libre, le bouton juste dessous ; le reste dans « Ajouter des précisions ». */
.st-demande.bq-ex { display: block; max-width: 720px; margin: 0; padding: 14px 20px 14px; border: 1px solid var(--line); border-top-color: var(--brand-primary);
  border-radius: 12px; background-color: var(--paper-bright); box-shadow: 0 12px 26px -20px rgba(var(--rgb-encre), .35); }
.vt-chap--libre .st-demande.bq-ex { border-top-color: var(--brand-focus); }  /* une question pour le fil se donne : le filet turquoise */
.st-demande__q { display: grid; gap: 10px; }
.st-demande fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.st-demande legend { margin: 0 0 5px; padding: 0; font: 700 14px/1.3 var(--font-interface); color: var(--ink); }
/* à l'écran, la question et ses pastilles sur une ligne : la question flotte à gauche, les pastilles prennent le reste */
@media (min-width: 761px) { .st-demande fieldset legend { float: left; width: 10.5rem; margin: 0; padding: 7px 12px 0 0; } }
/* des pastilles de 36 px à l'œil, mais une cible de 44 px au doigt (::after déborde de 4 px en haut et en bas, sans chevaucher la ligne voisine) */
.st-demande__choix { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.st-demande fieldset label { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; background-color: var(--paper-bright);
  cursor: pointer; font-size: 15px; line-height: 1.25; transition: border-color 150ms ease-out, background-color 150ms ease-out; }
.st-demande fieldset label::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.st-demande fieldset label:hover { border-color: var(--brand-primary); }
.st-demande fieldset label:has(input:focus-visible) { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
.st-demande fieldset label:has(input:checked) { border-color: var(--brand-primary); background-color: var(--surface-tint); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.st-demande input[type="radio"] { flex: none; margin: 0; accent-color: var(--brand-fill); }
.st-demande__plus { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.st-demande__plus > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font: 700 15px/1.3 var(--font-interface); color: var(--brand-primary); }
.st-demande__plus > summary::-webkit-details-marker { display: none; }
.st-demande__plus > summary::before { content: "+"; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font: 700 14px/1 var(--font-interface); }
.st-demande__plus[open] > summary::before { content: "−"; }
.st-demande__plus-q { display: grid; gap: 10px; padding: 2px 0 14px; }
/* l'aide (pas de données de santé) se lit sur la ligne du libellé, avant d'écrire */
.st-demande__libre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; } .st-demande__libre label { font: 700 16px/1.3 var(--font-interface); }
/* le champ principal d'abord, les précisions facultatives en retrait (audit UX du 9 octobre, A42) */
.st-demande__libre textarea { min-height: 88px; }
.st-demande__plus > summary { font-size: 14px; }
.st-demande__libre textarea { flex: 1 1 100%; margin-top: 4px; }
.st-demande textarea { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--line-controle); border-radius: 8px; background-color: var(--paper-bright, var(--paper-bright)); color: var(--ink); font: 400 16px/1.4 var(--font-interface); resize: vertical; }
.st-demande textarea:focus { outline: 3px solid var(--brand-primary); outline-offset: 1px; }
.st-demande__aide { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.st-demande__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; }
.st-demande__actions .bq-bouton { min-height: 40px; padding: 0 18px; font-size: 14px; }
.st-demande__actions .bq-bouton { flex: none; }
.st-demande__notes { flex: 1 1 300px; display: grid; gap: 2px; }
.st-demande__note, .st-demande__rgpd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.st-demande__note { font: 600 14px/1.4 var(--font-interface); color: var(--ink); }  /* une consigne d'interface : en sans serif (audit UX, A47) */
/* vide, la zone d'état reste dans la page (pour être annoncée quand elle se remplit) sans rien occuper */
.st-demande__repli:not(:empty) { margin-top: 14px; padding: 14px 16px; border-left: 3px solid var(--brand-primary); border-radius: 0 8px 8px 0; background-color: var(--surface-tint); }
.st-demande__repli .sc-k { margin: 0 0 6px; }
.st-demande__repli > p { margin: 0 0 10px; font-size: 15px; line-height: 1.45; }
.st-demande__envoi { display: grid; gap: 8px; margin: 0 0 12px; }
.st-demande__envoi dt { font: 700 12px/1.2 var(--font-interface); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.st-demande__envoi dd { margin: 2px 0 0; font-size: 15px; overflow-wrap: anywhere; }
.st-demande__envoi pre { margin: 0; white-space: pre-wrap; font: 400 15px/1.45 var(--font-interface); }
.st-demande__adresse { font-weight: 700; user-select: all; }
.st-etapes [role="tablist"] { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border-bottom: 0; }
.st-etapes [role="tablist"]::before { content: ""; position: absolute; left: 7%; right: 7%; top: 21px; height: 2px; background-color: var(--line-strong); }
.st-etapes [role="tab"] { position: relative; display: grid; justify-items: center; gap: 8px; padding: 0 4px 10px; border: 0; background: none; font: 700 14px/1.25 var(--font-interface); text-align: center; color: var(--muted); cursor: pointer; }
.st-etapes [role="tab"] i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-strong); background-color: var(--paper-bright); font: normal 400 20px/1 var(--font-editorial); color: var(--brand-primary); }
.st-etapes [role="tab"][aria-selected="true"] { color: var(--brand-primary); }
.st-etapes [role="tab"][aria-selected="true"] i { background-color: var(--brand-fill); border-color: var(--brand-primary); color: var(--on-fill); }
.st-etapes [role="tabpanel"] { padding-top: 18px; }
.st-etape__k { display: none; margin: 0 0 6px; font: 800 12px/1.2 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-primary); }
.st-etape__intro { margin: 0 0 14px; font: 400 23px/1.3 var(--font-editorial); }
.st-etape { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 2px solid var(--brand-primary); }
.st-etape > div { padding: 12px 18px 12px 0; } .st-etape > div + div { padding-left: 18px; border-left: 1px solid var(--line-strong); }
.st-etape dt { font: 700 15px/1.3 var(--font-interface); color: var(--brand-primary); }
.st-etape dd { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.st-etape__suite { display: flex; justify-content: space-between; margin-top: 12px; }
.st-etape__suite button { min-height: 44px; padding: 0 14px; border: 2px solid var(--line-strong); border-radius: 8px; background: var(--paper-bright); font: 700 14px/1 var(--font-interface); color: var(--brand-primary); cursor: pointer; }
@media (max-width: 760px) {
  .st-etapes [role="tablist"] { grid-template-columns: repeat(7, minmax(0, 44px)); justify-content: space-between; } .st-etapes [role="tablist"]::before { left: 20px; right: 20px; }
  .st-etapes [role="tab"] i { width: 40px; height: 40px; } .st-etapes [role="tab"] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .st-etape__k { display: block; } .st-etape { grid-template-columns: minmax(0, 1fr); } .st-etape > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-strong); }
}
@media (max-width: 400px) {
  .st-etapes [role="tab"] { padding-left: 0; padding-right: 0; } .st-etapes [role="tab"] i { width: 34px; height: 34px; font-size: 17px; }
  .st-etapes [role="tablist"]::before { top: 17px; left: 17px; right: 17px; }
}
@media (max-width: 1000px) { .st-logos { grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr)); } }
@media (max-width: 760px) { .st-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-cherche input { min-width: 0; width: 100%; } .st-cherche { flex: 1 1 100%; } .st-pub { grid-template-columns: 52px minmax(0, 1fr); } }
@media (max-width: 600px) {
  /* Les chansons au téléphone : une liste compacte, vignette de 96 px à gauche, titre et thèmes à droite (25 écrans de 201 px
     faisaient 12 500 px) ; au clic, le lecteur prend toute la largeur de sa carte */
  [data-catalogue="chansons"] .st-videos { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
  .st-chanson { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-content: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .st-chanson > .st-video__ecran { grid-column: 1; grid-row: 1 / span 4; align-self: start; border-radius: 6px; }
  .st-chanson > :not(.st-video__ecran) { grid-column: 2; }
  .st-chanson .st-video__meta { margin-top: 0; font-size: 11px; }
  .st-chanson h3 { margin: 2px 0; font-size: 18px; }
  .st-chanson .st-video__resume { -webkit-line-clamp: 2; font-size: 13px; }
  .st-chanson .st-video__play { width: 30px; height: 30px; margin: -15px 0 0 -15px; box-shadow: 0 0 0 2px rgba(var(--rgb-papier), .85); }
  .st-chanson .st-video__play::after { left: 11px; top: 8px; border-width: 7px 0 7px 11px; }
  .st-chanson .st-video__chaine { padding: 4px; font-size: 11px; }
  .st-chanson.est-lue:not([hidden]) { display: block; }
  .st-chanson.est-lue > .st-video__ecran { margin-bottom: 8px; border-radius: 10px; }
  .st-demande.bq-ex { padding: 16px 14px 16px; }
  .st-demande fieldset label { padding: 0 10px; font-size: 15px; }
  .st-demande__actions .bq-bouton { width: 100%; justify-content: center; }
  .st-demande__notes { flex-basis: 100%; }
}
.bq-tiroir__texte { column-count: 1; max-width: 72ch; }
.st-appel .bq-bouton, .st-ouvrir .bq-bouton { text-decoration: none; }

.st-hero-logos { margin: 14px 0 20px; } .st-hero-logos .st-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .st-hero-logos .st-logos li { min-height: 64px; padding: 8px 12px; border-width: 1px; }
.st-hero-logos .st-logos img { max-height: 40px; }
.st-appel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 18px; } .st-appel a:not(.bq-bouton) { display: inline-flex; align-items: center; min-height: 44px; font: 700 15px/1.3 var(--font-interface); }
.st-annees { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.st-annees > li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; }
.st-annees > li > b { font: 400 28px/1 var(--font-editorial); color: var(--brand-primary); }
.st-annees ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 15px; }
.st-manuscrits { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-manuscrits li { display: grid; align-content: start; gap: 6px; padding: 18px 20px; border-top: 4px solid var(--brand-primary); border-radius: 0 0 12px 12px; background-color: var(--paper-bright); box-shadow: 0 1px 0 var(--line-strong), 0 10px 24px -14px rgba(var(--rgb-encre), .25); }
.st-manuscrit__statut { justify-self: start; padding: 2px 10px; border-radius: 999px; background-color: var(--warm-doux); font: 800 12px/1.5 var(--font-interface); letter-spacing: .06em; text-transform: uppercase; color: var(--warm-fonce); }
.st-manuscrits b { font: 400 25px/1.1 var(--font-editorial); letter-spacing: -.02em; color: var(--brand-primary); }
.st-manuscrits i { font: italic 400 17px/1.35 var(--font-editorial); }
.st-manuscrits p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }
.st-extrait { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px 22px; align-items: start; }
.st-extrait__page { padding: 18px 20px; border-radius: 4px; background-color: var(--paper-bright); box-shadow: 0 1px 0 var(--line-strong), 0 10px 22px -14px rgba(var(--rgb-encre), .3); font: 400 16px/1.55 var(--font-editorial); }
.st-extrait__page p { margin: 0 0 10px; } .st-extrait__page sup, .st-extrait__notes li::marker { font: 800 12px/1 var(--font-interface); color: var(--brand-primary); }
.st-extrait__k { font: 800 12px/1.3 var(--font-interface) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary); }
.st-extrait__page blockquote { margin: 0 0 10px; padding: 6px 12px; border-left: 3px solid var(--brand-focus); font-style: italic; }
.st-extrait__page blockquote span { font: 600 12px/1.3 var(--font-interface); font-style: normal; color: var(--muted); }
.st-extrait__notes { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.4; }
.st-extrait__note { grid-column: 1 / -1; margin: 0; font: italic 400 13px/1.4 var(--font-editorial); color: var(--muted); }
@media (max-width: 760px) { .st-extrait { grid-template-columns: minmax(0, 1fr); } }
.st-relance { margin: 20px 0 0; } .st-relance a { display: inline-flex; align-items: center; min-height: 44px; font: 700 16px/1.3 var(--font-interface); color: var(--brand-primary); }
/* Les situations, en onglets : une ligne d'onglets franche, la situation et sa scène côte à côte */
.st-situations-bloc { margin-top: 34px; }
.st-situations-bloc [role="tablist"] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; border-bottom: 2px solid var(--line-strong); }
.st-situations-bloc [role="tab"] { display: grid; justify-items: start; gap: 2px; min-height: 52px; padding: 10px 16px 12px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
  background: none; cursor: pointer; font: 400 21px/1.1 var(--font-editorial); color: var(--muted); text-align: left; }
.st-situ__scene .bq-bloc--premier > .bq-bloc__titre { display: none; }  /* « Voir » : la scène se voit, l'onglet a déjà posé la question */
.st-situations-bloc [role="tab"] small { font: 700 12px/1.2 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-focus-texte); }
.st-situations-bloc [role="tab"][aria-selected="true"] { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.st-situations-bloc [role="tab"]:hover { color: var(--ink); }
.st-situ { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 34px; align-items: start; }
.st-situ--seul { grid-template-columns: minmax(0, 1fr); max-width: 72ch; }
.st-situ__q { margin: 0 0 12px; font: italic 400 22px/1.3 var(--font-editorial); color: var(--brand-primary); }
.st-situ__texte p { max-width: 62ch; }
.st-ancre { position: relative; top: -120px; display: block; }
/* Les études conduites : des fiches, toutes de la même forme */
.st-cass { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* Sept cartes sur trois colonnes laissaient une carte seule en bas. Une carte large comble une case : il en faut deux quand le compte
   tombe à 1 de trop (la première et la dernière), une quand il tombe à 2 (la dernière). Les lignes se remplissent, à 3 comme à 2 colonnes. */
.st-cass > li:first-child:nth-last-child(3n+1), .st-cass > li:last-child:nth-child(3n+1), .st-cass > li:last-child:nth-child(3n+2) { grid-column: span 2; }
@media (max-width: 1000px) { .st-cass { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-cass > li:first-child:nth-last-child(3n+1), .st-cass > li:last-child:nth-child(3n+1), .st-cass > li:last-child:nth-child(3n+2) { grid-column: auto; }
  .st-cass > li:first-child:nth-last-child(odd) { grid-column: span 2; } }
@media (max-width: 640px) { .st-cass { grid-template-columns: minmax(0, 1fr); } .st-cass > li:first-child:nth-last-child(odd) { grid-column: auto; } }
.st-cas { display: grid; align-content: start; gap: 6px; padding: 16px 18px; border-radius: 12px; border-top: 3px solid var(--brand-primary); background-color: var(--paper-bright);
  box-shadow: 0 1px 0 var(--line-strong), 0 10px 22px -16px rgba(var(--rgb-encre), .3); }
.st-cas__k { font: 800 12px/1.3 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.st-cas b { font: 400 21px/1.15 var(--font-editorial); color: var(--brand-primary); }
.st-cas__qui { font: 700 14px/1.35 var(--font-interface); color: var(--ink); }
.st-cas p { margin: 0; font-size: 14px; line-height: 1.45; } .st-cas__rendu { color: var(--muted); }
.st-cas a { justify-self: start; display: inline-flex; align-items: center; min-height: 36px; font: 700 14px/1.2 var(--font-interface); color: var(--brand-primary); }
@media (max-width: 900px) { .st-situ { grid-template-columns: minmax(0, 1fr); gap: 18px; } .st-situations-bloc [role="tab"] { font-size: 18px; padding: 8px 10px 10px; } }
/* Ce qui se fixe au contrat : des paires terme et phrase, sur deux colonnes */
.st-contrat { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 28px; }
@media (min-width: 900px) { .st-contrat--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }  /* 3 ou 6 éléments : des rangées pleines */
.st-contrat div { padding-top: 10px; border-top: 2px solid var(--brand-primary); }
.st-contrat dt { font: 700 15px/1.3 var(--font-interface); color: var(--brand-primary); }
.st-contrat dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
/* Le cadre en bref, en tête d'Études : six lignes courtes et deux accès au détail (avis du 10 octobre) */
.st-bref { margin-top: 4px; padding: 14px 18px 8px; border-left: 3px solid var(--brand-primary); border-radius: 0 10px 10px 0; background-color: var(--surface-tint); }
.st-bref__t { margin: 0 0 10px; font: 800 12px/1.2 var(--font-interface); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-primary); }
.st-bref ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.st-bref li { font-size: 14px; line-height: 1.4; color: var(--muted); }
.st-bref b { font: 700 14px/1.3 var(--font-interface); color: var(--ink); }
.st-bref__liens { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 6px 0 0; }
.st-bref__liens a { display: inline-flex; align-items: center; min-height: 44px; font: 700 14px/1.2 var(--font-interface); color: var(--brand-primary); }
@media (min-width: 900px) { .st-bref ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }  /* sur toute la largeur de l'en-tête */
@media (max-width: 600px) { .st-bref { padding: 12px 14px 4px; } .st-bref ul { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
/* Les slides vivantes : quatre écrans au format 16:9, en damier, qui se jouent à la vue (decks/fabriquer.py) */
.st-slides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; margin-top: 18px; }
.st-slide { margin: 0; display: grid; align-content: start; gap: 10px; }
.st-slide__cadre { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background-color: #f5f7fb;
  box-shadow: 0 1px 0 var(--line-strong), 0 16px 32px -22px rgba(var(--rgb-encre), .5); }
.st-slide iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-slide figcaption { font-size: 14px; line-height: 1.45; color: var(--muted); }
.st-slide figcaption b { display: block; margin-bottom: 2px; font: 400 19px/1.25 var(--font-editorial); color: var(--ink); }
.st-deck__plein a { display: inline-flex; align-items: center; min-height: 44px; font: 700 15px/1.3 var(--font-interface); color: var(--brand-primary); }
@media (max-width: 760px) { .st-slides { grid-template-columns: minmax(0, 1fr); } }
.st-replie { margin-top: 26px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.st-replie > summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font: 700 15px/1.3 var(--font-interface); color: var(--brand-primary); }
.st-replie > summary::marker { color: var(--brand-primary); }
.st-replie[open] > summary { margin-bottom: 4px; }
.vt-chap__corps > .bq-bloc p, .st-annees ul, .st-manuscrits p { max-width: 75ch; }
@media (max-width: 760px) { .st-manuscrits { grid-template-columns: minmax(0, 1fr); } .st-hero-logos .st-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-annees > li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

.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; }
}

/* L'en-tête d'une vitrine : le titre en haut de sa colonne, pas calé en bas sous 250 px de vide quand le texte d'à côté est long */
.bq-hero--module .bq-hero__texte { align-items: start; }
.bq-hero__pied { grid-column: 1 / -1; min-width: 0; }
.bq-hero--module .bq-hero__titre { align-items: flex-start; }
.bq-hero--long h1 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; }  /* les titres longs des offres : plus le plus petit du site */
/* Un titre long ne se serre plus à côté du médaillon (cinq lignes à 1 280 px, retour extérieur du 5 octobre) : le médaillon passe au-dessus */
.bq-hero--long .bq-hero__titre { flex-direction: column; align-items: flex-start; gap: 14px; }
.bq-hero--long .bq-hero__medaillon { width: 88px; height: 88px; }
/* La vitrine : des chapitres numérotés, sobres ; les scènes gardent leur jeu */
.vt-sommaire { margin: 16px 0 0; font: 400 15px/1.7 var(--font-interface); color: var(--muted); }
.vt-sommaire span { margin-right: 4px; font-weight: 700; color: var(--ink); }
.vt-sommaire a { font-weight: 700; color: var(--brand-primary); text-underline-offset: 3px; white-space: nowrap; }
.vt-chap { padding: 44px 0 40px; border-top: 1px solid var(--line-strong); scroll-margin-top: 70px; }
/* un chapitre sur deux sur un fond teinté, d'un bord à l'autre de l'écran : on voit où une partie finit et où l'autre commence */
.vt-chap:nth-of-type(even) { --vt-fond: var(--surface-alt); border-top-color: transparent; background-color: var(--vt-fond); box-shadow: 0 0 0 100vmax var(--vt-fond); clip-path: inset(0 -100vmax); }
.vt-chap--libre:nth-of-type(even) { --vt-fond: var(--surface-alt-libre); }
.vt-chap:nth-of-type(even) + .vt-chap { border-top-color: transparent; }
/* les lectures, en liste courte sous le texte */
.vt-lire { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.vt-lire__k { margin: 0 0 6px; font: 700 15px/1.3 var(--font-interface); color: var(--ink); }
.vt-lire ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.vt-lire li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 0; font-size: 15px; line-height: 1.4; }
.vt-chap .vt-lire a { font-weight: 700; color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
.vt-lire span { font-size: 13px; color: var(--muted); }
.vt-chap__tete { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 18px; align-items: start; margin-bottom: 26px; }
.vt-chap__n { font: 400 48px/.9 var(--font-editorial); letter-spacing: -.04em; color: rgba(var(--rgb-navy), .45); }  /* à .26, presque invisibles (retour extérieur du 5 octobre) */
.vt-chap h2 { margin: 0; font: 400 clamp(26px, 2.7vw, 34px)/1.08 var(--font-editorial);  /* nettement sous le titre de page (44 à 52 px) : audit extérieur du 5 octobre */ letter-spacing: -.03em; color: var(--ink); }
.vt-chap__nuance { margin: 6px 0 0; font: italic 400 21px/1.3 var(--font-editorial); color: var(--brand-primary); }
.vt-chap__g { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 40px; align-items: start; }
.vt-chap__texte p { margin: 0 0 14px; max-width: 62ch; font: 400 17px/1.6 var(--font-interface); color: var(--ink); }  /* le texte courant en Inter, partout ; Georgia garde les titres, les accroches et les citations */
.vt-points { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--brand-primary); }
.vt-points--seul { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 28px; }
/* Des rangées pleines (audit par personas du 6 octobre : une douzaine de grilles finissaient sur une rangée à moitié vide).
   auto-fit : une seule rangée occupe toute la largeur ; 3, 5, 6 ou 9 éléments se rangent par trois. */
@media (min-width: 900px) {
  :is(.vt-points--seul, .st-realisations, .st-videos):is(:has(> :last-child:nth-child(3n)), :has(> :last-child:nth-child(5))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vt-point { padding: 14px 0 12px; border-bottom: 1px solid var(--line-strong); }
.vt-point h3 { margin: 0 0 6px; font: 700 16px/1.3 var(--font-interface); color: var(--brand-primary); }
.vt-point p, .vt-point li { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.vt-point ul, .vt-point ol { margin: 4px 0 6px; padding-left: 18px; }
/* un point court : une phrase à amorce grasse, pas un titre en capitales de plus */
.vt-point--court p { margin: 0; }
.vt-point__t { font-weight: 700; color: var(--ink); }
.vt-point--limite { padding-left: 14px; border-left: 4px solid var(--data-warm); background-color: var(--warm-pale); }
.vt-point--limite h3 { color: var(--data-warm-texte); }
.vt-point .bq-cartes, .vt-point .bq-frise { margin: 6px 0; }
.vt-chap__scene .bq-bloc--premier > .bq-bloc__titre { display: none; }
.vt-chap__scene .bq-bloc { margin-top: 0; padding-top: 0; border-top: 0; }
.vt-chap__corps > .bq-bloc { margin-top: 28px; }
/* Une scène de vitrine montre sa structure avant de jouer : ce qui va entrer attend en filigrane, au lieu d'un blanc qu'un
   lecteur pressé prend pour un chargement raté (retour extérieur du 5 octobre). La boîte à outils garde le vide : on y
   apprend en avançant. Au tirage et en mouvement réduit, la scène est posée à l'arrivée. */
.vt-chap .bq-demo .cq-entre { opacity: max(.16, var(--actif)); }
/* Les capitales restent aux étiquettes (méthode · année, rôles d'une scène) ; les titres de bloc et « À retenir » s'écrivent comme une phrase */
.vt-chap .bq-bloc__titre { font: 700 17px/1.3 var(--font-interface); letter-spacing: 0; text-transform: none; color: var(--ink); }
.vt-chap .bq-demo__retenir b { font: 700 15px/1.3 var(--font-interface); letter-spacing: 0; text-transform: none; }
/* À côté d'une scène plus haute qu'elle, la colonne de texte accompagne la lecture au lieu de laisser un vide (toutes tiennent dans l'écran) */
.vt-chap__gauche.est-collante { position: sticky; top: 84px; }  /* la classe est posée par le script, après mesure */
.vt-chap--libre .vt-chap__n { color: var(--brand-focus); }
.vt-chap--libre .vt-points { border-top-color: var(--brand-focus); }
.vt-chap--libre { border-top-color: var(--brand-focus); }
/* Sur un téléphone : l'introduction, puis la scène, puis les points ; le jeu vient tôt */
@media (max-width: 900px) { .vt-chap__g { grid-template-columns: minmax(0, 1fr); gap: 24px; } .vt-chap__gauche { display: contents; }
  .vt-chap__texte { order: 1; } .vt-chap__scene { order: 2; } .vt-chap__gauche > .vt-points, .vt-chap__gauche > [data-vitrine="points"] { order: 3; } .vt-chap__gauche > .vt-lire { order: 4; } .vt-chap__tete { grid-template-columns: 52px minmax(0, 1fr); } .vt-chap__n { font-size: 42px; } }