/* ================================================================
   AURA SCALPER IA — vitrine publique
   ----------------------------------------------------------------
   Marque : or #D4AF37 · noir #0D0D0D · blanc #FFFFFF · police Exo 2.
   Valeurs : Rapidite / Precision / Securite / Performance.

   Le dore de marque sert de ton d'INTERFACE (texte, liseres, icones) :
   8,6:1 sur la surface sombre, tres au-dessus du seuil de lisibilite.
   Aucun texte n'est pose sur un fond dore clair sans passer en noir.
   ================================================================ */
:root {
  color-scheme: dark;

  --plane:      #0d0d0d;
  --surf-1:     #14161c;
  --surf-2:     #1a1d25;
  --surf-3:     #21252f;

  --ink:        #ffffff;
  --ink-2:      #b6bdc9;
  --ink-3:      #7a8290;

  --gold:       #D4AF37;
  --gold-hi:    #F0D071;
  --gold-lo:    #A8801F;
  --amber:      #e8973a;

  --line:       rgba(255,255,255,.08);
  --line-gold:  rgba(212,175,55,.28);

  --good-ink:   #35d35b;
  --warn:       #fab219;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;

  --wrap: 1140px;
  --font: "Exo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth; scroll-padding-top: 84px;
  /* `clip` et non `hidden` : les halos du fond depassent volontairement
     du cadre, mais ils ne doivent jamais creer de defilement horizontal.
     `clip` coupe sans transformer l'element en conteneur de defilement. */
  overflow-x: clip;
}

body {
  margin: 0; background: var(--plane); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  overflow-x: clip;
}

img, svg { max-width: 100%; }
a { color: inherit; }
.hidden { display: none !important; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.wrap-n { max-width: 820px; }
.center { text-align: center; }

/* ================================================== fond aurora anime */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.aurora b {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(80px); opacity: .42; will-change: transform;
}
.aurora b:nth-child(1) { width: 66vmax; height: 66vmax; left: -12vmax; top: -10vmax;
  background: radial-gradient(circle, #D4AF37 0%, rgba(212,175,55,0) 68%);
  animation: dr1 36s ease-in-out infinite alternate; }
.aurora b:nth-child(2) { width: 52vmax; height: 52vmax; right: -14vmax; top: 12vmax;
  background: radial-gradient(circle, #e8973a 0%, rgba(232,151,58,0) 68%);
  animation: dr2 29s ease-in-out infinite alternate; }
.aurora b:nth-child(3) { width: 58vmax; height: 58vmax; left: 8vmax; top: 62vmax;
  background: radial-gradient(circle, #F0D071 0%, rgba(240,208,113,0) 70%);
  animation: dr3 44s ease-in-out infinite alternate; opacity: .22; }
.aurora b:nth-child(4) { width: 46vmax; height: 46vmax; right: -8vmax; bottom: -12vmax;
  background: radial-gradient(circle, #D4AF37 0%, rgba(212,175,55,0) 70%);
  animation: dr2 33s ease-in-out infinite alternate-reverse; opacity: .20; }
@keyframes dr1 { from { transform: translate3d(0,0,0) scale(1); }   to { transform: translate3d(10vmax,8vmax,0) scale(1.16); } }
@keyframes dr2 { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-12vmax,11vmax,0) scale(.9); } }
@keyframes dr3 { from { transform: translate3d(0,0,0) scale(.95); } to { transform: translate3d(9vmax,-10vmax,0) scale(1.12); } }

/* ============================================================== verre */
@property --aura-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes aura-spin { to { --aura-turn: 360deg; } }

.glass {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    rgba(20,22,28,.66);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.glass-ring::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--aura-turn),
    rgba(212,175,55,0) 0deg, rgba(212,175,55,.8) 70deg,
    rgba(240,208,113,.95) 110deg, rgba(232,151,58,.5) 165deg,
    rgba(212,175,55,0) 250deg, rgba(212,175,55,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: aura-spin 6.5s linear infinite;
}

/* apparition au defilement */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: 0; border-radius: 12px;
  font-family: inherit; font-weight: 700; font-size: 14.5px;
  text-decoration: none; cursor: pointer; transition: transform .15s, filter .15s, background .15s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn-gold {
  background: linear-gradient(140deg, var(--gold-hi), var(--gold) 55%, #b98c33);
  color: #0d0d0d; box-shadow: 0 8px 24px rgba(212,175,55,.26);
}
.btn-gold:hover { filter: brightness(1.07); }
.btn-ghost {
  background: rgba(255,255,255,.05); color: var(--ink);
  border: 1px solid var(--line-gold);
}
.btn-ghost:hover { background: rgba(212,175,55,.12); }
.btn-lg { padding: 15px 26px; font-size: 15.5px; border-radius: 14px; }
.btn-block { display: flex; width: 100%; }

/* ============================================================= header */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 18px;
  padding: 14px 22px;
  background: rgba(13,13,13,.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s, padding .25s;
}
.nav.stuck { background: rgba(13,13,13,.88); border-bottom-color: var(--line); padding: 10px 22px; }

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.logo-mark { width: 34px; height: 34px; display: block; }
.logo-mark.sm { width: 20px; height: 20px; }
.logo-txt { font-weight: 900; letter-spacing: 3.2px; font-size: 15px; line-height: 1; }
.logo-txt em {
  display: block; font-style: normal; font-weight: 500; font-size: 9px;
  letter-spacing: 2.4px; color: var(--gold); margin-top: 3px;
}

.nav-links { flex: 1; display: flex; gap: 26px; justify-content: center; }
.nav-links a {
  text-decoration: none; color: var(--ink-2); font-size: 14px; font-weight: 600;
  position: relative; padding: 4px 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--gold); transition: right .25s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }

.nav-cta { display: flex; gap: 9px; flex: none; }
.nav-cta .btn { padding: 9px 16px; font-size: 13.5px; }

.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; flex: none; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; margin: 4px 0; transition: .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* =============================================================== hero */
.hero { padding: 140px 0 70px; position: relative; }
/* halo dore derriere le titre : la marque doit se voir des la premiere seconde */
.hero::before {
  content: ""; position: absolute; inset: -10% -20% 30%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 52% at 28% 34%, rgba(212,175,55,.20), transparent 70%);
}
.hero-grid { display: grid; gap: 46px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.08fr .92fr; gap: 54px; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gold); padding: 7px 14px; border-radius: 999px;
  background: rgba(212,175,55,.10); border: 1px solid var(--line-gold);
}
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--good-ink);
  box-shadow: 0 0 0 0 rgba(53,211,91,.55); animation: blip 2.2s infinite; }
