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

@media (max-width: 1170px) {
    /*** ACTUALITES ***/
    #bloc_archives {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /*** CONTACT ***/
    .conseillers_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {

    /*** GENERAL ***/
    h1 {
        font-size: 1.875rem /* 30 */;
    }

    h2, .likeh2 {
        font-size: 1.563rem /* 25 */;
    }

    h3 {
        font-size: 1.125rem;
    }

    .btn_cta_general {
        font-size: 1rem;
    }

    .prenav {
        display: block;
        text-align: center;
        position: relative;
    }

    .bandeau_left {
        display: none;
    }

    #wrapperMenu {
        display: none;
    }


    /******* MENU ***********/
    body nav {
        height: auto;
        margin-top: 0 !important;
        display: none;
        width: 260px;
    }

    #wrapperMenuMobile.open {
        display: block;
    }

    #wrapperMenuMobile {
        position: absolute;
        z-index: 1000;
        left: 0;
        top: 197px;
    }

    .menu > li:hover::before, .menu > li.active::before {
        content: none;
    }

    nav > ul > li {
        border-top: 1px solid #D9D9D6;
    }

    nav ul li > a::before {
        border-bottom: none;
        padding-left: 20px;
    }

    body header nav ul li {
        width: 100%;
        float: none;
        height: auto;
    }

    body nav ul li a {
        border: none;
        font-weight: normal;
        text-align: left;
        width: auto;
        float: none;
        line-height: 45px;
        padding-left: 20px;
        background: none;
    }

    body nav > ul > li:hover > a {
        color: #5B7F95;
    }

    /****  SOUS MENU *******/
    nav ul li > ul > li {
        border-bottom: none;
    }

    nav ul li > ul li {
        margin: 0;
    }

    body nav ul li ul {
        position: relative;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        border-top: none;
        transform: none;
        border-radius: 0;
    }

    body nav ul li ul li {
        background: none;
    }

    nav ul li > ul li a {
        line-height: 30px;
        text-align: left;
        text-shadow: none;
        width: auto;
        font-size: 15px;
        float: none;
        box-sizing: content-box; /* annulation du border-box du desktop */
    }

    nav ul li > ul li a img {
        padding-right: 0;
        display: none;
    }


    /********** DEBUT MENU PUSH ***********/
    /***ANIMATION MENU HAMBURGER***/
    .text_menu {
        margin-top: 50px;
    }

    .menu-icon {
        position: absolute;
        width: 60px;
        height: 40px;
        transition: transform 0.5s;
        -moz-transition: transform 0.5s;
        -webkit-transition: transform 0.5s;
    }

    .menu-icon span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        display: block;
        width: 60px;
        height: 3px;
        background-color: #5B7F95;
        transition: background 0.5s;
        -moz-transition: background 0.5s;
        -webkit-transition: background 0.5s;
    }

    .menu-icon span::before, .menu-icon span::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -webkit-transform: translateY(-6px);
        display: block;
        width: 60px;
        height: 3px;
        background-color: #5B7F95;
        transition: transform 0.5s;
        -moz-transition: transform 0.5s;
        -webkit-transition: transform 0.5s;
    }

    .menu-icon span::after {
        transform: translateY(6px);
        -moz-transform: translateY(6px);
        -webkit-transform: translateY(6px);
    }

    .menu-icon.is-opened span {
        background: transparent;
    }

    .menu-icon.is-opened span::before {
        transform: translateY(0) rotate(45deg);
        -moz-transform: translateY(0) rotate(45deg);
        -webkit-transform: translateY(0) rotate(45deg);

    }

    .menu-icon.is-opened span::after {
        transform: translateY(0) rotate(-45deg);
        -moz-transform: translateY(0) rotate(-45deg);
        -webkit-transform: translateY(0) rotate(-45deg);
    }

    .menu-icon.is-opened {
        transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    /***FIN ANIMATION MENU HAMBURGER***/
    #menu {
        transition: all 0.3s ease;
        position: absolute;
        width: 0%;
        top: 0;
        left: -300px;
        height: auto;
        z-index: 999;
    }

    #menu-toggle {
        font-size: 22px;
        position: absolute;
        color: #000000;
        text-transform: uppercase;
        top: 134px;
        left: 0;
        z-index: 1000;
        padding: 0 20px;
        transition: all 0.3s ease;
        text-align: center;
        height: 80px;
        width: 60px;
        font-family: var(--body-font);
    }

    #menu-toggle:hover {
        cursor: pointer;
    }

    #menu.open, #menu-deroulant {
        left: 0;
        width: 200px;
        display: block !important;
        z-index: 1000;
        padding-bottom: 5px;
        height: auto;
        border: none;
    }

    #menu-toggle.open {
        left: 260px;
        width: 54px;
    }

    #menu-toggle span {
        display: block;
        font-size: 12px;
        color: #5B7F95;
        text-transform: uppercase;
    }

    #wrapperMenuMobile.open {
        background: none;
    }

    #menu-toggle {
        right: 0;
        left: auto;
        width: auto;
        height: auto;
        top: 50%;
        transform: translateY(-50%);
    }

    #menu-toggle.open {
        background: none;
        z-index: 1002;
        width: 100%;
        left: 0;
    }

    .text_menu {
        margin-top: 36px;
        position: absolute;
        width: 60px;
        height: 40px;
        font-size: 18px;
    }

    .menu {
        background: #fff;
    }

    .menu-icon {
        position: relative;
        width: auto;
        height: auto;
    }

    .menu-icon span {
        position: unset;
        top: 50%;
        left: 50%;
        transform: unset;
        display: block;
        width: 30px;
        height: 2px;
    }

    .menu-icon span::before, .menu-icon span::after {
        width: 30px;
        height: 2px;
    }

    .text_menu {
        display: none;
    }

    #menu-toggle.open {
        width: auto;
        left: unset;
    }

    .logo img:nth-child(1) {
        display: none;
    }

    #wrapperMenuMobile {
        top: 67.62px;
    }

    body nav {
        width: 100%;
    }

    /*** BANDEAU ***/
    header {
        position: relative;
    }

    .logo {
        place-items: flex-start;
    }

    /*** BOUTONS CTAS ***/
    .call_to_action {
        position: fixed;
        z-index: 1000;
        transform: translateY(0);
        margin: auto;
        text-align: center;
        background-color: #57718ac7;
        display: flex;
        justify-content: space-between;
        align-items: center;
        bottom: 0;
        left: 0;
        right: 0;
        gap: 15px;
        padding: 15px;
    }

    .call_to_action > div {
        display: inline-block;
        vertical-align: bottom;
        right: 0;
        height: 100%;
        width: auto;
        margin: 0;
        background-color: unset;
    }

    .call_to_action > div a {
        padding: unset;
    }

    .call_to_action > div img {
        width: 50px;
    }

    .call_to_action > div:nth-child(3) img {
        width: 45px;
    }

    .call_to_action > div:nth-child(4) img {
        width: 55px;
    }

    .call_to_action > div a span {
        display: none;
    }

    .cta_actus,
    .cta_essai,
    .cta_actus {
        padding: 15px;
    }
    .call_to_action {
        padding: 0;
    }

    .scrollToTop {
        bottom: 70px;
    }


    /********** FIN MENU PUSH ***********/
    .tablette {
        display: block;
    }

    header .telephone {
        display: block;
    }


    /*** ACCUEIL **/
    .type2-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .type2-img {
        display: block;
        margin: var(--center);
    }

    .footer-contact-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-contact-right {
        padding: 30px;
    }

    .footer-contact-map {
        height: 430px;
    }

    .footer-contact-map iframe {
        border-radius: var(--border-radius);
    }


    /*** CONTACT **/
    .form-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }
    .content_right {
        padding: 30px;
    }
	#map {
		height: 350px;
	}


    /*** PAGES DYNS **/
    .text_champ_image {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .image_droite img, .image_gauche img {
        max-height: 500px;
        display: block;
        margin: var(--center);
    }

    .text_champ_image .image_droite {
        order: unset;
    }

}

