/* ------------------------------
    GLOBAL
------------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    /* RESTAURATION : Fond d'origine */
    background-image: url('img/fond.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: white;
}

/* Style général des sections */
.section {
    padding: 100px 10%;
    position: relative; /* Utile pour les éléments enfants */
}

/* Liens */
a {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ------------------------------
    SECTION 0 - INTRO (logo plein écran)
------------------------------ */
#intro {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Le dégradé qui disparaît en bas */
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.8) 0%,   
        rgba(0, 0, 0, 0.7) 50%,  
        rgba(0, 0, 0, 0.0) 100% 
    );
}

/* RESTAURATION : La taille et l'animation du logo */
.logo-intro {
    width: 600px;
    animation: fadeIn 1.5s ease-in-out;
}

/* RESTAURATION : L'animation elle-même */
@keyframes fadeIn {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}
/* ------------------------------
    SECTION 1 - ACCUEIL
------------------------------ */
#accueil {
    position: relative;
    min-height: 100vh;
    padding: 120px 10% 80px;
}

#accueil .logo-small {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    z-index: 1000;
}

/* Contenu accueil */
.accueil-content {
    display: flex;
    align-items: center;
    gap: 50px;

/* --- AJOUTS --- */
  /* Nécessaire pour que z-index fonctionne */
  position: relative; 
  /* On s'assure que le texte est DEVANT le vinyle */
  z-index: 2;
}

.texte-accueil {
    font-size: 1.3rem;
    line-height: 1.6;

    /* On garde la marge à gauche pour laisser place au vinyle */
    margin-left: 300px;
    margin-top: -10px;
    
    /* On ajoute une largeur max pour que le bloc ne s'étire pas trop */
    max-width: 800px; 

    /* --- AJOUT DE L'EFFET VERRE --- */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    border-radius: 24px; /* Bords arrondis */
    padding: 40px; /* Marge intérieure pour que le texte respire */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Vinyle à gauche qui tourne */
.vinyle-anim {
    width: 650px;
    animation: rotation 4s linear infinite;

/* --- MODIFICATIONS --- */
  position: absolute;
  top: -30%; /* On le centre verticalement */
  
  /* On le décale vers la gauche, HORS DE L'ÉCRAN */
  left: -500px; 
  
  /* Astuce pour un centrage vertical parfait */
  transform: translateY(-50%); 
  
  /* On s'assure qu'il est derrière le texte */
  z-index: 1;
}

@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ------------------------------
    CONTENEUR DE SECTION STANDARD (Glassmorphism)
------------------------------ */

#france {
  color: #fff;
  padding: 100px 10%;
  position: relative;
}

/* On applique le même style aux 3 conteneurs */
#france .container,
#usa .container,
#top10 .container {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  border-radius: 24px;
  padding: 60px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  text-align: center;
}

#france h2 {
    /* 1. On remet une police propre */
    font-family: "Montserrat", sans-serif; 
    font-weight: 800;
    font-size: 2rem; /* Augmente ce chiffre si tu veux encore plus gros (ex: 3.5rem) */
    text-transform: uppercase; /* Optionnel : rend le titre plus impactant en majuscules */
    
    /* 2. La couleur du texte (Blanc pur) */
    color: #ffffff;

    /* 3. LA MAGIE DU NÉON (Superposition d'ombres) */
    text-shadow: 
        0 0 4px #fff,      /* 1ère couche : Le bord net et brillant */
        0 0 40px rgba(255, 255, 255, 0.5); /* 4ème couche : L'atmosphère diffuse */
        
    /* Optionnel : un peu d'espacement pour aérer le néon */
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-align: center;
}

/* Utilisation des styles d'index.html précédent pour le flux */
.graph-container {
    width: 100%;
    margin: 0 auto 50px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    padding: 30px;
}

svg {
    width: 100%;
    height: auto;
}

#france .texte-graph {
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto 50px 0; 
  text-align: justify; 
}

