/* Design System : tokens et composants de référence (préfixe ds-).
   Source de vérité visuelle ; le guide vivant est /admin/guide/. Documentation : docs/DESIGN-SYSTEM.md.
   Trois couches : primitifs (--p-*), sémantiques (--ds-*, un jeu par mode), composants (.ds-*). Un composant ne lit que --ds-*.
   Thème de canal : seule la famille --ds-accent* change (voir guide.js, correction de contraste 4,5:1). Les couleurs d'état ne sont jamais thémables. */
:root{
  --p-gris-0:#ffffff;--p-gris-50:#f7f8fa;--p-gris-100:#eff1f4;--p-gris-200:#e1e4e9;--p-gris-300:#c9ced6;--p-gris-400:#a3aab5;--p-gris-500:#7b8492;--p-gris-600:#5a6270;--p-gris-700:#434a56;--p-gris-800:#2a2f38;--p-gris-900:#1a1d23;--p-gris-950:#0f1115;
  --p-accent-300:#a9b8ff;--p-accent-600:#3a4fd6;--p-accent-700:#2c3eb0;
  --p-vert-50:#e6f3ea;--p-vert-300:#7fd69a;--p-vert-700:#1f7a3d;--p-vert-900:#143a24;
  --p-ambre-50:#fbf3dc;--p-ambre-300:#f2c75c;--p-ambre-800:#7a4e00;--p-ambre-900:#3d2e0a;
  --p-rouge-50:#fbe9e8;--p-rouge-300:#f59a9a;--p-rouge-700:#b3261e;--p-rouge-900:#4a1a17;
  --p-bleu-50:#e7effa;--p-bleu-300:#8fbcf5;--p-bleu-700:#1b5fb4;--p-bleu-900:#14304f;
  /* espacements (base 4), rayons, mouvement */
  --ds-e2:2px;--ds-e4:4px;--ds-e8:8px;--ds-e12:12px;--ds-e16:16px;--ds-e24:24px;--ds-e32:32px;--ds-e48:48px;--ds-e64:64px;
  --ds-r-champ:4px;--ds-r-carte:8px;--ds-r-pastille:999px;
  --ds-m-retour:120ms;--ds-m-panneau:200ms;
  --ds-font:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--ds-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  /* densité standard par défaut */
  --ds-ligne:44px;--ds-champ:40px;--ds-bouton:40px;--ds-cible:44px;--ds-groupe:16px;
}
:root[data-density="compacte"]{--ds-ligne:36px;--ds-champ:32px;--ds-bouton:32px;--ds-cible:24px;--ds-groupe:12px}
:root[data-density="confortable"]{--ds-ligne:56px;--ds-champ:48px;--ds-bouton:48px;--ds-cible:48px;--ds-groupe:24px}
/* sémantiques, mode clair */
:root{color-scheme:light;
  --ds-page:var(--p-gris-50);--ds-carte:var(--p-gris-0);--ds-texte:var(--p-gris-900);--ds-texte-2:var(--p-gris-600);
  --ds-bordure:var(--p-gris-500);--ds-bordure-douce:var(--p-gris-200);--ds-survol:var(--p-gris-100);
  --ds-accent:var(--p-accent-600);--ds-accent-sur:#ffffff;--ds-accent-fort:var(--p-accent-700);--ds-accent-teinte:#e9ecfc;--ds-focus:var(--p-accent-700);
  --ds-succes:var(--p-vert-700);--ds-succes-fond:var(--p-vert-50);
  --ds-alerte:var(--p-ambre-800);--ds-alerte-fond:var(--p-ambre-50);
  --ds-danger:var(--p-rouge-700);--ds-danger-fond:var(--p-rouge-50);
  --ds-info:var(--p-bleu-700);--ds-info-fond:var(--p-bleu-50);
  --ds-imperso:var(--p-ambre-300);--ds-imperso-sur:var(--p-gris-900);
  --ds-ombre-1:0 2px 8px rgb(0 0 0/.15);--ds-ombre-2:0 8px 24px rgb(0 0 0/.2);--ds-voile:rgb(15 17 21/.5);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --ds-page:var(--p-gris-950);--ds-carte:var(--p-gris-900);--ds-texte:var(--p-gris-50);--ds-texte-2:var(--p-gris-300);
  --ds-bordure:var(--p-gris-400);--ds-bordure-douce:var(--p-gris-800);--ds-survol:var(--p-gris-800);
  --ds-accent:var(--p-accent-300);--ds-accent-sur:#0f1115;--ds-accent-fort:#c6d0ff;--ds-accent-teinte:#1d2a6b;--ds-focus:var(--p-accent-300);
  --ds-succes:var(--p-vert-300);--ds-succes-fond:var(--p-vert-900);--ds-alerte:var(--p-ambre-300);--ds-alerte-fond:var(--p-ambre-900);
  --ds-danger:var(--p-rouge-300);--ds-danger-fond:var(--p-rouge-900);--ds-info:var(--p-bleu-300);--ds-info-fond:var(--p-bleu-900);
  --ds-ombre-1:0 2px 8px rgb(0 0 0/.5);--ds-ombre-2:0 8px 24px rgb(0 0 0/.6);--ds-voile:rgb(0 0 0/.65)}}
