/*
Theme Name: L'Art des Notes
Theme URI: https://www.com2see.fr
Description: L'Art des Notes
Version: 1.0
Author: Mathieu Preuilh
Author URI: https://www.com2see.fr
*/
body {
    color:#555555;
    font-family: 'Roboto', sans-serif;
    line-height:26px;
	background:#fefefe;
    position:relative;
    overflow-x:hidden;
    font-size:15px;
}
:root{
	--main-color:#e46627;
	--main-rgba-color: 228, 102, 39;
    --dark-color: #aa3d06;
}


/***** HEADER *****/
#header{
    background:rgba(0,0,0,0.5);
    padding:15px;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:1100;
}
#header .row{
    justify-content:space-between;
    align-items: center;
}
.menu{
    display:flex;
    margin:0;
    padding:0;
    list-style:none;
    justify-content: space-evenly;
    font-family: 'Oswald', sans-serif;
}
.menu li{
    position:relative;
}
.menu li a{
    text-transform: uppercase;
    font-size:20px;
    font-weight:300;
    color:#fff !important;
}
.menu li a:hover, .menu li.current-menu-item a{
    color:var(--main-color) !important;
}
.menu ul.sub-menu{
    opacity:0;
    transition:all 0.3s;
    display: inline-block;
    position: absolute;
    left:0;
    top:0;
    text-align: left;
    list-style: none;
    padding: 79px 0 0 0;
    pointer-events: none;
}
.menu li:hover ul.sub-menu{
    
    opacity:1;
    pointer-events: auto;
}
.menu ul.sub-menu li{
    background-color: rgba(0,0,0, 0.5);
    line-height:45px;
    padding:5px 15px;
}
.menu ul.sub-menu li:last-child{
    border:none;
}
/* En-tête */
.entete .hover{
    padding:230px 0 100px 0;
    background: rgba(0, 0, 0, 0.5);
}
.ariane{
    padding:30px 0;
    text-align:center;
}
.ariane ul{
    margin:0;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items:center;
}
.ariane ul li:after{
    content:'>';
    padding:0 15px;
}
.ariane ul li:last-child:after{
    display:none;
}
.ariane ul li a, .ariane ul li span{
    text-transform: uppercase;
    font-size:12px;
    font-weight:300;
    letter-spacing: 4px;
}

