/* VITRINE VELOX (velox.events). CSS maison, aucune dépendance, aucun script tiers.
   Le monde : le noir chaud de l'écran d'accueil de l'application, une seule couleur vive
   (l'orange de course), Barlow Condensed pour ce qui se crie, Barlow pour ce qui se lit,
   Plex Mono pour ce qui se compte. Tout le relief est réservé au mur des terrains. */

@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: 700; 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: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --braise: #14110f;      /* noir chaud */
  --braise-2: #1e1916;
  --braise-3: #2b2420;
  --papier: #f0f0ee;
  --surface: #ffffff;
  --encre: #16181d;
  --encre-2: #5b616b;
  --sur-noir: #f4efeb;
  --sur-noir-2: #b8aea6;
  --ligne: #dcdcd6;
  --orange: #ff4d00;
  --orange-texte: #c23a00;  /* 5,39 sur blanc : l'orange de marque n'y tient que 3,3 */
  --vert: #3ecf7a;
  --impact: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --corps: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;
  --large: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--corps); font-size: 17px; line-height: 1.6; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.saut { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: 6px; z-index: 10; }
.saut:focus { left: 8px; }

/* ---------- tête ---------- */
.tete { position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--large); margin: 0 auto; padding: 20px 24px; color: var(--sur-noir); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--impact); font-weight: 800; font-size: 26px; letter-spacing: 0.04em; font-style: italic; }
.logo.petit { font-size: 20px; }
.tete nav { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 500; }
.tete nav a { text-decoration: none; color: var(--sur-noir-2); }
.tete nav a:hover { color: var(--sur-noir); }
.tete nav .discret { color: var(--sur-noir); border: 1px solid rgba(244, 239, 235, 0.28); padding: 6px 14px; border-radius: 999px; }

/* ---------- hero ---------- */
.hero { position: relative; background:
    radial-gradient(900px 480px at 78% 108%, rgba(255, 77, 0, 0.30), transparent 62%),
    radial-gradient(600px 300px at 8% -10%, rgba(255, 77, 0, 0.10), transparent 70%),
    var(--braise);
  color: var(--sur-noir); padding: 136px 24px 88px; overflow: hidden; }
