:root {
	--grey: #5A7782;
	--blue: #5D9BB4;
	--green: #2AAA00;
	--green-light: #E8F6DE;
	--green-extra-light: #F7FCF4;
}
body{
	font-family: "Open Sans", sans-serif;
	color: var(--grey);
	font-size: 16px;
	line-height: 27px;
}
a{
	transition: color ease-in-out .3s;
}
@media (min-width: 75rem){
	.container {
		max-width: 95rem;
		width: calc(100vw - 4rem);
	}
}


.bbb_header{
	background: #fff;
	box-shadow: 0px 4px 14px 0px #00000012;
}
.bbb_header .container{
	padding-top: 19px;
	padding-bottom: 14px;
	background: url('./../images/bbb-header-banner.svg') no-repeat;
	background-position: left 15px top;
	background-size: 100%;
}
.bbb_nav{
	height:  100%;
	justify-content: flex-end;
	position: relative;
	top:  7px;
}
.bbb_nav ul{
	margin-bottom: 0;
}

@media (min-width: 60rem){
	.bbb_nav li{
		display: inline-block;
		margin-left: 70px;
	}

	.bbb_header .container{
		background-position: right 15px top;
		background-size: inherit;
	}
}

.bbb_nav li{
	display: inline-block;
	margin-left: 12px;
}
.bbb_nav li:first-child{
	margin-left: 0px;
}
.bbb_nav a{
	font-weight: 600;
	font-size: 15px;
	line-height: 100%;
	color: var(--grey);
	text-decoration:  none;
}
.bbb_nav a:hover,
.bbb_nav a:focus{
	color: var(--green);
}
@media (min-width: 60rem){
	.bbb_nav a{
		font-size: 18px;
	}
}


.btn{
	color:  #fff;
	background: var(--green);
	border: 1px solid var(--green);
	text-transform: uppercase;
	font-weight: 600;
	font-size: 13px;
	line-height: 100%;
	padding: 1rem 2rem;
	border-radius: 30px;
}

.btn:hover,
.btn:focus{
	color: var(--green);
	background: #fff;
	outline: none;
	box-shadow: none;
}

h2{
	font-weight: 300;
	font-size: clamp(2.5rem, 5vw, 5rem);
	line-height: 1.1;
	letter-spacing: -2px;
	margin-bottom: 0;
}

.bbb_title span{
	font-weight: 600;
	font-size: 13px;
	line-height: 100%;
	text-transform: uppercase;
	color:  var(--green);
	margin-bottom: -5px;
	display: block;
}
.bbb_paragraph *{
	font-size: 19px;
	line-height: 29px;
}





#banner{
	background: var(--green-extra-light);
}

#banner .container{
	position: relative;
	z-index: 9;
	padding: 110px 0 60px 0;
}


#banner .container_left:before{
	content:  '';
	background: url('./../images/bbb-arrow.svg') no-repeat bottom right;
	background-size: contain;
	height: 380px;
	width: 50vw;
	position: absolute;
	bottom: 0;
	right: calc(58.3333%);
}
@media (min-width: 75rem){
	#banner .container{
		padding: 200px 0 190px 0;
	}

	#banner .container_left:after{
		content:  '';
		height: 100%;
		position: absolute;
		bottom: 0;
		right: calc(100% - 15px);
		background: url('./../images/bbb-banner-squared.jpg') no-repeat center;
		background-size: cover;
		aspect-ratio: 3 / 2;
		transform: scaleX(-1)
	}
	#banner .container_right:after{
		content:  '';
		height:  80%;
		position: absolute;
		bottom: 0;
		left: calc(58.3333% - 15px);
		background: url('./../images/bbb-banner-squared.jpg') no-repeat center;
		background-size: cover;
		aspect-ratio: 3 / 2;
	}
	#banner .container_right:before{
		background-size: 430%;
	}
}

#banner .container_right:before{
	content:  '';
	background: url('./../images/bbb-shape.svg') no-repeat top left;
	background-size: cover;
	height: 100%;
	width: 50vw;
	position: absolute;
	top: 0;
	left: 60%;
}
@media (min-width: 60rem){
	#banner .container_right:before{
		left: 70%;
	}
}
@media (min-width: 75rem){
	#banner .container_right:before{
		left: 50%;
	}
}


.bbb_banner_title{
	font-weight: 300;
	font-size: clamp(2.4rem, 4vw, 4.4rem);
	line-height: 1.09;
	margin-bottom: 20px;
}


.bbb_banner_desc{
	font-weight: 300;
	font-size: clamp(1.375rem, 2.5vw, 2.125rem); /* min 24px, max 37px */
	line-height: 1.27;
	max-width:  570px;
}
.bbb_banner_desc p:last-child{
	margin-bottom: 0;
}




#about{
	padding: 60px 0 43px 0;
	position: relative;
	z-index: 1;
}
@media (min-width: 60rem){
	#about{
		padding: 200px 0 183px 0;
		position: relative;
		z-index: 1;
	}
}
#about .bbb_title{
	padding-top: 60px;
}