:root[data-theme="dark"]{color-scheme:dark;
  --ds-page:var(--p-gris-950);--ds-carte:var(--p-gris-900);--ds-texte:var(--p-gris-50);--ds-texte-2:var(--p-gris-300);
  --ds-bordure:var(--p-gris-400);--ds-bordure-douce:var(--p-gris-800);--ds-survol:var(--p-gris-800);
  --ds-accent:var(--p-accent-300);--ds-accent-sur:#0f1115;--ds-accent-fort:#c6d0ff;--ds-accent-teinte:#1d2a6b;--ds-focus:var(--p-accent-300);
  --ds-succes:var(--p-vert-300);--ds-succes-fond:var(--p-vert-900);--ds-alerte:var(--p-ambre-300);--ds-alerte-fond:var(--p-ambre-900);
  --ds-danger:var(--p-rouge-300);--ds-danger-fond:var(--p-rouge-900);--ds-info:var(--p-bleu-300);--ds-info-fond:var(--p-bleu-900);
  --ds-ombre-1:0 2px 8px rgb(0 0 0/.5);--ds-ombre-2:0 8px 24px rgb(0 0 0/.6);--ds-voile:rgb(0 0 0/.65)}

/* typographie */
.ds-affichage{font:700 1.75rem/2.25rem var(--ds-font);margin:0}
.ds-titre{font:700 1.375rem/1.875rem var(--ds-font);margin:0}
.ds-sous-titre{font:600 1.125rem/1.625rem var(--ds-font);margin:0}
.ds-corps{font:400 1rem/1.5rem var(--ds-font)}
.ds-dense{font:400 .875rem/1.25rem var(--ds-font)}
.ds-legende{font:500 .75rem/1rem var(--ds-font);color:var(--ds-texte-2)}
.ds-mono{font-family:var(--ds-mono)}.ds-num{font-variant-numeric:tabular-nums}
.ds-focusable:focus-visible,.ds-btn:focus-visible,.ds-input:focus-visible,.ds-tabs a:focus-visible,.ds-tabs button:focus-visible,.ds-menu-item:focus-visible,.ds-link:focus-visible,.ds-check:focus-visible,.ds-switch:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
.ds-link{color:var(--ds-accent-fort);text-underline-offset:2px}
button.ds-link{align-self:flex-start;min-height:24px;padding:0;background:none;border:0;font:inherit;text-decoration:underline;cursor:pointer}

/* boutons : une seule variante primaire par vue */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-e8);min-height:var(--ds-bouton);min-width:var(--ds-cible);padding:0 var(--ds-e16);border:1px solid transparent;border-radius:var(--ds-r-champ);font:600 .875rem/1.25rem var(--ds-font);cursor:pointer;background:var(--ds-accent);color:var(--ds-accent-sur);transition:background var(--ds-m-retour),border-color var(--ds-m-retour)}
.ds-btn:hover{background:var(--ds-accent-fort);color:#fff}
:root[data-theme="dark"] .ds-btn:hover{color:#0f1115}
.ds-btn.sec{background:var(--ds-carte);color:var(--ds-texte);border-color:var(--ds-bordure)}
.ds-btn.sec:hover{background:var(--ds-survol);color:var(--ds-texte)}
.ds-btn.ter{background:transparent;color:var(--ds-accent-fort)}
.ds-btn.ter:hover{background:transparent;color:var(--ds-accent-fort);text-decoration:underline}
.ds-btn.danger{background:var(--ds-danger);color:var(--ds-carte)}
.ds-btn.danger:hover{background:var(--ds-danger);color:var(--ds-carte);text-decoration:underline}
.ds-btn[disabled],.ds-btn[aria-disabled="true"]{background:var(--ds-bordure-douce);color:var(--ds-texte-2);border-color:transparent;cursor:not-allowed;text-decoration:none}
.ds-btn[aria-busy="true"]::after{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ds-tourne .8s linear infinite}
@keyframes ds-tourne{to{transform:rotate(360deg)}}
.ds-groupe{display:flex;flex-wrap:wrap;gap:var(--ds-e8);align-items:center}

/* formulaires : une colonne, étiquette visible, erreur sous le champ */
.ds-champ{display:flex;flex-direction:column;gap:var(--ds-e4);max-width:28rem}
.ds-champ>label,.ds-champ>legend{font:600 .875rem/1.25rem var(--ds-font)}
.ds-champ .ds-aide{font:400 .75rem/1rem var(--ds-font);color:var(--ds-texte-2)}
.ds-champ .ds-erreur{font:500 .75rem/1rem var(--ds-font);color:var(--ds-danger)}
.ds-input{min-height:var(--ds-champ);padding:0 var(--ds-e12);background:var(--ds-carte);color:var(--ds-texte);border:1px solid var(--ds-bordure);border-radius:var(--ds-r-champ);font:400 1rem/1.5rem var(--ds-font)}
textarea.ds-input{padding-block:var(--ds-e8);min-height:6rem;resize:vertical}
.ds-input:focus-visible{border-color:var(--ds-focus);outline:2px solid var(--ds-focus);outline-offset:0}
.ds-input[aria-invalid="true"]{border:2px solid var(--ds-danger)}
.ds-input:disabled{background:var(--ds-bordure-douce);color:var(--ds-texte-2);cursor:not-allowed}
.ds-check{display:inline-flex;align-items:center;gap:var(--ds-e8);min-height:var(--ds-cible);cursor:pointer}
.ds-check input{width:20px;height:20px;accent-color:var(--ds-accent);margin:0}
.ds-check input:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
.ds-check input:disabled+span{color:var(--ds-texte-2)}
.ds-switch{display:inline-flex;align-items:center;gap:var(--ds-e8);min-height:var(--ds-cible);cursor:pointer}
.ds-switch input{appearance:none;width:44px;height:24px;border-radius:12px;background:var(--ds-bordure);position:relative;margin:0;cursor:pointer;transition:background var(--ds-m-retour)}
.ds-switch input::after{content:"";position:absolute;inset:3px auto 3px 3px;width:18px;border-radius:50%;background:var(--ds-carte);transition:transform var(--ds-m-retour)}
.ds-switch input:checked{background:var(--ds-accent)}
.ds-switch input:checked::after{transform:translateX(20px)}
.ds-switch input:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
.ds-switch input:disabled{opacity:.5;cursor:not-allowed}

/* pastilles d'état : couleur + forme + mot (jamais la couleur seule) */
.ds-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--ds-r-pastille);border:1px solid currentColor;font:600 .75rem/1rem var(--ds-font);background:var(--ds-carte);color:var(--ds-texte-2)}
.ds-badge.ok{color:var(--ds-succes);background:var(--ds-succes-fond)}
.ds-badge.att{color:var(--ds-alerte);background:var(--ds-alerte-fond)}
.ds-badge.ko{color:var(--ds-danger);background:var(--ds-danger-fond)}
.ds-badge.info{color:var(--ds-info);background:var(--ds-info-fond)}

