/* DYS.MA - interface v2 : surfaces (panneau, carte d'indicateur, pastille, etat vide, squelette, alerte). */

body.ui-v2 .ui-root .ui-panel {
  margin: 0; padding: 0; border: 1px solid var(--ds-border); border-radius: var(--ds-radius);
  background: var(--ds-surface); box-shadow: none; min-inline-size: 0;
}
body.ui-v2 .ui-root .ui-panel-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-2); padding: var(--ds-sp-3) var(--ds-sp-4);
  border-bottom: 1px solid var(--ds-border);
}
body.ui-v2 .ui-root .ui-panel-head h3 { flex: 1 1 auto; font-size: var(--ds-fs-lg); }
body.ui-v2 .ui-root .ui-panel-body { padding: var(--ds-sp-4); }
body.ui-v2 .ui-root .ui-list > li { display: flex; align-items: center; gap: var(--ds-sp-3); min-height: var(--ds-ctl-touch); padding: var(--ds-sp-2) 0; border-bottom: 1px solid var(--ds-border); }
body.ui-v2 .ui-root .ui-list > li:last-child { border-bottom: 0; }
/* Ligne de liste a reglage : le reglage passe sous le titre, sur toute la largeur. */
body.ui-v2 .ui-root .ui-list > li.has-sub { flex-wrap: wrap; }
body.ui-v2 .ui-root .ui-list > li.has-sub > .ui-setting { flex: 1 0 100%; }

/* Carte d'indicateur : libelle + periode, valeur, jamais de chiffre sans source. */
body.ui-v2 .ui-root .ui-kpi { display: grid; gap: var(--ds-sp-1); margin: 0; padding: var(--ds-sp-3) var(--ds-sp-4); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-surface); color: var(--ds-text); text-decoration: none; }
body.ui-v2 .ui-root a.ui-kpi:hover { border-color: var(--ds-primary); }
body.ui-v2 .ui-root .ui-kpi-label { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); }
body.ui-v2 .ui-root .ui-kpi-value { font-size: var(--ds-fs-2xl); font-weight: 700; line-height: 1.1; }
body.ui-v2 .ui-root .ui-kpi-note { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); }

/* Pastille de statut : toujours un libelle ecrit + un style de trait propre au statut. */
body.ui-v2 .ui-root .ui-pill {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--ds-sp-2); margin: 0;
  border: 1px solid var(--ui-pill-line, var(--ds-border-strong)); border-radius: var(--ds-r-pill);
  background: var(--ui-pill-bg, var(--ds-surface)); color: var(--ui-pill-fg, var(--ds-text));
  font-size: var(--ds-fs-xs); font-weight: 600; white-space: nowrap;
}
body.ui-v2 .ui-root .ui-pill.is-dashed { border-style: dashed; }
body.ui-v2 .ui-root .ui-pill.is-dotted { border-style: dotted; border-width: 2px; }
body.ui-v2 .ui-root .ui-pill.is-struck { text-decoration: line-through; }

/* Alerte en ligne (absence, conflit, erreur) : texte toujours present, role porte par le gabarit. */
body.ui-v2 .ui-root .ui-alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-2) var(--ds-sp-3); margin: 0; padding: var(--ds-sp-3) var(--ds-sp-4);
  border: 1px solid var(--ds-border-strong); border-inline-start-width: 4px; border-radius: var(--ds-radius);
  background: var(--ds-surface); color: var(--ds-text);
}
body.ui-v2 .ui-root .ui-alert.is-warn { border-color: var(--ds-warning); background: var(--ds-warning-soft); }
body.ui-v2 .ui-root .ui-alert.is-bad { border-color: var(--ds-danger); background: var(--ds-danger-soft); color: var(--ds-danger-text); }
body.ui-v2 .ui-root .ui-alert.is-info { border-color: var(--ds-primary); background: var(--ds-primary-soft); }
body.ui-v2 .ui-root .ui-alert > b { font-weight: 700; }

/* Etat vide : une phrase qui dit quoi faire, et l'action si elle existe. */
body.ui-v2 .ui-root .ui-empty { display: grid; justify-items: start; gap: var(--ds-sp-2); padding: var(--ds-sp-4); color: var(--ds-text-muted); }
body.ui-v2 .ui-root .ui-empty strong { color: var(--ds-text); font-weight: 600; }

