/* Barre supérieure GSM mobile */
        .barre-mobile { display: none; height: 50px; background-color: #2c3e50; color: #fff; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; line-height: 50px; padding: 0 15px; }
        .bouton-menu { background: none; border: none; color: white; font-size: 20px; cursor: pointer; margin-top: 12px; float: left; }
        .bouton-sujet { background: none; border: none; color: white; font-size: 20px; cursor: pointer; margin-top: 12px; float: right; }

        /* Colonne de gauche fixe */
        #bloc-gauche-injecte { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; padding: 15px; box-sizing: border-box; overflow-y: auto; background-color: rgba(251, 249, 246, 1); }
        #colonne-droite { margin-left: 260px; box-sizing: border-box; }
    
        /* --- STYLISATION DU MENU DÉROULANT HORIZONTAL --- */
        #menu-horizontal { 
            position: sticky; top: 0; z-index: 100;
            padding: 0 5px; box-sizing: border-box;
            background-color: #2c3e50;
            display: flex; gap: 2px;
            justify-content: center;
        }

        .dropdown { position: relative; display: inline-block; }
        .dropbtn { 
            background-color: #2c3e50; color: white; padding: 11px 10px; 
            font-size: 11px; font-weight: bold; border: none; cursor: pointer; text-transform: uppercase;
        }
        .dropdown:hover .dropbtn { background-color: #5a6b7c; color: white; }

        /* Le tiroir déroulant (dropdown) */
        .dropdown-content {
            display: none; position: absolute; background-color: white;
            min-width: 360px; box-shadow: 0px 4px 5px #00000026; z-index: 101;
            border: 1px solid #dee2e6; font-size: 15px;
        }
        .dropdown-content a {
            color: #667171; padding: 0px 2px; text-decoration: none; 
            display: block; font-size: 15px; 
        }
        .dropdown-content a:hover { background-color: #5a6b7c; color: white; }
        .dropdown:hover .dropdown-content { display: block; }

        /* Zone de lecture principale */
        #zone-contenu { 
    padding: 9px; 
    box-sizing: border-box; 
}





/* ==================================================================
   CORRECTIF DU MODE LECTURE : Élargissement de la page
   ================================================================== */

/* Au lieu de toucher à la hauteur ou au padding, on propulse le menu hors de l'écran */
body.mode-lecture #menu-horizontal {
    position: absolute !important;
    top: -9999px !important;       /* Envoie la barre noire loin au-dessus de la zone visible */
    left: -9999px !important;
    display: none !important;
}

/* On s'assure que le menu de gauche est lui aussi bien écarté */
body.mode-lecture #bloc-gauche-injecte {
    display: none !important;
}

/* La colonne de texte remonte naturellement tout en haut sans décalage parasite */
body.mode-lecture #colonne-droite {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 960px !important;
    margin-top: 0 !important;      /* Force le texte à se coller tout en haut de l'écran */
    padding-top: 10px !important;  /* Petit espace de confort juste pour le bouton */
}


/* ==================================================================
   SÉCURITÉ MOBILE (GSM) : On cache le bouton de mode lecture
   ================================================================== */
@media screen and (max-width: 768px) {
    
    /* On cible le conteneur du bouton pour qu'il disparaisse totalement sur GSM */
    #barre-outils-lecture {
        display: none !important;
    }
    
    /* ... (Tout le reste de votre code CSS pour le mode mobile reste inchangé ici) ... */
}



/* On cible UNIQUEMENT les paragraphes normaux pour les justifier */
/* --- MISE EN PAGE DU TEXTE (PROPRE ET SANS CONFLIT) --- */

#zone-contenu Titre {
    display: block;       /* Force la balise à se comporter comme un bloc indépendant */
    text-align: center;   /* L'alignement centré absolu */
    font-family: Times;
    font-size: 35px ;     /* Taille de police augmentée */
    font-weight: 500 ;
    color: #2c3e50;     /* Couleur des titres */
    text-shadow: 3px 3px 2px #aeadad; /* Ombre du texte */
    margin: 15px 0;       /* L'espace au-dessus et en dessous */
}

#zone-contenu STitre {
    display: block;       /* Force la balise à se comporter comme un bloc indépendant */
    text-align: center;   /* L'alignement centré absolu */
    font-family: Times;
    font-size: 25px ;     /* Taille de police augmentée */
    font-weight: medium ;
    color: #2c3e50;      /* Couleur des titres */
    text-shadow: 3px 3px 2px #b3b1b1; /* Ombre du texte */
    margin: 15px 0;       /* L'espace au-dessus et en dessous */
}

