:root {
  --rouge: #d81b25;
}

/* =========================================
   GÉNÉRAL & RESET
   ========================================= */
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #080808;
  font-family: "Rajdhani", sans-serif;
  color: #fff;
  overflow: hidden; /* Empêche le scroll natif du navigateur */
  height: 100vh;
  /* Fix pour Safari Mobile */
  height: 100dvh; 
}

* {
  box-sizing: border-box;
}

/* Cache la scrollbar mais permet le fonctionnement */
body::-webkit-scrollbar {
  display: none;
}

/* =========================================
   NAVBAR & UI (Optimisé pour gagner de la place)
   ========================================= */
.navbar {
  position: fixed;
  width: 100%;
  z-index: 1000;
  padding: 40px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
}

/* Logo */
.container-logo {
  display: block;
  line-height: 0; /* Évite les marges fantômes */
}

.container-logo img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 0 20px #ffffff66);
  transition: all 0.3s;
}

.container-logo img:hover {
  transform: scale(1.05);
}

/* Menu Burger */
.menu-burger {
  display: none;
}

/* Menu Navigation (Desktop) */
.menu-navigation {
  background: transparent;
}

.menu-navigation ul {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-navigation a {
  font-family: "Orbitron", sans-serif;
  font-size: 0.95rem;
  color: #888;
  text-transform: uppercase;
  transition: all 0.3s;
  letter-spacing: 2px;
  position: relative;
  text-decoration: none;
}

.menu-navigation a:hover,
.menu-navigation a.active {
  color: #fff;
}

.menu-navigation a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--rouge);
  transition: all 0.3s;
}

.menu-navigation a:hover::after,
.menu-navigation a.active::after {
  width: 100%;
}

/* Texte Scroll (En bas) */
.texte-scroll {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  color: var(--rouge);
  font-family: "Orbitron", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  animation: clignotement 2s infinite;
  pointer-events: none; /* Laisse passer le clic */
}

@keyframes clignotement {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* =========================================
   SCÈNE 3D & CARTES
   ========================================= */
#container-scene-3d {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}

/* Style de base des cartes (Desktop First) */
.carte-3d {
  width: 100vw;
  height: 87vh;
  max-width: 1900px;
  background: #0a0a0a;
  border: 1px solid var(--rouge);
  box-shadow: 0 0 50px #d81b2526, inset 0 0 20px #d81b250d;
  border-radius: 30px;
  padding: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  
  /* Permet d'éviter que le contenu sorte visuellement */
  overflow: hidden; 
}

/* Carte 0 : Accueil */
.carte-3d.accueil {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  overflow: visible; /* On laisse dépasser la lueur */
}

/* Sol Grille */
.grille {
  position: absolute;
  bottom: -40%;
  width: 200%;
  height: 1000px;
  background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.02) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.02) 76%, transparent 77%, transparent),
                    linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.02) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.02) 76%, transparent 77%, transparent);
  background-size: 100px 100px;
  transform: perspective(500px) rotateX(80deg);
  z-index: -1;
}

.contenu-interactif {
  display: flex;
  flex-direction: column;
}

.titre {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(4rem, 11vw, 9rem);
  line-height: 0.85;
  font-style: italic;
  text-transform: uppercase;
  text-shadow: 0 0 40px #ffffff26;
  letter-spacing: -2px;
  z-index: 2;
}

.container-barre-rouge {
  width: 100%;
  max-width: 1800px;
  height: 40px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  position: relative;
}

.ligne-blanche { width: 100%; height: 8px; background: #fff; }
.ligne-rouge { width: 35%; height: 8px; background: var(--rouge); box-shadow: 0 0 20px var(--rouge); z-index: 2; }
.rond-rouge { width: 24px; height: 24px; background: var(--rouge); border-radius: 50%; position: absolute; left: -12px; box-shadow: 0 0 15px var(--rouge); z-index: 3; }

.nom {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 6px;
  align-self: flex-start;
  margin-left: 1%;
  z-index: 2;
}

/* =========================================
   CONTENU SPÉCIFIQUE DES CARTES (DESKTOP)
   ========================================= */

/* Carte 1 : Présentation */
#carte-1 .container-presentation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10vw;
}

.container-photo img {
  width: clamp(250px, 25vw, 450px);
  border-radius: 50%;
  box-shadow: 0 0 80px #d81b2580;
  transition: all 0.3s ease;
}

