/* Auto-generated bundle v2 from CSS modules - Do not edit directly */

/* === vars.css === */
/**
 * VARIABLES GLOBALES
 * Couleurs (Nuances), Typos, Espacements (REM)
 */

:root {
  /**
 * =============================================================================
 * 1. COULEURS
 * =============================================================================
 */
  /* COLORSCALE */
  --db-rgb-primary: 247, 168, 35;
  --db-rgb-secondary: 25, 97, 172;
  /* PRIMARY: Orange #F7A823 */
  --db-color-primary-100: #FFF6E0;
  --db-color-primary-200: #FEE4B3;
  --db-color-primary-300: #FCD480;
  --db-color-primary-400: #FABD52;
  --db-color-primary-500: #F7A823;
  --db-color-primary-600: #D48C12;
  --db-color-primary-700: #A66B08;
  --db-color-primary-800: #7A4E04;
  --db-color-primary-900: #523301;
  /* SECONDARY: Bleu #1961AC */
  --db-color-secondary-100: #E8F1FA;
  --db-color-secondary-200: #C2DDF5;
  --db-color-secondary-300: #8CB8E6;
  --db-color-secondary-400: #5492D1;
  --db-color-secondary-500: #1961AC;
  --db-color-secondary-600: #144E8A;
  --db-color-secondary-700: #0F3A66;
  --db-color-secondary-800: #0A2644;
  --db-color-secondary-900: #051322;

  /* GRAYSCALE */
  --db-rgb-dark: 34, 34, 34;
  --db-rgb-light: 255, 255, 255;

  --db-color-gray-100: #FAFAFA;
  --db-color-gray-200: #F0F0F0;
  --db-color-gray-300: #E0E0E0;
  --db-color-gray-400: #BDBDBD;
  --db-color-gray-500: #9E9E9E;
  --db-color-gray-600: #757575;
  --db-color-gray-700: #616161;
  --db-color-gray-800: #424242;
  --db-color-gray-900: #222222;

  /* Base Dark */
  --db-color-black: #000000;
  --db-color-white: #FFFFFF;

  /* --- Variables sémantiques (Alias pour usage courant) --- */
  /* Mode Clair (Défaut) */
  --db-color-primary: var(--db-color-primary-500);
  --db-color-secondary: var(--db-color-secondary-500);
  --db-color-accent: var(--db-color-primary-500);

  --db-color-text: var(--db-color-gray-900);
  --db-color-text-soft: var(--db-color-gray-600);
  --db-color-bg: var(--db-color-white);
  --db-color-bg-alt: rgba(0, 0, 0, 0.1);
  --db-color-border: var(--db-color-gray-300);

  /**
 * =============================================================================
 * 2. TYPOGRAPHIE
 * =============================================================================
 */

  /* --- Fonts --- */
  --db-font-main: 'Hurme Geometric Sans No.4', sans-serif;
  --db-font-display: 'Palmer Lake Print', sans-serif;

  /* --- Variables de corps --- */
  --db-font-body-xs: clamp(0.75rem, 1vw, 0.875rem);
  /* XS ≈ 12-14px */
  --db-font-body-s: clamp(0.9375rem, 1.25vw, 1rem);
  /* S ≈ 15-16px */
  --db-font-body-m: clamp(1.0625rem, 1.5vw, 1.125rem);
  /* M ≈ 17-18px */
  --db-font-body-l: clamp(1.25rem, 1.75vw, 1.25rem);
  /* L ≈ 20px (Stable) */
  --db-font-body-xl: clamp(1.5rem, 2vw, 1.5rem);
  /* XL ≈ 24px (Stable) */
  --db-font-body-2xl: clamp(2rem, 3vw, 2rem);
  /* 2XL ≈ 32px (Stable) */
  --db-font-body-3xl: clamp(3rem, 6vw, 6.5rem);
  /* 3XL ≈ 48-104px */

  /* --- Variables de titres (Harmonic Scale +) --- */
  /* XS: 16px */
  --db-font-title-xs: 1rem;

  /* S: 20px */
  --db-font-title-s: 1.25rem;

  /* M: 22px -> 26px */
  --db-font-title-m: clamp(1.375rem, 2vw, 1.625rem);

  /* L: 26px -> 32px */
  --db-font-title-l: clamp(1.625rem, 2.5vw, 2rem);

  /* XL: 32px -> 40px */
  --db-font-title-xl: clamp(1.95rem, 3vw, 2.25rem);

  /* 2XL: ~40px -> 48px */
  --db-font-title-2xl: clamp(2.5rem, 4vw, 3rem);

  /* 3XL: ~52px -> 64px */
  --db-font-title-3xl: clamp(3.25rem, 5vw, 4rem);

  /* 4XL: ~68px -> 80px */
  --db-font-title-4xl: clamp(4.25rem, 6vw, 5rem);

  /* 5XL: ~88px -> 96px */
  --db-font-title-5xl: clamp(5.5rem, 7vw, 6rem);

  /* 6XL: ~112px */
  --db-font-title-6xl: clamp(7rem, 9vw, 8rem);

  /**
 * =============================================================================
 * 3. ESPACEMENTS
 * =============================================================================
 */
  /* Base: 1rem = 16px (par défaut sur navigateur) */
  --db-spacing-2xs: 0.125rem;
  /* 2px */
  --db-spacing-xs: 0.25rem;
  /* 4px */
  --db-spacing-sm: 0.5rem;
  /* 8px */
  --db-spacing-md: 1rem;
  /* 16px */
  --db-spacing-lg: 2rem;
  /* 32px */
  --db-spacing-xl: 4rem;
  /* 64px */
  --db-spacing-2xl: 8rem;
  /* 128px */
  --db-spacing-3xl: 16rem;
  /* 256px */
  --db-spacing-4xl: 32rem;
  /* 512px */

  /**
 * =============================================================================
 * 4. RADIUS
 * =============================================================================
 */

  --db-radius-2xs: 0.125rem;
  /* 2px */
  --db-radius-xs: 0.25rem;
  /* 4px */
  --db-radius-sm: 0.5rem;
  /* 8px */
  --db-radius-md: 1rem;
  /* 16px */
  --db-radius-lg: 2rem;
  /* 32px */
  --db-radius-xl: 4rem;
  /* 64px */
  --db-radius-2xl: 8rem;
  /* 128px */
  --db-radius-3xl: 16rem;
  /* 256px */

  /**
 * =============================================================================
 * 5. ANIMATIONS
 * =============================================================================
 */

  /* --- Durations --- */
  --db-anim-speed-fastest: 0.125s;
  --db-anim-speed-faster: 0.25s;
  --db-anim-speed-fast: 0.5s;
  --db-anim-speed-normal: 1s;
  --db-anim-speed-slow: 2s;
  --db-anim-speed-slower: 3s;
  --db-anim-speed-slowest: 4s;

  /* --- Easings --- */
  --db-anim-ease: ease;
  --db-anim-ease-in: cubic-bezier(0.7, 0, 1, 0.5);
  --db-anim-ease-out: cubic-bezier(0, 0.33, 0.07, 1.03);
  --db-anim-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

  /**
 * =============================================================================
 * 6. VISUAL EFFECTS
 * =============================================================================
 */

  /* Blur levels */
  --db-effect-blur-none: 0px;
  --db-effect-blur-2xs: 2px;
  --db-effect-blur-xs: 4px;
  --db-effect-blur-sm: 8px;
  --db-effect-blur-md: 16px;
  --db-effect-blur-lg: 24px;
  --db-effect-blur-xl: 48px;
  --db-effect-blur-2xl: 96px;

  /* Grayscale levels */
  --db-effect-grayscale-none: 0%;
  --db-effect-grayscale-partial: 50%;
  --db-effect-grayscale-full: 100%;

  /* Brightness levels */
  --db-effect-brightness-dim: 0.7;
  --db-effect-brightness-normal: 1;
  --db-effect-brightness-bright: 1.3;

  /* Opacity levels (si tu préfères centraliser ici) */
  --db-effect-opacity-hidden: 0;
  --db-effect-opacity-ghost: 0.25;
  --db-effect-opacity-translucent: 0.5;
  --db-effect-opacity-visible: 1;
}

/**
 * =============================================================================
 * 7. MODE SOMBRE
 * =============================================================================
 */

@media (prefers-color-scheme: dark) {
  :root {
    --db-color-text: var(--db-color-white);
    --db-color-text-soft: var(--db-color-gray-400);
    --bricks-text-dark: var(--db-color-text);

    --db-color-bg: var(--db-color-gray-900);
    --db-color-bg-alt: rgba(255, 255, 255, 0.1);

    --db-color-border: var(--db-color-gray-700);
  }
}

/* === fonts.css === */
/*
 * FONTS DECLARATIONS
 * Path: assets/fonts/
 */

/* --- 1. Hurme Geometric Sans No.4 --- */

