/* LES POLICES : servies par la vitrine elle-même, aucun tiers. */
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url('fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: italic; font-display: swap; src: url('fonts/barlow-condensed-latin-800-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
/* LA VITRINE DE VELOX (velox.events), refonte du 25/09/2026.
   La page est un programme de tournoi : une frise horaire en tête (J-30, J-1, 09:00, 14:00, 18:40, Après,
   Tarifs) sert de menu, et un trait « maintenant » y avance pendant la lecture. Chaque moment de la journée
   a son chapitre : le texte à gauche, VELOX en direct à droite. Même monde que le questionnaire de l'étude :
   noir chaud, orange de course seul accent, aplats sans dégradé, pictogrammes maison. */
:root {
  --braise: #14110f; --braise-2: #1c1815; --braise-3: #27211d; --braise-4: #3a302a; --braise-5: #52453c;
  --scene: #0d0b0a; --objet: #181412;
  --sur-noir: #f4efeb; --sur-noir-2: #d3cac2; --sur-noir-3: #a59a91;
  --orange: #ff4d00; --orange-2: #ff7a3d; --orange-doux: rgba(255, 77, 0, .14); --encre-orange: #160800;
  --vert: #3ecf7a; --ambre: #f0b35a; --rouge: #ff6b5b;
  --impact: 'Barlow Condensed', 'Arial Narrow', sans-serif; --corps: 'Barlow', 'Segoe UI', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --doux: cubic-bezier(.2, .8, .2, 1);
  --ombre-objet: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 40px 80px -32px rgba(0, 0, 0, .85);
  --page: 1320px; --marge: clamp(20px, 4vw, 56px); --tete: 76px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--tete) + 16px); }
html, body { margin: 0; overflow-x: clip; }
body { background: var(--braise); color: var(--sur-noir); font: 17px/1.6 var(--corps); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(255, 77, 0, .35); }

/* ================= La tête : logo, frise horaire, actions ================= */
.tete { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 48px); height: var(--tete); padding: 0 var(--marge); background: rgba(20, 17, 15, .96); border-bottom: 1px solid var(--braise-3); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sur-noir); font: italic 800 26px var(--impact); letter-spacing: .04em; }
.barres { display: inline-flex; gap: 3px; } .barres i { width: 7px; height: 18px; background: var(--orange); transform: skewX(-18deg); }
.barres i:nth-child(2) { opacity: .7; } .barres i:nth-child(3) { opacity: .45; }

.frise { position: relative; max-width: 860px; width: 100%; justify-self: center; }
.frise ol { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); }
.frise a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px 20px; text-decoration: none; color: var(--sur-noir-3); font-size: 12px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; border-radius: 8px; transition: color .2s; }
.frise a b { font-size: 13px; font-weight: 500; color: var(--sur-noir-2); transition: color .2s; }
.frise a:hover, .frise a:hover b { color: var(--sur-noir); }
.frise a[aria-current="step"] { color: var(--sur-noir); }
.frise a[aria-current="step"] b { color: var(--orange); }
.frise a.passe b { color: var(--sur-noir); }
/* Le rail : ce qui est passé se remplit, et le trait « maintenant » avance avec la lecture. */
.frise-rail { position: absolute; left: 0; right: 0; bottom: 12px; height: 2px; border-radius: 999px; background: var(--braise-3); }
.frise-rail::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--orange); transform-origin: left; transform: scaleX(var(--rempli, 0)); }
.frise-maintenant { position: absolute; top: -6px; left: 0; width: 2px; height: 14px; border-radius: 2px; background: var(--sur-noir); box-shadow: 0 0 10px rgba(244, 239, 235, .6); transform: translateX(var(--x, 0)); }
.frise-maintenant em { position: absolute; top: 15px; color: var(--orange-2); left: 50%; transform: translateX(-50%); font-size: 9px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-noir-2); white-space: nowrap; }
/* Le curseur se saisit (28/09/2026) : une poignée ronde apparaît au survol, la zone de prise déborde le trait
   (2 px ne se visent pas), et toute la ligne du rail sert à faire défiler la page, à la souris comme au doigt. */
.frise-rail { cursor: pointer; touch-action: none; }
.frise-rail::after { content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 20px; }
.frise-maintenant { cursor: grab; outline: none; }
.frise-maintenant::after { content: ''; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 999px; }
.frise-maintenant::before { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 999px; background: var(--sur-noir);
  box-shadow: 0 0 0 3px rgba(255, 77, 0, .35); transform: translate(-50%, -50%) scale(0); transition: transform .2s; }
.frise:hover .frise-maintenant::before, .frise-maintenant:focus-visible::before, .frise-glisse .frise-maintenant::before { transform: translate(-50%, -50%) scale(1); }
.frise-maintenant:focus-visible { box-shadow: 0 0 0 2px var(--orange); }
.frise-glisse, .frise-glisse * { cursor: grabbing !important; user-select: none; }
.tete-actions { display: flex; align-items: center; gap: 18px; }
.lien-discret { font-size: 15px; font-weight: 500; color: var(--sur-noir-2); text-decoration: none; }
.lien-discret:hover { color: var(--sur-noir); }

