/* Helderis — Webfonts
   Titrage : Montserrat (SemiBold → ExtraBold) · Corps : Open Sans (Regular/SemiBold)
   Substitution autorisée : Arial / Helvetica Neue.
   Binaires variables servis localement (assets/fonts) — sous-ensembles latin + latin-ext,
   suffisants pour le français. Source d'origine : Google Fonts (fonts.gstatic.com). */

/* ---- Montserrat (titrage) ---- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Open Sans (corps) ---- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/opensans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/opensans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Helderis — Couleurs
   Source : Charte graphique v1.0, §3. Règle 60-30-10 (Bleu + blanc 60 % · Turquoise 30 % · Corail 10 %).
   Accessibilité : texte courant en Bleu Helderis sur fond clair (11,2:1). Le Turquoise (2,8:1)
   est DÉCORATIF uniquement — jamais en texte courant sur blanc. */
:root {
  /* ---- Primaires ---- */
  --blue-helderis: #1B3A4B;   /* Pantone 7546 C — couleur principale */
  --turquoise-ia:  #40C8C8;   /* Pantone 3252 C — accent dynamique (décoratif) */
  --corail-action: #E8734A;   /* Pantone 7579 C — appel à l'action */

  /* ---- Secondaires ---- */
  --ambre-robot:   #C4784A;   /* Pantone 7522 C — lumière chaleureuse du robot */
  --teal-moyen:    #2A7B88;   /* Pantone 7714 C — sous-titres, liens accessibles */
  --bleu-givre:    #E8F4F4;   /* fonds décoratifs, zones de repos */
  --rose-peche:    #FDF0EB;   /* mise en évidence douce, alertes légères */

  /* ---- Neutres ---- */
  --nuit-profonde: #0D1117;   /* fonds sombres, premium */
  --blanc-pur:     #FFFFFF;
  --gris-texte:    #666666;   /* texte secondaire, légendes */
  --gris-discret:  #B0B0B0;   /* filets, séparateurs */

  /* ---- Variantes fonctionnelles (dérivées, harmonie oklch) ---- */
  --blue-helderis-700: #15303f;
  --blue-helderis-300: #4a6675;
  --corail-hover:  #D5623B;   /* corail assombri pour :hover */
  --corail-press:  #BE5230;   /* corail assombri pour :active */
  --turquoise-dark:#2FA9A9;
  --teal-hover:    #226470;

  /* ---- Surfaces & contours ---- */
  --color-bg:            var(--blanc-pur);
  --color-bg-alt:        var(--bleu-givre);   /* sections alternées */
  --color-bg-warm:       var(--rose-peche);
  --color-bg-dark:       var(--nuit-profonde);
  --color-surface:       var(--blanc-pur);
  --color-surface-soft:  var(--bleu-givre);
  --color-surface-warm:  var(--rose-peche);
  --color-border:        #DCE6E8;            /* contour de carte, hairline clair */
  --color-border-strong: var(--gris-discret);/* filets, séparateurs */
  --color-overlay:       rgba(13, 17, 23, 0.55);

  /* ---- Texte ---- */
  --color-text:          var(--blue-helderis);   /* corps de texte */
  --color-heading:       var(--blue-helderis);
  --color-subheading:    var(--teal-moyen);
  --color-text-muted:    var(--gris-texte);
  --color-text-subtle:   var(--gris-discret);
  --color-text-on-dark:  var(--blanc-pur);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.72);

  /* ---- Rôles d'action ---- */
  --color-primary:    var(--blue-helderis);
  --color-accent:     var(--turquoise-ia);   /* décoratif / grands titres */
  --color-cta:        var(--corail-action);
  --color-cta-hover:  var(--corail-hover);
  --color-cta-press:  var(--corail-press);
  --color-link:       var(--teal-moyen);     /* lien accessible (4,5:1+) */
  --color-link-hover: var(--blue-helderis);
  --color-focus-ring: rgba(64, 200, 200, 0.45);

  /* ---- États / alertes (info & warning issus de la palette ; success & danger dérivés) ---- */
  --color-info:        var(--teal-moyen);
  --color-info-bg:     var(--bleu-givre);
  --color-success:     #2E9B79;   /* dérivé — vert harmonisé */
  --color-success-bg:  #E4F4EE;
  --color-warning:     var(--ambre-robot);
  --color-warning-bg:  #FBEFE4;
  --color-danger:      #CB4439;   /* dérivé — rouge harmonisé */
  --color-danger-bg:   #FBE9E6;
  --color-highlight:   var(--corail-action);
  --color-highlight-bg:var(--rose-peche);

  /* ---- Data-visualisation (séquence officielle §5.3) ---- */
  --chart-1: var(--blue-helderis);
  --chart-2: var(--turquoise-ia);
  --chart-3: var(--corail-action);
  --chart-4: var(--ambre-robot);
  --chart-5: var(--teal-moyen);
  --chart-grid: #E6EDEF;
}

/* Helderis — Typographie
   Source : Charte graphique v1.0, §4.
   Titrage : Montserrat · Corps : Open Sans · Substitution : Arial.
   Échelle écran : corps minimum 16px (WCAG 2.1 AA, public sénior). */
:root {
  /* ---- Familles ---- */
  --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-fallback: Arial, 'Helvetica Neue', sans-serif;

  /* ---- Graisses ---- */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* ---- Échelle de taille (écran) ---- */
  --text-display: 3.25rem;  /* 52px — héros */
  --text-h1:      2.25rem;  /* 36px */
  --text-h2:      1.75rem;  /* 28px */
  --text-h3:      1.375rem; /* 22px */
  --text-h4:      1.125rem; /* 18px */
  --text-body-lg: 1.125rem; /* 18px */
  --text-body:    1rem;     /* 16px — minimum corps */
  --text-small:   0.875rem; /* 14px */
  --text-caption: 0.8125rem;/* 13px — légendes (≥12px) */
  --text-overline:0.75rem;  /* 12px — surtitres capitales */

  /* ---- Interlignes ---- */
  --lh-tight:   1.15; /* @kind font */
  --lh-snug:    1.3;  /* @kind font */
  --lh-normal:  1.6;  /* @kind font */
  --lh-relaxed: 1.75; /* @kind font */

  /* ---- Interlettrage ---- */
  --ls-tight:  -0.01em; /* @kind font */
  --ls-normal:  0;      /* @kind font */
  --ls-wide:    0.08em; /* @kind font */
  --ls-wider:   0.14em; /* @kind font */

  /* ---- Rôles composés ---- */
  --type-display-weight: var(--fw-extrabold); /* @kind font */
  --type-h-weight:       var(--fw-bold);      /* @kind font */
  --type-subh-weight:    var(--fw-semibold);  /* @kind font */
}

/* Helderis — Espacement, rayons & grille
   Base 4px. Marges généreuses pour la lisibilité sénior. */
