/* ============================================================
   PatrimoniApp — feuille de style du site
   Charte : bleu roi #2356CC · or #FFD166 · encre #16213A
   Police : pile système Apple (aucune requête externe — cohérent
   avec la promesse « aucun traçage » du produit).
   ============================================================ */

:root{
  --blue:#2356CC;
  --blue-dk:#16308A;
  --blue-deep:#0D1730;          /* fond héro / panneaux sombres */
  --blue-soft:#EAF0FF;
  --gold:#FFD166;
  --gold-dk:#9C7400;
  --ink:#16213A;
  --ink-soft:#3C4A66;
  --muted:#697590;
  --line:#E3E8F4;
  --bg:#FBFCFF;
  --bg-alt:#F4F7FE;
  --card:#FFFFFF;
  --green:#189A6C;
  --red:#D6455D;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1120px;
  --radius:18px;
  --shadow:0 10px 30px rgba(22,33,58,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.62;
}
img,svg{display:block; max-width:100%}
a{color:var(--blue); text-underline-offset:2px}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--blue); color:#fff; font-weight:700;
  padding:10px 18px; border-radius:0 0 12px 0; text-decoration:none;
}
.skip:focus{left:0}
.email-line{font-size:19px; font-weight:600; margin:.2em 0 1em}
.email-line a{text-decoration:none}
.email-line a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
section{scroll-margin-top:84px}

/* ---------- typographie ---------- */
h1,h2,h3{margin:0; line-height:1.12}
h1{font-size:clamp(34px,5.6vw,58px); font-weight:800; letter-spacing:-1.2px}
h2{font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.6px}
h3{font-size:19px; font-weight:700; letter-spacing:-.2px}
p{margin:.55em 0; color:var(--ink-soft)}
.lead{font-size:clamp(17px,2vw,20px)}
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); display:flex; align-items:center; gap:8px;
}
.eyebrow::before{
  content:""; width:14px; height:14px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232356CC'%3E%3Cpath d='M12 2c.7 5.2 4.8 9.3 10 10-5.2.7-9.3 4.8-10 10-.7-5.2-4.8-9.3-10-10 5.2-.7 9.3-4.8 10-10z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.on-dark .eyebrow{color:var(--gold)}
.on-dark .eyebrow::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFD166'%3E%3Cpath d='M12 2c.7 5.2 4.8 9.3 10 10-5.2.7-9.3 4.8-10 10-.7-5.2-4.8-9.3-10-10 5.2-.7 9.3-4.8 10-10z'/%3E%3C/svg%3E");
}
.gold-underline{
  background-image:linear-gradient(180deg, transparent 74%, rgba(255,209,102,.85) 74%, rgba(255,209,102,.85) 94%, transparent 94%);
}

