/*
  L'ordre des layers définit la priorité des styles
  Chaque layer écrase le précédent si conflit
*/
@layer config, base, components, utilities;
@layer config{

/* ==========================================
 * Reset CSS et print, made par Alsacréations
 * Consignes : à placer dans un layer inférieur aux autres layers
 * Mise à jour : 2025-11-05
 * ========================================== */

/* ==========================================
 * Modèle de boîte
 * ========================================== */

/* Modèle de boîte uniforme et prévention des débordements flex/grid */
*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0;
}

/* ==========================================
 * Document global
 * ========================================== */

html {
  interpolate-size: allow-keywords;
  overflow-wrap: break-word;
  text-size-adjust: none;
  hanging-punctuation: first allow-end last;
}

body {
  min-height: 100dvh;
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  text-rendering: optimizespeed;
}

/* ==========================================
 * Navigation et focus
 * ========================================== */

/* Masquage de l'outline pour les interactions à la souris/touch */

/* Attention : uniquement si la règle suivante (:focus-visible) est active */
:focus:not(:focus-visible) {
  outline: none;
}

/* Outline uniquement pour la navigation au clavier */
:focus-visible {
  outline: 2px solid light-dark(#4285f4, #8ab4f8);
  outline-offset: 2px;
}

/* Moderne: utilisation de la couleur d'accent système */
@supports (outline-color: AccentColor) {
  :focus-visible {
    outline-color: AccentColor;
  }
}

/* Marge au-dessus des ancres ciblées */
:target {
  scroll-margin-block: 1rem;
}

/* Liens sans classe */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* ==========================================
 * Typographie
 * ========================================== */

/* Hauteur de ligne réduite sur les éléments de titre */
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
label {
  line-height: 1.1;
}

/* Amélioration de la typographie avec text-wrap */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote {
  text-wrap: balance;
}

p,
li,
figcaption {
  text-wrap: pretty;
}

/* Guillemets français */
q {
  quotes: "«\00A0" "\00A0»";
}

/* ==========================================
 * Listes
 * ========================================== */

ul,
ol {
  margin: 0;
  padding-inline-start: 1em;
  list-style-position: outside;

  /* Suppression des styles des listes avec classe (version accessible) */

  /* Attention : nécessite attribut role dans le HTML */
  &[role="list"] {
    padding-inline-start: 0;
    list-style: none;
  }

  & li {
    margin-block: 0.1em;
  }
}

/* ==========================================
 * Média et contenus
 * ========================================== */

/* Prévention des débordements */
img,
picture,
table,
td,
blockquote,
pre,
code,
input,
textarea,
select,
video,
svg,
iframe {
  max-width: 100%;
}

/* Affichage en bloc pour les éléments média */
img,
picture,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
}

/* Préservation du ratio d'affichage */
:where(img, picture):where(:not([src$=".svg"])) {
  height: auto;
}

/* Suppression des marges par défaut */
figure {
  margin: 0;
}

/* ==========================================
 * Formulaires
 * ========================================== */

/* Normalisation des éléments de formulaire */
input,
button,
textarea,
select {
  margin: 0;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  vertical-align: middle;
}

/* Conteneurs de formulaire */
form,
fieldset {
  border: none;
}

fieldset {
  margin: 0;
  padding: 1em 0;
}

legend {
  max-width: 100%;
  border: 0;
  color: inherit;
  white-space: normal;
}

