/* ============================================================
   QANTIXX LIVE — charte A « Piste de nuit »
   Bleu nuit + accent ambre · Bebas Neue / Inter / DM Mono
   Pensé d'abord pour le téléphone (bord de piste), élargi sur écran.
   ============================================================ */
:root {
  --nuit: #0a1222;
  --nuit2: #101b30;
  --carte: #14213b;
  --carte2: #1a2a48;
  --ligne: #22324f;
  --ambre: #f5a623;
  --ambre-doux: rgba(245, 166, 35, .14);
  --texte: #e8edf6;
  --doux: #93a3bf;
  --pale: #5f7090;
  --vert: #3ddc84;
  --rouge: #ff5d5d;
  --or: #f5c542; --argent: #c9d1dc; --bronze: #d08a4e;
  --titre: 'Bebas Neue', sans-serif;
  --ui: 'Inter', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--nuit); color: var(--texte);
  font-family: var(--ui); font-size: 15px; line-height: 1.4;
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ── En-tête ── */
.entete {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: rgba(10, 18, 34, .92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--ligne);
}
.marque { display: flex; align-items: center; gap: 8px; }
.marque-nom { font-family: var(--titre); font-size: 26px; letter-spacing: 3px; line-height: 1; }
.marque-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 2px;
  color: var(--nuit); background: var(--ambre); padding: 3px 7px; border-radius: 4px;
}
.marque-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--nuit); }
.fil { color: var(--doux); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55vw; }
.fil:hover { color: var(--ambre); }

