@charset "utf-8";

/*  ROOT =======================================================================
    ========================================================================= */

    :root {

        font-size:                  16px;

        /* customs fonts */
        --font-title:               'Barlow';
        --font-navigation:          'Barlow';
        --font-button:              'Barlow';
        --font-content:             'Barlow';
        --font-script:              'Pangolin';
        --font-monospaced:          'monospace';
        --font-icon:                'Material Symbols Outlined';
        --font-icon-variation:      'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;

        /* customs colors */
        --first-color:              #F04E23;
        --second-color:             #F7A9B4;
        --third-color:              #B93219;
        --fourth-color:             #F7F4D5;
        --fifth-color:              #87962D;
        --sixth-color:              #4A7AB5;
        --black-color:              #000;
        --white-color:              #fff;

        /* logo colors */
        --paloma-color:             #ea503f;
        --nimes-metropole-color:    #27337b;
        --deezer-color:             #a238ff;
        --facebook-color:           #0766ff;
        --instagram-color:          #262626;
        --pinterest-color:          #e71c26;
        --soundcloud-color:         #f50;
        --spotify-color:            #1ed760;
        --tiktok-blue-color:        #25f4ee;
        --tiktok-red-color:         #fe2c55;
        --youtube-dark-grey-color:  #212121;
        --youtube-red-color:        #f03;

        /* datetime separators */
        --event-date-separator:     ' - ';
        --event-time-separator:     ' — ';
        --event-datetime-separator: ' • ';


        /* typography */

        /* font weight */
        --weight-thin:              100;
        --weight-extralight:        200;
        --weight-light:             300;
        --weight-regular:           400;
        --weight-medium:            500;
        --weight-semibold:          600;
        --weight-bold:              700;
        --weight-extrabold:         800;
        --weight-black:             900;

        /* content line height */
        --line-height-flat:         1;      /* UI compact, boutons, labels */
        --line-height-tight:        1.1;    /* titres compacts */
        --line-height-snug:         1.2;    /* sous-titres */
        --line-height-normal:       1.4;    /* corps de texte */
        --line-height-medium:       1.5;    /* corps de texte aéré */
        --line-height-relaxed:      1.6;    /* lecture longue */
        --line-height-loose:        2.0;    /* espacé */

        /* font size */
        --size-xxxsmall:            0.65rem;
        --size-xxsmall:             0.75rem;
        --size-xsmall:              0.875rem;
        --size-small:               0.9rem;
        --size-normal:              1.0rem;
        --size-large:               1.15rem;
        --size-xlarge:              1.25rem;
        --size-xxlarge:             1.8rem;
        --size-xxxlarge:            2.5rem;

        /* title size */
        --title-size-xxxsmall:      0.65rem;
        --title-size-xxsmall:       0.75rem;
        --title-size-xsmall:        0.875rem;
        --title-size-small:         0.9rem;
        --title-size-normal:        1.0rem;
        --title-size-large:         1.15rem;
        --title-size-xlarge:        1.5rem;
        --title-size-xxlarge:       1.8rem;
        --title-size-xxxlarge:      2.5rem;

        /* icon size */
        --icon-size-xxxsmall:       0.9rem;
        --icon-size-xxsmall:        1.0rem;
        --icon-size-xsmall:         1.125rem;
        --icon-size-small:          1.25rem;
        --icon-size-normal:         1.375rem;
        --icon-size-large:          1.5rem;
        --icon-size-xlarge:         1.75rem;
        --icon-size-xxlarge:        2.25rem;
        --icon-size-xxxlarge:       3.25rem;

        /* gap */
        --gap-none:                 0;
        --gap-xxxsmall:             2px;
        --gap-xxsmall:              4px;
        --gap-xsmall:               6px;
        --gap-small:                8px;
        --gap-normal:               10px;
        --gap-large:                15px;
        --gap-xlarge:               20px;
        --gap-xxlarge:              28px;
        --gap-xxxlarge:             40px;

        /* grey colors */
        --grey5-color:              #0d0d0d;
        --grey7-color:              #111;
        --grey10-color:             #1a1a1a;
        --grey12-color:             #1e1e1e;
        --grey13-color:             #222;
        --grey15-color:             #262626;
        --grey20-color:             #333;
        --grey27-color:             #444;
        --grey30-color:             #4d4d4d;
        --grey33-color:             #555;
        --grey35-color:             #5a5a5a;
        --grey40-color:             #666;
        --grey46-color:             #777;
        --grey50-color:             #7f7f7f;
        --grey53-color:             #888;
        --grey55-color:             #8d8d8d;
        --grey60-color:             #999;
        --grey65-color:             #aaa;
        --grey70-color:             #b3b3b3;
        --grey73-color:             #bbb;
        --grey80-color:             #ccc;
        --grey86-color:             #ddd;
        --grey90-color:             #e5e5e5;
        --grey93-color:             #eee;

        /* shade primary colors */
        --primary-a0-color:         color-mix(in srgb, var(--first-color)   5%, transparent);
        --primary-a5-color:         color-mix(in srgb, var(--first-color)   5%, transparent);
        --primary-a6-color:         color-mix(in srgb, var(--first-color)   6%, transparent);
        --primary-a7-color:         color-mix(in srgb, var(--first-color)   7%, transparent);
        --primary-a8-color:         color-mix(in srgb, var(--first-color)   8%, transparent);
        --primary-a9-color:         color-mix(in srgb, var(--first-color)   9%, transparent);
        --primary-a10-color:        color-mix(in srgb, var(--first-color)  10%, transparent);
        --primary-a15-color:        color-mix(in srgb, var(--first-color)  15%, transparent);
        --primary-a20-color:        color-mix(in srgb, var(--first-color)  20%, transparent);
        --primary-a30-color:        color-mix(in srgb, var(--first-color)  30%, transparent);
        --primary-a40-color:        color-mix(in srgb, var(--first-color)  40%, transparent);
        --primary-a50-color:        color-mix(in srgb, var(--first-color)  50%, transparent);
        --primary-a60-color:        color-mix(in srgb, var(--first-color)  60%, transparent);
        --primary-a70-color:        color-mix(in srgb, var(--first-color)  70%, transparent);
        --primary-a80-color:        color-mix(in srgb, var(--first-color)  80%, transparent);
        --primary-a85-color:        color-mix(in srgb, var(--first-color)  85%, transparent);
        --primary-a90-color:        color-mix(in srgb, var(--first-color)  90%, transparent);
        --primary-a95-color:        color-mix(in srgb, var(--first-color)  95%, transparent);
        --primary-a100-color:       color-mix(in srgb, var(--first-color) 100%, transparent);

        /* shade black colors */
        --black-a0-color:           color-mix(in srgb, var(--black-color)   0%, transparent);
        --black-a5-color:           color-mix(in srgb, var(--black-color)   5%, transparent);
        --black-a6-color:           color-mix(in srgb, var(--black-color)   6%, transparent);
        --black-a7-color:           color-mix(in srgb, var(--black-color)   7%, transparent);
        --black-a8-color:           color-mix(in srgb, var(--black-color)   8%, transparent);
        --black-a9-color:           color-mix(in srgb, var(--black-color)   9%, transparent);
        --black-a10-color:          color-mix(in srgb, var(--black-color)  10%, transparent);
        --black-a15-color:          color-mix(in srgb, var(--black-color)  15%, transparent);
        --black-a20-color:          color-mix(in srgb, var(--black-color)  20%, transparent);
        --black-a30-color:          color-mix(in srgb, var(--black-color)  30%, transparent);
        --black-a40-color:          color-mix(in srgb, var(--black-color)  40%, transparent);
        --black-a50-color:          color-mix(in srgb, var(--black-color)  50%, transparent);
        --black-a60-color:          color-mix(in srgb, var(--black-color)  60%, transparent);
        --black-a70-color:          color-mix(in srgb, var(--black-color)  70%, transparent);
        --black-a80-color:          color-mix(in srgb, var(--black-color)  80%, transparent);
        --black-a85-color:          color-mix(in srgb, var(--black-color)  85%, transparent);
        --black-a90-color:          color-mix(in srgb, var(--black-color)  90%, transparent);
        --black-a95-color:          color-mix(in srgb, var(--black-color)  95%, transparent);
        --black-a100-color:         color-mix(in srgb, var(--black-color) 100%, transparent);

        /* shade white colors */
        --white-a0-color:           color-mix(in srgb, var(--white-color)   0%, transparent);
        --white-a5-color:           color-mix(in srgb, var(--white-color)   5%, transparent);
        --white-a6-color:           color-mix(in srgb, var(--white-color)   6%, transparent);
        --white-a7-color:           color-mix(in srgb, var(--white-color)   7%, transparent);
        --white-a8-color:           color-mix(in srgb, var(--white-color)   8%, transparent);
        --white-a9-color:           color-mix(in srgb, var(--white-color)   9%, transparent);
        --white-a10-color:          color-mix(in srgb, var(--white-color)  10%, transparent);
        --white-a15-color:          color-mix(in srgb, var(--white-color)  15%, transparent);
        --white-a20-color:          color-mix(in srgb, var(--white-color)  20%, transparent);
        --white-a25-color:          color-mix(in srgb, var(--white-color)  25%, transparent);
        --white-a30-color:          color-mix(in srgb, var(--white-color)  30%, transparent);
        --white-a40-color:          color-mix(in srgb, var(--white-color)  40%, transparent);
        --white-a50-color:          color-mix(in srgb, var(--white-color)  50%, transparent);
        --white-a60-color:          color-mix(in srgb, var(--white-color)  60%, transparent);
        --white-a70-color:          color-mix(in srgb, var(--white-color)  70%, transparent);
        --white-a80-color:          color-mix(in srgb, var(--white-color)  80%, transparent);
        --white-a85-color:          color-mix(in srgb, var(--white-color)  85%, transparent);
        --white-a90-color:          color-mix(in srgb, var(--white-color)  90%, transparent);
        --white-a95-color:          color-mix(in srgb, var(--white-color)  95%, transparent);
        --white-a100-color:         color-mix(in srgb, var(--white-color) 100%, transparent);

        /* shade grey colors */
        --grey5-a20-color:          color-mix(in srgb, var(--grey5-color)  20%, transparent);
        --grey15-a70-color:         color-mix(in srgb, var(--grey15-color) 70%, transparent);
        --grey20-a70-color:         color-mix(in srgb, var(--grey20-color) 70%, transparent);
        --grey80-a50-color:         color-mix(in srgb, var(--grey80-color) 50%, transparent);

        /* --- gradient effects --- */
        --event-artist-grad:        linear-gradient(0deg,   var(--black-a100-color),  var(--black-a0-color));
        --program-item-grad:        linear-gradient(0deg,   var(--black-color),       var(--grey30-color));
        --tag-pill-grad:            linear-gradient(0deg,   var(--black-a40-color),   var(--black-a50-color));
        --program-fav-grad:         linear-gradient(135deg, var(--black-a10-color),   var(--black-a70-color));
        --program-fav-active-grad:  linear-gradient(135deg, var(--primary-a30-color), var(--primary-a90-color));
        --action-bar-grad:          linear-gradient(225deg, var(--black-a30-color),   var(--black-a90-color));
        --action-bar-active-grad:   linear-gradient(225deg, var(--primary-a30-color), var(--primary-a90-color));
        --sidebar-separator-grad:   linear-gradient(180deg, var(--white-color),       var(--first-color));
        --timeline-item-grad:       linear-gradient(0deg,   var(--grey50-color),      var(--grey30-color));

        /* --- shadows effects --- */
        --text-shadow:                  0 2px 10px var(--black-a80-color);

        /* head */
        --head-color:                   var(--white-color);
        --head-fill:                    none;

        /* content */
        --content-color:                var(--white-color);
        --content-fill:                 var(--black-color);

        /* action bar */
        --action-bar-text:              var(--white-color);
        --action-bar-fill:              var(--first-color);

        /* control bar */
        --control-bar-color:            var(--content-color);
        --control-bar-fill:             var(--grey5-a20-color);

        /* drawer */
        --drawer-text:                  var(--black-color);
        --drawer-fill:                  var(--white-color);

        /* favorite */
        --filter-bar-favorite-color:    var(--black-color);
        --filter-bar-favorite-fill:     var(--third-color);

        /* tag session */
        --tag-pill-session-color:       var(--white-color);
        --tag-pill-session-fill:        var(--white-a15-color);
        --filter-bar-session-color:     var(--white-color);
        --filter-bar-session-fill:      var(--third-color);

        /* tag mood */
        --tag-pill-mood-color:          var(--white-color);
        --tag-pill-mood-fill:           var(--white-a20-color);
        --filter-bar-mood-color:        var(--white-color);
        --filter-bar-mood-fill:         var(--third-color);

        /* tag genre */
        --tag-pill-genre-color:         var(--white-color);
        --tag-pill-genre-fill:          var(--white-a20-color);
        --filter-bar-genre-color:       var(--black-color);
        --filter-bar-genre-fill:        var(--third-color);

        /* tag place */
        --tag-pill-place-color:         var(--white-color);
        --tag-pill-place-fill:          var(--white-a20-color);
        --filter-bar-place-color:       var(--white-color);
        --filter-bar-place-fill:        var(--third-color);

        /* tag country */
        --tag-pill-country-color:       var(--white-color);
        --tag-pill-country-fill:        var(--white-a20-color);
        --filter-bar-country-color:     var(--white-color);
        --filter-bar-country-fill:      var(--third-color);

        /* tag active */
        --tag-pill-session-active-color: var(--white-color);
        --tag-pill-session-active-fill:  var(--first-color);

        /* tag */
        --tag-pill-color:               var(--white-color);
        --tag-pill-fill:                var(--white-a20-color);
        --tag-pill-active-color:        var(--black-color);
        --tag-pill-active-fill:         var(--grey80-color);
        --filter-bar-tag-color:         var(--black-color);
        --filter-bar-tag-fill:          var(--grey80-color);

        /* social */
        --tag-pill-social-color:        var(--content-color);
        --tag-pill-social-fill:         var(--first-color);

        /* toast */
        --toast-color:                  var(--content-color);
        --toast-fill:                   var(--third-color);

        /* ticket */
        --full-pass-ticket-color:       var(--third-color);
        --day-pass-ticket-1-color:      var(--fifth-color);
        --day-pass-ticket-2-color:      var(--first-color);

        /* event status */
        --status-canceled-color:        var(--white-color);
        --status-canceled-fill:         var(--first-color);
        --status-moved-online-color:    var(--white-color);
        --status-moved-online-fill:     var(--first-color);
        --status-postponed-color:       var(--white-color);
        --status-postponed-fill:        var(--first-color);
        --status-rescheduled-color:     var(--white-color);
        --status-rescheduled-fill:      var(--first-color);
        --status-scheduled-color:       var(--white-color);
        --status-scheduled-fill:        var(--first-color);

        /* tooltips */
        --tooltips-color:               var(--black-color);
        --tooltips-fill:                var(--fourth-color);

        --sticky-session-separator-color: var(--grey20-color);

        /* sidebar */
        --sidebar-title-color:          var(--black-color);
        --sidebar-title-fill:           none;
        --sidebar-datetime-color:       var(--grey20-color);
        --sidebar-datetime-fill:        none;
        --sidebar-date-color:           var(--grey20-color);
        --sidebar-date-fill:            none;
        --sidebar-time-color:           var(--first-color);
        --sidebar-time-fill:            none;
        --sidebar-place-color:          var(--grey50-color);
        --sidebar-place-fill:           none;
        --sidebar-tag-color:            var(--grey20-color);
        --sidebar-tag-fill:             var(--grey90-color);
        --sidebar-tag-hover-color:      var(--grey20-color);
        --sidebar-tag-hover-fill:       var(--grey90-color);
        --sidebar-tag-active-color:     var(--grey20-color);
        --sidebar-tag-active-fill:      var(--grey90-color);
        --sidebar-icon-color:           var(--grey60-color);
        --sidebar-icon-fill:            none;


        /* safe-area */
        --sat:                          env(safe-area-inset-top);
        --sab:                          env(safe-area-inset-bottom);
        --sal:                          env(safe-area-inset-left);
        --sar:                          env(safe-area-inset-right);

        /* header */
        --header-height:                55px;
        --visible-header-height:        calc(var(--header-height) + var(--sat));
    }

    /* --- RESPONSIVE --- */

    @media (min-width: 640px) {
        :root {
            --header-height:        65px;
        }
    }

    @media (min-width: 1024px) {
        :root {
            --header-height:        75px;
        }
    }

    @media (min-width: 1280px) {
        :root {
            --header-height:        75px;
        }
    }


/*  ALL ========================================================================
    ========================================================================= */

    * {
        box-sizing:                 border-box;
        margin:                     0;
        padding:                    0;
    }


/*  SELECTION ==================================================================
    ========================================================================= */

    ::-moz-selection {
        color:                      var(--white-color);
        background:                 var(--first-color);
    }

    ::selection {
        color:                      var(--white-color);
        background-color:           var(--first-color);
    }

    .no-select {
        user-select:                none;
        -webkit-user-select:        none;
        -ms-user-select:            none;
    }


/*  SVG COLORS SPRITES =========================================================
    ========================================================================= */

    .svg-logo-tinals-2026,
    .svg-tag-tinals-2026,
    .svg-logo-tinals-2018,
    .svg-logo-tinals-2018-2-lines,
    .svg-logo-tinals-2018-4-lines,
    .svg-logo-tinals-2017,
    .svg-logo-tinals-2016,

    .svg-logo-paloma-2022,
    .svg-logo-paloma-2018,
    .svg-logo-paloma-2018-text,
    .svg-logo-paloma-2018-valparess,
    .svg-logo-paloma-2012,
    .svg-logo-paloma-2012-head,
    .svg-logo-nimes-metropole,
    .svg-logo-come-on-people,
    .svg-logo-come-on-people-baseline {
        fill:                       var(--black-color);
    }

    .svg-logo-tinals-2026.svg-dark-mode,
    .svg-tag-tinals-2026.svg-dark-mode,
    .svg-logo-tinals-2018.svg-dark-mode,
    .svg-logo-tinals-2018-2-lines.svg-dark-mode,
    .svg-logo-tinals-2018-4-lines.svg-dark-mode,
    .svg-logo-tinals-2017.svg-dark-mode,
    .svg-logo-tinals-2016.svg-dark-mode,

    .svg-logo-paloma-2022.svg-dark-mode,
    .svg-logo-paloma-2018.svg-dark-mode,
    .svg-logo-paloma-2018-text.svg-dark-mode,
    .svg-logo-paloma-2018-valparess.svg-dark-mode,
    .svg-logo-paloma-2012.svg-dark-mode,
    .svg-logo-paloma-2012-head.svg-dark-mode,
    .svg-logo-nimes-metropole.svg-dark-mode,
    .svg-logo-come-on-people.svg-dark-mode,
    .svg-logo-come-on-people-baseline.svg-dark-mode {
        fill:                       var(--white-color);
    }

    .svg-logo-tinals-2026.svg-primary,
    .svg-tag-tinals-2026.svg-primary,
    .svg-logo-tinals-2018.svg-primary,
    .svg-logo-tinals-2018-2-lines.svg-primary,
    .svg-logo-tinals-2018-4-lines.svg-primary,
    .svg-logo-tinals-2017.svg-primary,
    .svg-logo-tinals-2016.svg-primary,

    .svg-logo-paloma-2022.svg-primary,
    .svg-logo-paloma-2018.svg-primary,
    .svg-logo-paloma-2018-text.svg-primary,
    .svg-logo-paloma-2018-valparess.svg-primary,
    .svg-logo-paloma-2012.svg-primary,
    .svg-logo-paloma-2012-head.svg-primary,
    .svg-logo-nimes-metropole.svg-primary,
    .svg-logo-come-on-people.svg-primary,
    .svg-logo-come-on-people-baseline.svg-primary {
        fill:                       var(--first-color);
    }

    .svg-deezer,
    .svg-deezer-icon {
        fill:                       var(--black-color);
    }
    .svg-deezer.svg-dark-mode,
    .svg-deezer-icon.svg-dark-mode {
        fill:                       var(--white-color);
    }

    .svg-facebook,
    .svg-facebook-icon,
    .svg-facebook.svg-dark-mode,
    .svg-facebook-icon.svg-dark-mode {
        fill:                       var(--facebook-color);
    }

    .svg-instagram,
    .svg-instagram-icon {
        fill:                       var(--instagram-color);
    }

    .svg-instagram.svg-dark-mode,
    .svg-instagram-icon.svg-dark-mode {
        fill:                       var(--white-color);
    }

    .svg-pinterest-icon,
    .svg-pinterest-icon.svg-dark-mode {
        fill:                       var(--pinterest-color);
    }

    .svg-soundcloud-icon,
    .svg-soundcloud-icon.svg-dark-mode {
        fill:                       var(--soundcloud-color);
    }

    .svg-spotify,
    .svg-spotify-icon,
    .svg-spotify.svg-dark-mode,
    .svg-spotify-icon.svg-dark-mode {
        fill:                       var(--spotify-color);
    }

    .svg-tiktok,
    .svg-tiktok-icon {
        fill:                       var(--black-color);
    }
    .svg-tiktok.svg-dark-mode,
    .svg-tiktok-icon.svg-dark-mode {
        fill:                       var(--white-color);
    }

    .svg-youtube,
    .svg-youtube-icon {
        fill:                       var(--youtube-dark-grey-color);
    }
    .svg-youtube.svg-dark-mode,
    .svg-youtube-icon.svg-dark-mode {
        fill:                       var(--white-color);
    }

    /* --- SVG ICONS --- */

    .svg-icon {
        fill:                       currentColor;
        width:                      100%;
        height:                     100%;
        display:                    inline-block;
    }

    .flag-icon {
        vertical-align:             middle;
        width:                      2.0em;
        height:                     auto;
        display:                    inline-block;
    }


