:root {
  --bg: #f4f6f9;
  --panel: #ffffff;
  --panel-2: #eef1f6;
  --border: #d9deea;
  --text: #232936;
  --muted: #6a7284;
  --accent: #2f6df6;
  --danger: #d64545;
  --ok: #15946b;
  --warn: #d97a12;
}
[data-theme="dark"] {
  --bg: #12141a;
  --panel: #1b1f2a;
  --panel-2: #232838;
  --border: #2d3345;
  --text: #e6e8ef;
  --muted: #8b91a5;
  --accent: #4f8cff;
  --danger: #ff5c5c;
  --ok: #3ecf8e;
  --warn: #ffb43c;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  background: var(--bg);
  color: var(--text);
}
a {
  color: var(--accent);
}
.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}
header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
header.top h1 {
  font-size: 1.3rem;
  margin: 0;
}
header.top .sub {
  color: var(--muted);
  font-size: 0.85rem;
}
header.top .app-logo {
  width: 48px;
  height: 48px;
  border-radius: 11px;
}
.login-box .app-logo {
  display: block;
  margin: 0 auto 10px;
  width: 76px;
  height: 76px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}
.back-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* État de chargement des navigations */
.loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 90px 16px;
}
.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Menu d'actions « ⋯ » des cartes profil : replié en mobile, déployé en desktop */
.btn.card-menu-btn {
  display: none;
}
.card-menu {
  display: contents;
}
.card-menu .card-menu-panel {
  display: contents;
}
/* « Redonner le temps » + « Ajouter du temps » : côte à côte sur la même ligne */
.card-menu .card-menu-panel .card-menu-row {
  display: flex;
  gap: 4px;
  align-items: stretch;
}
.card-menu .card-menu-panel .card-menu-row .btn {
  flex: 1 1 0%;
  width: auto;
  margin: 0;
}

/* --- Disposition des nouvelles cartes (Accueil + Budget) --- */
/* Identifiant technique empilé sous le nom d'un profil */
.pc-id {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 400;
}
/* Rangées de boutons à 2 colonnes égales dans une carte (accueil) */
.btn-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.btn-grid-2 .btn {
  width: 100%;
  margin: 0;
  /* Blocage du dépassement horizontal : un libellé long (ex. « Réactiver le
       blocage ») wrap dans sa propre cellule au lieu de déborder vers la
       droite et de pousser le bouton voisin. Les boutons d'une rangée restent
       alignés (hauteur égale) via la grille ; min-height évite des boutons
       minuscules quand le libellé tient sur une ligne. */
  min-height: 34px;
  height: auto;
}
/* Grille d'actions du profil : auto-fit adapte le nombre de colonnes à la
     place dispo et au nombre de boutons. Desktop = 4-5 colonnes (ou sur une
     ligne) ; mobile = 2 colonnes pleines. Pas de max-width : elle occupe la
     largeur du panneau, donc pas de gros vide à droite. */
.btn-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.btn-actions .btn {
  width: 100%;
  margin: 0;
  min-height: 34px;
  height: auto;
}
/* Groupe à 2 boutons (Redonner/Ajouter) : borné (pas de gros boutons
     desktop), aligné à gauche pour rester cohérent avec le reste du contenu
     du profil (les autres sections sont alignées à gauche). */
.btn-actions.half {
  grid-template-columns: 1fr 1fr;
  max-width: 560px;
  margin-right: auto;
}
/* Bouton pleine largeur mis en avant (ex. « Gérer ») */
.btn-block {
  width: 100%;
  justify-content: center;
}
/* Dans une grille à 2 colonnes, un bouton pleine largeur occupe les 2
     colonnes (ex. « Supprimer le profil » en bas de la grille). */
.btn-grid-2 .btn-block {
  grid-column: 1 / -1;
}
/* Groupe de boutons en accordéon (« Plus d'actions ») : sans popover ni z-index */
.acc-group {
  border-top: 1px solid var(--border);
}
.acc-toggle {
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.acc-toggle:hover {
  border-color: var(--border);
  color: var(--text);
}
.acc-toggle .chev {
  transition: transform 0.15s ease;
}
.acc-group.open .acc-toggle .chev {
  transform: rotate(180deg);
}
.acc-body {
  display: none;
  flex-direction: column;
  gap: 6px;
}
.acc-group.open .acc-body {
  display: flex;
}
.acc-body .btn {
  justify-content: flex-start;
  text-align: left;
}
/* Libellé de section dans une carte (ex. « Actions sensibles ») */
.section-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 600;
}
/* Bouton danger à contour visible (pas juste le texte en rouge) */
.btn.danger-outline {
  color: var(--danger);
  border-color: var(--danger);
}
.btn.danger-outline:hover {
  background: rgba(214, 69, 69, 0.08);
}
/* Bloc de section en fond légèrement distinct (ex. panneau de période) */
.card-section {
  background: var(--panel-2);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}
