/* /css/liste_circuits.css */
:root {
  --f1-black: #000;
/* ── 1) Rapprochement du container sous la navbar ── */
.liste-circuits-page {
  margin-top: 0.75rem;    /* tout près de la fixed-top navbar */
  padding-bottom: 2rem;
}

/* ── 2) Titre de page ── */
.liste-circuits-page h1 {
  color: var(--f1-red);   /* rouge F1 */
  font-weight: 700;       /* gras */
  margin-bottom: 0.5rem;
}

/* ── 3) Barre de recherche ── */
.autocomplete-wrapper {
  text-align: center;
  margin-bottom: 1.5rem;
}
.autocomplete-wrapper .input-group {
  max-width: 400px;
  margin: 0 auto;
}
.autocomplete-wrapper .form-control {
  border-radius: .5rem 0 0 .5rem;
}
.autocomplete-wrapper .clear-btn {
  border-radius: 0 .5rem .5rem 0;
  border-left: none;
  background: transparent;
  color: var(--f1-red);
  font-size: 1.25rem;
}

/* ── 4) Placeholder ── */
.circuit-placeholder {
  text-align: center;
  margin-top: 3rem;
}
.circuit-placeholder img {
  width: 80vw;
  max-width: 500px;
  /*opacity: 0.5;*/
}
.circuit-placeholder p {
  margin-top: 1rem;
  font-size: 1.2rem;
  color: var(--f1-grey);
}

/* 1) Texte du compteur aligné et centré */
.input-group-text.circuits-count {
  background: transparent;
  border: none;
  color: var(--f1-grey);
  font-weight: 500;
  font-size: 0.9rem;
  margin-left: 0.5rem;
}

/* 2) Forcer le h2 (nom du circuit) en noir F1 gras */
.circuit-main-image h2 {
  color: var(--f1-black) !important;
  font-weight: 700;
}

/* ── 5) Disposition principale ── */
.circuit-content {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;  /* aligne le row en haut */
}

/* ── 6) Stats-block (gauche) ── */
/* rien à changer pour .f1-card, juste la valeur */
.stats-block .f1-card-body .stats-value {
  color: var(--f1-white);  /* blanc F1 */
  font-weight: 700;        /* gras */
  font-size: 1.5rem;
}

/* ── 7) Circuit name & image (centre) ── */
.circuit-main-image h2 {
  color: var(--f1-black) !important;  /* noir F1 */
  font-weight: 700;
  margin: 0 0 .5rem;
}
.clickable-img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform .2s;
}
.clickable-img:hover {
  transform: scale(1.02);
}

/* ── 8) Top3-block (droite) ── */
/* on laisse le .f1-card de base et on ajuste juste l’ol */
.top3-block .f1-card-body ol {
  padding-left: 1.25rem;
  margin: 0;
}

/* ── 9) Modal image (pan/zoom) ── */
#circuitImageModal .modal-dialog {
  max-width: none;
  width: auto;
  margin: 1rem;
}
#circuitImageModal .modal-content {
  background: transparent;
  border: none;
  overflow: hidden;
}
#circuitImageModal .modal-body {
  padding: 0;
  overflow: hidden;
}
#circuitImageModal img {
  display: block;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: grab;
}
#circuitImageModal img:active {
  cursor: grabbing;
}

/* ── 10) Commentaires (au centre sous l’image) ── */
.comments-block {
  /* on conserve le .f1-card */
}
.comments-block .f1-card-body form .form-control {
  resize: vertical;
}
.comments-block .f1-card-body #commentsList {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}
.comments-block .f1-card-body #commentsList li {
  padding: .5rem 0;
  border-bottom: 1px solid #eee;
}
.comments-block .f1-card-body #commentsList li:last-child {
  border-bottom: none;
}
.comments-block .f1-card-body strong {
  color: var(--f1-red);
}
.comments-block .f1-card-body em {
  font-size: .875rem;
  color: #888;
  margin-left: .5rem;
}
#circuitName {
  color: var(--f1-black) !important;
}
/* Bloc Top 10 circuits */
.top-circuits-block {
  margin: 2rem auto 0;
}
.top-circuits-block .f1-card-body {
  padding: 0; /* On laisse la table coller */
}
.top-circuits-block .table {
  margin-bottom: 0;
}
.top-circuits-block th,
.top-circuits-block td {
  text-align: left;
  padding: .75rem 1rem;
}
.top-circuits-block thead th {
  background: var(--f1-red);
  color: var(--f1-white);
  font-weight: 600;
  border-bottom: none;
}
.top-circuits-block tbody tr:nth-child(odd) {
  background: #f9f9f9;
}
/* ── Top 10 : uniformiser le fond et mettre le texte en blanc gras ── */
.top-circuits-block .f1-card-body {
  /* on force le même fond que la carte */
  background-color: var(--f1-bg);
}

.top-circuits-block .table tbody tr,
.top-circuits-block .table tbody tr:nth-child(odd),
.top-circuits-block .table tbody tr:nth-child(even) {
  /* lignes transparentes pour laisser voir le fond de f1-card-body */
  background: transparent !important;
}

