/* undust_charte.css — GÉNÉRÉ. Concaténation tokens.css + @theme Tailwind v4 + gem-host + contrat de forme.
   NE PAS ÉDITER. Source : tokens/build.mjs. Consommateurs : @import "undust_charte"; */
/* tokens.css — GÉNÉRÉ par tokens/build.mjs (3 couches DTCG). NE PAS ÉDITER. */
:root {
/* échelles (théme-indépendantes) */
  --white: #FFFFFF;
  --gray-50: #F5F5F3;
  --gray-75: #E4E4E1;
  --gray-100: #E8E8E6;
  --gray-200: #CDCDCB;
  --gray-300: #ABACB0;
  --gray-350: #9A9CA8;
  --gray-400: #85868E;
  --gray-450: #727580;
  --gray-500: #6B6D78;
  --gray-600: #52545F;
  --gray-700: #3A3C48;
  --gray-800: #282A36;
  --gray-850: #31333F;
  --gray-900: #1C1E2A;
  --gray-925: #0F1017;
  --gray-canvas: #F7F1E9;
  --orange-50: #FFF0E8;
  --orange-100: #FFDECC;
  --orange-200: #FFBD99;
  --orange-300: #FF9057;
  --orange-400: #FD702B;
  --orange-500: #FB5102;
  --orange-600: #DF4802;
  --orange-700: #C24002;
  --orange-800: #8F2F02;
  --orange-900: #5C1E01;
  --cyan-50: #E6F7F8;
  --cyan-100: #C2EDF0;
  --cyan-200: #7FDAE2;
  --cyan-300: #22B8CC;
  --cyan-400: #0FAEBE;
  --cyan-500: #00A5B0;
  --cyan-600: #00919B;
  --cyan-700: #007D86;
  --cyan-800: #005A61;
  --cyan-900: #003A3F;
  --status-success-light: #287845;
  --status-success-dark: #9ADDB6;
  --status-warning-light: #A04602;
  --status-warning-dark: #F9ED27;
  --status-critical-light: #4F1907;
  --status-critical-dark: #E1767C;
  --status-info-light: #105F79;
  --status-info-dark: #03B5E1;
  --status-pending-light: #4527BC;
  --status-pending-dark: #C481ED;
  --chart-1-light: #5D1621;
  --chart-1-dark: #D54A62;
  --chart-2-light: #1F4985;
  --chart-2-dark: #588DD8;
  --chart-3-light: #77560A;
  --chart-3-dark: #C79010;
  --chart-4-light: #14748B;
  --chart-4-dark: #1FB6DC;
  --chart-5-light: #C55323;
  --chart-5-dark: #EAA588;
  --chart-6-light: #936DD5;
  --chart-6-dark: #CDBBEB;
  --chart-7-light: #649A27;
  --chart-7-dark: #B3DF81;
  --chart-8-light: #37A571;
  --chart-8-dark: #C3EBD8;
  --ansi-black-light: #1C1E2A;
  --ansi-black-dark: #282A36;
  --ansi-red-light: #4F1907;
  --ansi-red-dark: #E1767C;
  --ansi-green-light: #287845;
  --ansi-green-dark: #10C83B;
  --ansi-yellow-light: #A04602;
  --ansi-yellow-dark: #F9ED27;
  --ansi-blue-light: #2950C2;
  --ansi-blue-dark: #92A8E8;
  --ansi-magenta-light: #4527BC;
  --ansi-magenta-dark: #C481ED;
  --ansi-cyan-light: #007D86;
  --ansi-cyan-dark: #22B8CC;
  --ansi-white-light: #52545F;
  --ansi-white-dark: #E8E8E6;
  --ansi-bright-black-light: #3A3C48;
  --ansi-bright-black-dark: #6B6D78;
  --ansi-bright-red-light: #8E2130;
  --ansi-bright-red-dark: #EE9DA7;
  --ansi-bright-green-light: #1D653B;
  --ansi-bright-green-dark: #9ADDB6;
  --ansi-bright-yellow-light: #836407;
  --ansi-bright-yellow-dark: #FAEA9E;
  --ansi-bright-blue-light: #4265D0;
  --ansi-bright-blue-dark: #B3C2F2;
  --ansi-bright-magenta-light: #783EBB;
  --ansi-bright-magenta-dark: #D6B2EC;
  --ansi-bright-cyan-light: #065A6B;
  --ansi-bright-cyan-dark: #7ADDF0;
  --ansi-bright-white-light: #0F1017;
  --ansi-bright-white-dark: #F5F5F3;
  --seq-1: #DAF2F7;
  --seq-2: #A2DDEB;
  --seq-3: #5EC4DD;
  --seq-4: #29A5C3;
  --seq-5: #1F7D94;
  --seq-6: #155464;
  --div-1: #9D380D;
  --div-2: #E36E3C;
  --div-3: #E4B594;
  --div-4: #E0E0E2;
  --div-5: #8AC8D8;
  --div-6: #1B9DBD;
  --div-7: #066178;
  --basecamp-page: #0B151B;
  --basecamp-canvas: #1B2930;
  --font-sans: Aspekta, 'Ponctuation FR', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --type-nombre-size: clamp(96px, 18vw, 400px);
  --type-nombre-size-px: 200px;
  --type-nombre-weight: 900;
  --type-nombre-leading: 0.82;
  --type-nombre-tracking: -0.03em;
  --type-display-size: 72px;
  --type-display-size-px: 72px;
  --type-display-weight: 800;
  --type-display-leading: 1;
  --type-display-tracking: -0.025em;
  --type-h1-size: 48px;
  --type-h1-size-px: 48px;
  --type-h1-weight: 800;
  --type-h1-leading: 1.08;
  --type-h1-tracking: -0.02em;
  --type-h2-size: 32px;
  --type-h2-size-px: 32px;
  --type-h2-weight: 800;
  --type-h2-leading: 1.15;
  --type-h2-tracking: -0.015em;
  --type-h3-size: 22px;
  --type-h3-size-px: 22px;
  --type-h3-weight: 700;
  --type-h3-leading: 1.3;
  --type-h3-tracking: -0.01em;
  --type-body-size: 16px;
  --type-body-size-px: 16px;
  --type-body-weight: 500;
  --type-body-leading: 1.6;
  --type-body-tracking: 0em;
  --type-body-strong-size: 16px;
  --type-body-strong-size-px: 16px;
  --type-body-strong-weight: 700;
  --type-body-strong-leading: 1.6;
  --type-body-strong-tracking: 0em;
  --type-small-size: 14px;
  --type-small-size-px: 14px;
  --type-small-weight: 500;
  --type-small-leading: 1.55;
  --type-small-tracking: 0em;
  --type-cotation-size: 13px;
  --type-cotation-size-px: 13px;
  --type-cotation-weight: 400;
  --type-cotation-leading: 1.5;
  --type-cotation-tracking: 0.02em;
  --type-ref-size: 12px;
  --type-ref-size-px: 12px;
  --type-ref-weight: 400;
  --type-ref-leading: 1.4;
  --type-ref-tracking: 0.08em;
  --type-etat-size: 12px;
  --type-etat-size-px: 12px;
  --type-etat-weight: 700;
  --type-etat-leading: 1.4;
  --type-etat-tracking: 0.08em;
  --type-legende-size: 12px;
  --type-legende-size-px: 12px;
  --type-legende-weight: 500;
  --type-legende-leading: 1.5;
  --type-legende-tracking: 0.01em;
  --type-ui-compact-size: 13px;
  --type-ui-compact-size-px: 13px;
  --type-ui-compact-weight: 500;
  --type-ui-compact-leading: 1.4;
  --type-ui-compact-tracking: 0em;
  --type-terminal-size: 13px;
  --type-terminal-size-px: 13px;
  --type-terminal-weight: 400;
  --type-terminal-leading: 1.45;
  --type-terminal-tracking: 0em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-0: 0px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-none: 0px;
  --radius-interactive: 0px;
  --radius-card: 8px;
  --radius-window: 16px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;
  --border-width-hairline: 1px;
  --border-width-strong: 2px;
  --border-width-frame: 3px;
  --square-dot: 0.17em;
  --square-bullet: 6px;
  --square-marker: 40px;
  --square-tick: 4px;
  --breakpoint-telephone: 375px;
  --breakpoint-volet: 640px;
  --breakpoint-poste: 960px;
  --breakpoint-large: 1280px;
  --breakpoint-mur: 1680px;
  --motion-duree-1: 120ms;
  --motion-duree-2: 240ms;
  --motion-duree-3: 480ms;
  --motion-courbe-entree: cubic-bezier(0.2, 0, 0, 1);
  --motion-courbe-sortie: cubic-bezier(0.4, 0, 1, 1);
  --motion-autorisee: 1200ms;
  --layer-contenu: 0;
  --layer-collant: 100;
  --layer-superpose: 300;
  --layer-modal: 400;
  --layer-notification: 500;
  --control-height: 40px;
  --term-bg: #16171F;
  --term-ink: #E8E8E6;
  --term-accent: #FF9057;
  --term-ok: #43C46F;
  --term-err: #DC6F83;
  --densite-rang-h: 36px;
  --densite-cell-y: 8px;
  --densite-cell-x: 12px;
  --densite-type-rang: 14px;
/* sémantique — thème clair (JS-off = clair, N8) */
  --surface: #FFFFFF;
  --surface-raised: #F5F5F3;
  --text-primary: #1C1E2A;
  --text-secondary: #52545F;
  --border: #85868E;
  --border-control: #85868E;
  --border-color-strong: #1C1E2A;
  --focus-ring: #1C1E2A;
  --accent: #FB5102;
  --accent-hover: #C24002;
  --on-accent: #1C1E2A;
  --on-accent-hover: #FFFFFF;
  --text-accent: #C24002;
  --text-accent-raised: #C24002;
  --tension: #00A5B0;
  --on-tension: #1C1E2A;
  --text-tension: #007D86;
  --text-tension-raised: #007D86;
  --status-success: #287845;
  --status-warning: #A04602;
  --status-critical: #4F1907;
  --status-info: #105F79;
  --status-pending: #4527BC;
  --scrim: rgba(28, 30, 42, 0.56);
  --diff-add-bg: #DFF2E4;
  --diff-add-ink: #1E5B33;
  --diff-del-bg: #F6E3E6;
  --diff-del-ink: #8A2433;
/* dataviz catégorielle n=8 — alias de thème (RT4 / oLJndnpQ) */
  --chart-1: var(--chart-1-light);
  --chart-2: var(--chart-2-light);
  --chart-3: var(--chart-3-light);
  --chart-4: var(--chart-4-light);
  --chart-5: var(--chart-5-light);
  --chart-6: var(--chart-6-light);
  --chart-7: var(--chart-7-light);
  --chart-8: var(--chart-8-light);
}
[data-theme="dark"], html.dark {
  --surface: #0B151B;
  --surface-raised: #1B2930;
  --text-primary: #F5F5F3;
  --text-secondary: #ABACB0;
  --border: #85868E;
  --border-control: #727580;
  --border-color-strong: #F5F5F3;
  --focus-ring: #F5F5F3;
  --accent: #FB5102;
  --accent-hover: #FF9057;
  --on-accent: #1C1E2A;
  --on-accent-hover: #1C1E2A;
  --text-accent: #FB5102;
  --text-accent-raised: #FF9057;
  --tension: #00A5B0;
  --on-tension: #1C1E2A;
  --text-tension: #22B8CC;
  --text-tension-raised: #22B8CC;
  --status-success: #9ADDB6;
  --status-warning: #F9ED27;
  --status-critical: #E1767C;
  --status-info: #03B5E1;
  --status-pending: #C481ED;
  --scrim: rgba(15, 16, 23, 0.64);
  --diff-add-bg: #1E3327;
  --diff-add-ink: #43C46F;
  --diff-del-bg: #3A2228;
  --diff-del-ink: #DC6F83;
  --chart-1: var(--chart-1-dark);
  --chart-2: var(--chart-2-dark);
  --chart-3: var(--chart-3-dark);
  --chart-4: var(--chart-4-dark);
  --chart-5: var(--chart-5-dark);
  --chart-6: var(--chart-6-dark);
  --chart-7: var(--chart-7-dark);
  --chart-8: var(--chart-8-dark);
}
[data-density="confortable"] {
  --densite-rang-h: 48px;
  --densite-cell-y: 12px;
  --densite-cell-x: 16px;
  --densite-type-rang: 16px;
}
[data-density="compacte"] {
  --densite-rang-h: 28px;
  --densite-cell-y: 4px;
  --densite-cell-x: 8px;
  --densite-type-rang: 13px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* undust.tailwind.css — GÉNÉRÉ (mappage COMPLÉMENTAIRE ; la référence est tokens.css). NE PAS ÉDITER. */
@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));
@theme {
  --color-surface: var(--surface);
  --color-surface-raised: var(--surface-raised);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-border: var(--border);
  --color-border-control: var(--border-control);
  --color-border-color-strong: var(--border-color-strong);
  --color-focus-ring: var(--focus-ring);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-on-accent: var(--on-accent);
  --color-on-accent-hover: var(--on-accent-hover);
  --color-text-accent: var(--text-accent);
  --color-text-accent-raised: var(--text-accent-raised);
  --color-tension: var(--tension);
  --color-on-tension: var(--on-tension);
  --color-text-tension: var(--text-tension);
  --color-text-tension-raised: var(--text-tension-raised);
  --color-status-success: var(--status-success);
  --color-status-warning: var(--status-warning);
  --color-status-critical: var(--status-critical);
  --color-status-info: var(--status-info);
  --color-status-pending: var(--status-pending);
  --color-scrim: var(--scrim);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;
  --radius-none: var(--radius-none);
  --radius-interactive: var(--radius-interactive);
  --radius-card: var(--radius-card);
  --radius-window: var(--radius-window);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-chart-6: var(--chart-6);
  --color-chart-7: var(--chart-7);
  --color-chart-8: var(--chart-8);
  /* v1 aliases — deprecated 2.0, drop 3.0 */
  --color-undust-bg: var(--surface);
  --color-undust-surface: var(--surface-raised);
  --color-undust-surface-hover: var(--surface-raised);
  --color-undust-accent: var(--accent);
  --color-undust-accent-hover: var(--accent-hover);
}