:root {
  /* ---- Échelle d'espacement (base 4px) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Rayons d'angle ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;   /* cartes */
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---- Largeurs de contenu ---- */
  --container:        1200px; /* @kind spacing */
  --container-wide:   1320px; /* @kind spacing */
  --container-narrow: 760px;  /* @kind spacing */

  /* ---- Repères d'application (charte §6) ---- */
  --rail-width: 8px;     /* @kind spacing */
  --doc-margin: 25mm;    /* @kind spacing */
}

/* Helderis — Ombres, contours, transitions
   Esthétique : douce, chaleureuse, peu contrastée. Ombres teintées Bleu Helderis.
   Jamais d'ombre portée sur le logo (charte §2.5). */
:root {
  /* ---- Ombres ---- */
  --shadow-xs: 0 1px 2px rgba(13, 17, 23, 0.05);
  --shadow-sm: 0 2px 6px rgba(27, 58, 75, 0.06);
  --shadow-md: 0 6px 18px rgba(27, 58, 75, 0.09);
  --shadow-lg: 0 14px 36px rgba(27, 58, 75, 0.12);
  --shadow-xl: 0 28px 64px rgba(27, 58, 75, 0.16);
  --shadow-warm: 0 10px 30px rgba(232, 115, 74, 0.18); /* halo corail/ambré */
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ---- Contours ---- */
  --border-hairline: 1px solid var(--color-border);
  --border-rule:     1px solid var(--color-border-strong);
  --border-accent:   2px solid var(--corail-action);   /* filet titre/contenu */
  --border-turq:     1px solid var(--turquoise-ia);

  /* ---- Transitions ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
  --transition: all var(--dur-base) var(--ease-standard); /* @kind other */

  /* ---- Élévations z ---- */
  --z-base:     1;    /* @kind other */
  --z-dropdown: 100;  /* @kind other */
  --z-sticky:   200;  /* @kind other */
  --z-overlay:  900;  /* @kind other */
  --z-modal:    1000; /* @kind other */
  --z-toast:    1100; /* @kind other */

  /* ---- Dégradés de marque ---- */
  --gradient-baseline: linear-gradient(90deg, var(--corail-action) 0%, var(--turquoise-ia) 100%);
  --gradient-dark:     linear-gradient(160deg, #15303f 0%, var(--nuit-profonde) 100%);
  --gradient-givre:    linear-gradient(180deg, #ffffff 0%, var(--bleu-givre) 100%);
}

/* =========================================================
   Helderis — Couche composants (.hd-*)
   Pilotée à 100 % par les design tokens. Esthétique : chaleureuse,
   accessible (public sénior), peu contrastée, généreuse en espace.
   Cibles tactiles ≥ 44px · corps ≥ 16px · focus turquoise visible.
   ========================================================= */

/* ----------------------------------------------------------
   Boutons
   ---------------------------------------------------------- */
.hd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-body);
  line-height: 1;
  letter-spacing: 0.01em;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  background: var(--corail-action);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.hd-btn:hover { background: var(--corail-hover); }
.hd-btn:active { background: var(--corail-press); transform: translateY(1px); }
.hd-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hd-btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* — Primaire (Bleu Helderis) — */
.hd-btn--primary { background: var(--blue-helderis); color: #fff; }
.hd-btn--primary:hover { background: var(--blue-helderis-700); }
.hd-btn--primary:active { background: #0f242f; }

/* — Secondaire (contour bleu) — */
.hd-btn--secondary { background: transparent; color: var(--blue-helderis); border-color: var(--color-border-strong); }
.hd-btn--secondary:hover { background: var(--bleu-givre); border-color: var(--teal-moyen); }
.hd-btn--secondary:active { background: #d9ecec; transform: translateY(1px); }

/* — Fantôme (texte seul) — */
.hd-btn--ghost { background: transparent; color: var(--teal-moyen); border-color: transparent; }
.hd-btn--ghost:hover { background: var(--bleu-givre); }
.hd-btn--ghost:active { background: #d9ecec; transform: translateY(1px); }

/* — Danger — */
.hd-btn--danger { background: var(--color-danger); color: #fff; }
.hd-btn--danger:hover { background: #b23a30; }
.hd-btn--danger:active { background: #9c322a; }

/* — Tailles — */
.hd-btn--sm { min-height: 38px; padding: 0 var(--space-4); font-size: var(--text-small); }
.hd-btn--lg { min-height: 56px; padding: 0 var(--space-8); font-size: var(--text-body-lg); }
.hd-btn--block { display: flex; width: 100%; }

.hd-btn:disabled, .hd-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

/* ----------------------------------------------------------
   Bouton-icône
   ---------------------------------------------------------- */
.hd-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1.5px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--blue-helderis); cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.hd-icon-btn:hover { background: var(--bleu-givre); color: var(--teal-moyen); }
.hd-icon-btn:active { background: #d9ecec; }
.hd-icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hd-icon-btn svg { width: 20px; height: 20px; }
.hd-icon-btn--solid { background: var(--corail-action); color: #fff; }
.hd-icon-btn--solid:hover { background: var(--corail-hover); color: #fff; }
.hd-icon-btn--outline { border-color: var(--color-border-strong); }
.hd-icon-btn--sm { width: 36px; height: 36px; }
.hd-icon-btn--sm svg { width: 17px; height: 17px; }

/* ----------------------------------------------------------
   Badges
   ---------------------------------------------------------- */
.hd-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-caption); line-height: 1; letter-spacing: 0.02em;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--bleu-givre); color: var(--teal-moyen);
}
.hd-badge svg { width: 13px; height: 13px; }
.hd-badge--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hd-badge--neutral { background: #eef2f3; color: var(--gris-texte); }
.hd-badge--info    { background: var(--color-info-bg); color: var(--teal-moyen); }
.hd-badge--success { background: var(--color-success-bg); color: var(--color-success); }
.hd-badge--warning { background: var(--color-warning-bg); color: #a05a2f; }
.hd-badge--danger  { background: var(--color-danger-bg); color: var(--color-danger); }
.hd-badge--accent  { background: #d8f3f3; color: var(--turquoise-dark); }
.hd-badge--cta     { background: var(--rose-peche); color: var(--corail-press); }
.hd-badge--solid   { background: var(--corail-action); color: #fff; }

/* ----------------------------------------------------------
   Tags (chips)
   ---------------------------------------------------------- */
.hd-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-small);
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: #fff; color: var(--blue-helderis); border: 1px solid var(--color-border);
}
.hd-tag--soft { background: var(--bleu-givre); border-color: transparent; }
.hd-tag__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: -4px; border: none; border-radius: 50%;
  background: transparent; color: var(--gris-texte); cursor: pointer; font-size: 14px; line-height: 1;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.hd-tag__x:hover { background: var(--rose-peche); color: var(--corail-press); }

/* ----------------------------------------------------------
   Cartes
   ---------------------------------------------------------- */
.hd-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-6); color: var(--color-text);
}
.hd-card--interactive {
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.hd-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hd-card--soft { background: var(--color-surface-soft); border-color: transparent; }
.hd-card--warm { background: var(--color-surface-warm); border-color: transparent; }
.hd-card--dark { background: var(--gradient-dark); border-color: transparent; color: var(--color-text-on-dark); }
.hd-card--rail { border-left: var(--rail-width) solid var(--corail-action); }
.hd-card__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.hd-card__title { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-h3); margin: 0; }
.hd-card__body { font-size: var(--text-body); line-height: var(--lh-normal); }
.hd-card__footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-3); }

/* ----------------------------------------------------------
   Champs de formulaire
   ---------------------------------------------------------- */
.hd-field { display: flex; flex-direction: column; gap: var(--space-2); }
.hd-label { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-small); color: var(--blue-helderis); }
.hd-label__req { color: var(--corail-action); margin-left: 2px; }
.hd-help { font-size: var(--text-caption); color: var(--gris-texte); line-height: 1.45; }
.hd-error { font-size: var(--text-caption); color: var(--color-danger); line-height: 1.45; }

.hd-input, .hd-textarea, .hd-select {
  font-family: var(--font-body); font-size: var(--text-body); color: var(--blue-helderis);
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: #fff; border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
  appearance: none;
}
.hd-textarea { min-height: 110px; padding: 12px 14px; line-height: var(--lh-normal); resize: vertical; }
.hd-input::placeholder, .hd-textarea::placeholder { color: var(--gris-discret); }
.hd-input:hover, .hd-textarea:hover, .hd-select:hover { border-color: var(--color-border-strong); }
.hd-input:focus, .hd-textarea:focus, .hd-select:focus {
  outline: none; border-color: var(--turquoise-ia); box-shadow: var(--shadow-focus);
}
.hd-input:disabled, .hd-textarea:disabled, .hd-select:disabled { background: #f4f7f8; color: var(--gris-discret); cursor: not-allowed; }
.hd-field--error .hd-input, .hd-field--error .hd-textarea, .hd-field--error .hd-select { border-color: var(--color-danger); }
.hd-field--error .hd-input:focus, .hd-field--error .hd-textarea:focus, .hd-field--error .hd-select:focus { box-shadow: 0 0 0 3px var(--color-danger-bg); }

/* Select avec chevron */
.hd-select-wrap { position: relative; display: block; }
.hd-select { padding-right: 42px; cursor: pointer; }
.hd-select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px;
  margin-top: -7px; border-right: 2px solid var(--teal-moyen); border-bottom: 2px solid var(--teal-moyen);
  transform: rotate(45deg); pointer-events: none;
}
.hd-input-group { display: flex; align-items: stretch; }
.hd-input-group .hd-input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }

/* ----------------------------------------------------------
   Cases à cocher · boutons radio
   ---------------------------------------------------------- */
.hd-choice { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-body); color: var(--blue-helderis); line-height: 1.4; }
.hd-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.hd-choice__box, .hd-choice__dot {
  flex: none; width: 24px; height: 24px; margin-top: 1px;
  border: 1.5px solid var(--color-border-strong); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.hd-choice__box { border-radius: var(--radius-xs); }
.hd-choice__dot { border-radius: 50%; }
.hd-choice__box svg { width: 15px; height: 15px; color: #fff; opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.hd-choice__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 0; transform: scale(0.4); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.hd-choice:hover .hd-choice__box, .hd-choice:hover .hd-choice__dot { border-color: var(--teal-moyen); }
.hd-choice input:checked + .hd-choice__box { background: var(--corail-action); border-color: var(--corail-action); }
.hd-choice input:checked + .hd-choice__box svg { opacity: 1; transform: scale(1); }
.hd-choice input:checked + .hd-choice__dot { background: var(--corail-action); border-color: var(--corail-action); }
.hd-choice input:checked + .hd-choice__dot::after { opacity: 1; transform: scale(1); }
.hd-choice input:focus-visible + .hd-choice__box, .hd-choice input:focus-visible + .hd-choice__dot { box-shadow: var(--shadow-focus); }
.hd-choice input:disabled ~ * { opacity: 0.5; }

/* ----------------------------------------------------------
   Interrupteur (switch)
   ---------------------------------------------------------- */
.hd-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-body); color: var(--blue-helderis); }
.hd-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.hd-switch__track {
  position: relative; flex: none; width: 52px; height: 30px; border-radius: var(--radius-pill);
  background: var(--gris-discret); transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.hd-switch__track::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out);
}
.hd-switch input:checked + .hd-switch__track { background: var(--corail-action); }
.hd-switch input:checked + .hd-switch__track::after { transform: translateX(22px); }
.hd-switch input:focus-visible + .hd-switch__track { box-shadow: var(--shadow-focus); }
.hd-switch input:disabled + .hd-switch__track { opacity: 0.5; }

/* ----------------------------------------------------------
   Alertes
   ---------------------------------------------------------- */
.hd-alert {
  display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md); border-left: 4px solid var(--teal-moyen);
  background: var(--color-info-bg); color: var(--blue-helderis); font-size: var(--text-body); line-height: var(--lh-normal);
}
.hd-alert__icon { flex: none; color: var(--teal-moyen); margin-top: 1px; }
.hd-alert__icon svg { width: 20px; height: 20px; }
.hd-alert__title { font-family: var(--font-heading); font-weight: var(--fw-bold); margin: 0 0 2px; font-size: var(--text-body); }
.hd-alert__body { margin: 0; }
.hd-alert--info    { background: var(--color-info-bg); border-color: var(--teal-moyen); }
.hd-alert--info .hd-alert__icon { color: var(--teal-moyen); }
.hd-alert--success { background: var(--color-success-bg); border-color: var(--color-success); }
.hd-alert--success .hd-alert__icon { color: var(--color-success); }
.hd-alert--warning { background: var(--color-warning-bg); border-color: var(--ambre-robot); }
.hd-alert--warning .hd-alert__icon { color: #a05a2f; }
.hd-alert--danger  { background: var(--color-danger-bg); border-color: var(--color-danger); }
.hd-alert--danger .hd-alert__icon { color: var(--color-danger); }

/* ----------------------------------------------------------
   Toast
   ---------------------------------------------------------- */
.hd-toast {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--nuit-profonde); color: #fff; box-shadow: var(--shadow-lg);
  font-size: var(--text-body); min-width: 280px;
}
.hd-toast__icon { flex: none; display: inline-flex; }
.hd-toast__icon svg { width: 20px; height: 20px; }
.hd-toast--success .hd-toast__icon { color: #6fd6b0; }
.hd-toast--danger .hd-toast__icon { color: #f3a098; }
.hd-toast--info .hd-toast__icon { color: var(--turquoise-ia); }
.hd-toast__body { flex: 1; }
.hd-toast__close { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; padding: 4px; display: inline-flex; border-radius: var(--radius-xs); }
.hd-toast__close:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* ----------------------------------------------------------
   Tooltip
   ---------------------------------------------------------- */
.hd-tooltip { position: relative; display: inline-flex; }
.hd-tooltip__bubble {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--nuit-profonde); color: #fff; font-family: var(--font-body); font-size: var(--text-caption);
  line-height: 1.4; padding: 8px 12px; border-radius: var(--radius-sm); white-space: nowrap;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out); z-index: var(--z-dropdown);
}
.hd-tooltip__bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--nuit-profonde); }
.hd-tooltip:hover .hd-tooltip__bubble, .hd-tooltip:focus-within .hd-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ----------------------------------------------------------
   Onglets
   ---------------------------------------------------------- */