@keyframes blip {
  0% { box-shadow: 0 0 0 0 rgba(53,211,91,.5); }
  70% { box-shadow: 0 0 0 9px rgba(53,211,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,211,91,0); }
}

.hero h1 {
  font-size: clamp(46px, 9vw, 82px); line-height: .96; font-weight: 900;
  letter-spacing: -1.5px; margin: 20px 0 12px;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--gold-hi), var(--gold) 45%, var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline {
  font-size: 13px; font-weight: 800; letter-spacing: 4.5px; color: var(--gold);
  margin: 0 0 20px; text-transform: uppercase;
}
.lede { font-size: 17px; color: var(--ink-2); margin: 0 0 28px; max-width: 44ch; }
.lede strong { color: var(--ink); font-weight: 700; }

.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.hero-vals { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px 22px; grid-template-columns: 1fr 1fr; }
.hero-vals li { border-left: 2px solid var(--line-gold); padding-left: 13px; }
.hero-vals b { display: block; font-size: 13.5px; letter-spacing: .4px; }
.hero-vals span { display: block; font-size: 12px; color: var(--ink-3); }

/* maquette produit */
.hero-visual { display: grid; gap: 16px; justify-items: center; }
.phone { width: 100%; max-width: 330px; border-radius: var(--r-lg); padding: 18px 16px 16px; overflow: hidden; }
.ph-top { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.ph-top .live-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--good-ink); animation: blip 2.2s infinite; }
.ph-hero { text-align: center; padding: 20px 0 14px; }
.ph-k { display: block; font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.ph-v { display: block; font-size: 38px; font-weight: 800; letter-spacing: -1px; color: var(--good-ink); margin: 6px 0 14px; font-variant-numeric: tabular-nums; }
.ph-bar { height: 7px; border-radius: 999px; background: var(--surf-3); overflow: hidden; }
.ph-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--good-ink)); transition: width .9s ease; }
.ph-legend { display: flex; justify-content: space-between; margin-top: 7px; }
.ph-legend em { font-style: normal; font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ph-rows { display: grid; gap: 7px; margin-top: 6px; }
.ph-row { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 11px; background: rgba(255,255,255,.04); }
.ph-row b { flex: 1; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.ph-row i.on { width: 26px; height: 15px; border-radius: 999px; background: rgba(212,175,55,.3); position: relative; flex: none; }
.ph-row i.on::after { content: ""; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); }
.tagm { font-size: 9.5px; font-weight: 900; letter-spacing: .8px; color: var(--gold); background: rgba(212,175,55,.14); padding: 4px 7px; border-radius: 7px; flex: none; }
.tagm.new { color: var(--amber); background: rgba(232,151,58,.16); }
.ph-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); }
.ph-foot b { color: var(--gold); font-size: 17px; }
.ph-foot em { font-style: normal; font-size: 10.5px; color: var(--ink-3); }

.ticker { width: 100%; max-width: 330px; padding: 13px 15px; border-radius: var(--r-sm); }
.tk-k { display: block; font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.tk-v { display: block; font-size: 13px; font-weight: 600; margin: 4px 0 9px; }
.tk-gauge { height: 5px; border-radius: 999px; background: var(--surf-3); overflow: hidden; }
.tk-gauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-lo), var(--gold), var(--amber)); transition: width 1.1s ease; }

/* ============================================================ sections */
.sec { padding: 78px 0; position: relative; }
.sec.alt::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0));
  border-block: 1px solid var(--line);
}
.sec h2 {
  font-size: clamp(27px, 4.4vw, 40px); font-weight: 800; letter-spacing: -.8px;
  margin: 0 0 14px; text-align: center;
}
.sec-sub { text-align: center; color: var(--ink-2); max-width: 62ch; margin: 0 auto 42px; font-size: 15.5px; }

.grid-3 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card { padding: 24px 22px; }
.card .ic {
  font-size: 12px; font-weight: 900; letter-spacing: 1.5px; color: var(--gold);
  margin-bottom: 12px;
}
.card h3 { font-size: 17.5px; font-weight: 700; margin: 0 0 9px; letter-spacing: -.2px; }
.card p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.card p b { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------- technologie */
.tech { display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 34px; }
@media (min-width: 940px) { .tech { grid-template-columns: repeat(3, 1fr); } }
.tech-i { padding: 26px 22px; }
.tech-b {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold);
  background: rgba(212,175,55,.11); border: 1px solid var(--line-gold);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 14px;
}
.tech-i h3 { font-size: 18px; margin: 0 0 10px; font-weight: 700; }
.tech-i p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.tech-i p b { color: var(--ink); }

