:root {
  --color-primary: #325763;
  --color-primary-hover: #2d4f5a;
  --color-bouton: #325763;
  --color-bouton-hover: #2d4f5a;
  --color-titre-hero: #043c48;
  --color-titre: #325763;
  --color-dark: #152925;
  --color-dark-soft: #38524d;
  --color-brand-pink-ink: #e20138;
  --color-brand-pink: #e20138;
  --color-brand-pink-soft: #fef5f7;
  --genre-elle: #e20138;
  --genre-lui: #157d8f;
  --genre-elle-voile: var(--color-brand-pink-soft);
  --genre-lui-voile: #f3fcfd;
  --color-secondary: #e8a67d;
  --filet-doux: #aacbc1;
  --accent-clair: #8dd7c5;
  --section-base: #ffffff;
  --section-papier: #faf8f4;
  --section-teinte-1: #fce6eb;
  --section-teinte-2: #fef2f5;
  --section-teinte-3: #e8f4f0;
  --section-teinte-4: #eef1ee;
  --section-teinte-5: #e8f3f3;
  --section-teinte-6: #fdf0f3;
  --section-teinte-7: #e1eced;
  --section-sombre: #053c49;
  --section-pied: var(--color-titre-hero);
  --color-danger: #dc3545;
  --color-success: #198754;
  --warning-ink: #664d03;
  --danger-ink: #58151c;
  --success-ink: #0a3622;
  --decor-disque: color-mix(in srgb, var(--color-titre) 3.24%, transparent);
  --fond-app:
    radial-gradient(circle at 8% 16%, color-mix(in srgb, var(--color-titre) 25%, transparent) 0, transparent 34%),
    radial-gradient(circle at 96% 44%, color-mix(in srgb, var(--color-titre) 25%, transparent) 0, transparent 38%),
    radial-gradient(circle at 12% 78%, color-mix(in srgb, var(--color-success) 25%, transparent) 0, transparent 36%),
    radial-gradient(circle at 90% 96%, color-mix(in srgb, var(--color-titre) 12%, transparent) 0, transparent 30%),
    linear-gradient(to bottom, var(--section-teinte-7), var(--section-papier) 40%);
  --surface-douce: #f5f9f9;
  --surface-appuyee: #d9e7e9;
  --surface-card: var(--white);
  --white: #ffffff;
  --black: #000000;
  --text: #152925;
  --text-muted: #596864;
  --text-placeholder: color-mix(in srgb, var(--text-muted) 70%, var(--white));
  --border: #dce5e1;
  --border-soft: #edf2ef;
  --teinte-neutre: color-mix(in srgb, var(--color-dark-soft) 6%, transparent);
  --teinte-neutre-forte: color-mix(in srgb, var(--color-dark-soft) 12%, transparent);
  --danger-subtle: #f8d7da;
  --on-dark: #f8fbf9;
  --on-dark-muted: #dcebe6;
  --on-dark-soft: #b9cdc6;
  --on-dark-subtle: #91aaa2;
  --accent-sur-sombre: #f2c6a8;
  --color-voile: #011114;
  --border-on-dark: color-mix(in srgb, var(--on-dark-muted) 20%, transparent);
  --border-on-dark-strong: color-mix(in srgb, var(--on-dark-muted) 40%, transparent);
  --shadow-color: #152925;
  --focus-border: color-mix(in srgb, var(--color-primary) 50%, var(--white));
  --focus-ring: color-mix(in srgb, var(--color-primary) 25%, transparent);
  --focus-ring-danger: color-mix(in srgb, var(--color-danger) 25%, transparent);
  --font-display: "Avenir Next", Avenir, system-ui, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-base: var(--font-display);
  --font-titre: "Nunito", "Avenir Next", system-ui, -apple-system,
                BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --fs-base: 1rem;
  --fs-fixe: 1rem;
  --fs-sm: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-utilitaire: 0.6875rem;
  --fs-micro: 0.625rem;
  --fs-lead: 1.125rem;
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.75rem;
  --fs-h4: 1.5rem;
  --fs-h5: 1.25rem;
  --fs-h6: 1rem;
  --fs-display-1: 5rem;
  --fs-display-2: 4.5rem;
  --fs-display-3: 4rem;
  --fs-display-4: 3.5rem;
  --fs-display-5: 3rem;
  --fs-display-6: 2.5rem;
  --fs-ecran-compte: 15rem;
  --fs-ecran-question: 6rem;
  --fs-ecran-jeu: max(100%, min(100vw / 120, 100vh / 67.5));
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-nav: 1.75rem;
  --icon-xl: 2rem;
  --icon-2xl: 3rem;
  --lh-base: 1.5;
  --lh-heading: 1.2;
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 7.5rem;
  --control-h: 3.125rem;
  --control-h-sm: 2.5rem;
  --control-h-lg: 3.75rem;
  --control-h-tactile: 3rem;
  --radius: 1.125rem;
  --radius-lg: 1.75rem;
  --radius-md: 1.125rem;
  --radius-photo: min(28%, 24px);
  --radius-xs: 0.5rem;
  --radius-sm: 0.8125rem;
  --radius-pill: 999px;
  --carte-pied-h: calc(30px + 1px + var(--space-3));
  --shadow-calendrier: 0 6px 14px color-mix(in srgb, var(--shadow-color) 35%, transparent);
  --shadow-sm: 0 4px 16px color-mix(in srgb, var(--shadow-color) 8%, transparent);
  --shadow-md: 0 8px 24px color-mix(in srgb, var(--shadow-color) 12%, transparent);
  --shadow-lg: 0 16px 40px color-mix(in srgb, var(--shadow-color) 14%, transparent);
  --shadow-accent: 0 12px 28px color-mix(in srgb, var(--color-brand-pink-ink) 22%, transparent);
  --shadow-haut: 0 -4px 16px color-mix(in srgb, var(--shadow-color) 6%, transparent);
  --shadow-photo: 0 28px 62px color-mix(in srgb, var(--color-dark-soft) 16%, transparent);
  --hero-tete-h: 661px;
  --hero-tete-barre-h: 174px;
  --header-h: 96px;
  --utility-bar-h: 34px;
}
@media (max-width: 1100px) {
  :root {
    --header-h: 62px;
  }
}
@media (max-width: 767px) {
  :root {
    --utility-bar-h: 6px;
  }
}