:root{
	  --topbarH: 50px; /* ajuste si besoin */
      --bg:#07080c;
      --bg2:#0b0d12;
      --ink:#eef2ff;
      --muted:rgba(238,242,255,.72);
      --muted2:rgba(238,242,255,.55);
      --line:rgba(238,242,255,.12);

      --accent:#ff2d55; /* rouge signature */
      --gold:#ffd166;   /* repères */
      --panel:rgba(255,255,255,.06);

      --max: 1120px;
      --shadow: 0 22px 70px rgba(0,0,0,.50);
      --shadow2: 0 12px 32px rgba(0,0,0,.35);
      --r: 18px;

      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

      --barH: 110px; /* hauteur du rail (jockey) */
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--sans);
      color:var(--ink);
      background:
        radial-gradient(1200px 650px at 20% 0%, rgba(255,45,85,.16), transparent 60%),
        radial-gradient(900px 550px at 85% 18%, rgba(255,209,102,.10), transparent 55%),
        linear-gradient(180deg, var(--bg), var(--bg2));
      overflow-x:hidden;
    }
    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 18px}

    /* =========================================
       TOPBAR (très minimal, pas "SaaS")
    ========================================= */
    .topbar{
      position:fixed;
      top:0; left:0; right:0;
      z-index:60;
      background: rgba(7,8,12,.55);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom:1px solid rgba(238,242,255,.08);
    }
    .topbar .in{
      display:flex; align-items:center; justify-content:space-between;
      padding: 10px 0;
      gap:12px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      text-decoration:none; min-width:0;
    }
    .mark{
      width:34px; height:34px; border-radius:10px;
      border:1px solid rgba(255,45,85,.38);
      background: linear-gradient(180deg, rgba(255,45,85,.20), rgba(255,45,85,.06));
      display:grid; place-items:center;
      box-shadow: 0 10px 28px rgba(255,45,85,.18);
      flex:0 0 auto;
    }
    .mark svg{width:18px;height:18px;opacity:.95}
    .brand b{font-weight:950; letter-spacing:.4px; line-height:1.05}
    .brand small{
      display:block; margin-top:2px;
      font-size:12px; color:var(--muted);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      max-width: 56vw;
    }

    .topActions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
    .btn{
      appearance:none; border:0; cursor:pointer;
      border-radius: 10px;
      padding: 11px 14px;
      font-weight: 900;
      letter-spacing:.6px;
      text-transform: uppercase;
      font-size: 13px;
      text-decoration:none;
      display:inline-flex; align-items:center; gap:10px; justify-content:center;
      transition: transform .12s ease, filter .12s ease, background .12s ease;
      white-space:nowrap;
    }
    .btn:active{transform: translateY(1px)}
    .btn-primary{
      background: linear-gradient(180deg, rgba(255,45,85,.98), rgba(210,22,60,.98));
      color:#fff;
      box-shadow: 0 16px 44px rgba(255,45,85,.26);
    }
    .btn-primary:hover{filter:brightness(1.03)}
    .btn-ghost{
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(238,242,255,.14);
      color: rgba(238,242,255,.92);
    }
    .btn-ghost:hover{background: rgba(255,255,255,.06)}

/* ===================================
   MENU DESKTOP — HOVER ROUGE CTA
=================================== */

