/* L'ÉTUDE AVANT L'OUVERTURE : velox.events/etude, version 2.
   À gauche, le questionnaire, sur le noir chaud de la vitrine, avec la voix de Steven. À droite, VELOX en
   mouvement, qui change à chaque étape : l'écran du club sport par sport, la page d'inscription aux
   couleurs d'un club, le tableau et la grille du jour, l'avant et l'après, le téléphone du joueur, l'écran TV.
   Aucun style ni script dans la page : la politique de sécurité de la vitrine l'interdit. */
/* Polices servies par la vitrine elle-même : aucun tiers (politique de sécurité de velox.events). */
@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'); }
:root {
  --braise: #14110f; --braise-2: #1c1815; --braise-3: #27211d; --braise-4: #3a302a; --braise-5: #52453c;
  --scene: #0d0b0a;
  --sur-noir: #f4efeb; --sur-noir-2: #d3cac2; --sur-noir-3: #a59a91;
  --orange: #ff4d00; --orange-2: #ff7a3d; --orange-doux: rgba(255, 77, 0, .14);
  --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);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--braise); color: var(--sur-noir); font: 17px/1.6 var(--corps); -webkit-font-smoothing: antialiased; }
h1, h2, p, ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; } fieldset { border: 0; min-width: 0; }
button, input, textarea { font: inherit; 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); }

.scene { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }

/* ================= Le questionnaire ================= */
.cote-form { padding: 32px clamp(24px, 5vw, 88px) 72px; display: flex; flex-direction: column; }
/* Les liens légaux, discrets, en bas du questionnaire (checklist légale du 30/09/2026). */
.pied-legal { margin-top: auto; padding-top: 40px; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; }
.pied-legal a { color: var(--sur-noir-3); text-decoration: none; padding: 6px 0; }
.pied-legal a:hover, .pied-legal a:focus-visible { color: var(--sur-noir); text-decoration: underline; }
.haut { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: clamp(40px, 8vh, 88px); }
.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; }
.progression { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--sur-noir-3); }
/* Cinq segments, un par étape : les passés sont pleins, celui en cours à moitié. */
.segments { display: flex; gap: 4px; }
.segments li { width: 28px; height: 4px; border-radius: 999px; background: var(--braise-3); overflow: hidden; position: relative; }
.segments li::after { content: ''; position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--doux); }
.segments li.fait::after { transform: scaleX(1); }
.segments li.encours::after { transform: scaleX(.45); }