/* Squelette : zone en attente de donnees, annoncee par aria-busy sur le conteneur. */
body.ui-v2 .ui-root .ui-skeleton { display: grid; gap: var(--ds-sp-2); }
body.ui-v2 .ui-root .ui-skeleton > span { display: block; block-size: 14px; border-radius: var(--ds-r-sm); background: var(--ds-surface-sunken); animation: ui-pulse 1.2s ease-in-out infinite; }
body.ui-v2 .ui-root .ui-skeleton > span:nth-child(2) { inline-size: 80%; }
body.ui-v2 .ui-root .ui-skeleton > span:nth-child(3) { inline-size: 60%; }
@keyframes ui-pulse { 50% { opacity: .45; } }

/* Roles de statut : variables lues par la pastille et par les blocs de la grille. */
body.ui-v2 .ui-root .st-libre { --ui-pill-bg: var(--ds-st-libre-bg); --ui-pill-fg: var(--ds-st-libre-fg); --ui-pill-line: var(--ds-st-libre-line); }
body.ui-v2 .ui-root .st-ferme { --ui-pill-bg: var(--ds-st-ferme-bg); --ui-pill-fg: var(--ds-st-ferme-fg); --ui-pill-line: var(--ds-st-ferme-line); }
body.ui-v2 .ui-root .st-demande { --ui-pill-bg: var(--ds-st-demande-bg); --ui-pill-fg: var(--ds-st-demande-fg); --ui-pill-line: var(--ds-st-demande-line); }
body.ui-v2 .ui-root .st-attente { --ui-pill-bg: var(--ds-st-attente-bg); --ui-pill-fg: var(--ds-st-attente-fg); --ui-pill-line: var(--ds-st-attente-line); }
body.ui-v2 .ui-root .st-confirme { --ui-pill-bg: var(--ds-st-confirme-bg); --ui-pill-fg: var(--ds-st-confirme-fg); --ui-pill-line: var(--ds-st-confirme-line); }
body.ui-v2 .ui-root .st-arrive { --ui-pill-bg: var(--ds-st-arrive-bg); --ui-pill-fg: var(--ds-st-arrive-fg); --ui-pill-line: var(--ds-st-arrive-line); }
body.ui-v2 .ui-root .st-cours { --ui-pill-bg: var(--ds-st-cours-bg); --ui-pill-fg: var(--ds-st-cours-fg); --ui-pill-line: var(--ds-st-cours-line); }
body.ui-v2 .ui-root .st-termine { --ui-pill-bg: var(--ds-st-termine-bg); --ui-pill-fg: var(--ds-st-termine-fg); --ui-pill-line: var(--ds-st-termine-line); }
body.ui-v2 .ui-root .st-absent { --ui-pill-bg: var(--ds-st-absent-bg); --ui-pill-fg: var(--ds-st-absent-fg); --ui-pill-line: var(--ds-st-absent-line); }
body.ui-v2 .ui-root .st-annule { --ui-pill-bg: var(--ds-st-annule-bg); --ui-pill-fg: var(--ds-st-annule-fg); --ui-pill-line: var(--ds-st-annule-line); }

/* Ligne de liste : un titre et une précision, chacun sur sa ligne (jamais collés). */
body.ui-v2 .ui-root .ui-li-main { display: grid; gap: 2px; min-inline-size: 0; flex: 1 1 auto; }
body.ui-v2 .ui-root .ui-li-t { display: block; font-weight: 600; overflow-wrap: anywhere; }
body.ui-v2 .ui-root .ui-li-s { display: block; font-size: var(--ds-fs-sm); color: var(--ds-text-muted); overflow-wrap: anywhere; }
body.ui-v2 .ui-root .ui-li-main .ui-pill { justify-self: start; }
body.ui-v2 .ui-root .ui-li-end { display: flex; flex: none; align-items: center; gap: var(--ds-sp-2); margin-inline-start: auto; }