.topActions--desktop .btn-ghost:hover{
  background: linear-gradient(180deg, #ff3b5c 0%, #e4143a 100%);
  color: #fff;
  border-color: transparent;
}


    /* =========================================
       SCROLL LAYOUT: full-page sections + snap
    ========================================= */
    .stage{
      padding-top: var(--topbarH);
    }

    .snap{
      scroll-snap-type: y mandatory;
	}
	
    /* =========================================
       HERO: première page "clean"
    ========================================= */
    .heroGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 18px;
      align-items:center;
      position:relative;
      z-index:2;
    }
    .kicker{
      font-family:var(--mono);
      color: rgba(255,209,102,.92);
      font-size: 12px;
      letter-spacing:.7px;
      text-transform: uppercase;
      display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    }
    .kdot{
      width:8px;height:8px;border-radius:50%;
      background: var(--accent);
      box-shadow: 0 0 0 6px rgba(255,45,85,.14);
      flex:0 0 auto;
    }
    h1{
      margin: 12px 0 12px;
      font-size: clamp(44px, 6.3vw, 86px);
      letter-spacing: -1px;
      line-height: .92;
    }
    .lead{
      margin:0;
      color: var(--muted);
      line-height: 1.75;
      max-width: 72ch;
      font-size: 15.5px;
    }
    .heroActions{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      margin-top: 18px;
    }
    .miniInfo{
      margin-top: 18px;
      display:grid;
      grid-template-columns: 150px 1fr;
      gap: 8px 14px;
      max-width: 560px;
      font-size: 13px;
      color: rgba(238,242,255,.82);
    }
    .miniInfo b{
      font-family: var(--mono);
      color: rgba(255,209,102,.92);
      font-weight: 900;
      letter-spacing:.6px;
      text-transform: uppercase;
      font-size: 12px;
    }
    .note{
      margin-top: 10px;
      color: var(--muted2);
      font-size: 12.5px;
      line-height: 1.55;
      max-width: 72ch;
    }

    /* visuel piste "discret" sur hero (pas un panneau) */
    .heroTrack{
      border-radius: 22px;
      border:1px solid rgba(238,242,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: var(--shadow2);
      padding: 14px;
      position:relative;
      overflow:hidden;
	  transform: translateY(0) scale(1);
	  transform-origin: top right;
    }
    .heroTrack:before{
      content:"";
      position:absolute; inset:-30% -30% auto auto;
      width: 420px; height: 420px;
      background: radial-gradient(circle at 40% 40%, rgba(255,45,85,.14), transparent 62%);
      transform: rotate(10deg);
      pointer-events:none;
    }
    .heroTrack .tHead{
      display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(238,242,255,.10);
      margin-bottom: 12px;
    }
    .heroTrack .tHead b{letter-spacing:.2px}
    .heroTrack .tag{
      font-family:var(--mono);
      font-size: 12px;
      color: rgba(238,242,255,.82);
      padding: 6px 10px;
      border-radius: 999px;
      border:1px solid rgba(255,209,102,.28);
      background: rgba(255,209,102,.10);
      white-space:nowrap;
    }
    .heroTrack svg{width:100%; height:auto; display:block}
    .heroTrack p{
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.55;
    }

    /* =========================================
       REVEAL: les blocs "apparaissent" au scroll
    ========================================= */
    /* Par défaut (sans JS), on affiche tout */
    .reveal{
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }

    /* Si JS actif, on réactive l'effet reveal */
    .js .reveal{
      opacity: 0 !important;
      transform: translateY(18px) !important;
      filter: blur(2px) !important;
    }
    .js .reveal.in{
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }

    /* =========================================
       Content blocks per screen
    ========================================= */
    .screenGrid{
      display:grid;
      grid-template-columns: .40fr .60fr;
      gap: 14px;
      align-items:start;
      width:100%;
    }
    .side{
      border-radius: 22px;
      border:1px solid rgba(238,242,255,.12);
      background: rgba(255,255,255,.04);
      box-shadow: var(--shadow2);
      padding: 14px;
      position: sticky;
      top: 90px;
    }
    .side .step{
      font-family: var(--mono);
      color: rgba(255,209,102,.92);
      font-weight: 900;
      letter-spacing:.7px;
      font-size: 12px;
      text-transform: uppercase;
    }
    .side h2{
      margin: 8px 0 0;
      font-size: 22px;
      line-height:1.25;
    }
    .side p{
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.6;
    }

    .block{
      border-radius: 22px;
      border:1px solid rgba(238,242,255,.12);
      background: rgba(255,255,255,.04);
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .block h3{
      margin:0 0 10px;
      font-size: 14px;
      letter-spacing:.9px;
      text-transform: uppercase;
      color: rgba(238,242,255,.92);
    }
    .block ul{
      margin: 0;
      padding-left: 18px;
      color: rgba(238,242,255,.86);
      line-height: 1.75;
    }
    .block li{margin: 8px 0}
    .callout{
      margin-top: 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,45,85,.22);
      background: rgba(255,45,85,.08);
      padding: 12px;
      color: rgba(238,242,255,.90);
      font-size: 13.5px;
      line-height:1.6;
    }
    .callout.gold{
      border-color: rgba(255,209,102,.24);
      background: rgba(255,209,102,.08);
    }

    /* Table */
    .tableWrap{
      margin-top: 10px;
      border-radius: 18px;
      border:1px solid rgba(238,242,255,.12);
      overflow:hidden;
      background: rgba(255,255,255,.05);
      box-shadow: var(--shadow2);
    }
    table{width:100%; border-collapse:collapse; font-size:14px}
    th,td{padding: 12px 12px; border-bottom:1px solid rgba(238,242,255,.10); text-align:left}
    thead th{
      background: rgba(255,255,255,.06);
      font-weight: 950;
      color: rgba(238,242,255,.92);
    }
    tbody tr:last-child td{border-bottom:0}
    .num{font-variant-numeric: tabular-nums; font-weight:950}
    .pos{color: rgba(255,209,102,.95)}

    /* Offer screen */
    .offer{
      border-radius: 26px;
      border:1px solid rgba(255,45,85,.22);
      background:
        radial-gradient(900px 420px at 80% 10%, rgba(255,45,85,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      box-shadow: var(--shadow);
      padding: 18px;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
      align-items:start;
    }
    .offer h2{
      margin:0 0 8px;
      font-size: 22px;
      letter-spacing:.2px;
      text-transform: uppercase;
    }
    .price{
      font-size: 44px;
      font-weight: 980;
      letter-spacing:-.9px;
      font-variant-numeric: tabular-nums;
      margin: 6px 0 8px;
    }
    .offer p{margin:0; color:var(--muted); line-height:1.65; font-size:14px; max-width: 70ch}
    .offer ul{margin: 12px 0 0; padding-left: 18px; color: rgba(238,242,255,.86); line-height:1.75}
    .receipt{
      border-radius: 22px;
      border:1px solid rgba(238,242,255,.12);
      background: rgba(0,0,0,.20);
      padding: 14px;
      box-shadow: var(--shadow2);
    }
    .rrow{
      display:flex; justify-content:space-between; gap:10px;
      padding:9px 0;
      border-bottom:1px dashed rgba(238,242,255,.18);
      font-size: 14px;
      color: rgba(238,242,255,.86);
    }
    .rrow:last-child{border-bottom:0}
    .fine{margin-top:10px; color:var(--muted2); font-size:12.5px; line-height:1.55}

    /* =========================================
       JOCKEY PROGRESS RAIL (ligne droite)
       - fixe en bas
       - avance à chaque nouveau bloc
    ========================================= */
    .rail{
      position:fixed;
      left:0; right:0; bottom:0;
      height: var(--barH);
      z-index:70;
      background: rgba(7,8,12,.62);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-top: 1px solid rgba(238,242,255,.08);
      display:flex;
      align-items:center;
    }
    .rail .wrap{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }

    .railLeft{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width: 220px;
    }
    .railLeft .s1{
      font-family:var(--mono);
      font-size: 12px;
      letter-spacing:.7px;
      text-transform: uppercase;
      color: rgba(255,209,102,.90);
    }
    .railLeft .s2{
      font-size: 12.5px;
      color: var(--muted);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      max-width: 46vw;
    }

    .trackLine{
      position:relative;
      flex: 1 1 auto;
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(238,242,255,.10);
      overflow:hidden;
    }
    .trackLine:before{
      content:"";
      position:absolute; inset:0;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(255,209,102,.65) 0,
          rgba(255,209,102,.65) 10px,
          transparent 10px,
          transparent 22px
        );
      opacity:.55;
      transform: translateY(1px);
    }

    .prog{
      position:absolute; left:0; top:0; bottom:0;
      width: 0%;
      background: linear-gradient(90deg, rgba(255,45,85,.0), rgba(255,45,85,.38));
      border-right: 1px solid rgba(255,45,85,.38);
      transition: width .55s ease;
    }

    .jockey{
      position:absolute;
      left: 0%;
      top: 50%;
      transform: translate(-6px, -50%);
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,45,85,.35);
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
      display:grid;
      place-items:center;
      transition: left .55s ease;
    }
    .jockey svg{width:22px; height:22px; opacity:.95}

    .railRight{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 220px;
      justify-content:flex-end;
    }
    .meter{
      font-family:var(--mono);
      font-size: 12px;
      color: rgba(238,242,255,.78);
      padding: 6px 10px;
      border-radius: 999px;
      border:1px solid rgba(238,242,255,.14);
      background: rgba(255,255,255,.04);
      white-space:nowrap;
    }

    /* =========================================
       Footer (en dernier écran)
    ========================================= */
    .foot{
      color: rgba(238,242,255,.62);
      font-size: 13px;
      border-top: 1px solid rgba(238,242,255,.08);
      background: rgba(0,0,0,.20);
      padding: 24px 0 calc(34px + var(--barH));
    }
    .foot a{color: rgba(255,209,102,.92); text-decoration:none}
    .foot a:hover{text-decoration:underline}

    /* =========================================
       Responsive
    ========================================= */
    @media (max-width: 980px){
      .heroGrid{grid-template-columns: 1fr; }
      .screenGrid{grid-template-columns: 1fr;}
      .side{position:relative; top:auto}
      .offer{grid-template-columns: 1fr}
      .miniInfo{grid-template-columns: 130px 1fr}
      .railLeft{min-width: 160px}
      .railRight{min-width: 140px}
    }
    @media (max-width: 520px){
      .btn{width:100%}
      .topActions{width:100%}
      .topActions .btn{flex:1}
      .railLeft{display:none}
      .railRight{min-width:auto}
      .meter{display:none}
    }
    /* ensure last content isn't hidden behind rail */
    .padEnd{padding-bottom: calc(34px + var(--barH));}
	
	/* ===============================
   RAIL PROGRESSION — PLUS VISIBLE
================================ */

/* fond de la barre plus opaque + séparation nette */
.rail{
  height: 110px; /* + grand */
  background: rgba(0,0,0,.78);
  border-top: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 -14px 40px rgba(0,0,0,.55);
}

/* texte à gauche plus lisible */
.railLeft .s1{
  color: rgba(255,209,102,.98);
  font-size: 12px;
}
.railLeft .s2{
  color: rgba(255,255,255,.82);
}

/* rail principal plus épais + effet “track” */
.trackLine{
  height: 14px;                 /* + épais */
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

/* pointillés plus visibles */
.trackLine:before{
  opacity: .75;
}

/* progression rouge plus franche */
.prog{
  background: linear-gradient(90deg,
    rgba(255,45,85,.08),
    rgba(255,45,85,.55),
    rgba(255,45,85,.25)
  );
  border-right: 2px solid rgba(255,45,85,.85);
  box-shadow: 0 0 0 1px rgba(255,45,85,.18), 0 0 28px rgba(255,45,85,.22);
}

/* jockey + gros + “pop” */
.jockey{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,45,85,.55);
  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 0 4px rgba(255,45,85,.12);
}
.jockey svg{
  width: 26px;
  height: 26px;
}

/* meter (pourcentage) plus visible */
.meter{
  font-size: 12px;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
}

/* bouton à droite légèrement plus “dense” */
.railRight .btn{
  padding: 12px 14px;
}

/* mobile : garde la barre visible même si on cache la partie gauche */
@media (max-width: 520px){
  .rail{ height: 96px; }
  .jockey{ width: 48px; height: 48px; }
  .trackLine{ height: 13px; }
}





/* ===============================
   SCREEN 1 — version “affiche” clean
================================ */

.poster{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(238,242,255,.12);
  background: rgba(0,0,0,.18);
  overflow: hidden;
}

.poster .row{
  display: grid;
  grid-template-columns: 44px 110px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(238,242,255,.10);
}

.poster .row:last-of-type{
  border-bottom: 0;
}

.poster .ico{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,45,85,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  font-size: 18px;
}

.poster .key{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: rgba(255,209,102,.95);
  font-weight: 900;
}

.poster .txt{
  color: rgba(238,242,255,.78);
  font-size: 13.5px;
  line-height: 1.55;
}

.posterFoot{
  padding: 14px;
  background: rgba(255,45,85,.10);
  border-top: 1px solid rgba(255,45,85,.22);
  color: rgba(238,242,255,.88);
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 520px){
  .poster .row{
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "ico key"
      "ico txt";
    align-items: start;
  }
  .poster .ico{ grid-area: ico; }
  .poster .key{ grid-area: key; }
  .poster .txt{ grid-area: txt; }
}

/* centré */
#s1 .screenGrid{
  display: flex;
  justify-content: center;   /* centre horizontalement */
}

