/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* APERÇUS OU DIAPORAMA D'IMAGES */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

#apercus{
    width: 100%;
    height: 500px;
    margin: 0;
    background-size: cover;
    animation: fondu 10s ease-in-out infinite both;
    position: relative;
    display: flex;
    justify-content: center;
}

#apercus:hover{
    animation-play-state: paused;
    cursor: default;
} 

#div_rdv{
    padding: 30px;
    background-color: rgb(var(--couleur-5), 0.9);
    border: 2px solid rgb(var(--couleur-3));
    position: absolute;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
}

#div_rdv:hover{
    background-color: rgb(var(--couleur-5));
    cursor: pointer;
}

#div_rdv p{
    font-style: italic;
    font-size: 20pt;
    font-weight: bold;
    margin: none;
    text-align: center;
    color : rgba(var(--couleur-2));
}

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* SOLDES */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

#div_soldes{
    position: absolute;
    top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#div_soldes p{
    font-size: 16pt;
    color: rgb(var(--couleur-3));
    margin: 20px 0;
    text-align: center;
}

#img_soldes{
    animation: zoom_dezoom 2.5s infinite linear;
    padding: 20px 70px;
    background-color: #DE0613;
    color: white;
    font-size: 54pt;
    font-family: Brush Script MT, Brush Script Std, cursive;
}

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* CUISINE DU MOIS */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

#div_mois{
    width: 90%;
    max-height: 700px;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    column-gap: 20px;
}

#div_mois img{
    max-width: 95%;
    max-height: 95%;
    height: auto;
    width: auto;
    display: flex;
    align-self: center;
    justify-self: center;
    transition: all .2s ease-in-out;
}

#div_mois img:hover{
    transform: scale(1.1);
}

#div_mois div:not(#div_etoile){
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#div_mois div p:nth-child(1){
    color: rgb(var(--couleur-3));
    font-size: 30pt;
    margin-bottom: 10px;
}

#div_mois div p:nth-child(3){
    color: rgb(var(--couleur-2));
    font-size: 20pt;
}

#div_etoile{
    width: 100%;
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
}

#div_etoile div{
    width: 30px;
    height: 30px;
    border: none;
    background-color: rgb(var(--couleur-3));
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;

    transition: transform .7s ease-in-out;
}

#div_etoile div:hover{
    transform: rotate(360deg);
}

#etoiles img{
    width: 30px;
}

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* À PROPOS */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

#a_propos{
    width: 80%;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 1fr 45%;
    column-gap: 50px;
}

#a_propos p{
    text-align: center;
}

#qui_sommes_nous{
    font-size: 22pt;
}

.entete_presentation{
    color: rgb(var(--couleur-3));
    font-size: 22pt;
    margin: 0;
}

.contenu_presentation{
    font-size: 12pt;
    margin: 20px 0;
}

#infos_photo_equipes{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#infos_photo_equipes p{
    text-align: center;
}

#image_droite{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#image_droite img{
    max-width: 95%;
    max-height: 100%;
}

.banniere > div:nth-child(2) > p:nth-child(2) {
    color : rgba(var(--couleur-5));
}

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* CARROUSEL */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

#carrousel{
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    width: 85%;
    height: auto;
    margin: 60px auto;
}

#carrousel section{
    overflow: auto;
    overflow-x: scroll;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--couleur-2)) rgb(var(--couleur-4));
    cursor: grab;
}

#carrousel section ul{
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    
    pointer-events: none;
}

#carrousel section ul li:not(:last-child){
    margin-right: 20px;
}

#carrousel section ul li img{
    width: auto;
    height: auto;
    max-width: 500px;
    pointer-events: none;
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}

.chevrons_carrousel{
    max-width: 30px;
    height: auto;
    display: flex;
    align-self: center;
    justify-self: center;
}

/* Code importé */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
*, *:before, *:after {
  box-sizing: border-box;
}