/*  ICON GOOGLE MATERIAL SYMBOLS ===============================================
    ========================================================================= */

    [class*="icon-ms-"] {
        color:                      inherit;
        font-size:                  var(--icon-size-large);
        justify-content:            center;
        display:                    inline-flex;
        align-items:                center;
    }

    [class*="icon-ms-"]::before {
        color:                      inherit;
        font-family:                var(--font-icon);
        font-size:                  inherit;
        font-style:                 normal;
        font-weight:                normal;
        font-variation-settings:    var(--font-icon-variation);
        letter-spacing:             normal;
        line-height:                var(--line-height-flat);
        text-transform:             none;
        -webkit-font-smoothing:     antialiased;
        white-space:                nowrap;
        display:                    inline-block;
        word-wrap:                  normal;
        direction:                  ltr;
    }

    .icon-ms-apk-install::before                { content: 'apk_install'; }
    .icon-ms-bookmark::before                   { content: 'bookmark'; }
    .icon-ms-bug-report::before                 { content: 'bug_report'; }
    .icon-ms-cached::before                     { content: 'cached'; }
    .icon-ms-calendar::before                   { content: 'view_agenda'; }
    .icon-ms-calendar-today::before             { content: 'calendar_today'; }
    .icon-ms-calendar-month::before             { content: 'calendar_month'; }
    .icon-ms-calendar-month2::before            { content: 'calendar_view_month'; }
    .icon-ms-calendar-week::before              { content: 'view_week'; }
    .icon-ms-cancel::before                     { content: 'cancel'; }
    .icon-ms-close::before                      { content: 'close'; }
    .icon-ms-confirmation-number::before        { content: 'confirmation_number'; }
    .icon-ms-dark-mode::before                  { content: 'dark_mode'; }
    .icon-ms-delete::before                     { content: 'delete'; }
    .icon-ms-download::before                   { content: 'download'; }
    .icon-ms-email::before                      { content: 'email'; }
    .icon-ms-error-outline::before              { content: 'error_outline'; }
    .icon-ms-event-list::before                 { content: 'event_list'; }
    .icon-ms-event-note::before                 { content: 'event_note'; }
    .icon-ms-expand-less::before                { content: 'expand_less'; }
    .icon-ms-expand-circle-up::before           { content: 'expand_circle_up'; }
    .icon-ms-expand-more::before                { content: 'expand_more'; }
    .icon-ms-family-group::before               { content: 'family_group'; }
    .icon-ms-family-home::before                { content: 'family_home'; }
    .icon-ms-favorite::before                   { content: 'favorite'; }
    .icon-ms-heart-check::before                { content: 'heart_check'; }
    .icon-ms-help::before                       { content: 'help'; }
    .icon-ms-home::before                       { content: 'home'; }
    .icon-ms-home-app-logo::before              { content: 'home_app_logo'; }
    .icon-ms-hotel::before                      { content: 'hotel'; }
    .icon-ms-info::before                       { content: 'info'; }
    .icon-ms-keyboard-arrow-down::before        { content: 'keyboard_arrow_down'; }
    .icon-ms-keyboard-arrow-up::before          { content: 'keyboard_arrow_up'; }
    .icon-ms-keyboard-double-arrow-down::before { content: 'keyboard_double_arrow_down'; }
    .icon-ms-keyboard-double-arrow-up::before   { content: 'keyboard_double_arrow_up'; }
    .icon-ms-language::before                   { content: 'language'; }
    .icon-ms-light-mode::before                 { content: 'light_mode'; }
    .icon-ms-link::before                       { content: 'link'; }
    .icon-ms-map::before                        { content: 'map'; }
    .icon-ms-menu::before                       { content: 'menu'; }
    .icon-ms-more-horiz::before                 { content: 'more_horiz'; }
    .icon-ms-music-note::before                 { content: 'music_note'; }
    .icon-ms-open-in-new::before                { content: 'open_in_new'; }
    .icon-ms-pause::before                      { content: 'pause'; }
    .icon-ms-person::before                     { content: 'person'; }
    .icon-ms-phonelink-erase::before            { content: 'phonelink_erase'; }
    .icon-ms-place::before                      { content: 'place'; }
    .icon-ms-play-arrow::before                 { content: 'play_arrow'; }
    .icon-ms-play-circle::before                { content: 'play_circle'; }
    .icon-ms-play-pause::before                 { content: 'play_pause'; }
    .icon-ms-playlist-play::before              { content: 'playlist_play'; }
    .icon-ms-public::before                     { content: 'public'; }
    .icon-ms-queue-music::before                { content: 'queue_music'; }
    .icon-ms-right-panel-open::before           { content: 'right_panel_open'; }
    .icon-ms-search::before                     { content: 'search'; }
    .icon-ms-share::before                      { content: 'share'; }
    .icon-ms-star::before                       { content: 'star'; }
    .icon-ms-textsms::before                    { content: 'textsms'; }
    .icon-ms-video-library::before              { content: 'video_library'; }
    .icon-ms-volume-off::before                 { content: 'volume_off'; }
    .icon-ms-volume-up::before                  { content: 'volume_up'; }
    .icon-ms-web::before                        { content: 'web'; }


    /* --- COLORS CLASSES --- */
    .color-1,    .first-color                   { color: var(--first-color)  !important; }
    .color-2,    .second-color                  { color: var(--second-color) !important; }
    .color-3,    .third-color                   { color: var(--third-color)  !important; }
    .color-4,    .fourth-color                  { color: var(--fourth-color) !important; }
    .color-5,    .fifth-color                   { color: var(--fifth-color)  !important; }
    .color-6,    .sixth-color                   { color: var(--sixth-color)  !important; }
    .black-color                                { color: var(--black-color)  !important; }
    .white-color                                { color: var(--white-color)  !important; }

    /* --- FILL COLORS CLASSES --- */
    .fill-1,     .first-fill                    { background-color: var(--first-color)  !important; }
    .fill-2,     .second-fill                   { background-color: var(--second-color) !important; }
    .fill-3,     .third-fill                    { background-color: var(--third-color)  !important; }
    .fill-4,     .fourth-fill                   { background-color: var(--fourth-color) !important; }
    .fill-5,     .fifth-fill                    { background-color: var(--fifth-color)  !important; }
    .fill-6,     .sixth-fill                    { background-color: var(--sixth-color)  !important; }
    .black-fill                                 { background-color: var(--black-color)  !important; }
    .white-fill                                 { background-color: var(--white-color)  !important; }

    /* --- ALIGN CLASSES --- */
    .left                                       { text-align: left;   justify-content: left;   }
    .center                                     { text-align: center; justify-content: center; }
    .right                                      { text-align: right;  justify-content: right;  }

    /* --- SIZE CLASSES --- */
    .xxxsmall                                   { font-size:   var(--size-xxxsmall);  }
    .xxsmall                                    { font-size:   var(--size-xxsmall);   }
    .xsmall                                     { font-size:   var(--size-xsmall);    }
    .small                                      { font-size:   var(--size-small);     }
    .normal                                     { font-size:   var(--size-normal);    }
    .large                                      { font-size:   var(--size-large);     }
    .xlarge                                     { font-size:   var(--size-xlarge);    }
    .xxlarge                                    { font-size:   var(--size-xxlarge);   }
    .xxxlarge                                   { font-size:   var(--size-xxxlarge);  }

    /* --- WEIGHT CLASSES --- */
    .thin                                       { font-weight: var(--weight-thin);       }
    .xlight                                     { font-weight: var(--weight-extralight); }
    .light                                      { font-weight: var(--weight-light);      }
    .regular                                    { font-weight: var(--weight-regular);    }
    .medium                                     { font-weight: var(--weight-medium);     }
    .sbold                                      { font-weight: var(--weight-semibold);   }
    .bold                                       { font-weight: var(--weight-bold);       }
    .xbold                                      { font-weight: var(--weight-extrabold);  }
    .black                                      { font-weight: var(--weight-black);      }

    .visually-hidden {
        border:                     0;
        position:                   absolute;
        width:                      1px;
        height:                     1px;
        margin:                     -1px;
        padding:                    0;
        overflow:                   hidden;
        clip:                       rect(0, 0, 0, 0);
    }


/*  TYPOGRAPHY =================================================================
    ========================================================================= */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color:                      var(--black-color);
        font-family:                var(--font-title);
    }

    h1 {
        font-size:                  var(--title-size-xxlarge);
        font-weight:                var(--weight-medium);
        line-height:                var(--line-height-tight);
        justify-content:            center;
        text-align:                 center;
        text-transform:             uppercase;

    }

    h2 {
        font-size:                  var(--title-size-xlarge);
        font-weight:                var(--weight-medium);
        line-height:                var(--line-height-tight);
        justify-content:            center;
        text-align:                 center;
        text-shadow:                var(--text-shadow);
        text-transform:             uppercase;
    }

    h3 {
        font-size:                  var(--title-size-large);
        font-weight:                var(--weight-medium);
        line-height:                var(--line-height-tight);
        text-transform:             uppercase;
    }

    .dark h1,
    .dark h2,
    .dark h3,
    .dark h4,
    .dark h5,
    .dark h6 {
        color:                      var(--white-color);
    }


/*  HTML TAGS ==================================================================
    ========================================================================= */

    html {
        -ms-text-size-adjust:       100%;
        -webkit-text-size-adjust:   100%;
    }

    body.menu-hidden {
        --visible-header-height:    0px;
    }

    body {
        color:                      var(--content-color);
        background:                 var(--content-fill);
        font-family:                var(--font-content);
        -webkit-font-smoothing:     antialiased;
        overflow:                   hidden;

    }

    a, button {
        font-family:                var(--font-button);
        text-decoration:            none;
    }

    b, strong {
        font-weight:                var(--weight-medium);
    }


/*  LOADER =====================================================================
    ========================================================================= */

    #loader {
        z-index:                    9999;
        background-color:           var(--content-fill);
        justify-content:            center;
        position:                   fixed;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        transition:                 opacity 0.6s ease-out, visibility 0.6s;
    }

    #loader.hidden {
        opacity:                    0;
        visibility:                 hidden;
        pointer-events:             none;
    }

    #loader-progress-info-id {
        color:                      var(--white-color);
        text-align:                 center;
        width:                      75%;
        max-width:                  800px;
        margin-top:                 var(--gap-xlarge);
        display:                    none;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    #loader-progress-info-id.visible {
        display:                    flex;
    }

    #loader-file-name-id {
        opacity:                    0.8;
        font-family:                var(--font-monospaced);
        font-size:                  var(--size-xsmall);
        text-overflow:              ellipsis;
        width:                      100%;
        margin-bottom:              var(--gap-xsmall);
        overflow:                   hidden;
        white-space:                nowrap;
    }

    #loader-progress-container {
        background:                 transparent;
        border:                     1px solid var(--white-color);
        border-radius:              3px;
        width:                      100%;
        height:                     6px;
        overflow:                   hidden;
    }

    #loader-progress-bar-id {
        background-color:           var(--first-color);
        width:                      0%;
        height:                     100%;
        transition:                 width 0.1s linear;
    }

    /* --- LOADER LOGO --- */

    .loader-logo {
        position:                   relative;
        /* animation:               pulse-loader-logo 1.5s infinite ease-in-out; */
        transform-origin:           center center;
        width:                      42vh;
        max-width:                  80vw;
        height:                     auto;
        aspect-ratio:               512 / 578;
        display:                    block;
    }

    .loader-logo svg {
        color:                      var(--grey50-color);
    }

    .loader-layer {
        position:                   absolute;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        display:                    block;
    }

    .loader-spin {
        transform-origin:           50% 50%;
        animation:                  animation-spin 1.81s linear infinite;
    }

    @keyframes pulse-loader-logo {
        0% {
            opacity:                1;
            transform:              scale(1);
        }

        50% {
            opacity:                0.7;
            transform:              scale(1.05);
        }

        100% {
            opacity:                1;
            transform:              scale(1);
        }
    }

    @keyframes animation-spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }


/*  MAIN =======================================================================
    ========================================================================= */

    #main-id {
        width:                      100%;
        height:                     100vh;
        height:                     100dvh;
        overflow-y:                 scroll;

        transition:                 width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        touch-action:               pan-y;
        /* scroll-behavior intentionnellement absent : avec scroll-snap-type mandatory,
           smooth sur le conteneur ralentit chaque transition snap (300–600ms) et crée
           des états intermédiaires partiels. Les scrolls programmatiques spécifient
           behavior:'smooth' ou 'auto' explicitement — ce qui suffit. */
        scroll-snap-type:           y mandatory;
        overscroll-behavior-y:      contain;
        -webkit-overflow-scrolling: touch;
    }

    #main-id::-webkit-scrollbar {
        display:                    none;
    }

    /* Empêche de sauter une section en scrollant vite (mandatory snap sans stop = skippable) */
    #main-id > .section-snap {
        scroll-snap-stop:           always;
    }


/*  HOME CARD ==================================================================
    ========================================================================= */

    @keyframes slideInUp {
        0% {
            opacity:                0;
            transform:              translateY(50px);
        }

        100% {
            opacity:                1;
            transform:              translateY(0);
        }
    }

    .home-module {
        background-color:           var(--second-color);
        background-size:            cover;
        background-position:        center;
        background-repeat:          no-repeat;

        justify-content:            space-between;
        text-align:                 center;
        position:                   relative;
        width:                      100%;

        height:                     100vh;
        height:                     100dvh;
        padding:                    7vh var(--gap-xlarge) 2vh var(--gap-xlarge);

        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);

        scroll-snap-align:          start;

    }

    .home-module .home-top {
        opacity:                    0;
        width:                      100%;
        margin-top:                 var(--gap-xxlarge);
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-large);
        animation:                  slideInUp 0.8s ease-out forwards;
        animation-delay:            0.3s;
    }

    .home-module .home-module-middle {
        opacity:                    0;
        width:                      100%;
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
    }

    .home-module .home-module-bottom {
        width:                      100%;
        max-width:                  600px;
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-xlarge);
    }

    .home-module .home-subtitle {
        font-size:                  var(--size-xlarge);
        font-weight:                var(--weight-medium);
        text-shadow:                var(--text-shadow);
        text-transform:             uppercase;
        max-width:                  75%;
        margin:                     0;
    }

    .home-module .home-date {
        color:                      var(--white-color);
        opacity:                    0;
        font-size:                  var(--size-xxlarge);
        font-weight:                var(--weight-medium);
        line-height:                var(--line-height-flat);
        text-shadow:                var(--text-shadow);
        text-transform:             uppercase;
        margin:                     0;
        display:                    flex;
        flex-direction:             column;
        animation:                  slideInUp 0.8s ease-out forwards;
        animation-delay:            0.6s;
    }

    .home-module .home-buttons-container {
        opacity:                    0;
        width:                      100%;
        max-width:                  200px;
        display:                    grid;
        gap:                        var(--gap-large);
        grid-template-columns:      1fr;
        animation:                  slideInUp 0.8s ease-out forwards;
        animation-delay:            1.5s;
    }

    .home-module .btn-home {
        color:                      var(--black-color);
        background-color:           var(--fifth-color);
        border:                     none;
        border-radius:              50px;
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-medium);
        text-decoration:            none;
        text-transform:             uppercase;
        width:                      auto;
        min-width:                  200px;
        padding:                    var(--gap-normal) var(--gap-xxlarge);
        white-space:                nowrap;
        flex:                       unset;
        transition:                 transform 0.2s;
        cursor:                     pointer;
    }

    .home-module .btn-home-timeline {
        color:                      var(--white-color);
        background-color:           var(--first-color);
    }

    .home-module .btn-home-ticket {
        color:                      var(--black-color);
        background-color:           var(--fourth-color);
    }

    .home-module .home-buttons-container .btn-home,
    .home-module .home-buttons-container .btn-home-ticket {
        border:                     2px solid var(--black-color);
    }

    /* --- HOME CAROUSEL --- */

    .home-module .carousel {
        opacity:                    0;
        width:                      100%;
        max-width:                  600px;
        overflow:                   hidden;
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);
        animation:                  slideInUp 0.6s ease-out forwards;
        animation-delay:            0.6s;
    }

    .home-module .carousel-pill {
        border:                     2px solid var(--black-color);
        border-radius:              50px;
        width:                      100%;
        height:                     70px;
        overflow:                   hidden;
    }

    .home-module .carousel-inner {
        height:                     100%;
        display:                    flex;
        transition:                 transform 0.5s ease;
    }

    .home-module .carousel-slide {
        color:                      var(--white-color);
        background-color:           var(--first-color);
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-light);
        width:                      100%;
        max-width:                  100%;
        padding:                    var(--gap-normal) var(--gap-small);
        display:                    flex;
        flex-shrink:                0;
        align-items:                center;
    }

    .home-module .carousel-slide.organizers {
        justify-content:            space-between;
    }

    .home-module .carousel-slide.organizers .organizer-col-fixed {
        justify-content:            center;
        width:                      35px;
        display:                    flex;
        flex-shrink:                0;
        align-items:                center;
        align-self:                 stretch;
    }

    .home-module .carousel-slide.organizers .organizer-col-fixed.paloma,
    .home-module .carousel-slide.organizers .organizer-col-fixed.come-on-people {
        width:                      20%;
    }

    .home-module .carousel-slide.organizers .organizer-col-fluid {
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-regular);
        line-height:                var(--line-height-flat);
        justify-content:            center;
        text-align:                 center;
        padding:                    0;
        display:                    flex;
        flex-grow:                  1;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .home-module .carousel-slide.organizers svg {
        fill:                       var(--white-color);
        width:                      auto;
        max-width:                  100%;
        height:                     90%;
        display:                    block;
        transition:                 transform 0.2s;
    }

    .home-module .carousel-slide.organizers .organizer-logo-link {
        color:                      inherit;
        justify-content:            center;
        text-decoration:            none;
        width:                      100%;
        height:                     100%;
        display:                    flex;
        align-items:                center;
        transition:                 color 0.4s;
    }

    .home-module .carousel-slide.countdown {
        font-size:                  var(--size-normal);
        font-weight:                var(--weight-medium);
        line-height:                var(--line-height-tight);
        justify-content:            center;
        text-align:                 center;
        padding:                    0;
    }

    .home-module .carousel-slide.next-event {
        padding:                    0;
        overflow:                   hidden;
    }

    .home-module .carousel-item {
        min-width:                  0;
        height:                     100%;
        padding:                    var(--gap-small) var(--gap-normal) var(--gap-small) var(--gap-small);
        overflow:                   hidden;
        display:                    flex;
        flex:                       1;
        align-items:                center;
        gap:                        var(--gap-small);
        cursor:                     pointer;
    }

    /*
    .home-module .carousel-item + .carousel-item {
        border-left:                1px solid var(--white-a25-color);
    }
    */

    .home-module .carousel-item--second {
        display:                    flex;
    }

    .home-module .next-event-track {
        position:                   relative;
        height:                     100%;
    }

    .home-module .next-event-track.no-transition .carousel-item {
        transition:                 none;
    }

    .home-module .next-event-track .carousel-item {
        position:                   absolute;
        top:                        0;
        left:                       0;
        transform:                  translateX(100%);
        width:                      100%;
        height:                     100%;
        transition:                 transform 0.5s ease;
    }

    .home-module .next-event-track .carousel-item:first-child {
        transform:                  translateX(0);
    }

    .home-module .next-event-track.show-second .carousel-item:first-child {
        transform:                  translateX(-100%);
    }

    .home-module .next-event-track.show-second .carousel-item--second {
        transform:                  translateX(0);
    }

    .home-module .carousel-slide.next-event .thumbnail {
        border-radius:              100%;
        width:                      auto;
        height:                     100%;
        aspect-ratio:               1 / 1;
        margin:                     var(--gap-xxxsmall);
        object-fit:                 cover;
        flex-shrink:                0;
    }

    .home-module .carousel-slide.next-event .info {
        min-width:                  0;
        display:                    flex;
        flex:                       1;
        flex-direction:             column;
        gap:                        var(--gap-xxxsmall);
    }

    .home-module .carousel-slide.next-event .title {
        font-size:                  var(--size-small);
        font-weight:                var(--weight-medium);
        text-align:                 left;
        text-overflow:              ellipsis;
        text-transform:             uppercase;
        overflow:                   hidden;
        white-space:                nowrap;
    }

    .home-module .carousel-slide.next-event .datetime,
    .home-module .carousel-slide.next-event .place {
        font-size:                  var(--size-xxsmall);
        text-align:                 left;
        text-overflow:              ellipsis;
        text-transform:             uppercase;
        overflow:                   hidden;
        white-space:                nowrap;
    }

    .home-module .carousel-dots {
        justify-content:            center;
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-xsmall);
    }

    .home-module .carousel-dot {
        background:                 var(--white-a40-color);
        border:                     none;
        border-radius:              50%;
        width:                      6px;
        height:                     6px;
        padding:                    0;
        transition:                 background 0.3s, width 0.3s, height 0.3s;
        cursor:                     pointer;
    }

    .home-module .carousel-dot.active {
        background:                 var(--white-color);
        width:                      8px;
        height:                     8px;
    }

    /* --- RESPONSIVE --- */

    @media (min-width: 480px) {

        .home-module .home-buttons-container {
            max-width:              100%;
            grid-template-columns:  1fr 1fr;
        }

    }

    @media (min-width: 640px) {

        .home-module {
            padding:                12vh var(--gap-xlarge) 5vh var(--gap-xlarge);
        }

        .home-module .home-top {
            margin-top:             0;
        }

        .home-module .home-buttons-container {
            gap:                    var(--gap-xlarge);
        }

        .home-module .btn-home {
            width:                  100%;
            min-width:              auto;
            padding:                var(--gap-large) var(--gap-xlarge);
        }

        .home-module .carousel-pill {
            height:                 80px;
        }

        .home-module .carousel-item--second {
            display:                flex;
        }

        .home-module .organizers .organizer-col-fixed.paloma {
            width:                  80px;
        }

        .home-module .organizers .organizer-col-fixed.come-on-people {
            width:                  64px;
        }
    }

    @media (min-width: 1024px) {

        .home-module .carousel-pill {
            height:                 100px;
        }

        .home-module .carousel-slide {
            padding:                var(--gap-normal) var(--gap-large);
        }

        .home-module .organizers .organizer-col-fixed.paloma {
            width:                  120px;
            padding-left:           var(--gap-large);
        }

        .home-module .organizers .organizer-col-fixed.come-on-people {
            width:                  80px;
        }
    }

    @media (hover: hover) {
        .home-module .btn-home:hover {
            transform:              scale(1.1);
        }
    }

    @media (hover: hover) {
        .home-module .carousel-slide.organizers .organizer-logo-link:hover svg {
            fill:                   var(--white-color);
            transform:              scale(1.25);
        }
    }


