/* ===================================================

   home.css – GDE Front Office

   Desktop styles are unchanged.

   Mobile/responsive fixes applied below and inside

   each existing @media block.

   =================================================== */



/* ── GLOBAL RESET TO PREVENT HORIZONTAL OVERFLOW ── */

*,

*::before,

*::after {

    box-sizing: border-box;

}



html,

body {

    max-width: 100%;

    overflow-x: hidden;

}



/* Prevent any section from causing horizontal scroll */

section,

.page-wrap,

.about-section,

.services-wrapper,

.news-section,

.diversite-section,

.manifests-section,

.sponsors-section,

.cta-band,

.dynamic-section,

.hero-map,

.page-container {

    max-width: 100%;

    overflow-x: hidden;

}



/* ===== DYNAMIC SECTION ===== */

.dynamic-section {

    position: relative;

    padding: 80px 0;

    overflow: hidden;

}



.dynamic-section-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 100%);

    z-index: 1;

}



.dynamic-container {

    position: relative;

    z-index: 2;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

    width: 100%;

}



.dynamic-header {

    text-align: center;

    margin-bottom: 50px;

}



.dynamic-title {

    font-size: 2.5rem;

    font-weight: 700;

    font-family: var(--font-serif);

    margin-bottom: 20px;

    color: #fff;

    letter-spacing: -0.5px;

}



.dynamic-section:not([style*="background-image"]) .dynamic-title {

    color: var(--primary-blue);

}



.dynamic-title-separator {

    width: 80px;

    height: 4px;

    background: linear-gradient(90deg, var(--primary-gold), #ffd700, var(--primary-gold));

    margin: 0 auto;

    border-radius: 2px;

}



.dynamic-row {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 40px;

}



.dynamic-col-text {

    flex: 1;

    min-width: 280px;

}



.dynamic-col-media {

    flex: 1;

    min-width: 280px;

}



.dynamic-text {

    font-size: 1.1rem;

    line-height: 1.8;

    color: #fff;

    text-align: justify;

    margin-bottom: 30px;

}



.dynamic-section:not([style*="background-image"]) .dynamic-text {

    color: #333;

}



.dynamic-text p {

    margin-bottom: 15px;

}



.dynamic-button-wrapper {

    margin-top: 30px;

}



.dynamic-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 38px;

    background: linear-gradient(135deg, var(--primary-gold) 0%, #d4a017 100%);

    color: #fff;

    text-decoration: none;

    border-radius: 50px;

    font-weight: 700;

    font-size: 1rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all 0.3s ease;

    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);

    border: none;

    cursor: pointer;

}



.dynamic-btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.5);

    background: linear-gradient(135deg, #d4a017 0%, var(--primary-gold) 100%);

}



.dynamic-btn-arrow {

    font-size: 1.2rem;

    transition: transform 0.3s ease;

}



.dynamic-btn:hover .dynamic-btn-arrow {

    transform: translateX(5px);

}



.dynamic-video {

    position: relative;

    padding-bottom: 56.25%;

    height: 0;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 20px 40px rgba(0,0,0,0.3);

}



.dynamic-video iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

}



.dynamic-image {

    text-align: center;

}



.dynamic-image img {

    max-width: 100%;

    border-radius: 20px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.25);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.dynamic-image img:hover {

    transform: scale(1.02);

    box-shadow: 0 25px 50px rgba(0,0,0,0.3);

}



.dynamic-stats {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 25px;

    margin-top: 60px;

}



.dynamic-stat {

    background: rgba(255,255,255,0.12);

    backdrop-filter: blur(10px);

    padding: 20px 35px;

    border-radius: 16px;

    text-align: center;

    min-width: 140px;

    transition: all 0.3s ease;

    border: 1px solid rgba(255,255,255,0.2);

}



.dynamic-section:not([style*="background-image"]) .dynamic-stat {

    background: var(--neutral-gray-100);

    backdrop-filter: none;

    border: none;

    box-shadow: 0 5px 15px rgba(0,0,0,0.05);

}



.dynamic-stat:hover {

    transform: translateY(-5px);

    background: rgba(255,255,255,0.2);

}



.dynamic-stat-value {

    font-size: 28px;

    font-weight: 800;

    color: var(--primary-gold);

    margin-bottom: 8px;

}



