/* Styles généraux pour l'ensemble du document */
body {
  margin: 0;                          /* Supprime les marges par défaut du navigateur */
  font-family: 'Segoe UI', sans-serif; /* Définit la police d'écriture */
  background-color: #0A1A2F;          /* Couleur de fond bleu très foncé */
  color: #FFFFFF;                     /* Couleur du texte par défaut en blanc */
}

/* Barre de menu latérale gauche */
.menu {
  width: 320px;                       /* Largeur fixe du menu */
  background-color: #0F2540;          /* Couleur de fond légèrement plus claire que le body */
  height: 100vh;                      /* Occupe toute la hauteur de l'écran (100 Viewport Height) */
  padding-top: 40px;                  /* Espace interne en haut du menu */
  position: fixed;                    /* Reste fixe à l'écran même lors du défilement */
  border-right: 2px solid #D4AF37;    /* Ligne de séparation dorée à droite */
  display: flex;                      /* Active le mode Flexbox pour aligner les éléments */
  flex-direction: column;             /* Aligne les éléments verticalement (logo, liste, etc.) */
  align-items: center;                /* Centre les éléments horizontalement dans le menu */
  top: 0;                             /* Colle le menu au haut de la page */
  left: 0;                            /* Colle le menu à gauche de la page */
  z-index: 1000;                      /* S'assure que le menu passe par-dessus le reste du contenu */
}

/* Titre de bienvenue spécifique */
.welcome-title {
  max-width: 960px;                   /* Largeur maximale pour ne pas être trop étiré */
  margin: 0 auto 20px auto;           /* Centre le bloc horizontalement (auto) et ajoute 20px en bas */
  text-align: center;                 /* Centre le texte à l'intérieur du bloc */
  color: #D4AF37;                     /* Couleur de texte dorée */
  border-bottom: 2px solid #A67ECF;   /* Ligne décorative mauve en dessous */
  padding-bottom: 10px;               /* Espace entre le texte et la bordure mauve */
}

/* Liste à l'intérieur du menu */
.menu ul {
  list-style: none;                   /* Supprime les puces par défaut (points) */
  padding: 0;                         /* Enlève le retrait par défaut de la liste */
  margin: 0;                          /* Enlève les marges par défaut */
  width: 100%;                        /* La liste prend toute la largeur du menu */
}

.menu li {
  margin: 20px 0;                     /* Espace de 20px au-dessus et en-dessous de chaque item */
  text-align: center;                 /* Centre les liens dans la liste */
}

/* Liens du menu */
.menu a {
  color: #FFFFFF;                     /* Texte blanc */
  text-decoration: none;              /* Supprime le soulignement par défaut */
  font-size: 18px;                    /* Taille du texte */
  transition: color 0.3s ease;        /* Animation douce de 0.3s pour le changement de couleur */
  display: block;                     /* Permet au lien de prendre toute la largeur cliquable */
  padding: 10px 0;                    /* Espace cliquable au-dessus et en-dessous */
  position: relative;                 /* Nécessaire pour positionner la barre d'animation (::after) */
}

/* État survolé (hover) et page active */
.menu a:hover,
.menu a.active {
  color: #7EC8E3;                     /* Change en bleu clair au survol */
}

/* Création de la barre animée sous les liens */
.menu a::after {
  content: '';                        /* Obligatoire pour créer un élément virtuel */
  position: absolute;                 /* Positionnement par rapport au lien parent */
  width: 0;                           /* Commence avec une largeur de 0 (invisible) */
  height: 2px;                        /* Épaisseur de la barre */
  bottom: 0;                          /* Placée tout en bas du lien */
  left: 50%;                          /* Part du milieu */
  background-color: #7EC8E3;          /* Couleur de la barre */
  transition: width 0.3s ease, left 0.3s ease; /* Animation fluide de l'étalement */
}

/* Animation de la barre au survol */
.menu a:hover::after,
.menu a.active::after {
  width: 100%;                        /* Prend toute la largeur au survol */
  left: 0;                            /* Se déplace vers la gauche pour couvrir tout le lien */
}