/* Regular (400) */
@font-face {
    font-family: 'Hurme Geometric Sans No.4';
    src: url('../fonts/HurmeGeometricSans4.eot');
    src: url('../fonts/HurmeGeometricSans4.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HurmeGeometricSans4.woff2') format('woff2'),
        url('../fonts/HurmeGeometricSans4.woff') format('woff'),
        url('../fonts/HurmeGeometricSans4.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Light (300) */
@font-face {
    font-family: 'Hurme Geometric Sans No.4';
    src: url('../fonts/HurmeGeometricSans4-Light.eot');
    src: url('../fonts/HurmeGeometricSans4-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HurmeGeometricSans4-Light.woff2') format('woff2'),
        url('../fonts/HurmeGeometricSans4-Light.woff') format('woff'),
        url('../fonts/HurmeGeometricSans4-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* SemiBold (600) */
@font-face {
    font-family: 'Hurme Geometric Sans No.4';
    src: url('../fonts/HurmeGeometricSans4-SemiBold.eot');
    src: url('../fonts/HurmeGeometricSans4-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HurmeGeometricSans4-SemiBold.woff2') format('woff2'),
        url('../fonts/HurmeGeometricSans4-SemiBold.woff') format('woff'),
        url('../fonts/HurmeGeometricSans4-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Bold (700) */
@font-face {
    font-family: 'Hurme Geometric Sans No.4';
    src: url('../fonts/HurmeGeometricSans4-Bold.eot');
    src: url('../fonts/HurmeGeometricSans4-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HurmeGeometricSans4-Bold.woff2') format('woff2'),
        url('../fonts/HurmeGeometricSans4-Bold.woff') format('woff'),
        url('../fonts/HurmeGeometricSans4-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- 2. Palmer Lake Print --- */

/* Regular */
@font-face {
    font-family: 'Palmer Lake Print';
    src: url('../fonts/PalmerLakePrint-Regular.eot');
    src: url('../fonts/PalmerLakePrint-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/PalmerLakePrint-Regular.woff2') format('woff2'),
        url('../fonts/PalmerLakePrint-Regular.woff') format('woff'),
        url('../fonts/PalmerLakePrint-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* CUSTOM TITLE FONT SCALE */

body {
    font-size: var(--db-font-body-m);
}

.font-main {
    font-family: var(--db-font-main);
}

.font-display {
    font-family: var(--db-font-display);
    line-height: 0.45 !important;
}

h1 .font-display,
h1.font-display {
    font-size: var(--db-font-title-4xl);
}

.font-title-4xl,
.font-title-4xl h1,
.font-title-4xl h2,
.font-title-4xl h3,
.font-title-4xl h4,
.font-title-4xl p {
    font-size: var(--db-font-title-4xl);
    font-weight: 200;
}

.font-title-3xl,
.font-title-3xl h1,
.font-title-3xl h2,
.font-title-3xl h3,
.font-title-3xl h4,
.font-title-3xl p {
    font-size: var(--db-font-title-3xl);
    font-weight: 200;
}

.font-title-2xl,
.font-title-2xl h1,
.font-title-2xl h2,
.font-title-2xl h3,
.font-title-2xl h4,
.font-title-2xl p {
    font-size: var(--db-font-title-2xl);
    font-weight: 200;
}

h1,
.font-title-xl,
.font-title-xl h1,
.font-title-xl h2,
.font-title-xl h3,
.font-title-xl h4,
.font-title-xl p {
    font-size: var(--db-font-title-xl);
    font-weight: 200;
}

h2,
.font-title-l,
.font-title-l h1,
.font-title-l h2,
.font-title-l h3,
.font-title-l h4,
.font-title-l p {
    font-size: var(--db-font-title-l);
    font-weight: 300;
}

h3,
.font-title-m,
.font-title-m h1,
.font-title-m h2,
.font-title-m h3,
.font-title-m h4,
.font-title-m p {
    font-size: var(--db-font-title-s);
    font-weight: 300;
}

h4,
.font-title-s,
.font-title-s h1,
.font-title-s h2,
.font-title-s h3,
.font-title-s h4,
.font-title-s p {
    font-size: var(--db-font-title-xs);
    font-weight: 300;
}

/* CUSTOM LINE SPACING */

.font-title-2xl p,
.font-title-xl p,
.font-title-m h2 {
    line-height: 1.25;
}

.font-title-l p,
.font-title-m p,
.font-title-s p {
    line-height: 1;
}

.font-title-2xl p,
.font-title-3xl p {
    line-height: 0.9;
}

/* CUSTOM BODY FONT SCALE */

.font-body-xs,
.font-body-xs p,
.font-body-xs span {
    font-size: var(--db-font-body-xs);
    line-height: 1.8;
}

.font-body-s,
.font-body-s p,
.font-body-s span {
    font-size: var(--db-font-body-s);
    line-height: 1.75;
}

.font-body-m,
.font-body-m p,
.font-body-m span {
    font-size: var(--db-font-body-m);
    line-height: 1.7;
}

.font-body-l,
.font-body-l p,
.font-body-l span {
    font-size: var(--db-font-body-l);
    line-height: 1.65;
}

.font-body-xl,
.font-body-xl p,
.font-body-xl span {
    font-size: var(--db-font-body-xl);
    line-height: 2;
}

.font-body-2xl,
.font-body-2xl p,
.font-body-2xl span {
    font-size: var(--db-font-body-2xl);
    line-height: 1.35;
}

.font-body-3xl,
.font-body-3xl p,
.font-body-3xl span {
    font-size: var(--db-font-body-3xl);
    line-height: 0.9;
}

/* === base.css === */
/*
 * BASE STYLES
 * Reset partiel et styles par défaut des balises HTML
 */

body {
    background-color: var(--db-color-bg);
    color: var(--db-color-text);
    font-family: var(--db-font-main);
    font-size: var(--db-text-base);
    letter-spacing: .15rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--db-spacing-sm);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--db-font-main);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: var(--db-spacing-sm);
    text-box-trim: both;
    text-box-edge: cap alphabetic;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a,
button,
input,
label,
select,
textarea {
    -webkit-tap-highlight-color: transparent !important;
}

.bricks-color-primary {
    color: var(--db-color-primary);
}

.bricks-background-primary {
    background-color: var(--db-color-primary);
}

.bricks-color-secondary {
    color: var(--db-color-secondary);
}

.bricks-background-secondary {
    background-color: var(--db-color-secondary);
}

::selection {
    background-color: var(--db-color-primary-200);
    color: var(--db-color-black);
}

/* === components/buttons.css === */
/*
 * 🧩 BUTTONS COMPONENT
 */

.brxe-text-basic a,
.brxe-text a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 100% 0.75px;
    background-position: left bottom;
    padding-bottom: 2px;
    transition: opacity var(--db-anim-speed-faster) var(--db-anim-ease-in);
}

.brxe-text-basic a:hover:not(:focus),
.brxe-text a:hover:not(:focus) {
    animation: interaction-text-link-swipe var(--db-anim-speed-normal) var(--db-anim-ease-out) forwards;
}

.brxe-text-basic a:focus,
.brxe-text a:focus,
.brxe-text-basic a:active,
.brxe-text a:active {
    outline: none !important;
    animation: interaction-text-link-bounce var(--db-anim-speed-normal) var(--db-anim-ease-out) forwards;
}

.brxe-button {
    font-size: var(--db-font-body-s);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .15rem;
    border-radius: var(--db-radius-xs);
    padding: 0 var(--db-spacing-md);
    height: 28px;
    transition: all var(--db-anim-speed-fast) var(--db-anim-ease-out);
    cursor: pointer;
    /* Fix vertical centering for uppercase text */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Modern fix: trim text leading (Safari 17.4+, Chrome 133+) */
    text-box-trim: both;
    text-box-edge: cap alphabetic;
}

.bricks-background-primary {
    color: var(--db-color-white);
    background: var(--db-color-primary);
}

.bricks-background-secondary {
    color: var(--db-color-primary);
    padding-left: 0;
    padding-right: 0;
    background: none;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    width: fit-content;
    gap: 1px;
}

.bricks-background-secondary:after {
    content: "";
    display: block;
    margin-top: .25rem;
    width: 100%;
    height: 1.5px;
    background-color: rgba(var(--db-rgb-primary), .75);
    transform: scaleX(1);
    transform-origin: left;
    will-change: transform;
    transition: background-color var(--db-anim-speed-faster) var(--db-anim-ease-in);
}

.brxe-button.bricks-color-primary.outline {
    border-color: var(--db-color-primary);
}

.brxe-button.bricks-color-secondary.outline {
    border-color: var(--db-color-secondary);
}

/* Sizes */

.brxe-button.md {
    font-size: var(--db-font-body-s);
    padding: var(--db-spacing-sm) var(--db-spacing-xl);
}

.brxe-button.sm {
    font-size: var(--db-font-body-xs);
    padding: var(--db-spacing-xs) var(--db-spacing-lg);
}

.brxe-button.lg {
    font-size: var(--db-font-body-l);
    padding: var(--db-spacing-md) var(--db-spacing-2xl);
}

.brxe-button.outline {
    border-width: 1.5px !important;
}

@media (max-width: 768px) {
    .brxe-button.mobile-full {
        width: 100%;
    }
}

/* Interactions */

.brxe-button:hover {
    border-radius: var(--db-radius-md);
}

.brxe-button:active {
    border-radius: var(--db-radius-2xl);
}

.bricks-background-secondary:hover:not(:focus):after {
    background-color: rgba(var(--db-rgb-primary), 1);
    animation: interaction-underline-swipe var(--db-anim-speed-normal) var(--db-anim-ease-out) forwards;
}

.bricks-background-secondary:focus:after,
.bricks-background-secondary:active:after {
    background-color: rgba(var(--db-rgb-primary), 1);
    animation: interaction-underline-bounce var(--db-anim-speed-normal) var(--db-anim-ease-out) forwards;
}

.brxe-button.bricks-color-primary.outline:active {
    background: rgba(var(--db-rgb-primary), .1);
}

.brxe-button.bricks-color-secondary.outline:active {
    background: rgba(var(--db-rgb-secondary), .1);
}

.brxe-text-link:hover:after {
    background-color: rgba(var(--db-rgb-primary), 1);
}


/* Text Link */

.brxe-text-link {
    font-size: var(--db-font-body-s);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .15rem;
    color: var(--db-color-text);
    cursor: pointer;
}

/*
.brxe-text-link:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: rgba(var(--db-rgb-primary), .75);
    transition: all .25s;
}

.brxe-text-link:hover:after {
    background-color: rgba(var(--db-rgb-primary), 1);
}
*/

/* 
 * READ MORE COMPONENT
 */

.db-read-more-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--db-spacing-sm);
}

.db-read-more-content {
    position: relative;
    overflow: hidden;
    font-size: var(--db-font-body-l);
    transition: max-height 0.5s var(--db-anim-ease-out);
    width: 100%;
}

.db-read-more-content.is-collapsed {
    /* Use CSS variable for dynamic line count (set by PHP) */
    /* Approximate line height: 1.6em, so lines * 1.6em = height */
    --read-more-lines: 5;
    /* Default fallback */
    max-height: calc(var(--read-more-lines) * 1.6em);
    /* Gradient mask to fade out text at bottom */
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* When expanded, remove mask */
.db-read-more-content:not(.is-collapsed) {
    -webkit-mask-image: none;
    mask-image: none;
}

/* Button & Icon */
.button-read-more {
    background: none;
    border: none;
    padding: var(--db-spacing-md) 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Icon Rotation */
.button-read-more .btn-icon {
    display: inline-flex;
    transition: transform var(--db-anim-speed-fast) var(--db-anim-ease-out);
}

.db-read-more-wrapper.is-expanded .btn-icon {
    transform: rotate(180deg);
}

/* Hover / Focus-visible Animations */
.db-read-more-wrapper:not(.is-expanded) .button-read-more:hover .btn-icon,
.db-read-more-wrapper:not(.is-expanded) .button-read-more:focus-visible .btn-icon {
    animation: interaction-arrow-down var(--db-anim-speed-normal) var(--db-anim-ease-out) infinite;
}

.db-read-more-wrapper.is-expanded .button-read-more:hover .btn-icon,
.db-read-more-wrapper.is-expanded .button-read-more:focus-visible .btn-icon {
    animation: interaction-arrow-up var(--db-anim-speed-normal) var(--db-anim-ease-out) infinite;
}

/* Fix helper: Force underline to bottom (override flex item behavior) */
.button-read-more.brxe-text-link:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* === components/forms.css === */
/**
 * =============================================================================
 * 6. FIELDS
 * =============================================================================
 */

.brx-popup-content .brxe-form .form-group {
    position: relative;
    padding: 0 0 var(--db-spacing-lg);
}

.brx-popup-content .brxe-form label {
    color: var(--db-color-white);
    font-size: var(--db-font-body-s);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15rem;
    background-color: var(--db-color-primary);
    padding: var(--db-spacing-xs) var(--db-spacing-sm);
    position: absolute;
    top: calc(-1 * var(--db-spacing-md));
    left: var(--db-spacing-sm);
    cursor: pointer;
}


.brx-popup-content .brxe-form input[type="text"],
.brx-popup-content .brxe-form input[type="email"],
.brx-popup-content .brxe-form input[type="tel"],
.brx-popup-content .brxe-form textarea {
    background-color: color-mix(in srgb, var(--db-color-white), transparent 90%) !important;
    line-height: normal;
    font-weight: 600;
    font-size: var(--db-font-body-l);
    letter-spacing: .15rem;
    color: var(--db-color-white);
    padding: var(--db-spacing-lg) var(--db-spacing-lg) var(--db-spacing-md) var(--db-spacing-lg);
    border-color: color-mix(in srgb, var(--db-color-white), transparent 75%) !important;
    border-width: 0 0 2px 0 !important;
}

.brx-popup-content .brxe-form input[type="text"],
.brx-popup-content .brxe-form input[type="email"],
.brx-popup-content .brxe-form input[type="tel"],
.brx-popup-content .brxe-form textarea {
    background-image: linear-gradient(var(--db-color-white), var(--db-color-white));
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size var(--db-anim-speed-normal) var(--db-anim-ease-out);
}

.brx-popup-content .brxe-form input[type="text"]:focus,
.brx-popup-content .brxe-form input[type="email"]:focus,
.brx-popup-content .brxe-form input[type="tel"]:focus,
.brx-popup-content .brxe-form textarea:focus {
    outline: none !important;
    background-size: 100% 2px;
}

.brx-popup-content button[type="submit"] {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .15rem;
    border-radius: var(--db-radius-xs);
    padding: var(--db-spacing-md);
    font-size: var(--db-font-body-s);
    color: var(--db-color-primary);
    background-color: var(--db-color-white);
}

.brx-popup-content .bricks-background-primary {
    color: var(--db-color-primary);
    background-color: var(--db-color-white);
}

/* === components/navigation.css === */
/**
 * COMPONENT: NAVIGATION (CSS)
 * Styling for the "Sliding Underline" menu and "Smart Header" elements.
 */

/**
 * =============================================================================
 * 0. Base
 * =============================================================================
 */

header {
    padding: var(--db-spacing-sm);
    /* Smart Header Properties */
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--db-color-bg);
    color: var(--db-color-text);
    transition: transform var(--db-anim-speed-fast) var(--db-anim-ease-in-out);
    will-change: transform;
}

/* Header border - excluded on specific templates */
body:not(.single-events):not(.home):not(.page-id-2937) header,
header.is-sticky {
    border-bottom: 1px solid color-mix(in srgb, var(--db-color-text) 20%, transparent);
}

header.header-hidden {
    transform: translateY(-100%);
}

/* Disable transition for instant hiding (first scroll) */
header.no-transition {
    transition: none !important;
}

header .logo-db a:first-child {
    width: 128px;
    display: block;
}

header .logo-db a:last-child {
    width: 32px;
    display: none;
}

header #menu-langues-1 a {
    color: var(--db-color-primary);
    opacity: 0.5;
    transition: opacity var(--db-anim-speed-fast) var(--db-anim-ease-in-out);
}

header #menu-langues-1 a:hover {
    opacity: 1;
}

header .brxe-nav-menu {
    position: relative !important;
    overflow: visible !important;

    font-size: var(--db-font-body-m);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .15rem;
}

header .brxe-nav-menu .menu-item {
    margin: 0;
}

header .brxe-nav-menu .menu-item a {
    display: block;
    padding: var(--db-spacing-sm) var(--db-spacing-lg);
    text-decoration: none !important;
    border: none !important;
}

@media (max-width: 992px) {
    header .navigation-main {
        border-top: 1px solid color-mix(in srgb, var(--db-color-text) 20%, transparent);
        padding: var(--db-spacing-md) 0 var(--db-spacing-sm) 0;
        margin-top: var(--db-spacing-md);
    }
}

@media (max-width: 768px) {
    header {
        padding: var(--db-spacing-xs);
    }

    header .brxe-nav-menu .menu-item a {
        padding: var(--db-spacing-sm) var(--db-spacing-md);
    }

    header .logo-db a:first-child {
        display: none;
    }

    header .logo-db a:last-child {
        display: block;
    }
}

/**
 * =============================================================================
 * 1. Sliding Line Infrastructure
 * =============================================================================
 */

/**
 * Wrapper: Acting as the track/ghost background.
 * - Positioned absolutely by JS.
 * - Transitions width and position.
 */
.sliding-line-wrapper {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 2px;
    background-color: transparent;
    border-radius: 2px;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;

    /* Base State */
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
    .sliding-line-wrapper {
        bottom: 3px;
        height: 1.5px;
    }
}

/**
 * Inner Line: The visible colored bar.
 * - Default: Secondary/Primary Color.
 * - Animates color and opacity.
 */
.sliding-line-inner {
    width: 100%;
    height: 100%;
    background-color: var(--db-color-primary, #F7A823);
    border-radius: 2px;
    opacity: 1;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
}

/* --- Interaction States --- */

/* Hover: Show Ghost Track (25% opacity) */
header .brxe-nav-menu:hover .sliding-line-wrapper {
    background-color: color-mix(in srgb, var(--db-color-text) 20%, transparent);
}

/* Hover: Change Inner Line to match Text Color (25% opacity) */
header .brxe-nav-menu:hover .sliding-line-inner {
    background-color: currentColor;
    opacity: 0.25;
}

/* --- Loading State (Click) --- */

/* Wrapper keeps ghost background */
.sliding-line-wrapper.loading-state {
    background-color: color-mix(in srgb, currentColor 20%, transparent);
}

/* Inner Line becomes solid loading gauge */
.sliding-line-wrapper.loading-state .sliding-line-inner {
    background-color: currentColor;
    opacity: 1;
    transform: scaleX(0);
    transform-origin: center;
    animation: gauge-fill 0.5s ease-out forwards,
        loading-pulse var(--db-anim-speed-normal, 1s) var(--db-anim-ease-in-out, ease-in-out) infinite;
}

/* Text Loading Effect */
.menu-item a.is-loading-text {
    animation: loading-pulse var(--db-anim-speed-normal, 1s) var(--db-anim-ease-in-out, ease-in-out) infinite;
}

@keyframes gauge-fill {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}

/**
 * =============================================================================
 * 2. Secondary Navigation
 * =============================================================================
 */

.navigation-secondary {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transition: top var(--db-anim-speed-fast) var(--db-anim-ease-in-out);
    will-change: top;
}

.navigation-secondary.is-sticky {
    background: color-mix(in srgb, var(--db-color-bg) 90%, transparent);
    backdrop-filter: blur(var(--db-effect-blur-sm));
}

/* Hide card images when navigation is sticky (show only names) */
/*.navigation-secondary.is-sticky .splide__list {
    height: auto !important;
    align-items: center;
}*/

/**
 * =============================================================================
 * 3. Events Archive Timeline
 * =============================================================================
 * Vertical chronological navigation for Events archive (always visible).
 * - Vertical rail (2px, 50% opacity) passing behind the dates with faded ends.
 * - Sliding indicator (2px, 100% opacity) that extends between dates.
 * - Inactive dates at 50% opacity, active/hovered date at 100%.
 * - Position constrained within .grid-event to prevent overlapping header/footer.
 */

.archive-timeline {
    /* Tweakable settings */
    --timeline-line-width: 1px;
    /* Length of the fade at both ends of the rail */
    --timeline-line-fade: var(--db-spacing-lg);

    position: fixed;
    top: var(--db-spacing-lg);
    bottom: var(--db-spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--db-anim-speed-fast) var(--db-anim-ease-out);
}

/* Visible as soon as JS has built the timeline (prevents empty flash on load) */
.archive-timeline.is-ready {
    opacity: 1;
}

/* --- Rail (vertical line centered directly behind the dates, stretching full height) --- */
.timeline-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--timeline-line-width);
    pointer-events: none;
    z-index: 0;
}

.timeline-rail::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 999px;
    background-color: var(--db-color-text);
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--timeline-line-fade), #000 calc(100% - var(--timeline-line-fade)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--timeline-line-fade), #000 calc(100% - var(--timeline-line-fade)), transparent 100%);
}

/* --- Indicator (sliding segment inside track aligned with the active year) --- */
.timeline-indicator {
    --timeline-indicator-fade: 12px;

    position: absolute;
    top: 0;
    left: 50%;
    width: var(--timeline-line-width);
    height: var(--timeline-indicator-h, 0px);
    border-radius: 999px;
    background-color: var(--db-color-text);
    opacity: 0;
    transform: translate3d(-50%, var(--timeline-indicator-y, 0px), 0);
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--timeline-indicator-fade), #000 calc(100% - var(--timeline-indicator-fade)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--timeline-indicator-fade), #000 calc(100% - var(--timeline-indicator-fade)), transparent 100%);
    transition:
        transform var(--db-anim-speed-fast) var(--db-anim-ease-out),
        height var(--db-anim-speed-fast) var(--db-anim-ease-out),
        opacity var(--db-anim-speed-fast) var(--db-anim-ease-out);
    will-change: transform, height;
}

.timeline-track.has-indicator .timeline-indicator {
    opacity: 1;
}

/* Used by JS for the first placement / resize (no slide from 0) */
.timeline-indicator.no-transition {
    transition: none !important;
}

/* --- Years list (rendered on top of the rail) --- */
.timeline-track {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--db-spacing-lg);
}

