/* ==================== STYLE GLOBAL DU SITE ==================== */
body {
    background-color: #fcfbfb; /* Définit la couleur de fond principale (noir profond) */
    margin: 0; /* Supprime les marges par défaut du navigateur */
    padding: 0;
    width: 100%;
    height: 100%;
    background: url(images/fondusite01.jpg) no-repeat fixed; /* Ajoute une image de fond fixe, non répétée */
    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; /* 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 */
}

/* ===== CODE DU FORMULAIRE DE CONTACT ====== */
:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --accent:#2b6ef6;
  --muted:#6b7280;
  --radius:12px;
  --gap:16px;
  --max-width:720px;
  font-family: Inter, system-ui, sans-serif;
}

.container{
  width:100%;
  max-width:var(--max-width);
    background: rgba(255, 255, 255, 0.5); /* Fond blanc semi-transparent */
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 10px 30px rgba(15,23,42,0.06);
}
h1{margin:0 0 6px;font-size:1.6rem}
.lead{margin:0 0 18px;color:var(--muted)}
.form{display:grid;gap:12px}
label{font-size:0.9rem;margin-top:6px}
input,textarea{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid #e6e9ef;
  font-size:1rem;
  outline:none;
  transition:box-shadow .15s,border-color .15s;
}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 6px 18px rgba(43,110,246,0.08)}
.row{display:flex;gap:10px;align-items:center;margin-top:6px}
.btn{
  background:var(--accent);
  color:white;
  border:none;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  box-shadow:0 6px 14px rgba(43,110,246,0.14);
}
.btn--muted{background:transparent;color:var(--muted);border:1px solid #eef2ff;box-shadow:none}
.status{margin-top:10px;font-size:0.95rem}
.status--ok{color:#065f46}
.status--error{color:#b91c1c}
.notes{margin-top:20px;padding-top:14px;border-top:1px dashed #eef2ff;color:var(--muted)}
.notes h2{font-size:1rem;margin:0 0 8px}

/* ─────── BARRE DE NAVIGATION  ─────── */
.barrenav1structure {  /* structure 100% Centré */
    margin: 5px; /* Espace externe autour du bloc titre */
    padding: 15px; /* 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(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 */
}
.barrenav1logo {  /* 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 */
}
.barrenav1 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 */
}
/* ─────── BOUTONS ─────── */
.bouton1 {
    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 */
}
.bouton1 a {
    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 */
}
.bouton1:hover {
    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 */
}
.bouton1fix {
    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 */
}
.bouton1fix a {
    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 */
}
/* ──  TITRE de la page centré  ──── */
.pagetitre1 {
    display: flex; /* Active Flexbox pour les boutons */
    justify-content: center; /* Centre les boutons horizontalement */
    flex-wrap: wrap; /* Autorise le retour à la ligne */
    padding: 0.5rem 0; /* Espace vertical autour du groupe */
}
.pagetitre1texte {
    background: rgba(255, 255, 255, 0.9); /* Fond blanc semi-transparent */
	margin: 5px 5px 5px 5px;
    padding: 0.3em 0.6em; /* Espacement interne léger */
    width: fit-content; /* Largeur auto selon le contenu */
    max-width: fit-content; /* Largeur auto selon le contenu */
    height: 80%; /* Hauteur auto selon le contenu */
    line-height: 1; /* Hauteur de ligne compacte */
	box-shadow: 10px 5px 25px rgba(0, 0, 0, 0.8);
	border-radius: 10px;
}
/* ──  box article + photo  ──── */
.box1 {
    display: flex;
    align-items: center;        /* centre verticalement le contenu dans la section */
    justify-content: center;    /* centre horizontalement */
    flex-direction: column;
    text-align: left;           /* texte aligné à gauche */
}
.box1corp {
    width: 80%;
    margin: 5px;
    padding: 5px;
    color: #050505;
    display: flex;
    align-items: center;        /* centre verticalement photo et texte dans le conteneur */
    justify-content: center;    /* centre horizontalement dans le conteneur */
}
.box1article {
    background: rgba(255, 255, 255, 0.9);
    margin: 5px;
    padding: 1em;
    width: 60%;
    box-sizing: border-box;
    line-height: 1.4;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;     /* centre verticalement le texte à l'intérieur */
    align-items: flex-start;     /* aligne le texte à gauche */
    text-align: left;            /* texte à gauche */
    box-shadow: 10px 5px 25px rgba(0,0,0,0.3);
    border-radius: 10px;
    border: 3px solid #faf9f9;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}
.box1photo {
    width: 40%;
    margin: 1px;
    border: 2px solid #f8f5f5;
    border-radius: 10px;
}
.box1photo img {
    width: 100%;
    border-radius: 10px;
}
/* ──  bloc titre + article  ──── */
.blocarticle1 {
    margin: 20px auto;          /* ✅ centre la section horizontalement */
    padding: 2px;
    width: 80%;                 /* ✅ même largeur que tes autres blocs */
    display: flex;
    flex-direction: column;
    align-items: flex-start;    /* garde le contenu aligné à gauche */
    text-align: left;
}
.blocarticle1titre {
    background: rgba(255, 255, 255, 0.9);
    margin: 10px;
    padding: 1em;
    width: fit-content; /* La largeur s'ajuste au texte */
    box-sizing: border-box;
    line-height: 1;
    font-weight: bold;
    display: inline-block; /* ✅ rend le fond ajusté au contenu */
    justify-content: flex-start;
    align-items: flex-start;
    box-shadow: 10px 5px 25px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}
.blocarticle1texte {
    background: rgba(255, 255, 255, 0.9);
    margin: 5px;
    margin-bottom: 20px;   /* Espacement entre chaque article */
    padding: 1em;
    width: 100%;           /* Remplit toute la largeur de son parent */
    box-sizing: border-box; /* prend en compte le padding dans la largeur */
    line-height: 1.4;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; /* Aligne le texte et les éléments à gauche */
    box-shadow: 10px 5px 25px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    /* Empêche le texte de dépasser */
    overflow-wrap: break-word; /* coupe les mots trop longs */
    word-wrap: break-word; /* compatibilité ancienne */
    word-break: break-word;
}
/* ──  bloc photo  ──── */
.blocphotos1 {
    margin: 2px;	padding: 2px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.blocphotos1fix {
    max-width: 90%;
    height: auto;
    margin: 0px 0px 0px 0px;
    padding: 5px;
}    
.blocphotos1fix img {
    margin: 5px;
    padding: 0px;
    border: 2px solid #faf9f9;
    font-size: 15px;
    line-height: 30px;
    box-shadow: 10px 5px 25px rgba(0, 0, 0, 0.8);
    border-radius: 10px;}

    /* ─────── FOOTER ─────── */
.bandofinstructure {
    margin: 2px;	padding: 2px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.bandofin {
    background: rgba(10, 10, 10, 0.8);
    width: 60%;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 10px 5px 20px rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    color: rgb(247, 243, 243);
}
/* --- Version mobile --- */
@media (max-width: 768px) {
.blocguidecsstexte table {
    width: 100%;
    font-size: 0.9rem;
}
}