/* Logo dans le menu */
.logo {
  width: 100px;                       /* Taille du logo */
  margin-bottom: 30px;                /* Espace sous le logo */
  filter: drop-shadow(0 0 3px #D4AF37); /* Ajoute une lueur dorée autour de l'image */
}

/* Zone de contenu principal */
.content {
  max-width: 960px;                   /* Largeur lisible pour le texte */
  margin: 40px auto 0 auto;           /* Centre le bloc et ajoute de l'espace en haut */
  padding: 40px;                      /* Espace interne autour du texte */
  background-color: #FFFFFF;          /* Fond blanc pour le contraste */
  color: #0A1A2F;                     /* Texte bleu foncé pour la lecture sur fond blanc */
  box-sizing: border-box;             /* Inclut le padding dans le calcul de la largeur totale */
  min-height: 100vh;                  /* S'assure que le fond blanc descend jusqu'en bas */
  display: flex;                      /* Permet d'organiser les sections internes */
  flex-direction: column;             /* Organise le contenu du haut vers le bas */
  gap: 40px;                          /* Espace entre les différents blocs de contenu */
  position: relative;                 /* Pour la gestion des couches (z-index) */
  z-index: 1;                         /* Reste en dessous des barres fixes si nécessaire */
}

.main-section {
  flex: 2;                            /* Prend deux fois plus de place proportionnellement */
  background-color: transparent;      /* Pas de couleur de fond propre */
}

/* Barre latérale droite fixe (ex: widgets ou infos) */
.right-fixed {
  position: fixed;                    /* Fixé à l'écran */
  right: 0;                           /* Aligné à droite */
  top: 0;                             /* Aligné en haut */
  width: 260px;                       /* Largeur de la barre de droite */
  height: 100vh;                      /* Toute la hauteur */
  background-color: #0F2540;          /* Même fond que le menu gauche */
  border-left: 2px solid #D4AF37;     /* Ligne dorée à gauche cette fois */
  padding: 40px 20px;                 /* Espace interne */
  box-sizing: border-box;             /* Empêche le padding d'élargir le bloc */
  overflow-y: auto;                   /* Ajoute une barre de défilement si le texte est trop long */
  color: #FFFFFF;                     /* Texte blanc */
  z-index: 1000;                      /* Même niveau de priorité que le menu gauche */
}

/* Titres H1 et H2 */
.right-fixed h2, h1 {
  color: #D4AF37;                     /* Couleur dorée */
  margin-top: 0;                      /* Supprime l'espace inutile au-dessus */
  border-bottom: 2px solid #A67ECF;   /* Soulignement mauve */
  padding-bottom: 10px;               /* Espace sous le texte */
}

/* Listes standards dans le contenu */
ul {
  padding-left: 20px;                 /* Décale les puces vers la droite */
  margin: 0;
  color: #0A1A2F;                     /* Texte sombre */
}

li {
  margin-bottom: 10px;                /* Espace entre chaque point de la liste */
}

/* Liens généraux (hors menu) */
a {
  color: #D4AF37;                     /* Couleur dorée */
  text-decoration: none;              /* Pas de soulignement */
  font-weight: bold;                  /* Texte en gras */
  transition: color 0.3s ease;
}

a:hover {
  color: #7EC8E3;                     /* Change en bleu clair au survol */
}

/* Pied de page */
.footer {
  max-width: 960px;
  margin: 20px auto 40px auto;
  padding: 15px 20px;
  background-color: #FFFFFF;
  color: #0A1A2F;
  border-top: 2px solid #A67ECF;      /* Ligne mauve au-dessus */
  font-size: 14px;                    /* Texte un peu plus petit */
  text-align: center;
  box-sizing: border-box;
}

.footer a {
  color: #0A1A2F;                     /* Liens noirs/bleus foncés dans le footer */
  margin: 0 8px;                      /* Espace horizontal entre les liens */
}

/* RESPONSIVE : Adaptations pour écrans de moins de 1024px (tablettes/mobiles) */
@media (max-width: 1024px) {
  body {
    display: flex;
    flex-direction: column;           /* Empile tout verticalement */
    align-items: stretch;             /* Étire les éléments sur toute la largeur */
  }

  .menu, .right-fixed {
    position: relative;               /* Ne sont plus fixes, défilent avec la page */
    width: 100%;                      /* Prennent toute la largeur */
    height: auto;                     /* Hauteur selon le contenu */
    border: none;                     /* Supprime les bordures latérales */
    border-bottom: 2px solid #D4AF37; /* Ajoute une séparation horizontale */
    padding: 20px 0;
  }

  .content {
    margin: 0;                        /* Supprime les marges extérieures */
    max-width: 100%;                  /* Utilise tout l'espace */
    padding: 20px;
    min-height: auto;                 /* La hauteur s'adapte au contenu */
  }

  .main-section {
    flex: none;                       /* Désactive le ratio de flexibilité */
  }
}