/* Style « Cockpit » (choisi par Flo le 30/09/2026), chargé après style.css. Interface de pilotage, sombre dans les deux thèmes, repères HUD et néon cyan. */
:root:not(#_){
  color-scheme:dark;
  --paper:#03070D; --surface:#07101B; --ink:#DCEBF5; --muted:#7F97AB; --line:rgba(56,208,255,.2);
  --accent:#38D0FF; --accent-soft:rgba(56,208,255,.1); --cyan:#38D0FF; --maple:#FF6B5A; --warn-bg:#150F07; --warn-ink:#F4C27A;
  --logo-light:none; --logo-dark:block; --glow:rgba(56,208,255,.55);
  --display:"Chakra Petch","Schibsted Grotesk",Arial,sans-serif;
  --space:#03070D; --space-line:rgba(56,208,255,.22); --sky:#7FE3FF;
  --hud:linear-gradient(var(--accent),var(--accent));
}
body{background:
  radial-gradient(ellipse 80% 50% at 50% -10%,rgba(56,208,255,.12),transparent 60%),
  radial-gradient(rgba(56,208,255,.12) 1px,transparent 1.2px) 0 0/28px 28px,var(--paper)}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.01em}
h2{font-weight:700;text-shadow:0 0 24px rgba(56,208,255,.25)}
h3{letter-spacing:.04em}
.eyebrow::before{content:"// ";opacity:.6}
.eyebrow::after{content:"_";margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero .eyebrow::after{display:none}
/* Sections numérotées comme des modules */
main{counter-reset:mod}
section:not(.hero){counter-increment:mod;position:relative}
section:not(.hero) > .eyebrow:first-child::before,section:not(.hero) .two > .stack:first-child > .eyebrow::before,#apropos .eyebrow::before{content:"MOD." counter(mod,decimal-leading-zero) " // ";opacity:.7}
section{border-bottom-color:var(--line)}
/* Cartes à coins repérés, sans arrondi */
.facts .fact:nth-child(n),.kpis4 .kpi,.steps li,.faq details,#contact form,.perf-plot,.years > div:nth-child(n),.pairs,.guide li,.note{
  border-radius:2px;background:
  var(--hud) top left/14px 2px no-repeat,var(--hud) top left/2px 14px no-repeat,
  var(--hud) top right/14px 2px no-repeat,var(--hud) top right/2px 14px no-repeat,
  var(--hud) bottom left/14px 2px no-repeat,var(--hud) bottom left/2px 14px no-repeat,
  var(--hud) bottom right/14px 2px no-repeat,var(--hud) bottom right/2px 14px no-repeat,
  linear-gradient(180deg,rgba(56,208,255,.06),transparent 60%),var(--surface)}
.kpis4 .kpi:first-child{background:
  var(--hud) top left/14px 2px no-repeat,var(--hud) top left/2px 14px no-repeat,
  var(--hud) bottom right/14px 2px no-repeat,var(--hud) bottom right/2px 14px no-repeat,
  radial-gradient(120% 120% at 100% 0%,rgba(56,208,255,.22),transparent 60%),#050C16}
.kpis4 .kpi .v,.fact .v{font-family:var(--mono);font-weight:600;letter-spacing:-.02em;text-shadow:0 0 18px rgba(56,208,255,.45)}
.fact .v{background:none;color:var(--accent)}
.steps li::before{border-radius:2px;font-family:var(--mono)}
.steps.go li::before{box-shadow:0 0 16px var(--glow)}
.faq summary::after{border-radius:2px}
/* Boutons biseautés */
.btn{border-radius:0;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono);font-size:.85rem;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.btn.primary,.hero .btn.primary{background:var(--accent);color:#03070D;box-shadow:none}
.btn.primary:hover{box-shadow:0 0 24px var(--glow)}
.btn.ghost,.hero .btn.ghost{border-color:var(--accent);color:var(--accent);background:rgba(56,208,255,.05)}
.lang,.menu-btn{border-radius:2px}
.lang span{color:#03070D}
input,textarea{border-radius:2px;background:#040A12;font-family:var(--mono)}
/* Accueil : écran de contrôle */
.hero{border-radius:4px;border-color:var(--space-line);background:
  radial-gradient(90% 80% at 80% 30%,rgba(56,208,255,.14),transparent 60%),#040A13}
.hero::before{background:repeating-linear-gradient(0deg,rgba(56,208,255,.05) 0 1px,transparent 1px 3px);filter:none;inset:0;animation:scan 8s linear infinite}
@keyframes scan{to{background-position:0 120px}}
.hero::after{opacity:.35}
.hero h1{text-shadow:0 0 40px rgba(56,208,255,.3)}
.hero h1 .hl{background-image:linear-gradient(90deg,#38D0FF,#B9F1FF,#38D0FF)}
.orbit::before{content:"";position:absolute;top:0;left:50%;width:min(100%,460px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(56,208,255,.28),transparent 18%);-webkit-mask:radial-gradient(circle,transparent 30%,#000 31%,#000 49%,transparent 50%);mask:radial-gradient(circle,transparent 30%,#000 31%,#000 49%,transparent 50%);animation:spin 5s linear infinite}
.orbit::after{content:"";position:absolute;top:0;left:50%;width:min(100%,460px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  border:1px dashed rgba(56,208,255,.25);scale:.96}
#globe{--g-land:#38D0FF;--g-ocean1:#06233B;--g-ocean2:#020912;--g-arc:rgba(56,208,255,.85);--g-live:#38D0FF;--g-tag:rgba(3,7,13,.85);--g-rim:rgba(56,208,255,.6);position:relative}
.hero .pairs{border-radius:2px}
.hud-read{position:absolute;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:rgba(127,227,255,.65);pointer-events:none;z-index:1}
.hud-read.tl{top:14px;left:18px}.hud-read.tr{top:14px;right:18px;text-align:right}.hud-read.bl{bottom:12px;left:18px}
.tape .track{color:var(--accent)}
.tape b{color:#fff}
#perf-svg .line{stroke:var(--accent);filter:drop-shadow(0 0 6px var(--glow))}
footer .warn{border:1px solid rgba(244,194,122,.3);border-radius:2px}
.to-top{border-radius:2px}
.progress{height:2px;box-shadow:0 0 10px var(--glow)}
.avatar{border-radius:50%}
@media (max-width:820px){.hud-read{display:none}.orbit::before,.orbit::after{width:min(100%,340px)}}
.guide{border-top:0;gap:12px}
.guide li{padding:20px 22px;border-bottom:0}
.guide li::before{border-radius:2px;font-family:var(--mono);color:#03070D}
.guide .shot img{border-radius:4px}