.bbb_about_img_container:before{
	background: var(--green-light);
	width: 50%;
	aspect-ratio: 1 / 1;
	top: -50px;
	left:  -50px;
}
.bbb_about_img_container:after{
	background: var(--green-extra-light);
	width: 100%;
	aspect-ratio: 10 / 7;
	bottom: -90px;
	right: calc(-20% - 15px);
}
.bbb_about_img{
	position: relative;
	z-index: 1;
}
@media (min-width: 60rem){
	.about_desc_container{
		margin-left: 16.66666%;
	}
	.bbb_about_img_container:before,
	.bbb_about_img_container:after{
		content: '';
		display: block;
		position: absolute;
	}
	.about_desc{
		margin: 50px 0;
	}
}

.about_desc{
	margin: 20px 0;
}
.about_desc p:last-child{
	margin-bottom: 0;
}




#why{
	background: var(--green-extra-light);
	padding: 60px 0;
	position: relative;
}


.bbb_why_intro{
	padding: 40px 0;
}
.bbb_why_intro *{
	font-weight: 300;
	font-size: 22px;
	line-height: 1.27;
}
.bbb_why_intro p:last-child{
	margin-bottom: 0;
}
@media (min-width: 60rem){	

	#why{
		padding: 110px 0;
	}
	#why:before{
		content: '';
		height: 220px;
		background: var(--green-extra-light);
		position: absolute;
		top: -220px;
		width: 50vw;
		left: calc(50vw + 7.9167rem + 10px);
	}
	.bbb_why_desc{
		padding-left: 55px;
		padding-top: 20px;
	}
	.bbb_why_intro{
		padding: 40px 0 80px;
	}
	.bbb_why_intro *{
		font-size: 26px;
	}
}

.bbb_why_desc p:last-child{
	margin-bottom: 0;
}
.bbb_why_desc{
	padding-top: 40px;
}




#news{
	padding: 110px 0 70px;
}
@media (min-width: 60rem){
	#news{
		padding: 110px 0 170px;
	}
}
#news .splide__arrows{
	width: calc(100% + 4rem);
}
#news .splide{
	padding-top: 50px;
	width: 100%;
}
#news .splide__arrow{
	font-size: 2rem;
	height: auto;
	width: auto;
	background: none;
	color: var(--grey);
	opacity: 1;
	border: none;
	transition:  color .2s ease-in-out
}
#news .splide__arrow--prev{
	left:  -1.5rem;
}
#news .splide__arrow--next{
	right: -1.5rem;
}

.splide__pagination{
	bottom: -1.5rem;
}
.splide__pagination__page{
	height: 16px;
	width: 16px;
}
@media (min-width: 35.9375rem){
	.splide__pagination{
		display: none;
	}
}
@media (min-width: 75rem){
	#news .splide__arrow--prev{
		left:  -1.5rem;
	}
	#news .splide__arrow--next{
		right: -1.5rem;
	}
}
@media (min-width: 95rem){
	#news .splide__arrow--prev{
		left:  -3rem;
	}
	#news .splide__arrow--next{
		right: -3rem;
	}
}
#news .splide__arrow:hover{
	color:  var(--green);
}
#news .splide__arrow:focus{
	outline: none;
	box-shadow: none;
}
#news .splide__slide{
	padding-bottom: 10px;
}
.bbb_post{
	box-shadow: 0px 4px 14px 0px #00000012;
	background: #fff;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
}
#news .bbb_post_body{
	padding: 2rem 2rem 1rem 2rem;
	flex-grow:  1;
}
.bbb_post_meta{
	font-weight: 600;
	font-size: 13px;
	line-height: 100%;
	text-transform: uppercase;
	margin-bottom: 5px;
}
.bbb_post a{
	color: var(--grey);
	text-decoration:  none;
}
.bbb_post a:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left:  0;
}
.bbb_post_news .bbb_post_title a{
	color: var(--blue);
}
.bbb_post_events .bbb_post_title a{
	color: var(--green);
}
.bbb_post_resources .bbb_post_title a{
	color: var(--grey);
}
.bbb_post_thumb{
}
.bbb_post_title{
	font-weight: 300;
	font-size: 26px;
	line-height: 33px;
}
.bbb_post_desc{
	font-weight: 400;
	font-size: 14px;
	line-height: 25px;
}


.bbb_post_footer{
	padding: 0 2rem 2rem 2rem;
}

.bbb_post_cat .btn{
	background: var(--grey);
	border-color: var(--grey);
}
.bbb_post_news .btn{
	background: var(--blue);
	border-color: var(--blue);
}
.bbb_post_events .btn{
	background: var(--green);
	border-color: var(--green);
}
.bbb_post_resources .btn{
	background: var(--grey);
	border-color: var(--grey);
}



.bbb_post_cat{
	color: var(--grey);
}
.bbb_post_news .bbb_post_cat{
	color: var(--blue);
}
.bbb_post_events .bbb_post_cat{
	color: var(--green);
}
.bbb_post_resources .bbb_post_cat{
	color: var(--grey);
}


.bbb_post_footer{
	display: flex;
	justify-content:  space-between;

}



#members{
	padding-bottom: 110px;
}

