/* Styles de base et réinitialisation */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: ##DDE7D0;
	font-size: 1.1em;
	
	display: flex;
    flex-direction: column;
    min-height: 100vh; /* 100% de la hauteur de la vue (viewport) */
}

/* 1. Bandeau supérieur (Header) */
.bandeau-superieur {
    display: flex; /* Utilisation de Flexbox pour l'alignement */
    justify-content: space-between; /* Espace entre le logo et le slogan */
    align-items: center;
    /*background-color: #bacf9f; /* Couleur de fond foncé */
	background-image: url('./images/background.webp'); /* 1. Chemin vers votre image */
    background-size: cover;          /* 2. L'image couvre toute la zone, sans déformation */
    background-repeat: no-repeat;    /* 3. Empêche la répétition de l'image */
    background-position: center center; /* 4. Centre l'image dans la zone */	
    color: white;
    padding: 15px 20px;
}

.bandeau-superieur .logo {
    font-size: 1.5em;
    font-weight: bold;
    flex-grow: 0; /* Ne prend pas d'espace supplémentaire */
	height: 200px; /* Espace réservé pour le logo */
}

/* Cible l'image à l'intérieur du conteneur .logo */
.logo-img {
    display: block; /* Supprime l'espace sous l'image */
    max-height: 100%; /* L'image prend toute la hauteur disponible dans son conteneur (max 60px) */
    max-width: 100%;  /* Limite la largeur à celle du conteneur (si besoin) */
    width: auto;      /* Maintient les proportions */
}

