:root {
    /* ================================================================
       ERA IMMOBILIER CAP LANDES - Design System
       Palette reprise de l'ancien site (template/css/template.css) :
       rouge ERA (primary), bleu ERA (secondary, focus), neutres
       Format : OKLch - fallback hex en commentaire
       ================================================================ */

    /* --- Primary : rouge ERA --- */
    --primary-2x-light: oklch(95.93% 0.021 3);     /* #FFECF0 */
    --primary-x-light:  oklch(93.46% 0.032 1);     /* #FDE1E8 */
    --primary-light:    oklch(72.50% 0.153 9);     /* #F57991 */
    --primary-main:     oklch(53.04% 0.207 22);    /* #C8102E */
    --primary-dark:     oklch(48.75% 0.192 23);    /* #B30B27 */
    --primary-x-dark:   oklch(34.84% 0.139 10);    /* #700029 */
    --primary-2x-dark:  oklch(26.22% 0.105 8);     /* #4A001B */

    /* --- Secondary : bleu ERA (bandeaux, bouton « Nous rejoindre ») --- */
    --secondary-2x-light: oklch(96.87% 0.005 248); /* #F2F5F8 */
    --secondary-x-light:  oklch(92.74% 0.011 244); /* #E1E8EE */
    --secondary-light:    oklch(57.56% 0.084 294); /* #7C6FA6 */
    --secondary-main:     oklch(26.71% 0.134 285); /* #250E62 */
    --secondary-dark:     oklch(22.38% 0.108 286); /* #1B0A4A */
    --secondary-x-dark:   oklch(18.85% 0.093 284); /* #12063A */
    --secondary-2x-dark:  oklch(14.71% 0.069 288); /* #0B0325 */

    /* --- Focus : même bleu que secondary (la charte ERA n'a que deux couleurs) --- */
    --focus-2x-light: var(--secondary-2x-light);
    --focus-x-light:  var(--secondary-x-light);
    --focus-light:    var(--secondary-light);
    --focus-main:     var(--secondary-main);
    --focus-dark:     var(--secondary-dark);
    --focus-x-dark:   var(--secondary-x-dark);
    --focus-2x-dark:  var(--secondary-2x-dark);

    /* --- Neutral --- */
    --neutral-2x-dark: oklch(23.50% 0.000 0);     /* #1E1E1E */
    --neutral-x-dark:  oklch(34.85% 0.000 0);     /* #3A3A3A */
    --neutral-dark:    oklch(54.52% 0.000 0);     /* #707070 */
    --neutral-mid:     oklch(63.34% 0.000 0);     /* #8A8A8A */
    --neutral-main:    oklch(76.36% 0.000 0);     /* #B2B2B2 */
    --neutral-md:      oklch(92.19% 0.000 0);     /* #E5E5E5 */
    --neutral-light:   oklch(96.42% 0.000 0);     /* #F3F3F3 */
    --neutral-x-light: oklch(98.51% 0.000 0);     /* #FAFAFA */
    --neutral-black:   #000;

    /* --- Font Family --- */
    --ff-body:     'Metropolis', system-ui, sans-serif;
    --ff-headline: 'Metropolis', system-ui, sans-serif;

    /* --- Font Weight (Metropolis : Regular 400 et Bold 700 seulement) --- */
    --fw-normal: 400;
    --fw-bold:   700;
    --fw-bolder: 700;

    /* --- Background --- */
    --bg-body: #FFF;

    /* --- Spacing fluide (complète Bootstrap 1-5) --- */
    --space-1: 0.25rem;                    /* 4px   - équivalent Bootstrap *-1 */
    --space-2: 0.5rem;                     /* 8px   - équivalent Bootstrap *-2 */
    --space-3: 1rem;                       /* 16px  - équivalent Bootstrap *-3 */
    --space-4: clamp(1.5rem, 2vw, 2rem);   /* 24px → 32px - base Bootstrap *-4 */
    --space-5: clamp(2rem, 3vw, 3rem);     /* 32px → 48px - équivalent Bootstrap *-5 */
    --space-6: clamp(4rem, 5vw, 5rem);     /* 64px → 80px */
    --space-7: clamp(5rem, 7vw, 7rem);     /* 80px → 112px */
    --space-8: clamp(6rem, 10vw, 10rem);   /* 96px → 160px */

    /* --- Radius --- */
    --radius-xs: .15rem;
    --radius-sm: .3rem;
    --radius-md: .5rem;
    --radius-lg: 3rem;
    --radius-xl: 50%;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.20);

    /* --- Filters svg (valeurs de l'ancien site, teintes dérivées calculées) --- */
    --fill-svg-primary-main:invert(28%) sepia(50%) saturate(6155%) hue-rotate(336deg) brightness(75%) contrast(113%);
    --fill-svg-primary-dark:invert(24%) sepia(58%) saturate(5725%) hue-rotate(339deg) brightness(68%) contrast(109%);
    --fill-svg-primary-x-dark:invert(8%) sepia(77%) saturate(4946%) hue-rotate(328deg) brightness(87%) contrast(106%);
    --fill-svg-primary-light:invert(63%) sepia(27%) saturate(4104%) hue-rotate(310deg) brightness(112%) contrast(92%);
    --fill-svg-primary-x-light:invert(94%) sepia(4%) saturate(3395%) hue-rotate(250deg) brightness(103%) contrast(108%);

    --fill-svg-secondary-main:invert(7%) sepia(86%) saturate(3004%) hue-rotate(252deg) brightness(116%) contrast(107%);
    --fill-svg-secondary-dark:invert(8%) sepia(21%) saturate(6466%) hue-rotate(241deg) brightness(119%) contrast(113%);
    --fill-svg-secondary-x-dark:invert(4%) sepia(77%) saturate(4125%) hue-rotate(254deg) brightness(99%) contrast(104%);
    --fill-svg-secondary-light:invert(48%) sepia(24%) saturate(670%) hue-rotate(213deg) brightness(90%) contrast(88%);
    --fill-svg-secondary-x-light:invert(96%) sepia(6%) saturate(470%) hue-rotate(178deg) brightness(97%) contrast(91%);

    --fill-svg-focus-main:var(--fill-svg-secondary-main);
    --fill-svg-focus-dark:var(--fill-svg-secondary-dark);
    --fill-svg-focus-x-dark:var(--fill-svg-secondary-x-dark);
    --fill-svg-focus-light:var(--fill-svg-secondary-light);
    --fill-svg-focus-x-light:var(--fill-svg-secondary-x-light);

    --fill-svg-neutral-main:invert(82%) sepia(8%) saturate(8%) hue-rotate(349deg) brightness(88%) contrast(84%);
    --fill-svg-neutral-dark:invert(44%) sepia(17%) saturate(12%) hue-rotate(58deg) brightness(95%) contrast(88%);
    --fill-svg-neutral-black:invert(0%) sepia(0%) saturate(0%) hue-rotate(2deg) brightness(97%) contrast(100%);
    --fill-svg-neutral-light:invert(99%) sepia(4%) saturate(84%) hue-rotate(248deg) brightness(112%) contrast(91%);
    --fill-svg-neutral-x-light:invert(97%) sepia(1%) saturate(117%) hue-rotate(187deg) brightness(111%) contrast(96%);
    --fill-svg-white:invert(100%) sepia(0%) saturate(401%) hue-rotate(235deg) brightness(121%) contrast(100%);

    --fill-svg-etoile:invert(85%) sepia(60%) saturate(3105%) hue-rotate(329deg) brightness(101%) contrast(100%);
    --fill-svg-red:var(--fill-svg-primary-main);

    /* --- Transitions --- */
    --transition-fast:   0.15s ease;
    --transition-base:   0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow:   0.5s ease;

    /* --- Modal overlay --- */
    --modal-overlay-bg: rgba(0, 0, 0, 0.6);

    /* --- Z INDEX --- */
    --zindex-header: 1021;
    --zindex-topBar: 1022;
    --zindex-carousel-thumb: 103;
    --zindex-invisibleLink: 102;
    --zindex-favori: 102;
    --zindex-modal-backdrop: 1022;
    --zindex-modal-content: 1051;
    --block-contact-form: 1010;
    --zindex-logo-mobile: 1020;
    --zindex-content-block-filtre: 999;
}

/* ================================================================
   OVERRIDE BOOTSTRAP
   ================================================================ */
:root {
    --bs-link-color-rgb: 200, 16, 46;         /* #C8102E primary-main */
    --bs-link-hover-color-rgb: 179, 11, 39;   /* #B30B27 primary-dark */
}

.nav {
    --bs-nav-link-hover-color: var(--primary-dark);
}

.offcanvas {
    --bs-offcanvas-width: calc(100% - 25px) !important;
}