@charset "UTF-8";

/* Basic */

	body, input, select, textarea {
		font-size: 12pt;
	}
	
	body {
		/*margin-top:0px;*/
			}

/* Décaler haut/gauche pour laisser la place au menu sur mobile */

	body#top {
		/*padding: 4.5em 0 2em 4.5em;*/
	}

/* Header */
	#header {
		display: none;
	}

/* Banner */

	#banner {
		/*padding: 6em 1em;*/
		padding:10vh 1.5em 0 0.5em;
	
		}


		#banner .button {
			min-width: 0;
		}
/* Navigation */

nav.main-navigation input,
nav.main-navigation label   {
	
	position:absolute;
	top:0;
	left:0;
	/* Place le bouton du menu au dessus du bloc navigation*/
	z-index:20;
}

/* Gestion du menu hamburger sans javascript
   CREDIT : https://vincentdubroeucq.com/navigation-mobile-sans-js/
 */

.menu {
   	flex-basis: 100%;
	
	margin: 0;
    max-width: 0;
	max-height:0;
    opacity: 0;
    overflow: hidden;
    transition: margin .5s ease-in-out, max-width .5s ease-in-out, max-height .5s ease-in-out, width .5s ease-in-out, height .5s ease-in-out, opacity .3s .1s ease-in-out;
	
	visibility: hidden;

}

/* Gestion des éléments de navigation dans le menu déroulant*/

.menu-checkbox:checked ~ .menu {
    margin: 1em 0;
    max-width: 1000px;
	max-height: 1000px;
    opacity: 1;
	visibility: visible;
}

/**/

.menu-checkbox {
	opacity: 0;
	position: absolute;
	top: -1000px;
}

.menu-toggle {
    padding: .5em 1em;

}

nav.main-navigation{
	position:fixed;
	top:0px;
	left:0px;

	box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.25);
	background-color:rgba(85, 95, 102, 0.75);

/* Pour agrandir le bouton  */
	padding:2.5em;
/* Pour arrondir légèrement le bouton */
    border-radius:0 0 4px 0;	
}
/* Apparence du sigle Hamburger */
nav.main-navigation label{
	
	color:silver;
	font-size:3.2em;
	font-weight:900;
	margin-left:-0.6em;

}	

/* Gestion des éléments de navigation dans le menu déroulant*/

	nav#nav{
		
	    flex-direction:column-reverse;
		justify-content:flex-end; /* Pour placer les éléments de menu en haut du bloc  */
		height:100vh;/* Nécessaire !!!! */
		width:14em; /* ok */
		/* pour gérer le z-index du menu au dessus de tous !!*/
		position:relative;
		z-index:100;
		/* Enlève l'ombre présente sur gd écran*/
		box-shadow:none;
		/*background-color:rgba(85, 95, 102, 0.70);*/
		background-color:transparent;
		
	}	
	
	nav#nav ul#principal	
	{	
	    flex-direction:column;
		justify-content:flex-start;
 	}
	

	nav#nav div#blocGauche

	{	
	   padding-top:2.5em;
	  flex-flow: column nowrap;
		/*align-items: stretch;*/
		justify-content:flex-start;

	}

	nav#nav div#blocGauche ul#social,
	nav#nav div#blocGauche ul#langues
	{
		
     padding:0;
     margin:0;
	justify-content:center;
	}

	/* Fait disparaître le logo */
	nav#nav ul#principal li:first-child,
	nav#nav div#blocGauche ul#social li span
	{
		display: none;
	}	 

	nav#nav ul#principal li {
		padding:0.5em 0;
		font-size:1.2em;
	}
	
	nav#nav div#blocGauche ul#social li,
	nav#nav div#blocGauche ul#langues li
	{
     padding:0.2em 0.5em;
     margin:0;
	}

	nav#nav a, 
	nav#nav a span
	{
		color:white;
	}

 /* Gestion des blocs côtes à côtes - Même hauteur !!
A placer les uns en dessous des autres */

/* Centre les blocs horizontalement sur la page*/
section#one section.container {
	width:99vw;
	margin:auto;

}

section#one section.container article{
	display:table;
	width:100%;
    border-spacing:1em;

}


/* FORMULAIRE */

section#three form section.special,
section#three form section.container {

	width:90vw;
}

/* FOOTER */

footer section.container article{
	display:table;
	width:75%;
	margin:auto;
    border-spacing:1em;

}

/* MAIN  CONTACT */

section#main.contact section.container{
	padding-top:1em;
}

section#main section.container article#contact{
	display:table;
	width:90vw;
	text-align:center;
	margin:auto;
}

/* MAIN  AUTRE CONTENU */

section#main section.container{

	padding-top:5em;
	padding-left:0;
	margin:0;
}

section#main section.container article{
	display:table;
	border-spacing:0;
	width:98%;
	margin:auto;
	padding-left:0;
}

section#main section.container article:first-child{
	width:90vw;
}

hr.main{
	
display:none;
}

section#main section.container article img{
	width:98%;
	display:block;
	margin-left:-0.5em; /* Correction décalage gauche des images de contenu */
}

/* Gestion de qui suis-je ? */

   
section#index section.container {
	display:table;
	table-layout:fixed;
	border-spacing:2em;

}

section#index section.container article{
	display:table-row;
	text-align:center;
	vertical-align:middle;
}

section#index section.container .image.fit {
			display: block;
			margin: auto ;
			max-width: 35%;
		}