.bbb_members_container{
	display:  flex;
	flex-wrap: wrap;
	padding: 2rem 0 0;
}
.bbb_member{
	width: 23%;
	height: 100%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: var(--green-extra-light);
	border: 1px solid var(--green-light);
	display: inline-flex;
	padding: 1.5rem;
	margin-right: 1.25%;
	margin-bottom: -1rem;
}

@media  (max-width: 74.9375rem){
	.bbb_member{
		width: 23%;
		margin-right: 1.25%;
	}
	.bbb_member:nth-child(8n){
		margin-right: 0;
		background: red;
	}
	.bbb_member:nth-child(8n-3){
		margin-left: 8.75%;
		background: blue;
	}
}

@media (min-width: 75rem){
	.bbb_member{
		width: 16.25%;
		margin-right: 1.25%;
		padding: 2rem;
	}
	.bbb_member:nth-child(10n){
		margin-right: 0;
	}
	.bbb_member:nth-child(10n-4){
		margin-left: 8.75%;
	}
}


.bbb_member img{
	margin:  auto;
	display: inline-block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}


#contact{
	background: #fff url('./../images/bbb-header-banner.svg') no-repeat top right;
	background-size: 90%;
	box-shadow: 0px -4px 14px 0px #00000012;
	padding:  5em 0;
}


.contact_title{
	font-weight: 300;
	font-style: italic;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.3;
	color: var(--blue);
	display: block;
	margin: 3rem auto 0;
	text-align: center;
}



.contact_container{
	display: flex;
}
.contact_img{
	width: 240px;
	height:  auto;
}

.contact_people{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 20px;
}
@media (min-width: 60rem){
	.contact_people{
		padding-left: 40px;
	}
	.contact_title{
		text-align:  left;
		margin-left: 0;
	}
}


@media (min-width: 75rem){
	#contact{
		background: #fff url('./../images/strip.svg') no-repeat top right;
		padding: 3rem 0;
	}
}

.contact_name{
	font-weight: 600;
	font-size: 18px;
	line-height: 100%;
	margin-bottom: 5px;
}
.contact_job{
	font-weight: 600;
	font-size: 13px;
	line-height: 100%;
	text-transform: uppercase;
	margin-bottom: .5rem;
}
.contact_email{
	font-size: 14px;
	line-height: 25px;
	text-decoration: underline;
	color: var(--grey);
}


.splide__pagination__page.is-active{
	background: var(--grey);
}









.logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 0 1rem;
	padding: 1.5rem;
	position: relative;
}

/* Chaque case prend toute la cellule et reste ronde */
.logo-grid a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--green-extra-light);
	border: 1px solid var(--green-light);
	overflow: hidden;
	position: relative;
	transition: transform 0.3s ease;
	left: -25%;
}

/* Images bien contenues */
.logo-grid img {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
}



/* Ajout : 3 colonnes sur petit écran */
@media (max-width: 48rem) {
	.logo-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.logo-grid a:nth-child(n + 4):nth-child(-n + 6),
	.logo-grid a:nth-child(n + 10):nth-child(-n + 12),
	.logo-grid a:nth-child(n + 16):nth-child(-n + 18),
	.logo-grid a:nth-child(n + 22):nth-child(-n + 24),
	.logo-grid a:nth-child(n + 28):nth-child(-n + 30),
	.logo-grid a:nth-child(n + 34):nth-child(-n + 36),
	.logo-grid a:nth-child(n + 40):nth-child(-n + 42),
	.logo-grid a:nth-child(n + 46):nth-child(-n + 48) {
		left: 33.3333%;
		margin-top: 0rem;
	}
}



@media (min-width: 48rem) and (max-width: 75rem) {
	.logo-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.logo-grid a:nth-child(n + 5):nth-child(-n + 8),
	.logo-grid a:nth-child(n + 13):nth-child(-n + 16),
	.logo-grid a:nth-child(n + 21):nth-child(-n + 24),
	.logo-grid a:nth-child(n + 29):nth-child(-n + 32),
	.logo-grid a:nth-child(n + 37):nth-child(-n + 40),
	.logo-grid a:nth-child(n + 45):nth-child(-n + 48),
	.logo-grid a:nth-child(n + 53):nth-child(-n + 56) {
		left: 25%;
		margin-top: -1rem;
	}
	/* Images bien contenues */
	.logo-grid img {
		max-width: 80%;
		max-height: 80%;
		object-fit: contain;
	}
}



/* Décalage horizontal sur les lignes paires */
@media (min-width: 75rem) {
	.logo-grid {
		grid-template-columns: repeat(6, 1fr);
	}

	.logo-grid a:nth-child(n + 7):nth-child(-n + 12),
	.logo-grid a:nth-child(n + 19):nth-child(-n + 24),
	.logo-grid a:nth-child(n + 31):nth-child(-n + 36),
	.logo-grid a:nth-child(n + 43):nth-child(-n + 48),
	.logo-grid a:nth-child(n + 55):nth-child(-n + 60) {
		left: 25%;
		margin-top: -.5rem;
	}
	/* Images bien contenues */
.logo-grid img {
		max-width: 90%;
		max-height: 90%;
		object-fit: contain;
	}
}