/* Styles de index.php (extraits de la page, même ordre) */

    body,
    body h1,
    body h2,
    body h3,
    body h4,
    body h5,
    body h6,
    body button,
    body input,
    body select,
    body textarea {
        font-family: 'Alexandria', sans-serif;
    }

    /* Widget actualités / événements — ancré en bas à gauche, ouvrable/masquable */
    .unah-popup-widget {
        position: fixed;
        left: 20px;
        bottom: 20px;
        z-index: 10500;
    }

    .unah-popup-toggle {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        border: none;
        background: var(--green-color);
        color: var(--light-color);
        font-size: 1.4rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
        position: relative;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .unah-popup-toggle:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
    }

    .unah-popup-toggle .unah-popup-dot {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--red-color);
        border: 2px solid #fff;
        animation: unah-popup-pulse 1.6s ease-in-out infinite;
    }

    .unah-popup-toggle .unah-popup-dot.hidden {
        display: none;
    }

    @keyframes unah-popup-pulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.25);
        }
    }

    .unah-popup-card {
        position: absolute;
        left: 0;
        bottom: calc(100% + 14px);
        background: #faf7f0;
        width: 360px;
        max-width: calc(100vw - 40px);
        max-height: 70vh;
        border-radius: 2px;
        border: 1px solid #1a1a1a;
        overflow: hidden;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        transform-origin: bottom left;
        transform: scale(0.85) translateY(16px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, visibility 0.3s ease;
        font-family: 'Alexandria', sans-serif;
    }

    .unah-popup-card.active {
        transform: scale(1) translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .unah-popup-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid #1a1a1a;
        background: #faf7f0;
        color: #1a1a1a;
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    }

    .unah-popup-close:hover {
        transform: rotate(90deg);
        background: #1a1a1a;
        color: #faf7f0;
    }

    /* Masthead façon "une de journal" */
    .unah-popup-header {
        background: #faf7f0;
        padding: 0.9rem 1.3rem 0.6rem;
        flex: 0 0 auto;
        text-align: center;
        border-bottom: 3px double #1a1a1a;
    }

    .unah-popup-badge {
        display: block;
        color: #1a1a1a;
        font-weight: 700;
        font-size: 1.25rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .unah-popup-badge i {
        color: var(--secondary-color);
        margin-right: 0.4rem;
    }

    .unah-popup-dateline {
        display: flex;
        justify-content: space-between;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #555;
        margin-top: 0.35rem;
        border-top: 1px solid #1a1a1a;
        padding-top: 0.3rem;
    }

    .unah-popup-body {
        padding: 1rem 1.3rem;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .unah-popup-item {
        display: flex;
        gap: 0.9rem;
        text-decoration: none;
        color: inherit;
        border: none;
        border-bottom: 1px solid #d8d2c4;
        border-radius: 0;
        padding-bottom: 1rem;
        transition: opacity 0.2s ease;
    }

    .unah-popup-body .unah-popup-item:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
    }

    .unah-popup-item:hover {
        opacity: 0.72;
    }

    .unah-popup-img {
        width: 100px;
        min-width: 100px;
        height: 100px;
        object-fit: cover;
        filter: grayscale(65%) contrast(1.05);
        border: 1px solid #1a1a1a;
    }

    .unah-popup-item-event {
        align-items: flex-start;
    }

    .unah-popup-date {
        width: 62px;
        min-width: 62px;
        min-height: 62px;
        background: #faf7f0;
        border: 1px solid #1a1a1a;
        color: #1a1a1a;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .unah-popup-date-day {
        font-size: 1.4rem;
        font-weight: 800;
        line-height: 1;
        font-family: 'Alexandria', sans-serif;
    }

    .unah-popup-date-month {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        border-top: 1px solid #1a1a1a;
        margin-top: 0.2rem;
        padding-top: 0.15rem;
        width: 100%;
        text-align: center;
    }

    .unah-popup-item-body {
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }

    .unah-popup-tag {
        display: inline-block;
        align-self: flex-start;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--secondary-color);
        background: none;
        padding: 0;
        border-radius: 0;
        /* border-bottom: 2px solid var(--secondary-color); */
        margin-bottom: 0.35rem;
        font-family: 'Alexandria', sans-serif;
    }

    .unah-popup-tag-event {
        color: var(--green-color);
        border-bottom-color: var(--green-color);
    }

    .unah-popup-item-body h3 {
        font-family: 'Alexandria', sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: #1a1a1a;
        margin: 0 0 0.3rem;
        line-height: 1.25;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .unah-popup-item-body p {
        font-size: 0.8rem;
        color: #555;
        margin: 0;
        font-family: 'Alexandria', sans-serif;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .unah-popup-footer {
        padding: 0.7rem 1.3rem 1rem;
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
        border-top: 1px solid #1a1a1a;
        font-family: 'Alexandria', sans-serif;
    }

    .unah-popup-link {
        flex: 1;
        text-align: center;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.5rem 0.6rem;
        border-radius: 0;
        border: 1px solid #1a1a1a;
        background: #faf7f0;
        color: #1a1a1a;
        transition: background 0.2s ease, color 0.2s ease;
        white-space: nowrap;
    }

    .unah-popup-link:hover {
        background: #1a1a1a;
        color: #faf7f0;
    }

    @media (max-width: 576px) {
        .unah-popup-widget {
            /* Relevé au-dessus de la barre IA (bas de page, même seuil que .ai-chat-bar) pour éviter tout chevauchement */
            left: 14px;
            bottom: 86px;
        }

        .unah-popup-toggle {
            width: 50px;
            height: 50px;
            font-size: 1.2rem;
        }

        .unah-popup-img {
            width: 84px;
            min-width: 84px;
            height: 84px;
        }

        .unah-popup-date {
            width: 60px;
            min-width: 60px;
            min-height: 76px;
        }

        .unah-popup-item-body h3 {
            font-size: 0.92rem;
        }
    }

    /* Hero Slider */
    .hero-slider {
        position: relative;
        height: 800px;
        overflow: hidden;
    }

    .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .slide.active {
        opacity: 1;
    }

    .slide img,
    .slide video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .slide-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(44, 62, 80, 0.57), rgba(231, 181, 115, 0.27));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .slide-overlay .container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .slide-content {
        color: var(--primary-color);
        max-width: 800px;
        text-align: center;
        width: 100%;
        padding: 0 15px;
    }

    .slide-content h1 {
        font-size: 3.5rem;
        font-weight: bold;
        margin-bottom: 1.5rem;
        animation: slideInLeft 0.8s;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .slide-content p {
        font-size: 1.3rem;
        margin-bottom: 2rem;
        animation: slideInLeft 1s;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }

    /* Announcement inside slider */
    .announcement {
        margin: 1.5rem auto 1.25rem auto;
        background: rgba(255, 255, 255, 0.12);
        padding: 0.5rem 0.9rem;
        display: inline-flex;
        gap: 0.75rem;
        align-items: center;
        border-radius: 8px;
        backdrop-filter: blur(4px);
    }

    .announcement-badge {
        background-color: var(--red-color);
        color: var(--primary-color);
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-weight: 700;
        font-size: 0.85rem;
    }

    .announcement p {
        margin: 0;
        color: var(--primary-color);
        font-weight: 600;
    }

    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .slider-controls {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 2rem;
        gap: 1rem;
        z-index: 10;
        pointer-events: none;
        /* allow individual buttons to manage pointer-events */
    }

    .slider-nav {
        pointer-events: all;
        background: none;
        border: none;
        color: var(--primary-color);
        padding: 0.4rem;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s, background 0.2s;
    }

    .slider-nav:hover {
        transform: translateY(-3px);
        background: white;
        color: var(--dark-color);
    }

    .slider-nav svg {
        width: 20px;
        height: 20px;
        display: block;
    }

    /* Ensure no pseudo-element text (e.g. "preview" / "next") appears on slider buttons */
    .slider-nav::after,
    .slider-nav::before,
    .swiper-button-next::after,
    .swiper-button-prev::after {
        content: none !important;
        display: none !important;
    }

    /* keep dot styles in case they're reused elsewhere */
    .slider-dot {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        border: 2px solid white;
        cursor: pointer;
        transition: all 0.3s;
    }

    .slider-dot.active {
        background: var(--secondary-color);
        width: 40px;
        border-radius: 10px;
    }

    /* Quick Stats */
    .quick-stats {
        /* background: linear-gradient(135deg, #008, rgba(0, 0, 136, 0.37)); */
        background-color: var(--dark-color);
        padding: 0.5rem 0;
        /* margin-top: 60px; */
        position: relative;
        z-index: 10;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .stat-item {
        text-align: center;
        padding: 1.5rem;
        color: var(--primary-color);
    }

    .stat-value {
        font-size: 2rem;
        font-weight: bold;
        display: block;
        margin-bottom: 0.5rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .stat-label {
        font-size: 1.1rem;
        opacity: 0.95;
    }

    /* Section Styles */
    .section-title {
        /* text-align: center; */
        margin-bottom: 3rem;
        color: var(--dark-color);
        font-weight: bold;
        position: relative;
        padding-bottom: 1rem;
    }

    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 4%;
        transform: translateX(-50%);
        width: 100px;
        height: 4px;
        background: var(--secondary-color);
        border-radius: 2px;
    }

    /* Card Styles */
    .card-modern {
        border: none;
        border-radius: 15px;
        overflow: hidden;
        transition: all 0.3s;
        height: 100%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .card-modern:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    }

    .card-modern img {
        height: 220px;
        object-fit: cover;
        transition: transform 0.3s;
    }

    .card-modern:hover img {
        transform: scale(1.1);
    }

    .card-img-container {
        overflow: hidden;
        position: relative;
    }

    .badge-category {
        position: absolute;
        top: 1rem;
        left: 1rem;
        padding: 0.5rem 1rem;
        border-radius: 25px;
        font-weight: 600;
        z-index: 1;
    }

    /* Partners Slider */
    .partners-slider {
        overflow: hidden;
        position: relative;
        padding: 2rem 0;
    }

    .partners-track {
        display: flex;
        animation: scroll 30s linear infinite;
        gap: 3rem;
    }

    .partners-track:hover {
        animation-play-state: paused;
    }

    .partner-item {
        flex: 0 0 auto;
        width: 180px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        padding: 1rem;
        border-radius: 10px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
    }

    .partner-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .partner-item img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    .btn-primary-custom {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
        color: var(--dark-color);
        font-weight: 600;
        padding: 0.75rem 2rem;
        border-radius: 50px;
        transition: all 0.3s;
    }

    .btn-primary-custom:hover {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
        color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(231, 180, 115, 0.4);
    }

    /* Improved CTA (hero) */
    .cta-group {
        display: inline-flex;
        gap: 0.75rem;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    /* remove underlines and ensure CTAs are plain text links */
    .cta-group a {
        text-decoration: none;
    }

    .btn-primary-cta {
        background-color: var(--primary-color);
        /* white */
        color: var(--dark-color);
        /* dark green text */
        padding: 0.85rem 1.6rem;
        border-radius: 0px;
        /* no rounding */
        /* font-weight: 800; */
        box-shadow: 0 6px 20px rgba(11, 102, 35, 0.06);
        border: 2px solid rgba(11, 102, 35, 0.06);
        transform: translateY(0);
        transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
    }

    .btn-primary-cta:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 32px rgba(11, 102, 35, 0.12);
        background-color: var(--primary-color);
        color: var(--green-color);
    }

    .btn-outline-cta {
        background: transparent;
        color: var(--primary-color);
        /* dark green text */
        padding: 0.75rem 1.4rem;
        border-radius: 0px;
        /* square corners */
        border: 3px solid rgba(255, 255, 255, 0.22);
        backdrop-filter: none;
        font-weight: 700;
        transition: background .16s ease, color .16s ease, transform .16s ease;
    }

    .btn-outline-cta:hover {
        background: #0b6623;
        color: var(--primary-color);
        transform: translateY(-3px);
    }

    /* Entrance animation */
    .cta-item {
        opacity: 0;
        transform: translateY(12px);
    }

    .cta-item.animate-in {
        opacity: 1;
        transform: translateY(0);
        transition: all .45s cubic-bezier(.2, .9, .3, 1);
    }

    /* News Cards (redesign) */
    .news-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.5rem;
        align-items: start;
    }

    .news-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        transition: transform .25s ease, box-shadow .25s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .news-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    }

    .news-media {
        position: relative;
        height: 190px;
        overflow: hidden;
    }

    .news-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s ease;
    }

    .news-card:hover .news-media img {
        transform: scale(1.06);
    }

    .category-pill {
        position: absolute;
        left: 12px;
        bottom: 12px;
        background: var(--secondary-color);
        color: var(--primary-color);
        padding: 0.4rem 0.7rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.85rem;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    }

    .date-badge {
        position: absolute;
        right: 12px;
        top: 12px;
        background: rgba(0, 0, 0, 0.55);
        color: var(--primary-color);
        padding: 0.35rem 0.6rem;
        border-radius: 8px;
        font-size: 0.8rem;
    }

    .news-body {
        padding: 1rem 1.1rem 1.25rem;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .news-title {
        margin: 0 0 0.5rem 0;
        font-size: 1.05rem;
        color: var(--dark-color);
    }

    /* Hope Media Section */
    .hope-media .logo {
        max-width: 220px;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .hope-media .desc {
        color: var(--dark-color);
        margin-top: 0.75rem;
    }

    .hope-media .social a {
        margin-right: 0.5rem;
        color: var(--dark-color);
        text-decoration: none;
    }

    .hope-media .btn-hope {
        background: linear-gradient(90deg, var(--green-color), #147c11);
        color: var(--primary-color);
        border-radius: 50px;
        padding: 0.6rem 1.25rem;
        border: none;
    }

    .news-excerpt {
        color: var(--dark-color);
        flex: 1;
        margin-bottom: 0.75rem;
    }

    .news-actions {
        display: flex;
        justify-content: flex-start;
    }

    .btn-outline-primary {
        border-color: var(--secondary-color);
        color: var(--secondary-color);
    }

    .btn-outline-primary:hover {
        background: var(--secondary-color);
        color: var(--primary-color);
        border-color: var(--secondary-color);
    }

    @media (max-width: 768px) {
        .slide-content h1 {
            font-size: 2rem;
        }

        .slide-content p {
            font-size: 1rem;
        }

        .stat-value {
            font-size: 2rem;
        }

        .hero-slider {
            height: 500px;
        }

        /* On small screens place slider controls near the bottom to avoid overlapping content */
        .slider-controls {
            top: auto;
            bottom: 1rem;
            transform: none;
            padding: 0 1rem;
        }

        .slider-nav {
            width: 44px;
            height: 44px;
        }
    }

    /* Effet de survol pro sur les cartes programmes */
    .card-hover {
        transition: box-shadow .25s, transform .25s;
    }

    .card-hover:hover {
        box-shadow: 0 8px 32px rgba(44, 62, 80, 0.18);
        transform: translateY(-7px) scale(1.03);
        z-index: 2;
    }

    /* About Section (new design) */
    .about .content h3 {
        font-size: 2rem;
        margin-bottom: 1rem;
        color: var(--dark-color);
        font-weight: 700;
    }

    .about .content p {
        color: #6c757d;
        line-height: 1.6;
    }

    .stats-row {
        display: flex;
        gap: 1rem;
        margin: 1.5rem 0;
        flex-wrap: wrap;
    }

    .about .stat-item {
        background: var(--primary-color);
        border-radius: 8px;
        padding: 0.75rem 1rem;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
        flex: 1 1 140px;
        text-align: center;
    }

    .about .stat-item .number {
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--secondary-color);
    }

    .about .stat-item .label {
        font-size: 0.9rem;
        color: var(--dark-color);
    }

    .mission-statement em {
        color: var(--dark-color);
        display: block;
        margin-top: 1rem;
    }

    .btn-learn-more {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        background: var(--secondary-color);
        color: var(--dark-color);
        padding: .6rem 1rem;
        border-radius: 40px;
        text-decoration: none;
        font-weight: 700;
        margin-top: 1rem;
    }

    .image-wrapper {
        position: relative;
    }

    .image-wrapper .experience-badge {
        position: absolute;
        bottom: 12px;
        left: 12px;
        background: rgba(0, 0, 0, 0.65);
        color: var(--primary-color);
        padding: .5rem .75rem;
        border-radius: 8px;
        display: flex;
        gap: .5rem;
        align-items: center;
    }

    .experience-badge .years {
        font-weight: 800;
        font-size: 1.25rem;
    }

    /* Testimonials */
    .testimonials.section {
        padding: 4rem 0;
        background: var(--light-color, #f8fafc);
    }

    .testimonials .testimonial-item {
        background: #fff;
        padding: 1.6rem;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(44, 62, 80, 0.06);
    }

    .testimonials .testimonial-item h2 {
        font-size: 1.4rem;
        color: var(--dark-color);
        margin-bottom: .75rem;
    }

    .testimonials .testimonial-item p {
        color: var(--dark-color);
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .testimonials .profile {
        margin-top: 1.1rem;
    }

    .testimonials .profile-img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: .75rem;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        border: 3px solid rgba(0, 0, 0, 0.04);
    }

    .testimonials .profile-info h3 {
        margin: 0;
        font-size: 1rem;
        color: var(--dark-color);
    }

    .testimonials .profile-info span {
        font-size: .85rem;
        color: var(--dark-color);
    }

    .testimonials .featured-img-wrapper {
        text-align: center;
    }

    .testimonials .featured-img {
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    }

    .testimonials .swiper-navigation {
        margin-top: 1rem;
    }

    .testimonials .swiper-button-prev,
    .testimonials .swiper-button-next {
        width: 44px;
        height: 44px;
        background: var(--secondary-color);
        border-radius: 50%;
        display: inline-block;
    }

    .testimonials .swiper-button-prev::after,
    .testimonials .swiper-button-next::after {
        content: '';
    }

    @media (max-width: 991px) {
        .testimonials .col-lg-4 {
            display: none;
        }

        .testimonials .testimonial-item {
            padding: 1rem;
        }
    }

    @media (max-width: 576px) {
        .testimonials .testimonial-item h2 {
            font-size: 1.05rem;
        }

        .testimonials .testimonial-item p {
            -webkit-line-clamp: 2;
            line-clamp: 2;
        }

        .testimonials .profile-img {
            width: 52px;
            height: 52px;
        }
    }

    /* Event Banner */
    .event-banner {
        /* margin: 2rem 0; */
        padding: 1rem 0;
        background: #f8f8f8;
        border-radius: 10px;
    }

    .event-banner .event-date {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 184px;
        padding: 0.45rem 0.6rem;
        border-radius: 8px;
        /* background: linear-gradient(180deg, var(--secondary-color), rgba(0, 0, 0, 0.04)); */
        background-color: var(--secondary-color);
        color: var(--dark-color);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    }

    .event-banner .event-date .month {
        display: block;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .event-banner .event-date .day {
        display: block;
        font-size: 1.6rem;
        font-weight: 800;
    }

    .event-banner h3 {
        margin: 0 0 .25rem 0;
        font-size: 1.25rem;
        color: var(--dark-color);
    }

    .event-banner p {
        margin: 0;
        color: var(--dark-color);
    }

    .event-banner .btn-register {
        display: inline-block;
        background: var(--secondary-color);
        color: var(--dark-color);
        padding: .5rem .9rem;
        border-radius: 40px;
        text-decoration: none;
        font-weight: 700;
        border: none;
        transition: transform .15s ease, box-shadow .15s ease;
    }

    .event-banner .btn-register:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    @media (max-width: 767px) {
        .event-banner .col-md-2 {
            flex: 0 0 80px;
            max-width: 80px;
        }

        .event-banner .col-md-8 {
            margin-top: .5rem;
        }

        .event-banner .btn-register {
            width: 100%;
            text-align: center;
            padding: .6rem 1rem;
        }
    }

    /* Events Section Design */
    .events.section {
        padding: 3.5rem 0;
        background: transparent;
    }

    .events .event-card {
        display: flex;
        gap: 1rem;
        background: #fff;
        border-radius: 12px;
        padding: 1rem;
        box-shadow: 0 8px 30px rgba(44, 62, 80, 0.06);
        align-items: stretch;
        transition: transform .18s ease, box-shadow .18s ease;
        height: 100%;
    }

    .events .event-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 44px rgba(44, 62, 80, 0.12);
    }

    .events .event-date {
        flex: 0 0 96px;
        text-align: center;
        background: linear-gradient(180deg, var(--secondary-color), rgba(0, 0, 0, 0.04));
        color: var(--dark-color);
        border-radius: 10px;
        padding: .6rem .4rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 84px;
    }

    .events .event-date .month {
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: .85rem;
    }

    .events .event-date .day {
        font-size: 1.6rem;
        font-weight: 800;
    }

    .events .event-date .year {
        font-size: .8rem;
        color: var(--dark-color);
        margin-top: 4px;
    }

    .events .event-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: .6rem;
    }

    .events .event-tag {
        display: inline-block;
        padding: .25rem .6rem;
        border-radius: 999px;
        font-size: .78rem;
        font-weight: 700;
        color: var(--primary-color);
    }

    .events .event-tag.academic {
        background: #0d6efd;
    }

    .events .event-tag.sports {
        background: #198754;
    }

    .events .event-tag.arts {
        background: #6f42c1;
    }

    .events .event-tag.community {
        background: #ff7b54;
    }

    .events h3 {
        margin: 0;
        font-size: 1.15rem;
        color: var(--dark-color);
    }

    .events p {
        margin: 0;
        color: #6c757d;
    }

    .events .event-meta {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: .5rem;
    }

    .events .meta-item {
        display: flex;
        gap: .5rem;
        align-items: center;
        color: #6c757d;
        font-size: .92rem;
    }

    .events .event-actions {
        margin-top: auto;
        display: flex;
        gap: .6rem;
    }

    .events .btn-learn-more {
        background: var(--secondary-color);
        color: var(--dark-color);
        padding: .45rem .75rem;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 700;
    }

    .events .btn-learn-more:hover {
        opacity: .95;
        transform: translateY(-2px);
    }

    .events .btn-calendar {
        background: transparent;
        border: 1px solid rgba(0, 0, 0, 0.06);
        padding: .35rem .65rem;
        border-radius: 8px;
        color: var(--dark-color);
        text-decoration: none;
    }

    .events .btn-view-all {
        background: transparent;
        border: 1px solid rgba(0, 0, 0, 0.08);
        padding: .6rem 1.1rem;
        border-radius: 8px;
        text-decoration: none;
        color: var(--dark-color);
    }

    @media (max-width: 992px) {
        .events .event-card {
            flex-direction: column;
        }

        .events .event-date {
            flex-direction: row;
            gap: .5rem;
            padding: .5rem;
            min-width: unset;
        }

        .events .event-date .month {
            display: inline-block;
        }
    }

    .campus-flex-section {
        background-color: #f4f4f4;
        padding: 60px 20px;
        overflow: hidden;
    }

    .campus-flex-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .campus-flex-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .campus-flex-header h2 {
        font-size: 2.5rem;
        color: var(--dark-color);
        margin-bottom: 10px;
    }

    .campus-flex {
        display: flex;
        gap: 15px;
        height: 500px;
        margin-bottom: 30px;
    }

    .campus-flex-item {
        flex: 1;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        transition: all 0.6s cubic-bezier(0.25, 1, 0.3, 1);
        cursor: pointer;
        background: var(--dark-color);
        display: block;
        text-decoration: none;
    }

    .campus-flex-item:hover {
        flex: 2.5;
    }

    .campus-flex-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0.5;
        transition: transform 0.8s ease, opacity 0.6s ease;
    }

    .campus-flex-item:hover .campus-flex-img {
        transform: scale(1.05);
        opacity: 0.6;
    }

    .campus-flex-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 40px;
        z-index: 2;
        color: var(--light-color);
        box-sizing: border-box;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 20%, transparent 100%);
    }

    .campus-flex-badge {
        color: var(--dark-color);
        padding: 5px 12px;
        font-weight: 800;
        font-size: 0.8rem;
        display: inline-block;
        margin-bottom: 15px;
        text-transform: uppercase;
        border-radius: 20px;
    }

    .campus-flex-content h3 {
        font-size: 1.7rem;
        margin: 0 0 10px 0;
        text-decoration: none;
    }

    .campus-flex-reveal {
        max-height: 0;
        opacity: 0;
        transition: all 0.5s ease;
        overflow: hidden;
    }

    .campus-flex-item:hover .campus-flex-reveal {
        max-height: 220px;
        opacity: 1;
        margin-top: 15px;
    }

    .campus-flex-desc {
        font-size: 0.95rem;
        line-height: 1.4;
        margin-bottom: 15px;
        color: rgba(255, 255, 255, 0.9);
    }

    .campus-flex-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0;
        list-style: none;
    }

    .campus-flex-tags li {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        backdrop-filter: blur(5px);
        white-space: nowrap;
    }

    .campus-flex-footer {
        text-align: center;
    }

    .btn-campus-flex {
        color: var(--dark-color);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 2px solid var(--secondary-color);
        padding-bottom: 5px;
        transition: 0.3s;
    }

    @media (max-width: 768px) {
        .campus-flex {
            flex-direction: column;
            height: auto;
        }

        .campus-flex-item {
            height: 280px;
            flex: none;
        }

        .campus-flex-item:hover {
            flex: none;
        }

        .campus-flex-reveal {
            max-height: 220px;
            opacity: 1;
        }
    }

    :root {

        --text-main: #1e293b;

        --card-w: 240px;
        --card-h: 320px;
        --gap: 30px;
        --speed: 40s;

        --glass: rgba(255, 255, 255, 0.15);

        --primary-color-echo: #1a1a1a;
        /* Orange vibrant pour l'Echo */
        --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

        --text-light: #6c757d;

        --news-ink: #1a1a1a;

        /* Rouge bordeaux pour le côté institutionnel */
        --news-border: #e1e1e1;
    }

    .programs-art-section {
        padding: 80px 0;
        background: #ffffff;
    }

    .program-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .art-title {
        font-size: 2.8rem;
        text-align: center;
        margin-bottom: 60px;
        position: relative;
    }

    .art-title::after {
        content: '';
        display: block;
        width: 50px;
        height: 3px;
        background: var(--dark-color);
        margin: 15px auto;
    }

    .program-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .step-box {
        position: relative;
        padding: 40px;
        background: #fff;
        transition: all 0.4s ease;
        border-bottom: 4px solid transparent;
    }

    /* Le chiffre géant artistique */
    .step-number {
        position: absolute;
        top: -10px;
        right: 20px;
        font-size: 8rem;
        font-weight: 900;
        line-height: 1;
        color: rgba(0, 0, 0, 0.03);
        /* Très subtil */
        transition: all 0.4s ease;
        z-index: 1;
    }

    .step-content {
        position: relative;
        z-index: 2;
    }

    .step-icon {
        font-size: 2.5rem;
        margin-bottom: 20px;
        display: inline-block;
    }

    .step-box h3 {
        font-size: 1.6rem;
        margin-bottom: 15px;
        color: var(--text-main);
    }

    .step-box p {
        font-size: 0.95rem;
        line-height: 1.6;
        color: #64748b;
    }

    /* Hover Effects par couleur */
    .step-box:hover {
        transform: translateY(-10px);
    }

    .step-box.licence:hover {
        border-color: var(--dark-color);
    }

    .step-box.master:hover {
        border-color: var(--green-color);
    }

    .step-box.doctorat:hover {
        border-color: var(--purple-color);
    }

    .step-box:hover .step-number {
        color: rgba(0, 0, 0, 0.07);
        right: 30px;
    }

    .btn-art-container {
        text-align: center;
        margin-top: 60px;
    }

    .btn-minimal {
        display: inline-block;
        padding: 15px 40px;
        background: var(--text-main);
        color: var(--primary-color);
        text-decoration: none;
        border-radius: 50px;
        font-weight: 600;
        letter-spacing: 1px;
        transition: 0.3s;
    }

    .btn-minimal:hover {
        background: var(--dark-color);
        box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2);
    }

    @media (max-width: 991px) {
        .program-steps {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .step-box {
            padding: 30px;
            border-left: 4px solid transparent;
            border-bottom: 0;
        }

        .step-box.licence {
            border-left-color: var(--dark-color);
        }
    }

    .programmes-facultes {
        background: var(--primary-color);
        display: flex;
        justify-content: center;
        /* padding: 60px 0; */
    }

    .programmes-facultes .prestige-explorer {
        width: 95%;
        max-width: 100%;
        height: 600px;
        /* Hauteur fixe pour éviter le scroll */
        background: white;
        display: flex;
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
    }

    /* Barre latérale des facultés */
    .programmes-facultes .faculty-nav {
        width: 350px;
        background: var(--dark-color);
        display: flex;
        flex-direction: column;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    .programmes-facultes .nav-item {
        padding: 25px 30px;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .programmes-facultes .nav-item:hover,
    .programmes-facultes .nav-item.active {
        background: rgba(255, 255, 255, 0.05);
        color: var(--secondary-color);
    }

    .programmes-facultes .nav-item.active {
        border-left: 4px solid var(--secondary-color);
    }

    .programmes-facultes .nav-item h4 {
        margin: 0;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Zone d'affichage du contenu */
    .programmes-facultes .display-area {
        flex: 1;
        position: relative;
        background: #000;
    }

    .programmes-facultes .content-pane {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
    }

    .programmes-facultes .content-pane.active {
        opacity: 1;
        visibility: visible;
    }

    .programmes-facultes .pane-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        filter: brightness(0.4);
    }

    .programmes-facultes .pane-info {
        position: relative;
        z-index: 2;
        padding: 60px;
        color: var(--primary-color);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .programmes-facultes .pane-info h2 {
        font-size: 2.5rem;
        margin-bottom: 20px;
        color: var(--secondary-color);
    }

    .programmes-facultes .program-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        list-style: none;
        padding: 0;
    }

    .programmes-facultes .program-grid li {
        background: rgba(255, 255, 255, 0.1);
        padding: 12px 15px;
        backdrop-filter: blur(5px);
        font-size: 0.9rem;
        border-left: 2px solid var(--secondary-color);
    }

    .programmes-facultes .btn-more {
        margin-top: 30px;
        align-self: flex-start;
        padding: 12px 25px;
        border: 1px solid var(--secondary-color);
        color: var(--accent);
        text-decoration: none;
        font-size: 0.8rem;
        text-transform: uppercase;
        transition: 0.3s;
    }

    .btn-more:hover {
        background: var(--secondary-color);
        color: var(--green-color);
    }

    @media (max-width: 900px) {
        .programmes-facultes .prestige-explorer {
            flex-direction: column;
            height: auto;
        }

        /* Nav facultés en rangée de puces qui s'enroulent, plutôt qu'empilée verticalement :
           sur mobile, 6 lignes pleine largeur (padding: 25px 30px chacune) forçaient à faire
           défiler ~400px de menu avant d'atteindre le moindre contenu. */
        .programmes-facultes .faculty-nav {
            width: 100%;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .programmes-facultes .nav-item {
            flex: 1 1 auto;
            padding: 12px 10px;
            justify-content: center;
            border-bottom: none;
            border-right: 1px solid rgba(255, 255, 255, 0.05);
        }

        .programmes-facultes .nav-item.active {
            border-left: none;
            border-bottom: 3px solid var(--secondary-color);
        }

        .programmes-facultes .nav-item h4 {
            font-size: 0.72rem;
            text-align: center;
        }

        .programmes-facultes .nav-item span {
            display: none;
        }

        /* Hauteur généreuse + scroll interne en filet de sécurité : le padding/police du pane
           n'étaient pas réduits ci-dessous, donc le contenu des facultés à 5 programmes
           (FASACO, FASELA) dépassait les 400px fixes et se faisait couper par l'overflow:hidden
           du conteneur parent (bouton "Voir la faculté" invisible/inatteignable).
           flex: 0 0 560px (au lieu du "height: 560px" seul) est indispensable : la règle de base
           de .display-area utilise "flex: 1" (donc flex-basis: 0%), qui l'emporte sur "height" pour
           le dimensionnement en axe principal. Comme .prestige-explorer passe en column + height:auto
           sur mobile, et que .content-pane est en position:absolute (donc ne contribue à aucune
           hauteur de contenu), .display-area s'effondrait à ~0px — la section entière devenait
           invisible sur mobile, pas seulement mal cadrée. */
        .programmes-facultes .display-area {
            flex: 0 0 560px;
            height: 560px;
        }

        .programmes-facultes .pane-info {
            padding: 32px 22px;
            overflow-y: auto;
        }

        .programmes-facultes .pane-info h2 {
            font-size: 1.4rem;
            margin-bottom: 14px;
        }

        .programmes-facultes .program-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .programmes-facultes .program-grid li {
            font-size: 0.85rem;
            padding: 10px 12px;
        }

        .programmes-facultes .btn-more {
            margin-top: 18px;
            padding: 10px 20px;
            font-size: 0.75rem;
        }
    }

    @media (max-width: 480px) {
        .programmes-facultes .nav-item h4 {
            font-size: 0.66rem;
        }

        .programmes-facultes .pane-info {
            padding: 26px 18px;
        }

        .programmes-facultes .pane-info h2 {
            font-size: 1.2rem;
        }
    }

    .master-section {
        background-color: #f4f4f4;
        padding: 60px 20px;
        overflow: hidden;
    }

    .master-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .master-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .master-header h2 {
        font-size: 2.5rem;
        color: var(--dark-color);
        margin-bottom: 10px;
    }

    .master-flex {
        display: flex;
        gap: 15px;
        height: 500px;
        /* Légèrement augmenté pour le confort des listes */
        margin-bottom: 30px;
    }

    .master-item {
        flex: 1;
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        transition: all 0.6s cubic-bezier(0.25, 1, 0.3, 1);
        cursor: pointer;
        background: var(--dark-color);
    }

    .master-item:hover {
        flex: 2.5;
        /* Plus d'espace pour afficher les options */
    }

    .master-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0.4;
        transition: transform 0.8s ease, opacity 0.6s ease;
    }

    .master-item:hover .master-img {
        transform: scale(1.05);
        opacity: 0.5;
    }

    .master-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 40px;
        z-index: 2;
        color: var(--light-color);
        box-sizing: border-box;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 20%, transparent 100%);
    }

    .master-badge {
        background: var(--secondary-color);
        color: var(--dark-color);
        padding: 5px 12px;
        font-weight: 800;
        font-size: 0.8rem;
        display: inline-block;
        margin-bottom: 15px;
        text-transform: uppercase;
    }

    .master-content h3 {
        font-size: 2rem;
        margin: 0 0 10px 0;
    }

    /* Zone des options révélée au hover */
    .master-reveal {
        max-height: 0;
        opacity: 0;
        transition: all 0.5s ease;
        overflow: hidden;
    }

    .master-item:hover .master-reveal {
        max-height: 200px;
        opacity: 1;
        margin-top: 15px;
    }

    .master-desc {
        font-size: 0.95rem;
        line-height: 1.4;
        margin-bottom: 15px;
        color: rgba(255, 255, 255, 0.9);
    }

    /* Style des options (Tags) */
    .options-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0;
        list-style: none;
    }

    .options-tags li {
        background: var(--glass);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        backdrop-filter: blur(5px);
        white-space: nowrap;
    }

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

    .btn-master {
        color: var(--dark-color);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 2px solid var(--secondary-color);
        padding-bottom: 5px;
        transition: 0.3s;
    }

    @media (max-width: 768px) {
        .master-flex {
            flex-direction: column;
            height: auto;
        }

        .master-item {
            height: 280px;
            flex: none;
        }

        /* Un tap déclenche souvent :hover sur mobile (état qui reste actif jusqu'au tap suivant).
           Sans cette règle, .master-item:hover { flex: 2.5 } (spécificité plus élevée que la règle
           ci-dessus) reprenait la main et son flex-basis: 0% écrasait le height: 280px fixe,
           cassant la carte en pleine colonne au premier tap. */
        .master-item:hover {
            flex: none;
        }

        .master-reveal {
            max-height: 200px;
            opacity: 1;
        }
    }

    .echo-section {
        display: flex;
        align-items: center;
        justify-content: center;
        /* min-height: 80vh; */
        background: var(--light-color);
        overflow: hidden;
        padding: 40px;
    }

    .echo-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 1100px;
        gap: 80px;
        align-items: center;
    }

    /* --- CÔTÉ VISUEL (GAUCHE) --- */
    .echo-visual {
        position: relative;
        perspective: 1000px;
    }

    .magazine-wrapper {
        position: relative;
        transform: rotateY(-15deg) rotateX(5deg);
        transform-style: preserve-3d;
        transition: var(--transition);
    }

    .magazine-wrapper:hover {
        transform: rotateY(-5deg) rotateX(0deg) scale(1.02);
    }

    .magazine-cover {
        width: 100%;
        max-width: 450px;
        height: auto;
        box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.2);
        position: relative;
        z-index: 3;
        display: block;
    }

    /* L'effet d'Écho en arrière-plan */
    .echo-shadow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid var(--red-color);
        z-index: 1;
        transition: var(--transition);
        transform: translate(15px, 15px);
    }

    .magazine-wrapper:hover .echo-shadow {
        transform: translate(-15px, -15px);
        background: rgba(255, 62, 0, 0.05);
    }

    /* --- CÔTÉ TEXTE (DROITE) --- */
    .echo-content {
        z-index: 10;
    }

    .edition-number {
        font-weight: 800;
        font-size: 14px;
        letter-spacing: 3px;
        color: var(--red-color);
        text-transform: uppercase;
        margin-bottom: 10px;
        display: block;
    }

    .echo-title {
        font-size: clamp(3rem, 8vw, 5rem);
        line-height: 0.9;
        margin: 0 0 25px 0;
        color: var(--primary-color-echo);
        font-weight: 900;
    }

    .echo-description {
        font-size: 1.1rem;
        line-height: 1.6;
        color: #555;
        margin-bottom: 35px;
        max-width: 400px;
    }

    /* Bouton Artistique */
    .btn-echo {
        padding: 18px 35px;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--primary-color);
        background: var(--primary-color-echo);
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--transition);
    }

    .btn-echo:hover {
        background: var(--red-color);
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(255, 62, 0, 0.3);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .echo-container {
            grid-template-columns: 1fr;
            text-align: center;
        }

        .echo-visual {
            order: 2;
            margin-top: 50px;
        }

        .echo-description {
            margin: 0 auto 35px auto;
        }
    }

            .header-title {
                font-size: 1rem;
                margin-bottom: 10px;
                color: var(--dark-color);
                font-weight: 700
            }

            .focus-card {
                position: relative;
                background: linear-gradient(135deg, var(--dark-color), #34495e);
                color: var(--primary-color);
                border-radius: 20px;
                padding: 48px;
                display: grid;
                grid-template-columns: auto 1fr auto;
                align-items: center;
                gap: 32px;
                margin-bottom: 36px;
                box-shadow: 0 20px 50px rgba(44, 62, 80, 0.25);
                overflow: hidden;
            }

            .focus-card::before {
                content: '';
                position: absolute;
                top: -70px;
                right: -70px;
                width: 240px;
                height: 240px;
                background: radial-gradient(circle, rgba(228, 178, 113, 0.18), transparent 70%);
                border-radius: 50%;
                pointer-events: none;
            }

            .focus-icon {
                position: relative;
                z-index: 1;
                width: 76px;
                height: 76px;
                min-width: 76px;
                border-radius: 18px;
                background: rgba(228, 178, 113, 0.15);
                border: 1px solid rgba(228, 178, 113, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 2rem;
                color: var(--secondary-color);
            }

            .focus-text {
                position: relative;
                z-index: 1;
            }

            .focus-eyebrow {
                display: inline-block;
                font-size: 0.72rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.12em;
                color: var(--secondary-color);
                margin-bottom: 8px;
            }

            .focus-card h2 {
                margin: 0 0 10px 0;
                font-size: 1.7rem;
                font-weight: 700;
                letter-spacing: 0.3px;
            }

            .focus-card p {
                margin: 0;
                font-size: 0.95rem;
                opacity: 0.85;
                max-width: 560px;
                line-height: 1.65;
            }

            .btn-login {
                position: relative;
                z-index: 1;
                background: var(--secondary-color);
                color: var(--dark-color);
                text-decoration: none;
                padding: 14px 30px;
                border-radius: 50px;
                font-weight: 700;
                text-align: center;
                transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
                text-transform: uppercase;
                font-size: 0.8rem;
                letter-spacing: 0.5px;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                white-space: nowrap;
                box-shadow: 0 10px 25px rgba(228, 178, 113, 0.3);
            }

            .btn-login:hover {
                background: #fff;
                color: var(--dark-color);
                transform: translateY(-3px);
                box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
            }

            .secondary-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                gap: 22px;
            }

            .link-card {
                position: relative;
                background: white;
                border: 1px solid rgba(44, 62, 80, 0.06);
                padding: 28px;
                text-decoration: none;
                color: inherit;
                transition: all 0.3s ease;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                border-radius: 16px;
                box-shadow: 0 4px 16px rgba(44, 62, 80, 0.05);
                overflow: hidden;
            }

            .link-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: var(--secondary-color);
                transform: scaleX(0);
                transform-origin: left;
                transition: transform 0.3s ease;
            }

            .link-card:hover {
                border-color: transparent;
                transform: translateY(-6px);
                box-shadow: 0 20px 40px rgba(44, 62, 80, 0.14);
            }

            .link-card:hover::before {
                transform: scaleX(1);
            }

            .link-icon {
                width: 48px;
                height: 48px;
                border-radius: 12px;
                background: rgba(228, 178, 113, 0.12);
                color: var(--secondary-color);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.3rem;
                margin-bottom: 16px;
                transition: background 0.3s ease, color 0.3s ease;
            }

            .link-card:hover .link-icon {
                background: var(--secondary-color);
                color: var(--dark-color);
            }

            /* Carte pas encore disponible (pas de lien vers une page inexistante) */
            .link-card-disabled {
                cursor: default;
                opacity: 0.65;
                border-style: dashed;
            }

            .link-card-disabled .link-icon {
                background: rgba(100, 116, 139, 0.1);
                color: #94a3b8;
            }

            .link-card-disabled:hover {
                border-color: rgba(44, 62, 80, 0.06);
                transform: none;
                box-shadow: 0 4px 16px rgba(44, 62, 80, 0.05);
            }

            .link-card-disabled:hover::before {
                transform: scaleX(0);
            }

            .link-card-disabled .card-footer {
                color: #94a3b8;
            }

            .link-card h3 {
                margin: 0 0 8px 0;
                font-size: 1.1rem;
                font-weight: 700;
                color: var(--dark-color);
            }

            .link-card p {
                margin: 0;
                font-size: 0.85rem;
                color: #64748b;
                line-height: 1.55;
            }

            .card-footer {
                margin-top: 20px;
                font-size: 0.75rem;
                font-weight: 700;
                text-transform: uppercase;
                color: var(--secondary-color);
                letter-spacing: 0.5px;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            @media (max-width: 768px) {
                .focus-card {
                    grid-template-columns: 1fr;
                    text-align: center;
                    gap: 20px;
                    padding: 32px 24px;
                }

                .focus-icon {
                    margin: 0 auto;
                }

                .btn-login {
                    width: 100%;
                    justify-content: center;
                }
            }

        /* Bandeau plein, sans aucune bordure — juste couleur pleine + ombre pour la profondeur */
        .academic-calendar-card {
            background: linear-gradient(120deg, var(--green-color), #058043 65%, #04a05a);
            border-radius: 24px;
            padding: 44px 52px;
            display: flex;
            align-items: center;
            gap: 32px;
            box-shadow: 0 20px 45px rgba(4, 105, 55, 0.28);
            position: relative;
            overflow: hidden;
        }

        .academic-calendar-card::after {
            content: '';
            position: absolute;
            top: -40%;
            right: -8%;
            width: 60%;
            height: 220%;
            background: rgba(255, 255, 255, 0.06);
            transform: rotate(20deg);
            pointer-events: none;
        }

        .academic-calendar-icon {
            width: 76px;
            height: 76px;
            min-width: 76px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.16);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.1rem;
            position: relative;
            z-index: 1;
        }

        .academic-calendar-text {
            flex: 1;
            position: relative;
            z-index: 1;
        }

        .academic-calendar-eyebrow {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255, 255, 255, 0.75);
            margin-bottom: 0.4rem;
        }

        .academic-calendar-text h2 {
            font-size: 1.7rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 0.5rem;
        }

        .academic-calendar-text p {
            color: rgba(255, 255, 255, 0.88);
            margin: 0;
            max-width: 560px;
        }

        .academic-calendar-action {
            position: relative;
            z-index: 1;
        }

        .btn-calendar-download {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.9rem 1.75rem;
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.9rem;
            white-space: nowrap;
            background: rgba(255, 255, 255, 0.14);
            color: #fff;
        }

        @media (max-width: 768px) {
            .academic-calendar-card {
                flex-direction: column;
                text-align: center;
                padding: 36px 28px;
            }

            .academic-calendar-text p {
                max-width: none;
            }
        }

    .news-editorial {
        background-color: var(--primary-color);
        padding: 72px 20px;
        color: var(--news-ink);
    }

    .editorial-container {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0;
    }

    .editorial-header {
        grid-column: span 3;
        border-bottom: 3px solid var(--news-ink);
        padding-bottom: 14px;
        margin-bottom: 36px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
    }

    .editorial-header h2 {
        font-size: clamp(2rem, 4vw, 3rem);
        margin: 0;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: -1px;
        color: var(--news-ink);
    }

    .editorial-header h2 span {
        color: var(--secondary-color);
    }

    .editorial-date {
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #888;
        white-space: nowrap;
    }

    .news-featured {
        grid-column: span 2;
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--news-border);
        padding-right: 36px;
    }

    .featured-img-wrap {
        position: relative;
        overflow: hidden;
        border-radius: 4px;
    }

    .featured-img {
        width: 100%;
        height: 360px;
        object-fit: cover;
        display: block;
        filter: grayscale(15%) brightness(0.97);
        transition: filter 0.45s ease, transform 0.45s ease;
    }

    .news-featured:hover .featured-img {
        filter: grayscale(0%) brightness(1);
        transform: scale(1.02);
    }

    .featured-body {
        padding-top: 22px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .category-tag {
        display: inline-block;
        background: var(--secondary-color);
        color: var(--dark-color);
        font-weight: 800;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        padding: 0.2rem 0.65rem;
        border-radius: 3px;
        margin-bottom: 12px;
        align-self: flex-start;
    }

    .news-featured h3 {
        font-size: clamp(1.4rem, 2.5vw, 2.1rem);
        font-weight: 800;
        margin: 0 0 14px 0;
        line-height: 1.18;
        color: var(--news-ink);
    }

    .news-featured h3 a,
    .news-sidebar .side-item h4 a {
        color: inherit;
        text-decoration: none;
        transition: color 0.2s;
    }

    .news-featured h3 a:hover,
    .news-sidebar .side-item h4 a:hover {
        color: var(--secondary-color);
    }

    .news-featured>.featured-body>p {
        font-size: 1rem;
        line-height: 1.7;
        color: #555;
        flex: 1;
        margin: 0;
    }

    .news-stats {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        margin-top: 14px;
        font-size: 0.82rem;
        color: #999;
    }

    .news-stats span {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

    .news-read-more {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin-top: 18px;
        font-size: 0.78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--dark-color);
        text-decoration: none;
        border-bottom: 2px solid var(--secondary-color);
        padding-bottom: 2px;
        transition: color 0.2s;
        align-self: flex-start;
    }

    .news-read-more:hover {
        color: var(--secondary-color);
    }

    .news-sidebar {
        padding-left: 36px;
        display: flex;
        flex-direction: column;
    }

    .side-item {
        padding-bottom: 22px;
        margin-bottom: 22px;
        border-bottom: 1px solid var(--news-border);
    }

    .side-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .side-cat {
        display: inline-block;
        font-size: 0.68rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--secondary-color);
        margin-bottom: 6px;
    }

    .side-item h4 {
        font-size: 1rem;
        font-weight: 700;
        margin: 0 0 8px 0;
        line-height: 1.35;
    }

    .side-item p {
        font-size: 0.88rem;
        color: #666;
        line-height: 1.6;
        margin: 0 0 8px 0;
    }

    .side-stats {
        display: flex;
        gap: 1rem;
        font-size: 0.78rem;
        color: #aaa;
    }

    .side-stats span {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .editorial-footer {
        grid-column: span 3;
        border-top: 1px solid var(--news-border);
        margin-top: 36px;
        padding-top: 20px;
        text-align: center;
    }

    .editorial-footer a {
        font-size: 0.78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--dark-color);
        text-decoration: none;
        border-bottom: 2px solid var(--secondary-color);
        padding-bottom: 2px;
        transition: color 0.2s;
    }

    .editorial-footer a:hover {
        color: var(--secondary-color);
    }

    @media (max-width: 991px) {
        .editorial-container {
            grid-template-columns: 1fr;
        }

        .editorial-header,
        .editorial-footer {
            grid-column: span 1;
        }

        .news-featured {
            grid-column: span 1;
            border-right: none;
            padding-right: 0;
        }

        .featured-img {
            height: 240px;
        }

        .news-sidebar {
            padding-left: 0;
            border-top: 1px solid var(--news-border);
            padding-top: 24px;
            margin-top: 8px;
        }
    }

    @media (max-width: 575px) {
        .news-editorial {
            padding: 48px 16px;
        }

        .editorial-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
        }
    }

    .section-container {
        padding: 80px 0;
        text-align: center;
    }

    .title {
        font-size: 2rem;
        /* letter-spacing: 4px; */
        text-transform: uppercase;
        color: var(--green-color);
        margin-bottom: 60px;
        font-weight: 700;
    }

    /* Le Slider Artistique */
    .art-slider {
        position: relative;
        width: 100%;
        height: 400px;
        display: flex;
        align-items: center;
        overflow: hidden;
        /* Masque de fondu sur les côtés */
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }

    .track {
        display: flex;
        width: calc((var(--card-w) + var(--gap)) * 14);
        /* 7 cartes doublées */
        animation: scroll var(--speed) linear infinite;
    }

    /* Animation Pause au survol */
    .art-slider:hover .track {
        animation-play-state: paused;
    }

    /* Style de la Carte */
    .uni-card {
        width: var(--card-w);
        height: var(--card-h);
        margin-right: var(--gap);
        flex-shrink: 0;
        background: white;
        border-radius: 4px;
        /* Bordures plus droites pour un look plus "galerie d'art" */
        position: relative;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
        transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    }

    .uni-card:hover {
        transform: translateY(-15px) scale(1.02);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    }

    .uni-img {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        /* filter: grayscale(100%); */
        /* Artistique : noir et blanc par défaut */
        transition: 0.8s ease;
    }

    .uni-card:hover .uni-img {
        filter: grayscale(0%);
    }

    /* Overlay d'informations */
    .uni-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px;
        background: linear-gradient(to top, rgba(12, 35, 64, 0.9), transparent);
        color: var(--primary-color);
        text-align: left;
        transform: translateY(20px);
        transition: 0.5s ease;
    }

    .uni-card:hover .uni-overlay {
        transform: translateY(0);
    }

    .uni-logo {
        width: 50px;
        height: 50px;
        background: white;
        padding: 5px;
        border-radius: 2px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .uni-logo img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }

    .uni-name {
        font-size: 1rem;
        font-weight: 500;
        margin: 0;
        letter-spacing: 1px;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-1 * (var(--card-w) + var(--gap)) * 5));
        }
    }

    /* Styles spécifiques pour la section Hope Media */
    .hope-content-box {
        padding-right: 1rem;
    }

    .multimedia-wrapper {
        position: relative;
        padding: 2rem 0;
    }

    /* Cadre artistique arrière-plan */
    .backdrop-frame {
        position: absolute;
        top: 0;
        left: -2rem;
        width: 80%;
        height: 90%;
        border: 2px solid var(--secondary-color);
        z-index: 1;
        pointer-events: none;
    }

    /* Conteneur de la vidéo/image principale */
    .video-container-box {
        position: relative;
        height: 380px;
        z-index: 2;
        overflow: hidden;
        background: var(--dark-color);
    }

    .video-container-box img {
        transition: transform 0.5s ease;
        filter: grayscale(20%);
    }

    .video-container-box:hover img {
        transform: scale(1.03);
    }

    /* Overlay interactif */
    .video-overlay-play {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(44, 62, 80, 0.3), rgba(11, 102, 35, 0.6));
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Bouton de lecture moderne et artistique */
    .play-art-btn {
        width: 70px;
        height: 70px;
        background-color: var(--primary-color);
        /* Blanc */
        color: var(--dark-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
    }

    .play-art-btn:hover {
        transform: scale(1.1);
        background-color: var(--secondary-color);
        color: var(--primary-color);
    }

    @media (max-width: 991px) {
        .backdrop-frame {
            display: none;
        }

        .video-container-box {
            height: 280px;
        }
    }

        .cta-section {
            position: relative;
            color: var(--primary-color);
            overflow: hidden;
        }

        /* blurred background via pseudo-element */
        .cta-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url('../../images/slider-image-apropos.png');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            filter: blur(6px) brightness(0.6) saturate(0.95);
            transform: scale(1.03);
            z-index: 0;
            will-change: transform, filter;
        }

        .cta-section .cta-card {
            position: relative;
            z-index: 1;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
            border-radius: 12px;
            padding: 28px;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
        }

        .cta-section .cta-title {
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .cta-section .cta-desc {
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 1rem;
        }

        .btn-cta {
            background: var(--secondary-color);
            color: var(--dark-color);
            border: none;
            padding: 0.7rem 1.6rem;
            border-radius: 8px;
            font-weight: 800;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
        }

        .btn-cta:hover {
            transform: translateY(-3px);
        }

        .btn-cta-outline {
            background: transparent;
            color: var(--primary-color);
            border: 2px solid rgba(255, 255, 255, 0.16);
            padding: 0.6rem 1.4rem;
            border-radius: 8px;
            font-weight: 700;
        }

        .cta-image {
            max-width: 420px;
            border-radius: 10px;
            box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
        }

        @media (max-width: 991px) {
            .cta-section .cta-image {
                max-width: 100%;
            }

            .cta-section .cta-title {
                font-size: 1.5rem;
            }
        }

    /* Smooth anchor scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Hero: keep 800px desktop, cap on very short screens only */
    .hero-slider {
        height: 650px;
        max-height: 95vh;
    }

    /* Smoother slide fade */
    .slide {
        transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Fluid hero heading */
    .slide-content h1 {
        font-size: clamp(2rem, 5vw, 3.5rem);
        line-height: 1.08;
        letter-spacing: -0.02em;
    }

    .slide-content p {
        font-size: clamp(1rem, 1.8vw, 1.3rem);
    }

    /* Rounded CTA buttons (was border-radius:0) */
    .btn-primary-cta,
    .btn-outline-cta {
        border-radius: 8px !important;
    }

    /* Slider nav — glass look */
    .slider-nav {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        transition: background 0.22s ease, transform 0.22s ease, color 0.22s ease;
    }

    .slider-nav:hover {
        background: rgba(255, 255, 255, 0.92);
        color: var(--dark-color);
        transform: scale(1.08);
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    }

    /* Slider dots strip */
    .slider-dots-strip {
        position: absolute;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 0.45rem;
        z-index: 15;
        transition: opacity 0.3s ease;
    }

    /* Scroll-reveal — only applied by JS to below-fold sections */
    .sec-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: opacity, transform;
    }

    .sec-reveal.sec-in {
        opacity: 1;
        transform: none;
    }

    /* Announcement hover */
    .announcement {
        transition: background 0.2s ease;
    }

    .announcement:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Fluid section headings */
    .section-title,
    .art-title {
        font-size: clamp(1.5rem, 3.5vw, 2.4rem);
        line-height: 1.15;
    }

    /* Stat label micro-text */
    .stat-label {
        font-size: 0.8rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.72;
    }

    /* Hope media box glow */
    @keyframes _hopePulse {

        0%,
        100% {
            box-shadow: 0 8px 32px rgba(4, 105, 55, 0.10);
        }

        50% {
            box-shadow: 0 20px 52px rgba(4, 105, 55, 0.22);
        }
    }

    .video-container-box {
        animation: _hopePulse 5s ease-in-out infinite;
    }

    /* Partner cards — subtle grayscale, reveal on hover */
    .uni-card {
        overflow: hidden;
    }

    .uni-img {
        filter: grayscale(35%) brightness(0.92);
    }

    .uni-card:hover .uni-img {
        filter: grayscale(0%) brightness(1) !important;
    }

    /* Keyboard focus rings */
    .btn-primary-cta:focus-visible,
    .btn-outline-cta:focus-visible {
        outline: 2px solid var(--secondary-color);
        outline-offset: 3px;
        border-radius: 6px;
    }

    /* Mobile */
    @media (max-width: 767px) {
        .hero-slider {
            height: min(550px, 90vh);
        }

        .slide-content h1 {
            font-size: clamp(1.5rem, 7vw, 2.2rem);
        }

        .slide-content p {
            font-size: 0.95rem;
            margin-bottom: 1rem;
        }

        .slider-nav {
            width: 38px;
            height: 38px;
        }

        .slider-nav svg {
            width: 16px;
            height: 16px;
        }

        /* Stack only the hero slider CTAs, not other cta-groups on the page */
        .slide-content .cta-group {
            flex-direction: column;
            align-items: center;
        }

        .slide-content .btn-primary-cta,
        .slide-content .btn-outline-cta {
            width: 100%;
            max-width: 280px;
            text-align: center;
        }
    }

    /* --- BARRE IA (Bas de page) --- */
    .ai-chat-bar {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 800px;
        z-index: 1000;
        display: flex;
        justify-content: center;
    }

    .ai-input-container {
        width: 100%;
        background: var(--primary-color);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 2px solid var(--secondary-color);
        border-radius: 50px;
        display: flex;
        padding: 8px 15px;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, box-shadow 0.25s ease, border-color 0.25s ease;
        position: relative;
        /* brighter, more readable glowing border animation */
        animation: ai-glow 3s ease-in-out infinite;
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px) scale(0.97);
        pointer-events: none;
    }

    .ai-chat-bar.is-open .ai-input-container {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .ai-collapse-btn {
        background: transparent;
        border: none;
        color: #999;
        font-size: 1rem;
        padding: 0 4px 0 8px;
        cursor: pointer;
        flex: 0 0 auto;
    }

    .ai-collapse-btn:hover {
        color: var(--dark-color);
    }

    /* moving indicator dot along the border */
    .ai-input-container .ai-pointer {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #d9a259;
        box-shadow: 0 0 8px rgba(217, 162, 89, 0.9);
        z-index: 3;
        /* start top-right */
        top: 6px;
        left: calc(100% - 18px);
        transform: translate(0, 0);
        animation: ai-pointer-move 4.5s linear infinite;
    }

    @keyframes ai-pointer-move {
        0% {
            top: 6px;
            left: calc(100% - 18px);
        }

        12.5% {
            top: 6px;
            left: calc(100% - 18px);
        }

        25% {
            top: calc(100% - 18px);
            left: calc(100% - 18px);
        }

        37.5% {
            top: calc(100% - 18px);
            left: calc(100% - 18px);
        }

        50% {
            top: calc(100% - 18px);
            left: 6px;
        }

        62.5% {
            top: calc(100% - 18px);
            left: 6px;
        }

        75% {
            top: 6px;
            left: 6px;
        }

        87.5% {
            top: 6px;
            left: 6px;
        }

        100% {
            top: 6px;
            left: calc(100% - 18px);
        }
    }

    /* stronger glow when user focuses the input */
    .ai-input-container:focus-within {
        box-shadow: 0 18px 44px rgba(12, 35, 64, 0.12), 0 0 36px rgba(217, 162, 89, 0.28);
        border-color: rgba(217, 162, 89, 0.9);
        transform: scale(1.01);
    }

    @keyframes ai-glow {
        0% {
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08), 0 0 0 rgba(217, 162, 89, 0);
            border-color: rgba(217, 162, 89, 0.35);
        }

        50% {
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10), 0 0 28px rgba(217, 162, 89, 0.32);
            border-color: rgba(217, 162, 89, 0.9);
        }

        100% {
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08), 0 0 0 rgba(217, 162, 89, 0);
            border-color: rgba(217, 162, 89, 0.35);
        }
    }

    .ai-input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 12px 20px;
        font-size: 1rem;
        color: var(--green-color);
        outline: none;
    }

    .ai-btn {
        background: var(--green-color);
        color: var(--primary-color);
        border: none;
        border-radius: 50px;
        padding: 0 25px;
        cursor: pointer;
        font-weight: 600;
        transition: 0.3s;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ai-btn:hover {
        background: var(--secondary-color);
    }

    .ai-badge {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: var(--secondary-color);
        color: var(--primary-color);
        padding: 2px 8px;
        border-radius: 10px;
        margin-bottom: 10px;
        display: inline-block;
        margin-left: 25px;
    }

    /* Responsive adjustments for the IA bar and send button */
    @media (max-width: 576px) {
        .ai-chat-bar {
            bottom: 16px;
            width: calc(100% - 20px);
            max-width: none;
            left: 50%;
            transform: translateX(-50%);
            padding: 0 6px;
        }

        .ai-input-container {
            padding: 6px 10px;
            border-radius: 28px;
            gap: 8px;
        }

        .ai-input-container .ai-pointer {
            width: 10px;
            height: 10px;
            top: 6px;
            left: calc(100% - 14px);
        }

        .ai-input {
            padding: 10px 12px;
            font-size: 0.95rem;
            min-width: 0;
        }

        .ai-btn {
            padding: 8px 12px;
            font-size: 0.95rem;
            min-width: 56px;
            height: 40px;
            border-radius: 22px;
            flex: 0 0 auto;
        }
    }

    @media (max-width: 360px) {
        .ai-input {
            font-size: 0.9rem;
            padding: 8px 10px;
        }

        .ai-btn {
            padding: 8px 10px;
            font-size: 0.9rem;
            height: 38px;
        }
    }

    /* Panneau de réponse (remplace les alert() par une bulle de chat) */
    .ai-response-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(100% + 14px);
        background: #fff;
        border: 2px solid var(--secondary-color);
        border-radius: 20px;
        box-shadow: 0 18px 50px rgba(12, 35, 64, 0.18);
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
        max-height: 400px;
        display: flex;
        flex-direction: column;
    }

    .ai-response-panel.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .ai-response-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(135deg, var(--dark-color), #34495e);
        color: #fff;
        padding: 10px 16px;
        font-weight: 700;
        font-size: 0.9rem;
        flex: 0 0 auto;
    }

    .ai-response-header i {
        color: var(--secondary-color);
        margin-right: 6px;
    }

    .ai-response-close {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 1.3rem;
        line-height: 1;
        cursor: pointer;
        opacity: 0.8;
        padding: 0 4px;
    }

    .ai-response-close:hover {
        opacity: 1;
    }

    .ai-response-body {
        padding: 16px 18px;
        overflow-y: auto;
        color: var(--dark-color);
        line-height: 1.6;
        font-size: 0.95rem;
    }

    .ai-response-body p {
        margin: 0 0 10px;
    }

    .ai-response-body p:last-child {
        margin-bottom: 0;
    }

    .ai-response-body ul {
        margin: 0 0 10px;
        padding-left: 1.2rem;
    }

    .ai-response-body ul:last-child {
        margin-bottom: 0;
    }

    .ai-response-body li {
        margin-bottom: 5px;
        line-height: 1.5;
    }

    .ai-response-body a {
        color: var(--green-color);
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid rgba(4, 105, 55, 0.3);
    }

    .ai-response-body a:hover {
        border-bottom-color: var(--green-color);
    }

    .ai-typing {
        display: inline-flex;
        gap: 4px;
        align-items: center;
    }

    .ai-typing span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--secondary-color);
        animation: ai-typing-bounce 1s infinite ease-in-out;
    }

    .ai-typing span:nth-child(2) {
        animation-delay: 0.15s;
    }

    .ai-typing span:nth-child(3) {
        animation-delay: 0.3s;
    }

    @keyframes ai-typing-bounce {

        0%,
        60%,
        100% {
            transform: translateY(0);
            opacity: 0.5;
        }

        30% {
            transform: translateY(-4px);
            opacity: 1;
        }
    }

    @media (max-width: 576px) {
        .ai-response-panel {
            bottom: calc(100% + 10px);
            max-height: 60vh;
            border-radius: 16px;
        }

        .ai-response-header {
            padding: 8px 12px;
        }

        .ai-response-body {
            padding: 12px 14px;
            font-size: 0.9rem;
        }
    }