*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --primary-color1: #1d1868;
    --primary-color2: #7dd3f6;
    --secondary-color1: #0c0a23;
    --secondary-color2: rgb(255, 208, 0);
    --transition: all .2s ease-in-out;
    --border-radius: 8px;

    /**Costum color-scheme Cookie Consent**/
    --cc-bg: #292929;
    --cc-text: #d4d4d4;
    --cc-btn-primary-bg: #1d1868;
    --cc-btn-primary-text: #ffffff;
    --cc-btn-primary-hover-bg: #7dd3f6;
    --cc-btn-primary-hover-text: var(--cc-btn-primary-text);
    --cc-btn-secondary-bg: #33383c;
    --cc-btn-secondary-text: var(--cc-text);
    --cc-btn-secondary-hover-bg: #3e454a;
    --cc-btn-secondary-hover-text: var(--cc-btn-secondary-text);
    --cc-toggle-bg-off: #667481;
    --cc-toggle-bg-on: var(--cc-btn-primary-bg);
    --cc-toggle-bg-readonly: #454c54;
    --cc-toggle-knob-bg: var(--cc-cookie-category-block-bg);
    --cc-toggle-knob-icon-color: var(--cc-bg);
    --cc-block-text: #b3bfc5;
    --cc-cookie-category-block-bg: #23272a;
    --cc-cookie-category-block-bg-hover: #2b3035;
    --cc-section-border: #292d31;
    --cc-cookie-table-border: #2b3035;
    --cc-webkit-scrollbar-bg: #667481;
    --cc-webkit-scrollbar-bg-hover: #9199a0; 
}
.cc_div .cc-link {
    border-bottom: 1px solid var(--cc-btn-primary-hover-bg);
    color: var(--cc-btn-primary-hover-bg);
}


body{
    margin: 0;
    width: 100%;
    font-family: "poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
}

.container{
    max-width: 1280px;
    /* max-width: 1480px; */
    padding: 0px 40px;
    margin: 0 auto;
}
.s-container{
    max-width: 450px;
    /* max-width: 1480px; */
    padding: 0px 40px;
    margin: 0 auto;
}

h1, h2, h3, h4{
    margin: 0;
    font-family: "poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    line-height: 1em;
    text-wrap: balance;
}
h1{
    font-size: 2em;
}
h2{
    font-size: 1.5em;
}
h3{
    font-size: 1.17em;
}
h4{
    font-size: 1em;
}
p{
    line-height: 1.25em;
    margin: 0;
    font-size: 1em; 
    text-wrap: pretty;
}
a{
    text-decoration: none;
    color: white;
}

.btn{
    text-decoration: none;
    text-transform: uppercase;
    border-radius: var(--border-radius);
    font-weight: 700;
    padding: .55em .85em .4em;
    display: inline-block;
    transition: all 0.2s ease;
}

.is-clipped {
    /* overflow: hidden !important; */
    position: fixed !important; 
    overflow-y: scroll !important;
}
.no-scroll {
  position: fixed;
  overflow: hidden;
  width: 100%;
  left: 0;
}

#back-to-top{
  visibility: hidden;
  width: 60px;
  position: fixed;
  bottom: 100px;
  right: 0;
  opacity: 0;
  transition: all .2s ease-in-out;
}
#back-to-top:hover{
  transform: scale(1.2);
}
#back-to-top.visible{
  visibility: visible;
  opacity: 1;
}

