/********* HEADER *********/
header{
    position:absolute;
    top:40px; 
    left:0;
    right:0;
}
.alert-banner{
    background-color:var(--purple-primary);
    color:#fff;
    font-weight:bold;
    text-align:center;
    height:40px;
    border-radius:0;
    line-height:40px;
    padding:0px;
    margin:0;
    border:none;
}

/********* NAVBAR *********/
.navbar-nav .nav-link{
    color:var(--white);
    font-size:18px;
    font-weight:500;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color:#c090fd;
}
.collapse.navbar-collapse{
    margin-top:-60px;
}
.navbar-brand img{
    position:relative;
    top:20px;
}

.navbar-toggler{
    border:none;
}

.navbar .btn{
    padding:12px 32px;
}

.navbar .d-flex{
    margin-top:-60px;
}

.navbar .btn{
    position:relative;
}
.navbar .item-count{
    background-color:var(--purple-primary);
    border-radius:50%;
    color:#fff;
    width:20px;
    height:20px;
    text-align:center;
    line-height:20px;
    font-size:13px;
    position:absolute;
    top:3px;
    right:18px;
}

.dropdown-menu{
    background-color:var(--purple-primary);
    border:none;
    border-radius:var(--radius);
    color:var(--white);
}
.dropdown-menu .dropdown-item{
    color:var(--white);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:active{
    background-color:var(--purple-secondary);
    color:var(--white);
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
    .navbar .btn{
        padding:12px 12px;
        line-height:1;
    }
}@media only screen and (max-width:992px){
    .navbar .btn{
        padding:0px 12px;
        background:transparent;
        border:none;
        line-height:1;
    }
    .navbar-brand{
        width:120px;
    }
    .collapse.navbar-collapse{
        margin-top:0px;
    }
    .navbar .d-flex{
        margin-top:0px;
    }
    .navbar-toggler{
        padding:0px;
        padding-left:12px;
    }
    .navbar-collapse{
        position:absolute;
        top:125px;
        left:0;
        right:0;
        width:90%;
        margin-top:auto;
        margin-right:auto;
        margin:auto;
        background-color:var(--purple-primary);
        border-radius:var(--radius);
    }
    .navbar-nav{
        padding:15px;
    }
    .navbar .btn{
        padding:0px 12px;
        background:transparent;
        border:none;
        line-height:1;
    }
    .navbar .btn span{
        display:none;
    }
    .navbar svg {
        width: 32px;
        height: 32px;
    }
    .navbar .item-count{
        top:-5px;
        right:5px;
    }
}
@media only screen and (max-width:768px){
   
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:480px){
    .navbar .btn{
        padding:0px 6px;
        background:transparent;
        border:none;
        line-height:1;
    }
}
@media only screen and (max-width:330px){
    .navbar-brand{
        width:100px;
    }
}

/********* Headers *******/
#defaultHero{
    height:260px;
    background-color:var(--purple-primary);
}
#defaultHero.page-header{
    padding-top:240px;
}
#defaultHeroTitle{
    height:400px;
    background-color:var(--purple-primary);
    text-align:center;
}
#defaultHeroTitle.page-header{
    padding-top:250px;
}
.page-header {
    width: 100%;
    height: 100vh;
    position: relative;
    padding-top: 275px;
    color: var(--white);
    z-index: 1; /* Remet au-dessus */
}
.page-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(37, 8, 49, 1) 0%, rgba(37, 8, 49, 0.8) 20%, rgba(115, 115, 115, 0.2) 100%);
    z-index: -1; /* Assure que le background est en dessous */
}
.page-header .container {
    position: relative;
    z-index: 2;
}
.page-header h1{
    text-shadow: 2px 2px 2px rgba(37,8,49,0.48);
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
    #defaultHeroTitle{
        height:300px;
    }
    #defaultHeroTitle.page-header {
        padding-top: 175px;
    }
}
@media only screen and (max-width:768px){
    #defaultHeroTitle.page-header {
        padding-top: 190px;
    }
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:320px){
}
@media only screen and (max-width:480px){
}