.dynamic-stat-label {

    font-size: 13px;

    color: #eee;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 500;

}



.dynamic-section:not([style*="background-image"]) .dynamic-stat-label {

    color: #666;

}



/* ===== AGENDA & MANIFESTATIONS ===== */

.agenda-view-all-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: linear-gradient(135deg, var(--agenda-gold), #d4af37);

    color: #111827;

    border-radius: 999px;

    padding: 12px 28px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition: all .25s ease;

    text-decoration: none;

    box-shadow: 0 8px 22px rgba(199,163,74,.25);

}



.agenda-view-all-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 28px rgba(199,163,74,.35);

    color: #111827;

}



.agenda-view-all-btn svg:last-child {

    transition: transform .25s ease;

}



.agenda-view-all-btn:hover svg:last-child {

    transform: translateX(5px);

}



[dir="rtl"] .agenda-view-all-btn:hover svg:last-child {

    transform: translateX(-5px);

}



/* ===== STYLES POUR LES ÉVÉNEMENTS VEDETTES ===== */

.featured-event {

    position: relative;

    border: 3px solid #d4af37 !important;

    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3), inset 0 0 30px rgba(212, 175, 55, 0.05) !important;

    transform: scale(1.02);

    transition: all 0.3s ease;

    z-index: 2;

}



.featured-event:hover {

    transform: scale(1.05) !important;

    box-shadow: 0 0 50px rgba(212, 175, 55, 0.5), inset 0 0 30px rgba(212, 175, 55, 0.1) !important;

    border-color: #ffd700 !important;

}



.featured-event .div-card-img::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, transparent 50%, rgba(212, 175, 55, 0.05) 100%);

    pointer-events: none;

}



.featured-badge {

    position: absolute;

    top: 12px;

    right: 12px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 6px;

    background: linear-gradient(135deg, #d4af37, #f5d76e, #d4af37);

    padding: 5px 14px 5px 10px;

    border-radius: 30px;

    font-size: 12px;

    font-weight: 700;

    color: #1a1a2e;

    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5);

    animation: featuredPulse 2s ease-in-out infinite;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}



.featured-star {

    font-size: 14px;

    animation: starSpin 4s linear infinite;

    display: inline-block;

}



.featured-text {

    font-size: 11px;

}



.featured-ribbon {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 12px;

    padding: 4px 12px 4px 10px;

    background: linear-gradient(135deg, #d4af37, #b8952e);

    border-radius: 20px;

    font-size: 11px;

    font-weight: 600;

    color: #1a1a2e;

    letter-spacing: 0.5px;

}



.featured-ribbon svg {

    fill: #1a1a2e;

    stroke: #1a1a2e;

    width: 14px;

    height: 14px;

}



@keyframes featuredPulse {

    0%, 100% {

        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5);

        transform: scale(1);

    }

    50% {

        box-shadow: 0 4px 30px rgba(212, 175, 55, 0.8), 0 0 60px rgba(212, 175, 55, 0.2);

        transform: scale(1.05);

    }

}



@keyframes starSpin {

    0%   { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



/* Adaptation RTL */

[dir="rtl"] .featured-badge {

    right: auto;

    left: 12px;

    padding: 5px 10px 5px 14px;

}



[dir="rtl"] .featured-ribbon {

    padding: 4px 10px 4px 12px;

}



/* ===== STYLES POUR LES ÉVÉNEMENTS EXPIRÉS - EN ROUGE ===== */

.expired-event {

    position: relative;

    border: 3px solid #dc3545 !important;

    box-shadow: 0 0 30px rgba(220, 53, 69, 0.3), inset 0 0 30px rgba(220, 53, 69, 0.05) !important;

    transition: all 0.3s ease;

    z-index: 1;

}



.expired-event:hover {

    transform: scale(1.02) !important;

    box-shadow: 0 0 50px rgba(220, 53, 69, 0.5), inset 0 0 30px rgba(220, 53, 69, 0.1) !important;

    border-color: #ff0000 !important;

}



.expired-event .div-card-img::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15) 0%, transparent 50%, rgba(220, 53, 69, 0.05) 100%);

    pointer-events: none;

    border-radius: 12px 12px 0 0;

}



