/* ==========================================================================
   S.A.M. — ONE-PAGE
   Réglages rapides (modifiez ici)
   ========================================================================== */

:root{
  /* Palette */
  --ink: #070a10;
  --ink-2: #0b1120;
  --slate: #0f1b2d;
  --hud: #3bb7ff;
  --hud-dim: rgba(59,183,255,.22);
  --amber: #d7b21a;              /* référence logo, contrôlée */
  --amber-dim: rgba(215,178,26,.14);

  /* Typo */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Relief & scrims */
  --scrim-strong: .62;
  --scrim-medium: .48;
  --scrim-soft: .28;

  --panel-bg: rgba(7, 10, 16, .82);
  --panel-bd: rgba(59,183,255,.22);
  --panel-bd-2: rgba(215,178,26,.16);

  /* Mouvement (atténué si prefers-reduced-motion) */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-slow: 900ms;
  --dur-med: 650ms;
  --dur-fast: 360ms;

  /* Modules */
  --module-parallax: 10px;
  --module-word-opacity: .13;
  --module-hud-opacity: .55;

  /* Ornements */
  --orn-opacity: .78;
  --frame-line: rgba(59,183,255,.18);
  --frame-line-2: rgba(215,178,26,.14);
  --bg-brightness: .74;

  /* Grille */
  --wrap: 1120px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ scroll-behavior: smooth; scroll-padding-top: 96px; }
body{
  margin: 0;
  font-family: var(--font-sans);
  background: radial-gradient(1200px 800px at 50% 0%, rgba(59,183,255,.08), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(215,178,26,.06), transparent 55%),
              linear-gradient(180deg, var(--ink), #05070b 60%, #04060a);
  color: rgba(240,244,255,.92);
  overflow-x: hidden;
  letter-spacing: .01em;
}

section{ scroll-margin-top: 96px; }

img{
  max-width: 100%;
  height: auto;
  display: block;
}

a{ color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid rgba(215,178,26,.75);
  outline-offset: 3px;
}

.skip{
  position: absolute;
  left: 12px;
  top: -80px;
  padding: 10px 12px;
  background: rgba(10,14,22,.92);
  border: 1px solid rgba(59,183,255,.25);
  border-radius: 10px;
  z-index: 9999;
  transition: transform var(--dur-fast) var(--ease);
}
.skip:focus{ transform: translateY(92px); }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 22px;
}

.kicker{
  margin: 0 0 10px;
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(59,183,255,.78);
}
.kicker::before{
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 1px;
  background: rgba(215,178,26,.85);
  box-shadow: 0 0 0 1px rgba(215,178,26,.18);
}
.kicker--thin{ color: rgba(59,183,255,.62); }


.title{
  margin: 0;
  font-weight: 720;
  letter-spacing: .02em;
  font-size: clamp(34px, 5vw, 66px);
  line-height: 1.02;
  text-transform: uppercase;
}
.title__accent{ color: rgba(215,178,26,.96); }

.h2{
  margin: 0 0 10px;
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 680;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 680;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.p{
  margin: 0;
  color: rgba(240,244,255,.84);
  line-height: 1.55;
}
.p--small{ font-size: 13px; color: rgba(240,244,255,.72); }
.mono{ font-family: var(--font-mono); font-size: 12.5px; color: rgba(240,244,255,.76); }

.sectionHead{ margin: 0 0 22px; position: relative; padding-bottom: 14px; }
.sectionHead::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, rgba(59,183,255,.22), rgba(59,183,255,.06) 45%, transparent 80%);
}
.sectionHead::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 2px;
  background: radial-gradient(circle, rgba(215,178,26,.55) 0 1px, transparent 2px) 0 0 / 48px 2px repeat-x;
  opacity: .55;
}

.sectionHead .p{ max-width: 70ch; }

.grid{
  display: grid;
  gap: 18px;
}
.grid--2{
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 920px){
  .grid--2{ grid-template-columns: 1fr; }
}

.bullets{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.bullets li{
  position: relative;
  padding-left: 16px;
  color: rgba(240,244,255,.80);
}
.bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 7px;
  height: 1px;
  background: rgba(215,178,26,.85);
  box-shadow: 0 0 0 1px rgba(215,178,26,.18);
}

