/* ════════════════════════════════════════════════════════════════════
 CONFIGURATION GÉNÉRALE DU SITE
 - Image de fond
 - Police et alignement global
 - Réinitialisation des marges
═══════════════════════════════════════════════════════════════════════ */
* {
    box-sizing: border-box; /* → Les bordures et marges sont incluses dans la taille totale */
    margin: 0;
    padding: 0;
}
body {
    background: url(images/fondusite01.jpg) no-repeat center/cover fixed;
    /* ↑ Propriétés importantes :
       - no-repeat : empêche la répétition du fond
       - center/cover : garde le centrage et couvre toute la fenêtre
       - fixed : le fond reste fixe au défilement */
    background-color: #fcfbfb; /* couleur de secours si l’image ne charge pas */
    font-family: "Lora", serif;
    text-align: center;
    color: #070707;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
/* ════════════════════════════════════════════════════════════════════
  --- HEADER --- BARRE MENU DE BOUTONS
═══════════════════════════════════════════════════════════════════════ */
.barremenu1structure {  /* structure 100% Centré */
    margin: 5px; /* Espace externe autour du bloc titre */
    padding: 1px; /* 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 */
}
.barremenu1 {  /* 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(10px, 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 */
}
.barremenu1logo {  /* Taille du logo proportionnelle au texte */
    height: 1em; /* Taille du logo proportionnelle au texte */
    width: auto; /* Garde les proportions originales */
    display: block; /* Permet un centrage plus précis */
}
.barremenu1 a { /* Taille de texte responsive */
    color: #e0f806; 
    font-size: clamp(16px, 5vw, 40px); /* Taille de texte responsive */
    text-decoration: none; /* Supprime le soulignement */
    line-height: 1; /* Réduit l’espace vertical */
}
.boutonmenu1 { /* structure des boutons */
    padding: 6px 16px; /* Espace interne */
    background: rgba(255, 255, 255, 0.9); /* Fond blanc semi-transparent */
    border-radius: 10px; /* Coins arrondis */
    font-weight: 600; /* Texte semi-gras */
    color: #000; /* Texte noir */
    text-align: center; /* Centre le texte */
    cursor: pointer; /* Curseur main au survol */
    transition: all 0.25s ease-in-out; /* Animation douce au survol */
    text-decoration: none;      /* <- éviter soulignement */
    display: inline-block;      /* <- rend toute la zone cliquable */
    font-size: 1rem;            /* taille du texte */}
.boutonmenu1 a { /* réglage du titre des boutons */
    font-size: 1rem; /* Taille de texte normale */
    text-decoration: none; /* Supprime le soulignement */
    color: inherit; /* Hérite de la couleur du parent */
    display: inline-block; /* Rendre le lien entièrement cliquable */
}
.boutonmenu1:hover { /* réglage de la souris sur les boutons */
    background-color: #90fc04; /* Change de couleur au survol */
    transform: scale(1.05); /* Zoom léger */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Ajoute une ombre douce */
}
.boutonmenu1fix { /* réglage du bouton fix */
    padding: 6px 16px; /* Espace interne */
    background: rgba(172, 245, 2, 0.9); /* Fond vert vif semi-transparent */
    border-radius: 10px; /* Coins arrondis */
    font-weight: 600; /* Texte semi-gras */
    color: #000; /* Texte noir */
    text-align: center; /* Centre le texte */
    cursor: pointer; /* Curseur cliquable */
    transition: all 0.25s ease-in-out; /* Animation fluide */
}
.boutonmenu1fix a { /* réglage du titre du bouton fix */
    font-size: 2rem; /* Taille plus grande pour bouton principal */
    text-decoration: none; /* Pas de soulignement */
    color: inherit; /* Même couleur que le parent */
    display: inline-block; /* Rend toute la zone cliquable */
}
/* ════════════════════════════════════════════════════════════════════
    --- MAIN --- CONTENU PRINCIPAL
═══════════════════════════════════════════════════════════════════════ */
main {
  margin-top: 10px; /* ✅ espace sous la barre (fixe, évite le chevauchement) */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
/* ════════════════════════════════════════════════════════════════════
 --- MAIN --- TITRE de la page centré
═══════════════════════════════════════════════════════════════════════ */
.pagetitrepage1 {
    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 */
}
.pagetitre1texte {
    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: #FFFF00;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.8);
}
.pagetitre1 img {
    display: inline-block;       /* flèches restent inline */
    vertical-align: middle;      /* alignement vertical avec le texte */
    height: 2em;
}
.pagepresentation {
    margin-top: 15px; /* espace plus grand au-dessus du message */
    margin-bottom: 40px; /* 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);
}