/* Site vitrine Fitness App — proposition du 10 octobre 2026.
   Même esprit que le gabarit en ligne (fond nuit, rose, alvéoles, panneaux arrondis), rapproché de l'application :
   dégradé de marque, vrais badges de rang, mascotte, spots vidéo dans un téléphone, boutons en pilule. */
:root{--bg:#100b18;--panel:#1e1829;--panel2:#241c32;--line:#ffffff14;--pink:#fa4a91;--purple:#a383e9;--orange:#ff9a46;--muted:#b7afc2;--text:#fcfaff;
  --grad:linear-gradient(90deg,#ff9a46,#fa4a91 50%,#9875e5);--wide:1080px;--narrow:870px;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}img,video{max-width:100%;display:block}
p{color:var(--muted);margin:0 0 14px}h1,h2,h3{text-wrap:balance;margin:0}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:6px}
.wrap{width:min(100% - 40px,var(--wide));margin-inline:auto}.wrap.narrow{width:min(100% - 40px,var(--narrow))}
.glow{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.accent{color:var(--pink)}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;color:var(--purple);text-transform:uppercase;letter-spacing:.9px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:40px;background:#ffffff14;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--pink)}
.hint{color:#8d8399;font-size:12px}

/* En-tête */
header{position:sticky;top:0;z-index:30;background:#181221f2;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand img{width:160px;height:auto}
.navlinks{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.navlinks a{padding:8px 12px;border-radius:30px;color:#d9d2e4}
.navlinks a:hover{color:#fff;background:#ffffff10}.navlinks a[aria-current=page]{color:#fff;background:#ffffff1a}
.navlinks .navcta{margin-left:8px}
.mobilemenu{display:none;border:0;background:none;font-size:26px;line-height:1;padding:8px}
.btn,.navlinks .navcta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:40px;font-weight:800;font-size:15px;color:#fff;
  background:linear-gradient(90deg,#ff5a8e,#e8305a);box-shadow:0 10px 30px #e8305a55;border:0;transition:transform .15s,box-shadow .15s}
.navlinks .navcta{padding:9px 18px;font-size:13px;box-shadow:none}
.btn:hover,.navlinks .navcta:hover{transform:translateY(-2px);box-shadow:0 14px 36px #e8305a77;background:linear-gradient(90deg,#ff5a8e,#e8305a);color:#fff}
.btn.ghost{background:#ffffff12;box-shadow:none;border:1px solid #ffffff2e}.btn.ghost:hover{background:#ffffff20;box-shadow:none}
.buttons{display:flex;gap:12px;flex-wrap:wrap}

/* Haut de page */
.hero{position:relative;overflow:hidden;padding-block:64px 0}
.hero:before{content:"";position:absolute;inset:0 0 auto;height:640px;opacity:.18;pointer-events:none;background-image:url("site/img/hex.svg");-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.hero:after{content:"";position:absolute;left:50%;top:-240px;width:900px;height:700px;transform:translateX(-50%);background:radial-gradient(closest-side,#fa4a9130,transparent);pointer-events:none}
.hero>.wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(36px,5.4vw,62px);line-height:1.04;letter-spacing:-.035em;font-weight:900;color:var(--pink);margin:16px 0}
.hero h1 em{font-style:normal;color:#fff}
.hero .sub{font-size:17px;max-width:520px}
.hero.center{text-align:center}.hero.center .sub{margin-inline:auto}.hero.center .buttons{justify-content:center}
.hero.split .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero.split .visual{position:relative;display:flex;justify-content:center;padding-bottom:10px}
.hero.split .visual .mascot{position:absolute;left:-6%;bottom:0;width:38%;z-index:3;filter:drop-shadow(0 18px 30px #000a)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-block:44px 0}
.fact{background:var(--panel);border-radius:14px;text-align:center;padding:18px 10px;min-width:0}
.fact strong{display:block;font-size:28px;letter-spacing:-.02em;line-height:1.2}.fact span{font-size:13px;color:#c4bacd}

/* Téléphones */
.phone{position:relative;width:250px;aspect-ratio:9/18.6;border:8px solid #303041;border-radius:38px;background:#07060e;overflow:hidden;box-shadow:0 26px 70px #000c,0 0 0 1px #ffffff1a;flex:none}
.phone img,.phone video{width:100%;height:100%;object-fit:cover;object-position:top}
.phone:after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:74px;height:16px;border-radius:20px;background:#07060e;pointer-events:none}
.phone.video{aspect-ratio:9/16;width:290px}.phone.video:after{display:none}
.sound{position:absolute;right:12px;bottom:12px;z-index:2;width:46px;height:46px;border-radius:50%;border:0;background:#000000a6;font-size:18px;display:grid;place-items:center}
.sound:hover{background:#000000d9}
.trio{display:flex;justify-content:center;align-items:flex-end;margin-top:34px}
.trio .phone:first-child{transform:rotate(-9deg) translate(40px,-12px);width:205px}.trio .phone:last-child{transform:rotate(9deg) translate(-40px,-12px);width:205px}
.trio .phone.video{z-index:2}

/* Sections */
.section{padding-block:80px}
.section h2{font-size:clamp(30px,4.2vw,46px);line-height:1.07;letter-spacing:-.03em;font-weight:900;margin-bottom:18px}
.section .lead{font-size:17px;max-width:620px}
.split-intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.cards{display:grid;gap:14px;margin-top:32px}.cards.c3{grid-template-columns:repeat(3,1fr)}.cards.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border-radius:16px;padding:24px;min-width:0}
.card h3{font-size:17px;margin-bottom:8px}.card p{font-size:14px;margin:0}.card .eyebrow{margin-bottom:10px}
.card .num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#ff5a8e,#e8305a);font-weight:900;margin-bottom:14px}
a.card{display:block;transition:transform .15s,background .15s}a.card:hover{transform:translateY(-4px);background:var(--panel2)}
a.card .go{display:inline-block;margin-top:14px;color:var(--pink);font-weight:800;font-size:14px}

/* Rangs */
.ranks{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;margin-top:30px}
.rank{background:var(--panel);border:0;border-radius:14px;padding:12px 4px 10px;text-align:center;min-width:0;transition:transform .15s,background .15s}
.rank img{width:100%;max-width:84px;margin-inline:auto}.rank span{display:block;font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;margin-top:4px;overflow:hidden;text-overflow:ellipsis}
.rank:hover,.rank.on{transform:translateY(-6px);background:var(--panel2)}.rank.on{box-shadow:0 0 0 2px var(--pink)}
.rankinfo{margin-top:16px;background:var(--panel);border-radius:14px;padding:16px 20px;font-size:15px;min-height:58px}.rankinfo b{color:var(--pink)}

/* Écran + texte en alternance */
.rows{display:grid;gap:70px;margin:50px auto 0;max-width:900px}
.row{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.row:nth-child(even) .phone{order:2}.row:nth-child(even){grid-template-columns:1fr auto}
.row h3{font-size:clamp(24px,3vw,32px);line-height:1.12;letter-spacing:-.02em;font-weight:900;margin:8px 0 12px}
.row ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.row li{padding-left:28px;position:relative;color:#ded6e8;font-size:15px}
.row li:before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;background:var(--grad)}

/* Tableau des paliers */
.tablewrap{overflow-x:auto;margin-top:28px;border-radius:16px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}th,td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:#c4bacd}tr:last-child td{border-bottom:0}td strong{font-size:20px}

/* Bandeau, questions, pied de page */
.banner{background:var(--panel);border-radius:22px;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden}
.banner:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 100% 0,#fa4a9130,transparent);pointer-events:none}
.banner>*{position:relative}.banner h2{font-size:clamp(28px,3.8vw,42px);line-height:1.06;letter-spacing:-.03em;font-weight:900;margin-bottom:12px}
.banner .mascot{width:170px;flex:none}
.faq{max-width:680px;margin:28px auto 0}
.faq details{background:var(--panel);margin-block:10px;border-radius:14px;padding-inline:20px}
.faq summary{list-style:none;cursor:pointer;font-weight:750;padding-block:18px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font-size:22px;line-height:1;color:var(--pink);flex:none}
.faq details[open] summary:after{content:"–"}.faq details p{padding-bottom:18px;font-size:15px;margin:0}
.center{text-align:center}.center .lead{margin-inline:auto}
footer{border-top:1px solid #3a2e48;padding-block:60px 26px;margin-top:90px}
.footgrid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:34px}
footer h3{font-size:24px;line-height:1.15;margin:14px 0 6px}footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;margin:0 0 10px}
footer a:not(.brand){display:block;color:#b4a8c0;font-size:14px;margin-block:8px}footer a:hover{color:var(--pink)}
.copy{border-top:1px solid #33283f;margin-top:44px;padding-top:20px;color:#736c80;font-size:12px}
.soon{border:2px dashed #ffffff33;border-radius:22px;padding:34px;text-align:center}.soon h3{font-size:22px;margin-bottom:8px}

@media (max-width:900px){
  .mobilemenu{display:block}
  .navlinks{display:none;position:absolute;top:64px;left:0;right:0;background:#1a1324;padding:16px 20px 22px;flex-direction:column;align-items:stretch;gap:4px;border-bottom:1px solid var(--line)}
  .navlinks.open{display:flex}.navlinks a{padding:12px 14px;font-size:15px}.navlinks .navcta{margin:8px 0 0;padding:13px}
  .hero{padding-top:44px}.hero.split .grid{grid-template-columns:1fr;gap:34px;text-align:center}.hero.split .sub{margin-inline:auto}.hero.split .buttons{justify-content:center}
  .split-intro{grid-template-columns:1fr;gap:10px}
  .cards.c3,.cards.c2{grid-template-columns:1fr}
  .ranks{grid-template-columns:repeat(3,1fr)}.rank span{font-size:11px}
  .row,.row:nth-child(even){grid-template-columns:1fr;gap:26px;justify-items:center}.row:nth-child(even) .phone{order:0}.row>div{width:100%}
  .section{padding-block:54px}
  .banner{flex-direction:column;align-items:flex-start;padding:28px}.banner .mascot{width:110px;align-self:center}
  .footgrid{grid-template-columns:1fr 1fr}.footgrid>div:first-child{grid-column:span 2}
  .trio .phone:first-child,.trio .phone:last-child{width:128px;border-width:5px;border-radius:24px}.trio .phone.video{width:190px;border-width:6px;border-radius:30px}
  .trio .phone:first-child{transform:rotate(-9deg) translate(26px,-8px)}.trio .phone:last-child{transform:rotate(9deg) translate(-26px,-8px)}
  .fact strong{font-size:21px}.fact span{font-size:12px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.rank,a.card{transition:none}}

/* Bloc « Notre égérie » alimenté par la base : il remplace « Bientôt révélée » dès qu'une égérie est à l'affiche. */
.soon.on{border-style:solid;border-color:#fa4a9166}.soon .buttons{justify-content:center;margin-top:18px}.soon .sig{font-size:14px;opacity:.85}