/* ════════════════════════════════════════════════════════════════════
   CONFIGURATION GÉNÉRALE DU SITE - Image de fond 
═══════════════════════════════════════════════════════════════════════ */
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 --- STRUCTURE, LOGO, TITRE
══════════════════════════════════════════════════════════════════════ */
.barrenav1structure {  /* structure 100% Centré */
    margin: 5px; /* Espace externe autour du bloc titre */
    padding: 5px; /* Espace interne autour du contenu */
    display: flex; /* Active Flexbox pour centrer le titre */
    justify-content: center; /* Centre horizontalement le contenu */
    align-items: center; /* Centre verticalement le contenu */
    width: 100%; /* Prend toute la largeur disponible */
    text-align: center; /* Centre le texte du titre */
}
.barrenav1 {  /* Fond transparent - Flex */
    display: inline-flex; /* Crée un conteneur flex en ligne */
    flex-wrap: wrap; /* Permet le retour à la ligne du contenu */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement le contenu */
    gap: clamp(20px, 1vw, 30px); /* Espacement adaptable entre les éléments */
    padding: 0.3em 0.6em; /* Espacement interne léger */
    font-weight: 500; /* Texte en gras */
    width: fit-content; /* Largeur auto selon le contenu */
    height: fit-content; /* Hauteur auto selon le contenu */
    line-height: 1; /* Hauteur de ligne compacte */
}
.barrenav1logo { /* logo */
    height: 1em; /* Taille du logo proportionnelle au texte */
    width: auto; /* Garde les proportions originales */
    display: block; /* Permet un centrage plus précis */
}
.barrenav1 > a:not(.bouton1):not(.bouton1fix) {  /* --- règle générale pour les <a> dans le html --- */
    color: #e0f806;
    font-weight: 800; /* Texte en gras */
    font-size: clamp(16px, 5vw, 40px); /* ceci s'appliquera au titre / gros lien */
    text-shadow: 2px 2px 0 black, -2px 2px 0 black, 2px -2px 0 black, -2px -2px 0 black;
    text-decoration: none; /* Supprime le soulignement */
    line-height: 1; /* Réduit l’espace vertical */
}
/* ════════════════════════════════════════════════════════════════════
   BOUTONS - styles complets
══════════════════════════════════════════════════════════════════════ */
/* Styles communs aux boutons */
.bouton1, .bouton1fix {
    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 */
}
/* Boutons "classiques" */
.bouton1 {
    background: rgba(250, 247, 247, 0.8);
    color: rgb(8, 8, 8);  /* couleur du texte du bouton */
    font-size: 1.2rem;              /* taille du texte des boutons */
}
/* Bouton fixe / principal */
.bouton1fix {
    background: rgba(255, 255, 0, 0.9);
    color: #000;
    font-size: 1.2rem;              /* taille du texte des boutons */
}
/* Hover — applique l'effet au lien entier */
.bouton1:hover {
    color: rgb(5, 5, 5);
    background: rgba(255, 255, 0, 0.9);
}
/* ════════════════════════════════════════════════════════════════════
 --- MAIN --- GLOBAL 0 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é
═══════════════════════════════════════════════════════════════════════ */
.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(12px, 4vw, 20px); /* 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 */