/* Niveau d'urgence : libellé écrit, couleur et trait propres à chaque niveau. */
body.ui-v2 .ui-root .urg-haute { --ui-pill-bg: var(--ds-urg-haute-bg); --ui-pill-fg: var(--ds-urg-haute-fg); --ui-pill-line: var(--ds-urg-haute-line); border-width: 2px; font-weight: 700; }
body.ui-v2 .ui-root .urg-moyenne { --ui-pill-bg: var(--ds-urg-moyenne-bg); --ui-pill-fg: var(--ds-urg-moyenne-fg); --ui-pill-line: var(--ds-urg-moyenne-line); border-style: dashed; }
body.ui-v2 .ui-root .urg-basse { --ui-pill-bg: var(--ds-urg-basse-bg); --ui-pill-fg: var(--ds-urg-basse-fg); --ui-pill-line: var(--ds-urg-basse-line); }

/* En-tête de panneau : information secondaire à droite du titre (période, total). */
body.ui-v2 .ui-root .ui-panel-meta { margin-inline-start: auto; font-size: var(--ds-fs-sm); color: var(--ds-text-muted); }

/* Répartition : une barre proportionnelle + une légende chiffrée (le texte porte l'information). */
body.ui-v2 .ui-root .ui-split-total { display: flex; align-items: baseline; gap: var(--ds-sp-2); }
body.ui-v2 .ui-root .ui-split-total b { font-size: var(--ds-fs-2xl); line-height: 1.1; }
body.ui-v2 .ui-root .ui-split-bar { display: flex; block-size: 12px; margin: var(--ds-sp-3) 0; overflow: hidden; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-pill); background: var(--ds-surface-muted); }
body.ui-v2 .ui-root .ui-split-bar > span { display: block; flex-shrink: 1; min-inline-size: 4px; border-inline-end: 2px solid var(--ds-surface); background: var(--ui-pill-line); }
body.ui-v2 .ui-root .ui-split-bar > span:last-child { border-inline-end: 0; }
body.ui-v2 .ui-root .ui-split-list > li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: center; gap: var(--ds-sp-3); min-height: var(--ds-ctl); padding: var(--ds-sp-1) 0; border-bottom: 1px solid var(--ds-border); }
body.ui-v2 .ui-root .ui-split-list > li:last-child { border-bottom: 0; }
body.ui-v2 .ui-root .ui-split-key { inline-size: 14px; block-size: 14px; border-radius: 3px; background: var(--ui-pill-line); }
body.ui-v2 .ui-root .ui-split-n { font-weight: 700; min-inline-size: 2ch; text-align: end; }
body.ui-v2 .ui-root .ui-split-p { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); min-inline-size: 4.5ch; text-align: end; }