/* onglets : <nav> + aria-current (pas de rôle ARIA tab) */
.ds-tabs{position:relative;display:flex;overflow-x:auto;max-width:100%;gap:var(--ds-e8);border-bottom:1px solid var(--ds-bordure-douce)}
.ds-tabs a,.ds-tabs button{display:inline-flex;align-items:center;gap:var(--ds-e8);white-space:nowrap;min-height:var(--ds-cible);padding:0 var(--ds-e16);color:var(--ds-texte);text-decoration:none;background:none;border:0;border-bottom:3px solid transparent;font:400 .875rem/1.25rem var(--ds-font);cursor:pointer}
.ds-tabs [aria-current]{font-weight:600;color:var(--ds-accent-fort);border-bottom-color:var(--ds-accent)}

/* menu d'actions : bouton aria-expanded + liste de boutons */
.ds-menu{position:relative;display:inline-block}
.ds-menu-liste{position:absolute;right:0;top:calc(100% + 4px);min-width:12rem;background:var(--ds-carte);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte);box-shadow:var(--ds-ombre-1);padding:var(--ds-e4);z-index:10}
.ds-menu-item{display:flex;width:100%;align-items:center;gap:var(--ds-e8);min-height:var(--ds-cible);padding:0 var(--ds-e12);background:none;border:0;border-radius:var(--ds-r-champ);color:var(--ds-texte);font:400 .875rem/1.25rem var(--ds-font);text-align:left;cursor:pointer}
.ds-menu-item:hover{background:var(--ds-survol)}
.ds-menu-note{margin:0;padding:var(--ds-e8) var(--ds-e12)}
.ds-menu-item.danger{color:var(--ds-danger)}

/* alertes (bandeaux) */
.ds-alert{display:flex;gap:var(--ds-e12);padding:var(--ds-e12) var(--ds-e16);border:1px solid currentColor;border-radius:var(--ds-r-carte);font:400 .875rem/1.25rem var(--ds-font);color:var(--ds-info);background:var(--ds-info-fond)}
.ds-alert b{display:block}.ds-alert .ds-alert-txt{color:var(--ds-texte)}
.ds-alert.att{color:var(--ds-alerte);background:var(--ds-alerte-fond)}
.ds-alert.ko{color:var(--ds-danger);background:var(--ds-danger-fond)}
.ds-alert.ok{color:var(--ds-succes);background:var(--ds-succes-fond)}
.ds-toast{display:inline-flex;align-items:center;gap:var(--ds-e12);padding:var(--ds-e12) var(--ds-e16);border-radius:var(--ds-r-carte);background:var(--p-gris-900);color:var(--p-gris-0);box-shadow:var(--ds-ombre-1);font:400 .875rem/1.25rem var(--ds-font)}
.ds-toast button{background:none;border:0;color:var(--p-accent-300);font-weight:600;cursor:pointer;min-height:var(--ds-cible);padding:0 var(--ds-e8)}
.ds-toast button:focus-visible{outline:2px solid var(--p-accent-300);outline-offset:2px}