.pillars {
  display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillars div { padding: 20px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.pillars b { display: block; font-size: 30px; font-weight: 900; color: var(--gold); letter-spacing: -1px; }
.pillars span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* ------------------------------------------------------------ moteurs */
.engines { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .engines { grid-template-columns: 1fr 1fr; } }
/* six moteurs : trois par rangee remplissent exactement deux lignes.
   A quatre colonnes, la seconde rangee laissait un vide de la moitie de
   la largeur. */
@media (min-width: 1040px) { .engines { grid-template-columns: repeat(3, 1fr); } }
.eng { padding: 24px 20px; position: relative; }
.eng-t {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
  font-weight: 900; font-size: 15px; letter-spacing: .8px; color: var(--gold);
  background: rgba(212,175,55,.12); border: 1px solid var(--line-gold); margin-bottom: 15px;
}
.eng h3 { font-size: 16px; margin: 0 0 8px; font-weight: 700; }
.eng p { margin: 0; font-size: 13.8px; color: var(--ink-2); }
.eng p b { color: var(--ink); }
.eng.is-new { border-color: rgba(232,151,58,.4); }
.eng.is-new .eng-t { color: var(--amber); background: rgba(232,151,58,.14); border-color: rgba(232,151,58,.35); }
.eng-new {
  position: absolute; top: 16px; right: 16px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: #0d0d0d; background: var(--amber); padding: 4px 9px; border-radius: 999px;
}

/* ----------------------------------------------------------- securite */
.grid-4 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.safe { padding: 18px 17px; }
.safe b { display: block; font-size: 14px; margin-bottom: 6px; }
.safe span { display: block; font-size: 13px; color: var(--ink-2); }

/* ------------------------------------------------------------- preuve */
.honest {
  display: flex; gap: 15px; align-items: flex-start; padding: 20px 20px;
  border-color: rgba(250,178,25,.34); margin-bottom: 26px;
}
.honest-ic {
  width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: rgba(250,178,25,.15); color: var(--warn); font-weight: 900;
}
.honest strong { display: block; font-size: 14px; margin-bottom: 6px; color: var(--warn); }
.honest p { margin: 0; font-size: 14px; color: var(--ink-2); }
.honest p b { color: var(--ink); }

.mfx { display: grid; gap: 13px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .mfx { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .mfx { grid-template-columns: repeat(3, 1fr); } }
.mfx-i {
  display: flex; align-items: center; gap: 13px; padding: 16px 17px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: rgba(255,255,255,.03); text-decoration: none; transition: .18s;
  min-width: 0;   /* sinon l'URL en nowrap elargit la page entiere */
}
.mfx-i:hover { border-color: var(--line-gold); background: rgba(212,175,55,.07); }
.mfx-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: rgba(212,175,55,.12); color: var(--gold); font-weight: 900; font-size: 12px;
}
.mfx-t { flex: 1; min-width: 0; }
.mfx-t strong { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfx-t span { display: block; font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfx-go { color: var(--gold); font-size: 13px; font-weight: 700; flex: none; }
.mfx-empty {
  grid-column: 1 / -1; text-align: center; padding: 26px 18px; border-radius: var(--r-sm);
  border: 1px dashed var(--line-gold); color: var(--ink-3); font-size: 13.5px;
}

/* ------------------------------------------------------------- offres */
.offers { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .offers { grid-template-columns: 1fr 1fr; gap: 24px; } }
.offer { padding: 28px 26px; }
.offer.featured { border-color: var(--line-gold); }
.offer-tag {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-3); background: rgba(255,255,255,.06);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.offer-tag.gold { color: #0d0d0d; background: linear-gradient(140deg, var(--gold-hi), var(--gold)); }
.offer h3 { font-size: 25px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.5px; }
.offer-price { margin: 0 0 14px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.offer-price b { font-size: 28px; font-weight: 900; color: var(--gold); letter-spacing: -.8px; }
.offer-price em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.offer-cond { margin: 0 0 18px; font-size: 14px; color: var(--ink-2); }
.offer-cond b { color: var(--ink); }
.offer-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.offer-list li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink-2); }
.offer-list li b { color: var(--ink); }
.offer-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 900; font-size: 13px;
}
.offer-add {
  padding: 16px 16px; border-radius: var(--r-sm); margin-bottom: 20px;
  background: rgba(212,175,55,.07); border: 1px solid var(--line-gold);
}
.offer-add strong { display: block; font-size: 13.5px; margin-bottom: 5px; }
.offer-add p { margin: 0 0 9px; font-size: 13px; color: var(--ink-2); }
.offer-add p b { color: var(--ink); }
.offer-add-p { font-size: 13px; color: var(--ink-3); }
.offer-add-p b { font-size: 20px; color: var(--gold); font-weight: 900; margin-right: 5px; }

.offer-foot { text-align: center; margin: 34px auto 0; max-width: 60ch; color: var(--ink-2); font-size: 14.5px; }
.tg {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 6px;
  padding: 8px 15px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px;
  background: linear-gradient(140deg, #38b0e3, #1d8ec4); color: #06212e;
}
.tg:hover { filter: brightness(1.08); }

/* -------------------------------------------------------- installation */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: st; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li {
  display: flex; gap: 14px; align-items: flex-start; padding: 20px 18px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255,255,255,.025);
}
.steps li > b {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: rgba(212,175,55,.14); color: var(--gold); font-weight: 900; font-size: 13px;
}
.steps strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.steps span { display: block; font-size: 13px; color: var(--ink-2); }

/* -------------------------------------------------------------- acces */
.access { display: grid; gap: 34px; align-items: center; }
@media (min-width: 960px) { .access { grid-template-columns: 1fr 400px; gap: 50px; } }
.access h2 { text-align: left; margin-bottom: 14px; }
.access-copy p { color: var(--ink-2); font-size: 15.5px; margin: 0 0 20px; }
.access-pts { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.access-pts li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--ink-2); }
.access-pts li::before { content: "→"; position: absolute; left: 0; color: var(--gold); font-weight: 800; }

.access-card, .modal-card { padding: 28px 24px 24px; border-radius: var(--r-lg); }
.ac-brand { display: flex; align-items: center; gap: 11px; justify-content: center; margin-bottom: 22px; }
.ac-brand span { font-weight: 900; letter-spacing: 3px; font-size: 15px; line-height: 1; }
.ac-brand em { display: block; font-style: normal; font-weight: 500; font-size: 9px; letter-spacing: 2.2px; color: var(--gold); margin-top: 3px; }

.tabs { display: flex; gap: 4px; padding: 4px; background: rgba(255,255,255,.05); border-radius: 12px; margin-bottom: 20px; }
.tabs button {
  flex: 1; padding: 10px 0; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--ink-2); font-family: inherit; font-weight: 700; font-size: 13.5px;
  transition: .15s;
}
.tabs button[aria-selected="true"] { background: rgba(212,175,55,.16); color: var(--gold); }

.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--ink-3); margin-bottom: 7px; font-weight: 700;
}
.field input {
  width: 100%; padding: 13px 14px; font-family: inherit; font-size: 15px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: 12px; color: var(--ink); outline: none; transition: .15s;
}
.field input:focus { border-color: var(--gold); background: rgba(212,175,55,.07); }
.field .hint { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }

.msg { margin-top: 14px; font-size: 13.5px; padding: 11px 13px; border-radius: 11px; display: none; }
.msg.show { display: block; }
.msg.err { background: rgba(208,59,59,.14); color: #ff6b6b; border: 1px solid rgba(208,59,59,.32); }
.msg.ok  { background: rgba(12,163,12,.14); color: var(--good-ink); border: 1px solid rgba(12,163,12,.32); }
.ac-foot { text-align: center; font-size: 12.5px; color: var(--ink-3); margin: 16px 0 0; }
.ac-foot a { color: var(--gold); font-weight: 600; }

/* ---------------------------------------------------------------- faq */
.qa {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(255,255,255,.025); margin-bottom: 10px; overflow: hidden;
}
.qa summary {
  cursor: pointer; padding: 17px 19px; font-weight: 700; font-size: 15px;
  list-style: none; display: flex; align-items: center; gap: 12px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; margin-left: auto; color: var(--gold); font-size: 20px; font-weight: 400;
  transition: transform .2s; line-height: 1;
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa[open] { border-color: var(--line-gold); }
.qa p { margin: 0; padding: 0 19px 18px; color: var(--ink-2); font-size: 14.5px; }
.qa p b { color: var(--ink); }

/* ------------------------------------------------------------- footer */
.foot { padding: 50px 0 40px; border-top: 1px solid var(--line); background: rgba(0,0,0,.35); }
.foot-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 28px; }
.foot-brand { display: flex; align-items: center; gap: 12px; }
.foot-brand strong { display: block; font-size: 14px; letter-spacing: 2px; font-weight: 800; }
.foot-brand span { display: block; font-size: 11.5px; color: var(--gold); letter-spacing: 1.4px; }
.risk { font-size: 12px; color: var(--ink-3); line-height: 1.65; margin: 0 0 20px; }
.risk b { color: var(--ink-2); }
.copy { font-size: 12px; color: var(--ink-3); margin: 0; }
.copy a { color: var(--gold); text-decoration: none; }

/* ============================================================ mobile */
@media (max-width: 900px) {
  .nav { padding: 11px 16px; gap: 10px; }
  .nav.stuck { padding: 9px 16px; }
  .nav-cta { margin-left: auto; }
  .nav-cta .btn { padding: 9px 14px; font-size: 12.5px; }
  .logo-txt { font-size: 13.5px; letter-spacing: 2.6px; }
  .eyebrow { font-size: 10.5px; letter-spacing: 1.2px; padding: 6px 12px; }
  .nav-links {
    position: fixed; inset: 58px 0 auto; flex-direction: column; gap: 0;
    background: rgba(13,13,13,.97); border-bottom: 1px solid var(--line);
    padding: 8px 22px 18px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .nav-cta .btn-ghost { display: none; }
  .burger { display: block; }
  .nav { justify-content: space-between; }
  .hero { padding: 118px 0 54px; }
  .sec { padding: 60px 0; }
  .access h2 { text-align: center; }
}
@media (max-width: 420px) {
  .hero-vals { grid-template-columns: 1fr; }
  .btn-lg { width: 100%; }
}

/* Le respect de « reduire les animations » est traite en UN SEUL endroit,
   tout en bas du fichier. Il etait auparavant eclate en trois blocs dont un
   `* { transition-duration: .01ms }` qui figeait absolument tout, fondus
   compris : la page paraissait cassee plutot que calme. */

/* ================================================================
   FENETRE DE CONNEXION — un seul point d'entree pour tout le site
   ================================================================ */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-back {
  position: absolute; inset: 0; background: rgba(4,4,4,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .2s ease;
}
.modal-card {
  position: relative; width: 100%; max-width: 410px; max-height: 92vh; overflow-y: auto;
  animation: popIn .28s cubic-bezier(.16,1,.3,1);
}
.modal-x {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 32px; height: 32px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 19px; line-height: 1; font-family: inherit;
}
.modal-x:hover { background: rgba(212,175,55,.14); color: var(--gold); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* maquette du selecteur de comptes, cote section Acces */
.shot { padding: 18px 16px 16px; border-radius: var(--r-lg); }
.shot-top {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.6px; color: var(--ink-3);
}
.shot-accs { display: grid; gap: 8px; }
.shot-acc {
  display: grid; grid-template-columns: 8px 1fr; gap: 10px; align-items: center;
  padding: 11px 13px; border-radius: 12px;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
}
.shot-acc i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); grid-row: span 2;
}
.shot-acc b { font-size: 13px; }
.shot-acc em { font-style: normal; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.shot-acc.on {
  border-color: rgba(212,175,55,.5);
  background: linear-gradient(180deg, rgba(212,175,55,.12), rgba(212,175,55,.03));
}
.shot-acc.on i { background: var(--good-ink); box-shadow: 0 0 8px rgba(53,211,91,.6); }
.shot-acc.on b { color: var(--gold); }
.shot-note { margin-top: 14px; font-size: 11.5px; color: var(--ink-3); text-align: center; }

/* ================================================================
   PARC EN DIRECT — compteurs agreges
   ================================================================ */
.parc { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .parc { grid-template-columns: repeat(4, 1fr); } }
.parc-i {
  padding: 26px 14px; text-align: center; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(255,255,255,.028);
  transition: border-color .25s, transform .25s;
}
.parc-i:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.parc-i b {
  display: block; font-size: 38px; font-weight: 900; letter-spacing: -1.4px;
  color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1;
}
.parc-i span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.parc-note { text-align: center; font-size: 12.5px; color: var(--ink-3); margin: 20px auto 0; max-width: 62ch; }

/* ================================================================
   ANIMATIONS — PC et mobile
   ----------------------------------------------------------------
   Tout passe par transform et opacity : ce sont les deux seules
   proprietes que le navigateur sait animer sans recalculer la mise
   en page. Sur mobile, la parallaxe est coupee (elle coute un
   recalcul a chaque pixel de defilement pour un effet invisible sur
   un petit ecran).
   ================================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* les cartes se soulevent au survol, la ou il y a un curseur */
@media (hover: hover) {
  .card.glass, .tech-i, .eng, .safe, .offer {
    transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s;
  }
  .card.glass:hover, .tech-i:hover, .eng:hover, .safe:hover {
    transform: translateY(-4px);
    border-color: var(--line-gold);
    box-shadow: 0 22px 48px rgba(0,0,0,.5);
  }
  .offer:hover { transform: translateY(-5px); box-shadow: 0 26px 56px rgba(0,0,0,.55); }
  .btn-gold:hover { transform: translateY(-1px); }
}

/* le visuel du hero suit tres legerement la souris */
.hero-visual { transition: transform .5s cubic-bezier(.16,1,.3,1); will-change: transform; }

/* la maquette respire */
@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}
@media (min-width: 960px) and (hover: hover) {
  .phone { animation: float 5s ease-in-out infinite alternate; }
}

/* le titre du hero apparait mot par mot */
.hero h1 .grad { display: inline-block; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero-copy.in h1 { animation: riseIn .7s cubic-bezier(.16,1,.3,1) both; }
.hero-copy.in .tagline { animation: riseIn .7s cubic-bezier(.16,1,.3,1) .12s both; }
.hero-copy.in .lede { animation: riseIn .7s cubic-bezier(.16,1,.3,1) .2s both; }
.hero-copy.in .hero-btns { animation: riseIn .7s cubic-bezier(.16,1,.3,1) .28s both; }
.hero-copy.in .hero-vals li { animation: riseIn .6s cubic-bezier(.16,1,.3,1) both; }
.hero-copy.in .hero-vals li:nth-child(1) { animation-delay: .34s; }
.hero-copy.in .hero-vals li:nth-child(2) { animation-delay: .40s; }
.hero-copy.in .hero-vals li:nth-child(3) { animation-delay: .46s; }
.hero-copy.in .hero-vals li:nth-child(4) { animation-delay: .52s; }

/* barre de progression de lecture, en haut de page */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 70; width: 0;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold), var(--gold-hi));
  box-shadow: 0 0 10px rgba(212,175,55,.6);
}