/* gem-host.css — règles autonomes pour les partials brand/toggle + D5.
   Concaténé dans undust_charte.css (sync preset). Score/vote/template
   n'importent pas composants.css : ces règles DOIVENT vivre ici.
   Zéro hex. */

/* S8/S9 — UI N1 interactive : parité clair/sombre + pas de font-boosting. */
html {
  color-scheme: light dark;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
html.dark, [data-theme="dark"] {
  color-scheme: dark;
}

/* D5 — halo surface dans l'offset (le ring ne s'adosse jamais à accent-hover). */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--border-width-strong) solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--surface);
}

.marque {
  font-weight: 800;
  font-family: var(--font-sans);
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1;
}
.marque i {
  display: inline-block;
  width: var(--square-tick);
  height: var(--square-tick);
  background: var(--accent);
  margin-left: 2px;
  vertical-align: 0.12em;
}
.marque-lien {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text-primary);
}

.chrome-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 32px;
  min-width: 32px;
  padding-inline: var(--space-2);
  background: none;
  border: none;
  border-radius: var(--radius-interactive);
  font-family: var(--font-sans);
  font-size: var(--type-ui-compact-size);
  font-weight: var(--type-ui-compact-weight);
  color: var(--text-secondary);
  cursor: pointer;
}
.chrome-bouton:hover { color: var(--text-primary); }
/* Langue par formulaire (PATCH/POST) : le form ne casse pas la rangée.
   Règle 3.2.0 : en couche (N15), l'app garde la main. */