@media (max-width: 850px) {
    /*actu*/
    .une_archive {
        width: 47%;
    }

    #page_actu .photo_actu {
        width: 100%;
    }

    #page_actu .texte_article {
        width: 100%;
    }

    .footer_info_content > div {
        width: 100%;
        text-align: center;
    }

    .footer_info_content div h4 {
        display: inline-block;
        font-size: 16px;
    }

    .footer_info_content div iframe {
        width: 70%;
    }

    /*hub realisation*/
    #hubRealisations {
        margin-left: -15px;
        margin-right: -15px;
    }

    #hubRealisations .realisationWrapper {
        float: left;
        width: 50%;
        padding: 15px;
        box-sizing: border-box;
    }

    #hubRealisations .realisationWrapper:nth-child(3n+1) {
        clear: none;
    }

    #hubRealisations .realisationWrapper:nth-child(2n+1) {
        clear: both;
    }

    /*MODULE OCCASION*/
    .un_filtre_multiselect,
    .un_filtre_multiselect_range {
        width: 100%;
    }

    .occasions_liste_voiture {
        width: 50%;
    }

    .occasionDetail_sliderWrapper,
    .occasionDetail_infos {
        width: 100%;
    }

    .occasionDetail_equipements_item {
        width: 100%;
    }

    /**formulaire popup**/
    .form-popup {
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }

    .image_formu_popup {
        display: none;
    }

	/*** CONTACT ***/
	.conseillers_list {
		grid-template-columns: minmax(0, 1fr);
	}


}


