@media screen and (max-width: 1433px) {
 
}
@media screen and (max-width: 1300px) {
    .grid4{
         grid-template-columns: repeat(3, 1fr);
    }
  
}
@media screen and (max-width: 1200px) {
  
}
@media screen and (max-width: 1080px) {

}
/* TABLETTE */
    
@media screen and (max-width:980px){
    .grid3{
        grid-template-columns: repeat(2, 1fr);
    }
      .grid4{
         grid-template-columns: repeat(2, 1fr);
    }
  
    .avweb_responsive_colonne{
        flex-direction: column;
    }
    .avweb_responsive_colonne_reverse{
        flex-direction: column-reverse;
    }
    .avweb_w1_tablette{
            width: 100%;
    }
   
    .desktop{
        display: none !important;
    }
    .tablette{
        display: block ;
    }
    .responssive{
        display: block;
    }
    /* header */
        header{
            padding: 15px 5% ;
            height: 200px;
        }
        
        #burger+label {/*Regle de style du label */        
            display: block;
            width: 55px;
            height: 50px;
            position: fixed;
            top: 35px;
            right: 70px;
            z-index: 100002;
            background-color: var(--color4);
            box-shadow: inset 0 0 3px .5px var(--color1);
            overflow: hidden;
            border-radius: 10px;
        }
        #burger+label:before {
            content: '';
            height: 70%;
            width: 85%;
            position: absolute;
            top: 8px;
            left: 4px;
            border-top: solid 3px var(--color1); /*barre du haut */
            border-bottom: solid 3px var(--color1);/*barre du millieu*/
            transition: all 0.3s;
            border-radius: 10px;
        }
        #burger+label:after {
            content: '';
            width: 85%;
            position: absolute;
            top: 24.5px;
            left: 4px;
            border-top: solid 3px var(--color1);/*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: 18px;
            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 { /*regle de style du ul qui se deroule */
            display: none;
            position: fixed;
            overflow: scroll;
            left: 0px;
            top: 0;
            height: 100%;
            width: 100%;
            background-color: var(--color7);
            display: flex;
            flex-direction: column;
            transition: all .3s;
            transform: translateX(-120%);
           z-index: 100001;
        }
        #burger:checked+label + #responsive-main-menu {
        /* regle de style quand le burger est coché */
        transform: translateX(0);
        }
        header nav li { /*pour aerer le ul */
            flex: 4;
            display: inherit;
            align-items: center;
            justify-content: center;
        }
        .menu {
            padding-top: 60px;
        } 
        .menu > ul > li a,.menu > ul > li label{
            color: var(--color1);
        display: flex;
        justify-content: center;
        padding: 15px;
        text-decoration: none;
        width: 60%;
        margin: 0 auto;
        text-align: center;
        font-weight: bold;
        font-size: 1.5rem;
        box-shadow: 0 0 3px 0px var(--color1);
        background: var(--color4);
        }
        .menu > ul li input:checked+label ~.sub-menu {  
            max-height: 300px; 
        }
        .menu > ul .sub-menu li a{
            font-size: 0.9em;
            width: 100%;
        }
        #responsive-main-menu>li:first-child >a{
            background: none;
            box-shadow: none;
        }
        #responsive-main-menu li:first-child img{
            min-width: 200px;
            max-width: 50%;
        }
        #responsive-main-menu .menu-item-has-children{
            display: flex;
            flex-direction: column;
        }
        .sub-menu{
            display: flex;
            flex-direction: column;
            height: max-content;
            opacity: 0;
            text-align: center;
            z-index: -1;
            padding-bottom: 10px; 
            background-image: linear-gradient(271deg,transparent, var(--color2), transparent);
            list-style: none;
            max-height: 0;
            overflow: hidden;
            transition: .5s;
            width: 60%;   
            margin: 0 auto;
        }
        #menu_deroulant a{
            width: 100%;   
        }
        #menu_deroulant li{
            padding: 10px 0;   
        }
        header li a:after {    
            content: "";
            display: none;
        }
        /* class ajouté en JS  pour ouvrir le sous menu*/
        .open_menu{
            opacity: 1;
            z-index: 1;
            top: 100%;
            display: flex;
            flex-direction: column;
            padding: 15px;
            text-decoration: none;
            width: 60%;
            margin: 0 auto;
            max-height: 300px;
            background-image: linear-gradient(271deg,transparent, var(--color2), transparent);
            width: 60%;
        }   
        #ctn_fleche{
            display: none;
        }
         /*#menu-item-791 a{lien offre starter dans le menu
            text-align: center;
        }*/
        header #ctn_contact div.flex {
            padding: 20px 0 0;
        }
        /*traduction */
        header .gtranslate_wrapper {
            left: 25px;
        }

    /* fin header */
    
    /* main */
    .etiquette{
        position:static;
        border-radius: 0;
        margin-bottom: 15px;
    }
    #section_une > article > div:first-of-type{
    padding: 0 0 15px;
    }
    #ctn_faq{
        width: 100% !important;
    }

    .beandeau_single_event ul{
        width: max-content;
        margin: 0 auto;    
    }
    .beandeau_single_event .infos_event_single{
        justify-content: initial !important;    
    }

    /* footer */
    footer #partenaire {
        width: 100%;
    }
     footer nav {
        display: none;
    }
    
}
    
       

/* FIN TABLETTE */ 

@media screen and (max-width:781px){
    .avweb_responsive_mobile_colonne{
        flex-direction: column;
    }
    .avweb_responsive_mobile_colonne_reverse{
        flex-direction: column-reverse;
    }
    #bloc_tel_header {
            margin-top: 30px;
    }
    header{
        height: 270px;
    }
    
}

/* MOBILE */
    @media screen and (max-width:767px){
        .avweb_not_display_mobile{
            display: none !important;
        }
        .grid3,.grid2,.grid3,.grid4{
            grid-template-columns: repeat(1, 1fr);
        }
        .mobile{
            display: block;
        }
        .section_video{
            display: none;
        }
		#burger+label {
            right: 36px;
        }
        .avweb_w1_mobile{
            width: 100%;
        }
        /* boutons laterale*/
        #aside_btn{
            top: initial;
            bottom: 0;
            left:0;
            border-top: solid 1px var(--color5); 
            border-bottom: solid 1px var(--color5); 
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            padding: 0;
            box-shadow: 0 0 5px 1px #c0c0c0;
            height: max-content;
        }
        #aside_btn > div{
            flex-direction: row;
            justify-content: space-between;
            padding: 0 5%;
        }
        .init_asid_btn{
            bottom:-40px;
            right: 0;
            opacity: 0;
        }
        .display_asid_btn{
            bottom:0;
            opacity: 1;
        }
        #aside_btn::before{
            content: '';
            position: absolute;
            height: 5px;
            width: 100%;
            left:0;
            top:0;
            background: linear-gradient( to right, var(--color3),var(--color4),var(--color5), var(--color2) );
            z-index: 0;
            background-size: 250% 250%;
            animation: bg_color 5s ease infinite;
        }
        #scrall_top{
            bottom: 15%;
        }
        footer{
            margin-bottom: 55px;
        }
    }
		
/* FIN MOBILE */    


@media screen and (max-width:880px){ 
   
}

@media screen and (max-width: 667px){
   

}
@media screen and (max-width: 500px){
    #page_404 div .btn,div[role="button"]{
        width:initial;
    }
}
@media screen and (max-width: 400px) {
    
}

@media screen and (max-width:342px) {
   
}
@media screen and (max-height: 300px) {
    
}