.labels{ margin-top: 14px; }
.labelPill{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(59,183,255,.25);
  background: rgba(6, 10, 16, .55);
  color: rgba(240,244,255,.78);
  margin: 4px 6px 0 0;
}
.role{ color: rgba(240,244,255,.86); }

/* ==========================================================================
   Topbar
   ========================================================================== */

.topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.topbar *{ pointer-events: auto; }

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(59,183,255,.18);
  background: rgba(7,10,16,.55);
  backdrop-filter: blur(10px);
}
.brand__logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.brand__name{
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}
.brand__sub{
  display: block;
  font-size: 12px;
  color: rgba(240,244,255,.70);
  margin-top: 2px;
}
.topbar__status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(215,178,26,.18);
  background: rgba(7,10,16,.38);
  backdrop-filter: blur(10px);
}
.topbar__status .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(215,178,26,.92);
  box-shadow: 0 0 0 3px rgba(215,178,26,.14), 0 0 22px rgba(215,178,26,.25);
}
.topbar__status .label{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(240,244,255,.70);
}

@media (max-width: 620px){
  .topbar__right{ display: none; }
  .brand__sub{ display: none; }
}


/* ==========================================================================
   HUD NAV (balisage)
   ========================================================================== */

.hudnav{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  width: 16px;
  display: grid;
  justify-items: center;
  gap: 10px;
  pointer-events: none;
  opacity: .85;
}
.hudnav__label{
  position: absolute;
  right: 18px;
  top: -34px;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  width: 180px;
  border-radius: 14px;
  border: 1px solid rgba(59,183,255,.18);
  background: rgba(7,10,16,.55);
  backdrop-filter: blur(10px);
  transform: translateX(6px);
}
.hudnav__k{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(59,183,255,.70);
}
.hudnav__v{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .10em;
  color: rgba(240,244,255,.70);
  text-transform: uppercase;
}

.hudnav__rail{
  width: 1px;
  height: 260px;
  background: linear-gradient(180deg, rgba(59,183,255,.28), rgba(59,183,255,.04));
  box-shadow: 0 0 0 1px rgba(0,0,0,.0);
}
.hudnav__ticks{
  position: absolute;
  top: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.hudnav__tick{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(59,183,255,.22);
  background: rgba(6,10,16,.55);
  box-shadow: 0 0 0 0 rgba(215,178,26,.0);
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.hudnav__tick.is-active{
  border-color: rgba(215,178,26,.55);
  background: rgba(215,178,26,.80);
  box-shadow: 0 0 0 6px rgba(215,178,26,.12);
  transform: scale(1.05);
}

@media (max-width: 820px){
  .hudnav__label{ display: none; }
}
@media (max-width: 620px){
  .hudnav{ right: 12px; opacity: .72; }
  .hudnav__rail{ height: 220px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  appearance: none;
  border: 1px solid rgba(59,183,255,.28);
  background: rgba(8, 12, 18, .68);
  color: rgba(240,244,255,.92);
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(215,178,26,.35); }
.btn:active{ transform: translateY(0px); }

.btn--primary{
  background: linear-gradient(180deg, rgba(215,178,26,.22), rgba(8,12,18,.78));
  border-color: rgba(215,178,26,.42);
}
.btn--primary:hover{ background: linear-gradient(180deg, rgba(215,178,26,.28), rgba(8,12,18,.78)); }
.btn--ghost{
  background: rgba(8,12,18,.46);
  border-color: rgba(59,183,255,.22);
}

/* ==========================================================================
   Gate
   ========================================================================== */

.is-gate-locked{
  overflow: hidden;
}

.gate{
  position: fixed;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);

  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}
.gate[hidden]{ display: none; }

.gate__bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(59,183,255,.06), transparent 55%),
    radial-gradient(800px 520px at 80% 30%, rgba(215,178,26,.05), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.92), rgba(5,7,11,.94));
}
.gate__bg::before{
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.gate__card{
  position: relative;
  max-width: 680px;
  width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(59,183,255,.26);
  background: rgba(7,10,16,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  padding: 24px 22px 18px;
}
.gate__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(14px, 3vh, 34px);
}
.gate__stamp{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(59,183,255,.76);
}
.gate__codes{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(240,244,255,.62);
}
.gate__codes .code{
  padding: 4px 8px;
  border: 1px solid rgba(59,183,255,.20);
  border-radius: 10px;
  background: rgba(6,10,16,.55);
}
.gate__codes .sep{ opacity: .45; }

.gate__title{
  margin: 0 0 10px;
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 760;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.gate__text{
  margin: 0 0 18px;
  color: rgba(240,244,255,.80);
  line-height: 1.55;
  max-width: 70ch;
}
.gate__actions{
  display: flex;
  gap: 12px;
}
.gate__foot{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: rgba(240,244,255,.55);
  font-size: 12px;
}
.gate__foot code{
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(240,244,255,.74);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 92px 0 72px;
}
.hero__bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(1200px 800px at 50% 30%, rgba(59,183,255,.10), transparent 62%),
              linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.92));
}
.hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.04) brightness(0.65);
  transform: scale(1.02);
}
.hero__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.92) 65%, rgba(0,0,0,.98)),
    radial-gradient(900px 600px at 45% 30%, rgba(215,178,26,.10), transparent 60%);
}

