/* =====================================================================
   COPILOTE, feuille de style commune
   Toutes les pages du site reposent sur ce seul fichier.

   Organisation :
     1. Jetons de couleur (thème clair / sombre, 5 accents)
     2. Matière (mat / verre)
     3. Structure (rail, contenu, cartes)
     4. Composants (boutons, tableaux, jauges, jetons)
     5. Site public (accueil, tarifs)
   ===================================================================== */

@import url('polices.css?v=15');

/* ---------- 1. JETONS ---------- */
:root{
  --bg:#F2F1ED; --panel:#FFFFFF; --ink:#1C1B18; --muted:#6E6A60;
  --line:#C9C5BC; --hair:#E4E1DA; --track:#DEDAD1;
  --rayon:0px;
  --verre:var(--panel);
  --gloss:none; --gloss-fort:none;
  --ombre-1:none; --ombre-2:none;
  --bordure:var(--line);
}
[data-theme="sombre"]{
  --bg:#1F2220; --panel:#282C29; --ink:#E9E9E4; --muted:#96998F;
  --line:#3D4340; --hair:#343936; --track:#3A403C;
}
[data-accent="brun"]{--accent:#8A5A2B}
[data-accent="olive"]{--accent:#6B6234}
[data-accent="bleu"]{--accent:#3A4A7A}
[data-accent="prune"]{--accent:#5B3A5A}
[data-accent="encre"]{--accent:#1C1B18}
[data-theme="sombre"][data-accent="brun"]{--accent:#C98A4B}
[data-theme="sombre"][data-accent="olive"]{--accent:#B5A96A}
[data-theme="sombre"][data-accent="bleu"]{--accent:#8B9BD4}
[data-theme="sombre"][data-accent="prune"]{--accent:#C48FC2}
[data-theme="sombre"][data-accent="encre"]{--accent:#E9E9E4}

/* ---------- 1 bis. COULEUR DES BOUGIES ----------
   Trois partis pris, réglables en direct. Les graphiques lisent ces
   quatre variables, ils n'écrivent aucune couleur en dur.
     encre     presse financière : creuse en hausse, pleine en baisse
     accent    hausse dans la couleur d'accent, baisse à l'encre
     marche    vert et rouge, mais désaturés pour rester tenables
   -------------------------------------------------------------- */
:root,[data-bougies="encre"]{
  --b-haut:var(--panel); --b-bas:var(--ink);
  --b-trait-haut:var(--ink); --b-trait-bas:var(--ink);
}
[data-bougies="accent"]{
  --b-haut:var(--accent); --b-bas:var(--ink);
  --b-trait-haut:var(--accent); --b-trait-bas:var(--ink);
}
/* Teintes reprises de TradeTrack : vives, pas sourdes. Sur un
   graphique, des couleurs desaturees se lisent mal a petite taille. */
[data-bougies="marche"]{
  --b-haut:#10b981; --b-bas:#ef4444;
  --b-trait-haut:#10b981; --b-trait-bas:#ef4444;
}


/* Curseur croisé et étiquettes d'axe : très discrets, sinon ils
   dominent le graphique. */
:root{ --crosshair:rgba(110,106,96,.35); --etiquette:#3A362E; }
[data-theme="sombre"]{ --crosshair:rgba(148,163,184,.28); --etiquette:#334155; }

/* ---------- Teintes des zones du graphique ----------
   Le risque et l'objectif doivent se distinguer sans rappeler le vert et
   rouge des plateformes : on reste dans la palette, en jouant sur la
   densité plutôt que sur la teinte. */
:root{
  --zone-risque:rgba(28,27,24,.10);
  --zone-gain:color-mix(in srgb, var(--accent) 16%, transparent);
  --zone-neutre:color-mix(in srgb, var(--accent) 8%, transparent);
  --trait-risque:#8B3A2F;
  --trait-gain:#3E7A5E;
}
[data-theme="sombre"]{
  --zone-risque:rgba(255,255,255,.09);
  --zone-gain:color-mix(in srgb, var(--accent) 22%, transparent);
  --zone-neutre:color-mix(in srgb, var(--accent) 11%, transparent);
  --trait-risque:#D98A7C;
  --trait-gain:#6FC79A;
}

/* ---------- 2. MATIÈRE VERRE ---------- */
[data-matiere="verre"]{
  --rayon:14px;
  --verre:color-mix(in srgb, var(--panel) 70%, transparent);
  --gloss:inset 0 1px 0 rgba(255,255,255,.75);
  --gloss-fort:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(28,27,24,.05);
  --ombre-1:0 1px 2px rgba(28,27,24,.06), 0 6px 18px rgba(28,27,24,.07);
  --ombre-2:0 2px 6px rgba(28,27,24,.08), 0 18px 46px rgba(28,27,24,.12);
  --bordure:color-mix(in srgb, var(--line) 62%, transparent);
}
[data-theme="sombre"][data-matiere="verre"]{
  --verre:color-mix(in srgb, var(--panel) 66%, transparent);
  --gloss:inset 0 1px 0 rgba(255,255,255,.10);
  --gloss-fort:inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(0,0,0,.25);
  --ombre-1:0 1px 2px rgba(0,0,0,.34), 0 6px 20px rgba(0,0,0,.34);
  --ombre-2:0 2px 8px rgba(0,0,0,.4), 0 20px 50px rgba(0,0,0,.46);
  --bordure:color-mix(in srgb, var(--line) 75%, transparent);
}
body[data-matiere="verre"]{
  background:
    radial-gradient(1000px 680px at 10% -12%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    radial-gradient(820px 560px at 92% 4%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
    radial-gradient(700px 700px at 60% 110%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* ---------- 3. BASE ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.55; transition:background .2s, color .2s;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
a{color:inherit}
img,svg{max-width:100%}

/* ---------- RAIL ---------- */
.rail{
  position:fixed;left:0;top:0;width:68px;height:100vh;z-index:50;
  background:var(--panel);border-right:1px solid var(--line);
  padding:18px 14px;display:flex;flex-direction:column;gap:3px;overflow:hidden;
  transition:width .28s cubic-bezier(.22,1,.36,1);
}
[data-matiere="verre"] .rail{
  background:var(--verre);border-right:1px solid var(--bordure);
  backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);
  box-shadow:var(--gloss), 1px 0 24px rgba(28,27,24,.05);
}
[data-theme="sombre"][data-matiere="verre"] .rail{box-shadow:var(--gloss), 1px 0 30px rgba(0,0,0,.4)}
.rail:hover,.rail:focus-within{width:236px}
.rail .logo{
  font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;letter-spacing:.22em;
  height:40px;display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-shrink:0;
  white-space:nowrap;text-decoration:none;
}
.rail .logo b{
  width:40px;height:40px;flex-shrink:0;border:1.5px solid var(--ink);
  display:grid;place-items:center;font-size:15px;font-weight:600;
}
[data-matiere="verre"] .rail .logo b{border-radius:11px;box-shadow:var(--gloss-fort), var(--ombre-1)}
.rail a.nav{
  display:flex;align-items:center;gap:14px;height:42px;padding:0 8px;flex-shrink:0;
  color:var(--muted);text-decoration:none;white-space:nowrap;font-size:15px;
  border-left:2px solid transparent;transition:background .2s, color .2s;
}
.rail a.nav:hover{color:var(--ink)}
.rail a.nav.actif{color:var(--ink);font-weight:600;border-left-color:var(--accent);background:var(--bg)}
[data-matiere="verre"] .rail a.nav{border-radius:10px;border-left:0}
[data-matiere="verre"] .rail a.nav.actif{
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 11%, transparent));
  box-shadow:var(--gloss), 0 1px 3px rgba(28,27,24,.08);
}
.rail a.nav svg{width:22px;height:22px;flex-shrink:0;margin-left:1px}
.rail .txt{opacity:0;transition:opacity .2s ease .04s}
.rail:hover .txt,.rail:focus-within .txt{opacity:1}
.rail .bas{margin-top:auto;flex-shrink:0}
/* Les réglages ne tiennent pas dans les 68 px du rail fermé : affichés,
   ils sont tranchés en deux par l'overflow. On les révèle avec le rail. */
.rail .bloc-reglage{
  padding:13px 8px 0;border-top:1px solid var(--hair);
  opacity:0;pointer-events:none;transition:opacity .18s ease .06s;
}
.rail:hover .bloc-reglage,.rail:focus-within .bloc-reglage{opacity:1;pointer-events:auto}
.rail .lab{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;opacity:0;transition:opacity .2s;
  display:block;margin-bottom:9px;
}
.rail:hover .lab,.rail:focus-within .lab{opacity:1}
.rail .rangee{display:flex;gap:5px;flex-wrap:nowrap}
.rail .rangee button{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 9px;border:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;white-space:nowrap;
}
.rail .rangee button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
[data-matiere="verre"] .rail .rangee button{border-radius:8px;border-color:var(--bordure);box-shadow:var(--gloss)}
.rail .pastille{width:20px;height:20px;padding:0;border:1px solid var(--line);cursor:pointer;flex-shrink:0}
.rail .pastille[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
[data-matiere="verre"] .rail .pastille{border-radius:7px;box-shadow:var(--gloss-fort), 0 1px 3px rgba(28,27,24,.18)}

/* ---------- COQUE ---------- */
.contenu{margin-left:68px;padding:26px 28px 44px}
.app{max-width:1440px;margin:0 auto;border:1px solid var(--line);background:var(--bg)}
[data-matiere="verre"] .app{
  border:1px solid var(--bordure);border-radius:var(--rayon);overflow:hidden;
  box-shadow:var(--ombre-2);background:transparent;
}
.topbar{
  display:flex;align-items:center;gap:22px;padding:0 20px;min-height:58px;
  background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;
}
[data-matiere="verre"] .topbar{
  background:var(--verre);border-bottom:1px solid var(--bordure);box-shadow:var(--gloss);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
}
.fil{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.topbar .droite{display:flex;align-items:center;gap:14px;margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.badge{border:1px solid var(--line);padding:4px 10px}
[data-matiere="verre"] .badge{border-radius:7px;border-color:var(--bordure);box-shadow:var(--gloss)}

/* ---------- BARRE DE COMMANDE ---------- */
.cmd{
  flex:1;max-width:520px;min-width:190px;height:36px;border:1px solid var(--line);
  background:var(--bg);display:flex;align-items:center;gap:10px;padding:0 12px;cursor:text;
}
.cmd:hover{border-color:var(--muted)}
[data-matiere="verre"] .cmd{
  border-radius:10px;border-color:var(--bordure);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 74%, transparent));
  box-shadow:inset 0 1px 3px rgba(28,27,24,.07);transition:box-shadow .18s, border-color .18s;
}
[data-matiere="verre"] .cmd:hover{box-shadow:inset 0 1px 3px rgba(28,27,24,.07), 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent)}
.cmd .loupe{width:14px;height:14px;flex-shrink:0;color:var(--muted)}
.cmd .txt-ph{flex:1;font-size:13.5px;color:var(--muted)}
.kb{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;border:1px solid var(--line);padding:3px 7px;color:var(--muted);white-space:nowrap}
[data-matiere="verre"] .kb{border-radius:7px;border-color:var(--bordure);box-shadow:var(--gloss)}

.voile{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:100;display:none}
.voile.ouvert{display:block}
[data-matiere="verre"] .voile{background:rgba(20,18,14,.34);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.palette{
  position:fixed;left:50%;top:14vh;transform:translateX(-50%);width:min(620px,92vw);z-index:101;
  background:var(--panel);border:1px solid var(--ink);display:none;
}
.palette.ouvert{display:block}
[data-matiere="verre"] .palette{
  border-radius:16px;border:1px solid var(--bordure);overflow:hidden;background:var(--verre);
  backdrop-filter:blur(34px) saturate(190%);-webkit-backdrop-filter:blur(34px) saturate(190%);
  box-shadow:var(--gloss-fort), var(--ombre-2);
}
.palette .saisie{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
[data-matiere="verre"] .palette .saisie{border-color:var(--bordure)}
.palette .saisie input{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-family:Archivo,sans-serif;font-size:17px}
.palette .saisie input::placeholder{color:var(--muted)}
.palette .liste{max-height:46vh;overflow-y:auto}
.palette .item{display:flex;align-items:center;gap:14px;padding:13px 18px;cursor:pointer;border-bottom:1px solid var(--hair)}
.palette .item:last-child{border-bottom:0}
.palette .item[aria-selected="true"]{background:var(--bg);border-left:2px solid var(--accent);padding-left:16px}
[data-matiere="verre"] .palette .item[aria-selected="true"]{
  border-left:0;padding-left:18px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent);
}
.palette .item .cat{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);width:82px;flex-shrink:0}
.palette .item .lib{flex:1;font-size:15px}
.palette .rien{padding:24px 18px;color:var(--muted);font-size:14.5px}

/* ---------- 4. COMPOSANTS ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
[data-matiere="verre"] .kpis{background:transparent;gap:0}
.kpi{background:var(--panel);padding:17px 20px}
[data-matiere="verre"] .kpi{
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, transparent), color-mix(in srgb, var(--panel) 66%, transparent));
  border-right:1px solid var(--bordure);box-shadow:var(--gloss);
}
[data-matiere="verre"] .kpi:last-child{border-right:0}
.kpi .titre,.bloc-titre,.sur-titre{
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.kpi .valeur{font-size:32px;font-weight:500;line-height:1;margin-top:10px}
.kpi .valeur .petit{font-size:12px;color:var(--muted);margin-left:8px}
.kpi .sous{margin-top:11px;font-size:13px;color:var(--muted)}
.kpi.ecart{border-top:2px solid var(--ink)}
.kpi.ecart .valeur{font-weight:600}
[data-matiere="verre"] .kpi.ecart{border-top:0;box-shadow:var(--gloss), inset 0 3px 0 -1px var(--ink)}

.corps2{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1px;background:var(--line)}
[data-matiere="verre"] .corps2{background:transparent;gap:0}
.principal{background:var(--panel);padding:30px 30px 38px;min-width:0}
.lateral{background:var(--panel);padding:30px 24px 38px;display:flex;flex-direction:column;gap:32px}
[data-matiere="verre"] .principal{
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 86%, transparent), color-mix(in srgb, var(--panel) 62%, transparent));
  border-right:1px solid var(--bordure);
}
[data-matiere="verre"] .lateral{background:color-mix(in srgb, var(--panel) 58%, transparent)}

/* =====================================================================
   L'EN-TETE DE TRAVAIL, partagee par Analyse et Historique.

   Ces regles vivaient dans le <style> d'analyse.html. Historique en a
   maintenant besoin a l'identique : les deux ecrans se pilotent avec
   les MEMES commandes (quelle strategie, quelle journee), et deux
   copies du meme CSS finissent toujours par diverger.

   James : « ca prend beaucoup de place, tu pourrais mettre un
   calendrier ». Les 22 boutons de journees mangeaient une bande
   entiere. Trois elements suffisent : fleche, liste, fleche.
   ===================================================================== */
.entete-a{
  display:flex;align-items:center;gap:16px;padding:12px 20px;
  background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;
}
[data-matiere="verre"] .entete-a{
  background:var(--verre);border-color:var(--bordure);box-shadow:var(--gloss);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
}
.entete-a .puce{width:9px;height:9px;background:var(--accent);display:block;flex-shrink:0}
[data-matiere="verre"] .entete-a .puce{border-radius:3px;box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)}
.entete-a .quoi{font-size:17px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entete-a .quoi em{font-style:normal;color:var(--muted);font-weight:400}
.entete-a .droite{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.nav-jour{display:flex;align-items:stretch}
.nav-jour button{
  font-family:"IBM Plex Mono",monospace;font-size:16px;line-height:1;padding:0 12px;
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;
}
.nav-jour button:hover:not(:disabled){color:var(--ink);border-color:var(--ink)}
.nav-jour button:disabled{opacity:.3;cursor:default}
.nav-jour select{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;padding:7px 9px;
  border:1px solid var(--line);border-left:0;border-right:0;background:var(--bg);
  color:var(--ink);cursor:pointer;min-width:158px;
}
[data-matiere="verre"] .nav-jour button{border-color:var(--bordure)}
[data-matiere="verre"] .nav-jour button:first-child{border-radius:8px 0 0 8px}
[data-matiere="verre"] .nav-jour button:last-child{border-radius:0 8px 8px 0}
[data-matiere="verre"] .nav-jour select{border-color:var(--bordure)}
.sel-strat{
  font-family:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);cursor:pointer;
}
[data-matiere="verre"] .sel-strat{border-radius:8px;border-color:var(--bordure)}

.bloc-titre{padding-bottom:10px;border-bottom:1px solid var(--ink);display:block}
.ligne{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair)}
.ligne:last-child{border-bottom:0}
.ligne .nom{font-size:16px}
.ligne .val{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}

.fil-signal{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.puce{width:8px;height:8px;display:block;background:var(--accent);flex:0 0 auto}
[data-matiere="verre"] .puce{border-radius:3px;box-shadow:0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)}
.fil-signal .etat{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.fil-signal .trait{flex:1;height:1px;background:var(--hair);min-width:16px}
.fil-signal .meta{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.fil-signal .frais{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;padding:3px 8px;border:1px solid var(--line)}
[data-matiere="verre"] .fil-signal .frais{border-radius:7px;border-color:var(--bordure);box-shadow:var(--gloss)}
h1.titre-signal{font-size:35px;font-weight:600;line-height:1.1;letter-spacing:-.02em;max-width:20ch;margin-bottom:8px;text-wrap:pretty}
p.sous-signal{font-size:17px;color:var(--muted);margin-bottom:28px}

.conditions{border:1px solid var(--line)}
[data-matiere="verre"] .conditions{
  border-radius:12px;border-color:var(--bordure);overflow:hidden;
  box-shadow:var(--gloss), var(--ombre-1);background:color-mix(in srgb, var(--panel) 60%, transparent);
}
.conditions .entete{display:flex;justify-content:space-between;gap:10px;padding:11px 18px;background:var(--bg);border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.conditions .entete b{color:var(--accent)}
.condition{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:0 16px;align-items:baseline;padding:14px 18px;border-bottom:1px solid var(--hair)}
.condition:last-of-type{border-bottom:0}
.condition .num{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--accent)}
.condition .quoi{font-size:16px}
.condition .mesure{font-family:"IBM Plex Mono",monospace;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);text-align:right}
.conditions .zone{padding:11px 18px;background:var(--bg);border-top:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
[data-matiere="verre"] .conditions .entete,[data-matiere="verre"] .conditions .zone{background:color-mix(in srgb, var(--bg) 62%, transparent);border-color:var(--bordure)}

.btn{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:13px 24px;cursor:pointer;background:var(--ink);
  color:var(--panel);border:1px solid var(--ink);text-decoration:none;display:inline-block;
}
.btn.creux{background:transparent;color:var(--muted);border-color:var(--line)}
[data-matiere="verre"] .btn{
  border-radius:10px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 92%, #fff), var(--ink));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--ombre-1);
  transition:transform .12s cubic-bezier(.22,1,.36,1), box-shadow .18s;
}
[data-matiere="verre"] .btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22), var(--ombre-2)}
[data-matiere="verre"] .btn:active{transform:translateY(0)}
[data-matiere="verre"] .btn.creux{
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 80%, transparent), color-mix(in srgb, var(--panel) 55%, transparent));
  border-color:var(--bordure);box-shadow:var(--gloss), var(--ombre-1);
}
.actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;align-items:center}

.jauge{display:flex;gap:2px;height:16px;margin:16px 0 8px}
.jauge .plein{background:var(--accent)}
.jauge .vide{background:var(--track)}
[data-matiere="verre"] .jauge,[data-matiere="verre"] .barre{border-radius:5px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(28,27,24,.13)}
.barre{display:flex;gap:2px;height:8px;margin-top:11px}
.barre .fait{background:var(--accent)}
.barre .reste{background:var(--track)}
.score{display:flex;align-items:baseline;gap:8px;padding-top:14px}
.score .n{font-family:"IBM Plex Mono",monospace;font-size:42px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.score .sur{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}

.jeton{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-variant-numeric:tabular-nums;border:1px solid var(--line);padding:6px 10px;background:var(--bg);cursor:pointer;display:inline-block}
.jeton.fige{background:transparent;color:var(--muted);cursor:default;border-style:dashed}
[data-matiere="verre"] .jeton{border-radius:8px;border-color:var(--bordure);box-shadow:var(--gloss)}

.carte{
  border:1px solid var(--line);background:var(--panel);padding:20px 22px;
}
[data-matiere="verre"] .carte{
  border-radius:12px;border-color:var(--bordure);box-shadow:var(--gloss), var(--ombre-1);
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel) 86%, transparent), color-mix(in srgb, var(--panel) 62%, transparent));
}

.pied-app{padding:14px 20px;background:var(--panel);border-top:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
[data-matiere="verre"] .pied-app{background:color-mix(in srgb, var(--panel) 52%, transparent);border-color:var(--bordure)}

/* ---------- 5. SITE PUBLIC ---------- */
.pub-nav{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:34px;
  padding:16px 36px;background:var(--verre);border-bottom:1px solid var(--bordure);flex-wrap:wrap;
}
[data-matiere="verre"] .pub-nav{backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:var(--gloss)}
.pub-nav .marque{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;text-decoration:none}
.pub-nav .liens{display:flex;gap:26px;font-size:15px;flex-wrap:wrap}
.pub-nav .liens a{color:var(--muted);text-decoration:none}
.pub-nav .liens a:hover,.pub-nav .liens a.actif{color:var(--ink)}
.pub-nav .droite{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.section{max-width:1180px;margin:0 auto;padding:0 36px}
.hero{padding:88px 36px 72px;max-width:1180px;margin:0 auto}
.hero .accroche{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin-bottom:22px;
}
.hero h1{font-size:clamp(38px,6.2vw,70px);line-height:1.03;letter-spacing:-.035em;font-weight:600;max-width:17ch;text-wrap:balance}
.hero p.chapo{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:60ch;margin-top:24px;line-height:1.5}
.hero .boutons{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap;align-items:center}
.hero .mention{font-size:13.5px;color:var(--muted)}

.grille-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bloc-section{padding:70px 0;border-top:1px solid var(--hair)}
.bloc-section h2{font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-.025em;margin-bottom:14px;text-wrap:balance}
.bloc-section p.intro{font-size:17px;color:var(--muted);max-width:62ch;margin-bottom:38px}
.carte h3{font-size:19px;font-weight:600;margin:14px 0 8px;letter-spacing:-.01em}
.carte p{font-size:14.5px;color:var(--muted);line-height:1.6}
.carte .no{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--accent)}

.tarifs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.tarif{padding:28px 26px 32px}
.tarif.mis{border-color:var(--ink)}
[data-matiere="verre"] .tarif.mis{box-shadow:var(--gloss), var(--ombre-2), 0 0 0 1px var(--ink)}
.tarif .nom{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tarif .prix{font-size:46px;font-weight:600;line-height:1;margin:16px 0 4px;letter-spacing:-.03em}
.tarif .prix small{font-size:15px;color:var(--muted);font-weight:400;letter-spacing:0}
.tarif .pour{font-size:14.5px;color:var(--muted);margin-bottom:22px}
.tarif ul{list-style:none;margin:0 0 26px}
.tarif li{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:14.5px}
.tarif li:last-child{border-bottom:0}
.tarif li i{font-style:normal;color:var(--accent);flex-shrink:0}
.tarif li.non{color:var(--muted)}
.tarif li.non i{color:var(--muted)}

.pied-site{border-top:1px solid var(--hair);padding:38px 36px 60px;max-width:1180px;margin:0 auto;
  display:flex;gap:26px;flex-wrap:wrap;align-items:baseline;font-size:13.5px;color:var(--muted)}
.pied-site .droite{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.pied-site a{text-decoration:none}
.pied-site a:hover{color:var(--ink)}

.avertissement{
  border-left:3px solid var(--accent);padding:14px 0 14px 16px;margin-top:8px;
  font-size:14px;color:var(--muted);line-height:1.55;
}
.avertissement b{color:var(--ink);font-weight:600}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .corps2{grid-template-columns:1fr}
  .grille-3,.tarifs{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .grille-2{grid-template-columns:1fr}
  .hero{padding:56px 20px 46px}
  .section,.pub-nav,.pied-site{padding-left:20px;padding-right:20px}
}
@media (max-width:620px){
  .rail{display:none}
  .contenu{margin-left:0;padding:14px}
  .kpis{grid-template-columns:1fr}
  h1.titre-signal{font-size:26px}
  .principal,.lateral{padding:22px 18px 28px}
}

/* ---------- ÉTIQUETTES POSÉES SUR LE GRAPHIQUE ----------
   Le rectangle de position d'une plateforme de trading : les valeurs
   sont écrites sur les niveaux eux-mêmes, pas reléguées dans un
   tableau à côté. Lightweight Charts ne sait pas annoter, ces
   étiquettes sont du HTML superposé au canvas. */
/* Masquées par défaut : quatre étiquettes en permanence sur le
   graphique couvrent les bougies. Elles se révèlent quand le curseur
   entre dans le rectangle de position, comme sur une plateforme. */
.annotations-graph .annot{
  position:absolute;transform:translateY(-50%);
  opacity:0;transition:opacity .14s ease;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.04em;white-space:nowrap;padding:3px 7px;border-radius:4px;
  color:#fff;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.annotations-graph .annot-entree{background:var(--ink);color:var(--panel)}
.annotations-graph .annot-risque{background:var(--trait-risque)}
.annotations-graph .annot-gain{background:var(--trait-gain)}
.annotations-graph .annot-accent{background:var(--accent);color:#fff}

.annotations-graph.ouvert .annot{opacity:1}