/* ══════════════════════════════════════════════════════════════
   GatiMotor — flat design, monochrome + un seul accent bleu.
   Aucun dégradé, aucune ombre, aucun chrome décoratif.
   Thèmes clair et sombre traités à parité, pilotés par tokens.
   ══════════════════════════════════════════════════════════════ */

/* Palette claire complète — état de base */
:root{
  --bg:        #FFFFFF;
  --surface:   #F4F4F6;
  --surface-2: #E8E9EC;
  --line:      #DCDDE1;
  --text:      #171A20;
  --text-2:    #5C5E62;
  --text-3:    #6E7075;
  --accent:    #3E6AE1;
  --on-accent: #FFFFFF;
  --danger:    #D1232A;

  --r-card: 12px;
  --r-pill: 999px;
  --dur: 180ms;
  --ease: cubic-bezier(.2,.7,.3,1);

  --f: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Sombre par préférence système, sauf choix explicite du clair */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:        #000000;
    --surface:   #17181C;
    --surface-2: #232529;
    --line:      #2E3035;
    --text:      #FFFFFF;
    --text-2:    #A2A4A8;
    --text-3:    #86888D;
    --accent:    #5C87F5;
    --on-accent: #0A0A0B;
    --danger:    #FF5A5F;
  }
}
/* Choix explicite du sombre — doit gagner dans l'autre sens aussi */
:root[data-theme="dark"]{
  --bg:        #000000;
  --surface:   #17181C;
  --surface-2: #232529;
  --line:      #2E3035;
  --text:      #FFFFFF;
  --text-2:    #A2A4A8;
  --text-3:    #86888D;
  --accent:    #5C87F5;
  --on-accent: #0A0A0B;
  --danger:    #FF5A5F;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
button,input{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ── Contact ─────────────────────────────────────────────────── */
.ignition{
  position:fixed; inset:0; z-index:50;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background:var(--bg);
  transition:opacity var(--dur) var(--ease), visibility var(--dur);
}
.ignition.off{ opacity:0; visibility:hidden; pointer-events:none; }
/* Barre collante : le choix de la langue reste atteignable, y compris
   en défilant dans le contenu. */
.ign-top{
  position:sticky; top:0; z-index:2;
  display:flex; justify-content:flex-end;
  padding:12px 16px; background:var(--bg);
}
/* L'accroche occupe le premier écran ; le contenu suit au défilement. */
.ign-inner{
  min-height:calc(100dvh - 68px); max-width:30rem; margin:0 auto;
  padding:32px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
}
/* Chevron discret : signale qu'il y a quelque chose plus bas. */
.ign-more{
  width:11px; height:11px; margin-top:4px;
  border-right:1.5px solid var(--text-3); border-bottom:1.5px solid var(--text-3);
  transform:rotate(45deg);
  animation:nudge 2.4s ease-in-out infinite;
}
@keyframes nudge{ 0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.5 } 50%{ transform:rotate(45deg) translate(3px,3px); opacity:1 } }

/* ── Contenu indexable ── */
.intro{
  max-width:38rem; margin:0 auto;
  padding:0 24px calc(80px + env(safe-area-inset-bottom));
  text-align:left;
}
.intro h2{
  margin:44px 0 12px; font-size:1.45rem; font-weight:300;
  letter-spacing:-.02em; text-wrap:balance;
}
.intro p{ margin:0 0 14px; color:var(--text-2); text-wrap:pretty; max-width:62ch; }
.steps{ margin:0; padding-left:1.15rem; display:flex; flex-direction:column; gap:10px; }
.steps li{ color:var(--text-2); text-wrap:pretty; }
.steps li::marker{ color:var(--accent); font-weight:600; }
.faq{ display:flex; flex-direction:column; gap:4px; }
.faq h3{
  margin:20px 0 6px; font-size:1rem; font-weight:500; color:var(--text);
  text-wrap:balance;
}
.intro-safety{
  margin-top:40px; padding:14px 16px;
  background:var(--surface); border-radius:var(--r-card);
  font-size:.86rem; color:var(--text-2);
}
.ign-eyebrow{
  margin:0; font-size:.75rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3);
}
.ign-title{
  margin:0; font-size:clamp(3rem,13vw,4.5rem); font-weight:200;
  letter-spacing:-.045em; line-height:1;
}
.ign-title span{ font-weight:500; }
.ign-lede{
  margin:0; max-width:26rem; color:var(--text-2); font-size:1rem; text-wrap:pretty;
}
.ign-btn{
  margin-top:8px; min-height:52px; padding:0 44px;
  border-radius:var(--r-pill);
  background:var(--accent); color:var(--on-accent);
  font-size:.95rem; font-weight:500; letter-spacing:.02em;
  transition:opacity var(--dur) var(--ease);
}
.ign-btn:hover{ opacity:.86; }
.ign-btn:active{ opacity:.72; }
.ign-btn:disabled{ opacity:.5; cursor:default; }
.ign-note{ margin:0; font-size:.82rem; color:var(--text-3); max-width:24rem; text-wrap:pretty; }