#s1 .block{
  margin: 0 auto;
  max-width: 720px;
}

#s1 .side{
  display: none;
}
	
#s1 .wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Titre étape centré et impact */
#s1 .stepTitle{
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 40px;
  color: #2ecc71;
  text-transform: uppercase;
}

/* Carte centrée */
#s1 .block{
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  text-align: left; /* on garde lecture confortable */
}

/* Bouton vers étape suivante */
.nextStep{
  margin-top: 50px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border-radius: 14px;
  background: linear-gradient(180deg,#ff2d55,#c41638);
  color: white;
  font-weight: 900;
  letter-spacing: .6px;
  text-decoration: none;
  box-shadow: 0 18px 45px rgba(255,45,85,.35);
  transition: all .25s ease;
}

.nextStep:hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(255,45,85,.45);
}

/* Centrage écran 1 */
.s1wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Étape au-dessus */
.kicker.outside{
  margin-bottom: 28px;
  font-weight: 800;
  letter-spacing: .6px;
}

/* Carte centrée */
#s1 .block{
  max-width: 760px;
  width: 100%;
  text-align:left;
}

/* Bouton espacé */
#s1 .nextStep{
  margin-top: 36px;
}

/* Centrage écran 2 */
.s2wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

#s2 .block{
  max-width: 760px;
  width: 100%;
  text-align:left;
}