/*  MOOD CARD (not used) =======================================================
    ========================================================================= */

    .mood-module h2 {
        color:                      inherit;
        margin-bottom:              var(--gap-xlarge);
    }

    .mood-module {
        background-color:           var(--black-color);
        background-size:            cover;
        background-position:        center;
        background-repeat:          no-repeat;
        justify-content:            center;
        text-align:                 center;
        position:                   relative;
        width:                      100%;
        height:                     100vh;
        height:                     100dvh;
        padding:                    calc(var(--visible-header-height) + 20px) 20px 40px 20px;
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);
        scroll-snap-align:          start;
    }

    .mood-description {
        color:                      var(--white-color);
        opacity:                    0.9;
        font-size:                  var(--size-normal);
        line-height:                var(--line-height-medium);
        text-shadow:                var(--text-shadow);
        max-width:                  600px;
        margin-bottom:              var(--gap-xxxlarge);
    }

    .mood-bottom {
        margin-top:                 auto;
    }

    .mood-buttons-grid {
        width:                      100%;
        max-width:                  600px;

        display:                    grid;
        gap:                        var(--gap-large);
        grid-template-columns:      1fr;
    }

    .btn-mood {
        border:                     2px solid var(--black-color);
        font-size:                  var(--size-normal);
        font-weight:                var(--weight-medium);
        justify-content:            center;
        text-align:                 center;
        text-transform:             uppercase;
        width:                      100%;
        min-width:                  0;
        padding:                    var(--gap-large) var(--gap-xlarge);
        white-space:                normal;
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
        transition:                 transform 0.2s, background-color 0.2s;
        cursor:                     pointer;
    }

    .btn-mood.ascenseur-to-heaven {
        background-color:           color-mix(in srgb, var(--fourth-color),    transparent 5%);
    }

    .btn-mood.avant-la-manif {
        background-color:           color-mix(in srgb, var(--second-color), transparent 5%);
    }

    .btn-mood.make-trauma-great-again {
        background-color:           color-mix(in srgb, var(--first-color),   transparent 5%);
    }

    .btn-mood.printemps-post-burn-out {
        background-color:           color-mix(in srgb, var(--fifth-color),     transparent 5%);
    }

    .btn-mood.sur-la-platine-de-tes-darons {
        background-color:           color-mix(in srgb, var(--third-color),     transparent 5%);
    }

    .btn-mood.tete-dans-le-caisson {
        background-color:           color-mix(in srgb, var(--first-color),   transparent 5%);
    }

    /* --- RESPONSIVE --- */

    @media (hover: hover) {
        .btn-mood:hover {
            filter:                 brightness(1.1);
            transform:              scale(1.05);
        }
    }


/*  EVENT MODULE ===============================================================
    ========================================================================= */

    .date-separator::before {
        content: var(--event-date-separator);
        color: inherit;
    }
    .time-separator::before {
        content: var(--event-time-separator);
        color: inherit;
    }
    .datetime-separator::before {
        content: var(--event-datetime-separator);
        color: inherit;
    }


    .program-module .item .date-time,
    .program-module .item .session-time {
        color:                      var(--first-color);
        font-size:                  var(--size-xsmall);
        line-height:                var(--line-height-snug);
        text-transform:             uppercase;
        overflow:                   hidden;
        white-space:                nowrap;
        display:                    inline-block;
    }


    .program-module .item .session,
    .program-module .item .start-date {
        color:                      var(--white-color);
    }

    .program-module .item .start-time::before {
        content:                    var(--event-datetime-separator);
        color:                      var(--first-color);
    }

    .program-module .item .end-time::before {
        content:                    var(--event-time-separator);
        color:                      var(--first-color);
    }



    .event-module .event-box h2 {
        color:                      inherit;
        text-shadow:                var(--text-shadow);
        margin:                     0;
        padding:                    var(--gap-xsmall) var(--gap-normal);
        display:                    inline;
    }

    .event-module .event-box h3 {
        color:                      inherit;
        text-shadow:                var(--text-shadow);
        margin:                     var(--gap-normal) 0 0 0;
    }

    .event-module {
        justify-content:            center;
        position:                   relative;
        width:                      100%;
        height:                     100vh;
        height:                     100dvh;
        overflow:                   hidden;
        display:                    flex;
        align-items:                center;
        user-select:                none;
        scroll-snap-align:          start;
        -webkit-tap-highlight-color: transparent;
    }

    .event-module .event-container {
        background:                 var(--black-color);
        position:                   relative;
        width:                      100%;
        height:                     100vh;
        height:                     100dvh;
        overflow:                   hidden;
        cursor:                     pointer;
    }

    .event-module .event-container::after {
        content:                    '';
        z-index:                    4;
        background-color:           var(--black-a60-color);
        opacity:                    0;
        position:                   absolute;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        transition:                 opacity 0.3s ease;
        pointer-events:             none;
    }

    .event-module.desc-open .event-module .event-container::after {
        opacity:                    1;
    }

    .video-background {
        z-index:                    2;
        opacity:                    1;
        position:                   absolute;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        object-fit:                 cover;
        transition:                 opacity 0.5s ease-out;
        pointer-events:             none;
    }

    .yt-placeholder,
    iframe {
        z-index:                    1;
        position:                   absolute;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
    }

    .event-module.playing .video-background {
        opacity:                    0;
        pointer-events:             none;
    }

    /* --- VIDEO CARD : TITLE --- */

    .event-module .event-box {
        z-index:                    6;
        color:                      var(--white-color);
        justify-content:            center;
        text-align:                 center;
        position:                   absolute;
        top:                        30%;
        left:                       50%;
        transform:                  translate(-50%, -50%);
        width:                      90%;
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
        transition:                 opacity 0.4s ease, transform 0.4s ease;
        pointer-events:             none;
    }

    .event-module-meta {
        color:                      var(--first-color);
        font-weight:                var(--weight-medium);
        text-shadow:                var(--text-shadow);
        text-transform:             uppercase;
        margin-top:                 var(--gap-large);
        display:                    flex;
        flex-direction:             column;
        gap:                        var(--gap-xsmall);
    }

    .event-module-meta-place {
        font-size:                  var(--size-normal);
        margin-bottom:              0;
    }

    .event-module-meta-date {
        opacity:                    0.9;
        font-size:                  var(--size-normal);
    }

    /* --- EVENT CARD : STATE ICON --- */

    .event-module .video-loading-icon,
    .event-module .video-play-icon {

        z-index:                    5;
        color:                      var(--first-color);
        opacity:                    1;
        font-size:                  var(--icon-size-xxxlarge);
        justify-content:            center;
        text-shadow:                var(--text-shadow);
        position:                   absolute;
        top:                        50%;
        left:                       50%;
        display:                    flex;
        align-items:                center;
        transition:                 opacity 0.5s, transform 0.5s;
        pointer-events:             none;
        --yt-container-fill:        var(--first-color);
        --yt-play-fill:             var(--white-color);
    }

    .event-module .video-loading-icon {
        transform:                  translate(-50%, -50%) scale(1.5);
    }

    .event-module .video-play-icon {
        transform:                  translate(25%, 25%) scale(1.5);
    }

    .event-module.playing .event-module .event-box,
    .event-module.playing .video-loading-icon,
    .event-module.playing .video-play-icon {
        opacity:                    0;
    }

    .event-module.playing .event-module .event-box {
        transform:                  translate(-50%, -50%) scale(1.1);
        transition:                 opacity 0.8s ease 4s, transform 0.8s ease 4s;
    }

    .event-module.paused-manual .event-module .event-box,
    .event-module.paused-manual .video-loading-icon,
    .event-module.paused-manual .video-play-icon {
        opacity:                    1;
    }

    .event-module.active .yt-placeholder {
        transform:                  scale(1.1);
    }


/*  EVENT MODULE : OVERLAY =====================================================
    ========================================================================= */

    .event-module .event-overlay .event-info h2 {
        color:                      var(--first-color);
        /* font-weight:                var(--weight-bold); */
        text-align:                 left;
        margin:                     0;
        transition:                 opacity 0.2s;
    }

    .event-module .event-overlay .event-info h3 {
        color:                      var(--white-color);
        /* font-weight:                var(--weight-medium); */
        font-size:                  var(--size-normal);
        text-align:                 left;
        margin:                     0;
        transition:                 opacity 0.2s;
    }

    .event-module .event-overlay {
        z-index:                    10;
        background:                 var(--event-artist-grad);
        opacity:                    0;
        justify-content:            space-between;
        position:                   absolute;
        right:                      0;
        bottom:                     0dvh;
        left:                       0;
        transform:                  translateY(20px);
        padding:                    var(--gap-xsmall);
        padding-bottom:             var(--gap-xxxlarge);
        padding-bottom:             calc(var(--gap-xxxlarge) + env(safe-area-inset-bottom));
        display:                    flex;
        align-items:                flex-end;
        transition:                 opacity 0.8s ease, transform 0.8s ease;
        pointer-events:             none;
    }

    .event-module.active .event-overlay {
        opacity:                    1;
        transform:                  translateY(0);
    }

    body.no-control-bar .event-module .event-overlay {
        padding-bottom:             var(--gap-xsmall);
        padding-bottom:             calc(var(--gap-xsmall) + env(safe-area-inset-bottom));
    }

    /* --- EVENT OVERLAY INFO --- */

    .event-module .event-overlay .event-info {
        display:                    flex;
        flex:                       1;
        flex-direction:             column;
        gap:                        var(--gap-xsmall);
        pointer-events:             auto;
    }

    .event-module .event-overlay .event-info .event-info-wrapper {
        display:                    flex;
        flex-direction:             row;
        align-items:                center;
        gap:                        var(--gap-xsmall);
    }

    .event-module .event-overlay .event-info .event-meta {
        min-width:                  0;
        display:                    flex;
        flex:                       1;
        flex-direction:             column;
        gap:                        var(--gap-xxsmall);
    }

    .event-module .event-overlay .event-info .event-title-row {
        display:                    flex;
        align-items:                baseline;
        gap:                        var(--gap-small);
    }

    .event-module .event-overlay .event-info .event-meta .date,
    .event-module .event-overlay .event-info .event-meta .datetime,
    .event-module .event-overlay .event-info .event-meta .place,
    .event-module .event-overlay .event-info .event-meta .time {
        text-overflow:              ellipsis;
        overflow:                   hidden;
        white-space:                nowrap;
    }

    .event-module .event-overlay .event-info .event-meta .date {
        overflow:                   visible;
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-xsmall);
    }

    .event-module .event-overlay .event-info .event-avatar-container {
        z-index:                    25;
        position:                   relative;
        width:                      64px;
        height:                     auto;
        display:                    block;
        transition:                 transform 0.2s ease;
        cursor:                     pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .event-module .event-overlay .event-info .event-avatar-container:active {
        transform:                  scale(0.95);
    }

    .event-module .event-overlay .event-info .artist-avatar {
        border:                     2px solid var(--white-color);
        border-radius:              50%;
        width:                      100%;
        height:                     100%;
        object-fit:                 cover;
        display:                    block;
        pointer-events:             none;
    }

    .event-module .event-overlay .event-info .artist-song-title {
        color:                      var(--white-color);
        font-size:                  var(--size-normal);
        font-style:                 normal;
        font-weight:                var(--weight-light);
        margin:                     0 0 var(--gap-small) 0;
        display:                    block;
    }


    /* --- ARTIST OVERLAY MORE --- */

    .event-module .event-overlay .event-info .event-info-more {
        opacity:                    0.85;
        font-size:                  var(--size-normal);
        position:                   relative;
        max-width:                  999px;
        max-height:                 4.0rem;
        margin:                     0;
        overflow:                   hidden;
        display:                    flex;
        flex-direction:             column;
        transition:                 max-height 1s ease;
        cursor:                     pointer;
    }

    .event-module .event-overlay .event-info .event-info-more.expanded {
        opacity:                    1;
        max-height:                 70vh;
        padding:                    var(--gap-large);
        padding-left:               0;
        overflow-y:                 auto;
        transition:                 max-height 1s ease;
    }

    .event-module .event-overlay .event-info .event-info-more {
        justify-content:            space-between;
        width:                      100%;
        display:                    flex;
        flex-direction:             row;
        flex-shrink:                0;
        align-items:                flex-start;
    }

    .event-module .event-overlay .event-info .event-info-more .event-info-more-content {
        text-overflow:              ellipsis;
        margin:                     0;
        overflow:                   hidden;
        display:                    -webkit-box;
        flex:                       1;
        -webkit-line-clamp:         2;
        -webkit-box-orient:         vertical;
    }

    .event-module .event-overlay .event-info .event-info-more.expanded .event-info-more-content {
        overflow:                   visible;
        display:                    block;
        -webkit-line-clamp:         unset;
    }

    .event-module .event-overlay .event-info .event-info-more .event-info-more-icon {
        color:                      var(--first-color);
        font-size:                  var(--size-xxlarge);
        font-weight:                var(--weight-light);
        flex-shrink:                0;
    }

    /* --- EVENT OVERLAY TAG PILL --- */

    .event-module .event-overlay .event-info .tags {
        max-height:                 300px;
        overflow:                   hidden;
        display:                    flex;
        flex-wrap:                  wrap;
        gap:                        var(--gap-small);
        transition:                 opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease, visibility 0.3s;
    }

    /* --- event-info : TAG-PILL --- */

    .event-module .event-overlay .event-info .tag-pill {
        color:                      var(--tag-pill-color);
        background:                 var(--tag-pill-grad);
        backdrop-filter:            blur(4px);
        border-radius:              3px;
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-medium);
        line-height:                var(--line-height-flat);
        text-transform:             uppercase;
        padding:                    0 var(--gap-xxxsmall);
        transition:                 background 0.2s;
        cursor:                     pointer;
    }


    .event-module .event-overlay .event-info .tag-pill .date,
    .event-module .event-overlay .event-info .tag-pill .place {
        color:                      var(--grey80-color);
        font-size:                  var(--size-small);
        font-weight:                var(--weight-medium);
        line-height:                var(--line-height-flat);
        text-transform:             uppercase;
        overflow:                   hidden;
    }

    .event-module .event-overlay .event-info .tag-pill .start-time,
    .event-module .event-overlay .event-info .tag-pill .end-time {
        color:                      var(--first-color);
    }

    .event-module .event-overlay .event-info .tag-pill .start-time::before,
    .event-module .event-overlay .event-info .tag-pill .end-time::before {
        /* margin-left: 5px; */
        color:                      var(--first-color);
    }

    .event-module .event-overlay .event-info .tag-pill .start-time::before {
        content: var(--event-datetime-separator);
    }

    .event-module .event-overlay .event-info .tag-pill .end-time::before {
        content: var(--event-time-separator);
    }


    .event-module .event-overlay .event-info .tag-pill.session-tag,
    .event-module .event-overlay .event-info .tag-pill.place-tag {
        font-size:                  var(--size-small);
    }

    .event-module .event-overlay .event-info .tag-pill.mood-tag,
    .event-module .event-overlay .event-info .tag-pill.genre-tag,
    .event-module .event-overlay .event-info .tag-pill.country-tag {
        color:                      var(--tag-pill-color);
        background:                 var(--tag-pill-grad);
        border-radius:              3px;
    }


    /* --- event-info : TAG-PILL ACTIVE --- */

    .event-module .event-overlay .event-info .tag-pill.tag-active {
        color:                      var(--tag-pill-active-color);
        background-color:           var(--tag-pill-active-fill);
    }

    .event-module .event-overlay .event-info .tag-pill.session-tag.tag-active,
    .event-module .event-overlay .event-info .tag-pill.place-tag.tag-active {
        color:                      var(--white-color); /* --session-pill-active-color */
        background:                 var(--third-color); /* --session-pill-active-fill */
    }

    .event-module .event-overlay .event-info .tag-pill.session-tag.tag-active .start-time,
    .event-module .event-overlay .event-info .tag-pill.session-tag.tag-active .start-time::before,
    .event-module .event-overlay .event-info .tag-pill.session-tag.tag-active .end-time,
    .event-module .event-overlay .event-info .tag-pill.session-tag.tag-active .end-time::before {
        color:                      var(--fourth-color);
    }


    .event-module .event-overlay .event-info .tag-pill.mood-tag.tag-active {
        color:                      var(--white-color);
        background:                 var(--third-color);
    }

    .event-module .event-overlay .event-info .tag-pill.genre-tag.tag-active {
        color:                      var(--black-color);
        background:                 var(--third-color);
    }

    .event-module .event-overlay .event-info .tag-pill.country-tag.tag-active {
        color:                      var(--black-color);
        background:                 var(--white-color);
    }

    /* --- ARTIST SOCIAL PILL --- */

    .event-module .event-overlay .event-info .social-pill {
        color:                      var(--tag-pill-social-color);
        background:                 var(--tag-pill-social-fill);
        backdrop-filter:            blur(4px);
        border-radius:              12px;
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-medium);
        justify-content:            center;
        text-decoration:            none;
        text-transform:             uppercase;
        padding:                    var(--gap-xxsmall) var(--gap-normal);
        display:                    inline-flex;
        align-items:                center;
        transition:                 background 0.2s;
        cursor:                     pointer;
    }

    /* --- ARTIST SOCIAL ICONS --- */

    .event-module .event-overlay .event-info .social-icon-link {
        background-color:           var(--black-color);
        border:                     1px solid var(--grey30-color);
        border-radius:              12px;
        text-decoration:            none;
        width:                      auto;
        height:                     30px;
        padding:                    var(--gap-xxsmall) var(--gap-xsmall);
        display:                    inline-block;
        transition:                 transform 0.2s;
    }

    .event-module .event-overlay .event-info .social-icon-svg {
        width:                      auto;
        height:                     100%;
        display:                    block;
    }

    /* --- ARTIST TICKET BUTTON --- */

    .event-module .btn-artist-ticket {
        color:                      var(--white-color);
        border-radius:              12px;
        text-decoration:            none;
        box-shadow:                 0 4px 15px var(--black-a20-color);
        max-width:                  100%;
        margin-top:                 var(--gap-normal);
        margin-right:               var(--gap-normal);
        padding:                    var(--gap-xxxsmall) var(--gap-xsmall);
        display:                    inline-flex;
        align-items:                center;
        align-self:                 flex-start;
        transition:                 transform 0.2s, box-shadow 0.2s;
    }

    .event-module .event-ticket-icon {
        font-size:                  var(--icon-size-large);
        margin-right:               var(--gap-normal);
    }

    .event-module .event-ticket-info {
        display:                    flex;
        flex-direction:             column;
    }

    .event-module .btn-artist-ticket .ticket-title {
        color:                      inherit;
        font-size:                  var(--size-xxsmall);
        font-weight:                var(--weight-medium);
        line-height:                var(--line-height-tight);
        text-align:                 left;
        text-transform:             uppercase;
        width:                      auto;
        margin:                     0;
        padding:                    0;
    }

    .event-module .btn-artist-ticket .ticket-subtitle {
        color:                      inherit;
        opacity:                    0.8;
        font-size:                  var(--size-xxsmall);
        font-weight:                var(--weight-light);
    }

    .event-module .btn-artist-ticket.full-pass-ticket {
        background:                 var(--full-pass-ticket-color);
    }

    .event-module .btn-artist-ticket.day-pass-ticket-1 {
        background:                 var(--day-pass-ticket-1-color);
    }

    .event-module .btn-artist-ticket.day-pass-ticket-2 {
        background:                 var(--day-pass-ticket-2-color);
    }


    /* --- ARTIST HIDING ELEMENTS ON PLAY --- */

    /* body.hide-desc-mobile .event-module.playing:not(.desc-open) .date-place, */
    body.hide-desc-mobile:not(.show-tags-permanently) .event-module.playing:not(.desc-open) .tags,
    body.hide-desc-mobile .event-module.playing:not(.desc-open) .event-info-more:not(.expanded) {
        opacity:                    0;
        max-height:                 0;
        margin:                     var(--gap-small) 0;
        padding:                    0;
        visibility:                 hidden;
        transition:                 all 0.5s ease 5s;
    }


    /* --- ARTISTS SOCIAL-LINKS --- */

    .event-module .social-links {
        justify-content:            left;
        margin-top:                 var(--gap-normal);
        display:                    none;
        flex-wrap:                  wrap;
        gap:                        var(--gap-normal);
    }

    .event-module .event-overlay .event-info-more.expanded .social-links {
        display:                    flex;
    }


    /* --- ARTIST TICKETS CONTAINER --- */

    .event-module .tickets-links-container {
        justify-content:            left;
        width:                      100%;
        margin-top:                 var(--gap-normal);
        display:                    none;
        flex-wrap:                  wrap;
        gap:                        var(--gap-normal);
    }

    .event-module .tickets-links-container .btn-artist-ticket {
        margin:                     0;
        align-self:                 center;
    }

    .event-module .event-overlay .event-info-more.expanded .tickets-links-container {
        display:                    flex;
    }

    /* --- RESPONSIVE --- */

    @media (hover: hover) {
        .event-overlay {
            pointer-events:         auto;
        }
    }

    @media (hover: hover) {
        .event-module .event-overlay .event-info .event-avatar-container:hover {
            transform:              scale(1.10);
        }
    }

    @media (hover: hover) {
        .event-module .event-overlay .event-info .tag-pill:hover {
            color:                  var(--black-color);
            background:             var(--white-a70-color);
        }
    }

    @media (hover: hover) {
        .event-module .event-overlay .event-info .social-pill:hover {
            filter:                 brightness(1.2);
            transform:              scale(1.1);
        }
    }

    @media (hover: hover) {
        .event-module .event-overlay .event-info .social-icon-link:hover {
            filter:                 brightness(1.2);
            transform:              scale(1.1);
        }
    }

    @media (hover: hover) {
        .event-module .btn-artist-ticket:hover {
            transform:              scale(1.05);
            box-shadow:             0 6px 20px var(--black-a30-color);
        }
    }

    @media (hover: hover) {
        .event-module .event-overlay .event-info h2:hover {
            color:                  var(--white-color);
            cursor:                 pointer;
        }
    }


