/* ============================
   GhostPays — styles.css (FULL)
   Dark / Grey • Liquid Glass • No smoke
============================ */
body{ outline: 4px solid red !important; }
/* ---- Reset / Base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#fff;
  background:#0b0d10;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
:root{
  --bg:#0b0d10;
  --fg:#ffffff;
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.55);

  --glass:rgba(255,255,255,.07);
  --glass2:rgba(255,255,255,.05);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.14);

  --shadow:0 30px 90px rgba(0,0,0,.60);
  --shadow2:0 20px 60px rgba(0,0,0,.55);

  --radius:18px;
  --radius2:22px;

  --w:1180px;
  --pad:18px;
}

/* ---- Background (no smoke) : glow + vignette ---- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(1000px 520px at 50% -120px, rgba(255,255,255,.12), transparent 62%),
    radial-gradient(900px 520px at 10% 30%, rgba(255,255,255,.06), transparent 58%),
    radial-gradient(900px 520px at 90% 40%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #0c0f14 0%, #0b0d10 65%, #0a0c0f 100%);
}
body::after{
  content:"";
  position:fixed;
  inset:-25%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(closest-side, transparent 55%, rgba(0,0,0,.78) 100%);
}

/* ---- Layout width helpers (ton HTML n’a pas de .container) ---- */
.nav,
.hero,
.section,
.footerInner{
  max-width:var(--w);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

/* ---- Liquid Glass ---- */
.glass,
.glassSoft{
  background:var(--glass);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
}
.glassSoft{
  background:var(--glass2);
  box-shadow: var(--shadow2), inset 0 1px 0 rgba(255,255,255,.10);
}

/* ---- Top / Navbar ---- */
.top{padding:18px 0 0}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:12px;
  padding-bottom:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}
.brandName{
  font-weight:700;
  letter-spacing:-0.02em;
  opacity:.96;
}

/* Logo */
.brandMark{
  width:28px;
  height:28px;
  border-radius:999px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
}
.brandLogo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.navLinks{
  display:flex;
  gap:22px;
  align-items:center;
  font-size:13px;
  color:rgba(255,255,255,.80);
}
.navLinks a{
  opacity:.9;
  transition:opacity .18s ease, transform .18s ease;
}
.navLinks a:hover{opacity:1; transform:translateY(-1px)}

.navCtas{
  display:flex;
  align-items:center;
  gap:14px;
}
.link{
  font-size:13px;
  color:rgba(255,255,255,.78);
}
.link:hover{color:rgba(255,255,255,.95)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:600;
  font-size:13px;
  box-shadow:0 18px 55px rgba(0,0,0,.45);
  transition:transform .18s ease, filter .18s ease, background .18s ease;
}
.btn:hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-1px);
}
.btn:active{transform:translateY(0px)}
.btn.glass{
  background:rgba(255,255,255,.08);
}
.btn.primary{
  background:#fff;
  color:#0b0d10;
  border-color:rgba(255,255,255,.20);
}
.btn.primary:hover{filter:brightness(.96)}
.btn.primary:active{filter:brightness(.93)}

/* ---- Hero ---- */
.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:42px;
  align-items:start;
  padding-top:64px;
  padding-bottom:18px;
}

.heroLeft{padding-top:10px}
.heroRight{position:relative}

.pillRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.pill{
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  color:rgba(255,255,255,.86);
  letter-spacing:.01em;
}

h1{
  margin:0 0 14px;
  font-size:56px;
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.05;
}
.muted{
  color:rgba(255,255,255,.60);
  font-weight:700;
}

.lead{
  margin:0 0 18px;
  max-width:56ch;
  color:rgba(255,255,255,.78);
  line-height:1.6;
  font-size:15px;
}

.heroCtas{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0 18px;
}

.micro{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}
.microItem{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  min-width:180px;
}
.microK{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.65);
}
.microV{
  display:block;
  margin-top:4px;
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.92);
}

.tinyNote{
  margin:10px 0 0;
  font-size:12px;
  color:rgba(255,255,255,.55);
  line-height:1.45;
}

/* ---- Card (3D) ---- */
.card3dWrap{
  position:relative;
  width:100%;
  display:flex;
  justify-content:flex-end;
  padding-top:10px;
}

.card3d{
  position:relative;
  width:360px;
  max-width:100%;
  padding:18px;
  border-radius:var(--radius2);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 35px 120px rgba(0,0,0,.65);
  overflow:hidden;

  transform: rotate(8deg);
  transform-origin: 90% 20%;
}

/* Light edge */
.card3d::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(320px 220px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 55%);
}

/* Card top row */
.cardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.cardLogo{
  font-weight:800;
  letter-spacing:.06em;
  font-size:12px;
  opacity:.92;
}
.cardVisa{
  font-weight:800;
  letter-spacing:.06em;
  font-size:12px;
  opacity:.9;
}

/* Balance */
.cardBalLabel{
  display:block;
  color:rgba(255,255,255,.62);
  font-size:12px;
  margin-bottom:6px;
}
.cardBalValue{
  display:block;
  font-size:28px;
  font-weight:800;
  letter-spacing:-0.02em;
}

/* Bottom row */
.cardRow{
  display:flex;
  justify-content:space-between;
  margin-top:16px;
  color:rgba(255,255,255,.78);
  font-size:12px;
}
.cardNum{opacity:.9}
.cardName{opacity:.9; font-weight:700}

/* Phantom inside card */
.cardGhost{
  position:absolute;
  right:18px;
  top:16px;
  width:170px;
  height:170px;
  pointer-events:none;
  opacity:.95;
  filter: drop-shadow(0 22px 55px rgba(0,0,0,.55));
}
.phantomImg{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  opacity:.95;
}

/* ---- Floating conversion ---- */
.floating{
  position:absolute;
  right:-10px;
  bottom:-18px;
  padding:12px 14px;
  border-radius:16px;
  min-width:230px;
}
.floatingTitle{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.85);
  margin-bottom:8px;
}
.floatingLine{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:-0.01em;
}
.floatingLine span{
  color:rgba(255,255,255,.92);
}
.floatingSmall{
  margin-top:6px;
  font-size:12px;
  color:rgba(255,255,255,.62);
  line-height:1.35;
}

/* ---- Sections ---- */
.section{
  padding-top:90px;
  padding-bottom:0;
}

.sectionHead h2{
  margin:0 0 10px;
  font-size:28px;
  letter-spacing:-0.02em;
}
.sectionHead p{
  margin:0;
  max-width:78ch;
  color:rgba(255,255,255,.72);
  line-height:1.6;
  font-size:14px;
}

/* ---- Steps ---- */
.steps{
  margin-top:28px;
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items:start;
  gap:18px;
}
.step{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.stepIcon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:rgba(255,255,255,.9);
}
.stepBody h3{
  margin:2px 0 6px;
  font-size:15px;
  letter-spacing:-0.01em;
}
.stepBody p{
  margin:0;
  color:rgba(255,255,255,.70);
  font-size:13px;
  line-height:1.6;
}
.stepDivider{
  width:1px;
  height:100%;
  background:rgba(255,255,255,.10);
  margin-top:4px;
}

.callout{
  margin-top:22px;
  padding:14px 16px;
  font-size:13px;
  color:rgba(255,255,255,.80);
}

/* ---- Pricing ---- */
.pricing{
  margin-top:26px;
}
.priceLine{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.priceBig{
  font-size:36px;
  font-weight:900;
  letter-spacing:-0.02em;
}
.priceUnit{
  color:rgba(255,255,255,.70);
  font-weight:700;
}
.priceDesc{
  color:rgba(255,255,255,.72);
  font-size:13px;
}
.tag{
  margin-left:auto;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  color:rgba(255,255,255,.80);
}

.examples{
  margin-top:16px;
  padding:14px 16px;
}
.exRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.exRow:last-child{border-bottom:none}
.exK{
  color:rgba(255,255,255,.65);
  font-size:12px;
  font-weight:700;
}
.exV{
  color:rgba(255,255,255,.86);
  font-size:13px;
  font-weight:700;
}
.exNote{
  margin-top:10px;
  color:rgba(255,255,255,.55);
  font-size:12px;
  line-height:1.45;
}
.pricingCta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

/* ---- Practical info ---- */
.infoGrid{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px;
}
.info{
  padding:16px 0;
}
.info h3{
  margin:0 0 8px;
  font-size:15px;
  letter-spacing:-0.01em;
}
.info p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.6;
}
.small{
  margin-top:8px !important;
  color:rgba(255,255,255,.55) !important;
  font-size:12px !important;
}

