
@media (max-width: 1400px){

    .section_services .deco {
        width: 26vw;
        height: 20vw;
    }

    .section_rs {
        padding-bottom: 300px;
    }

}


@media (max-width: 1370px){

    h1, .section_accueil > .marge_cote > h1 span{
        font-size: 50px;
    }

    .section_rs .deco {
        width: 26vw;
        height: 20vw;
    }


}

@media (max-width: 1200px){

    .actualite .actualite_content .deco{
        width: 15.1vw;
        height: 18vw;
    }

    .actualite .actualite_content {
        padding: 60px 14vw 50px 60px;
    }
}

@media (max-width: 1100px){
    .histoire{
        flex-direction: column;
        gap: 20px;
    }

    .histoire img:last-child{
        width: 100%;
    }

    .histoire>div:first-child {
        width: 100%;
    }

    .fleches {
        gap: 30px;
        margin-top: 40px;
    }

    .fleches>div{
        display: flex;
    }

    .section_contact>div:last-child>div {
        padding: 120px 50px 60px 90px;
    }



    h1, .section_accueil > .marge_cote > h1 span{
        font-size: 40px;
    }


    .a_propos>div:first-child>ul {
        padding: 100px 80px 50px 50px;
    }

    .a_propos>div:first-child>ul>li {
        font-size: 18px;
    }

    details .contenu p, details .contenu ol, details .contenu ul {
        width: 100%;
    }

    details h2, details h3 {
        font-size: 22px;
    }

    details .plus_rond svg{
        height: 22px;
        width: 32px;
    }

    .a_propos>div:last-child {
        flex: 0 0 45%;
    }
}

@media (max-width: 1500px) {  /* 1040 */

    #header nav, .top_head #header nav{
        display: flex;
        width: fit-content;
        padding-left: 40px;
    }

    #header nav, .top_head #header nav,
    .single-actualites.top_head #header nav,
    .privacy-policy.top_head #header nav,
    .single-actualites #header nav,
    .privacy-policy #header nav{
        clip-path: unset !important;
        background-color: transparent;
        padding: 0;
        /*background-color: var(--Noir);*/
        /*clip-path: polygon(100% 0, 100% 100%, 12% 75%, 0 0);*/
        /*padding: 40px var(--side-base) 40px 80px;*/
    }

    #branding{
        position: relative;
        z-index: 2;
    }

    #menu>.menu-toggle,
    .privacy-policy #menu>.menu-toggle,
    .single-actualites #menu>.menu-toggle{
        padding: 40px var(--side-base) 40px 40px;
        background-color: var(--Noir);
        clip-path: polygon(100% 0, 100% 100%, 12% 75%, 0 0);
        margin-top: 0;

        transition: padding .2s ease, clip-path .05s ease, background-color .5s ease;
    }

    .top_head #menu>.menu-toggle{
        /*padding: 110px var(--side-base) 40px 40px;*/
        clip-path: polygon(100% 0, 100% 100%, 20px calc(100% - 6px), 0 0);
        background-color: transparent;
    }

    .privacy-policy.top_head #menu>.menu-toggle,
    .single-actualites.top_head #menu>.menu-toggle{
        padding: 40px var(--side-base) 40px 40px;
        background-color: var(--Noir);
        clip-path: polygon(100% 0, 100% 100%, 12% 75%, 0 0);
        margin-top: 0;

        transition: padding .2s ease, clip-path .05s ease, background-color .5s ease;
    }

    .menu-toggled .top_head #menu>.menu-toggle{
        background-color: var(--Noir);
        clip-path: polygon(100% 0, 100% 100%, 20% 85%, 0 0);
    }

    /*html.menu-toggled,*/
    /*html.menu-toggled body{*/
    /*    overflow: hidden;*/
    /*    max-height: 100svh;*/
    /*    height: 100%;*/
    /*}*/

    .content_nav{
        width: 100%;
        position: absolute;
        z-index: 1;
    }


    #close-bar1, #close-bar2, #close-bar3 {
        background-color: var(--Blanc);
    }

    #menu>#main-menu-container {
        position: fixed !important;
    }


    #menu>#main-menu-container {
        position: fixed;
        inset: 0;
        z-index: -1;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-start;
        background: var(--Brun);
        height: 100svh;
        width: 100%;
        max-height: 0svh;

        /*clip-path: polygon(100% 0, 100% 90px, calc(100% - 70px) 70px, calc(100% - 90px) 0);*/

        pointer-events: none;

        /*transform: translateX(100%);*/
    }

    #menu.toggled>#main-menu-container {
        /*height: 500px;*/
        /*transform: translateX(0);*/
        pointer-events: all;
        max-height: 100svh;

        /*clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0 0);*/
    }

    .hide #menu>#main-menu-container {
        max-height: 0svh;
        transition: 0s;
    }

    #menu .menu {
        align-items: flex-start;
        height: 100%;
        padding: 240px var(--side-base) 0 60px;
    }

    #menu .menu a{
        padding: 10px 0;
        display: flex;
    }


    #menu .menu>.current_page_item>a {
        padding-left: 0px;
        padding-right: 26px;
    }

    .top_head #site-title>a img {
        width: 90px;
        height: 110px;
    }

    .top_head #site-title>a {
        padding: 43px 130px 60px 65px;
    }
}