/***** ACCUEIL *****/
/* Infos */
#infos i{
    padding-bottom:30px;
    font-size:20px;
    color:transparent;
    -webkit-text-stroke: var(--main-color) 1px;
}
#infos p{
    font-family: "Oswald", sans-serif;
    text-align:center;
}
/* A Propos */
#simple-row{
    padding:100px 0;
    background:#f6f6f6;
}
#about .row>*{
    padding:0;
}
#about .bckg-cover{
    margin-bottom:30px;
}
#about .apropos{
    margin-top:30px;
    background:#f6f6f6;
    padding:100px 150px;
}
/* Boutique */
#boutique{
    margin-top:-30px;
}
#boutique .row_section{
    padding-top:130px;
}
.instru{
    display:inline-block;
    text-align:center;
    margin-bottom:30px;
}
.instru img{
    max-width:75px;
    max-height:75px;
    margin-bottom:15px;
    transition:all 0.5s;
}
.instru:hover img{
    transform:scale(1.2);
}
.instru p{
    text-align:center;
    color:#d8d8d8;
    font-weight:400;
}
/* Marques */
#marques{
    overflow:hidden;
}
#marques ul{
    list-style:none;
    padding:0;
    margin:0;
    align-items: center;
    flex-wrap: nowrap;
    /*TODO : calc duration en fonction du nombre d'images */
    animation: 30s linear infinite slider-marques;
}
@keyframes slider-marques {
    0% {
        transform: translateX(0);
    }
    50% {
        /*TODO : calc en fonction du nombre d'images */
        transform: translateX(-16%);
    }
    100% {
        transform: translateX(0);
    }
}
/* Services */
#services{
    background:#f6f6f6;
}
.service {
    position:relative;
    display:inline-block;
    z-index:0;
    text-align: center;
}
.service .bloc-service{
    position:relative;
    z-index:2;
    margin:-180px 50px 0 50px;
    background:rgba(255,255,255,0.9);
    text-align:center;
    padding:40px 15px;
    font-weight:400;
    transition:all 0.5s;
    max-width:450px;
    margin-bottom:30px;
}
.service .bloc-service h4, .bloc-artisan h4, .bloc-instru h4{
    font-weight:400;
    margin-bottom:40px;
    text-transform: uppercase;
    font-size:24px;
}
.service .bloc-service p{
    text-align:center;
    padding:0 20px;
}
a.service:hover .bloc-service{
    margin-top:-250px;
    color:#555;
}
/* Artisan */
#artisan h3, #artisan p{
    color:#fff
}
#artisan h2{
    color:#e0e0e0;
}
.bloc-artisan{
    padding:30px 15px;
    background:#fff;
}
.bloc-artisan p{
    text-align:center;
    color:#555 !important;
}
.bloc-artisan h4{
    margin-bottom:30px;
}
/* Events */
#events{
    margin-top:-30px;
}
#events .row>*{
    padding:0;
}
#events .bckg-cover{
    margin-top:30px;
}
#events .bckg-cover .hover-noir, .bckg-video .hover-noir{
    position: relative;
    width: 100%;
    height: 100%;
}
#events .bckg-cover a, .bckg-video a{
    display:inline-block;
    font-size:100px;
    position:absolute;
    top:calc(50% - 50px);
    left:calc(50% - 50px);
    color:#fff;
    opacity:0.5;
}
#events .bckg-cover a:hover,  .bckg-video a:hover{
    opacity:1;
}
#events .events{
    margin-bottom:30px;
    background:#f6f6f6;
    padding:100px 150px;
}
#events-list{
    background:#f6f6f6;
}
/* Liste events */
#em-wrapper{
    margin-top:60px;
}
.em.pixelbones{
    font-family: 'Roboto', sans-serif !important;
}
.em.pixelbones h4{
    font-weight: 400 !important;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-size: 24px !important;
    text-align:left;
}
.em.em-item .em-item-image.has-placeholder, .em.em-list .em-item .em-item-image.has-placeholder, .em.em-list-widget .em-item .em-item-image.has-placeholder, .em.em-item .em-item-image, .em.em-list .em-item .em-item-image{
    margin-left:auto;
    margin-right:60px;
}
.em.em-list .em-item{
    color:#555;
    display:flex;
    align-items:center;
}
.em-event-meta.em-item-meta{
    font-size: 20px;
    color: #2c2c2c;
    font-weight: 300;
    line-height: 75px;
    font-variant: small-caps;
}
.em.pixelbones blockquote, .em.pixelbones dl, .em.pixelbones figure, .em.pixelbones ol, .em.pixelbones p, .em.pixelbones pre, .em.pixelbones table, .em.pixelbones ul{
    margin-bottom:15px !important;
}
.em.em-item .em-item-meta .em-item-meta-line, .em.em-list .em-item .em-item-meta .em-item-meta-line, .em.em-list-widget .em-item .em-item-meta .em-item-meta-line{
    align-items:center;
    font-family: 'Oswald', sans-serif;
}
.em.em-list .em-item .em-item-info .em-item-meta>div {
    flex: 1 1 33.33%;
}
.em.em-list .em-item .em-item-info{
    border:none !important;
}
.em.em-list .em-item{
    border-color:#fefefe;
}
.small-list-events .em-item-desc, .small-list-events .em.em-list .em-item .em-item-meta .em-item-meta-line.em-event-date, .small-list-events .em.em-list .em-item .em-item-meta .em-item-meta-line.em-event-time, .small-list-events .em.em-list .em-item .em-item-meta .em-item-meta-line span {
    display:none;
}
.small-list-events .em.em-item .em-item-image.has-placeholder, .small-list-events .em.em-list .em-item .em-item-image.has-placeholder, .small-list-events .em.em-list-widget .em-item .em-item-image.has-placeholder, .small-list-events .em.em-item .em-item-image, .small-list-events .em.em-list .em-item .em-item-image{
    margin:0 15px 0 0;
    width:60px;
    padding: 0;
    min-width: unset;
    color:var(--main-color);
    font-size:28px;
}
.small-list-events .em.em-event .em-item-image .em-item-image-placeholder div.date, .small-list-events .em.em-events-list .em-item-image .em-item-image-placeholder div.date, .small-list-events .em.em-events-widget .em-item-image .em-item-image-placeholder div.date{
    min-width:unset;
    display:inline-block;
}
.small-list-events .em.em-item .em-item-image .em-item-image-placeholder, .small-list-events .em.em-list .em-item .em-item-image .em-item-image-placeholder, .small-list-events .em.em-list-widget .em-item .em-item-image .em-item-image-placeholder{
    background:none;
    opacity:1;
}
.small-list-events .em.em-list .em-item .em-item-meta .em-item-meta-line.em-event-location{
    display:inline-block;
    text-align:left;
    text-transform: uppercase;
    color:#555 !important;
    margin:0;
}
.small-list-events .em.em-event .em-item-image .em-item-image-placeholder div.date span, .small-list-events .em.em-events-list .em-item-image .em-item-image-placeholder div.date span, .small-list-events .em.em-events-widget .em-item-image .em-item-image-placeholder div.date span{
    font-size:25px !important;
    line-height:25px;
    align-self:unset;
}
.small-list-events .em.pixelbones h4{
    font-size: 20px !important;
    text-transform: none;
    color: #000;
    margin-bottom: 0 !important;
    letter-spacing: 0 !important;
    font-variant: none;
}
.small-list-events .em.em-list.em-grid .em-item .em-item-info, .small-list-events .em.em-list.size-small .em-item .em-item-info{
    padding:0;
}
.em.em-list.em-grid .em-item, .em.em-list.size-small .em-item{
    border:none;
    box-shadow:none;
    padding:10px 0;
    border-top:1px solid #ccc;
}
.em.em-list.em-grid .em-item:first-child, .em.em-list.size-small .em-item:first-child{
    border-top:0;
}
.small-list-events .em.em-list{
    grid-gap: 0;
}
.small-list-events .em-item-image img{
    display:none;
}
#events-list .em-item-image.has-image .em-item-image-placeholder{
    display:none;
}
/* FAQ */
#faq ul.bloc-question{
    list-style:none;
    margin:0;
    padding:0;
}
#faq ul.bloc-question > li {
    padding-right: 100px;
    padding-left: 100px;
    margin-top:30px;
}
#faq ul li:last-child{
    margin-bottom:30px;
}
#faq ul li .title-question{
    display:flex;
    justify-content: space-between;
    align-items:center;
    width:100%;
    border-bottom:1px solid #ccc;
}
#faq ul li .title-question p{
    font-family: 'Oswald', sans-serif;
    font-size:25px;
    color:#2c2c2c;
    font-weight:300;
    line-height:75px;
    font-variant:small-caps;
    cursor:pointer;
    margin:0;
}
#faq ul li .title-question i{
    font-size:14px;
}
#faq ul li .title-question:hover p{
    color:var(--main-color);
}
#faq ul li .title-question.open i:before{
    content:'\f106';
}
#faq ul li .answer{
    max-height:0;
    overflow:hidden;
    transition:all 0.5s;

}
#faq ul li .answer.open{
    max-height:1000px;
}
.page-template-page-faq #faq{
    background:#f6f6f6;
}
/* Instruments */
#instruments{
    background:#f6f6f6;
}
ul.list-instrus{
    list-style:none;
    /*max-width:860px;*/
    margin:0 auto;
    padding:0;
    align-items: center;
    justify-content: center;
}
ul.list-instrus li{
    padding:0 15px;
    margin-bottom:30px;
}
ul.list-instrus li .bloc-instru {
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    background: #fefefe;
}
ul.list-instrus li .img-instru{
    width:33%;
}
ul.list-instrus li .img-instru img{
    height:100%;
    object-fit: cover;
}
ul.list-instrus li .text-instru{
    width:67%;
    padding:30px;
}
.text-instru h4{
    text-align:left;
}
/* Listes services */
#liste-services ul{
    margin:0;
    padding:0;
    list-style:none;
    justify-content: center;
}
#liste-services ul li{
    display: flex;
    flex-direction: column;
}
#liste-services ul li .bloc-artisan{
    height:100%;
    margin-top: auto;
}
/* Contact */
.acf-map{
    height:calc(100% - 30px);
}
.contact-form .row{
    align-items: flex-end;
}
.contact-form .container-form, .container-form-checkbox{
    position:relative;
    padding-right: calc(var(--bs-gutter-x)* .5) !important;
    padding-left: calc(var(--bs-gutter-x)* .5) !important;
}
.contact-form .container-form label{
    font-size:20px;
    color:#2c2c2c;
    font-weight:300;
    font-variant:small-caps;
    position: absolute;
    left: 15px;
    top: 0;
    line-height:50px;
    padding: 0 15px;
    pointer-events: none;
    text-align: left;
    z-index:1;
}
.contact-form .container-form.active label{
    display:none;
}
.contact-form .container-form p{
    text-align:center;
}
.contact-form .btn{
    margin-top:30px;
}
.form-group:focus {
    outline:0;
    border:1px solid var(--main-color);
}