.hd-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); }
.hd-tab {
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-body);
  color: var(--gris-texte); background: none; border: none; cursor: pointer;
  padding: var(--space-3) var(--space-4); position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  transition: color var(--dur-base) var(--ease-standard);
}
.hd-tab svg { width: 18px; height: 18px; }
.hd-tab::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--corail-action); transform: scaleX(0); transition: transform var(--dur-base) var(--ease-out); }
.hd-tab:hover { color: var(--blue-helderis); }
.hd-tab--active { color: var(--blue-helderis); }
.hd-tab--active::after { transform: scaleX(1); }
.hd-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

/* ----------------------------------------------------------
   Barre de progression
   ---------------------------------------------------------- */
.hd-progress { width: 100%; }
.hd-progress__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: var(--text-small); }
.hd-progress__label { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--blue-helderis); }
.hd-progress__value { font-variant-numeric: tabular-nums; color: var(--gris-texte); }
.hd-progress__track { width: 100%; height: 10px; border-radius: var(--radius-pill); background: var(--bleu-givre); overflow: hidden; }
.hd-progress__bar { height: 100%; border-radius: var(--radius-pill); background: var(--gradient-baseline); transition: width var(--dur-slow) var(--ease-out); }
.hd-progress--plain .hd-progress__bar { background: var(--corail-action); }
.hd-progress--teal .hd-progress__bar { background: var(--turquoise-ia); }