/* ---- Trust / Security ---- */
.trustRow{
  margin-top:22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
.trustItem{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.trustIcon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}
.trustItem h3{
  margin:2px 0 6px;
  font-size:14px;
}
.trustItem p{
  margin:0;
  color:rgba(255,255,255,.70);
  font-size:13px;
  line-height:1.55;
}

/* ---- Compare table ---- */
.compare{
  margin-top:18px;
  padding:16px;
}
.compare h3{
  margin:0 0 6px;
  font-size:15px;
}
.tableWrap{
  margin-top:12px;
  overflow:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:780px;
  background:rgba(0,0,0,.18);
}
thead th{
  text-align:left;
  padding:12px;
  font-size:12px;
  color:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(255,255,255,.08);
}
tbody td{
  padding:12px;
  font-size:13px;
  color:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(255,255,255,.06);
}
tbody tr:last-child td{border-bottom:none}
tbody td:first-child{
  color:rgba(255,255,255,.65);
  font-weight:700;
}

/* ---- FAQ ---- */
.faq{
  margin-top:18px;
  display:grid;
  gap:12px;
}
.faqItem{
  padding:12px 14px;
  border-radius:16px;
}
.faqItem summary{
  cursor:pointer;
  list-style:none;
  font-weight:800;
  font-size:13px;
  color:rgba(255,255,255,.90);
}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem p{
  margin:10px 0 0;
  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.6;
}

/* ---- Final CTA ---- */
.finalCta{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  border-radius:18px;
}
.finalCta h3{
  margin:0 0 6px;
  font-size:15px;
}
.finalCta .small{
  margin:0 !important;
}

/* ---- Footer ---- */
.footer{
  margin-top:90px;
  padding:28px 0 34px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footerInner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.footerLeft{
  max-width:70ch;
}
.brandFoot{
  font-weight:800;
  letter-spacing:-0.01em;
  margin-bottom:8px;
}
.footerRight{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.70);
  font-size:13px;
}
.footerRight a:hover{color:rgba(255,255,255,.92)}
.smallText{
  color:rgba(255,255,255,.65);
  font-size:12px;
}
.tiny{
  margin-top:10px;
  color:rgba(255,255,255,.55);
  font-size:12px;
  line-height:1.45;
}

/* ============================
   Responsive
============================ */
@media (max-width: 980px){
  h1{font-size:44px}
  .hero{
    grid-template-columns:1fr;
    gap:26px;
    padding-top:44px;
  }
  .card3dWrap{justify-content:flex-start}
  .card3d{transform: rotate(6deg)}
  .steps{
    grid-template-columns:1fr;
  }
  .stepDivider{display:none}
  .trustRow{grid-template-columns:1fr}
  .infoGrid{grid-template-columns:1fr}
  .footerInner{flex-direction:column; gap:14px}
  .navLinks{display:none}
}

@media (max-width: 560px){
  h1{font-size:36px}
  .microItem{min-width:unset; width:100%}
  .floating{right:0; bottom:-22px}
  .tag{margin-left:0}
}
/* =========================
   HERO CENTRÉ (sans carte à côté)
   Colle en BAS de styles.css
========================= */

/* Hero en 1 colonne + centrage */
.hero{
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  padding-top: 78px !important;
  text-align: center;
  justify-items: center;
}

/* On garde la colonne gauche mais centrée */
.heroLeft{
  width: min(920px, 100%);
  padding-top: 0 !important;
}

/* Centre les pills */
.pillRow{
  justify-content: center;
  margin-bottom: 18px;
}

/* Titre plus “maquette” */
.hero h1{
  margin: 0 auto 14px !important;
  font-size: 64px;
  max-width: 18ch;
}

/* Description centrée */
.lead{
  margin: 0 auto 18px !important;
  max-width: 62ch;
}

/* CTA centrés */
.heroCtas{
  justify-content: center;
}

/* Micro stats centrés */
.micro{
  justify-content: center;
}
.microItem{
  min-width: 200px;
}

/* Note centrée */
.tinyNote{
  text-align: center;
}

/* Cache la carte à droite complètement */
.heroRight{
  display: none !important;
}
/* === BACKGROUND PRO (uniforme + glow soft, sans bandes) === */
body::before{
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(255,255,255,.12), transparent 62%),
    radial-gradient(760px 420px at 15% 35%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(760px 420px at 85% 40%, rgba(255,255,255,.04), transparent 62%),
    linear-gradient(180deg, #0b0d10 0%, #0b0d10 100%) !important;
}
body::after{
  background: radial-gradient(closest-side, transparent 52%, rgba(0,0,0,.85) 100%) !important;
}
/* === HERO : TYPO + RYTHME === */
.hero{
  padding-top: 88px !important;
  padding-bottom: 10px !important;
}
.hero h1{
  font-size: 72px !important;
  letter-spacing: -0.045em !important;
  max-width: 16ch !important;
}
.lead{
  font-size: 15.5px !important;
  color: rgba(255,255,255,.76) !important;
  max-width: 58ch !important;
  margin-top: 10px !important;
}
.heroCtas{
  margin-top: 22px !important;
}
.btn{
  padding: 12px 18px !important;
  font-size: 13px !important;
}
.btn.primary{
  box-shadow: 0 22px 70px rgba(0,0,0,.55) !important;
}
/* === PILLS : plus fines, plus premium === */
.pill{
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* === MICRO STATS : moins gros, mieux aligné === */
.micro{
  gap: 12px !important;
  margin-top: 18px !important;
}
.microItem{
  min-width: 190px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.microK{ font-size: 11.5px !important; opacity:.7 !important; }
.microV{ font-size: 13px !important; }

/* note */
.tinyNote{
  margin-top: 14px !important;
  opacity: .65 !important;
}
.hero::after{
  content:"";
  display:block;
  width:min(980px, 92%);
  height:1px;
  margin: 28px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}
/* === PLUS D'AIR DANS LE HERO (espacement) === */
.hero{
  padding-top: 110px !important;   /* + espace en haut */
  row-gap: 0 !important;
}

.pillRow{
  margin-bottom: 26px !important;  /* pills -> titre */
}

.hero h1{
  margin-bottom: 18px !important;  /* titre -> phrase */
}

.lead{
  margin-top: 0 !important;
  margin-bottom: 26px !important;  /* phrase -> boutons */
}

.heroCtas{
  margin-top: 0 !important;
  margin-bottom: 28px !important;  /* boutons -> microcards */
}

.micro{
  margin-top: 0 !important;
  gap: 16px !important;
}

.tinyNote{
  margin-top: 18px !important;     /* microcards -> note */
}
/* =========================
   NAV PREMIUM (plus d'espace)
   Colle en bas de styles.css
========================= */

.nav{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* Brand un peu plus “stable” */
.brand{
  gap: 12px !important;
}
.brandName{
  font-size: 14px !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
}

/* Plus d'espace entre les onglets */
.navLinks{
  gap: 34px !important;            /* << augmente l’espace */
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  color: rgba(255,255,255,.80) !important;
}
.navLinks a{
  padding: 10px 6px !important;    /* zone cliquable + confort */
  border-radius: 999px;
  transition: background .18s ease, opacity .18s ease, transform .18s ease;
}
.navLinks a:hover{
  opacity: 1 !important;
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* CTA à droite : plus d'air */
.navCtas{
  gap: 16px !important;
}

/* Bouton inscription + propre */
.navCtas .btn.glass{
  padding: 11px 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.45) !important;
}
.navCtas .btn.glass:hover{
  background: rgba(255,255,255,.12) !important;
}

/* Connexion plus discret */
.navCtas .link{
  opacity: .78 !important;
}
.navCtas .link:hover{
  opacity: 1 !important;
}
.nav{
  position: relative;
}
.navLinks{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
/* =========================
   STEPS -> BARRE DE PROGRESSION (1—2—3)
   (sans modifier le HTML)
========================= */

.steps{
  position: relative;
  margin-top: 34px !important;
  padding-top: 46px !important;   /* place pour la barre */
  gap: 26px !important;
}

/* La barre (ligne) */
.steps::before{
  content:"";
  position:absolute;
  left: 4%;
  right: 4%;
  top: 18px;
  height: 2px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
}

/* Variante : barre “dégradé soft” (optionnel)
.steps::before{
  background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
}
*/

/* On enlève les séparateurs verticaux actuels */
.stepDivider{
  display:none !important;
}

/* Chaque step devient un “point” sur la barre */
.step{
  position: relative;
  padding-top: 4px;
}

/* On transforme le badge 1/2/3 en “node” sur la barre */
.stepIcon{
  position:absolute;
  top: -40px;                 /* place le badge sur la barre */
  left: 0;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 13px !important;
}

/* Un petit point derrière pour “anchorer” le node */
.stepIcon::after{
  content:"";
  position:absolute;
  inset: -6px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 60%);
  z-index:-1;
}

/* Alignement des nodes : 1 à gauche, 2 au centre, 3 à droite */
.step:nth-of-type(1) .stepIcon{ left: 4%; transform: translateX(-50%); }
.step:nth-of-type(2) .stepIcon{ left: 50%; transform: translateX(-50%); }
.step:nth-of-type(3) .stepIcon{ left: 96%; transform: translateX(-50%); }

/* On garde le contenu en mode grille 3 colonnes */
.steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

/* Un peu plus clean sur le texte */
.stepBody h3{
  margin-top: 0 !important;
}
.stepBody p{
  opacity: .75 !important;
}
/* =========================
   STEPS = PROGRESS BAR + NODES (fix 2/3 collés)
========================= */

.steps{
  position: relative;
  margin-top: 34px !important;
  padding-top: 56px !important;      /* espace pour la barre + nodes */
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 28px !important;
}

/* on enlève les séparateurs verticaux */
.stepDivider{display:none !important;}

/* Barre "base" */
.steps::before{
  content:"";
  position:absolute;
  left: 4%;
  right: 4%;
  top: 26px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Barre "progress" (remplie) */
.steps::after{
  content:"";
  position:absolute;
  left: 4%;
  top: 26px;
  height: 4px;
  width: 62%;                         /* ✅ règle ici la progression (ex: 34%, 62%, 100%) */
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.28),
    rgba(255,255,255,.14)
  );
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* step container */
.step{
  position: relative;
  padding-top: 6px;
}

/* Nodes (1/2/3) posés sur la barre */
.stepIcon{
  position:absolute;
  top: -44px;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 16px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* petit halo derrière */
.stepIcon::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 60%);
  z-index:-1;
}

/* ✅ Position des nodes (corrige le 2 et 3 collés) */
.step:nth-of-type(1) .stepIcon{ left: 4%;  transform: translateX(-50%); }
.step:nth-of-type(2) .stepIcon{ left: 50%; transform: translateX(-50%); }
.step:nth-of-type(3) .stepIcon{ left: 96%; transform: translateX(-50%); }

/* Texte un peu plus clean */
.stepBody h3{ margin-top:0 !important; }
.stepBody p{ opacity:.75 !important; line-height:1.6; }
/* =========================
   PROGRESS BAR FIX (positions + épaisseur)
========================= */

/* Barre plus épaisse */
.steps::before{
  height: 8px !important;
  top: 26px !important;
  background: rgba(255,255,255,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 70px rgba(0,0,0,.35) !important;
}

.steps::after{
  height: 8px !important;
  top: 26px !important;
  width: 82% !important; /* ✅ progress “quasi full” (ajuste si tu veux) */
  background: linear-gradient(90deg,
    rgba(255,255,255,.32),
    rgba(255,255,255,.16)
  ) !important;
  box-shadow:
    0 20px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Nodes un peu plus gros */
.stepIcon{
  width: 34px !important;
  height: 34px !important;
  top: -48px !important; /* remonte légèrement pour coller à la barre épaisse */
  font-size: 13px !important;
}

/* ✅ Positions EXACTES comme ton schéma */
.step:nth-of-type(1) .stepIcon{ left: 6%  !important; transform: translateX(-50%) !important; }
.step:nth-of-type(2) .stepIcon{ left: 10% !important; transform: translateX(-50%) !important; }
.step:nth-of-type(3) .stepIcon{ left: 80% !important; transform: translateX(-50%) !important; }

/* Option : + d’air au-dessus */
.steps{
  padding-top: 62px !important;
}
/* =========================
   PROGRESS BAR PRO (nodes + fin OK)
   Remplace/écrase les anciens patches steps
========================= */

.steps{
  position: relative;
  margin-top: 34px !important;
  padding-top: 66px !important;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 28px !important;
}

/* cache les séparateurs verticaux */
.stepDivider{ display:none !important; }

/* --- Variables de la barre --- */
.steps{
  --barL: 72px;   /* marge gauche de la barre (laisse de la place au node 1) */
  --barR: 120px;  /* marge droite (laisse place au rond OK) */
  --barY: 30px;   /* hauteur de la barre dans la section */
  --barH: 10px;   /* épaisseur */
  --p2: 50%;      /* position du node 2 */
  --p3: 78%;      /* position du node 3 (ajuste si besoin) */
  --fill: 100%;   /* progression (on met full pour un rendu “ok”) */
}

/* Barre base */
.steps::before{
  content:"";
  position:absolute;
  left: var(--barL);
  right: var(--barR);
  top: var(--barY);
  height: var(--barH);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

/* Barre “fill” (progression) */
.steps::after{
  content:"";
  position:absolute;
  left: var(--barL);
  top: var(--barY);
  height: var(--barH);
  width: calc((100% - var(--barL) - var(--barR)) * (var(--fill) / 100));
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.16));
  box-shadow: 0 18px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
}

/* Node commun */
.step{
  position: relative;
}
.stepIcon{
  position:absolute;
  top: calc(var(--barY) - 12px); /* centre sur la barre */
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 16px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-weight: 800 !important;
}

/* halo */
.stepIcon::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%);
  z-index:-1;
}

/* ✅ positions EXACTES sur la barre */
.step:nth-of-type(1) .stepIcon{
  left: var(--barL);
  transform: translateX(-50%);
}
.step:nth-of-type(2) .stepIcon{
  left: calc(var(--barL) + (100% - var(--barL) - var(--barR)) * (var(--p2) / 100));
  transform: translateX(-50%);
}
.step:nth-of-type(3) .stepIcon{
  left: calc(var(--barL) + (100% - var(--barL) - var(--barR)) * (var(--p3) / 100));
  transform: translateX(-50%);
}

/* Texte un peu plus clean */
.stepBody h3{ margin-top: 10px !important; }
.stepBody p{ opacity:.75 !important; line-height:1.6; }

/* =========================
   Rond "OK" à la fin de la ligne
========================= */
.steps .progressOk{
  position:absolute;
  top: calc(var(--barY) - 13px);
  right: calc(var(--barR) - 48px); /* place proche de la fin de la barre */
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 16px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.steps .progressOk::before{
  content:"✓";
  font-weight: 900;
  font-size: 16px;
  color: rgba(255,255,255,.92);
  transform: translateY(-1px);
}
.steps .progressOk::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%);
  z-index:-1;
}
/* =========================
   STEPS PROGRESS (FINAL FIX)
   - positions 1/2/3 correctes
   - barre plus épaisse
   - rond OK à la fin
========================= */

.steps{
  position: relative !important;
  margin-top: 34px !important;
  padding-top: 72px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 28px !important;

  /* ✅ IMPORTANT: valeurs NUMÉRIQUES (sans %) */
  --barL: 72px;
  --barR: 120px;
  --barY: 30px;
  --barH: 10px;

  --p2: 50;   /* centre */
  --p3: 80;   /* plus à droite (ajuste 78-86) */
  --fill: 100; /* progression (100 = full) */
}

/* on enlève les séparateurs verticaux */
.stepDivider{ display:none !important; }

/* barre base */
.steps::before{
  content:"";
  position:absolute;
  left: var(--barL);
  right: var(--barR);
  top: var(--barY);
  height: var(--barH);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

/* barre progress (remplie) */
.steps::after{
  content:"";
  position:absolute;
  left: var(--barL);
  top: var(--barY);
  height: var(--barH);
  width: calc((100% - var(--barL) - var(--barR)) * (var(--fill) / 100));
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.18));
  box-shadow: 0 18px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
}

/* nodes 1/2/3 */
.step{ position: relative; }

.stepIcon{
  position:absolute !important;
  top: calc(var(--barY) + (var(--barH) / 2) - 17px) !important; /* centre sur la barre */
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 16px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-weight: 800 !important;
}

.stepIcon::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%);
  z-index:-1;
}

/* ✅ positions alignées SUR la barre */
.step:nth-of-type(1) .stepIcon{
  left: var(--barL) !important;
  transform: translateX(-50%) !important;
}
.step:nth-of-type(2) .stepIcon{
  left: calc(var(--barL) + (100% - var(--barL) - var(--barR)) * (var(--p2) / 100)) !important;
  transform: translateX(-50%) !important;
}
.step:nth-of-type(3) .stepIcon{
  left: calc(var(--barL) + (100% - var(--barL) - var(--barR)) * (var(--p3) / 100)) !important;
  transform: translateX(-50%) !important;
}

/* texte */
.stepBody h3{ margin-top: 12px !important; }
.stepBody p{ opacity:.75 !important; line-height:1.6; }

/* =========================
   Rond "OK" au bout de la barre
========================= */
.steps .progressOk{
  position:absolute !important;
  top: calc(var(--barY) + (var(--barH) / 2)) !important;
  left: calc(100% - var(--barR)) !important;     /* ✅ pile au bout de la ligne */
  transform: translate(-50%, -50%) !important;

  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 16px 55px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events:none;
}

/* ✓ */
.steps .progressOk::before{
  content:"✓";
  font-weight: 900;
  font-size: 16px;
  color: rgba(255,255,255,.92);
  transform: translateY(-1px);
}

/* halo */
.steps .progressOk::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%);
  z-index:-1;
}

