/* SPORTIMATCH — site vitrine et simulateur.
   Palette et polices reprises de l'app (lib/theme.js) : accent ambre, fond
   bleu nuit en sombre, Bebas Neue pour les titres, Work Sans pour le texte. */

:root {
  --accent: #ebb517;
  --accent-encre: #0d121b;
  --fond: #0b0f18;
  --surface: #181d26;
  --surface-2: #212730;
  --texte: #f3f2ed;
  --texte-attenue: #8d93a0;
  --bordure: #2d333d;
  --lien: #ebb517;
  --danger: #e2585a;
  --succes: #4ade80;
  --ombre: 0 30px 80px rgba(0, 0, 0, 0.45);
  --lueur: rgba(235, 181, 23, 0.16);
  --rayon: 16px;
  --titre: "Bebas Neue", Impact, sans-serif;
  --corps: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fond: #f2f5fb;
    --surface: #e2e6ee;
    --surface-2: #fcfdff;
    --texte: #11161f;
    --texte-attenue: #5b606a;
    --bordure: #d3d8e0;
    --lien: #9a6700;
    --danger: #d33a3c;
    --succes: #2f9e58;
    --ombre: 0 30px 70px rgba(17, 22, 31, 0.16);
    --lueur: rgba(235, 181, 23, 0.22);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --fond: #f2f5fb;
  --surface: #e2e6ee;
  --surface-2: #fcfdff;
  --texte: #11161f;
  --texte-attenue: #5b606a;
  --bordure: #d3d8e0;
  --lien: #9a6700;
  --danger: #d33a3c;
  --succes: #2f9e58;
  --ombre: 0 30px 70px rgba(17, 22, 31, 0.16);
  --lueur: rgba(235, 181, 23, 0.22);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
a { color: var(--lien); }
button { font: inherit; color: inherit; }
h1, h2, h3, .titre { font-family: var(--titre); font-weight: 400; letter-spacing: 0.02em; }
.conteneur { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Barre de progression de lecture */
.progression-lecture {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60;
  background: var(--accent); transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.entete.defile { border-bottom-color: var(--bordure); }
.barre { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--texte); }
.logo img { display: block; width: auto; height: 48px; }
.nav-principale { display: flex; gap: 4px; }
.nav-principale a {
  color: var(--texte-attenue); text-decoration: none; font-weight: 500; font-size: 15px;
  padding: 8px 12px; border-radius: 999px; transition: color 0.2s, background 0.2s;
}
.nav-principale a:hover, .nav-principale a.actif { color: var(--texte); background: var(--surface); }
.outils { display: flex; align-items: center; gap: 8px; }
.pastille {
  height: 40px; min-width: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--bordure); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; font-weight: 600; font-size: 13px; letter-spacing: 0.04em;
  transition: transform 0.2s var(--ease), border-color 0.2s;
}
.pastille:hover { border-color: var(--accent); }
.pastille:active { transform: scale(0.94); }
.pastille svg { width: 18px; height: 18px; }
/* En-tête : « Essayer en direct » en bouton discret, « Espace organisateur » en bouton ambre (à droite) */
.cta-entete {
  height: 40px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center;
  border: 1px solid var(--bordure); background: var(--surface); color: var(--texte); text-decoration: none; font-weight: 600; font-size: 14px;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}
.cta-entete:hover { border-color: var(--accent); transform: translateY(-1px); }
.lien-espace {
  height: 40px; padding: 0 16px; border-radius: 10px; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-encre);
  font-family: var(--titre); font-size: 19px; letter-spacing: 0.04em; text-decoration: none; padding-top: 2px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.lien-espace:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--lueur); }
.lien-espace, .cta-entete { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1100px) { .cta-entete { display: none; } .nav-principale a { padding: 8px 9px; } }
.lien-espace svg { width: 18px; height: 18px; color: var(--accent-encre); margin-top: -2px; }

