@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'Inter';
src: url('typo/inter-reg.woff2') format('truetype');
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Saira';
src: url('typo/SairaCondensed-ExtraBold.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Saira';
src: url('typo/SairaCondensed-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

html,body{
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: 'Inter';
	font-size: 18px;
	color: #000000;
	background: #ffffff;
background: linear-gradient(0deg,rgba(255, 255, 255, 1) 45%, rgba(189, 189, 189, 1) 100%);
}


/* FONT ------------------ */
.coulRose{ color: #af0162; }
.coulBleu{ color: #0e72b5; }
.coulRouge{ color: #bf1428; }
.coulVert{ color:#6ec1a3; }
.coulVertLechay{ color: #c3cfcc; }

.lienBlanc{
	color: #ffffff;
	text-decoration: none;
}

p{ margin: 0; padding: 0; }

#Bas{
	width:100%;
	height: 30px;
	background-color: #000000;
	text-align: center;
	color: #ffffff;
	position: relative;
	float: left;
	padding-top: 10px;
	padding-bottom:10px
}
.coord{
	width:100%;
	color: #ffffff;
	position: relative;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}
.tel{ font-size: 2em; margin-right: 60px; position: relative; float: left; }
.email{ font-size: 1.4em; position: relative; float: left; }
.copyr{ width:100%; text-align: center; position: relative; float: left; font-size: 0.9em; }
.copyr a{ text-decoration: none; color: #ffffff; }

#Trame{
	width:100%;
	height: 100%;
	background-color: rgba(255,255,255,0.9);
	position: fixed;
	float: left;
	z-index: 9;
	visibility: hidden;
}
#Legal{
	width:calc(95% - 20px);
	max-width: 800px;
	background-color: #ffffff;
	border: 1px solid #000000;
	color: #000000;
	text-decoration: none;
	padding: 10px; 
	position: fixed;
	float: left;
	top:20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	visibility: hidden;
}
#Legal .entete{
	width:100%;
	height: 3em;
	position: relative;
	float: left;
}
.bclose{
	width: 40px;
	height: 40px;
	border: 1px solid #dddddd;
	color: #666666;
	font-size: 30px;
	text-align: center;
	line-height: 40px;
	vertical-align: middle;
	position: absolute;
	float: left;
	top:0;
	right: 0;
	z-index: 11;
}
.bclose:hover{ background-color: #dddddd; }

.visuL{
	width:100%;
	height: auto;
	position: relative;
	float: left;
	left: 0;
	top: 50%;
	opacity:1;
	transform: translate(0, -50%);
	/*animation: 4s ease-in-out 0s 1 animDessin2;*/
}
.cercle1{ width:37.4%; /*width:438px;*/ position: absolute; float: left; top:50%; left: 0; transform: translateY(-50%); animation: 4s ease-in-out 0s 1 animC1; }
.cercle1 img{ max-width: 100%; display: block;}
.cercle2{ width:29.8%; /*width:349px;*/ position: absolute; float: left; left: 3.7%/*45px*/; top: 50%; transform: translateY(-50%); animation: 4s ease-in-out 0s 1 animC2; }
.cercle2 img{ max-width: 100%; display: block; }
.cercle3{ width:23.5%; /*width:276px;*/ position: absolute; float: left; left: 6.8%/*80px*/; top: 50%; transform: translateY(-50%); animation: 4s ease-in-out 0s 1 animC3; }
.cercle3 img{ max-width: 100%; display: block; }
.cercle4{ width:18.2%; /*width:213px;*/ position: absolute; float: left; left: 9.45%/*110px*/; top: 50%; transform: translateY(-50%); animation: 4s ease-in-out 0s 1 animC4; }
.cercle4 img{ max-width: 100%; display: block; }
.contenuTrait{ width:64.3%; /*width: 753px;*/ overflow: hidden; position: absolute; float: left; left: 35.5%/*390px*/; top: 50%; transform: translateY(-49.7%); animation: 4s ease-in-out 0s 1 animT0; }
.trait{ width:100%; position: relative; float: left; }
.trait img{ max-width: 100%; display: block; }
.contenuMot{ width:39.9%; /*width: 467px;*/ overflow: hidden; position: absolute; float: left; left:40.5%; top: 50%; transform: translateY(-130%); }
.mot1{ width:100%; position: relative; float: left; animation: 4s ease-in-out 0s 1 animM1; }
.mot1 img{ max-width: 100%; display: block; }
.contenuMot2{ width:56.3%; /*width: 659px;*/ overflow: hidden; position: absolute; float: left; left:40.5%; top: 50%; transform: translateY(19%); }
.mot2{ width:100%; position: relative; float: left; animation: 4s ease-in-out 0s 1 animM2; }
.mot2 img{ max-width: 100%; display: block; }


/* PAGE ------------------------------------------------------------------- */

.partOne{
	width: 100%;
	height: auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	position: relative;
	float: left;
	/*background-image: url("img/fond.webp");
	background-size: cover;
	background-position: center center;*/
}
.hautPage{
	width: 100%;
	max-width: 1200px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	gap:40px;
	padding: 10px 0;
}
.cadreLogoTop{
	width: 100%;
	max-width: 620px;
	height: 150px;
	position: relative;
	float: left;
}
.cadreLogoTop img{
	max-width: 100%;
	height: auto;
}
.reseauTop{
	width: 120px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
	float: left;
}

.infoSoc{
	width: calc(100% - 40px);
	max-width: 1250px;
	height: calc(100vh - 300px);
	max-height: 550px;
	border: 1px solid #333333;
	border-radius: 8px;
	background-color: #ffffff;
	box-shadow: 0 0 12px #666666;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	transition:0.3s all;
}
.menuMobi{ display: none; }
.colMenu{
	width: 308px;
	position: relative;
	float: left;
	padding: 40px 20px;
	transition: all 0.2s;
}
.colMenu.fdRose{ background-color: #af0162; background: linear-gradient(0deg,rgba(175, 1, 98, 1) 0%, rgba(232, 79, 163, 1) 100%); }
.colMenu.fdBleu{ background-color: #0e72b5; background: linear-gradient(0deg,rgba(14, 114, 181, 1) 0%, rgba(70, 169, 235, 1) 100%); }
.colMenu.fdRouge{ background-color: #bf1428; background: linear-gradient(0deg,rgba(191, 20, 40, 1) 0%, rgba(255, 92, 111, 1) 100%); }
.colMenu.fdVert{ background: #70C3A5; background: linear-gradient(0deg,rgba(112, 195, 165, 1) 0%, rgba(73, 161, 176, 1) 100%); }
.bordMenu{
	height: calc(100% - 40px);
	border-right: 2px dashed #ffffff;
	position: absolute;
	float: left;
	top: 0;
	right: 0;
	z-index: 1;
}

.ligneMenu{
	width: 100%;
	border-bottom: 1px solid #ffffff;
	position: relative;
	float: left;
	padding: 10px 0;
	margin: 2px 0;
}
.ligneMenu.actif .infoMenu{
	margin-left: 20px;
}
.ligneMenu.fin{
	width: calc(100% - 40px);
	position: absolute;
	float: left;
	margin: 0;
	bottom: 40px;
}
.infoMenu{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
	position: relative;
	float: left;
	transition: all 0.4s;
}
.puceMenu{
	width: 35px;
	height: 35px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	float: left;
	background-color: rgba(255,255,255,1);
}
.decoMenu{
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
.decoMenu.atelier{ background-image: url("img/ico-computer.svg"); }
.decoMenu.atelier.actif{ background-image: url("img/ico-computer-actif.svg"); }
.decoMenu.horizon{ background-image: url("img/ico-server.svg"); }
.decoMenu.horizon.actif{ background-image: url("img/ico-server-actif.svg"); }
.decoMenu.fbs{ background-image: url("img/ico-fibre.svg"); }
.decoMenu.fbs.actif{ background-image: url("img/ico-fibre-actif.svg"); }
.decoMenu.ras{ background-image: url("img/ico-box.svg"); }
.decoMenu.ras.actif{ background-image: url("img/ico-box-actif.svg"); }

.puceMenu img{
	max-width: 25px;
	height: auto;
	display: block;
}
.nomMenu{
	font-size: 1.1em;
	color: #ffffff;
	position: relative;
	float: left;
}
.ligneMenu:hover .infoMenu{
	margin-left: 20px;
}

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

.detailSoc{
	width: calc(100% - 350px);
	height: calc(100% - 40px);
	position: relative;
	float: left;
}
.bandSupSoc{
	width: calc(100% - 60px);
	height: 150px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	padding: 20px 0;
}
.logoSoc{
	max-width: 50%;
	height: 100%;
	position: relative;
	float: left;
}
.logoSoc img{
	max-height: 100%;
	width: auto;
}
.accrocheSoc{
	max-width: 40%;
	text-align: right;
	font-size: 1.2em;
	font-weight: bold;
	position: relative;
	float: left;
}
.bandSupSoc.rose{ border-bottom: 1px solid #af0162; }
.bandSupSoc.bleu{ border-bottom: 1px solid #0e72b5; }
.bandSupSoc.rouge{ border-bottom: 1px solid #bf1428; }
.bandSupSoc.vert{ border-bottom: 1px solid #6ec1a3; }

.txtSoc{
	width:calc(100% - 60px);
	max-height: calc(100% - 230px);
	position: absolute;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	top: 220px;
	overflow: auto;
}
.bAccesMenu{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
}
.puceAcces{
	width: 25px;
	height: 25px;
	position: relative;
	float: left;
}
.puceAcces img{ max-width: 100%; height: auto; display: block; }

.nomAcces{
	font-size: 1.1em;
	font-weight: bold;
	color: #af0162;
	position: relative;
	float: left;
}
.nomAcces.bleu{ color:#0e72b5; }
.nomAcces.rouge{ color: #bf1428; }
.nomAcces.vert{ color:#6ec1a3; }

.coordSoc{
	width: calc(100% - 348px);
	height: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #af0162;
	color: #ffffff;
	position: absolute;
	float: left;
	margin-left: 348px;
	bottom: 0;
}
.coordSoc.fdBleu{
	background-color: #0e72b5;
}
.coordSoc.fdRouge{ background-color: #bf1428; }
.coordSoc.fdVert{ background-color: #6ec1a3; }
.coordTel{
	/*width: 200px;*/
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 1.2em;
	position: relative;
	float: left;
	gap:10px;
	margin-left: 10px;
}
.coordEmail{
	/*width: 200px;*/
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 1em;
	position: relative;
	float: left;
	gap:10px;
	margin-right: 10px;
}
.icone{ max-height: 35px; width: auto; display: block; }

/* -- PANO ---------------------- */
.txtGroupe{
	width:calc(100% - 60px); 
	max-width: 1250px;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 0 12px #666666;
	text-align: center;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	clear: both;
	padding: 10px;
	margin: 30px 0;
}
.partPole{
	width: 100%;
	position: relative;
	float: left;
	/*background-image: url("img/fond-bis.webp");
	background-size: cover;
	background-position: center center;*/
}
.panoPole{
	width: 100%;
	height: 800px;
	max-height: 75vh;
	position: relative;
	float: left;
	/*border-bottom:2px solid #ff0000;
	border-top:2px solid #ff0000;*/
	box-shadow: 0 0 10px #999999;
	margin: 40px 0;
}
.diapoPole{
	position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: slideShow 16s infinite;
  	transition: opacity 1s ease-in-out; /* FONDU */
    background-size: cover;
    background-position: center;
}
/* Keyframe animations */
@keyframes slideShow {
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}
.diapoPole:nth-child(1) {
  background-image: url('img/pole-1.webp');
  animation-delay: 0s;
  opacity: 1;
}
.diapoPole:nth-child(2) {
  background-image: url('img/pole-2.webp');
  animation-delay: 4s;
}
.diapoPole:nth-child(3) {
  background-image: url('img/pole-3.webp');
 animation-delay: 8s;
}
.diapoPole:nth-child(4) {
  background-image: url('img/pole-4.webp');
  animation-delay: 12s;
}

.txtPole{
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	background-color: rgba(0,0,0,0.4);
	position: absolute;
	float: left;
	top: 50%;
	transform: translateY(-50%);
	padding: 20px;
}
.titrePole{
	font-family: 'Saira';
	font-size: 2.5em;
	color: #ffffff;
	/*font-weight: 900;*/
	text-shadow: 0 5px 10px #000000;
	text-transform: uppercase;
	/*border-bottom: 2px solid #ff0000;*/
	border-bottom: 2px solid #999999;
	display: block;
	position: relative;
	float: left;
	padding: 0 30px;
	clear: both;
}
.infoPole{
	position: relative;
	float: left;
	margin-left: 50px;
	clear: both;
}
ul.listePole{
	font-size: 1.3em;
	color: #ffffff;
	text-shadow: 0 0px 5px #000000;
	list-style-type: none; /* Retirer les puces par défaut */
  	padding-left: 0; /* Enlever le padding par défaut */
}
ul.listePole li{
	position: relative; /* Nécessaire pour positionner la puce personnalisée */
	padding-left: 24px; /* Pour laisser de l'espace pour la puce */
	margin-bottom: 5px;
}
ul.listePole li::before {
  content: ''; /* Nécessaire pour créer un élément */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* Centrer la puce verticalement */
  width: 10px; /* Taille de la puce */
  height: 10px; /* Taille de la puce */
  background-color: #999999; /* Couleur de la puce */
  border-radius: 50%; /* Forme ronde */
}

.bPole{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:10px;
	position: relative;
	float: left;
}
.pucePole{
	width: 25px;
	height: 25px;
	/*border-radius: 50%;*/
	position: relative;
	float: left;
	/*background-color: #999999;*/
}
.pucePole img{ max-width: 100%; height: auto; display: block; }
.barrePole{ 
	width: 0;
	height: 2px;
	background-color: #999999;
	position: absolute;
	float: left;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	transition: all 0.4s;
}
.bPole:hover .barrePole{ width: 100%; }

.nomPole{
	font-size: 1.2em;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 0px 5px #000000;
	position: relative;
	float: left;
}

.zoneEnt{
	width: calc(100% - 60px);
	max-width: 1340px;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 40px;
}
.titreLotEnt{
	width: 100%;
	font-family: 'Saira';
	font-size: 2.5em;
	text-transform: uppercase;
	color: #999999;
	text-align: center;
	border-bottom: 2px solid #999999;
	display: block;
	position: relative;
	float: left;
}

.flexEnt{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items:flex-start;
	gap:40px;
	position: relative;
	float: left;
	margin: 40px 0;
	/*border: 1px solid red;*/
}
.caseEnt{
	width: 300px;
	height: 365px;
	border-radius: 10px;
	background-color: #ffffff;
	position: relative;
	float: left;
	box-shadow: 0 0 14px #999999;
	overflow: hidden;
}
.infoEnt{
	width: 100%;
	height: 100%;
	position: relative;
	float: left;
	z-index: 1;
}
.logoEnt{
	width: 90%;
	text-align: center;
	position: absolute;
	float: left;
	top: calc(50% - 20px);
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
.logoEnt .iMW{ max-width: 100%; height: auto; }
.logoEnt .iMH{ max-height: 200px; width: auto; }
.nomEnt{
	width: 100%;
	text-align: center;
	font-size: 1.2em;
	color: #000000;
	padding: 10px 0;
	background-color: #ffffff;
	position: absolute;
	float: left;
	bottom: 0;
	z-index: 3;
}
.backEnt{
	width: 100%;
	height: 100%;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	opacity: 0.3;
	z-index: 1;
}
.backEnt img{
	object-fit: cover;
	max-width: 100%;
	max-height: 100%;
}
.survolEnt{
	width: 100%;
	height: 0;
	background-color: rgba(0,0,0,0.9);
	position: absolute;
	float: left;
	overflow: hidden;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	transition: all 0.3s;
}
.infoSurvol{
	width: 90%;
	color: #ffffff;
	position: relative;
	float: left;
	margin-top: 10px;
	left: 50%;
	transform: translateX(-50%);
}
.titreSurvol{
	width: 100%;
	text-align: center;
	font-size: 1em;
	text-transform: uppercase;
	position: relative;
	float: left;
}
.decoTitreSurvol{
	width: 100%;
	height: 20px;
	position: relative;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px 0 20px 0;
}
.traitTitre{
	width: calc(50% - 30px);
	height: 1px;
	background-color: #ffffff;
	position: relative;
	float: left;
}
.puceTitre{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #ffffff;
	position: relative;
	float: left;
	margin: 0 10px;
}
.puceTitre.fdRose{ background-color: #af0162; }
.puceTitre.fdBleu{ background-color: #0e72b5; }
.puceTitre.fdRouge{ background-color: #bf1428; }
.puceTitre.fdVert{ background-color: #6ec1a3; }
.puceTitre.fdOrange{ background-color: #ff7800; }
.puceTitre.fdVertLechay{ background-color: #c3cfcc; }
.puceTitre.fdRougeAqui{ background-color: #be1634; }

.detailSurvol{
	width: 100%;
	text-align: center;
	position: relative;
	float: left;
}
.boutSurvol{
	min-width: 200px;
	text-align: center;
	padding: 8px;
	border-radius: 8px;
	position: absolute;
	float: left;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
}
.boutSurvol a{ color: #ffffff; text-decoration: none; }
.boutSurvol.fdRose{ background-color: #af0162; }
.boutSurvol.fdBleu{ background-color: #0e72b5; }
.boutSurvol.fdRouge{ background-color: #bf1428; }
.boutSurvol.fdVert{ background-color: #6ec1a3; }
.boutSurvol.fdOrange{ background-color: #ff7800; }
.boutSurvol.fdVertLechay{ background-color: #c3cfcc; }
.boutSurvol.fdRougeAqui{ background-color: #be1634; }

.caseEnt:hover .survolEnt{ height: 100%; }

.txtFull{
	width: calc(100% - 30px);
	max-height: 1300px;
	text-align: center;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	margin: 20px 0 40px 0;
}
.boutPole{
	font-size: 1.3em;
	color: #ffffff;
	text-decoration: none;
	background-color: #999999;
	border:1px solid #ffffff;
	border-radius: 10px;
	border-radius: 20px;
	box-shadow: 0 0 10px #333333;
	padding: 10px 20px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap:5px;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	clear: both;
	margin: 30px 0 0 0;
}
.boutPole img{ max-width: 25px; height: auto; display: block; }