/* ================= Les boutons ================= */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 14px; border: 1px solid var(--orange); background: var(--orange); color: var(--encre-orange); font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  box-shadow: 0 12px 28px -12px rgba(255, 77, 0, .6); transition: transform .15s var(--doux), box-shadow .15s, background .15s, border-color .15s, color .15s; }
.bouton:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(255, 77, 0, .7); }
.bouton span { transition: transform .15s var(--doux); } .bouton:hover span { transform: translateX(4px); }
.bouton.clair { background: transparent; border-color: var(--braise-4); color: var(--sur-noir); box-shadow: none; }
.bouton.clair:hover { border-color: var(--braise-5); background: var(--braise-2); }
.bouton.petit { min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; box-shadow: none; }
.bouton .ico { width: 20px; height: 20px; }
.lien-fleche { color: var(--sur-noir); font-weight: 600; text-decoration: none; background: linear-gradient(var(--orange), var(--orange)) 0 100% / 100% 2px no-repeat; padding-bottom: 2px; }
.lien-fleche:hover { color: var(--orange-2); }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ================= Les chapitres ================= */
.chapitre { max-width: var(--page); margin: 0 auto; padding: clamp(88px, 13vh, 150px) var(--marge); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.chapitre + .chapitre, .jouer + .chapitre { border-top: 1px solid var(--braise-3); }
.texte { display: flex; flex-direction: column; gap: 24px; }
.vue { position: sticky; top: calc(var(--tete) + 32px); display: flex; flex-direction: column; gap: 18px; }
.heure { display: flex; align-items: baseline; gap: 16px; }
.heure b { font-size: clamp(26px, 2.4vw, 38px); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--orange); }
.heure span { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sur-noir-3); }
h1 { font: italic 800 clamp(46px, min(11vw, 5.2vw + 22px), 104px)/.88 var(--impact); text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; }
h1 em { display: block; color: var(--orange); font-style: italic; }
h2 { font: italic 800 clamp(36px, min(9.5vw, 3.6vw + 22px), 68px)/.92 var(--impact); text-transform: uppercase; text-wrap: balance; }
h2 em { color: var(--orange); font-style: italic; }
h3 { font: italic 800 28px/1 var(--impact); text-transform: uppercase; }
.chapeau { font-size: 19px; line-height: 1.6; color: var(--sur-noir-2); max-width: 54ch; }
.aparte { font-size: 16px; color: var(--sur-noir-3); max-width: 56ch; }
.aparte a { color: var(--sur-noir); }
.discret { font-size: 14px; color: var(--sur-noir-3); }
.points { display: flex; flex-direction: column; gap: 22px; margin-top: 12px; padding-top: 28px; border-top: 1px solid var(--braise-3); }
.points li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; }
.points .ico { width: 26px; height: 26px; color: var(--orange-2); margin-top: 2px; }
.points b { display: block; font-size: 17px; font-weight: 600; color: var(--sur-noir); margin-bottom: 2px; }
.points p { font-size: 16px; color: var(--sur-noir-2); max-width: 54ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Le départ : le premier écran. */
.slogan { font: italic 800 20px var(--impact); letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }

/* Les aperçus, repris du questionnaire : ici ils vivent dans leur chapitre, et s'animent à l'écran. */
.apercu { width: 100%; display: flex; flex-direction: column; gap: 18px; }

/* J-15 : le suivi de l'édition (offre Pro ; maquette du 15/10/2026). Un aperçu fixe : rien ne s'anime. */
.su-carte { border-radius: 20px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #2f2722; padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 16px; }
.su-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.su-tete b { font: italic 800 17px var(--impact); text-transform: uppercase; letter-spacing: .02em; }
.su-pro { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-2); border: 1px solid currentColor; border-radius: 999px; padding: 2px 10px; }
.su-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.su-ch { background: #27211d; border-radius: 12px; padding: 12px 14px; }
.su-ch b { display: block; font: 500 26px/1.1 var(--mono); font-variant-numeric: tabular-nums; color: var(--sur-noir); }
.su-ch b.or { color: var(--orange-2); }
.su-ch small { font-size: 12px; color: var(--sur-noir-3); line-height: 1.3; display: block; margin-top: 4px; }
.su-courbe { width: 100%; height: auto; display: block; overflow: visible; }
.su-courbe text { font: 500 10px var(--mono); fill: var(--sur-noir-3); }
.su-courbe .grille { stroke: #2a2320; }
.su-courbe .cette { fill: none; stroke: var(--orange); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.su-courbe .aire { fill: var(--orange); opacity: .1; }
.su-courbe .avant { fill: none; stroke: var(--sur-noir-3); stroke-width: 1.6; stroke-dasharray: 4 4; }
.su-courbe .pt { fill: var(--orange); stroke: var(--objet); stroke-width: 2; }
.su-courbe .auj { stroke: var(--sur-noir-2); stroke-dasharray: 2 3; }
.su-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--sur-noir-3); }
.su-leg i { display: inline-block; width: 16px; border-top: 2.5px solid var(--orange); vertical-align: middle; margin-right: 6px; }
.su-leg i.av { border-top: 2px dashed var(--sur-noir-3); }
.su-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; border-top: 1px solid #2a2320; padding-top: 14px; }
.su-bas p { font-size: 13px; color: var(--sur-noir-2); line-height: 1.45; }
.su-bas p b { color: var(--sur-noir); font-family: var(--mono); font-weight: 500; }
.su-jauge { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #3a302a; margin-top: 8px; }
.su-jauge i { width: var(--p, 0); background: var(--orange); }
@media (max-width: 560px) {
  .su-carte { padding: 16px 14px 14px; }
  .su-chiffres { gap: 8px; }
  .su-ch { padding: 10px; }
  .su-ch b { font-size: 21px; }
  .su-bas { grid-template-columns: minmax(0, 1fr); }
}

/* J-30 : qui a payé. */
.payes { border-radius: 18px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #2f2722; padding: 14px 18px 16px; }
.payes-tete { display: flex; justify-content: space-between; font: italic 800 16px var(--impact); text-transform: uppercase; margin-bottom: 10px; }
.payes-tete .mono { font: 500 12px var(--mono); font-style: normal; color: var(--sur-noir-3); }
.payes li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; border-top: 1px solid #2a2320; }
.payes em { font-style: normal; font-size: 12px; font-weight: 600; }
.payes em > span:not(.swap), .payes em.ok, .payes em.du, .payes .swap { padding: 3px 10px; border-radius: 999px; }
.payes .ok { background: rgba(62, 207, 122, .14); color: var(--vert); }
.payes .du { background: rgba(240, 179, 90, .14); color: var(--ambre); }
.payes .relance { background: var(--orange-doux); color: var(--orange-2); }

/* 09:00 : l'écran du club, et le téléphone devant. */
.vue-jourj { padding-bottom: 170px; }
.vue-jourj [data-vue="tel"] { position: absolute; right: -28px; bottom: 0; width: auto; }
.vue-jourj [data-vue="tel"] .legende { display: none; }
.vue-jourj [data-vue="tel"] .tel { transform: scale(.66); transform-origin: bottom right; margin: 0; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .95), inset 0 0 0 1.5px #3b3430, inset 0 0 0 3px #0b0a09, 0 0 0 10px var(--braise); }

/* 14:00 : les contrôles. */
.alertes { border-radius: 20px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #2f2722; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.al-tete { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #2a2320; }
.al-tete b { font: italic 800 17px var(--impact); text-transform: uppercase; }
.al-tete .swap { font: 600 11px var(--mono); letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; }
.al-tete .attention { background: rgba(240, 179, 90, .14); color: var(--ambre); }
.al-tete .ok { background: rgba(62, 207, 122, .14); color: var(--vert); }
.al { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--braise-3); opacity: .12; transform: translateY(6px); transition: opacity .4s var(--doux), transform .4s var(--doux), background .4s; }
.al.on { opacity: 1; transform: none; }
.al b { display: block; font-size: 15px; font-weight: 600; }
.al small { font-size: 13px; color: var(--sur-noir-3); }
.al-ico { width: 30px; height: 30px; border-radius: 50%; background: rgba(240, 179, 90, .16); position: relative; transition: background .3s; }
.al-ico::before { content: ''; position: absolute; left: 14px; top: 8px; width: 2px; height: 9px; border-radius: 2px; background: var(--ambre); box-shadow: 0 12px 0 var(--ambre); }
.al-geste { font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; }
.al-geste .swap { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--braise-4); color: var(--sur-noir); }
.al-geste .regle { background: rgba(62, 207, 122, .14); color: var(--vert); }
.al:has(.regle.on) { background: #1f1a17; }
.al:has(.regle.on) b { color: var(--sur-noir-2); }
.al:has(.regle.on) .al-ico { background: rgba(62, 207, 122, .16); }
.al:has(.regle.on) .al-ico::before { left: 11px; top: 8px; width: 6px; height: 11px; border: solid var(--vert); border-width: 0 2px 2px 0; border-radius: 0; background: none; box-shadow: none; transform: rotate(45deg); }
.al-pied { font-size: 11px; color: var(--sur-noir-3); padding-top: 4px; }

/* 18:40 : le podium, aux couleurs d'un club. */
.podium-carte { border-radius: 20px; overflow: hidden; background: #0f2a22; box-shadow: var(--ombre-objet); }
.po-bandeau { display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: #135b43; }
.po-logo { width: 52px; height: 52px; border-radius: 14px; background: #f2c14e; color: #0f2a22; display: grid; place-items: center; font: italic 800 22px var(--impact); flex: none; }
.po-bandeau b { display: block; font: italic 800 28px/1 var(--impact); text-transform: uppercase; }
.po-bandeau small { color: rgba(255, 255, 255, .72); font-size: 14px; }
.po-marches { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; padding: 36px 22px 0; min-height: 280px; }
.po-m { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 14px 8px; border-radius: 14px 14px 0 0; background: rgba(255, 255, 255, .08); text-align: center; font-size: 14px; font-weight: 600; transform-origin: bottom; transform: scaleY(.08); opacity: .3; transition: transform .7s var(--doux), opacity .4s; }
.po-m.on { transform: none; opacity: 1; }
.po-m b { font: 800 36px/1 var(--impact); color: #f2c14e; }
.po-m small { font-size: 11px; color: rgba(255, 255, 255, .7); }
.po-m.p1 { height: 210px; background: rgba(242, 193, 78, .2); }
.po-m.p2 { height: 160px; } .po-m.p3 { height: 124px; }
.po-pied { display: flex; justify-content: space-between; gap: 12px; padding: 12px 22px; background: rgba(0, 0, 0, .28); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

/* Après : le parcours. */
.carriere { border-radius: 20px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #2f2722; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.car-haut { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: center; }
.car-niveau { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.car-niveau svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.car-niveau circle { fill: none; stroke: var(--braise-4); stroke-width: 8; }
.car-niveau .val { stroke: var(--orange); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.4s var(--doux); }
.en-vue .car-niveau .val { stroke-dashoffset: 172; }
.car-niveau b { font-size: 34px; font-weight: 500; line-height: 1; margin-top: -8px; }
.car-niveau small { position: absolute; bottom: 34px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sur-noir-3); }
.car-qui b { display: block; font: italic 800 32px/1 var(--impact); text-transform: uppercase; }
.car-qui span { display: block; margin-top: 6px; font-weight: 600; color: var(--orange-2); }
.car-qui small { font-size: 13px; color: var(--sur-noir-3); }
.car-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.car-badges li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--braise-3); font-size: 13px; font-weight: 500; }
.car-badges .ico { width: 20px; height: 20px; color: var(--orange-2); }
.car-badges .verrou { background: transparent; box-shadow: inset 0 0 0 1px var(--braise-4); color: var(--sur-noir-3); }
.car-badges .verrou .ico { color: var(--sur-noir-3); }
.car-tournois { display: flex; flex-direction: column; }
.car-tournois li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid #2a2320; font-size: 14px; }
.car-tournois .mono { font-size: 12px; color: var(--sur-noir-3); }
.car-tournois em { font: italic 800 20px var(--impact); color: var(--orange-2); }


/* ================= À vous de jouer : la démo du planning ================= */
.jouer { background: var(--scene); border-top: 1px solid var(--braise-3); border-bottom: 1px solid var(--braise-3); padding: clamp(80px, 12vh, 130px) var(--marge); }
.jouer > * { max-width: var(--page); margin-left: auto; margin-right: auto; }
.jouer-texte { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.org { border-radius: 22px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #2f2722; padding: clamp(14px, 2vw, 24px); }
.org-grille { display: grid; grid-template-columns: 64px repeat(4, minmax(0, 1fr)); gap: 8px; }
.org-coin { min-height: 1px; }
.org-tete { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sur-noir-3); text-align: center; padding: 4px 0 6px; }
.org-heure { font-size: 13px; color: var(--sur-noir-2); align-self: center; }
.org-case { min-height: 84px; border-radius: 12px; border: 1px dashed var(--braise-4); display: flex; transition: background .15s, border-color .15s; }
.org-case.cible { border-color: rgba(255, 77, 0, .45); cursor: pointer; }
.org-case.cible:hover, .org-case.survol { background: var(--orange-doux); border-color: var(--orange); }
.org-match { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 12px; border-radius: 11px; border: 1px solid #3a302a; background: var(--braise-3); text-align: left; cursor: grab; font-size: 14px; font-weight: 600; line-height: 1.25; transition: transform .15s var(--doux), box-shadow .15s, border-color .15s, background .15s; }
.org-match:hover { border-color: var(--braise-5); }
.org-vs { font-size: 11px; font-weight: 500; color: var(--sur-noir-3); text-transform: uppercase; letter-spacing: .08em; }
.org-match.prise { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange), 0 18px 30px -16px rgba(255, 77, 0, .7); transform: translateY(-2px); background: #2a1a12; }
.org-match.conflit { border-color: var(--rouge); background: rgba(255, 107, 91, .12); }
.org-match.conflit .org-vs { color: var(--rouge); }
.org-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #2a2320; }
.org-etat { font-size: 15px; color: var(--sur-noir-2); }
.org-etat.alerte { color: var(--rouge); font-weight: 600; }
.org-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.org-actions .bouton { min-height: 44px; font-size: 15px; box-shadow: none; }

/* ================= Les sports ================= */
.sports { max-width: var(--page); margin: 0 auto; padding: clamp(88px, 13vh, 150px) var(--marge); border-top: 1px solid var(--braise-3); }
.sports-tete { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: end; margin-bottom: 48px; }
.nouveautes { margin-top: 72px; display: grid; grid-template-rows: auto 1fr; align-items: start; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: 16px clamp(40px, 6vw, 104px); }
.nouveautes p { color: var(--sur-noir-2); max-width: 46ch; }
.nouveautes li[hidden] { display: none; }
.nouveautes ol { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
.nouveautes li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--braise-3); font-size: 16px; color: var(--sur-noir-2); }
.nouveautes li .mono { font-size: 13px; color: var(--orange-2); padding-top: 2px; }

/* ================= La démo : le seul grand aplat orange de la page ================= */
.demo { background: var(--orange); color: var(--encre-orange); padding: clamp(64px, 10vh, 110px) var(--marge); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 104px); align-items: end; }
.demo > * { max-width: calc(var(--page) / 2); }
.demo > div:first-child { justify-self: end; width: 100%; display: flex; flex-direction: column; gap: 20px; }
.demo .heure b, .demo .heure span { color: var(--encre-orange); }
.demo .heure span { opacity: .7; }
.demo h2 { color: var(--encre-orange); }
.demo .chapeau { color: #3a1500; }
.demo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.demo .bouton { background: var(--encre-orange); border-color: var(--encre-orange); color: var(--sur-noir); box-shadow: 0 16px 30px -16px rgba(22, 8, 0, .8); }
.demo .bouton.clair { background: transparent; border-color: rgba(22, 8, 0, .5); color: var(--encre-orange); box-shadow: none; }
.demo .bouton.clair:hover { background: rgba(22, 8, 0, .08); }

/* ================= Les tarifs, sans prix tant que l'étude tourne ================= */
.tarifs { max-width: var(--page); margin: 0 auto; padding: clamp(88px, 13vh, 150px) var(--marge); }
.tarifs-tete { display: flex; flex-direction: column; gap: 20px; max-width: 880px; margin-bottom: 56px; }
.tarifs-tete h2 { font-size: clamp(34px, min(9vw, 2.8vw + 20px), 60px); }
.tarifs-tete h2 em { display: block; }
.offres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.offre { padding-top: 22px; box-shadow: 0 -2px 0 var(--braise-4); }
.offre.forte { box-shadow: 0 -2px 0 var(--orange); }
.offre-nom { font: italic 800 30px/1 var(--impact); text-transform: uppercase; }
.offre-pour { margin-top: 8px; color: var(--sur-noir-2); }
.offre ul { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.offre li { position: relative; padding-left: 28px; font-size: 16px; color: var(--sur-noir-2); }
.offre li::before { content: ''; position: absolute; left: 3px; top: .45em; width: 6px; height: 11px; border: solid var(--orange-2); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.offre-prix { border-radius: 20px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #3d2a1f; padding: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.offre-prix .offre-nom { color: var(--orange); }
.prix-titre { font: italic 800 26px/1.05 var(--impact); text-transform: uppercase; }
.avis-prix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 32px; padding: 28px 32px; border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); border-radius: 16px; }
.avis-titre { font: italic 800 26px/1.05 var(--impact); text-transform: uppercase; }
.avis-texte { margin-top: 8px; color: var(--sur-noir-2); font-size: 16px; }
.avis-prix .bouton { background: transparent; border: 1px solid var(--orange); box-shadow: none; color: var(--sur-noir); }
.offre-prix p:not(.offre-nom):not(.prix-titre) { color: var(--sur-noir-2); font-size: 16px; }
.engagement { margin-top: 44px; display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--sur-noir-3); }
.engagement .ico { color: var(--orange-2); }

/* ================= Les questions ================= */
.questions { max-width: var(--page); margin: 0 auto; padding: clamp(72px, 11vh, 120px) var(--marge); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); border-top: 1px solid var(--braise-3); }
.questions h2 { position: sticky; top: calc(var(--tete) + 32px); align-self: start; }
.faq details { border-top: 1px solid var(--braise-3); }
.faq details:last-child { border-bottom: 1px solid var(--braise-3); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: 18px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--orange-2), var(--orange-2)) center / 14px 2px no-repeat, linear-gradient(var(--orange-2), var(--orange-2)) center / 2px 14px no-repeat; transition: transform .25s var(--doux); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--sur-noir-2); max-width: 62ch; }

/* ================= Les clubs fondateurs ================= */
.fondateurs { max-width: var(--page); margin: 0 auto; padding: clamp(88px, 13vh, 150px) var(--marge); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); border-top: 1px solid var(--braise-3); }
.fondateurs-texte { display: flex; flex-direction: column; gap: 20px; }
.attente { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #2f2722; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ > span { font-size: 14px; font-weight: 600; color: var(--sur-noir-2); }
.champ small { font-weight: 400; color: var(--sur-noir-3); margin-left: 4px; }
.champ input, .champ select, .champ textarea { background: var(--braise-2); border: 1px solid var(--braise-4); border-radius: 12px; padding: 12px 14px; font-size: 16px; color: var(--sur-noir); }
.champ textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--sur-noir-3); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-doux); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.attente-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.retour { font-size: 15px; color: var(--sur-noir-2); }
.retour.erreur { color: var(--orange-2); }
.retour.ok { color: var(--vert); }
.nom:not(.on) { background: var(--braise-4); animation: attente-aplat 1.4s ease-in-out infinite; }
@keyframes attente-aplat { 50% { opacity: .45; } }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= Le pied ================= */
.pied { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 40px var(--marge); border-top: 1px solid var(--braise-3); color: var(--sur-noir-3); font-size: 14px; }
.pied > p:first-of-type { font: italic 800 16px var(--impact); text-transform: uppercase; letter-spacing: .04em; color: var(--sur-noir-2); }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
.pied nav a { text-decoration: none; }
.pied nav a:hover { color: var(--sur-noir); }

/* ================= Les aperçus de VELOX, repris du questionnaire validé (velox.events/etude) ================= */
.legende { display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 13px var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--sur-noir-3); text-align: center; }
.pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(255, 77, 0, .6); animation: pouls 1.8s infinite; flex: none; }
@keyframes pouls { 70% { box-shadow: 0 0 0 8px rgba(255, 77, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 0, 0); } }
.swap:not(.on) { display: none; }
.bump { animation: bump .45s var(--doux); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: var(--orange); } 100% { transform: scale(1); } }

