/* Kartrac : charte d'interface (docs/CHARTE-INTERFACE.md). Pit wall : dense, plat, technique. Sombre par défaut, clair complet.
   Rouge = CRITICAL et logo seulement. Accent, sélection, notre équipe : bleu. Le sens n'est jamais porté par la couleur seule.
   Aucune ressource externe (polices système). Ce fichier : jetons et composants ; la coque est dans shell.css, le classement dans live.css. */

:root {
  color-scheme: dark;

  --bg: #0c0e10;
  --surface: #13161a;
  --surface-2: #1a1e23;
  --surface-3: #232830;

  --text: #e8eaed;
  --text-2: #8f979f;

  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);

  --brand: #1a72d0;
  --brand-strong: #1560b0;
  --brand-text: #63b3ff;
  --brand-tint: rgba(46, 140, 240, .16);
  --on-brand: #ffffff;
  --logo-red: #e5252a;
  --btn: #47607a;
  --btn-strong: #384d63;

  --success: #2ecc71;
  --warning: #ff9f1a;
  --critical: #ff453a;
  --info: #9aa7b5;
  --success-text: #3ddc84;
  --warning-text: #ffb340;
  --critical-text: #ff6b60;
  --info-text: #a5b3c2;

  --shadow: 0 12px 32px rgba(0, 0, 0, .45);
  --overlay: rgba(4, 5, 6, .66);
  --hover: rgba(255, 255, 255, .04);
  --topbar-bg: #0f1215;
  --best: #e879f9;
  --lastlap-text: #f5dd6e;
  --soft-orange-text: #ffc98a; /* orange clair : valeurs alternées de la sidebar (27/09/2026) */

  --font: Aptos, "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 48px;
  --r-sm: 3px; --r-md: 5px; --r-lg: 6px; --r-xl: 8px;
  --t-fast: 120ms; --t-base: 180ms; --t-slow: 220ms;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #eceff2;
  --surface: #ffffff;
  --surface-2: #f3f5f7;
  --surface-3: #e6eaee;

  --text: #15181c;
  --text-2: #5b646d;

  --line: rgba(21, 24, 28, .10);
  --line-strong: rgba(21, 24, 28, .20);

  --brand: #1668c7;
  --brand-strong: #0f55a5;
  --brand-text: #0f5bb5;
  --brand-tint: rgba(22, 104, 199, .10);
  --btn: #4a6278;
  --btn-strong: #39505f;

  --success: #1f9d55;
  --warning: #d97a00;
  --critical: #d92d20;
  --info: #5b6b7e;
  --success-text: #157a42;
  --warning-text: #8f5300;
  --critical-text: #c4271c;
  --info-text: #4a5b70;

  --shadow: 0 12px 32px rgba(21, 24, 28, .14);
  --overlay: rgba(21, 24, 28, .40);
  --hover: rgba(21, 24, 28, .04);
  --topbar-bg: #ffffff;
  --best: #a21caf;
  --lastlap-text: #8a6d00;
  --soft-orange-text: #a4580a;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-text); text-decoration: none; transition: color var(--t-fast); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; }
h1 { font-size: 22px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; margin-bottom: var(--s3); }
h2 { font-size: 15px; font-weight: 650; letter-spacing: .01em; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand-tint); }
.muted { color: var(--text-2); }
.hint { color: var(--text-2); font-size: 12px; margin: var(--s1) 0 0; }
/* Petit libellé au-dessus d'un titre de page (même gabarit que .circ-dialog-kicker) : identifie le type d'écran,
   comme sur la fiche circuit. Utilisé par les écrans de course sans Apex (demande du porteur du 17/10/2026). */
.page-kicker { display: block; font-size: 10px; font-weight: 750; letter-spacing: .16em; color: var(--brand-text); margin-bottom: 2px; }
/* Résumé de course écrit par un modèle de langage (demande du porteur du 17/10/2026) : texte de lecture, pas une
   fiche de données — largeur confortable, interligne aéré. */
.race-summary-text { max-width: 72ch; line-height: 1.6; margin-top: var(--s3); }
.race-summary-text p { margin: 0 0 var(--s3); }
.race-summary-text ul { margin: 0 0 var(--s3); padding-left: 1.3em; }
.race-summary-text li { margin-bottom: 4px; }
.race-view-meta { color: var(--text-2); font-size: 13px; margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
/* Filtre de la vue PAR TYPE (COURSES, demande du porteur du 17/10/2026) : un seul select, pas un bloc pleine
   largeur comme les formulaires habituels. */
.courses-type-filter { display: flex; align-items: center; gap: var(--s2); margin: var(--s3) 0; }
.courses-type-filter label { margin: 0; }
.courses-type-filter select { width: auto; min-width: 200px; }
.race-view-meta .meta-item { display: inline-flex; align-items: center; gap: 5px; }
.meta-icon { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.badge .meta-icon { width: 11px; height: 11px; vertical-align: -1px; margin-right: 1px; }
.section-icon { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--brand-text); vertical-align: -3px; margin-right: 4px; }
.dash-kpi-label svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }

/* ---------- Surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
.card.narrow { max-width: 380px; margin: var(--s6) auto; }
.card.narrow-wide { max-width: 560px; }
.card.spaced { margin-top: var(--s4); }
.card p.muted { margin: var(--s2) 0; }
.scroll { overflow-x: auto; }

/* Choix du type de course, depuis le circuit (17/10/2026) : deux options empilées, pas de double bouton. */
.race-type-choice { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s3); }
.race-type-option {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--surface-2); text-decoration: none; color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.race-type-option:hover { background: var(--surface-3); text-decoration: none; border-color: var(--brand); }
.race-type-option strong { color: var(--brand-text); font-size: 14px; }
.race-type-option .muted { font-size: 12px; }

/* ---------- Formulaires ---------- */
label { display: block; margin: var(--s3) 0 var(--s1); color: var(--text-2); font-size: 12px; font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=url], select, textarea {
  width: 100%; min-height: 34px; padding: 6px 10px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: inherit;
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--critical); }
.field-error { color: var(--critical-text); font-size: 12px; margin: var(--s1) 0 0; }

button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 34px; padding: 6px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
button:hover, .button:hover { background: var(--surface-3); text-decoration: none; }
button.primary, .button:not(.secondary) { background: var(--btn); border-color: var(--btn); color: var(--on-brand); }
button.primary:hover, .button:not(.secondary):hover { background: var(--btn-strong); }
button.primary { width: 100%; margin-top: var(--s4); }
button.inline-button { width: auto; margin-top: 0; }
.button.small, button.small { min-height: 26px; padding: 0 var(--s2); font-size: 12px; }
button.link { min-height: 0; padding: 0; background: none; border: 0; color: var(--brand-text); font-weight: 500; }
button.link:hover { background: none; text-decoration: underline; }

/* Boutons d'action de la HOME : même rendu que l'onglet HOME actif dans la barre haute. */
.button.header, button.header {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--s3);
  border: 1px solid color-mix(in srgb, var(--brand) 60%, transparent);
  border-radius: var(--r-md);
  color: var(--brand-text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-decoration: none;
  background: var(--brand-tint);
  cursor: pointer;
  white-space: nowrap;
}
.button.header:hover, button.header:hover {
  color: var(--brand-text);
  background: var(--brand-tint);
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  text-decoration: none;
}

