/* DYS.MA - interface v2 : controles (bouton, champ, liste, segmente, onglets, interrupteur).
   Hauteurs : dense 32 / standard 36 / tactile 44 (sous 768 px, tout passe a 44).
   Etats : repos, survol, focus (socle), desactive, erreur, chargement. */

body.ui-v2 .ui-root .ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-sp-2);
  min-height: var(--ds-ctl); padding: 0 var(--ds-sp-4); margin: 0;
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-md);
  background: var(--ds-surface); background-image: none; box-shadow: none;
  color: var(--ds-text); font: inherit; font-size: var(--ds-fs-md); font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
}
body.ui-v2 .ui-root .ui-btn:hover { background: var(--ds-surface-muted); border-color: var(--ds-text-muted); }
body.ui-v2 .ui-root .ui-btn.is-primary { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-text-on-primary); }
body.ui-v2 .ui-root .ui-btn.is-primary:hover { background: var(--ds-primary-strong); border-color: var(--ds-primary-strong); }
body.ui-v2 .ui-root .ui-btn.is-danger { border-color: var(--ds-danger); color: var(--ds-danger-text); }
body.ui-v2 .ui-root .ui-btn.is-danger:hover { background: var(--ds-danger-soft); }
body.ui-v2 .ui-root .ui-btn.is-quiet { border-color: transparent; background: transparent; color: var(--ds-primary-text); }
body.ui-v2 .ui-root .ui-btn.is-quiet:hover { background: var(--ds-primary-soft); }
body.ui-v2 .ui-root .ui-btn.is-dense { min-height: var(--ds-ctl-dense); padding: 0 var(--ds-sp-3); font-size: var(--ds-fs-sm); }
body.ui-v2 .ui-root .ui-btn.is-icon { min-inline-size: var(--ds-ctl); padding: 0; font-size: var(--ds-fs-xl); }
body.ui-v2 .ui-root .ui-btn:disabled, body.ui-v2 .ui-root .ui-btn[aria-disabled="true"] {
  background: var(--ds-surface-muted); border-color: var(--ds-border); color: var(--ds-text-muted); cursor: not-allowed;
}
body.ui-v2 .ui-root .ui-btn[aria-busy="true"] { cursor: progress; }
body.ui-v2 .ui-root .ui-btn[aria-busy="true"]::before {
  content: ""; inline-size: 14px; block-size: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent;
  animation: ui-spin .8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* Champs : label au-dessus, aide et erreur reliees par aria-describedby. */
body.ui-v2 .ui-root .ui-field {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-sp-1); margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; min-inline-size: 0;
}
body.ui-v2 .ui-root .ui-label {
  display: block; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-text);
}
body.ui-v2 .ui-root .ui-label .ui-opt { font-weight: 400; color: var(--ds-text-muted); }
body.ui-v2 .ui-root .ui-input, body.ui-v2 .ui-root .ui-select, body.ui-v2 .ui-root .ui-textarea {
  inline-size: 100%; min-height: var(--ds-ctl); margin: 0; padding: 0 var(--ds-sp-3);
  border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-md);
  background: var(--ds-surface); color: var(--ds-text); font: inherit; font-size: var(--ds-fs-md); font-weight: 400;
  transition: border-color var(--ds-dur-fast) var(--ds-ease);
}
body.ui-v2 .ui-root :is(.ui-input, .ui-select, .ui-textarea, input, select, textarea):focus,
body.ui-v2 .ui-root :is(.ui-input, .ui-select, .ui-textarea, input, select, textarea):focus-visible {
  outline: 0; box-shadow: none; border-color: var(--ds-primary);
}
body.ui-v2 .ui-root .ui-textarea { padding-block: var(--ds-sp-2); min-height: 72px; resize: vertical; }
body.ui-v2 .ui-root .ui-select { padding-inline-end: var(--ds-sp-6); }
body.ui-v2 .ui-root .ui-input::placeholder { color: var(--ds-text-muted); opacity: 1; }
body.ui-v2 .ui-root .ui-input:hover, body.ui-v2 .ui-root .ui-select:hover, body.ui-v2 .ui-root .ui-textarea:hover { border-color: var(--ds-text-muted); }
body.ui-v2 .ui-root .ui-input:disabled, body.ui-v2 .ui-root .ui-select:disabled {
  background: var(--ds-surface-muted); color: var(--ds-text-muted); cursor: not-allowed;
}
body.ui-v2 .ui-root .ui-input[aria-invalid="true"], body.ui-v2 .ui-root .ui-select[aria-invalid="true"] {
  border-color: var(--ds-danger); border-width: 2px;
}
body.ui-v2 .ui-root .ui-help { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); }
body.ui-v2 .ui-root .ui-error { font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-danger-text); }
body.ui-v2 .ui-root .ui-check { display: flex; align-items: center; gap: var(--ds-sp-2); min-height: var(--ds-ctl); margin: 0; padding: 0; border: 0; background: none; font-weight: 400; }
body.ui-v2 .ui-root .ui-check input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--ds-primary); }