.hero__hud{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .75;
  background:
    linear-gradient(to right, rgba(59,183,255,.18) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(to bottom, rgba(59,183,255,.12) 1px, transparent 1px) 0 0 / 120px 120px;
  mix-blend-mode: screen;
}
.hero__hud::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(215,178,26,.10) 50%, transparent 100%);
  opacity: .12;
}

.hero__wm{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .18;
}
.hero__wmImg{
  width: min(520px, 78vw);
  height: auto;
  filter: saturate(.9) contrast(1.05);
  opacity: .35;
  transform: translateY(18px);
}

.hero__content{
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 22px;
}
.lede{
  margin: 16px 0 22px;
  max-width: 74ch;
  color: rgba(240,244,255,.84);
  line-height: 1.6;
}
.hero__cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.hero__rails{
  position: absolute;
  inset: -30px 0 auto 0;
  pointer-events: none;
}
.rail{
  position: absolute;
  top: 70px;
  bottom: -80px;
  width: 1px;
  background: linear-gradient(180deg, rgba(59,183,255,.28), rgba(59,183,255,.02));
  opacity: .7;
}
.rail--left{ left: 22px; }
.rail--right{ right: 22px; }
.beacons{
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(18px, 4vh, 44px);
  display: flex;
  justify-content: center;
  gap: 14px;
  opacity: .85;
}
.beacon{
  width: 18px;
  height: 2px;
  background: rgba(215,178,26,.85);
  box-shadow: 0 0 0 1px rgba(215,178,26,.20), 0 0 18px rgba(215,178,26,.20);
}

@media (max-width: 620px){
  .hero{ padding: 86px 0 60px; }
  .hero__hud{ opacity: .62; }
  .hero__wm{ display: none; }
}

/* ==========================================================================
   Silence
   ========================================================================== */

.silence{
  position: relative;
  min-height: 56vh;
  display: grid;
  align-items: center;
  padding: 54px 0;
  border-top: 1px solid rgba(59,183,255,.12);
  border-bottom: 1px solid rgba(59,183,255,.12);
  background: linear-gradient(180deg, rgba(7,10,16,.88), rgba(7,10,16,.96));
}
.silence__bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 30% 20%, rgba(59,183,255,.10), transparent 60%),
    radial-gradient(900px 520px at 70% 60%, rgba(215,178,26,.06), transparent 62%),
    linear-gradient(180deg, rgba(8,12,18,.75), rgba(4,6,10,.92));
  opacity: .95;
}
.silence__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 520px at 50% 0%, rgba(240,244,255,.06), transparent 65%);
  opacity: .6;
}
.silence__hud{
  position: absolute;
  inset: 0;
  opacity: .55;
  background:
    linear-gradient(to bottom, rgba(59,183,255,.10) 1px, transparent 1px) 0 0 / 100px 100px;
  mix-blend-mode: screen;
}
.silence__label{
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 22px;
}
.silence .p{ max-width: 70ch; }


