@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'open_sansregular';
    src: url(/'font/opensans-regular_0-webfont.woff2') format('woff2'),
         url(/'font/opensans-regular_0-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Dual-300-webfont';
    src: url(/font/'Dual-300-webfont') format('woff2'),
         url(/font/'Dual-300-webfont') format('woff'),
         url(/font/'Dual-300-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


html,
body {
  margin: 0;
  height: 100%;
}

p {
  font-family: open_sansregular, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1, p {
  color: #000;
  padding:2%;
}
h1 {
  font-family: 'Dual-300-webfont';
  font-size: 3em;
  color: rgba(212,0,12,1);
}
h2 {
  padding-top: 70px;
  text-align: left;
  font-size:3em;
  padding-left:7%;
  color:rgba(255,255,0,1);
}
em {
  color: rgba(212,0,12,1);
  font-style: normal;
}
strong {
  font-weight: normal;
font-style: italic;
}

a img {
  border:solid 0px green; 
    opacity:.95;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

a img:hover {
  opacity:.45;
}
section {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: grey;
}

.full-screen {
  height: 100%; /* makes panels the entire window height */
  border:solid 0px white;
  display:block;
}

.red {
	background-color: #cf3535;
}

/* niveau 1 */
.blue {
	background-color:rgba(255,255,255,1);
  display: flex;
  min-height: 100vh;
}
.anim {
  display:block;
  width:85%;
  border:solid 0px black;
}
.animation-svg {
  margin-right:auto;
  margin-left:auto;
  display:block;
  width:55%;
  border:solid 0px green;
}
.texte {
  display: block;
  width: 100%;
  border:solid 0px red;
  background-color:rgba(255,255,255,1);
  line-height:140%;
}
.picto-resa {
  width: 100%;
  text-align: center;
  border:solid 0px red;
}
.picto-resa img {
  display: inline-block;
  width: 30%;
  max-width: 80px;
  margin-right: 1%;
  margin-left: 1%;
}
.rose {
  border:solid 0px red;
}
img .displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* niveau 2 */
.orange {
	background:url(../IMG/V19/interieur.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  -moz-background-size: cover; /* pour anciens Chrome et Safari */
  -o-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}
/* niveau 3 */
.red {
  background-color:rgba(255,255,255,1);
  display: flex;
  min-height: 100vh;
}
.conteneur {
  width: 85%;
  margin:auto;
  border:solid 0px yellow;
}
.bloc {
  width: 100%;
  border:solid 0px pink;
  text-align: left;
}
.titre {
  display: block;
  height: 15%;
  text-align: left;
  font-size: 2em;
  padding: 2%;
  border:solid 0px orange;
}

.titre img {
  display: inline-block;
  width: 50%;
  max-width: 90%;
  min-width: 100px;
  border:solid 0px green;
}


.reservation {
  border:solid 0px red;
  display:inline-block;
  width:100%;
}
.red h2 {
	color:rgba(0,0,0,1);
  font-size: 1em;
}
.red p {
	color:rgba(0,0,0,1);
	padding-bottom: .1%;
}
.courant {
  text-align: left;
}
.courant img {
  width: 10%;
  border:solid 0px red;
}
.rose {
  display: flex;
  min-height: 100vh;
}

.date {
max-height: 100%;
border:solid 0px green;
text-align: left;
margin-right: auto;
margin-left: auto;
}

.date li {
  list-style:square;
  border:solid 0px blue;
  width: 100%;
}
/* niveau 4 */
.grey {
  background:url(../IMG/V19/brune-opale.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  -moz-background-size: cover; /* pour anciens Chrome et Safari */
  -o-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}
/* niveau 5 */
.rose {
  background-color:rgba(255,255,255,1);
}

/* niveau 6 */
.noir {
  background:url(../IMG/V19/antoine.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  -moz-background-size: cover; /* pour anciens Chrome et Safari */
  -o-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}
/* niveau 7 */
.blanc {
  display: flex;
  min-height: 100vh;
background-color:rgba(255,255,255,1);
}
/* niveau 8 */
.jaune {
  background:url(../IMG/V19/vieux-port.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  -moz-background-size: cover; /* pour anciens Chrome et Safari */
  -o-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}
/* niveau 9 - VIDEO PAULINE*/
.jaune2 {
  background:url(../IMG/V19/lgv-07.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  -moz-background-size: cover; /* pour anciens Chrome et Safari */
  -o-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}

video#bgvid {
  
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
  background-size: cover;
}
.rouge {
  background-color:rgba(255,255,255,1);
    display: flex;
  min-height: 100vh;
}
/* niveau 10 */
.pink {
  background-color: white;
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  -moz-background-size: cover; /* pour anciens Chrome et Safari */
  -o-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}
/*
@media screen and (max-device-width: 800px) {
.pink { background: url(../IMG/V19/pauline.jpg) no-repeat center fixed; }
#bgvid { display: none; }
} */
/* niveau 11 */
.jaune3 {
  background:url(../IMG/V19/route-courtacon.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  -moz-background-size: cover; /* pour anciens Chrome et Safari */
  -o-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}

.vert {
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  -moz-background-size: cover; /* pour anciens Chrome et Safari */
  -o-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */

  border:solid 0px green;
}

/* niveau 12 - VIDEO */
.brune {
  background-color:rgba(255,255,255,1);
  display: flex;
  min-height: 100vh;

  border:solid 0px yellow;
}
.video-fond {
  display: block;
}
#video-fond {
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#video-fond > video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* niveau 13 */
.jaune4 {
  background:url(../IMG/V19/baignoire-friche.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  -moz-background-size: cover; /* pour anciens Chrome et Safari */
  -o-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}


/* niveau 15 */
.jaune5 {
  background:url(../IMG/V19/mrs-12.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  -moz-background-size: cover; /* pour anciens Chrome et Safari */
  -o-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}



/* 1. Pas de support d'object-fit */
@media (min-aspect-ratio: 16/9) {
  #video-fond > video {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  #video-fond > video {
    width: 300%;
    left: -100%;
  }
}
/* 2. En cas de support d'object-fit, écrase les règles en (1) */
@supports (object-fit: cover) {
  #video-fond > video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
  }
}



@media screen and (max-width: 640px){
/* niveau 1 */
.moreau,.fluide {
	width:100%;
}
.animation-svg {
  width:100%;
}
.titre img {
  width: 100%;
}
/* niveau 2 */
h2 {
  padding-top: 60px;
  font-size:2em;
  padding-left:2%;
  display:block;
  z-index:1000;
}

p {
	font-size:0.9em;
	line-height:130%;
  padding-left:2%;
}

.conteneur ul {
  width: 100%;
}
.date li {
  list-style:none;
  width: 100%;
}
}
@media screen and (orientation:landscape) {
  .animation-svg {
  width:50%;
  border:solid 0px green;
}
}

@media screen and (orientation:portrait) {
  .bloc {
    display:block;
    clear:both;
  }
}