/* Séparateur simple entre deux sections d'une carte */
.section-divider {
  border-top: 1px solid var(--border);
  margin: 14px 0;
}
/* Rangée d'actions secondaires du budget (Redonner / Ajouter) */
.budget-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Ligne « Période / Saisir (min) / Appliquer » du panneau de budget */
.period-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.period-picker {
  display: flex;
  gap: 8px;
  align-items: center;
}
.min-entry {
  display: flex;
  gap: 8px;
  align-items: center;
}
.min-entry input {
  width: 100px;
}

/* Vue famille : comparaison des profils + camembert agrégé */
.family-period {
  display: flex;
  gap: 6px;
}
.family-period .btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.family-pie-wrap {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.family-ranking {
  flex: 0 0 260px;
  max-height: 260px;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  padding-left: 16px;
}
.family-ranking h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--muted);
}
.empty-state {
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
}
.empty-state .muted {
  font-size: 0.82rem;
}
.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.rank-row:last-child {
  border-bottom: none;
}
.rank-pos {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.rank-name {
  flex: 1;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-val {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.86rem;
}

/* Santé des appareils : cartes d'anomalies + score */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.health-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.health-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.health-head > b {
  flex: 1;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
}
.health-dot.ok {
  background: var(--ok);
}
.health-dot.warn {
  background: var(--warn);
}
.health-dot.ko {
  background: var(--danger);
}
.health-score {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.health-score.ok {
  color: var(--ok);
}
.health-score.warn {
  color: var(--warn);
}
.health-score.ko {
  color: var(--danger);
}
.health-alerts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.health-alert {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
  padding: 6px 8px;
  border-radius: 6px;
}
.health-alert.warn {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
}
.health-alert.danger {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}
.health-alert > span {
  color: var(--muted);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lang-select-wrap {
  position: fixed;
  bottom: 18px;
  right: 74px;
  z-index: 60;
}
.lang-select {
  /* Largeur dynamique : suit le libellé sélectionné (ex. « Español »,
     « 中国人 ») au lieu de tronquer, bornée pour ne jamais déborder. */
  width: auto;
  min-width: 110px;
  max-width: min(70vw, 260px);
  height: 38px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.theme-toggle {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.theme-toggle .icon-sun {
  display: none;
}
.theme-toggle .icon-moon {
  display: block;
}
[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}
[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}
/* Compte connecté : badge flottant au-dessus du bouton thème, visible sur
     toutes les pages. */
.user-chip {
  position: fixed;
  bottom: 76px;
  right: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 40vw;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  font-size: 0.85rem;
}
.user-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.user-chip[hidden] {
  display: none;
}
.user-chip-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.user-chip-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip .pill {
  padding: 2px 8px;
}
.btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn:hover {
  border-color: var(--accent);
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.danger {
  color: var(--danger);
}
.btn.confirm-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
/* Action destructive secondaire : discrète, ne se révèle qu'au survol */
.btn.subtle {
  border-color: transparent;
  color: var(--muted);
}
.btn.subtle:hover {
  border-color: var(--danger);
  color: var(--danger);
}
.btn.small {
  padding: 4px 10px;
  font-size: 0.8rem;
}
/* Bouton icône seul (actions de ligne) : carré minimal, sur une ligne. */
.btn.icon {
  padding: 3px;
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.btn.icon svg {
  width: 15px;
  height: 15px;
}
.btn.icon[disabled] {
  opacity: 0.35;
}
/* Tableau des utilisateurs : colonnes Rôle et Actions qui épousent leur
     contenu (le reste de la largeur va à la colonne Nom). */
.users-table .col-role,
.users-table .col-actions {
  white-space: nowrap;
  width: 1%;
}
.btn svg {
  flex-shrink: 0;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 20px;
}
/* Carte en pause : fond jaune clair translucide (lisible clair + sombre).
     Fond teinté = signal visuel sans ajouter de ligne de texte (hauteur fixe). */
.card.profile-card.is-paused {
  background: color-mix(in srgb, var(--warn) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
}
.card.profile-card.is-locked {
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.card h2 {
  margin: 0 0 14px;
  font-size: 1.05rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.profile-card .big {
  font-size: 1.9rem;
  font-weight: 700;
}
/* Nombre « restantes » en tête de la carte Budget (page profil) */
.budget-card .big {
  font-size: 1.9rem;
  font-weight: 700;
}
/* Identifiant technique empilé sous le nom d'une application */
.id-sub {
  font-size: 0.75rem;
  margin-top: 2px;
  word-break: break-all;
  line-height: 1.25;
}
.budget-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0 2px;
}
.ring {
  flex-shrink: 0;
  transform: rotate(-90deg);
}
.ring-bg {
  fill: none;
  stroke: var(--panel-2);
  stroke-width: 7;
}
.ring-fg {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s ease;
}
.ring-text {
  fill: var(--text);
  transform: rotate(90deg);
  transform-origin: 36px 36px;
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
}
.profile-card .meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 6px;
  line-height: 1.35;
  /* Pas de troncature : le texte peut passer à la ligne proprement (jamais
       coupé en plein mot). Texte raccourci (« min », « app. ») pour tenir en
       1 ligne dans la plupart des cas ; une carte peut être légèrement plus
       haute lorsque c'est trop long, plutôt qu'afficher du texte coupé. */
  white-space: normal;
}
.profile-card .actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.drag-handle {
  cursor: grab;
  user-select: none;
  opacity: 0.35;
  font-size: 1.1rem;
  margin-right: 4px;
  vertical-align: middle;
}
.drag-handle:hover {
  opacity: 0.7;
}
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.row label {
  color: var(--muted);
  font-size: 0.85rem;
  min-width: 90px;
}
input,
select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
}
input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
}
input[type="number"] {
  width: 90px;
}
input.wide {
  flex: 1;
  min-width: 180px;
}
.search-box {
  position: relative;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-box .search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.9rem;
  pointer-events: none;
}
.search-box input {
  flex: 1;
  min-width: 0;
  padding-left: 34px;
  box-sizing: border-box;
  margin: 0;
}
.type-filter {
  padding: 8px 10px;
  font-size: 0.85rem;
}
select.ar-platform,
select.ar-category,
select.cat-select {
  padding: 4px 8px;
  font-size: 0.8rem;
  line-height: 1.3;
  max-width: 150px;
  box-sizing: border-box;
  height: 30px;
}
select.ar-platform {
  max-width: 110px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th,
td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pill {
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
}
.pill.ok {
  background: rgba(62, 207, 142, 0.15);
  color: var(--ok);
}
.pill.ko {
  background: rgba(255, 92, 92, 0.15);
  color: var(--danger);
}
.pill.warn {
  background: rgba(255, 180, 60, 0.15);
  color: #ffb43c;
}
.pill.off {
  background: var(--panel-2);
  color: var(--muted);
}
.pill.info {
  background: rgba(79, 140, 255, 0.16);
  color: var(--accent);
}
/* Bulle de tooltip auto-positionnée (JS, tooltip.js) : un seul élément
     fixe placé au-dessus de la cible (basculé dessous si la place manque),
     contraint au viewport → jamais de scroll horizontal, z-index au-dessus
     des modales. L'axe de la flèche est piloté par --tx. */
#tip {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  max-width: min(78vw, 300px);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--text);
  color: var(--panel);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}
#tip.show {
  opacity: 1;
  transform: none;
}
#tip::after {
  content: "";
  position: absolute;
  left: var(--tx, 50%);
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: var(--text);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1.5px;
}
#tip.below::after {
  bottom: auto;
  top: -4px;
}
/* Pill « plein » : fond opaque + texte contrasté, pour les états d'alerte
     du haut de carte (Pause/Coupé) — bien visible même sur fond teinté. */
.pill.warn.solid {
  background: #ffb43c;
  color: #2b1f02;
  font-weight: 700;
}
.pill.ko.solid {
  background: var(--danger);
  color: #fff;
  font-weight: 700;
}
/* Barre de progression des consommations (onglet Consommation) */
.usage-bar {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
  margin-top: 3px;
  min-width: 90px;
}
.usage-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}
.usage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.78rem;
  margin: -6px 0 10px;
}
.usage-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.usage-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.usage-legend .hint {
  margin: 0;
}
.msg {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  background: var(--panel);
  border: 1px solid var(--border);
}
.msg.err {
  border-color: var(--danger);
  color: var(--danger);
}
.msg.ok {
  border-color: var(--ok);
  color: var(--ok);
}
#toasts {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: max-content;
  max-width: 90vw;
}
#toasts .msg {
  margin-bottom: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.muted {
  color: var(--muted);
}
/* Page Logs : identifiant d'appareil affiché sous son nom, en plus discret */
.device-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.login-box {
  max-width: 360px;
  margin: 12vh auto;
}
.login-box h1 {
  text-align: center;
  margin-bottom: 4px;
}
.login-box .sub {
  text-align: center;
  color: var(--muted);
  margin-bottom: 20px;
}
.login-box .field {
  margin-bottom: 14px;
}
.login-box .field label {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.login-box .field input {
  width: 100%;
}
.login-box button {
  width: 100%;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* En-tête d'une carte profil : le nom ne doit JAMAIS passer sur 2 lignes,
     sinon la carte devient plus haute que ses voisines et désaligne la grille.
     Un nom long est tronqué « … » au lieu de wrap. */
.profile-card .flex-between {
  flex-wrap: nowrap;
}
.profile-card .flex-between h2 {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Bloc droit de l'en-tête profil : point de présence + pill côte à côte,
     alignés verticalement au milieu (indépendamment de la troncature du nom). */
.head-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
/* Point de présence d'un profil (en ligne / vu récemment / silencieux). */
.presence-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 18%, transparent);
}
.presence-dot.on {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
}
.presence-dot.recent {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent);
}
/* État de connexion d'un appareil (colonne « Statut » du tableau des
   appareils de la page profil) : vert = actif (écran allumé + filtrage en
   cours), bleu = joignable mais inactif, gris = hors ligne. */
.dev-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dev-status .presence-dot {
  width: 8px;
  height: 8px;
}
.dev-status.on {
  color: var(--ok);
}
.dev-status.on .presence-dot {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
}
.dev-status.link {
  color: var(--accent);
}
.dev-status.link .presence-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.dev-status.off {
  color: var(--muted);
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  margin: 6px 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    var(--accent) var(--fill, 0%),
    var(--border) var(--fill, 0%)
  );
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  margin-top: -6px;
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 4px;
  background: var(--border);
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
input[type="range"]:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
input[type="range"]:disabled::-webkit-slider-thumb,
input[type="range"]:disabled::-moz-range-thumb {
  background: var(--muted);
  cursor: not-allowed;
}
#budget-label,
#np-label {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
}
/* Modal « Ajuster le temps » : slider −/+ centré sur 0 */
.adjust-range-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.adjust-range-edge {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}
.adjust-range-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
}
.adjust-range input[type="range"] {
  margin: 6px 0 2px;
}
.adjust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.preset-chip {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.preset-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.preset-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.app-limit {
  min-width: 210px;
}
.app-limit input[type="range"] {
  height: 18px;
  margin: 2px 0;
}
.chart-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 18px 0 8px;
  color: var(--text);
}
select.ar-limit-mode {
  padding: 4px 8px;
  font-size: 0.8rem;
  line-height: 1.3;
  max-width: 180px;
  box-sizing: border-box;
  height: 30px;
  width: 100%;
}
@media (max-width: 1100px) {
  table {
    font-size: 0.82rem;
  }
  th,
  td {
    padding: 6px 6px;
  }
  .app-limit {
    min-width: 160px;
  }
}
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tabs .btn.active {
  border-color: var(--accent);
  color: var(--accent);
}
/* Le badge de non-lus se positionne en absolu par rapport au bouton d'onglet. */
.tabs .btn { position: relative; }

