/* --- Styles Généraux et Arrière-plan --- */
html {
  background-image: url('./images/wukong.webp'); /* Chemin de l'image de fond */
  background-repeat: no-repeat;
  background-size: cover; /* L'image couvre toute la zone */
  background-attachment: fixed; /* L'image reste fixe lors du défilement */
  background-position: center center; /* Centre l'image de fond */
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #eee; /* Couleur de texte claire */
  margin: 0;
  padding: 0;
  line-height: 1.6; /* Espacement des lignes pour la lisibilité */
  background-color: rgba(0, 0, 0, 0.65); /* Overlay sombre semi-transparent pour la lisibilité du texte sur l'image de fond */
  display: flex; /* Utilisation de Flexbox pour une mise en page flexible */
  flex-direction: column; /* Les éléments s'empilent verticalement */
  min-height: 100vh; /* S'assure que le body prend au moins toute la hauteur de la fenêtre */
}

/* --- En-tête (Header) --- */
header {
  background-color: rgba(30, 30, 30, 0.85); /* Fond sombre semi-transparent */
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Ombre légère pour le relief */
}

header h1 {
  color: #ff6f61; /* Rouge-orange vif pour le titre */
  margin: 0;
  padding-bottom: 10px;
  font-size: 2.8em; /* Grande taille de police */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Ombre de texte pour la visibilité */
}

/* --- Navigation (Nav) --- */
nav ul {
  list-style-type: none; /* Supprime les puces de liste */
  padding: 0;
  margin: 0;
  display: flex; /* Alignement horizontal des liens */
  justify-content: center; /* Centre les liens */
  gap: 30px; /* Espacement entre les liens */
}

nav ul li a {
  color: #ffb861; /* Orange-jaune pour les liens */
  text-decoration: none;
  font-weight: bold;
  font-size: 1.15em;
  padding: 8px 15px;
  transition: color 0.3s ease, text-decoration 0.3s ease, border-bottom 0.3s ease; /* Transitions douces */
}

nav ul li a:hover {
  color: white; /* Blanc au survol */
  text-decoration: none; /* Pas de soulignement par défaut au survol */
  border-bottom: 2px solid white; /* Bordure blanche au survol */
}

nav ul li a.active {
  color: #ff4c4c; /* Rouge vif pour le lien actif */
  border-bottom: 2px solid #ff4c4c; /* Soulignement rouge pour le lien actif */
  text-decoration: none;
}

/* --- Contenu Principal (Main) --- */
main {
  flex-grow: 1; /* Permet au contenu principal de s'étendre */
  max-width: 1500px; /* Largeur maximale du contenu */
  margin: 2.5rem auto; /* Espacement vertical et centrage horizontal */
  padding: 2.5rem;
  background-color: rgba(30, 30, 30, 0.92); /* Fond sombre et légèrement transparent pour le contenu */
  border-radius: 15px; /* Coins arrondis */
  box-shadow: 0 0 25px rgba(255, 111, 97, 0.5); /* Ombre rougeoyante */
  text-align: left; /* Alignement du texte à gauche pour la lecture */
  border: 1px solid rgba(255, 111, 97, 0.3); /* Bordure subtile */
}

main h2, main h3 {
  color: #ff4c4c; /* Rouge vif pour les titres de section */
  margin-top: 1.8rem;
  margin-bottom: 1.2rem;
  text-align: center; /* Centre les titres de section */
  border-bottom: 2px solid rgba(255, 76, 76, 0.4); /* Ligne de séparation sous les titres */
  padding-bottom: 0.8rem;
  font-size: 1.8em;
}

main h3 {
  font-size: 1.4em; /* Taille plus petite pour les sous-titres */
}

main p {
  margin-bottom: 1.5rem;
  color: #d0d0d0; /* Couleur du texte des paragraphes */
}

main ul {
  list-style: disc; /* Puces de liste standard */
  padding-left: 30px; /* Indentation des listes */
  margin-bottom: 1.8rem;
}