.slider {
    width: 80%;
    margin: 0 auto 50px auto;
    
    
    height: 700px;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slider__nav {
  width: 12px;
  height: 12px;
  margin: 2rem 12px;
  border-radius: 50%;
  z-index: 10;
  outline: 6px solid rgb(var(--couleur-4));
  outline-offset: -6px;
  box-shadow: 0 0 0 0 rgb(var(--couleur-1)), 0 0 0 0 rgba(var(--couleur-1));
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.slider__nav:checked {
  -webkit-animation: check 0.4s linear forwards;
          animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
  left: 0%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
  left: -100%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
  left: -200%;
}

.slider__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%; /* 100% multiplié par le nombre d'images */
  height: 100%;
  -webkit-transition: left 0.4s;
  transition: left 0.4s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
}

/*
.slider__contents:first-child{
    
    background-color: aqua;
}*/

.slider__contents {
  height: 100%;
  padding: 2rem;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.image_carroussel{
    max-width: 100%;
    max-height: 150%;
    height: auto;
    width: auto;
}

@-webkit-keyframes check {
  50% {
    outline-color: rgb(var(--couleur-3));
    box-shadow: 0 0 0 12px rgb(var(--couleur-3)), 0 0 0 36px rgb(var(--couleur-3), 0.2);
  }
  100% {
    outline-color: rgb(var(--couleur-3));
    box-shadow: 0 0 0 0 rgb(var(--couleur-3)), 0 0 0 0 rgb(var(--couleur-3), 0);
  }
}

@keyframes check {
  50% {
    outline-color: rgb(var(--couleur-3));
    box-shadow: 0 0 0 12px rgb(var(--couleur-3)), 0 0 0 36px rgb(var(--couleur-3), 0.2);
  }
  100% {
    outline-color: rgb(var(--couleur-3));
    box-shadow: 0 0 0 0 rgb(var(--couleur-3)), 0 0 0 0 rgb(var(--couleur-3), 0);
  }
}

/* Fin du code importé */


/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* ÉQUIPE */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

#div_equipe{
    width: 60%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    margin: 0 auto;
}

.membre{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.membre img{
    width: 90%;
    height: auto;
    clip-path: circle(50% at 50% 50%);
    transition: clip-path 0.5s;
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
} 

.membre img:hover{
    clip-path: circle(75% at 50% 50%);;
}

.nom_membre{
    color: rgb(var(--couleur-4));
    font-size: 16pt;
    font-weight: bold;
    margin-bottom: 10px;
}

.metier_membre{
    color: rgb(var(--couleur-4));
    margin: 0 0;
    font-style: italic;
}

.infos_membre{
    visibility: hidden;
}

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* POPUP DEMANDE DE DEVIS */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

#arriere_popup{
    background-color: rgb(1, 1, 1, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    animation: fadeIn 0.2s ease-in;
}

#popup{
    position: fixed;
    width: 50%;
    background-color: rgba(119,150,178,0.8);
    z-index: 9;
    left: 25%;
    top: 10%;
    bottom: 10%;
    right: 25%;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgb(var(--couleur-1));
    animation: zoom_popup 0.5s linear;
    display : none;
}

#popup section{
    overflow: auto;
    height: 100%;
    scrollbar-color: rgb(var(--couleur-3)) rgb(1, 1, 1, 0);
    scrollbar-width: thin;

}

#popup form{
    display: grid;
    grid-template: "genre annuler" 
    "nom prenom"
    "tel mail"
    "objet objet"
    "horaires horaires"
    "valider valider";
    column-gap: 20px;
}

#genre{
    grid-area: genre;
    grid-column : span 2;
}
#annuler{
    grid-area: annuler;
    display: flex;
    justify-content: right;
    align-items: center;
}
#nom{
    grid-area: nom;
}
#prenom{
    grid-area: prenom;
}
#objet{
    grid-area: objet;
}
#tel{
    grid-area: tel;
}
#mail{
    grid-area: mail;
}
#horaires{
    grid-area: horaires;
}
#valider{
    grid-area: valider;
}

#popup form > label{
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14pt;
    color: rgb(var(--couleur-5));
    width: 100%;
}

#popup form > label > input, 
#popup form > label > textarea,
#popup form > label > select{
    font-size: 14pt;
    border-radius: 10px;
    border: 1px solid rgb(var(--couleur-1));
    background-color: rgb(var(--couleur-5));
    padding: 8px 20px;
    margin-top: 5px;
}

input[type=checkbox]{
    margin-left: 20px;
}

#bouton_annuler{
    background-color: #DE0613;
    border: 1px solid #DE0613;
    color: white;
    font-size: 14pt;
    border-radius: 10px;
    padding: 5px 10px;
}

