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

@font-face {
  font-family: 'Roboto';
  src: url('../typo/Roboto.woff2') format('woff2 supports variations'),
       url('../typo/Roboto.woff2') format('woff2-variations');
  font-weight: 100 900;  /* active toute la plage de poids */
  font-style: normal;
  font-display: swap;
}

body,html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Roboto';
	font-size: 16px;
	font-weight: 400;
	color: #ffffff;
	line-height: 1.2em;
	background-color: #000000;
}

:root{
    --decalBase: 30px; /* var(--decalBase); */
}

/* TYPO ----------------------------------- */
p{ margin: 0; padding: 0; }
h1,h2,h3{ margin: 0; padding: 0; font-weight: normal; }

.titrePage{
font-family: tornac, sans-serif;
font-style: normal;
font-weight: 400;
color: #5c8850;
font-size: 1.5em;
}

.titreh1{
width: 100%;
font-family: tornac, sans-serif;
font-style: normal;
font-weight: 400;
color: #fffff;
font-size: 1.5em;
line-height: 1em;
display: inline-block;
position: relative;
margin-bottom: 50px;
}
/* trait rouge (le plus long) */
.titreh1::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 100px; /* longueur */
    height: 1px;
    background: #a93432;
}
/* trait vert (plus court) */
.titreh1::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -25px; /* espace entre les deux */
    width: 70px; /* plus court */
    height: 1px;
    background: #5c8850;
}

