/* ════════════════════════════════════════════════════════════════════
   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 */
}
/* ════════════════════════════════════════════════════════════════════
   ── 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 */