/* Timeline Item */
.timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--db-spacing-xs) 0;
    cursor: pointer;
    pointer-events: auto;
    font-size: var(--db-font-body-m);
    font-weight: 600;
    color: var(--db-color-text);
    text-decoration: none;
}

/* Year label (background masks the rail/indicator passing directly behind it) */
.timeline-year {
    display: inline-block;
    min-width: 2.75em;
    padding: var(--db-spacing-2xs) var(--db-spacing-xs);
    border-radius: var(--db-radius-xs);
    background-color: var(--db-color-bg);
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    color: var(--db-color-text-soft);
    color: color-mix(in srgb, var(--db-color-text) 35%, transparent);
    opacity: 1;
    transition: color var(--db-anim-speed-fast) var(--db-anim-ease-out);
}

/* Hover (JS class prevents flickering) & Active */
.timeline-item.is-hovered .timeline-year,
.timeline-item.is-active .timeline-year {
    color: var(--db-color-text);
}

@media (prefers-reduced-motion: reduce) {

    .timeline-indicator,
    .timeline-year {
        transition: none;
    }
}

/* Responsive: Hide on mobile/tablet */
@media (max-width: 1024px) {
    .archive-timeline {
        display: none !important;
    }
}

/* === components/animations.css === */
/**
 * COMPONENT: ANIMATIONS
 * Centralized keyframes and animation utilities.
 * 
 * Naming Convention:
 * - reveal-*     : Entry animations (elements appearing)
 * - reveal-*-out : Exit animations (elements disappearing)
 * - loading-*    : Loading/waiting state animations
 * - interaction-*: Interaction animations (hover, active/click states)
 */

/* ==========================================================================
   KEYFRAMES - REVEAL (Entry Animations)
   ========================================================================== */

