@charset "UTF-8";
/*
 * Version mobile / tablette.
 * Toutes les règles sont dans la media query : la version desktop (>= 1024px) n'est pas modifiée.
 */

/* Bouton menu : invisible sur desktop */
.menu_toggle{
    display: none;
}

@media (max-width: 1023px) {

    /*--GENERAL--*/
    body{
        min-width: 0;
        overflow-x: hidden;
    }

    .container{
        width: auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    img{
        max-width: 100%;
        height: auto;
    }

    /*--HEADER--*/
    header,
    header > .container{
        height: auto;
    }

    header > .container{
        background-size: cover;
        background-position: center;
        padding-top: 20px;
        padding-bottom: 35px;
        position: relative;
    }

    #image_header{
        width: 240px;
        max-width: 65%;
        margin: 0;
    }

    #info_logo{
        margin: 5px 0 0 0;
    }

    .menu_toggle{
        display: block;
        position: absolute;
        top: 22px;
        right: 16px;
        width: 44px;
        height: 44px;
        padding: 10px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.7);
        cursor: pointer;
        box-sizing: border-box;
    }

    .menu_toggle span{
        display: block;
        height: 2px;
        margin: 4px 0;
        background-color: #FFFFFF;
    }

    nav{
        display: none;
        margin: 15px 0 0 0;
    }

    nav.open{
        display: block;
    }

    nav > ul{
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column-reverse; /* le HTML est en ordre inverse (float:right sur desktop) */
    }

    nav > ul > li{
        display: block;
        float: none;
        margin: 0;
        font-size: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    nav > ul > li > a{
        display: block;
        padding: 10px 0;
    }

    nav .active{
        background-image: none;
        font-family: "open-sans-bold";
    }

    /*--ACCUEIL--*/
    #slide{
        height: 160px;
    }

    .img_carousel{
        height: 160px;
        object-fit: cover;
    }

    .arrow_slide{
        margin-top: 60px;
    }

    #arrow_left{
        left: 10px;
    }

    #arrow_right{
        right: 10px;
    }

    #info{
        height: auto;
        padding-bottom: 20px;
    }

    #info > .container{
        display: flex;
        flex-direction: column-reverse; /* qui sommes-nous / projets / coordonnées */
    }

    .div_infos,
    #qui_sommes_nous,
    #vos_projet,
    #nos_coordonnees{
        float: none;
        display: block;
        width: auto;
        height: auto;
        padding: 0 0 15px 0;
    }

    .section_title{
        font-size: 42px;
        margin-top: 20px;
    }

    .div_en_savoir_plus{
        position: static;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .en_savoir_plus_link{
        display: inline-block;
    }

    /*--PRESENTATION--*/
    .extend_background_color{
        height: auto;
        display: block;
        padding-bottom: 20px;
    }

    .presentation_info_container{
        width: auto;
        margin-left: 0;
        display: flex;
        flex-direction: column-reverse;
    }

    .presentation_info{
        float: none;
        width: auto;
        height: auto;
        padding: 0;
        margin-bottom: 15px;
    }

    .coordonnee_info_presentation{
        text-align: left;
    }

    .coor{
        padding-left: 0;
    }

    .presentation_info #ul_presentation_info_2 li,
    #ul_presentation_info_2_bis li{
        margin-left: 0;
    }

    #ul_presentation_info_2,
    #ul_presentation_info_2_bis{
        padding-left: 20px;
    }

    .form_contact{
        position: static;
    }

    .extended_background_color_grey{
        height: auto;
        display: block;
        padding-bottom: 10px;
    }

    #realisation_container{
        width: auto;
        height: auto;
        margin-left: 0;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    #realisation_container > a{
        display: block;
        width: calc(50% - 5px);
        margin-bottom: 10px;
    }

    .realisation_div{
        float: none;
        width: 100%;
        height: 130px;
        margin-left: 0;
    }

    .realisation_div_text{
        width: 100%;
        background-size: cover;
    }

    /*--PAGES REALISATIONS--*/
    #full_elem_container > div{
        display: block;
        float: none;
        height: auto;
    }

    #elem_left,
    #elem_right{
        width: auto;
    }

    #vignette_container{
        width: auto;
        height: auto;
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #vignette_container > a{
        display: block;
        width: calc(33.333% - 3px);
        margin-bottom: 4px;
    }

    .vignette{
        float: none;
        width: 100%;
        height: auto;
        margin: 0;
    }

    .vignette_background{
        display: block;
        width: 100%;
        height: auto;
    }

    .elem_info{
        width: auto;
    }

    .elem_coordonnee_tittle,
    .autre_realisation_tittle{
        font-size: 34px;
    }

    .autre_realisation_tittle{
        margin-top: 30px;
    }

    #ul_elem{
        padding-left: 20px;
    }

    #ul_elem li{
        margin-left: 0;
        line-height: 2;
    }

    /*--MENTIONS / PLAN / 404--*/
    .mentions div,
    .plan div{
        float: none;
    }

    .left_container,
    .right_container{
        width: auto;
    }

    .right_container > div{
        margin: 20px 0 0 0;
    }

    /*--CONTACT--*/
    .form_contact_float,
    #left_form_contact,
    #right_form_contact{
        float: none;
        width: auto;
        margin-top: 20px;
    }

    .input_container_float{
        float: none;
    }

    .line_contact{
        display: flex;
        flex-direction: column-reverse; /* label au-dessus du champ */
    }

    .input_container,
    .label_container{
        width: auto;
        text-align: left;
    }

    label{
        line-height: 24px;
        margin-right: 0;
    }

    input[type=text],
    input[type=email],
    textarea{
        width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* évite le zoom automatique sur iOS */
    }

    input[type=submit]{
        float: none;
        margin-right: 0;
        width: 100%;
    }

    .contact_coordonnee_container{
        position: static;
        width: auto;
        height: auto;
        margin-left: 0;
        padding: 10px 20px 20px 20px;
    }

    /*--FOOTER--*/
    footer{
        display: flex;
        flex-direction: column-reverse;
        padding: 10px 0;
    }

    .section_footer,
    #ower_section_footer,
    #social_section_footer,
    #home_menu_footer{
        float: none;
        width: auto;
        height: auto;
        text-align: center;
    }

    #footer_menu{
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        justify-content: center;
    }

    #footer_menu > li{
        float: none;
        margin: 0 8px;
    }

    .owner{
        line-height: 30px;
    }
}

/* Vignettes : 5 colonnes sur tablette / téléphone en paysage (évite d'agrandir les vignettes) */
@media (min-width: 600px) and (max-width: 1023px) {
    #vignette_container{
        justify-content: flex-start;
        gap: 4px;
    }

    #vignette_container > a{
        width: calc((100% - 16px) / 5);
        margin-bottom: 0;
    }
}

/* Zoom des photos (zoombox) sur mobile */
@media (max-width: 1023px) {
    /* bouton fermer plus grand pour le doigt */
    #zoombox.zoombox .zoombox_close{
        width: 44px;
        height: 44px;
        right: -22px;
        top: -22px;
        background-position: center;
    }

    #zoombox .zoombox_title{
        font-size: 14px;
        padding-right: 30px;
    }
}

/* Écrans tactiles : flèches précédent / suivant toujours visibles (pas de survol) */
@media (max-width: 1023px) and (hover: none) {
    #zoombox .zoombox_prev,
    #zoombox .zoombox_next{
        opacity: 0.8;
    }
}

/* Téléphone en paysage : la barre de miniatures masquait le bas de la photo */
@media (max-width: 1023px) and (max-height: 500px) {
    #zoombox .zoombox_gallery{
        display: none !important;
    }
}