/* ════════════════════════════════════════════════════════════════════
 CONFIGURATION GÉNÉRALE DU SITE - Image de fond
═══════════════════════════════════════════════════════════════════════ */
body {
	background-color: #0B0B0B; /* couleur de secours si l’image ne charge pas */
	background: url(sitebase/plancher-bois.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 */
	margin: 0; /* Supprime les marges ext par défaut du navigateur */
    padding: 0; /* Supprime les marges int par défaut du navigateur */
    width: 100%;
    height: 100%;
    background-size: cover; /* L’image couvre tout l’écran sans déformation */
    font-family: "Lora", serif; /* Définit la police principale du site */
    text-align: center; /* Centre le texte par défaut */
    color: #070707; /* Couleur de texte principale */
}
* {
    box-sizing: border-box; /* → Les bordures et marges sont incluses dans la taille totale */
    margin: 0; /* Supprime toutes les marges par défaut */
    padding: 0; /* Supprime tous les espacements internes par défaut */
	font-family: 'Allerta Stencil', sans-serif;
}
/* ════════════════════════════════════════════════════════════════════
  --- Barre navig D'IMAGES Petite --- 
═══════════════════════════════════════════════════════════════════════ */
.barnavphotostructure {   /* structure 100% Centré */
    margin: 0;   /* Espace externe autour du bloc */
    padding: 0;  /* Espace interne autour du contenu */
    width: 100%;   /* occupe toute la largeur du conteneur */
    display: flex;  /* active flexbox pour la disposition interne */
    align-items: center;  /* Centre verticalement le contenu */
    text-align: center; /* centre le texte pour tous les éléments internes */
    box-sizing: border-box;    /* inclut padding/border dans les calculs de taille */
    flex-direction: column;  /* empile les éléments verticalement */
}
.barnavphoto {    /* structure du BOX */
    margin: 0;                 /* supprime les marges externes */
    padding: 10px 5px;         /* espace interne haut/bas 10px, gauche/droite 5px */
    display: flex;             /* organise les images dans un même flux flexible */
    justify-content: center;   /* centre horizontalement toutes les images */
    flex-wrap: wrap;           /* autorise les images à passer sur plusieurs lignes si nécessaire */
    gap: 10px;                 /* espace uniforme entre les images (plus propre que margin) */
}
.barnavphoto img {   /* Images des boutons de navigation */
    width: clamp(80px, 20vw, 180px);  
    /* - largeur minimum : 80px
       - largeur idéale proportionnelle à la taille de l’écran : 20vw
       - largeur maximale : 180px
       Cela rend les images réellement responsives */
    height: auto;              /* ajuste la hauteur automatiquement pour garder les proportions */
    margin: 0;                 /* retiré car 'gap:' gère les espaces */
    border: 1px solid #000;    /* bordure noire fine autour de chaque image */
    border-radius: 10px;       /* angles arrondis (forme plus douce et moderne) */
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.9); 
    display: block;            /* empêche l’espace blanc sous les images */
    cursor: pointer;           /* affiche le curseur "main" pour indiquer un lien */
    transition: 
        transform 0.2s ease,   /* animation douce pour l’effet zoom */
        box-shadow 0.2s ease;  /* animation douce pour l’ombre */
}
.barnavphoto img:hover {   /* Effet survol  */
    transform: scale(1.03);
    box-shadow: 6px 6px 10px rgba(0, 0, 0, 1);  
}
/* ════════════════════════════════════════════════════════════════════
  --- Barre navig LOGO + TITRE --- 
═══════════════════════════════════════════════════════════════════════ */
.barnavtextestructure {  /* structure 100% Centré */
    margin: 5px; /* Espace externe autour du bloc */
    padding: 15px; /* Espace interne autour du contenu */
    width: 100%; /* Prend toute la largeur disponible */
    display: flex; /* active flexbox pour la disposition interne */
    align-items: center; /* Centre verticalement le contenu */
    justify-content: center; /* Centre horizontalement le contenu */
    text-align: center; /* Centre le texte du titre */
}
.barnavtexte {  /* 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.1em 0.1em; /* 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 */
}
.barnavtextelogo {  /* 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 */
}
.barnavtexte a { /* Taille de texte responsive */
	padding: 5px;
	background: rgba(250, 249, 249, 0.6);
	border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.9);
	border-radius: 10px;    color: #0c0c0c; 
    font-size: clamp(16px, 5vw, 30px); /* Taille de texte responsive */
    text-decoration: none; /* Supprime le soulignement */
    line-height: 1; /* Réduit l’espace vertical */
}
/* ════════════════════════════════════════════════════════════════════
   BANDEAU de BOUTONS TEXTE --- Structure générale + flex + responsive + corrections
═══════════════════════════════════════════════════════════════════════ */
.barremenu1structure {   /* ▬▬▬ Structure du conteneur principal : centré, flexible ▬▬▬ */
    margin: 5px;               /* Espace externe */
    padding: 1px;              /* Espace interne */
    display: flex;             /* Activation de Flexbox */
    justify-content: center;   /* Centrage horizontal */
    align-items: center;       /* Centrage vertical */
    width: 100%;               /* Occupe toute la largeur */
    text-align: center;        /* Centrage du texte */
}
.barremenu1 { /* ▬▬▬ Bandeau interne contenant les boutons ▬▬▬ */
    display: inline-flex;        /* Flex en ligne */
    flex-wrap: wrap;             /* Autorise retour à la ligne */
    justify-content: center;     /* Centre horizontalement */
    align-items: center;         /* Centre verticalement */
    gap: clamp(10px, 1vw, 30px); /* Espacement responsive */
    padding: 0.3em 0.6em;        /* Espace interne */
    width: fit-content;          /* S'adapte au contenu */
    height: fit-content;         /* idem */
    font-weight: 500;            /* Semi-gras */
    line-height: 1;    /* Ligne compacte */
}
.barremenu1 a {  /* ▬▬▬ Style général des liens du bandeau ▬▬▬ */
    color: #e0f806;                 /* Couleur texte */
    font-size: clamp(16px, 5vw, 40px); /* Responsive */
    text-decoration: none;          /* Pas de soulignement */
    line-height: 1;
}
/* ═══   BOUTONS — bouton normal / actif / jaune  ═════ */
.boutonmenu1, .boutonmenu2, .boutonmenu1fix {  /* --- Style commun aux boutons --- */
    padding: 6px 16px;                 /* Espace interne */
    border: 1px solid #000;            /* Bordure noire */
    box-shadow: 5px 5px 7px rgba(0,0,0,0.9); /* Ombre forte */
    border-radius: 10px;               /* Coins arrondis */
    font-weight: 600;                  /* Texte semi-gras */
    color: #000;                       /* Texte noir */
    text-align: center;                /* Centrage du texte */
    cursor: pointer;                   /* Curseur main */
    transition: all 0.25s ease-in-out; /* Animation fluide */
    text-decoration: none;             /* Aucun soulignement */
    display: inline-block;             /* Bloc cliquable */
    font-size: 1rem;
}
.boutonmenu1 {   /* --- Bouton normal (fond blanc) --- */
    background: rgba(255, 255, 255, 0.9);
}
.boutonmenu2 {   /* --- Bouton jaune (barde jaune) --- */
    background: rgba(255, 255, 0, 0.9);
}
.boutonmenu1fix {   /* --- Bouton fix (bouton principal mis en avant) --- */
    background: rgba(255, 255, 0, 0.9); /* même style que boutonmenu2 */
}
/* ═════   LIENS DES BOUTONS — taille du texte + responsive    ════ */
.boutonmenu1 a, .boutonmenu2 a {  /* --- Lien interne d’un bouton classique --- */
    color: inherit;                        /* Utilise couleur bouton */
    text-decoration: none;
    display: inline-block;
    font-size: clamp(14px, 3.5vw, 15px);   /* Responsive fin */
}
.boutonmenu1fix a {  /* --- Lien interne du bouton principal (fix) --- */
    color: inherit;
    display: inline-block;
    text-decoration: none;
    font-size: clamp(18px, 4vw, 32px);     /* Responsive + important */
}
.boutonmenu1:hover {  /* --- INTERACTIONS — Hover / souris --- */
    background-color: #FFFF00; /* Jaune vif */
    transform: scale(1.05);    /* Zoom */
}
/* ════════════════════════════════════════════════════════════════════
   --- TITRE de la page (bannière)
═══════════════════════════════════════════════════════════════════════ */
.bloctitrestructure {  /* structure du MODULE */
    margin: 0;                  /* aucun espace externe autour du bloc */
    padding: 0;                 /* aucun espace interne */
    width: 100%;                /* occupe toute la largeur du conteneur parent */
    display: flex;              /* active flexbox pour organiser le contenu */
    align-items: center;        /* centre verticalement tous les éléments enfants */
    text-align: center;         /* centre le texte à l’intérieur des éléments */
    box-sizing: border-box;     /* inclut padding/border dans la taille totale */
    flex-direction: column;     /* empile les éléments verticalement */
}
.bloctitre {  /* Encadré contenant un titre ou une image, avec ombre et fond clair */
    background: rgba(250, 249, 249, 0.6); /* léger fond blanc transparent */
    border: 1px solid #000;               /* fine bordure noire */
    box-shadow: 5px 5px 5px rgba(0,0,0,0.9); /* ombre forte et sombre */
    padding: 5px 12px;                   /* espace interne autour du contenu */
    margin: 10px auto;                   /* espace externe + centré horizontalement */
    width: auto;                         /* largeur s'adapte au contenu */
    max-width: 90%;                      /* limite la largeur max (responsive) */
    border-radius: 10px;                 /* coins arrondis */
    display: flex;                       /* flexbox pour centrer parfaitement */
    justify-content: center;             /* centre horizontalement */
    align-items: center;                 /* centre verticalement */
    flex-wrap: wrap;                     /* permet le retour à la ligne */
    text-align: center;                  /* centre le texte interne */
    word-wrap: break-word;               /* casse les mots trop longs */
    overflow-wrap: break-word;           /* version moderne de word-wrap */
}
.bloctitre a {   /* LIEN texte dans la bannière */
    color: #0a0a0a;            /* texte noir-gris foncé */
    font-size: 35px;           /* grande taille pour mise en avant */
    text-decoration: none;     /* retire le soulignement */
}
.bloctitre h1 {  /* TITRE H1 de la bannière responsif */
    margin: 0;  /* supprime l’espace vertical par défaut */
    font-size: clamp(20px, 5vw, 25px); /* taille responsive : min 20px, max 25px */
}
/* ════════════════════════════════════════════════════════════════════
   --- BLOCS DE TEXTE  ---
═══════════════════════════════════════════════════════════════════════ */
.bloctextestructure {   /* Zones contenant les blocs de texte */
    margin: 0;                     /* Supprime l’espace externe autour de la section */
    padding: 0;                    /* Supprime l’espace interne */
    width: 100%;                   /* La section prend toute la largeur disponible */
    display: flex;                 /* Active Flexbox pour une mise en page fluide */
    flex-direction: column;        /* Empile les éléments verticalement */
    align-items: center;           /* Centre horizontalement les éléments internes */
    justify-content: center;       /* Centre verticalement si hauteur définie (pas ici) */
    text-align: center;            /* Centre tout le texte à l’intérieur */
    box-sizing: border-box;        /* Inclut bordure/padding dans width = 100% */
}
.bloctexte {  /* BLOCS DE TEXTE */
    width: 90%;                    /* Largeur limitée pour une lecture confortable */
    max-width: 900px;              /* Empêche les textes d’être trop étirés sur grands écrans */
    margin: 15px auto;             /* Centre le bloc + espace vertical plus harmonieux */
    padding: 15px 20px;            /* Plus de padding pour mieux aérer */
    background: rgba(0, 0, 0, 0.5);/* Fond semi-transparent pour lisibilité sur image */
    border: 1px solid #000;        /* Fine bordure noire autour du bloc */
    border-radius: 10px;           /* Arrondit légèrement les angles */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7); /* Ombre douce et moderne */
    backdrop-filter: blur(2px);    /* (Optionnel) Effet de flou derrière le bloc */
}
.bloctexte p {  /* PARAGRAPHES */
    color: #f2f6f8;                /* Couleur du texte (blanc bleuté) */
    font-size: 1.3rem;             /* Taille adaptative (~20–22px) */
    line-height: 1.6;              /* Espacement entre lignes pour améliorer la lecture */
    margin: 0;                     /* Évite les marges par défaut inutiles */
}
/* ════════════════════════════════════════════════════════════════════
  --- Grandes Vignettes D'IMAGES --- 
═══════════════════════════════════════════════════════════════════════ */
.boutonbigstructure {    /* Zones contenant les blocs d'images */
    margin: 0;                     /* Supprime l’espace externe autour de la section */
    padding: 0;                    /* Supprime les marges internes */
    width: 100%;                   /* Occupe toute la largeur du parent */
    display: flex;                 /* Active Flexbox pour organiser le contenu */
    flex-direction: column;        /* Place les éléments les uns sous les autres */
    align-items: center;           /* Centre horizontalement le contenu */
    text-align: center;            /* Centre tout texte à l’intérieur */
    box-sizing: border-box;        /* Inclut padding + bordure dans width */
}
.boutonbig {   /* BLOCS DE GRANDES IMAGES CLIQUABLES */
	margin: 0px 0px 0px 0px;
	padding: 5px;
	float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.boutonbig img {  /* IMAGES CLIQUABLES (BOUTONS GRAPHIQUES) */
    width: clamp(200px, 45vw, 400px); /* responsive */
    height: auto;
    background: rgba(250, 249, 249, 0.6);
    border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0,0,0,0.9);
    border-radius: 10px;
    margin: 10px;
}
/* ══════════════════════
  ---  BOX PHOTOS --- 
═══════════════════════════ */
.boxphotosstructure {  /* STRUCTURE DES BOX PHOTOS  */
    margin: 2px;
    padding: 2px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.boxphotoslarge {  /* BOX PHOTOS --- Structure  */
    max-width: 80%;
    margin: 0;
    padding: 5px;
}
.boxphotoslarge img {  /* BOX PHOTOS --- Largeur 100% -- Hauteur auto  */
    margin: 5px;
    padding: 0;
    height: auto;
    width: 100%; /* Prend toute la largeur disponible */
    object-fit: contain; /* évite la déformation */
	border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.9);
    border-radius: 10px;
}	
.boxphotoshauteurfixe {  /* BOX PHOTOS --- Structure  */
    max-width: 90%;
    margin: 0;
    padding: 5px;
}
.boxphotoshauteurfixe img {  /* BOX PHOTOS --- Hauteur fixe 270px — largeur auto  */
    margin: 5px;
    padding: 0;
    height: auto;
    max-height: 270px;
    width: auto;
    max-width: 100%; /* Empêche l'image de dépasser du conteneur */
    object-fit: contain; /* évite la déformation */
	border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.9);
    border-radius: 10px;
}
/* ════════════════════════════════════════════════════════════════════
 --- BOX VIDEOS  (Responsive sans media queries) ---
═══════════════════════════════════════════════════════════════════════ */
.tvflex1 {  /* STRUCTURE DU BOX VIDEOS  */
    width: 100%;                         /* Section pleine largeur */
    padding: clamp(10px, 3vw, 40px) 0;   /* Marges verticales responsive */
}
.tvflex1 .corptvflex1 {  /* Conteneur flexible */
    display: flex;                       /* Active Flexbox */
    justify-content: center;             /* Centre horizontalement */
    align-items: flex-start;             /* Aligne les boîtes en haut */
    flex-wrap: wrap;                     /* Permet le retour à la ligne */
    gap: clamp(10px, 3vw, 40px);         /* Espacement responsive */
    width: 100%;                         /* Pleine largeur */
}
.boxtvflex1 {  /* Chaque boîte vidéo */
    text-align: center;  /* Centre tout le contenu */
    /* Largeur responsive : min 280px max 600px */
    width: clamp(280px, 45vw, 600px);
    height: auto;                        /* S’ajuste au contenu */
    margin: 0;                           /* Remplacé par gap */
    background: rgba(8, 8, 8, 0.6);      /* Style original conservé */
    border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.9);
    border-radius: 20px;
    padding: clamp(10px, 2vw, 25px);     /* Padding responsive */
}
.boxtvflex1 p {  /* Texte dans la boîte */
    color: yellow;
    font-weight: bold;
    margin-bottom: clamp(10px, 2vw, 20px);
}
.boxtvflex1 a:hover {  /* Lien au survol */
    text-decoration: underline;
}
.inboxtvflex1 {  /* Conteneur de la vidéo */
    width: 100%;
    margin-top: clamp(10px, 2vw, 20px);  /* Espace responsive */
}
.inboxtvflex1 iframe {  /* Vidéo */
    width: 100%;
    height: clamp(220px, 30vw, 400px);   /* Hauteur responsive sans media query */
    border: none;
    border-radius: 10px;
}
/* ════════════════════════════════════════════════════════════════════
 --- FOOTER ---  Pied de Page ---
═══════════════════════════════════════════════════════════════════════ */
.footerstructure {  /* STRUCTURE DU BOX FOOTER  */
	margin: 2px;
	padding: 2px;
	width: 90%;
	margin: auto;
	display: flex;
	align-items: center;
	flex-direction: column;
	text-align: center;
}
.footer {  /* Réglage du BOX FOOTER  */
    background: rgba(250, 249, 249, 0.6);
    border: 1px solid #000;
    box-shadow: 5px 5px 7px rgba(0,0,0,0.9);
    padding: 6px 12px;
    margin: 10px auto;
    width: auto;
    max-width: 90%;              /* ← empêche le débordement */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;             /* ← autorise le retour  */
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.footer * {  /* --- enleve le soulignement --- */
	text-decoration: none; /* garantit aucune décoration */
}
.footer a, .footer p {  /* Réglage du Texte duBOX FOOTER  */
    margin: 0;    
    font-size: clamp(14px, 4vw, 15px);
    color: #000;
    text-decoration: none;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
    text-align: center;
    display: inline;         /* plus de bloc large */
    white-space: normal;
}
.footer a:hover {  /* --- INTERACTIONS — Hover / souris --- */
    color: #444;            /* couleur au survol (gris foncé) */
}