/* Flowtify — fond noir, orange Flowtify en dégradé, grands chiffres. */
body{background:#000;color:#f5f5f7}
.top{background:rgba(0,0,0,.6)}
.top nav a[aria-current="page"]{background:#f5f5f7;color:#000}
.grad{background:linear-gradient(100deg,#ffb36b 0%,#E68A3E 35%,#D4722A 70%,#c2551b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dim{color:#86868b}
.orange{color:#F09A55}
.center{text-align:center}

/* 1. Accueil */
.hero{height:230vh}
.hero .pin{display:flex;flex-direction:column;align-items:center}
.hero-txt{text-align:center;padding-top:clamp(90px,14vh,140px);position:relative;z-index:2}
.hero .eyebrow{color:#F09A55}
.hero .sub{color:#a1a1a6;margin-top:16px}
.glow{position:absolute;left:50%;top:62%;width:min(1100px,110vw);height:520px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(212,114,42,.42),rgba(212,114,42,.08) 60%,transparent);filter:blur(20px);pointer-events:none}
.mac-hero{position:absolute;left:50%;top:57%;width:min(1180px,92vw);margin-left:calc(min(1180px,92vw) / -2)}

/* 3. iPhone */
.phone-sec{height:320vh}
.ph-grid{height:100%;max-width:1240px;margin:0 auto;padding:80px clamp(16px,3vw,30px) 30px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,4vw,60px)}
.phone-main{width:min(330px,30vw,calc((100vh - 140px) * .4724))}
.beats{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.beats li{font:600 clamp(18px,1.6vw,22px)/1.3 "Outfit",sans-serif;color:#3a3a3c;transition:color .5s}
.beats li.on{color:#f5f5f7}
.ph-right{display:grid;justify-items:start;gap:18px}
.counter{display:grid}
.counter b{font:700 clamp(90px,11vw,170px)/.85 "Outfit",sans-serif;letter-spacing:-.06em;background:linear-gradient(180deg,#fff,#86868b);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.counter span{font:600 20px/1 "Outfit",sans-serif;color:#86868b;margin-top:8px}
.ok-badge{padding:12px 20px;border-radius:999px;background:#0E7A4A;color:#fff;font:700 18px/1 "Outfit",sans-serif;opacity:0;transform:scale(.8);transition:.5s cubic-bezier(.2,.9,.3,1.4)}
.ok-badge.on{opacity:1;transform:none}

/* 4. Chiffres */
.facts{padding:16vh 0 18vh}
.facts .h2{margin-bottom:48px}
.tile{background:#111113}
.tile .k{color:#86868b}
.tile p{color:#d2d2d7}
.big-line{font:700 clamp(28px,3vw,42px)/1.08 "Outfit",sans-serif!important;letter-spacing:-.03em;color:#f5f5f7!important;margin:12px 0 22px!important;max-width:15em}
.ghost{display:flex;align-items:flex-end;gap:10px;height:130px}
.ghost i{flex:1;height:0;border-radius:10px 10px 6px 6px;background:#3a2414;position:relative;transition:height 1.2s cubic-bezier(.2,.8,.2,1)}
.ghost i.now{background:linear-gradient(#ffb36b,#D4722A);box-shadow:0 10px 30px rgba(212,114,42,.45)}
.ghost i b{position:absolute;left:50%;top:-34px;transform:translateX(-50%);background:#f5f5f7;color:#000;font:700 13px/1 "Outfit",sans-serif;padding:6px 9px;border-radius:999px;white-space:nowrap}
.bars-tile.in .ghost i{height:var(--h)}

/* 5. Chaîne */
.chain{height:420vh;background:linear-gradient(#000,#0b0b0d 30%,#0b0b0d 70%,#000)}
.chain .pin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,30px);padding-top:60px}
.ch-head{text-align:center;display:grid;justify-items:center;gap:6px}
.chips{list-style:none;margin:14px 0 0;padding:4px;display:flex;gap:4px;border-radius:999px;background:#1c1c1e;flex-wrap:wrap;justify-content:center}
.chips li{padding:9px 16px;border-radius:999px;font:600 14px/1 "Outfit",sans-serif;color:#86868b;transition:.4s}
.chips li.on{background:#f5f5f7;color:#000}
.ch-cap{color:#a1a1a6;min-height:2.7em;max-width:32em;margin-top:8px}
.mac-chain{width:min(1000px,88vw,calc((100vh - 300px) * 1.488))}

/* 6. Final */
.finale{min-height:100vh;padding:14vh clamp(16px,3vw,30px) 16vh;display:grid;justify-items:center;gap:40px;text-align:center;background:radial-gradient(60% 50% at 50% 35%,rgba(212,114,42,.22),transparent 70%)}
.fin-devs{position:relative;width:min(900px,90vw)}
.mac-fin{width:88%}
.phone-fin{position:absolute;right:-2%;bottom:-6%;width:22%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.fin-txt .small{font-size:.32em;letter-spacing:-.02em}
.fin-txt .lead{color:#a1a1a6;margin:14px 0 30px}
.cta{background:#A9531A;color:#fff}

@media (max-width:860px){
  .ph-grid{grid-template-columns:1fr;justify-items:center;text-align:center;padding-top:70px;gap:16px;align-content:center}
  .ph-left .h2{font-size:34px}
  .beats{display:none}
  .phone-main{width:min(240px,56vw,calc((100vh - 330px) * .4724))}
  .ph-right{position:absolute;right:16px;bottom:20px;justify-items:end}
  .counter b{font-size:72px}
  .counter span{font-size:14px}
  .ok-badge{font-size:14px;padding:9px 14px}
}