/* ----------------------------------------------------------
   Avatar
   ---------------------------------------------------------- */
.hd-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bleu-givre); color: var(--teal-moyen); font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-body); overflow: hidden; flex: none; }
.hd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hd-avatar--sm { width: 32px; height: 32px; font-size: var(--text-small); }
.hd-avatar--lg { width: 64px; height: 64px; font-size: var(--text-h3); }
.hd-avatar--warm { background: var(--rose-peche); color: var(--corail-press); }
.hd-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: var(--gris-discret); }
.hd-avatar__status--online { background: var(--color-success); }
.hd-avatar__status--busy { background: var(--corail-action); }

/* ----------------------------------------------------------
   Stat / indicateur
   ---------------------------------------------------------- */
.hd-stat { display: flex; flex-direction: column; gap: 4px; }
.hd-stat__label { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-overline); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--teal-moyen); }
.hd-stat__value { font-family: var(--font-heading); font-weight: var(--fw-extrabold); font-size: var(--text-h1); line-height: 1; color: var(--blue-helderis); font-variant-numeric: tabular-nums; }
.hd-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-small); font-weight: var(--fw-semibold); }
.hd-stat__delta svg { width: 14px; height: 14px; }
.hd-stat__delta--up { color: var(--color-success); }
.hd-stat__delta--down { color: var(--color-danger); }

/* =========================================================
   Helderis — Design System
   Point d'entrée CSS global. N'inclure QUE des @import ici.
   Tout fichier atteint par cette chaîne est livré aux consommateurs ;
   les @font-face de la chaîne déclarent les webfonts.
   ========================================================= */

/* Webfonts (Montserrat · Open Sans) */
/* Helderis — Webfonts
   Titrage : Montserrat (SemiBold → ExtraBold) · Corps : Open Sans (Regular/SemiBold)
   Substitution autorisée : Arial / Helvetica Neue.
   Binaires variables servis localement (assets/fonts) — sous-ensembles latin + latin-ext,
   suffisants pour le français. Source d'origine : Google Fonts (fonts.gstatic.com). */

/* ---- Montserrat (titrage) ---- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Open Sans (corps) ---- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/opensans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/opensans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* Fondations — design tokens */
/* Helderis — Couleurs
   Source : Charte graphique v1.0, §3. Règle 60-30-10 (Bleu + blanc 60 % · Turquoise 30 % · Corail 10 %).
   Accessibilité : texte courant en Bleu Helderis sur fond clair (11,2:1). Le Turquoise (2,8:1)
   est DÉCORATIF uniquement — jamais en texte courant sur blanc. */
:root {
  /* ---- Primaires ---- */
  --blue-helderis: #1B3A4B;   /* Pantone 7546 C — couleur principale */
  --turquoise-ia:  #40C8C8;   /* Pantone 3252 C — accent dynamique (décoratif) */
  --corail-action: #E8734A;   /* Pantone 7579 C — appel à l'action */

  /* ---- Secondaires ---- */
  --ambre-robot:   #C4784A;   /* Pantone 7522 C — lumière chaleureuse du robot */
  --teal-moyen:    #2A7B88;   /* Pantone 7714 C — sous-titres, liens accessibles */
  --bleu-givre:    #E8F4F4;   /* fonds décoratifs, zones de repos */
  --rose-peche:    #FDF0EB;   /* mise en évidence douce, alertes légères */

  /* ---- Neutres ---- */
  --nuit-profonde: #0D1117;   /* fonds sombres, premium */
  --blanc-pur:     #FFFFFF;
  --gris-texte:    #666666;   /* texte secondaire, légendes */
  --gris-discret:  #B0B0B0;   /* filets, séparateurs */

  /* ---- Variantes fonctionnelles (dérivées, harmonie oklch) ---- */
  --blue-helderis-700: #15303f;
  --blue-helderis-300: #4a6675;
  --corail-hover:  #D5623B;   /* corail assombri pour :hover */
  --corail-press:  #BE5230;   /* corail assombri pour :active */
  --turquoise-dark:#2FA9A9;
  --teal-hover:    #226470;

  /* ---- Surfaces & contours ---- */
  --color-bg:            var(--blanc-pur);
  --color-bg-alt:        var(--bleu-givre);   /* sections alternées */
  --color-bg-warm:       var(--rose-peche);
  --color-bg-dark:       var(--nuit-profonde);
  --color-surface:       var(--blanc-pur);
  --color-surface-soft:  var(--bleu-givre);
  --color-surface-warm:  var(--rose-peche);
  --color-border:        #DCE6E8;            /* contour de carte, hairline clair */
  --color-border-strong: var(--gris-discret);/* filets, séparateurs */
  --color-overlay:       rgba(13, 17, 23, 0.55);

  /* ---- Texte ---- */
  --color-text:          var(--blue-helderis);   /* corps de texte */
  --color-heading:       var(--blue-helderis);
  --color-subheading:    var(--teal-moyen);
  --color-text-muted:    var(--gris-texte);
  --color-text-subtle:   var(--gris-discret);
  --color-text-on-dark:  var(--blanc-pur);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.72);

  /* ---- Rôles d'action ---- */
  --color-primary:    var(--blue-helderis);
  --color-accent:     var(--turquoise-ia);   /* décoratif / grands titres */
  --color-cta:        var(--corail-action);
  --color-cta-hover:  var(--corail-hover);
  --color-cta-press:  var(--corail-press);
  --color-link:       var(--teal-moyen);     /* lien accessible (4,5:1+) */
  --color-link-hover: var(--blue-helderis);
  --color-focus-ring: rgba(64, 200, 200, 0.45);

  /* ---- États / alertes (info & warning issus de la palette ; success & danger dérivés) ---- */
  --color-info:        var(--teal-moyen);
  --color-info-bg:     var(--bleu-givre);
  --color-success:     #2E9B79;   /* dérivé — vert harmonisé */
  --color-success-bg:  #E4F4EE;
  --color-warning:     var(--ambre-robot);
  --color-warning-bg:  #FBEFE4;
  --color-danger:      #CB4439;   /* dérivé — rouge harmonisé */
  --color-danger-bg:   #FBE9E6;
  --color-highlight:   var(--corail-action);
  --color-highlight-bg:var(--rose-peche);

  /* ---- Data-visualisation (séquence officielle §5.3) ---- */
  --chart-1: var(--blue-helderis);
  --chart-2: var(--turquoise-ia);
  --chart-3: var(--corail-action);
  --chart-4: var(--ambre-robot);
  --chart-5: var(--teal-moyen);
  --chart-grid: #E6EDEF;
}

