@import url('mon_garage.css'); /* variables & .f1-card existants */

/* 1) Contexte page : on conserve le fond par défaut */
.f1-page { background: none; }

/* 2) Sous-titre rouge */
.subtitle-red {
  color: var(--f1-red);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

/* 3) Barre de filtres & recherche */
.f1-filter-bar {
  gap: .5rem;
}
.f1-filter-bar input,
.f1-filter-bar select {
  background: var(--f1-grey);
  color: var(--f1-white);
  border: 1px solid var(--f1-red);
}
.f1-filter-bar input::placeholder {
  color: #ccc;
}
.f1-filter-bar input:focus,
.f1-filter-bar select:focus {
  box-shadow: none;
  border-color: var(--f1-white);
}

/* 4) Bloc résumé : on reprend .f1-card de mon_garage.css */

/* 5) Carte tableau : fusion possible sans coins blancs */
.race-results-card .card-body {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1rem 2rem var(--f1-shadow);
  background: var(--f1-grey);
}

/* 6) Table plein width */
.race-results-card table {
  width: 100%;
  border-collapse: collapse;
}

/* 7) En-têtes rouges + damier */
.race-results-card thead th {
  position: relative;
  background: var(--f1-red);
  color: var(--f1-white);
  text-transform: uppercase;
  font-weight: 600;
  padding: 1rem;
  border: none;
}
.race-results-card thead th::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--f1-white) 0 10px,
    var(--f1-black) 10px 20px
  );
}

/* 8) Alternance bloc par bloc */
.race-results-card tbody.group-odd tr td {
  background: var(--f1-grey);
}
.race-results-card tbody.group-even tr td {
  background: var(--f1-black);
}

/* 9) Fusion cellule Course (rowspan) */
.course-cell {
  background: var(--f1-black);
  color: var(--f1-white);
  border-right: 2px solid var(--f1-red);
  padding: 1rem;
  text-align: center;
  vertical-align: middle;
}
.course-cell .course-title {
  color: var(--f1-red);
  font-size: 1.1rem;
  font-weight: 700;
}
.course-cell .course-date,
.course-cell .course-comm {
  color: var(--f1-white);
  font-size: .85rem;
}

/* 10) Cellules générales */
.race-results-card td {
  padding: .75rem 1rem;
  color: var(--f1-white);
  border: none;
}

/* 11) Masquer chartContainer */
#chartContainer { display: none !important; }
/* applique l’arrondi et le overflow:hidden au table lui‐même */
.race-results-card table {
  border-radius: 1rem;        /* même rayon que la card */
  overflow: hidden;           /* coupe tout débordement blanc */
  background: var(--f1-grey); /* assure le même fond */
  border-spacing: 0;
  border-collapse: collapse;
}

/* supprime l’espèce de “colonne blanche” à droite */
.race-results-card table th,
.race-results-card table td {
  border: none;
}
/* 1) Les 3 premiers en gras (médaille déjà injectée par l’emoji) */
.top3-row td {
  font-weight: 700;
}

/* 2) Les éliminés en gras + rouge */
.eliminated-row td {
  font-weight: 700;
  color: var(--f1-red) !important;
}

/* 3) Si une ligne est à la fois top3 et éliminée, priorité rouge+gras */
.top3-row.eliminated-row td {
  color: var(--f1-red) !important;
  font-weight: 700;
}
/* Lien sur la cellule Course conserve le style tableau */
.course-cell .course-link {
  display: block;
  color: inherit;           /* reprend la couleur du texte td */
  text-decoration: none;    /* pas de soulignement par défaut */
}

.course-cell .course-link:hover {
  text-decoration: underline; /* ou toute autre indication au survol */
}
#btnEvo {
  margin-left: .5rem;
}
#modalEvo .modal-body {
  white-space: nowrap;    /* empêche le wrapping du canvas */
}