form { max-width: 640px; width: 100%; }
.etape { display: flex; flex-direction: column; gap: 32px; }
.etape.entre { animation: entre .55s var(--doux) both; }
@keyframes entre { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.surtitre { font: 600 13px var(--corps); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
h1 { font: italic 800 clamp(38px, min(10.5vw, 5.6vw + 20px), 84px)/.9 var(--impact); text-transform: uppercase; letter-spacing: -.005em; margin-top: -12px; text-wrap: balance; }
h1 em { color: var(--orange); font-style: italic; display: block; }
h2 { font: italic 800 clamp(32px, min(9vw, 4.2vw + 16px), 58px)/.95 var(--impact); text-transform: uppercase; margin-top: -14px; text-wrap: balance; }
.chapeau { font-size: 19px; line-height: 1.6; color: var(--sur-noir-2); max-width: 54ch; }
.aide { font-size: 17px; color: var(--sur-noir-2); max-width: 58ch; margin-top: -12px; } .aide b { color: var(--sur-noir); font-weight: 600; }
.discret { font-size: 14px; color: var(--sur-noir-3); }

/* Le mot de Steven : une lettre, pas une carte. */
.mot { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; }
.mot-initiale { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: italic 800 22px var(--impact); color: var(--orange); background: #2a1a12; box-shadow: inset 0 0 0 1px rgba(255, 77, 0, .45); }
.mot-texte { display: flex; flex-direction: column; gap: 12px; font-size: 18px; line-height: 1.65; color: var(--sur-noir-2); max-width: 56ch; }
.signature { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; font: italic 800 24px/1 var(--impact); color: var(--sur-noir); text-transform: uppercase; letter-spacing: .02em; }
.signature small { font: 500 13px var(--corps); text-transform: none; letter-spacing: .02em; color: var(--sur-noir-3); }
.mot-lettre { grid-template-columns: minmax(0, 1fr); }
.mot-court { align-items: start; }
.mot-court .mot-initiale .ico { width: 22px; height: 22px; opacity: 1; }
.mot-court p { font-size: 16px; line-height: 1.6; color: var(--sur-noir-2); }

.promesses { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 1px solid var(--braise-3); }
.promesses li { position: relative; padding-left: 36px; color: var(--sur-noir-2); font-size: 17px; }
.promesses .ico { position: absolute; left: 0; top: .15em; width: 22px; height: 22px; color: var(--orange-2); opacity: 1; }
.promesses b { color: var(--sur-noir); font-weight: 600; }

/* Une question : l'intitulé, les choix, et le rappel si elle manque. */
.q { display: flex; flex-direction: column; gap: 12px; border-radius: 16px; transition: box-shadow .25s, background .25s; }
legend, .libre { font-weight: 600; font-size: 17px; margin-bottom: 12px; }
legend small, .libre small { font-weight: 400; color: var(--sur-noir-3); font-size: 14px; margin-left: 6px; }
.q.manque { box-shadow: 0 0 0 1px rgba(255, 77, 0, .55), 0 0 0 8px rgba(255, 77, 0, .06); background: rgba(255, 77, 0, .035); padding: 14px 16px 16px; margin: -15px -17px; }
.q.manque > legend { color: var(--orange-2); padding-top: 14px; }
.q.manque > legend::after { content: 'à compléter'; margin-left: 10px; padding: 2px 8px; border-radius: 999px; background: var(--orange); color: #160800; font: 600 11px var(--corps); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }

/* Les puces : un choix, ou plusieurs. */
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puces button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--braise-4); background: var(--braise-2); color: var(--sur-noir-2); font-size: 15px; font-weight: 500; line-height: 1.3; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .15s var(--doux); }
.puces button:hover { border-color: var(--braise-5); color: var(--sur-noir); }
.puces button:active { transform: scale(.97); }
.puces button[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #160800; font-weight: 600; }
.refuse { animation: refuse .22s; }
@keyframes refuse { 33% { transform: translateX(-3px); } 66% { transform: translateX(3px); } }

.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.puces button[aria-pressed="true"] .ico { opacity: 1; }
.cartes .ico { width: 26px; height: 26px; display: block; margin-bottom: 10px; color: var(--orange-2); opacity: 1; }
.cartes button[aria-pressed="true"] .ico { color: var(--orange); }

/* Les cartes : un choix, avec sa précision. */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
/* Cinq cartes : trois puis deux, sur toute la largeur, jamais une orpheline. */
.cartes:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cartes:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
.cartes:has(> :nth-child(5):last-child) > :nth-child(n + 4) { grid-column: span 3; }
.cartes button { text-align: left; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--braise-4); background: var(--braise-2); cursor: pointer; transition: border-color .15s, background .15s, transform .15s var(--doux); }
.cartes button b { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.cartes button small { color: var(--sur-noir-3); font-size: 13px; line-height: 1.35; display: block; margin-top: 3px; }
.cartes button:hover { border-color: var(--braise-5); }
.cartes button:active { transform: scale(.985); }
.cartes button[aria-pressed="true"] { border-color: var(--orange); background: #2c1a10; box-shadow: inset 0 0 0 1px var(--orange); }
.cartes button[aria-pressed="true"] small { color: var(--sur-noir-2); }

/* L'échelle : des nombres, alignés comme une règle. */
.echelle { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--braise-4); border-radius: 14px; overflow: hidden; }
.echelle button { min-height: 60px; border: 0; border-left: 1px solid var(--braise-4); background: var(--braise-2); cursor: pointer; transition: background .15s; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 4px; }
.echelle button:first-child { border-left: 0; }
.echelle button b { font: 700 24px/1.05 var(--impact); }
.echelle button small { font-size: 11px; color: var(--sur-noir-3); letter-spacing: .04em; }
.echelle button:hover { background: var(--braise-3); }
.echelle button[aria-pressed="true"] { background: var(--orange); color: #160800; }
.echelle button[aria-pressed="true"] small { color: #3a1500; }

/* « Autre » : le champ s'ouvre sous les choix. */
.autre-champ, .libre textarea, .champ input { background: var(--braise-2); border: 1px solid var(--braise-4); border-radius: 12px; padding: 12px 14px; font-size: 16px; font-weight: 400; color: var(--sur-noir); }
.autre-champ { animation: entre .3s var(--doux) both; max-width: 420px; }
.autre-champ::placeholder, textarea::placeholder, .champ input::placeholder, .montant input::placeholder { color: var(--sur-noir-3); }
.autre-champ:focus, textarea:focus, .champ input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-doux); }
.q.manque .autre-champ:placeholder-shown { border-color: var(--orange); }

/* Le bilan du temps : leurs propres chiffres, posés à plat. */
.bilan { padding: 22px 24px; border-radius: 18px; background: #201813; border: 1px solid #3d2a1f; display: flex; flex-direction: column; gap: 8px; animation: entre .5s var(--doux) both; }
.bilan-sur { font: 600 12px var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--sur-noir-3); }
.bilan-chiffre { font: italic 800 clamp(28px, 2.8vw, 36px)/1.05 var(--impact); text-transform: uppercase; color: var(--sur-noir); text-wrap: balance; }
.bilan-chiffre em { font-style: italic; color: var(--orange); }
.bilan-texte { font-size: 16px; color: var(--sur-noir-2); line-height: 1.6; max-width: 56ch; }
.bilan-texte { display: flex; flex-direction: column; gap: 10px; }
.bilan-liste { display: flex; flex-direction: column; gap: 8px; }
.bilan-liste li { position: relative; padding-left: 30px; color: var(--sur-noir); }
.bilan-liste li::before { content: ''; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--orange); }
.bilan-liste li::after { content: ''; position: absolute; left: 7px; top: calc(.2em + 4px); width: 5px; height: 9px; border: solid #160800; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* L'échelle des prix : une réponse par ligne, trois pastilles. */
.echelle-prix { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; border-radius: 18px; background: var(--braise-2); border: 1px solid var(--braise-4); }
.ep-tete, .palier { display: grid; grid-template-columns: 96px repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.ep-tete span { text-align: center; font: 600 12px var(--corps); letter-spacing: .08em; text-transform: uppercase; color: var(--sur-noir-3); padding-bottom: 4px; }
.palier { padding: 4px 0; border-top: 1px solid var(--braise-3); }
.palier b { font-size: 18px; font-weight: 600; }
.palier button { height: 40px; border-radius: 12px; border: 1px solid var(--braise-4); background: transparent; cursor: pointer; display: grid; place-items: center; transition: background .15s, border-color .15s, transform .15s var(--doux); }
.palier button::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--braise-5); transition: background .15s, border-color .15s; }
.palier button:hover { background: var(--braise-3); }
.palier button:active { transform: scale(.96); }
.palier button[aria-pressed="true"][data-r="oui"] { background: rgba(62, 207, 122, .16); border-color: var(--vert); }
.palier button[aria-pressed="true"][data-r="oui"]::before { background: var(--vert); border-color: var(--vert); }
.palier button[aria-pressed="true"][data-r="hesite"] { background: rgba(240, 179, 90, .14); border-color: var(--ambre); }
.palier button[aria-pressed="true"][data-r="hesite"]::before { background: var(--ambre); border-color: var(--ambre); }
.palier button[aria-pressed="true"][data-r="non"] { background: rgba(255, 107, 91, .14); border-color: var(--rouge); }
.palier button[aria-pressed="true"][data-r="non"]::before { background: var(--rouge); border-color: var(--rouge); }
.palier button.auto { border-style: dashed; }
.ep-note { font-size: 13px; color: var(--sur-noir-3); padding-top: 8px; }
.ep-alerte { font-size: 14px; color: var(--ambre); }

/* Le bon prix : un grand chiffre à taper, sans curseur qui souffle une réponse. */
.montant { display: flex; align-items: baseline; gap: 12px; padding: 10px 22px; border-radius: 18px; background: var(--braise-2); border: 1px solid var(--braise-4); width: fit-content; transition: border-color .15s, box-shadow .15s; }
.montant:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-doux); }
.montant input { width: 3.2ch; background: none; border: 0; outline: none; font: 500 52px/1.1 var(--mono); color: var(--sur-noir); text-align: right; padding: 0; }
.montant span { font: 500 26px var(--mono); color: var(--sur-noir-2); }
.montant small { font: 500 15px var(--corps); color: var(--sur-noir-3); margin-left: 4px; }