.general-page{
    padding:75px 0px;
    background-image:
        url('/public/assets/medias/frontend/webp/bg-right-1.webp'),
        url('/public/assets/medias/frontend/webp/bg-left-1.webp');
    background-size:15%, 25%;
    background-position:
        right top 15%,
        left bottom 25%;
    background-repeat:no-repeat,no-repeat;
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
    .general-page{
        background-size:25%, 45%;
    }
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:320px){
}
@media only screen and (max-width:480px){
}

/********* UL **************/
main ul:not(.nav):not(.list-group):not(.sentiers) {
    list-style: none;
    padding-left: 15px;
}
main ul:not(.nav):not(.list-group):not(.sentiers) li {
    position: relative;
    padding-left: 24px; 
    margin-bottom:6px;
}
main ul:not(.nav):not(.list-group):not(.sentiers) li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='12' viewBox='0 0 18 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.278 0.217309C12.9838 -0.0742744 12.5089 -0.0721557 12.2173 0.222041C11.9257 0.516238 11.9278 0.991107 12.222 1.28269L13.985 3.03C14.7005 3.73914 15.1913 4.22718 15.5234 4.64071C15.6313 4.77509 15.7155 4.8934 15.7809 5L0.75 5C0.335786 5 0 5.33579 0 5.75C0 6.16422 0.335786 6.5 0.75 6.5L15.7809 6.5C15.7155 6.6066 15.6313 6.72491 15.5234 6.85929C15.1913 7.27282 14.7005 7.76086 13.985 8.47L12.222 10.2173C11.9278 10.5089 11.9257 10.9838 12.2173 11.278C12.5089 11.5722 12.9838 11.5743 13.278 11.2827L15.0727 9.5039C15.7487 8.83395 16.3011 8.28641 16.6929 7.79854C17.1004 7.29121 17.3953 6.77628 17.4741 6.15816C17.4914 6.02265 17.5 5.88632 17.5 5.75C17.5 5.61368 17.4914 5.47735 17.4741 5.34184C17.3953 4.72372 17.1004 4.20878 16.6929 3.70146C16.3011 3.21358 15.7487 2.66604 15.0727 1.99609L13.278 0.217309Z' fill='%235F2C70'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
main ul.nav li button.active{
    color:var(--purple-secondary)!important;
}

/******* FOOTER *******/
footer{
    background-color:var(--purple-primary);
    padding:55px 0px;
    color:var(--white);
}
footer p{
    font-size:14px;
}
footer a{
    color:var(--white);
    text-decoration:none;
}
footer img{
    margin-bottom:25px;
}
footer .title{
    font-size:24px;
    font-weight:600;
    text-transform:uppercase;
    margin-bottom:25px;
    margin-top:15px;
}
footer ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
footer ul li{
    padding:3px 0px;
}
footer ul li a{
    color:var(--white);
    text-transform:uppercase;
    text-decoration:none;
    font-size:14px;
}
footer ul.social-links li{
    float:left;
    margin-right:12px;
}
footer .spacer{
    width:100%;
    max-width:800px;
    background-color:var(--white);
    height:1px;
    margin:auto;
    margin-top:25px;
    margin-bottom:25px;
}
footer .copyright{
    font-size:12px;
    text-align:center;
}

@media only screen and (max-width:576px){
}
@media only screen and (max-width:480px){
}
@media only screen and (max-width:320px){
}
@media only screen and (max-width:768px){
    footer .title{
        margin-bottom:15px;
    }
    footer ul li{
        padding:1px 0px;
    }
}
@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}