#s2 .nextStep{
  margin-top: 36px;
}

.s3wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

#s3 .block{
  max-width: 760px;
  width: 100%;
  text-align:left;
}

#s3 .nextStep{
  margin-top: 36px;
}

.s4wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

#s4 .block{
  max-width: 780px;
  width: 100%;
  text-align:left;
}

#s4 .nextStep{
  margin-top: 36px;
}

.s5wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
#s5 .block{
  max-width: 780px;
  width: 100%;
  text-align:left;
}
#s5 .nextStep{
  margin-top: 36px;
}


/* ===== Screen 6 : aligner cover sur bloc paiement ===== */
/* Stop snap après s5 */
#s6,
#s6 ~ .screen{
  scroll-snap-align: none !important;
}

#s6 .offer{
  align-items: start;
}

/* cover contrôlée par JS */
#s6 .offerCover{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  background: rgba(0,0,0,.18);
  padding: 22px; /* épaisseur du cadre */
}

/* image remplit la hauteur fixée */
#s6 .offerCover img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14px;                 /* coins de l'affiche */
  object-fit: contain;                 /* IMPORTANT : pas de crop */
  background: rgba(0,0,0,.18);         /* au cas où l'image n'occupe pas tout */
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

/* mobile: on laisse vivre */
@media (max-width: 980px){
  #s6 .offerCover{ height: auto !important; }
  #s6 .offerCover img{ height: auto !important; }
}