.hero > * { position: relative; }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.hero::before { content: ''; position: absolute; inset: 0; width: auto; pointer-events: none; }
.hero-texte, .mur { max-width: calc(var(--large) / 2); }
.hero-texte { justify-self: end; width: 100%; }
.mur { justify-self: start; width: 100%; }
.surtitre { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 20px; }
h1 { font-family: var(--impact); font-weight: 800; font-size: clamp(2.6rem, 4.7vw, 4.5rem); line-height: 0.98; letter-spacing: -0.005em; text-transform: uppercase; }
.chapo { margin-top: 24px; max-width: 34em; font-size: 19px; line-height: 1.55; color: var(--sur-noir-2); }
.hero-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.hero-note { margin-top: 20px; font-size: 15px; color: var(--sur-noir-2); }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--orange); color: #160800; font: 600 16px/1.2 var(--corps); text-decoration: none; transition: transform 0.12s ease, box-shadow 0.18s ease; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 24px -8px rgba(255, 77, 0, 0.6); }
.bouton:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 12px 28px -8px rgba(255, 77, 0, 0.7); }
.bouton:active { transform: translateY(0); }
.bouton.clair { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.bouton.clair:hover { background: var(--encre); color: var(--surface); box-shadow: inset 0 0 0 1.5px var(--encre); }
.bouton[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.lien-fleche { font-weight: 600; text-decoration: none; color: var(--sur-noir); border-bottom: 1px solid rgba(244, 239, 235, 0.4); padding-bottom: 2px; }
.lien-fleche::after { content: ' →'; }

/* ---------- le mur des terrains ---------- */
.mur { background: linear-gradient(180deg, var(--braise-2), #171310); border: 1px solid #3a302a; border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 40px 80px -32px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.4);
  transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); transform-origin: left center; }
.mur figcaption, .mur-pied { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sur-noir-2); }
.mur figcaption { border-bottom: 1px solid #332a25; }
.mur figcaption .mono { color: var(--sur-noir); letter-spacing: 0.02em; font-size: 15px; }
.mur li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 84px; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #2a221e; }
.mur li.en-jeu { background: linear-gradient(90deg, rgba(255, 77, 0, 0.13), transparent 60%); }
.mur li.fini { opacity: 0.55; }
.terrain { font-family: var(--impact); font-weight: 800; font-size: 24px; color: var(--sur-noir-2); }
.en-jeu .terrain { color: var(--orange); }
.match { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-weight: 500; font-size: 16px; }
.match span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sets { display: flex; flex-direction: column; gap: 2px; text-align: right; font-size: 16px; word-spacing: 0.5em; color: var(--sur-noir); }
.etat { justify-self: end; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sur-noir-2); }
.en-jeu .etat { color: var(--vert); display: inline-flex; align-items: center; gap: 6px; }
.en-jeu .etat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); animation: battre 1.6s ease-in-out infinite; }
@keyframes battre { 50% { opacity: 0.25; } }
.mur-pied { border-top: 1px solid #332a25; text-transform: none; letter-spacing: 0; font-size: 14px; }
.mur-pied b { color: var(--sur-noir); font-weight: 500; margin-left: 6px; }

/* ---------- sections claires ---------- */
section:not(.hero) { padding: 88px 24px; }
section:not(.hero) > * { max-width: var(--large); margin-left: auto; margin-right: auto; }
h2 { font-family: var(--impact); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.005em; text-wrap: balance; }
.intro { margin-top: 16px; max-width: 40em; font-size: 19px; color: var(--encre-2); }

.sports { background: var(--surface); padding-top: 32px !important; padding-bottom: 32px !important; border-bottom: 1px solid var(--ligne); }
.sports p { font-size: 17px; color: var(--encre-2); }
.sports strong { color: var(--encre); font-weight: 600; }
.sports a, .questions a { color: var(--orange-texte); font-weight: 600; }

.moment { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; margin-top: 56px; padding-top: 32px; border-top: 2px solid var(--encre); }
.moment h3 { font-family: var(--impact); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; position: sticky; top: 24px; align-self: start; }
.cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.cartes h4 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.cartes p { margin-top: 8px; color: var(--encre-2); max-width: 32em; }

/* ---------- tarifs ---------- */
.tarifs { background: var(--surface); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.offres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; align-items: stretch; }
.offre { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 24px 24px; border: 1px solid var(--ligne); border-radius: 16px; background: var(--papier); }
.offre h3 { font-family: var(--impact); font-weight: 800; font-size: 28px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
.offre .prix { font-family: var(--impact); font-weight: 700; font-size: 34px; line-height: 1.1; }
.offre .prix small { display: block; margin-top: 4px; font: 500 14px/1.3 var(--corps); color: var(--encre-2); }
.offre .pour { font-size: 15px; color: var(--encre-2); min-height: 3.2em; }
.offre ul { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 12px; font-size: 15px; line-height: 1.45; flex: 1; }
.offre li { padding-left: 22px; position: relative; }
.offre li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 12px; height: 7px; background: var(--orange); clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); }
.offre .bouton { width: 100%; font-size: 15px; padding: 12px 14px; }
.offre.phare { background: var(--braise); color: var(--sur-noir); border-color: var(--braise); padding-top: 0; overflow: hidden; box-shadow: 0 32px 64px -32px rgba(20, 17, 15, 0.6); }
.offre.phare .pour, .offre.phare .prix small { color: var(--sur-noir-2); }
/* Dans le flux, pas en absolu : quelle que soit sa longueur, le ruban ne recouvre jamais le titre. */
.ruban { margin: 0 -24px 16px; padding: 10px 24px; background: var(--orange); color: #160800; font-size: 13px; font-weight: 600; }
.franchise { margin-top: 32px; max-width: 46em; font-size: 15px; color: var(--encre-2); }

/* ---------- fondateurs ---------- */
.fondateurs { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; max-width: calc(var(--large) + 48px); margin: 0 auto; align-items: start; }
.fondateurs > * { max-width: none !important; margin: 0 !important; }
.fondateurs-texte p { margin-top: 20px; font-size: 18px; color: var(--encre-2); max-width: 30em; }
.fondateurs-texte strong { color: var(--encre); }
form { display: flex; flex-direction: column; gap: 16px; padding: 32px; background: var(--surface); border: 1px solid var(--ligne); border-radius: 16px; box-shadow: 0 24px 48px -32px rgba(20, 17, 15, 0.35); }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
input, select, textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--ligne); border-radius: 8px; background: var(--surface); color: var(--encre); font: 400 16px/1.4 var(--corps); }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; border-color: var(--orange-texte); box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.18); }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.retour { min-height: 1.5em; font-size: 15px; font-weight: 500; }
.retour.ok { color: #177a43; }
.retour.erreur { color: #b53030; }

/* ---------- questions ---------- */
.questions { background: var(--surface); border-top: 1px solid var(--ligne); }
.questions details { border-bottom: 1px solid var(--ligne); max-width: 820px !important; margin-left: max(0px, calc((100% - var(--large)) / 2)) !important; }
.questions h2 { margin-bottom: 32px; }
.questions summary { cursor: pointer; padding: 20px 32px 20px 0; font-size: 19px; font-weight: 600; list-style: none; position: relative; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 500 26px/1 var(--mono); color: var(--orange-texte); }
.questions details[open] summary::after { content: '−'; }
.questions details p { padding: 0 32px 24px 0; color: var(--encre-2); max-width: 44em; }

.pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 32px 24px; background: var(--braise); color: var(--sur-noir-2); font-size: 14px; }
.pied .logo { color: var(--sur-noir); }

/* ---------- petits écrans ---------- */
@media (max-width: 1080px) {
  .offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offre.phare { order: -1; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 112px 20px 64px; }
  .hero-texte, .mur { max-width: 620px; justify-self: center; }
  .mur { transform: none; }
  .moment { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .moment h3 { position: static; }
  .fondateurs { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  section:not(.hero) { padding: 64px 20px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .tete { padding: 16px; }
  .tete nav { gap: 14px; font-size: 14px; }
  .tete nav a:not(.discret) { display: none; }
  .cartes, .offres, .deux { grid-template-columns: minmax(0, 1fr); }
  .cartes { gap: 28px; }
  .mur li { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; }
  .mur .etat { display: none; }
  .mur figcaption, .mur-pied { padding: 12px 14px; }
  .match { font-size: 15px; }
  form { padding: 20px; }
  .offre .pour { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .en-jeu .etat::before { animation: none; }
  .bouton { transition: none; }
}