/* Les coordonnées : des bulles à ajouter, rien d'imposé. */
.libre { display: flex; flex-direction: column; gap: 10px; }
.libre > span { display: block; }
.libre textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.contact { gap: 16px; padding-top: 26px; border-top: 1px solid var(--braise-3); }
.bulles { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 62px; }
.bulle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px 6px 8px; border-radius: 999px; border: 1px dashed var(--braise-5); background: transparent; color: var(--sur-noir-2); font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s, background .15s, transform .15s var(--doux); }
.bulle i { position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--braise-3); transition: background .15s, transform .25s var(--doux); }
.bulle i::before, .bulle i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; border-radius: 2px; background: var(--sur-noir-2); }
.bulle i::after { transform: rotate(90deg); }
.bulle:hover { border-color: var(--orange); color: var(--sur-noir); border-style: solid; }
.bulle:hover i { background: var(--orange); transform: rotate(90deg); }
.bulle:hover i::before, .bulle:hover i::after { background: #160800; }
.champs-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-left: 62px; }
.champ { position: relative; display: flex; flex-direction: column; gap: 6px; animation: entre .3s var(--doux) both; }
.champ[data-champ="email"], .champ[data-champ="club"] { grid-column: span 2; }
.champ > span { font-size: 13px; font-weight: 600; color: var(--sur-noir-2); }
.champ input { padding-right: 44px; }
.champ.invalide input { border-color: var(--orange); }
.retirer { position: absolute; right: 6px; bottom: 6px; width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; }
.retirer::before, .retirer::after { content: ''; position: absolute; left: 11px; top: 16px; width: 12px; height: 2px; border-radius: 2px; background: var(--sur-noir-3); transform: rotate(45deg); }
.retirer::after { transform: rotate(-45deg); }
.retirer:hover { background: var(--braise-3); }
.retirer:hover::before, .retirer:hover::after { background: var(--sur-noir); }
.contact-erreur { padding-left: 62px; font-size: 14px; color: var(--orange-2); }
.rgpd { font-size: 13px; line-height: 1.55; color: var(--sur-noir-3); max-width: 62ch; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Les boutons du bas, et ce qui reste à remplir. */
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 8px; }
.btn-go { height: 56px; padding: 0 28px; border: 0; border-radius: 14px; background: var(--orange); color: #160800; font-weight: 600; font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 28px -10px rgba(255, 77, 0, .6); transition: transform .15s var(--doux), box-shadow .15s, filter .2s; }
.btn-go:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(255, 77, 0, .7); }
.btn-go span { transition: transform .15s var(--doux); } .btn-go:hover span { transform: translateX(4px); }
.btn-go.incomplet { filter: saturate(.55) brightness(.8); box-shadow: none; }
.btn-retour { height: 56px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--braise-4); background: none; color: var(--sur-noir-2); font-weight: 600; cursor: pointer; }
.btn-retour:hover { color: var(--sur-noir); border-color: var(--braise-5); }
/* Retour d'un visiteur (28/09/2026) : revenir en arrière sans descendre en bas de l'étape. Discret, en tête. */
.retour-haut { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; margin-bottom: -12px;
  border-radius: 999px; border: 1px solid var(--braise-4); background: none; color: var(--sur-noir-2); font: 600 14px var(--corps); cursor: pointer; }