/* Largeur de segment en % : une classe par valeur, pas de style en ligne. */
body.ui-v2 .ui-root .ui-w0 { flex-basis: 0%; }
body.ui-v2 .ui-root .ui-w1 { flex-basis: 1%; }
body.ui-v2 .ui-root .ui-w2 { flex-basis: 2%; }
body.ui-v2 .ui-root .ui-w3 { flex-basis: 3%; }
body.ui-v2 .ui-root .ui-w4 { flex-basis: 4%; }
body.ui-v2 .ui-root .ui-w5 { flex-basis: 5%; }
body.ui-v2 .ui-root .ui-w6 { flex-basis: 6%; }
body.ui-v2 .ui-root .ui-w7 { flex-basis: 7%; }
body.ui-v2 .ui-root .ui-w8 { flex-basis: 8%; }
body.ui-v2 .ui-root .ui-w9 { flex-basis: 9%; }
body.ui-v2 .ui-root .ui-w10 { flex-basis: 10%; }
body.ui-v2 .ui-root .ui-w11 { flex-basis: 11%; }
body.ui-v2 .ui-root .ui-w12 { flex-basis: 12%; }
body.ui-v2 .ui-root .ui-w13 { flex-basis: 13%; }
body.ui-v2 .ui-root .ui-w14 { flex-basis: 14%; }
body.ui-v2 .ui-root .ui-w15 { flex-basis: 15%; }
body.ui-v2 .ui-root .ui-w16 { flex-basis: 16%; }
body.ui-v2 .ui-root .ui-w17 { flex-basis: 17%; }
body.ui-v2 .ui-root .ui-w18 { flex-basis: 18%; }
body.ui-v2 .ui-root .ui-w19 { flex-basis: 19%; }
body.ui-v2 .ui-root .ui-w20 { flex-basis: 20%; }
body.ui-v2 .ui-root .ui-w21 { flex-basis: 21%; }
body.ui-v2 .ui-root .ui-w22 { flex-basis: 22%; }
body.ui-v2 .ui-root .ui-w23 { flex-basis: 23%; }
body.ui-v2 .ui-root .ui-w24 { flex-basis: 24%; }
body.ui-v2 .ui-root .ui-w25 { flex-basis: 25%; }
body.ui-v2 .ui-root .ui-w26 { flex-basis: 26%; }
body.ui-v2 .ui-root .ui-w27 { flex-basis: 27%; }
body.ui-v2 .ui-root .ui-w28 { flex-basis: 28%; }
body.ui-v2 .ui-root .ui-w29 { flex-basis: 29%; }
body.ui-v2 .ui-root .ui-w30 { flex-basis: 30%; }
body.ui-v2 .ui-root .ui-w31 { flex-basis: 31%; }
body.ui-v2 .ui-root .ui-w32 { flex-basis: 32%; }
body.ui-v2 .ui-root .ui-w33 { flex-basis: 33%; }
body.ui-v2 .ui-root .ui-w34 { flex-basis: 34%; }
body.ui-v2 .ui-root .ui-w35 { flex-basis: 35%; }
body.ui-v2 .ui-root .ui-w36 { flex-basis: 36%; }
body.ui-v2 .ui-root .ui-w37 { flex-basis: 37%; }
body.ui-v2 .ui-root .ui-w38 { flex-basis: 38%; }
body.ui-v2 .ui-root .ui-w39 { flex-basis: 39%; }
body.ui-v2 .ui-root .ui-w40 { flex-basis: 40%; }
body.ui-v2 .ui-root .ui-w41 { flex-basis: 41%; }
body.ui-v2 .ui-root .ui-w42 { flex-basis: 42%; }
body.ui-v2 .ui-root .ui-w43 { flex-basis: 43%; }
body.ui-v2 .ui-root .ui-w44 { flex-basis: 44%; }
body.ui-v2 .ui-root .ui-w45 { flex-basis: 45%; }
body.ui-v2 .ui-root .ui-w46 { flex-basis: 46%; }
body.ui-v2 .ui-root .ui-w47 { flex-basis: 47%; }
body.ui-v2 .ui-root .ui-w48 { flex-basis: 48%; }
body.ui-v2 .ui-root .ui-w49 { flex-basis: 49%; }
body.ui-v2 .ui-root .ui-w50 { flex-basis: 50%; }
body.ui-v2 .ui-root .ui-w51 { flex-basis: 51%; }
body.ui-v2 .ui-root .ui-w52 { flex-basis: 52%; }
body.ui-v2 .ui-root .ui-w53 { flex-basis: 53%; }
body.ui-v2 .ui-root .ui-w54 { flex-basis: 54%; }
body.ui-v2 .ui-root .ui-w55 { flex-basis: 55%; }
body.ui-v2 .ui-root .ui-w56 { flex-basis: 56%; }
body.ui-v2 .ui-root .ui-w57 { flex-basis: 57%; }
body.ui-v2 .ui-root .ui-w58 { flex-basis: 58%; }
body.ui-v2 .ui-root .ui-w59 { flex-basis: 59%; }
body.ui-v2 .ui-root .ui-w60 { flex-basis: 60%; }
body.ui-v2 .ui-root .ui-w61 { flex-basis: 61%; }
body.ui-v2 .ui-root .ui-w62 { flex-basis: 62%; }
body.ui-v2 .ui-root .ui-w63 { flex-basis: 63%; }
body.ui-v2 .ui-root .ui-w64 { flex-basis: 64%; }
body.ui-v2 .ui-root .ui-w65 { flex-basis: 65%; }
body.ui-v2 .ui-root .ui-w66 { flex-basis: 66%; }
body.ui-v2 .ui-root .ui-w67 { flex-basis: 67%; }
body.ui-v2 .ui-root .ui-w68 { flex-basis: 68%; }
body.ui-v2 .ui-root .ui-w69 { flex-basis: 69%; }
body.ui-v2 .ui-root .ui-w70 { flex-basis: 70%; }
body.ui-v2 .ui-root .ui-w71 { flex-basis: 71%; }
body.ui-v2 .ui-root .ui-w72 { flex-basis: 72%; }
body.ui-v2 .ui-root .ui-w73 { flex-basis: 73%; }
body.ui-v2 .ui-root .ui-w74 { flex-basis: 74%; }
body.ui-v2 .ui-root .ui-w75 { flex-basis: 75%; }
body.ui-v2 .ui-root .ui-w76 { flex-basis: 76%; }
body.ui-v2 .ui-root .ui-w77 { flex-basis: 77%; }
body.ui-v2 .ui-root .ui-w78 { flex-basis: 78%; }
body.ui-v2 .ui-root .ui-w79 { flex-basis: 79%; }
body.ui-v2 .ui-root .ui-w80 { flex-basis: 80%; }
body.ui-v2 .ui-root .ui-w81 { flex-basis: 81%; }
body.ui-v2 .ui-root .ui-w82 { flex-basis: 82%; }
body.ui-v2 .ui-root .ui-w83 { flex-basis: 83%; }
body.ui-v2 .ui-root .ui-w84 { flex-basis: 84%; }
body.ui-v2 .ui-root .ui-w85 { flex-basis: 85%; }
body.ui-v2 .ui-root .ui-w86 { flex-basis: 86%; }
body.ui-v2 .ui-root .ui-w87 { flex-basis: 87%; }
body.ui-v2 .ui-root .ui-w88 { flex-basis: 88%; }
body.ui-v2 .ui-root .ui-w89 { flex-basis: 89%; }
body.ui-v2 .ui-root .ui-w90 { flex-basis: 90%; }
body.ui-v2 .ui-root .ui-w91 { flex-basis: 91%; }
body.ui-v2 .ui-root .ui-w92 { flex-basis: 92%; }
body.ui-v2 .ui-root .ui-w93 { flex-basis: 93%; }
body.ui-v2 .ui-root .ui-w94 { flex-basis: 94%; }
body.ui-v2 .ui-root .ui-w95 { flex-basis: 95%; }
body.ui-v2 .ui-root .ui-w96 { flex-basis: 96%; }
body.ui-v2 .ui-root .ui-w97 { flex-basis: 97%; }
body.ui-v2 .ui-root .ui-w98 { flex-basis: 98%; }
body.ui-v2 .ui-root .ui-w99 { flex-basis: 99%; }
body.ui-v2 .ui-root .ui-w100 { flex-basis: 100%; }