/* ==========================================================================
   Ornements (HUD / balisage / cadre)
   ========================================================================== */

.hero__orn, .silence__orn, .secOrn, .module__orn{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--orn-opacity);
}

.hero__orn{
  opacity: .78;
  background:
    linear-gradient(to right, rgba(59,183,255,.18) 1px, transparent 1px) 22px 0 / 1px 100% no-repeat,
    linear-gradient(to right, rgba(59,183,255,.14) 1px, transparent 1px) calc(100% - 22px) 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, rgba(59,183,255,.14) 1px, transparent 1px) 0 22px / 100% 1px no-repeat,
    linear-gradient(to bottom, rgba(59,183,255,.10) 1px, transparent 1px) 0 calc(100% - 26px) / 100% 1px no-repeat,
    radial-gradient(circle, rgba(215,178,26,.78) 0 1px, transparent 2px) 50% calc(100% - 26px) / 86px 2px repeat-x;
}

.silence__orn{
  opacity: .65;
  background:
    linear-gradient(to right, rgba(59,183,255,.10) 1px, transparent 1px) 22px 0 / 1px 100% no-repeat,
    linear-gradient(to right, rgba(59,183,255,.10) 1px, transparent 1px) calc(100% - 22px) 0 / 1px 100% no-repeat,
    radial-gradient(circle, rgba(59,183,255,.22) 0 1px, transparent 2px) 50% 26px / 92px 2px repeat-x;
}

.secOrn{
  opacity: .58;
  background:
    linear-gradient(to right, rgba(59,183,255,.14) 1px, transparent 1px) 22px 0 / 1px 100% no-repeat,
    linear-gradient(to right, rgba(59,183,255,.10) 1px, transparent 1px) calc(100% - 22px) 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, rgba(59,183,255,.10) 1px, transparent 1px) 0 26px / 100% 1px no-repeat,
    linear-gradient(to bottom, rgba(59,183,255,.08) 1px, transparent 1px) 0 calc(100% - 26px) / 100% 1px no-repeat,
    radial-gradient(circle, rgba(215,178,26,.62) 0 1px, transparent 2px) 50% 26px / 110px 2px repeat-x;
}

.module__orn{
  opacity: .70;
  background:
    linear-gradient(to bottom, rgba(59,183,255,.12) 1px, transparent 1px) 0 24px / 100% 1px no-repeat,
    linear-gradient(to bottom, rgba(59,183,255,.10) 1px, transparent 1px) 0 calc(100% - 28px) / 100% 1px no-repeat,
    radial-gradient(circle, rgba(215,178,26,.60) 0 1px, transparent 2px) 50% 24px / 120px 2px repeat-x,
    radial-gradient(circle, rgba(59,183,255,.30) 0 1px, transparent 2px) 50% calc(100% - 28px) / 130px 2px repeat-x;
}

/* Labels de secteur (marges) */
section[data-sec], section[data-code]{ position: relative; }
section[data-sec]::after{
  content: attr(data-sec);
  position: absolute;
  top: 12px;
  left: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240,244,255,.62);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(59,183,255,.20);
  background: rgba(6,10,16,.40);
  backdrop-filter: blur(10px);
}
section[data-code]::before{
  content: attr(data-code);
  position: absolute;
  top: 12px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(215,178,26,.78);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(215,178,26,.18);
  background: rgba(6,10,16,.40);
  backdrop-filter: blur(10px);
}

@media (max-width: 620px){
  section[data-code]::before{ display: none; }
}

/* Hero facts */
.hero__facts{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 12px;
}
.fact{
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(59,183,255,.18);
  background: rgba(6,10,16,.52);
  backdrop-filter: blur(10px);
}
.fact__k{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(59,183,255,.70);
}
.fact__v{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240,244,255,.82);
}

/* ==========================================================================
   Panels
   ========================================================================== */