/* SCREEN 7 FAQ */
.s7wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

#s7 .block{
  max-width: 820px;
  width: 100%;
  text-align:left;
}

.faq{
  margin-top: 10px;
  border-radius: 18px;
  border: 1px solid rgba(238,242,255,.12);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}

.faqItem{
  border-bottom: 1px solid rgba(238,242,255,.10);
}
.faqItem:last-child{border-bottom:0}

.faqItem summary{
  list-style:none;
  cursor:pointer;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  color: rgba(238,242,255,.90);
  font-weight: 900;
}
.faqItem summary::-webkit-details-marker{display:none}

.faqItem summary i{
  font-style: normal;
  width: 28px; height: 28px;
  border-radius: 10px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,209,102,.24);
  background: rgba(255,209,102,.08);
  color: rgba(255,209,102,.95);
}

.faqBody{
  padding: 0 14px 14px;
  color: rgba(238,242,255,.74);
  line-height: 1.65;
  font-size: 14px;
}

.faqItem[open] summary i{
  content:"–";
  transform: rotate(45deg); /* transforme + en x (simple, visuel) */
}


.railHidden{
  opacity: 0;
  transform: translateY(110%);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

/* Mark logo topbar */
.brand .mark{
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #141b33, #0b1020);
  border: 1px solid rgba(255,255,255,.12);
}

.brand .mark svg{
  width: 34px;   /* avant 30px */
  height: 34px;
}
	
	
/* =========================
   BURGER + DRAWER (mobile)
========================= */

.burgerBtn{
  display:none;
  width:44px; height:44px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(238,242,255,.14);
  cursor:pointer;
  position:relative;
  flex: 0 0 auto;
}
.burgerBtn span{
  position:absolute; left:11px; right:11px;
  height:2px;
  background: rgba(238,242,255,.92);
  border-radius: 2px;
  transition: transform .18s ease, top .18s ease, opacity .18s ease;
}
.burgerBtn span:nth-child(1){ top:14px; }
.burgerBtn span:nth-child(2){ top:21px; }
.burgerBtn span:nth-child(3){ top:28px; }

.menuOverlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  z-index: 80; /* au-dessus du contenu, sous le drawer */
}

.mobileMenu{
  position:fixed;
  top:0; right:0;
  width: min(320px, 86vw);
  height: 100dvh;
  z-index: 90;
  background: rgba(7,8,12,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid rgba(238,242,255,.10);
  box-shadow: -22px 0 70px rgba(0,0,0,.55);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  transform: translateX(8px);
}

.mobileMenu__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(238,242,255,.10);
}
.mobileMenu__head b{
  font-weight: 950;
  letter-spacing:.4px;
}
.mobileMenu__close{
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(238,242,255,.14);
  color: rgba(238,242,255,.92);
  cursor:pointer;
}

.mobileMenu__links{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* Mobile rules */
@media (max-width: 760px){
  .topActions--desktop{ display:none; }
  .burgerBtn{ display:inline-flex; }
}

/* Optionnel : évite que le sous-titre pousse trop */
@media (max-width: 520px){
  .brand small{ max-width: 52vw; }
}

/* état ouvert */
.menuOpen .menuOverlay{ display:block; }	
	
.mobileMenu[hidden],
.menuOverlay[hidden]{
  display: none !important;
}
	
	#s1{
  background: radial-gradient(800px 400px at 70% 10%, rgba(255,40,90,.25), transparent 60%),
              #07080c;
}

#s2{
  background: radial-gradient(900px 500px at 30% 0%, rgba(255,180,0,.18), transparent 65%),
              #07080c;
}

#s3{
  background: radial-gradient(800px 400px at 50% 0%, rgba(70,120,255,.22), transparent 60%),
              #07080c;
}

#s4{
  background: radial-gradient(800px 400px at 70% 10%, rgba(255,40,90,.25), transparent 60%),
              #07080c;
}

#s5{
  background: radial-gradient(900px 500px at 30% 0%, rgba(255,180,0,.22), transparent 60%),
              #07080c;
}

#s6{
  background: radial-gradient(900px 500px at 50% 0%, rgba(255,40,90,.25), transparent 60%),
              #07080c;
}

#s7{
  background: radial-gradient(900px 500px at 50% 0%, rgba(100,100,255,.20), transparent 60%),
              #07080c;
}


/* Viewport utile = écran - topbar - rail */
:root{
  --railH: var(--barH);
  --vhAvail: calc(100vh - var(--topbarH) - var(--railH));
}


/* Hero : pareil */
#s0{
  min-height: var(--vhAvail);
}


/* ===== FIX HAUTEURS : une seule source de vérité ===== */

/* 1) calc de la hauteur dispo */
:root{
  --vhAvail: calc(100vh - var(--topbarH) - var(--barH));
}