#evoChart {
  min-width: 800px;        /* largeur min pour activer le scroll si > modal */
}
.course-cell { vertical-align: middle; padding:10px; }
.course-block { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.course-header { margin-bottom:4px; }
.course-title { font-weight:700; font-size:1.02rem; color:#fff; line-height:1; }
.circuit-id { font-weight:600; color:#fff; margin-left:6px; font-size:0.95rem; }
.course-date { font-size:0.9rem; color:#fff; opacity:0.95; margin-top:2px; }

.course-lines { width:100%; display:flex; flex-direction:column; gap:6px; align-items:center; }
.course-line { display:flex; align-items:center; gap:18px; justify-content:center; }

.line-meta .meta-item { color:#fff; font-weight:700; font-size:15px; }
.line-meteo { gap:24px; }

.meta-sep { color:rgba(255,255,255,0.25); margin:0 6px; }

/* ---------------------------
   Météo : single + double (complet)
   --------------------------- */

/* layout single : image au-dessus, label en dessous */
.meta-meteo {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* explicit single modifier */
.meta-meteo--single { display:flex; flex-direction:column; align-items:center; gap:6px; }

/* LABEL styles (ESSAIS / COURSE) */
.meta-meteo .meteo-name {
  color:#fff;
  font-weight:700;
  font-size:13px;
  text-align:center;
  line-height:1;
  letter-spacing: .5px;
}

/* SINGLE image : grande (x2) */
.meta-meteo .meteo-img {
  width:96px;
  height:96px;
  object-fit:contain;
  display:block;
}

/* variant for printed icons used elsewhere */
.card-meteo-img { width:36px; height:36px; object-fit:contain; display:inline-block; vertical-align:middle; }

/* double layout : default two small icons inline, labels hidden (legacy small-double) */
.meta-meteo--double {
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  justify-content:center;
}

/* left / right containers, keep vertical structure in case you want labels */
.meta-meteo--double .meta-meteo-left,
.meta-meteo--double .meta-meteo-right {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

/* double images : small (legacy) */
.meta-meteo--double .meteo-img {
  width:26px;
  height:26px;
  object-fit:contain;
}

/* hide labels for legacy small double */
.meta-meteo--double .meteo-name {
  display: none;
}

/* smaller image class if used by JS (compat) */
.meteo-img--small { width:26px; height:26px; object-fit:contain; }

/* spacing polish */
.course-block .course-lines .course-line.line-meteo { gap: 12px; align-items:center; }

/* ---------------------------
   Double-large override (depart != fin)
   - two images same size as single (96x96) displayed side-by-side
   - label "COURSE" visible under the pair, same style as single label
   --------------------------- */

.meta-meteo--double.meta-meteo--double-large {
  display:flex;
  flex-direction:column; /* images row above, label below */
  align-items:center;
  gap:8px;
  justify-content:center;
}

/* wrapper holding the two images side-by-side */
.meta-meteo--double.meta-meteo--double-large > .meta-meteo-left,
.meta-meteo--double.meta-meteo--double-large > .meta-meteo-right {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

/* force the two images to be next to each other; create a visual row */
.meta-meteo--double.meta-meteo--double-large > .meta-meteo-left,
.meta-meteo--double.meta-meteo--double-large > .meta-meteo-right {
  flex: 0 0 auto;
}

/* images in double-large use same dimension as single */
.meta-meteo--double.meta-meteo--double-large .meteo-img {
  width:96px;
  height:96px;
  object-fit:contain;
}

/* label under the two images */
.meta-meteo--double.meta-meteo--double-large .meta-meteo--double-label {
  display:block;
  color:#fff;
  font-weight:700;
  font-size:13px;
  text-align:center;
  line-height:1;
  margin-top:4px;
}

/* ensure legacy small-double still hides labels */
.meta-meteo--double:not(.meta-meteo--double-large) .meteo-name { display: none; }

/* responsive adjustments */
@media (max-width: 480px) {
  .meta-meteo .meteo-img { width:70px; height:70px; }
  .meta-meteo--double.meta-meteo--double-large .meteo-img { width:70px; height:70px; }
  .meta-meteo--double .meteo-img { width:20px; height:20px; } /* legacy small double */
  .meta-meteo .meteo-name { font-size:12px; }
}

/* force images not to overflow */
.meta-meteo img { max-width:100%; height:auto; display:block; }

/* card inline helpers (existing) */
.card-line-inline { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; }
.card-inline-value { color:#fff; font-weight:700; font-size:14px; margin-left:6px; margin-right:6px; }
.inline-sep { color:rgba(255,255,255,0.6); margin:0 6px; font-weight:700; }
.card-title { text-align:center; color:#fff; font-weight:700; }