.panel{
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--panel-bd);
  background: var(--panel-bg);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 50px rgba(0,0,0,.42);
  padding: 18px 16px;
}
.panel::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  background:
    radial-gradient(500px 240px at 20% 20%, rgba(215,178,26,.10), transparent 58%),
    radial-gradient(500px 240px at 80% 70%, rgba(59,183,255,.08), transparent 58%);
  opacity: .85;
}

.panel::after{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--frame-line), var(--frame-line)) 0 0 / 22px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 0 / 1px 22px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 0 / 22px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 0 / 1px 22px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 100% / 22px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 100% / 1px 22px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 100% / 22px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 100% / 1px 22px no-repeat,
    radial-gradient(circle, rgba(215,178,26,.22) 0 1px, transparent 2px) 50% 100% / 140px 2px repeat-x;
  opacity: .85;
}
.panel--dense{ padding: 18px 16px 16px; }
.panel > *{ position: relative; z-index: 1; }

.panel__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.panel__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  color: rgba(240,244,255,.70);
}
.tag{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid rgba(215,178,26,.22);
  background: rgba(10,14,22,.45);
  color: rgba(215,178,26,.92);
  font-size: 11px;
}
.step{ font-size: 12px; opacity: .92; }

.panel__marks{
  display: inline-flex;
  gap: 6px;
}
.mark{
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(59,183,255,.25);
  background: rgba(6,10,16,.55);
}
.panel__footer{
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panel__micro{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240,244,255,.58);
}
.dots{
  display: inline-flex;
  gap: 10px;
}
.dotBtn{
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(59,183,255,.25);
  background: rgba(6,10,16,.55);
  cursor: pointer;
}
.dotBtn.is-active{
  border-color: rgba(215,178,26,.50);
  background: rgba(215,178,26,.72);
  box-shadow: 0 0 0 4px rgba(215,178,26,.14);
}

/* ==========================================================================
   Modules (AlphaJet / Rafale)
   ========================================================================== */

.module{
  position: relative;
  border-top: 1px solid rgba(59,183,255,.12);
  border-bottom: 1px solid rgba(59,183,255,.12);
}
.module__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.module__spacer{
  height: calc((var(--steps, 4) - 1) * 100vh + 1px);
}
.module[data-steps="4"]{ --steps: 4; }
.module[data-steps="3"]{ --steps: 3; }

.module__bg{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.92));
}
.bg__strip{
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  width: calc(var(--steps, 4) * 100%);
  transform: translate3d(calc(var(--bg-x, 0) * 1px),0,0);
  will-change: transform;
}
.bg__slide{
  position: relative;
  overflow: hidden;
}
.bg__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--bg-focus-y, 40%);
  filter: saturate(.92) contrast(1.06) brightness(var(--bg-brightness, .74));
  transform: translate3d(0, var(--bg-shift-y, 0px), 0) scale(1.04);
}
.bg__slide img.is-broken{ display: none; }
.bg__slide::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 20% 30%, rgba(59,183,255,.10), transparent 60%),
    radial-gradient(900px 600px at 80% 60%, rgba(215,178,26,.07), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.92));
  opacity: .78;
}
.bg__scrim{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,var(--scrim-strong)), rgba(0,0,0,var(--scrim-medium)) 50%, rgba(0,0,0,var(--scrim-strong)));
  pointer-events: none;
}
.bg__hud{
  position: absolute;
  inset: 0;
  opacity: var(--module-hud-opacity);
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(59,183,255,.14) 1px, transparent 1px) 0 0 / 140px 140px,
    linear-gradient(to bottom, rgba(59,183,255,.10) 1px, transparent 1px) 0 0 / 140px 140px;
  mix-blend-mode: screen;
}
.bg__hud::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(215,178,26,.12), transparent 42%, rgba(215,178,26,.08));
  opacity: .22;
}
.bg__hud::after{
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.module__word{
  opacity: var(--module-alpha, 1);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 860;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: clamp(46px, 10vw, 140px);
  color: rgba(240,244,255, var(--module-word-opacity));
  transform: translate3d(0, 0, 0);
  user-select: none;
}

.module__aircraft{
  position: relative;
  z-index: 2;
  width: min(980px, 92vw);
  height: auto;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.65));
  opacity: var(--module-alpha, 1);
  transform: translate3d(calc(var(--mx, 0) * var(--module-parallax)), calc((var(--my, 0) * var(--module-parallax)) + var(--air-offset-y, 0px)), 0) scale(var(--air-scale, 1));
  transition: transform var(--dur-med) var(--ease);
}
.module__aircraft.is-broken{ display: none; }