/* Alerte de reussite : meme gabarit que les autres niveaux. */
body.ui-v2 .ui-root .ui-alert.is-ok { border-color: var(--ds-success); background: var(--ds-success-soft); color: var(--ds-success-text); }
body.ui-v2 .ui-root .ui-alert ul { display: grid; gap: var(--ds-sp-1); margin: 0; padding-inline-start: var(--ds-sp-4); list-style: disc; }
body.ui-v2 .ui-root .ui-alert .errorlist { margin: 0; padding: 0; list-style: none; }

/* Liste de definitions : terme a gauche, valeur a droite, une ligne par couple (une colonne sous 768 px). */
body.ui-v2 .ui-root .ui-dl { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: var(--ds-sp-2) var(--ds-sp-4); margin: 0; }
body.ui-v2 .ui-root .ui-dl > dt { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-fs-sm); font-weight: 400; }
body.ui-v2 .ui-root .ui-dl > dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; font-weight: 500; }

/* Tableau de donnees : defile dans son cadre plutot que de deborder de la page. */
body.ui-v2 .ui-root .ui-table-wrap { overflow-x: auto; }
body.ui-v2 .ui-root .ui-table { inline-size: 100%; border-collapse: collapse; font-size: var(--ds-fs-md); }
body.ui-v2 .ui-root .ui-table th, body.ui-v2 .ui-root .ui-table td { padding: var(--ds-sp-2) var(--ds-sp-3); border-bottom: 1px solid var(--ds-border); text-align: start; vertical-align: top; }
body.ui-v2 .ui-root .ui-table th { font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-text-muted); white-space: nowrap; }
body.ui-v2 .ui-root .ui-table tbody tr:last-child td { border-bottom: 0; }
body.ui-v2 .ui-root .ui-table .is-num { text-align: end; white-space: nowrap; }