label {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

textarea {
  overflow: auto;
  vertical-align: top;
  white-space: pre-wrap;
  resize: vertical;
}

/* ==========================================
 * Éléments préformatés
 * ========================================== */

pre,
code,
kbd,
samp {
  font-family: ui-monospace, monospace;
  font-size: 1em;
}

pre {
  overflow: auto;
  line-height: normal;
  white-space: pre-wrap;
  tab-size: 2;
}

:where(:not(pre)) > code {
  padding: 2px 6px;
  border-radius: 6px;
  background-color: oklch(50% 0 0 / 20%);
  font-size: 0.9em;
}

/* ==========================================
 * SVG
 * ========================================== */

/* Couleur par défaut des SVG */
svg:not([fill]) {
  fill: currentcolor;
}

svg {
  overflow: visible;
}

svg * {
  transform-box: fill-box;
}

/* Masquage des SVG contenant des symboles */
svg:has(symbol) {
  display: none;
}

/* ==========================================
 * Accessibilité (ARIA)
 * ========================================== */

[aria-busy="true"] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/* Gestion des éléments cachés mais accessibles */
[aria-hidden="false"][hidden] {
  display: revert;
}

[aria-hidden="false"][hidden]:not(:focus) {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

/* ==========================================
 * Masquage visuel accessible
 * ========================================== */

/* Masquage du contenu visuellement tout en le gardant accessible aux technologies d'assistance. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

/* ==========================================
 * Préférences animations
 * ========================================== */

/* Désactivation des animations pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 1ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================
 * Reset print
 * ========================================== */

@media print {
  /* Dimension et marges de page */
  @page {
    size: a4 portrait;
    margin: 2cm 1.5cm;
  }

  /* Reset général */
  * {
    display: revert;
    box-sizing: border-box;
    all: unset;
  }

  img {
    max-width: 100%;
  }

  input,
  textarea,
  select {
    all: revert;
  }

  /* On redéfinit les styles globaux (12pt = 16px) */
  body {
    width: auto;
    margin: 0;
    background-color: #ffffff !important;
    color: #000000 !important;
    font-family: serif;
    font-family: Georgia, serif;
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Espacements typographiques (15pt = 20px) */
  p,
  blockquote,
  label,
  ul,
  ol {
    margin-block: 0 15pt;
  }

  p:last-child {
    margin-bottom: 0;
  }

  /* Titrages (24pt = 32px) */
  h1 {
    margin-block: 0 24pt;
    font-size: 18pt;
    font-weight: 700;
    line-height: 1.1;
  }

  h2 {
    margin-block: 0 18pt;
    font-size: 16pt;
    font-weight: 700;
    line-height: 1.1;
  }

  h3 {
    margin-block: 0 15pt;
    font-size: 14pt;
    font-weight: 700;
  }

  h4 {
    margin-block: 0 12pt;
    font-size: 12pt;
    font-weight: 700;
  }

  /* Classes dédiées print / no-print */
  .print {
    display: revert;
  }

  .no-print {
    display: none;
  }

  /* Pas de veuves ou orphelines (3 lignes minimum) */
  p,
  blockquote {
    orphans: 3;
    widows: 3;
  }

  /* Pas de saut de page au sein de ces éléments */
  blockquote,
  ul,
  ol,
  figure,
  table {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Pas de saut de page après ces éléments */
  h1,
  h2,
  h3,
  h4,
  caption {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Styles des liens */
  a,
  a:link,
  a:visited {
    background: transparent !important;
    color: unset;
    font-weight: 700;
    text-decoration: underline !important;
  }

  /* On affiche l'URL des liens externes */
  a[href^="http"]::after,
  a[href^="https"]::after {
    content: " (" attr(href) ")";
  }

  /* On masque les vidéos */
  video,
  object,
  iframe {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* ==========================================
 * Fin du reset CSS
 * ========================================== */
}
@layer config{

/* ----------------------------------
 * Theme du projet (valeurs primitives)
 * ----------------------------------
 */

/* Breakpoints custom (si compatibles) */

:root {
  /* Breakpoints (en dur) */
  --md: 48rem; /* 768px */
  --lg: 64rem; /* 1024px */
  --xl: 80rem; /* 1280px */
  --xxl: 96rem; /* 1536px */

  /* Transitions et animations */
  --transition-duration: 290ms;

  /* Niveaux de z-index */
  --z-under-page-level: -1;
  --z-above-page-level: 1;
  --z-header-level: 1000;
  --z-above-header-level: 2000;
  --z-above-all-level: 3000;

  /* Couleurs (globales) */
  --color-white: oklch(100% 0 0);
  --color-black: oklch(0% 0 0);
  --color-gray-50: oklch(97% 0 0);
  --color-gray-100: oklch(92.2% 0 0);
  --color-gray-200: oklch(87% 0 0);
  --color-gray-300: oklch(70.8% 0 0);
  --color-gray-400: oklch(55.6% 0 0);
  --color-gray-500: oklch(43.9% 0 0);
  --color-gray-600: oklch(37.1% 0 0);
  --color-gray-700: oklch(26.9% 0 0);
  --color-gray-800: oklch(20.5% 0 0);
  --color-gray-900: oklch(14.5% 0 0);
  --color-error-100: oklch(97% 0.1 27.52);
  --color-error-300: oklch(70.54% 0.19 27.52);
  --color-error-500: oklch(50.54% 0.19 27.52);
  --color-error-700: oklch(35.54% 0.19 27.52);
  --color-error-900: oklch(20.54% 0.11 27.52);
  --color-success-100: oklch(94.46% 0.13 150.685);
  --color-success-300: oklch(71.66% 0.13 150.73);
  --color-success-500: oklch(51.66% 0.13 150.73);
  --color-success-700: oklch(36.66% 0.13 150.73);
  --color-success-900: oklch(21.66% 0.13 150.73);
  --color-warning-100: oklch(97% 0.08 49.95);
  --color-warning-300: oklch(83.15% 0.17 49.95);
  --color-warning-500: oklch(63.15% 0.17 49.95);
  --color-warning-700: oklch(48.15% 0.17 49.95);
  --color-warning-900: oklch(33.15% 0.11 49.95);
  --color-info-100: oklch(97% 0.09 256.37);
  --color-info-300: oklch(71.33% 0.18 256.37);
  --color-info-500: oklch(51.33% 0.18 256.37);
  --color-info-700: oklch(36.33% 0.18 256.37);
  --color-info-900: oklch(21.33% 0.11 256.37);

  /* Border radius */
  --radius-none: 0;
  --radius-4: 0.25rem;
  --radius-8: 0.5rem;
  --radius-12: 0.75rem;
  --radius-16: 1rem;
  --radius-24: 1.5rem;
  --radius-full: 9999px;

  /* Espacements */
  --spacing-0: 0;
  --spacing-1: 1px;
  --spacing-4: 0.25rem;
  --spacing-8: 0.5rem;
  --spacing-12: 0.75rem;
  --spacing-16: 1rem;
  --spacing-20: 1.25rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-56: 3.5rem;
  --spacing-80: 5rem;
  --spacing-128: 8rem;
  --spacing-160: 10rem;
  --spacing-1440: 90rem;

  /* Couleurs du projet */
  --color-red-100: oklch(92.05% 0.0424 39.8434);
  --color-red-700: oklch(50.6% 0.1899 27.6614);
  --color-green-100: oklch(95.37% 0.0563 124.8151);
  --color-green-200: oklch(85.25% 0.137 126.6815);
  --color-green-400: oklch(72.24% 0.1793 129.5797);
  --color-green-700: oklch(48.52% 0.1238 129.9595);
  --color-orange-100: oklch(94.29% 0.0425 70.6883);
  --color-orange-200: oklch(82.81% 0.13 68.1974);
  --color-orange-400: oklch(68.72% 0.1793 50.6258);
  --color-orange-700: oklch(58.71% 0.1938 36.905);
  --color-blue-100: oklch(95.68% 0.0175 234.4983);
  --color-blue-300: oklch(72.11% 0.1126 234.6265);
  --color-blue-500: oklch(53.37% 0.1292 243.0535);
  --color-blue-700: oklch(39.86% 0.131 258.3453);
  --color-blue-900: oklch(30.86% 0.0965 255.15);
  --color-yellow-100: oklch(96.84% 0.0504 94.9503);
  --color-yellow-400: oklch(91.23% 0.159 97.5921);
  --color-yellow-500: oklch(85.45% 0.1746 88.3903);
  --color-yellow-700: oklch(52.04% 0.1063 89.5112);
  --color-azur-100: oklch(94.73% 0.0288 215.7082);
  --color-azur-500: oklch(69.74% 0.1307 223.7249);
  --color-azur-700: oklch(56% 0.1045 223.2022);
  --color-pink-100: oklch(94.73% 0.0263 17.6258);
  --color-pink-500: oklch(65.87% 0.2005 355.865);
  --color-pink-700: oklch(53.41% 0.1959 359.1775);

  /* Typographie — Tailles de police */
  --text-10: 0.625rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-30: 1.875rem;
  --text-36: 2.25rem;
  --text-48: 3rem;
  --text-64: 4rem;

  /* Familles de police */
  --font-base: system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;

  /* Typographie - Graisses de police */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Interlignage (line-height) */
  --line-height-20: 1.25rem;
  --line-height-24: 1.5rem;
  --line-height-28: 1.75rem;
  --line-height-32: 2rem;
  --line-height-36: 2.25rem;
  --line-height-40: 2.5rem;
  --line-height-48: 3rem;
  --line-height-56: 3.5rem;
  --line-height-80: 5rem;
  --line-height-100: 6.25rem;
}
}
@layer config{
/* ----------------------------------
 * Theme-tokens, généré par primary.alsacreations.com
 * Surcouche de theme.css
 * Configuration :
 * - Couleur primaire : blue
 * - Theme : light uniquement
 * - Typographie responsive : non
 * - Espacements responsive : non
 * ----------------------------------
 */
:root {
  color-scheme: light;

  /* Couleur primaire */
  --primary: var(--color-blue-500);
  --on-primary: var(--color-white);

  /* Couleur secondaire */
  --secondary: var(--color-yellow-500);
  --on-secondary: var(--color-blue-700);

  /* Couleur d'accent */
  --accent: var(--primary);
  --accent-invert: var(--color-blue-300);

  /* Surface du document */
  --surface: var(--color-white);
  --on-surface: var(--color-gray-600);

  /* Niveaux de profondeur */
  --layer-1: var(--color-gray-50);
  --layer-2: var(--color-gray-100);
  --layer-3: var(--color-gray-200);

  /* Interactions */
  --link: var(--primary);
  --link-hover: var(--color-blue-700);
  --link-bold-offset: 0.005rem;

  /* États */
  --warning: var(--color-warning-500);
  --error: var(--color-error-500);
  --success: var(--color-success-500);
  --info: var(--color-info-500);
  --border-light: var(--color-gray-100);
  --border-medium: var(--color-gray-300);

  /* Tailles de police */
  --text-s: var(--text-14);
  --text-m: var(--text-16);
  --text-l: clamp(var(--text-18), 1.076rem + 0.2174vw, var(--text-20));
  --text-xl: clamp(var(--text-18), 0.978rem + 0.6522vw, var(--text-24));
  --text-2xl: clamp(var(--text-20), 1.005rem + 1.087vw, var(--text-30));
  --text-3xl: clamp(var(--text-24), 1.207rem + 1.3043vw, var(--text-36));
  --text-4xl: clamp(var(--text-30), 1.435rem + 1.9565vw, var(--text-48));
  --text-5xl: clamp(var(--text-30), 1.043rem + 3.6957vw, var(--text-64));

  /* Espacements */
  --spacing-xs: var(--spacing-4);
  --spacing-s: var(--spacing-8);
  --spacing-m: clamp(var(--spacing-24), 1.304rem + 0.8696vw, var(--spacing-32));
  --spacing-l: var(--spacing-24);
  --spacing-xl: var(--spacing-32);
}
}
@layer config{

/* -----------------------/*
 * Layouts CSS utilitaires
 * Made par Alsacréations
 * Ressources et documentation : http://bretzel.alsacreations.com/ et http://liquid.alsacreations.com/
 * Consignes : à placer dans un layer au-dessus de `reset`
 * Mise à jour : 2025-11-06
 /* ---------------------- */

/* Suppression des marges des enfants directs d'un Layout */
[data-layout] > * {
  margin-block: 0;
}

/* Stack */
[data-layout*="stack"] {
  display: grid;
  row-gap: var(--spacing-s, 0.5rem);
}

/* Cluster */
[data-layout*="cluster"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s, 0.5rem);
  align-items: start;
}

/* Autogrid */
[data-layout*="autogrid"] {
  --col-min-size: 20rem; /* taille mini de chaque colonne */
  --grid-fill: auto-fit; /* mode de remplissage */

  display: grid;
  grid-template-columns: repeat(
    var(--grid-fill),
    minmax(min(var(--col-min-size), 100%), 1fr)
  );
  gap: var(--spacing-s, 0.5rem);
}

/* Switcher */
[data-layout*="switcher"] {
  --switcher-min-size: 30rem; /* taille mini du parent */

  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s, 0.5rem);

  & > * {
    flex-basis: calc((var(--switcher-min-size) - 100%) * 999);
    flex-grow: 1;
  }
}

/* Repel */
[data-layout*="repel"] {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: var(--spacing-s, 0.5rem);
}

/* Reel */
[data-layout*="reel"] {
  --item-size: 35%; /* largeur des enfants (% du conteneur) */

  display: flex;
  max-width: 100%;
  height: auto;
  margin-inline: auto; /* reel est centré horizontalement */
  overflow-x: auto;
  gap: var(--spacing-s, 0.5rem);
  scroll-snap-type: x mandatory; /* scroll-snap sur l'axe x */
  -webkit-overflow-scrolling: touch;

  :where(& > *) {
    flex-basis: var(--item-size);
    flex-shrink: 0;
  }

  &[data-scroll="start"] > * {
    scroll-snap-align: start; /* je cale à gauche */
  }

  &[data-scroll="center"] > * {
    scroll-snap-align: center; /* je cale au centre */
  }

  &[data-scroll="end"] > * {
    scroll-snap-align: end; /* je cale à droite */
  }

  &[data-scrollbar="hidden"] {
    scrollbar-width: none; /* je masque l'ascenseur */

    &::-webkit-scrollbar {
      display: none; /* je masque l'ascenseur sur webkit */
    }
  }
}

/* Duo */
[data-layout*="duo"] {
  display: grid;
  align-content: start;
  gap: var(--spacing-s, 0.5rem);

  /* Deux colonnes si >=768px */
  @media (width >= 48rem) {
    /* Modèle par défaut = 1/2 1/2 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    /* Modèle inversé sur desktop */
    &[data-split*="reverse"] {
      & > *:first-child {
        order: 1;
      }
    }

    &[data-split*="1-1"] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    &[data-split*="2-1"] {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    &[data-split*="1-2"] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    &[data-split*="3-1"] {
      grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }

    &[data-split*="1-3"] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }

    &[data-split*="4-1"] {
      grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
    }

    &[data-split*="1-4"] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
    }

    /* "auto" = taille initiale conservée */
    &[data-split*="auto-1"] {
      grid-template-columns: auto minmax(0, 1fr);
    }

    &[data-split*="1-auto"] {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }
}

/* Boxed */
[data-layout*="boxed"] {
  --boxed-max: 80rem; /* Largeur max (1280px) */

  width: 100%;
  max-width: var(--boxed-max, 80rem);
  margin-inline: auto;

  &[data-boxed="small"] {
    --boxed-max: 64rem; /* 1024px */
  }
}

/* Liquid */
[data-layout*="liquid"] {
  --liquid-min-margin: var(--spacing-16, 1rem);
  --liquid-content: var(--spacing-2xl, 98rem);

  display: grid;
  grid-template-columns:
    [liquid-start] minmax(var(--liquid-min-margin), 1fr)
    [content-start] minmax(0, calc(var(--liquid-content) / 2))
    [half] minmax(0, calc(var(--liquid-content) / 2))
    [content-end] minmax(var(--liquid-min-margin), 1fr)
    [liquid-end];

  :where(& > *) {
    grid-column: content;
  }
}

/* Splash et autres enfants de Liquid */
[data-layout*="splash"] {
  display: grid;
  grid-column: liquid;
  grid-template-columns: inherit;

  :where(& > *) {
    grid-column: content;
  }
}

[data-layout*="splash-start"] {
  display: grid;
  grid-column: liquid-start / content-end;
  grid-template-columns: subgrid;

  :where(& > *) {
    grid-column: content;
  }
}

[data-layout*="splash-end"] {
  display: grid;
  grid-column: content-start / liquid-end;
  grid-template-columns: subgrid;

  :where(& > *) {
    grid-column: content;
  }
}

[data-layout*="splash-half-start"] {
  display: grid;
  grid-column: liquid-start / half;
  grid-template-columns: subgrid;

  :where(& > *) {
    grid-column: content-start / half;
  }
}

[data-layout*="splash-half-end"] {
  display: grid;
  grid-column: half / liquid-end;
  grid-template-columns: subgrid;

  :where(& > *) {
    grid-column: half / content-end;
  }
}

/* Modificateurs globaux */
[data-gap="xs"] {
  gap: var(--spacing-xs, 0.25rem);
}

[data-gap="s"] {
  gap: var(--spacing-s, 0.5rem);
}

[data-gap="m"] {
  gap: var(--spacing-m, 0.5rem);
}

[data-gap="l"] {
  gap: var(--spacing-l, 2rem);
}

[data-gap="xl"] {
  gap: var(--spacing-xl, 3rem);
}

[data-gap="none"] {
  gap: 0;
}

[data-justify="start"] {
  justify-content: start;
}

[data-justify="end"] {
  justify-content: end;
}

[data-justify="center"] {
  justify-content: center;
}

[data-justify="space"] {
  justify-content: space-between;
}

[data-align="start"] {
  align-content: start;
  align-items: start;
}

[data-align="end"] {
  align-content: end;
  align-items: end;
}

[data-align="center"] {
  align-content: center;
  align-items: center;
}

[data-align="stretch"] {
  align-content: stretch;
  align-items: stretch;
}
}
@layer config{

/* ============================
 * KNACSS Natives
 * Styles natifs pour éléments HTML
 * Consignes : à placer dans un layer au-dessus de `reset`
 * Mise à jour : 2026-01-21
 * ============================ */

/* ---------------------
 * Variables globales de formulaires
 * --------------------- */

/*
 * Ces variables pilotent l'ensemble des contrôles de formulaire (input, textarea, select, button)
 * Elles peuvent être surchargées individuellement sur chacun des éléments.
*/
:root {
  /* Couleur de fond des champs */
  --form-background: light-dark(var(--color-gray-50), var(--color-gray-800));

  /* Couleur du texte des champs */
  --on-form: light-dark(var(--color-gray-900), var(--color-gray-100));

  /* Espacement interne (padding) */
  --form-spacing: var(--spacing-12) var(--spacing-16);

  /* Épaisseur de bordure (par défaut 1px) */
  --form-border-width: 1px;

  /* Couleur de bordure */
  --form-border-color: var(--color-gray-400);

  /* Arrondi des bordures (border-radius) */
  --form-border-radius: var(--radius-4);

  /* Couleur de bordure spécifique pour radio/checkbox */
  --checkables-border-color: var(--color-gray-400);

  /* Taille des radio/checkbox */
  --checkable-size: 1.25em;

  /* Chevron pour fond clair (trait sombre %23222222) (le %23 remplace le #) */
  --chevron-lightmode: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23222222' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");

  /* Chevron pour fond sombre (trait clair %23FFFFFF) (le %23 remplace le #) */
  --chevron-darkmode: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
}

/* ---------------------
 * Button et liens-boutons
 * --------------------- */

button,
a:where(.btn),
input:where([type="button"], [type="reset"], [type="submit"]) {
  --button-background-color: var(--form-background, Field);
  --button-background-color-hover: oklch(
    from var(--button-background-color) calc(l * 0.9) c h
  );
  --button-background-color-active: oklch(
    from var(--button-background-color) calc(l * 0.8) c h
  );
  --button-border-color: var(--form-border-color, ButtonBorder);
  --button-border-color-hover: var(--button-border-color);
  --button-border-color-active: var(--button-border-color);
  --button-border-radius: var(--form-border-radius, 0);
  --button-border-width: var(--form-border-width, 1px);
  --button-text-color: var(--on-form, ButtonText);
  --button-text-color-hover: var(--button-text-color);
  --button-text-color-active: var(--button-text-color);
  --button-font-weight: var(--font-weight-regular, 400);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: var(--form-spacing, 12px 16px);
  transition-property: background, border, box-shadow, color;
  transition-duration: var(--transition-duration, 0.25s);
  border: 0;
  border-radius: var(--button-border-radius);
  background-color: var(--button-background-color);
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  color: var(--button-text-color);
  font: inherit;
  font-weight: var(--button-font-weight);
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;

  /* Base button */
  &:is(:not(:disabled, [disabled])) {
    &:hover,
    &:focus-visible {
      background-color: var(--button-background-color-hover);
      box-shadow: inset 0 0 0 var(--button-border-width)
        var(--button-border-color-hover);
      color: var(--button-text-color-hover);
    }

    &:active {
      background-color: var(--button-background-color-active);
      box-shadow: inset 0 0 0 var(--button-border-width)
        var(--button-border-color-active);
      color: var(--button-text-color-active);
    }
  }

  /* Primary button */
  &.btn-primary:where(:not(:disabled, [disabled])) {
    --button-background-color: var(--primary, AccentColor);
    --button-border-color: transparent;
    --button-text-color: var(--on-primary, #ffffff);
  }

  /* Secondary button */
  &.btn-secondary:where(:not(:disabled, [disabled])) {
    --button-background-color: var(--color-gray-200, GrayText);
    --button-border-color: transparent;
    --button-text-color: var(--primary, #000000);
  }

  /* Reset button */
  &.btn-reset:where(:not(:disabled, [disabled])) {
    --button-background-color: transparent;
    --button-border-color: transparent;
    --button-text-color: currentcolor;
  }

  /* States */
  &:is(:disabled, [disabled]) {
    opacity: 50%;
    cursor: not-allowed;

    & * {
      pointer-events: none;
    }
  }
}

/* --------------------
 * Details (disclosure)
 * -------------------- */

details {
  --details-padding: var(--form-spacing, 12px 16px);
  --details-border-color: var(--form-border-color, ButtonBorder);
  --details-border-color-hover: var(--details-border-color);
  --details-border-width: var(--form-border-width, 1px);
  --details-border-radius: var(--form-border-radius, 0);
  --details-background-color: var(--layer-1, Canvas);
  --details-content-border-radius: 0;
  --details-title-color: var(--on-form, FieldText);
  --details-title-color-hover: var(--details-title-color);

  border: var(--details-border-width) solid var(--details-border-color);
  border-radius: var(--details-border-radius);
  background-color: var(--details-background-color);

  /* État survol */
  &:hover,
  &:focus-visible {
    border-color: var(--details-border-color-hover);

    & summary {
      color: var(--details-title-color-hover);
    }
  }

  /* Summary (titre cliquable) */
  & summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--details-padding);
    transition: background-color;
    transition-duration: var(--transition-duration, 0.25s);
    border-radius: var(--details-border-radius);
    color: var(--details-title-color, currentcolor);
    font-weight: var(--font-weight-semibold, 600);
    list-style: none;
    cursor: pointer;
    user-select: none;

    /* Suppression du triangle par défaut */
    &::-webkit-details-marker {
      display: none;
    }

    /* Icône personnalisée */
    &::after {
      content: "";
      width: 1rem;
      height: 1rem;
      transition: rotate var(--transition-duration, 0.25s);
      background-image: var(--chevron-lightmode);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      rotate: 0deg;
    }
  }

  /* État ouvert */
  &[open] summary::after {
    rotate: 180deg;
  }

  /* Support des modes sombres pour l'icône */
  [data-theme="dark"] & {
    & summary::after {
      background-image: var(--chevron-darkmode);
    }
  }

  /* Contenu du details */
  &::details-content {
    padding: var(--form-spacing, 12px 16px);
    padding-top: 0;
    border-top: none;

    & > :first-child {
      margin-top: 0;
    }

    & > :last-child {
      margin-bottom: 0;
    }
  }
}

/* Support moderne pour les transitions fluides */
@supports (interpolate-size: allow-keywords) {
  details::details-content {
    /* État de fin de transition */
    display: none;
    height: 0;
    transition: var(--transition-duration, 0.25s) allow-discrete;
    transition-property: opacity, height, display;
    interpolate-size: allow-keywords;
  }

  details[open]::details-content {
    display: grid;
    height: auto;

    @starting-style {
      height: 0;
    }
  }
}

/* Accessibilité améliorée */
@media (prefers-reduced-motion: reduce) {
  details {
    & summary::after {
      transition: none;
    }

    &::details-content {
      transition: none;
    }
  }
}

/* --------------------
 * Dialog (modale)
 * -------------------- */

dialog {
  --dialog-background-color: var(--surface, Field);
  --dialog-text-color: var(--on-surface, CanvasText);
  --dialog-border-color: var(--form-border-color, ButtonBorder);
  --dialog-border-radius: var(--form-border-radius, 0);
  --dialog-border-width: var(--form-border-width, 1px);
  --dialog-backdrop-color: oklch(0% 0 0 / 50%);
  --dialog-padding: var(--spacing-24, 1.5rem);
  --dialog-header-padding: var(--spacing-16, 1rem) var(--spacing-24, 1.5rem);
  --dialog-footer-padding: var(--spacing-16, 1rem) var(--spacing-24, 1.5rem);
  --dialog-max-width: 32rem;
  --dialog-max-height: calc(100vh - var(--spacing-32, 2rem));

  max-width: var(--dialog-max-width);
  padding: 0;
  overflow: visible;
  border: none;
  background-color: transparent;
  color: var(--dialog-text-color);

  /* État fermé par défaut */
  &:not([open]) {
    display: none;
  }

  /* Backdrop (arrière-plan) */
  &::backdrop {
    background-color: var(--dialog-backdrop-color);
    backdrop-filter: blur(3px);
  }

  /* Animation d'ouverture */
  &[open] {
    animation: dialog-show var(--transition-duration, 0.25s) ease-out;
  }

  /* Variante petite modale */
  &.dialog-sm {
    --dialog-max-width: 24rem;
  }

  /* Variante grande modale */
  &.dialog-lg {
    --dialog-max-width: 48rem;
  }

  /* Variante pleine largeur */
  &.dialog-fullwidth {
    --dialog-max-width: calc(100vw - var(--spacing-32, 2rem));
  }
}

/* Contenu principal de la modale */
.dialog-content {
  display: grid;
  border: var(--dialog-border-width) solid var(--dialog-border-color);
  border-radius: var(--dialog-border-radius);
  background-color: var(--dialog-background-color);
}

/* En-tête de la modale */
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dialog-header-padding);
  border-bottom: 1px solid var(--dialog-border-color);
  border-radius: var(--dialog-border-radius) var(--dialog-border-radius) 0 0;
  background-color: var(--layer-1, Canvas);
  gap: var(--spacing-16, 1rem);
}

.dialog-title {
  margin: 0;
  color: var(--dialog-text-color);
  font-size: var(--text-xl, 1.25rem);
  font-weight: var(--font-weight-semibold, 600);
}

/* Bouton de fermeture */
.dialog-close {
  display: inline-grid;
  box-sizing: content-box;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 2px;
  transition: background-color var(--transition-duration, 0.25s);
  border-radius: var(--radius-full, 9999px);
  font-size: 2rem;
  place-content: center;
  place-self: center;
  aspect-ratio: 1;

  /* État survol */
  &:hover,
  &:focus-visible {
    background-color: var(--layer-2, GrayText);
  }
}

/* Corps de la modale */
.dialog-body {
  padding: var(--dialog-padding);
  overflow-y: auto;

  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }
}

/* Pied de la modale */
.dialog-footer {
  padding: var(--dialog-footer-padding);
  border-top: 1px solid var(--dialog-border-color);
  border-radius: 0 0 var(--dialog-border-radius) var(--dialog-border-radius);
  background-color: var(--layer-1, Canvas);
}

/* Animations */
@keyframes dialog-show {
  from {
    scale: 0.95;
    opacity: 0%;
  }

  to {
    scale: 1;
    opacity: 100%;
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  dialog {
    animation: none;

    &::backdrop {
      animation: none;
    }
  }
}

/* Responsive */
@media (width < 48rem) {
  dialog {
    --dialog-max-width: calc(100vw - var(--spacing-16, 1rem));
    --dialog-max-height: calc(100vh - var(--spacing-16, 1rem));
  }

  .dialog-header,
  .dialog-footer {
    padding: var(--spacing-16, 1rem);
  }

  .dialog-body {
    padding: var(--spacing-16, 1rem);
  }
}

/* --------------------
 * Hr (séparateur)
 * -------------------- */

hr {
  /* Couleur et épaisseur par défaut alignées sur les contrôles de formulaire */
  --hr-border-color: var(--form-border-color, ButtonBorder);
  --hr-border-width: var(--form-border-width, 1px);

  margin-block: var(--spacing-16, 1rem);
  border: 0;
  border-top: var(--hr-border-width) solid var(--hr-border-color);

  /* Variante couleur primaire */
  &.hr-primary {
    --hr-border-color: var(--primary, AccentColor);
  }

  /* Variante épaisseur moyenne (x2) */
  &.hr-medium {
    --hr-border-width: calc(var(--form-border-width, 1px) * 2);
  }

  /* Variante trait en vague */
  &.hr-wavy {
    /* Harmonisation avec les variables ci-dessus */
    --hr-wave-length: 16px; /* longueur d'une vague */
    --hr-wave-height: 8px; /* hauteur totale du motif */

    height: var(--hr-wave-height);
    margin-block: var(--spacing-16, 1rem);
    border: 0;

    /* La couleur vient de --hr-border-color, modifiable via .hr-primary */
    background-color: var(--hr-border-color, currentcolor);

    /* Masque SVG répétable pour obtenir un trait ondulé, coloré via background-color */
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'><path d='M0,4 C4,0 12,8 16,4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
      left center / var(--hr-wave-length) 100% repeat-x;
  }
}

/* --------------------
 * Table
 * -------------------- */

table {
  --table-border-color: var(--form-border-color, ButtonBorder);
  --table-border-width: var(--form-border-width, 1px);
  --table-layout: fixed;
  --table-border-collapse: collapse;
  --table-border-spacing: 0;
  --table-zebra: 0%;
  --table-caption-color: GrayText;

  width: 100%;
  table-layout: var(--table-layout, fixed);
  border-spacing: var(--table-border-spacing, 0);
  border-collapse: var(--table-border-collapse, collapse);
  color: var(--on-surface, CanvasText);

  /* Légende */
  & caption {
    margin-block: var(--spacing-8, 0.5rem);
    color: var(--table-caption-color);
    text-align: left;
  }

  /* Cellules */
  & th,
  & td {
    padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
    border: var(--table-border-width) solid var(--table-border-color);
    text-align: left;
    vertical-align: top;
  }

  /* En-têtes */
  & thead th {
    background-color: var(--layer-1, Canvas);
    font-weight: var(--font-weight-semibold, 600);
  }

  /* Pied de tableau */
  & tfoot th,
  & tfoot td {
    background-color: var(--layer-1, Canvas);
    font-weight: var(--font-weight-medium, 500);
  }

  /* Zébrage (conditionné par --table-zebra */
  & tbody tr:nth-child(odd) {
    background-color: oklch(
      from var(--color-black, #000000) l c h / var(--table-zebra, 0%)
    );
  }
}

/* Wrapper responsive pour permettre le scroll horizontal sur petits écrans */
.table-responsive {
  --table-min-width: 30rem; /* largeur minimale par défaut pour un tableau lisible */

  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;

  & > table {
    min-width: var(--table-min-width, 30rem);
  }
}

/* Tableau arrondi */
.table-rounded {
  --table-border-color: var(--form-border-color, ButtonBorder);
  --table-border-width: var(--form-border-width, 1px);
  --table-border-radius: var(--form-border-radius, 0.5rem);

  padding: var(--spacing-8, 0.5rem);
  border: var(--table-border-width) solid var(--table-border-color);
  border-radius: var(--table-border-radius);

  & :is(th, td) {
    border: none;
    background-color: transparent;
  }

  & thead :is(th, td),
  & tr:not(:last-child) :is(th, td) {
    border-bottom: var(--table-border-width) solid var(--table-border-color);
  }

  & tbody tr:nth-child(odd) {
    background-color: transparent;
  }
}

/* --------------------
 * Formulaires
 * (input, textarea, select, checkbox, radio, switch, range)
 * -------------------- */

/* Input
 * -------------------- */

input:not(
  [type="button"],
  [type="reset"],
  [type="submit"],
  [type="checkbox"],
  [type="radio"],
  [type="range"]
) {
  --input-background-color: var(--form-background, Field);
  --input-border-color: var(--form-border-color, ButtonBorder);
  --input-border-color-hover: var(--form-border-color);
  --input-border-radius: var(--form-border-radius, 0);
  --input-border-width: var(--form-border-width, 1px);
  --input-text-color: var(--on-form, ButtonText);
  --input-placeholder-color: GrayText;

  display: block;
  width: 100%;
  padding: var(--input-spacing, 12px 16px);
  transition-property: background, border, box-shadow, color;
  transition-duration: var(--transition-duration, 0.25s);
  border: 0;
  border-radius: var(--input-border-radius);
  background-color: var(--input-background-color);
  box-shadow: inset 0 0 0 var(--input-border-width) var(--input-border-color);
  color: var(--input-text-color);
  font: inherit;
  line-height: 1.5;

  /* État survol */
  &:hover,
  &:focus-visible {
    box-shadow: inset 0 0 0 var(--input-border-width)
      var(--input-border-color-hover);
  }

  /* État désactivé */
  &:disabled {
    opacity: 50%;
    cursor: not-allowed;
  }

  /* État invalide après interaction utilisateur */
  &:user-invalid {
    --input-border-color: var(--error);
    --input-border-width: 2px;
  }

  /* Placeholder */
  &::placeholder {
    opacity: 100%;
    color: var(--input-placeholder-color);
  }
}

/* Champ de recherche */
:where(input[type="search"]) {
  appearance: textfield;

  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
  &::-webkit-search-results-button,
  &::-webkit-search-results-decoration {
    appearance: none;
  }
}

/* Champs numériques */
:where(input[type="number"]) {
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  appearance: textfield;
}

/* Champ de date et heure */
:where(input[type="date"], input[type="time"], input[type="datetime-local"]) {
  cursor: pointer;

  /* Styles pour WebKit */
  &::-webkit-calendar-picker-indicator {
    transition: opacity var(--transition-duration, 0.25s);
    opacity: 60%;
    cursor: pointer;

    &:hover,
    &:focus-visible {
      opacity: 100%;
    }
  }
}

/* Champ de fichier */
:where(input[type="file"]) {
  padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
  cursor: pointer;

  &::file-selector-button {
    margin-right: var(--spacing-12, 0.75rem);
    padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
    transition: background-color var(--transition-duration, 0.25s);
    border: 0;
    border-radius: var(--input-border-radius);
    background-color: var(--primary, AccentColor);
    color: var(--on-primary, #ffffff);
    font: inherit;
    cursor: pointer;

    /* État survol */
    &:hover,
    &:focus-visible {
      background-color: oklch(
        from var(--primary, AccentColor) calc(l * 0.9) c h
      );
    }
  }

  /* Support WebKit */
  &::-webkit-file-upload-button {
    margin-right: var(--spacing-12, 0.75rem);
    padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
    transition: background-color var(--transition-duration, 0.25s);
    border: 0;
    border-radius: var(--input-border-radius);
    background-color: var(--primary, AccentColor);
    color: var(--on-primary, #ffffff);
    font: inherit;
    cursor: pointer;

    /* État survol */
    &:hover,
    &:focus-visible {
      background-color: oklch(
        from var(--primary, AccentColor) calc(l * 0.9) c h
      );
    }
  }
}

.form-group:has(input:disabled) label {
  opacity: 50%;
  cursor: not-allowed;
}

/* Select
 * -------------------- */

select {
  --select-background-color: var(--form-background, Field);
  --select-border-color: var(--form-border-color, ButtonBorder);
  --select-border-color-hover: var(--select-border-color);
  --select-border-radius: var(--form-border-radius, 0);
  --select-border-width: var(--form-border-width, 1px);
  --select-text-color: var(--on-form, FieldText);
  --select-optgroup-color: GrayText;

  display: block;
  width: 100%;
  padding: var(--form-spacing, 12px 16px);
  padding-right: calc(var(--spacing-32, 2rem) + var(--spacing-12, 0.75rem));
  transition-property: background-color, border, box-shadow, color;
  transition-duration: var(--transition-duration, 0.25s);
  border: 0;
  border-radius: var(--select-border-radius);
  background-color: var(--select-background-color);
  background-image: var(--chevron-lightmode);
  background-repeat: no-repeat;
  background-position: right var(--spacing-16, 1rem) center;
  background-size: 1rem;
  box-shadow: inset 0 0 0 var(--select-border-width) var(--select-border-color);
  color: var(--select-text-color);
  font: inherit;
  line-height: 1.5;
  cursor: pointer;
  appearance: none;
  -webkit-user-select: none;
  user-select: none;

  /* État survol */
  &:hover,
  &:focus-visible {
    box-shadow: inset 0 0 0 var(--select-border-width)
      var(--select-border-color-hover);
  }

  /* État désactivé */
  &:disabled {
    opacity: 50%;
    background-image: var(--chevron-lightmode);
    cursor: not-allowed;
  }

  /* Support des modes sombres pour les flèches */
  [data-theme="dark"] & {
    &:not(:disabled) {
      background-image: var(--chevron-darkmode);
    }

    &:disabled {
      background-image: var(--chevron-darkmode);
    }
  }

  /* Sélection multiple */
  &[multiple] {
    padding-right: var(--spacing-16, 1rem);
    background-image: none;
    cursor: default;
  }
}

/* Optgroups */
:where(optgroup) {
  color: var(--select-optgroup-color);
  font-weight: var(--font-weight-bold, 700);
}

/* Textarea
 * -------------------- */

textarea {
  --textarea-background-color: var(--form-background, Field);
  --textarea-border-color: var(--form-border-color, ButtonBorder);
  --textarea-border-color-hover: var(--textarea-border-color);
  --textarea-border-radius: var(--form-border-radius, 0);
  --textarea-border-width: var(--form-border-width, 1px);
  --textarea-text-color: var(--on-form, ButtonText);
  --textarea-counter-color: GrayText;

  display: block;
  width: 100%;
  min-height: 5lh;
  padding: var(--form-spacing, 12px 16px);
  transition-property: background, border, box-shadow, color;
  transition-duration: var(--transition-duration, 0.25s);
  border: 0;
  border-radius: var(--textarea-border-radius);
  background-color: var(--textarea-background-color);
  box-shadow: inset 0 0 0 var(--textarea-border-width)
    var(--textarea-border-color);
  color: var(--textarea-text-color);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  field-sizing: content;

  /* État survol */
  &:hover,
  &:focus-visible {
    box-shadow: inset 0 0 0 var(--textarea-border-width)
      var(--textarea-border-color-hover);
  }

  /* État désactivé */
  &:disabled {
    opacity: 50%;
    resize: none;
    cursor: not-allowed;
  }

  /* État invalide après interaction utilisateur */
  &:user-invalid {
    --textarea-border-color: var(--error);
    --textarea-border-width: 2px;
  }

  /* Placeholder */
  &::placeholder {
    opacity: 100%;
    color: var(--on-surface);
  }
}

/* Textarea désactivés */
.form-group:has(textarea:disabled) label {
  opacity: 50%;
  cursor: not-allowed;
}

/* Compteur de caractères */
.character-counter {
  min-width: max-content;
  margin-left: auto;
  color: var(--textarea-counter-color);
  font-size: var(--text-14, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  text-align: right;

  /* États du compteur selon le pourcentage restant */
  &.warning {
    color: var(--warning, #f97316);
  }

  &.danger {
    color: var(--error, #ef4444);
    font-weight: var(--font-weight-semibold, 600);
  }
}

/* Adaptations responsive */
@media (width < 48rem) {
  .form-group-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .character-counter {
    margin-left: 0;
    text-align: left;
  }
}

/* Checkbox
 * -------------------- */

[type="checkbox"]:not([role="switch"]) {
  --checkbox-background-color: var(--form-background, Field);
  --checkbox-checked-color: var(--primary, AccentColor);
  --checkbox-border-color: var(--checkables-border-color, ButtonBorder);
  --checkbox-border-color-hover: var(--checkbox-border-color);
  --checkbox-border-radius: var(--form-border-radius, 0);
  --checkbox-border-width: var(--form-border-width, 1px);

  display: inline-grid;
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--checkable-size, 1.25rem);
  height: var(--checkable-size, 1.25rem);
  margin: 0;
  transition-property: background, border, box-shadow, color;
  transition-duration: var(--transition-duration, 0.25s);
  border: 0;
  border-radius: var(--checkbox-border-radius);
  background-color: var(--checkbox-background-color);
  box-shadow: inset 0 0 0 var(--checkbox-border-width)
    var(--checkbox-border-color);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  appearance: none;

  /* États */
  &:is(:checked, :indeterminate) {
    background-color: var(--checkbox-checked-color);
    box-shadow: inset 0 0 0 var(--checkbox-border-width) transparent;
  }

  /* État survol */
  &:hover,
  &:focus-visible {
    box-shadow: inset 0 0 0 var(--checkbox-border-width)
      var(--checkbox-border-color-hover);
  }

  /* État coché */
  &:checked::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--on-primary, #ffffff);
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>')
      center no-repeat;
  }

  &:indeterminate::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: currentcolor;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M431 256c0 17.7-14.3 32-32 32H49c-17.7 0-32-14.3-32-32s14.3-32 32-32h350c17.7 0 32 14.3 32 32z"/></svg>')
      center no-repeat;
  }

  /* Checkbox désactivé */
  &:is(:disabled, [disabled]) {
    opacity: 50%;
    cursor: not-allowed;
  }
}

.form-group:has([type="checkbox"]:disabled) label {
  opacity: 50%;
  cursor: not-allowed;
}

/* Radio
 * -------------------- */

[type="radio"] {
  --radio-background-color: var(--form-background, Field);
  --radio-border-color: var(--checkables-border-color, ButtonBorder);
  --radio-border-color-hover: var(--radio-border-color);
  --radio-border-radius: var(--radius-full, 9999px);
  --radio-border-width: var(--form-border-width, 1px);
  --radio-checked-color: var(--primary, AccentColor);
  --radio-checked-border-color: var(--color-white, #ffffff);

  display: inline-grid;
  width: var(--checkable-size, 1.25em);
  height: var(--checkable-size, 1.25em);
  margin: 0;
  padding: 0;
  transition-property: background, border, box-shadow, color;
  transition-duration: var(--transition-duration, 0.25s);
  border: 0;
  border-radius: var(--radio-border-radius);
  background-color: var(--radio-background-color);
  box-shadow: inset 0 0 0 var(--radio-border-width) var(--radio-border-color);
  cursor: pointer;
  appearance: none;
  place-content: center;

  &::before {
    content: "";
    width: calc(var(--checkable-size, 1.25em) / 1);
    height: calc(var(--checkable-size, 1.25em) / 1);
    transition-property: scale;
    transition-duration: var(--transition-duration, 0.25s);
    border: 2px solid var(--radio-checked-border-color);
    border-radius: var(--radius-full, 9999px);
    background-color: var(--radio-checked-color);
    scale: 0;
  }

  /* État survol */
  &:hover,
  &:focus-visible {
    box-shadow: inset 0 0 0 var(--radio-border-width)
      var(--radio-border-color-hover);
  }

  /* État coché */
  &:checked {
    &::before {
      scale: 0.9;
    }
  }

  /* Radio désactivé */
  &:is(:disabled, [disabled]) {
    opacity: 50%;
    cursor: not-allowed;
  }
}

.form-group:has([type="radio"]:disabled) label {
  opacity: 50%;
  cursor: not-allowed;
}

/* Switch
 * -------------------- */

[role="switch"] {
  --switch-width: 2.5rem;
  --switch-height: 1.5rem;
  --switch-track-color: var(--form-background, ButtonFace);
  --switch-track-color-checked: var(--primary, AccentColor);
  --switch-thumb-color: ButtonBorder;
  --switch-border-radius: var(--radius-full, 9999px);
  --switch-border-color: var(--checkables-border-color, ButtonBorder);
  --switch-border-width: 1px;

  display: inline-flex;
  align-items: center;
  justify-content: start;
  width: var(--switch-width);
  height: var(--switch-height);
  margin: 0;
  padding: 0;
  transition-property: background;
  transition-duration: var(--transition-duration, 0.25s);
  border: var(--switch-border-color) solid var(--switch-border-width);
  border-radius: var(--switch-border-radius);
  background-color: var(--switch-track-color);
  cursor: pointer;
  appearance: none;

  &::before {
    content: "";
    transition-property: flex-grow;
    transition-duration: var(--transition-duration, 0.25s);
  }

  /* Indicateur du switch */
  &::after {
    content: "";
    flex-shrink: 0;
    width: var(--switch-height);
    height: var(--switch-height);
    transition-property: background, scale;
    transition-duration: var(--transition-duration, 0.25s);
    border-radius: var(--switch-border-radius);
    background-color: ButtonBorder;
    scale: 0.6;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path fill="currentcolor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0%;
  }

  /* État coché */
  &:checked::before {
    flex-grow: 1;
  }

  /* État coché (variante) */
  &[data-variant="check"]:checked {
    border-color: var(--switch-track-color-checked);
    background-color: var(--switch-track-color-checked);

    &::before {
      flex-grow: 1;
    }

    &::after {
      scale: 0.8;
      background-color: var(--on-primary, #ffffff);
      background-size: 70%;
    }
  }

  /* État désactivé */
  &:disabled {
    opacity: 50%;
    cursor: not-allowed;

    &::after {
      box-shadow: none;
    }
  }
}

.form-group:has([type="checkbox"][role="switch"]:disabled) label {
  opacity: 50%;
  cursor: not-allowed;
}

/* Range
 * -------------------- */

.range {
  position: relative;
  padding-bottom: 2rem; /* Espace pour la valeur affichée */
}

[type="range"] {
  --range-thumb-size: 24px;
  --range-thumb-border-width: 4px;
  --range-thumb-border-color: var(--color-white, #ffffff);
  --range-color: var(--primary, AccentColor);
  --range-track-color: var(--form-border-color, ButtonBorder);
  --range-track-height: calc(var(--form-border-width, 1px) + 2px);

  width: 100%;
  overflow: hidden;
  background: #ffffff00;
  color: var(--range-color);
}

/* WebKit */
[type="range"],
[type="range"]::-webkit-slider-runnable-track,
[type="range"]::-webkit-slider-thumb {
  height: var(--range-thumb-size);
  transition: all ease 100ms;
  appearance: none;
}

[type="range"]::-webkit-slider-runnable-track,
[type="range"]::-webkit-slider-thumb {
  position: relative;
}

[type="range"]::-webkit-slider-thumb {
  --thumb-radius: calc((var(--range-thumb-size) * 0.5) - 1px);
  --clip-top: calc(
    (var(--range-thumb-size) - var(--range-track-height)) * 0.5 - 0.5px
  );
  --clip-bottom: calc(var(--range-thumb-size) - var(--clip-top));
  --clip-further: calc(100% + 1px);
  --box-fill: calc(-100vmax - var(--thumb-width, var(--range-thumb-size))) 0 0
    100vmax currentcolor;

  width: var(--thumb-width, var(--range-thumb-size));
  border: var(--range-thumb-border-width) solid var(--range-thumb-border-color);
  border-radius: var(--thumb-width, var(--range-thumb-size));
  background: linear-gradient(currentcolor 0 0) scroll no-repeat left center /
    50% calc(var(--range-track-height) + 1px);
  background-color: currentcolor;
  box-shadow: var(--box-fill);
  filter: brightness(100%);
  clip-path: polygon(
    100% -1px,
    var(--range-track-height) -1px,
    0 var(--clip-top),
    -100vmax var(--clip-top),
    -100vmax var(--clip-bottom),
    0 var(--clip-bottom),
    var(--range-track-height) 100%,
    var(--clip-further) var(--clip-further)
  );
}

[type="range"]:hover::-webkit-slider-thumb {
  cursor: ew-resize;
}

[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(var(--range-track-color) 0 0) scroll no-repeat
    center / 100% calc(var(--range-track-height) + 1px);
}

[type="range"]:disabled::-webkit-slider-thumb {
  opacity: 50%;
  cursor: not-allowed;
}

/* Firefox */
[type="range"],
[type="range"]::-moz-range-track,
[type="range"]::-moz-range-thumb {
  height: var(--range-thumb-size);
  transition: all ease 100ms;
  appearance: none;
}

[type="range"]::-moz-range-track,
[type="range"]::-moz-range-thumb,
[type="range"]::-moz-range-progress {
  background: #ffffff00;
}

[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb-width, var(--range-thumb-size));
  border: var(--range-thumb-border-width) solid var(--range-thumb-border-color);
  border-radius: var(--thumb-width, var(--range-thumb-size));
  background: currentcolor;
  cursor: ew-resize;
}

[type="range"]::-moz-range-track {
  width: 100%;
  background: var(--range-track-color);
}

[type="range"]::-moz-range-progress {
  transition-delay: 30ms;
  background: currentcolor;
  appearance: none;
}

[type="range"]::-moz-range-track,
[type="range"]::-moz-range-progress {
  height: calc(var(--range-track-height) + 1px);
  border-radius: var(--range-track-height);
}

[type="range"]:disabled::-moz-range-thumb {
  opacity: 50%;
  cursor: not-allowed;
}

.range-value {
  position: absolute;
  left: 0;
  padding: 4px 8px;
  border-radius: var(--form-border-radius, 4px);
  background-color: var(--form-background, ButtonFace);
  font-size: var(--text-14, 0.875rem);
  translate: 0 1.4rem;
}

@supports (position-anchor: initial) {
  [data-range-output="anchor"] ::-webkit-slider-thumb {
    anchor-name: --thumb;
  }

  [data-range-output="anchor"] ::-moz-range-thumb {
    anchor-name: --thumb;
  }

  [data-range-output="anchor"] .range-value {
    position-anchor: --thumb;
    position-area: bottom;
    translate: 0 0.5rem;
  }
}
}
/* Scroll */
html {
  scroll-behavior: smooth;
}
/* Global */
main {
  flex-grow: 1;
}
body {
  display: flex;
  flex-direction: column;
}
:root :where(.is-layout-constrained) > * {
  margin-block: 0 var(--spacing-m);
}
[data-layout*="liquid"] {
  --liquid-min-margin: clamp(
    var(--spacing-16),
    0.609rem + 1.7391vw,
    var(--spacing-32)
  );
  --liquid-content: var(--spacing-1440);
}
/* Équivaut à data-layout*="splash"] pour pour les blocs Gutenberg */
.alignfull {
  display: grid;
  grid-column: liquid !important;
  grid-template-columns: inherit;

  :where(& > *) {
    grid-column: content;
  }
}
.wp-block-media-text__media {
  overflow: hidden;
  border-radius: var(--radius-24);
}
.wp-block-media-text {
  row-gap: var(--spacing-32);
}
/* Rajoute une marge inférieure - #64 */
[data-layout] > p,
[data-layout] > ul {
  margin-bottom: var(--spacing-20);
}
[data-layout] > :last-child {
  margin-bottom: 0;
}
/* Block custom */
/* TODO: reprendre les bonnes variables avec les tokens */
.error-404 {
  display: grid;
  position: relative;
  padding: var(--spacing-128) var(--spacing-16);
  background-color: var(--primary);
  color: var(--color-white);
  place-items: center;
  text-align: center;
  gap: var(--spacing-32);
}
.error-404-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.error-404-logo > * {
  flex-shrink: 0;
}
.error-404-logo-img {
  --logo-min-size: 7.9375rem; /* 127px */
  --logo-max-size: 20.9375rem; /* 335px */

  width: clamp(
    var(--logo-min-size),
    2.851rem + 22.6087vw,
    var(--logo-max-size)
  );
  height: auto;
}
.error-404-number {
  color: var(--secondary);
  font-family: var(--wp--preset--font-family--capriola);

  --font-min-size: 12.5rem; /* 200px */
  --font-max-size: 25rem; /* 400px */

  font-size: clamp(
    var(--font-min-size),
    7.609rem + 21.7391vw,
    var(--font-max-size)
  );
  font-weight: 400;
  line-height: 1;
}
/* Permet de rajouter un espace en bas qui passe sous le footer */
.error-404::after {
  --after-height: var(--spacing-24);

  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: calc(0rem - var(--after-height));
  left: 0;
  width: 100%;
  height: var(--after-height);
  background-color: var(--primary);
}
@layer components{
/* Bouton "Retour en haut" */
.arrow-up {
  visibility: hidden;
  position: fixed;
  z-index: var(--z-above-all-level);
  right: var(--spacing-16);
  bottom: var(--spacing-16);
  width: var(--spacing-40);
  height: var(--spacing-40);
  padding: var(--spacing-8);
  transition: var(--transition-duration) ease;
  transition-property: opacity, translate, visibility, background-color, color;
  will-change: opacity, translate, visibility, background-color, color;
  border: var(--spacing-1) solid var(--color-blue-700);
  border-radius: var(--radius-full);
  opacity: 0%;
  background: var(--color-white);
  color: var(--color-blue-700) !important;
  cursor: pointer;
  translate: var(--spacing-0) var(--spacing-8); /* état caché initial (translate Y) */

  &:hover {
    background-color: var(--color-blue-700);
    color: var(--color-white) !important;
  }
}

/* Icône */
.arrow-up .arrow-up-icon {
  display: block;
  width: var(--spacing-24);
  height: var(--spacing-24);
}

/* État visible */
.arrow-up.is-visible {
  visibility: visible;
  opacity: 100%;
  translate: var(--spacing-0) var(--spacing-0);
}

/* Respect des préférences de mouvement */
@media (prefers-reduced-motion: reduce) {
  .arrow-up,
  .arrow-up * {
    transition: none !important;
    animation: none !important;
  }
}

.is-on-dark-background {
  /* Ou ajouter un contour */
  outline: 2px solid var(--color-white);
  outline-offset: -2px;

  /* Exemple : inverser les couleurs */
  background-color: var(--color-primary);
  color: var(--color-white) !important;
}
}
/* Les filtres */
.blog-filters {
  display: grid;
  gap: var(--spacing-24);
  grid-template-rows: repeat(5, max-content);

  h3 {
    margin-bottom: 0 !important;
    color: var(--color-blue-700);
    font-size: var(--text-20);
    text-align: center;

    @media (width >= 64rem) {
      font-size: var(--text-24);
      text-align: left;
    }
  }

  .btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-12) var(--spacing-20);
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    border-radius: var(--radius-full);
    background: var(--color-yellow-500);
    box-shadow: none;
    color: var(--color-blue-700);
    font-size: var(--text-16);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    text-align: center;
    gap: var(--spacing-8);
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-400);
    }
  }

  .btn-reset {
    padding: 0;
    border-bottom: 1px solid var(--color-blue-500);
    border-radius: 0;
    color: var(--color-blue-500);
    font-size: var(--text-16);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;

    &:hover,
    &:active,
    &:focus {
      color: var(--color-blue-700);
    }
  }
}
.blog-filters .wrapper-filter-group {
  padding: var(--spacing-8) var(--spacing-16) var(--spacing-16)
    var(--spacing-16);
  border-radius: var(--radius-24);
  background-color: var(--color-gray-50);

  fieldset {
    padding: 0;
  }

  legend {
    padding: 0;
    color: var(--color-blue-500);
    font-size: var(--text-16);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
  }

  .mobile-helper-text {
    color: var(--color-blue-700);
    font-size: var(--text-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
  }
}
.blog-filters .filter-group {
  display: grid;
  gap: var(--spacing-8);
  max-height: 8.5rem; /* Affiches env. 3 éléments */
  overflow-y: scroll;

  @media (width >= 64rem) {
    max-height: none;
    overflow-y: visible;

    legend {
      margin-bottom: var(--spacing-16);
    }

    .mobile-helper-text {
      display: none;
    }
  }
}
.filter-group .filter-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding-left: var(--spacing-1);

  /* Custom des styles de natives.css */
  input {
    background-color: var(--color-white);
    box-shadow: var(--color-blue-700) 0 0 0 1px;

    &::before {
      background-color: var(--color-blue-700);
    }

    &:checked {
      &::before {
        scale: 0.7;
      }
    }
  }

  label {
    color: var(--color-gray-700);
    font-size: var(--text-16);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
  }
}
.blog-page {
  display: grid;
  margin-block: var(--spacing-56);
  row-gap: var(--spacing-56);

  @media (width >= 48rem) {
    row-gap: var(--spacing-80);
  }

  /* L'article à la une */
  .featured-article {
    display: grid;
    grid-template-columns: auto;
    gap: var(--spacing-56);
    justify-items: center;

    h2 {
      margin-bottom: 0 !important;
      font-size: var(--text-24);

      @media (width >= 64rem) {
        font-size: var(--text-36);
      }
    }
  }

  /* Les articles */
  .articles {
    display: grid;
    gap: var(--spacing-40);

    .articles-title {
      margin-bottom: 0 !important;
      font-size: var(--text-24);
      text-align: center;

      @media (width >= 64rem) {
        font-size: var(--text-36);
        text-align: left;
      }
    }
  }

  /* Layout des articles */
  .blog-layout {
    display: grid;
    gap: var(--spacing-32);

    @media (width >= 80rem) {
      grid-template-columns: 270px 1fr;
    }

    /* Grille des articles */
    .blog-article-list {
      display: grid;
      gap: var(--spacing-20);
      grid-template-columns: 1fr;

      @media (width >= 48rem) {
        grid-template-columns: 1fr 1fr;
      }

      @media (width >= 64rem) {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }
  }
}
:root {
  /* Formulaires */

  /* Ecrase les variables de natives.css */

  /* Couleur de fond des champs */
  --form-background: var(--color-white);

  /* Couleur du texte des champs */
  --on-form: var(--color-blue-700);

  /* Espacement interne (padding) */
  --form-spacing: var(--spacing-12) var(--spacing-16);

  /* Épaisseur de bordure (par défaut 1px) */
  --form-border-width: 1px;

  /* Couleur de bordure */
  --form-border-color: var(--color-blue-700);

  /* Arrondi des bordures (border-radius) */
  --form-border-radius: var(--radius-24);

  /* Couleur de bordure spécifique pour radio/checkbox */
  --checkables-border-color: var(--color-blue-700);

  /* Taille des radio/checkbox */
  --checkable-size: 1.25em;

  /* Chevron pour fond clair (trait sombre %23222222) (le %23 remplace le #) */
  --chevron-lightmode: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%2311448c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");

  /* Chevron pour fond sombre (trait clair %23FFFFFF) (le %23 remplace le #) */
  --chevron-darkmode: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%2311448c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
}
.hbspt-form {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-20);
  border-radius: var(--radius-16);
  background-color: var(--color-blue-100);

  & form,
  & .hs-form {
    display: flex;
    flex-direction: column;
  }
}
.hbspt-form,
.hs-form {
  width: 100%;
}
.hbspt-form .hs-form fieldset {
  max-width: none;
}
fieldset input[type="text"],
fieldset input[type="email"],
fieldset input[type="tel"],
fieldset textarea,
fieldset select,
.hs-input:not(
  [type="checkbox"],
  [type="radio"],
  [type="button"],
  [type="submit"],
  [type="reset"]
) {
  width: 100% !important;
}
fieldset input[type="radio"] {
  width: auto !important;
}
label {
  color: var(--color-blue-700);
}
label:has(+ input),
label:has(+ textarea),
label:has(+ select),
label:has(+ div.input),
label:has(+ legend.hs-field-desc) {
  margin-bottom: var(--spacing-8);
}
input:not(
  [type="button"],
  [type="reset"],
  [type="submit"],
  [type="checkbox"],
  [type="radio"],
  [type="range"]
) {
  width: 100%;

  &:user-invalid,
  &:user-valid {
    --input-border-width: 1px;
  }

  &:user-invalid,
  &.error {
    --input-border-color: var(--color-red-700);
    --on-form-control: var(--color-red-700);

    /* --on-form-background: var(--color-red-100); */
    --form-border-color: var(--color-red-700);
  }
}
/* Message d'erreur Hubspot */
.hs-error-msgs *,
:not(.wpcf7-form).invalid *,
.error * {
  color: var(--color-red-700) !important;
}
.inputs-list.multi-container,
.inputs-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style-type: none;
  gap: var(--spacing-8);
}
/* Bouton submit */
.wpcf7-form input[type="submit"],
.hs_submit input[type="submit"] {
  padding: var(--spacing-12) var(--spacing-20);
  gap: var(--spacing-8, 8px);

  --button-border-color: var(--secondary) !important;

  background-color: var(--secondary) !important;
  color: var(--on-secondary) !important;

  &:hover,
  &:focus {
    background-color: var(--color-yellow-400) !important;
  }
}
/* Radio Button */
.hs-form-radio-display {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding-left: var(--spacing-1);

  /* Custom des styles de natives.css */
  input {
    background-color: var(--color-white);
    box-shadow: var(--color-blue-700) 0 0 0 1px;

    &::before {
      background-color: var(--color-blue-700);
    }

    &:checked {
      &::before {
        scale: 0.7;
      }
    }
  }

  span {
    color: var(--color-gray-700);
    font-size: var(--text-16);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
  }
}
/* Checkbox */
input[type="checkbox"],
.hs-input[type="checkbox"] {
  --checkbox-checked-color: var(--color-blue-700);
  --checkbox-border-radius: var(--radius-4);

  width: var(--spacing-20) !important;
  height: var(--spacing-20) !important;
  margin-right: var(--spacing-8);
  border-radius: var(--radius-4);
  appearance: none;
}
.hs-form-booleancheckbox-display,
.hs-form-checkbox-display {
  /* display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding-left: var(--spacing-1); */

  span {
    color: var(--color-gray-700);
    font-size: var(--text-16);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
  }
}
fieldset .hs-form-field legend.hs-field-desc,
.wpcf7-form label .hs-field-desc {
  display: inline-block;
  width: fit-content;
  color: var(--color-blue-700);
  font-size: var(--text-14);
}
/* Text libre Hubspot */
.hs-richtext {
  color: var(--color-blue-700);
}
fieldset:has(.hs-email_du_rd),
fieldset:has(.hs-email_2_dpt),
fieldset:has(.hs-num_dpt_form) {
  display: none;
}
.hs-form-field,
.legal-consent-container {
  margin-bottom: 16px;
}
.hs-form-booleancheckbox-display {
  width: 100%;
}
/* Style CF7 */
.wpcf7-form {
  label:has(input),
  label:has(textarea),
  label:has(select),
  label:has(div.input) {
    width: 100%;
  }
}
.wpcf7-form-control {
  margin-top: var(--spacing-8);
}
.wpcf7-form .form-details {
  margin-top: 0;
  color: var(--color-blue-700);
  font-size: var(--text-14);
}
.wpcf7-form label {
  margin-bottom: var(--spacing-16);
}
.wpcf7-not-valid-tip {
  margin-top: var(--spacing-8);
}
.wpcf7-form .form-details {
  margin-top: var(--spacing-8);
}
@layer components{
/* Fil d'ariane */
.breadcrumbs-container {
  grid-column: content-start / content-end;
  background-color: var(--color-white);

  @media (width >= 80rem) {
    grid-column: content-start / half;
  }
}

.breadcrumb-nav {
  padding-block: var(--spacing-12);

  .breadcrumb-list .breadcrumb-list-item {
    &:not(:last-child)::after {
      content: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='9'%20height='9'%20fill='none'%20viewBox='0%200%209%209'%3e%3cpath%20fill='%23fec700'%20d='m8.395%205.3-7.11%203.129a.9.9%200%200%201-.379.096q-.325%200-.492-.378l-.228-.544a.7.7%200%200%201-.062-.264q.018-.378.44-.563l5.985-2.47-6.135-2.54q-.413-.175-.413-.553%200-.159.07-.343L.282.334Q.405%200%20.757%200q.166%200%20.378.097l7.224%203.26q.65.3.65.985%200%20.694-.614.958'/%3e%3c/svg%3e");
      margin: var(--spacing-0) var(--spacing-s);
      white-space: nowrap; /* éviter cassure autour du séparateur */
      gap: var(--spacing-s);
    }
  }

  .breadcrumb-list .breadcrumb-list-item a {
    &:hover {
      color: var(--color-blue-700);
      text-decoration: none !important;
    }
  }
}
}
.footer {
  position: relative;
  z-index: var(--z-above-page-level);
  flex-direction: column;
  row-gap: var(--spacing-40);
  padding-block: var(--spacing-32);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  background-color: var(--color-blue-700);
  color: var(--color-white);
  text-align: center;

  @media (width >= 48rem) {
    row-gap: var(--spacing-48);
  }

  @media (width >= 80rem) {
    padding: var(--spacing-56) var(--spacing-32) var(--spacing-32)
      var(--spacing-32);
  }

  .menu-item {
    list-style: none;
  }

  .menu-item a {
    text-decoration: none;
  }
}
.footer-title {
  margin-bottom: var(--spacing-16);
  color: var(--secondary);
  font-size: var(--text-20);
  font-weight: var(--font-weight-600);
}
.footer-main {
  display: grid;
  grid-template-areas:
    "a"
    "c"
    "b";
  gap: var(--spacing-32);

  .footer-links {
    display: flex;
    grid-area: b;
    flex-direction: column;
    gap: var(--spacing-32);
  }

  @media (width >= 48rem) {
    grid-template-areas:
      "a b"
      "c b";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    text-align: left;
  }

  @media (width >= 80rem) {
    grid-template-areas: "a b c";
    grid-template-columns: 320px 1fr 320px;
    grid-template-rows: auto;

    .footer-links {
      /* display: grid;
    grid-template-columns: 1fr 1fr; */
      flex-direction: row;
      justify-content: center;
      gap: var(--spacing-40);
    }
  }

  .footer-intro {
    grid-area: a;
  }

  .footer-image {
    display: flex;
    grid-area: c;
    flex-direction: column;
    align-items: center;

    @media (width >= 48rem) {
      align-items: start;
    }

    @media (width >= 80rem) {
      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .menu {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: var(--spacing-16);
  }

  .menu-social {
    align-items: center;

    @media (width >= 48rem) {
      align-items: start;
    }

    .menu-social-icons {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: var(--spacing-8);

      @media (width >= 48rem) {
        justify-content: start;
      }
    }

    .link-secondary {
      display: block;
      padding: 9px;
      border: 1px solid var(--color-white);
      border-radius: var(--radius-full);

      &:hover,
      &:focus,
      &:active {
        background-color: var(--color-white);
      }
    }

    .link-secondary:hover img,
    .link-secondary:focus img,
    .link-secondary:active img {
      filter: brightness(0) saturate(100%) invert(17%) sepia(94%)
        saturate(1847%) hue-rotate(208deg) brightness(91%) contrast(96%);
    }

    .link-secondary img {
      display: block;
      width: 20px;
      height: 20px;
    }

    .menu-social-cta {
      width: fit-content;
    }
  }
}
.footer-bottom .menu {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 0;

  .menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: var(--text-24);
  }

  .menu-item:not(:last-child) a::after {
    content: "●";
    display: inline-block;
    flex-shrink: 0;
    width: fit-content;
    margin: 0 var(--spacing-16);
    color: var(--color-yellow-500);
    font-size: var(--text-10);
    line-height: var(--text-24);
    vertical-align: top;
  }
}
@layer components{
/* Article à la une */
.featured-article {
  .blog-card {
    width: 100%;

    @media (width >= 64rem) {
      grid-template-areas:
        "image label"
        "image title"
        "image date"
        "image permalink";
      grid-template-columns: 230px 1fr;
      grid-template-rows: 1fr min-content min-content 1fr;
      row-gap: var(--spacing-8);
      min-width: 600px;
      max-width: 800px;
    }
  }

  .blog-card .blog-post-image {
    grid-area: image;
    margin-bottom: 0;
  }

  .blog-card .blog-post-image img {
    @media (width >= 64rem) {
      height: 100%;
      min-height: 224px;
    }
  }

  .blog-card .blog-post-title {
    grid-area: title;
  }

  .blog-card .post-categories {
    grid-area: label;
    align-content: end;
  }

  .blog-card .post-date {
    grid-area: date;
  }

  .blog-card .blog-permalink {
    grid-area: permalink;
  }
}

/* Card classique */
.blog-card {
  display: grid;
  grid-template-areas: "image" "label" "title" "date" "permalink";
  grid-template-rows: max-content auto max-content max-content auto;
  border: var(--spacing-1) solid var(--color-blue-300);
  border-radius: var(--radius-24);
  background: var(--color-white);
  gap: var(--spacing-16);
  text-decoration: none !important;

  &:hover {
    text-shadow: none !important;
  }

  &:focus-within {
    /* Effet identique au hover sur le titre et le permalien */
    .blog-post-title a {
      text-shadow:
        var(--link-bold-offset, 0.005rem) 0 currentcolor,
        calc(var(--link-bold-offset, 0.005rem) * -1) 0 currentcolor;
    }
  }

  &:has(.blog-post-title a:focus) .blog-permalink,
  &:has(.blog-permalink:focus) .blog-permalink {
    background: var(--color-blue-700);

    .blog-permalink-icon {
      filter: brightness(0) invert(1);
    }
  }
}

/* Miniature */
.blog-card .blog-post-image {
  margin-bottom: var(--spacing-8);
}

.blog-card .blog-post-image img {
  width: 100%;
  height: auto;
  max-height: 250px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-24);
  object-fit: cover;
}

/* Labels */
.blog-card .post-categories {
  padding: 0 var(--spacing-20) 0 var(--spacing-20);
}

/* Titre */
.blog-card .blog-post-title {
  display: -webkit-box;
  grid-area: title;
  margin-bottom: 0 !important;
  padding: 0 var(--spacing-20) 0 var(--spacing-20);
  overflow: hidden;
  color: var(--color-blue-700) !important;
  font-size: var(--text-20) !important;
  line-height: 150%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  a {
    display: block;
    color: inherit !important;
    text-decoration: none !important;
  }
}

/* Date */
.blog-post-date {
  display: flex;
  grid-area: date;
  gap: var(--spacing-8);
  padding: 0 var(--spacing-20) 0 var(--spacing-20);

  svg {
    width: 20px !important;
    height: 20px !important;
  }

  .post-date {
    color: var(--color-gray-700) !important;
    font-size: var(--text-14);
  }
}

/* Lien */
.blog-permalink {
  display: flex;
  grid-area: permalink;
  align-items: center;
  align-self: end;
  justify-content: center;
  width: max-content;
  height: max-content;
  margin: var(--spacing-8) 0 var(--spacing-20) var(--spacing-20);
  padding: var(--spacing-8);
  border: 1px solid var(--color-blue-700);
  border-radius: var(--radius-full);

  .blog-permalink-icon {
    width: 24px !important;
    height: 24px !important;
  }

  &:hover,
  &:focus,
  &:focus-visible,
  &:focus-within {
    background: var(--color-blue-700);

    .blog-permalink-icon {
      filter: brightness(0) invert(1);
    }
  }
}
}
@layer components{
/* Article à la une */
.featured-article {
  .news-card {
    @media (width >= 48rem) {
      width: 100%;
    }

    @media (width >= 64rem) {
      min-width: 600px;
      max-width: 800px;
    }
  }
}

/* Card classique */
.news-card {
  display: grid;
  grid-template-areas: "image" "label" "title" "date" "place" "permalink";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr min-content min-content min-content min-content;
  overflow: hidden;
  border: 1px solid var(--color-yellow-500);
  border-radius: 250px 250px var(--radius-24) var(--radius-24);
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 24px;
  background: var(--color-white);
  text-decoration: none !important;
  gap: var(--spacing-8);

  @media (width >= 500px) {
    grid-template-areas:
      "image label"
      "image title"
      "image date"
      "image place"
      "image permalink";
    grid-template-columns: 250px 1fr;
    grid-template-rows: 1fr min-content min-content min-content 1fr;
    gap: 0 var(--spacing-32);
    border-radius: 150px 30px 30px 150px;
  }

  &:hover {
    text-shadow: none !important;
  }

  &:has(.news-post-title a:hover) .news-permalink {
    background: var(--color-blue-700);

    .news-permalink-icon {
      filter: brightness(0) invert(1);
    }
  }
}

/* Miniature */
.news-card .news-post-image {
  grid-area: image;
  margin-bottom: var(--spacing-24) !important;

  @media (width >= 500px) {
    margin-bottom: var(--spacing-0) !important;
  }
}

.news-card .news-post-image img {
  width: 100%;
  height: 293.333px;
  aspect-ratio: 293.33/293.33;
  object-fit: cover;
  border-radius: var(--radius-full, 9999px) var(--radius-full, 9999px)
    var(--radius-full, 9999px) var(--spacing-0, 0);

  @media (width >= 500px) {
    height: 100%;
    min-height: 250px;
    aspect-ratio: 250/250;
    border-radius: var(--radius-full) var(--radius-full) var(--radius-none)
      var(--radius-full);
  }
}

/* Labels */
.news-card .post-categories {
  grid-area: label;
  align-content: end;
  margin-bottom: var(--spacing-8) !important;
  margin-left: var(--spacing-20);

  @media (width >= 500px) {
    margin-left: var(--spacing-0);
  }
}

/* Titre */
.news-card .news-post-title {
  display: -webkit-box;
  grid-area: title;
  margin-bottom: var(--spacing-8) !important;
  margin-left: var(--spacing-20);
  padding-right: var(--spacing-32);
  overflow: hidden;
  color: var(--color-blue-700) !important;
  font-size: var(--text-20) !important;
  line-height: 150%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  @media (width >= 500px) {
    margin-left: var(--spacing-0);
  }

  a {
    display: block;
    color: inherit !important;
    text-decoration: none !important;
  }
}

/* Date */
.news-card .news-post-date {
  display: flex;
  grid-area: date;
  margin-bottom: var(--spacing-8);
  margin-left: var(--spacing-20);

  @media (width >= 500px) {
    margin-left: var(--spacing-0);
  }

  svg {
    width: 20px !important;
    height: 20px !important;
    margin-right: var(--spacing-8);
  }

  .wrap-event-dates {
    display: flex;
    gap: var(--spacing-4);
  }

  .post-date {
    color: var(--color-gray-700) !important;
    font-size: var(--text-14);
  }
}

/* Lieu */
.news-card .news-post-place {
  display: flex;
  grid-area: place;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-8);
  margin-left: var(--spacing-20);

  @media (width >= 500px) {
    margin-left: var(--spacing-0);
  }

  svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Lien */
.news-card .news-permalink {
  display: flex;
  grid-area: permalink;
  align-items: center;
  align-self: start;
  justify-content: center;
  width: max-content;
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-20);
  margin-left: var(--spacing-20);
  padding: var(--spacing-8);
  border: 1px solid var(--color-blue-700);
  border-radius: var(--radius-full);

  @media (width >= 500px) {
    margin-left: var(--spacing-0);
  }

  .news-permalink-icon {
    width: 24px !important;
    height: 24px !important;
  }

  &:hover {
    background: var(--color-blue-700);

    .news-permalink-icon {
      filter: brightness(0) invert(1);
    }
  }
}
}
@layer components{

/* stylint-disable */

/* FIX ADMIN-BAR avec le HEADER en sticky */
.admin-bar #wpadminbar {
  top: 0 !important;
  position: fixed !important;
}
.admin-bar .header {
  top: 46px;

  @media (width >= 782px) {
    top: var(--spacing-32);
  }
}

.is-navigation-locked {
  position: fixed;
}

/* Logo */
.site-header:has(.header-site-logo) {
  @media (width >= 80rem) {
    img {
      filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15));
    }
  }
}

