:root{
    --color-gold : rgb(184, 141, 85);
    --color-graylight : #e7e7e7;
}

body{
    margin: 0; padding: 0;
}

#mz_app{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: antiquewhite;
    margin: 0; padding: 0;
    font-family: 'Muli', sans-serif;
    overflow: hidden;
}


.texte_courant{
    color: #777;
    font-size: 1em;
}

.texte_blanc{
    color: #fff;
}

.texte_gris_clair{
    color: #aaa;
}



.lettrine:first-letter{
    font-size: 2em;
    font-weight: bold;
}

.icone_gold{
    fill: var(--color-gold);
}

#btn_menu{
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    opacity: 0;
    background-color: #fff;
    z-index: 4;
    transform: scale(0);
    pointer-events: none;
    box-shadow: 0px 2px 6px 0px hsla(0, 0%, 0%, 0.14);
    transition: all .2s cubic-bezier(0, 0.75, 0.67, 1.01) .1s;
}

#btn_menu:after{
    content: "☰";
    color: rgba(0, 0, 0, 0.6);
}

#navbtn{
    display: none;
    position: absolute;
    top: -50px;
}

nav{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(73,30,115,1) 0%, rgb(162, 13, 137) 100%);
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    z-index: 2;
    transition: transform .2s cubic-bezier(.24,0,.12,1);
}


@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

nav h1 {
    margin: 0 0 10px 0;
}

.logo_entete{
    transition: all .4s;
    height: 45px;
    font-size: 1.4em;
}

.hide_main_logo{
    height: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
}


nav ul{
    display: flex;
    list-style: none;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    padding: 0;
    margin: 10px 0 10px 0;
    font-size: .9em;
}

nav li{
    display: flex;
    align-items: center;
    height: 40px;
    text-align: center;
    margin: 0 8px 0 8px;
}

nav .svg-inline--fa{
    display: none;
    width: 18px;
    height: 18px;
    margin: 0 15px 0 0;
}

nav a{
    display: flex;
    justify-content: center;
    font-weight: bold;
    text-decoration: none;
    color: #265369;;
}

nav a:visited{
    text-decoration: none;
    color: #265369;;
}


main>section:nth-child(2n+1){
    background-color: #f5f7ff;
}

#parcour::before{
    content: "";
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/parcour.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -1;
    filter: blur(4px);
}

#parcour{
    position: relative;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
}

#mz_app section h2{
    margin: 0;
    padding: 0;
    font-size: 2.3em;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
}

h2>span{
    display: inline-block;
    position: relative;
}

main{
    position: relative;
    min-width: 360px;
    height: 100vh;
    background-color: brown;
    -webkit-perspective: 200px;
    perspective: 200px;
    -webkit-perspective-origin: top;
    perspective-origin: top;
    overflow-y: scroll;
    overflow-x: hidden;
    transition: width .2s;
}

main header{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 60%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.144);
    overflow: hidden;
}

#headerbg{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transform: translateZ(-100px) scale(1.6);
    transform: translateZ(-100px) scale(1.6);
    z-index: -5;

    background-color: #269;
    background-image:
    linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

#zone_titre{
    text-align: center;
    color:#fff;
    font-family: 'Roboto', sans-serif;
}

#zone_titre p{
    margin: 3px;
    letter-spacing: 1px;
    font-size: 4vw;
}

#zone_titre p:nth-child(1){
    font-weight: 100;
}

#zone_titre p:nth-child(2){
    font-weight: 700;
}

main>section{
    width: 100%;
    padding: 25px 0 25px 0;
    background-color: rgb(255, 255, 255);
}

section .container{
    max-width: 1100px;
    margin: 30px auto 30px auto;
    padding: 0 35px 0 35px;
}

.container h3{
    font-weight: 600;
    margin-top: 0;
}

#presentation .container{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    grid-auto-rows: auto;
    grid-gap: 0px;
    justify-content: center;
}

#presentation figure{
    background-color: #d3d3d3;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    margin: 0;
    background-position: center;
    background-size: contain;
    opacity: .5;
    transition: opacity 2s;
}

#presentation article{
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    padding: 15px;
    
}

#presentation h2{
    text-align: left;
    margin-bottom: 10px;
}

#presentation h3{
    margin: 0;
}

#presentation p{
    margin: 20px 0 0 0;
}


#signature_mouzas{
    display: inline-flex;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 25% ;
}

#logo_site{
    display: none;
    margin: auto;
    width: 40%;
    height: 100px;
}

#parcour .container{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr) );
    grid-gap: 30px;
}

#parcour ul{
    padding: 0;
    list-style: none;
}

#parcour li{
    margin: 20px 0;
}

#parcour b{
    display: block;
    font-weight: bold;
    margin: 0 0 7px 0;
    
}

#parcour p{
    margin: 0;
    line-height: 1.6;
}

.splide__slide{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.splide__slide figcaption{
    font-family: 'Roboto', sans-serif;
    font-size: .8em;
    text-align: center;
    color: #464646;
    margin: 7px 0;

}

#domaine_expertise .container{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,350px) );
    justify-content: center;
}

#domaine_expertise article{
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 7px;
    margin: 20px;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
}

#domaine_expertise h3{
    margin: 20px 0 7px 0;
}

#domaine_expertise article p{
    padding: 0 20px 20px 20px;
    margin: 0;
}

#domaine_expertise figure{
    width: 100%;
    height: 200px;
    background-color: rgb(201, 201, 201);
    margin: 0;
    border-radius: inherit;
    overflow: hidden;
}

#domaine_expertise figure img{
    width: 100%;
}

#chiffres{
    background-color: #222;
    color: #fff;
}

#chiffres .container{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
}

#chiffres article{
 margin: 10px 0 10px 0;
}