.module__panel{
  opacity: var(--module-alpha, 1);
  position: absolute;
  z-index: 3;
  bottom: clamp(18px, 4vh, 44px);
  left: 22px;
  right: 22px;
  max-width: 640px;
}
.module--rafale .module__panel{
  opacity: var(--module-alpha, 1); max-width: 620px; }

@media (max-width: 620px){
  .module__panel{
  opacity: var(--module-alpha, 1);
    bottom: clamp(14px, 3vh, 34px);
    left: 14px;
    right: 14px;
  }
  .module__aircraft{
    width: min(820px, 96vw);
  }
}


/* Module tuning */
.module--alphajet{
  --bg-focus-y: 32%;
  --bg-shift-y: -2.0vh;
  --bg-brightness: .78;
  --air-offset-y: clamp(10px, 2.2vh, 30px);
}
.module--rafale{
  --bg-focus-y: 28%;
  --bg-shift-y: -2.6vh;
  --bg-brightness: .76;
  --air-offset-y: clamp(18px, 3.2vh, 44px);
}

/* ==========================================================================
   Content sections
   ========================================================================== */

.doctrine, .capabilities, .legitimacy, .unit, .gallery, .contact{
  padding: 74px 0;
}
@media (max-width: 620px){
  .doctrine, .capabilities, .legitimacy, .unit, .gallery, .contact{
    padding: 62px 0;
  }
}

.cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px){ .cards{ grid-template-columns: 1fr; } }

.card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(59,183,255,.18);
  background: rgba(7,10,16,.62);
  box-shadow: 0 22px 50px rgba(0,0,0,.42);
  display: grid;
  grid-template-rows: 160px 1fr;
}
.card__media{
  position: relative;
  background: radial-gradient(800px 380px at 20% 20%, rgba(59,183,255,.10), transparent 60%),
              radial-gradient(800px 380px at 80% 60%, rgba(215,178,26,.08), transparent 62%),
              linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.85));
}
.card__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.05) brightness(.66);
}
.card__media img.is-broken{ display: none; }
.card__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.86));
}
.card::after{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--frame-line), var(--frame-line)) 0 0 / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 0 / 1px 18px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 0 / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 0 / 1px 18px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 100% / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 100% / 1px 18px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 100% / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 100% / 1px 18px no-repeat;
  opacity: .75;
}
.card__body{
  padding: 16px 14px 14px;
}
.card__meta{
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(240,244,255,.60);
}
.card__meta .sep{ opacity: .45; margin: 0 8px; }

.signatures{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ .signatures{ grid-template-columns: 1fr; } }

.signature{
  position: relative;
  margin: 0;
  padding: 16px 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(215,178,26,.18);
  background: rgba(7,10,16,.62);
  box-shadow: 0 22px 50px rgba(0,0,0,.42);
}
.signature::after{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--frame-line), var(--frame-line)) 0 0 / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 0 / 1px 18px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 0 / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 0 / 1px 18px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 100% / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 100% / 1px 18px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 100% / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 100% / 1px 18px no-repeat;
  opacity: .75;
}
.signature__logo{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(59,183,255,.22);
  background: rgba(6,10,16,.55);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 12px;
}
.signature__logo img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.signature__logo--empty{
  background:
    linear-gradient(135deg, rgba(59,183,255,.10), rgba(0,0,0,.0)),
    rgba(6,10,16,.55);
}
.quote{
  margin: 0 0 12px;
  padding: 0;
  color: rgba(240,244,255,.86);
  line-height: 1.55;
}
.sig{
  display: grid;
  gap: 2px;
  color: rgba(240,244,255,.70);
  font-size: 12px;
  letter-spacing: .02em;
}
.sig__name{ font-weight: 680; text-transform: uppercase; letter-spacing: .10em; }
.sig__role{ opacity: .75; }