/******* NEWSLETTER MODAL ********/
#newsletterModal .modal-content{
    background-color:var(--purple-primary);
    border-radius:var(--radius);
}
#newsletterModal .modal-header{
    position:relative;
    text-align:center;
    border:none;
}
#newsletterModal .modal-title{
    color:var(--white);
}
#newsletterModal .modal-header .btn-close{
    position:absolute;
    top:-20px;
    right:-20px;
    filter:invert(1) grayscale(100%) brightness(200%);
}
#newsletterModal .modal-footer{
    border:none;
}
#newsletterModal .modal-close{
    position:absolute;
    bottom:-30px;
    left:0;
    right:0;
    width:100%;
    text-align:center;
}
#newsletterModal .modal-close a{
    color:#fff;
}
#newsletterModal .form-check-input:checked{
    border-color:var(--purple-secondary);
    background-color:var(--purple-secondary);
}
#newsletterModal .btn-primary{
    border:1px solid var(--white);
}
#newsletterModal .btn-primary:hover{
    border:1px solid var(--white);
    background-color:var(--white);
    color:var(--purple-primary);
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:1024px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:576px){
    #newsletterModal .modal-header .btn-close{
        right:0;
    }
}
@media only screen and (max-width:480px){
}
@media only screen and (max-width:455px){
    #newsletterModal .modal-title{
        font-size:18px;
    }
    #newsletterModal label{
        font-size:12px;
    }
    #newsletterModal .form-floating>.form-control{
        height: 45px;
        min-height: 45px;
        line-height: 0.5;
    }
    #newsletterModal .form-floating>label{
        padding: 0.75rem .75rem;
    }
}
@media only screen and (max-width:380px){
    #newsletterModal .modal-title{
        font-size:16px;
        line-height:21px;
    }
    #newsletterModal .btn{
        padding-left:0px;
        padding-right:0px;
    }
    #newsletterModal .modal-close{
        position:absolute;
        bottom:-40px;
        left:0;
        right:0;
        width:100%;
        text-align:center;
        color:#000;
    }
}

.newsletter-banner{
    background-image:url('/public/assets/medias/frontend/webp/foret.webp');
    background-size:cover;
    background-position:top center;
    padding:50px 0px;
}
.newsletter-banner .title{
    font-weight:bold;
    font-size:26px;
    color:var(--white);
    margin-bottom:25px;
}
.newsletter-banner .btn{
    height:58px;
    margin-top:5px;
    padding-left:0px;
    padding-right:0px;
}
.newsletter-banner .alert{
    margin-top:1em;
}
@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:1056px){
}
@media only screen and (max-width:992px){
    .newsletter-banner .title{
        font-size:18px;
    }
    .newsletter-banner .btn{
        margin-top:0px;
    }
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:480px){
}
@media only screen and (max-width:455px){
}
@media only screen and (max-width:380px){
}

.newsletter-phone{
    display:none;
}

/******* COOKIES BANNER ********/
.cookie-banner {
    display:none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255,255,255,0.75);
    color: var(--purple-secondary);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    justify-content: center;
    padding: 15px;
}
.cookie-banner a{
    color: var(--purple-secondary);
    text-decoration:underline;
}
.cookie-content {
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
  
.cookie-content p {
    margin: 0;
    padding-right: 20px;
}
  
.cookie-button {
    background-color: var(--purple-primary);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}
  
.cookie-button:hover {
    background-color: var(--purple-primary);
}
  
@media (max-width: 768px) {
    .cookie-content {
      flex-direction: column;
      text-align: center;
    }
    
    .cookie-content p {
      margin-bottom: 10px;
      padding-right: 0;
    }
}

/******* CTA SECTION *******/
.cta-section {
    background: linear-gradient(135deg, #3e1d5c 0%, #6e3d8c 100%);
    color: white;
    padding: 60px 20px;
    border-radius: 8px;
    margin-bottom: 50px;
}
.cta-section.compact {
    background: linear-gradient(135deg, #3e1d5c 0%, #6e3d8c 100%);
    color: white;
    padding: 25px 20px;
    border-radius: 8px;
    margin-bottom: 0px;
}
.cta-section h2 {
    color: white;
}
.btn-purple {
    background-color: #9c59d1;
    color: white;
    border-radius: 30px;
    padding: 10px 25px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    display: inline-block;
    text-decoration: none;
}
.btn-purple:hover {
    background-color: #8445b9;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(156, 89, 209, 0.3);
}