/* ==========================================================================
   Z-Portail — Démonstration publique
   Feuille de style : reproduction du design system de l'application réelle.
   Relevé sur captures d'écran du 2026-09-02.
   ========================================================================== */

/* ------------------------------------------------------------------ Jetons */
:root {
  /* Bleu primaire — boutons de création, item de menu actif, liens */
  --bleu:          #2563eb;
  --bleu-fonce:    #1d4ed8;
  --bleu-pale:     #eff6ff;
  --bleu-bord:     #bfdbfe;

  /* Vert — statuts actifs, bouton Enregistrer des modales */
  --vert:          #16a34a;
  --vert-fonce:    #15803d;
  --vert-pale:     #dcfce7;
  --vert-texte:    #166534;

  /* Rouge — suppressions, échecs */
  --rouge:         #dc2626;
  --rouge-fonce:   #b91c1c;
  --rouge-pale:    #fee2e2;
  --rouge-texte:   #991b1b;
  --rouge-clair:   #fca5a5;

  /* Orange / jaune — textes d'aide, seuils, avertissements */
  --orange:        #c2620c;
  --orange-vif:    #f59e0b;
  --jaune-pale:    #fef3c7;
  --jaune-bord:    #fcd34d;
  --jaune-texte:   #92400e;

  /* Violet et turquoise — accents (rôles organisation, délégations) */
  --violet:        #7c3aed;
  --violet-pale:   #ede9fe;
  --turquoise:     #14b8a6;
  --turquoise-pale:#ccfbf1;

  /* Neutres */
  --encre:         #0f172a;  /* titres */
  --texte:         #334155;  /* corps */
  --gris:          #64748b;  /* libellés secondaires */
  --gris-clair:    #94a3b8;  /* placeholders, icônes inertes */
  --bord:          #e2e8f0;
  --bord-clair:    #f1f5f9;
  --fond:          #f7f9fc;  /* fond de page */
  --blanc:         #ffffff;

  --rayon:         12px;
  --rayon-petit:   8px;
  --sidebar:       248px;
  --topbar:        56px;

  --ombre-carte:   0 1px 2px rgba(15, 23, 42, .04);
  --ombre-modale:  0 20px 45px rgba(15, 23, 42, .22);
  --ombre-menu:    0 8px 24px rgba(15, 23, 42, .12);
}

/* ------------------------------------------------------------------- Socle */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--bleu); text-decoration: none; }
svg { flex: none; }

/* Masque un élément sans toucher à son affichage flex d'origine. */
[hidden] { display: none !important; }

/* ================================================================= BANDEAU
   Rappel permanent que l'on est dans une démonstration, jamais dans la prod.
   ========================================================================= */
.bandeau-demo {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 40px;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  background: linear-gradient(90deg, #0f172a, #1e3a8a);
  color: #e2e8f0;
  font-size: 13px;
}
.bandeau-demo strong { color: var(--blanc); font-weight: 600; }
.bandeau-demo .puce {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: 12px;
}
.bandeau-demo .espace { margin-left: auto; }
.bandeau-demo select {
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1);
  color: var(--blanc);
  font-size: 12px;
}
.bandeau-demo select option { color: var(--encre); }
.bandeau-demo button {
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  color: var(--blanc);
  font-size: 12px;
}
.bandeau-demo button:hover { background: rgba(255, 255, 255, .14); }

/* ================================================================ STRUCTURE */
.appli { display: flex; min-height: 100vh; padding-top: 40px; }

/* ----------------------------------------------------------------- Sidebar */
.sidebar {
  position: fixed;
  top: 40px; bottom: 0; left: 0;
  width: var(--sidebar);
  background: var(--blanc);
  border-right: 1px solid var(--bord);
  overflow-y: auto;
  z-index: 100;
}
.sidebar-entete {
  display: flex; align-items: center; gap: 10px;
  height: var(--topbar);
  padding: 0 16px;
  border-bottom: 1px solid var(--bord);
}
.logo-carre {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: var(--blanc);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; line-height: 1;
}
.sidebar-entete .marque { font-weight: 700; color: var(--encre); font-size: 14px; line-height: 1.2; }
.sidebar-entete .sous   { font-size: 11px; color: var(--gris-clair); }

.sidebar-groupe { padding: 10px 12px 2px; }
.sidebar-groupe-titre {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 8px 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--gris-clair);
  text-transform: uppercase;
}
.sidebar-lien {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 9px 10px;
  margin-bottom: 2px;
  border: 0;
  border-radius: var(--rayon-petit);
  background: transparent;
  color: var(--texte);
  font-size: 13.5px;
  text-align: left;
}
.sidebar-lien:hover { background: var(--bord-clair); }
.sidebar-lien.actif { background: var(--bleu-pale); color: var(--bleu); font-weight: 500; }
.sidebar-lien.actif svg { color: var(--bleu); }
.sidebar-lien svg { width: 17px; height: 17px; }
.sidebar-separateur { margin: 10px 20px; border-top: 1px solid var(--bord); }

/* ------------------------------------------------------------------ Top bar */
.zone { flex: 1; margin-left: var(--sidebar); min-width: 0; }

