/* /* GLOBAL ELEMENTS 
    */

    /* Important : spécial Safari correction comportement row bootsrap 4*/
    .row:before, .row:after {
        display: none !important;
    }

    /* Définition des polices  */

:root {
    --typo-principale : 'futura', 'Arial Narrow', Arial, sans-serif;
    --typo-secondaire : 'votre police';

    --font-size-normale-h1 : 4rem ; 
    --font-size-tablette-h1 :3rem 
    --font-size-mobile-h1 : 40px ;
    
    --font-size-normale-callButton : 70px;
    --font-size-tablette-callButton : 70px ;
    --font-size-mobile-callButton : 36px ;

    --font-size-normale-h2 : 3rem ; 
    --font-size-tablette-h2 : 30px /*4vh*/ ; 
    --font-size-mobile-h2 : 19px; 

    --font-size-normale-h3 : 2.5rem; 
    --font-size-tablette-h3 :30px ;
    --font-size-mobile-h3 : 28px;

    --font-size-normale-corps : 2rem ; 
    --font-size-tablette-corps :14px ; 
    --font-size-mobile-corps : 14px;

    --font-size-normale-card-text : 20px ; 
    --font-size-tablette-card-text :20px ; 
    --font-size-mobile-card-text :16px ;

    --font-size-normale-bouton : 22px ; 
    --font-size-tablette-boutton : 30px ; 
    --font-size-mobile-boutton : 20px ;

    --font-size-normale-lien : 14px ; 
    --font-size-tablette-lien :14px ; 
    --font-size-mobile-lien : 14px ;

    --font-size-normale-header : 22px; 
    --font-size-tablette-header :22px; 
    --font-size-mobile-header : 22px;

    --font-size-normale-footer : 18px ; 
    --font-size-tablette-footer : 14px ; 
    --font-size-mobile-footer :14px ;

}

    :root {
        --main-bg-color : #fff;
        --main-text-color : #707070;
        --clear-text-color: #CECECE;
        --dark-text-color: #292929;
        --main-button-color : #E84141;
        --dropdown-transparent-bg : #CECECE80;
        --main-button-color-transparent : rgba(232, 65, 65,0.9);
        --second-button-color : #009789;
        --second-button-color-transparent : rgba(0, 151, 137, 0.5);
    }

    .palegrey {
        background-color: var(--clear-text-color);
    }
    
    .grayside {
        background-color:#BEB6B0;
    }
    .strongGray {
        background-color: var(--main-text-color);
    }
    .green {
        background-color: var(--second-button-color);
    }
    .bg-main-red {
        background-color: var(--main-button-color);
    }
    /* Définition des tailles ( polices, marges et padding) */
    /*base Bootstrap4 :  -1 = 0.25 rem*/ 
:root {
    --large_rem : 5rem;
    --fin_rem : 1rem; /* = bootstrap -3 ex : pr-3*/
    --normal_rem : 2rem;
    --moyen_rem : 3rem;
    --x-large_rem : 20rem;
}

/* Définition de bordure  */
:root {
    --normal_px : 4px;
    --fin_px : 2px;
    --extra-fin_px : 1px; 
    --xl_px : 10px;
}
.bord-rad-100 {
    border-radius: 100px;
}

/* Colonnes de même hauteur */
.row-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  
  [class*="col-"] {
    margin-bottom: 12px;
  }
  
  .content {
    height: 100%;
  }
/* fin Colonnes de même hauteur */

    /* Définition du lien de sélection  */
