/*
Theme Name: Espace Participants - 4L Trophy
Theme URI: https://prepa.4ltrophy.com/
Description: A unique theme for Espace Participants 4L Trophy
Author: Flow La WEIZ
Author URI: https://www.desertours.com/
Requires at least: WordPress 6.6.1
Version: 3.0
*/

body{
    padding:0;
    margin:0;
    font-family: 'LatoWeb';
    font-style: normal;
    color:#60677a;
    font-size:16px;
    font-weight:400;
    line-height:26px;
    background-color:#f6f6f6;
    outline:0;
    border:0;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
}
#masthead{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    display:inline-block;
    z-index:110;
    transition:left .33s cubic-bezier(.694, .0482, .335,1);
    background-color:#ffffff;
}
#header-top h1{
    text-align:center;
    font-size:31px;
    text-transform:uppercase;
    display:block;
    line-height:0.8;
    margin:10px 5px;
}
#header-top h1 span.title{
    color:#dd3333;
}
#header-top h1 span.subtitle{
    color:#f46969;
    font-size:18px;
}
#main, div.header-content, #primary article.single{
    display:block;
    max-width: 1100px;
    margin:0 auto;
}

body #primary article.single{
    background-color:#fff;
    padding:10px;
    border-radius:5px 5px 5px 5px;
    box-shadow:0 2px 5px rgba(110, 53, 97, .4);
    margin:0 auto 40px;
    position:relative;
}
.pink{
    color:#dd3333;
}
.home iframe{
    max-width:100%;
}
article.connexion{
    margin:20px auto;
    padding:10px;
    max-width:600px;
    background-color:#ffffff;
    border-radius:7px;
    box-shadow:0 2px 5px rgba(110, 53, 97, .4);
    overflow:hidden;
}
#main .model-type h3 a span.extension{
    font-size:12px;
}
hr{
    border:0;
    border-bottom:solid 1px #fff;
    box-shadow: 3px 3px #dd3333, 1em .4em .4em #f46969;
}
article.connexion h2, h1{
    color:#dd3333;
}
h1{
    font-size:31px;
    text-align:center;
}

