/* Import de la police Google Fonts Cinzel - police serif inspirée des inscriptions romaines */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

body {
  background-color: #F4F1EC;     /* Fond ivoire */
  margin: 0;                       /* Suppression des marges par défaut du navigateur */
  padding: 20px 50px;             
  font-family: 'Cinzel', serif;   
  line-height: 1.6;               
  color: #2A1836;                  /* couleur texte=violet*/
}

/* Titles*/
h1 {
  font-family: 'Cinzel', serif;   /* Police mythologique cohérente */
  text-align: center;              /* Centrage pour importance visuelle */
  margin: 0 0 40px 0;             /* Espacement après le titre, marges latérales à 0 */
  padding: 0;                       /* Pas de padding pour éviter les interférences */
}

h2 {
  font-family: 'Cinzel', serif;   
  margin-top: 30px;                
  margin-bottom: 25px;              /* Espacement après le gros titre */
  text-decoration: underline;      
  text-decoration-color: #CFAF56; 
  text-underline-offset: 8px;     
  color: #2A1836;                  /* Violet foncé*/
  font-size: 1.8em;              
}

/*Sous-titre*/
h3 {
  font-family: 'Cinzel', serif;  
  color: #7D482F;                 /* Bronze*/
  margin-top: 25px;                
  margin-bottom: 15px;             
}

/*Paragraphs*/
p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 20px;
  color: #2A1836;
}

/*Links*/
a {
  color: #7D482F;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #D8B15A;
  text-decoration: underline;
}

/*Navigation */
nav {
  text-align: center;
  margin: 50px 0 40px;
  padding: 20px 0;
  border-top: 2px solid #D8B15A;
}

nav a {
  text-decoration: none;   
  font-family: 'Cinzel', serif;
  margin: 0 15px;
  padding: 8px 15px;
  border-bottom: 2px solid transparent;
  color: #2A1836;
  font-size: 1.1em;
  transition: all 0.3s ease;
}

/*quand la souris passe dessus*/
nav a:hover {
  text-decoration: none;   
  border-bottom-color: #D8B15A; /* ligne dorée*/
  color: #7D482F ; /* bronze*/
}

/*Lists */
ul {
  padding-left: 25px;
  margin-bottom: 25px;
}

li {
  margin: 12px 0;
  line-height: 1.8;
  color: #2A1836;
}

li strong {
  color: #7D482F;
  font-weight: 700;
}

/* Content Blocks*/

.content-section {
  max-width: 1000px;              /* Largeur maximale  */
  margin: 0 auto;                  /* Centrage horizontal automatique */
  background: rgba(255,255,255,0.6); /* Fond blanc */
  padding: 30px 40px;             
  border-radius: 8px;             
  border: 2px solid #D8B15A;       /* Bordure dorée épaisse style cadre précieux */
  margin-bottom: 30px;             /* Espacement entre chaque gros blocs */
}


/* Conteneur générique pour centrer les titres */
.title-container {
  text-align: center;              /* Centrage horizontal */
  margin-bottom: 40px;             /* Espacement après le titre */
}

.all_pages_title {
  position: relative;           /* permet superposition */
  display: inline-block;         /* Bloque l'élément au centre */
  padding: 20px 40px;            /* Espacement interne dans le cadre (1ere val : haut/bas, 2eme val :gauche/droite) */
  color:#F4F1EC;                /* Texte en ivoire */
  font-family: 'Cinzel', serif;  
  font-size: 2.5 em;              /* Taille 250% plus élévé que à la base*/
  font-weight: 700;              /* Met en Gras */
  border-style: solid;           
  border-width: 5px;             
  border-color: #D8B15A;         /* Or*/
  background-color: #0A0A0A;     /* Fond violet foncé (cohérent avec le thème des autres pages) */
  line-height: 1;                /* Hauteur de ligne minimale pour ajustement serré */
  letter-spacing: 2px;           /* Espacement des lettres */
  box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* Ombre portée pour effet de relief 3D */
}


/*Download Items*/
.download-item {
  background: rgba(255,255,255,0.7);
  padding: 20px;
  margin: 15px 0;
  border-radius: 8px;
  border-left: 4px solid #D8B15A;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.download-item:hover {
  transform: translateX(5px);/*bouge vers la droite*/
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);/*ombre*/
}

/*Resource Links*/

.resource-link {
  display: block;                                 /* Prend toute la largeur disponible */
  padding: 15px;                                 
  margin: 10px 0;                               
  background: rgba(255,255,255,0.7);            
  border-radius: 6px;                            
  border: 1px solid #D8B15A;                    /* Bordure dorée fine */
  transition: all 0.3s ease;                    
}

/* 
 * Effet hover : changement de fond et de bordure
 * Feedback visuel clair pour indiquer l'interactivité
 */
.resource-link:hover {
  background: rgba(216,177,90,0.2);             /* le background change en un voile doré */
  border-color: #7D482F;                       
}

/*Game Gallery*/
/*
Galerie images
 */
.game-gallery {
  display: grid;                                              
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonnes adaptatives : minimum 300px, se répartissent équitablement */
  gap: 25px;                                                  /* Espacement entre les éléments de la grille */
  margin-top: 30px;                                           /* Espacement au-dessus */
}

/*
 * Chaque image est dans un conteneur avec bordure dorée et fond spécial
 */
.gallery-item {
  margin: 0;                                                  /* Suppression des marges par défaut */
  text-align: center;                                         /* Centrage  contenu */
  background: rgba(255,255,255,0.5);                         /* Fond blanc semi-transparent */
  padding: 15px;                                              /* Espacement interne au sein di cadre ou conteneur */
  border-radius: 8px;                                         /* Coins arrondis */
  border: 2px solid #D8B15A;                                  /* Bordure dorée épaisse or*/
  transition: transform 0.3s ease, box-shadow 0.3s ease;     /* Animation fluide pour effets quand souris passe dessus.*/
}

/*
 * Effet hover : passage souris
 */
.gallery-item:hover {
  transform: translateY(-5px);                                /* Légère soulevement case vers le haut */
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);                    /* Création ombre  */
  border-color: #7D482F;                                      /* Bordure passe légèrement couleur bronez */
}

/*
 * Style des images
 */
.gallery-item img {
  width: 100%;                                                /* Taille ou largeuradaptée 100% taille peut importe taille de base */
  height: auto;                                               /* Hauteur proportionnelle */
  border-radius: 6px;                                         /* coins arrondis images */
  display: block;                                             /* Affichage en bloc */
  margin-bottom: 10px;                                        /* Espacement sous l'image permet aprtès la légende */
}

/*
Style des légendes 
 */
.gallery-item figcaption {
  font-size: 0.95em;                                          /* Taille un peu réduite par rapport normale*/
  color: #7D482F;                                             /*bronze*/
  font-style: italic;                                         
  margin-top: 8px;                                           
  font-family: 'Cinzel', serif;                              
}