/* SOMMAIRE 

max-width:1300px --------------------------------------------------- Ligne :44
max-width:1250px --------------------------------------------------- Ligne :49
TABLETTE ----------------------------------------------------------- Ligne :58
 règles globales ------------------------------------------ Ligne :60
 HEADER --------------------------------------------------- Ligne :72
 MAIN ----------------------------------------------------- Ligne :213
  banière home -------------------------------------------- ligne :222
  consultation domicile (page home)------------------------ Ligne :233
  consultation gratuite (page home) ----------------------- Ligne :246
  FAQ ----------------------------------------------------- Ligne :252
  resultat blog (page blog) ------------------------------- Ligne :258
  a propos ------------------------------------------------ Ligne :264
  single article blog ------------------------------------- Ligne :270
  bouton de partage --------------------------------------- Ligne :280
  evenement (single) -------------------------------------- Ligne :299
  tarif --------------------------------------------------- Ligne :303
  formulaire de contacte et inscription ------------------- Ligne :321
  404 ----------------------------------------------------- Ligne :342
max-width:850px ---------------------------------------------------- Ligne :350
MOBILE ------------------------------------------------------------- Ligne :355
 globale -------------------------------------------------- Ligne :357
 MAIN ----------------------------------------------------- Ligne :372
  fleche scrall top --------------------------------------- Ligne :373
  banière home -------------------------------------------- Ligne :384
  blog et évènement (page home) --------------------------- Ligne :390
  consultation domicile (page home) ----------------------- Ligne :396
  consultation gratuite (page home)------------------------ Ligne :402
  FAQ ----------------------------------------------------- Ligne :408
  rendez-vous --------------------------------------------- Ligne :432
  a propos ------------------------------------------------ Ligne :440 
  tarif --------------------------------------------------- Ligne :446
  contact ------------------------------------------------- Ligne :459
  formulaire de contacte et inscription ------------------- Ligne :484
 FOOTER --------------------------------------------------- Ligne :501
max-width:500px --------------------------------------------------- Ligne :517
 HEADER --------------------------------------------------- Ligne :521
  MAIN ---------------------------------------------------- ligne :527
max-width:460px --------------------------------------------------- Ligne :544
max-width:400px --------------------------------------------------- Ligne :553
  
*/
@media screen and (max-width:1300px){
    footer menu{
        flex-direction: column;
    }
}
@media screen and (max-width:1250px){
    #slider h1,#slider_home h1{
        font-size: 4.5rem !important;
    }
    #ctn_title_cta h2{
        font-size: 2.8rem !important;
    }
}