#tabs{ border:0; color:#60677a; padding:0; width:100%; }
#tabs .ui-widget-content, #tabs .ui-state-active a, #tabs .ui-state-active a:link, #tabs .ui-state-active a:visited, #tabs .ui-state-default a{
    color:#60677a;
    font-size:16px;
    font-family:'LatoWeb';
}
form.fw-form label{
    display:block;
    font-family:'LatoWebLight';
    font-size:18px;
}
body form.fw-form .list-projects{
    width:95%;
}
form.fw-form input[type=text], form.fw-form input[type=email], form.fw-form input[type=password], form.fw-form .list-projects{
    width:90%;
    display:block;
    padding:5px 10px;
    color:#444444;
}
form.fw-form .field{
    margin: 10px 0;
    padding:10px 0;
    box-shadow: 3px 3px #dd3333;
}
i{
    font-family:'LatoWebLight';
}
form.fw-form div.btn{
    text-align:center;
    padding:25px;
}
form.fw-form div.btn input{
    padding:10px 20px;
    color:#ffffff;
    background-color:#dd3333;
    border:solid 2px #f46969;
    border-radius:10px 0 10px 0;
    cursor:pointer;
}
form.fw-form div.btn input:hover{
    background-color:#f46969;
    border:solid 2px #dd3333;
}
.error{
    font-family: 'LatoWebLight';
    color: #d7000a;
}
a:visited, a:hover{
    color:#f46969;
    text-decoration:none;
}
a{
    color:#dd3333;
    text-decoration:underline;
}
footer.site-footer-not-connected, footer.site-footer{
    position:fixed;
    bottom:0;
    width:100%;
    box-shadow:3px 3px #dd3333, 1em .4em .6em #f46969;
    border-top:solid 1px #dd3333;
    background-color:#f6f6f6;
}
footer.site-footer-not-connected .links, footer.site-footer .links{
    width:100%;
    max-width:600px;
    text-align:center;
    font-size:14px;
    margin: 0 auto;
}
footer.site-footer-not-connected .links a, footer.site-footer .links a{
    text-decoration:none;
    display:inline-block;
    margin:2px;
    padding:5px 8px;
}
body #background{
    position:fixed;
    z-index:-900;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:0.4;
}
div.has-error input {
    border: solid 1px #d7000a;
}
div.has-error label{
    color:#d7000a;
}
p.success{
    color:#dd3333;
}
#main, #main article{
    position:relative;
}
#main article{
    position:relative;
    z-index:10;
}
div.container-img{
    position:absolute;
    z-index:-10;
    left:55px;
    bottom:0;
    opacity:0.3;
}
div.container-img img{
    margin:auto;
    display:block;
}
.is-logged #primary{
    margin-top:150px;
}
#search{
    position:fixed;
    z-index:5;
    top:7px;
    left:0;
    right:0;
    bottom:0;
    height:50px;
}
#search .content-search{
    max-width:1100px;
    height:50px;
    margin:0 auto;
    background-color:#fff;
    position:relative;
    padding:50px 10px 0;
    border-radius:0 0 0 5px;
    box-shadow: 0 2px 5px rgba(110, 53, 97, .4);
}
#search .content-search input[type=text], #main .form-search input[type=text]{
    padding: 10px;
    width: 60%;
    border: solid 1px #f46969;
    border-radius: 0 10px 0 10px;
}
#search .content-search input[type=submit], #main .form-search input[type=submit], a.button.current, a.button.active, a.button:hover, form.treks-forms input[type=submit], .generatePdf input[type=submit], .content-search-file input[type=submit]{
    padding: 10px 20px;
    color: #ffffff;
    background-color: #dd3333;
    border: solid 2px #f46969;
    border-radius: 10px 0 10px 0;
    cursor: pointer;
    text-decoration:none;
}
div.attribute.disgne label.input-label{
    padding: 5px 8px;
    color: #ffffff;
    background-color: #f46969;
    border: solid 2px #dd3333;
    border-radius: 10px 0 10px 0;
    cursor: pointer;
    text-decoration:none;
    float:left;
    margin:5px;
    display:block;
}
.mask{
    display:none;
}
div.attribute.disgne label.input-label span{
    display:none;
}
div.attribute.disgne label.input-label.checked{
    background-color: #dd3333;
}
div.attribute.disgne label.input-label.checked span{
    display:inline-block;
}
.content-search-file{
    margin:20px 0;
    text-align:center;
}
.generatePdf{
    text-align:center;
    margin-top:40px;
}
form.treks-forms input[type=submit]{
    margin-bottom:30px;
    width:auto;
    display:block;
    margin:30px auto 40px;
}
.form-treks h4.pink{
    text-transform:uppercase;
    font-size:16px;
    font-weight:300;
}
.upload-type a.button{
    display:block;
    margin-bottom:10px;
}
.upload-type h3{
    margin-top:30px;
}
#uploads-files-list{
    border:solid 1px #ccc;
    margin:40px 0;
    padding:0 10px;
}
.items .span6{
    width:49%;
    margin:5px;
}
.items iframe{
    width:100%;
}
#upload-files-by-function .form{
    margin:40px 10px;
}
a.button{
    padding: 10px 20px;
    color: #f46969;
    background-color: #ccc;
    border: solid 2px #f46969;
    border-radius: 10px 0 10px 0;
    cursor: pointer;
    text-decoration:none;
    display:inline-block;
}
.taxo-upload{
    background-color:#dd3333;
    color:#fff;
    margin:5px;
    padding:20px;
    text-align:center;
    border-radius:5px;
    box-shadow: 0 3px 3px rgba(110, 53, 97, .4);
    position:relative;
}
.taxo-upload.no-sposts{
    background-color:#ddd;
}
.taxo-upload span{
    display:block;
    float:none;
    text-align:center;
    margin:0 auto 10px;
}
.taxo-upload span.fontello-icon{
    font-size:58px;
}
.taxo-upload.span3{
    width:20%;
}
.taxo-upload .link{
    margin-left:-20px;
    margin-right:-20px;
    background-color:#fff;
    position:relative;
}
.taxo-upload .description{
    display:none;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 1);
    background-color:#cecece;
    border:solid 1px rgb(110, 53, 97);
    position:absolute;
    z-index:10;
    bottom:0;
    left:0;
    right:0;
    color:#60677a;
    padding:5px 15px 5px 5px;
    text-align:justify;
}
.taxo-upload .description span.icon-cancel{
    color:#dd3333;
    font-size:18px;
    position:absolute;
    right:2px;
    top:2px;
    cursor:pointer;
}
.taxo-upload .no-link{
    margin-left:-20px;
    margin-right:-20px;
    margin-bottom:-20px;
    background-color:#fff;
    position:relative;
    color:#60677a;
    padding:5px;
}
.ui-tooltip {
    max-width: 350px;
    font-size:14px;
}
.categories .filters ul, .profil-page .filters ul{
    list-style:none;
    margin:20px 40px;
    padding:0;
}
.categories .filters ul li, .profil-page .filters ul li{
    display: inline;
}
.categories .filters ul li a, .profil-page .filters ul li a{
    margin:5px;
}
.profil, .profil-contacts, .categories-list{
    position:relative;
    margin:40px 0;
    border-top: solid 1px #60677a;
}
.categories{
    position:relative;
    margin:40px 0;
}
.profil-contacts{
    border-left: solid 1px #60677a;
}
.profil-content{
    margin-top:35px;
    padding:10px 20px;
}
.profil h2.title, .profil-contacts h2.title{
    background-color: #fff;
    top: -33px;
    padding: 0 5px;
    display: inline-block;
    margin-left: 20px;
    position: absolute;
    color:#dd3333;
}
.cursor{
    cursor: pointer;
    color:#dd3333;
}
div.logo-home{
    margin:0 auto;
    text-align:center;
}
div.delete-photo{
    position: absolute;
    top:2px;
    right:2px;
}
#img-logo div.delete-photo{
    top:37px;
}
div.delete-photo span{
    color:#d7000a;
    font-size:24px;
    font-weight:600;
    cursor:pointer;
}
.list-photos .span4{
    position: relative;
}
.profil-contacts h2.title{
    font-size:18px;
    top:-29px;
    padding:0 5px;
}
.taxo-upload .infos{
    margin-left:-20px;
    margin-right:-20px;
    margin-bottom:-20px;
    background-color:#ccc;
    position:relative;
    text-align:left;
}
.taxo-upload .infos span{
    display:inline;
    font-size:14px;
    color:#dd3333;
    margin:2px auto;
}
.taxo-upload .infos span.more-infos{
    cursor:pointer;
}
form.dropzone div.dz-message{
    margin: 0;
}
.taxo-upload .link a{
    display:block;
    padding:5px;
    text-align:center;
    text-decoration:none;
}
.photo-contact-display{
    width:100%;
    overflow: hidden;
    position:relative;
    max-width:150px;
    max-height:150px;
    margin:0 auto 20px;
    border-radius:50%;
}
.photo-contact-display-no-radius{
    width:100%;
    overflow: hidden;
    position:relative;
    width:150px;
    height:150px;
    margin:0 auto 20px;
    display:flex;
    align-items: center; /* alignement vertical */
    justify-content: center;
}
.photo-contact-display img, .photo-contact-display-no-radius img{
    width:100%;
}
.photo-contact-display .mask-photo{
    position:absolute;
    z-index:20;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
.center{
    margin:0 auto;
    text-align:center;
}
.span3{
    width:24%;
    float:left;
}
.span5{
    width:40%;
    float:left;
}
.span2{
    width:20%;
    float:left;
}
.profil-contacts.span3{
    width:23%;
}
ul.list-files{
    margin:5px 0 10px;
    padding:0;
    list-style:none;
}
h4{
    margin:5px 0 2px;
}
ul.list-files li span.icon-cancel{
    text-decoration:none;
    color:#d7000a;
    cursor:pointer;
}
ul.list-files li.error-file a{
    color:#cccccc;
}
#search .content-search .button-search{
    position:absolute;
    bottom:-30px;
    background-color: #fff;
    width:40px;
    height:30px;
    right:0;
    color:#dd3333;
    font-size:21px;
    border-radius:0 0 5px 5px;
    box-shadow: 0 3px 3px rgba(110, 53, 97, .4);
    cursor:pointer;
}
header{
    border: 0;
    box-shadow: 1px 2px #dd3333, 1em .2em 1.5em #f46969;
}
div.type-page{
    margin: 20px auto;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 7px;
    box-shadow: 0 2px 5px rgba(110, 53, 97, .4);
    overflow: hidden;
}
h2 span.fontello-icon{
    color:#f46969;
}
#ep4L{
    position:relative;
}
#main-menu{
    position:relative;
}
#identity{
    background-color:#dd3333;
    border-radius:5px 5px 0 0;
    padding:10px 0 0;
}
#identity h2{
    color:#fff;
    text-align:center;
}
.span4{
    width:33%;
    float:left;
}
.span6{
    width:49.666666%;
    float:left;
}
.span12{
    display:block;
    float:none;
    clear:both;
}
.clear{
    float:none;
    display:block;
    clear:both;
}
div.compte-a-rebours{
    color: #ffffff;
    position: absolute;
    font-size: 35px;
    top: 40px;
    left: 40px;
}
#identity .contacts{
    margin:0;
}
#identity .contacts .contact .user-identity{
    margin:0 1px 1px;
    background-color:#ffffff;
    text-align:center;
    border-left:solid 1px #dd3333;
    border-radius:30px 0 30px 0;
}
#identity .contacts .contact.active{
    color:#dd3333;
}