main ul li {
  margin-bottom: 1rem;
  color: #d0d0d0; /* Couleur du texte des éléments de liste */
}

/* --- Styles spécifiques aux Sections "Tips" (page tips.html) --- */
.tips-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Grille responsive à colonnes multiples */
  gap: 25px; /* Espacement entre les "tips" */
  margin-top: 2.5rem;
}

.tip-section {
  background-color: rgba(50, 50, 50, 0.95); /* Fond gris foncé pour chaque bloc de tip */
  padding: 25px;
  border-radius: 12px; /* Coins arrondis */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Ombre plus prononcée */
  border: 1px solid rgba(255, 111, 97, 0.4); /* Bordure visible */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; /* Transitions douces */
}

.tip-section:hover {
  transform: translateY(-8px) rotateZ(0.5deg); /* Effet de soulèvement et légère rotation au survol */
  box-shadow: 0 12px 25px rgba(255, 111, 97, 0.8); /* Ombre plus lumineuse au survol */
  border-color: #ff6f61; /* Bordure plus marquée au survol */
}

.tip-section .section-header {
  display: flex;
  align-items: center;
  justify-content: center; /* Centre le titre et l'icône dans l'en-tête de section */
  margin-bottom: 20px;
}

.tip-section .section-header h3 {
  margin: 0;
  color: #ff6f61; /* Couleur du titre des tips */
  font-size: 1.6em; /* Taille plus grande pour les titres de tip */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Ombre de texte */
  border-bottom: none; /* Pas de ligne de séparation ici */
  padding-bottom: 0;
}

.section-icon { /* Style pour les icônes (si ajoutées) */
  width: 50px;
  height: 50px;
  margin-right: 15px;
  filter: drop-shadow(0 0 8px #ff6f61); /* Effet de lueur pour les icônes */
}

/* --- Styles spécifiques aux Sections "Infos" (page infos.html) --- */
.section-divider {
  border: none;
  height: 1px;
  background-color: rgba(255, 111, 97, 0.4); /* Ligne rouge subtile */
  margin: 3rem auto; /* Espacement */
  width: 60%; /* Largeur de la ligne */
  opacity: 0.7;
}

.facts-grid { /* Grille pour la section "Fiche technique rapide" */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Deux colonnes responsives */
  gap: 15px;
  margin-top: 1.5rem;
  text-align: center;
}

.facts-grid p {
  margin: 0;
}

.facts-grid p strong {
  color: #ff6f61; /* Mise en évidence des titres de faits */
}

.section-image, .studio-logo { /* Styles pour les images dans les sections */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.social-link { /* Styles pour les liens sociaux */
  color: #ffb861;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.social-link:hover {
  color: white;
  text-decoration: underline;
}

.last-update-note {
  text-align: center;
  font-size: 0.9em;
  color: #888;
  margin-top: 3rem;
  font-style: italic;
}

.info-section { /* Styles généraux pour les sections de la page infos */
  background-color: rgba(40, 40, 40, 0.9); /* Fond similaire aux tips */
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 111, 97, 0.4);
  margin-bottom: 3rem; /* Espacement entre les sections */
}

.info-section h2, .info-section h3 {
  border-bottom: 2px solid rgba(255, 76, 76, 0.4);
  padding-bottom: 0.8rem;
  margin-bottom: 1.5rem;
}

.info-section p {
  text-align: left;
}

.info-section ul {
  text-align: left;
  list-style-position: inside; /* Les puces sont à l'intérieur du texte */
}

/* --- Styles spécifiques à la Galerie (page galerie.html) --- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Grille pour les vidéos */
  gap: 30px; /* Espacement entre les vidéos */
  margin-top: 2rem;
}

.video-item {
  background-color: rgba(50, 50, 50, 0.9); /* Fond sombre pour chaque vidéo */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 111, 97, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center; /* Centre le contenu de l'élément vidéo */
}

