/* --- Réinitialisation --- */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: Rajdhani, sans-serif;

}



/* Style général */

body {

  margin: 0;

  padding: 0;

  font-size: 18px;

  font-family: Rajdhani, sans-serif;

  background-color: #f5f5f5;

  line-height: 1.6;

  width: 100%;

  box-sizing: border-box;

}

html {

  width: 100%;

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



/* Ajoute une classe .content pour le contenu principal */

.content {

  flex-grow: 1; /* Permet au contenu principal de remplir l'espace restant */

}



/* HEADER */

/* En-tête */

header {

  background: linear-gradient(

    135deg,

    #000000,

    #000000,

    #ff0000

  ); /* Dégradé de noir à bleu nuit et rouge */

  padding: 20px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  position: relative;

}



/* Logo */

header .logo img {

  max-height: 70px;

  margin-top: -15PX;

  margin-bottom: -15px ;

  cursor: pointer; /* Le curseur devient une main quand on passe dessus */

}



/* Menu de navigation */

nav {

  margin-left: auto; /* Pousse le menu à droite */

}



nav ul {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  font-size: 18px;

  font-weight: bold;

}



nav ul li {

  margin: 0 15px;

  position: relative;

}



nav ul li a {

  text-decoration: none;

  color: #ffffff;

  padding-bottom: 5px; /* Espacement pour le trait */

}



nav ul li a:hover {

  color: #ffffff;

}



/* Ajout du trait rouge sous les liens au survol */

nav ul li a.surlignage::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 2px;

  background-color: rgb(255, 0, 0);

  transform: scaleX(0);

  transition: transform 0.3s ease-in-out;

}



nav ul li a.surlignage:hover::after {

  transform: scaleX(1);

}



.btn-diagnostic {

  padding: 15px 40px;

  background: linear-gradient(135deg, #ff4d4d, #ff944d);

  color: #fff;

  text-decoration: none;

  border-radius: 50px;

  font-weight: 600;

  font-size: 1.2rem;

  box-shadow: 0 8px 20px rgba(255, 77, 77, 0.4);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  position: relative;

  overflow: hidden;

  cursor: pointer;

}



.btn-diagnostic::before {

  content: "";

  position: absolute;

  top: 0;

  left: -50%;

  width: 50%;

  height: 100%;

  background: rgba(255, 255, 255, 0.6);

  opacity: 0;

  pointer-events: none;

  transform: skewX(-25deg);

  transition: opacity 0.3s ease;

  z-index: 2;

}



.btn-diagnostic:hover {

  animation: bounce 0.3s ease forwards;

}



.btn-diagnostic:hover::before {

  opacity: 1;

  left: 150%;

  transition: left 0.6s ease, opacity 0.6s ease;

  animation: flashMove 0.6s forwards;

}



@keyframes bounce {

  0% { transform: scale(1); }

  50% { transform: scale(1.1); }

  100% { transform: scale(1); }

}



@keyframes flashMove {

  0% {

    left: -50%;

    opacity: 1;

  }

  100% {

    left: 150%;

    opacity: 0;

  }

}



/* --- Hamburger Menu --- */

.hamburger {

  display: none;

}



/* --- Responsive pour mobile --- */

@media (max-width: 768px) {

  /* Section Hero - Slider */

  .hero {

    height: 40vh; /* Plus petit pour les mobiles */

  }



  /* Affichage du hamburger */

  .hamburger {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 30px;

    height: 25px;

    position: absolute;

    top: 20px;

    right: 20px;

    cursor: pointer;

    z-index: 1001;

  }



  .hamburger span {

    height: 4px;

    width: 100%;

    background-color: white;

    border-radius: 2px;

  }



  /* Menu caché par défaut */

  nav ul {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    height: 100vh;

    width: 100vw;

    background-color: rgba(0, 0, 0, 0.95);

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 0;

    margin: 0;

    z-index: 999;

  }



  /* Menu affiché quand .show est actif */

  nav ul.show {

    display: flex;

  }



  nav ul li {

    margin: 20px 0;

  }



  nav ul li a {

    color: white;

    font-size: 24px;

    font-weight: bold;

    text-decoration: none;

  }



  .section {

    padding: 10px;

  }

}




/* === FOOTER DJRC RACING — COMPACT CARBONE === */
footer {
  position: relative;
  text-align: center;
  color: #fff;
  padding: 25px 20px 15px; /* moins haut */
  font-family: "Poppins", sans-serif;
  border-top: 3px solid #ff0000;
  box-shadow: 0 -3px 12px rgba(255,0,0,0.25);
  background-color: #111;
  background-image:
    repeating-linear-gradient(
      45deg,
      #1a1a1a 0px,
      #1a1a1a 4px,
      #111 4px,
      #111 8px
    ),
    repeating-linear-gradient(
      -45deg,
      #1a1a1a 0px,
      #1a1a1a 4px,
      #111 4px,
      #111 8px
    );
  background-size: 20px 20px; /* fibres carbone */
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* Ligne rouge racing */
.footer-divider {
  width: 90px;
  height: 3px;
  background: linear-gradient(90deg, #ff0000, #ff3b3b, #ff0000);
  margin: 6px auto 15px;
  border-radius: 4px;
  animation: pulseLine 2.5s infinite linear;
}

@keyframes pulseLine {
  0%, 100% { opacity: 0.5; transform: scaleX(0.8); }
  50% { opacity: 1; transform: scaleX(1.1); }
}

/* Logo DJRC RACING */
.footer-logo {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.footer-logo span {
  color: #ff0000;
  text-shadow: 0 0 8px rgba(255,0,0,0.6);
}

/* Icônes sociales racing */
.socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 0 auto 10px;
}

.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 35px;
  color: #fff;
  font-size: 22px;
  background: rgba(0,0,0,0.5);
  border: 2px solid #ff0000;
  border-radius: 6px;
  transition: all 0.3s ease;
  box-shadow: 0 0 6px rgba(255,0,0,0.25);
}

.socials a:hover {
  background: #ff0000;
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(255,0,0,0.5);
}

.footer-text {
  color: #aaa;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0;
}

.footer-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Responsive */
@media (max-width:768px){
  footer { padding: 20px 15px 12px; }
  .footer-logo { font-size: 22px; }
  .socials { gap: 14px; }
  .socials a { width: 48px; height: 30px; font-size: 18px; }
  .footer-divider { width: 70px; }
}



/* Menu des pages du site */
.footer-pages {
  list-style: none;
  padding: 0;
  margin: 10px 0 15px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.footer-pages li {
  display: inline-block;
}

.footer-pages a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-pages a:hover {
  color: #ff0000;
  text-decoration: underline;
}




.main {

  flex: 1 0 auto;

}



/* Global Styles */

.section {

  max-width: 1200px;

  margin: 0 auto;

  padding: 20px;

}



h1 {

  text-align: center;

  margin-bottom: 30px;

}



.noir {

  color: #333;

}



.rouge {

  color: #ff4444;

}



.analysez {

  text-align: center;

  margin-bottom: 40px;

  color: #666;

}