.topbar {
  position: sticky; top: 40px; z-index: 90;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px;
  height: var(--topbar);
  padding: 0 22px;
  background: var(--blanc);
  border-bottom: 1px solid var(--bord);
}
.topbar-bouton {
  position: relative;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--gris);
}
.topbar-bouton:hover { background: var(--bord-clair); }
.topbar-bouton .pastille {
  position: absolute; top: 6px; right: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rouge);
  border: 1.5px solid var(--blanc);
}
.avatar-topbar {
  width: 32px; height: 32px; margin-left: 6px;
  border-radius: 50%;
  background: var(--bleu);
  color: var(--blanc);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  line-height: 1;
  border: 0;
}

/* Menus déroulants de la top bar (aide, notifications, compte) */
.menu-flottant {
  position: absolute; top: 48px; right: 0;
  min-width: 280px;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-menu);
  overflow: hidden;
  z-index: 120;
}
.menu-flottant .entete {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bord);
  font-weight: 600; color: var(--encre);
  display: flex; align-items: center; justify-content: space-between;
}
.menu-flottant .entete button {
  border: 0; background: transparent; color: var(--bleu); font-size: 12px; padding: 0;
}
.menu-flottant .onglets { display: flex; border-bottom: 1px solid var(--bord); }
.menu-flottant .onglets button {
  flex: 1; padding: 9px 0; border: 0; background: transparent;
  color: var(--gris); font-size: 13px; border-bottom: 2px solid transparent;
}
.menu-flottant .onglets button.actif { color: var(--bleu); border-bottom-color: var(--bleu); font-weight: 500; }
.menu-flottant .article {
  display: flex; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--bord-clair);
}
.menu-flottant .article:last-child { border-bottom: 0; }
.menu-flottant .article.non-lu { background: var(--bleu-pale); }
.menu-flottant .article .titre { font-size: 13px; color: var(--encre); font-weight: 500; }
.menu-flottant .article .detail { font-size: 12px; color: var(--gris); }
.menu-flottant .article .quand { font-size: 11px; color: var(--gris-clair); margin-top: 2px; }
.menu-flottant .lien {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 10px 14px;
  border: 0; background: transparent; text-align: left;
  font-size: 13px; color: var(--texte);
}
.menu-flottant .lien:hover { background: var(--bord-clair); }
.menu-flottant .pied {
  padding: 9px 14px;
  border-top: 1px solid var(--bord);
  font-size: 11.5px; color: var(--gris-clair);
  background: #fbfcfe;
}
.menu-position { position: relative; }

/* ================================================================= CONTENU */
.page { padding: 26px 30px 60px; }
.page-large   { max-width: 1600px; margin: 0 auto; }  /* datagrids */
.page-etroite { max-width: 1280px; margin: 0 auto; }  /* formulaires */

.fil-ariane { font-size: 12.5px; color: var(--gris-clair); margin-bottom: 6px; }
.fil-ariane button {
  border: 0; background: transparent; padding: 0;
  color: var(--gris); font-size: 12.5px;
}
.fil-ariane button:hover { color: var(--bleu); text-decoration: underline; }
.fil-ariane .sep { margin: 0 7px; }

.page-entete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 22px;
}
.page-entete h1 { margin: 0; font-size: 25px; font-weight: 700; color: var(--encre); letter-spacing: -.01em; }
.page-entete .sous-titre { margin-top: 4px; font-size: 13.5px; color: var(--gris); }
.page-entete .actions { display: flex; gap: 10px; flex: none; }

/* ------------------------------------------------------------------ Boutons */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border-radius: var(--rayon-petit);
  border: 1px solid transparent;
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
}
.btn:disabled { opacity: 1; cursor: not-allowed; }

.btn-bleu   { background: var(--bleu); color: var(--blanc); }
.btn-bleu:hover:not(:disabled) { background: var(--bleu-fonce); }
.btn-bleu:disabled { background: var(--bord); color: var(--gris-clair); }

.btn-vert   { background: var(--vert); color: var(--blanc); }
.btn-vert:hover:not(:disabled) { background: var(--vert-fonce); }

.btn-rouge  { background: var(--rouge); color: var(--blanc); }
.btn-rouge:hover:not(:disabled) { background: var(--rouge-fonce); }
.btn-rouge:disabled { background: var(--rouge-clair); color: var(--blanc); }

.btn-blanc  { background: var(--blanc); color: var(--texte); border-color: var(--bord); }
.btn-blanc:hover { background: var(--bord-clair); }

.btn-rouge-bord { background: var(--blanc); color: var(--rouge); border-color: var(--rouge-clair); }
.btn-rouge-bord:hover { background: var(--rouge-pale); }