/*  EVENT MODULE : ANIMATIONS ==================================================
    ========================================================================= */

    /* --- FULLSCREEN --- */

    .event-module:fullscreen {
        background:                 var(--black-color);
        justify-content:            center;
        display:                    flex;
        align-items:                center;
    }

    .event-module:fullscreen .event-module .event-container {
        width:                      100svw;
        height:                     100svh;
    }

    .event-module:fullscreen .event-overlay {
        z-index:                    2147483647;
        bottom:                     0;
        padding-bottom:             var(--gap-xxxlarge);
    }

    /* --- AUDIO MODE OVERRIDES --- */

    .event-module.playing.audio-mode .video-background {
        opacity:                    1 !important;
        pointer-events:             none; /* Keep background non-interactive so clicks go through if needed, though overlay handles it */
    }

    .event-module.playing.audio-mode .video-loading-icon,
    .event-module.playing.audio-mode .video-play-icon {
        opacity:                    1;
        transform:                  translate(-50%, -50%) scale(1.1);
    }


    /* --- ANIMATION AUDIO PULSE-AUDIO --- */

    @keyframes pulse-audio {
        0% {
            opacity:                1;
            transform:              translate(-50%, -50%) scale(1);
        }
        50% {
            opacity:                0.6;
            transform:              translate(-50%, -50%) scale(2.0);
        }
        100% {
            opacity:                1;
            transform:              translate(-50%, -50%) scale(1);
        }
    }

    .event-module.playing.audio-mode.audio-playing .video-loading-icon,
    .event-module.playing.audio-mode.audio-playing .video-play-icon {
        transition:                 none;
        animation:                  pulse-audio 2s ease-in-out infinite;
    }

    /* --- ANIMATION VIDEO LOADING STATE --- */

    @keyframes rotate-icon {
        0%   { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
    }

    .event-module.loading .video-loading-icon {
        opacity:                    1 !important;
        transition:                 none;
        animation:                  rotate-icon 2s linear infinite;
    }

    /* --- ANIMATION PLAY BUTTON : PULSE-PAUSED  --- */

    @keyframes pulse-paused {
        0% {
            opacity:                1;
            transform:              translate(-50%, -50%) scale(1);
        }
        50% {
            opacity:                0.8;
            transform:              translate(-50%, -50%) scale(1.5);
        }
        100% {
            opacity:                1;
            transform:              translate(-50%, -50%) scale(1);
        }
    }

    .event-module:not(.playing):not(.loading) .video-loading-icon,
    .event-module:not(.playing):not(.loading) .video-play-icon {
        transition:                 none;
    }

    /* --- VIDEO CLICK LAYER --- */

    .event-module .video-click-layer {
        z-index:                    3;
        background:                 transparent;
        position:                   absolute;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        cursor:                     pointer;
    }

    /* --- EVENT CARD : VIDEO ERROR OVERLAY - ERROR 150 --- */

    .event-module .video-error-overlay {
        z-index:                    20;
        color:                      var(--white-color);
        background:                 var(--black-a85-color);
        backdrop-filter:            blur(5px);
        justify-content:            center;
        text-align:                 center;
        position:                   absolute;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        padding:                    var(--gap-xlarge);
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .event-module .video-error-logo {
        width:                      120px;
        height:                     auto;
        margin-bottom:              var(--gap-normal);
    }

    .event-module .video-error-icon {
        color:                      var(--second-color);
        font-size:                  var(--icon-size-xxlarge);
        margin-bottom:              var(--gap-xlarge);
    }

    .event-module .video-error-message {
        font-size:                  var(--size-large);
        font-weight:                var(--weight-medium);
        text-transform:             uppercase;
        max-width:                  80%;
        margin-bottom:              var(--gap-normal);
    }

    .event-module .video-error-subtext {
        opacity:                    0.8;
        font-size:                  var(--size-small);
        max-width:                  80%;
    }


    /* --- YOUTUBE PLAY ANIMATION --- */

    .event-module:not(.playing):not(.loading) .youtube-play {
        transform-origin:           center;
        animation:                  pulse-paused 1.5s ease-in-out infinite;
    }




/*  EVENT MODULE : LIFECYCLE ===================================================
    ========================================================================= */

    /* Base state — applied on all event elements with [data-id] */

    [data-id].is-not-started {
    }

    [data-id].is-starting-soon {
        outline:                    2px solid var(--fourth-color);
        outline-offset:             -2px;
        /* outline-offset:             0; */
    }

    [data-id].is-started,
    [data-id].is-in-progress {
        outline:                    2px solid var(--first-color);
        outline-offset:             -2px;
        /* outline-offset:             0; */
    }

    [data-id].is-over {
        opacity:                    0.4;
    }

    [data-id].is-over .date-time *,
    [data-id].is-over .session-time * {
        text-decoration:            line-through;
    }

    .lifetime {
        color:                      var(--white-color);
        background:                 var(--first-color);
        font-size:                  var(--size-xxxsmall);
        font-weight:                var(--weight-medium);
        text-align:                 center;
        text-transform:             uppercase;
        padding:                    var(--gap-xxxsmall) var(--gap-xsmall);
        display:                    none;
    }

    [data-id].is-over .lifetime,
    [data-id].is-started .lifetime,
    [data-id].is-in-progress .lifetime,
    [data-id].is-starting-soon .lifetime {
        display:                    inline-block;
    }

    [data-id].is-starting-soon .lifetime {
        color:                      var(--black-color);
        background:                 var(--fourth-color);
    }

    [data-id].is-over .lifetime {
        background:                 rgba(0, 0, 0, 0.5);
    }

    /* Lifetime — module-specific overrides */

    .program-module .item .lifetime {
        display:                    none;
    }

    .timeline-module [data-id] .lifetime,
    .sidebar [data-id] .lifetime {
        align-self:                 flex-start;
    }

    .event-module [data-id] .lifetime {
        font-size:                  var(--size-xxsmall);
    }

    /* Program items — opacity is on the parent, but the badge must stay fully visible.
       Override: reset opacity on the item, apply 0.4 to each child except the badge. */

    .program-module .item.is-over {
        opacity:                    1;
    }

    .program-module .item.is-over .thumbnail-image,
    .program-module .item.is-over .info-container {
        opacity:                    0.4;
    }

    .program-module .item.is-over .btn-program-like {
        display:                    none;
    }

    /* Program items — outline is covered by the image (overflow:hidden + z-order).
       Use ::after pseudo-element on top instead. */

    .program-module .item.is-starting-soon,
    .program-module .item.is-started,
    .program-module .item.is-in-progress {
        outline:                    none;
    }

    .program-module .item.is-starting-soon::after,
    .program-module .item.is-started::after,
    .program-module .item.is-in-progress::after {
        content:                    '';
        z-index:                    10;
        border:                     2px solid var(--first-color);
        border-radius:              8px;
        position:                   absolute;
        inset:                      0;
        pointer-events:             none;
    }

    .program-module .item.is-starting-soon::after {
        border-color:               var(--fourth-color);
    }

    /* Lifecycle badge — overlay text centered on thumbnail */

    .program-module .item .lifecycle-badge {
        color:                      var(--white-color);
        background:                 var(--first-color);
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-medium);
        text-align:                 center;
        text-transform:             uppercase;
        position:                   absolute;
        top:                        50%;
        left:                       50%;
        transform:                  translate(-50%, -50%);
        max-width:                  50%;
        padding:                    var(--gap-xxsmall) var(--gap-small);
        display:                    none;
        pointer-events:             none;
    }

    .program-module .item.is-over .lifecycle-badge,
    .program-module .item.is-started .lifecycle-badge,
    .program-module .item.is-in-progress .lifecycle-badge,
    .program-module .item.is-starting-soon .lifecycle-badge {
        display:                    block;
    }

    .program-module .item.is-starting-soon .lifecycle-badge {
        color:                      var(--black-color);
        background:                 var(--fourth-color);
    }

    .program-module .item.is-over .lifecycle-badge {
        background:                 rgba(0, 0, 0, 0.5);
    }





/*  STICKY SESSION SEPARATOR ===================================================
    ========================================================================= */

    .sticky-session-separator {
        z-index:                    500;
        background-color:           var(--sticky-session-separator-color);
        text-align:                 left;
        width:                      100%;
        margin:                     var(--gap-normal) 0;
        padding:                    var(--gap-xxsmall) var(--gap-small);
        display:                    flex;
        flex-wrap:                  wrap;
        align-items:                center;
        gap:                        var(--gap-small);
        transition:                 box-shadow 0.2s;
    }

    .btn-session-collapse {
        color:                      var(--first-color);
        background:                 none;
        border:                     none;
        font-size:                  var(--icon-size-large);
        line-height:                var(--line-height-flat);
        padding:                    0;
        display:                    flex;
        flex-shrink:                0;
        align-items:                center;
        cursor:                     pointer;
    }

    .btn-session-collapse .icon-ms-expand-circle-up {
        font-size:                  var(--size-xxlarge);
        transform:                  rotate(180deg);
        transition:                 transform 0.3s ease;
    }

    .sticky-session-separator.collapsed .btn-session-collapse .icon-ms-expand-circle-up {
        transform:                  rotate(90deg);
    }

    .session-collapse-content {
        overflow:                   hidden;
        transition:                 max-height 0.4s ease;
    }

    .sidebar .session-collapse-content {
        list-style:                 none;
    }

    .sidebar .session-collapse-content > ul {
        list-style:                 none;
        margin:                     0;
        padding:                    0;
    }

    .sticky-session-separator .btn-play {
        color:                      var(--first-color);
        background:                 none;
        border:                     none;
        font-size:                  var(--size-xxlarge);
        line-height:                var(--line-height-flat);
        padding:                    0;
        display:                    flex;
        flex-shrink:                0;
        align-items:                center;
        cursor:                     pointer;
    }

    body.tag-filtering .sticky-session-separator .btn-play {
        display:                    none;
    }

    .sticky-session-separator .filter-active {
        display:                    none;
    }

    .sticky-session-separator .filter-active:has(.filter-text:not(:empty)) {
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-xsmall);
    }

    .sticky-session-separator .btn-filter-cancel {
        color:                      var(--grey55-color);
        background:                 none;
        border:                     none;
        padding:                    0;
        display:                    flex;
        align-items:                center;
        cursor:                     pointer;
    }

    .sticky-session-separator .filter-action {
        display:                    flex;
        align-items:                center;
    }

    .sticky-session-separator .filter-text {
        color:                      var(--grey55-color);
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-regular);
        text-align:                 left;
    }

    .sticky-session-separator .filter-active:has(.filter-text:not(:empty)) {
        justify-content:            center;
        padding-bottom:             var(--gap-xxsmall);
        display:                    flex;
        flex-basis:                 100%;
        align-items:                center;
        gap:                        var(--gap-xxxsmall);
    }


    .sticky-session-separator h3 {
        color:                      var(--first-color);
        line-height:                var(--line-height-snug);
        text-align:                 center;
        min-width:                  0;
        margin:                     0;
        flex:                       1;
    }

    .sticky-session-separator h3 .session-tag {
        margin-left:                var(--gap-small);
    }

    .sticky-session-separator h3 .session-date {
        color:                      var(--white-color);
        margin-left:                var(--gap-small);
    }

    .sticky-session-separator h3 span {
        display:                    inline-block;
    }

    .sticky-session-separator h3 span::after {
        content:                    "";
    }

    @media (min-width: 640px) {

        .sticky-session-separator {
            justify-content:        center;
            text-align:             center;
            padding:                var(--gap-xxsmall) 0;
            display:                flex;
            flex-wrap:              nowrap;
            gap:                    var(--gap-xlarge);
        }

        .sticky-session-separator h3 .session-tag {
            margin-left:            0;
        }

        .sticky-session-separator h3 .session-date {
            margin-left:            var(--gap-xlarge);
        }

        .sticky-session-separator h3 span {
            display:                inline-block;
        }

        .sticky-session-separator h3 span::after {
            content:                "—";
            color:                  var(--grey60-color);
            margin-left:            var(--gap-xlarge);
        }

        .sticky-session-separator .filter-active:has(.filter-text:not(:empty)) {
            padding-bottom:         0;
            flex-basis:             auto;
        }

        .sticky-session-separator .filter-active .filter-text {
            text-transform:         uppercase;
            padding-right:          10px;
        }

    }

    @media (min-width: 1024px) {

        /* #event-sticky-session-id est position:fixed (relatif au viewport) :
           il faut ajuster sa largeur explicitement quand sidebar ou main-menu s'ouvrent.
           Les séparateurs dans .program-module / .timeline-module n'ont pas besoin de
           cette règle — ils sont à l'intérieur de #main-id qui se redimensionne déjà. */

        body.sidebar-open #event-sticky-session-id {
            width:                  calc(100% - 320px);
        }

        body.main-menu-open #event-sticky-session-id {
            width:                  calc(100% - 320px);
            margin-left:            320px;
        }

    }

    @media (hover: hover) {
        /*
        .sticky-session-separator:hover {
            transform:              scale(1.05);
        }
        */
    }


/*  EVENT MODULE : STICKY SESSION SEPARATOR ====================================
    ========================================================================= */

    #event-sticky-session-id {
        opacity:                    0;
        position:                   fixed;
        top:                        calc(var(--visible-header-height) - 10px);
        pointer-events:             none;
    }


    #event-sticky-session-id.visible {
        opacity:                    1;
        pointer-events:             auto;
    }




