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

/* ════════════════════════════════════════════════════════════════════
   --- FORMULAIRE DE CONTACT   ---
═══════════════════════════════════════════════════════════════════════ */
.contact-form {
    width: 80%;
    max-width: 600px;
    margin: 20px auto; /* réduit la marge en haut et en bas */
    padding: 20px;
    background: rgba(0, 0, 0, 0.6); /* fond noir 60% */
    border: 1px solid #000; /* bordure noire */
    border-radius: 15px; /* coins arrondis */
    color: #fff; /* texte blanc */
    font-family: 'Allerta Stencil', sans-serif;
}
.contact-form label {
    font-weight: bold;
    margin-top: 10px;
    display: block;
}
.form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.form label {
    font-weight: bold;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #000; /* bordure noire */
    border-radius: 10px; /* coins arrondis */
    background-color: rgba(255, 255, 255, 0.1); /* fond semi-transparent */
    color: #fff; /* texte blanc */
    font-size: 1rem;
    box-sizing: border-box;
}
.contact-form textarea {
    height: 300px;        /* hauteur fixe plus grande */
    resize: none;         /* empêche l’utilisateur de redimensionner */
    padding: 12px;
    border: 1px solid #000;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
    box-sizing: border-box;
}
.contact-form button {
    margin-top: 20px;
    padding: 15px;
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
}
.contact-form button:hover {
    background-color: #333;
}
.confirmation-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background-color: rgba(0, 0, 0, 0.6); /* fond noir 60% */
    font-family: 'Allerta Stencil', sans-serif;
}
.confirmation-box {
    padding: 30px 40px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #000;
    border-radius: 15px;
    color: #fff;
    text-align: center;
    max-width: 600px;
}
.confirmation-box h1 {
    margin-bottom: 20px;
    font-size: 2rem;
}
.confirmation-box p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}
.retour {
    display: inline-block;
    padding: 12px 25px;
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.3s;
}
.retour:hover {
    background-color: #333;
}
/* ════════════════════════════════════════════════════════════════════
 --- 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é) */
}