#chiffres>h3{
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 100;
    font-size: 1.2em;
    margin: 0;
}

#chiffres article h3{
    font-family: Roboto,sans-serif;
    font-size: 2em;
    letter-spacing: 2px;
    font-weight: 800;
    margin: 0;
}

#chiffres article p{
    margin:0;
    color: var(--color-gold);
}

#chiffres article{
    width: 20%;
    min-width: 140px;
}

#en_images h3{
    margin: 10px auto 10px auto;
    color: rgba(0, 0, 0, 0.5);
    font-weight: normal;
    max-width: 1100px;
}

#en_images h2{
    margin: 10px auto 15px auto;
}

#en_images .tab{
    padding: 0 20px 0 20px;
}

.masonry {
    display: grid;
    grid-gap: .5em;
    grid-template-columns: repeat( auto-fit, minmax( 150px, auto ) );
    grid-auto-rows: minmax( 130px, 200px );
    grid-auto-columns: auto;
    grid-auto-flow: dense;
    max-width: 1100px;
    margin: 0 auto 0 auto;
    padding: 0;
    list-style: none;
}

.masonry li{
    background: #acacac;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px;
    cursor: pointer;
    transition: transform .2s;
}

.masonry li:hover{
    transform: scale(1.03);
}

.msry_infographie li::after, .msry_photo li::after{
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 0%, 0.16);
    border-radius: 5px;
    transition: all .3s;
  }

  .masonry li:hover::after{
    transform: scale(0);
    border-radius: 50%;
    opacity: 0;
  }

 
.msry_infographie li:nth-child(3n+1), .msry_photo li:nth-child(3n+2){
    grid-column: span 2;
  }

  .msry_video{
    display: grid;
    grid-gap: .5em;
    grid-template-columns: repeat( auto-fit, minmax( 200px, auto ) );
    grid-auto-rows: minmax( 160px, auto );
    grid-auto-columns: auto;
    grid-auto-flow: dense;
    max-width: 1100px;
    margin: 0 auto 0 auto;
    padding: 0;
    list-style: none;
  }

#apercu_video{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70%;
    max-width: 720px;
    height: 50%;
    max-height: 400px;
    z-index: 15;
}

.tabs label[for="active_zone_apercu_video"] {
    width: 100%;
    padding: 0;
    height: 100%;
}

  .msry_video label:after{
    content: "";
    display: block;
    min-width: 100%;
    min-height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 2.3em;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gZmlsbD0iI0VFRSIgcG9pbnRzPSIzOC44LDc1LjEgNzIuMyw1MCAzOC44LDI0LjggIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRUVFIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTQ5LjksOTQuN0MyNS4zLDk0LjcsNS4yLDc0LjYsNS4yLDUwUzI1LjMsNS4zLDQ5LjksNS4zUzk0LjYsMjUuNCw5NC42LDUwUzc0LjYsOTQuNyw0OS45LDk0Ljd6Ii8+PC9zdmc+Cg==');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%;
    opacity: .8;
  }

  #more_photo a{
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    width: 100%;
    height: 100%;
    color: #fff;
    }

    #more_photo::after{
        display: none;
  }

  #plus_encore {
    padding-bottom: 40px;
    background-color: #abb2ce;
}


  #plus_encore .carousel-cell {
    position: relative;
    width: 250px;
    height: 350px;
    margin: 0 20px 0 20px;
    background: rgb(247, 248, 247);
    border-radius: 15px;
    border: 2px solid #fff;
    box-shadow: 1px 3px 13px hsla(0, 0%, 0%, 0.22);
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
  }

#plus_encore h2{
   color: #fff;
  }

#plus_encore p{
    text-align: center;
    margin: 15px 0 20px 0;
    font-size: 14px;
    color: #fff;
  }

  #plus_encore label{
      display: block;
  }

  #plus_encore figure{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000;
  }

  #plus_encore img{
    opacity: .7;
    filter: saturate(.8);
    transform: scale(1);
    transition: all .1s;
  }

  #plus_encore img:hover{
    opacity: 1;
    filter: saturate(1.2);
    transform: scale(1.05);
  }

  #plus_encore figcaption{
    display: block;
    position: absolute;
    bottom: 0px;
    background-color: #fff;
    width: 100%;
    text-align: center;
  }

  #plus_encore figcaption::first-letter{
   font-size: 2em;
   font-weight: 700;
  }

#contact section{
    display: flex;
    padding: 0;
    margin: 10px 0 10px 0;
    justify-content: space-between;
}

#contact section input{
    margin: 0 10px 0 10px;
    width: 50%;
    height: 20px;
    outline: none;
    border: none;
    border-bottom: 1px solid #bbb;
}

#contact section textarea{
width: 100%;
margin: 20px 10px 0 10px;
outline: none;
border: 1px solid #bbb;

}

main footer{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: #222;  
}

#zone_apercu, #zone_apercu_video{
    display: none;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.692);
    z-index: 20;
}

#active_zone_apercu, #active_zone_apercu_video{
    display: none;
    opacity: 0;
}

#active_zone_apercu:checked+section, #active_zone_apercu_video:checked+section{
    display: flex;
}

#mz_app label[data="zone-quitte"]{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

#mz_app label[data="btn-close"]{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #f9fcff;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.18);
    opacity: .7;
    cursor: pointer;
    transform: scale(1);
    transition: all .1s;
}

#mz_app label[data="btn-close"]:hover{
    transform: scale(1.07);
    opacity: 1;
}

#mz_app label[data="btn-close"]:after{
    content: "✕";
 }

#apercu{
    position: absolute;
    width: 90%;
    height: 95%;
    background-color: #fff;
}

#mz_app .non_visible{
    opacity: 0;
    pointer-events: none;
}