/*  PROGRAM MODULE =============================================================
    ========================================================================= */

    .program-module {
        --program-top-inset:        10px;
        background-color:           var(--content-fill);
        position:                   relative;
        width:                      100%;
        height:                     100vh;
        height:                     100dvh;
        padding-top:                calc(var(--visible-header-height) + var(--program-top-inset));
        padding-right:              var(--gap-normal);
        padding-bottom:             var(--gap-xlarge);
        padding-left:               var(--gap-normal);
        overflow-y:                 auto;
        scroll-snap-align:          start;
        overscroll-behavior-y:      contain;
    }

    .program-module h2 {
        color:                      inherit;
        margin:                     var(--gap-normal) 0;
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .program-module .program-grid {
        width:                      100%;
        margin:                     0 auto;
        display:                    grid;
        gap:                        var(--gap-large);
        grid-template-columns:      repeat(1, 1fr);
    }

    /* --- GRID --- */

    @media (min-width: 320px)  { .program-module .program-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 640px)  { .program-module .program-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 1024px) { .program-module .program-grid { grid-template-columns: repeat(4, 1fr); } }
    @media (min-width: 1280px) { .program-module .program-grid { grid-template-columns: repeat(5, 1fr); } }
    @media (min-width: 1536px) { .program-module .program-grid { grid-template-columns: repeat(6, 1fr); } }
    @media (min-width: 1920px) { .program-module .program-grid { grid-template-columns: repeat(7, 1fr); } }

    .program-module .item {
        background:                 var(--program-item-grad);
        border-radius:              8px;
        position:                   relative;
        box-shadow:                 0 4px 10px var(--black-a30-color);
        overflow:                   hidden;
        display:                    flex;
        flex-direction:             column;
        transition:                 transform 0.2s, box-shadow 0.2s;
        cursor:                     pointer;
    }

    .program-module .item.is-current {
        border:                     5px solid var(--first-color);
    }

    .program-module .item.is-favorite .btn-program-like {
        color:                      var(--white-color);
        background:                 var(--first-color);
        transform:                  scale(1.1);
    }

    .program-module .item.is-playing.is-current {
        border:                     5px solid var(--first-color);
    }

    .program-module .item .btn-program-like {
        z-index:                    10;
        background:                 var(--program-fav-grad);
        backdrop-filter:            blur(2px);
        border:                     none;
        border-radius:              50%;
        justify-content:            center;
        position:                   absolute;
        top:                        10px;
        left:                       10px;
        width:                      32px;
        height:                     32px;
        padding:                    0;
        display:                    flex;
        align-items:                center;
        transition:                 transform 0.2s;
        cursor:                     pointer;
    }

    .program-module .item .thumbnail-container {
        position:                   relative;
        width:                      100%;
        aspect-ratio:               16 / 9;
        overflow:                   hidden;
    }

    .program-module .item .thumbnail-image {
        width:                      100%;
        height:                     100%;
        object-fit:                 cover;
        transition:                 transform 0.5s;
    }

    .program-module .item.is-favorite .btn-program-like {
        color:                      var(--white-color);
        background:                 var(--program-fav-active-grad);
    }

    .program-module .item .info-container {
        background:                 none;
        padding:                    var(--gap-normal);
        display:                    flex;
        flex-direction:             column;
        gap:                        var(--gap-xsmall);
    }





    /* --- GENERIC : TITLE (shared truncation pattern) --- */

    .program-title,
    .program-module .item .title-row .title,
    .search-item-title,
    .timeline-title {
        color:                      var(--sidebar-title-color);
        font-weight:                var(--weight-medium);
        text-overflow:              ellipsis;
        overflow:                   hidden;
        white-space:                nowrap;
    }

    .program-title,
    .program-module .item .title-row .title {
        color:                      var(--white-color);
        font-size:                  var(--size-small);
        line-height:                var(--line-height-snug);
        text-transform:             uppercase;
        margin-top:                 0;
        margin-bottom:              0;
    }

    .program-module .item .session-date,
    .program-module .item .date,
    .program-module .item .start-date,
    .program-module .item .end-date,
    .program-module .item .start-time,
    .program-module .item .end-time,
    .program-module .item .place {
        color:                      var(--grey86-color);
        font-size:                  var(--size-xxsmall);
        line-height:                var(--line-height-snug);
        text-transform:             uppercase;
        overflow:                   hidden;
        white-space:                nowrap;
        display:                    inline-block;
    }

    .program-module .item .start-time,
    .program-module .item .end-time {
        color:                      var(--first-color);
    }

    .program-module .item .date:last-child::after,
    .program-module .item .place:last-child::after {
        content:                    "";
        margin:                     0;
    }

    body.filter-mode-favorite .program-module .item:not(.is-favorite) {
        display:                    none !important;
    }

    body.tag-filtering .program-module .item:not(.has-matching-tag) {
        display:                    none !important;
    }

    .program-module .item.is-favorite .program-title,
    .program-module .item.is-favorite .title-row .title {
        color:                      var(--first-color);
    }


    .program-module .item .title-row {
        justify-content:            space-between;
        display:                    flex;
        align-items:                center;
    }

    .program-module .item .title-row .title {
        flex:                       1;
    }


    .playing-indicator {
        height:                     16px;
        margin-top:                 var(--gap-xxxsmall);
        display:                    none;
        align-items:                flex-end;
        gap:                        var(--gap-xxxsmall);
        cursor:                     pointer;
    }

    .program-module .item .btn-play {
        color:                      var(--white-color);
        background:                 none;
        border:                     none;
        margin-top:                 0;
        padding:                    0;
        display:                    flex;
        cursor:                     pointer;
    }


    body.is-video-playing .program-module .item.is-playing:not(.is-paused) .playing-indicator {
        display:                    flex;
    }

    .program-module .item.is-playing:not(.is-paused) .btn-play {
        display:                    none;
    }

    .playing-bar {
        background-color:           var(--first-color);
        border-radius:              1px;
        transform-origin:           bottom;
        width:                      4px;
        animation:                  bounce-bars 1s infinite ease-in-out;
    }

    .playing-bar:nth-child(1) { height: 10px; animation-delay: 0.0s; }
    .playing-bar:nth-child(2) { height: 16px; animation-delay: 0.2s; }
    .playing-bar:nth-child(3) { height: 12px; animation-delay: 0.4s; }

    @keyframes bounce-bars {
        0%, 100% { transform: scaleY(1); }
        50% { transform: scaleY(0.4); }
    }

    /* --- PROGRAM CARD : SEPARATOR --- */

    .program-module .sticky-session-separator {
        position:                   sticky;
        top:                        calc(-1 * var(--program-top-inset));
        flex-direction:             row;
    }

    .program-module .sticky-session-separator.is-sticky {
        box-shadow:                 0 4px 12px var(--black-a50-color);
    }

    .program-module .sticky-sentinel {
        height:                     0;
        visibility:                 hidden;
        pointer-events:             none;
    }

    .program-module .program-grid + .sticky-session-separator {
        margin-top:                 var(--gap-xlarge);
    }

    .program-module .sticky-session-separator h3 span {
        display:                    block;
    }

    body.filter-mode-session .program-module .sticky-session-separator:not(.has-matching-tag) {
        display:                    none !important;
    }

    /* --- PROGRAM CARD : EMPTY STATE --- */

    .program-module .program-empty-placeholder {
        color:                      var(--grey60-color);
        font-size:                  var(--size-large);
        text-align:                 center;
        text-transform:             uppercase;
        padding:                    var(--gap-xxxlarge);
        display:                    none;
        grid-column:                1 / -1;
    }

    .program-module .program-empty-placeholder.visible {
        display:                    block;
    }

    /* --- RESPONSIVE --- */

    @media (min-width: 640px) {

        .program-module .sticky-session-separator h3 .session-date {
            margin-top:             0;
        }

        .program-module .sticky-session-separator h3 span {
            display:                inline-block;
        }


    }

    @media (hover: hover) {
        .program-module .item:hover {
            transform:              translateY(-5px);
            box-shadow:             0 8px 20px var(--black-a40-color);
        }

        .program-module .item:hover .thumbnail-image {
            transform:              scale(1.05);
        }
    }

    /*
    @media (hover: hover) {
        .program-module .sticky-session-separator:hover {
            transform:              scale(1.05);
        }
    }
    */


/*  TIMELINE MODULE ============================================================
    ========================================================================= */

    .timeline-module {
        background-color:           var(--content-fill);
        position:                   relative;
        width:                      100%;
        height:                     100vh;
        height:                     100dvh;
        padding-top:                calc(var(--visible-header-height) + 10px);
        padding-right:              var(--gap-normal);
        padding-bottom:             var(--gap-xlarge);
        padding-left:               var(--gap-normal);
        overflow-y:                 auto;
        scroll-snap-align:          start;
        overscroll-behavior-y:      contain;
    }

    .timeline-module h2 {
        color:                      inherit;
        max-width:                  1036px;
        margin:                     var(--gap-normal) auto 0;
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    /* --- session separator --- */

    .timeline-module .timeline-session {
        max-width:                  1036px;
        margin-right:               auto;
        margin-left:                auto;
    }

    .timeline-module .tl-sticky-header {
        z-index:                    10;
        background-color:           var(--content-fill);
        position:                   sticky;
        top:                        -10px;
        padding-bottom:             4px;
    }

    .timeline-module .timeline-session + .timeline-session .tl-sticky-header {
        margin-top:                 var(--gap-xlarge);
    }

    .timeline-module .sticky-session-separator {
        max-width:                  1036px;
        margin:                     var(--gap-small) auto;
        flex-direction:             row;
    }

    .timeline-module .sticky-session-separator.collapsed ~ .tl-col-headers {
        display:                    none;
    }

    /* --- column headers --- */

    .timeline-module .tl-col-headers,
    .timeline-module .tl-col-header {
        background-color:           var(--content-fill);
    }

    .timeline-module .tl-col-headers {
        color:                      var(--first-color);
        max-width:                  1036px;
        margin-right:               auto;
        margin-left:                auto;
        display:                    grid;
        gap:                        4px;
        grid-template-columns:      1fr 1fr 60px 1fr 1fr;
    }

    .timeline-module .tl-col-header {
        color:                      var(--white-color);
        /* background:                 var(--timeline-item-grad); */
        background-color:           var(--first-color);
        border-radius:              4px;
        font-size:                  var(--size-xxsmall);
        font-weight:                var(--weight-medium);
        text-align:                 center;
        text-overflow:              ellipsis;
        text-transform:             uppercase;
        max-width:                  235px;
        margin-right:               2px;
        margin-left:                2px;
        padding:                    4px 2px;
        overflow:                   hidden;
        white-space:                nowrap;
        cursor:                     pointer;
    }

    .timeline-module .tl-axis-header {
        background:                 none;
        background-color:           transparent;
        cursor:                     default;
    }

    /* --- grid --- */

    .timeline-module .tl-grid {
        --tl-px-hr:                 120px;
        --tl-px-10min:              20px;
        position:                   relative;
        max-width:                  1036px;
        margin-right:               auto;
        margin-left:                auto;
        display:                    grid;
        align-items:                start;
        gap:                        4px;
        grid-template-columns:      1fr 1fr 60px 1fr 1fr;
    }

    /* --- column --- */

    .timeline-module .tl-col {
        background-image:
            repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent calc(var(--tl-px-hr) - 1px),
                rgba(255, 255, 255, 0.15) calc(var(--tl-px-hr) - 1px),
                rgba(255, 255, 255, 0.15) var(--tl-px-hr)
            ),
            repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent calc(var(--tl-px-10min) - 1px),
                rgba(255, 255, 255, 0.08) calc(var(--tl-px-10min) - 1px),
                rgba(255, 255, 255, 0.08) var(--tl-px-10min)
            );
        border-radius:              4px;
        position:                   relative;
        overflow:                   visible;
    }

    body.filter-mode-place .timeline-module .tl-col:not(.has-matching-tag),
    body.filter-mode-place .timeline-module .tl-col-header:not(.tl-axis-header):not(.has-matching-tag) {
        display:                    none;
    }

    body.filter-mode-place .timeline-module .tl-col-headers {
        justify-content:            center;
        display:                    flex;
        flex-direction:             row;
    }

    body.filter-mode-place .timeline-module .tl-col-header {
        max-width:                  235px;
        flex:                       1;
    }

    body.filter-mode-place .timeline-module .tl-col-header.tl-axis-header {
        flex:                       0 0 60px;
    }

    body.filter-mode-place .timeline-module .tl-grid {
        justify-content:            center;
        display:                    flex;
        flex-direction:             row;
    }

    body.filter-mode-place .timeline-module .tl-col {
        max-width:                  235px;
        flex:                       1;
    }

    body.filter-mode-place .timeline-module .tl-axis {
        flex:                       0 0 60px;
    }

    body.filter-mode-session .timeline-module .timeline-session:not(.has-matching-tag) {
        display:                    none;
    }

    /* --- current time line --- */

    .timeline-module .tl-now-line {
        z-index:                    5;
        border-top:                 2px dashed var(--third-color);
        position:                   absolute;
        right:                      0;
        left:                       0;
        height:                     0;
        pointer-events:             none;
    }

    /* --- time axis --- */

    .timeline-module .tl-axis {
        background-image:           repeating-linear-gradient(
                                        to bottom,
                                        transparent 0,
                                        transparent calc(var(--tl-px-hr) - 1px),
                                        rgba(255, 255, 255, 0.08) calc(var(--tl-px-hr) - 1px),
                                        rgba(255, 255, 255, 0.08) var(--tl-px-hr)
                                    );
        position:                   relative;
    }

    .timeline-module .tl-time-label {
        color:                      var(--grey55-color);
        font-size:                  var(--size-xxsmall);
        font-weight:                600;
        text-align:                 center;
        text-transform:             uppercase;
        position:                   absolute;
        right:                      0;
        left:                       0;
        transform:                  translateY(-50%);
    }

    /* --- events --- */

    .timeline-module .tl-event {
        background:                 var(--timeline-item-grad);
        background-color:           var(--grey30-color);

        border-radius:              4px;
        position:                   absolute;
        right:                      2px;
        left:                       2px;
        min-height:                 20px;
        padding:                    4px;
        overflow:                   hidden;
        display:                    flex;
        flex-direction:             column;
        gap:                        2px;
        cursor:                     pointer;
        pointer-events:             all;
    }

    .timeline-module .tl-event:hover {
        filter:                     brightness(1.15);
    }

    .timeline-module .tl-event-thumb {
        border-radius:              3px;
        width:                      40px;
        height:                     auto;
        object-fit:                 cover;
        flex-shrink:                0;
    }

    .timeline-module .tl-event-info {
        min-width:                  0;
        overflow:                   hidden;
        display:                    flex;
        flex:                       1;
        flex-direction:             column;
        gap:                        2px;
    }

    .timeline-module .tl-event-title {
        color:                      var(--white-color);
        font-size:                  var(--size-xxsmall);
        font-weight:                var(--weight-regular);
        overflow:                   hidden;
        white-space:                nowrap;
    }

    .timeline-module .tl-event-time {
        color:                      var(--first-color);
        font-size:                  var(--size-xxsmall);
        font-weight:                var(--weight-medium);
        overflow:                   hidden;
        white-space:                nowrap;
    }

    /* --- responsive --- */

    @media (min-width: 320px) {

        .timeline-module .tl-event-thumb {
            width:                  48px;
            height:                 auto;
        }

    }


    @media (min-width: 480px) {

        .timeline-module .tl-event-thumb {
            width:                  55px;
            height:                 auto;
        }

    }

    @media (min-width: 640px) {

        .timeline-module .tl-col-headers,
        .timeline-module .tl-grid {
            grid-template-columns:      1fr 1fr 70px 1fr 1fr;
        }

        .timeline-module .tl-col-header {
            padding:                6px 4px;
        }

        .timeline-module .tl-event {
            flex-direction:         row;
            align-items:            flex-start;
            gap:                    6px;
        }

        .timeline-module .tl-event-thumb {
            width:                  80px;
            height:                 auto;
        }

        .timeline-module .tl-event-title {
            text-transform: uppercase;
        }

    }


/*  TICKETING MODULE ===========================================================
    ========================================================================= */

    .ticketing-module {
        background:                 var(--black-color);
        position:                   relative;
        width:                      100%;
        height:                     100vh;
        height:                     100dvh;
        min-height:                 auto;
        padding-top:                70px;
        overflow:                   hidden;
        display:                    flex;
        flex-direction:             column;
        scroll-snap-align:          start;
    }

    .ticket-title {
        justify-content:            center;
        text-align:                 center;
        width:                      100%;
        padding-top:                var(--gap-normal);
        padding-bottom:             var(--gap-normal);
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .ticket-container {
        width:                      100%;
        height:                     auto;
        padding:                    0 var(--gap-normal) var(--gap-normal) var(--gap-normal);
        display:                    flex;
        flex:                       1;
        flex-direction:             column;
        gap:                        var(--gap-normal);
    }

    .ticket-block {
        color:                      var(--white-color);
        background-size:100%;
        background-position:        center;
        background-repeat:          repeat;
        border-radius:              8px;
        justify-content:            center;
        text-align:                 center;
        margin:                     var(--gap-xsmall);
        padding:                    var(--gap-large);
        display:                    flex;
        flex:                       1;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-normal);
        transition:                 flex 0.3s ease;
        /*
        background-image:           url('../images/background/tinals-2018-trame-342x342-noir.svg');
        background-blend-mode:      hue;
        */
    }

    .ticketing-module .ticket-block h2,
    .ticketing-module .ticket-block h3 {
        color:                      inherit;
        transition:                 transform 0.3s ease;
    }

    .ticketing-module .ticket-block h2 {
        color:                      inherit;
        text-shadow:                var(--text-shadow);
        text-transform:             uppercase;
        margin:                     0;
    }

    .ticketing-module .ticket-block h3 {
        color:                      inherit;
        opacity:                    0.9;
        margin:                     0;
    }


    .btn-ticket {
        background-color:           var(--white-color);
        border-radius:              50px;
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-medium);
        text-decoration:            none;
        text-transform:             uppercase;
        box-shadow:                 0 4px 15px var(--black-a20-color);
        padding:                    var(--gap-small) var(--gap-large);
        transition:                 transform 0.2s, box-shadow 0.2s;
    }

    .btn-ticket.disabled {
        color:                      var(--grey80-color) !important;
        background-color:           var(--grey33-color) !important;
        filter:                     grayscale(100%);
        opacity:                    0.5;
        box-shadow:                 none;
        cursor:                     not-allowed;
        pointer-events:             none;
    }

    /* --- TICKETING CARD : BLOCK --- */

    .btn-ticket.full-pass-ticket    { color:            var(--full-pass-ticket-color);  }
    .btn-ticket.day-pass-ticket-1   { color:            var(--day-pass-ticket-1-color); }
    .btn-ticket.day-pass-ticket-2   { color:            var(--day-pass-ticket-2-color); }
    .ticket-block.full-pass-ticket  { background-color: var(--full-pass-ticket-color);  }
    .ticket-block.day-pass-ticket-1 { background-color: var(--day-pass-ticket-1-color); }
    .ticket-block.day-pass-ticket-2 { background-color: var(--day-pass-ticket-2-color); }

    /* --- TICKETING CARD : STATS --- */

    .ticket-stats {
        width:                      100%;
        /* margin-top:                 var(--gap-xxsmall); */
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .ticket-likes-row {
        background:                 var(--black-a20-color);
        backdrop-filter:            blur(2px);
        border-radius:              20px;
        font-size:                  var(--size-small);
        font-weight:                var(--weight-medium);
        justify-content:            center;
        padding:                    var(--gap-xsmall) var(--gap-large);
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-xsmall);
    }

    .ticket-likes-row [class*="icon-ms-"] {
        color:                      var(--white-color);
        font-size:                  var(--size-large);
    }

    .ticket-artists-count {
        opacity:                    0.9;
        font-size:                  var(--size-normal);
        font-weight:                var(--weight-medium);
        text-transform:             uppercase;
        margin-top:                 var(--gap-normal);
    }

    .ticket-artists-list {
        opacity:                    0.95;
        font-size:                  var(--size-small);
        font-weight:                var(--weight-light);
        line-height:                var(--line-height-normal);
        text-align:                 center;
        max-width:                  90%;
        margin-top:                 var(--gap-xsmall);
        display:                    none; /* Hidden on mobile */
    }

    /* --- RESPONSIVE --- */

    @media (min-width: 640px) {

        .ticketing-module {
        }

        .ticketing-module .ticket-container {
            padding:                var(--gap-xlarge);
            flex-direction:         row;
            gap:                    var(--gap-xlarge);
        }

        .ticketing-module .ticket-block {
            margin:                 var(--gap-normal);
            padding:                var(--gap-xlarge);
        }

        @media (hover: hover) {
            .ticketing-module .ticket-block:hover {
                flex:               1.6;
            }
        }

        .ticketing-module .btn-ticket {
            padding:                var(--gap-large) var(--gap-xxlarge);
            transition:             transform 0.2s, box-shadow 0.2s, transform 0.3s ease;
        }

        @media (hover: hover) {
            .ticketing-module .ticket-block:hover h2,
            .ticketing-module .ticket-block:hover h3,
            .ticketing-module .ticket-block:hover .btn-ticket {
                transform:          scale(1.2);
                margin-bottom:      var(--gap-large);
            }
        }

        .ticketing-module .ticket-artists-list {
            display:                block;
        }

        .ticketing-module .ticket-stats {
            margin-top:             var(--gap-xlarge);
        }
    }

    @media (min-width: 768px) {

        .ticketing-module .ticket-title {
            padding-top:            var(--gap-xxlarge);
        }
    }

    @media (hover: hover) {
        .btn-ticket:hover {
            transform:              scale(1.2);
            box-shadow:             0 6px 20px var(--black-a30-color);
        }
    }


/*  FILTER BAR =================================================================
    ========================================================================= */

    .filter-bar {
        z-index:                    90;
        color:                      var(--white-color);
        background-color:           var(--grey30-color);
        font-size:                  var(--size-small);
        font-weight:                var(--weight-regular);
        text-transform:             uppercase;

        position:                   fixed;
        top:                        var(--visible-header-height);
        left:                       0;
        transform:                  translateY(-100%);
        box-shadow:                 0 4px 15px var(--black-a30-color);
        width:                      100%;
        height:                     auto;
        min-height:                 50px;
        padding-right:              var(--gap-normal);
        padding-left:               var(--gap-normal);
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
        transition:                 transform 0.3s ease-in-out, top 0.4s ease, padding-top 0.4s ease, width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        cursor:                     pointer;
        /* border-radius: 0 0 15px 15px; */
    }

    .filter-bar .btn-filter {
        color:                      inherit;
        background:                 none;
        border:                     none;
        border-radius:              25px;
        text-transform:             uppercase;
        padding:                    0 var(--gap-xxxsmall);
        display:                    flex;
        align-items:                center;
        cursor:                     pointer;
    }

    .filter-bar .btn-filter [class*="icon-ms-"] {
        font-size:                  var(--icon-size-xsmall);
    }

    #filter-bar-id .btn-filter .btn-label {
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-medium);
        text-transform:             uppercase;
        margin-left:                var(--gap-xsmall);
        display:                    none;
    }

    .filter-bar .btn-filter {
        z-index:                    2;
        position:                   relative;
        flex-shrink:                0;
    }

    .filter-bar.active {
        transform:                  translateY(0);
    }

    .filter-bar-content-wrapper {
        justify-content:            center;
        min-width:                  0;
        display:                    flex;
        flex:                       1;
        align-items:                center;
        cursor:                     pointer;
    }

    .filter-bar-text {
        justify-content:            center;
        text-align:                 center;
        padding:                    0 var(--gap-xsmall);
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
        pointer-events:             auto; /* Restore interactivity if text is clicked */
    }


    body.menu-hidden .filter-bar {
        padding-top:                0;
        padding-top:                env(safe-area-inset-top);
    }

    body.is-video-playing .filter-bar.active {
        color:                      var(--white-color);
        background-color:           var(--black-color);
        border-top:                 1px solid var(--grey15-color);
        border-bottom:              1px solid var(--grey15-color);
    }

    body:has(.program-module.active) .filter-bar.active {
        background-color:           var(--black-color);
    }

    body.filter-mode-favorite #main-id > :not(.is-favorite):not(.program-module):not(.timeline-module) {
        display:                    none !important;
    }

    body.tag-filtering #main-id > :not(.has-matching-tag):not(.program-module):not(.timeline-module) {
        display:                    none !important;
    }

    /* --- RESPONSIVE --- */

    @media (min-width: 320px) {

        .filter-bar .btn-filter .btn-label {
            display:                inline-block;
        }
    }

    @media (min-width: 480px) {

        #filter-bar-id .btn-filter {
            border-radius:          25px;
            padding:                var(--gap-xsmall) var(--gap-small);
        }

        #filter-bar-id .btn-filter [class*="icon-ms-"] {
            /* font-size:           var(--icon-size-large); */
        }

        #filter-bar-id .btn-filter .btn-label {
            display:                block;
        }
    }

    @media (min-width: 640px) {

        .filter-bar {
            top:                    var(--visible-header-height);
            min-height:             65px;
            /* font-size:           var(--size-large); */
        }
    }

    /* hide filter bar on program and timeline pages */
    #main-id:has(.program-module.active) ~ #filter-bar-id,
    #main-id:has(.timeline-module.active) ~ #filter-bar-id {
        display:                    none;
    }


/*  ACTION BAR =================================================================
    ========================================================================= */

    .action-bar {
        z-index:                    9000;
        position:                   fixed;
        top:                        auto;
        right:                      5px;
        bottom:                     120px;
        padding-bottom:             var(--sab);
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-large);
        transition:                 transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .action-bar .btn-action-bar {
        color:                      var(--white-color);
        background:                 var(--action-bar-grad);
        opacity:                    1 !important;
        border:                     none;
        border-radius:              50%;
        justify-content:            center;
        text-shadow:                var(--text-shadow);
        position:                   relative;
        width:                      40px;
        height:                     40px;
        overflow:                   hidden;
        display:                    flex;
        align-items:                center;
        transition:                 transform 0.2s;
        cursor:                     pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .action-bar .btn-action-bar .btn-bg {
        z-index:                    0;
        background-color:           var(--grey35-color);
        opacity:                    0.3;
        border-radius:              50%;
        position:                   absolute;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        transition:                 opacity 0.2s, background-color 0.2s;
    }

    .action-bar .btn-action-bar .btn-bg.bright {
        background-color:           var(--grey27-color) !important;
        opacity:                    0.4 !important;
    }

    .action-bar .btn-action-bar.active {
        background:                 var(--action-bar-active-grad);
        opacity:                    1 !important;
    }

    .action-bar .btn-action-bar.active .btn-bg {
        background:                 var(--action-bar-active-grad) !important;
        opacity:                    1 !important;
    }


    .action-bar .btn-my-favorites-sidebar-toggle {
        overflow:                   visible;
    }

    .action-bar .btn-my-favorites-sidebar-toggle .icon-ms-bookmark::before {
        font-size:                  var(--icon-size-xxlarge);
    }

    .action-bar.btn-my-favorites-sidebar-toggle [class*="icon-ms-"] {
        font-size:                  var(--icon-size-xlarge);
    }

    .action-bar .btn-action-bar.disabled {
        opacity:                    0.01 !important;
        box-shadow:                 none;
        pointer-events:             none;
    }

    .action-bar .favorites-count-badge {
        z-index:                    10;
        color:                      var(--white-color);
        background-color:           transparent;
        font-family:                var(--font-content);
        font-size:                  var(--size-small);
        font-weight:                var(--weight-medium);
        line-height:                var(--line-height-flat);
        justify-content:            center;
        position:                   absolute;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        padding-bottom:             var(--gap-xxsmall);
        display:                    flex;
        align-items:                center;
        pointer-events:             none;
    }

    .action-bar .btn-action-bar [class*="icon-ms-"] {
        z-index:                    1;
        font-size:                  var(--icon-size-xlarge);
        position:                   relative;
    }

    .action-bar .visual-haptic {
        color:                      var(--first-color) !important;
        transform:                  scale(1.1);
        box-shadow:                 0 0 15px var(--white-a60-color) !important;
        transition:                 none !important;
    }

    .action-bar .visual-haptic .btn-bg {
        background-color:           var(--white-color) !important;
        opacity:                    1 !important;
    }

    body.video-desc-open #btn-action-bar-more-id .btn-bg {
        background-color:           var(--first-color) !important;
        opacity:                    1 !important;
    }

    /* --- RESPONSIVE --- */

    @media (min-width: 360px) {

        body.main-menu-open .action-bar {
            transform:              translateX(320px);
        }

        body.sidebar-open .action-bar {
            transform:              translateX(-320px);
        }
    }

    @media (min-width: 640px) {

        .action-bar {
            right:                  20px;
            padding-bottom:         0;
            gap:                    var(--gap-xlarge);
        }

        .action-bar .btn-action-bar {
        }
    }


