/* ═══════════════════════════════════════════════════════════════════
   LES OBJETS.
   Grammaire relevée sur realtis.ai : chaque section est un GRAND PANNEAU
   arrondi qui flotte, et dedans il y a une VRAIE maquette d'interface qui
   démontre le propos. Les panneaux sombres sont un ACCENT posé dans une
   page claire — c'est comme ça qu'on a de la richesse sans fond sombre.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* le champ sur lequel les panneaux flottent */
  --field:#E6EAF3;
  --field-2:#DFE4F0;
  /* les panneaux d'accent, anthracite bleuté */
  --blk:#151A25;
  --blk-2:#1D2431;
  --blk-3:#28303F;
  --on-blk:#EEF1F8;
  --on-blk-2:#9AA6BD;
  --on-blk-3:#6B7690;
  --blk-line:rgba(255,255,255,.09);
  --acc:#8FB4FF;          /* l'accent froid des 2es lignes de titre */
  --ok:#4ADE9B;
  --warn:#FFB65C;

  --sh-obj:0 48px 92px -36px rgba(21,26,37,.42),0 12px 30px -14px rgba(21,26,37,.16);
  --r-obj:30px;
}

/* ── le panneau : l'unité de base de toutes les sections ─────────── */
.obj{
  position:relative; border-radius:var(--r-obj); overflow:hidden;
  box-shadow:var(--sh-obj);
  background:linear-gradient(158deg,#FFFFFF,#FBFCFE 46%,#F4F6FC);
}
.obj--blk{
  background:linear-gradient(158deg,var(--blk-2) 0%,var(--blk) 52%,#0F131B 100%);
  color:var(--on-blk);
}
.obj--blk h2,.obj--blk h3,.obj--blk b{ color:var(--on-blk) }
.obj--blk p,.obj--blk li{ color:var(--on-blk-2) }
.obj--blk .label{ color:var(--on-blk-3) }
/* le lustre : une bande spéculaire figée en haut du panneau */
.sheen{
  position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:inherit;
  background:linear-gradient(152deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 22%,
             rgba(255,255,255,0) 46%);
}
.obj:not(.obj--blk) .sheen{
  background:linear-gradient(152deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.25) 24%,
             rgba(255,255,255,0) 50%);
}
/* une lueur colorée qui traverse le panneau sombre */
.obj--blk::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:-40% -10% auto -10%; height:120%;
  background:
    radial-gradient(42% 46% at 78% 18%,rgba(139,107,255,.30),transparent 66%),
    radial-gradient(36% 40% at 14% 76%,rgba(229,25,127,.20),transparent 66%);
}
.obj__in{ position:relative; z-index:2; padding:clamp(26px,3.4vw,54px) }

/* ── le titre d'objet : deux lignes, la 2e dans l'accent froid ───── */
.oh{ font-family:var(--dis); font-weight:500; letter-spacing:-.028em; line-height:1.08;
  font-size:clamp(27px,3vw,44px) }
.oh i{ font-style:normal; color:var(--acc) }
.obj:not(.obj--blk) .oh i{ color:var(--violet) }

/* ══════════ 1 · LE CONSTAT — la recherche qui ne vous trouve pas ══════════ */
.why{ padding-bottom:clamp(56px,6vw,96px) }
.srch{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,3.6vw,60px); align-items:center }
.srch__txt p{ margin-top:16px; font-size:var(--f4); line-height:1.62 }
.srch__stat{ margin-top:26px; display:flex; align-items:baseline; gap:14px }
.srch__stat b{ font-family:var(--dis); font-weight:500; font-size:clamp(38px,4vw,58px);
  line-height:1; color:var(--on-blk) }
.srch__stat span{ font-size:var(--f2); line-height:1.45; color:var(--on-blk-3) }

/* la fausse fenêtre de recherche */
.serp{ border-radius:18px; overflow:hidden; background:#0C1017;
  border:1px solid var(--blk-line); box-shadow:0 30px 60px -28px rgba(0,0,0,.7) }
.serp__bar{ display:flex; align-items:center; gap:9px; padding:12px 14px;
  border-bottom:1px solid var(--blk-line); background:rgba(255,255,255,.03) }