.btn-icone {
  width: 30px; height: 30px; padding: 0;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--gris);
}
.btn-icone:hover { background: var(--bord-clair); color: var(--texte); }
.btn-icone.inerte { color: var(--bord); cursor: not-allowed; }
.btn-icone.inerte:hover { background: transparent; color: var(--bord); }
.btn-icone.modifier { background: var(--vert-pale); color: var(--vert-fonce); }
.btn-icone.modifier:hover { background: #bbf7d0; }
.btn-icone.danger { background: var(--rouge-pale); color: var(--rouge); }
.btn-icone.danger:hover { background: #fecaca; }
.btn-icone.inerte.modifier, .btn-icone.inerte.danger {
  background: var(--bord-clair); color: var(--gris-clair);
}

/* ------------------------------------------------------------------- Cartes */
.carte {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
}
.carte + .carte { margin-top: 18px; }
.grille-kpi .carte + .carte,
.grille-bas .carte + .carte,
.grille-jauges .carte + .carte { margin-top: 0; }
.carte-corps { padding: 20px 22px; }

.bandeau-titre {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  color: var(--gris-clair); text-transform: uppercase;
  margin: 22px 0 10px;
}
.bandeau-titre:first-child { margin-top: 0; }

/* --------------------------------------------------------------- Filtres */
.filtres { margin-bottom: 18px; }
.filtres-ligne {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px;
}
.filtres-ligne + .filtres-ligne { border-top: 1px solid var(--bord); }
.filtres-libelle { font-size: 13px; color: var(--texte); min-width: 62px; font-weight: 500; }

.onglets-statut { display: flex; gap: 20px; }
.onglets-statut button {
  border: 0; background: transparent; padding: 2px 0 5px;
  font-size: 13.5px; color: var(--gris);
  border-bottom: 2px solid transparent;
}
.onglets-statut button.actif { color: var(--bleu); border-bottom-color: var(--bleu); font-weight: 500; }

.champ {
  height: 34px; padding: 0 10px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  color: var(--texte);
}
.champ:focus { outline: 2px solid var(--bleu-bord); outline-offset: -1px; border-color: var(--bleu); }
.champ::placeholder { color: var(--gris-clair); }
select.champ { padding-right: 26px; }
.champ-recherche { min-width: 260px; }

/* -------------------------------------------------------------- Datagrid */
.grille-boite { overflow-x: auto; }
table.grille { width: 100%; border-collapse: collapse; font-size: 13px; }

table.grille thead th {
  position: relative;
  padding: 11px 14px;
  background: var(--bord-clair);
  color: var(--texte);
  font-size: 12.5px; font-weight: 600;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--bord);
}
table.grille thead th + th { border-left: 1px solid var(--bord); }
table.grille thead th.centre { text-align: center; }
table.grille thead th .entonnoir { color: var(--gris-clair); margin-left: 6px; vertical-align: -2px; }

table.grille tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bord-clair);
  vertical-align: middle;
  color: var(--texte);
}
table.grille tbody tr:last-child td { border-bottom: 0; }
table.grille tbody tr:hover { background: #fafcff; }
table.grille td.centre { text-align: center; }
table.grille td.discret { color: var(--gris-clair); }
table.grille td.nowrap { white-space: nowrap; }
table.grille tr.supprimee { color: var(--gris-clair); }

.cellule-identite { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cellule-identite .nom { font-weight: 600; color: var(--encre); }
.cellule-identite .adresse { font-size: 12px; color: var(--gris); }

.avatar {
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blanc);
  font-size: 11.5px; font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
}
/* Conservé pour compatibilité : l'application affiche des pastilles rondes
   partout, y compris pour les partenaires, clients et domaines. */
.avatar-carre { border-radius: 50%; }

/* Badges de statut */
.badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.badge-vert   { background: var(--vert-pale);    color: var(--vert-texte); }
.badge-gris   { background: var(--bord-clair);   color: var(--gris); }
.badge-rouge  { background: var(--rouge-pale);   color: var(--rouge-texte); }
.badge-bleu   { background: var(--bleu-pale);    color: var(--bleu-fonce); }
.badge-jaune  { background: var(--jaune-pale);   color: var(--jaune-texte); }
.badge-violet { background: var(--violet-pale);  color: var(--violet); }
.badge-turquoise { background: var(--turquoise-pale); color: #0f766e; }
.badge-mauve  { background: #f3e8ff;         color: #7e22ce; }
.badge-ambre  { background: #fef3c7;         color: #b45309; }

.point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.point-vert { background: var(--vert); }
.point-rouge { background: var(--rouge); }
.point-gris { background: var(--gris-clair); }
.point-orange { background: var(--orange-vif); }

/* Jauge d'utilisation (colonne Utilisation, cartes du tableau de bord) */
.jauge {
  display: block;
  position: relative;
  width: 100%;
  height: 6px;
  min-width: 76px;
  border-radius: 999px;
  background: var(--bord);
  overflow: hidden;
  flex: 1 1 auto;
}
.jauge > span { display: block; height: 100%; border-radius: 999px; background: var(--vert); }
.jauge.attention > span { background: var(--orange-vif); }
.jauge.critique  > span { background: var(--rouge); }
.jauge.neutre    > span { background: var(--gris-clair); }

.cellule-jauge { display: flex; align-items: center; gap: 10px; }
.cellule-jauge .valeur {
  flex: none;
  font-size: 12.5px; color: var(--bleu);
  white-space: nowrap;
}
.cellule-jauge .valeur.sobre { color: var(--texte); }

/* Compteurs cliquables des colonnes Alias / Délégation */
.compteur-action { display: inline-flex; align-items: center; gap: 6px; }
.pastille-compteur {
  min-width: 26px; height: 24px; padding: 0 7px;
  border-radius: 7px;
  display: inline-grid; place-items: center;
  background: var(--bord-clair);
  color: var(--gris);
  font-size: 12px; font-weight: 600;
}
.pastille-compteur.remplie      { background: var(--turquoise-pale); color: #0f766e; }
.pastille-compteur.remplie-alias { background: #ffedd5; color: #c2410c; }
.bouton-alias, .bouton-delegation {
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 7px;
}
.bouton-alias      { background: #ffedd5; color: #c2410c; }
.bouton-alias:hover      { background: #fed7aa; }
.bouton-delegation { background: var(--turquoise-pale); color: #0d9488; }
.bouton-delegation:hover { background: #99f6e4; }

/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 22px;
  padding: 12px 18px;
  border-top: 1px solid var(--bord);
  font-size: 12.5px; color: var(--gris);
}
.pagination .taille { display: flex; align-items: center; gap: 8px; }
.pagination select { height: 28px; }
.pagination .fleches { display: flex; gap: 3px; }
.pagination .fleches button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--gris);
}
.pagination .fleches button:hover:not(:disabled) { background: var(--bord-clair); color: var(--texte); }
.pagination .fleches button:disabled { color: var(--bord); cursor: default; }

.grille-vide { padding: 44px 20px; text-align: center; color: var(--gris-clair); }

/* ======================================================== TABLEAU DE BORD */
.grille-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grille-kpi.deux { grid-template-columns: repeat(2, 1fr); }

.grille-kpi { align-items: stretch; }
.carte-kpi {
  display: flex; flex-direction: column;
  padding: 18px 20px 16px;
  min-width: 0;
}
.carte-kpi .jauge { margin-top: auto; }
.carte-kpi .haut { display: flex; align-items: flex-start; justify-content: space-between; }
.carte-kpi .libelle {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--gris); text-transform: uppercase;
}
.carte-kpi .valeur { font-size: 33px; font-weight: 700; color: var(--encre); line-height: 1.15; margin-top: 4px; }
.carte-kpi .valeur .sur { font-size: 16px; font-weight: 500; color: var(--gris-clair); }
.carte-kpi .jauge { margin: 14px 0 9px; height: 7px; }
.carte-kpi .legende { font-size: 12.5px; color: var(--gris); }
.pastille-icone {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
}

.legende-seuils {
  display: flex; align-items: center; gap: 20px;
  margin: 14px 2px 0;
  font-size: 12px; color: var(--gris);
}
.legende-seuils .bloc { display: flex; align-items: center; gap: 7px; }
.legende-seuils .trait { width: 18px; height: 5px; border-radius: 3px; }

/* Carte « Etat du serveur Zimbra » */
.entete-serveur { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.entete-serveur h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--encre); }
.entete-serveur .sous { font-size: 13px; color: var(--gris); margin-top: 2px; }

.grille-jauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bloc-jauge {
  padding: 13px 15px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
  background: #fbfcfe;
}
.bloc-jauge .titre {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  color: var(--gris); text-transform: uppercase;
  margin-bottom: 9px;
}
.bloc-jauge .titre .pct { color: var(--vert); font-size: 13px; letter-spacing: 0; }
.bloc-jauge .valeur { font-size: 12.5px; color: var(--gris); margin-top: 8px; }

.grille-services { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; margin-top: 20px; }
.ligne-service {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13px;
}
.ligne-service:nth-child(odd) { background: #fafbfd; }
.ligne-service .etat { font-size: 12.5px; color: var(--vert); }
.ligne-service .etat.off { color: var(--gris-clair); }

.pied-serveur {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--bord);
  font-size: 12.5px; color: var(--gris);
}

/* ============================================================ FORMULAIRES */
.section-form {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  padding: 26px 0;
}
.section-form:first-child { padding-top: 4px; }
.section-form + .section-form { border-top: 1px solid var(--bord); }
.section-form .intitule { font-size: 14.5px; font-weight: 600; color: var(--encre); margin-bottom: 7px; }
.section-form .explication { font-size: 13px; color: var(--gris); line-height: 1.6; }

.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.groupe-champ { margin-bottom: 16px; }
.groupe-champ:last-child { margin-bottom: 0; }
.groupe-champ > label {
  display: block;
  font-size: 13px; font-weight: 500; color: var(--texte);
  margin-bottom: 6px;
}
.groupe-champ .champ { width: 100%; height: 38px; }
.groupe-champ textarea.champ { height: auto; min-height: 78px; padding: 9px 10px; resize: vertical; }
.aide { font-size: 12px; color: var(--orange); margin-top: 4px; line-height: 1.45; }
.aide-neutre { color: var(--gris); }
.apercu { font-size: 14px; font-weight: 600; color: var(--bleu); margin-top: 8px; }

/* Cartes à cocher (type de boîte, type de ressource, choix du rôle) */
.cartes-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.carte-choix {
  display: block; width: 100%; text-align: left;
  padding: 15px 17px;
  border: 1.5px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--blanc);
}
.carte-choix:hover { border-color: var(--bleu-bord); }
.carte-choix.selectionnee { border-color: var(--bleu); background: var(--bleu-pale); }
.carte-choix .titre { font-size: 14px; font-weight: 600; color: var(--encre); margin: 9px 0 4px; }
.carte-choix .desc  { font-size: 12.5px; color: var(--gris); line-height: 1.5; }
.carte-choix.pleine { grid-column: 1 / -1; }

/* Interrupteur */
.interrupteur-ligne {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--rayon-petit);
  background: #f6f8fb;
}
.interrupteur {
  position: relative;
  width: 38px; height: 21px; flex: none;
  border: 0; border-radius: 999px;
  background: var(--gris-clair);
  transition: background .15s;
}
.interrupteur::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--blanc);
  transition: transform .15s;
}
.interrupteur.actif { background: var(--bleu); }
.interrupteur.actif::after { transform: translateX(17px); }
.interrupteur-ligne .titre { font-size: 13.5px; font-weight: 500; color: var(--encre); }
.interrupteur-ligne .desc  { font-size: 12.5px; color: var(--gris); }

.pied-formulaire {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px; margin-top: 4px;
  border-top: 1px solid var(--bord);
}
.pied-formulaire .gauche { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--texte); }
.pied-formulaire .droite { display: flex; gap: 10px; }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--bleu); }

