/* Forméa — clair, prune de l'application, italique Fraunces pour l'émotion. */
:root{--prune:#8B3A62;--deep:#6E2C4E;--ink:#1d1d1f;--grey:#6e6e73;--bg:#fbfaf9;--brand:#8B3A62}
body{background:var(--bg);color:var(--ink)}
.top{background:rgba(251,250,249,.72)}
.top nav a[aria-current="page"]{background:var(--ink);color:#fff}
em{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;color:var(--prune);letter-spacing:-.02em}
.eyebrow{color:var(--prune)}
.center{text-align:center}

/* 1. Accueil */
.hero{height:200vh}
.hero-in{height:100%;max-width:1240px;margin:0 auto;padding:70px clamp(16px,4vw,48px) 20px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:20px}
.hero .lead{color:var(--grey);margin-top:22px;max-width:22em}
.hero-dev{position:relative;justify-self:center}
.halo{position:absolute;inset:-20% -40%;background:radial-gradient(closest-side,rgba(139,58,98,.32),rgba(139,58,98,.08) 60%,transparent);filter:blur(10px)}
.phone-hero{width:min(330px,28vw,calc((100vh - 120px) * .3454));filter:drop-shadow(0 40px 50px rgba(110,44,78,.25))}

.reveal{color:#d2d2d7}

/* 2. Marque blanche */
.brand{height:340vh}
.brand .pin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,30px);padding-top:56px}
.disc{position:absolute;left:50%;top:55%;width:min(820px,110vw);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:var(--brand);opacity:.13;transition:background .9s}
.huge-name{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0;text-align:center;white-space:nowrap;font:italic 500 clamp(80px,14vw,230px)/1 "Fraunces",serif;letter-spacing:-.04em;color:var(--brand);opacity:.16;transition:color .9s}
.br-txt{position:relative;z-index:2;text-align:center}
.phone-brand{position:relative;z-index:2;width:min(290px,62vw,calc((100vh - 330px) * .4724));filter:drop-shadow(0 40px 60px rgba(0,0,0,.18))}
.br-note{position:absolute;bottom:18px;left:0;right:0;text-align:center;margin:0;font-size:13px;color:var(--grey)}

/* 3. Assistant protocole */
.proto{height:300vh;background:#f5f3f1}
.pr-grid{height:100%;max-width:1180px;margin:0 auto;padding:80px clamp(16px,4vw,48px) 20px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(30px,6vw,100px)}
.phone-proto{width:min(320px,30vw,calc((100vh - 130px) * .4724));filter:drop-shadow(0 30px 50px rgba(0,0,0,.16))}
.beats{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:16px}
.beats li{font-size:clamp(17px,1.4vw,20px);color:#b7b3b0;transition:color .5s}
.beats li b{font-family:"Outfit",sans-serif;font-weight:700}
.beats li.on{color:var(--ink)}

/* 4. Chiffres */
.facts{padding:18vh 0}
.facts .h2{margin-bottom:48px}
.tile{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 30px rgba(0,0,0,.05)}
.tile .k{color:var(--grey)}
.tile p{color:#424245}
.tile.prune{background:linear-gradient(150deg,#9b4670,#6E2C4E);color:#fff}
.tile.prune .k,.tile.prune p{color:#f2dbe6}
.tile .num{color:inherit}
.rgpd{min-height:auto}
.rg{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.rg span{padding:12px 18px;border-radius:999px;background:#f5f3f1;font:600 15px/1.2 "Outfit",sans-serif;color:var(--ink)}

/* 5. Formatrice */
.form{height:360vh}
.form .pin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.5vh,26px);padding-top:56px}
.fo-head{text-align:center;display:grid;justify-items:center;gap:4px}
.chips{list-style:none;margin:12px 0 0;padding:4px;display:flex;gap:4px;border-radius:999px;background:#efebe8}
.chips li{padding:9px 16px;border-radius:999px;font:600 14px/1 "Outfit",sans-serif;color:#57575c;transition:.4s}
.chips li.on{background:var(--ink);color:#fff}
.fo-cap{color:var(--grey);min-height:1.4em}
.fo-devs{position:relative;display:flex;align-items:flex-end;justify-content:center}
.phone-fo{width:min(280px,60vw,calc((100vh - 370px) * .4724));z-index:2;filter:drop-shadow(0 40px 60px rgba(0,0,0,.2))}
.phone-el{width:min(190px,24vw,calc((100vh - 370px) * .3454 * .8));margin-right:-40px;opacity:.95;filter:drop-shadow(0 30px 40px rgba(0,0,0,.15))}

/* 6. Final */
.finale{min-height:100vh;display:grid;place-content:center;justify-items:center;text-align:center;gap:18px;padding:12vh 20px;background:radial-gradient(50% 45% at 50% 45%,rgba(139,58,98,.12),transparent 70%)}
.finale .lead{color:var(--grey);max-width:30em}
.cta{background:var(--prune);color:#fff;margin-top:10px}

@media (max-width:860px){
  .hero-in{grid-template-columns:1fr;text-align:center;justify-items:center;align-content:center;gap:24px;padding-top:80px}
  .hero .mega{font-size:44px}
  .hero .lead{margin-inline:auto;font-size:17px}
  .phone-hero{width:min(190px,46vw,calc((100vh - 420px) * .3454))}
  .pr-grid{grid-template-columns:1fr;justify-items:center;text-align:center;align-content:center;gap:14px}
  .pr-txt .h2{font-size:32px}
  .beats{display:none}
  .phone-proto{width:min(220px,52vw,calc((100vh - 300px) * .4724))}
  .phone-el{display:none}
}