:root{
  --nero:#0B0B0B;
  --carbone:#161616;
  --carbone-2:#212121;
  --graphite:#3D3D3D;
  --bianco:#F2F2F2;
  --giallo:#FFCE00;
  --giallo-dim:#E0B000;
  --rosso:#D40000;

  --font-display:"Space Grotesk", sans-serif;
  --font-body:"IBM Plex Sans", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--nero);
  color:var(--bianco);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.narrow{ max-width:680px; }

h1, h2, h3{
  font-family:var(--font-display);
  color:#fff;
  margin:0 0 18px;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(34px, 5.4vw, 58px); line-height:1.06; }
h2{ font-size:clamp(26px, 3.6vw, 36px); line-height:1.15; }
h3{ font-size:19px; margin-bottom:6px; color:var(--giallo); }

p{ margin:0 0 16px; }
a{ color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- Header --- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(11,11,11,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(242,242,242,.1);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px 24px;
}
.brand-mark{ height:34px; display:block; }
.nav-links{ display:flex; gap:26px; font-size:15px; }
.nav-links a{ text-decoration:none; opacity:.85; }
.nav-links a:hover{ opacity:1; color:var(--giallo); }
.header-right{ display:flex; align-items:center; gap:14px; }

/* --- Sélecteur de langue --- */
.lang-switch select{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--bianco);
  background:transparent;
  border:1px solid rgba(242,242,242,.22);
  border-radius:5px;
  padding:7px 8px;
  cursor:pointer;
}
.lang-switch select:hover{ border-color:var(--giallo); color:var(--giallo); }
.lang-switch select option{ background:var(--carbone); color:var(--bianco); }

/* --- Buttons --- */
.btn{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  padding:12px 22px;
  border-radius:6px;
  white-space:nowrap;
}
.btn-primary{ background:var(--giallo); color:var(--nero); }
.btn-primary:hover{ background:var(--giallo-dim); }
.btn-sm{ padding:9px 16px; font-size:14px; }

/* =====================================================================
   HERO — la photo passe derrière, assombrie, avec une trame de données
   ===================================================================== */
.hero{
  position:relative;
  padding:92px 0 72px;
  overflow:hidden;
  /* FOND DE SECOURS: si l'image manque, on garde un dégradé lisible au lieu d'un
     bloc noir plat — le texte doit rester net dans tous les cas. */
  background:radial-gradient(120% 100% at 70% 20%, #1b2430 0%, var(--nero) 62%);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-img{
  width:100%; height:100%; object-fit:cover; object-position:60% 45%;
  opacity:.50;
  filter:grayscale(.35) contrast(1.08);
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--nero) 6%, rgba(11,11,11,.72) 46%, rgba(11,11,11,.30) 100%),
    linear-gradient(180deg, rgba(11,11,11,.55) 0%, rgba(11,11,11,0) 34%, var(--nero) 97%);
}
/* La trame: le monde physique lu comme une grille de mesure. */
.hero-grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,206,0,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,206,0,.06) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(90deg, transparent 30%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000 100%);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr 0.85fr;
  gap:56px; align-items:center;
}
.lede{ font-size:19px; max-width:52ch; }
.hero-actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:8px; }
.hero-note{ font-size:14px; color:#8a8a8a; }

/* --- Instrument panel --- */
.panel{
  background:rgba(22,22,22,.92);
  border:1px solid var(--carbone-2);
  border-radius:10px;
  padding:22px 24px;
  backdrop-filter:blur(4px);
  box-shadow:0 18px 46px rgba(0,0,0,.5);
}
.panel-label{ font-size:13px; color:#8a8a8a; margin-bottom:14px; }
.panel-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:11px 0; border-bottom:1px solid rgba(242,242,242,.08);
}
.panel-row:last-child{ border-bottom:0; }
.panel-key{ font-size:14px; opacity:.72; }
.panel-val{
  font-family:var(--font-display); font-weight:700; font-size:23px;
  font-variant-numeric:tabular-nums;
}
.val-giallo{ color:var(--giallo); }
.val-bianco{ color:var(--bianco); }
.val-rosso{ color:var(--rosso); }
.panel-row-alert .panel-key{ color:var(--rosso); opacity:1; font-size:13.5px; }

/* --- Divider --- */
.divider{ display:flex; justify-content:center; padding:10px 0 4px; }
.divider svg{ width:64px; height:26px; }

/* --- Sections --- */
.section{ padding:64px 0; }
.section-alt{ background:var(--carbone); }
.section-intro{ max-width:60ch; opacity:.85; }

/* --- Encadré « augmente, ne remplace pas » --- */
.callout{
  margin-top:28px;
  border-left:3px solid var(--giallo);
  background:var(--carbone);
  border-radius:0 8px 8px 0;
  padding:20px 22px;
}
.callout h3{ margin-bottom:8px; }
.callout p{ margin:0; opacity:.9; }

/* =====================================================================
   BANDE DE FUSION — photo à gauche, trame numérique à droite
   ===================================================================== */
.fusion{
  position:relative;
  height:clamp(180px, 26vw, 300px);
  overflow:hidden;
  border-top:1px solid rgba(242,242,242,.08);
  border-bottom:1px solid rgba(242,242,242,.08);
  background:var(--carbone);
}
.fusion-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Lignes de balayage: la mesure qui passe sur l'image. */
.fusion-scan{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px);
  mix-blend-mode:multiply;
}

/* =====================================================================
   LES SIX IA
   ===================================================================== */