/* Reglage chiffre d'une regle : une seule ligne [libelle] [champ] [unite] [bouton], l'aide dessous,
   le tout dans un encart discret sous la regle qu'il precise. */
body.ui-v2 .ui-root .ui-setting {
  display: grid; gap: var(--ds-sp-2); margin: 0; padding: var(--ds-sp-3); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md); background: var(--ds-surface-muted);
}
body.ui-v2 .ui-root .ui-setting-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-2) var(--ds-sp-3); }
body.ui-v2 .ui-root .ui-setting-row .ui-label { flex: 1 1 auto; min-inline-size: 8.5em; }
body.ui-v2 .ui-root .ui-setting .ui-input { inline-size: 80px; flex: none; text-align: end; }
body.ui-v2 .ui-root .ui-setting-unit { color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }
body.ui-v2 .ui-root .ui-setting .ui-btn { flex: none; }

/* Controle segmente : groupe de choix exclusifs, un seul actif. */
body.ui-v2 .ui-root .ui-seg {
  display: inline-flex; padding: 2px; gap: 2px; margin: 0; border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-r-md); background: var(--ds-surface-muted);
}
body.ui-v2 .ui-root .ui-seg-item {
  display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--ds-ctl) - 6px);
  padding: 0 var(--ds-sp-4); margin: 0; border: 0; border-radius: var(--ds-r-sm); background: transparent; box-shadow: none;
  color: var(--ds-text); font: inherit; font-size: var(--ds-fs-md); font-weight: 500; text-decoration: none; cursor: pointer;
}
body.ui-v2 .ui-root .ui-seg-item:hover { background: var(--ds-surface-sunken); }
body.ui-v2 .ui-root .ui-seg-item[aria-selected="true"], body.ui-v2 .ui-root .ui-seg-item[aria-pressed="true"] {
  background: var(--ds-primary); color: var(--ds-text-on-primary); font-weight: 600;
}

/* Interrupteur : bouton role=switch ; l'etat est aussi ecrit (Active / Desactive). */
body.ui-v2 .ui-root .ui-switch {
  display: inline-flex; align-items: center; gap: var(--ds-sp-2); min-height: var(--ds-ctl-touch); padding: 0; margin: 0;
  border: 0; background: transparent; color: var(--ds-text); font: inherit; font-weight: 500; cursor: pointer;
}
body.ui-v2 .ui-root .ui-switch-track {
  position: relative; inline-size: 40px; block-size: 24px; flex: none; border-radius: var(--ds-r-pill);
  border: 2px solid var(--ds-neutral-line); background: var(--ds-surface);
  transition: background-color var(--ds-dur-fast) var(--ds-ease);
}
body.ui-v2 .ui-root .ui-switch-track::after {
  content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 16px; block-size: 16px;
  border-radius: 50%; background: var(--ds-neutral-line); transition: transform var(--ds-dur-fast) var(--ds-ease);
}
body.ui-v2 .ui-root .ui-switch[aria-checked="true"] .ui-switch-track { background: var(--ds-primary); border-color: var(--ds-primary); }
body.ui-v2 .ui-root .ui-switch[aria-checked="true"] .ui-switch-track::after { background: var(--ds-text-on-primary); transform: translateX(16px); }
/* Le shell colore tout button[type=submit] au survol, a l'appui et au focus (vert, specificite
   0,3,2). L'interrupteur repose explicitement ces etats : (0,4,1) l'emporte, sans !important. */