.top-circuits-block .table tbody td,
.top-circuits-block .table tbody th {
  /* texte blanc et gras */
  color: var(--f1-white) !important;
  font-weight: 700;
}
/* ── Top 10 : override des styles table pour fond et texte ── */
.top-circuits-block .table {
  background-color: transparent !important;  /* laisse voir le fond de f1-card-body */
  border: none;
}

.top-circuits-block .table thead th {
  background-color: var(--f1-red) !important;
  color: var(--f1-white) !important;
  font-weight: 700;
  border-bottom: none;
}

.top-circuits-block .table th,
.top-circuits-block .table td {
  background-color: transparent !important;  /* transparent sur chaque cellule */
  color: var(--f1-white) !important;         /* texte blanc F1 */
  font-weight: 700;
}

.top-circuits-block .table tbody tr:nth-child(odd),
.top-circuits-block .table tbody tr:nth-child(even) {
  background-color: transparent !important;  /* pas de blanc sur les rangées */
}
/* Prompt à gauche de la recherche */
.autocomplete-wrapper .prompt-text {
  background: transparent;      /* pas de fond distinct */
  border: none;                 /* pas de bordure */
  color: var(--f1-black);       /* texte noir F1 */
  font-weight: 500;
  white-space: nowrap;          /* pas de retour à la ligne */
  margin-right: 0.5rem;         /* espace vers l’input */
  padding: 0;                   /* on reprend juste le texte */
}

/* Ajustement vertical pour que prompt, input et bouton soient alignés */
.autocomplete-wrapper .input-group .form-control,
.autocomplete-wrapper .input-group-text,
.autocomplete-wrapper .input-group .btn {
  height: auto;                 /* laisse le flex gérer */
  line-height: 1.5;
}
/* ■ 1) Autoriser l’input-group à s’élargir */
.autocomplete-wrapper .input-group {
  max-width: none;      /* on supprime la limite à 400px */
  width: 100%;          /* occupe tout l’espace parent */
  display: flex;        /* flex pour gérer tailles enfants */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto;
}

/* ■ 2) Le prompt garde sa taille naturelle */
.autocomplete-wrapper .prompt-text {
  flex: 0 0 auto;       /* taille fixe selon son contenu */
  white-space: nowrap;
}

/* ■ 3) L’input s’étend pour remplir l’espace dispo */
.autocomplete-wrapper .form-control {
  flex: 1 1 auto;       /* prend tout le reste */
  min-width: 150px;      /* ne devient pas trop petit */
}

/* ■ 4) On peut toujours limiter la largeur totale globale */
/*    si tu veux éviter que ça devienne trop large : */
.autocomplete-wrapper {
  max-width: 800px;      /* par exemple */
  margin: 0 auto 1.5rem;
}
/* Page Records d’Essais */
.records-essais-page .f1-card-body {
  background-color: var(--f1-bg) !important;
}

.records-essais-page .table tbody tr {
  background-color: transparent !important;
}

.records-essais-page .table th,
.records-essais-page .table td {
  color: var(--f1-white) !important;
}

/* Coloration des composants d’un Essai */
.record-coups,
.record-pseudo {
  color: var(--f1-red) !important;
  font-weight: 700;
}

.record-time {
  color: var(--f1-white);
}
/* === Fond sombre et texte blanc pour le tableau === */
.records-essais-page .f1-card-body {
  background-color: var(--f1-bg) !important;
}

.records-essais-page .table {
  background: transparent !important;
}

.records-essais-page .table thead th {
  background-color: var(--f1-red) !important;
  color: var(--f1-white) !important;
  font-weight: 700;
}

.records-essais-page .table tbody tr {
  background: transparent !important;
}

.records-essais-page .table th,
.records-essais-page .table td {
  color: var(--f1-white) !important;
}

/* === Colorisation des parties de l’essai === */
.record-coups,
.record-pseudo {
  color: var(--f1-red) !important;
  font-weight: 700;
}

.record-time {
  color: var(--f1-white) !important;
}
/* === FORCE le fond sombre pour le tableau Records d’Essais === */
.records-essais-page .f1-card-body {
  background-color: var(--f1-bg) !important;
}

.records-essais-page .table {
  background-color: transparent !important;
  border: none !important;
}

.records-essais-page .table thead th {
  background-color: var(--f1-red) !important;
  color: var(--f1-white) !important;
}

.records-essais-page .table tbody tr {
  background-color: transparent !important;
}

.records-essais-page .table tbody td,
.records-essais-page .table tbody th {
  background-color: transparent !important;
  color: var(--f1-white) !important;
}
/* Bloc Top 5 Pilotes – idem Top 3 mais pour 5 items */
.top5-block .f1-card-body {
  background-color: var(--f1-bg) !important;
}

.top5-block .f1-card-header {
  background: var(--f1-red);
  color: var(--f1-white);
  font-weight: 700;
}

.top5-block .f1-card-body ol {
  margin: 0;
  padding-left: 1.25rem;
}

