:root {
    /* ================================================= */
    /* 1. COULEUR */
    /* ================================================= */
    /* source */
    --source-color-black: #000000;
    --source-color-666666: #666666;
    --source-color-999999: #999999;
    --source-color-gray-very-light: #e6e6e6;
    --source-color-not-white: #fafafa;
    --source-color-white: #ffffff;
    /* source accent one */
    --source-color-accent-one-darker: #E13D0E;
    --source-color-accent-one-dark: #ff6826;
    --source-color-accent-one: #ffd545;
    --source-color-accent-one-light: #ffe07a;
    --source-color-accent-one-very-light: #fff4ce;
    /* source accent two */
    --source-color-accent-two-dark: #034708;
    --source-color-accent-two: #00c64b;
    --source-color-accent-two-medium: #116329;
    --source-color-accent-two-very-light: rgba(255, 248, 221, 0.8);
    /* source accent three */
    --source-color-accent-three-dark: darkred;
    --source-color-accent-three: #ff0000;
    --source-color-error: #ff0000;
    --source-color-accent-three-less-dark: #fd2b3d;
    --source-color-accent-three-light: #ff8e8e;
    /* source accent four*/
    --source-color-accent-four-dark: #0021b5;
    --source-color-accent-four: #3a5fff;
    --source-color-accent-four-light: #3a5fff;
    --color-search-container-p: #3a5fff;
    /* unique */
    --source-color-white-transparent: rgba(255, 255, 255, 0.75);
    --source-color-white-transparent-plus: rgba(255, 255, 255, 0.45);
    --color-video-modal-title: #ff8e8e;
    --color-error-bg: #ffe1e1;
    --color-footer-bg: var(--source-color-black);
    --color-green-cta-main: #4a813f; /* Vert principal (plus foncé) */
    --color-green-cta-hover: #609353; /* Un vert clairement plus pâle au survol */
    --color-success-bg: #dbffea;
    --color-index-guide-steps-border: #e0e0e0;
    --color-ws-card-title-meta: var(--source-color-accent-one-dark);
    /* white */
    --color-card-hover: #dddddd;
    --color-search-container-bg: var(--source-color-white);
    --color-lang-link-btn: var(--source-color-white);
    --color-btn-hover: var(--source-color-white);
    --color-white-bg: var(--source-color-white);
    --color-not-white: var(--source-color-white);
    --color-lang-link: var(--source-color-white);
    --color-lang-link-border: var(--source-color-white);
    --color-article-resource-card: var(--source-color-white);
    --color-index-step-icon: var(--source-color-white);
    --color-section-contact-bg: var(--source-color-white);
    --color-fact-block-bg: var(--source-color-not-white);
    --color-search-chat-like-bg: var(--source-color-white);
    --color-search-pagination-strong: var(--source-color-white);
    --color-search-pagination-strong-border: var(--source-color-white);
    --color-pagination-page-btn-page-num-hover: var(--source-color-white);
    --color-ws-card-action-btn: var(--source-color-white);
    --video-info-h3: var(--source-color-white);
    --color-video-badge-text: var(--source-color-white);
    --color-video-info-bg: var(--source-color-white);
    --color-website-resource-card-bg: var(--source-color-white);
    --video-synopsis-gradiant: var(--source-color-white);
    --color-copy-modal-content-bg: var(--source-color-white);
    --color-carousel-caption-text: var(--source-color-white);
    --source-book-author-link: var(--source-color-white);
    --color-dropdown-menu-bg: var(--source-color-white);
    --color-title-icon-container-bg: var(--source-color-white);
    /* not white */
    --color-bg-page: #dff1ff;
    --page-title-icon-container-bg: var(--source-color-not-white);
    --color-search-input-bg: var(--source-color-not-white);
    --color-video-duration-badge: var(--source-color-not-white);
    --color-activist-social-contact-section-bg: var(--source-color-not-white);
    --color-lang-border-constante: var(--source-color-not-white);
    --color-nav-link: var(--source-color-white);
    --color-btn-num-active: var(--source-color-white);
    --colore-index-step-item-bg: #ffffff;
    --color-index-container-bg: var(--source-color-white);
    --color-search-page-btn-active: var(--source-color-white);
    --color-ws-section-title-icon-box: var(--source-color-white);
    --color-ws-card: var(--source-color-white);
    --color-ws-card-bg: var(--source-color-white);
    /* black */
    --color-ws-card-desc: var(--source-color-black);
    --color-essential-item: var(--source-color-black);
    --color-article-subtitle: var(--source-color-black);
    --colore-index-step-p: var(--source-color-black);
    --color-argument-item: var(--source-color-black);
    --color-tts-btn-icon-border: var(--source-color-black);
    --color-pagination-page-btn-active-border: var(--source-color-black);
    --color-book-expand-btn: var(--source-color-black);
    --color-btn-num-active-bg: var(--source-color-black);
    --color-video-badge-audio-langue-border: var(--source-color-black);
    --source-color-video-card-border: #054f9a;
    --color-copy-modal-success: var(--source-color-black);
    --colore-index-step-h3: var(--source-color-black);
    --color-search-pagination-a: var(--source-color-black);
    --color-video-read-more-btn: var(--source-color-black);
    --color-description: var(--source-color-black);
    --color-btn-border: var(--source-color-black);
    --color-search-result-text-excerpt: var(--source-color-black);
    --color-science-fack-block-h3: var(--source-color-black);
    --color-index-guide-steps-h2: var(--source-color-black);
    --color-scrollToTopBtn: var(--source-color-black);
    --color-video-card-bg: var(--source-color-black);
    --color-lang-link-btn-bg: var(--source-color-black);
    --color-page-description: var(--source-color-black);
    --color-video-thumbnail-container-bg: var(--source-color-black);
    --color-media-nav-links: var(--source-color-black);
    --color-media-dropdown-item: var(--source-color-black);
    --color-dropdown-item: var(--source-color-black);
    --color-contact-h1: var(--source-color-accent-two);
    --color-pagination-dots: var(--source-color-black);
    --color-fact-block-p: var(--source-color-black);
    --color-tts-btn-icon: var(--source-color-black);
    --color-gpage-btn: var(--source-color-black);
    --source-index-lead-text: var(--source-color-black);
    --color-page-btn-active: var(--source-color-black);
    --color-video-modal-content-bg: var(--source-color-black);
    --color-scrollToTopBtn-border: var(--source-color-black);
    --color-contact-label: var(--source-color-black);
    --color-video-info: var(--source-color-black);
    --color-about-contact-section-h3: var(--source-color-black);
    --color-copy-modal-overlay: var(--source-color-black);
    --color-search-input-border: var(--source-color-black);
    --color-border-main: var(--source-color-black);
    --color-video-info-h3: var(--source-color-accent-two);
    --color-activist-social-contact-section-border: var(--source-color-black);
    --color-step-item-border: var(--source-color-black);
    --color-btn: var(--source-color-black);
    --color-copy-modal-content: var(--source-color-black);
    /* 666666 */
    --color-toc-list-vertical-line: var(--source-color-666666);
    --color-article-source: var(--source-color-666666);
    --color-article-description: var(--source-color-666666);
    --color-book-subtitle: var(--source-color-666666);
    --color-img-to-right-container-border: var(--source-color-666666);
    --color-carousel-container-border: var(--source-color-666666);
    --color-tts-btn-desabled: var(--source-color-666666);
    --color-video-badge: var(--source-color-666666);
    --color-video-modal-close-button: var(--source-color-666666);
    --color-dropdown-menu-border: var(--source-color-666666);
    /* 999999 */
    --color-nav-separator: var(--source-color-999999);
    --color-contact-h1-border: var(--source-color-999999);
    --color-section-contact-border: var(--source-color-999999);
    --color-essential-item-border: var(--source-color-999999);
    --color-argument-item-border: var(--source-color-999999);
    --color-search-container-border: var(--source-color-999999);
    --color-video-modal-content-border: var(--source-color-999999);
    --color-video-duration-badge-border: var(--source-color-999999);
    /* very light gray */
    --color-argument-item-bg: var(--source-color-white);
    --color-essential-item-bg: var(--source-color-white);
    --color-veganism-top-container-border: var(--source-color-gray-very-light);
    --color-search-pagination-a-border: var(--source-color-gray-very-light);
    --color-article-resource-card-border: var(--source-color-gray-very-light);
    --color-book-resource-card-border: var(--source-color-gray-very-light);
    --color-search-chat-like-border: var(--source-color-gray-very-light);
    --color-search-pagination-a-border-hover: var(--source-color-gray-very-light);
    /* accent one */
    --color-btn-bg-hover: var(--source-color-accent-one-darker);
    --color-section-title-before: var(--source-color-accent-four);
    --color-page-nav-subtitle: var(--source-color-accent-one-darker);
    --color-website-card-title-meta: var(--source-color-accent-one-dark);
    --color-search-pagination-a-bg: var(--source-color-accent-one-dark);
    --color-search-pagination-a-hover: var(--source-color-accent-one-dark);
    --color-video-grid-canada-border: var(--source-color-accent-one-dark);
    --color-accent-one-dark: var(--source-color-accent-one-dark);
    --color-footer: var(--source-color-accent-one);
    --color-triangle: var(--source-color-accent-one);
    --color-scrollToTopBtn-bg: var(--source-color-accent-one);
    --color-media-toggler-icon: var(--source-color-accent-one);
    --color-scrollToTopBtn-bg-hover: var(--source-color-accent-one-light);
    --color-video-card-hover: var(--source-color-accent-one-light);
    --color-btn-bg: var(--source-color-accent-one-light);
    --color-search-pagination-a-hover-bg: var(--source-color-accent-one-light);
    --color-search-highlight: var(--source-color-accent-one-light);
    --color-drop-down-item-bg-hover: var(--source-color-accent-one-very-light);
    /* accent two */
    --color-accent-two-dark: var(--source-color-accent-two-dark);
    --color-sucess: var(--source-color-accent-two-dark);
    --color-success-border: var(--source-color-accent-two-dark);
    --color-website-card-title: var(--source-color-accent-two);
    --color-success: var(--source-color-accent-two-dark);
    --color-video-badge-audio-langue-bg: var(--source-color-accent-two);
    --color-copy-modal-success-icon: var(--source-color-accent-two);
    --color-index-step-icon-bg: var(--source-color-accent-two);
    --color-about-page-title: var(--source-color-accent-two);
    --color-search-input-focus-border: var(--source-color-accent-two);
    --color-search-pagination-strong-g: var(--source-color-accent-two);
    --color-index-item: var(--source-color-accent-two);
    --color-index-item-h2: var(--source-color-accent-two);
    --color-toc-container-h2: var(--source-color-accent-two);
    --color-search-result-border: var(--source-color-accent-two);
    --color-search-page-btn-active-bg: var(--source-color-accent-two);
    /* accent three */
    --color-video-badge-age-restriction-bg: var(--source-color-accent-three-dark);
    --color-video-card-hover-box-shadow: var(--source-color-accent-three-dark);
    --color-article-read-link: var(--source-color-accent-three-dark);
    --color-book-language-link: var(--source-color-accent-three-dark);
    --color-index-source: var(--source-color-accent-three-dark);
    --color-error: var(--source-color-accent-three-dark);
    --color-link-to-be-view: var(--source-color-accent-three-dark);
    --color-tts-btn-label: var(--source-color-accent-three-dark);
    --color-veganism-toc-list: var(--source-color-accent-three-dark);
    --color-search-result-url: var(--source-color-accent-three-dark);
    --color-science-see-file: var(--source-color-accent-three-dark);
    --color-book-language-block-border: var(--source-color-accent-three-dark);
    --color-book-language: var(--source-color-accent-three-dark);
    --color-language-fr: var(--source-color-accent-three-less-dark);
    --color-error-border: var(--source-color-accent-three-less-dark);
    /* accent four */
    --color-science-h2: var(--source-color-accent-four-dark);
    --color-science-fact-block-border: var(--source-color-accent-four-dark);
    --source-color-book-author-link-bg: var(--source-color-accent-four-dark);
    --color-drop-down-item-bg-border-hover: var(--source-color-accent-four);
    --color-language-btn-en: var(--source-color-accent-four);
    --color-section-title: var(--source-color-accent-four);
    --color-ws-ressource-section-h2: var(--source-color-accent-four);
    --color-ws-ressource-section-h2-border: var(--source-color-accent-four);
    --color-section-icon-box: var(--source-color-accent-four);
    --color-acrd-action-btn: var(--source-color-accent-four);
    --color-btn-fb: var(--source-color-accent-four);
    --color-about-write-to-me-text: var(--source-color-accent-four);
    --color-tts-btn-play-pause-reading: var(--source-color-accent-four);
    --color-science-subpart-title: var(--source-color-accent-four);
    --source-color-book-author-link-bg-hover: var(--source-color-accent-four);
    --color-search-result-h3: var(--source-color-accent-four);
    --color-ws-section-title-icon-box-border: var(--source-color-accent-four);
    --color-video-badge-subtitles-bg: var(--source-color-accent-four-dark);
    /* transparency */
    --color-black-transparent: rgba(0, 0, 0, 0.55);
    --source-about-me-container-box-shadow: rgba(0, 0, 0, 0.05);
    --color-prev-next-bg-hover: rgba(74, 74, 74, 0.8);
    --color-video-play-icon-overlay: rgba(0, 255, 92, 0.42);
    --color-contact-textarea-focus-box-shadow: rgba(0, 255, 90, 0.4);
    --color-video-play-icon: rgba(255, 0, 0, 0.52);
    --color-logo-drop-shadow: rgba(255, 255, 0, 0.7);
    /* ================================================= */
    /* TAILLES DE POLICE (FONT SIZE SCALE) */
    /* ================================================= */
    --font-size-xl: calc(32 / 16 * 1rem);
    --font-size-lg: calc(27.2 / 16 * 1rem);
    --font-size-md-plus: calc(21.6 / 16 * 1rem);
    --font-size-md: calc(20 / 16 * 1rem);
    --font-size-base-plus: calc(17.6 / 16 * 1rem);
    --font-size-base: calc(16 / 16 * 1rem);
    --font-size-sm: calc(13.6 / 16 * 1rem);
    --font-size-xs: calc(12 / 16 * 1rem);
    --font-size-h3: calc(22.4 / 16 * 1rem);
    --font-size-h2: calc(24 / 16 * 1rem);
    --font-size-h1: calc(25.6 / 16 * 1rem);
    --font-size-600-h1: calc(27.2 / 16 * 1rem);
    /* Tailles spécifiques */
    --font-size-video-synopsis-p: calc(16.8 / 16 * 1rem);
    --font-size-video-info-h3: calc(19.2 / 16 * 1rem);
    --font-size-description-lead: calc(20.8 / 16 * 1rem);
    --font-size-600-description-lead: calc(19.2 / 16 * 1rem);
    --font-size-website-name: calc(30.4 / 16 * 1rem);
    --font-size-video-modal-close-button: calc(25.6 / 16 * 1rem);
    --font-size-carousel-prev-next-symbol: calc(32 / 16 * 1rem);
    --font-size-search-result-snippet: calc(17.6 / 16 * 1rem);
    --font-size-nav-mobile: calc(19.2 / 16 * 1rem);
    --font-size-nav-mobile-label: calc(16.8 / 16 * 1rem);
    --font-size-media-lang-link: calc(16 / 16 * 1rem);

    --font-size-article-title: var(--font-size-lg);
    --font-size-nav-links: var(--font-size-md-plus);
    --font-size-article-description: var(--font-size-base);
    --font-size-search-input: var(--font-size-md);
    --font-size-search-submit: var(--font-size-base);
    --font-size-book-subtitle: var(--font-size-md);
    --font-size-contact-label: calc(16 / 16 * 1rem);
    --font-size-book-author: var(--font-size-base-plus);
    --font-size-carousel-number-text: var(--font-size-base);
    --font-size-book-language: calc(17.6 / 16 * 1rem);
    --font-size-textarea: var(--font-size-md);
    --font-size-book-summary: var(--font-size-md-plus);
    --font-size-600-book-summary: var(--font-size-md);
    --font-size-science-see-file: var(--font-size-md);
    --font-size-science-subpart-title: var(--font-size-md-plus);
    --font-size-book-expand-btn: var(--font-size-base-plus);
    --font-size-search-pagination-prev-next-btn: var(--font-size-base);
    --font-size-search-pagination-result-snippet: var(--font-size-base);
    --font-size-search-pagination: var(--font-size-base);
    --font-size-essential-nav-item-subtext-bottom: var(--font-size-base);
    --font-size-media-contact-label: var(--font-size-base);
    --font-size-essential-nav-item-text: var(--font-size-base);
    --font-size-media-cta-vegetal: var(--font-size-sm);
    --font-size-book-expand-btn-after: var(--font-size-sm);
    --font-size-website-page-url-display: var(--font-size-sm);
    --font-size-paginatiion-dots: var(--font-size-sm);
    --font-size-contact-error-message: var(--font-size-md);
    --font-size-search-result-result-h3-a-hover: calc(20.32 / 16 * 1rem);
    --font-size-search-pagination-a-hover: calc(20.32 / 16 * 1rem);
    --font-size-video-btn-read-more: var(--font-size-base);
    --font-size-video-btn-read-more-triangle: var(--font-size-base);
    --font-size-argument-item-text: var(--font-size-base-plus);
    --font-size-website-page-description: var(--font-size-sm);
    --font-size-carousel-caption-text: var(--font-size-md);
    --font-size-lang-link: calc(16 / 16 * 1rem);
    --font-size-article-source: var(--font-size-md);
    --font-size-dropdown-menu-item: var(--font-size-md-plus);
    --font-size-dropdown-menu-item-desktop: var(--font-size-md);
    --font-size-veganism-index-source: var(--font-size-md);
    --font-size-fact-block-p: var(--font-size-md-plus);
    --font-size-sience-text: var(--font-size-md-plus);
    --font-size-veganism-toc-list: calc(18 / 16 * 1rem);
    --font-size-veganism-toc-container-h2: var(--font-size-md);
    --font-size-search-result: var(--font-size-md);
    --font-size-video-badge: var(--font-size-sm);
    --font-size-search-result-url: var(--font-size-md);
    --font-size-website-page-title: var(--font-size-md);
    --font-size-p: var(--font-size-md);
    --font-size-science-fact-block-h3: var(--font-size-md);
    --font-size-a-hover: var(--font-size-xl);
    --font-size-contact-btn-submit: var(--font-size-md);
    --font-size-carousel-warning-text: var(--font-size-md);
    --font-size-book-title: calc(18 / 16 * 1rem);
    --font-size-btn-read-article-text: var(--font-size-base);
    --font-size-essential-nav-item-subtext-top: var(--font-size-xs);
    /* ================================================= */
    /* 4. POIDS DES POLICES (FONT WEIGHT SCALE) */
    /* ================================================= */
    --fw-light: 300;
    --fw-normal: 400;
    --fw-bold: 700;
    /* ================================================= */
    /* 5. ÉPAISSEUR DES POLICES (Utilisé pour les <H>) */
    /* ================================================= */
    /* Vous utilisez déjà 700 dans le @font-face, nous allons l'appliquer */
    --fw-heading: var(--fw-bold);
    /* HAUTEURS DE LIGNE (LINE HEIGHT) */
    --line-height-body: 1.3;
    --line-height-heading: 1.2;
    /* --- Variables de Dimensionnement pour Pagination --- */
    --font-size-pagination-btn: calc(14.4 / 16 * 1rem);
    --font-size-pagination-num: calc(12.8 / 16 * 1rem);
    --pagination-btn-height: calc(36 / 16 * 1rem); /* 36px */
    --pagination-btn-padding-horizontal: calc(16 / 16 * 1rem);
    --pagination-btn-line-height: 1.2;
    /* ================================================= */
    /* ESPACEMENTS (Spacing Scale) */
    /* ================================================= */
    --space-xxs: calc(2 / 16 * 1rem); /* 2px */
    --space-xs: calc(4 / 16 * 1rem); /* 4px */
    --space-sm: calc(8 / 16 * 1rem); /* 8px */
    --space-md: calc(16 / 16 * 1rem); /* 16px */
    --space-lg: calc(24 / 16 * 1rem); /* 24px */
    --space-xl: calc(32 / 16 * 1rem); /* 32px */
    --space-xl-plus: calc(40 / 16 * 1rem); /* 40px */
    --space-xxl: calc(48 / 16 * 1rem); /* 48px */
    /* ================================================= */
    /* RAYONS D'ARRONDI (Radius Scale) */
    /* ================================================= */
    --radius-sm: calc(4 / 16 * 1rem);
    --radius-md: calc(8 / 16 * 1rem);
    --radius-lg: calc(12 / 16 * 1rem);
    --radius-pill: calc(50 / 16 * 1rem);
    /* ================================================= */
    /* 1. COULEUR DE BASE POUR LES OMBRES */
    /* ================================================= */
    /* Définit une couleur noire avec une faible opacité pour les ombres */
    --shadow-base-color: rgba(0, 0, 0, 0.4);
    /* Une couleur plus douce (utilisée pour les fonds clairs) peut être utile */
    --shadow-soft-color: rgba(0, 0, 0, 0.2);
    /* ================================================= */
    /* 2. ÉCHELLE D'ÉLÉVATION Z-INDEX (Z0 à Z4) */
    /* ================================================= */
    /* Z-0 : Élément plat, aucune ombre (utilisé pour réinitialiser) */
    --shadow-z0: none;
    /* Z-1 : Léger relief */
    --shadow-z1: 0 calc(1 / 16 * 1rem) calc(3 / 16 * 1rem) var(--shadow-soft-color); /* 0 1px 3px */
    /* Z-2 : Élévation standard */
    --shadow-z2: 0 calc(3 / 16 * 1rem) calc(6 / 16 * 1rem) var(--shadow-base-color); /* 0 3px 6px */
    /* Z-3 : Élévation moyenne */
    --shadow-z3: 0 calc(6 / 16 * 1rem) calc(12 / 16 * 1rem) var(--shadow-base-color); /* 0 6px 12px */
    /* Z-4 : Élévation maximale */
    --shadow-z4: 0 calc(10 / 16 * 1rem) calc(20 / 16 * 1rem) var(--shadow-base-color); /* 0 10px 20px */
    /* ================================================= */
    /* 3. OMBRE DE SURVOL (HOVER) - OPTIONNEL */
    /* ================================================= */
    /* Pour un effet de "halo" survolé, souvent une lueur colorée */
    --shadow-hover-glow: 0 0 calc(10 / 16 * 1rem) var(--source-color-accent-one-light);
    /* Combinaison de Z2 et de la lueur pour les cartes (comme dans votre code) */
    --shadow-z2-glow: var(--shadow-z2), var(--shadow-hover-glow);
    /* ================================================= */
    /* SUPERPOSITION (Z-INDEX) */
    /* ================================================= */
    --z-index-default: 1;
    --z-index-nav: 100;
    --z-index-modal: 1000;
    --z-index-overlay: 999; /* La couche derrière la modale */
    /* ================================================= */
    /* TAILLES DES ÉLÉMENTS (DIMENSIONNEMENT) */
    /* ================================================= */
    --size-xs: calc(8 / 16 * 1rem); /* 8px - Pour de très petites icônes/avatars */
    --size-sm: calc(16 / 16 * 1rem); /* 16px - Pour des icônes standard */
    --size-md: calc(32 / 16 * 1rem); /* 32px - Pour des avatars ou images moyennes */
    --size-lg: calc(48 / 16 * 1rem); /* 48px - Pour des éléments plus grands */
    --size-xl: calc(80 / 16 * 1rem); /* 80px - Pour des logos ou de grandes icônes */
    /* ================================================= */
    /* LARGEUR MAXIMALE DES CONTENEURS */
    /* ================================================= */
    --max-width-contenu: calc(1200 / 16 * 1rem); /* Largeur max pour le contenu du corps de page */
    --max-width-header: calc(1440 / 16 * 1rem); /* Largeur max pour l'en-tête, souvent un peu plus large */
    /* ================================================= */
    /* === SCALE (agrandissements/réductions) === */
    /* ================================================= */
    --transform-scale-xs: 0.95; /* très léger retrait (ex: click) */
    --transform-scale-sm: 0.98; /* subtil (hover doux) */
    --transform-scale-sm-plus: 1.02;
    --transform-scale-md: 1.05; /* standard (hover bouton/carte) */
    --transform-scale-lg: 1.1; /* fort (image, bloc accentué) */
    --transform-scale-xl: 1.2; /* très fort (animation promo) */
    /* ================================================= */
    /* === ROTATE (rotations légères) === */
    /* ================================================= */
    --rotate-xs: 1deg;
    --rotate-sm: 3deg;
    --rotate-md: 5deg;
    --rotate-lg: 8deg;
    /* ================================================= */
    /* === TRANSLATE (déplacements légers) === */
    /* ================================================= */
    --translate-xs: calc(2 / 16 * 1rem); /* 2px */
    --translate-sm: calc(4 / 16 * 1rem); /* 4px */
    --translate-md: calc(8 / 16 * 1rem); /* 8px */
    --translate-lg: calc(12 / 16 * 1rem); /* 12px */
    /* === OPACITY (transparence) === */
    /* ================================================= */
    --opacity-hidden: 0;
    --opacity-low: 0.5;
    --opacity-medium: 0.75;
    --opacity-visible: 1;
    /* ================================================= */
    /* === DURATION (durées d'animation) === */
    /* ================================================= */
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.6s;
    --duration-extra-slow: 1s;
    /* ================================================= */
    /* === EASING (rythme des transitions) === */
    /* ================================================= */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    /* ================================================= */
    /* === TRANSITION COMPOSÉE (utilisée souvent) === */
    /* ================================================= */
    --transition-fast: var(--duration-fast) var(--ease-out);
    --transition-normal: var(--duration-normal) var(--ease-in-out);
    --transition-slow: var(--duration-slow) var(--ease-in-out);
    /* ================================================= */
    /* === nav HEIGHT === */
    /* ================================================= */
    --nav-height-desktop: calc(52.8 / 16 * 1rem);
    --nav-height-large: calc(48 / 16 * 1rem);
    --nav-height-moyen: calc(48 / 16 * 1rem);

    --nav-height-petit: calc(42 / 16 * 1rem);

    /* ================================================= */
    /* === DARK MODE === */
    /* ================================================= */
    --source-color-dark-mode-accent-two: #a3ffbb;
    --source-color-dark-mode-white-transparent: black;
}