:root {
    --primary: #d22044;
    --secondary: #0B2154;
    --light: #F2F2F2;
    --dark: #111111;
    --primary-rgb: 210, 32, 68;
    --secondary-rgb: 11, 33, 84;
    --gold: #E2B06E;
    --gold-rgb: 226, 176, 110;
    --gold-dark: #c99450;
    --gold-darker: #b8941f;
    --bordeaux: #8C1816;
    --bordeaux-rgb: 140, 24, 22;
    --bs-primary: var(--bordeaux);
    --bs-primary-rgb: var(--bordeaux-rgb);
}

.fw-medium {
    font-weight: 600 !important;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease-out, visibility 0s linear .35s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.btn {
    font-weight: 500;
    text-transform: uppercase;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #ffffff;
    border-radius: 15px;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 2px;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar-light .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
    outline: none;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link {
        margin-right: 0;
        padding: 10px 0;
    }
    .navbar-light .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

.navbar-light .navbar-brand,
.navbar-light a.btn {
    height: 65px;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--dark);
    font-weight: 500;
}

.navbar-light.sticky-top {
    top: -100px;
    transition: .5s;
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }
    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-header-inner {
    background: rgba(0, 0, 0, .7);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}

.fact {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../img/background-1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.service .nav .nav-link {
    background: var(--light);
    transition: .5s;
}

.service .nav .nav-link.active {
    background: var(--primary);
}

.service .nav .nav-link.active h4 {
    color: #FFFFFF !important;
}

.team-item .team-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    transform: scale(0);
    transition: .5s;
}

.team-item:hover .team-overlay {
    transform: scale(1);
}

.team-item .team-overlay .btn {
    color: var(--primary);
    background: #FFFFFF;
}

.team-item .team-overlay .btn:hover {
    color: #FFFFFF;
    background: var(--secondary);
}

.testimonial-carousel .owl-item .testimonial-text,
.testimonial-carousel .owl-item.center .testimonial-text * {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: #FFFFFF !important;
}

.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 1px solid #CCCCCC;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}

.timeline_area {
    position: relative;
    left: 25%;
    z-index: 1;
}

.single-timeline-area {
    position: relative;
    z-index: 1;
    padding-left: 180px;
}

@media only screen and (max-width: 575px) {
    .single-timeline-area {
        padding-left: 100px;
    }
}

.single-timeline-area .timeline-date {
    position: absolute;
    width: 180px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-right: 60px;
}

@media only screen and (max-width: 575px) {
    .single-timeline-area .timeline-date {
        width: 100px;
    }
}

.single-timeline-area .timeline-date::after {
    position: absolute;
    width: 3px;
    height: 100%;
    content: "";
    background-color: #ebebeb;
    top: 0;
    right: 30px;
    z-index: 1;
}

.single-timeline-area .timeline-date::before {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #d22044;
    content: "";
    top: 50%;
    right: 26px;
    z-index: 5;
    margin-top: -5.5px;
}

.single-timeline-area .timeline-date p {
    margin-bottom: 0;
    color: #020710;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
}

.single-timeline-area .single-timeline-content {
    position: relative;
    z-index: 1;
    padding: 30px 30px 25px;
    border-radius: 6px;
    margin-bottom: 15px;
    margin-top: 15px;
    -webkit-box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
    box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
    border: 1px solid #ebebeb;
}

@media only screen and (max-width: 575px) {
    .single-timeline-area .single-timeline-content {
        padding: 20px;
    }
}

.single-timeline-area .single-timeline-content .timeline-icon {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    width: 30px;
    height: 30px;
    background-color: #d22044;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 30px;
    flex: 0 0 30px;
    text-align: center;
    max-width: 30px;
    border-radius: 50%;
    margin-right: 15px;
}

.single-timeline-area .single-timeline-content .timeline-icon i {
    color: #ffffff;
    line-height: 30px;
}

.single-timeline-area .single-timeline-content .timeline-text h6 {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
}

.single-timeline-area .single-timeline-content .timeline-text p {
    font-size: 13px;
    margin-bottom: 0;
}

.single-timeline-area .single-timeline-content:hover .timeline-icon,
.single-timeline-area .single-timeline-content:focus .timeline-icon {
    background-color: #d22044;
}

.single-timeline-area .single-timeline-content:hover .timeline-text h6,
.single-timeline-area .single-timeline-content:focus .timeline-text h6 {
    color: #d22044;
}

.inline-childs>* {
    display: inline-block;
}

.contact-form {
    background: #fff;
    margin-top: 10%;
    margin-bottom: 5%;
    width: 70%;
}

.contact-form .form-control {
    border-radius: 1rem;
}

.contact-image {
    text-align: center;
}

.contact-image img {
    border-radius: 6rem;
    width: 11%;
    margin-top: -3%;
    transform: rotate(29deg);
}

.contact-form form {
    padding: 14%;
}

.contact-form form .row {
    margin-bottom: -7%;
}

.contact-form h3 {
    margin-bottom: 8%;
    margin-top: -10%;
    text-align: center;
    color: #0062cc;
}

.contact-form .btnContact {
    width: 50%;
    border: none;
    border-radius: 1rem;
    padding: 1.5%;
    background: #dc3545;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.btnContactSubmit {
    width: 50%;
    border-radius: 1rem;
    padding: 1.5%;
    color: #fff;
    background-color: #0062cc;
    border: none;
    cursor: pointer;
}

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: top;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

.carousel-background {
    background-size: cover;
    background-position: center;
    min-height: 45vh;
    position: relative;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.event-card {
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.event-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hover-card {
    transition: all 0.3s ease;
}

.hover-card:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    transform: translateY(-5px);
}

.badge-discret {
    background: linear-gradient(135deg, #1cba1c, #28e028);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hover-shadow:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    transform: translateY(-5px);
}

.hover-shadow:hover img {
    transform: scale(1.05);
}

@media (max-width: 991.98px) {
    .navbar-brand {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        flex: 1;
    }
    .navbar-brand img {
        width: 100px !important;
        max-width: 100px !important;
    }
    .navbar-toggler {
        margin-right: 1rem !important;
    }
    .navbar-nav .btn-primary {
        width: 100%;
        margin: 10px 0 !important;
        height: auto !important;
    }
    .navbar-nav .nav-link {
        padding: 10px 0;
    }
}

@media (min-width: 992px) {
    .navbar-nav .btn-primary {
        margin-left: 15px !important;
    }
}

.link-hover-danger:hover {
    color: #dc3545 !important;
}

.form-control {
    height: 38px;
}

.form-control:focus {
    box-shadow: none;
}

.d-flex {
    gap: 0;
}

.rounded-start {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: none;
}

.rounded-end {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.spectacle-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spectacle-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

.prestation-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.prestation-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

.prestation-image img {
    object-fit: cover;
    transition: transform 0.4s ease;
}

.prestation-card:hover .prestation-image img {
    transform: scale(1.03);
}


.spectacle-image img {
    transition: transform 0.4s ease;
}

.spectacle-card:hover .spectacle-image img {
    transform: scale(1.03);
}

.contact-form-wrapper {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    padding: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-form-wrapper .form-label {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.contact-form-wrapper .form-control,
.contact-form-wrapper .form-select {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.contact-form-wrapper .form-control:focus,
.contact-form-wrapper .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

.contact-form-wrapper .form-control::placeholder {
    color: #adb5bd;
}

.btn-submit-contact {
    border-radius: 25px;
    padding: 0.75rem 2.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-submit-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--bs-primary-rgb), 0.3);
}

.alert-fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

#imageTrack::-webkit-scrollbar {
    display: none;
}

.gallery-img {
    max-height: 400px;
    width: auto;
    object-fit: contain;
    transition: transform 0.2s;
}

.gallery-img:hover {
    transform: scale(1.02);
}

#imageTrack {
    min-height: 400px;
}

.flex-shrink-0 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.galerie-photo-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

.galerie-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.galerie-photo-item {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.35s ease;
    cursor: pointer;
}

.galerie-photo-item:hover {
    transform: translateY(-6px);
}

.galerie-photo-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.galerie-photo-overlay {
    padding: 15px;
    color: var(--dark);
    transition: opacity 0.35s ease;
}

.galerie-photo-info h6 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.galerie-photo-info p {
    font-size: 13px;
    margin: 0;
    opacity: 0.9;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.galerie-photo-btn-container {
    margin-top: 12px;
    text-align: right;
}

.galerie-photo-btn {
    background: var(--primary);
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
}

.galerie-photo-btn:hover {
    background: #b81a3a;
    transform: translateY(-1px);
}

.galerie-photo-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.97);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.galerie-photo-lightbox.active {
    display: flex;
    opacity: 1;
    visibility: visible;
    align-items: center;
    justify-content: center;
}

.galerie-photo-lightbox-content {
    display: flex;
    width: 95vw;
    max-width: 1300px;
    height: 90vh;
    max-height: 850px;
    position: relative;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    margin: auto;
}

.galerie-photo-lightbox-image-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    max-width: 70%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px 0 0 12px;
}

.galerie-photo-lightbox-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    animation: zoomInLightbox 0.4s ease-out;
}

.galerie-photo-lightbox-sidebar {
    flex: 0 0 380px;
    height: 100%;
    padding: 30px;
    background: linear-gradient(135deg, rgba(var(--secondary-rgb), 0.95) 0%, rgba(var(--secondary-rgb), 0.9) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    border-radius: 0 12px 12px 0;
    overflow-y: auto;
}

.galerie-photo-lightbox-sidebar h5 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 18px 0;
    color: white;
    line-height: 1.2;
}

.galerie-photo-lightbox-sidebar p {
    font-size: 15px;
    margin: 0 0 25px 0;
    opacity: 0.95;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.galerie-photo-lightbox-btn {
    background: var(--primary);
    color: white;
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.galerie-photo-lightbox-btn:hover {
    background: #b81a3a;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.galerie-photo-lightbox-btn i {
    margin-right: 8px;
    font-size: 16px;
}

.galerie-photo-lightbox-btn.disabled {
    background: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.9;
    box-shadow: none !important;
    transform: none !important;
}

.galerie-photo-lightbox-close {
    position: fixed;
    top: 25px;
    right: 35px;
    font-size: 32px;
    color: white;
    cursor: pointer;
    z-index: 10002;
    background: rgba(0, 0, 0, 0.6);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.galerie-photo-lightbox-close:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: scale(1.05);
}

.galerie-photo-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36px;
    color: white;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.galerie-photo-lightbox-nav:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.galerie-photo-lightbox-prev {
    left: 35px;
}

.galerie-photo-lightbox-next {
    right: 35px;
}

.galerie-photo-lightbox-counter {
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
    z-index: 10001;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

#spectacleFilterModal .modal-content {
    border-radius: 12px;
    overflow: hidden;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#spectacleFilterModal .modal-header {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1) 0%, rgba(var(--secondary-rgb), 0.1) 100%);
    border-bottom: none;
    padding: 20px 25px 15px;
}

#spectacleFilterModal .modal-title {
    color: var(--secondary);
    font-weight: 600;
}

#spectacleFilterModal .modal-body {
    padding: 20px 25px;
    max-height: 60vh;
    overflow-y: auto;
}

#spectacleFilterModal .modal-footer {
    background: rgba(var(--primary-rgb), 0.05);
    border-top: none;
    padding: 15px 25px;
}