.expired-badge {

    position: absolute;

    top: 12px;

    right: 12px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 6px;

    background: linear-gradient(135deg, #dc3545, #ff0000, #dc3545);

    padding: 5px 14px 5px 10px;

    border-radius: 30px;

    font-size: 12px;

    font-weight: 700;

    color: #ffffff;

    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.5);

    animation: expiredPulse 2s ease-in-out infinite;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}



.expired-icon {

    font-size: 14px;

}



.expired-text {

    font-size: 11px;

}



.expired-ribbon {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 12px;

    padding: 4px 12px 4px 10px;

    background: linear-gradient(135deg, #dc3545, #ff0000);

    border-radius: 20px;

    font-size: 11px;

    font-weight: 600;

    color: #ffffff;

    letter-spacing: 0.5px;

}



.expired-ribbon svg {

    stroke: #ffffff;

    width: 14px;

    height: 14px;

}



@keyframes expiredPulse {

    0%, 100% {

        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.5);

        transform: scale(1);

    }

    50% {

        box-shadow: 0 4px 30px rgba(220, 53, 69, 0.8), 0 0 60px rgba(220, 53, 69, 0.2);

        transform: scale(1.05);

    }

}



/* Style spécial pour les événements qui sont à la fois vedettes ET expirés */

.featured-event.expired-event {

    border-color: #dc3545 !important;

    box-shadow: 0 0 30px rgba(220, 53, 69, 0.3), inset 0 0 30px rgba(220, 53, 69, 0.05) !important;

}



.featured-event.expired-event .featured-badge {

    background: linear-gradient(135deg, #dc3545, #ff0000, #dc3545);

    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.5);

    animation: expiredPulse 2s ease-in-out infinite;

}



