/* ===== Base Styles ===== */
/* 
 * Palette de couleurs inspirée/utilisées de la mythologie grecque :
 *  #F4F1EC : Ivoire/parchemin (fond principal,évoque anciens manuscrits)
 *  #2A1836 : Violet foncé (texte principal)
 *  #D8B15A : Or antique (bordures)
 *  #7D482F : Bronze/terre cuite
 *  #0A0A0A : Noir profond
 */
body {
  background-color: #F4F1EC;  /* Fond ivoire  */
  font-family: 'Cinzel', serif; /* Police inspirée de l'écriture grecque */
  margin: 0;                    /* Suppression des marges par défaut */
  padding: 20px;       /* Espacement sur tous les côtés pour éviter de toucher les bords avec des éléments  */
  line-height: 1.6;             /* Interligne*/
  color:#0A0A0A;               /* Couleur de texte principale (noir) */
}

/*Header */
/* 
 * Section d'en-tête contenant le titre principal et le sous-titre

 */
header {
  text-align: center;           /* Centrage Entete */
  margin-bottom: 40px;          /* Espacement important après le titre pour séparer visuellement */
  padding-top: 20px;
padding-bottom: 20px;
padding-left: 0;
padding-right: 0;              /* Espacement titre et sous-titre */
}

/* Conteneur du titre principal - permet le centrage */
.title-container {
  text-align: center;            /* Centrage titre */
  margin-bottom: 15px;           /* Espacement avant le sous-titre */
}
 
 /* Titre principal "Lolympe" */

.game_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.5em;              /* 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 noir */
  line-height: 1;                /* Hauteur de ligne minimale pour ajustement serré */
  letter-spacing: 2px;           /* Espacement des lettres */
}

/* 
 * Sous-titre descriptif sous le titre principal
 * Style plus léger et italique pour créer une hiérarchie visuelle
 */
.subtitle {
  font-family: 'Cinzel', serif;  
  font-size: 1.5em;              /* Taille 150% */
  color: #7D482F;                /* Bronze*/
  font-style: italic;           
  margin-top: 10px;              
  letter-spacing: 1px;          
}

/*Lore  */

.lore-block {
  display: flex;                 /*  alignement horizontal */
  align-items: center;           /* Alignement vertical centré des éléments */
  gap: 30px;                     /* Espacement entre l'image et le texte */
  max-width: 1200px;            
  margin: 50px auto 50px auto;   /* Marges : haut/bas/gauche/droite */
  padding: 0 20px;               /*  éviter que le contenu touche les bords du cadre */
}

/* 
 * Conteneur de l'image mythologique (mosaïque de Thésée et le Minotaure)
 * Prend 1 part de l'espace disponible dans le flexbox
 */
.myth-image {
  flex: 1;                       /* Prend 1 part de l'espace disponible */
  text-align: center;            /* Centrage de l'image */
}

/* 
Style image
 */
.myth-image img {
  width: 100%;                   
  height: auto;                  
  border-radius: 8px;            /* Coins arrondis  */
  border: 3px solid #D8B15A;    /* Bordure dorée épaisse  doré */
}

/* Légende de l'image */
.myth-image figcaption {
  font-size: 0.85em;            /* 85% de la taille de l'image */
  margin-top: 10px;              
  color: #7D482F;                /* Bronze pour cohérence avec le thème */
  font-style: italic;            /* Italique pour style calligraphique */
}

/* Lien vers le site de l'image */
.myth-image figcaption a {
  color: #7D482F;                /* Même couleur que le texte */
  text-decoration: none;         /* Aucun soulllignement par défaut donc pas de soulignage bleu classique */
}

/* Effet hover(ou quand on passe la souris) sur le lien de la légende*/
.myth-image figcaption a:hover {
  text-decoration: underline;    /* Soulignement au survol */
  color: #D8B15A;                /* Change en or au survol pour feedback visuel */
}


.lore-content {
  flex: 1.5;                     /* Prend 1.5 part et l'image 1 part  */
}

/* Le Lore couleurs effets...*/
.lore {
  margin: 0;                      /* Supprime marge par défaut*/
  max-width: 780px;               
  padding: 20px 25px;             
  font-style: italic;             /* Italique pour effet narratif/poétique */
  font-size: 1.2rem;              
  line-height: 1.8;               /* Interligne */
  color: #F4F1EC;                 /* Texte ivoire */
  background: rgba(10,10,10,0.75); /* Fond noir semi-transparent (75% d'opacité) */
  border-left: 5px solid #D8B15A; /* Bordure dorée à gauche */
  border-radius: 8px;            /* Coins arrondis */
}


/*Main Content */
/* 
 * Conteneur principal du contenu de la page
 * Limite la largeur pour une meilleure lisibilité et centrage
 */
.main-content {
  max-width: 1200px;             /* Largeur maximale */
  margin: 0 auto;                 /* Centrage horizontal automatique */
  padding: 0 20px;                /* Padding horizontal pour espacement des bords */
}

/* 
 Présente l'équipe et le projet
 */
