/* =====================================================================
   BoosterWash — Landing LIGHT mode, Apple-level 10/10
   "Less, but better." · #0071E3 = seul accent saturé.
   Mobile-first · RTL natif · 3 langues · CSS transitions only.
   ===================================================================== */

:root{
  --bg:#FFFFFF;
  --bg-2:#F5F5F7;          /* gris perle Apple */
  --text:#1D1D1F;          /* noir signature */
  --muted:#6E6E73;         /* gris mid */
  --faint:#AEAEB2;         /* gris clair */
  --line:#D2D2D7;          /* séparateurs */
  --accent:#0071E3;
  --accent-2:#0077ED;
  --green:#34C759;         /* success / vert Apple */
  --mint:#34C759;
  --gold:#F5A623;
  --turq:#28D6C8;
  --grad-brand:linear-gradient(135deg,#0071E3 0%, #28D6C8 100%);
  --grad-brand-strong:linear-gradient(135deg,#0A84FF 0%, #0071E3 45%, #28D6C8 120%);
  --shadow:0 2px 20px rgba(0,0,0,.06);
  --shadow-hover:0 18px 44px -20px rgba(11,31,51,.28);
  --radius:20px;
  --radius-sm:14px;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --max:1080px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  --font-he:"Heebo","Inter",-apple-system,"Segoe UI",sans-serif;
}
html[lang="he"]{ --font:var(--font-he); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.07; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }

.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:24px; }
.grad{
  background:linear-gradient(135deg, #0071E3 0%, #34AADC 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------------- Boutons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:inherit; font-weight:500; font-size:17px; cursor:pointer; border:0;
  border-radius:980px; height:54px; padding:0 30px; white-space:nowrap;
  transition:transform .2s ease, box-shadow .25s ease, background .2s, border-color .2s, color .2s;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--grad-brand-strong); background-size:140% 140%; color:#fff; box-shadow:0 8px 22px -10px rgba(0,113,227,.55); }
.btn-primary:hover{ transform:scale(1.015); background-position:100% 100%; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 14px 34px -12px rgba(0,113,227,.65), 0 0 40px -6px rgba(40,214,200,.35); }
.btn-ghost{ background:#fff; color:var(--accent); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--accent); }
.btn-sm{ height:38px; font-size:15px; padding:0 18px; }
.btn-block{ width:100%; }
.btn-hero{ min-width:280px; }
.mobile-cta{ display:none; }

/* ---------------- Navbar ---------------- */
.site-header{
  position:fixed; top:0; inset-inline:0; z-index:50; height:56px;
  background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{ display:flex; align-items:center; gap:16px; height:100%; }
.brand{ display:flex; align-items:center; gap:9px; }
.brand-name{ font-weight:700; font-size:1.14rem; letter-spacing:-.02em; font-family:var(--font); }
.brand-name b{ color:var(--text); font-weight:700; }
.brand-name i{ color:var(--accent); font-style:normal; font-weight:700; }
.main-nav{ display:none; gap:28px; margin-inline-start:auto; font-size:15px; color:var(--muted); }
.main-nav a:hover{ color:var(--text); }
.header-actions{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.lang-switch{
  position:relative; display:flex; padding:3px; border-radius:999px;
  background:rgba(255,255,255,.5); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.65); box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 6px 16px -10px rgba(11,31,51,.2);
}
.lang-ind{
  position:absolute; top:3px; bottom:3px; left:0; width:0; border-radius:999px; pointer-events:none;
  background:rgba(255,255,255,.92); box-shadow:0 2px 8px -2px rgba(11,31,51,.28), inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .45s cubic-bezier(.16,1,.3,1), width .45s cubic-bezier(.16,1,.3,1);
}
.lang-switch button{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:.78rem; color:var(--muted); padding:.34em .7em; border-radius:999px; transition:color .3s var(--ease-out);
}
.lang-switch button.is-active{ color:var(--text); }
.flag{ width:18px; height:13px; border-radius:3px; overflow:hidden; flex:none; display:block; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.1); }
.header-actions .btn{ display:none; }

/* ---------------- Hero ---------------- */
.hero{ position:relative; min-height:100svh; min-height:100dvh; display:flex; align-items:center; padding:108px 0 76px; overflow:hidden; }
.hero-bg{
  position:absolute; inset:-15% -10% auto -10%; height:120%; pointer-events:none; z-index:0;
  background:
    radial-gradient(38% 50% at 82% 8%, rgba(40,214,200,.18), transparent 60%),
    radial-gradient(42% 55% at 18% 4%, rgba(0,113,227,.16), transparent 62%),
    radial-gradient(50% 60% at 60% 0%, rgba(0,113,227,.06), transparent 70%);
  filter:blur(30px); animation:heroMesh 16s ease-in-out infinite alternate;
}
@keyframes heroMesh{ 0%{ transform:translate3d(0,0,0) scale(1);} 100%{ transform:translate3d(0,2%,0) scale(1.06);} }
.hero-inner{ position:relative; z-index:1; display:grid; gap:18px; align-items:center; }
.badge{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text);
  background:rgba(255,255,255,.55); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.65); box-shadow:0 8px 22px -12px rgba(11,31,51,.25), inset 0 1px 0 rgba(255,255,255,.85);
  padding:.55em 1.05em; border-radius:999px; margin-bottom:30px;
}
.badge-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(52,199,89,.55); animation:pulse 2.2s ease-out infinite; }
.hero-title{ letter-spacing:-.03em; }
.hero-title .t1, .hero-title .t2, .hero-title .t3{ display:block; }
.hero-title .t1{ font-size:clamp(48px,8vw,80px); font-weight:700; color:var(--text); letter-spacing:-.045em; line-height:1.02; }
.hero-title .t2{ font-size:clamp(58px,11.5vw,96px); font-weight:800; color:var(--text); letter-spacing:-.055em; line-height:1; margin-top:2px; }
/* Tagline hero — sous-titre distinct qui défile (fondu + glissé) */
.hero-tagline{ margin-top:16px; min-height:1.3em; display:flex; align-items:center; gap:10px; }
.hero-tagline::before{ content:""; flex:none; width:22px; height:2px; border-radius:2px; background:var(--accent); opacity:.85; }
.hero-rot{ display:inline-block; font-size:clamp(19px,2.7vw,26px); font-weight:700; letter-spacing:-.015em;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.hero-sub{ margin-top:26px; font-size:clamp(17px,2.3vw,19px); font-weight:400; color:var(--muted); line-height:1.55; max-width:32ch; }
.hero-actions{ margin-top:38px; }
.cta-price{ margin-top:14px; font-size:13px; color:var(--faint); }
.proof{ margin-top:34px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; color:var(--muted); }
.avatars{ display:inline-flex; }
.avatars span{ width:26px; height:26px; border-radius:50%; border:2px solid #fff; margin-inline-start:-8px; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.avatars span:first-child{ margin-inline-start:0; }
.avatars span:nth-child(1){ background:linear-gradient(135deg,#0071E3,#28D6C8); }
.avatars span:nth-child(2){ background:linear-gradient(135deg,#FF8A00,#FF3D77); }
.avatars span:nth-child(3){ background:linear-gradient(135deg,#34C759,#0071E3); }
.proof .stars{ color:var(--gold); letter-spacing:1px; font-size:13px; }

/* ---------------- Bande de confiance ---------------- */
.trustband{ background:var(--bg-2); border-block:1px solid rgba(0,0,0,.05); }
.trust-row{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding-block:22px; }
.trust-item{
  display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text);
  background:rgba(255,255,255,.6); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.7); box-shadow:0 8px 20px -12px rgba(11,31,51,.22), inset 0 1px 0 rgba(255,255,255,.85);
  padding:9px 15px; border-radius:999px;
}
.trust-item svg{ width:16px; height:16px; color:var(--accent); }
.trust-sep{ display:none; }

/* ---------------- Sections ---------------- */
.section{ padding-block:96px; position:relative; }
.section-head{ text-align:center; margin-bottom:56px; }
.section-title{ font-size:clamp(28px,4.4vw,38px); font-weight:700; letter-spacing:-.02em; }
.section-sub{ margin-top:12px; color:var(--muted); font-size:1.05rem; }

/* Comment ça marche */
.how{ background:var(--bg); }
.steps{ display:grid; gap:20px; }
.step{ position:relative; overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:24px; box-shadow:0 14px 44px -24px rgba(11,31,51,.28); padding:34px 28px 30px; text-align:start; transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.step::after{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background:var(--grad-brand); opacity:0; transition:opacity .35s var(--ease-out); }
.step:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -28px rgba(11,31,51,.34); }
.step:hover::after{ opacity:1; }
.step-num{ position:absolute; inset-block-start:18px; inset-inline-end:24px; font-size:46px; font-weight:800; line-height:1; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px rgba(0,113,227,.16); }
.step-ico{ width:62px; height:62px; border-radius:18px; background:var(--grad-brand); color:#fff; display:grid; place-items:center; box-shadow:0 12px 26px -10px rgba(0,113,227,.55); margin-bottom:22px; }
.step-ico svg{ width:30px; height:30px; }
.step h3{ font-size:1.3rem; margin-bottom:8px; letter-spacing:-.02em; }
.step p{ color:var(--muted); font-size:1rem; line-height:1.55; }
.step-note{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px; padding:7px 14px; border-radius:999px;
  background:rgba(236,250,240,.55); backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(52,199,89,.38); box-shadow:0 6px 16px -10px rgba(52,199,89,.4), inset 0 1px 0 rgba(255,255,255,.85);
  color:#1f9d4d; font-weight:600; font-size:.82rem;
}

/* Pricing */
.pricing{ background:var(--bg-2); padding-top:48px; }
.framing{ margin-top:14px; color:var(--green); font-size:14px; font-weight:600; }
.plans{ display:grid; gap:18px; max-width:860px; margin-inline:auto; }
.plan{ position:relative; padding:32px 30px; border-radius:var(--radius); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.plan:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.plan-featured{ border:2px solid transparent; background:linear-gradient(#fff,#fff) padding-box, var(--grad-brand) border-box; box-shadow:0 26px 60px -28px rgba(0,113,227,.5); }
.plan-badge{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:.42em 1em; border-radius:999px; margin-bottom:16px; box-shadow:0 6px 16px -8px rgba(0,0,0,.3); }
.badge-blue{ background:var(--grad-brand); color:#fff; }
.badge-green{ background:var(--green); color:#fff; }
.plan-name{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.plan-price{ margin:10px 0 0; display:flex; align-items:baseline; gap:4px; }
.plan-price .amount{ font-size:64px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.plan-price .cur{ font-size:28px; font-weight:600; }
.plan-price .per{ font-size:18px; color:var(--muted); font-weight:500; margin-inline-start:4px; }
.plan-annual .plan-price .amount{ font-size:44px; }
.plan-annual .plan-price .cur{ font-size:22px; }
.plan-eq{ margin-top:8px; color:var(--green); font-size:15px; font-weight:600; }
.plan-save{ margin-top:2px; color:var(--faint); font-size:12px; }
.plan-count{ margin-top:14px; display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; color:var(--muted); }
.cdot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(52,199,89,.6); animation:pulse 2.2s ease-out infinite; }
.plan-feats{ list-style:none; padding:0; margin:24px 0 28px; display:grid; gap:13px; }
.plan-feats li{ position:relative; padding-inline-start:28px; color:var(--text); font-size:.97rem; }
.plan-feats li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:2px; width:18px; height:18px; border-radius:50%;
  background:rgba(52,199,89,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2334C759' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.plan-annual .plan-feats{ margin-top:18px; }

/* Compteur multi-voitures */
.plan-cars{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 6px; }
.cars-label{ font-size:.95rem; font-weight:600; color:var(--text); }
.cars-stepper{
  display:inline-flex; align-items:center; gap:2px; padding:4px;
  border-radius:999px; border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.65); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px -10px rgba(0,0,0,.25);
}
.cars-btn{
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  font-size:22px; line-height:1; font-weight:600; color:var(--accent);
  background:#fff; box-shadow:0 2px 6px -2px rgba(0,0,0,.2);
  display:grid; place-items:center; transition:transform .15s var(--ease-out), background .15s, color .15s, opacity .15s;
}
.cars-btn:hover:not(:disabled){ background:var(--grad-brand); color:#fff; transform:translateY(-1px) scale(1.05); }
.cars-btn:active:not(:disabled){ transform:scale(.92); }
.cars-btn:disabled{ opacity:.35; cursor:default; box-shadow:none; }
.cars-num{ min-width:30px; text-align:center; font-size:1.15rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.cars-hint{
  min-height:20px; margin:0 0 20px; text-align:center; font-size:.9rem; font-weight:600;
  color:var(--green); transition:opacity .2s var(--ease-out);
}
.cars-hint.is-nudge{ color:var(--accent); font-weight:600; }

/* Sélecteur segmenté Perso / Société (pilule glissante iOS) */
.plan-seg{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0;
  padding:4px; margin:0 0 8px; border-radius:14px;
  background:rgba(118,118,128,.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.seg-ind{
  position:absolute; z-index:0; inset-block:4px; inset-inline-start:4px;
  width:calc(50% - 4px); border-radius:11px; background:#fff;
  box-shadow:0 2px 8px -2px rgba(0,0,0,.22), inset 0 0 0 .5px rgba(0,0,0,.04);
  transition:transform .32s var(--ease-out);
}
.plan-seg.at-biz .seg-ind{ transform:translateX(100%); }
html[dir="rtl"] .plan-seg.at-biz .seg-ind{ transform:translateX(-100%); }
.seg-btn{
  position:relative; z-index:1; border:none; background:none; cursor:pointer;
  padding:9px 6px; border-radius:11px; font:inherit; font-size:.9rem; font-weight:600; white-space:nowrap;
  color:var(--muted); transition:color .25s var(--ease-out);
}
.seg-btn.is-active{ color:var(--text); }
.seg-note{
  min-height:18px; margin:0 0 4px; text-align:center; font-size:.85rem; color:var(--muted);
  transition:opacity .2s var(--ease-out);
}
.seg-mixed{
  margin:0 0 16px; text-align:center; font-size:.78rem; line-height:1.35; color:var(--faint);
}

/* ===== Configurateur partagé (pilote les deux forfaits) ===== */
.config{
  max-width:600px; margin:0 auto 32px; padding:28px 24px 22px; text-align:center;
  border-radius:28px; border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.72); backdrop-filter:blur(26px) saturate(1.6); -webkit-backdrop-filter:blur(26px) saturate(1.6);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.95);
}
.config-q{ display:block; font-size:1.18rem; font-weight:700; letter-spacing:-.01em; margin-bottom:22px; }
.cars-visual{ display:flex; justify-content:center; gap:12px; margin-bottom:20px; }
.car-glyph{
  position:relative; flex:1 1 0; max-width:140px; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:15px 8px 12px; border-radius:20px; cursor:pointer; font:inherit;
  border:1.5px solid var(--line); background:#fff; color:var(--faint);
  transition:transform .3s var(--ease-out), border-color .3s, color .3s, box-shadow .3s, background .3s;
}
.car-glyph .car-ico{ width:44px; height:28px; }
.car-rank{ font-size:.7rem; font-weight:700; letter-spacing:.02em; color:var(--faint); transition:color .3s; }
.car-tag{ font-size:1rem; font-weight:800; color:var(--text); transition:color .3s; font-variant-numeric:tabular-nums; }
.car-per{ font-size:.66rem; font-weight:600; opacity:.72; margin-inline-start:1px; }
.car-off{
  position:absolute; inset-block-start:-9px; inset-inline-end:-6px; z-index:2;
  padding:3px 8px; border-radius:999px; font-size:.66rem; font-weight:800; color:#fff; white-space:nowrap;
  background:linear-gradient(135deg,#34C759,#28D6C8); box-shadow:0 6px 14px -6px rgba(52,199,89,.6);
}
.car-glyph.is-on{
  color:#fff; border-color:transparent; background:var(--grad-brand);
  box-shadow:0 14px 28px -12px rgba(0,113,227,.6); transform:translateY(-3px);
}
.car-glyph.is-on .car-rank{ color:rgba(255,255,255,.92); }
.car-glyph.is-on .car-tag{ color:#fff; }
.car-glyph:not(.is-on):hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.car-glyph:not(.is-on):hover .car-rank,
.car-glyph:not(.is-on):hover .car-tag{ color:var(--accent); }
.config .cars-stepper{ margin:0 auto 20px; }
.config .plan-seg{ max-width:340px; margin:0 auto 8px; }

/* Prix barré + pastille d'économie */
.price-old{
  font-size:22px; font-weight:600; color:var(--faint);
  text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:rgba(174,174,178,.7);
  margin:6px 0 0; line-height:1; font-variant-numeric:tabular-nums;
}
.plan-annual .price-old{ font-size:18px; }

/* Tag "N voitures" dans l'en-tête de carte */
.plan-cars-tag{ display:inline-block; margin-inline-start:8px; padding:2px 9px; border-radius:999px; background:rgba(0,113,227,.1); color:var(--accent); font-size:.62rem; font-weight:800; letter-spacing:.02em; vertical-align:middle; text-transform:none; }
.plan-annual .plan-cars-tag{ background:rgba(52,199,89,.16); color:#1E9E4A; }
.plan-cars-tag[hidden]{ display:none; }

/* Carte annuelle — premium "meilleure valeur" */
.plan-annual{ border-color:rgba(52,199,89,.42); background:linear-gradient(180deg, rgba(52,199,89,.07), #fff 55%); box-shadow:0 20px 48px -30px rgba(52,199,89,.5); }
.plan-annual .plan-eq{ font-size:17px; font-weight:700; color:#1E9E4A; margin-top:10px; }

/* "pour N voitures" — bien visible sous le prix */
.plan-forcars{ margin-top:8px; font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--accent); }
.plan-annual .plan-forcars{ color:#1E9E4A; }
.plan-forcars[hidden]{ display:none; }

/* Détail par voiture */
.plan-breakdown{ margin-top:16px; padding:15px 17px; border-radius:16px; background:#F5F5F7; display:flex; flex-direction:column; gap:12px; font-variant-numeric:tabular-nums lining-nums; }
.plan-annual .plan-breakdown{ background:rgba(52,199,89,.08); }
.plan-breakdown[hidden]{ display:none; }
.bd-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.bd-l{ color:var(--muted); font-weight:500; font-size:14.5px; letter-spacing:-.006em; }
.bd-r{ color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums; }
.bd-num{ font-weight:600; font-size:15.5px; letter-spacing:-.02em; }
.bd-cur{ font-weight:600; font-size:11.5px; color:var(--muted); margin-inline-start:2.5px; letter-spacing:0; }
.bd-per{ font-weight:500; font-size:12px; color:var(--muted); margin-inline-start:1px; letter-spacing:-.01em; }
.bd-total{ margin-top:1px; padding-top:13px; border-top:1px solid rgba(0,0,0,.06); }
.bd-total .bd-l{ color:var(--text); font-weight:600; }
.bd-total .bd-num{ font-weight:700; font-size:19px; letter-spacing:-.024em; }
.bd-total .bd-cur{ font-weight:600; font-size:13.5px; color:var(--muted); }
.det-old{ color:var(--faint); text-decoration:line-through; text-decoration-thickness:1px; margin-inline-end:6px; }
.det-old .bd-num{ font-weight:500; font-size:13.5px; color:var(--faint); }
.det-old .bd-cur{ font-size:10.5px; color:var(--faint); }

/* Prix / lavage en gros + ligne de détail */
.plan-price .amount-approx{ font-size:30px; font-weight:600; color:var(--muted); margin-inline-end:3px; align-self:center; }
.plan-annual .plan-price .amount-approx{ font-size:24px; }
.plan-price .per{ white-space:nowrap; }
.plan-detail{ margin-top:9px; font-size:14.5px; color:var(--muted); font-weight:600; }
.plan-detail .det-old{ color:var(--faint); text-decoration:line-through; text-decoration-thickness:1.5px; font-weight:600; margin-inline-end:2px; }
.save-chip{
  display:inline-block; margin:12px 0 0; padding:6px 15px; border-radius:999px;
  font-size:.82rem; font-weight:800; color:#fff; background:var(--grad-brand);
  box-shadow:0 8px 18px -8px rgba(0,113,227,.5); animation:chipPop .38s var(--ease-out);
}
.save-chip-green{ background:linear-gradient(135deg,#34C759,#28D6C8); box-shadow:0 8px 18px -8px rgba(52,199,89,.5); }
.save-chip[hidden]{ display:none; }
@keyframes chipPop{ 0%{ transform:scale(.5); opacity:0; } 60%{ transform:scale(1.1); } 100%{ transform:scale(1); opacity:1; } }
.plan-price .amount{ display:inline-block; transform-origin:center bottom; }
.amount.bump{ animation:amtBump .42s var(--ease-out); }
@keyframes amtBump{ 0%{ transform:scale(1); } 34%{ transform:scale(1.17); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .save-chip{ animation:none; } .amount.bump{ animation:none; } }
@media (max-width:520px){
  .car-glyph{ padding:13px 6px 11px; gap:7px; }
  .car-glyph .car-ico{ width:38px; height:24px; }
  .car-tag{ font-size:.82rem; }
}
/* Pulse d'attention quand un CTA secondaire amène ici */
.plan-featured.pulse{ animation:cardPulse 1.1s var(--ease-out); }
@keyframes cardPulse{
  0%{ box-shadow:0 26px 60px -28px rgba(0,113,227,.5), 0 0 0 0 rgba(0,113,227,.45); }
  40%{ box-shadow:0 26px 60px -28px rgba(0,113,227,.5), 0 0 0 10px rgba(0,113,227,0); }
  100%{ box-shadow:0 26px 60px -28px rgba(0,113,227,.5), 0 0 0 0 rgba(0,113,227,0); }
}
@media (prefers-reduced-motion:reduce){ .plan-featured.pulse{ animation:none; } }
.tip-card{
  max-width:560px; margin:24px auto 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px 24px; box-shadow:var(--shadow);
}
.tip-ico{ flex:none; width:46px; height:46px; border-radius:13px; background:rgba(255,61,119,.1); display:grid; place-items:center; }
.tip-ico svg{ width:24px; height:24px; }
.tip-title{ font-weight:700; font-size:1.05rem; }
.tip-desc{ color:var(--muted); font-size:.92rem; margin-top:3px; }
.tip-amounts{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px 10px; width:100%; max-width:380px; overflow:visible; }
.tip-amount{
  display:flex; align-items:center; justify-content:center; height:52px;
  border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--text);
  font-weight:700; font-size:1.02rem; cursor:pointer;
  transition:transform .15s var(--ease), border-color .2s, color .2s, box-shadow .2s;
}
.tip-amount{ position:relative; }
.tip-amount:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 20px -8px rgba(0,113,227,.4); }
.tip-amount-pop{ border:2px solid var(--accent); background:rgba(0,113,227,.06); color:var(--accent); font-weight:800; box-shadow:0 8px 22px -8px rgba(0,113,227,.4); }
.tip-pop{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--grad-brand); color:#fff; font-size:.58rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; white-space:nowrap; box-shadow:0 4px 10px -2px rgba(0,113,227,.55);
}

/* Logos moyens de paiement */
.pay-row{ display:flex; flex-direction:column; align-items:center; gap:13px; margin-top:34px; }
.pay-label{ display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:.85rem; font-weight:500; }
.pay-marks{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.pay{ height:26px; width:auto; }
.pay-marks-sm{ margin-top:18px; gap:14px; }
.pay-marks-sm .pay{ height:22px; }

/* Lien voiture de société */
.biz-link{
  display:flex; align-items:center; gap:9px; width:fit-content; margin:26px auto 0;
  color:var(--accent); font-weight:600; font-size:.95rem; padding:11px 20px;
  border:1px solid rgba(0,113,227,.25); border-radius:999px; background:rgba(0,113,227,.05);
  transition:background .2s, border-color .2s, transform .2s;
}
.biz-link:hover{ background:rgba(0,113,227,.1); border-color:var(--accent); transform:translateY(-1px); }

/* Mise en avant Bit (pourboires) */
.tip-bit{
  display:inline-flex; align-items:center; gap:11px; padding:9px 18px 9px 11px; border-radius:999px;
  background:rgba(255,255,255,.5); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(40,194,194,.45); box-shadow:0 8px 20px -12px rgba(0,140,140,.35), inset 0 1px 0 rgba(255,255,255,.85);
  font-weight:700; font-size:.98rem; color:#0a8a8a;
}
.tip-bit img{ height:30px; width:30px; border-radius:7px; }

/* Sélecteur perso / société (modale) */
.chooser{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.chooser[hidden]{ display:none; }
.chooser-backdrop{ position:absolute; inset:0; background:rgba(11,31,51,.45); backdrop-filter:blur(4px); animation:fadeIn .25s var(--ease); }
.chooser-card{ position:relative; z-index:1; width:100%; max-width:420px; background:#fff; border-radius:24px; box-shadow:0 30px 70px -20px rgba(0,0,0,.4); padding:28px 24px 24px; animation:chooserIn .35s var(--ease-out); }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes chooserIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.chooser-x{ position:absolute; inset-block-start:14px; inset-inline-end:16px; border:0; background:none; font-size:1.6rem; line-height:1; color:var(--faint); cursor:pointer; }
.chooser-title{ font-size:1.3rem; text-align:center; margin-bottom:20px; }
.chooser-opts{ display:grid; gap:12px; }
.chooser-opt{ display:flex; align-items:center; gap:14px; text-align:start; cursor:pointer; background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; font-family:inherit; transition:border-color .2s, box-shadow .2s, transform .15s; }
.chooser-opt:hover{ border-color:var(--accent); box-shadow:0 8px 24px -10px rgba(0,113,227,.35); transform:translateY(-1px); }
.chooser-ico{ flex:none; width:46px; height:46px; border-radius:13px; background:var(--grad-brand); color:#fff; display:grid; place-items:center; box-shadow:0 8px 18px -8px rgba(0,113,227,.5); }
.chooser-ico svg{ width:24px; height:24px; }
.chooser-txt{ flex:1; display:flex; flex-direction:column; }
.chooser-txt b{ font-size:1.05rem; font-weight:700; color:var(--text); }
.chooser-txt i{ font-style:normal; font-size:.88rem; color:var(--muted); margin-top:1px; }
.chooser-arrow{ color:var(--faint); font-size:1.5rem; }
html[dir="rtl"] .chooser-arrow{ transform:scaleX(-1); }
@media (max-width:560px){
  .chooser{ align-items:flex-end; padding:0; }
  .chooser-card{ max-width:none; border-radius:24px 24px 0 0; padding-bottom:30px; animation:sheetIn .35s var(--ease-out); }
  @keyframes sheetIn{ from{ transform:translateY(100%); } to{ transform:none; } }
}

/* Avis (défilement continu, premium) */
.reviews{ background:var(--bg-2); padding:64px 0 36px; overflow:hidden; }
.reviews .section-head{ margin-bottom:32px; }
.reviews-rating{ margin-top:10px; color:var(--muted); font-size:14px; font-weight:500; }
.reviews-rating .rr-stars{ color:var(--gold); letter-spacing:1px; }
.reviews-marquee{ position:relative; direction:ltr; cursor:grab; touch-action:pan-y; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.reviews-marquee.grabbing{ cursor:grabbing; }
.reviews-track{ display:flex; width:max-content; direction:ltr; padding:8px 0; will-change:transform; }
.reviews-hint{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; color:var(--faint); font-size:13px; font-weight:500; }
.reviews-hint svg{ width:20px; height:20px; }
.review-card{ position:relative; flex:0 0 320px; max-width:82vw; margin-right:18px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:22px; box-shadow:0 12px 34px -18px rgba(11,31,51,.22); padding:26px 24px; text-align:start; display:flex; flex-direction:column; }
html[lang="he"] .review-card{ direction:rtl; }
.r-mark{ position:absolute; inset-block-start:8px; inset-inline-end:20px; font-size:50px; line-height:1; color:rgba(0,113,227,.13); font-weight:700; font-family:Georgia,"Times New Roman",serif; }
.r-stars{ color:var(--gold); letter-spacing:1px; font-size:14px; }
.r-quote{ margin-top:12px; font-size:1.06rem; font-weight:500; line-height:1.5; color:var(--text); flex:1; }
.r-person{ margin-top:18px; display:flex; align-items:center; gap:11px; }
.r-avatar{ flex:none; width:40px; height:40px; border-radius:50%; color:#fff; font-weight:700; font-size:1rem; display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.r-who{ display:flex; flex-direction:column; line-height:1.2; }
.r-who b{ font-size:.92rem; font-weight:700; color:var(--text); }
.r-who small{ font-size:.8rem; color:var(--muted); margin-top:1px; }

/* FAQ */
.faq{ background:var(--bg); }
.faq-list{ max-width:760px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:22px 4px; min-height:48px; font-weight:500; font-size:1.05rem;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--muted); font-weight:400; font-size:1.6rem; line-height:1; transition:transform .3s var(--ease), color .2s; }
.faq-item[open] summary::after{ transform:rotate(45deg); color:var(--text); }
.faq-a{ padding:0 4px 22px; color:var(--muted); font-size:1rem; max-width:62ch; }

/* CTA finale */
.final-cta{ text-align:center; padding-block:96px; background:var(--bg-2); position:relative; overflow:hidden; }
.final-cta::before{ content:""; position:absolute; inset:auto -10% -45% -10%; height:85%; background:radial-gradient(50% 62% at 50% 100%, rgba(0,113,227,.14), rgba(40,214,200,.07) 45%, transparent 72%); pointer-events:none; }
.final-cta .container{ position:relative; z-index:1; }
.final-cta .btn-hero{ margin-inline:auto; }
.final-dot{ display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--muted); margin-bottom:22px; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(52,199,89,.6); animation:pulse 2.2s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(52,199,89,.5);} 70%{ box-shadow:0 0 0 11px rgba(52,199,89,0);} 100%{ box-shadow:0 0 0 0 rgba(52,199,89,0);} }
.final-cta h2{ font-size:clamp(28px,5.4vw,46px); margin-bottom:30px; }
.final-trust{ margin-top:22px; display:flex; justify-content:center; align-items:center; gap:8px; font-size:14px; color:var(--faint); }
.final-trust svg{ width:16px; height:16px; }

/* Footer */
.site-footer{ background:var(--bg-2); border-top:1px solid var(--line); padding-block:40px 30px; }
.footer-inner{ display:grid; gap:20px; }
.footer-brand{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.footer-tag{ width:100%; color:var(--faint); font-size:.9rem; margin-top:4px; }
.footer-links{ display:flex; gap:24px; color:var(--muted); font-size:.92rem; }
.footer-links a:hover{ color:var(--text); }
.footer-bottom{ margin-top:20px; color:var(--faint); font-size:12px; }

/* ---------------- Maquette iPhone animée ---------------- */
.hero-visual{ display:flex; justify-content:center; }
.phone-float{ animation:float 3.6s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.phone-stage{ position:relative; }
.phone-stage::before{
  content:""; position:absolute; inset:-12%; z-index:0;
  background:radial-gradient(closest-side, rgba(0,113,227,.16), rgba(52,199,89,.08) 55%, transparent 74%); filter:blur(14px);
}
.phone{
  position:relative; z-index:1; width:clamp(232px, 27vw, 268px); aspect-ratio:9/19;
  background:linear-gradient(160deg,#2b2d31,#0e0f12); border-radius:48px; padding:11px;
  box-shadow:0 30px 80px rgba(0,0,0,.18), inset 0 0 0 1.5px rgba(255,255,255,.08);
}
.phone-screen{ position:relative; width:100%; height:100%; border-radius:37px; overflow:hidden; background:#000; isolation:isolate; }
.phone-screen .scr{ position:absolute; inset:0; }
.notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:86px; height:22px; background:#000; border-radius:0 0 16px 16px; z-index:6; }

/* écran verrouillé (nuit) */
.s-lock{ background:#1a1320 url("../img/lock-bg.jpg") center/cover no-repeat; color:#fff; display:flex; flex-direction:column; align-items:center; padding-top:42px; }
.lock-date{ font-size:.7rem; opacity:.7; font-weight:500; }
.lock-time{ font-size:2.7rem; font-weight:600; letter-spacing:-.02em; line-height:1; margin-top:2px; }
.notif{
  position:absolute; top:150px; inset-inline:11px; display:flex; gap:10px; align-items:flex-start;
  background:rgba(58,58,66,.5); backdrop-filter:blur(22px); border:1px solid rgba(255,255,255,.14);
  border-radius:20px; padding:11px; box-shadow:0 16px 34px -14px rgba(0,0,0,.6);
}
.notif-ico{ flex:none; width:36px; height:36px; border-radius:10px; background:#fff; display:grid; place-items:center; }
.notif-ico svg{ width:21px; height:25px; }
.notif-body{ flex:1; min-width:0; text-align:start; color:#fff; }
.notif-top{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.notif-app{ font-size:.62rem; font-weight:700; color:rgba(255,255,255,.95); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-now{ font-size:.56rem; color:rgba(255,255,255,.5); white-space:nowrap; flex:none; }
.notif-msg{ display:block; font-size:.78rem; font-weight:500; color:#fff; margin-top:3px; line-height:1.3; }
.tap{ position:absolute; top:186px; left:50%; width:54px; height:54px; margin-left:-27px; border-radius:50%; background:rgba(255,255,255,.42); z-index:3; }

/* écran appli (clair) */
.s-app{ background:#fff; color:var(--text); display:flex; flex-direction:column; padding:42px 15px 16px; }
.app-brand{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:12px; }
.app-brand svg{ width:17px; height:20px; flex:none; }
.app-brand .brand-name{ font-size:.82rem; font-weight:700; }
.app-head{ text-align:center; padding-inline:6px; }
.app-title{ font-size:.92rem; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.app-map{ position:relative; margin-top:14px; height:150px; border-radius:18px; overflow:hidden; background:#E8EDF3; border:1px solid rgba(0,0,0,.06); }
.map-svg{ position:absolute; inset:0; width:100%; height:100%; }
.pin{ position:absolute; top:48%; left:50%; transform:translate(-50%,-100%); z-index:2; }
.pin svg{ width:30px; height:38px; filter:drop-shadow(0 6px 8px rgba(0,113,227,.45)); }
.addr-card{ margin-top:13px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:13px 14px; box-shadow:var(--shadow); }
.addr-row{ display:flex; align-items:center; gap:10px; font-size:.85rem; font-weight:600; }
.addr-row + .addr-row{ margin-top:11px; }
.addr-row .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); flex:none; box-shadow:none; animation:none; }
.addr-row .dot2{ background:var(--accent); }
.confirm-btn{ margin-top:auto; background:var(--accent); color:#fff; text-align:center; font-weight:600; font-size:.9rem; padding:13px; border-radius:14px; }

/* écran succès */
.s-done{ background:linear-gradient(165deg,#0A84FF,#0058c8); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.check{ position:relative; width:74px; height:74px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 18px 38px -10px rgba(0,0,0,.35); }
.check::before, .check::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:3px solid rgba(255,255,255,.75); opacity:0; }
.check::before{ animation:pRing 13s ease-out infinite; }
.check::after{ border-width:2px; animation:pRing2 13s ease-out infinite; }
@keyframes pRing{ 0%,76%{opacity:0;transform:scale(.5)} 81%{opacity:.65;transform:scale(1)} 89%{opacity:0;transform:scale(1.9)} 100%{opacity:0} }
@keyframes pRing2{ 0%,78%{opacity:0;transform:scale(.6)} 83%{opacity:.5;transform:scale(1)} 91%{opacity:0;transform:scale(2.3)} 100%{opacity:0} }
.check svg{ width:38px; height:38px; fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.check svg path{ stroke-dasharray:30; stroke-dashoffset:30; animation:pDraw 13s ease infinite; }
@keyframes pDraw{ 0%,78%{ stroke-dashoffset:30; } 86%,100%{ stroke-dashoffset:0; } }
.done-title{ font-size:1.28rem; font-weight:700; margin-top:6px; }
.done-sub{ font-size:.88rem; opacity:.92; }

/* ===== Timeline animée — sans écran noir (boucle 13s) ===== */
@keyframes pLock{ 0%{opacity:1} 37%{opacity:1} 41%{opacity:0} 94%{opacity:0} 98%,100%{opacity:1} }
@keyframes pNotif{ 0%,6%{opacity:0;transform:translateY(-150%)} 10%{opacity:1;transform:translateY(0)} 34%{opacity:1;transform:translateY(0)} 37%{opacity:0;transform:translateY(-40%)} 100%{opacity:0;transform:translateY(-150%)} }
@keyframes pTap{ 0%,33%{opacity:0;transform:scale(.2)} 34%{opacity:.5;transform:scale(.2)} 37%{opacity:0;transform:scale(1.7)} 100%{opacity:0} }
@keyframes pApp{ 0%,37%{opacity:0;transform:scale(.985)} 42%{opacity:1;transform:scale(1)} 70%{opacity:1;transform:scale(1)} 74%{opacity:0;transform:scale(.985)} 100%{opacity:0} }
@keyframes pPin{ 0%,42%{opacity:0;transform:translate(-50%,-165%) scale(.6)} 49%{opacity:1;transform:translate(-50%,-100%) scale(1)} 51%{transform:translate(-50%,-118%)} 53%{transform:translate(-50%,-100%)} 100%{opacity:1;transform:translate(-50%,-100%)} }
@keyframes pRow1{ 0%,50%{opacity:0;transform:translateY(8px)} 56%{opacity:1;transform:translateY(0)} 100%{opacity:1} }
@keyframes pRow2{ 0%,56%{opacity:0;transform:translateY(8px)} 62%{opacity:1;transform:translateY(0)} 100%{opacity:1} }
@keyframes pConfirm{ 0%,62%{transform:scale(1)} 65%{transform:scale(1.05)} 68%{transform:scale(1)} 70%{transform:scale(.93)} 72%{transform:scale(1)} 100%{transform:scale(1)} }
@keyframes pDone{ 0%,72%{opacity:0;transform:scale(.96)} 76%{opacity:1;transform:scale(1)} 94%{opacity:1;transform:scale(1)} 97%,100%{opacity:0} }
@keyframes pCheck{ 0%,74%{transform:scale(0)} 79%{transform:scale(1.15)} 82%{transform:scale(1)} 100%{transform:scale(1)} }
.s-lock{ animation:pLock 13s ease infinite; }
.notif{ animation:pNotif 13s var(--ease-out) infinite; }
.tap{ animation:pTap 13s ease-out infinite; }
.s-app{ opacity:0; animation:pApp 13s ease infinite; }
.pin{ animation:pPin 13s cubic-bezier(.22,1.2,.36,1) infinite; }
.addr-city{ animation:pRow1 13s ease infinite; }
.addr-street{ animation:pRow2 13s ease infinite; }
.confirm-btn{ animation:pConfirm 13s ease infinite; }
.s-done{ opacity:0; animation:pDone 13s ease infinite; }
.check{ animation:pCheck 13s cubic-bezier(.22,1.4,.36,1) infinite; }

/* ---------------- Animations au scroll ---------------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.hero-copy .reveal:nth-child(3){ transition-delay:.40s; }
.hero-copy .reveal:nth-child(4){ transition-delay:.52s; }
.hero-copy .reveal:nth-child(5){ transition-delay:.66s; }
/* Titre — cascade ligne par ligne (rythme Apple) */
.hero-title .t1{ transition-duration:.6s; transition-delay:0s; }
.hero-title .t2{ transition-duration:.7s; transition-delay:.12s; }
.hero-title .t3{ transition-duration:.5s; transition-delay:.24s; }
.hero-title .reveal.t2{ transform:translateY(24px) scale(.97); }
.hero-title .reveal.t2.in{ transform:none; }
.steps .step:nth-child(2){ transition-delay:.1s; }
.steps .step:nth-child(3){ transition-delay:.2s; }
.plans .plan:nth-child(2){ transition-delay:.1s; }
.faq-list .faq-item:nth-child(2){ transition-delay:.06s; }
.faq-list .faq-item:nth-child(3){ transition-delay:.12s; }
.faq-list .faq-item:nth-child(4){ transition-delay:.18s; }

/* Ouverture FAQ — fondu doux satisfaisant */
.faq-item[open] .faq-a{ animation:faqIn .32s var(--ease-out); }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* Pression tactile satisfaisante sur cartes & boutons cliquables */
.plan, .step, .tip-card{ -webkit-tap-highlight-color:transparent; }
.btn, .lang-switch button, .faq-item summary{ -webkit-tap-highlight-color:transparent; }

/* ---------------- Desktop ---------------- */
@media (min-width:900px){
  .main-nav{ display:flex; }
  .header-actions .btn{ display:inline-flex; }
  .hero-inner{ grid-template-columns:1.1fr .9fr; gap:48px; }
  .hero-sub{ font-size:19px; }
  .steps{ grid-template-columns:repeat(3,1fr); }
  .plans{ grid-template-columns:1.08fr .92fr; align-items:start; }
  .footer-inner{ grid-template-columns:1fr auto; align-items:center; }
}

/* ---------------- Mobile (≤ 719px) ---------------- */
@media (max-width:719px){
  .container{ padding-inline:24px; }
  .hero{ padding:80px 0 40px; }
  .hero-inner{ gap:8px; }
  .hero-title{ font-size:clamp(40px,11vw,48px); }
  .hero-sub{ font-size:17px; max-width:34ch; }
  .section{ padding-block:64px; }
  .section-head{ margin-bottom:36px; }
  .step{ padding:24px; }
  .plan{ padding:28px 24px; }
  .plan-price .amount{ font-size:56px; }
  .final-cta{ padding-block:68px; }
  .trust-row{ gap:10px 16px; }
  .trust-sep{ display:none; }
  .btn-hero{ width:100%; min-width:0; }
  .tip-card{ flex-direction:column; text-align:center; }
  .tip-btn{ width:100%; }

  .mobile-cta{
    position:fixed; inset-inline:16px; bottom:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:60;
    display:flex; height:52px; transition:transform .4s var(--ease-out), opacity .4s var(--ease-out);
    box-shadow:0 16px 40px -10px rgba(0,113,227,.5);
  }
  body.cta-hidden .mobile-cta{ transform:translateY(180%); opacity:0; pointer-events:none; }
  #pricing,#how,#faq{ scroll-margin-top:70px; }
}

/* =====================================================================
   PAGES FORMULAIRE & CONFIRMATION (Phase 2)
   ===================================================================== */
.page-form{ background:var(--bg-2); }
.form-header{ background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.06); }
.form-header-inner{ display:flex; align-items:center; justify-content:space-between; height:56px; }
.form-main{ display:flex; justify-content:center; padding:32px 0 64px; }
.form-card{
  width:100%; max-width:520px; margin-inline:24px; background:#fff; border:1px solid var(--line);
  border-radius:24px; box-shadow:var(--shadow); padding:34px 30px;
}
.form-title{ font-size:clamp(26px,5vw,32px); letter-spacing:-.02em; }
.form-sub{ margin-top:8px; color:var(--muted); font-size:1rem; }
#signup{ margin-top:26px; display:grid; gap:18px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:.9rem; font-weight:600; color:var(--text); }
.field input{
  font-family:inherit; font-size:16px; color:var(--text); background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:13px 14px; width:100%;
  transition:border-color .2s, box-shadow .2s; min-height:48px;
}
.field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,113,227,.14); }
.field-row{ display:grid; gap:18px; }
.field-err{ color:#E0363B; font-size:.8rem; min-height:0; }
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:4px; }
.seg-opt{ display:flex; align-items:center; justify-content:center; gap:6px; padding:11px; border-radius:9px; cursor:pointer; font-weight:600; font-size:.95rem; color:var(--muted); transition:.2s; }
.seg-opt input{ position:absolute; opacity:0; pointer-events:none; }
.seg-opt:has(input:checked){ background:#fff; color:var(--text); box-shadow:var(--shadow); }
.biz-check{ display:flex; align-items:center; gap:11px; cursor:pointer; font-weight:600; font-size:.96rem; color:var(--text); padding:6px 2px; }
.biz-check input{ width:20px; height:20px; accent-color:var(--accent); flex:none; }
.biz-fields{ display:none; gap:18px; padding:16px; background:var(--bg-2); border-radius:14px; }
.invoice-note{ color:var(--muted); font-size:.86rem; line-height:1.5; }
#submitBtn{ margin-top:6px; }
#submitBtn[disabled]{ opacity:.7; cursor:default; }
.secure-note{ margin-top:14px; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--faint); font-size:.84rem; }

.thanks{ min-height:100svh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; }
.thanks-card{ width:100%; max-width:460px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:48px 34px; }
.thanks-check{ width:74px; height:74px; border-radius:50%; background:var(--grad-brand); display:grid; place-items:center; margin:0 auto 22px; box-shadow:0 16px 36px -10px rgba(0,113,227,.6); }
.thanks-check svg{ width:38px; height:38px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.thanks-title{ font-size:clamp(26px,6vw,34px); letter-spacing:-.02em; }
.thanks-msg{ margin-top:12px; font-size:1.1rem; font-weight:600; }
.thanks-detail{ margin-top:8px; color:var(--muted); }
.thanks-card .btn{ margin-top:22px; }
.final-form{ text-align:start; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); display:grid; gap:16px; }
.final-title{ font-size:1.15rem; font-weight:700; text-align:center; }
.final-sub{ color:var(--muted); font-size:.94rem; text-align:center; margin-top:-10px; }
.final-form .btn{ margin-top:4px; }
.final-done{ margin-top:18px; color:var(--green); font-weight:600; }
.tip-convert{ margin-top:24px; font-weight:600; font-size:1.05rem; }
.tip-lead{ margin-top:14px; display:flex; gap:10px; }
.tip-lead input{ flex:1; font-family:inherit; font-size:16px; color:var(--text); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-height:48px; text-align:start; }
.tip-lead input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,113,227,.14); }
.tip-lead .btn{ height:48px; margin-top:0; flex:none; }
.thanks-heart{ background:#FF3D77 !important; box-shadow:0 14px 34px -10px rgba(255,61,119,.5) !important; }
.thanks-heart svg{ stroke:none; }

@media (min-width:560px){
  .field-row{ grid-template-columns:1fr 1fr; }
}

/* ---------------- Réduire les animations ---------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero-bg,.phone-float,.dot,.badge-dot,
  .s-lock,.notif,.tap,.s-app,.pin,.addr-city,.addr-street,.confirm-btn,.s-done,.check{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .reviews-track{ animation:none; }
  .reviews-marquee{ overflow-x:auto; -webkit-mask:none; mask:none; }
  .s-lock,.s-done,.notif,.tap{ opacity:0; }
  .s-app{ opacity:1; }
  .pin{ opacity:1; transform:translate(-50%,-100%); }
  .addr-city,.addr-street{ opacity:1; transform:none; }
  .check::before,.check::after{ animation:none; opacity:0; }
  .check svg path{ animation:none; stroke-dashoffset:0; }
}

/* Phase 3 — bloc notifications sur infos.html */
.notif-box{ margin-top:18px; padding-top:18px; border-top:1px solid rgba(0,0,0,.08); text-align:center; }

/* Phase 3 — fenêtre pré-paiement (anti-spam) */
.pay-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.pay-modal[hidden]{ display:none; }
.pay-modal-bg{ position:absolute; inset:0; background:rgba(11,31,51,.42); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:pmFade .25s ease; }
.pay-modal-card{ position:relative; width:100%; max-width:390px; background:#fff; border-radius:22px; padding:30px 26px 26px; text-align:center;
  box-shadow:0 30px 70px -20px rgba(11,31,51,.4); animation:pmRise .35s cubic-bezier(.16,1,.3,1); }
.pay-modal-ic{ display:inline-grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--grad-brand);
  margin-bottom:16px; box-shadow:0 14px 30px -10px rgba(0,113,227,.55); }
.pay-modal-ic svg{ width:28px; height:28px; }
.pay-modal-card h3{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; }
.pay-modal-card p{ font-size:15px; line-height:1.55; color:var(--muted); margin:0 0 22px; }
.pay-modal-card .btn{ margin:0; }
@keyframes pmFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pmRise{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.pay-modal-card .pay-modal-cap{ font-size:13px; font-weight:700; color:var(--accent); margin:0 0 12px; }
.pay-modal-progress{ height:5px; background:#ECECEE; border-radius:999px; overflow:hidden; }
.pay-modal-bar{ display:block; height:100%; width:0; background:var(--grad-brand); border-radius:999px; }

/* Fix : masquer le formulaire après envoi (display:grid écrasait [hidden]) */
.final-form[hidden]{ display:none !important; }

/* ============================================================
   Checkout inline PayMe (Phase 4) — modale Apple premium
   ============================================================ */
.co-modal{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.co-modal[hidden]{ display:none !important; }
.co-bg{ position:absolute; inset:0; background:rgba(6,18,32,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:coFade .25s ease both; }
.co-sheet{ position:relative; width:100%; max-width:440px; max-height:calc(100dvh - 32px); overflow-y:auto;
  background:#fff; border-radius:26px; padding:26px 22px 22px;
  box-shadow:0 40px 90px -30px rgba(0,40,90,.6), 0 6px 20px rgba(11,31,51,.1);
  animation:coRise .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes coFade{ from{opacity:0} to{opacity:1} }
@keyframes coRise{ from{opacity:0; transform:translateY(20px) scale(.98)} to{opacity:1; transform:none} }

.co-x{ position:absolute; inset-inline-end:16px; inset-block-start:16px; width:32px; height:32px; border:none;
  border-radius:50%; background:#F0F2F5; color:#5A6B7B; display:grid; place-items:center; cursor:pointer; transition:background .2s; }
.co-x:hover{ background:#E4E8EC; }
.co-x svg{ width:16px; height:16px; }

.co-title{ font-size:23px; font-weight:800; letter-spacing:-.025em; margin:2px 0 18px; }

/* Récap forfait — léger, calme, avec le « 0 ₪ » mis en avant */
.co-plan{ background:#F5F7FA; border-radius:15px; padding:15px 16px; margin-bottom:20px; }
.co-plan-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.co-plan-l{ display:flex; flex-direction:column; gap:2px; }
.co-plan-name{ font-size:15.5px; font-weight:800; color:var(--text); }
.co-plan-sub{ font-size:12.5px; font-weight:600; color:var(--muted); }
.co-plan-price{ display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.co-plan-price b{ font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.co-plan-price i{ font-style:normal; font-size:12.5px; font-weight:600; color:var(--muted); }
.co-free{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid rgba(11,31,51,.08); }
.co-free-big{ font-size:15px; font-weight:800; color:var(--green); background:rgba(52,199,89,.12);
  padding:4px 11px; border-radius:999px; white-space:nowrap; }
.co-free-note{ font-size:12.5px; color:var(--muted); }
.co-free-note .co-dot{ margin:0 6px; opacity:.45; }

/* Champs — style « liste groupée » iOS (un bloc, séparateurs fins) */
.co-group{ border:1px solid var(--line); border-radius:15px; background:#fff; overflow:hidden; margin-bottom:14px;
  transition:border-color .2s, box-shadow .2s; }
.co-group:focus-within{ border-color:rgba(0,113,227,.5); box-shadow:0 0 0 3px rgba(0,113,227,.10); }
.co-gi{ display:block; width:100%; height:52px; border:none; background:transparent; padding:0 15px;
  font-family:inherit; font-size:16px; color:var(--text); outline:none; }
.co-gi + .co-gi{ border-top:1px solid var(--line); }
.co-gi::placeholder{ color:#9AA6B2; }

.co-cardgroup .co-card{ height:52px; display:flex; align-items:center; padding:0 15px; }
.co-cardgroup #co-card{ border-bottom:1px solid var(--line); }
.co-cardrow{ display:flex; }
.co-cardrow .co-card{ flex:1; }
.co-cardrow .co-card + .co-card{ border-inline-start:1px solid var(--line); }
.co-card > *{ width:100%; }

.co-soon{ margin:2px 2px 0; font-size:14px; color:var(--muted); line-height:1.5; text-align:center; }
.co-err{ margin:14px 0 0; font-size:14px; font-weight:700; color:#FF3B30; text-align:center; }

.co-invoice{ margin:-2px 2px 0; font-size:12.5px; color:var(--muted); text-align:center; line-height:1.5; }
.co-pay{ margin-top:20px; height:54px; font-size:16.5px; border-radius:15px; }
.co-pay.is-busy{ opacity:.75; }
.co-secure{ margin:12px 0 0; font-size:12.5px; color:var(--muted); text-align:center; }
.co-modal [hidden]{ display:none !important; }

.co-done{ text-align:center; padding:18px 6px 8px; animation:coRise .45s cubic-bezier(.16,1,.3,1) both; }
.co-ok-ic{ display:inline-grid; place-items:center; width:66px; height:66px; border-radius:50%;
  background:var(--grad-brand); margin-bottom:16px; box-shadow:0 18px 38px -12px rgba(0,113,227,.55); }
.co-ok-ic svg{ width:32px; height:32px; }
.co-done h3{ font-size:21px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; }
.co-done p{ font-size:14.5px; color:var(--muted); }

@media (max-width:480px){
  .co-modal{ align-items:flex-end; padding:0; }
  .co-sheet{ max-width:none; border-radius:24px 24px 0 0; max-height:94dvh; padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
  @keyframes coRise{ from{opacity:.4; transform:translateY(100%)} to{opacity:1; transform:none} }
}
@media (prefers-reduced-motion: reduce){ .co-bg,.co-sheet,.co-done{ animation:none!important; } }

/* ============================================================
   Lead « 1er lavage offert » + Chat contact (Phase 5)
   ============================================================ */
.lead-sec{ padding-block:6px 46px; }
.lead-card{ max-width:520px; margin:0 auto; text-align:center; box-sizing:border-box; padding:38px 26px;
  border-radius:26px; position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(0,113,227,.10), rgba(40,214,200,.08));
  border:1px solid rgba(0,113,227,.18); box-shadow:0 24px 60px -32px rgba(0,113,227,.5); }
.lead-badge{ display:inline-block; margin-bottom:14px; padding:5px 14px; border-radius:999px;
  background:var(--grad-brand); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 8px 20px -8px rgba(0,113,227,.6); }
.lead-title{ font-size:clamp(24px,6.2vw,34px); font-weight:800; letter-spacing:-.025em; line-height:1.14; margin:0 0 12px;
  color:var(--text); overflow-wrap:break-word; }
.lead-sub{ font-size:15.5px; color:var(--muted); line-height:1.55; margin:0 auto 24px; max-width:40ch; }
.lead-form{ display:grid; gap:12px; max-width:380px; margin:0 auto; }
.lead-input{ width:100%; height:54px; border:1px solid var(--line); border-radius:14px; padding:0 16px; background:#fff;
  font-family:inherit; font-size:16px; color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s; }
.lead-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,113,227,.12); }
.lead-btn{ height:54px; font-size:16.5px; border-radius:14px; margin-top:2px; }
.lead-err{ margin:4px 0 0; font-size:14px; font-weight:700; color:#FF3B30; }
.lead-ok{ font-size:18px; font-weight:800; color:var(--green); margin:8px 0 0; animation:leadPop .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes leadPop{ from{ opacity:0; transform:scale(.9);} to{ opacity:1; transform:none; } }
.lead-sec .lead-form[hidden], .lead-sec .lead-ok[hidden], .lead-err[hidden]{ display:none !important; }

/* Chat flottant */
.chat-widget{ position:fixed; z-index:1300; inset-block-end:calc(18px + env(safe-area-inset-bottom));
  inset-inline-end:calc(18px + env(safe-area-inset-right)); }
.chat-launch{ display:inline-flex; align-items:center; gap:9px; height:52px; padding:0 20px; border:none; cursor:pointer;
  border-radius:999px; background:var(--grad-brand-strong); color:#fff; font-family:inherit; font-size:15px; font-weight:700;
  box-shadow:0 14px 34px -10px rgba(0,113,227,.6); transition:transform .2s, box-shadow .2s; }
.chat-launch:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(0,113,227,.7); }
.chat-launch svg:not(.chat-launch-bubble){ width:22px; height:22px; }
.chat-panel{ position:absolute; inset-block-end:64px; inset-inline-end:0; width:min(92vw,340px);
  background:#fff; border-radius:20px; box-shadow:0 30px 70px -24px rgba(0,40,90,.5), 0 4px 16px rgba(11,31,51,.1);
  overflow:hidden; animation:chatUp .3s cubic-bezier(.16,1,.3,1) both; }
@keyframes chatUp{ from{ opacity:0; transform:translateY(12px) scale(.98);} to{ opacity:1; transform:none; } }
.chat-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:18px 18px 12px;
  background:linear-gradient(160deg,#0A84FF,#0071E3); color:#fff; }
.chat-title{ font-size:16px; font-weight:800; letter-spacing:-.01em; }
.chat-sub{ font-size:12.5px; color:rgba(255,255,255,.9); margin-top:2px; }
.chat-close{ border:none; background:rgba(255,255,255,.2); color:#fff; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; flex:none; }
.chat-close svg{ width:15px; height:15px; }
.chat-body{ padding:16px 18px 18px; display:grid; gap:10px; }
.chat-input{ width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 13px; background:#fff;
  font-family:inherit; font-size:15px; color:var(--text); outline:none; resize:vertical; transition:border-color .2s, box-shadow .2s; }
.chat-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,113,227,.12); }
#chat-email{ height:46px; resize:none; }
.chat-send{ height:46px; font-size:15px; border-radius:12px; }
.chat-err{ margin:0; font-size:13px; font-weight:700; color:#FF3B30; }
.chat-ok{ padding:22px 18px 24px; margin:0; text-align:center; font-size:15px; font-weight:700; color:var(--green); }
.chat-widget [hidden]{ display:none !important; }
/* Bulle « SMS » du bouton flottant — le canal est lisible dans l'icône même */
.chat-launch-bubble{
  flex:none; width:30px; height:23px; overflow:visible;
  filter:drop-shadow(0 1px 2px rgba(0,40,90,.22));
  transition:transform .25s var(--ease-out);
}
.chat-launch-bubble text{ font-family:inherit; }
.chat-launch:hover .chat-launch-bubble{ transform:translateY(-1px); }
[dir="rtl"] .chat-launch-bubble{ transform:scaleX(-1); }
[dir="rtl"] .chat-launch:hover .chat-launch-bubble{ transform:scaleX(-1) translateY(-1px); }
@media (max-width:480px){
  .chat-launch-label{ display:none; }
  .chat-launch{ padding:0 16px; gap:0; }
}

/* ============================================================
   Offres — Parrainage + Voisins (Phase 5)
   ============================================================ */
.offers-grid{ display:grid; gap:20px; grid-template-columns:1fr; max-width:920px; margin:0 auto; }
@media (min-width:760px){ .offers-grid{ grid-template-columns:1fr 1fr; } }
.offer-card{ position:relative; text-align:center; background:#fff; border:1px solid var(--line);
  border-radius:24px; padding:36px 28px 30px; box-shadow:0 18px 44px -28px rgba(11,31,51,.25);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); overflow:hidden; }
.offer-card:hover{ transform:translateY(-3px); box-shadow:0 26px 56px -30px rgba(11,31,51,.35); }
.offer-ic{ display:inline-grid; place-items:center; width:62px; height:62px; border-radius:18px; color:#fff;
  margin-bottom:18px; box-shadow:0 14px 30px -12px rgba(0,113,227,.55); }
.offer-ic svg{ width:30px; height:30px; }
.offer-ic-a{ background:linear-gradient(150deg,#0A84FF,#0071E3); }
.offer-ic-b{ background:linear-gradient(150deg,#28D6C8,#1E9E4A); box-shadow:0 14px 30px -12px rgba(30,158,74,.5); }
.offer-eyebrow{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.offer-card:nth-child(2) .offer-eyebrow{ color:#1E9E4A; }
.offer-title{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 12px; color:var(--text); }
.offer-text{ font-size:15px; color:var(--muted); line-height:1.55; margin:0 auto 24px; max-width:34ch; }
.offer-cta{ height:52px; font-size:15.5px; border-radius:14px; }
.offer-card:nth-child(2) .offer-cta{ background:linear-gradient(135deg,#28D6C8,#1E9E4A); box-shadow:0 10px 26px -12px rgba(30,158,74,.6); }

/* ============================================================
   Phase 5 — friction lead, chat, navbar glass, langue compacte
   ============================================================ */
/* Champ lead avec coche verte de validation */
.lead-field{ position:relative; }
.lead-tick{ position:absolute; inset-block-start:50%; inset-inline-end:14px; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center;
  animation:leadPop .3s cubic-bezier(.16,1,.3,1) both; }
.lead-tick svg{ width:13px; height:13px; }
.lead-tick[hidden]{ display:none !important; }
.lead-reassure{ margin:12px 0 0; font-size:13px; font-weight:600; color:var(--muted); }

/* Chat : au-dessus du CTA fixe mobile (anti-chevauchement) */
@media (max-width:768px){
  .chat-widget{ inset-block-end:calc(80px + env(safe-area-inset-bottom)); }
  body.cta-hidden .chat-widget{ inset-block-end:calc(18px + env(safe-area-inset-bottom)); }
}

/* Navbar glassmorphism qui se solidifie au scroll */
.site-header{ background:rgba(255,255,255,.55); backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%);
  border-bottom:1px solid rgba(11,31,51,.05); transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.site-header.scrolled{ background:rgba(255,255,255,.86); border-bottom-color:rgba(11,31,51,.08); box-shadow:0 8px 24px -16px rgba(11,31,51,.3); }

/* Sélecteur de langue compact (dropdown) — landing uniquement, mobile */
@media (max-width:768px){
  .site-header .lang-switch{ position:relative; }
  .site-header .lang-switch .lang-ind{ display:none; }
  .site-header .lang-switch > button{ display:none; }
  .site-header .lang-switch > button.is-active{ display:inline-flex; padding-inline-end:22px; }
  .site-header .lang-switch:not(.open)::after{ content:""; position:absolute; inset-inline-end:9px; inset-block-start:50%;
    width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
    transform:translateY(-70%) rotate(45deg); pointer-events:none; }
  .site-header .lang-switch.open{ position:absolute; z-index:40; inset-inline-end:0; inset-block-start:-4px;
    flex-direction:column; align-items:stretch; gap:2px; padding:6px; background:#fff; border-radius:14px;
    box-shadow:0 16px 40px -14px rgba(11,31,51,.4); border:1px solid var(--line); }
  .site-header .lang-switch.open > button{ display:inline-flex; justify-content:flex-start; width:100%; padding:8px 12px; }
}

/* ============================================================
   Modale de parrainage (Phase 5)
   ============================================================ */
.ref-modal{ position:fixed; inset:0; z-index:1400; display:flex; align-items:center; justify-content:center;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.ref-modal[hidden]{ display:none !important; }
.ref-bg{ position:absolute; inset:0; background:rgba(6,18,32,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:coFade .25s ease both; }
.ref-sheet{ position:relative; width:100%; max-width:420px; max-height:calc(100dvh - 32px); overflow-y:auto;
  background:#fff; border-radius:26px; padding:28px 22px 22px; text-align:center;
  box-shadow:0 40px 90px -30px rgba(0,40,90,.6), 0 6px 20px rgba(11,31,51,.1);
  animation:coRise .42s cubic-bezier(.16,1,.3,1) both; }
.ref-x{ position:absolute; inset-inline-end:16px; inset-block-start:16px; width:32px; height:32px; border:none;
  border-radius:50%; background:#F0F2F5; color:#5A6B7B; display:grid; place-items:center; cursor:pointer; }
.ref-x svg{ width:16px; height:16px; }
.ref-gift{ display:inline-grid; place-items:center; width:60px; height:60px; border-radius:18px; background:var(--grad-brand);
  margin-bottom:14px; box-shadow:0 14px 30px -10px rgba(0,113,227,.55); }
.ref-gift svg{ width:28px; height:28px; }
.ref-title{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; }
.ref-sub{ font-size:14.5px; color:var(--muted); line-height:1.5; margin:0 auto 20px; max-width:34ch; }
.ref-contact{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:9px; }
.ref-input{ width:100%; height:50px; border:1px solid var(--line); border-radius:13px; padding:0 14px; background:#fff;
  font-family:inherit; font-size:15.5px; color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s; }
.ref-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,113,227,.12); }
.ref-add{ width:100%; height:46px; border:1.5px dashed rgba(0,113,227,.4); border-radius:13px; background:rgba(0,113,227,.04);
  color:var(--accent); font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer; margin:4px 0 18px; transition:background .2s, border-color .2s; }
.ref-add:hover{ background:rgba(0,113,227,.08); border-color:var(--accent); }
.ref-me{ text-align:start; border-top:1px solid var(--line); padding-top:16px; display:grid; gap:9px; }
.ref-me-title{ font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--muted); text-transform:uppercase; margin-bottom:2px; }
.ref-err{ margin:12px 0 0; font-size:14px; font-weight:700; color:#FF3B30; }
.ref-send{ height:54px; font-size:16.5px; border-radius:15px; margin-top:18px; }
.ref-ok{ text-align:center; padding:26px 8px 12px; animation:coRise .45s cubic-bezier(.16,1,.3,1) both; }
.ref-ok-ic{ display:inline-grid; place-items:center; width:66px; height:66px; border-radius:50%; background:var(--grad-brand);
  margin-bottom:16px; box-shadow:0 18px 38px -12px rgba(0,113,227,.55); }
.ref-ok-ic svg{ width:32px; height:32px; }
.ref-ok p{ font-size:17px; font-weight:800; color:var(--text); margin:0; }
.ref-modal [hidden]{ display:none !important; }
@media (max-width:480px){
  .ref-modal{ align-items:flex-end; padding:0; }
  .ref-sheet{ max-width:none; border-radius:24px 24px 0 0; max-height:94dvh; padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Parrainage à paliers (gamifié) — Phase 5
   ============================================================ */
.tiers{ display:grid; gap:16px; grid-template-columns:1fr; max-width:840px; margin:0 auto 30px; }
@media (min-width:720px){ .tiers{ grid-template-columns:repeat(3,1fr); } }
.tier-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px 20px 24px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:9px;
  box-shadow:0 14px 36px -26px rgba(11,31,51,.3); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.tier-card:hover{ transform:translateY(-3px); box-shadow:0 22px 48px -28px rgba(11,31,51,.4); }
.tier-hi{ border-color:transparent; background:linear-gradient(#fff,#fff) padding-box, var(--grad-brand) border-box;
  box-shadow:0 24px 54px -28px rgba(0,113,227,.5); }
.tier-badge{ width:44px; height:44px; border-radius:50%; background:var(--grad-brand); color:#fff; font-size:19px; font-weight:800;
  display:grid; place-items:center; box-shadow:0 10px 22px -10px rgba(0,113,227,.6); }
.tier-label{ font-size:15px; font-weight:700; color:var(--text); }
.tier-arrow{ color:var(--faint); line-height:0; }
.tier-arrow svg{ width:20px; height:20px; transform:rotate(90deg); }
html[dir="rtl"] .tier-arrow svg{ transform:rotate(90deg); }
.tier-reward{ font-size:20px; font-weight:800; letter-spacing:-.02em;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.off-cta-wrap{ text-align:center; }
.off-cta{ min-width:min(280px,90vw); }
.off-note{ margin:14px 0 0; font-size:13px; color:var(--muted); }

/* Hero — specs en pastilles (mise en valeur de l'offre) */
.hero-specs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.hero-spec{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px;
  background:rgba(255,255,255,.62); backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
  border:1px solid rgba(11,31,51,.08); font-size:14.5px; font-weight:700; color:var(--text);
  box-shadow:0 8px 20px -14px rgba(11,31,51,.35), inset 0 1px 0 rgba(255,255,255,.7); }
.hero-spec svg{ width:17px; height:17px; color:var(--accent); flex:none; }

/* ===== Choix de la langue — 1re visite (Apple premium) ===== */
.lang-modal{ position:fixed; inset:0; z-index:1600; display:flex; align-items:center; justify-content:center; padding:24px; }
.lang-modal[hidden]{ display:none !important; }
.lang-bg{ position:absolute; inset:0; background:rgba(12,14,18,.44); backdrop-filter:saturate(180%) blur(22px); -webkit-backdrop-filter:saturate(180%) blur(22px); animation:lmFade .5s var(--ease-out) both; }
.lang-sheet{
  position:relative; width:100%; max-width:360px; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(30px); -webkit-backdrop-filter:saturate(180%) blur(30px);
  border:1px solid rgba(255,255,255,.7); border-radius:28px; padding:34px 24px 24px;
  text-align:center; box-shadow:0 40px 90px -30px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.06);
  animation:lmRise .62s cubic-bezier(.16,1,.3,1) both;
}
.lang-logo{ display:block; margin:0 auto 12px; width:38px; height:46px; }
.lang-brand{ font-size:20px; font-weight:700; letter-spacing:-.03em; line-height:1; }
.lang-brand b{ font-weight:700; }
.lang-brand i{ color:var(--accent); font-style:normal; font-weight:700; }
.lang-prompt{ margin:12px 0 22px; font-size:12.5px; font-weight:500; color:var(--muted); letter-spacing:-.005em; line-height:1.5; }
.lang-opts{ display:flex; flex-direction:column; gap:9px; }
.lang-opt{
  display:flex; align-items:center; gap:13px; width:100%; padding:14px 16px;
  background:#fff; border:1px solid var(--line); border-radius:16px; cursor:pointer;
  font-family:inherit; font-size:16.5px; font-weight:600; letter-spacing:-.015em; color:var(--ink);
  transition:border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  animation:lmRise .6s cubic-bezier(.16,1,.3,1) both;
}
.lang-opt:nth-child(1){ animation-delay:.10s; }
.lang-opt:nth-child(2){ animation-delay:.17s; }
.lang-opt:nth-child(3){ animation-delay:.24s; }
.lang-opt span{ flex:1; text-align:start; }
.lang-opt .flag{ flex:none; width:24px; height:17px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 .5px rgba(0,0,0,.12); }
.lang-opt .lang-go{ flex:none; width:17px; height:17px; color:var(--muted); opacity:.45; transition:transform .28s var(--ease-out), opacity .25s var(--ease-out), color .25s var(--ease-out); }
.lang-opt:hover{ border-color:var(--accent); transform:translateY(-1px); box-shadow:0 12px 28px -14px rgba(0,113,227,.5); }
.lang-opt:hover .lang-go{ opacity:1; color:var(--accent); transform:translateX(3px); }
.lang-opt:active{ transform:scale(.985); }
[dir="rtl"] .lang-opt .lang-go{ transform:scaleX(-1); }
[dir="rtl"] .lang-opt:hover .lang-go{ transform:scaleX(-1) translateX(3px); }
@keyframes lmFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes lmRise{ from{ opacity:0; transform:translateY(16px) scale(.97); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .lang-bg,.lang-sheet,.lang-opt{ animation:none !important; } }

/* Indice « réponse par SMS » sous le champ téléphone du chat */
.chat-hint{
  display:flex; align-items:center; gap:6px; margin:-2px 0 2px; padding:0 2px;
  font-size:12.5px; font-weight:500; letter-spacing:-.005em; color:var(--muted); line-height:1.35;
}
.chat-hint svg{ flex:none; width:13px; height:13px; color:var(--accent); opacity:.75; }

/* ============================================================
   Avant / Après lavage (section preuve)
   ============================================================ */
.beforeafter{ background:var(--bg); }
.ba-card{ max-width:920px; margin:0 auto; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:32px; padding:22px; box-shadow:0 30px 70px -34px rgba(11,31,51,.34); }
.ba-widget{ width:100%; }
.ba-frame{ position:relative; width:100%; aspect-ratio:16/10; border-radius:22px; overflow:hidden;
  background:#eceef1; cursor:ew-resize; touch-action:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }
.ba-clean, .ba-dirty{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; user-select:none; }
.ba-dirty{ will-change:clip-path; }
.ba-shine{ position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0;
  background:radial-gradient(58% 90% at 84% 42%, rgba(255,255,255,.30), transparent 62%); mix-blend-mode:screen; }
.ba-sheen{ position:absolute; top:0; bottom:0; width:34%; pointer-events:none; z-index:3; opacity:0;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%); }
.ba-particles{ position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden; }
.ba-divider{ position:absolute; top:0; bottom:0; left:90%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:5; }
.ba-line{ width:3px; height:100%; background:rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 22px rgba(255,255,255,.55); }
.ba-handle{ position:absolute; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; color:var(--accent);
  box-shadow:0 6px 18px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.7); animation:baHandlePulse 3.2s ease-in-out infinite; }
.ba-handle svg{ width:24px; height:24px; }
.ba-label-before, .ba-label-after{ position:absolute; bottom:16px; z-index:6; padding:7px 14px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.09em; color:#fff; }
.ba-label-before{ left:16px; background:rgba(20,22,26,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.ba-label-after{ right:16px; background:var(--grad-brand-strong); box-shadow:0 6px 16px -6px rgba(0,113,227,.6); }
.ba-thumbs{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; justify-content:center; }
.ba-thumb{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; cursor:pointer; border:none; background:none; font-family:inherit; }
.ba-thumb-img{ width:104px; max-width:22vw; aspect-ratio:16/10; border-radius:13px; overflow:hidden; border:2px solid transparent;
  background:#e9ebee; transition:border-color .2s,transform .15s,box-shadow .2s; display:block; }
.ba-thumb-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ba-thumb-lab{ font-size:12px; font-weight:600; color:var(--muted); transition:color .2s; }
.ba-thumb:hover:not(.is-on) .ba-thumb-img{ transform:translateY(-2px); }
.ba-thumb.is-on .ba-thumb-img{ border-color:var(--accent); box-shadow:0 6px 16px -8px rgba(0,113,227,.6); }
.ba-thumb.is-on .ba-thumb-lab{ color:var(--text); }
.ba-cta-wrap{ text-align:center; margin-top:26px; }
.ba-cta-wrap .btn-hero{ margin-inline:auto; }
@keyframes baHandlePulse{ 0%,100%{ box-shadow:0 6px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.7);} 50%{ box-shadow:0 6px 22px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 6px rgba(255,255,255,.10);} }
@media (prefers-reduced-motion:reduce){ .ba-handle{ animation:none; } }