/* ==========================================================================
   HEDGEFLOW — vitrine publique (landing, hors ligne, gabarit commun)
   Spec : plan de design de la vitrine, §2-§6, §8, §11, §13-§14.
   Règle nº 1 (skill hedgeflow-ui) : AUCUNE couleur en dur hors du :root.
   Règle sacrée : jamais de texte ambre sur un fond ou un cadre orange.
   CSP : ce fichier est la seule source de style (aucun style en ligne).
   ========================================================================== */

/* ---------- police : Archivo variable, auto-hébergée (décision 11/09) ---------- */
@font-face{
  font-family:"Archivo";
  src:url("/vitrine/fonts/archivo-latin.e3a28eade2.woff2") format("woff2");
  font-weight:400 800;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- jetons ---------- */
:root{
  /* copie des jetons de l'application (à resynchroniser si l'app change) */
  --bg:#000000; --bg2:#080809; --panel:#0b0c0e; --panelHead:#141519;
  --line:#1d1f23; --line2:#2b2e34; --txt:#e6e8ea; --mut:#8b909a; --mut2:#565b64;
  --blue:#3d9bd6; --green:#33c06a; --silver:#cdd6e0;
  --amber:#ff9e2c; --amber-dim:#c58a3e;
  --frame:#c85333; --frame-dim:#6e2f1d;
  --teal:#3fb6bf;
  --all:#6c63e0; --next:#33c06a; --ret:#ef4444; --px:#f4f5f7; --pos:#33c06a; --neg:#ff5a4d;
  --calls:#ff9e2c; --puts:#3d9bd6; --net:#6c63e0;
  /* vitrine seulement (plan §2.1) */
  --frame-cta:#c45031;     /* bouton d'action : blanc 4,63:1 */
  --frame-cta-hi:#b0472a;  /* survol du bouton d'action : blanc 5,56:1 */
  --lvl-hvl:#5c8fe0;       /* seuil de bascule, couleur de l'application */
  --lvl-gwall:#e0a44b;     /* mur gamma 0DTE, couleur de l'application */
  --on-frame:#ffffff;      /* texte posé sur un aplat cadre */
  --line-saisie:#6b7079;   /* bordure des champs de saisie : 3,93:1 sur --panel (WCAG 1.4.11 ; --line2 = 1,44:1) */
  /* polices */
  --f-page:"Archivo","Segoe UI",system-ui,sans-serif;
  --f-chrome:"Segoe UI",system-ui,sans-serif;
  /* mesures */
  --hdr-h:52px;
  --nav-w:208px;
  --t-hover:140ms;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  background:var(--bg); color:var(--txt);
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-padding-top:calc(var(--hdr-h) + 16px);
}
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}
body{
  margin:0; min-height:100svh;
  background:var(--bg); color:var(--txt);
  font-family:var(--f-page); font-size:1rem; line-height:1.625; font-weight:400;
  font-kerning:normal;
}
img,video,svg,canvas{ max-width:100%; }
img{ height:auto; }
p,ul,ol,dl,dd,figure,h1,h2,h3,h4,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
table{ border-collapse:collapse; }
[hidden]{ display:none !important; }
sup{ font-size:.72em; line-height:0; }
b,strong{ font-weight:650; }