/* Badge « X non lus » sur l'onglet Messages (masqué si 0). */
.tab-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e11d48;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}
.tab-badge[hidden] { display: none; }

/* Barre de filtres du tableau Applications (rapides + tri) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.filter-bar .search-box {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.filter-pill {
  white-space: nowrap;
}
.filter-pill.active {
  border-color: var(--accent);
  color: var(--accent);
}
.filter-bar .type-filter {
  white-space: nowrap;
}
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.sortable:hover {
  color: var(--text);
}
th.sorted-asc::after {
  content: " ▲";
  font-size: 0.7rem;
}
th.sorted-desc::after {
  content: " ▼";
  font-size: 0.7rem;
}
th.col-check {
  width: 34px;
  text-align: center;
}
th.col-check input {
  margin: 0;
}
td input.row-sel {
  margin: 0;
  width: auto;
}
.action-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.action-inline .btn {
  white-space: nowrap;
}
.batch-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.batch-bar select {
  max-width: 180px;
}

/* Sélecteur de période (Historique) : actif mis en avant */
.period-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.period-switch .period-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  margin-right: 4px;
}
.period-switch .btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.copy {
  cursor: pointer;
  border-bottom: 1px dashed var(--muted);
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}
.pagination .page-info {
  min-width: 120px;
  text-align: center;
}
/* Pagination avec numéros de pages */
.pagin-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pagin-nav .btn {
  min-width: 34px;
  text-align: center;
}
.pagin-num[aria-current="page"] {
  border-color: var(--accent);
  color: var(--accent);
}
.pagin-gap {
  color: var(--muted);
  padding: 0 2px;
  user-select: none;
}
.pagin-info {
  margin-left: 10px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .pagin-label {
    display: none;
  }
  .pagin-nav .btn {
    min-width: 30px;
  }
  .pagin-info {
    display: none;
  }

  /* Pagination : toujours centrée et sans débordement sur mobile */
  .pagination,
  .pagin-nav {
    justify-content: center;
    max-width: 100%;
  }
  .pagin-nav {
    padding: 0 2px;
  }
}
.hint {
  font-size: 0.8rem;
  color: var(--muted);
}
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
}
.modal-overlay.show {
  display: flex;
}
/* La confirmation générique doit toujours passer au-dessus des autres modales
     (ex : ouverte depuis la modale de nettoyage des logs). */