/* ── Structure ───────────────────────────────────────────────── */
.cluster{
  max-width:44rem; margin:0 auto;
  padding:max(16px,env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:24px;
}
.cluster[hidden]{ display:none; }

.topbar{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; }
.brand{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.brand-mark{ font-size:1.15rem; font-weight:200; letter-spacing:-.03em; line-height:1.1; }
.brand-mark b{ font-weight:500; }
.brand-sub{
  font-size:.78rem; color:var(--text-2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.kill{
  min-height:44px; padding:0 18px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--text);
  font-size:.85rem; font-weight:500;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.kill:hover{ background:var(--surface-2); color:var(--danger); }

.topbar-actions{ display:flex; align-items:center; gap:8px; }
.lang{
  -webkit-appearance:none; appearance:none;
  min-height:44px; padding:0 30px 0 14px; border:0; border-radius:var(--r-pill);
  background-color:var(--surface); color:var(--text-2);
  font-size:.85rem; font-weight:500; cursor:pointer;
  /* chevron dessiné en fond : aucune dépendance à une icône externe */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23A2A4A8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:12px;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang:hover{ background-color:var(--surface-2); color:var(--text); }
.lang option{ background:var(--bg); color:var(--text); }
.page-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
.telltales{ grid-column:1 / -1; display:flex; gap:8px; }
.tt{
  font-size:.68rem; font-weight:500; letter-spacing:.08em;
  padding:6px 10px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--text-3);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tt.on{ background:var(--accent); color:var(--on-accent); }
.tt.warn{ background:var(--surface-2); color:var(--text-2); }
.tt.hot{ background:var(--danger); color:#FFFFFF; }

/* ── Cadran : anneau filaire, sans aiguille ni lunette ───────── */
/* Marge négative : le bas du carré SVG est vide sous l'ouverture
   de l'anneau, on récupère cet espace sans décentrer le bloc. */
.dial-stage{ position:relative; width:min(100%,22rem); margin:4px auto -52px; }
.dial{ display:block; width:100%; height:auto; overflow:visible; }

.arc-track{ fill:none; stroke:var(--line);   stroke-width:4; }
.arc-red{   fill:none; stroke:var(--danger); stroke-width:4; opacity:.28; }
.arc-rev{   fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round;
            transition:stroke var(--dur) var(--ease); }
.marker{ fill:var(--accent); transition:fill var(--dur) var(--ease); }
.dial.hot .arc-rev{ stroke:var(--danger); }
.dial.hot .marker{ fill:var(--danger); }

.tick{ stroke:var(--line); stroke-width:2; }
.tick.red{ stroke:var(--danger); }
.numeral{
  fill:var(--text-3); font-family:var(--f); font-weight:400; font-size:15px;
  text-anchor:middle; dominant-baseline:middle;
}
.numeral.red{ fill:var(--danger); }

.readout{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; pointer-events:none;
}
.speed-box{ display:flex; align-items:baseline; gap:8px; }
.speed{
  font-size:clamp(3.4rem,19vw,5rem); font-weight:200; line-height:.92;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums;
}
.speed-unit{ font-size:.9rem; font-weight:400; color:var(--text-2); }
.micro{ display:flex; align-items:center; gap:8px; }
.gear{
  min-width:2.2em; padding:3px 9px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text);
  font-size:.95rem; font-weight:500; text-align:center; font-variant-numeric:tabular-nums;
}
.gear-lbl{ font-size:.68rem; font-weight:500; letter-spacing:.1em; color:var(--text-3); }
.rpm-box{ font-size:.8rem; color:var(--text-2); font-variant-numeric:tabular-nums; }

/* ── Bandeau de données ──────────────────────────────────────── */
.strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
@media (min-width:560px){ .strip{ grid-template-columns:repeat(4,1fr); } }
.strip-cell{
  background:var(--surface); border-radius:var(--r-card); padding:12px 14px;
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
.cell-k{ font-size:.7rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.cell-v{
  font-size:.95rem; font-weight:500; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cell-v.load{ height:6px; background:var(--surface-2); border-radius:var(--r-pill); display:block; margin-top:4px; }
.cell-v.load i{ display:block; height:100%; width:0%; background:var(--accent); border-radius:var(--r-pill); transition:width .1s linear; }

/* ── Panneaux ────────────────────────────────────────────────── */
.deck{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:720px){ .deck{ grid-template-columns:1fr 1fr; } .deck .panel:first-child{ grid-column:1 / -1; } }

.panel{
  background:var(--surface); border-radius:var(--r-card);
  padding:18px; display:flex; flex-direction:column; gap:16px;
}
.panel-h{
  margin:0; font-size:.7rem; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3);
}

/* Blocs moteur */
.engines{ display:flex; flex-direction:column; gap:20px; }
.eng-group{ display:flex; flex-direction:column; gap:10px; }
.eng-cat{ margin:0; font-size:.82rem; font-weight:500; color:var(--text-2); }
.eng-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(10rem,1fr)); gap:8px; }
.eng{
  text-align:left; min-height:44px; padding:12px 14px; border-radius:10px;
  background:var(--bg); color:var(--text);
  display:flex; flex-direction:column; gap:2px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.eng:hover{ background:var(--surface-2); }
.eng.on{ background:var(--text); color:var(--bg); }
.eng-name{ font-size:.95rem; font-weight:500; line-height:1.25; }
.eng-sub{ font-size:.78rem; color:var(--text-2); }
.eng-spec{ font-size:.72rem; color:var(--text-3); font-variant-numeric:tabular-nums; }
.eng.on .eng-sub,
.eng.on .eng-spec{ color:var(--bg); opacity:.7; }

/* Segments */
.seg{
  display:flex; gap:4px; padding:4px;
  background:var(--bg); border-radius:var(--r-pill);
}
.seg button{
  flex:1; min-height:44px; padding:0 8px; border-radius:var(--r-pill);
  color:var(--text-2); font-size:.85rem; font-weight:500;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg button:hover{ color:var(--text); }
.seg button.on{ background:var(--text); color:var(--bg); }

.src-body{ min-height:3rem; }
.src-pane[hidden]{ display:none; }
.hint{ margin:0; font-size:.88rem; color:var(--text-2); text-wrap:pretty; }
.mini{
  margin-top:12px; min-height:44px; padding:0 18px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--on-accent); font-size:.88rem; font-weight:500;
  transition:opacity var(--dur) var(--ease);
}
.mini:hover{ opacity:.86; }

/* Sliders — piste fine, pouce large, zone tactile 44 px */
.slider{ display:flex; flex-direction:column; gap:4px; }
.slider > span{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:.88rem; color:var(--text-2);
}
.slider b{ font-weight:500; color:var(--text); font-variant-numeric:tabular-nums; }
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:44px; background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{ height:4px; background:var(--surface-2); border-radius:var(--r-pill); }
input[type=range]::-moz-range-track{ height:4px; background:var(--surface-2); border-radius:var(--r-pill); }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; margin-top:-10px;
  border-radius:50%; background:var(--accent); border:0;
}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border:0; border-radius:50%; background:var(--accent);
}

/* Palettes séquentielles — [hidden] doit gagner sur display:flex */
.paddles{ display:flex; align-items:center; gap:10px; }
.paddles[hidden]{ display:none; }
.paddle{
  flex:1; min-height:52px; border-radius:10px;
  background:var(--bg); color:var(--text); font-size:1.3rem; font-weight:300;
  transition:background var(--dur) var(--ease);
}
.paddle:hover{ background:var(--surface-2); }
.paddle:active{ background:var(--surface-2); }
.paddle-gear{
  font-size:1.5rem; font-weight:500; min-width:2ch; text-align:center;
  font-variant-numeric:tabular-nums;
}

/* Cases à cocher — toute la ligne est cliquable, hauteur 44 px */
.toggles{ display:flex; flex-direction:column; }
.chk{
  display:flex; align-items:center; gap:12px; min-height:44px;
  font-size:.9rem; color:var(--text); cursor:pointer;
}
.chk input{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; flex:none;
  border-radius:6px; background:var(--surface-2);
  display:grid; place-content:center;
  transition:background var(--dur) var(--ease);
}
.chk input:checked{ background:var(--accent); }
.chk input:checked::after{
  content:""; width:10px; height:5px;
  border:2px solid var(--on-accent); border-top:0; border-right:0;
  transform:rotate(-45deg) translate(1px,-1px);
}

/* ── Page de soutien (soutien.html) ─────────────────────────── */
.page-wrap{
  max-width:34rem; margin:0 auto;
  padding:max(24px,env(safe-area-inset-top)) 20px calc(48px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:flex-start; gap:20px;
}
.back{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; color:var(--text-2); text-decoration:none;
  font-size:.9rem; font-weight:500;
  transition:color var(--dur) var(--ease);
}
.back:hover{ color:var(--accent); }
.back-ico{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.back-bottom{ margin-top:4px; }
.page-title{
  margin:0; font-size:clamp(2.4rem,10vw,3.4rem); font-weight:200;
  letter-spacing:-.04em; line-height:1.02;
}
.page-title span{ font-weight:500; }
.page-lede{ margin:0; font-size:1.05rem; color:var(--text); text-wrap:pretty; }
.page-body{ margin:0; color:var(--text-2); text-wrap:pretty; }
.facts{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; width:100%; }
.facts li{
  background:var(--surface); border-radius:var(--r-card); padding:14px 16px;
  font-size:.92rem; color:var(--text-2); text-wrap:pretty;
}
.facts b{ color:var(--text); font-weight:500; }
.pay{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 32px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--on-accent);
  font-size:.98rem; font-weight:500; text-decoration:none;
  transition:opacity var(--dur) var(--ease);
}
.pay:hover{ opacity:.86; }
.pay[hidden]{ display:none; }
.page-note{
  margin:0; padding:14px 16px; width:100%;
  background:var(--surface); border-radius:var(--r-card);
  font-size:.9rem; color:var(--text-2);
}
.page-note[hidden]{ display:none; }
.pay-note{ margin:-8px 0 0; font-size:.88rem; color:var(--text-2); text-wrap:pretty; }
.pay-note[hidden]{ display:none; }
.pay-note b{ color:var(--text); font-weight:500; }
.page-fine{ margin:0; font-size:.8rem; color:var(--text-3); text-wrap:pretty; }

/* Soutien — carte placée sous les instruments, masquée sans lien */
.support{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 16px;
  background:var(--surface); border-radius:var(--r-card); padding:16px 18px;
}
.support[hidden]{ display:none; }
.support-txt{ margin:0; flex:1 1 12rem; font-size:.9rem; color:var(--text-2); text-wrap:pretty; }
.support-txt b{ color:var(--text); font-weight:500; }
.support-btn{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 22px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--on-accent);
  font-size:.9rem; font-weight:500; text-decoration:none; white-space:nowrap;
  transition:opacity var(--dur) var(--ease);
}
.support-btn:hover{ opacity:.86; }
.support-ico{
  width:17px; height:17px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round;
}

/* Pied */
.foot{ display:flex; flex-direction:column; gap:10px; padding-top:8px; border-top:1px solid var(--line); }
.foot p{ margin:0; font-size:.82rem; color:var(--text-3); text-wrap:pretty; max-width:60ch; }
.foot b{ color:var(--text-2); font-weight:500; }