/* Espace organisateur */
.espace { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.espace .intro { margin-bottom: 20px; }
.espace-liste { list-style: none; padding: 0; margin: 0 0 28px; }
.espace-liste li { padding: 7px 0 7px 30px; position: relative; font-size: 16px; }
.espace-liste li::before { content: ""; position: absolute; left: 3px; top: 14px; width: 13px; height: 7px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }
.ecran-ordi { border-radius: 14px; overflow: hidden; border: 1px solid var(--bordure); background: #0b0f18; color: #f3f2ed; box-shadow: var(--ombre); }
.ordi-barre { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #181d26; border-bottom: 1px solid #2d333d; }
.ordi-barre i { width: 10px; height: 10px; border-radius: 50%; background: #2d333d; }
.ordi-barre i:first-child { background: #e2585a; } .ordi-barre i:nth-child(2) { background: #ebb517; } .ordi-barre i:nth-child(3) { background: #4ade80; }
.ordi-barre span { margin-left: 10px; font-size: 12px; color: #808693; background: #0b0f18; padding: 3px 10px; border-radius: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ordi-contenu { padding: 24px 28px 28px; }
.ordi-titre { font-family: var(--titre); font-size: 30px; line-height: 1; }
.ordi-infos { display: flex; gap: 14px; align-items: center; font-size: 12px; color: #808693; margin: 6px 0 14px; }
.ordi-infos b { color: #4ade80; font-size: 11px; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 5px; }
.ordi-infos b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }
.ordi-onglets2 { display: flex; gap: 18px; border-bottom: 1px solid #2d333d; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: #808693; }
.ordi-onglets2 span { padding-bottom: 9px; } .ordi-onglets2 .on { color: #f3f2ed; border-bottom: 3px solid #ebb517; }
.ordi-filtres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ordi-filtres span { border: 1px solid #2d333d; border-radius: 99px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: #808693; }
.ordi-filtres .on { background: #ebb517; border-color: #ebb517; color: #0d121b; }
.ordi-cr { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; border-top: 1px solid #2d333d; padding: 9px 0; }
.ordi-cr > div:last-child { display: grid; gap: 6px; }
.ordi-cr.now { border-top: 2px solid #ebb517; }
.ordi-h { font-family: var(--titre); font-size: 22px; line-height: 1; padding-top: 4px; }
.ordi-h small { display: block; font-family: var(--corps); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: #808693; margin-top: 4px; }
.ordi-cr.passe .ordi-h { color: #808693; } .ordi-cr.now .ordi-h, .ordi-cr.now .ordi-h small { color: #ebb517; }
.ordi-m { display: grid; grid-template-columns: 22px minmax(0, 1fr) 56px minmax(0, 1fr) 76px; gap: 8px; align-items: center; background: #181d26; border: 1px solid #2d333d; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.ordi-m.live { border-color: #ebb517; box-shadow: 0 0 0 3px rgba(235, 181, 23, 0.15); }
.ordi-p { font-family: var(--titre); font-size: 12px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: rgba(235, 181, 23, 0.16); color: #ebb517; padding-top: 1px; }
.ordi-e { font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ordi-e.b { text-align: left; }
.ordi-s { font-family: var(--titre); font-size: 21px; text-align: center; white-space: nowrap; }
.ordi-s small { font-family: var(--corps); font-size: 11px; color: #808693; font-weight: 600; }
.ordi-s .flash { display: inline-block; animation: flash 0.8s var(--ease); color: #ebb517; }
.ordi-t { font-size: 11px; color: #808693; text-align: right; white-space: nowrap; } .ordi-m.live .ordi-t { color: #e2585a; font-weight: 700; letter-spacing: 0.04em; }
.burger { display: none; }

/* ---------- Héros ---------- */
.heros { position: relative; padding: 44px 0 40px; overflow: hidden; }
.heros::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 820px; height: 820px; border-radius: 50%;
  background: radial-gradient(circle, var(--lueur), transparent 62%);
  pointer-events: none; transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform 0.6s var(--ease);
}
.heros::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(var(--bordure) 1px, transparent 1px), linear-gradient(90deg, var(--bordure) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 70%);
}
.heros .conteneur { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 48px; align-items: center; }
.etiquette {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--lien); font-weight: 600; font-size: 13px; letter-spacing: 0.02em;
}
.point-direct { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; transform: scale(0.8); } }
h1 { font-size: clamp(52px, 7.6vw, 96px); line-height: 0.92; margin: 18px 0 18px; }
h1 .ligne { display: block; overflow: hidden; }
h1 .ligne > span { display: inline-block; transform: translateY(105%); animation: monter 0.9s var(--ease) forwards; }
h1 .ligne:nth-child(2) > span { animation-delay: 0.08s; }
h1 .ligne:nth-child(3) > span { animation-delay: 0.16s; }
@keyframes monter { to { transform: translateY(0); } }
h1 em { font-style: normal; color: var(--accent); }
.accroche { font-size: 19px; color: var(--texte-attenue); max-width: 32em; margin: 0 0 24px; }
.actions-heros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 2px 26px 0; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-encre);
  font-family: var(--titre); font-size: 23px; letter-spacing: 0.04em; text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  position: relative; overflow: hidden;
}
.bouton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.7s var(--ease);
}
.bouton:hover { transform: translateY(-2px); box-shadow: 0 14px 34px var(--lueur); }
.bouton:hover::after { transform: translateX(120%); }
.bouton:active { transform: scale(0.97); }
.bouton.secondaire { background: var(--surface-2); color: var(--texte); border: 1px solid var(--bordure); }
.bouton.secondaire::after { display: none; }
.bouton svg { width: 20px; height: 20px; margin-top: -2px; }
/* Badges des stores : contrastés (couleurs inversées), juste sous l'accroche */
.boutons-store { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 26px; }
.bouton-store {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 210px; padding: 12px 22px 12px 18px; border-radius: 14px;
  background: var(--texte); color: var(--fond); text-decoration: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px color-mix(in srgb, var(--texte) 70%, transparent);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.bouton-store:hover { transform: translateY(-2px); box-shadow: 0 16px 36px var(--lueur), 0 0 0 2px var(--accent); }
.bouton-store svg { width: 32px; height: 32px; flex-shrink: 0; }
.bouton-store small { display: block; font-size: 12px; line-height: 1.2; opacity: 0.75; font-weight: 500; }
.bouton-store strong { display: block; font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.bouton-store .bientot {
  position: absolute; top: -10px; right: -8px; padding: 3px 10px; border-radius: 999px;
  background: var(--accent); color: var(--accent-encre); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Téléphone du héros : coque réaliste (métal, îlot, boutons, reflet), écran
   toujours sombre comme l'app, avec le « fil de la journée » animé (site.js) */
.scene-heros { position: relative; perspective: 1500px; }
.telephone {
  position: relative; width: 100%; max-width: 318px; aspect-ratio: 300 / 620; margin: 0 auto; border-radius: 54px; padding: 11px;
  background: linear-gradient(140deg, #4a4e55 0%, #1b1d21 22%, #2c2f35 48%, #121316 70%, #3d4047 100%);
  box-shadow: inset 0 0 0 1.5px #6b7078, inset 0 0 0 4px #0b0c0e, 0 50px 90px -30px rgba(5, 8, 15, 0.6), 0 22px 40px -18px rgba(5, 8, 15, 0.45);
  transform: rotateY(var(--ry, -14deg)) rotateX(var(--rx, 6deg)) rotateZ(1deg);
  transition: transform 0.8s var(--ease);
  transform-style: preserve-3d;
}
.telephone::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -46px; height: 34px; border-radius: 50%; background: radial-gradient(ellipse, rgba(5, 8, 15, 0.4), transparent 70%); filter: blur(6px); transform: translateZ(-40px); }
.telephone .bouton-cote { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #2a2d32, #5a5e65); }
.telephone .bc1 { left: -3px; top: 19%; height: 5%; }
.telephone .bc2 { left: -3px; top: 27%; height: 9%; }
.telephone .bc3 { left: -3px; top: 37.5%; height: 9%; }
.telephone .bc4 { right: -3px; top: 29.5%; height: 14%; background: linear-gradient(270deg, #2a2d32, #5a5e65); }
.ecran-demo { position: relative; height: 100%; border-radius: 44px; background: #0b0f18; color: #f3f2ed; padding: 0 15px; overflow: hidden; }
.ecran-demo::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.035) 28%, transparent 28.4%); }
.ecran-demo .ilot { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 31%; height: 27px; border-radius: 20px; background: #000; z-index: 2; }
.ecran-demo .barre-etat { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 14px 12px 0; font-size: 13px; font-weight: 600; color: #f3f2ed; }
.icones-etat { display: flex; gap: 5px; align-items: center; }
.reseau { display: flex; gap: 1.5px; align-items: flex-end; height: 10px; }
.reseau i { width: 3px; background: #f3f2ed; border-radius: 1px; }
.reseau i:nth-child(1) { height: 4px; } .reseau i:nth-child(2) { height: 6px; } .reseau i:nth-child(3) { height: 8px; } .reseau i:nth-child(4) { height: 10px; }
.batterie { width: 22px; height: 11px; border: 1.5px solid rgba(243, 242, 237, 0.55); border-radius: 3.5px; padding: 1px; position: relative; }
.batterie::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; border-radius: 1px; background: rgba(243, 242, 237, 0.55); }
.batterie i { display: block; height: 100%; width: 78%; background: #f3f2ed; border-radius: 1.5px; }
.ecran-demo .barre-accueil { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 36%; height: 4.5px; border-radius: 3px; background: rgba(243, 242, 237, 0.85); }
.ecran-demo .entete-app { display: flex; align-items: center; justify-content: center; margin: 4px 0 10px; }
.ecran-demo .entete-app img { display: block; width: auto; height: 30px; }
.ecran-demo .titre-tournoi { font-family: var(--titre); font-size: 25px; line-height: 1; }
.ecran-demo .meta { font-size: 11px; color: #808693; margin: 4px 0 10px; display: flex; justify-content: space-between; align-items: center; }
.statut-direct { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: #4ade80; white-space: nowrap; }
.statut-direct::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.direct { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #e2585a; letter-spacing: 0.06em; }
.direct::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.tel-pastilles { display: flex; gap: 5px; margin-bottom: 9px; overflow: hidden; }
.tel-pastilles span { border: 1px solid #2d333d; border-radius: 99px; padding: 4px 9px; font-weight: 600; font-size: 10.5px; color: #808693; white-space: nowrap; }
.tel-pastilles span.on { background: #ebb517; border-color: #ebb517; color: #0d121b; }
.tel-jauge { display: flex; gap: 8px; align-items: center; color: #808693; font-size: 10.5px; margin-bottom: 6px; }
.tel-jauge b { width: 56px; height: 5px; border-radius: 3px; background: #181d26; overflow: hidden; flex-shrink: 0; }
.tel-jauge b i { display: block; height: 100%; background: #ebb517; transition: width 0.6s var(--ease); }
.tel-creneau { border-top: 1px solid #2d333d; padding: 7px 0; display: grid; gap: 5px; }
.tel-creneau.courant { border-top: 2px solid #ebb517; }
.tel-heure { font-family: var(--titre); font-size: 17px; display: flex; gap: 6px; align-items: baseline; }
.tel-heure small { font-family: var(--corps); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: #808693; }
.tel-creneau.passe .tel-heure { color: #808693; }
.tel-creneau.courant .tel-heure, .tel-creneau.courant .tel-heure small { color: #ebb517; }
.tel-match { display: grid; grid-template-columns: 18px minmax(0, 1fr) 42px minmax(0, 1fr); gap: 6px; align-items: center; background: #181d26; border: 1px solid #2d333d; border-radius: 9px; padding: 6px 8px; transition: border-color 0.4s, box-shadow 0.4s; }
.tel-creneau.passe .tel-match { background: transparent; padding: 3px 8px; }
.tel-match.enjeu { border-color: #ebb517; box-shadow: 0 0 0 2px rgba(235, 181, 23, 0.15); }
.tel-p { font-family: var(--titre); font-size: 11px; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: rgba(235, 181, 23, 0.16); color: #ebb517; padding-top: 1px; }
.tel-e { font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.tel-e.b { text-align: left; }
.tel-e.g { color: #ebb517; }
.tel-s { font-family: var(--titre); font-size: 17px; text-align: center; white-space: nowrap; }
.tel-s small { font-family: var(--corps); font-size: 9.5px; color: #808693; font-weight: 600; }
.tel-s .flash { display: inline-block; animation: flash 0.8s var(--ease); color: #ebb517; }
@keyframes flash { 0% { transform: scale(1.8); } 100% { transform: scale(1); } }
.bulle {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px; font-size: 13px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--bordure); box-shadow: var(--ombre);
  animation: flotter 6s ease-in-out infinite;
}
.bulle .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.bulle .ico svg { width: 17px; height: 17px; }
.bulle small { display: block; font-weight: 500; color: var(--texte-attenue); font-size: 11px; }
.bulle.b1 { top: 4%; left: -8%; }
.bulle.b2 { bottom: 14%; right: -4%; animation-delay: -3s; }
@keyframes flotter { 50% { transform: translateY(-12px); } }

/* Bandeau défilant */
.bandeau { border-block: 1px solid var(--bordure); background: var(--surface); overflow: hidden; padding: 14px 0; }
.bandeau-piste { display: flex; gap: 36px; width: max-content; animation: defiler 38s linear infinite; }
.bandeau:hover .bandeau-piste { animation-play-state: paused; }
.bandeau-piste span { font-family: var(--titre); font-size: 26px; letter-spacing: 0.04em; white-space: nowrap; display: inline-flex; align-items: center; gap: 36px; color: var(--texte-attenue); }
.bandeau-piste span::after { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
@keyframes defiler { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section { padding: 96px 0; scroll-margin-top: 68px; }
.section-alt { background: var(--surface); border-block: 1px solid var(--bordure); }
.surtitre { font-family: var(--titre); color: var(--accent); font-size: 20px; letter-spacing: 0.08em; margin: 0 0 4px; }
h2 { font-size: clamp(40px, 6vw, 68px); line-height: 0.95; margin: 0 0 14px; }
.intro { color: var(--texte-attenue); font-size: 18px; max-width: 40em; margin: 0 0 44px; }

.reveler { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--delai, 0s); }
.reveler.visible { opacity: 1; transform: none; }

/* Étapes */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.etapes-ligne { position: absolute; top: 44px; left: 8%; right: 8%; height: 2px; background: var(--bordure); overflow: hidden; }
.etapes-ligne i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--avance, 0)); transition: transform 0.2s linear; }
.etape { position: relative; padding: 26px; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--bordure); transition: transform 0.4s var(--ease), border-color 0.3s; }
.etape:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, var(--bordure)); }
.etape .num {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px;
  background: var(--accent); color: var(--accent-encre); font-family: var(--titre); font-size: 24px; margin-bottom: 16px; padding-top: 2px;
}
.etape h3 { font-size: 30px; margin: 0 0 6px; line-height: 1; }
.etape p { margin: 0; color: var(--texte-attenue); font-size: 15px; }
.etape.active { border-color: var(--accent); box-shadow: 0 0 0 4px var(--lueur); }

/* Chiffres clés sous le bandeau */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); margin: 34px 0 -40px; border-block: 1px solid var(--bordure); }
.chiffres div { padding: 22px 16px; text-align: center; border-left: 1px solid var(--bordure); }
.chiffres div:first-child { border-left: 0; }
.chiffres b { display: block; font-family: var(--titre); font-weight: 400; font-size: clamp(44px, 6vw, 64px); line-height: 1; color: var(--accent); }
.chiffres span { color: var(--texte-attenue); font-size: 14px; }

/* « Le jour J » : scène animée sous chaque étape (site.js) */
.scene-etape { position: relative; height: 150px; margin-top: 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--bordure); overflow: hidden; }
.se-liste, .se-calendrier { position: absolute; inset: 12px; display: grid; gap: 6px; font-size: 12px; }
.se-liste { transition: opacity 0.5s, transform 0.6s var(--ease); }
.se-liste span, .se-calendrier span { background: var(--surface-2); border: 1px solid var(--bordure); border-radius: 7px; padding: 5px 9px; font-weight: 600; }
.se-calendrier { grid-template-columns: 40px 1fr; gap: 6px 8px; font-size: 11.5px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s 0.2s, transform 0.6s 0.2s var(--ease); }
.se-calendrier span { padding: 4px 8px; }
.se-calendrier b { font-family: var(--titre); font-weight: 400; font-size: 16px; color: var(--lien); padding-top: 3px; }
.etape.jouee .se-liste { opacity: 0; transform: scale(0.9); }
.etape.jouee .se-calendrier { opacity: 1; transform: none; }
.se-qr { position: absolute; left: 18px; top: 22px; width: 92px; height: 92px; border-radius: 10px; padding: 8px; background: #ffffff; box-shadow: 0 0 0 1px var(--bordure), 0 6px 16px rgba(5, 8, 15, 0.12); }
.se-qr canvas, .se-qr img { display: block; width: 76px !important; height: 76px !important; }
.se-faisceau { position: absolute; left: 18px; top: 22px; width: 92px; height: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); opacity: 0; }
.etape.jouee .se-faisceau { animation: scanQr 1.2s var(--ease) both; }
@keyframes scanQr { 0% { opacity: 1; top: 22px; } 90% { opacity: 1; top: 112px; } 100% { opacity: 0; top: 112px; } }
.se-mini { position: absolute; right: 18px; top: 14px; width: 74px; height: 122px; border-radius: 14px; background: #0b0f18; border: 3px solid #2c2f35; padding: 14px 6px 6px; display: grid; gap: 4px; align-content: start; opacity: 0.35; transition: opacity 0.4s 1s; }
.se-mini i { height: 10px; border-radius: 3px; background: #181d26; } .se-mini i.a { background: #ebb517; width: 60%; }
.etape.jouee .se-mini { opacity: 1; }
.se-score { position: absolute; left: 14px; right: 14px; top: 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--surface-2); border: 1px solid var(--bordure); border-radius: 10px; padding: 8px 10px; font-size: 12px; font-weight: 600; }
.se-score span:last-child { text-align: right; }
.se-score b { font-family: var(--titre); font-size: 24px; font-weight: 400; padding: 0 10px; }
.se-but.flash { display: inline-block; color: var(--lien); animation: flash 0.8s var(--ease); }
.se-classement { position: absolute; left: 14px; right: 14px; bottom: 12px; display: grid; gap: 4px; font-size: 11.5px; }
.se-classement div { display: flex; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--bordure); border-radius: 7px; padding: 4px 9px; transition: transform 0.6s var(--ease), background 0.4s; }
.etape.jouee .se-monte { transform: translateY(-29px); background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
.etape.jouee .se-descend { transform: translateY(29px); }

/* Simulateur replié derrière « Essayer l'app ici » */
.appel-sim { display: none; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 34px; border-radius: 24px; background: var(--fond); border: 1px solid var(--bordure); }
.appel-sim h2 { margin: 0; font-size: clamp(36px, 4.4vw, 52px); }
.appel-sim p:not(.surtitre) { margin: 6px 0 0; color: var(--texte-attenue); max-width: 52ch; }
.appel-sim .bouton { flex-shrink: 0; }
#essayer.replie { padding: 56px 0; }
#essayer.replie .appel-sim { display: flex; }
#essayer.replie .simulateur, #essayer.replie .replier-sim { display: none; }
.replier-sim { display: flex; margin: -40px 0 28px auto; height: 44px; font-size: 18px; padding: 2px 16px 0; gap: 8px; }
.replier-sim svg { width: 18px; height: 18px; transform: rotate(180deg) translateY(1px); }

/* Fonctionnalités / Sports : une seule section à onglets */
.onglets-section { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--bordure); margin-bottom: 22px; }
.onglets-section button { border: 0; background: none; cursor: pointer; padding: 9px 20px; border-radius: 999px; font: inherit; font-family: var(--titre); font-size: 19px; letter-spacing: 0.04em; color: var(--texte-attenue); padding-top: 11px; }
.onglets-section button.actif { background: var(--accent); color: var(--accent-encre); }
.panneau-section[hidden] { display: none; }
#sports > .intro { margin-top: 0; }

/* Ils l'ont testé (vrais retours seulement, voir TEMOIGNAGES dans site.js) */
.avis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.avis figure { margin: 0; padding: 22px; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--bordure); }
.avis blockquote { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.avis blockquote::before { content: "“"; display: block; font-family: var(--titre); font-size: 54px; line-height: 0.6; color: var(--accent); }
.avis figcaption { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.avis figcaption b { display: block; } .avis figcaption small { color: var(--texte-attenue); }
.avatar-avis { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--titre); font-size: 17px; padding-top: 2px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--lien); }

/* Barre de boutons flottante, sur téléphone seulement */
.barre-flottante { display: none; }

/* Tes données */
.donnees { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; }
.donnees div { padding: 20px; border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--bordure); }
.donnees svg { width: 26px; height: 26px; color: var(--lien); }
.donnees b { display: block; margin: 10px 0 4px; }
.donnees span { font-size: 14px; color: var(--texte-attenue); }

/* ---------- Simulateur ---------- */
.simulateur { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start; }
.guide { position: sticky; top: 92px; }
.guide-entete { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.guide-entete h3 { font-size: 28px; margin: 0; line-height: 1; }
.guide-entete span { font-family: var(--titre); font-size: 22px; color: var(--accent); }
.jauge { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-bottom: 18px; border: 1px solid var(--bordure); }
.jauge i { display: block; height: 100%; background: var(--accent); width: 0; transition: width 0.6s var(--ease); border-radius: 99px; }
.missions { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mission {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: var(--fond); border: 1px solid var(--bordure); font-size: 14px; font-weight: 500;
  transition: border-color 0.25s, transform 0.25s var(--ease), background 0.25s;
  text-align: left; width: 100%;
}
.mission:hover { border-color: var(--accent); transform: translateX(3px); }
.mission .coche {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--bordure);
  display: grid; place-items: center; transition: background 0.3s, border-color 0.3s;
}
.mission .coche svg { width: 13px; height: 13px; opacity: 0; transform: scale(0.4); transition: all 0.35s var(--ease); color: var(--accent-encre); }
.mission.faite .coche { background: var(--accent); border-color: var(--accent); }
.mission.faite .coche svg { opacity: 1; transform: none; }
.mission.faite { color: var(--texte-attenue); }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.guide-actions .bouton { height: 48px; font-size: 20px; padding: 2px 18px 0; }
.note-sim { font-size: 13px; color: var(--texte-attenue); margin-top: 16px; }

.telephone-sim {
  width: 390px; height: 800px; border-radius: 52px; padding: 12px; position: relative;
  background: #05070c; border: 1px solid #2d333d;
  box-shadow: var(--ombre), 0 0 0 1px rgba(235, 181, 23, 0.1), inset 0 0 0 2px #10141c;
}
.telephone-sim::before {
  content: ""; position: absolute; top: 22px; left: 50%; width: 96px; height: 28px; margin-left: -48px;
  background: #05070c; border-radius: 20px; z-index: 30;
}
.sim {
  --s-fond: var(--fond); position: relative; height: 100%; border-radius: 41px; overflow: hidden;
  background: var(--fond); color: var(--texte); isolation: isolate;
  font-size: 15px; line-height: 1.45;
}
.sim-etat { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0; font-size: 14px; font-weight: 600; position: relative; z-index: 5; }
.sim-etat .icones { display: flex; gap: 6px; align-items: center; }
.sim-etat svg { width: 17px; height: 17px; }
.sim-pile { position: absolute; inset: 50px 0 0 0; overflow: hidden; }
.sim-ecran {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 20px 40px;
  scrollbar-width: thin; scrollbar-color: var(--bordure) transparent; overscroll-behavior: contain;
}
.sim-ecran.entre-avant { animation: entreAvant 0.42s var(--ease); }
.sim-ecran.entre-arriere { animation: entreArriere 0.42s var(--ease); }
.sim-ecran.sort-avant { animation: sortAvant 0.42s var(--ease) forwards; pointer-events: none; }
.sim-ecran.sort-arriere { animation: sortArriere 0.42s var(--ease) forwards; pointer-events: none; }
@keyframes entreAvant { from { transform: translateX(100%); } }
@keyframes entreArriere { from { transform: translateX(-30%); opacity: 0.4; } }
@keyframes sortAvant { to { transform: translateX(-30%); opacity: 0; } }
@keyframes sortArriere { to { transform: translateX(100%); } }

/* Éléments d'interface de l'app, reproduits */
.s-nav { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 10px; }
.s-retour { display: inline-flex; align-items: center; gap: 2px; color: var(--lien); font-weight: 600; font-size: 16px; background: none; border: 0; cursor: pointer; padding: 6px 4px 6px 0; }
.s-retour svg { width: 20px; height: 20px; }
.s-marque { display: inline-flex; align-items: center; gap: 6px; }
.s-marque img { display: block; width: auto; height: 30px; }
.s-nav .droite { margin-left: auto; display: flex; gap: 8px; }
.s-rond {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bordure); background: var(--surface-2);
  display: grid; place-items: center; cursor: pointer; font-weight: 600; font-size: 13px; transition: transform 0.2s var(--ease);
}
.s-rond:active { transform: scale(0.9); }
.s-rond svg { width: 18px; height: 18px; }
.s-titre { font-family: var(--titre); font-size: 34px; line-height: 1; margin: 8px 0 6px; letter-spacing: 0.01em; }
.s-sous { color: var(--texte-attenue); font-size: 14px; margin: 0 0 18px; }
.s-eyebrow { font-family: var(--titre); color: var(--accent); font-size: 18px; letter-spacing: 0.06em; margin: 4px 0 0; }
.s-label { display: block; font-weight: 600; font-size: 14px; margin: 18px 0 8px; }
.s-aide { font-size: 13px; color: var(--texte-attenue); margin: -2px 0 10px; }
.s-champ {
  width: 100%; height: 50px; border-radius: 12px; border: 1px solid var(--bordure); background: var(--surface-2);
  color: var(--texte); padding: 0 14px; font: inherit; font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s;
}
.s-champ:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--lueur); }
.s-champ.code { font-family: var(--titre); font-size: 30px; letter-spacing: 0.3em; text-align: center; text-transform: uppercase; height: 64px; }
.s-ligne-champ { display: flex; gap: 8px; }
.s-ligne-champ .s-champ { flex: 1; }
.s-btn {
  width: 100%; min-height: 56px; border-radius: 12px; border: 0; cursor: pointer; margin-top: 12px;
  background: var(--accent); color: var(--accent-encre); font-family: var(--titre); font-size: 23px; letter-spacing: 0.03em;
  padding: 4px 16px 0; transition: transform 0.15s var(--ease), filter 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.s-btn:active { transform: scale(0.97); }
.s-btn:hover { filter: brightness(1.05); }
.s-btn.sec { background: var(--surface-2); color: var(--texte); border: 1px solid var(--bordure); }
.s-btn.danger { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent); }
.s-btn.petit { min-height: 44px; font-size: 19px; width: auto; margin: 0; }
.s-btn[disabled] { opacity: 0.45; pointer-events: none; }
.s-btn svg { width: 20px; height: 20px; margin-top: -3px; }
.s-lien { background: none; border: 0; color: var(--lien); font-weight: 600; cursor: pointer; padding: 8px 0; font-size: 15px; text-align: center; display: block; width: 100%; }
.s-lien.attenue { color: var(--texte-attenue); text-decoration: underline; font-weight: 500; }
.s-lien.rouge { color: var(--danger); text-decoration: underline; }
.s-carte {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--bordure); background: var(--surface);
  margin-bottom: 8px; font-size: 15px; font-weight: 500; transition: border-color 0.2s, background 0.2s, transform 0.15s var(--ease);
}
.s-carte:active { transform: scale(0.98); }
.s-carte .rond { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bordure); flex-shrink: 0; transition: all 0.2s; }
.s-carte.choisie { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.s-carte.choisie .rond { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.s-sports { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s-sport {
  aspect-ratio: 1 / 0.92; border-radius: 16px; border: 1.5px solid var(--bordure); background: var(--surface); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--titre); font-size: 22px; letter-spacing: 0.03em; transition: all 0.25s var(--ease);
}
.s-sport svg { width: 46px; height: 46px; color: var(--accent); transition: transform 0.4s var(--ease); }
.s-sport:hover { border-color: var(--accent); }
.s-sport:hover svg { transform: rotate(-12deg) scale(1.08); }
.s-sport:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: auto; padding: 18px; flex-direction: row; }
.s-etapes { display: flex; gap: 6px; margin: 2px 0 6px; }
.s-etapes i { height: 4px; flex: 1; border-radius: 4px; background: var(--bordure); }
.s-etapes i.ok { background: var(--accent); }
.s-etapes-txt { font-size: 12px; color: var(--texte-attenue); margin-bottom: 8px; }
.s-repli { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: 0; border-top: 1px solid var(--bordure); padding: 16px 0 6px; margin-top: 18px; cursor: pointer; font-weight: 600; font-size: 15px; }
.s-repli svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); color: var(--accent); }
.s-repli.ouvert svg { transform: rotate(180deg); }
.s-pas { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--bordure); }
.s-pas span { font-weight: 500; font-size: 14px; }
.s-pas .ctrl { display: flex; align-items: center; gap: 4px; }
.s-pas button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--bordure); background: var(--surface-2); cursor: pointer; font-size: 20px; line-height: 1; display: grid; place-items: center; }
.s-pas button:active { transform: scale(0.9); }
.s-pas output { font-family: var(--titre); font-size: 26px; min-width: 40px; text-align: center; padding-top: 3px; }
.s-interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bordure); cursor: pointer; font-size: 15px; }
.s-interrupteur:last-child { border-bottom: 0; }
.s-interrupteur small { display: block; color: var(--texte-attenue); font-size: 12px; }
.bascule { width: 50px; height: 30px; border-radius: 99px; background: var(--bordure); position: relative; flex-shrink: 0; transition: background 0.25s; border: 0; cursor: pointer; }
.bascule::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.3s var(--ease); box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.bascule[aria-checked="true"] { background: var(--accent); }
.bascule[aria-checked="true"]::after { transform: translateX(20px); }
.s-grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.s-equipes { list-style: none; padding: 0; margin: 12px 0 0; }
.s-equipe {
  display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 14px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--bordure); margin-bottom: 6px; animation: apparaitre 0.35s var(--ease);
}
.s-equipe .n { font-family: var(--titre); color: var(--texte-attenue); width: 18px; font-size: 18px; padding-top: 2px; }
.s-equipe .nom { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-equipe button { width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--texte-attenue); cursor: pointer; display: grid; place-items: center; }
.s-equipe button:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.s-equipe button svg { width: 16px; height: 16px; }
.s-equipe.sort { animation: disparaitre 0.25s var(--ease) forwards; }
@keyframes apparaitre { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes disparaitre { to { opacity: 0; transform: translateX(30px); height: 0; padding: 0; margin: 0; } }
.s-compteur-equipes { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--texte-attenue); margin-top: 10px; }
.s-compteur-equipes b { color: var(--texte); }
.s-compteur-equipes .limite { color: var(--lien); font-weight: 600; }
.s-onglets { display: flex; background: var(--surface); border: 1px solid var(--bordure); border-radius: 14px; padding: 4px; margin: 6px 0 16px; position: relative; }
.s-onglets button { flex: 1; height: 40px; border: 0; background: none; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--texte-attenue); position: relative; z-index: 1; transition: color 0.3s; border-radius: 10px; }
.s-onglets button.actif { color: var(--accent-encre); }
.s-onglets .curseur { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 2)); border-radius: 10px; background: var(--accent); transition: transform 0.45s var(--ease); }
.s-section { font-family: var(--titre); color: var(--accent); font-size: 22px; letter-spacing: 0.03em; margin: 20px 0 10px; display: flex; justify-content: space-between; align-items: baseline; }
.s-section small { font-family: var(--corps); color: var(--texte-attenue); font-size: 12px; letter-spacing: 0; }
.s-match {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 14px; border-radius: 14px; border: 1px solid var(--bordure); background: var(--surface);
  margin-bottom: 8px; transition: border-color 0.25s, transform 0.15s var(--ease), box-shadow 0.4s;
}
.s-match:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--bordure)); }
.s-match:active { transform: scale(0.985); }
.s-match .eq { flex: 1; min-width: 0; }
.s-match .eq b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.s-match .eq b .gagnant { color: var(--accent); }
.s-match .eq small { color: var(--texte-attenue); font-size: 12.5px; }
.s-match .sc { font-family: var(--titre); font-size: 28px; letter-spacing: 0.04em; white-space: nowrap; padding-top: 3px; }
.s-match .sc small { display: block; font-family: var(--corps); font-size: 10px; color: var(--texte-attenue); text-align: right; letter-spacing: 0; margin-top: -6px; }
.s-match .avenir { font-size: 13px; color: var(--texte-attenue); white-space: nowrap; }
.s-match.live { border-color: var(--accent); box-shadow: 0 0 0 3px var(--lueur); }
.s-match.exempt { cursor: default; opacity: 0.7; border-style: dashed; }
.s-match.maj { animation: majMatch 1.2s var(--ease); }
@keyframes majMatch { 0% { box-shadow: 0 0 0 0 var(--accent); } 30% { box-shadow: 0 0 0 6px var(--lueur); } }
.s-badge-live { color: var(--danger); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 5px; }
.s-badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite; }
.s-tableau { background: var(--surface); border: 1px solid var(--bordure); border-radius: 16px; padding: 14px 12px 8px; margin-bottom: 12px; overflow-x: auto; }
.s-tableau h4 { margin: 0 0 8px; font-family: var(--titre); font-weight: 400; color: var(--accent); font-size: 19px; letter-spacing: 0.03em; }
.s-tableau table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.s-tableau th { color: var(--texte-attenue); font-weight: 600; text-align: center; padding: 4px 2px 8px; border-bottom: 1px solid var(--bordure); font-size: 11.5px; }
.s-tableau th:nth-child(2) { text-align: left; }
.s-tableau td { text-align: center; padding: 8px 2px; }
.s-tableau td:first-child { color: var(--texte-attenue); width: 16px; text-align: left; }
.s-tableau td:nth-child(2) { text-align: left; font-weight: 500; white-space: nowrap; max-width: 108px; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.s-tableau td:last-child { color: var(--accent); font-weight: 700; }
.s-tableau tr.qualifie td:first-child { color: var(--accent); font-weight: 700; }
.s-tableau tr { transition: background 0.3s; }
.s-legende { font-size: 11.5px; color: var(--texte-attenue); margin: 4px 2px 0; }
.s-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 2px 0 16px; }
.s-action {
  border: 1px solid var(--bordure); background: var(--surface); border-radius: 14px; padding: 10px 4px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; position: relative;
  transition: border-color 0.2s, transform 0.15s var(--ease);
}
.s-action:hover { border-color: var(--accent); }
.s-action:active { transform: scale(0.94); }
.s-action svg { width: 22px; height: 22px; color: var(--accent); }
.s-action .cadenas { position: absolute; top: 5px; right: 6px; width: 13px; height: 13px; color: var(--texte-attenue); }
.s-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; margin: 12px 0 4px; text-align: center; }
.s-podium .marche { border-radius: 12px 12px 4px 4px; background: var(--surface-2); border: 1px solid var(--bordure); padding: 10px 4px; animation: podium 0.9s var(--ease) backwards; }
.s-podium .p1 { height: 128px; background: var(--accent); color: var(--accent-encre); border-color: var(--accent); animation-delay: 0.3s; }
.s-podium .p2 { height: 98px; animation-delay: 0.15s; }
.s-podium .p3 { height: 78px; }
.s-podium .rang { font-family: var(--titre); font-size: 32px; line-height: 1; }
.s-podium .nom { font-size: 12px; font-weight: 600; line-height: 1.2; word-break: break-word; }
@keyframes podium { from { transform: scaleY(0); transform-origin: bottom; } }
.s-carte-tournoi {
  width: 100%; text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--bordure);
  background: var(--surface); display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.s-carte-tournoi:hover { border-color: var(--accent); }
.s-carte-tournoi .ic { width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 15%, transparent); display: grid; place-items: center; color: var(--accent); flex-shrink: 0; }
.s-carte-tournoi .ic svg { width: 24px; height: 24px; }
.s-carte-tournoi b { display: block; font-weight: 600; }
.s-carte-tournoi small { color: var(--texte-attenue); font-size: 12.5px; }
.s-carte-tournoi .fl { margin-left: auto; color: var(--texte-attenue); width: 18px; height: 18px; }
.s-accueil { min-height: calc(100% - 10px); display: flex; flex-direction: column; }
.s-accueil .logo-grand { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px 0 4px; }
.s-accueil .logo-grand img { display: block; width: auto; height: 96px; }
.s-accueil .slogan { text-align: center; color: var(--texte-attenue); margin: 0 0 26px; }
.s-pied { margin-top: auto; padding-top: 24px; }
.s-qr { background: #fff; border-radius: 22px; padding: 18px; width: 240px; height: 240px; margin: 8px auto 14px; display: grid; place-items: center; box-shadow: 0 16px 40px var(--lueur); animation: apparaitre 0.5s var(--ease); }
.s-qr img, .s-qr canvas { width: 100% !important; height: auto !important; image-rendering: pixelated; }
.s-code-grand { text-align: center; font-family: var(--titre); font-size: 48px; letter-spacing: 0.24em; color: var(--accent); margin: 0; padding-left: 0.24em; }
.s-scan { position: relative; height: 230px; border-radius: 18px; background: #000; overflow: hidden; margin: 6px 0 12px; display: grid; place-items: center; }
.s-scan .cadre { width: 150px; height: 150px; border-radius: 18px; position: relative; box-shadow: 0 0 0 999px rgba(0,0,0,0.55); }
.s-scan .cadre::before { content: ""; position: absolute; inset: 0; border: 3px solid var(--accent); border-radius: 18px; clip-path: polygon(0 0, 30% 0, 30% 3px, 3px 3px, 3px 30%, 0 30%, 0 70%, 3px 70%, 3px calc(100% - 3px), 30% calc(100% - 3px), 30% 100%, 70% 100%, 70% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 70%, 100% 70%, 100% 30%, calc(100% - 3px) 30%, calc(100% - 3px) 3px, 70% 3px, 70% 0, 100% 0, 100% 100%, 0 100%); }
.s-scan .ligne { position: absolute; left: 8%; right: 8%; height: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: scanner 1.8s ease-in-out infinite alternate; }
@keyframes scanner { from { top: 10%; } to { top: 88%; } }
.s-scan p { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: #fff; font-size: 12px; margin: 0; }
.s-avatar { width: 92px; height: 92px; border-radius: 50%; margin: 10px auto 6px; background: var(--surface-2); border: 2px solid var(--accent); display: grid; place-items: center; font-family: var(--titre); font-size: 38px; color: var(--accent); overflow: hidden; cursor: pointer; position: relative; padding-top: 4px; }
.s-avatar img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.s-bloc { background: var(--surface); border: 1px solid var(--bordure); border-radius: 14px; padding: 4px 14px; margin-top: 10px; }
.s-offre { border: 1.5px solid var(--bordure); border-radius: 16px; padding: 16px; margin-bottom: 10px; background: var(--surface); }
.s-offre.vedette { border-color: var(--accent); }
.s-offre h5 { margin: 0; font-family: var(--titre); font-size: 24px; font-weight: 400; letter-spacing: 0.02em; }
.s-offre p { margin: 2px 0 10px; color: var(--texte-attenue); font-size: 13px; }
.s-offre .prix { color: var(--lien); font-weight: 700; font-size: 15px; margin: 0 0 10px; }
.s-coorg { display: flex; align-items: center; gap: 10px; padding: 12px 0 6px; }
.s-coorg .ini { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--accent); border: 1px solid var(--bordure); }
.s-coorg b { flex: 1; font-weight: 600; font-size: 14px; }
.s-vide { text-align: center; color: var(--texte-attenue); padding: 26px 10px; font-size: 14px; border: 1px dashed var(--bordure); border-radius: 14px; }
.squelette { border-radius: 14px; height: 64px; margin-bottom: 8px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: chatoie 1.1s linear infinite; }
@keyframes chatoie { to { background-position: -200% 0; } }

/* Feuille de saisie (bottom sheet) */
.sim-voile { position: absolute; inset: 0; z-index: 20; background: rgba(5, 7, 12, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.sim-voile.ouvert { opacity: 1; pointer-events: auto; }
.sim-feuille {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 92%; overflow-y: auto;
  background: var(--fond); border-radius: 28px 28px 0 0; padding: 10px 20px 26px; border-top: 1px solid var(--bordure);
  transform: translateY(105%); transition: transform 0.45s var(--ease); box-shadow: 0 -20px 50px rgba(0,0,0,0.3);
}
.sim-feuille.ouvert { transform: none; }
.sim-feuille .poignee { width: 40px; height: 5px; border-radius: 9px; background: var(--bordure); margin: 0 auto 10px; }
.s-compteurs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: start; margin: 8px 0; }
.s-compteur { text-align: center; }
.s-compteur .nom { font-weight: 600; font-size: 14px; min-height: 40px; display: flex; align-items: center; justify-content: center; line-height: 1.2; }
.s-compteur .val { font-family: var(--titre); font-size: 64px; line-height: 1; margin: 6px 0; padding-top: 6px; }
.s-compteur .val.bump { animation: bump 0.3s var(--ease); }
@keyframes bump { 40% { transform: scale(1.25); color: var(--accent); } }
.s-compteur .ctrl { display: flex; justify-content: center; gap: 8px; }
.s-compteur .ctrl button { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--bordure); background: var(--surface-2); cursor: pointer; font-size: 24px; line-height: 1; transition: transform 0.12s; }
.s-compteur .ctrl button.plus { background: var(--accent); color: var(--accent-encre); border-color: var(--accent); }
.s-compteur .ctrl button:active { transform: scale(0.88); }
.s-compteur.petit .val { font-size: 40px; }
.s-compteur.petit .ctrl button { width: 40px; height: 40px; font-size: 20px; }
.s-tiret { font-family: var(--titre); font-size: 40px; color: var(--texte-attenue); padding-top: 54px; }
.s-statut { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.s-statut button { height: 46px; border-radius: 12px; border: 1.5px solid var(--bordure); background: var(--surface); cursor: pointer; font-weight: 600; }
.s-statut button.actif { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--lien); }
.s-erreur { color: var(--danger); font-size: 13px; margin: 8px 0 0; text-align: center; min-height: 18px; }

/* Toast */
.sim-toast {
  position: absolute; left: 16px; right: 16px; bottom: 22px; z-index: 40; padding: 13px 16px; border-radius: 14px;
  background: var(--texte); color: var(--fond); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 10px;
  transform: translateY(140%); opacity: 0; transition: transform 0.45s var(--ease), opacity 0.3s;
}
.sim-toast.visible { transform: none; opacity: 1; }
.sim-toast svg { width: 18px; height: 18px; color: var(--succes); flex-shrink: 0; }

/* ---------- Fonctionnalités (bento) ---------- */
.filtres { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--bordure); margin-bottom: 26px; }
.filtres button { border: 0; background: none; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--texte-attenue); transition: all 0.3s var(--ease); }
.filtres button.actif { background: var(--accent); color: var(--accent-encre); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tuile {
  position: relative; padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--bordure);
  overflow: hidden; transition: transform 0.45s var(--ease), opacity 0.45s var(--ease), border-color 0.3s;
  --mx: 50%; --my: 50%;
}
.tuile::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx) var(--my), var(--lueur), transparent 60%);
}
.tuile:hover::before { opacity: 1; }
.tuile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--bordure)); }
.tuile.large { grid-column: span 2; }
.tuile.estompe { opacity: 0.22; transform: scale(0.97); }
.tuile .icone { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); position: relative; }
.tuile .icone svg { width: 23px; height: 23px; }
.tuile h3 { font-size: 27px; margin: 0 0 6px; line-height: 1; position: relative; }
.tuile p { margin: 0; color: var(--texte-attenue); font-size: 15px; position: relative; }
.tuile .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; position: relative; }
.tuile .tags span { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--bordure); color: var(--texte-attenue); }
.tuile .tags span.premium { color: var(--lien); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tuile .essayer { position: relative; margin-top: 14px; background: none; border: 0; padding: 0; color: var(--lien); font-weight: 600; cursor: pointer; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.tuile .essayer svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.tuile .essayer:hover svg { transform: translateX(4px); }

/* ---------- Sports ---------- */
.sports-zone { display: grid; grid-template-columns: 300px 1fr; gap: 24px; }
.sports-liste { display: flex; flex-direction: column; gap: 8px; }
.sport-onglet {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; cursor: pointer; text-align: left;
  background: var(--fond); border: 1.5px solid var(--bordure); font-family: var(--titre); font-size: 26px; letter-spacing: 0.03em;
  transition: all 0.3s var(--ease);
}
.sport-onglet svg { width: 32px; height: 32px; color: var(--texte-attenue); transition: all 0.4s var(--ease); }
.sport-onglet:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--bordure)); }
.sport-onglet.actif { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--fond)); }
.sport-onglet.actif svg { color: var(--accent); transform: rotate(-14deg) scale(1.1); }
.sport-detail { background: var(--fond); border: 1px solid var(--bordure); border-radius: 22px; padding: 30px; position: relative; overflow: hidden; }
.sport-detail .grand-ico { position: absolute; right: -40px; top: -40px; width: 260px; height: 260px; color: var(--accent); opacity: 0.07; transition: transform 0.8s var(--ease); }
.sport-detail h3 { font-size: 52px; margin: 0 0 4px; line-height: 1; }
.sport-detail .vocab { color: var(--texte-attenue); margin: 0 0 24px; }
.bareme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; max-width: 460px; }
.bareme div { background: var(--surface); border: 1px solid var(--bordure); border-radius: 14px; padding: 12px; text-align: center; }
.bareme strong { display: block; font-family: var(--titre); font-size: 46px; line-height: 1; color: var(--accent); padding-top: 4px; }
.bareme span { font-size: 13px; color: var(--texte-attenue); }
.sport-detail h4 { font-family: var(--titre); font-weight: 400; font-size: 22px; margin: 0 0 8px; letter-spacing: 0.03em; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.puces span { padding: 6px 13px; border-radius: 99px; border: 1px solid var(--bordure); background: var(--surface); font-size: 14px; font-weight: 500; }
.sport-detail .anime { animation: apparaitre 0.5s var(--ease) backwards; }

/* ---------- Offres ---------- */
.offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.offre {
  padding: 28px; border-radius: 22px; background: var(--fond); border: 1px solid var(--bordure);
  display: flex; flex-direction: column; transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.offre:hover { transform: translateY(-6px); box-shadow: var(--ombre); }
.offre.vedette { border: 2px solid var(--accent); position: relative; }
.offre.vedette .ruban { position: absolute; top: -13px; left: 24px; background: var(--accent); color: var(--accent-encre); font-weight: 700; font-size: 12px; padding: 4px 12px; border-radius: 99px; letter-spacing: 0.04em; }
.offre h3 { font-size: 36px; margin: 0; line-height: 1; }
.offre .prix { font-weight: 600; color: var(--lien); margin: 6px 0 18px; font-size: 15px; }
.offre ul { list-style: none; padding: 0; margin: 0; }
.offre li { padding: 7px 0 7px 28px; position: relative; font-size: 15px; }
.offre li::before { content: ""; position: absolute; left: 3px; top: 13px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.offre li.non { color: var(--texte-attenue); }
.offre ul { flex: 1; }
.offre:has([data-offre]) { cursor: pointer; }
.offre-cta { margin-top: 22px; width: 100%; justify-content: center; }
/* Fenêtre « souscrire » : l'achat se fait dans l'app */
.voile-offre { position: fixed; inset: 0; z-index: 90; background: rgba(5, 7, 12, 0.6); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.voile-offre.ouvert { opacity: 1; pointer-events: auto; }
.fenetre-offre {
  position: fixed; left: 50%; top: 50%; z-index: 91; width: min(520px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 30px 26px 24px; border-radius: 24px; background: var(--fond); border: 1px solid var(--bordure); box-shadow: var(--ombre);
  transform: translate(-50%, -46%) scale(0.96); opacity: 0; pointer-events: none; transition: transform 0.45s var(--ease), opacity 0.25s;
}
.fenetre-offre.ouvert { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.fenetre-offre .surtitre { margin: 0 0 4px; }
.fenetre-offre h2 { font-size: 46px; margin: 0; line-height: 1; }
.fenetre-offre .sous { color: var(--texte-attenue); margin: 8px 0 18px; }
.fermer-offre { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bordure); background: var(--surface-2); color: var(--texte); cursor: pointer; display: grid; place-items: center; }
.fermer-offre svg { width: 16px; height: 16px; }
.fermer-offre:hover { border-color: var(--accent); }
.encart-offre { padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--bordure); }
.encart-offre h3 { font-size: 26px; margin: 0 0 6px; }
.encart-offre ol { margin: 0 0 10px; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.encart-offre li + li { margin-top: 4px; }
.encart-offre p { margin: 0; color: var(--texte-attenue); font-size: 14px; }
.stores-offre { display: flex; gap: 12px; margin-top: 18px; }
.store-offre { position: relative; flex: 1 1 0; padding: 10px 14px; border-radius: 12px; background: var(--texte); color: var(--fond); font-weight: 700; font-size: 18px; line-height: 1.15; }
.store-offre small { display: block; font-size: 11px; font-weight: 500; opacity: 0.75; }
.store-offre .bientot { position: absolute; top: -9px; right: -6px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-encre); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fenetre-offre .mention { margin-top: 14px; font-size: 12px; }
.actions-offre { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.actions-offre .bouton { flex: 1 1 auto; justify-content: center; }
body.fenetre-offre-ouverte { overflow: hidden; }
.offre li.non::before { border: 0; width: 12px; height: 2px; background: var(--texte-attenue); top: 18px; transform: none; }
.mention { font-size: 13px; color: var(--texte-attenue); margin-top: 22px; }

/* ---------- Aide ---------- */
.aide-grille { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
details { border-bottom: 1px solid var(--bordure); }
summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 600; font-size: 17px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 8px; top: 24px; width: 12px; height: 12px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 0.35s var(--ease); }
details[open] summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
details .reponse { overflow: hidden; }
details p { margin: 0 0 18px; color: var(--texte-attenue); }
.contact { position: sticky; top: 92px; padding: 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--bordure); }
.contact h3 { font-size: 34px; margin: 0 0 6px; line-height: 1; }
.contact p { margin: 0 0 20px; color: var(--texte-attenue); }
.contact .bouton { width: 100%; }

/* ---------- Pied de page ---------- */
footer { padding: 40px 0 50px; border-top: 1px solid var(--bordure); font-size: 13px; color: var(--texte-attenue); }
footer .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
footer nav a { color: var(--texte-attenue); text-decoration: none; }
footer nav a:hover { color: var(--texte); }

/* ---------- Grand écran ---------- */
.grand-ecran {
  position: fixed; inset: 0; z-index: 100; background: #0b0f18; color: #f3f2ed; padding: 28px 36px;
  display: none; flex-direction: column; gap: 22px; overflow: auto;
  --accent: #ebb517; --surface: #181d26; --bordure: #2d333d; --texte-attenue: #808693;
}
.grand-ecran.ouvert { display: flex; animation: zoomEntree 0.5s var(--ease); }
@keyframes zoomEntree { from { opacity: 0; transform: scale(1.03); } }
.ge-entete { display: flex; align-items: center; gap: 20px; }
.ge-entete .s-marque img { height: 56px; }
.ge-entete h2 { margin: 0; font-size: clamp(32px, 4vw, 56px); flex: 1; line-height: 1; padding-top: 4px; }
.ge-horloge { font-family: var(--titre); font-size: 44px; color: #ebb517; padding-top: 4px; }
.ge-code { text-align: center; font-size: 13px; color: #808693; }
.ge-code b { display: block; font-family: var(--titre); font-size: 30px; color: #f3f2ed; letter-spacing: 0.2em; font-weight: 400; }
.ge-fermer { border: 1px solid #2d333d; background: #181d26; color: #f3f2ed; border-radius: 12px; height: 48px; padding: 0 18px; cursor: pointer; font-weight: 600; }
.ge-grille { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 22px; flex: 1; min-height: 0; }
.ge-col { background: #121722; border: 1px solid #2d333d; border-radius: 22px; padding: 22px; overflow: auto; }
.ge-col > h3 { margin: 0 0 14px; font-size: 32px; color: #ebb517; }
.ge-col .s-tableau { background: #181d26; }
.ge-col .s-tableau table { font-size: 16px; }
.ge-col .s-tableau td:nth-child(2) { font-size: 17px; max-width: 220px; }
.ge-match { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #181d26; border: 1px solid #2d333d; margin-bottom: 10px; font-size: 18px; }
.ge-match .eq { flex: 1; font-weight: 600; }
.ge-match small { display: block; font-size: 13px; color: #808693; font-weight: 500; }
.ge-match .sc { font-family: var(--titre); font-size: 40px; padding-top: 4px; }
.ge-match.live { border-color: #ebb517; box-shadow: 0 0 0 3px rgba(235, 181, 23, 0.15); }
.ge-match.maj { animation: majMatch 1.4s var(--ease); }

/* ---------- Impression (export PDF) ---------- */
.impression { display: none; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; color: #11161f !important; }
  body > *:not(.impression) { display: none !important; }
  .impression { display: block !important; font-family: var(--corps); color: #11161f; }
  .impression h1 { font-family: var(--titre); font-size: 40px; margin: 0; animation: none; }
  .impression .meta { color: #646972; margin: 0 0 18px; }
  .impression h2 { font-family: var(--titre); font-size: 24px; color: #9a6700; margin: 20px 0 6px; border-bottom: 2px solid #ebb517; }
  .impression table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .impression td, .impression th { border-bottom: 1px solid #d3d8e0; padding: 6px 4px; text-align: left; }
  .impression .pied { margin-top: 24px; font-size: 11px; color: #646972; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .simulateur { grid-template-columns: 1fr; }
  .guide { position: static; order: 2; }
  .telephone-sim { margin: 0 auto; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .aide-grille { grid-template-columns: 1fr; }
  .contact { position: static; }
  .ge-grille { grid-template-columns: 1fr 1fr; }
  .ge-grille .ge-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .espace { grid-template-columns: 1fr; gap: 32px; }
  .nav-principale { display: none; }
  .heros .conteneur { grid-template-columns: 1fr; }
  .scene-heros { margin-top: 10px; }
  .bulle.b1 { left: 0; }
  .bulle.b2 { right: 0; }
  .etapes, .offres { grid-template-columns: 1fr; }
  .chiffres, .donnees { grid-template-columns: 1fr 1fr; }
  .appel-sim { flex-direction: column; align-items: flex-start; padding: 24px; }
  .chiffres div:nth-child(3) { border-left: 0; }
  .chiffres div:nth-child(n+3) { border-top: 1px solid var(--bordure); }
  .ordi-m { grid-template-columns: 22px minmax(0, 1fr) 50px minmax(0, 1fr); }
  .ordi-t { display: none; }
  .etapes-ligne { display: none; }
  .sports-zone { grid-template-columns: 1fr; }
  .sports-liste { flex-direction: row; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .sport-onglet { flex-shrink: 0; font-size: 22px; padding: 10px 14px; }
  .sport-onglet svg { width: 26px; height: 26px; }
}
@media (max-width: 640px) {
  .barre-flottante { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 70; display: flex; gap: 8px; padding: 8px; border-radius: 16px;
    background: color-mix(in srgb, var(--surface-2) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--bordure); box-shadow: 0 10px 30px rgba(5, 8, 15, 0.25);
    transform: translateY(140%); transition: transform 0.45s var(--ease); }
  .barre-flottante.visible { transform: none; }
  .barre-flottante .bouton { flex: 1; justify-content: center; padding-left: 8px; padding-right: 8px; font-size: 17px; }
  section { padding: 72px 0; }
  .conteneur { padding: 0 16px; }
  .cta-entete { display: none; }
  .lien-espace span { display: none; }
  .lien-espace { padding: 0 11px; }
  .bento { grid-template-columns: 1fr; }
  .tuile.large { grid-column: auto; }
  .missions { grid-template-columns: 1fr; }
  .telephone-sim { width: 100%; height: min(780px, 86svh); min-height: 600px; border-radius: 40px; padding: 8px; }
  .telephone-sim::before { top: 16px; }
  .sim { border-radius: 33px; }
  .sim-ecran { padding: 6px 16px 40px; }
  .sport-detail { padding: 22px; }
  .sport-detail h3 { font-size: 42px; }
  .bulle { display: none; }
  .ge-grille { grid-template-columns: 1fr; }
  .grand-ecran { padding: 18px; }
  .ge-entete { flex-wrap: wrap; }
  .ge-code { display: none; }
  .boutons-store { gap: 10px; }
  .bouton-store { min-width: 0; flex: 1 1 0; gap: 9px; padding: 11px 10px 11px 12px; white-space: nowrap; }
  .bouton-store small { font-size: 10.5px; }
  .bouton-store strong { font-size: 16px; }
  .bouton-store svg { width: 22px; height: 22px; }
  .s-actions { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .s-action { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveler { opacity: 1; transform: none; }
  h1 .ligne > span { transform: none; }
}

/* Compléments du simulateur */
.s-scan p svg { width: 14px; height: 14px; vertical-align: -2px; }
.s-interrupteur > svg { width: 18px; height: 18px; color: var(--texte-attenue); }
.bento { grid-auto-flow: dense; }
.s-pas button svg, .s-compteur .ctrl button svg { width: 18px; height: 18px; }
.s-compteur .ctrl button { display: inline-grid; place-items: center; }
.ge-col .s-tableau th, .ge-col .s-tableau td { padding-left: 6px; padding-right: 6px; }
.grand-ecran { --texte: #f3f2ed; --surface-2: #212730; --lueur: rgba(235, 181, 23, 0.16); }