#zone-contenu auteur {
    display: block;
    text-align: center;        /* Aligné à droite par défaut (exception au justifié) */
    font-family: Times;
    font-size: 18px;
     color: #606464;           /* Un gris doux pour ne pas surcharger le titre */
    margin: 5px 0 25px 0;     /* Espace de 25px sous l'auteur avant le grand texte */
}

#zone-contenu h1 {
    text-align: center;      /* Centre automatiquement tous vos titres */
    color: #5d2c11;          /* Couleur de vos titres */
    font-size: 23px ; 
    margin-top: 50px;
    margin-bottom: 20px;
}

#zone-contenu h2 {
    text-align: center;      /* Centre automatiquement tous vos titres */
    color: #93441A;          /* Couleur de vos titres */
    font-size: 20px ; 
    margin-bottom: 16px;
}

#zone-contenu h3 {
    text-align: left;      /* Centre automatiquement tous vos titres */
    color: #a66a2e;          /* Couleur de vos titres */
    font-size: 20px ; 
    margin-bottom: 16px;
}

#zone-contenu p {
    text-align: justify;     /* Justifie parfaitement tous vos paragraphes */
    color: #430C05;
    line-height: 1.6;        /* Donne de l'air au texte pour un grand confort de lecture */
    text-justify: inter-word;/* Améliore l'espacement des mots (idéal pour Firefox/Safari) */
    margin-bottom: 16px;     /* Crée un bel espace entre vos paragraphes */
}

#zone-contenu .pr {
    text-align: right;     /* Justifie parfaitement tous vos paragraphes */
    color: #430C05;
    line-height: 1.6;        /* Donne de l'air au texte pour un grand confort de lecture */
    margin-bottom: 16px;     /* Crée un bel espace entre vos paragraphes */
}

#zone-contenu .pl {
    text-align: left;     /* Justifie parfaitement tous vos paragraphes */
    color: #430C05;
    line-height: 1.6;        /* Donne de l'air au texte pour un grand confort de lecture */
    margin-bottom: 16px;     /* Crée un bel espace entre vos paragraphes */
}

#zone-contenu hc {
    display: block;       /* Force la balise à se comporter comme un bloc indépendant */
    text-align: center;   /* L'alignement centré absolu */
    margin: 15px 0;       /* L'espace au-dessus et en dessous */
}

#zone-contenu pr {
    text-align: right;     /* Justifie parfaitement tous vos paragraphes */
    color: #430C05;
    line-height: 1.6;        /* Donne de l'air au texte pour un grand confort de lecture */
    margin-bottom: 16px;     /* Crée un bel espace entre vos paragraphes */
}

#zone-contenu img {
    max-width: 100% !important;
    height: auto !important;
}


.blur{
text-shadow: 4px 4px 3px #959595;
}

.blurSmall{
text-shadow: 3px 3px 2px #959595;
}





/* --- AFFICHAGE DE PHOTOS COTE A COTE ET SUPERPOSEES --- */
/* --- SUR ORDINATEUR --- */

.hc img {
    max-width: 100%;  /* EMPECHE l'image de dépasser de son cadre parent */
    width: auto;      /* Laisse l'image garder ses proportions naturelles */
    height: auto;     
    display: block;   /* Évite un petit espace vide sous l'image */
    margin: 0 auto;   /* Centre l'image si elle est plus petite que le cadre */
}

.conteneur-duo {
    display: flex;        /* Active le mode côte à côte moderne */
    gap: 20px;            /* Crée un espace propre entre les deux blocs */
    margin: 30px 0;
}

.bloc-cadre {
    flex: 1;              /* Force les deux blocs à faire exactement la même largeur (50% / 50%) */
    background: #ffffff;  /* Optionnel : fond blanc pour créer un effet de cadre */
    padding: 15px;
    border: 1px solid #ddd; /* Optionnel : fine bordure autour de tout le cadre */
}

.legende-photo {
    text-align: center;   /* Le texte sous la photo est centré (exception au justifié global) */
    color: #430C05;
    font-size: 14px;
    margin-top: 10px;
}

/* --- SUR SMARTPHONE (Écran de moins de 768px) --- */
@media (max-width: 768px) {
    .conteneur-duo {
        flex-direction: column; /* MAGIE : Les blocs passent l'un en dessous de l'autre ! */
    }
}





        /* Boutons de l'accordéon gauche */
 /* 1. Ici, on ne s'occupe QUE du bouton physique (ses coins carrés et sa taille) */
