/* =========================================================================
   HEDGEFLOW — site public (direction « PLANCHE »). Feuille unique : la page,
   la couche de fond « .fv » et les quatre répliques du terminal (bandeau,
   cadre, PULSE, dealer). Aucun style en ligne : la passerelle sert une CSP
   « style-src 'self' » (backend/vitrine.py:196-198).
   Les cinq refus : pas de chasse fixe · pas de flou progressif sous l'en-tête ·
   pas d'ombre à 6 paliers · pas de chrome d'app · pas de noir en fond de page.
   ========================================================================= */
@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;
}
/* γ, flèches et pastilles géométriques ne sont pas dans le sous-ensemble
   (skill §3) : pile de repli DÉCLARÉE plutôt que subie. */
.grec,.sym{font-family:"Segoe UI Symbol","DejaVu Sans","Noto Sans Symbols 2",system-ui,sans-serif}

:root{
  --papier:#F3EDE2;--papier2:#E9E2D4;--papier3:#FAF7F1;--encre:#1B1815;--encre2:#4B4640;
  --encre3:#6B655C;--filet:#D8D0C1;--filetfort:#8C8474;--brique:#C85333;--briqueencre:#A63A1E;
  --cta:#C45031;--cta-hi:#B0472A;--ambre:#FF9E2C;--ambreencre:#B36308;--violet:#3F36A0;
  --nuit:#0B0C0E;--nuittxt:#E6E8EA;--nuitmut:#9AA0A6;
  --mvt-etat:200ms;--mvt-entree:520ms;--e-sortie:cubic-bezier(.16,1,.3,1);
  --im-relief:url("/vitrine/img/relief-es-0908-1600.54c27e5482.webp");
  --im-rheo:url("/vitrine/img/rheo-es-1800.db18278c6c.webp");
  --im-vig-pulse:url("/vitrine/img/vig-pulse.81c2f835cb.webp");
  --im-photo:url("/vitrine/img/gabriel-bureau-680.45716d6fea.webp");
  --im-vig-rheo:url("/vitrine/img/vig-rheo.6676ed4512.webp");
  --im-vig-relief:url("/vitrine/img/vig-relief.6d6e98f95b.webp");
}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);
  font:17px/1.62 "Archivo",system-ui,Arial,sans-serif;font-variation-settings:"wdth" 100;
  overflow-x:hidden}
a{color:inherit;text-decoration:none}
.corps{max-width:1240px;margin:0 auto;padding:0 40px}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- en-tete ---------- */
.entete{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.marque{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:.02em}
.marque .ico{width:30px;height:30px}
.marque b{color:var(--ambreencre)}
.entete nav{display:flex;align-items:center;gap:28px;font-size:15px;color:var(--encre2)}
.entete nav a{white-space:nowrap}
.progres{height:2px;background:var(--filet);position:relative}
.progres i{position:absolute;inset:0 auto 0 0;width:var(--p,0%);
  background:linear-gradient(90deg,#1A7FB3,#28903F);transition:width .1s linear}

/* ---------- boutons (§12.5) ---------- */
.cta{display:inline-block;background:var(--cta);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}
.cta:hover{background:var(--cta-hi);box-shadow:0 0 0 4px rgba(200,83,51,.20),0 10px 28px rgba(200,83,51,.28)}
.cta:active{transform:translateY(1px)}
.cta-f{display:inline-block;background:rgba(200,83,51,.08);border:1px solid var(--brique);
  color:var(--briqueencre);font-weight:700;font-size:15px;padding:8px 15px;border-radius:3px;
  transition:background 160ms ease,box-shadow 160ms ease}
.cta-f:hover{background:rgba(200,83,51,.14)}
.cta-f i{font-style:normal;display:inline-block;transition:transform 160ms ease}
.cta-f:hover i{transform:translateX(3px)}

/* ---------- heros ---------- */
.heros{display:grid;grid-template-columns:minmax(340px,1fr) 720px;gap:40px;align-items:center;
  padding:52px 0 44px}
h1{font-size:clamp(42px,4.5vw,68px);line-height:.92;font-weight:800;font-variation-settings:"wdth" 64;
  letter-spacing:-.012em;margin:0 0 22px;max-width:13ch;text-wrap:balance}
.chapeau{font-size:21px;line-height:1.45;color:var(--encre2);max-width:44ch;margin:0 0 18px}
.raisons{list-style:none;padding:0;margin:0 0 26px}
.raisons li{border-left:2px solid var(--violet);padding-left:12px;margin:0 0 8px;font-size:17px}
.rare{font-size:13px;color:var(--encre2);margin:12px 0 0}
.montee-txt{opacity:0;transform:translateY(14px);
  transition:opacity var(--mvt-entree) var(--e-sortie),transform var(--mvt-entree) var(--e-sortie)}
.vu .montee-txt{opacity:1;transform:none}


/* ---------- planches ---------- */
.planche{background:var(--nuit);color:var(--nuittxt);max-width:1160px;margin:0 auto;
  padding-bottom:6px;border-radius:2px;overflow:hidden}
.vue{display:block;width:100%;height:clamp(240px,36vw,470px);
  background-size:cover;background-position:left top;background-repeat:no-repeat}
.vue--relief{background-image:var(--im-relief)}
.vue--rheo{background-image:var(--im-rheo)}
.hud{display:flex;gap:22px;flex-wrap:wrap;padding:12px 22px;font-size:15px;
  font-variant-numeric:tabular-nums;color:var(--nuitmut)}
.hud b{color:var(--ambre);font-weight:700}
.hud .cmd{margin-left:auto;color:var(--nuitmut)}
.leg{display:flex;gap:18px;padding:8px 22px 10px;font-size:14px;color:var(--nuitmut)}
.leg i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}

/* planche montee : filet brique + 4 marques d'angle */
.montee{position:relative;width:fit-content;max-width:100%;margin:0 auto;
  box-shadow:0 1px 2px rgba(27,24,21,.06),0 12px 24px rgba(27,24,21,.10)}
.montee > i{position:absolute;width:9px;height:9px;border:0 solid var(--brique);
  transition:width 120ms linear,height 120ms linear}
.montee:hover > i{width:13px;height:13px}
.montee .tl{top:-7px;left:-7px;border-top-width:1px;border-left-width:1px}
.montee .tr{top:-7px;right:-7px;border-top-width:1px;border-right-width:1px}
.montee .bl{bottom:-7px;left:-7px;border-bottom-width:1px;border-left-width:1px}
.montee .br{bottom:-7px;right:-7px;border-bottom-width:1px;border-right-width:1px}

/* ---------- actes ---------- */
.acte{padding:104px 0 30px;display:grid;grid-template-columns:110px 1fr;gap:24px}
.acte .h{font-variant-numeric:tabular-nums;color:var(--violet);font-weight:700;font-size:16px;padding-top:14px}
h2{font-size:clamp(32px,4.4vw,58px);line-height:1.02;font-weight:750;font-variation-settings:"wdth" 68;
  letter-spacing:-.01em;margin:0 0 18px;max-width:22ch;text-wrap:balance}
.acte p{max-width:62ch;margin:0 0 12px;color:var(--encre2)}
.temps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:960px;margin:22px 0 0}
.temps div{border-top:2px solid var(--brique);padding-top:10px;font-size:15.5px;color:var(--encre2)}
.temps b{display:block;color:var(--encre);font-size:15px;margin-bottom:4px}
.souffle{height:34px}
.reprise{display:flex;align-items:center;gap:22px;padding:34px 40px;background:var(--papier2);margin:34px -40px 0}
.reprise span{color:var(--encre2);font-size:15px}

/* acte 03 : niveaux */
.niveaux{display:grid;grid-template-columns:minmax(300px,1fr) 660px;gap:40px;align-items:start;margin-top:8px}
.noms{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 6px;padding:0;list-style:none}
.noms li{border:1px solid var(--filetfort);padding:5px 10px;font-size:14px;color:var(--encre2);
  background:var(--papier3)}
.noms li b{color:var(--encre);font-weight:700}
.chiffres{display:flex;gap:34px;margin:22px 0 4px}
.chiffres div{border-top:2px solid var(--brique);padding-top:8px}
.chiffres b{display:block;font-size:clamp(34px,4vw,52px);line-height:1;font-weight:800;
  font-variation-settings:"wdth" 66;font-variant-numeric:tabular-nums}
.chiffres span{font-size:14px;color:var(--encre3)}

/* acte 04 : la grille des ecrans */
.statut{color:var(--encre2);max-width:74ch;margin:0 0 26px}
.tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 26px;margin-top:10px;
  list-style:none;padding:0}
.tuile{opacity:0;transform:translateY(12px);
  transition:opacity 420ms var(--e-sortie),transform 420ms var(--e-sortie)}
.tuiles.vu .tuile{opacity:1;transform:none}
.vig{position:relative;display:block;aspect-ratio:16/9;background:var(--nuit);overflow:hidden;
  border:1px solid rgba(200,83,51,.45)}
.vig--pulse{background-image:var(--im-vig-pulse);background-size:cover;background-position:center}
.vig--rheo{background-image:var(--im-vig-rheo);background-size:cover;background-position:center}
.vig--relief{background-image:var(--im-vig-relief);background-size:cover;background-position:center}
.vig .mot{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);
  font-size:30px;line-height:1.02;font-weight:800;font-variation-settings:"wdth" 62;
  letter-spacing:-.01em;word-spacing:.18em;color:rgba(230,232,234,.16);text-transform:uppercase}
.vig .fil{position:absolute;left:12px;top:12px;width:34px;height:2px;background:var(--ambre);opacity:.55}
.vig .gl{position:absolute;right:12px;bottom:10px;font-size:13px;color:rgba(255,158,44,.5)}
.tuile h3{margin:12px 0 4px;font-size:14px;font-weight:700;font-variation-settings:"wdth" 80;
  color:var(--briqueencre);letter-spacing:.01em}
.tuile p{margin:0;font-size:16px;line-height:1.45;color:var(--encre2);max-width:300px}

/* ---------- l'instrument pose sur le papier ---------- */
.instru{padding:96px 0 20px}
.instru .deux{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:1000px}
.instru .deux p{margin:0;font-size:19px;line-height:1.42;color:var(--encre)}
.instru .deux p b{font-weight:700}

/* ---------- histoire / entrer / pied (v1) ---------- */
.histoire{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start;padding:104px 0 60px}
.portrait{width:100%;aspect-ratio:4/5;background-image:var(--im-photo);background-size:cover;
  background-position:center}
