/* INITIALISATION DES VARIABLES */
/* Headings sizes */
:root{
    --h1-mobile-size: 24px;
--h2-mobile-size: 20px;
--h3-mobile-size: 18px;
--h4-mobile-size: 20px;
--nav-mobile-size: 18px;
--p-mobile-size: 14px;
--vignette-mobile-size: 14px;
--btn-mobile-size: 18px;
--footer-mobile-size: 14px;

}


/* PAGE D'ACCEUIL */
@media screen and (max-width: 440px){
    /* btn */
    .btn{
        width: 200px;
        height: 50px;
    }

    #container-num{
        display: none;
    }

    .cta-top{
        width: 30px;
        height: 30px;
        right: 4.5%;
        padding: 6px 5px 5px 5px;
    }

    .cta-top .icon-cta-top svg{
        width: 15px;
    }

    /* Fonts size */
    h1{
        font-size: var(--h1-mobile-size);
        width: 100%;
    }

    h1:before{
        width: 100%;
        height: 5px;
    }

    h2::after{
        height: 5px;
    }

    h2{
        font-size: var(--h2-mobile-size);
    }

    h3{
        font-size: var(--h3-mobile-size);
        text-align: center;
        color: var(--main-color);
        font-weight: 600;
        margin-top: 30px;
    }

    h3::after{
        display: none;
    }

    p{
        width: 100% !important;
        text-align: center;
        font-size: var(--p-mobile-size);
    }

    #id{
        font-size: 16px;
        width: 100%;
    }

    body{
        text-align: center;
    }

    /* HEADER */
    nav{
	    height: 45px;
    }

    #container-nav{
	        margin: auto;
	}


    #icon-menu{
        display: block;
        width: 30px;
        height: 30px;
    }

    #icon-menu:hover, #icon-menu:focus{
        fill: var(--main-color);
    }

    .menu-menu-principal-container{
        width: 100vw;
    height: 303px!important;
    position: absolute;
    z-index: 99;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--main-color);
    box-shadow: 0px 0px 30px rgb(0 0 0 / 15%);
    padding-bottom: 0;
    }

    #menu-menu-principal{
        display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
        border-radius: 0 0 30px 30px;:
    }

    #menu-menu-principal li{
        margin: 5px 0;
	font-size: 14px;
    }

    nav a{
        color: var(--white-color);
    }

    nav{
        padding: 0 30px;
        top: 0;
    }

    .custom-logo-link img{
        height: 32px;
        margin: 0;
        width: 100%;
    }

    .custom-logo-link{
        margin: 0;
    }

    .menu-menu-principal-container{
        display: none;
	border-radius: 0 0 30px 30px;
    }

    #icon-close{
        width: 30px;
        height: 30px;
        display: none;
        z-index: 99;
        fill: var(--white-color);
    }

    nav ul.sub-menu{
        display: block;
    margin: auto;
    text-align: left;
    box-shadow: none;
    border-radius: 0;
    padding: 0 50px 0 100px;
    height: auto;
    max-width: 100vw;
    font-size: 14px;
    }

    #menu-item-259{
	    max-width: 100vw;
	    text-align: left;
	    margin-top: 0important;
    }

    #menu-item-336{
    padding-bottom: 10px;
    box-sizing: border-box;
    }

    #menu-item-499{
	 margin-top: 0!important;
    padding-bottom: 10px;
	}

	#menu-item-334{
		margin-top: 0!important;
    padding-bottom: 10px;
    }

    #menu-item-569{
	  padding-bottom: 10px;
	}

	nav ul li:hover{
		border: none;
		transition: none;
	}

	nav a:hover{
		color: var(--white-color)!important;
		transition: none!important;
	}
	
	nav ul.sub-menu li:hover{
		background-color: var(--main-color);
		transition: none;
	}

    /* PAGE D'ACCEUIL */
    #content-background-site{
        display: none;
    }

    #container-home-page{
        padding: 0 30px;
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    #content-background-site{
        height: 225px;
    }

    #container-apropos, #container-vignettes, #container-localisation{
        padding: 0 30px;
    }

    /* About */

    #container-apropos{
        margin-bottom: 0;
    }

    #content-apropos{
        flex-direction: column;
    }

    .content-thumbnail-article{
        height: 221px;
        margin-bottom: 20px;
        margin-left: 0;
    }

    /* Horaires */

    #content-horaires{
        display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    }

    #content-horaires li{
        font-size: 14px;
    }

    #container-horaires .jour, #container-horaires .horaire{
        text-align: center;
        margin: 10px;
    }

    #container-horaires .horaire{
    padding-bottom: 20px;

    }

    /* Localisation */
    #content-localisation{
        flex-direction: column;
    }

    /* Vignettes */
    #content-vignettes{
        width: fit-content;
        transform: translate(-169px, -117px);
    }

    #content-vignettes li{
        margin: 0 20px;
    }

    #container-vignettes{
        height: 350px;
        overflow-x: scroll;
        overflow-y: hidden;
        margin: 0;
        background-color: var(--main-color);
    }

    #wrapper-container-vignettes{
        clip-path: none;
        width: 250vw;
        margin-top: 30px;
    }

    /* Prestations */
    #container-presta{
	    padding: 0 30px;
    }

    #content-presta{
        width: fit-content;
    }

    .content-block-presta{
        padding: 30px;
        margin-bottom: 50px;
    }

    #content-presta{
        display: flex;
        flex-direction: column;
        margin-top: 0;
    margin: auto;
    box-sizing: border-box;
    }

    #content-presta li{
        width: 100%;
	box-shadow: 0px 0px 30px rgb(0 0 0 / 15%);
    box-sizing: border-box;
    }

    /* Localisation */
    #container-localisation{
        margin-bottom: 0;
        margin-top: 50px;
    }
    .part-location{
        margin-top: 0;
    }

    /* Contact */
    #container-form{
        width: 100vw;
        padding: 0;
        box-sizing: border-box;
    
    }

    #wpcf7-f420-o1 p, .input-msg{
	    margin: 15px 0;
	   }
	#content-form{
		padding: 0 30px;
	}

    .desc-contact{
        padding: 0;
    }

    #contact{
    margin: auto;
    padding-top: 50px;
    }

    #container-contact{
        margin-top: 0;
    }

    /* Page Presta */
    #title-page-presta::after{
        margin: 20px auto;
    }

    #title-page-presta{
        margin-top: 80px;
    }

    .long-thumbnail{
        height: 300px;
        margin-bottom: 50px;
        margin-top: 60px;
    }

    .container-desc-presta{
        display: flex;
        flex-direction: column;
        padding: 0 30px;
    }

    .content-first-desc-presta, .content-second-desc-presta{
        padding: 0;
        margin-bottom: 0;
    }

    .content-second-desc-presta{
        margin-bottom: 0;
    }

    .container-infos{
        padding: 0 30px;
	    height: 220px;
    }

    .text-infos{
        font-size: 16px;
    }

    .wrapper-info{
        height: 500px;
        clip-path: polygon(0 38%, 100% 54%, 100% 100%, 0% 100%);
    
}

/* Page Documents */
#content-docs{
	padding: 0 30px;
	        margin: 50px auto;    }

    #container-uploads-docs{
	        margin: 0 30px 150px 30px;
		    width: fit-content;
	    }

	    #title-documents{
		    margin: 80px auto 50px auto;
	    }

    /* Footer */
    #container-footer{
        flex-direction: column;
        padding: 50px 30px 0 30px;
    }

    #content-horaires-footer, #content-coordonnes-footer{
        width: 100%;
    }

    .text-footer{
        font-size: 14px;
        text-align: center;
    }

    .day{
        font-weight: 600;
    }

    .hour{
        margin-bottom: 30px;
    }

    .icon-info{
        flex-direction: column;
        margin: auto;
        padding-bottom: 20px;
    }

    .icon-footer{
        margin: auto;
    }

    #mention-legales{
        font-size: 10px;
    }

    /* Form */
    .wpcf7-form{
	grid-template-columns: none;
	margin: auto 30px;
	}

	/* Page Nouveautés */
	#container-news{
		display: flex;
		flex-direction: column;
		padding: 0 30px;
	}
}