#spectacleFilterModal .form-check {
    margin-bottom: 12px;
}

#spectacleFilterModal .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

#spectacleFilterModal .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    border-radius: 30px;
    padding: 8px 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.galerie-filter-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
}

.dropdown-toggle {
    background-color: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    min-width: auto !important;
    padding: 0 !important;
}

.dropdown-toggle:hover {
    background-color: #b81a3a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.dropdown-toggle i {
    font-size: 18px;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

.dropdown-menu {
    background-color: white;
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
    min-width: 220px;
    border-radius: 8px !important;
    overflow: hidden;
    margin-top: 8px !important;
}

.dropdown-header {
    color: var(--secondary) !important;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 15px !important;
    background-color: rgba(var(--primary-rgb), 0.05) !important;
}

.dropdown-item {
    color: var(--dark) !important;
    padding: 8px 15px !important;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary) !important;
}

.dropdown-item i {
    color: var(--primary) !important;
    margin-right: 8px !important;
    width: 16px;
    text-align: center;
}

@keyframes zoomInLightbox {
    from {
        transform: scale(0.95);
        opacity: 0.9;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 1200px) {
    .galerie-photo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    .galerie-photo-lightbox-content {
        flex-direction: column;
        height: auto;
        max-height: 95vh;
    }
    .galerie-photo-lightbox-image-container {
        max-width: 100%;
        margin-bottom: 20px;
        border-radius: 12px 12px 0 0;
    }
    .galerie-photo-lightbox-sidebar {
        width: 100%;
        max-height: 400px;
        border-radius: 0 0 12px 12px;
    }
    .galerie-photo-lightbox-sidebar p {
        -webkit-line-clamp: 8;
    }
    .galerie-photo-lightbox-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .galerie-photo-lightbox-prev {
        left: 15px;
    }
    .galerie-photo-lightbox-next {
        right: 15px;
    }
}

@media (max-width: 992px) {
    .galerie-photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .galerie-photo-lightbox-sidebar {
        padding: 25px;
    }
}

@media (max-width: 768px) {
    .galerie-photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .galerie-photo-item {
        flex-direction: column;
        height: auto;
        border: 1px solid #eee;
        border-radius: 8px;
    }
    .galerie-photo-item img {
        height: 200px;
        border-radius: 8px 8px 0 0;
    }
    .galerie-photo-overlay {
        padding: 12px;
        text-align: left;
    }
    .galerie-photo-info h6 {
        color: var(--dark);
        font-size: 15px;
        white-space: normal;
        margin-bottom: 5px;
    }
    .galerie-photo-info p {
        color: #666;
        font-size: 13px;
        white-space: normal;
    }
    .galerie-photo-btn-container {
        margin-top: 10px;
        text-align: right;
    }
    .galerie-photo-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    .dropdown-toggle {
        width: 40px !important;
        height: 40px !important;
    }
    .galerie-photo-lightbox-nav {
        width: 45px;
        height: 45px;
        font-size: 30px;
    }
    .galerie-photo-lightbox-close {
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 28px;
    }
    .galerie-photo-lightbox-counter {
        top: 15px;
        padding: 8px 16px;
        font-size: 14px;
    }
    .galerie-photo-lightbox-content {
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
        padding: 10px;
    }
    .galerie-photo-lightbox-image-container {
        max-width: 100% !important;
        padding: 10px !important;
    }
    .galerie-photo-lightbox-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 20px !important;
    }
    .galerie-photo-lightbox-image-container img {
        max-height: 60vh !important;
        width: auto !important;
        height: auto !important;
    }
    .galerie-photo-lightbox-counter {
        font-size: 13px !important;
        top: 15px !important;
    }
    .galerie-photo-lightbox-nav {
        width: 40px !important;
        height: 40px !important;
        font-size: 28px !important;
    }
}