a{
  color:var(--txt);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:var(--mut2);
  transition:text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
a:hover{ text-decoration-color:var(--blue); }

/* focus clavier : anneau teal partout (plan §13) */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

/* gamma, étoile : glyphes absents d'Archivo -> voix du terminal (plan §3.3) */
.g,.star{ font-family:var(--f-chrome); font-style:normal; }
.star{ color:var(--amber); }
.num,.tab{ font-variant-numeric:tabular-nums; }
.nw{ white-space:nowrap; }

.vh{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.evitement{
  position:absolute; left:8px; top:-64px; z-index:100;
  background:var(--panelHead); color:var(--txt); border:1px solid var(--teal);
  padding:8px 12px; font-size:13px; text-decoration:none;
}
.evitement:focus{ top:8px; }

/* ==========================================================================
   EN-TÊTE (plan §6.0) — 52 px, sticky, filet bas cadre sourd
   ========================================================================== */
.hdr{
  position:sticky; top:0; z-index:40;
  height:var(--hdr-h); display:flex; align-items:center; gap:16px;
  padding:0 16px; background:var(--bg); border-bottom:1px solid var(--frame-dim);
}
.marque{
  font-family:var(--f-chrome); font-size:19px; font-weight:800; letter-spacing:1px; line-height:1;
  color:var(--txt); text-decoration:none; white-space:nowrap;
}
.marque b{ font-weight:800; color:var(--amber); }
.hdr .sep{ flex:none; width:1px; height:26px; background:var(--line2); }

/* statut du terminal (plan §11) : l'état vient de <html data-etat>, 0 requête */
.statut{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; line-height:20px; font-weight:500; color:var(--txt); white-space:nowrap;
}
.pastille{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--mut2); }
html[data-etat="en-ligne"] .pastille{ background:var(--pos); }
html[data-etat="hors-ligne"] .pastille{ background:var(--neg); }
@media (prefers-reduced-motion:no-preference){
  html[data-etat="en-ligne"] .pastille{ animation:souffle 2.4s ease-in-out infinite; }
}
@keyframes souffle{
  0%,100%{ box-shadow:0 0 3px color-mix(in srgb, var(--pos) 35%, transparent); }
  50%{ box-shadow:0 0 9px 1px color-mix(in srgb, var(--pos) 65%, transparent); }
}
.e-en,.e-hors,.e-inc,.d-en,.d-hors{ display:none; }
html[data-etat="en-ligne"] .e-en,
html[data-etat="hors-ligne"] .e-hors,
html[data-etat="en-ligne"] .d-en,
html[data-etat="hors-ligne"] .d-hors{ display:inline; }
html:not([data-etat="en-ligne"]):not([data-etat="hors-ligne"]) .e-inc{ display:inline; color:var(--mut); }
/* l'heure est posée par le script : sans elle, pas de « vérifié à » orphelin */
.d-en:has([data-heure]:empty),.d-hors:has([data-heure]:empty){ display:none; }

.horloges{
  display:flex; gap:16px; font-size:13px; line-height:20px; color:var(--mut);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.horloges b{ font-weight:500; }
.horloges:not(.pret){ visibility:hidden; }
.hdr:has(.horloges:not(.pret)) .sep-h{ visibility:hidden; }
.principal:focus{ outline:none; }

.hdr-droite{ margin-left:auto; display:flex; align-items:center; gap:8px; }

/* onglet Connexion : cadre, texte clair (JAMAIS ambre), survol aplat + blanc */
.onglet{
  display:inline-flex; align-items:center; height:32px; padding:0 14px;
  border:1px solid var(--frame); border-radius:2px;
  font-size:13px; font-weight:600; line-height:1; color:var(--txt);
  text-decoration:none; white-space:nowrap;
  transition:background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.onglet:hover{ background:var(--frame-cta); color:var(--on-frame); }
.onglet:active{ transform:translateY(1px); }
html:not([data-session="1"]) .onglet-app,
html[data-session="1"] .onglet-cx{ display:none; }

.hdr-menu{
  display:none; width:36px; height:32px; padding:0; align-items:center; justify-content:center; text-decoration:none;
  background:transparent; border:1px solid var(--line2); border-radius:2px; color:var(--txt);
  transition:border-color var(--t-hover) ease;
}
.hdr-menu:hover{ border-color:var(--blue); }
.hdr-menu svg{ width:16px; height:12px; display:block; }

/* ==========================================================================
   CADRE : menu latéral 208 px + zone principale
   ========================================================================== */
.cadre{ display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr); align-items:start; }

.nav{
  position:sticky; top:var(--hdr-h); height:calc(100svh - var(--hdr-h));
  width:var(--nav-w); overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column;
  background:var(--panel); border-right:1px solid var(--line2);
  font-family:var(--f-chrome);
}
.nav-tete{ display:none; }
.nav-grp{
  padding:13px 14px 4px; font-family:var(--f-chrome); font-size:11px; font-weight:700;
  letter-spacing:1.3px; text-transform:uppercase; color:var(--amber-dim); line-height:16px;
}
.nav-liste a{
  display:flex; align-items:center; gap:8px; padding:7px 14px;
  border-left:2px solid transparent; color:var(--mut); text-decoration:none;
  font-size:13px; line-height:18px;
  transition:color var(--t-hover) ease, background-color var(--t-hover) ease, border-left-color 160ms ease;
}
.nav-liste a:hover{ color:var(--txt); background:var(--panelHead); }
.nav-liste a:active{ transform:translateX(1px); }
.nav-liste a[aria-current="true"]{ color:var(--txt); background:var(--panelHead); border-left-color:var(--teal); }
.nav-liste a:focus-visible{ outline-offset:-2px; }
.nav-liste .star{ margin-left:auto; font-size:12px; }
.nav-etat{ margin-top:auto; padding:10px 14px 10px; border-top:1px solid var(--line2); }
.nav-etat .nav-grp{ padding:0 0 6px; }
.nav-etat .statut{ font-family:var(--f-chrome); }
.nav-detail{ margin-top:2px; font-size:11px; line-height:16px; color:var(--mut); }
.nav-pied{ padding:9px 14px 12px; border-top:1px solid var(--line2); font-size:11px; line-height:16px; color:var(--mut); }

.voile{ display:none; }

.principal{ min-width:0; width:100%; max-width:1712px; padding:12px 16px 0; }

/* ==========================================================================
   TYPOGRAPHIE (plan §3.4) — la chasse fait le contraste des rôles
   ========================================================================== */
.h1{
  font-family:var(--f-page); font-stretch:72%; font-weight:800;
  font-size:2.5rem; line-height:2.625rem; letter-spacing:-.005em; color:var(--txt);
  text-wrap:balance;
}
/* 40/42 au bureau (plan §3.4 : 44/46) : à 44 px, « Où ils / l’accélèrent. » se coupait dans la colonne de 344 px
   (revue design I2) ; une phrase par ligne : le parallèle « Où… Où… » du message ne se coupe jamais au milieu */
.h1-l{ display:block; }
.sec-titre{
  font-family:var(--f-page); font-stretch:80%; font-weight:700;
  font-size:2rem; line-height:2.25rem; color:var(--txt); text-wrap:balance;
}
.h3,.pnl h3:not(.ttl){
  font-family:var(--f-page); font-stretch:87%; font-weight:650;
  font-size:1.1875rem; line-height:1.625rem; color:var(--txt);
}
.chapeau{ font-size:1.1875rem; line-height:1.75rem; max-width:66ch; }
.texte,.texte-long p{ font-size:1rem; line-height:1.625rem; max-width:66ch; hyphens:auto; }
.texte-long p + p{ margin-top:12px; }
.legende{ font-size:13px; line-height:20px; color:var(--mut); max-width:80ch; }
.etiq{ font-size:13px; font-weight:400; color:var(--mut); font-stretch:100%; white-space:nowrap; }
.mut{ color:var(--mut); }

/* ==========================================================================
   COMPOSANTS (plan §5)
   ========================================================================== */
/* panneau = réplique du panneau de l'application, coins 2 px, sans ombre */
.pnl{
  background:var(--panel); border:1px solid var(--frame); border-radius:2px;
  min-width:0; display:flex; flex-direction:column;
}
/* tête : 32 px au moins ; un titre trop long pour sa colonne passe à la ligne au lieu de sortir du cadre
   (900-1 008 px, zoom 200 % : le texte ambre traversait le cadre orange) */
.pnl-h{
  flex:none; min-height:32px; display:flex; align-items:center; gap:12px; padding:6px 12px;
  background:var(--panelHead); border-bottom:1px solid var(--frame-dim);
}
.pnl-h .ttl,.ttl{
  margin:0; font-family:var(--f-chrome); font-size:11px; font-weight:600; line-height:16px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--amber); white-space:normal;
}
.pnl-b{ padding:16px; flex:1 1 auto; min-width:0; }
.pnl-f{ flex:none; padding:12px 16px; border-top:1px solid var(--line); }

/* cellules d'en-tête : valeurs séparées par des filets verticaux (idiome #hdr .sep) */
.cells{
  display:flex; align-items:center; min-width:0; overflow:hidden;
  font-size:12px; line-height:16px; font-weight:500; color:var(--mut);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.cells > * + *::before{
  content:""; display:inline-block; width:1px; height:16px; margin:0 12px;
  background:var(--line2); vertical-align:middle;
}

/* bouton d'action (un seul par écran) */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:12px 20px; border:0; border-radius:2px;
  background:var(--frame-cta); color:var(--on-frame);
  font-family:var(--f-page); font-size:14px; line-height:20px; font-weight:600;
  text-decoration:none; transition:background-color var(--t-hover) ease;
}
.cta:hover{ background:var(--frame-cta-hi); color:var(--on-frame); }
.cta:active{ transform:translateY(1px); }
/* envoi en cours : aria-disabled (le bouton garde le focus ; disabled l'envoyait sur <body>) */
.cta[disabled],.cta[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; }
.cta[aria-disabled="true"]:hover{ background:var(--frame-cta); }

/* bouton secondaire */
.btn2{
  display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:5px 12px;
  background:transparent; border:1px solid var(--line2); border-radius:2px; color:var(--txt);
  font-family:var(--f-page); font-size:13px; line-height:20px; font-weight:500;
  text-decoration:none; transition:border-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn2:hover{ border-color:var(--blue); }
.btn2:active{ transform:translateY(1px); }
.btn2[aria-pressed="true"]{ border-color:var(--blue); background:color-mix(in oklab, var(--blue) 18%, transparent); }

/* segment (réplique .grp + .btn) — sert au module relief et aux choix du formulaire */
.seg{ display:inline-flex; gap:3px; padding:2px; border:1px solid var(--line); border-radius:2px; }
.seg button{
  min-height:24px; padding:2px 9px; border:1px solid transparent; border-radius:2px;
  background:transparent; color:var(--mut); font-size:12px; line-height:18px; font-weight:500;
  transition:color var(--t-hover) ease, background-color var(--t-hover) ease, border-color var(--t-hover) ease;
}
.seg button:hover{ color:var(--txt); }
.seg button[aria-pressed="true"]{
  color:var(--txt); border-color:var(--blue);
  background:color-mix(in oklab, var(--blue) 18%, transparent);
}

/* tableau (lignes 36 px, filet --line) */
.tbl{ width:100%; font-size:13px; line-height:20px; font-variant-numeric:tabular-nums; }
.tbl th,.tbl td{ padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; }
.tbl tr:last-child > *{ border-bottom:0; }
.tbl thead th{ color:var(--mut); font-weight:500; white-space:nowrap; }
.tbl th[scope="row"]{ color:var(--mut); font-weight:500; }
.tbl .nb{ text-align:right; }

/* légende à pastilles carrées */
.cle{ display:flex; flex-wrap:wrap; gap:4px 20px; margin-top:8px; font-size:13px; line-height:20px; color:var(--mut); }
.cle li{ display:flex; align-items:center; gap:8px; }
.sw{ flex:none; width:10px; height:10px; display:inline-block; }
.sw-pos{ background:var(--pos); }
.sw-neg{ background:var(--neg); }

/* <details> : chevron CSS qui pivote de 90° (plan §13) */
.pli > summary{ list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:12px; }
.pli > summary::-webkit-details-marker{ display:none; }
.pli > summary::before{
  content:""; flex:none; width:7px; height:7px; margin-left:1px;
  border-right:1.5px solid var(--mut); border-bottom:1.5px solid var(--mut);
  transform:translateY(-2px) rotate(-45deg); transition:transform 120ms ease;
}
.pli[open] > summary::before{ transform:translateY(-3px) rotate(45deg); }
.pli > summary:hover::before{ border-color:var(--txt); }
@media (prefers-reduced-motion:reduce){ .pli > summary::before{ transition:none; } }

/* ==========================================================================
   SECTIONS ET GRILLE (plan §4)
   ========================================================================== */
.sec{ margin-top:96px; }
.sec-tete{ margin-bottom:24px; display:grid; gap:12px; }
.g12{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:8px; align-items:start; }
.s1-4{ grid-column:1 / 5; } .s5-12{ grid-column:5 / 13; }
.s1-5{ grid-column:1 / 6; } .s6-12{ grid-column:6 / 13; }
.s1-6{ grid-column:1 / 7; } .s7-12{ grid-column:7 / 13; }
.s1-7{ grid-column:1 / 8; } .s8-12{ grid-column:8 / 13; }
.s1-8{ grid-column:1 / 9; } .s9-12{ grid-column:9 / 13; }
.s1-9{ grid-column:1 / 10; } .s10-12{ grid-column:10 / 13; }
.s5-8{ grid-column:5 / 9; }
.s1-12{ grid-column:1 / -1; }

/* ==========================================================================
   6.1 HÉROS : relief gamma
   ========================================================================== */
.heros{
  display:grid; grid-template-columns:minmax(0,1fr) 344px; column-gap:8px;
  grid-template-areas:"scene texte" "scene seance"; grid-template-rows:auto 1fr;
  align-items:start;
}
.heros-texte{ grid-area:texte; padding:24px 20px 0; }
.heros-texte .chapeau{ font-size:1.0625rem; line-height:1.625rem; margin-top:16px; }
.heros-actions{ margin-top:24px; display:grid; justify-items:start; gap:12px; }
.heros-deja{ font-size:13px; line-height:20px; color:var(--txt); }
html:not([data-session="1"]) .deja-app,
html[data-session="1"] .deja-cx{ display:none; }
.heros-seance{ grid-area:seance; padding:24px 20px 0; }
.heros .pnl-relief{ grid-area:scene; }

/* panneau du relief : balisage du contrat, intérieur piloté par relief.js/relief.css */
.pnl-relief{ height:clamp(640px, calc(100svh - var(--hdr-h) - 24px), 880px); }
.pnl-relief > .pnl-h{ height:46px; }
.pnl-relief .ctl{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.pnl-relief .cells{ flex:0 1 auto; }
.relief-stage{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:var(--panel); }
.relief-poster{ display:block; width:100%; height:100%; }
.relief-poster img{ display:block; width:100%; height:100%; object-fit:cover; }
.relief-time:empty{ display:none; }
.pnl-relief > .pnl-f .legende{ max-width:none; }
.relief-cmd{ margin-top:8px; font-size:13px; line-height:20px; color:var(--mut); }
.relief-cmd > summary{ color:var(--txt); width:max-content; }
.relief-cmd ul{ margin-top:8px; display:grid; gap:2px; }
.relief-cmd kbd{
  font-family:var(--f-page); font-size:12px; font-weight:600; color:var(--txt);
  padding:0 4px; border:1px solid var(--line2); border-radius:2px;
}

.pnl-seance .tbl th[scope="row"]{ width:38%; padding-left:12px; }
.pnl-seance .tbl td{ padding-right:12px; }
.pnl-seance .pnl-f{ font-size:13px; line-height:20px; color:var(--mut); }

/* ==========================================================================
   6.2 MESURES : registre
   ========================================================================== */
.registre thead th{ padding-top:12px; }
.registre th:first-child,.registre td:first-child{ padding-left:16px; }
.registre th:last-child,.registre td:last-child{ padding-right:16px; }
.registre td{ vertical-align:top; }
.registre .r-mesure{ font-size:14px; line-height:20px; color:var(--txt); font-weight:500; width:26%; }
.registre .r-valeur{ text-align:right; width:24%; }
.registre .r-comment{ color:var(--mut); }
.registre .r-date{ text-align:right; color:var(--mut); white-space:nowrap; width:1%; }
.registre th.r-mesure{ color:var(--txt); }
.chiffre{
  display:block; font-stretch:75%; font-weight:700; font-size:1.5rem; line-height:1.75rem;
  color:var(--txt); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.unite{ display:block; font-size:13px; line-height:18px; color:var(--mut); text-wrap:balance; }
.liste-non li{ font-size:15px; line-height:24px; }
.liste-non li + li{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }

/* ==========================================================================
   CAPTURES : la capture est une fenêtre du terminal (plan §8.1). L'image s'arrête DANS la
   bordure de 1 px de l'app (captures.json « cadre »: « css ») : la page trace ce seul filet,
   en CSS, dans la boîte de l'image (box-sizing:border-box, règle globale). « aucun » : pas de cadre.
   ========================================================================== */
.capture{ min-width:0; }
.capture-btn{
  position:relative; display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in;
}
.capture-btn:focus-visible{ outline-offset:3px; }
.capture img,.capture picture{ display:block; width:100%; }
.capture img{ background:var(--panel); }
.capture-cadree img{ border:1px solid var(--frame); }
.capture .legende{ margin-top:8px; }
.pile-captures > .capture + .capture{ margin-top:32px; }

/* annotations ①②③ de l'Écran 1 (plan §8.5) : pastille ronde 20 px --px sur --bg, chiffre --bg,
   filet 1 px --px vers le point ; positions en % de l'image (captures.json), couche posée DANS le
   filet de 1 px du cadre. Recadrage mobile : sa propre couche (annotationsM800). */
.annot{
  position:absolute; top:1px; left:1px; width:calc(100% - 2px); height:calc(100% - 2px);
  overflow:visible; pointer-events:none;
}
.annot line{ stroke:var(--px); stroke-width:1; }
.annot circle{ fill:var(--px); stroke:var(--bg); stroke-width:2; }
.annot text{
  fill:var(--bg); font-family:var(--f-chrome); font-size:12px; font-weight:700;
  text-anchor:middle; dominant-baseline:central;
}
.annot-m{ display:none; }
.sans-annot .annot-l,.sans-annot .annot-m{ display:none; }
html:not(.js) [data-bascule-annot]{ display:none; }

.pulse-texte,.pulse-annot,.nuit-texte{ padding-right:16px; }
.pulse-texte .chapeau{ margin-top:0; }
.pulse-texte .texte{ margin-top:16px; color:var(--mut); }
/* bureau : texte en haut à gauche, lecture de l'Écran 1 dessous ; mobile : la liste suit l'image (plan §6.3) */
.pulse-g > .pulse-texte{ grid-row:1; }
.pulse-g > #ecran-1{ grid-row:1 / span 2; }
.pulse-g > .pulse-annot{ grid-row:2; margin-top:24px; }
.annot-titre{ margin-bottom:12px; font-size:15px; line-height:24px; font-weight:600; }
/* (.etapes.annot-liste : plus spécifique que .etapes, déclaré plus bas dans ce fichier) */
.etapes.annot-liste li{ grid-template-columns:20px minmax(0,1fr); gap:12px; }
.etapes.annot-liste li::before{
  width:20px; height:20px; margin-top:2px; border-radius:50%;
  background:var(--px); color:var(--bg); text-align:center;
  font-family:var(--f-chrome); font-stretch:100%; font-size:12px; line-height:20px; font-weight:700;
}
.annot-outil{ margin-top:16px; }
.rangee-captures{ margin-top:32px; }
.nuit-texte .texte{ margin-top:8px; }

/* ==========================================================================
   6.4 CALCULÉ MAISON
   ========================================================================== */
.maison-liste{ display:grid; gap:0; }
.maison-liste > li{ padding:16px 0; border-bottom:1px solid var(--line); }
.maison-liste > li:first-child{ padding-top:0; }
/* rôle H3 du plan (§3.4) : la liste n'est pas dans un .pnl, ni .h3 ni .pnl h3 ne l'atteignaient */
.maison-liste h3{
  position:relative; padding-left:24px;
  font-family:var(--f-page); font-stretch:87%; font-weight:650; font-size:1.1875rem; line-height:1.625rem;
}
.maison-liste h3 .star,.maison-liste h3 .rond{ position:absolute; left:0; }
.maison-liste h3 .star{ top:0; font-size:16px; line-height:1.625rem; }
.maison-liste h3 .rond{ top:8px; }
.maison-liste h3 .etiq{ display:inline-block; margin-left:2px; white-space:normal; text-decoration:none; }
.maison-liste p{ padding-left:24px; }
.maison-liste p{ margin-top:4px; font-size:1rem; line-height:1.625rem; color:var(--txt); hyphens:auto; }
.lien-module{
  padding:0; border:0; background:transparent; text-align:left; color:var(--txt);
  font:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
  text-decoration-color:var(--mut2); transition:text-decoration-color var(--t-hover) ease;
}
.lien-module:hover{ text-decoration-color:var(--blue); }
.rond{ flex:none; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--mut); display:inline-block; }
.maison-pied{ padding-top:16px; font-size:13px; line-height:20px; color:var(--mut); display:grid; gap:8px; }

/* ==========================================================================
   6.5 MODULES : rail vertical (tablist) + zone
   ========================================================================== */
.pnl-modules .pnl-b{ padding:0; display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr); }
.mod-rail{ border-right:1px solid var(--line2); padding-bottom:12px; font-family:var(--f-chrome); }
.mod-rail .nav-grp{ padding-top:14px; }
.mod-onglet{
  display:flex; align-items:center; gap:8px; width:100%; padding:7px 14px;
  border:0; border-left:2px solid transparent; background:transparent; color:var(--mut);
  font-family:var(--f-chrome); font-size:13px; line-height:18px; text-align:left;
  transition:color var(--t-hover) ease, background-color var(--t-hover) ease, border-left-color 160ms ease;
}
.mod-onglet:hover{ color:var(--txt); background:var(--panelHead); }
.mod-onglet[aria-selected="true"]{ color:var(--txt); background:var(--panelHead); border-left-color:var(--teal); }
.mod-onglet:focus-visible{ outline-offset:-2px; }
.mod-onglet .star{ margin-left:auto; font-size:12px; }
.mod-zone{ min-width:0; padding:16px; }
.mod-panneau + .mod-panneau{ margin-top:48px; }
.js .mod-panneau + .mod-panneau{ margin-top:0; }
/* bureau : panneaux EMPILÉS dans la même case, les inactifs invisibles -> la zone garde la hauteur du
   plus grand, la page ne saute plus de ~390 px à chaque onglet (0 octet de plus : lazy dans un panneau caché) */
@media (min-width:900px){
  .js .mod-zone{ display:grid; }
  .js .mod-zone > .mod-panneau{ grid-area:1 / 1; }
  .js .mod-zone > .mod-panneau[hidden]{ display:block !important; visibility:hidden; }
}
.mod-panneau:focus-visible{ outline-offset:-2px; }
.mod-panneau .capture{ margin-bottom:16px; }
.mod-panneau h3{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.mod-texte{ display:grid; gap:4px; margin-top:8px; max-width:72ch; }
.mod-texte p{ font-size:15px; line-height:24px; }
.mod-texte b{ font-weight:600; color:var(--txt); }

/* ==========================================================================
   6.6 VIDÉO
   ========================================================================== */
/* la vidéo filme le panneau PULSE de l'app : même filet de 1 px que les captures (un seul cadre) */
.video-cadre{ position:relative; min-width:0; background:var(--bg); }
.video-cadre video{
  display:block; width:100%; height:auto; aspect-ratio:auto 1280 / 720;
  background:var(--bg); border:1px solid var(--frame);
}
.video-lire{
  position:absolute; left:16px; bottom:16px;
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:8px 16px 8px 12px;
  background:var(--panelHead); border:1px solid var(--line2); border-radius:2px; color:var(--txt);
  font-family:var(--f-page); font-size:14px; line-height:20px; font-weight:600;
  transition:border-color var(--t-hover) ease;
}
.video-lire:hover{ border-color:var(--blue); }
.video-lire svg{ width:12px; height:14px; flex:none; fill:var(--txt); }
.video-lire .etiq{ font-weight:500; }
.video-aside{ display:grid; gap:16px; align-content:start; }
.video-aside .pli > summary{ font-size:14px; line-height:20px; font-weight:500; }
.video-aside .pli p{ margin-top:8px; font-size:14px; line-height:22px; color:var(--mut); }
.chapitres li + li{ border-top:1px solid var(--line); }
.chapitres button{
  display:flex; gap:16px; width:100%; padding:10px 16px; border:0; background:transparent;
  color:var(--txt); font-size:13px; line-height:20px; text-align:left;
}
.chapitres button:hover{ background:var(--panelHead); }
.chapitres .tc{ color:var(--mut); font-variant-numeric:tabular-nums; min-width:3ch; }

/* ==========================================================================
   6.7 MÉTHODE : une chaîne numérotée (vraie séquence)
   ========================================================================== */
.chaine{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; counter-reset:etape; }
.chaine li{ position:relative; padding-top:48px; padding-right:12px; counter-increment:etape; }
.chaine li::before{
  content:counter(etape); position:absolute; left:0; top:0;
  font-stretch:75%; font-weight:700; font-size:1.5rem; line-height:28px; color:var(--txt);
  font-variant-numeric:tabular-nums;
}
.chaine li::after{
  content:""; position:absolute; left:24px; right:-4px; top:14px; height:1px; background:var(--line2);
}
.chaine li:last-child::after{ right:12px; }
.chaine p{ margin-top:6px; font-size:15px; line-height:24px; color:var(--mut); hyphens:auto; }
.trio{ margin-top:8px; align-items:stretch; }
.trio .pnl-b p{ font-size:15px; line-height:24px; hyphens:auto; }
.trio .pnl-b p + p{ margin-top:10px; }

/* ==========================================================================
   6.8 QUESTIONS + GLOSSAIRE
   ========================================================================== */
.faq > .pli{ border-bottom:1px solid var(--line); }
.faq > .pli:last-child{ border-bottom:0; }
.faq > .pli > summary{ padding:16px; }
.faq > .pli > summary h3{ font-size:1.1875rem; line-height:1.625rem; }
.faq > .pli > summary:hover h3{ color:var(--txt); }
.faq .rep{ padding:0 16px 16px 36px; }
.faq .rep p{ font-size:1rem; line-height:1.625rem; max-width:66ch; color:var(--txt); hyphens:auto; }
.faq .rep p + p{ margin-top:8px; }
.glossaire{ font-size:13px; line-height:20px; }
.glossaire dt{ font-weight:600; color:var(--txt); }
.glossaire dd{ margin:2px 0 0; color:var(--mut); hyphens:manual; }
.glossaire dd + dt{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.glossaire .alias{ font-weight:400; color:var(--mut); }

/* ==========================================================================
   6.9 ACCÈS BÊTA + TARIFS
   ========================================================================== */
.form-beta{ display:grid; gap:24px; }
.champ{ display:grid; gap:6px; min-width:0; margin:0; padding:0; border:0; }
.champ > label,.champ > legend{ padding:0; font-size:14px; line-height:20px; font-weight:500; color:var(--txt); }
.req{ color:var(--txt); }
.saisie{
  width:100%; min-height:44px; padding:10px 12px;
  background:color-mix(in srgb, var(--txt) 4%, transparent);
  border:1px solid var(--line-saisie); border-radius:2px; color:var(--txt);
  font-size:16px; line-height:22px;
  transition:border-color var(--t-hover) ease;
}
textarea.saisie{ resize:vertical; min-height:88px; }
.saisie:hover{ border-color:var(--mut); }
.saisie:focus{ border-color:var(--teal); }
.saisie:focus-visible{ outline:1px solid var(--teal); outline-offset:0; }
.saisie[aria-invalid="true"]{ border-color:var(--neg); }
.choix{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,max-content)); gap:8px; margin-top:6px; }
.choix input{ position:absolute; left:0; top:0; opacity:0; width:1px; height:1px; margin:0; }
.choix label{
  display:flex; align-items:center; justify-content:center; min-height:40px; padding:8px 16px;
  border:1px solid var(--line2); border-radius:2px; color:var(--mut); cursor:pointer;
  font-size:14px; line-height:20px; font-weight:500; white-space:nowrap;
  transition:color var(--t-hover) ease, border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}
.choix label:hover{ color:var(--txt); border-color:var(--mut2); }
.choix input:checked + label{
  color:var(--txt); border-color:var(--blue); background:color-mix(in oklab, var(--blue) 18%, transparent);
}
.choix input:focus-visible + label{ outline:2px solid var(--teal); outline-offset:2px; }
.champ[data-invalide="1"] .choix label{ border-color:var(--neg); }
.champ-err{ min-height:0; font-size:13px; line-height:20px; color:var(--neg); }
.champ-err:empty{ display:none; }
.champ-aide{ font-size:13px; line-height:20px; color:var(--mut); }
.piege{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.form-envoi{ display:grid; justify-items:start; gap:8px; }
.form-statut{ font-size:13px; line-height:20px; color:var(--neg); }
.form-statut:empty{ display:none; }
.mention{ font-size:13px; line-height:20px; color:var(--mut); max-width:66ch; }
.merci{ font-size:1.0625rem; line-height:1.625rem; max-width:52ch; }
.merci:focus{ outline:none; }
.etapes{ counter-reset:etape; display:grid; gap:0; }
.etapes li{
  counter-increment:etape; display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:24px;
}
.etapes li:first-child{ padding-top:0; }
.etapes li:last-child{ border-bottom:0; padding-bottom:0; }
.etapes li::before{
  content:counter(etape); font-stretch:75%; font-weight:700; font-size:1.25rem; line-height:24px;
  color:var(--txt); font-variant-numeric:tabular-nums;
}
.tarifs{ margin-top:8px; }
.tarifs .pnl-b p{ font-size:1rem; line-height:1.625rem; max-width:66ch; }

/* ==========================================================================
   6.10 PIED DE PAGE
   ========================================================================== */
.pied{ margin-top:96px; border-top:1px solid var(--line2); background:var(--bg); }
.pied-barre{
  display:flex; flex-wrap:wrap; align-items:center; min-height:34px; padding:0 16px;
  background:var(--panel); border-bottom:1px solid var(--line);
  font-family:var(--f-chrome); font-size:13px; line-height:20px; color:var(--mut);
}
.pied-barre > * { display:inline-flex; align-items:center; gap:8px; padding:8px 0; }
.pied-barre > * + *::before{
  content:""; display:inline-block; width:1px; height:16px; margin:0 4px 0 12px; background:var(--line2);
}
.pied-barre .statut{ font-family:var(--f-chrome); font-size:13px; }
.pied-barre .detail{ color:var(--mut); }
.pied-corps{ padding:24px 16px 48px; display:grid; gap:16px; max-width:1100px; }
.pied-corps .avert{ font-size:13px; line-height:20px; color:var(--mut); max-width:66ch; }
.pied-liens{ display:flex; flex-wrap:wrap; gap:8px 24px; font-size:13px; line-height:20px; }
.pied-liens .etiq{ margin-left:4px; }
.pied-corps .marques,.pied-corps .credits{ font-size:13px; line-height:20px; color:var(--mut); max-width:80ch; }
.pied-corps .credits a{ color:var(--mut); }

/* ==========================================================================
   VISIONNEUSE (plan §8.5) : <dialog>, fond noir à 92 %, sans flou ni animation
   ========================================================================== */
.visio{
  width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:transparent; color:var(--txt); overflow:hidden;
}
.visio::backdrop{ background:color-mix(in srgb, var(--bg) 92%, transparent); }
.visio-cadre{ display:grid; grid-template-rows:auto minmax(0,1fr); height:100%; }
.visio-barre{
  display:flex; align-items:center; gap:8px; padding:12px 16px;
}
.visio-pos{ margin-right:auto; font-size:13px; line-height:20px; color:var(--mut); font-variant-numeric:tabular-nums; }
.visio-fig{ min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:8px; padding:0 16px 16px; }
.visio-fig img{ width:100%; height:100%; object-fit:contain; min-height:0; }
.visio-fig .legende{ max-width:90ch; }

/* ==========================================================================
   PAGE HORS LIGNE
   ========================================================================== */
.ho{ max-width:720px; padding:96px 16px 0; }
.ho .texte{ margin-top:16px; color:var(--txt); }
.ho-actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.ho-actions .btn2{ min-height:44px; padding:12px 16px; }
.ho-en{ display:none; }
html[data-etat="en-ligne"] .ho-hors{ display:none; }
html[data-etat="en-ligne"] .ho-en{ display:block; }
.page-simple .principal{ max-width:none; padding:0; }

/* ==========================================================================
   POINTS DE RUPTURE (plan §4.1)
   ========================================================================== */
@media (max-width:1439px){
  .heros{ grid-template-columns:minmax(0,1fr) 320px; }
}

/* Héros, largeurs M/L et fenêtres basses : la colonne de droite (titre, chapeau, action, séance) dépassait
   le relief de 200 à 420 px -> trou sous la scène (règle : 96 px entre sections). La séance passe en bande
   de données sous la scène, sur deux colonnes (revue design I1, 11/09 ; dérogation au plan §6.1). */
@media (min-width:900px) and (max-width:1439px), (min-width:1440px) and (max-height:1049px){
  .heros{ grid-template-areas:"scene texte" "seance seance"; grid-template-rows:auto auto; }
  .heros-seance{ padding:8px 0 0; }
  .pnl-seance .tbl tbody{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .pnl-seance .tbl tr{ display:grid; grid-template-columns:38% minmax(0,1fr); border-bottom:1px solid var(--line); }
  .pnl-seance .tbl tr:last-child{ border-bottom:0; }
  .pnl-seance .tbl th,.pnl-seance .tbl td{ border-bottom:0; }
  .pnl-seance .tbl th[scope="row"]{ width:auto; }
}
@media (min-width:1440px){
  .pnl-relief{ height:clamp(640px, calc(100svh - var(--hdr-h) - 24px), 1000px); }
}

/* « Calculé maison », 900-1 599 px : captures en pleine largeur (Écran 5 à sa taille native, clé 5 bis
   lisible à 1:1), puis la liste sur deux colonnes -> plus de trou de 400 à 700 px (revue design I3) */
@media (min-width:900px) and (max-width:1599px){
  #calcule-maison .g12 > .s1-8,#calcule-maison .g12 > .s9-12{ grid-column:1 / -1; }
  .maison-liste{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:32px; margin-top:32px; }
  .maison-liste > li:nth-child(-n+2){ padding-top:0; }
}

/* M : le menu devient un tiroir */
@media (max-width:1279px){
  .cadre{ grid-template-columns:minmax(0,1fr); }
  body:has(#nav) .hdr-menu{ display:inline-flex; } /* pas de sommaire (pages légales) : pas de bouton */
  .nav{
    position:fixed; top:0; left:0; bottom:0; z-index:60; height:100%;
    width:min(280px, 86vw); border-right:1px solid var(--line2);
    transform:translateX(-100%); visibility:hidden;
    transition:transform 160ms ease, visibility 0s linear 160ms;
  }
  .nav-ouvert .nav,html:not(.js) .nav:target{ transform:none; visibility:visible; transition:transform 160ms ease; }
  .nav-tete{
    display:flex; align-items:center; justify-content:space-between; height:var(--hdr-h);
    padding:0 12px 0 14px; border-bottom:1px solid var(--frame-dim); flex:none;
  }
  .voile{
    display:block; position:fixed; inset:0; z-index:55; background:color-mix(in srgb, var(--bg) 60%, transparent);
    opacity:0; visibility:hidden; transition:opacity 160ms ease, visibility 0s linear 160ms;
  }
  .nav-ouvert .voile,html:not(.js) .nav:target + .voile{ opacity:1; visibility:visible; transition:opacity 160ms ease; }
  .nav-ouvert{ overflow:hidden; }
  /* Écrans 2 et 3 en pleine largeur sous 1 280 px : l'en-tête du panneau PULSE reste lisible */
  .paire > .capture{ grid-column:1 / -1; }
  .paire > .capture + .capture{ margin-top:32px; }
}
@media (max-width:1279px) and (prefers-reduced-motion:reduce){
  .nav,.nav-ouvert .nav,.voile,.nav-ouvert .voile,.nav:target,.nav:target + .voile{ transition:none; }
}

/* S : une colonne */
@media (max-width:899px){
  .g12{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .g12 > *{ grid-column:1 / -1; }
  .sec{ margin-top:56px; }
  .pied{ margin-top:56px; }
  .heros{ grid-template-columns:minmax(0,1fr); grid-template-areas:"texte" "scene" "seance"; grid-template-rows:auto; }
  .h1{ font-size:2.75rem; line-height:2.875rem; }
  .heros-texte{ padding:16px 0 24px; }
  .heros-seance{ padding:8px 0 0; }
  .pnl-relief{ height:auto; }
  .relief-stage{ flex:none; height:60svh; min-height:320px; }
  .horloges{ display:none; }
  .hdr .sep-h{ display:none; }
  .pulse-texte,.pulse-annot,.nuit-texte{ padding-right:0; }
  .pulse-g > .pulse-texte,.pulse-g > #ecran-1,.pulse-g > .pulse-annot{ grid-row:auto; }
  .rangee-captures > .capture + .capture{ margin-top:32px; }
  .nuit-texte{ margin-bottom:16px; }
  .pile-captures{ margin-bottom:24px; }  /* la légende de l'Écran 5 ne colle pas à la liste qui suit */
  .chaine{ grid-template-columns:minmax(0,1fr); gap:0; }
  .chaine li{ padding:0 0 20px 40px; }
  .chaine li::before{ top:-2px; }
  .chaine li::after{ left:10px; right:auto; top:32px; bottom:6px; width:1px; height:auto; }
  .chaine li:last-child::after{ display:none; }
  .chaine li:last-child{ padding-bottom:0; }
  .trio > * + *,.faq-rangee > * + *,.acces-rangee > * + *{ margin-top:0; }

  /* registre : chaque ligne devient une fiche empilée */
  .registre thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .registre,.registre tbody,.registre tr,.registre th,.registre td{ display:block; width:auto; }
  .registre tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:14px 16px; border-bottom:1px solid var(--line); }
  .registre tr:last-child{ border-bottom:0; }
  .registre th,.registre td{ padding:0 !important; border:0 !important; text-align:left; }
  .registre .r-valeur{ grid-row:1; grid-column:1 / -1; text-align:left; width:auto; }
  .registre .r-mesure{ grid-row:2; grid-column:1 / 2; font-size:16px; line-height:24px; width:auto; }
  .registre .r-date{ grid-row:2; grid-column:2 / 3; text-align:right; width:auto; line-height:24px; }
  .registre .r-comment{ grid-row:3; grid-column:1 / -1; }
  .registre .r-date::before{ content:attr(data-libelle) " "; }
  .chiffre{ font-size:1.375rem; line-height:1.625rem; }

  /* modules : rail -> rangée d'onglets défilante */
  .pnl-modules .pnl-b{ grid-template-columns:minmax(0,1fr); }
  .mod-rail{
    display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line2);
    padding:0; scrollbar-width:thin;
  }
  .mod-rail .nav-grp{ display:none; }
  .mod-onglet{
    flex:none; width:auto; height:44px; padding:0 14px; border-left:0; border-bottom:2px solid transparent;
  }
  .mod-onglet[aria-selected="true"]{ border-bottom-color:var(--teal); }
  .mod-onglet .star{ margin-left:6px; }
}

/* XS */
@media (max-width:599px){
  :root{ --hdr-h:48px; }
  .hdr{ gap:10px; padding:0 12px; }
  .marque{ font-size:17px; }
  .hdr .sep{ display:none; }
  .hdr .statut .etat-txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .principal{ padding:8px 16px 0; }
  .h1{ font-size:2.125rem; line-height:2.3125rem; }
  .sec-titre{ font-size:1.625rem; line-height:1.875rem; }
  .h3,.pnl h3:not(.ttl),.faq > .pli > summary h3{ font-size:1.125rem; line-height:1.5rem; }
  .chapeau,.heros-texte .chapeau{ font-size:1rem; line-height:1.5rem; }
  .heros-actions .cta{ width:100%; }
  .relief-stage{ height:auto; min-height:0; aspect-ratio:4 / 5; }
  .pnl-relief > .pnl-h{ height:auto; min-height:46px; flex-wrap:wrap; padding:6px 12px; row-gap:6px; }
  .choix{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .choix label{ white-space:normal; text-align:center; }
  .form-envoi .cta{ width:100%; }
  .faq .rep{ padding-left:16px; }
  .pied-barre{ flex-direction:column; align-items:flex-start; padding:6px 16px; }
  .pied-barre > * + *::before{ display:none; }
  .pied-barre > *{ padding:3px 0; }
  .video-lire{ left:8px; bottom:8px; }
  .visio-barre{ flex-wrap:wrap; }
  /* recadrage 4:5 dédié (source media="(max-width: 599px)") : sa propre couche d'annotations */
  .annot-l{ display:none; }
  .annot-m{ display:block; }
  .sans-annot .annot-m{ display:none; }
  /* Écran 5 bis : texte de 12 px à la source, illisible sous 600 px (captures.json « mobile »: false) */
  .capture-cle{ display:none; }
}

/* contraste élevé Windows (forced-colors) : les états choisis ne reposent plus que sur des couleurs
   que le système remplace -> on les redessine en couleurs système (revue a11y I4) */
@media (forced-colors:active){
  .choix input:checked + label,.seg button[aria-pressed="true"],.btn2[aria-pressed="true"]{
    forced-color-adjust:none; background:Highlight; color:HighlightText; border-color:Highlight;
  }
  .mod-onglet,.nav-liste a{ border-left-color:Canvas; }
  .mod-onglet[aria-selected="true"],.nav-liste a[aria-current="true"]{ border-left-color:Highlight; }
  .pastille{ forced-color-adjust:none; border:1px solid CanvasText; }
}
@media (forced-colors:active) and (max-width:899px){
  .mod-onglet{ border-bottom-color:Canvas; }
  .mod-onglet[aria-selected="true"]{ border-bottom-color:Highlight; }
}

/* impression : papier blanc, sans chrome */
@media print{
  :root{ --bg:#ffffff; --panel:#ffffff; --panelHead:#ffffff; --txt:#000000; --mut:#333333; }
  .hdr,.nav,.voile,.pied-barre,.video-lire,.relief-time,.relief-cmd,.mod-rail{ display:none !important; }
  .cadre{ display:block; }
}


/* =========================================================================
   PAGE DE CONFIRMATION DU FORMULAIRE — backend/vitrine.py:1547-1569
   La passerelle sert cette page elle-même, avec dix classes qu'elle ne
   déclare nulle part : page-simple page-demande hdr marque principal ho h1
   texte mut ho-actions cta. Les neuf premières sont définies plus haut dans
   cette feuille (celle des pages actuelles) ; « page-demande » n'existait
   pas. Ce bloc, porté par body.page-demande, ne touche QUE cette page : il
   lui donne la robe « papier » du site v2 et laisse les pages légales et la
   page de connexion dans leur habillage sombre, à corriger après la bascule.
   ========================================================================= */
body.page-demande{
  background:#F3EDE2;
  color:#1B1815;
  font-family:"Archivo",system-ui,Arial,sans-serif;
  font-variation-settings:"wdth" 100;
}
body.page-demande .hdr{
  background:transparent;
  border-bottom:1px solid #D8D0C1;
  height:64px;
  padding:0 40px;
}
body.page-demande .marque{color:#1B1815;font-weight:800;font-size:19px;letter-spacing:.02em}
body.page-demande .marque b{color:#B36308}
body.page-demande .principal{max-width:none;padding:0 40px}
body.page-demande .ho{max-width:64ch;padding:96px 0 0;margin:0 auto}
body.page-demande .h1{
  font-size:clamp(32px,4.4vw,54px);
  line-height:1.04;
  font-weight:800;
  font-variation-settings:"wdth" 68;
  letter-spacing:-.01em;
  color:#1B1815;
  margin:0 0 20px;
}
body.page-demande .texte{color:#4B4640;font-size:17px;line-height:1.62;max-width:66ch;margin:0 0 12px}
body.page-demande .texte a{color:#A63A1E;border-bottom:1px solid #D8D0C1}
body.page-demande .mut{color:#6B655C}
body.page-demande .ho-actions{margin-top:32px}
body.page-demande .cta{
  display:inline-block;
  background:#C45031;
  color:#fff;
  font-weight:700;
  font-size:17px;
  padding:14px 22px;
  border-radius:3px;
  box-shadow:0 0 0 4px rgba(200,83,51,.12),0 8px 24px rgba(200,83,51,.18);
  transition:background 160ms ease,box-shadow 160ms ease,transform 160ms ease;
}
body.page-demande .cta:hover{
  background:#B0472A;
  color:#fff;
  box-shadow:0 0 0 4px rgba(200,83,51,.20),0 10px 28px rgba(200,83,51,.28);
}
body.page-demande .cta:active{transform:translateY(1px)}
@media (max-width:900px){
  body.page-demande .hdr{padding:0 20px}
  body.page-demande .principal{padding:0 20px}
  body.page-demande .ho{padding-top:64px}
}