@charset "utf-8";

*{
  	box-sizing: border-box;}

div {
  	max-width:calc(100% - 3px);}

html {
	width:100%;
	margin:auto 0;
	overflow-x: hidden;
	scroll-behavior: smooth;}

img, object, embed, canvas, video, audio, picture {
       	max-width:100%;
       	height:auto;
       	border:0;}
       	
body {
  	padding:0;
  	margin:0;
  	min-height:100vh;
  	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;}
  	
@media screen and (min-width:1000px) {

  html {
    	font-size:1em;
    	}
}

@media (min-width: 1200px){

	body {
        width:1200px;
	font-size:1.2em;
	padding-right:2px;
	padding-left:2px;
	background-color:#FFF;
	margin-right:auto;
	margin-left:auto;
	}
}

@media (min-width: 1920px){

	body {
        width:1500px;
	font-size:1.4em;
	padding-right:2px;
	padding-left:2px;
	margin-right:auto;
	margin-left:auto;
	}
}

@media (max-width:768px) and (orientation: landscape) {
  html {
   	-webkit-text-size-adjust:100%;
  }
}

@media (max-width:768px) and (orientation: landscape) {
 main {
    flex-direction:row;
    
  }
}

/* Début de @media pour les résolutions de plus de 36em ####################################*/  	
@media (min-width:36em) {
 
 .puce {display:none;}
  	
.lienshaut {
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	width:38rem;
	margin-top:0em;
	margin-left:1%;
	font-size:1.2rem;
	letter-spacing:.1rem;
	transition:all 1s;	
	mix-blend-mode:difference;
	background-color: hsla(0, 0%, 0%, 6%);}
	
.lienshaut > a:hover {
    	border-bottom: 4px solid #E64A19;}
	
.trait {color:#FFFF00;}

.fixed-bg p {
  	max-width:78%;
  	margin-left:auto; 
  	margin-right:auto;
  	padding:0;
  	color:#000;
  	font-size:1.1rem;
  	text-justify:auto;
  	z-index:8000;}
  	
.bg-0 {
	background:linear-gradient(-45deg, #83A9D6, gray, #83A9D6, #000,  lightgray, #000,  		#83A9D6);
	background-size: 400% 100%;	
	box-shadow: 0 0 0 0px gray inset;}
	
.main-text {
	position:relative;
	display:flex;
	flex-wrap:wrap;
  	padding:15px;
  	margin:2em 0 1em 2em;
  	font-family:Arial;
  	font-weight:normal;
  	font-size:2.6em;
  	text-align:center;
  	animation: fadein 4.4s forwards ease;
  	color: hsla(0, 100%, 100%);
  	text-shadow:5px 2px #000;}
  	
.sous-titre1 {
	width:20em;
  	margin-left:2em;
  	padding:2px;
  	font-family:Arial;
  	font-weight:normal;
  	font-size:1.2em;}
	
.titresfoot {
	width:100%;
	font-weight:bold;
	font-size:1em;
	color:#000;}
	
.mentions {
	width:76%;
	flex-grow:1;
	margin:auto;
	padding:1em;
	background:lightgray;
	z-index:200;}
	
.button-top {
  	display:flex;
  	-webkit-box-pack:center;
        -ms-flex-pack:center;
         justify-content:center;
        -webkit-box-align:center;
        -ms-flex-align:center;
         align-items:center;
        text-align:center;
  	position:fixed;
  	top:28em;
  	width:2em;
  	height:2em;
  	margin-left:56em;
  	z-index:9000;
  	transition:opacity 2s ease-in-out;
    	background:yellow;
  	border-radius:50%;
  	opacity:0;}

.button-top.scrolled {
	opacity:.6;
	color:#333;}
	
.button-top:focus{
  	outline: 0;
  	box-shadow: none;
  	-webkit-tap-highlight-color:rgba(0, 0, 0, 0) !important;}
  
:focus, :active {
    	outline: 0;
    	border: 0;}
    	}
    	
/* Début de @media pour les résolutions de moins de 35em ####################################*/

@media (max-width:35em) {
	
.arrow-down, .lienshaut, .drapeau, .button-top {
    	display:none;}	
	
.bg-0 {
	background-color:lightgray;
	background: linear-gradient(-45deg, black, blue, yellow, gray, #83A9D6, lightgray);
	animation: gradient 14s ease infinite;
	background-size: 400% 100%;
	box-shadow:0 0 0 0;}
	
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}	

.bandeau {
	width:90%;
	margin:6rem auto 0 auto;
	padding:8px;
	background:black;
	text-align:center;
	color:white;
	opacity:0;
	z-index:100;
	animation:3s hide 1;}

.fixed-bg {
	flex-direction:column;
	align-items:center;
	justify-content:center;
	height:auto;
	padding:0;
	margin:0;    
	line-height:1.5;}
	
.mentions {
	width:100%;
	flex-grow:1;
	margin:auto;
	padding:1em;
	z-index:200;
	background-color:lightgray;}

.main-text {
	position:relative;
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
  	align-items: center;
	width:22rem;
	margin-top:2em;
  	margin-bottom:2em;
  	font-size:1.6em;
  	font-style:italic;
  	font-weight:normal;
  	line-height:1em;
      	text-shadow:white 0.02em 0.002em 0.004em,
    	#9c9c9c 1px 1px 1px,
    	#9c9c9c 1px 2px 1px,
    	#9c9c9c 1px 3px 1px,
    	#9c9c9c 1px 4px 1px,
    	#9c9c9c 1px 5px 1px,
    	#9c9c9c 1px 6px 1px,
    	#9c9c9c 1px 7px 1px,
    	#9c9c9c 1px 8px 1px,
    	#9c9c9c 1px 9px 1px,
    	#9c9c9c 1px 10px 1px,
    	#9c9c9c 1px 11px 1px,
    	#9c9c9c 1px 12px 1px;
    	color:#000;}

.accueil {
    	display:inline-flex;
    	justify-content:flex-start;
    	width:100%;
    	height:4.2rem;
    	top:0;
    	word-spacing:0;
    	z-index:6000;
    	font-size:1em;
    	text-align:center;
    	background-color:rgba(0, 0, 200, 0);
    	opacity:1;}
    	
.contacts-r {
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	width:90%;
	position:fixed;
	top:.8em;
	z-index:9000;
	background:none;}
	
.text-box {
  	display:inline-block;
  	min-width:95%;
  	max-width:95%;
  	z-index:10;
  	margin:auto;
  	background: linear-gradient(190deg, rgba(248,249,250,1) 0%, rgba(255,255,255,0) 10%);
  	transform: skew(0deg, -0deg);
  	box-shadow:26px 26px 26px #000;   
    	opacity:1;
    	transition:opacity 3s ease-in-out;}
    	
.sous-titre1 {
	position:relative;
	display:flex;
	flex-wrap: wrap;
	width:16em;
  	margin-left:1em;
  	padding:2px;
  	font-family:Arial;
  	font-style:italic;
  	font-size:1.2em;}
	
.fixed-bg p {
	max-width:98%;
	padding:0 6px; 
	margin-left:auto; 
	margin-right:auto;
	font-size:1em;
	hyphens:auto;
	color:#000;}
	
.puce {
	color:#000;
	font-size:1.4em;
	margin-top:4em;
	margin-right:12em;
	animation: no;}
	}