.retour-haut:hover { color: var(--sur-noir); border-color: var(--braise-5); }
.retour-haut:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.reste { font-size: 14px; color: var(--sur-noir-3); }
.reste b { color: var(--sur-noir); font-weight: 600; }

/* Merci */
.merci-coche svg { width: 72px; height: 72px; fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.merci-coche circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: trace .7s var(--doux) forwards; }
.merci-coche path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: trace .4s .55s var(--doux) forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.legende-g { font: 600 13px var(--corps); letter-spacing: .14em; text-transform: uppercase; color: var(--sur-noir-3); }
.partage { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--braise-2); border: 1px solid var(--braise-4); max-width: 460px; }
.partage .mono { flex: 1; color: var(--sur-noir); }
.partage .btn-retour { height: 42px; }

/* ================= Les aperçus de VELOX ================= */
.cote-apercu { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--scene); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 48px clamp(24px, 4vw, 64px); box-shadow: inset 1px 0 0 #221c18; }
.halo { display: none; }
.apercu { grid-area: 1 / 1; width: min(580px, 100%); display: flex; flex-direction: column; gap: 18px; opacity: 0; visibility: hidden; transform: translateY(18px) scale(.98); transition: opacity .5s var(--doux), transform .6s var(--doux), visibility 0s .6s; }
.apercu.active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--doux), transform .6s var(--doux), visibility 0s; }
.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; }
.nom:not(.on) { color: transparent; background: linear-gradient(90deg, var(--braise-4), #453931, var(--braise-4)); background-size: 200% 100%; border-radius: 4px; animation: attente 1.4s linear infinite; }
@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); } }