.spectacle-card-encours {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.spectacle-card-encours:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}
.spectacle-image-encours img {
    transition: transform 0.4s ease;
}
.spectacle-card-encours:hover .spectacle-image-encours img {
    transform: scale(1.03);
}

/* Animation */
@keyframes tpgal-spin {
    to { transform: rotate(360deg); }
}

/* Lightbox */
#tpgal-lightbox-counter {
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 1rem;
    z-index: 10001;
    width: 120px;
    text-align: center;
}

#tpgal-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto;
}

#tpgal-lightbox-img {
    touch-action: none;
}

.tpgal-lightbox-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 60px auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.tpgal-lightbox-image-container {
    position: relative;
    width: 100%;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

#tpgal-lightbox-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.tpgal-lightbox-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #d22044;
    animation: tpgal-spin 1s ease-in-out infinite;
}

.tpgal-lightbox-info {
    width: 100%;
    background: rgba(30, 30, 30, 0.95);
    padding: 20px;
    color: white;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#tpgal-lightbox-legende {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
    width: 100%;
    text-align: left;
    margin: 0 0 15px 0;
    display: inline;
    white-space: pre-line;
}

#tpgal-voir-plus {
    color: #d22044;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: underline;
    display: inline;
    margin-left: 5px;
}

#tpgal-lightbox-link {
    display: inline-block;
    background: #d22044;
    color: white;
    padding: 8px 18px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    margin-left: auto;
    font-size: 0.9rem;
}

#tpgal-lightbox-link:hover {
    background: #b81a3a;
    transform: translateY(-2px);
}

.tpgal-lightbox-buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Galerie */
.tpgal-galerie-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(50, 50, 50, 0.7);
    padding: 15px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#tpgal-apply-filter.disabled {
    pointer-events: none;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

.tpgal-gallery-image {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tpgal-gallery-image.loaded {
    opacity: 1;
}

.tpgal-image-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid rgba(210, 32, 68, 0.3);
    border-radius: 50%;
    border-top-color: #d22044;
    animation: tpgal-spin 1s ease-in-out infinite;
}

/* Pagination */
.tpgal-pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.tpgal-pagination-btn {
    background: white;
    border: 2px solid #d22044;
    color: #d22044;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.tpgal-pagination-btn:hover:not(:disabled) {
    background: #d22044;
    color: white;
}

.tpgal-pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tpgal-pagination-btn.active {
    background: #d22044;
    color: white;
}

.tpgal-pagination-info {
    color: #0B2154;
    font-weight: 600;
    padding: 8px 16px;
}

/* Sélecteur d'affichage */
.tpgal-per-page-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tpgal-per-page-btn {
    background: white;
    border: 2px solid #d22044;
    color: #d22044;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.tpgal-per-page-btn:hover {
    background: rgba(210, 32, 68, 0.1);
}

.tpgal-per-page-btn.active {
    background: #d22044;
    color: white;
}

/* Options de tri */
.tpgal-sort-option-selected {
    background-color: rgba(210, 32, 68, 0.1);
    font-weight: bold;
}