@media (max-width: 990px){

     #footer{
         padding-right: var(--side-base);
     }

    .ours {
        width: 50vw;
        height: 40vw;
    }



    .actualite .actualite_content .deco{
        width: 11vw;
        height: 13vw;
    }

    .actualite .actualite_content {
        padding: 80px 10vw 50px 60px;
    }

    .section_services .deco {
        width: 20vw;
        height: 16vw;
    }

    .section_rs {
        padding-bottom: 200px;
    }


    .section_colab .deco {
        width: 30vw;
        height: 23vw;
    }

}



@media (max-width: 900px){

    :root {
        --ltspace: 65px;
        --mdspace: 90px;
        --bigspace: 105px;

        --side-base: 20px;
    }


    .actualite .actualite_content .deco{
        width: 11vw;
        height: 13vw;
    }

    .actualite .actualite_content {
        padding: 80px 60px 40px 50px;
    }

    .actualite .actualite_content h3 {
        font-size: 23px;
    }

    .references {
        gap: 20px;
    }

    .section_services .deco {
       display: none;
    }

    .section_rs {
        padding-bottom: var(--mdspace);
    }



    h1, .section_accueil > .marge_cote > h1 span{
        font-size: 34px;
    }


    .section_contact>div:first-child {
        padding-right: 0px;
        width: 100%;
    }

    .section_contact>div:first-child form {
        max-width: 600px;
    }

    .a_propos {
        flex-direction: column-reverse;
    }

    .a_propos>div{
        flex: unset;
    }

    .a_propos>div:first-child,
    .section_contact>div:last-child{
        /*aspect-ratio: 1 / 1;*/
        aspect-ratio: unset;
        width: 100%;
        overflow: hidden;
        height: fit-content;
    }

    .a_propos>div:first-child img,
    .section_contact>div:last-child img {
        aspect-ratio: 1 / 1;
    }

    .a_propos>div:first-child>ul {
        margin-bottom: -1px;
    }

    .a_propos h2 {
        font-size: 18vw;
        margin-top: 0;
        width: 100%;
        max-width: unset;
    }

    .section_contact{
        flex-direction: column;
    }

    .section_contact>div:last-child{
        margin-top: var(--ltspace);
        max-width: unset;
    }

    .section_contact {
        padding-bottom: var(--bigspace);
    }

    .section_rs .deco {
        display: none;
    }


    #menu .menu {
        padding: 240px 40px 0 60px;
    }


    .content-page h1{
        font-size: 40px;
        margin-bottom: 10px;
    }

}


@media (max-width: 770px){
    h1, .section_accueil > .marge_cote > h1 span{
        font-size: 30px;
    }

    .section_accueil>.marge_cote>svg {
        width: 220px;
    }


    .services {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
        overflow: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        margin-right: calc(var(--side-base) * (-1));
        margin-left: calc(var(--side-base) * (-1));
        padding: 0 var(--side-base);
    }

    .services>div{
        width: calc(80vw - var(--side-base) - var(--side-base));
        max-width: 400px;
        scroll-snap-align: start;
        scroll-margin-left: var(--side-base);
        cursor: grab;
    }
}