/* fenêtre (affichage statique dans le guide ; en usage : role=dialog, aria-modal, focus piégé) */
.ds-dialog{max-width:28rem;padding:var(--ds-e24);background:var(--ds-carte);color:var(--ds-texte);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte);box-shadow:var(--ds-ombre-2);display:flex;flex-direction:column;gap:var(--ds-e16)}
.ds-dialog .ds-groupe{justify-content:flex-end}
.ds-panneau{display:flex;flex-direction:column;gap:var(--ds-e16);background:var(--ds-carte);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte);box-shadow:var(--ds-ombre-2);padding:var(--ds-e24);max-width:35rem}

/* tableau : caption, scope, une ligne = un objet, nombres à droite */
.ds-tw{position:relative;max-width:100%;min-width:0;overflow-x:auto;border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte)}
.ds-table{width:100%;border-collapse:collapse;background:var(--ds-carte);font:400 .875rem/1.25rem var(--ds-font)}
.ds-table caption{text-align:left;padding:var(--ds-e12);font-weight:600}
.ds-table th{background:var(--ds-survol);color:var(--ds-texte);text-align:left;font:600 .875rem/1.25rem var(--ds-font);text-transform:none;letter-spacing:normal;padding:0 var(--ds-e12);height:var(--ds-ligne);white-space:nowrap}
.ds-table td{padding:0 var(--ds-e12);height:var(--ds-ligne);border-top:1px solid var(--ds-bordure-douce)}
.ds-table tbody tr:hover{background:var(--ds-survol)}
.ds-table tr[aria-selected="true"]{background:var(--ds-accent-teinte)}
.ds-table .num{text-align:right;font-variant-numeric:tabular-nums}
.ds-table th button{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center;min-height:var(--ds-cible)}
.ds-table th button:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}