/* Contenu légal (RGPD / CGV) édité depuis l'admin */
.info-block {
    background-color: #f8f9fa;
    border-left: 4px solid var(--gold);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.info-block p {
    margin-bottom: 0.4rem;
}

.info-block p:last-child {
    margin-bottom: 0;
}

.info-block .bi {
    color: var(--gold);
}

.section-title {
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #212529;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 0.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Layout commun (ex <style> inline de templates/skeleton.php)
   S'applique à toutes les pages du site.
   ========================================================================== */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    color: #212529;
}

/* Navbar (header) - noir */
.navbar {
    background-color: #000000 !important;
    border-bottom: 1px solid #333;
    min-height: 97px;
}

.navbar-nav .nav-link {
    color: #ffffff !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    font-weight: 700;
    -webkit-text-fill-color: #ffffff;
    text-shadow: none;
}

/* ---- Effet « rampe de scène » sur les liens du menu ----
   Une lueur chaude monte du bas du lien, comme si des footlights éclairaient
   le texte par en dessous. C'est le même vocabulaire que la rampe de la scène
   3D du Mur des Soutiens, donc le menu et l'expérience se répondent.

   Le halo est un pseudo-élément et non un box-shadow : il peut ainsi déborder
   sous le lien sans agrandir sa zone cliquable ni décaler ses voisins. */
.navbar-nav .nav-link {
    position: relative;
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: 118%;
    height: 26px;
    background: radial-gradient(
        ellipse at 50% 100%,
        rgba(var(--gold-rgb), 0.55) 0%,
        rgba(var(--gold-rgb), 0.22) 38%,
        rgba(var(--gold-rgb), 0) 72%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

/* Fine ligne de rampe, à la base du halo : elle donne l'origine physique de
   la lumière, sans quoi le halo semble flotter. */
.navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%) scaleX(0);
    width: 46%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        rgba(var(--gold-rgb), 0) 0%,
        var(--gold) 50%,
        rgba(var(--gold-rgb), 0) 100%
    );
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--gold) !important;
    -webkit-text-fill-color: var(--gold);
    text-shadow: 0 -1px 10px rgba(var(--gold-rgb), 0.45);
}

.navbar-nav .nav-link:hover::after {
    opacity: 0.85;
}

.navbar-nav .nav-link:hover::before {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

/* Page active : la rampe reste allumée, un peu plus soutenue que le survol. */
.navbar-nav .nav-link.active {
    color: var(--gold) !important;
    -webkit-text-fill-color: var(--gold);
    text-shadow: 0 -1px 12px rgba(var(--gold-rgb), 0.55);
}

.navbar-nav .nav-link.active::after {
    opacity: 1;
}

.navbar-nav .nav-link.active::before {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
}

/* Sur mobile les liens sont empilés : la rampe se resserre pour ne pas
   déborder sur le lien du dessous. */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link::after {
        bottom: 2px;
        height: 18px;
    }
    .navbar-nav .nav-link::before {
        bottom: 2px;
    }
}

/* Respect du réglage système : pas d'animation pour qui la refuse. */
@media (prefers-reduced-motion: reduce) {
    .navbar-nav .nav-link,
    .navbar-nav .nav-link::after,
    .navbar-nav .nav-link::before {
        transition: none;
    }
}

.navbar .btn-primary {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #000000;
    font-weight: 700;
}

.navbar .btn-primary:hover,
.navbar .btn-primary:focus {
    background-color: var(--gold-darker);
    border-color: var(--gold-darker);
    color: #000000;
}

/* Bouton du menu mobile visible sur le fond noir */
.navbar-toggler {
    border: 2px solid var(--gold) !important;
    padding: 8px 10px;
    box-shadow: none !important;
    border-radius: 8px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
    border-color: var(--gold-darker) !important;
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.25) !important;
}

/* Icône en 3 vraies barres (spans dans le HTML) plutôt que des bordures +
   pseudo-éléments : garde une taille de bouton fiable sur mobile et permet
   un morphing hamburger -> croix propre à l'ouverture du menu. */
.navbar-toggler-icon {
    background-image: none !important;
    position: relative;
    display: block;
    width: 26px;
    height: 20px;
}

.navbar-toggler-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease, background-color 0.3s ease;
}

.navbar-toggler-bar-top {
    top: 0;
}

.navbar-toggler-bar-mid {
    top: 9px;
}

.navbar-toggler-bar-bottom {
    top: 18px;
}

.navbar-toggler:hover .navbar-toggler-bar,
.navbar-toggler:focus .navbar-toggler-bar {
    background-color: var(--gold);
}

/* Menu ouvert : les barres haut/bas se rejoignent au centre et forment une
   croix, la barre du milieu disparaît */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar-mid {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar-top {
    top: 9px;
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-bar-bottom {
    top: 9px;
    transform: rotate(-45deg);
}

/* Logo */
.navbar-brand {
    flex-shrink: 0;
}

.logo-wrap {
    position: relative;
    display: inline-flex;
}

.navbar-brand img {
    max-width: 262px;
    max-height: 82px;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    object-position: center;
    display: block;
    flex-shrink: 0;
    filter: none !important;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background:
        radial-gradient(circle at 10% 0%, rgba(var(--gold-rgb), 0.09), transparent 55%),
        linear-gradient(180deg, #1c1c1c 0%, #121212 100%);
    color: rgba(255, 255, 255, 0.88);
    padding: 4.5rem 0 2rem;
}

.footer-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    padding-bottom: 3rem;
}

.footer-brand {
    flex-shrink: 0;
}

.footer-brand-logo {
    max-width: 170px;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    display: block;
}

.footer-tagline {
    margin: 1rem 0 0;
    font-family: 'Barlow', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
}

.footer-newsletter {
    max-width: 420px;
    width: 100%;
}

.footer-newsletter-label {
    margin: 0 0 0.6rem;
    font-family: 'Barlow', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}

.footer-newsletter-text {
    margin: 0 0 1.25rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
}

.footer-newsletter-field {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: border-color 0.3s ease;
}

.footer-newsletter-field:focus-within {
    border-bottom-color: var(--gold);
}

.footer-newsletter-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    color: #f5f1ea;
    font-size: 0.95rem;
    padding: 0.65rem 0.25rem;
}

.footer-newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.footer-newsletter-input:focus {
    outline: none;
    box-shadow: none;
}

.footer-newsletter-submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    background: var(--gold);
    color: #171310;
    font-family: 'Barlow', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-newsletter-submit:hover,
.footer-newsletter-submit:focus-visible {
    background: var(--gold-dark);
}

.footer-newsletter-submit span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.footer-newsletter-submit:hover span {
    transform: translateX(3px);
}

.footer-newsletter-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.footer-newsletter-message {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    min-height: 1.2em;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem 0.9rem;
    padding-bottom: 2.5rem;
    text-align: center;
}

.footer-nav a {
    font-family: 'Barlow', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: var(--gold);
}

.footer-nav-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.78rem;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
}

