/*BODY*/

body { /*Les paramètres de base du site avec la couleur de fond de texte et la police*/
  background-color: #c1baba;
  color: #000000;
  margin: 0;
  font-family: Arial, sans-serif;

}

body.dark-mode { /*Les paramètres de base du site en mode sombre*/
  background-color: #2b2929;
  color: #ffffff;
  margin: 0;
}

/* NAVIGATION */
nav { /*La barre de navigation en haut du site et de chaque page*/
  background-color: #bd1010;
  padding: 15px;
}

.logo-nav { /*Le logo F1 à gauche de la barre*/
  height: 40px;
  width: auto;
  display: block;
}

nav ul { /*La liste des liens en flexbox*/
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}

nav ul li a { /*Style des liens de la barre de navigation*/
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;

}

nav ul li button { /*Style du bouton de mode sombre dans la barre de navigation*/
  color: #ffffff;
  text-transform: uppercase;
  background: transparent;
  border: 2px solid #ffffff;
  padding: 5px 10px;
  font-weight: bold;
  transition: color 0.3s, border-color 0.3s;
}

nav ul li a:hover { /*Quand on survole les autres pages*/
  color: #ff4747;
}

nav ul li button:hover { /*Quand on survole le bouton de mode sombre*/
  color: #2b2929;
  border-color: #2b2929;

}

/*INDEX.PHP*/
h1,
h2 { /*On centre les titres*/
  text-align: center;
}

form { /*Formulaire de recherche*/
  max-width: 400px;
  margin: auto;
}

input,
select { /*Les champs de saisie*/
  width: 100%;
  margin: 10px 0;
  padding: 6px;
}

input[type="submit"] { /*Le bouton de recherche*/
  background: #bd1010;
  color: white;
}

input[type="submit"]:hover { /*Quand on survole le bouton de recherche*/
  background: #ff4747;
}


/*PILOTES.PHP*/

.pilotes-grid { /*La grille des pilotes 3*3 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 50px 30px;
  padding: 15px;
  max-width: 1000px;
  margin: 0 auto;
}


.pilote-card { /*La carte de chaque pilote stylisée avec une bordure, un fond, une ombre et un effet de survol*/
  border-radius: 12px;
  padding: 18px 12px 12px 12px;
  display: grid;
  grid-template-rows: auto auto auto;
  background-color: #ff4747;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;

}

.pilote-card:hover { /*Quand on survole la carte du pilote elle agrandit et change d'ombre*/
  transform: scale(1.05);
  box-shadow: 0 12px 34px #bd1010;
}

.pilote-card img { /*L'image du drapeau en cercle*/
  width: 100px;
  border-radius: 50%;
}

.pilote-card a,
.boutonclassement { /*Les infos du pilote (nom, #) ainsi que le bouton de classement de grandsprix.php*/
  font-family: 'Impact', sans-serif;
  text-transform: uppercase;
  color: #2b2929;
  text-decoration: none;
  margin-top: 10px;
  transition: color 0.3s, transform 0.3s;
}

.pilote-card a:hover { /*Le hover du lien ficheecurie*/
  color: #c1baba;
}



/*ECURIES.PHP*/
/*On refait des classes, car la grid de pilotes est complètement différente de celle là. C'est plus lisible et simple à coder*/

.ecuries-grid { /*La grille des écuries 2*2*/
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 150px;
  padding: 15px;
  max-width: 800px;
  margin: 0 auto;
}


.ecurie-card { /*La carte de chaque écurie stylisée avec une bordure, un fond, une ombre et un effet de survol*/
  border-radius: 40px;
  padding: 12px;
  background-color: #bd1010;
  text-align: center;
  transition: box-shadow 0.3s, transform 0.3s;
  border: 4px solid #ff4747;
}

.ecurie-card:hover { /*Quand on survole la carte de l'écurie elle agrandit, change d'ombre et de rotation*/
  box-shadow: 0 6px 21px #ff4747;
  transform: rotate(3deg) scale(1.10);

}