@layer components {
  .chrome-langue-form { display: inline-flex; margin: 0; }
}
.glyphe { width: 16px; height: 16px; display: block; }

/* Toggle clair/sombre — interrupteur à curseur accent (N8, sémantique
   d'ÉTAT). Référence de design : chrome f7 (csee), promu canonique 30/09.
   La position du curseur et le picto visible suivent [data-theme] :
   aucune mise à jour JS nécessaire au rendu, la bascule est instantanée. */
.undust-theme-toggle {
  display: block;
  box-sizing: border-box;
  width: 44px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: var(--border-width-strong) solid var(--border-color-strong);
  background: var(--surface);
  cursor: pointer;
  flex: none;
  position: relative;
  border-radius: var(--radius-interactive); /* interrupteur = contrôle (N16) */
  color: var(--on-accent);
}
.undust-theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  display: grid;
  place-items: center;
  transition: transform var(--motion-duree-1) var(--motion-courbe-entree);
}
[data-theme="dark"] .undust-theme-toggle__thumb { transform: translateX(20px); }
.undust-theme-toggle__icon {
  display: none;
  width: 10px;
  height: 10px;
  stroke: var(--on-accent);
  pointer-events: none;
}
/* Soleil = surface du côté clair, pas on-accent sombre. */
.undust-theme-toggle__icon--sun { stroke: var(--surface); }
:root:not([data-theme="dark"]) .undust-theme-toggle__icon--sun { display: block; }
[data-theme="dark"] .undust-theme-toggle__icon--moon { display: block; }
@media (prefers-reduced-motion: reduce) {
  .undust-theme-toggle__thumb { transition: none; }
}