/* listes à puces « étincelle » */
.spark-list{list-style:none; margin:14px 0 0; padding:0}
.spark-list li{
  position:relative; padding-left:28px; margin:.55em 0; color:var(--ink-soft);
}
.spark-list li::before{
  content:""; position:absolute; left:0; top:.42em; width:15px; height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232356CC'%3E%3Cpath d='M12 2c.7 5.2 4.8 9.3 10 10-5.2.7-9.3 4.8-10 10-.7-5.2-4.8-9.3-10-10 5.2-.7 9.3-4.8 10-10z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.on-dark .spark-list li{color:#C7D3F2}
.on-dark .spark-list li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFD166'%3E%3Cpath d='M12 2c.7 5.2 4.8 9.3 10 10-5.2.7-9.3 4.8-10 10-.7-5.2-4.8-9.3-10-10 5.2-.7 9.3-4.8 10-10z'/%3E%3C/svg%3E");
}
.spark-list strong{color:var(--ink)}
.on-dark .spark-list strong{color:#fff}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--blue); color:#fff; text-decoration:none;
  font-weight:700; font-size:16px; letter-spacing:-.1px;
  padding:13px 22px; border-radius:999px; border:1px solid var(--blue);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:0 6px 18px rgba(35,86,204,.28);
}
.btn:hover{transform:translateY(-1px); background:var(--blue-dk)}
.btn-ghost{
  background:transparent; color:var(--blue); box-shadow:none; border-color:#C9D6F5;
}
.btn-ghost:hover{background:var(--blue-soft); transform:none}
.on-dark .btn-ghost{color:#fff; border-color:rgba(255,255,255,.35)}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.08)}

/* badge App Store */
.store{
  display:inline-flex; align-items:center; gap:11px;
  background:#000; color:#fff; text-decoration:none;
  border:1px solid #3a3a3c; border-radius:13px;
  padding:9px 18px 9px 14px; min-height:56px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.store:hover{transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.35)}
.store svg{width:26px; height:26px; flex:none; fill:#fff}
.store span{display:flex; flex-direction:column; line-height:1.15; text-align:left}
.store small{font-size:11.5px; font-weight:500; letter-spacing:.02em; opacity:.92}
.store strong{font-size:19px; font-weight:600; letter-spacing:-.2px}

/* ---------- en-tête ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(251,252,255,.9);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
header.site.scrolled{border-bottom-color:var(--line); box-shadow:0 4px 20px rgba(22,33,58,.06)}
.bar{
  max-width:var(--maxw); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:18px;
}
.mark{
  display:flex; align-items:center; gap:11px;
  font-weight:800; letter-spacing:-.3px; font-size:18px;
  color:var(--ink); text-decoration:none;
}
.logo{
  width:34px; height:34px; border-radius:9px; background:var(--blue);
  position:relative; flex:none; box-shadow:0 2px 6px rgba(35,86,204,.4);
}
.logo b{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-weight:800; font-size:20px; transform:translateX(-1px)}
.logo svg{position:absolute; right:-4px; top:-4px; width:13px; height:13px; color:var(--gold)}

nav.main{margin-left:auto; display:flex; align-items:center; gap:4px}
nav.main a{
  color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:15px;
  padding:8px 12px; border-radius:10px; transition:background .15s ease, color .15s ease;
}
nav.main a:hover{background:var(--blue-soft); color:var(--blue)}

.langs{display:flex; gap:6px; margin-left:6px}
.langs button, .langs a{
  font:inherit; font-size:12.5px; font-weight:700; letter-spacing:.05em;
  border:1px solid var(--line); background:#fff; color:var(--muted);
  padding:6px 11px; border-radius:999px; cursor:pointer; transition:.15s;
  text-decoration:none; display:inline-block; line-height:1;
}
.langs button[aria-pressed="true"], .langs a[aria-current="page"]{background:var(--blue); border-color:var(--blue); color:#fff}
.langs button:hover, .langs a:hover{border-color:var(--blue)}

.nav-toggle{
  display:none; margin-left:auto;
  background:none; border:1px solid var(--line); border-radius:10px;
  width:42px; height:38px; cursor:pointer; color:var(--ink);
  align-items:center; justify-content:center;
}
.nav-toggle svg{width:20px; height:20px}

/* ---------- héro ---------- */
.hero{
  background:var(--blue-deep); color:#fff; overflow:hidden; position:relative;
}
.hero::before{ /* grille « livre de comptes » */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 46px);
  mask-image:radial-gradient(120% 120% at 70% 10%, #000 40%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 120% at 70% 10%, #000 40%, transparent 78%);
}
.hero::after{ /* halo doré */
  content:""; position:absolute; width:640px; height:640px; right:-180px; top:-220px;
  background:radial-gradient(circle, rgba(255,209,102,.16), transparent 62%);
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding:76px 0 84px;
}
.hero h1{color:#fff; margin:14px 0 16px}
.hero .lead{color:#C7D3F2; max-width:52ch}
.hero-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:28px}
.free-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,209,102,.14); border:1px solid rgba(255,209,102,.5);
  color:var(--gold); font-weight:700; font-size:14.5px;
  padding:9px 15px; border-radius:999px;
}
.hero-note{margin-top:14px; font-size:13.5px; color:#8FA2CE}
.hero-visual{display:flex; justify-content:center; position:relative}
.hero-visual .phone{transform:rotate(-3deg)}
.spark-deco{position:absolute; color:var(--gold); opacity:.9; pointer-events:none}
.spark-deco svg{width:100%; height:100%; fill:currentColor}
.spark-a{width:26px; height:26px; left:-6%; top:8%; animation:floaty 7s ease-in-out infinite}
.spark-b{width:16px; height:16px; right:2%; bottom:14%; animation:floaty 9s ease-in-out infinite reverse}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- bandeau de faits ---------- */
.facts{background:var(--blue-deep); border-top:1px solid rgba(255,255,255,.08); position:relative; z-index:1}
.facts-inner{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:22px 0;
}
.fact{
  text-align:center; padding:6px 12px;
  border-left:1px solid rgba(255,255,255,.1);
}
.fact:first-child{border-left:0}
.fact b{display:block; font-size:clamp(22px,2.6vw,30px); font-weight:800; letter-spacing:-.5px; color:var(--gold)}
.fact span{font-size:13.5px; color:#9FB1DC; font-weight:600}

/* ---------- sections génériques ---------- */
.section{padding:88px 0}
.section.alt{background:var(--bg-alt)}
.section-head{max-width:660px; margin:0 auto 48px; text-align:center}
.section-head .eyebrow{justify-content:center}
.section-head h2{margin:12px 0 10px}

/* ---------- chapitres modules ---------- */
.chapter{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:54px 0;
}
.chapter + .chapter{border-top:1px solid var(--line)}
.chapter.flip .chapter-text{order:2}
.chapter.flip .chapter-visual{order:1}
.chapter h2{margin:12px 0 8px}
.chapter-visual{display:flex; justify-content:center}

/* ---------- mockup iPhone ---------- */
.phone{
  width:292px; flex:none;
  background:#0B1224; border-radius:46px; padding:11px;
  box-shadow:0 24px 60px rgba(13,23,48,.45), inset 0 0 0 2px rgba(255,255,255,.06);
}
.screen{
  background:#F6F8FD; border-radius:36px; overflow:hidden;
  display:flex; flex-direction:column; min-height:560px;
  font-size:13px; line-height:1.4; color:var(--ink);
}
.statusbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 20px 4px; font-size:12px; font-weight:700; color:var(--ink);
}
.island{width:74px; height:20px; background:#0B1224; border-radius:999px; margin:0 auto}
.statusbar .side{width:74px}
.statusbar .side.right{display:flex; justify-content:flex-end; gap:4px; font-size:11px}
.appbar{
  display:flex; align-items:center; gap:8px; padding:10px 16px 8px;
}
.appbar .mini-logo{
  width:24px; height:24px; border-radius:7px; background:var(--blue); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:13px; flex:none;
}
.appbar b{font-size:15px; letter-spacing:-.2px}
.screen-body{padding:6px 14px 18px; display:flex; flex-direction:column; gap:10px}

.mcard{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:12px 14px; box-shadow:0 1px 2px rgba(22,33,58,.04);
}
.mcard .label{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.big-num{font-size:24px; font-weight:800; letter-spacing:-.6px; margin-top:2px}
.delta{font-size:12px; font-weight:700}
.delta.up{color:var(--green)}
.delta.down{color:var(--red)}

.donut-row{display:flex; align-items:center; gap:14px}
.donut{width:104px; height:104px; flex:none}
.legend{display:flex; flex-direction:column; gap:6px; font-size:12px; flex:1}
.legend .li{display:flex; align-items:center; gap:7px; color:var(--ink-soft)}
.legend .dot{width:9px; height:9px; border-radius:3px; flex:none}
.legend .pct{margin-left:auto; font-weight:700; color:var(--ink)}

.mrow{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px 12px;
}
.mrow .ic{
  width:30px; height:30px; border-radius:9px; flex:none;
  display:grid; place-items:center; font-size:14px;
  background:var(--blue-soft); color:var(--blue); font-weight:700;
}
.mrow .tt{flex:1; min-width:0}
.mrow .tt b{display:block; font-size:13px; letter-spacing:-.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mrow .tt small{color:var(--muted); font-size:11px}
.mrow .amt{text-align:right; font-weight:700; font-size:13px}
.mrow .amt small{display:block; font-weight:700; font-size:11px}

/* jauge de progression des maquettes — portée limitée à l'écran simulé :
   la classe .bar est aussi celle de la barre d'en-tête (règle plus haut),
   dont display:flex et padding annulaient la hauteur du remplissage. */
.screen .bar{
  display:block; max-width:none; padding:0; margin:6px 0 0;
  height:7px; border-radius:999px; background:#E9EEFB; overflow:hidden;
}
.screen .bar i{display:block; height:100%; border-radius:999px; background:var(--blue)}
.screen .bar.warn i{background:var(--gold)}
.chip{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  background:var(--blue-soft); color:var(--blue-dk); border-radius:999px;
  font-size:11.5px; font-weight:700; padding:5px 11px;
}
.chip.gold{background:#FFF4D6; color:#7A5C00}

/* ---------- cartes transversales ---------- */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
/* variante 4 cartes (transversales & premiers pas de la page aide) */
.trio.four,.help-grid.four{grid-template-columns:repeat(4,1fr)}
.trio.four .tcard,.help-grid.four .tcard{padding:24px 20px}
.trio.four .tcard h3,.help-grid.four .tcard h3{font-size:18px}
.tcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; box-shadow:0 1px 0 rgba(22,33,58,.02);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tcard:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.tcard .ico{
  width:46px; height:46px; border-radius:13px; background:var(--blue-soft);
  color:var(--blue); display:grid; place-items:center; margin-bottom:14px;
}
.tcard .ico svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tcard h3{margin-bottom:6px}
.tcard p{font-size:15px; margin:0}

/* ---------- panneau confidentialité ---------- */
.privacy-panel{
  background:var(--blue-deep); color:#fff; border-radius:26px;
  padding:clamp(30px,5vw,58px); position:relative; overflow:hidden;
}
.privacy-panel::after{
  content:""; position:absolute; width:420px; height:420px; right:-140px; bottom:-200px;
  background:radial-gradient(circle, rgba(255,209,102,.15), transparent 62%);
}
.privacy-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; position:relative; z-index:1}
.privacy-panel h2{color:#fff; margin:12px 0 8px}
.privacy-panel .lead{color:#C7D3F2}
.shield{
  width:min(300px,80%); margin:0 auto;
}
.privacy-links{margin-top:24px; display:flex; gap:14px; flex-wrap:wrap}

/* ---------- tarif ---------- */
.price-card{
  max-width:560px; margin:0 auto; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:26px;
  padding:46px 34px; box-shadow:var(--shadow); position:relative;
}
.price-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg, var(--blue), var(--gold)); border-radius:26px 26px 0 0;
}
.price-big{font-size:clamp(48px,7vw,68px); font-weight:800; letter-spacing:-2px; color:var(--blue); line-height:1}
.price-sub{color:var(--muted); font-weight:600; margin-top:4px}
.price-points{margin:22px auto 6px; max-width:380px; text-align:left}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin:0 auto}
.faq details{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  margin:12px 0; overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px;
  padding:18px 20px; font-weight:700; font-size:16.5px; letter-spacing:-.1px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; margin-left:auto; width:12px; height:12px; flex:none;
  border-right:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue);
  transform:rotate(45deg); transition:transform .2s ease; margin-top:-4px;
}
.faq details[open] summary::after{transform:rotate(225deg); margin-top:4px}
.faq .a{padding:0 20px 18px; color:var(--ink-soft); font-size:15.5px}
.faq .a p{margin:0 0 .5em}

/* ---------- CTA final ---------- */
.cta-final{
  background:var(--blue-deep); color:#fff; text-align:center;
  padding:84px 0; position:relative; overflow:hidden;
}
.cta-final::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 46px);
  mask-image:radial-gradient(80% 120% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(80% 120% at 50% 0%, #000 30%, transparent 75%);
}
.cta-final h2{color:#fff; position:relative}
.cta-final .lead{color:#C7D3F2; position:relative; max-width:46ch; margin:14px auto 0}
.cta-final .hero-cta{justify-content:center; position:relative}

/* ---------- pied de page ---------- */
footer.site{background:#0A1226; color:#9FB1DC; padding:54px 0 40px; font-size:14.5px}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:34px; align-items:start}
.footer-grid .mark{color:#fff}
.footer-grid p{color:#8FA2CE; font-size:13.5px; max-width:38ch}
.fcol b{display:block; color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px}
.fcol a{display:block; color:#B9C7EA; text-decoration:none; padding:4px 0}
.fcol a:hover{color:var(--gold)}
.legal-line{
  border-top:1px solid rgba(255,255,255,.1); margin-top:38px; padding-top:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:#7487B5;
}

/* ---------- pages internes (héros compact) ---------- */
.page-hero{background:var(--blue-deep); color:#fff; padding:64px 0 56px; position:relative; overflow:hidden}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 46px);
  mask-image:radial-gradient(100% 140% at 30% 0%, #000 30%, transparent 76%);
  -webkit-mask-image:radial-gradient(100% 140% at 30% 0%, #000 30%, transparent 76%);
}
.page-hero .container{position:relative}
.page-hero h1{color:#fff; font-size:clamp(30px,4.6vw,46px); margin:12px 0 10px}
.page-hero .lead{color:#C7D3F2; max-width:60ch}

/* ---------- page aide ---------- */
.help-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.contact-card{
  background:var(--blue-soft); border:1px solid #D4E0FA; border-radius:22px;
  padding:32px; display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center;
}
.contact-card h2{font-size:24px}
.placeholder{
  background:#FFF7DA; border-bottom:2px dashed var(--gold-dk); padding:1px 6px;
  border-radius:4px; font-weight:700; color:#5A4500; white-space:nowrap;
}
.legal-block{
  border:1px solid var(--line); border-radius:18px; background:var(--card);
  padding:26px 28px; font-size:15px;
}
.legal-block h2{font-size:20px; margin-bottom:8px}

/* ---------- page évolutions : frise ---------- */
.timeline{position:relative; max-width:820px; margin:0 auto; padding-left:38px}
.timeline::before{
  content:""; position:absolute; left:10px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--blue) 0%, var(--gold) 100%);
  border-radius:2px;
}
.tl-item{position:relative; padding:0 0 40px 14px}
.tl-item::before{
  content:""; position:absolute; left:-38px; top:2px; width:22px; height:22px;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232356CC'%3E%3Cpath d='M12 2c.7 5.2 4.8 9.3 10 10-5.2.7-9.3 4.8-10 10-.7-5.2-4.8-9.3-10-10 5.2-.7 9.3-4.8 10-10z'/%3E%3C/svg%3E");
  background-position:center; background-size:contain; background-repeat:no-repeat;
  border-radius:50%;
}
.tl-item:last-child{padding-bottom:4px}
.tl-item .when{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue);
  background:var(--blue-soft); border-radius:999px; padding:4px 12px; margin-bottom:8px;
}
.tl-item.milestone .when{background:#FFF4D6; color:#7A5C00}
.tl-item h3{font-size:20px; margin-bottom:4px}
.tl-item p{margin:0; font-size:15.5px}
.tl-item.milestone{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:22px 24px; margin-left:-10px; box-shadow:var(--shadow);
}
.tl-item.milestone::before{top:24px}

/* ---------- apparition au défilement ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr; gap:44px; padding:56px 0 64px}
  .hero-visual .phone{transform:none}
  .chapter{grid-template-columns:1fr; gap:30px; padding:44px 0}
  .chapter.flip .chapter-text{order:1}
  .chapter.flip .chapter-visual{order:2}
  .trio,.trio.four{grid-template-columns:1fr 1fr}
  .privacy-grid{grid-template-columns:1fr}
  .shield{width:min(240px,60%)}
  .help-grid,.help-grid.four{grid-template-columns:1fr 1fr}
  .contact-card{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  nav.main{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; padding:10px 18px 16px; gap:2px;
    box-shadow:0 18px 30px rgba(22,33,58,.12);
  }
  nav.main.open{display:flex}
  nav.main a{padding:12px 10px; font-size:16px}
  nav.main .langs{margin:10px 0 0}
  .nav-toggle{display:inline-flex}
  .langs.desktop{display:none}
  .facts-inner{grid-template-columns:1fr 1fr; row-gap:14px}
  .fact:nth-child(3){border-left:0}
  .trio,.trio.four{grid-template-columns:1fr}
  .help-grid,.help-grid.four{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .section{padding:64px 0}
}

/* ---------- préférences utilisateur ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}