@media (max-width: 667px) {

    /**bouton**/
    .logo, .logo_succursale {
        text-align: center;
    }

    .bandeau_left {
        display: none;
    }

    /** FOOTER **/
    .footer_info_content {
        flex-direction: column;
    }

    .footer-logo {
        margin: var(--center);
    }

    .footer-links {
        width: 100%;
        justify-content: center;
    }

}

@media (max-width: 630px) {
    #bloc_archives {
        grid-template-columns: minmax(0, 1fr);
    }
}


@media (max-width: 511px) {
    #hubRealisations .realisationWrapper {
        width: 100%;
    }
}

@media (max-width: 480px) {

    /*** FOOTER ***/
    .footer-links {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .footer-link-titre,
    .footer-link div {
        text-align: center;
    }

    .footer_bas_content {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }


    #page_home .page_dynamique_content h2 {
        font-size: 20px;
    }

    .valeur_picto, .valeur_photo {
        width: 100%;
        margin: 10px 0;
    }

    .valeur_picto {
        padding: 50% 0;
    }

    .slide .caption {
        left: 20px;
        width: 95%;
    }

    .caption_titre {
        padding-bottom: 20px;
    }

    .caption_phrase_accroche {
        display: none;
    }

    .btn_slider {
        padding: 10px 25px;
        font-size: 15px;
        -moz-box-shadow: 1px 1px 1px #333;
        -webkit-box-shadow: 1px 1px 1px #333;
        box-shadow: 1px 1px 1px #333;
    }


}

@media (max-width: 440px) {

    .bx-wrapper .bx-pager.bx-default-pager a {
        width: 10px;
        height: 10px;
        border-radius: 10px;
    }

    /*MODULE OCCASION*/
    .occasions_liste_voiture {
        width: 100%;
    }

    .fermer_apercu {
        top: 5px;
        right: 5px;
    }


	/*** CONTACT ***/
	.un_conseiller {
		padding: 30px;
	}
	.un_conseiller_img {
		width: 115px;
		height: 115px;
	}

}

@media (max-width: 360px) {
    /*Galaxy S portrait*/
    .caption_titre {
        font-size: 22px;

    }

    .caption_phrase_accroche {
        font-size: 15px;
    }

    .btn_slider {
        padding: 8px 20px;
        font-size: 13px;
    }

    .footer_bas {
        margin-bottom: 60px;
    }

    .occasions_liste_voiture_lien,
    .occasions_liste_voiture_lien_apercu {
        width: 100%;
        margin-top: 5px;
    }

}

@media (max-width: 320px) {
    /*Iphone 5 portrait*/
    .btn_slider {
        display: none;
    }
}


@media (max-width: 673px) {
    #rc-imageselect, .g-recaptcha {
        transform: scale(0.77);
        transform-origin: 0;
        transform: scale(0.77);
        transform-origin: 0 0;
        -webkit-transform: scale(0.77);
        transform: scale(0.77);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
}


@media (max-width: 500px) {
    #rc-imageselect, .g-recaptcha {
        transform: scale(0.70);
        transform-origin: 0;
        transform: scale(0.70);
        transform-origin: 0 0;
        -webkit-transform: scale(0.70);
        transform: scale(0.70);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
}