/* Importation des Google-fonts en local telecharger et converti en WOFF*/


@font-face {
    font-family: "Tangerine";
    src: url(../fonts/Tangerine-Regular.woff) format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Merienda";
    /*chargement  de la font regular */
    src: url(../fonts/Merienda-Regular.woff) format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Satisfy";
    /*chargement  de la font regular */
    src: url(../fonts/Satisfy-Regular.woff) format("truetype");
    font-weight: normal;
    font-style: normal;
}
/*declaration des variables de couleur */
:root {
    --taupe: #ebe3db;
    --marron: #915f42;
    --rouge: #800000;
    --bleu: #009DE0;
}
/* *****************************************************************
                            GENERAL
***************************************************************** */
* {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    margin:0;
    padding:0;
}

img {
    max-width: 100%;
}

body {
    background: white;
    font-size: 1.6rem;
    font-family: "Merienda";
    
}

h1,
h2,
h3,
h4,
figcaption,
caption,
th{
    font-family: 'Tangerine';
    font-weight: bold;

}

h1 {
    font-size: 3em;
    text-align: center;
    color: var(--rouge);
}

h2,
figcaption{
    font-size: 2.5em;
    text-align: center;
    color: var(--rouge);
}

h3 {
    font-size: 2.5em;
    color: var(--bleu);
}


ul{
    list-style: none;
    padding:0;
    margin:0;
}
a{
    text-decoration:none;
}
em{
    font-family: "Satisfy";
    font-size: 1.8rem;
    font-weight:bold;
    color:var(--marron);
}
strong{
    font-family: "Satisfy";
    font-size: 1.8rem;
    font-weight:bold;
    color:var(--rouge);
}
span{
    font-style: italic;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--marron);
}

/*● pas de ! important (sauf exceptionnellement dans un framework)
   ce important represente la bordure du iframe de google map qui est noir par defaut
*/
iframe {
    border:3px solid var(--bleu)!important;
    min-width: 40%;
}
.intro {
    font-family: "Tangerine";
    font-size:2.4rem;  
    text-align:center;
    background-color: white;
    font-weight:bold;
    color:var(--marron);
    padding:1em;
}
.red{
    font-family: "Satisfy";
    font-size: 1.8rem;
    font-weight:bold;
    color:var(--rouge);
}
.rel{
    position:relative;
}

.clear {
    clear: both;
}
.hidden {
    opacity:0;
}
.right {
    float: right;
    padding-top:1em;
    padding-bottom:1em;

}
.left {
    float: left;
    padding-top:1em;
    padding-bottom:1em;
  
}
.container {
    max-width: 100%;
    margin: 0 auto;
}
/* *****************************************************************
                            FLASH MESSAGE
***************************************************************** */
.success{
    color:white;
    background-color:rgba(87,213,59,0.6);
    padding:2em;
}
.danger{
    color:white;
    background-color:rgba(187,11,11,0.6);
    padding:2em;
}
.warning{
    color:white;
    background-color:rgba(253,106,2,0.6);
    padding:2em;
    
}
/* *****************************************************************
                            font-awesome
***************************************************************** */
em.avisPosHeart{
   
    position: absolute;
    top: 2rem;
    left: 2rem;
    color: var(--taupe);
    
}
em.avisPosHeartComment{
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    color: var(--marron);
    
}
.fa-user-circle{
    color:var(--rouge);
    font-size:3rem;
    padding:0.5em;
  
    
}
.fa-heart,
.fa-cart-plus{
    color:var(--rouge);
    font-size:5rem;
}

.fa-search-location {
    padding:0.5em;
    font-size:1.6em;
    color: #333;
    background-color: rgba(235, 227, 219,0.7);
}
.fa-level-up-alt{
    font-size:2.6rem;
    padding:1em;
}

.fa-at,
.fa-phone-alt,
.fa-envelope,
.fa-info{
    padding-right:0.5em;
    
}

.fa-thermometer-half,
.fa-tint,
.fa-wind,
.fa-tachometer-alt,
.fa-cloud,
.fa-cloud-rain,
.fa-snowflake,
.fa-sun,
.fa-cloud-showers-heavy,
.fa-cloud-sun{
    font-size:2em;
}

.fa-plane-arrival,
.fa-plane-departure{
    padding-right:0.5em;
    font-size:1.6em;
}
/* *****************************************************************
                            HEADER
***************************************************************** */

.banner-header {
    text-align: center;
    width: 100%;
    background-image: url(../img/images/banner-header.jpg);
    background-position: center;
    background-size: cover;

}

.banner-header h1 {
    background-color: rgba(255, 255, 255, 0.6);
    width: 100%;
    text-align: center;
    line-height: 1.6em;
}


/* *****************************************************************
                        NAV
***************************************************************** */

.curse{
    background-color:var(--marron);
    color:var(--taupe);
}

/* HEADER*/

header nav li {
    border-bottom: 1px solid var(--marron);
}
header nav li li {
    border-bottom: none;
}

header nav li:last-child {
    border-bottom: none;
}

header nav a {
    display: inline-block;
    width: 100%;
    font-weight: bold;
    padding: 0.5em 1em;
    background-color: var(--taupe);
    color: var(--rouge);
    transition: all .7s linear;
}

header nav a:hover,
header nav a:focus,
.nav-auth a:hover,
.nav-auth a:focus{
    background-color: var(--rouge);
    color: var(--taupe);
}

header nav a.active {
    background-color: var(--marron);
    color: white;
}
.menu ul  {
    padding-bottom:7em;
}

.menu ul li ul a{
    border-bottom:1px solid white;
    background-color: rgba(235, 227, 219,0.5);
    width:80%;   
    }
.menu ul li ul {
    /* on masque le sous menu avec none*/
    /* absolute pour éviter d'agrandir le fond de la nav*/
    display:none;
     right:0;
     left:0;
    position:absolute;
}
.menu ul li:hover > ul {
    display: block;
 
}

/*NAv auth + devis + contacter nous*/
.nav-auth {
    display:flex;
    white-space: nowrap;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
}
.nav-auth li,
.nav-auth li:last-child{
    border-bottom: none;
}
  
.nav-auth li a{
    display: block;
    font-weight: bold;
    padding: 0.5em 1em;
    background-color: rgba(235, 227, 219,0.5);
    transition: all .7s linear;
    color:var(--rouge);
}
 .nav-auth li:nth-child(1){
    width:20%;
}
.nav-auth li:nth-child(2){
    width:20%;
}
.nav-auth li:nth-child(3){
    width:60%;
}
.fa-pencil-alt{
    transform: translateX(-100%) rotate(270deg)

}
.fa-user{
    transform: translateX(-50%) rotate(0deg)
}

