nav li  { 
      width:20%;
      text-transform: uppercase;
      text-align:center;
      list-style-type: none;
	  float:left ; 
}
nav a:hover {
	background-color: #D11B16;
}
body{
	background-color:rgb(61,66,81);
}
header {
    background-image:url("fond.jpg");
    padding:50px;                 
}
nav a {
      text-decoration:none;
	  color:white;
}

/*emplacement et espace entre les deux tableau*/
.cards {
  display: flex;
  flex-direction: row;     
  gap: 40px;
  padding: 20px;
  justify-content: space-between;
  align-items: stretch;
}

.card1,
.card2 {
  flex: 0 0 40%;           
  border-radius: 15px;
  padding: 10px;
}

.card1 {
  background: rgb(61,66,81);
}

.card2 {
  background: black;
}

/*emplacement du texte a l'interieur du tableau*/
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px;
  border-bottom: 1px solid #ddd;
  color: white;
}
/*suprime la derniere ligne inutile du tableau*/
.row:last-child {
  border-bottom: none;
}
/*style du texte à gauche*/
.left {
  font-weight: 500;
}
/*style du texte à droite*/
.right {
  font-weight: 600;
}

/* =====================
   SECTION CAR
===================== */

#car {
    overflow: hidden;
    width: 100%;
    height: 600px;
    background-image: url("fondredbull.webp");
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1; /* empêche le chevauchement */
    margin-bottom: 80px;
}

#car p {
    position: absolute;
    top: 70%;                 /* 🔴 MÊME LIGNE QUE LES BANDES */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 30;              /* AU-DESSUS DE TOUT */
    white-space: nowrap;
}




/*creation,position et style des bandes blanches*/
#car::before,
#car::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 20px;
    background: white;
    transform: skewX(-25deg);
    opacity: 0.9;
    top: 70%;
}

/*bare à gauche et à droite*/
#car::before { left: 0; }
#car::after  { right: 0; }


#car img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    z-index: 10;
}

/* =====================
   PILOTES
===================== */

.pilote{
	position:relative;
	overflow:hidden;
	width:600px;
	height:300px;
	background-image: url("fondredbull.webp");
	border-radius:8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
	z-index: 3;
}
.pilote img{
	position:absolute;
	left:120px;
}

.nom{
	color:white;
	left:50px;
	position:absolute;
	font-size:80px;
    font-family: "Ballet", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
	top:-90px;
}
.nom1{
	color:white;
	left:25px;
	position:absolute;
	font-size:80px;
	font-family: "Ballet", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
	top:-90px;
}
.nom2{
	color:white;
	left:20px;
	position:absolute;
	font-size:35px;
	font-weight:bold;
	top:60px;
}

.pilote img[src="numeromax.png"]{
	width:50px;
	height: auto;
	top:250px;
	left:5px;
}
h3{
	color:white;
	font-weight:bold;
	position: absolute;
	top:120px;
	left:10px;
}
.stat {
	color:white;
	position: absolute;
	top:140px;
	left:10px;
}

/* =====================
   GRILLE PILOTE
===================== */

#grille-pilote {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 600px));    
    gap: 40px;                               
    justify-content: center;               
    padding: 40px;
    position: relative;
    z-index: 2;
}	

#TEAM\ PROFIL {/*il y a un slash car espace dans mon id sur le html*/
    width: 90%;              
    margin: 60px auto;       
    border-collapse: collapse;
    text-align: center;
}

#TEAM\ PROFIL caption {
    color: white;
    font-size: 45px;
    font-weight: bold;
    font-family: "Shrikhand", serif;
    font-weight: 400;
    font-style: normal;
}

#TEAM\ PROFIL td {
    border: none;           
    padding: 15px;
}

#TEAM\ PROFIL .petit td {
    color: #b5b5b5;          
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#TEAM\ PROFIL .grand td {
    color: white;
    font-size: 30px;
    font-weight: bold;
}

/*conteneur pour les bande*/
.red-bands {
  position: relative;
  width: 100%;
  height: 33px; 
}
/*permet de créer les bandes rouge*/
.red-bands::before,
.red-bands::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 15px;
  background: linear-gradient(
    to right,
    #b30000,
    #ff1a1a,
    #b30000
  );
  clip-path: polygon(
    0 0,
    99% 0,
    100% 50%,
    99% 100%,
    0 100%
  );
}
/* permet de mettre une bande en haut et une en bas*/
.red-bands::before { top: 0; }
.red-bands::after { top: 18px; }

.titre{
	font-size: 30px;
    font-weight: bold;
	color:white;
}
.statistic{
	color: white;
    font-size: 45px;
    font-weight: bold;
    font-family: "Shrikhand", serif;
}

.nationalite{
	width:20px;
	height:auto;
	top:270px;
	left:-20px;
	position: absolute;
}
.numero{
	font-family: "Shrikhand", serif;
	font-size:35px;
	top:215px;
	left:5px;
	position:absolute;
	color: #ee161f;
}

/* --------------------
   RESPONSIVE DESIGN
-------------------- */

/* Tablette */
@media (max-width: 1024px) {

  /* tableaux passent en colonne */
  .cards {
    flex-direction: column;
    align-items: center;
  }

  .card1,
  .card2 {
    width: 90%;
  }

  /* pilotes en colonne */
  #grille-pilote {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  /* on réduit JUSTE la hauteur du car */
  #car {
    height: 450px;
  }

  /* on réduit la voiture SANS la déplacer */
  #car img {
    width: 520px;
  }
}


/* Smartphone */
@media (max-width: 600px) {

  /* car plus compact */
  #car {
    height: 350px;
  }

  #car img {
    width: 360px;
  }

  #car p {
    font-size: 28px;
  }

  /* bandes blanches plus petites */
  #car::before,
  #car::after {
    width: 180px;
    height: 10px;
  }

  /* texte pilotes */
  .nom,
  .nom1 {
    font-size: 40px;
    top: -40px;
  }

  .nom2 {
    font-size: 25px;
  }

  /* TEAM PROFIL reste stylé mais lisible */
  #TEAM\ PROFIL caption {
    font-size: 30px;
  }

  #TEAM\ PROFIL .grand td {
    font-size: 18px;
  }
}