@charset "utf-8";

*{
  box-sizing: border-box;}

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

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

img, object, embed, canvas, video, audio, picture {
       max-width:100%;
       height:auto;
       border:0;} 
 
/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari */
    min-height: -webkit-fill-available;
  }
}

a,
area,
button,
[role="button"],
input:not([type=range]),
label,
select,
summary,
textarea {
  -ms-touch-action:manipulation;
      touch-action:manipulation;}
	
@media (min-width:36em) {

@font-face {
  font-family:'PolicePerso';
  font-style:normal;
  font-weight:400;
  src: url('satisfy-v11-latin-regular.woff2') format('woff2'); 
       font-display: swap;}
}

body {
  padding:0;
  margin:0;
  font-size: 100%;
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;}

@media screen and (max-width: 64em) {
 body {
      font-size: 90%;
   }
}

@media screen and (max-width: 50em) {
 body {
       font-size: 75%;
   }
}

@media screen and (max-width: 30em) {
   body {
        font-size: 90%;
  }
} 
 	
.italique {
	font-style:italic;
	font-weight:bold;}
	
.hyphenate {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens:auto;
    -ms-hyphens:auto;
    hyphens:auto;}
    
span.at:before {
   content: "jembefola";
   }

span.at:after {
   content: "free.fr";
   }
		