/* ================================================================
   PAGE DE CONNEXION (/connexion)
   ----------------------------------------------------------------
   Deux colonnes sur grand ecran : l'argumentaire a gauche, le
   formulaire a droite. Sur mobile, le formulaire passe EN PREMIER —
   quelqu'un qui arrive ici veut se connecter, pas relire une promesse.
   ================================================================ */
.auth-body { min-height: 100dvh; }
.auth-wrap {
  max-width: var(--wrap); margin: 0 auto; padding: 108px 20px 60px;
  display: grid; gap: 34px; align-items: center;
}
.auth-side { order: 2; }
.auth-card { order: 1; padding: 30px 26px; }
@media (min-width: 980px) {
  .auth-wrap { grid-template-columns: 1.05fr .95fr; gap: 54px; padding-top: 132px; min-height: 100dvh; }
  .auth-side { order: 1; }
  .auth-card { order: 2; max-width: 440px; justify-self: end; width: 100%; }
}
.auth-side h1 { font-size: clamp(34px, 6vw, 54px); line-height: .98; margin: 16px 0 14px; letter-spacing: -2px; font-weight: 900; }
.auth-side .lede { font-size: 15.5px; color: var(--ink-2); max-width: 46ch; }
.auth-pts { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
@media (min-width: 620px) { .auth-pts { grid-template-columns: 1fr 1fr; } }
.auth-pts li { border-left: 2px solid var(--line-gold); padding-left: 13px; }
.auth-pts b { display: block; font-size: 13.5px; }
.auth-pts span { font-size: 12.5px; color: var(--ink-3); }

/* ================================================================
   PAGE DE DEMARRAGE (/demarrer)
   ================================================================ */
.start-hero { padding-top: 128px; }
.start-hero h1 { font-size: clamp(38px, 7vw, 66px); line-height: .95; margin: 16px 0 16px; letter-spacing: -2.4px; font-weight: 900; }

.steps-map {
  list-style: none; padding: 0; margin: 44px 0 0;
  display: grid; gap: 12px; counter-reset: none;
}
@media (min-width: 780px) { .steps-map { grid-template-columns: repeat(4, 1fr); } }
.steps-map li {
  position: relative; padding: 18px 16px 16px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(255,255,255,.028);
  transition: border-color .3s, transform .3s, background .3s;
}
.steps-map li:hover { border-color: var(--line-gold); transform: translateY(-3px); background: rgba(212,175,55,.05); }
.steps-map span {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px;
  border-radius: 9px; font-size: 12.5px; font-weight: 900; color: #0d0d0d;
  background: linear-gradient(140deg, var(--gold-hi), var(--gold));
}
.steps-map b { display: block; font-size: 14.5px; }
.steps-map i { font-style: normal; font-size: 12.5px; color: var(--ink-3); }

.step-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 26px; }
.step-n {
  flex: none; font-size: 44px; font-weight: 900; line-height: .9; letter-spacing: -2px;
  background: linear-gradient(160deg, var(--gold-hi), var(--gold-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step-head h2 { margin: 0 0 4px; }
.step-head .sec-sub { margin: 0; text-align: left; }

.two-col { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }

.stepcard { padding: 26px 24px; }
.stepcard h3 { margin: 0 0 10px; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.stepcard h3 em { font-style: normal; color: var(--gold); }
.stepcard > p { margin: 0 0 16px; font-size: 14.2px; color: var(--ink-2); }
.stepcard > p b { color: var(--ink); }
.sc-tag {
  display: inline-block; margin-bottom: 12px; padding: 5px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold); background: rgba(212,175,55,.13); border: 1px solid var(--line-gold);
}
.sc-tag.alt { color: var(--amber); background: rgba(232,151,58,.13); border-color: rgba(232,151,58,.34); }
.sc-ic {
  display: inline-grid; place-items: center; min-width: 46px; height: 34px; padding: 0 10px;
  margin-bottom: 12px; border-radius: 10px; font-size: 12.5px; font-weight: 900; letter-spacing: 1px;
  color: var(--gold); background: rgba(212,175,55,.13); border: 1px solid var(--line-gold);
}
.sc-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); }

.ib-box { display: grid; gap: 1px; border-radius: var(--r-sm); overflow: hidden; background: var(--line); margin-bottom: 18px; }
.ib-row {
  display: grid; grid-template-columns: 128px 1fr auto; gap: 10px; align-items: center;
  padding: 12px 14px; background: rgba(255,255,255,.035); font-size: 13.5px;
}
.ib-row > span { color: var(--ink-3); font-size: 12px; }
.ib-row > b { min-width: 0; overflow-wrap: anywhere; }
.ib-id b { font-size: 19px; font-weight: 900; color: var(--gold); letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.ib-txt b { font-size: 12.8px; color: var(--ink-2); font-weight: 500; }
@media (max-width: 560px) { .ib-row { grid-template-columns: 1fr auto; } .ib-row > span { grid-column: 1 / -1; } }

.btn-copy {
  flex: none; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 7px 12px; border-radius: 9px; color: var(--gold);
  background: rgba(212,175,55,.12); border: 1px solid var(--line-gold);
  transition: background .2s, color .2s, transform .15s;
}
.btn-copy:hover { background: rgba(212,175,55,.22); }
.btn-copy:active { transform: scale(.95); }
.btn-copy.done { color: var(--good-ink); background: rgba(53,211,91,.14); border-color: rgba(53,211,91,.34); }

.vid { margin: 0 0 4px; }
.vid video { width: 100%; display: block; border-radius: var(--r-sm); border: 1px solid var(--line); background: #000; }
.vid figcaption { margin-top: 9px; font-size: 12.3px; color: var(--ink-3); }
.vid figcaption b { color: var(--warn); }

.warn {
  margin: 22px 0 0; padding: 15px 17px; border-radius: var(--r-sm); font-size: 13.8px; color: var(--ink-2);
  background: rgba(250,178,25,.08); border: 1px solid rgba(250,178,25,.28);
}
.warn b { color: var(--ink); }

.of-price { margin: 0 0 16px; font-size: 27px; font-weight: 900; color: var(--gold); letter-spacing: -.8px; }
.of-price em { font-style: normal; font-size: 13px; color: var(--ink-3); font-weight: 500; }
.of-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.of-list li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink-2); }
.of-list li b { color: var(--ink); }
.of-list li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; color: var(--gold); font-weight: 900; font-size: 13px;
}
.of-flag {
  position: absolute; top: -11px; right: 20px; padding: 5px 12px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: #0d0d0d; background: linear-gradient(140deg, var(--gold-hi), var(--gold));
}
.center-offer { max-width: 560px; margin: 0 auto; }
.vps-hint {
  margin: 0 0 18px; padding: 14px 15px; border-radius: var(--r-sm); font-size: 13.2px; color: var(--ink-2);
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
}
.vps-hint b { color: var(--ink); }

