@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: 16px;
	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: 1.8em;
	font-weight: 100;
	color: #ffffff;
}
.titreH2{
	font-size: 1.4em;
	font-weight: 100;
	color: #ffffff;
}
.titreH3{
	font-size: 1.1em;
	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; }

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

.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;
}
.graphiweb{
	height: 30px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
	margin: 0;
}
.visuGraphi{
	height: 100%;
	position: relative;
}
.visuGraphi img{ max-height: 100%; width: auto; display: block; }
.nomGraphi{
	font-family: 'Geosans';
	color: #ffffff;
	font-size: 2em;
	position: relative;
}
.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;
}
.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;
}
.menuP{
	width: 120px;
	position: relative;
	float: left;
	padding-top: 5px;
}
.boutonMenuP{
	text-align: right;
	position: relative;
	margin: 5px 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;
}

#Bas{
	width: calc(100% - 20px);
	border-top: 1px solid #6b3775;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	position: relative;
	float: left;
	margin-top: 20px;
	padding: 10px;
}
.resumeBas{
	width: 100%;
	position: relative;
	float: left;
}
.txtResume{
	width: 100%;
	position: relative;
	float: left;
	margin: 20px 0;
}
.colonneBas{
	position: relative;
	float: left;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	flex-direction: column;
	gap:20px;
	left: 50%;
	transform: translateX(-50%);
}
.blocCoord{
	width: calc(100% - 70px);
	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 40px;
	margin-left: 30px;
}
.caseIconeBas{
	width: 60px;
	height: 60px;
	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: 55px;
	height: 55px;
	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;
}

/* 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;
}

/* BOUTONS ----------------------- */
.boutonStd{
	width: 200px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #8a4497;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
}
.boutonStd.anim{
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 1.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.boutonStd.enligneReseau{
	margin-top: 20px;
}
.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;
}

.zoneNavSlide{
	width: 100%;
	display: flex;
	justify-content: space-between;
	position: relative;
	float: left;
	z-index: 3;
}
.zoneNavSlide.panoAcc{
	justify-content: space-around;
	position: absolute;
	float: left;
	bottom: 2vh;
	left: 0;	
}
.boutonRond{
	width: 45px;
	height: 45px;
	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; }

.boutonPlus{
	width: 40px;
	height: 40px;
	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;
}

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

.sectFull{
	width: 100%;
	height: calc(var(--scroll-size, 200) * 1vh);
	position: relative;
	float: left;
	overflow: hidden;
	z-index: 1;
}
.sectActu{
	width: 100%;
	/*min-height: 100vh;*/
	background-color: #1d101f;
	position: relative;
	float: left;
	padding: 20px 0;
	border-top: 1px solid #8a4497;
	z-index: 1;
}

.contenuScroll {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 5;
  overflow: hidden;
  will-change: transform;
  padding-top:50px;
}

.contenuAnim {
  width: 100%;
  min-height: calc(100vh - 50px);
  display: flex;
  justify-content:space-around;
  align-items: center;
  flex-direction: column;
  gap:40px;	
  transition: transform 0.3s ease-out;
  position: relative;
	overflow: hidden;
  z-index: 2;
}
.contenuAnim.start{ justify-content: flex-start; }
.contenuAnim.miniGap{ gap:20px; }
.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: 100vh;
	position: absolute;
	float: left;
	left: 0;
	top: -50px;
	z-index: 2;
	transform: translateX(-150px);
}
.decoFond img{ max-height: 100%; width: auto; display: block; }


