/* sport.css — pages « Analyse video pour le <sport> ».
   Chargee APRES landing.css et components.css : elle REUTILISE la grammaire de la page d'accueil
   (hero clair en deux colonnes, bande sombre, cartes) plutot que d'inventer la sienne. Tout est
   prefixe .sp- (landing.css se charge aussi dans l'app, un selecteur nu baverait).
   Couleurs par TOKENS uniquement. */

/* ---- Barre ----------------------------------------------------------------------------------- */
.sp-nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border);
  padding-top:env(safe-area-inset-top,0px);}
.sp-nav-in{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;gap:12px;}
.sp-logo{font-family:'Oswald',sans-serif;font-weight:700;font-size:19px;letter-spacing:.02em;
  text-decoration:none;color:var(--ink);flex-shrink:0;}
.sp-logo span{color:var(--flag);}
.sp-nav-liens{display:none;gap:22px;font-size:13px;font-weight:600;margin-left:auto;margin-right:18px;}
.sp-nav-liens a{text-decoration:none;color:var(--text);}
.sp-nav-liens a:hover{color:var(--flag);}
@media(min-width:820px){.sp-nav-liens{display:flex;}}

/* ---- HERO — meme grammaire que la page d'accueil : fond CLAIR, texte a gauche, image a droite.
   La version precedente etait une photo plein cadre assombrie : elle ne ressemblait a rien d'autre
   sur le site, et un titre blanc sur un gymnase clair se lit mal. Ici la photo occupe la moitie
   droite et se fond vers la gauche, exactement comme sur l'accueil. -------------------------- */
.sp-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);
  border-bottom:1px solid var(--border);}
.sp-hero::after{content:"";position:absolute;top:0;bottom:0;right:0;left:46%;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 20%,#000 55%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 20%,#000 55%);}
.sp-hero::before{content:"";position:absolute;top:-160px;right:-120px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,90,31,.14),transparent 68%);
  pointer-events:none;z-index:0;}
.sp-hero-in{position:relative;z-index:2;max-width:1080px;padding:60px 24px 56px;}
.sp-hero-txt{max-width:min(560px,92%);}
.sp-eyebrow{font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--flag);margin:0 0 14px;text-transform:uppercase;}
.sp-hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.04;margin:0 0 16px;color:var(--ink);}
.sp-hero h1 .accent{color:var(--flag);}
.sp-accroche{font-size:16.5px;line-height:1.55;color:var(--muted);max-width:44ch;margin:0 0 26px;}
.sp-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.sp-points{display:flex;flex-wrap:wrap;gap:10px 24px;margin:26px 0 0;padding:0;list-style:none;}
.sp-points li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text);}
.sp-points b{color:var(--flag);}
/* Sous 860 px le texte prend toute la largeur : la photo passe en bandeau bas, comme sur l'accueil. */
@media(max-width:860px){
  .sp-hero::after{left:0;top:auto;height:210px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 60%);
    mask-image:linear-gradient(180deg,transparent 0,#000 60%);}
  .sp-hero-in{padding-bottom:225px;}
  .sp-hero-txt{max-width:100%;}
}

/* ---- Bande sombre : les trois promesses ------------------------------------------------------ */
.sp-band{background:var(--band-dark,#15171c);color:#fff;}
.sp-band-in{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:26px 24px;max-width:1080px;}
.sp-band-in b{display:block;font-family:'Oswald',sans-serif;font-size:17px;text-transform:uppercase;
  margin-bottom:3px;}
.sp-band-in span{font-size:13.5px;color:rgba(255,255,255,.66);line-height:1.45;}
@media(max-width:720px){.sp-band-in{grid-template-columns:1fr;gap:16px;}}

/* ---- Corps ----------------------------------------------------------------------------------- */
.sp-main{padding:0 24px;max-width:1080px;}
.sp-sec{margin:58px 0;}
.sp-sec h2{font-size:clamp(22px,3vw,30px);margin:0 0 14px;}
.sp-sec p{font-size:16px;line-height:1.65;margin:0 0 14px;max-width:68ch;}

/* Le probleme / la reponse, en deux colonnes comme la section « avant / avec » de l'accueil. */
.sp-compare{display:grid;grid-template-columns:1fr;gap:22px;}
@media(min-width:760px){.sp-compare{grid-template-columns:1fr 1fr;}}
.sp-col{border:1px solid var(--border);border-radius:14px;padding:24px;background:var(--surface);}
.sp-col.nous{background:#15171c;border-color:#15171c;box-shadow:5px 5px 0 var(--flag);color:#fff;}
.sp-col h3{font-family:'Oswald',sans-serif;font-size:17px;margin:0 0 14px;letter-spacing:.03em;}
.sp-col.nous h3{color:#fff;}
.sp-col p{font-size:15px;line-height:1.6;margin:0;color:var(--muted);}
.sp-col.nous p{color:rgba(255,255,255,.82);}

.sp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px;}
.sp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;
  transition:border-color .15s;}
.sp-card:hover{border-color:var(--flag);}
.sp-card h3{font-size:16px;margin:0 0 8px;}
.sp-card p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0;}
@media(max-width:820px){.sp-cards{grid-template-columns:1fr;}}

.sp-apercu{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:center;}
.sp-apercu img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--border);
  box-shadow:0 12px 34px rgba(20,23,28,.12);}