@keyframes reveal-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes reveal-fade-in-up {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes reveal-fade-in-left {
    from {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes reveal-fade-in-right {
    from {
        opacity: 0;
        transform: translate3d(30px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes reveal-scale-in {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }

    60% {
        opacity: 0.5;
        transform: scale(0.95);
    }

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

@keyframes reveal-sticker {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes reveal-mask-in-up {
    from {
        mask-image: linear-gradient(to top, black 50%, transparent 50%);
        -webkit-mask-image: linear-gradient(to top, black 50%, transparent 50%);
        mask-position: 0 200%;
        -webkit-mask-position: 0 200%;
        mask-size: 100% 200%;
        -webkit-mask-size: 100% 200%;
    }

    to {
        mask-position: 0 100%;
        -webkit-mask-position: 0 100%;
    }
}

@keyframes reveal-mask-in-down {
    from {
        mask-image: linear-gradient(to bottom, black 50%, transparent 50%);
        -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 50%);
        mask-position: 0 -100%;
        -webkit-mask-position: 0 -100%;
        mask-size: 100% 200%;
        -webkit-mask-size: 100% 200%;
    }

    to {
        mask-position: 0 0;
        -webkit-mask-position: 0 0;
    }
}

@keyframes reveal-mask-in-right {
    from {
        mask-image: linear-gradient(to right, black 50%, transparent 50%);
        -webkit-mask-image: linear-gradient(to right, black 50%, transparent 50%);
        mask-position: -100% 0;
        -webkit-mask-position: -100% 0;
        mask-size: 200% 100%;
        -webkit-mask-size: 200% 100%;
    }

    to {
        mask-position: 0 0;
        -webkit-mask-position: 0 0;
    }
}

@keyframes reveal-mask-in-left {
    from {
        mask-image: linear-gradient(to left, black 50%, transparent 50%);
        -webkit-mask-image: linear-gradient(to left, black 50%, transparent 50%);
        mask-position: 200% 0;
        -webkit-mask-position: 200% 0;
        mask-size: 200% 100%;
        -webkit-mask-size: 200% 100%;
    }

    to {
        mask-position: 100% 0;
        -webkit-mask-position: 100% 0;
    }
}

/* ==========================================================================
   KEYFRAMES - REVEAL OUT (Exit Animations)
   ========================================================================== */

@keyframes reveal-fade-out {
    from {
        opacity: 1;
        filter: blur(0px);
    }

    to {
        opacity: 0;
        filter: blur(3px);
    }
}

@keyframes reveal-fade-up-out {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes reveal-fade-left-out {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
    }
}

@keyframes reveal-fade-right-out {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translate3d(30px, 0, 0);
    }
}

@keyframes reveal-scale-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    40% {
        opacity: 0.5;
        transform: scale(0.95);
    }

    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

/* ==========================================================================
   KEYFRAMES - LOADING
   ========================================================================== */

@keyframes loading-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ==========================================================================
   KEYFRAMES - MEDIA
   ========================================================================== */

@keyframes media-ken-burns {

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

    50% {
        transform: scale(1.1)
    }
}

/* Webkit prefix for iOS Safari */
@-webkit-keyframes media-ken-burns {

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

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@keyframes media-pan {

    0%,
    100% {
        object-position: center center;
        background-position: center center;
        /* Center */
    }

    25% {
        object-position: 0% center;
        background-position: 0% center;
        /* Pan left */
    }

    50% {
        object-position: center center;
        background-position: center center;
        /* Back to center */
    }

    75% {
        object-position: 100% center;
        background-position: 100% center;
        /* Pan right */
    }
}

/* Webkit prefix for iOS Safari */
@-webkit-keyframes media-pan {

    0%,
    100% {
        object-position: center center;
        background-position: center center;
        /* Center */
    }

    25% {
        object-position: 0% center;
        background-position: 0% center;
        /* Pan left */
    }

    50% {
        object-position: center center;
        background-position: center center;
        /* Back to center */
    }

    75% {
        object-position: 100% center;
        background-position: 100% center;
        /* Pan right */
    }
}

/* ==========================================================================
   KEYFRAMES - INTERACTION
   ========================================================================== */

@keyframes interaction-underline-swipe {
    0% {
        transform: scaleX(1);
        transform-origin: right;
        animation-timing-function: cubic-bezier(0.4, 0, 0.7, 1);
    }

    40% {
        transform: scaleX(0);
        transform-origin: right;
    }

    40.1% {
        transform: scaleX(0);
        transform-origin: left;
    }

    100% {
        transform: scaleX(1);
        transform-origin: left;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@keyframes interaction-text-link-swipe {
    0% {
        background-size: 100% 0.75px;
        background-position: right bottom;
        animation-timing-function: cubic-bezier(0.4, 0, 0.7, 1);
    }

    40% {
        background-size: 0% 0.75px;
        background-position: right bottom;
    }

    40.1% {
        background-size: 0% 0.75px;
        background-position: left bottom;
    }

    100% {
        background-size: 100% 0.75px;
        background-position: left bottom;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@keyframes interaction-text-link-bounce {
    0% {
        background-size: 100% 0.75px;
        background-position: center bottom;
    }

    30% {
        background-size: 18% 0.75px;
        background-position: center bottom;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    70% {
        background-size: 100% 0.75px;
        background-position: center bottom;
    }

    85% {
        background-size: 96% 0.75px;
        background-position: center bottom;
    }

    100% {
        background-size: 100% 0.75px;
        background-position: center bottom;
    }
}

@keyframes interaction-underline-bounce {
    0% {
        transform: scaleX(1);
        transform-origin: center;
    }

    30% {
        transform: scaleX(0.18);
        transform-origin: center;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    70% {
        transform: scaleX(1.1);
        transform-origin: center;
    }

    85% {
        transform: scaleX(0.96);
        transform-origin: center;
    }

    100% {
        transform: scaleX(1);
        transform-origin: center;
    }
}

@keyframes interaction-arrow-down {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    40% {
        opacity: 0;
        transform: translateY(4px);
    }

    40.1% {
        opacity: 0;
        transform: translateY(-4px);
    }

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

@keyframes interaction-arrow-up {
    0% {
        opacity: 1;
        transform: rotate(180deg) translateY(0);
    }

    40% {
        opacity: 0;
        transform: rotate(180deg) translateY(4px);
    }

    40.1% {
        opacity: 0;
        transform: rotate(180deg) translateY(-4px);
    }

    75%,
    100% {
        opacity: 1;
        transform: rotate(180deg) translateY(0);
    }
}

/* ==========================================================================
   BASE RULES
   ========================================================================== */

/* Base Class for Reveal Animations */
[class*="reveal-"] {
    animation-duration: var(--db-anim-speed-normal) !important;
    animation-fill-mode: both !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* FOUC Prevention: Hide all reveal elements until animation starts */
[class*="reveal-"]:not(.start-anim) {
    opacity: 0 !important;
}

/* Scroll Trigger: Hide until visible (for staggered elements) */
[data-stagger]:not(.start-anim) {
    opacity: 0 !important;
    animation-name: none !important;
}

/* View-Based Trigger: Hide until visible (for elements WITHOUT [data-stagger]) */
.is-view-observed:not(.start-anim):not([data-stagger]) {
    opacity: 0 !important;
    animation-name: none !important;
}

/* Splide loop clones: copied from originals but never observed -> always visible */
.splide__slide--clone [data-stagger],
.splide__slide--clone [class*="reveal-"] {
    opacity: 1 !important;
    animation-name: none !important;
}

/* ==========================================================================
   ANIMATION CLASSES - REVEAL IN
   ========================================================================== */

.reveal-fade-in.start-anim {
    animation-name: reveal-fade-in !important;
    animation-timing-function: ease;
}

.reveal-fade-in-up.start-anim {
    animation-name: reveal-fade-in-up !important;
    animation-timing-function: var(--db-anim-ease-out);
}

.reveal-fade-in-left.start-anim {
    animation-name: reveal-fade-in-left !important;
    animation-timing-function: var(--db-anim-ease-out);
}

.reveal-fade-in-right.start-anim {
    animation-name: reveal-fade-in-right !important;
    animation-timing-function: var(--db-anim-ease-out);
}

.reveal-scale-in.start-anim {
    animation-name: reveal-scale-in !important;
    animation-timing-function: var(--db-anim-ease-out);
}

.reveal-sticker.start-anim {
    animation-name: reveal-sticker !important;
    animation-duration: 0.6s !important;
    animation-timing-function: var(--db-anim-ease-out);
    animation-delay: 0.3s;
}

.reveal-mask-in-up.start-anim {
    animation-name: reveal-mask-in-up !important;
    animation-timing-function: var(--db-anim-ease-out);
}

.reveal-mask-in-down.start-anim {
    animation-name: reveal-mask-in-down !important;
    animation-timing-function: var(--db-anim-ease-out);
}

.reveal-mask-in-right.start-anim {
    animation-name: reveal-mask-in-right !important;
    animation-timing-function: var(--db-anim-ease-out);
}

.reveal-mask-in-left.start-anim {
    animation-name: reveal-mask-in-left !important;
    animation-timing-function: var(--db-anim-ease-out);
}

/* --- Fade In Side (2-Col Logic) --- */
.reveal-fade-in-side.is-odd.start-anim {
    animation-name: reveal-fade-in-right !important;
}

.reveal-fade-in-side.is-even.start-anim {
    animation-name: reveal-fade-in-left !important;
}

/* Hide until JS assigns direction to prevent FOUC/Jump */
.reveal-fade-in-side:not(.is-odd):not(.is-even) {
    opacity: 0 !important;
}

/* ==========================================================================
   ANIMATION CLASSES - REVEAL OUT (triggered by .exit-anim)
   ========================================================================== */

.reveal-fade-out.exit-anim {
    animation-name: reveal-fade-out !important;
}

.reveal-fade-up-out.exit-anim {
    animation-name: reveal-fade-up-out !important;
}

.reveal-fade-left-out.exit-anim {
    animation-name: reveal-fade-left-out !important;
}

.reveal-fade-right-out.exit-anim {
    animation-name: reveal-fade-right-out !important;
}

.reveal-scale-out.exit-anim {
    animation-name: reveal-scale-out !important;
}

/* --- Fade Side Out (2-Col Logic) --- */
.reveal-fade-side-out.is-odd.exit-anim {
    animation-name: reveal-fade-right-out !important;
}

.reveal-fade-side-out.is-even.exit-anim {
    animation-name: reveal-fade-left-out !important;
}

/* ==========================================================================
   DURATION MODIFIERS
   ========================================================================== */


.anim-slowest {
    animation-duration: var(--db-anim-speed-slowest) !important;
}

.anim-slower {
    animation-duration: var(--db-anim-speed-slower) !important;
}

.anim-slow {
    animation-duration: var(--db-anim-speed-slow) !important;
}

.anim-normal {
    animation-duration: var(--db-anim-speed-normal) !important;
}

.anim-fast {
    animation-duration: var(--db-anim-speed-fast) !important;
}

.anim-faster {
    animation-duration: var(--db-anim-speed-faster) !important;
}

.anim-fastest {
    animation-duration: var(--db-anim-speed-fastest) !important;
}

/* ==========================================================================
   PARALLAX SCROLL EFFECTS
   ========================================================================== */

/* Base class for all parallax elements - optimizes performance */
[class*="parallax-"] {
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* === components/cards.css === */
/**
 * COMPONENT: CARDS
 * Artist, Ceramic, and shared card styles.
 */


/**
 * =============================================================================
 * 0. Base
 * =============================================================================
 */

.bricks-layout-wrapper .image {
    border-radius: var(--db-radius-sm);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/**
 * =============================================================================
 * 1. Artist Card: Name Only
 * =============================================================================
 */

.card-artist-name {
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem;
    gap: 0.75ch;

    font-size: var(--db-font-body-m);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--db-color-text);
    text-decoration: none;
    filter: opacity(1);
    transition: color var(--db-anim-speed-fast, 0.3s) ease, filter var(--db-anim-speed-fast, 0.3s) ease;
}

.card-artist-name .firstname {
    font-weight: 500;
    opacity: 0.8;
}

.card-artist-name .lastname {
    font-weight: 500;
}

/* Indicator (List) */
.list-artist-name-only .card-artist-name:before {
    content: "";
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.25rem;
    border-radius: 75% 75% 100% 75%;
    background-color: var(--db-color-primary);
}

/**
 * =============================================================================
 * 2. Artist Card: Image + Name
 * =============================================================================
 */

/* Hide empty Bricks loop items (active artist returns empty) */
.brxe-div:empty,
.brxe-block:empty {
    display: none !important;
}

.card-artist-image {
    display: flex;
    flex-direction: column;
    gap: var(--db-spacing-md);
    text-decoration: none;
    color: var(--db-color-text);
    filter: opacity(1);
    transition: filter var(--db-anim-speed-fast, 0.3s) ease,
        transform var(--db-anim-speed-fast) var(--db-anim-ease-out);
    /* Elastic scroll effect */
    --elastic-scale: 1;
    transform: scale(var(--elastic-scale));
    transform-origin: center center;
}

.card-artist-image .card-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-artist-image .card-image-wrapper img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: 100% 75% 75% 75%;
    object-fit: cover;
    filter: saturate(0);
    transition: all var(--db-anim-speed-faster) var(--db-anim-ease-out), opacity var(--db-anim-speed-normal) var(--db-anim-ease-in-out);
    opacity: 0;
}

.card-artist-image .card-image-wrapper img:not(.post-type-archive-artists .card-image-wrapper img) {
    max-width: 96px;
    max-height: 96px;
}

@media (max-width: 479px) {
    .card-artist-image .card-image-wrapper img:not(.post-type-archive-artists .card-image-wrapper img) {
        max-width: 64px;
        max-height: 64px;
    }
}

.card-artist-image .card-image-wrapper img.loaded {
    opacity: 1;
}

.card-artist-image:not(.card-artist-preview .card-artist-image):hover .card-image-wrapper img:not(.post-type-archive-artists .card-artist-image:hover .card-image-wrapper img) {
    border-radius: 75% 75% 100% 75%;
    transform: rotate(5deg);
}

.card-artist-image .card-artist-name {
    padding: 0.5rem 0;
    justify-content: center;
}

/* --- Interactions (Hover/Focus) --- */

.card-artist-name:not(.card-artist-preview .card-artist-name):hover,
.card-artist-image:not(.card-artist-preview .card-artist-image):hover .card-artist-name {
    font-style: oblique;
}

/* Dimming: Name List */
@media (min-width: 768px) {
    .list-artist-name-only .card-artist-name {
        transition: opacity var(--db-anim-speed-normal, 0.5s) ease;
    }

    .list-artist-name-only:has(.card-artist-name:hover) .card-artist-name:not(:hover) {
        opacity: 0.5 !important;
    }

    .list-artist-name-only .card-artist-name:hover {
        opacity: 1 !important;
    }
}

/* Focus States */
.card-artist-name:active,
.card-artist-name:focus {
    color: var(--db-color-primary);
    outline: none;
    animation: loading-pulse var(--db-anim-speed-normal) var(--db-anim-ease-in-out) infinite;
}

/* Dimming: Image Grid */
@media (min-width: 768px) {
    .grid-artist-image:has(.card-artist-image:hover) .card-artist-image:not(:hover) {
        filter: opacity(0.4);
    }

    .grid-artist-image .card-artist-image:hover {
        filter: opacity(1);
    }

    .grid-artist-image .card-artist-image:active,
    .grid-artist-image .card-artist-image:focus {
        outline: none;
        filter: opacity(1);
    }
}

/* Focus States */
.card-artist-image:active .card-artist-name,
.card-artist-image:focus .card-artist-name {
    color: var(--db-color-primary);
    animation: loading-pulse var(--db-anim-speed-normal) var(--db-anim-ease-in-out) infinite;
}

.card-artist-image:active img,
.card-artist-image:focus img {
    filter: saturate(1);
    animation: loading-pulse var(--db-anim-speed-normal) var(--db-anim-ease-in-out) infinite;
}

/**
 * =============================================================================
 * 2B. Artist Card: Preview (Image + Name + Description + CTA)
 * =============================================================================
 */

.card-artist-preview {
    display: flex;
    flex-direction: column;
    gap: var(--db-spacing-xs);
}

.card-artist-preview>div {
    padding: var(--db-spacing-xl);
    margin-bottom: var(--db-spacing-md);
    border: 1px solid color-mix(in srgb, var(--db-color-text) 20%, transparent);
    border-radius: var(--db-radius-xs);
    transition: border var(--db-anim-speed-fast) var(--db-anim-ease);
}

.card-artist-preview>div:focus-within {
    border-color: var(--db-color-primary);
    animation: loading-pulse var(--db-anim-speed-normal) var(--db-anim-ease-in-out) infinite !important;
}

.card-artist-preview .card-artist-image .card-image-wrapper,
.card-artist-preview .card-artist-image .card-artist-name {
    justify-content: flex-start;
}

.card-artist-preview .card-content {
    display: flex;
    flex-direction: column;
    gap: var(--db-spacing-lg);
}

.card-artist-preview .card-artist-name {
    padding: 0;
    font-size: var(--db-font-title-3xl);
}

.card-artist-preview .card-artist-description {
    font-size: var(--db-font-body-l);
}

.card-artist-preview .brxe-text-link {
    margin-top: var(--db-spacing-xs);
    align-self: flex-start;
}

/* Focus States */
.card-artist-image:active .card-artist-name,
.card-artist-image:focus .card-artist-name {
    color: var(--db-color-primary);
    animation: loading-pulse var(--db-anim-speed-normal) var(--db-anim-ease-in-out) infinite;
}

.card-artist-image:active img,
.card-artist-image:focus img {
    filter: saturate(1);
    animation: loading-pulse var(--db-anim-speed-normal) var(--db-anim-ease-in-out) infinite;
}

/**
 * =============================================================================
 * 3. Ceramic Card
 * =============================================================================
 */

/* Ceramic Grid Layout */
.grid-ceramic {
    display: grid;
    overflow: hidden;
}


/* Force grid children to respect their cell boundaries */
.grid-ceramic>* {
    min-width: 0;
    /* overflow: hidden; */
}

/* Mobile */
@media (max-width: 479px) {
    .grid-ceramic {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--db-spacing-md);
    }
}

/* Tablet */
@media (min-width: 768px) {
    .grid-ceramic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--db-spacing-xl);
    }
}

/* Desktop */
@media (min-width: 992px) {
    .post-type-archive-ceramics .grid-ceramic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Grid Offset (3 Cols Staggered) */
    .post-type-archive-ceramics .grid-ceramic>*:nth-child(3n+1),
    .post-type-archive-ceramics .grid-ceramic>*:nth-child(3n) {
        margin-top: var(--db-spacing-2xl);
    }

    .post-type-archive-ceramics .grid-ceramic {
        margin-top: calc(var(--db-spacing-lg) * -1);
    }
}

/* Center single item when grid has only one child */
.grid-ceramic:has(> *:only-child),
.post-type-archive-ceramics .grid-ceramic:has(> *:only-child) {
    grid-template-columns: minmax(0, 340px) !important;
    justify-content: center !important;
    justify-items: center !important;
    margin-top: 0 !important;
    margin-inline: auto !important;
}

.grid-ceramic:has(> *:only-child) > *,
.post-type-archive-ceramics .grid-ceramic:has(> *:only-child) > * {
    margin-top: 0 !important;
    width: 100%;
}

.card-ceramic {
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
    filter: opacity(1);
    transition: filter var(--db-anim-speed-normal, 0.5s) ease;
    /* Elastic scroll effect: define variable here for inheritance */
    --elastic-scale: 1;
}

.card-ceramic .card-link-wrapper {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Prevents flex child from expanding to intrinsic width */
    align-items: center;
    /* Elastic scroll effect: applied here to avoid animation conflict */
    transform: scale(var(--elastic-scale));
    transform-origin: center center;
    transition: transform var(--db-anim-speed-fast) var(--db-anim-ease-out);
}

.card-ceramic .card-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--db-radius-sm);
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--db-color-bg-alt, #f5f5f5);
}

.card-ceramic .card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--db-anim-speed-fast) var(--db-anim-ease-in-out), opacity var(--db-anim-speed-normal) var(--db-anim-ease-in-out);
    opacity: 0;
}

.card-ceramic .card-image-wrapper img.loaded {
    opacity: 1;
}

.card-ceramic .card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    gap: 0.25rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Prevents flex child from overflowing */
    align-items: center;
    padding: var(--db-spacing-md);
}

.card-ceramic .status-indicator.unavailable {
    position: absolute;
    top: var(--db-spacing-md);
    right: var(--db-spacing-md);
    width: 8px;
    height: 8px;
    background-color: #e53935;
    border-radius: 50%;
    z-index: 10;
}


.card-ceramic .card-artist-name {
    justify-content: center;
    text-align: center;
    margin-bottom: 0;
    padding: var(--db-spacing-xs);
}

.card-ceramic .card-title {
    font-size: var(--db-font-body-xl);
    font-weight: 300;
    color: var(--db-color-text);
    text-align: center;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 479px) {
    .card-ceramic .card-title {
        font-size: var(--db-font-body-l);
    }
}

.card-ceramic .card-dimensions {
    font-size: var(--db-font-body-m);
    color: var(--db-color-text);
    margin-top: var(--db-spacing-md);
}

.card-ceramic .card-year {
    font-size: var(--db-font-body-m);
    color: var(--db-color-text);
}

/* --- Interactions (Hover/Focus) --- */

.card-ceramic:hover .card-image-wrapper img {
    transform: scale(1.05);
}

/* Hover Image Logic */
.card-ceramic .card-image-wrapper img.img-hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0 !important;
    transition: opacity var(--db-anim-speed-normal) ease-in-out, transform var(--db-anim-speed-slow) var(--db-anim-ease-in-out);
}

.card-ceramic:hover .card-image-wrapper img.img-hover {
    opacity: 1 !important;
}

.card-ceramic:active,
.card-ceramic:focus-within {
    outline: none;
}

.card-ceramic:active .card-link-wrapper,
.card-ceramic:focus-within .card-link-wrapper {
    animation: loading-pulse var(--db-anim-speed-normal) var(--db-anim-ease-in-out) infinite;
}

.card-ceramic:active .card-artist-name,
.card-ceramic:active .card-title,
.card-ceramic:focus-within .card-artist-name,
.card-ceramic:focus-within .card-title,
.card-ceramic:active .card-dimensions,
.card-ceramic:active .card-year,
.card-ceramic:focus-within .card-dimensions,
.card-ceramic:focus-within .card-year {
    color: var(--db-color-primary);
}

/* Dimming */
/*
@media (min-width: 768px) {
    .grid-ceramic:has(.card-ceramic:hover) .card-ceramic:not(:hover) {
        filter: opacity(0.25);
        transition-delay: 2s;
    }

    .grid-ceramic .card-ceramic:hover {
        filter: opacity(1);
        transition-delay: 0s;
    }

    .grid-ceramic .card-ceramic:active,
    .grid-ceramic .card-ceramic:focus {
        outline: none;
        filter: opacity(1);
    }
}*/

/**
 * =============================================================================
 * 4. Event Card
 * =============================================================================
 */

/* Event Grid Layout */
.post-type-archive-events .grid-event {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--db-spacing-md);
    overflow: hidden;
}

/* Force grid children to respect their cell boundaries */
.grid-event>* {
    min-width: 0;
    /* overflow: hidden; */
}

/* Mobile */
@media (max-width: 479px) {
    .post-type-archive-events .grid-event {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: var(--db-spacing-sm);
    }
}

/* Tablet */
@media (min-width: 768px) {
    .post-type-archive-events .grid-event {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--db-spacing-lg);
    }
}

/* Desktop */
@media (min-width: 992px) {
    .post-type-archive-events .grid-event {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--db-spacing-xl);
        transition: gap var(--db-anim-speed-faster) var(--db-anim-ease);
    }
}

/* Expand gap permanently for timeline on large screens & allow oldest year (2021) to scroll into view */
@media (min-width: 1025px) {
    .post-type-archive-events .grid-event {
        gap: var(--db-spacing-3xl);
        padding-bottom: clamp(140px, 20vh, 260px);
    }
}

/* Year Heading */
.grid-event-archive .year-heading {
    grid-column: 1 / -1;
    font-size: var(--db-font-title-l);
    font-weight: 300;
    margin: var(--db-spacing-xl) auto;
    display: flex;
    align-items: center;
    gap: var(--db-spacing-lg);
    width: 100%;
}

.grid-event-archive .year-heading:before,
.grid-event-archive .year-heading:after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: color-mix(in srgb, var(--db-color-text) 20%, transparent)
}

.card-event {
    min-width: 0;
    filter: opacity(1);
    transition: filter var(--db-anim-speed-normal, 0.5s) ease;
    /* Elastic scroll effect: define variable here for inheritance */
    --elastic-scale: 1;
}

.card-event .card-link-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-decoration: none;
    /* Elastic scroll effect: applied here to avoid animation conflict */
    transform: scale(var(--elastic-scale));
    transform-origin: center center;
    transition: transform var(--db-anim-speed-fast) var(--db-anim-ease-out);
}