.site-header:not(:has(.site-title__link)) .header-site-logo,
.site-header:has(.site-title__link) .site-title__link {
  transition: var(--transition-duration) ease;
  transition-property: translate;
  will-change: translate;

  @media (width >= 80rem) {
    position: relative;
    top: 35px;
  }
}

.wrap-menu-item-icon .menu-item-icon {
  width: var(--spacing-24);
  height: var(--spacing-24);
}

/* Header */
.header {
  background-color: var(--color-white);
  position: fixed;
  height: 70px;
  z-index: var(--z-header-level);
  top: var(--spacing-0);
  right: var(--spacing-0);
  left: var(--spacing-0);

  @media (width >= 48rem) {
    height: 80px;
  }
}

.site-header {
  padding-inline: 0 !important;
}

.header,
.site-header {
  transition: var(--transition-duration) ease;
  transition-property: translate;
  will-change: translate;
  translate: var(--spacing-0) var(--spacing-0);

  &.is-hidden {
    @media (width >= 80rem) {
      translate: var(--spacing-0) calc(-100% - var(--spacing-32));

      .site-title__link {
        translate: var(--spacing-0) -35px;
      }
    }
  }

  @media (width >= 80rem) {
    height: 80px;
    border-radius: 0 0 var(--radius-24) var(--radius-24);
  }

  .header-site-logo {
    flex-basis: content;
    width: 60px;
    height: 60px;

    @media (width >= 80rem) {
      width: clamp(60px, 12vw, 116px);
      height: 116px;
    }
  }

  &:has(.menu.toggled) {
    .header-nav {
      display: block;
      position: absolute;
      top: 70px;
      right: var(--spacing-0);
      left: var(--spacing-0);
      padding-inline: var(--spacing-16);
      background-color: var(--color-white);
    }

    @media (width >= 80rem) {
      .header-nav {
        position: static;
        flex-direction: row;
        padding: var(--spacing-0);
        border: none;
        box-shadow: none;
      }
    }
  }
}

