/* ═══════════════════════════════════════════════════════════
   Orbital Web — base : jetons de design et composants communs
   Utilisé par le site (index.html) et l'espace client (client/).
   Deux thèmes : « halloween » (nuit, décor animé) et « day » (papier, l'identité de tous les jours).
   Pour désactiver Halloween définitivement : mettre SEASON_ENABLED à false dans assets/js/config.js.
   ═══════════════════════════════════════════════════════════ */

:root{
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-xl:36px;
  --wrap:1240px; --gut:clamp(18px,4vw,48px); --sec:clamp(84px,11vw,150px);

  --ignition:#FF5A1F; --ignition-d:#E64A11; --ignition-l:#FF8A3D;
  --plasma:#6E56F8; --plasma-l:#A394FF;
  --ok:#2FD48F; --warn:#FFB020; --bad:#FF6B6B;
  --void:#0B1020; --paper:#F2F2EE;
}

/* Nuit : thème Halloween, et sections toujours sombres du thème jour */
:root[data-theme="halloween"], .is-dark{
  --bg:#0A0F1E; --bg-2:#0D1326; --bg-3:#111833;
  --surface:#121A33; --surface-2:#18213F; --surface-3:#202A4D;
  --fg:#F2F2EE; --fg-2:#C6CADA; --fg-3:#8F97AF;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --nav-bg:rgba(14,20,40,.68);
  --shadow-card:0 1px 0 rgba(255,255,255,.05) inset, 0 34px 60px -36px rgba(0,0,0,.8);
  --field-bg:rgba(255,255,255,.04);
  --sec-bg:rgba(13,19,38,.58);
  color-scheme:dark;
}
/* Jour : le papier de l'identité Orbital Web */
:root[data-theme="day"]{
  --bg:#F2F2EE; --bg-2:#EAEAE4; --bg-3:#E2E1D9;
  --surface:#FFFFFF; --surface-2:#F7F6F2; --surface-3:#EFEEE8;
  --fg:#0B1020; --fg-2:#3A4157; --fg-3:#6A6F7E;
  --line:#DFDDD5; --line-2:#CFCDC4;
  --nav-bg:rgba(255,255,255,.78);
  --shadow-card:0 1px 2px rgba(11,16,32,.04), 0 26px 50px -34px rgba(11,16,32,.42);
  --field-bg:#FFFFFF;
  --sec-bg:transparent;
  color-scheme:light;
}
:root[data-theme="day"] .is-dark{ --sec-bg:#0B1020; --nav-bg:rgba(14,20,40,.68); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; min-height:100vh;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
::selection{ background:var(--ignition); color:#fff; }
:focus-visible{ outline:2px solid var(--ignition-l); outline-offset:3px; border-radius:6px; }
[hidden]{ display:none !important; }

.skip{
  position:absolute; left:12px; top:-70px; z-index:300;
  background:var(--ignition); color:#fff; padding:10px 18px; border-radius:999px;
  font:500 12px var(--mono); text-decoration:none; transition:top .2s var(--ease);
}
.skip:focus{ top:12px; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── Typographie ─────────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:linear-gradient(90deg,var(--ignition),transparent); }
.h2{
  font:800 clamp(32px,4.6vw,62px)/1.02 var(--display);
  letter-spacing:-.042em; text-wrap:balance;
}
.lead{ font-size:clamp(16px,1.3vw,19px); color:var(--fg-2); max-width:58ch; text-wrap:pretty; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.grad{
  background:linear-gradient(95deg,var(--ignition) 0%,var(--ignition-l) 38%,var(--plasma-l) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── Icônes (sprite injecté par fx.js) ───────────────────── */
.i{ width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ── Boutons ─────────────────────────────────────────────── */
.btn{
  --b-bg:var(--ignition); --b-fg:#fff; --b-bd:transparent;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:999px; border:1px solid var(--b-bd);
  background:var(--b-bg); color:var(--b-fg);
  font:500 11px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .75s var(--ease);
}
.btn:hover::after{ transform:translateX(120%); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn svg{ width:14px; height:14px; flex:none; transition:transform .3s var(--ease); }
.btn:hover svg.arr{ transform:translate(2px,-2px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn--ignite{ box-shadow:0 8px 26px -10px rgba(255,90,31,.85); }
.btn--ignite:hover{ --b-bg:var(--ignition-d); box-shadow:0 16px 36px -12px rgba(255,90,31,.95); }
.btn--ghost{ --b-bg:transparent; --b-fg:var(--fg); --b-bd:var(--line-2); }
.btn--ghost:hover{ --b-bg:var(--surface-2); --b-bd:var(--fg-3); }
.btn--soft{ --b-bg:var(--surface-2); --b-fg:var(--fg); --b-bd:var(--line); }
.btn--soft:hover{ --b-bg:var(--surface-3); }
.btn--plasma{ --b-bg:var(--plasma); box-shadow:0 8px 26px -10px rgba(110,86,248,.85); }
.btn--lg{ padding:18px 30px; font-size:11.5px; }
.btn.mag{ transform:translate(var(--tx,0px),var(--ty,0px)); }
.btn.mag:hover{ transform:translate(var(--tx,0px),calc(var(--ty,0px) - 2px)); }
.btn--sm{ padding:10px 16px; font-size:10.5px; }
.btn--full{ width:100%; }

/* ── Marque et sélecteur de langue ───────────────────────── */
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.brand__mark{ width:28px; height:28px; color:var(--fg); }
.brand__mark svg{ width:100%; height:100%; overflow:visible; }
.brand__mark ellipse{ transform-origin:20px 20px; transition:transform .9s var(--ease-out); }
.brand:hover .brand__mark ellipse{ transform:rotate(-22deg) rotate(340deg); }
.brand__word{ font:800 19px/1 var(--display); letter-spacing:-.04em; }
.brand__word em{ font-style:normal; font-weight:500; color:var(--fg-3); }

.lang{ display:flex; background:var(--surface-2); border-radius:999px; padding:3px; }
.lang__btn{
  border:0; background:transparent; cursor:pointer; font:500 10px/1 var(--mono); letter-spacing:.06em;
  padding:7px 9px; border-radius:999px; color:var(--fg-3); transition:background-color .25s, color .25s;
}
.lang__btn:hover{ color:var(--fg); }
.lang__btn.is-on{ background:var(--ignition); color:#fff; box-shadow:0 2px 8px -2px rgba(255,90,31,.7); }


/* ── Pastilles ───────────────────────────────────────────── */
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:999px;
  border:1px solid var(--line-2); background:color-mix(in srgb,var(--surface) 72%,transparent);
  font:500 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); white-space:nowrap;
}
.chip--hot{ border-color:rgba(255,90,31,.4); background:rgba(255,90,31,.1); color:var(--ignition-l); }
.chip--ok{ border-color:rgba(47,212,143,.35); background:rgba(47,212,143,.1); color:var(--ok); }
.chip--warn{ border-color:rgba(255,176,32,.38); background:rgba(255,176,32,.1); color:var(--warn); }
.chip--bad{ border-color:rgba(255,107,107,.4); background:rgba(255,107,107,.1); color:var(--bad); }
.chip--plasma{ border-color:rgba(110,86,248,.45); background:rgba(110,86,248,.14); color:var(--plasma-l); }
:root[data-theme="day"] .chip--hot{ color:var(--ignition-d); }
:root[data-theme="day"] .chip--ok{ color:#0C8E5D; }
:root[data-theme="day"] .chip--warn{ color:#9A6200; }
:root[data-theme="day"] .chip--bad{ color:#C23030; }
:root[data-theme="day"] .chip--plasma{ color:#4F3AD6; }
:root[data-theme="day"] .is-dark .chip--hot{ color:var(--ignition-l); }

.pulse{
  width:7px; height:7px; border-radius:50%; background:var(--ignition); flex:none;
  box-shadow:0 0 0 0 rgba(255,90,31,.6); animation:ping 2.2s infinite;
}
.pulse--ok{ background:var(--ok); box-shadow:0 0 0 0 rgba(47,212,143,.6); animation-name:pingOk; }
@keyframes ping{ 70%{ box-shadow:0 0 0 10px rgba(255,90,31,0); } 100%{ box-shadow:0 0 0 0 rgba(255,90,31,0); } }
@keyframes pingOk{ 70%{ box-shadow:0 0 0 10px rgba(47,212,143,0); } 100%{ box-shadow:0 0 0 0 rgba(47,212,143,0); } }

/* ── Formulaires ─────────────────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.field > label{ font:500 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); }
.field input,.field select,.field textarea{
  width:100%; min-width:0; padding:14px 16px; border-radius:14px;
  border:1px solid var(--line-2); background:var(--field-bg); color:var(--fg); font-size:15.5px;
  transition:border-color .2s, box-shadow .25s, background-color .2s;
}
.field textarea{ resize:vertical; min-height:110px; line-height:1.55; }
.field input::placeholder,.field textarea::placeholder{ color:var(--fg-3); opacity:.75; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--fg-3); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ignition); box-shadow:0 0 0 4px rgba(255,90,31,.18);
}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{ border-color:var(--bad); box-shadow:0 0 0 4px rgba(255,107,107,.14); }
.field select{
  appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238F97AF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 15px center;
}
.field select option{ color:#0B1020; background:#fff; }
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ── Cartes avec halo qui suit le curseur ────────────────── */
.glow-card{ position:relative; isolation:isolate; }
.glow-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,90,31,.16), rgba(110,86,248,.08) 40%, transparent 70%);
  opacity:0; transition:opacity .4s var(--ease);
}
.glow-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; padding:1px;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(255,138,61,.75), rgba(110,86,248,.35) 45%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:0; transition:opacity .4s var(--ease);
}
.glow-card:hover::before,.glow-card:hover::after{ opacity:1; }

/* ── Apparition au défilement ────────────────────────────── */
.js .rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0s); }
.js .rv.in{ opacity:1; transform:none; }

/* ── Mouvement réduit ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .rv{ opacity:1; transform:none; }
}