/* Polices hébergées localement (dossier fonts/) — aucun appel à un serveur tiers.
   Voir fonts/LICENCE.txt. Les polices système restent en repli : si les .woff2
   ne se chargent pas (ouverture en file://, réseau coupé), le site reste lisible. */

  @font-face{
    font-family:'Big Shoulders Display';
    src:url('fonts/big-shoulders-display-latin.woff2') format('woff2');
    font-weight:700 900; 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+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'IBM Plex Sans';
    src:url('fonts/ibm-plex-sans-latin.woff2') format('woff2');
    font-weight:400 600; 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+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'IBM Plex Mono';
    src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'IBM Plex Mono';
    src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
    font-weight:500; font-style:normal; font-display:swap;
  }

  :root{
    --bg:#12151A; --panel:#1A1F26; --panel-line:#2A313B;
    --amber:#FF7A29; --cyan:#3FE0C5; --text:#ECEEF0; --muted:#98A1B0;
    --font-display:'Big Shoulders Display','Arial Narrow','Roboto Condensed',Impact,'Helvetica Neue',sans-serif;
    --font-sans:'IBM Plex Sans','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --font-mono:'IBM Plex Mono','Consolas','SF Mono','Courier New',monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{ background:var(--bg); color:var(--text); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  body{
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 42px 42px; background-position: center top;
  }

  /* ================= INTRO ================= */
  /* L'intro n'est affichée que si JavaScript est actif (la classe `js` est posée
     par un script en tête de page). Sans JS — et pour tout robot d'indexation qui
     n'exécuterait pas le script — le site s'affiche directement, entièrement lisible.
     L'intro est une surcouche opaque : le contenu du site en dessous n'est jamais
     masqué en CSS, il est simplement recouvert. */
  #intro{ display:none; position:fixed; inset:0; z-index:9999; background:#070809; transition:opacity .8s ease, visibility .8s ease; }
  .js #intro{ display:block; }
  #intro.hide{ opacity:0; visibility:hidden; pointer-events:none; }

  .start-gate{
    position:absolute; inset:0; z-index:200; background:#070809;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; text-align:center; padding:30px;
  }
  .start-gate h2{ font-family:var(--font-display); font-weight:900; font-size:clamp(28px,5vw,46px); text-transform:uppercase; letter-spacing:1px; color:var(--text); line-height:1.05; }
  .start-gate h2 b{ color:var(--amber); }
  .start-gate p{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; }
  .start-gate .gate-btn{
    font-family:var(--font-mono); font-size:14px; letter-spacing:1px; text-transform:uppercase;
    background:var(--amber); color:#1A1206; border:none; border-radius:4px; padding:16px 34px; cursor:pointer; font-weight:600;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .start-gate .gate-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(255,122,41,0.6); }
  /* Le lien d'accès direct était un petit texte souligné, très en retrait du
     bouton orange. Pour un visiteur venu d'une recherche, l'écran devenait un
     mur. Les deux options sont désormais de même poids visuel. */
  .start-gate .gate-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
  .start-gate .gate-skip{
    font-family:var(--font-mono); font-size:14px; letter-spacing:1px; text-transform:uppercase;
    background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.28);
    border-radius:4px; padding:16px 28px; cursor:pointer; font-weight:500;
    transition:border-color .15s ease, color .15s ease, transform .15s ease;
  }
  .start-gate .gate-skip:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }
  .gate-ico{ width:54px; height:48px; }

  .drum{ position:absolute; top:0; left:0; width:100%; height:16px; z-index:30;
    background:linear-gradient(180deg,#3A4150,#1C2128 70%, #0E1115); box-shadow:0 2px 10px rgba(0,0,0,0.6); }
  .drum::after{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 26px); }

  .door-wrap{ position:absolute; top:16px; left:0; width:100%; height:calc(100% - 16px); overflow:hidden; z-index:20; }
  .door{ position:absolute; inset:0;
    background:repeating-linear-gradient(180deg, #343B46 0 4px, #2A313B 4px 8px), linear-gradient(180deg,#3B4250,#23282F 55%, #1A1E24);
    transition:transform 2s cubic-bezier(.6,0,.2,1); box-shadow:inset 0 -40px 60px -20px rgba(0,0,0,0.5); }
  .door.up{ transform:translateY(-101%); }
  .door::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:22px;
    background:repeating-linear-gradient(135deg, var(--amber) 0 18px, #1A1E24 18px 36px); }
  .door::after{ content:""; position:absolute; top:50%; left:50%; width:70px; height:54px; transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(63,224,197,0.10), transparent 70%); border:1px solid rgba(255,255,255,0.06); border-radius:6px; }

  /* ===== scène : pas de photo, fond technique + console plein écran ===== */
  .scene-wrap{ position:absolute; inset:0; z-index:10; }
  .scene{ position:relative; width:100%; height:100%; overflow:hidden; background:
      radial-gradient(ellipse 70% 55% at 50% 38%, rgba(63,224,197,0.05), transparent 70%), #0A0D11; }

  .floor-label{
    position:absolute; top:78px; left:28px; z-index:12;
    font-family:var(--font-mono); font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--muted); opacity:0; transition:opacity .6s ease;
  }
  .scene.reveal .floor-label{ opacity:1; }

  .scene-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:50; }
  .scene-flash.go{ animation:flashpop .5s ease-out; }
  @keyframes flashpop{ 0%{opacity:0;} 12%{opacity:.85;} 100%{opacity:0;} }

  /* console plein écran */
  .console{
    position:absolute; inset:9% 3% 4%; z-index:15;
    background:rgba(9,12,16,0.97);
    border:1px solid rgba(63,224,197,0.35); border-radius:10px; padding:18px 22px 14px;
    box-shadow:0 24px 60px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(63,224,197,0.08);
    opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease;
    display:grid; grid-template-columns:96px 220px 1fr 300px; grid-template-rows:auto 1fr; gap:12px;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size:18px 18px;
  }
  .scene.console-on .console{ opacity:1; transform:translateY(0); animation:powerOn .9s steps(1,end) 0s 1; }
  @keyframes powerOn{
    0%{ opacity:0; } 6%{ opacity:1; } 11%{ opacity:0.2; } 17%{ opacity:1; } 22%{ opacity:0.3; }
    30%{ opacity:1; } 38%{ opacity:0.5; } 46%{ opacity:1; } 100%{ opacity:1; }
  }
  .circuit-bg{
    position:absolute; inset:0; z-index:0; opacity:.07; pointer-events:none; border-radius:10px; overflow:hidden;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M10 10h25v25M75 10h-25v25M10 80h25v-25M75 80h-25v-25M45 0v20M45 90v-20' stroke='%233FE0C5' stroke-width='1' fill='none'/%3E%3Ccircle cx='10' cy='10' r='2.4' fill='%233FE0C5'/%3E%3Ccircle cx='75' cy='10' r='2.4' fill='%233FE0C5'/%3E%3Ccircle cx='10' cy='80' r='2.4' fill='%233FE0C5'/%3E%3Ccircle cx='75' cy='80' r='2.4' fill='%233FE0C5'/%3E%3Ccircle cx='45' cy='45' r='3' fill='%23FF7A29'/%3E%3C/svg%3E");
    background-size:90px 90px;
  }

  .hud-corner{ position:absolute; width:18px; height:18px; border-color:var(--cyan); pointer-events:none; z-index:2;
    animation:cornerPulse 2.4s ease-in-out infinite; }
  .hud-corner.tl{ top:6px; left:6px; border-top:2px solid; border-left:2px solid; }
  .hud-corner.tr{ top:6px; right:6px; border-top:2px solid; border-right:2px solid; animation-delay:.3s; }
  .hud-corner.bl{ bottom:6px; left:6px; border-bottom:2px solid; border-left:2px solid; animation-delay:.6s; }
  .hud-corner.br{ bottom:6px; right:6px; border-bottom:2px solid; border-right:2px solid; animation-delay:.9s; }
  @keyframes cornerPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

  .scanline{ position:absolute; left:0; right:0; height:60px; pointer-events:none; opacity:0; z-index:1;
    background:linear-gradient(180deg, transparent, rgba(63,224,197,0.08), transparent); }
  .scene.console-on .scanline{ opacity:1; animation:scan 4.4s linear infinite; }
  @keyframes scan{ 0%{ top:-60px; } 100%{ top:100%; } }

  /* ---- en-tête session (pleine largeur) ---- */
  .c-header{ grid-column:1/5; grid-row:1; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;
    border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:10px; }
  .veh-id{ display:flex; flex-direction:column; gap:2px; }
  .veh-id .l{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.6px; color:var(--muted); text-transform:uppercase; display:flex; align-items:center; gap:7px; }
  .veh-id .l .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 6px var(--cyan); animation:blink2 1.3s infinite; }
  .veh-id .name{ font-family:var(--font-display); font-weight:900; font-size:22px; letter-spacing:.4px; color:var(--amber); text-transform:uppercase; transition:opacity .2s ease;
    text-shadow:0 0 10px rgba(255,122,41,0.65), 0 0 22px rgba(255,122,41,0.3); }
  .session-meta{ display:flex; gap:18px; flex-wrap:wrap; }
  .session-meta .mini{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
  .session-meta .mini .l{ font-family:var(--font-mono); font-size:9.5px; color:var(--muted); letter-spacing:.6px; text-transform:uppercase; }
  .session-meta .mini .v{ font-family:var(--font-mono); font-size:12.5px; color:var(--text); }
  .telltale-row{ display:flex; gap:6px; flex-wrap:wrap; align-content:flex-start; max-width:300px; }
  .telltale{
    width:27px; height:27px; border-radius:6px; background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center;
    opacity:.35; filter:grayscale(1);
    transition:opacity .2s ease, filter .2s ease, box-shadow .2s ease; color:var(--muted);
  }
  .telltale svg{ width:14px; height:14px; }
  .telltale.amber{ color:var(--amber); } .telltale.red{ color:#FF4D4D; } .telltale.cyan{ color:var(--cyan); }
  .telltale.on{ opacity:1; filter:none; }
  .telltale.amber.on{ box-shadow:0 0 11px rgba(255,122,41,0.75); }
  .telltale.red.on{ box-shadow:0 0 11px rgba(255,77,77,0.75); }
  .telltale.cyan.on{ box-shadow:0 0 11px rgba(63,224,197,0.75); }

  .toolbar{ display:flex; gap:8px; flex-wrap:wrap; flex-basis:100%; margin-top:8px; }
  .tbtn{
    font-family:var(--font-mono); font-size:10.5px; letter-spacing:.4px; color:var(--text);
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.16); border-radius:5px;
    padding:7px 13px; cursor:pointer; transition:all .15s ease; text-transform:uppercase;
  }
  .tbtn:hover{ border-color:var(--cyan); background:rgba(63,224,197,0.09); color:var(--cyan); }
  .tbtn:active{ transform:scale(.95); }
  .tbtn.danger:hover{ border-color:var(--amber); background:rgba(255,122,41,0.09); color:var(--amber); }

  .gauge-detail-overlay{
    position:absolute; inset:0; background:rgba(5,7,9,0.8); z-index:80; display:none;
    align-items:center; justify-content:center; border-radius:10px;
  }
  .gauge-detail-overlay.show{ display:flex; }
  .gauge-detail-card{
    background:rgba(16,19,24,0.97); border:1px solid rgba(255,255,255,0.15); border-radius:10px;
    padding:24px 28px; width:min(320px,82%); text-align:center; box-shadow:0 24px 56px -12px rgba(0,0,0,0.75);
  }
  .gauge-detail-card h3{ font-family:var(--font-display); font-weight:900; font-size:19px; text-transform:uppercase; color:var(--amber); margin-bottom:5px; }
  .gauge-detail-card .desc{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-bottom:16px; line-height:1.5; }
  .gauge-detail-card .big{ font-family:var(--font-display); font-weight:900; font-size:38px; color:var(--cyan); margin-bottom:16px; text-shadow:0 0 14px rgba(63,224,197,0.7); }
  .gauge-detail-card .mmx{ display:flex; justify-content:space-around; margin-bottom:18px; }
  .gauge-detail-card .mmx div{ display:flex; flex-direction:column; }
  .gauge-detail-card .mmx .l{ font-family:var(--font-mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; }
  .gauge-detail-card .mmx .v{ font-family:var(--font-mono); font-size:14.5px; color:var(--text); margin-top:3px; }
  .gauge-detail-card .close{ font-family:var(--font-mono); font-size:10.5px; color:var(--muted); border:1px solid rgba(255,255,255,0.16); border-radius:20px; padding:7px 18px; cursor:pointer; transition:all .15s ease; }
  .gauge-detail-card .close:hover{ border-color:var(--cyan); color:var(--cyan); }

  .stat-pop{
    position:fixed; z-index:90; background:rgba(16,19,24,0.98); border:1px solid var(--cyan); border-radius:6px;
    padding:9px 12px; font-family:var(--font-mono); font-size:10.5px; color:var(--text); max-width:210px;
    line-height:1.5; box-shadow:0 12px 28px -8px rgba(0,0,0,0.65); display:none;
  }
  .stat-pop.show{ display:block; }

  /* ---- menu de fonctions (sidebar) ---- */
  /* Les cellules de la console sont de vrais <button> : atteignables au clavier
     et annoncées comme telles. D'où la réinitialisation d'apparence ci-dessous. */
  .mbtn, .gauge-cell, .stat, .spark-cell{ font-family:inherit; color:inherit; -webkit-appearance:none; appearance:none; width:100%; }

  .c-menu{ grid-column:1; grid-row:2; display:flex; flex-direction:column; gap:6px; overflow-y:auto; align-content:start; }
  .mbtn{
    display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 3px;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.09); border-radius:7px;
    cursor:pointer; transition:all .15s ease; color:var(--muted);
  }
  .mbtn svg{ width:18px; height:18px; }
  .mbtn span{ font-family:var(--font-mono); font-size:9px; letter-spacing:.2px; text-transform:uppercase; text-align:center; line-height:1.25; color:inherit; }
  .mbtn:hover{ border-color:var(--cyan); background:rgba(63,224,197,0.08); color:var(--cyan); transform:translateY(-2px); }
  .mbtn.active{ border-color:var(--amber); background:rgba(255,122,41,0.1); color:var(--amber); box-shadow:0 0 12px rgba(255,122,41,0.25); }

  /* ---- colonne cadrans ---- */
  .c-gauges{ grid-column:2; grid-row:2; overflow-y:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:9px; align-content:start; }
  .gauge-cell{
    position:relative; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.09); border-radius:8px;
    padding:8px 4px 6px; text-align:center; cursor:pointer;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .gauge-cell:hover{ transform:translateY(-3px) scale(1.05); border-color:var(--cyan); background:rgba(63,224,197,0.07);
    box-shadow:0 12px 26px -8px rgba(63,224,197,0.4); z-index:6; }
  .gauge-cell.active{ transform:translateY(-3px) scale(1.07); border-color:var(--amber); background:rgba(255,122,41,0.08);
    box-shadow:0 14px 30px -6px rgba(255,122,41,0.5); z-index:7; }
  .gauge-cell .glbl{ display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.7px; color:var(--muted); text-transform:uppercase; transition:color .18s ease; }
  .gauge-cell:hover .glbl, .gauge-cell.active .glbl{ color:var(--text); }
  .dial{ width:94%; display:block; margin:0 auto; }
  .dial-track{ fill:none; stroke:rgba(255,255,255,0.12); stroke-width:10; stroke-linecap:round; }
  .dial-value{ fill:none; stroke-width:10; stroke-linecap:round; transition:stroke-dasharray .08s linear; }
  .dial-tick{ stroke:rgba(255,255,255,0.22); stroke-width:2; }
  .dial-num{ font-family:var(--font-display); font-weight:900; font-size:19px; fill:var(--text); text-anchor:middle; transition:fill .18s ease; }
  .gauge-cell:hover .dial-num{ fill:var(--cyan); filter:drop-shadow(0 0 7px rgba(63,224,197,0.8)); }
  .gauge-cell.active .dial-num{ fill:var(--amber); filter:drop-shadow(0 0 7px rgba(255,122,41,0.8)); }
  .dial-unit{ font-family:var(--font-mono); font-size:8.5px; fill:var(--muted); text-anchor:middle; letter-spacing:.2px; }

  /* ---- colonne centrale : courbe + sparklines ---- */
  .c-center{ grid-column:3; grid-row:2; display:flex; flex-direction:column; gap:10px; overflow-y:auto; min-width:0; }
  /* Les panneaux ne sont pas interactifs : ni curseur, ni effet de survol, qui
     laisseraient croire à tort qu'on peut cliquer. Ils restent mis en valeur par
     `pulse-focus` lorsque le menu de la console les cible. */
  .panel{ background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.09); border-left:3px solid var(--cyan);
    border-radius:7px; padding:11px 13px; }
  .panel.acc-amber{ border-left-color:var(--amber); }
  .panel.pulse-focus{ animation:pulseFocus 1s ease-out; }
  @keyframes pulseFocus{
    0%{ box-shadow:0 0 0 0 rgba(255,122,41,0.55); }
    100%{ box-shadow:0 0 0 14px rgba(255,122,41,0); }
  }
  .panel .ph{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.2px; color:var(--text); text-transform:uppercase; margin-bottom:7px; font-weight:500; }
  .chart{ width:100%; height:auto; display:block; cursor:pointer; }
  .axis-lbl{ font-family:var(--font-mono); font-size:7.5px; fill:var(--muted); }
  .peak-lbl{ font-family:var(--font-mono); font-size:9px; font-weight:500; opacity:0; transition:opacity .5s ease; filter:drop-shadow(0 0 4px currentColor); }
  .peak-lbl.show{ opacity:1; }
  .legend{ display:flex; gap:16px; font-family:var(--font-mono); font-size:10px; color:var(--text); margin-top:7px; }
  .legend span{ display:inline-flex; align-items:center; gap:5px; cursor:default; }
  .legend i{ width:10px; height:10px; border-radius:2px; display:inline-block; }
  .legend .p i{ background:var(--amber); } .legend .c i{ background:var(--cyan); }

  .spark-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
  .spark-cell{ background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.09); border-radius:6px; padding:7px 9px;
    cursor:pointer; transition:border-color .18s ease, background .18s ease, transform .18s ease; }
  .spark-cell:hover{ border-color:var(--amber); background:rgba(255,122,41,0.06); transform:translateY(-2px); }
  .spark-cell.active{ border-color:var(--cyan); background:rgba(63,224,197,0.08); transform:translateY(-2px) scale(1.03); }
  .spark-cell{ text-align:left; }
  .spark-cell .l{ display:block; font-family:var(--font-mono); font-size:9.5px; color:var(--text); letter-spacing:.5px; text-transform:uppercase; font-weight:500; }
  .spark-cell .v{ display:block; font-family:var(--font-mono); font-size:12px; color:var(--text); margin:2px 0 4px; }
  .spark-cell svg{ width:100%; height:28px; display:block; }

  .dtc{ font-family:var(--font-mono); font-size:12px; color:var(--cyan); }
  .dtc .ok{ color:var(--cyan); } .dtc .bad{ color:var(--amber); }

  /* ---- colonne droite : capteurs + terminal ---- */
  .c-side{ grid-column:4; grid-row:2; overflow-y:auto; display:flex; flex-direction:column; gap:10px; min-width:0; }
  .stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
  .stat{ background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.08); border-radius:5px; padding:6px 8px;
    cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .15s ease; }
  .stat:hover{ border-color:var(--cyan); background:rgba(63,224,197,0.07); transform:translateY(-1px); }
  .stat.active{ border-color:var(--amber); background:rgba(255,122,41,0.09); }
  .stat{ text-align:left; }
  .stat .l{ display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2px; color:var(--muted); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .stat .v{ display:block; font-family:var(--font-mono); font-size:13px; color:var(--text); margin-top:2px; font-weight:500; }
  .stat.warn .v{ color:var(--amber); }

  .console-term{ font-family:var(--font-mono); font-size:10.5px; color:var(--cyan); }
  .console-term .ln{ margin-bottom:4px; opacity:.95; }
  .console-term .ln.warn{ color:var(--amber); }

  .intro-ui{ position:absolute; top:26px; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
  .intro-status{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:1.5px; color:var(--muted); text-transform:uppercase; display:flex; align-items:center; gap:9px; }
  .intro-status .led{ width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 7px var(--amber); animation:blink 1.1s infinite; }
  @keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
  .skip{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:1px; color:var(--muted); background:transparent; border:1px solid rgba(255,255,255,0.18);
    border-radius:30px; padding:8px 16px; cursor:pointer; text-transform:uppercase; transition:border-color .2s ease, color .2s ease; }
  .skip:hover{ border-color:var(--cyan); color:var(--cyan); }

  @media (max-width:1200px){
    .console{ grid-template-columns:88px 190px 1fr 260px; }
  }
  @media (max-width:980px){
    .console{ inset:8% 2% 3%; grid-template-columns:1fr; grid-template-rows:auto auto auto auto auto; padding:14px 14px 10px; }
    .c-menu{ grid-column:1; grid-row:2; flex-direction:row; flex-wrap:wrap; overflow-y:visible; }
    .mbtn{ flex:1 1 64px; }
    .c-gauges{ grid-column:1; grid-row:3; grid-template-columns:repeat(4,1fr); }
    .c-center{ grid-column:1; grid-row:4; }
    .c-side{ grid-column:1; grid-row:5; max-height:38vh; }
    .spark-grid{ grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width:640px){
    .intro-ui{ padding:0 18px; top:22px; }
    .floor-label{ top:70px; left:18px; font-size:9.5px; }
    .c-gauges{ grid-template-columns:repeat(3,1fr); }
    .stat-grid{ grid-template-columns:repeat(2,1fr); }
    .session-meta{ display:none; }
    .veh-id .name{ font-size:17px; }
  }

  /* ================= MAIN SITE ================= */
  #site[inert]{ pointer-events:none; }
  .vignette{ position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(18,21,26,0) 0%, var(--bg) 78%); }
  .wrap{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 28px; }

  /* ---- lien d'évitement (accessibilité clavier) ---- */
  .skip-link{
    position:absolute; left:-9999px; top:0; z-index:200;
    background:var(--amber); color:#1A1206; font-family:var(--font-mono); font-size:13px;
    padding:12px 18px; border-radius:0 0 4px 0; text-decoration:none; font-weight:600;
  }
  .skip-link:focus{ left:0; }

  header{ padding:30px 0 0; }
  .headbar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
    border-bottom:1px solid var(--panel-line); padding-bottom:22px; flex-wrap:wrap; }
  .brand{ display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit; }
  .brand svg{ width:34px; height:30px; flex-shrink:0; }

  /* ---- navigation principale ---- */
  .site-nav{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .site-nav a{
    font-family:var(--font-mono); font-size:12.5px; letter-spacing:1px; text-transform:uppercase;
    color:var(--muted); text-decoration:none; padding:9px 13px; border-radius:4px;
    border:1px solid transparent; transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .site-nav a:hover{ color:var(--text); background:rgba(255,255,255,0.05); }
  .site-nav a[aria-current="page"]{ color:var(--cyan); border-color:rgba(63,224,197,0.4); background:rgba(63,224,197,0.07); }
  .site-nav a.nav-cta{ color:#1A1206; background:var(--amber); border-color:var(--amber); font-weight:600; }
  .site-nav a.nav-cta:hover{ background:#FF8C45; color:#1A1206; }
  .nav-toggle{ display:none; background:rgba(255,255,255,0.04); border:1px solid var(--panel-line); border-radius:5px;
    width:42px; height:38px; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
  .nav-toggle span{ display:block; width:19px; height:2px; background:var(--text); transition:transform .2s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .brand-text{ display:flex; flex-direction:column; line-height:1; }
  .brand-text .name{ font-family:var(--font-display); font-weight:900; font-size:21px; letter-spacing:0.5px; text-transform:uppercase; color:var(--text); }
  .brand-text .loc{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.5px; color:var(--muted); margin-top:3px; text-transform:uppercase; }
  .status{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:1px; color:var(--muted); text-transform:uppercase; }
  .led{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation: blink2 2.4s infinite ease-in-out; }
  @keyframes blink2{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }

  .hero{ display:grid; grid-template-columns:1.15fr 1fr; gap:54px; align-items:center; padding:64px 0 56px; }
  .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:2.5px; color:var(--amber); text-transform:uppercase; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
  .eyebrow::before{ content:""; width:18px; height:1px; background:var(--amber); display:inline-block; }
  h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(38px, 5.4vw, 64px); line-height:1.02; letter-spacing:0.5px; text-transform:uppercase; color:var(--text); }
  h1 .accent{ color:var(--amber); }
  .sub{ margin-top:22px; font-size:16px; line-height:1.65; color:var(--muted); max-width:480px; }
  .cta-row{ display:flex; align-items:center; gap:18px; margin-top:32px; flex-wrap:wrap; }
  .cta{ display:inline-flex; align-items:center; gap:10px; background:var(--amber); color:#1A1206; font-weight:600; font-size:14.5px; padding:14px 22px; border-radius:3px; text-decoration:none; font-family:var(--font-mono); letter-spacing:0.3px; transition:transform .15s ease, box-shadow .15s ease; }
  .cta:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -6px rgba(255,122,41,0.55); }
  .cta-note{ font-size:12.5px; color:var(--muted); }

  .scope{ position:relative; aspect-ratio:1/1; max-width:340px; margin:0 auto; }
  .scope-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--panel-line); }
  .scope-ring.r2{ inset:34px; }
  .scope-sweep{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(63,224,197,0.22), transparent 28%); animation:spin 5s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .scope-cross{ position:absolute; inset:0; }
  .scope-cross::before, .scope-cross::after{ content:""; position:absolute; background:var(--panel-line); }
  .scope-cross::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
  .scope-cross::after{ top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
  .scope-plug{ position:absolute; top:50%; left:50%; width:64px; height:64px; transform:translate(-50%,-50%); }
  .scope-plug svg{ width:100%; height:100%; }

  .term{ margin-top:22px; background:var(--panel); border:1px solid var(--panel-line); border-radius:4px; padding:16px 18px; max-width:340px; margin-left:auto; margin-right:auto; font-family:var(--font-mono); font-size:12px; color:var(--cyan); min-height:108px; }
  .term .ln{ opacity:0.92; margin-bottom:5px; white-space:pre; }
  .term .ln .warn{ color:var(--amber); }
  .cursor{ display:inline-block; width:7px; height:13px; background:var(--cyan); vertical-align:-2px; animation:blink2 1s infinite step-end; }

  .pins{ display:flex; justify-content:center; gap:16px; padding:8px 0 50px; border-top:1px solid var(--panel-line); margin-top:6px; }
  .pins span{ width:6px; height:6px; border-radius:50%; background:var(--panel-line); margin-top:-3.5px; }
  .pins span:nth-child(4), .pins span:nth-child(9){ background:var(--amber); }

  .sect-head{ text-align:center; padding-bottom:46px; }
  .sect-head .eyebrow{ justify-content:center; }
  .sect-head .eyebrow::before{ display:none; }
  .sect-head h2{ font-family:var(--font-display); font-weight:900; font-size:clamp(26px,3.2vw,38px); text-transform:uppercase; line-height:1.15; max-width:680px; margin:0 auto; letter-spacing:0.3px; }

  .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding-bottom:64px; }
  .card{ display:block; text-decoration:none; color:inherit;
    background:var(--panel); border:1px solid var(--panel-line); border-radius:6px; padding:26px 22px 24px; position:relative; overflow:hidden; transition:border-color .2s ease, transform .2s ease; }
  .card:hover{ border-color:var(--cyan); transform:translateY(-3px); }
  .card:hover h3{ color:var(--cyan); }
  .card h3{ transition:color .2s ease; }
  .card .icon{ width:38px; height:38px; color:var(--cyan); margin-bottom:18px; }
  .card .tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:1.3px; color:var(--amber); text-transform:uppercase; margin-bottom:10px; }
  .card h3{ font-family:var(--font-sans); font-weight:600; font-size:17px; margin-bottom:10px; line-height:1.3; }
  .card p{ font-size:13.5px; line-height:1.6; color:var(--muted); }

  footer{ border-top:1px solid var(--panel-line); padding:34px 0 40px; }
  .foot-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }
  .badges{ display:flex; gap:10px; flex-wrap:wrap; }
  .badge{ font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); border:1px solid var(--panel-line); border-radius:30px; padding:7px 14px; }
  .foot-contact{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:14px; }
  .foot-contact a{ color:var(--text); text-decoration:none; border-bottom:1px solid var(--panel-line); }
  .foot-contact a:hover{ border-color:var(--cyan); color:var(--cyan); }
  .foot-line{ margin-top:22px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--panel-line); padding-top:20px; }

  @media (max-width:880px){
    .hero{ grid-template-columns:1fr; gap:46px; padding:46px 0; }
    .grid{ grid-template-columns:repeat(2,1fr); }
    .foot-row{ flex-direction:column; align-items:flex-start; }
  }
  @media (max-width:520px){
    .grid{ grid-template-columns:1fr; }
    .sub{ max-width:100%; }
  }

  /* ================= NOUVEAUX COMPOSANTS ================= */

  /* ---- mise en avant d'un contenu à compléter par le client ---- */
  .todo{
    display:inline-block; font-family:var(--font-mono); font-size:.92em; color:#FFC58A;
    background:rgba(255,122,41,0.1); border:1px dashed var(--amber); border-radius:3px; padding:1px 7px;
  }

  /* ---- bandeau de réassurance ---- */
  .trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0 0 56px; }
  .trust-item{ display:flex; gap:12px; align-items:flex-start; }
  .trust-item svg{ width:22px; height:22px; color:var(--cyan); flex-shrink:0; margin-top:2px; }
  .trust-item .t{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--text); margin-bottom:5px; }
  .trust-item .d{ font-size:13px; line-height:1.55; color:var(--muted); }

  /* ---- étapes « comment ça marche » ---- */
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-bottom:64px; counter-reset:step; }
  .step{ position:relative; background:var(--panel); border:1px solid var(--panel-line); border-radius:6px; padding:28px 24px 24px; }
  .step::before{
    counter-increment:step; content:counter(step,decimal-leading-zero);
    font-family:var(--font-display); font-weight:900; font-size:44px; line-height:1;
    color:transparent; -webkit-text-stroke:1px var(--amber); display:block; margin-bottom:14px; opacity:.85;
  }
  .step h3{ font-family:var(--font-sans); font-weight:600; font-size:16.5px; margin-bottom:9px; }
  .step p{ font-size:13.5px; line-height:1.6; color:var(--muted); }

  /* ---- section générique ---- */
  .sect{ padding-bottom:64px; }
  .sect-head.left{ text-align:left; padding-bottom:34px; }
  .sect-head.left .eyebrow{ justify-content:flex-start; }
  .sect-head.left .eyebrow::before{ display:block; }
  .sect-head.left h2{ margin:0; }
  .sect-lead{ font-size:15px; line-height:1.7; color:var(--muted); max-width:640px; margin:16px auto 0; }
  .sect-head.left .sect-lead{ margin-left:0; }

  /* ---- FAQ (details/summary natifs, accessibles au clavier) ---- */
  .faq{ max-width:820px; margin:0 auto; padding-bottom:64px; }
  .faq details{ border:1px solid var(--panel-line); border-radius:6px; background:var(--panel); margin-bottom:10px; }
  .faq summary{
    cursor:pointer; list-style:none; padding:17px 46px 17px 20px; position:relative;
    font-family:var(--font-sans); font-weight:500; font-size:15px; color:var(--text);
  }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{
    content:""; position:absolute; right:20px; top:50%; width:9px; height:9px; margin-top:-6px;
    border-right:2px solid var(--cyan); border-bottom:2px solid var(--cyan);
    transform:rotate(45deg); transition:transform .2s ease;
  }
  .faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
  .faq summary:hover{ color:var(--cyan); }
  .faq .a{ padding:0 20px 18px; font-size:14px; line-height:1.7; color:var(--muted); }
  .faq .a a{ color:var(--cyan); }

  /* ---- catalogue : fiches produit détaillées ---- */
  .prod{
    display:grid; grid-template-columns:230px 1fr; gap:34px; align-items:start;
    background:var(--panel); border:1px solid var(--panel-line); border-radius:8px;
    padding:32px 34px; margin-bottom:22px; scroll-margin-top:24px;
  }
  .prod-visual{ display:flex; flex-direction:column; align-items:center; gap:16px; }
  .prod-visual .icon{ width:76px; height:76px; color:var(--cyan); }
  /* Photo de produit : dès qu'un fichier existe dans photos/, le générateur
     insère l'image et le pictogramme s'efface au profit de celle-ci. */
  .prod-photo{ width:100%; max-width:230px; height:auto; border-radius:6px;
    border:1px solid var(--panel-line); display:block; }
  .prod-visual:has(.prod-photo) .icon{ display:none; }
  .prod-visual .tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:1.3px; color:var(--amber);
    text-transform:uppercase; border:1px solid rgba(255,122,41,0.35); border-radius:20px; padding:6px 13px; text-align:center; }
  .prod h2{ font-family:var(--font-display); font-weight:900; font-size:29px; text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; }
  .prod .intro{ font-size:14.5px; line-height:1.7; color:var(--muted); margin-bottom:22px; }
  .prod h4{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--cyan); margin:0 0 11px; }
  .prod-cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
  .prod ul{ list-style:none; }
  .prod ul li{ position:relative; padding-left:19px; font-size:13.5px; line-height:1.6; color:var(--muted); margin-bottom:8px; }
  .prod ul li::before{ content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:1px;
    background:var(--amber); opacity:.75; }
  .prod .who{ margin-top:22px; border-top:1px solid var(--panel-line); padding-top:18px;
    font-size:13.5px; line-height:1.65; color:var(--muted); }
  .prod .who b{ color:var(--text); font-weight:600; }

  /* ---- formulaire de contact ---- */
  .contact-grid{ display:grid; grid-template-columns:1fr 340px; gap:44px; align-items:start; padding-bottom:64px; }

  /* Le formulaire n'est affiché que si JavaScript peut l'intercepter (voir le
     script en tête de contact.html) : sans lui, l'envoi partirait en GET et
     placerait nom, e-mail et téléphone dans l'URL de la page. */
  #contactForm{ display:none; }
  .js #contactForm{ display:block; }
  .sans-js{ display:block; }
  .js .sans-js{ display:none; }

  .form-field{ margin-bottom:18px; }
  .form-field label{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:1.3px;
    text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
  .form-field label .req{ color:var(--amber); }
  .form-field input, .form-field select, .form-field textarea{
    width:100%; background:var(--panel); border:1px solid var(--panel-line); border-radius:4px;
    padding:12px 14px; color:var(--text); font-family:var(--font-sans); font-size:14.5px;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .form-field textarea{ min-height:140px; resize:vertical; line-height:1.6; }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{
    outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(63,224,197,0.14);
  }
  .form-note{ font-size:12.5px; line-height:1.6; color:var(--muted); margin-top:14px; }
  .btn{
    display:inline-flex; align-items:center; gap:10px; background:var(--amber); color:#1A1206;
    font-family:var(--font-mono); font-weight:600; font-size:14px; letter-spacing:.3px;
    padding:14px 24px; border:none; border-radius:3px; cursor:pointer; text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -6px rgba(255,122,41,0.55); }
  .btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--panel-line); }
  .btn.ghost:hover{ border-color:var(--cyan); color:var(--cyan); box-shadow:none; }

  .info-card{ background:var(--panel); border:1px solid var(--panel-line); border-left:3px solid var(--cyan);
    border-radius:6px; padding:24px 24px 22px; margin-bottom:16px; }
  .info-card h3{ font-family:var(--font-mono); font-size:11px; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--cyan); margin-bottom:14px; }
  .info-card p{ font-size:14px; line-height:1.7; color:var(--muted); margin-bottom:10px; }
  .info-card p:last-child{ margin-bottom:0; }
  .info-card a{ color:var(--text); text-decoration:none; border-bottom:1px solid var(--panel-line); }
  .info-card a:hover{ color:var(--cyan); border-color:var(--cyan); }
  .info-card ul{ list-style:none; }
  .info-card ul li{ position:relative; padding-left:17px; font-size:13.5px; line-height:1.6; color:var(--muted); margin-bottom:7px; }
  .info-card ul li::before{ content:"›"; position:absolute; left:0; color:var(--amber); font-weight:700; }

  /* ---- pages de texte (mentions légales) ---- */
  .legal{ max-width:820px; padding-bottom:64px; }
  .legal h2{ font-family:var(--font-display); font-weight:900; font-size:24px; text-transform:uppercase;
    letter-spacing:.4px; margin:40px 0 14px; padding-top:22px; border-top:1px solid var(--panel-line); }
  .legal h2:first-of-type{ border-top:none; padding-top:0; margin-top:22px; }
  .legal h3{ font-family:var(--font-sans); font-weight:600; font-size:16px; margin:22px 0 9px; }
  .legal p, .legal li{ font-size:14.5px; line-height:1.75; color:var(--muted); }
  .legal p{ margin-bottom:13px; }
  .legal ul{ margin:0 0 15px 20px; }
  .legal li{ margin-bottom:7px; }
  .legal a{ color:var(--cyan); }
  .legal dl{ margin-bottom:16px; }
  .legal dt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase;
    color:var(--muted); margin-top:13px; }
  .legal dd{ font-size:14.5px; line-height:1.7; color:var(--text); margin-top:3px; }

  .page-head{ padding:52px 0 40px; border-bottom:1px solid var(--panel-line); margin-bottom:46px; }
  .page-head h1{ font-size:clamp(32px,4.6vw,52px); }
  .page-head .sub{ max-width:620px; }

  /* ---- pied de page enrichi ---- */
  .foot-nav{ display:flex; gap:22px; flex-wrap:wrap; margin-top:22px; }
  .foot-nav a{ font-family:var(--font-mono); font-size:12px; letter-spacing:1px; text-transform:uppercase;
    color:var(--muted); text-decoration:none; }
  .foot-nav a:hover{ color:var(--cyan); }
  /* Réservé à l'affichage local — voir site.js. */
  .foot-nav a.lien-admin{ color:var(--amber); border:1px solid rgba(255,122,41,0.35);
    border-radius:20px; padding:5px 13px; margin-top:-6px; }
  .foot-nav a.lien-admin:hover{ background:rgba(255,122,41,0.1); color:var(--amber); }
  .foot-nav a.lien-admin[hidden]{ display:none; }

  /* ---- focus visible cohérent partout ---- */
  a:focus-visible, button:focus-visible, summary:focus-visible,
  input:focus-visible, select:focus-visible, textarea:focus-visible,
  .gauge-cell:focus-visible, .stat:focus-visible, .spark-cell:focus-visible{
    outline:2px solid var(--cyan); outline-offset:3px; border-radius:3px;
  }

  @media (max-width:980px){
    .trust{ grid-template-columns:repeat(2,1fr); gap:22px; }
    .contact-grid{ grid-template-columns:1fr; gap:34px; }
  }
  @media (max-width:880px){
    .nav-toggle{ display:flex; }
    .site-nav{
      display:none; flex-basis:100%; flex-direction:column; align-items:stretch; gap:2px;
      order:3; padding-top:14px; margin-top:14px; border-top:1px solid var(--panel-line);
    }
    .site-nav.open{ display:flex; }
    .site-nav a{ padding:13px 14px; font-size:13.5px; }
    .site-nav a.nav-cta{ text-align:center; margin-top:8px; }
    .headbar .status{ display:none; }
    .steps{ grid-template-columns:1fr; }
    .prod{ grid-template-columns:1fr; gap:24px; padding:26px 22px; }
    .prod-visual{ flex-direction:row; align-items:center; justify-content:flex-start; }
    .prod-visual .icon{ width:52px; height:52px; }
  }
  @media (max-width:600px){
    .trust{ grid-template-columns:1fr; }
    .prod-cols{ grid-template-columns:1fr; gap:20px; }
    .wrap{ padding:0 20px; }
  }

  @media (prefers-reduced-motion: reduce){
    .led, .cursor, .scope-sweep, .scanline, .console, .hud-corner{ animation:none; }
    *, *::before, *::after{ transition-duration:.01ms !important; }
  }