/* ================================================================ MODALES */
.voile {
  position: fixed; inset: 0;
  z-index: 400;
  background: rgba(15, 23, 42, .45);
  display: grid; place-items: center;
  padding: 24px;
}
.modale {
  width: 100%; max-width: 520px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--blanc);
  border-radius: 14px;
  box-shadow: var(--ombre-modale);
  overflow: hidden;
}
.modale-large { max-width: 660px; }
.modale-entete { padding: 20px 22px 14px; position: relative; }
.modale-entete h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--encre); }
.modale-entete .contexte { font-size: 12.5px; color: var(--gris); margin-top: 5px; }
.modale-entete .contexte b { color: var(--texte); font-weight: 500; }
.modale-fermer {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent; color: var(--gris);
}
.modale-fermer:hover { background: var(--bord-clair); }
.modale-corps { padding: 4px 22px 20px; overflow-y: auto; }
.modale-pied {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--bord);
  background: #fbfcfe;
}
.modale-titre-champ {
  font-size: 12.5px; color: var(--orange);
  margin: 4px 0 6px;
}

/* Lignes « membre / alias / délégation actuels » */
.ligne-jeton {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px;
  border: 1px solid #cbd5e1;
  border-radius: var(--rayon-petit);
  background: #fbfcfe;
  margin-bottom: 9px;
  font-size: 13px;
}
.ligne-jeton .adresse { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ligne-ajout {
  display: flex; align-items: stretch;
  border: 1px solid #cbd5e1;
  border-radius: var(--rayon-petit);
  overflow: hidden;
  background: var(--blanc);
}
.ligne-ajout .champ {
  flex: 1; min-width: 0;
  height: 38px;
  border: 0; border-radius: 0;
}
.ligne-ajout .champ:focus { outline: 0; }
.ligne-ajout .suffixe-domaine { display: flex; align-items: center; }
.bouton-plus {
  width: 52px; flex: none;
  display: grid; place-items: center;
  border: 0; border-left: 1px solid #cbd5e1;
  background: #fbfcfe; color: var(--vert);
}
.bouton-plus:hover { background: var(--vert-pale); }
.suffixe-domaine {
  font-size: 13px; color: var(--gris);
  padding: 0 4px;
  white-space: nowrap;
}

.avertissement {
  display: flex; gap: 9px;
  padding: 9px 13px;
  border: 0;
  border-left: 3px solid var(--orange-vif);
  border-radius: 6px;
  background: var(--jaune-pale);
  color: var(--jaune-texte);
  font-size: 12.5px; line-height: 1.5;
  margin-top: 14px;
}

/* ================================================== PAGES SYSTÈME / CONSOLE */
.console {
  background: #0f172a;
  color: #cbd5e1;
  border-radius: var(--rayon-petit);
  padding: 16px 18px;
  font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 460px;
  overflow-y: auto;
}
.console .cle  { color: #7dd3fc; }
.console .ok   { color: #4ade80; }
.console .attn { color: #fbbf24; }
.console .err  { color: #f87171; }

.barre-console { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.barre-console .champ { height: 38px; }
.barre-console .grandir { flex: 1; }

.pied-console {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
  font-size: 12.5px; color: var(--gris-clair);
}

.bloc-analyse {
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
  background: #fbfcfe;
  padding: 18px 20px;
  font-size: 13.5px;
  line-height: 1.65;
}
.bloc-analyse h4 { margin: 0 0 8px; font-size: 14px; color: var(--encre); }
.bloc-analyse ul { margin: 8px 0 14px; padding-left: 20px; }
.bloc-analyse li { margin-bottom: 5px; }
.note-cadre { font-size: 12.5px; color: var(--gris); margin-top: 12px; }

/* ================================================================== TOASTS */
.zone-toasts {
  position: fixed; right: 22px; bottom: 22px;
  z-index: 500;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 380px;
}
.toast {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px;
  border-radius: var(--rayon);
  background: var(--blanc);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-menu);
  animation: toast-entree .18s ease-out;
}
.toast .texte { font-size: 13px; color: var(--texte); }
.toast .texte strong { display: block; color: var(--encre); font-weight: 600; margin-bottom: 2px; }
.toast.succes .icone { color: var(--vert); }
.toast.erreur .icone { color: var(--rouge); }
.toast.info   .icone { color: var(--bleu); }
@keyframes toast-entree {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================ ÉCRAN DE LOGIN */
.page-login {
  min-height: 100vh;
  padding: 40px 20px 20px;
  display: grid; place-items: center;
  background:
    radial-gradient(900px 500px at 15% -10%, #dbeafe 0%, transparent 60%),
    radial-gradient(700px 500px at 100% 0%, #ede9fe 0%, transparent 55%),
    var(--fond);
}
.carte-login {
  width: 100%; max-width: 940px;
  display: grid; grid-template-columns: 1.05fr .95fr;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .10);
  overflow: hidden;
}
.login-gauche { padding: 40px 40px 36px; }
.login-gauche .marque { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }
.login-gauche .marque .nom { font-size: 18px; font-weight: 700; color: var(--encre); }
.login-gauche h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; color: var(--encre); }
.login-gauche .accroche { font-size: 14px; color: var(--gris); margin-bottom: 26px; line-height: 1.6; }

.comptes-demo { display: flex; flex-direction: column; gap: 11px; }
.compte-demo {
  display: flex; align-items: center; gap: 13px;
  width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--blanc);
  text-align: left;
}
.compte-demo:hover { border-color: var(--bleu); background: var(--bleu-pale); }
.compte-demo .nom { font-size: 14px; font-weight: 600; color: var(--encre); }
.compte-demo .desc { font-size: 12.5px; color: var(--gris); margin-top: 1px; }
.compte-demo .fleche { margin-left: auto; color: var(--gris-clair); }
.compte-demo:hover .fleche { color: var(--bleu); }

.login-droite {
  padding: 40px 36px;
  background: linear-gradient(160deg, #0f172a, #1e3a8a);
  color: #cbd5e1;
}
.login-droite h2 { margin: 0 0 16px; font-size: 17px; font-weight: 600; color: var(--blanc); }
.login-droite ul { margin: 0; padding: 0; list-style: none; }
.login-droite li { display: flex; gap: 11px; margin-bottom: 15px; font-size: 13.5px; line-height: 1.55; }
.login-droite li b { color: var(--blanc); font-weight: 600; }
.login-droite .coche { color: #4ade80; flex: none; margin-top: 2px; }
.login-droite .note {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: 12.5px; color: #94a3b8; line-height: 1.6;
}

/* ------------------------------------------------- Lecture seule (*_user) */
.lecture-seule-info {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  margin-bottom: 18px;
  border: 1px solid var(--jaune-bord);
  border-radius: var(--rayon-petit);
  background: var(--jaune-pale);
  color: var(--jaune-texte);
  font-size: 13px;
}

/* ---------------------------------------------------------------- Écrans étroits
   La démo est pensée pour un écran large, comme l'application. En dessous,
   on évite au moins que la mise en page casse.                               */
@media (max-width: 1100px) {
  .grille-kpi, .grille-kpi.deux, .grille-jauges, .grille-services,
  .cartes-choix, .paire { grid-template-columns: 1fr; }
  .section-form { grid-template-columns: 1fr; gap: 16px; }
  .carte-login { grid-template-columns: 1fr; }
  .login-droite { display: none; }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.ouverte { transform: none; box-shadow: var(--ombre-modale); }
  .zone { margin-left: 0; }
  .page { padding: 18px 14px 50px; }
}

/* ==========================================================================
   Compléments (revue du 2026-09-02)
   ========================================================================== */

/* ------------------------------------------- Espacements dans les modales
   L'aide orange appartient au champ qui la précède : elle doit s'en tenir
   proche et laisser de l'air avant le libellé suivant.                     */
.modale-corps .groupe-champ { margin-bottom: 20px; }
.modale-corps .aide { margin-top: 5px; margin-bottom: 0; }
.modale-corps .groupe-champ > label { margin-bottom: 7px; }

/* Le libellé « Action à effectuer » reste sobre : l'orange est réservé aux
   explications sous les champs. */
.modale-titre-champ {
  font-size: 13px;
  font-weight: 500;
  color: var(--texte);
  margin: 2px 0 7px;
}

/* Intertitre de section dans une modale : gris, suivi d'un filet.
   Utilisé par « Alias actuels », « Liste des membres actuels »…            */
.section-modale {
  font-size: 13px; color: var(--gris);
  padding-bottom: 9px;
  margin: 22px 0 14px;
  border-bottom: 1px solid var(--bord);
}
.section-modale:first-child { margin-top: 2px; }

/* ------------------------------------------------------- Encart bleu d'info
   Contrepoint calme de l'avertissement jaune : sert aux explications
   (« un nouveau mot de passe sera envoyé… »), pas aux mises en garde.      */
.info-bleue {
  display: flex; gap: 9px;
  padding: 8px 12px;
  border-left: 3px solid var(--bleu);
  border-radius: 6px;
  background: var(--bleu-pale);
  color: #1e40af;
  font-size: 12.5px; line-height: 1.5;
  margin-top: 16px;
}

/* L'avertissement jaune suit immédiatement le champ qu'il commente. */
.avertissement { margin-top: 10px; align-items: center; }

/* ------------------------------------------------------- Statut en boutons
   Deux (ou trois) choix côte à côte, plus lisibles qu'une liste déroulante
   quand il n'y a que « Actif / Inactif ».                                  */
.choix-statut {
  display: inline-flex;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  overflow: hidden;
}
.choix-radio {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px;
  border: 0;
  background: transparent;
  font-size: 13.5px; color: var(--texte);
}
.choix-radio + .choix-radio { border-left: 1px solid var(--bord); }
.choix-radio:hover { background: var(--bord-clair); }
.choix-radio.actif { color: var(--encre); font-weight: 500; }
.choix-radio .rond {
  width: 15px; height: 15px; flex: none;
  border: 1.5px solid var(--gris-clair);
  border-radius: 50%;
  position: relative;
}
.choix-radio.actif .rond { border-color: var(--bleu); }
.choix-radio.actif .rond::after {
  content: ""; position: absolute; inset: 2.5px;
  border-radius: 50%; background: var(--bleu);
}

/* Case à cocher alignée sur son libellé (modale mot de passe). */
.ligne-case {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--texte);
  margin-bottom: 18px;
}

/* ---------------------------------------------- Filtre par colonne (entonnoir)
   Un clic sur l'entonnoir ouvre un petit champ de saisie qui ne filtre que
   cette colonne — comme le datagrid de l'application.                      */
th .bouton-entonnoir {
  width: 22px; height: 22px; padding: 0;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 5px;
  background: transparent; color: var(--gris-clair);
  vertical-align: -5px; margin-left: 5px;
}
th .bouton-entonnoir:hover { background: var(--bord); color: var(--texte); }
th .bouton-entonnoir.actif { background: var(--bleu-pale); color: var(--bleu); }

.filtre-colonne {
  position: absolute; top: 38px; left: 10px;
  z-index: 60;
  width: 230px;
  padding: 10px;
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
  box-shadow: var(--ombre-menu);
}
.filtre-colonne input { width: 100%; height: 32px; }
.filtre-colonne .pied {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
}
.filtre-colonne .pied button {
  border: 0; background: transparent; padding: 0;
  font-size: 12px; color: var(--bleu); font-weight: 500;
}
.filtre-colonne .pied .compte { font-size: 11.5px; color: var(--gris-clair); font-weight: 400; }

/* Une colonne filtrée reste signalée même le menu fermé. */
th.colonne-filtree { background: var(--bleu-pale); }

/* Le conteneur du tableau doit laisser sortir le menu de filtre. */
.grille-boite { overflow-x: auto; overflow-y: visible; }
table.grille thead th { position: relative; }

/* Rappel des filtres de colonne actifs, au-dessus du tableau. */
.filtres-actifs {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 18px;
  border-bottom: 1px solid var(--bord);
  font-size: 12.5px; color: var(--gris);
}
.jeton-filtre {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 6px 3px 11px;
  border-radius: 999px;
  background: var(--bleu-pale);
  color: var(--bleu-fonce);
  font-size: 12px;
}
.jeton-filtre button {
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(37, 99, 235, .14); color: var(--bleu-fonce);
}
.jeton-filtre button:hover { background: rgba(37, 99, 235, .28); }

/* ==========================================================================
   Bas du tableau de bord : palmarès et activité récente
   ========================================================================== */
.grille-bas {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
  margin-top: 22px;
  align-items: start;
}

/* « Voir tout ↗ » : un lien, pas un bouton — il ne doit pas concurrencer
   les actions principales de la page. */
.lien-voir-tout {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; padding: 0;
  color: var(--bleu); font-size: 13px; font-weight: 500;
}
.lien-voir-tout:hover { text-decoration: underline; }

/* Le palmarès réutilise le datagrid, avec les chiffres alignés à droite. */
.grille-bas table.grille th.a-droite,
.grille-bas table.grille td.a-droite { text-align: right; }
.grille-bas table.grille td.accent { color: var(--bleu); font-weight: 500; }
.grille-bas table.grille thead th { background: var(--bord-clair); }
.grille-bas .pagination { justify-content: flex-end; padding-right: 22px; }

/* Activité récente : une carte par action. */
.liste-activite { display: flex; flex-direction: column; gap: 9px; }
.ligne-activite {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
}
.ligne-activite:hover { background: #fafcff; }
.marque-activite {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
}
.ligne-activite .phrase { font-size: 13.5px; color: var(--texte); }
.ligne-activite .phrase b { color: var(--encre); font-weight: 600; }
.ligne-activite .detail {
  font-size: 12.5px; color: var(--gris);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ligne-activite .quand { font-size: 12px; color: var(--gris-clair); margin-top: 2px; }

@media (max-width: 1250px) {
  .grille-bas { grid-template-columns: 1fr; }
}

/* Filets de structure dans les modales : sous l'en-tête et sous le bloc
   « Action à effectuer », comme dans l'application. */
.modale-entete { border-bottom: 1px solid var(--bord); padding-bottom: 16px; }
.modale-corps { padding-top: 18px; }
.bloc-action-modale {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--bord);
}
.bloc-action-modale .groupe-champ { margin-bottom: 0; }

/* --------------------------------------------------------- Tri des colonnes
   L'en-tête devient un bouton ; la flèche indique le sens en cours. */
th .bouton-tri {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; padding: 0;
  font: inherit; color: inherit;
}
th .bouton-tri:hover { color: var(--bleu); }
th .bouton-tri.actif { color: var(--bleu); }
th .fleche-tri { color: var(--gris-clair); display: inline-flex; }
th .bouton-tri.actif .fleche-tri { color: var(--bleu); }
th.colonne-triee { background: var(--bleu-pale); }

/* Champ refusé par le contrôle de saisie : le message dit quoi corriger,
   la bordure dit où. */
.champ.erreur {
  border-color: var(--rouge);
  background: #fffafa;
}
.champ.erreur:focus {
  outline: 2px solid var(--rouge-clair);
  outline-offset: -1px;
}

/* ==========================================================================
   Formulaire de domaine et création de boîte (revue du 2026-09-03)
   ========================================================================== */

/* « Rattaché à » : trois choix compacts, sur une seule ligne. */
.cartes-rattachement { display: flex; gap: 12px; flex-wrap: wrap; }
.carte-rattachement {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  font-size: 13.5px; color: var(--texte);
}
.carte-rattachement:hover { border-color: var(--bleu-bord); }
.carte-rattachement.selectionnee {
  border-color: var(--bleu);
  background: var(--bleu-pale);
  color: var(--bleu);
}
.carte-rattachement svg { color: currentColor; }

/* Les trois formules d'abonnement. */
.cartes-formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1100px) { .cartes-formules { grid-template-columns: 1fr; } }

/* Consommation du domaine sélectionné, sous le select. */
.conso-domaine { margin-top: 14px; }
.conso-domaine .ligne { margin-bottom: 12px; max-width: 420px; }
.conso-domaine .ligne span {
  display: block;
  font-size: 12.5px; color: var(--gris);
  margin-bottom: 5px;
}

/* Récapitulatif du formulaire de domaine. */
.recapitulatif { font-size: 13.5px; color: var(--texte); line-height: 2; }
.recapitulatif b { color: var(--encre); font-weight: 600; }

/* Membres initiaux d'une liste de diffusion : une case par boîte du domaine. */
.liste-membres {
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
}
.ligne-membre {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.ligne-membre + .ligne-membre { border-top: 1px solid var(--bord-clair); }
.ligne-membre:hover { background: var(--bord-clair); }
.ligne-membre .nom { color: var(--encre); font-weight: 500; }
.ligne-membre .adresse { color: var(--gris); font-size: 12.5px; margin-left: auto; }

/* ==========================================================================
   Pages du menu Aide : documentation, nouveautés, textes légaux
   ========================================================================== */
.documentation { font-size: 13.5px; line-height: 1.65; color: var(--texte); }
.documentation h2 {
  font-size: 16px; font-weight: 600; color: var(--encre);
  margin: 30px 0 10px;
}
.documentation h2:first-child { margin-top: 0; }
.documentation h3 {
  font-size: 14.5px; font-weight: 600; color: var(--encre);
  margin: 24px 0 8px;
}
.documentation h3:first-child { margin-top: 0; }
.documentation h3.version { font-size: 17px; margin-top: 30px; }
.documentation h3.version:first-of-type { margin-top: 4px; }
.documentation .date-version { color: var(--gris); margin: 0 0 10px; }
.documentation p { margin: 0 0 11px; }
.documentation ul { margin: 0 0 14px; padding-left: 22px; }
.documentation li { margin-bottom: 5px; }
.documentation b { color: var(--encre); font-weight: 600; }
.documentation .note { color: var(--gris); }
.documentation .maj { color: var(--gris-clair); font-size: 12.5px; margin-top: 26px; }

/* Renvoi d'une page légale vers une autre. */
.lien-doc {
  border: 0; background: transparent; padding: 0;
  font: inherit; color: var(--bleu); font-weight: 600;
  text-decoration: underline;
}

/* ------------------------------------------------------------- Mon profil */
.bloc-mdp {
  padding: 20px 22px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: #fbfcfe;
}
.champ-avec-oeil { position: relative; }
.champ-avec-oeil .champ { padding-right: 40px; }
.bouton-oeil {
  position: absolute; top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--gris);
}
.bouton-oeil:hover { background: var(--bord-clair); color: var(--texte); }

.tableau-rattachement { font-size: 13.5px; }
.tableau-rattachement > div {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 9px;
}
.tableau-rattachement span {
  min-width: 120px;
  color: var(--gris);
}
.tableau-rattachement span::after { content: " :"; }
.tableau-rattachement b { color: var(--encre); font-weight: 500; }

/* Motif d'un échec, sous la cible dans le journal d'activité. */
.motif-echec {
  font-size: 12px;
  color: var(--rouge-texte);
  margin-top: 3px;
}

/* ==========================================================================
   Tableaux de bord partenaire et client (revue du 2026-09-04)
   ========================================================================== */

/* Une seule rangée de quatre indicateurs. */
.grille-kpi.quatre { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1400px) { .grille-kpi.quatre { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1100px) { .grille-kpi.quatre { grid-template-columns: 1fr; } }

/* Valeur sans plafond : « ∞ illimité » plutôt qu'un ratio qui n'existe pas. */
.badge-illimite {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--bord-clair);
  color: var(--gris);
  font-size: 12px; font-weight: 500;
  vertical-align: 6px;
}

/* Barre d'une valeur illimitée : elle s'estompe au lieu de buter sur une fin. */
.jauge.illimitee > span {
  background: linear-gradient(90deg, #c2410c 0%, #ea580c 35%, #fdba74 75%, #fed7aa 100%);
}
/* Le repère de légende reprend exactement le dégradé des barres illimitées :
   une légende qui ne ressemble pas à ce qu'elle décrit ne sert à rien. */
.legende-seuils .trait-illimite {
  background: linear-gradient(90deg, #c2410c 0%, #ea580c 35%, #fdba74 75%, #fed7aa 100%);
}