.crew-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:32px;
}
.crew-card{
  position:relative;
  background:var(--nero);
  border:1px solid rgba(242,242,242,.1);
  border-radius:10px;
  padding:24px 22px 22px;
  transition:border-color .2s ease, transform .2s ease;
}
.crew-card:hover{ border-color:rgba(255,206,0,.5); transform:translateY(-2px); }
.crew-num{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.14em;
  color:var(--giallo); opacity:.75;
  display:block; margin-bottom:10px;
}
.crew-card h3{ font-size:18px; margin-bottom:8px; }
.crew-card p{ margin:0; font-size:15px; opacity:.85; }
.crew-card em{ color:var(--giallo); font-style:normal; font-weight:600; }

/* =====================================================================
   CAPTEURS — image en fond, liste en deux colonnes
   ===================================================================== */
.section-sensors{ position:relative; overflow:hidden; }
.sensors-media{ position:absolute; inset:0; z-index:0; }
.sensors-img{
  width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  opacity:.22;
  filter:grayscale(1) contrast(1.15);
}
.section-sensors::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, var(--nero) 0%, rgba(11,11,11,.82) 30%, var(--nero) 100%);
}
.sensors-inner{ position:relative; z-index:1; }
.sensor-list{
  list-style:none; padding:0; margin:30px 0 0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:rgba(242,242,242,.1);
  border:1px solid rgba(242,242,242,.1);
  border-radius:10px; overflow:hidden;
}
.sensor-list li{
  background:var(--nero);
  padding:20px 20px 22px;
  display:flex; flex-direction:column; gap:5px;
}
.sensor-list strong{
  font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--giallo);
}
.sensor-list span{ font-size:14.5px; opacity:.82; }

/* =====================================================================
   EXEMPLE DE RAPPORT — mise en page proche du vrai document
   ===================================================================== */
.report-doc{
  margin-top:30px;
  background:var(--nero);
  border:1px solid rgba(242,242,242,.12);
  border-radius:10px;
  padding:26px clamp(20px, 3vw, 34px) 30px;
  box-shadow:0 18px 46px rgba(0,0,0,.4);
}
.report-caption{
  font-family:var(--font-mono);
  font-size:12.5px; color:#8a8a8a;
  margin:0 0 22px; padding-bottom:16px;
  border-bottom:1px solid rgba(242,242,242,.1);
}
.report-scores{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:12px;
  margin-bottom:26px;
}
.score{ display:flex; flex-direction:column; gap:5px; }
.score-key{
  font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.1em; color:#8a8a8a;
}
.score-val{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(20px, 2.6vw, 27px); color:var(--bianco);
  font-variant-numeric:tabular-nums; line-height:1;
}
.score-val i{ font-style:normal; font-size:.52em; color:#8a8a8a; font-weight:500; }
/* UNE MAUVAISE NOTE SE VOIT. 1,7/10 aux manœuvres, c'est le vrai chiffre de ce
   jour-là: le rapport ne flatte pas, et l'exemple non plus. */
.score-low{ color:var(--rosso); }
.score-na{ color:var(--graphite); }

.report-h3{
  font-family:var(--font-display); color:var(--bianco);
  font-size:17px; margin:0 0 12px;
}
.report-body{
  font-size:15px; line-height:1.72; opacity:.88; margin:0;
  font-variant-numeric:tabular-nums;
}
.report-rupture{
  margin-top:20px;
  border-left:3px solid #E0A640;
  background:#2A2013;
  border-radius:0 8px 8px 0;
  padding:14px 18px;
}
.rupture-title{ margin:0 0 6px; font-size:14px; font-weight:600; }
.rupture-item{ margin:0; font-size:14px; opacity:.9; }
.rupture-item::before{ content:"• "; color:#E0A640; }
.report-footnote{
  margin-top:16px; font-size:13.5px; color:#8a8a8a; max-width:70ch;
}

/* --- CTA --- */
.section-cta{ text-align:left; }
.cta-footnote{ margin-top:14px; font-size:14px; color:var(--graphite); }

/* --- Footer --- */
.site-footer{ border-top:1px solid rgba(242,242,242,.1); padding:32px 0 48px; }
.footer-inner{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-mark{ height:22px; opacity:.7; }
.footer-inner p{ margin:0; font-size:13.5px; color:var(--graphite); }
.footer-inner a{ color:var(--graphite); text-decoration:underline; }

/* --- Focus --- */
a:focus-visible, .btn:focus-visible, select:focus-visible{
  outline:2px solid var(--giallo); outline-offset:3px;
}

/* --- Apparition au défilement --- */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal-on{
  opacity:1; transform:none;
  transition:opacity .5s ease, transform .5s ease;
}

/* --- Responsive --- */
@media (max-width: 980px){
  .crew-grid{ grid-template-columns:repeat(2, 1fr); }
  .sensor-list{ grid-template-columns:repeat(2, 1fr); }
  .report-scores{ grid-template-columns:repeat(3, 1fr); gap:16px; }
}
@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-img{ object-position:64% 45%; }
  .hero-scrim{
    background:linear-gradient(180deg, rgba(11,11,11,.7) 0%, rgba(11,11,11,.86) 45%, var(--nero) 96%);
  }
}
@media (max-width: 700px){
  .nav-links{ display:none; }
  .crew-grid{ grid-template-columns:1fr; }
  .sensor-list{ grid-template-columns:1fr; }
  .report-scores{ grid-template-columns:repeat(2, 1fr); }
  .hero{ padding:60px 0 52px; }
}