/* petit “notch/encoche” style OK (mini encoche en haut à droite) */
.steps .progressOk .notch{ display:none; } /* sécurité si tu en avais */
.steps .progressOk{
  -webkit-mask-image: radial-gradient(circle at 76% 18%, transparent 0 6px, #000 7px);
          mask-image: radial-gradient(circle at 76% 18%, transparent 0 6px, #000 7px);
}
/* =========================
   FIX FINAL : remonter les nodes + OK au bout
========================= */

/* Remonte légèrement la barre (optionnel mais propre) */
.steps{
  --barY: 18px !important;   /* était ~30px */
  padding-top: 58px !important;
}

/* Nodes 1/2/3 pile sur la barre */
.stepIcon{
  top: calc(var(--barY) + (var(--barH) / 2) - 17px) !important; /* centre vertical exact */
  z-index: 5 !important;
}

/* Le ✓ (progressOk) exactement sur la barre */
.steps .progressOk{
  top: calc(var(--barY) + (var(--barH) / 2)) !important;
  z-index: 6 !important;
}

/* Option : léger glow autour du fill (plus “progress bar”) */
.steps::after{
  filter: drop-shadow(0 10px 22px rgba(255,255,255,.06)) !important;
}

/* Option : plus épais encore */
.steps{
  --barH: 12px !important;
}
.step:nth-of-type(1) .stepIcon{
  left: var(--barL) !important;
}
/* =========================
   FIX CHEVAUCHEMENT (nodes vs titres)
========================= */

/* Remonte un peu la barre + nodes */
.steps{
  --barY: 10px !important;         /* la barre monte */
  padding-top: 78px !important;    /* + espace avant le texte */
}

/* Nodes pile sur la barre (encore plus haut) */
.stepIcon{
  top: calc(var(--barY) - 12px) !important; /* 100% sur la ligne */
  z-index: 10 !important;
}

/* Le OK pareil */
.steps .progressOk{
  top: calc(var(--barY) + (var(--barH) / 2)) !important;
  z-index: 20 !important;
}

/* Le contenu de chaque step descend un peu (pour éviter toute collision) */
.stepBody{
  padding-top: 22px !important;
}

/* Si tes titres sont toujours trop proches */
.stepBody h3{
  margin-top: 6px !important;
}
.stepIcon{ top: calc(var(--barY) - 75px) !important; }
.steps .progressOk{ transform: translateX(-24px) !important; }
.steps .progressOk{ transform: translateX(-28px) translateY(-6px) !important; }
.steps .stepDot.first{
  left: var(--barL) !important;   /* même début que la barre */
  transform: translateX(-10000%) translateY(-6px) !important;
}
.steps .stepDot.first{
  left: 0 !important;
  transform: translateX(500%) translateY(-65px) !important;
}
.steps .progressLine{
  height: 6px;              /* épaisseur */
  border-radius: 6px;
  background: rgba(255,255,255,0.25);
  position: relative;
}
.steps .stepDot{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.4);
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 600;
  font-size: 14px;

  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(6px);
}
/* ============================================================
   STEPS PROGRESS BAR — PATCH FINAL (écrase l'ancien)
   - barre épaisse + clean
   - ronds 1/2/3 SUR la ligne
   - rond ✓ au bout
============================================================ */

/* Base layout */
#how .steps{
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 28px !important;

  /* espace pour la barre + nodes AU-DESSUS du texte */
  padding-top: 92px !important;
  margin-top: 28px !important;

  /* réglages */
  --barL: 84px;      /* début de la barre (laisse place au rond 1) */
  --barR: 110px;     /* fin de la barre (laisse place au ✓) */
  --barY: 34px;      /* hauteur de la barre */
  --barH: 10px;      /* épaisseur */

  /* positions (en %) SUR la longueur de la barre) */
  --p1: 0;           /* début */
  --p2: 50;          /* centre */
  --p3: 82;          /* étape 3 (ajuste 78-86 si tu veux) */
  --fill: 100;       /* progression (100 = full jusqu'au ✓) */
}

/* vire les vieux séparateurs */
#how .stepDivider{ display:none !important; }

/* Barre "base" */
#how .steps::before{
  content:"";
  position:absolute;
  left: var(--barL);
  right: var(--barR);
  top: var(--barY);
  height: var(--barH);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

/* Barre "fill" */
#how .steps::after{
  content:"";
  position:absolute;
  left: var(--barL);
  top: var(--barY);
  height: var(--barH);
  width: calc((100% - var(--barL) - var(--barR)) * (var(--fill) / 100));
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.36), rgba(255,255,255,.18));
  box-shadow: 0 18px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
}

/* Nodes (1/2/3) */
#how .step{ position: relative !important; }

#how .stepIcon{
  position:absolute !important;

  /* ✅ sur la ligne : centrage parfait */
  top: calc(var(--barY) + (var(--barH) / 2)) !important;
  transform: translate(-50%, -50%) !important;

  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 18px 65px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  color: rgba(255,255,255,.92) !important;
  font-weight: 850 !important;
  font-size: 13px !important;
  z-index: 20 !important;
}

/* halo soft */
#how .stepIcon::after{
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%);
  z-index:-1;
}

/* Positions exactes */
#how .step:nth-of-type(1) .stepIcon{
  left: var(--barL) !important;
}
#how .step:nth-of-type(2) .stepIcon{
  left: calc(var(--barL) + (100% - var(--barL) - var(--barR)) * (var(--p2) / 100)) !important;
}
#how .step:nth-of-type(3) .stepIcon{
  left: calc(var(--barL) + (100% - var(--barL) - var(--barR)) * (var(--p3) / 100)) !important;
}

/* Texte des steps : redescendu pour ne jamais se faire chevaucher */
#how .stepBody{
  padding-top: 14px !important;
}
#how .stepBody h3{ margin-top: 0 !important; }

/* Rond OK au bout */
#how .progressOk{
  position:absolute !important;

  /* ✅ pile sur la ligne + fin */
  top: calc(var(--barY) + (var(--barH) / 2)) !important;
  left: calc(100% - var(--barR)) !important;
  transform: translate(-50%, -50%) !important;

  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: 0 18px 65px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 30 !important;
  pointer-events:none;
}

/* ✓ */
#how .progressOk::before{
  content:"✓";
  font-weight: 950;
  font-size: 18px;
  color: rgba(255,255,255,.92);
  transform: translateY(-1px);
}

/* petit notch (encoche) */
#how .progressOk{
  -webkit-mask-image: radial-gradient(circle at 78% 18%, transparent 0 6px, #000 7px);
          mask-image: radial-gradient(circle at 78% 18%, transparent 0 6px, #000 7px);
}
/* ============================================================
   COMMENT ÇA MARCHE — 3 CADRES + FLÈCHES (PATCH FINAL)
   => écrase l'ancien progress bar
============================================================ */

/* 1) On neutralise la progress bar / OK */
#how .steps::before,
#how .steps::after{ content:none !important; display:none !important; }

#how .progressOk{ display:none !important; }

/* 2) Grid 3 cards */
#how .steps{
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 28px !important;
  padding-top: 22px !important;  /* plus besoin d'espace pour la barre */
  margin-top: 22px !important;
}

/* 3) Chaque step = CARD */
#how .step{
  position: relative !important;
  padding: 18px 18px 16px !important;
  border-radius: 18px !important;

  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 18px 70px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* 4) Le rond 1/2/3 redevient un badge dans le cadre */
#how .stepIcon{
  position: static !important;
  transform: none !important;

  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;

  margin-bottom: 12px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
}

#how .stepIcon::after{ content:none !important; }

/* 5) Typo dans la card */
#how .stepBody h3{
  margin: 0 0 8px !important;
  font-size: 16px !important;
}
#how .stepBody p{
  margin: 0 !important;
  opacity: .75 !important;
  line-height: 1.55 !important;
}

/* 6) Flèches entre cadres */
#how .step:not(:last-child)::after{
  content: "→";
  position: absolute;
  top: 50%;
  right: -20px;                  /* milieu du gap */
  transform: translate(50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 60px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  color: rgba(255,255,255,.90);
  font-size: 16px;
  font-weight: 900;
  z-index: 5;
}

/* 7) Responsive : en mobile on empile et flèche vers le bas */
@media (max-width: 900px){
  #how .steps{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  #how .step:not(:last-child)::after{
    content: "↓";
    top: auto;
    right: 50%;
    bottom: -10px;
    transform: translate(50%, 50%);
  }
}
#how .stepDivider{ display:none !important; }
/* ============================================================
   #how — enlever le "mur" + élargir les cartes
============================================================ */

/* 1) On casse le max-width du container uniquement dans #how */
#how{
  max-width: none !important;
  width: min(1400px, 96vw) !important;   /* ✅ utilise presque tout l'écran */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Si ton site utilise un wrapper type .section/.container autour */
#how .sectionInner,
#how .container,
#how .wrap{
  max-width: none !important;
  width: 100% !important;
}

/* 2) Les 3 cartes prennent plus d'espace */
#how .steps{
  grid-template-columns: repeat(3, minmax(320px, 1fr)) !important;
  gap: 18px !important;                 /* moins d’espace entre cartes */
}

/* 3) Les cartes plus larges + un peu plus hautes */
#how .step{
  padding: 22px 22px 18px !important;
  border-radius: 20px !important;
  min-height: 140px !important;         /* optionnel: + “premium” */
}

/* 4) Flèches : recentrer dans le gap (vu que gap change) */
#how .step:not(:last-child)::after{
  right: -9px !important;               /* ajuste la bulle flèche */
  transform: translate(50%, -50%) !important;
}

/* 5) Option : si un parent bloque encore l'espace */
.section{
  max-width: none; /* n'affecte pas tout si tu as déjà un wrapper plus fort */
}
.section{
  max-width: min(1400px, 96vw) !important;
}
/* ===============================
   Ajustement cartes + flèches #how
=============================== */

/* Plus d’espace entre les cartes */
#how .steps{
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: 28px !important; /* espace entre cartes */
}

/* Cartes légèrement plus compactes */
#how .step{
  padding: 20px 20px 18px !important;
  min-height: 130px !important;
}

/* Repositionner les flèches */
#how .step:not(:last-child)::after{
  right: -18px !important;   /* éloigne la flèche */
  width: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
  transform: translate(50%, -50%) !important;
}

/* Sécurité : empêche chevauchement */
#how .step{
  position: relative;
  overflow: visible !important;
}
/* ============================================================
   FLOW 3 CARDS + FLÈCHES ENTRE (NO OVERLAP) — PATCH
============================================================ */

/* kill l'ancien systeme de flèches sur les cartes */
#how .step:not(:last-child)::after{ content:none !important; display:none !important; }

/* grille: card / arrow / card / arrow / card */
#how .steps.flow{
  display: grid !important;
  grid-template-columns: 1fr 52px 1fr 52px 1fr !important;
  gap: 22px !important;
  align-items: stretch !important;
  padding-top: 22px !important;
}

/* cartes un peu moins larges, plus propres */
#how .steps.flow .step{
  border-radius: 20px !important;
  padding: 20px 22px 18px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* badge 1/2/3 */
#how .steps.flow .stepIcon{
  position: static !important;
  transform: none !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
}

/* vraie flèche ENTRE les cartes (jamais de chevauchement) */
#how .steps.flow .flowArrow{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 16px 60px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  color: rgba(255,255,255,.90);
  font-size: 16px;
  font-weight: 900;

  align-self: center; /* centre vertical */
}

/* responsive: empile + flèche vers le bas */
@media (max-width: 980px){
  #how .steps.flow{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  #how .steps.flow .flowArrow{
    width: 44px;
    height: 44px;
  }
  #how .steps.flow .flowArrow::before{ content:"↓"; }
  #how .steps.flow .flowArrow{ font-size: 18px; }
  #how .steps.flow .flowArrow{ content: none; } /* (texte dans div) */
}
/* ============================================================
   #how — CARDS + FLÈCHES (premium liquid glass)
============================================================ */

/* ---------- Cards ---------- */
#how .steps.flow .step{
  border-radius: 22px !important;
  padding: 22px 24px 20px !important;

  /* glass propre */
  background:
    radial-gradient(1200px 220px at 20% 0%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045)) !important;

  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 22px 90px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.35) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

/* léger "lift" au hover */
#how .steps.flow .step:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:
    0 28px 120px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.35) !important;
}

/* ---------- Badge 1/2/3 ---------- */
#how .steps.flow .stepIcon{
  width: 36px !important;
  height: 36px !important;
  margin-bottom: 14px !important;

  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 55%),
    rgba(255,255,255,.08) !important;

  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 14px 50px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.12) !important;

  color: rgba(255,255,255,.95) !important;
}

/* ---------- Typo ---------- */
#how .steps.flow .stepBody h3{
  font-size: 17px !important;
  letter-spacing: -.2px;
  margin: 0 0 8px !important;
}

#how .steps.flow .stepBody p{
  opacity: .78 !important;
  line-height: 1.6 !important;
}

/* ---------- Flèches (plus "flow", moins bulle) ---------- */
#how .steps.flow .flowArrow{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;

  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 60%),
    rgba(255,255,255,.06) !important;

  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 18px 70px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.10) !important;

  color: rgba(255,255,255,.92) !important;
  font-size: 15px !important;
  font-weight: 900 !important;

  position: relative;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

/* petit trait de liaison (donne l’effet "workflow") */
#how .steps.flow .flowArrow::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 2px;
  transform: translate(-50%,-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  border-radius: 999px;
  z-index: -1;
  opacity: .65;
}

/* hover flèche */
#how .steps.flow .flowArrow:hover{
  transform: scale(1.05);
  border-color: rgba(255,255,255,.16) !important;
}

/* ---------- Spacing général ---------- */
#how .steps.flow{
  gap: 26px !important;
  grid-template-columns: 1fr 56px 1fr 56px 1fr !important;
}
/* ============================================================
   FLOW ARROWS — STYLE PRO
============================================================ */

