/* DYS.MA - interface v2 : socle.

   PORTEE : `body.ui-v2 .ui-root`. Ces feuilles ne se chargent que sur les
   pages refondues (voir templates/ui/_assets.html).

   SPECIFICITE DOCUMENTEE (pas de !important) : les feuilles du shell qui
   passent APRES celle-ci (shell-private.css) portent des selecteurs de
   specificite (0,2,2), par exemple `.family-content form button[type="submit"]`.
   Chaque regle de composant commence donc par `body.ui-v2 .ui-root` (0,3,0)
   puis une classe `ui-*` (0,1,0) : (0,4,0) au minimum, qui l'emporte sur
   tout selecteur de classe + balise du shell sans ordre de chargement.

   Aucune classe generique du site (.btn .in .row .tag .kpi .seg .tab .cal
   .tl .hint .count .req) n'est employee. Les proprietes que le shell fixe
   sur button[type=submit], fieldset et label (hauteur, marges, fond, trait,
   graisse, couleur) sont reposees explicitement par chaque composant.
   Aucune couleur en dur : tout vient de design-system/tokens.css. */

body.ui-v2 .ui-root {
  color: var(--ds-text);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-fs-md);
  line-height: var(--ds-lh);
  font-variant-numeric: tabular-nums;
}
body.ui-v2 .ui-root *, body.ui-v2 .ui-root *::before, body.ui-v2 .ui-root *::after { box-sizing: border-box; }
body.ui-v2 .ui-root h2, body.ui-v2 .ui-root h3, body.ui-v2 .ui-root h4 {
  margin: 0; font-family: var(--ds-font-sans); font-weight: 600; letter-spacing: 0;
  line-height: var(--ds-lh-tight); color: var(--ds-text);
}
body.ui-v2 .ui-root h2 { font-size: var(--ds-fs-xl); }
body.ui-v2 .ui-root h3 { font-size: var(--ds-fs-lg); }
body.ui-v2 .ui-root h4 { font-size: var(--ds-fs-md); }
body.ui-v2 .ui-root p { margin: 0; }
body.ui-v2 .ui-root ul, body.ui-v2 .ui-root ol { margin: 0; padding: 0; list-style: none; }
body.ui-v2 .ui-root a { color: var(--ds-primary-text); }
/* [hidden] doit gagner sur `display` des composants : specificite (0,4,1) > (0,3,1). */
body.ui-v2 .ui-root [hidden][hidden] { display: none; }

/* Focus : visible partout, jamais supprime sans remplacement. */
body.ui-v2 .ui-root :focus-visible {
  outline: 2px solid var(--ds-focus-ring);
  outline-offset: 2px;
}

body.ui-v2 .ui-root .ui-sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
body.ui-v2 .ui-root .ui-muted { color: var(--ds-text-muted); }
body.ui-v2 .ui-root .ui-small { font-size: var(--ds-fs-sm); }
body.ui-v2 .ui-root .ui-stack, body.ui-v2 .ui-root.ui-stack { display: grid; gap: var(--ds-sp-4); }
body.ui-v2 .ui-root.ui-stack > * { min-inline-size: 0; }
body.ui-v2 .ui-root .ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-2); }
body.ui-v2 .ui-root .ui-grow { flex: 1 1 auto; min-inline-size: 0; }

/* Mouvement reduit : plus aucune transition ni animation. */
@media (prefers-reduced-motion: reduce) {
  body.ui-v2 .ui-root *, body.ui-v2 .ui-root *::before, body.ui-v2 .ui-root *::after {
    animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; scroll-behavior: auto;
  }
}

/* Icône du sprite (taille du texte, couleur du texte). */
body.ui-v2 .ui-root .ui-icon { inline-size: 1.1em; block-size: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }