/* =====================
   NAV & BODY
===================== */
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;
}

/* =====================
   CARDS
===================== */
.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;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 8px;
  border-bottom: 1px solid #ddd;
  color: white;
}

.row:last-child {
  border-bottom: none;
}

.left { font-weight: 500; }
.right { font-weight: 600; }

/* =====================
   SECTION CAR - MCLAREN
===================== */
#car {
    overflow: hidden;
    width: 100%;
    height: 600px;
    background-image: url("fondchupa.png");
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
    margin-bottom: 80px;
}

#car p {
    position: absolute;
    top: 70%;                 
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 30;
    white-space: nowrap;
}

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

#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("fondchupa.png");
	border-radius:8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
	z-index: 3;
}
.pilote img{
	position:absolute;
	left:-120px;
	top:-70px;
}

.nom, .nom1{
	color:white;
	position:absolute;
	font-size:80px;
	font-family: "Ballet", cursive;
	font-weight: 400;
	font-style: normal;
	top:-90px;
}

.nom { left:20px; }
.nom1 { left:15px; }

.nom2{
	color:white;
	left:40px;
	position:absolute;
	font-size:35px;
	font-weight:bold;
	top:60px;
}

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 {
    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;
}

/* bandes rouges */
.red-bands {
  position: relative;
  width: 100%;
  height: 33px; 
}
.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%);
}
.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;
    font-weight: 400;
    font-style: normal;
}

.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: white;
}

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

/* Tablette */
@media (max-width: 1024px) {
  .cards { flex-direction: column; align-items: center; }
  .card1, .card2 { width: 90%; }
  #grille-pilote { grid-template-columns: 1fr; justify-items: center; }
  #car { height: 450px; }
  #car img { width: 520px; }
}

/* Smartphone */
@media (max-width: 600px) {
  #car { height: 350px; }
  #car img { width: 360px; }
  #car p { font-size: 28px; }
  #car::before, #car::after { width: 180px; height: 10px; }
  .nom, .nom1 { font-size: 40px; top: -40px; }
  .nom2 { font-size: 25px; }
  #TEAM\ PROFIL caption { font-size: 30px; }
  #TEAM\ PROFIL .grand td { font-size: 18px; }
}