@charset "utf-8";
/* CSS Document */

@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Light.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Futura';
src: url('typo/Futura.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

body,html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto';
font-size: 18px;
background-color: #14262d;
color: #ffffff;
}

/* TYPO -------------------------- */
p{ margin: 0; padding: 0; }
h1{
	width:100%;
	font-family: 'Futura';
	font-size: 2em;
	font-weight: normal;
	color: #6ec1a3;
	margin: 0 0 20px 0;	
	position: relative;
	float: left;
	clear: both;
}
h1:first-letter{
	font-size: 1.4em;
	color: #ffffff;
}
h1 p{
	display: inline;
	padding: 0 20px 0 0;
	border-bottom:1px solid #6ec1a3;
}

h2{
	width:100%;
	font-family: 'Futura';
	font-size: 2em;
	font-weight: normal;
	color: #6ec1a3;
	margin: 0 0 20px 0;	
	position: relative;
	float: left;
	clear: both;
}
h2:first-letter{
	font-size: 1.4em;
	color: #ffffff;
}
h2 p{
	display: inline;
	padding: 0 20px 0 0;
	border-bottom:1px solid #6ec1a3;
}
h2.centrer{
	text-align: center;
}
h2.centrer p{ border:0; }
h2.centrer p::after{ 
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: calc(100% - 60px);
max-width: 500px;
height: 1px;
background-color:#6ec1a3;
transform: translateX(-50%);
}