/* Helderis — Typographie
   Source : Charte graphique v1.0, §4.
   Titrage : Montserrat · Corps : Open Sans · Substitution : Arial.
   Échelle écran : corps minimum 16px (WCAG 2.1 AA, public sénior). */
:root {
  /* ---- Familles ---- */
  --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-fallback: Arial, 'Helvetica Neue', sans-serif;

  /* ---- Graisses ---- */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* ---- Échelle de taille (écran) ---- */
  --text-display: 3.25rem;  /* 52px — héros */
  --text-h1:      2.25rem;  /* 36px */
  --text-h2:      1.75rem;  /* 28px */
  --text-h3:      1.375rem; /* 22px */
  --text-h4:      1.125rem; /* 18px */
  --text-body-lg: 1.125rem; /* 18px */
  --text-body:    1rem;     /* 16px — minimum corps */
  --text-small:   0.875rem; /* 14px */
  --text-caption: 0.8125rem;/* 13px — légendes (≥12px) */
  --text-overline:0.75rem;  /* 12px — surtitres capitales */

  /* ---- Interlignes ---- */
  --lh-tight:   1.15; /* @kind font */
  --lh-snug:    1.3;  /* @kind font */
  --lh-normal:  1.6;  /* @kind font */
  --lh-relaxed: 1.75; /* @kind font */

  /* ---- Interlettrage ---- */
  --ls-tight:  -0.01em; /* @kind font */
  --ls-normal:  0;      /* @kind font */
  --ls-wide:    0.08em; /* @kind font */
  --ls-wider:   0.14em; /* @kind font */

  /* ---- Rôles composés ---- */
  --type-display-weight: var(--fw-extrabold); /* @kind font */
  --type-h-weight:       var(--fw-bold);      /* @kind font */
  --type-subh-weight:    var(--fw-semibold);  /* @kind font */
}

/* Helderis — Espacement, rayons & grille
   Base 4px. Marges généreuses pour la lisibilité sénior. */
:root {
  /* ---- Échelle d'espacement (base 4px) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Rayons d'angle ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;   /* cartes */
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---- Largeurs de contenu ---- */
  --container:        1200px; /* @kind spacing */
  --container-wide:   1320px; /* @kind spacing */
  --container-narrow: 760px;  /* @kind spacing */

  /* ---- Repères d'application (charte §6) ---- */
  --rail-width: 8px;     /* @kind spacing */
  --doc-margin: 25mm;    /* @kind spacing */
}

/* Helderis — Ombres, contours, transitions
   Esthétique : douce, chaleureuse, peu contrastée. Ombres teintées Bleu Helderis.
   Jamais d'ombre portée sur le logo (charte §2.5). */