.link {
    color :var(--main-text-color);
    font-size: var(--font-size-normale-corps);
}
.link:hover, a:hover {
    color: var(--second-button-color);
    transition: ease-in 200ms;
}
p {
    font-size: var(--font-size-normale-corps);
}
    
    /* A conserver sinon header ne prend pas en compte le font-family */
    body, header {
        font-family: var(--typo-principale);
    }
    #MainMenu nav {
        border-radius: 0px;
    }
    .logoHeader {
        width: 15vh;   
    }
    .navbar-brand-height {
        height: 11vh;
    }
    #navbarMainMenuToggler .dropdown-toggle::after {
        display: none;
    }

    .dropdown-menu {
        font-size: var(--normal_rem);
    }
    .dropdown-item {
        color : var(--main-text-color);
    }
    #navbarMainMenuToggler ul .dropdown .dropdown-menu .dropdown-item:hover {
        color: var(--second-button-color);
        background-color: var(--dropdown-transparent-bg);
    }

    .dropdown:hover .dropdown-menu {display: block;}
    
    .row_inNavBar {
        /* width: 0%; */
        margin:auto;
        justify-content: center;
    }
    .iconeBurger {
        background-color: var(--clear-text-color) !important;
    }
    /* info contact pour ipad vertical */
    .display-vert-ipad {
        display: none;
    }
    /* Seulement sur tablettes */
    #tablette_MainMenu {
        margin-bottom: var(--large_rem);
    }
    .contactMenu_btn {
        background-color: var(--main-bg-color);
        color: var(--main-text-color)!important;
        border: var(--normal_px) solid var(--main-button-color);
        /* margin-left: 90px; */
    }
    .contactMenu_btn:hover {
        background-color: var(--second-button-color) !important;
        color: var(--main-bg-color) !important;
        border: var(--normal_px) solid var(--second-button-color)! important;
        transition: ease-in 200ms;
    }
    .navbar-toggler {
        border : 1px solid var(--main-text-color) !important;
    }
    .burger-barre {			
        width: 28px;
        height: 3px;
        background-color: var(--main-button-color);
        margin: 4px 4px;
        border-radius: 2px;	
        }

    /*fin HEADER*/
    
    /*FOOTER*/
    footer {
        color: var(--clear-text-color);
        border-top: solid var(--xl_px) var(--main-button-color);
    }
    .footer_hr {
        height: var(--fin_px);
        border: 0;
        background-color: var(--clear-text-color);
        position: relative;
        top: 15rem;
        margin-bottom: calc(5*var(--xl_px));
        display:none; 
    }
    .footerList a, .footerList p {
        color: var(--clear-text-color);
        font-size: var(--font-size-normale-footer);
    }
    .noLink:hover {
        color: var(--clear-text-color) !important;
        cursor: default;
    }
    .Col-Footer_logo {
        margin-bottom: 10rem;
    }

    /* .Col-Footer_localisation {
        margin-bottom: 3rem;
    } */
    .logoFooter {
        width: 24vh;
    }

    .appelFooter {
        border: var(--clear-text-color) solid var(--fin_px);
        font-size: var(--normal_rem);
        background-color: var(--main-button-color);
        padding: var(--xl_px);
    }
    .appelFooter:hover {
        /* border : var(--second-button-color) solid var(--fin_px); */
        background-color: var(--second-button-color);

        transition: ease-in 200ms;
    }
    .appelFooter a {
        color :var(--main-bg-color);
        /* color: var(--clear-text-color); */
        text-decoration: none;
    }

    /*fin FOOTER*/

    .pagePrincipale{
        /* top: calc(12*var(--xl_px)); */
        margin-bottom: 7vh;
        position: relative;
        top: 10vh;
    }
    .nav-item {
        justify-content: center !important;
        display: flex !important;
    }
    /* passer sur les éléments d'une liste dans nav*/
    .nav > li > a:hover, #navbarMainMenuToggler a:hover {
        background-color: transparent;
        color: var(--main-button-color);
        transition: ease-in 200ms;
    }
    #navbarMainMenuToggler a:focus {
        box-shadow: 0 0 0 .2rem var(--main-button-color);
    }
    .nav>li>a:focus {
        text-decoration: none;
        background-color: transparent;

    }
    .mainMenu > li > a:focus{
        box-shadow: 0 0 0 .2rem var(--main-button-color-transparent);
        background-color: var(--main-bg-color);
        color : var(--main-button-color); 
    }
    
    
    /*MENUS*/
    .btn-navbar {
        padding: calc(var(--xl_px)/2) calc(var(--xl_px)*2);
        font-size: var(--font-size-normale-bouton);
        text-decoration: none;
        margin-bottom: var(--xl_px);
        margin-top: calc(var(--xl_px)/2);
    color: var(--main-bg-color);
        position: relative;
        display: inline-block;
        text-decoration: none !important;
        text-align: center;
        word-break: break-word;
    }
    
    .btn-navbar:active {
        transform: translate(0px, calc(var(--xl_px)/2));
        -webkit-transform: translate(0px, calc(var(--xl_px)/2));
        box-shadow: 0px 1px 0px 0px;
    }
    /*fin MENUS*/

    /* ARBORESCENCE
    .breadcrumb {
        display: none;
        background-color:transparent;
        font-size: var(--font-size-normale-lien);
    }
    .breadcrumb > li a {
        color: var(--main-button-color);
        padding: var(--normal_px);
        font-family: var(--typo-principale);
        border: var(--main-bg-color) solid var(--fin_px);
        
    }
    .breadcrumb > li a:hover, .pagesArborescence div > ul > li .label:hover {
        border: var(--main-text-color) solid var(--fin_px);
    }

    .pagesArborescence {
        font-family: var(--typo-principale);
        font-size: var(--font-size-normale-lien);
        margin-top: 5rem;
    } */

    /* .arboTitre {
        width: 120px;
        color: var(--main-text-color);
    }

    .pagesArborescence div > ul {
        justify-content: center;
        display: flex;
    }

    .pagesArborescence div > ul > li .label {
        color: var(--main-button-color);
        font-weight: normal;
        font-size: var(--font-size-normale-lien); 
        border: var(--main-bg-color) solid var(--fin_px);       
    } */
      /* fin ARBORESCENCE*/
    
    /*TITRES*/
    h1, h2, h3 {
        text-align: center;
        font-family: var(--typo-principale);

    }
    h1 {
        text-transform: uppercase;
        font-weight: bold;
        font-size: var(--font-size-normale-h1);
        margin: 1em;
    }

    h2 {
        font-size: var(--font-size-normale-h2);
        font-style: italic;
    }

    h3{       
        margin-bottom: 2vh;
    }
    .h3_Accueil {
        font-style: italic;
    }
    /*FIN TITRES*/
    
    /*CARD */
    .card-body {
        color: var(--main-text-color);
        font-family: var(--typo-principale);
    }
    .card-deck .card-title {
        text-transform: uppercase;
    }
    .card-title {
        font-size: 3rem;  
        /* text-decoration: underline var(--main-button-color) var(--normal_px) !important; */
        margin-bottom: 3.75rem;
        -webkit-text-decoration-line: underline;
        -webkit-text-decoration-color: var(--main-button-color);
        text-decoration-thickness: var(--normal_px);
        text-underline-offset: var(--normal_px);
        text-decoration-color: var(--main-button-color);
        text-decoration-line: underline;

    }
    .card-text {
        font-size: var(--font-size-normale-card-text);
        font-style: italic;
    }
    /* .p_card-link {
        margin-top: 3rem;
    }

    .card-link {
        color: var(--main-button-color);
        border: var(--main-button-color) solid 3px;
        padding: 8px;
        text-transform: uppercase;
        font-size: 22px;
    } */

    /*fin CARD*/

    li {
        list-style-type: none;
    }

    /*page ACCUEIL*/
    #hero {
        /* background-image: url("/webroot/img/images/Parc_accueil.jpg"); alt:"parc Vue d'ensemble"; */
        background-size: cover;
        height:96rem;
        margin-bottom: calc(8*var(--xl_px));
        position: relative;
        top: -1rem;
    }
    .mainTitle {
        width: max-content;
        position: relative;
        top: 52vh;
    }

    .lienRecherche, .lienRecherche a{
        color:var(--main-bg-color);
        font-size: 3vh;
        padding: var(--xl_px);
        margin-bottom: 4vh;
    }

    .lienRecherche a {
        border: 3px solid;
        border-radius: var(--xl_px);
    }
    
    .lienRecherche a:hover, .card-link:hover {
        color:var(--second-button-color);
        background-color: var(--main-bg-color);
        /* text-transform: uppercase; */
        transition: ease-in 200ms;
        text-decoration: none;    
    }
    /* Equipe */
    .equipe_btn{
        color: var(--main-bg-color);
        font-size: 4vh;
    }
    .equipe_btn a:hover {
        background-color: var(--second-button-color);
        color: var(--main-bg-color);
    }
    /*INFO & COMPETENCES*/
    .info {
        background-color: var(--main-text-color);
        margin-top: 6rem;
        margin-bottom: 5rem;   
    }
    .info .box  {
            background-color: var(--main-bg-color);
            width: 98%;
            margin: inherit;
    }
    .competence {
        height: 498px;
    }
    .infoInCard-accueil {
        height: 29vh;
    }
    /*fin INFO*/
    /*fin ACCUEIL*/

    /* page LISTE OCCASIONS */

    .img_default {
        opacity: 0.6;
    }

    .TitrePrincipal_Listing{
        margin-top: -3rem;
        color: var(--main-text-color);
        border: 2px solid var(--main-text-color);
        font-size: 3rem;
        padding: 10px;
        margin: auto;
        margin-bottom: 50px;
    }

    /* Attention .filterColumn a des enfants */
    .filterColumn{
        background-color :var(--main-bg-color);
    }

    .vehiculesColumn {
        background-color :var(--clear-text-color);
    }

        /* CARD */
    .card-occasionsList {
        height: 100%;
        color: #707070;
        justify-content:space-between ;
    }

    .card-occasionsList img {
        border-radius: 10px;
        padding: 15px;
        width: 80%;
    }


    .card-occasionsList h2 {
        text-decoration: none;
        font-size: 3rem;
    }
    .infoInCard {
        border: var(--clear-text-color) solid var(--fin_px);
        padding: 1rem 0rem;
        height: 100%;
          
    }
    .infoInCard-annonce {
        min-height: 32rem;
    }
    .card-occasionsList h3 {
        font-weight: bold;
        font-style: normal;
        font-size: 2.5rem;
    }
    .card-occasionsList p, .infoInCard p {
        margin-left: 10px;
        font-style: normal;
    }
    .infoInCard a, .button_annonce {
        padding: 10px;
        font-weight: normal;
        font-style: italic;
        font-size: 2rem;
        color: var(--main-bg-color);
        background-color:var(--main-button-color);
        border-radius: 100px;
        justify-content: center;
        display: flex;
        width: 50%;
        margin: auto;
        border: none;
     
        
    }
    .button_annonce {
        vertical-align: middle;
        width: fit-content;
       
    }

    .infoInCard a:hover, .button_annonce:hover {
        background-color: var(--second-button-color);
        color: var(--main-bg-color);
    }

    .iconeSelection {
        font-size: 4vh;
        padding: 10px 20px ;
 ;
    }
    .filterColumn h3 {
        text-align: left;
        font-size: 3rem;
    }