.welcome-section {
  margin-bottom: 60px;           
}

/* 
 * Titre de section (h2)
 * Style cohérent avec soulignement doré pour thème mythologique
 */
.welcome-section h2 {
  text-align: center;             
  font-family: 'Cinzel', serif;   
  font-size: 2em;                 
  color: #2A1836;                 /* Violet foncé  */
  text-decoration: underline;     
  text-decoration-color: #CFAF56; /* Couleur or */
  text-underline-offset: 8px;    /* Espacement entre texte et ligne */
  margin-bottom: 30px;            /* Espacement avant contenu suivant */
}

/* 
 * Bloc de contenu avec fond semi-transparent
 * Style de carte élégante avec bordure dorée
 * Inspiration : tablettes de pierre avec texte gravé
 */
.content-block {
  background: rgba(255,255,255,0.7); /* Fond blanc un peu transparent(60% opaque) */
  padding: 25px;                   /* Espacement dans le cadre soit entre le cadre et le texte*/
  border-radius: 8px;              
  border: 2px solid #D8B15A;       
}

/* Paragraphes dans les blocs de contenu */
.content-block p {
  font-size: 1.2rem;              /* 120% */
  line-height: 1.8;                
  margin-bottom: 20px;             /* Espacement entre chaque paragraphe */
  color: #2A1836;                  /* Violet foncé proche du noir */
}

/* Texte en gras (strong) - mise en évidence importante */
.content-block strong {
  color: #7D482F;                 /* Bronze pour distinction visuelle */
  font-weight: 500;              
}


/*Features Section  */

 /* système de grille présenant les 4 charactéristiques principales du jeu*/
 
.features-section {
  margin-bottom: 60px;            /* Espacement après la section */
}

/* Titre de la section Features - style cohérent avec les autres h2 */
.features-section h2 {
  text-align: center;             
  font-family: 'Cinzel', serif;   
  font-size: 2em;                 
  color: #2A1836;                 /* Violet foncé */
  text-decoration: underline;     
  text-decoration-color: #CFAF56; 
  text-underline-offset: 5px;    /* Espacement ligne titre */
  margin-bottom: 50px;            /* Espacement avant la grille */
}

/* 
 * Grille responsive pour les cartes de fonctionnalités
 * Utilise CSS Grid avec auto-fit pour adaptation automatique
 * Inspiration : mosaïques grecques avec motifs répétitifs
 */
.features-grid {
  display: grid;                                  /* Système de grille CSS */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Créer des Colonnes adaptatives : minimum 250px, maximum 1 fraction */
  gap: 25px;                                      /* Espacement entre les 4 cartes */
  margin-top: 25px;                               /* Espacement après le titre */
}

/* 
 * Carte individuelle de fonctionnalité

 */
.feature-card {
  background: rgba(255,255,255,0.7);             /* Fond blanc semi-transparent (70%) */
  padding: 25px;                                  /* Espacement interne  */
  border-radius: 8px;                            
  border: 2px solid #D8B15A;                     
                      

  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animations des cartes quand la souris passe dessus en 0.3s effet ease*/
}

/* 
 * Effet hover sur les cartes - interaction utilisateur
 * La carte se soulève légèrement avec une ombre plus prononcée

 */
.feature-card:hover {
  transform: translateY(-10px);                    /* La carte monte vers le haut de 10 px*/
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);        /* Ombre; 8px= decalge vertical de l'ombre ; 20px=taille de l'ombre */
}

/* Titre de chaque carte (h3) */
.feature-card h3 {
  font-family: 'Cinzel', serif;   
  color: #7D482F;                 
  font-size: 1.3em;               
  margin-bottom: 30px;            
  border-bottom: 2px solid #D8B15A; 
  padding-bottom: 8px;           
  min-height: 3.2em;              /* Hauteur minimale pour aligner les lignes dorées (2 lignes de texte) */
  line-height: 1.5;               /* Interligne pour un meilleur espacement */
}

/* Paragraphe dans les cartes */
.feature-card p {
  color: #2A1836;                 
  line-height: 1.5;               
  margin: 0;                      
}

/* Navigation Entre les pages html */

nav {
  text-align: center;             /* Centrage de tous les liens */
  margin: 60px 0 40px;            
  padding: 20px 0;                
  border-top: 5px solid #D8B15A;  /* Ligne de séparation entre la nav et le reste de la page*/
}

nav a {
  text-decoration: none;         
  margin: 0 15px;                 /* Espacement entre liens */
  padding: 8px 15px;              /* Espacement interne pour zone cliquable confortable */
  border-bottom: 2px solid transparent; /* Ligne en dessous invisible par défaut (pour permettre effet quabnd la souris passe dessus */
  color: #2A1836;                 
  font-family: 'Cinzel', serif;   
  font-size: 1.3em;               
  transition: all 0.3s ease;      /* Transition de tous les changemenst en 0.3 s */
}

/*quand la souris passe dessus*/
nav a:hover {
  border-bottom-color: #D8B15A;
  color :#7D482F;
}