.members{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px){ .members{ grid-template-columns: 1fr; } }

.member{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(59,183,255,.18);
  background: rgba(7,10,16,.62);
  box-shadow: 0 22px 50px rgba(0,0,0,.42);
  display: grid;
  grid-template-rows: 210px 1fr;
}
.member::after{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--frame-line), var(--frame-line)) 0 0 / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 0 / 1px 18px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 0 / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 0 / 1px 18px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 100% / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 100% / 1px 18px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 100% / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 100% / 1px 18px no-repeat;
  opacity: .75;
}
.member__photo{
  position: relative;
  background: linear-gradient(180deg, rgba(59,183,255,.08), rgba(0,0,0,.85));
}
.member__photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.06) brightness(.62);
}
.member__photo img.is-broken{ display: none; }
.member__photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.88));
}
.member__body{
  padding: 16px 14px 14px;
}
.member__head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.callsign{
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(215,178,26,.85);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.member__role{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(240,244,255,.68);
}

.galleryGrid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.shot{
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(59,183,255,.16);
  background: rgba(7,10,16,.62);
  box-shadow: 0 22px 50px rgba(0,0,0,.42);
  grid-column: span 4;
  min-height: 220px;
}
.shot--wide{ grid-column: span 8; }
.shot::after{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--frame-line), var(--frame-line)) 0 0 / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 0 / 1px 18px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 0 / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 0 / 1px 18px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 100% / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 0 100% / 1px 18px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 100% / 18px 1px no-repeat,
    linear-gradient(var(--frame-line), var(--frame-line)) 100% 100% / 1px 18px no-repeat;
  opacity: .75;
}
.shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.06) brightness(.70);
}
.shot img.is-broken{ display: none; }
@media (max-width: 980px){
  .shot, .shot--wide{ grid-column: span 12; }
}

/* ==========================================================================
   Form
   ========================================================================== */

.field{
  display: grid;
  gap: 6px;
  margin-top: 12px;
}
.field__label{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(59,183,255,.70);
}
.input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(59,183,255,.22);
  background: rgba(6,10,16,.55);
  color: rgba(240,244,255,.90);
  padding: 12px 12px;
  font-size: 14px;
  font-family: var(--font-sans);
}
.input--area{ resize: vertical; min-height: 140px; }
.form__actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.form__note{
  font-size: 12px;
  color: rgba(240,244,255,.62);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer{
  border-top: 1px solid rgba(59,183,255,.12);
  padding: 26px 0 34px;
  background: rgba(0,0,0,.18);
}
.footer__inner{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
@media (max-width: 620px){
  .footer__inner{ flex-direction: column; }
}

/* ==========================================================================
   Reveals
   ========================================================================== */

[data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.is-visible[data-reveal]{
  opacity: 1;
  transform: translateY(0px);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

  :root{
    --dur-slow: 1ms;
    --dur-med: 1ms;
    --dur-fast: 1ms;
    --module-parallax: 0px;
  }
  [data-reveal]{ transform: none !important; }
  .module__aircraft{ transition: none; }
}

/* ==========================================================================
   Gate -> ready state
   ========================================================================== */

body.is-ready .hero__img{ transform: scale(1.00); transition: transform 1200ms var(--ease); }


.gate.is-leaving{ opacity: 0; transform: translateY(-6px); }

/* Module tuning (aircraft baseline + température) */
.module--alphajet{ --air-offset-y: clamp(12px, 2.6vh, 30px); --air-scale: 1; }
.module--rafale{ --air-offset-y: clamp(18px, 3.2vh, 44px); --air-scale: 1; }

.module--alphajet .bg__hud::before{ background: linear-gradient(90deg, rgba(215,178,26,.16), transparent 42%, rgba(215,178,26,.10)); opacity: .26; }
.module--rafale .bg__hud::before{ background: linear-gradient(90deg, rgba(59,183,255,.16), transparent 42%, rgba(59,183,255,.12)); opacity: .22; }

.module--rafale .bg__slide img{ filter: saturate(.72) contrast(1.06) brightness(.65); }