/* Tooltip interactive - STYLE iOS 16 GLASSMORPHE */
.tooltip-fiche {
  display: none;
  position: absolute;
  z-index: 10;
  min-width: 230px;
  max-width: 300px;
  padding: 18px 20px 16px 20px;
  
  /* GLASSMORPHISM */
  background: rgba(28, 35, 51, 0.4); 
  backdrop-filter: blur(20px); 
  border: 1.5px solid rgba(255,255,255,0.7); 
  box-shadow: 0 10px 30px 4px #0a143320, 0 1.5px 12px #292c3cc9;
  
  border-radius: 22px;
  pointer-events: auto;
  text-align: left;
  transition: opacity 0.12s;
}

.pop-fiche {
  color: #C6CBD4;
  font-size: 1rem;
  font-style: italic;
  margin-bottom: 6px;
  letter-spacing: 0.1px;
}

.chiffre-fiche {
  color: #fff;
  font-size: 1.04rem;
  font-weight: 500;
  margin-bottom: 9px;
}

.titre-fiche {
  color: #fff;
  font-size: 1.12rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

/* MODIFICATION: Année plus grosse et harmonisée au Rose/Fuchsia */
.annee-fiche {
  color: #FF375F; /* Rose/Fuchsia pour le contraste maximal */
  font-size: 1.8rem; /* Augmenté */
  font-weight: 600;
  margin-bottom: 6px;
}

.img-fiche {
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 2.5px 12px #1d2b4160;
  margin-bottom: 11px;
  display: block;
  border: 1.2px solid #fff;
}

/* Bouton audio - Style iOS (transparent, haut contraste) */
.btn-audio {
  display: block;
  margin-top: 10px;
  margin-bottom: 6px;
  
  /* Nouveau style iOS */
  background: rgba(255, 255, 255, 0.2); 
  color: #222; /* Texte noir pour contraste sur fond clair semi-transparent */
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 12px; 
  padding: 11px 18px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.6);
  transition: background 0.18s, color 0.18s;
  text-shadow: none;
}

.btn-audio:hover,
.btn-audio:focus {
  background: rgba(255, 255, 255, 0.35); 
  color: #000;
  outline: none;
}

.tooltip-fiche,
.tooltip-fiche * {
  font-family: 'SF Pro', 'Arial', 'Helvetica Neue', sans-serif;
  text-shadow: 0 2px 5px #29405D20;
}

/* Style du lien "Écouter le morceau en entier" - Rose/Fuchsia pour le contraste maximal */
.full-track-link {
  display:block; 
  margin-top:14px; 
  color:#FF375F !important; /* Rose/Fuchsia */
  text-align:center; 
  font-weight:600; 
  text-decoration:underline !important;
  border-radius:6px; 
  padding:6px 0 4px 0; 
  transition: color 0.18s, background 0.18s;
}

.full-track-link:hover, .full-track-link:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: underline;
}

/* Complément de style pour le contrôle du volume */

.volume-control {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.volume-label {
  color: #c6cbd4;
  font-size: 0.95rem;
  width: 50px;
  text-align: right;
}

/* MODIFICATIONS DE LA BARRE DE VOLUME POUR CLARTÉ, ACCESSIBILITÉ ET MODERNITÉ */
.volume-slider {
  flex-grow: 1;
  height: 6px;
  border-radius: 6px;
  cursor: pointer;
  /* La couleur inactive (gris foncé et transparent) */
  background: rgba(0, 0, 0, 0.4); 
}

/* Pour les navigateurs Webkit (Chrome, Safari) */
.volume-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}

/* Couleur de progression pour Webkit (simulé par background sur le slider) */
.volume-slider {
  background: linear-gradient(to right, #FF375F 50%, rgba(0, 0, 0, 0.4) 50%); /* Progression en Rose/Fuchsia */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff; /* Blanc pour contraste maximum */
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6); 
  border: none; 
  margin-top: -6px;
}

/* Pour Firefox */
.volume-slider::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}

.volume-slider::-moz-range-progress {
  /* La couleur de progression de Firefox */
  background: #FF375F; /* Rose/Fuchsia pour la progression */
  border-radius: 6px;
  height: 6px;
}

.volume-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: none;
}