/* Burger menu */
.menu-toggle {
  background-color: transparent;
  box-shadow: none;

  @media (width >= 80rem) {
    display: none;
  }
}

[aria-expanded="true"] {
  .icon-open {
    display: none;
  }

  .icon-close {
    display: block;
  }
}

[aria-expanded="false"] {
  .icon-open {
    display: block;
  }

  .icon-close {
    display: none;
  }
}

/* Menu */
.header-nav {
  display: none;
  min-height: 100dvh;

  &.is-opened {
    display: block;
    position: fixed; /* Positionné par rapport au viewport */
    z-index: calc(var(--z-header-level) - 1); /* Juste en dessous du header */
    top: 70px; /* Hauteur du header */
    right: -32px;
    bottom: 0;
    left: -32px;
    min-height: calc(100dvh - 70px); /* Hauteur restante de l'écran */
    overflow-y: auto; /* Permet le scroll si le menu est long */
    background-color: var(--color-white);
    padding-bottom: 100px;
  }

  @media (width >= 80rem) {
    display: block;
    height: 100%;
    min-height: auto;
  }

  .menu {
    display: grid;
    padding: var(--spacing-32);
    gap: var(--spacing-0);

    @media (width >= 80rem) {
      display: flex;
      align-items: center;
      height: 100%;
      padding: var(--spacing-0);
      gap: var(--spacing-32);
    }
  }

  /* Reset */
  .sub-menu {
    padding: var(--spacing-0);
  }

  /* Retire le style de toutes les listes */
  .menu-item {
    margin: var(--spacing-0);
    list-style-type: none;
  }

  /* Retire le style des lien par defaut */
  .menu-item a {
    margin: var(--spacing-0);
    text-decoration: none !important;
  }

  .menu .menu-item {
    display: grid;
    gap: 10px;

    &.is-opened > .sub-menu {
      display: grid;

      @media (width >= 80rem) {
        gap: var(--spacing-16) var(--spacing-24);
        padding: var(--spacing-24);
      }
    }

    @media (width >= 80rem) {
      display: flex;
      position: relative;
      align-items: center;
      height: 100%;
    }
  }

  .sub-menu .menu-item {
    display: grid;
    grid-template-columns: minmax(var(--spacing-24), max-content) max-content;
    align-items: center;
    column-gap: var(--spacing-8);
  }

  /* Pour les éléments sans sous-menu */
  .menu > .menu-item a {
    display: flex;
    align-items: center;
    width: max-content;
    padding-block: var(--spacing-16);

    @media (width >= 80rem) {
      padding-block: var(--spacing-0);
    }
  }

  /* Pour les éléments avec sous-menu */
  .menu > .menu-item a,
  .menu > .menu-item.menu-item-has-children a {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: var(--spacing-8);

    @media (width >= 80rem) {
      align-items: center;
      height: 100%;
    }
  }

  .menu > .menu-item .sub-menu .menu-item a {
    color: var(--color-gray-700) !important;
  }

  .menu > .menu-item .sub-menu .menu-item.current_page_item {
    .menu-item-icon {
      filter: brightness(0) saturate(100%) invert(29%) sepia(57%)
        saturate(1176%) hue-rotate(175deg) brightness(97%) contrast(101%);
    }

    a {
      color: var(--color-blue-500) !important;
    }
  }

  .menu > .menu-item .sub-menu .menu-item:hover {
    .wrap-menu-item-icon .menu-item-icon {
      filter: brightness(0) saturate(100%) invert(29%) sepia(57%)
        saturate(1176%) hue-rotate(175deg) brightness(97%) contrast(101%);
    }

    a {
      color: var(--color-blue-500) !important;
      text-shadow: none !important;
    }
  }

  /* Ajoue la flèche pour les items avec sous-menu */
  .menu > .menu-item.menu-item-has-children > a::after {
    content: "";
    width: var(--spacing-16);
    height: var(--spacing-16);
    transition: var(--transition-duration) ease;
    transition-property: background-color, rotate;
    background-color: var(--color-blue-500);
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='none'%3e%3cpath%20stroke='currentColor'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-miterlimit='10'%20stroke-width='1.5'%20d='m13.28%205.967-4.346%204.346a1.324%201.324%200%200%201-1.867%200L2.721%205.967'/%3e%3c/svg%3e") no-repeat center / contain;
    rotate: 0deg;
    will-change: background-color, rotate;
  }

  /* Ajoue l'effet de hover sur la flèche pour les items avec sous-menu */
  .menu > .menu-item.menu-item-has-children > a:is(:hover, :focus)::after {
    background-color: var(--color-blue-700);
  }

  .menu > .menu-item.is-opened > a::after {
    rotate: -180deg;
  }

  /* Effet de hover/focus/active pour tous */
  .menu .menu-item a:is(:hover, :focus) {
    background-image: linear-gradient(
      var(--color-blue-500),
      var(--color-blue-500)
    );
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 3px;
  }

  .menu > .menu-item.current-menu-item > a {
    background-image: linear-gradient(
      var(--color-blue-500),
      var(--color-blue-500)
    );
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 3px;
  }

  .sub-menu .menu-item a::after {
    content: none;
  }

  .sub-menu .menu-item > a:is(:hover, :focus) {
    background-image: none;
  }

  .menu .menu-item .sub-menu {
    display: none;

    @media (width >= 80rem) {
      display: none;
      position: absolute;
      z-index: var(--z-header-level);
      top: var(--spacing-80);
      box-sizing: border-box;
      grid-template-columns: max-content;
      padding: var(--spacing-24);
      border: var(--spacing-1) solid var(--color-blue-100);
      border-radius: var(--radius-none) var(--radius-none) var(--radius-24)
        var(--radius-24);
      gap: var(--spacing-16);
      background-color: var(--color-white);

      &:has(> *:nth-child(2)) {
        grid-template-columns: repeat(2, max-content);
      }
    }

    .menu > .menu-item.menu-item-has-children:is(:hover) > .sub-menu {
      display: grid;
    }

    .menu .sub-menu .menu-item a {
      color: var(--color-gray-700) !important;
    }
  }
}