.radios legend { font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--ink-2); margin-bottom: 9px; padding: 0; text-transform: none; }
.radios { border: 0; padding: 0; margin-bottom: 14px; }
/* `.radio` est un <label> DANS un .field : la regle `.field label` (0,1,1)
   bat un simple `.radio` (0,1,0) et lui imposait display:block, d'ou le bouton
   radio rejete sur sa propre ligne. On repasse devant avec deux classes. */
.radios .radio {
  display: flex; align-items: center; gap: 11px; cursor: pointer; margin-bottom: 8px;
  padding: 12px 14px; border-radius: var(--r-sm); font-weight: 400;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  transition: border-color .2s, background .2s;
}
.radios .radio:hover { border-color: var(--line-gold); }
/* `.field input` impose width:100% et un gros remplissage : applique a un
   bouton radio, il occupe toute la ligne et rejette le texte en dessous.
   On le neutralise explicitement, avec la specificite qu'il faut. */
.radios .radio input[type="radio"] {
  accent-color: var(--gold);
  width: 17px; height: 17px; min-width: 17px; flex: none;
  padding: 0; margin: 0; border-radius: 50%; background: none; border: 0;
}
.radio > span { flex: 1; min-width: 0; }
/* Ces deux lignes sont du texte de phrase, pas une etiquette de champ :
   elles ne doivent pas heriter du `text-transform: uppercase` de .field label. */