#confirm-modal {
  z-index: 100;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  width: min(380px, 92vw);
  /* La modale ne doit jamais dépasser l'écran : sur petits écrans, le
       contenu défile dans la modale (le popup natif d'un <select> reste
       dessiné par l'OS au-dessus, quel que soit le z-index). */
  max-height: min(88vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.modal .field {
  margin-bottom: 12px;
}
.modal .field label {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 6px;
}
.modal .field input {
  width: 100%;
}
/* Segmented control +/− de la modale « Ajuster le temps » */
.modal .seg {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.modal .seg .btn {
  flex: 1;
  text-align: center;
}
.modal .seg .btn.is-add.active {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
  font-weight: 600;
}
.modal .seg .btn.is-remove.active {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  font-weight: 600;
}
/* Modale longue (ex. création d'utilisateur) : en-tête et pied fixes, seul le
     corps défile. Les actions restent toujours visibles, même formule pleine. */
.modal.modal-scroll {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  /* Hauteur adaptative : compacte quand le contenu est court (ex. rôle
       admin), plafonnée au viewport quand il est long — dans ce cas seul le
       corps scrolle, pied et en-tête restent fixés. */
  max-height: min(88vh, 760px);
}
.modal.modal-scroll .modal-head {
  flex-shrink: 0;
  padding: 20px 22px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.modal.modal-scroll .modal-head h2 {
  margin: 0 0 4px;
}
.modal.modal-scroll .modal-head .hint {
  margin: 0 0 6px;
}
.modal.modal-scroll .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 22px 4px;
}
.modal.modal-scroll .modal-foot {
  flex-shrink: 0;
  padding: 12px 22px 16px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.modal.modal-scroll .modal-foot .actions {
  margin-top: 0;
}
/* Dans une modale scrollable, la liste des permissions s'étend librement :
     un seul scroll (celui du corps), pas de double ascenseur. */
.modal.modal-scroll .perm-list {
  max-height: none;
}
/* Champ mot de passe + boutons Générer / Copier */
.modal .field .pw-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.modal .field .pw-row input {
  flex: 1 1 0%;
  width: auto;
  min-width: 0;
}
.modal .field .pw-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.modal .field .pw-row .pw-field,
.modal .field .pw-field {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
}
/* Place pour le bouton « X » et l'œil, qui n'apparaissent que si le champ
     est rempli (has-value) — champ vide, zéro contrôle mort. */
.modal .field .pw-row .pw-field input,
.modal .field .pw-field input {
  width: 100%;
  padding-right: 62px;
}
.modal .field .pw-row .eye,
.modal .field .pw-field .eye,
.modal .field .pw-field .pw-clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.modal .field .pw-field .eye {
  right: 32px;
}
.modal .field .pw-field .pw-clear {
  right: 6px;
}
.modal .field .pw-field .pw-clear:hover,
.modal .field .pw-row .eye:hover,
.modal .field .pw-field .eye:hover {
  color: var(--text);
}
.modal .field .pw-row .eye .eye-off,
.modal .field .pw-field .eye .eye-off {
  display: none;
}
.modal .field .pw-row .eye.seen .eye-on,
.modal .field .pw-field .eye.seen .eye-on {
  display: none;
}
.modal .field .pw-row .eye.seen .eye-off,
.modal .field .pw-field .eye.seen .eye-off {
  display: inline-flex;
}
.modal .field .pw-field .pw-clear,
.modal .field .pw-field .eye {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.modal .field .pw-field.has-value .pw-clear,
.modal .field .pw-field.has-value .eye {
  opacity: 1;
  pointer-events: auto;
}
/* Sur petits écrans, les boutons « Générer / Copier » passent sous le champ
     mot de passe : celui-ci garde toute la largeur et l'œil/X ne sont jamais
     tronqués par la cohabitation sur la même ligne. */
@media (max-width: 480px) {
  .modal .field .pw-row {
    flex-wrap: wrap;
  }
  .modal .field .pw-row > .pw-field {
    flex: 1 1 100%;
  }
  .modal .field .pw-row > .btn {
    flex: 0 0 auto;
  }
}
.modal .actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Fil de messages parent → enfant (onglet « Messages » du profil) */
/* Côte à côte : composeur à gauche, fil scrollable à droite (repli vertical
   sur écran étroit). */
.messages-layout {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr);
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}
@media (max-width: 720px) {
  .messages-layout {
    grid-template-columns: 1fr;
  }
}
.message-summary {
  font-size: 0.84rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.message-thread {
  max-height: min(58vh, 460px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border, rgba(128, 128, 128, 0.25));
  padding-top: 12px;
}
.message-row {
  background: var(--bg-soft, rgba(128, 128, 128, 0.08));
  border: 1px solid var(--border, rgba(128, 128, 128, 0.22));
  border-radius: 8px;
  padding: 8px 10px;
}
.message-row.read {
  opacity: 0.82;
}
.message-body {
  white-space: pre-wrap;
  word-break: break-word;
}
.message-meta {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Bouton « poubelle » d'un message : aligné à droite de la ligne de métadonnées. */
.msg-delete {
  margin-left: auto;
  padding: 1px 7px;
  line-height: 1.5;
}
/* Rappel de rétention sous le récapitulatif : les messages lus sont purgés
   automatiquement après 24 h (cron nocturne) — rassure sur l'absence
   d'historique long. */
.message-retention {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 6px;
}
/* Composeur de message (colonne gauche de l'onglet) : textarea pleine
   largeur + bouton d'envoi. */
.messages-composer textarea {
  width: 100%;
  min-height: 70px;
  resize: vertical;
  box-sizing: border-box;
  background: var(--bg, #fff);
  color: inherit;
  border: 1px solid var(--border, rgba(128, 128, 128, 0.4));
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}
.messages-composer .actions {
  margin-top: 8px;
}

/* ---------------------------------------------------------------- */
/* Responsive : pas de chevauchement sur petits écrans               */
/* ---------------------------------------------------------------- */
.top-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Déconnexion : action de session, pas une action sur les données. Séparée
     des boutons fonctionnels par un trait vertical + espace. Ignorée quand elle
     est le seul bouton (page logs). */
.top-actions > .btn:not(:first-child):last-child {
  margin-left: 14px;
  position: relative;
}
.top-actions > .btn:not(:first-child):last-child::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--border);
}
/* Actions secondaires masquées sur très petit écran (exports/imports).
     Accessibles autrement indépendamment ; évite un header trop haut. */
.hide-small {
  display: inline-flex;
}

@media (max-width: 720px) {
  .hide-small {
    display: none !important;
  }
  .wrap {
    padding: 12px 10px 70px;
  }
  header.top {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 0;
  }
  header.top h1 {
    font-size: 1.1rem;
  }
  .top-actions {
    justify-content: flex-start;
  }
  .btn {
    padding: 7px 10px;
    font-size: 0.85rem;
  }
  .btn.small {
    padding: 5px 8px;
    font-size: 0.78rem;
  }
  .card {
    padding: 14px 12px;
    margin-bottom: 14px;
  }

  /* Tables : défilement horizontal au lieu de se chevaucher */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th,
  td {
    padding: 6px 8px;
  }
  /* Colonnes secondaires masquées sur mobile (tableaux de consultation) */
  .col-hide {
    display: none;
  }

  /* Formulaires : libellés au-dessus des champs, pleine largeur */
  .row label {
    min-width: 0;
    width: 100%;
  }
  input,
  select {
    max-width: 100%;
  }
  input.wide {
    min-width: 0;
    width: 100%;
  }

  .grid {
    grid-template-columns: 1fr;
  }
  /* Menu « ⋯ » des cartes profil : replié en mobile, ouvert au clic */
  .card-menu {
    position: relative;
    display: block;
  }
  .btn.card-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
  }
  .card-menu .card-menu-panel {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    min-width: 230px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    gap: 4px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  }
  .card-menu .card-menu-panel.open {
    display: flex;
  }
  .card-menu .card-menu-panel .btn {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
  }
  .chart-title {
    font-size: 1rem;
    margin: 18px 0 6px;
    color: var(--muted);
  }
  .chart-duo {
    grid-template-columns: 1fr !important;
  }
  #chart-daily {
    height: 260px !important;
  }
  #chart-trend {
    height: 240px !important;
  }
  #toasts {
    width: calc(100vw - 20px);
    max-width: none;
  }
  .profile-card .big {
    font-size: 1.6rem;
  }

  /* Panneau de période : « Période [Jour] » sur une ligne, puis le libellé
       « Saisir (min) » au-dessus de son champ, puis « Appliquer » pleine largeur. */
  #budget-form .period-line {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .period-picker,
  .min-entry {
    width: 100%;
  }
  .period-picker select {
    flex: 1;
    max-width: none;
  }
  .min-entry {
    flex-direction: column;
    align-items: stretch;
  }
  .min-entry input {
    width: 100%;
  }
  #budget-form .btn.primary {
    width: 100%;
  }

  /* Vue famille : camembert au-dessus du classement sur mobile */
  .family-pie-wrap {
    flex-direction: column;
  }
  .family-ranking {
    flex: 1 1 auto;
    max-height: none;
    border-left: none;
    padding-left: 0;
  }
}