.card-event .card-image-wrapper {
    width: 100%;
    border-radius: var(--db-radius-sm);
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--db-color-bg-alt, #f5f5f5);
}

.card-event .card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--db-anim-speed-normal) var(--db-anim-ease-in-out), opacity var(--db-anim-speed-normal) var(--db-anim-ease-in-out);
    opacity: 0;
}

.card-event .card-image-wrapper img.loaded {
    opacity: 1;
}

.card-event .card-content {
    display: flex;
    flex-direction: column;
    gap: var(--db-spacing-xs);
    width: 100%;
    min-width: 0;
    padding: var(--db-spacing-lg);
    position: relative;
}

@media (max-width: 768px) {
    .card-event .card-content {
        padding: var(--db-spacing-lg) var(--db-spacing-md);
    }
}

.card-event .card-title {
    margin: 0;
    font-size: var(--db-font-body-xl);
    display: block;
    max-width: 100%;
    min-width: 0;
    margin-bottom: var(--db-spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

@media (max-width: 479px) {
    .card-event .card-title {
        font-size: var(--db-font-body-l);
    }
}

.card-event .artist-prefix {
    text-transform: uppercase;
}

.card-event .sep {
    font-weight: 600;
    margin: 0 var(--db-spacing-2xs);
}

.card-event .card-date,
.card-event .card-location {
    font-size: var(--db-font-body-m);
    font-weight: 300;
    line-height: 1.4;
    display: flex;
    align-items: center;
    /* For arrow alignment */
}

.card-event .card-date {
    margin-bottom: var(--db-spacing-xs);
}

/* Status Label (Prochainement, Actuellement, Demain) */
.card-event .card-status-label {
    position: absolute;
    top: -1.3rem;
    display: inline-block;
    font-size: var(--db-font-body-xs);
    font-weight: 600;
    text-transform: uppercase;
    background-color: var(--db-color-primary);
    color: var(--db-color-white);
    padding: var(--db-spacing-xs) var(--db-spacing-md);
    border-radius: 0.15rem;
    z-index: 10;
}

/* Trigger animation when parent card enters viewport */
.card-event.start-anim .card-status-label {
    animation: reveal-sticker 0.6s var(--db-anim-ease-out) 1.25s both;
}

.card-event .card-location {
    margin-top: var(--db-spacing-md);
}

.card-event .card-date .arrow {
    margin: 0 var(--db-spacing-sm);
    font-size: 0.9em;
    line-height: 1;
}

@media (min-width: 992px) {

    /* Text Alignment for Odd Items (Left Column) */
    .post-type-archive-events .grid-event .is-odd .card-content {
        text-align: right;
        align-items: flex-end;
    }

    .post-type-archive-events .grid-event .is-odd .card-status-label {
        right: var(--db-spacing-lg);
    }

    .post-type-archive-events .grid-event .is-even .card-status-label {
        left: var(--db-spacing-lg);
    }

    /* Ensure flex children align right */
    .post-type-archive-events .grid-event .is-odd .card-location,
    .post-type-archive-events .grid-event .is-odd .card-date {
        justify-content: flex-end;
    }

    /* Event Grid Offset (Staggered Layout) */
    .post-type-archive-events .grid-event>*:nth-child(even) {
        margin-top: var(--db-spacing-2xl);
    }
}

/* --- Interactions (Hover/Focus) --- */

/* --- Card Event Animation: Zoom & Pan --- */
@keyframes pan-zoom-move {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

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

.card-event:hover .card-image-wrapper img {
    animation: pan-zoom-move 10s linear infinite alternate;
    animation-delay: 0.5s;
    transition: none;
    opacity: 1;
}

.card-event:active,
.card-event:focus-within {
    outline: none;
}

.card-event:active .card-link-wrapper,
.card-event:focus-within .card-link-wrapper {
    animation: loading-pulse var(--db-anim-speed-normal) var(--db-anim-ease-in-out) infinite;
}

.card-event:active .card-date,
.card-event:active .card-location,
.card-event:active .card-title,
.card-event:focus-within .card-date,
.card-event:focus-within .card-location,
.card-event:focus-within .card-title {
    color: var(--db-color-primary);
}

/* Dimming */
/*
@media (min-width: 768px) {
    .grid-event:has(.card-event:hover) .card-event:not(:hover) {
        filter: opacity(0.25);
        transition-delay: 2s;
    }

    .grid-event .card-event:hover {
        filter: opacity(1);
        transition-delay: 0s;
    }

    .grid-event .card-event:active,
    .grid-event .card-event:focus {
        outline: none;
        filter: opacity(1);
    }
}
*/

/**
 * =============================================================================
 * 5. Image Gallery (Bricks) - Elastic Scroll Effect
 * =============================================================================
 */

.brxe-image-gallery figure {
    /* Elastic scroll effect */
    --elastic-scale: 1;
    transform: scale(var(--elastic-scale));
    transform-origin: center center;
    transition: transform var(--db-anim-speed-fast) var(--db-anim-ease-out);
}

/**
 * =============================================================================
 * 6. Press Card
 * =============================================================================
 */

/* --- Base (shared) --- */

.card-press {
    box-sizing: border-box;
}

.card-press-title {
    font-size: var(--db-font-body-xl);
    font-weight: 300;
    margin: 0;
}

.card-press-links {
    display: flex;
    align-items: center;
    gap: var(--db-spacing-md);
}

.card-press-links-label {
    font-size: var(--db-font-body-m);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--db-color-primary);
    padding-bottom: var(--db-spacing-xs);
}

/* --- 6.1 Featured Variant (Carousel) --- */

.card-press-featured {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-evenly;
    gap: var(--db-spacing-lg);
    padding: var(--db-spacing-xl);
    background: var(--db-color-white);
    border: 2px solid var(--db-color-primary);
}

.card-press-featured .card-press-title {
    color: var(--db-color-black);
}

.card-press-featured .card-press-links {
    justify-content: center;
}

/* Header: Logo or Author */

.card-press-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
}

.card-press-logo {
    height: 3.5rem;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    display: block;
}

.card-press-featured .card-press-author {
    font-size: var(--db-font-title-2xl);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Quote */

.card-press-quote {
    font-family: var(--db-font-main);
    font-size: var(--db-font-body-xl);
    font-weight: 500;
    line-height: 1.6;
    color: var(--db-color-black);
    margin: 0;
    padding: 0;
    border: none;
    font-style: normal;
    text-align: left;
}

/* --- 6.2 Default Variant (Archive Grid) --- */

.card-press-default {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--db-spacing-xl);
    padding: var(--db-spacing-lg);
    border-bottom: 1px solid color-mix(in srgb, var(--db-color-text) 20%, transparent)
}

/* Content wrapper (date + body) */

.card-press-default .card-press-content {
    display: flex;
    gap: var(--db-spacing-xl);
}

.card-press-default .card-press-date {
    font-size: var(--db-font-body-m);
    color: var(--db-color-text);
    white-space: nowrap;
    min-width: 8rem;
    text-align: right;
}

.card-press-default .card-press-body {
    display: flex;
    flex-direction: column;
    gap: var(--db-spacing-md);
}

.card-press-default .card-press-author {
    font-size: var(--db-font-body-m);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--db-color-text);
}

.card-press-default .card-press-title {
    color: var(--db-color-text);
    font-size: var(--db-font-body-l);
    line-height: 1.4 !important;
}

/* Cover image column */

.card-press-default .card-press-cover-wrapper {
    width: clamp(14rem, 25vw, 22rem);
    aspect-ratio: 16/10;
    overflow: hidden;
    flex-shrink: 0;
}

.card-press-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Responsive --- */

@media (max-width: 767px) {

    /* Featured */
    .card-press-featured {
        padding: var(--db-spacing-lg);
        gap: var(--db-spacing-md);
    }

    .card-press-quote {
        font-size: var(--db-font-body-m);
    }

    /* Default: stack vertically */
    .card-press-default {
        grid-template-columns: 1fr;
        gap: var(--db-spacing-md);
        border-bottom: none;
    }

    .card-press-default .card-press-date {
        min-width: unset;
    }

    .card-press-default .card-press-cover-wrapper {
        order: -1;
        width: 100%;
        aspect-ratio: 16/9;
    }
}

@media (max-width: 479px) {
    .card-press-default {
        padding: var(--db-spacing-lg) 0;
        gap: var(--db-spacing-lg);
    }

    .card-press-default .card-press-content {
        position: relative;
    }

    .card-press-default .card-press-date {
        position: absolute;
        top: 0;
        right: 0;
    }

    .card-press-default .card-press-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--db-spacing-md);
    }
}

/* === components/filters.css === */
/**
 * COMPONENT: FILTERS
 * Styling for category filter buttons and interactions.
 */

.filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    width: 100% !important;
    justify-content: center !important;
    text-align: center;
    margin-top: var(--db-spacing-md);
}

.filter-btn {
    background: none;
    border: none;
    padding: var(--db-spacing-sm) var(--db-spacing-md);
    margin: 0;
    cursor: pointer;

    /* Typography */
    font-size: var(--db-font-body-s);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--db-color-text);

    /* State */
    opacity: 0.5;
    transition: opacity var(--db-anim-speed-faster) var(--db-anim-ease), color var(--db-anim-speed-faster) var(--db-anim-ease);
}

.filter-btn:hover {
    opacity: 0.8;
}

.filter-btn.active {
    opacity: 1;
}

/* Filter: Active Pulse (Ceramic & Event) */
.filter-btn.ceramic-filter-btn:focus,
.filter-btn.event-filter-btn:focus {
    animation: loading-pulse var(--db-anim-speed-normal) var(--db-anim-ease-in-out) infinite;
}