#how .steps.flow .flowArrow{
  width: 48px !important;
  height: 2px !important;
  border-radius: 999px !important;

  /* Ligne principale */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.15),
    rgba(255,255,255,.6),
    rgba(255,255,255,.15)
  ) !important;

  border: none !important;
  box-shadow:
    0 0 12px rgba(255,255,255,.25),
    0 0 30px rgba(255,255,255,.12);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  transition: all .25s ease;
}

/* Pointe de flèche */
#how .steps.flow .flowArrow::after{
  content:"➜";
  font-size: 18px;
  font-weight: 700;

  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);

  color: rgba(255,255,255,.9);
  text-shadow: 0 0 10px rgba(255,255,255,.35);

  transition: all .25s ease;
}

/* Hover = effet "flux" */
#how .steps.flow .flowArrow:hover{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.25),
    rgba(255,255,255,.9),
    rgba(255,255,255,.25)
  ) !important;

  box-shadow:
    0 0 18px rgba(255,255,255,.45),
    0 0 50px rgba(255,255,255,.25);
}

/* Animation légère */
#how .steps.flow .flowArrow:hover::after{
  transform: translateY(-50%) translateX(4px);
  text-shadow: 0 0 16px rgba(255,255,255,.6);
}
/* ================================
   ALIGNEMENT PRO DES FLÈCHES
================================ */

/* Container des steps */
#how .steps.flow{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center !important;
}

/* Flèches */
#how .steps.flow .flowArrow{
  width: 46px !important;
  height: 2px !important;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,.25),
    rgba(255,255,255,.85),
    rgba(255,255,255,.25)
  );

  border-radius: 99px;

  position: relative;
  top: 0 !important;
  margin: 0 14px !important;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  box-shadow:
    0 0 10px rgba(255,255,255,.25),
    0 0 24px rgba(255,255,255,.15);
}

/* Pointe */
#how .steps.flow .flowArrow::after{
  content: "➜";

  position: absolute;
  right: -12px;
  top: 50%;

  transform: translateY(-50%);

  font-size: 17px;
  font-weight: 600;

  color: rgba(255,255,255,.9);

  text-shadow: 0 0 10px rgba(255,255,255,.4);
}
#how .flowArrow{
  font-size: 0 !important;
}
/* ================================
   SUPPRESSION TRAIT AU-DESSUS FLÈCHE
================================ */

#how .flowArrow{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* Si un pseudo-element traîne */
#how .flowArrow::before{
  content: none !important;
  display: none !important;
}
/* =========================================
   FLOW ARROW — FIX TRAIT PARASITE (OVERRIDE)
========================================= */

#how .steps.flow .flowArrow{
  /* reset total */
  all: unset !important;

  /* zone de flèche */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 56px !important;
  height: 24px !important;   /* hauteur "zone", pas le trait */
  position: relative !important;
}

/* le TRAIT unique (centré) */
#how .steps.flow .flowArrow::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 10px !important;   /* laisse place à la pointe */
  top: 50% !important;
  transform: translateY(-50%) !important;

  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.22),
    rgba(255,255,255,.85),
    rgba(255,255,255,.22)
  ) !important;

  box-shadow: 0 0 14px rgba(255,255,255,.22) !important;
}

/* la POINTE (une seule) */
#how .steps.flow .flowArrow::after{
  content: "➜" !important;
  position: absolute !important;
  right: -2px !important;
  top: 50% !important;
  transform: translateY(-52%) !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 0 12px rgba(255,255,255,.35) !important;
}
#how .steps.flow{
  overflow: visible !important;
}
#how .steps.flow *{
  background-image: none;
}
/* =========================================
   FIX ULTIME : supprimer le hairline restant
========================================= */

/* 1) On tue le "trait long" de l'ancien style si il existe encore */
#how .steps.flow .flowArrow::after{
  /* on garde la pointe, mais on empêche toute "ligne" parasite */
  background: none !important;
  box-shadow: none !important;
}

/* 2) On s'assure qu'aucun autre pseudo-element ne dessine une ligne */
#how .steps.flow .flowArrow::before{
  box-shadow: none !important;          /* retire glow qui peut créer un hairline */
  filter: none !important;
}

/* 3) Anti-hairline (blur + border) */
#how .steps.flow .flowArrow{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 4) Si tu avais une "ligne de liaison" ailleurs (ancienne version) */
#how .steps.flow .flowArrow::after{
  /* si jamais tu utilisais une flèche texte dans ::after, on la remet ici */
  content: "➜" !important;
  position: absolute !important;
  right: -2px !important;
  top: 50% !important;
  transform: translateY(-52%) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.92) !important;
  text-shadow: none !important; /* enlève glow */
}
/* ============================================================
   PRICING — Plans (paliers) + row frais
============================================================ */

#pricing .planGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

#pricing .plan{
  border-radius: 22px;
  padding: 18px 18px 16px;
  background:
    radial-gradient(1200px 220px at 20% 0%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

#pricing .plan:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 28px 120px rgba(0,0,0,.70), inset 0 1px 0 rgba(255,255,255,.12);
}

#pricing .planTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 10px;
}

#pricing .planName{
  font-weight: 800;
  letter-spacing: -.2px;
}

#pricing .planBadge{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  opacity: .9;
}

#pricing .planPrice{
  display:flex;
  align-items:baseline;
  gap: 8px;
  margin: 8px 0 6px;
}

#pricing .planValue{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.6px;
}

#pricing .planUnit{
  opacity: .7;
}

#pricing .planDesc{
  opacity:.78;
  margin-bottom: 12px;
}

#pricing .planList{
  margin: 0 0 14px 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap: 8px;
  opacity:.86;
}

#pricing .planList li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

#pricing .planList li::before{
  content:"✓";
  opacity:.7;
  margin-top: 1px;
}

#pricing .plan .btn{
  width: 100%;
  justify-content:center;
}

/* Plan "featured" subtil */
#pricing .plan.featured{
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 30px 130px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* Frais conversion */
#pricing .feeRow{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 22px;
  display:grid;
  grid-template-columns: 1.1fr 1.9fr;
  gap: 18px;
}

#pricing .feeLeft{
  display:flex;
  gap: 14px;
  align-items:center;
}

#pricing .feeBig{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.6px;
}

#pricing .feeTitle{ font-weight: 800; }
#pricing .feeSmall{ opacity:.75; margin-top: 2px; }

#pricing .feeExamples{
  opacity:.9;
}

#pricing .feeExamples .exRow{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#pricing .feeExamples .exRow:last-of-type{
  border-bottom: none;
}
#pricing .feeExamples .exNote{
  opacity:.7;
  margin-top: 10px;
}

/* Responsive */
@media (max-width: 1100px){
  #pricing .planGrid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
  #pricing .feeRow{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  #pricing .planGrid{ grid-template-columns: 1fr; }
}
/* ===================================================
   Badge "Le plus choisi"
=================================================== */

.plan.popular{
  position: relative;
  overflow: visible;
}

.popularBadge{
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-90%);

  background: linear-gradient(135deg, #ffffff, #dcdcdc);
  color: #000;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;

  padding: 6px 14px;
  border-radius: 999px;

  box-shadow:
    0 6px 20px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.8);

  border: 1px solid rgba(255,255,255,.6);

  z-index: 10;
  white-space: nowrap;
}
/* ============================================================
   PRACTICAL — version premium (sans cadres partout)
============================================================ */

#practical .practicalHead p{
  max-width: 64ch;
}

#practical .miniChips{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#practical .chip{
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  opacity: .9;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

#practical .practicalGrid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 40px;
}

/* Pas des "cartes" : juste une ligne + léger glass */
#practical .pItem{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

#practical .pItem:nth-child(1),
#practical .pItem:nth-child(2){
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Icône en petit rond glass */
#practical .pIcon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  opacity: .95;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#practical .pBody h3{
  margin: 0 0 6px 0;
  font-weight: 800;
}

#practical .pBody p{
  margin: 0;
  opacity: .86;
  line-height: 1.55;
}