#identity span.project{
    display:block;
    margin-top:-10px;
    margin-right:5px;
    color:#ffffff;
    text-align:right;
}
.home div.type-page{
    margin:0 auto;
    border-radius:0 0 7px 7px;
}
p{
    margin:0 0 8px;
    text-align:justify;
}
div.content-home{
    box-shadow:none;
}
div.content-home .type-page{
    box-shadow: none;
}
.last-infos div.content-last-infos{
    margin:20px 5px;
    padding:10px;
    background-color:#fff;
    border-radius:7px;
}
.pink-icon{
    color:#dd3333;
}
.last-infos div.content-last-infos .first p{
    line-height:1.6;
    padding:0 0 5px;
}
.last-infos div.content-last-infos .first p, #accordion-messages p, .last-infos div.content-last-infos .first li, #accordion-messages li{
    font-size:14px;
    font-family:'LatoWeb';
}
img.conseillre-photo{
    max-width:90%;
    display: block;
    margin:0 auto;
}
#accordion-messages div img{
    display:block;
    margin:0 auto 10px;
    max-width:95%;
    height:auto;
}
#accordion-messages.ui-accordion .ui-accordion-header{
    font-family: 'LatoWeb';
    font-style: normal;
    color: #60677a;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}
.last-infos div.content-last-infos h3{
    text-align:center;
    font-weight:300;
}
h3{
    margin: 2px 0;
}
div.tag{
    border:solid 1px #60677a;
    border-radius:7px;
    margin:2px 5px;
    padding:5px 10px;
    display:inline-block;
    cursor:pointer;
}
div.tag a{
    text-decoration:none;
    color:#dd3333;
}
div.tag span.icon-cancel{
    color:#dd3333;
}
div.tag:hover{
    border:solid 1px rgba(110, 53, 97, .4);
    background-color:#dd3333;
    color:#fff;
}
div.tag:hover a{
    color:#ffffff;
}
div.tag:hover span.icon-cancel{
    color:rgba(110, 53, 97, .4);
}
.model-type{
    margin:15px 0;
    box-shadow: 0 2px 5px rgba(110, 53, 97, .4);
}
#main .model-type h3 a{
    color:#fff;
    text-decoration:none;
}
#main .model-type .options a{
    text-decoration:none;
    display:inline-block;
    padding:8px;
}
#main .model-type .options a.favoris, article.single h2 a.favoris{
    float:right;
    color:#ccc;
    cursor:pointer;
}
article.single h2 a.favoris{
    text-decoration:none;
}
article.single h2 a.favoris span.text{
    font-size:14px;
}
#main .model-type .options a.favoris.actif, article.single h2 a.favoris.actif{
    color:#dd3333;
}
#main .model-type .options a.favoris:hover, article.single h2 a.favoris:hover{
    color:#f46969;
}
#main .model-type h3{
    color:#fff;
    background-color:#dd3333;
    margin:0;
    padding:5px;
    text-align:left;
}
#main .model-type .infos{
    font-size:12px;
    background-color:#eee;
    padding:0 5px;
}
#main .model-type .infos span.category{
    display:inline-block;
}
div.favoris-list{
    margin-top:20px;
}
div.favoris-list .container{
    padding:0 3px;
}
div.favoris-list.current-trekkeuse h3, div.favoris-list h3 span.title{
    color:#dd3333;
}
div.favoris-list .options a.add-to-favoris{
    display:none;
}
div.favoris-list.current-trekkeuse .options a.add-to-favoris{
    display:inline-block;
}
#upload-files-by-function{
    display:none;
}
#post-search .model-type{
    width:48%;
    float:left;
    margin-right:1%;
}
.span8{
    width:65%;
    float:left;
}
#todo-list-ul{
    margin:20px 0 40px;
    padding:0;
    list-style:none;
}
#todo-list-ul li a{
    text-decoration:none;
    margin:5px 0;
    border:solid 1px #444;
    color:#60677a;
    padding:5px 10px;
    font-size:16px;
    display:block;
    cursor:pointer;
    border-radius:2px;
}
#todo-list-ul li.check a, #todo-list-ul li a:hover{
    background-color:#dd3333;
    color:#fff;
    border-color:#dd3333;
}
#todo-list-ul li span.fontello-icon{
    font-size:24px;
}
.hidden{
    display:none;
}
#primary{
    margin-bottom:60px;
}
.form-treks label{
    display:block;
}
.form-treks .attribute{
    margin: 5px 10px 20px;
}
.form-treks input, .form-treks textarea, .form-treks select{
    width:90%;
    padding:8px 15px;
    color:#60677a;
    border: solid 1px #f46969;
    border-radius: 0 10px 0 10px;
}
.form-treks .team-name input{
    width:50%;
    font-size:16px;
    color:#60677a;
}
.form-treks textarea{
    height:150px;
}
.form-treks .attribute.checkbox-type label, .form-treks .attribute.checkbox-type input{
    display:inline;
}
.form-treks .attribute.checkbox-type label{
    max-width:90%;
}
.form-treks .attribute.checkbox-type input{
    max-width:10%;
}
.form-treks .attribute-article{
    margin-bottom:30px;
}
#display-article{
    text-decoration:none;
    cursor:pointer;
}
.content-article{
    padding:20px;
    border:solid 1px #60677a;
    font-size:14px;
    text-align: justify;
}
#team-social label span.fontello-icon{
    color:#dd3333;
}
#team-social label{
    font-size:18px;
}
#team-social .span6{
    margin:10px 0;
}
.delete-conf{
    position:absolute;
    z-index:999;
    background-color:#fff;
    border:solid 1px #dd3333;
    padding:10px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    display:none;
}
div.teaser{
    text-align:center;
    margin:10px 0 0;
}
.display-none{
    display:none;
}
div.teaser iframe{
    max-width:560px;
    max-height:315px;
    width:95%;
    height:315px;
    margin-top:20px;
}
div.social-network{
    margin-top:30px;
}
div.social-network div.span3, div.social-network div.span2{
    text-align:center;
}
div.social-network img{
    max-width:100px;
    width:80%;
}
div.bed{
    margin-top:20px;
    display:block;
}
div.taxo-upload a div.header, div.taxo-upload a:hover div.header{
    color:#fff;
}
div.video-type.model-type .wp-video{
    margin:0 auto;
}
div.content-video{
    background-color:#eee;
}
@media only screen and (max-width: 800px) {
    div.content-home, .last-infos div.content-last-infos{
        box-shadow:0 2px 5px rgba(110, 53, 97, .4);
    }
    #post-search .model-type{
        width:100%;
        float:none;
        margin-right:0;
    }
    .items .span6, #team-social .span6{
        width:100% !important;
        float: none;
        display:block;
    }
    .form-treks .team-name input{
        width:90%;
    }
}
@media only screen and (max-width: 950px){
    .profil-contacts.span3{
        width:auto;
        float:none;
    }
}