input[type=checkbox], input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    height: 40px;
    width: 40px;
    background: var(--main-bg-color);
    border: 2px solid var(--main-text-color);
    margin-top: -3px;
}

input[type="checkbox"]:checked, input[type=radio]:checked {
    border: 0px;
    background-image: url(/webroot/img/images/checkbox_checked.svg);
    background-size: 40px 40px;
  }

.mylabel {
    position: relative;
    left: 10px;
    top: -11px;
}

/* Flitres Sidebar menu pour Version Mobile */

/* NeW */
.mobileFilter_Title {
    font-size: 6vw;
    color: var(--main-text-color);
    
    /* text-decoration: underline var(--main-button-color) var(--normal_px) !important; */
    margin-bottom: 2rem;
    /* -webkit-text-decoration-line: underline;
    -webkit-text-decoration-color: var(--main-button-color);
    text-decoration-thickness: var(--normal_px);
    text-underline-offset: var(--normal_px);
    text-decoration-color: var(--main-button-color);
    text-decoration-line: underline; */
}
.mobileFilter_Title:hover, .mobileFilter_Title:active, .mobileFilter_Title:focus {
    box-shadow: none;
    -webkit-text-decoration-line: underline !important;
    -webkit-text-decoration-color: var(--main-button-color)!important;
    text-decoration-thickness: var(--normal_px)!important;
    text-underline-offset: calc(2*var(--normal_px))!important;
    text-decoration-color: var(--main-button-color)!important;
    text-decoration-line: underline !important;
    color: var(--main-text-color);
}

 /* The side navigation menu */
 .sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 10vh;
    left: 0;
    background-color: var(--main-bg-color);
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  }
  
  /* The navigation menu links */
  .sidenav .closebtn {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  /* When you mouse over the navigation links, change their color */
  /* .sidenav a:hover {
    color: #f1f1f1;
  } */
  
  /* Position and style the close button (top right corner) */
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
  #main {
    transition: margin-left .5s;
    padding: 20px;
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  } 
/* fin Flitres Sidebar menu pour Version Mobile */
/*Année Slider */