#practical .pHint{
  margin-top: 8px !important;
  opacity: .65 !important;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 900px){
  #practical .practicalGrid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
/* SUPPRIME LES MURS INVISIBLES — NAV FULL WIDTH */

.nav{
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav__inner{
  max-width: none !important;   /* enlève la limite */
  width: 100% !important;

  margin: 0 !important;
  padding: 14px 32px !important; /* petit confort sur les côtés */

  box-sizing: border-box;
}

/* enlève les limites globales */
.container,
.container--wide{
  max-width: none !important;
  width: 100% !important;
}

/* évite le scroll horizontal */
html, body{
  overflow-x: hidden;
}
/* NAV full width sans murs + contenu aligné */
.nav{
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent; /* pas de bande noire */
  border: 0;
}

.navInner{
  width: 100%;
  max-width: none;           /* <- enlève les limites */
  padding: 14px 28px;        /* <- espace aux bords */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Empêche le hero de coller la nav */
.hero{
  padding-top: 26px;
}
/* CONTENU NAV CENTRÉ ENTRE LES TRAITS ROUGES */

.nav{
  width: 100%;
  background: transparent;
  border: 0;
}

/* Limite le contenu, pas la barre */
.navInner{
  max-width: 100px;   /* <- largeur idéale */
  width: 100%;

  margin: 0 auto;      /* centre */
  padding: 14px 24px;  /* espace intérieur */

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
}

/* NAV PARFAITEMENT CENTRÉE */
.navInner{
  max-width: 1200px !important;
  width: calc(100% - 48px) !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important; /* gauche / centre / droite */
  align-items: center !important;

  padding: 14px 0 !important;
  box-sizing: border-box !important;
}

/* Centre parfait du menu */
.navCenter{ justify-self: center !important; }
.navLinks{ display:flex !important; gap: 22px !important; justify-content:center !important; }

/* Aligne les côtés */
.navLeft{ justify-self: start !important; }
.navRight{ justify-self: end !important; }
.navCtas{ display:flex !important; gap: 12px !important; align-items:center !important; }
/* NAV: centrer le menu + garder tout sur 1 ligne (sans changer ton HTML) */

.nav{
  width: 100% !important;
}

.nav{
  overflow: hidden; /* évite débordements */
}

.nav{
  background: transparent !important;
}

.nav{
  border: 0 !important;
}

/* 1) Le conteneur interne: largeur + alignement */
.nav{
  display: flex !important;
  justify-content: center !important;  /* centre le groupe complet */
}

.nav{
  padding: 0 !important;
}

/* IMPORTANT: ton .nav actuel est le conteneur, donc on le limite */
.nav{
  max-width: 1200px !important;
  width: calc(100% - 48px) !important;
  margin: 0 auto !important;

  height: 64px !important;
  align-items: center !important;
  gap: 18px !important;
  box-sizing: border-box !important;
}

/* 2) Empêche le menu de passer à la ligne */
.navLinks{
  display: flex !important;
  gap: 22px !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* 3) Garder les CTAs collés à droite tout en centrant le menu */
.brand{ flex: 0 0 auto !important; }
.navLinks{ flex: 1 1 auto !important; justify-content: center !important; }
.navCtas{ flex: 0 0 auto !important; display:flex !important; align-items:center !important; gap: 12px !important; white-space: nowrap !important; }

/* 4) Si écran trop petit: on réduit l’espace plutôt que wrap */
@media (max-width: 900px){
  .nav{ width: calc(100% - 28px) !important; }
  .navLinks{ gap: 14px !important; }
}
/* ALIGNEMENT VERTICAL PARFAIT DE LA NAV */

.nav{
  height: px !important;          /* hauteur fixe propre */
  display: flex !important;
  align-items: center !important;  /* centre verticalement */
}

/* Tous les blocs dans la nav */
.nav > *,
.navLinks,
.navCtas,
.brand{
  display: flex !important;
  align-items: center !important;
}

/* Liens menu */
.navLinks a{
  line-height: -15 !important;        /* enlève décalage */
  padding: 6px 0 !important;
}

/* Boutons */
.navCtas .btn,
.navCtas .link{
  line-height: 1 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.nav{
  height: 68px !important;
}
/* ALIGNEMENT PARFAIT SUR UNE LIGNE */

.nav{
  display: flex !important;
  align-items: center !important; /* centre verticalement TOUS les enfants */
}

/* Tous les blocs directs */
.nav > a,
.nav > div{
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Centre aussi les liens */
.navLinks{
  display: flex !important;
  align-items: center !important;
}

/* Empêche les décalages par la typo */
.navLinks a,
.navCtas a,
.brandName{
  line-height: 1.2 !important;
  vertical-align: middle !important;
}

/* Logo */
.brandLogo{
  display: block !important;
}
/* ===== FIX HARD: menu exactement sur la même ligne ===== */

/* 1) hauteur + centre global */
.nav{
  height: 72px !important;              /* ajuste si tu veux 64/68/72 */
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) neutralise TOUT décalage vertical possible */
.brand,
.navLinks,
.navCtas,
.navLinks a,
.navCtas a{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  position: static !important;
  top: auto !important;
  bottom: auto !important;

  transform: none !important;

  line-height: 1 !important;
}

/* 3) chaque bloc prend la hauteur de la nav et centre son contenu */
.brand,
.navLinks,
.navCtas{
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* 4) centre le menu */
.navLinks{
  flex: 1 1 auto !important;
  justify-content: center !important;
  gap: 22px !important;
  white-space: nowrap !important;
}

/* 5) gauche / droite propres */
.brand{ flex: 0 0 auto !important; }
.navCtas{
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  white-space: nowrap !important;
}

/* 6) logo (évite baseline weird) */
.brandLogo{ display: block !important; }
.brandMark{ display:flex !important; align-items:center !important; }
.brandName{ display:block !important; line-height: 1 !important; }
/* ===== ESPACEMENT NAV PREMIUM ===== */

/* Logo un peu plus à gauche */
.brand{
  margin-right: 48px !important;
}

/* Espace plus large entre les menus */
.navLinks{
  gap: 36px !important;   /* avant ~22 */
}

/* Boutons un peu plus à droite */
.navCtas{
  margin-left: 48px !important;
}

/* Optionnel : respire un peu plus */
.nav{
  padding-left: 12px !important;
  padding-right: 12px !important;
}
/* ===== NAV — SCALE + ESPACEMENT PREMIUM ===== */

/* Logo + nom */
.brandLogo{
  height: 34px !important;   /* avant ~28 */
}

.brandName{
  font-size: 18px !important;
  font-weight: 600;
}

/* Menus centre */
.navLinks a{
  font-size: 15.5px !important; /* avant ~14 */
  font-weight: 500;
}

/* Connexion */
.navCtas .link{
  font-size: 15px !important;
}

/* Bouton inscription */
.navCtas .btn{
  font-size: 15px !important;
  padding: 8px 18px !important; /* plus "clickable" */
  border-radius: 999px;
}

/* Décalage gauche / droite (flèches rouges) */
.nav{
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Plus d’air global */
.nav{
  height: 74px !important; /* avant ~72 */
}
/* ===== SUPPRESSION DES MURS INVISIBLES ===== */

/* Libère complètement la nav */
.top,
.nav{
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Libère le conteneur interne */
.navInner{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  padding: 0 48px !important; /* espace contrôlé */
  box-sizing: border-box !important;
}

/* Si tu n’as pas navInner */
.nav{
  padding: 0 48px !important;
}

/* Supprime limites globales */
.container,
.container--wide,
.wrap,
.page,
main,
section{
  max-width: none !important;
}

/* Stop scroll horizontal parasite */
html, body{
  overflow-x: hidden;
}
/* ===== NAV — ÉQUILIBRE DES ESPACES ===== */

/* Structure globale */
.nav{
  display: flex !important;
  justify-content: center !important;
}

/* Conteneur interne */
.navInner{
  display: flex !important;
  align-items: center !important;

  max-width: 1400px !important;   /* limite douce */
  width: 100% !important;

  margin: 0 auto !important;
  padding: 0 32px !important;

  box-sizing: border-box !important;
}

/* Logo gauche */
.brand{
  margin-right: 36px !important;
}

/* Menu central */
.navLinks{
  display: flex !important;
  gap: 26px !important;           /* espace entre menus */
  margin: 0 auto !important;     /* centre le menu */
}

/* Boutons droite */
.navCtas{
  margin-left: 36px !important;
  gap: 12px !important;
}
/* DESCENDRE LA NAVBAR */

.top{
  padding-top: 20px !important;
}

.nav{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
/* ===== TRUST / SÉCURITÉ ===== */
.trust{
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
  padding: 72px 0 22px;
}

.trustHead h2{
  font-size: 34px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.trustLead{
  margin: 0 0 16px;
  color: rgba(255,255,255,.66);
  max-width: 720px;
  line-height: 1.55;
}

.trustChips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

.trustChips .chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  line-height: 1;
}

.trustGrid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.trustCard{
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 80px rgba(0,0,0,.35);
}

.trustIcon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
  font-size: 18px;
}

.trustCard h3{
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.trustCard p{
  margin: 0 0 12px;
  color: rgba(255,255,255,.66);
  line-height: 1.55;
  font-size: 13.5px;
}

.trustMeta{
  font-size: 12px;
  color: rgba(255,255,255,.52);
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 10px;
}

/* Responsive */
@media (max-width: 980px){
  .trustGrid{ grid-template-columns: 1fr; }
  .trust{ width: calc(100% - 44px); padding-top: 56px; }
  .trustHead h2{ font-size: 28px; }
}
/* ===== TRUST + COMPARATIF (exact like screenshot) ===== */

.trustExact{
  width: min(1200px, calc(100% - 64px));
  margin: 0 auto;
  padding: 52px 0 40px;
}

.trustTop h2{
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.trustDesc{
  margin: 0 0 12px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
  line-height: 1.45;
  max-width: 680px;
}

.trustChips{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.trustChips .chip{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.70);
  font-size: 12px;
  line-height: 1;
}

/* 3 small cards */
.trustCards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.tCard{
  display:flex;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 60px rgba(0,0,0,.35);
}

.tIco{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size: 14px;
  flex: 0 0 auto;
}

.tTxt h3{
  margin: 1px 0 4px;
  font-size: 13px;
}

.tTxt p{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255,255,255,.62);
}

/* compare head */
.compareHead{
  margin-top: 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.compareHead h3{
  margin: 0 0 6px;
  font-size: 14px;
}

.compareHead p{
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,.52);
  max-width: 680px;
  line-height: 1.45;
}

.badge{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.65);
  font-size: 12px;
  line-height: 1;
}

/* table card */
.compareCard{
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 80px rgba(0,0,0,.35);
  overflow: hidden;
}

.compareTable{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.compareTable thead th{
  text-align: left;
  padding: 14px 16px;
  color: rgba(255,255,255,.70);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-weight: 600;
}

.compareTable thead th:first-child{
  width: 210px;
  color: rgba(255,255,255,.45);
  font-weight: 500;
}

.compareTable tbody td{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: rgba(255,255,255,.60);
}

.compareTable tbody td:first-child{
  color: rgba(255,255,255,.45);
}

.compareTable tbody tr:last-child td{
  border-bottom: 0;
}

.compareNote{
  padding: 12px 16px 14px;
  text-align:center;
  font-size: 11.5px;
  color: rgba(255,255,255,.40);
}

/* responsive */
@media (max-width: 980px){
  .trustExact{ width: calc(100% - 44px); }
  .trustCards{ grid-template-columns: 1fr; }
  .compareTable thead{ display:none; }
  .compareTable, .compareTable tbody, .compareTable tr, .compareTable td{
    display:block;
    width: 100%;
  }
  .compareTable tr{
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .compareTable td{
    padding: 10px 14px;
  }
  .compareTable td:first-child{
    font-weight: 700;
    color: rgba(255,255,255,.75);
  }
}
/* ===== AÉRATION SECTION SÉCURITÉ + COMPARATIF ===== */

/* Zone globale plus large */
.trustExact{
  width: min(1350px, calc(100% - 96px)) !important;
}

/* Plus d'air entre les blocs */
.trustTop{
  margin-bottom: 32px !important;
}

/* Espace entre les cartes sécurité */
.trustCards{
  gap: 20px !important;
  margin-bottom: 28px !important;
}

/* Comparatif descend un peu */
.compareHead{
  margin-top: 40px !important;
  margin-bottom: 14px !important;
}

/* Carte comparatif plus respirante */
.compareCard{
  margin-top: 18px !important;
}

/* Tableau plus aéré */
.compareTable td,
.compareTable th{
  padding: 18px 18px !important;
}

/* Plus d'espace vertical global */
.trustExact > *{
  margin-bottom: 12px;
}
/* ===== FOOTER FULL WIDTH + PREMIUM ===== */

.footer{
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.06);
}

.footerInner{
  width: min(1350px, calc(100% - 96px));
  margin: 0 auto;
  padding: 26px 0 18px;

  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 26px;
  align-items: start;
}

.footerBrand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
}

.footerLogo{
  width: 22px;
  height: 22px;
  display:block;
}

.footerName{
  font-weight: 700;
  letter-spacing: -0.01em;
}

.footerCopy{
  margin: 10px 0 10px;
  color: rgba(255,255,255,.55);
  font-size: 12.5px;
}

.footerDisclaimer{
  margin: 0 0 14px;
  max-width: 520px;
  color: rgba(255,255,255,.50);
  font-size: 12.5px;
  line-height: 1.5;
}

.footerChips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footerChips .chip{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.65);
  font-size: 12px;
  line-height: 1;
}

/* right columns */
.footerCols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  justify-items: end;
}

.footerCol{
  min-width: 140px;
}

.footerTitle{
  font-size: 12px;
  color: rgba(255,255,255,.50);
  margin-bottom: 10px;
  letter-spacing: .02em;
}

.footerCol a{
  display:block;
  padding: 6px 0;
  text-decoration:none;
  color: rgba(255,255,255,.70);
  font-size: 12.5px;
}

.footerCol a:hover{
  color: rgba(255,255,255,.92);
}

/* bottom line */
.footerBottom{
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.18);
}

.footerBottomInner{
  width: min(1350px, calc(100% - 96px));
  margin: 0 auto;
  padding: 12px 0;

  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.footerSmall{
  font-size: 12px;
  color: rgba(255,255,255,.52);
}

/* responsive */
@media (max-width: 980px){
  .footerInner,
  .footerBottomInner{
    width: calc(100% - 44px);
  }
  .footerInner{
    grid-template-columns: 1fr;
  }
  .footerCols{
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .footerCol{ min-width: 0; }
  .footerBottomInner{
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ===== KILL LES MURS INVISIBLES (global) ===== */

html, body{
  width: 100%;
  overflow-x: hidden;
}

/* Si tu as un wrapper principal qui centre tout */
.container, .wrap, .page, .main, .site, .shell, .layout, .content, .app, .inner{
  max-width: none !important;
}

/* Beaucoup de templates ont un main centré */
main{
  max-width: none !important;
  width: 100% !important;
}

/* Sections : enlève les max-width cachés */
section{
  max-width: none !important;
}

/* IMPORTANT: footer doit être full width */
.footer{
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;  /* force full bleed même si parent centré */
  margin-right: calc(50% - 50vw) !important;
}
.footerInner,
.footerBottomInner{
  width: min(1500px, calc(100% - 96px)) !important;
}
/* ================================
   FULL WIDTH + ESPACE FAQ -> FOOTER
   (robuste, même sans classes)
================================ */

/* stop murs + pas de scroll horizontal */
html, body{
  width: 100%;
  overflow-x: hidden;
}

/* 1) FOOTER FULL-BLEED (casse le container centré) */
footer, .footer{
  width: 100vw !important;
  max-width: none !important;

  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;

  border-top: 1px solid rgba(255,255,255,.06);
}

/* 2) Espace entre la FAQ et le footer (ton problème principal) */
footer, .footer{
  margin-top: 56px !important;      /* <-- décolle le footer de la FAQ */
  padding-top: 24px !important;
}

/* 3) Donne de l’air au bloc FAQ juste avant le footer (au cas où) */
section:last-of-type{
  padding-bottom: 56px !important;
}

/* 4) Contenu du footer aligné "pro" mais sans murs */
footer > *{
  width: min(1400px, calc(100% - 96px));
  margin: 0 auto;
  box-sizing: border-box;
}

/* si tu as une barre du bas dans le footer (genre footerBottom) */
footer .footerBottom, .footer .footerBottom{
  width: 100% !important;
}
footer .footerBottom > *, .footer .footerBottomInner{
  width: min(1400px, calc(100% - 96px));
  margin: 0 auto;
}

/* mobile */
@media (max-width: 980px){
  footer > *{
    width: calc(100% - 44px);
  }
}
/* ===== FOOTER LARGE SANS COLLER AUX BORDS ===== */

footer > *{
  width: min(1600px, calc(100% - 120px)) !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}

/* Barre du bas */
footer .footerBottomInner,
footer .footerBottom > *{
  width: min(1600px, calc(100% - 120px)) !important;
  margin: 0 auto !important;
}

/* Mobile */
@media (max-width: 980px){
  footer > *{
    width: calc(100% - 44px) !important;
  }
}
/* ===== FOOTER: PLUS LARGE, MAIS PAS COLLÉ AUX BORDS (FIX BÉTON) ===== */

/* 1) Le footer reste full-bleed, mais avec des marges internes */
footer, .footer{
  padding-left: clamp(24px, 4vw, 72px) !important;
  padding-right: clamp(24px, 4vw, 72px) !important;
  box-sizing: border-box !important;
}

/* 2) Largeur max du contenu (cible toutes les structures possibles) */
footer .footerInner,
footer .footerBottomInner,
footer .footerBottom > div,
footer > .footerInner,
footer > .footerBottom,
footer > div{
  max-width: 1600px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* 3) Si tu as encore un "mur" à cause d'un wrapper interne */
footer .container,
footer .wrap,
footer .inner,
footer .content,
footer .shell{
  max-width: 1600px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Mobile: garde une marge propre */
@media (max-width: 980px){
  footer, .footer{
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}
/* =========================================================
   AUTH (Connexion / Inscription) — GhostPays UI
   ========================================================= */

/* Page */
.authPage{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 72px 24px;
}

.authShell{
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
}

/* Card principale */
.authCard{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: 0 20px 90px rgba(0,0,0,.45);
  overflow: hidden;
}

.authCardInner{
  padding: 26px;
}

/* Header auth */
.authTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.authTitle{
  margin: 0 0 6px;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.authSub{
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Toggle Connexion / Inscription */
.authTabs{
  display:flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.authTab{
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  color: rgba(255,255,255,.70);
  text-decoration:none;
}

.authTab.isActive{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.10);
}

/* Progress (questionnaire) */
.authProgress{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  margin: 16px 0 20px;
}

.authProgress > span{
  display:block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
}

/* Step badge */
.authStepKicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.authStepName{
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

.authStepCount{
  font-size: 12px;
  color: rgba(255,255,255,.52);
}

/* Form grid */
.authGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 860px){
  .authGrid{ grid-template-columns: 1fr; }
}

/* Fields */
.field{
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.label{
  font-size: 12.5px;
  color: rgba(255,255,255,.70);
}

.input, .select, .textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  outline: none;
  font-size: 13.5px;
}

.textarea{ min-height: 96px; resize: vertical; }

.input::placeholder, .textarea::placeholder{
  color: rgba(255,255,255,.35);
}

/* Focus */
.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}

/* ✅ FIX: Dropdown pays (fond blanc + texte blanc) */
select, .select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(255,255,255,.03);
}

select option{
  background: #0b0f14;          /* fond sombre */
  color: rgba(255,255,255,.92); /* texte lisible */
}

/* Checkbox blocks */
.checkRow{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.checkRow input{
  margin-top: 3px;
}

.checkRow .checkText{
  font-size: 13px;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
}

/* Buttons */
.authActions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.btnAuth{
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);
  cursor: pointer;
  font-size: 13px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 160px;
}

.btnAuth:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}

.btnAuth.primary{
  background: rgba(255,255,255,.90);
  color: #0b0f14;
  border-color: rgba(255,255,255,.16);
}

.btnAuth.primary:hover{
  background: rgba(255,255,255,.95);
}

.btnAuth.ghost{
  background: rgba(255,255,255,.03);
}

/* Small notes */
.authHint{
  margin-top: 14px;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  line-height: 1.5;
}

/* Summary (fin inscription) */
.authSummary{
  margin-top: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  padding: 12px 12px;
}

.authSummaryRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 6px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.authSummaryRow:last-child{ border-bottom: 0; }

.authSummaryRow b{
  color: rgba(255,255,255,.92);
  font-weight: 600;
}

/* Pills bottom like your UI */
.authFootPills{
  margin-top: 16px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.authFootPills .chip{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.65);
  font-size: 12px;
  line-height: 1;
}
body{ outline: 4px solid red !important; }
/* Base */
*{ box-sizing:border-box; }
body.gp{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(255,255,255,.92);
  background: radial-gradient(1200px 800px at 50% 20%, rgba(255,255,255,.06), transparent 55%),
              #07090c;
}

/* Container */
.container{
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

/* Nav */
header.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 18px 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
  backdrop-filter: blur(10px);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: rgba(255,255,255,.92);
}
.brand__dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 6px rgba(255,255,255,.08);
}
.brand__name{ font-weight:700; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  text-decoration:none;
  cursor:pointer;
}
.btn--primary{
  background: rgba(255,255,255,.92);
  color:#0b0f14;
}
.btn--ghost{
  background: rgba(255,255,255,.03);
}
.wFull{ width:100%; }

/* Auth layout */
main.auth{ padding: 60px 0 90px; }
.authWrap{
  width: min(560px, 100%);
  margin: 0 auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: 0 20px 90px rgba(0,0,0,.45);
  padding: 22px;
}
.authHead h1{ margin: 0 0 6px; font-size: 40px; letter-spacing:-.03em; }
.authHead p{ margin: 0 0 16px; color: rgba(255,255,255,.60); }

/* Form */
.loginCard, .qForm{ display:grid; gap: 12px; }
.qField label{
  display:block;
  font-size: 12.5px;
  color: rgba(255,255,255,.70);
  margin-bottom: 6px;
}
.qField input, .qField select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  outline:none;
}
.qField input::placeholder{ color: rgba(255,255,255,.35); }

/* Dropdown options fix */
select option{ background:#0b0f14; color:rgba(255,255,255,.92); }

.loginBottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color: rgba(255,255,255,.45);
  font-size: 12.5px;
}
.mutedLink{ color: rgba(255,255,255,.70); text-decoration:none; }
.mutedLink:hover{ text-decoration:underline; }

/* Chips */
.authNote{
  margin-top: 14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.chip{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.65);
  font-size: 12px;
}
/* ====== SHOPIFY-LIKE STEPPER ====== */
.qForm { position: relative; }

/* cache toutes les étapes */
.qStep { display: none; }

/* n'affiche que l'étape active */
.qStep.is-active { display: block; }

/* animation douce */
.qStep.is-active{
  animation: stepIn .25s ease both;
}
@keyframes stepIn{
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* barre de progression */
.authProgress{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  margin: 14px 0 18px;
}
.authProgress__bar{
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: rgba(255,255,255,.85);
  transition: width .25s ease;
}

/* actions */
.qActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 14px;
}
.qActions .btn{ min-width: 140px; }
.qActions .btn--ghost{ opacity:.9; }

/* layout row step 3 */
.qRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px){
  .qRow{ grid-template-columns: 1fr; }
}

/* cartes step 5 */
.qCards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 640px){
  .qCards{ grid-template-columns: 1fr; }
}
.qCard{
  position: relative;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.qCard input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.qCard__top{ font-weight:700; }
.qCard__mid{ color: rgba(255,255,255,.75); }
.qCard__bot{ color: rgba(255,255,255,.55); font-size: 12.5px; }
.qCard:has(input:checked){
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* FIX dropdown (blanc/blanc) */
.qField select,
.qField option{
  background: #0b0f14;
  color: rgba(255,255,255,.92);
}
/* =========================
   AUTH (LOGIN / SIGNUP)
   ========================= */

.gp {
  min-height: 100vh;
  background: radial-gradient(1200px 700px at 50% 0%, rgba(255,255,255,.10), transparent 60%),
              radial-gradient(900px 600px at 0% 20%, rgba(255,255,255,.06), transparent 55%),
              #060708;
  color: rgba(255,255,255,.92);
}

/* Top bar (simple, clean) */
.nav {
  position: relative; /* pas sticky ici */
  width: 100%;
  padding: 18px 0;
}
.nav__inner.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
  font-weight: 700;
  letter-spacing: .2px;
}
.brand__dot{
  width:10px;height:10px;border-radius:50%;
  background: rgba(255,255,255,.65);
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}
.nav__cta{
  display:flex;
  align-items:center;
  gap:12px;
}

.container{ max-width: 1200px; margin: 0 auto; padding: 0 28px; }

.auth{
  padding: 54px 0 90px;
}
.authWrap{
  max-width: 820px;           /* PLUS GRAND */
  margin: 0 auto;
}
.authHead h1{
  font-size: 56px;            /* PLUS GRAND */
  line-height: 1.02;
  margin: 0 0 10px;
  letter-spacing: -1px;
}
.authHead p{
  margin: 0 0 16px;
  color: rgba(255,255,255,.72);
  font-size: 16px;
}

.loginCard, .qForm, .doneV2{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
}

/* Fields */
.qField{ margin: 14px 0; }
.qField label{
  display:block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
.qHint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}
.qRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 700px){
  .authHead h1{ font-size: 42px; }
  .qRow{ grid-template-columns: 1fr; }
}

input, select, textarea{
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  padding: 0 14px;
  outline: none;
}

/* IMPORTANT: fix dropdown (fond blanc / texte blanc) */
select{
  appearance: none;
  background-color: rgba(0,0,0,.35) !important;
  color: rgba(255,255,255,.92) !important;
}
select option{
  background: #0b0d10;  /* fond sombre dans la liste */
  color: rgba(255,255,255,.92);
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  text-decoration:none;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
}
.btn--primary{
  background: #fff;
  color: #0b0d10;
  border-color: transparent;
  font-weight: 700;
}
.btn--ghost{
  background: rgba(255,255,255,.06);
}
.wFull{ width: 100%; }
.loginBottom{
  display:flex;
  gap: 10px;
  justify-content:center;
  margin-top: 14px;
  color: rgba(255,255,255,.55);
  font-size: 13px;
}
.mutedLink{ color: rgba(255,255,255,.72); text-decoration:none; }
.mutedLink:hover{ text-decoration: underline; }

/* Chips */
.authNote{
  margin-top: 14px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size: 12px;
  color: rgba(255,255,255,.75);
}

/* Progress */
.authProgress{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  margin: 14px 0 18px;
}
.authProgress__bar{
  height: 100%;
  width: 16%;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  transition: width .25s ease;
}

/* Multi-step: 1 step at a time (Shopify-like) */
.qStep{ display: none; }
.qStep.is-active{ display: block; }

.qTitle{
  font-size: 14px;
  color: rgba(255,255,255,.65);
  margin-bottom: 6px;
}
.qActions{
  display:flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 14px;
}
.qBottom{
  margin-top: 14px;
  color: rgba(255,255,255,.65);
  font-size: 13px;
}
.qBottom a{ color: rgba(255,255,255,.88); }

/* Volume cards */
.qCards{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 700px){
  .qCards{ grid-template-columns: 1fr; }
}
.qCard{
  position: relative;
  display:block;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  cursor: pointer;
}
.qCard input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.qCard__top{ font-weight: 800; }
.qCard__mid{ color: rgba(255,255,255,.85); margin-top: 4px; }
.qCard__bot{ color: rgba(255,255,255,.60); margin-top: 6px; font-size: 12px; }
.qCard:has(input:checked){
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}

/* Check lines */
.checkLine{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin: 10px 0;
}
.checkLine input{ width: 18px; height: 18px; margin-top: 2px; }

/* Done screen (bigger + clean) */
.doneV2 .doneTitle{
  font-size: 22px;
  font-weight: 900;
  margin: 8px 0 6px;
}
.doneV2 .doneSub{
  color: rgba(255,255,255,.70);
  margin-bottom: 14px;
}
.doneGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0 16px;
}
@media (max-width: 700px){
  .doneGrid{ grid-template-columns: 1fr; }
}
.doneCard{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.doneCard__k{ color: rgba(255,255,255,.60); font-size: 12px; }
.doneCard__v{ color: rgba(255,255,255,.92); font-weight: 700; margin-top: 6px; }
.doneActionsV2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px){
  .doneActionsV2{ grid-template-columns: 1fr; }
}
.doneFoot{
  margin-top: 12px;
  color: rgba(255,255,255,.60);
  font-size: 13px;
}
/* Grand rectangle (panel) derrière la carte */
.authStage{
  display: flex;
  justify-content: center;
  padding: 34px 0 70px;
}

/* Le rectangle que tu veux (zone entourée) */
.authPanel{
  width: min(1200px, 100%);
  min-height: 520px;              /* donne le “grand” rectangle */
  border-radius: 28px;
  padding: 54px 54px;             /* espace intérieur */
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 30px 100px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}

/* Ta carte au centre du rectangle */
.authPanel .authWrap{
  max-width: 720px;               /* carte plus large */
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 900px){
  .authPanel{
    padding: 26px 18px;
    min-height: auto;
    border-radius: 22px;
  }
}
/* OVERLAY */
.gpOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter: blur(12px);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

/* ACTIVE */
.gpOverlay.active{
  display:flex;
}

/* MODAL */
.gpModal{
  width: min(1100px, 92%);
  min-height: 600px;

  background: linear-gradient(
    145deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.02)
  );

  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;

  box-shadow: 0 40px 120px rgba(0,0,0,.7);

  padding:32px;
  color:#fff;

  animation: pop .25s ease;
}

@keyframes pop{
  from{ transform:scale(.9); opacity:0 }
  to{ transform:scale(1); opacity:1 }
}


/* TOP */
.gpModalTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.gpModalTitle{
  font-weight:800;
  font-size:22px;
}

.gpClose{
  background:none;
  border:none;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}


/* TABS */
.gpTabs{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}

.gpTab{
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  cursor:pointer;
}

.gpTab.active{
  background:#fff;
  color:#000;
}


/* BODY */
.gpModalBody{
  display:flex;
  justify-content:center;
}


/* CONTENT */
.gpTabContent{
  display:none;
  width:100%;
  max-width:520px;
}

.gpTabContent.active{
  display:block;
}


/* FORM */
.gpForm{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.gpForm label{
  font-size:13px;
  opacity:.8;
}

.gpForm input,
.gpForm select{
  height:44px;
  border-radius:12px;
  padding:0 12px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
}

.btnMain{
  margin-top:10px;
  height:48px;
  border-radius:999px;
  border:none;
  background:#fff;
  color:#000;
  font-weight:700;
  cursor:pointer;
}


/* LINKS */
.gpMiniLinks{
  margin-top:10px;
  font-size:13px;
  opacity:.7;
}

.gpMiniLinks a{
  color:#fff;
  cursor:pointer;
  text-decoration:underline;
}


/* PROGRESS */
.gpProgress{
  height:6px;
  background:rgba(255,255,255,.1);
  border-radius:999px;
  overflow:hidden;
  margin:16px 0;
}

.gpBar{
  width:40%;
  height:100%;
  background:#fff;
}
/* =========================
   AUTH MODAL (Connexion/Inscription)
   style popup + background flouté
========================= */

.gpModalOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6vh 24px;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(26px) saturate(1.15);
  -webkit-backdrop-filter: blur(26px) saturate(1.15);
}

.gpModalOverlay.is-open{ display:flex; }

.gpModal{
  width: min(1100px, calc(100vw - 64px));
  max-height: 88vh;
  overflow: hidden;

  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 120px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);

  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

/* Top bar du popup (tabs + close) */
.gpModalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.gpModalTabs{
  display:flex;
  gap:10px;
  align-items:center;
}

.gpTab{
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82);
  font-weight: 600;
  font-size: 13px;
  cursor:pointer;
}

.gpTab.is-active{
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.88);
  border-color: rgba(255,255,255,.0);
}

.gpModalClose{
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.86);
  cursor:pointer;
}