/* Mises en page d'ecran : principal + colonne laterale, ou grille de panneaux. */
body.ui-v2 .ui-root .ui-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--ds-sp-4); align-items: start; }
body.ui-v2 .ui-root .ui-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-4); align-items: start; }
body.ui-v2 .ui-root .ui-cols.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.ui-v2 .ui-root .ui-cols.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.ui-v2 .ui-root .ui-sep { padding-block-start: var(--ds-sp-4); border-block-start: 1px solid var(--ds-border); }
body.ui-v2 .ui-root .ui-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-2); margin-block-end: var(--ds-sp-4); }
@media (max-width: 1023.98px) {
  body.ui-v2 .ui-root .ui-layout, body.ui-v2 .ui-root .ui-cols, body.ui-v2 .ui-root .ui-cols.is-3, body.ui-v2 .ui-root .ui-cols.is-4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  body.ui-v2 .ui-root .ui-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.ui-v2 .ui-root .ui-dl > dd { margin-block-end: var(--ds-sp-2); }
}

/* Largeur de lecture d'un formulaire seul sur la page. */
body.ui-v2 .ui-root .ui-measure { max-inline-size: 760px; }

/* Liste de notifications : chaque ligne est UN bloc. Avec destination, toute sa surface est un
   bouton ; sans destination, un bloc statique et un bouton « Marquer lue » a droite. Non lue =
   titre gras + trait a gauche + mention ecrite (jamais la couleur seule). */
body.ui-v2 .ui-root .ui-notifs { margin: 0; padding: 0; list-style: none; }
body.ui-v2 .ui-root .ui-notif { margin: 0; padding: 0; border-bottom: 1px solid var(--ds-border); border-inline-start: 4px solid transparent; }
body.ui-v2 .ui-root .ui-notif:last-child { border-bottom: 0; }
body.ui-v2 .ui-root .ui-notif.is-unread { border-inline-start-color: var(--ds-primary); background: var(--ds-primary-soft); }
body.ui-v2 .ui-root .ui-notif-form { margin: 0; padding: 0; }
body.ui-v2 .ui-root .ui-notif-main {
  display: flex; align-items: center; gap: var(--ds-sp-4); inline-size: 100%; min-height: var(--ds-ctl-touch);
  margin: 0; padding: var(--ds-sp-3) var(--ds-sp-4); border: 0; border-radius: 0; background: transparent; background-image: none;
  box-shadow: none; color: var(--ds-text); font: inherit; font-weight: 400; text-align: start; text-decoration: none; cursor: pointer;
}
body.ui-v2 .ui-root .ui-notif-main.is-static { cursor: default; }
body.ui-v2 .ui-root button.ui-notif-main:hover, body.ui-v2 .ui-root button.ui-notif-main:active, body.ui-v2 .ui-root button.ui-notif-main:focus {
  background: var(--ds-surface-muted); background-image: none; border: 0; box-shadow: none; color: var(--ds-text);
}
body.ui-v2 .ui-root .ui-notif.is-unread button.ui-notif-main:hover { background: var(--ds-surface); }
body.ui-v2 .ui-root button.ui-notif-main:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
body.ui-v2 .ui-root .ui-notif-text { display: grid; gap: 2px; flex: 1 1 auto; min-inline-size: 0; }
body.ui-v2 .ui-root .ui-notif-title { font-weight: 500; }
body.ui-v2 .ui-root .ui-notif.is-unread .ui-notif-title { font-weight: 700; }
body.ui-v2 .ui-root .ui-notif-body { color: var(--ds-text); overflow-wrap: anywhere; }
body.ui-v2 .ui-root .ui-notif-meta { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); }
body.ui-v2 .ui-root .ui-notif-go { flex: none; font-size: var(--ds-fs-xl); line-height: 1; color: var(--ds-text-muted); }
body.ui-v2 .ui-root .ui-notif-act { flex: none; margin: 0; }

/* Avatar : photo carrée ou initiales (profil professionnel). Jetons du design system uniquement. */
body.ui-v2 .ui-root .ui-avatar {
  display: inline-grid; place-items: center; inline-size: 96px; block-size: 96px; flex: none; object-fit: cover; overflow: hidden;
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-primary-soft); color: var(--ds-primary-text);
  font-weight: 600; font-size: var(--ds-fs-lg); text-transform: uppercase;
}