.sp-lien{color:var(--flag);font-weight:700;text-decoration:none;}
.sp-lien:hover{text-decoration:underline;}
@media(max-width:820px){.sp-apercu{grid-template-columns:1fr;gap:20px;}}

/* ---- Tarifs ---------------------------------------------------------------------------------- */
.sp-prix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px;}
.sp-prix-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:22px 20px;text-align:center;}
.sp-prix-card--fort{border-color:var(--flag);box-shadow:0 10px 30px rgba(255,90,31,.14);}
.sp-prix-nom{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:13px;letter-spacing:.06em;
  color:var(--muted);margin:0 0 6px;}
.sp-prix-val{font-family:'Oswald',sans-serif;font-size:30px;margin:0 0 6px;color:var(--ink);}
.sp-prix-val small{font-size:14px;color:var(--muted);font-family:inherit;}
.sp-prix-sub{font-size:13px;color:var(--muted);margin:0;line-height:1.45;}
.sp-prix-note{margin-top:14px;font-size:14px;}
.sp-prix-note a{color:var(--flag);font-weight:700;}
@media(max-width:820px){.sp-prix-grid{grid-template-columns:1fr;}}

/* ---- FAQ ------------------------------------------------------------------------------------- */
.sp-faq{border-bottom:1px solid var(--border);padding:14px 0;}
.sp-faq summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none;}
.sp-faq summary::-webkit-details-marker{display:none;}
.sp-faq summary::after{content:'+';float:right;color:var(--flag);font-weight:700;}
.sp-faq[open] summary::after{content:'\2013';}
.sp-faq p{margin:10px 0 2px;color:var(--muted);font-size:15px;}

/* ---- Dernier appel, sur bande sombre comme l'accueil ----------------------------------------- */
.sp-final{background:var(--band-dark,#15171c);color:#fff;text-align:center;padding:52px 24px;margin-top:60px;}
.sp-final h2{margin:0 0 10px;color:#fff;font-size:clamp(22px,3vw,30px);}
.sp-final p{margin:0 auto 22px;max-width:52ch;color:rgba(255,255,255,.72);}
.sp-final .sp-actions{justify-content:center;}
.btn-ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);box-shadow:none;}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);}

/* ---- Autres sports : une vraie grille, pas une ligne de liens -------------------------------- */
.sp-autres{max-width:1080px;padding:52px 24px 10px;}
.sp-autres h2{font-size:20px;margin:0 0 16px;}
.sp-autres-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.sp-autres-grid a{display:block;padding:12px 14px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;
  transition:border-color .15s;}
.sp-autres-grid a:hover{border-color:var(--flag);}

.sp-pied{border-top:1px solid var(--border);padding:22px 24px 40px;font-size:13.5px;color:var(--muted);
  text-align:center;}
.sp-pied a{color:var(--muted);text-decoration:none;}
.sp-pied a:hover{color:var(--flag);}