a:link {color:blue;font-size:1em; text-decoration: underline;
  -webkit-text-decoration-color:#333; /* safari still uses vendor prefix */
  text-decoration-color:#333;}
a:visited {color:#0000FF;}
a:hover {color:#FF0000;}
a:active {color:#0000FF;}
a:checked {color:#FFFF00;}

a:focus {
    outline: 1px solid yellow;
    outline-offset: 4px;}

img.wrap {margin-left:22px}

.lettrine {
  	float:left;
  	padding-right:2.6px;
  	margin-right:2px;
  	font-size:2em;
  	font-family:'PolicePerso';
  	color:red;}
   	
@media screen and (min-width:1000px) {

  html {
    	font-size:1em;
    	}
}

@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;}
}
.trait {color:#FFFF00;}

.monmenu {
	display:none;}
	
#menubas {
	display:none;}

[data-src] {
    	opacity:0;}
    	
.main {display:flex;}

.remarque {display:none;}
   
button, input, select, textarea {
  	font-family :inherit;
  	font-size:1.1em;
  	text-align:left;}
  
input[type=text], textarea, input[type=email] {
  	width:100%;
  	padding:10px;
  	border-radius:4px;
  	box-sizing: border-box;
  	resize: vertical;
  	border:solid 1px black;
  	background:linear-gradient(lightblue, lightgray, lightblue, lightgray, rgba(255, 255, 140, 1));}
  
label{
	margin-right:0;
  	margin-left:0;
  	width:60%;
  	text-align:left;
  	font-size:1.2em;}

input[type=submit] {
  	background:#1255a2;
  	color:white;
  	padding:0 1px 0 1px;
  	border-radius:4px;
  	cursor:pointer;}
  
input[type=reset] {
	padding:0 0 0 0;
	background:linear-gradient(lightblue, lightgray, lightblue, lightgray, rgba(255, 255, 140, 1));}

input[type=submit]:hover {
    	color:red;}
    	
.bandeau {
	position:absolute;
	width:60%;
	margin-top:2em;
	left:20%;
	padding:14px;
	background:black;
	text-align:center;
	color:yellow;
	font-size:1em;
	opacity: 0;
	animation: 8s hide 1;}
    	    	
.fixed-bg {
  	display:flex; 
  	justify-content:center;
  	flex-direction:column;
  	line-height:1.5;
  	padding:0 20px;
  	background-attachment:fixed;
  	background-repeat:no-repeat;
  	background-position:center center;
    background-size:cover; 
  	background-clip:border-box;
  	background-color:#000;}

@keyframes hide {
	0%,30% {opacity:1;}
	100% {opacity:0;}
}

.progress-container {
  width:100%;
  margin-top:.4em;
  height:2px;}

.progress-bar {
  height:6px;
  background:red;
  width:2%;}

.accueil {
    	display:inline-block;
    	position:fixed;
    	top:0;
    	z-index:1000;
    	width:100%;
    	height:3.8rem;
       	padding:12px;
    	transition-duration:2s;
    	transition-delay:0.1s;
    	opacity:1;}
    
.lienshaut {
	display:flex;
	flex-wrap: wrap;
	justify-content:space-around;
	width:40rem;
	margin-top:0rem;
	margin-left:1%;
	font-size:1.3rem;
	letter-spacing:.1rem;
	-webkit-transition:all 1s;
	transition:all 1s;	
	mix-blend-mode:difference;
	background-color: hsla(0, 0%, 0%, 6%);}
	
.lienshaut > a:hover {
    border-bottom: 4px solid #E64A19;}
    
.contacts-r {
	display:flex;
	flex-direction:column;
	line-height:3em;
	position:fixed;
	margin-left:1em;
	top:4em;
	z-index:0;}

.smart-popin {
    position:fixed;
    left:0; right:0;
    top:0; bottom:0;
    overflow:auto; 
    opacity:0;
    z-index:100;
    visibility:hidden;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;}

.smart-popin:target {
    opacity:1;
    visibility:visible;
    -webkit-transition: all 1s;
    transition:all 1s;}

.smart-popin .sp-table {
    display:table;
    height:100%;
    width:100%;}
    
.smart-popin .sp-cell {
    display:table-cell;
    vertical-align:middle;}
    
.smart-popin .sp-body {
    position:relative; 
    width:65.66%; 
    z-index:9000; 
    margin:0 auto;
    padding:4em;
    text-align:center;
    font-size:.9em;
    background-image:linear-gradient(lightblue, lightgray, lightblue, lightgray, rgba(255, 255, 140, 1));
    box-shadow:18px 18px 18px 16px rgba(0,0,0,0.55);}
    
.smart-popin .sp-body * {
    max-width: 100%;
    text-align:center;}

.smart-popin .sp-close {
    position:absolute;
    top:.6em;
    right:3em;
    width:36px;
    height:36px;
    text-align:center;
    line-height:36px;
    color:#000;
    background:#FFF;
    border-radius:20px;
    text-decoration:none;}
 
.main-text {
	position:relative;
	display:flex;
	flex-wrap:wrap;
	width:60%;
   	height:auto;
  	padding:15px;
  	margin:-4em 0 0 4em;
  	font-weight:normal;
  	font-size:3.8em;
  	line-height:2em;
  	-webkit-animation: fadein 4.4s forwards ease;
  	animation: fadein 4.4s forwards ease;
  	color: hsla(0, 100%, 100%);
  	mix-blend-mode:difference;}

.sub-text {
	display:flex;
	flex-wrap:wrap;
	position:relative;
	width:50%;
	margin:0 0 1em 8em;
	padding:6px;
      	font-size:1.2em;
   	font-weight:normal;
   	text-align:center;
   	-webkit-animation: fadein 4.4s forwards ease;
  	animation: fadein 4.4s forwards ease;
   	color:#FFF;
   	background-color: hsla(0, 0%, 0%, 28%);}
   	
.sub-text-2 {
	min-width:6em;
	width:80%;
	margin:3em 0 4em 2em;	
	font-family:PolicePerso;
	text-align:center;
	font-size:3.4em;
	color:white;
	mix-blend-mode:difference;}
	
.stitre {
  	width:14em;
  	margin:.4em 0 0 1em;
  	padding:2px;
  	font-family:PolicePerso;
  	font-weight:normal;
  	font-size:1.5em;
  	text-align:center; 	
  	color:white;}
		
.button-top {
  	display:flex;
  	flex-wrap:nowrap;
  	position:fixed;  	
    justify-content:center;
    align-items:center;
  	top:30em;
  	width:3em;
  	height:3em;
  	left:90%;
  	z-index:9000;
  	animation:fadein 4.4s forwards ease;
    	animation:skew 1.4s infinite;
    	animation-direction:alternate;
  	transition:opacity 1.6s ease-in-out;
    background:red;
  	border-radius:50%;
  	opacity:0;}
  	
 @keyframes skew {
  0% {
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
  100% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
  	
.button-top.scrolled {
	opacity:1;
	color:black;}
	
.button-top:focus{
  	outline: 0;
  	box-shadow: none;
  	-webkit-tap-highlight-color:rgba(0, 0, 0, 0) !important;}
  
:focus, :active {
    	outline: 0;
    	border: 0;}
    	
html {scroll-behavior: smooth;}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;}
    }

html::-webkit-scrollbar {
  	width:2rem;
  	background-color:rgba(0,0,0,.15);}

html::-webkit-scrollbar-thumb {
    	background:#000;}

@keyframes fadein {
  	from {transform: translateY(60%);opacity:0}
  	to {transform: translateY(0);opacity:1}
}
	
.galerie {
	display:flex;
	width:95%;
	max-width:95%;
	margin-left:1em;
	margin-right:1em;
	margin-bottom:2em;
	scrollbar-color:red rgba(0,0,0,.15);
	background:#FFF;
  	scrollbar-width:auto;
	overflow-x:scroll; 
	overflow-y:hidden;
    	scroll-snap-type: x mandatory;
    	scroll-snap-type: mandatory;}
    		
.galerie img {
	min-width:100%;
	width:100%;
	margin:0;
	align-self: center; /*pour le responsive*/
	scroll-snap-align:center;
	overflow:hidden;
	-ms-scroll-snap-align: start end;
	scroll-snap-align: start end;
	border:1px solid #000;
	background:#FFF;}
	
.legende {
      position:absolute;
      bottom:0;
      width:40em;
      padding:2px;
      font-size:.3em;
      text-align:center;
      opacity:0;
      background-color: rgba(200, 200, 200, 0.4);}
  
.galerie:hover .legende {
      opacity:1;
      animation: fadein 1s forwards ease;}
		
.slideshow {
    display:block;
    position:relative;
    padding:0;
    max-width:70%;
    margin-left:8em;    
    overflow:hidden;
    background-repeat:no-repeat;}
    
video::cue {font-size:1em;}

video::cue {
  background-image: linear-gradient(to bottom, black);
  opacity:.6;
  color:white;}
  
#soutitre {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#soutitre {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
  
/* Oiseaux */

.bird {
    	background-image: url(Images/bird-cells.svg);
    	background-size:auto 100%;
    	width:70px;
    	height:125px;
    	will-change: background-position;
    	animation-name: fly-cycle;
    	animation-timing-function: steps(10);
    	animation-iteration-count: infinite;}
      
.bird--one {
    	animation-duration: 1s;
    	animation-delay: -0.5s;}
    
.bird--two {
    	animation-duration: 0.9s;
    	animation-delay: -0.75s;}
    
.bird--three {
    	animation-duration: 1.25s;
    	animation-delay: -0.25s;}
    
.bird--four {
    	animation-duration: 1.1s;
    	animation-delay: -0.5s;}
    
.bird-container {
    	position: absolute;
    	top: 8%;
    	left: -7.5vw;
    	will-change: transform;
    	animation-name: fly-right-one;
    	animation-timing-function: linear;
    	animation-iteration-count: infinite;}
    
.bird-container--one {
    	animation-duration: 55s;}/* 0rigine 15 */
    
.bird-container--two {
    	animation-duration: 46s;
    	animation-delay: 1s;}
    
.bird-container--three {
    	animation-duration: 40s;
    	animation-delay: 9.5s;}
    
.bird-container--four {
    	animation-duration: 50s;
    	animation-delay: 10.25s;}
    
 @keyframes fly-cycle {
 100% {
 	background-position: -900px 0;}
 }
 
@keyframes fly-right-one {
 0% {
 	left: -10%;
 	transform: scale(0.3);
}
 10% {
 	left: 10%;
 	transform: translateY(2vh) scale(0.4);}
 
 20% {
 	left: 30%;
 	transform: translateY(0vh) scale(0.5);}
 
 30% {
 	left: 50%;
 	transform: translateY(4vh) scale(0.6);}
 
 40% {
 	left: 70%;
 	transform: translateY(2vh) scale(0.6);}
 
 50% {
 	left: 90%;
 	transform: translateY(0vh) scale(0.6);
}
 60% {
 	left: 110%;
 	transform: translateY(0vh) scale(0.6);}
 
 100% {
 	left: 110%;
 	opacity: 1;
 	transform: translateY(0vh) scale(0.6);}
 }

@keyframes fly-right-two {
 0% {
 	left: -10%;
 	opacity: 1;
 	transform: translateY(-2vh) scale(0.5);}
 
 10% {
 	left: 10%;
 	transform: translateY(0vh) scale(0.4);
}
 20% {
 	left: 30%;
 	transform: translateY(-4vh) scale(0.6);}
 
 30% {
 	left: 50%;
 	transform: translateY(1vh) scale(0.45);}
 
 40% {
 	left: 70%;
 	transform: translateY(-2.5vh) scale(0.5);}
 
 50% {
 	left: 90%;
 	transform: translateY(0vh) scale(0.45);}
 
 51% {
 	left: 110%;
 	transform: translateY(0vh) scale(0.45);}
 
 100% {
 	left: 110%;
 	transform: translateY(0vh) scale(0.45);}
 }
        
.text-box {
  	display:inline-block;
  	min-width:70%;
  	max-width:70%;
  	z-index:10;
  	margin:2em 16em 4em 10em;
  	background-color: rgba(180, 180, 180, .95);
  	color:white;
  	box-shadow:26px 26px 26px #000;   
    	opacity:.4;
    	transition:opacity 2.6s ease-in-out;}

.text-box.scrolled {
	opacity:1;}

.fixed-bg p {
  	max-width:92%;
  	margin-left:auto; 
  	margin-right:auto;
  	padding:0;
  	color:black;
  	font-size:1.1rem;
  	text-justify:auto;}

img {
  cursor: pointer;}
 
.bg-0 {
	background-image:url("Images/Orage-1024-C.jpg");	
	box-shadow: 0 0 0 0px gray inset;}
	
.bg-1-1 .bckg-img {
	background-image:none;}
	
.bg-1-1 {
  	background-image:url("Images/Branches-1024-C.jpg");
  	box-shadow: 0 0 0 0px gray inset;}
  	
.bg-2-1 .bckg-img {
	background-image:none;}

.bg-2-1 {
 	background-image:url("Images/Fleurs-1.jpg");
 	box-shadow: 0 0 0 0px gray inset;}
 	
.bg-3-1 .bckg-img {
	background-image:none;}

.bg-3-1 {
  	background-image:url("Images/Brousse-1024-C.jpg");
  	box-shadow: 0 0 0 0px gray inset;}

.bg-4-1 {
  	background-image:url("Images/Arrivée-2-1024-C.png");}
  	
.foot {
	position:relative;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	font-size:.74em;	
	background:linear-gradient(-45deg, gray, gray, #83A9D6, lightgray, gray, lightgray);
	animation: gradient 8s ease infinite; 
	hyphens:auto;
	z-index:0;}
	
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}	
	
.formulaire {
	max-width:24em;/*C'est le formulaire*/
	flex-grow:1;	
	padding:1.2em;
	z-index:1;}
	
.liens {
	position:relative;/*Ce sont les liens*/
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	font-size:1.2em;
	line-height:.6em;
	width:20em;
	padding:0;}
	
.mentions {
	width:2em;
	flex-grow:1;
	padding:1.2em;
	z-index:200;}
	
.presentation {
	width:12em;/*C'est la présentation*/
	flex-grow:1;
	padding:1.2em;
	line-height:1.5em;
	z-index:200;}
	
.contacts-bas {
	position:relative;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	width:20em;
	margin-top:2em;}
		
.titresfoot {
	width:16em;
	font-weight:bold;
	font-size:1.4em;
	color:#000;}
	
.wrapper > div {
	flex:1;
	text-align:center;
  	margin-top:1em;
  	padding:.3em;
  	border-radius:3px;
  	background:lightgray;}
  	
/* Début de @media pour les résolutions de moins de 35em ####################################*/

@media (max-width:35em) {
	
.arrow-down, .lienshaut, .bird, .remarque {
    	display:none;}	
	
.bg-0 {
	
	background-image:url("Images/Orage-1024-C.jpg");
	box-shadow:0 0 0 0;}

.bg-1-1 {
	background-color:lightgray;
	background-image: linear-gradient(#83A9D6, lightblue, #66998c, gray, Goldenrod, gray, 		lightgray, rgba(102, 153, 140, 1));
	box-shadow:0 0 0 0;}
	
.bg-2-1 {
	background-color:lightgray;
	background-image: linear-gradient(#83A9D6, lightblue, #66998c, gray, Goldenrod, gray, 		lightgray, rgba(102, 153, 140, 1));
	box-shadow:0 0 0 0;}
	
.bg-3-1 {
	background-color:lightgray;
	background-image: linear-gradient(#83A9D6, lightblue, #66998c, gray, Goldenrod, gray, 		lightgray, rgba(102, 153, 140, 1));
	box-shadow:0 0 0 0;}
	
.bg-4-1 {
	background-color:lightgray;
	background-image: linear-gradient(#83A9D6, lightblue, #66998c, gray, Goldenrod, gray, 		lightgray, rgba(102, 153, 140, 1));
	box-shadow:0 0 0 0;}

	
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}	
}
   
button, input, select, textarea {
  	font-family :inherit;
  	font-size:1.1em;
  	text-align:left;}
  
input[type=text], textarea, input[type=email] {
  	width:100%;
  	padding:8px;
  	border-radius:4px;
  	box-sizing: border-box;
  	resize: vertical;
  	text-align:left;
  	border:solid 1px black;
  	background:linear-gradient(lightblue, lightgray, lightblue, lightgray, rgba(255, 255, 140, 1));}
  
label{
	margin-right:0px;
  	margin-left:0px;
  	width:60%;
  	text-align:left;
  	font-size:1.2em;}

input[type=submit] {
  	background:#1255a2;
  	color:white;
  	padding:0 1px 0 1px;
  	border-radius:4px;
  	cursor:pointer;}
  
input[type=reset] {
	padding:0 0 0 0;
	background:linear-gradient(lightblue, lightgray, lightblue, lightgray, rgba(255, 255, 140, 1));}

input[type=submit]:hover {
    	color:red;}

.fixed-bg {
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-height:10vh;
	padding:0;
	margin:0;    
	line-height:1.5;}

.main-text {
	width:18rem;
	max-width:18rem;
  	height:auto;
  	margin:0em;
  	font-size:2.6em;
    	font-weight:normal;
    	line-height:1.4em;
  	text-align:center;
      	color:white;}

.sub-text {
	min-width:80%;
	width:100%;
	max-width:100%;
	margin:0 0 1em 0;
	font-weight:normal;
	font-style:normal;
	text-align:center;
	font-size:1em;
	color:white;
	background-color: hsla(0, 0%, 0%, 38%);}
	
.sub-text-2 {
	min-width:6em;
	width:14em;
	margin:4em 0 0 0 ;
	font-variant-caps: all-small-caps;
	text-align:center;
	font-size:1.6em;
	color:white;
	mix-blend-mode:normal;}
	
.accueil {
    	display:inline-flex;
    	justify-content:flex-start;
    	width:100%;
    	height:3.6rem;
    	top:0;
    	word-spacing:0;
    	z-index:9000;
    	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%;
	min-width:90%;
	position:fixed;
	top:.8em;
	z-index:9000;
	background:none;}

.smart-popin1 {
    position:fixed;
    left:0; right:0;
    top:0; bottom:0;
    overflow:auto; 
    opacity:0;
    z-index:100;
    visibility:hidden;
    transition: all 0.8s ease;}

.smart-popin:target {
    opacity:1;
    visibility:visible;
    transition:all 1s;}

.smart-popin .sp-table {
    display:table;
    height:100%;
    width:100%;}
    
.smart-popin .sp-cell {
    display:table-cell;
    vertical-align:middle;}
    
.smart-popin .sp-body {
    position:relative; 
    width:60%;  
    margin:0 auto;
    padding:1em;
    text-align:center;
    font-size:1em;
    background-image:linear-gradient(lightblue, lightgray, lightblue, lightgray, rgba(255, 255, 140, 1));
    box-shadow:18px 18px 18px 16px rgba(0,0,0,0.55);
    z-index:9800;}
    
.button-top {
	position:relative;
  	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:38em;
  	width:2em;
  	height:2em;
  	margin-left:22em;
  	z-index:9000;
  	transition:opacity 2s ease-in-out;
    	background:#FFF;
  	border-radius:50%;
  	opacity:0;}

.button-top.scrolled {
	opacity:.8;
	color:#333;
	z-index:8000;}
	
.button-top:focus{
  	outline: 0;
  	box-shadow: none;
  	-webkit-tap-highlight-color:rgba(0, 0, 0, 0) !important;}
  
:focus, :active {
    	outline: 0;
    	border: 0;}
    	
#menubas {
	display:flex;
	justify-content:space-evenly;
	align-items:center;
	position:fixed;
	width:100%;
	height:3em;	
	bottom:0;
	padding-top:8px;
	background:#FFF;
	transition: all 0.6s;
  	transition-delay: 0.2s;
	z-index:6000;}
	
#menubas.hidden {
	opacity:0;}
	  
.monmenu {
	display:block;
	position:fixed;
	top:5em;
	line-height:2em;
	color:transparent;
    	font-size:1.4em;}
	
.monmenu ul {
	width:90%;
	height:13em;
	margin-left:1em;
	background-image:linear-gradient(gray, gray, lightgray, gray, rgba(255, 255, 250, 1));}
	
.monmenu li {
	text-align:left;}

.picture {
	float:none;
	width:100%;
	margin-left:-6em;}

.galerie {
	position:relative;
	display:flex;
	width:99%;
	max-width:99%;
	margin-left:6.2em;
	scrollbar-width:auto; 
	overflow-x:scroll; 
	overflow-y:scroll;
    	scroll-snap-type: x mandatory;
    	scroll-snap-type: mandatory;
    	transition-duration: 1s;}

.galerie img {
	width:100%;
	margin:0; 
	min-width:100%;
	align-self: center; /*pour le responsive*/
	scroll-snap-align:center;
	overflow:hidden;
  	-ms-scroll-snap-align: start end;
  	scroll-snap-align: start end;}

.galerie:hover {
	transform: scale(1);
	z-index:300;}

.legende {
      position:absolute;
      width:50%;
      bottom:0;
      padding:2px;
      font-size:1.2em;
      text-align:center;
      opacity:0;
      background-color:gray;}
      
.legende:hover {
      transition:all 1.8s;}

.galerie:hover .legende {
      opacity:1;}
      
.slideshow {
    display:block;
    position:relative;
    padding:0;
    max-width:95%;

    margin:1rem auto;    
    overflow:hidden;
    background-repeat:no-repeat;}
    
video::cue {font-size:1.4em;}
     	
.stitre {
	min-width:12em;
	margin:1.2em auto 0 0;
	padding:8px;
	font-style:italic;
	font-weight:normal;
	font-size:1.2em;
	color:white;}
	
button, input, select, textarea {
  	font-family :inherit;
  	font-size:1.5em;
  	text-align:center;}

.text-box {
	width:100%;
	max-width:100%;
	height:auto;
	margin:.4em auto 0 auto;
	background-color: rgba(0, 0, 0, 6);
	box-shadow:0 0 0 0;
	opacity:0;
    	transition:opacity .8s ease-in-out;}
    	
.text-box.scrolled {
	opacity:1;}

.fixed-bg p {
	max-width:600px;
	padding:0 20px; 
	margin-left:auto; 
	margin-right:auto;
	font-size:1em;
	hyphens:auto;
	color:white;}
	
.telecharger {
	display:flex;
	justify-content:space-around;
	min-width:20rem;
	height:auto;
	margin-top:0;
	padding:8px 0 8px 0;
	line-height:3em;}
	
.foot {
	position:relative;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	font-size:.9em;	
	background:linear-gradient(-45deg, lightgray, gray,  lightgray, gray); 
	hyphens:auto;
	z-index:100;}
	
.formulaire {
	min-width:100%;/*C'est le formulaire*/
	flex-grow:1;
	padding:1em; 	
	z-index:9000;}
	
.liens {
	position:relative;/*Ce sont les liens*/
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	font-size:1.2em;
	line-height:.4em;
	width:98%;
	padding:0;
	z-index:1;}
	
.presentation {
	width:94%;/*C'est la présentation*/
	flex-grow:1;
	padding:1.2em;}
	
.contacts-bas {
	position:relative;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	line-height:2em;
	min-width:24em;}

.titresfoot {
	width:18em;
	font-weight:bold;
	font-size:1.4em;
	color:#000;}
	
.mentions {
	position:relative;
	display:inline-block;
	padding:1em;
	z-index:9000;}
	}