.histoire p{max-width:58ch;color:var(--encre2)}
.histoire p b{color:var(--encre)}
.sig{font-size:15px;color:var(--encre3);margin-top:18px}
.entrer{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;padding:84px 0 80px;align-items:start}
.porte{background:var(--nuit);color:var(--nuittxt);padding:26px 28px;border:1px solid var(--brique)}
.porte label{display:block;font-size:13px;color:var(--nuitmut);margin:14px 0 6px}
.porte .champ{border:1px solid #3a3d42;background:#111316;height:44px}
.porte .seg{display:flex;gap:8px;flex-wrap:wrap}
.porte .seg span{border:1px solid #3a3d42;padding:9px 14px;font-size:14px}
.porte .seg span.on{border-color:var(--ambre);color:var(--ambre)}
.porte .cta{margin-top:20px}
.porte small{display:block;color:var(--nuitmut);font-size:12.5px;margin-top:12px;line-height:1.5}
.tarifs{font-variant-numeric:tabular-nums}
.tarifs .l{display:flex;justify-content:space-between;border-bottom:1px solid var(--filet);
  padding:12px 0;color:var(--encre3);font-size:18px}
.tarifs .l b{color:var(--encre3);font-weight:700}
.fond{background:var(--ambre);color:#1B1815;padding:18px 20px;margin:18px 0 12px}
.fond b{display:block;font-size:24px;font-variation-settings:"wdth" 72;font-weight:800;line-height:1.1}
.fond span{font-size:14px}
.men{font-size:12.5px;color:var(--encre3);line-height:1.5}
.pied{border-top:1px solid var(--filet);padding:22px 0 60px;font-size:13px;color:var(--encre3)}


/* ---- fragments ---- */
/* =========================================================================
   LOT « bandeau » — (a) bande des marchés qui défile · (b) instrument
   « PRESSION · $ DELTA NOTIONNEL » en grand objet.
   Répliques HTML/CSS du terminal (modèle : source interne,
   source interne / 3381-3500). Toutes les règles sont préfixées
   .bandeau — rien ne fuit dans la page.
   ========================================================================= */
.bandeau{
  /* jetons du terminal (source interne) */
  --nuit:#0B0C0E;        /* = --panel de l'app, fond des panneaux */
  --txt:#e6e8ea; --mut:#8b909a; --mut2:#565b64;
  --amber:#ff9e2c; --frame:#c85333; --frame-dim:#6e2f1d;
  --line:#1d1f23; --line2:#2b2e34; --pos:#33c06a; --neg:#ff5a4d;
  /* jetons du site clair */
  --papier:#F3EDE2; --encre:#1B1815; --brique:#C85333;
  /* mouvement (plan §2.4) */
  --mvt-etat:200ms; --mvt-entree:520ms;
  --e-sortie:cubic-bezier(.16,1,.3,1);
  /* unité de l'instrument : 1 unité = 1 px dans l'app. Le plafond 2.05
     est le plus grand facteur qui tienne dans une colonne de 1160 px
     (l'objet mesure 532 unités de large + la planche). */
  --u:clamp(1.45px, calc((100vw - 132px) / 532), 2.05px);

  font-family:"Archivo",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  background:var(--papier);
  color:var(--encre);
  max-width:1160px; margin:0 auto; padding:0;
}
.bandeau *{ box-sizing:border-box; }

/* ---------- (a) LE BANDEAU QUI DÉFILE ---------------------------------- */
.bandeau .bd-tape{
  position:relative; height:34px; overflow:hidden;
  background:var(--nuit);
  border-top:1px solid var(--frame-dim);
  border-bottom:1px solid var(--frame-dim);
}
.bandeau .bd-trk{
  position:absolute; top:0; left:0; white-space:nowrap; will-change:transform;
  line-height:34px; font-size:13px;
  animation:bandeauScroll 90s linear infinite;
  animation-play-state:paused;               /* démarré par l'IntersectionObserver */
}
.bandeau.bd-on .bd-trk{ animation-play-state:running; }
.bandeau .bd-tape:hover .bd-trk{ animation-play-state:paused; }
@keyframes bandeauScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.bandeau .bd-it{
  display:inline-block; margin:0 0 0 14px; padding-left:14px;
  border-left:1px solid var(--line);
}
.bandeau .bd-it.bd-first{ margin-left:0; padding-left:0; border-left:none; }
.bandeau .bd-it b{ color:var(--amber); font-weight:700; margin-right:6px; }
.bandeau .bd-px{ color:var(--txt); }
.bandeau .bd-up{ color:var(--pos); }
.bandeau .bd-dn{ color:var(--neg); }
/* étiquettes de classification (index.html:60-63) */
.bandeau .bd-grp{
  display:inline-block;
  color:var(--amber); font-size:10.5px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase;
  margin:0 8px 0 30px; padding-left:12px;
  border-left:1px solid var(--frame-dim);
}
.bandeau .bd-seq:first-child .bd-grp:first-child{ margin-left:14px; }

/* ---------- (b) LA PLANCHE MONTÉE -------------------------------------- */
.bandeau .bd-scene{ padding:56px 10px 10px; }
.bandeau .bd-planche{
  position:relative;
  width:fit-content; max-width:100%; margin:0 auto;
  background:var(--nuit);
  border:1px solid var(--brique);
  padding:16px 20px 18px;
  box-shadow:0 1px 2px rgba(27,24,21,.06), 0 12px 24px rgba(27,24,21,.10);
  opacity:0; transform:translateY(14px);
  transition:opacity var(--mvt-entree) var(--e-sortie),
             transform var(--mvt-entree) var(--e-sortie);
}
.bandeau.bd-on .bd-planche{ opacity:1; transform:translateY(0); }
/* 4 marques d'angle en L, 9 px, posées à 6 px à l'extérieur */
.bandeau .bd-cn{
  position:absolute; width:9px; height:9px; border:0 solid var(--brique);
  opacity:0; transform:scale(.2);
  transition:opacity 420ms var(--e-sortie), transform 420ms var(--e-sortie),
             width 120ms linear, height 120ms linear;
}
.bandeau.bd-on .bd-cn{ opacity:1; transform:scale(1); }
.bandeau .bd-planche:hover .bd-cn{ width:13px; height:13px; }
.bandeau .bd-cn-tl{ top:-7px; left:-7px; border-top-width:1px; border-left-width:1px; }
.bandeau .bd-cn-tr{ top:-7px; right:-7px; border-top-width:1px; border-right-width:1px; }
.bandeau .bd-cn-bl{ bottom:-7px; left:-7px; border-bottom-width:1px; border-left-width:1px; }
.bandeau .bd-cn-br{ bottom:-7px; right:-7px; border-bottom-width:1px; border-right-width:1px; }

/* ---------- l'instrument (index.html:122-165, ×--u) --------------------- */
.bandeau .bd-inst{ color:var(--txt); width:fit-content; margin:0 auto; max-width:100%; }
.bandeau .bd-lbl{
  display:flex; align-items:center; justify-content:flex-end;
  gap:calc(6*var(--u));
  font-size:calc(8*var(--u)); letter-spacing:calc(2*var(--u));
  color:var(--mut2); text-transform:uppercase; line-height:1;
  margin-bottom:calc(7*var(--u));
}
.bandeau .bd-snd{
  border:1px solid var(--line2); color:var(--mut2);
  font-size:calc(8.5*var(--u)); padding:0 calc(3*var(--u));
  line-height:1.5; letter-spacing:0; border-radius:calc(2*var(--u));
  transition:color var(--mvt-etat) linear, border-color var(--mvt-etat) linear;
}
.bandeau .bd-snd.bd-sndon{ color:var(--amber); border-color:var(--frame-dim); }

.bandeau .bd-row{
  display:flex; align-items:center; justify-content:flex-end;
  gap:calc(6*var(--u)); line-height:1.02;
  padding:calc(3*var(--u)) calc(4*var(--u));
  border-left:2px solid transparent;
}
.bandeau .bd-tag{
  font-size:calc(9.5*var(--u)); color:var(--mut);
  letter-spacing:calc(1*var(--u));
  width:calc(28*var(--u)); text-align:right; flex:0 0 auto;
}
.bandeau .bd-row-gc .bd-tag{ color:#d4a017; }
.bandeau .bd-chg{
  font-size:calc(12*var(--u)); font-weight:800; font-stretch:88%;
  width:calc(52*var(--u)); text-align:right; flex:0 0 auto;
}
.bandeau .bd-gr{
  font-size:calc(9.5*var(--u)); font-weight:700;
  padding:0 calc(4*var(--u)); line-height:1.2;
  border:1px solid var(--line2); color:var(--mut2);
  width:calc(24*var(--u)); text-align:center; box-sizing:content-box; flex:0 0 auto;
}
.bandeau .bd-gr.bd-pos{ color:var(--pos); border-color:rgba(51,192,106,.55); }
.bandeau .bd-gr.bd-neg{ color:var(--neg); border-color:rgba(255,90,77,.55); }
/* respiration douce des pastilles γ± (2,4 s) */
.bandeau.bd-on .bd-gr.bd-pos{ animation:bandeauGrPos 2.4s ease-in-out 1.2s infinite; }
.bandeau.bd-on .bd-gr.bd-neg{ animation:bandeauGrNeg 2.4s ease-in-out 1.2s infinite; }
@keyframes bandeauGrPos{
  0%,100%{ box-shadow:0 0 0 0 rgba(51,192,106,0); }
  50%{ box-shadow:0 0 calc(5*var(--u)) 0 rgba(51,192,106,.38); }
}
@keyframes bandeauGrNeg{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,90,77,0); }
  50%{ box-shadow:0 0 calc(5*var(--u)) 0 rgba(255,90,77,.40); }
}

.bandeau .bd-rds{
  display:grid; grid-template-columns:repeat(4, calc(100*var(--u)));
  flex:0 0 auto; min-width:0;
}
.bandeau .bd-rd{
  padding:0 calc(5*var(--u)); border-left:1px solid var(--line2);
  text-align:right; white-space:nowrap; min-width:0;
}
.bandeau .bd-rd:first-child{ border-left:none; }
.bandeau .bd-rd i{
  font-style:normal; font-size:calc(8*var(--u)); letter-spacing:calc(1*var(--u));
  color:var(--mut2); text-transform:uppercase; margin-right:calc(4*var(--u));
}
.bandeau .bd-rd b{ font-size:calc(11*var(--u)); font-weight:800; font-stretch:88%; }
.bandeau .bd-rd.bd-big b{ font-size:calc(12*var(--u)); }
.bandeau .bd-v{ color:var(--mut); }
.bandeau .bd-v.bd-pos{ color:var(--pos); }
.bandeau .bd-v.bd-neg{ color:var(--neg); }

/* ---------- < 860 px : on empile ---------------------------------------- */
@media (max-width:860px){
  .bandeau{ --u:clamp(1.3px, calc((100vw - 76px) / 224), 1.85px); }
  .bandeau .bd-scene{ padding:44px 10px 10px; }
  .bandeau .bd-planche{ width:auto; }
  .bandeau .bd-inst{ width:100%; }
  .bandeau .bd-planche{ padding:14px 14px 16px; }
  .bandeau .bd-row{
    flex-wrap:wrap; justify-content:flex-start;
    border-left:0; border-top:1px solid var(--line);
    padding:calc(8*var(--u)) 0;
  }
  .bandeau .bd-tag{ width:auto; text-align:left; }
  .bandeau .bd-chg{ width:auto; margin-left:auto; }
  .bandeau .bd-rds{ flex:1 0 100%; grid-template-columns:repeat(2, minmax(0,1fr));
    margin-top:calc(7*var(--u)); row-gap:calc(6*var(--u)); }
  .bandeau .bd-lbl{ width:100%; }
  .bandeau .bd-rd{ border-left:none; padding:0; text-align:left; }
  .bandeau .bd-rd:nth-child(2n){ text-align:right; }
  .bandeau .bd-lbl{ justify-content:flex-start; margin-bottom:calc(10*var(--u)); }
}

/* ---------- accessibilité : mouvement réduit = état final --------------- */
@media (prefers-reduced-motion: reduce){
  .bandeau .bd-trk{ animation:none !important; }
  .bandeau .bd-planche{ opacity:1 !important; transform:none !important; transition:none; }
  .bandeau .bd-cn{ opacity:1 !important; transform:none !important; transition:none; }
  .bandeau .bd-gr{ animation:none !important; }
  .bandeau .bd-snd{ transition:none; }
}

.cadre{
  /* ---- jetons repris de source interne (thème de l'app) ---- */
  --cadre-panel:#0B0C0E;   --cadre-line:#1d1f23;  --cadre-line2:#2b2e34;
  --cadre-txt:#e6e8ea;     --cadre-mut:#8b909a;   --cadre-mut2:#565b64;
  --cadre-amber:#ff9e2c;   --cadre-amber-dim:#c58a3e;
  --cadre-frame:#c85333;   --cadre-frame-dim:#6e2f1d;
  --cadre-teal:#3fb6bf;    --cadre-green:#33c06a;
  --cadre-blue:#2ea6e0;    --cadre-vert-logo:#40c463;
  /* ---- géométrie ---- */
  --cadre-larg:760px;      /* largeur du moniteur, bezel compris */
  --cadre-bezel:10px;
  --cadre-hdr:44px;
  --cadre-bandeau:24px;
  --cadre-rail:150px;
  --cadre-echelle:.62;     /* facteur d'échelle des fragments déposés */
  /* ---- mouvement (§2.4 du plan) ---- */
  --cadre-e-sortie:cubic-bezier(.16,1,.3,1);
  --cadre-e-etat:cubic-bezier(.22,1,.36,1);

  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:28px 20px 8px;
  font-family:"Archivo",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.cadre *,.cadre *::before,.cadre *::after{ box-sizing:border-box; }

/* ===================== LE MONITEUR ===================== */
.cadre-scene{
  perspective:1600px;
  perspective-origin:52% 42%;
  display:flex;
  justify-content:center;
}
.cadre-poste{
  transform:rotateY(6deg);
  transform-origin:50% 50%;
  width:var(--cadre-larg);
  max-width:100%;
}
.cadre--plat .cadre-scene{ perspective:none; }
.cadre--plat .cadre-poste{ transform:none; }

/* corps du moniteur : bezel noir MAT, coins carrés, ombre à 2 paliers */
.cadre-ecran{
  position:relative;
  padding:var(--cadre-bezel);
  background:linear-gradient(176deg,#292b31 0%,#1d1f24 26%,#16171c 66%,#0f1013 100%);
  border-radius:0;
  box-shadow:0 2px 4px rgba(27,24,21,.10), 0 30px 58px rgba(27,24,21,.24);
}
/* lèvre haute du bezel (plastique mat, pas de reflet) */
.cadre-ecran::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background:rgba(255,255,255,.10);
  pointer-events:none;
}
/* témoin d'alimentation, en bas à droite du bezel */
.cadre-led{
  position:absolute; right:14px; bottom:3px;
  width:4px; height:4px; border-radius:50%;
  background:#2a2c30;
  transition:background .3s linear, box-shadow .3s linear;
}
.cadre.is-on .cadre-led{ background:var(--cadre-green); box-shadow:0 0 6px rgba(51,192,106,.8); }

/* la dalle */
.cadre-verre{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  overflow:hidden;
  background:#000;
  box-shadow:0 0 0 1px #050506, inset 0 0 0 1px rgba(255,255,255,.035);
}
/* balayage d'allumage — une seule fois */
.cadre-verre::after{
  content:"";
  position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,transparent 0%,rgba(46,166,224,.10) 44%,
    rgba(64,196,99,.20) 50%,rgba(46,166,224,.10) 56%,transparent 100%);
}
.cadre.is-on .cadre-verre::after{ animation:cadreScan 760ms linear 60ms 1 both; }
@keyframes cadreScan{
  0%{ opacity:0; transform:translateY(-100%); }
  12%{ opacity:1; } 88%{ opacity:1; }
  100%{ opacity:0; transform:translateY(100%); }
}

/* pied fin */
.cadre-col{
  width:78px; height:30px; margin:0 auto;
  background:linear-gradient(90deg,#101115,#2a2c32 34%,#1c1e23 64%,#0e0f12);
}
.cadre-socle{
  width:232px; height:8px; margin:0 auto;
  background:linear-gradient(180deg,#2a2c32,#131418);
  box-shadow:0 1px 2px rgba(27,24,21,.10), 0 12px 20px rgba(27,24,21,.16);
}

/* ===================== LA COQUILLE DU TERMINAL ===================== */
.cadre-app{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--cadre-panel);
  color:var(--cadre-txt);
  opacity:0;
}
.cadre.is-on .cadre-app{ animation:cadreAllume 520ms var(--cadre-e-sortie) forwards; }
.cadre.is-fini .cadre-app{ opacity:1; animation:none; }
@keyframes cadreAllume{
  0%{ opacity:0; filter:brightness(2.4) saturate(.4); }
  45%{ opacity:1; }
  100%{ opacity:1; filter:none; }
}

/* ---------- EN-TÊTE (index.html:72-82, #hdr) ---------- */
.cadre-hdr{
  position:relative; z-index:3;
  flex:0 0 auto; height:var(--cadre-hdr);
  display:flex; align-items:center; gap:12px;
  padding:0 12px;
  background:linear-gradient(180deg,#0c1420,#0a0f18);
  border-bottom:1px solid var(--cadre-line);
}
/* le filet bleu→vert sous l'en-tête (#hdr::after) — se trace à l'allumage */
.cadre-hdr::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--cadre-blue),var(--cadre-vert-logo),transparent);
  opacity:.6; transform:scaleX(0); transform-origin:0 50%;
}
.cadre.is-on .cadre-hdr::after{ animation:cadreFilet 700ms var(--cadre-e-sortie) 260ms forwards; }
@keyframes cadreFilet{ to{ transform:scaleX(1); } }

.cadre-brand{ display:flex; align-items:center; gap:8px; }
.cadre-logo{ width:24px; height:24px; flex:0 0 auto;
  filter:drop-shadow(0 0 7px rgba(46,166,224,.35)); }
.cadre-brand > span:last-child{ display:block; }
.cadre-wm{ display:block; font-size:15px; font-weight:800; letter-spacing:.4px; line-height:1.05; }
.cadre-wm .h{ background:linear-gradient(90deg,#e8eef5,#aeb9c6);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.cadre-wm .f{ background:linear-gradient(90deg,var(--cadre-amber),#ffbf6b);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.cadre-tag{ display:block; font-size:6.8px; letter-spacing:1.8px; color:var(--cadre-mut2);
  text-transform:uppercase; margin-top:1px; white-space:nowrap; }

.cadre-sep{ width:1px; height:22px; background:var(--cadre-line2); flex:0 0 auto; }
.cadre-stat{ display:flex; align-items:center; gap:6px; font-size:10px;
  color:var(--cadre-mut); white-space:nowrap; }
.cadre-dot,.cadre-hdot{
  width:7px; height:7px; border-radius:50%; background:#5a6478; flex:0 0 auto;
  transition:background .25s linear, box-shadow .25s linear;
}
.cadre.is-on .cadre-dot{ background:var(--cadre-green); }
.cadre.is-on .cadre-hdot{ background:#3fbf6a; box-shadow:0 0 6px rgba(63,191,106,.55); }
/* respiration du voyant : 3 cycles puis calme (index.html:120) */
.cadre.is-on:not(.cadre--fixe) .cadre-dot{ animation:cadreSouffle 2.4s ease-in-out 1s 3; }
@keyframes cadreSouffle{
  0%,100%{ box-shadow:0 0 3px rgba(60,190,120,.35); }
  50%{ box-shadow:0 0 9px 1px rgba(60,190,120,.65); }
}
.cadre-sp{ flex:1 1 auto; }
.cadre-clock{ font-size:11px; color:var(--cadre-mut); letter-spacing:.3px; }

/* ---------- BANDEAU (emplacement, sous l'en-tête) ---------- */
.cadre-bandeau{
  flex:0 0 auto; height:var(--cadre-bandeau);
  background:#07090d;
  border-bottom:1px solid var(--cadre-frame-dim);
  overflow:hidden; position:relative;
}

/* ---------- RAIL (index.html:683-724, #nav) ---------- */
.cadre-corps{ flex:1 1 auto; min-height:0; display:flex; }
.cadre-rail{
  flex:0 0 var(--cadre-rail); width:var(--cadre-rail);
  background:var(--cadre-panel);
  border-right:1px solid var(--cadre-line2);
  padding-top:4px; overflow:hidden;
}
.cadre-navgrp{
  color:var(--cadre-amber-dim); font-size:8px; letter-spacing:1.1px;
  text-transform:uppercase; font-weight:700; padding:8px 10px 2px; line-height:10px;
}
.cadre-navi{
  display:flex; align-items:center; gap:8px;
  padding:3.5px 10px; color:var(--cadre-mut);
  border-left:2px solid transparent; font-size:10.5px; line-height:14px;
  white-space:nowrap;
  transition:color .16s var(--cadre-e-etat), background .16s var(--cadre-e-etat),
             border-left-color .2s var(--cadre-e-etat);
}
.cadre-navi.on{ color:var(--cadre-txt); border-left-color:var(--cadre-teal); background:#101820; }
.cadre-navi .ic{ width:13px; text-align:center; font-size:10.5px; flex:0 0 auto; }
/* cascade d'entrée du rail : 70 ms par ligne, une fois (§2.4 mvt 7) */
.cadre-navgrp,.cadre-navi{ opacity:0; transform:translateX(-6px); }
.cadre.is-on .cadre-navgrp,.cadre.is-on .cadre-navi{
  animation:cadreEntree 380ms var(--cadre-e-sortie) forwards;
  animation-delay:calc(200ms + var(--i,0) * 42ms);
}
.cadre.is-fini .cadre-navgrp,.cadre.is-fini .cadre-navi{
  opacity:1; transform:none; animation:none;
}
@keyframes cadreEntree{ to{ opacity:1; transform:none; } }

/* ---------- ZONE DE CONTENU + EMPLACEMENTS ---------- */
.cadre-zone{ flex:1 1 auto; min-width:0; display:flex; }
.cadre-zone > [data-slot]{ position:relative; min-width:0; overflow:hidden; }
.cadre-zone > [data-slot="gauche"]{
  flex:var(--cadre-part-g,60) 1 0; border-right:1px solid var(--cadre-line);
  --e:var(--cadre-echelle-g, var(--cadre-echelle));
}
.cadre-zone > [data-slot="droite"]{
  flex:var(--cadre-part-d,40) 1 0;
  --e:var(--cadre-echelle-d, var(--cadre-echelle));
}
.cadre-bandeau{ --e:var(--cadre-echelle-b, var(--cadre-echelle)); }

/* mise à l'échelle automatique de tout fragment déposé dans un emplacement */
.cadre [data-slot] > *:not(.cadre-vide){
  transform-origin:0 0;
  transform:scale(var(--e, var(--cadre-echelle)));
  width:calc(100% / var(--e, var(--cadre-echelle)));
  height:calc(100% / var(--e, var(--cadre-echelle)));
}

/* repères d'emplacement — DEV uniquement (.cadre--demo) */
.cadre-vide{ display:none; }
.cadre--demo .cadre-vide{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  color:var(--cadre-mut2); font-size:9px; letter-spacing:1.4px; text-transform:uppercase;
  background:
    repeating-linear-gradient(135deg,rgba(200,83,51,.045) 0 6px,transparent 6px 12px);
  box-shadow:inset 0 0 0 1px rgba(200,83,51,.30);
}
.cadre--demo .cadre-bandeau .cadre-vide{ letter-spacing:1.2px; font-size:8px; }

/* ===================== MODE PLAT (< 900 px) ===================== */
@media (max-width:900px){
  .cadre{
    --cadre-echelle:.42;
    --cadre-rail:44px;
    --cadre-bezel:6px;
    --cadre-hdr:40px;
    padding:18px 14px 6px;
  }
  .cadre-scene{ perspective:none; }
  .cadre-poste{ transform:none; width:100%; }
  .cadre-verre{ aspect-ratio:4/5; }
  .cadre-zone{ flex-direction:column; }
  .cadre-zone > [data-slot="gauche"]{
    flex:58 1 0; border-right:0; border-bottom:1px solid var(--cadre-line);
  }
  .cadre-zone > [data-slot="droite"]{ flex:42 1 0; }
  .cadre-tag{ display:none; }
  .cadre-navgrp{ display:none; }
  .cadre-navi{ gap:0; padding:5px 0; justify-content:center; font-size:0; }
  .cadre-navi .ic{ width:100%; font-size:12px; }
  .cadre-col{ width:74px; height:22px; }
  .cadre-socle{ width:190px; height:6px; }
  .cadre-hdr{ gap:8px; padding:0 8px; }
  .cadre-wm{ font-size:13px; }
  .cadre-clock{ font-size:10px; }
}
@media (max-width:520px){
  .cadre-stat.cadre-stat--src{ display:none; }
}

/* ===================== ACCESSIBILITÉ ===================== */
@media (prefers-reduced-motion:reduce){
  .cadre *,.cadre *::before,.cadre *::after{
    animation-duration:1ms !important; animation-delay:0ms !important;
    animation-iteration-count:1 !important; transition-duration:1ms !important;
  }
}

.pulse{
  /* palette site */
  --pl-paper:#F3EDE2; --pl-ink:#1B1815; --pl-ink2:#4B4640; --pl-rule:#D8D0C1;
  --pl-brique:#C85333; --pl-amber:#FF9E2C; --pl-violet:#3F36A0; --pl-night:#0B0C0E;
  /* variables reprises du thème de l'app (source interne :root) */
  --pl-head:#141519; --pl-line:#1d1f23; --pl-line2:#2b2e34;
  --pl-txt:#e6e8ea; --pl-mut:#8b909a; --pl-mut2:#565b64;
  --pl-frame:#c85333; --pl-frame-dim:#6e2f1d; --pl-acc:#e0a437;
  /* couleurs des courbes = celles réellement tracées par l'application (var COL) */
  --pl-net:#6467e8; --pl-calls:#d8723a; --pl-puts:#3a79d8;
  --pl-next:#18bdac; --pl-ret:#ff5e5e; --pl-px:#d0d0d0;

  font-family:"Archivo",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  color:var(--pl-ink); background:var(--pl-paper);
  padding:52px 20px 60px; box-sizing:border-box;
}
.pulse *{ box-sizing:border-box; }
.pulse .pl-wrap{ max-width:1160px; margin:0 auto; }

/* ---- chapeau ---- */
.pulse .pl-kick{
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--pl-brique); margin:0 0 10px;
  font-stretch:87%;
}
.pulse h2#pl-h{
  font-size:clamp(30px,4.6vw,52px); line-height:1.02; margin:0 0 14px;
  font-weight:800; font-stretch:80%; letter-spacing:-.015em; max-width:20ch;
}
.pulse .pl-sub{
  font-size:15px; line-height:1.5; color:var(--pl-ink2); margin:0 0 26px; max-width:58ch;
}
.pulse .pl-sub b{ color:var(--pl-ink); font-weight:700; }

/* ---- le panneau (réplique de .panel + .panel-head de l'app) ---- */
.pulse .pl-panel{
  background:var(--pl-night); border:1px solid var(--pl-frame); border-radius:2px;
  box-shadow:0 18px 44px rgba(27,24,21,.22); overflow:hidden;
  color:var(--pl-txt); font-size:13px;
}
.pulse .pl-phead{
  min-height:46px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px 10px; background:var(--pl-head); border-bottom:1px solid var(--pl-frame-dim);
  user-select:none;
}
.pulse .pl-dot{ width:7px; height:7px; border-radius:2px; flex:0 0 auto;
  background:linear-gradient(135deg,#3d9bd6,#33c06a); }
.pulse .pl-ttl{ font-size:12px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--pl-amber); white-space:nowrap; }
.pulse .pl-help{ width:19px; height:19px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font:italic 700 12px/1 Georgia,serif;
  color:var(--pl-amber); border:1px solid var(--pl-amber); flex:0 0 auto; }
.pulse .pl-hbtn{ background:#111a26; border:1px solid var(--pl-line2); color:var(--pl-mut);
  font:inherit; font-size:11px; padding:5px 10px; border-radius:2px; white-space:nowrap; }
.pulse .pl-hgrp{ display:inline-flex; gap:8px; }
.pulse .pl-sp{ flex:1 1 30px; }
.pulse .pl-chdr{ display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pulse .pl-seg{ display:inline-flex; border:1px solid var(--pl-line2); border-radius:2px; overflow:hidden; }
.pulse .pl-sb{ background:transparent; border:0; color:var(--pl-mut); font:inherit;
  font-size:12px; padding:5px 15px; transition:background .18s ease,color .18s ease; }
.pulse .pl-sb.on{ background:var(--pl-acc); color:#04110d; font-weight:700; }
.pulse .pl-tg{ display:inline-flex; align-items:center; gap:7px; color:var(--pl-mut); font-size:12px; white-space:nowrap; }
.pulse .pl-tg.on{ color:var(--pl-txt); }
.pulse .pl-sw{ width:28px; height:15px; border-radius:8px; background:#2a3140; position:relative;
  transition:background .2s ease; flex:0 0 auto; }
.pulse .pl-sw::after{ content:""; position:absolute; top:2px; left:2px; width:11px; height:11px;
  border-radius:50%; background:#8b95a6; transition:left .2s ease,background .2s ease; }
.pulse .pl-tg.on .pl-sw::after{ left:15px; background:#fff; }
.pulse .pl-tg.tg-all{ color:#6467e8; } .pulse .pl-tg.tg-all.on .pl-sw{ background:#6467e8; }
.pulse .pl-tg.tg-next{ color:#18bdac; } .pulse .pl-tg.tg-next.on .pl-sw{ background:#18bdac; }
.pulse .pl-ico{ background:transparent; border:1px solid rgba(120,132,150,.22); border-radius:2px;
  color:var(--pl-mut); width:30px; height:28px; font-size:16px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; }
.pulse .pl-ico.on{ color:var(--pl-acc); border-color:rgba(224,164,55,.55); }
.pulse .pl-max{ width:20px; height:20px; display:inline-flex; align-items:center;
  justify-content:center; color:var(--pl-mut2); font-size:12px; }

/* ---- la ligne de légende (#legend de l'app) ---- */
.pulse .pl-legend{ display:flex; gap:14px; font-size:12px; white-space:nowrap;
  overflow-x:auto; padding:6px 12px; background:var(--pl-night);
  border-bottom:1px solid var(--pl-line); scrollbar-width:thin; }
.pulse .pl-legend span{ font-weight:600; }
.pulse .pl-legend i{ font-style:normal; color:var(--pl-mut); font-weight:400; margin-left:4px; }

/* ---- rangée chart + menu ---- */
.pulse .pl-row{ display:flex; align-items:stretch; }
.pulse .pl-cw{ flex:1 1 auto; min-width:0; position:relative; display:flex; align-items:center; }
.pulse .pl-chart{ width:100%; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin; scrollbar-color:#2b2e34 #0b0c0e; }
.pulse .pl-chart svg{ display:block; width:100%; height:auto; min-width:820px; }
.pulse .pl-swipe{ display:none; position:absolute; right:10px; bottom:10px; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pl-mut2);
  background:rgba(11,12,14,.86); border:1px solid var(--pl-line2); padding:3px 7px; }

/* ---- réplique du menu #chart-menu (classes cm-* de l'app) ---- */
.pulse .pl-menu{
  flex:0 0 262px; width:262px; background:#0d1119; border-left:1px solid var(--pl-line);
  padding:13px 14px; font-size:12px; line-height:1.35; align-self:stretch;
}
.pulse .cm-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; }
.pulse .cm-head span{ font-weight:700; letter-spacing:.3px; }
.pulse .cm-reset{ color:var(--pl-acc); font-size:11px; }
.pulse .cm-seg{ display:inline-flex; border:1px solid var(--pl-line2); border-radius:2px;
  overflow:hidden; margin-bottom:12px; vertical-align:middle; }
.pulse .cm-sbtn{ background:transparent; border:0; color:var(--pl-mut); font:inherit;
  font-size:11px; padding:5px 13px; transition:background .18s ease,color .18s ease; }
.pulse .cm-mini .cm-sbtn{ padding:4px 8px; }
.pulse .cm-sbtn.on{ background:var(--pl-acc); color:#04110d; font-weight:700; }
.pulse .cm-tgls{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-bottom:12px; }
.pulse .cm-tg{ display:inline-flex; align-items:center; gap:7px; color:var(--pl-mut); font-size:11px; }
.pulse .cm-tg.on{ color:var(--pl-txt); }
.pulse .cm-sw{ width:26px; height:14px; border-radius:8px; background:#2a3140; position:relative;
  transition:background .2s ease; flex:0 0 auto; }
.pulse .cm-sw::after{ content:""; position:absolute; top:2px; left:2px; width:10px; height:10px;
  border-radius:50%; background:#8b95a6; transition:left .2s ease,background .2s ease; }
.pulse .cm-tg.on .cm-sw{ background:var(--pl-acc); }
.pulse .cm-tg.on .cm-sw::after{ left:14px; background:#04110d; }
.pulse .cm-tg.tg-all{ color:#6467e8; } .pulse .cm-tg.tg-all.on .cm-sw{ background:#6467e8; }
.pulse .cm-tg.tg-next{ color:#18bdac; } .pulse .cm-tg.tg-next.on .cm-sw{ background:#18bdac; }
.pulse .cm-tg.tg-ret{ color:#ff5e5e; } .pulse .cm-tg.tg-ret.on .cm-sw{ background:#ff5e5e; }
.pulse .cm-tg.tg-all.on .cm-sw::after,
.pulse .cm-tg.tg-next.on .cm-sw::after,
.pulse .cm-tg.tg-ret.on .cm-sw::after{ background:#fff; }
.pulse .cm-block{ margin-bottom:10px; }
.pulse .cm-lbl{ font-weight:700; font-size:11px; margin-bottom:8px; }
.pulse .cm-rw input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:5px;
  border-radius:3px; background:#2a3140; outline:none; margin:3px 0; pointer-events:none; }
.pulse .cm-rw input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:15px; height:15px; border-radius:50%; background:var(--pl-acc);
  border:2px solid #0d1119; box-shadow:0 0 0 1px rgba(224,164,55,.4); }
.pulse .cm-rw input[type=range]::-moz-range-thumb{ width:14px; height:14px; border-radius:50%;
  background:var(--pl-acc); border:2px solid #0d1119; }
.pulse .cm-rw-ticks{ display:flex; justify-content:space-between; font-size:9px;
  color:var(--pl-mut); margin-top:3px; }
.pulse .cm-rw-ticks span{ transition:color .14s; }
.pulse .cm-rw-ticks span.act{ color:var(--pl-acc); font-weight:700; }
.pulse .cm-colors{ display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:5px; }
.pulse .cm-colors b{ display:inline-flex; align-items:center; gap:5px; font-size:11px;
  font-weight:400; color:var(--pl-mut); }
.pulse .cm-chip{ width:18px; height:18px; border:1px solid var(--pl-line2); border-radius:2px; }
.pulse .cm-close{ background:var(--pl-acc); color:#04110d; border:0; border-radius:2px;
  padding:5px 16px; font:inherit; font-size:11px; font-weight:700; }
.pulse .cm-foot{ display:flex; justify-content:flex-end; margin-top:4px; }
.pulse .pl-menu button, .pulse .pl-phead button{ cursor:default; }

/* note sous le panneau : provenance, pas description d'image */
.pulse .pl-foot{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:baseline;
  margin-top:14px; font-size:12px; color:var(--pl-ink2); }
.pulse .pl-foot b{ color:var(--pl-ink); font-weight:700; }
.pulse .pl-foot .pl-tagsq{ display:inline-block; width:8px; height:8px; margin-right:6px;
  transform:translateY(0); }

/* ---- animation d'entrée ---- */
.pulse .pl-line{ fill:none; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; }
.pulse.pl-go .pl-line{ transition:stroke-dashoffset 2.4s cubic-bezier(.25,.65,.3,1); stroke-dashoffset:0; }
.pulse.pl-go .pl-l-calls{ transition-delay:.2s; }
.pulse.pl-go .pl-l-puts{ transition-delay:.4s; }
.pulse .pl-badge{ opacity:0; transform:translateX(10px); }
.pulse.pl-go .pl-badge{ opacity:1; transform:translateX(0);
  transition:opacity .5s ease .9s, transform .5s cubic-bezier(.2,.8,.3,1) .9s; }
.pulse.pl-go .pl-b-net{ transition-delay:2.55s; }
.pulse.pl-go .pl-b-calls{ transition-delay:2.7s; }
.pulse.pl-go .pl-b-puts{ transition-delay:2.85s; }
.pulse .pl-grid, .pulse .pl-axis{ opacity:0; }
.pulse.pl-go .pl-grid{ opacity:1; transition:opacity .7s ease; }
.pulse.pl-go .pl-axis{ opacity:1; transition:opacity .7s ease .25s; }
/* série Next Expiry : n'existe à l'écran que quand l'interrupteur s'allume */
.pulse .pl-l-next, .pulse.pl-go .pl-l-next{ opacity:0; stroke-dashoffset:1; }
.pulse .pl-g-next .pl-badge{ opacity:0; }
.pulse .pl-g-next.on .pl-l-next{ opacity:1; stroke-dashoffset:0;
  transition:opacity .3s ease, stroke-dashoffset 1s cubic-bezier(.25,.65,.3,1); }
.pulse .pl-g-next.on .pl-badge{ opacity:1; transform:translateX(0); transition:opacity .4s ease .75s; }
/* vue Total : calls et puts disparaissent */
.pulse .pl-g-cp{ transition:opacity .45s ease; }
.pulse.pl-stage-total .pl-g-cp{ opacity:0; }
.pulse.pl-go .pl-b-calls, .pulse.pl-go .pl-b-puts{ transition:opacity .45s ease, transform .5s cubic-bezier(.2,.8,.3,1); }
.pulse.pl-stage-total .pl-b-calls, .pulse.pl-stage-total .pl-b-puts{ opacity:0; }
/* clignotement des plages hors séance */
.pulse .pl-eh{ transition:opacity .35s ease; }
.pulse.pl-eh-blink .pl-eh{ opacity:.15; }

@media (max-width:900px){
  .pulse .pl-row{ flex-direction:column; }
  .pulse .pl-menu{ flex:0 0 auto; width:100%; border-left:0; border-top:1px solid var(--pl-line); }
}
.pulse .pl-cw.pl-scroll .pl-swipe{ display:block; }
@media (max-width:640px){
  .pulse .pl-sp{ flex:1 1 100%; }                 /* casse la ligne : titre / contrôles */
  .pulse .pl-max{ display:none; }
  .pulse .pl-hbtn{ padding:4px 8px; font-size:10.5px; }
  .pulse .pl-legend{ flex-wrap:wrap; overflow-x:visible; gap:6px 12px; }
  /* 2 lignes nettes : segment + roue, puis les interrupteurs */
  .pulse .pl-chdr{ width:100%; gap:10px 12px; }
  .pulse .pl-chdr .pl-seg{ order:1; } .pulse .pl-chdr .pl-ico{ order:2; }
  .pulse .pl-chdr .pl-tg{ order:3; }
}
@media (max-width:520px){
  .pulse{ padding:38px 14px 44px; }
  .pulse .pl-legend{ font-size:11px; gap:11px; }
  .pulse .pl-chdr{ gap:10px; }
}
@media (prefers-reduced-motion:reduce){
  .pulse .pl-line{ stroke-dashoffset:0 !important; transition:none !important; }
  .pulse .pl-badge{ opacity:1 !important; transform:none !important; transition:none !important; }
  .pulse .pl-grid, .pulse .pl-axis{ opacity:1 !important; transition:none !important; }
  .pulse .pl-sw::after, .pulse .cm-sw::after, .pulse .pl-sb, .pulse .cm-sbtn,
  .pulse .pl-g-cp, .pulse .pl-eh{ transition:none !important; }
}

.dealer{
  /* jetons repris tels quels de source interne */
  --panel:#0b0c0e; --panelHead:#141519; --line:#1d1f23; --line2:#2b2e34;
  --txt:#e6e8ea; --mut:#8b909a; --mut2:#565b64;
  --blue:#3d9bd6; --green:#33c06a; --amber:#ff9e2c; --amber-dim:#c58a3e;
  --frame:#c85333; --frame-dim:#6e2f1d; --teal:#3fb6bf;
  --pos:#33c06a; --neg:#ff5a4d;
  --glow:0 6px 22px rgba(0,0,0,.28), 0 1px 0 rgba(0,0,0,.4);
  display:block; width:100%; padding:0; margin:0 auto; max-width:1160px;
  font-family:"Archivo",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.dealer *{ box-sizing:border-box; }

/* ---------- la fenêtre ---------- */
.dealer .dpanel{
  max-width:700px; margin:0 auto;
  display:flex; flex-direction:column;
  background:var(--panel); color:var(--txt);
  border:1px solid var(--frame); border-radius:2px;
  box-shadow:var(--glow); overflow:hidden;
  font-size:13px; line-height:1.45;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  position:relative;
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.dealer .dhead{
  height:38px; flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:0 12px; background:var(--panelHead);
  border-bottom:1px solid var(--frame-dim); user-select:none;
}
.dealer .dotmark{ width:8px; height:8px; border-radius:2px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--blue),var(--green)); }
.dealer .ttl{ font-size:12.5px; font-weight:600; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--amber); }
.dealer .sp{ flex:1; }
.dealer .dcx{ font-size:10px; color:var(--mut); letter-spacing:.3px; white-space:nowrap; }
.dealer .dgrip{ position:absolute; right:0; bottom:0; width:16px; height:16px;
  background:linear-gradient(135deg,transparent 50%,var(--line2) 50%,var(--line2) 60%,transparent 60%,transparent 72%,var(--line2) 72%,var(--line2) 82%,transparent 82%); }

.dealer .dbody{ padding:14px 16px 16px; }
.dealer .dcols{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.dealer .dcol{ display:flex; flex-direction:column; gap:14px; justify-content:flex-start; }
.dealer .dcol + .dcol{ border-left:1px solid var(--line); padding-left:24px; margin-left:0; }

/* ---------- blocs (copie de #dvuePanel, tailles × ~1,15) ---------- */
.dealer .dv-block{ display:flex; flex-direction:column; gap:7px; }
.dealer .dv-lab{ font-size:10.5px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--amber-dim); display:flex; align-items:center; gap:7px; }
.dealer .dv-lab .mut{ color:var(--mut); text-transform:none; letter-spacing:0; }
.dealer .dv-vhead{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.dealer .dv-reg{ font-size:17px; font-weight:800; letter-spacing:.3px; border-radius:2px; }
.dealer .dv-reg.pos{ color:var(--pos); } .dealer .dv-reg.neg{ color:var(--neg); }
.dealer .dv-chip{ font-size:10.5px; padding:1px 6px; border:1px solid var(--line);
  color:var(--mut); white-space:nowrap; border-radius:2px; }
.dealer .dv-chip.pos{ color:var(--pos); border-color:rgba(51,192,106,.35); }
.dealer .dv-chip.neg{ color:var(--neg); border-color:rgba(255,90,77,.35); }
.dealer .dv-mech{ font-size:11.5px; color:var(--mut); line-height:1.45; }
.dealer .dv-mech b{ color:var(--txt); font-weight:700; }
.dealer .dv-em{ display:flex; align-items:baseline; gap:8px; font-size:11.5px;
  color:var(--mut); text-transform:uppercase; letter-spacing:.5px; }
.dealer .dv-em b{ color:var(--txt); font-size:15px; letter-spacing:0; }
.dealer .dv-sep{ height:1px; background:var(--line); opacity:.55; }

/* interrupteurs segmentés */
.dealer .dv-wintog{ margin-left:auto; display:inline-flex; border:1px solid var(--line);
  border-radius:2px; overflow:hidden; }
.dealer .dv-wb{ position:relative; font-size:10.5px; padding:3px 10px; background:transparent;
  color:var(--mut); border:0; cursor:default; letter-spacing:.5px; font-family:inherit;
  transition:color .3s ease .06s; }
.dealer .dv-wb::before{ content:""; position:absolute; inset:0; background:var(--frame);
  transform:scaleX(1); transform-origin:left;
  transition:transform .42s cubic-bezier(.2,.75,.25,1) .05s; }
.dealer .dv-wb span{ position:relative; z-index:1; }
.dealer .dv-wb:not(.on)::before{ transform:scaleX(0); }
.dealer .dv-wb.on{ color:#fff; }

/* nets */
.dealer .dv-nets{ display:flex; gap:12px; }
.dealer .dv-net{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.dealer .dv-nlab{ font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--mut2); }
.dealer .dv-net b{ font-size:20px; font-weight:800; line-height:1.2; }
.dealer .dv-net b.pos{ color:var(--pos); } .dealer .dv-net b.neg{ color:var(--neg); }
.dealer .dv-dlt{ font-size:10.5px; color:var(--mut); }
.dealer .dv-dlt.pos{ color:var(--pos); } .dealer .dv-dlt.neg{ color:var(--neg); }

/* colonne vertébrale short/long gamma */
.dealer .dv-spine{ display:flex; align-items:center; gap:8px; }
.dealer .dv-end{ font-size:9.5px; letter-spacing:.5px; color:var(--mut2); white-space:nowrap; }
.dealer .dv-track{ position:relative; flex:1; height:11px; border:1px solid var(--line);
  background:linear-gradient(90deg, rgba(255,90,77,.30), rgba(255,90,77,.05) 46%, rgba(51,192,106,.05) 54%, rgba(51,192,106,.30)); }
.dealer .dv-zero{ position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--mut2); opacity:.6; }
.dealer .dv-marker{ position:absolute; top:50%; left:23%; width:11px; height:11px;
  transform:translate(-50%,-50%); border:2px solid var(--panel);
  transition:left .8s cubic-bezier(.22,.68,.24,1) .18s; }
.dealer .dv-marker.pos{ background:var(--pos); } .dealer .dv-marker.neg{ background:var(--neg); }

/* structure par échéance */
.dealer .dv-ts{ display:flex; flex-direction:column; gap:6px; }
.dealer .dv-tsrow{ display:flex; align-items:center; gap:8px; }
.dealer .dv-tsk{ font-size:10.5px; color:var(--mut); width:48px; flex:0 0 auto; }
.dealer .dv-div{ position:relative; flex:1; min-width:40px; height:14px; background:rgba(255,255,255,.02); }
.dealer .dv-dv-axis{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line); }
.dealer .dv-dv-bar{ position:absolute; top:2px; bottom:2px; left:50%; width:0;
  transition:left .85s cubic-bezier(.22,.68,.24,1), width .85s cubic-bezier(.22,.68,.24,1); }
.dealer .dv-tsrow:nth-child(1) .dv-dv-bar{ transition-delay:.30s; }
.dealer .dv-tsrow:nth-child(2) .dv-dv-bar{ transition-delay:.36s; }
.dealer .dv-tsrow:nth-child(3) .dv-dv-bar{ transition-delay:.42s; }
.dealer .dv-tsv{ font-size:11px; width:64px; text-align:right; flex:0 0 auto; color:var(--mut); }
.dealer .dv-tsv.pos{ color:var(--pos); } .dealer .dv-tsv.neg{ color:var(--neg); }
.dealer .dv-tsd{ font-size:9.5px; width:52px; text-align:right; flex:0 0 auto; color:var(--mut2); }
.dealer .dv-tsd.pos{ color:var(--pos); } .dealer .dv-tsd.neg{ color:var(--neg); }
.dealer .dv-read{ font-size:11px; color:var(--mut); line-height:1.45; }
.dealer .dv-read b{ color:var(--txt); }

/* tilts + aimant */
.dealer .dv-flux{ flex-direction:row; gap:0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); margin-top:auto; }
.dealer .dv-fx{ flex:1; display:flex; flex-direction:column; gap:3px; padding:9px 0; min-width:0;
  justify-content:space-between; }
.dealer .dv-fx + .dv-fx{ border-left:1px solid var(--line); padding-left:11px; }
.dealer .dv-flux .dv-nlab{ font-size:9.5px; letter-spacing:.35px; }
.dealer .dv-fx b{ font-size:15px; color:var(--txt); font-weight:700; margin-top:auto; }

/* put/call + skew */
.dealer .dv-fxviz{ display:flex; gap:14px; align-items:center; }
.dealer .dv-gauge{ flex:0 0 150px; display:flex; flex-direction:column; align-items:center; }
.dealer .dv-gcv{ width:150px; height:75px; display:block; }
.dealer .dv-gends{ display:flex; justify-content:space-between; width:132px; margin-top:-7px;
  font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--mut2); }
.dealer .dv-pcinfo{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:0; }
.dealer .dv-pcbig{ font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--mut); }
.dealer .dv-pcbig b{ color:var(--txt); font-size:23px; letter-spacing:0; margin-left:5px; }
.dealer .dv-skews{ display:flex; flex-direction:column; gap:11px; }
.dealer .dv-skrow{ display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:9px; }
.dealer .dv-skv{ font-size:15px; color:var(--mut); font-weight:700; }
.dealer .dv-skv.pos{ color:var(--pos); } .dealer .dv-skv.neg{ color:var(--neg); }
.dealer .dv-spark{ width:100%; height:28px; display:block; }

/* échelles IV / VRP */
.dealer .dv-vrow{ display:flex; align-items:baseline; gap:8px; }
.dealer .dv-verdict{ font-size:16px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; }
.dealer .dv-verdict.calm{ color:var(--teal); }
.dealer .dv-verdict.warm{ color:var(--amber); }
.dealer .dv-verdict.hot{ color:var(--neg); }
.dealer .dv-bigval{ margin-left:auto; font-size:18px; color:var(--txt); font-weight:700; }
.dealer .dv-scale{ position:relative; height:7px; border:1px solid var(--line);
  background:linear-gradient(90deg, rgba(63,182,191,.45), rgba(197,138,62,.30) 50%, rgba(255,90,77,.45)); }
.dealer .dv-scale i{ position:absolute; top:-3px; bottom:-3px; width:2px; background:#e6e8ea;
  transition:left .85s cubic-bezier(.22,.68,.24,1) .45s; }
.dealer .dv-ends3{ display:flex; justify-content:space-between; font-size:9px;
  text-transform:uppercase; letter-spacing:.5px; color:var(--mut2); }
.dealer .dv-kv{ display:flex; gap:14px; font-size:10.5px; color:var(--mut); flex-wrap:wrap; }
.dealer .dv-kv b{ color:var(--txt); font-size:11.5px; }

/* pied : niveaux clés */
.dealer .dv-foot{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:7px; }
.dealer .dv-lvhead{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.dealer .dd{ position:relative; display:inline-block; margin-left:auto; }
.dealer .ddbtn{ background:#111a26; border:1px solid var(--line2); color:var(--txt);
  font-size:11px; padding:5px 10px; border-radius:2px; cursor:default; font-family:inherit;
  display:inline-flex; align-items:center; gap:8px; min-width:104px; justify-content:space-between;
  transition:border-color .3s ease; }
.dealer .ddbtn i{ font-style:normal; color:var(--mut); font-size:9px;
  transition:transform .3s ease; display:inline-block; }
.dealer .dd.open .ddbtn{ border-color:var(--teal); }
.dealer .dd.open .ddbtn i{ transform:rotate(180deg); }
.dealer .ddmenu{ position:absolute; bottom:calc(100% + 5px); left:0; z-index:5;
  background:#0d1420; border:1px solid var(--line2); border-radius:2px; padding:8px 9px;
  min-width:186px; box-shadow:0 -10px 28px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.985); transform-origin:0 100%;
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.75,.25,1), visibility 0s linear .22s; }
.dealer .dd.open .ddmenu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.dealer .ddmenu label{ display:flex; align-items:center; gap:8px; padding:3px 2px;
  font-size:11px; color:var(--txt); }
.dealer .ddmenu label .mut{ color:var(--mut); }
.dealer .ddmenu .box{ width:13px; height:13px; flex:0 0 auto; border:1px solid #4fb8c9;
  border-radius:2px; position:relative; background:transparent; }
.dealer .ddmenu .box.on{ background:#4fb8c9; }
.dealer .ddmenu .box.on::after{ content:""; position:absolute; left:3.5px; top:1px;
  width:4px; height:7px; border:solid #0d1420; border-width:0 2px 2px 0; transform:rotate(42deg); }
.dealer .lvl-allrow{ display:flex; gap:7px; margin-top:8px; border-top:1px solid var(--line2); padding-top:8px; }
.dealer .lvl-allrow .btn{ font-size:10px; padding:2px 9px; }
.dealer .grp{ display:flex; gap:3px; padding:2px; background:#0a0f18; border:1px solid var(--line);
  border-radius:2px; }
.dealer .btn{ position:relative; background:transparent; border:1px solid transparent;
  color:var(--mut); padding:3px 10px; border-radius:2px; font-size:11px; font-family:inherit;
  cursor:default; transition:color .3s ease .06s, border-color .3s ease .06s; }
.dealer .btn span{ position:relative; z-index:1; }
.dealer .btn::before{ content:""; position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(135deg,rgba(46,166,224,.18),rgba(64,196,99,.18));
  box-shadow:0 0 8px rgba(46,166,224,.15);
  transform:scaleX(1); transform-origin:left;
  transition:transform .42s cubic-bezier(.2,.75,.25,1) .05s; }
.dealer .btn:not(.on)::before{ transform:scaleX(0); }
.dealer .btn.on{ color:#eef2f8; border-color:var(--blue); }
.dealer .dv-lvlist{ font-size:11px; color:var(--mut); }

/* ---------- état de départ (posé avant la première peinture) ---------- */
.dealer.is-prep .dpanel{ opacity:0; transform:translateY(12px); }
.dealer.is-prep .dv-wb.on::before,
.dealer.is-prep .btn.on::before{ transform:scaleX(0); }
.dealer.is-prep .dv-wb.on{ color:var(--mut); }
.dealer.is-prep .btn.on{ color:var(--mut); border-color:transparent; }
.dealer.is-prep .dv-marker{ left:50% !important; }
.dealer.is-prep .dv-dv-bar{ left:50% !important; width:0 !important; }
.dealer.is-prep .dv-scale i{ left:3% !important; }
.dealer.is-prep .dv-mech,
.dealer.is-prep .dv-read,
.dealer.is-prep .dv-kv,
.dealer.is-prep .dv-flux,
.dealer.is-prep .dv-foot,
.dealer.is-prep .dv-vhead{ opacity:0; }
.dealer.is-prep .dv-vhead{ transform:translateY(5px); }
.dealer .dv-mech{ transition:opacity .5s ease 1.05s; }
.dealer .dv-read{ transition:opacity .5s ease .95s; }
.dealer .dv-kv{ transition:opacity .5s ease .8s; }
.dealer .dv-flux{ transition:opacity .5s ease .7s; }
.dealer .dv-foot{ transition:opacity .5s ease 1.15s; }
.dealer .dv-vhead{ transition:opacity .45s ease 1.3s, transform .45s cubic-bezier(.2,.75,.25,1) 1.3s; }

@keyframes dealerFlash{ 0%,100%{ box-shadow:none; } 50%{ box-shadow:0 0 0 2px currentColor, 0 0 18px currentColor; } }
.dealer .dv-reg.dvflash{ animation:dealerFlash .9s ease-in-out 2; }

/* ---------- étroit ---------- */
@media (max-width:719px){
  .dealer .dcols{ grid-template-columns:1fr; gap:14px; }
  .dealer .dcol + .dcol{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:14px; }
  .dealer .dbody{ padding:12px 13px 14px; }
  .dealer .dhead{ height:auto; min-height:38px; padding:8px 10px; gap:6px; align-items:center; }
  .dealer .ttl{ font-size:11px; letter-spacing:1.1px; }
  .dealer .dcx{ font-size:9px; }
  .dealer .dv-flux{ margin-top:0; }
  .dealer .dv-fxviz{ gap:12px; }
  .dealer .dv-gauge{ flex:0 0 132px; } .dealer .dv-gcv{ width:132px; height:66px; }
  .dealer .dv-gends{ width:116px; }
  .dealer .dd{ margin-left:0; }
}
@media (max-width:430px){
  .dealer .dv-tsk{ width:42px; font-size:10px; }
  .dealer .dv-tsv{ width:56px; font-size:10.5px; }
  .dealer .dv-tsd{ width:46px; font-size:9px; }
  .dealer .dv-net b{ font-size:18px; }
  .dealer .dv-fxviz{ flex-direction:row; align-items:center; gap:12px; }
  .dealer .dv-gauge{ flex:0 0 118px; } .dealer .dv-gcv{ width:118px; height:60px; }
  .dealer .dv-gends{ width:104px; margin-top:-6px; }
  .dealer .dv-pcbig b{ font-size:20px; }
}

@media (prefers-reduced-motion:reduce){
  .dealer *, .dealer *::before{ transition:none !important; animation:none !important; }
}
/* ---- reglages de la page sur les fragments ---- */

/* ---- fond vivant (Gabriel 17 h 05 : un fond anime, finance) : sous tout le contenu ---- */
.fv{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fv-grille{position:absolute;inset:-96px;background-image:linear-gradient(rgba(27,24,21,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(27,24,21,.055) 1px,transparent 1px);background-size:96px 96px;animation:fondGrille 140s linear infinite}
@keyframes fondGrille{to{transform:translate(96px,96px)}}
.fv-voile{position:absolute;width:62vw;height:62vw;border-radius:50%;filter:blur(110px);opacity:.9}
.fv-voile.v1{left:-18vw;top:-22vw;background:radial-gradient(closest-side,rgba(63,54,160,.10),rgba(63,54,160,0) 70%);animation:fondDerive1 52s ease-in-out infinite alternate}
.fv-voile.v2{right:-20vw;bottom:-26vw;background:radial-gradient(closest-side,rgba(200,83,51,.10),rgba(200,83,51,0) 70%);animation:fondDerive2 64s ease-in-out infinite alternate}
@keyframes fondDerive1{to{transform:translate(14vw,10vw)}}
@keyframes fondDerive2{to{transform:translate(-16vw,-8vw)}}
.fv-courbes{position:absolute;left:-10vw;top:8vh;width:120vw;height:84vh;opacity:.22;animation:fondGlisse 90s ease-in-out infinite alternate}
@keyframes fondGlisse{to{transform:translateX(-6vw)}}
.fv-courbes .fc{fill:none;stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:fondTrace 16s cubic-bezier(.3,.6,.4,1) forwards}
.fv-courbes .fc1{stroke:#3F36A0}.fv-courbes .fc2{stroke:#C85333;animation-delay:1.2s}.fv-courbes .fc3{stroke:#1F7A45;animation-delay:2.4s}
@keyframes fondTrace{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.fv *{animation:none!important}.fv-courbes .fc{stroke-dashoffset:0}}
@media (max-width:900px){.fv-courbes{opacity:.14}.fv-grille{background-size:64px 64px}}

/* ---------- les fragments dans la page ---------- */
.bandeau--bande{max-width:none;background:transparent;padding:0}
.bandeau--inst{background:transparent}
.bandeau--inst .bd-scene{padding:34px 10px 10px}
.pulse--acte{background:transparent;padding:0}
.pulse--acte .pl-wrap{max-width:1040px}
@media (min-width:901px){
  .pulse--acte .pl-chart svg{min-width:0;max-height:540px}
}
.pulse--acte .pl-foot{justify-content:flex-end}
.pl-cle{display:inline-flex;align-items:center;gap:6px}
.pl-cle .pl-tagsq{margin-left:14px}
.pl-cle .pl-tagsq:first-child{margin-left:0}
.dealer--acte{margin:0}

/* dans le cadre : on enleve le papier, on desserre le chart, on empile le dealer */
.cadre .pulse{background:transparent;padding:0}
.cadre .pulse .pl-wrap{max-width:none}
.cadre .pulse .pl-panel{border:0;box-shadow:none;border-radius:0;height:100%}
.cadre .pulse .pl-chart svg{min-width:0}
.cadre .pulse .pl-phead{min-height:38px}
.cadre .bandeau{max-width:none;background:transparent}
.cadre .bandeau .bd-tape{border-top:0;border-bottom:0;height:100%}
.cadre .dealer{max-width:none}
.cadre .dealer .dpanel{max-width:none;border:0;box-shadow:none;border-radius:0}
.cadre .dealer .dcols{grid-template-columns:1fr;gap:13px}
.cadre .dealer .dcol+.dcol{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:13px}
.cadre .dealer .dgrip{display:none}
.cadre [data-slot="droite"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38px;
  background:linear-gradient(180deg,rgba(11,12,14,0),rgba(11,12,14,.92));pointer-events:none;z-index:2}
.heros .cadre{padding:0}
/* le rail tient en entier dans une dalle 16:9 de 720 px */
.heros .cadre-navgrp{padding-top:6px}
.heros .cadre-navi{padding-top:3px;padding-bottom:3px}

/* ---------- ruptures ---------- */
@media (max-width:1200px){
  .heros{grid-template-columns:minmax(320px,1fr) 600px;gap:32px}
  .niveaux{grid-template-columns:minmax(280px,1fr) 560px;gap:30px}
}
@media (max-width:1100px){
  .heros{grid-template-columns:1fr;gap:34px}
  .heros h1{max-width:14ch}
  .niveaux{grid-template-columns:1fr}
  .tuiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .corps{padding:0 20px}
  .entete{height:auto;padding:12px 0;flex-wrap:wrap;gap:10px}
  .entete nav{gap:18px;font-size:14px}
  .acte{grid-template-columns:1fr;padding-top:68px;gap:6px}
  .acte .h{padding-top:0}
  .temps{grid-template-columns:1fr;gap:16px}
  .histoire,.entrer{grid-template-columns:1fr}
  .histoire{padding-top:70px}
  .portrait{max-width:340px}
  .reprise{margin:26px -20px 0;flex-wrap:wrap;padding:24px 20px}
  .hud,.leg{padding-left:16px;padding-right:16px;gap:12px;font-size:13.5px}
  .instru .deux{grid-template-columns:1fr;gap:18px}
  .instru{padding-top:64px}
  .chiffres{gap:22px}
}
@media (max-width:640px){
  .tuiles{grid-template-columns:1fr;gap:24px}
  .entete nav a:not(.cx){display:none}
  .vue{height:clamp(200px,52vw,300px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .montee-txt{opacity:1;transform:none;transition:none}
  .tuile{opacity:1;transform:none;transition:none}
  .cta,.cta-f,.cta-f i{transition:none}
}


/* =========================================================================
   MISE EN LIGNE — ce que l'ébauche portait en style="…" (interdit par la CSP)
   et ce que la page gagne en passant du prototype au site servi.
   ========================================================================= */

/* ---------- utilitaires (ex-style en ligne) ---------- */
.m0{margin:0}
.mt3{margin-top:3px}
.mt8{margin-top:8px}
.u-mr4{margin:0 4px 0 0}
.u-ml6{margin-left:6px}
.u-l23{left:23%}
.u-l62{left:62%}
.u-l126{left:12.6%}
.u-b1{left:50%;width:1.08%;background:var(--pos)}
.u-b2{left:2%;width:48%;background:var(--neg)}
.u-b3{left:40.78%;width:9.22%;background:var(--neg)}
.u-amb{color:var(--amber)}
.u-vert{background:#33C06A}
.u-rouge{background:#FF5A4D}
.u-rang{display:flex;flex-wrap:wrap;gap:4px}
.u-rang2{align-items:center;margin-top:6px}
.k-net{color:#6467e8}.k-calls{color:#d8723a}.k-puts{color:#3a79d8}
.k-nx{color:#18bdac}.k-rge{color:#ff5e5e}.k-gris{color:#d0d0d0}
.b-net{background:#6467e8}.b-calls{background:#d8723a}.b-puts{background:#3a79d8}
.b-nx{background:#18bdac}.b-rge{background:#ff5e5e}.b-gris{background:#d0d0d0}
.cmb-33c0d6{border:1px solid #33c0d6}
.cmb-e0a44b{border:1px solid #e0a44b}
.cmb-a06fe0{border:1px solid #a06fe0}
.cmb-3fbf6a{border:1px solid #3fbf6a}
.cmb-8892a0{border:1px solid #8892a0}
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}.i6{--i:6}.i7{--i:7}
.i8{--i:8}.i9{--i:9}.i10{--i:10}.i11{--i:11}.i12{--i:12}.i13{--i:13}.i14{--i:14}.i15{--i:15}

/* ---------- titre court posé au-dessus d'une planche (§5 : pas de légende) ---------- */
.ttl-court{font-size:clamp(22px,2.5vw,32px);line-height:1.12;font-weight:750;
  font-variation-settings:"wdth" 74;letter-spacing:-.006em;max-width:30ch;margin:46px 0 16px}

/* ---------- la boucle du carnet, sous la grille des modules ---------- */
.planche--video{margin-top:44px}
.vue--video{display:block;width:100%;height:clamp(240px,36vw,470px);
  object-fit:cover;object-position:left top;background:var(--nuit)}
.vue--poster{display:none;
  background-image:url("/vitrine/video/rheo-es-page-1109-v3-poster.17602cde5e.webp")}
/* pas de vidéo sous 900 px : le poster seul (plan §2.4, mouvement 6) */
@media (max-width:899px){.vue--video{display:none}.vue--poster{display:block}}
@media (prefers-reduced-motion:reduce){.vue--video{display:none}.vue--poster{display:block}}

/* ---------- le vrai formulaire d'accès (POST /vitrine/demande) ---------- */
.sous-titre{color:var(--encre2);max-width:54ch}
.fort{font-weight:700;margin:0 0 6px}
.porte .lgd{display:block;font-size:13px;color:var(--nuitmut);margin:14px 0 6px;padding:0}
.porte .set{border:0;margin:0;padding:0;min-width:0}
.porte .saisie{display:block;width:100%;height:44px;border:1px solid #3a3d42;background:#111316;
  color:var(--nuittxt);font:inherit;font-size:16px;padding:10px 12px;border-radius:0}
.porte textarea.saisie{height:auto;min-height:78px;resize:vertical;line-height:1.5}
.porte .seg input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;pointer-events:none}
.porte .seg label{display:inline-block;margin:0;border:1px solid #3a3d42;padding:9px 14px;
  font-size:14px;color:var(--nuittxt);cursor:pointer;
  transition:border-color 160ms ease,color 160ms ease}
.porte .seg label:hover{border-color:var(--brique)}
.porte .seg input:checked + label{border-color:var(--ambre);color:var(--ambre)}
.porte .saisie:focus-visible,.porte .cta:focus-visible,
.porte .seg input:focus-visible + label{outline:2px solid #0E6E77;outline-offset:2px}
.porte .piege{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.porte .mention{font-size:12.5px;line-height:1.5;color:var(--nuitmut);margin:14px 0 0}
.porte .mention a{color:var(--ambre);text-decoration:underline;text-underline-offset:2px}
.porte button.cta{border:0;font-family:inherit;cursor:pointer}

/* ---------- pied ---------- */
.pied{display:grid;gap:14px}
.pied-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px}
.pied-c{margin:0;font-weight:700;color:var(--encre2)}
.pied-l{display:flex;flex-wrap:wrap;gap:8px 18px;margin-left:auto}
.pied-l a{color:var(--encre2);border-bottom:1px solid var(--filet)}
.pied-l a:hover{color:var(--briqueencre);border-bottom-color:var(--brique)}
.pied-a,.pied-s{margin:0;max-width:84ch;line-height:1.6}
.pied-a a,.pied-s a{color:var(--briqueencre);border-bottom:1px solid var(--filet)}
@media (max-width:640px){.pied-l{margin-left:0}}

/* ---------- anneau clavier ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #0E6E77;outline-offset:3px}

/* ---------- filet SANS JAVASCRIPT ----------
   Les entrees (heros, tuiles) et les repliques animees partent a opacity:0 ;
   c'est site.js qui les revele (.vu, .bandeau.bd-on, .pulse.pl-go).
   Script coupe, 23 % de la page restait blanc — dont le TITRE du heros (site.css:78,
   :137, :492, :257, :833). `scripting: none` (Media Queries 5) est purement
   declaratif : aucun script, aucune requete, et un navigateur qui l'ignore garde
   exactement le comportement anime d'aujourd'hui. La serie Next Expiry (site.css:837)
   reste masquee : a l'ecran elle n'existe que quand l'interrupteur s'allume. */
@media (scripting: none){
  .montee-txt{ opacity:1; transform:none; }
  .tuile{ opacity:1; transform:none; }
  .bandeau .bd-planche{ opacity:1; transform:none; }
  .bandeau .bd-cn{ opacity:1; transform:scale(1); }
  .pulse .pl-line{ stroke-dashoffset:0; }
  .pulse .pl-badge{ opacity:1; transform:none; }
  .pulse .pl-grid,.pulse .pl-axis{ opacity:1; }
  .pulse .pl-l-next,.pulse .pl-g-next .pl-badge{ opacity:0; }
}


/* =========================================================================
   MISE EN PRATIQUE — sequence scriptee de la planche PULSE (acte 01)
   Un curseur dessine ouvre le menu Reglages : Put/Call, couleur de la courbe
   Puts, fenetre glissante 10 min ; puis la valeur 10 min part se poser dans
   l'instrument de pression. Tout est prefixe .pls- ou .pl-rwv / .pl-cumv et
   ne sort pas de la planche. La vue 10 min est la meme seance, en difference
   sur dix minutes glissantes ; les deux vues partagent l'axe des heures.
   ========================================================================= */
.pulse .pl-panel{ position:relative; }

/* ---------- la vue cumul s'efface, la vue 10 min prend sa place ---------- */
.pulse .pl-cumv{ transition:opacity .34s ease .12s; }
.pulse.pls-rw10 .pl-cumv{ opacity:0; transition:opacity .28s ease; }
.pulse .pl-rwv{ opacity:0; transition:opacity .34s ease; }
.pulse.pls-rw10 .pl-rwv{ opacity:1; transition:opacity .4s ease .16s; }
.pulse.pls-rw10 .pl-eh{ opacity:0; }
.pulse .pl-rwv .pl-line,
.pulse.pl-go .pl-rwv .pl-line{ stroke-dashoffset:1; transition:stroke-dashoffset .4s ease; }
.pulse.pls-rw10 .pl-rwv .pl-line{ stroke-dashoffset:0;
  transition:stroke-dashoffset .9s cubic-bezier(.25,.65,.3,1) .18s; }
.pulse .pl-rwv-lect{ opacity:0; transition:opacity .3s ease; }
.pulse.pls-lect .pl-rwv-lect{ opacity:1; transition:opacity .45s ease; }

/* --- les sept etats de la vue 10 min : quatre crans de molette autour de
   17:00, un defilement (translation pure : les heures suivent le trace), puis
   le recalage de l'echelle des Y sur la fenetre. Chaque etat n'est qu'une
   transformation du repere du trace ; la grille et les heures sont ecrites
   droites (generees par build_rw10.py, jamais deformees). --- */
.pulse .pl-rwv-pan,.pulse .pl-rwv-hpan{ transform-box:view-box; transform-origin:0 0;
  transition:transform .34s cubic-bezier(.3,0,.2,1); }
.pulse .pl-rwv-g{ opacity:0; transition:opacity .2s ease; }
.pulse.pls-z0 .pl-rwv-pan{ transform:translate(30.46px,0.00px) scale(0.10417,1.00000); }
.pulse.pls-z0 .pl-rwv-g0,.pulse.pls-z0 .pl-rwv-ga{ opacity:1; }
.pulse.pls-z1 .pl-rwv-pan{ transform:translate(-503.32px,0.00px) scale(0.17857,1.00000); }
.pulse.pls-z1 .pl-rwv-g1,.pulse.pls-z1 .pl-rwv-ga{ opacity:1; }
.pulse.pls-z2 .pl-rwv-pan{ transform:translate(-1464.12px,0.00px) scale(0.31250,1.00000); }
.pulse.pls-z2 .pl-rwv-g2,.pulse.pls-z2 .pl-rwv-ga{ opacity:1; }
.pulse.pls-z3 .pl-rwv-pan{ transform:translate(-3207.81px,0.00px) scale(0.55556,1.00000); }
.pulse.pls-z3 .pl-rwv-g3,.pulse.pls-z3 .pl-rwv-ga{ opacity:1; }
.pulse.pls-z4 .pl-rwv-pan{ transform:translate(-6396.25px,0.00px) scale(1.00000,1.00000); }
.pulse.pls-z4 .pl-rwv-hpan{ transform:translate(-6396.25px,0); }
.pulse.pls-z4 .pl-rwv-h,.pulse.pls-z4 .pl-rwv-ga{ opacity:1; }
.pulse.pls-z5 .pl-rwv-pan{ transform:translate(-8274.00px,0.00px) scale(1.00000,1.00000); }
.pulse.pls-z5 .pl-rwv-hpan{ transform:translate(-8274.00px,0); }
.pulse.pls-z5 .pl-rwv-h,.pulse.pls-z5 .pl-rwv-ga{ opacity:1; }
.pulse.pls-z6 .pl-rwv-pan{ transform:translate(-8274.00px,-101.00px) scale(1.00000,1.25000); }
.pulse.pls-z6 .pl-rwv-hpan{ transform:translate(-8274.00px,0); }
.pulse.pls-z6 .pl-rwv-h,.pulse.pls-z6 .pl-rwv-gb{ opacity:1; }
/* le defilement dure plus qu'un cran : c'est le trace qui avance */
.pulse.pls-z5 .pl-rwv-pan,.pulse.pls-z5 .pl-rwv-hpan{
  transition:transform 2.6s cubic-bezier(.4,0,.25,1); }
.pulse.pls-z6 .pl-rwv-pan{ transition:transform .45s cubic-bezier(.3,0,.2,1); }
.pulse.pls-z6 .pl-rwv-ga,.pulse.pls-z6 .pl-rwv-gb{ transition:opacity .4s ease; }

/* ---------- la couleur des puts change, et tout suit ---------- */
.pulse.pl-go .pl-l-puts{ transition:stroke-dashoffset 2.4s cubic-bezier(.25,.65,.3,1) .4s,
  stroke .45s ease; }
.pulse .pl-b-puts rect,.pulse .cm-chip.b-puts,.pulse .pl-tagsq.b-puts,
.pulse .k-puts{ transition:fill .45s ease, background-color .45s ease, color .45s ease; }
.pulse.pls-vert .pl-l-puts{ stroke:#33c06a; }
.pulse.pls-vert .pl-b-puts rect{ fill:#33c06a; }
.pulse.pls-vert .k-puts{ color:#33c06a; }
.pulse.pls-vert .cm-chip.b-puts,.pulse.pls-vert .pl-tagsq.b-puts{ background:#33c06a; }

/* ---------- etats « survole » des commandes visees ---------- */
.pulse .cm-sbtn.pls-h,.pulse .cm-colors b.pls-h{ background:rgba(224,164,55,.16);
  color:var(--pl-txt); box-shadow:inset 0 0 0 1px rgba(224,164,55,.5); }
.pulse .cm-sbtn.on.pls-h{ background:var(--pl-acc); color:#04110d; }
.pulse .cm-colors b.pls-h{ padding:1px 4px; margin:-1px -4px; }
.pulse .cm-rw.pls-h input[type=range]{ box-shadow:0 0 0 3px rgba(224,164,55,.16); }

/* ---------- la legende suit la fenetre choisie, comme dans l'app ---------- */
.pulse .pl-legend .pls-k10,.pulse .pls-kwin{ display:none; }
.pulse.pls-rw10 .pl-legend .pls-kcum{ display:none; }
.pulse.pls-rw10 .pl-legend .pls-k10{ display:inline; }
.pulse.pls-rw10 .pls-kwin{ display:inline; color:var(--pl-acc); font-size:10px;
  font-weight:700; letter-spacing:.06em; align-self:center; }

/* ---------- cartouche ---------- */
.pulse .pls-carte{ position:absolute; z-index:6; left:10px; top:10px;
  font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--pl-acc);
  background:rgba(11,12,14,.9); border:1px solid rgba(224,164,55,.45);
  padding:4px 9px; opacity:0; transform:translateY(-4px);
  transition:opacity .32s ease, transform .32s ease; pointer-events:none; }
.pulse.pls-carte-on .pls-carte{ opacity:1; transform:translateY(0); }

/* ---------- le curseur dessine ---------- */
.pulse .pls-cur{ position:absolute; z-index:9; left:0; top:0; width:26px; height:26px;
  opacity:0; pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));
  transition:transform .86s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.pulse .pls-cur svg{ display:block; }
.pulse .pls-cur.pls-on{ opacity:1; }
.pulse .pls-cur.pls-vite{ transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.pulse .pls-cur.pls-tire{ transition:transform 1.4s linear, opacity .3s ease; }
.pulse .pls-onde{ position:absolute; left:-9px; top:-10px; width:24px; height:24px;
  border:1.5px solid var(--pl-acc); border-radius:50%; opacity:0; }
.pulse .pls-cur.pls-clic .pls-onde{ animation:pls-onde .5s ease-out 1; }
@keyframes pls-onde{ 0%{ transform:scale(.25); opacity:.95 } 100%{ transform:scale(1.7); opacity:0 } }

/* ---------- la molette : le geste qui resserre la vue ---------- */
.pulse .pls-mol{ position:absolute; left:17px; top:11px; width:16px; height:22px;
  opacity:0; transition:opacity .22s ease; }
.pulse .pls-mol svg{ display:block; }
.pulse.pls-mol-on .pls-mol{ opacity:1; }
.pulse .pls-cur.pls-tic .pls-mol{ animation:pls-bosse .34s ease-out 1; }
.pulse .pls-cur.pls-tic .pls-mol-r{ animation:pls-roule .34s ease-out 1; }
@keyframes pls-bosse{ 0%{ transform:translateY(0) } 40%{ transform:translateY(-3px) }
  100%{ transform:translateY(0) } }
@keyframes pls-roule{ 0%{ transform:translateY(3px); opacity:.35 } 45%{ opacity:1 }
  100%{ transform:translateY(-3px); opacity:.35 } }

/* ---------- le jeton qui porte la valeur jusqu'a l'instrument ---------- */
.pulse .pls-fly{ position:absolute; z-index:8; left:0; top:0;
  background:#6467e8; color:#fff; font-size:13px; font-weight:700;
  padding:4px 10px; opacity:0; pointer-events:none;
  font-variant-numeric:tabular-nums; }
.pulse .pls-fly.pls-on{ opacity:1; }
.pulse .pls-fly.pls-vole{ transition:transform .74s cubic-bezier(.3,.85,.3,1),
  opacity .22s ease .58s; opacity:0; }

/* ---------- l'instrument de pression, au bord bas de la planche ---------- */
.pulse .pls-inst{ position:absolute; z-index:7; left:0; right:263px; bottom:0;
  display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 16px;
  padding:8px 12px; background:#0d1119; border-top:1px solid var(--pl-frame-dim);
  font-size:12px; font-variant-numeric:tabular-nums; line-height:1.3;
  transform:translateY(104%); opacity:0;
  transition:transform .46s cubic-bezier(.16,1,.3,1), opacity .28s ease; }
.pulse.pls-inst-on .pls-inst{ transform:translateY(0); opacity:1; }
.pulse .pls-i-lbl{ color:var(--pl-mut2); font-size:10px; font-weight:700;
  letter-spacing:.12em; }
.pulse .pls-i-tag{ color:var(--pl-txt); font-weight:700; letter-spacing:.06em; }
.pulse .pls-i-rd{ display:inline-flex; align-items:baseline; gap:6px; padding:2px 5px; }
.pulse .pls-i-rd i{ font-style:normal; color:var(--pl-mut); font-size:10px;
  letter-spacing:.08em; }
.pulse .pls-i-rd b{ color:#33c06a; font-weight:700; }
.pulse .pls-i-cle{ box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .3s ease, background-color .3s ease; }
.pulse.pls-hi .pls-i-cle{ background:rgba(100,103,232,.2);
  box-shadow:inset 0 0 0 1px #6467e8; }
.pulse.pls-hi .pls-i-cle b{ color:#fff; }
.pulse.pls-hi .pls-i-cle i{ color:#a9abf5; }

@media (max-width:900px){
  .pulse .pls-inst{ right:0; gap:2px 12px; padding:7px 10px; font-size:11px; }
  .pulse .pls-i-lbl{ flex:1 0 100%; }
}
@media (max-width:640px){
  /* sous 640 px la legende se replie : la mention de fenetre lui ajouterait une
     ligne en plein milieu de la sequence (la planche grandirait). L'entete d'axe
     « 10 MIN GLISSANTES » dit deja la meme chose, en plus gros. */
  .pulse.pls-rw10 .pls-kwin{ display:none; }
}
@media (max-width:520px){
  .pulse .pls-inst{ gap:2px 9px; }
  .pulse .pls-i-rd{ gap:4px; padding:2px 3px; }
}
@media (prefers-reduced-motion:reduce){
  .pulse .pl-cumv,.pulse .pl-rwv,.pulse .pl-rwv-lect,.pulse .pls-inst,
  .pulse .pls-carte,.pulse .pls-i-cle,.pulse .pl-b-puts rect{ transition:none !important; }
  .pulse .pls-cur,.pulse .pls-fly{ display:none; }
  .pulse .pl-rwv-pan,.pulse .pl-rwv-g{ transition:none !important; }
  /* la serie Next Expiry n'existe a l'ecran que quand l'interrupteur s'allume :
     le bloc reduced-motion de site.css:910 rallumait son etiquette (elle restait
     seule sur la vue 10 min, ou aucune autre etiquette du cumul n'a lieu d'etre). */
  .pulse .pl-g-next .pl-badge{ opacity:0 !important; }
}
@media (scripting: none){
  .pulse .pls-cur,.pulse .pls-fly,.pulse .pls-carte{ display:none; }
}


/* =========================================================================
   HEROS « UNE SEANCE » — l'ecran incurve et les deux fragments
   (a) l'ecran : deux moities a +/- 4 deg, deux zones, bloc de lecture ;
   (b) le cote HEDGEFLOW : PULSE + teneurs de marche + niveaux du jour ;
   (c) le cote plateforme : replique generique, graphique et carnet ;
   (d) le calage du tout dans le heros.
   Seance ES du 09/09/2026, donnees reelles ; chaque valeur affichee a sa
   source dans docs/site/heros-seance.md.
   Aucun style en ligne (CSP « style-src 'self' »), coins carres.
   ========================================================================= */
/* =========================================================================
   LOT « écran incurvé + partition » — (a) L'ÉCRAN
   Un grand écran incurvé 32:10 dessiné en CSS, deux zones (HEDGEFLOW à
   gauche, plateforme à droite) séparées par une fine jointure.
   Aucun style en ligne, aucune ressource externe (CSP « style-src 'self' »,
   backend/vitrine.py:196-198). Coins carrés (rayon 0, skill §3).
   Ombre à 2 paliers seulement (skill §1, refus n°3).

   GÉOMÉTRIE (tout en CSS, l'écran tient sans partition.js) :
     .sc-g .sc-verre  porte aspect-ratio = part-gauche × 3,2 / 100
                      → le VERRE entier (les deux moitiés) fait 32:10.
     .sc-d .sc-verre  s'étire à la hauteur de rangée : même hauteur.

   RÉGLAGES (à poser sur .sc) :
     --sc-larg:1400px     largeur maximale du poste, bezel compris
     --sc-ratio:3.2       32:10 sur le verre
     --sc-part-g:52       part de la zone gauche, en % du verre
     --sc-bezel:13px      bezel haut + côtés        --sc-menton:32px  bas
     --sc-arc:4deg        demi-angle de courbure (0deg = écran plat)
     --sc-profondeur      distance de perspective (plus court = plus bombé)
     --sc-echelle:.62     échelle des fragments déposés dans les zones
     --sc-lecture-h:82px  hauteur du bloc de lecture (bas de la zone gauche)
     --sc-larg-empile:560px  largeur des deux écrans empilés, sous 900 px
     --sc-vignette:.22    assombrissement du bord extérieur (la courbe)

   EMPLACEMENTS pour l'assembleur :
     <div class="sc-zone" data-zone="gauche">   HEDGEFLOW   (52 %)
     <div class="sc-zone" data-zone="droite">   plateforme  (48 %)
   Un fragment déposé est mis à l'échelle par --sc-echelle ; s'il pose
   --sc-logique:<px> sur la zone, partition.js calcule l'échelle exacte.
   partition.js pose aussi data-sc-mode="cote"|"empile" sur .sc : un fragment
   peut s'habiller autrement en empilé, sans media query de son côté.

   Cotes mesurées au banc (Chrome) : à 1440 px de fenêtre, poste 1380 × 468,
   verre 1382 × 433 (ratio 3,19), zone gauche 704 × 341, zone droite 650 × 423.
   À 390 px : deux écrans à plat, zones 344 × 258 chacune.
   ========================================================================= */

.sc{
  /* ---- couleurs : la nuit de l'app, jetons LOCAUX (skill §2, règle dure :
     on ne repeint aucun jeton de l'app) ---- */
  --sc-nuit:#0B0C0E;   --sc-txt:#E6E8EA;   --sc-mut:#8B909A;  --sc-mut2:#565B64;
  --sc-line:#1D1F23;   --sc-line2:#2B2E34; --sc-vert:#33C06A;
  --sc-ambre:#FF9E2C;  --sc-brique:#C85333;
  --sc-focus:#0E6E77;
  --sc-encre:#1B1815;  --sc-encre2:#4B4640; --sc-filet:#D8D0C1;

  /* ---- géométrie ---- */
  --sc-larg:1400px;
  --sc-ratio:3.2;
  --sc-part-g:52;
  --sc-bezel:13px;
  --sc-menton:32px;
  --sc-arc:4deg;
  --sc-profondeur:2100px;
  --sc-echelle:.62;
  --sc-lecture-h:82px;
  --sc-vignette:.22;

  /* ---- mouvement (skill §4) ---- */
  --sc-mvt-micro:120ms;
  --sc-mvt-etat:200ms;
  --sc-mvt-curseur:1100ms;
  --sc-e-sortie:cubic-bezier(.16,1,.3,1);
  --sc-e-etat:cubic-bezier(.22,1,.36,1);

  display:block;
  box-sizing:border-box;
  width:100%;
  padding:0 30px;              /* réserve pour le débord de perspective (+16 px/côté) */
  font-family:"Archivo",system-ui,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.sc *,.sc *::before,.sc *::after{ box-sizing:border-box; }

/* ===================== LE POSTE ===================== */
.sc-scene{ width:100%; }
.sc-poste{
  position:relative;
  width:min(var(--sc-larg),100%);
  margin:0 auto;
}
/* ombre de papier, à PLAT derrière les deux moitiés : une seule ombre, donc
   pas de couture sombre à la jointure. Deux paliers, pas six. */
.sc-ombre{
  position:absolute;
  left:18px; right:18px; top:16px; bottom:-4px;
  box-shadow:0 2px 4px rgba(27,24,21,.10), 0 30px 58px rgba(27,24,21,.24);
  z-index:0;
}
.sc-cadre{
  position:relative; z-index:1;
  display:flex; align-items:stretch;
  /* la perspective doit porter sur le PARENT DIRECT des deux moitiés :
     posée sur .sc-poste elle ne s'appliquerait pas (mesuré au banc). */
  perspective:var(--sc-profondeur);
  perspective-origin:50% 46%;
}

/* --- les deux moitiés : la courbure --- */
.sc-moitie{
  position:relative;
  display:flex; flex-direction:column;
  min-width:0;
  background:linear-gradient(176deg,#292B31 0%,#1D1F24 26%,#16171C 66%,#0F1013 100%);
  border-radius:0;
  backface-visibility:hidden;
}
.sc-g{
  flex-grow:var(--sc-part-g); flex-shrink:1; flex-basis:0;
  padding:var(--sc-bezel) 0 var(--sc-menton) var(--sc-bezel);
  transform-origin:100% 50%;
  transform:rotateY(var(--sc-arc));
}
.sc-d{
  flex-grow:calc(100 - var(--sc-part-g)); flex-shrink:1; flex-basis:0;
  padding:var(--sc-bezel) var(--sc-bezel) var(--sc-menton) 0;
  transform-origin:0 50%;
  transform:rotateY(calc(-1 * var(--sc-arc)));
}
/* lèvre haute du bezel — plastique mat, pas de reflet chromé. La lumière
   accroche davantage le bord EXTÉRIEUR, celui qui revient vers l'œil :
   c'est le second indice de courbure, après la jointure. */
.sc-moitie::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  pointer-events:none; z-index:3;
}
.sc-g::before{ background:linear-gradient(90deg,rgba(255,255,255,.17),rgba(255,255,255,.05)); }
.sc-d::before{ background:linear-gradient(270deg,rgba(255,255,255,.17),rgba(255,255,255,.05)); }

/* --- la dalle --- */
.sc-verre{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:var(--sc-nuit);
  display:flex; flex-direction:column;
  box-shadow:0 0 0 1px #050506, inset 0 0 0 1px rgba(255,255,255,.035);
}
/* le verre entier fait --sc-ratio (32:10) : la moitié gauche porte la mesure.
   1.664 = 52 × 3,2 / 100 (repli si calc() dans aspect-ratio n'est pas lu). */
.sc-g .sc-verre{
  aspect-ratio:1.664;
  aspect-ratio:calc(var(--sc-part-g) * var(--sc-ratio) / 100);
}
.sc-d .sc-verre{ height:100%; }

/* assombrissement vers le bord extérieur : c'est lui qui « vend » la courbe */
.sc-verre::before{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
}
.sc-g .sc-verre::before{
  background:linear-gradient(90deg,rgba(0,0,0,var(--sc-vignette)) 0%,rgba(0,0,0,0) 46%);
}
.sc-d .sc-verre::before{
  background:linear-gradient(270deg,rgba(0,0,0,var(--sc-vignette)) 0%,rgba(0,0,0,0) 46%);
}
/* reflet discret en haut de la dalle */
.sc-verre::after{
  content:""; position:absolute; left:0; right:0; top:0; height:34%;
  z-index:5; pointer-events:none;
  background:linear-gradient(183deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 26%,rgba(255,255,255,0) 100%);
}

/* --- horloge de séance (menton gauche) et témoin (menton droit) --- */
.sc-hud{
  position:absolute; right:14px; bottom:0; height:var(--sc-menton);
  display:flex; align-items:center; gap:9px; z-index:4;
  font-size:13px; letter-spacing:.04em; color:var(--sc-mut);
}
.sc-hud b{ color:var(--sc-txt); font-weight:600; }
.sc-hud .sc-sq{
  width:5px; height:5px; background:var(--sc-brique); display:inline-block;
}
.sc-led{
  position:absolute; right:16px; bottom:11px; z-index:4;
  width:4px; height:4px; border-radius:50%;
  background:var(--sc-vert); box-shadow:0 0 6px rgba(51,192,106,.75);
}

/* --- pied central fin --- */
.sc-col{
  position:relative; z-index:1;
  width:126px; height:30px; margin:0 auto;
  background:linear-gradient(90deg,#0E0F12,#262930 30%,#1A1C21 66%,#0C0D10);
}
.sc-socle{
  position:relative; z-index:1;
  width:430px; max-width:44%; height:10px; margin:0 auto;
  background:linear-gradient(180deg,#2A2C32,#131418);
  box-shadow:0 1px 2px rgba(27,24,21,.10), 0 12px 20px rgba(27,24,21,.16);
}

/* ===================== LES ZONES ===================== */
.sc-zone{
  position:relative; flex:1 1 auto; min-height:0; min-width:0; overflow:hidden;
}
/* mise à l'échelle automatique de tout fragment déposé */
.sc-zone > *{
  transform-origin:0 0;
  transform:scale(var(--e,var(--sc-echelle)));
  width:calc(100% / var(--e,var(--sc-echelle)));
  height:calc(100% / var(--e,var(--sc-echelle)));
}
/* repères d'emplacement — banc seulement */
.sc--demo .sc-zone:empty::after{
  content:attr(data-zone);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--sc-mut2); font-size:13px; letter-spacing:.14em; text-transform:none;
  background:repeating-linear-gradient(135deg,rgba(200,83,51,.05) 0 6px,transparent 6px 12px);
  box-shadow:inset 0 0 0 1px rgba(200,83,51,.30);
}

/* ===================== BLOC DE LECTURE ===================== */
/* à la pause de fin de boucle, la lecture se retire avant que la scène se
   remette à l'ouverture : le retour ne se voit pas. */
.sc.is-anime.is-pause .sc-lecture{ opacity:0; }
.sc-lecture{
  flex:0 0 auto;
  opacity:1;
  transition:opacity 420ms linear;
  height:var(--sc-lecture-h);
  padding:8px 15px 10px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:3px;
  background:linear-gradient(180deg,rgba(11,12,14,0) 0%,rgba(11,12,14,.86) 26%,var(--sc-nuit) 62%);
  border-top:1px solid var(--sc-line);
}
.sc-l{
  margin:0; font-size:13px; line-height:1.34; color:var(--sc-txt);
  opacity:1;
  transition:opacity var(--sc-mvt-etat) var(--sc-e-etat);
}
/* état caché porté par le script : sans JS, les trois lignes sont lisibles */
.sc.is-anime .sc-l{ opacity:0; }
.sc.is-anime .sc-l.is-dite{ opacity:1; }
.sc-lh{ color:var(--sc-ambre); font-weight:700; }
.sc-lsep{ color:var(--sc-mut2); padding:0 2px; }
.sc-lt{ color:var(--sc-txt); }
/* curseur d'écriture : un carré plein, pas une barre qui clignote */
.sc-l.is-ecrit .sc-lt::after{
  content:""; display:inline-block; width:6px; height:11px;
  margin-left:3px; vertical-align:-1px; background:var(--sc-ambre);
}

/* ===================== COUCHE PLATE (jointure, curseur) ===================== */
.sc-couche{
  position:absolute; inset:0; z-index:6; pointer-events:none;
}
/* la fine jointure, exactement sur l'axe de rotation */
.sc-joint{
  position:absolute;
  left:calc(var(--sc-part-g) * 1%);
  top:var(--sc-bezel); bottom:var(--sc-menton);
  width:2px; margin-left:-1px;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.05));
}
/* le curseur dessiné */
.sc-curseur{
  position:absolute; left:0; top:0;
  width:26px; height:26px;
  opacity:0;
  transform:translate(var(--sc-cx,50%),var(--sc-cy,50%));
  transition:transform var(--sc-mvt-curseur) var(--sc-e-sortie),
             opacity var(--sc-mvt-etat) linear;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.65));
}
.sc.is-pointe .sc-curseur{ opacity:1; }
/* recollage sur l'ancre après un changement de mise en page : pas de trajet */
.sc-curseur.sc-saut{ transition:opacity var(--sc-mvt-etat) linear; }
.sc-curseur path{
  fill:#F7F4EE; stroke:#0B0C0E; stroke-width:1.3; stroke-linejoin:round;
}
/* accusé de clic : un anneau, une fois */
.sc-clic{
  position:absolute; left:0; top:0; width:26px; height:26px;
  margin:-13px 0 0 -13px;
  border:1px solid var(--sc-ambre); border-radius:50%;
  opacity:0; transform:translate(var(--sc-kx,50%),var(--sc-ky,50%)) scale(.3);
}
.sc-clic.is-clic{ animation:scClic 420ms var(--sc-e-sortie) 1 both; }
@keyframes scClic{
  0%{ opacity:.9; transform:translate(var(--sc-kx,50%),var(--sc-ky,50%)) scale(.3); }
  100%{ opacity:0; transform:translate(var(--sc-kx,50%),var(--sc-ky,50%)) scale(1.9); }
}

/* ===================== COMMANDE (WCAG 2.2.2) ===================== */
/* sans script (ou en mouvement réduit) il n'y a rien à mettre en pause :
   le bouton n'apparaît que si la scène tourne vraiment. */
.sc-cmds{ display:none; }
.sc.is-anime .sc-cmds{
  width:min(var(--sc-larg),100%);
  margin:14px auto 0;
  display:flex; justify-content:flex-end;
}
.sc-cmd{
  font:inherit; font-size:13px; color:var(--sc-encre2);
  background:none; border:0; border-bottom:1px solid var(--sc-filet);
  padding:2px 1px; cursor:pointer;
  transition:color var(--sc-mvt-micro) linear,border-color var(--sc-mvt-micro) linear;
}
.sc-cmd:hover{ color:var(--sc-encre); border-bottom-color:var(--sc-brique); }
.sc-cmd:focus-visible{ outline:2px solid var(--sc-focus); outline-offset:3px; }

/* ===================== < 900 px : DEUX ÉCRANS EMPILÉS, À PLAT ============ */
@media (max-width:900px){
  .sc{
    --sc-bezel:7px; --sc-menton:22px; --sc-lecture-h:auto;
    padding:0 16px;
  }
  .sc-poste{ perspective:none; }
  .sc-ombre{ display:none; }
  /* les deux écrans empilés prennent toute la largeur du téléphone, mais on
     les borne : sur une tablette de 880 px, deux dalles de 860 px de large
     demanderaient aux fragments une toile logique deux fois plus grande
     qu'au bureau. --sc-larg-empile est le bouton de réglage. */
  .sc-cadre{
    flex-direction:column; gap:16px;
    width:min(var(--sc-larg-empile,560px),100%); margin:0 auto;
    perspective:none;
  }
  .sc-moitie{
    flex:none; transform:none;
    padding:var(--sc-bezel) var(--sc-bezel) var(--sc-menton);
    box-shadow:0 1px 2px rgba(27,24,21,.06), 0 12px 24px rgba(27,24,21,.14);
  }
  .sc-g .sc-verre{ aspect-ratio:auto; }
  .sc-d .sc-verre{ height:auto; aspect-ratio:4/3; }
  .sc-g .sc-zone{ aspect-ratio:4/3; height:auto; flex:0 0 auto; }
  .sc-lecture{ height:auto; min-height:78px; background:var(--sc-nuit); }
  .sc-joint{ display:none; }
  /* deux écrans posés à plat sur le papier : un pied sous le second aurait
     l'air d'un accident. L'ombre de chaque moitié suffit à les poser. */
  .sc-col,.sc-socle{ display:none; }
  .sc.is-anime .sc-cmds{ justify-content:flex-start; }
}

/* ===================== MOUVEMENT RÉDUIT = ÉTAT FINAL ===================== */
@media (prefers-reduced-motion:reduce){
  .sc-curseur{ transition:none; }
  .sc-l{ transition:none; }
  .sc-lecture{ transition:none; opacity:1; }
  .sc-clic,.sc-clic.is-clic{ animation:none; opacity:0; }
  .sc-l.is-ecrit .sc-lt::after{ display:none; }
}

/* ===================== CONTRASTES FORCÉS ===================== */
@media (forced-colors:active){
  .sc-moitie{ border:1px solid CanvasText; }
  .sc-joint{ background:CanvasText; }
  .sc-curseur path{ fill:CanvasText; stroke:Canvas; }
  .sc-cmd{ border-bottom-color:CanvasText; }
}

/* ============================================================================
   Lot « côté HEDGEFLOW » — scène de séance ES du 09/09/2026.
   Racine .sc-hf, tout préfixé sc-hf-. Aucune importation, aucune ressource externe.
   Valeurs par défaut = ÉTAT FINAL (étape 4) : sans JS, la scène est lisible.
   Jetons repris de l'app : frontend/index.html:16-27 (--panel --line --txt --mut…).
   ============================================================================ */

.sc-hf{
  /* --- jetons de l'app (frontend/index.html:16-27) --- */
  --hf-panel:#0b0c0e; --hf-head:#141519; --hf-line:#1d1f23; --hf-line2:#2b2e34;
  --hf-txt:#e6e8ea; --hf-mut:#8b909a; --hf-mut2:#565b64;
  --hf-frame:#c85333; --hf-frame-dim:#6e2f1d;
  --hf-amber:#ff9e2c; --hf-amber-dim:#c58a3e;
  --hf-pos:#33c06a; --hf-neg:#ff5a4d;
  --hf-blue:#3d9bd6; --hf-green:#33c06a;
  /* --- couleurs des 3 courbes PULSE (cf. hf.md § « écart assumé ») --- */
  --hf-all:#6c63e0; --hf-calls:#e0a44b; --hf-puts:#3fbf6a;
  /* --- couleurs de niveaux : levelColor(), frontend/app.js:1278-1291 --- */
  --hf-res:#e5675c; --hf-sup:#3fbf6a; --hf-hvl:#5c8fe0;
  --hf-bornes:#8a93a5; --hf-gex:#4fb8c9;
  /* --- propriétés pilotées par hf.js ; valeurs de l'étape 4 par défaut --- */
  --hf-mk:9.24%;
  --hf-bn-l:24.38%; --hf-bn-w:25.62%;
  --hf-bs-l:2%;     --hf-bs-w:48%;
  /* --- mouvement (jetons du plan, docs/site/plan-site-web.md:101) --- */
  --hf-e-sortie:cubic-bezier(.16,1,.3,1);
  --hf-e-etat:cubic-bezier(.22,1,.36,1);
  --hf-t-trace:900ms; --hf-t-etat:520ms;

  display:block; width:100%; max-width:760px; margin:0 auto;
  background:var(--hf-panel); color:var(--hf-txt);
  border:1px solid var(--hf-frame);
  box-shadow:0 1px 0 rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.34);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13px; line-height:1.45;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
  container-type:inline-size;
}
.sc-hf *{ box-sizing:border-box; }
.sc-hf .sc-hf-sp{ flex:1 1 auto; }

/* ---------------- tête ---------------- */
.sc-hf-tete{
  height:36px; display:flex; align-items:center; gap:8px; padding:0 12px;
  background:var(--hf-head); border-bottom:1px solid var(--hf-frame-dim);
}
.sc-hf-pastille{
  width:8px; height:8px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--hf-blue),var(--hf-green));
}
.sc-hf-ttl{ font-size:12px; font-weight:600; letter-spacing:1.3px; color:var(--hf-amber); }
.sc-hf-cx{ font-size:10px; color:var(--hf-mut); letter-spacing:.3px; white-space:nowrap; }

/* ---------------- corps ---------------- */
.sc-hf-corps{ padding:11px 13px 13px; display:flex; flex-direction:column; gap:11px; }

/* ---------------- chart PULSE ---------------- */
.sc-hf-leg{ display:flex; align-items:center; gap:14px; padding:0 2px 5px; }
.sc-hf-lg{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; color:var(--hf-mut); }
.sc-hf-lg::before{ content:""; width:12px; height:2px; flex:0 0 auto; }
.sc-hf-lg-all::before{   background:var(--hf-all); height:2.4px; }
.sc-hf-lg-calls::before{ background:var(--hf-calls); }
.sc-hf-lg-puts::before{  background:var(--hf-puts); }
.sc-hf-unit{ font-size:10px; color:var(--hf-mut); letter-spacing:.8px; }

.sc-hf-svg{ display:block; width:100%; height:auto; overflow:visible; }
.sc-hf-grid{ stroke:#1e2430; stroke-width:1; }
.sc-hf-zero{ stroke:#39414f; stroke-width:1.3; }
.sc-hf-box{ fill:none; stroke:#232a35; stroke-width:1; }
.sc-hf-yl{ fill:#8b909a; font-size:11px; text-anchor:end; }
.sc-hf-xl{ fill:#8b909a; font-size:11px; text-anchor:middle; }
.sc-hf-c{ fill:none; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
.sc-hf-c-all{   stroke:var(--hf-all); stroke-width:2.2; }
.sc-hf-c-calls{ stroke:var(--hf-calls); }
.sc-hf-c-puts{  stroke:var(--hf-puts); }
.sc-hf-end text{ font-size:11.5px; font-weight:700; dominant-baseline:middle; }
.sc-hf-end[data-e="all"] circle,   .sc-hf-end[data-e="all"] text{   fill:var(--hf-all); }
.sc-hf-end[data-e="calls"] circle, .sc-hf-end[data-e="calls"] text{ fill:var(--hf-calls); }
.sc-hf-end[data-e="puts"] circle,  .sc-hf-end[data-e="puts"] text{  fill:var(--hf-puts); }

/* le tracé progressif : piloté par stroke-dashoffset (posé par hf.js) */
.sc-hf.is-js .sc-hf-c{ transition:stroke-dashoffset var(--hf-t-trace) var(--hf-e-sortie); }
.sc-hf.is-js .sc-hf-pt,
.sc-hf.is-js .sc-hf-tx{ transition:transform var(--hf-t-trace) var(--hf-e-sortie); }

/* ---------------- bas : dealer + niveaux ---------------- */
.sc-hf-bas{ display:grid; grid-template-columns:1fr 216px; gap:0 16px; }
.sc-hf-niv{ border-left:1px solid var(--hf-line); padding-left:16px; }

.sc-hf-dl{ display:flex; flex-direction:column; gap:9px; }
.sc-hf-dhead{ display:flex; align-items:center; gap:9px; }
.sc-hf-reg{ font-size:16px; font-weight:800; letter-spacing:.3px; color:var(--hf-neg); }
.sc-hf-clock{ font-size:11px; color:var(--hf-mut); letter-spacing:.6px; }
.sc-hf-mech{ margin:0; font-size:11.5px; color:var(--hf-mut); line-height:1.45; }
.sc-hf-mech b{ color:var(--hf-txt); font-weight:700; }

.sc-hf-nets{ display:flex; gap:14px; }
.sc-hf-net{ flex:1 1 0; display:flex; flex-direction:column; gap:1px; min-width:0; }
.sc-hf-nlab{ font-size:10px; letter-spacing:.5px; color:var(--hf-mut); }
.sc-hf-net b{ font-size:20px; font-weight:800; line-height:1.2; }
.sc-hf-neg{ color:var(--hf-neg); }
.sc-hf-pos{ color:var(--hf-pos); }
.sc-hf-dlt{ font-size:10px; color:var(--hf-mut); }
.sc-hf-dneg{ color:var(--hf-neg); }
.sc-hf-dpos{ color:var(--hf-pos); }

.sc-hf-spine{ display:flex; align-items:center; gap:8px; }
.sc-hf-endlab{ font-size:9.5px; letter-spacing:.4px; color:var(--hf-mut); white-space:nowrap; }
.sc-hf-track{
  position:relative; flex:1 1 auto; height:11px; border:1px solid var(--hf-line);
  background:linear-gradient(90deg, rgba(255,90,77,.30), rgba(255,90,77,.05) 46%,
                                    rgba(51,192,106,.05) 54%, rgba(51,192,106,.30));
}
.sc-hf-zeroT{ position:absolute; left:50%; top:-2px; bottom:-2px; width:1px;
  background:var(--hf-mut2); opacity:.6; }
.sc-hf-mk{
  position:absolute; top:50%; left:var(--hf-mk); width:11px; height:11px;
  margin:-5.5px 0 0 -5.5px; background:var(--hf-neg); border:2px solid var(--hf-panel);
}
.sc-hf.is-js .sc-hf-mk{ transition:left var(--hf-t-etat) var(--hf-e-etat) 120ms; }

.sc-hf-lab{ display:flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.7px;
  color:var(--hf-amber-dim); }
.sc-hf-ts{ display:flex; flex-direction:column; gap:6px; }
.sc-hf-tsrow{ display:flex; align-items:center; gap:9px; }
.sc-hf-tsk{ font-size:10.5px; color:var(--hf-mut); width:118px; flex:0 0 auto; }
.sc-hf-div{ position:relative; flex:1 1 auto; min-width:40px; height:13px;
  background:rgba(255,255,255,.02); }
.sc-hf-ax{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--hf-line); }
.sc-hf-bar{ position:absolute; top:2px; bottom:2px; background:var(--hf-neg); }
.sc-hf-bn{ left:var(--hf-bn-l); width:var(--hf-bn-w); }
.sc-hf-bs{ left:var(--hf-bs-l); width:var(--hf-bs-w); }
.sc-hf.is-js .sc-hf-bar{ transition:left var(--hf-t-etat) var(--hf-e-etat) 180ms,
                                    width var(--hf-t-etat) var(--hf-e-etat) 180ms; }
.sc-hf-tsv{ font-size:11px; width:66px; text-align:right; flex:0 0 auto; color:var(--hf-mut); }
.sc-hf-tneg{ color:var(--hf-neg); }
.sc-hf-tpos{ color:var(--hf-pos); }

/* ---------------- niveaux du jour ---------------- */
.sc-hf-spot{ font-size:10px; color:var(--hf-mut); letter-spacing:0; }
.sc-hf-spot b{ color:var(--hf-txt); font-weight:700; }
.sc-hf-nlist{ list-style:none; margin:7px 0 0; padding:0;
  display:flex; flex-direction:column; gap:0; }
.sc-hf-nrow{
  display:flex; align-items:center; gap:8px; padding:2.5px 5px 2.5px 8px;
  position:relative; font-size:11px; color:var(--hf-mut);
}
.sc-hf-nrow::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px;
  background:var(--hf-mut2); }
.sc-hf-n-res::before{    background:var(--hf-res); }
.sc-hf-n-sup::before{    background:var(--hf-sup); }
.sc-hf-n-hvl::before{    background:var(--hf-hvl); }
.sc-hf-n-bornes::before{ background:var(--hf-bornes); }
.sc-hf-n-gex::before{    background:var(--hf-gex); }
.sc-hf-nn{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-hf-ne{ flex:0 0 auto; color:var(--hf-txt); font-weight:600; }
.sc-hf-nrow.is-phare{ background:rgba(79,184,201,.12); color:var(--hf-txt); }
.sc-hf-nrow.is-phare .sc-hf-nn{ font-weight:700; }
.sc-hf.is-js .sc-hf-nrow{ transition:background var(--hf-t-etat) var(--hf-e-etat),
                                     color var(--hf-t-etat) var(--hf-e-etat); }
/* le halo du niveau phare ne s'allume qu'aux étapes 3 et 4 */
.sc-hf.is-js .sc-hf-nrow.is-phare{ background:transparent; color:var(--hf-mut); }
.sc-hf.is-js[data-hf-etape="3"] .sc-hf-nrow.is-phare,
.sc-hf.is-js[data-hf-etape="4"] .sc-hf-nrow.is-phare{
  background:rgba(79,184,201,.12); color:var(--hf-txt);
}

/* ---------------- étroit ---------------- */
@container (max-width:560px){
  .sc-hf-bas{ grid-template-columns:1fr; gap:12px; }
  .sc-hf-niv{ border-left:0; border-top:1px solid var(--hf-line); padding:11px 0 0; }
  .sc-hf-tsk{ width:96px; }
  .sc-hf-net b{ font-size:17px; }
  .sc-hf-reg{ font-size:14px; }
}

/* ---------------- mouvement réduit : plus aucune transition ---------------- */
@media (prefers-reduced-motion:reduce){
  .sc-hf, .sc-hf *{ transition:none !important; animation:none !important; }
}

/* ===========================================================================
   LOT « côté plateforme » — réplique GÉNÉRIQUE d'une plateforme de trading.
   Racine .sc-pf, toutes les classes préfixées sc-pf-.
   Aucun style inline, aucun style=, aucune ressource externe : CSP self-only.
   Jetons locaux --pf-* : ne touche AUCUN jeton de l'app ni du site.
   Look neutre bleu-gris : ce n'est ni HEDGEFLOW, ni une plateforme nommée.
   =========================================================================== */

.sc-pf{
  /* --- fonds et filets --- */
  --pf-fond:#141a24;        /* fond des volets */
  --pf-fond2:#10151d;       /* fond des barres et en-têtes */
  --pf-fond3:#1a222e;       /* survol / bande du dernier prix */
  --pf-bord:#0a0e14;        /* séparation des volets */
  --pf-grille:#1d2531;      /* grille du graphique */
  --pf-grille2:#222b39;     /* grille verticale / axes */
  /* --- encres --- */
  --pf-txt:#dbe1ea;
  --pf-mut:#9aa5b5;         /* 7,0:1 sur --pf-fond */
  --pf-mut2:#7c8899;        /* 4,8:1 sur --pf-fond */
  /* --- données --- */
  --pf-haut:#3fb277;        /* bougie haussière */
  --pf-bas:#d05446;         /* bougie baissière */
  --pf-preouv:#6f7b8d;      /* ligne de pré-ouverture */
  --pf-profil:#3273ad;      /* barres du profil (temps passé au prix) */
  --pf-niveau:#bd72a8;      /* niveaux du jour (teinte du fichier, eclaircie : 5,1:1) */
  --pf-pos:#e05244;         /* position */
  --pf-stop:#e2913a;        /* stop */
  /* --- mouvement --- */
  --pf-t:260ms;
  --pf-pas:95ms;
  --pf-e:cubic-bezier(.22,1,.36,1);

  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:1px;
  background:var(--pf-bord);
  border:1px solid var(--pf-bord);
  color:var(--pf-txt);
  font-family:ui-sans-serif,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12px;
  line-height:1.25;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
.sc-pf *{ box-sizing:border-box; }

.sc-pf-volet{ background:var(--pf-fond); min-width:0; display:flex; flex-direction:column; }

/* ---------------------------------------------------------------- barre */
.sc-pf-barre{
  display:flex; align-items:center; gap:10px;
  height:26px; padding:0 10px;
  background:var(--pf-fond2);
  border-bottom:1px solid var(--pf-grille);
  font-size:11px; letter-spacing:.02em;
}
.sc-pf-sym{ font-weight:700; color:var(--pf-txt); }
.sc-pf-ut{ color:var(--pf-mut); }
.sc-pf-barre-fin{ margin-left:auto; }
.sc-pf-horloge{ color:var(--pf-mut); }

/* ---------------------------------------------------------------- graphique */
.sc-pf-chart{ display:block; width:100%; height:auto; }

.sc-pf-grille line{ stroke:var(--pf-grille); stroke-width:1; }
.sc-pf-grille .sc-pf-grille-v{ stroke:var(--pf-grille); }
.sc-pf-axe-trait{ stroke:var(--pf-grille2); stroke-width:1; }
.sc-pf-axe-prix text,
.sc-pf-axe-temps text{ fill:var(--pf-mut2); font-size:9px; }
.sc-pf-axe-temps text{ text-anchor:middle; }

.sc-pf-ouv line{ stroke:var(--pf-grille2); stroke-width:1; stroke-dasharray:2 3; }
.sc-pf-ouv text{ fill:var(--pf-mut2); font-size:8.5px; letter-spacing:.04em; }

.sc-pf-niveaux line{ stroke:var(--pf-niveau); stroke-width:1; stroke-dasharray:5 4; opacity:.85; }
.sc-pf-niveaux text{ fill:var(--pf-niveau); font-size:9px; font-weight:600; letter-spacing:.02em; }

.sc-pf-preouv polyline{ fill:none; stroke:var(--pf-preouv); stroke-width:1.2;
  stroke-linejoin:round; stroke-linecap:round; }

.sc-pf-bg{ transition:opacity var(--pf-t) var(--pf-e); }
.sc-pf-bg--haut{ fill:var(--pf-haut); }
.sc-pf-bg--bas{ fill:var(--pf-bas); }

/* apparition en cascade : un palier par bougie du groupe qui se révèle */
.sc-pf-r0{ transition-delay:0ms; }
.sc-pf-r1{ transition-delay:calc(var(--pf-pas) * 1); }
.sc-pf-r2{ transition-delay:calc(var(--pf-pas) * 2); }
.sc-pf-r3{ transition-delay:calc(var(--pf-pas) * 3); }
.sc-pf-r4{ transition-delay:calc(var(--pf-pas) * 4); }
.sc-pf-r5{ transition-delay:calc(var(--pf-pas) * 5); }
.sc-pf-r6{ transition-delay:calc(var(--pf-pas) * 6); }
.sc-pf-r7{ transition-delay:calc(var(--pf-pas) * 7); }
.sc-pf-r8{ transition-delay:calc(var(--pf-pas) * 8); }
.sc-pf-r9{ transition-delay:calc(var(--pf-pas) * 9); }
.sc-pf-r10{ transition-delay:calc(var(--pf-pas) * 10); }
.sc-pf-r11{ transition-delay:calc(var(--pf-pas) * 11); }
.sc-pf-r12{ transition-delay:calc(var(--pf-pas) * 12); }

/* marque d'ordre */
.sc-pf-marque{ transition:opacity var(--pf-t) var(--pf-e); }
.sc-pf-entree-l{ stroke:var(--pf-pos); stroke-width:1.4; }
.sc-pf-stop-l{ stroke:var(--pf-stop); stroke-width:1.2; stroke-dasharray:4 3; }
.sc-pf-fleche{ fill:var(--pf-pos); }
.sc-pf-et-fond{ fill:var(--pf-pos); }
.sc-pf-et-fond--stop{ fill:var(--pf-stop); }
.sc-pf-et-vente,
.sc-pf-et-stop{ fill:#120d0c; font-size:9.5px; font-weight:700; letter-spacing:.01em; }

/* étiquette du dernier prix, collée à l'échelle */
.sc-pf-tagd rect{ fill:#2b3542; }
.sc-pf-tagd text{ fill:var(--pf-txt); font-size:9px; font-weight:700; }

/* états : ce qui n'est pas encore arrivé n'est pas dessiné */
.sc-pf[data-etape="1"] .sc-pf-bg,
.sc-pf[data-etape="2"] .sc-pf-bg--g3,
.sc-pf[data-etape="2"] .sc-pf-bg--g5,
.sc-pf[data-etape="3"] .sc-pf-bg--g5,
.sc-pf[data-etape="4"] .sc-pf-bg--g5{ opacity:0; }

.sc-pf[data-etape="1"] .sc-pf-marque,
.sc-pf[data-etape="2"] .sc-pf-marque,
.sc-pf[data-etape="3"] .sc-pf-marque{ opacity:0; }

/* ---------------------------------------------------------------- volet droit */
.sc-pf-volet--droite{ background:var(--pf-fond); }

.sc-pf-ordre{
  padding:8px 10px 10px;
  background:var(--pf-fond2);
  border-bottom:1px solid var(--pf-grille);
}
.sc-pf-ordre-tete{
  font-size:10px; letter-spacing:.1em; text-transform:none;
  color:var(--pf-mut2); margin-bottom:7px;
}
.sc-pf-ordre-ligne{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.sc-pf-ordre-cle{ color:var(--pf-mut); font-size:11px; }
.sc-pf-ordre-val{ color:var(--pf-txt); font-size:13px; font-weight:700; }
.sc-pf-ordre-val--pos{ color:var(--pf-pos); }
/* pas encore de position : la valeur reste muette */
.sc-pf[data-etape="1"] .sc-pf-ordre-val--pos,
.sc-pf[data-etape="2"] .sc-pf-ordre-val--pos,
.sc-pf[data-etape="3"] .sc-pf-ordre-val--pos{ color:var(--pf-mut2); font-weight:400; }
.sc-pf-ordre-ligne--pos{ margin-bottom:0; padding-top:8px; border-top:1px solid var(--pf-grille); }

.sc-pf-ordre-btns{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; }
.sc-pf-btn{
  display:block; text-align:center; padding:6px 0;
  font-size:11px; font-weight:700; letter-spacing:.03em;
  border:1px solid transparent; color:#0d1117;
  transition:filter var(--pf-t) var(--pf-e), box-shadow var(--pf-t) var(--pf-e);
}
.sc-pf-btn--vente{ background:var(--pf-bas); }
.sc-pf-btn--achat{ background:#3a8cbe; }
.sc-pf[data-etape="4"] .sc-pf-btn--vente,
.sc-pf[data-etape="5"] .sc-pf-btn--vente{
  filter:brightness(1.18);
  box-shadow:0 0 0 1px var(--pf-pos), 0 0 0 3px rgba(224,82,68,.28);
}

/* ---------------------------------------------------------------- carnet */
.sc-pf-carnet{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }

.sc-pf-dom{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  font-size:10.5px;
}
.sc-pf-dom-cap{
  caption-side:top; text-align:left;
  padding:7px 10px 5px;
  font-size:10px; letter-spacing:.09em; color:var(--pf-mut2);
  background:var(--pf-fond2);
}
.sc-pf-dom th{
  position:sticky; top:0;
  padding:4px 6px;
  font-size:9.5px; font-weight:600; letter-spacing:.02em;
  color:var(--pf-mut2); text-align:right;
  background:var(--pf-fond2);
  border-bottom:1px solid var(--pf-grille2);
  white-space:nowrap;
}
.sc-pf-dom td{
  height:15px; padding:0 6px;
  text-align:right; white-space:nowrap;
  border-bottom:1px solid rgba(29,37,49,.55);
  color:var(--pf-mut);
}
.sc-pf-dom th.sc-pf-c-prof,
.sc-pf-dom td.sc-pf-c-prof{ width:92px; padding-left:8px; }
.sc-pf-dom th.sc-pf-c-prix,
.sc-pf-dom td.sc-pf-c-prix{ width:70px; color:var(--pf-txt); font-weight:600; }
.sc-pf-dom th.sc-pf-c-off,
.sc-pf-dom td.sc-pf-c-off,
.sc-pf-dom th.sc-pf-c-dem,
.sc-pf-dom td.sc-pf-c-dem{ width:54px; color:var(--pf-mut2); }

.sc-pf-c-prof{ display:table-cell; }
.sc-pf-pbar{ display:inline-block; vertical-align:middle; width:62px; height:9px; }
.sc-pf-pbar rect{ fill:var(--pf-profil); }
.sc-pf-pnum{ display:inline-block; width:20px; margin-left:4px; text-align:right;
  color:var(--pf-mut2); vertical-align:middle; }
.sc-pf-pnum--vide{ color:var(--pf-mut2); opacity:.55; }

.sc-pf-c-prix{ position:relative; }
.sc-pf-px{ display:inline-block; }
.sc-pf-jeton{
  float:left; padding:0 4px; margin-top:1px;
  font-size:9px; font-weight:700; line-height:13px; color:#120d0c;
}
.sc-pf-jeton--pos{ background:var(--pf-pos); }
.sc-pf-jeton--stop{ background:var(--pf-stop); }

.sc-pf-dr--dern td{ background:var(--pf-fond3); color:var(--pf-txt); }
.sc-pf-dr--dern td:first-child{ box-shadow:inset 2px 0 0 var(--pf-txt); }
/* sur les lignes teintees, le gris le plus pale remonte d'un cran (contraste) */
.sc-pf-dr--dern .sc-pf-pnum,
.sc-pf-dr--dern td.sc-pf-c-off,
.sc-pf-dr--dern td.sc-pf-c-dem,
.sc-pf-dr--pos .sc-pf-pnum,
.sc-pf-dr--pos td.sc-pf-c-off,
.sc-pf-dr--pos td.sc-pf-c-dem,
.sc-pf-dr--stop .sc-pf-pnum,
.sc-pf-dr--stop td.sc-pf-c-off,
.sc-pf-dr--stop td.sc-pf-c-dem{ color:var(--pf-mut); }
.sc-pf-dr--dern td.sc-pf-c-prix{ color:#fff; }
.sc-pf-dr--pos td{
  background:rgba(224,82,68,.16);
  box-shadow:inset 0 1px 0 var(--pf-pos), inset 0 -1px 0 var(--pf-pos);
}
.sc-pf-dr--pos td.sc-pf-c-prix{ color:#fff; }
.sc-pf-dr--stop td{
  background:rgba(226,145,58,.13);
  box-shadow:inset 0 1px 0 var(--pf-stop), inset 0 -1px 0 var(--pf-stop);
}

.sc-pf-dom-pied{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:6px 10px; margin-top:auto;
  background:var(--pf-fond2);
  border-top:1px solid var(--pf-grille2);
  font-size:11px;
}
.sc-pf-dom-pied-cle{ color:var(--pf-mut); }
.sc-pf-dom-pied-val{ color:var(--pf-txt); font-weight:700; }

/* ---------------------------------------------------------------- étroit */
@media (max-width:820px){
  .sc-pf{ grid-template-columns:minmax(0,1fr); }
  .sc-pf-volet--droite{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .sc-pf-ordre{ border-bottom:0; border-right:1px solid var(--pf-grille); }
}
@media (max-width:560px){
  .sc-pf-volet--droite{ grid-template-columns:minmax(0,1fr); }
  .sc-pf-ordre{ border-right:0; border-bottom:1px solid var(--pf-grille); }
}

/* ---------------------------------------------------------------- mouvement réduit */
@media (prefers-reduced-motion:reduce){
  .sc-pf,
  .sc-pf *{ transition:none !important; animation:none !important; }
}

/* =========================================================================
   HEROS « UNE SEANCE » — reglages d'assemblage
   Ce bloc ne fait que poser la mise en page du heros et caler les deux
   fragments dans les zones de l'ecran. Les trois feuilles au-dessus
   (ecran / cote HEDGEFLOW / cote plateforme) ne sont pas modifiees.
   ========================================================================= */

/* ---------- la colonne de texte, au-dessus de l'ecran ---------- */
.heros--seance{ display:block; padding:24px 0 12px; }
.hs-tete{
  display:grid;
  grid-template-columns:minmax(0,1.48fr) minmax(0,1fr) 286px;
  gap:26px 34px;
  align-items:end;
}
.heros--seance h1{
  font-size:clamp(38px,3.85vw,56px); line-height:.94;
  max-width:21ch; margin:0;
}
.heros--seance .chapeau{ font-size:19px; line-height:1.42; max-width:34ch; margin:0 0 16px; }
.heros--seance .raisons{ margin:0; }
.heros--seance .raisons li{ font-size:15px; line-height:1.36; margin:0 0 7px; }
.heros--seance .raisons li:last-child{ margin-bottom:0; }
.hs-agir .cta{ width:100%; text-align:center; }
.heros--seance .rare{ font-size:13px; line-height:1.45; margin:10px 0 0; }
.hs-ecran{ margin-top:16px; }

/* ---------- l'ecran : gabarit du heros ---------- */
.hs-ecran .sc{
  --sc-larg:1360px;      /* largeur du poste, bezel compris */
  --sc-part-g:50;        /* le verre coupe en deux, a la jointure */
  --sc-ratio:2.20;       /* le verre entier ; 3,2 rendait les fragments illisibles */
  --sc-menton:30px;
  --sc-lecture-h:92px;
}
.hs-ecran .sc-col{ height:26px; }
.hs-ecran .sc-socle{ height:8px; }
/* la commande de pause a quitte .sc : elle sert LES DEUX scenes et vit
   desormais dans le heros (voir « HEROS A DEUX TEMPS », .hs-cmds). */
/* c'est la moitie GAUCHE qui fixe la hauteur du verre (son aspect-ratio) :
   sans ca, la hauteur naturelle du fragment plateforme la commandait, et
   changer --sc-ratio ne servait a rien. Cote a cote seulement : empiles, les
   deux dalles ont chacune leur propre hauteur. */
@media (min-width:901px){
  .hs-ecran .sc-d .sc-verre{ height:auto; flex:1 1 0; min-height:0; }
}

/* ---------- calage des deux fragments dans les zones ----------
   --sc-logique = la largeur a laquelle le fragment veut se dessiner ;
   partition.js en deduit l'echelle exacte pour qu'il remplisse la zone.
   Les deux valeurs sont choisies pour que la HAUTEUR naturelle du fragment
   tombe sur la hauteur de la zone (releve au banc, voir docs/site/heros-seance.md). */
.sc-zone[data-zone="gauche"]{ --sc-logique:694px; }
.sc-zone[data-zone="droite"]{ --sc-logique:800px; }

/* .sc-hf pose width:100% APRES la regle de mise a l'echelle de ecran.css (meme
   specificite, plus loin dans la feuille) : sans ce rappel il ne remplissait
   pas sa zone (100 px de panneau vide a droite, releve au banc). */
.sc-zone > .sc-hf, .sc-zone > .sc-pf{
  width:calc(100% / var(--e, var(--sc-echelle)));
  height:calc(100% / var(--e, var(--sc-echelle)));
}
.sc-zone .sc-hf{ max-width:none; margin:0; box-shadow:none; border:0; }
.sc-zone .sc-pf{ border:0; }

/* la disposition du fragment plateforme suit la SCENE (deux moitiés d'un
   ecran / deux ecrans empiles), pas la largeur de la fenetre : entre 820 et
   900 px la fenetre est encore en mode « cote a cote » et la regle de
   pf.css:253 empilerait le carnet sous le graphique. */
/* la premiere graduation de l'axe des temps est centree sur le bord gauche du
   dessin : centree, sa moitie gauche sortait du viewBox et « 14:30 » se lisait
   « 4:30 ». */
.sc-zone .sc-pf-axe-temps text:first-of-type{ text-anchor:start; }

[data-sc-mode="cote"] .sc-pf{ grid-template-columns:minmax(0,1fr) 280px; }
[data-sc-mode="cote"] .sc-pf-volet--droite{ display:flex; flex-direction:column; }
[data-sc-mode="cote"] .sc-pf-ordre{ border-right:0; border-bottom:1px solid var(--pf-grille); }
/* le carnet occupe toute la hauteur de son volet : les lignes se repartissent
   la place au lieu de laisser un bas de panneau vide. */
.sc-zone .sc-pf-dom{ height:100%; }

/* ---------- sans JavaScript ----------
   --e est pose par partition.js : sans script, la mise a l'echelle retombait
   sur --sc-echelle (.62) et les deux ecrans se dessinaient deux fois trop
   petits. Sans script on ne met plus a l'echelle du tout : chaque fragment
   remplit sa zone a sa taille naturelle. */
@media (scripting: none){
  .sc-zone > .sc-hf, .sc-zone > .sc-pf{ transform:none; width:100%; height:100%; }
}

/* ---------- ruptures ---------- */
@media (max-width:1200px){
  .hs-tete{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 250px; gap:22px 26px; }
}
@media (max-width:1000px){
  .hs-tete{ grid-template-columns:minmax(0,1fr) 250px; }
  .hs-titre{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .heros--seance{ padding:22px 0 24px; }
  .hs-tete{ grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; }
  .hs-titre{ grid-column:auto; }
  .heros--seance h1{ max-width:16ch; }
  .heros--seance .chapeau{ max-width:44ch; }
  .hs-agir .cta{ width:auto; }
  .hs-ecran{ margin-top:16px; }
  /* deux ecrans a plat : chaque dalle se cale sur la forme de son fragment */
  /* 444 = 430 de toile + 14 de bezel : empiles, les fragments ne sont JAMAIS
     agrandis (a 900 px de fenetre, 560 les grossissait de 27 %). */
  .hs-ecran .sc{ --sc-larg-empile:444px; }
  .sc-zone[data-zone="gauche"]{ --sc-logique:430px; }
  .sc-zone[data-zone="droite"]{ --sc-logique:430px; }
  .sc-g .sc-zone{ aspect-ratio:0.649; }
  .sc-d .sc-verre{ aspect-ratio:0.3715; }
  /* les deux graphiques sont des SVG a viewBox fixe : empiles, ils se rendent
     a moins de la moitie de leur largeur de dessin, donc leurs etiquettes
     tombaient sous 6 px. On les grossit DANS le viewBox. */
  .sc-hf-yl, .sc-hf-xl{ font-size:19px; }
  .sc-hf-end text{ font-size:18px; }
  .sc-pf-axe-prix text, .sc-pf-axe-temps text{ font-size:11px; }
  .sc-pf-niveaux text{ font-size:11px; }
  /* les etiquettes d'ordre et du dernier prix gardent leur corps : leur fond
     est un rect de largeur fixe dans le SVG, les grossir les tronquait. */
}

/* =========================================================================
   HEROS A DEUX TEMPS — une seule zone visuelle, deux scenes
   Scene A = le moniteur (.cadre), la replique du terminal.
   Scene B = l'ecran incurve (.sc), la seance du 09/09.
   Les deux occupent la MEME cellule de grille : la hauteur du bloc vaut la
   plus haute des deux et ne change jamais, donc le titre, le chapeau, les
   trois raisons, le bouton et la ligne de rarete au-dessus ne bougent pas
   d'un pixel pendant les bascules.
   L'opacite et le tres leger recul sont poses image par image par
   l'ordonnanceur (site.js, HFSC.heros) : une pause fige VRAIMENT le fondu
   au milieu, ce qu'une transition CSS ne sait pas faire.
   ========================================================================= */
.hs-vues{ display:grid; align-items:center; }
.hs-vue{ grid-area:1 / 1; min-width:0; }
/* etat de depart, et etat sans JavaScript : le moniteur seul. */
.hs-vue--b{ opacity:0; }
.hs-vue.hs-off{ pointer-events:none; }
/* la scene qui n'est pas a l'ecran ne bouge pas, et une pause fige aussi les
   animations CSS que l'ordonnanceur ne pilote pas (bande des marches,
   respiration du voyant, anneau de clic de la seance). */
.hs-vue.hs-off,.hs-vue.hs-off *,
.hs-ecran.hs-gel .hs-vue,.hs-ecran.hs-gel .hs-vue *{ animation-play-state:paused; }

/* Le moniteur en pleine largeur : la meme boite que l'ecran incurve. A 720 px
   de colonne il rendait ses fragments a 0,62, soit du texte a 8 px ; ici il
   les rend a 0,88 (13 px -> 11,4 px) sans changer sa mise en page. */
.hs-vue--a .cadre{
  --cadre-larg:1120px;
  --cadre-echelle:.88;
  max-width:none; padding:0;
}
.hs-vue--a .cadre-col{ height:26px; }
.hs-vue--a .cadre-socle{ height:8px; }

/* La commande de pause sert les DEUX scenes (WCAG 2.2.2). Elle se range dans
   le vide a droite du pied du poste, donc elle ne rallonge pas le heros — et
   elle DOIT etre positionnee au-dessus : .sc-poste est un element positionne,
   il gagnait le test de survol sur toute la bande et le bouton n'etait pas
   cliquable (releve au banc : « .sc-scene intercepts pointer events »). */
.hs-cmds{ display:none; }
.hs-ecran.hs-anime .hs-cmds{
  position:relative; z-index:2;
  width:min(1360px,100%); margin:-28px auto 0;
  display:flex; justify-content:flex-end;
}
/* mouvement reduit : le moniteur seul, fige, pas de bascule. */
.hs-ecran.hs-calme .hs-vue--b{ display:none; }

/* ---------- ruptures ----------
   Sur telephone la scene A n'est pas lisible : l'emplacement du moniteur
   tombe a 334 px, ses fragments s'y rendent a 0,52 (du texte a 6 px) et,
   remontes a 0,90, ils sont rognes. La seance, elle, a ete dessinee pour ce
   format (deux dalles a plat, etiquettes grossies dans leur viewBox). Sous
   900 px on ne montre donc QUE la seance, et elle tourne en continu :
   l'ordonnanceur passe en mode « b » (voir site.js). */
@media (max-width:900px){
  .hs-vue--a{ display:none; }
  .hs-vue--b{ opacity:1; }
  .hs-ecran.hs-calme .hs-vue--b{ display:block; }
  .hs-ecran.hs-anime .hs-cmds{ justify-content:flex-start; margin-top:10px; }
}
/* Sans JavaScript, c'est la SEANCE qu'on montre, pas le moniteur : la
   replique du terminal chiffre ses compteurs au chargement (« +0 $ » tant que
   rien ne tourne, a cote d'une courbe a 11 Md$), la seance porte au contraire
   son etat de fin dans le markup — ecran lisible en entier, quatre lignes
   ecrites, horloge a 17 h 30. Regle « on n'invente rien » : plutot rien que
   des zeros. */
@media (scripting: none){
  .hs-vue--a{ display:none; }
  .hs-vue--b{ display:block; opacity:1; }
  .hs-cmds{ display:none; }
}

/* =========================================================================
   DISCORD — pictogramme partage (symbol + use, aucun script), lien de nav,
   bloc « Communaute » sous le formulaire d'acces et lien de pied.
   Le bouton reprend la famille fantome du §12.5 : meme fond, meme filet,
   meme texte brique-encre, plus le halo doux (ici en plus leger que le plein).
   ========================================================================= */
.ico-defs{display:none}
.ico-dc{width:16px;height:12.2px;flex:none}
.lien-dc{display:inline-flex;align-items:center;gap:7px}
.entete nav a.lien-dc:hover{color:var(--briqueencre)}
.cta-f.halo{box-shadow:0 0 0 3px rgba(200,83,51,.10),0 6px 18px rgba(200,83,51,.16)}
.cta-f.halo:hover{box-shadow:0 0 0 3px rgba(200,83,51,.16),0 8px 22px rgba(200,83,51,.24)}
.dcord{margin-top:24px;background:var(--papier2);border-top:2px solid var(--brique);
  padding:12px 20px 14px}
.dc-sur{margin:0 0 1px;font-size:14px;font-weight:700;font-variation-settings:"wdth" 80;
  color:var(--briqueencre);letter-spacing:.01em}
.dc-t{margin:0 0 4px;font-size:20px;line-height:1.14;font-weight:700;
  font-variation-settings:"wdth" 74;letter-spacing:-.004em;color:var(--encre)}
.dc-p{margin:0 0 12px;font-size:15.5px;line-height:1.48;color:var(--encre2);max-width:58ch}
.dc-b{display:inline-flex;align-items:center;gap:8px}

/* =========================================================================
   VIGNETTES DE LA GRILLE — acte 04
   Quatorze petites fenetres du terminal posees sur le papier : meme cadre
   que les trois tuiles en capture (.vig, filet brique, 16/9), fond nuit,
   donnees reelles cuites dans le markup. Chaque bloc est prefixe .vg-<id>,
   rien ne deborde sur le reste de la page. Le mouvement est joue UNE FOIS
   par HFVG[<id>](el) quand la tuile entre a l'ecran (site.js, ordonnanceur).
   ========================================================================= */
/* Une tuile est un element de grille : par defaut min-width:auto, donc la
   largeur INTRINSEQUE de son contenu fixe la colonne. La mini-bande des
   marches est un ruban « nowrap » de plusieurs milliers de pixels : sans
   ces deux lignes, les trois colonnes 1fr se resolvent en 84 / 1186 / 104 px
   et la page deborde de 259 px a 1440 (mesure au banc, 12/09). */
.tuiles .tuile{min-width:0}
.tuile .vg{max-width:100%}
/* les deux regles qui doivent GAGNER sur les blocs de vignettes (pause hors
   ecran, filet sans JavaScript) sont a la FIN du fichier : a specificite
   egale, c'est l'ordre qui tranche. */

/* ---------- vignette heatmap ---------- */
.vg-heatmap{position:relative;display:block;width:100%;aspect-ratio:16/9;
  background:#0B0C0E;overflow:hidden}
.vg-heatmap .vg-heatmap-svg{display:block;width:100%;height:100%;font-family:inherit;
  font-variant-numeric:tabular-nums}
.vg-heatmap .vg-heatmap-bg{fill:#0B0C0E}
.vg-heatmap .vg-heatmap-hd{fill:#111418}
.vg-heatmap .vg-heatmap-hdl{stroke:#262C31;stroke-width:.8;fill:none}
.vg-heatmap .vg-heatmap-t1{fill:#FF9E2C;font-size:8px;font-weight:600;letter-spacing:.1em}
.vg-heatmap .vg-heatmap-t2{fill:#6E757B;font-size:8px;font-weight:600;letter-spacing:.08em;
  text-anchor:end}
.vg-heatmap .vg-heatmap-sol{fill:#181C20;stroke:#2C3339;stroke-width:.8}
.vg-heatmap .vg-heatmap-ech{stroke:#1A1F23;stroke-width:.6;fill:none}
.vg-heatmap .vg-heatmap-spr{stroke:#8A9197;stroke-width:.7;stroke-dasharray:2 3;fill:none;opacity:.65}
.vg-heatmap .vg-heatmap-pb{fill:#33C06A;font-size:7.4px;font-weight:600;text-anchor:end}
.vg-heatmap .vg-heatmap-pa{fill:#FF5A4D;font-size:7.4px;font-weight:600}
.vg-heatmap .vg-heatmap-ax{fill:#5A6167;font-size:7px}
.vg-heatmap .vg-heatmap-axr{text-anchor:end}
.vg-heatmap .b .f{fill:#2A8C52}
.vg-heatmap .b .t{fill:#3FD37C}
.vg-heatmap .b .s{fill:#1C6640}
.vg-heatmap .b.ask .f{fill:#B8433A}
.vg-heatmap .b.ask .t{fill:#FF7C70}
.vg-heatmap .b.ask .s{fill:#8E3229}
.vg-heatmap .b.bid.best .f{fill:#46D687}
.vg-heatmap .b.bid.best .t{fill:#8BF3BA}
.vg-heatmap .b.bid.best .s{fill:#2E9C61}
.vg-heatmap .b.ask.best .f{fill:#FF7367}
.vg-heatmap .b.ask.best .t{fill:#FFB0A8}
.vg-heatmap .b.ask.best .s{fill:#C2443A}

/* ---------- vignette sonar ---------- */
.vg-sonar{position:relative;display:block;width:100%;aspect-ratio:16/9;
  background:#0B0C0E;overflow:hidden}
.vg-sonar .vg-sonar-svg{display:block;width:100%;height:100%;font-family:inherit;
  font-variant-numeric:tabular-nums}
.vg-sonar .vg-sonar-bg{fill:#0B0C0E}
.vg-sonar .vg-sonar-hd{fill:#111418}
.vg-sonar .vg-sonar-hdl{stroke:#262C31;stroke-width:.8;fill:none}
.vg-sonar .vg-sonar-t1{fill:#FF9E2C;font-size:8px;font-weight:600;letter-spacing:.1em}
.vg-sonar .vg-sonar-t2{fill:#6E757B;font-size:8px;font-weight:600;letter-spacing:.08em;text-anchor:end}
.vg-sonar .vg-sonar-gr{stroke:#1E2327;stroke-width:.7;fill:none}
.vg-sonar .vg-sonar-gr0{stroke:#333A40;stroke-width:.8;fill:none}
.vg-sonar .vg-sonar-ax{fill:#5A6167;font-size:7px;text-anchor:end}
.vg-sonar .vg-sonar-un{fill:#4E555B;font-size:6.4px;text-anchor:end;letter-spacing:.04em}
.vg-sonar .vg-sonar-hh{fill:#4E555B;font-size:7px}
.vg-sonar .vg-sonar-hhr{text-anchor:end}
.vg-sonar .c .m{stroke-width:.9;fill:none}
.vg-sonar .c.h .m{stroke:#33C06A}
.vg-sonar .c.h .k{fill:#33C06A}
.vg-sonar .c.b .m{stroke:#FF5A4D}
.vg-sonar .c.b .k{fill:#FF5A4D}
.vg-sonar .vg-sonar-pl{stroke:#FF9E2C;stroke-width:.8;stroke-dasharray:3 3;fill:none;opacity:.6}
.vg-sonar .vg-sonar-ld{stroke:#FF9E2C;stroke-width:.7;fill:none;opacity:.75}
.vg-sonar .vg-sonar-tag{fill:#FF9E2C;font-size:7.2px;font-weight:600;text-anchor:end}
.vg-sonar .u{fill:none;stroke-width:1}
.vg-sonar .u.h{stroke:#33C06A;fill:#33C06A;fill-opacity:.10;stroke-opacity:.75}
.vg-sonar .u.b{stroke:#FF5A4D;fill:#FF5A4D;fill-opacity:.10;stroke-opacity:.75}

/* ---------- vignette pression ---------- */
/* Vignette « pression » — trois cartes de flux PULSE (tout le flux, échéance
   la plus proche, retail) à la clôture. Couleurs = celles réellement tracées
   par app.js (var COL), reprises du fragment PULSE : all #6467e8, next #18bdac,
   retail #ff5e5e. Toutes les règles sont préfixées .vg-pression. */

.vg-pression{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  background:#0B0C0E; overflow:hidden;
}
.vg-pression .pr-c{ display:block; width:100%; height:100%; }
.vg-pression text{
  font-family:"Archivo",system-ui,Arial,sans-serif;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  fill:#e6e8ea;
}

/* ---------- fenêtre ---------- */
.vg-pression .pr-bg{ fill:#0B0C0E; }
.vg-pression .pr-hd{ fill:#141519; }
.vg-pression .pr-hdl{ fill:#6e2f1d; }
.vg-pression .pr-dot{ fill:url(#vgpr-dot); }
.vg-pression .pr-ttl{ font-size:9px; font-weight:600; letter-spacing:1.1px; fill:#FF9E2C; }
.vg-pression .pr-cx{ font-size:7.5px; letter-spacing:.3px; fill:#8b909a; }
.vg-pression .pr-sep{ fill:#1d1f23; }

/* ---------- cartes ---------- */
.vg-pression .pr-lab{ font-size:8px; letter-spacing:.6px; fill:#8b909a; }
.vg-pression .pr-val{ font-size:18px; font-weight:800; }
.vg-pression .pr-pct{ font-size:11px; font-weight:700; fill:#565b64; }
.vg-pression .pr-trk{ fill:#ffffff; fill-opacity:.05; }
.vg-pression .pr-fill{ transform-box:fill-box; transform-origin:left center; }

.vg-pression .pr-all,.vg-pression .pr-fall{ fill:#6467e8; }
.vg-pression .pr-next,.vg-pression .pr-fnext{ fill:#18bdac; }
.vg-pression .pr-ret,.vg-pression .pr-fret{ fill:#ff5e5e; }
.vg-pression .pr-tall{ fill:#8b8df0; }
.vg-pression .pr-tnext{ fill:#18bdac; }
.vg-pression .pr-tret{ fill:#ff5e5e; }

/* ---------- état de départ (le JS anime, cf. site.css:1312) ---------- */
.vg-pression .pr-a{ opacity:0; }
.vg-pression .pr-fill{ transform:scaleX(0); }

/* Sans script : l'état final, tout de suite. */
@media (scripting:none){
  .vg-pression .pr-a{ opacity:1; }
  .vg-pression .pr-fill{ transform:none; }
}
/* Mouvement refusé : l'état final, sans compte ni remplissage. */
@media (prefers-reduced-motion:reduce){
  .vg-pression .pr-a{ opacity:1; }
  .vg-pression .pr-fill{ transform:none; }
}

/* ---------- vignette scanner ---------- */
/* =========================================================================
   Vignette « scanner » — les huit mégacaps, percentile de gamma sur 1 an.
   Une petite fenêtre du terminal posée sur le papier : fond --panel #0B0C0E,
   tête ambre, colonnes vides à « — ». Toutes les règles sont préfixées
   .vg-scanner — rien ne fuit dans la page. Aucun style en ligne (CSP).
   ========================================================================= */
.vg-scanner{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  background:#0B0C0E; overflow:hidden;
  font-family:"Archivo",system-ui,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}
.vg-scanner .vgs-svg{ display:block; width:100%; height:100%; }

/* ---- tête et colonnes ---- */
.vg-scanner .vgs-tt{ fill:#FF9E2C; font-size:8.5px; font-weight:800; letter-spacing:.14em; }
.vg-scanner .vgs-sub{ fill:#565b64; font-size:8px; letter-spacing:.02em; }
.vg-scanner .vgs-sep{ stroke:#6e2f1d; stroke-width:1; }
.vg-scanner .vgs-sep2{ stroke:#1d1f23; stroke-width:1; }
.vg-scanner .vgs-ch text{ fill:#565b64; font-size:7.5px; font-weight:700; letter-spacing:.1em; }
/* Δ n'est pas dans le sous-ensemble Archivo : pile de repli DÉCLARÉE */
.vg-scanner .vgs-grec{ font-family:"Segoe UI Symbol","DejaVu Sans",system-ui,sans-serif; letter-spacing:0; }

/* ---- lignes ---- */
.vg-scanner .vgs-sym{ fill:#e6e8ea; font-size:9px; font-weight:700; }
.vg-scanner .vgs-na{ fill:#565b64; font-size:9px; }
.vg-scanner .vgs-val{ fill:#e6e8ea; font-size:9px; font-weight:700; }
.vg-scanner .vgs-trk{ fill:#1d1f23; }
.vg-scanner .vgs-bar{ fill:#33c0d6; fill-opacity:.82; }

/* ---- état de départ (posé par le JS via .vgs-go / .vgs-fin) ---- */
.vg-scanner .vgs-r{ opacity:0; }
.vg-scanner .vgs-bar{ transform:scaleX(0); transform-box:fill-box; transform-origin:left center; }

/* ---- arrivée : les barres se remplissent en cascade ---- */
.vg-scanner.vgs-go .vgs-r{ opacity:1; transition:opacity 300ms cubic-bezier(.16,1,.3,1); }
.vg-scanner.vgs-go .vgs-bar{ transform:scaleX(1); transition:transform 650ms cubic-bezier(.16,1,.3,1); }
.vg-scanner.vgs-go .vgs-rows>g:nth-child(1),.vg-scanner.vgs-go .vgs-rows>g:nth-child(1) .vgs-bar{ transition-delay:40ms; }
.vg-scanner.vgs-go .vgs-rows>g:nth-child(2),.vg-scanner.vgs-go .vgs-rows>g:nth-child(2) .vgs-bar{ transition-delay:110ms; }
.vg-scanner.vgs-go .vgs-rows>g:nth-child(3),.vg-scanner.vgs-go .vgs-rows>g:nth-child(3) .vgs-bar{ transition-delay:180ms; }
.vg-scanner.vgs-go .vgs-rows>g:nth-child(4),.vg-scanner.vgs-go .vgs-rows>g:nth-child(4) .vgs-bar{ transition-delay:250ms; }
.vg-scanner.vgs-go .vgs-rows>g:nth-child(5),.vg-scanner.vgs-go .vgs-rows>g:nth-child(5) .vgs-bar{ transition-delay:320ms; }
.vg-scanner.vgs-go .vgs-rows>g:nth-child(6),.vg-scanner.vgs-go .vgs-rows>g:nth-child(6) .vgs-bar{ transition-delay:390ms; }
.vg-scanner.vgs-go .vgs-rows>g:nth-child(7),.vg-scanner.vgs-go .vgs-rows>g:nth-child(7) .vgs-bar{ transition-delay:460ms; }
.vg-scanner.vgs-go .vgs-rows>g:nth-child(8),.vg-scanner.vgs-go .vgs-rows>g:nth-child(8) .vgs-bar{ transition-delay:530ms; }

/* ---- un « — » clignote une fois : on préfère le tiret au chiffre inventé ---- */
@keyframes vgsClin{ 0%{opacity:1} 38%{opacity:.12} 100%{opacity:1} }
.vg-scanner.vgs-go .vgs-bl{ animation:vgsClin 1100ms cubic-bezier(.22,1,.36,1) 1420ms 1 both; }

/* ---- état final direct (mouvement réduit, ou filet) ---- */
.vg-scanner.vgs-fin .vgs-r{ opacity:1; }
.vg-scanner.vgs-fin .vgs-bar{ transform:scaleX(1); }

@media (prefers-reduced-motion: reduce){
  .vg-scanner .vgs-r{ opacity:1; }
  .vg-scanner .vgs-bar{ transform:scaleX(1); }
  .vg-scanner *{ transition:none !important; animation:none !important; }
}

/* ---------- vignette niveaux ---------- */
/* vignette NIVEAUX - profil gamma net par strike + tiges des niveaux maison.
   Releve reel ES du 11/09/2026 15 h 59 (voir niveaux.md). */
.vg-niveaux{display:block;position:relative;width:100%;aspect-ratio:16/9;background:#0B0C0E;overflow:hidden}
.vg-niveaux .vgn-svg{display:block;width:100%;height:100%}
.vg-niveaux .plan{fill:#13161A;stroke:#262B31;stroke-width:.7}
.vg-niveaux .gr{stroke:#1E2329;stroke-width:.7}
.vg-niveaux .pt{fill:#5BD892}
.vg-niveaux .pf{fill:#33C06A}
.vg-niveaux .ps{fill:#1E7245}
.vg-niveaux .nm{fill:#6E2018}
.vg-niveaux .nf{fill:#FF5A4D}
.vg-niveaux .ns{fill:#9C332A}
.vg-niveaux .pxd{stroke:#FFFFFF;stroke-width:2.2;stroke-linecap:round}
.vg-niveaux .pxv{stroke:#E6E8EA;stroke-width:1.2;opacity:.8}
.vg-niveaux .pxc{fill:#E6E8EA}
.vg-niveaux .tl{stroke:#FF9E2C;stroke-width:.9;opacity:.85}
.vg-niveaux .tc{fill:#FF9E2C}
.vg-niveaux .tt{fill:#FF9E2C;font:600 7px/1 "Archivo",system-ui,Arial,sans-serif;letter-spacing:.02em;text-anchor:middle}
.vg-niveaux .b{transform-box:view-box}

.vg-niveaux .b0{transform-origin:26px 116px}
.vg-niveaux .b1{transform-origin:41px 114.7px}
.vg-niveaux .b2{transform-origin:56px 113.4px}
.vg-niveaux .b3{transform-origin:71px 112.1px}
.vg-niveaux .b4{transform-origin:86px 110.8px}
.vg-niveaux .b5{transform-origin:101px 109.5px}
.vg-niveaux .b6{transform-origin:116px 108.2px}
.vg-niveaux .b7{transform-origin:131px 106.9px}
.vg-niveaux .b8{transform-origin:146px 105.6px}
.vg-niveaux .b9{transform-origin:161px 104.3px}
.vg-niveaux .b10{transform-origin:176px 103px}
.vg-niveaux .b11{transform-origin:191px 101.7px}
.vg-niveaux .b12{transform-origin:206px 100.4px}
.vg-niveaux .b13{transform-origin:221px 99.1px}
.vg-niveaux .b14{transform-origin:236px 97.8px}
.vg-niveaux .b15{transform-origin:251px 96.5px}
.vg-niveaux .b16{transform-origin:266px 95.2px}

.vg-niveaux.anim .b{animation:vgn-lever 420ms cubic-bezier(.16,1,.3,1) both}
.vg-niveaux.anim .b0{animation-delay:60ms}
.vg-niveaux.anim .b1{animation-delay:86ms}
.vg-niveaux.anim .b2{animation-delay:112ms}
.vg-niveaux.anim .b3{animation-delay:138ms}
.vg-niveaux.anim .b4{animation-delay:164ms}
.vg-niveaux.anim .b5{animation-delay:190ms}
.vg-niveaux.anim .b6{animation-delay:216ms}
.vg-niveaux.anim .b7{animation-delay:242ms}
.vg-niveaux.anim .b8{animation-delay:268ms}
.vg-niveaux.anim .b9{animation-delay:294ms}
.vg-niveaux.anim .b10{animation-delay:320ms}
.vg-niveaux.anim .b11{animation-delay:346ms}
.vg-niveaux.anim .b12{animation-delay:372ms}
.vg-niveaux.anim .b13{animation-delay:398ms}
.vg-niveaux.anim .b14{animation-delay:424ms}
.vg-niveaux.anim .b15{animation-delay:450ms}
.vg-niveaux.anim .b16{animation-delay:476ms}

.vg-niveaux.anim .tl{animation:vgn-planter 300ms cubic-bezier(.22,1,.36,1) both}
.vg-niveaux.anim .tc,.vg-niveaux.anim .tt{animation:vgn-paraitre 240ms ease-out both}
.vg-niveaux.anim .px{animation:vgn-paraitre 320ms ease-out 560ms both}
.vg-niveaux.anim .pxv{animation:vgn-planter 320ms cubic-bezier(.22,1,.36,1) 560ms both}
.vg-niveaux.anim .tg0 .tl{animation-delay:780ms}
.vg-niveaux.anim .tg0 .tc,.vg-niveaux.anim .tg0 .tt{animation-delay:960ms}
.vg-niveaux.anim .tg1 .tl{animation-delay:850ms}
.vg-niveaux.anim .tg1 .tc,.vg-niveaux.anim .tg1 .tt{animation-delay:1030ms}
.vg-niveaux.anim .tg2 .tl{animation-delay:920ms}
.vg-niveaux.anim .tg2 .tc,.vg-niveaux.anim .tg2 .tt{animation-delay:1100ms}
.vg-niveaux.anim .tg3 .tl{animation-delay:990ms}
.vg-niveaux.anim .tg3 .tc,.vg-niveaux.anim .tg3 .tt{animation-delay:1170ms}
.vg-niveaux.anim .tg4 .tl{animation-delay:1060ms}
.vg-niveaux.anim .tg4 .tc,.vg-niveaux.anim .tg4 .tt{animation-delay:1240ms}
.vg-niveaux.anim .tg5 .tl{animation-delay:1130ms}
.vg-niveaux.anim .tg5 .tc,.vg-niveaux.anim .tg5 .tt{animation-delay:1310ms}

@keyframes vgn-lever{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes vgn-planter{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
@keyframes vgn-paraitre{from{opacity:0}to{opacity:1}}

/* calme : etat final, aucun mouvement (la fonction JS pose aussi .fini) */
@media (prefers-reduced-motion:reduce){
  .vg-niveaux.anim .b,.vg-niveaux.anim .tl,.vg-niveaux.anim .tc,
  .vg-niveaux.anim .tt,.vg-niveaux.anim .px,.vg-niveaux.anim .pxv{animation:none}
}
.vg-niveaux.fini .b,.vg-niveaux.fini .tl,.vg-niveaux.fini .tc,
.vg-niveaux.fini .tt,.vg-niveaux.fini .px,.vg-niveaux.fini .pxv{animation:none}

/* ---------- vignette vol ---------- */
/* Vignette « vol » — structure par terme de la volatilité implicite + jauges IV/VRP.
   Petite fenêtre du terminal : jetons de l'app (frontend/index.html:16-27).
   Toutes les règles sont préfixées .vg-vol. */

.vg-vol{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  background:#0B0C0E; overflow:hidden;
}
.vg-vol .vol-c{ display:block; width:100%; height:100%; }
.vg-vol text{
  font-family:"Archivo",system-ui,Arial,sans-serif;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  fill:#e6e8ea;
}

/* ---------- fenêtre ---------- */
.vg-vol .vol-bg{ fill:#0B0C0E; }
.vg-vol .vol-hd{ fill:#141519; }
.vg-vol .vol-hdl{ fill:#6e2f1d; }
.vg-vol .vol-dot{ fill:url(#vgvol-dot); }
.vg-vol .vol-ttl{ font-size:9px; font-weight:600; letter-spacing:1.1px; fill:#FF9E2C; }
.vg-vol .vol-cx{ font-size:7.5px; letter-spacing:.3px; fill:#8b909a; }
.vg-vol .vol-sep{ fill:#1d1f23; }

/* ---------- graphique ---------- */
.vg-vol .vol-grid{ fill:#ffffff; fill-opacity:.05; }
.vg-vol .vol-base{ fill:#1d1f23; }
.vg-vol .vol-line{ fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.vg-vol .vol-lsp{ stroke:#e0a44b; }
.vg-vol .vol-lnq{ stroke:#33c0d6; }
.vg-vol .vol-csp{ fill:#e0a44b; stroke:#0B0C0E; stroke-width:1.2; }
.vg-vol .vol-cnq{ fill:#33c0d6; stroke:#0B0C0E; stroke-width:1.2; }
.vg-vol .vol-vsp{ font-size:8.5px; font-weight:700; fill:#e0a44b; }
.vg-vol .vol-vnq{ font-size:8.5px; font-weight:700; fill:#33c0d6; }
.vg-vol .vol-tick{ font-size:7.5px; letter-spacing:.5px; fill:#8b909a; }
.vg-vol .vol-legt{ font-size:7.5px; letter-spacing:.6px; }
.vg-vol .vol-tsp{ fill:#e0a44b; }
.vg-vol .vol-tnq{ fill:#33c0d6; }
.vg-vol .vol-sp{ fill:#e0a44b; }
.vg-vol .vol-nq{ fill:#33c0d6; }

/* ---------- jauges ---------- */
.vg-vol .vol-klab{ font-size:7.5px; letter-spacing:.5px; fill:#565b64; }
.vg-vol .vol-verd{ font-size:11px; font-weight:800; letter-spacing:.4px; }
.vg-vol .vol-calm{ fill:#3fb6bf; }
.vg-vol .vol-warm{ fill:#c58a3e; }
.vg-vol .vol-kval{ font-size:11px; font-weight:700; fill:#e6e8ea; }
.vg-vol .vol-ech{ fill:url(#vgvol-ech); stroke:#1d1f23; stroke-width:1; }
.vg-vol .vol-cur{ fill:#e6e8ea; }

/* ---------- état de départ (le JS anime, cf. site.css:1312) ---------- */
.vg-vol .vol-a{ opacity:0; }
.vg-vol .vol-pt{ opacity:0; }
.vg-vol .vol-line{ stroke-dasharray:260; stroke-dashoffset:260; }

/* Sans script : l'état final, tout de suite. */
@media (scripting:none){
  .vg-vol .vol-a,.vg-vol .vol-pt{ opacity:1; }
  .vg-vol .vol-line{ stroke-dasharray:none; stroke-dashoffset:0; }
}
/* Mouvement refusé : l'état final, sans tracé ni glissement. */
@media (prefers-reduced-motion:reduce){
  .vg-vol .vol-a,.vg-vol .vol-pt{ opacity:1; }
  .vg-vol .vol-line{ stroke-dasharray:none; stroke-dashoffset:0; }
}

/* ---------- vignette backtest ---------- */
/* Vignette « backtest » — la tenue des niveaux.
   Petite fenêtre du terminal : jetons de l'app (frontend/index.html:16-27).
   Données réelles : ES, tenue en clôture sur 18 séances de bourse
   (backend/backtest_levels.py sur l'archive backend/hist/).
   Toutes les règles sont préfixées .vg-backtest. */

.vg-backtest{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  background:#0B0C0E; overflow:hidden;
}
.vg-backtest .bt-c{ display:block; width:100%; height:100%; }
.vg-backtest text{
  font-family:"Archivo",system-ui,Arial,sans-serif;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  fill:#e6e8ea;
}

/* ---------- fenêtre ---------- */
.vg-backtest .bt-bg{ fill:#0B0C0E; }
.vg-backtest .bt-hd{ fill:#141519; }
.vg-backtest .bt-hdl{ fill:#6e2f1d; }
.vg-backtest .bt-dot{ fill:url(#vgbt-dot); }
.vg-backtest .bt-ttl{ font-size:9px; font-weight:600; letter-spacing:1.1px; fill:#FF9E2C; }
.vg-backtest .bt-cx{ font-size:7.5px; letter-spacing:.3px; fill:#8b909a; }
.vg-backtest .bt-sep{ fill:#1d1f23; }
.vg-backtest .bt-col{ font-size:7px; letter-spacing:.7px; fill:#565b64; }
.vg-backtest .bt-foot{ font-size:7px; letter-spacing:.1px; fill:#565b64; }

/* ---------- une ligne = un niveau ---------- */
.vg-backtest .bt-nm{ font-size:8px; font-weight:600; fill:#e6e8ea; }
.vg-backtest .bt-trk{ fill:#1d1f23; }
.vg-backtest .bt-lo{ fill:#33c06a; }               /* jusqu'à la borne basse */
.vg-backtest .bt-hi{ fill:#33c06a; fill-opacity:.30; }  /* borne basse → taux */
.vg-backtest .bt-tk{ fill:#e6e8ea; fill-opacity:.85; }
.vg-backtest .bt-w .bt-lo{ fill:#e0a44b; }         /* sous la barre des 85 % */
.vg-backtest .bt-w .bt-hi{ fill:#e0a44b; fill-opacity:.30; }
.vg-backtest .bt-val{ font-size:9.5px; font-weight:700; fill:#e6e8ea; }
.vg-backtest .bt-w .bt-val{ fill:#e0a44b; }
.vg-backtest .bt-lo2{ font-size:7.5px; fill:#8b909a; }
.vg-backtest .bt-n{ font-size:7.5px; fill:#565b64; }

/* ---------- mouvement : une seule fois, à l'entrée dans l'écran ----------
   L'état FINAL est celui du markup : sans JS la vignette est complète.
   HFVG.backtest() pose « vgi » (état de départ) puis « on » (la transition). */
.vg-backtest .bt-g{ transform-box:fill-box; transform-origin:left center; }
.vg-backtest.vgi .bt-g{ transform:scaleX(0); }
.vg-backtest.vgi .bt-num{ opacity:0; }
.vg-backtest.vgi.on .bt-g{
  transform:scaleX(1);
  transition:transform 620ms cubic-bezier(.16,1,.3,1);
}
.vg-backtest.vgi.on .bt-num{ opacity:1; transition:opacity 260ms ease 260ms; }
.vg-backtest.vgi.on .bt-r2 .bt-g{ transition-delay:80ms; }
.vg-backtest.vgi.on .bt-r3 .bt-g{ transition-delay:160ms; }
.vg-backtest.vgi.on .bt-r4 .bt-g{ transition-delay:240ms; }
.vg-backtest.vgi.on .bt-r5 .bt-g{ transition-delay:320ms; }
.vg-backtest.vgi.on .bt-r2 .bt-num{ transition-delay:340ms; }
.vg-backtest.vgi.on .bt-r3 .bt-num{ transition-delay:420ms; }
.vg-backtest.vgi.on .bt-r4 .bt-num{ transition-delay:500ms; }
.vg-backtest.vgi.on .bt-r5 .bt-num{ transition-delay:580ms; }

@media (prefers-reduced-motion:reduce){
  .vg-backtest.vgi .bt-g{ transform:none; }
  .vg-backtest.vgi .bt-num{ opacity:1; }
  .vg-backtest .bt-g, .vg-backtest .bt-num{ transition:none; }
}

/* ---------- vignette export ---------- */
/* Vignette « export » — le ruban.
   Trois blocs, un trait où circulent les niveaux, une horloge de 2 min, et le
   chart d'arrivée où les niveaux se posent. Petite fenêtre du terminal :
   jetons de l'app (frontend/index.html:16-27), logo = frontend/index.html:927-936,
   chart = closes 1 min réels de l'ES. Toutes les règles sont préfixées .vg-export. */

.vg-export{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  background:#0B0C0E; overflow:hidden;
}
.vg-export .ex-c{ display:block; width:100%; height:100%; }
.vg-export text{
  font-family:"Archivo",system-ui,Arial,sans-serif;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  fill:#e6e8ea;
}

/* ---------- fenêtre ---------- */
.vg-export .ex-bg{ fill:#0B0C0E; }
.vg-export .ex-hd{ fill:#141519; }
.vg-export .ex-hdl{ fill:#6e2f1d; }
.vg-export .ex-dot{ fill:url(#vgex-dot); }
.vg-export .ex-ttl{ font-size:9px; font-weight:600; letter-spacing:1.1px; fill:#FF9E2C; }
.vg-export .ex-clock{ font-size:7.5px; letter-spacing:.3px; fill:#8b909a; }
.vg-export .ex-ringbg{ fill:none; stroke:#2b2e34; stroke-width:1.5; }
.vg-export .ex-ring{
  fill:none; stroke:#FF9E2C; stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:40.84; stroke-dashoffset:0;
}

/* ---------- les trois blocs ---------- */
.vg-export .ex-lab{ font-size:7px; letter-spacing:.7px; fill:#8b909a; }
.vg-export .ex-box{ fill:#0f1013; stroke:#1d1f23; stroke-width:1; }
.vg-export .ex-box2{ stroke:#2b2e34; }
.vg-export .ex-box3{ fill:#0B0C0E; }
.vg-export .ex-tc{ fill:#e0a44b; }      /* calls */
.vg-export .ex-tp{ fill:#3fbf6a; }      /* puts  */
.vg-export .ex-wm{ font-size:10.5px; font-weight:700; letter-spacing:1.3px; fill:#FF9E2C; }
.vg-export .ex-sub{ font-size:7.5px; fill:#8b909a; }

/* ---------- le trait et les niveaux qui circulent ---------- */
.vg-export .ex-wire{ stroke:#2b2e34; stroke-width:1; }
.vg-export .ex-arrow{ fill:#3d9bd6; }
.vg-export .ex-dt{ fill:#3d9bd6; opacity:0; }

/* ---------- le chart d'arrivée ---------- */
.vg-export .ex-px{ stroke:#5a616b; stroke-width:.9; stroke-linejoin:round; }
.vg-export .ex-lv{ stroke-width:1; stroke-dasharray:3 2.4; opacity:1; }
.vg-export .ex-l1{ stroke:#e01c5d; }    /* Call Res. 0DTE */
.vg-export .ex-l2{ stroke:#16ac38; }    /* HVL */
.vg-export .ex-l3{ stroke:#9aa0a6; }    /* 1D Min */

/* ---------- mouvement : trois tours d'horloge, puis plus rien ----------
   L'état FINAL est celui du markup : les trois niveaux sont posés, les points
   sont invisibles, l'horloge est pleine. HFVG.export() pose « vgi » puis « on ». */
.vg-export.vgi .ex-lv{ opacity:0; }
.vg-export.vgi .ex-ring{ stroke-dashoffset:40.84; }

.vg-export.vgi.on .ex-ring{ animation:vgex-clock 3.2s linear 3 forwards; }
.vg-export.vgi.on .ex-dt{ animation:vgex-d1 3.2s linear 3 both; }
.vg-export.vgi.on .ex-d1b{ animation-delay:.18s; }
.vg-export.vgi.on .ex-d1c{ animation-delay:.36s; }
.vg-export.vgi.on .ex-d2a{ animation-name:vgex-d2; }
.vg-export.vgi.on .ex-d2b{ animation-name:vgex-d2; animation-delay:.18s; }
.vg-export.vgi.on .ex-d2c{ animation-name:vgex-d2; animation-delay:.36s; }
.vg-export.vgi.on .ex-lv{ animation:vgex-pose 420ms cubic-bezier(.16,1,.3,1) forwards; }
.vg-export.vgi.on .ex-l1{ animation-delay:2.55s; }
.vg-export.vgi.on .ex-l2{ animation-delay:5.75s; }
.vg-export.vgi.on .ex-l3{ animation-delay:8.95s; }

@keyframes vgex-clock{ from{ stroke-dashoffset:40.84 } to{ stroke-dashoffset:0 } }
@keyframes vgex-d1{
  0%   { transform:translateX(0);    opacity:0 }
  4%   { opacity:1 }
  28%  { transform:translateX(25px); opacity:1 }
  33%  { transform:translateX(25px); opacity:0 }
  100% { transform:translateX(25px); opacity:0 }
}
@keyframes vgex-d2{
  0%   { transform:translateX(0);    opacity:0 }
  33%  { transform:translateX(0);    opacity:0 }
  37%  { opacity:1 }
  61%  { transform:translateX(25px); opacity:1 }
  66%  { transform:translateX(25px); opacity:0 }
  100% { transform:translateX(25px); opacity:0 }
}
@keyframes vgex-pose{
  from{ opacity:0; transform:translateX(-6px) }
  to  { opacity:1; transform:translateX(0) }
}

@media (prefers-reduced-motion:reduce){
  .vg-export.vgi .ex-lv{ opacity:1; }
  .vg-export.vgi .ex-ring{ stroke-dashoffset:0; }
  .vg-export .ex-ring, .vg-export .ex-dt, .vg-export .ex-lv{ animation:none; }
}

/* ---------- vignette vue ---------- */
/* Vignette « vue » — mini panneau POSITIONNEMENT DEALER.
   Une petite fenêtre du terminal posée sur le papier : jetons de l'app
   (frontend/index.html:16-27), rien d'inventé, « — » si une valeur manque.
   Toutes les règles sont préfixées .vg-vue. */

.vg-vue{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  background:#0B0C0E; overflow:hidden;
}
.vg-vue .vue-c{ display:block; width:100%; height:100%; }
.vg-vue text{
  font-family:"Archivo",system-ui,Arial,sans-serif;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  fill:#e6e8ea;
}
/* γ n'est dans aucun sous-ensemble d'Archivo (skill §3) : pile déclarée. */
.vg-vue .grec{ font-family:"Segoe UI Symbol","DejaVu Sans","Noto Sans Symbols 2",system-ui,sans-serif; }

/* ---------- fenêtre ---------- */
.vg-vue .vue-bg{ fill:#0B0C0E; }
.vg-vue .vue-hd{ fill:#141519; }
.vg-vue .vue-hdl{ fill:#6e2f1d; }
.vg-vue .vue-dot{ fill:url(#vgvue-dot); }
.vg-vue .vue-ttl{ font-size:9px; font-weight:600; letter-spacing:1.1px; fill:#FF9E2C; }
.vg-vue .vue-cx{ font-size:7.5px; letter-spacing:.3px; fill:#8b909a; }
.vg-vue .vue-sep{ fill:#1d1f23; }

/* ---------- régime ---------- */
.vg-vue .vue-reg{ font-size:12px; font-weight:800; letter-spacing:.3px; fill:#FF5A4D; }
.vg-vue .vue-chipb{ fill:none; stroke:#2b2e34; stroke-width:1; }
.vg-vue .vue-chip{ font-size:7.5px; letter-spacing:.5px; fill:#8b909a; }

/* ---------- nets ---------- */
.vg-vue .vue-nlab{ font-size:7.5px; letter-spacing:.5px; fill:#565b64; }
.vg-vue .vue-nval{ font-size:16px; font-weight:800; }
.vg-vue .vue-pos{ fill:#33C06A; }
.vg-vue .vue-neg{ fill:#FF5A4D; }

/* ---------- colonne short γ / long γ ---------- */
.vg-vue .vue-end{ font-size:7.5px; letter-spacing:.5px; fill:#565b64; }
.vg-vue .vue-trk{ fill:url(#vgvue-trk); stroke:#1d1f23; stroke-width:1; }
.vg-vue .vue-zero{ fill:#565b64; opacity:.6; }
.vg-vue .vue-cur{ fill:#FF5A4D; stroke:#0B0C0E; stroke-width:2; }

/* ---------- GEX par échéance ---------- */
.vg-vue .vue-lab{ font-size:7.5px; letter-spacing:.7px; fill:#c58a3e; }
.vg-vue .vue-tsk{ font-size:8px; fill:#8b909a; }
.vg-vue .vue-tsbg{ fill:#ffffff; fill-opacity:.025; }
.vg-vue .vue-axis{ fill:#2b2e34; }
.vg-vue .vue-tsv{ font-size:8.5px; }
.vg-vue .vue-fpos{ fill:#33C06A; transform-box:fill-box; transform-origin:left center; }
.vg-vue .vue-fneg{ fill:#FF5A4D; transform-box:fill-box; transform-origin:right center; }

/* ---------- état de départ (le JS anime, cf. site.css:1312) ---------- */
.vg-vue .vue-a{ opacity:0; }
.vg-vue .vue-fpos,.vg-vue .vue-fneg{ transform:scaleX(0); }

/* Sans script : l'état final, tout de suite. */
@media (scripting:none){
  .vg-vue .vue-a{ opacity:1; }
  .vg-vue .vue-fpos,.vg-vue .vue-fneg{ transform:none; }
}
/* Mouvement refusé : l'état final, sans compte ni remplissage. */
@media (prefers-reduced-motion:reduce){
  .vg-vue .vue-a{ opacity:1; }
  .vg-vue .vue-fpos,.vg-vue .vue-fneg{ transform:none; }
}

/* ---------- vignette copilote ---------- */
/* =========================================================================
   Vignette « copilote » — le bloc de lecture, tel qu'il s'écrit quand une
   source manque : un verdict neutre, cinq lignes vérifiables, et la pastille
   qui rappelle que c'est une lecture. Aucun prix absolu, aucune consigne.
   Règles préfixées .vg-copilote. Aucun style en ligne (CSP).
   ========================================================================= */
.vg-copilote{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  background:#0B0C0E; overflow:hidden;
  font-family:"Archivo",system-ui,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}
.vg-copilote .vgc-svg{ display:block; width:100%; height:100%; }

/* ---- tête ---- */
.vg-copilote .vgc-hd{ fill:#FF9E2C; font-size:8.5px; font-weight:800; letter-spacing:.14em; }
.vg-copilote .vgc-sep{ stroke:#6e2f1d; stroke-width:1; }

/* ---- verdict ---- */
.vg-copilote .vgc-mk{ fill:#565b64; }
.vg-copilote .vgc-vd{ fill:#e6e8ea; font-size:13px; font-weight:700; }

/* ---- lignes ---- */
.vg-copilote .vgc-tx{ fill:#c8ccd2; font-size:11.5px; }
.vg-copilote .vgc-pu{ fill:#565b64; }
.vg-copilote .vgc-call{ fill:#e0a44b; font-weight:700; }   /* calls */
.vg-copilote .vgc-put{ fill:#3fbf6a; font-weight:700; }    /* puts */
.vg-copilote .vgc-vi{ fill:#7d75e8; font-weight:700; }     /* PULSE */
.vg-copilote .vgc-z{ fill:#8b909a; font-weight:700; }
.vg-copilote .vgc-ko{ fill:#FF5A4D; font-weight:700; }
/* ✗ n'est pas dans le sous-ensemble Archivo : pile de repli DÉCLARÉE */
.vg-copilote .vgc-sym{ font-family:"Segoe UI Symbol","DejaVu Sans",system-ui,sans-serif; }

/* ---- pastille de pied ---- */
.vg-copilote .vgc-pst{ fill:none; stroke:#2b2e34; stroke-width:1; }
.vg-copilote .vgc-pt{ fill:#8b909a; font-size:9px; letter-spacing:.02em; }

/* ---- état de départ (posé par le JS via .vgc-go / .vgc-fin) ---- */
.vg-copilote .vgc-l{ opacity:0; transform:translateY(5px); }

/* ---- arrivée : les lignes s'écrivent une à une ---- */
.vg-copilote.vgc-go .vgc-l{
  opacity:1; transform:translateY(0);
  transition:opacity 300ms cubic-bezier(.16,1,.3,1), transform 300ms cubic-bezier(.16,1,.3,1);
}
.vg-copilote.vgc-go .vgc-b>g:nth-child(1){ transition-delay:60ms; }
.vg-copilote.vgc-go .vgc-b>g:nth-child(2){ transition-delay:180ms; }
.vg-copilote.vgc-go .vgc-b>g:nth-child(3){ transition-delay:270ms; }
.vg-copilote.vgc-go .vgc-b>g:nth-child(4){ transition-delay:360ms; }
.vg-copilote.vgc-go .vgc-b>g:nth-child(5){ transition-delay:450ms; }
.vg-copilote.vgc-go .vgc-b>g:nth-child(6){ transition-delay:540ms; }
.vg-copilote.vgc-go .vgc-b>g:nth-child(7){ transition-delay:700ms; }

/* ---- état final direct (mouvement réduit, ou filet) ---- */
.vg-copilote.vgc-fin .vgc-l{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .vg-copilote .vgc-l{ opacity:1; transform:none; }
  .vg-copilote *{ transition:none !important; animation:none !important; }
}

/* ---------- vignette tape ---------- */
.vg-tape{position:relative;display:block;width:100%;aspect-ratio:16/9;
  background:#0B0C0E;overflow:hidden}
.vg-tape .vg-tape-svg{display:block;width:100%;height:100%;font-family:inherit;
  font-variant-numeric:tabular-nums}
.vg-tape .vg-tape-bg{fill:#0B0C0E}
.vg-tape .vg-tape-hd{fill:#111418}
.vg-tape .vg-tape-hdl{stroke:#262C31;stroke-width:.8;fill:none}
.vg-tape .vg-tape-t1{fill:#FF9E2C;font-size:8px;font-weight:600;letter-spacing:.1em}
.vg-tape .vg-tape-t2{fill:#6E757B;font-size:8px;font-weight:600;letter-spacing:.08em;text-anchor:end}
.vg-tape .vg-tape-alt{fill:#FFFFFF;fill-opacity:.022}
.vg-tape .vg-tape-h{fill:#7E858B;font-size:8px;letter-spacing:.02em}
.vg-tape .vg-tape-s{fill:#9AA0A6;font-size:8px;font-weight:600;letter-spacing:.05em}
.vg-tape .vg-tape-v{font-size:8px;font-weight:600;text-anchor:end}
.vg-tape .vg-tape-v.p{fill:#33C06A}
.vg-tape .vg-tape-v.n{fill:#FF5A4D}
.vg-tape .vg-tape-bar.p{fill:#33C06A;fill-opacity:.28}
.vg-tape .vg-tape-bar.n{fill:#FF5A4D;fill-opacity:.28}
.vg-tape .vg-tape-sep{stroke:#1E2327;stroke-width:.8;fill:none}
.vg-tape .vg-tape-lg{fill:#9AA0A6;font-size:7.4px}
.vg-tape .vg-tape-jb{fill:#191D21}
.vg-tape .vg-tape-jf{fill:#FF9E2C}
.vg-tape .vg-tape-jv{fill:#FF9E2C;font-size:7.4px;font-weight:600;text-anchor:end}

/* ---------- vignette marches ---------- */
/* =========================================================================
   Vignette « marches » — mini bande des marchés : quatre rangées qui défilent
   à des vitesses différentes, pause au survol. Mêmes symboles et mêmes valeurs
   que la bande de la page. Règles préfixées .vg-marches. Aucun style en ligne.
   ========================================================================= */
.vg-marches{
  position:relative; display:flex; flex-direction:column;
  width:100%; aspect-ratio:16/9; background:#0B0C0E; overflow:hidden;
  font-family:"Archivo",system-ui,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}

/* ---- tête ---- */
.vg-marches .vgm-hd{
  flex:0 0 24px; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:0 9px; border-bottom:1px solid #6e2f1d;
}
.vg-marches .vgm-ti{ color:#FF9E2C; font-size:8.5px; font-weight:800; letter-spacing:.14em; }

/* ---- pied : les autres classifications de la même bande ---- */
.vg-marches .vgm-pied{
  flex:0 0 23px; display:flex; align-items:center; padding:0 9px;
  border-top:1px solid #6e2f1d;
  color:#8b909a; font-size:8.5px; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden;
}

/* ---- rangées ---- */
.vg-marches .vgm-row{
  flex:1 1 0; min-height:0; display:flex; align-items:stretch;
  border-top:1px solid #1d1f23;
}
.vg-marches .vgm-row:first-of-type{ border-top:none; }

/* l'étiquette de classification, fixe */
.vg-marches .vgm-cat{
  flex:0 0 auto; width:64px; padding-left:9px;
  display:flex; align-items:center;
  color:#FF9E2C; font-size:8px; font-weight:800; letter-spacing:.13em;
  line-height:1; border-right:1px solid #6e2f1d;
}

/* la fenêtre et le ruban */
.vg-marches .vgm-win{
  position:relative; flex:1 1 auto; min-width:0; overflow:hidden;
  display:flex; align-items:center;
}
.vg-marches .vgm-trk{
  display:inline-flex; white-space:nowrap; will-change:transform;
  animation:vgmDefile 40s linear infinite;
  animation-play-state:paused;                 /* démarré par HFVG['marches'] */
}
.vg-marches.vgm-go .vgm-trk{ animation-play-state:running; }
.vg-marches:hover .vgm-trk{ animation-play-state:paused; }
@keyframes vgmDefile{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.vg-marches .vgm-seq{ display:inline-flex; }
.vg-marches .vgm-it{
  display:inline-flex; align-items:baseline; gap:6px;
  margin-left:13px; padding-left:13px; border-left:1px solid #1d1f23;
  font-size:10.5px; line-height:1;
}
.vg-marches .vgm-it b{ color:#FF9E2C; font-weight:700; }
.vg-marches .vgm-px{ color:#e6e8ea; }
.vg-marches .vgm-up{ color:#33C06A; }
.vg-marches .vgm-dn{ color:#FF5A4D; }

@media (prefers-reduced-motion: reduce){
  .vg-marches .vgm-trk{ animation:none !important; transform:none !important; }
}

/* ---------- vignette news ---------- */
/* Vignette « news » — le verrou.
   Une journée de séance, deux annonces sans nom, la fenêtre de verrou qui se
   ferme puis se rouvre, le bandeau des dépêches qui passe en rouge une fois.
   Fenêtre réelle du terminal : de 15 min avant à 10 min après l'annonce
   (frontend/app.js:3814-3816 ; backend/server.py:2910-2911). Petite fenêtre du
   terminal : jetons de l'app (frontend/index.html:16-27).
   Toutes les règles sont préfixées .vg-news. */

.vg-news{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  background:#0B0C0E; overflow:hidden;
}
.vg-news .nw-c{ display:block; width:100%; height:100%; }
.vg-news text{
  font-family:"Archivo",system-ui,Arial,sans-serif;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  fill:#e6e8ea;
}

/* ---------- fenêtre ---------- */
.vg-news .nw-bg{ fill:#0B0C0E; }
.vg-news .nw-hd{ fill:#141519; }
.vg-news .nw-hdl{ fill:#6e2f1d; }
.vg-news .nw-dot{ fill:url(#vgnw-dot); }
.vg-news .nw-ttl{ font-size:9px; font-weight:600; letter-spacing:1.1px; fill:#FF9E2C; }
.vg-news .nw-cx{ font-size:7px; letter-spacing:.2px; fill:#8b909a; }

/* ---------- la journée ---------- */
.vg-news .nw-sess{ fill:#3d9bd6; fill-opacity:.04; }
.vg-news .nw-sesslab{ font-size:7px; letter-spacing:.5px; fill:#565b64; }
.vg-news .nw-an{ font-size:7px; letter-spacing:.4px; fill:#565b64; }
.vg-news .nw-hh{ font-size:7.5px; fill:#8b909a; }
.vg-news .nw-stem{ stroke:#2b2e34; stroke-width:.9; stroke-dasharray:2 2.2; }
.vg-news .nw-axis{ stroke:#2b2e34; stroke-width:1; }
.vg-news .nw-axis2{ stroke:#565b64; stroke-width:1.4; }
.vg-news .nw-tick{ stroke:#2b2e34; stroke-width:1; }
.vg-news .nw-hr{ font-size:7px; fill:#565b64; }

/* ---------- le verrou ---------- */
.vg-news .nw-zone{ fill:none; stroke:#ff5a4d; stroke-width:.8; stroke-dasharray:2 2; stroke-opacity:.55; }
.vg-news .nw-hfill{ fill:#ff5a4d; fill-opacity:.10; }
.vg-news .nw-h{ transform-box:fill-box; transform-origin:center top; }
.vg-news .nw-h1{ opacity:0; }   /* 14 h 30 : le verrou est passé, la fenêtre est rouverte */
.vg-news .nw-h2{ opacity:1; }   /* 16 h 00 : le verrou est en cours */

/* ---------- le bandeau des dépêches ---------- */
.vg-news .nw-band{ fill:#141519; stroke:#1d1f23; stroke-width:1; }
.vg-news .nw-hl{ fill:#2b2e34; }
.vg-news .nw-mk{ fill:#ff5a4d; }
.vg-news .nw-chip{ fill:#ff5a4d; fill-opacity:.12; stroke:#ff5a4d; stroke-width:.9; }
.vg-news .nw-chiptx{ font-size:7px; letter-spacing:.3px; fill:#ff5a4d; }

/* ---------- mouvement : une seule passe de 5 s ----------
   L'état FINAL est celui du markup : sans JS la vignette est complète.
   HFVG.news() pose « vgi » (état de départ) puis « on » (la passe). */
.vg-news.vgi .nw-h{ opacity:0; transform:scaleY(0); }
.vg-news.vgi .nw-mk{ fill:#565b64; }
.vg-news.vgi .nw-chip{ fill-opacity:0; stroke:#2b2e34; }
.vg-news.vgi .nw-chiptx{ fill:#565b64; }

.vg-news.vgi.on .nw-h1{ animation:vgnw-l1 5s linear forwards; }
.vg-news.vgi.on .nw-h2{ animation:vgnw-l2 5s linear forwards; }
.vg-news.vgi.on .nw-mk{ animation:vgnw-mk 5s linear forwards; }
.vg-news.vgi.on .nw-chip{ animation:vgnw-chip 5s linear forwards; }
.vg-news.vgi.on .nw-chiptx{ animation:vgnw-chiptx 5s linear forwards; }

@keyframes vgnw-l1{           /* se ferme, tient, se rouvre */
  0%   { transform:scaleY(0);   opacity:0 }
  6%   { transform:scaleY(.08); opacity:1 }
  18%  { transform:scaleY(1);   opacity:1 }
  40%  { transform:scaleY(1);   opacity:1 }
  48%  { transform:scaleY(0);   opacity:0 }
  100% { transform:scaleY(0);   opacity:0 }
}
@keyframes vgnw-l2{           /* se ferme et reste fermée */
  0%   { transform:scaleY(0);   opacity:0 }
  58%  { transform:scaleY(0);   opacity:0 }
  60%  { transform:scaleY(.08); opacity:1 }
  72%  { transform:scaleY(1);   opacity:1 }
  100% { transform:scaleY(1);   opacity:1 }
}
@keyframes vgnw-mk{
  0%   { fill:#565b64 } 80% { fill:#565b64 } 86% { fill:#ff5a4d } 100% { fill:#ff5a4d }
}
@keyframes vgnw-chip{
  0%   { fill-opacity:0;   stroke:#2b2e34 }
  80%  { fill-opacity:0;   stroke:#2b2e34 }
  86%  { fill-opacity:.20; stroke:#ff5a4d }
  92%  { fill-opacity:.12; stroke:#ff5a4d }
  100% { fill-opacity:.12; stroke:#ff5a4d }
}
@keyframes vgnw-chiptx{
  0%   { fill:#565b64 } 80% { fill:#565b64 } 86% { fill:#ff5a4d } 100% { fill:#ff5a4d }
}

@media (prefers-reduced-motion:reduce){
  .vg-news.vgi .nw-h1{ opacity:0; transform:none; }
  .vg-news.vgi .nw-h2{ opacity:1; transform:none; }
  .vg-news.vgi .nw-mk{ fill:#ff5a4d; }
  .vg-news.vgi .nw-chip{ fill-opacity:.12; stroke:#ff5a4d; }
  .vg-news.vgi .nw-chiptx{ fill:#ff5a4d; }
  .vg-news .nw-h, .vg-news .nw-mk, .vg-news .nw-chip, .vg-news .nw-chiptx{ animation:none; }
}

/* ---------- vignette prism ---------- */
/* vignette PRISM - champ gamma net prix x heure, ES 11/09/2026 (releves reels).
   Echelle de couleur : signe (vert positif / rouge negatif), magnitude comprimee
   en |v|^0,9 plafonnee a 2 000 M$ par point, 7 paliers (voir prism.md). */
.vg-prism{display:block;position:relative;width:100%;aspect-ratio:16/9;background:#0B0C0E;overflow:hidden}
.vg-prism .vgp-svg{display:block;width:100%;height:100%}
.vg-prism .bed{fill:#0E1013}
.vg-prism .cad{fill:none;stroke:#1D2126;stroke-width:1}
.vg-prism .c{shape-rendering:crispEdges}
.vg-prism .g0{fill:#0F1E17}
.vg-prism .g1{fill:#153724}
.vg-prism .g2{fill:#1B5433}
.vg-prism .g3{fill:#217142}
.vg-prism .g4{fill:#288E50}
.vg-prism .g5{fill:#2EA95E}
.vg-prism .g6{fill:#33C06A}
.vg-prism .r0{fill:#231414}
.vg-prism .r1{fill:#461F1D}
.vg-prism .r2{fill:#6D2B27}
.vg-prism .r3{fill:#943831}
.vg-prism .r4{fill:#BB443B}
.vg-prism .r5{fill:#DF5045}
.vg-prism .r6{fill:#FF5A4D}
.vg-prism .pxl{fill:none;stroke:#E6E8EA;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.vg-prism .shut{fill:#0B0C0E;transform-box:view-box;transform-origin:314px 7px;transform:scaleX(0)}
.vg-prism .tete{fill:#FF9E2C;transform-box:view-box;transform-origin:6px 7px;opacity:0}

/* entree : le champ se dessine colonne par colonne, la courbe de prix suit */
.vg-prism.anim .shut{animation:vgp-volet 1500ms steps(30,end) 140ms both}
.vg-prism.anim .tete{animation:vgp-tete 1500ms steps(30,end) 140ms both}
.vg-prism.anim .pxl{animation:vgp-trace 1500ms linear 140ms both}

@keyframes vgp-volet{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes vgp-tete{0%{opacity:.9;transform:translateX(0)}86%{opacity:.9}100%{opacity:0;transform:translateX(308px)}}
@keyframes vgp-trace{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}

/* calme : etat final, aucun mouvement */
@media (prefers-reduced-motion:reduce){
  .vg-prism.anim .shut,.vg-prism.anim .tete,.vg-prism.anim .pxl{animation:none}
}
.vg-prism.fini .shut,.vg-prism.fini .tete,.vg-prism.fini .pxl{animation:none}

/* ---------- vignettes : les deux regles de fin ----------
   Elles arrivent APRES les quatorze blocs : a specificite egale (le selecteur
   universel ne compte pas), seule la position departage. */

/* une animation continue (la mini-bande des marches) ne tourne jamais hors
   ecran ni sur un onglet cache : l'ordonnanceur de site.js pose .vg-hors. */
.tuile .vg.vg-hors,.tuile .vg.vg-hors *{animation-play-state:paused}

/* filet SANS JAVASCRIPT — meme principe que le bloc plus haut : douze
   vignettes portent deja leur etat final dans le markup, deux partent
   cachees (c'est HFVG qui les revele). Script coupe, on les pose. */
@media (scripting: none){
  .vg-scanner .vgs-r{ opacity:1; }
  .vg-scanner .vgs-bar{ transform:scaleX(1); }
  .vg-copilote .vgc-l{ opacity:1; transform:none; }
}