@media (max-width: 700px){

    .section_contact{
        flex-direction: column;
    }

    .section_contact>div:first-child {
        padding-right: 0;
        flex: unset;
        width: 100%;
    }

    .section_contact>div:last-child {

    }





    .a_propos .liste_deroule {
        margin-top: 20px;
    }

    .a_propos>div:first-child,
    .section_contact>div:last-child{
        margin-left: calc(var(--side-base) * (-1));
        margin-right: calc(var(--side-base) * (-1));
        margin-bottom: calc(var(--mdspace) * (-1));
        width: auto;
    }

    .section_contact>div:last-child {
        margin-bottom: calc(var(--bigspace) * (-1));
    }


    .section_contact>div:last-child>div{
        margin-bottom: -1px;
        background-color: var(--Brun);
    }

    .header-edit-link{
        display: none;
    }
}



@media (max-width: 600px){

    :root {
        --small-margin: 20px;
        /*--ltspace: 40px;*/
        /*--mdspace: 40px;*/
        /*--bigspace: 40px;*/

        --ltspace: 60px;
        --mdspace: 60px;
        --bigspace: 60px;

        --side-base: 20px;
    }

    h1, .section_accueil > .marge_cote > h1 span{
        font-size: 23px;
    }

    .content-page h1{
        font-size: 23px;
        margin-bottom: 10px;
    }

    h2, h2 span, h2 strong{
        font-size: 22px;
    }

    .section_services h2 strong::before{
        inset: -1px -4px 3px;
    }

    #menu .menu {
        padding: 160px var(--side-base) 0 var(--side-base);
    }

    #menu .menu>.current_page_item>a {
        padding-left: 15px;
    }




    .content-page{
        padding-top: 160px;
    }

    #site-title>a, .top_head  #site-title>a  {
        padding: 20px 60px 36px 20px;
    }

    #site-title>a img {
        width: 46px;
        height: 57px;
    }

    .top_head #site-title>a img {
        width: 67px;
        height: 82px;
    }

    .section_accueil > .marge_cote > h1{
        margin-bottom: 10px;
    }

    .section_accueil>.marge_cote>svg {
        width: 190px;
    }

    #footer{
        flex-direction: column;
        align-items: flex-start;
        padding: 40px calc(var(--side-base)) 0 var(--side-base);
    }

    .bas_footer{
        padding-top: 0;
    }

    .lien_logo_footer svg{
        width: 150px;
        height: 66px;
    }

    #footer .bas_footer>p{
        margin: 20px 0;
    }


    .ours {
        width: 80vw;
        height: 70vw;
        margin: 0 auto;
    }


    .sur_titre .actualite_liens p {
        display: none;
    }

    .actualite_liens svg{
        height: 45px;
        width: 45px;
    }

    .actualite_liens {
        gap: 10px;
    }


    .section_services h2{
        margin-bottom: 20px;
    }


    .container_actu {
        padding-top: 150px;
        padding-bottom: 45vw;
    }


    .container_actu .deco,
    .section_rs .deco{
        width: 44vw;
        height: 40vw;
    }


    .section_services .deco{
        display: none;
    }

    .histoire>div:first-child{
        display: grid;
        grid-template-columns: 1fr auto;
    }


    .histoire>div:first-child .fleches{
        grid-area: 1 / 2;
    }

    .swipHistoire{
        width: 100%;
        grid-area: 1 span / 2 span;
    }

    .histoire .fleches{
        gap: 10px;
        margin-top: 0;
        height: fit-content;
    }

    .fleches>div {
        margin-top: -11px;
        margin-left: 6px;
    }

    .fleches>div svg{
       height: 35px;
        width: 35px;
    }

    .section_colab .fleches{
        gap: 10px;
        height: fit-content;
    }



    * {
        font-size: 16px;
    }


    .container_actu h3 {
        font-size: 18px !important;
        margin-top: 20px !important;
        line-height: 120%;
    }

    .actualite_content ul, .actualite_content p, .actualite_content ol {
        margin-top: 14px;
        margin-bottom: 14px;
    }

    .actualite_content ul li::before,
    .histoire li::before,
    details .contenu li::before{
        margin-top: 10px;
    }


    .actualite {
        flex-direction: column;
    }

    .actualite_image img {
        height: auto;
        width: 100%;
    }



    .references {
        grid-template-columns: repeat(2, 1fr);
    }

    .references>a{
        grid-area: 1 span / 1 span ;
    }

    .references img{
        aspect-ratio: 1 / 1;
    }


    .references>a:nth-child(5){
        grid-area: 1 span / 2 span;
    }

    .references>a:nth-child(3),
    .references>a:nth-child(4),
    .references>a:nth-child(6),
    .references>a:nth-child(7),
    .references>a:nth-child(8),
    .references>a:nth-child(9){
        grid-area: 1 span / 1 span;
    }

    .a_propos>div:first-child>ul {
        padding: 70px 70px 58px 20px;
    }

    .section_contact>div:last-child>div {
        /*padding: 60px 45px 20px 20px;*/
    }

    .a_propos>div:first-child>ul>li {
        font-size: 14px;

        font-weight: 400;
    }

    .liste_deroule details .contenu>*:first-child {
        margin-top: 20px;
    }

    .section_contact>div:last-child>div {
        padding: 70px 20px 58px 70px;
    }

    .a_propos>div:first-child>ul {
        padding: 70px 70px 58px 20px;
    }


    .actualite_image .actualite_date{
        margin-bottom: -1px;
    }

    .actualite .actualite_content {
        padding: 26px 20px 20px 20px;
    }

    .actualite .actualite_content h3{
        margin-right: 24px;
    }

    .actualite .actualite_content h3 {
        font-size: 18px;
    }

    .actualite_image .actualite_date {
        padding: 24px 30px 10px 23px;
    }

    .services h3{
        font-size: 18px;
        margin-top: 20px;

    }

    .services .contain_icon svg{
        height: auto;
        width: auto;
        max-height: 70px;
        max-width: 80px;
    }

    .contain_icon {
        height: 80px;
    }


    .section_colab .deco {
        /*width: 30vw;*/
        /*height: 23vw;*/
    }

    .section_colab .swipCollaborateur{
        margin-top: 0;
    }

    .swipCollaborateur p {
        font-size: 16px;
    }

    .swipCollaborateur .fleches {
        top: 70vw;
        left: 49vw;
    }

     .es-grid-layout{
        gap: 20px !important;
    }



    details .plus_rond svg {
        height: 18px;
        width: 26px;
    }

    details .plus_rond svg path {
       stroke-width: 3;
    }

    .section_titre h1 {
        font-size: 22px;
    }

    .sub_form {
        margin: 16px 0 0 0;
    }

    .section_contact>div:first-child p:last-of-type {
        margin-bottom: 0;
    }

}


@media (max-width: 500px) {
    .section_rs {
        grid-template-columns: 1fr;
    }

    .mur_rs {
        margin-top: 40px;
        grid-area: 1 span / 1 span;
    }

    .section_rs .lien_rs{
        grid-area: 3 / 1;
        margin-top: 30px;
    }
}


@media (max-width: 432px) {
    .fleches > div {
        margin-top: -3px;
    }

    .section_contact>div:last-child img {
        object-position: 70%;
    }

    #animation-ours {
        margin: auto auto 20px;
        width: 240px;
    }
}


@media (max-width: 400px) {
    .container_actu {
        /*padding-bottom: calc(var(--bigspace)* 1.7);*/
    }

    .section_accueil>.marge_cote>svg {
        width: 160px;
    }

    details h3 {
        font-size: 20px;
    }

}


@media (max-height: 420px) and (max-width: 800px) {
    #animation-ours {
        height: 200px;
    }

    .section_accueil>.marge_cote {
        height: fit-content;
    }

    .section_accueil > .marge_cote > h1 span {
        font-size: 26px;
    }

}