#bouton_annuler:hover{
    cursor: pointer;
}

input[type=submit]{
    background-color: rgb(var(--couleur-2));
    border: 1px solid rgb(var(--couleur-5));
    color: rgb(var(--couleur-5));
    margin: 20px auto 0 auto;
    width: 50%;
    border-radius: 20px;
    padding: 8px 0;
    font-size: 14pt;
}

input[type=submit]:hover{
    color: rgb(var(--couleur-3));
    border: 1px solid rgb(var(--couleur-3));
}

#horaires table{
    border-collapse: collapse;
}

#horaires table tr td:first-of-type{
    width: 30%;
}


/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* ÉTAT DE LA DEMANDE DE DEVIS */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

#back_envoi_demande_devis{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    z-index: 900;
    animation: fadeIn 0.2s linear;
}

#envoi_demande_devis{
    width: 70%;
    display: grid;
    grid-template-columns: 60px 1fr;
    column-gap: 10px;
    padding: 5px;
    height: 60px;
    margin-top: 20px;
}

#envoi_demande_devis > div:first-of-type img{
    max-width: 60%;
    max-height: 60%;
}

#envoi_demande_devis p{
    color: white;
    margin: 0;
}

#envoi_demande_devis span{
    text-decoration: underline;
}

#envoi_demande_devis span:hover{
    cursor: pointer;
}

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* KEYFRAMES */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

@keyframes fondu{
    0%{
        background-image: url("../images/apercu_1.jpg");
    }
    100%{
        background-image: url("../images/apercu_2.jpg");
    }
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
    }
    @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes zoom_dezoom{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}

@-webkit-keyframes pulse {
    0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    }
    @keyframes pulse {
    0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes flip {
    0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    }
    40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    }
    50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    }
    80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    }
    100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    }
}
 
@keyframes flip {
    0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    }
    40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    }
    50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    }
    80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    }
    100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    }
}

@keyframes zoom_popup {
    0%{
        transform: scale(0)
    }
    100%{
        transform: scale(1);
    }
}

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* RESPONSIVE */

/* //////////////////////////////////////////////////////////////////////////////////////////// */

/* TAILLE 1 : Ordinateur et Tablette (paysage) 960px -> 1599px */

@media screen and (max-width: 1599px){
    
    #div_rdv{
        width: 60%; 
    }

    /* POPUP PRISE RDV */
    #popup{
        position: fixed;
        width: 80%;
        left: 10%;
        top: 10%;
    }
}

/* TAILLE 2 : Tablette (portrait) 768px -> 959px */

@media screen and (max-width: 959px){

    /* Cuisine du mois */

    #div_mois div p:nth-child(1){
        font-size: 24pt;
    }
    
    #div_mois div p:nth-child(3){
        font-size: 16pt;
    }
    
    /* Equipe */
    
    #div_equipe{
        width: 90%;
    }
    
    /* POPUP PRISE RDV */
    
    #label_plage{
        display: flex;
        flex-direction: column;
    }
       
    #bouton_annuler{
        font-size: 12pt;
    }

    #horaires table tr td:first-child{
        width: 30%;
    }

    .banniere > div {
        flex-direction: column;
        justify-content: unset;
    }

    .banniere > div > p {
        width : 100%;
    }
}

/* TAILLE 3 : Mobile max 767px */

@media screen and (max-width: 767px){
    
    /* Cuisine du mois */
    #div_mois{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-height: none;
    }

    #div_mois img{
        max-width: 70%;
    }

    /* Div rdv */

    #div_rdv h2{
        font-size: 20pt;
    }

    #div_rdv p{
        font-size: 16pt;
    }

    /* A propos de nous */
    #a_propos{
        width: 80%;
        margin: 50px auto;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    #image_droite{
        margin-bottom: 20px;
    }

    /* Carrousel */
    .slider{
        height: 500px;
    }

    /* Equipe */

    #div_equipe{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* POPUP PRISE RDV */

    #popup form{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #horaires table tr{
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: rgb(0, 0, 0, 0.3);
        margin-bottom: 20px;
        padding: 10px 0;
    }

    #horaires table tr td:first-child{
        width: 50%;
    }

    #horaires table tr td:nth-child(2){
        padding-left: 20px;
    }
}