/* Filter Selection States */
@media (max-width: 991px) {
    .is-filtered-out {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .is-filtered-out {
        opacity: 0.3 !important;
        filter: blur(var(--db-effect-blur-2xs));
        pointer-events: none;
        transition: opacity 0.3s ease, filter 0.3s ease;
    }
}

/* === components/carousel.css === */
/**
 * COMPONENT: CAROUSEL
 * Styling for Bricks Nestable Slider with "Elastic" effect.
 */

/* 
 * CRITICAL: Do NOT override 'gap' here. 
 * Splide JS calculates slide width based on the JS 'gap' setting.
 * Changing gap in CSS breaks the layout (truncation/overflow).
 */

/**
 * =============================================================================
 * 0. BASE
 * =============================================================================
 */

/*
.splide__slide:not(.is-visible) {
    opacity: var(--db-effect-opacity-ghost);
    transform: scale(0.92);
}*/

/* Elastic Effect */
.splide__slide>* {
    transition: transform 0.2s var(--db-anim-ease-out);
    will-change: transform;
    transform-origin: center center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media (min-width: 769px) {
    .splide__slide:not(.is-visible) {
        opacity: 0.5;
        transition: opacity var(--db-anim-speed-fast) var(--db-anim-ease-out);
    }

    .is-dragging .splide__slide>* {
        transform: scale(0.92);
    }
}

/* Slider Nestable Overflow */
/* Allow cards to peek outside slider bounds to full viewport width */
/* Excluded on Single Artist pages where we want contained overflow */
body:not(.single-artists) .brxe-slider-nested .splide__track {
    overflow: visible;
}

/* Prevent page-level horizontal scroll */
html:has(.brxe-slider-nested),
body:has(.brxe-slider-nested) {
    overflow-x: hidden;
    /* Fallback */
    overflow-x: clip;
}

@media (max-width: 479px) {
    .brxe-slider-nested .splide__track {
        overflow: scroll;
        scrollbar-width: thin;
    }
}

/**
 * =============================================================================
 * 1. ARROWS
 * =============================================================================
 */

/* Slider Nestable */

.splide__arrow:disabled {
    cursor: default
}

/* Hide arrows when carousel has fewer slides than perPage */
.carousel-few-slides .splide__arrow {
    display: none;
}

.splide__arrow {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    backdrop-filter: blur(var(--db-effect-blur-sm));
}

.splide__arrow:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0px;
    height: 0px;
    border-radius: 100%;
    border: 0px solid color-mix(in srgb, var(--db-color-text), transparent 90%);
    transform: translate(-50%, -50%);
    transition: all .25s var(--db-anim-ease-out);
}

.splide__arrow svg {
    height: 14px;
    fill: var(--db-color-text);
    transition: all .25s var(--db-anim-ease-out);
}

/* Carousel */

.swiper-button {
    height: 100%;
    top: 0;
    transform: translate(0, 0) !important;
    /* Disable tap highlight - fallback first, then transparent */
    -webkit-tap-highlight-color: color-mix(in srgb, var(--db-color-text) 10%, transparent);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.swiper-button.bricks-swiper-button-prev {
    left: 0 !important;
}

.swiper-button.bricks-swiper-button-next {
    right: 0 !important;
}

@media (min-width: 769px) {
    .carousel-immersive .swiper-button {
        opacity: 0;
        width: 50%;
    }

    .carousel-immersive .swiper-button.bricks-swiper-button-prev {
        cursor: url('../icons/arrow-left.svg') 20 20, pointer;
    }

    .carousel-immersive .swiper-button.bricks-swiper-button-prev:active {
        cursor: url('../icons/arrow-left.svg') 25 20, pointer;
    }

    .carousel-immersive .swiper-button.bricks-swiper-button-next {
        cursor: url('../icons/arrow-right.svg') 20 20, pointer;
    }

    .carousel-immersive .swiper-button.bricks-swiper-button-next:active {
        cursor: url('../icons/arrow-right.svg') 15 20, pointer;
    }
}

.swiper-button i {
    font-size: var(--db-font-body-2xl);
    transition: all var(--db-anim-speed-fast) var(--db-anim-ease-out);
}

.swiper-button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 0px solid color-mix(in srgb, var(--db-color-text), transparent 90%);
    backdrop-filter: blur(var(--db-effect-blur-sm));
    transform: translate(-50%, -50%);
    transition: all var(--db-anim-speed-fast) var(--db-anim-ease-out);
}

@media (max-width: 768px) {
    .brxe-carousel.carousel-immersive .swiper-button {
        opacity: 0;
    }
}

/* Interactions */

.splide__arrow:hover:before,
.swiper-button:hover:before {
    border-width: 1.5px;
    width: 40px;
    height: 40px;
    padding-left: 4px;
}

.splide__arrow--next:hover>svg,
.splide__arrow--prev:hover>svg,
.bricks-swiper-button-next:hover>i {
    transform: translateX(4px);
}

.bricks-swiper-button-prev:hover>i {
    transform: translateX(-4px);
}

.splide__arrow:active>svg {
    fill: var(--db-color-primary);
}

.swiper-button:active>i {
    color: var(--db-color-primary);
}

.splide__arrow:active:before {
    border-color: var(--db-color-primary);
}

/**
 * =============================================================================
 * 2. DEFAULT PAGINATION (Slider Nestable)
 * =============================================================================
 */

.brxe-slider-nested .splide__pagination {
    backdrop-filter: blur(0.25rem);
    border: 1.5px solid color-mix(in srgb, var(--db-color-black), transparent 90%);
    padding: var(--db-spacing-xs) var(--db-spacing-sm);
    border-radius: 50px;
    bottom: calc(var(--db-spacing-xl) * -1);
}

.brxe-slider-nested .splide__pagination .splide__pagination__page {
    height: 4px;
    width: 4px;
    background-color: color-mix(in srgb, var(--db-color-white) 20%, transparent);
}

.brxe-slider-nested .splide__pagination .splide__pagination__page.is-active {
    background-color: var(--db-color-white);
}

/**
 * =============================================================================
 * 3. AUTOPLAY PAGINATION (Carousel)
 * =============================================================================
 */

.carousel-immersive .swiper-pagination {
    top: 15px;
    bottom: inherit;
}

.carousel-immersive .swiper-pagination .swiper-pagination-bullet {
    width: 24px;
    height: 2px;
    border-radius: 4px;
}

.brxe-carousel .swiper-pagination {
    backdrop-filter: blur(0.25rem);
    background-color: color-mix(in srgb, var(--db-color-black), transparent 75%);
    padding: var(--db-spacing-sm);
    border-radius: 50px;
}

/* Progress indicator: bullets before active = white, after = semi-transparent */
/* Trick: style all bullets as "completed", then reset those AFTER active */
.carousel-immersive .swiper-pagination-bullet {
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color: var(--db-color-white);
    /* All bullets start as "visited" */
}

/* Bullets AFTER the active one: reset to semi-transparent */
.carousel-immersive .swiper-pagination-bullet-active~.swiper-pagination-bullet {
    background-color: color-mix(in srgb, var(--db-color-white) 20%, transparent);
}

.carousel-immersive .swiper-pagination-bullet-active {
    background-color: var(--db-color-white);
}

/* Regular carousel (non-immersive): keep original styling */
.brxe-carousel:not(.carousel-immersive) .swiper-pagination-bullet {
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--db-color-white) 20%, transparent);
}

.brxe-carousel:not(.carousel-immersive) .swiper-pagination-bullet-active {
    background-color: var(--db-color-white);
}

/* Hide controls when only one real slide (ignoring Swiper duplicates) */
.brxe-carousel:not(:has(.swiper-slide:not(.swiper-slide-duplicate) ~ .swiper-slide:not(.swiper-slide-duplicate))) .swiper-pagination,
.brxe-carousel:not(:has(.swiper-slide:not(.swiper-slide-duplicate) ~ .swiper-slide:not(.swiper-slide-duplicate))) .swiper-button,
.brxe-carousel:not(:has(.swiper-slide:not(.swiper-slide-duplicate) ~ .swiper-slide:not(.swiper-slide-duplicate))) .bricks-swiper-button-prev,
.brxe-carousel:not(:has(.swiper-slide:not(.swiper-slide-duplicate) ~ .swiper-slide:not(.swiper-slide-duplicate))) .bricks-swiper-button-next,
.brxe-carousel:not(:has(.swiper-slide:not(.swiper-slide-duplicate) ~ .swiper-slide:not(.swiper-slide-duplicate)))>.swiper-button,
.brxe-carousel:not(:has(.swiper-slide:not(.swiper-slide-duplicate) ~ .swiper-slide:not(.swiper-slide-duplicate)))>[class*="bricks-swiper-button"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/**
 * =============================================================================
 * 4. COUNTER
 * =============================================================================
 */

.carousel-multiple-items .splide__arrow {
    top: calc(var(--db-spacing-xl) * -0.85);
}

.carousel-multiple-items .splide__arrow--next {
    right: var(--db-spacing-lg);
}

.carousel-multiple-items .splide__arrow--prev {
    right: calc(var(--db-spacing-3xl) * 0.4);
    left: auto;
}

.carousel-multiple-items {
    position: relative;
}



/**
 * =============================================================================
 * 5. IMMERSIVE FULLSCREEN EFFECTS
 * =============================================================================
 */

/* Container: Full viewport minus navigation for desktop */
@media (min-width: 769px) {
    .carousel-immersive {
        width: 100%;
        height: calc(100vh - 82px);
        height: calc(100dvh - 82px);
    }
}

/* Container: Full viewport minus navigation for mobile */
@media (max-width: 768px) {
    .carousel-immersive {
        width: 100%;
        height: calc(100vh - 115px);
        height: calc(100dvh - 115px);
    }
}

/* Force all internal containers to respect parent height */
.carousel-immersive .bricks-swiper-container,
.carousel-immersive .swiper,
.carousel-immersive .swiper-wrapper,
.carousel-immersive .swiper-slide {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden;
}

.single-events .carousel-immersive .swiper-slide {
    overflow: hidden;
    border-radius: var(--db-radius-sm);
}

/* Desktop (landscape): Ken Burns effect (zoom) */
/* Higher specificity to override Bricks' height: auto !important on images */
.brxe-carousel.carousel-immersive .swiper-slide img,
.brxe-carousel.carousel-immersive .swiper-slide .image,
.brxe-carousel.carousel-immersive .swiper-slide .brxe-image img,
.brxe-carousel.carousel-immersive.swiper-autoheight .swiper-slide img,
.brxe-carousel.carousel-immersive.swiper-autoheight .swiper-slide .image,
.brxe-carousel.carousel-immersive.swiper-autoheight .swiper-slide .brxe-image img {
    width: 100%;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 100% !important;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    transform-origin: center center;
    animation: media-ken-burns ease-in-out 24s infinite;
}

/* Portrait viewports: Pan effect (image fills height, pans horizontally) */
/* Using orientation: portrait for better mobile device compatibility */
@media (orientation: portrait) {

    .brxe-carousel.carousel-immersive .swiper-slide img,
    .brxe-carousel.carousel-immersive .swiper-slide .image,
    .brxe-carousel.carousel-immersive .swiper-slide .brxe-image img,
    .brxe-carousel.carousel-immersive.swiper-autoheight .swiper-slide img,
    .brxe-carousel.carousel-immersive.swiper-autoheight .swiper-slide .image,
    .brxe-carousel.carousel-immersive.swiper-autoheight .swiper-slide .brxe-image img {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        object-fit: cover;
        object-position: center center;
        /* Pan animation using object-position */
        -webkit-animation: media-pan ease-out 40s infinite;
        animation: media-pan ease-out 40s infinite;
    }
}

/* === components/modal.css === */
/**
 * COMPONENT: MODAL (Lightbox Enhancements)
 * 
 * Styles for customized Bricks PhotoSwipe lightbox
 */

/**
 * =============================================================================
 * 0. BASE
 * =============================================================================
 */

/* Blurred background overlay */
.pswp-blur-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(var(--db-effect-blur-xl));
    transform: scale(1.1);
    opacity: 0;
    transition:
        background-image 0.3s ease,
        opacity 0.6s ease;
}

/* Fade in when lightbox is open */
.pswp.pswp--open .pswp-blur-bg {
    opacity: 1;
}

/* Ensure PhotoSwipe has relative positioning for the bg */
.pswp {
    backdrop-filter: blur(var(--db-effect-blur-sm));
    --pswp-bg: rgba(0, 0, 0, 0.25) !important;
}

/* Override default dark background to reveal blur */
.pswp__bg {
    background: rgba(0, 0, 0, 0.25) !important;
}

.pswp.brx .pswp__img {
    border-radius: var(--db-radius-sm);
}

/**
 * =============================================================================
 * 1. ARROWS
 * =============================================================================
 */

.pswp.brx .pswp__button--arrow {
    margin-top: 0 !important;
    width: 20% !important;
    height: 100% !important;
    transform: translateY(-50%) !important;
}

.pswp.brx .pswp__button--arrow .pswp__icn {
    height: 40px !important;
    width: 40px !important;
    margin-top: auto !important;
    backdrop-filter: blur(var(--db-effect-blur-sm));
    background-color: color-mix(in srgb, var(--db-color-black), transparent 90%) !important;
    border: 1.5px solid color-mix(in srgb, var(--db-color-white), transparent 75%) !important;
    border-radius: 100% !important;
    transition: all var(--db-anim-speed-normal) var(--db-anim-ease-out);
}

.pswp.brx .pswp__button--arrow--prev .pswp__icn {
    left: var(--db-spacing-lg) !important;
    padding-left: 5px;
}

.pswp.brx .pswp__button--arrow--next .pswp__icn {
    right: var(--db-spacing-lg) !important;
    padding-left: 5px;
}

.pswp.brx .pswp__button--arrow:hover .pswp__icn {
    border-color: var(--db-color-white) !important;
    padding-left: 3px;
}

.pswp.brx .pswp__icn-shadow {
    stroke: none !important;
    stroke-width: initial !important;
}