/* 2) on FORCE toutes les screens à utiliser cette hauteur (snap ou non) */
.screen{
  min-height: var(--vhAvail) !important;
  padding-top: 0 !important;
  padding-bottom: calc(34px + var(--barH)) !important;
  display: flex;
  align-items: center;
}

/* 3) hero idem (et on retire les vieux calc) */
#s0{
  min-height: var(--vhAvail) !important;
}

/* 4) option : si tu veux que le contenu soit plus haut (moins “milieu”) */
.screen > .wrap{
  width: 100%;
}


/* =========================
   HAUTEUR UNIQUE PROPRE
========================= */

:root{
  --vhAvail: calc(100vh - var(--topbarH) - var(--barH));
}

@supports (height: 100dvh){
  :root{
    --vhAvail: calc(100dvh - var(--topbarH) - var(--barH));
  }
}

.screen{
  min-height: var(--vhAvail);
  display:flex;
  align-items:center;
}

#s0{
  min-height: var(--vhAvail);
}


/* =========================
   OVERRIDE HAUTEUR — FINAL
   (à laisser tout en bas)
========================= */

/* 1) hauteur utile = écran - topbar - rail */
:root{
  --vhAvailFinal: calc(100vh - var(--topbarH) - var(--barH));
}
@supports (height: 100dvh){
  :root{
    --vhAvailFinal: calc(100dvh - var(--topbarH) - var(--barH));
  }
}

/* 2) on FORCE les écrans à cette hauteur (peu importe les anciens blocs) */
.snap .screen,
.screen{
  min-height: var(--vhAvailFinal) !important;
  height: var(--vhAvailFinal) !important;          /* IMPORTANT: impose la hauteur */
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;                   /* on stoppe les padding parasites */
}

/* 3) hero pareil */
#s0{
  min-height: var(--vhAvailFinal) !important;
  height: var(--vhAvailFinal) !important;
}


/* ====== Track mini (no SVG) ====== */
.trackMini{
  position: relative;
  height: 220px;
  margin: 10px 0 6px;
  border-radius: 16px;
}

.trackMini__ring{
  position:absolute;
  left: 50%;
  top: 50%;
  width: min(520px, 100%);
  height: 170px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 18px solid rgba(238,242,255,.14);         /* bord piste */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

.trackMini__ring:after{
  content:"";
  position:absolute; inset: 10px;
  border-radius: 999px;
  border: 3px dashed rgba(255,209,102,.72);         /* pointillés */
  opacity:.9;
}

/* pins */
.pin{
  position:absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(255,45,85,.14);
}

/* placements (ajuste si tu veux) */
.pin--depart   { left: 40%; top: 18%; }
.pin--poteau   { left: 72%; top: 25%; }
.pin--ligne    { left: 52%; top: 78%; }
.pin--tournant { left: 5%; top: 40%; }

/* labels */
.lbl{
  position:absolute;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
  color: rgba(238,242,255,.70);
  text-transform: uppercase;
  white-space: nowrap;
}
.lbl--depart   { left: 44%; top: 24%; }
.lbl--poteau   { left: 72%; top: 31%; }
.lbl--ligne    { left: 42%; top: 64%; color: rgba(238,242,255,.55); }
.lbl--tournant { left: 10%; top: 44%; }




/* ===== Logo sans SVG ===== */

.mark{
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #141b33, #0b1020);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}

/* M large */
.logoM{
  font-weight: 900;
  font-size: 26px;
  color: white;
  letter-spacing: -1px;
  position: relative;
  z-index: 2;
}

/* trajectoire */
.trajectory{
  position: absolute;
  width: 120%;
  height: 3px;
  background: #4aa3ff;
  top: 58%;
  left: -10%;
  transform: rotate(-18deg);
  border-radius: 3px;
  opacity: .9;
  box-shadow: 0 0 8px rgba(74,163,255,.6);
}


/* À partir de s6 : hauteur naturelle */
#s6,
#s6 ~ .screen{
  height: auto !important;
  min-height: auto !important;
  display: block !important;
  padding-top: 60px !important;
  padding-bottom: 120px !important;
}

body.after-s5 .rail{
  display:none;
}





/* Fond uni propre pour la partie finale */
#s6{
  background: #07080c !important;
}

#s6,
#s6 ~ .screen{
  background: #07080c !important;
}





/* ================================
   MOBILE = FOND UNI GLOBAL
================================ */

@media (max-width: 760px){

  /* 1️⃣ Fond global unique */
  body{
    background: #0b1020 !important; /* ou la couleur que tu veux */
  }

  /* 2️⃣ On neutralise les fonds par section */
  .screen,
  section,
  #s1, #s2, #s3, #s4, #s5, #s6, #s7{
    background: transparent !important;
    background-image: none !important;
  }

  /* 3️⃣ Plus de logique écran fixe */
  .screen{
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    padding-top: 40px !important;
    padding-bottom: 120px !important; /* espace pour la barre basse */
  }

  /* 4️⃣ Désactive le snap */
  .snap{
    scroll-snap-type: none !important;
  }

}

