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

@font-face {
font-family: 'Geosans';
src: url('typo/geosanslight.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@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: 18px;
	font-weight: 300;
	color: #ffffff;
	background-color: #222222;
}


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

.titreH1{
	font-size: 2.5em;
	font-weight: 100;
	color: #ffffff;
}
.titreH2{
	font-size: 1.5em;
	font-weight: 100;
	color: #ffffff;
}
.titreH3{
	font-size: 1.2em;
	font-weight: bold;
}

.nomGraph{ font-family: 'Geosans'; }
.normal{ font-weight: normal; }
.light { font-weight: 100; }
.bold { font-weight: 900; }

.big{ font-size: 1.8em; }
.grand{ font-size: 1.4em; }
.petit{ font-size: 0.9em; }
.legende{ font-size: 0.8em; }

.violet{ color: #6b3775; }
.rose{ color: #e5c0ec; }
.jaune{ color: #ffd050; }

.lienRose{ color: #e5c0ec; text-decoration: none; }

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

.bloc404{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sectFull{
	width: 100%;
	height: calc(var(--scroll-size, 200) * 1vh);
	position: relative;
	float: left;
	overflow: hidden;
}
.sectActu{
	width: 100%;
	min-height: 100vh;
	background-color: #1d101f;
	position: relative;
	float: left;
}
.sectActu.centrerH{
  display: flex;
  align-items: center;
}

#Top{
	width: calc(100% - 20px);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	float: left;
	margin: 0 10px;
	box-sizing: border-box;
	z-index: 2;
}
.graphiweb{
	height: 50px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
	margin-top: 10px;
}
.visuGraphi{
	height: 100%;
	position: relative;
}
.visuGraphi img{ max-height: 100%; width: auto; display: block; }
.nomGraphi{
	font-family: 'Geosans';
	color: #ffffff;
	font-size: 2.5em;
	position: relative;
}
.menuP{
	width: 120px;
	position: relative;
	float: left;
	padding-top: 5px;
}
.boutonMenuP{
	text-align: right;
	position: relative;
	margin: 5px 0;
	animation-name: affMenu;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	opacity: 0;
}
.boutonMenuP p{
	color: #ffffff;
	font-size: 1.1em;
	text-decoration: none;
	position: relative;
	padding: 5px 10px 5px 5px;
	z-index: 2;
}
.fdMenuP{
	width: 0;
	height: 100%;
	background-color: #6b3775;
	position: absolute;
	float: left;
	top:0;
	right: 0;
	transition: all 0.4s;
	z-index: 1;
}
.barreMenu{
	width:2px;
	height: 100%;
	background-color: #6b3775;
	position: absolute;
	float: left;
	top: 0;
	right: 0;
	z-index: 1;
	animation-name: animBarreMenu;
	animation-duration: 2.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.boutonMenuP:hover .fdMenuP{ width: 100%; }
.boutonMenuP.n1{ animation-delay: 0s; }
.boutonMenuP.n2{ animation-delay: 0.5s; }
.boutonMenuP.n3{ animation-delay: 1s; }
.boutonMenuP.n4{ animation-delay: 1.5s; }
.boutonMenuP.n5{ animation-delay: 2s; }

.menuStick{
	width: calc(100% - 20px);
	height: 45px;
	background: #000000;
	background: linear-gradient(180deg,rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	position: fixed;
	float: left;
	top: 0;
	left: 0;
	opacity: 1;
	z-index: 5;
	transition: all 0.6s;
}
.menuStick.off{
	transform: translateY(-80px);
	opacity: 0;
}
.graphiweb.stick{ height: 30px;  margin: 0; }
.graphiweb.stick .nomGraphi{ font-size: 2em; }
.menuS{
	color: #6b3775;
	font-size: 1em;
	font-weight: 100;
	border: 1px solid #6b3775;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:10px;
	position: relative;
	float: left;
	padding: 5px 15px;
	cursor: pointer;
	z-index: 2;
}
.croixMenuS{
	width: 18px;
	height: 18px;
	background-color: #6b3775;
	clip-path: polygon(0 46%, 46% 46%, 46% 0, 53% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 55% 100%, 46% 100%, 46% 54%, 0 54%);
	position: relative;
	float: left;
	transition: all 0.4s;
}
.menuS:hover .croixMenuS{
	clip-path: polygon(60% 0, 60% 50%, 100% 40%, 50% 100%, 0 40%, 40% 50%, 40% 0);
	transform: rotate(360deg);
}
.menuDepli{
	width: 130px;
	max-height: 400px;
	background-color: #000000;
	position: absolute;
	float: left;
	top: 0;
	right: 0;
	padding-top: 30px;
	overflow: hidden;
	transition: all 0.4s;
	z-index: 1;
}
.menuDepli.off{
	max-height: 0;
}

@keyframes affMenu{
	0%{ opacity:0;  }
	100%{ opacity:1; }
}
@keyframes animBarreMenu{
	0%{ height:0;  }
	100%{ height:100%; }
}

.indicatifScroll{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	position: absolute;
	float: left;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}
.indicatifScroll.anim{
	opacity: 0;
	animation-name: accrIntroTop;
	animation-delay: 4.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.txtIndicatifScroll{
	font-weight: 100;
	position: relative;
}
.flecheIndicatifScroll{
	height: 30px;
	position: relative;
}
.flecheIndicatifScroll img{ max-height: 100%; width: auto; display: block; }

#Bas{
	width: calc(100% - 40px);
	border-top: 1px solid #6b3775;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	position: relative;
	float: left;
	margin-top: 40px;
	padding: 20px;
}
.resumeBas{
	width: 48%;
	position: relative;
	float: left;
}
.txtResume{
	width: 100%;
	position: relative;
	float: left;
	margin: 20px 0;
}
.listeMot{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap:15px;
}
.motBas{
	color: #e5c0ec;
	border: 1px solid #6b3775;
	position: relative;
	padding: 10px 20px;
	transition: 0.4s all;
}
.motBas a{ color:#e5c0ec; text-decoration: none; }
.motBas:hover{ background-color: #000000; }
.motBas:hover a{ color: #ffffff; }

.colonneBas{
	position: relative;
	float: left;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	flex-direction: column;
	gap:20px;
}
.groupeCoord{
	position: relative;
	float: left;
}
.blocCoord{
	width: 240px;
	min-height: 70px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-direction: column;
	border: 1px solid #6b3775;
	position: relative;
	float: left;
	padding: 10px 10px 10px 60px;
}
.caseIconeBas{
	width: 65px;
	height: 65px;
	background-color: #6b3775;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	float: left;
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
}
.telBas{
	font-size: 1.8em;
	position: relative;
	float: left;
}
.emailBas{
	font-size: 1.2em;
	font-weight: 100;
	position: relative;
	float: left;
}
.emailBas a{ color: #ffffff; text-decoration: none; }
.adresseBas{
	font-size: 1em;
	font-weight: 100;
	position: relative;
	float: left;
}
.villeBas{
	font-size: 1.2em;
	position: relative;
	float: left;
}
.blocLien{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	float: left;
	gap:10px;
}
.blocMention{
	position: relative;
	float: left;
}
.blocMention a{ 
	font-size: 0.9em;
	color:#8a4497; 
	text-decoration: none;
}
.blocReseau{
	width: 65px;
	height: 65px;
	background-color: #3c2241;
	border: 1px solid #6b3775;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
}
.blocReseau img{ max-height: 50%; width: auto; display: block; }
.copyr{
	width: 100%;
	text-align: center;
	font-size: 0.8em;
	font-weight: 100;
	border-top: 1px solid #6b3775;
	position: relative;
	float: left;
	margin-top: 20px;
	padding-top: 10px;
}


/* BASES ------------------------ */
.contenuScroll {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 5;
  overflow: hidden;
  will-change: transform;
}

.contenuAnim {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  transition: transform 0.3s ease-out;
  position: relative;
}
.contenuAnim.libre{
	display: block;
}

.fondSect{
	width: 100%;
	height: 100%;
	max-height: 100%;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	z-index: 1;
}
.para-entete{
	background: #000000;
background: linear-gradient(0deg,rgba(50, 50, 50, 1) 0%, rgba(0, 0, 0, 1) 10%);
}
.para-acceuil1{
	background-image: url("img/fd-acc1.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-acceuil2{
	background-image: url("img/fd-acc2.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-acceuil3{
	background-image: url("img/fd-acc3.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-acceuil4{ background-color: #1d101f; }
.para-web1{
	background-image: url("img/fd-web1.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-web3{
	background-image: url("img/fd-web3.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-web4{
	background-image: url("img/fd-web4.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-print1{
	background-image: url("img/fd-print1.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-print2{
	background-image: url("img/fd-print2.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-print3{
	background-image: url("img/fd-print3.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-reseau1{
	background-image: url("img/fd-reseau1.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-reseau2{
	background-image: url("img/fd-reseau2.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-reseau3{
	background-image: url("img/fd-reseau3.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-actu1{
	background-image: url("img/fd-actu1.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.para-ct1{
	background-image: url("img/fd-cont1.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}


.decoFond{
	height: 100%;
	position: absolute;
	float: left;
	left: 0;
	z-index: 2;
	transform: translateX(-150px);
}
.decoFond img{ max-height: 100%; width: auto; display: block; }

.groupeTexteFlot{
	max-width: 500px;
	position: relative;
	float: left;
	margin-left: 25%;
	transform: translateX(-50%);
	z-index: 2;
}
.groupeTexteFlot.decalArbre{
	margin-left: 33vh;
	transform: translateX(0);
}
.groupeTexteFlot.decalWeb{
	max-width: 600px;
	margin-left: 22vw;
	transform: translateX(0);
}
.groupeTexteFlot.decalVision{
	max-width: 35%;
	margin-left: 5%;
	transform: translateX(0);
}

.blocTitreH{
	width: 100%;
	transform: translateY(-100px);
	position: relative;
	float: left;
	margin-bottom: 5px;
}
.blocTitreH.centrer{ text-align: center; }
.blocTitreH.anim{
	opacity: 0;
	animation-name: appTop100;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.blocInfoC{
	width: 100%;
	transform: translateX(-200px);
	position: relative;
	float: left;
	margin-bottom: 5px;
}
.blocInfoC.fdTrame{
	width: calc(100% - 10px);
	padding: 5px;
	background-color: rgba(0,0,0,0.4);
	margin-top: 20px;
}
.blocInfoC.anim{
	opacity: 0;
	animation-name: appLeft200;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocInfoB{
	width: 100%;
	transform: translateY(100px);
	position: relative;
	float: left;
}

.blocDemiPage{
	width: 50%;
	height: 100%;
	position: relative;
	float: left;
	z-index: 2;
}
.blocDemiLarge{
	width: 50%;
	position: relative;
	float: left;
	z-index: 2;
}
.blocCentre{
	width: 90%;
	max-width: 1300px;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

.zoneNavSlide{
	width: 100%;
	display: flex;
	justify-content: space-between;
	position: relative;
	float: left;
	z-index: 3;
}
.zoneNavSlide.panoAcc{
	position: absolute;
	float: left;
	top: calc(50% + 20vh);
	left: 0;	
}
.boutonRond{
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
	margin: 0 10px;
	z-index: 2;
	cursor: pointer;
}
.boutonRond.petit{
	width: 30px;
	height: 30px;
}
.flecheRond{
	height: 60%;
	position: relative;
}
.flecheRond img{ max-height: 100%; width: auto; display: block; }

.boutonStd{
	width: 240px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #8a4497;
	position: absolute;
	float: left;
	top: calc(50% - 60px);
	left: 0;
}
.boutonStd.finBloc{
	top: inherit;
	left: inherit;
	bottom: 0;
	right: 0;
}
.boutonStd.enligne{
	position: relative;
	top: none;
}
.boutonStd.enligneWeb{
	position: relative;
	top: none;
	margin-top: 35px;
	left: 100px;
}
.boutonStd.enligneReseau{
	position: relative;
	top: none;
	margin-top: 20px;
}
.boutonStd.anim{
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 2s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.nomBoutonStd{
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #8a4497;
	color: #ffffff;
	position: relative;
	overflow: hidden;
}
.nomBoutonStd p{
	position: relative;
	float: left;
	z-index: 3;
	transition: all 0.6s;
}
.survolReflet{
	width: auto;
	height: 100%;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	z-index: 2;
	transition: all 0.5s;
}
.survolReflet img{ max-height: 100%; width: auto; display: block; }

.boutonStd:hover .survolReflet{
	transform: translateX(0);
}
.boutonStd:hover .nomBoutonStd p{ color:#8a4497 ; }

.boutonPlus{
	width: 45px;
	height: 45px;
	background-color: #8a4497;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	font-weight: 100;
	color: #ffffff;
	position: absolute;
	float: left;
	right: 0;
	bottom: 0;
	cursor: pointer;
	transition:all 0.4s;
}
.boutonPlus:hover{
	background-color: #ffffff;
	color: #8a4497;
}

/* IMG --------------------------- */
.imW{
	max-width: 100%;
	height: auto;
	display: block;
}
.imW75{
	max-width: 75%;
	height: auto;
	display: block;
}
.imH{
	max-height: 100%;
	width: auto;
	display: block;
}
.imH75{
	max-height: 75%;
	width: auto;
	display: block;
}

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

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

.accSouris{
	height: 32%;
	position: absolute;
	float: left;
	bottom:20%;
	left: 50%;
	transform: translateX(-100%);
	z-index: 2;
}
.accSouris.anim{
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 0s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.accStylo{
	height: 32%;
	position: absolute;
	float: left;
	bottom:20%;
	left: 50%;
	z-index: 2;
}
.accStylo.anim{
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 0.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocMotIntro{
	width: 220px;
	height: 145px;
	text-decoration: none;
	color: #ffffff;
	position: absolute;
	float: left;
	z-index: 3;
}
.blocMotIntro.long{ width:250px; }
.blocMotIntro.mot1{ 
	left: 20%; 
	top: 15%; 
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocMotIntro.mot2{ 
	left: 5%; 
	top: 50%; 
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 2.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocMotIntro.mot3{ 
	left: 35%; 
	top: 30%; 
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 2s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocMotIntro.mot4{ 
	left: 55%; 
	top: 10%; 
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 3.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocMotIntro.mot5{ 
	left: 65%; 
	top: 35%; 
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 1.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocMotIntro.mot6{ 
	left: 80%; 
	top: 55%; 
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 3s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}


.motIntro{
	font-size: 1.2em;
	position: absolute;
	float: left;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 2;
}
.motIntro:first-letter{ font-size: 1.5em; color: #6b3775; font-weight: bold; }
.motIntro.droite{ left: 25%; }
.cadreIntro{
	height: 65%;
	aspect-ratio:1/1;
	position: absolute;
	float: left;
	top: 50%;
	z-index: 1;
}
.cadreIntro.violet{
	border: 1px solid #6b3775;
	left: 0;
	transform: rotate(45deg) translate(-25%,-45%);
}
.cadreIntro.rose{
	border: 1px solid #e5c0ec;
	right: 0;
	transform: rotate(15deg) translate(-25%,-45%);
}
.c1a{
	animation-name: animCarre1;
	animation-delay: 0;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}
.c1b{
	animation-name: animCarre1;
	animation-delay: 3s;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}
.c1c{
	animation-name: animCarre1;
	animation-delay: 6s;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}
.c2a{
	animation-name: animCarre2;
	animation-delay: 2s;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}
.c2b{
	animation-name: animCarre2;
	animation-delay: 5s;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}
.c2c{
	animation-name: animCarre2;
	animation-delay: 7s;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}

.accrocheIntro{
	text-align: center;
	position: absolute;
	float: left;
	left: 50%;
	bottom: 6vh;
	transform: translateX(-50%);
	z-index: 2;
}
.accrocheIntro.anim{
	opacity: 0;
	animation-name: accrIntroTop;
	animation-delay: 4s;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.ligneRaccourci{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	float: left;
}
.caseRaccourci{
	width: 150px;
	height: 180px;
	border: 1px solid #ffffff;
	background-color: #000000;
	position: relative;
	float: left;
	transition: all 0.4s;
}
.survolEffetRond{
	width: 0;
	height: 0;
	border-radius: 50%;
	background-color: #3c2241;
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.2s;
	z-index: 1;
}
.caseRaccourci:hover{
	transform: scale(1.05);
	box-shadow: 0 0 20px #000000;
}
.caseRaccourci:hover .survolEffetRond{ 
	width: 100%;
	height: 100%;
	border-radius: 0; 
}
.visuRaccourci{
	width: 100%;
	aspect-ratio:1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
	z-index: 2;
}
.visuRaccourci img{ max-width: 75%; height: auto; display: block; }
.txtRaccourci{
	width: 100%;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	position: relative;
	float: left;
	z-index: 2;
}

.titreDeco{
	text-align: right;
	position: absolute;
	float: left;
	top: 3vw;
	right: 3vw;
	transform: translateX(200px);
	z-index: 3;
}
.visuelDeco{
	width: 100%;
	height: 75vh;
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translateY(100px);
}
.visuelDeco.coinBas{ justify-content: flex-end; }
.visuelDeco.anim{
	opacity: 0;
	animation-name: appBot100;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.topTitre{
	width: 100%;
	text-align: center;
	position: relative;
	float: left;
	z-index: 2;
	margin-top: 40px;
	transform: translateY(-50px);
}
.zonePano{
	width: calc(100% - 120px);
	max-width: 1600px;
	max-height: calc(100vh - 120px);
	aspect-ratio:16/7;
	position: absolute;
	float: left;
	top:calc(50% + 20px);
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}
.blocPano{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap:1%;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.blocPano.active{ opacity: 1; }
.infoPano{
	width: 22%;
	height: 100%;
	position: relative;
	float: left;
}
.ssTitrePano{
	width: 100%;
	height: 50px;
	position: relative;
	float: left;
}
.paraInfoPano{
	width: 100%;
	height: calc(50% - 140px);
	position: relative;
	float: left;
	overflow: hidden;
}
.paraInfoPano.long{
	height: calc(50% - 40px);
}
.cardeMiniPano{
	width: 400px;
	aspect-ratio:20/13;
	border: 1px solid #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	bottom: 5vh;
	z-index: 3;
}
.photoMiniPano{
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	background-color: #000000;
	position: relative;
	float: left;
	overflow: hidden;	
}
.photoMiniPano img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.visuPano{
	max-width: 76%;
	height: 100%;
	aspect-ratio:12/7;
	background-color: #666666;
	position: relative;
	float: right;
	z-index: 1;
}
.visuPano img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.traitFdNavPano{
	width: 100%;
	height: 1px;
	background-color: #ffffff;
	position: absolute;
	float: left;
	top: 50%;
	left: 0;
	z-index: 1;
}

.listeArgu{
	width: 400px;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap:15px;
	position: relative;
	float: left;
	margin: 15px 0 0 40px;
}
.listeArgu.anim{
	opacity: 0;
	animation-name: appLeft200;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.argu{
	font-weight: 200;
	font-size: 1.2em;
	position: relative;
}

.cadreTem{
	width: 450px;
	aspect-ratio:2/3;
	background-color: #8a4497;
	border-radius: 8px;
	border: 1px solid #ffffff;
	box-shadow: 0 0 8px #222222;
	position: relative;
	float: left;
	margin-right: 3vw;
	z-index: 2;
	transform: translateX(150px);
	overflow: hidden;
}
.caseLogoTem{
	width: 60%;
	aspect-ratio:1/1;
	background-color: #6b3775;
	box-shadow: 0 0 15px #000000;
	position: absolute;
	float: left;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.zoneTem{
	width: 100%;
	height: calc(100% - 40px);
	position: relative;
	overflow: hidden;
}
.temoignage{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	gap:10px;
	position: relative;
	float: left;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.temoignage.active{ opacity: 1; }
.visuTem{
	width: 60%;
	aspect-ratio:1/1;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
}
.visuTem.bas{ align-items: flex-end; }
.visuTem .maxW{ max-width: 90%; height: auto; display: block; }
.visuTem .maxH{ max-height: 90%; width: auto; display: block; } 
.txtTem{
	width: calc(100% - 40px);
	color: #ffffff;
	font-size: 0.9em;
	position: relative;
	float: left;
	margin: 5px 20px;
	overflow:auto;
}
.titreTem{
	width: 100%;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	color: #e5c0ec;
	position: relative;
	float: left;
}
.detailTem{
	width: 100%;
	color: #ffffff;
	position: relative;
	float: left;
	margin: 10px 0;
}
.nomTem{
	width: 100%;
	font-weight: bold;
	color: #ffd050;
	text-align: right;
	position: relative;
	float: left;
}

.actuMajeur{
	width: 60vw;
	min-height: 100px;
	background-color: #3c2241;
	display: flex;
	justify-content: center;
	align-items: stretch;
	position: absolute;
	float: left;
	padding: 10px;
	top: 3vw;
	left: 3vw;
	z-index: 2;
}
.cadreActu{
	width: 100%;
	border: 1px solid #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
}
.cadreActu.fdweb{
	background-image: url("img/actu-fdweb.webp");
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
}
.blocActu{
	width: calc(100% - 50px);
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	position: relative;
	float: left;
	margin: 30px 0;
}
.titreActu{
	font-size: 2em;
	font-weight: bold;
	color: #8a4497;
	position: relative;
	float: left;
	text-transform: uppercase;
}
.titreActu.principale{ font-size: 3em; }
.sstitreActu{
	font-weight: bold;
	font-size: 1em;
	color: #ffffff;
	position: relative;
	float: left;
	margin-bottom: 20px;
	text-transform: uppercase;
}
.sstitreActu.principale{ font-size: 1.5em; }
.accrocheActu{
	width: 100%;
	color: #ffffff;
	position: relative;
	float: left;
	margin-bottom: 20px;
}
.accrocheActu.principale{
	max-width: 60%;
}
.accrocheActu.first{
	min-height: 25vh;
	margin-bottom: 60px;
}

.colonneActu{
	width: 30vw;
	height: calc(100% - 60px);
	position: absolute;
	float: left;
	z-index: 2;
	overflow: auto;
	top: 40px;
	right: 3vw;
}
.listeActu{
	width: calc(100% - 10px);
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	gap:5vh;
	position: relative;
	float: left;
	padding-right: 10px;
    box-sizing: border-box;
}
.actuStd{
	width: 100%;
	min-height: 100px;
	background-color: #3c2241;
	display: flex;
	justify-content: center;
	align-items: stretch;
	position: relative;
	float: left;
	padding: 10px;
	z-index: 2;		
}

/* SITE INTERNET --------------------------- */

.visuelDecoWeb{
	width: 30%;
	min-width: 400px;
	height: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	opacity: 0;
	animation-name: appLeft200;
	animation-delay: 0;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.visuelDecoWeb img{ max-width: 100%; height: auto; display: block; }

.listeClic{
	width: 300px;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap:15px;
	position: relative;
	float: left;
	margin: 35px 0 0 100px;
}
.listeClic.anim{
	opacity: 0;
	animation-name: appTop50;
	animation-delay: 1.5s;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.traitClic{
	width: 2px;
	height: 100%;
	background-color: #8a4497;
	position: absolute;
	float: left;
	top: 0;
	left: 12px;
	z-index: 2;
}
.ligneClic{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	float: left;
	cursor: pointer;
	z-index: 3;
}
.ligneClic.derniere{ margin-top: 40px; }
.caseClic{
	width: 25px;
	height: 25px;
	background-color: #8a4497;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
}
.flecheClic{
	width: 15px;
	height: 15px;
	background-color: #ffffff;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	position: relative;
	opacity: 1;
	transition: all 0.2s;
}
.flecheClic.off{ opacity: 0; }
.nomClic{
	width: calc(100% - 35px);
	color: #ffffff;
	text-decoration: none;
	font-weight: 100;
	font-size: 1.2em;
	position: relative;
	margin-left: 10px;
	transition: all 0.4s;
}
.ligneClic:hover .nomClic{
	width: calc(100% - 50px);
	margin-left: 25px;
}

.zoneWeb{
	width: 45%;
	max-width: 750px;
	display: flex;
	align-items: center;
	position: relative;
	float: left;
	margin-right: 2.5%;
	z-index: 2;
	opacity: 0;
	animation-name: appRight200;
	animation-delay: 1.5s;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocWeb{
	width: 100%;
	position: absolute;
	float: left;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.blocWeb.active{ opacity: 1; }
.cadreWebP{
	width: 100%;
	height: auto;
	background-color: #000000;
	border: 1px solid #8a4497;
	box-sizing: border-box;
	position: relative;
	float: left;
}
.titreWeb{
	width: calc(100% - 20px);
	font-size: 2em;
	color: #8a4497;
	padding: 10px;
	margin-bottom: 20px;
	position: relative;
	float: left;
}
.titreWeb::after{
	content:'';
	width: 150px;
	height: 2px;
	background-color: #8a4497;
	position: absolute;
	float: left;
	bottom: 0;
	left: 0;
}
.descrWeb{
	width: calc(100% - 30px);
	position: relative;
	float: left;
	margin: 15px;
}
.ligneWebCase{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	gap:2%;
	position: relative;
	float: left;
	margin-top: 10px;
}
.caseWeb{
	width: 20%;
	aspect-ratio:1/1;
	background-color: #8a4497;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
}
.caseWeb.derniere{ margin-left: 14%;}
.caseWeb p{
	width: 100%;
	font-size: 0.9em;
	text-align: center;
	position: relative;
}

.groupeVueApp{
	width: 690px;
	aspect-ratio:9/8;
	position: relative;
	float: left;
	margin-left: 2vw;
	z-index: 2;
}
.bulleWebApp{
	height: 150px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: absolute;
	float: left;
	z-index: 2;
}
.bulleWebApp.b1{
	top: 0;
	left: 2%;
}
.bulleWebApp.b2{
	right:3%;
	top: 5%;
}
.bulleWebApp.b3{
	bottom:0;
	left: 0;
}
.bulleWebApp.b4{
	right:0;
	bottom:15%;
}
.demiCercle{
	height: 100%;
	aspect-ratio:1/1;
	border-left: 2px solid #8a4497;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.infoBulle{
	position: relative;
	float: left;
	margin-left: 50px;
	z-index: 2
}
.visuelBulle{
	width:60%;
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-60%,-50%);
	z-index: 1;
}

.listeFleche{
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap:15px;
	position: relative;
	float: left;
	margin: 35px 0 0 0;
}
.ligneFleche{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	float: left;
	cursor: pointer;
	z-index: 3;
}
.barreFleche{
	width: 0;
	height: 25px;
	background-color: #8a4497;
	position: relative;
	float: left;
	transition: all 0.4s;
}
.caseFleche{
	width: 20px;
	height: 25px;
	clip-path: polygon(60% 0, 100% 50%, 60% 100%, 0 100%, 0 0);
	background-color: #8a4497;
	position: relative;
	float: left;
}
.nomFleche{
	width: calc(100% - 35px);
	color: #ffffff;
	text-decoration: none;
	font-weight: 100;
	font-size: 1.2em;
	white-space: nowrap;
	position: relative;
	margin-left: 10px;
}
.ligneFleche:hover .barreFleche{
	width: 50px;
}
.ligneFleche.active .barreFleche{
	width: 50px;
}

.zoneVS{
	width: 50%;
	position: relative;
	float: left;
	margin-right: 5%;
	z-index: 2;
}
.groupeVS{
	position: relative;
	float: left;
	opacity: 0;
	transition: all 0.5s ease;
}
.groupeVS.active{ opacity: 1; }
.blocVS{
	width: 100%;
	min-height: 100px;
	background-color: #3c2241;
	display: flex;
	justify-content: center;
	align-items: stretch;
	position: relative;
	float: left;
	padding: 10px;
	z-index: 2;		
}
.cadreVS{
	width: 100%;
	border: 1px solid #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
}
.contenuVS{
	width: calc(100% - 50px);
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	position: relative;
	float: left;
	margin: 30px 0;
}
.titreVS{
	width: 100%;
	font-size: 2em;
	font-weight: 100;
	color: #ffffff;
	text-align: center;
	position: relative;
	float: left;
}
.txtVS{
	width: 100%;
	color: #ffffff;
	position: relative;
	float: left;
	margin: 20px 0 0 0;
}
.etiquetteVS{
	min-width: 150px;
	color: #3c2241;
	font-weight: normal;
	text-align: center;
	background-color: #ffffff;
	padding: 5px 10px;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	transform: rotate(-15deg) translateX(-10%);
	z-index: 4;
}
.ligneSepVS{
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
}
.rondVS{
	width: 100px;
	aspect-ratio:1/1;
	border-radius: 50%;
	border: 2px solid #3c2241;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
}
.rondVS p{
	width: 100%;
	text-align: center;
	font-size: 2.5em;
	font-weight: bold;
}

.listeMetier{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap:20px;
	position: relative;
	float: left;
	margin-top: 20px;
	margin-bottom: 80px;
}
.blocMetier{
	width:285px;
	height: 320px;
	border: 1px solid #8a4497;
	position: relative;
	float: left;
	padding: 10px;
}
.visuMetier{
	width: 100%;
	height: calc(100% - 60px);
	border: 1px solid #8a4497;
	position: relative;
	float: left;
	box-sizing: border-box;
	overflow: hidden;
}
.nomMetier{
	width: 100%;
	height: 60px;
	background-color: #8a4497;
	display: flex;
	justify-content: center;
	align-items: center;
}
.nomMetier p{
	width: 100%;
	text-align: center;
	font-weight: bold;
	position: relative;
}

/* RESEAU ------------------------------- */
.groupeVisuelReseau{
	--H: 80vh;
	width: 100%;
	height: var(--H);
	position: absolute;
	float: left;
	left: 0;
	bottom: 0;
}
.visuSmart{
	height: 70%;
	aspect-ratio:17/18;
	position: absolute;
	float: left;
	bottom: 0;
	left: 0;
}
.visuSmart img{ object-fit: contain; width: 100%; height: 100%; }
.visuSmart.anim{
	opacity: 0;
	animation-name: appBot100;
	animation-delay: 0;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.visuBulle img{ max-height: 100%; width: auto; display: block; }
.visuBulle{
	height: 28%;
	aspect-ratio:1/1;
	position: absolute;
	float: left;
}
.visuBulle img{ max-width: 100%; height: auto; display: block; }
.visuBulle.insta{
	top: 0;
	left: calc((var(--H) * 0.7 * (17/18)) / 2 - (var(--H) * 0.14));
}
.visuBulle.fb{
	top: 10vh;
	left: calc(var(--H) * 0.7 * (17/18));
}
.visuBulle.lk{
	top: 40vh;
	left: calc(var(--H) * 0.7 * (17/18) + 10vh);
}
.visuBulle.insta.anim{
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 2s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.visuBulle.fb.anim{
	opacity: 0;
	animation-name: appTop50;
	animation-delay: 2.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.visuBulle.lk.anim{
	opacity: 0;
	animation-name: appRight100;
	animation-delay: 3s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

/* EFFET CASE ------------------------------------- */
.org{
	--H:100vh;
	--largS:calc(100vh / 7);
	--largB:calc(100vh / 5);
	height: var(--H);
	width: calc( var(--largS) * 3.5);
	border: 1px solid red;
	position: relative;
	float: right;
}
.case{
	aspect-ratio:1/1;
	border: 1px solid #8a4497;
	background-color: #222222;
	position: absolute;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
}
.case p{ text-align: center; }
.case.simple{ height: var(--largS); font-size: 0.8em; }
.case.big{ height: var(--largB); background-color: #000000; font-size: 1.1em; color: #8a4497; }
.n0{
	right: 0;
	top: calc( var(--largS) - (var(--largS) * 1.5));
}
.n1{
	right: calc( var(--largS) *1.5);
	top: var(--largS);
}
.n2{
	right: calc( var(--largS) *2);
	top: calc(var(--largS) * 3);
}
.n3{
	right: calc( var(--largS) *0.5);
	top: calc( (var(--largS) * 3.5) + var(--largB)) ;
}
.n4{
	right: calc( var(--largS) *1.75);
	top: calc( var(--H) - (var(--largS) / 2));
}

.puceCarre{
	height: calc(var(--largS) / 4);
	aspect-ratio:1/1;
	background-color: #8a4497;
	position: absolute;
	float: left;
	z-index: 4;
}
.p0{
	right: calc(var(--largS) * 0.75);
	top: calc(var(--largS) * 0.80);
}
.p1{
	right: calc(var(--largS) * 2.1);
	top: calc(var(--largS) * 2.4);
}
.p2{
	right: calc(var(--largS) * 2);
	top: calc(var(--largS) * 4.8);
}
.p3{
	right: calc(var(--largS) * 1.5);
	top: calc(var(--largS) * 6);
}

.trait{
	width: 60%;
	height: 2px;
	background-color: #8a4497;
	position: absolute;
	float:left;
	z-index: 2;
}
.t0{
	right: 0;
	top: var(--largS);
	transform: rotate(-30deg) translateX(6%);
}
.t1{
	right: calc(var(--largS) * 1.2);
	top: calc(var(--largS) * 2.5);
	transform: rotate(-70deg) translateX(6%);
}
.t2{
	right: calc(var(--largS) * 1);
	top: calc(var(--largS) * 5);
	transform: rotate(40deg) translateX(6%);
}
.t3{
	right: calc(var(--largS) * 1);
	bottom: calc(var(--largS) * 0.5);
	transform: rotate(-35deg) translateX(6%);
}

/* ACTU ---------------------------------- */
.zoneActuFirst{
	width: calc(100% - 120px);
	max-width: 1600px;
	max-height: calc(100vh - 60px);
	aspect-ratio:16/8;
	position: absolute;
	float: left;
	top:calc(50% + 20px);
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}
.blocActuFirst{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:1%;
}
.infoActuFirst{
	width: 25%;
	position: relative;
	float: left;
	transform: translateX(1.5vw);
	z-index: 2;
}
.infoActuFirst.anim{
	opacity: 0;
	animation-name: appActu1;
	animation-delay: 0;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.titreActuFirst{
	width: 100%;
	font-weight: bold;
	font-size: 2em;
	position: relative;
	float: left;
}
.titreActuFirst h1{ font-size: 1em; font-weight: bold; margin: 0; padding: 0; }
.groupeActuFirst{
	width: calc(100% - 20px);
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	background-color: #1d101f;
	position: relative;
	float: left;
	padding:10px;
}
.cadreActuFirst{
	max-width: 76%;
	height: 100%;
	aspect-ratio:12/7;
	border: 1px solid #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: right;
	transform: translateX(-1.5vw);
	z-index: 1;
}
.cadreActuFirst.anim{
	opacity: 0;
	animation-name: appActu2;
	animation-delay: 0s;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.visuActuFirst{
	width:calc(100% - 40px);
	height: calc(100% - 40px);
	background-color: #222222;
	position: relative;
	float: left;
}
.visuActuFirst img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.grilleActu{
  display:flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2vw;
  margin: 60px 0;
}
.actu{
	height: 29vw;
	aspect-ratio: 9 / 10;  /* carré */
	background: #3c2241;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transform: translateY(50px);
  	transition: all 0.6s ease;
}
.actu.double { aspect-ratio: 37 / 20; }
.actu.active{ opacity: 1; transform: translateY(0); }

.contenuActu{
	width:calc(100% - 20px);
	height: calc(100% - 20px);
	border: 1px solid #ffffff;
	position: relative;
	float: left;
}
.contenuActu.double{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.photoActu{
	width: calc(100% - 20px);
	aspect-ratio:5/4;
	background-color: #000000;
	position: relative;
	float: left;
	margin: 10px;
}
.photoActu.double{
	height:calc(100% - 20px);
	width: auto;
}
.photoActu img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.infoActu{
	width: calc(100% - 20px);
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	position: relative;
	float: left;
	margin: 0 10px;
}
.infoActu.double{
	width:33%;
}
.descrActu{
	width: calc(100% - 40px);
	height: 40px;
	color: #ffffff;
	position: relative;
	float: left;
	overflow: hidden;
	margin-top: -10px;
}
.descrActu.double{
	height: auto;
	max-height: calc(100% - 100px);
}

/* CONTACT ------------------------- */

.ligneCoord{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	float: left;
	margin: 10px 0;
}
.iconeCoord{
	width: 35px;
	height: 35px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
}
.iconeCoord img{
	object-fit: contain;
	width: 100%;
	height: 100%;
}
.txtCoord{
	color: #ffffff;
	font-size: 1em;
	position: relative;
	float: left;
}
.txtCoord a{ color: #ffffff; text-decoration: none; }
.txtCoord.tel{
	font-size: 2em;
}
.txtCoord.mail{
	font-size: 1.2em;
}

.groupeFormul{
	width: 45vw;
	max-width: 550px;
	margin-right: 3vw;
	position: relative;
	float: left;
	z-index: 2;
}
.zoneForm{
	width: 100%;
	position: relative;
	float: left;
}
.zoneForm.anim{
	opacity: 0;
	animation-name: appBot100;
	animation-delay: 0s;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.chpStdFull{
	width: calc(100% - 22px);
	/*height: 30px;*/
	color: #ffffff;
	font-family: 'Roboto';
	font-size: 1em;
	text-align: center;
	border-radius: 8px;
	border: 1px solid #8a4497;
	background-color: #1d101f;
	position: relative;
	float: left;
	left: 50%; 
	transform: translateX(-50%);
	margin: 5px 0;
	padding: 10px 0;
	clear: both;
}
.chpStdFull::placeholder{ color: #999999; }
.chpStdMini{
	width: 80px;
	/*height: 30px;*/
	color: #ffffff;
	font-family: 'Roboto';
	font-size: 1em;
	text-align: center;
	border-radius: 8px;
	border: 1px solid #8a4497;
	background-color: #1d101f;
	padding: 10px 0;
}

.chpAreaFull{
	width: calc(100% - 22px);
	height: 180px;
	color: #ffffff;
	font-family: 'Roboto';
	font-size: 1em;
	text-align: center;
	border-radius: 8px;
	border: 1px solid #8a4497;
	background-color: #1d101f;
	position: relative;
	float: left;
	left: 50%; 
	transform: translateX(-50%);
	margin: 5px 0;
	padding: 10px 0;
	clear: both;
}
.chpAreaFull::placeholder{ color: #999999; }

.subStd{
	width:250px;
	max-with:calc(100% - 22px);
	border: 1px solid #8a4497;
	font-family: 'Roboto';
	color: #ffffff;
	font-size: 1em;
	text-align: center;
	vertical-align: middle;
	background-color:#8a4497; 
	position: relative;
	float: left;
	clear: both;
	left: 50%; 
	transform: translateX(-50%);
	margin: 10px 0;
	padding: 10px 0;
	cursor: pointer;
}
.sepForm{ width: 100%; height: 10px; position: relative; float: left; }
.ligneTxtForm{
	width: 100%;
	font-size: 0.9em;
	position: relative;
	float: left;
	margin: 2px 0;
}

.message{
width:350px;
max-width: 90%;
background-color:#000000;
border:1px solid #8a4497;
border-radius:8px;
font-size:1em;
color: #ffffff;
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:#8a4497;
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;
}

.groupeMention{
	width: 60vw;
	max-width: 800px;
	margin-left: 3vw;
	margin-top: 100px;
	position: relative;
	float: left;
	z-index: 2;
}


/* ACTU ----------------------- */
.contenuPageActu{
	width: 100%;
	position: relative;
	float: left;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	overflow: hidden;
}
.contenuPageActu.topH{ align-items: flex-start; }
.groupeTexteActu{
	max-width: 500px;
	position: relative;
	float: left;
	margin-top: 100px;
	margin-left: 25%;
	transform: translateX(-50%);
	padding-bottom: 40px;
	z-index: 2;
}
.groupeTexteReportage{
	width: calc(100% - 10vw);
	max-width: 800px;
	position: relative;
	float: left;
	margin-top: 100px;
	margin-left: 50%;
	transform: translateX(-50%);
	padding-bottom: 40px;
	z-index: 2;
}
.txtActu{
	position: relative;
	padding: 10px;
}
.cadreMission{
	width: calc(100% - 20px);
	background-color: #6b3775;
	border: 1px solid #ffffff;
	border-radius: 8px;
	padding: 10px;
}

.actuGrdePhoto{
	width: 800px;
	height: auto;
	margin-top: 100px;
	position: relative;
	float: left;
}
.actuGrdePhoto.anim{
	opacity: 0;
	animation-name: appRight200;
	animation-delay: 0s;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.actuGrdePhoto img{
	object-fit: contain;
	width: 100%;
	height: 100%;
}
.ligneRetour{
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	float: left;
	margin: 10px 0;
}

.photoReportage{
	width: 100%;
	position: relative;
	float: left;
	margin: 10px 0;
}
.photoReportage img{
	object-fit: contain;
	width: 100%;
	height: 100%;
	display: block;
}
.photoReportage.anim{
	opacity: 0;
	animation-name: appRight200;
	animation-delay: 0s;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.ssTitreReportage{
	font-size: 1.5em;
	font-weight: bold;
	color: #ffffff;
	padding-bottom: 10px;
	padding-top: 30px;
}
.ssTitreReportage:first-letter{ color:#ffd050; }

.ligneFlex{
	width: 100%;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.photoDeco{
	width: 200px;
	height: 150px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}
.photoDeco img{
	object-fit: contain;
	width: 100%;
	height: 100%;
}
.txtArticleFlex{
	width: calc(100% - 220px);
	position: relative;
}

.flex100{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap:40px;
}
.col50txt{
	width:calc(50% - 20px);
	position: relative;
}

/* TRANSITION PAGE -------------------------- */
#MasquePage{
	width: 100%;
	height: 100%;
	position: fixed;
	float: left;
	overflow: hidden;
	z-index: 1000;
}
#MasquePage.chargeMP{
	animation-name: off;
    animation-duration: 0s;
	animation-timing-function: linear;
    animation-fill-mode: forwards;
	animation-delay: 1s;
	animation-iteration-count: 1;
}
.bandMP{
	width: 100%;
	height: 10vh;
	position: relative;
	clear: both;
}
.demiMP{
	width: 50%;
	height: 100%;
	background-color: #000000;
	position: relative;
}
.demiMP.gauche{
	float: left;
}
.demiMP.droite{
	float: right;
}
.demiMP.arrive{
	width: 50%;
	animation-name: ouvre;
    animation-duration: 0.4s;
	animation-timing-function: linear;
    animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
.demiMP.ferme{
	width: 0;
	animation-name: ferme;
    animation-duration: 0.4s;
	animation-timing-function: linear;
    animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
.time0{ animation-delay: 0s; }
.time1{ animation-delay: 0.05s; }
.time2{ animation-delay: 0.1s; }
.time3{ animation-delay: 0.15s; }
.time4{ animation-delay: 0.2s; }
.time5{ animation-delay: 0.25s; }
.time6{ animation-delay: 0.3s; }
.time7{ animation-delay: 0.35s; }
.time8{ animation-delay: 0.4s; }
.time9{ animation-delay: 0.45s; }
.time10{ animation-delay: 0.5s; }

@keyframes off{
	from,100%{
		visibility: hidden;
	}
}
@keyframes ouvre{
	from{ width: 50%; }
	100%{ width: 0; }
}
@keyframes ferme{
	from{ width: 0; }
	100%{ width: 50%; }
}

/* ANIMATION ----------------------------- */
@keyframes appTop100 {
	0%{ opacity:0; transform: translateY(-100px); }
	100%{ opacity:1; transform: translateY(0);}
}
@keyframes appTop50 {
	0%{ opacity:0; transform: translateY(-50px); }
	100%{ opacity:1; transform: translateY(0);}
}
@keyframes appSimple {
	0%{ opacity:0; }
	100%{ opacity:1; }
}
@keyframes appLeft200 {
	0%{ opacity:0; transform: translateX(-200px); }
	100%{ opacity:1; transform: translateX(0);}
}
@keyframes appRight200 {
	0%{ opacity:0; transform: translateX(200px); }
	100%{ opacity:1; transform: translateX(0);}
}
@keyframes appRight100 {
	0%{ opacity:0; transform: translateX(100px); }
	100%{ opacity:1; transform: translateX(0);}
}
@keyframes appBot100 {
	0%{ opacity:0; transform: translateY(100px); }
	100%{ opacity:1; transform: translateY(0);}
}

@keyframes appActu1 {
	0%{ opacity:0; transform: translateX(-200px); }
	100%{ opacity:1; transform: translateX(1.5vw);}
}
@keyframes appActu2 {
	0%{ opacity:0; transform: translateX(100px); }
	100%{ opacity:1; transform: translateX(-1.5vw);}
}

@keyframes accrIntroTop {
	0%{ opacity:0; transform: translateX(-50%) translateY(-50px); }
	100%{ opacity:1; transform: translateX(-50%) translateY(0);}
}
@keyframes animCarre1 {
	0%,20%{ transform: rotate(15deg) translate(-25%,-45%); scale:1; }
	40%{ transform: rotate(45deg) translate(-45%,-35%); scale:0.8; }
	60%,100%{ transform: rotate(15deg) translate(-25%,-45%); scale:1; }
}
@keyframes animCarre2 {
	0%,20%{ transform: rotate(45deg) translate(-25%,-45%); scale:1; }
	40%{ transform: rotate(135deg) translate(-50%,25%); scale:0.8; }
	60%,100%{ transform: rotate(45deg) translate(-25%,-45%); scale:1; }
}