/**
 * =============================================================================
 * 2. CLOSE BUTTON
 * =============================================================================
 */

.pswp.brx .pswp__top-bar .pswp__button--close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 40px !important;
    width: 40px !important;
    backdrop-filter: blur(var(--db-effect-blur-sm));
    background-color: color-mix(in srgb, var(--db-color-black), transparent 90%) !important;
    border-radius: 100% !important;
    transform: rotate(0deg);
    will-change: transform;
    transition: transform var(--db-anim-speed-normal) var(--db-anim-ease-out) !important;
}

.pswp.brx .pswp__top-bar .pswp__button--close:hover {
    transform: rotate(180deg) !important;
}

.pswp.brx .pswp__top-bar .pswp__button svg {
    height: 26px !important;
    width: 26px !important;
}

/**
 * =============================================================================
 * 3. COUNTER
 * =============================================================================
 */

.pswp__counter {
    height: auto !important;
    text-shadow: none !important;
    line-height: inherit !important;
    letter-spacing: 0px;
    backdrop-filter: blur(var(--db-effect-blur-sm));
    background-color: color-mix(in srgb, var(--db-color-black), transparent 90%) !important;
    border-radius: var(--db-radius-lg);
    padding: var(--db-spacing-sm) var(--db-spacing-lg);
}

/**
 * =============================================================================
 * 4. MODAL
 * =============================================================================
 */

@media (max-width: 479px) {
    .brx-popup-content {
        width: 100% !important
    }

    .brx-popup {
        justify-content: end;
    }
}

@media (max-width: 991px) {
    .brx-popup-content {
        width: 700px !important;
    }
}

@media (min-width: 992px) {
    .brx-popup-content {
        width: 470px !important;
    }
}

.brx-popup-backdrop {
    backdrop-filter: blur(var(--db-effect-blur-sm));
}

.brx-popup-content {
    background-color: var(--db-color-primary);
    border-radius: var(--db-radius-md);
    padding: 0;
}

.brx-popup-content h2 {
    color: var(--db-color-white);
    font-size: var(--db-font-title-m);
    font-weight: 500;
    margin-bottom: 0;
}

.brx-popup-content p {
    color: var(--db-color-white);
    font-weight: 600;
}

.brx-popup-content .button-close {
    height: 32px !important;
    width: 32px !important;
    padding: var(--db-spacing-xs);
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1.5px solid color-mix(in srgb, var(--db-color-white), transparent 75%) !important;
    border-radius: 100% !important;
    cursor: pointer;
}

.brx-popup-content .button-close i {
    color: var(--db-color-white);
    font-size: 12px !important;
    transform: rotate(0deg);
    will-change: transform;
    transition: transform var(--db-anim-speed-normal) var(--db-anim-ease-out) !important;
}

.brx-popup-content .button-close:hover i {
    transform: rotate(180deg) !important;
}

/**
 * =============================================================================
 * 5. GRIDS
 * =============================================================================
 */

/* Newsletter */

.brxe-popup-33834 .brx-popup-content .brxe-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--db-spacing-md);
}

.brxe-popup-33834 .brx-popup-content .brxe-form .form-group:nth-child(3),
.brxe-popup-33834 .brx-popup-content .brxe-form .submit-button-wrapper {
    grid-column: 1 / -1;
}

/* Ceramic Informations */

.brxe-popup-33873 .brx-popup-content .brxe-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--db-spacing-md);
}

.brxe-popup-33873 .brx-popup-content .brxe-form .form-group:nth-child(5),
.brxe-popup-33873 .brx-popup-content .brxe-form .submit-button-wrapper {
    grid-column: 1 / -1;
}

/* Artist Informations */

.brxe-popup-33884 .brx-popup-content .brxe-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--db-spacing-md);
}

.brxe-popup-33884 .brx-popup-content .brxe-form .form-group:nth-child(5),
.brxe-popup-33884 .brx-popup-content .brxe-form .submit-button-wrapper {
    grid-column: 1 / -1;
}

/* === patterns/singles.css === */
/**
 * PATTERN: SINGLES
 * Styles for all single post type templates (Artist, Ceramic, Event, etc.)
 */

/**
 * =============================================================================
 * 1. SINGLE CERAMICS
 * =============================================================================
 */

/* General information's fade-in-up animation */
@keyframes reveal-fade-in-up-centered {
    from {
        opacity: 0;
        transform: translate3d(0, calc(-50% + 100%), 0);
    }

    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

.is-view-observed[style*="position: sticky"]:not(.start-anim):not([data-stagger]),
.is-view-observed[style*="position:sticky"]:not(.start-anim):not([data-stagger]) {
    opacity: 1 !important;
}

/* Centered fade-in-up animation for desktop */
@media (min-width: 767px) {
    #brxe-cgsqjn.reveal-fade-in-up {
        animation-name: reveal-fade-in-up-centered !important;
    }
}

/* Measures */
#brxe-ypqouf {
    display: flex;
    gap: var(--db-spacing-lg);
}

/**
 * =============================================================================
 * 2. EVENT SINGLE
 * =============================================================================
 */

@media (min-width: 769px) {
    .single-events .image-hero {
        width: 100%;
        height: calc(100vh - 82px);
        height: calc(100dvh - 82px);
    }
}

/* Container: Full viewport minus navigation for mobile */
@media (max-width: 768px) {
    .single-events .image-hero {
        width: 100%;
        height: calc(100vh - 115px);
        height: calc(100dvh - 115px);
    }
}

.single-events .image-hero img {
    width: 100%;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 100% !important;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
}

/* Card Immersive */

.card-immersive {
    padding: var(--db-spacing-lg) var(--db-spacing-xl) var(--db-spacing-sm) var(--db-spacing-xl);
    background: var(--db-color-bg);
    position: absolute;
    z-index: 50;
    bottom: 0;
    text-align: center;
    border-radius: var(--db-radius-md) var(--db-radius-md) 0 0;
    transition:
        border-radius var(--db-anim-speed-faster) var(--db-anim-ease-out) 0.2s,
        padding var(--db-anim-speed-fast) var(--db-anim-ease-out),
        backdrop-filter var(--db-anim-speed-normal) var(--db-anim-ease-out);
}

.card-immersive.mini .event-title {
    color: var(--db-color-text) !important;
}

.card-immersive .event-status-label {
    opacity: 1;
    visibility: visible;
    max-height: 100px;
    overflow: hidden;
    transition:
        opacity var(--db-anim-speed-faster) var(--db-anim-ease-out),
        visibility var(--db-anim-speed-faster) var(--db-anim-ease-out),
        max-height var(--db-anim-speed-faster) var(--db-anim-ease-out);
}

/* Elements that fade out in mini mode */
.card-immersive .event-date,
.card-immersive .event-location,
.card-immersive .brxe-slider-nested {
    color: var(--db-color-text) !important;
    opacity: 1;
    visibility: visible;
    max-height: 100px;
    overflow: hidden;
    transition:
        opacity var(--db-anim-speed-faster) var(--db-anim-ease-out),
        visibility var(--db-anim-speed-faster) var(--db-anim-ease-out),
        max-height var(--db-anim-speed-faster) var(--db-anim-ease-out);
}

.card-immersive .event-status-label {
    color: var(--db-color-white) !important;
}

.card-immersive .event-status-label.is-hidden,
.card-immersive .event-date.is-hidden,
.card-immersive .event-location.is-hidden,
.card-immersive .brxe-slider-nested.is-hidden {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
}

@media (max-width: 768px) {
    .card-immersive {
        padding: var(--db-spacing-lg);
        text-align: center;
        bottom: var(--db-spacing-lg);
        left: var(--db-spacing-lg);
        right: var(--db-spacing-lg);
    }

    .card-immersive.mini {
        bottom: 0;
        left: var(--db-spacing-lg);
        right: var(--db-spacing-lg);
    }
}

/*
.single-events .event-status-label,
.single-events .event-title,
.single-events .event-date,
.single-events .event-location {
    text-align: center;
}

.single-events #brxe-mdpkid {
    display: flex;
    justify-content: center;
    margin-bottom: var(--db-spacing-md);
}*/

.event-status-label {
    display: inline-block;
    position: absolute;
    top: calc(-1 * var(--db-spacing-md));
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--db-font-body-xs);
    font-weight: 600;
    text-transform: uppercase;
    background-color: var(--db-color-primary);
    color: var(--db-color-text);
    padding: var(--db-spacing-xs) var(--db-spacing-md);
    border-radius: 0.15rem;
    animation: reveal-sticker 0.6s var(--db-anim-ease-out) 1.25s both;
}

.event-date {
    color: var(--db-color-text);
    font-size: var(--db-font-body-l);
    margin-bottom: var(--db-spacing-sm);
}

.single-events .event-title {
    color: var(--db-color-text);
    font-size: var(--db-font-title-m);
    font-weight: 500;
}

.single-events .event-title .artist-prefix {
    text-transform: uppercase;
}

.single-events .event-title .sep {
    font-weight: 600;
    margin: 0 var(--db-spacing-2xs);
}

.single-events .card-immersive .card-artist-name:before {
    content: "avec";
    text-transform: capitalize;
    font-size: var(--db-font-body-sm);
    letter-spacing: 0.15em;
    color: var(--db-color-text);
}

.single-events .card-immersive .card-artist-name {
    justify-content: center;
}

.single-events .card-immersive .brxe-slider-nested {
    max-width: 250px;
    margin: 0 auto;
}

.single-events .card-immersive .brxe-slider-nested .splide__slide:not(.single-events .card-immersive .brxe-slider-nested .splide__slide.is-visible) {
    opacity: 0;
}

.event-location {
    color: var(--db-color-text);
    font-size: var(--db-font-body-l);
    margin-top: var(--db-spacing-md);
}

/* === patterns/archives.css === */
/**
 * PATTERN: ARCHIVES
 * Styles for all archive templates (Collections, Artists, Ceramics, Events, etc.)
 */

/**
 * =============================================================================
 * 0. Archive Title (Sticky DISABLED)
 * =============================================================================
 */

.title-archive {
    /* DISABLED: Sticky functionality
    position: sticky;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(5px);
    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    */
    padding: var(--db-spacing-xl);
    background: linear-gradient(180deg, var(--db-color-bg) 0%, color-mix(in srgb, var(--db-color-bg) 0%, transparent) 100%);
    color: var(--db-color-text);
}

/* DISABLED: Hidden/Sticky states no longer needed
.title-archive.is-hidden {
    transform: none;
    opacity: 0;
    pointer-events: none;
}

.title-archive.is-sticky {
    padding: var(--db-spacing-lg) var(--db-spacing-xl);
}

.title-archive.is-sticky p,
.title-archive.is-sticky .archive-count {
    display: none;
}

.title-archive.is-sticky .filter-wrapper {
    margin-top: 0 !important;
}
*/

.archive-count {
    display: inline-block;
    font-size: var(--db-font-body-s);
    line-height: 1;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.15em;
    vertical-align: super;
    position: relative;
    margin-left: -0.5em;
    top: -0.5em;
}

@media (max-width: 768px) {
    .title-archive {
        padding: var(--db-spacing-xl) var(--db-spacing-lg) var(--db-spacing-lg) var(--db-spacing-lg);
    }
}

/* --- 6. Archive Progress Indicator (Bottom Sticky) --- */

.archive-progress {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--db-spacing-sm);
    padding: var(--db-spacing-md) 0;

    /* Gradient Background (Transparent Top -> Solid Bottom) */
    background: linear-gradient(0deg, var(--db-color-bg) 0%, color-mix(in srgb, var(--db-color-bg) 0%, transparent) 100%);

    transition: transform var(--db-anim-speed-fast, 0.2s) var(--db-anim-ease-in-out, ease-in-out),
        opacity var(--db-anim-speed-fast, 0.2s) var(--db-anim-ease-in-out, ease-in-out);
    will-change: transform, opacity;
}

.archive-progress.is-hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.archive-progress .progress-box {
    backdrop-filter: blur(var(--db-effect-blur-md));
    background: color-mix(in srgb, var(--db-color-bg) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--db-color-text) 20%, transparent);
    border-radius: var(--db-radius-xl);
    padding: var(--db-spacing-md) var(--db-spacing-lg);
    gap: var(--db-spacing-sm);
    display: flex;
    flex-direction: column;
}

.archive-progress .progress-bar {
    width: 100%;
    max-width: 96px;
    height: 2px;
    background-color: color-mix(in srgb, var(--db-color-text) 20%, transparent);
    border-radius: 999px;
    overflow: hidden;
}

.archive-progress .progress-bar .progress-fill {
    height: 100%;
    background-color: var(--db-color-text);
    width: 0%;
    transition: width 0.3s ease-out;
}