/* ================================
   FIX CHEVAUCHEMENT — MOBILE
   (remet les blocs dans le flux)
================================ */
@media (max-width: 760px){

  /* 1) sections = flux normal + séparation */
  .screen{
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: calc(var(--barH) + 26px + env(safe-area-inset-bottom)) !important;
  }
  .screen + .screen{
    margin-top: 28px !important; /* évite qu'elles se “collent” */
  }

  /* 2) tout ce qui flotte (absolute/transform) -> redevient normal */
  .plan, .planDePiste, .track, .piste, .timeline, .progress, .orbital,
  .section-title, .kicker, .hero, .heroGrid,
  .card, .panel, .box{
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }

  /* 3) annule les marges négatives fréquentes */
  .plan, .planDePiste, .track, .piste, .card, .panel, .box{
    margin-top: 0 !important;
  }

  /* 4) si un parent coupe le contenu */
  .wrap, .in, .container{
    overflow: visible !important;
  }
}

@media (max-width: 760px){
  h2, h3, .title, .section-title{
    clear: both !important;
  }
}

/* =========================================
   FIX CHEVAUCHEMENT (HERO TRACK -> #s1)
========================================= */
@media (max-width: 760px){

  /* 1) STOP screens à hauteur fixe (sinon ça déborde par-dessus le suivant) */
  section.screen,
  .screen{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 2) Le bloc Plan de piste doit rester dans le flux */
  .heroTrack{
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 18px 0 28px !important; /* espace après => plus de chevauchement */
  }

  /* 3) Ta classe reveal peut ajouter un translate */
  .reveal{
    transform: none !important;
  }

  /* 4) Sécurise le premier contenu de #s1 */
  #s1{
    padding-top: 16px !important;
  }
}

@media (max-width: 760px){
  #top, #s0, .hero, .heroScreen{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 760px){
  .topbar{
    position: fixed !important;
    left: 0; right: 0; top: 0;
  }
  body{
    padding-top: var(--topbarH); /* compense le fixed */
  }
}