/* L'écran du club : un cadre, six sports qui se succèdent. */
.ecran { display: grid; border-radius: 20px; overflow: hidden; background: #181412; border: 1px solid #2f2722; box-shadow: var(--ombre-objet), 0 0 0 8px #080706; min-height: 318px; }
.sport { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity .45s var(--doux), transform .5s var(--doux), visibility 0s .5s; }
.sport.actif { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--doux), transform .5s var(--doux), visibility 0s; }
.sb-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #2c2420; font: italic 800 17px var(--impact); text-transform: uppercase; letter-spacing: .02em; }
.sb-tag { font: 500 11px var(--mono); font-style: normal; letter-spacing: .08em; color: var(--orange); padding: 4px 8px; border-radius: 6px; background: var(--orange-doux); white-space: nowrap; }
.sb-bas { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid #2c2420; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sur-noir-3); min-height: 44px; }
.sb-flash { color: var(--orange); font-family: var(--mono); }
.sb-flash:not(:empty) { animation: bump .5s var(--doux); }
.balle { width: 9px; height: 9px; border-radius: 50%; background: #d8f25a; box-shadow: 0 0 10px rgba(216, 242, 90, .55); display: inline-block; flex: none; visibility: hidden; }

/* Padel : un tableau de sets serré. */
.pd { padding: 22px 18px 10px; display: flex; flex-direction: column; gap: 8px; }
.pd-tete, .pd-l { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px 44px 64px; gap: 6px; align-items: center; }
.pd-tete span { text-align: center; font: 500 11px var(--mono); color: var(--sur-noir-3); }
.pd-l { padding: 10px 0; }
.pd-l + .pd-l { border-top: 1px solid #2c2420; }
.pd-nom { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-l.sert .balle { visibility: visible; }
.pd-s { text-align: center; font: 700 30px/1 var(--impact); }
.pd-s.perdu { color: var(--sur-noir-3); }
.pd-s.cur { color: var(--sur-noir); background: var(--braise-3); border-radius: 8px; padding: 6px 0; }
.pd-pt { text-align: center; font-size: 24px; font-weight: 600; color: #160800; background: var(--orange); border-radius: 10px; padding: 6px 0; display: block; }
.pd-l + .pd-l .pd-pt { background: var(--braise-3); color: var(--sur-noir); }

/* Tennis : le point en très grand. */
.tn { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 34px 22px 6px; }
.tn-joueur { display: flex; flex-direction: column; gap: 2px; position: relative; }
.tn-joueur b { font: italic 800 30px/1 var(--impact); text-transform: uppercase; }
.tn-joueur small { font-size: 12px; color: var(--sur-noir-3); letter-spacing: .04em; }
.tn-joueur .balle { visibility: visible; position: absolute; top: -16px; left: 0; }
.tn-joueur.droite { text-align: right; }
.tn-points { display: flex; align-items: center; gap: 10px; font-size: 58px; font-weight: 600; line-height: 1; }
.tn-points span { display: inline-block; min-width: 1.6ch; text-align: center; }
.tn-points em { font-style: normal; color: var(--braise-5); font-size: 40px; }
.tn-annonce { text-align: center; font: 600 13px var(--corps); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); min-height: 22px; padding-top: 6px; }
.tn-sets { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 14px 18px 18px; margin-top: auto; border-top: 1px solid #2c2420; }
.tn-sets span { font-family: var(--corps); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-noir-3); margin-right: 6px; }
.tn-sets b { padding: 6px 12px; border-radius: 8px; background: var(--braise-3); font-size: 15px; font-weight: 600; }
.tn-sets b.perdu { color: var(--sur-noir-3); background: transparent; box-shadow: inset 0 0 0 1px var(--braise-4); }
.tn-sets b.cur { background: var(--orange-doux); color: var(--orange-2); }

/* Football : le score, le chrono, les buteurs. */
.ft { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 24px 18px 12px; }
.ft-eq { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ft-eq b { font: italic 800 20px/1.05 var(--impact); text-transform: uppercase; }
.ecusson { width: 44px; height: 50px; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.ecusson.e1 { background: linear-gradient(90deg, #1f6f4a 50%, #f2c14e 50%); }
.ecusson.e2 { background: linear-gradient(180deg, #2b4a9b 50%, #e8e2da 50%); }
.ft-score { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ft-nb { display: flex; align-items: center; gap: 10px; font: 700 64px/1 var(--impact); }
.ft-nb .mono { font-family: var(--impact); display: inline-block; }
.ft-nb em { font-style: normal; color: var(--braise-5); }
.ft-chrono { font-size: 15px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--braise-3); color: var(--sur-noir); display: inline-flex; align-items: center; gap: 8px; }
.ft-chrono::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); animation: vacille 1.4s infinite; }
.ft-faits { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 4px 18px 14px; font-size: 13px; color: var(--sur-noir-2); }
.ft-faits li { display: inline-flex; gap: 6px; align-items: baseline; }
.ft-faits .mono { color: var(--orange-2); font-size: 12px; }
.ft-faits small { color: var(--sur-noir-3); }
.ft-faits li.nouveau { animation: bump .6s var(--doux); color: var(--sur-noir); }

/* Basket 3x3 : deux scores, deux chronos. */
.bk { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 24px 22px 16px; }
.bk-eq { display: flex; flex-direction: column; gap: 6px; }
.bk-eq.droite { align-items: flex-end; text-align: right; }
.bk-eq small { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-noir-2); }
.bk-eq b { font: 700 76px/.9 var(--impact); display: inline-block; }
.bk-barre { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--braise-3); overflow: hidden; }
.bk-barre em { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--doux); }
.bk-eq.droite .bk-barre em { transform-origin: right; background: var(--sur-noir-2); }
.bk-horloges { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bk-jeu { font-size: 24px; font-weight: 600; padding: 6px 12px; border-radius: 10px; background: #0c0a09; box-shadow: inset 0 0 0 1px #2c2420; color: var(--ambre); }
.bk-tir { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 600; color: #160800; background: var(--orange); box-shadow: 0 0 22px -4px rgba(255, 77, 0, .7); transition: background .2s; }
.bk-tir.bas { background: var(--rouge); }
.bk-horloges small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sur-noir-3); }

/* Pétanque : deux lignes de treize crans. */
.pt { display: flex; flex-direction: column; gap: 22px; padding: 34px 22px 18px; }
.pt-l { display: grid; grid-template-columns: 120px minmax(0, 1fr) 64px; align-items: center; gap: 16px; }
.pt-l b { font: italic 800 20px/1.05 var(--impact); text-transform: uppercase; }
.pt-l > .mono { font: 700 54px/1 var(--impact); text-align: right; display: inline-block; }
.pt-crans { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.pt-crans li { height: 22px; border-radius: 5px; background: var(--braise-3); transition: background .35s var(--doux), transform .35s var(--doux); }
.pt-crans li.plein { background: var(--orange); }
.pt-l + .pt-l .pt-crans li.plein { background: var(--sur-noir-2); }
.pt-crans li.neuf { transform: scaleY(1.3); }
.pt-crans li:last-child { box-shadow: inset 0 0 0 1px var(--braise-5); }

/* Fléchettes : ce qui reste, la volée, la sortie. */
.fl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 18px 10px; }
.fl-j { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--braise-3); border: 1px solid transparent; transition: border-color .3s, background .3s; }
.fl-j.actif { border-color: var(--orange); background: #2a1a12; }
.fl-j small { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.fl-j small .mono { font-size: 11px; color: var(--sur-noir-3); font-weight: 500; }
.fl-j b { font-size: 56px; font-weight: 600; line-height: 1.05; display: inline-block; }
.fl-moy { font-size: 12px; color: var(--sur-noir-3); }
.fl-volee { display: flex; align-items: center; gap: 8px; padding: 6px 18px 14px; }
.fl-volee span { min-width: 58px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; font-weight: 600; background: #0c0a09; box-shadow: inset 0 0 0 1px #2c2420; color: var(--sur-noir-3); }
.fl-volee span:not(:empty) { color: var(--sur-noir); box-shadow: inset 0 0 0 1px var(--braise-5); animation: bump .35s var(--doux); }
.fl-volee em { margin-left: auto; font-style: normal; font-size: 13px; color: var(--vert); }

/* Les onglets des sports : celui en cours se remplit pendant qu'il est affiché. */
.onglets-sports { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.onglets-sports button { position: relative; overflow: hidden; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid #2c2420; background: #151210; color: var(--sur-noir-3); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s; }
.onglets-sports button:hover { color: var(--sur-noir); border-color: var(--braise-5); }
.onglets-sports button[aria-selected="true"] { color: var(--sur-noir); border-color: rgba(255, 77, 0, .6); }
.onglets-sports button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--orange); transform-origin: left; animation: remplit 6.5s linear both; }
.onglets-sports.fige button[aria-selected="true"]::after { animation: none; }
@keyframes remplit { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* La page d'inscription : trois clubs, trois palettes. */
.inscr { --c1: #135b43; --c2: #0f2a22; --c3: #f2c14e; --encre: #0f2a22; border-radius: 20px; overflow: hidden; background: var(--c2); box-shadow: var(--ombre-objet); transition: background .6s var(--doux); }
.inscr.pal-1 { --c1: #1e3f8f; --c2: #0f1a36; --c3: #7cc4ff; --encre: #0f1a36; }
.inscr.pal-2 { --c1: #8a1c2b; --c2: #2a0d12; --c3: #f3d9b1; --encre: #2a0d12; }
.in-bandeau { display: flex; align-items: center; gap: 14px; padding: 22px; background: var(--c1); transition: background .6s var(--doux); }
.in-logo { width: 56px; height: 56px; border-radius: 14px; background: var(--c3); color: var(--encre); display: grid; place-items: center; font: italic 800 24px var(--impact); transition: background .6s var(--doux), color .6s; flex: none; }
.in-bandeau b { display: block; font: italic 800 30px/1 var(--impact); text-transform: uppercase; }
.in-bandeau small { color: rgba(255, 255, 255, .7); font-size: 14px; }
.in-corps { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.in-jauge { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.in-jauge b { color: #fff; font-size: 16px; }
.in-jauge i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.in-jauge em { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--c3); transform: scaleX(.84); transform-origin: left; transition: transform .5s var(--doux), background .6s; }
.in-champ { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.in-champ small { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.in-champ > span { font-size: 16px; font-weight: 500; min-height: 24px; display: flex; align-items: center; }
.in-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.curseur { width: 2px; height: 18px; background: var(--c3); margin-left: 2px; animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.in-bouton { height: 48px; border-radius: 12px; background: var(--c3); color: var(--encre); display: grid; place-items: center; font-weight: 600; transition: background .6s var(--doux), color .6s; }
.nuancier { display: flex; justify-content: center; gap: 10px; }
.nuancier span { width: 12px; height: 12px; border-radius: 50%; opacity: .45; transition: opacity .3s, transform .3s var(--doux); }
.nuancier .n0 { background: #1f7a58; } .nuancier .n1 { background: #3a67d6; } .nuancier .n2 { background: #b3283c; }
.nuancier span.actif { opacity: 1; transform: scale(1.35); }

/* Le tableau final : les vainqueurs avancent. */
.tableau { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; border-radius: 20px; background: #181412; border: 1px solid #2f2722; box-shadow: var(--ombre-objet); }
.tb-col { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.tb-m { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--braise-3); box-shadow: inset 0 0 0 1px #342b25; }
.tb-m.finale { box-shadow: inset 0 0 0 1px rgba(255, 77, 0, .5); }
.r { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 7px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: color .3s, background .3s; }
.r + .r { border-top: 1px solid #342b25; }
.r em { font: 500 10.5px var(--mono); font-style: normal; color: var(--orange-2); opacity: 0; transition: opacity .3s; }
.r.gagne.on { background: rgba(255, 77, 0, .12); }
.r.gagne.on em { opacity: 1; }
.r.perd.on { color: var(--sur-noir-3); }
.nom { transition: color .3s; }
@keyframes attente { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.tb-coupe { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; text-align: center; opacity: 0; transform: scale(.9); transition: opacity .4s, transform .5s var(--doux); }
.tb-coupe.on { opacity: 1; transform: none; }
.tb-coupe svg { width: 34px; height: 34px; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-coupe b { font: italic 800 16px/1 var(--impact); text-transform: uppercase; }

/* La grille du jour : quatre terrains, et le trait de maintenant qui avance. */
.grille { border-radius: 20px; background: #151210; border: 1px solid #2f2722; padding: 14px 16px 16px; box-shadow: var(--ombre-objet); }
.gr-tete { display: flex; justify-content: space-between; font: italic 800 16px var(--impact); text-transform: uppercase; margin-bottom: 16px; }
.gr-tete .mono { font: 500 12px var(--mono); color: var(--sur-noir-3); font-style: normal; }
.gr-corps { position: relative; display: flex; flex-direction: column; gap: 6px; }
.gr-l { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; }
.gr-l > .mono { font-size: 11px; color: var(--sur-noir-3); }
.gr-piste { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; height: 30px; }
.b { font-style: normal; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.b.a { background: rgba(255, 77, 0, .22); color: #ffb08c; } .b.b { background: rgba(62, 207, 122, .16); color: #8fe6b3; } .b.c { background: rgba(120, 140, 255, .16); color: #b3bcff; }
.b.f { background: var(--orange); color: #160800; }
.d1 { grid-column: 1 / span 2; } .d2 { grid-column: 2 / span 2; } .d3 { grid-column: 3 / span 2; } .d5 { grid-column: 5 / span 2; } .d7 { grid-column: 7 / span 2; }
.gr-maintenant { position: absolute; top: -6px; bottom: -6px; left: 38px; width: 2px; background: var(--sur-noir); box-shadow: 0 0 12px rgba(255, 255, 255, .5); animation: avance 18s linear infinite; }
.gr-maintenant em { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 9px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--sur-noir); background: #151210; padding: 0 4px; }
@keyframes avance { from { left: 38px; } to { left: calc(100% - 2px); } }

/* Le téléphone du joueur : un appareil d'aujourd'hui. */
.tel { align-self: center; width: 292px; border-radius: 54px; padding: 7px; background: #1b1816; box-shadow: inset 0 0 0 1.5px #3b3430, inset 0 0 0 3px #0b0a09, 0 50px 90px -30px rgba(0, 0, 0, .95); }
.tel-ecran { position: relative; border-radius: 47px; background: #0b0a09; padding: 14px 16px 26px; display: flex; flex-direction: column; min-height: 580px; overflow: hidden; }
.tel-statut { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 34px; padding: 0 12px; font-size: 13px; font-weight: 600; }
.tel-statut .mono { font-family: var(--corps); font-size: 14px; font-weight: 600; }
.ilot { width: 92px; height: 28px; border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px #1a1716; }
.tel-icones { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.tel-icones svg { width: 16px; height: 11px; fill: var(--sur-noir); }
.batterie { position: relative; width: 24px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(244, 239, 235, .55); }
.batterie i { position: absolute; inset: 2.5px 7px 2.5px 2.5px; border-radius: 2px; background: var(--sur-noir); }
.tel-app { display: flex; flex-direction: column; gap: 14px; padding: 18px 4px 0; flex: 1; }
.tel-entete { display: flex; align-items: center; gap: 12px; }
.tel-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #2a1a12; color: var(--orange-2); font: 600 14px var(--corps); box-shadow: inset 0 0 0 1px rgba(255, 77, 0, .4); }
.tel-entete small { display: block; font-size: 12px; color: var(--sur-noir-3); }
.tel-entete b { font: 600 17px var(--corps); }
.tel-carte { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 24px; background: #181311; box-shadow: inset 0 0 0 1px #2e2521; }
.tc-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tel-sur-carte { white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-noir-3); }
.tel-dans { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--orange-doux); color: var(--orange-2); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tel-dans i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: vacille 1.4s infinite; }
.tc-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.tc-eq { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.25; font-weight: 600; text-align: center; }
.tc-eq i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--corps); font-style: normal; background: #26201c; color: var(--sur-noir-2); }
.tc-eq.vous i { background: #2a1a12; color: var(--orange-2); box-shadow: 0 0 0 2px var(--orange); }
.tc-vs { font-size: 11px; color: var(--sur-noir-3); text-transform: uppercase; letter-spacing: .08em; }
.tc-bas { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #2a2320; }
.tel-heure { font: 700 30px/1 var(--impact); letter-spacing: .02em; }
.tel-terrain { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--sur-noir-2); }
.tel-terrain svg { width: 24px; height: 16px; fill: none; stroke: var(--orange-2); stroke-width: 1.3; }
.tel-sur { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-noir-3); padding: 4px 4px 0; }
.tel-poule { display: flex; flex-direction: column; border-radius: 20px; background: #171412; overflow: hidden; }
.tel-poule li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; font-size: 14px; }
.tel-poule li + li { border-top: 1px solid #231e1b; }
.tel-poule li.vous { background: #24170f; }
.tel-poule b { color: var(--orange); font-weight: 600; } .tel-poule .mono { color: var(--sur-noir-3); font-size: 12px; }
.tel-bouton { margin-top: auto; height: 50px; border-radius: 999px; border: 1px solid rgba(255, 77, 0, .6); color: var(--orange-2); display: grid; place-items: center; font-weight: 600; transition: background .3s, color .3s, border-color .3s, transform .15s; }
.tel-accueil { position: absolute; left: 50%; bottom: 8px; width: 110px; height: 4px; margin-left: -55px; border-radius: 999px; background: rgba(244, 239, 235, .7); }
.tel-ecran[data-pas="4"] .tel-bouton { transform: scale(.96); background: var(--orange-doux); }
.tel-ecran[data-pas="5"] .tel-bouton, .tel-ecran[data-pas="6"] .tel-bouton, .tel-ecran[data-pas="7"] .tel-bouton { background: var(--orange); border-color: var(--orange); color: #160800; }
.tel-ecran[data-pas="8"] .tel-bouton, .tel-ecran[data-pas="9"] .tel-bouton, .tel-ecran[data-pas="10"] .tel-bouton, .tel-ecran[data-pas="11"] .tel-bouton, .tel-ecran[data-pas="12"] .tel-bouton { border-color: var(--vert); color: var(--vert); background: rgba(62, 207, 122, .1); }

/* L'écran TV : la grille du jour et le bandeau des partenaires. */
.tv { border-radius: 20px; overflow: hidden; background: #181412; border: 1px solid #2f2722; box-shadow: var(--ombre-objet), 0 0 0 8px #080706; }
.tv-tete { display: flex; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #2c2420; font: italic 800 18px var(--impact); text-transform: uppercase; letter-spacing: .02em; }
.tv-tete .mono { font-style: normal; font-size: 16px; }
.tv-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.tt { position: relative; border-radius: 12px; background: var(--braise-3); padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; border: 1px solid transparent; min-height: 96px; }
.tt.direct { border-color: rgba(255, 77, 0, .7); box-shadow: 0 0 22px -8px rgba(255, 77, 0, .6); }
.tt.direct::after { content: 'EN DIRECT'; position: absolute; top: 10px; right: 12px; font: 500 9.5px var(--mono); color: var(--orange); letter-spacing: .08em; animation: vacille 1.6s ease-in-out infinite; }
.tt.fini { opacity: .55; }
.tt.suivant { background: transparent; border: 1px dashed var(--braise-4); }
.tt-t { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sur-noir-3); }
.tt-eq { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.tt-eq b { font-weight: 600; } .tt-eq .mono { color: var(--sur-noir-2); } .tt-eq em { font-style: normal; color: var(--orange); font-weight: 600; }
.tt-quand { position: absolute; right: 12px; bottom: 10px; font: italic 800 18px var(--impact); text-transform: uppercase; color: var(--orange); }
.tv-sponsors { display: flex; align-items: center; border-top: 1px solid #2c2420; background: #100d0c; height: 62px; contain: inline-size; }
.tv-merci { flex: none; align-self: stretch; display: grid; place-items: center; padding: 0 16px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-2); background: #100d0c; box-shadow: 1px 0 0 #2c2420; position: relative; z-index: 1; }
.piste { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
.defile { display: flex; align-items: center; gap: 44px; width: max-content; padding-left: 28px; animation: defile 26s linear infinite; color: #cfc7bf; }
.defile svg { height: 30px; width: auto; flex: none; opacity: .9; }
@keyframes defile { to { transform: translateX(-50%); } }


/* ================= Propres à la vitrine en ligne ================= */
.saut { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--orange); color: var(--encre-orange); font-weight: 600; text-decoration: none; }
.saut:focus { top: 12px; }
.hero { min-height: calc(100vh - var(--tete)); padding-top: clamp(48px, 8vh, 96px); align-items: center; }
.hero .vue { position: static; }
.hero .chapeau { font-size: 20px; }
.hero h1 span { display: block; }

/* Les promesses : un titre et un texte, repris mot pour mot de lib/promesses.ts. */
.points article, .points li > div { display: flex; flex-direction: column; gap: 2px; }
.points h4 { margin: 0; font-size: 17px; font-weight: 600; color: var(--sur-noir); }
.points p { margin: 0; }
.sports-tete .points { margin-top: 0; }

/* L'écran du club : le vrai mur des terrains de VELOX, qui se recompose selon le sport. */
.hs-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.hs-titre { font: 600 13px var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--sur-noir-3); }
.hs-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid #2c2420; background: #151210; color: var(--sur-noir-3); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s; }
.hs-chip:hover { color: var(--sur-noir); border-color: var(--braise-5); }
.hs-chip.actif { color: var(--sur-noir); border-color: var(--orange); background: #2a1a12; }
.ecran-club { border-radius: 20px; overflow: hidden; background: #181412; border: 1px solid #2f2722; box-shadow: var(--ombre-objet), 0 0 0 8px #080706; }
.ec-tete { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #2c2420; }
.ec-nom { font: italic 800 17px var(--impact); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.tv-format { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-heure { font-size: 15px; font-weight: 500; }
.tv-mur { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; transition: opacity .22s; }
.tv-mur.bascule { opacity: 0; }
.terrain { min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--braise-3); border: 1px solid transparent; transition: border-color .4s, box-shadow .4s; }
.terrain-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.terrain-tete b { font: italic 800 15px var(--impact); letter-spacing: .04em; text-transform: uppercase; color: var(--orange-2); }
.etat { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-noir-3); white-space: nowrap; }
.etat.joue { color: var(--vert); }
.etat.joue::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--vert); animation: battre 1.6s ease-in-out infinite; }
@keyframes battre { 50% { opacity: .3; } }
.epreuve { margin: 6px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sur-noir-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cote { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--sur-noir-2); }
.cote > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cote .mono { display: flex; gap: 10px; color: var(--sur-noir); }
.cote i { font-style: normal; }
.tv-mur.serre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-mur.serre .terrain { padding: 10px; }
.tv-mur.serre .cote { font-size: 12.5px; }
/* Le set qui se termine sous les yeux : « En jeu » puis « Terminé » (la classe .fin est posée par app.js, et par défaut). */
.terrain.vif .etat.fini, .terrain.vif .apres { display: none; }
.ecran-club.fin .terrain.vif .etat.joue, .ecran-club.fin .terrain.vif .avant { display: none; }
.ecran-club.fin .terrain.vif .etat.fini, .ecran-club.fin .terrain.vif .apres { display: inline; }
.ecran-club.fin .terrain.vif { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 77, 0, .18); }
.ecran-club.fin .terrain.vif .gagne { color: var(--sur-noir); font-weight: 600; }
.ecran-club.fin .terrain.vif .apres { color: var(--orange); }

/* La bande des derniers résultats, sous le premier écran. */
.bande { display: flex; align-items: center; border-top: 1px solid var(--braise-3); border-bottom: 1px solid var(--braise-3); background: var(--scene); height: 52px; overflow: hidden; }
.bande-etiq { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 var(--marge); height: 100%; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-2); border-right: 1px solid var(--braise-3); }
.bande-point { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pouls 1.8s infinite; }
.bande-flux { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.bande-piste { display: flex; width: max-content; animation: bande 48s linear infinite; font-size: 14px; color: var(--sur-noir-3); white-space: nowrap; }
.bande-piste span { padding-right: 18px; }
.bande-piste b { color: var(--sur-noir); font-weight: 600; }
.bande-piste i { font: 500 13px var(--mono); font-style: normal; color: var(--orange-2); }
.bande-piste em { font-style: normal; margin: 0 8px; color: var(--braise-5); }
@keyframes bande { to { transform: translateX(-50%); } }

/* Les images et vidéos réglées dans le Cockpit : une par section, posée à la fin. */
.media-vitrine { grid-column: 1 / -1; margin: 8px 0 0; }
.media-vitrine img, .media-vitrine video { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: 20px; background: var(--objet); }

/* Le mouvement réglé dans le Cockpit : « sobre » arrête les boucles, « aucun » arrête tout. */
.mvt-sobre .bande-piste, .mvt-aucun .bande-piste { animation: none; }
.mvt-aucun *, .mvt-aucun *::before, .mvt-aucun *::after { animation: none !important; transition: none !important; }
.mvt-aucun .gr-maintenant { left: 55%; }

/* Les apparitions au défilement : posées seulement si le visiteur accepte le mouvement (classe .anime). */
.anime .a-voir { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--doux), transform .7s var(--doux); }
.anime .a-voir.r1 { transition-delay: .06s; } .anime .a-voir.r2 { transition-delay: .12s; } .anime .a-voir.r3 { transition-delay: .18s; }
.anime .a-voir.vu { opacity: 1; transform: none; }

/* La liste d'attente fermée depuis le Cockpit. */
.attente-fermee { padding: 18px 22px; border-radius: 16px; background: var(--objet); border: 1px solid var(--braise-4); color: var(--sur-noir); }

/* La page 404 partage cette feuille de style. */
.hors-piste { min-height: 100vh; display: grid; place-items: center; background: var(--braise); color: var(--sur-noir); text-align: center; padding: 24px; }
.hors-piste h1 { font-size: 4rem; }
.hors-piste .chapo { margin: 16px auto 32px; font-size: 19px; color: var(--sur-noir-2); }
.hors-piste .liens-404 { margin-top: 32px; font-size: 14px; color: var(--sur-noir-3); }
.hors-piste .liens-404 a { color: var(--sur-noir-3); }

/* ================================================================ RETOUCHES DU 25/09/2026 (retours de Stev) */

/* 1. L'INSCRIPTION : la page du club, vivante. Le motif de terrain dans le bandeau, une place par équipe, les épreuves,
   puis la confirmation qui s'affiche, et l'organisateur prévenu à l'instant. */
.inscr { position: relative; }
.in-bandeau { position: relative; overflow: hidden; padding: 26px 22px; }
.in-bandeau > span { position: relative; }
.in-motif { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; }
.in-motif path { fill: none; stroke: #fff; stroke-width: 1.5; }
.in-infos { display: flex; flex-wrap: wrap; gap: 6px; }
.in-infos i { font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); }
.in-places { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.in-places b { color: #fff; font-size: 16px; }
.in-points { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; }
.in-points i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .12); transition: background .4s; }
.in-points i.pris { background: var(--c3); }
.in-points i.neuf { animation: place-prise .8s var(--doux); }
@keyframes place-prise { 0% { transform: scale(.3); box-shadow: 0 0 0 0 var(--c3); } 50% { transform: scale(1.5); box-shadow: 0 0 0 5px rgba(255, 255, 255, .2); } 100% { transform: none; box-shadow: none; } }
.in-epreuves { display: flex; gap: 6px; }
.in-epreuves span { flex: 1; text-align: center; padding: 8px 6px; border-radius: 10px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .6); }
.in-epreuves .actif { background: var(--c3); color: var(--encre); }
.in-bouton { position: relative; overflow: hidden; }
.in-bouton.appui { animation: appui .35s var(--doux); }
@keyframes appui { 50% { transform: scale(.96); } }
.in-ok { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--c2); opacity: 0; pointer-events: none; transition: opacity .35s var(--doux); }
.in-ok.on { opacity: 1; }
.in-ok svg { width: 72px; height: 72px; fill: none; stroke: var(--c3); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.in-ok circle { stroke-dasharray: 145; stroke-dashoffset: 145; }
.in-ok path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.in-ok.on circle { transition: stroke-dashoffset .6s var(--doux); stroke-dashoffset: 0; }
.in-ok.on path { transition: stroke-dashoffset .4s .45s var(--doux); stroke-dashoffset: 0; }
.in-ok b { font: italic 800 26px var(--impact); text-transform: uppercase; }
.in-ok small { font-size: 14px; color: rgba(255, 255, 255, .7); }
.in-toast { display: flex; align-items: center; gap: 12px; align-self: flex-end; width: min(340px, 100%); margin-top: -8px; padding: 12px 14px; border-radius: 14px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px rgba(255, 77, 0, .45); opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s var(--doux); }
.in-toast.on { opacity: 1; transform: none; }
.in-toast > i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-doux); }
.in-toast span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.in-toast b { font-size: 14px; }
.in-toast small { font-size: 13px; color: var(--sur-noir-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-toast em { font-style: normal; font-size: 11px; color: var(--sur-noir-3); }

/* A. LE TIRAGE : une seule horloge pour la grille et le tableau. Le trait « maintenant » avance, chaque rencontre
   qu'il dépasse se termine sur la grille ET s'écrit dans le tableau, au même instant. */
.gr-piste { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.d9 { grid-column: 9 / span 2; }
.b { position: relative; transition: opacity .5s var(--doux), box-shadow .3s, transform .3s var(--doux); }
.b.passe { opacity: .38; }
.b.f.passe { opacity: 1; background: #3a2217; color: #ffb08c; }
.b.g { box-shadow: inset 0 0 0 1.5px #f2c14e; }
.b.eclat, .tb-m.eclat { animation: eclat .9s var(--doux); }
.b.en-jeu { box-shadow: inset 0 0 0 1.5px #fff; }
.b.en-jeu::after { content: ''; position: absolute; top: 4px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: alerte-bat 1s ease-in-out infinite; }
@keyframes eclat {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 0, .9); transform: scale(1); }
  35% { box-shadow: 0 0 0 6px rgba(255, 77, 0, .35); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 12px rgba(255, 77, 0, 0); transform: scale(1); }
}
.gr-maintenant { animation: none; left: calc(38px + (100% - 38px) * var(--p, 0)); transition: left var(--duree, 0s) linear; }
.nom:not(.on) { color: transparent; border-radius: 4px; }
.gr-maintenant em { color: var(--orange-2); font-weight: 600; }
.tb-coupe.on svg { animation: coupe-brille 1.6s var(--doux); }
@keyframes coupe-brille { 0% { filter: drop-shadow(0 0 0 rgba(242, 193, 78, 0)); transform: scale(.6) rotate(-12deg); } 45% { filter: drop-shadow(0 0 14px rgba(255, 122, 61, .9)); transform: scale(1.15) rotate(4deg); } 100% { filter: drop-shadow(0 0 6px rgba(255, 122, 61, .4)); transform: none; } }

/* B. L'ALERTE DU GLISSER : impossible à rater. Un bandeau au-dessus de la grille, les deux matchs en conflit qui
   tremblent, cerclés de rouge, et le nom de l'équipe en double surligné. */
.org { position: relative; }
.org-alerte { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 12px 14px 12px 16px; border-radius: 14px; background: #3a1a16; box-shadow: inset 0 0 0 1px var(--rouge); animation: alerte-entre .35s var(--doux); }
.org-alerte[hidden] { display: none; }
.org-alerte-ico { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--rouge); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: alerte-bat 1.2s ease-in-out infinite; }
.org-alerte p { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.4; color: #ffd9d3; }
.org-alerte p b { display: block; font: italic 800 17px/1.1 var(--impact); letter-spacing: .02em; text-transform: uppercase; color: var(--rouge); }
.org-alerte-bouton { flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--rouge); background: transparent; color: #ffd9d3; font: 600 14px var(--corps); cursor: pointer; }
.org-alerte-bouton:hover { background: rgba(255, 107, 91, .16); }
@keyframes alerte-entre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes alerte-bat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.org-grille { position: relative; }
.org-match.conflit { border-color: var(--rouge); background: #3a1a16; box-shadow: 0 0 0 2px var(--rouge), 0 16px 30px -14px rgba(255, 107, 91, .8); }
.org-match.secoue { animation: secoue .5s var(--doux); }
@keyframes secoue { 0%, 100% { transform: none; } 20% { transform: translateX(-5px) rotate(-1deg); } 40% { transform: translateX(5px) rotate(1deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.org-eq.double { color: var(--rouge); }
.org-eq.double::before { content: '⚠ '; font-size: 12px; }
.org-etat.alerte { display: none; }

/* C. LE JOUR J : le téléphone passe devant l'écran, un peu de biais, plus grand, et respire. */
.vue-jourj { padding-bottom: 210px; }
.vue-jourj [data-vue="tel"] { right: -56px; bottom: -24px; z-index: 2; }
.vue-jourj [data-vue="tel"] .tel { transform: scale(.74) rotate(-6deg); box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 77, 0, .25), inset 0 0 0 1.5px #3b3430, inset 0 0 0 3px #0b0a09, 0 0 0 10px var(--braise); }
.anime .vue-jourj [data-vue="tel"] { animation: flotte 6s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* D. LE PODIUM : les marches jaillissent, la coupe s'allume, les confettis tombent, puis tout le classement défile. */
.po-marches { min-height: 300px; padding-top: 70px; }
.po-m { position: relative; transition: transform .75s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
.po-m.p1 { overflow: visible; }
.po-m.p1.on::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); background-size: 250% 100%; animation: reflet 1.4s .5s var(--doux) both; pointer-events: none; }
@keyframes reflet { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.po-coupe { position: absolute; top: -56px; left: 50%; width: 46px; height: 46px; margin-left: -23px; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.po-coupe.on { opacity: 1; transform: none; }
.po-coupe svg { width: 100%; height: 100%; fill: none; stroke: #f2c14e; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(242, 193, 78, .7)); }
.po-confettis { position: absolute; top: -30px; left: 50%; width: 0; height: 0; pointer-events: none; }
.po-confettis i { position: absolute; top: 0; left: 0; width: 7px; height: 11px; border-radius: 2px; opacity: 0; background: #f2c14e; }
.po-confettis i:nth-child(3n) { background: var(--orange); } .po-confettis i:nth-child(4n) { background: #f4efeb; width: 5px; height: 9px; }
.po-confettis.on i { animation: confetti 1.6s cubic-bezier(.2, .7, .3, 1) forwards; }
.po-confettis i:nth-child(1) { --x: -120px; --y: 70px; --r: 260deg; } .po-confettis i:nth-child(2) { --x: -90px; --y: 150px; --r: -200deg; animation-delay: .05s; }
.po-confettis i:nth-child(3) { --x: -60px; --y: 40px; --r: 320deg; } .po-confettis i:nth-child(4) { --x: -30px; --y: 170px; --r: -300deg; animation-delay: .1s; }
.po-confettis i:nth-child(5) { --x: 0px; --y: 120px; --r: 200deg; } .po-confettis i:nth-child(6) { --x: 30px; --y: 60px; --r: -240deg; animation-delay: .08s; }
.po-confettis i:nth-child(7) { --x: 60px; --y: 160px; --r: 280deg; } .po-confettis i:nth-child(8) { --x: 90px; --y: 90px; --r: -320deg; animation-delay: .12s; }
.po-confettis i:nth-child(9) { --x: 120px; --y: 140px; --r: 220deg; } .po-confettis i:nth-child(10) { --x: -140px; --y: 130px; --r: -180deg; animation-delay: .15s; }
.po-confettis i:nth-child(11) { --x: 140px; --y: 50px; --r: 300deg; } .po-confettis i:nth-child(12) { --x: -20px; --y: 60px; --r: -260deg; animation-delay: .03s; }
.po-confettis i:nth-child(13) { --x: 20px; --y: 190px; --r: 340deg; } .po-confettis i:nth-child(14) { --x: -100px; --y: 20px; --r: -220deg; animation-delay: .18s; }
@keyframes confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  30% { opacity: 1; transform: translate(calc(var(--x) * .7), calc(var(--y) * -.55)) rotate(calc(var(--r) * .4)); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
.po-suite { list-style: none; margin: 0; padding: 12px 22px 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; background: rgba(0, 0, 0, .18); }
.po-suite li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: 12px; font-weight: 600; line-height: 1.25; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s var(--doux); }
.po-suite li.on { opacity: 1; transform: none; }
.po-suite li b { font-size: 14px; color: #f2c14e; }
.po-publie { opacity: .3; transition: opacity .3s; }
.po-publie.on { opacity: 1; color: #f2c14e; animation: tampon .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tampon { from { transform: scale(1.6); } to { transform: none; } }

/* E. LES SPORTS : des tuiles par famille, chacune avec un score à la façon de son sport et sa règle signature. */
.sports-grille { display: flex; flex-direction: column; gap: 36px; margin-top: clamp(40px, 6vh, 64px); }
.sports-grille { gap: 10px; }
.famille { border-radius: 18px; background: var(--braise-2); box-shadow: inset 0 0 0 1px var(--braise-3); }
.famille[open] { background: transparent; box-shadow: none; }
.famille-nom { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 18px 20px; border-radius: 18px; font: italic 800 26px/1 var(--impact); text-transform: uppercase; color: var(--sur-noir); }
.famille-nom::-webkit-details-marker { display: none; }
.famille-nom::after { content: ''; margin-left: auto; width: 14px; height: 14px; background: linear-gradient(var(--orange-2), var(--orange-2)) center / 14px 2px no-repeat, linear-gradient(var(--orange-2), var(--orange-2)) center / 2px 14px no-repeat; transition: transform .25s var(--doux); }
.famille[open] > .famille-nom::after { transform: rotate(45deg); }
.famille-nom:hover { background: var(--braise-3); }
.famille[open] > .famille-nom { padding-left: 0; padding-right: 0; }
.famille[open] > .famille-nom:hover { background: transparent; }
.famille-compte { font: 500 13px var(--mono); font-style: normal; text-transform: none; color: var(--orange-2); }
.famille-apercu { flex-basis: 100%; font: 400 14px var(--corps); text-transform: none; color: var(--sur-noir-3); }
.famille[open] .famille-apercu { display: none; }
.famille[open] > .tuiles { animation: deplie .35s var(--doux); }
@keyframes deplie { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.famille-nom .ico { width: 26px; height: 26px; fill: none; stroke: var(--orange-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.famille-raquette .tuiles { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tuile { display: flex; flex-direction: column; gap: 6px; min-height: 108px; padding: 16px 16px 14px; border-radius: 16px; background: var(--objet); box-shadow: inset 0 0 0 1px #2f2722; transition: transform .25s var(--doux), box-shadow .25s; }
.tuile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--orange), 0 18px 34px -20px rgba(255, 77, 0, .6); }
.tuile b { font: italic 800 22px/1.05 var(--impact); text-transform: uppercase; }
.famille-raquette .tuile { min-height: 132px; }
.famille-raquette .tuile b { font-size: 30px; }
.tuile-score { font-size: 15px; color: var(--orange-2); }
.tuile-regle { margin-top: auto; font-size: 13px; line-height: 1.35; color: var(--sur-noir-3); }
.tuile-votre { align-self: flex-start; font: italic 800 clamp(28px, 3.4vw, 44px)/1 var(--impact); text-transform: uppercase; color: var(--orange); text-decoration: none; }
.tuile-votre:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* F. LA SOUFFLERIE : le tunnel vu d'en haut. Quatre équipiers enchaînent les figures du tirage, chaque figure réussie
   vaut un point, le chrono du vol fait le tour de la paroi, la file du briefing avance et le classement se réordonne. */
.regie { display: flex; flex-direction: column; gap: 16px; border-radius: 22px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #2f2722; padding: 20px 22px; }
.rg-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rg-tete b { display: block; font: italic 800 24px/1.05 var(--impact); text-transform: uppercase; }
.rg-tete small { font-size: 13px; color: var(--sur-noir-3); }
.rg-direct { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 999px; background: #3a1a16; color: var(--rouge); font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.rg-direct::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); animation: alerte-bat 1.2s ease-in-out infinite; }
.rg-scene { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, .7fr); grid-template-rows: auto auto; gap: 14px; align-items: start; }
.rg-sur { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sur-noir-3); }
.rg-file { grid-row: 1; }
.rg-attente { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rg-attente li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--braise-2); font-size: 13px; font-weight: 600; transition: opacity .4s, transform .4s var(--doux); }
.rg-attente li:first-child { box-shadow: inset 0 0 0 1px rgba(255, 77, 0, .5); }
.rg-attente li b { color: var(--orange-2); }
.rg-attente li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-attente.avance li { animation: file-monte .5s var(--doux); }
@keyframes file-monte { from { transform: translateY(14px); opacity: .3; } to { transform: none; opacity: 1; } }
.rg-tunnel { grid-row: 1 / span 2; grid-column: 2; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rg-verre { width: 100%; max-width: 250px; aspect-ratio: 1; overflow: visible; }
.rg-paroi { fill: #120f0d; stroke: var(--braise-4); stroke-width: 2.2; }
.rg-temps { fill: none; stroke: var(--orange); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: var(--reste, 0); transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .25s linear; }
.rg-anneau { fill: none; stroke: rgba(255, 255, 255, .05); stroke-width: .6; }
.rg-prises { fill: rgba(255, 77, 0, .08); stroke: rgba(255, 122, 61, .75); stroke-width: 1.2; stroke-linejoin: round; transition: all .45s var(--doux); }
.rg-g { fill: var(--orange-2); stroke: #120f0d; stroke-width: 1.4; transition: cx .45s var(--doux), cy .45s var(--doux); }
.rg-g.g0 { fill: #f4efeb; }
.rg-plus { position: absolute; top: 34%; left: 50%; font-weight: 700; font-size: 20px; color: var(--orange); opacity: 0; transform: translate(-50%, 0); pointer-events: none; }
.rg-plus.on { animation: plus-un .7s var(--doux); }
@keyframes plus-un { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1.2); } }
.rg-dedans { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.rg-dedans b { font-size: 16px; color: var(--orange-2); }
.rg-nom { font: italic 800 20px var(--impact); text-transform: uppercase; }
.rg-direct-infos { grid-row: 1 / span 2; grid-column: 3; display: flex; flex-direction: column; gap: 4px; }
.rg-points { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.rg-points b { font-size: 44px; font-weight: 600; line-height: 1; }
.rg-points b.bump { animation: tampon .35s var(--doux); }
.rg-points small { font-size: 12px; color: var(--sur-noir-3); }
.rg-secondes { margin: 0; font-size: 14px; color: var(--sur-noir-2); }
.rg-secondes b { font-size: 18px; color: var(--sur-noir); }
.rg-tirage { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.rg-fig { min-width: 26px; padding: 3px 6px; border-radius: 6px; text-align: center; font: 600 12px var(--mono); background: var(--braise-3); color: var(--sur-noir-3); transition: background .25s, color .25s; }
.rg-fig.on { background: var(--orange); color: var(--encre-orange); }
.rg-classement { grid-row: 2; grid-column: 1; }
.rg-lignes { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 4px; }
.rg-lignes li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 8px; background: var(--braise-2); font-size: 12px; font-weight: 600; transition: transform .6s var(--doux), background .3s; }
.rg-lignes li .mono { font-size: 12px; }
.rg-lignes li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-lignes li.moi { background: #3a2217; box-shadow: inset 0 0 0 1px rgba(255, 77, 0, .6); }
.rg-lignes li em { font-style: normal; color: var(--sur-noir-3); }
.rg-mur { display: grid; grid-template-columns: repeat(48, minmax(0, 1fr)); gap: 2px; }
.rg-mur i { aspect-ratio: 1; border-radius: 2px; background: var(--braise-3); transition: background .4s; }
.rg-mur i.fait.m1 { background: #5a2a14; } .rg-mur i.fait.m2 { background: #7a3514; } .rg-mur i.fait.m3 { background: #a44314; } .rg-mur i.fait.f { background: #d0520f; }
.rg-mur i.actuel { background: var(--orange); box-shadow: 0 0 8px rgba(255, 77, 0, .9); }
.rg-bas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rg-bas > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--braise-2); }
.rg-bas small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sur-noir-3); }
.rg-bas b { font-size: 20px; font-weight: 600; }
.rg-ecart.retard { color: var(--ambre); } .rg-ecart.avance { color: var(--vert); }
.rg-fin b { color: var(--orange); font-size: 24px; }
.rg-heure.bump { animation: tampon .45s var(--doux); }

/* G. EN DIRECT : fini le grand aplat orange. Le noir de la page, un vrai écran qui vit, l'orange en accent. */
.demo { background: var(--scene); color: var(--sur-noir); border-top: 1px solid var(--braise-3); border-bottom: 1px solid var(--braise-3); align-items: center; }
.demo .heure b { color: var(--orange); }
.demo .heure span { color: var(--sur-noir-2); opacity: 1; }
.demo h2 { color: var(--sur-noir); }
.demo .chapeau { color: var(--sur-noir-2); }
.demo .bouton { background: var(--orange); border-color: var(--orange); color: var(--encre-orange); box-shadow: 0 16px 30px -16px rgba(255, 77, 0, .7); }
.demo .bouton.clair { background: transparent; border-color: var(--braise-4); color: var(--sur-noir); box-shadow: none; }
.demo .bouton.clair:hover { background: var(--braise-2); border-color: var(--braise-5); }
.demo-droite { display: flex; flex-direction: column; gap: 18px; }
.demo-actions { flex-direction: row; flex-wrap: wrap; }
.demo-ecran { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #3d2a1f; }
.de-tete { display: flex; justify-content: space-between; align-items: center; font: italic 800 16px var(--impact); text-transform: uppercase; }
.de-tete > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.de-vif { width: 9px; height: 9px; border-radius: 50%; background: var(--rouge); animation: alerte-bat 1.2s ease-in-out infinite; }
.de-heure { font: 500 13px var(--mono); color: var(--sur-noir-3); font-style: normal; }
.de-terrain { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--braise-2); box-shadow: inset 0 0 0 1px rgba(255, 77, 0, .35); }
.de-t { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-noir-3); }
.de-eq { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; }
.de-eq .mono { font-size: 16px; }
.de-pts { display: inline-block; min-width: 2.4ch; text-align: right; font-style: normal; font-weight: 700; color: var(--orange-2); }
.de-pts.bump { animation: tampon .4s var(--doux); }

/* H. LES QUESTIONS : le terrain de l'écran de connexion comble la colonne, à la craie, de sport en sport. */
.questions h2 { position: static; }
.q-gauche { position: sticky; top: calc(var(--tete) + 32px); align-self: start; display: flex; flex-direction: column; gap: 10px; }
.q-scene { position: relative; height: 420px; margin-top: 12px; perspective: 820px; perspective-origin: 50% 10%; overflow: hidden; }
.q-terrain { position: absolute; left: 50%; bottom: -120px; width: 470px; height: auto; aspect-ratio: 1000 / 1800; transform: translateX(-50%) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 92%); mask-image: linear-gradient(to top, #000 35%, transparent 92%); }
.q-terrain rect { fill: rgba(255, 255, 255, .025); }
.q-filet { -webkit-mask-image: none; mask-image: none; transform: translateX(-50%) rotateX(58deg) translateY(-50%) rotateX(-90deg); transform-origin: 50% 100%; }
.anime .q-filet g { animation: q-filet 700ms ease-out backwards; }
@keyframes q-filet { from { opacity: 0; } }
.q-terrain line, .q-terrain circle { fill: none; stroke: rgba(244, 239, 235, .38); stroke-width: 6; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; }
.anime .q-terrain line, .anime .q-terrain circle { animation: craie 1100ms cubic-bezier(.22, 1, .36, 1) backwards; }
.q-terrain line.axe { stroke: var(--orange); stroke-width: 10; }
@keyframes craie { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.q-cotes { margin: 0; font-size: 13px; color: var(--sur-noir-3); }
.q-cotes b { color: var(--sur-noir-2); font-weight: 600; }


@media (max-width: 560px) {
  .tv-mur, .tv-mur.serre { grid-template-columns: 1fr; }
  .tv-mur .terrain:nth-child(n + 4) { display: none; }
  .ec-nom { display: none; }
}
.sports-tete { align-items: start; }
@media (max-width: 980px) { .frise-maintenant em { display: none; } }
@media (max-width: 560px) {
  .ecran { min-height: 300px; }
  .pd-tete, .pd-l { grid-template-columns: minmax(0, 1fr) 30px 30px 34px 50px; }
  .pd-nom { font-size: 15px; } .pd-s { font-size: 24px; } .pd-pt { font-size: 18px; }
  .tn { gap: 8px; padding: 30px 14px 6px; } .tn-joueur b { font-size: 22px; } .tn-points { font-size: 40px; gap: 4px; } .tn-points em { font-size: 28px; }
  .ft-nb { font-size: 48px; } .ft-eq b { font-size: 16px; }
  .bk-eq b { font-size: 56px; } .bk { padding: 22px 14px 14px; gap: 10px; }
  .pt-l { grid-template-columns: 84px minmax(0, 1fr) 44px; gap: 10px; } .pt-l b { font-size: 16px; } .pt-l > .mono { font-size: 40px; }
  .fl-j b { font-size: 42px; }
  .fl-volee span { min-width: 48px; }
  .tableau { gap: 6px; padding: 10px; }
  .r { font-size: 10.5px; padding: 6px 7px; } .r em { display: none; }
  .tv-grille { grid-template-columns: 1fr; } .tt.fini, .tt.suivant { display: none; }
}

/* ================= Largeurs moyennes : la frise se resserre ================= */
@media (max-width: 1180px) {
  /* L'en-tête passe sur deux rangées : la frise dessous, la connexion et la démo à droite du logo. */
  :root { --tete: 112px; }
  .tete { grid-template-columns: auto auto; grid-template-rows: 56px 56px; height: var(--tete); row-gap: 0; }
  .tete-actions { justify-self: end; gap: 14px; }
  .frise { grid-column: 1 / -1; grid-row: 2; max-width: none; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge); }
  .frise::-webkit-scrollbar { display: none; }
  .frise ol { min-width: 720px; }
  .frise-rail { left: var(--marge); right: var(--marge); min-width: 720px; }
  .frise a span { font-size: 11px; }
  .vue-jourj [data-vue="tel"] { right: -8px; }
  .offres { grid-template-columns: 1fr 1fr; }
  .offre-prix { grid-column: 1 / -1; }
}

/* ================= Tablette et téléphone : une colonne, l'aperçu après le texte ================= */
@media (max-width: 980px) {
  .chapitre, .sports-tete, .nouveautes, .questions, .fondateurs { grid-template-columns: minmax(0, 1fr); }
  .chapitre { padding-top: 72px; padding-bottom: 72px; gap: 36px; }
  .hero { min-height: 0; padding-top: 36px; }
  .vue { position: static; }
  .vue-jourj { padding-bottom: 0; }
  .vue-jourj [data-vue="tel"] { position: static; align-items: center; }
  .vue-jourj [data-vue="tel"] .tel { transform: scale(.88); transform-origin: top center; margin: 0 0 -60px; }
  .nouveautes ol { grid-column: auto; grid-row: auto; }
  .demo { grid-template-columns: minmax(0, 1fr); }
  .demo > * { max-width: none; }
  .questions h2 { position: static; }
  .offres { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 560px) {
  .tete-actions .bouton { padding: 0 12px; }
  .tete-actions { gap: 12px; }
  .tete-actions a { white-space: nowrap; }
  .tete-actions .lien-discret { font-size: 14px; }
  .logo { font-size: 22px; gap: 8px; }
  .chapeau, .hero .chapeau { font-size: 17px; }
  .points p { font-size: 15px; }
  .org-grille { grid-template-columns: 44px repeat(4, minmax(118px, 1fr)); overflow-x: auto; }
  .org-match { font-size: 12.5px; padding: 8px; }
  .deux { grid-template-columns: 1fr; }
  .car-haut { grid-template-columns: 100px minmax(0, 1fr); gap: 16px; }
  .car-niveau { width: 100px; height: 100px; } .car-niveau b { font-size: 26px; } .car-niveau small { bottom: 22px; }
  .po-marches { min-height: 230px; padding: 28px 12px 0; }
  .po-m { font-size: 12px; } .po-m.p1 { height: 170px; } .po-m.p2 { height: 130px; } .po-m.p3 { height: 100px; }
  .al { grid-template-columns: 26px minmax(0, 1fr); } .al-geste { grid-column: 2; justify-self: start; }
  .pied nav { margin-left: 0; }
}
/* Très petits écrans : le bouton de démo du premier écran est juste en dessous, l'en-tête garde la connexion. */
@media (max-width: 360px) {
  .tete-actions .bouton { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .gr-maintenant { left: 55%; }
  .car-niveau .val { stroke-dashoffset: 172; }
}

@media (max-width: 980px) {
  .vue-jourj [data-vue="tel"] .tel { transform: scale(.88) rotate(0); }
  .anime .vue-jourj [data-vue="tel"] { animation: none; }
  .q-gauche { position: static; }
  .q-scene { height: 220px; }
  .po-suite { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demo-ecran { order: 2; }
}
@media (max-width: 560px) {
  .org-alerte { flex-wrap: wrap; }
  .org-alerte p { flex-basis: calc(100% - 44px); }
  .org-alerte-bouton { width: 100%; }
  .rg-scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rg-tunnel { grid-column: 1 / -1; grid-row: auto; order: -1; }
  .rg-file, .rg-direct-infos, .rg-classement { grid-row: auto; grid-column: auto; }
  .rg-mur { grid-template-columns: repeat(24, minmax(0, 1fr)); }
  .rg-bas { grid-template-columns: 1fr; }
  .po-suite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .famille-raquette .tuiles, .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .famille-raquette .tuile b { font-size: 24px; }
}

/* Pages légales (25/09/2026) : la mention sous le formulaire des fondateurs. */
.note-donnees { margin: 14px 0 0; font-size: 14px; color: var(--sur-noir-3); }
.note-donnees a { color: var(--sur-noir-2); }
.note-donnees a:hover { color: var(--sur-noir); }

/* ================= J-15 : la vue d'ensemble (21/10/2026, maquette validée du 15/10) =================
   Une bande pleine largeur sur fond scène, comme la démo du planning : d'où viennent les participants.
   Deux échelles : un club (les communes et la page A4 du bilan) et un événement international (le globe,
   même moteur que le petit globe du Bilan, servi par la vitrine). Les chiffres sont inventés pour l'exemple. */
.ensemble { background: var(--scene); border-top: 1px solid var(--braise-3); border-bottom: 1px solid var(--braise-3); padding: clamp(80px, 12vh, 130px) var(--marge); }
.ensemble > * { max-width: var(--page); margin-left: auto; margin-right: auto; }
.ens-texte { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: 20px clamp(40px, 6vw, 104px); align-items: end; margin-bottom: 40px; }
.ens-texte > div { display: flex; flex-direction: column; gap: 20px; }
.ens-choix .hs-chip { height: 40px; padding: 0 16px; font-size: 14px; }
.ens-cadre { border-radius: 22px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #2f2722, 0 0 0 8px #080706; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 16px; align-items: stretch; }
.ens-cadre.monde { grid-template-columns: 288px minmax(0, 1fr) 272px; }
.ens-cadre:not([hidden]) { animation: ens-entree .32s var(--doux); }
@keyframes ens-entree { from { opacity: 0; } to { opacity: 1; } }
.ens-panneau { background: #151210; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 16px; font-size: 13px; min-width: 0; }
.ens-titre { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ens-panneau h4 { margin: 0; font: italic 800 16px var(--impact); text-transform: uppercase; letter-spacing: .04em; color: var(--sur-noir); }
.ens-offre { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sur-noir-3); border: 1px solid var(--braise-5); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.ens-offre.pro { color: var(--orange-2); border-color: currentColor; }
.ens-sur { font: 600 10px var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--sur-noir-3); margin-bottom: 8px; }
.ens-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ens-trois > div { background: var(--braise-3); border-radius: 12px; padding: 10px 12px; }
.ens-trois b { display: block; font: 500 22px/1.1 var(--mono); color: var(--sur-noir); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ens-trois b.or { color: var(--orange-2); }
.ens-trois small { font-size: 11px; color: var(--sur-noir-3); line-height: 1.3; display: block; margin-top: 4px; }
/* Autour du club : le tableau du Bilan, une barre derrière chaque commune. */
.ens-communes li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 32px 52px; gap: 8px; align-items: center; padding: 8px 10px; border-top: 1px solid #2a2320; color: var(--sur-noir-2); font-size: 13px; }
.ens-communes li > span:nth-child(2) { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ens-communes li em { font: 500 11px var(--mono); font-style: normal; color: var(--sur-noir-3); margin-left: 4px; }
.ens-communes li b { position: relative; font-weight: 500; text-align: right; color: var(--sur-noir); font-size: 12px; }
.ens-barre-fond { position: absolute; left: 0; top: 5px; bottom: 5px; width: var(--p); border-radius: 6px; background: var(--orange-doux); transform-origin: left; }
.ens-communes .ens-autres { color: var(--sur-noir-3); }
.ens-communes .ens-autres .ens-barre-fond { background: rgba(244, 239, 235, .06); }
.ens-note { font-size: 12px; line-height: 1.5; color: var(--sur-noir-3); margin-top: auto; }
/* La page A4 du bilan (offre Pro) : une feuille posée sur la table, aux couleurs du club (couleurs empruntées). */
.ens-feuille { display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: 14px; background: #120f0d; }
.bf-papier { --club: #135b43; --club-or: #f2c14e; width: min(100%, 440px); background: #f4efeb; color: #1c1815; border-radius: 6px; padding: 22px 22px 16px; display: flex; flex-direction: column; gap: 16px; transform: rotate(-1.2deg); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4); }
.bf-bandeau { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 3px solid var(--club); }
.bf-ecu { width: 40px; height: 40px; border-radius: 10px; background: var(--club); color: var(--club-or); display: grid; place-items: center; font: italic 800 16px var(--impact); }
.bf-bandeau b { display: block; font: italic 800 19px/1 var(--impact); text-transform: uppercase; }
.bf-bandeau small { display: block; margin-top: 3px; font-size: 11px; color: #52453c; }
.bf-bandeau .ens-offre.pro { color: #8a2c00; }
.bf-phrase { font-size: 13.5px; line-height: 1.55; color: #3a302a; padding: 12px 14px; background: rgba(19, 91, 67, .08); border-left: 3px solid var(--club); border-radius: 0 8px 8px 0; }
.bf-phrase b { color: #14110f; font-weight: 600; }
.bf-deux { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; }
.bf-sur { font: 600 10px var(--corps); letter-spacing: .14em; text-transform: uppercase; color: #52453c; margin-bottom: 8px; }
.bf-anneaux { display: grid; gap: 8px; }
.bf-anneau { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; font-size: 12px; color: #3a302a; }
.bf-anneau b { font-weight: 500; font-size: 12px; color: #14110f; }
.bf-anneau i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(20, 17, 15, .1); overflow: hidden; }
.bf-anneau i::before { content: ''; display: block; height: 100%; width: var(--p); background: var(--club); border-radius: inherit; }
.bf-deps li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(20, 17, 15, .12); font-size: 12px; color: #3a302a; }
.bf-deps li b { font-weight: 500; color: #14110f; }
.bf-ecart-titre { margin-top: 12px; }
.bf-ecart { font-size: 12px; color: #3a302a; }
.bf-ecart b { font-size: 18px; font-weight: 500; color: var(--club); margin-right: 4px; }
.bf-pied { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding-top: 10px; border-top: 1px solid rgba(20, 17, 15, .12); font-size: 10.5px; letter-spacing: .04em; color: #52453c; }
/* Le globe en plein écran (offre Pro). */
.ens-phrase { color: var(--sur-noir-2); line-height: 1.5; }
.ens-barres { display: grid; gap: 8px; }
.ens-barre { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 4px 8px; align-items: center; color: var(--sur-noir-2); }
.ens-barre span:last-of-type { text-align: right; font-family: var(--mono); color: var(--sur-noir); }
.ens-barre i { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--braise-4); overflow: hidden; }
.ens-barre i::before { content: ''; display: block; height: 100%; width: var(--p); background: var(--orange); border-radius: inherit; transition: width .5s var(--doux); }
.ens-deleg li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 32px 38px; gap: 8px; padding: 7px 8px; margin: 0 -8px; border-top: 1px solid #2a2320; border-radius: 8px; color: var(--sur-noir-2); transition: background .3s, color .3s; }
.ens-deleg li b { font: 500 11px var(--mono); color: var(--orange-2); padding-top: 2px; }
.ens-deleg li span:nth-child(3), .ens-deleg li span:nth-child(4) { text-align: right; font-family: var(--mono); }
.ens-deleg li.choisie { color: var(--sur-noir); background: var(--braise-orange, #2a1a12); border-top-color: transparent; }
.ens-globe { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 460px; min-width: 0; }
.ens-globe canvas { width: min(100%, 500px); aspect-ratio: 1; height: auto; display: block; opacity: 0; transition: opacity .6s var(--doux); }
.ens-globe canvas.pret { opacity: 1; }
.ens-sans-globe { max-width: 30ch; text-align: center; color: var(--sur-noir-3); font-size: 14px; }
.ens-reglages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ens-reglages span { font-size: 11px; color: var(--sur-noir-3); border: 1px solid #2c2420; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.ens-reglages span.on { color: var(--sur-noir); border-color: var(--braise-5); }
.ens-fiche [data-f] { transition: opacity .25s var(--doux); }
.ens-fiche.change [data-f] { opacity: 0; }
.ens-fiche-tete { display: flex; align-items: center; gap: 12px; }
.ens-code { width: 44px; height: 44px; flex: none; border-radius: 10px; background: #2a1a12; display: grid; place-items: center; font-size: 14px; color: var(--orange-2); }
.ens-fiche-tete b { display: block; font: italic 800 20px/1 var(--impact); text-transform: uppercase; }
.ens-fiche-tete small { color: var(--sur-noir-3); font-size: 12px; }
.ens-equipes li { padding: 6px 0; border-top: 1px solid #2a2320; color: var(--sur-noir-2); display: flex; justify-content: space-between; gap: 8px; }
.ens-equipes li em { font-style: normal; font-size: 11px; color: var(--sur-noir-3); text-align: right; }
.ens-nav { display: flex; justify-content: space-between; color: var(--sur-noir-3); font-size: 12px; margin-top: auto; }
.ens-sous { margin-top: 24px; font-size: 14px; line-height: 1.55; color: var(--sur-noir-3); max-width: 92ch; }
.ens-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(28px, 4vw, 56px); margin-top: 48px; }

/* ================= J-7 : les réseaux (21/10/2026) ================= */
.rs-scene { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.rs-fil { width: min(100%, 400px); border-radius: 20px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #2f2722; padding: 14px; }
.rs-compte { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; }
.rs-compte i { width: 30px; height: 30px; border-radius: 50%; background: var(--braise-3); box-shadow: inset 0 0 0 1.5px var(--orange); display: grid; place-items: center; font: italic 800 12px var(--impact); color: var(--sur-noir); }
.rs-compte b { display: block; font-weight: 600; }
.rs-compte small { color: var(--sur-noir-3); font-size: 11px; }
.rs-compte em { margin-left: auto; font-size: 11px; font-style: normal; color: var(--sur-noir-3); }
.rs-cadre { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #0d0b0a; }
.rs-diapo { position: absolute; inset: 0; opacity: 0; transform: translateX(14px); transition: opacity .45s var(--doux), transform .45s var(--doux); }
.rs-diapo.on { opacity: 1; transform: none; }
.rs-points { display: flex; justify-content: center; gap: 6px; margin: 12px 0 2px; }
.rs-points i { width: 6px; height: 6px; border-radius: 50%; background: var(--braise-4); transition: background .3s, width .3s var(--doux); }
.rs-points i.on { background: var(--orange); width: 16px; border-radius: 999px; }
.rs-onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rs-archive { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sur-noir-2); background: #151210; border-radius: 12px; padding: 10px 14px; width: min(100%, 400px); }
.rs-archive .ico { color: var(--orange-2); width: 20px; height: 20px; }
.rs-archive b { font-family: var(--mono); font-weight: 500; color: var(--sur-noir); font-size: 12px; word-break: break-word; }
/* Les visuels eux-mêmes, tels qu'un compte gratuit les exporte : avec la mention « Organisé avec VELOX ». */
.v { position: absolute; inset: 0; color: var(--sur-noir); display: flex; flex-direction: column; background: #14110f; }
.v-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-photo .v-num { position: absolute; top: 12px; left: 16px; font: italic 800 64px/1 var(--impact); color: var(--orange-2); }
.v-photo .v-bande { position: absolute; left: 0; right: 0; bottom: 0; background: var(--orange); color: var(--encre-orange); padding: 12px 16px 14px; }
.v-photo .v-bande b { display: block; font: italic 800 26px/1 var(--impact); text-transform: uppercase; }
.v-photo .v-bande small { font-size: 12px; font-weight: 600; }
.v-mention { margin-top: auto; padding: 10px 18px 12px; font: 600 9.5px var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--sur-noir-3); }
.v-photo .v-mention { position: absolute; top: 14px; right: 16px; margin: 0; padding: 0; color: var(--sur-noir-2); }
.v-titre { font: italic 800 30px/.95 var(--impact); text-transform: uppercase; color: var(--orange-2); padding: 20px 18px 6px; }
.v-sous { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 0 18px 12px; color: var(--sur-noir-2); }
.v-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 18px; }
.v-grille span { background: var(--braise-3); border-radius: 8px; padding: 10px; font-size: 12px; line-height: 1.3; }
.v-grille span b { display: block; font: italic 800 20px/1 var(--impact); color: var(--orange-2); }
.v-podium { background: #1c1815; }
.v-marches { display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 18px 18px 0; flex: 1; }
.v-marches div { width: 30%; background: var(--braise-3); border-radius: 8px 8px 0 0; display: flex; flex-direction: column; align-items: center; padding-top: 10px; text-align: center; font-size: 11px; line-height: 1.25; }
.v-marches div b { font: italic 800 32px/1 var(--impact); color: var(--orange-2); }
.v-marches .m1 { height: 66%; box-shadow: inset 0 3px 0 var(--orange); } .v-marches .m2 { height: 50%; } .v-marches .m3 { height: 38%; }
.v-podium .v-mention { margin-top: 0; border-top: 1px solid #2a2320; }
.v-partenaires { background: #f4f1ec; color: #16181d; }
.v-partenaires .v-pro { position: absolute; top: 14px; right: 14px; color: #8a2c00; }
.v-merci { padding: 48px 18px 14px; font: italic 800 34px/.95 var(--impact); text-transform: uppercase; color: #16181d; }
.v-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 18px; }
.v-logos span { aspect-ratio: 2 / 1; border: 1px dashed rgba(22, 24, 29, .35); border-radius: 8px; display: grid; place-items: center; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #52453c; }
.v-partenaires .v-sans { margin-top: auto; padding-bottom: 16px; color: #52453c; }

/* ================= 14:00 : trois postes, un seul tournoi (21/10/2026) ================= */
.postes { border-radius: 20px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #2f2722; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.pst-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid #2a2320; }
.pst-tete b { font: italic 800 17px var(--impact); text-transform: uppercase; }
.pst-tete .swap, .pst-etat .swap { font: 600 11px var(--mono); letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; background: var(--braise-4); color: var(--sur-noir-2); }
.postes .attention { background: rgba(240, 179, 90, .14); color: var(--ambre); }
.postes .ok { background: rgba(62, 207, 122, .14); color: var(--vert); }
.pst { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--braise-3); }
.pst-nom { font: italic 800 15px var(--impact); text-transform: uppercase; letter-spacing: .02em; }
.pst-quoi { font-size: 13px; color: var(--sur-noir-2); min-width: 0; }
.pst-etat { font-style: normal; }
.pst-pied { font-size: 11px; color: var(--sur-noir-3); padding-top: 4px; }

@media (max-width: 1180px) {
  .ens-cadre.monde { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ens-cadre.monde .ens-globe { grid-column: 1 / -1; order: -1; min-height: 0; }
}
@media (max-width: 980px) {
  .ens-texte, .ens-points { grid-template-columns: minmax(0, 1fr); }
  .ens-cadre { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .ens-cadre, .ens-cadre.monde { grid-template-columns: minmax(0, 1fr); padding: 10px; box-shadow: var(--ombre-objet), inset 0 0 0 1px #2f2722, 0 0 0 4px #080706; }
  .ens-feuille { padding: 14px 10px; }
  .bf-papier { transform: none; padding: 18px 16px 14px; }
  .bf-deux { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ens-trois b { font-size: 18px; }
  .ens-trois > div { padding: 8px 10px; }
  .pst { grid-template-columns: minmax(0, 1fr) auto; }
  .pst-quoi { grid-column: 1 / -1; grid-row: 2; }
}
/* Au doigt, les choix font 44 px de haut. */
@media (pointer: coarse) {
  .ens-choix .hs-chip, .rs-onglets .hs-chip { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-diapo { transform: none; }
  .ens-cadre:not([hidden]) { animation: none; }
}

/* ================= J-1 : les impressions et l'affiche QR (28/10/2026) =================
   Le centre des impressions de VELOX en trois moments, et devant lui une affiche QR posée comme une feuille (couleurs
   du club empruntées, comme la page A4 du bilan). Le QR est vrai : il ouvre la page des participants de la démo. */
.vue-impr { padding-bottom: 200px; }
.ci { border-radius: 20px; background: var(--objet); box-shadow: var(--ombre-objet), inset 0 0 0 1px #2f2722; padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.ci-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #2a2320; }
.ci-tete b { font: italic 800 17px var(--impact); text-transform: uppercase; letter-spacing: .02em; }
.ci-cherche { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 12px; border-radius: 999px; background: var(--braise-2); border: 1px solid var(--braise-4); font-size: 12px; color: var(--sur-noir); white-space: nowrap; }
.ci-cherche svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--sur-noir-3); stroke-width: 1.8; stroke-linecap: round; }
.ci-cherche .ci-vide { color: var(--sur-noir-3); }
.ci-curseur { display: inline-block; width: 1px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--orange); }
.ci-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ci-col { border-radius: 12px; background: var(--braise-3); padding: 10px 12px 6px; }
.ci-sur { font: 600 10px var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--sur-noir-3); margin-bottom: 4px; }
.ci-col li { padding: 7px 0; border-top: 1px solid #2a2320; }
.ci-col li:first-child { border-top: 0; }
.ci-col b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--sur-noir); }
.ci-col small { display: block; font-size: 11px; color: var(--sur-noir-3); }
.ci-col .ens-offre { margin-left: 4px; padding: 0 6px; font-size: 9.5px; vertical-align: 1px; }
.ci-col li.ci-qr { margin: 0 -8px; padding: 7px 8px; border-radius: 8px; transition: background-color .3s var(--doux), box-shadow .3s var(--doux); }
.ci-col li.ci-qr.on { background: var(--orange-doux); box-shadow: inset 0 0 0 1px rgba(255, 77, 0, .5); }
.ci-pied { font-size: 11px; color: var(--sur-noir-3); }
.aq-papier { position: absolute; left: 44%; bottom: 0; z-index: 2; width: 196px; background: #f4efeb; color: #1c1815; border-radius: 6px; padding: 14px 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; transform: rotate(3deg); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4); }
.aq-tete { align-self: stretch; display: flex; align-items: center; gap: 8px; text-align: left; padding-bottom: 8px; border-bottom: 2px solid #135b43; }
.aq-logo { width: 26px; height: 26px; border-radius: 7px; flex: none; background: #135b43; color: #f2c14e; display: grid; place-items: center; font: italic 800 12px var(--impact); }
.aq-tete b { display: block; font: italic 800 13px/1 var(--impact); text-transform: uppercase; }
.aq-tete small { display: block; margin-top: 2px; font-size: 9.5px; color: #52453c; }
.aq-titre { font: italic 800 19px/1 var(--impact); text-transform: uppercase; color: #14110f; text-wrap: balance; margin-top: 2px; }
.aq-phrase { font-size: 10.5px; line-height: 1.4; color: #3a302a; text-wrap: pretty; }
.aq-qr { width: 118px; height: 118px; display: block; margin-top: 2px; }
.aq-qr rect { fill: #f4efeb; }
.aq-qr path { fill: none; stroke: #14110f; }
.aq-adresse { font-size: 10px; color: #3a302a; }
.aq-note { font: 600 9.5px var(--corps); letter-spacing: .12em; text-transform: uppercase; color: #8a2c00; }
@media (max-width: 980px) {
  .vue-impr { padding-bottom: 0; }
  .aq-papier { position: static; align-self: center; margin-top: -8px; transform: rotate(2deg); }
}
@media (max-width: 560px) {
  .ci { padding: 14px 12px 12px; }
  .ci-tete { flex-wrap: wrap; }
  .ci-cols { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ci-col li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .ci-col small { text-align: right; }
}

/* ================= Retouches du 28/10/2026 : contrastes lisibles et cibles de 44 px (vérificateur sv-design) ================= */
/* L'étiquette « maintenant » se lit sur la tête, pas sur le trait blanc qui la porte. */
.frise-maintenant em { background: var(--braise); padding: 0 4px; border-radius: 3px; }
/* Les points qui séparent les résultats de la bande : lisibles, sans prendre l'orange. */
.bande-piste em { color: var(--sur-noir-3); }
/* Un bloc passé de la grille du jour s'éteint en gris lisible plutôt qu'en transparence. */
.b { transition: opacity .5s var(--doux), background-color .5s var(--doux), color .5s var(--doux), box-shadow .3s, transform .3s var(--doux); }
.b.passe { opacity: 1; background: #1f1a17; color: var(--sur-noir-3); }
.b.f.passe { background: #3a2217; color: #ffb08c; }
/* Un match terminé sur la TV : des noms et des scores plus discrets, toujours lisibles. */
.tt.fini { opacity: 1; }
.tt.fini .tt-eq b { color: var(--sur-noir-2); font-weight: 500; }
.tt.fini .tt-eq .mono { color: var(--sur-noir-3); }
/* Le trait « maintenant » se saisit au doigt : une zone de 44 px, le trait dessiné au même endroit, sans déborder du rang. */
@media (max-width: 1180px) {
  .frise-maintenant { top: -34px; width: 48px; height: 48px; margin-left: -23px; border-radius: 10px; box-shadow: none; background: linear-gradient(var(--sur-noir), var(--sur-noir)) 50% 28px / 2px 14px no-repeat; }
  .frise-maintenant::after, .frise-maintenant::before { top: 35px; }
}
@media (max-width: 560px) {
  .tete .logo, .tete-actions .lien-discret { min-height: 44px; display: inline-flex; align-items: center; }
  .bouton.petit, .org-alerte-bouton, .hs-chip, .ens-choix .hs-chip { min-height: 44px; }
  .hs-chip { height: auto; }
  .tuile-votre { min-height: 44px; display: inline-flex; align-items: center; }
  .lien-fleche { min-height: 44px; display: inline-flex; align-items: flex-end; }
  .pied .logo, .pied nav a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .pied nav { gap: 0 22px; }
}