@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url('typo/Roboto-Light.ttf') format('truetype');
font-weight:100;
font-style: normal;
font-display: swap;
}

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

:root{
	--margin:60px;
}

/* TYPO --------------------------- */
p{ margin: 0; padding: 0; }

h1{
	width: 100%;
	font-size: 1.4em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	padding: 0 0 5px 0;
	position: relative;
	float: left;
}
h1::after{
	content:'';
	width: 100px;
	height: 1px;
	background-color: #ea644c;
	position: absolute;
	float:left;
	bottom: 0;
	left: 0;
}
h1.tmauve::after{ background-color: #a10d59; }
h1.tbleuc::after{ background-color: #00b4d1; }
h1.tbleuf::after{ background-color: #0072af; }
h1.tvertf::after{ background-color: #7bc21c; }
h1.tvert::after{ background-color: #97c022; }
h1.tvertb::after{ background-color: #0c8a2d; }
h1.trose::after{ background-color: #ee87b2; }

h2{
	width: 100%;
	font-size: 1.4em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	padding: 0 0 5px 0;
	position: relative;
	float: left;
}
h2::after{
	content:'';
	width: 100px;
	height: 1px;
	background-color: #ea644c;
	position: absolute;
	float:left;
	bottom: 0;
	left: 0;
}
h2.tmauve::after{ background-color: #a10d59; }
h2.tbleuc::after{ background-color: #00b4d1; }
h2.tjaune::after{ background-color: #fcc129; }
h2.tbleuf::after{ background-color: #0072af; }
h2.tvertf::after{ background-color: #7bc21c; }
h2.tvert::after{ background-color: #97c022; }
h2.tvertb::after{ background-color: #0c8a2d; }
h2.trose::after{ background-color: #ee87b2; }

h3{
	width: 100%;
	font-size: 1.4em;
	font-weight: normal;
	text-align: center;
	text-transform: uppercase;
	margin: 20px 0;
	padding: 0 0 5px 0;
	position: relative;
	float: left;
}

.jaune{ color: #fcc129; }
.orange{ color: #ea644c; }
.bleuc{ color: #00b4d1; }
.bleuf{ color: #0072af; }
.mauve{ color: #a10d59; }
.rose{ color: #ee87b2; }
.vert{ color: #97c022; }
.vertf{ color: #7bc21c; }
.vertb{ color: #0c8a2d; }

.mini{ font-size: 0.8em; }
.grand{ font-size: 1.1em; }
.legend{ font-size: 0.9em; }
.lienSimple{
	text-decoration: none;
	color: inherit;
}

ul.std{
	margin: 0;
	padding: 0 0 0 20px;
}

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

/* BASE -------------------------- */
#Top{
	width: 100%;
	position: relative;
	float: left;
}
.bandeauOld{
	width: 100%;
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:10px;
	background-color: #ffffff;
	position: relative;
	z-index: 2;
}
.bandeauVisuel{
	width: 100%;
	height: 560px;
	background-color: #001f2f;
	background-image: url("img/fond-accueil.jpg");
	position: relative;
	float: left;
}
.logoAccueil{
	height: 100%;
	/*background-color: rgba(255,255,255,0.9);*/
	display: flex;
	align-items: center;
	position: absolute;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 5px;
	z-index: 1;
}
.logoAccueil img{ margin-bottom: 100px; }

.bandeauHPage{
	width: 100%;
	height: 410px;
	position: relative;
	float: left;
}
.bandeauHPage.com{ background-color: rgba(234,100,76,0.1); }
.bandeauHPage.impression{ background-color: rgba(0,180,209,0.1); }
.bandeauHPage.signaletique{ background-color: rgba(0,114,175,0.1); }
.bandeauHPage.vehicule{ background-color: rgba(161,13,89,0.1); }
.bandeauHPage.environnement{ background-color: rgba(123,194,28,0.1); }
.bandeauHPage.objet{ background-color: rgba(238,135,178,0.1); }
.bandeauHPage.textile{ background-color: rgba(151,192,34,0.1); }
.bandeauHPage.divers{ background-color: rgba(12,138,45,0.1); }

.logoHPage{
	width: 350px;
	height: 230px;
	position: absolute;
	float: left;
	left: 50%;
	top: 40px;
	transform: translateX(-50%) translateX(-600px);
}
.logoHPage img{ max-width: 100%; height: auto; }
.infoHPage{
	width: 50%;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap:30px;
	position: relative;
	float: left;
	left: 50%;
	top: 30px;
}
.visuHPage{
	position: relative;
	float: left;
}
.listeHPage{
	font-size: 1.1em;
	font-weight: bold;
	position: relative;
	float: left;
}

.bandeauVague{
	width: 100%;
	height:120px;
	background-image: url("img/vague-bleu.svg");
	background-repeat: repeat-x;
	background-position: bottom;
	position: absolute;
	float: left;
	bottom: 0;
	z-index: 2;
}
.bandeauVague.orange{ background-image: url("img/vague-orange.svg"); }
.bandeauVague.bleuc{ background-image: url("img/vague-bleuc.svg"); }
.bandeauVague.bleuf{ background-image: url("img/vague-bleu.svg"); }
.bandeauVague.mauve{ background-image: url("img/vague-mauve.svg"); }
.bandeauVague.vertf{ background-image: url("img/vague-vertf.svg"); }
.bandeauVague.vert{ background-image: url("img/vague-vert.svg"); }
.bandeauVague.vertb{ background-image: url("img/vague-vertb.svg"); }
.bandeauVague.rose{ background-image: url("img/vague-rose.svg"); }

.menuP{
	width:calc(100% - 30px);
	max-width: 980px;
	height: 110px;
	padding: 10px;
	border-radius: 20px;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	clear: both;
	margin-top: -40px;
	margin-bottom: var(--margin);
}
.caseBoutonP{
	width: 120px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-wrap: wrap;
	gap:0;
	position: relative;
	float: left;
	cursor: pointer;
}
.visuBoutonP{
	width: 75px;
	height: 75px;
	position: relative;
	float: left;
	overflow: hidden;
	transition: 0.3s all;
}
.visuBoutonP img{ max-height: 100%; width: auto; }
.ombreBoutonP{
	width: 75px;
	height: 0;
	position: relative;
	float: left;
	background: radial-gradient(ellipse closest-side, #666666, #ffffff);
	transition: 0.3s all;
}
.nomBoutonP{
	width: 100%;
	font-size: 0.9em;
	text-align: center;
	position: relative;
	float: left;
}
.caseBoutonP:hover .ombreBoutonP{ height: 10px; }
.caseBoutonP:hover .visuBoutonP{ margin-bottom: 5px; }


#Bas{
	width: 100%;
	border-top:2px solid #0072af;
	position: relative;
	float: left;
	margin-top: var(--margin);
	padding-top: 10px;
}
.bandeauCoord{
	width: 100%;
	background-color: #0072af;
	color: #ffffff;
	position: relative;
	float: left;
}
.flexCoord{
	width: calc(100% - 20px);
	max-width: 1580px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
}
.coordG{
	width: 320px;
	position: relative;
	float: left;
	margin: 10px 0;
}
.coordD{
	width: 320px;
	text-align: right;
	position: relative;
	float: left;
	margin: 10px 0;
}
.logoBas{
	width: 350px;
	height: 80px;
	background-color: #ffffff;
	clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	float: left;
}
.logoBas img{ max-width: 280px; height: auto; }
.copyr{
	width: calc(100% - 20px);
	max-width: 1580px;
	font-size: 0.9em;
	color: #999999;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 10px 0;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
}

.zoneBoutonBas{
	width: 190px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	position: relative;
	float: right;
}
.bFinPage{
	display: flex;
	align-items: center;
	position: relative;
	float: left;
	clear: both;
	margin-bottom: 5px;
}
.iconFinPage{
	width: 50px;
	height: 50px;
	position: relative;
	float: left;
	margin-right: 10px;
}
.iconFinPage img{ max-width: 100%; height: auto; }
.txtBFinPage{
	font-weight: bold;
	position: relative;
	float: left;
}

.paraFull{
	width: 100%;
	position: relative;
	float: left;
	margin: var(--margin) 0;
	overflow: hidden;
}
.paraFull.fdGris{
	background-color: #ededed;
	padding: var(--margin) 0;
}
.paraFull.fdMarin{
	background-color: #00202f;
	padding: var(--margin) 0;
	color: #ffffff;
}
.paraFull.fdDevis{
	background-image: url("img/fond-devis.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.para100{
	width: calc(100% - 20px);
	max-width: 1600px;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	margin: var(--margin) 0;
	overflow: hidden;
}
.para100.interne{ margin: 0; }
.gridPara{
	width: 100%;
	display: grid;
    grid-template-columns: repeat(2, 1fr);
	grid-row-gap: 30px;
	position: relative;
	float: left;
}
.caseGridTxt{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	float: left;
}
.caseGridTxt.droite{ justify-content: flex-start; }
.colTxt50{
	width: calc(100% - 60px);
	max-width: 770px;
	padding-left: 30px;
	padding-right: 30px;
	position: relative;
	float: left;
}
.decoparaOrange{
	background-image: url("img/finpara-orange.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	padding-bottom: 70px;
}
.decoparaBleuc{
	background-image: url("img/finpara-bleuc.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	padding-bottom: 70px;
}
.decoparaBleuf{
	background-image: url("img/finpara-bleuf.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	padding-bottom: 70px;
}
.decoparaMauve{
	background-image: url("img/finpara-mauve.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	padding-bottom: 70px;
}
.decoparaVertf{
	background-image: url("img/finpara-vertf.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	padding-bottom: 70px;
}
.decoparaVert{
	background-image: url("img/finpara-vert.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	padding-bottom: 70px;
}
.decoparaVertb{
	background-image: url("img/finpara-vertb.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	padding-bottom: 70px;
}
.decoparaRose{
	background-image: url("img/finpara-rose.png");
	background-repeat: no-repeat;
	background-position: bottom right;
	padding-bottom: 70px;
}

.colDecoLateral{
	width: calc(100% - 30px);
	position: relative;
	float: left;
}
.colDecoLateral.gauche{ margin-right: 30px; }
.colDecoLateral.droit{ margin-left: 30px; }
.colDecoLateral img{
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.caseGridPhoto{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	float: left;
}

.flexColonne{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	float: left;
}

.col100{
	width: 100%;
	position: relative;
	float: left;
}
.col50{
	width: calc(50% - 20px);
	position: relative;
	float: left;
}
.col50.centrer{ margin: 0 10px; }
.col30{
	width: calc(30% - 20px);
	position: relative;
	float: left;
}

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

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

.boutonInterne{
	border-radius: 8px;
	padding: 12px;
	text-align: center;
	position: relative;
	float: left;
}
.boutonInterne.bleuc{
	background-color: #00b4d1;
	color: #ffffff;
}
.boutonInterne.bleuf{
	background-color: #0072af;
	color: #ffffff;
}
.boutonInterne.orange{
	background-color: #ea644c;
	color: #ffffff;
}
.boutonInterne.jaune{
	background-color: #fcc129;
	color: #000000;
}
.boutonInterne.mauve{
	background-color: #a10d59;
	color: #ffffff;
}
.boutonInterne.rose{
	background-color: #ee87b2;
	color: #ffffff;
}
.boutonInterne.vert{
	background-color: #97c022;
	color: #ffffff;
}
.boutonInterne.vertb{
	background-color: #0c8a2d;
	color: #ffffff;
}

.boutonContact{
	width: 200px;
	padding: 10px;
	background-color: #00b4d1;
	color: #ffffff;
	font-weight: normal;
	font-size: 1.2em;
	border-radius: 20px;
	text-align: center;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	margin: var(--margin) 0;
	clear: both;
}
.boutonContact.orange{ background-color: #ea644c; }
.boutonContact.bleuf{ background-color: #0072af; }
.boutonContact.mauve{ background-color: #a10d59; }
.boutonContact.rose{ background-color: #ee87b2; }
.boutonContact.vert{ background-color: #97c022; }
.boutonContact.vertb{ background-color: #0c8a2d; }

.boutonRetour{
	display: flex;
	align-items: center;
	gap:10px;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	clear: both;
	margin-bottom: 30px;
}
.rondCroix{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #00b4d1;
	color: #ffffff;
	font-size: 2em;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	position: relative;
	float: left;
}
.txtBRetour{
	font-size: 0.9em;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	position: relative;
	float: left;
}

/* ACCUEIL ------------------------------- */
.grilleProdAcc{
	width: 100%;
	height: 75vh;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	grid-gap: 10px;
	justify-items: stretch;
	align-items: stretch;
	position: relative;
	float: left;
}
.grilleElem{
	display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
	float: left;
}
.c1{
	grid-column: 1 / 2;
    grid-row: 1 / 5;
	background-color: red;
	position: relative;
	float: left;
}
.c2{
	grid-column: 2 / 3;
    grid-row: 1 / 2;
	background-color: #0072af;
	color: #ffffff;
	text-align: center;
	font-size: 1.1em;
}
.c3{
	grid-column: 2 / 3;
    grid-row: 2 / 4;
	background-color: green;
}
.c4{
	grid-column: 2 / 3;
    grid-row: 4 / 5;
	background-color: #fcc129;
	color: #000000;
	text-align: center;
	font-size: 1.1em;
}
.c5{
	grid-column: 3 / 4;
    grid-row: 1 / 3; 
	background-color: grey;
}
.c6{
	grid-column: 3 / 4; 
    grid-row: 3 / 5;
	background-color: black;
}
.c7{
	grid-column: 4 / 5;
    grid-row: 1 / 3;
	background-color: white;
}
.c8{
	grid-column: 4 / 5; 
    grid-row: 3 / 5;
	background-color: saddlebrown;
}
.cphoto{
	width: 100%;
	height: 100%;
	position: relative;
	float: left;
	z-index: 1;
}
.cphoto img{
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.titreCase{
	min-width: 100px;
	color: #ffffff;
	text-align: center;
	font-weight: normal;
	font-size: 1.2em;
	padding: 5px 10px;
	position: absolute;
	float: left;
	z-index: 2;
}
.titreCase.bleu{
	background-color: #00b4d1;
}
.titreCase.orange{
	background-color: #ea644c;
}
.titreCase.colleG{
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	left: 0;
}
.titreCase.colleD{
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	right: 0;
}
.titreCase.haut{
	top:10%;
}
.titreCase.bas{
	bottom:10%;
}
.tramePhoto{
	width: 100%;
	height: 100%;
	background-color: rgba(0,180,209,0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	float: left;
	top: 0;
	left: 0;
	opacity: 0;
	transition: 0.3s all;
	cursor: pointer;
	z-index: 3;
}
.tramePhoto.orange{ background-color: rgba(234,100,77,0.5); }
.tramePhoto.bleuf{ background-color: rgba(0,114,175,0.5); }
.tramePhoto:hover{
	opacity: 1;
}

/* COMMUNICATION ------------------------------------- */
.flexGalerie{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap:wrap;
	gap:20px;
	position: relative;
	float: left;
}
.caseGalerie{
	width:calc(20% - 20px); 
	aspect-ratio:1/1;
	border: 1px solid #dddddd;
	position: relative;
	float: left;
}
.photoGalerie{
	width: 100%;
	height: 100%;
	position: relative;
	float: left;
	z-index: 1;
}
.photoGalerie img{
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.trameGalerie{
	width: 0;
	height: 0;
	color: #333333;
	text-decoration: none;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	z-index: 2;
	transition: 0.3s all;
}
.trameGalerie.orange{ background-color: rgba(234,100,76,0.5); color: #ea644c; }
.trameGalerie.bleuc{ background-color: rgba(0,180,209,0.5); color: #00b4d1; }
.trameGalerie.bleuf{ background-color: rgba(0,114,175,0.5); color: #0072af; }
.trameGalerie.mauve{ background-color: rgba(161,13,89,0.5); color: #a10d59; }
.trameGalerie.rose{ background-color: rgba(238,135,178,0.5); color: #ee87b2; }
.trameGalerie.vert{ background-color: rgba(151,192,34,0.5); color: #97c022; }
.trameGalerie.vertb{ background-color: rgba(12,138,45,0.5); color: #97c022; }

.caseGalerie:hover .trameGalerie{
	width: 100%;
	height: 100%;
	border-radius: 0;
}


/* IMPRESSION ------------------------------------- */
.flexListe{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap:20px;
	position: relative;
	float: left;
}
.caseListe{
	width:200px; 
	position: relative;
	float: left;
}
.photoListe{
	width: calc(100% - 2px);
	aspect:1/1;
	border: 1px solid #000000;
	position: relative;
	float: left;
	z-index: 1;
}
.photoListe.bleuc{ border:1px solid #00b4d1; }
.photoListe.orange{ border:1px solid #ea644c; }
.photoListe.jaune{ border:1px solid #fcc129; }
.photoListe.vertb{ border:1px solid #0c8a2d; }
.visuPhoto{
	width: 100%;
	height: 100%;
	position: relative;
	float: left;
}
.visuPhoto img{
	width: 100%;
    height: 100%;
	display: block;
    object-fit: cover;
	z-index: 1;
}
.nomListe{
	width: 100%;
	color: #000000;
	text-decoration: none;
	border-bottom: 1px solid #000000;
	padding: 5px 0;
	text-align: center;
	position: relative;
	float: left;
}
.nomListe.bleuc{ border-bottom:1px solid #00b4d1; }
.nomListe.orange{ border-bottom:1px solid #ea644c; }
.nomListe.jaune{ border-bottom:1px solid #fcc129; }
.nomListe.vertb{ border-bottom:1px solid #0c8a2d; }
.trameListe{
	width: 100%;
	height: 100%;
	color: #333333;
	text-decoration: none;
	background-color: rgba(255,255,255,0.9);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	opacity: 0;
	z-index: 2;
	transition: 0.3s all;
}
.trameListe.bleuc{ background-color: rgba(0,180,209,0.5); color: #00b4d1; }
.trameListe.orange{ background-color: rgba(234,100,76,0.5); color: #ea644c; }
.trameListe.jaune{ background-color: rgba(252,193,41,0.5); color: #fcc129; }
.trameListe.vertb{ background-color: rgba(12,138,45,0.5); color:#0c8a2d; }

.caseListe:hover .trameListe{ opacity:1; }
.caseListe:hover .nomListe.bleuc{ color:#00b4d1; }
.caseListe:hover .nomListe.orange{ color:#ea644c; }
.caseListe:hover .nomListe.jaune{ color:#fcc129; }

.txtmulticolonne{
	width: 100%;
	column-count: 4;
	position: relative;
	float: left;
}

/* CONTACT ----------------------------------- */
.blocAdresse{
	width: calc(100% - 22px);
	border-left: 2px solid #ea644c;
	position: relative;
	float: left;
	padding: 0 10px;
	margin-bottom: 20px;
}
.ligneAdresse{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	float: left;
	margin:5px 0;
}
.iconeAdresse{
	width: 38px;
	height: 38px;
	/*background-color: #00b4d1;*/
	border-radius: 50%;
	border: 1px solid #ea644c;
	position: relative;
	float: left;
}
.iconeAdresse img{
	position: absolute;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.infoAdresse{
	width: calc(100% - 50px);
	margin-left: 10px;
	position: relative;
	float: left;
}

.paraForm{
	width: 90%;
	max-width: 780px;
	background-color: #ea644c;
	position: relative;
	float: left;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 10px;
}

.chp100{
	width:calc(100% - 50px);
	margin: 5px 15px;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #dddddd;
	background-color: #ffffff;
	color: #000000;
	font-family: 'Roboto';
	font-size: 1em; 
	text-align: center;
	position: relative;
	float: left;
}
.chp100 option{ 
	color: #000000;
	background-color: #ffffff; 
}
.formLigne{
	width: calc(100% - 30px);
	position: relative;
	float: left;
	margin: 0 15px 15px 15px;
}
.chpMini{
	width:80px;
	margin: 15px;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #dddddd;
	color: #000000;
	font-family: 'Roboto';
	font-size: 1em; 
}
.area100{
	width:calc(100% - 40px);
	height: 180px;
	margin: 15px;
	padding: 5px;
	border-radius: 8px;
	border: 1px solid #dddddd;
	color: #000000;
	font-family: 'Roboto';
	font-size: 1em; 
	position: relative;
	float: left;
}

.envform{
	text-align: center;
	font-size: 1em;
	font-weight: normal;
	border: 1px solid #dddddd;
	border-radius: 8px;	
	background-color: #ffffff;
	color: #ea644c;;
	text-decoration: none;
	padding: 10px 20px;
	position: relative;
	float: left;
	clear: both;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
	margin-bottom: 20px;
}

.titreForm{
	width: calc(100% - 30px);
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	float: left;
	margin: 20px 15px 5px 15px;
}
.puceTitreForm{
	width: 20px;
	height: 20px;
	background-color: #ffffff;
	border-radius: 50%;
	position: relative;
	float: left;
	margin-right: 10px;
}
.demiForm{
	width: calc(50% - 30px);
	position: relative;
	float: left;
	padding: 0 15px;
}
.lignedemi{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	position: relative;
	float: left;
}

.message{
width:350px;
max-width: 90%;
background-color:#ffffff;
border:1px solid #ea644c;
border-radius:8px;
font-size:1em;
color: #000000;
text-align:center;
height:auto;
padding:4px;
box-shadow: 0 0 5px #666666;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
z-index:11;
overflow:auto;
}
.closeF{
width:100px;
background-color:#ea644c;
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;
}

/* TARIFS ---------------------------------- */

.caseInfoTarif{
	width: 150px;
	height: 150px;
	border: 1px solid #666666;
	position: relative;
	float: left;
}
.caseInfoTarif p{
	width: 100%;
	text-align: center;
	position: absolute;
	float: left;
	top: 50%;
	transform: translateY(-50%);
}
.caseInfoTarif.actif{
	background-color: rgba(0,180,209,0.5);
}
.zoneTableau{
	width: 100%;
	position: relative;
	float: left;
	margin-top: 30px;
}
.tabTar{
	width: 100%;
	max-width: 600px;
	border-spacing: 0;
	border: 0;
}
.enteteTab{
	background-color:#00b4d1;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid #999999;
}
.tdCentre{
	text-align: center;
	border: 1px solid #999999;
}
.tdBas{
	text-align: center;
	font-size: 0.9em;
	border-bottom: 1px solid #999999;
}