/* Style pour focus */
.volume-slider:focus {
  outline: none;
  box-shadow: 0 0 6px #FF375F; /* Le Rose/Fuchsia pour l'indication de focus */
}



/* ------------------------------
    SECTION 3 - VINYLE USA
------------------------------ */
#usa {
  color: #fff;
  padding: 100px 10%;
  position: relative;
}

#usa h2 {
    /* 1. On remet une police propre */
    font-family: "Montserrat", sans-serif; 
    font-weight: 800;
    font-size: 2rem; /* Augmente ce chiffre si tu veux encore plus gros (ex: 3.5rem) */
    text-transform: uppercase; /* Optionnel : rend le titre plus impactant en majuscules */
    
    /* 2. La couleur du texte (Blanc pur) */
    color: #ffffff;

    /* 3. LA MAGIE DU NÉON (Superposition d'ombres) */
    text-shadow: 
        0 0 4px #fff,      /* 1ère couche : Le bord net et brillant */
        0 0 40px rgba(255, 255, 255, 0.5); /* 4ème couche : L'atmosphère diffuse */
        
    /* Optionnel : un peu d'espacement pour aérer le néon */
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-align: center;
}

/* Phrasing de contexte pour remplacer le titre du graphique (si utilisé) */
.texte-usa-contexte { 
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto 30px 0;
  text-align: justify;
}

#usa .graph-container {
  width: 100%;
  margin: 0 auto 50px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  padding: 30px;
  box-sizing: border-box;
  overflow-x: auto;
}

#usa canvas {
  width: 100% !important;
  height: auto !important;
  max-width: 650px;
  display: block;
  margin: 0 auto;
}

#usa p { 
  font-size: 1.2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto 50px 0; 
  text-align: justify; 
}


/* ------------------------------
   SECTION 4 - TOP 10
------------------------------ */
#top10 h2 {
    /* 1. On remet une police propre */
    font-family: "Montserrat", sans-serif; 
    font-weight: 800;
    font-size: 2rem; /* Augmente ce chiffre si tu veux encore plus gros (ex: 3.5rem) */
    text-transform: uppercase; /* Optionnel : rend le titre plus impactant en majuscules */
    
    /* 2. La couleur du texte (Blanc pur) */
    color: #ffffff;

    /* 3. LA MAGIE DU NÉON (Superposition d'ombres) */
    text-shadow: 
        0 0 4px #fff,      /* 1ère couche : Le bord net et brillant */
        0 0 40px rgba(255, 255, 255, 0.5); /* 4ème couche : L'atmosphère diffuse */
        
    /* Optionnel : un peu d'espacement pour aérer le néon */
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-align: center;
}

p{
  font-weight: 700;
  font-size: 20px;
  margin-top: 60px;
  margin-bottom: 40px;
}

/* PODIUM */
.podium-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 60px;
  margin-top: 50px;
  margin-bottom: 60px;
}