/***** FOOTER *****/
/* Blocs infos */
#infos a h5{
    text-transform: uppercase;
    font-weight:300;
    letter-spacing: 4px;
}
#infos a p{
    font-weight:normal;
}
#infos a i{
    padding-bottom:15px;
}
/* Footer */
#footer{
    font-family: "Oswald", sans-serif;
    background:#f6f6f6;
}
#footer .row_section_small{
    align-items:center;
}
#footer ul{
    list-style:none;
    margin:0;
    padding:0;
}
#footer ul.contact li{
    display: flex;
    align-items: center;
    margin-bottom:10px;
}
#footer ul.contact li i{
    color:transparent;
    -webkit-text-stroke: #555 1px;
    width:30px;

}
#footer ul.navigation li{
    text-align:right;
}
#footer ul.navigation a{
    font-variant: small-caps;
    font-weight:400;

}
/* Copyright */
.copyright{
    line-height:50px;
    padding-bottom:15px;
    color:#c0c0c0;
    font-size:14px;
    font-weight:300;
}
.copyright ul{
    display:flex;
    margin:0;
    padding:0;
    list-style:none;
    justify-content: center;
}
.copyright ul li:after{
    content:"-";
    padding:0 10px;
}
.copyright ul li:last-child:after{
    content:none;
}
.copyright ul a{
    color:#c0c0c0;
    font-weight:300;
}
.copyright ul a:hover{
    color:var(--main-color);
}
.copyright img{
    max-height:30px;
}
@media(max-width:1499px){
    #about .apropos, #events .events {
        padding: 100px;
    }
    #faq ul li{
        padding-left:50px;    
        padding-right:50px;    
    }
}  
@media(max-width:1199px){
    .menu li a {
        font-size:18px;
    }
    #faq ul li{
        padding-left:5px;    
        padding-right:5px;    
    }
    .copyright {
        padding: 15px;
    }
    
    .copyright .col {
        text-align: center;
        line-height: 25px;
    }
    #about .apropos,
    #events .events {
        padding: 60px;
    }
}
@media(max-width:991px) {
    #menu.collapse.in {
        display: flex;
        max-width: 100%;
        padding: 0 15px 15px 15px;
    }

    #menu {
        position: absolute;
        top: 100%;
        right: 0;
        border-radius: 0;
        padding: 0 0 15px 0;
        flex-direction: column;
        max-width: 0;
        transition: all 0.5s;
        overflow: hidden;
        width: 100%;
        height: auto;
        background: rgba(0,0,0,0.5);
    }

    #menu li {
        width: 100%;
        padding: 0;
        text-align: right;
    }

    #menu li a {
        padding: 0;
        line-height: 35px;
    }

    #menu ul.sub-menu {
        position: relative;
        left: unset;
        top: unset;
        display: block;
        background: none;
        box-shadow: none;
        width: 100%;
        margin-top: 0;
        opacity: 1;
        padding: 0 0 15px 0;
    }

    #menu ul.sub-menu li {
        border-bottom: 0;
        line-height: 25px;
        background:none;
    }

    #menu ul.sub-menu li a {
        line-height: 25px;
        color: #ccc !important;
        font-style: italic;
    }

    #menu ul.sub-menu li.current-menu-item>a {
        color: var(--red);
    }

    img.logo {
        max-height: 60px;
    }

    #about .apropos, #events .bckg-cover{
        margin-top:0;
    }
    #about .bckg-cover, #events .events{
        margin-bottom: 0;
    }
    .ariane ul li {
        width:100%;
        text-align:center;
    }
    .ariane ul li:after {
        display:none;
    }
    .acf-map {
        height: 300px;
    }
}
@media(max-width:575px){
    #footer ul.contact li,#footer ul.navigation li{
        text-align:left;
    }
    .service .bloc-service{
        margin-right:15px;
        margin-left:15px;
    }
    ul.list-instrus li .bloc-instru {
        flex-direction: column;
        max-width:230px;
        margin:auto;
    }
    ul.list-instrus li .img-instru, ul.list-instrus li .text-instru {
        width: 100%;
    }
        .em.em-list .em-item{
            flex-direction: column;
        }
                .em.em-item .em-item-image.has-placeholder,
                .em.em-list .em-item .em-item-image.has-placeholder,
                .em.em-list-widget .em-item .em-item-image.has-placeholder,
                .em.em-item .em-item-image,
                .em.em-list .em-item .em-item-image{
                    margin-left:auto;
                    margin-right:auto;
                }
}