.page-hero{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.page-intro{
    color: white;
    max-width: 850px;
    padding: 75px 0;
}
.page-intro h1{
    font-weight: 800;
    margin-bottom: .2em;
    font-size: 2.5em;
    animation: 0.35s ease-out 0s 1 slideInFromLeft;
}
.page-intro p{
    color: white;
    font-size: 1.2em;
    animation: 0.45s ease-out 0s 1 slideInFromLeft;
}

/*--ACCUEIL--*/
#home-hero{
    /* background-image: linear-gradient(to right, rgba(12, 10, 35, 1), rgba(12, 10, 35, 0.75)), url(../images/home-hero_jopel.jpg); */
    background-image:linear-gradient(90deg,rgba(12, 10, 35, .99) 0%, rgba(12, 10, 35, .9) 50%, rgba(12, 10, 35, .25) 100%), url(../images/home-hero_jopel.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.home-intro{
    color: white;
    max-width: 600px;
    padding: 175px 0;
}
.home-intro h1{
    font-size: 3.2em;
    font-weight: 700;
    line-height: 1.15em;
    animation: 0.35s ease-out 0s 1 slideInFromLeft;
}
.home-intro p{
    color: white;
    margin: 1.25em 0 1.5em;
    font-size: 1.2em;
    animation: 0.4s ease-out 0s 1 slideInFromLeft;
}
.btn-soumission-home{
    color: var(--secondary-color1);
    background-color: var(--primary-color2);
    padding: .5em .8em .35em;
    display: inline-block;
    font-size: 1.2em;
    animation: .45s ease-out 0s 1 slideInFromLeft;
}
.btn-soumission-home:hover{
    color: var(--primary-color2);
    background-color: var(--primary-color1);
}

#a-propos{
    background-image: linear-gradient(to right, rgba(125, 211, 246, 1), rgba(125, 211, 246, 0.75)), url(../images/a-propos_jopel.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /* text-align: center; */
}
.a-propos-content{
    color: white;
    max-width: 650px;
    padding: 75px 0;
    /* margin: 0 auto; */
}
.a-propos-content div{
    &:not(:last-child) {
        margin: 1em 0 1.5em;
    }    
}
.a-propos-content h1{
    
    color: var(--primary-color1);
    font-weight: 800;
}
.a-propos-content h2{
    color: var(--secondary-color1);
    /* color: var(--secondary-color1);
    text-shadow: 1px 1px 3px var(--secondary-color1); 
    text-shadow: 1px 1px 1px rgba(0,0,0,.5),2px 2px 1px rgba(0,0,0,.4),3px 3px 1px rgba(0,0,0,.3),4px 4px 1px rgba(0,0,0,.2),5px 5px 1px rgba(0,0,0,0.1); */
}
.a-propos-content p{
    color: var(--secondary-color1);
    font-weight: 500;
}

#nos-services{
    background-color: var(--primary-color1);
    text-align: center;
}
.nos-services-content{
    padding: 75px 0;
}
.nos-services-content h1{
    color: white;
    margin-bottom: 1.5em;
    /* animation: slideInFromLeft linear;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 300px; */
}
.nos-services-content .bloc{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    gap: 5em;
}
.nos-services-content .bloc div{
    width: 50%;
    color: white;
}
.nos-services-content .bloc div h2{
    margin: .35em 0;
}
.nos-services-content .bloc img{
    max-width: 125px;
}
.btn-en-savoir-plus{
    color: var(--secondary-color1);
    background-color: var(--primary-color2);
    margin-top: 1em;
    border: 1px solid var(--primary-color2);
}
.btn-en-savoir-plus:hover{
    color: var(--primary-color2);
    background-color: var(--primary-color1);
    border: 1px solid var(--primary-color2);
}

#nos-realisations{
    background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), url(../images/11771169_4850009.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;     
}
.nos-realisations-content{
    padding: 75px 0;
}
.nos-realisations-content h1{
    font-weight: 800;
    color: var(--primary-color1);
    margin-bottom: .5em;
    text-align: center;
    /* font-style: italic; */
}
.home-gallery{
    display: grid;
    grid-gap: 0.75em;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
}
@media (max-width: 785px) {
    .home-gallery {
      grid-template-columns: repeat(2, 1fr);
    }
}
.btn-realisations{
    text-align: center;
    color: white;
    background-color: var(--primary-color1);
    padding: 1em .7em .85em;
    display: block;
    margin-top: 1em;
}
.btn-realisations:hover{
    color: var(--primary-color1);
    background-color: var(--primary-color2);
}
.btn-realisations svg{
    vertical-align: sub;
    margin-left: 8px;
    width: 22px;
    fill: white;
    transition: all 0.2s ease;
}
.btn-realisations:hover svg{
    fill: var(--primary-color1);
}

#notre-equipe{
    background-image: linear-gradient(rgba(12, 10, 35, 0.95), rgba(12, 10, 35, 0.95)), url(../images/notre-equipe_jopel.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.notre-equipe-content{
    color: white;
    padding: 75px 0;
    text-align: center;
}

.membres{
    /* width: 100%; */
    display: inline-grid;
    justify-self: center;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-gap: 2em 2.5em;
    margin-top: 2em;
}
.membres .cards img{
    max-width: 135px;
}
.membres .cards h3, .membres .cards h4{
    text-transform: none;
    font-weight: 700;
}
.membres .cards h4{
    font-weight: 500;
    font-style: italic;
    margin-top: 3px;
}

#notre-equipe-2{
    background-color: var(--primary-color1);
    text-align: center;
}
.notre-equipe-2-content{
    padding: 55px 0;
}
.notre-equipe-2-content h1{
    color: white;
    margin-bottom: 1.5em;
}
.notre-equipe-2-content .bloc{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10%;
}
.notre-equipe-2-content .bloc div{
    width: 50%;
    color: white;
}
.notre-equipe-2-content .bloc div p{
    margin: .75em 0;
}

.btn-joindre-home{
    color: var(--secondary-color1);
    background-color: var(--primary-color2);
    border: 1px solid var(--primary-color2);
}
.btn-joindre-home:hover{
    color: var(--primary-color2);
    background-color: var(--primary-color1);
    border: 1px solid var(--primary-color2);
}

/*--NOS SERVICES--*/
.page-hero.nos-services{
    background-image: linear-gradient(to right, rgba(12, 10, 35, 0.95), rgba(12, 10, 35, 0.75)), url(../images/nos-services_jopel.jpg);
}
#nos-services-page .enveloppe-de-batiment, #nos-services-page .construction-de-maisons-neuves{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;  
    background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), url(../images/11771169_4850009.jpg);
}
#nos-services-page .enveloppe-de-batiment, #nos-services-page .construction-de-maisons-neuves{
    display: flex;
    align-items: center;
}
#nos-services-page .enveloppe-de-batiment > div, #nos-services-page .construction-de-maisons-neuves > div{
    width: 50%;
}
#nos-services-page .flex-photo{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    /* outline: 2px solid rgba(125, 211, 246, 1); */
    outline: 1px solid var(--primary-color2);
    /* outline: 1px solid rgba(255, 255, 255, .5); */
    outline-offset: -8px;
    width: 100%;
    min-height: 35vw;
    align-self: stretch;
}
#nos-services-page .enveloppe-de-batiment .description{
    padding: 100px calc(50vw / 4) 100px 100px;
}
#nos-services-page .construction-de-maisons-neuves .description{
    padding: 100px 125px 100px calc(50vw / 4);
}
#nos-services-page .description h2{
    color: var(--primary-color1);
    margin-bottom: .65em;
    border-bottom: 2px solid var(--primary-color1);
    display: inline-block;
}
#nos-services-page .description h3{
    color: var(--secondary-color1);
}
#nos-services-page .description .toiture{
    margin: 1em 0 1.5em;
}
#nos-services-page .enveloppe-de-batiment .flex-photo{
    background-image: url(../images/enveloppe_jopel.jpg);
}
#nos-services-page .construction-de-maisons-neuves .flex-photo{
    background-image: url(../images/construction_jopel.jpg);
    background-position: center center;
}
#nos-services-page .construction-de-maisons-neuves p{
    margin-bottom: 1.75em;
}

.btn-soumission-services{
    color: white;
    background-color: var(--primary-color1);
}
.btn-soumission-services:hover{
    color: var(--primary-color1);
    background-color: var(--primary-color2);
}