form.inline { display: inline; margin: 0; }
form.confirm { margin-top: var(--s3); }
.actions { margin: var(--s4) 0 0; }
/* Bouton d'enregistrement commun à plusieurs blocs (RÈGLES) : sous les cartes, centré, jamais dans l'une d'elles. */
.actions.centered { text-align: center; }
.row { display: flex; align-items: center; gap: var(--s3); }
.row.between { justify-content: space-between; margin-bottom: var(--s3); }
.row.gap { margin-top: var(--s3); flex-wrap: wrap; }

/* ---------- Messages et pastilles ---------- */
.msg { padding: var(--s2) var(--s3); border-radius: var(--r-md); border: 1px solid var(--line-strong); margin: 0 0 var(--s2); }
/* Disparition au bout de 10 s (17/10/2026, assets/flash.js) : seuls les blocs data-flash sont retires. */
.msg.is-leaving { opacity: 0; transition: opacity .4s ease; }
@media (prefers-reduced-motion: reduce) { .msg.is-leaving { transition: none; } }
.msg.critical { border-color: color-mix(in srgb, var(--critical) 55%, transparent); background: color-mix(in srgb, var(--critical) 10%, transparent); color: var(--critical-text); }
.msg.ok { border-color: color-mix(in srgb, var(--success) 55%, transparent); background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success-text); }
.tag, .badge {
  display: inline-block; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-2); font-size: 11.5px; font-weight: 650; letter-spacing: .03em; white-space: nowrap;
}
.badge.success { color: var(--success-text); border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 12%, transparent); }
.badge.warning { color: var(--warning-text); border-color: color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.badge.critical { color: var(--critical-text); border-color: color-mix(in srgb, var(--critical) 45%, transparent); background: color-mix(in srgb, var(--critical) 12%, transparent); }
.badge.info, .badge.neutral { color: var(--text-2); }
.badge.replay { color: var(--best); border-color: color-mix(in srgb, var(--best) 55%, transparent); background: color-mix(in srgb, var(--best) 14%, transparent); }
.badge.competition { color: var(--best); border-color: color-mix(in srgb, var(--best) 55%, transparent); background: color-mix(in srgb, var(--best) 14%, transparent); }
.tag { margin-right: var(--s1); }
/* Double barre rouge devant un titre de section (demande du porteur du 19/10/2026, pilot-courses.php) : même motif
   que .m-slash en vue mobile, un seul élément en degradé plutôt que deux. */
.section-slash { flex: none; display: inline-block; width: 14px; height: .8em; margin-right: 10px; background: linear-gradient(90deg, var(--logo-red) 0 35%, transparent 35% 62%, var(--logo-red) 62% 100%); transform: skewX(-20deg); }
h2:has(.section-slash) { display: flex; align-items: center; }
/* Marge au-dessus de chaque titre de section, plus large que le simple empilement de cartes (demande du porteur du
   19/10/2026, pilot-courses.php) : au-dessus d'À VENIR comme d'HISTORIQUE. */
.section-block { margin-top: var(--s6); }

/* ---------- Tableaux ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px var(--s2); border-bottom: 1px solid var(--line); }
th { color: var(--text-2); font-weight: 650; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
table.weather { margin: var(--s2) 0; }
table.weather td, table.weather th { padding: var(--s1) var(--s2); }
.weather-card { margin-top: 0; margin-bottom: var(--s3); }
.weather-card h2 { margin-bottom: var(--s1); }

/* ---------- Défilement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  button.warning-pulse { animation: none !important; }
  .status-led.warning { animation: none !important; }
  .home-status-recording svg .home-icon-fill { animation: none !important; }
}

/* Contenu d'un onglet de PARAM COURSE : cartes sur deux colonnes (une seule sur écran étroit), rangées sans trou selon leur hauteur. */
.page-grid { column-count: 2; column-gap: var(--s4); }
.page-grid > .card { break-inside: avoid; margin: 0 0 var(--s4); max-width: none; }
@media (max-width: 1000px) { .page-grid { column-count: 1; } }
/* Onglet MÉTÉO d'une course (06/10/2026) : trois quarts pour le tableau, un quart pour la correction manuelle. Une vraie
   grille, et non `column-count`, qui ne sait faire que des colonnes de même largeur. */
/* Deux colonnes de formulaire côte à côte (écran COMPARER) : une vraie grille, pour que chaque libellé reste avec son champ. */
.form-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4) var(--s5); align-items: start; }
@media (max-width: 900px) { .form-cols { grid-template-columns: minmax(0, 1fr); } }
.meteo-grid { display: grid; grid-template-columns: 3fr 1fr; gap: var(--s4); align-items: start; }
/* Piste annoncée « sèche » alors que la rosée est attendue (06/10/2026) : un astérisque rouge le signale, l'explication est
   dans l'infobulle. L'état de piste lui-même n'est pas modifié. */
.dew-star { color: var(--critical-text); font-weight: 700; text-decoration: none; cursor: help; margin-left: 2px; }
.meteo-grid > .card { margin: 0; max-width: none; }
@media (max-width: 1000px) { .meteo-grid { grid-template-columns: minmax(0, 1fr); } }
/* ADMIN : les 3 blocs (statut, écoute, suppression) sur 3 colonnes plutôt que 2. */
.page-grid-3 { column-count: 3; }
@media (max-width: 1300px) { .page-grid-3 { column-count: 2; } }
@media (max-width: 1000px) { .page-grid-3 { column-count: 1; } }

/* Deux champs par ligne À L'INTÉRIEUR d'une carte (valeurs courtes : moins de défilement). Chaque champ garde son étiquette et son
   aide dans son propre bloc ; les boutons restent hors de la grille, sur toute la largeur. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
.form-grid > .field { min-width: 0; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
/* RÈGLES : valeurs courtes (heures, compteurs) dans un champ à moitié moins large, aligné sous son étiquette. */
.form-grid.compact .field input[type=text] { max-width: 50%; }

