/* ════════════════════════════════════════════════════════════════════
   CONFIGURATION GÉNÉRALE DU SITE - Image de fond - Police
═══════════════════════════════════════════════════════════════════════ */
body {
  background: url(../images/fondusite01.jpg) no-repeat fixed; /* image de fond fixe, non répétée */
  background-color: #fcfbfb; /* Définit la couleur de fond principale */
  background-size: cover; /* L’image couvre tout l’écran sans déformation */
  font-family: "Lora", serif; /* Définit la police (style d'écriture) principale du site */
  text-align: center; /* Centre le texte par défaut */
  color: #070707; /* Couleur de texte principale */
  margin: 0; /* Supprime les marges par défaut du navigateur */
  padding: 0; /* Supprime tous les espacements internes par défaut du navigateur */
  width: 100%; height: 100%;
}
* {
  box-sizing: border-box; /* Inclut bordure et padding dans le calcul de la taille */
  margin: 0; /* Supprime toutes les marges par défaut */
  padding: 0; /* Supprime tous les espacements internes par défaut */
}
/* ════════════════════════════════════════════════════════════════════
 BARRE DE NAVIGATION --- LOGO, TITRE --- Responcive
══════════════════════════════════════════════════════════════════════ */
.navtitrestructure {  /* structure du module */
  margin: 5px;              /* Ajoute un espace extérieur autour du bloc */
  padding: 5px;             /* Ajoute un espace intérieur autour du contenu */
  display: flex;            /* Active Flexbox pour organiser les éléments */
  justify-content: center;  /* Centre tout horizontalement */
  align-items: center;      /* Centre tout verticalement */
  width: 100%;              /* Le conteneur prend toute la largeur */
  text-align: center;       /* Centre le texte (utile si un texte seul apparaît) */
}
.navtitre {   /* réglage du module */
  display: flex;                      /* Conteneur flex pour aligner logo + titre */
  flex-wrap: wrap;                    /* Permet au contenu de passer à la ligne si manque d’espace */
  justify-content: center;            /* Centre horizontalement les éléments internes */
  align-items: center;                /* Centre verticalement les éléments internes */
  gap: clamp(20px, 1vw, 30px);        /* Espace adaptatif entre logo et titre (responsive) */
  padding: 0.3em 0.6em;               /* Légère marge interne pour aérer le bloc */
  font-weight: 500;                   /* Légère mise en gras du texte contenu */
  width: fit-content;                 /* S'adapte exactement à la taille du contenu */
  line-height: 1;                     /* Réduit l’espace vertical inutile autour du texte */
}
.navtitrelogo {  /* réglage du logo */
  height: 1em;         /* Taille du logo proportionnelle à la taille du texte */
  width: auto;         /* Garde les proportions originales de l'image */
  display: block;      /* Évite que l’image crée un petit espace sous elle */
}
.navtitre > a { /* Style général des liens dans .navtitre */
  color: #e0f806;       /* Couleur jaune-vert fluorescente du texte */
  font-weight: 800;     /* Très gras pour donner de l’importance au titre */
  font-size: clamp(20px, 5vw, 40px);  /* Taille adaptative du titre selon l'écran */
  text-shadow:          /* Contour noir pour améliorer la lisibilité */
      2px 2px 0 black,
     -2px 2px 0 black,
      2px -2px 0 black,
     -2px -2px 0 black;
  text-decoration: none; /* Retire le soulignement du lien */
  line-height: 1;        /* Supprime l’espace vertical inutile */
}
/* ════════════════════════════════════════════════════════════════════
 BARRE DE NAVIGATION — CONTENEUR DES BOUTONS --- Responcive
══════════════════════════════════════════════════════════════════════ */
.navboutonstructure {   /* Structure générale   */
  margin: 5px;                 /* Espace autour du bloc navigation   */
  padding: 5px;                /* Espace interne autour du contenu   */
  display: flex;               /* Active Flexbox pour centrage       */
  justify-content: center;     /* Centre horizontalement              */
  align-items: center;         /* Centre verticalement                */
  width: 100%;                 /* Prend toute la largeur disponible   */
  text-align: center;          /* Centre le texte si nécessaire        */
}
.navbouton {   /* CONTENEUR DES BOUTONS  */
  display: inline-flex;        /* Met les éléments sur une seule ligne (si possible) */
  flex-wrap: wrap;             /* Permet le retour à la ligne sur petits écrans      */
  justify-content: center;     /* Centre les boutons horizontalement                 */
  align-items: center;         /* Centre verticalement                               */
  gap: clamp(20px, 1vw, 30px); /* Espace réactif entre boutons (20→30px)             */
  padding: 0.3em 0.6em;        /* Espace interne léger                               */
  font-weight: 500;            /* Légèrement gras                                    */
  width: fit-content;          /* S'adapte au contenu                                */
  height: fit-content;         /* Idem pour la hauteur                               */
  line-height: 1;              /* Hauteur de ligne compacte                          */
}
/* ═════════ BOUTONS DE LA BARRE DE NAVIGATION ═════════ */
.bouton1, .bouton1fix {  /* BOUTONS — Base commune (style partagé)  */
  display: inline-flex;        /* Permet centrage interne + zone cliquable complète  */
  align-items: center;         
  justify-content: center;

  padding: 3px 16px;           /* Taille du bouton (fixe)                             */
  border-radius: 8px;          /* Coins arrondis                                      */

  font-weight: 700;            /* Texte plus visible                                  */
  text-align: center;          
  text-decoration: none;       /* Retire le soulignement des liens                    */

  border: 1px solid #000;      /* Bordure noire                                       */
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8); /* Ombre forte                          */

  cursor: pointer;             /* Curseur “main”                                      */
  transition: all 0.25s ease-in-out; /* Animation sur hover                            */

  font-size: clamp(12px, 2.5vw, 18px); /* Taille responsive (mobile → grand écran)    */
}
.bouton1 {  /* BOUTON CLASSIQUE  */
  background: rgba(250, 247, 247, 0.8); /* Gris très clair légèrement transparent     */
  color: rgb(8, 8, 8);                  /* Texte noir/gris foncé                      */
}
.bouton1fix { /* BOUTON FIXE / MISE EN ÉVIDENCE  */
  background: rgba(255, 255, 0, 0.9); /* Jaune opaque                               */
  color: #000;                        /* Texte noir                                 */
}
.bouton1:hover { /* EFFET AU SURVOL (hover)  */
  background: rgba(255, 255, 0, 0.9);  /* Couleur du bouton fix au hover             */
  color: rgb(5, 5, 5);                 /* Texte légèrement plus foncé                */
}/* ════════════════════════════════════════════════════════════════════
--- MAIN --- GLOBAL --- TOUT LE MAIN
═══════════════════════════════════════════════════════════════════════ */
main#main-content {
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box; /* pour que le padding soit inclus dans la largeur */
}/* ════════════════════════════════════════════════════════════════════
--- MAIN --- TITRE de la page centré --- Responcive
═══════════════════════════════════════════════════════════════════════ */
.pagetitrestructure {
  margin-top: 15px; /* espace plus grand au-dessus du message */
  display: flex;        /* garde tout sur une ligne, mais reste inline */
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;           /* empêche le wrap */
  padding: 0.5rem 0;
  gap: 10px;                   /* espace entre texte et flèches */
}
.pagetitre {
  font-size: clamp(10px, 2.5vw, 18px); /* Taille de texte responsive */
  display: inline-block;       /* texte reste inline */
  overflow: hidden;
  text-overflow: ellipsis;     /* si texte trop long, on coupe */
  padding: 5px 50px;
  background: rgb(5, 5, 5, 0.5);
  border: 1px solid #000000;
  border-radius: 12px;
  font-family: 'Lora', serif; /* même écriture élégante */
  color: #e0f806; 
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
}
/* ════════════════════════════════════════════════════════════════════
--- MAIN --- BLOC PRESENTATION
═══════════════════════════════════════════════════════════════════════ */
.pagepresentationstructure {
  margin-top: 15px; /* espace plus grand au-dessus du message */
  display: inline-flex;        /* garde tout sur une ligne, mais reste inline */
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;           /* empêche le wrap */
  padding: 0.5rem 0;
  gap: 10px;                   /* espace entre texte et flèches */
}
.pagepresentation {
  margin-top: 15px; /* espace plus grand au-dessus du message */
  margin-bottom: 15px; /* augmente la marge en bas */
  padding: 20px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  max-width: 800px;
  font-family: 'Lora', serif; /* même écriture élégante */
  color: #070707;
  border: 1px solid #000000;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
}
.pagepresentation p{
  font-size: 1.5rem; /* Taille de texte normale */
}
/* ════════════════════════════════════════════════════════════════════
--- MAIN --- BOUTON JAUNE
═══════════════════════════════════════════════════════════════════════ */
.boutonjaune {
  background: rgba(255, 255, 0, 0.8);
  color: rgb(8, 8, 8);  /* couleur du texte du bouton */
  font-size: 1.2rem;              /* taille du texte des boutons */
  display: inline-flex;          /* rend la zone cliquable et centrée */
  padding: 3px 16px;    /* force le padding */
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-align: center;
  border: 1px solid #000000;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  text-decoration: none;         /* enlève le soulignement */
}