/* TABLETTE */
@media screen and (max-width:979px){
    /* globale */
    .desktop{
        display: none;
    }
    .responssive{
        display: block;
    }
    .menu_desktop{
        display: none;
    }

    /* page de maintenance */
    #ctn_maintenance{
        flex-direction: column;
    justify-content: center;
    }
  
    /* fin globale */


    /* HEADER */
    header nav {
        background: none;
        box-shadow: none; 
    }
    .grid3{
        grid-template-columns: repeat(2,1fr); 
    }
    .grid4{
        grid-template-columns: repeat(3,1fr); 
    } 
    header div[role=button]{
        transform: translateY(25px);
    } 
    .desktop{
        display: none;
    }
    #burger+label {/*Regle de style du label */        
        display: block;
        width: 50px;
        height: 50px;
        position: fixed;
        top: 35px;
        right: 30px;
        z-index: 20000;
    }
    #burger+label:before{
        content: '';
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-top: solid 5px var(--color5); /*barre du haut */
        border-bottom: solid 5px var(--color5);/*barre du millieu*/
        transition: all 0.3s;
        border-radius: 10px;
    }
    #burger+label:after {
        content: '';
        width: 100%;
        position: absolute;
        top: 25px;
        left: 0;
        border-top: solid 5px var(--color5);/*barre du bas*/
        transition: all 0.3s;
    }
    #burger:checked+label:before {  /*la barre du haut diparait et la barre du milieu fait une rotate de 45°*/
        border-top-color: transparent;
        height: 0;
        top: 25px;
        transform: rotate(45deg);
        border-radius: 50%;/*la barre du millieu devien pointu sur les bords*/
    }
    #burger:checked+label:after {/*la barre du bas fait une rotate de 45° et devient pointue sur les bords*/
        transform: rotate(-45deg);
        border-radius: 50%;
    }
    header nav .menu>#responsive-main-menu {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: var(--color1);
        display: flex;
        flex-direction: column;
        transition: all .3s;
        transform: translateX(-120%);
        overflow: scroll;
    }
    #burger:checked+label + ul{ /* regle de style quand le burger est coché  */
     transform: translateX(0);
     z-index: 10000;
    }
    #responsive-main-menu li { /*pour aerer le ul*/ 
        flex: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 250px;
        margin: 15px 0;
        background: var(--color7);
        margin: 20px auto;
        border-radius: 15px;
        flex-direction: column;
    }
    #responsive-main-menu >li:first-child{
        background: none;
    }
    #responsive-main-menu >li:first-child #ctn_logo_burger{
        width: 300px;
    }
    #responsive-main-menu li:first-child #ctn_logo_burger #eye_logo{
        width: 110px;
        transform: translateY(17px);
    }
    #responsive-main-menu li a {
      color: var(--color2);
      font-size: 1.8rem;
    }
    /* class open_menu ajouté pour deplier le sous-menu deroulan  */
     #responsive-main-menu .open_menu{
        opacity: 1;
        z-index: 1;
        display: flex;
        flex-direction: column;
        padding: 15px 0;
        text-decoration: none;
        transition: ease-in-out .3s;
        border: solid 1px var(--color7);
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        max-height: max-content;
        width: 100%;
        overflow: hidden;
    }
    #responsive-main-menu .open_menu a{
        color: var(--color7);
        text-align: center;
    }
    .sub-menu{
        opacity: 0;
        z-index: -1;
        max-height: 0;
        margin: 0 auto;
    } 
   
    #menu-item-62{
        flex-direction: column;
    }  
    #responsive-main-menu .open_menu li,.sub-menu,.open_menu,.sub-menu{
        background: var(--color1);
    }
    #coordonee article{
        flex-direction: column;
    }
    #coordonee iframe{
        margin: 0 auto;
    }
    .ctn_contact{
        padding-right: 0;
        padding-bottom: var(--pad-h);
    }
    /*  FIN HEADER */

    /* MAIN */
        /* banière home */
        #slider h1,#slider_home h1{
            font-size: 3rem !important;
        }
        #ctn_title_cta h2{
            font-size: 2rem !important;
            padding-bottom: 60px;
        }
        /* fin banière home */
        .title_section{
            width: 100%;
            border-radius: 0;
            text-align: center;
            padding: 0;
        }
        .sous_titre {
            width: 80%;
        }

        /* consultation domicile (page home) */
        #consultation div:nth-child(2){
        flex-direction: column-reverse;
        } 
        #consultation article,#consultation article+div {
        width: 100%;
        } 
    
        #consultation .ctn_img img {
            width: 300px;
        } 
        /* fin consultation domicile (page home) */ 

        /* consultation gratuite (page home) */
        #gratuit {
            background-size: 200%;
        }
        /* fin consultation gratuite (page home) */

        /* FAQ */
        #ctn_faq{
            width: 100%;
        }
        /* fin FAQ */
        
        /* resultat blog (page blog) */
        #result{
            width: 100%;
        }
        /* fin resultat blog (page blog) */

        /* formulaire commentaire blog (single) */
        .comment-form .comment-form-author,.comment-form .comment-form-email{
            width: 100%;
        }
        /* fin formulaire commentaire blog (single) */

        /* a propos */
        #apropos article::before{
            background-size: 250%;
        }
        /* fin a propos */

        /* single article blog */
        #ctn_media_art_blog{
            flex-direction: column;
        }
        #ctn_media_art_blog iframe,#ctn_media_art_blog div{
            width: 100%;
            margin: 10px 0;
        }
        /* fin single article blog */

        /* bouton de partage */
        #btn_partage>img{
            display: none;
        }
        #btn_partage{
            flex-direction: column;
            padding: 5px;
        }
        #partage_reseau{
            position: initial
        }
         #partage_reseau{
            height: auto;
            top: 100%;
            z-index: 1;
            opacity: 1;
        }
        /* fin bouton de partage */

        /* evenement (single) */
        #ctn_info_single_event{
            flex-direction: column;
        }
        /* tarif */
        #ctn_card_tarif{
            flex-direction: column;
            align-items: center;
        }
        .card_tarif{
            width: 80%;
            margin-bottom: 60px;
        }
        .card_tarif p{
            font-size: 1.5rem;
        }
            /* div du paragraphe  dans la carte*/
        .card_tarif div div:last-child{
            flex-grow: 1;
        }
        /* fin tarif */

        /* formulaire de contacte et inscription */
        #form::before{
            top: -90px;
            right: 0%;
            width: 80%;
            height: 30%;
            z-index: 1;
            background-size: 134px;
        }
        #before_form_inscription::before {
            left: -35%;
            background-size: 47%;
        }
        #form_inscription{
            width: 100% !important;
        }
        #close_popup{
            right: 50px;
        }
        /* fin formulaire de contacte et inscription */

        /* 404 */
        #no_found{
            flex-direction: column;
        }
        /* fin 404 */

    /* FIN MAIN */
}
@media screen and (max-width:850px){
    #before_form_inscription::before{
        display: none;
    }
}
/* MOBILE */
@media screen and (max-width:768px){
    /* globale */
    .desktop_tablette{
        display: none;
    }
    .grid3{
        grid-template-columns: repeat(1,1fr); 
    }
    .grid4{
        grid-template-columns: repeat(2,1fr); 
    }
    .sous_titre {
        width: 80%;
    }
    /* fin globale */
    
   /* MAIN */
        /* fleche scrall top */
        #scrall_top{
            height: 50px;
            width: 50px;
        }
        #scrall_top img{
            height: 32px;
            width: 20px;
        }
        /* fin fleche scrall top */

        /* banière home */
        #ctn_title_cta h2,#slider h1,#slider_home h1{
            text-align: center !important;
        }
        /* fin banière home */

        /* blog et évènement (page home) */
        .card_blog{
            background-position: top left -6%;
        }
        /* fin blog et évènement (page home) */

        /* consultation domicile (page home) */
        #consultation .ctn_img img {
            width: 200px;
        }
        /* fin consultation domicile (page home) */
       
        /* consultation gratuite (page home) */
        #gratuit {
            background-size: 500%;
        }
        /*fin consultation gratuite (page home) */

        /* FAQ */
        summary{
            text-align: center;
        }
        summary::after,details[open] summary::after{
           display: none;
        }

        /* fin FAQ */
        .title_page{
            font-size: 2rem;
        }
        .card_result,#result a:nth-child(even) .card_result {
            border-radius: 0px ;
            box-shadow: 0px 10px 0px 0px var(--color3), 1px -13px 14.4px 0px var(--color3) inset;  
            margin: 50px 0; 
            min-width: 300px;
        }
        .card_result h2{
            font-size: 1.5rem;
        }
        .title_page{
            width: 100%;
        }
        /* rendez vous */
        #intro div{
            width: 300px;
            transform: translate(0, 0);
            opacity: 1;
        }
        /* fin rendez vous */

        /* a propos*/
        #apropos article::before{
            background-size: 350%;
        }
        /* fin a propos */

        /* tarif */
        .card_tarif{
            width: 100%;
        }
        .card_tarif div:nth-child(2){
            flex-direction: column;
        }
        .card_tarif h2{
            width: 90%;
            border-radius: 0;
        }
        /* fin tarif */

        /* contact */
        form,#form_inscription{
            width: 100%;
        }
        form div,textarea,#form_inscription div{
            width: 100%;
        }
        #form_inscription{
            border-radius: 0;
            padding: var(--pad-h) var(--pad-l);
        }
        textarea{
            display: initial;
            min-width: 100%;
            max-width: 100%;
        }
        #coordonee .ctn_contact{
            flex-direction: column;
            width: max-content;
        }
        #coordonee iframe{
           width: 100%;
        }
        /* fin contact */

        /* formulaire de contacte et inscription */
        form input,textarea{
            width: 100%;
        }
        #form::before{
            display: none;
        }
        #form_inscription{
          padding:var(--pad-h) var(--pad-l);
        }
        #before_form_inscription{
           padding: var(--pad-h) var(--pad-l);
        }
        /* fin formulaire de contacte et inscription */
    
    /* FIN MAIN */   

    /* FOOTER */
     #footer-menu{
        display: none;
    }
    #ctn_footer{
        justify-content: space-around;
        padding: 20px;
    }
    .ctn_contact{
        flex-direction: row;
        width: 210px;
        justify-content: space-around;
    }
    #paiment_valide>p{
        padding-top: 0;
    }
    /* FIN FOOTER */ 
}