.fa-cart-arrow-down{
    transform: translateX(-50%) rotate(0deg)
}

/*nav Ancre*/
.ancre {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
}
.ancre li,
.ancre li:last-child{
    border-bottom: none;
    list-style:none;
}
  
.ancre li a{
    display: block;
    font-weight: bold;
    background-color: rgba(235, 227, 219,0.5);
    transition: all .7s linear;
    color:var(--rouge);
    
}



/*DESCRIPTION*/
    .description p{
        padding-left:1em;
        padding-right:1em;
    }
    
    .description img {
        max-width:100%;
        padding:1em;
    }
    .description iframe{
        margin:1em;
    }

.description h3 {
   text-align: center;
    
}
.description ul {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    background-color: var(--taupe);
}
.description nav{
    padding:5em;
}
.description ul li {
    width: 100%;
    /*float: left;*/
    border-bottom: 1px solid var(--bleu);
}
.description li:last-child {
    border-right: none;
    border-bottom:none;
}
.description li:nth-child(4) {
    border-right: none;
}
.description li a {
    display: block;
    color: var(--rouge);
    font-weight:bold;
    text-align: center;
    padding: 1em 1.5em;
    text-decoration: none;
}

.description li a:hover:not(.active) {
    background-color: var(--rouge);
    color: white;
}
.nav-description{
    color:var(--bleu);
 
}

/* *****************************************************************
                        MAIN 
***************************************************************** */

/*circuit.php*/
    .circuit{
        text-align:center;
    }
    
    .creme {
        background-color: var(--taupe);
    }
    .blanc {
        background-color: white;
    }
/*****pour cacher le surplus de text  en mettant ... a la fin et laisser un suspence **/
    .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .radius{
        border-radius:75%; 
    }
    .circuit figure {
        position: relative;
        padding: 0;
    }
/***definit la façon dont le contenu d'un élément remplacé  doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur ***/
.circuit img {
    width: 100%;
    display: block;
    object-fit: cover;
}
.circuit figcaption {
    /*********pour fixer le flitre sur mon image avec la position absolu et les valeur a 0 et le cacher avec opacité***/
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background-color: rgba(255, 255, 255,0.5);
    /***pour center le span a l'interieur  du hover**/
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s all;
}
/********** span a l'interieur du hover**********************/
.circuit figcaption a {
    text-decoration: none;
    font-size: 1.5rem;
    font-style: italic;
    color: white;
}

/*************Bordure a l'interieur du hover ****************/
.circuit figcaption::after {
    content: "";
    position: absolute;
    right: 3rem;
    left: 3rem;
    top: 3rem;
    bottom: 3rem;
    border: 3px solid white;
}
/********Pour faire apparraitre mon span en passant son opacité de 0 a 1 ****/

.circuit figure:hover figcaption {
    opacity: 1;
}
.circuit strong {
        font-size:1.8rem;
    }