/* === Tableaux CODE html === */
.blocguidecss {
  margin: 20px auto;          /* ✅ centre la section horizontalement */
  padding: 2px;
  width: 80%;                 /* ✅ même largeur que tes autres blocs */
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* garde le contenu aligné à gauche */
  text-align: left;
}
.blocguidecsstexte {
      font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #222;
      padding: 2rem;
      line-height: 1.6;
}
.blocguidecsstexte h2 {
      color: #0069d9;
      margin-top: 2rem;
      text-align: center;
}
.blocguidecsstexte table {
      width: 95%;
      margin: 1.5rem auto;
      border-collapse: collapse;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.blocguidecsstexte th, .blocarticle1texte td {
      border: 1px solid #e0e0e0;
      padding: 10px 14px;
      text-align: left;
      vertical-align: top;
}
.blocguidecsstexte th {
      background-color: #007bff;
      color: white;
      text-transform: uppercase;
      font-size: 0.9rem;
      letter-spacing: 0.5px;
}
.blocguidecsstexte tr:nth-child(even) {
      background-color: #f9f9f9;
    }
.blocguidecsstexte code {
      background-color: #eef;
      padding: 2px 4px;
      border-radius: 4px;
      font-family: monospace;
}
.blocguidecsstexte .section {
      margin-bottom: 2rem;
      background: #fff;
      border-radius: 12px;
      padding: 1rem 0.5rem;
      box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}
/* --- Version mobile --- */
@media (max-width: 768px) {
  .blocguidecsstexte table {
      width: 100%;
      font-size: 0.9rem;
  }
  }

/* ════════════════════════════════════════════════════════════════════
   ── FOOTER ── BANDEAU DE FIN DE PAGE
═══════════════════════════════════════════════════════════════════════ */
.bandofinstructure {
  margin: 2px; padding: 2px; /* Petit espacement interne et externe */
  width: 100%; /* Occupe toute la largeur */
  display: flex; /* Active Flexbox */
  align-items: center; /* Centre verticalement les enfants */
  flex-direction: column; /* Empile verticalement */
}
.bandofin {
  background: rgba(10, 10, 10, 0.8); /* Fond sombre semi-transparent */
  width: 60%; /* Largeur fixe relative au parent */
  padding: 10px; /* Espacement interne */
  text-align: center; /* Texte centré */
  font-weight: bold; /* Texte en gras */
  display: flex; /* Flex pour aligner contenus */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.8); /* Ombre portée */
  border-radius: 10px; /* Bords arrondis */
  color: rgb(247, 243, 243); /* Couleur texte claire */
}
/* ════════════════════════════════════════════════════════════════════
 ── Bouton : Retour en haut de page ── scroll contrôlée par JS
═══════════════════════════════════════════════════════════════════════ */
.bouton-retour {
  position: fixed; /* Fixé à l'écran */
  bottom: 25px; /* Distance du bas */
  right: 25px; /* Distance du bord droit */
  width: 40px; /* Largeur du bouton */
  height: 40px; /* Hauteur du bouton */
  opacity: 0; /* Caché par défaut */
  pointer-events: none; /* Désactive les clics tant qu’il est invisible */
  transition: opacity .25s ease, transform .25s ease; /* Animation d’apparition/disparition */

  cursor: pointer; /* Curseur main au survol */
  z-index: 1000; /* Au-dessus des autres éléments */
  border-radius: 8px; /* Coins arrondis */
}
.bouton-retour.visible {
  opacity: 0.7; /* Visible */
  pointer-events: auto; /* Clics activés */
}
.bouton-retour:hover {
  opacity: 1; /* Complètement visible au survol */
  transform: translateY(-4px); /* Léger déplacement vers le haut */
}
.bouton-retour img {  /* Images interne du bouton */
  width: 100%; /* S'adapte à la taille du bouton */
  height: 100%; /* S'adapte à la taille du bouton */
  position: absolute; /* Superposées */
  transition: opacity .25s ease; /* Animation de changement d’image */
}
.img-normal { opacity: 1; } /* Image normale visible */
.img-hover  { opacity: 0; } /* Image hover cachée */
.bouton-retour:hover .img-normal { opacity: 0; } /* Disparaît au survol */
.bouton-retour:hover .img-hover  { opacity: 1; } /* Apparaît au survol */