:root {
  /* ---- Ombres ---- */
  --shadow-xs: 0 1px 2px rgba(13, 17, 23, 0.05);
  --shadow-sm: 0 2px 6px rgba(27, 58, 75, 0.06);
  --shadow-md: 0 6px 18px rgba(27, 58, 75, 0.09);
  --shadow-lg: 0 14px 36px rgba(27, 58, 75, 0.12);
  --shadow-xl: 0 28px 64px rgba(27, 58, 75, 0.16);
  --shadow-warm: 0 10px 30px rgba(232, 115, 74, 0.18); /* halo corail/ambré */
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ---- Contours ---- */
  --border-hairline: 1px solid var(--color-border);
  --border-rule:     1px solid var(--color-border-strong);
  --border-accent:   2px solid var(--corail-action);   /* filet titre/contenu */
  --border-turq:     1px solid var(--turquoise-ia);

  /* ---- Transitions ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
  --transition: all var(--dur-base) var(--ease-standard); /* @kind other */

  /* ---- Élévations z ---- */
  --z-base:     1;    /* @kind other */
  --z-dropdown: 100;  /* @kind other */
  --z-sticky:   200;  /* @kind other */
  --z-overlay:  900;  /* @kind other */
  --z-modal:    1000; /* @kind other */
  --z-toast:    1100; /* @kind other */

  /* ---- Dégradés de marque ---- */
  --gradient-baseline: linear-gradient(90deg, var(--corail-action) 0%, var(--turquoise-ia) 100%);
  --gradient-dark:     linear-gradient(160deg, #15303f 0%, var(--nuit-profonde) 100%);
  --gradient-givre:    linear-gradient(180deg, #ffffff 0%, var(--bleu-givre) 100%);
}


/* Couche composants pilotée par les tokens (.hd-*) */
/* =========================================================
   Helderis — Couche composants (.hd-*)
   Pilotée à 100 % par les design tokens. Esthétique : chaleureuse,
   accessible (public sénior), peu contrastée, généreuse en espace.
   Cibles tactiles ≥ 44px · corps ≥ 16px · focus turquoise visible.
   ========================================================= */

/* ----------------------------------------------------------
   Boutons
   ---------------------------------------------------------- */
.hd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--text-body);
  line-height: 1;
  letter-spacing: 0.01em;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  background: var(--corail-action);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.hd-btn:hover { background: var(--corail-hover); }
.hd-btn:active { background: var(--corail-press); transform: translateY(1px); }
.hd-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hd-btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* — Primaire (Bleu Helderis) — */
.hd-btn--primary { background: var(--blue-helderis); color: #fff; }
.hd-btn--primary:hover { background: var(--blue-helderis-700); }
.hd-btn--primary:active { background: #0f242f; }

/* — Secondaire (contour bleu) — */
.hd-btn--secondary { background: transparent; color: var(--blue-helderis); border-color: var(--color-border-strong); }
.hd-btn--secondary:hover { background: var(--bleu-givre); border-color: var(--teal-moyen); }
.hd-btn--secondary:active { background: #d9ecec; transform: translateY(1px); }

/* — Fantôme (texte seul) — */
.hd-btn--ghost { background: transparent; color: var(--teal-moyen); border-color: transparent; }
.hd-btn--ghost:hover { background: var(--bleu-givre); }
.hd-btn--ghost:active { background: #d9ecec; transform: translateY(1px); }

/* — Danger — */
.hd-btn--danger { background: var(--color-danger); color: #fff; }
.hd-btn--danger:hover { background: #b23a30; }
.hd-btn--danger:active { background: #9c322a; }

/* — Tailles — */
.hd-btn--sm { min-height: 38px; padding: 0 var(--space-4); font-size: var(--text-small); }
.hd-btn--lg { min-height: 56px; padding: 0 var(--space-8); font-size: var(--text-body-lg); }
.hd-btn--block { display: flex; width: 100%; }

.hd-btn:disabled, .hd-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

/* ----------------------------------------------------------
   Bouton-icône
   ---------------------------------------------------------- */
.hd-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1.5px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--blue-helderis); cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.hd-icon-btn:hover { background: var(--bleu-givre); color: var(--teal-moyen); }
.hd-icon-btn:active { background: #d9ecec; }
.hd-icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.hd-icon-btn svg { width: 20px; height: 20px; }
.hd-icon-btn--solid { background: var(--corail-action); color: #fff; }
.hd-icon-btn--solid:hover { background: var(--corail-hover); color: #fff; }
.hd-icon-btn--outline { border-color: var(--color-border-strong); }
.hd-icon-btn--sm { width: 36px; height: 36px; }
.hd-icon-btn--sm svg { width: 17px; height: 17px; }

/* ----------------------------------------------------------
   Badges
   ---------------------------------------------------------- */
.hd-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--text-caption); line-height: 1; letter-spacing: 0.02em;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--bleu-givre); color: var(--teal-moyen);
}
.hd-badge svg { width: 13px; height: 13px; }
.hd-badge--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hd-badge--neutral { background: #eef2f3; color: var(--gris-texte); }
.hd-badge--info    { background: var(--color-info-bg); color: var(--teal-moyen); }
.hd-badge--success { background: var(--color-success-bg); color: var(--color-success); }
.hd-badge--warning { background: var(--color-warning-bg); color: #a05a2f; }
.hd-badge--danger  { background: var(--color-danger-bg); color: var(--color-danger); }
.hd-badge--accent  { background: #d8f3f3; color: var(--turquoise-dark); }
.hd-badge--cta     { background: var(--rose-peche); color: var(--corail-press); }
.hd-badge--solid   { background: var(--corail-action); color: #fff; }

/* ----------------------------------------------------------
   Tags (chips)
   ---------------------------------------------------------- */
.hd-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-small);
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: #fff; color: var(--blue-helderis); border: 1px solid var(--color-border);
}
.hd-tag--soft { background: var(--bleu-givre); border-color: transparent; }
.hd-tag__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: -4px; border: none; border-radius: 50%;
  background: transparent; color: var(--gris-texte); cursor: pointer; font-size: 14px; line-height: 1;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.hd-tag__x:hover { background: var(--rose-peche); color: var(--corail-press); }

/* ----------------------------------------------------------
   Cartes
   ---------------------------------------------------------- */
.hd-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-6); color: var(--color-text);
}
.hd-card--interactive {
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.hd-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hd-card--soft { background: var(--color-surface-soft); border-color: transparent; }
.hd-card--warm { background: var(--color-surface-warm); border-color: transparent; }
.hd-card--dark { background: var(--gradient-dark); border-color: transparent; color: var(--color-text-on-dark); }
.hd-card--rail { border-left: var(--rail-width) solid var(--corail-action); }
.hd-card__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.hd-card__title { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-h3); margin: 0; }
.hd-card__body { font-size: var(--text-body); line-height: var(--lh-normal); }
.hd-card__footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-3); }

/* ----------------------------------------------------------
   Champs de formulaire
   ---------------------------------------------------------- */
.hd-field { display: flex; flex-direction: column; gap: var(--space-2); }
.hd-label { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-small); color: var(--blue-helderis); }
.hd-label__req { color: var(--corail-action); margin-left: 2px; }
.hd-help { font-size: var(--text-caption); color: var(--gris-texte); line-height: 1.45; }
.hd-error { font-size: var(--text-caption); color: var(--color-danger); line-height: 1.45; }

.hd-input, .hd-textarea, .hd-select {
  font-family: var(--font-body); font-size: var(--text-body); color: var(--blue-helderis);
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: #fff; border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
  appearance: none;
}
.hd-textarea { min-height: 110px; padding: 12px 14px; line-height: var(--lh-normal); resize: vertical; }
.hd-input::placeholder, .hd-textarea::placeholder { color: var(--gris-discret); }
.hd-input:hover, .hd-textarea:hover, .hd-select:hover { border-color: var(--color-border-strong); }
.hd-input:focus, .hd-textarea:focus, .hd-select:focus {
  outline: none; border-color: var(--turquoise-ia); box-shadow: var(--shadow-focus);
}
.hd-input:disabled, .hd-textarea:disabled, .hd-select:disabled { background: #f4f7f8; color: var(--gris-discret); cursor: not-allowed; }
.hd-field--error .hd-input, .hd-field--error .hd-textarea, .hd-field--error .hd-select { border-color: var(--color-danger); }
.hd-field--error .hd-input:focus, .hd-field--error .hd-textarea:focus, .hd-field--error .hd-select:focus { box-shadow: 0 0 0 3px var(--color-danger-bg); }

/* Select avec chevron */
.hd-select-wrap { position: relative; display: block; }
.hd-select { padding-right: 42px; cursor: pointer; }
.hd-select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px;
  margin-top: -7px; border-right: 2px solid var(--teal-moyen); border-bottom: 2px solid var(--teal-moyen);
  transform: rotate(45deg); pointer-events: none;
}
.hd-input-group { display: flex; align-items: stretch; }
.hd-input-group .hd-input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }

/* ----------------------------------------------------------
   Cases à cocher · boutons radio
   ---------------------------------------------------------- */
.hd-choice { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-body); color: var(--blue-helderis); line-height: 1.4; }
.hd-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.hd-choice__box, .hd-choice__dot {
  flex: none; width: 24px; height: 24px; margin-top: 1px;
  border: 1.5px solid var(--color-border-strong); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.hd-choice__box { border-radius: var(--radius-xs); }
.hd-choice__dot { border-radius: 50%; }
.hd-choice__box svg { width: 15px; height: 15px; color: #fff; opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.hd-choice__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 0; transform: scale(0.4); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.hd-choice:hover .hd-choice__box, .hd-choice:hover .hd-choice__dot { border-color: var(--teal-moyen); }
.hd-choice input:checked + .hd-choice__box { background: var(--corail-action); border-color: var(--corail-action); }
.hd-choice input:checked + .hd-choice__box svg { opacity: 1; transform: scale(1); }
.hd-choice input:checked + .hd-choice__dot { background: var(--corail-action); border-color: var(--corail-action); }
.hd-choice input:checked + .hd-choice__dot::after { opacity: 1; transform: scale(1); }
.hd-choice input:focus-visible + .hd-choice__box, .hd-choice input:focus-visible + .hd-choice__dot { box-shadow: var(--shadow-focus); }
.hd-choice input:disabled ~ * { opacity: 0.5; }

/* ----------------------------------------------------------
   Interrupteur (switch)
   ---------------------------------------------------------- */
.hd-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-body); color: var(--blue-helderis); }
.hd-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.hd-switch__track {
  position: relative; flex: none; width: 52px; height: 30px; border-radius: var(--radius-pill);
  background: var(--gris-discret); transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.hd-switch__track::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out);
}
.hd-switch input:checked + .hd-switch__track { background: var(--corail-action); }
.hd-switch input:checked + .hd-switch__track::after { transform: translateX(22px); }
.hd-switch input:focus-visible + .hd-switch__track { box-shadow: var(--shadow-focus); }
.hd-switch input:disabled + .hd-switch__track { opacity: 0.5; }

/* ----------------------------------------------------------
   Alertes
   ---------------------------------------------------------- */
.hd-alert {
  display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md); border-left: 4px solid var(--teal-moyen);
  background: var(--color-info-bg); color: var(--blue-helderis); font-size: var(--text-body); line-height: var(--lh-normal);
}
.hd-alert__icon { flex: none; color: var(--teal-moyen); margin-top: 1px; }
.hd-alert__icon svg { width: 20px; height: 20px; }
.hd-alert__title { font-family: var(--font-heading); font-weight: var(--fw-bold); margin: 0 0 2px; font-size: var(--text-body); }
.hd-alert__body { margin: 0; }
.hd-alert--info    { background: var(--color-info-bg); border-color: var(--teal-moyen); }
.hd-alert--info .hd-alert__icon { color: var(--teal-moyen); }
.hd-alert--success { background: var(--color-success-bg); border-color: var(--color-success); }
.hd-alert--success .hd-alert__icon { color: var(--color-success); }
.hd-alert--warning { background: var(--color-warning-bg); border-color: var(--ambre-robot); }
.hd-alert--warning .hd-alert__icon { color: #a05a2f; }
.hd-alert--danger  { background: var(--color-danger-bg); border-color: var(--color-danger); }
.hd-alert--danger .hd-alert__icon { color: var(--color-danger); }

/* ----------------------------------------------------------
   Toast
   ---------------------------------------------------------- */
.hd-toast {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--nuit-profonde); color: #fff; box-shadow: var(--shadow-lg);
  font-size: var(--text-body); min-width: 280px;
}
.hd-toast__icon { flex: none; display: inline-flex; }
.hd-toast__icon svg { width: 20px; height: 20px; }
.hd-toast--success .hd-toast__icon { color: #6fd6b0; }
.hd-toast--danger .hd-toast__icon { color: #f3a098; }
.hd-toast--info .hd-toast__icon { color: var(--turquoise-ia); }
.hd-toast__body { flex: 1; }
.hd-toast__close { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; padding: 4px; display: inline-flex; border-radius: var(--radius-xs); }
.hd-toast__close:hover { color: #fff; background: rgba(255,255,255,0.1); }

/* ----------------------------------------------------------
   Tooltip
   ---------------------------------------------------------- */
.hd-tooltip { position: relative; display: inline-flex; }
.hd-tooltip__bubble {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--nuit-profonde); color: #fff; font-family: var(--font-body); font-size: var(--text-caption);
  line-height: 1.4; padding: 8px 12px; border-radius: var(--radius-sm); white-space: nowrap;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out); z-index: var(--z-dropdown);
}
.hd-tooltip__bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--nuit-profonde); }
.hd-tooltip:hover .hd-tooltip__bubble, .hd-tooltip:focus-within .hd-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ----------------------------------------------------------
   Onglets
   ---------------------------------------------------------- */