.heartRight{
        display:flex;
        align-items: flex-end;
        position:absolute;
        font-family: "Satisfy";
        font-size: 1.8rem;
        font-weight:bold;
        color:var(--marron);
        background-color:white;
        border:1px solid var(--marron);
        padding:0.5rem;
        right: 0;
    }
    .heartLeft{
        display:flex;
        align-items: flex-end;
        position:absolute;
        font-family: "Satisfy";
        font-size: 1.8rem;
        font-weight:bold;
        color:var(--marron);
        background-color:white;
        border:1px solid var(--marron);
        padding:0.5rem;
        left:0;
    }
    .selectQuantity{
        position:relative;
        padding:2em;
        display:flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
     .selectQuantity label{
        width:100%;
        margin:1em;
     }
      .selectQuantity div{
        padding: 2em;
        width:100%; 
     }
    input.nbrAdult{
        width:100%;
       
    }
    input.nbrChild{
        width:100%;
       
    } 
/* *****************************************************************
                        AVIS COMMENTAIRE
***************************************************************** */ 
.avis{
    border: 2px solid var(--bleu);
    padding:2em;
    margin-bottom:2em;
}

.avisForm fieldset{
    display: flex;
    flex-direction:column;
    width:100%;
    border:2px solid var(--bleu);
    vertical-align:top;
    margin:1em 0em;
}
.avisForm  div{
    display: flex;
    flex-direction:column;
    padding: 0.5em;
}
.avisForm  div:nth-child(5){
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.avisForm label{
    width:100%;
}
.avisForm input{
    width:100%;
}
.avisForm textarea{
    width:100%;
}
.avisForm button{
     margin: 0.5em;
    padding: 0.5em;
    color: var(--marron);
    border: 2px solid var(--rouge);
    background-color: white;
    width: 100%;
    text-align: center;
}
.avisForm button:hover{
    margin: 0.5em;
    padding: 0.5em;
    color: var(--taupe);
    border: 2px solid var(--rouge);
    background-color: var(--rouge);
    width: 100%;
    text-align: center;
}    
    
.avisForm legend {
    color:var(--bleu);
    font-size:2.5em;
    font-family: 'Tangerine';
    padding-bottom: 0.5em;
}

.avisFlexHeart{
    display:flex; 
    justify-content: center;
}
div.btnAvisFlex {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2em;
}
div.btnAvis {
    margin: 0.5em;
    padding: 0.5em;
    color: var(--marron);
    border: 2px solid var(--rouge);
    background-color: white;
    width: 100%;
    text-align: center;
}
.pagination {
    text-align:center;
}
.pagination a:last-child{
    font-style: italic;
    font-size: 1.6rem;
    font-weight: bold;
    color:var(--bleu);
}    
/* ******************************************************* 
                         SLIDER REGION                   
 ******************************************************* */
.prev {
    opacity:0;
}
.next {
    opacity:0;
}
/* ******************************************************* 
                         SLIDER circuit                   
 ******************************************************* */ 
 
    .box-slider-circuit  {
        max-width: 100%;
        margin: 0 auto;
        background: var(--taupe);
        box-shadow: 1rem 1rem 2rem rgba(0,0,0,0.7);
        will-change: transform; 
        margin-bottom: 5em;
    }
    .box-slider-circuit .slider-figure {
        max-width: 100%;
        display: none;
        will-change: transform;
    }
    .box-slider-circuit .slider-figure.active {
      display : block;
    }
    .fig-circuit{
        max-width: 100%;
        padding: 0;
        margin: 0;
        margin-top: 0;
        border-radius: unset;
    }
  
   .slider-circuit-img {
      width:100%;
    }
    .slider-circuit-dots {
    position: absolute;
    left: 25%;
    z-index: 5;
    padding: 0;
    }

    .slider-circuit-dots li {
      display : inline-block;
      width : 2rem;
      height : 2rem;
      margin : 0.5rem;
      padding : 0;
      background-color : white;
      border : 2px solid  white;
      box-shadow : 0.5rem 0.5rem 1rem rgba(0,0,0,0.8);
      cursor : pointer;
    }


    .slider-circuit-dots li:hover {
      background-color : var(--bleu);
      border-color : var(--bleu);
    }
    
    .slider-circuit-dots li.selected {
      background-color : var(--bleu);
    }
    
    .partie-left{
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        z-index: 3;
    } 
    .partie-right{
       display: none;
       
    }  

/* *****************************************************************
                       CANVAS
***************************************************************** */   
 /*nav canvas*/
.menu-circuit {
    display:none;
}
.container-excursion {
    display:none;
}    
/* *****************************************************************
                       GRID
***************************************************************** */
.grid {
    display:none;
}

.button-close{
    opacity:0;
}
/************************************************************************
                           Form
**************************************************************************/
/***exterieur***/
    .devis h3{
         font-size:2em;
         text-align:center;
    }
    .form-devis,
    .form-auth{
        display: flex;
        flex-direction:column;
        width: 100%;
        justify-content: center;
        padding: 2em;
        
    }
    .form-devis fieldset,
    .form-auth fieldset
    {
        width:100%;
        border:2px solid var(--bleu);
        background-color: var(--taupe);
        color:var(--rouge);
        vertical-align:top;
        margin:1em 0em;
    }
/***interieur***/
    .form-devis legend,
    .form-auth legend{
        color:var(--bleu);
        font-size:2.5em;
        font-family: 'Tangerine';
        padding-bottom: 0.5em;
    }
    .center-btn-devis{
        display:flex;
        justify-content:center;
    }

    .btn-devis,
    .btn-formDevis,
    .btn-login,
    .btn-logout,
    .btn-register{
        padding: 1em;
        border: 2px solid var(--bleu);
        background-color: var(--taupe);
        color: var(--rouge);
    }
    
    .btn-formDevis{
    width: 100%;
    font-size: 2rem;
    margin-top: 1em;
    }
    .form-devis span{
        font-style:italic;
        font-size:1.2rem;
        font-weight:bold;
        color:var(--marron);
    }

    .voyage {
        display: flex;
        flex-wrap: wrap;
      
    }
    .voyage div{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
       
    }
    .voyage div:last-child{
        width:100%;
    }

    .information {
        display: flex;
        flex-wrap: wrap;
       
    }
    .information div{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
    }
    .voyage div:nth-child(3){
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .information div:nth-child(6){
         width:100%;
    }
    
    label{
        text-align: center;
        width: 85%;
        padding: 0.5em;
    }
    input{
        width: 85%;
        border: 1px solid var(--marron);
        border-radius:0.5em;
        padding:1em;
        font-size:1.6rem;
        color:#333;
        background-color: white;
    }
    input[type="checkbox"]{
        width: 20%;
        border: 1px solid var(--marron);
    }
    textarea{
        width:85%;
        justify-content:center;
        min-height:10em;
        border: 1px solid var(--marron);
        border-radius:0.5em;
       padding:1em;
    }
    select{
        width:85%;
        min-height:3em;
        border: 1px solid var(--marron);
        border-radius:0.5em;
       padding:1em;
        font-size:1.6rem;
    }
/*infoPratique.php*/
/*quandpartir*/
.box{
    max-width: 80%;
    padding: 1em;
    margin: 0 auto;
    margin-top: 5em;
    border-radius: 1em;
    background: var(--taupe);
    box-shadow: 1rem 1rem 2rem rgb(0 0 0 / 70%);
    will-change: transform;

}
/*infoPratique*/
/*quandpartir*/
.box a{
    color:var(--rouge);
    font-size:1.6rem;
    font-family:italic;
}

.box-season{
    max-width: 80%;
    padding: 1em;
    margin: 0 auto;
    border-radius: 1em;
    border:2px solid var(--taupe);
    background-color: rgba(235, 227, 219,0.7);
    box-shadow: 1rem 1rem 2rem rgb(0 0 0 / 70%);
    will-change: transform;
    font-family: italic; 
    font-weight: bold;
    text-align:center;
}
.banner-spring{
    width: 100%;
    padding:2em;
    background-image: url("../img/galerie/bgi-spring.jpg");
    background-position: center;
    background-size: cover;
}
.banner-summer{
    width: 100%;
    padding:2em;
    background-image: url("../img/galerie/bgi-summer.jpg");
    background-position: center;
    background-size: cover;
}
.banner-autumn {
    width: 100%;
    padding:2em;
    background-image: url("../img/galerie/bgi-autumn.jpg");
    background-position: center;
    background-size: cover;
}
.banner-winter {
    width: 100%;
    padding:2em;
    background-image: url("../img/galerie/bgi-winter.jpg");
    background-position: center;
    background-size: cover;
}
.banner-weather {
    width: 100%;
    padding:2em;
    background-image: url("../img/galerie/bgi-weather1.jpg");
    background-position: center;
    background-size: cover;
    
}
.form-weather {
        text-align:center;
}
.form-weather input {
        width: 60%;
        border: 1px solid var(--taupe);
        border-radius:0.5em;
        padding:1em;
        font-size:1.6rem;
        color:#333;
        background-color: var(--taupe);
}

.box-container-weather {
    display:flex;
    flex-wrap:wrap;
    flex-direction: row;
    justify-content: center;
}

.box-weather {
    width: 40%;
    height: 150px;
    margin: 0.5em 0.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
}
.box-weather-forecast {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.city,
.humidity,
.temp,
.wind,
.weather,
.pressure {
    background-color: rgba(235, 227, 219,0.7);
    border-radius:1.5rem;
    padding:2em;
    color:var(--rouge);
}
.dateDay {
    color: var(--taupe);
    font-size: 1.6rem;
    font-family: 'Open';
    margin-left: 0.5em;
}
.forecast {
    background-color: rgba(235, 227, 219,0.7);
    border-radius:1.5rem;
    color: var(--rouge);
    padding:1em;
    margin: 1em;
    width:15rem;

}
.searchCity {
    text-align:center;
}
/*quoifaire.php*/
.quoi-faire {    
    display:flex;
    flex-direction: column;
}
.quoi-faire>article {
    max-width: 80%;
    width:100%;
    padding: 1em;
    margin: 0 auto;
    margin-top: 5em;
    border-radius: 1em;
    background: var(--taupe);
    box-shadow: 1rem 1rem 2rem rgb(0 0 0 / 70%);
    will-change: transform;
}
.quoi-faire h3 {
    text-align:center;
    width:100%;
}
.quoi-faire img {
    width:100%;
}
/*contact.php*/
.contact{
    display:flex;
    flex-direction:column;
    
}
.contact .box{
    width:100%;
    padding:1em;
}
.contact span{
    font-size: 1.2rem;
}
/* *****************************************************************
                            PANIER
***************************************************************** */
.cartFlexBtn div.btn{
     margin: 1em 2em;
    padding: 0.5em;
    color: var(--marron);
    border: 2px solid var(--rouge);
    background-color: white;
    text-align: center;
}
.cartFlexBtn div.btn:hover{
    margin: 0.5em;
    padding: 0.5em;
    color: var(--taupe);
    border: 2px solid var(--rouge);
    background-color: var(--rouge);
    text-align: center;
} 
.cartFlex{
    display: flex;
    flex-direction: column;
    align-items: center
}
    .cartFlex p.supprimer{
        width: 100%;
        text-align: center;
       
    }
    
    .cartFlexTotalPrice{
        width: 100%;
        text-align: end;
        
    }


.cartFlexBtn{
        text-align: center;
}
.cartFlex strong{
    padding:0em 2em;
}
.cartFlexBtn input.btn {
    margin: 0.5em;
    padding: 0.5em;
    color: var(--marron);
    border: 2px solid var(--rouge);
    background-color: white;
    text-align: center;
    font-family: "Satisfy";
    font-size: 1.8rem;
    font-weight: bold;
    border-radius:0;
}
.cartFlexBtn input.btn:hover {
    margin: 0.5em;
    padding: 0.5em;
    color: var(--marron);
    border: 2px solid var(--rouge);
    background-color: var(--rouge);
    text-align: center;
    font-family: "Satisfy";
    font-size: 1.8rem;
    font-weight: bold;
    border-radius:0;
}
.cart h3 {
    width:100%;
    padding:0;
    text-align: center;
    text-decoration: underline solid var(--marron);
}
/* *****************************************************************
                            PAIEMENT
***************************************************************** */
.paiement-form button{
    margin: 1em;
    padding: 0.5em;
    color: var(--marron);
    border: 2px solid var(--rouge);
    background-color: white;
}
.paiement-form button:hover{
    margin: 1em;
    padding: 0.5em;
    color: var(--taupe);
    border: 2px solid var(--rouge);
    background-color: var(--rouge);
}   
.paiement-form fieldset{
    display: flex;
    flex-direction:column;
    border:2px solid var(--bleu);
    vertical-align:top;
    margin:1em 0em;
}
.paiement-form input{
    
    margin-bottom: 1em;
}
.paiement-form legend{
    color:var(--bleu);
    font-size:2.5em;
    font-family: 'Tangerine';
    padding-bottom: 0.5em;
}


.errorsCb{
    font-family: "Satisfy";
    font-size: 1.8rem;
    font-weight:bold;
    color:var(--rouge);   
}
/************************************************************************
*                                      FOOTER
**************************************************************************/
/******************************Slider*************************************/
.sliderfooter {
    background-color: white;
    height: 25rem;
    position: relative;
    width: 100%;
    overflow: hidden;
}
/*width = le totale des slides (10*2=20) * largeur (250px)*/
.slide-trackfooter {
    display: flex;
    width: calc(25rem * 20);
    /*lance le deroulement du slider*/
    /*          nom , vitesse , function, iteration*/
    /*animation:hidden 90s linear infinite;*/
    animation-name: hidden;
    animation-timing-function: linear;
    animation-duration: 90s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
}   
@keyframes hidden {
    0% {
        transform: translateX(0);
    }
    100% {
            transform: translateX(calc(-25rem * 10));
        }
    }

.slidefooter {
    height: 20rem;
    width: 20rem;
    display: flex;
    align-items: center;
    padding: 0 5rem;
    /*pour faire venir l'image vers nous je utilise perspective sur le container des slides*/
    perspective: 10rem;
}
.slidefooter img {
    width: 100%;
    /*temps de durée pour faire la transition de limage vers nous*/
    transition: transform 1s;
}
.slidefooter img:hover {
    /*comme translateZ ne fonction pas seul je dois utiliser perspective sur lecontainer*/
    transform: translateZ(4rem);
}
/*************************picto *************************************/
.reseausociaux {
    display: flex;
    justify-content:center;
    flex-wrap: nowrap;
    background-color: var(--taupe);
    padding:1em;
    z-index: 1;
}
/*pour selectioner les 4 premiere  div sans toucher la div bg*/
.reseausociaux div:nth-child(-n+4) {
    width: 25%;
    text-align: center;
}
.reseausociaux img {
    width: 6rem;
}
/******************************aside footer ***********************************/
footer {
    display: flex;
    flex-wrap:nowrap;
    flex-direction:column;
    justify-content: center;
    width: 100%;
    background-color: var(--rouge);
    color: white;
}
footer aside {
    width: 30%;
    padding: 1em;
}
footer a,
footer aside em{
    color:var(--bleu);
}

footer aside:last-child {
    width:100%;
    font-size:1.2rem;
}
 
footer aside{
    width:100%;
    text-align: center;
    border-bottom: 2px solid var(--bleu);
}
.btn-news{
    margin-right:0.5em;
    padding: 1em;
    border: 2px solid var(--bleu);
    background-color: var(--taupe);
   
}
.newsletter span {
    font-size: 1rem;
}
.newsletter div {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom:0.5em;
}
.newsletter img {
        width: 5rem;
}
.input {
    display: flex;
    align-items: baseline;
}
.newsletter input[type=submit] {
    background-color: #009DE0;
    color: white;
    padding: 1em 0em;
    position: relative;
    left: -0.5rem;
    width: 30%;
}
.newsletter input[type=text] {
    background-color: white;
    color: #915f42;
    width: 70%;
    padding: 0.5em;
}    
/* ****************************************************************
VERSION TABLETTE
***************************************************************** */
@media screen and (min-width: 480px){

/* *****************************************************************
                            GENERAL
***************************************************************** */
    .right {
        padding-left: 1em;
    }
    .left {
        padding-right: 1em;
    }
/* *****************************************************************
*                        HEADER
***************************************************************** */
    .banner-header {
        padding-bottom: 3em;
    }
/* ****************************************************************
*                         NAV
***************************************************************** */
    /* HEADER*/
    header nav > ul {
        display: flex;
        flex-direction: column;
        flex-wrap:wrap;
        align-content: center;
    }
    header nav a {
        padding: 0.5em 3em;
    }
    
   
    .menu ul li ul {
        display:none;
        position:absolute;
    }
    .menu ul li ul a{
    width:28%;   
    }
    .menu ul li:hover ul {
        display: block;
        
    }
    .nav-auth {
        display:flex;
        transform: translate(43%,280%) rotate(90deg);
        white-space: nowrap;
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        z-index: 40;
    } 
    .fa-user {
        transform: translateX(-50%) rotate(270deg)
    }
    .fa-cart-arrow-down{
        transform: translateX(-50%) rotate(270deg)
    }
/*DESCRIPTION*/
    .description p{
        padding-left:2em;
        padding-right:2em;
    }
    .description nav {
        padding: 0em 0em 5em 0em;
    }
    .description img {
        max-width:50%;
        padding:2em;
    }
    .description iframe{
        margin:2em;
    }
    
    .description nav {
        padding: 0em 0em 5em 0em;
    }
  
    .description ul {
        list-style-type: none;
        text-align: center;
        margin: 0;
        padding: 0;
        width: 100%;
        overflow: hidden;
        background-color: var(--taupe);
    }
    .description ul li {
        width: 25%;
        float: left;
        border-right: 2px solid var(--bleu);
        border-bottom: none;
    }
    .description li:last-child {
        border-right: none;
    }
    .description li:nth-child(4) {
        border-right: none;
    }
    .description li a {
        display: block;
        color: var(--rouge);
        font-weight:bold;
        text-align: center;
        padding: 1em 1.5em;
        text-decoration: none;
    }
    .description li a:hover:not(.active) {
        background-color: var(--rouge);
        color: white;
    }
    .nav-description {
        color:var(--bleu);
    }
/* *****************************************************************
                        MAIN 
***************************************************************** */
/*index.php*/
   
    .right-iframe {
        padding:0;
        float:right;
        margin-left:2em;
        margin-bottom:2em;
        width:425px;
        height:350px;
    }
    .left-iframe {
        padding:0;
        float:left;
        margin-right:2em;
        margin-bottom:2em;
        width:425px;
        height:350px;
    }
/*circuit.php*/
    .divCircuit {
        text-align:left;
    }
    .circuit strong {
        font-size:2.2rem;
    }
    .circuit figure {
        width:50%;
    }
    .creme {
       padding:0;
    }
    .blanc {
      padding:0;
    }
    .border{
        position:absolute;
        border-top:2px dashed var(--marron);
         border-bottom:2px dashed var(--marron);
        border-left:2px dashed var(--marron);
        border-radius: 25%;
    }
    .itineraire{
    position:relative;    
    display:flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;

    }
 
/* *****************************************************************
                        AVIS COMMENTAIRE
***************************************************************** */  
  
    .avisForm  div{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .avisForm  div:nth-child(5){
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        flex-wrap: nowrap;
    
    }
    .avisForm label{
        width: 40%;
    }
    .avisForm textarea{
        width: 60%;
    }
    .avisForm input{
        width: 60%;
    }
    .avisForm button{
        width: 20%;
    }
    .avisForm button:hover{
        width: 20%;
    }       
    .avis{
        margin-bottom:5em;
        
    }
    .avisFlexHeart {
        justify-content: space-between;
        padding-right: 5em;
    } 
    
    div.btnAvisFlex {
        display: flex;
        flex-direction: row; 
        justify-content: flex-end;
    }
    div.btnAvis{
        width: 20%;
    }
    div.btnAvis:hover{
        width: 20%;
    }
    
     
/* *****************************************************************
                       CANVAS
***************************************************************** */   
 /*nav canvas*/ 
    .menu-circuit ul {
        list-style-type: none;
        margin: 0;
        padding: 0.5em;
        background-color: var(--taupe);
    }
    
    .menu-circuit li a {
        display: block;
        color:var(--bleu);
        font-weight:bold;
        padding: 1em 1em;
        text-decoration: none;
        text-align: center;
    }
    
    .menu-circuit li a:hover {
        background-color: var(--rouge);
        color: white;
    }
 
    .sticky{
        position:sticky;
        z-index:60;
        top:0;
    }
         nav.nav-circuit{
        width:20%;
    }
    .canvas-circuit{
        max-width:80%;
       
    }
   .menu-circuit{
        display: flex;
        border: 2px solid var(--bleu);
        border-radius: 1em;
        background: var(--taupe);
        box-shadow: 1rem 1rem 2rem rgb(0 0 0 / 70%);
   }
/* ******************************************************* 
                         SLIDER REGION                   
 ******************************************************* */
    .slider-region-img {
      width:100%;
    }
    .slider-region {
      position : relative;
    }
    .slider-figure {
        max-width: 80%;
        display: none;
        padding: 1em;
        margin: 0 auto;
        margin-top: 5em;
        border-radius: 1em;
        background: var(--taupe);
        box-shadow: 1rem 1rem 2rem rgb(0 0 0 / 70%);
        will-change: transform;
    }
    .slider-figure em {
        color:var(--marron);
        font-size:1.6rem;
    }
    .slider-figure.active {
      display : block;
    }
    .slider-region {
      border-radius : 1em;
    }
    .slider-title {
      position : absolute;
      left : 1rem; 
      right :1rem; 
      top : 1rem;
      padding : 2rem;
      background : rgba(235, 227, 219, 0.5);
    }
    .next, .prev {
      position : absolute;
      top: 3rem;
      padding: 0rem 10rem;
      font-size : 3em;
      color:var(--rouge);
    }
    .prev {
        opacity:1;
        left: 1rem;
    }
    .next {
        opacity:1;
        right: 1rem;
    }
    .next:hover,
    .prev:hover {
     color : var(--taupe);
    }
    
/* ******************************************************* 
                         SLIDER circuit                   
 ******************************************************* */ 
 
 
    .box-slider-circuit  {
        max-width: 80%;
        padding: 1em;
        margin: 0 auto;
        background: var(--taupe);
         box-shadow: 1rem 1rem 2rem rgba(0,0,0,0.7);
        will-change: transform; 
        margin-bottom: 5em;
    }
    .fig-circuit{
        max-width: 100%;
        padding: 0;
        margin: 0;
        margin-top: 0;
        border-radius: unset;
    }
  
   .slider-circuit-img {
      width:100%;
    }
    .slider-circuit-dots {
    position: absolute;
    left: 30%;
    bottom: 0;
    z-index:5;

    }

    .slider-circuit-dots li {
      display : inline-block;
      width : 2rem;
      height : 2rem;
      margin : 0.5rem;
      padding : 0;
      background-color : white;
      border : 2px solid  white;
      box-shadow : 0.5rem 0.5rem 1rem rgba(0,0,0,0.8);
      cursor : pointer;
    }


    .slider-circuit-dots li:hover {
      background-color : var(--bleu);
      border-color : var(--bleu);
    }
    
    .slider-circuit-dots li.selected {
      background-color : var(--bleu);
    }
    
    .partie-left{
        position: relative;
        margin: 0;
        padding: 0;
        width: 70%;
        z-index: 3;
    } 
    .partie-right{
       display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
        height: 100%;
        background-color: var(--bleu);
        padding-right: 1em;
        align-items: flex-end;
        z-index: 2;
    }  
    .partie-right >span{
        padding: 2rem;
        color:var(--taupe);
    }
   
   
     .selectQuantity label{
        width:40%;
        
     }
      .selectQuantity div{
        position:absolute;
        padding: 0em;
        width:100%; 
     }
    input.nbrAdult{
        width:30%;
       
    }
    input.nbrChild{
        width:30%;
       
    }
/* *****************************************************************
                       GRID
***************************************************************** */
	.grid {
		display: grid;
		grid-template-rows: repeat(10, 1fr);
		grid-template-columns: repeat(18, 1fr);
		grid-gap: 1rem;
		max-width: 80vw;
		max-height: 45vh;
		margin: 0 auto;
		padding:2em;
    	margin: 5em;
        border-radius : 1em;
        background :var(--taupe);
        box-shadow: 1em 1em 2em rgba(0,0,0,0.7);
        will-change: transform;
	}
	.grid [class*="photo"] {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.grid img {
        border:2px solid var(--rouge);
        max-width:100%;
        height:auto;
        align-self:stretch;
     }
	/*row-start / col-start / row-end / col-end */
	.grid .photo-1 {
	    grid-area: 1 / 1 / 3 / 3;
	}
	.grid .photo-2 {
		grid-area: 2 / 3/ 4 / 5;
	}
	.grid .photo-3 {
		grid-area: 4 /4 / 6 / 7;
	}
	.grid .photo-4 {
		grid-area: 6 / 4 / 8 / 7;
	}
	.grid .photo-5 {
		grid-area: 8 / 3 / 10 / 7;
	}
	.grid .photo-6 {
		grid-area: 6 / 7 / 9 / 10;
	}
	.grid .photo-7 {
		grid-area: 6/  11/ 8 / 14;
	}
	.grid .photo-8 {
		grid-area: 8 / 13 / 11/ 15;
	}
	.grid .photo-9 {
		grid-area:6 / 14 / 8 / 17;
	}
	.grid .photo-10 {
		grid-area: 10 / 15 / 11 / 18;
	}
	 .grid .photo-11 {
		grid-area: 4/ 11 / 6 / 14;
	}
	.grid .photo-12{
		grid-area: 3/ 5 / 4 / 7;
	}
	.grid .photo-13 {
		grid-area: 4 / 10 / 9/ 11;
	}
	.grid .photo-14 {
		grid-area: 8 / 15 / 10 / 18;
	}
	.grid .photo-15 {
		grid-area: 3 / 7 / 6 / 9;
	}
	.grid .photo-16 {
		grid-area: 3 / 14 / 6 / 16;
	}
    .grid .photo-17 {
		grid-area: 8 /11/ 10/ 13;
	}
	.grid .photo-18 {
		grid-area: 4 /9 / 6 / 10;
	}
/************************************************************************
                           Modale-box
**************************************************************************/	
	.overlay-grid {
        background-color: rgba(0,0,0,0.8);
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        right:0;
        display:none;
        z-index:100;
    }
    .active {
        display:block;
    }
    .modal-grid img {
        
        max-width: 60%;
        max-height: 150px;
    }
    .modal-grid {
        position:fixed;
        text-align: center;
        margin: 0 auto;
        top:10vh;
        left:20vw;
        width:60vw;
        background-color: var(--taupe);
        border: solid 2px var(--bleu);
        padding:2rem;
        box-shadow:0 0 1rem 2rem silver;
        transform: translateX(-100vw);
        transition: transform 1.5s;
        z-index:100;
    }
    .modal-grid.active {
        transform: translateX(0vw);
    }
    
	.button-close {
        position: absolute;
        top: -2rem;
        right: -2rem;
        padding: 0.5rem 1rem;
        background-color: var(--taupe);
        color: var(--bleu);
        text-decoration: none;
        border-radius: 50%;
        border: solid 2px var(--bleu);
        opacity:1;
    }
/************************************************************************
                           Form
**************************************************************************/
/***exterieur***/
    .devis h3 {
        font-size:2.5em;
        text-align:center;
    }
    .center-btn-devis {
        justify-content: flex-end
    }
    
    .form-devis fieldset {
        border:2px solid var(--bleu);
        background-color: var(--taupe);
        color:var(--rouge);
        vertical-align:top;
        padding:2em;
        margin: 0em 0.5em;
    }
/************************************************************************
                       Excursion 
**************************************************************************/

    .container-excursion{
        display:flex;
        justify-content:center;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .excursionTitle{
        width:100%;
    }
    .excursion {
        
    	width: 300px;
    	position: relative;
    	margin: 3em;/*destop*/
    	/*margin: 2em;*/
    	transition:all 0.7s;
    	overflow:hidden;
    	border:1px solid var(--rouge);
    	font-family: 'Sanchez', serif;
    }
    .excursion:hover {
    	box-shadow:0 0 10px black;
    	border-radius: 2rem
    }
    .excursion p {
    	margin: 0;
    }
    
    .excursion img {
    	display: block;
    }
    .excursion h2{
        position:absolute;
        background: rgba(255, 255, 255 ,0.7);
        top:0;
        left:0;
        right:0;
    }
    .excursion .programme {
    	width: 13rem;
    	padding: 1.5rem 0;
    	background-color: var(--marron);
    	color: white;
    	text-align: center;
    	line-height: 1.5;
    	position: absolute;
    	top: 20rem;
    	left:-20rem;
    	transition:all 0.7s;
    }
    .excursion:hover .programme {
    	transform: translateX(20rem);
    }
    .excursion .prix {
    	font-size: 3.2rem;
    	line-height: 1.3;
    }
    
    .excursion .condition {
    	background-color: #FF9933;
    	padding:2em;
    	color: var(--rouge);
    	text-align: center;
    	line-height: 1.2;
    
    }
    
    .excursion .in {
    	font-size: 3.2rem;
    	font-weight:bold;
    	position: relative;
        top: -0.5rem;
        left: -2rem;
    }    
    
/*infoPratique.php*/
    .box {
        max-width: 80%;
        padding: 1em;
        margin: 0 auto;
        margin-top: 5em;
        border-radius: 1em;
        background: var(--taupe);
         box-shadow: 1rem 1rem 2rem rgba(0,0,0,0.7);
        will-change: transform;
    }
    .box a {
        color:var(--rouge);
        font-size:1.6rem;
        font-family:italic;
    } 
    .banner-spring,
    .banner-summer,
    .banner-autumn,
    .banner-winter {
        padding: 10em 5em;
    }
/*quoifaire.php*/
    .quoi-faire {    
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
    }
    .quoi-faire>article {
            width:45%;
    }
    
/************************************************************************
*                        APi meteo
**************************************************************************/    
   .form-weather input {
        width: 40%;
    }
    .box-weather {
        width:20%;
        margin:1em 5em;
    }
    .forecast {
        margin:2em;
    }
/************************************************************************
                        Genre Tableau en responsive
**************************************************************************/
    .thead {
        display:flex;
        flex-wrap:nowrap;
        justify-content:space-around;
        width:100%;
        border:2px solid var(--bleu);
    }
    .thead span{
       font-size:2.2rem;
    }
    
    .tbody {
        display:flex;
        flex-wrap:nowrap;
        justify-content:space-around;
        width:100%;
        border:2px solid var(--bleu);
    }
    .tbody strong {
        color:var(--rouge);
        vertical-align:super;
        padding-left:0.5rem;
    }
    .tbody:nth-child(odd) {
        background-color: white;
        border-top:none;
        border-bottom:none;
    }
    
    .td {
        padding: 1em;
    }
    /*contact.php*/
    .contact{
        max-width:80%;
        flex-direction:row;
        flex-wrap:wrap;
        
    }
/* *****************************************************************
                            PANIER
***************************************************************** */
    .cart{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 2em;
    }
    
    .cartFlex{
        flex-direction:row;
        flex-wrap: wrap;
      
    }
    
    .cartFlexBtn{
        display:flex;
        flex-direction:row;
        align-items: center;
        
    }
    .cartFlexBtn div.btn-register,
    .cartFlexBtn div.btn-login,
    .cartFlexBtn div.btn{
        margin:1em;
        padding:1em;
        
    }
    .cartFlexBtn div.btn-register:hover,
    .cartFlexBtn div.btn-login:hover,
    .cartFlexBtn div.btn:hover {
        margin:1em;
        padding:1em;
        
    }
    .logo-cart {
        width:40%;
    }
    .cart h3 {
        padding:0;
        width: 100%;
    }  
    .cartFlexBtn input.btn {
        
        margin: 1em;
        padding: 1em;
    }
/* *****************************************************************
                            PAIEMENT
***************************************************************** */
    .paiement-form button {
        margin: 2em;
        padding: 1em;
        width:50%;
    }
    .paiement-form input {
        margin-bottom: 2em;
    }
    .paiement-form button:hover {
        margin: 2em;
        padding: 1em;
        width:50%;
    }   
       
  
    
/************************************************************************
*                        FOOTER
**************************************************************************/
/*************************picto *************************************/
    .reseausociaux {
        flex-wrap: wrap;
    }
    /*pour selectioner les 4 premiere  div sans toucher la div bg*/
    .reseausociaux div:nth-child(-n+4) {
        width: 50%;
        padding: 2em;
    }
/******************************aside footer ***********************************/
    footer {
        flex-direction:row;
        flex-wrap:wrap;
        justify-content: space-between;
        align-items: center;
    }
    .footerbgCremeTrii {
        position: absolute;
        background-image: url(../img/bgTri/bgCremeTrii.png);
        background-size: cover;
        top: -350px;
        left: 0;
        height: 350px;
        z-index: 1;
        width: 100%;
        margin-bottom: -1px;
        display: block;
        pointer-events: none;
        background-repeat: no-repeat;
    }
    footer aside {
        border-top: none;
        border-bottom:none;
    }
    footer aside:nth-child(-n+3) {
        width:30%;
        
    }
    footer aside:nth-child(2){
        border-right: 2px solid var(--bleu);
        border-left: 2px solid var(--bleu);
       
    }
    .sliderfooter {
       margin-top:2em;
    }
}

/* *****************************************************************
*                      VERSION DESKTOP
***************************************************************** */

@media screen and (min-width: 1024px) {

/* *****************************************************************
                            HEADER
***************************************************************** */
    .banner-header {
        min-height: 650px;
        /***pour pouvoir fixer mes triangles ***/
        position: relative;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    .banner {
        display: flex;
        justify-content: center;

    }
    .banner-header h1 {
        width: 50%;
        margin: 2em;
    }
    .bgTri {
        position: absolute;
        background-image: url(../img/bgTri/bgBlancTriR.png);
        background-size: cover;
        bottom: 0;
        right: 0;
        height: 350px;
        z-index: 1;
        width: 100%;
        margin-bottom: -1px;
        display: block;
        pointer-events: none;
        background-repeat: no-repeat;
    }


/************************************************************************
                            NAV
**************************************************************************/
    /* HEADER*/
    .navbar {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
    }
    header nav a {
        padding: 0.5em 1em;
    }
    header nav > ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        background-color: var(--taupe);
    }

    header nav li {
    border-bottom: none;
    padding: 0;
       
    }
    
    header nav li li a:hover,
    header nav li li a:focus {
        background-color: var(--rouge);
        color: var(--taupe);
    }
    .menu ul li ul {
        left: auto;
        right: auto;
        text-align:left;
    }
    .menu ul li ul a{
       width:100%;
       background-color:var(--taupe);
    }
     .menu ul  {
        padding-bottom:0em;
    }
    /*NAV auth */
    .nav-auth {
        top: 25rem;
         transform: translate(43%,180%) rotate(90deg);
    }
    /*nav canvas*/
    nav.nav-circuit{
        width:20%;
    }
    .canvas-circuit{
        max-width:80%;
       
    }
   .menu-circuit{
        justify-content:center;
        width:80%;
        margin: 0 auto;
        padding : 2rem;
   }

/* *****************************************************************
                        MAIN 
***************************************************************** */


/*bgi des pages*/
    .circuitbgCremeTri {
        position: absolute;
        background-image: url(../img/bgTri/bgCremeTrii.png);
        background-size: cover;
        top: -345px;
        left: 0;
        height: 350px;
        z-index: 1;
        width: 100%;
        margin-bottom: -1px;
        display: block;
        pointer-events: none;
        background-repeat: no-repeat;
    }
    
    .circuitbgTriCremeR {
        position: absolute;
        background-image: url(../img/bgTri/bgCremeTriR.png);
        background-size: cover;
        bottom: -345px;
        left: 0;
        height: 350px;
        z-index: 1;
        width: 100%;
        margin-bottom: -1px;
        display: block;
        pointer-events: none;
        background-repeat: no-repeat;
    }
   
    .circuitbgTri {
        position: absolute;
        background-image: url(../img/bgTri/bgBlancTriR.png);
        background-size: cover;
        top: -345px;
        left: 0;
        height: 350px;
        z-index: 1;
        width: 100%;
        margin-bottom: -1px;
        display: block;
        pointer-events: none;
        background-repeat: no-repeat;
    }

    .blanc0 {
        position: relative;
        padding: 0em 5em 10em 5em;
        bottom: 3rem;
        left: 0;
    }
    .creme {
        background-color: var(--taupe);
        position: relative;
        padding: 1em 5em;
        z-index: 10;
    }
    .blanc {
        position: relative;
        padding: 15em 5em 20em 5em;
        bottom: -10rem;
        left: 0;
    }
    .lastblanc {
        background-color: white;
        position: relative;
        padding: 5em 5em 5em 5em;
        bottom: -10rem;
        left: 0;
    }
   
/*index.php*/
    .right-iframe{
        padding:0;
        float:right;
        margin-left:2em;
        margin-bottom:2em;
        width:425px;
        height:350px;
    }
    .left-iframe{
        padding:0;
        float:left;
        margin-right:2em;
        margin-bottom:2em;
        width:425px;
        height:350px;
    }
    .description p{
        padding-left:5em;
    }
    .description nav {
        padding: 0em 0em 5em 0em;
    }
    
    .description iframe{
        margin:5em;
    }
/*circuit.php*/

    .circuit figure {
        width:30%;
    }
    .heartLeft{
        top: 22.5rem;
        left: 5rem;
    }
    .heartRight{
        top: 0.5rem;
        right: 7rem;
    }
/*************Bordure a l'interieur du hover ****************/
    .circuit figcaption::after {
        border: 4px solid white;
    }
    

/* ******************************************************* 
                         SLIDER REGION                   
 ******************************************************* */
    .prev {
        top: 3rem;
        left: 15rem;
    }
    .next {
        top: 3rem;
        right: 15rem;
    }
/* ******************************************************* 
                         SLIDER CIRCUIT                  
 ******************************************************* */    
   
    
    .partie-right{
        justify-content: space-around;
        width: 40%;
        background-color: var(--bleu);
        padding-right: 5em;

        
    } 
    .slider-circuit-dots {
        left: 40%;
        padding: 0;
    }
/************************************************************************
                           GRID
**************************************************************************/
    .grid{
        max-width: 100vw;
        max-height: 80vh;
    }
/************************************************************************
*                        APi meteo
**************************************************************************/    
  
    .box-weather {
        width:10%;
        margin:1em 2em;
    }
 

/************************************************************************
                           Form
**************************************************************************/
/***exterieur***/
    .devis {
        padding: 5em;
    }
    .devis h3 {
        text-align:left;
    }
    .form-devis {
        display: flex;
        flex-direction:column;
        width: 100%;
        align-items: center;
        padding: 5em 7em;
        
    }
    .form-devis fieldset {
        width:50%;
    }
    .btn-devis {
        margin-right:2em;
    }
    .btn-formDevis {
        width: 95%;
    }
    /*quoifaire.php*/
    .quoi-faire {    
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
    }
    .quoi-faire>article {
            width:30%;
    }
    /*contact.php*/
    .contact .box{
        width:30%;
    }
/* *****************************************************************
                            PANIER
***************************************************************** */
    .cart{
        padding: 5em;
    }
    .cartFlex{
        flex-direction:row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        max-width :60%;
        
    }
    .cartFlex p.supprimer{
        width: 100%;
        text-align: center;
        padding:2em;
    }
    
    .cartFlexTotalPrice{
        width: 100%;
        text-align: end;
        
    }
    .cartFlexBtn div.btn-register,
    .cartFlexBtn div.btn-login,
    .cartFlexBtn div.btn {
        margin:2.5em;
        padding:2em;
        
    }
    .cartFlexBtn div.btn-register:hover,
    .cartFlexBtn div.btn-login:hover,
    .cartFlexBtn div.btn:hover {
        margin:2.5em;
        padding:2em;
        
    }
    .logo-cart {
        width:30%;
    }
    .cart h3 {
        padding:1.5em;
    }  
    .cartFlexBtn input.btn {
        
        margin:2.5em;
        padding:2em;
    }
    .cartFlexBtn input.btn:hover {
        
        margin:2.5em;
        padding:2em;
    }
/* *****************************************************************
                            PAIEMENT
***************************************************************** */
    .paiement-form button{
        padding: 2em;
        width:30%;
    }
    .paiement-form button:hover{
        padding: 2em;
        width:30%;
    }   
   
/* *****************************************************************
                        AVIS COMMENTAIRE
***************************************************************** */      
    
    .avis {
        margin: 5em;
        padding: 2em;
    }
    .avisForm{
        padding:5em;
    }
    
/************************************************************************
                               FOOTER
**************************************************************************/
/******************************picto *************************************/
    .reseausociaux {
        position:relative;
        flex-wrap: nowrap;
        padding:5em 0em;
    }
    .reseausociaux div:nth-child(-n+4) {
        width: 100%;
    }
/******************************aside footer ***********************************/
    footer {
        justify-content: space-around;
        padding-top: 2em;
    }
    footer:last-child {
        padding: 2em 5em;
    }
    
    .sliderfooter {
    margin-bottom: 10em;
    margin-top: 20em;
    }
  
}