.bandeau-superieur .slogan {
    font-style: italic;
    font-size: 3.1em;
    text-align: center;
    flex-grow: 1; /* Prend l'espace restant pour centrer */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* 2. Menu de navigation fixe */
.navigation-fixe {
    /* Positionnement fixe pour rester en haut lors du défilement */
    position: sticky; 
    top: 0; /* Reste en haut de l'écran */
    z-index: 1000; /* Assure qu'il est au-dessus du reste du contenu */
    
    display: flex;
    justify-content: center; /* Centrer les boutons */
    background-color: #BACF9F; /* Couleur de fond du menu */
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.navigation-fixe button {
    background-color: #BACF9F;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 1.3em;
	font-style: bolder;
    transition: background-color 0.3s;
}

.navigation-fixe button:hover {
    background-color: #CFCC9F;
}

/* 3. Zone de navigation (Contenu principal) */
.degrade_fond {
	background-size: cover;          
    background-repeat: no-repeat;    
    background-position: center center;
	background-image: linear-gradient(#FAC5C4, #BACF9F);
}

@media (min-width: 768px) {
    .degrade_fond {
		display: flex;
        flex: 1; 
        min-height: 60vh;
    }
}

.zone-contenu {
    display: flex;
    max-width: 1200px; /* Largeur maximale pour les grands écrans */
    margin: 20px auto; /* Centrer le contenu et donner un peu d'espace */
    padding: 0 20px;
	flex: 1;
}

/* Menu Latéral (1/4 de la zone) */
.menu-lateral {
    flex: 0 0 25%; /* Flex-grow: 0, Flex-shrink: 0, Base: 25% (un quart) */
    background-color: rgba(224, 242, 241, 0.4);
    padding: 15px;
    box-sizing: border-box; /* Inclusion du padding dans la largeur */
}

.menu-lateral ul {
    list-style: none;
    /*padding: 0;*/
}

.menu-lateral li {
    /*padding: 8px 0;*/
    border-bottom: 1px solid #b2dfdb;
}

.menu-lateral li a {
	display: block;        /* IMPORTANT : Le lien prend toute la largeur de la ligne */
    padding: 12px 15px;    /* Zone de clic confortable */
    text-decoration: none; /* Retire le soulignement */
    color: #004d40;        /* Couleur du texte */
    font-weight: 500;
    transition: all 0.3s ease; /* Animation douce pour le survol */	
}

.menu-lateral li a:hover {
    background-color: #b2dfdb; /* Change le fond au survol */
    color: #00251a;            /* Change un peu la couleur du texte */
    padding-left: 20px;        /* Petit décalage vers la droite pour l'effet visuel */
}

/* Contenu Principal (3/4 de la zone) */
.contenu-principal {
    flex: 1; /* Prend l'espace restant (3/4) */
    padding: 20px;
    /*background-color: white;*/
	background-color: rgba(224, 242, 241, 0.4);
	
}

.centertitre {
	text-align: justify;
}

.alignleft {
	text-align: left;
}

.champ-responsive {
    /* 1. Largeur totale par rapport au parent */
    width: 100%; 
    
    /* 2. IMPORTANT : Inclut le padding et la bordure dans les 100% */
    box-sizing: border-box; 
    
    /* 3. Hauteur de base et limites */
    min-height: 150px;
    max-width: 100%; /* Sécurité supplémentaire */
    
    /* 4. Comportement de redimensionnement */
    resize: vertical; /* Empêche l'utilisateur de déformer la largeur du site */
    
    /* 5. Esthétique (optionnel) */
    padding: 12px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit; /* Utilise la même police que le reste du site */
    font-size: 1rem;
	

}

/* Conteneur de l'iframe */
.conteneur-iframe {
    flex: 0 0 50%; /* On lui donne un peu plus de place que l'illustration standard */
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

/* L'iframe elle-même */
.conteneur-iframe iframe {
    width: 100%;
    /* Définit un ratio de forme (Largeur / Hauteur) */
    aspect-ratio: 16 / 9; 
    border: 2px solid #00796b;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 4. Pied de page */
.pied-de-page {
    text-align: center;
    padding: 15px;
    background-color: #333;
    color: white;
    /*margin-top: 20px; /* Espace au-dessus du pied de page */
	margin-top: auto;
}

/* ======================================= */
/* RESPONSIVE DESIGN (Media Queries) */
/* ======================================= */

/* Pour les écrans plus petits que 768px (tablettes et mobiles) */
@media (max-width: 768px) {
    
    /* Le bandeau change de disposition */
    .bandeau-superieur {
        flex-direction: column;
        text-align: center;
    }
    
    .bandeau-superieur .slogan {
        margin-top: 5px;
        font-size: 0.9em;
		/*color: red;*/
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    }

    /* Le menu de navigation passe en mode colonne (ou les boutons s'élargissent) */
    .navigation-fixe {
        flex-wrap: wrap; /* Permet aux boutons de passer à la ligne */
    }
    
    .navigation-fixe button {
        flex-basis: 45%; /* Les boutons prennent près de la moitié de l'espace */
        margin: 5px;
    }

    /* La zone de contenu passe en mode colonne (le menu latéral passe au-dessus) */
    .zone-contenu {
        flex-direction: column;
        padding: 0 10px; /* Moins de padding sur les petits écrans */
    }
    
    /* Le menu latéral et le contenu principal prennent toute la largeur */
    .menu-lateral, .contenu-principal {
        flex-basis: 100%; /* Prend toute la largeur */
        margin-bottom: 10px;
    }
    
    .menu-lateral {
        order: -1; /* Optionnel : le mettre en premier visuellement sur mobile */
    }
	
	.champ-responsive {
    /* 1. Largeur totale par rapport au parent */
    width: 100%; 
    
    /* 2. IMPORTANT : Inclut le padding et la bordure dans les 100% */
    box-sizing: border-box; 
    
    /* 3. Hauteur de base et limites */
    min-height: 150px;
    max-width: 100%; /* Sécurité supplémentaire */
    
    /* 4. Comportement de redimensionnement */
    resize: vertical; /* Empêche l'utilisateur de déformer la largeur du site */
    
    /* 5. Esthétique (optionnel) */
    padding: 12px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit; /* Utilise la même police que le reste du site */
    font-size: 1rem;
	}
	
    .conteneur-iframe {
        flex-basis: 100%;
        /* On peut changer le ratio sur mobile si on veut un affichage plus vertical */
        aspect-ratio: 4 / 3;
	}	
	
}

/* ======================================= */
/* Styles pour l'alternance Image/Texte */
/* ======================================= */

.espace-deroulement {
    padding-top: 20px;
	/*text-align: justify;*/
}

.bloc-alternant {
    display: flex; /* Active Flexbox pour la mise en page en colonne */
    align-items: center; /* Centre verticalement l'image et le texte */
    margin-bottom: 40px; /* Espace entre les blocs */
    border: 1px solid #ccc;
    padding: 15px;
}

.illustration {
    flex: 0 0 40%; /* L'image prend 40% de la largeur du bloc */
    max-width: 40%;
    padding: 15px;
    box-sizing: border-box;
}

.illustration img {
    width: 100%; /* L'image prend 100% de la largeur de son conteneur (40% du bloc) */
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.texte-paragraphe {
    flex: 1; /* Le texte prend l'espace restant (60% du bloc) */
    padding: 15px;
	text-align: justify;
}

/* --- CLASSE D'INVERSION POUR L'IMAGE À DROITE --- */

.bloc-alternant.image-droite {
    /* Inverse l'ordre des éléments à l'intérieur du bloc */
    flex-direction: row-reverse; 
}

/* ======================================= */
/* RESPONSIVE DESIGN pour l'alternance */
/* ======================================= */

@media (max-width: 768px) {
    
    /* Sur les petits écrans, empilez l'image et le texte verticalement */
    .bloc-alternant, .bloc-alternant.image-droite {
        flex-direction: column; /* L'image est toujours au-dessus du texte */
		padding: 15px 10px; /* Réduit le padding horizontal à 10px */
		width: 100%;
		box-sizing: border-box;
        /*text-align: center;*/
    }

	.illustration, 
    .texte-paragraphe {
        /* Assurez-vous qu'ils prennent toute la place disponible dans le conteneur parent */
        width: 100%;
        max-width: 100%;
        /* Retirez les paddings latéraux s'ils posent problème d'addition */
        padding-left: 0;
        padding-right: 0;
    }
    
    .illustration, .illustration img {
        flex-basis: 100%; /* L'image prend toute la largeur */
        max-width: 100%;
    }
    
    .texte-paragraphe {
        padding-top: 0; /* Réduire l'espace si l'image est au-dessus */
		text-align: initial;
    }