/* Contrat de forme (N16 amendé 06/10, arbitrage A6). Comportement PAR DÉFAUT
   depuis 3.0.0 : ce fichier est concaténé dans undust_charte.css ; aucune
   activation, aucun attribut racine.

   Classification UNIQUE par priorité — marque (none) > fenêtre > carte >
   contrôle (interactive). Chaque règle exclut les rôles qui la précèdent :
   un élément n'a qu'un rôle, le même que celui que mesure le ThemeContract
   (listes identiques, test de parité). Une carte ou une fenêtre cliquable
   garde son rôle ; un bouton .avatar est un contrôle (carré) — seule l'image
   qu'il contient peut rester ronde ; les pastilles d'état gardent leur cercle.

   !important dans la couche components : bat les utilitaires rounded-*,
   tout CSS auteur normal, tout !important hors couche et tout !important
   des couches déclarées APRÈS components (utilities) — pour !important,
   la couche la plus ANCIENNE gagne. Limites : !important dans une couche
   déclarée AVANT (theme, base), style inline !important, shadow DOM
   (non atteint) — le ThemeContract détecte les deux premiers. */
@layer components {
  /* 1. Marque et cellules. */
  :is(.monogramme, .btn-hero, table, th, td) {
    border-radius: var(--radius-none) !important;
  }

  /* 2. Fenêtre du chrome (bord à bord ≤ 640 : coins bas droits). */
  .chrome-fenetre:not(.monogramme, .btn-hero, table, th, td) {
    border-radius: var(--radius-window) !important;
  }
  @container (max-width: 640px) {
    .chrome-fenetre:not(.monogramme, .btn-hero, table, th, td) {
      border-radius: var(--radius-window) var(--radius-window) 0 0 !important;
    }
  }

  /* 3. Cartes de la gem. */
  :is(.carte-dossier, fieldset.groupe, .carte-radio, .toast, dialog.dialogue, .vide, .page-erreur, .page-connexion):not(
      .monogramme, .btn-hero, table, th, td, .chrome-fenetre) {
    border-radius: var(--radius-card) !important;
  }

  /* 4. Contrôles interactifs. */
  :is(button, .btn, .connexion-cta, .chrome-geste, .chrome-bouton,
      .undust-theme-toggle, .pagination > a, .pagination > span,
      [role="button"], [role="tab"], [role="switch"], [role="checkbox"], [role="radio"],
      [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"],
      [role="combobox"], [role="textbox"], [role="searchbox"], [role="spinbutton"],
      .champ input, .champ textarea, .champ select,
      .case input, .radio input, .carte-radio input, .inter input,
      input:not([type="hidden"]), select, textarea):not(
      .monogramme, .btn-hero, table, th, td, .chrome-fenetre,
      .carte-dossier, fieldset.groupe, .carte-radio, .toast, dialog.dialogue, .vide, .page-erreur, .page-connexion,
      .pastille) {
    border-radius: var(--radius-interactive) !important;
  }
}