.footer-copyright,
.footer-legal {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-copyright a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-copyright a:hover {
    color: var(--gold);
}

.footer-legal {
    text-align: right;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    transition: color 0.3s ease;
}
                                                                                                                 
.footer-legal a:hover {
    color: var(--gold);
}

@media (max-width: 991.98px) {
    .site-footer {
        padding: 3.5rem 0 2rem;
    }

    .footer-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2.5rem;
    }

    .footer-newsletter {
        max-width: 380px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .footer-legal {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .footer-newsletter-field {
        flex-wrap: wrap;
        border-bottom: 0;
    }

    .footer-newsletter-input {
        flex-basis: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        padding: 0.65rem 0;
    }

    .footer-newsletter-submit {
        flex-basis: 100%;
        justify-content: center;
        margin-top: 0.75rem;
        padding: 0.65rem 1.1rem;
    }
}

/* Léger zoom + halo doré au survol du logo */
.navbar-brand:hover img,
.navbar-brand:focus img {
    transform: scale(1.06);
    filter: drop-shadow(0 0 10px rgba(var(--gold-rgb), 0.65)) !important;
}

/* Étincelles sur la navbar */
.sparkle {
    position: absolute;
    z-index: 5;
    width: 4px;
    height: 4px;
    background: var(--gold);
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    filter: drop-shadow(0 0 1.5px rgba(var(--gold-rgb), 0.8));
    pointer-events: none;
    opacity: 0;
    animation: sparkle-twinkle 2.6s ease-in-out infinite;
}

@keyframes sparkle-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50% { opacity: 0.85; transform: scale(1) rotate(20deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sparkle { animation: none; opacity: 0.6; transform: scale(0.8); }
}

@media (max-width: 768px) {
    .navbar {
        min-height: 67px;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;
        background-color: #000000;
        border-top: 1px solid #333333;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.35);
    }

    .navbar-nav {
        width: 100%;
    }

    .navbar-nav .nav-link {
        width: 100%;
        padding: 12px 20px !important;
        border-bottom: 1px solid #222222;
    }

    .navbar .btn-primary {
        display: block;
        width: calc(100% - 40px);
        height: auto !important;
        margin: 15px 20px !important;
        padding: 12px;
        text-align: center;
    }

    .navbar-brand img {
        max-width: 192px;
        max-height: 57px;
    }
}

/* Spinner : fond clair (au lieu d'un flash noir plein écran) + rond doré,
   cohérent avec le reste du site depuis que --bs-primary est doré partout */
#spinner {
    background-color: #ffffff;
}

/* Footer - noir */
footer {
    background-color: #0a0a0a;
    margin-top: auto;
    flex-shrink: 0;
}

footer a,
footer p,
footer li {
    color: #b0b0b0;
}

footer a:hover {
    color: var(--gold);
}

footer .fas,
footer .far,
footer .fab,
footer .bi {
    color: var(--gold) !important;
}

footer .text-danger,
footer .link-hover-danger:hover {
    color: var(--gold) !important;
}

footer .form-control {
    background-color: #4a4a4a;
    color: #e0e0e0;
    border-color: #333;
}

footer .btn-danger {
    background-color: var(--gold);
    border-color: var(--gold);
    color: #000000;
}

footer .btn-danger:hover {
    background-color: var(--gold-darker);
    border-color: var(--gold-darker);
    color: #000000;
}

.recaptcha-note {
    font-size: 0.7rem;
    line-height: 1.4;
}
.recaptcha-note a {
    color: inherit;
    text-decoration: underline;
}
.recaptcha-note a:hover {
    color: var(--gold);
}

/* Le badge reCAPTCHA est masqué ; la mention légale requise
   est affichée à la place en pied de page (cf. .recaptcha-note). */
.grecaptcha-badge {
    visibility: hidden;
}

/* ==========================================================================
   Composants de listing partagés (cartes spectacles/prestations/news et
   leur bouton doré) — factorisé pour éviter de répéter les mêmes règles
   sur chaque page. Les hauteurs/props propres à une seule page restent
   dans la section de cette page.
   ========================================================================== */

/* Badge de statut "En cours" / "En préparation" (accueil + liste spectacles).
   display:inline-flex est nécessaire pour que overflow:hidden clippe bien le
   reflet du badge "En préparation" à sa propre boîte (un simple "inline" ne
   supporte pas overflow, le reflet débordait sur le texte à côté). */
.badge-discret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.badge-discret.badge-en-cours {
    background: var(--bordeaux);
    border: 1px solid var(--bordeaux);
    color: #fff;
}

/* "En préparation" scintille avec de petites paillettes (même langage visuel
   que les étincelles de la navbar) plutôt que le reflet des boutons, pour
   rester un signal distinct d'un élément cliquable. */
.badge-discret.badge-en-preparation {
    background: var(--bordeaux);
    border: 1px solid var(--bordeaux);
    color: #fff;
    font-weight: 500;
    position: relative;
    overflow: visible;
}

.badge-discret.badge-en-preparation::before,
.badge-discret.badge-en-preparation::after {
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    background: var(--gold);
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    filter: drop-shadow(0 0 4px rgba(var(--gold-rgb), 1));
    pointer-events: none;
    opacity: 0;
    animation: badge-sparkle-twinkle 1.8s ease-in-out infinite;
}

.badge-discret.badge-en-preparation::before {
    top: -5px;
    left: 10%;
    animation-delay: 0s;
}

.badge-discret.badge-en-preparation::after {
    bottom: -5px;
    right: 6%;
    animation-delay: 0.6s;
}

/* Contrairement à .sparkle (navbar) qui ne fait qu'un pic bref, cette
   variante reste visible sur un vrai palier pour qu'on la remarque. */
@keyframes badge-sparkle-twinkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    25% {
        opacity: 1;
        transform: scale(1.2) rotate(15deg);
    }
    55% {
        opacity: 1;
        transform: scale(1.2) rotate(15deg);
    }
    80% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
}

/* Image de carte : cover + centrée, partout où une carte affiche une photo */
body.page-spectacles .spectacle-image img,
body.page-accueil .spectacle-image-encours img,
body.page-prestations .prestation-image img,
.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body.page-prestations .prestation-image img,
.news-image img {
    transition: transform 0.4s ease;
}

/* Carte prestation / news : même habillage (arrondi, ombre au survol) */
body.page-prestations .card.prestation-card,
.card.news-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

body.page-prestations .card.prestation-card:hover,
.card.news-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

/* Carte spectacle (liste) / spectacle en cours (accueil) : même habillage,
   seule la hauteur diffère (cf. sections de page ci-dessous) */
body.page-spectacles .spectacle-card,
body.page-accueil .spectacle-card-encours {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Bouton doré "Informations / Lire la suite" : même couleur sur toutes les
   cartes de listing et sur la page contact */
body.page-spectacles .spectacle-card .btn-primary,
body.page-prestations .prestation-card .btn-primary,
.news-card .btn-primary,
.contact-page .btn-primary {
    color: #000000 !important;
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}

body.page-spectacles .spectacle-card .btn-primary:hover,
body.page-spectacles .spectacle-card .btn-primary:focus,
body.page-spectacles .spectacle-card .btn-primary:active,
body.page-prestations .prestation-card .btn-primary:hover,
body.page-prestations .prestation-card .btn-primary:focus,
.news-card .btn-primary:hover,
.news-card .btn-primary:focus,
.contact-page .btn-primary:hover,
.contact-page .btn-primary:focus,
.contact-page .btn-primary:active {
    color: #000000 !important;
    background-color: var(--gold-dark) !important;
    border-color: var(--gold-dark) !important;
}

/* Effet de survol repris du bouton "Nous contacter" de /jeux : un reflet
   qui balaie le bouton + une lueur dorée, appliqué à tous les boutons dorés
   du site (remplace l'ancien "box-shadow: none" ad hoc de spectacles/contact
   par un effet unique et cohérent partout). */
.navbar .btn-primary,
body.page-spectacles .spectacle-card .btn-primary,
body.page-prestations .prestation-card .btn-primary,
.news-card .btn-primary,
.contact-page .btn-primary,
.btn-indecents,
body.page-galerie #tpgal-apply-filter,
body.page-galerie .tpgal-pagination-btn.active,
body.page-galerie #tpgal-voir-plus,
body.page-galerie #tpgal-lightbox-link {
    position: relative;
    overflow: hidden;
}

.navbar .btn-primary::before,
body.page-spectacles .spectacle-card .btn-primary::before,
body.page-prestations .prestation-card .btn-primary::before,
.news-card .btn-primary::before,
.contact-page .btn-primary::before,
.btn-indecents::before,
body.page-galerie #tpgal-apply-filter::before,
body.page-galerie .tpgal-pagination-btn.active::before,
body.page-galerie #tpgal-voir-plus::before,
body.page-galerie #tpgal-lightbox-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
}