.archive-progress .progress-text {
    font-size: var(--db-font-body-s);
    font-weight: 600;
    color: var(--db-color-text);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/**
 * =============================================================================
 * 1. CERAMIC ARCHIVE
 * =============================================================================
 */

/* Carrousel */

.post-type-archive-ceramics .brxe-slider-nested.grid-artist-image {
    padding: var(--db-spacing-lg) var(--db-spacing-xl);
}

.post-type-archive-ceramics .brxe-slider-nested.grid-artist-image h2 {
    padding: 0;
    margin: 0;
}

.post-type-archive-ceramics .brxe-slider-nested.grid-artist-image .splide__arrow,
.post-type-archive-ceramics .brxe-slider-nested.grid-artist-image .splide__arrow:hover:before {
    border-radius: 40px;
    height: calc(100% - var(--db-spacing-md));
}

.post-type-archive-ceramics .brxe-slider-nested.grid-artist-image .splide__arrow--prev {
    margin-left: var(--db-spacing-md);
}

.post-type-archive-ceramics .brxe-slider-nested.grid-artist-image .splide__arrow--next {
    margin-right: var(--db-spacing-md);
}

@media (max-width: 479px) {
    .post-type-archive-ceramics .brxe-slider-nested.grid-artist-image {
        padding: var(--db-spacing-md) 0;
    }

    .post-type-archive-ceramics .brxe-slider-nested.grid-artist-image .splide__arrow {
        display: none;
    }
}

/* Hide card images when navigation is sticky (show only names) */
.post-type-archive-ceramics .navigation-secondary .card-image-wrapper {
    max-height: 100px;
    overflow: hidden;
    transition: opacity var(--db-anim-speed-normal) var(--db-anim-ease),
        max-height var(--db-anim-speed-faster) var(--db-anim-ease);
}

.post-type-archive-ceramics .navigation-secondary.is-sticky .card-image-wrapper {
    opacity: 0;
    max-height: 0;
    visibility: hidden;
    transition: opacity var(--db-anim-speed-normal) var(--db-anim-ease),
        max-height var(--db-anim-speed-faster) var(--db-anim-ease),
        visibility 0s var(--db-anim-speed-normal);
}

.post-type-archive-ceramics .navigation-secondary.is-sticky .card-artist-image,
.post-type-archive-ceramics .navigation-secondary.is-sticky:hover .card-artist-image {
    gap: 0;
}

.post-type-archive-ceramics .navigation-secondary.is-sticky:hover .card-image-wrapper {
    opacity: 1;
    max-height: 100px;
    visibility: visible;
    transition: opacity var(--db-anim-speed-normal) var(--db-anim-ease) 0.3s,
        max-height var(--db-anim-speed-faster) var(--db-anim-ease) 0.3s,
        visibility 0s 0.3s;
}

/**
 * =============================================================================
 * 2. ARTIST ARCHIVE
 * =============================================================================
 */

body.post-type-archive-artists {
    min-height: 100vh;
}

.post-type-archive-artists .card-image-wrapper img {
    max-width: 320px;
    max-height: 320px;
}

.post-type-archive-artists #brxe-phwumj-list,
.post-type-archive-artists #brxe-tthnmt-list {
    transform: none;
}

.post-type-archive-artists #brxe-kiutln {
    align-items: stretch !important;
}

.post-type-archive-artists #brxe-xuzivc,
.post-type-archive-artists #brxe-lcvwxz {
    height: auto !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
}

.post-type-archive-artists #brxe-xuzivc {
    justify-content: flex-start !important;
}

.post-type-archive-artists #brxe-lcvwxz {
    justify-content: flex-end !important;
}

.post-type-archive-artists #brxe-tthnmt {
    margin-top: auto !important;
}

.post-type-archive-artists #brxe-phwumj,
.post-type-archive-artists #brxe-tthnmt {
    height: auto !important;
    aspect-ratio: 1/1;
}

.post-type-archive-artists #brxe-phwumj .splide__track,
.post-type-archive-artists #brxe-tthnmt .splide__track,
.post-type-archive-artists #brxe-phwumj .splide__slide,
.post-type-archive-artists #brxe-tthnmt .splide__slide {
    height: 100% !important;
}

.post-type-archive-artists .brxe-slider-nested .splide__slide:not(.post-type-archive-artists .brxe-slider-nested .splide__slide.is-visible) {
    opacity: 0;
}

/* --- Artist Hover Preview Overlays --- */
.post-type-archive-artists #brxe-phwumj,
.post-type-archive-artists #brxe-tthnmt {
    position: relative;
}

.db-artist-preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Bloc de gauche : Calé en haut du conteneur sans déborder */
.db-artist-preview-overlay.db-preview-left {
    align-items: flex-start;
    transform: none;
}

/* Bloc de droite : Calé en bas du conteneur */
.db-artist-preview-overlay.db-preview-right {
    align-items: flex-end;
    transform: none;
}

.db-artist-preview-overlay.is-active {
    opacity: 1;
}

.db-artist-preview-overlay .db-preview-frame {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1/1;
    border-radius: 100% 75% 75% 75%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--db-color-bg, #ffffff);
    will-change: border-radius;
    transition: border-radius 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.db-artist-preview-overlay.is-active .db-preview-frame {
    border-radius: var(--db-radius-sm, 0.5rem);
}

.db-artist-preview-overlay .db-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100% 75% 75% 75%;
    filter: saturate(1) !important;
    will-change: border-radius, transform;
    transform: scale(1.04);
    transition: border-radius 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.db-artist-preview-overlay.is-active .db-preview-img {
    border-radius: var(--db-radius-sm, 0.5rem);
    transform: scale(1);
}

/* Fondu du carrousel d'artistes en arrière-plan pendant la prévisualisation d'œuvre */
.post-type-archive-artists .brxe-slider-nested.has-preview-active .splide__track {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/**
 * =============================================================================
 * 3. PRESS ARCHIVE
 * =============================================================================
 */

.post-type-archive-press .brxe-slider-nested .splide__slide:not(.is-visible) {
    opacity: 0;
}

.post-type-archive-press .brxe-slider-nested .splide__list {
    align-items: stretch;
}

.post-type-archive-press .brxe-slider-nested .splide__slide {
    height: auto;
}

.post-type-archive-press .card-press-featured {
    height: 100%;
}

.post-type-archive-press .brxe-slider-nested .splide__arrow {
    top: 7rem;
}

.post-type-archive-press .brxe-slider-nested .splide__arrow--prev {
    left: 2rem;
}

.post-type-archive-press .brxe-slider-nested .splide__arrow--next {
    right: 2rem;
}

.post-type-archive-press .brxe-slider-nested .splide__arrow:before {
    border-color: color-mix(in srgb, var(--db-color-black), transparent 90%);
}

.post-type-archive-press .brxe-slider-nested .splide__arrow:active:before {
    border-color: var(--db-color-primary);
}

.post-type-archive-press .brxe-slider-nested .splide__arrow svg {
    fill: var(--db-color-black);
}

/* === patterns/pages.css === */
/**
 * PATTERN: PAGES
 * Styles for static pages (Home, About, Contact, etc.)
 */

/**
 * =============================================================================
 * 1. Home
 * =============================================================================
 */

/* Smooth anchor scroll (respecte prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    html:has(body.home) {
        scroll-behavior: smooth;
    }
}

.home header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: linear-gradient(0deg, #00000000 0, #00000050 100%) !important;
}

.home header,
.home header>section {
    background-color: transparent !important;
}

.home header .logo-db #brxe-lnszcz :not([fill="none"]),
.home header .logo-db #brxe-qvyoou :not([fill="none"]) {
    fill: var(--db-color-white) !important;
}

.home header .brxe-nav-menu .menu-item a {
    color: var(--db-color-white);
}

.home header:not(.is-sticky) .sliding-line-inner {
    background-color: var(--db-color-white) !important;
}

.home header:not(.is-sticky) .brxe-nav-menu:hover .sliding-line-wrapper {
    background-color: color-mix(in srgb, var(--db-color-white) 20%, transparent) !important;
}

.home header:not(.is-sticky) .brxe-nav-menu:hover .sliding-line-inner {
    background-color: var(--db-color-white) !important;
}

.home header #menu-langues-1 a {
    color: var(--db-color-white) !important;
}

.home header .brxe-button.bricks-color-primary.outline {
    color: var(--db-color-white) !important;
    border-color: var(--db-color-white) !important;
}

.home header.is-sticky {
    background: var(--db-color-bg) !important;
}

.home header.is-sticky .logo-db #brxe-lnszcz :not([fill="none"]) {
    fill: var(--db-color-primary) !important;
}

.home header.is-sticky .brxe-nav-menu .menu-item a {
    color: var(--db-color-text);
}

.home header.is-sticky #menu-langues-1 a {
    color: var(--db-color-primary) !important;
}

.home header.is-sticky .brxe-button.bricks-color-primary.outline {
    color: var(--db-color-primary) !important;
    border-color: var(--db-color-primary) !important;
}

.home #brxe-yofxys {
    position: relative;
}

.home .carousel-immersive {
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

.home .carousel-immersive .swiper-pagination {
    display: none;
}

.home .card-event-featured.type-hero {
    filter: none !important;
    border-radius: var(--db-radius-sm);
    background: color-mix(in srgb, var(--db-color-black) 25%, transparent) !important;
    -webkit-backdrop-filter: blur(var(--db-effect-blur-sm));
    backdrop-filter: blur(var(--db-effect-blur-xs));
    width: fit-content !important;
    max-width: 450px;
    position: absolute !important;
    bottom: var(--db-spacing-2xl);
    left: var(--db-spacing-2xl);
}

.home .card-event-featured.type-hero .card-content {
    padding: var(--db-spacing-lg) var(--db-spacing-xl);
}

.home .card-event-featured.type-hero .card-status-label,
.home .card-event-featured.type-hero .card-location,
.home .card-event-featured.type-hero .card-date,
.home .card-event-featured.type-hero .card-title {
    color: var(--db-color-white) !important;
}

.home .card-event-featured.type-hero .bricks-background-secondary {
    color: var(--db-color-white) !important;
}

.home .card-event-featured.type-hero .bricks-background-secondary:after {
    background-color: var(--db-color-white) !important;
}

.home .card-event-featured.type-outline {
    filter: none !important;
    width: fit-content !important;
    margin: var(--db-spacing-2xl) auto;
    text-align: center;
}

.home .card-event-featured.type-outline .card-content {
    align-items: center;
    border: 2px solid var(--db-color-primary) !important;
    border-radius: var(--db-radius-sm);
    padding: var(--db-spacing-xl) var(--db-spacing-2xl);
}

.home .card-event-featured.type-outline .card-status-label {
    font-size: var(--db-font-body-md);
}

.home .card-event-featured.type-outline .card-title {
    font-size: var(--db-font-body-2xl);
}

.home .card-event-featured.type-outline .card-date,
.home .card-event-featured.type-outline .card-location {
    font-size: calc((var(--db-font-body-xl) + var(--db-font-body-l)) / 2);
}

.home .card-event-featured .card-date {
    margin-bottom: var(--db-spacing-md);
}

.home .card-event-featured .brxe-button.bricks-color-primary.outline {
    color: var(--db-color-white) !important;
    border-color: var(--db-color-white) !important;
    margin-top: var(--db-spacing-md) !important;
    width: fit-content !important;
    align-self: flex-start !important;
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

@media (max-width: 768px) {
    .home .card-event-featured.type-hero {
        bottom: calc(var(--db-spacing-lg) + var(--db-spacing-2xl)) !important;
        left: var(--db-spacing-xl);
        right: var(--db-spacing-xl);
        max-width: none !important;
        width: auto !important;
    }

    .home .card-event-featured.type-outline {
        margin: var(--db-spacing-xl) auto !important;
        display: none;
    }

    .home .card-event-featured.type-outline .card-content {
        padding: var(--db-spacing-lg) var(--db-spacing-xl);
    }

    .home .card-event-featured.type-outline .card-status-label {
        font-size: var(--db-font-body-sm);
    }

    .home .card-event-featured.type-outline .card-title {
        font-size: var(--db-font-body-xl);
    }

    .home .card-event-featured.type-outline .card-date,
    .home .card-event-featured.type-outline .card-location {
        font-size: var(--db-font-body-lg);
    }

    .home main footer #brxe-ordkfu {
        display: none;
    }
}

.home main footer {
    position: absolute;
    bottom: 0;
    background: linear-gradient(0deg, #00000040 0, #00000000 100%) !important;
    pointer-events: none;
}

.home footer a,
.home footer button,
.home footer .bricks-button,
.home footer [data-interactions],
.home footer [onclick],
.home footer [role="button"],
.home footer .brx-popup {
    pointer-events: auto;
}

.home footer#brxe-dnnylj p,
.home footer#brxe-dnnylj a,
.home footer#brxe-dnnylj span {
    color: var(--db-color-white) !important;
}

/* Masquer le footer global sur l'accueil s'il n'y a pas d'événement à la une */
body.home:not(:has(#home-event-details)) #brx-footer {
    display: none !important;
}

/**
 * =============================================================================
 * 2. Presentation
 * =============================================================================
 */

.page-id-2937 h1 {
    color: var(--db-color-primary);
    font-size: var(--db-font-title-xl);
    font-weight: 500;
}

h1 span.line-break,
h2 span.line-break,
h3 span.line-break {
    display: block;
    padding-left: var(--db-spacing-xl);
}

.page-id-2937 #brxe-bsncvi .brxe-text-link {
    color: var(--db-color-white);
}

/* Carousel Immersif : Légende / Nom de l'exposition */
.page-id-2937 .carousel-immersive .swiper-slide {
    position: relative;
}

.page-id-2937 .carousel-immersive .swiper-slide .carousel-caption {
    position: absolute;
    bottom: var(--db-spacing-xl, 2rem);
    left: 50%;
    transform: translateX(-50%);
    backdrop-filter: blur(0.25rem);
    -webkit-backdrop-filter: blur(0.25rem);
    background-color: color-mix(in srgb, var(--db-color-black), transparent 75%);
    padding: var(--db-spacing-sm) var(--db-spacing-lg);
    color: var(--db-color-white);
    font-size: var(--db-font-body-xl);
    letter-spacing: 0.05em;
    border-radius: var(--db-radius-xs, 0.25rem);
    white-space: nowrap;
    max-width: calc(100% - 2 * var(--db-spacing-lg));
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity var(--db-anim-speed-normal, 0.4s) ease;
}

.page-id-2937 .carousel-immersive .swiper-slide.swiper-slide-active .carousel-caption {
    opacity: 1;
}