/* --- Page « Utilisateurs » (RBAC) --- */
.table-wrap {
  overflow-x: auto;
  margin-top: 10px;
}
table .row-dim td {
  opacity: 0.45;
}
.perm-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 4px;
}
.perm-group-title {
  margin: 8px 0 2px;
  padding-top: 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.perm-group-title:first-child {
  margin-top: 0;
  padding-top: 0;
}
/* Spécificité > .modal .field label (display:block) pour que la rangée
     checkbox+texte reste bien en flex et centrée verticalement. */
.modal .field .perm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  line-height: 1.2;
  padding: 3px 0;
  cursor: pointer;
}
.modal .field .perm-row input {
  margin: 0;
}
/* Case « hors liste » (ex. Compte désactivé) : compacte et à côté du texte ;
     neutralise `.modal .field input { width:100% }` qui étirait la case. */
.modal .field .perm-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
/* Cases à cocher sur mesure (16px exacts) : centrage vertical parfait avec
     le texte, indépendant du rendu natif du navigateur. padding/border sont
     annulés pour neutraliser la règle générique `input, select` (qui les
     étirait) et width/height (15px→16px border-box) celle de
     `.modal .field input { width: 100% }`. */
.perm-list .perm-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  align-self: center;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--panel-2);
  cursor: pointer;
  position: relative;
  /* Les glyphes bas-de-casse sont légèrement au-dessus du centre géométrique
       de leur ligne : petit nudge optique pour centrer CE qui se voit. */
  transform: translateY(-1px);
}
.perm-list .perm-row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.perm-list .perm-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.perm-tools {
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
}
.perm-tools .btn {
  display: inline-flex;
}
/* Entête d'une liste d'accès : label à gauche, bouton « Tout cocher » à droite. */
.perm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.modal .field .perm-head label {
  margin-bottom: 0;
  flex: 1;
}
.modal .field .perm-head label .muted {
  font-weight: 400;
  font-size: 0.8rem;
}
.perm-head .btn {
  flex-shrink: 0;
}