/* =====================================================================
   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;
  --shadow:0 2px 20px rgba(0,0,0,.08);
  --shadow-hover:0 8px 30px rgba(0,0,0,.12);
  --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(--accent); color:#fff; }
.btn-primary:hover{ transform:scale(1.015); background:var(--accent-2); box-shadow:0 8px 26px -10px rgba(0,113,227,.6); }
.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{ display:flex; background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.06); border-radius:999px; padding:3px; }
.lang-switch button{
  border:0; background:none; cursor:pointer; font-family:inherit; font-weight:600; font-size:.8rem;
  color:var(--muted); padding:.32em .64em; border-radius:999px; transition:.2s; min-width:32px;
}
.lang-switch button.is-active{ background:#fff; color:var(--text); box-shadow:var(--shadow); }
.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; top:-80px; inset-inline-end:-60px; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,113,227,.06) 0%, transparent 70%);
  filter:blur(40px); pointer-events:none; z-index:0;
}
.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:500; color:var(--text);
  background:var(--bg-2); border:1px solid var(--line); padding:.5em 1em; 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:-.04em; line-height:1.02; }
.hero-title .t2{ font-size:clamp(58px,11.5vw,96px); font-weight:800; color:var(--text); letter-spacing:-.05em; line-height:1; margin-top:2px; }
.hero-title .t3{ font-size:clamp(34px,6.4vw,56px); font-weight:400; color:var(--muted); letter-spacing:-.02em; line-height:1.06; margin-top:4px; }
.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:18px; flex-wrap:wrap; padding-block:22px; color:var(--muted); font-size:14px; font-weight:500; }
.trust-item{ display:inline-flex; align-items:center; gap:8px; }
.trust-item svg{ width:17px; height:17px; color:var(--accent); }
.trust-sep{ width:1px; height:16px; background:var(--line); }

/* ---------------- 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:18px; }
.step{ position:relative; background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:28px 26px 30px; text-align:start; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.step:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.step-num{ position:absolute; inset-block-start:20px; inset-inline-end:20px; background:var(--bg-2); color:var(--accent); font-weight:700; font-size:12px; letter-spacing:.04em; padding:.32em .62em; border-radius:8px; }
.step-ico{ width:54px; height:54px; border-radius:15px; background:rgba(0,113,227,.08); color:var(--accent); display:grid; place-items:center; margin-bottom:20px; }
.step-ico svg{ width:28px; height:28px; }
.step h3{ font-size:1.2rem; margin-bottom:7px; letter-spacing:-.01em; }
.step p{ color:var(--muted); font-size:.97rem; }
.step-note{ display:inline-flex; align-items:center; margin-top:14px; color:var(--green); font-weight:600; font-size:.85rem; }

/* Pricing */
.pricing{ background:var(--bg-2); }
.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 var(--accent); box-shadow:0 8px 40px -16px rgba(0,113,227,.35); }
.plan-badge{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:.4em 1em; border-radius:999px; margin-bottom:16px; }
.badge-blue{ background:var(--accent); 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; }
.tip-card{
  max-width:860px; margin:24px auto 0; display:flex; align-items:center; gap:16px;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 22px; box-shadow:var(--shadow);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tip-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.tip-ico{ flex:none; width:42px; height:42px; border-radius:12px; background:rgba(255,61,119,.1); display:grid; place-items:center; }
.tip-ico svg{ width:22px; height:22px; }
.tip-text{ flex:1; min-width:0; }
.tip-title{ font-weight:600; font-size:1rem; }
.tip-desc{ color:var(--muted); font-size:.9rem; margin-top:2px; }
.tip-btn{ flex:none; height:44px; padding:0 22px; }

/* Témoignage */
.testimonial{ background:var(--bg-2); text-align:center; padding-block:76px; }
.testimonial .container{ max-width:720px; }
.t-stars{ color:var(--gold); letter-spacing:2px; font-size:15px; }
.t-quote{ margin:16px 0 0; font-size:clamp(20px,3.2vw,27px); font-weight:600; letter-spacing:-.02em; line-height:1.42; color:var(--text); }
.t-author{ margin-top:16px; color:var(--muted); font-size:14px; font-weight:500; }

/* 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:88px; background:var(--bg-2); }
.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:linear-gradient(170deg,#0B2350,#070a14 78%); 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-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{ width:72px; height:72px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 16px 34px -10px rgba(0,0,0,.3); }
.check svg{ width:36px; height:36px; fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.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 12s) ===== */
@keyframes pLock{ 0%{opacity:1} 44%{opacity:1} 48%{opacity:0} 92%{opacity:0} 96%,100%{opacity:1} }
@keyframes pNotif{ 0%,8%{opacity:0;transform:translateY(-150%)} 15%{opacity:1;transform:translateY(0)} 40%{opacity:1;transform:translateY(0)} 44%{opacity:0;transform:translateY(-40%)} 100%{opacity:0;transform:translateY(-150%)} }
@keyframes pTap{ 0%,37%{opacity:0;transform:scale(.2)} 39%{opacity:.5;transform:scale(.2)} 43%{opacity:0;transform:scale(1.7)} 100%{opacity:0} }
@keyframes pApp{ 0%,46%{opacity:0;transform:scale(.985)} 50%{opacity:1;transform:scale(1)} 78%{opacity:1;transform:scale(1)} 82%{opacity:0;transform:scale(.985)} 100%{opacity:0} }
@keyframes pPin{ 0%,50%{opacity:0;transform:translate(-50%,-165%) scale(.6)} 57%{opacity:1;transform:translate(-50%,-100%) scale(1)} 59%{transform:translate(-50%,-118%)} 61%{transform:translate(-50%,-100%)} 100%{opacity:1;transform:translate(-50%,-100%)} }
@keyframes pRow1{ 0%,58%{opacity:0;transform:translateY(8px)} 64%{opacity:1;transform:translateY(0)} 100%{opacity:1} }
@keyframes pRow2{ 0%,64%{opacity:0;transform:translateY(8px)} 70%{opacity:1;transform:translateY(0)} 100%{opacity:1} }
@keyframes pConfirm{ 0%,70%{transform:scale(1)} 73%{transform:scale(1.05)} 76%{transform:scale(1)} 78%{transform:scale(.93)} 80%{transform:scale(1)} 100%{transform:scale(1)} }
@keyframes pDone{ 0%,80%{opacity:0;transform:scale(.96)} 84%{opacity:1;transform:scale(1)} 91%{opacity:1} 95%,100%{opacity:0} }
@keyframes pCheck{ 0%,81%{transform:scale(0)} 86%{transform:scale(1.15)} 90%{transform:scale(1)} 100%{transform:scale(1)} }
.s-lock{ animation:pLock 12s ease infinite; }
.notif{ animation:pNotif 12s var(--ease-out) infinite; }
.tap{ animation:pTap 12s ease-out infinite; }
.s-app{ opacity:0; animation:pApp 12s ease infinite; }
.pin{ animation:pPin 12s cubic-bezier(.22,1.2,.36,1) infinite; }
.addr-city{ animation:pRow1 12s ease infinite; }
.addr-street{ animation:pRow2 12s ease infinite; }
.confirm-btn{ animation:pConfirm 12s ease infinite; }
.s-done{ opacity:0; animation:pDone 12s ease infinite; }
.check{ animation:pCheck 12s 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:14px; }
  .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; }
}

/* ---------------- 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; }
  .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; }
}