.video-item:hover {
  transform: translateY(-5px); /* Légère élévation au survol */
  box-shadow: 0 10px 20px rgba(255, 111, 97, 0.6); /* Ombre plus prononcée au survol */
}

.video-responsive { /* Conteneur pour les vidéos responsives */
  position: relative;
  padding-bottom: 56.25%; /* Ratio 16:9 (9 / 16 * 100) */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin-bottom: 15px;
  border-radius: 8px; /* Coins arrondis pour la vidéo */
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-item h3 {
  color: #ff6f61; /* Couleur du titre de la vidéo */
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 1.3em;
  border-bottom: none; /* Pas de ligne de séparation */
  padding-bottom: 0;
}

.video-item p.channel {
  color: #aaa; /* Couleur du texte du canal */
  font-size: 0.9em;
  margin-top: 5px;
}

/* --- Pied de page (Footer) --- */
footer {
  text-align: center;
  padding: 20px;
  background-color: rgba(17, 17, 17, 0.9); /* Fond sombre semi-transparent */
  color: #999; /* Couleur du texte du pied de page */
  font-size: 0.9em;
  margin-top: auto; /* Pousse le pied de page vers le bas */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); /* Ombre au-dessus du pied de page */
}

footer p {
  margin: 0;
}

/* --- Responsive Design (Média Queries) --- */
@media (max-width: 768px) {
  header h1 {
      font-size: 2em;
  }

  nav ul {
      flex-direction: column; /* La navigation s'empile verticalement sur les petits écrans */
      gap: 10px;
  }

  nav ul li a {
      font-size: 1em;
      padding: 5px 10px;
  }

  main {
      margin: 1.5rem auto;
      padding: 1.5rem;
  }

  main h2 {
      font-size: 1.5em;
  }

  .tips-container, .video-grid {
      grid-template-columns: 1fr; /* Une seule colonne pour les tips et vidéos sur petits écrans */
  }

  .tip-section, .video-item {
      padding: 20px;
  }
}
/* --- Styles spécifiques à la Galerie (page galerie.html) --- */

.video-grid {
  display: block; /* Change de 'grid' à 'block' pour afficher les éléments en lignes */
  padding: 20px;
  /* Les propriétés 'gap' et 'grid-template-columns' ne sont plus nécessaires avec 'display: block;' */
}

.video-item, /* Si tu as cette classe, assure-toi qu'elle n'interfère pas */
.video {
  text-align: center;
  margin-bottom: 30px; /* Ajoute un espace entre chaque vidéo */
  padding: 15px; /* Ajoute un peu de rembourrage autour de chaque vidéo si tu veux */
  background-color: #222; /* Optionnel: si tu veux un fond pour chaque vidéo */
  border-radius: 8px; /* Optionnel: coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Optionnel: une légère ombre */
  max-width: 800px; /* Optionnel: limite la largeur de chaque vidéo pour qu'elle ne prenne pas toute la page sur de grands écrans */
  margin-left: auto; /* Centre la vidéo si max-width est utilisée */
  margin-right: auto; /* Centre la vidéo si max-width est utilisée */
}

.video iframe {
  width: 100%;
  height: 315px; /* Augmente la hauteur pour une meilleure visibilité en ligne */
  border: none;
}

.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* Ratio 16:9 (9 / 16 * 100) */
  height: 0;
  overflow: hidden;
  max-width: 100%; /* S'assure qu'elle prend 100% de la largeur du conteneur parent */
  margin: 0 auto; /* Centre la vidéo horizontalement */
  background: #000;
  border-radius: 8px;
}

/* Le reste du CSS pour iframe, object, embed dans .video-responsive reste le même */
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-title {
  font-weight: bold;
  margin-top: 8px;
  color: #eee; /* Couleur du texte pour un meilleur contraste */
}

.video-channel {
  font-size: 0.9em;
  color: #bbb; /* Couleur plus claire pour la chaîne */
}

/* --- Le reste de ton CSS --- */