/* Sessions de la course : glisser-déposer pour réordonner les qualifications (la RACE reste toujours en dernier). */
td.drag-handle { width: 20px; padding: 6px 4px; color: var(--text-2); text-align: center; }
tr[draggable="true"] td.drag-handle { cursor: grab; }
tr[draggable="true"] td.drag-handle:active { cursor: grabbing; }
tr.is-dragging { opacity: .4; }
/* Bulle d'aide au survol de l'étiquette (RÈGLES) : remplace le paragraphe d'aide sous le champ, natif (title), sans script. */
.help-tip {
  display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 4px;
  border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-size: 10px; font-weight: 700; line-height: 1;
  cursor: help; vertical-align: middle; user-select: none;
}
.help-tip:hover, .help-tip:focus-visible { background: var(--brand-tint); color: var(--brand-text); }
button[disabled], button:disabled { opacity: .45; cursor: not-allowed; }
button[disabled]:hover { background: var(--surface-2); }
button.replay-launch { min-height: 26px; padding: 2px 10px; font-size: 11.5px; letter-spacing: .04em; }
textarea { resize: vertical; }
table.drivers td.num, table.drivers th.num { text-align: right; }
tr.is-inactive td { color: var(--text-2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
td.row-actions { white-space: nowrap; }
td.row-actions > * { margin-right: var(--s3); }
.row.gap select { max-width: 320px; }

/* Météo : icônes (WeatherIcon::svg) et état « données non disponibles » */
.wi { width: 1.5em; height: 1.5em; vertical-align: -0.4em; margin-right: .45em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wi-dry-day { color: var(--warning-text); }
.wi-dry-night { color: var(--info-text); }
.wi-rain-light { color: var(--brand-text); }
.wi-rain-heavy { color: var(--brand-text); stroke-width: 2.2; }
.wx-icon-cell { white-space: nowrap; }
.weather-unavailable { margin: 0 0 var(--s2); color: var(--warning-text); }

/* Tracé du circuit (aperçu construit par TrackGeometry::preview) */
.track-current { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s2); }
.track-current figure { margin: 0; width: 170px; }
.track-current figcaption { font-size: 12px; color: var(--text-2); margin-top: var(--s1); }
.track-preview { display: block; width: 100%; height: 130px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.track-preview .tp-track { fill: none; stroke: var(--brand-text); stroke-width: 4; stroke-linejoin: round; }
.track-preview .tp-sf { fill: var(--critical); }

/* Page ACCÈS (comptes Team Manager) */
table.managers td { vertical-align: top; }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; margin: 0 0 var(--s1); }
.inline-form input[type=email] { width: 220px; max-width: 100%; }
.actions-cell { min-width: 190px; }
button.danger { border-color: color-mix(in srgb, var(--critical) 55%, transparent); background: color-mix(in srgb, var(--critical) 10%, var(--surface-2)); color: var(--critical-text); }
/* Bouton rouge foncé plein (suppression d'une session) : plus fort que .danger (contour), pour une action rarement réversible. */
/* Un lien stylé en bouton rouge (« Supprimer… » de la liste des entraînements) : même rendu que le bouton du même nom. */
.button.danger { border-color: color-mix(in srgb, var(--critical) 55%, transparent); background: color-mix(in srgb, var(--critical) 10%, var(--surface-2)); color: var(--critical-text); }
.button.danger:hover { background: color-mix(in srgb, var(--critical) 18%, var(--surface-2)); text-decoration: none; }
button.danger-solid, .button.danger-solid { background: #8b1e1e; border-color: #8b1e1e; color: #ffffff; }
button.danger-solid:hover, .button.danger-solid:hover { background: #6f1717; border-color: #6f1717; }
button.success-solid, .button.success-solid { background: var(--success); border-color: var(--success); color: #071b10; }
button.success-solid:hover, .button.success-solid:hover { background: color-mix(in srgb, var(--success) 82%, #000000); border-color: color-mix(in srgb, var(--success) 82%, #000000); }
:root[data-theme="light"] button.success-solid, :root[data-theme="light"] .button.success-solid { color: #ffffff; }
button.warning-pulse, .button.warning-pulse { background: var(--warning); border-color: var(--warning); color: #211300; animation: listening-pulse 1.15s ease-in-out infinite; }
button.warning-pulse:hover, .button.warning-pulse:hover { background: color-mix(in srgb, var(--warning) 82%, #000000); border-color: color-mix(in srgb, var(--warning) 82%, #000000); }
@keyframes listening-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 50%, transparent); filter: brightness(1); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 8%, transparent); filter: brightness(.72); }
}
.collection-stopping { color: var(--warning-text); }
/* Collecte au niveau de la course (chantier 6) : elle reste lancée entre deux sessions, il faut que cela se voie. */
.collection-running { color: var(--success-text); }
/* Ancien mode de collecte (par session), gardé en secours : replié, discret, jamais au même niveau que le mode course. */
.fallback-mode { margin-top: var(--s3); font-size: 12px; color: var(--text-2); }
.fallback-mode summary { cursor: pointer; width: max-content; }
.fallback-mode p { margin: var(--s2) 0; }
.status-led { display: inline-block; width: 10px; height: 10px; margin-right: var(--s2); border-radius: 50%; vertical-align: 1px; }
.status-led.warning { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 20%, transparent); animation: status-led-blink .9s step-end infinite; }
@keyframes status-led-blink {
  50% { opacity: .2; box-shadow: none; }
}

label.check { display: flex; align-items: center; gap: var(--s2); }
label.check input { width: auto; }

details.change-email { margin-top: var(--s1); }
details.change-email summary { cursor: pointer; color: var(--brand-text); font-size: 12px; }
input[type=password].inline-input, .inline-form input[type=password] { width: 220px; max-width: 100%; }

/* HOME : colonnes Qualif / Race / Apex colorées, bouton vers la page Apex Timing */
.home-title { margin-bottom: var(--s3); }
.home-title h1 { margin-bottom: 0; }
.home-title, .home-views { flex-wrap: wrap; }
.home-activity { margin-bottom: var(--s3); }
.home-replays { border-color: color-mix(in srgb, var(--best) 45%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--best) 8%, var(--surface)), var(--surface)); }
.home-live-activity { border-color: color-mix(in srgb, var(--critical) 48%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--critical) 9%, var(--surface)), var(--surface)); }
.home-live-activity .home-replays-kicker { color: var(--critical-text); }
.home-live-row .home-replay-pulse { background: var(--critical); box-shadow: 0 0 0 4px color-mix(in srgb, var(--critical) 18%, transparent); }
.home-replays-head { margin-bottom: var(--s3); }
.home-replays-head h2 { margin: 2px 0 0; }
.home-replays-kicker { color: var(--best); font-size: 10px; font-weight: 750; letter-spacing: .16em; }
.home-replay-row { display: grid; grid-template-columns: 12px minmax(180px, 1fr) auto auto; align-items: center; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.home-replay-row + .home-replay-row { margin-top: var(--s2); }
.home-replay-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 18%, transparent); animation: home-replay-pulse 1.2s ease-in-out infinite; }
.home-replay-pulse.is-paused { background: var(--warning); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 18%, transparent); animation: none; }
.home-replay-main, .home-replay-meta { display: flex; align-items: center; gap: var(--s2); }
.home-replay-main { flex-wrap: wrap; }
.home-replay-main > span, .home-replay-meta > span:last-child { color: var(--text-2); font-size: 12px; }
.home-replay-meta > strong { font-variant-numeric: tabular-nums; color: var(--best); }
@keyframes home-replay-pulse { 50% { opacity: .35; transform: scale(.78); } }
@media (max-width: 760px) { .home-replay-row { grid-template-columns: 12px 1fr; } .home-replay-meta, .home-replay-row > .button { grid-column: 2; justify-self: start; } }
.home-circuit-head { align-items: flex-start; flex-wrap: wrap; }
.home-circuit-title { display: flex; align-items: center; gap: var(--s2); }
.home-circuit-track { flex: none; display: block; width: 84px; height: 51px; }
.home-circuit-track .track-preview { width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; }
.home-circuit-track .track-preview .tp-track { stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.home-circuit-actions { justify-content: flex-end; flex-wrap: wrap; gap: var(--s1); }
.home-event-group { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s2); }
.home-race-list { margin-top: var(--s3); }
.home-subhead { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin: 0 0 var(--s1); }
.home-section-toggle { width: fit-content; margin-left: var(--s2); cursor: pointer; color: var(--brand-text); font-weight: 650; list-style-position: outside; }
.home-section-toggle:hover { text-decoration: underline; }
.home-event-group[open] .home-section-toggle { margin-bottom: var(--s2); }
.badge.blue { color: var(--brand-text); border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: var(--brand-tint); }
.home-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; padding: 0; vertical-align: middle; }
.home-status-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-status-icon svg .home-icon-fill { fill: currentColor; stroke: none; }
.home-status-recording svg .home-icon-fill { animation: home-rec-blink 1s step-end infinite; }
@keyframes home-rec-blink { 50% { opacity: .12; } }
.session-status { display: inline-flex; align-items: center; gap: var(--s1); margin-right: var(--s2); white-space: nowrap; }
.apex-cell { white-space: nowrap; }
.apex-cell .button.small { margin-left: var(--s2); min-height: 26px; padding: 0 var(--s2); font-size: 12px; }