@media only screen and (max-width: 990px) {
    div.span5{
        width:35%;
    }
}
@media only screen and (max-width: 900px) {
    #identity .contacts .contact{
        display:none;
    }
    #identity .contacts .contact.active{
        display:block;
        width:100%;
    }
    #identity{
        padding-bottom:20px;
    }
    .is-logged #primary{
        margin-top:130px;
    }
    .last-infos .span4{
        width:49.6666%;
    }
    .span4.favoris-list{
        width:100%;
    }
    #uploads-files-list .span3{
        width:50%;
    }
    article.single h2 a.favoris span.text{
        display:none;
    }
    div#img-logo, div#img-photos{
        width:48%;
    }
    #identity div.compte-a-rebours{
        font-size: 18px;
        left:10px;
        top:18px;
    }
    #identity .contacts .contact .user-identity{
        border-radius:8px 0 8px 0;
    }
}
@media only screen and (max-width: 750px) {
    .last-infos .span4, .last-infos .span8{
        float:none;
        width:auto;
    }
    .list-photos div#img-logo, .list-photos div#img-photos{
        width:auto;
    }
    div.span5{
        width:auto;
    }
}
@media only screen and (max-width: 550px) {
    #identity .contacts .contact.active .photo-contact-display{
        display:none;
    }
    div.logo-home{
        display:none;
    }
    #ep4L article{
        margin: 0 !important;
        border-radius:0;
    }
    #identity span.project{
        text-align: center;
    }
    .last-infos .span4{
        width:auto;
    }
    .span4.favoris-list{
        width:100%;
    }
    .list-photos div#img-logo, .list-photos div#img-photos{
        width:auto;
    }
    .taxo-upload.span3{
        width:auto !important;
        display:block;
        float:none;
        margin:10px 0;
    }
    .select-video-type li a{
        display:block;
        width:auto;
    }
}