/* --- TEXTURE DE VERRE TRANSPARENT SUR LES BOUTONS --- */
.menu-titre {
    display: block;
    width: 100%;
    padding: 4px 10px;
    margin-bottom: 5px;
    text-align: left;
    font-size: 15px !important;
	text-shadow: 2px 2px 2px #e7e5e5;

    
    /* 1. On commence avec un texte normal/fin */
    font-weight: normal; 
    
    cursor: pointer;
    border-radius: 4px;

    background-color: #fffcf8; 
    color: #3f2d11; /* On utilise votre couleur sombre de lecture dès le départ */
    border: 1px solid #d9ceb9f2; 
    
    /* Le relief gravé reste fixe */
    box-shadow: inset 2px 2px 4px #e0d5c1, 
                inset -2px -2px 4px #ffffff;
    
    transition: font-weight 0.15s ease, text-shadow 0.15s ease;
}

/* --- AU SURVOL : LE TEXTE S'ÉPAISSIT (GRAS AU PASSAGE) --- */
.menu-titre:hover:not(.active) {
    
    border: 1px solid #706357;
    
    /* On ajoute une micro-ombre de la même couleur pour lisser le gras sans faire sauter les lettres */
    text-shadow: 0.5px 0 0 #430C05; 
}

/* --- LE BOUTON ACTIVÉ : LE TEXTE RESTE AFFIRMÉ (GRAS ENFONCÉ) --- */
.menu-titre.active {
    background-color: #FDF8F2; /* Reste identique au fond */
    font-weight: normal;       /* Le texte reste fin et élégant (pas de gras) */
       border: 1px solid #706357;
    
    /* On ajoute une micro-ombre de la même couleur pour lisser le gras sans faire sauter les lettres */
    text-shadow: 0.5px 0 0 #430C05; 
    
    /* On conserve la même ombre interne pour stabiliser le relief gravé */
    box-shadow: inset 2px 2px 4px #e0d5c1, 
                inset -2px -2px 4px #ffffff;
}




        .menu-contenu { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; padding-left: 10px; }
 .menu-contenu a { 
    display: block; 
    padding: 2px 10px;            /* COMPRESSÉ : On passe de 6px à 2px en haut et en bas pour éliminer le vide */
    line-height: 1.2;             /* RESSERRÉ : Réduit la hauteur de l'interligne du texte lui-même */
    color: #495057; 
    text-decoration: none; 
    font-size: 13px;              /* LÉGÈREMENT PLUS PETIT : Plus esthétique pour les sous-rubriques */
    border-left: 2px solid #dee2e6; 
    background-color: #FDF8F2;
}        

.menu-contenu a:hover { color: #007bff; background-color: #f1f3f5; }

        /* GSM Responsive */
        @media (max-width: 768px) {
            .barre-mobile { display: block; }
            #bloc-gauche-injecte { position: fixed; top: 50px; left: 0; bottom: 0; z-index: 999; transform: translateX(-100%); transition: transform 0.3s ease; }
            #colonne-droite { margin-left: 0; padding-top: 50px; }
            #menu-horizontal { position: fixed; top: 50px; right: 0; bottom: 0; width: 360px; z-index: 999; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; flex-direction: column; padding: 10px; }
            .dropdown-content { position: static; display: block; box-shadow: none; border: none; padding-left: 10px; background: none; }
            .dropdown-content a { color: #fff; font-size: 12px }
            #bloc-gauche-injecte.ouvert, #menu-horizontal.ouvert { transform: translateX(0); }
        }

       /* --- CONFIGURATION DU CONTENEUR DE LA CARTE GIS --- */
.conteneur-carte {
    width: 100%;
    max-width: 900px;      /* Largeur maximale de la carte sur grand écran */
    margin: 25px auto;     /* Centre la carte avec de l'espace autour */
    box-shadow: 0 4px 10px #00000026; /* Bel ombrage discret */
    border: 1px solid #ced4da;
    border-radius: 4px;
    overflow: hidden;
}

.carte-gis {
    width: 100%;
    height: 550px;         /* Hauteur confortable pour manipuler la carte sur PC */
    border: none;
    display: block;
}

/* Ajustement automatique pour smartphone (GSM) */
@media (max-width: 768px) {
    .carte-gis {
        height: 350px;     /* On réduit un peu la hauteur sur téléphone pour le confort */
    }

   
}