/* --------------------
    Responsive Design 
   -------------------- */

/* === Mobile Portrait (≤ 480px) === */
@media screen and (max-width: 480px) {
    /*  * { outline: 1px solid red !important; }  */
    body,
    .site-content,
    .site-header-inner { box-sizing:border-box; }
    .formcontact { width:90%; }
    #colophon .footerinfos .infos .img-logo-footer { width:80%; margin:0 auto; }
    #colophon .footerinfos .infos { width: 100% !important; }
    #colophon .footerinfos .infos .infos-tel,
    #colophon .footerinfos .infos .infos-mail,
    #colophon .footerinfos .infos .infos-adresse,
    #colophon .footerinfos .infos .infos-siret { width:calc(100% - 85px); }
    #colophon .footerinfos .infos .infos-tel { font-size:1.5rem; }
    #colophon .footernav ul li { max-width: 410px; width:unset; }
    #colophon .footerinfos .infos .infos-mail,
    #colophon .footerinfos .infos .infos-adresse,
    #colophon .footerinfos .infos .infos-siret { font-size:0.9rem; }
    .zone-txt-accueil { width: 96%; left: 2%; top: 165px; }
    .zone-txt-accueil .txt-accueil { line-height: 1.5rem; }
    .txtbtncta { display:none; }
    #masthead .site-header-inner .site-branding { padding-left: 10px; }
    #masthead .site-header-inner .titre-mobile { font-size:1.3rem; }
    #masthead .site-header-inner #mobile-menu-toggle { margin-left: 0px; }
}

/* === < 980 px === */
@media screen and (max-width: 980px) {
    #colophon { flex-direction: column-reverse !important; flex-wrap: nowrap !important; }
    .footernav, .footerinfos { width:100% !important; }
    .footerinfos .infos { height: 410px; margin: 0px auto; }
    .footerinfos .infos { width: 410px !important; }
    .footernav ul { margin: 30px auto 0 auto !important; }
    .footernav ul li { text-align:left; width:410px; margin-left:auto; margin-right:auto; }
    .footernav ul li:last-child { margin-bottom:80px; }
    .site-info { position:absolute; bottom:0px; }
    .site-info { font-size:14px; }
    #contact {margin-bottom: 250px; }
}

/* === < 1024 px === */
@media screen and (max-width: 1024px) {
    #masthead, .site-header-inner { height: 51px; }
    .site-header-inner { justify-content: space-between; }
    #site-navigation { opacity:0; visibility: hidden; transform: translateY(-4px); position:absolute; top:-50px; width:100%; }
    #mobile-menu-toggle { display:block; height:45px; margin-right: 25px; }
    .site-branding { padding-left: 20px; margin-top: 5px; }
    .site-branding img { height:45px; width:46px; }
    .zone-txt-accueil { width:90%; left:5%; box-sizing:border-box; top:160px; }
    .img-accueil { height:500px; background-position: right bottom; }
    #hero { height:500px; }
    .txt-presentation-before { left: calc(50% - 146px); top:382px; bottom:unset; z-index:999; }
    .big-txt-presentation, .big-txt-presentation { font-size:4.6rem; }
    .txt-presentation-before-align, .txt-presentation-after { font-size:1.6rem; }
    .txt-presentation-after { left: calc(50% - 136px); }
    .titre-mobile {display:block; width:100%; height:50px; font-family:'eras_light_itcregular'; font-size:1.5rem; line-height:50px; text-align:center; }
    .bloctextecontainer { flex-direction: column; }
    .bloctextecontainer .bloctexteimg { margin:0px auto 40px auto; }
    .bloctextecontainer.inverse .bloctexteimg { margin:40px auto 0px auto; }
    .bloctextecontainer .bloctextetxt { width:90%; padding:0px; margin:0 auto; }
    .bloctextecontainer.inverse .bloctextetxt { padding:0; }
    .btncta-a-propos { min-width:120px; }
    .cta-a-propos { width:94%; }
    .formrow { flex-direction: column; }
    .taillegrid50, .taillegrid33, .taillegrid25 { width:100%; margin-top:10px; min-width:unset; }
    .formcontact { margin-bottom:500px; }
    #colophon { margin-top:0; display:flex; flex-direction: row-reverse; flex-wrap: wrap; }
    .footernav { clip-path:none !important; position:relative; width:50%; left:unset; top:unset; height: 500px; }
    .footernav ul { width: 95%; margin: 130px 5% 0 0; }
    .footernav ul li { margin-bottom: 10px; }
    .footernav ul li:last-child { margin-top: 20px; }
    .footerinfos { clip-path:none !important; position:relative; width:50%; left:unset; top:unset; }
    .footerinfos .infos { width:90%; }
    .site-info { margin-top:0; }
}

/* === < 1300 px === */
@media screen and (max-width: 1300px) {
    #site-navigation ul li { margin-right:25px; }
    .footernav { clip-path: polygon(100% 0%, 100% 100%, 0 100%, 19% 39%, 48% 5%); }
    .footerinfos { clip-path: polygon(73% 68%, 100% 100%, 0 100%, 0 0, 51% 7%); }
}

/* Respect des préférences d’accessibilité */
@media (prefers-reduced-motion: reduce){

}

@supports not (overflow: clip){
    #content{ overflow: hidden; }
}