/* Préférence utilisateur pour la réduction des animations */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header:not(:has(.site-title__link)) .header-site-logo,
  .site-header:has(.site-title__link) .site-title__link,
  .menu .menu-item > a {
    transition: none;
    will-change: auto;
  }
}

/* stylelint-enable */
}
.hero-container:not(:has(.breadcrumbs-container)) {
  margin-bottom: var(--spacing-56);
}
.hero {
  display: grid;
  position: relative;
  padding-top: 70px;
  border-bottom-left-radius: 52px; /* A vue d'oeil */
  background-color: var(--color-blue-500);

  @media (width >= 80rem) {
    padding: 0;
  }
}
/* Début - Variation du hero avec ACF['hero'] */
.hero.default {
  background-color: var(--color-blue-500);
}
.hero.blue-300 {
  background-color: var(--color-blue-300);

  .hero-content,
  .hero-content h1 {
    color: var(--color-blue-900);
  }
}
.hero.blue-700 {
  background-color: var(--color-blue-700);
}
.hero.blue-700-variant {
  background-color: var(--color-blue-700);

  .hero-content h1 {
    color: var(--color-yellow-500);
  }
}
/* Fin - Variation du hero avec ACF['hero'] */
.hero .hero-image {
  display: grid;
  grid-column: liquid-start / liquid-end;
  width: 100%;
  height: 260px;
  border-radius: var(--radius-none) var(--radius-none) var(--radius-full)
    var(--radius-full);
  object-fit: cover;

  @media (width >= 48rem) {
    position: relative;
    top: 48px;
    grid-column: half / liquid-end;
    grid-row: 1 / 3;
    width: 100%;
    height: 360px;
    border-radius: var(--radius-full) var(--radius-none) var(--radius-none)
      var(--radius-full);
    justify-self: self-end;
  }

  /* Pour passer sous le radius du menu */
  @media (width >= 64rem) {
    max-width: 400px;
  }

  @media (width >= 80rem) {
    max-width: 582px;
    height: 482px;
  }
}
.hero:has(.hero-image) .hero-content {
  @media (width >= 48rem) {
    grid-column: content-start / half;
    height: fit-content;
    padding: var(--spacing-24) var(--spacing-8) var(--spacing-16)
      var(--spacing-0);
  }

  @media (width >= 80rem) {
    padding: var(--spacing-160) var(--spacing-8) var(--spacing-32)
      var(--spacing-0);
  }
}
.hero .hero-content {
  padding: var(--spacing-24) var(--spacing-0) var(--spacing-16) var(--spacing-0);
  color: var(--color-white);
  gap: var(--spacing-24);

  @media (width >= 80rem) {
    grid-column: content-start / half;
    padding: var(--spacing-160) var(--spacing-0) var(--spacing-48)
      var(--spacing-0);
  }

  p {
    margin: 0;
  }
}
/* front-page.php */
.hero .hero-content h1 {
  margin-bottom: var(--spacing-0);
  color: var(--color-white);
  line-height: 133.333%;

  @media (width >= 64rem) {
    line-height: 125%;
  }
}
/* Toutes les autres pages différentes de front-page.php */
.hero .hero-content .h1-hero {
  font-size: var(--text-30);
  line-height: 133.333%;

  @media (width >= 64rem) {
    font-size: var(--text-48);
    line-height: 145.833%;
  }
}
.hero .hero-button {
  display: grid;
  position: relative;
  grid-template-columns: max-content var(--spacing-24);
  width: fit-content;
  padding: var(--spacing-12) var(--spacing-20);
  transition: var(--transition-duration) ease;
  transition-property: background-color;
  border-radius: var(--radius-full);
  background-color: var(--color-yellow-500);
  color: var(--color-blue-700);
  text-decoration: none;
  gap: var(--spacing-8);
  will-change: background-color;

  svg {
    transition: translate var(--transition-duration) ease;
    transition-property: translate;
    will-change: translate;
  }

  &:hover,
  &:active,
  &:focus {
    background-color: var(--color-yellow-400);

    svg {
      translate: var(--spacing-4) var(--spacing-0);
    }
  }
}
/* Cartouche blog / actu / event */
.hero-meta {
  align-items: center;

  /* justify-content: center; */
  width: fit-content;
  padding-block: var(--spacing-12);
  padding-inline: var(--spacing-24);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  gap: var(--spacing-8);

  .hero-date,
  .hero-lieu,
  .hero-heures,
  .hero-salaire {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
  }

  .hero-date .date,
  .hero-lieu .lieu,
  .hero-heures .heures,
  .hero-salaire .salaire {
    color: var(--color-gray-600);
    font-size: var(--text-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;

    > span {
      font-weight: var(--font-weight-bold);
    }
  }

  .hero-event-place {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    color: var(--color-gray-600);
    font-size: var(--text-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
  }

  /* Tags des lieux */
  .lieu-tag {
    --tag-color: var(--color-blue-500);
    --tag-bg-color: var(--color-blue-100);

    display: inline-block;
    padding: var(--spacing-4) var(--spacing-12);
    border-radius: var(--radius-full);
    background-color: var(--tag-bg-color);
    color: var(--tag-color);
    font-size: var(--text-14);
  }
}
@layer components{
.post-categories {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  margin-bottom: 0 !important;
  padding-left: 0;
  font-size: var(--text-14);
  line-height: 140%;
  gap: var(--spacing-4);

  li {
    padding: 2px var(--spacing-8);
    border-radius: var(--radius-full);
    background: var(--color-blue-100);
    color: var(--color-blue-700);
    font-size: var(--text-14);
    list-style: none;
    text-decoration: none !important;
  }
}
}
/* Liens */
a:hover:not(.wp-element-button),
a:active:not(.wp-element-button),
a:focus:not(.wp-element-button) {
  text-shadow:
    var(--link-bold-offset, 0.005rem) 0 currentcolor,
    calc(var(--link-bold-offset, 0.005rem) * -1) 0 currentcolor;
}
a.link-secondary,
.link-secondary a {
  color: var(--color-white);
}
a.link-secondary:hover,
a.link-secondary:focus,
a.link-secondary:active,
.link-secondary a:hover,
.link-secondary a:focus,
.link-secondary a:active {
  color: var(--color-yellow-500);
}
a[target="_blank"]:is(:not(.wp-element-button, .no-after)) {
  display: inline-grid;
  grid-auto-flow: column;
  grid-row: auto;
  align-items: center;
  transition: var(--transition-duration) ease;
  transition-property: color, text-shadow;
  will-change: color, text-shadow;

  &::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: var(--spacing-16);
    height: var(--spacing-16);
    background-color: currentcolor;
    pointer-events: none;
    -webkit-mask: url("../images/external-link.svg") center / contain no-repeat;
    mask: url("../images/external-link.svg") center / contain no-repeat;
  }

  &:hover,
  &:active,
  &:focus {
    text-shadow:
      var(--link-bold-offset, 0.005rem) 0 currentcolor,
      calc(var(--link-bold-offset, 0.005rem) * -1) 0 currentcolor;
  }
}
.has-white-color a {
  color: var(--color-white);
}
.has-white-color a:hover,
.has-white-color a:focus,
.has-white-color a:active {
  color: var(--color-yellow-500);
}
.news-page {
  display: grid;
  row-gap: var(--spacing-80);
  margin-block: var(--spacing-56);

  /* L'article à la une */
  .featured-article {
    display: grid;
    grid-template-columns: auto;
    gap: var(--spacing-56);
    justify-items: center;

    h2 {
      margin-bottom: 0 !important;
      font-size: var(--text-24);

      @media (width >= 64rem) {
        font-size: var(--text-36);
      }
    }
  }

  /* Les articles */
  .articles {
    display: grid;
    gap: var(--spacing-40);

    .articles-title {
      margin-bottom: 0 !important;
      font-size: var(--text-24);
      text-align: center;

      @media (width >= 64rem) {
        font-size: var(--text-36);
      }
    }
  }

  /* Layout des articles */
  .news-layout {
    .news-article-list {
      display: grid;
      gap: var(--spacing-20);
      grid-template-columns: 295px;
      justify-content: center;

      @media (width >= 500px) {
        grid-template-columns: 1fr;
      }

      @media (width >= 80rem) {
        grid-template-columns: 1fr 1fr;
      }
    }
  }
}
.pagination {
  display: grid;
  grid-column: 1 / -1;
  justify-content: center;
  margin-block-start: var(--spacing-40, 2.5rem);
  padding: var(--spacing-16, 1rem);
}
.pagination-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-12, 0.75rem);
  padding: 0;
  list-style: none;
}
.pagination-item {
  margin: 0;
  cursor: pointer;
}
.pagination-link {
  display: grid;
  block-size: 40px;
  inline-size: 40px;
  border: 1px solid var(--color-blue-500);
  border-radius: var(--radius-full);
  color: var(--color-blue-500);
  font-family: var(--wp--preset--font-family--source);
  font-size: var(--text-16);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-decoration: none;
  place-content: center;

  /* Retire le shadow de wordpress */
  &:hover,
  &:focus,
  &:active {
    text-shadow: none;
  }

  &:has(svg) {
    border-color: var(--color-blue-700);
    color: var(--color-blue-700);

    &:not(.is-disabled):hover {
      background-color: var(--color-blue-700);
    }
  }

  /* Style pour l'élément courant */
  &.current {
    border-color: var(--color-blue-500);
    background-color: var(--color-blue-500);
    color: var(--color-white);
  }

  /* Style pour les éléments désactivés */
  &.is-disabled {
    border-color: var(--color-gray-300);
    background-color: transparent;
    color: var(--color-gray-300);
    cursor: not-allowed;
  }

  /* Style au survol, sauf pour l'élément courant ou désactivé */
  @media (hover: hover) {
    &:not(.current, .is-disabled, .arrow-svg):hover {
      background-color: var(--color-blue-500);
      color: var(--color-white);
    }
  }
}
.kiwisitemap-container {
  padding-bottom: var(--spacing-m);
}
.kiwisitemap-container .kiwisitemap {
  padding: 0;
}
.kiwisitemap-container .kiwisitemap .menu-item:has(h2) {
  margin-top: var(--spacing-m);
  list-style: none;
}
/* Fix qui retire les classes natives de natives.css */
.tarteaucitronIconBottomLeft button {
  box-shadow: none;
}
/* Styles personnalisés surchargeant ceux par défaut */
/* stylelint-disable */
html body #tarteaucitronRoot {
  .tarteaucitronH1 {
    font-family: var(--wp--preset--font-family--capriola);
    font-size: var(--text-24);
  }

  button#tarteaucitronBack {
    border-radius: 0;
  }

  /* Bandeau */
  #tarteaucitronAlertBig {
    background-color: var(--color-blue-500);

    /* Texte du bandeau */
    #tarteaucitronDisclaimerAlert {
      color: var(--color-white);
    }

    /* Tout accepter */
    #tarteaucitronPersonalize2 {
      --button-border-color: var(--color-success-500);
      background-color: var(--color-success-500);

      &:hover {
        --button-border-color: var(--color-success-700);
        background-color: var(--color-success-700);
      }
    }

    /* Tout refuser */
    #tarteaucitronAllDenied2 {
      --button-border-color: var(--color-error-500);
      background-color: var(--color-error-500);
      color: var(--color-white);

      &:hover {
        --button-border-color: var(--color-error-700);
        background-color: var(--color-error-700);
      }
    }

    /* Personaliser */
    #tarteaucitronCloseAlert {
      --button-border-color: var(--color-white);
      background-color: var(--color-white);
      color: var(--color-blue-700);

      &:hover {
        --button-border-color: var(--color-yellow-500);
        background-color: var(--color-yellow-500);
      }
    }

    /* Privacy URL */
    #tarteaucitronPrivacyUrl {
      --button-border-color: none;
      padding: 0;
      border-radius: none;
      background-color: none;
      color: var(--color-white);
      text-decoration: underline;

      &:hover {
        text-decoration: none;
      }
    }
  }

  /* Modal */
  #tarteaucitronServices {
    border-radius: var(--radius-24);
  }
  #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine {
    background-color: var(--color-blue-500);

    /* Dialog */
    #tarteaucitronInfo {
      background-color: var(--color-white);
      color: var(--color-black);
      border-radius: var(--radius-24);
      padding: 15px !important;
    }

    /* Dialog btn */
    #tarteaucitronPrivacyUrlDialog {
      --button-border-color: var(--color-blue-700);
      padding: var(--spacing-12) var(--spacing-20);
      background-color: var(--color-white);
      color: var(--color-blue-700);

      &:hover {
        background-color: var(--color-blue-700);
        color: var(--color-white);
      }
    }
  }
  /* Close panel */
  #tarteaucitron #tarteaucitronClosePanel {
    --button-border-color: var(--color-blue-500);
    background-color: var(--color-blue-500);
    color: var(--color-white);
    border-radius: var(--radius-12) var(--radius-12) 0 0;

    &:hover {
      --button-border-color: var(--color-blue-700);
      background-color: var(--color-blue-700);
    }
  }
  #tarteaucitron
    #tarteaucitronServices
    .tarteaucitronTitle
    + [id^="tarteaucitronDetails"] {
    background: var(--color-black);
    color: var(--color-white);
  }

  #tarteaucitron #tarteaucitronServices .tarteaucitronTitle button {
    --button-border-color: var(--color-blue-500);
    background-color: var(--color-blue-500);
  }

  #tarteaucitron #tarteaucitronServices .tarteaucitronLine:not(div) {
    border-radius: var(--radius-24);
  }

  #tarteaucitron #tarteaucitronServices .tarteaucitronHidden {
    background-color: transparent;
  }

  #tarteaucitron
    #tarteaucitronServices
    .tarteaucitronLine.tarteaucitronIsDenied
    .tarteaucitronDeny,
  #tarteaucitron
    #tarteaucitronServices
    .tarteaucitronLine.tarteaucitronIsAllowed
    .tarteaucitronAllow {
    --button-border-color: transparent;
    border-radius: var(--radius-full);
  }
  #tarteaucitron
    #tarteaucitronServices
    .tarteaucitronLine
    .tarteaucitronAsk
    .tarteaucitronDeny,
  #tarteaucitron
    #tarteaucitronServices
    .tarteaucitronLine
    .tarteaucitronAsk
    .tarteaucitronAllow {
    --button-border-color: transparent;
    border-radius: var(--radius-full);
  }

  div#tarteaucitronSave {
    --button-border-color: var(--color-transparent);
    background-color: var(--color-blue-500);
  }
  button#tarteaucitronSaveButton {
    --button-border-color: var(--color-white);
    padding: var(--spacing-12) var(--spacing-20);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    color: var(--color-blue-700);

    &:hover {
      --button-border-color: var(--color-yellow-500);
      background-color: var(--color-yellow-500);
      color: var(--color-blue-700);
    }
  }

  /* Pour les embeds */
  .tarteaukiwi-embed iframe {
    border: 0;
  }
}
.single-emploi__contact {
  display: grid;
  grid-template-areas:
    "title"
    "application-form"
    "contact-info";
  justify-content: center;
  padding: var(--spacing-32) 0;
  gap: var(--spacing-12);

  @media (width >= 48rem) {
    grid-template-areas:
      "title application-form"
      "contact-info application-form";
    grid-template-columns: 1fr 1fr;
    align-content: space-between;

    /* Les contenu sont alignés en haut et en bas */
    align-items: start;
    padding: var(--spacing-80) 0;
    gap: var(--spacing-32);
  }
}
.single-emploi__title {
  display: flex;
  grid-area: title;
  flex-direction: column;
  width: 100%;
  margin: 0;
  color: var(--color-blue-700);
  font-size: var(--text-30);
  text-align: center;

  @media (width >= 48rem) {
    gap: var(--spacing-24);
    text-align: left;
  }
}
/* ========================================
   Section Information du contact (hérite de departement-form)
   ======================================== */