/*  CONTROL BAR ================================================================
    ========================================================================= */

    #control-bar-id {
        z-index:                    350;
        color:                      var(--control-bar-color);
        background-color:           var(--control-bar-fill);
        border-top:                 1px solid var(--white-a10-color);
        position:                   fixed;
        bottom:                     0;
        left:                       0;
        transform:                  translateY(100%);
        width:                      100%;
        height:                     auto;
        min-height:                 40px; /* Mobile First */
        padding-top:                var(--gap-xsmall);
        padding-right:              0;
        padding-bottom:             var(--sab);
        padding-left:               0;
        display:                    flex;
        align-items:                center;
        transition:                 transform 0.3s ease-in-out, width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #control-bar-id.visible {
        transform:                  translateY(0);
    }

    #cb-slider-id {
        height:                     4px;
        flex:                       1;
        cursor:                     pointer;
        accent-color:               var(--first-color);
    }

    .cb-time-container {
        color:                      var(--grey80-color);
        font-family:                var(--font-monospaced);
        font-size:                  var(--size-xxsmall);
        margin:                     0 var(--gap-normal);
        display:                    flex;
        flex:                       1;
        align-items:                center;
        gap:                        var(--gap-normal);
    }

    #cb-play-pause-id {
        color:                      var(--white-color);
        background:                 none;
        border:                     none;
        padding:                    0 var(--gap-normal);
        display:                    flex;
        align-items:                center;
        cursor:                     pointer;
    }


/*  DRAWERS ALL ================================================================
    ========================================================================= */

    .drawer-title {
        font-size:                  var(--size-large);
        font-weight:                var(--weight-medium);
        text-transform:             uppercase;
        margin:                     auto;
        cursor:                     pointer;
    }

    .drawer-title .top-menu-logo {
        width:                      auto;
        height:                     35px;
        margin:                     0;
        margin-right:               var(--gap-normal);
        padding:                    0;
        display:                    flex;
        flex:                       0 0 content;
        align-items:                center;
        transition:                 transform 0.2s;
        cursor:                     pointer;
    }

    .drawer-title .top-menu-logo svg {
        width:                      75px;
        height:                     auto;
        aspect-ratio:               40 / 17;
    }

    .drawer-header {
        background:                 var(--drawer-fill);
        border-bottom:              1px solid var(--black-a10-color);
        justify-content:            space-between;
        padding:                    var(--gap-normal);
        display:                    flex;
        align-items:                center;
    }

    .drawer-header [class*="icon-ms-"] {
        color:                      var(--grey55-color);
    }

    .btn-home,
    .btn-close-drawer {
        background:                 none;
        border:                     none;
        font-size:                  var(--icon-size-xlarge);
        cursor:                     pointer;
    }

    /* --- RESPONSIVE --- */

    @media (hover: hover) {
        .drawer-title .top-menu-logo:hover {
            transform:              scale(1.1);
        }
    }


/*  DRAWER : SIDEBAR ===========================================================
    ========================================================================= */

    .sidebar-tabs {
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-large);
    }

    .sidebar-tab {
        color:                      var(--grey55-color);
        background:                 none;
        border:                     none;
        font-size:                  var(--size-small);
        font-weight:                var(--weight-medium);
        text-transform:             uppercase;
        position:                   relative;
        padding-bottom:             var(--gap-xsmall);
        transition:                 color 0.3s;
        cursor:                     pointer;
    }

    .sidebar-tab.active {
        color:                      var(--first-color);
    }

    .sidebar-tab.active::after {
        content:                    '';
        background-color:           var(--first-color);
        position:                   absolute;
        bottom:                     -2px;
        left:                       0;
        width:                      100%;
        height:                     2px;
    }

    #tab-program-title-id,
    #tab-timeline-title-id,
    #tab-favorites-title-id {
        text-transform:             uppercase;
    }

    .sidebar-tab-content {
        height:                     100%;
        overflow:                   hidden;
        display:                    none;
        flex-direction:             column;
    }

    .sidebar-tab-content.active {
        display:                    flex;
    }

    .sidebar-list {
        overflow-y:                 auto;
        flex:                       1;
    }

    .sidebar-list ul {
        list-style:                 none;
        margin:                     0;
        padding:                    0;
    }

    /* --- DRAWER : SIDEBAR --- */

    .sidebar {
        z-index:                    1000;
        color:                      var(--drawer-text);
        background:                 var(--drawer-fill);
        position:                   fixed;
        top:                        0;
        right:                      0;
        transform:                  translateX(100%);
        box-shadow:                 -10px 0 30px var(--black-a15-color);
        width:                      100%;
        max-width:                  320px;
        height:                     100%;
        padding-top:                var(--sat);
        padding-bottom:             var(--sab);
        display:                    flex;
        flex-direction:             column;
        transition:                 transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sidebar.active {
        transform:                  translateX(0);
    }

    .list-empty-msg {
        opacity:                    0.6;
        justify-content:            center;
        text-align:                 center;
        padding:                    var(--gap-xlarge);
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .fav-empty-msg {
        opacity:                    0.5;
        justify-content:            center;
        text-align:                 center;
        padding:                    var(--gap-xxxlarge);
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .sidebar-warning-area {
        z-index:                    10;
        color:                      1px solid var(--black-a40-color);
        background-color:           var(--white-color);
        border:                     1px solid var(--black-a40-color);
        border-radius:              20px;
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-regular);
        justify-content:            center;
        text-align:                 center;
        text-transform:             uppercase;
        margin:                     var(--gap-normal) auto;
        padding:                    var(--gap-small) var(--gap-small);
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .sidebar-warning-area button {
        color:                      var(--black-a40-color);
        background:                 none;
        border:                     none;
        padding:                    0;
        padding-left:               var(--gap-xxxsmall);
        display:                    flex;
        align-items:                center;
        cursor:                     pointer;
    }

    .sidebar-warning-area button [class*="icon-ms-"] {
        color:                      inherit;
        font-size:                  var(--icon-size-small);
    }


    /*
    .sidebar-warning-area.filter-favorites,
    .sidebar-warning-area.filter-favorites button {
        color:                      var(--filter-bar-favorite-color);
        background-color:           var(--filter-bar-favorite-fill);
    }
    .sidebar-warning-area.filter-session,
    .sidebar-warning-area.filter-session button  {
        color:                      var(--filter-bar-session-color);
        background-color:           var(--filter-bar-session-fill);
    }
    .sidebar-warning-area.filter-place,
    .sidebar-warning-area.filter-place button  {
        color:                      var(--filter-bar-place-color);
        background-color:           var(--filter-bar-place-fill);
    }
    .sidebar-warning-area.filter-mood,
    .sidebar-warning-area.filter-mood button  {
        color:                      var(--filter-bar-mood-color);
        background-color:           var(--filter-bar-mood-fill);
    }
    .sidebar-warning-area.filter-genre,
    .sidebar-warning-area.filter-genre button  {
        color:                      var(--filter-bar-genre-color);
        background-color:           var(--filter-bar-genre-fill);
    }
    .sidebar-warning-area.filter-country,
    .sidebar-warning-area.filter-country button  {
        color:                      var(--filter-bar-country-color);
        background-color:           var(--filter-bar-country-fill);
    }
    .sidebar-warning-area.filter-tag,
    .sidebar-warning-area.filter-tag button  {
        color:                      var(--filter-bar-tag-color);
        background-color:           var(--filter-bar-tag-fill);
    }
    */

    .sidebar-warning-area.hidden {
        display:                    none !important;
    }


    .sidebar-footer {
        background:                 var(--drawer-fill);
        border-top:                 1px solid var(--black-a10-color);
        margin-top:                 auto;
        padding:                    var(--gap-xlarge);
        display:                    none;
    }

    .sidebar-footer.visible {
        display:                    block;
    }

    .sidebar-tab-btn {
        border:                     none;
        border-radius:              8px;
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-medium);
        justify-content:            center;
        text-decoration:            none;
        text-transform:             uppercase;
        width:                      100%;
        margin-bottom:              var(--gap-normal);
        padding:                    var(--gap-normal);
        display:                    flex;
        align-items:                center;
        transition:                 transform 0.2s;
        cursor:                     pointer;
    }

    /*
    .sidebar-tab-btn.btn-play,
    .btn-drawer-share {
        color:                      var(--sidebar-icon-color);
        background:                 var(--sidebar-icon-fill);
    }
    */

    .sidebar-tab-btn [class*="icon-ms-"] {
        color:                      inherit;
        font-size:                  var(--icon-size-small);
        margin-right:               var(--gap-small);
    }



    /* --- SIDEBAR - LIST ITEM --- */

    .sidebar .item {
        border-bottom:              1px solid var(--grey73-color);
        padding:                    var(--gap-small) var(--gap-small) var(--gap-small) var(--gap-normal);
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-xxsmall);
        transition:                 background 0.2s;
        cursor:                     pointer;
        /* box-shadow:                 0 4px 10px var(--black-a10-color); */
    }

    .sidebar .item.is-current {
        background: var(--grey90-color);
        border-left: 4px solid var(--first-color);
        padding-left: calc(var(--gap-normal) - 2px);
    }

    .sidebar .item .info-container {
        font-size:                  var(--size-xxxsmall);
        min-width:                  0;
        display:                    flex;
        flex:                       1;
        flex-direction:             column;
        gap:                        var(--gap-xxxsmall);
    }

    .sidebar .item .thumbnail-container {
        margin-right:               var(--gap-normal);
        flex-shrink:                0;
    }

    .sidebar .item .thumbnail-image {
        border-radius:              6px;
        width:                      64px;
        height:                     64px;
        object-fit:                 cover;
        cursor:                     pointer;
    }


    .sidebar .item .title {
        color:                      var(--sidebar-title-color);
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-medium);
        text-overflow:              ellipsis;
        text-transform:             uppercase;
        margin:                     0;
        overflow:                   hidden;
        white-space:                nowrap;
        cursor:                     pointer;
    }


    .sidebar .item .time {
        white-space:                nowrap;
    }

    .sidebar .item .start-time::before {
        content:                    var(--event-datetime-separator);
        color:                      var(--first-color);
    }

    .sidebar .item .end-time::before {
        content:                    var(--event-time-separator);
        color:                      var(--first-color);
    }

    .sidebar .item .start-time,
    .sidebar .item .end-time {
        color:                      var(--sidebar-time-color);
        /* font-weight:                var(--weight-semibold); */
    }

    .sidebar .item .place {
        color:                      var(--sidebar-place-color);
        text-transform:             uppercase;
    }

    .sidebar .item .sidebar-item-tag {
        margin-top:                 var(--gap-xxsmall);
        display:                    flex;
        flex-wrap:                  wrap;
        gap:                        var(--gap-xsmall);
    }

    .sidebar .item .sidebar-item-tag .tag {
        color:                      var(--sidebar-tag-color);
        background:                 var(--sidebar-tag-fill);
        border-radius:              4px;
        font-size:                  var(--size-xxxsmall);
        font-weight:                var(--weight-medium);
        text-transform:             uppercase;
        padding:                    var(--gap-xxxsmall) var(--gap-xsmall);
        transition:                 background 0.2s;
        cursor:                     pointer;
    }

    .sidebar .item .sidebar-item-tag .tag.tag-active {
        color:                      var(--sidebar-tag-active-color);
        background-color:           var(--sidebar-tag-active-fill);
    }

    .sidebar .item .action-container {
        display:                    flex;
        flex-shrink:                0;
        align-items:                center;
        gap:                        var(--gap-xxxsmall);
    }

    .sidebar .item .btn {
        color:                      var(--sidebar-icon-color);
        background:                 var(--sidebar-icon-fill);
        border:                     none;
        padding:                    var(--gap-xxxsmall);
        flex-shrink:                0;
        transition:                 transform 0.1s;
        cursor:                     pointer;
    }

    .sidebar .item .btn.btn-fav.active {
        color:                      var(--first-color);
    }

    .sidebar .item .btn:active {
        transform:                  scale(1.2);
    }


    .sidebar .sticky-session-separator {
        color:                      var(--white-color);
        /* background:              var(--sidebar-separator-grad); */
        background-color:           var(--sticky-session-separator-color);
        border-bottom:              1px solid var(--grey80-color);
        font-size:                  var(--size-normal);
        font-weight:                var(--weight-bold);
        justify-content:            flex-start;
        text-transform:             uppercase;
        list-style:                 none;
        position:                   sticky;
        top:                        0;
        margin:                     0;
        padding:                    var(--gap-small) var(--gap-large);
        transition:                 none;
        cursor:                     default;
    }



    /* --- SIDEBAR - TAB PROGRAM --- */



    /* --- SIDEBAR - TAB FAVORITES --- */



    /* --- SIDEBAR - TAB TIMELINE --- */

    .timeline-item.past {
        opacity:                    0.35;
        pointer-events:             none;
    }




    /* --- RESPONSIVE --- */

    @media (min-width: 640px) {

        /* --- SIDEBAR --- */

        .drawer-header {
            padding:                var(--gap-large) var(--gap-xlarge);
        }

        .drawer-header [class*="icon-ms-"] {
            color:                  var(--grey55-color);
        }

        .btn-cancel-filter,
        .btn-cancel-filter [class*="icon-ms-"] {
            color:                  var(--grey55-color);
        }

    }

    @media (min-width: 1024px) {

        /* --- SIDEBAR : SPLIT SCREEN --- */

        body.sidebar-open .top-menu,
        body.sidebar-open .filter-bar,
        body.sidebar-open #main-id,
        body.sidebar-open #control-bar-id {
            width:                  calc(100% - 320px);
        }
    }

    @media (hover: hover) {
        .sidebar-tab-btn:hover {
            transform:              scale(1.02);
        }

        .sidebar .item:hover {
            box-shadow:             0 8px 20px var(--black-a40-color);
        }

        .sidebar .item .title:hover {
            color:                  var(--first-color);
        }

        .sidebar .item .sidebar-item-tag .tag:hover {
            color:                  var(--sidebar-tag-hover-color);
            background:             var(--sidebar-tag-hover-fill);
        }


    }



/*  DRAWER : MAIN MENU =========================================================
    ========================================================================= */

    .main-menu {
        z-index:                    9500; /* Higher than action-bar (9000) */
        color:                      var(--drawer-text);
        background:                 var(--drawer-fill);
        font-family:                var(--font-navigation);
        position:                   fixed;
        top:                        0;
        left:                       0;
        transform:                  translateX(-100%);
        box-shadow:                 10px 0 30px var(--black-a15-color);
        width:                      100%;
        max-width:                  none;
        height:                     100%;
        padding-top:                var(--sat);
        padding-bottom:             var(--sab);
        display:                    flex;
        flex-direction:             column;
        transition:                 transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .main-menu.active {
        transform:                  translateX(0);
    }

    .main-menu .icon-left:active {
        transform:                  scale(0.9);
    }

    .main-menu .icon-left  [class*="icon-ms-"],
    .main-menu .icon-right [class*="icon-ms-"] {
        font-size:                  var(--icon-size-xlarge);
    }

    .main-menu .icon-left {
        color:                      var(--first-color);
        opacity:                    0.6;
        font-size:                  var(--icon-size-large);
        margin-right:               var(--gap-large);
    }

    .main-menu.no-icons .icon-left {
        display:                    none;
    }

    .main-menu .main-menu.no-icons .icon-left.force-visible {
        display:                    block;
    }

    .main-menu .main-menu-content {
        overflow-y:                 auto;
        flex:                       1;
    }

    .main-menu .main-menu-list {
        list-style:                 none;
        margin:                     0;
        padding:                    0;
    }

    .main-menu .main-menu-list li {
        color:                      var(--grey20-color);
        border-bottom:              1px solid var(--black-a5-color);
        font-size:                  var(--size-small);
        font-weight:                var(--weight-medium);
        text-transform:             uppercase;
        padding:                    var(--gap-normal) var(--gap-xlarge);
        display:                    flex;
        align-items:                center;
        transition:                 background 0.2s;
        cursor:                     pointer;
    }

    .main-menu .main-menu-list li.main-menu-separator {
        background:                 var(--black-a5-color);
        border-bottom:              1px solid var(--grey80-a50-color);
        /* background-color: linen; */
        /* border-top: 1px solid var(--fourth-color); */
        height:                     10px;
        padding:                    0;
        cursor:                     default;
    }

    .main-menu .main-menu-text {
        flex:                       1;
    }

    .main-menu .icon-right {
        color:                      var(--grey60-color);
        font-size:                  var(--icon-size-large);
    }

    .main-menu .menu-search-li {
        cursor:                     pointer;
    }

    .main-menu .menu-search-li .main-menu-search-wrap {
        position:                   relative;
        min-width:                  0;
        display:                    flex;
        flex:                       1;
        align-items:                center;
    }

    .main-menu .menu-search-li .main-menu-search-icon {
        color:                      var(--grey60-color);
        font-size:                  var(--icon-size-xsmall);
        position:                   absolute;
        left:                       10px;
        pointer-events:             none;
    }

    .main-menu .menu-search-li .main-menu-search-input {
        color:                      var(--grey20-color);
        background:                 var(--black-a10-color);
        border:                     1px solid var(--grey60-color);
        border-radius:              20px;
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-light);
        text-transform:             none;
        width:                      100%;
        min-width:                  0;
        padding:                    var(--gap-xsmall) var(--gap-normal) var(--gap-xsmall) var(--gap-xxxlarge);
        cursor:                     pointer;
        pointer-events:             none;
    }

    .main-menu .menu-search-li .main-menu-search-input::placeholder {
        color:                      var(--grey60-color);
        font-style:                 italic;
    }

    .main-menu .main-menu-svg-flag-id {
        font-size:                  var(--size-normal);
        line-height:                var(--line-height-flat);
        margin-left:                var(--gap-normal);
        display:                    flex;
        align-items:                center;
    }

    .main-menu .main-menu-svg-flag-id .flag-icon {
        width:                      1.6em;
        height:                     auto;
    }

    /* MENU ACCORDION */

    .main-menu .main-menu-accordion-item {
        padding:                    0 !important;
        display:                    block !important; /* Override flex */
    }

    .main-menu .main-menu-accordion-header {
        display:                    flex;
        align-items:                center;
        cursor:                     pointer;
    }

    .main-menu .main-menu-list li,
    .main-menu .main-menu-accordion-header {
        padding:                    var(--gap-normal) var(--gap-xlarge);
    }


    .main-menu .main-menu-accordion-icon {
        color:                      var(--grey70-color);
        transition:                 transform 0.3s;
    }

    .main-menu .main-menu-accordion-item.expanded .main-menu-accordion-icon {
        transform:                  rotate(180deg);
    }

    .main-menu .main-menu-accordion-content {
        background:                 var(--black-a5-color);
        list-style:                 none;
        max-height:                 0;
        overflow-y:                 auto;
        transition:                 max-height 0.3s ease-in-out;
    }

    .main-menu .main-menu-accordion-item.expanded .main-menu-accordion-content {
        max-height:                 314px;
    }

    .main-menu .main-menu-accordion-content li {
        border-bottom:              1px solid var(--white-a50-color);
        font-size:                  var(--size-small);
        padding-left:               var(--gap-xxxlarge);
    }

    #menu-language-list-id li {
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-normal);
        cursor:                     pointer;
    }

    #menu-language-list-id li.active {
        color:                      var(--first-color);
        font-weight:                var(--weight-medium);
    }

    #menu-language-list-id .flag-icon {
        width:                      1.6em;
        height:                     auto;
        flex-shrink:                0;
    }

    .main-menu .menu-qrcode {
        border-top:                 1px solid var(--black-a10-color);
        justify-content:            center;
        padding:                    var(--gap-large);
        display:                    flex;
    }

    .main-menu .menu-qrcode svg {
        width:                      160px;
        height:                     160px;
        display:                    block;
    }

    .main-menu .main-menu-footer {
        background:                 var(--drawer-fill);
        border-top:                 1px solid var(--black-a10-color);
        justify-content:            center;
        text-align:                 center;
        padding:                    var(--gap-xlarge);
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    #txt-main-menu-version-id {
        color:                      var(--grey60-color);
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-medium);
    }

    /* --- RESPONSIVE --- */

    @media (min-width: 640px) {

        .main-menu {
            width:                  85%;
            max-width:              320px;
        }
    }

    @media (min-width: 1024px) {

        /* --- MAIN MENU : SPLIT SCREEN --- */

        body.main-menu-open #main-id,
        body.main-menu-open .top-menu,
        body.main-menu-open .filter-bar,
        body.main-menu-open #control-bar-id {
            width:                  calc(100% - 320px);
            margin-left:            320px;
        }
    }

    @media (hover: hover) {
        .main-menu .main-menu-list li:hover {
            background:             var(--black-a5-color);
        }
    }