.podium {
  position: relative;
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.podium-cover {
  position: relative;
  width: 200px;
  height: 200px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.podium .album-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid rgba(255,255,255,0.35);
  display: block;
}

.podium-btn-wrap {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: auto;
}

.podium-btn {
  width: 52px;
  height: 52px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  color: black;

  background: radial-gradient(circle at 30% 30%, #fff 0%, #ddd 100%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
}

.podium-btn:hover {
  transform: scale(1.15);
  background: radial-gradient(circle at 30% 30%, #fff 0%, #bbb 100%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

.podium-btn:active {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.podium-btn[aria-pressed="true"] {
  background: radial-gradient(circle at 70% 70%, #ff6666 0%, #aa0000 100%);
  color: white;
  box-shadow: 0 0 25px rgba(255, 50, 50, 0.6);
}

.podium-bar {
  width: 230px;
  border-radius: 12px;
}

/* --- PODIUM AVEC 3 IMAGES PERSONNALISÉES --- */

.podium-bar {
  width: 230px;
  
  /* Arrondi pour correspondre à l'esthétique de ton image */
  border-radius: 20px; 
  
  /* IMPORTANT : Force l'image à prendre EXACTEMENT la taille de la barre */
  background-size: 100% 100%; 
  background-repeat: no-repeat;
  background-position: center;

  /* Ombre pour que la barre ne "flotte" pas dans le vide */
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.5), /* Ombre portée */
    inset 0 0 0 1px rgba(255, 255, 255, 0.1); /* Fine bordure interne subtile */
}

/* --- CONFIGURATION DE CHAQUE COLONNE --- */

/* 1er Place (Le plus grand) */
.podium-1 .podium-bar {
  height: 250px;
  background-image: url('img/chrome-1.png'); /* Ton image pour la 1ère place */
}

/* 2ème Place */
.podium-2 .podium-bar {
  height: 190px;
  background-image: url('img/chrome-2.png'); /* Ton image pour la 2ème place */
}

/* 3ème Place */
.podium-3 .podium-bar {
  height: 140px;
  background-image: url('img/chrome-3.png'); /* Ton image pour la 3ème place */
}

.album-label {
  text-align: center;
  display: block;
  margin-top: 15px; /* Un peu plus d'espace */
  color: #fff;
  font-weight: bold;
  font-size: 1.05em;
  
  /* --- LA CORRECTION D'ALIGNEMENT --- */
  height: 50px; /* On force une hauteur fixe pour tout le monde (assez pour 2 lignes) */
  
  /* On s'assure que le texte est bien géré à l'intérieur */
  display: flex;
  align-items: flex-start; /* Le texte commence en haut de sa zone */
  justify-content: center; /* Centré horizontalement */
  overflow: hidden; /* Coupe si jamais c'est trop long (sécurité) */
  line-height: 1.2; /* Interligne serré pour que ça rentre bien */
}
.album-label a {
  color: #fff;
  text-decoration: none;
}
.album-label a:hover {
  text-decoration: underline;
}

/* TOP 4-10 BARRES */
.top10-chart {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 40px;
}

.album-bar {
  display: flex;
  align-items: center;
  gap: 20px;
}

.album-bar .album-cover {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.3);
}

.listen-btn {
  background: radial-gradient(circle at 30% 30%, #fff 0%, #ddd 100%);
  border: none;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  font-size: 25px;
  color: black;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  transition: all 0.25s ease-in-out;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.listen-btn:hover {
  transform: scale(1.15);
  background: radial-gradient(circle at 30% 30%, #fff 0%, #bbb 100%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

.listen-btn:active {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.listen-btn[aria-pressed="true"] {
  background: radial-gradient(circle at 70% 70%, #ff6666 0%, #aa0000 100%);
  color: white;
  box-shadow: 0 0 25px rgba(255, 50, 50, 0.6);
}

.bar-full {
  height: 60px; 
  border-radius: 10px; 
  width: var(--bar-width); 
  background: linear-gradient(
    to right,
    rgba(220, 50, 50, 0.95) 0%,
    rgba(220, 50, 50, 0.90) calc(var(--bar-width, 80%) - 30px),
    rgba(220, 50, 50, 0.50) calc(var(--bar-width, 80%)),
    rgba(220, 220, 220, 0.05) 100%
  );
  display: flex; 
  align-items: center; 
  padding-left: 20px; 
  transition: transform 0.3s ease; 
}

.bar-full a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.bar-full a:hover {
  text-decoration: underline;
}

/* === ANIMATION APPARITION FLUIDE + REBOND === */

.animate-on-scroll {
  opacity: 0;
  transform: translateX(-80px) scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 1.5, 0.36, 1);
  will-change: transform, opacity;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Délais progressifs pour effet en cascade */
.podium.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.podium.animate-on-scroll:nth-child(2) { transition-delay: 0.3s; }
.podium.animate-on-scroll:nth-child(3) { transition-delay: 0.5s; }

.album-bar.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.album-bar.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.album-bar.animate-on-scroll:nth-child(3) { transition-delay: 0.3s; }
.album-bar.animate-on-scroll:nth-child(4) { transition-delay: 0.4s; }
.album-bar.animate-on-scroll:nth-child(5) { transition-delay: 0.5s; }
.album-bar.animate-on-scroll:nth-child(6) { transition-delay: 0.6s; }
.album-bar.animate-on-scroll:nth-child(7) { transition-delay: 0.7s; }

/* Optionnel : petite pulsation une fois visible */
.animate-on-scroll.visible {
  animation: popIn 0.6s ease-out 0.2s;
}

@keyframes popIn {
  0% { transform: scale(0.95); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ------------------------------
    FOOTER
------------------------------ */
#footer {
    text-align: center;
    padding: 40px 0;
    /* RESTAURATION : Fond sombre pour le footer */
    background: rgba(0, 0, 0, 0.7);
    font-size: 0.9rem;
}

.footer-links {
    margin-bottom: 10px;
}

.footer-links a {
    margin: 0 5px;
    font-weight: bold;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* ------------------------------
    RESPONSIVE (tablettes, mobile)
------------------------------ */
@media (max-width: 768px) {
    .accueil-content {
        flex-direction: column;
        text-align: center;
    }
    .vinyle-anim {
        margin-bottom: 20px;
    }
    .side-nav {
        display: none; /* Cache la nav latérale sur mobile */
    }
}

/* ---- SIDEBAR (Inchangée) ---- */
.side-nav {
    position: fixed;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 12px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(14px);
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.35);
    z-index: 1000;
    box-sizing: border-box;
}
/* ... (tout le reste de votre code .side-nav est inchangé) ... */
.side-nav .nav-btn {
    box-sizing: border-box;
    position: relative; 
    width: 52px;
    height: 52px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    text-decoration: none;
    color: white;
    overflow: hidden; 
    transition: width 0.35s ease, border-radius 0.35s ease, background 0.35s ease;
}
.side-nav .nav-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
    box-sizing: border-box;
    padding-left: 0; 
    transition: justify-content 0.35s ease, padding-left 0.35s ease;
}
.side-nav .nav-content img {
    width: 26px;
    height: 26px;
    display: block;
    object-fit: contain;
    transition: transform 0.28s ease, width 0.28s ease, height 0.28s ease;
    flex-shrink: 0; 
}
.side-nav .nav-label { 
    position: absolute; 
    top: 50%;
    left: 50px; 
    transform: translateY(-50%) translateX(-8px); 
    opacity: 0;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.92rem;
    pointer-events: none; 
    transition: opacity 0.28s ease 0.1s, transform 0.28s ease 0.1s;
}
.side-nav .nav-btn:hover {
    width: 150px;
    border-radius: 30px;
    background: rgba(255,255,255,0.35);
    box-shadow: 0 0 14px rgba(255,255,255,0.7);
}
.side-nav .nav-btn:hover .nav-content {
    justify-content: flex-start; 
    padding-left: 14px; 
}
.side-nav .nav-btn:hover .nav-content img {
    width: 28px;
    height: 28px;
}
.side-nav .nav-btn:hover .nav-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0); 
    pointer-events: auto;
}
.side-nav .nav-btn.active {
    background: rgba(255,255,255,0.45);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.85);
}
.side-nav .nav-btn.active:hover {
    width: 150px; 
    border-radius: 30px;
}
.side-nav .nav-btn.active:hover .nav-content {
    justify-content: flex-start;
    padding-left: 14px;
}

/* ------------------------------
    EFFET D'APPARITION AU SCROLL (Inchangé)
------------------------------ */
.reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- GESTION DE L'APPARITION DE LA NAV (Intro) --- */

/* 1. On ajoute une transition fluide au conteneur principal */
.side-nav {
  /* On s'assure que les mouvements sont fluides */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

/* 2. État CACHÉ (sur l'intro) */
.side-nav.hidden {
  opacity: 0;
  visibility: hidden;
  /* On la décale vers la droite pour la cacher */
  transform: translateY(-50%) translateX(150px); 
  pointer-events: none; /* Empêche de cliquer dessus quand elle est invisible */
}

/* 3. État VISIBLE (quand on scrolle) */
.side-nav.visible {
  opacity: 1;
  visibility: visible;
  /* Elle revient à sa place d'origine */
  transform: translateY(-50%) translateX(0); 
  pointer-events: auto;
}

/* 4. L'animation initiale (utilisée par ton script.js) */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}