@media screen and (max-width:500px){
    .grid3,.grid4,.grid2{
        grid-template-columns: repeat(1,100%);  
    }
    /* HEADER */
    header{
        flex-direction: column;
    }
    /* FIN HEADER */

    /* MAIN */
    form{
        padding: 20px 2%;
    }
    #coordonee .ctn_contact a,#coordonee .ctn_contact div{
        flex-direction: column;
    }
    #coordonee .ctn_contact a img{
        margin: 10px
    }
    #position_btn{
        flex-direction: column;
    }
    #position_btn>div {
        margin-top: 30px;
    }

    /* FIN MAIN */ 
}

@media screen and (max-width:460px){
    /* MAIN */
    /* banière home */
        #ctn_title_cta h2{
            font-size: 1.8rem !important;
        }
    /* fin banière home */
    /* FIN MAIN */

    /* FOOTER */

    .ctn_contact{
        padding-bottom: 0;
    }
 
    /* FIN FOOTER */
}

@media screen and (max-width:400px){
    
    /* MAIN */
   
      #slider h1,#slider_home h1{
        font-size: 2.5rem !important; 
    } 
    /* FIN MAIN */

    /* FOOTER */
    #ctn_footer{
            flex-direction: column;
    } 
    .ctn_contact{
        width: 100%;
    }
    /* FIN FOOTER */
}