.navbar .btn-primary:hover,
.navbar .btn-primary:focus,
body.page-spectacles .spectacle-card .btn-primary:hover,
body.page-spectacles .spectacle-card .btn-primary:focus,
body.page-spectacles .spectacle-card .btn-primary:active,
body.page-prestations .prestation-card .btn-primary:hover,
body.page-prestations .prestation-card .btn-primary:focus,
.news-card .btn-primary:hover,
.news-card .btn-primary:focus,
.contact-page .btn-primary:hover,
.contact-page .btn-primary:focus,
.contact-page .btn-primary:active,
.btn-indecents:hover,
.btn-indecents:focus,
.btn-indecents:active,
body.page-galerie #tpgal-apply-filter:hover,
body.page-galerie #tpgal-apply-filter:focus,
body.page-galerie .tpgal-pagination-btn.active:hover,
body.page-galerie #tpgal-voir-plus:hover,
body.page-galerie #tpgal-lightbox-link:hover {
    box-shadow: 0 10px 30px rgba(var(--gold-rgb), 0.35) !important;
}

.navbar .btn-primary:hover::before,
.navbar .btn-primary:focus::before,
body.page-spectacles .spectacle-card .btn-primary:hover::before,
body.page-spectacles .spectacle-card .btn-primary:focus::before,
body.page-spectacles .spectacle-card .btn-primary:active::before,
body.page-prestations .prestation-card .btn-primary:hover::before,
body.page-prestations .prestation-card .btn-primary:focus::before,
.news-card .btn-primary:hover::before,
.news-card .btn-primary:focus::before,
.contact-page .btn-primary:hover::before,
.contact-page .btn-primary:focus::before,
.contact-page .btn-primary:active::before,
.btn-indecents:hover::before,
.btn-indecents:focus::before,
.btn-indecents:active::before,
body.page-galerie #tpgal-apply-filter:hover::before,
body.page-galerie #tpgal-apply-filter:focus::before,
body.page-galerie .tpgal-pagination-btn.active:hover::before,
body.page-galerie #tpgal-voir-plus:hover::before,
body.page-galerie #tpgal-lightbox-link:hover::before {
    left: 130%;
}

/* Sur mobile, les 3 listes de cartes réduisent la hauteur de leur image */
@media (max-width: 767px) {
    body.page-accueil .spectacle-card-encours {
        height: auto;
    }
    body.page-accueil .spectacle-image-encours {
        height: 200px;
    }

    body.page-spectacles .spectacle-card {
        height: auto !important;
    }
    body.page-spectacles .spectacle-image {
        height: 250px;
    }

    body.page-prestations .prestations-section {
        padding-bottom: 10px !important;
    }
    body.page-prestations .prestation-card {
        min-height: 0;
    }
    body.page-prestations .prestation-image {
        height: 250px;
    }

    .news-image {
        height: 250px;
    }
}

/* Descriptions de carte tronquées sur tablette/desktop moyen */
@media (min-width: 768px) and (max-width: 1200px) {
    body.page-accueil .spectacle-description,
    body.page-spectacles .spectacle-description,
    body.page-prestations .prestation-description,
    .news-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    body.page-accueil .spectacle-description,
    body.page-spectacles .spectacle-description,
    body.page-prestations .prestation-description,
    .news-excerpt {
        -webkit-line-clamp: 3;
    }
}

/* Lien "Retour aux spectacles / prestations / actualités" (fiches détail).
   Volontairement discret (pas doré, pas de fond) pour ne pas être confondu
   avec un vrai bouton d'action. */
.back-button-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #495057;
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 0;
}

.back-button-link i {
    transition: transform 0.25s ease;
}

.back-button-link:hover,
.back-button-link:focus {
    color: #212529;
    text-decoration: underline;
}

.back-button-link:hover i,
.back-button-link:focus i {
    transform: translateX(-4px);
}

/* ==========================================================================
   Page Accueil (ex <style> inline de templates/accueil.php)
   Namespacé sous body.page-accueil : --bs-primary est désormais doré pour
   tout le site (cf. :root), seules les classes propres à cette page
   (.badge-discret, etc.) restent namespacées ici.
   ========================================================================== */

body.page-accueil .text-primary {
    color: var(--gold) !important;
}