.groupeTexteFlot{
	width: calc(100% - 20px);
	max-width: 500px;
	position: relative;
	float: left;
	z-index: 2;
}
.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;
}
.blocInfoA{
	width: calc(100% - 20px);
	transform: translateX(-200px);
	position: relative;
	float: left;
	margin-bottom: 5px;
}
.blocInfoA.anim{
	opacity: 0;
	animation-name: appLeft200;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.blocDemiPage{
	width: 100%;
	height: auto;
	position: relative;
	float: left;
	z-index: 2;
}

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

.accSouris{
	width:40%;
	position: absolute;
	float: left;
	bottom:25%;
	left: 5%;
	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{
	width: 40%;
	position: absolute;
	float: left;
	bottom:25%;
	right:5%;
	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: 170px;
	height: 100px;
	position: absolute;
	float: left;
	z-index: 3;
}
/*.blocMotIntro.long{ width:250px; }*/
.blocMotIntro.mot1{ 
	left: 2%; 
	top: 10%; 
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocMotIntro.mot2{ 
	left: 48%; 
	top: 25%; 
	opacity: 0;
	transform: translateX(-100%);
	animation-name: appSimple;
	animation-delay: 2.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocMotIntro.mot3{ 
	right: 25%; 
	top: 14%; 
	opacity: 0;
	transform: translateX(50%);
	animation-name: appSimple;
	animation-delay: 2s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocMotIntro.mot4{ 
	right: 1%; 
	top: 30%; 
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 3.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocMotIntro.mot5{ 
	right: 50%; 
	top: 45%; 
	opacity: 0;
	transform: translateX(100%);
	animation-name: appSimple;
	animation-delay: 1.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.blocMotIntro.mot6{ 
	left: 25%; 
	top: 42%; 
	opacity: 0;
	transform: translateX(-50%);
	animation-name: appSimple;
	animation-delay: 3s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}


.motIntro{
	font-size: 1.2em;
	color: #ffffff;
	text-decoration: none;
	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{
	width: 90%;
	text-align: center;
	position: absolute;
	float: left;
	left: 50%;
	bottom: 8vh;
	transform: translateX(-50%);
	z-index: 2;
}
.accrocheIntro h1{ font-size: 1.5em; }
.accrocheIntro.anim{
	opacity: 0;
	animation-name: accrIntroTop;
	animation-delay: 4s;
	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.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: 20px;
	position: relative;
}
.flecheIndicatifScroll img{ max-height: 100%; width: auto; display: block; }

.ligneRaccourci{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	float: left;
}
.caseRaccourci{
	width: 100px;
	height: 110px;
	border: 1px solid #ffffff;
	background-color: #000000;
	position: relative;
	float: left;
	transition: all 0.4s;
}
.visuRaccourci{
	width: 90%;
	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%;
	font-size:0.8em;
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	position: relative;
	float: left;
	z-index: 2;
}

.titreDeco{
	width: calc(100% - 20px);
	text-align: right;
	position: relative;
	float: left;
	transform: translateX(200px);
	z-index: 3;
}
.visuelDeco{
	width: 100%;
	height: 40vh;
	display: flex;
	justify-content: center;
	position: relative;
	transform: translateY(100px);
}
.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: 100%;
	height: calc(100vh - 105px);
	position: relative;
	float: left;
	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: calc(100% - 20px);
	position: relative;
	float: left;
}
.ssTitrePano{
	width: 100%;
	position: relative;
	float: left;
	margin-bottom: 10px;
}
.paraInfoPano{
	width: 100%;
	position: relative;
	float: left;
	margin: 10px 0;
}
.paraInfoPano.anim{
	opacity: 0;
	animation-name: appRight200;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.cardeMiniPano{
	width: 100%;
	aspect-ratio:20/13;
	border: 1px solid #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 3;
}
.cardeMiniPano.interne{
	width: calc(100% - 20px);
}
.cardeMiniPano.anim{
	opacity: 0;
	animation-name: appSimple;
	animation-delay: 0.7s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.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;
}

.listeArgu{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap:10px;
	background-color: rgba(0,0,0,0.5);
	position: relative;
	float: left;
	margin: 0;
	padding: 5px 0;
}
.listeArgu.vide{ background: none; }
.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.1em;
	position: relative;
}

.cadreTem{
	width: calc(100% - 20px);
	background-color: #8a4497;
	border-radius: 8px;
	border: 1px solid #ffffff;
	box-shadow: 0 0 8px #222222;
	position: relative;
	float: left;
	z-index: 2;
	transform: translateX(150px);
	overflow: hidden;
	padding: 0 0 10px 0;
}
.zoneTem{
	width: 100%;
	height: 45vh;
	position: relative;
	overflow: hidden;
}
.temoignage{
	width: 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: 50%;
	height: 55px;
	background-color: #6b3775;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
	padding: 5px;
}
.visuTem .maxW{ max-width: 90%; height: auto; display: block; }
.visuTem .maxH{ max-height: 90%; width: auto; display: block; } 
.txtTem{
	width: calc(100% - 10px);
	color: #ffffff;
	font-size: 0.9em;
	position: relative;
	float: left;
	margin: 5px;
	overflow:auto;
}
.titreTem{
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	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;
}

.listeActu{
	width: 100%;
	height: calc(100vh - 130px);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	gap:10px;
	position: relative;
	float: left;
	overflow: hidden;
}
.listeActu.full{
	height:auto;
}
.actuMajeur{
	width: 94vw;
	background-color: #3c2241;
	display: flex;
	justify-content: center;
	align-items: stretch;
	position: relative;
	float: left;
	z-index: 2;
}
.actuStd{
	width: 94vw;
	background-color: #3c2241;
	display: flex;
	justify-content: center;
	align-items: stretch;
	position: relative;
	float: left;
	z-index: 2;
	transform: translateY(50px);
  	transition: all 0.6s ease;
}
.actuStd.active{ opacity: 1; transform: translateY(0); }
.cadreActu{
	width: 100%;
	border: 1px solid #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
	margin: 10px;
}
.cadreActu.fdweb{
	background-image: url("img/actu-fdweb.webp");
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
}
.blocActu{
	width: calc(100% - 20px);
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	position: relative;
	float: left;
	margin: 10px 0;
}
.titreActu{
	font-size: 1.5em;
	font-weight: bold;
	color: #8a4497;
	position: relative;
	float: left;
	text-transform: uppercase;
}
.titreActu.ligne{ width: 100%; }
.titreActu.anim{
	opacity: 0;
	animation-name: appLeft200;
	animation-delay: 0s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.sstitreActu{
	font-weight: bold;
	font-size: 1em;
	color: #ffffff;
	position: relative;
	float: left;
	margin-bottom: 15px;
	text-transform: uppercase;
}
.sstitreActu.ligne{ width: 100%; }
.sstitreActu.anim{
	opacity: 0;
	animation-name: appLeft200;
	animation-delay: 0.2s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.accrocheActu{
	width: 100%;
	color: #ffffff;
	position: relative;
	float: left;
	margin-bottom: 20px;
}

.cadreProd{
	width: calc(100% - 20px);
	background-color: #8a4497;
	border-radius: 8px;
	border: 1px solid #ffffff;
	box-shadow: 0 0 8px #222222;
	position: relative;
	float: left;
	z-index: 2;
	transform: translateX(150px);
	overflow: hidden;
	padding: 0 0 10px 0;
}
.zoneProd{
	width: 100%;
	height: calc(100vh - 300px);
	position: relative;
	overflow: hidden;
}
.prod{
	width: 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;
}
.prod.active{ opacity: 1; }
.visuProd{
	width: 50%;
	height: 100px;
	background-color: #6b3775;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
	padding: 5px;
	overflow: hidden;
}
.txtProd{
	width: calc(100% - 10px);
	height: 100%;
	color: #ffffff;
	font-size: 0.9em;
	position: relative;
	float: left;
	margin: 5px;
	overflow:auto;
}

/* SITE ITERNET -------------------- */
.listeClic{
	width: calc(100% - 100px);
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap:15px;
	position: relative;
	float: left;
	margin: 15px 0 0 30px;
}
.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: 20px; }
.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;
}
.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;
}

.popWeb{
	width: 100%;
	height: 100%;
	background-color: #000000;
	position: absolute;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	left: -110vw;
	opacity: 0;
	transition: all 0.4s;
}
.popWeb.active{ left: 0; opacity: 1; }
.blocWeb{
	width: 100%;
	position: relative;
	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: 1.5em;
	color: #8a4497;
	padding: 10px;
	margin-bottom: 10px;
	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: center;
	align-items: stretch;
	flex-wrap: wrap;
	position: relative;
	float: left;
}
.caseWeb{
	width: 30%;
	background-color: #8a4497;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
	margin: 0 1% 10px 1%;
	padding: 10px 0;
}
.caseWeb.derniere{ width: 50%; }
.caseWeb p{
	width: 100%;
	font-size: 0.9em;
	text-align: center;
	position: relative;
}

.groupeVueApp{
	width: 100%;
	/*aspect-ratio:9/8;*/
	position: relative;
	float: left;
	z-index: 2;
}
.bulleWebApp{
	height: 120px;
	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: 50px;
}
.bulleWebApp.b3{
	bottom:50px;
	left: 0;
}
.bulleWebApp.b4{
	right:2%;
	bottom:0;
}
.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: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	margin: 140px 0;
	z-index: 1;
}

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

/* MARKETING ----------------------- */

.ligneReseau{
	width: 100%;
	position: relative;
	float: left;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.visuBulle{
	width: 25%;
	max-width: 150px;
	aspect-ratio:1/1;
	position: relative;
	float: left;
}
.visuBulle img{ max-width: 100%; height: auto; display: block; }
.visuBulle.insta.anim{
	opacity: 0;
	animation-name: appTop100;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.visuBulle.fb.anim{
	opacity: 0;
	animation-name: appBot100;
	animation-delay: 1.5s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.visuBulle.lk.anim{
	opacity: 0;
	animation-name: appTop100;
	animation-delay: 2s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.listeFleche{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap:15px;
	position: relative;
	float: left;
	margin: 10px 0 10px 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;
}

.popInfo{
	width: 100%;
	height: 100%;
	background-color: #000000;
	position: absolute;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	left: 110vw;
	opacity: 0;
	transition: all 0.4s;
}
.popInfo.active{ left: 0; opacity: 1; }
.groupeVS{
	position: relative;
	float: left;
	opacity: 0;
	transition: all 0.5s ease;
}
.groupeVS.active{ opacity: 1; }
.blocVS{
	width: 100%;
	max-height: 45%;
	background-color: #3c2241;
	display: flex;
	justify-content: center;
	align-items: stretch;
	position: relative;
	float: left;
	padding: 10px;
	box-sizing: border-box;
	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% - 10px);
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	position: relative;
	float: left;
	margin: 15px 0;
}
.titreVS{
	width: 100%;
	font-size: 1.5em;
	font-weight: 100;
	color: #ffffff;
	text-align: center;
	position: relative;
	float: left;
}
.txtVS{
	width: 100%;
	color: #ffffff;
	position: relative;
	float: left;
	margin: 10px 0 0 0;
}
.etiquetteVS{
	min-width: 100px;
	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(-5%);
	z-index: 4;
}
.ligneSepVS{
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
}
.rondVS{
	width: 70px;
	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;
}

/* EFFET CASE ------------------------------------- */
.org{
	--L:100vw;
	--largS:calc(100vw / 6);
	--largB:calc(100vw / 4);
	height: 35vw;
	width: 100vw;
	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{ width: var(--largS); font-size: 0.8em; }
.case.big{ width: var(--largB); background-color: #000000; font-size: 1em; color: #8a4497; }
.n1{
	top: var(--largS);
	left: calc( var(--largS) *4.5);
}
.n2{
	left: calc( var(--largS) *2.3);
	top: 0;
}
.n3{
	top: var(--largS);
	left: calc( var(--largS) *0.5);
}
.trait{
	width: 60%;
	height: 2px;
	background-color: #8a4497;
	position: absolute;
	float:left;
	z-index: 2;
}
.t0{
	top: var(--largS);
	left: 0;
	transform: rotate(-30deg) translateX(-8%);
}
.t1{
	right: 0;
	top: calc(var(--largS) * 1.2);
	transform: rotate(20deg) translateX(6%);
}

/* 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: 90vw;
	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: 120px;
	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: 96vw;
	margin-left: 3vw;
	margin-top: 50px;
	position: relative;
	float: left;
	z-index: 2;
}

/* ARTICLES ----------------------------- */
.cadreMission{
	width: calc(100% - 40px);
	background-color: #6b3775;
	border: 1px solid #ffffff;
	border-radius: 8px;
	padding: 10px;
}
.cadreMission.anim{
	opacity: 0;
	animation-name: appRight200;
	animation-delay: 1s;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.ssTitreReportage{
	font-size: 1.3em;
	font-weight: bold;
	color: #ffffff;
	padding-bottom: 10px;
	padding-top: 30px;
}
.ssTitreReportage:first-letter{ color:#ffd050; }

/* 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{
	height: 100%;
	animation-name: ouvre;
    animation-duration: 0.4s;
	animation-timing-function: linear;
    animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
.demiMP.ferme{
	height: 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{ height: 100%; }
	100%{ height: 0; }
}
@keyframes ferme{
	from{ height: 0; }
	100%{ height: 100%; }
}


/* 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; }
}