/*  TOP MENU ===================================================================
    ========================================================================= */

    .top-menu {
        z-index:                    700;
        background:                 var(--first-color);
        font-family:                var(--font-navigation);
        justify-content:            space-between;
        position:                   fixed;
        top:                        0;
        width:                      100%;
        height:                     calc(var(--header-height) + var(--sat));
        padding:                    var(--sat) 10px 0 5px;
        display:                    flex;
        align-items:                center;
        transition:                 transform 0.4s ease, background-color 0.4s ease, width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .logo,
    .menu-logo {
        width:                      auto;
        height:                     auto;
        max-height:                 calc( var(--header-height) * 0.6);
    }

    .top-menu {
        padding:                    0;
    }

    .top-menu.auto-hidden {
        transform:                  translateY(-100%);
    }

    body.is-video-playing .top-menu {
        background-color:           var(--black-color);
    }

    body.is-video-playing .top-menu .top-menu-right .btn-ticket {
        color:                      var(--black-color);
    }

    body.is-video-playing .top-menu .top-menu-right .btn-program .top-menu-program-dropdown {
        background:                 var(--black-color);
        border-color:               var(--grey30-color);
    }

    body.is-video-playing #event-sticky-session-id {
        opacity:                    0;
        pointer-events:             none;
    }

    /* --- TOP MENU LEFT : MENU ICON + LOGO --- */


    .top-menu .top-menu-left {
        justify-content:            flex-start;
        display:                    flex;
        flex:                       0 0 auto;
        align-items:                center;
    }

    .top-menu .top-menu-left .top-menu-logo {
        width:                      auto;
        height:                     35px;
        margin:                     0;
        margin-right:               var(--gap-normal);
        padding:                    0;
        display:                    flex;
        flex:                       0 0 content;
        align-items:                center;
        transition:                 transform 0.2s;
        cursor:                     pointer;
    }

    .top-menu .top-menu-left .top-menu-logo svg {
        width:                      50px;
        height:                     auto;
        aspect-ratio:               40 / 17;
    }

    /* --- TOP MENU CENTER : empty --- */

    #top-menu-logo-left-id   {
        display:                    flex;
    }

    #top-menu-logo-center-id {
        display:                    none;
    }

    .top-menu .top-menu-center {
        justify-content:            flex-start;
        display:                    flex;
        flex:                       1;
        align-items:                center;
    }

    /* --- TOP MENU RIGHT : ACTIONS --- */

    .top-menu .top-menu-right {
        justify-content:            flex-end;
        display:                    flex;
        flex:                       1;
        align-items:                center;
        gap:                        var(--gap-xxxsmall);
    }

    /* buttons 'all' */

    .top-menu .top-menu-right .btn-top-menu {
        color:                      var(--white-color);
        background:                 transparent;
        font-size:                  var(--size-xsmall);
        text-decoration:            none;
        text-overflow:              ellipsis;
        padding:                    var(--gap-xxsmall) var(--gap-xsmall);
        overflow:                   hidden;
        white-space:                nowrap;
        display:                    flex;
        transition:                 transform 0.2s;
        cursor:                     pointer;
    }

    /* button home */

    .top-menu .top-menu-right .btn-home {
        background:                 transparent;
        border:                     0;
        display:                    none; /* hide this button on small screen */
    }

    /* button calendar */

    .top-menu .top-menu-right .btn-calendar {
        background:                 transparent;
        border:                     0;
        display:                    none;
    }

    /* button ticket */

    .top-menu .top-menu-right .btn-ticket {
        color:                      var(--first-color);
        background:                 var(--white-color);
        border:                     none;
        border-radius:              6px;
        display:                    none;
    }

    /* dropdown buttons (program + lang) */

    .top-menu .top-menu-right .btn-dropdown {
        position:                   relative;
        overflow:                   visible;
    }

    .top-menu .top-menu-right .btn-program .top-menu-program-btn {
        color:                      var(--white-color);
        background:                 none;
        border:                     none;
        font-size:                  var(--size-small);
        font-weight:                var(--weight-medium);
        justify-content:            center;
        text-transform:             uppercase;
        padding:                    0;
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-xxxsmall);
        cursor:                     pointer;
    }

    .top-menu .top-menu-right .top-menu-dropdown-arrow {
        color:                      var(--white-color);
        font-size:                  var(--size-normal);
        line-height:                var(--line-height-flat);
    }

    .top-menu .top-menu-right .btn-program .top-menu-program-dropdown {
        z-index:                    9400;
        background:                 var(--first-color);
        border:                     1px solid var(--third-color);
        border-radius:              0 0 8px 8px;
        list-style:                 none;
        position:                   absolute;
        top:                        100%;
        left:                       0;
        box-shadow:                 0 6px 12px var(--black-a30-color);
        margin:                     0;
        padding:                    var(--gap-xxsmall) 0;
        white-space:                nowrap;
    }

    .top-menu .top-menu-right .btn-program .top-menu-program-dropdown li {
        color:                      var(--white-color);
        font-size:                  var(--size-small);
        padding:                    var(--gap-normal) var(--gap-large);
        white-space:                nowrap;
        display:                    flex;
        align-items:                center;
        cursor:                     pointer;
    }

    .top-menu .top-menu-right .btn-program .top-menu-program-dropdown li.active {
        color:                      var(--fourth-color);
    }


    /* TOP-MENU : button lang */

    .top-menu .top-menu-right .btn-lang {
        font-size:                  var(--size-normal);
        min-width:                  24px;
        display:                    none;
    }

    .top-menu .top-menu-right .btn-lang .top-menu-lang-btn {
        background:                 none;
        border:                     none;
        justify-content:            center;
        padding:                    0;
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-xxxsmall);
        cursor:                     pointer;
    }

    /* TOP-MENU : button flag */

    .top-menu .top-menu-right .btn-lang .top-menu-lang-flag {
        font-size:                  var(--size-normal);
        line-height:                var(--line-height-flat);
        justify-content:            center;
        display:                    flex;
        align-items:                center;
    }

    .top-menu .top-menu-right .btn-lang .top-menu-lang-flag .flag-icon {
        width:                      1.5em;
        height:                     auto;
    }

    .top-menu .top-menu-right .btn-lang .top-menu-lang-dropdown .flag-icon {
        width:                      1.3em;
        height:                     auto;
        flex-shrink:                0;
    }

    .top-menu .top-menu-right .btn-lang .top-menu-lang-dropdown {
        z-index:                    9400;
        background:                 var(--first-color);
        border:                     1px solid var(--third-color);
        border-radius:              0 0 8px 8px;
        list-style:                 none;
        position:                   absolute;
        top:                        100%;
        right:                      0;
        box-shadow:                 0 6px 12px var(--black-a30-color);
        margin:                     0;
        padding:                    var(--gap-xxsmall) 0;
        white-space:                nowrap;
    }

    .top-menu .top-menu-right .btn-lang .top-menu-lang-dropdown li {
        color:                      var(--white-color);
        font-size:                  var(--size-xsmall);
        padding:                    var(--gap-normal) var(--gap-large);
        white-space:                nowrap;
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
        cursor:                     pointer;
    }

    .top-menu .top-menu-right .btn-lang .top-menu-lang-dropdown li.active {
        color:                      var(--fourth-color);
    }

    /* buttons home + lang  */

    .top-menu .top-menu-right .btn-home {
        padding-right:              0;
        padding-left:               0;
    }


    /* button current */

    .top-menu .top-menu-right .btn-top-menu.current {
        color:                      var(--fourth-color);
    }

    .top-menu .top-menu-right .btn-top-menu.current [class*="icon-ms-"] {
        color:                      var(--fourth-color);
    }

    .top-menu .top-menu-right .btn-program.current {
        color:                      var(--fourth-color);
    }

    /* button sidebar (mobile + tablet only) */

    .top-menu .top-menu-right .btn-sidebar {
        border:                     0;
        display:                    flex;
    }

    /* button search */

    .top-menu .top-menu-right .btn-top-search {
        border:                     0;
        display:                    flex;
    }


    .top-menu .icon-left,
    .top-menu .icon-right {
        color:                      var(--white-color);
        justify-content:            center;
        margin:                     0;
        padding:                    var(--gap-xxsmall) var(--gap-xsmall);
        display:                    flex;
        flex:                       0 0 content;
        align-items:                center;
        transition:                 transform 0.2s;
        cursor:                     pointer;
    }

    /* --- RESPONSIVE --- */

    @media (min-width: 320px) {

        .top-menu .top-menu-left .top-menu-logo svg {
            width:                  65px;
            height:                 auto;
            aspect-ratio:           40 / 17;
        }

        .top-menu .top-menu-right .btn-home,
        .top-menu .top-menu-right .btn-ticket {
            display:                none;
        }
    }

    @media (min-width: 640px) {

        .top-menu .top-menu-left,
        .top-menu .top-menu-center,
        .top-menu .top-menu-right {
            gap:                    var(--gap-xxsmall);
        }

        .top-menu .top-menu-left {
            flex:                   1;
        }

        .top-menu .top-menu-center {
            justify-content:        center;
        }

        .top-menu .top-menu-right .btn-top-menu {
            font-size:              var(--size-xxsmall);
            font-weight:            var(--weight-medium);
            text-transform:         uppercase;
            padding:                var(--gap-xxsmall) var(--gap-xsmall);
        }

        .top-menu .top-menu-right .btn-home {
            padding-right:          0;
            padding-left:           0;
        }

        .top-menu .top-menu-right .btn-ticket,
        .top-menu .top-menu-right .btn-lang    {
            display:                flex;
        }

        .top-menu .top-menu-right .btn-lang {
            /* font-size:           var(--size-large); */

        }

        .top-menu .top-menu-right .top-menu-lang-flag {
            /* font-size:           var(--size-xlarge); */
        }
    }


    @media (min-width: 280px) {
        .top-menu .top-menu-right .btn-calendar {
            display:                flex;
        }
    }

    @media (min-width: 320px) {
        .top-menu .top-menu-right .btn-home {
            display:                flex;
        }
    }



    @media (min-width: 1024px) {
        .top-menu {
            padding:                0 var(--gap-xxlarge);
        }

        .top-menu .top-menu-right {
            gap:                    var(--gap-xsmall);
        }
    }

    @media (min-width: 1280px) {

        #top-menu-logo-left-id   { display: none; }
        #top-menu-logo-center-id { display: flex; }
    }

    @media (hover: hover) {
        .top-menu .top-menu-left .top-menu-logo:hover {
            transform:              scale(1.1);
        }
    }

    @media (hover: hover) {
        .top-menu .top-menu-right .btn-program .top-menu-program-dropdown li:hover {
            background:             var(--white-a15-color);
        }
    }

    @media (hover: hover) {
        .top-menu .top-menu-right .btn-lang .top-menu-lang-dropdown li:hover {
            background:             var(--white-a15-color);
        }
    }

    @media (hover: hover) {
        .top-menu .top-menu-right .btn-top-menu:hover {
            box-shadow:             inset 0 -2px 0 var(--white-color);
        }
        .top-menu .top-menu-right .btn-ticket:hover {
            transform:              none;
            box-shadow:             inset 0 -2px 0 var(--first-color);
        }
    }

    @media (hover: hover) {
        .top-menu .icon-left:hover
        .top-menu .icon-right:hover  {
            transform:              scale(1.1);
        }
    }


/*  ABOUT MODAL ================================================================
    ========================================================================= */

    #about-modal-id {
        z-index:                    7000;
        background:                 var(--black-a80-color);
        opacity:                    0;
        justify-content:            center;
        position:                   fixed;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        visibility:                 hidden;
        display:                    flex;
        align-items:                center;
        transition:                 opacity 0.3s;
    }

    #about-modal-id.active {
        opacity:                    1;
        visibility:                 visible;
    }

    .about-box {
        color:                      var(--grey20-color);
        background:                 var(--white-color);
        border-radius:              15px;
        justify-content:            center;
        text-align:                 center;
        box-shadow:                 0 10px 30px var(--black-a50-color);
        width:                      90%;
        max-width:                  500px;
        max-height:                 80%;
        padding:                    var(--gap-xxlarge);
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .about-box h3 {
        color:                      inherit;
        margin:                     0;
    }

    .about-header {
        justify-content:            space-between;
        width:                      100%;
        margin-bottom:              var(--gap-xlarge);
        display:                    flex;
        flex-shrink:                0;
        align-items:                center;
    }


    .about-content {
        text-align:                 left;
        margin-bottom:              0;
        padding-right:              var(--gap-normal);
        overflow-y:                 auto;
        flex:                       1;
    }

    .about-press-list,
    .about-local-press-list,
    .about-programming-list {
        display:                    grid;
        gap:                        var(--gap-xsmall);
        grid-template-columns:      repeat(2, 1fr);
    }

    .about-press-list li:last-child:nth-child(odd),
    .about-local-press-list li:last-child:nth-child(odd),
    .about-programming-list li:last-child:nth-child(odd) {
        grid-column:                1 / span 2;
    }


    .about-section-title {
        color:                      var(--first-color);
        border-bottom:              1px solid var(--black-a10-color);
        font-size:                  var(--size-normal);
        text-transform:             uppercase;
        margin-top:                 var(--gap-large);
        margin-bottom:              var(--gap-normal);
        padding-bottom:             var(--gap-xsmall);
    }

    .about-section-title:first-child {
        margin-top:                 0;
    }

    .about-list {
        font-size:                  var(--size-small);
        list-style:                 none;
        margin:                     0;
        padding:                    0;
    }

    .about-list li {
        line-height:                var(--line-height-normal);
        margin-bottom:              var(--gap-small);
    }

    .about-list a {
        color:                      var(--grey20-color);
        text-decoration:            none;
        overflow-wrap:              anywhere;
        transition:                 color 0.2s;
    }

    .about-sublist {
        list-style:                 none;
        margin-top:                 var(--gap-xsmall);
        /*
        padding-left:               var(--gap-xlarge);
        border-left:                2px solid var(--black-a10-color);
        */
    }

    .about-sublist li {
        font-size:                  var(--size-small);
        margin-bottom:              var(--gap-xsmall);
    }

    /* --- ABOUT MODAL : DEVELOPER --- */

    .developer-item {
        text-align:                 left;
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-large);
    }

    .about-avatar {
        width:                      90px;
        height:                     auto;
        object-fit:                 cover;
        flex-shrink:                0;
    }

    .developer-info {
        display:                    flex;
        flex-direction:             column;
    }

    .about-social {
        border-top:                 1px solid var(--black-a10-color);
        justify-content:            center;
        text-align:                 center;
        margin-top:                 var(--gap-xlarge);
        padding-top:                var(--gap-normal);
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .about-social a {
        color:                      var(--facebook-color);
        background:                 transparent;
        font-size:                  var(--size-small);
        font-weight:                var(--weight-medium);
        text-decoration:            none;
        padding:                    var(--gap-normal) var(--gap-xlarge);
        display:                    inline-flex;
        align-items:                center;
        gap:                        var(--gap-normal);
        transition:                 transform 0.2s;
    }

    .facebook-icon-about {
        width:                      32px;
        height:                     32px;
    }


    .about-sublist.about-organizer-list {
        border-left:                none;
        justify-content:            space-around;
        margin-top:                 var(--gap-large);
        padding-left:               0;
        display:                    flex;
        flex-direction:             row;
        align-items:                flex-start;
        gap:                        var(--gap-large);
    }

    .about-sublist.about-organizer-list li {
        justify-content:            center;
        margin-bottom:              0;
        display:                    flex;
        flex:                       1;
    }

    .about-organizer-link {
        color:                      inherit;
        justify-content:            center;
        text-align:                 center;
        text-decoration:            none;
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .about-organizer-link .organizer-logo {
        color:                      var(--grey20-color);
        fill:                       currentColor;
        width:                      100%;
        max-width:                  80px;
        height:                     auto;
        max-height:                 50px;
        transition:                 color 0.2s, transform 0.2s;
    }

    .about-organizer-link span {
        font-size:                  var(--size-small);
        line-height:                var(--line-height-snug);
    }

    /* --- RESPONSIVE --- */

    @media (hover: hover) {
        .about-list a:hover {
            color:                  var(--first-color);
            text-decoration:        underline;
        }
    }

    @media (hover: hover) {
        .about-social a:hover {
            transform:              scale(1.05);
        }
    }

    @media (hover: hover) {
        .about-organizer-link:hover .organizer-logo {
            color:                  var(--first-color);
            transform:              scale(1.1);
        }
    }


/*  CONFIRM MODAL ==============================================================
    ========================================================================= */

    #confirm-modal-id {
        z-index:                    8000;
        background:                 var(--black-a80-color);
        opacity:                    0;
        justify-content:            center;
        position:                   fixed;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        visibility:                 hidden;
        display:                    flex;
        align-items:                center;
        transition:                 opacity 0.3s;
    }

    #confirm-modal-id.active {
        opacity:                    1;
        visibility:                 visible;
    }

    .confirm-box {
        color:                      var(--grey20-color);
        background:                 var(--white-color);
        border-radius:              12px;
        justify-content:            center;
        text-align:                 center;
        box-shadow:                 0 10px 40px var(--black-a50-color);
        width:                      85%;
        max-width:                  350px;
        padding:                    var(--gap-xxlarge);
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .confirm-box h3 {
        color:                      inherit;
        margin:                     0 0 var(--gap-large) 0;
    }


    .confirm-box p {
        color:                      var(--grey33-color);
        font-size:                  var(--size-normal);
        line-height:                var(--line-height-normal);
        margin-bottom:              var(--gap-xxlarge);
    }

    .confirm-buttons {
        justify-content:            center;
        display:                    flex;
        gap:                        var(--gap-large);
    }

    .btn-confirm {
        border:                     none;
        border-radius:              4px;
        font-size:                  var(--size-small);
        font-weight:                var(--weight-medium);
        text-transform:             uppercase;
        padding:                    var(--gap-normal) var(--gap-xlarge);
        transition:                 background 0.2s;
        cursor:                     pointer;
    }

    .btn-confirm.yes {
        color:                      var(--white-color);
        background:                 var(--first-color);
    }

    .btn-confirm.no {
        color:                      var(--grey20-color);
        background:                 var(--grey80-color);
    }


/*  FEATURES MODAL =============================================================
    ========================================================================= */

    #features-modal {
        z-index:                    7000;
        background:                 var(--black-a80-color);
        opacity:                    0;
        justify-content:            center;
        position:                   fixed;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        visibility:                 hidden;
        display:                    flex;
        align-items:                center;
        transition:                 opacity 0.3s;
    }

    #features-modal.active {
        opacity:                    1;
        visibility:                 visible;
    }

    .features-box {
        color:                      var(--drawer-text);
        background:                 var(--drawer-fill);
        border-radius:              15px;
        justify-content:            center;
        text-align:                 center;
        box-shadow:                 0 10px 30px var(--black-a50-color);
        width:                      90%;
        max-width:                  600px;
        height:                     80%;
        padding:                    var(--gap-xxlarge);
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .features-box h3 {
        color:                      inherit;
        margin-top:                 0;
        margin-bottom:              var(--gap-xlarge);
        flex-shrink:                0;
    }


    #features-list {
        text-align:                 left;
        margin-bottom:              var(--gap-xlarge);
        padding-right:              var(--gap-normal);
        overflow-y:                 auto;
        flex:                       1;
    }

    .feature-item {
        border-bottom:              1px solid var(--black-a10-color);
        font-size:                  var(--size-small);
        justify-content:            space-between;
        padding:                    var(--gap-normal) 0;
        display:                    flex;
        align-items:                center;
    }

    .feature-item:last-child {
        border-bottom:              none;
    }

    .feature-key {
        color:                      var(--grey33-color);
        font-weight:                var(--weight-medium);
        word-break:                 break-all;
        margin-right:               var(--gap-large);
        flex:                       1;
    }

    .feature-value {
        color:                      var(--first-color);
        font-family:                var(--font-monospaced);
        text-align:                 right;
        max-width:                  50%;
    }

    .feature-value [class*="icon-ms-"] {
        font-size:                  var(--size-large);
        vertical-align:             middle;
    }

    .close-features {
        color:                      var(--white-color);
        background:                 var(--first-color);
        border:                     none;
        border-radius:              8px;
        font-size:                  var(--size-normal);
        font-weight:                var(--weight-medium);
        text-transform:             uppercase;
        padding:                    var(--gap-normal) var(--gap-xxlarge);
        align-self:                 center;
        transition:                 transform 0.2s;
        cursor:                     pointer;
    }

    .tag-name-label {
        color:                      var(--white-color);
        margin-left:                var(--gap-xsmall);
    }

    /* --- RESPONSIVE --- */

    @media (hover: hover) {
        .close-features:hover {
            transform:              scale(1.05);
        }
    }


/*  INSTALL MODAL ==============================================================
    ========================================================================= */

    #install-modal-id {
        z-index:                    7000;
        background:                 var(--black-a80-color);
        opacity:                    0;
        justify-content:            center;
        position:                   fixed;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        visibility:                 hidden;
        display:                    flex;
        align-items:                center;
        transition:                 opacity 0.3s;
    }

    #install-modal-id.active {
        opacity:                    1;
        visibility:                 visible;
    }

    .install-box {
        color:                      var(--grey20-color);
        background:                 var(--white-color);
        border-radius:              12px;
        justify-content:            center;
        text-align:                 center;
        box-shadow:                 0 10px 40px var(--black-a50-color);
        width:                      85%;
        max-width:                  350px;
        padding:                    var(--gap-xxlarge);
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .install-box h3 {
        color:                      inherit;
        margin-top:                 0;
        margin-bottom:              var(--gap-xlarge);
    }


    #install-text,
    .install-box p {
        color:                      var(--grey33-color);
        font-size:                  var(--size-normal);
        line-height:                var(--line-height-normal);
        margin-bottom:              var(--gap-xxlarge);
    }

    .install-buttons {
        justify-content:            center;
        display:                    flex;
        gap:                        var(--gap-large);
    }

    .btn-install {
        color:                      var(--white-color);
        border:                     none;
        border-radius:              8px;
        font-size:                  var(--size-normal);
        font-weight:                var(--weight-medium);
        text-transform:             uppercase;
        padding:                    var(--gap-normal) var(--gap-xxlarge);
        transition:                 transform 0.2s;
        cursor:                     pointer;
    }

    .btn-install.yes {
        background:                 var(--first-color);
    }

    .btn-install.disabled {
        color:                      var(--grey80-color) !important;
        background-color:           var(--grey33-color) !important;
        filter:                     grayscale(100%);
        opacity:                    0.5;
        box-shadow:                 none;
        cursor:                     not-allowed;
        pointer-events:             none;
    }

    .btn-install.no {
        color:                      var(--grey20-color);
        background:                 var(--grey86-color);
    }

    /* Uninstall mode: hide install button, show instructions */

    .pwa-uninstall-info {
        color:                      var(--grey55-color);
        font-size:                  var(--size-small);
        line-height:                var(--line-height-medium);
        text-align:                 left;
        margin-top:                 var(--gap-normal);
        margin-bottom:              0;
        display:                    none;
    }

    #install-modal-id.uninstall-mode #btn-pwa-install-id {
        display:                    none;
    }

    #install-modal-id.uninstall-mode .pwa-uninstall-info {
        display:                    block;
    }


    /* --- RELOAD BUTTON --- */

    .btn-reload {
        color:                      var(--white-color);
        background-color:           var(--first-color);
        border:                     none;
        border-radius:              50px;
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-medium);
        text-decoration:            none;
        text-transform:             uppercase;
        box-shadow:                 0 4px 15px var(--black-a30-color);
        width:                      auto;
        min-width:                  200px;
        padding:                    var(--gap-normal) var(--gap-xxlarge);
        white-space:                nowrap;
        flex:                       unset;
        transition:                 transform 0.2s;
        cursor:                     pointer;
    }

    /* --- RESPONSIVE --- */

    @media (hover: hover) {
        .btn-install:hover {
            transform:              scale(1.05);
        }
    }