.hd-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); }
.hd-tab {
  font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-body);
  color: var(--gris-texte); background: none; border: none; cursor: pointer;
  padding: var(--space-3) var(--space-4); position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
  transition: color var(--dur-base) var(--ease-standard);
}
.hd-tab svg { width: 18px; height: 18px; }
.hd-tab::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--corail-action); transform: scaleX(0); transition: transform var(--dur-base) var(--ease-out); }
.hd-tab:hover { color: var(--blue-helderis); }
.hd-tab--active { color: var(--blue-helderis); }
.hd-tab--active::after { transform: scaleX(1); }
.hd-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

/* ----------------------------------------------------------
   Barre de progression
   ---------------------------------------------------------- */
.hd-progress { width: 100%; }
.hd-progress__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: var(--text-small); }
.hd-progress__label { font-family: var(--font-heading); font-weight: var(--fw-semibold); color: var(--blue-helderis); }
.hd-progress__value { font-variant-numeric: tabular-nums; color: var(--gris-texte); }
.hd-progress__track { width: 100%; height: 10px; border-radius: var(--radius-pill); background: var(--bleu-givre); overflow: hidden; }
.hd-progress__bar { height: 100%; border-radius: var(--radius-pill); background: var(--gradient-baseline); transition: width var(--dur-slow) var(--ease-out); }
.hd-progress--plain .hd-progress__bar { background: var(--corail-action); }
.hd-progress--teal .hd-progress__bar { background: var(--turquoise-ia); }

/* ----------------------------------------------------------
   Avatar
   ---------------------------------------------------------- */
.hd-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bleu-givre); color: var(--teal-moyen); font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--text-body); overflow: hidden; flex: none; }
.hd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hd-avatar--sm { width: 32px; height: 32px; font-size: var(--text-small); }
.hd-avatar--lg { width: 64px; height: 64px; font-size: var(--text-h3); }
.hd-avatar--warm { background: var(--rose-peche); color: var(--corail-press); }
.hd-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: var(--gris-discret); }
.hd-avatar__status--online { background: var(--color-success); }
.hd-avatar__status--busy { background: var(--corail-action); }

/* ----------------------------------------------------------
   Stat / indicateur
   ---------------------------------------------------------- */
