@font-face { font-family:"FocoRegular"; src: url("/fonts/Foco-Regular.ttf"); }
@font-face { font-family:"FocoBold"; src: url("/fonts/Foco-Bold.ttf"); }
@font-face { font-family:"FocoBlack"; src: url("/fonts/FocoBlack-Regular.ttf"); }


* { font-family: "FocoRegular";  font-size:18px; }
input, textarea {  font-size:0.9em;  color:#ffffff; } 
html, body { background-color:#100c08; font-family: "FocoRegular"; margin:0; color:#ffffff; }
a { color:#ffffff; text-decoration:none; }
a:hover { color:#1d3a8f }

h1 { font-size:3em; margin-top : 10px; margin-bottom : 10px; color:#1d3a8f; font-family: "FocoBold"; }
h2 { font-size:1.7em; font-weight: normal; margin-left : 0px;  margin-top : 5px; margin-bottom : 5px;  color:#f07d00; font-family: "FocoBold"; }
h3 { font-size:1.4em; font-weight: normal; margin-left : 40px; margin-top : 5px; margin-bottom : 5px;  color:#808080; }
hr { display:none; margin: 20px 0px 20px 0px; border: 1px solid #ffffff; }

ul { position: relative ;  margin-left:40px;}

.logo { position: absolute;  top: 50%;  transform: translate(0%, -50%); color:#706f6f; text-align:center; font-family:"FocoBold"; width:100%; }
.logo img { width: 40%;  }
.progress-bar {    background-color: #1a1a1a;    height: 30px;    padding: 5px;    width: 80%;    margin: 0 auto;    border-radius: 5px;    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;  }
.progress-bar span {    display: inline-block;    height: 100%;    border-radius: 3px;    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;    transition: width .4s ease-in-out;  }
.stripes span { background-size: 30px 30px;    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%,  transparent 25%,  transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,  transparent 75%, transparent);    animation: animate-stripes 4s linear infinite;  }
@keyframes animate-stripes {    0% {      background-position: 0 0;    }    100% {      background-position: 60px 0;    }  }
.blue span {    background-color:#1d3a8f;  }
.prepa { margin : 0 auto; text-align:center; font-size:2.5em; color:#1d3a8f;  }
.coord { margin : 0 auto; text-align:center; font-size:2em;  width:100%;}
.dot {  height: 15px;  width: 15px;  background-color:#1d3a8f;  border-radius: 50%;  display: inline-block; vertical-align:middle; }
.important { padding-left:10px; color : ff4040; text-decoration:italic; }

.bold { font-weight:bold; }
.right { text-align:right; }
.left { text-align:left; }
.center { text-align:center; }
.divcenter { margin :0 auto; }
.red { color:#ff4040; }
.green { color:#40ff40; }
.base_blue { color:#1d3a8f; }
.base_orange { color:#f07d00; }

.middle { vertical-align : middle; }
.fullwidth { width:100%; }

.squares { background-image:url("/squares.png");  background-repeat: no-repeat; background-position:  top 0% right calc(50% - 200px); }
.squares img { margin-top:70px; }

.menu { width:100%; top:0px; background-color:#100c08; display:flex; position: sticky; position: -webkit-sticky;  margin:0px; z-index:50;}
.menu .logo_menu { display: inline-block; }
.menu .logo_menu img { width:250px; padding: 40px 0px 0px 40px; transition: 0.2s;}
.menu .contact_menu{ display: inline-block;   color:#ffffff; text-decoration:none; transition: 0.2s; }
.menu .contact_menu_mail { display: inline-block;  margin : 20px 40px 0px 0px;  ransition: 0.2s; }
.menu .contact_menu_tel { display: inline-block;  margin : 20px 40px 0px 0px; transition: 0.2s;  }
.menu .contact_menu img{ height:20px; }
.menu .contact_menu a { color:#ffffff; text-decoration:none;  font-size:1.2em; transition: color 0.2s linear; }
.menu .contact_menu a:hover { color:#3962d7;  transition: color 0.05s linear; }
.menu .full_menu { width:calc(100% - 40px);  min-width:70%; margin-top: 100px;  transition: 0.2s; margin-bottom:40px; }
.menu .full_menu a { color:#ffffff; text-decoration:none;  margin: 0px 20px 0px 20px;  transition: 0.2s; font-size:calc(0.4em + 1vw); }
.menu .menu_selected { color:#f07d00; margin: 0px 20px 0px 20px; padding-bottom:3px; border-bottom: 3px solid #f07d00; font-size:calc(0.4em + 1vw); }
.menu .button_menu { display:none ; position:absolute; top:10px; right: 20px; z-index:5; }
.menu .button_menu img { width:40px; }
.menu .small_menu { display:none;  width:90%; text-align:center; position:absolute; top:100px; left: 50%; transform: translate(-50%, 0%); background-color:#1d3a8f; padding: 20px 0px 20px 0px; margin: 0 auto; border-radius: 20px; transition: 0.5s;}
.menu .small_menu a { color:#ffffff; text-decoration:none;  font-size:1.5em; }
.menu .small_menu hr { margin: 20px 0px 20px 0px; border: 2px solid #f07d00; border-radius: 5px; }

.menu_reduced { border-bottom: 1px solid #ffffff;  transition: 0.2s; }
.menu_reduced .logo_menu img { width:180px; padding: 5px 0px 0px 5px; transition: 0.2s; }
.menu_reduced .full_menu a {font-size:1em;  transition: 0.2s; }
.menu_reduced .full_menu { margin-top: 20px;  margin-bottom:20px; width:70%; min-width:950px; transition: 0.2s;}
.menu_reduced .contact_menu a { font-size:1em;  transition: 0.2s;}
.menu_reduced .menu_selected {  font-size:1em;  transition: 0.2s;}

.footer_div { width:100%; text-align:center; margin: 0 auto;  background-color:#404040;}
.block { display: inline-block; width:350px; vertical-align:top; margin-bottom:50px; text-align:left; margin-top:50px; }
.block img { height: 35px; }
.block .image { width: 35px; display: inline-block; vertical-align:top; }
.block .image img { height: 20px; }
.block .other {  display: inline-block; color:#ffffff; }
.lastban { width:100%; text-align:center; margin: 0 auto; background-color:#100c08;  }
.lastban .block {  margin-top:10px; margin-bottom:10px; }

.underline{  position: relative; }
.underline::before{  content: '';  position: absolute;  bottom: -6;  right: 0;  width: 0;  height: 3px;  background-color: #1d3a8f;  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
@media (hover: hover) and (pointer: fine) {  .underline:hover::before{    left: 0;    right: auto;    width: 100%;  }}


.page_content { width: 95%; margin: 0 auto;  padding:10px; }
.page_content p { margin-left:60px;  margin-top:0px; }
.page_content a { color:#8080ff; }
.page_content a:hover { text-decoration:underline;}
.page_content ul { margin-left:50px;}

.tab { text-align:center;  padding:0px; margin: 50px auto 50px auto; }

.tab_two_cols { text-align:center;  padding:0px; margin: 50px 0px 50px 0px; }
.tab_two_cols .tab_col { display: inline-block;  margin: 0 auto; width:45%;  padding:10px; vertical-align:top; }

.tab_three_cols { text-align:center;  padding:0px; margin: 50px 0px 50px 0px; }
.tab_three_cols .tab_col { display: inline-block;  margin: 0 auto; width:28%;  padding:10px; vertical-align:top; }


.vignette { width: 430px;  vertical-align:top; display: inline-block; margin: 20px 0px 20px 150px;}
.vignette .image { display: table-cell;  }
.vignette .image img { width: 150px; border-radius: 50%;  border: 1px solid #f07d00; border-image-outset: 30px; }
.vignette .texte { display: table-cell;  text-align:left;  font-size: 0.8em; vertical-align:top; overflow-wrap: break-word; width:100%; }
.vignette .texte h1 { font-size: 1.5em;  color:#f07d00; }
.vignette .texte ul { list-style: none;  margin-left:10px; padding-left:0px; }

.equipe { width: 20%;  vertical-align:top; display: inline-block; margin: 20px 0px 20px 0px;  text-align:center;}
.equipe img { width: 150px; border-radius: 50%;  border: 1px solid #f07d00; border-image-outset: 30px; }
.equipe h1 { font-size:1em; color:#f07d00; }
.equipe h2 { font-size:0.9em;  margin-left:0px; color:#1d3a8f; }

.googlemap { width:95%; height: 75%; border:0; }

.rubrique { width:70%; padding-bottom:40px; margin: 0 auto; }
.rubrique h2 { margin-top:60px; }
strong { color: #d00000; }

.smiley { position:relative; height:20px; bottom:-4px; }
.slogan { width:110%; }

.formcontact { border-radius: 10px; background-color: #404040;  width:100%; border: #ffffff 1px solid; position: relative;  text-align:left;  font-size:0.8em;}
.formcontact .field { display:inline-block; width:200px; text-align:right; vertical-align:top; margin: 10px 0px 10px 20px; }
.formcontact .input { margin: 10px 0px 10px 20px; display:inline-block;  text-align:left; width:65%; }
.formcontact .input input, .formcontact .input textarea { width:100%; padding: 6px 10px;  box-sizing: border-box; background-color:#100c08; color: #ffffff; border: 1px solid #ffffff;  transition: 0.5s;}
.formcontact .input input[type='submit'] { cursor:pointer; background-color:#1d3a8f; }
.formcontact .input input[type='submit']:hover { background-color:#f07d00; border-color:#1d3a8f; }
.formcontact .input:hover input, .formcontact .input:hover textarea {border-color:#f07d00;  }
.formcontact .input input:focus,  .formcontact .input textarea:focus { border-color:#f07d00;  }


.cabequip { width:700px; }

@media screen and (orientation : portrait)		/* portrait */
{
	h1 { font-size:2em; }
	h2 { font-size:1.2em; }
	h3 { font-size:1em; }
	
	hr { display:block; }
	
	.cabequip { width:95%; }

	.menu .full_menu{ display: none; }
	.menu .full_menu a{ font-size:0.5em; margin: 0px 10px 0px 0px; } 
	
	.menu .button_menu{ display: block; }
	
	.page_content { width: 95vw; }
	.tab_two_cols .tab_col { width:95%;  padding:4px; }
	
	.tab { text-align: left; }
	.vignette { width: 95%; margin:20px;}
	
	.equipe { width: 95%; }
	.equipe h1 { font-size:1.5em; }
	.equipe h2 { font-size:1.2em; }
	
	.slogan { width:99%; }
	
	.squares { background-image:url("/squares.png");  background-repeat: no-repeat; background-position:  top 0% right calc(50% - 150px); }
	.squares img { max-width:70%; }
	
	.menu .logo_menu{ width:100%; text-align:center;} 
	.menu .logo_menu img { width:150px; padding: 15px 0px 0px 0px; }
	.menu .contact_menu{width:100%;text-align:left; margin-top:60px;} 
	.menu .contact_menu img{ height:15px; }
	.menu .contact_menu_mail , .menu .contact_menu_tel { margin: 0px 0px 10px 0px; transition: 0.2s; font-size:0.6em;  }
	.menu_reduced .logo_menu img { height:80px; width:auto; padding: 5px 0px 0px 5px; transition: 0.2s; }
	.menu_reduced .contact_menu_tel {  margin: 0px 0px 10px 0px; font-size:1em; transition: 0.2s;}
	.menu_reduced .contact_menu_mail { margin: 0px 0px 10px 0px;  display:none; transition: 0.2s; }
	.prepa { font-size:1.6em; }
	.coord { font-size:1em; }
	.logo img { width: 80%;  }

	.rubrique { width:98%; }
	.rubrique p { margin-left:15px; }
	
	.formcontact { text-align:center; }
	.formcontact .field { text-align:center; display:block; margin: 20px auto 0px auto;}
	.formcontact .input { text-align:center; display:block; margin: 0px auto;}
	
	.footer_div .block { width:300px;  margin-left:10px; margin-right:10px; }
}

@media screen and (min-width : 321px) and (max-device-width : 1024px) and (orientation : landscape)		/* smartphone landscape */
{
	.menu .full_menu {position:unset; top:unset; margin-top:0px; margin-bottom:0px;  text-align:center; width: 100%; font-size: 0.8em;} 
	.menu .full_menu a{ font-size:0.5em; margin: 0px 10px 0px 10px; } 
	.menu .logo_menu img { width:100px; }
	.menu .contact_menu{font-size:0.3em; padding-top:40px; width: calc(100vw - 200px); }
	.menu .contact_menu img{ height:15px; }
	.prepa { font-size:1.4em; }
	.coord { font-size:.8em; }
}

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)		/* tablette landscape */
{
	.menu .full_menu {position:unset; top:unset; margin-top:0px;  text-align:center; width: 100%; } 
	.menu .full_menu a{ font-size:1.2em; margin: 0px 10px 0px 10px; } 
	.menu .logo_menu img { width:150px; }
	.menu .contact_menu{font-size:0.6em; padding-top:40px; width: calc(100vw - 300px);  }
	.menu .contact_menu img{ height:15px; }
	.prepa { font-size:1.4em; }
	.coord { font-size:.8em; }
}