/**************/
/* RESPONSIVE */
/**************/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

    body, html { overflow-x: hidden; font-size: 1rem !important; }
    .tel-link { pointer-events: auto; cursor: pointer; }

    /* Header devient statique en mobile pour défiler avec le contenu.
       La barre .actions_mobile reste fixed en haut (height: 3rem),
       donc on pousse le header de 3rem vers le bas avec margin-top.
       Layout : logo à gauche, menu langue à droite, sur une seule ligne. */
    header.main {
        position: static;
        top: auto;
        margin-top: 3rem;
        padding: 1rem;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }
    header.main .header_section.btns { display: none; }
    .btn_green, .btn_blue, .btn_trans { border-radius: 2rem; padding: .5rem 1rem; font-size: 1rem; }
    header.main .header_section.logo {
        position: static;
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-start;
        order: 1;
    }
    header.main .header_section.logo img {
        width: 10rem;
        padding: 0;
        margin: 0;
    }
    header.main .header_section.menu {
        position: static;
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-end;
        order: 2;
    }
    .menu_wrapper { font-size: 1rem; padding: 0 1rem; height: 3rem; background-color: transparent; }
    .menu_wrapper li { font-size: 1rem; line-height: 1; }
    .menu_wrapper a { font-size: 1rem; color: #102B4E !important; font-weight: 400 !important; text-decoration: underline; }
    #hero { padding-top: 2rem; }
    .hero_content { padding: 0 2rem 2rem 2rem; }
    #hero h1 { font-size: 1.65rem !important; margin: 0 0 2rem 0; font-weight: 500; }
    .sites_wrapper_left, .sites_wrapper_right { padding: 2rem; }
    .sites_wrapper_left__logo, .sites_wrapper_right__logo { margin: 0 0 2rem 0; height: auto; }
    .sites_wrapper_left__logo img { width: 75%; }
    .sites_wrapper_right__logo img { width: 30%; }
    h2 { font-size: 1.75rem; margin: 0 0 1.5rem 0; text-align: center !important; }
    .sites_wrapper_left .btn_trans, .sites_wrapper_right .btn_trans { margin-top: 2rem; }
    #residential_project { background-color: #f4f4f6; }
    .residential_project__content { width: 80%; border-radius: 2rem; padding: 2rem; margin-top: 10rem; margin-bottom: 2rem; }
    .residential_project__content .btn_trans { margin-top: 2rem; }
    footer.main { padding: 2rem; }
    footer.main ul a { font-size: .85rem; }
    footer.main ul { flex-direction: column; align-items: center; gap: 1rem; }
    .hero_content p { font-size: 1rem !important; }
    .archive footer { margin-left: -2rem; margin-right: -2rem; }
    footer.main li { margin: 0 !important; }
    body, p, li, #footer { font-size: 1rem !important; }
    #content ul li { margin-bottom: 0 !important; }

    /* Fixes */
    .menu_wrapper ul { margin: 0 !important; }
    .row.g-0 { display: block; }
    p { line-height: 1.3; font-size: 1rem !important; }
    ol, ul { margin-bottom: 1rem; padding-left: 1rem; }
    .actions_mobile { display: flex; }

    #content { padding: 1rem !important; }
    .slick-slide img { border-radius: 0; }
    .btn_white { border-radius: 1rem; padding: 1rem; font-size: 1rem; }
    .slick-dots { position: static; gap: .5rem; margin: 1.5rem auto 0 auto; padding: 0 2rem; border-radius: 2rem; min-width: 10rem; height: 2rem; }
    .slick-dots button { width: .75rem; height: .75rem; }



}

/* Small devices (portrait tablets and large phones, 600px to 991px) */
@media only screen and (min-width: 601px) and (max-width: 991px)  {

    body, html { overflow-x: hidden; }
    .tel-link { pointer-events: auto; cursor: pointer; }

}

/* Medium devices (landscape tablets, 992px to 1024px) */
@media only screen and (min-width: 992px) and (max-width: 1024px) {

    body, html { overflow-x: hidden; }
    .tel-link { pointer-events: auto; cursor: pointer; }

}

/* Large devices (laptops/desktops, 1025px to 1200px) */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {

    body, html { overflow-x: hidden; }

}

/* Extra large devices (large laptops and desktops, 1201px to 1366px) */
@media only screen and (min-width: 1201px) and (max-width: 1366px) {

    body, html { overflow-x: hidden; }
  
}