.featured-event.expired-event .featured-ribbon {

    background: linear-gradient(135deg, #dc3545, #ff0000);

    color: #ffffff;

}



.featured-event.expired-event .featured-ribbon svg {

    stroke: #ffffff;

    fill: none;

}



.featured-event.expired-event .featured-star {

    animation: none;

}



.featured-event.expired-event .expired-badge {

    display: flex;

}



/* Adaptation RTL pour les badges expirés */

[dir="rtl"] .expired-badge {

    right: auto;

    left: 12px;

    padding: 5px 10px 5px 14px;

}



[dir="rtl"] .expired-ribbon {

    padding: 4px 10px 4px 12px;

}



/* =====================================================

   DIVERSITE TABS CONTENT VISIBILITY

   Ensure only active tab content is shown

   ===================================================== */

.diversite-track .div-slide-group {

    display: none;

    opacity: 0;

    transition: opacity 0.3s ease;

}

.diversite-track .div-slide-group.active {

    display: grid;

    opacity: 1;

}



/* =====================================================

   RESPONSIVE — TABLET  (≤ 992px)

   ===================================================== */

@media (max-width: 992px) {



    /* Background calligraphy images – constrain so they never push layout */

    .page-wrap [aria-hidden="true"] img {

        width: 90vw !important;

        opacity: 0.18 !important;

    }



    /* Dynamic section */

    .dynamic-row {

        flex-direction: column;

        gap: 24px;

    }

    .dynamic-col-text,

    .dynamic-col-media {

        width: 100%;

        min-width: 0;

    }

    .dynamic-title {

        font-size: 2rem;

    }



    /* About */

    .about-container {

        flex-direction: column;

    }

    .about-visual-col {

        width: 100%;

    }



    /* Services grid – 2 columns on tablet */

    .services-grid {

        grid-template-columns: repeat(2, 1fr) !important;

    }



    /*

     * FLIP CARD FIX – TABLET

     * On a 2-col tablet grid the cards are narrower than on desktop and

     * the fixed height set in the main stylesheet may leave dead space or

     * clip text.  We let the grid rows equalise the height automatically

     * (align-items: stretch is the grid default) while each card's inner

     * structure fills 100% of that row height.

     */

    .services-grid {

        align-items: stretch;

    }

    .service-card {

        height: auto !important;

        /* min-height keeps very-short cards from looking tiny */

        min-height: 300px;

        display: flex;

        flex-direction: column;

    }

    .card-inner {

        flex: 1;

        /* card-inner must fill the service-card so the abs-positioned

           front/back faces cover it completely */

        height: 100%;

        min-height: inherit;

    }

    /* front & back are position:absolute – they must match card-inner */

    .card-front,

    .card-back {

        box-sizing: border-box;

        padding: 26px 22px;

        overflow: hidden;

    }

    .sc-name,

    .sc-desc,

    .cb-label,

    .cb-value {

        overflow-wrap: break-word;

        word-break: break-word;

    }



    /* News grid */

    .news-grid {

        grid-template-columns: repeat(2, 1fr) !important;

    }



    /* Manifests grid */

    .manifests-grid {

        grid-template-columns: repeat(2, 1fr) !important;

    }



    /* Featured events – disable scale that causes overflow */

    .featured-event {

        transform: scale(1);

    }

    .featured-event:hover {

        transform: scale(1.02) !important;

    }

}





/* =====================================================

   RESPONSIVE — MOBILE  (≤ 768px)

   ===================================================== */

@media (max-width: 768px) {



    /* ── ROOT FIX: the single most common cause of right-side décalage ── */

    html, body {

        overflow-x: hidden;

        width: 100%;

        position: relative;

    }



    /* ── Background decorative images: clip so they never cause scrollbar ── */

    .page-wrap [aria-hidden="true"] {

        overflow: hidden;

    }

    .page-wrap [aria-hidden="true"] img {

        max-width: 100vw !important;

        width: 100vw !important;

        left: 0 !important;

        right: 0 !important;

        opacity: 0.12 !important;

    }



    /* ── Hero Slider ── */

    .hero-slider {

        width: 100%;

        overflow: hidden;

    }

    .slide-content {

        padding: 16px;

        width: 100%;

    }

    .slide-title {

        font-size: 1.6rem !important;

        line-height: 1.3;

    }

    .slide-subtitle {

        font-size: 0.95rem !important;

    }

    .slide-badge {

        font-size: 0.75rem !important;

    }

    .slide-cta {

        padding: 10px 22px !important;

        font-size: 0.85rem !important;

    }

    .slider-arrow {

        width: 36px !important;

        height: 36px !important;

        font-size: 1.2rem !important;

    }



    /* ── About section ── */

    .about-section {

        padding: 40px 0;

    }

    .about-container {

        flex-direction: column;

        padding: 0 16px;

        gap: 24px;

    }

    .about-content,

    .about-visual-col {

        width: 100%;

        min-width: 0;

        display: block;

        visibility: visible;

        opacity: 1;

        overflow: visible;

        flex-shrink: 0;

        flex-basis: auto;

    }

    .about-content {

        order: 1;

    }

    .about-visual-col {

        order: 2;

    }

    .about-content h2 {

        font-size: 1.6rem !important;

    }

    .about-visual {

        width: 100%;

        display: block;

        min-height: 200px;

        overflow: hidden;

        border-radius: 12px;

    }

    .about-visual img {

        width: 100%;

        height: auto;

        display: block;

        min-height: 200px;

        object-fit: cover;

    }

    .about-stats {

        flex-direction: column;

        gap: 12px;

        display: flex;

        width: 100%;

    }

    .about-stat {

        width: 100%;

        display: flex;

        visibility: visible;

    }

    .about-pillars {

        grid-template-columns: 1fr 1fr !important;

        gap: 12px;

        display: grid;

        width: 100%;

    }

    .about-cta {

        display: inline-block;

        font-size: 0.9rem;

    }



    /* ── Services – FLIP CARD MOBILE FIX ──────────────────────────────

     *

     * Root cause of the dead space:

     * The desktop stylesheet uses perspective + rotateY on .card-inner

     * with .card-front / .card-back both position:absolute and a fixed

     * height on .service-card.  On mobile the content (icon + 2 lines +

     * badge) is shorter than that fixed height, so the absolutely-

     * positioned face floats inside a tall empty shell.

     *

     * Fix strategy – on mobile we:

     *   1. Disable the 3-D perspective and the flip transform entirely.

     *   2. Convert the card to a plain block where .card-inner,

     *      .card-front and .card-back are all in normal flow.

     *   3. Hide .card-back (users tap a CTA link anyway) so only the

     *      front face is visible and the card height == content height.

     *   4. Make all cards in the same grid row the same height using

     *      CSS Grid's default align-items:stretch together with

     *      .card-front { height:100% } and flexbox inside the face.

     * ────────────────────────────────────────────────────────────────── */



    /*.services-wrapper {

        overflow: hidden;

    }*/
    
    /* ==========================
   SERVICES BACKGROUND IMAGE
========================== */

.services-wrapper{
    position:relative;
    overflow:hidden;
}

.services-bg-image{
    position:absolute;
    inset:0;
    z-index:0;

    background-image:url("/build/assets/section_services.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

/* léger voile sombre */
.services-bg-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
}

.services-wrapper .section{
    position:relative;
    z-index:2;
}



    /* 1-col grid; stretch makes every card fill the tallest in its row */

    .services-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 16px !important;

        padding: 0 16px !important;

        align-items: stretch;

    }



    /* service-card: full width, height driven by content */

    .service-card {

        width: 100% !important;

        min-width: 0 !important;

        /* Let height grow with content – no fixed value */

        height: auto !important;

        min-height: 0 !important;

        display: flex;

        flex-direction: column;

        /* Kill the perspective container so faces are not transformed */

        perspective: none !important;

        cursor: pointer;

    }



    /* card-inner: remove flip transform and fixed height */

    .card-inner {

        position: relative !important;

        /* fill the service-card */

        flex: 1;

        height: auto !important;

        min-height: 0 !important;

        /* disable 3-D transform completely */

        transform: none !important;

        transform-style: flat !important;

        transition: none !important;

    }



    /* Disable hover flip on mobile */

    .service-card:hover .card-inner {

        transform: none !important;

    }



    /* card-front: switch from position:absolute to normal flow so it

       dictates the card's height; use flexbox to lay out its children

       vertically with no extra space */

    .card-front {

        position: relative !important;

        /* fill the card-inner width */

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        /* un-hide it (desktop may set backface-visibility:hidden) */

        backface-visibility: visible !important;

        -webkit-backface-visibility: visible !important;

        /* remove desktop rotation */

        transform: none !important;

        /* layout */

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: flex-start !important;

        padding: 24px 20px 20px !important;

        box-sizing: border-box;

        text-align: center;

        /* let the card-front itself carry the card's visual box-shadow /

           border-radius that was on service-card in desktop */

        overflow: visible;

    }



    /* card-back: completely hide it on mobile – the CTA inside the front

       face is enough */

    .card-back {

        display: none !important;

    }



    /* icon – tighten spacing */

    .sc-icon {

        font-size: 2.2rem;

        margin-bottom: 10px;

        line-height: 1;

        flex-shrink: 0;

    }



    /* service name */

    .sc-name {

        font-size: 1rem;

        font-weight: 700;

        line-height: 1.3;

        margin-bottom: 8px;

        width: 100%;

        overflow-wrap: break-word;

        word-break: break-word;

    }



    /* service description */

    .sc-desc {

        font-size: 0.88rem;

        line-height: 1.5;

        margin-bottom: 14px;

        width: 100%;

        overflow-wrap: break-word;

        word-break: break-word;

        /* allow the description to grow so the badge is pushed to

           the bottom and cards in the same row look equal */

        flex: 1;

    }



    /* badge – always at the bottom thanks to flex column layout */

    .service-card .badge {

        font-size: 0.75rem;

        padding: 5px 14px;

        white-space: nowrap;

        max-width: 100%;

        overflow: hidden;

        text-overflow: ellipsis;

        margin-top: auto;

        flex-shrink: 0;

        align-self: center;

    }



    .section-title {

        font-size: 1.6rem !important;

    }

    .section-sub {

        font-size: 0.95rem !important;

        padding: 0 16px;

    }



    /* ── News / Actualités ── */

    .news-section {

        padding: 40px 0;

    }

    .news-container {

        padding: 0 16px;

        width: 100%;

    }

    .news-header {

        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 12px;

    }

    .news-header h2 {

        font-size: 1.6rem !important;

    }

    .news-grid {

        grid-template-columns: 1fr !important;

        gap: 16px !important;

    }

    .news-card {

        width: 100%;

    }

    .news-card.featured {

        grid-column: span 1 !important;

    }

    .news-view-all {

        align-self: flex-start;

    }



    /* ── Map / Patrimoine ── */

    .hero-map {

        padding: 24px 16px;

        display: flex;

        flex-direction: column;

        gap: 16px;

        position: relative; /* Needed for absolute positioning of info-panel */

    }

    /* FIX: ensure hero-content is visible on mobile */

    .hero-map .hero-content {

        display: block !important;

        width: 100%;

        padding: 8px 0;

        text-align: center;

        /* ensure it's not hidden by any inherited styles */

        visibility: visible !important;

        opacity: 1 !important;

        position: relative !important;

        z-index: 2;

    }

    .hero-map .hero-content h1 {

        font-size: 1.6rem;

        margin-bottom: 8px;

    }

    .hero-map .hero-content p {

        font-size: 0.95rem;

        margin-bottom: 12px;

    }

    .hero-map .zoom-controls {

        position: relative;

        top: auto;

        right: auto;

        display: flex;

        justify-content: center;

        gap: 12px;

        margin-top: 8px;

    }

    .hero-map .zoom-btn {

        width: 40px;

        height: 40px;

        font-size: 1.2rem;

    }

    .map-wrapper {

        flex-direction: column;

        width: 100%;

        overflow: hidden;

    }

    #tunisia-map {

        width: 100% !important;

        min-width: 0 !important;

    }

    .locations-panel {

        width: 100% !important;

        min-width: 0 !important;

    }

    .map-legend-bar {

        flex-wrap: wrap;

        padding: 12px 16px;

        gap: 8px;

    }

    .legend-bar-items {

        flex-wrap: wrap;

        gap: 8px;

    }

    .legend-bar-divider {

        display: none;

    }

    .zoom-controls {

        top: 12px;

        right: 12px;

    }

    /* ── FIX: Info panel should appear beside the map (like desktop) ── */

    .info-panel {

        position: absolute !important;

        top: 50% !important;

        left: auto !important;

        right: 16px !important;

        transform: translateY(-50%) !important;

        width: 280px !important;

        max-width: 80% !important;

        height: auto !important;

        max-height: 80% !important;

        bottom: auto !important;

        border-radius: 16px !important;

        box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;

        z-index: 20 !important;

        background: #fff !important;

        overflow-y: auto;

        padding: 16px;

        display: block; /* will be shown/hidden via JS */

        /* Remove the bottom sheet styles */

        left: 0 !important;

        right: 0 !important;

        bottom: 0 !important;

        border-radius: 16px 16px 0 0;

        /* Override to right side */

        left: auto !important;

        right: 16px !important;

        bottom: auto !important;

        border-radius: 16px !important;

    }

    /* Adjust info image and content for mobile side panel */

    .info-panel .info-image {

        width: 100%;

        height: auto;

        border-radius: 12px;

        overflow: hidden;

        margin-bottom: 12px;

    }

    .info-panel .info-image img {

        width: 100%;

        height: auto;

        object-fit: cover;

    }

    .info-panel .info-back-btn {

        position: absolute;

        top: 8px;

        right: 8px;

        background: rgba(0,0,0,0.5);

        color: #fff;

        border: none;

        border-radius: 50%;

        width: 32px;

        height: 32px;

        font-size: 18px;

        cursor: pointer;

        z-index: 5;

    }

    .info-panel .info-content {

        padding: 0;

    }

    .info-panel .info-title {

        font-size: 1.2rem;

        margin-bottom: 4px;

    }

    .info-panel .info-category {

        font-size: 0.75rem;

        color: #888;

        text-transform: uppercase;

        letter-spacing: 0.5px;

        margin-bottom: 8px;

    }

    .info-panel .info-description {

        font-size: 0.9rem;

        line-height: 1.5;

        color: #444;

    }

    .info-panel .info-btn {

        display: inline-block;

        margin-top: 12px;

        padding: 8px 20px;

        background: var(--primary-gold);

        color: #fff;

        border: none;

        border-radius: 30px;

        font-weight: 600;

        cursor: pointer;

    }



    /* ── Diversité Culturelle ── */

    .diversite-section {

        padding: 40px 0;

        overflow-x: hidden;

        overflow-y: visible;

    }



    .diversite-inner {

        padding: 0 16px;

        width: 100%;

        overflow: visible;

    }



    .diversite-title {

        font-size: 1.6rem !important;

    }



    .diversite-tabs {

        display: flex;

        flex-wrap: wrap;

        gap: 8px;

        width: 100%;

        overflow: visible;

        padding-bottom: 6px;

        justify-content: flex-start;

        overflow-x: visible;

        -webkit-overflow-scrolling: auto;

        scrollbar-width: auto;

        padding-right: 0;

    }

    .diversite-tabs::-webkit-scrollbar {

        display: none;

    }



    .div-tab {

        font-size: 0.8rem !important;

        padding: 6px 14px !important;

        white-space: nowrap;

        flex-shrink: 0;

        margin-bottom: 4px;

    }



    .diversite-slider-wrap {

        width: 100%;

        overflow: hidden;

    }

    .diversite-viewport {

        width: 100%;

        overflow: hidden;

    }

    .diversite-track {

        width: 100%;

    }

    .div-slide-group {

        display: grid;

        grid-template-columns: 1fr !important;

        gap: 16px;

        width: 100%;

    }

    .div-card {

        width: 100% !important;

        min-width: 0 !important;

        transform: none !important;

    }

    .div-card:hover {

        transform: translateY(-4px) !important;

    }

    .div-arrow {

        display: none !important;

    }



    /* ── Agenda / Manifestations ── */

    .manifests-section {

        padding: 40px 0;

    }

    .manifests-inner {

        padding: 0 16px;

        width: 100%;

    }

    .manifests-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 16px !important;

        width: 100%;

    }

    .manifests-grid .div-card {

        width: 100% !important;

        min-width: 0 !important;

        transform: none !important;

    }

    .manifests-grid .featured-event {

        transform: none !important;

    }

    .manifests-grid .featured-event:hover {

        transform: translateY(-3px) !important;

    }

    .manifests-grid .expired-event:hover {

        transform: translateY(-3px) !important;

    }

    #manifests-show-more {

        font-size: 13px !important;

        padding: 10px 20px !important;

    }



    /* ── Featured / Expired badges mobile ── */

    .featured-badge {

        top: 8px;

        right: 8px;

        padding: 3px 10px 3px 8px;

        font-size: 10px;

    }

    .featured-star {

        font-size: 12px;

    }

    .featured-text {

        font-size: 9px;

    }

    [dir="rtl"] .featured-badge {

        right: auto;

        left: 8px;

        padding: 3px 8px 3px 10px;

    }

    .expired-badge {

        top: 8px;

        right: 8px;

        padding: 3px 10px 3px 8px;

        font-size: 10px;

    }

    .expired-icon {

        font-size: 12px;

    }

    .expired-text {

        font-size: 9px;

    }

    .expired-event {

        transform: scale(1);

    }

    .expired-event:hover {

        transform: scale(1.02) !important;

    }

    [dir="rtl"] .expired-badge {

        right: auto;

        left: 8px;

        padding: 3px 8px 3px 10px;

    }



    /* ── Sponsors ── */

    .sponsors-section {

        padding: 40px 0;

        overflow: visible;

    }

    .sponsors-inner {

        padding: 0 16px;

        width: 100%;

        overflow: visible;

    }

    .sponsors-header h2 {

        font-size: 1.6rem !important;

    }

    .sponsors-track {

        display: flex;

        flex-wrap: nowrap;

        flex-direction: row;

        gap: 16px;

        justify-content: flex-start;

        width: 100%;

        overflow-x: auto;

        overflow-y: visible;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

        padding-bottom: 8px;

        padding-right: 16px;

    }

    .sponsors-track::-webkit-scrollbar {

        display: none;

    }

    .sponsor-item {

        flex: 0 0 auto !important;

        width: 120px !important;

        min-width: 100px !important;

    }

    .sponsor-item img {

        max-width: 100%;

        height: auto;

    }



    /* ── CTA Band ── */

    .cta-band {

        flex-direction: column !important;

        text-align: center;

        padding: 32px 16px !important;

        gap: 20px;
        background: linear-gradient(rgba(255, 255, 255, 0.71), rgba(255, 255, 255, 0.71)), url('../images/news_section.png') center center/cover no-repeat;

    }

    .cta-band-text h2 {

        font-size: 1.4rem !important;

    }

    .cta-band-text p {

        font-size: 0.95rem !important;

    }

    .cta-band-actions {

        width: 100%;

        display: flex;

        justify-content: center;

    }