.radios .radio, .radio b, .radio i {
  text-transform: none; letter-spacing: normal;
}
.radio b { display: block; font-size: 13.6px; color: var(--ink); font-weight: 700; }
.radio i { font-style: normal; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.radios .radio:has(input:checked) { border-color: var(--line-gold); background: rgba(212,175,55,.08); }

.after-list { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.after-list li { font-size: 13.8px; color: var(--ink-2); }
.after-list li b { color: var(--ink); }
.after-list li::marker { color: var(--gold); font-weight: 900; }
.reassure {
  margin-top: 20px; padding: 14px 15px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink-2);
  background: rgba(53,211,91,.07); border: 1px solid rgba(53,211,91,.24);
}
.reassure b { color: var(--ink); }

.done { margin-top: 22px; padding: 34px 26px; text-align: center; border-radius: var(--r-lg); }
.done-ic {
  display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px;
  border-radius: 50%; font-size: 25px; color: #0d0d0d; font-weight: 900;
  background: linear-gradient(140deg, var(--gold-hi), var(--gold));
  animation: popIn .5s cubic-bezier(.16,1,.3,1) both;
}
.done h3 { margin: 0 0 14px; font-size: 23px; font-weight: 800; }
.done-key { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0 0 12px; }
.done-key code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; letter-spacing: 1px;
  padding: 11px 15px; border-radius: 11px; color: var(--gold); overflow-wrap: anywhere;
  background: rgba(212,175,55,.1); border: 1px solid var(--line-gold);
}
.done-state { margin: 0 0 20px; font-size: 13.5px; color: var(--ink-2); max-width: 56ch; margin-inline: auto; }

/* ================================================================
   PREUVE — quatre engagements verifiables
   ================================================================ */
.proof-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 20px; }
@media (min-width: 820px) { .proof-grid { grid-template-columns: 1fr 1fr; } }
.proof { padding: 24px 22px; }
.proof-n {
  display: block; font-size: 12px; font-weight: 900; letter-spacing: 2px; margin-bottom: 10px;
  color: var(--gold); opacity: .75;
}
.proof strong { display: block; font-size: 16.5px; margin-bottom: 8px; font-weight: 800; }
.proof p { margin: 0; font-size: 13.8px; color: var(--ink-2); }
.proof p b { color: var(--ink); }

/* ================================================================
   ANIMATIONS — deuxieme couche, nettement plus visible
   ----------------------------------------------------------------
   Tout ce qui bouge ici passe par `transform` et `opacity` : ce sont
   les deux seules proprietes que le navigateur anime sans recalculer
   la mise en page, donc les seules qui restent fluides sur un
   telephone d'entree de gamme.

   Un point important pour les reglages d'accessibilite : quand
   « reduire les animations » est actif (Windows le coupe parfois tout
   seul en mode economie d'energie), on ne supprime plus TOUT — la page
   avait alors l'air morte, sans que personne comprenne pourquoi. On
   garde les fondus, on retire les deplacements, les boucles infinies
   et la parallaxe. Voir le bloc en fin de fichier.
   ================================================================ */

/* --- l'aurore respire plus franchement */
.aurora b:nth-child(1) { opacity: .55; animation-duration: 22s; }
.aurora b:nth-child(2) { opacity: .48; animation-duration: 18s; }
.aurora b:nth-child(3) { opacity: .30; animation-duration: 27s; }
.aurora b:nth-child(4) { opacity: .28; animation-duration: 20s; }

/* --- voile de lumiere qui balaie la page, tres lentement */
.aurora::after {
  content: ""; position: absolute; inset: -30%;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(212,175,55,.09) 40deg, transparent 110deg,
    transparent 250deg, rgba(232,151,58,.07) 300deg, transparent 360deg);
  animation: sweep 26s linear infinite;
  will-change: transform;
}
@keyframes sweep { to { transform: rotate(360deg); } }

/* --- apparitions : variantes directionnelles + cascade automatique */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in { opacity: 1; transform: none; }
.reveal { transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal[data-rev="left"]  { transform: translateX(-34px); }
.reveal[data-rev="right"] { transform: translateX(34px); }
.reveal[data-rev="zoom"]  { transform: scale(.92); }
.reveal[data-rev="blur"]  { filter: blur(9px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1), filter .7s ease; }
.reveal.in[data-rev="blur"] { filter: none; }

/* la cascade : chaque enfant direct d'une grille part un cran plus tard */
.engines > .reveal:nth-child(n),
.proof-grid > .reveal:nth-child(n),
.grid-3 > .reveal:nth-child(n),
.grid-4 > .reveal:nth-child(n),
.steps-map.in li,
.parc.in .parc-i,
.auth-pts li { --d: 0ms; }
.engines > .reveal:nth-child(2) { transition-delay: 80ms; }
.engines > .reveal:nth-child(3) { transition-delay: 160ms; }
.engines > .reveal:nth-child(4) { transition-delay: 240ms; }
.engines > .reveal:nth-child(5) { transition-delay: 320ms; }
.engines > .reveal:nth-child(6) { transition-delay: 400ms; }
.proof-grid > .reveal:nth-child(2) { transition-delay: 90ms; }
.proof-grid > .reveal:nth-child(3) { transition-delay: 180ms; }
.proof-grid > .reveal:nth-child(4) { transition-delay: 270ms; }
.grid-3 > .reveal:nth-child(2) { transition-delay: 90ms; }
.grid-3 > .reveal:nth-child(3) { transition-delay: 180ms; }

/* les enfants d'une liste revelee montent un par un */
@keyframes stepIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.steps-map.in li { animation: stepIn .6s cubic-bezier(.16,1,.3,1) both; }
.steps-map.in li:nth-child(1) { animation-delay: .05s; }
.steps-map.in li:nth-child(2) { animation-delay: .15s; }
.steps-map.in li:nth-child(3) { animation-delay: .25s; }
.steps-map.in li:nth-child(4) { animation-delay: .35s; }
.parc.in .parc-i { animation: stepIn .6s cubic-bezier(.16,1,.3,1) both; }
.parc.in .parc-i:nth-child(2) { animation-delay: .1s; }
.parc.in .parc-i:nth-child(3) { animation-delay: .2s; }
.parc.in .parc-i:nth-child(4) { animation-delay: .3s; }
.auth-pts li { animation: stepIn .6s cubic-bezier(.16,1,.3,1) both; }
.auth-pts li:nth-child(2) { animation-delay: .08s; }
.auth-pts li:nth-child(3) { animation-delay: .16s; }
.auth-pts li:nth-child(4) { animation-delay: .24s; }

/* --- le titre du hero : degrade qui coule en continu */
.hero h1 .grad, .auth-side h1 .grad, .start-hero h1 .grad {
  background: linear-gradient(100deg,
    var(--gold-lo) 0%, var(--gold) 22%, var(--gold-hi) 38%,
    #fff6d6 48%, var(--gold-hi) 58%, var(--gold) 78%, var(--gold-lo) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 7s linear infinite;
}
@keyframes shine { to { background-position: -280% 0; } }

/* --- soulignement dore qui se dessine sous chaque titre de section */
.sec h2 { position: relative; display: inline-block; }
.sec h2::after {
  content: ""; position: absolute; left: 0; bottom: -9px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), rgba(212,175,55,0));
  transition: width .9s cubic-bezier(.16,1,.3,1) .15s;
}
.sec h2.reveal.in::after { width: 74px; }

