/* 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 90px,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 90px,#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 2px 6px rgba(24,24,27,.06)}
.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:7px 11px;border-radius:10px;background:#fff;
  border:1px solid var(--line);box-shadow:0 2px 6px rgba(24,24,27,.06);
  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}}
/* 04/11 (Aziz) : le pied de la carte, une étiquette et une réponse. Au téléphone, la carte seule. */
.me{row-gap:22px}
.me-fiche{grid-column:1/-1;clear:both;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:20px 0 0;border-top:1px solid var(--line)}
.me-fiche div{padding:0 16px;border-left:1px solid var(--line)}
.me-fiche div:first-child{padding-left:0;border-left:0}
.me-fiche dt{margin-bottom:3px;font-size:13px;color:var(--muted)}
.me-fiche dd{margin:0;font-size:15px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.me-fiche a{color:inherit;text-decoration:underline;text-decoration-color:#C9CDD3;text-underline-offset:3px}
.me-fiche a:hover{text-decoration-color:currentColor}
.me-fiche a[href^="tel"]{color:var(--blue);text-decoration:none;white-space:nowrap}
.me-fiche a[href^="tel"]:hover{text-decoration:underline}
@media (max-width:860px){.me-fiche{margin-top:18px}}
@media (max-width:600px){.me-fiche{display:none}}

/* 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 2px 6px rgba(24,24,27,.06)}
.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 2px 6px rgba(24,24,27,.06)}
  .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 2px 6px rgba(24,24,27,.06)}
nav.scrolled .wrap{box-shadow:0 2px 6px rgba(24,24,27,.06)}

/* 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 2px 6px rgba(24,24,27,.06)}
.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 2px 6px rgba(24,24,27,.06)}
.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 2px 6px rgba(24,24,27,.06)}
.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}}

/* Deux lignes de construction verticales de chaque côté du contenu.
   Entre les sections (04/11, Aziz : les slashs gris « vrm moches ») : un seul trait fin, un point bleu à chaque croisement, le point du logo. */
#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% - 639.5px) 0,calc(50% + 639.5px) 0}
#qui,#comment,#offre,#faq{padding:96px 0}
@media (max-width:1311px){
  #qui,#comment,#offre,#faq,.sep{background-position:16px 0,calc(100% - 16px) 0}
}
.sep{position:relative;height:0;border-top:1px solid var(--line)}
.sep::before,.sep::after{content:"";position:absolute;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px #fff}
.sep::before{left:calc(50% - 643px)}
.sep::after{left:calc(50% + 636px)}
@media (max-width:1311px){.sep::before{left:13px}.sep::after{left:auto;right:13px}}
@media (max-width:860px){#qui,#comment,#offre,#faq{padding:64px 0}}

/* 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 : 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)}
/* 01/11 (Aziz) : le bouton du bas mène à /beta/, plus de formulaire sur l accueil. */
.oui-lien-bas{text-align:center;margin-top:24px}
.oui-lien-bas .btn{padding:0 34px}
@media (max-width:600px){.oui-lien-bas .btn{width:100%}}

/* Fin de page bêta (01/11, Aziz : « comme lemlist, en simplifié ») : la boule de Bluo, un titre, deux boutons. */
.fin-beta{position:relative;padding:96px 0 72px;text-align:center;color:#fff}
.fin-bluo{width:72px;height:72px;margin:0 auto 32px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#93C5FD 0%,#2563EB 48%,#1D4ED8 100%);box-shadow:0 0 40px rgba(37,99,235,.65),0 0 110px rgba(37,99,235,.35)}
.fin-beta h2{margin:0;color:#fff;font-size:clamp(34px,3.9vw,54px);line-height:1.08}
/* 06/11 (audit du site, carte blanche d'Aziz) : sous le titre, l'offre redite pour qui arrive en bas ; et la boule retrouve les deux yeux de Bluo, aux proportions des dessins, immobiles. */
.fin-sous{margin:14px auto 0;max-width:30em;color:rgba(255,255,255,.74);font-size:19px;line-height:1.45;letter-spacing:-.01em;text-wrap:balance}
/* La phrase du haut : « Bluo, votre agent IA » se lit d'un coup d'œil (noir, comme les mots en gras des blocs), et pas de mot seul en fin de phrase. */
.hero .lead b{color:var(--ink);font-weight:600}
.hero .lead{text-wrap:pretty}
.fin-bluo{position:relative}
.fin-bluo::before,.fin-bluo::after{content:"";position:absolute;top:49.2%;width:9.5%;height:16.7%;border-radius:50%;background:#fff}
.fin-bluo::before{left:31.75%}
.fin-bluo::after{left:58.75%}
.fin-boutons{display:flex;justify-content:center;gap:12px;margin-top:32px}
.fin-boutons .btn{min-width:210px}
.fin-fort{border:0;background:#fff;color:var(--ink);box-shadow:inset 0 -1px 0 0 #B5B5B5,inset 0 0 0 1px rgba(0,0,0,.1),inset 0 .5px 0 1.5px #fff;transition:background-color .15s,box-shadow .1s,opacity .2s}
.fin-fort:hover{background:#FAFAFA}
.fin-fort:active{background:#F1F1F1;box-shadow:inset 0 2px 0 0 #D4D4D4}
/* 04/11 (Aziz) : ce bouton reste en verre, comme sur Apple : on voit le fond à travers, avec un reflet sur le bord haut. */
.fin-clair{border:1px solid rgba(255,255,255,.22);background-color:rgba(255,255,255,.06);background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 60%);color:#fff;-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.08),0 4px 16px rgba(0,0,0,.22);transition:background-color .15s,box-shadow .1s,opacity .2s}
.fin-clair:hover{background-color:rgba(255,255,255,.12)}
.fin-clair:active{background-color:rgba(255,255,255,.09);box-shadow:inset 0 2px 4px rgba(0,0,0,.3),inset 0 -1px 0 rgba(255,255,255,.08)}
@media (max-width:600px){
  .fin-beta{padding:64px 0 48px}
  .fin-bluo{width:60px;height:60px;margin-bottom:26px}
  .fin-sous{margin-top:10px;font-size:16px}
  .fin-beta h2{font-size:clamp(27px,7.6vw,36px)}   /* 06/11 : la taille des titres des blocs et des questions au téléphone, sous le grand titre du haut */
  .fin-boutons{flex-direction:column;gap:10px;margin-top:26px}
  .fin-boutons .btn{width:100%}
}
/* 01/11 (Aziz : « coupure nette » sur téléphone) : le haut de page ne coupe plus l ombre de la démo en bas ; il coupe seulement sur les côtés. */
@supports (overflow:clip){.hero{overflow-x:clip;overflow-y:visible}}

/* Haut de page (02/11, choix d'Aziz) : pastille bêta en tête, slogan, phrase, champs et bouton moins hauts, garanties.
   Sur ordinateur, la colonne part du haut de l'exemple, avec des écarts égaux. Téléphone : rien ne change (.pas-tel, .tel-seul, accueil-tel.css). */
@property --hero-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.hero-pastille{position:relative;display:inline-flex;align-items:center;gap:10px;width:max-content;margin-bottom:18px;padding:5px 14px 5px 5px;border-radius:999px;background:#fff;font-size:14px;font-weight:600;line-height:1.2;color:var(--ink);text-decoration:none;box-shadow:0 2px 6px rgba(24,24,27,.06)}
/* une lumière fait le tour de la pastille (immobile si « réduire les animations ») */
.hero-pastille::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--hero-a),var(--blue) 0deg,#93C5FD 70deg,#E5E5EA 130deg,#E5E5EA 300deg,var(--blue) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:heroTour 4s linear infinite;pointer-events:none}
@keyframes heroTour{to{--hero-a:360deg}}
.hero-pastille b{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-size:12px;font-weight:600}
.hero-pastille b i{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:heroPouls 2.2s ease-in-out infinite}
@keyframes heroPouls{0%{box-shadow:0 0 0 0 rgba(37,99,235,.45)}70%,100%{box-shadow:0 0 0 5px rgba(37,99,235,0)}}
.hero-pastille svg{flex:none;color:var(--muted);transition:transform .2s}
.hero-pastille:hover svg{transform:translateX(3px)}
.hero-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:28px auto 0;max-width:640px}
.hero-form .hero-large{grid-column:1 / -1}
.hero-form .field{display:block;margin:0;min-width:0}
.hero-form .field > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-form input{display:block;width:100%;min-width:0;height:48px;padding:0 14px;border:1px solid #D4D7DD;border-radius:12px;background:#fff;font-size:15px}
.hero-form input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.hero-form .btn{width:100%;height:48px;padding:0 16px;border-radius:12px;font-size:15px;white-space:nowrap}
/* Inscription en un clic depuis le haut (06/11, Aziz : « oui, un seul clic ») : l'erreur sous le bouton, « C'est noté » à la place des cases, à la même taille (rien ne bouge autour). */
.hero-form .btn:disabled{opacity:.8;cursor:progress}
/* L'erreur se pose sur la ligne des garanties au lieu de pousser le bloc : à l'ordinateur, le bloc de gauche est centré en hauteur et tout le titre remontait. */
.hero-form .msg-box{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:2;margin:0;font-size:14px}
.hero-erreur + .hero-checks{visibility:hidden}
.hero-form .field.err input{border-color:var(--bad);box-shadow:0 0 0 3px rgba(194,54,29,.10)}
.hero-ok{position:absolute;inset:0;z-index:1;display:flex;align-items:center;gap:16px;padding:0 24px;border:1px solid #D4D7DD;border-radius:12px;background:#fff;text-align:left;visibility:hidden;opacity:0}
.hero-form.envoye > .field,.hero-form.envoye > .btn{visibility:hidden}
.hero-form.envoye .hero-ok{visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
.hero-ok-tick{flex:none;position:relative;width:48px;height:48px;border-radius:50%;background:var(--ok-soft)}
.hero-ok-tick::after{content:"";position:absolute;left:15px;top:15px;width:18px;height:10px;border-left:3px solid var(--ok);border-bottom:3px solid var(--ok);transform:rotate(-45deg)}
.hero-ok p{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.hero-ok .hero-ok-titre{margin:0 0 3px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.hero-ok b{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.hero-form.envoye .hero-ok{transition:none}}
.hero-checks{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;margin:18px 0 0;padding:0;font-size:13.5px;color:var(--muted)}
.hero-checks li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.hero-checks li::before{content:"";flex:none;width:9px;height:5px;margin:-3px 1px 0 1px;border:solid var(--blue);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.js .hero-pastille{opacity:0;animation:heroIn .65s var(--ease) forwards}
.js .hero-form,.js .hero-checks{opacity:0;animation:heroIn .65s var(--ease) .14s forwards}
@media (prefers-reduced-motion:reduce){.js .hero-pastille,.js .hero-form,.js .hero-checks{opacity:1;animation:none}}
@media (min-width:1000px){
  /* 02/11 (Aziz) : le bloc de gauche est centré en hauteur sur la fenêtre de l exemple. */
  .hero-gauche{justify-content:center;gap:0}
  .hero-gauche h1{margin:0}
  .hero-gauche .lead{margin:16px 0 0;font-size:17.5px;line-height:1.5}
  .hero-pastille{align-self:flex-start;margin:0}
  .hero-form{margin:0;max-width:none}
  .hero-checks{margin:14px 0 0;max-width:none;justify-content:flex-start}
}
/* Écran moyen : les 3 garanties ne tiennent pas sur une ligne */
@media (min-width:1000px) and (max-width:1259px){
  .hero-3e{display:none!important}
}

/* « Réduire les animations » : les logos passent à la ligne (ils étaient coupés à droite). */
@media (prefers-reduced-motion:reduce){
  .logos-rail{flex:1 1 100%;width:100%;min-width:0}
  .logos-track{flex:1 1 100%;min-width:0}
}
/* Badge juste au-dessus des cases (02/11, Aziz) : badge et cases forment un seul bloc. */
.hero-offre-bloc{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:640px;margin:24px auto 0}
.hero-offre-bloc .hero-pastille{margin:0}
.hero-offre-bloc .hero-form{width:100%;margin:0;max-width:none}
@media (min-width:1000px){.hero-offre-bloc{align-items:flex-start;margin:24px 0 0;max-width:none}}
/* Halo du bas de page (02/11, Aziz ; adouci le 03/11, version H choisie parmi 8) : la recette de la page de bienvenue de l espace, sans bord, avec un grain très fin qui casse les bandes. Peint en CSS, donc fixe. Le haut du site garde le sien. */
.scene-bas::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 -.02'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/220px,radial-gradient(ellipse 112% 100% at 50% 12%,rgba(37,99,235,.17) 0%,rgba(37,99,235,.1627) 10%,rgba(37,99,235,.1425) 20%,rgba(37,99,235,.1142) 30%,rgba(37,99,235,.0836) 40%,rgba(37,99,235,.0556) 50%,rgba(37,99,235,.0331) 60%,rgba(37,99,235,.0173) 70%,rgba(37,99,235,.0075) 80%,rgba(37,99,235,.0022) 90%,rgba(37,99,235,0) 100%)}
.scene-bas{background:#09090B}

/* 04/11 (Aziz) : même largeur que le menu, du haut au bas de la page. */
@media (min-width:1000px){
  .hero .wrap,#qui .wrap,#faq .wrap{width:calc(100% - 32px);max-width:1280px;padding:0 var(--marge)}
  .logos-scene{width:calc(100% - 32px - 2 * var(--marge));max-width:calc(1280px - 2 * var(--marge))}
  /* L'histoire d'Aziz : toute la largeur, le texte garde des lignes lisibles. */
  .me{max-width:none;grid-template-columns:200px minmax(0,1fr)}
  .me p{max-width:860px}
  /* Les questions : le titre centré (Aziz, 04/11), les réponses sur toute la largeur. */
  #faq .faq{max-width:none}
}