/* Hero du carrousel d'accueil : image légèrement floutée, voile un peu plus prononcé */
body.page-accueil #heroCarousel .carousel-overlay {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Style pour les cartes des spectacles en cours (arrondi/ombre : cf. section
   "Composants de listing partagés" ci-dessus) */
body.page-accueil .spectacle-card-encours {
    height: 230px;
}

/* Le badge de statut (.badge-discret) est un composant partagé, cf.
   "Composants de listing partagés" ci-dessus : même rendu sur l'accueil et
   sur la page Spectacles, plus de raison qu'il diffère d'une page à l'autre. */

/* Limiter la hauteur des images des spectacles en cours (l'objet image lui
   -même : cf. section "Composants de listing partagés"). Le comportement
   responsive (mobile + troncature de texte) est aussi mutualisé plus haut. */
body.page-accueil .spectacle-image-encours {
    height: 230px;
    overflow: hidden;
}

/* Retirer le contour gris (ombre) des cartes de l'agenda */
body.page-accueil .event-card {
    box-shadow: none !important;
}

/* Style pour l'image "Qui sommes-nous ?" */
body.page-accueil .about-image {
    border-radius: 10px !important;
}

body.page-accueil .h-100.d-flex.align-items-center {
    overflow: hidden;
    border-radius: 10px;
}

.btn-indecents {
    color: #000;
    background-color: var(--gold);
    border-color: var(--gold);
}

.btn-indecents:hover,
.btn-indecents:focus,
.btn-indecents:active {
    color: #000;
    background-color: var(--gold-dark);
    border-color: var(--gold-dark);
    /* La lueur au survol est mutualisée dans "Effet de survol doré" ci-dessus */
}

/* Bandeau d'avis clients qui défile (page d'accueil) */
body.page-accueil .avis-marquee {
    overflow: hidden;
    padding: 0.5rem 0 1.5rem;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

body.page-accueil .avis-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation-name: avis-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

body.page-accueil .avis-marquee:hover .avis-track {
    animation-play-state: paused;
}

@keyframes avis-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

body.page-accueil .avis-card {
    flex: 0 0 auto;
    width: 320px;
}

body.page-accueil .avis-static {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.5rem 0 1.5rem;
}

@media (max-width: 576px) {
    body.page-accueil .avis-card {
        width: 85%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-accueil .avis-track {
        animation: none;
    }
}

/* ==========================================================================
   Page Spectacles - liste (ex <style> inline de templates/spectacles.php)
   Namespacé sous body.page-spectacles : .badge-discret y a un rendu
   différent de celui de la page d'accueil (page-accueil), d'où le préfixe.
   ========================================================================== */

/* Carte + image : arrondi/ombre/object-fit et comportement responsive
   mutualisés dans "Composants de listing partagés" ; seule la hauteur de
   base (desktop) reste propre à cette page. */
body.page-spectacles .spectacle-card {
    height: 300px;
}

body.page-spectacles .spectacle-image {
    height: 300px;
    overflow: hidden;
}

/* Style doré */
body.page-spectacles .spectacles-title-line {
    background-color: var(--gold) !important;
}

/* Couleur du bouton "Informations" : cf. "Composants de listing partagés" */

/* ==========================================================================
   Pages Spectacle / Prestation - fiche détail (ex <style> inline de
   templates/spectacle.php et templates/prestation.php)
   Les deux pages partagent #header-carousel/.snowflake, mais .noel-title a
   une couleur différente sur chacune, d'où le namespacing par page.
   La classe .noel-title n'est posée dans le HTML que lorsque $hasNoel est
   vrai (thème de Noël) : la règle CSS peut donc rester statique ici.
   ========================================================================== */

@keyframes snowfall {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(20px, 100vh, 0);
    }
}

body.page-spectacle .snowflake,
body.page-prestation .snowflake {
    color: #e0e0e0;
    font-size: 1em;
    font-family: Arial, sans-serif;
    position: fixed;
    top: -10%;
    z-index: 9999;
    user-select: none;
    pointer-events: none;
    animation-name: snowfall;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@media (max-width: 768px) {
    body.page-spectacle #header-carousel .carousel-item,
    body.page-prestation #header-carousel .carousel-item {
        min-height: 30vh !important;
    }
    body.page-spectacle #header-carousel .carousel-background,
    body.page-spectacle #header-carousel .carousel-overlay,
    body.page-prestation #header-carousel .carousel-background,
    body.page-prestation #header-carousel .carousel-overlay {
        min-height: 30vh !important;
    }
    body.page-spectacle #header-carousel .container,
    body.page-prestation #header-carousel .container {
        min-height: 30vh !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    body.page-spectacle #header-carousel .display-3,
    body.page-prestation #header-carousel .display-3 {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    body.page-spectacle .container-fluid.p-0.mb-5,
    body.page-prestation .container-fluid.p-0.mb-5 {
        margin-bottom: 1rem !important;
    }
}

/* Image du hero floutée derrière l'overlay (le titre reste net) */
body.page-spectacle #header-carousel .carousel-overlay,
body.page-prestation #header-carousel .carousel-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.page-spectacle .noel-title {
    font-family: 'Mountains of Christmas', cursive !important;
    color: #8B0000;
}

body.page-prestation .noel-title {
    font-family: 'Mountains of Christmas', cursive !important;
    color: var(--gold);
}

/* ==========================================================================
   Page Galerie (ex <style> inline de templates/galerie.php)
   ========================================================================== */

body.page-galerie #tpgal-apply-filter,
body.page-galerie .tpgal-pagination-btn.active,
body.page-galerie #tpgal-voir-plus,
body.page-galerie #tpgal-lightbox-link {
    color: #000000 !important;
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}

body.page-galerie #tpgal-apply-filter:hover,
body.page-galerie #tpgal-apply-filter:focus,
body.page-galerie .tpgal-pagination-btn.active:hover,
body.page-galerie #tpgal-voir-plus:hover,
body.page-galerie #tpgal-lightbox-link:hover {
    color: #000000 !important;
    background-color: var(--gold-dark) !important;
    border-color: var(--gold-dark) !important;
}

body.page-galerie .form-check-input:checked {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}

body.page-galerie .tpgal-sort-option-selected {
    color: var(--gold) !important;
}

/* ==========================================================================
   Page Prestations - liste (ex <style> inline de templates/prestations.php)
   ========================================================================== */

body.page-prestations .prestations-section {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 20px !important;
}