/* --- eclat qui traverse les cartes au survol */
@media (hover: hover) {
  .glass { overflow: hidden; }
  .glass::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    pointer-events: none; opacity: 0; transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  }
  .eng:hover::after, .proof:hover::after, .stepcard:hover::after,
  .offer:hover::after, .safe:hover::after {
    animation: sheen .85s ease-out;
  }
  @keyframes sheen {
    from { opacity: 0; left: -60%; }
    30%  { opacity: 1; }
    to   { opacity: 0; left: 115%; }
  }
  /* les cartes se soulevent un peu plus franchement */
  .eng:hover, .proof:hover, .stepcard:hover { transform: translateY(-5px); }
}

/* --- la pastille "en ligne" pulse vraiment */
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53,211,91,.55); }
  60%      { box-shadow: 0 0 0 9px rgba(53,211,91,0); }
}
.ph-top .live-dot { animation: pulseDot 2.2s ease-out infinite; }

/* --- la maquette flotte aussi sur tablette, plus seulement sur grand ecran */
@media (min-width: 720px) and (hover: hover) {
  .phone { animation: float 5s ease-in-out infinite alternate; }
}

/* --- l'oeil est attire vers le bas du hero */
.scrollcue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: grid; place-items: center; gap: 7px; pointer-events: none;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3);
  animation: cueIn 1s ease .9s both;
}
.scrollcue i {
  display: block; width: 20px; height: 32px; border-radius: 11px; border: 1px solid var(--line-gold);
  position: relative;
}
.scrollcue i::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 6px; border-radius: 2px;
  margin-left: -1.5px; background: var(--gold); animation: cueDot 1.9s ease-in-out infinite;
}
@keyframes cueDot { 0%,100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(11px); opacity: .15; } }
@keyframes cueIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-height: 720px) { .scrollcue { display: none; } }

/* --- bandeau defilant des moteurs */
.marquee {
  overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02); padding: 13px 0; margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-in { display: flex; gap: 34px; width: max-content; animation: slide 26s linear infinite; }
.marquee span {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3);
}
.marquee span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.marquee span b { color: var(--gold); font-weight: 800; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (hover: hover) { .marquee:hover .marquee-in { animation-play-state: paused; } }

/* --- barre de progression de lecture, sur toutes les pages qui l'ont */
.progress { transition: width .12s linear; }

/* ================================================================
   REDUIRE LES ANIMATIONS — on garde la page VIVANTE, sans mouvement
   ----------------------------------------------------------------
   La regle precedente coupait absolument tout, y compris les fondus :
   avec « animations desactivees » dans Windows, la page devenait
   entierement figee et donnait l'impression d'un site casse. On
   supprime donc ce qui bouge (deplacements, boucles, parallaxe,
   defilement automatique) et on conserve ce qui ne bouge pas : les
   fondus d'apparition et les changements de couleur.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .aurora b, .aurora::after, .eyebrow i, .ph-top .live-dot,
  .phone, .marquee-in, .scrollcue, .scrollcue i::after,
  .hero h1 .grad, .auth-side h1 .grad, .start-hero h1 .grad {
    animation: none !important;
  }
  /* le degrade du titre reste dore, simplement immobile */
  .hero h1 .grad, .auth-side h1 .grad, .start-hero h1 .grad { background-position: 0 0; }
  .scrollcue { display: none; }

  /* les apparitions restent, en fondu seul */
  .reveal { transform: none !important; filter: none !important; transition: opacity .45s ease !important; }
  .steps-map.in li, .parc.in .parc-i, .auth-pts li { animation: none !important; opacity: 1; }
  .hero-copy.in h1, .hero-copy.in .tagline, .hero-copy.in .lede,
  .hero-copy.in .hero-btns, .hero-copy.in .hero-vals li { animation: none !important; opacity: 1; }
  .eng:hover, .proof:hover, .stepcard:hover, .offer:hover, .card.glass:hover, .safe:hover { transform: none; }
  .glass::after { display: none; }
  .sec h2.reveal.in::after { transition: none; }
}

/* le moteur IA se distingue des moteurs mecaniques */
.eng.is-ai {
  border-color: rgba(122,162,255,.34);
  background:
    linear-gradient(180deg, rgba(122,162,255,.07), rgba(255,255,255,.012)),
    rgba(20,22,28,.66);
}
.eng.is-ai .eng-t { color: #9db6ff; background: rgba(122,162,255,.14); border-color: rgba(122,162,255,.32); }
.eng-new.ai { color: #0d0d0d; background: linear-gradient(140deg, #bcd0ff, #7aa2ff); }
.eng-guard {
  margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13px !important;
}
.eng-guard b { color: #9db6ff; }