/* états système */
.ds-empty{display:flex;flex-direction:column;align-items:center;gap:var(--ds-e8);text-align:center;padding:var(--ds-e32) var(--ds-e24);background:var(--ds-carte);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte)}
.ds-skel{display:flex;flex-direction:column;gap:var(--ds-e12);padding:var(--ds-e16);background:var(--ds-carte);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte)}
.ds-skel i{display:block;height:14px;border-radius:4px;background:var(--ds-bordure-douce)}
@media (prefers-reduced-motion:no-preference){.ds-skel i{animation:ds-pulse 1.4s ease-in-out infinite}}
@keyframes ds-pulse{50%{opacity:.5}}
.ds-imperso{display:flex;justify-content:space-between;align-items:center;gap:var(--ds-e12);padding:var(--ds-e8) var(--ds-e16);background:var(--ds-imperso);color:var(--ds-imperso-sur);font:600 .875rem/1.25rem var(--ds-font)}
.ds-imperso .ds-btn{background:transparent;color:inherit;border-color:currentColor}
.ds-carte{background:var(--ds-carte);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte);padding:var(--ds-e24)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.ds-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* gabarits de page (templates génériques) */
.ds-frame{display:flex;flex-direction:column;gap:var(--ds-e16);width:100%;padding:var(--ds-e24);background:var(--ds-page);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte);color:var(--ds-texte);font:400 1rem/1.5rem var(--ds-font)}
.ds-frame h4{margin:0;font:700 1.75rem/2.25rem var(--ds-font)}
.ds-ctx{font:500 .75rem/1rem var(--ds-font);color:var(--ds-texte-2);margin:0}
.ds-fil ol{display:flex;flex-wrap:wrap;gap:var(--ds-e4) var(--ds-e8);list-style:none;margin:0;padding:0;font:400 .875rem/1.25rem var(--ds-font)}
.ds-fil li+li::before{content:"›";margin-right:var(--ds-e8);color:var(--ds-texte-2)}
.ds-entete{display:flex;justify-content:space-between;align-items:center;gap:var(--ds-e12) var(--ds-e16);flex-wrap:wrap}
.ds-entete .ds-titre-ligne{display:flex;align-items:center;gap:var(--ds-e12);flex-wrap:wrap}
.ds-barre{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--ds-e8) var(--ds-e16);align-items:flex-end}
.ds-barre>div{display:flex;flex-wrap:wrap;gap:var(--ds-e8);align-items:flex-end}
.ds-puces{display:flex;flex-wrap:wrap;gap:var(--ds-e8);align-items:center;font:400 .75rem/1rem var(--ds-font);color:var(--ds-texte-2)}
.ds-puce{display:inline-flex;align-items:center;gap:var(--ds-e4);padding:0 0 0 var(--ds-e12);min-height:var(--ds-cible);border:1px solid var(--ds-bordure);border-radius:var(--ds-r-pastille);background:var(--ds-carte);color:var(--ds-texte);font:400 .875rem/1.25rem var(--ds-font)}
.ds-puce button{all:unset;cursor:pointer;display:inline-grid;place-items:center;min-width:var(--ds-cible);min-height:var(--ds-cible);border-radius:50%}
.ds-puce button:focus-visible{outline:2px solid var(--ds-focus);outline-offset:-2px}
.ds-pagination{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--ds-e8);font:400 .875rem/1.25rem var(--ds-font);color:var(--ds-texte-2)}
.ds-resume{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--ds-e16);margin:0;padding:var(--ds-e16);background:var(--ds-carte);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte)}
.ds-resume dt{font:500 .75rem/1rem var(--ds-font);color:var(--ds-texte-2)}.ds-resume dd{margin:0;font:600 1rem/1.5rem var(--ds-font)}
.ds-section{display:flex;flex-direction:column;gap:var(--ds-e16);padding:var(--ds-e24);background:var(--ds-carte);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte)}
.ds-section>h5,.ds-section>legend{margin:0;font:600 1.125rem/1.625rem var(--ds-font);padding:0}
.ds-pied{display:flex;flex-wrap:wrap;gap:var(--ds-e8);justify-content:flex-end;padding-top:var(--ds-e8)}
.ds-etapes ol{display:flex;flex-wrap:wrap;gap:var(--ds-e8) var(--ds-e24);list-style:none;margin:0;padding:0;font:400 .875rem/1.25rem var(--ds-font)}
.ds-etapes li{display:flex;align-items:center;gap:var(--ds-e8)}
.ds-etapes li b{display:inline-grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;border:2px solid var(--ds-bordure);font-weight:700}
.ds-etapes [aria-current="step"]{font-weight:700}
.ds-etapes [aria-current="step"] b{background:var(--ds-accent);color:var(--ds-accent-sur);border-color:var(--ds-accent)}
.ds-etapes li.fait b{border-color:var(--ds-succes);color:var(--ds-succes)}
.ds-tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--ds-e16);margin:0;padding:0;list-style:none}
.ds-tuile{display:flex;flex-direction:column;gap:var(--ds-e4);padding:var(--ds-e16);background:var(--ds-carte);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte)}
.ds-tuile b{font:700 1.75rem/2.25rem var(--ds-font);font-variant-numeric:tabular-nums}
.ds-file{display:flex;flex-direction:column;gap:var(--ds-e8);margin:0;padding:0;list-style:none}
.ds-file li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--ds-e8) var(--ds-e16);padding:var(--ds-e12) var(--ds-e16);background:var(--ds-carte);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte)}
.ds-file li>div{display:flex;flex-direction:column}
.ds-page-etat{display:flex;flex-direction:column;align-items:center;gap:var(--ds-e12);text-align:center;padding:var(--ds-e48) var(--ds-e24);max-width:32rem;margin:0 auto}
.ds-page-etat .ds-ref{font:400 .875rem/1.25rem var(--ds-mono);padding:var(--ds-e4) var(--ds-e8);background:var(--ds-survol);border-radius:var(--ds-r-champ)}
.ds-connexion{max-width:24rem;margin:0 auto;display:flex;flex-direction:column;gap:var(--ds-e16);min-width:0}
.ds-connexion .ds-input{width:100%;min-width:0}
.ds-alert li{margin-block:var(--ds-e4)}.ds-alert li a{display:inline-block;min-height:24px;line-height:24px}
[class*="ds-"]{box-sizing:border-box}