.vert{ color:#6ec1a3; }
.bleuF{ color:#14262d; }
.bleuC{ color:#37505a; }
.blanc{ color:#ffffff; }

.mini{ font-size: 0.6em; }
.petit{ font-size: 0.9em; }
.grand{ font-size: 1.5em; }
.big{ font-size: 2em; }

.lienSimple{ color: inherit; text-decoration: none; }

/* --------------------------------- */

.haut{
	width: 100%;
	position: relative;
	float: left;
}
.bandTop{
	width: 100%;
	height: 90px;
	max-width: 1600px;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

.logoP{
	width: 180px;
	height: 70px;
	text-align: center;
	position: absolute;
	float: left;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.logoP img{ max-height: 100%; width: auto; }
.zoneMenu{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap:20px;
	position: absolute;
	float: right;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.bMenuP{
	text-align: center;
	padding: 5px 10px;
	border-radius: 8px;
	position: relative;
	float: left;
	overflow: hidden;
	transition: all 0.4s;
}
.bMenuP p{
	font-size: 1.1em;
	color: #ffffff;
	position: relative;
	float: left;
	z-index: 3;
}
.barreMenuP{
	width: 100%;
	height: 0;
	background-color: #6ec1a3;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	transition: all 0.2s;
	z-index: 1;
}
.bMenuP:hover .barreMenuP{ height: 100%; }
.bMenuP:hover p{ color:#14262d; }
.mailP{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #6ec1a3;
	position: relative;
	float: left;
}
.mailP img{
	max-height: 60%;
	width:auto;
	position: absolute;
	float: left;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.menuMob{ display: none; }
.menuP{
	width: 100px;
	border-radius: 8px;
	background-color: #6ec1a3;
	font-size: 1.2em;
	color: #14262d;
	text-align: center;
	padding: 10px;
	z-index: 1;
}
.imgHamb{ max-height: 18px; width: auto; }
.ssMenu{
	width: 250px;
	background-color:#14262d;
	border: 1px solid #6ec1a3;
	box-shadow: 0 0 5px #000000;
	position: fixed;
	float: left;
	top: -1px;
	transform: translateY(-450px);
	z-index: 10;
	transition: all 0.6s;
}
.ssMenu.affiche{
	transform: translateY(0);
}
.bMenuClose{
	width: 100%;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
	cursor: pointer;
	gap:10px;
	margin: 5px 0 15px 0;
}
.bMenuClose p{ 
	white-space: nowrap;
	text-transform: uppercase;
	text-align: center;
	color:#6ec1a3;
	font-size: 1.2em;
	position: relative;
	float: left;
	transition: all 0.4s;
}
.flecheMenuRetour{
	width: 15px;
	height: 20px;
	clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 75%);
	background-color: #6ec1a3;
	position: relative;
	float: left;
	transition: 0.2s all;
	z-index: 2;
}
.bMenuClose:hover p{ color: #ffffff; }
.bMenuClose:hover .flecheMenuRetour{ background-color: #ffffff; transform: rotate(360deg);}
.bMenu{
	width: calc(100% - 20px);
	height: 30px;
	border-bottom: 1px solid #6ec1a3;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
	padding: 5px 0;
}
.bMenu p{
	font-size: 1.1em;
	color: #ffffff;
	position: absolute;
	float: left;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
}
.barreMenu{
	width: 0;
	height: 100%;
	background-color: #37505a;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	transition: all 0.2s;
	z-index: 1;
}
.flecheMenu{
	width: 20px;
	height: 15px;
	clip-path: polygon(25% 50%, 0 0, 100% 50%, 0 100%);
	background-color: #14262d;
	position: absolute;
	float: left;
	left: calc(100% - 40px);
	top: 50%;
	transform: translate(-100%, -50%);
	transition: 0.2s all;
	z-index: 2;
}
.bMenu:hover .barreMenu{ width: 100%; }
.bMenu:hover .flecheMenu{ background-color: #6ec1a3; left: calc(100% - 10px); }
.bContact{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #6ec1a3;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	margin: 30px 0;
	clear: both;
}
.bContact img{
	max-height: 60%;
	width:auto;
	position: absolute;
	float: left;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.barreTop{
	width: 100%;
	height: 14px;
	background-color: #6ec1a3;
	position: relative;
	float: left;
}
.bandeauTop{
	width: 100%;
	height: 700px;
	position: relative;
	float: left;
	z-index: 1;
}
.demiBandeauTop{
	width: 50%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	position: relative;
	float: left;
	overflow: hidden;
}
.tierBandeauTop{
	width: 33.3%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	position: relative;
	float: left;
	overflow: hidden;
}
.tierBandeauTop.accG{ background-image: url("img/fond-accG.webp"); }
.tierBandeauTop.accC{ background-image: url("img/fond-accC.webp"); }
.tierBandeauTop.accD{ background-image: url("img/fond-accD.webp"); }
.demiBandeauTop.ctG{ background-image: url("img/fond-ctG.webp"); }
.demiBandeauTop.ctD{ background-image: url("img/fond-ctD.webp"); }

.fullBandeauTop{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	position: relative;
	float: left;
	overflow: hidden;
}
.fullBandeauTop.casier{ background-image: url("img/fond-casier.webp"); }
.fullBandeauTop.agence{ background-image: url("img/fond-amenag.webp"); }
.fullBandeauTop.logistique{ background-image: url("img/fond-logistique.webp"); }
.fullBandeauTop.actu{ background-image: url("img/fond-actu.webp"); }
.triangleBandeauBas{
	width: 120px;
	height: 70px;
	background-color: #14262d;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	position: absolute;
	float: left;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	z-index: 10;
}
.triangleBandeauHaut{
	width: 120px;
	height: 70px;
	background-color: #6ec1a3;
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	position: absolute;
	float: left;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: 10;
}
.accrochePage{
	width: calc(100% - 40px);
	max-width: 1600px;
	color: #ffffff;
	font-size: 2.5em;
	font-family: 'Futura';
	text-align: center;
	border-bottom: 1px solid #6ec1a3;
	padding: 20px 0;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 40px;
}

.bas{
	width: 100%;
	margin-top: 40px;
	padding-top: 70px;
	position: relative;
	float: left;
}
.barreBas{
	width: 100%;
	height: 14px;
	background-color: #6ec1a3;
	position: relative;
	float: left;
}
.triangleBas{
	width: 120px;
	height: 70px;
	background-color: #6ec1a3;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	position: absolute;
	float: left;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: 10;
}
.flexBasPage{
	width: 100%;
	display: flex;
	justify-content: space-between;
	position: relative;
	float: left;
	margin: 20px 0;
}
.colBas200{
	width: 320px;
	position: relative;
	float: left;
	margin: 0 10px;
}
.colBas200.droite{
	text-align: right;
}
.colBasCentre{
	font-size: 1.3em;
	text-align: center;
	position:relative;
	float: left;
}
.menuBas{
	line-height: 1.6em;
}
.copyr{
	width: 100%;
	border-top: 1px solid #6ec1a3;
	padding: 10px 0 30px 0;
	font-size: 0.9em;
	text-align: center;
	position: relative;
	float: left;
}


.paraSTD{
	width: calc(100% - 40px);
	max-width: 1520px;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	clear:both;
	margin: 40px 0;
	overflow: hidden;
	/*border: 1px dashed #999999;*/
}
.paraFull{
	width: calc(100% - 40px);
	position: relative;
	float: left;
	background-size: cover;
	background-position: center center;
	margin: 40px 0;
	padding: 20px;
	clear: both;
	overflow: hidden;
}
.paraFull.fdBleu{ 
	padding: 40px 20px;
	background-color: #263b44; 
}
.paraFull.exp{
	background-image: url("img/fond-experience.webp");
	background-size: cover;
	background-position: center center;
}
.paraFull.suivi{
	background-image: url("img/fond-suivi.webp");
	background-size: cover;
	background-position: center center;
}
.paraFull.rea{
	background-image: url("img/fond-rea.webp");
	background-size: cover;
	background-position: center center;
}

.contenuPara{
	width: 100%;
	max-width: 1520px;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
}

.paraDeco{
	width: 100%;
	display: flex;
	align-items: center;
	position: relative;
	float: left;
	margin: 40px 0;
	overflow: hidden;
}
.paraDecoG{
	width: 200px;
	height: 280px;
	position: relative;
	float: left;
}
.paraDecoG .blocA{
	width: 85%;
	aspect-ratio:3/4;
	background-color: #6ec1a3;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	z-index: 1;
}
.paraDecoG .blocB{
	width: 50%;
	aspect-ratio:1/1;
	background-color: #14262d;
	border:1px solid #6ec1a3;
	border-radius: 8px;
	position: absolute;
	float: left;
	left: 40%;
	bottom: 0;
	z-index: 2;
}
.paraDecoG .blocC{
	width: 25%;
	aspect-ratio:1/1;
	background-color: #14262d;
	border:1px solid #6ec1a3;
	border-radius: 8px;
	position: absolute;
	float: left;
	right: 0;
	top:15%;
	z-index: 2;
}
.paraDecoD{
	width: 200px;
	height: 280px;
	position: relative;
	float: left;
}
.paraDecoD .blocA{
	width: 85%;
	aspect-ratio:3/4;
	background-color: #6ec1a3;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	position: absolute;
	float: left;
	top: 0;
	right: 0;
	z-index: 1;
}
.paraDecoD .blocB{
	width: 50%;
	aspect-ratio:1/1;
	background-color: #14262d;
	border:1px solid #6ec1a3;
	border-radius: 8px;
	position: absolute;
	float: left;
	right: 40%;
	bottom: 0;
	z-index: 2;
}
.paraDecoD .blocC{
	width: 25%;
	aspect-ratio:1/1;
	background-color: #14262d;
	border:1px solid #6ec1a3;
	border-radius: 8px;
	position: absolute;
	float: left;
	left: 0;
	top:15%;
	z-index: 2;
}
.contenuDeco{
	width:calc(100% - 480px);
	max-width: 1520px;
	position: relative;
	float: left;
	margin: 0 40px;
}

.ligneFlex{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
}
.ligneFlex.start{ justify-content: flex-start; }
.ligneFlex.btw{ justify-content: space-between; }
.ligneFlex.top{ align-items: flex-start; }
.ligneFlex.contact{
	justify-content: flex-start;
	margin-bottom: 20px;
}
.colPhoto{
	width: 500px;
	position: relative;
	float: left;
}
.colPhoto img{ max-width: 100%; height: auto; }
.colTxt75{
	width:calc(100% - 540px);
	margin: 0 20px;
	position: relative;
	float: left;
}

.col100{
	width: 100%;
	position: relative;
	float: left;
}
.col100.centrer{ text-align: center; }
.col50{
	width:calc(50% - 40px);
	position: relative;
	float: left;
	margin: 0 20px;
}

/* BOUTON ------------------------------ */
.boutonTransparent{
	width: 100%;
	height: 100%;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	z-index: 5;
}

.bSavoir{
	width: 180px;
	border-radius: 8px;
	border: 1px solid #6ec1a3;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
	overflow: hidden;
	position: relative;
	float: left;
}
	.txtSavoir{
		color: #6ec1a3;
		position: relative;
		float: left;
		margin-right: 20px;
		z-index: 2;
	}
	.fleche{
		width: 25px;
		height: 20px;
		clip-path: polygon(25% 50%, 0 0, 100% 50%, 0 100%);
		background-color: #6ec1a3;
		position: relative;
		float: left;
		transition: 0.2s all;
		z-index: 2;
	}
	.fdBSavoir{
		width: 0;
		height: 100%;
		background-color: #6ec1a3;
		position: absolute;
		float: left;
		left: 0;
		top: 0;
		transition: 0.2s all;
		z-index: 1;
	}
.bSavoir.flD{
	position: relative;
	float: right;
}
.bSavoir:hover .fdBSavoir{ width: 100%; }
.bSavoir:hover .txtSavoir{ color: #14262d; }
.bSavoir:hover .fleche{ background-color: #14262d; transform: rotate(360deg); }


/* ACCUEIL ---------------------------- */

.sloganBandeau{
	width: calc(100% - 100px);
	padding: 10px;
	border-radius: 8px;
	background-color: #6ec1a3;
	color: #14262d;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	position: absolute;
	float: left;
	bottom: 70px;
	left: 50%;
	transform: translateX(-50%);
	animation-name: afficheSlogan;
	animation-iteration-count: 1;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
	margin-bottom: -100px;
}
.sloganBandeau.deux{ animation-delay: 0.5s; }

.colListeAcc{
	width: 35%;
	position: relative;
	float: left;
	margin-left: 15%;
}
.listeAcc{
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.listeAcc li{
	font-size: 2em;
	margin: 20px 0;
	display: flex;
	align-items: center;
	padding-left: 40px;
}
.listeAcc li::before{
	content:'';
	width: 25px;
	height: 25px;
	background-color: #14262d; 
	border:1px solid #6ec1a3;
	border-radius: 8px;
	position: absolute;
	left: 0;
	float: left;
}

.caseAcc{
	width: 275px;
	position: relative;
	float: left;
	margin: 40px 60px;
}
.ligneNumAcc{
	width: 100%;
	font-size: 2.5em;
	text-align: center;
	position: relative;
	float: left;
}
.infoNumAcc{
	width: 100%;
	background-color: #6ec1a3;
	color: #14262d;
	text-align: center;
	font-size: 1.5em;
	border-radius: 8px;
	position: relative;
	float: left;
	padding: 5px 0;
}

.zonePartenaire{
	width: 100%;
	background-color:#37505a;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	float: left;
	margin: 20px 0;
	padding: 20px 0;
	gap:30px;
}
.zonePartenaire.bas{
	margin: 0;
	padding: 10px 0;
	gap:5px;
}

/* CASIER -------------------------- */

.motMEA{
	min-width: 120px;
	padding: 5px 10px;
	border: 1px solid #6ec1a3;
	border-radius: 8px;
	font-family: 'Futura';
	font-size: 1.1em;
	color: #6ec1a3;
	text-align: center;
	margin: 0 20px;
	position: relative;
	float: left;
}
.motMEAfd{
	min-width: 250px;
	padding: 5px 10px;
	border: 1px solid #6ec1a3;
	background-color: #6ec1a3;
	border-radius: 8px;
	font-family: 'Futura';
	font-size: 1.4em;
	color: #14262d;
	text-align: center;
	margin: 0 20px;
	position: relative;
	float: left;
}

.bigContact{
	padding: 10px 20px;
	border: 1px solid #6ec1a3;
	background-color: #14262d;
	border-radius: 8px;
	font-family: 'Futura';
	font-size: 2.5em;
	color: #6ec1a3;
	text-align: center;
	margin: 60px 0 20px 0;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
}

/* AGENCEMENT ---------------------------- */
.video{
width:100%;
aspect-ratio:16/9;
position: relative;
margin-bottom: 40px;
}
.vidP{
width:100%;
position:relative;
float:left;
}

.galerieFlex{
	width: 100%;
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
	gap:30px;
	position: relative;
	float: left;
}
.caseGalerie{
	width: 250px;
	height: 250px;
	border: 1px solid #6ec1a3;
	position: relative;
	float: left;
	overflow: hidden;
	cursor: pointer;
}
.photoGalerie{
	width: 100%;
	height: 100%;
	background-color: #14262d;
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.photoGalerie .imgRea{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition:0.6s all;
}
.caseGalerie:hover .photoGalerie .imgRea{
	transform: translate(-50%, -50%) scale(1.1);
}

/* CONTACT & FORMULAIRE -------------------------------- */

.chpFull{
	width: calc(100% - 2px);
	color: #ffffff;
	font-family: 'Roboto';
	font-size: 1em;
	text-align: center;
	border-radius: 8px;
	border: 1px solid #6ec1a3;
	background-color: #37505a;
	position: relative;
	float: left;
	margin: 5px 0;
	padding: 10px 0;
	clear: both;
}
.chpFull::placeholder{ color: #dddddd; }
.areaFull{
	width: calc(100% - 2px);
	height: 200px;
	color: #ffffff;
	font-family: 'Roboto';
	font-size: 1em;
	text-align: left;
	border-radius: 8px;
	border: 1px solid #6ec1a3;
	background-color: #37505a;
	position: relative;
	float: left;
	margin: 5px 0;
	padding: 10px 0;
	clear: both;
}
.areaFull::placeholder{ color: #dddddd; }
.formTest{
	width: calc(100% - 40px);
	padding: 0 5px;
	margin: 10px 0;
	position: relative;
	float: left;
}
.chpMini{
	width:80px;
	margin: 15px;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #6ec1a3;
	background-color: #37505a;
	color: #ffffff;
	font-family: 'Roboto';
	font-size: 1em; 
}
.subStd{
	width:250px;
	max-with:calc(100% - 2px);
	border-radius: 8px;
	font-family: 'Roboto';
	color: #6ec1a3;
	font-size: 1em;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #6ec1a3;
	background-color: #14262d;
	position: relative;
	float: left;
	clear: both;
	left: 50%; 
	transform: translateX(-50%);
	margin: 10px 0;
	padding: 10px 0;
	cursor: pointer;
}

.cercleCoord{
	width: 65px;
	height: 65px;
	border: 1px solid #6ec1a3;
	border-radius: 50%;
	position: relative;
	float: left;
	margin-right: 20px;
	overflow: hidden;
}
.cercleCoord img{
	max-height: 60%;
	width:auto;
	position: absolute;
	float: left;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.telCoord{
	font-size: 1.6em;
	position: relative;
	float: left;
}
.emailCoord{
	font-size: 1.4em;
	font-weight: bold;
	position: relative;
	float: left;
}
.decoCarte{
	width: 100%;
	position: relative;
	float: left;
}
.decoCarte img{
	max-width: 100%;
	height: auto;
}

.message{
width:350px;
max-width: 90%;
background-color:#ffffff;
border:1px solid #00205b;
border-radius:8px;
font-size:1em;
color: #000000;
text-align:center;
height:auto;
padding:4px;
box-shadow: 0 0 5px #666666;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
z-index:11;
overflow:auto;
}
.closeF{
width:100px;
background-color:#6ec1a3;
border-radius:8px;
color:#ffffff;
font-size:0.9em;
text-align:center;
line-height:25px;
vertical-align:middle;
position:relative;
float:left;
padding: 4px;
top:0;
left: 50%;
transform: translateX(-50%);
}
.closeF a{
color:#ffffff;
text-decoration:none;
}

/* ACTUALITE -------------------------- */
.groupeLigneActu{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	position: relative;
	float: left;
}
.ligneActu{
	width: calc(100% - 40px);
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
	position: relative;
	float: left;
	background-color: #101a1d;
	margin: 20px 0;
	padding: 10px;
	box-shadow: 0 0 10px #000000;
	gap:10px;
}
.colTitreActu{
	width: calc(100% - 10px);
	position: relative;
	border-bottom: 1px solid #6ec1a3;
	padding: 5px;
	margin-bottom: 10px;
}
.colTitreActu p{
	font-size: 1.3em;	
}
.colTitreActu p:first-letter{
	font-size: 1.5em;
	font-weight: bold;
	color: #6ec1a3;
}
.colBoutonSuite{
	width: calc(100% - 10px);
	position: relative;
}
.colPhActu{
	width:400px;
	position: relative;
}
.colPhActu img{ max-width: calc(100% - 4px); height: auto; border: 2px solid #37505a; display: block; }
.infoActu{
	width: calc(100% - 420px);
	display: flex;
	flex-direction: column;
	gap:10px;
	position: relative;
}
.colAccrActu{
	width:100%;
	position: relative;
}
.dateActu{
	font-size: 0.9em;
	color: #6ec1a3;
}
.colBoutonSuite{
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	position: relative;
	margin-top: 20px;
}

/* ANIMATION ------------------------- */
@keyframes afficheSlogan{
	from{
		opacity: 0;
		margin-bottom: -100px;
	}
	70%{
		opacity: 1;
		margin-bottom: 30px;
	}
	100%{
		opacity: 1;
		margin-bottom: 0;
	}
}