:root {
    /* Primary (Bleu) */
    --primary-2x-dark: oklch(28.35% 0.0532 223.83); /* #002F3D */
    --primary-x-dark: oklch(42.25% 0.0815 226.91); /* #005670 */
    --primary-dark: oklch(58.89% 0.1156 228.64); /* #0089B3 */
    --primary-main: oklch(68.11% 0.1342 228.97); /* #00A7DA */
    --primary-light: oklch(86.09% 0.1006 220.16); /* #80E1FF */
    --primary-x-light: oklch(94.03% 0.0435 218.47); /* #CCF3FF */
    --primary-2x-light: oklch(0.9755 0.0005 219.65); /* #EBFAFF */

    /* Focus (Jaune → Orange foncé) */
    --focus-2x-dark: oklch(59.77% 0.1504 53.64); /* #C26100 */
    --focus-x-dark: oklch(69.05% 0.1544 65.33); /* #DB8400 */
    --focus-dark: oklch(78.82% 0.1632 80.01); /* #F0AC00 */
    --focus-main: oklch(88.48% 0.1816 94.91); /* #FFD600 */
    --focus-light: oklch(94.42% 0.1066 98.31); /* #FFEE99 */
    --focus-x-light: oklch(97.59% 0.0447 97.59); /* #FFF8D6 */
    --focus-2x-light: oklch(0.9901 0.0038 95.34); /* #FFFCF0 */

    /* Neutral (Gris) */
    --neutral-black: oklch(0.00% 0.0000 0.00); /* #000000 */
    --neutral-2x-dark: oklch(21.78% 0.0000 259.98); /* #1A1A1A */
    --neutral-x-dark: oklch(36.00% 0.0000 259.98); /* #3D3D3D */
    --neutral-dark: oklch(54.52% 0.0001 259.98); /* #707070 */
    --neutral-main: oklch(82.50% 0.0022 14.80); /* #C7C5C5 */
    --neutral-light: oklch(96.42% 0.0001 259.98); /* #F3F3F3 */
    --neutral-x-light: oklch(98.51% 0.0001 259.98); /* #FAFAFA */

    /* Secondary (alias → neutral, rétrocompatibilité) */
    --secondary-main: var(--neutral-dark);
    --secondary-dark: var(--neutral-2x-dark);
    --secondary-x-dark: var(--neutral-black);
    --secondary-light: var(--neutral-main);
    --secondary-x-light: var(--neutral-light);

    /* Background */
    --bg-body: var(--focus-2x-light);

    /* Font Family */
    --ff-body: 'Manrope', sans-serif, Verdana, Arial, Helvetica;
    --ff-headline: 'Manrope', sans-serif, Verdana, Arial, Helvetica;

    /* Font Weight */
    --fw-normal: 400;
    --fw-bold: 700;
    --fw-bolder: 800;

    /* Spacing fluide (complète Bootstrap 1-5) */
    --space-6: clamp(4rem, 5vw, 5rem);
    --space-7: clamp(5rem, 7vw, 7rem);
    --space-8: clamp(6rem, 10vw, 10rem);

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

    /* --- Filters svg --- */
    --fill-svg-primary-2x-dark: invert(13%) sepia(80%) saturate(627%) hue-rotate(149deg) brightness(100%) contrast(104%);
    --fill-svg-primary-x-dark: invert(26%) sepia(39%) saturate(1507%) hue-rotate(154deg) brightness(95%) contrast(104%);
    --fill-svg-primary-dark: invert(41%) sepia(51%) saturate(6201%) hue-rotate(171deg) brightness(92%) contrast(101%);
    --fill-svg-primary-main: invert(44%) sepia(43%) saturate(3788%) hue-rotate(165deg) brightness(101%) contrast(103%);
    --fill-svg-primary-light: invert(77%) sepia(13%) saturate(1678%) hue-rotate(167deg) brightness(104%) contrast(102%);
    --fill-svg-primary-x-light: invert(90%) sepia(79%) saturate(1340%) hue-rotate(173deg) brightness(106%) contrast(102%);

    --fill-svg-secondary-main: invert(36%) sepia(9%) saturate(50%) hue-rotate(0deg) brightness(105%) contrast(52%);
    --fill-svg-secondary-dark: invert(0%) sepia(16%) saturate(1564%) hue-rotate(27deg) brightness(93%) contrast(80%);
    --fill-svg-secondary-x-dark: invert(0%) sepia(100%) saturate(0%) hue-rotate(360deg) brightness(92%) contrast(102%);
    --fill-svg-secondary-light: invert(93%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(88%) contrast(85%);
    --fill-svg-secondary-x-light: invert(100%) sepia(0%) saturate(6894%) hue-rotate(358deg) brightness(118%) contrast(91%);

    --fill-svg-focus-2x-dark: invert(74%) sepia(69%) saturate(7421%) hue-rotate(16deg) brightness(88%) contrast(105%);
    --fill-svg-focus-x-dark: invert(48%) sepia(88%) saturate(2043%) hue-rotate(15deg) brightness(100%) contrast(102%);
    --fill-svg-focus-dark: invert(75%) sepia(50%) saturate(2742%) hue-rotate(1deg) brightness(94%) contrast(104%);
    --fill-svg-focus-main: invert(74%) sepia(48%) saturate(1444%) hue-rotate(2deg) brightness(109%) contrast(104%);
    --fill-svg-focus-light: invert(84%) sepia(90%) saturate(390%) hue-rotate(311deg) brightness(113%) contrast(102%);
    --fill-svg-focus-x-light: invert(97%) sepia(53%) saturate(3200%) hue-rotate(295deg) brightness(136%) contrast(104%);

    --fill-svg-neutral-main: invert(93%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(88%) contrast(85%);
    --fill-svg-neutral-dark: invert(36%) sepia(9%) saturate(50%) hue-rotate(0deg) brightness(105%) contrast(52%);
    --fill-svg-neutral-x-dark: invert(16%) sepia(7%) saturate(7%) hue-rotate(0deg) brightness(100%) contrast(78%);
    --fill-svg-neutral-2x-dark: invert(0%) sepia(16%) saturate(1564%) hue-rotate(27deg) brightness(93%) contrast(80%);
    --fill-svg-neutral-black: invert(0%) sepia(100%) saturate(0%) hue-rotate(360deg) brightness(92%) contrast(102%);
    --fill-svg-neutral-light: invert(100%) sepia(0%) saturate(6894%) hue-rotate(358deg) brightness(118%) contrast(91%);
    --fill-svg-neutral-x-light: invert(93%) sepia(100%) saturate(53%) hue-rotate(202deg) brightness(111%) contrast(96%);
    --fill-svg-white: invert(100%) sepia(0%) saturate(401%) hue-rotate(235deg) brightness(121%) contrast(100%);

    --fill-svg-etoile: invert(74%) sepia(48%) saturate(1444%) hue-rotate(2deg) brightness(109%) contrast(104%);
    --fill-svg-red: invert(15%) sepia(95%) saturate(6000%) hue-rotate(355deg) brightness(90%) contrast(95%);

    /* Modal overlay */
    --modal-overlay-bg: rgba(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: 0, 86, 112;
    --bs-link-hover-color-rgb: 0, 47, 61;
}

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

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