.slidecontainer {
    width: 100%; /* Width of the outside container */
  }
  
  /* The slider itself */
  .slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
  }
  
  /* Mouse-over effects */
  .slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
  }
  
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px; 
    height: 25px; 
    background: var(--second-button-color);
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 25px; 
    height: 25px; 
    background: var(--second-button-color); 
    cursor: pointer;
  }
/* fin Slider */

.filterColumn .dropdown-toggle {
    font-size: 22px;
    color: var(--second-button-color);
}
.filterColumn .dropdown-toggle:hover {
    color: var(--main-button-color);
}

 /* Dropdown Button in Filter mobile version*/
 .dropbtn {
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  .dropbtn:hover, .dropbtn:focus {
    background-color: var(--dropdown-transparent-bg);
  }
  
  .filtre_dropdown {
    position: relative;
    display: inline-block;
  }
  
.filtre_dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
.filtre_dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
.filtre_dropdown-content a:hover {
    background-color: #ddd
}
  
.show {
    display:block;
} 


.selection_link {
        border: 3px var(--second-button-color) solid;
        font-size: 2.5rem;
        border-radius: 10px;
        color: var(--main-text-color);
        padding: 0.5rem 4rem;
}
.selection_link:hover {
    color: var(--second-button-color);
    border: var(--main-button-color) 3px solid;
    text-decoration: none;
    transition: ease-in 200ms;
}
.selection_link:focus {
    color: var(--main-text-color);
    box-shadow: none;
}

        /* fin CARD */
    /* fin LISTE OCCASIONS */

    /* VEHICULE SELECTION */
    .lienRetour {
        position: relative;
        top: 12vh;
        margin-left: 4rem;
    }
    .annonceTitle_link{
            color: var(--main-button-color);
        }
    .annonceTitle_link:hover {
        text-decoration: none;
    } 

    .annonce {
        margin-bottom: 17rem;
        position: relative;
        top: 3vh;
    }
    .carousel-control-prev-icon, .carousel-control-next-icon {
        width: 40px;
        height: 40px;
        background-color: var(--main-button-color);
    }
    .lienRetour_bas {
        margin-bottom: 8vh;
    }
    .prix_ht {
        font-size: 3.5rem;
        font-weight: bold;
    }
        /*Selection infos*/
    .selectionInfo h1 {
        color:var(--main-bg-color);
        background-color: var(--main-button-color);
        margin: 0;
        margin-bottom: 2rem;
    }
    .selectionInfo h2 {
        font-size: 3.5rem;
        text-decoration: none;
        font-style: italic;
        color: var(--main-text-color);
    }
    .selectionInfo .card-text {
        font-style: normal;
        margin: 0;
        font-weight: bold;
    }
    .appel {
        font-size: 3rem;
        background-color: var(--main-button-color);
        border-radius: 0;
        text-transform: uppercase;
        padding: 10px;
        margin-top: 50px;
        margin-bottom: 50px;
        text-align: center;
    }
    .appel a {
        color: var(--main-bg-color);
        text-decoration: none;
    }
    .equipement, .equipement h3, .equipement ul, .equipement .surligne {
        font-size: 20px;
        text-align: left;
        margin-left: 0;
    }

    .surligne {
        height: 4px;
        border: 0;
        background-color: var(--main-button-color);
        width: 70%;  
    }

    .extra {
        border :var(--second-button-color) solid 3px;
        padding: 8px;
        text-align: center;
    }
        /* fin Selection infos*/

        /* Fiche technique*/
    .ficheTech, .contactForm {
        padding: 20px;

    }
    .ficheTech h2 {
        color: var(--main-bg-color);
        font-size: 3.5rem;
        background-color:var(--main-button-color);
        border-radius: 100px;
        padding: 10px ;
        width: 70%;
        margin: auto;
        margin-bottom: 50px;
    }
    .ficheTech li {
        font-size: 22px;
        font-family: var(--typo-principale);
        color: var(--main-text-color);
        margin: 5px;
    }

    .ficheTech .valeur, .ficheTech .valeur a, .card-text .valeur {
        color:var(--main-button-color);
    }
        /* Fin Fiche technique*/

        /*Formulaire de contact*/
     
    .contactForm h2, .contactForm h1 {
        color: var(--main-text-color);
        border: 2px solid var(--main-text-color);
        padding: 10px ;
        width: 70%;
        margin: auto;
        margin-bottom: 50px;
    }
    .contactForm input, .contactForm textarea{
        font-size: 22px;
        font-family: var(--typo-principale);
        color: var(--main-text-color);
    }
    .contactForm input::placeholder, .contactForm textarea::placeholder, .contactForm label {
        font-size: 15px;
    }

    .contactForm label {
        color: var(--main-button-color);
    }

    #inputUser_message {
        width: 100% !important;
        border: #ced4da 1px solid;
        padding: 10px !important;
        height: 100px;
    }

    .formSubmit {
        font-size: 3rem;
        padding: 1vh 8vw;
    }
    .formSubmit:hover{
        color: var(--main-bg-color);
    }
    .formSubmit:active {
        color: var(--main-bg-color);
        background-color: var(--main-bg-color);
        border:var(--second-button-color) solid 2px ;
    }
    .submit_box {
        margin-bottom: 8vh;
    }

    /* articles */
    .clamp-description {
        display: -webkit-box;
        -webkit-line-clamp: 3; /* nombre de lignes souhaité */
        -webkit-box-orient: vertical;
        overflow: hidden;
      }


        /* fin Formulaire de contact*/

    /* fin VEHICULE SELECTION */

    /* page Contact */
    .contact_page {
        position: relative;
        top: 1vh;
        margin-bottom: 15vh;
    }
    .contact_list {
        font-size: 20px;
        color: var(--main-text-color);
    }
    .contact_list li {
        margin-top :1rem;
    }
    .contact_list li a {
        color: var(--main-text-color);
    }
    .map-responsive {
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
    }
        .map-responsive iframe {
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
        border: var(--main-text-color)solid 3px;
    }

    /* page Financement */
    .ancre_menu{
        display: block; 
        height: 200px; /*same height as header*/ 
        margin-top: -200px; /*same height as header*/ 
        visibility: hidden;
    }

    .achat_finance_h2{
        font-style: normal;
    }
        
    .achat_finance {
        position: relative;
        top: 2vh;
        margin-bottom: -2vh;
        padding: 20px;
    }

    /*Media queries selon supports de taille décroissante */

    /*Spécial S10+ */
    @media (min-width : 3040px) and (min-height : 1440px) {
        .mainTitle {
            top: 27vh;
        }

    }

    @media (min-width : 1920px) {
        /* .btn-navbar, .card-text, .selection_Annee {
            font-size: 30px !important;
        } */

        .pagesArborescence, .pagesArborescence div > ul > li .label, .footerList a, .footerList p {
            font-size: 18px;
        }
        /* .footerList h3, .equipement, .equipement h3, .ficheTech li, .contactForm label, .formSubmit, .contactForm input, .contactForm input::placeholder, .contactForm textarea::placeholder {
            font-size: 30px;
        } */
        .ficheTech h2, .contactForm h2 {
            font-size: 3.5rem;
        }
        /* .logoFooter {
            width: 20vh;
        } */
        #emailHelp {
            font-size: 20px;
        }    
    }
    @media (max-width : 1366px) {
        .mylabel {
            font-size: 20px;
        }
        input[type=checkbox], input[type="checkbox"]:checked {
            height: 30px;
            width: 30px;
            background-size: 30px 30px;
        }
    }



    @media (max-width : 1112px) {
        .selection_link {
            font-size: 2rem;
        }
        .appelFooter {
            font-size: 3vh;
        }   


    @media (min-width: 1200px) and (max-width: 1380px) {
        
        .infoInCard a {
             width: 100%;
        }
    }
    /* @media (min-width: 991px) and (max-width : 1112px) {
        .logoHeader {
            width: 20vh;
        }
        
    } */
    /* ipad horizontal */
    @media (max-width : 1025px) and (max-height: 769px) {
        /* .logoHeader {
            width: 11vw;
        } */
        .btn-navbar {
            font-size: 17px;
        }
        .filterColumn h3 {
            font-size: 2rem;
        }
        .filterColumn .mylabel {
            font-size: 1rem;
        }
        .selection_link {
            font-size: 1.5rem;
        }
        .logoFooter {
            width: 20vh;
        }
        .Col-Footer_logo {
            margin-bottom: 7rem;
        }    
        .row_inNavBar {
            width: 15%;
        }
        .footerList a, .footerList p {

            font-size: 13px;
        }
        .appelFooter {
            font-size: 2vh;
        }
        .contactForm h1 {
            margin-bottom: 0;
        }
        .contact_list {
            font-size: 13px
        }
        .formSubmit {
            font-size: 2rem;
        }
    }
    /* ipad vertical */
    @media (max-width : 769px) and (max-height: 1025px) {
        .logoHeader {
            width: 12vh;
        }
        .navbar-brand-height {
            height: 10vh;
        }
        .row_inNavBar {
            width: 0%;
            margin: auto;
            justify-content: center;
        }
        .btn-navbar {
            font-size: 16px;
        }
        .appelFooter {
            font-size: 1.5vh;
        }
        .footerList a{

            font-size: 12px;
        }
        .Col-Footer_logo {
            margin-bottom: 4rem;
        }
        .nav>li>a {
            position: relative;
            display: block;
            padding: 10px 6px;
        }
        .iconeSelection, .filterColumn h3 {
            font-size: 2rem;
        }
        .card-deck {
            margin: -2rem !important;
        } 
        .selection_link {
            font-size: 1.5rem !important;
            padding: 4px 12px;
        }
        h1, .contactForm h1, .contactForm h2 {
            font-size: 3rem;
        }
        .contactForm h1 {
            margin-bottom: 0;
        }
        .appel {
            font-size: 2rem;
        }
        .ficheTech h2 {
            font-size: 3rem;
        }
        .ficheTech li {
            font-size: 18px;
        }
        .lienRecherche {
            font-size: 2vh;
        }
        .infoInCard a {
            font-size: 1.5rem;
        }
        .card-occasionsList h3 {
            font-style: normal;
            font-size: 2.5rem;
        }
        .selectionInfo h2 {
            font-size: 2.5rem;
        }
        .prix_ht {
            font-size: 2vh;
        }
        .card-text {
            font-size: 17px;
        }
        .contact_list {
            font-size: 13px
        }
        .button_annonce {
            font-size: 1.5rem;
        }
        .formSubmit {
            font-size: 2rem;
        }
        .footerList li h3 {
            margin-bottom: 1vh;
        }
        .display-all-screens {
            display: none;
        }
        .display-vert-ipad {
            display: block;
        }
        
    }    
    
    @media (min-width: 992px) {
        .footerList h3 {
            text-decoration: underline;
        }
    }

    @media (max-width: 576px) {
        .logoHeader {
            width: 10vh;
        }
        .navbar-brand-height {
            height: 8vh;
        }
        .row_inNavBar,#navbarMainMenuToggler .nav-pills .nav-item, #navbarMainMenuToggler .nav-pills .nav-item a {
            width :100%;
        }
        #hero {
            height: 47rem;
        }
        .mainTitle {
            width: auto;
            position: relative;
            top: 25vh;
        }
        .mainTitle h1 {
            font-size: x-large;    
        }
        .pagesArborescence div > ul {
            flex-flow: column;
        }
        .card-title {
            font-size: 6vw;
        }
        .selectionInfo h1 {
            font-size: 4rem;
        }
        .annonce_accueil {
            border-radius: 0%;
        }
        .appel{
            font-size: 3rem;
            margin-top: 0px;
            margin-bottom: 90px;
        }
        .prix_ht {
            font-size: 4vh;
        }
        .ficheTech h2, .contactForm h2, .formSubmit {
            font-size: 6vw;
            width: 100%;
        }
        .ficheTech li {
            font-size: 4vw;
        }
        .ficheTech .valeur {
            font-weight: normal;
        }
        .iconeSelection >.card-text {
            font-size: 20px;
        }
        .footerList h3 {
            font-size: 2rem;
        }
        .Col-Footer_logo {
            margin-bottom: 13rem;
            margin-top: 5rem;
        }
        .footer_hr {
            display: inline;
        }
        .Col-Footer_localisation, .Col-Footer_planSite, .appelFooter {
            margin-bottom: 5rem;
        }
        .pagePrincipale {
            top: -11px;
            margin-bottom: 0;
        }
        .param_Annee, .mylabel {
            font-size: 20px;
        }
        header {
            margin-bottom: 85px; 
        }
        .contact_page {
            margin-bottom: 0;
            top: 0;
        }
        .contact_list {
            font-size: var(--font-size-normale-footer);
        }
        .contactForm h1 {
            width: 100%;
        }
        .annonce {
            margin-bottom: 10rem;
        }
        .achat_finance {
            margin-bottom: -1vh;
        }
        .achat_finance h1, .contact_page h1 {
            font-size: 3rem;
        }
        .info {
            margin-top: 3rem;
            margin-bottom: 3rem;
        }
        .infoInCard a {
            font-size: 2rem;
            width: 95%;
        }
        .ecart_FiltreColum{
            height:29vh;
        }
        .button_annonce {
            width: 80%;
        }

    }
    @media (max-width: 374px) {
        .achat_finance {
            position: relative;
            /* top: 5vh; */
            margin-bottom: -3vh;
            padding: 20px;
        }
        .infoInCard-accueil {
            height: 29vh;
        }

        .info_competences{
            font-size: 6.5vw;
        }
        .info_competences + p {
            font-size: 16px;
        }
        .mylabel, .selection_Annee, .param_Annee {
            font-size: 14px;
        }
        .ecart_FiltreColum{
            height:10vh;
        }
    }