.single-emploi__contact-info {
  display: flex;
  grid-area: contact-info;
  flex-direction: column;
  align-self: end;
  padding: var(--spacing-16);
  border-radius: var(--radius-24);
  background-color: var(--color-blue-700);
  gap: var(--spacing-24);

  @media (width >= 48rem) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    gap: var(--spacing-40);
    padding: var(--spacing-32);

    &.form-visible {
      grid-template-columns: 1fr;
      gap: var(--spacing-24);
    }
  }
}
.single-emploi__contact-icon {
  --icon-phone-color: var(--color-yellow-500);

  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-12);
  color: var(--color-yellow-500);
}
.single-emploi__contact-title {
  margin-bottom: 0;
  color: var(--color-yellow-500);
  font-size: var(--text-20);
  font-weight: var(--font-weight-bold);
  line-height: 140%;
}
.single-emploi__contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.single-emploi__contact-item {
  display: grid;
  grid-template-columns: minmax(auto, var(--spacing-20)) 1fr;
  color: var(--color-white);
  font-size: var(--text-16);
  font-weight: var(--font-weight-bold);
  line-height: 140%;
  gap: var(--spacing-12);
}
.single-emploi__contact-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-yellow-500);
}
.single-emploi__contact-item a {
  transition: var(--transition-duration) ease color;
  color: inherit;
  text-decoration: none;

  &:hover,
  &:focus {
    text-decoration: underline;
  }
}
.single-emploi__application-form {
  display: flex;
  grid-area: application-form;
  flex-direction: column;
  width: 100%;
  padding: var(--spacing-20);
  border-radius: var(--radius-16);
  background-color: var(--color-blue-100);
}
/* Block emploi */
/*
 * Styles partagés pour les offres d'emploi
 * Basé sur lieux.css - surcharge minimale pour les spécificités emploi
 */
