@charset "utf-8";

/*SMARTPHONE (ref de base) ET TABLETTES ---------------------------- */
@media screen and (max-width:500px), screen and (max-device-width: 501px){

    .hidden-touch {display:none;}
    .hidden-desktop {display: block;}
    
    .visible-touch {display:none;}
    .visible-desktop {display: block;}
    
}
/* LAPTOP AU DESKTOP  ---------------------------- */
@media screen and (min-width:501px)  {
    
    .hidden-touch {display:block;}
    .hidden-desktop {display: none;}
    
    .visible-touch {display:block;}
    .visible-desktop {display: none;}
    
    body {
        width: 80vw;
        margin-left: auto!important;
        margin-right: auto!important;
        background-color: rgba(73, 89, 37, 0.30);
    }
    h1 {font-size: 2.5vw; line-height: 3.5vh;}
    h2 {font-size: 2vw; line-height: 3vh;}
    h3 {font-size: 1.8vw; line-height: 2vh;}
    h4 {font-size: 1.7vw; line-height: 2vh;}
    h5 {font-size: 1.6vw; line-height: 2vh;}
    h6 {font-size: 1.5vw; line-height: 2vh;}

    p {font-size: 1.2vw; line-height: 2.5vh;}
    .texte-indic {font-size: 1vw; line-height: 1.8vh;}
    blockquote {font-size: 3vw; line-height: 7vh;}
    li {font-size: 1vw; line-height: 2vh;}

    a{font-size: 1.8vw; line-height: 2vh;}
    #pratique-bottom a{font-size: 1.8vw; line-height: 3vh;}
    #player {width: auto;}
    #process-commercial li {padding: 1vh;}
    ol li::marker {font-size: 3vw;}
    
    #menu-principal {width: 100%;}
    #menu-principal ul {height: 12.5vh;}
    #menu-principal ul li {width: 100%;}

    
    #staff img {width: 50vw;}
    #part-process-client {height: auto;}
    #recommandation img, footer a img {width: auto;}
    footer #signature {width: 60%;}
    #pratique-bottom ul li {width: 50%;}
    #pratique-bottom ul li a {width: 100%; padding: 0; }
    #pratique-bottom img, #pratique-bottom a img {width: 4vw;}
    
    #bg-image-staff {height: 20vh;}
    .bouton-vert a img, .bouton-orange a img, .bouton-rouge a img {width: 5vw;} 
    footer #social-bottom ul li {padding: 6vw;}
}