/* Accueil « Aurore » (validé par Aziz le 31/10/2026). Source et historique : branche da-futur, da/base-a/variante.css. */
/* Variante A · Aurore (v2, retours d'Aziz du 31/10 à 7 h) — la page actuelle, avec :
   1. le haut en deux colonnes sur ordinateur (texte + formulaire à gauche, démo à droite) ;
   2. AUCUN halo : une seule source de lumière qui part du bas, des rayons qui bougent et des étoiles qui montent
      (en haut de page sous la démo, et en bas de page sous le formulaire) ; plus de coupure entre la barre, le haut et les logos ;
   3. trois pancartes autour de la démo, qui changent avec l'exemple affiché ;
   4. « Comment ça marche » redisposé : les 3 étapes sur une ligne de temps, puis un seul panneau à 3 colonnes. */

/* 2. Les scènes éclairées par le bas */
.scene{position:relative;isolation:isolate}
.scene > .source{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
.scene-haut{background:#fff}
/* la lumière s'éteint en douceur tout en bas : aucune coupure avec la section suivante */
.scene-haut > .source{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 140px,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 140px,#000 76%,transparent 100%)}
.scene-haut .logos{background:transparent;position:relative;z-index:1}
.scene-bas{background:var(--ink)}
.scene-bas .final,.scene-bas .foot{background:transparent}
.scene-bas footer.foot::before,.scene-bas footer.foot::after{display:none}

/* 1. Le haut */
.hero{background:transparent;padding:56px 0 64px}
.logos{border-top:0}
@media (min-width:1000px){
  .hero{text-align:left}
  .hero .wrap{max-width:1240px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:56px;align-items:center}
  .hero .wrap > *:not(.stage){grid-column:1}
  .hero .wrap > *{text-align:left}
  .hero .stage{grid-column:2;grid-row:1 / span 5;margin:0;max-width:none;position:relative}
  .hero h1{font-size:clamp(42px,4.5vw,62px)}
  .hero .lead{margin:20px 0 24px;max-width:none}
  .offre-beta{margin:0 0 16px;display:flex}
  .oui-haut{max-width:none;margin:0}
  .oh-champs{grid-template-columns:1fr 1fr}
  .oh-champs .field:nth-child(3){grid-column:1 / -1}
  .oh-champs .btn{grid-column:1 / -1}
  .mock{border-radius:20px;border-bottom:1px solid var(--line)}
}
.mock{box-shadow:0 30px 60px -30px rgba(15,17,20,.30),0 2px 6px rgba(15,17,20,.05)}
.offre-beta{background:rgba(255,255,255,.85)}

/* 3. Les pancartes autour de la démo */
.pc{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:#fff;
  border:1px solid var(--line);box-shadow:0 10px 24px -12px rgba(15,17,20,.25);
  font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;animation:flotte 6s ease-in-out infinite;transition:opacity .3s}
.pc i{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.pc i.ok{background:var(--ok)}
.pc i.ton{background:#F2B92B}
.pc1{top:-22px;left:-34px}
.pc2{bottom:-20px;left:-34px;animation-delay:-2s}
.pc3{top:-22px;right:36px;animation-delay:-4s}
.pc.change{opacity:0}
@keyframes flotte{50%{transform:translateY(-8px)}}
@media (max-width:999px){
  .pc{font-size:12px;padding:8px 11px}
  .pc1{top:-16px;left:6px}.pc2{top:auto;bottom:-18px;left:auto;right:8px}.pc3{display:none}
  .stage{position:relative}
}

/* 4. « Comment ça marche » : ligne de temps + un seul panneau */
section.soft{background:#F7F8FB}
@media (min-width:861px){
  #comment .steps{position:relative;gap:40px;margin-bottom:56px}
  #comment .steps::before{content:"";position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:22px;height:2px;background:linear-gradient(90deg,var(--blue),#93C5FD,var(--blue))}
  #comment .steps .tile{background:none;border:0;box-shadow:none;padding:0;text-align:center}
  #comment .steps .tile .n{position:relative;z-index:1;width:46px;height:46px;margin:0 auto 18px;font-size:17px;background:var(--blue);color:#fff;box-shadow:0 0 0 8px #F7F8FB}
  #comment .steps .tile p{max-width:300px;margin:0 auto}

  #comment .split{gap:0;background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 1px 2px rgba(15,17,20,.04)}
  #comment .split .tile{background:none;border-radius:0;box-shadow:none}
  #comment .split .tile + .tile{border-left:1px solid var(--line)}
  #comment .split .tile.non{background:#FAFAFB}
}
@media (max-width:860px){
  #comment .split .tile{background:#fff;border:1px solid var(--line)}
}

/* L'histoire d'Aziz : une carte */
.me{padding:34px;border-radius:26px;background:#fff;border:1px solid var(--line)}
@media (max-width:860px){.me{padding:24px}}

/* L'offre : le bord qui tourne (pas un halo : un trait) */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.plan.first{border:2px solid transparent;box-shadow:none;
  background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ang),#2563EB,#93C5FD,#fff,#93C5FD,#2563EB) border-box;animation:tourne 7s linear infinite}
@keyframes tourne{to{--ang:360deg}}

/* « Un mois sans rien payer » (v3) : le calcul en image à gauche, la carte de la bêta à droite */
@media (min-width:900px){
  #offre .wrap{max-width:1080px;display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:stretch}
  #offre .head,#offre .paliers-titre{grid-column:1 / -1}
  #offre .head{margin-bottom:36px}
  #offre .plans.un{max-width:none;margin:0}
  #offre .calc-v{margin:0}
}
.calc-v{text-align:left;max-width:none;margin:0 0 20px;background:#F7F8FB;border:1px solid var(--line);border-radius:22px;padding:30px 30px 26px;display:flex;flex-direction:column}
.calc-v b{display:inline;font-size:inherit;letter-spacing:inherit;line-height:inherit;color:inherit}
.cv-k{font-size:13px;font-weight:600;color:var(--muted)}
.cv-gros{margin:10px 0 20px}
.cv-gros > b{display:block;font-size:clamp(68px,8vw,108px);line-height:.9;letter-spacing:-.055em;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums}
.cv-gros > span{display:block;margin-top:10px;font-size:17px;font-weight:600;color:var(--ink)}
.cv-calc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:20px}
.cv-calc span{padding:6px 10px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--muted);white-space:nowrap}
.cv-calc span b{color:var(--ink);font-weight:700}
.cv-calc i{font-style:normal;font-weight:600;color:var(--muted)}
.cv-calc .cv-res{background:var(--ink);border-color:var(--ink);color:#C9CCD3}
.cv-calc .cv-res b{color:#fff}
.calc-v p{margin:0;max-width:none;text-align:left;font-size:16px;color:var(--muted)}
.calc-v .cv-bilan{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px}
.calc-v p + .cv-bilan{margin-top:20px}
.paliers-titre{max-width:720px;margin:28px auto 0;text-align:center;font-size:15px;font-weight:400;color:var(--muted)}
@media (min-width:900px){.calc-v p + .cv-bilan{margin-top:auto}.calc-v > p:not(.cv-bilan){margin-bottom:20px}}

/* Bloc bêta + formulaire (v5) : 4 dessins, choisis par la classe du body (bloc-1 … bloc-4) */
.bloc-beta{position:relative;text-align:left}
.bb-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue-dark);font-size:12.5px;font-weight:700;letter-spacing:.02em}
.bb-badge i{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:pouls 2.2s ease-in-out infinite}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(37,99,235,.35)}70%,100%{box-shadow:0 0 0 7px rgba(37,99,235,0)}}
.bb-tete > .t1,.bb-tete > .t2,.bb-tete > .t3,.bb-tete > .t4{display:none}
.bb-txt{margin:12px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.bb-txt b{color:var(--ink);font-weight:600}
.bloc-beta .oui-haut{margin-top:18px}
.bb-points{display:none;list-style:none;margin:14px 0 0;padding:0;gap:8px 18px;flex-wrap:wrap;font-size:14px;color:var(--text)}
.bb-points li{display:flex;align-items:center;gap:7px}
.bb-points li::before{content:"";flex:none;width:17px;height:17px;border-radius:50%;background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}

/* 1 · Carte : tout dans une seule carte blanche */
.bloc-1 .bb-tete > .t1{display:block}
.bloc-1 .bloc-beta{padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(15,17,20,.04),0 18px 40px -26px rgba(15,17,20,.25)}
.bloc-1 .oh-note,.bloc-1 .oh-petit{text-align:left}

/* 2 · En ligne : une phrase, un seul champ en ligne, trois garanties */
.bloc-2 .bb-tete{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bloc-2 .bb-tete > .t2{display:block;margin:0}
.bloc-2 .bb-points{display:flex}
.bloc-2 .oh-note{display:none}
@media (min-width:600px){
  .bloc-2 .oui-haut .oh-champs{grid-template-columns:1fr 1.25fr 1.25fr auto;gap:0;border:1px solid #D4D7DD;border-radius:16px;background:#fff;padding:5px;box-shadow:0 12px 30px -20px rgba(15,17,20,.35)}
  .bloc-2 .oui-haut .oh-champs .field,.bloc-2 .oui-haut .oh-champs .btn{grid-column:auto}
  .bloc-2 .oui-haut .field input{border:0;height:46px;border-radius:10px;background:transparent;box-shadow:none}
  .bloc-2 .oui-haut .oh-champs .field + .field{border-left:1px solid var(--line)}
  .bloc-2 .oui-haut .btn{height:46px;border-radius:12px;padding:0 18px}
}

/* 3 · Pass : un pass d'accès sombre, détaché comme un ticket au-dessus du formulaire */
.bloc-3 .bb-badge{display:none}
.bloc-3 .bb-tete > .t3{display:flex}
.bloc-3 .bb-points{display:flex}
.bloc-3 .oh-note{display:none}
.bb-pass{position:relative;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;border-radius:20px 20px 0 0;background:linear-gradient(120deg,#0F1114 0%,#13214A 100%);color:#fff}
.bb-pass .bb-k{display:block;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#93C5FD;margin-bottom:8px}
.bb-pass b{font-size:40px;line-height:1;letter-spacing:-.04em;font-weight:700}
.bb-pass p{margin:0;font-size:15px;line-height:1.4;color:#C9D4EA;text-align:right}
.bloc-3 .oui-haut{margin-top:0;padding:18px 20px 18px;border:1px solid var(--line);border-top:2px dashed #CBD5E1;border-radius:0 0 20px 20px;background:#fff;position:relative}
.bloc-3 .oui-haut::before,.bloc-3 .oui-haut::after{content:"";position:absolute;top:-11px;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--line)}
.bloc-3 .oui-haut::before{left:-11px}.bloc-3 .oui-haut::after{right:-11px}

/* 4 · Sobre : une ligne de titre, des champs soulignés, le bouton noir */
.bloc-4 .bb-badge{display:none}
.bloc-4 .bb-tete > .t4{display:block;margin:0;font-size:18px;color:var(--muted)}
.bloc-4 .bb-tete > .t4 b{font-weight:700;color:var(--ink)}
.bloc-4 .oui-haut .oh-champs{gap:4px 24px}
.bloc-4 .oui-haut .field input{border:0;border-bottom:1.5px solid #C9CDD3;border-radius:0;background:transparent;padding:0 2px;height:50px;font-size:17px;box-shadow:none}
.bloc-4 .oui-haut .field input:focus{border-bottom-color:var(--blue);outline:none;box-shadow:none}
.bloc-4 .oui-haut .btn{background:var(--ink);border-radius:12px;margin-top:14px}
.bloc-4 .oui-haut .btn:hover{background:#000}
.bloc-4 .bb-points{display:flex}
.bloc-4 .oh-note{display:none}

/* Sélecteur du bloc (maquette seulement) */
@media (max-width:600px){.bb-pass{flex-direction:column;align-items:flex-start;gap:8px}.bb-pass p{text-align:left}.bb-pass b{font-size:34px}.choix-bloc{left:8px;right:8px;bottom:84px;font-size:11px;justify-content:center}.choix-bloc span{display:none}}


@media (prefers-reduced-motion:reduce){
  .pc,.plan.first,.bb-badge i{animation:none}
}

/* v6 : barre de menu, ombre courte et serrée (demande d'Aziz) */
nav .wrap{box-shadow:0 1px 2px rgba(15,17,20,.06),0 4px 10px -4px rgba(15,17,20,.10)}
nav.scrolled .wrap{box-shadow:0 1px 2px rgba(15,17,20,.08),0 6px 14px -6px rgba(15,17,20,.16)}

/* v6 : à gauche, tout tient dans la hauteur de la démo (ni plus haut, ni plus bas) */
@media (min-width:1000px){
  .hero .wrap{align-items:stretch;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .hero .stage{grid-row:1;align-self:center}
  .hero-gauche{grid-column:1;display:flex;flex-direction:column;justify-content:space-between;text-align:left;height:var(--h-demo,auto)}
  .hero-gauche > *{text-align:left}
  .hero-gauche .eyebrow{margin-bottom:0}
  .hero-gauche h1{font-size:clamp(40px,4.1vw,56px);margin:0}
  .hero-gauche .lead{font-size:18px;margin:0;max-width:none}
  .bloc-2 .bloc-beta .oui-haut{margin-top:12px}
  .bloc-2 .bb-points{flex-wrap:nowrap;gap:12px;font-size:12.5px;margin-top:10px}
  .bloc-2 .bb-points li{white-space:nowrap}
  .hero-gauche .oh-petit{font-size:13px;margin-top:8px}
  .bloc-2 .oui-haut .oh-champs{grid-template-columns:.8fr 1.1fr 1.25fr auto}
  .bloc-2 .oui-haut .field input{padding:0 12px;font-size:15px}
}
/* sélecteur de la lumière (maquette seulement) */
/* la lumière « sol » est plus bas : le fondu sous les logos est plus court */
.scene-haut[data-lumiere=sol] > .source{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 11%);mask-image:linear-gradient(to top,transparent 0,#000 11%)}

/* v10 : « Un mois sans rien payer » : carte noire du calcul à gauche, carte blanche de la bêta à droite */
.calc-v{background:var(--ink);border:0;color:#fff;padding:32px;border-radius:24px}
.calc-v .cv-k{color:#9CA3AF}
.cv-gros > b{color:#fff;font-size:clamp(72px,8.4vw,112px)}
.cv-gros > b i{font-style:normal;color:#7AA2FF}
.cv-gros > span{color:#D1D5DB;font-weight:500}
.cv-eq{margin:4px 0 22px;border-top:1px solid rgba(255,255,255,.12)}
.cv-eq > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px}
.cv-eq span{color:#AEB4BE}
.cv-eq b{display:inline;font-size:16px;color:#fff;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cv-eq .cv-total b{color:#7AA2FF;font-size:18px}
.calc-v p{color:#C9CDD5}
.calc-v p strong{color:#fff}
.calc-v .cv-bilan{border-top-color:rgba(255,255,255,.12);color:#9CA3AF}
#offre .plan.first{padding:32px;border-radius:24px}
#offre .plan.first .btn{margin-top:auto}
#offre .plan.first .btn::after{content:" →"}
.paliers-titre{max-width:820px;margin:24px auto 0;padding:14px 20px;border:1px solid var(--line);border-radius:14px;background:#FAFAFB;font-size:14.5px;line-height:1.55}
@media (max-width:899px){.calc-v{padding:24px}}

@media (max-width:860px){
  #comment .steps .tile{background:none;border:0;box-shadow:none}
  #comment .steps .tile .n{background:var(--blue);color:#fff}
}

/* v12 : page toute blanche (plus de sections grises), donc plus aucune coupure entre les sections claires */
section.soft{background:transparent}
#comment .steps .tile .n{box-shadow:0 0 0 8px #fff}

/* v12 : l'arrivée du bas, 3 options (classe du body) */
.scene-bas{margin-top:48px}
.passage-ligne .scene-bas{border-radius:50% 50% 0 0 / 120px 120px 0 0}
.passage-ligne .scene-bas .final#oui{padding-top:170px}
.passage-diag .scene-bas{clip-path:polygon(0 110px,100% 0,100% 100%,0 100%)}
.passage-diag .scene-bas .final#oui{padding-top:200px}
.passage-clair .scene-bas{background:#fff;margin-top:0}
.passage-clair .final h2{color:var(--ink)}
.passage-clair .final p,.passage-clair .final .rdv-alt,.passage-clair .final .repli{color:var(--muted)}
.passage-clair .final .eyebrow{color:var(--muted)}
.passage-clair .final .rdv-alt a,.passage-clair .final .repli a,.passage-clair .final .repli b{color:var(--ink);text-decoration-color:rgba(15,17,20,.3)}
.passage-clair .final .card-form{border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,17,20,.04),0 24px 50px -30px rgba(15,17,20,.3)}
.passage-clair .foot{color:var(--muted)}
.passage-clair .foot .wrap,.passage-clair .foot .bottom{border-top-color:var(--line)}
.passage-clair .foot h4,.passage-clair .foot .moi b{color:var(--ink)}
.passage-clair .foot a,.passage-clair .foot .brand .dispo{color:var(--muted)}
.passage-clair .foot a:hover{color:var(--ink)}
.passage-clair .foot .bottom{color:#8A8F98}
.passage-clair .foot .brand > img{filter:brightness(0) saturate(100%)}
@media (max-width:860px){
  .passage-ligne .scene-bas{border-radius:50% 50% 0 0 / 44px 44px 0 0}
  .passage-ligne .scene-bas .final#oui{padding-top:96px}
  .passage-diag .scene-bas{clip-path:polygon(0 48px,100% 0,100% 100%,0 100%)}
  .passage-diag .scene-bas .final#oui{padding-top:110px}
}

/* v12 : « Un mois sans rien payer » : le déroulé du mois en 3 temps */
#offre .wrap{max-width:1080px;display:block}
#offre .head{margin-bottom:14px}
.of-sous{text-align:center;max-width:620px;margin:0 auto 40px;font-size:19px;line-height:1.5;color:var(--muted)}
.of-mois{position:relative;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(15,17,20,.04),0 24px 60px -40px rgba(15,17,20,.25)}
.of-piste{position:absolute;top:43px;left:42px;right:calc(33.333% - 42px);height:2px;background:var(--line);z-index:1}
.of-piste i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,var(--blue),#60A5FA);transform-origin:left;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.of-mois.vu .of-piste i{transform:scaleX(1)}
.of-etape{position:relative;padding:36px 30px 32px}
.of-etape + .of-etape{border-left:1px solid var(--line)}
.of-mil{background:linear-gradient(180deg,#F4F7FF,#fff 70%)}
.of-pt{position:relative;z-index:2;display:block;width:16px;height:16px;margin:0 0 22px 4px;border-radius:50%;background:#fff;border:2px solid var(--blue);transition:background .4s .6s}
.of-mil .of-pt{background:var(--blue);box-shadow:0 0 0 5px rgba(37,99,235,.16)}
.of-quand{display:block;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--blue-dark)}
.of-etape h3{margin:8px 0 16px;font-size:22px;letter-spacing:-.025em}
.of-mil h3{font-size:30px;letter-spacing:-.035em}
.of-etape ul{list-style:none;margin:0;padding:0}
.of-etape li{position:relative;padding:7px 0 7px 26px;font-size:15px;line-height:1.45;color:var(--text)}
.of-etape li::before{content:"";position:absolute;left:0;top:9px;width:17px;height:17px;border-radius:50%;background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.of-valeur{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;margin-top:16px;padding:26px 30px;border:1px solid var(--line);border-radius:24px;background:#fff}
.of-gros{display:flex;flex-direction:column;align-items:flex-start;padding-right:32px;border-right:1px solid var(--line)}
.of-gros span{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.of-gros b{font-size:64px;line-height:1;letter-spacing:-.05em;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;margin:4px 0 2px}
.of-gros span:last-child{text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink);font-weight:600}
.of-valeur p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.of-valeur p strong{color:var(--ink)}
.of-valeur .btn{white-space:nowrap}
.of-donnees{margin:18px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
@media (max-width:860px){
  .of-sous{font-size:17px;margin-bottom:28px}
  .of-mois{grid-template-columns:1fr}
  .of-piste{top:44px;bottom:44px;left:41px;right:auto;width:2px;height:auto}
  .of-piste i{transform-origin:top;transform:scaleY(0)}
  .of-mois.vu .of-piste i{transform:scaleY(1)}
  .of-etape{padding:28px 24px 24px 64px}
  .of-etape + .of-etape{border-left:0;border-top:1px solid var(--line)}
  .of-pt{position:absolute;left:33px;top:30px;margin:0}
  .of-mil h3{font-size:26px}
  .of-valeur{grid-template-columns:1fr;gap:16px;padding:22px}
  .of-gros{padding:0 0 16px;border-right:0;border-bottom:1px solid var(--line)}
  .of-valeur .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.of-piste i{transition:none;transform:none}}
.of-gros b > span[data-compte]{font:inherit;color:inherit;letter-spacing:inherit;text-transform:none}
.of-sous{max-width:700px;text-wrap:balance}

/* v13 : la courbe = bord de planète. Au-dessus, sur le blanc, une fine atmosphère bleue qui suit la courbe. */
.passage-ligne .scene-bas{border-radius:50% 50% 0 0 / 160px 160px 0 0;box-shadow:0 -14px 50px -24px rgba(37,99,235,.30),0 -2px 14px -6px rgba(96,165,250,.28)}
.passage-ligne .scene-bas .final#oui{padding-top:200px}
.passage-ligne .scene-bas{margin-top:72px}
@media (max-width:860px){
  .passage-ligne .scene-bas{border-radius:50% 50% 0 0 / 56px 56px 0 0}
  .passage-ligne .scene-bas .final#oui{padding-top:110px}
}
/* v14 : bord DROIT (choix d'Aziz) : plus de courbe, une ligne d'horizon lumineuse ; fine atmosphère au-dessus, sur le blanc */
.passage-ligne .scene-bas{border-radius:0;box-shadow:0 -12px 44px -22px rgba(37,99,235,.32),0 -1px 12px -4px rgba(96,165,250,.3)}
.passage-ligne .scene-bas .final#oui{padding-top:150px}
@media (max-width:860px){.passage-ligne .scene-bas{border-radius:0}.passage-ligne .scene-bas .final#oui{padding-top:96px}}

/* v15 : bas de page SIMPLE : tout centré, un titre, une phrase, le formulaire en une ligne (comme en haut) */
.final#oui .oui-grille{display:block;max-width:820px;margin:0 auto}
.final#oui .oui-texte{text-align:center}
.final#oui .oui-texte h2{font-size:clamp(38px,5vw,60px)}
.final#oui .oui-texte p{margin:16px auto 0;max-width:560px}
.final#oui .oui-texte .rdv-alt{text-align:center;margin-top:12px;font-size:14.5px}
.final#oui .card-form{background:none;border:0;box-shadow:none;padding:0;margin:34px auto 0;max-width:780px;color:#fff}
.final#oui .card-form form{display:flex;flex-direction:column}
.final#oui .card-form [data-titre]{display:none}
.final#oui .card-form .oh-champs{order:1;display:grid;grid-template-columns:.8fr 1.1fr 1.2fr auto;gap:0;background:#fff;border-radius:16px;padding:5px;box-shadow:0 20px 50px -24px rgba(0,0,0,.6)}
.final#oui .card-form .field{margin:0}
.final#oui .card-form .field > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.final#oui .card-form .field input{border:0;height:50px;padding:0 14px;background:transparent;border-radius:10px;box-shadow:none;color:var(--ink)}
.final#oui .card-form .field + .field{border-left:1px solid var(--line)}
.final#oui .card-form .oh-champs .btn{width:auto;margin:0;height:50px;border-radius:12px;padding:0 22px;white-space:nowrap}
.final#oui .card-form .sub{order:3;margin:14px 0 0;text-align:center;font-size:14.5px;color:#A1A1A6}
.final#oui .card-form .legal{order:4;margin:6px 0 0;text-align:center;color:#7D828B}
.final#oui .card-form .legal a{color:#A1A1A6}
.final#oui .card-form [data-err]{order:0}
.final#oui .card-form .done{background:#fff;border-radius:18px;padding:22px;text-align:left;color:var(--text)}
.final#oui .repli{display:none}
@media (max-width:700px){
  .final#oui .card-form .oh-champs{grid-template-columns:1fr;gap:8px;background:transparent;padding:0;box-shadow:none}
  .final#oui .card-form .field input{background:#fff;border-radius:12px;height:52px}
  .final#oui .card-form .field + .field{border-left:0}
  .final#oui .card-form .oh-champs .btn{width:100%;height:52px}
}
/* bas clair (option 3) : la barre du formulaire garde un contour */
.passage-clair .final#oui .card-form .oh-champs{border:1px solid #D4D7DD;box-shadow:0 12px 30px -20px rgba(15,17,20,.35)}
.passage-clair .final#oui .card-form{color:var(--text)}
@media (min-width:701px){.final#oui .card-form .oh-champs .field,.final#oui .card-form .oh-champs .btn{grid-column:auto}}

/* v16 : séparations façon lemlist. Deux lignes de construction verticales de chaque côté du contenu, et entre les sections
   une bande hachurée entre deux traits, avec un point à chaque croisement. */
#qui,#comment,#offre,#faq,.sep{background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));background-size:1px 100%,1px 100%;background-repeat:no-repeat;background-position:calc(50% - 560px) 0,calc(50% + 560px) 0}
#qui,#comment,#offre,#faq{padding:96px 0}
.sep{position:relative;height:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),repeating-linear-gradient(-45deg,rgba(15,17,20,.07) 0 1px,transparent 1px 9px);
  background-size:1px 100%,1px 100%,auto;background-repeat:no-repeat,no-repeat,repeat}
.sep::before,.sep::after{content:"";position:absolute;top:-4px;width:7px;height:7px;border-radius:50%;background:#C9CDD3;box-shadow:0 56px 0 #C9CDD3}
.sep::before{left:calc(50% - 563px)}
.sep::after{left:calc(50% + 557px)}
@media (max-width:1180px){
  #qui,#comment,#offre,#faq,.sep{background-position:12px 0,calc(100% - 12px) 0}
  .sep::before{left:9px}.sep::after{left:auto;right:9px}
}
@media (max-width:860px){#qui,#comment,#offre,#faq{padding:64px 0}.sep{height:40px}.sep::before,.sep::after{box-shadow:0 40px 0 #C9CDD3}}

/* v16 : arrivée du bas « Nuages » : un ciel de nuit bleu profond sous les nuages */
.passage-nuages .scene-bas{margin-top:0;background:radial-gradient(60% 50% at 75% 45%,rgba(37,64,160,.45),transparent 70%),radial-gradient(50% 45% at 15% 75%,rgba(30,50,130,.35),transparent 70%),linear-gradient(180deg,#0A1233 0%,#070B1E 55%,#05070F 100%)}
.passage-nuages .scene-bas .final#oui{padding-top:230px}
@media (max-width:860px){.passage-nuages .scene-bas .final#oui{padding-top:190px}}

/* v17 : séparations dans le langage du logo : la bande est un motif de petites pastilles inclinées à 30°,
   et les croisements sont des points bleus (le point du logo). Les lignes de construction restent. */
.sep{background-image:linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect x='7.25' y='3.5' width='3.5' height='11' rx='1.75' transform='rotate(30 9 9)' fill='%23E2E5EB'/%3E%3C/svg%3E");
  background-size:1px 100%,1px 100%,18px 18px;background-repeat:no-repeat,no-repeat,repeat}
.sep::before,.sep::after{background:var(--blue);box-shadow:0 56px 0 var(--blue)}
@media (max-width:860px){.sep::before,.sep::after{box-shadow:0 40px 0 var(--blue)}}

/* v17 : arrivée du bas « Trame du logo » : nuit noire de la marque, très légèrement bleutée sous la trame */
.passage-trame .scene-bas{margin-top:0;background:radial-gradient(70% 40% at 50% 0%,rgba(37,99,235,.18),transparent 70%),var(--ink)}
.passage-trame .scene-bas .final#oui{padding-top:340px}
@media (max-width:860px){.passage-trame .scene-bas .final#oui{padding-top:230px}}

/* v18 : bas de page à bord droit, net ; la rangée du logo est dessinée dans le canvas, juste sous le bord */
.passage-droit .scene-bas{margin-top:0;background:var(--ink)}
.passage-droit .scene-bas .final#oui{padding-top:150px}
@media (max-width:860px){.passage-droit .scene-bas .final#oui{padding-top:110px}}

/* v19 : ligne lumineuse SANS halo (Aziz) : plus de brume bleue au-dessus du bord, plus de tache au centre */
.passage-ligne .scene-bas{box-shadow:none;background:var(--ink)}