.liste-emplois {
  padding-block: var(--spacing-80);
  gap: var(--spacing-40);
}
.liste-emplois-title {
  text-align: center;
  margin: 0;
}
.emplois-grid {
  --boxed-max: 90rem;
  align-items: stretch;
}
/* ========================================
   Filtres
   ======================================== */
.emplois-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  justify-content: center;
  align-items: flex-start;
}
.emplois-filters .filter-group {
  position: relative;
}
.emplois-filters .filter-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-blue-300);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  color: var(--color-blue-700);
  font-size: var(--text-16);
  cursor: pointer;
  transition: var(--transition-duration) ease;
  transition-property: background-color, border-color;
  will-change: background-color, border-color;

  &:hover,
  &:focus {
    background-color: var(--color-blue-100);
    border-color: var(--color-blue-500);
  }

  &[aria-expanded="true"] {
    background-color: var(--color-blue-100);
    border-color: var(--color-blue-500);
  }
}
.emplois-filters .filter-toggle-icon {
  width: var(--spacing-20);
  height: var(--spacing-20);
  transition: transform var(--transition-duration) ease;
  will-change: transform;

  &.is-open {
    rotate: 180deg;
  }
}
.emplois-filters .filter-options {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 200px;
  margin-top: var(--spacing-8);
  padding: var(--spacing-16);
  background-color: var(--color-white);
  border: 1px solid var(--color-blue-300);
  border-radius: var(--radius-16);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.emplois-filters .filter-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) 0;
  cursor: pointer;

  input[type="checkbox"] {
    width: var(--spacing-20);
    height: var(--spacing-20);
    accent-color: var(--color-blue-500);
  }

  span {
    color: var(--color-blue-700);
    font-size: var(--text-16);
  }

  &:hover span {
    color: var(--color-blue-500);
  }
}
.emplois-filters .filter-reset {
  padding: var(--spacing-8) var(--spacing-16);
  border: none;
  border-bottom: 1px solid var(--color-blue-500);
  background: transparent;
  color: var(--color-blue-500);
  font-size: var(--text-14);
  cursor: pointer;

  &:hover,
  &:focus {
    color: var(--color-blue-700);
    border-bottom-color: var(--color-blue-700);
  }
}
/* ========================================
   Cards Emploi (hérite de lieu-card)
   ======================================== */
.emploi-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
  padding-bottom: calc(var(--spacing-40) + var(--spacing-32));
  background-color: var(--color-white);
  border-radius: var(--radius-24);
  border: 1px solid var(--color-orange-700);
  position: relative;
  transition-property: opacity, transform;
  will-change: opacity, transform;
  height: 100%;
}
/* Alpine.js - Cache les éléments avant l'initialisation */
[x-cloak] {
  display: none !important;
}
.emploi-infos {
  display: flex;
  gap: var(--spacing-16);
  font-size: var(--text-14);
  color: var(--color-blue-700);
  margin: 0;
  flex-wrap: wrap;
}
.emploi-infos-icon {
  color: var(--color-blue-700);
  width: var(--spacing-20);
  height: var(--spacing-20);
  flex-shrink: 0;
}
.emploi-infos-label,
.emploi-salaire-label {
  font-weight: var(--font-weight-bold);
}
.emploi-info {
  display: flex;
  gap: var(--spacing-8);
}
.emploi-tag {
  display: inline-block;
  padding: var(--spacing-4) var(--spacing-12);
  font-size: var(--text-14);
  border-radius: var(--radius-full);
}
/* Types de contrat (CDI, CDD, Alternance, Stage) : orange */
.emploi-tag--contrat {
  background-color: var(--color-orange-100);
  color: var(--color-orange-700);
}
/* Modes de travail (Télétravail, Présentiel, Hybride) : bleu */
.emploi-tag--travail {
  background-color: var(--color-blue-100);
  color: var(--color-blue-700);
}
.emploi-titre {
  font-size: var(--text-20);
  color: var(--color-blue-700);
  margin: 0;
}
.emplois-grid .emploi-card .emploi-link {
  margin-top: auto;
  display: flex;
  position: absolute;
  align-items: end;
  scroll-margin-top: var(--spacing-48);
  inset: 0;
  padding-left: var(--spacing-16);
  padding-bottom: var(--spacing-16);
  border-radius: var(--radius-24);
}
/* Message lorsque aucune offre n'est trouvée */
.emploi-aucun {
  text-align: center;
  font-size: var(--text-16);
  color: var(--color-blue-700);
  margin: var(--spacing-24) 0;
}
/* ========================================
   Transitions Alpine.js
   ======================================== */