@media only screen and (max-width: 633px) {
    #ep4L article{
        margin: 20px 10px;
    }
    #tabs .ui-tabs-nav li.ui-tabs-tab{
        width:100%;
        display:block;
        clear:both;
    }
    #tabs .ui-tabs-nav li.ui-tabs-tab a{
        display:block;
        float:none;
        clear:both;
        text-align:center;
    }
    #search .content-search .button-search{
        right:8px;
    }
    #uploads-files-list .span3{
        width:100%;
    }
    .profil-page .filters ul li{
        display:block;
    }
    .profil-page .filters ul li a{
        display: block;
    }
}

@media only screen and (max-width: 700px) {
    #upload-type-files, #upload-files-by-function{
        float:none;
        clear:both;
        width:100%;
    }
}
@media only screen and (max-width: 1040px){
    .items .span6{
        width:45%;
    }
    .taxo-upload.span3{
        width:33%;
    }
}








/* Reset et styles de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* Styles du menu principal */
#main-menu {
    background-color: #fff;
    position: relative;
    color:#dd3333;
}

.menu-main-menu-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Menu principal - version desktop */
#menu-main-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

#menu-main-menu > .menu-item {
    position: relative;
}

#menu-main-menu > .menu-item > a {
    display: block;
    padding: 15px 20px;
    color: #dd3333;
    text-decoration: none;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