body.ui-v2 .ui-root .ui-switch:hover, body.ui-v2 .ui-root .ui-switch:active, body.ui-v2 .ui-root .ui-switch:focus {
  background: transparent; background-image: none; border: 0; box-shadow: none; color: var(--ds-text);
}
body.ui-v2 .ui-root .ui-switch:hover .ui-switch-track { border-color: var(--ds-text); }
body.ui-v2 .ui-root .ui-switch[aria-checked="true"]:hover .ui-switch-track { background: var(--ds-primary-strong); border-color: var(--ds-primary-strong); }
body.ui-v2 .ui-root .ui-switch:disabled { cursor: not-allowed; color: var(--ds-text-muted); }
body.ui-v2 .ui-root .ui-switch[aria-busy="true"] { cursor: progress; }
body.ui-v2 .ui-root .ui-switch-state { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); min-inline-size: 5.5em; }

/* Onglets (tablist) : meme geste que le segmente, avec soulignement. */
body.ui-v2 .ui-root .ui-tabs { display: flex; gap: var(--ds-sp-1); border-bottom: 1px solid var(--ds-border); overflow-x: auto; min-inline-size: 0; scrollbar-width: none; }
body.ui-v2 .ui-root .ui-tabs::-webkit-scrollbar { display: none; }
body.ui-v2 .ui-root .ui-tab { flex: none; }
body.ui-v2 .ui-root .ui-tab {
  display: inline-flex; align-items: center; min-height: var(--ds-ctl); padding: 0 var(--ds-sp-4); margin: 0 0 -1px;
  border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ds-text-muted);
  font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
}
body.ui-v2 .ui-root .ui-tab:hover { color: var(--ds-text); }
body.ui-v2 .ui-root .ui-tab[aria-selected="true"] { border-bottom-color: var(--ds-primary); color: var(--ds-text); font-weight: 600; }

/* Tactile : sous 768 px, toutes les zones cliquables atteignent 44 px. */
@media (max-width: 767.98px) {
  body.ui-v2 .ui-root .ui-btn, body.ui-v2 .ui-root .ui-input, body.ui-v2 .ui-root .ui-select, body.ui-v2 .ui-root .ui-check,
  body.ui-v2 .ui-root .ui-tab { min-height: var(--ds-ctl-touch); }
  body.ui-v2 .ui-root .ui-btn.is-dense { min-height: var(--ds-ctl-touch); }
  body.ui-v2 .ui-root .ui-btn.is-icon { min-inline-size: var(--ds-ctl-touch); }
  body.ui-v2 .ui-root .ui-seg { padding: 0; gap: 0; }
  body.ui-v2 .ui-root .ui-seg-item { min-height: var(--ds-ctl-touch); }
  body.ui-v2 .ui-root .ui-input, body.ui-v2 .ui-root .ui-select, body.ui-v2 .ui-root .ui-textarea { font-size: var(--ds-fs-lg); }
}

/* Grille de formulaire : deux colonnes, une seule sous 768 px. `is-span` etend un champ sur toute la ligne. */
body.ui-v2 .ui-root .ui-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--ds-sp-4); margin: 0; padding: 0; }
body.ui-v2 .ui-root .ui-form-grid > .is-span { grid-column: 1 / -1; }
body.ui-v2 .ui-root .ui-form-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Groupe de champs : le shell habille tout fieldset (cadre, ombre, marge) ; on le repose a plat. */
body.ui-v2 .ui-root .ui-fieldset { display: grid; gap: var(--ds-sp-2); min-inline-size: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.ui-v2 .ui-root .ui-fieldset > legend { float:inline-start; inline-size: 100%; margin: 0 0 var(--ds-sp-2); padding: 0; font-family: var(--ds-font-sans); font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-text); }
body.ui-v2 .ui-root .ui-fieldset > legend + * { clear: both; }
body.ui-v2 .ui-root .ui-checks { display: flex; flex-wrap: wrap; gap: var(--ds-sp-1) var(--ds-sp-4); }
body.ui-v2 .ui-root .ui-check { border-radius: 0; cursor: pointer; font-size: var(--ds-fs-md); }

/* Choix en carte : un bouton radio dont toute la surface se touche. Etat coche = trait epais + fond,
   et le rond coche reste visible : la couleur ne porte jamais seule l'information. */