.emploi-card-enter {
  transition: opacity var(--transition-duration) ease-out;
}
.emploi-card-enter-start {
  opacity: 0;
}
.emploi-card-enter-end {
  opacity: 1;
}
.emploi-card-leave {
  transition: opacity var(--transition-duration) ease-in;
}
.emploi-card-leave-start {
  opacity: 1;
}
.emploi-card-leave-end {
  opacity: 0;
}
/* ==========================================
   Bloc Liste des offres d'emploi
   ========================================== */
.liste-emplois {
  display: grid;
  gap: var(--spacing-40);
  margin-block: var(--spacing-56);

  @media (width >= 48rem) {
    gap: var(--spacing-56);
  }
}
.liste-emplois-title {
  margin-bottom: 0 !important;
  font-size: var(--text-24);
  text-align: center;

  @media (width >= 64rem) {
    font-size: var(--text-36);
    text-align: left;
  }
}
/* ==========================================
   Layout filtres + résultats
   ========================================== */
.emplois-layout {
  display: grid;
  gap: var(--spacing-32);
  inline-size: 100%;
  max-inline-size: 100%;

  @media (width >= 80rem) {
    grid-template-columns: 270px 1fr;
  }
}
/* ==========================================
   Sidebar des filtres
   ========================================== */
.emplois-filters {
  display: grid;
  gap: var(--spacing-24);
  grid-template-columns: 1fr;
  align-items: start;
  grid-auto-rows: min-content;

  .filters-title {
    margin-bottom: 0 !important;
    color: var(--color-blue-700);
    font-size: var(--text-20);
    text-align: center;

    @media (width >= 64rem) {
      font-size: var(--text-24);
      text-align: left;
    }
  }

  .btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: var(--spacing-12) var(--spacing-20);
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    border-radius: var(--radius-full);
    background: var(--color-yellow-500);
    box-shadow: none;
    color: var(--color-blue-700);
    font-size: var(--text-16);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    text-align: center;
    gap: var(--spacing-8);
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-400);
    }
  }

  .btn-reset {
    padding: 0;
    border-bottom: 1px solid var(--color-blue-500);
    color: var(--color-blue-500);
    font-size: var(--text-16);
    font-style: normal;
    font-weight: 400;
    border-radius: 0;
    line-height: 140%;
    margin: 0 auto;

    &:hover,
    &:active,
    &:focus {
      color: var(--color-blue-700);
    }
  }
}
.emplois-filters .wrapper-filter-group {
  padding: var(--spacing-8) var(--spacing-16) var(--spacing-16)
    var(--spacing-16);
  border-radius: var(--radius-24);
  background-color: var(--color-gray-50);

  fieldset {
    padding: 0;
  }

  legend {
    padding: var(--spacing-8) var(--spacing-16);
    color: var(--color-blue-500);
    font-size: var(--text-16);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
  }

  .mobile-helper-text {
    color: var(--color-blue-700);
    font-size: var(--text-14);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
  }
}
.emplois-filters .filter-group {
  display: grid;
  gap: var(--spacing-8);
  max-height: 8.5rem; /* Affiche env. 3 éléments */
  overflow-y: scroll;

  @media (width >= 64rem) {
    max-height: none;
    overflow-y: visible;

    .mobile-helper-text {
      display: none;
    }
  }
}
.filter-group .filter-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding-left: var(--spacing-1);

  /* Custom des styles de natives.css */
  input {
    background-color: var(--color-white);
    box-shadow: var(--color-blue-700) 0 0 0 1px;

    &::before {
      background-color: var(--color-blue-700);
    }

    &:checked {
      &::before {
        scale: 0.7;
      }
    }
  }

  label {
    color: var(--color-gray-700);
    font-size: var(--text-16);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
  }
}
/* ==========================================
   Zone des résultats
   ========================================== */
.emplois-results {
  display: grid;
  gap: var(--spacing-24);
  align-items: start;
  grid-auto-rows: min-content;
}
/* ==========================================
   Grille des offres
   ========================================== */
.emplois-grid {
  display: grid;
  gap: var(--spacing-24);
  grid-template-columns: 1fr;

  @media (width >= 48rem) {
    grid-template-columns: 1fr 1fr;
  }
}
/* ==========================================
   Bouton "Voir plus"
   ========================================== */
.emplois-voir-plus {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-24);
}
/* Block gutenberg (natif) */
/* core/button */
.wp-block-buttons,
.wp-block-button.is-layout-flex,
.wp-block-button-is-layout-flex {
  width: fit-content;
  margin-top: 0;
  margin-bottom: var(--spacing-m);
}
/* Bouton primaire */
.wp-block-button.is-style-fill {
  width: fit-content;

  .wp-block-button__link {
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    will-change: background-color;
    background-color: white;
    color: var(--color-blue-700);
    border-color: transparent;
    box-shadow: none;
    border-radius: var(--radius-full);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-400);
    }
  }

  .wp-block-button__link:has(img, svg) {
    display: grid;
    grid-template-columns: max-content var(--spacing-24);
    gap: var(--spacing-8);

    img,
    svg {
      transition: translate var(--transition-duration) ease;
      transition-property: translate;
      will-change: translate;
    }

    &:hover,
    &:active,
    &:focus {
      img,
      svg {
        translate: var(--spacing-4) var(--spacing-0);
      }
    }
  }
}
/* Boutons secondaire */
.wp-block-button.is-style-outline {
  .wp-block-button__link {
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    border: 1px solid var(--color-blue-700);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    color: var(--color-blue-700);
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-blue-700);
      color: var(--color-white);
    }
  }

  .wp-block-button__link:has(img) {
    display: grid;
    grid-template-columns: max-content var(--spacing-24);
    gap: var(--spacing-8);

    img {
      transition: var(--transition-duration) ease;
      transition-property: translate, filter;
      will-change: translate, filter;
      filter: none; /* état par défaut */
    }

    &:hover,
    &:focus,
    &:active {
      img {
        filter: brightness(0) invert(1);
        translate: var(--spacing-4) var(--spacing-0);
      }
    }
  }
}
/* Boutons ghost */
.wp-block-button.is-style-ghost {
  .wp-block-button__link {
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-500);
    }
  }

  .wp-block-button__link:has(img) {
    display: grid;
    grid-template-columns: max-content var(--spacing-24);
    gap: var(--spacing-8);

    img {
      transition: var(--transition-duration) ease;
      transition-property: translate, filter;
      will-change: translate, filter;
      filter: none; /* état par défaut */
    }

    &:hover,
    &:focus,
    &:active {
      img {
        translate: var(--spacing-4) var(--spacing-0);
      }
    }
  }
}
/* Boutons secondaire - variante */
.wp-block-button.is-style-outline-variant {
  .wp-block-button__link {
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-white);
      color: var(--color-blue-700);
    }
  }

  .wp-block-button__link:has(img) {
    display: grid;
    grid-template-columns: max-content var(--spacing-24);
    gap: var(--spacing-8);

    img {
      transition: var(--transition-duration) ease;
      transition-property: translate, filter;
      will-change: translate, filter;
      filter: brightness(0) invert(1);
    }

    &:hover,
    &:focus,
    &:active {
      img {
        filter: none; /* état par défaut */
        translate: var(--spacing-4) var(--spacing-0);
      }
    }
  }
}
/* Bouton faire un don gutenberg */
.wp-block-button.is-style-donation-button {
  .wp-block-button__link {
    position: relative;
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-400);
    }
  }

  .wp-block-button__link::after {
    content: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='36'%20height='36'%20fill='none'%20viewBox='0%200%2036%2036'%3e%3cg%20clip-path='url(%23a)'%3e%3cpath%20fill='%2311448C'%20stroke='%2311448C'%20stroke-width='2'%20d='M21.884%2012.244c2.37-.839%205.32.01%206.566%202.613l.001.003c.62%201.286.614%202.834.016%204.143l-.127.259c-.828%201.561-2.3%202.636-4.608%203.528-2.329.9-5.352%201.555-9.142%202.379l-.142.03-.004.001a1.167%201.167%200%200%201-1.358-.79l-.002-.006-.05-.154v-.003l-.84-2.628c-.785-2.498-1.388-4.615-1.678-6.463-.381-2.44-.187-4.252.747-5.754.816-1.305%202.238-2.184%203.756-2.296h.001c2.876-.216%205.09%201.91%205.547%204.378l.215%201.15z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='a'%3e%3cpath%20fill='%23fff'%20d='M13.03%200%2035.6%2013.03%2022.57%2035.599%200%2022.569z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
    position: absolute;
    top: -10px;
    right: -10px;
    width: 36px;
    height: 36px;
    transition: var(--transition-duration) ease;
    transition-property: right;
    will-change: right;
  }

  .wp-block-button__link:hover::after {
    right: -14px;
  }
}
/* Bouton faire un don header/footer */
.wp-block-button.is-rgoods-btn {
  .wp-block-button__link {
    position: relative;
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    border-radius: var(--radius-full);
    background-color: var(--color-yellow-500);
    color: var(--on-secondary);
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-400);
    }
  }

  /* Icône style header */
  .wp-block-button__link .heart {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 36px;
    height: 36px;
    transition: var(--transition-duration) ease;
    transition-property: right;
    will-change: right;
  }

  /* Icône style footer */
  .wp-block-button__link:has(.heart-v) {
    /* display: grid;
    grid-template-columns: max-content var(--spacing-24); */
    display: flex;
    gap: var(--spacing-8);
    align-items: center;

    .heart-v {
      position: relative;
      right: 0;
      transition: var(--transition-duration) ease;
      transition-property: right;
      will-change: right;
    }
  }

  .wp-block-button__link:hover .heart {
    right: -14px;
  }

  .wp-block-button__link:hover .heart-v {
    right: -5px;
  }
}
/* Bouton icône outline */
.wp-block-button.is-style-icon-button-outline {
  .wp-block-button__link {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: var(--spacing-8);
    transition: var(--transition-duration) ease;
    transition-property: background-color, filter;
    border: 1px solid var(--color-blue-700);
    border-radius: var(--radius-full);
    background: var(--color-white);
    will-change: background-color, filter;

    img {
      display: block;
      width: 24px;
      height: 24px;
      filter: none; /* état par défaut */
    }

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-blue-700);
      color: var(--color-white);

      img {
        filter: brightness(0) invert(1);
      }
    }
  }

  &:hover,
  &:active,
  &:focus,
  a:has(.wp-block-button__link):focus /* Permet d'avoir le focus sur les cards des liste des lieux  */ {
    .wp-block-button__link {
      background-color: var(--color-blue-700);
      color: var(--color-white);

      img {
        filter: brightness(0) invert(1);
      }
    }
  }
}
/* Bouton icône outline variant */
.wp-block-button.is-style-icon-button-outline-variant {
  .wp-block-button__link {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: var(--spacing-8);
    transition: var(--transition-duration) ease;
    transition-property: background-color, filter;
    border: 1px solid var(--color-white);
    border-radius: var(--radius-full);
    background-color: transparent;
    will-change: background-color, filter;
    color: var(--color-white);

    img {
      display: block;
      width: 24px;
      height: 24px;
      filter: brightness(0) invert(1);
    }

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-white);
      color: var(--color-blue-700);

      img {
        filter: none; /* état par défaut */
      }
    }
  }
}
/* Bouton icône ghost */
.wp-block-button.is-style-icon-button-ghost {
  .wp-block-button__link {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: var(--spacing-8);
    transition: var(--transition-duration) ease;
    transition-property: background-color, filter;
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    will-change: background-color, filter;

    img {
      display: block;
      width: 24px;
      height: 24px;
    }

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-500);
    }
  }
}
/* Bouton icône secondaire white */
.wp-block-button.is-style-button-secondary-white {
  .wp-block-button__link {
    transition: var(--transition-duration) ease;
    transition-property: background-color;
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    color: var(--color-blue-700);
    will-change: background-color;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--color-yellow-500);
    }
  }

  .wp-block-button__link:has(img) {
    display: grid;
    grid-template-columns: max-content var(--spacing-24);
    gap: var(--spacing-8);

    img {
      transition: var(--transition-duration) ease;
      transition-property: translate, filter;
      will-change: translate, filter;
      filter: none; /* état par défaut */
    }

    &:hover,
    &:focus,
    &:active {
      img {
        translate: var(--spacing-4) var(--spacing-0);
      }
    }
  }
}
/* La gallery */
.wp-block-gallery {
  display: grid !important;
  grid-gap: var(--spacing-8) !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: repeat(6, minmax(115px, 115px)) !important;

  @media (width >= 48rem) {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(2, minmax(225px, 225px)) !important;
  }
}
/* Les images */
.wp-block-gallery.has-nested-images figure.wp-block-image {
  display: block !important;
}
.wp-block-gallery .wp-block-image div {
  display: block !important;
  height: 100% !important;
}
.wp-block-gallery .wp-block-image {
  width: 100% !important;
}
/* Positionnement des images */
.wp-block-gallery .wp-block-image:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3 !important;

  @media (width >= 48rem) {
    grid-area: 1 / 1 / 2 / 3 !important;
  }
}
.wp-block-gallery .wp-block-image:nth-child(2) {
  grid-area: 2 / 1 / 3 / 2 !important;

  @media (width >= 48rem) {
    grid-area: 1 / 3 / 2 / 4 !important;
  }
}
.wp-block-gallery .wp-block-image:nth-child(3) {
  grid-area: 2 / 2 / 3 / 3 !important;

  @media (width >= 48rem) {
    grid-area: 1 / 4 / 2 / 5 !important;
  }
}
.wp-block-gallery .wp-block-image:nth-child(4) {
  grid-area: 3 / 1 / 4 / 2 !important;

  @media (width >= 48rem) {
    grid-area: 1 / 5 / 2 / 6 !important;
  }
}
.wp-block-gallery .wp-block-image:nth-child(5) {
  grid-area: 3 / 2 / 4 / 3 !important;

  @media (width >= 48rem) {
    grid-area: 1 / 6 / 2 / 7 !important;
  }
}
.wp-block-gallery .wp-block-image:nth-child(6) {
  grid-area: 4 / 1 / 5 / 2 !important;

  @media (width >= 48rem) {
    grid-area: 2 / 1 / 3 / 2 !important;
  }
}
.wp-block-gallery .wp-block-image:nth-child(7) {
  grid-area: 4 / 2 / 5 / 3 !important;

  @media (width >= 48rem) {
    grid-area: 2 / 2 / 3 / 3 !important;
  }
}
.wp-block-gallery .wp-block-image:nth-child(8) {
  grid-area: 5 / 1 / 6 / 3 !important;

  @media (width >= 48rem) {
    grid-area: 2 / 3 / 3 / 5 !important;
  }
}
.wp-block-gallery .wp-block-image:nth-child(9) {
  grid-area: 6 / 1 / 7 / 2 !important;

  @media (width >= 48rem) {
    grid-area: 2 / 5 / 3 / 6 !important;
  }
}
.wp-block-gallery .wp-block-image:nth-child(10) {
  grid-area: 6 / 2 / 7 / 3 !important;

  @media (width >= 48rem) {
    grid-area: 2 / 6 / 3 / 7 !important;
  }
}
/* Listes */
.wp-block-list,
.accordion-content ul {
  display: grid;
  margin-top: 0;
  margin-bottom: var(--spacing-m);
  padding: 0;
  list-style: none; /* supprime le marqueur natif */
  gap: var(--spacing-8);

  li {
    position: relative;
    margin-block: 0;
    padding-left: 18px; /* 10px (puce) + 8px d'espacement */

    /* Puce */
    &::before {
      content: "";
      position: absolute;
      top: 6px;
      left: 0;
      width: 10px;
      height: 10px;
      border-radius: var(--radius-full);
      background-color: var(--color-yellow-500);
    }
  }
}
/* core/pullquote */
.wp-block-pullquote blockquote p.rich-text {
  margin-bottom: var(--spacing-24);
}