#menu-main-menu > .menu-item > a:hover,
#menu-main-menu > .menu-item.current-menu-item > a {
    background-color: #dd3333;
    color:#fff;
}

/* Sous-menus */
.sub-menu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #444;
    min-width: 250px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.menu-item-has-children:hover .sub-menu,
.menu-item-has-children.submenu-open .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu .menu-item a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #555;
    transition: background-color 0.3s ease;
}

.sub-menu .menu-item:last-child a {
    border-bottom: none;
}

.sub-menu .menu-item a:hover {
    background-color: #555;
    padding-left: 25px;
}

/* Indicateur de sous-menu */
.menu-item-has-children > a::after {
    content: ' ▼';
    font-size: 12px;
    margin-left: 5px;
}

/* Bouton toggle pour sous-menus en mobile */
.submenu-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    padding: 5px;
    transition: transform 0.3s ease;
}

.menu-item-has-children.submenu-open .submenu-toggle {
    transform: translateY(-50%) rotate(180deg);
}

/* Bouton menu mobile */
.btn-menu {
    display: none;
    background-color: #333;
    color: #fff;
    padding: 15px 20px;
    cursor: pointer;
    border: none;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.btn-menu:hover {
    background-color: #555;
}

.btn-menu .icon-menu::before {
    content: '☰';
}

/* Styles responsifs */
@media screen and (max-width: 768px) {
    /* Affichage du bouton hamburger */
    .btn-menu {
        display: block;
        text-align: center;
    }

    /* Menu principal en mode mobile */
    #menu-main-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #333;
        z-index: 999;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    #menu-main-menu.menu-open {
        display: flex;
    }

    #menu-main-menu > .menu-item {
        width: 100%;
        border-bottom: 1px solid #555;
    }

    #menu-main-menu > .menu-item:last-child {
        border-bottom: none;
    }

    #menu-main-menu > .menu-item > a {
        padding: 15px 20px;
        border: none;
    }

    /* Sous-menus en mobile */
    .sub-menu {
        position: static;
        opacity: 0;
        visibility: hidden;
        transform: none;
        background-color: #222;
        box-shadow: none;
        min-width: auto;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .menu-item-has-children.submenu-open .sub-menu {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
    }

    .sub-menu .menu-item a {
        padding-left: 40px;
        background-color: #222;
    }

    .sub-menu .menu-item a:hover {
        background-color: #444;
        padding-left: 45px;
    }

    /* Indicateur de sous-menu en mobile */
    .menu-item-has-children > a::after {
        content: ' +';
        float: right;
        transition: transform 0.3s ease;
    }

    .menu-item-has-children.submenu-open > a::after {
        content: ' −';
    }
}

/* Styles pour écrans très petits */
@media screen and (max-width: 480px) {
    #menu-main-menu > .menu-item > a {
        padding: 12px 15px;
        font-size: 14px;
    }

    .sub-menu .menu-item a {
        padding: 10px 30px;
        font-size: 13px;
    }
}

/* Animation d'ouverture du menu */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#menu-main-menu.menu-open {
    animation: slideDown 0.3s ease-out;
}