body.ui-v2 .ui-root .ui-choice {
  display: flex; align-items: flex-start; gap: var(--ds-sp-3); min-height: var(--ds-ctl-touch); margin: 0;
  padding: var(--ds-sp-3); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-md);
  background: var(--ds-surface); color: var(--ds-text); font-size: var(--ds-fs-md); font-weight: 400; cursor: pointer;
  transition: border-color var(--ds-dur-fast) var(--ds-ease), background-color var(--ds-dur-fast) var(--ds-ease);
}
body.ui-v2 .ui-root .ui-choice:hover { border-color: var(--ds-text-muted); background: var(--ds-surface-muted); }
body.ui-v2 .ui-root .ui-choice:has(input:checked) { border-color: var(--ds-primary); background: var(--ds-primary-soft); box-shadow: inset 0 0 0 1px var(--ds-primary); }
body.ui-v2 .ui-root .ui-choice:has(input:focus-visible) { outline: 2px solid var(--ds-focus-ring); outline-offset: 2px; }
body.ui-v2 .ui-root .ui-choice input { flex: none; inline-size: 18px; block-size: 18px; margin: 2px 0 0; accent-color: var(--ds-primary); }
body.ui-v2 .ui-root .ui-choice-main { display: grid; gap: 2px; min-inline-size: 0; }
body.ui-v2 .ui-root .ui-choice-t { font-weight: 600; }
body.ui-v2 .ui-root .ui-choice-s { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); }
body.ui-v2 .ui-root .ui-choices { display: grid; gap: var(--ds-sp-2); }
body.ui-v2 .ui-root .ui-choices.is-tiles { grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); }

/* Formulaire en ligne : un champ qui s'etire, son bouton aligne sur le bas du champ. */
body.ui-v2 .ui-root .ui-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ds-sp-3); margin: 0; }
body.ui-v2 .ui-root .ui-inline-form > .ui-field { flex: 1 1 260px; }

/* Rangee d'actions d'un formulaire : l'action principale en dernier, a droite. */
body.ui-v2 .ui-root .ui-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--ds-sp-2); margin: 0; padding: 0; }
body.ui-v2 .ui-root .ui-actions.is-start { justify-content: flex-start; }

@media (max-width: 767.98px) {
  body.ui-v2 .ui-root .ui-form-grid, body.ui-v2 .ui-root .ui-form-grid.is-3 { grid-template-columns: minmax(0, 1fr); }
  body.ui-v2 .ui-root .ui-actions > .ui-btn { flex: 1 1 auto; }
}

/* Interrupteur DE FORMULAIRE : une case à cocher habillée comme l'interrupteur ci-dessus (même piste, même pastille),
   envoyée avec le formulaire ; l'état est écrit en toutes lettres (« Ouvert » / « Fermé », « Oui » / « Non »). */
body.ui-v2 .ui-root .ui-switch-box { display: inline-flex; align-items: center; gap: var(--ds-sp-2); min-height: var(--ds-ctl-touch); font-weight: 500; cursor: pointer; }
body.ui-v2 .ui-root .ui-switch-input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
body.ui-v2 .ui-root .ui-switch-box .ui-switch-track { position: relative; inline-size: 40px; block-size: 24px; flex: none; border-radius: var(--ds-r-pill); border: 2px solid var(--ds-neutral-line); background: var(--ds-surface); transition: background-color var(--ds-dur-fast) var(--ds-ease); }
body.ui-v2 .ui-root .ui-switch-box .ui-switch-track::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--ds-neutral-line); transition: transform var(--ds-dur-fast) var(--ds-ease); }
body.ui-v2 .ui-root .ui-switch-input:checked + .ui-switch-track { background: var(--ds-primary); border-color: var(--ds-primary); }
body.ui-v2 .ui-root .ui-switch-input:checked + .ui-switch-track::after { background: var(--ds-text-on-primary); transform: translateX(16px); }
body.ui-v2 .ui-root .ui-switch-input:focus-visible + .ui-switch-track { outline: 3px solid var(--ds-focus-ring); outline-offset: 2px; }
body.ui-v2 .ui-root .ui-switch-input:disabled + .ui-switch-track { opacity: .5; }
body.ui-v2 .ui-root .ui-switch-box .ui-switch-on { display: none; }
body.ui-v2 .ui-root .ui-switch-input:checked ~ .ui-switch-on { display: inline; }
body.ui-v2 .ui-root .ui-switch-input:checked ~ .ui-switch-off { display: none; }