.cta-band > *{
    position: relative;
    z-index: 2;
}






.cta-band-text h2 {
    font-size: 1.4rem !important;
}

.cta-band-text p {
    font-size: 0.95rem !important;
}

.cta-band-actions {
    width: 100%;
    display: flex;
    justify-content: center;
}








    /* ── Dynamic section mobile ── */

    .dynamic-section {

        padding: 50px 0;

    }

    .dynamic-container {

        padding: 0 16px;

    }

    .dynamic-title {

        font-size: 1.8rem;

    }

    .dynamic-text {

        font-size: 1rem;

        text-align: left;

    }

    .dynamic-btn {

        padding: 12px 28px;

        font-size: 0.9rem;

    }

    .dynamic-stat {

        padding: 12px 20px;

        min-width: 100px;

    }

    .dynamic-stat-value {

        font-size: 22px;

    }

    .dynamic-col-text,

    .dynamic-col-media {

        min-width: 0;

        width: 100%;

    }



    /* ── Section spy nav – hide on mobile ── */

    .section-spy-nav {

        display: none !important;

    }



    /* ── Eyebrow / shared elements ── */

    .about-eyebrow {

        flex-wrap: wrap;

    }

    .about-eyebrow-text,

    .news-eyebrow-text {

        font-size: 0.8rem !important;

    }



    /* ── Info panel (map) - already fixed above ── */



    /* ── Map legend bar separators ── */

    .map-legend-bar-seperate {

        margin: 0 !important;

        width: 100%;

    }

}





