/* ===== STYLE GLOBAL ===== */
/* Conteneur principal pour la page secondaire (page d'informations sur le jeu) */
.page-secondaire 
{
  /* Hauteur minimale égale à la hauteur de la fenêtre */
  min-height: 100vh;
  /* Permet le scroll vertical si contenu dépasse */
  overflow-y: auto;
  /* Fond rouge très foncé */
  background-color: #320808;
}

/* Réinitialisation universelle des éléments */
* 
{
  /* Inclut le padding et border dans la largeur/hauteur totale */
  box-sizing: border-box;
  /* Police par défaut Segoe UI */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Style du html et body */
html, body 
{
  /* Prend 100% de la hauteur disponible */
  height: 100%;
  /* Désactive le scroll horizontal pour éviter les débordements */
  overflow-x: hidden;
  /* Scroll lisse au lieu de sauter directement */
  scroll-behavior: smooth;
}

/* Style du body */
body 
{
  /* Fond noir quasi-complet */
  background-color: #0c0c0c;
  /* Texte gris très clair */
  color: #e0e0e0;
  /* Police Exo 2 pour le corps du texte */
  font-family: 'Exo 2', sans-serif;
  /* Hauteur de ligne : 1.6 fois la taille de la police (lisibilité) */
  line-height: 1.6;
  /* Utilise flexbox pour le layout */
  display: flex;
  /* Disposition verticale (colonne) */
  flex-direction: column;
  /* Centre les éléments horizontalement */
  align-items: center;
}

/* ===== TITRES ===== */
/* Style du titre principal h1 */
h1 
{
  /* Couleur beige semi-transparent */
  color: rgba(240, 230, 200, 0.8);
  /* Police Anton pour l'impact */
  font-family: 'Anton', sans-serif;
  /* Texte en majuscules */
  text-transform: uppercase;
  /* Distance du haut : 5% */
  top: 5%;
  /* Largeur pleine */
  width: 100%;
  /* Taille de police grande : 2.5rem */
  font-size: 2.5rem;
  /* Ombre douce et lumineuse */
  text-shadow: 0 0 15px rgba(255, 230, 180, 0.4);
}

/* Style du sous-titre h3 */
h3 
{ 
  /* Largeur pleine */
  width: 100%; 
  /* Alignement à gauche */
  text-align: left; 
  /* Taille de police : 1.2rem */
  font-size: 1.2rem; 
  /* Couleur beige semi-transparent */
  color: rgba(240, 230, 200, 0.8); 
}

/* ===== NAVIGATION DESKTOP ===== */
/* Conteneur principal de la navigation desktop */
.desktop-nav-links 
{ 
  /* Fond gris clair */
  background-color: #eeeeee; 
  /* Centre le contenu */
  text-align: center; 
  /* Largeur pleine */
  width: 100%; 
} 

/* Liste non-ordonnée de la navigation */
.desktop-nav-links ul 
{ 
  /* Supprime les puces de liste */
  list-style: none; 
  /* Réinitialise les marges */
  margin: 0; 
  /* Réinitialise le remplissage */
  padding: 0; 
  /* Utilise flexbox pour alignement horizontal */
  display: flex;
  /* Centre les éléments horizontalement */
  justify-content: center; 
  /* Espacement entre les liens : 40px */
  gap: 40px; 
} 

/* Éléments de liste individuels */
.desktop-nav-links li 
{ 
  /* Affiche comme élément inline-block */
  display: inline-block; 
  /* Texte noir */
  color: rgb(0, 0, 0); 
} 

/* Style des liens de navigation */
.desktop-nav-links a 
{ 
  /* Supprime le soulignement des liens */
  text-decoration: none; 
  /* Couleur du texte gris foncé */
  color: #333; 
  /* Texte en majuscules */
  text-transform: uppercase; 
  /* Texte en gras */
  font-weight: bold; 
  /* Transition douce de 0.3s pour les effets au survol */
  transition: all 0.3s ease; 
} 

/* Style des liens au survol */
.desktop-nav-links a:hover 
{ 
  /* Texte blanc au survol */
  color: white; 
  /* Fond rouge foncé au survol */
  background-color: rgb(82, 9, 9); 
  /* Remplissage pour créer un effet de bouton */
  padding: 5px 10px; 
  /* Coins arrondis */
  border-radius: 5px;
}

/* ===== SECTION INTRO ===== */
/* Bouton "voir le trailer" */
.trailer-btn 
{ 
  /* Fond or/beige */
  background-color: #c6a664; 
  /* Remplissage : 1% */
  padding: 1%;
  /* Texte noir */
  color: #000; 
  /* Coins arrondis */
  border-radius: 8px; 
  /* Curseur pointeur au survol */
  cursor: pointer; 
  /* Texte en gras */
  font-weight: bold; 
  /* Transition douce de 0.3s */
  transition: 0.3s; 
}

/* Conteneur principal du jeu (photo + infos) */
.game-intro {
  /* Utilise flexbox pour layout horizontal */
  display: flex;
  /* Centre verticalement les éléments */
  align-items: center;
  /* Espacement entre les éléments : 15px */
  gap: 15px;
  /* Largeur maximale : 1200px */
  max-width: 1200px;
}

/* ===== SECTION AVIS/REVIEWS ===== */
/* Conteneur de la section des avis */
.reviews 
{ 
  /* Remplissage interne : 2rem */
  padding: 2rem; 
  /* Centre le texte */
  text-align: center; 
}

/* Titre h2 dans la section des avis */
.reviews h2 
{ 
  /* Couleur or/beige */
  color: #c6a664; 
  /* Marge inférieure : 1rem */
  margin-bottom: 1rem;
}

/* Carrousel d'avis (scroll horizontal) */
.review-carousel 
{ 
  /* Utilise flexbox pour layout horizontal */
  display: flex; 
  /* Espacement entre les éléments : 1rem */
  gap: 1rem; 
  /* Permet le scroll horizontal */
  overflow-x: auto; 
  /* Snap obligatoire pour scroll horizontal (stop par élément) */
  scroll-snap-type: x mandatory; 
  /* Espacement inférieur : 10px */
  padding-bottom: 10px; 
} 

/* Conteneur d'un avis individuel */
.review 
{ 
  /* Largeur minimale : 250px pour éviter rétrécissement excessif */
  min-width: 250px; 
  /* Fond gris très foncé */
  background: #1a1a1a; 
  /* Remplissage interne : 1.5rem */
  padding: 1.5rem; 
  /* Coins arrondis : 10px */
  border-radius: 10px; 
  /* Snap au point de départ du scroll */
  scroll-snap-align: start; 
  /* Pas de flexibilité en flex (pas d'agrandissement) */
  flex: none; 
}

/* ===== PHOTO DU JEU ===== */
/* Conteneur de la photo du jeu */
.game-photo 
{
  /* Marge supérieure : 5% */
  margin-top: 5%;
  /* Utilise flexbox */
  display: flex;
  /* Hauteur automatique */
  height: auto;
}

/* ===== INFO JEU ===== */
/* Conteneur des infos du jeu */
.game-info 
{ 
  /* Distance du haut : 5% */
  top: 5%;
  /* Positionnement relatif */
  position: relative;
  /* Alignement à gauche */
  text-align: left; 
}

/* Image dans le conteneur photo */
.game-photo img 
{
  /* Largeur 100% du conteneur */
  width: 100%;
  /* Largeur maximale : 320px */
  max-width: 320px;
  /* Hauteur automatique pour garder le ratio */
  height: auto;
  /* Coins arrondis : 10px */
  border-radius: 10px;
  /* Ombre noire pour séparation */
  box-shadow: 0 0 15px #000;
}

/* ===== SECTIONS GÉNÉRIQUES ===== */
/* Style commun pour toutes les sections (info, analyse, avis) */
.info-section,
.analysis,
.reviews 
{
  /* Fond gris très foncé */
  background: #1a1a1a;
  /* Remplissage : 2rem */
  padding: 2rem;
  /* Marge : 1.5rem haut/bas */
  margin: 1.5rem 0;
  /* Coins arrondis : 10px */
  border-radius: 10px;
  /* Largeur 100% */
  width: 100%;
  /* Largeur maximale : 1000px pour garder lisibilité */
  max-width: 1000px;
}

/* Titres h2 dans les sections */
.info-section h2,
.analysis h2,
.reviews h2 
{
  /* Couleur or/beige */
  color: #c6a664;
  /* Marge inférieure : 1rem */
  margin-bottom: 1rem;
  /* Centre le texte */
  text-align: center;
}

/* Tableaux dans les sections */
.info-section table,
.analysis table 
{
  /* Largeur 100% du conteneur */
  width: 100%;
  /* Fusionne les bordures des cellules */
  border-collapse: collapse;
}

/* Cellules des tableaux */
.info-section td,
.analysis td 
{
  /* Remplissage : 10px */
  padding: 10px;
  /* Bordure inférieure grise */
  border-bottom: 1px solid #333;
}

/* ===== FOOTER ===== */
/* Style du pied de page */
footer 
{ 
  /* Centre le texte */
  text-align: center; 
  /* Remplissage : 1rem */
  padding: 1rem; 
  /* Fond noir */
  background: #000; 
  /* Taille de police réduite : 0.9rem */
  font-size: 0.9rem; 
  /* Texte gris foncé */
  color: #777; 
  /* Largeur pleine */
  width: 100%;
}

/* ===== MEDIA QUERY TABLETTE PORTRAIT (≤1024px) ===== */
/* Adaptations pour écrans de tablette/mobile en mode portrait */
@media only screen and (max-width: 1024px) and (orientation: portrait) {

  /* Bannière pour mobile */
  .banner 
  {
    /* Positionnement relatif */
    position: relative;
    /* Largeur 100% */
    width: 100%;
    /* Masque le contenu qui dépasse */
    overflow: hidden;
  }

  /* Image du bannière sur mobile */
  .banner img 
  {
    /* Largeur 100% */
    width: 100%;
    /* Hauteur fixe : 220px pour mobile */
    height: 220px;
    /* Couvre le conteneur sans distorsion */
    object-fit: cover;
  }

  /* Intro du jeu en colonne sur mobile */
  .game-intro 
  {
    /* Disposition verticale au lieu d'horizontale */
    flex-direction: column;
    /* Centre les éléments */
    align-items: center;
    /* Remplissage inférieur : 20px */
    padding-bottom: 20px;
  }

  /* Photo du jeu sur mobile */
  .game-photo 
  {
    /* Marge inférieure : 20px */
    margin-bottom: 20px;
  }

  /* Infos du jeu sur mobile */
  .game-info 
  { 
    /* Distance du haut : 5% */
    top: 5%;
    /* Positionnement relatif */
    position: relative;
    /* Centre le texte */
    text-align: center; 
    /* Remplissage inférieur : 15px */
    padding-bottom: 15px;
  }

  /* Sections adaptées pour mobile */
  .info-section,
  .analysis,
  .reviews {
    /* Centrage automatique */
    margin: 0 auto;
    /* Marge inférieure : 15px */
    margin-bottom: 15px;
    /* Largeur maximale : 800px */
    max-width: 800px;
    /* Largeur 100% */
    width: 100%;
    /* Remplissage supérieur : 15px */
    padding-top: 15px;
    /* Remplissage inférieur : 15px */
    padding-bottom: 15px;
  }

  /* Body adapté pour mobile */
  body 
  {
    /* Fond rouge foncé/brun */
    background-color: rgb(75, 40, 40);
    /* Flexbox */
    display: flex;
    /* Disposition verticale */
    flex-direction: column;
    /* Centre les éléments */
    align-items: center;
  }

  /* Navigation mobile - disposition verticale */
  .desktop-nav-links ul
  {
    /* Largeur 100% */
    width: 100%;
    /* Hauteur automatique */
    height: auto;
    /* Marge gauche : 1px */
    margin-left: 1px;
    /* Marge droite : 30px */
    margin-right: 30px;
    /* Inclut le padding dans la largeur */
    box-sizing: border-box;
    /* Hauteur minimale : 50px */
    min-height: 50px;
    /* Centre verticalement */
    align-items: center;
    /* Disposition verticale (colonne) */
    flex-direction: column;
  }

  /* Navigation mobile transparente */
  .desktop-nav-links{
    /* Fond transparent */
    background-color: #eeeeee00;
  }

  /* Liens navigation mobile avec ombre */
  .desktop-nav-links ul a{
    /* Texte blanc */
    color: #ffffff;
    /* Ombre rouge vif pour contraste */
    text-shadow: 0 0 15px rgba(232, 10, 10, 0.9);
  }

  /* Carrousel d'avis centré sur mobile */
  .review-carousel 
  {
    /* Centre les éléments */
    justify-content: center;
  }
}