.ecurie-card img { /*L'image logo écurie*/
  width: 300px;
}

.ecurie-card a { /*Le nom de l'écurie*/
  font-family: 'Merriweather', sans-serif;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  color: #c1baba;
  text-decoration: none;
  transition: color 0.3s;
}

.ecurie-card a:hover { /*Le hover du lien des écuries*/
  color: #2b2929;
}


body.dark-mode .ecurie-card { /*En mode sombre, on change la couleur de fond et de bordure des écuries*/
  background-color: #ff4747;
  border: 4px solid #bd1010;

}


/*GRANDSPRIX.PHP*/

.tableau-gp { /*Le tableau des grands prix*/
  width: 90%;
  max-width: 1000px;
  margin: 20px auto;
  border-collapse: collapse;
}

.tableau-gp th,
.tableau-gp td { /*Les cellules du tableau*/
  padding: 12px;
  border: 1px solid #bd1010;
  text-align: center;
}

.tableau-gp th { /*Les titres du tableau*/
  background-color: #bd1010;
  color: #ffffff;
}


.tableau-gp tr:hover { /*Quand on survole une ligne du tableau*/
  background-color: #ff4747;
  color: #ffffff;
}

body.dark-mode .tableau-gp { /*En mode sombre, on change la couleur de fond du tableau*/
  color: #ffffff;
}

.tableau-gp a:hover { /*Le hover des liens du tableau*/
  color: #c1baba;
}

body.dark-mode .boutonclassement { /*Le bouton de classement dans la page grands prix en mode sombre*/
  color: #c1baba;
}

body.dark-mode .boutonclassement:hover { /*Le hover du bouton de classement dans la page grands prix en mode sombre*/
  color: #2b2929;
}

/*FICHEGP.PHP*/
/* Enlève le hover sur ce tableau */
.classement-gp tr:hover {
  background-color: transparent;
  color: inherit;
}

.classement-gp tr:nth-child(2) { /*Les 3 premières lignes du tableau de classement des grands prix sont avec les couleurs du podium*/
  background-color: gold;
  color: black;
  font-weight: bold;
}

.classement-gp tr:nth-child(3) {
  background-color: silver;
  color: black;
  font-weight: bold;
}

.classement-gp tr:nth-child(4) {
  background-color: sienna;
  color: black;
  font-weight: bold;
}


/*FICHE PILOTE.PHP*/

#photoPilote { /*L'image du pilote*/
  display: block;
  margin: 0 auto 20px auto;
  border-radius: 10px;
}

.pilote-infos p,
.infos-ecurie p { /*les infos sont centrés*/
  text-align: center;
}

.pilote-infos p,
.infos-ecurie strong { /*Les infos sont en majuscule*/
  text-transform: uppercase;
}

.pilote-infos a { /*Le lien vers la fiche écurie*/
  color: #bd1010;
  text-decoration: none;
  font-weight: bold;
}


/*FICHEECURIE.PHP*/

.logo-ecurie { /*Le logo de l'écurie centré*/
  max-width: 220px;
  display: block;
  margin: 12px auto;
  padding: 20px;
  background-color: #ff4747;
  border-radius: 20px;
}

.pilotes-ecurie { /*La section pilotes de l'écurie*/
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.pilote-link { /*Le lien vers la fiche pilote des deux de l'écurie*/
  width: 200px;
  text-decoration: none;
  color: #bd1010;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pilote-link img { /*L'image du pilote (arrondi) */
  width: 200px;
  border-radius: 50%;
  border: 3px solid #bd1010;
}

.pilote-link:hover { /*QUand on survole le lien vers la fiche pilote, le rond augmente de taille*/
  transform: scale(1.05);
}



.pilote-link p { /*Le nom du pilote dans le lien vers la fiche pilote*/
  font-family: 'Merriweather', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
}



/*RESPONSIVE*/
/* On adapte la grille des pilotes et des écuries pour les écrans plus petits */
@media (max-width: 768px) {
  .pilotes-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 10px;
  }


  .ecuries-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 10px;
  }
}