.serp__dot{ width:9px; height:9px; border-radius:50%; background:var(--blk-3); flex:none }
.serp__url{ flex:1; margin-left:6px; padding:7px 13px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.06); font-size:var(--f2); color:var(--on-blk-2);
  display:flex; align-items:center; gap:8px }
.serp__url svg{ flex:none; opacity:.6 }
.serp__q{ color:var(--on-blk) }
.serp__q .car{ display:inline-block; width:1.5px; height:1em; margin-left:1px;
  background:var(--acc); vertical-align:-2px; animation:car 1.05s steps(2) infinite }
@keyframes car{ 50%{opacity:0} }
.serp__body{ padding:16px 18px 20px; display:grid; gap:3px }
.serp__res{ padding:13px 14px; border-radius:13px; opacity:0;
  transform:translateY(10px); transition:background var(--d2) var(--e-soft) }
.serp__res.in{ opacity:1; transform:none;
  transition:opacity .5s var(--e-out),transform .5s var(--e-out) }
.serp__res b{ display:block; font-size:var(--f3); font-weight:500; color:#A9C6FF }
.serp__res u{ display:block; margin-top:2px; font-size:var(--f1); text-decoration:none;
  color:var(--ok); opacity:.85 }
.serp__res span{ display:block; margin-top:5px; font-size:var(--f2); line-height:1.5;
  color:var(--on-blk-3) }
/* la ligne « vous » : vide, barrée, c'est tout le propos */
.serp__res--you{ border:1px dashed rgba(255,140,140,.42); background:rgba(255,90,90,.06) }
.serp__res--you b{ color:#FF9B9B }
.serp__res--you span{ color:#FF9B9B; opacity:.8 }
.serp__note{ margin-top:12px; padding:11px 14px; border-radius:12px;
  background:rgba(255,255,255,.05); font-size:var(--f2); color:var(--on-blk-2);
  display:flex; align-items:center; gap:9px }
.serp__note i{ width:6px; height:6px; border-radius:50%; background:var(--warn); flex:none }
@media (max-width:900px){ .srch{ grid-template-columns:1fr } }

/* ══════════ 2 · LE PRIX — panneau coupé en deux ══════════ */
.incl__obj{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr) }
.incl__left{ padding:clamp(26px,3vw,46px); background:linear-gradient(160deg,#FFFFFF,#F5F7FD) }
.incl__right{ padding:clamp(26px,3vw,46px); position:relative;
  background:linear-gradient(160deg,var(--blk-2),var(--blk) 60%,#0E1219); color:var(--on-blk) }
.incl__right::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 52% at 76% 16%,rgba(139,107,255,.28),transparent 68%) }
.incl__right > *{ position:relative; z-index:2 }
.rows{ list-style:none; margin-top:22px }
.rows li{ display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:14px 0; border-bottom:1px solid rgba(139,107,255,.14); font-size:var(--f3) }
.rows li:last-child{ border-bottom:0 }
.rows s{ font-size:var(--f2); color:var(--ink-3); text-decoration:none; position:relative;
  white-space:nowrap }
.rows s::after{ content:""; position:absolute; left:-2px; right:-2px; top:52%; height:1.5px;
  background:var(--ink-3); transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--e-out) }
.rows.in s::after{ transform:scaleX(1) }
.rows__tot{ margin-top:16px; padding-top:16px; border-top:2px solid var(--ink);
  display:flex; justify-content:space-between; align-items:baseline; font-weight:600 }
.rows__tot s{ font-size:var(--f5); color:var(--ink) }
.rows__tot s::after{ background:var(--ink); height:2px }

.big0{ font-family:var(--dis); font-weight:500; letter-spacing:-.04em; line-height:.9;
  font-size:clamp(70px,9vw,132px); margin-top:6px }
.incl__right ul{ list-style:none; margin-top:24px; display:grid; gap:11px }
.incl__right ul li{ display:flex; gap:11px; align-items:flex-start; font-size:var(--f3);
  color:var(--on-blk-2) }
.incl__right ul svg{ flex:none; margin-top:3px }
.incl__right .btn{ margin-top:28px; width:100% }

/* la bascule mensuel / annuel, qui fonctionne vraiment */
.tog{ margin:clamp(30px,3.4vw,48px) auto 0; display:inline-flex; padding:5px;
  border-radius:var(--r-pill); position:relative }
.tog button{ position:relative; z-index:2; padding:10px 22px; border-radius:var(--r-pill);
  font-size:14px; font-weight:600; color:var(--ink-2);
  transition:color var(--d2) var(--e-soft) }
.tog button[aria-pressed="true"]{ color:#fff }
.tog__pin{ position:absolute; z-index:1; top:5px; bottom:5px; border-radius:var(--r-pill);
  background:var(--ink); transition:transform .42s var(--e-out),width .42s var(--e-out) }
.tog em{ font-style:normal; margin-left:7px; font-size:11px; padding:3px 7px;
  border-radius:var(--r-pill); background:rgba(108,60,245,.14); color:var(--violet) }
.tog button[aria-pressed="true"] em{ background:rgba(255,255,255,.18); color:#fff }
.plan{ margin-top:22px; text-align:center }
.plan b{ font-family:var(--dis); font-weight:500; letter-spacing:-.03em;
  font-size:clamp(40px,4.6vw,68px); line-height:1 }
.plan span{ display:block; margin-top:8px; font-size:14px; color:var(--ink-3) }
@media (max-width:900px){ .incl__obj{ grid-template-columns:1fr } }

/* ══════════ 3 · LE PROCESS — la frise de deux semaines ══════════ */
.tl{ position:relative; margin-top:clamp(28px,3vw,44px) }
.tl__rail{ position:relative; height:56px; margin:0 6px }
.tl__line{ position:absolute; left:0; right:0; top:26px; height:2px;
  background:var(--blk-line); border-radius:2px; overflow:hidden }
.tl__fill{ position:absolute; inset:0; border-radius:2px; transform-origin:left;
  transform:scaleX(0); background:linear-gradient(90deg,var(--violet-soft),var(--magenta-soft)) }
.tl__tick{ position:absolute; top:20px; width:1px; height:14px; background:var(--blk-line) }
.tl__tick.maj{ height:22px; top:16px; background:rgba(255,255,255,.22) }
.tl__day{ position:absolute; top:42px; transform:translateX(-50%); font-size:var(--f1);
  letter-spacing:.13em; color:var(--on-blk-3) }
.tl__steps{ margin-top:24px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.tl__step{ padding:20px; border-radius:18px; background:rgba(255,255,255,.045);
  border:1px solid var(--blk-line); position:relative;
  transition:background .45s var(--e-soft),border-color .45s var(--e-soft),
             transform .45s var(--e-out) }
.tl__step.on{ background:rgba(255,255,255,.09); border-color:rgba(143,180,255,.4);
  transform:translateY(-4px) }
.tl__step b{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-blk-3) }
.tl__step.on b{ color:var(--acc) }
.tl__step h3{ margin-top:9px; font-size:17px; font-weight:500; color:var(--on-blk) }
.tl__step p{ margin-top:8px; font-size:var(--f2); line-height:1.55 }
.tl__you{ margin-top:24px; padding:18px 22px; border-radius:18px;
  background:rgba(255,255,255,.045); border:1px solid var(--blk-line);
  display:grid; gap:10px }
.tl__you .lb{ display:flex; justify-content:space-between; font-size:var(--f2);
  color:var(--on-blk-2) }
.tl__bar{ height:10px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden }
.tl__bar i{ display:block; height:100%; border-radius:6px; transform-origin:left;
  transform:scaleX(0); background:linear-gradient(90deg,var(--violet-soft),var(--magenta-soft)) }
.tl__bar.you i{ background:var(--ok) }
@media (max-width:900px){ .tl__steps{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .tl__steps{ grid-template-columns:1fr } }

/* ══════════ 4 · LES AVIS — le vrai fil SMS ══════════ */
.says__obj{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(26px,3.6vw,56px); align-items:center }
.phone{ position:relative; border-radius:38px; padding:12px;
  background:linear-gradient(160deg,#2A3242,#161B25);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12) }
.phone__scr{ border-radius:28px; overflow:hidden; background:#0B0F16; padding:16px 14px 18px;
  min-height:392px; display:flex; flex-direction:column; gap:9px }
.phone__top{ display:flex; align-items:center; gap:9px; padding-bottom:12px;
  border-bottom:1px solid var(--blk-line); margin-bottom:6px }
.phone__av{ width:28px; height:28px; border-radius:50%; flex:none;
  background:linear-gradient(140deg,var(--violet),var(--magenta));
  display:grid; place-items:center; font-size:11px; font-weight:600; color:#fff }
.phone__who{ font-size:13px; font-weight:600; color:var(--on-blk) }
.phone__who span{ display:block; font-weight:400; font-size:var(--f1); color:var(--ok) }
.msg{ max-width:82%; padding:11px 14px; border-radius:17px; font-size:var(--f2);
  line-height:1.45; opacity:0; transform:translateY(8px) }
.msg.in{ opacity:1; transform:none; transition:opacity .42s var(--e-out),transform .42s var(--e-out) }
.msg--them{ align-self:flex-start; background:#222A38; color:var(--on-blk);
  border-bottom-left-radius:6px }
.msg--me{ align-self:flex-end; color:#fff; border-bottom-right-radius:6px;
  background:linear-gradient(140deg,var(--violet),#8A47E8) }
.msg__t{ display:block; margin-top:5px; font-size:10px; opacity:.55 }
.says__q{ display:grid; gap:clamp(18px,2vw,26px) }
.says__q figure{ padding:clamp(20px,2.2vw,30px); border-radius:20px;
  background:rgba(255,255,255,.05); border:1px solid var(--blk-line) }
.says__q blockquote{ font-family:var(--dis); font-weight:400; font-size:clamp(17px,1.6vw,21px);
  line-height:1.42; color:var(--on-blk) }
.says__q figcaption{ margin-top:16px; padding-top:14px; border-top:1px solid var(--blk-line);
  font-size:var(--f2); color:var(--on-blk-3) }
.says__q figcaption b{ display:block; font-size:var(--f2); color:var(--on-blk-2) }
.stars{ display:flex; gap:3px; margin-bottom:12px }
.stars svg{ opacity:.9 }
@media (max-width:900px){ .says__obj{ grid-template-columns:1fr } }

/* ══════════ 5 · LA VITESSE — l'oscilloscope ══════════ */
.spd__obj{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(26px,3.6vw,56px); align-items:center }
.gauge{ position:relative }
.gauge svg{ width:100%; height:auto; overflow:visible }
.gauge__num{ position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
  text-align:center }
.gauge__num b{ display:block; font-family:var(--dis); font-weight:500; letter-spacing:-.04em;
  font-size:clamp(40px,4.6vw,66px); line-height:1; color:var(--on-blk) }
.gauge__num span{ font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--on-blk-3) }
.bars{ display:grid; gap:20px; margin-top:6px }
.bars .row{ display:grid; gap:8px }
.bars .lb{ display:flex; justify-content:space-between; font-size:var(--f2);
  color:var(--on-blk-2) }
.bars .lb b{ color:var(--on-blk); font-variant-numeric:tabular-nums }
.bars .tr{ height:12px; border-radius:7px; background:rgba(255,255,255,.07); overflow:hidden }
.bars .tr i{ display:block; height:100%; border-radius:7px; transform-origin:left;
  transform:scaleX(0); transition:transform 1.15s var(--e-out) }
.bars .row.slow .tr i{ background:rgba(255,255,255,.26) }
.bars .row.fast .tr i{ background:linear-gradient(90deg,var(--ok),#7CE8B8) }
.bars.in .tr i{ transform:scaleX(var(--w,1)) }
.spd__note{ margin-top:24px; font-size:var(--f2); line-height:1.6; color:var(--on-blk-3) }
@media (max-width:900px){ .spd__obj{ grid-template-columns:1fr } }

/* ── le champ : les panneaux flottent sur un gris-bleu, pas sur du blanc ── */
.why,.incl,.how,.says,.spd{ position:relative }
.why::before,.incl::before,.how::before,.says::before,.spd::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(214,222,240,.55) 12%,
             rgba(214,222,240,.55) 88%,transparent);
}

/* Un bouton en verre clair posé sur un panneau sombre devenait illisible :
   sur fond sombre, le bouton est plein et blanc. */
.obj--blk .btn--glass,.incl__right .btn--glass{
  background:#FFFFFF; color:var(--blk); border:0;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,1);
}
.obj--blk .btn--glass::after,.incl__right .btn--glass::after{ content:none }
.obj--blk .btn--glass:hover,.incl__right .btn--glass:hover{
  transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(0,0,0,.6) }
.obj--blk .btn--glass .dot,.incl__right .btn--glass .dot{ background:var(--magenta) }