:root {
--bg: #0c0e11;
--bg-2: #101318;
--surface: #15181e;
--surface-2: #1b1f26;
--border: #262b33;
--border-soft: #1e222a;
--text: #f2f0ea;
--text-dim: #9aa1ac;
--text-faint: #666d78;
--accent: #c8303c;
--accent-soft: rgba(200, 48, 60, 0.18);
--accent-deep: #6e131c;
--metal: #c9c9c9;
--metal-soft: rgba(201, 201, 201, 0.14);
--gold: #f4c463;
--silver: #c9d1da;
--bronze: #d99a63;
--danger: #ff5c5c;
--green: #2ecc71;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.8); }
}
* { box-sizing: border-box; }
body {
background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif;
margin: 0; padding: 28px 32px 52px;
}
.app { max-width: 1360px; margin: 0 auto; }
/* Gestion des pilotes : tableau très large, on retire le plafond de largeur */
.app:has(#viewPilotes:not(.hidden)) { max-width: none; }
.hidden { display: none !important; }
/* Mode embed (#embed=1) : intégration iframe sur un site tiers, coupée de
toute navigation hors du round (voir la déclaration d'embedMode dans le
script — masque logo/menu/connexion/lien "changer" d'un coup). */
body.embed-mode header.topbar { display: none; }
body.embed-mode .export-pdf-btn { display: none !important; }
/* ---------- En-tête principal (persistant sur tous les écrans) ---------- */
header.topbar {
display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto;
align-items: center; row-gap: 8px; column-gap: 14px;
padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 18px;
}
.header-logo { grid-column: 1; grid-row: 1; justify-self: start; cursor: pointer; min-width: 0; }
.header-logo .logo-img { height: 36px; width: auto; display: block; }
.header-live { grid-column: 3; grid-row: 1; justify-self: end; min-width: 0; }
.context-line {
grid-column: 1; grid-row: 2; justify-self: start; min-width: 0;
font-family:'Inter'; font-size:10.5px; color: var(--text-faint); letter-spacing: 0.5px;
}
.context-line a { color: var(--accent); text-decoration: underline; cursor: pointer; font-weight: 600; }
.header-auth { grid-column: 3; grid-row: 2; justify-self: end; position: relative; }
.toggle-pill {
display: flex; align-items: center; gap: 8px; background: var(--surface-2);
border: 1px solid var(--border); padding: 7px 16px; border-radius: 999px;
font-size: 12px; font-weight: 600; letter-spacing: 0.4px; font-family: 'Rajdhani', sans-serif; text-transform: uppercase;
}
.toggle-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse-dot 1.2s ease-in-out infinite; }
/* ---------- Icône profil + popup de connexion ---------- */
.profile-btn {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%; padding: 0;
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer;
}
.profile-btn:hover { border-color: var(--accent); color: var(--text); }
.profile-btn.is-logged-in { border-color: var(--accent); color: var(--accent); }
.profile-btn svg { width: 18px; height: 18px; }
.profile-popup {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 200; width: 220px;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); font-family: 'Rajdhani', sans-serif;
}
.profile-popup .field-label { display: block; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.profile-popup input {
width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
padding: 8px 10px; border-radius: 6px; font-size: 12.5px; font-family: inherit; margin-bottom: 10px;
}
.profile-popup .btn-popup {
width: 100%; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text);
padding: 8px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase;
cursor: pointer; font-family: inherit;
}
.profile-popup .auth-error { display: block; color: var(--danger); font-size: 11px; margin-top: 8px; text-align: left; }
.profile-popup .profile-email { font-size: 12.5px; color: var(--text); word-break: break-all; margin-bottom: 6px; }
.profile-popup .role-tag {
display: inline-block; background: var(--surface-2); border: 1px solid var(--border); padding: 2px 8px;
border-radius: 999px; font-weight: 700; text-transform: uppercase; font-size: 10px; margin-bottom: 12px; color: var(--text-dim);
}
.profile-popup .logout-btn {
width: 100%; background: transparent; border: 1px solid var(--border); color: var(--text-dim);
padding: 8px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase;
cursor: pointer; font-family: inherit;
}
.profile-popup .logout-btn:hover { border-color: var(--danger); color: var(--danger); }
/* ---------- Menu du header principal (Classement / Gestion des pilotes) ---------- */
.header-menu {
grid-column: 2; grid-row: 1; justify-self: center;
display: flex; gap: 22px; font-family: 'Rajdhani', sans-serif; flex-wrap: wrap;
}
.header-menu-link {
color: var(--text-dim); font-size: 12.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; cursor: pointer; text-decoration: none;
}
.header-menu-link:hover { color: var(--text); }
.header-menu-link.active { color: var(--accent); }
/* ---------- Footer : statut de synchronisation ---------- */
.app-footer {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
display: flex; align-items: center; justify-content: center; gap: 8px;
background: var(--surface); border-top: 1px solid var(--border);
padding: 9px 16px; font-family: 'Rajdhani', sans-serif; font-size: 11px; color: var(--text-faint); letter-spacing: 0.4px;
}
.app-footer .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse-dot 1.2s ease-in-out infinite; }
@media (max-width: 640px) {
body { padding: 16px 16px 48px; }
header.topbar { grid-template-columns: auto 1fr; row-gap: 10px; }
.header-logo { grid-column: 1; grid-row: 1; }
.header-live { grid-column: 2; grid-row: 1; }
.header-menu { grid-column: 1 / span 2; grid-row: 2; justify-self: center; gap: 16px; }
.context-line { grid-column: 1; grid-row: 3; }
.header-auth { grid-column: 2; grid-row: 3; }
.profile-popup { right: -6px; width: 200px; }
}
/* ---------- Écran de sélection (compétition + round) ---------- */
.selector-screen { max-width: 560px; margin: 6vh auto 0; text-align: center; font-family: 'Rajdhani', sans-serif; }
.selector-step { margin-bottom: 26px; }
.selector-step h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-faint); margin: 0 0 12px; }
.selector-options { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.selector-btn {
background: var(--surface); border: 1px solid var(--border); color: var(--text);
padding: 14px 26px; border-radius: 10px; font-size: 14px; font-weight: 700;
letter-spacing: 0.4px; cursor: pointer; text-transform: uppercase;
}
.selector-btn:hover { border-color: var(--accent); }
.selector-btn.active { background: var(--accent); border-color: var(--accent); }
.selector-btn.small { padding: 10px 18px; font-size: 13px; border-radius: 8px; }
.selector-btn.season-btn { border-color: var(--accent); color: var(--accent); margin-left: 6px; }
.selector-btn.season-btn:hover { background: var(--accent-soft); }
nav.top-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; font-family: 'Rajdhani', sans-serif; }
.class-btn {
background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
padding: 9px 20px; border-radius: 999px; font-size: 13px; font-weight: 700;
letter-spacing: 0.4px; cursor: pointer; text-transform: uppercase; font-family: inherit;
}
.class-btn.active { background: var(--accent); color: var(--text); border-color: var(--accent); }
.crumb { color: var(--text-faint); padding: 0 2px; font-size: 14px; }
.subtab-btn {
background: transparent; border: 1px solid transparent; color: var(--text-dim);
padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 700;
letter-spacing: 0.4px; cursor: pointer; text-transform: uppercase; font-family: inherit;
}
.subtab-btn.active { background: var(--metal); border-color: var(--metal); color: var(--bg); }
.tabs-desktop { display: contents; }
.tabs-mobile {
display: none; background: var(--surface); border: 1px solid var(--border); color: var(--text);
padding: 8px 30px 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.4px; font-family: inherit; cursor: pointer;
/* Select natif sans indice visuel clair que c'est un menu déroulant sur
mobile (la flèche native est absente/peu visible avec ce style en
pilule) — on la dessine nous-mêmes pour que ce soit évident. */
appearance: none; -webkit-appearance: none; -moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f2f0ea' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 6px;
}
@media (max-width: 640px) {
.tabs-desktop { display: none; }
/* Sur la même ligne que PRO/PRO-AM plutôt que sa propre ligne en dessous
(flex-wrap sur .top-nav laisse retomber à la ligne seulement si
vraiment trop étroit). */
.tabs-mobile { display: block; flex: 1 1 110px; min-width: 0; margin-top: 0; }
}
.onpiste-bar {
display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
background: linear-gradient(90deg, var(--accent-soft), transparent 85%);
border: 1px solid var(--accent-deep); border-left: 4px solid var(--accent);
border-radius: 8px; padding: 12px 18px; margin: 0 0 16px; font-size: 14px;
font-family: 'Rajdhani', sans-serif;
}
.onpiste-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse-dot 1.6s ease-in-out infinite; flex-shrink:0; }
.onpiste-bar .label { text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: var(--accent); font-weight: 700; }
.onpiste-bar .sep { color: var(--text-faint); }
.onpiste-bar .badge { background: var(--surface-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.onpiste-bar .accent { color: var(--gold); font-weight: 700; }
.onpiste-bar .run-tag { margin-left: auto; font-weight: 700; color: var(--accent); letter-spacing: 0.5px; }
.onpiste-bar .vs-label { color: var(--accent); font-weight: 700; margin: 0 10px; text-transform: uppercase; font-size: 12px; }
.onpiste-bar .onpiste-picker {
background: var(--surface-2); border: 1px solid var(--accent); color: var(--text);
padding: 6px 10px; border-radius: 6px; font-size: 12.5px; font-family: 'Rajdhani', sans-serif; font-weight: 700;
max-width: 260px;
}
.onpiste-bar .onpiste-next-btn { width: auto; margin-top: 0; padding: 6px 14px; font-size: 12.5px; white-space: nowrap; }
.onpiste-bar .onpiste-next-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* ---------- Onglet Animateur : fiches pilote lisibles à voix haute ---------- */
.animateur-view { display: flex; flex-direction: column; gap: 18px; }
.animateur-toggle {
display: inline-flex; align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border);
border-radius: 999px; padding: 4px; gap: 4px;
}
.animateur-toggle-btn {
background: transparent; border: none; color: var(--text-dim); padding: 8px 20px; border-radius: 999px;
font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
font-size: 13px; cursor: pointer;
}
.animateur-toggle-btn.active { background: var(--accent); color: var(--text); }
.animateur-battle { display: flex; align-items: stretch; gap: 18px; }
.animateur-battle .animateur-card { flex: 1 1 0; min-width: 0; }
.animateur-vs { align-self: center; color: var(--accent); font-weight: 800; font-family: 'Rajdhani', sans-serif; font-size: 15px; letter-spacing: 1px; }
.animateur-card {
background: linear-gradient(135deg, var(--accent-soft), var(--surface) 55%);
border: 2px solid var(--accent-deep); border-radius: 12px; padding: 20px 24px;
}
.animateur-card-empty { color: var(--text-faint); font-style: italic; text-align: center; padding: 40px 20px; border: 1px dashed var(--border); border-radius: 12px; }
.animateur-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.animateur-num { color: var(--text-faint); font-weight: 700; font-family: 'Rajdhani', sans-serif; font-size: 15px; }
.animateur-name { font-size: 20px; font-weight: 700; font-family: 'Rajdhani', sans-serif; }
.animateur-card .badge { background: var(--surface-2); border: 1px solid var(--border); padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.animateur-row { font-size: 13.5px; color: var(--text-dim); line-height: 1.9; }
.animateur-row .accent { color: var(--gold); font-weight: 700; }
.animateur-row strong { color: var(--text); }
.animateur-row .run-tag { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.animateur-sponsors { color: var(--text-faint); font-size: 12.5px; }
@media (max-width: 640px) {
.animateur-battle { flex-direction: column; }
.animateur-vs { align-self: center; }
}
/* ---------- Vue Broadcast (Admin) : choix du round pour les flux vMix ---------- */
.broadcast-panel { max-width: 640px; }
.broadcast-status {
display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border);
border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--text-dim); margin: 4px 0 18px;
}
.broadcast-status strong { color: var(--text); }
.broadcast-status.is-live { border-color: var(--green); }
.broadcast-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse-dot 1.2s ease-in-out infinite; flex-shrink: 0; }
.broadcast-deactivate-btn {
margin-left: auto; background: transparent; border: 1px solid var(--border); color: var(--text-faint);
border-radius: 6px; padding: 6px 12px; font-size: 11.5px; cursor: pointer; flex-shrink: 0;
font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
}
.broadcast-deactivate-btn:hover { border-color: var(--danger); color: var(--danger); }
.broadcast-picker { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.broadcast-picker-group { display: flex; flex-wrap: wrap; gap: 8px; }
.broadcast-activate-btn {
background: var(--accent); border: 1px solid var(--accent); color: var(--text); padding: 10px 20px;
border-radius: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
cursor: pointer; font-family: 'Rajdhani', sans-serif; margin-bottom: 22px;
}
.broadcast-activate-btn:disabled { background: var(--surface-2); border-color: var(--border); color: var(--text-faint); cursor: not-allowed; }
.broadcast-urls code {
display: block; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px;
padding: 8px 12px; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; word-break: break-all;
user-select: all;
}
.section-crumb { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-faint); margin: 0; font-weight: 600; font-family: 'Rajdhani', sans-serif; }
.section-crumb .accent { color: var(--accent); font-weight: 700; }
.crumb-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin: 0 0 12px 2px; }
.export-pdf-btn {
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
padding: 6px 12px; border-radius: 6px; font-size: 11.5px; cursor: pointer; font-weight: 700;
text-transform: uppercase; font-family: 'Rajdhani', sans-serif; letter-spacing: 0.4px;
}
.export-pdf-btn:hover { border-color: var(--accent); color: var(--text); }
.export-pdf-btn:disabled { opacity: 0.5; cursor: default; }
.content-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px 22px; }
.content-card h2 { font-family: 'Rajdhani', sans-serif; font-size: 15px; text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 16px; color: var(--text-dim); }
/* Section secondaire à l'intérieur d'une .content-card déjà ouverte (ex.
classement du round sous le bracket) : juste un séparateur horizontal,
pas une 2e boîte imbriquée avec son propre padding gauche/droite — ça
mangeait de la largeur inutilement sur mobile. */
.subsection { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.subsection h2 { font-family: 'Rajdhani', sans-serif; font-size: 15px; text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 14px; color: var(--text-dim); }
.role-picker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 12.5px; color: var(--text-dim); flex-wrap: wrap; font-family: 'Rajdhani', sans-serif; }
.role-picker .role-label { color: var(--text-faint); margin-right: 2px; }
.role-picker button {
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
padding: 7px 14px; border-radius: 6px; font-size: 12.5px; cursor: pointer; font-weight: 700; text-transform: uppercase;
}
.role-picker button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.lock-toggle-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }
.lock-toggle-btn.is-locked { background: rgba(255,92,92,0.12); border-color: var(--danger); color: var(--danger); }
.role-picker button:disabled, .lock-toggle-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.absence-picker { display: flex; flex-wrap: wrap; gap: 8px; }
/* Par défaut (présent) = pastille "cliquée"/active ; cliquer la décoche pour
marquer une absence (.is-absent, en rouge). */
.absence-pill {
background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text);
padding: 7px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: 700;
font-family: 'Rajdhani', sans-serif; text-transform: uppercase;
}
.absence-pill.is-absent { background: var(--surface-2); border-color: var(--danger); color: var(--danger); }
.field-hint { font-size: 11px; color: var(--text-faint); margin-top: 6px; }
.round-status-bar {
display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 9px 14px;
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
font-family: 'Rajdhani', sans-serif; font-size: 12.5px; color: var(--text-dim);
}
.round-status-bar .status-text.is-complete { color: var(--gold); font-weight: 700; }
.round-status-bar button {
margin-left: auto; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
padding: 6px 14px; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: 700; text-transform: uppercase; font-family: inherit;
}
.round-status-bar button.is-complete { background: rgba(244, 196, 99, 0.14); border-color: var(--gold); color: var(--gold); }
.empty-state { padding: 40px 20px; text-align: center; color: var(--text-faint); font-size: 13px; }
/* Juste le scroll horizontal — pas de bordure propre : elle vivait à
quelques px de celle de la .content-card/.subsection déjà autour,
donnant un effet "boîte dans la boîte" pour rien. */
.table-wrap { overflow-x: auto; }
/* Pas de min-width générique ici : seule la feuille de qualif (beaucoup de
colonnes de saisie) en a vraiment besoin — voir .qualif-sheet-table plus
bas. Les autres (LCQ, rank, classement de round) se dimensionnent sur
leur contenu réel, ce qui les garde bien plus étroites/compactes sur
mobile (sinon on ne voyait que Position/# avant de devoir scroller). */
table.score-table { width: 100%; border-collapse: collapse; background: var(--surface); font-family: 'Rajdhani', sans-serif; }
.score-table.qualif-sheet-table { min-width: 940px; }
.score-table th, .score-table td { padding: 8px 8px; text-align: center; font-size: 13.5px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.score-table thead th { text-transform: uppercase; font-size: 11px; letter-spacing: 0.8px; color: var(--text-dim); font-weight: 700; }
.score-table thead tr.run-labels th { color: var(--accent); border-bottom: none; padding-bottom: 4px; }
/* 5 colonnes résumé désormais (Ordre,#,Pilote,Rang saison,Position) avant
le run 1 — décalé de 1 depuis l'ajout de la colonne "Rang saison". */
.score-table.qualif-sheet-table thead tr.run-labels th:nth-child(7) { border-left: 1px solid var(--border); }
.score-table.qualif-sheet-table th:nth-child(6), .score-table.qualif-sheet-table td:nth-child(6),
.score-table.qualif-sheet-table th:nth-child(10), .score-table.qualif-sheet-table td:nth-child(10) { border-left: 1px solid var(--border); }
/* season table : 5 colonnes résumé (Pos,#,Pilote,Total,Écart) + 5 rounds x 4 colonnes */
.season-table thead tr.run-labels th:nth-child(n+6) { border-left: 1px solid var(--border); }
.season-table th:nth-child(6), .season-table td:nth-child(6),
.season-table th:nth-child(10), .season-table td:nth-child(10),
.season-table th:nth-child(14), .season-table td:nth-child(14),
.season-table th:nth-child(18), .season-table td:nth-child(18),
.season-table th:nth-child(22), .season-table td:nth-child(22) { border-left: 1px solid var(--border); }
.score-table td.pilote-cell { text-align: left; font-weight: 700; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text); }
.pilote-vehicule { display: block; font-weight: 400; font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.score-table td.num-cell { color: var(--text-dim); }
.score-table .run-total { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; font-size: 16px; }
.score-table td.position-cell { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; }
.score-table td.position-cell.locked { color: var(--gold); }
.score-table td.position-cell.lcq { color: var(--accent); }
.score-table td.position-cell.out { color: var(--text-faint); font-weight: 600; }
.qualif-row-out td { color: var(--text-faint) !important; }
.qualif-row-out td.position-cell { font-weight: 600; }
/* Bandeau "Acquis" à la place du run 2 d'un pilote verrouillé top 12 —
même couleur (gold) que le numéro de position "Verrouillé", pour que le
lien visuel soit évident même en survolant vite une longue liste. */
.score-table td.run-locked-cell {
background: rgba(212, 175, 55, 0.08); color: var(--gold); font-weight: 700;
text-align: center; text-transform: uppercase; letter-spacing: 0.3px; font-size: 11.5px;
font-family: 'Rajdhani', sans-serif;
}
.score-table input.score-input {
width: 40px; background: transparent; border: 1px solid transparent; color: var(--text);
text-align: center; font-size: 13px; font-variant-numeric: tabular-nums;
border-radius: 4px; padding: 5px 2px; font-family: inherit;
}
.score-table input.score-input:hover { border-color: var(--border); }
.score-table input.score-input::placeholder { color: var(--text-faint); opacity: 1; }
.score-table input.score-input:focus { outline: none; border-color: var(--accent); background: var(--accent-soft); }
.score-table input.score-input:disabled { color: var(--text-faint); cursor: not-allowed; }
.score-table tbody tr:hover { background: var(--surface-2); }
/* Ligne du pilote actuellement "en piste" (sélection Admin, voir
onpisteBar) dans la feuille de qualif : bande rouge bien visible pour
que tout le staff qui saisit des scores voie tout de suite où taper,
sans avoir à chercher la ligne dans une longue liste.
Le fond ET le liseré sont posés sur chaque | (pas sur le | ) : un
fond/box-shadow appliqué au
laisse parfois un résidu partiel de
l'ancienne ligne en surlignage sur Safari iOS après un toggle de classe
pendant un scroll ("ghost" — certaines cellules restent teintées,
d'autres non). Peindre chaque cellule directement évite ce bug de
réaffichage, plus fiable sur mobile. */
.score-table tbody tr.on-piste-row > td { background: var(--accent-soft); }
.score-table tbody tr.on-piste-row:hover > td { background: var(--accent-soft); }
.score-table tbody tr.on-piste-row > td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.score-table tbody tr.on-piste-row td.pilote-cell { color: var(--accent); }
input.score-input::-webkit-inner-spin-button,
input.score-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input.score-input[type=number] { -moz-appearance: textfield; }
.footnote { margin-top: 16px; font-size: 11.5px; color: var(--text-faint); }
/* Pas de min-width fixe ici non plus (même logique qu'au-dessus) : DMCC a 5
rounds mais Contender/ClubClash en ont moins, donc une largeur fixe pensée
pour 5 rounds forçait un scroll horizontal inutile sur les séries plus
courtes. La table se dimensionne sur ses colonnes réelles. */
.season-table td, .season-table th { padding-left: 6px; padding-right: 6px; }
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex;
align-items: center; justify-content: center; z-index: 1000;
}
.modal-box {
background: var(--surface); border: 1px solid var(--accent); border-radius: 10px;
padding: 22px 24px; max-width: 380px; width: 90%; font-family: 'Inter', sans-serif;
}
.modal-box p { margin: 0 0 18px; font-size: 14px; color: var(--text); line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal-btn { padding: 9px 16px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: 'Rajdhani', sans-serif; text-transform: uppercase; }
.modal-btn-secondary { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }
.modal-btn-primary { background: var(--accent); border: 1px solid var(--accent); color: var(--text); }
.modal-box-wide { max-width: 640px; max-height: 85vh; overflow-y: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-header h2 { margin: 0; }
.modal-close {
background: none; border: none; color: var(--text-faint); font-size: 22px; line-height: 1; cursor: pointer;
padding: 0 2px;
}
.modal-close:hover { color: var(--text); }
/* ---------- Vue : Gestion des pilotes ---------- */
.pilote-toolbar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.pilote-toolbar .btn-primary, .pilote-toolbar .btn-secondary { width: auto; margin-top: 0; }
/* Colonnes/écarts resserrés pour que le bracket Top 16 tienne dans la
largeur d'un écran de bureau courant sans scroll horizontal (Top 32 en a
encore besoin — plus de rounds à afficher, c'est attendu). */
.bracket-grid { display: flex; gap: 18px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }
.bracket-col { display: flex; flex-direction: column; min-width: 160px; flex-shrink: 0; position: relative; }
.bracket-col h3 { font-family: 'Rajdhani', sans-serif; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-faint); text-align: center; margin: 0 0 8px; }
.bracket-col-body { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: space-around; gap: 26px; }
/* Le reste de .bracket-col est top-aligné (les colonnes latérales
s'étirent avec justify-content: space-around déjà sur .bracket-col-body),
mais la colonne centrale n'a pas cette classe — sans ce
justify-content elle collait vers le haut au lieu d'être au milieu,
vertical, de tout le bracket. */
.bracket-center { min-width: 180px; justify-content: center; }
.bracket-center h3 { color: var(--accent); }
/* Cartes de combat plus en évidence : contour plus épais, fond nettement
distinct du fond de page (au lieu de quasi se fondre dedans), et un peu
plus d'air entre le nom du haut et celui du bas dans chaque carte. */
.bracket-card { border: 2px solid #3a4150; border-radius: 8px; overflow: hidden; background: #20242c; position: relative; }
.bracket-final-card { border-color: var(--accent-deep); }
.bracket-card .slot {
display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
background: transparent; border: none; color: var(--text); font-family: 'Inter', sans-serif;
font-size: 12.5px; padding: 12px 10px; cursor: pointer;
}
.bracket-card .slot .seed { color: var(--text-faint); font-weight: 700; min-width: 14px; font-family: 'Rajdhani', sans-serif; }
.bracket-card .slot .num {
color: var(--text-faint); font-weight: 700; font-size: 10.5px; font-family: 'Rajdhani', sans-serif;
background: rgba(255,255,255,0.06); border-radius: 3px; padding: 1px 5px; flex-shrink: 0;
}
.bracket-card .slot .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-card .slot:hover:not(:disabled) { background: var(--accent-soft); }
/* Vainqueur toujours en vert — le rouge (couleur d'accent de la série)
prêtait à confusion avec une élimination. */
.bracket-card .slot.winner { background: rgba(46, 204, 113, 0.16); font-weight: 700; }
.bracket-card .slot.winner .seed { color: var(--green); }
.bracket-card .slot.empty { color: var(--text-faint); font-style: italic; cursor: not-allowed; }
.bracket-slot-row { display: flex; align-items: stretch; gap: 4px; }
.bracket-slot-row .slot { flex: 1; min-width: 0; }
/* Badge "5 minutes" — propre à CE combat (voir toggleFiveMin) : ne se
propage jamais d'une branche du bracket à une autre. Bouton de bascule
à côté réservé à l'Admin (voir renderBracket()). */
.badge-5min {
font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 9.5px; letter-spacing: 0.4px;
background: rgba(244, 196, 99, 0.16); color: var(--gold); border-radius: 3px; padding: 2px 5px; flex-shrink: 0;
}
.fivemin-toggle {
font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 9.5px; letter-spacing: 0.4px;
background: transparent; border: 1px solid var(--border); color: var(--text-faint);
border-radius: 4px; padding: 0 6px; cursor: pointer; flex-shrink: 0;
}
.fivemin-toggle:hover { border-color: var(--gold); color: var(--gold); }
.fivemin-toggle.active { background: rgba(244, 196, 99, 0.16); border-color: var(--gold); color: var(--gold); }
/* Onglet Track Director — bouton de statut "5 min prise" par pilote,
même langage visuel que .fivemin-toggle mais en plus grand pour une
colonne de table (voir renderTrackDirector()). */
.track-director-toggle {
font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase;
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
border-radius: 6px; padding: 7px 14px; cursor: pointer;
}
.track-director-toggle:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.track-director-toggle.active { background: rgba(244, 196, 99, 0.16); border-color: var(--gold); color: var(--gold); }
.track-director-toggle:disabled { opacity: 0.6; cursor: default; }
.bracket-card .vs-divider {
text-align: center; font-size: 10px; color: var(--accent); letter-spacing: 1px; padding: 4px 0;
background: var(--bg-2); text-transform: uppercase; font-weight: 800; font-family: 'Rajdhani', sans-serif;
}
/* Onglet "One More Time" (combat rejugé) accroché au bord droit de la
carte, en lettres verticales — repris du style que le client a montré
en exemple. Réserve sa place via .has-omt sur la carte pour ne
chevaucher ni le nom des pilotes ni le bouton 5MIN. */
.bracket-card.has-omt .bracket-slot-row,
.bracket-card.has-omt .vs-divider { padding-right: 18px; }
.omt-tab {
position: absolute; top: 0; right: 0; width: 18px; height: 100%;
background: var(--border); color: var(--text-faint); border: none; padding: 0; margin: 0; cursor: pointer;
writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
display: flex; align-items: center; justify-content: center;
font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 10px; letter-spacing: 1px;
}
.omt-tab.active { background: var(--danger); color: #fff; }
.omt-tab:disabled { cursor: default; }
.omt-tab:not(.active):not(:disabled):hover { background: rgba(255, 92, 92, 0.25); color: var(--danger); }
.bracket-connector { position: absolute; }
.bracket-connector.pair.side-left { right: -15px; width: 15px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.bracket-connector.pair.side-right { left: -15px; width: 15px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
.bracket-connector.single.side-left { right: -15px; width: 15px; height: 1px; background: var(--border); transform: translateY(-50%); }
.bracket-connector.single.side-right { left: -15px; width: 15px; height: 1px; background: var(--border); transform: translateY(-50%); }
.bracket-final-card::before { content: ''; position: absolute; top: 50%; left: -15px; width: 15px; height: 1px; background: var(--border); }
/* Repère visuel à la moitié du premier tour (Top 16/32...) — aide à
s'y retrouver dans une longue colonne, aucun rôle fonctionnel. */
.bracket-half-line { position: absolute; left: -9px; right: -9px; top: 50%; border-top: 2px dashed var(--text-dim); }
/* 3e place : décalée sous la Finale, bordure pointillée — c'est un match
de consolation, pas une branche de l'arbre à élimination, donc pas de
connecteur qui le relie visuellement au reste (même logique que
l'export PDF). */
.bracket-third-wrap { margin-top: 32px; }
.bracket-third-label { color: var(--text-faint) !important; }
.bracket-third-card { border-style: dashed; }
.bracket-final-card::after { content: ''; position: absolute; top: 50%; right: -15px; width: 15px; height: 1px; background: var(--border); }
.podium-list { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.podium-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.podium-row .seed { color: var(--text-faint); font-weight: 700; font-family: 'Rajdhani', sans-serif; }
.podium-badge { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; color: #1a1a1a; flex-shrink: 0; }
.podium-badge.p1 { background: var(--gold); }
.podium-badge.p2 { background: var(--silver); }
.podium-badge.p3 { background: var(--bronze); }
.podium-badge.p4 { background: var(--text-faint); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; font-family: 'Rajdhani', sans-serif; }
.field input, .field select {
width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
padding: 10px 12px; border-radius: 6px; font-size: 14px; font-family: inherit;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); background: var(--accent-soft); }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; min-width: 0; }
.photo-field-row { display: flex; align-items: center; gap: 10px; }
.photo-field-row input { flex: 1; min-width: 0; }
.photo-preview { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; background: var(--surface-2); }
.photo-remove-btn {
background: transparent; border: 1px solid var(--border); color: var(--text-faint);
border-radius: 6px; padding: 6px 10px; font-size: 11.5px; cursor: pointer; flex-shrink: 0;
}
.photo-remove-btn:hover { border-color: var(--danger); color: var(--danger); }
.photo-url-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.photo-url-row input {
flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-faint);
border-radius: 6px; padding: 6px 8px; font-size: 11px;
}
.photo-copy-btn {
background: transparent; border: 1px solid var(--border); color: var(--text-faint);
border-radius: 6px; padding: 6px 10px; font-size: 11.5px; cursor: pointer; flex-shrink: 0;
}
.photo-copy-btn:hover { border-color: var(--accent); color: var(--text); }
.pilote-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); vertical-align: middle; margin-right: 8px; background: var(--surface-2); }
.btn-primary {
width: 100%; background: var(--accent); border: 1px solid var(--accent); color: var(--text);
padding: 11px 16px; border-radius: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.4px;
cursor: pointer; text-transform: uppercase; font-family: 'Rajdhani', sans-serif; margin-top: 4px;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary {
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; font-family: 'Rajdhani', sans-serif; font-weight: 700;
}
.btn-danger { background: transparent; border: 1px solid var(--border); color: var(--danger); padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; font-family: 'Rajdhani', sans-serif; font-weight: 700; }
.form-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 10px; }
.form-hint code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 4px; font-size: 11px; overflow-wrap: anywhere; }
.form-error { font-size: 12px; color: var(--danger); margin-top: 8px; font-weight: 600; }
.roster-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.roster-head h2 { margin: 0; }
.roster-filter { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Rajdhani', sans-serif; font-weight: 700; }
.roster-filter select {
background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px;
padding: 6px 10px; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 12.5px;
}
table.pilot-table { width: 100%; border-collapse: collapse; font-family: 'Rajdhani', sans-serif; }
/* Beaucoup de colonnes (hometown, engine, instagram, fantasy only...) : cellules
plus serrées et en-têtes autorisés à passer sur 2 lignes, pour que le
tableau tienne à l'écran sans défilement horizontal. */
.pilot-table th, .pilot-table td { padding: 8px 5px; text-align: left; font-size: 12.5px; border-bottom: 1px solid var(--border-soft); }
.pilot-table thead th { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.4px; color: var(--text-dim); font-weight: 700; }
.pilot-table th.sortable { cursor: pointer; user-select: none; }
.pilot-table th.sortable:hover { color: var(--text); }
.pilot-table th.sortable.active { color: var(--accent); }
.pilot-table th.sortable .sort-arrow { margin-left: 3px; opacity: 0.7; }
.pilot-table td.num { color: var(--accent); font-weight: 700; }
.pilot-table td.classe-chip span {
background: var(--surface-2); border: 1px solid var(--border); padding: 3px 9px; border-radius: 4px;
font-size: 10.5px; text-transform: uppercase; font-weight: 700; color: var(--text-dim);
}
.pilot-table td.actions { text-align: right; white-space: nowrap; }
.pilot-table td.actions button { margin-left: 6px; }
.pilot-table tbody tr:hover { background: var(--surface-2); }
.empty-row td { text-align: center; color: var(--text-faint); padding: 30px; font-family: 'Inter'; }
/* Édition en ligne du roster : remplace la ligne d'affichage d'un pilote
(bouton "Modifier") par ce mini-formulaire, directement à sa place dans
le tableau — pas de saut vers le formulaire "Ajouter un pilote". */
.inline-edit-row td { background: var(--surface-2); padding: 16px 14px; white-space: normal; }
.inline-edit-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.inline-edit-field label { display: block; font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; font-family: 'Rajdhani', sans-serif; font-weight: 700; }
.inline-edit-field input, .inline-edit-field select {
width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text);
border-radius: 6px; padding: 7px 9px; font-family: inherit; font-size: 13px;
}
.inline-edit-actions { display: flex; gap: 10px; margin-top: 14px; }
.sponsor-chip {
display: inline-block; background: var(--accent-soft); border: 1px solid var(--accent-deep); color: var(--text);
padding: 2px 8px; border-radius: 999px; font-size: 10.5px; margin: 1px 3px 1px 0; font-weight: 600;
}