/* coquilles d'écran : en-tête d'application, menu latéral ou onglets, page. Le menu latéral passe en ligne défilante sous 52rem (requête de conteneur). */
.ds-app{container-type:inline-size;display:flex;flex-direction:column;min-width:0;background:var(--ds-page);color:var(--ds-texte);font:400 1rem/1.5rem var(--ds-font)}
.ds-app-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-e8) var(--ds-e16);min-height:56px;padding:var(--ds-e8) var(--ds-e16);background:var(--ds-carte);border-bottom:1px solid var(--ds-bordure-douce)}
.ds-app-tete>div{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-e8) var(--ds-e12);min-width:0}
.ds-marque{display:flex;align-items:center;gap:var(--ds-e8);margin:0;font:700 1rem/1.5rem var(--ds-font)}
.ds-marque i{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--ds-r-champ);background:var(--ds-accent);color:var(--ds-accent-sur);font:700 .875rem/1 var(--ds-font)}
.ds-marque img{display:block;max-height:28px;width:auto}
.ds-marque small{font:500 .875rem/1.25rem var(--ds-font);color:var(--ds-texte-2)}
.ds-avatar{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ds-accent-teinte);color:var(--ds-accent-fort);font:700 .75rem/1 var(--ds-font)}
.ds-app-onglets{padding:0 var(--ds-e16);background:var(--ds-carte)}
.ds-app-corps{display:grid;grid-template-columns:minmax(0,1fr)}
.ds-app-page{display:flex;flex-direction:column;gap:var(--ds-e16);min-width:0;padding:var(--ds-e24) var(--ds-e16)}
.ds-app-page h4{margin:0;font:700 1.75rem/2.25rem var(--ds-font)}
.ds-nav-lat{position:relative;display:flex;min-width:0;overflow-x:auto;padding:var(--ds-e8);background:var(--ds-carte);border-bottom:1px solid var(--ds-bordure-douce)}
.ds-nav-lat>div,.ds-nav-lat ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.ds-nav-lat a,.ds-nav-lat button{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-e8);min-height:var(--ds-cible);padding:0 var(--ds-e12);border-radius:var(--ds-r-champ);color:var(--ds-texte);text-decoration:none;white-space:nowrap;font:400 .875rem/1.25rem var(--ds-font)}
.ds-nav-lat button{width:100%;background:none;border:0;cursor:pointer;text-align:left}
.ds-nav-lat a:hover,.ds-nav-lat button:hover{background:var(--ds-survol)}
.ds-nav-lat a:focus-visible,.ds-nav-lat button:focus-visible{outline:2px solid var(--ds-focus);outline-offset:-2px}
.ds-nav-lat a[aria-current],.ds-nav-lat button[aria-current]{background:var(--ds-accent-teinte);color:var(--ds-accent-fort);font-weight:600}
.ds-nav-groupe{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@container (min-width:52rem){
  .ds-app-corps.avec-nav{grid-template-columns:14rem minmax(0,1fr)}
  .avec-nav>.ds-nav-lat{flex-direction:column;overflow:visible;padding:var(--ds-e16) var(--ds-e12);border-bottom:0;border-right:1px solid var(--ds-bordure-douce)}
  .avec-nav>.ds-nav-lat>div,.avec-nav>.ds-nav-lat ul{flex-direction:column}
  .avec-nav>.ds-nav-lat .ds-nav-groupe{position:static;width:auto;height:auto;clip:auto;margin:var(--ds-e12) var(--ds-e12) var(--ds-e4);font:700 .6875rem/1rem var(--ds-font);letter-spacing:.08em;text-transform:uppercase;color:var(--ds-texte-2);cursor:default;pointer-events:none;user-select:none}
  .avec-nav>.ds-nav-lat>div>.ds-nav-groupe:not(:first-child){margin-top:var(--ds-e20,1.25rem);padding-top:var(--ds-e16);border-top:1px solid var(--ds-bordure-douce)}
  .avec-nav>.ds-nav-lat a,.avec-nav>.ds-nav-lat button{font:500 .9375rem/1.25rem var(--ds-font);color:var(--ds-texte)}
  .avec-nav>.ds-nav-lat a:not([aria-current]):hover,.avec-nav>.ds-nav-lat button:not([aria-current]):hover{background:var(--ds-survol);box-shadow:inset 3px 0 0 var(--ds-bordure)}
  .ds-app-page{padding:var(--ds-e24)}
}
.ds-compteur{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border:1px solid currentColor;border-radius:10px;background:var(--ds-alerte-fond);color:var(--ds-alerte);font:700 .75rem/1 var(--ds-font)}
/* sélecteur de contexte (niveau › niveau › niveau), mémorisé d'une page à l'autre */
.ds-ctx-sel ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-e4) var(--ds-e8);list-style:none;margin:0;padding:0}
.ds-ctx-sel li{display:flex;align-items:center;gap:var(--ds-e8)}
.ds-ctx-sel li+li::before{content:"›";color:var(--ds-texte-2)}
.ds-ctx-sel button{display:inline-flex;align-items:center;gap:var(--ds-e4);min-height:var(--ds-cible);padding:0 var(--ds-e8);border:1px solid var(--ds-bordure);border-radius:var(--ds-r-champ);background:var(--ds-carte);color:var(--ds-texte);font:500 .875rem/1.25rem var(--ds-font);cursor:pointer}
.ds-ctx-sel button:hover{background:var(--ds-survol)}
.ds-ctx-sel button:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
/* avancement en étapes courtes (mot + forme, jamais la couleur seule) */
.ds-avancement{display:flex;flex-wrap:nowrap;white-space:nowrap;gap:var(--ds-e4);list-style:none;margin:0;padding:0}
.ds-avancement a,.ds-avancement button{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 var(--ds-e8);border:1px solid currentColor;border-radius:var(--ds-r-pastille);background:var(--ds-carte);color:var(--ds-texte-2);font:600 .75rem/1rem var(--ds-font);text-decoration:none}
.ds-avancement button{cursor:pointer}
.ds-avancement .fait a,.ds-avancement .fait button{color:var(--ds-succes);background:var(--ds-succes-fond)}
.ds-avancement a:focus-visible,.ds-avancement button:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
/* jauge : le texte porte la valeur, la barre n'est qu'un repère */
.ds-jauge{display:flex;flex-direction:column;gap:var(--ds-e4);min-width:7rem;font:400 .875rem/1.25rem var(--ds-font)}
.ds-jauge>span{display:block;height:8px;border-radius:4px;background:var(--ds-bordure-douce);overflow:hidden}
.ds-jauge>span>i{display:block;height:100%;background:var(--ds-accent)}
.ds-jauge.att>span>i{background:var(--ds-alerte)}
/* liste de choix (un bouton par option, titre et précision) */
.ds-choix{display:flex;flex-direction:column;gap:var(--ds-e8);list-style:none;margin:0;padding:0}
.ds-choix button{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:56px;padding:var(--ds-e8) var(--ds-e16);border:1px solid var(--ds-bordure);border-radius:var(--ds-r-carte);background:var(--ds-carte);color:var(--ds-texte);font:600 1rem/1.5rem var(--ds-font);text-align:left;cursor:pointer}
.ds-choix button small{font:400 .875rem/1.25rem var(--ds-font);color:var(--ds-texte-2)}
.ds-choix button:hover{background:var(--ds-survol)}
.ds-choix button:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
/* lignes d'objets sans tableau (écran étroit) : un objet, un état, une action */
.ds-lignes{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.ds-lignes>li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--ds-e8) var(--ds-e12);padding:var(--ds-e12) 0;border-top:1px solid var(--ds-bordure-douce)}
.ds-lignes>li:first-child{border-top:0}
.ds-lignes>li>div{display:flex;flex-direction:column;min-width:0}
/* bandeau d'accueil d'un canal et code personnel (QR toujours noir sur blanc, quel que soit le mode) */
.ds-banniere{display:flex;flex-direction:column;gap:var(--ds-e4);padding:var(--ds-e24) var(--ds-e16);background:var(--ds-accent-teinte);border-radius:var(--ds-r-carte)}
.ds-banniere h4{margin:0;font:700 1.375rem/1.875rem var(--ds-font)}
.ds-qr{display:flex;flex-direction:column;align-items:center;gap:var(--ds-e8);text-align:center}
.ds-qr svg{width:12rem;max-width:100%;height:auto;padding:var(--ds-e8);background:var(--p-gris-0);border-radius:var(--ds-r-champ)}
.ds-qr svg path{fill:var(--p-gris-950)}
.ds-table .ds-legende{display:block;font-weight:400}
.ds-table tbody th,.ds-table td{padding-block:var(--ds-e4)}
.ds-table tbody th{border-top:1px solid var(--ds-bordure-douce);background:none;font-weight:600}
/* ligne de tableau ouverte en édition : un seul Enregistrer par ligne */
.ds-table tr.ds-edition>td{padding:var(--ds-e12);background:var(--ds-survol)}
.ds-edition-champs{display:flex;flex-wrap:wrap;gap:var(--ds-e16);align-items:flex-end}
/* aperçu d'un écran d'équipement (deux lignes de 16 caractères), habillage neutre quel que soit le mode */
.ds-afficheur{display:inline-block;min-width:calc(16ch + 1.5rem);padding:var(--ds-e4) var(--ds-e12);background:var(--p-gris-950);color:var(--p-gris-0);border-radius:var(--ds-r-champ);font:600 .875rem/1.25rem var(--ds-mono);letter-spacing:.05em;white-space:nowrap}
/* suivi d'une tâche longue : titre, barre (progressbar), étape en cours, résultat ou erreur. Voir dsProgress() dans ui.js */
.ds-suivi{display:flex;flex-direction:column;gap:var(--ds-e8);padding:var(--ds-e12) var(--ds-e16);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte);background:var(--ds-carte);font:400 .875rem/1.25rem var(--ds-font);color:var(--ds-texte)}
.ds-suivi-tete{display:flex;justify-content:space-between;gap:var(--ds-e12);font-weight:600}
.ds-suivi-tete small{font:500 .75rem/1rem var(--ds-font);color:var(--ds-texte-2);font-variant-numeric:tabular-nums}
.ds-suivi-barre{height:8px;border-radius:4px;background:var(--ds-bordure-douce);overflow:hidden}
.ds-suivi-barre>i{display:block;height:100%;background:var(--ds-accent);transition:width var(--ds-m-panneau) linear}
.ds-suivi-barre.indet>i{width:35%;animation:ds-suivi-va 1.4s ease-in-out infinite}
@keyframes ds-suivi-va{from{margin-left:-35%}to{margin-left:100%}}
@media (prefers-reduced-motion:reduce){.ds-suivi-barre>i{transition:none}.ds-suivi-barre.indet>i{animation:none;width:100%;opacity:.45}}
.ds-suivi-etape{margin:0;color:var(--ds-texte-2)}
.ds-suivi.ok{border-color:var(--ds-succes);background:var(--ds-succes-fond)}
.ds-suivi.ok .ds-suivi-barre>i{background:var(--ds-succes)}
.ds-suivi.ko{border-color:var(--ds-danger);background:var(--ds-danger-fond)}
.ds-suivi.ko .ds-suivi-barre>i{background:var(--ds-danger)}
.ds-suivi.ko .ds-suivi-etape{color:var(--ds-danger)}
/* arbre cherchable : hiérarchie à plusieurs niveaux (tenant › site › canal), recherche qui garde le chemin.
   Les ancêtres du choix sont teintés, le choix porte une coche (la couleur ne porte jamais seule l'information). */
