@import url('https://fonts.googleapis.com/css?family=Lato:300,400');
/*	font-family: 'Lato', sans-serif; */
/*	font-family: 'Segoe UI'; */

:root{/* z-index:var(--zindex-modal); */
	--zindex-modal:#9000;
	--zindex-overlay: 8000;
	--zindex-dropdown: 7000;
	--zindex-header: 6000;
	--zindex-footer: 5000;
}

/**************************
	CLASSES
**************************/

/* déco  */
hr {background-color: #fff;border-top: 2px dotted #8c8b8b;}
.line {clear: both;border-bottom:1px dotted #222222;padding:10px 0 0;margin:0 0 20px}
.bordure{border:0.1em solid #7b7b7b;}
.no-border{border: 0px;}
.blur{backdrop-filter: blur(7px);}
.jaune{color:#E6AF23;}
p{margin-bottom:1.0rem;}
.big, .big>p{font-size:2.0rem;}
.bigger{font-size:2.2rem;}
.biggest{font-size:2.4rem;}
hr.style20-bis {width:90%;padding: 0;border: none;border-top: medium double #EBEEF2;border-top: medium double #EBEEF2;color: #EBEEF2;text-align: center;overflow: visible; /* For IE */margin:auto ;}
hr.style20-bis:after {content:"❧";display: inline-block;position: relative;top:-0.8em;font-size: 3.2rem;padding: 0 0.25em;background: #13120E}
strong,.strong{font-weight:bold;}
.sticky {position: fixed;top: 0; }
/*tous les éléments après le H2 aurons un padding-top:
h2 ~ * { padding-top:1.5em; }*/
#containers * {border: 1px solid black;}/*cible tous les éléments enfants de la div #containers*/

.portfolio-bord img{float:left;margin-right:30px;padding-right:20px;border-right:1px solid #D5D1B7;}

a.link {color:orange;text-decoration:none;}
a.link:hover{color:orange;text-decoration:none;}
a.link:visited{text-decoration:none;color:orange;}/*E49203*/
/*a.link:focus {outline:thick double #32a1ce;}*/

a[href$=".pdf"]{padding-right:25px;background:url(../elements/adobe_acrobat.png) no-repeat right center transparent;color:#d90000;}
a:hover[href$=".pdf"]{color:#d90000;text-decoration: underline;}
a[target="_blank"]:after { content: url(../elements/external_brown.svg);padding-left: 4px;width:50px;}
/*a[target="_blank"]:after { content: "➚";padding-left: 4px;width:50px;}*/
/* a[class~="ext"]:after { content: url(../elements/external_brown.png);padding-left: 4px;width:50px;}~ cible un attribut qui a une liste de valeurs séparées par un espace*/

.container-img {width:100%;text-align:center; }
.container-img img {margin:10px auto;}

/*==============================
	STYLES GENERAUX
==============================*/
html {}
body {font-size: 1.6rem;color:#4f4f4f;scroll-behavior: smooth;  min-height: 100vh;
	background-color: #F4F4F4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%230f706c' fill-opacity='0.15' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
/*.fond-accueil{width:100%;max-width:1920px;height:44vw;margin:auto;
	background: url(../img/accueil/accueil-kit-vide.jpg) no-repeat center center;background-size: cover; }*/
header { width: 100%;background-color: #32628A;  z-index: 999999 !important; /*Z-index à adapter au besoin  -  background: url(../img/accueil/bandeau-menu.jpg) no-repeat center center;background-size: cover;*/ }
main { }
footer {padding:4rem 0 4rem 0;line-height:1.5;background-color: #fff;border-top: 0.8rem solid #7198a5;}
section{margin-bottom:60px;}
.main-size{width:100%;max-width:1400px;margin:auto;}

.wrap {width:100%;max-width:1400px;margin:auto;padding:40px 0;line-height:1.5;background-color: #f4f4f4;}
.plain-colonne{width:100%;max-width:900px;margin:auto;padding:20px;}


h1, h2, h3, h4, h5, h6 {font-family: Georgia, serif;color:#4f4f4f;margin-top: 0; margin-bottom: 2rem; line-height:1.5;text-wrap: balance;}
.h1-title{ font-size: 4.2rem;font-weight:400; text-align:center;}
.h2-like{font-size: 2.6rem;margin-top:3.2rem;}
.h3-like { font-size: 2.4rem;vertical-align:middle;padding:10px;background: url(../img/accueil/bandeau-menu.jpg) no-repeat center center;background-size: cover;  }
.h4-like { font-size: 2.2rem; }
.h5-like { font-size: 2.0rem; }
header nav ul li a {font-family: 'Alice', serif; font-size:2.2rem;}

p {margin-bottom: 2rem;}

table > p{}

/*vidéos*/
.video{width:70%;margin:20px auto;
  	box-shadow:0 1px 1px hsl(0deg 0% 0% / 0.075),
	0 2px 2px hsl(0deg 0% 0% / 0.075),
	0 4px 4px hsl(0deg 0% 0% / 0.075),
	0 8px 8px hsl(0deg 0% 0% / 0.075),
	0 16px 16px hsl(0deg 0% 0% / 0.075);}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*================================
	PAGE CONTACT		
=================================*/
fieldset{width:80%;min-height:120px;border:0px solid #E3E3E3;margin:5px ;padding:20px;background-color:#f4f4f4;
	-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
label {display:block;width:75%;line-height:1.4;text-align:left;margin-left:10px;}
::placeholder{color:#999999;}
::placeholder:focus{color:#fff;}
input,textarea{display:block;text-decoration: none;background-color:#fdfdff;padding:0 10px;border:none;border-left:2px solid #99b3ff;margin:0 0 10px 0;}
input[type="text"],input[type="email"],.erreur{width:50%;height:30px;}
textarea:hover, textarea:focus,
input[type="text"]:hover,input[type="email"]:hover,
input[type="text"]:focus, input[type="email"]:focus
	{background-color:#ffffff;border-left:3px solid #0F85BF;outline:none;}
textarea{width:80%;}
.ccab {display: none}/*classe du champ caché anti-spam*/
.h-title{text-align:center;font-size:1.0em;width:100%;padding:10px 0;margin-top:100px;border-left:10px solid #18181A;border-right:10px solid #18181A;}
input[type=submit]{display:block;cursor: pointer;text-align: center;margin:10px 0 0 200px;padding: .4em 1.8em;
	border-radius: 5px;box-shadow: 0 1px 2px rgba(0,0,0,.2);font-size: 1.2em;margin-top: 5px;color: #fef4e9;border: solid 1px #242415;			
	background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
	background-blend-mode: multiply,multiply;}
input[type=submit]:hover{}

.label_captcha{width:80px;font-size:16px;margin:0 0 0 10px;}
.erreur{color:red;font-size:16px;font-weight:400;padding:2px 5px;background-color: #FAB9AD;}
.erreur-bordure{caret-color: red;border: 1px solid red;border-left:2px solid red !important;}
.captcha{font-weight:bold;}
.remarque{display: none!important;}/*classe du champ caché anti-spam*/

/* Bouton envoyer */
.skew-forward {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew-forward:hover, .skew-forward:focus, .skew-forward:active {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
}

/************************************************************************************
	LIGHTBOX PERSO  background-color: rgba(240, 238, 231, 0.9);
*************************************************************************************/
.petite{width:250px;height:auto;cursor: pointer}
.grande {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: #F0EEE7;display: none;align-items: center;justify-content: center;z-index: 999999 !important;}
.grande img {/*width: 60%;*/width: auto;max-width:60%;border: 4px white solid;border-radius: 5px;}
.lightbox-close {cursor: pointer;display: block;color: #111111;text-decoration: none;font-size:45px;position: absolute;top: 10px;right:40px;margin: 0;padding: 3px 0 0 2px;}	
@media (max-width: 640px) {
	.grande img {max-width:85%;}
	.lightbox-close {font-size:35px;}	
}	

/*=======================
	CAROUSSEL
 =======================*/
#container-carousel{ width:100%;max-width:1920px;margin:auto; }	
.css-carousel {position: relative;  height: 23vw; overflow: hidden;margin:0px auto;background-color:#373335;}
.css-carousel .css-img {max-width: 100%;position: absolute;left: 0;right: 0;opacity: 0;
	/* Pour rajouter des photos, rajouter 5 secondes par photo supplémentaire à -webkit-animation: */
	/* ici il y a 6 photos donc 6x 5 secondes = 30 secondes */
	-webkit-animation: css-carousel-fade 30s linear infinite;
	-moz-animation: css-carousel-fade 30s linear infinite;
	-ms-animation: css-carousel-fade 30s linear infinite;
	animation: css-carousel-fade 30s linear infinite;
	}
/* Pour rajouter des photos, rajouter 5 secondes par photo supplémentaire à -webkit-animation: */
.css-carousel .css-img:nth-child(2) {-webkit-animation-delay: 5s;-moz-animation-delay: 5s;-ms-animation-delay: 5s;animation-delay: 5s;}
.css-carousel .css-img:nth-child(3) {-webkit-animation-delay: 10s;-moz-animation-delay: 10s;-ms-animation-delay: 10s;animation-delay: 10s;}
.css-carousel .css-img:nth-child(4) {-webkit-animation-delay: 15s;-moz-animation-delay: 15s;-ms-animation-delay: 15s;animation-delay: 15s;}
.css-carousel .css-img:nth-child(5) {-webkit-animation-delay: 20s;-moz-animation-delay: 20s;-ms-animation-delay: 20s;animation-delay: 20s;}
.css-carousel .css-img:nth-child(6) {-webkit-animation-delay: 25s;-moz-animation-delay: 25s;-ms-animation-delay: 25s;animation-delay: 25s;}
/*.css-carousel .css-img:nth-child(7) {-webkit-animation-delay: 30s;-moz-animation-delay: 30s;-ms-animation-delay: 30s;animation-delay: 30s;}*/
/*.css-carousel .css-img:nth-child(8) {-webkit-animation-delay: 35s;-moz-animation-delay: 35s;-ms-animation-delay: 35s;animation-delay: 35s;}*/
/*.css-carousel .css-img:nth-child(9) {-webkit-animation-delay: 40s;-moz-animation-delay: 40s;-ms-animation-delay: 40s;animation-delay: 40s;}*/
@-webkit-keyframes css-carousel-fade{
	0%, 20%, 100% { opacity: 0; }
	5%, 15% { opacity: 1;}
}
@-moz-keyframes css-carousel-fade {
	0%, 20%, 100% { opacity: 0; }
	5%, 15% { opacity: 1;}
}
@-ms-keyframes css-carousel-fade {
	0%, 20%, 100% { opacity: 0; }
	5%, 15% { opacity: 1;}
}
@keyframes css-carousel-fade {
	0%, 20%, 100% { opacity: 0; }
	5%, 15% { opacity: 1;}
}

/************************************************************************************
	MEDIA QUERIES
*************************************************************************************/
@media only screen and (max-width: 960px) {/*Styles en-dessous de 960 px */
	section{margin-bottom:10px;}
	.wrap {padding:4px 0;}
	#container-carousel{margin-top:65px; }
}
@media only screen and (max-width: 768px) {/*Styles en-dessous de 768 px */
	.flex-contain{flex-flow:column wrap;padding:5px;}	
  .flex-item:nth-child(1) {order:2;}
  .flex-item:nth-child(2) {order:1;}
  .flex-item:nth-child(3) {order:3;}	
	.h1-title{ font-size: 3.2rem;}	
	.portfolio{width:100%;margin:2rem auto 2rem auto;}	
	.portfolio img{float:none;margin:0 auto;display:block;padding-bottom:0px;}
}