: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: #016f29;
    --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: #ffd4d4;
    --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: #c7fddd;
    --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-bloc-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-glossary-item: var(--source-color-accent-two);
    --color-glossary-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-glossary-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: 2rem;
    --font-size-lg: 1.7rem;
    --font-size-md-plus: 1.35rem;
    --font-size-md: 1.25rem;
    --font-size-base-plus: 1.1rem;
    --font-size-base: 1rem;
    --font-size-sm: 0.85rem;
    --font-size-xs: 0.75rem;
    --font-size-h3: 1.4rem;
    --font-size-h2: 1.5rem;
    --font-size-h1: 1.6rem;
    --font-size-600-h1: 1.7rem;
    /* Tailles spécifiques */
    --font-size-video-synopsis-p: 1.05rem;
    --font-size-video-info-h3: 1.2rem;
    --font-size-description-lead: 1.3rem;
    --font-size-600-description-lead: 1.2rem;
    --font-size-website-name: 1.9rem;
    --font-size-video-modal-close-button: 1.6rem;
    --font-size-carousel-prev-next-symbol: 2rem;
    --font-size-search-result-snippet: 1.1rem;
    --font-size-nav-mobile: 1.2rem;
    --font-size-nav-mobile-label: 1.05rem;
    --font-size-media-lang-link: 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: 1rem;
    --font-size-book-author: var(--font-size-md-plus);
    --font-size-carousel-number-text: var(--font-size-base);
    --font-size-book-language: 1.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-md);
    --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: 1.27rem;
    --font-size-search-pagination-a-hover: 1.27rem;
    --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: 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-glossary-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: 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: 1.4rem;
    --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.5;
    --line-height-heading: 1.2;
    /* --- Variables de Dimensionnement pour Pagination --- */
    --font-size-pagination-btn: 0.9rem;
    --font-size-pagination-num: 1rem;
    --pagination-btn-height: 2.25rem; /* 36px */
    --pagination-btn-padding-horizontal: 1rem;
    --pagination-btn-line-height: 1.2;
    /* ================================================= */
    /* ESPACEMENTS (Spacing Scale) */
    /* ================================================= */
    --space-xxs: 0.125rem; /* 2px */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-xl-plus: 2.5rem; /* 40px */
    --space-xxl: 3rem;     /* 48px */
    /* ================================================= */
    /* RAYONS D'ARRONDI (Radius Scale) */
    /* ================================================= */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 50px;
    /* ================================================= */
    /* 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 0.0625rem 0.1875rem var(--shadow-soft-color); /* 0 1px 3px */
    /* Z-2 : Élévation standard */
    --shadow-z2: 0 0.1875rem 0.375rem var(--shadow-base-color);  /* 0 3px 6px */
    /* Z-3 : Élévation moyenne */
    --shadow-z3: 0 0.375rem 0.75rem var(--shadow-base-color);    /* 0 6px 12px */
    /* Z-4 : Élévation maximale */
    --shadow-z4: 0 0.625rem 1.25rem 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 10px 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: 0.5rem; /* 8px - Pour de très petites icônes/avatars */
    --size-sm: 1rem; /* 16px - Pour des icônes standard */
    --size-md: 2rem; /* 32px - Pour des avatars ou images moyennes */
    --size-lg: 3rem; /* 48px - Pour des éléments plus grands */
    --size-xl: 5rem; /* 80px - Pour des logos ou de grandes icônes */
    /* ================================================= */
    /* LARGEUR MAXIMALE DES CONTENEURS */
    /* ================================================= */
    --max-width-contenu: 1200px; /* Largeur max pour le contenu du corps de page */
    --max-width-header: 1440px; /* 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: 0.125rem; /* 2px */
    --translate-sm: 0.25rem;  /* 4px */
    --translate-md: 0.5rem;   /* 8px */
    --translate-lg: 0.75rem;  /* 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: 4.25rem;          /* 68px */
    --nav-height-tablet-landscape: 3.75rem; /* 60px */
    --nav-height-tablet-portrait: 3.125rem; /* 50px */
    --nav-height-mobile: 2.5rem;            /* 40px */
    --nav-height: var(--nav-height-desktop); /* Par défaut */
}