/* =====================================================

   RESPONSIVE — SMALL MOBILE  (≤ 480px)

   ===================================================== */

@media (max-width: 480px) {



    /* Slide content */

    .slide-title {

        font-size: 1.3rem !important;

    }

    .slide-subtitle {

        font-size: 0.85rem !important;

    }



    /* Dynamic stats */

    .dynamic-stats {

        gap: 12px;

    }

    .dynamic-stat {

        padding: 10px 15px;

        min-width: 0;

        width: calc(50% - 6px);

    }

    .dynamic-stat-value {

        font-size: 18px;

    }

    .dynamic-stat-label {

        font-size: 10px;

    }



    /* Featured / expired badges */

    .featured-badge,

    .expired-badge {

        padding: 2px 8px 2px 6px;

        font-size: 9px;

    }

    .featured-star,

    .expired-icon {

        font-size: 10px;

    }

    .featured-text,

    .expired-text {

        font-size: 8px;

    }



    /* Sponsors – keep horizontal scroll on tiny screens */

    .sponsor-item {

        width: 100px !important;

        min-width: 80px !important;

    }



    /*

     * FIX: Tabs on small mobile – retain the wrapping approach.

     * No horizontal scroll; they wrap naturally.

     */

    .diversite-tabs {

        overflow: visible;

        overflow-y: visible;

        flex-wrap: wrap;

        -webkit-overflow-scrolling: auto;

        scrollbar-width: auto;

        padding-bottom: 6px;

        justify-content: flex-start;

        padding-right: 0;

    }

    .diversite-tabs::-webkit-scrollbar {

        display: none;

    }



    /* About pillars – single column on tiny screens */

    .about-pillars {

        grid-template-columns: 1fr !important;

    }



    /* About visual – ensure image still shows on smallest screens */

    .about-visual {

        min-height: 180px;

        border-radius: 10px;

    }

    .about-visual img {

        min-height: 180px;

    }



    /* Services grid – already 1 col, ensure no overflow */

    .services-grid {

        padding: 0 12px !important;

    }



    /* Slightly tighter card padding on very small screens */

    .card-front {

        padding: 20px 16px 18px !important;

    }

    .sc-icon {

        font-size: 2rem;

    }

    .sc-name {

        font-size: 0.95rem;

    }

    .sc-desc {

        font-size: 0.84rem;

    }

    .service-card .badge {

        font-size: 0.72rem;

        padding: 4px 12px;

    }



    /* Inner containers */

    .news-container,

    .manifests-inner,

    .diversite-inner,

    .sponsors-inner {

        padding: 0 12px;

    }



    /* CTA band */

    .cta-band {

        padding: 24px 12px !important;

    }

    .cta-band-text h2 {

        font-size: 1.2rem !important;

    }



    /* Agenda show-more button */

    #manifests-show-more {

        font-size: 12px !important;

        padding: 8px 16px !important;

    }

}