/* ── Page ── */
.page { width: 100%; max-width: 960px; margin: 0 auto; padding: 18px 16px 40px; flex: 1; }
.pied { text-align: center; color: var(--pale); font-size: 11px; padding: 18px 16px 24px; border-top: 1px solid var(--ligne); }
.titre-page { font-family: var(--titre); font-size: 34px; letter-spacing: 1.5px; line-height: 1.05; font-weight: 400; }
.titre-page.barre { text-decoration: line-through; color: var(--pale); }
.sous-titre { color: var(--doux); font-size: 14px; margin-top: 4px; }
.bloc { margin-top: 24px; }
.titre-bloc {
  font-family: var(--titre); font-weight: 400; font-size: 22px; letter-spacing: 1.5px;
  color: var(--ambre); margin: 22px 0 10px;
}
.titre-bloc small { font-family: var(--mono); font-size: 12px; color: var(--doux); letter-spacing: 0; margin-left: 6px; }
.vide { color: var(--doux); padding: 24px 0; text-align: center; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 20px; white-space: nowrap;
}
.badge-direct { background: rgba(255, 93, 93, .15); color: var(--rouge); }
.badge-direct i { width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); animation: pulse 1.4s infinite; }
.badge-fini { background: var(--ambre-doux); color: var(--ambre); }
.badge-avenir { background: var(--carte2); color: var(--doux); }
.badge-annule { background: transparent; color: var(--pale); border: 1px solid var(--ligne); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ── Accueil : cartes concours ── */
.grille-concours { display: grid; gap: 10px; }
@media (min-width: 720px) { .grille-concours { grid-template-columns: 1fr 1fr; } }
.carte-concours {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.carte-concours:hover { border-color: var(--ambre); background: var(--carte2); }
.carte-concours.direct { border-left: 3px solid var(--rouge); }
.carte-concours.fini { opacity: .8; }
.cc-logo {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cc-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cc-logo span { font-family: var(--titre); font-size: 28px; color: var(--nuit); }
.cc-texte { flex: 1; min-width: 0; }
.cc-nom { font-weight: 700; font-size: 15px; line-height: 1.25; }
.cc-meta { color: var(--doux); font-size: 12.5px; margin-top: 2px; }

/* ── Page concours : programme ── */
.tete-concours { display: flex; align-items: center; gap: 14px; }
.tc-logo { height: 64px; width: auto; max-width: 130px; object-fit: contain; background: #fff; border-radius: 8px; padding: 5px; }
.titre-jour {
  font-family: var(--titre); font-weight: 400; font-size: 24px; letter-spacing: 1.5px;
  text-transform: capitalize; padding-bottom: 6px; border-bottom: 2px solid var(--ambre);
}
.titre-piste { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--doux); margin: 14px 0 6px; }
.programme { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ligne-ep {
  display: grid; grid-template-columns: 62px 34px 1fr auto; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 8px;
}
a.ligne-ep[href]:hover { border-color: var(--ambre); }
.ligne-ep.en_cours { border-left: 3px solid var(--rouge); }
.ligne-ep.annulee { opacity: .55; }
.ligne-ep.annulee .le-titre { text-decoration: line-through; }
.le-heure { font-family: var(--mono); font-size: 13px; color: var(--ambre); }
.le-num { font-family: var(--titre); font-size: 22px; color: var(--doux); text-align: center; }
.le-nom { min-width: 0; display: flex; flex-direction: column; }
.le-titre { font-weight: 600; }
.le-prix { color: var(--ambre); font-size: 12.5px; font-weight: 600; }
.le-info { color: var(--pale); font-size: 12px; }
.le-sponsor { display: none; }
.le-etat { justify-self: end; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.le-prog { display: block; height: 3px; border-radius: 2px; background: var(--ligne); overflow: hidden; }
.le-prog i { display: block; height: 100%; background: var(--rouge); }
@media (min-width: 720px) {
  .ligne-ep { grid-template-columns: 70px 40px 1fr 90px auto; }
  .le-sponsor { display: block; height: 30px; max-width: 90px; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px; justify-self: center; }
}

/* ── Page épreuve ── */
.tete-epreuve { display: flex; align-items: center; gap: 14px; }
.te-titre { flex: 1; min-width: 0; }
.te-num { font-family: var(--mono); font-size: 12px; color: var(--ambre); letter-spacing: 1px; text-transform: uppercase; }
.te-prix { color: var(--ambre); font-weight: 600; margin-top: 2px; }
.te-logo { height: 54px; width: auto; max-width: 110px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; flex-shrink: 0; }
@media (max-width: 520px) { .te-logo:not(.te-sponsor) { display: none; } }
.infos-ep { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.infos-ep span { font-size: 12px; color: var(--doux); background: var(--carte); border: 1px solid var(--ligne); padding: 4px 9px; border-radius: 20px; }

.avancement { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-family: var(--mono); font-size: 13px; color: var(--doux); }
.prog { flex: 1; min-width: 0; }
.prog-txt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin-bottom: 5px; font-size: 12px; }
.prog-txt span { white-space: nowrap; }
.prog-txt b { color: var(--texte); font-weight: 500; }
.prog-barre { height: 6px; border-radius: 3px; background: var(--ligne); overflow: hidden; }
.prog-barre i { display: block; height: 100%; border-radius: 3px; background: var(--ambre); transition: width .6s ease; }
.en-piste {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px;
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(90deg, var(--ambre-doux), transparent); border: 1px solid var(--ambre);
}
.ep-lib { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ambre); }
.ep-doss { font-family: var(--titre); font-size: 34px; line-height: 1; color: var(--ambre); }
.ep-qui { display: flex; flex-direction: column; min-width: 0; }

/* Lignes de résultats / départs */
.liste { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.lr {
  display: grid; grid-template-columns: 44px 40px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--carte); border: 1px solid var(--ligne); border-radius: 8px;
}
.lr.np { opacity: .5; }
.lr-rang { font-family: var(--titre); font-size: 24px; text-align: center; color: var(--doux); line-height: 1; }
.lr-rang sup { font-family: var(--mono); font-size: 9px; margin-left: 1px; }
.liste.attente .lr-rang, .liste .lr-rang:not(:empty) { }
.lr-doss { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--ambre); text-align: center; }
.lr-qui { min-width: 0; display: flex; flex-direction: column; }
.lr-cav { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-ch { color: var(--doux); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-club { color: var(--pale); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-res { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.lr-pts { font-family: var(--mono); font-size: 16px; font-weight: 500; }
.lr-pts small { font-size: 10px; color: var(--pale); }
.lr-tps { font-family: var(--mono); font-size: 13px; color: var(--doux); }
.lr-m1 { font-family: var(--mono); font-size: 10.5px; color: var(--pale); flex-basis: 100%; }
.etat-res { font-family: var(--mono); font-size: 12px; color: var(--rouge); text-transform: uppercase; letter-spacing: 1px; }
.lr.podium .lr-rang { font-size: 28px; }
.lr.p1 { border-color: rgba(245, 197, 66, .55); } .lr.p1 .lr-rang { color: var(--or); }
.lr.p2 .lr-rang { color: var(--argent); }
.lr.p3 .lr-rang { color: var(--bronze); }
.liste.attente .lr-rang { font-family: var(--mono); font-size: 12px; }
.sep {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--doux); padding: 12px 4px 4px;
}
@media (min-width: 720px) {
  .lr { grid-template-columns: 56px 50px 1fr 160px; }
  .lr-qui { flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
}

/* ── Détail du parcours (clic sur une ligne de résultat) ── */
.lr-bloc.depliable > .lr { cursor: pointer; }
.lr-bloc.depliable > .lr:hover { border-color: var(--ambre); }
.lr-bloc.depliable > .lr .lr-res::after {
  content: '▾'; font-size: 11px; color: var(--pale); margin-top: 2px; transition: transform .15s;
}
.lr-bloc.ouvert > .lr .lr-res::after { transform: rotate(180deg); }
.lr-bloc.ouvert > .lr { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--ambre); }
.parcours {
  display: none; padding: 10px 12px 12px; background: var(--nuit2);
  border: 1px solid var(--ambre); border-top: none; border-radius: 0 0 8px 8px;
}
.lr-bloc.ouvert > .parcours { display: block; }
.pc-titre { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ambre); margin: 6px 0 4px; }
.pc-titre:first-child { margin-top: 0; }
.pc-phase { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 6px; }
.pc-lib { font-family: var(--mono); font-size: 10.5px; color: var(--doux); width: 100%; }
.obs {
  display: inline-flex; align-items: center; gap: 3px; min-width: 34px; justify-content: center;
  font-family: var(--mono); font-size: 12.5px; padding: 4px 7px; border-radius: 6px;
  background: var(--carte2); border: 1px solid var(--ligne); color: var(--doux);
}
.obs b { font-weight: 700; font-size: 11px; }
.obs.o-franchi { background: rgba(61, 220, 132, .12); border-color: rgba(61, 220, 132, .45); color: var(--vert); }
.obs.o-faute { background: rgba(255, 93, 93, .14); border-color: rgba(255, 93, 93, .6); color: var(--rouge); }
.obs.o-refus { background: var(--ambre-doux); border-color: var(--ambre); color: var(--ambre); }
.obs.o-destruction { background: rgba(196, 120, 255, .14); border-color: rgba(196, 120, 255, .6); color: #c478ff; }
.obs.o-elim, .obs.o-abandon { background: var(--rouge); border-color: var(--rouge); color: var(--nuit); }
.obs.o-non_saute, .obs.o-vide { opacity: .35; }
.pc-recap { font-size: 12.5px; color: var(--texte); margin-top: 2px; }
.pc-legende { font-family: var(--mono); font-size: 10px; color: var(--pale); margin-top: 8px; }
.pc-legende b { color: var(--doux); }