@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

:root{

	--color1:#083996;
	--color11:rgb(8 57 150 / 50%);
	--color12:rgb(8 57 150 / 30%);
	--color13:rgb(8 57 150 / 10%);
	--color2:#44d0ff;
	--color21:rgb(68 208 255 / 50%);
	--color3:#b84480;
	--color31:rgb(184 68 128 / 50%);
	--noir:#000;
	--grisc:#CCC;
	--gris:#777;
	--blanc:#FFF;
	--radius:10px;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} /*-end normalize-*/

* {
    border: 0px solid red;
}
body {font-family:"Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif; }

html{scroll-behavior:smooth;}
body{font-size:16px; line-height:1.5em;background:var(--blanc);color:#222;}
body{
	background-image:linear-gradient(120deg,#F9F9F9,var(--blanc),var(--blanc),#FBFBFB,#F9F9F9);
	background-image:linear-gradient(220deg,var(--color11),var(--color12),var(--color13),var(--blanc),var(--blanc),var(--blanc),var(--color13),var(--color12),var(--color11));
	background-repeat:no-repeat;
}

h1,h2,h3,h4{line-height:1.5em;}
h2,h3,h4{color:var(--color1);}
h1 {font-size:1.6em;margin:0.2em;font-weight:normal;}
h1 .small{color:var(--color2);font-weight:light;}
h2 {font-size:1.4em;position:relative;padding-bottom:0.3em;}
h3 {font-size:1.2em;}
h3.gris {font-size:1.4em; text-align:center; font-weight:bold;color:var(--grisc);}
h4 {font-size:1em;}

.bg1{background:var(--color1);}
.bg2{background:var(--color2);}
/*
h1{background:#f5f5f4;color:#222;}
*/
.bg-light{background: var(--color3);}
.radius{border-radius:var(--radius);}
strong{font-weight:bold;}
.italic{font-style:italic;}
/* 
a,a:link, a:visited{text-decoration:none;color:#e00a1d;color:var(--color1);}
*/
a{text-decoration:none;color:#e00a1d;color:var(--color2);}
.content a:not(.btn, .card){text-decoration:underline;}
ul{}
ol{}
ul li, ol li{margin : 0.6em;}
ol li::marker{font-weight:bold;}
ul.listeok li{
	background: url(../img/ok.svg) no-repeat 5px 3px;
	background-size: 20px;
    list-style-type: none;
    margin: 1.2em 0.6em;
    padding-left: 30px;
}

li{line-height:1.6em;}
p{ font-size:1em; line-height:1.6em;}
blockquote{color:#666;border-left:3px solid #FBFBFB;padding-left:1em;}
.center{text-align:center;}
.center-all{display:flex;justify-content:center;align-items:center;}
.center-v-all{display:flex;align-items:center;}
.left{text-align:left;}
.right{text-align:right;}
.justify{text-align:justify;}

.black{color:var(--noir);}
.white{color:var(--blanc);}
.red{color:red;}
.container{max-width:1200px;margin:0 auto; padding:1em;}
.container.bordure{margin:1em auto; padding:2em; border:1px solid #999;}

/* ----- */
.hide{display:none;}
.content {position:relative;}
.padd{padding:0.5em 0.5em 1em 0.5em;}
.padd-no-top{padding:0 0.5em 1em 0.5em;}
.padd-no-bottom{padding:0.6em 0.5em 0 0.5em;}
.marg-top{margin-top:2em;}

.btn{
	padding:0.4em; 
	color:var(--blanc); 
	background-color:var(--noir);
	display:inline-block;
	margin:0.3em;
	border-radius:0.3em;
	font-size:1.15em;
}
.btn-primary{background-color:var(--color1);color:var(--color2);}
.btn-primary:hover,
.btn-primary:active{background-color:var(--color2);color:var(--color1);}
.btn-secondary{background-color:var(--color2);color:var(--color1);}
.btn-secondary:hover,
.btn-secondary:active{background-color:var(--color1);color:var(--color2);}

.img{max-width:100%;height:auto;vertical-align:middle;}
.img-resp{width:100%;}

.titre {background:rgba(0,0,0,0.3);}
.titre-ss-img {background:rgba(0,0,0,0);}
.maxheight{max-height:480px;overflow:hidden;}
.pointer {cursor:pointer;}
.shadow {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

/*table*/
table{
	border-collapse:collapse; border-spacing: 0px;margin:auto;
	overflow-x:auto;
}
caption {caption-side: bottom; font-size:0.8em; color:#999;}
tr{}
th{background:#EEE;}
th,td{padding:0.5em;border:1px solid #CCC;margin:0;}
th{font-weight:bold;}


.center{text-align:center;}
header#header{
	
}

#typed{min-height:200px;}
#contenu{padding-bottom:80px;}
#contenu{background-image:linear-gradient(140deg,var(--color12),var(--color13),var(--blanc),var(--blanc),var(--blanc),var(--color13),var(--color12));}


/* logo et nav */

.top{
	position:absolute;
	position:relative;
	width:100%;
	z-index:10;z-index:1;padding:0;text-align:center;
}
.top{display:flex; flex-direction:center;flex-wrap:wrap; justify-content: center; align-content:center;}
.top >*{flex-grow:1;margin:0em;}

/*--logo--*/
.logo-container{
	margin:1em;
	position:relative;
}
img.img.logo {max-width:140px;}

a.logo-link{color:var(--color1);}
div.logo-text-container{font-weight:bold;}
div.logo-text-container .logo-text{font-size:1.2em;}
div.logo-text-container .logo-text-slogan{font-size:0.9em;}

.tel-container{
	position:relative;
	margin:0;
	font-size:1.2em;
}
.btn svg{vertical-align:bottom;}
.tel-container a{color:var(--blanc);background:var(--color1);}
#header .reseaux {background:var(--color2);}
#header .reseaux svg *{}
footer svg *{}


.noir{background:var(--noir);}

nav ul{list-style:none; margin:0; padding-left:0;}	
nav ul a,
nav ul a:link,
nav ul a:visited{color:rgba(255,255,255,0.9);}
.menu-symbole {
	/* position:absolute; top:1em; right:1em; z-index:10; */
	margin-left:0.7em;	
}
.menu-open {opacity:1; }
.menu-close{ position:absolute; top:1.5em; right:1.5em; z-index:10;}
.menu-symbole svg {width:40px;height:40px; }
.menu-symbole svg *{ fill:#FFF;fill:var(--color1);}
#sidebar{height:0%;}
#sidebar.visible{height:100%;}
#sidebar {text-align:center;}
#sidebar svg {max-width:40px;}
#sidebar svg *{ fill:var(--color2);}
#sidebar .menu-symbole svg *{ fill:#FFF;fill:var(--color2);}
#sidebar svg:hover *,#sidebar svg:active ,#sidebar svg:focus *{fill:#FFF;}

@media screen and (max-width: 79999px) {
	#sidebar{
		z-index:100;position:fixed; 
		background:var(--color1);
		overflow-x: hidden; 
		transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay */
	}
	#sidebar{ top:0; left:auto; right:0; width: 50%; }
	#sidebar{ top:0; left:0; height: 0; width: 100%; }
	#sidebar .in {position:relative;max-width:1000px;margin:30px auto;}

	#sidebar ul{ padding:0;text-align:center;margin-top:5%;}
	#sidebar li a{line-height:2em; font-size:1.5em; color:var(--blanc); text-decoration:none;}

}
#sidebar li a:hover, #sidebar li a:active{color:var(--color2);}

@media screen and (min-width: 8000px) {
	.menu-symbole{display:none;}
	#sidebar,
	#sidebar ul,
	#sidebar ul li {display:inline-block;}
	#sidebar ul li a {display:inline-block;margin-left:0.4em;padding:0.4em;border:0px solid #EEE;}

}

@keyframes slidein {
  from {
    top: -100%;
  }
  to {
    top: 0%;
  }
}

/*progress-bar scroll */
.progress-container {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.1);
  position:absolute;
  bottom:0;
  position:fixed;
  top:0;
}
.progress-bar {
  height: 6px;
  background: var(--color1);
  width: 0%;
}



/* background image entete */
.background-image-container{
    position: relative;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
	color:var(--blanc);
	min-height:350px;
	/*
	clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 110%, 0% 90%);
	*/

}
#accueil .background-image-container{	min-height:380px; }
.over-img {
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background-image:linear-gradient(180deg,rgb(0 0 0 / 60%),rgb(0 0 0 / 50%),rgb(0 0 0 / 20%));
}
.over-img .in{
	border:1px solid var(--color2);
	border:double;
	border-color:var(--color21);
	padding: 30px 50px;
	margin:1em;
}
.center{text-align:center;}

/* contenu */


.small{font-size:0.9em;}

.contact svg *{stroke:var(--color1) !important;}
.contact .svg-fill svg *{fill:var(--color1) !important;}

/*--footer--*/
footer{
	min-height: 200px;
    padding: 1em;
    padding-top: 2em;
    background: #164755;
	background:var(--color1);
	color:var(--blanc);
    color: #FFF;
}
footer h4.font-dot {font-size:2rem;font-weight:bold;}
footer a,footer a:link,footer a:visited{color:var(--blanc);}
footer a:hover,footer a:active{color:var(--color2);}

footer a.btn-secondary{background-color:var(--color2);color:var(--color1);}
footer a.btn-secondary:hover,
footer a.btn-secondary:active{background-color:var(--blanc); color:var(--color2);}


#logo-footer {font-weight:bold;}
#logo-footer .logo-text{font-size:1.2em;}
#logo-footer .logo-text-slogan{font-size:0.9em;}
#logo-footer {}
footer svg *{fill:var(--blanc);}
footer svg:hover *,footer svg:active ,footer svg:focus *{fill:var(--color2);}



/* ----- Formations ----- */
.formation-alternance{}
.item-formation{}
.item-formation a.card{
	background:var(--color1);color:#FFF;
	background: var(--color1);
    color: #FFF ;
    border: 0px solid blue;
    display: block;
	padding:0.7em;
	margin:0.7em;
	border-top-left-radius:var(--radius);
}
.item-formation a.card h3{
    color: #FFF ;
}
.item-formation a.card:hover,
.item-formation a.card:active,
.item-formation a.card:focus{
	background: var(--color2);
}

/* ----- Menu pages ----- */
.menu-pages {}
.menu-pages .item-page{display:block; border:0px solid var(--color2);position:relative;}
.menu-pages .item-page a{}
.menu-pages .conteneur-txt,.menu-pages .conteneur-img{width:100%; height:250px; }
.menu-pages .conteneur-txt{
	position:absolute;
	top:0;bottom:0;left:0;right:0;
	display:flex; 
	justify-content: center;
    align-items: center;
	background: rgb(0, 0, 0, 0.6);
    color: #FFF;
    font-size: 1.2em;
    text-align: center;
}
.menu-pages .conteneur-img img{	object-fit:contain;
	object-fit:cover;
	object-position: center center;
	width:100%;
	height:100%;
}
.menu-pages .item-page a:hover .conteneur-txt, 
.menu-pages .item-page a:focus .conteneur-txt, 
.menu-pages .item-page a:active .conteneur-txt{
	background: rgb(0, 0, 0, 0.4);
}

.logos-partenaires{flex-wrap:wrap;}
.logos-partenaires img{margin:0.5em;max-width:33%;}


/* ----- Contact form  ----- */

form, .contact-form-msg{background:var(--color1);color:var(--blanc);}
form {
	max-width:800px;
	margin:auto;
	background:var(--color1);
	color:var(--blanc);
}
form label,
form input, 
form textarea,
form .checks,
form .radios{
	display:block; 
	min-height:1.5em;
	margin:auto;
	width:80%;
}
form label, 
form .checks .label,
form .radios .label {
	margin-top:1.5em;
	color:var(--blanc);
	text-align:center;
}
form input, form textarea {
	padding:0.8rem;
	margin-bottom:0.5rem;
	background:rgba(255,255,255,0.8);
}
form input[type=submit]{
	width:auto;
	margin-top:1em;
	padding:1rem;
	color:var(--blanc);
	border-radius:0.3em;
	background:var(--color2);
}
form input[type=submit]:hover, form input[type=submit]:active{
	color:var(--blanc);
}
form .checks div label,
form .radios div label{
	width:auto;	
	display:inline-block; 
	margin-top:0.5em;
	vertical-align:text-bottom;
}
form .checks div input,
form .radios div input{
	display:inline-block;
	width:30px;
}
form .form-action{
	text-align:center;
}
form .email{
	display:none;
}
form .error{
	color:red;
	background:rgba(255,255,255,0.5);
}



/* ----- flex & media q ----- */
.flex-container{display:flex;flex-wrap:wrap; justify-content: center; align-content:center;flex-direction: row;}
@media screen and (max-width: 779px) {
	.no-mob{display:none !important;}
	.flex-container-25 > div{max-width:46%;margin:2%;}
	.flex-container-33 > div{max-width:48%;margin:1%;}
}
@media screen and (max-width: 600px) {
	.flex-container-33 > div{max-width:98%;width:96%;margin:1em 2%;}
}
@media screen and (min-width: 780px) {
	.mob{display:none;}
	a.btn{padding:0.8em 1.3em;}
	/*
	.logo{max-width:200px;}
	h1 {font-size:3em;}
	*/
	
	.flex-container > div{flex-grow:1;margin:1%;padding:0;max-width:23%}
	.flex-container > div{flex-grow:1;margin:1%;padding:0;max-width:30%}
	.flex-container-33 > div{flex-grow:1;margin:1%;padding:0;max-width:30%}
	.flex-container-50 > div{max-width:48%;}
	.flex-container-25 > div{max-width:21%;margin:2%;}
	.padd{padding:1em 1em 2em 1em;}
	.padd-no-top{padding:0 1em 2em 1em;}
	.padd-no-bottom{padding:1em 1em 0 1em;}
}

/* avis */
section#avis{}
.avis-liste{
	background:var(--color2);
	border-bottom-right-radius:8px;
	box-shadow: 5px 5px 0px 0px rgba(141, 147, 195, 1);
	box-shadow: 4px 4px 0px 0px rgba(227, 120, 146, 1);
}
.avis{
	/*
	border-top:1px solid var(--color1);
	border-left:1px solid var(--color1);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	*/
	border-radius:1em;
	margin:0.5em auto;
	padding:1em;
}
.avis .auteur{color:var(--color3);}
.avis .msg{font-style:italic;}
.avis svg {float:right;margin:0 0 15px 15px;}
.avis svg *{fill:var(--color3);}

/* ----- Accueil - cards ----- */

.card-modele {
	display:grid;
	color:var(--gris);
	/*
	border:1px solid #EEE;
	box-shadow: -2px -2px 4px 0 rgba(0, 0, 0, 0.1);
	max-width: 90%;
	*/
	margin: auto;margin-top:1em;
	text-align: left;
}
.content-equipe{
	display:grid;
}
.content-equipe .entite{
	background:#FCFCFC;
	background:var(--color1);
	color:var(--blanc);
	padding:1em;
	border-top-left-radius:30px;
}
.modele-image {
	opacity:1;
	width:100%;
	height: auto;
	margin:auto;
	overflow:hidden;
	max-width:300px;
}
.modele-image img{
	padding:0;margin:0;
}
.modele-titre{margin-top:0.2em;}
.modele-resume{font-size:0.9em;}
.modele-tarif{font-size:0.9em;}
.modele-liens{display:flex; font-size:0.9em;margin-top:1em;}
.modele-liens a { display:flex; margin-right: 1em;}
.modele-liens a svg{margin-right:0.3em; opacity:0.5;}

@media screen and (min-width: 780px) {
	.card-modele {
		grid-template-columns: 330px auto;
	}
	.content-equipe {
		grid-template-columns: 330px auto;
	}
	.content-equipe .entite{
		margin-right:1em;
	}

}

.cards-liens {
	display:flex;
	flex-wrap:wrap; justify-content: center; align-content:center;flex-direction: row;
}
@media screen and (min-width: 780px) {
	.cards-liens {
		grid-template-columns: 1fr 1fr;
	}
}

.cards-liens .card {width:300px;padding:1em;}
.cards-liens .card a {color:var(--gris);}
.cards-liens .card h3,
.cards-liens .card p {
	text-align:center;
	
	margin:0.2em auto;
}
.cards-liens .card .image {
    border-radius: 50%;
    width: 100%;
    background-size: cover;
    width: 100%;
    width: 200px;
    height: 200px;
    margin: auto;
}
a.card-ref {
	display:block;
	color:var(--gris);
	border:1px solid #EEE;
  /*
	box-shadow: -2px -2px 4px 0 rgba(0, 0, 0, 0.1);
  */

	max-width: 90%;
	margin: auto;margin-top:1.5em;
	text-align: left;
}
.ref-image {
	opacity:1;
	width:100%;
	height: auto;
	margin:auto;
	overflow:hidden;
}
.ref-image img{
	padding:0;margin:0;
}
.ref-resume{font-size:0.85em;}



.card:hover {background:#fbfbfb;}
.card:hover .ref-image{
	opacity:0.9;
}
	

/*------- faq --------*/
.faq-item{}
.faq-q{font-weight:bold;}
.faq-r{margin-top:0.5em;text-align:justify;}

/*------- modeles --------*/
.infos-tarifs{background:#FCFCFC;padding:1.5em;}

/*------- entrepr --------*/
.partenaires a{
	text-decoration:normal;
	color:var(--color1);
}


/*------- services --------*/
.liste-services{
	/*
	display:flex;
	*/
	display:grid;
	grid-template-columns:40px auto;
}

.listetitre {
	border:0px solid #000;
	background:var(--color1);
 	text-align:center;
	transform: rotate(-180deg);
    writing-mode: vertical-lr;
   
}
.listetitre div{
	padding:5px;
}

/*------- fil inst --------*/

.fd-gris{background:#FCFCFC;padding-top:1.5em;padding-bottom:1.5em;}
.fd-gris{
	border-radius: 50px;
    margin-top: 30px ;
}
div.embed-img-inst{
	position:relative;
	display: inline-flex;
	width: 250px;
	height: 250px;
	overflow: hidden;
	justify-content: center;
	/* background: #eee; 
	*/
	margin: 0.5em;
	padding: 0.5em;
	border: 1px solid #EEE;
	border: 1px solid var(--color3);
	border: 1px solid var(--color2);
	max-width:250px !important;
}
div.embed-img-inst.lien{background:var(--color2);align-items:center;text-align:center;color:var(--color1);}
div.embed-img-inst.lien a{color:var(--color1);}
div.embed-img-inst.lien a.full{color:var(--color1);}

div.embed-img-inst.lien svg *{fill:var(--color1);}
div.embed-img-inst.lien svg:hover *{fill:var(--color3);}

div.embed-img-inst img{
	object-fit:contain;
	object-fit:cover;
	object-position: center center;
	width:100%;
	height:100%;
}
a.lien-insta{
	position:absolute;
	bottom:16px;
	right:16px;
}
a.lien-insta svg *{
	fill:#999;
	fill:var(--color2);
}
a.lien-insta:hover svg *{
	fill:#666;
	fill:var(--color1);
}