/* ==========================================================================
   1. VARIABLES & CONFIGURATION GÉNÉRALE
   ========================================================================== */
:root {
  /* Couleurs principales inspirées des cartes UNO */
  --uno-red: #ff3b30;
  --uno-blue: #007aff;
  --uno-yellow: #ffcc00;
  --uno-green: #34c759;

  /* Couleurs neutres utilisées pour le fond, le texte et les blocs */
  --uno-dark: #1a1a1a;
  --uno-light: #f4f4f9;
  --text-dark: #2d2d2d;

  /* Rayon de bordure réutilisé sur plusieurs éléments */
  --border-radius: 8px;
}

/* Réinitialisation simple : évite que les marges par défaut du navigateur gênent la mise en page */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Style général appliqué à toute la page */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-dark);
  background-color: var(--uno-light);
  line-height: 1.6;
}

/* ==========================================================================
   2. EN-TÊTE ET PIED DE PAGE DU SITE
   ========================================================================== */
/* Grand bandeau supérieur avec un dégradé rappelant les couleurs du UNO */
#site-header {
  background: linear-gradient(135deg, var(--uno-red), var(--uno-yellow), var(--uno-blue), var(--uno-green));
  color: white;
  text-align: center;
  padding: 3rem 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Titre principal du site */
#site-header h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Sous-titre placé sous le titre principal */
#site-header h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 1rem;
  opacity: 0.9;
}

/* Petit texte d'introduction dans l'en-tête */
#site-header p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.1rem;
}

/* Pied de page général, placé tout en bas */
#site-footer {
  background-color: var(--uno-dark);
  color: white;
  text-align: center;
  padding: 1.5rem;
  margin-top: 2rem;
  font-size: 0.9rem;
}

/* ==========================================================================
   3. STRUCTURE PRINCIPALE (CSS GRID POUR LES 3 COLONNES + BOUTON)
   ========================================================================== */
/* Grille principale : navigation à gauche, contenu au centre, aside à droite */
.main-container {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 3fr 1.2fr;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  gap: 1.5rem;
}

/* Colonne de gauche (Navigation) */
/* Liste du menu de navigation */
nav ul {
  list-style: none;
  background: white;
  padding: 1rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Espacement entre les éléments du menu */
nav li {
  margin-bottom: 0.5rem;
}

/* Supprime la marge du dernier élément pour garder un alignement propre */
nav li:last-child {
  margin-bottom: 0;
}

/* Apparence des liens du menu */
nav a {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--uno-dark);
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

/* Effet au survol des liens de navigation */
nav a:hover {
  background-color: var(--uno-red);
  color: white;
}

/* Colonne centrale (Contenu principal) */
/* Bloc principal contenant la présentation du jeu */
section {
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Colonne de droite (Informations complémentaires) */
/* Bloc latéral avec les informations bonus */
aside {
  background: white;
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  height: fit-content;
}

/* Style spécifique pour le bouton Retour */
.main-container > a {
  grid-column: 1 / -1; /* Aligne le bouton sur toute la largeur de la grille */
  justify-self: center; /* Centre le bouton horizontalement */
  display: inline-block;
  background-color: var(--uno-dark);
  color: white;
  padding: 0.75rem 2.5rem;
  text-decoration: none;
  font-weight: bold;
  border-radius: var(--border-radius);
  margin-top: 1rem;
  transition: background-color 0.2s, transform 0.1s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Effet visuel lorsque la souris passe sur le bouton Retour */
.main-container > a:hover {
  background-color: var(--uno-red);
  transform: translateY(-2px);
}

/* Effet lorsque le bouton Retour est cliqué */
.main-container > a:active {
  transform: translateY(0);
}

/* ==========================================================================
   4. ÉLÉMENTS DE TEXTE ET MÉDIAS INTERNES
   ========================================================================== */
/* Titres de niveau 3 utilisés dans le contenu et l'aside */
h3 {
  font-size: 1.6rem;
  color: var(--uno-dark);
  border-bottom: 3px solid var(--uno-blue);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Sous-titres de niveau 4 */
h4 {
  font-size: 1.1rem;
  color: var(--uno-dark);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Paragraphes de texte */
p {
  margin-bottom: 1rem;
}

/* Liste dans la colonne de droite */
aside ul {
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Éléments de liste dans l'aside */
aside li {
  margin-bottom: 0.25rem;
}

/* Image placée dans l'article */
article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Petit bloc de sources et liens en bas de la section centrale */
.section-footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px dashed #ccc;
  font-size: 0.9rem;
}

/* Liens dans le pied de section */
.section-footer a {
  color: var(--uno-blue);
  text-decoration: none;
  font-weight: 500;
}

/* Soulignement des liens du pied de section au survol */
.section-footer a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   5. RESPONSIVE DESIGN (MOBILE & TABLETTE)
   ========================================================================== */
/* Adaptation de la page pour les écrans plus petits */
@media (max-width: 900px) {
  .main-container {
    grid-template-columns: 1fr; /* Bascule sur une seule colonne */
    gap: 1rem;
  }

  .main-container > a {
    grid-column: 1;
    width: 100%; /* Le bouton prend toute la largeur sur mobile */
    text-align: center;
  }

  /* Le menu passe en ligne horizontale sur mobile/tablette */
  nav ul {
    display: flex;
    justify-content: space-around;
  }

  /* Supprime l'espacement vertical devenu inutile quand le menu est horizontal */
  nav li {
    margin-bottom: 0;
  }
}