.titreh1.negatif{ color: #000000; }
.titreh1.centrer{ text-align: center; }
.titreh1.centrer::after{ left: 50%; transform: translateX(-50%); }
.titreh1.centrer::before{ left: 50%; transform: translateX(-50%); }

.titreh2{
width: 100%;
font-family: tornac, sans-serif;
font-style: normal;
font-weight: 400;
color: #fffff;
font-size: 1.3em;
display: inline-block;
position: relative;
margin-bottom: 10px;
}
	
.lienStd{ color:inherit; text-decoration: none; }

.rouge{ color: #a93432; }
.vert{ color: #5c8850; }
.mini{ font-size: 0.8em; }
.petit{ font-size: 0.9em; }
.grand{ font-size: 1.2em; }
.big{ font-size: 1.5em; }

.listeSimple{
	margin: 0;
	padding: 0;
	list-style: none;
}
.listeSimple li{
	padding-left: 20px;
	margin: 5px 0;
	position: relative;
}
.listeSimple li::before{
	content:'';
	width: 10px;
	height: 10px;
	background-color: #a93432;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
/* --------------------------------------- */

/* IMAGE ------------------------------------ */

.imMW{ max-width: 100%; height: auto; display: inline-block; }
.imMH{ max-height: 100%; width: auto; display: inline-block; }

.imCover{ width: 100%; height: 100%; object-fit: cover; }
.imContain{ width: 100%; height: 100%; object-fit: contain; }

.colPhoto{
	width: 100%;
	position: relative;
	float: left;
	padding-bottom: 15px;
}
.visuPhotoFull{
	width: 100%;
	position: relative;
	z-index: 2;
}
.visuPhoto{
	width: calc(100% - 30px);
	position: relative;
	z-index: 2;
}
.visuPhoto.centre{ max-width: 600px; left: 50%; transform: translateX(-50%); }
.visuPhoto.droite{ float: right; }
.fondPhoto{
	width: 100%;
	height: 100px;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #222222;
	z-index: 1;
}
.fondPhoto.rouge{ background-color: #3f1413; }
.fondPhoto.vert{ background-color: #283b23; }

.puceInterne{
	width: 10px;
	height: 10px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: #ffffff;
	position: relative;
}
.puceInterne.rouge{ border: 2px solid #a93432; background: #a93432; }
.puceInterne.vert{ border: 2px solid #5c8850; background: #5c8850; }

.lignePhoto{
	width: 100%;
	display: flex;
	align-items: flex-end;
	gap:15px;
	margin: 15px 0;
}
.casePhoto{
	width: 50%;
	aspect-ratio:1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: #222222;
	overflow: hidden;
	z-index: 2;
}
.casePhoto.longue{
	width: 100%;
	aspect-ratio:2/1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: #333333;
}
.casePhoto.haute{
	width: 50%;
	aspect-ratio:2/3;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: #333333;
}
.casePhoto a{ width: 100%; height: 100%; position: absolute; }
.casePhoto img{
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.fondLignePhoto{
	width: 50%;
	height: 40px;
	position: absolute;
	left: 50%;
	bottom: 0;
	background-color: #222222;
	transform: translateX(-50%);
	z-index: 1;
}
.fondLignePhoto.rouge{ background-color: #3f1413; }
.fondLignePhoto.vert{ background-color: #283b23; }

.galeriePhoto {
    --gap: 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: calc((100vw - var(--decalBase) - var(--gap)) / 2);
    gap: var(--gap);
    width: calc(100% - var(--decalBase));
	box-sizing: border-box;
}

.caseGal {
    overflow: hidden;
    min-width: 0;
	background-color: #333333;
	position: relative;
}

.caseGal.simple {
    grid-column: span 1;
    grid-row: span 1;
}

.caseGal.longue {
    grid-column: span 2;
    grid-row: span 1;
}

.caseGal.haute {
    grid-column: span 1;
    grid-row: span 2;
}

.caseGal.maxi {
    grid-column: span 2;
    grid-row: span 2;
}
/* médias */
.caseGal img,
.caseGal video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
	transition: all 1s;
}

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

/* BOUTON ---------------------------------- */

.boutonInterne{
	display: block;
	position: relative;
	float: left;
}
.boutonInterne.centrer{
	left: 50%;
	transform: translateX(-50%);
}
.boutonInterne.droite{
	left: 100%;
	transform: translateX(-100%);
}
.infoBoutonInterne{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	text-decoration: none;
	gap:5px;
}
.puceBoutonInterne{
	width: 20px;
	height: 20px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.puceBoutonInterne::after{
	content: "";
	width: 0px;
	height: 0px;
	background-color: #ffffff;
	border-radius: 50%;
	transition: 0.2s all;
}
.puceBoutonInterne.rouge{ border:2px solid #a93432; }
.puceBoutonInterne.rouge::after{ background-color: #a93432; }
.puceBoutonInterne.vert{ border:2px solid #5c8850; }
.puceBoutonInterne.vert::after{ background-color: #5c8850; }
	
.txtBoutonInterne{
	position: relative;
	color: #ffffff;
	text-decoration: none;
	margin-bottom: 5px;
}
.txtBoutonInterne::before{
	content: "";
    position: absolute;
    left: 0;
    bottom: -5px; /* espace entre les deux */
    width: 100%; /* plus court */
    height: 1px;
    background: #ffffff;
}
.txtBoutonInterne::after{
	content: "";
    position: absolute;
    left: 0;
    bottom: -5px; /* espace entre les deux */
    width: 0; /* plus court */
    height: 3px;
    background: #ffffff;
	transition: all 0.8s;
}
.txtBoutonInterne.negatif{ color: #000000; }
.txtBoutonInterne.rouge:First-letter{ font-weight: bold; color:#a93432;  }
.txtBoutonInterne.rouge::before{ background-color: #a93432; }
.txtBoutonInterne.rouge::after{ background-color: #a93432; }
.txtBoutonInterne.vert:First-letter{ font-weight: bold; color:#5c8850;  }
.txtBoutonInterne.vert::before{ background-color: #5c8850; }
.txtBoutonInterne.vert::after{ background-color: #5c8850; }

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

#Haut{
	width: 100%;
	position: relative;
	float: left;
}

.bandSup{
	width: calc(100% - 20px);
	height: 65px;
	border-bottom: 1px solid #a93432;
	position: relative;
	float: left;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	z-index: 2;
}
.logoTop{
	width: 200px;
	position: relative;
}
.logoTop img{ max-width: 100%; height: auto; display: block; }

.boutMenu{
	width: 40px;
	height: 40px;
	padding: 5px;
	border-radius: 8px;
	position: relative;
	float: left
}
.menuDetail{
	width: 100vw;
	max-height: 0;
	background-color: rgba(0,0,0,1);
	/*border-bottom: 1px solid #666666;*/
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 5;
	transition: all 0.4s;
}
.menuDetail.affiche{
	max-height: 600px;
}
.bCloseTop{
	width: 100%;
	height: 30px;
	color: #000000;
	font-weight: bold;
	text-align: center;
	background-color: #a93432;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:5px;
	padding: 5px 0;
	position: relative;
}
.iconeCloseTop{
	height: 20px;
	position: relative;
}
.txtCloseTop{
	font-weight: bold;
	color: #000000;
	text-transform: uppercase;
}
.bSimpleTop{
	width: 100%;
	height: 40px;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:10px;
	border-bottom: 1px solid #333333;
	position: relative;
}
.bSimpleTop.final{ margin-bottom: 10px; }
.txtBTop{
	font-weight: bold;
	color: #ffffff;
	text-transform: uppercase;
}
.txtBTop.activ{ color: #a93432; }
.coordMenu{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap:10px;
	position: relative;
	float: left;
	margin-top: 10px;
}
.telTop{
	width: 180px ;
	height: 40px;
	color:#ffffff;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:5px;
	position: relative;
	float: left;
	z-index: 2;
}
.txtTelTop{
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	font-size: 1.3em;
}
.iconeTelTop{ max-height: 30px; width: auto; display: block; }
.blocreseauTop{
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:20px;
	position: relative;
}
.panoHaut{
	width: 100%;
	/*height: 260px;*/
	position: relative;
	overflow: hidden;
}
.panoHaut.accueil{ aspect-ratio:5/3; }
.panoHaut img{
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block;
}
/* image noir et blanc de fond */
.effetRideau .imgNB {
    position: absolute;
    inset: 0;
    filter: grayscale(100%) contrast(1.2);
    z-index: 1;
}
/* zone qui révèle la couleur depuis le centre */
.effetRideau .cacheCouleur {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 2;
    clip-path: inset(0 50% 0 50%);
    animation: rideauClip 1.6s ease forwards;
}
@keyframes rideauClip {
    from {
        clip-path: inset(0 50% 0 50%);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}
.slogan{
	width: 100%;
	text-align: center;
	position: relative;
	float: left;
	padding: 10px 0;;
}

.basPage{
	width: 100%;
	position: relative;
	float: left;
	margin-top: var(--decalBase);
	border-top:4px solid #3f1413;
}
.flexBas{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
	position: relative;
	float: left;
}
.coinBasGauche{
	width:75%;
	background-color: #000000;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:30px;
	position: relative;
	padding: 10px 20% 10px 0;
	margin-left: var(--decalBase);
}
.ensembleCoord{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	position: relative;
	gap:5px;
}
.logoBas{
	max-height: 120px; width: auto; display: inline-block;
}
.ligneCoord{
	color: #ffffff;
	text-decoration: none;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
}
.icoCoord{
	width: 30px;
	height: 40px;
	position: relative;
}
.triangleDeco{
	width: 20%;
	height: 100%;
	background-color: #3f1413;
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	position: absolute;
	float: left;
	top: 0;
	right: 0;
	z-index: 1
}
.coinBasDroite{
	width:100%;
	background-color: #3f1413;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap:10px;
	position: relative;
	padding: 10px 0;
	padding-right: var(--decalBase);
}
.basReseau{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap:5px;
	position: relative;
	z-index: 2;
}
.titreReseau{
	font-family: tornac, sans-serif;
	font-size: 1.2em;
	text-decoration: underline;
}
.menuBas{
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap:10px; 
	font-size: 0.9em;
	position: relative;
}
.basCopyr{
	width: 100%;
	border-top: 6px solid #3f1413;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	float: left;
	padding: 5px 0 20px 0;
}
.infoCopyr{
	font-size: 0.9em;
	color: #666666;
	position: relative;
}
.infoCopyr.gauche{ margin-left: 10px; }
.infoCopyr.droite{ margin-right: 10px; }

.bulleHoraire{
	min-width: 150px;
	height: 45px;
	border-radius: 25px;
	background-color: #ffffff;
	color: #000000;
	text-decoration: none;
	padding: 5px 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0 8px #000000;
	position: fixed;
	bottom: 50px;
	right: 50px;
	gap:10px;
	cursor: pointer;
	z-index: 5;
}
.bulleHoraire.stop{
    position: absolute;
    bottom: auto;
}
.bulleHeure{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 0.9em;
	line-height: 0.9em;
	gap:5px;
	padding-right: 10px;
	border-right: 1px solid #999999;
}
.bulleTel{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:5px;
	color: #000000;
	text-decoration: none;
}

/* BASE ----------------------------------------- */

.pageStd{
	width: 100%;
	position: relative;
	float: left;
	clear: both;
	margin: var(--decalBase) 0;
	overflow: hidden;
}
.pageBlanc{
	width: 100%;
	background-color: #ffffff;
	color: #000000;
	position: relative;
	float: left;
	clear: both;
	margin: var(--decalBase) 0;
	padding: calc(var(--decalBase) / 2) 0;
	overflow: hidden;
}
.pageVert{
	width: 100%;
	background-color: #0e140c;
	position: relative;
	float: left;
	clear: both;
	margin: var(--decalBase) 0;
	padding: calc(var(--decalBase) / 2) 0;
	overflow: hidden;
}

.flex100{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:var(--decalBase);
}
.flex100.interne{ margin: calc(var(--decalBase)/2) 0; }
.flex100.marge{ margin: calc(var(--decalBase)*2) 0; }
.flex100.margeFin{ margin: calc(var(--decalBase)*2) 0 0 0; }

.ecart{ justify-content: space-between; }
.equi{ justify-content: space-around; }
.mid{ justify-content: center; }
.alBas{ align-items: flex-end; }
.alHaut{ align-items: flex-start; }
.alFull{ align-items: stretch; }

.col100{
	width: 100%;
	position: relative;
	float: left;
}
.col100.interne{ margin: calc(var(--decalBase)/2) 0; }
.col50{
	width: 50%;
	position: relative;
	float: left;
}
.col70{
	width: 70%;
	position: relative;
	float: left;
}
.col30{
	width: 30%;
	position: relative;
	float: left;
}
.margeTxt{
	box-sizing: border-box;
	padding: 0 var(--decalBase);
}
.txtCentrer{ text-align: center; }

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

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

.blocIcone{
	width: 105px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap:5px;
}
.rondIcone{
	width:calc(100% - 2px);
	aspect-ratio:1/1;
	border: 1px solid #5c8850;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
}
.rondIcone img{ object-fit: contain; width: 55%; height: 55%; }
.txtIcone{
	text-align: center;
	color: #5c8850;
	position: relative;
}

.flex100.horaire{
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
	gap:calc(var(--decalBase) / 2);
	margin: calc(var(--decalBase) / 2) 0;
}
.caseOuverture{
	width: 100px;
	min-height: 100px;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/*border: 1px dashed #666666;*/
	position: relative;
}
.jourOuverture{
	color: #666666;
	font-style: italic;
}
.heureOuverture{
	color: #666666;
}
.sepOuverture{
	width: calc(100% - 30px);
	height: 1px;
	background-color: #666666;
	position: relative;
	margin: 10px 0;
}
.caseOuverture.active{
	border: 2px solid #a93432;
	box-shadow: 0 0 5px #333333;
}
.caseOuverture.active .jourOuverture{ color:#000000; }
.caseOuverture.active .heureOuverture{ color:#000000; }
.caseOuverture.active .sepOuverture{ background-color: #000000; }
.caseMessage{
	width: 100%;
	max-width: 450px;
	min-height: 150px;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/*border: 1px dashed #666666;*/
	position: relative;
}

.blocAvis{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	position: relative;
}
.barreSepAvis{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	margin: 10px 0;
}
.icoAvis{
	width: 40px;
	position: relative;
}
.icoAvis img{ max-width: 100%; height: auto; display: block; }
.traitSep{
	width: calc(100% - 60px);
	height: 1px;
	background-color: #333333;
	position: relative;
}
.groupeTemoin{
	width: calc(100% - 100px);
	/*height: 300px;*/
	position: relative;
	float: left;
	overflow: hidden;
	padding: 20px 0;
}
.blocTemoin{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap:20px;
	position: relative;
	transform: translateX(-100px);
	opacity: 0;
	transition: all 0.4s;
}
.blocTemoin.active{
	transform: translateX(0);
	opacity: 1;
}
.blocTemoin.depart{
	transform: translateX(100px);
	opacity: 0;
}
.txtTemoin{
	width: 80%;
	max-width: 500px;
	text-align: center;
}
.signTemoin{
	text-align: center;
	font-size: 2em;
	color: #a93432;
	font-family: tornac, sans-serif;
	font-style: normal;
	font-weight: 400;
}
.menuDiap{
	width: 100%;
	display: flex;
	justify-content: center;
	gap:20px;
	position: relative;
}
.boutonFleche{
	width: 35px;
	aspect-ratio:1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;
}
.boutonFleche img{ max-width: 20px; height: auto; display: block; }


/* QUI ------------------------------------------ */
.flexDate{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction:column;
	gap:20px;
	position: relative;
	padding: 20px 0;
}
.ligneDate{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap:15px;
	position: relative;
	padding-bottom: 20px;
	z-index: 2;
}
.bulleDate{
	width: 70px;
	aspect-ratio:1/1;
	border-radius: 50%;
	border: 1px solid #a93432;
	background-color: #000000;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}
.infoDate{
	width: calc(100% - 100px);
	position: relative;
}
.finDate{
	width: 35px;
	height: 1px;
	background-color: #a93432;
	position: absolute;
	bottom: 0;
	left: 25px;
}
.traitDate{
	width:1px;
	height: 100%;
	background-color: #a93432;
	position: absolute;
	top: 0;
	left: 42px;
	z-index: 1;
}

/* RESTAURANT ----------------------------------- */

.blocSuggest{
	width: calc(100% - 20px);
	border: 1px solid #a93432;
	border-radius: 20px;
	background-color: #3f1413;
	text-align: center;
	padding: 10px;
	position: relative;
	margin: 20px 0;
}

/* EPICERIE --------------------------------------- */

.newsEpicerie{
	width:calc(100% - 50px);
	border-radius: 20px;
	padding: 15px;
	background-color: #ffffff;
	color: #000000;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	position: relative;
	float: left;
	margin: var(--decalBase) 0;
	clear: both;
}
.colEpiceriePhoto{
	width: calc(100% - 20px);
	padding: 10px 20px 10px 0;
	position: relative;
}
.colEpiceriePhoto img{
	max-width: 100%;
	height: auto;
	display: block;
	position: relative;
	z-index: 2;
}
.fondEpiceriePhoto{
	width: 40px;
	height: 100%;
	position: absolute;
	right: 0;
	bottom: 0;
	background-color: #a93432;
	z-index: 1;
}
.blocProd{
	width: 100%;
	position: relative;
	float: left;
	margin-bottom: 5px;
}
.enteteProd{
	width: 100%;
	min-height: 30px;
	background-color: #000000;
	border-bottom: 1px solid #a93432;
	padding: 10px 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:5px;
	cursor: pointer;
}
.nomProd{
	width: calc(100% - 50px);
	font-size: 1.2em;
	text-transform: uppercase;
	position: relative;
}
.nomProd:first-letter{
	font-weight: bold;
	font-size: 1.2em;
	color: #a93432;
}
.flecheProd{
	width: 20px;
	height: 15px;
	background-color: #a93432;
	clip-path: polygon(50% 50%, 100% 0, 100% 50%, 50% 100%, 0 50%, 0 0);
	position: relative;
}
.flecheProd.actif{ clip-path: polygon(50% 0, 100% 50%, 100% 100%, 50% 50%, 0 100%, 0 50%); }
.infoProd{
	width: 100%;
	max-height: 0;
	position: relative;
	overflow: hidden;
	transition: all 0.6s;
}
.infoProd p{ position: relative; margin:20px; }
.infoProd.actif{ max-height:500px; } 

/* CONTACT -------------------------------------------- */
.flexcontact{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	padding: 20px 0;
}
.ensembleContact{
	/*width: 100%;*/
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	flex-direction: column;
	flex-wrap: wrap;
	position: relative;
	gap:20px;
	margin-top: 30px;
}
.ligneContact{
	color: #ffffff;
	font-size: 1.2em;
	text-align: center;
	text-decoration: none;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
}
.icoContact{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border:1px solid #a93432;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
}
.icoContact img{
	object-fit: contain;
	width: 70%;
	height: 70%;
}

/* CARNET ------------------------------------------- */
.flexActu{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	gap:var(--decalBase);
	position: relative;
	margin-bottom: 40px;
}
.blocActu{
	width: calc(100% - 20px);
	position: relative;
}
.photoActu{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	position: relative;
	margin-bottom: 15px;
}
.visuActu{
	width: calc(100% - 20px);
	aspect-ratio:4/3;
	display: flex;
	position: relative;
	margin-bottom: 20px;
	box-shadow: 0 0 5px #000000;
	z-index: 2;
	overflow: hidden;
}
.visuActu img{
	object-fit: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.fondActu{
	width: 100%;
	height: calc(100% - 40px);
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
}

.titreActu{
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	border-bottom: 1px solid #ffffff;
	padding-bottom: 10px;
	margin-bottom: 10px;
	position: relative;
}
.accrocheActu{
	width: 100%;
	text-align: justify;
	position: relative;
}

.blocActu.pair .titreActu{ color: #a93432; }
.blocActu.pair .fondActu{ background-color: #a93432; }
.blocActu.impair .titreActu{ color: #5c8850; }
.blocActu.impair .fondActu{ background-color: #5c8850; }