section#mirador{
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../images/black-forest-3869476.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: white;
    padding: 75px 0;
}
.mirador-header{
    display: flex;
    align-items: center;
    justify-content: center;
}
.mirador-header .m-logo{
    border-right: 1px solid white;
    padding-right: 3em;
    max-width: 470px;
}
.mirador-header .m-logo img{
    width: 100%;
}
.mirador-header .m-info{
    padding-left: 3em;
}
.mirador-header .m-info ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.mirador-header .m-info ul li{
    margin: 0;
    font-size: 1em; 
    text-wrap: pretty;
}
.mirador-header .m-info a{
    text-decoration: none;
    color: white;
}
.mirador-header .m-info a:hover{
    text-decoration: underline;
}
.mirador-header .m-info img{
    vertical-align: sub;
    margin-right: 8px;
    width: 18px;
}
.mirador-content{
    display: flex;
    align-items: center;
    gap: 2.5em;
    margin-top: 2.5em;
}
.mirador-content .m-description{
    order: 2;
    flex: 1;
}
.mirador-content .m-carte{
    flex: 1.5;
}
.mirador-content .m-carte img{
    border-radius: var(--border-radius);
    border: 2px solid #405b47;
    padding: 5px;
}
.mirador-content .m-description p{
    margin: 1em 0;
}
.mirador-content .btn-plus-info{
    color: white;
    background-color: #405b47;
}
.mirador-content .btn-plus-info:hover{
    color: white;
    background-color: #2d2d2d;
}
.mirador-content .btn-plus-info img{
    vertical-align: sub;
    margin-left: 8px;
    width: 20px;
}

.joindre-mirador{
    display: flex;
    justify-content: center;
}
.btn-joindre-mirador{
    color: white;
    /* background-color: #405b47; */
    border: 1px solid white;
    /* display: block; */
    display: inline-block;
    text-align: center;
    margin-top: 2.5em;
    padding: .75em 3em .6em;
}
.btn-joindre-mirador:hover{
    color: white;
    /* background-color: #2d2d2d; */
    background-color: #405b47;
    border: 1px solid #405b47;
}
.btn-joindre-mirador img{
    vertical-align: sub;
    margin-left: 8px;
    width: 22px;
}

/*--NOS MODÈLES--*/
.page-hero.nos-modeles{
    background-image: linear-gradient(to right, rgba(12, 10, 35, 0.95), rgba(12, 10, 35, 0.75)), url(../images/hero-modeles_jopel.jpg);
    background-position: bottom center;
}
#nos-modeles-page .modele .flex-photo{
    background-image: url(../images/Rendu-Model-Lasse.jpg);
    background-position: center center;
}
#nos-modeles-page .modele{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;  
    background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), url(../images/11771169_4850009.jpg);
}
#nos-modeles-page .modele{
    display: flex;
    align-items: center;
}
#nos-modeles-page .modele > div {
    width: 50%;
}
#nos-modeles-page .flex-photo{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    /* outline: 2px solid rgba(125, 211, 246, 1); */
    outline: 1px solid var(--primary-color2);
    /* outline: 1px solid rgba(255, 255, 255, .5); */
    outline-offset: -8px;
    width: 100%;
    min-height: 35vw;
    align-self: stretch;
}
#nos-modeles-page .modele .description{
    padding: 100px 125px 100px calc(50vw / 4);
}
#nos-modeles-page .description h2{
    color: var(--primary-color1);
    margin-bottom: .65em;
    border-bottom: 2px solid var(--primary-color1);
    display: inline-block;
}
#nos-modeles-page .description h3{
    color: var(--secondary-color1);
    font-style: italic;
    font-weight: 400;
    margin-bottom: .25em;
    color: var(--primary-color1);
}
#nos-modeles-page .description .toiture{
    margin: 1em 0 1.5em;
}
#nos-modeles-page .mopdele p{
    margin-bottom: 1.75em;
}
#nos-modeles-page .modele .btn-soumission-services{
    margin-top: 1.5em;
}


/*--NOS RÉALISATIONS--*/
.page-hero.nos-realisations{
    background-image: linear-gradient(to right, rgba(12, 10, 35, 0.95), rgba(12, 10, 35, 0.75)), url(../images/hero-realisation_jopel.jpg);
}
.page-hero.nos-realisations .page-intro{
    max-width: 700px;
}
#nos-realisations-page{
    background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), url(../images/4850000.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;    
    min-height: 500px;
}

#content-filter-header{
    background-color: var(--primary-color1);
    text-align: center; 
}
#content-filter-header .filter-btn{
    border: none;
    outline: none;
    background: none;
    color: white;
    cursor: pointer;
    padding: 1em 0.75em 0.75em;
    text-transform: uppercase;
    font-weight: 800;
    border-bottom: 6px solid transparent;
    transition: var(--transition);
}
#content-filter-header .filter-btn:hover{
    color: var(--primary-color2);
}
#content-filter-header .filter-btn.active{
    color: var(--primary-color2);
    border-bottom: 6px solid var(--primary-color2);
}