/* Avant, et avec VELOX. */
.apercu[data-apercu="3"] { width: min(680px, 100%); }
.duo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.avant { border-radius: 16px; background: #1a1917; border: 1px solid #2d2b28; padding: 12px; transform: rotate(-3deg) translateY(-6px); filter: saturate(.6); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.av-onglets { display: flex; gap: 4px; margin-bottom: 8px; overflow: hidden; }
.av-onglets span { font: 500 10px var(--mono); padding: 4px 8px; border-radius: 6px 6px 0 0; background: #24221f; color: #8d8a84; white-space: nowrap; }
.av-onglets span:first-child { background: #2e2b27; color: #c9c5bf; }
.av-grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; font-size: 11px; border-top: 1px solid #34312d; border-left: 1px solid #34312d; }
.av-grille span { padding: 5px 6px; border-right: 1px solid #34312d; border-bottom: 1px solid #34312d; color: #aaa59e; white-space: nowrap; overflow: hidden; }
.av-grille .h { background: #24221f; color: #d8d3cc; font-weight: 600; }
.av-grille .err { color: var(--rouge); background: rgba(255, 107, 91, .08); animation: vacille 2.6s infinite; }
.av-grille .doute { color: var(--ambre); }
@keyframes vacille { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.av-pied { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #aaa59e; }
.av-pied i { width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); flex: none; }
.avec { border-radius: 18px; background: #1b1512; border: 1px solid rgba(255, 77, 0, .35); padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--ombre-objet); }
.avec-tete { font: italic 800 20px var(--impact); text-transform: uppercase; }
.fil { display: flex; flex-direction: column; gap: 8px; }
.fil li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; color: var(--sur-noir-3); transition: color .3s; }
.fil li i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--braise-4); position: relative; transition: background .3s, box-shadow .3s; }
.fil li i::after { content: ''; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #160800; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--doux); }
.fil li b { font-size: 11.5px; font-weight: 500; color: var(--sur-noir-3); opacity: 0; transition: opacity .3s; }
.fil li.on { color: var(--sur-noir); }
.fil li.on i { background: var(--orange); box-shadow: none; }
.fil li.on i::after { transform: rotate(45deg) scale(1); }
.fil li.on b { opacity: 1; color: var(--orange-2); }
.avec-pied { font-size: 13px; color: var(--sur-noir-2); padding-top: 10px; border-top: 1px solid #2c2420; }

/* 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%); } }

/* ================= Tablette et téléphone : le questionnaire d'abord ================= */
@media (max-width: 1180px) {
  .duo { grid-template-columns: 1fr; }
  .avant { transform: rotate(-1.2deg); }
}
@media (max-width: 980px) {
  .scene { grid-template-columns: 1fr; }
  /* L'aperçu passe dessous : il accompagne, il ne coupe pas le questionnaire. */
  .cote-apercu { position: relative; height: auto; min-height: 0; padding: 36px 16px 44px; box-shadow: inset 0 1px 0 #221c18; grid-row: 2; }
  .apercu { width: 100%; } .apercu:not(.active) { display: none; }
  .tel { transform: scale(.88); margin: -32px 0; }
  .haut { margin-bottom: 36px; }
  .segments li { width: 14px; }
  .progression { gap: 10px; }
  .cote-form { padding: 22px 16px 56px; }
  .bulles, .champs-contact, .contact-erreur { padding-left: 0; }
}
@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; }
  .ep-tete, .palier { grid-template-columns: 70px repeat(3, minmax(0, 1fr)); gap: 6px; }
  .palier b { font-size: 15px; }
  .ep-tete span { font-size: 10.5px; letter-spacing: .04em; }
  .champs-contact { grid-template-columns: 1fr; }
  .champ[data-champ="email"], .champ[data-champ="club"] { grid-column: auto; }
  .mot:not(.mot-lettre) { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; } .mot-initiale { width: 36px; height: 36px; font-size: 18px; }
  .echelle button b { font-size: 20px; }
  .actions .discret { flex-basis: 100%; }
  .q.manque { margin: -15px -10px; padding: 14px 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .merci-coche circle, .merci-coche path { stroke-dashoffset: 0; }
  .gr-maintenant { left: 55%; }
}

/* L'étude fermée depuis le Cockpit, et la raison d'un envoi refusé. */
.ferme { padding: 16px 20px; border-radius: 14px; background: var(--braise-2); border: 1px solid var(--braise-4); color: var(--sur-noir); font-size: 17px; }
.envoi-erreur { font-size: 15px; color: var(--orange-2); }
.btn-go[disabled] { cursor: progress; filter: saturate(.55) brightness(.8); }

.rgpd a { color: var(--sur-noir-2); text-underline-offset: 3px; }
.rgpd a:hover { color: var(--sur-noir); }