.ds-arbre{display:flex;flex-direction:column;gap:var(--ds-e8);min-width:0}
.ds-arbre-rech{max-width:none}
.ds-arbre-saisie{position:relative;display:flex;align-items:center}
.ds-arbre-saisie>.ic{position:absolute;left:var(--ds-e12);color:var(--ds-texte-2);pointer-events:none}
.ds-arbre-saisie .ds-input{width:100%;padding-left:calc(var(--ds-e12) + 26px)}
.ds-arbre-etat{margin:0;min-height:1rem}
.ds-arbre-liste,.ds-arbre-liste ul{list-style:none;margin:0;padding:0}
.ds-arbre-liste{max-height:min(26rem,60vh);overflow:auto;border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte);background:var(--ds-carte);padding:var(--ds-e8)}
.ds-arbre-liste ul{margin-left:calc(var(--ds-e12) + 11px);padding-left:var(--ds-e8);border-left:2px solid var(--ds-bordure-douce)}
.ds-arbre-ligne{display:flex;align-items:stretch;gap:var(--ds-e2)}
.ds-arbre-pli{flex:none;display:inline-grid;place-items:center;width:var(--ds-cible);min-height:var(--ds-cible);border:0;background:none;color:var(--ds-texte-2);border-radius:var(--ds-r-champ)}
button.ds-arbre-pli{cursor:pointer}
button.ds-arbre-pli:hover{background:var(--ds-survol);color:var(--ds-texte)}
.ds-arbre-pli .ic{transition:transform var(--ds-m-retour)}
.ds-arbre-pli[aria-expanded="false"] .ic{transform:rotate(-90deg)}
.ds-arbre-noeud{flex:1;min-width:0;display:flex;align-items:center;gap:var(--ds-e8);min-height:var(--ds-cible);padding:var(--ds-e4) var(--ds-e8);border:1px solid transparent;border-radius:var(--ds-r-champ);background:none;color:var(--ds-texte);font:500 .9375rem/1.25rem var(--ds-font);text-align:left;cursor:pointer}
.ds-arbre-noeud:hover{background:var(--ds-survol)}
.ds-arbre-noeud[aria-current]{background:var(--ds-accent-teinte);border-color:var(--ds-accent);color:var(--ds-accent-fort);font-weight:700}
.ds-arbre li.sur-chemin>.ds-arbre-ligne .ds-arbre-noeud{box-shadow:inset 3px 0 0 var(--ds-accent)}
.ds-arbre-pli:focus-visible,.ds-arbre-noeud:focus-visible{outline:2px solid var(--ds-focus);outline-offset:-2px}
.ds-arbre-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.ds-arbre-nom{overflow-wrap:anywhere}
.ds-arbre-sub{font:400 .75rem/1rem var(--ds-font);color:var(--ds-texte-2);overflow-wrap:anywhere}
.ds-arbre-noeud[aria-current] .ds-arbre-sub{color:inherit}
.ds-arbre-n{flex:none;font:500 .75rem/1rem var(--ds-font);color:var(--ds-texte-2)}
.ds-arbre-noeud[aria-current] .ds-arbre-n{color:inherit}
.ds-arbre-ok{flex:none;display:inline-flex}
.ds-arbre mark{background:var(--ds-alerte-fond);color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px;border-radius:2px}
.ds-arbre-vide{margin:0;padding:var(--ds-e16);border:1px dashed var(--ds-bordure);border-radius:var(--ds-r-carte);color:var(--ds-texte-2);text-align:center}
/* choix courant sous l'arbre : fil d'Ariane, indication, action */
.ds-arbre-choix{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-e12) var(--ds-e16);margin-top:var(--ds-e16);padding:var(--ds-e12) var(--ds-e16);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte);background:var(--ds-page)}
.ds-arbre-fil{flex:1 1 16rem;min-width:0;margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-e4) var(--ds-e8);font:500 .875rem/1.25rem var(--ds-font)}
.ds-arbre-fil li+li::before{content:"›";margin-right:var(--ds-e8);color:var(--ds-texte-2)}
.ds-arbre-fil .manque{color:var(--ds-texte-2);font-weight:400}
.ds-arbre-fil b{font-weight:700}
@media (prefers-reduced-motion:reduce){.ds-arbre-pli .ic{transition:none}}
.ds-arbre .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Santé d'un tenant : pastille qui s'ouvre sur la liste de ce qui ne va pas, avec le lien pour le traiter */
.ds-sante>summary{cursor:pointer;list-style:none;display:inline-block}
.ds-sante>summary::-webkit-details-marker{display:none}
.ds-sante[open]>summary{margin-bottom:var(--ds-e8)}
.ds-sante ul{margin:0;padding:var(--ds-e8) var(--ds-e12);list-style:none;display:flex;flex-direction:column;gap:var(--ds-e8);border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte);background:var(--ds-carte)}
.ds-sante li{display:block}
.ds-sante li>.ds-link{display:block;margin-top:var(--ds-e4)}
.ds-sante-detail{display:block;white-space:pre-line}