/* ===================================
   MOBILE : BOUTON RAIL PAS COUPÉ
=================================== */
@media (max-width: 760px){

  .rail{
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 12px 14px !important;  /* ajuste si tu veux */
    box-sizing: border-box !important;

    overflow: visible !important;   /* surtout pas hidden */
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Le bouton ne doit jamais dépasser */
  .rail .btn,
  .rail a.btn,
  .rail button.btn,
  .rail .cta{
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;        /* clé */
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* Si tu as un élément à gauche (barre de progression), on le bloque */
  .rail .progress,
  .rail .miniProgress{
    flex: 0 0 auto !important;
    max-width: 46% !important;      /* évite qu’il mange le bouton */
  }
}


/* ===================================
   MOBILE — FIX BLOC POCHETTE + PAYPAL
=================================== */
@media (max-width: 760px){

  /* 1) Empêche tout débordement horizontal */
  html, body{ overflow-x: hidden; }
  .wrap, .container, .in{ max-width: 100%; }

  /* 2) Images (pochette) : toujours responsive */
  img{
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* 3) Le bloc qui contient la pochette (card/box/poster) ne doit pas avoir de hauteur fixe */
  .card, .box, .panel, .block, .poster, .product, .mockup{
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    overflow: hidden;            /* propre avec radius */
    border-radius: 22px;         /* option */
  }

  /* 4) Si ta pochette est dans un wrapper qui force une taille */
  .poster img, .mockup img, .product img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* 5) Zone PayPal / iframes : prend toute la largeur et ne coupe pas */
  .paypal, .paypal-buttons, #paypal-button-container, .pp-buttons{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* 6) Si ton bloc a trop de padding sur mobile */
  .card, .box, .panel{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}


/* ======== LIMITE LARGEUR CONVERTFORM  ======== */
.convertforms,
.convertforms-form,
.cf-form-wrap {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


/* Masquer le label "Jeton Joomla" */
.com-users-profile__custom.users-profile-custom-joomlatoken{
  display: none !important;
}

/* Masquer complètement le fieldset "Jeton Joomla" (formulaire utilisateur) */
fieldset:has(
  input[name^="jform[joomlatoken]"]
){
  display: none !important;
}


/* cache la barre basse */
.rail.railHidden{
  opacity: 0;
  transform: translateY(110%);
  pointer-events: none;
}


/* ===================================
		Retours utilisateurs (mini bloc)
=================================== */

.trust{
  margin-top: 40px;
  padding-top: 10px;
}

.trust__grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin-top: 20px;
}

.trust__item{
  padding: 14px 18px 14px; /* équilibré */
  border-radius: 16px;
  background: rgba(255,255,255,.02); /* plus léger */
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
  min-height: auto;        /* enlève toute hauteur forcée */
}

.trust__quote{
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(234,240,255,.85);
}

.trust__who{
  margin: 0;
  font-size: 12px;
  color: rgba(234,240,255,.55);
  letter-spacing: .02em;
  line-height: 1.2;
}

/* mobile */
@media (max-width: 760px){
  .trust__grid{
    grid-template-columns: 1fr;
  }
}


/* ===================================
   FIX Z-INDEX : MENU AU-DESSUS PAYPAL
=================================== */

/* 1) Le menu (topbar + menu ouvert) doit dominer */
.topbar{
  position: sticky; /* ou fixed si tu es en fixed */
  top: 0;
  z-index: 2147483646 !important;
}

/* si tu as un panneau burger/dropdown */
.navPanel,
.mobileMenu,
.burgerPanel,
.topbar .menu,
.topbar nav{
  position: relative;
  z-index: 2147483647 !important;
}

/* 2) Le bloc PayPal ne doit pas “monter” au-dessus */
.paypal-card,
.payment-card,
.pp-card,
#paypal-button-container,
.paypal-buttons,
iframe{
  z-index: 1 !important;
  position: relative;
}





/* Paypal 4X sans frais */
.ot-paypal-4x {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: #666;
  text-align: center;
  flex-wrap: wrap; /* évite les débordements */
}

.ot-paypal-4x img {
  height: 16px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}


/* =========================
   CGV / Mentions légales
   ========================= */

.cgv{
  width: min(980px, calc(100% - 28px));
  margin: 30px auto 60px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0f172a;
}

.cgv__header{
  text-align: center;
  margin-bottom: 18px;
}

.cgv__logo img{
  display: block;
  margin: 0 auto 14px;
  width: min(420px, 90%);
  height: auto;
}

.cgv__title{
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #eaf0ff; /* blanc bleuté */
}

.cgv__lead{
  margin: 0 auto;
  max-width: 75ch;
  color: #475569;
  line-height: 1.65;
  font-size: 15px;
}

.cgv__card{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
  padding: 22px;
}

/* Titres */
.cgv__h2{
  margin: 18px 0 8px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.cgv__h3{
  margin: 16px 0 8px;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #111827;
}

/* Texte */
.cgv__card p{
  margin: 0 0 10px;
  line-height: 1.75;
  color: rgba(15,23,42,.88);
  font-size: 14.5px;
}

/* Liens */
.cgv__link{
  color: #2563eb;
  text-decoration: none;
  border-bottom: 1px solid rgba(37,99,235,.28);
}
.cgv__link:hover,
.cgv__link:focus{
  color: #1d4ed8;
  border-bottom-color: rgba(37,99,235,.55);
}

/* Listes */
.cgv__list{
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.cgv__list li{
  padding-left: 16px;
  position: relative;
  line-height: 1.6;
  color: rgba(15,23,42,.85);
  font-size: 14px;
}
.cgv__list li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  opacity: .55;
}

/* Encadrés */
.cgv__notice{
  margin: 14px 0 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
  padding: 14px;
}

.cgv__notice--accent{
  border-color: rgba(37,99,235,.22);
  background: rgba(37,99,235,.06);
}

.cgv__noticeTitle{
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.cgv__noticeText{
  margin: 0;
  color: rgba(15,23,42,.86);
}

/* Notes */
.cgv__small{
  margin-top: 6px !important;
  font-size: 12.5px !important;
  color: rgba(71,85,105,.95) !important;
}

/* Footer */
.cgv__foot{
  margin: 14px 0 0;
  text-align: center;
  color: rgba(71,85,105,.9);
  font-size: 13px;
}

/* Mobile */
@media (max-width: 520px){
  .cgv__card{ padding: 18px; }
  .cgv__h2{ font-size: 17px; }
}


/* ===================================
   MOBILE — LOGO PAYPAL 4X
=================================== */
@media (max-width: 760px){

  .ot-paypal-4x{
    font-size: 12px;      /* texte un peu plus compact */
    gap: 4px;
  }

  .ot-paypal-4x img{
    height: 14px !important;   /* réduit le logo */
    width: auto !important;
  }

}


/* =========== HCAPTCHA ========== */
/* Petits mobiles (480px et moins) */
@media (max-width: 480px) {
  .cf-captcha-fix {
    width: 304px;
    max-width: none;
    min-height: 74px;
    transform: scale(0.78);
    -webkit-transform: scale(0.78);
    transform-origin: left top;
    -webkit-transform-origin: left top;
    margin-left: -8px;
    margin-bottom: -14px;
  }
}

/* Très petits écrans (360px et moins) */
@media (max-width: 360px) {
  .cf-captcha-fix {
    transform: scale(0.65);
    -webkit-transform: scale(0.65);
    margin-left: -12px;
    margin-bottom: -26px;
  }
}

/* Très très petits écrans (320px et moins) */
@media (max-width: 320px) {
  .cf-captcha-fix {
    transform: scale(0.55);
    -webkit-transform: scale(0.55);
    margin-left: -16px;
    margin-bottom: -36px;
  }
}