/*  SEARCH MODAL ===============================================================
    ========================================================================= */

    #search-modal-id {
        z-index:                    8500;
        background:                 var(--black-a80-color);
        opacity:                    0;
        justify-content:            center;
        position:                   fixed;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        padding-top:                60px;
        visibility:                 hidden;
        display:                    flex;
        align-items:                flex-start;
        transition:                 opacity 0.3s;
    }

    #search-modal-id.active {
        opacity:                    1;
        visibility:                 visible;
    }

    .search-box {
        color:                      var(--grey20-color);
        background:                 var(--white-color);
        border-radius:              15px;
        box-shadow:                 0 10px 30px var(--black-a50-color);
        width:                      90%;
        max-width:                  540px;
        max-height:                 80vh;
        overflow:                   hidden;
        display:                    flex;
        flex-direction:             column;
    }

    .search-box .search-header h3 {
        color:                      inherit;
        margin:                     0;
        flex:                       1;
    }

    .search-header {
        border-bottom:              1px solid var(--grey86-color);
        padding:                    var(--gap-large) var(--gap-xlarge);
        display:                    flex;
        flex-shrink:                0;
        align-items:                center;
        gap:                        var(--gap-normal);
    }

    .search-input-wrap {
        border-bottom:              1px solid var(--grey86-color);
        padding:                    var(--gap-normal) var(--gap-xlarge);
        display:                    flex;
        flex-shrink:                0;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .search-input-icon {
        color:                      var(--grey55-color);
        font-size:                  var(--icon-size-xsmall);
    }

    .search-input {
        color:                      var(--grey20-color);
        background:                 transparent;
        border:                     none;
        outline:                    none;
        font-size:                  var(--size-normal);
        flex:                       1;
    }

    .search-input::placeholder {
        color:                      var(--grey55-color);
    }

    .search-results {
        list-style:                 none;
        margin:                     0;
        padding:                    0;
        overflow-y:                 auto;
        flex:                       1;
    }

    .search-item {
        border-bottom:              1px solid var(--grey90-color);
        padding:                    var(--gap-normal) var(--gap-xlarge);
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-normal);
        cursor:                     pointer;
    }

    .search-item:last-child {
        border-bottom:              none;
    }

    .search-item .thumbnail {
        border-radius:              6px;
        width:                      50px;
        height:                     50px;
        object-fit:                 cover;
    }

    .search-item-body {
        min-width:                  0;
        display:                    flex;
        flex:                       1;
        flex-direction:             column;
        gap:                        var(--gap-xxxsmall);
        cursor:                     pointer;
    }

    .search-item-title-row {
        display:                    flex;
        align-items:                baseline;
        gap:                        var(--gap-xsmall);
    }

    .search-item-title {
        font-size:                  var(--size-small);
    }

    .search-item-subtitle {
        color:                      var(--grey55-color);
        font-size:                  var(--size-xxsmall);
        flex-shrink:                0;
    }

    .search-item-meta {
        color:                      var(--grey55-color);
        font-size:                  var(--size-xxsmall);
        text-overflow:              ellipsis;
        overflow:                   hidden;
        white-space:                nowrap;
    }

    .btn-search {
        color:                      var(--grey20-color);
        background:                 none;
        border:                     none;
        font-size:                  var(--icon-size-normal);
        padding:                    var(--gap-xxsmall);
        flex-shrink:                0;
        cursor:                     pointer;
    }

    .btn-search-fav.active {
        color:                      var(--first-color);
    }

    .search-empty {
        color:                      var(--grey55-color);
        font-size:                  var(--size-small);
        text-align:                 center;
        padding:                    var(--gap-xlarge);
    }

    /* --- RESPONSIVE --- */

    @media (hover: hover) {
        .search-item-body:hover .search-item-title,
        .search-item .thumbnail:hover {
            color:                  var(--first-color);
        }
    }

    @media (hover: hover) {
        .btn-search:hover {
            color:                  var(--first-color);
        }
    }


/*  SHARE MODAL ================================================================
    ========================================================================= */

    #share-modal-id {
        z-index:                    6000;
        background:                 var(--black-a80-color);
        opacity:                    0;
        justify-content:            center;
        position:                   fixed;
        top:                        0;
        left:                       0;
        width:                      100%;
        height:                     100%;
        visibility:                 hidden;
        display:                    flex;
        align-items:                center;
        transition:                 opacity 0.3s;
    }

    #share-modal-id.active {
        opacity:                    1;
        visibility:                 visible;
    }

    .share-box {
        color:                      var(--grey20-color);
        background:                 var(--white-color);
        border:                     1px solid var(--black-a10-color);
        border-radius:              15px;
        justify-content:            center;
        text-align:                 center;
        box-shadow:                 0 10px 30px var(--black-a50-color);
        width:                      90%;
        max-width:                  400px;
        padding:                    var(--gap-xxlarge);
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .share-box h3 {
        color:                      inherit;
        text-transform:             uppercase;
        margin-top:                 0;
        margin-bottom:              var(--gap-xlarge);
    }


    #txt-share-title-id {
        min-height:                 1.2rem;
        display:                    block;
    }

    .share-options {
        margin-bottom:              var(--gap-xlarge);
        display:                    flex;
        flex-direction:             column;
        gap:                        var(--gap-normal);
    }

    .btn-modal-share {
        color:                      var(--white-color);
        border:                     none;
        border-radius:              8px;
        font-size:                  var(--size-normal);
        font-weight:                var(--weight-medium);
        justify-content:            center;
        padding:                    var(--gap-normal);
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-normal);
        transition:                 transform 0.2s;
        cursor:                     pointer;
    }

    .btn-modal-share svg {
        width:                      30px;
        max-width:                  30px;
        height:                     auto;
        flex-shrink:                0;
    }

    .btn-modal-share.facebook {
        background:                 var(--facebook-color);
    }

    .btn-modal-share.email {
        background:                 var(--grey30-color);
    }

    .btn-modal-share.tiktok {
        background:                 var(--black-color);
        border:                     1px solid var(--grey20-color);
    }

    .btn-modal-share.copy {
        background:                 var(--first-color);
    }

    .btn-modal-share.qr {
        background:                 var(--first-color);
    }

    .close-share {
        color:                      var(--white-color);
        background:                 var(--first-color);
        border:                     none;
        border-radius:              20px;
        padding:                    var(--gap-small) var(--gap-xlarge);
        display:                    inline-flex;
        align-items:                center;
        gap:                        var(--gap-xsmall);
        cursor:                     pointer;
    }

    #btn-close-share-id [class*="icon-ms-"] {
        color:                      var(--white-color);
        font-size:                  var(--icon-size-xsmall);
    }

    #qr-result-id {
        margin-top:                 var(--gap-large);
        margin-bottom:              var(--gap-large);
        display:                    none;
    }

    #qr-result-id svg {
        border:                     4px solid var(--white-color);
        border-radius:              8px;
        width:                      200px;
        height:                     200px;
        margin:                     0 auto;
        display:                    block;
    }

    #share-link-display-id {
        color:                      var(--first-color);
        font-size:                  var(--size-small);
        font-weight:                var(--weight-light);
        line-height:                var(--line-height-normal);
        text-decoration:            underline;
        word-break:                 break-all;
        margin-bottom:              var(--gap-xsmall);
        padding:                    0 var(--gap-normal);
        cursor:                     pointer;
    }

    #share-link-label-id {
        color:                      var(--grey20-color);
        opacity:                    0.8;
        font-size:                  var(--size-xsmall);
        justify-content:            center;
        text-align:                 center;
        margin-bottom:              var(--gap-xlarge);
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    /* --- RESPONSIVE --- */

    @media (hover: hover) {
        .btn-modal-share:hover {
            transform:              scale(1.02);
        }
    }


/*  SPLASH MODAL (pre-launch teaser) ===========================================
    ========================================================================= */

    /* --- splash box : overlay --- */

    #splash-modal-id {
        z-index:                    9800;
        background:                 var(--black-a85-color);
        opacity:                    0;
        position:                   fixed;
        inset:                      0;
        visibility:                 hidden;
        display:                    flex;
        transition:                 opacity 0.4s;
    }

    #splash-modal-id.active {
        opacity:                    1;
        visibility:                 visible;
    }

    /* --- splash box : colonne pleine hauteur sur mobile --- */

    .splash-box {
        width:                      100%;
        padding-top:                env(safe-area-inset-top, 0);
        padding-bottom:             env(safe-area-inset-bottom, 0);
        overflow:                   hidden;
        display:                    flex;
        flex-direction:             column;
    }

    /* --- splash header : logo + title + subtitle --- */

    .splash-header {
        text-align:                 center;
        padding:                    var(--gap-xxlarge) var(--gap-xxlarge) var(--gap-xlarge);
        display:                    flex;
        flex-direction:             column;
        flex-shrink:                0;
        align-items:                center;
        gap:                        var(--gap-small);
    }

    .splash-logo {
        width:                      140px;
        height:                     auto;
    }

    .splash-title {
        color:                      var(--first-color);
        font-size:                  var(--size-xlarge);
        font-weight:                var(--weight-medium);
        /* letter-spacing:          0.08em; */
        text-transform:             uppercase;
        margin:                     var(--gap-normal) 0;
    }

    .splash-subtitle {
        color:                      var(--white-color);
        opacity:                    0.85;
        font-size:                  var(--size-small);
        font-weight:                var(--weight-medium);
        margin:                     0;
    }

    /* --- splash body : message scrollable --- */

    .splash-body {
        padding:                    0 var(--gap-xxlarge);
        overflow-y:                 auto;
        flex:                       1;
        -webkit-overflow-scrolling: touch;
    }

    .splash-message {
        padding:                    var(--gap-xxsmall) 0 var(--gap-xlarge);
        display:                    flex;
        flex-direction:             column;
        gap:                        var(--gap-normal);
    }

    .splash-message p {
        color:                      var(--white-color);
        opacity:                    0.7;
        font-size:                  var(--size-xsmall);
        line-height:                var(--line-height-relaxed);
        text-align:                 left;
        margin:                     0;
    }

    /* --- splash footer : countdown + checkbox + button --- */

    .splash-footer {
        border-top:                 1px solid var(--white-a10-color);
        padding:                    var(--gap-large) var(--gap-xxlarge) var(--gap-xxlarge);
        display:                    flex;
        flex-direction:             column;
        flex-shrink:                0;
        align-items:                center;
        gap:                        var(--gap-large);
    }

    .countdown {
        color:                      var(--white-color);
        border:                     1px solid var(--first-color);
        border-radius:              6px;
        font-size:                  var(--size-small);
        font-weight:                var(--weight-medium);
        line-height:                var(--line-height-medium);
        justify-content:            center;
        text-align:                 center;
        box-sizing:                 border-box;
        width:                      100%;
        margin:                     0;
        padding:                    var(--gap-normal) var(--gap-large);
    }

    .splash-no-show-wrap {
        color:                      var(--white-color);
        opacity:                    0.6;
        font-size:                  var(--size-xsmall);
        justify-content:            center;
        box-sizing:                 border-box;
        width:                      100%;
        min-height:                 44px;
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-normal);
        cursor:                     pointer;
    }

    .splash-no-show-again {
        width:                      18px;
        height:                     18px;
        flex-shrink:                0;
        cursor:                     pointer;
        accent-color:               var(--first-color);
    }

    .btn-splash-go {
        color:                      var(--white-color);
        background:                 var(--first-color);
        border:                     none;
        border-radius:              8px;
        font-family:                inherit;
        font-size:                  var(--size-small);
        font-weight:                var(--weight-medium);
        letter-spacing:             0.05em;
        text-transform:             uppercase;
        /* width:                   100%; */
        /* min-height:              50px; */
        padding:                    var(--gap-normal) var(--gap-xlarge);
        transition:                 opacity 0.2s;
        cursor:                     pointer;
        touch-action:               manipulation;
    }

    .btn-splash-go:active {
        opacity:                    0.7;
    }

    /* --- RESPONSIVE --- */

    @media (hover: hover) {
        .btn-splash-go:hover {
            opacity:                0.85;
        }
    }

    /* --- Tablette : carte centrée flottante --- */

    @media (min-width: 640px) {

        #splash-modal-id {
            background:             var(--black-a85-color);
            justify-content:        center;
            align-items:            center;
        }

        .splash-box {
            background:             var(--content-fill);
            border:                 1px solid var(--white-a10-color);
            border-radius:          16px;
            box-shadow:             0 24px 64px var(--black-a50-color);
            width:                  90%;
            max-width:              520px;
            max-height:             82vh;
            padding:                0;
            overflow:               hidden;
        }

        .splash-header {
            padding:                var(--gap-xxxlarge) var(--gap-xxxlarge) var(--gap-xlarge);
            gap:                    var(--gap-normal);
        }

        .splash-logo {
            width:                  220px;
        }

        .splash-body {
            padding:                0 var(--gap-xxxlarge);
        }

        .splash-footer {
            padding:                var(--gap-xlarge) var(--gap-xxxlarge) var(--gap-xxlarge);
            gap:                    var(--gap-large);
        }
    }


/*  VERSION INDICATOR ==========================================================
    ========================================================================= */

    #app-version-indicator-id {
        z-index:                    800;
        color:                      var(--white-color);
        background:                 var(--first-color);
        backdrop-filter:            blur(2px);
        border-radius:              4px;
        font-size:                  var(--size-xxsmall);
        font-weight:                var(--weight-medium);
        text-transform:             uppercase;
        position:                   fixed;
        top:                        70px;
        left:                       5px;
        padding:                    var(--gap-xxsmall) var(--gap-small);
        display:                    none; /* hide by default */
        cursor:                     pointer;
        pointer-events:             auto;
    }

    #app-version-indicator-id.visible {
        display:                    block;
    }


/*  STATUS-BADGE ===============================================================
    ========================================================================= */

    .status-badge {
        border-radius:              4px;
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-medium);
        text-transform:             uppercase;
        padding:                    var(--gap-xsmall) var(--gap-normal);
        display:                    inline-block;
    }

    .status-badge.status-canceled {
        color:                      var(--status-canceled-color);
        background-color:           var(--status-canceled-fill);
    }

    .status-badge.status-moved-online {
        color:                      var(--status-moved-online-color);
        background-color:           var(--status-moved-online-fill);
    }

    .status-badge.status-postponed {
        color:                      var(--status-postponed-color);
        background-color:           var(--status-postponed-fill);
    }

    .status-badge.status-rescheduled {
        color:                      var(--status-rescheduled-color);
        background-color:           var(--status-rescheduled-fill);
    }

    .status-badge.status-scheduled {
        color:                      var(--status-scheduled-color);
        background-color:           var(--status-scheduled-fill);
    }

    /* Position in video module */

    .event-module .event-container .status-badge {
        z-index:                    8;
        font-size:                  var(--size-xlarge);
        box-shadow:                 0 2px 8px var(--black-a30-color);
        margin-top:                 var(--gap-large);
    }

    /* Position in timeline */

    .timeline-item .status-badge {
        font-size:                  var(--size-xxxsmall);
        margin-right:               var(--gap-xsmall);
        padding:                    var(--gap-xxxsmall) var(--gap-xsmall);
    }


/*  TOAST MESSAGE ==============================================================
    ========================================================================= */

    #toast-id {
        z-index:                    5000;
        color:                      var(--toast-color);
        background-color:           var(--toast-fill);
        opacity:                    0;
        border-radius:              20px;
        font-size:                  var(--size-normal);
        font-weight:                var(--weight-light);
        justify-content:            center;
        text-align:                 center;
        text-transform:             uppercase;
        position:                   fixed;
        top:                        30%;
        left:                       50%;
        transform:                  translate(-50%, -50%);
        box-shadow:                 0 4px 15px var(--black-a50-color);
        padding:                    var(--gap-small) var(--gap-xxlarge);
        white-space:                nowrap;
        visibility:                 hidden;
        display:                    flex;
        align-items:                center;
        gap:                        var(--gap-small);
        transition:                 opacity 0.3s ease, visibility 0.3s;
        pointer-events:             none;
    }

    #toast-id span {
        font-weight:                var(--weight-light);
    }

    #toast-id.visible {
        opacity:                    1;
        visibility:                 visible;
    }


/*  TOOLTIPS ===================================================================
    ========================================================================= */

    #tooltip-global-id {
        z-index:                    2147483647;
        color:                      var(--tooltips-color);
        background-color:           var(--tooltips-fill);
        opacity:                    0;
        border-radius:              4px;
        font-size:                  var(--size-xsmall);
        font-weight:                var(--weight-light);
        text-transform:             none;
        position:                   fixed;
        box-shadow:                 0 2px 5px var(--black-a20-color);
        padding:                    var(--gap-xsmall) var(--gap-normal);
        white-space:                nowrap;
        visibility:                 hidden;
        transition:                 opacity 0.2s ease, visibility 0.2s ease;
        pointer-events:             none;
    }

    /* Arrow connector (rotated square) */

    #tooltip-global-id::before {
        content:                    '';
        background-color:           var(--tooltips-fill);
        position:                   absolute;
        left:                       var(--arrow-x, 50%);
        transform:                  rotate(45deg);
        width:                      8px;
        height:                     8px;
        margin-left:                -4px;
    }

    #tooltip-global-id:not([data-pos="above"])::before {
        top:                        -4px;
        box-shadow:                 -1px -1px 2px var(--black-a10-color);
    }

    #tooltip-global-id[data-pos="above"]::before {
        bottom:                     -4px;
        box-shadow:                 1px 1px 2px var(--black-a10-color);
    }

    #tooltip-global-id.visible {
        opacity:                    1;
        visibility:                 visible;
    }


/*  REDIRECT OVERLAY (migration thisisnotalovesong.fr → www.tinals.fr) =========
    ========================================================================= */

    #redirect-overlay-id {
        z-index:                    2147483646;
        color:                      var(--grey93-color);
        background:                 var(--grey7-color);
        font-family:                var(--font-content);
        justify-content:            center;
        text-align:                 center;
        position:                   fixed;
        inset:                      0;
        padding:                    var(--gap-xxlarge);
        display:                    flex;
        flex-direction:             column;
        align-items:                center;
    }

    .redirect-card {
        background:                 var(--grey12-color);
        border:                     1px solid var(--white-a8-color);
        border-radius:              16px;
        box-shadow:                 0 8px 40px var(--black-a50-color);
        width:                      100%;
        max-width:                  520px;
        padding:                    var(--gap-xxxlarge) var(--gap-xxlarge);
    }

    .redirect-logo {
        color:                      var(--grey60-color);
        font-size:                  var(--size-large);
        font-weight:                var(--weight-light);
        letter-spacing:             0.15em;
        text-transform:             uppercase;
        margin-bottom:              var(--gap-xsmall);
    }

    .redirect-title {
        color:                      var(--first-color);
        font-size:                  var(--size-xxlarge);
        font-weight:                var(--weight-medium);
        letter-spacing:             0.05em;
        text-transform:             uppercase;
        margin-bottom:              var(--gap-xlarge);
    }

    .redirect-img {
        border-radius:              12px;
        width:                      80px;
        height:                     80px;
        margin-bottom:              var(--gap-xxsmall);
    }

    .redirect-headline {
        font-size:                  var(--size-xxlarge);
        font-weight:                var(--weight-medium);
        margin-top:                 var(--gap-xlarge);
        margin-bottom:              var(--gap-normal);
    }

    .redirect-description {
        color:                      var(--grey60-color);
        font-size:                  var(--size-small);
        line-height:                var(--line-height-relaxed);
        margin-bottom:              var(--gap-xxlarge);
    }

    .redirect-new-url {
        color:                      var(--white-color);
        background:                 var(--primary-a10-color);
        border:                     1px solid var(--primary-a30-color);
        border-radius:              8px;
        font-size:                  var(--size-xlarge);
        font-weight:                var(--weight-medium);
        word-break:                 break-all;
        margin-bottom:              var(--gap-xxlarge);
        padding:                    var(--gap-normal) var(--gap-xlarge);
        display:                    inline-block;
    }

    .redirect-btn {
        color:                      var(--white-color);
        background:                 var(--first-color);
        border:                     none;
        border-radius:              40px;
        font-size:                  var(--size-normal);
        font-weight:                var(--weight-medium);
        letter-spacing:             0.08em;
        text-decoration:            none;
        text-transform:             uppercase;
        margin-bottom:              var(--gap-xxlarge);
        padding:                    var(--gap-large) var(--gap-xxxlarge);
        display:                    inline-block;
        transition:                 opacity 0.2s, transform 0.2s;
        cursor:                     pointer;
    }

    .redirect-countdown-wrap {
        color:                      var(--grey60-color);
        font-size:                  var(--size-xsmall);
    }

    #redirect-countdown-id {
        color:                      var(--grey93-color);
        font-weight:                var(--weight-medium);
    }

    .redirect-progress-wrap {
        background:                 var(--white-a8-color);
        border-radius:              2px;
        height:                     3px;
        margin-top:                 var(--gap-normal);
        overflow:                   hidden;
    }

    .redirect-progress-bar {
        background:                 var(--first-color);
        border-radius:              2px;
        transform-origin:           left;
        width:                      100%;
        height:                     100%;
        animation:                  redirect-shrink 10s linear forwards;
    }

    @keyframes redirect-shrink {
        from { transform: scaleX(1); }
        to   { transform: scaleX(0); }
    }

    .redirect-footer {
        color:                      var(--grey40-color);
        font-size:                  var(--size-xxsmall);
        margin-top:                 var(--gap-xxlarge);
    }

    /* --- RESPONSIVE --- */

    @media (hover: hover) {
        .redirect-btn:hover {
            opacity:                0.85;
            transform:              scale(1.03);
        }
    }