.hd-stat { display: flex; flex-direction: column; gap: 4px; }
.hd-stat__label { font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: var(--text-overline); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--teal-moyen); }
.hd-stat__value { font-family: var(--font-heading); font-weight: var(--fw-extrabold); font-size: var(--text-h1); line-height: 1; color: var(--blue-helderis); font-variant-numeric: tabular-nums; }
.hd-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-small); font-weight: var(--fw-semibold); }
.hd-stat__delta svg { width: 14px; height: 14px; }
.hd-stat__delta--up { color: var(--color-success); }
.hd-stat__delta--down { color: var(--color-danger); }

  * { box-sizing: border-box; }
  body { margin: 0; background: #fff; }
  img { display: block; max-width: 100%; }
  .hdx-root a { text-decoration: none; }
  .hdx-root a:not(.hd-btn) { color: inherit; }
  .licon { line-height: 0; }
  .licon svg { width: 100%; height: 100%; display: block; }
  .hdx-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 40px; }
  .site-nav a { cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 15px; padding: 9px 14px; border-radius: var(--radius-md); color: var(--gris-texte); transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); white-space: nowrap; }
  .site-nav a:hover { color: var(--blue-helderis); background: var(--bleu-givre); }
  .site-nav a[data-active="true"] { color: var(--blue-helderis); background: var(--bleu-givre); }
  .hero { position: relative; overflow: hidden; background: var(--gradient-dark); color: #fff; }
  .hero[data-theme="givre"] { background: var(--gradient-givre); color: var(--blue-helderis); }
  .hero-eyebrow { font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquoise-ia); margin: 0 0 16px; }
  .hero[data-theme="givre"] .hero-eyebrow { color: var(--teal-moyen); }
  .hero-sub { color: var(--color-text-on-dark-muted); }
  .hero[data-theme="givre"] .hero-sub { color: var(--gris-texte); }
  .hero-btn-ghost { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.34); }
  .hero-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.55); }
  .hero[data-theme="givre"] .hero-btn-ghost { background: transparent; color: var(--blue-helderis); border-color: var(--color-border-strong); }
  .hero[data-theme="givre"] .hero-btn-ghost:hover { background: var(--bleu-givre); }
  .lk { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--corail-action); transition: gap var(--dur-base) var(--ease-standard); }
  .lk:hover { gap: 11px; color: var(--corail-press); }
  .faq-q { transition: color var(--dur-base) var(--ease-standard); }
  .faq-q:hover { color: var(--teal-moyen); }
  .faq-chev svg { transition: transform var(--dur-base) var(--ease-standard); }
  .faq-chev[data-open="true"] svg { transform: rotate(180deg); }
  .blog-card { transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); cursor: pointer; }
  .blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .chip { cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; padding: 8px 15px; border-radius: var(--radius-pill); background: #fff; color: var(--gris-texte); border: 1px solid var(--color-border); transition: all var(--dur-base) var(--ease-standard); white-space: nowrap; }
  .chip:hover { border-color: var(--teal-moyen); color: var(--blue-helderis); }
  .chip[data-active="true"] { background: var(--blue-helderis); color: #fff; border-color: var(--blue-helderis); }
  .tl-item:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 60px; bottom: -28px; width: 2px; background: var(--color-border); }
  @keyframes hd-fade { from { transform: translateY(12px); } to { transform: none; } }
  .page-enter { animation: hd-fade 380ms var(--ease-out) both; }
  @keyframes hd-slide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

  /* ============ Micro-interactions & effets ============ */
  html { scroll-behavior: smooth; }
  .site-header { transition: box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); }
  .site-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(13,17,23,0.25); background: rgba(255,255,255,0.97); }
  .hd-card { transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
  .hd-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .hd-btn { transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); }
  .hd-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .hd-btn:active { transform: translateY(0); }
  .rv-hide { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  .rv-hide.rv-in { opacity: 1; transform: none; }

  /* ============ Menu (mobile) ============ */
  .nav-burger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; color: var(--blue-helderis); cursor: pointer; flex: none; padding: 0; }
  .nav-burger:hover { background: var(--bleu-givre); }
  .mobile-menu { display: none; }

  /* ============ Responsive ============ */
  @media (max-width: 1024px) {
    .hdx-container { max-width: 100%; padding: 0 28px; }
  }
  @media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr !important; }
    .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-3 { grid-template-columns: 1fr 1fr !important; }
    .grid-2 { grid-template-columns: 1fr !important; }
    .split { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 900px) {
    .site-nav, .nav-cta { display: none !important; }
    .nav-burger { display: inline-flex !important; }
    .mobile-menu { display: flex !important; flex-direction: column; gap: 2px; padding: 10px 0 20px; animation: hd-slide .24s var(--ease-out) both; }
    .mobile-menu a:not(.hd-btn) { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--blue-helderis); padding: 14px 12px; border-radius: var(--radius-md); }
    .mobile-menu a:not(.hd-btn):hover, .mobile-menu a:not(.hd-btn)[data-active="true"] { background: var(--bleu-givre); }
  }
  @media (max-width: 760px) {
    .hdx-container { padding: 0 20px; }
    .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
    .hd-btn { white-space: normal; text-align: center; }
    h1 { font-size: clamp(27px, 7.4vw, 40px) !important; line-height: 1.14 !important; }
    h2 { font-size: clamp(22px, 5.4vw, 31px) !important; line-height: 1.2 !important; }
  }
  @media (max-width: 460px) {
    .hdx-container { padding: 0 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rv-hide { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hd-card:hover, .hd-btn:hover { transform: none; }
  }

/* ===== Corps des articles (rendu Markdown) ===== */
.article-body p { margin: 0 0 22px; }
.article-body h2 { font-family: var(--font-heading); font-weight: 800; font-size: 23px; line-height: 1.25; color: var(--blue-helderis); margin: 36px 0 14px; }
.article-body h3 { font-family: var(--font-heading); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--blue-helderis); margin: 28px 0 12px; }
.article-body blockquote { margin: 32px 0; padding: 8px 0 8px 24px; border-left: 4px solid var(--corail-action); font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 1.4; color: var(--blue-helderis); }
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 22px; }
.article-body li { margin: 0 0 8px; }
.article-body a { color: var(--teal-moyen); text-decoration: underline; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 12px 0 22px; display: block; }
.article-body code { background: var(--bleu-givre); padding: 2px 6px; border-radius: 5px; font-size: 0.92em; }
.article-body strong { font-weight: 700; }
.article-body em { font-style: italic; }
.article-body hr { border: 0; border-top: 1px solid var(--color-border); margin: 32px 0; }


/* ===== Menu mobile des pages statiques (mentions légales, données) ===== */
.m-menu{display:none}
@media(max-width:900px){
  .m-menu.open{display:flex;flex-direction:column;gap:2px;padding:10px 0 20px;animation:hd-slide .24s var(--ease-out) both}
  .m-menu a:not(.hd-btn){font-family:var(--font-heading);font-weight:600;font-size:16px;color:var(--blue-helderis);padding:14px 12px;border-radius:var(--radius-md);text-decoration:none}
  .m-menu a:not(.hd-btn):hover{background:var(--bleu-givre)}
}