#nos-realisations-page .photo-gallery{
    display: grid;
    grid-gap: 0.35em;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 1fr;
    flex-wrap: wrap;
    padding: 35px 0;
}
.filterDiv{
    float: left;
    display: none; 
    height: 250px;
}
#nos-realisations-page .photo-gallery .filterDiv img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center center;
    border-radius: 3px;
}

/* The "show" class is added to the filtered elements */
.show {
    display: block;
    animation: fade-in 0.5s;
}

/*--NOUS JOINDRE--*/
.page-hero.nous-joindre{
    background-image: linear-gradient(to right, rgba(12, 10, 35, 0.95), rgba(12, 10, 35, 0.75)), url(../images/hero-joindre_jopel.jpg);
}
#jopel-coordonnees{
    background-color: var(--primary-color1);
    color: white;
    padding: 45px 0;
}
.contact-info{
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
    align-items: center;
}
.contact-info .box{
    display: flex;
    gap: 1em;
    flex: 1;
    cursor: pointer;
}
.contact-info .box > div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    flex: 1;
}

.contact-info img{
    max-width: 60px;
}
.contact-info h3{
    margin-bottom: 3px;
}
.contact-info p{
    line-height: 1em;
}
.contact-info a{
    word-break: break-word;
}
.contact-info a:hover{
    color: var(--primary-color2);
}

#nous-joindre-page{
    background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), url(../images/11771169_4850009.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;    
    padding: 75px 0 0;
}
#contact-form h1{
    color:var(--primary-color1);
    font-weight: 800;
    margin-bottom: 15px;
}
#contact-form form div.flex{
    display: flex; 
    gap: .5em;
}
#contact-form form input, #contact-form form textarea, #contact-form form select{
    width: 100%; 
    padding: 15px; 
    border: 0;
    outline: none;
    border-radius: var(--border-radius);
    background-color: #ececec;
    font-family: "poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}
#contact-form form select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--secondary-color1);
    color: white;
    margin-bottom: 10px;
    padding: 10px 15px; 
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 99%;
    background-position-y: 8px;
}
#contact-form form select:hover{
    /* background-color: #c0c0c0; */
    outline: auto;
}
#contact-form form select option{
    background-color: #3f3f3f;
    color: white;
}
#contact-form form textarea{
    resize: none;
    min-height: 150px;
}
#contact-form form #email{
    margin: .5em 0;
}
#contact-form form #input-submit{
    background-color: var(--primary-color1);
    color: white;
    font-family: "poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    padding:  20px;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 5px;
}
#contact-form form #input-submit:hover{
    background-color: var(--primary-color2);
}
#form-messages{
    /* display: inline-block; */
    border-radius: var(--border-radius);
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 1em;  
    transition: opacity 0.3s ease-in-out;
}
#form-messages.success{
    border: 2px solid rgb(14, 170, 14);
    color: rgb(14, 170, 14);
    padding: .75em;
}
#form-messages.error{
    border: 2px solid rgb(170, 14, 14);
    color: rgb(170, 14, 14);
    padding: .75em;
}

.form-loading{
  text-align: center;
}
.mail-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #333;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.accreditation{
    text-align: center;
    padding: 75px 0;
}
.accreditation .container:first-child{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 4em;
   margin-bottom: 2em;
}
.accreditation a{
    display: inline-block;
}
.accreditation img{
    width: 150px;
}
.accreditation .rbq{
    margin-top: 5px;
}

/* Set the size of the div element that contains the map */
#map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