/* Carte/image/bouton doré : cf. "Composants de listing partagés". */
body.page-prestations .prestation-image {
    height: 300px;
    overflow: hidden;
    background-color: #f5f5f5;
}

body.page-prestations .prestation-description {
    color: #444444;
}

body.page-prestations .prestation-card:hover .prestation-image img {
    transform: scale(1.03);
}

/* ==========================================================================
   Page Contact (ex <style> inline de templates/contact.php)
   Déjà scopé via le wrapper .contact-page présent dans le template.
   ========================================================================== */

/* Page contact "éditoriale" : deux colonnes séparées par un filet vertical,
   champs en soulignement, rien en boîte/carte. Polices du site uniquement
   (Barlow pour les titres, Ubuntu hérité pour le reste — aucune police
   ajoutée). */
.contact-editorial {
    background-color: #ffffff;
    padding: 4rem 0;
}

.contact-editorial-row {
    row-gap: 3rem;
}

.contact-editorial-col {
    padding-top: 0;
    padding-bottom: 0;
}

@media (min-width: 992px) {
    .contact-editorial-right {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        padding-left: 4rem;
    }

    .contact-editorial-left {
        padding-right: 2rem;
    }
}

.contact-kicker {
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.85rem;
}

.contact-kicker::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background-color: var(--gold-dark);
}

.contact-editorial-title {
    font-family: 'Barlow', sans-serif;
    font-weight: 800;
    font-size: 2.75rem;
    line-height: 1.1;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
    .contact-editorial-title {
        font-size: 3.4rem;
    }
}

.contact-editorial-title-accent {
    color: var(--gold-dark);
}

.contact-editorial-lead {
    color: #6b6b6b;
    max-width: 420px;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

/* Champs "soulignement" : pas d'encadré, juste un filet en bas qui passe au
   doré au focus — plus éditorial qu'un input Bootstrap classique. */
.contact-underline-field {
    margin-bottom: 1.75rem;
}

.contact-underline-field label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9a9a9a;
    margin-bottom: 0.6rem;
}

.contact-underline-field input,
.contact-underline-field select,
.contact-underline-field textarea {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    padding: 0.35rem 0;
    font-size: 1rem;
    color: #1a1a1a;
    outline: none;
    transition: border-color 0.25s ease;
}

.contact-underline-field textarea {
    resize: vertical;
    min-height: 10rem;
}

.contact-underline-field input:focus,
.contact-underline-field select:focus,
.contact-underline-field textarea:focus {
    border-bottom-color: var(--gold-dark);
}

.contact-underline-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c99450' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.2rem center;
    padding-right: 1.25rem;
}

.contact-editorial-newsletter {
    margin-bottom: 1.25rem;
}

.contact-editorial-newsletter .form-check-label {
    color: #6b6b6b;
    font-size: 0.9rem;
}

.contact-page .form-check-input:checked {
    background-color: var(--gold-dark) !important;
    border-color: var(--gold-dark) !important;
}

.contact-page .form-check-input:focus {
    border-color: var(--gold-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--gold-rgb), 0.25) !important;
}

/* Bouton texte + flèche, pas de bouton rempli — reste dans le langage
   "soulignement" du reste du formulaire. */
.contact-editorial-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    background: none;
    border: none;
    border-bottom: 1px solid #1a1a1a;
    padding: 0 0 0.35rem;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1a1a1a;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.contact-editorial-submit i {
    color: var(--gold-dark);
    transition: transform 0.25s ease;
}

.contact-editorial-submit:hover,
.contact-editorial-submit:focus {
    color: var(--gold-dark);
    border-bottom-color: var(--gold-dark);
}

.contact-editorial-submit:hover i,
.contact-editorial-submit:focus i {
    transform: translateX(5px);
}

.contact-editorial-submit:disabled {
    opacity: 0.5;
}

/* Colonne "Nous trouver" : liste coordonnées avec filet fin entre chaque
   ligne (pas de carte/encadré), bouton itinéraire en contour doré. */
.contact-editorial-info {
    margin-bottom: 2rem;
}

.contact-editorial-info li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.contact-editorial-info li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.contact-editorial-info-icon {
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
    color: var(--gold-dark);
    font-size: 1.05rem;
    margin-top: 0.15rem;
}

.contact-editorial-info-text,
.contact-editorial-info-text a {
    color: #1a1a1a;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.5;
}

.contact-editorial-info-text a:hover {
    color: var(--gold-dark);
}

.contact-editorial-directions {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--gold-dark);
    border-radius: 2px;
    padding: 0.6rem 1.5rem;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-dark);
    text-decoration: none;
    margin-bottom: 2rem;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.contact-editorial-directions:hover {
    background-color: var(--gold-dark);
    color: #ffffff;
}

/* Petite carte contenue et claire (pas de carte du tout sur mobile, cf.
   cahier des charges), pas de gros encadré sombre. */
.contact-map-col {
    margin-bottom: 0.85rem;
}

.contact-leaflet-map {
    position: relative;
    height: 360px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #eaeaea;
    /* Les panes internes de Leaflet montent jusqu'à z-index 700 (popups) :
       sans isolation, ils peuvent déborder de ce bloc et passer au-dessus
       du reste de la page. isolation les contient. */
    isolation: isolate;
}

/* Tuiles OpenStreetMap standard, désaturées et éclaircies pour un rendu
   clair et discret (au lieu des couleurs vives par défaut d'OSM), cohérent
   avec le fond ivoire de la page. */
.contact-leaflet-map .leaflet-tile-pane {
    filter: grayscale(0.45) brightness(1.25) contrast(0.95) saturate(1.2);
}

/* Marqueur doré en forme d'épingle (au lieu du pin bleu par défaut de
   Leaflet), pour rester dans l'identité dorée plutôt que la charte
   visuelle de Leaflet. */
.contact-map-marker i {
    font-size: 26px;
    color: var(--gold-dark);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.contact-map-caption {
    display: block;
    font-size: 0.8rem;
    color: #9a9a9a;
    text-decoration: none;
    text-align: center;
}

.contact-map-caption:hover {
    color: var(--gold-dark);
}

/* ==========================================================================
   Page News - liste (ex <style> inline de templates/news.php)
   Carte/image/bouton doré/responsive : cf. "Composants de listing partagés"
   ========================================================================== */

.news-image {
    height: 300px;
    overflow: hidden;
    background-color: #f5f5f5;
}

.news-excerpt {
    color: #444444;
}