/*
 * Saint-Étienne-lès-Remiremont — jetons de design
 * Source : variables et styles du fichier Figma (page « Design system »), export du 25/10/2026.
 * Valeurs exactes de Figma. Les noms suivent ceux de Figma (« / » remplacé par « - »).
 * Usage : charger ce fichier dans le thème enfant (avant les styles Bricks) ou recréer
 * les mêmes variables dans le Style manager de Bricks, avec les mêmes noms.
 */

:root {
  /* ---------- Primitives : bleu (logo) ---------- */
  --bleu-25: #f0f1f8;
  --bleu-50: #e1e3f1;
  --bleu-100: #c3c7e3;
  --bleu-200: #a2a8d3;
  --bleu-300: #8189c3;
  --bleu-400: #6670b1;
  --bleu-500: #4c58a0;
  --bleu-600: #434e8f;
  --bleu-700: #3a4480;
  --bleu-800: #2c3462;
  --bleu-900: #1e2343;
  --bleu-950: #111427;

  /* ---------- Primitives : couleurs du logo ---------- */
  --jaune-50: #fefcee;
  --jaune-100: #fcf9de;
  --jaune-300: #f6ee9c;
  --jaune-500: #f1e45a;
  --jaune-700: #b3a51f;
  --jaune-900: #5c5410;

  --orange-50: #fef6ee;
  --orange-100: #fcebda;
  --orange-300: #f1c08f;
  --orange-500: #e89645;
  --orange-700: #b8691e;
  --orange-900: #5e3510;

  --rose-50: #fcf4f8;
  --rose-100: #f7e6f0;
  --rose-300: #e6bdd5;
  --rose-500: #d38eb7;
  --rose-700: #a65a88;
  --rose-900: #4f2a40;

  --vert-50: #f6faf1;
  --vert-100: #edf5e5;
  --vert-300: #c3dca9;
  --vert-500: #98c36f;
  --vert-700: #5f8f3a;
  --vert-900: #2e471b;

  --rouge-100: #fde8e7;
  --rouge-500: #d93a2f;
  --rouge-700: #a82a21;

  /* ---------- Primitives : neutres ---------- */
  --neutre-blanc: #ffffff;
  --neutre-noir: #000000;
  --gris-5: #fafafa;
  --gris-10: #f2f2f2;
  --gris-20: #e5e5e5;
  --gris-30: #cccccc;
  --gris-40: #b2b2b2;
  --gris-50: #999999;
  --gris-60: #808080;
  --gris-70: #666666;
  --gris-80: #4d4d4d;
  --gris-90: #2e2d2d;
  --gris-100: #171717;

  /* ---------- Thème : fonds ---------- */
  --background-base: #ffffff;
  --background-1: #fafafa;
  --background-2: #f2f2f2;
  --background-3: #e5e5e5;
  --background-primary: #171717;
  --background-inverse: #171717;
  --background-accent: #4c58a0;
  --background-accent-light: #e1e3f1;
  --background-accent-dark: #1e2343;
  --background-transparent: rgba(255, 255, 255, 0);

  /* ---------- Thème : textes ---------- */
  --label-primary: rgba(0, 0, 0, 0.9);
  --label-secondary: rgba(0, 0, 0, 0.62);
  --label-tertiary: rgba(0, 0, 0, 0.56);
  --label-inverse: rgba(255, 255, 255, 0.92);
  --label-white: #ffffff;
  --label-white-secondary: rgba(255, 255, 255, 0.86);
  --label-black: #000000;
  --label-disabled: rgba(0, 0, 0, 0.24);
  --label-error: #a82a21;
  --label-accent: #4c58a0;

  /* ---------- Thème : bordures ---------- */
  --border-1: rgba(0, 0, 0, 0.1);
  --border-2: rgba(0, 0, 0, 0.16);
  --border-3: rgba(0, 0, 0, 0.3);
  --border-4: rgba(0, 0, 0, 0.5);
  --border-primary: rgba(0, 0, 0, 0.9);
  --border-oncolor: rgba(255, 255, 255, 0.24);
  --border-inverse: rgba(255, 255, 255, 0.9);
  --border-accent: #4c58a0;

  /* ---------- Thème : calques (survols, sélections) ---------- */
  --layer-primary-1-default: rgba(0, 0, 0, 0.04);
  --layer-primary-2-default: rgba(0, 0, 0, 0.1);
  --layer-primary-3-default: rgba(0, 0, 0, 0.2);
  --layer-primary-1-hover: rgba(0, 0, 0, 0.1);
  --layer-primary-2-hover: rgba(0, 0, 0, 0.2);
  --layer-primary-disabled: rgba(0, 0, 0, 0.1);
  --layer-accent-1-default: rgba(76, 88, 160, 0.06);
  --layer-accent-2-default: rgba(76, 88, 160, 0.2);
  --layer-accent-3-default: #4c58a0;
  --layer-accent-1-hover: rgba(76, 88, 160, 0.12);
  --layer-accent-2-hover: rgba(76, 88, 160, 0.4);
  --layer-accent-3-hover: #6670b1;
  --layer-accent-1-active: rgba(76, 88, 160, 0.4);
  --layer-accent-2-active: rgba(76, 88, 160, 0.6);
  --layer-accent-3-active: #3a4480;
  --layer-accent-disabled: rgba(0, 0, 0, 0.04);

  /* ---------- Thème : boutons ---------- */
  --button-accent-fill-default: #4c58a0;
  --button-accent-fill-hover: #a65a88;   /* survol rose, voulu dans la charte */
  --button-accent-fill-active: #a65a88;
  --button-accent-light-default: rgba(76, 88, 160, 0.08);
  --button-accent-light-hover: rgba(76, 88, 160, 0.16);
  --button-accent-light-active: rgba(76, 88, 160, 0.24);
  --button-accent-subtle-default: rgba(255, 255, 255, 0);
  --button-accent-subtle-hover: rgba(76, 88, 160, 0.06);
  --button-accent-subtle-active: rgba(76, 88, 160, 0.12);
  --button-accent-disabled: #f2f2f2;
  --button-primary-fill-default: #171717;
  --button-primary-fill-hover: #2e2d2d;
  --button-primary-fill-active: #171717;
  --button-primary-light-default: rgba(0, 0, 0, 0.04);
  --button-primary-light-hover: rgba(0, 0, 0, 0.1);
  --button-secondary-fill-default: rgba(0, 0, 0, 0.05);
  --button-secondary-fill-hover: rgba(0, 0, 0, 0.1);
  --button-inverse-fill-default: rgba(255, 255, 255, 0.92);
  --button-inverse-fill-hover: rgba(255, 255, 255, 0.8);
  --button-inverse-light-default: rgba(255, 255, 255, 0.16);
  --button-inverse-light-hover: rgba(255, 255, 255, 0.24);

  /* ---------- Thème : champs ---------- */
  --field-1: rgba(0, 0, 0, 0.04);
  --field-1-hover: rgba(0, 0, 0, 0.08);
  --field-2: rgba(255, 255, 255, 0.8);
  --field-3: #ffffff;

  /* ---------- Thème : états et divers ---------- */
  --focus: #4c58a0;
  --interactive: #4c58a0;
  --highlight: rgba(76, 88, 160, 0.1);
  --success: #5f8f3a;
  --success-light: #edf5e5;
  --warning: #b8691e;
  --warning-light: #fcf9de;
  --error: #d93a2f;
  --error-light: #fde8e7;
  --info: #4c58a0;
  --info-light: #e1e3f1;
  --overlay: rgba(0, 0, 0, 0.25);
  --glass-fill: rgba(255, 255, 255, 0.16);
  --glass-fill-dark: rgba(30, 35, 67, 0.55);
  --glass-border: rgba(255, 255, 255, 0.3);

  /* ---------- Utilitaires par couleur (étiquettes, pictogrammes) ---------- */
  --utility-bleu-background: #e1e3f1;
  --utility-bleu-color: #4c58a0;
  --utility-bleu-label: #2c3462;
  --utility-bleu-icon: #3a4480;
  --utility-jaune-background: #fcf9de;
  --utility-jaune-color: #f1e45a;
  --utility-jaune-label: #5c5410;
  --utility-jaune-icon: #b3a51f;
  --utility-orange-background: #fcebda;
  --utility-orange-color: #e89645;
  --utility-orange-label: #5e3510;
  --utility-orange-icon: #b8691e;
  --utility-rose-background: #f7e6f0;
  --utility-rose-color: #d38eb7;
  --utility-rose-label: #4f2a40;
  --utility-rose-icon: #a65a88;
  --utility-vert-background: #edf5e5;
  --utility-vert-color: #98c36f;
  --utility-vert-label: #2e471b;
  --utility-vert-icon: #5f8f3a;
  --utility-gris-background: #f2f2f2;
  --utility-gris-color: #808080;
  --utility-gris-label: #4d4d4d;
  --utility-gris-icon: #666666;

  /* ---------- Thématiques (une couleur par rubrique) ----------
     background : fonds d'étiquettes et encarts
     color      : couleur vive (traits, pastilles)
     label      : texte sur fond background (contraste AA)
     icon       : pictogrammes
     section    : fond teinté de section (8 %), à poser SUR du blanc
     surlignage : surlignage des sur-titres */
  --theme-ma-mairie-background: #e1e3f1;
  --theme-ma-mairie-color: #4c58a0;
  --theme-ma-mairie-label: #2c3462;
  --theme-ma-mairie-icon: #3a4480;
  --theme-ma-mairie-section: rgba(76, 88, 160, 0.08);
  --theme-ma-mairie-surlignage: rgba(76, 88, 160, 0.45);

  --theme-mes-demarches-background: #fcebda;
  --theme-mes-demarches-color: #e89645;
  --theme-mes-demarches-label: #5e3510;
  --theme-mes-demarches-icon: #b8691e;
  --theme-mes-demarches-section: rgba(232, 150, 69, 0.08);
  --theme-mes-demarches-surlignage: rgba(232, 150, 69, 0.6);

  --theme-vivre-ici-background: #edf5e5;
  --theme-vivre-ici-color: #98c36f;
  --theme-vivre-ici-label: #2e471b;
  --theme-vivre-ici-icon: #5f8f3a;
  --theme-vivre-ici-section: rgba(152, 195, 111, 0.08);
  --theme-vivre-ici-surlignage: rgba(152, 195, 111, 0.6);

  --theme-actualites-agenda-background: #f7e6f0;
  --theme-actualites-agenda-color: #d38eb7;
  --theme-actualites-agenda-label: #4f2a40;
  --theme-actualites-agenda-icon: #a65a88;
  --theme-actualites-agenda-section: rgba(211, 142, 183, 0.08);
  --theme-actualites-agenda-surlignage: rgba(211, 142, 183, 0.6);

  --theme-decouvrir-background: #fcf9de;
  --theme-decouvrir-color: #f1e45a;
  --theme-decouvrir-label: #5c5410;
  --theme-decouvrir-icon: #b3a51f;
  --theme-decouvrir-section: rgba(241, 228, 90, 0.08);
  --theme-decouvrir-surlignage: rgba(241, 228, 90, 0.75);

  /* ---------- Catégories de la carte (épingles, filtres) ----------
     Fond plein de l'épingle + pictogramme blanc (contraste ≥ 3:1 vérifié). */
  --carte-patrimoine: #a65a88;      /* rose-700, picto church */
  --carte-lieu-naturel: #5f8f3a;    /* vert-700, picto landscape */
  --carte-restaurant: #b8691e;      /* orange-700, picto restaurant */
  --carte-sport: #5c5410;           /* jaune-900, picto sports_soccer */
  --carte-salle: #434e8f;           /* bleu-600, picto meeting_room */
  --carte-service: #4d4d4d;         /* gris-80, picto account_balance */
  --carte-regroupement: #3a4480;    /* bleu-700, pastilles numérotées */

  /* ---------- Espacements (échelle Figma) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 126px;
  --space-14: 140px;
  --space-15: 164px;
  --space-16: 192px;
  --space-17: 224px;

  /* Mise en page : 1440 px de large en desktop, conteneur 1232 px (marges 104 px).
     Mobile : 390 px, marges 16 px. */
  --container-max: 1232px;
  --gutter-desktop: 104px;
  --gutter-mobile: 16px;
  --section-pad-desktop: 80px;
  --section-pad-mobile: 48px;

  /* ---------- Rayons ---------- */
  --radius-none: 0;
  --radius-xsmall: 4px;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-xlarge: 20px;
  --radius-xxlarge: 24px;
  --radius-huge: 32px;
  --radius-massive: 40px;
  --radius-full: 999px;

  /* ---------- Traits ---------- */
  --stroke-thinner: 1px;
  --stroke-thin: 1.5px;
  --stroke-regular: 2px;
  --stroke-thick: 3px;

  /* ---------- Ombres (styles d'effet Figma) ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 18, 31, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 18, 31, 0.08), 0 1px 2px rgba(15, 18, 31, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(15, 18, 31, 0.08), 0 2px 4px -2px rgba(15, 18, 31, 0.05);
  --shadow-lg: 0 12px 16px -4px rgba(15, 18, 31, 0.08), 0 4px 6px -2px rgba(15, 18, 31, 0.04);
  --shadow-xl: 0 20px 24px -4px rgba(15, 18, 31, 0.08), 0 8px 8px -4px rgba(15, 18, 31, 0.03);
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #4c58a0;
  --blur-md: 24px;

  /* ---------- Typographie : Inter (auto-hébergée, variable) ----------
     taille / interligne / approche (letter-spacing) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --display-1: 600 96px/106px var(--font-sans);   --display-1-ls: -3.6px;
  --display-2: 600 80px/94px var(--font-sans);    --display-2-ls: -2.5px;
  --display-3: 600 56px/66px var(--font-sans);    --display-3-ls: -2px;
  --heading-1: 600 48px/58px var(--font-sans);    --heading-1-ls: -1.5px;
  --heading-2: 600 36px/43px var(--font-sans);    --heading-2-ls: -1px;
  --heading-3: 600 32px/40px var(--font-sans);    --heading-3-ls: -0.8px;
  --title-1: 600 28px/34px var(--font-sans);      --title-1-ls: -0.6px;
  --title-2: 600 22px/28px var(--font-sans);      --title-2-ls: -0.5px;
  --title-3: 600 20px/25px var(--font-sans);      --title-3-ls: -0.4px;
  --body-large: 400 18px/26px var(--font-sans);   --body-large-ls: -0.3px;
  --body-medium: 400 16px/24px var(--font-sans);  --body-medium-ls: -0.2px;
  --body-small: 400 14px/20px var(--font-sans);   --body-small-ls: -0.1px;
  --caption: 400 12px/16px var(--font-sans);      --caption-ls: 0;
  --subheadline: 400 11px/15px var(--font-sans);  --subheadline-ls: 0.1px;
  --note: 400 10px/13px var(--font-sans);         --note-ls: 0.1px;
  /* Graisses utilisées : 400 (Regular), 500 (Medium), 600 (Semi Bold). */
}

/* Correspondance desktop → mobile appliquée dans les maquettes
   (à reprendre dans les réglages de typographie de Bricks) :
   H1 de page   : Heading 1 (48) → Title 1 (28) ; H1 sur photo : Display 3 (56) → Heading 3 (32)
   H1 d'accueil/rubrique visuelle : Display 2 (80) → Heading 2 (36)
   H2 de section: Heading 2 (36) → Title 1 (28)
   H3           : Title 1 / Title 2 → Title 2 / Title 3
   Texte courant: Body Large (18) → Body Medium (16)
   Suggestion fluide :
   h1 { font-size: clamp(28px, 1.2rem + 2.2vw, 48px); }
   h2 { font-size: clamp(28px, 1.4rem + 0.9vw, 36px); } */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}