/* HOME : mêmes colonnes et mêmes largeurs pour tous les circuits (un tableau par circuit) ; Race et Apex (statut + bouton) sont alignés
   à DROITE, collés à la colonne Prép. */
table.home-table { table-layout: fixed; width: 100%; }
table.home-table th, table.home-table td { text-align: left; overflow: hidden; text-overflow: ellipsis; }
table.home-table th:nth-child(5), table.home-table td:nth-child(5),
table.home-table th:nth-child(6), table.home-table td:nth-child(6) { text-align: right; }
table.home-table .c-event { width: 14%; }
table.home-table .c-piste { width: 14%; }
table.home-table .c-date { width: 8%; }
table.home-table .c-qualif { width: 16%; }
table.home-table .c-race { width: 10%; }
table.home-table .c-apex { width: 14%; }
table.home-table .c-prep { width: 6%; }
table.home-table .c-open { width: 18%; }
table.home-table .open-cell .button.small { min-height: 26px; padding: 0 var(--s2); font-size: 12px; }
.home-course-actions { display: flex; flex-wrap: wrap; gap: var(--s1); }
.home-course-actions .home-replay-button { color: var(--best); border-color: color-mix(in srgb, var(--best) 55%, var(--line-strong)); background: color-mix(in srgb, var(--best) 12%, var(--surface)); }
.home-course-actions .home-mobile-button { color: var(--brand-text); border-color: color-mix(in srgb, var(--brand) 55%, var(--line-strong)); background: var(--brand-tint); }
.home-course-actions .home-view-icon { min-width: 28px; padding: 0 5px; }
.home-course-actions .home-view-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-course-actions .home-delete-x { min-width: 26px; padding: 0; font-size: 18px; line-height: 1; }
.home-course-actions .home-archive-button { min-width: 28px; padding: 0; color: #fff; background: #9a5a00; border-color: #b96b00; }
.home-course-actions .home-archive-button:hover { color: #fff; background: #754400; border-color: #8f5200; }
.home-course-actions .home-archive-button .fa-box-archive { width: 13px; height: 13px; fill: currentColor; }
.home-delete-confirm td { overflow: visible !important; white-space: normal; }
.home-delete-confirm form { margin: var(--s1) 0; }

/* Rosée estimée (26/09/2026) : niveau écrit en toutes lettres, la couleur ne fait que le souligner. */
.dew-cell.dew-probable strong, td.dew-cell.dew-probable { color: var(--critical-text); }
.dew-cell.dew-risque strong, td.dew-cell.dew-risque { color: var(--warning-text); }
.dew-cell.dew-surveiller strong, td.dew-cell.dew-surveiller { color: var(--text); }

/* DASHBOARD (27/09/2026) : chiffres clés en cartes, tableaux alignés, jauge du disque (<meter> natif : aucun style en ligne). */
.dash-title { margin: var(--s5) 0 var(--s3); font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s3); }
.race-session-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); }
.race-session-card { padding: var(--s3); }
.race-session-kpis { grid-template-columns: repeat(3, 1fr); margin: var(--s2) 0; }
.race-session-kpis .dash-kpi { padding: var(--s2); }
.dash-kpi { display: grid; gap: 2px; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card .dash-kpi { background: var(--surface-2); }
.dash-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.dash-kpi strong { font-family: var(--mono); font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dash-kpi .muted { font-size: 12px; }
/* Chiffres clés de la synthèse d'une course sans Apex (demande du porteur du 17/10/2026) : plus compacts que le
   gabarit dash-kpi par défaut (24px) ci-dessus, trop gros pour une carte par manche. Placées APRÈS .dash-kpi strong
   dans la feuille de style : même spécificité CSS, donc l'ordre de déclaration décide — avant, ces règles étaient
   écrasées silencieusement. */
.race-kpi-compact strong { font-size: 18px; }
.race-session-kpis strong { font-size: 12px; }
.table-scroll { overflow-x: auto; }
table.dash-table th, table.dash-table td { padding: var(--s1) var(--s2); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.dash-table th { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
table.dash-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Colonnes de largeur fixe et identiques entre plusieurs tableaux côte à côte (pilot_courses.php, demande du porteur
   du 19/10/2026 : un tableau par circuit, dans chaque bloc à venir/historique) : sans table-layout: fixed, chaque
   table dimensionne ses colonnes selon son propre contenu, et elles ne s'alignent pas entre elles. */
table.dash-table.is-fixed { width: 100%; table-layout: fixed; }
table.dash-table.is-fixed th:nth-child(1), table.dash-table.is-fixed td:nth-child(1) { width: 55%; }
table.dash-table.is-fixed th:nth-child(2), table.dash-table.is-fixed td:nth-child(2) { width: 20%; }
table.dash-table.is-fixed th:nth-child(3), table.dash-table.is-fixed td:nth-child(3) { width: 25%; }
table.dash-table.is-fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-meter { display: block; width: 100%; height: 14px; margin: var(--s2) 0; }


/* DASHBOARD SYSTEM · Démonstration (faux serveur Apex, 29/09/2026) */
.msg.warning { border-color: color-mix(in srgb, var(--warning) 55%, transparent); background: color-mix(in srgb, var(--warning) 10%, transparent); color: var(--warning-text); }
.demo-panel h3 { margin: var(--s4) 0 var(--s2); font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.demo-schedule { max-width: 460px; margin: var(--s2) 0; }
.demo-form { margin-top: var(--s3); }
.demo-programs { display: grid; gap: var(--s2); margin: 0 0 var(--s3); padding: 0; border: 0; }
.demo-programs legend { margin-bottom: var(--s2); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.demo-program { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.demo-program:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.demo-program input { margin-top: 3px; }
.demo-options { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.demo-options label { display: grid; gap: 4px; font-size: 12px; color: var(--text-2); }

/* Démonstration : voir le flux passer (porteur, 04/10/2026). La ligne change à chaque rafraîchissement tant que le flux vit. */
.demo-flux { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.demo-flux.is-quiet { border-color: color-mix(in srgb, var(--warning) 60%, var(--line)); }
.demo-flux-head { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); flex-wrap: wrap; }
.demo-flux-line { margin: 0 0 var(--s2); padding: var(--s2); overflow-x: auto; font-family: var(--mono); font-size: 12px; color: var(--brand-text); background: var(--surface); border-radius: var(--r-sm); white-space: pre; }
.demo-flux p.muted { margin: 0; }

/* Contenu de chaque message envoyé (porteur, 04/10/2026) : une boîte défilante, le plus récent en haut. */
.demo-flux-log { max-height: 320px; overflow: auto; margin-bottom: var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); scrollbar-width: thin; }
.demo-flux-msg { display: grid; grid-template-columns: auto auto 1fr; gap: var(--s2); align-items: baseline; padding: 6px var(--s2); border-bottom: 1px solid var(--line); }
.demo-flux-msg:last-child { border-bottom: 0; }
.demo-flux-n { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.demo-flux-at { font-family: var(--mono); font-size: 11px; color: var(--brand-text); }
.demo-flux-msg pre { margin: 0; overflow-x: auto; font-family: var(--mono); font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; }

.demo-sched-title { margin: var(--s3) 0 var(--s2); font-size: 13px; letter-spacing: .02em; }
.demo-sched-title .muted { font-weight: 400; }

/* GESTION FLUX : trois colonnes (commandes, épreuves, horaires calculés), puis les messages sous un séparateur. */
.demo-grid { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(280px, 1.4fr) minmax(260px, 1fr); gap: var(--s4); align-items: start; }
.demo-col { display: grid; gap: var(--s2); align-content: start; min-width: 0; border: 0; margin: 0; padding: 0; }
.demo-col h3 { margin: 0; font-size: 13px; letter-spacing: .02em; }
.demo-col legend { padding: 0; }
.demo-col label { display: grid; gap: 4px; font-size: 12px; color: var(--text-2); }
.demo-col .hint { margin: 0; }
.demo-col .demo-schedule { width: 100%; }
.demo-col button { justify-self: start; }
.demo-programs .demo-program { grid-template-columns: auto 1fr; display: grid; gap: var(--s2); align-items: start; color: var(--text); }
.demo-sep { margin: var(--s4) 0; border: 0; border-top: 1px solid var(--line-strong); }
.demo-flux-head { align-items: center; margin-bottom: var(--s2); }
.demo-flux-head h3 { margin: 0; }
@media (max-width: 1100px) { .demo-grid { grid-template-columns: 1fr; } }
.demo-action { display: block; }

/* ADMIN : le pilotage de la course liste toutes ses sessions, la ligne de la session affichée est repérée. */
.admin-sessions { width: 100%; margin-top: var(--s2); }
.admin-sessions td, .admin-sessions th { vertical-align: middle; }
/* ADMIN : meme deroule que l'ecran TM mobile (14/10/2026) - etapes numerotees, drapeaux, departs et fins detectes a confirmer. */
.admin-step { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.admin-step-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--brand); font-size: 13px; font-weight: 800; }
.admin-step-num.is-done { background: var(--success); }
.admin-flag { display: inline-block; box-sizing: content-box; width: 16px; height: 16px; margin-right: 8px; padding: 2px; border-radius: 50%; color: #333; background: #fff; vertical-align: -5px; }
.admin-proposal { margin: var(--s2) 0; padding: var(--s3); border: 2px dashed var(--brand); border-radius: var(--r-lg); background: var(--brand-tint); }
.admin-proposal.is-end { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.admin-proposal p { margin: 0 0 var(--s2); }
.admin-proposal form { margin-right: var(--s2); }
.admin-proposal label { display: inline-flex; align-items: center; gap: var(--s1); margin-right: var(--s2); }
.admin-sessions tr.is-current td { background: var(--brand-tint); }
.admin-sessions .admin-actions { text-align: right; }
.admin-sessions .admin-actions form { display: inline; }

/* Saisie d'une séance d'entraînement : beaucoup de petits champs, puis le bloc des temps au tour. */
.practice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s3); margin-bottom: var(--s3); }
.practice-grid .practice-wide { grid-column: 1 / -1; }
.practice-form textarea { width: 100%; font-family: var(--mono); font-size: 13px; }
.practice-form #p_laps { min-height: 180px; }
.field-error { margin: 4px 0 0; color: var(--critical-text); font-size: 12px; }
.inline-label { display: inline-flex; align-items: center; gap: var(--s2); font-size: 12px; color: var(--text-2); }
.link-button { padding: 0; color: var(--critical-text); border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
.confirm-inline { display: inline; }

.practice-flags { display: flex; flex-wrap: wrap; gap: var(--s3); }
.practice-flags label { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.practice-warnings { margin: 0; padding-left: var(--s4); color: var(--warning-text); }
.sheet-form input[type="file"] { color: var(--text-2); }

/* Entraînements planifiés : préparation collective, toujours séparée des résultats saisis après la séance. */
.practice-plan-form-card { margin-bottom: var(--s4); }
.practice-plan-drivers { min-width: 0; margin: 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); }
.practice-plan-drivers legend { padding: 0 var(--s1); color: var(--text-2); font-size: 12px; font-weight: 650; }
.practice-plan-drivers > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s2); }
.practice-plan-drivers label { display: flex; align-items: center; gap: var(--s2); margin: 0; color: var(--text); }
.practice-plan-list > h2 { margin-bottom: var(--s3); }
.practice-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.practice-plan-card { min-width: 0; }
.practice-plan-head { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); }
.practice-plan-head time { display: grid; width: 52px; height: 58px; place-items: center; align-content: center; overflow: hidden; border-radius: var(--r-md); color: #111820; background: #f4f6f8; }
.practice-plan-head time span { order: -1; align-self: stretch; width: 100%; padding: 2px 0; color: #fff; background: var(--brand); font-size: 9px; font-weight: 800; text-align: center; }
.practice-plan-head time strong { font-size: 20px; line-height: 1.25; }
.practice-plan-head h3 { font-size: 17px; }
.practice-plan-head p { margin: 2px 0 0; color: var(--text-2); }
.practice-plan-conditions, .practice-plan-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.practice-plan-conditions { margin-top: var(--s3); }
.practice-plan-conditions > span, .practice-plan-summary > span { display: grid; gap: 2px; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.practice-plan-conditions small, .practice-plan-summary small { color: var(--text-2); font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.practice-plan-weather { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.practice-plan-weather h3 { margin-bottom: var(--s2); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.practice-plan-weather-data { display: grid; grid-template-columns: 42px repeat(3, minmax(0, 1fr)); align-items: center; gap: var(--s2); }
.practice-plan-weather-data > span:not(.practice-plan-weather-icon) { display: grid; gap: 2px; }
.practice-plan-weather-data small { color: var(--text-2); font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.practice-plan-weather-data em { color: var(--text-2); font-size: 11px; font-style: normal; }
.practice-plan-weather-icon .wi { width: 32px; height: 32px; margin: 0; }
.practice-plan-weather-periods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.practice-plan-weather-period { position: relative; display: grid; gap: 3px; min-width: 0; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.practice-plan-weather-period > strong { padding-right: 26px; font: 750 11px/1.3 var(--mono); }
.practice-plan-weather-period > span:not(.practice-plan-weather-period-icon) { color: var(--text-2); font-size: 10px; }
.practice-plan-weather-period small { display: inline; margin-right: 4px; }
.practice-plan-weather-period-icon { position: absolute; top: 6px; right: 6px; }
.practice-plan-weather-period-icon .wi { width: 20px; height: 20px; margin: 0; }
.practice-plan-weather-period.is-unavailable { min-height: 78px; opacity: .72; }
.practice-plan-weather .hint, .practice-plan-weather .muted { margin: var(--s2) 0 0; font-size: 10px; }
.practice-plan-comment { margin: var(--s3) 0 0; padding: var(--s3); border-left: 3px solid var(--brand); color: var(--text-2); background: var(--surface-2); white-space: normal; }
.practice-plan-reference { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.practice-plan-reference h3 { margin-bottom: var(--s2); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.practice-plan-reference ul { margin: 0 0 var(--s3); padding: 0; list-style: none; }
.practice-plan-reference li { display: flex; justify-content: space-between; gap: var(--s3); padding: 4px 0; border-bottom: 1px solid var(--line); }
.practice-plan-reference li strong, .practice-plan-summary strong { font-family: var(--mono); }
.practice-plan-empty { display: grid; min-height: 120px; place-items: center; }
@media (max-width: 1050px) { .practice-plan-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 850px) { .practice-plan-weather-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .practice-plan-head { grid-template-columns: 52px minmax(0, 1fr); }
  .practice-plan-head > .button { grid-column: 1 / -1; justify-self: start; }
  .practice-plan-conditions, .practice-plan-summary { grid-template-columns: minmax(0, 1fr); }
  .practice-plan-weather-data { grid-template-columns: 34px minmax(0, 1fr); }
  .practice-plan-weather-data > span:nth-child(n+3) { grid-column: 2; }
  .practice-plan-weather-periods { grid-template-columns: minmax(0, 1fr); }
}

/* Photo de présentation du circuit : même cadrage 16:9 que les cartes de HOME BIS. */
/* Ligne 1 : Caractéristiques (col. 1) et Pistes (col. 2) ; ligne 2 : Photo, pleine largeur (demande du porteur du
   19/10/2026, revenant sur l'ancienne grille à 3 colonnes). */
.circuit-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.circuit-admin-grid.is-create { grid-template-columns: minmax(0, 560px); }
.circuit-admin-grid > .circuit-admin-card { min-width: 0; max-width: none; margin-top: 0; }
.circuit-admin-grid > .circuit-admin-card.is-full-width { grid-column: 1 / -1; }
.circuit-tracks-card table { min-width: 420px; }
/* Tracé SVG de CHAQUE piste, dans la table (demande du porteur du 19/10/2026) : la piste exacte, pas « une piste du
   circuit » (PisteRepository::previewForTrack, pas previewByCircuit). */
.circuit-piste-track { display: block; width: 90px; height: 56px; }
.circuit-piste-track .track-preview { width: 100%; height: 100%; border: 0; background: transparent; }
.circuit-photo-preview { display: block; width: min(100%, 720px); height: auto; aspect-ratio: 16 / 9; margin-top: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); object-fit: cover; }
.circuit-photo-meta { margin: var(--s1) 0 var(--s3); }
.circuit-photo-form { display: grid; justify-items: start; gap: var(--s2); }
.circuit-photo-form input[type="file"] { max-width: 100%; color: var(--text-2); }
.circuit-photo-form .actions, .circuit-photo-delete .actions { margin-top: var(--s2); }
@media (max-width: 1100px) { .circuit-admin-grid { grid-template-columns: minmax(0, 1fr); } }

/* Photo de profil pilote : stockage privé et cadrage carré, repris sur HOME BIS. */
.pilot-photo-card { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: var(--s4); align-items: start; }
.pilot-photo-card h2 { margin-top: 0; }
.pilot-photo-form { display: grid; justify-items: start; gap: var(--s2); margin-top: var(--s3); }
.pilot-photo-form input[type="file"] { max-width: 100%; color: var(--text-2); }
.pilot-photo-preview-wrap { display: grid; justify-items: center; gap: var(--s2); }
.pilot-photo-preview { display: block; width: 160px; height: 160px; border: 2px solid var(--brand); border-radius: 50%; background: var(--surface-2); box-shadow: 0 0 0 5px var(--brand-tint); object-fit: cover; }
.pilot-photo-preview.is-placeholder { padding: 24px; object-fit: contain; }
.pilot-photo-delete { margin-top: var(--s3); }
@media (max-width: 640px) { .pilot-photo-card { grid-template-columns: minmax(0, 1fr); } .pilot-photo-preview-wrap { grid-row: 1; } }

/* Détail d'une séance d'entraînement (repris des écrans de kart.solwen.fr, à la charte de Kartrac). */
.kv { width: 100%; }
.kv th { width: 34%; padding: 6px 10px 6px 0; color: var(--text-2); font-weight: 600; text-align: left; vertical-align: top; }
.kv td { padding: 6px 0; }
.lap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--s2); }
.lap-cell { display: grid; gap: 1px; padding: var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.lap-cell strong { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.lap-cell .muted, .lap-number { font-size: 10px; }
.lap-number { color: var(--text-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lap-cell.is-fast strong { color: var(--brand-text); }
.lap-cell.is-best { border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface-2)); }
.lap-cell.is-best strong, .is-best-lap { color: var(--success-text); }
.lap-chart { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: stretch; }
.lap-chart-axis { display: grid; align-content: space-between; color: var(--text-2); font: 600 11px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.lap-chart-plot { width: 100%; height: 260px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
/* Repères horizontaux discrets (17/10/2026) : juste de quoi guider l'oeil entre les trois graduations, jamais au-dessus du tracé. */
.lap-chart-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Une ligne verticale fine par tour (17/10/2026), pour repérer chaque tour sur l'axe sans compter les points. */
.lap-chart-vgrid { stroke: var(--line); stroke-width: 1; stroke-opacity: .5; vector-effect: non-scaling-stroke; }
.lap-chart-area { stroke: none; }
.lap-chart-stop-top { stop-color: var(--brand-text); stop-opacity: .3; }
.lap-chart-stop-bottom { stop-color: var(--brand-text); stop-opacity: 0; }
.lap-chart-line { fill: none; stroke: var(--brand-text); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
/* Points « découpés » : un liseré de la couleur du fond sépare chaque point du trait, comme un pointillé propre. */
.lap-chart-dot { fill: var(--brand-text); stroke: var(--surface-2); stroke-width: 3; vector-effect: non-scaling-stroke; }
.lap-chart-dot.is-best { fill: var(--success-text); }
.lap-chart-ref { stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1 7; stroke-linecap: round; }
.lap-chart-ref.is-avg { stroke: var(--text-2); }
.lap-chart-ref.is-quarter { stroke: var(--warning-text); }
.lap-chart-ref.is-record { stroke: var(--success-text); }
.lap-chart-x { display: flex; justify-content: space-between; margin-top: 4px; padding-left: 56px; color: var(--text-2); font-size: 11px; }
.lap-chart-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: var(--s3) 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: 11px; }
.lap-chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.lap-chart-legend i { width: 16px; height: 0; border-top: 2px solid var(--text-2); }
.lap-chart-legend .is-line { border-top-color: var(--brand-text); }
.lap-chart-legend .is-avg { border-top-style: dashed; }
.lap-chart-legend .is-quarter { border-top-color: var(--warning-text); border-top-style: dashed; }
.lap-chart-legend .is-record { border-top-color: var(--success-text); border-top-style: dashed; }

/* Saisie des tours : grille numérotée (reprise de kart.solwen.fr) ou bloc à coller. */
.lap-modes { align-items: center; margin-bottom: var(--s2); }
.mode-switch { display: inline-flex; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.mode-button { padding: 5px 10px; color: var(--text-2); border: 0; background: var(--surface-2); font: 600 11px/1.2 var(--font); cursor: pointer; }
.mode-button + .mode-button { border-left: 1px solid var(--line-strong); }
.mode-button[aria-pressed="true"] { color: #fff; background: var(--brand); }
.lap-input-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--s2); }
.lap-input { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.lap-input span { color: var(--text-2); font: 700 10px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; }
.lap-input input { width: 100%; padding: 3px 4px; font-family: var(--mono); font-size: 13px; }
.lap-input.is-best { border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface-2)); }
.lap-input.is-best input { color: var(--success-text); font-weight: 700; }
.lap-input.is-wrong { border-color: var(--critical); }
.lap-input.is-wrong input { color: var(--critical-text); }
#lap-count-row { max-width: 180px; }

/* Historique des séances : six colonnes, tri sur trois d'entre elles, deux listes qui filtrent aussitôt. */
.practice-table { width: 100%; }
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { color: var(--brand-text); text-decoration: underline; }
.sort-idle { color: var(--text-2); opacity: .45; }
.filter-row td { padding: 4px 6px; background: var(--surface-2); }
.filter-row select { width: 100%; min-width: 120px; padding: 2px 4px; font-size: 11px; }
.button.small { padding: 2px 10px; font-size: 11px; }

/* Page PERFORMANCES d'un pilote et vue transverse de l'équipe (pilot.php, 05/10/2026). Un écart plus rapide est vert, plus lent
   rouge : l'écart est TOUJOURS écrit en clair à côté, la couleur ne porte jamais seule l'information. */
.dash-sub { margin: var(--s4) 0 var(--s2); font-size: 13px; font-weight: 650; }
.dash-sub .muted { font-weight: 400; font-size: 12px; }
table.dash-table td.is-faster { color: var(--success); }
table.dash-table td.is-slower { color: var(--critical); }
ul.plain-list { margin: var(--s2) 0 0; padding-left: var(--s4); }
ul.plain-list li { margin-bottom: 2px; }
/* Second niveau d'onglets, DANS un onglet de premier niveau (le pilote ouvert) : plus discret, sans filet sous la rangée. */
.page-subtabs { display: flex; gap: var(--s1); margin: calc(var(--s4) * -1 + var(--s2)) 0 var(--s4); overflow-x: auto; scrollbar-width: none; }
.page-subtabs::-webkit-scrollbar { display: none; }
.page-subtab { padding: 4px var(--s3); border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.page-subtab:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.page-subtab[aria-current="page"] { color: var(--text); border-color: var(--brand-text); background: color-mix(in srgb, var(--brand-text) 14%, transparent); }
/* Onglet PROFIL d'un pilote (05/10/2026) : les champs sur DEUX colonnes, libellé et champ ALIGNÉS sur la même ligne, la note
   et l'erreur sous le champ. Sous 900 px tout repasse sur une colonne, et le libellé au-dessus du champ. */
.prof-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s5); }
.prof-field { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; column-gap: var(--s3); row-gap: 2px; }
.prof-field > label { margin: 0; }
.prof-field > input, .prof-field > select, .prof-field > textarea { margin: 0; }
.prof-field > .hint, .prof-field > .field-error { grid-column: 2; margin: 0 0 var(--s1); }
.prof-field.prof-wide { grid-column: 1 / -1; align-items: start; }
@media (max-width: 900px) {
  .prof-cols { grid-template-columns: minmax(0, 1fr); }
  .prof-field { grid-template-columns: minmax(0, 1fr); }
  .prof-field > .hint, .prof-field > .field-error { grid-column: 1; }
}
/* Notes en étoiles (demande du porteur du 18/10/2026 : « comme sur la version mobile ») : même technique CSS pure que
   .m-stars (mobile.css) — cinq boutons radio dans l'ordre 5..1, remis à l'endroit par flex-direction row-reverse,
   « input:checked ~ label » et « label:hover ~ label » comblent les étoiles qui précèdent celle visée. Aucun script,
   conforme à la CSP du projet. */
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.stars input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.stars label { min-width: 26px; font-size: 22px; line-height: 1; color: var(--line-strong); text-align: center; cursor: pointer; user-select: none; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: var(--warning-text); }
.stars input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.stars input:disabled ~ label { cursor: default; }
/* Actions de la liste PILOTES (05/10/2026) : trois gestes par ligne — voir, désactiver, archiver. Les deux derniers passent par
   une confirmation (shell.js) ; « Archiver » est rouge, c'est le seul des trois qui ne se défait pas d'un clic. */
.actions-cell .row { gap: var(--s2); flex-wrap: nowrap; justify-content: flex-end; }
.actions-cell form { margin: 0; }
.actions-cell .button.small, .actions-cell button.small { min-height: 26px; padding: 0 var(--s2); font-size: 12px; white-space: nowrap; }

/* Liste générale des pilotes : cartes avec la photo de profil au début, sans lecture de l'image dans le HTML. */
.pilot-list-section > .hint { margin-top: var(--s3); }
.pilot-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.pilot-list-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s4); min-width: 0; }
.pilot-list-card.is-inactive { color: var(--text-2); }
.pilot-list-portrait { display: block; align-self: start; border-radius: 50%; }
.pilot-list-avatar { display: block; width: 104px; height: 104px; border: 2px solid var(--brand); border-radius: 50%; background: var(--surface-2); box-shadow: 0 0 0 4px var(--brand-tint); object-fit: cover; }
.pilot-list-avatar.is-placeholder { padding: 18px; object-fit: contain; }
.pilot-list-content { display: flex; min-width: 0; flex-direction: column; }
.pilot-list-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); min-width: 0; }
.pilot-list-heading h2 { min-width: 0; font-size: 16px; }
.pilot-list-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) var(--s3); margin: var(--s3) 0; }
.pilot-list-details > div { min-width: 0; }
.pilot-list-details dt { margin: 0 0 2px; color: var(--text-2); font-size: 10px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.pilot-list-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.pilot-list-details .pilot-list-wide { grid-column: span 2; }
.pilot-list-actions { padding-top: var(--s3); border-top: 1px solid var(--line); margin-top: auto; }
.pilot-list-actions .row { flex-wrap: wrap; gap: var(--s2); }
.pilot-list-actions form { margin: 0; }
@media (max-width: 1350px) { .pilot-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pilot-card-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .pilot-list-card { grid-template-columns: 76px minmax(0, 1fr); gap: var(--s3); }
  .pilot-list-avatar { width: 68px; height: 68px; }
  .pilot-list-avatar.is-placeholder { padding: 12px; }
  .pilot-list-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilot-list-details .pilot-list-wide { grid-column: 1 / -1; }
}

/* AGENDA : vue mensuelle (10/10/2026). Création et détail d'un entraînement dans une colonne à côté du calendrier,
   pas en dessous (demande du porteur du 10/10/2026). */
.agenda-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s4); align-items: start; margin-bottom: var(--s4); }
.agenda-side { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.agenda-side-card { margin: 0; }
@media (max-width: 1050px) {
  .agenda-layout { grid-template-columns: minmax(0, 1fr); }
}

.agenda-toolbar { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.agenda-month { margin: 0; font-size: 15px; flex: 1; text-align: center; }
.agenda-today { margin-left: var(--s2); }
.agenda-grid { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.agenda-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-row + .agenda-row { border-top: 1px solid var(--line); }
.agenda-cell { min-height: 92px; padding: var(--s2); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.agenda-cell:first-child { border-left: none; }
.agenda-dayname { min-height: auto; padding: var(--s1) var(--s2); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); background: var(--surface-2); align-items: center; }
.agenda-head { background: var(--surface-2); }
.agenda-cell.is-outside { background: color-mix(in srgb, var(--surface-2) 55%, transparent); color: var(--text-2); }
.agenda-cell.is-outside .agenda-daynum { color: var(--text-2); }
.agenda-cell.is-today { background: var(--brand-tint); }
.agenda-daynum { font-size: 12px; font-weight: 650; }
.agenda-entry { display: block; font-size: 10px; line-height: 1.3; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.agenda-entry.is-selected { outline: 2px solid var(--brand); outline-offset: -1px; font-weight: 650; }

/* Bloc 1 : actions de création (10/10/2026). */
.agenda-actions-card { display: flex; flex-direction: column; gap: var(--s2); }

/* Bloc 2 : liste minimale des entraînements et courses du mois, une action par ligne (10/10/2026). */
.agenda-side-list-title { margin: 0 0 var(--s3); font-size: 14px; }
.agenda-side-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.agenda-side-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-md); }
.agenda-side-date { display: grid; place-items: center; line-height: 1.1; text-align: center; }
.agenda-side-date strong { font-size: 14px; }
.agenda-side-date small { color: var(--text-2); font-size: 9px; text-transform: uppercase; }
.agenda-side-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.agenda-side-action { flex: none; font-size: 11px; font-weight: 650; text-decoration: none; color: var(--brand-text); }
.agenda-side-action.is-live { color: var(--critical-text); }

/* Fenêtres (dialog) : création/modification d'un entraînement (Team Manager) et consultation (pilote), 10/10/2026. */
dialog.agenda-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); }
dialog.agenda-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.agenda-dialog-close { width: 36px; min-height: 36px; padding: 0; border-radius: 50%; color: var(--text); background: var(--surface-2); font-size: 24px; font-weight: 400; line-height: 1; }
.agenda-dialog-detail { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .agenda-cell { min-height: 64px; padding: 4px; }
  .agenda-dayname { font-size: 9px; }
  .agenda-entry { font-size: 9px; }
}

/* ── Page CIRCUITS ── */
.circ-page-header { margin-bottom: var(--s3); }
.circ-page-header h1 { margin-bottom: 0; }
.circ-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.circ-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.circ-visual { position: relative; display: grid; place-items: center; width: 100%; height: 160px; overflow: hidden; padding: 0; border: 0; border-radius: 0; cursor: pointer; color: rgba(255,255,255,.85); background: radial-gradient(circle at 70% 20%, #597d52, #1f3b35 70%); transition: opacity var(--t-fast); }
.circ-card-2 .circ-visual { background: radial-gradient(circle at 70% 20%, #817a4e, #343523 70%); }
.circ-card-3 .circ-visual { background: radial-gradient(circle at 70% 20%, #4f6f83, #233743 70%); }
.circ-card-4 .circ-visual { background: radial-gradient(circle at 70% 20%, #755f65, #382a32 70%); }
.circ-visual:hover { opacity: .88; }
.circ-visual > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.circ-visual > svg:not(.track-preview) { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.circ-visual .track-preview { width: calc(100% - 24px); height: 130px; border: 0; background: transparent; }
.circ-visual .track-preview .tp-track { stroke: #eef6fc; stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.circ-visual .track-preview .tp-sf { fill: #ff3654; }
/* Photo et tracé alternent toutes les 5 s (13/10/2026) : cycle de 10 s, fondu d'une demi-seconde. Les deux sont empilés ;
   seule l'opacité change. Sans animation (réglage système), la photo reste seule. */
.circ-alt > img, .circ-alt > .track-preview { position: absolute; inset: 0; margin: auto; }
.circ-alt > .track-preview { opacity: 0; animation: circ-alt-track 10s infinite; }
.circ-alt > img { animation: circ-alt-photo 10s infinite; }
@keyframes circ-alt-photo { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes circ-alt-track { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .circ-alt > img, .circ-alt > .track-preview { animation: none; } }
.circ-card-body { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3); flex-wrap: wrap; }
.circ-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.circ-card-info > strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.circ-card-info > span { font-size: 11px; color: var(--text-2); }
.circ-card-actions { display: flex; gap: var(--s1); flex-shrink: 0; }
/* Circuits archivés */
.circ-archived-group { margin-top: var(--s4); }
.circ-archived-list { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.circ-archived-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
/* Dialog de détail */
.circ-dialog { width: min(860px, calc(100vw - 32px)); max-height: min(780px, calc(100vh - 32px)); padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text); background: var(--bg); box-shadow: 0 28px 90px rgba(0,0,0,.58); display: flex; flex-direction: column; }
.circ-dialog:not([open]) { display: none; }
.circ-dialog::backdrop { background: rgba(2,7,12,.78); backdrop-filter: blur(5px); }
.circ-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(120deg, color-mix(in srgb, var(--surface) 94%, #163d65), var(--surface)); flex-shrink: 0; }
.circ-dialog-title-block h2 { font-size: 22px; margin: 4px 0 0; }
.circ-dialog-kicker { font-size: 10px; font-weight: 750; letter-spacing: .16em; color: var(--brand-text); }
.circ-dialog-coords { margin: 4px 0 0; font-size: 12px; }
.circ-dialog-head form { margin: 0; }
.circ-dialog-close { width: 36px; min-height: 36px; padding: 0; border-radius: 50%; color: var(--text); background: var(--surface-2); font-size: 24px; font-weight: 400; line-height: 1; }
.circ-dialog-photo { flex-shrink: 0; }
.circ-dialog-photo img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.circ-dialog-body { padding: 18px 24px; overflow-y: auto; flex: 1; }
.circ-pistes-list { display: flex; flex-direction: column; gap: var(--s2); }
.circ-piste-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); flex-wrap: wrap; }
.circ-piste-row.is-inactive { opacity: .6; }
.circ-piste-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.circ-piste-info > strong { font-size: 14px; }
.circ-piste-info > span { font-size: 11px; }
.circ-piste-meta { display: flex; align-items: center; gap: var(--s1); flex-shrink: 0; flex-wrap: wrap; }
.circ-dialog-footer { display: flex; align-items: center; gap: var(--s2); padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface); flex-shrink: 0; flex-wrap: wrap; }
.button.danger-outline { color: var(--critical-text); border-color: color-mix(in srgb, var(--critical) 50%, var(--line)); background: transparent; }
.button.danger-outline:hover { background: color-mix(in srgb, var(--critical) 10%, transparent); }
@media (max-width: 1200px) { .circ-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .circ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .circ-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Onglets TEAM (pilots.php / managers.php) ── */
.team-tabs { display: flex; gap: 0; margin-bottom: var(--s4); border-bottom: 2px solid var(--line); }
.team-tab { padding: var(--s2) var(--s4); font-size: 13px; font-weight: 650; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--t-fast), border-color var(--t-fast); }
.team-tab:hover { color: var(--text); text-decoration: none; }
.team-tab.is-active { color: var(--brand-text); border-bottom-color: var(--brand); }

/* ── Rappel d'état de forme du pilote (porteur, 11/10/2026) ──
   Fenêtre modale servie par le gabarit commun : elle s'affiche donc aussi bien sur les pages desktop que sur les vues
   mobiles du pilote. Position fixe et z-index au-dessus de la barre haute et des panneaux mobiles. */
.fit-layer { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: var(--s4); background: var(--overlay); backdrop-filter: blur(3px); }
.fit-dialog { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: var(--s5); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: var(--surface); color: var(--text); box-shadow: 0 28px 90px rgba(0,0,0,.58); text-align: center; }
.fit-dialog h2 { margin: 0; font-size: 19px; }
.fit-event { margin: var(--s2) 0 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--brand-text); }
.fit-event .muted { display: block; font-weight: 400; letter-spacing: 0; }
.fit-why { margin: var(--s3) 0 var(--s4); font-size: 12px; color: var(--text-2); }
.fit-form { display: flex; flex-direction: column; gap: var(--s2); margin: 0; }
.fit-level { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); color: var(--text); font-size: 14px; text-align: left; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.fit-level:hover { border-color: var(--brand); background: var(--surface); }
.fit-level strong { flex: 0 0 24px; font-size: 17px; color: var(--brand-text); text-align: center; }
.fit-later { margin: var(--s4) 0 0; }

/* Course en lecture seule du pilote (course.php) : sélecteur des sessions de la course, au-dessus du contenu de l'onglet. */
.course-sessions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.course-sessions .button { font-size: 12px; }
.course-sessions .button .muted { margin-left: var(--s2); font-weight: 400; }
/* Onglet LIVE : le classement prend toute la largeur (pas de boîte .page), le sélecteur reprend donc la marge à son compte. */
.shell-main.is-live .course-sessions { padding: var(--s3) var(--s4) 0; margin-bottom: 0; }