/* Body du popup */
.gpModalBody{
  padding: 28px;
  overflow: auto;
  max-height: calc(88vh - 70px);
}

/* Conteneur auth (grand, pas “tout petit”) */
.authPopup{
  width: min(760px, 100%);
  margin: 0 auto;
}

.authPopup h1{
  font-size: clamp(44px, 4.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.authPopup .lead{
  color: rgba(255,255,255,.74);
  margin: 0 0 18px;
  font-size: 14px;
}

/* Card formulaire (propre + épais) */
.authCard{
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.authCard .qField label{
  display:block;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  margin: 0 0 8px;
}

.authCard input,
.authCard select{
  width:100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  padding: 0 14px;
  outline: none;
}

.authCard input::placeholder{ color: rgba(255,255,255,.35); }

.authActionsRow{
  display:flex;
  gap:12px;
  margin-top: 14px;
}

.authActionsRow .btn{
  height: 46px;
}

/* Stepper / progress (inscription) */
.authProgress{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin: 14px 0 18px;
}
.authProgress__bar{
  height:100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(255,255,255,.90);
}

/* steps */
.qStep{ display:none; }
.qStep.is-active{ display:block; }

.qTitle{
  font-weight: 800;
  margin: 2px 0 10px;
  font-size: 14px;
  color: rgba(255,255,255,.90);
}

.qHint{
  margin-top: 8px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

.qRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.qActions{
  display:flex;
  gap:12px;
  margin-top: 14px;
}

.qActions .btn{ height: 46px; }

.qCards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.qCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 14px;
  cursor:pointer;
  display:block;
}

.qCard input{ display:none; }

.qCard__top{ font-weight:800; display:block; }
.qCard__mid{ display:block; color: rgba(255,255,255,.75); margin-top:4px; }
.qCard__bot{ display:block; color: rgba(255,255,255,.55); margin-top:2px; font-size:12px; }

.qCard:has(input:checked){
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

.checkLine{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.checkLine input{ margin-top: 3px; }

@media (max-width: 720px){
  .gpModal{ width: calc(100vw - 28px); }
  .gpModalBody{ padding: 18px; }
  .qRow{ grid-template-columns: 1fr; }
  .qCards{ grid-template-columns: 1fr; }
}
/* ===== AUTH POPUP (Blur + Modal like Veloria) ===== */
.authOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.authOverlay.is-open{ display:block; }

.authBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Le popup (cadre) */
.authModal{
  position: relative;
  width: min(980px, calc(100vw - 64px));
  margin: 80px auto;
  border-radius: 22px;
  padding: 22px 22px 24px;
  background: rgba(18,18,20,.55);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
}

/* fermer */
.authClose{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  cursor: pointer;
}

/* top row */
.authTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.authBrand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 700;
  color: rgba(255,255,255,.90);
}
.authDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}
.authTabs{
  display:flex;
  gap:10px;
}
.authTab{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.75);
  cursor: pointer;
}
.authTab.is-active{
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}

/* panes */
.authPane{ display:none; }
.authPane.is-active{ display:block; }

.authTitle{
  margin: 10px 0 4px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  color: rgba(255,255,255,.92);
}
.authSub{
  margin: 0 0 16px;
  color: rgba(255,255,255,.65);
}

/* Carte interne */
.authCard{
  border-radius: 18px;
  padding: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.authField{
  display:flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.authField label{
  color: rgba(255,255,255,.75);
  font-size: 13px;
}
.authField input, .authField select{
  height: 46px;
  border-radius: 14px;
  padding: 0 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  outline: none;
}
.authField input::placeholder{ color: rgba(255,255,255,.35); }

.authHint{
  font-size: 12px;
  color: rgba(255,255,255,.45);
}

.authBtn{
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  cursor: pointer;
  padding: 0 18px;
}
.authBtnPrimary{
  width: 100%;
  background: rgba(255,255,255,.92);
  color: #0b0b0c;
  border: none;
}

.authLinksRow{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  color: rgba(255,255,255,.55);
  font-size: 13px;
}
.authLink{
  color: rgba(255,255,255,.78);
  text-decoration: none;
}
.dotSep{ opacity:.55; }

.authChips{
  margin-top: 14px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap: wrap;
}
.authChip{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.70);
  font-size: 12px;
}

/* Signup steps */
.authProgress{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  margin: 10px 0 16px;
}
.authProgressBar{
  height: 100%;
  width: 16%;
  background: rgba(255,255,255,.88);
  border-radius: 999px;
}

.step{ display:none; }
.step.is-active{ display:block; }

.stepTitle{
  font-weight: 700;
  color: rgba(255,255,255,.85);
  margin: 6px 0 10px;
}

.stepActions{
  display:flex;
  gap: 10px;
  margin-top: 14px;
}
.stepActions .authBtnPrimary{
  width: auto;
  flex: 1;
}
.stepActions .authBtn{
  flex: 1;
}

.authGrid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cards4{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.pickCard{
  position: relative;
  display:flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.pickCard input{
  position:absolute;
  inset:0;
  opacity:0;
}
.pickCard:has(input:checked){
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.07);
}
.pcTop{ color: rgba(255,255,255,.88); font-weight: 700; }
.pcMid{ color: rgba(255,255,255,.65); }
.pcBot{ color: rgba(255,255,255,.45); font-size: 12px; }

.checkLine{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.75);
  margin: 10px 0;
}

body.is-modal-open{ overflow: hidden; }

@media (max-width: 720px){
  .authModal{ width: calc(100vw - 22px); margin: 16px auto; }
  .authGrid2{ grid-template-columns: 1fr; }
  .cards4{ grid-template-columns: 1fr; }
}
body.is-modal-open{ overflow:hidden; }

.gpOverlay{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999999;
}
.gpOverlay.is-open{ display:block; }

.gpBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.gpModal{
  position: relative;
  width: min(980px, calc(100vw - 80px));
  margin: 80px auto;
  padding: 22px;
  border-radius: 22px;
  background: rgba(20,22,25,.72);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 120px rgba(0,0,0,.60);
}

.gpClose{
  position:absolute;
  right: 16px;
  top: 14px;
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
}

.gpTabs{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-bottom: 12px;
}
.gpTab{
  border-radius:999px;
  padding:10px 14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#d7d7d7;
  cursor:pointer;
}
.gpTab.is-active{
  background:#fff;
  color:#111;
}

.gpPane{ display:none; }
.gpPane.is-active{ display:block; }

.gpTitle{
  font-size: 56px;
  line-height: 1;
  margin: 6px 0 6px;
  color:#fff;
}
.gpSub{ color: rgba(255,255,255,.70); margin-bottom: 14px; }

.gpCard{
  margin-top: 14px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.gpField{ display:flex; flex-direction:column; gap:8px; margin-bottom: 14px; }
.gpField label{ color: rgba(255,255,255,.70); font-size: 13px; }
.gpField input, .gpField select{
  height: 46px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  padding: 0 14px;
  outline:none;
}

.gpBtn{
  height: 46px;
  border-radius: 999px;
  padding: 0 16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
}
.gpBtnPrimary{
  background:#fff;
  color:#111;
  border-color: transparent;
  width: 100%;
}

.gpMiniLinks{ display:flex; gap:10px; justify-content:center; margin: 12px 0 0; color: rgba(255,255,255,.55); }
.gpLink{ color: rgba(255,255,255,.70); text-decoration:none; }
.gpLink:hover{ text-decoration:underline; }

.gpChips{ display:flex; gap:10px; justify-content:center; margin-top: 14px; flex-wrap:wrap; }
.gpChip{
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.75);
}

.gpProgress{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  margin: 10px 0 16px;
}
.gpProgressBar{
  height:100%;
  background:#fff;
  border-radius:999px;
}

.gpStep{ display:none; }
.gpStep.is-active{ display:block; }

.gpRow{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gpHint{ color: rgba(255,255,255,.55); font-size: 12px; }

.gpCards{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.gpPick{
  display:block;
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
}
.gpPick input{ display:none; }
.gpPickTop{ display:block; color:#fff; font-weight:700; }
.gpPickMid{ display:block; color: rgba(255,255,255,.70); margin-top: 2px; }
.gpPickBot{ display:block; color: rgba(255,255,255,.55); margin-top: 4px; font-size: 12px; }
.gpPick:has(input:checked){
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.08);
}

.gpCheck{
  display:flex; gap:10px;
  padding:12px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  margin-top: 10px;
  color: rgba(255,255,255,.80);
}

.gpActions{
  display:flex;
  gap: 12px;
  margin-top: 16px;
}
.gpActions .gpBtn{ width: 40%; }
.gpActions .gpBtnPrimary{ width: 60%; }

.gpDoneTitle{ font-size: 28px; color:#fff; font-weight:800; }
.gpDoneSub{ margin-top: 8px; color: rgba(255,255,255,.75); }
.gpDoneGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
  color: rgba(255,255,255,.75);
}
.gpDoneGrid div{
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
}
.gpDoneGrid span{ display:block; font-size: 12px; opacity:.7; }
.gpDoneGrid b{ display:block; margin-top:4px; color:#fff; }
.gpDoneActions{ display:flex; gap: 12px; }
.gpDoneActions .gpBtn{ width: 40%; }
.gpDoneActions .gpBtnPrimary{ width: 60%; }

@media (max-width: 760px){
  .gpModal{ width: calc(100vw - 24px); margin: 60px auto; }
  .gpTitle{ font-size: 42px; }
  .gpRow{ grid-template-columns: 1fr; }
  .gpCards{ grid-template-columns: 1fr; }
  .gpActions{ flex-direction:column; }
  .gpActions .gpBtn, .gpActions .gpBtnPrimary{ width:100%; }
}
/* Questionnaire */
.gpProg{margin:14px 0 18px}
.gpProgBar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.gpProgBar span{display:block;height:100%;width:33.33%;border-radius:999px;background:#fff;opacity:.95;transition:width .25s ease}
.gpProgTxt{margin-top:8px;opacity:.8;font-size:13px;display:flex;justify-content:space-between}

.gpStep{display:none}
.gpStep.isShown{display:block}

.gpSelect{
  width:100%;
  height:46px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  padding:0 14px;
  outline:none;
}

.gpChips{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 14px}
.gpChip{
  border-radius:999px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.gpChip:hover{transform:translateY(-1px)}
.gpChip.isOn{background:rgba(255,255,255,.92);color:#000;border-color:transparent}

.gpChecks{display:flex;flex-direction:column;gap:10px;margin:10px 0 6px}
.gpCheck{display:flex;gap:10px;align-items:center;opacity:.9}
.gpCheck input{accent-color:#fff}

.gpRow{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:12px}

.gpBack,.gpNext{
  height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.gpNext{background:rgba(255,255,255,.92);color:#000;border-color:transparent}
.gpCheckCgu{margin-top:10px}
.gpOverlay{position:fixed;inset:0;display:none;place-items:center;z-index:9999}
.gpOverlay.is-open{display:grid}
.gpBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(14px)}
.gpModal{position:relative;z-index:2; width:min(980px,92vw); border-radius:22px; overflow:hidden}

.gpModalTop{display:flex;justify-content:space-between;align-items:center;padding:22px 24px}
.gpLine{height:1px;background:rgba(255,255,255,.08)}

.gpClose{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer}

.gpTabsRight{display:flex;gap:10px;justify-content:flex-end;padding:18px 24px 0}
.gpTab{border-radius:999px;padding:10px 16px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.gpTab.is-active{background:#fff;color:#000;border-color:transparent}

.gpPane{display:none;padding:18px 24px 26px}
.gpPane.is-active{display:block}

.gpProgress{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:12px 0 16px}
.gpProgressBar{height:100%;background:#fff;border-radius:999px;width:16%;transition:width .2s ease}

.gpStep{display:none}
.gpStep.is-active{display:block}

.gpActions{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.gpBtn{height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.gpBtnPrimary{background:#fff;color:#000;border-color:transparent}

.gpBtnMain{width:100%;height:56px;border-radius:999px;border:0;background:#fff;color:#000;font-weight:600;margin-top:14px;cursor:pointer}
/* ✅ Overlay = flou glass (pas noir plein) */
.gpOverlay{
  position:fixed; inset:0;
  display:none; place-items:center;
  z-index:9999;
}
.gpOverlay.is-open{display:grid}

/* backdrop = flou + voile clair */
.gpBackdrop{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 600px at 80% 80%, rgba(255,255,255,.08), transparent 65%),
    rgba(0,0,0,.18);  /* <<< baisse le noir */
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
}

/* petit “voile” glass sur le modal lui-même */
.gpModal{
  position:relative; z-index:2;
  width:min(980px,92vw);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(20,22,24,.78), rgba(12,13,15,.72));
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  overflow:hidden;
}

/* option : un léger “fog” interne (plus premium) */
.gpModal::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(600px 260px at 30% 25%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(520px 240px at 75% 55%, rgba(255,255,255,.06), transparent 65%);
  pointer-events:none;
  filter: blur(2px);
  opacity:.9;
}
/* ✅ Lignes “cards” pour checkbox (ancienne présentation) */
.gpCheck{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  margin:10px 0;
}
.gpCheck input{
  margin-top:3px;
  width:16px; height:16px;
  accent-color:#fff;
}
.gpCheck span{
  opacity:.88;
  line-height:1.35;
}
.gpActions{
  display:flex;
  gap:14px;
  margin-top:16px;
}

.gpBtn{
  flex:1;
  height:52px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-weight:600;
}
.gpBtn:hover{ background: rgba(255,255,255,.08); }

.gpBtnPrimary{
  background: rgba(255,255,255,.92);
  color:#000;
  border-color:transparent;
}
.gpBtnPrimary:hover{ background: rgba(255,255,255,.98); }
.gpChips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.gpChip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  opacity:.9;
  font-size:12.5px;
}
/* ✅ 1) Modal = rectangle (plus large + moins “carré”) */
.gpModal{
  width: min(1120px, 92vw) !important;
  border-radius: 24px !important;
}

/* ✅ 2) Enlève les lignes séparatrices si elles existent */
.gpLine,
.gpDivider,
.gpModal hr{
  display:none !important;
}

/* ✅ 3) Header : aligne GhostPays avec Connexion/Inscription */
.gpModalTop{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding: 26px 28px 10px !important; /* + bas, + clean */
}

/* Titre un peu plus bas + même baseline visuelle */
.gpModalTitle{
  margin: 0 !important;
  padding-top: 8px !important; /* descend GhostPays */
  font-size: 22px !important;
  font-weight: 700 !important;
}

/* Close button reste en haut à droite */
.gpClose{
  margin-top: 0 !important;
}

/* ✅ 4) Tabs à droite : remonte-les au niveau du header */
.gpTabsRight{
  padding: 0 28px 0 !important;
  margin-top: -6px !important;  /* remonte Connexion/Inscription */
  display:flex !important;
  justify-content:flex-end !important;
  gap: 12px !important;
}

/* ✅ 5) Body : même mise en page login/signup (centré comme ta capture) */
.gpModalBody{
  padding: 22px 28px 30px !important;
}

.gpPane{
  padding: 0 !important;
  max-width: 520px;              /* bloc contenu centré */
  margin: 0 auto;
}

/* Titres + sous-titres plus premium */
.gpH2{ font-size: 30px !important; margin: 12px 0 8px !important; }
.gpMuted{ opacity:.8 !important; margin-bottom: 14px !important; }

/* Inputs plus clean */
.gpForm input,
.gpForm select{
  height: 46px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* ✅ 6) Boutons “Retour/Continuer” : largeur égale, style propre */
.gpActions{ gap: 14px !important; }
.gpBtn{
  height: 52px !important;
  border-radius: 999px !important;
}

/* ✅ 7) Supprime l’espace réservé aux chips si jamais */
.gpChips{ display:none !important; }
/* 🔥 Largeur identique entre questionnaire et compte créé */
.gpPane{
  max-width: 820px !important;   /* avant ~520px → trop petit */
}

/* Le formulaire prend toute la largeur */
.gpForm{
  width: 100% !important;
}

/* Chaque step = pleine largeur */
.gpStep{
  width: 100% !important;
}

/* Inputs + select = plus larges */
.gpForm input,
.gpForm select{
  width: 100% !important;
  max-width: 100% !important;
  height: 52px !important;
  font-size: 15px;
}

/* Barre de progression plus large */
.gpProgress{
  max-width: 100% !important;
}

/* Zone boutons élargie */
.gpActions{
  width: 100% !important;
}

/* Boutons bien proportionnés */
.gpBtn,
.gpBtnPrimary{
  min-width: 160px;
  padding: 0 26px;
}

/* Résumé "Compte créé" : même largeur */
.gpDone,
.gpDoneGrid{
  max-width: 100% !important;
}
/* Grille 2 colonnes quand possible */
.gpGrid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.gpRecapTitle{
  font-size:22px;
  font-weight:700;
  margin-top:6px;
}

.gpRecapGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.gpRecapCard{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.gpRecapCard span{
  display:block;
  opacity:.70;
  font-size:12.5px;
  margin-bottom:6px;
}

.gpRecapCard b{
  font-size:14.5px;
  font-weight:700;
}
/* ✅ éviter qu’un overlay/pseudo-element bloque les clics */
.gpModal, .gpModal * { pointer-events:auto; }
.gpModal::before { pointer-events:none !important; }
.gpBackdrop { pointer-events:auto; }

/* ✅ Étape conditions : card premium */
.gpTermCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  padding:18px 18px;
  margin-top:12px;
}

.gpTermLine{
  display:flex;
  gap:14px;
  align-items:flex-start;
  cursor:pointer;
  user-select:none;
}

.gpTermBox{
  width:18px !important;
  height:18px !important;
  margin-top:2px;
  flex:0 0 auto;
  accent-color:#fff;
  transform:none !important;     /* ✅ stop gros check */
}

.gpTermHint{
  display:block;
  opacity:.65;
  font-size:12.5px;
  margin-top:6px;
}

/* Boutons mieux */
.gpActions{
  display:flex;
  gap:14px;
  margin-top:18px;
}
.gpBtn{
  flex:1;
  height:54px;
  border-radius:999px;
}
.gpBtnPrimary{
  flex:1;
  height:54px;
  border-radius:999px;
}
/* =========================
   A P E R Ç U  P R E M I U M
   ========================= */

/* Empêche le texte de la page derrière de "polluer" (gros titres visibles) */
body.is-modal-open > *:not(#authOverlay){
  filter: blur(6px) saturate(0.9);
  opacity: .55;
}

/* Centre le contenu mieux */
.gpPane{
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* Titres plus clean */
.gpH2{
  font-size: 34px !important;
  letter-spacing: -0.3px;
  margin: 10px 0 6px !important;
}
.gpMuted{
  font-size: 14.5px !important;
  opacity:.78 !important;
}

/* Progress bar plus “fintech” */
.gpProgress{
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  overflow:hidden;
  margin: 14px 0 18px !important;
}
.gpProgressBar{
  height: 100% !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
}

/* Etape 6 premium */
.gpStepKicker{
  font-size: 12px;
  opacity: .68;
  margin-top: 12px;
}
.gpStepTitle{
  font-size: 20px;
  font-weight: 750;
  margin-top: 6px;
}
.gpStepDesc{
  margin-top: 8px;
  opacity: .75;
  font-size: 13.5px;
  line-height: 1.35;
}

/* Consent card */
.gpConsent{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 16px;
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  cursor:pointer;
}

.gpConsent input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  margin-top: 3px;
  accent-color:#fff;
  transform:none !important;
}

.gpConsentMain{
  font-weight: 650;
  opacity: .92;
}
.gpConsentSub{
  margin-top: 6px;
  font-size: 12.5px;
  opacity: .62;
}

/* Boutons plus premium & cohérents */
.gpActions{
  margin-top: 18px !important;
  gap: 14px !important;
}
.gpBtn, .gpBtnPrimary{
  height: 56px !important;
  border-radius: 999px !important;
  font-weight: 650 !important;
}
.gpBtn{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.gpBtnPrimary{
  background: rgba(255,255,255,.92) !important;
  color:#000 !important;
  border: 0 !important;
}
.gpBtnPrimary:hover{ background: rgba(255,255,255,.98) !important; }

/* Lien "Déjà un compte" plus discret */
.gpMiniLinks{
  margin-top: 14px !important;
  opacity: .75;
}
.gpMiniLinks a{ opacity: .9; text-decoration: underline; }
/* =============================
   CHECKBOX CUSTOM (PROPRE)
   ============================= */

.gpConsentRow{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:18px;
  padding:14px 16px;

  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
}

/* on vire tous les styles bizarres */
.gpConsentRow input[type="checkbox"]{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  width:18px !important;
  height:18px !important;
  min-width:18px;
  min-height:18px;

  border-radius:5px;
  border:2px solid rgba(255,255,255,.6);
  background:transparent;

  cursor:pointer;
  position:relative;
}

/* quand coché */
.gpConsentRow input[type="checkbox"]:checked{
  background:#fff;
  border-color:#fff;
}

/* check icon */
.gpConsentRow input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;

  width:5px;
  height:10px;

  border: solid #000;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* texte */
.gpConsentLabel{
  cursor:pointer;
  font-size:14.5px;
  line-height:1.4;
  opacity:.9;
  user-select:none;
}
/* =========================
   CHECKBOX FORCE (IMBLOQUABLE)
   ========================= */

/* La ligne (glass) */
.gpForceConsent{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:14px 16px !important;
  margin-top:18px !important;

  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;

  cursor:pointer !important;
  user-select:none !important;
  position:relative !important;
  z-index:50 !important; /* passe au-dessus */
}

/* ✅ On NE STYLE PAS le vrai checkbox : on le rend invisible + hors problème */
.gpForceCb{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px !important;
  height:1px !important;
  left:-9999px !important;
  top:auto !important;

  appearance:auto !important;
  -webkit-appearance:auto !important;
  -moz-appearance:auto !important;
  transform:none !important;
}

/* ✅ Le faux carré (celui que tu vois) */
.gpForceBox{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;

  border-radius:5px !important;
  border:2px solid rgba(255,255,255,.65) !important;
  background:transparent !important;

  display:inline-block !important;
  position:relative !important;
  flex:0 0 auto !important;
}

/* ✅ Texte */
.gpForceTxt{
  font-size:14.5px !important;
  line-height:1.35 !important;
  opacity:.9 !important;
}

/* ✅ État coché : on remplit le faux carré */
.gpForceCb:checked + .gpForceBox{
  background:#fff !important;
  border-color:#fff !important;
}

/* ✅ Check dessiné */
.gpForceCb:checked + .gpForceBox::after{
  content:"" !important;
  position:absolute !important;
  left:5px !important;
  top:1px !important;
  width:5px !important;
  height:10px !important;
  border: solid #000 !important;
  border-width:0 2px 2px 0 !important;
  transform:rotate(45deg) !important;
}

/* ✅ au cas où un truc au-dessus bloque les clics */
.gpModal::before{ pointer-events:none !important; }
.gpModal *{ pointer-events:auto !important; }
/* ==== FORCE consent (sans checkbox) ==== */
.gpConsentToggle{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;

  padding:14px 16px !important;
  margin-top:16px !important;

  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;

  cursor:pointer !important;
  color:#fff !important;
  text-align:left !important;
  position:relative !important;
  z-index:9999 !important; /* passe au-dessus */
}

.gpConsentBox{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  border-radius:5px !important;
  border:2px solid rgba(255,255,255,.65) !important;
  background:transparent !important;
  display:inline-block !important;
  position:relative !important;
}

.gpConsentText{
  font-size:14.5px !important;
  line-height:1.35 !important;
  opacity:.92 !important;
}

.gpConsentToggle.is-on .gpConsentBox{
  background:#fff !important;
  border-color:#fff !important;
}
.gpConsentToggle.is-on .gpConsentBox::after{
  content:"" !important;
  position:absolute !important;
  left:5px !important;
  top:1px !important;
  width:5px !important;
  height:10px !important;
  border: solid #000 !important;
  border-width:0 2px 2px 0 !important;
  transform:rotate(45deg) !important;
}

.gpConsentErr{
  display:none;
  margin-top:10px;
  font-size:13px;
  opacity:.75;
}
.gpConsentErr.is-on{ display:block; }

/* si quelque chose bloque les clics */
.gpModal::before{ pointer-events:none !important; }
.gpModal *{ pointer-events:auto !important; }
.gpKycStep{ display:none; }
.gpKycStep.is-active{ display:block; }
/* KYC pro cards */
.gpKycGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.gpUploadWide{ grid-column: 1 / -1; }

.gpUploadCard{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius:18px;
  padding:14px 14px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition: transform .12s ease, background .12s ease;
}
.gpUploadCard:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
}

.gpUploadInput{ display:none; }

.gpUploadIcon{
  width:34px; height:34px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  font-weight:700;
  opacity:.9;
}

.gpUploadTitle{ font-weight:750; font-size:15px; }
.gpUploadSub{ font-size:13px; opacity:.72; line-height:1.3; }
.gpUploadMeta{
  margin-top:6px;
  font-size:12.5px;
  opacity:.7;
}

.gpKycNote, .gpKycHint{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-size:13px;
  opacity:.82;
}

/* Done pane grid (si pas déjà) */
.gpPane[data-pane="done"] .gpDoneGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.gpPane[data-pane="done"] .gpDoneGrid > div{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius:16px;
  padding:12px 14px;
}
.gpPane[data-pane="done"] .gpDoneGrid span{
  display:block;
  font-size:12px;
  opacity:.7;
  margin-bottom:6px;
}
/* KYC spacing (évite “collé”) */
.gpPane[data-pane="kyc"] .gpH2{ margin-bottom:10px; }
.gpPane[data-pane="kyc"] .gpMuted{ margin-bottom:18px; line-height:1.35; }

.gpPane[data-pane="kyc"] label{
  display:block;
  margin:16px 0 8px;   /* ✅ espace label → input */
  font-size:13px;
  opacity:.85;
}

.gpPane[data-pane="kyc"] input,
.gpPane[data-pane="kyc"] select{
  width:100%;
  margin-top:0;        /* on gère via label */
}

.gpKycNote{
  margin-top:16px;     /* ✅ espace après dernier champ */
  line-height:1.35;
}