@media only screen and (max-width: 1280px) {
    #nos-services-page .enveloppe-de-batiment .description,  #nos-services-page .construction-de-maisons-neuves .description{
        padding: 75px;
    }  
    #nos-modeles-page .modele .description{
        padding: 75px;
    }  
}
@media only screen and (max-width: 1070px) {
    h1{
        font-size: 1.8em;
    }
    h2{
        font-size: 1.125em;
    }
    h3{
        font-size: 1em;
    }
    h4, .btn, .filter-btn{
        font-size: 0.875em;
    }
    p, .mirador-header .m-info ul li{
        font-size: 0.875em;
    }

    .home-intro h1{
        font-size: 2.95em;
    }
    .home-intro p{
        font-size: 1.15em;
    }
    .btn-soumission-home{
        font-size: 1.1em !important;
    }

    .page-intro h1{
        font-size: 2em;
    }
    .page-intro p{
        font-size: 1em;
    }  

    .contact-info .box > div{
        flex-direction: column;
        text-align: center;
    }    
}
@media only screen and (max-width: 870px) {
    #nos-services-page .enveloppe-de-batiment, #nos-services-page .construction-de-maisons-neuves{
        flex-direction: column;
    }
    #nos-services-page .enveloppe-de-batiment > div, #nos-services-page .construction-de-maisons-neuves > div{
        width: 100%;
    }    
    #nos-services-page .flex-photo{
        height: 450px;
        min-width: 100%;
        order: 2;
    }   
    #nos-services-page .description{
        padding: 50px !important;
    }    

    #nos-modeles-page .modele{
        flex-direction: column;
    }
    #nos-modeles-page .modele > div{
        width: 100%;
    }    
    #nos-modeles-page .flex-photo{
        height: 450px;
        min-width: 100%;
        order: 2;
    }   
    #nos-modeles-page .description{
        padding: 50px !important;
    }    
    
    .mirador-content{
        display: block;
    }     
    .mirador-content .m-carte{
        margin-top: 2em;
    }    
}
@media (max-width: 820px) {
    * {
        background-attachment: scroll !important;
    }
}
@media only screen and (max-width: 780px) {  
    .home-intro{
        padding: 115px 0;
    }  
    .nos-services-content .bloc, .notre-equipe-2-content .bloc{
        /* flex-direction: column; */
        display: inline-block;
        margin: 0 auto;
        max-width: 400px;
    }
    .nos-services-content .bloc div, .notre-equipe-2-content .bloc div{
        width: 100%;
    }
    .nos-services-content .bloc div:last-child, .notre-equipe-2-content .bloc div:last-child{
        margin-top: 3.5em;
    }

    .mirador-header{
        /* display: block; */
        flex-direction: column;
        text-align: center;        
    }
    .mirador-header .m-logo {
        border-right: none;
        padding-right: 0;
        margin-bottom: 1em;
    }    
    .mirador-header .m-info {
        padding-left: 0;
    }    
}
@media only screen and (max-width: 625px) {
    h1{
        font-size: 1.7em;
    }
    h2{
        font-size: 1em;
    }
    h3{
        font-size: 0.875em;
    }
    h4, .btn, .filter-btn{
        font-size: 0.75em;
    }
    p, .mirador-header .m-info ul li{
        font-size: 0.75em;
    }

    .container{
        padding: 0 25px;
    }

    .home-intro h1{
        font-size: 2.8em;
    }
    .home-intro p{
        font-size: 1em;
    }
    .btn-soumission-home{
        font-size: .95em !important;
    }
    .home-gallery .item {
        height: 150px !important;
    }    

    .page-intro{
        padding: 50px 0;
    }
    .page-intro h1{
        font-size: 1.9em;
    }
    .page-intro p{
        font-size: 0.9em;
    }  

    #nos-services-page .description{
        padding: 35px 25px!important;
    }   

    #nos-modeles-page .description{
        padding: 35px 25px!important;
    }     
    
    #jopel-coordonnees{
        padding: 25px 0;
    }    
    .contact-info > div {
        gap: .75em;
    }    
    .contact-info img{
        max-width: 35px;
    } 
    #contact-form form div.flex{
        display: block; 
    }       
    #contact-form form div.flex input:nth-child(2){
        margin-top: .5em;
    } 
    .accreditation{
        padding: 45px 0;
    }      
}
@media only screen and (max-width: 600px) {
    .membres{
        grid-template-columns: repeat(2, 1fr);
    }
    .membres .cards img{
        max-width: 100px;
    }    
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in {
    from {scale: .8; opacity: 0;}
    to {scale: 1; opacity: 1;}
}