@charset "utf-8";

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  padding: 0;
  margin: 0;
  background-color: #910012;
  color: #fffffc;
}

/* ---------------- PARALLAXE ---------------- */
#hero {
  height: 800px;
  overflow: hidden;
  position: relative;
}

#content {
  background-color: #910012;
}

.layer {
  background-position: bottom center;
  background-size: auto;
  background-repeat: no-repeat;
  width: 100%;
  height: 800px;
  position: fixed;
  z-index: -1;
}

#hero-mobile {
  display: none;
  background: url("../img/page-d-accueil/responsive.jpg") no-repeat center bottom/cover;
  height: 220px;
}

.first-section {
  padding: 10px 0 20px 0;

}

#hero,
.layer {
  min-height: 800px;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
}

.layer-bg {
  background-image: url("../img/page-d-accueil/ciel.jpg");
}

.layer-1 {
  background-image: url("../img/page-d-accueil/cafe.png");
  background-position: left bottom;
}

.layer-2 {
  background-image: url("../img/page-d-accueil/Nuage.png");
}

.layer-3 {
  background-image: url("../img/page-d-accueil/amelie.png");
  background-position: right bottom;
}

.layer-4 {
  background-image: url("../img/page-d-accueil/rouge.png");
  background-position: bottom;
}

.layer-overlay {
  background-image: url("../img/page-d-accueil/filtre.png");
}

.tutorial-link {
  color: #fffffc;
  font-size: 18px;
  text-decoration: underline;
}
.tutorial-link:hover {
  color: #ede0d5;
}

/* ---------------- CONTENUE DE LA PAGE ---------------- */
section{
  width: 80%;
  margin: auto;
  text-align: center;
}

.container {
  animation-name: fade;
  animation-duration: 1s;
  padding: 0 20px 20px 20px;
}

.box {
  background-color: #fffffc4d;
  border-radius: 1.5em;
  margin: auto;
  width: 90%;
  overflow: hidden;
  padding: 1em;
  font-size: large;
  box-shadow:
    -1px -1px 5px 0px #fff,
    7px 7px 20px 0px #0003,
    4px 4px 5px 0px #0002;
}

h1 {
  font-size: 2.3em;
  margin: 0;
  padding: 20px;
  font-family: 'Dream Orphans', sans-serif;
  text-align: center;
  letter-spacing: 1px;
}

h2 {
  color: #FFFFFC;
}


a {
  text-decoration: none;
  color: #FFFFFC;
}

a:hover {
  text-decoration: underline !important;
  color: #08952B;
}

/*---Police pour la navigation et les grands titres---*/
@font-face{
  font-family: 'Dream Orphans';
  src: url('../font/dream_orphans-webfont.woff'), url('../font/dream_orphans-webfont.woff2');
}

/* ----------- HEADER ----------- */
header {
  text-align: center;
  font-family: 'Dream Orphans', sans-serif;
  letter-spacing: 1px;
}

/* -----------NAVIGATION ----------- */
header nav {
  display: flex;
  background-color: #910012;
}

nav .icon {
  display: none;
}

nav .dropdown {
  position: relative;
  margin: 0%;
}

.dropdown .dropbtn {
  font-size: 18px;
  border: none;
  outline: none;
  color: #FFFFFC;
}

nav .dropdown .dropdown-content {
  position: absolute;
  background-color: #910012;
  box-shadow: 0px 8px 16px 0px #5c010c;
  display: none;
  z-index: 10;
}

nav .dropdown:hover .dropdown-content,
nav .dropdown-content:active .dropdown-content {
  display: block;
}

nav a {
  text-decoration: none;
  font-size: 18px;
  color: #FFFFFC;
  display: block;
  text-align: center;
  padding: 14px 20px;
}

.dropdown-content a {
  display: block;
  color: #FFFFFC;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #035918;
  color: #FFFFFC;
}

.dropdown-content a:hover {
  background-color: #035918;
}

/* ---------------- PHOTOS DU PHOTOMATON ---------------- */
.card1 {
  font-weight: bold;
  padding: 1em;
  text-align: right;
  display: inline-block;
  color: #181a1a;
  width:  300px;
  height: 400px;
  box-shadow: 0 1px 5px #00000099;
  margin: 10px 10px 10px 10px;
  border-radius: 10px;
  background-image: url("../img/page-d-accueil/photomaton1.jpg");
  background-size: cover;
  
  position: relative;
  
  transition-duration: 300ms;
  transition-property: transform, box-shadow;
  transition-timing-function: ease-out;
  transform: rotate3d(0);
}

.card2 {
  font-weight: bold;
  padding: 1em;
  display: inline-block;
  text-align: right;
  color: #181a1a;
  width:  300px;
  height: 400px;
  box-shadow: 0 1px 5px #00000099;
  margin: 10px 10px 10px 10px;
  border-radius: 10px;
  background-image: url("../img/page-d-accueil/photomaton2.jpg");
  background-size: cover;
  
  position: relative;
  
  transition-duration: 300ms;
  transition-property: transform, box-shadow;
  transition-timing-function: ease-out;
  transform: rotate3d(0);
}

.card1:hover,
.card2:hover {
  transition-duration: 150ms;
  box-shadow: 0 5px 20px 5px #00000044;
}

.glow1,
.glow2 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  
  background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f);
}

/* ----------- FOOTER ----------- */
footer {
  background-color: #910012;
  text-align: center;
  color: #FFFFFC;
  text-decoration: none;
  width: 100%;
  padding: 2px 10px 2px 10px;
}

footer a {
  text-decoration: none;
  color: #FFFFFC;
}

/*--- haut de page ---*/
.haut{
  text-align: center;
}

/*figer l ecran a 1280px*/
@media screen and (min-width: 1280px) {
  body {
    width: 1280px;
    margin: auto;
  }
}

/*responsive tablette*/
@media screen and (max-width: 769px) {
  .layer-1 {
    background-position: center bottom;
  }
}

/*responsive mobile*/
@media only screen and (max-width: 426px) {
  #hero {
    display: none;
  }

  #hero-mobile {
    display: block;
  }

  body{
    width: 100%;
  }

 
  header img {
    width: 70%;
  }

  /* On cache le menu horizontal */
  nav {
    display: none;
  }

  /* On active le menu responsive */
  .topnav {
    display: block;
    overflow: hidden;
    background-color: #910012;
    margin: auto;
  }

  .box{
    font-size: medium;
  }

  .topnav a {
    float: left;
    text-decoration: none;
    padding: 0.5em;
  }

  .topnav a:not(.icon),
  .topnav .dropdown {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
    text-align: end;
    padding: 5px 5px 0 5px;
    background: none;
  }

  .topnav.responsive a:not(.icon),
  .topnav.responsive .dropdown {
    display: block;
    position: relative;
  }

  .topnav.responsive .dropdown-content {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0%;
    z-index: 11;
    background: none;
    text-align: end;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}