.top5-block .f1-card-body ol li {
  color: var(--f1-white);
  margin-bottom: 0.5rem;
}

.top5-block .f1-card-body ol li .record-pseudo {
  color: var(--f1-red) !important;
  font-weight: 700;
}
/* Podium Top 5 Pilotes */
.podium-block .podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
}

/* Styles communs à chaque colonne */
.podium-block .place {
  width: 60px;
  background: var(--f1-red);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem 0;
  color: var(--f1-white);
}

/* Hauteurs différentes pour simuler un podium */
.podium-block .place-1 { height: 160px; }
.podium-block .place-2 { height: 140px; }
.podium-block .place-3 { height: 120px; }
.podium-block .place-4 { height: 100px; }
.podium-block .place-5 { height: 90px; }

/* Numéro de place */
.podium-block .position {
  font-size: 1.25rem;
  font-weight: 700;
}

/* Nom du pilote */
.podium-block .name {
  margin-top: auto;  /* pousse le nom en bas de la colonne */
  font-weight: 700;
}

/* Nombre de records */
.podium-block .records {
  font-size: .85rem;
  margin-top: .25rem;
}
/* Weather toggle — taille icônes, bouton All plus grand, texte noir style F1 */
.weather-container { margin: 0.6rem 0 0.9rem; }

.weather-group { display:inline-flex; gap:8px; align-items:center; }

/* Général boutons météo */
.weather-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;              /* boutons plus permissifs */
  font-size:0.95rem;             /* texte légèrement plus grand */
  line-height:1;
  border-radius:8px;
  min-width:48px;
  color:#000 !important;         /* texte en noir */
  background: #fff !important;   /* fond blanc pour contraste F1 */
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  font-weight:700;
  font-family: "Oswald", "F1-Regular", "Helvetica Neue", Arial, sans-serif; /* si Oswald ou police condensée dispo */
}

/* Bouton All plus proéminent */
.weather-btn[data-meteo="all"] {
  padding:10px 16px;
  font-size:1.05rem;
  min-width:64px;
  border-width:1.5px;
}

/* Icônes agrandies */
.weather-icon {
  width: 26px;            /* taille de base pour le flux/Layout */
  height: 26px;
  transform: scale(1.5);    /* zoom visuel 3x */
  transform-origin: center center;
  display: inline-block;
}

/* Label à côté de l'icône */
.weather-label { display:inline-block; margin-left:4px; font-weight:700; }

/* État actif / inactif */
.weather-btn.active,
.weather-btn[aria-pressed="true"] {
  opacity:1;
  filter:none;
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,0.12);
}
.weather-btn:not(.active):not([aria-pressed="true"]) {
  opacity:0.6;
  filter:grayscale(0.3);
}

/* Responsive : adaptif sur petits écrans */
@media (max-width:480px) {
  .weather-btn { padding:7px 10px; font-size:0.88rem; min-width:46px; }
  .weather-btn[data-meteo="all"] { min-width:56px; font-size:0.95rem; }
  .weather-icon { width:22px; height:22px; }
}

/* État sélectionné : fond rouge F1, texte blanc */
.weather-btn.active,
.weather-btn[aria-pressed="true"] {
  background: var(--f1-red) !important;
  color: var(--f1-white) !important;
  border-color: darken(var(--f1-red), 8%) !important; /* fallback si preprocessor absent, voir note */
  box-shadow: 0 6px 14px rgba(225,16,0,0.18);
  transform: translateY(-1px);
}

/* Si ton environnement CSS ne connaît pas darken(), utiliser une valeur hex directe */
.weather-btn.active,
.weather-btn[aria-pressed="true"] {
  border-color: #b00300 !important;
}

/* Assurer que les icônes restent visibles sur fond rouge */
.weather-btn.active .weather-icon,
.weather-btn[aria-pressed="true"] .weather-icon {
  filter: none;
  opacity: 1;
}

/* Transition doux */
.weather-btn {
  transition: background .15s ease, color .15s ease, transform .08s ease, box-shadow .15s ease;
}
/* Modal: slightly smaller container to avoid vertical page scrollbar */
#circuitImageModal .modal-dialog {
  max-width: calc(100vw - 3rem);
  width: calc(100vw - 3rem);
  margin: 0 auto;
}

/* Modal content centered */
#circuitImageModal .modal-content {
  position: relative;
  background: transparent;
  border: none;
  padding: 0.25rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal-body reduced height (no page scrollbar) and overflow hidden */
#circuitImageModal .modal-body {
  width: 100%;
  height: calc(100vh - 6rem); /* smaller than before to remove page scroll */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0;
}

/* Image fills modal-body; Panzoom handles pan + zoom in both axes */
#circuitImageModal img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  cursor: grab;
  touch-action: none;
}

/* Close button */
#circuitImageModal .modal-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: none;
}

/* Small screens adjustment */
@media (max-width: 480px) {
  #circuitImageModal .modal-body { height: calc(100vh - 4rem); }
  #circuitImageModal .modal-close-btn { top: 6px; right: 6px; width: 36px; height: 36px; font-size: 1.1rem; }
}