/* --------------------------------- */
/* ---------- A) STRUCTURE --------- */
/* --------------------------------- */

html{
	scroll-behavior: smooth;
}
.classic__image-section .classic__image{
    display: flex;
    flex-direction: column-reverse;
}

.classic__content{
    padding: 30px 0px;
}

.classic__content img{
	width: 100%;
	margin: 10px 0px;
	object-fit: contain;
	height: intrinsic;
}
.classic__content img:nth-of-type(odd){
	margin-right: 3%;
}

.zones{
	display: flex;
}
.zones figure{
	width: 18%;
    margin: 0px 2%;
}
.zones figure img{
	width: 100%;
	height: 100px;
	object-fit: contain;
}
.zones figure h3{
	text-align: center;
	margin-top: 20px;
}
.classic__content .btn{
	margin: 10px 0;
}

.classic__image-section:nth-of-type(even) .classic__image > img{
    width: 100%;
    height: fit-content;
	z-index: 2;
}

.classic__image > section:nth-child(2) {
	margin-left: 3%;
}

.classic__content__deuxCol{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.classic__content__deuxCol div{
	width: 49%;
	margin-right: 1em;
}
@media (min-width: 960px){
    .classic__image-section:nth-of-type(even) .classic__image{
        flex-direction: row-reverse;
    }
    .classic__image-section:nth-of-type(odd) .classic__image{
        flex-direction: row;
    }
    .classic__image > section{
        width: 50%;
    }
    .classic__image-section:nth-of-type(even) .classic__image > img{
        width: 50%;
        height: intrinsic;
        margin-right: 30px;
		z-index: 2;
    }

    .classic__image-section:nth-of-type(odd) .classic__image > img{
        width: 50%;
        height: intrinsic;
        margin-left: 30px;
		z-index: 2;
    }
	.classic__content .imgs{
		flex-direction: row;
	}
	.classic__content img{
		width: 100%;
	}
	.classic__content .btn{
		margin-right: 20px;
	}
}

@media (max-width: 960px){
	.classic__image-section .classic__image{
    	display: unset;
	}
	.classic__image-section:nth-of-type(even) .classic__image > img{
		height: intrinsic;
	}
}

/* --------------------------------- */
/* ------- Abis) RESPONSIVE ENFANCE ------- */
/* --------------------------------- */

.no-margin{
	margin: 0;

} 

.enleve-margin{
	margin-top: 0 !important;
}
.home-enfance{
	width: 100%;
    overflow: visible;
    height: fit-content;
    padding-bottom: 40px;
    margin-top: 0px;
	position: relative;
}

.home-enfance_figure{
	position: relative;
	display: block;
	top: 0;
	width: 70%;
}
.home-enfance_image{
	position: relative
	/*max-width: 800px;
    margin-top: -80px;
	object-fit: cover;*/
}
.background-article-enfance{
	width: 95%;
	color: #ffffff;
}
.home-enfance_content{
	color: #ffffff;
	padding: 1em;
	line-height: 1.5rem;
}


.article-enfance{
	justify-content: flex-end;
    position: relative;
	display: flex;
    flex-direction: row;
	margin-bottom: 100px;
}
.article-enfance .encart-bleu p, ul{
	width: 85%;
	line-height: 1.5rem;
}

.article-enfance .background-article-enfance p, ul{
	width: 90%;
	line-height: 1.5rem;
}

.enfance-menu{
		display: flex;
    	flex-direction: row;
   		justify-content: center;
		flex-wrap: wrap;
	}
.home-enfance_background{
    position: absolute;
    width: fit-content;
    max-width: 50%;
    z-index: 2;
	background-color : #005c91;
	right: 0;
	padding: 1em;
	color: #ffffff;
}


@media (min-width: 960px){
.home-enfance_background{
	bottom: 25%;
}
}

@media (max-width: 500px){
	.enfance-menu a.btn.btn-principal{
		margin: 0;
	}
	.enfance-menu{
		display: flex;
    	flex-direction: column;
   		justify-content: center;
	}
}
@media (max-width: 960px){
	
	.home-enfance_figure{
		width: 100%;
    	margin: 0 auto;
	}
	
	.home-enfance_background{
		width: 100%;
    	position: relative;
		margin-bottom: 10px;
		max-width: 100%;
		bottom:0px !important;
	}
	
	.no-margin{
		margin-top: 0;
	}
}

/* Classes pour Asso'Pratique */
.home-asso{
	width: 100%;
    overflow: visible;
    height: fit-content;
    padding-bottom: 40px;
    margin-top: 0px;
	position: relative;
}

.home-asso_figure{
	position: relative;
	display: block;
	top: 0;
	width: 70%;
	margin: 0 auto;
}

.home-asso_image{
	position: relative;
}

.home-asso_content{
	color: #ffffff;
	padding: 1em;
	line-height: 1.5rem;
}

.home-asso_background{
    position: absolute;
    width: fit-content;
    max-width: 50%;
    z-index: 2;
	background-color : #005c91;
	left: 0;
	padding: 1em;
	color: #ffffff;
}

@media (min-width: 960px){
	.home-asso_background{
		bottom: 10%;
	}
}

@media (max-width: 960px){
	.home-asso_figure{
		width: 100%;
    	margin: 0 auto;
	}
	
	.home-asso_background{
		width: 100%;
    	position: relative;
		margin-bottom: 10px;
		max-width: 100%;
		bottom:0px !important;
	}
}

/* Nouvelle classe pour Asso'Pratique - affichage en colonne */
.texte-asso{
	display: flex;
	flex-direction: column;
	/* gap: 2rem; */
}

.texte-asso h3{
	margin-top: 0;
}

.texte-asso article{
	margin-bottom: 0;
}

.texte-asso .cadre-bleu{
	position: static;
	left: 0;
	bottom: 0;
	padding-left: 30px;
}

.texte-asso .cadre-bleu::after{
	display: none;
}

/* Classes pour page Théâtre */
.home-theatre{
	width: 100%;
    overflow: visible;
    height: fit-content;
    padding-bottom: 40px;
    margin-top: 0px;
	position: relative;
}

.home-theatre_figure{
	position: relative;
	display: block;
	top: 0;
	width: 70%;
	margin: 0 auto;
}

.home-theatre_figure img{
	width: 100%;
	height: auto;
}

.home-theatre_content{
	color: #ffffff;
	padding: 1em;
	line-height: 1.5rem;
}

.home-theatre_background{
    position: absolute;
    width: fit-content;
    max-width: 50%;
    z-index: 2;
	background-color : #005c91;
	right: 0;
	padding: 1em;
	color: #ffffff;
}

@media (min-width: 960px){
	.home-theatre_background{
		bottom: 10%;
	}
}

@media (max-width: 960px){
	.home-theatre_figure{
		width: 100%;
    	margin: 0 auto;
	}
	
	.home-theatre_background{
		width: 100%;
    	position: relative;
		margin-bottom: 10px;
		max-width: 100%;
		bottom:0px !important;
	}
}

@media (max-width: 960px) {
	.article-enfance {
		display: flex;
    	flex-direction: column !important;
    	width: 100%;
		margin-bottom: 20px;
	}
	
	.article-enfance-numero-deux{
		margin-bottom: 0 !important;
	}
	
	.article-enfance a.btn.btn-principal{
		width: 100%;
	}
	.classic__content__deuxCol{
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

	.encart-bleu{
		position: relative;
    	width: 100%;
		border: none;
		padding: 10px;
		display: block;
		margin-bottom: 50px;
	}
	
	.fond-bleu-enfance{
		position: relative;
    	width: 100%;
		border: none;
		padding: 10px;
		display: block;
		margin-bottom: 50px;
	}
	.article-enfance .encart-bleu p, ul{
		width: 100%;
	}

	.article-enfance .background-article-enfance p, ul{
		width: 100%;
    	justify-content: center;
	}
	.article-enfance div:nth-child(2){
		width: 100%;
	}
	.classic__content__deuxCol div{
		width: 100%;
	}
}
/* --------------------------------- */
/* ------- B) SECTION BOTTOM ------- */
/* --------------------------------- */
.bottom-infos{
    background-image: url(https://mairie-barbezieux.fr/wp-content/uploads/2022/06/fond-actus.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 17px;
	padding-bottom: 50px;
}

.bottom__container{
	width: 100%;
    margin: 60px 0px;
}
.bottom-infos__title{
    color: var(--secondary-color);
    padding-left: 30px;
}
.bottom-infos__content{
    background-color: white;
    /* border: solid 1px var(--secondary-color); */
    padding: 30px;
    height: fit-content;
	font-size: 1.2rem;
	line-height: 1.5rem;
}

.bottom-infos__container{
    padding: 0px 20px;
}

@media (min-width: 960px){
    .bottom-infos{
        padding-bottom: 100px;
    }
    .bottom__container{
        width: 470px;
        margin: 0px 30px;
    }

    .bottom-infos__container{
        display: flex;
        justify-content: center;
        padding: 0px;
    }
}