.container-photo img:hover { transform: scale(1.02); box-shadow: 0 0 80px #d81b25b3; }

.presentation-texte {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.presentation-texte h1 {
  font-family: "Orbitron", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(3rem, 5vw, 5.5rem);
  line-height: 0.9;
  margin: 0 0 30px 0;
  text-shadow: 0 0 20px #ffffff4d;
}

.presentation-texte p {
  font-size: clamp(1.2rem, 1.3vw, 1.5rem);
  line-height: 1.6;
  margin-bottom: 50px;
}

.bouton-cv {
  font-family: "Orbitron", sans-serif;
  padding: 15px 45px;
  background-color: #fff;
  color: #000;
  font-size: 1rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.bouton-cv:hover { background-color: var(--rouge); color: #fff; box-shadow: 0 0 20px var(--rouge); }

/* Carte 2 : Skills */
#carte-2 h1 {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(2.1rem, 5vw, 5rem);
  position: absolute;
  top: 20px; left: 30px;
  margin: 0;
  font-style: italic;
  text-transform: uppercase;
  text-shadow: 0 0 15px #ffffff33;
}

.container-skills {
  display: flex; gap: 60px; width: 100%; margin-top: 30px; max-width: 1600px;
}

.dev, .crea {
  display: flex; flex-direction: column; align-items: center; width: 100%;
}

.dev h2, .crea h2 {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(1.3rem, 2vw, 2.5rem);
  color: var(--rouge);
  text-transform: uppercase;
  gap: 10px;
  margin-bottom: 50px;
}

.liste { width: 100%; max-width: 700px; }
.liste ul { padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.liste li {
  width: 100%; height: 130px; background: #ffffff1a; border-radius: 15px;
  list-style: none; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  gap: 20px; font-size: 1rem; text-transform: uppercase; transition: all 0.3s;
}
.liste li i { font-size: 2.5rem; transition: all 0.3s; }
.liste li:hover { background: #ffffff14; color: var(--rouge); }
.liste li:hover i { text-shadow: 0 0 15px var(--rouge); }

/* Carte 3 : Certifications */
#carte-3 h1 {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(2.1rem, 5vw, 5rem);
  position: absolute;
  top: 20px; left: 30px;
  margin: 0;
  font-style: italic;
  text-transform: uppercase;
  text-shadow: 0 0 15px #ffffff33;
}

.container-certifications {
  display: flex; flex-direction: column; gap: 60px; max-width: 1600px; margin-top: 90px;
}

.opquast, .three {
  background: #ffffff1a; border-radius: 30px; padding: 30px 40px; width: 75%; transition: all 0.3s;
}

.opquast { border-left: 4px solid var(--rouge); border-top-left-radius: 30px; border-bottom-left-radius: 30px; }
.opquast:hover { background: #ffffff0f; }

.three { align-self: flex-end; border-right: 4px solid var(--rouge); text-align: right; border-top-right-radius: 30px; border-bottom-right-radius: 30px; }
.three:hover { background: #ffffff0f; }

.titre-certif { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.titre-certif img { width: 50px; height: 50px; }
.three .titre-certif { flex-direction: row-reverse; }

.opquast h2, .three h2 {
  font-family: "Orbitron", sans-serif; font-size: clamp(1.4rem, 2vw, 2rem); color: var(--rouge); margin: 0; text-transform: uppercase; display: flex; flex-direction: column; line-height: 1;
}

.opquast h2 span, .three h2 span {
  font-family: "Rajdhani", sans-serif; font-size: 1.1rem; color: #fff; text-transform: none; font-style: italic; letter-spacing: 1px; margin-top: 5px;
}
.opquast p, .three p { font-family: "Rajdhani", sans-serif; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.6; margin: 0; }

/* Carte 4 : Projets */
#carte-4 { text-align: center; }
#carte-4 h1 {
  font-family: "Orbitron", sans-serif; font-size: clamp(2.1rem, 5vw, 5rem); position: absolute; top: 20px; left: 30px; margin: 0; font-style: italic; text-transform: uppercase; text-shadow: 0 0 15px #ffffff33;
}
.container-projets { display: flex; flex-direction: column; align-items: center; gap: 40px; max-width: 1400px; margin-top: 60px; }
.titre-projets {
  font-family: "Orbitron", sans-serif; font-style: italic; text-transform: uppercase; font-size: clamp(2rem, 4.5vw, 3.8rem); line-height: 1.4; letter-spacing: 2px;
}
.titre-projets .rouge { color: var(--rouge); }
.texte-projets {
  font-family: "Rajdhani", sans-serif; font-size: clamp(1.3rem, 1.2vw, 2rem); line-height: 1.6; max-width: 800px; margin: 0; padding-inline: 20px;
}
.bouton-projets {
  font-family: "Orbitron", sans-serif; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; padding: 15px 45px; border-radius: 50px; background-color: #fff; color: #000; transition: all 0.3s; margin-top: 10px;
}
.bouton-projets:hover { background-color: var(--rouge); color: #fff; box-shadow: 0 0 20px var(--rouge); }

/* Carte 5 : Témoignages */
#carte-5 h1 {
  font-family: "Orbitron", sans-serif; font-size: clamp(2.1rem, 5vw, 5rem); position: absolute; top: 20px; left: 30px; margin: 0; font-style: italic; text-transform: uppercase; text-shadow: 0 0 15px #ffffff33;
}
.container-temoignages { padding-top: 70px; }
.slide { display: none; flex-direction: column; text-align: center; }
.slide.active { display: flex; }
.temoignage { font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.4; max-width: 1100px; }
.auteur { display: flex; flex-direction: column; gap: 10px; }
.auteur-nom { font-family: "Orbitron", sans-serif; font-size: 2rem; color: var(--rouge); text-decoration: underline; text-transform: uppercase; transition: all 0.3s; }
.auteur-nom:hover { color: #fff; }
.poste { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.nav-btn {
  position: absolute; bottom: 40px; background: transparent; border: 1px solid #fff; color: #fff; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.3s;
}
.nav-btn.precedent { left: 40px; }
.nav-btn.suivant { right: 40px; }
.nav-btn:hover { background: var(--rouge); box-shadow: 0 0 10px var(--rouge); }


/* ==========================================================================
   RESPONSIVE (TABLETTES & MOBILE) - LE COEUR DE LA CORRECTION
   ========================================================================== */

/* 1. TABLETTE & MOBILE MENU */
@media (max-width: 1300px) {
  .menu-burger {
    display: block;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2000;
    padding-bottom: 10px;
  }
  .menu-burger i { font-size: 2rem; color: #fff; }
  .menu-burger .fa-times { display: none; }
  .menu-burger.active .fa-bars { display: none; }
  .menu-burger.active .fa-times { display: block; color: var(--rouge); }

  .menu-navigation {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #080808f2; backdrop-filter: blur(10px); z-index: 1500;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
    
    /* Centrage parfait */
    display: flex; justify-content: center; align-items: center;
  }

  .menu-navigation.active { opacity: 1; visibility: visible; }

  /* CORRECTION CENTRAGE SAFARI/CHROME */
  .menu-navigation ul {
    flex-direction: column;
    text-align: center;
    gap: 40px;
    width: 100%; /* Prend toute la largeur */
    margin: 0;
    padding: 0; /* Enlève padding par défaut */
    justify-content: center;
    align-items: center;
  }

  .menu-navigation a { font-size: 1.5rem; }
}

/* 2. MOBILE UNIQUEMENT (< 768px) - CORRECTION TAILLE CARTES & CONTENU */
@media (max-width: 768px) {
  
  /* UI COMPACTE POUR GAGNER DE LA PLACE */
  .navbar {
    padding: 15px 25px; /* Navbar plus fine */
    background: linear-gradient(to bottom, rgba(8,8,8,0.9), transparent); /* Fond pour lisibilité */
  }

  .container-logo img {
    height: 30px; /* Logo réduit */
  }

  .menu-burger i {
    font-size: 1.5rem; /* Burger réduit */
  }

  .texte-scroll {
    bottom: 15px;
    font-size: 0.6rem; /* Texte discret */
    letter-spacing: 2px;
  }

  /* CARTES MAXIMISÉES */
  .carte-3d {
    width: 95vw; /* Prend presque toute la largeur */
    height: 85vh; /* Prend presque toute la hauteur (laisse place navbar) */
    /* Fallback pour Safari */
    height: 85dvh; 
    
    max-width: none;
    padding: 20px; /* Padding réduit interne */
    
    /* Layout vertical pour le mobile */
    flex-direction: column;
    justify-content: flex-start; /* Aligne en haut */
    
    /* Sécurité : cache ce qui dépasse vraiment */
    overflow: hidden; 
  }

  /* --- CARTE 0 (ACCUEIL) --- */
  #carte-0 {
    justify-content: center; /* Reste centré pour l'accueil */
  }
  #carte-0 .titre {
    font-size: 13vw; /* S'adapte à la largeur */
    line-height: 1;
    margin-top: 0;
  }
  #carte-0 .container-barre-rouge {
    margin: 15px 0;
    height: 30px;
  }
  #carte-0 .nom {
    font-size: 1.5rem;
    letter-spacing: 2px;
  }

  /* --- CARTE 1 (PRÉSENTATION) --- */
  #carte-1 .container-presentation {
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    height: 100%;
  }

  .container-photo img {
    width: 130px; /* Photo beaucoup plus petite */
    box-shadow: 0 0 30px #d81b2580;
  }

  .presentation-texte {
    align-items: center;
    text-align: center;
  }

  .presentation-texte h1 {
    font-size: 2.5rem; /* Titre réduit */
    margin-bottom: 15px;
  }

  .presentation-texte p {
    font-size: 0.9rem; /* Texte corps réduit pour tout faire rentre */
    line-height: 1.4;
    margin-bottom: 25px;
    /* Coupe le texte s'il est vraiment trop long (optionnel) */
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .bouton-cv {
    padding: 10px 25px;
    font-size: 0.8rem;
  }

  /* --- CARTE 2 (SKILLS) --- */
  #carte-2 {
    padding-top: 60px; /* Place pour le titre absolu */
  }
  #carte-2 h1 {
    font-size: 2.5rem;
    top: 20px; left: 20px;
  }

  .container-skills {
    flex-direction: column;
    gap: 15px; /* Moins d'espace entre les deux blocs */
    margin-top: 0;
    justify-content: center;
    height: 100%;
  }

  .dev h2, .crea h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  /* Grille plus serrée pour mobile */
  .liste ul {
    grid-template-columns: repeat(5, 1fr); /* Petits icones */
    gap: 8px;
  }

  .liste li {
    height: 60px; /* Cartes skills plus petites */
    border-radius: 8px;
    font-size: 0.6rem; /* Texte skills petit */
    gap: 5px;
  }

  .liste li i {
    font-size: 1.2rem;
  }

  /* --- CARTE 3 (CERTIFICATIONS) --- */
  #carte-3 {
    padding-top: 70px;
    justify-content: flex-start;
  }
  #carte-3 h1 {
    font-size: 2.2rem;
    top: 20px; left: 20px;
  }

  .container-certifications {
    margin-top: 10px;
    gap: 15px;
    width: 100%;
  }

  .opquast, .three {
    padding: 15px;
    width: 100%;
    border-radius: 15px;
    /* On simplifie le style pour gagner de la place */
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
  }

  .titre-certif {
    margin-bottom: 10px;
    gap: 10px;
  }
  .titre-certif img { width: 30px; height: 30px; }

  .opquast h2, .three h2 {
    font-size: 1rem;
  }
  .opquast h2 span, .three h2 span {
    font-size: 0.8rem;
  }

  .opquast p, .three p {
    font-size: 0.8rem; /* Texte très compact */
    line-height: 1.3;
  }

  /* --- CARTE 4 (PROJETS) --- */
  #carte-4 {
    justify-content: center;
  }
  #carte-4 h1 {
    font-size: 2.5rem;
    top: 20px; left: 20px;
  }
  
  .container-projets {
    margin-top: 0;
    gap: 20px;
  }

  .titre-projets {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .texte-projets {
    font-size: 0.95rem;
    padding: 0;
  }

  .bouton-projets {
    padding: 12px 30px;
    font-size: 0.9rem;
  }

  /* --- CARTE 5 (TÉMOIGNAGES) --- */
  #carte-5 {
    justify-content: center;
  }
  #carte-5 h1 {
    font-size: 2.5rem;
    top: 20px; left: 20px;
  }

  .container-temoignages {
    padding-top: 0;
    margin-bottom: 60px;
  }

  .temoignage {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  .auteur-nom {
    font-size: 1.2rem;
  }

  .poste {
    font-size: 0.8rem;
  }

  .nav-btn {
    width: 45px; height: 45px;
    bottom: 20px;
    font-size: 1rem;
  }
  .nav-btn.precedent { left: 20px; }
  .nav-btn.suivant { right: 20px; }
}