/* ========= STYLE GLOBAL DU SITE ========== */

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 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  ─────── */
.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;
}
}
/* === Tableaux CODE CSS === */
.blocguidecss {
    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;
}
.blocguidecsstexte {
        font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: #222;
        padding: 2rem;
        line-height: 1.6;
}
.blocguidecsstexte h2 {
        color: #0069d9;
        margin-top: 2rem;
        text-align: center;
}
.blocguidecsstexte table {
        width: 95%;
        margin: 1.5rem auto;
        border-collapse: collapse;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.blocguidecsstexte th, .blocarticle1texte td {
        border: 1px solid #e0e0e0;
        padding: 10px 14px;
        text-align: left;
        vertical-align: top;
}
.blocguidecsstexte th {
        background-color: #007bff;
        color: white;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 0.5px;
}
.blocguidecsstexte tr:nth-child(even) {
        background-color: #f9f9f9;
      }
.blocguidecsstexte code {
        background-color: #eef;
        padding: 2px 4px;
        border-radius: 4px;
        font-family: monospace;
}
.blocguidecsstexte .section {
        margin-bottom: 2rem;
        background: #fff;
        border-radius: 12px;
        padding: 1rem 0.5rem;
        box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}