:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #22263a;
  --border: #2e3250;
  --accent: #4f6ef7;
  --accent-hover: #3d5ae8;
  --text: #e8eaf6;
  --text-muted: #7b82aa;
  --green: #22c55e;
  --yellow: #f59e0b;
  --red: #ef4444;
  --blue: #3b82f6;
  --orange: #f97316;
  /* Alias sémantiques (utilisés en inline depuis le JS). Pointent sur les
     couleurs de statut, communes aux deux thèmes. */
  --success: var(--green);
  --warning: var(--yellow);
  --danger: var(--red);

  /* Champs de saisie — jeu de couleurs propre aux contrôles de formulaire, pour que
     tous (input, select, textarea) aient le même rendu où qu'ils soient posés : sur
     le fond de page, dans une carte ou dans une modale. */
  --field-bg: #1c1f2c;
  --field-bg-hover: #232739;
  --field-border: #343a5c;
  --ring: color-mix(in srgb, var(--accent) 22%, transparent);
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b82aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --shadow-modal: 0 24px 60px -12px rgba(0, 0, 0, .6), 0 8px 20px -8px rgba(0, 0, 0, .4);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg: #f0f2f8;
  --surface: #ffffff;
  --surface2: #e4e7f2;
  --border: #c8ccdf;
  --text: #1a1d2e;
  --text-muted: #5a6080;

  --field-bg: #f7f8fc;
  --field-bg-hover: #ffffff;
  --field-border: #ccd1e3;
  --ring: color-mix(in srgb, var(--accent) 16%, transparent);
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --shadow-modal: 0 24px 60px -12px rgba(26, 29, 46, .22), 0 8px 20px -8px rgba(26, 29, 46, .12);
}
[data-theme="light"] .badge-green  { background: #dcfce7; color: #15803d; }
[data-theme="light"] .badge-red    { background: #fee2e2; color: #b91c1c; }
[data-theme="light"] .badge-yellow { background: #fef3c7; color: #b45309; }
[data-theme="light"] .badge-grey   { background: #f1f5f9; color: #475569; }
[data-theme="light"] .badge-blue   { background: #dbeafe; color: #1d4ed8; }
[data-theme="light"] .badge-orange { background: #ffedd5; color: #c2410c; }
[data-theme="light"] .dot-grey     { background: #9ca3af; }
[data-theme="light"] tbody tr.cdr-flagged { background: color-mix(in srgb, var(--yellow) 12%, transparent); }
[data-theme="light"] tbody tr.cdr-flagged:hover { background: color-mix(in srgb, var(--yellow) 20%, var(--surface2)); }
[data-theme="light"] tbody tr.cdr-emergency { background: color-mix(in srgb, var(--red) 13%, transparent); }
[data-theme="light"] tbody tr.cdr-emergency:hover { background: color-mix(in srgb, var(--red) 20%, var(--surface2)); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.lucide { display: inline-block; vertical-align: middle; flex-shrink: 0; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

/* ── CONTRÔLES DE FORMULAIRE ──────────────────────────────────────────────────
   Style unique pour TOUS les champs du site (page, cartes, modales, vue mobile).
   Les règles spécifiques plus bas (.form-group, .filters, .plan-field…) ne portent
   plus que sur la géométrie (largeur, taille de police) : la peau vient d'ici. */
.field,
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="url"],
input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea {
  font: inherit;
  font-size: .9rem;
  color: var(--text);
  /* background-color (et non le raccourci background) : le caret des <select> est une
     background-image, qu'un raccourci effacerait au survol/focus. */
  background-color: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 9px;
  padding: .55rem .75rem;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  /* Accorde les widgets natifs (calendrier, heure, mot de passe) au thème courant. */
  color-scheme: dark;
}
[data-theme="light"] .field,
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
  color-scheme: light;
}

.field:hover:not(:disabled):not(:focus),
input:hover:not(:disabled):not(:focus):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--field-border));
  background-color: var(--field-bg-hover);
}

.field:focus,
input:focus:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--field-bg-hover);
  box-shadow: 0 0 0 3px var(--ring);
}
/* Cases à cocher : anneau de focus seul, le rendu natif (accent-color) est conservé. */
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--ring);
}

.field:disabled,
input:disabled, select:disabled, textarea:disabled {
  opacity: .5;
  cursor: not-allowed;
}

::placeholder { color: var(--text-muted); opacity: .7; }

textarea { resize: vertical; line-height: 1.5; }

/* <select> : flèche native remplacée par un chevron accordé au thème. */
select {
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.1rem;
  background-image: var(--caret);
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1rem;
}
/* Les options déroulantes gardent sinon le fond blanc du système sous Windows/Linux. */
select option { background: var(--surface); color: var(--text); }

/* Icône du sélecteur de date : discrète, révélée au survol. */
input::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
input:hover::-webkit-calendar-picker-indicator { opacity: 1; }

input[type="checkbox"], input[type="radio"] {
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Sélecteur de fichier : le bouton natif est illisible en thème sombre. */
input[type="file"] {
  font-size: .85rem; color: var(--text-muted);
  padding: .4rem .5rem;
}
input[type="file"]::file-selector-button {
  font: inherit; font-size: .85rem;
  margin-right: .7rem; padding: .35rem .8rem;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }

/* ── LOGIN ── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  width: min(360px, 100%);
}
.login-box h1 { font-size: 1.4rem; margin-bottom: .25rem; }
.login-box p { color: var(--text-muted); margin-bottom: 1.5rem; font-size: .85rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: .4rem; font-size: .78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
/* La peau des champs vient de la section « CONTRÔLES DE FORMULAIRE » : ici, la géométrie. */
.form-group input, .form-group select, .form-group textarea { width: 100%; }
.form-group input[type="checkbox"], .form-group input[type="radio"] { width: 1.05rem; }
/* Indication sous un champ (« Vide pour délier. », format attendu…) */
.form-hint { display: block; margin-top: .35rem; color: var(--text-muted); font-size: .75rem; line-height: 1.4; }

/* Bouton secondaire par défaut : bordé et posé sur --surface2. Sans ça, un <button class="btn">
   nu est un simple texte flottant, invisible à côté du bouton primaire d'une modale. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .6rem 1.2rem; border-radius: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  font-size: .9rem; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  color: var(--text);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; width: 100%; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
/* Action destructrice (suppression, exclusion…) dans les modales de confirmation */
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 82%, #000); border-color: color-mix(in srgb, var(--red) 82%, #000); color: #fff; }
/* Connexion Google : fond blanc et texte sombre imposés par la charte Google, dans les
   deux thèmes (le bouton doit rester identifiable). */
.btn-google {
  width: 100%; gap: .6rem;
  background: #fff; color: #1f1f1f; font-weight: 500;
  border: 1px solid #dadce0;
}
/* La couleur au survol est réaffirmée : le survol générique de .btn passerait le
   libellé en bleu accent, hors charte Google. */
.btn-google:hover { background: #f5f6f8; color: #1f1f1f; border-color: #dadce0; }
/* Séparateur « ou » entre les deux moyens de connexion */
.login-sep {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.25rem 0; color: var(--text-muted); font-size: .8rem;
}
.login-sep::before, .login-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.error-msg { color: var(--red); font-size: .85rem; margin-top: .75rem; }
.login-status {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.login-status-item {
  display: flex;
  align-items: center;
  font-size: .75rem;
  color: var(--text-muted);
}

/* ── LAYOUT ── */
/* ── LAYOUT : sidebar de navigation + colonne principale ──────────────────────
   La nav à deux niveaux (dropdown de pôle + barre d'onglets défilante) est devenue
   une sidebar : les pôles sont des groupes repliables, générés par app.js depuis la
   config NAV. Le <header> ne garde que le fil d'Ariane et les actions du compte. */
.layout { display: flex; flex: 1; align-items: stretch; min-height: 100vh; }
.layout-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem; height: 52px; position: sticky; top: 0; z-index: 100;
}
.crumb { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .45rem;
  font-size: .8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
.crumb b { color: var(--text); font-size: .95rem; font-weight: 600; }
.crumb #crumb-pole:not(:empty)::after { content: " ·"; }
/* Bouton menu (ouverture de la sidebar) et voile : n'existent que sur écran étroit. */
#btn-sidebar { display: none; }
.sb-backdrop { display: none; }

.sidebar {
  width: 236px; flex: none;
  background: var(--surface); border-right: 1px solid var(--border);
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; z-index: 150;
}
.sb-logo {
  height: 52px; flex: none; display: flex; align-items: center;
  padding: 0 1rem; border-bottom: 1px solid var(--border);
}
.sb-logo .logo { font-weight: 700; font-size: 1.05rem; color: var(--accent); letter-spacing: .02em; display: flex; align-items: center; gap: .35rem; }
.logo-stack { display: flex; flex-direction: column; line-height: 1.15; }
.logo-subtitle { font-size: .65rem; font-weight: 500; color: var(--text-muted); letter-spacing: .03em; }

nav { display: flex; gap: .25rem; }
nav button {
  background: none; border: none; color: var(--text-muted);
  padding: .4rem .9rem; border-radius: 6px; cursor: pointer;
  font-size: .875rem; transition: all .15s;
}
nav button:hover { background: var(--surface2); color: var(--text); }
nav button.active { background: var(--surface2); color: var(--accent); font-weight: 600; }

.sb-nav { flex-direction: column; gap: 0; flex: 1; overflow-y: auto;
  padding: .3rem .55rem 1rem; scrollbar-width: thin; }
.sb-group + .sb-group { margin-top: .15rem; }
.sb-head {
  width: 100%; display: flex; align-items: center; gap: .5rem; text-align: left;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: .55rem .5rem .45rem;
}
.sb-head .lucide { margin-left: auto; transition: transform .15s; opacity: .7; }
.sb-group.open .sb-head .lucide { transform: rotate(180deg); }
.sb-items { display: none; flex-direction: column; gap: 2px; }
.sb-group.open .sb-items { display: flex; }
.sb-item {
  width: 100%; display: flex; align-items: center; gap: .6rem; text-align: left;
  padding: .42rem .6rem; font-size: .855rem;
}
.sb-item .lucide { flex: none; opacity: .85; }
.sb-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Les pastilles (compteur d'appels, point non-lu) se calent à droite de la ligne. */
.sb-item .nav-calls-badge, .sb-item .nav-unread-dot { margin-left: 0; }

/* Écran étroit : la sidebar sort de l'écran, le bouton menu du bandeau la ramène
   par-dessus le contenu (voile cliquable derrière). */
@media (max-width: 900px) {
  #btn-sidebar { display: inline-flex; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: auto; z-index: 300;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  body.sb-open .sidebar { transform: none; box-shadow: var(--shadow-modal); }
  .sb-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
    z-index: 250; display: none; }
  body.sb-open .sb-backdrop { display: block; }
}
@media (max-width: 1024px) {
  /* La pastille utilisateur se réduit à l'avatar : le fil d'Ariane est la fonction
     première du bandeau, le nom complet reste visible dans le menu déroulé. */
  .user-id { display: none; }
}

/* Pastille « non lu » sur un sous-onglet (historique des statuts) */
.nav-unread-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); margin-left: 6px; vertical-align: middle;
}

/* Répartition des appels pris par cadre (page Statistiques VIGIE) */
.vigie-stat-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.vigie-stat-name { flex: 0 0 160px; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vigie-stat-bar { flex: 1; height: 12px; background: var(--surface2); border-radius: 6px; overflow: hidden; }
.vigie-stat-fill { display: block; height: 100%; background: var(--accent); border-radius: 6px; min-width: 2px; }
.vigie-stat-count { flex: 0 0 2.5rem; text-align: right; font-weight: 600; font-size: .85rem; }
/* Délai moyen de décroché : la sonnerie du mobile avant réponse, pas l'annonce
   d'accueil — celle-ci est la même pour tout le monde et ne départage personne. */
.vigie-stat-ring {
  flex: 0 0 4.2rem; text-align: right; font-size: .8rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.vigie-stat-head {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
}
.vigie-stat-head .vigie-stat-count, .vigie-stat-head .vigie-stat-ring { font-weight: 600; }
.vigie-medal { margin-right: .3rem; }
/* Temps mesuré mais hors classement (trop peu d'appels) : visible, puisque c'est une
   mesure réelle, mais assez effacé pour qu'on ne le compare pas aux médaillés. */
.vigie-stat-ring-unranked { opacity: .55; }
.vigie-unranked-mark { margin-left: .1rem; }
.vigie-podium {
  margin-top: .9rem; font-size: .82rem; color: var(--text-muted);
  padding-top: .7rem; border-top: 1px solid var(--border);
}
.vigie-podium strong { color: var(--text); }
.vigie-podium-note { font-size: .74rem; }
.nav-calls-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; font-size: .65rem; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  margin-left: 6px; vertical-align: middle; line-height: 1;
}
/* ── Menu utilisateur (pastille + panneau déroulant, à droite du bandeau) ── */
.user-menu { position: relative; flex: none; }
.user-chip {
  display: flex; align-items: center; gap: .55rem;
  padding: .2rem .55rem .2rem .25rem;
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); cursor: pointer; font: inherit;
  transition: border-color .15s;
}
.user-chip:hover { border-color: var(--accent); }
.user-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--surface2); color: var(--accent);
  font-weight: 700; font-size: .72rem;
  display: flex; align-items: center; justify-content: center;
}
.user-id { display: flex; flex-direction: column; line-height: 1.2; text-align: left; min-width: 0; }
.user-name { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.user-sub { font-size: .68rem; color: var(--text-muted); white-space: nowrap; }
.user-caret { color: var(--text-muted); flex: none; }
.user-chip[aria-expanded="true"] .user-caret { transform: rotate(180deg); }

.user-pop {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 230px; padding: .35rem; z-index: 400;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-modal);
  display: flex; flex-direction: column; gap: 2px;
}
.user-pop[hidden] { display: none; }
.user-pop hr { border: none; border-top: 1px solid var(--border); margin: .25rem .2rem; }
.user-pop-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  background: none; border: none; color: var(--text); cursor: pointer; font: inherit;
  font-size: .85rem; padding: .5rem .6rem; border-radius: 7px;
  transition: background .15s;
}
.user-pop-item:hover { background: var(--surface2); }
.user-pop-item .lucide { flex: none; color: var(--text-muted); }
.user-pop-item.danger, .user-pop-item.danger .lucide { color: var(--red); }
.user-pop-item.danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; }
.dot-green { background: var(--green); }
.dot-yellow { background: var(--yellow); }
.dot-red { background: var(--red); }
.dot-grey { background: #555; }
.dot-blue { background: var(--blue); }

main { padding: 1.5rem; max-width: 1400px; margin: 0 auto; width: 100%; }
.section { display: none; }
.section.active { display: block; }

/* ── CARDS GRID ── */
.section-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: .9rem 1rem;
}
/* Poste lié au compte de l'opérateur connecté : mis en avant */
.card.card-mine {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.card-title { font-weight: 600; font-size: .9rem; }
.card-sub { font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }
.card-badge {
  display: inline-flex; align-items: center; margin-top: .5rem;
  font-size: .75rem; padding: .2rem .6rem; border-radius: 999px;
}
.badge-green { background: #16361e; color: var(--green); }
.badge-red { background: #3b1212; color: var(--red); }
.badge-yellow { background: #3b2c0a; color: var(--yellow); }
.badge-grey { background: #1e1e2e; color: #666; }
.badge-blue { background: #0f1f3b; color: var(--blue); }
.badge-orange { background: #3b1e0a; color: var(--orange); }

/* Onglet Utilisateurs vu par un cadre : la liste réduite du serveur n'a ni poste, ni
   mobiles, ni actions — les colonnes correspondantes (3, 4 et dernière) disparaissent. */
#tab-users.users-reduced th:nth-child(3), #tab-users.users-reduced td:nth-child(3),
#tab-users.users-reduced th:nth-child(4), #tab-users.users-reduced td:nth-child(4),
#tab-users.users-reduced th:nth-child(7), #tab-users.users-reduced td:nth-child(7) { display: none; }

/* ── TABLES ── */
.table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--surface); padding: .65rem 1rem;
  text-align: left; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface2); }
tbody tr.cdr-new { animation: cdr-flash 2.5s ease-out forwards; }
@keyframes cdr-flash {
  0%   { background: color-mix(in srgb, var(--accent) 25%, transparent); }
  100% { background: transparent; }
}
tbody td { padding: .65rem 1rem; font-size: .875rem; }
.empty-row td { text-align: center; color: var(--text-muted); padding: 2rem; }

/* ── Appels vers numéros d'urgence ── */
tbody tr.cdr-emergency {
  background: color-mix(in srgb, var(--red) 9%, transparent);
  box-shadow: inset 3px 0 0 var(--red);
}
tbody tr.cdr-emergency:hover { background: color-mix(in srgb, var(--red) 15%, var(--surface2)); }
.dst-emergency {
  display: inline-flex; align-items: center; gap: .25rem;
  font-weight: 700; color: var(--red);
}
.emergency-label {
  display: inline-block; margin-top: .15rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--red);
}

/* ── FILTERS ── */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; align-items: flex-end; }
.filters input, .filters select { padding: .45rem .65rem; font-size: .85rem; }
.filters select { padding-right: 1.9rem; }
.filters .btn { font-size: .85rem; padding: .45rem 1rem; }

/* ── PAGINATION ── */
.pagination { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: 1rem; }
.pagination button {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: .35rem .8rem; border-radius: 6px; cursor: pointer; font-size: .8rem;
}
.pagination button:disabled { opacity: .4; cursor: default; }
.pagination span { font-size: .8rem; color: var(--text-muted); }

/* ── AUDIO PLAYER ── */
.audio-cell { display: flex; gap: .4rem; align-items: center; min-width: 320px; }
.audio-cell audio { height: 34px; width: 100%; min-width: 280px; accent-color: var(--accent); }
.btn-dl {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  padding: .2rem .5rem; border-radius: 4px; cursor: pointer; font-size: .75rem;
}
.btn-dl:hover { border-color: var(--accent); color: var(--accent); }

/* ── LIVE CALLS ── */
.duration-cell { font-variant-numeric: tabular-nums; }

/* ── HISTORIQUE DES STATUTS ── */
#btn-events { position: relative; }
#btn-events.has-unread::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--surface);
}
.events-list { max-height: 72vh; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; margin-top: 1rem; }
.ev-export-input { font-size: .8rem; padding: .35rem .5rem; }
.ev-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .25rem; border-bottom: 1px solid var(--border); font-size: .85rem;
}
.ev-row:last-child { border-bottom: none; }
.ev-ico { display: inline-flex; flex-shrink: 0; }
.ev-text { flex: 1; min-width: 0; }
.ev-time { color: var(--text-muted); font-size: .75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev-green .ev-ico  { color: var(--green); }
.ev-red .ev-ico    { color: var(--red); }
.ev-orange .ev-ico { color: var(--orange); }
.ev-blue .ev-ico   { color: var(--accent); }
.ev-grey .ev-ico   { color: var(--text-muted); }
.ev-empty { color: var(--text-muted); text-align: center; padding: 2rem 0; font-size: .85rem; }

/* ── JOURNAL (pôle Diagnostic) ──────────────────────────────────────────────
   Reprend la ligne d'événement (.ev-row) en la rendant dépliable : le détail vit dans
   un bloc frère, masqué par défaut. */
.jr-filters {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border);
}
.jr-filters #jr-search { flex: 1; min-width: 200px; font-size: .8rem; padding: .4rem .6rem; }
.jr-window { font-size: .8rem; padding: .4rem .5rem; }
.jr-chk {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; color: var(--text-muted); white-space: nowrap; cursor: pointer;
}
.jr-sep { width: 1px; height: 18px; background: var(--border); }
.jr-freeze-btn {
  width: auto; padding: .4rem .9rem; font-size: .8rem;
  background: var(--surface); border: 1px solid var(--border);
}
.jr-freeze-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.jr-row { cursor: pointer; }
.jr-row:hover { background: var(--surface); }
.jr-row .jr-caret { color: var(--text-muted); display: inline-flex; transition: transform .15s; }
.jr-row.open .jr-caret { transform: rotate(90deg); }
.jr-meta { display: block; color: var(--text-muted); font-size: .72rem; margin-top: .1rem; }

.jr-expand { padding: .6rem .75rem .8rem 2.1rem; border-bottom: 1px solid var(--border); }
.jr-detail {
  display: grid; grid-template-columns: minmax(120px, max-content) 1fr;
  gap: .3rem .9rem; margin: 0; font-size: .8rem;
}
.jr-detail dt { color: var(--text-muted); }
.jr-detail dd { margin: 0; word-break: break-word; }
.jr-json {
  margin: 0; padding: .4rem .55rem; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: .75rem; overflow-x: auto; white-space: pre;
}
.jr-empty-detail { color: var(--text-muted); font-size: .8rem; }

/* ── MODAL ──────────────────────────────────────────────────────────────────
   Une modale ne se ferme QUE par ses boutons (Annuler / Valider) ou Échap : aucun
   clic sur le fond ne la referme, pour ne pas perdre une saisie en cours d'un
   geste malheureux. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 10, 16, .6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
  animation: modal-fade .15s ease-out;
}
[data-theme="light"] .modal-overlay { background: rgba(26, 29, 46, .38); }
.modal-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-modal);
  padding: 1.5rem 1.6rem;
  width: 440px; max-width: 100%;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  animation: modal-pop .18s cubic-bezier(.2, .8, .3, 1);
}
/* Formulaire riche (création d'utilisateur, fiche complète) : deux colonnes tiennent. */
.modal-box-lg { width: 720px; }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal-box { animation: none; }
}

/* Le fond de page ne défile plus derrière une modale ouverte. */
body.modal-open { overflow: hidden; }

.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem;
}
.modal-title { font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
/* Texte d'explication sous le titre, ou corps d'une modale d'information. */
.modal-desc { color: var(--text-muted); font-size: .875rem; line-height: 1.55; }
.modal-head .modal-desc { margin-top: .3rem; }

.modal-footer {
  display: flex; gap: .6rem; justify-content: flex-end;
  margin-top: 1.5rem; padding-top: 1.15rem;
  border-top: 1px solid var(--border);
}
.modal-footer .btn { width: auto; min-width: 96px; }

.btn-close {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 30px; height: 30px; margin: -.25rem -.35rem 0 0;
  background: none; border: none; border-radius: 8px;
  color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-close:hover { background: var(--surface2); color: var(--text); }
.btn-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* ── FEUILLE GLISSANTE (mobile) ──
   Sous 640 px, la même modale devient une feuille ancrée en bas de l'écran. Une
   boîte flottante au milieu est hostile sur un téléphone : elle arrive sans
   transition, ses boutons tombent hors de portée du pouce, et le clavier virtuel la
   coupe en deux. Ancrée en bas, elle monte depuis le bord, ses actions sont là où le
   pouce se trouve, et le clavier la pousse sans la masquer.
   La barre de préhension et le glissement vers le bas (modals.js) disent qu'elle se
   referme d'un geste — sans supprimer la croix, qui reste le chemin sûr. */
@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box, .modal-box-lg {
    width: 100%;
    /* Coins arrondis en haut seulement : elle sort du bord, elle n'y flotte pas. */
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    max-height: 92vh;
    /* Encoche / barre d'accueil iPhone : sans ça le dernier bouton passe dessous. */
    padding: 1.4rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    animation: sheet-up .22s cubic-bezier(.2, .8, .3, 1);
    transition: transform .16s ease-out;
    touch-action: pan-y;
  }
  /* Barre de préhension : c'est elle qui annonce le geste. */
  .modal-box::before {
    content: ''; display: block;
    width: 38px; height: 4px; margin: -.55rem auto .9rem;
    border-radius: 999px; background: var(--border);
  }
  /* L'en-tête est la zone de glissement : il ne doit pas sélectionner de texte. */
  .modal-head { user-select: none; -webkit-user-select: none; }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn { width: 100%; min-height: 44px; }
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-box, .modal-box-lg { animation: none; transition: none; }
}

/* Bouton icône header */
.btn-icon {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  padding: .3rem .6rem; border-radius: 6px; cursor: pointer; font-size: .9rem;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); }

/* ── RAPPORT DE VACATION ──
   Panneau plein écran, enfant DIRECT de <body> : c'est ce qui permet à la règle
   d'impression plus bas de masquer tous ses frères d'un seul sélecteur. */
#report-panel {
  display: none;
  position: fixed; inset: 0; z-index: 900;
  background: var(--bg); overflow-y: auto;
}
#report-panel.open { display: block; }
body.report-open { overflow: hidden; }

.report-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .7rem 1.2rem; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.report-bar-title { font-weight: 600; }
.report-bar-spacer { flex: 1 1 auto; }
.report-bar .btn { width: auto; flex: none; }
.report-field { font-size: .8rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: .35rem; }
.report-field input { width: auto; font-size: .8rem; padding: .2rem .4rem; }

.report-doc { max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.2rem 4rem; }
.report-doc-head { margin-bottom: 1.4rem; }
.report-title { margin: 0 0 .3rem; font-size: 1.3rem; font-weight: 600; }
.report-period { margin: 0; font-size: .9rem; }
.report-meta { margin: .15rem 0 0; font-size: .76rem; color: var(--text-muted); }
.report-h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin: 1.8rem 0 .6rem; font-weight: 600; }
.report-count { color: var(--accent); text-transform: none; letter-spacing: 0; }
.report-empty { color: var(--text-muted); font-size: .85rem; padding: 2rem 0; text-align: center; }

.report-kpis {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.report-kpi { border: 1px solid var(--border); border-radius: 8px; padding: .6rem .75rem; }
.report-kpi-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); }
.report-kpi-value { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums;
  line-height: 1.2; }
.report-kpi-sub { font-size: .72rem; color: var(--text-muted); }

.report-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.report-table th, .report-table td {
  text-align: left; padding: .35rem .5rem; vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.report-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); font-weight: 600; }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table .nowrap { white-space: nowrap; }
.report-num { font-size: .74rem; color: var(--text-muted); }
.report-muted td { color: var(--text-muted); }
.report-voie { font-size: .7rem; color: var(--accent); }
.report-flagged { background: color-mix(in srgb, var(--orange) 10%, transparent); }

/* Impression : le panneau devient la page. Tout le reste disparaît — barre de
   navigation, onglets, bandeaux — sinon le PDF sortirait avec l'interface autour. */
@media print {
  body.report-open > *:not(#report-panel) { display: none !important; }
  body.report-open { overflow: visible; }
  #report-panel.open { position: static; overflow: visible; background: #fff; color: #000; }
  .report-bar { display: none !important; }
  .report-doc { max-width: none; padding: 0; }
  .report-kpi, .report-table th, .report-table td { border-color: #bbb; }
  .report-title, .report-kpi-value { color: #000; }
  .report-table { font-size: .72rem; }
  /* Une ligne d'appel ne doit pas être coupée entre deux pages. */
  .report-table tr { break-inside: avoid; }
  .report-table thead { display: table-header-group; }
}

.tag-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.tag-row .tag-label { flex: 1; }
/* Désactivée : encore là, encore lisible, mais visiblement hors service. */
.tag-row.is-off .tag-label { opacity: .55; text-decoration: line-through; }

/* ── HEAT MAP VIGIE (une case par jour) ──
   Deux signaux distincts sur une même case : l'intensité dit le VOLUME, le liseré
   rouge dit qu'un appel y est resté sans réponse. Un jour chargé et un jour raté ne
   doivent pas se confondre. */
.vh-controls { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .9rem; }
.vh-legend { margin-left: auto; font-size: .72rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: .35rem; }
.vh-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.vh-swatch-missed { background: var(--surface2); box-shadow: inset 0 0 0 2px var(--red); margin-left: .5rem; }

.vh-months { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.vh-month-title { margin: 0 0 .4rem; font-size: .78rem; color: var(--text-muted);
  text-transform: capitalize; }
.vh-grid { display: grid; grid-template-columns: repeat(7, 26px); gap: 3px; }
.vh-dow { font-size: .62rem; color: var(--text-muted); text-align: center; }
.vh-pad { }
.vh-cell {
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 5px;
  cursor: pointer; position: relative; font: inherit;
  outline: 2px solid transparent; transition: outline-color .12s;
}
.vh-cell:hover { outline-color: var(--accent); }
.vh-num { font-size: .62rem; color: var(--text-muted); line-height: 26px; }
/* Journée avec un appel sans réponse : le liseré, indépendant de l'intensité. */
.vh-missed { box-shadow: inset 0 0 0 2px var(--red); }
.vh-on { outline-color: var(--accent); }

.vh-day { margin-top: 1.1rem; }
.vh-day:empty { display: none; }
.vh-day-title { margin: 0 0 .4rem; font-size: .8rem; font-weight: 600; }
.vh-day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; max-width: 460px; }
.vh-day-list li { display: flex; align-items: center; gap: .6rem; font-size: .84rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); padding-top: .3rem; }
.vh-day-list li:first-child { border-top: none; }
.vh-day-time { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.vh-day-who { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.vh-empty { color: var(--text-muted); font-size: .84rem; margin: .5rem 0; }

/* ── CONSIGNES DU JOUR ──
   En tête de la page Poste. Ton sobre : ce n'est pas une alerte, c'est ce que
   l'équipe doit avoir sous les yeux. Le rouge reste réservé aux appels manqués. */
.consignes { margin-bottom: 1.1rem; }
.consignes-box {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 10px; padding: .7rem .9rem;
}
/* Aucune consigne : l'encart se fait discret, il ne reste que pour le bouton. */
.consignes-box.is-empty {
  background: none; border-color: var(--border); padding: .4rem .5rem;
}
.consignes-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.consignes-title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 600;
}
.consignes-count {
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: .68rem; font-weight: 700; padding: 0 .35rem; min-width: 16px; text-align: center;
}
.consigne-spacer { flex: 1 1 auto; }
.consigne-add {
  background: none; border: none; cursor: pointer; padding: .2rem 0;
  font: inherit; font-size: .78rem; color: var(--accent);
  display: inline-flex; align-items: center; gap: .25rem;
}
.consigne-add:hover { text-decoration: underline; }

.consignes-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .6rem; }
.consigne { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  padding-top: .5rem; }
.consigne:first-child { border-top: none; padding-top: 0; }
.consigne-text { margin: 0; font-size: .9rem; white-space: pre-wrap; }
.consigne-meta {
  margin: .2rem 0 0; font-size: .72rem; color: var(--text-muted);
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
.consigne-del {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: 0 .15rem; line-height: 0; margin-left: auto;
}
.consigne-del:hover { color: var(--red); }

.consigne-form { margin-top: .6rem; }
.consigne-input { width: 100%; font: inherit; font-size: .88rem; resize: vertical; }
.consigne-form-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .45rem;
}
.consigne-days { font-size: .78rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: .3rem; }
.consigne-days select { width: auto; font-size: .78rem; padding: .18rem 1.5rem .18rem .4rem; }
.consigne-form-row .btn { width: auto; }

/* ── PAGE « POSTE » : en-tête ──
   Titre, poste de rattachement, horloge. L'horloge est volontairement grosse : elle
   sert à horodater une main courante à la main, à un mètre de l'écran. */
.poste-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.poste-header-id { min-width: 0; }
.poste-title { margin: 0 0 .35rem; font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; }
.poste-me { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .84rem; color: var(--text-muted); }
.poste-me strong { color: var(--text); }
.poste-me-none { color: var(--orange); }
.poste-me-select { font-size: .8rem; padding: .18rem 1.6rem .18rem .4rem; width: auto; }

.poste-clock { text-align: right; flex: none; }
/* L'heure se lit à un mètre de l'écran, debout : c'est la taille qui fait la
   fonction. Chiffres tabulaires, sinon elle tressaute à chaque seconde. */
.poste-clock-time {
  font-size: 3.2rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.poste-clock-date { font-size: .85rem; color: var(--text-muted); margin-top: .15rem; }

/* Attente moyenne : le chiffre qui dit si la ligne tient ou prend du retard. */
.poste-wait {
  margin-top: .8rem; padding-top: .6rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: baseline; gap: .4rem;
}
.poste-wait:empty { display: none; }
.poste-wait-value { font-size: 1.15rem; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.poste-wait-label { font-size: .72rem; color: var(--text-muted); line-height: 1.3; }

@media (max-width: 640px) {
  .poste-clock { text-align: left; }
  .poste-clock-time { font-size: 2.4rem; }
  .poste-title { font-size: 1.35rem; }
}

/* ── PAGE « POSTE » (plan de travail de l'opérateur) ──
   Deux colonnes sur grand écran, une seule dès qu'on descend : les blocs sont
   indépendants, empiler ne perd rien. Chaque bloc plafonne sa hauteur et défile
   à l'intérieur, sinon un annuaire bavard repousserait les appels en cours hors
   de l'écran — exactement ce que la page cherche à éviter. */
/* Trois modules par rangée sur grand écran. La rangée du haut est celle qu'on
   regarde pendant un appel (consignes, sa propre saisie, l'annuaire) ; celle du bas
   entre deux appels. On passe à deux colonnes puis à une seule quand la place manque,
   l'ordre de lecture restant A B C D E F. */
.poste-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1500px) { .poste-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .poste-grid { grid-template-columns: 1fr; } }
.poste-card { display: flex; flex-direction: column; min-width: 0; }
.poste-card-head {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem;
}
.poste-card-title {
  margin: 0; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); flex: 1 1 auto;
}
.poste-card-title span { color: var(--accent); text-transform: none; letter-spacing: 0; }
.poste-link {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: .75rem; color: var(--accent); flex: none;
}
.poste-link:hover { text-decoration: underline; }
.poste-empty { color: var(--text-muted); font-size: .82rem; padding: .8rem 0; }

.poste-ext-list, #poste-recent, #poste-contacts { max-height: 22rem; overflow-y: auto; }

.poste-ext {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .38rem 0; font-size: .84rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.poste-ext:first-child { border-top: none; }
.poste-ext-mine { font-weight: 600; }
.poste-ext-id {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem;
}
.poste-ext-num { font-variant-numeric: tabular-nums; }
/* Le nom du poste ne se tronque pas et ne disparaît pas : il passe à la ligne. */
.poste-ext-label { color: var(--text); font-weight: 400; word-break: break-word; }
.poste-ext-state { font-size: .78rem; color: var(--text-muted); font-weight: 400;
  flex: none; margin-left: auto; }
.poste-ext-tag {
  font-size: .68rem; color: var(--accent); font-weight: 400;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 4px; padding: 0 .3rem;
}

.poste-recent-list, .poste-contact-list { list-style: none; margin: 0; padding: 0; }
.poste-recent-row, .poste-contact {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .38rem 0; font-size: .84rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.poste-recent-row:first-child, .poste-contact:first-child { border-top: none; }
/* ── F : historique court ──
   Grille stricte à trois colonnes — heure, corps, action — plutôt qu'un flex. Dans
   une colonne d'un tiers d'écran, quatre blocs en flex se repliaient chacun à leur
   guise et rien ne s'alignait plus d'une ligne à l'autre. Ici le nom et l'état
   tiennent la première ligne, le détail la seconde, et le bouton de rappel occupe
   les deux — quelle que soit la largeur. */
.poste-recent-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto auto;
  grid-template-areas:
    "when name  badge call"
    "when meta  meta  call";
  column-gap: .5rem;
  align-items: center;
  padding: .4rem 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.poste-recent-row:first-child { border-top: none; }

/* La date n'apparaît que hors du jour même (cf. dayLabel) : sur une liste courte,
   répéter « aujourd'hui » à chaque ligne n'apprend rien et mange la largeur. */
.poste-recent-when {
  grid-area: when; align-self: center;
  font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: .82rem;
}
.poste-recent-day { display: block; font-size: .66rem; line-height: 1.1; }
.poste-recent-time { line-height: 1.2; }

.poste-recent-name {
  grid-area: name; min-width: 0; font-size: .86rem;
  display: flex; align-items: center; gap: .35rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.poste-recent-dir { display: inline-flex; flex: none; color: var(--text-muted); }
.poste-recent-badge { grid-area: badge; justify-self: end; }
.poste-recent-meta {
  grid-area: meta; min-width: 0; font-size: .72rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Bouton-icône plutôt que « Rappeler » en toutes lettres : le mot coûtait 70 px
   dans une colonne qui n'en a pas 400, et c'est lui qui poussait la ligne à se
   replier. L'intitulé complet reste dans l'infobulle. */
.poste-recent-call {
  grid-area: call; align-self: center; justify-self: end;
  width: 30px; height: 30px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0;
}
button.poste-recent-call:hover { border-color: var(--green); color: var(--green); }

.poste-contact .btn {
  width: auto; flex: none; padding: .2rem .65rem; font-size: .76rem;
  white-space: nowrap;
}
/* Les numéros d'une fiche d'annuaire passent à la ligne d'un bloc quand la carte se
   resserre, au lieu de déborder du cadre. */
.poste-contact-nums {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-left: auto; flex: none;
}

/* Table des appels en cours dans une carte : sans mise en page fixe, une cellule
   large impose sa largeur et fait défiler la carte entière horizontalement. */
.poste-card .table-wrap { overflow-x: auto; }
.poste-card table { table-layout: fixed; width: 100%; }
.poste-card table th, .poste-card table td {
  padding-left: .4rem; padding-right: .4rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── B : l'appel que ce poste tient ──
   Le module se souligne d'un liseré quand un appel est en cours : c'est le seul
   endroit de la page qui change d'état pendant qu'on parle, et l'œil doit le
   retrouver sans le chercher. */
.poste-card-live.is-live {
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  box-shadow: inset 0 2px 0 0 var(--green);
}
.poste-live-state { font-size: .75rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: .35rem; }
.poste-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: poste-pulse 1.6s ease-in-out infinite;
}
@keyframes poste-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .poste-live-dot { animation: none; } }
.poste-live-timer { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.poste-live-done { color: var(--text-muted); }
.poste-live-who { margin: 0 0 .7rem; font-size: 1rem; font-weight: 600; }
.poste-live-at { font-weight: 400; font-size: .82rem; color: var(--text-muted); margin-left: .4rem; }

/* ── Saisie du compte rendu ── */
.poste-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.poste-tag {
  font: inherit; font-size: .8rem; padding: .3rem .7rem; min-height: 32px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface2); color: var(--text-muted); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.poste-tag:hover { border-color: var(--accent); color: var(--accent); }
.poste-tag.is-on {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500;
}
.poste-note { width: 100%; font: inherit; font-size: .85rem; resize: vertical; }
/* Le panel n'est pas un dossier de soins : la note est lue par tous les opérateurs,
   exportée en CSV et imprimée dans le rapport de vacation. L'avertissement doit se
   voir sans être une alarme — il accompagne la saisie, il ne l'interrompt pas. */
.poste-note-warn {
  margin: .3rem 0 .7rem; font-size: .74rem; font-weight: 600; color: var(--orange);
}
.poste-last-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.poste-last-actions .btn { width: auto; }
.poste-last-msg { font-size: .78rem; color: var(--green); }

.poste-search { width: 100%; margin-bottom: .6rem; }
.poste-contact-name { flex: 1 1 9rem; min-width: 0; }
.poste-contact-company { display: block; font-size: .74rem; color: var(--text-muted); }


/* ── ALERTE APPELS MANQUÉS (PC) ──
   Deux tons volontairement distincts : le rouge est réservé aux appels qui ont
   sonné dans le vide. Un raccrochage pendant l'annonce reste gris — le signaler en
   rouge rendrait le bandeau permanent, donc invisible. */
.missed-banner {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); padding: .75rem .95rem; margin-bottom: 1.1rem;
}
.missed-alarm {
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}
.missed-head {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-size: .9rem;
}
.missed-ico { display: inline-flex; color: var(--text-muted); }
.missed-alarm .missed-ico, .missed-alarm .missed-head strong { color: var(--red); }
.missed-sub { font-size: .76rem; color: var(--text-muted); }
.missed-spacer { flex: 1 1 auto; }
.missed-head .btn { width: auto; flex: none; padding: .25rem .75rem; font-size: .78rem; }

.missed-list { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.missed-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .84rem; padding: .28rem 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.missed-time { font-variant-numeric: tabular-nums; color: var(--text-muted); min-width: 3.1rem; }
.missed-who { flex: 1 1 12rem; min-width: 0; }
.missed-num { color: var(--text-muted); font-size: .8rem; margin-left: .35rem; }
.missed-num-strong { font-variant-numeric: tabular-nums; }
.missed-why { font-size: .76rem; color: var(--text-muted); }
.missed-row .btn { width: auto; flex: none; padding: .22rem .7rem; font-size: .78rem; }

/* Appel soldé (rappelé, ou le correspondant a rappelé) : listé pour la trace, mais
   effacé — il n'attend plus rien de personne. */
.missed-row-done { opacity: .62; }
.missed-done { font-style: italic; }

.missed-more {
  margin-top: .5rem; background: none; border: none; cursor: pointer;
  font-size: .78rem; color: var(--accent); padding: .2rem 0;
}
.missed-more:hover { text-decoration: underline; }

/* ── ENREGISTREMENT DES APPELS ──
   Bandeau d'état de la ligne + pastille par appel. Le rouge est réservé à
   « ça enregistre » : c'est l'état qui doit sauter aux yeux, pas l'inverse. */
.rec-banner {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem .85rem; border-radius: 8px; margin-bottom: 1rem;
  font-size: .84rem; border: 1px solid transparent;
}
.rec-banner-ico { display: inline-flex; }
.rec-banner-text { flex: 1 1 auto; min-width: 0; }
.rec-banner .btn { width: auto; padding: .28rem .7rem; font-size: .78rem; flex: none; }
.rec-banner-on {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
  color: var(--red);
}
.rec-banner-off {
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
  border-color: var(--border); color: var(--text-muted);
}
.rec-banner-unknown {
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  border-color: color-mix(in srgb, var(--orange) 35%, transparent);
  color: var(--orange);
}

.rec-cell { white-space: nowrap; }
.rec-cell .rec-btn { padding: .22rem .45rem; vertical-align: middle; }
.rec-btn-on { border-color: color-mix(in srgb, var(--red) 45%, transparent); color: var(--red); }
.rec-btn-on:hover { border-color: var(--red); color: var(--red); }

/* Pastille d'état : elle bat pendant l'enregistrement. Le battement s'arrête si
   l'utilisateur a demandé moins d'animations (prefers-reduced-motion) — la couleur
   pleine suffit alors à distinguer les deux états. */
.rec-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); margin-right: .45rem; vertical-align: middle;
  animation: rec-pulse 1.6s ease-in-out infinite;
}
.rec-dot-off { background: var(--border); animation: none; }
@keyframes rec-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent); }
  50%      { opacity: .55; box-shadow: 0 0 0 4px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-dot { animation: none; }
}

/* Bouton supprimer dans tableau */
/* Actions d'une ligne de tableau : boutons-icônes homogènes, alignés, sans retour à la
   ligne (cinq boutons texte de tailles différentes rendaient la colonne illisible). */
.row-actions { display: flex; gap: .3rem; justify-content: flex-end; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 6px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--surface2); }
.icon-btn.danger:hover { color: var(--red); border-color: var(--red); }

/* Formulaire de création : deux colonnes franches (un auto-fit produisait 3 colonnes
   pour 4 champs, avec un champ orphelin sur la seconde ligne), une seule si trop étroit. */
.form-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.1rem;
}
/* Champ occupant les deux colonnes (e-mail et son explication). */
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}
/* Intertitre à l'intérieur d'un formulaire (« Facultatif ») */
.form-legend {
  font-weight: 600; font-size: .75rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin: .5rem 0 .9rem; padding-top: .9rem;
  border-top: 1px solid var(--border);
}

.btn-delete {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  padding: .2rem .5rem; border-radius: 4px; cursor: pointer; font-size: .75rem;
}
.btn-delete:hover { border-color: var(--red); color: var(--red); }

/* Boutons secondaires de la table utilisateurs (Poste / Mobiles / MDP) : bordés et
   lisibles en clair comme en nuit (sinon, en .btn nu, ils sont invisibles). */
.btn-ext, .btn-phones, .btn-pwd {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; cursor: pointer;
}
.btn-ext:hover, .btn-phones:hover, .btn-pwd:hover { border-color: var(--accent); color: var(--accent); }

/* ── ADMIN ── */
.admin-group { margin-bottom: 2.5rem; }
.admin-group:last-child { margin-bottom: 0; }
.admin-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.admin-group-head .section-title { margin-bottom: 0; }

/* Grille des « tuiles » d'outils admin (PCM, routage, Fanvil, VIGIE…) */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1rem;
}
.admin-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.1rem 1.2rem;
  transition: border-color .15s;
}
.admin-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.admin-card-head { display: flex; align-items: flex-start; gap: .85rem; }
.admin-card-icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.admin-card-title { font-weight: 600; font-size: .95rem; }
.admin-card-desc { font-size: .8rem; color: var(--text-muted); margin-top: .25rem; line-height: 1.45; }
.admin-card-body { margin-top: .9rem; font-size: .9rem; line-height: 1.5; }
.admin-card-foot { margin-top: auto; padding-top: 1rem; }
.admin-card-foot .btn { width: auto; }
.admin-card-result { margin-top: .8rem; font-size: .875rem; line-height: 1.5; }

/* ── Test de routage : chaîne d'acheminement et de débordement ── */
.route-verdict:not(:empty) { margin-top: .6rem; }
.route-summary { margin-top: .6rem; font-weight: 600; }
.route-chain { margin: .8rem 0 0; padding: 0; list-style: none; }
.route-step {
  display: flex; gap: .6rem; padding: .55rem 0 .55rem .1rem;
  border-left: 2px solid var(--border); margin-left: .7rem; padding-left: .9rem;
}
.route-step:first-child { border-top-left-radius: 2px; }
.route-step.is-ringing { border-left-color: var(--green); }
.route-step-num {
  flex-shrink: 0; width: 20px; height: 20px; margin-left: -1.9rem; margin-top: .1rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface2); border: 1px solid var(--border);
  font-size: .7rem; font-weight: 600; color: var(--text-muted);
}
.route-step.is-ringing .route-step-num { border-color: var(--green); color: var(--green); }
.route-step-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.route-step-members { margin-top: .25rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.route-step-members span { font-size: .8rem; color: var(--text-muted); }
.route-step-members span.is-off { text-decoration: line-through; opacity: .7; }
.route-step-flow { margin-top: .25rem; font-size: .8rem; color: var(--text-muted); }
.route-step-flow::before { content: "↳ "; }
.route-issue { margin-top: .5rem; color: var(--red); font-size: .82rem; }
.route-issue::before { content: "⚠ "; }

/* ── TOPOLOGY VIEW ── */
#topo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-bottom: 2rem;
}

.topo-vline {
  width: 1px;
  height: 1.5rem;
  background: var(--border);
}

.topo-trunks {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  max-width: 900px;
  margin-bottom: 0;
}

.topo-trunks .card {
  padding: .45rem .85rem;
  font-size: .8rem;
}

.topo-server {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--surface2);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: .65rem 1.4rem;
  font-weight: 600;
  font-size: .9rem;
}

.topo-branches {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  position: relative;
}

/* Ligne horizontale reliant les deux colonnes */
.topo-branches::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}

.topo-branch-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.5rem;
  position: relative;
  min-width: 200px;
  transition: opacity .3s;
}

/* Ligne verticale depuis la barre horizontale vers le nœud */
.topo-branch-col::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 1.5rem;
  background: var(--border);
}

.topo-branch-active::before {
  background: var(--accent);
  width: 2px;
}

.topo-branch-inactive {
  opacity: .45;
}

.topo-branch-overflow {
  opacity: .45;
}

.topo-overflow-label {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: .04em;
  margin-top: .4rem;
}

.topo-incoming-label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .04em;
  margin-bottom: .35rem;
}

.topo-branch-active .topo-queue-node {
  border-color: var(--accent);
}

.topo-queue-node {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem 1rem;
  font-size: .85rem;
  font-weight: 500;
}

/* Le bandeau « PCM désactivé » est repris tel quel sur la page Poste : même sens,
   même apparence, l'opérateur n'a pas à réapprendre un code couleur. */
#poste-pcm-warning:not(:empty) { margin-bottom: 1.1rem; }
.topo-pcm-warning {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: color-mix(in srgb, var(--red) 12%, var(--surface));
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 8px;
  padding: .6rem 1rem;
  font-size: .85rem;
  margin-bottom: 1rem;
}

.topo-queue-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  line-height: 1.2;
}

.topo-priority-card {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  padding: .45rem .8rem;
  background: #0f1f3b;
  border: 1px solid var(--blue);
  border-radius: 8px;
  color: var(--blue);
}
.topo-priority-num {
  font-size: .8rem;
  font-weight: 600;
}
.topo-priority-hint {
  font-size: .68rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
[data-theme="light"] .topo-priority-card {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.topo-me-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-end;
  margin-bottom: .75rem;
  padding: .35rem .7rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: .78rem;
}
.topo-me-bar select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .2rem .4rem;
  font-size: .78rem;
}

.btn-pcm-defaults {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: .75rem;
  cursor: pointer;
}
.btn-pcm-defaults:hover {
  border-color: var(--accent);
  color: var(--text);
}

.topo-queue-descr {
  font-size: .68rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.topo-unqueued-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: .5rem;
}

#topo-unqueued-col {
  min-width: 0;
}

.topo-unqueued-groups {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .5rem;
}

.topo-unqueued-type {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.topo-unqueued-type-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: .5rem;
}

.topo-unqueued-decades {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}

.topo-decade-col {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: stretch;
}

.topo-decade-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.topo-ext-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  max-width: 700px;
  padding: 0 .5rem;
  margin-top: .5rem;
}

.topo-ext-row .card {
  min-width: 120px;
  max-width: 165px;
}

.topo-ext-col {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: stretch;
  margin-top: .5rem;
}

.topo-ext-col .card {
  min-width: 180px;
}

/* ── TOGGLE BUTTONS (stats controls) ── */
.btn-toggle {
  padding: .25rem .6rem;
  font-size: .75rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: 5px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-toggle:hover { border-color: var(--accent); color: var(--accent); }
.btn-toggle.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── STATS ── */
.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.stats-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.stats-value {
  font-size: 2rem;
  font-weight: 700;
  margin-top: .4rem;
  font-variant-numeric: tabular-nums;
}

/* ── FACTURATION ── */
.fact-card-meta { font-size: .78rem; color: var(--text-muted); margin-top: .35rem; }
.fact-badge {
  display: inline-block;
  font-size: .74rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.fact-badge.fact-free {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
}
.fact-badge.fact-paid {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
/* Cartes de synthèse agrandies (prix mis en avant) — propre à la Facturation. */
#fact-totals {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
#fact-totals .card { padding: 1.5rem 1.75rem; }
#fact-totals .card-sub { font-size: .85rem; }
#fact-totals .stats-value { font-size: 3rem; margin-top: .5rem; }
#fact-totals .fact-card-meta { font-size: .9rem; margin-top: .5rem; }

.fact-breakdown { margin-bottom: .75rem; }
.fact-rates { font-size: .82rem; color: var(--text-muted); margin-bottom: .6rem; }
.fact-rates b { color: var(--text); font-weight: 600; }
.fact-breakdown-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.fact-breakdown-table th {
  text-align: left; font-weight: 500; color: var(--text-muted);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .3rem .6rem; border-bottom: 1px solid var(--border);
}
.fact-breakdown-table td { padding: .35rem .6rem; border-bottom: 1px solid var(--border); }
.fact-breakdown-table tr:last-child td { border-bottom: none; }

/* ── HISTOGRAM ── */
.histo-outer {
  padding-bottom: 1.75rem;
  position: relative;
}
.histo-with-axis {
  display: flex;
  gap: .4rem;
  align-items: flex-start;
}
.histo-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160px;
  min-width: 2rem;
  flex-shrink: 0;
  text-align: right;
}
.histo-ytick {
  font-size: .6rem;
  color: var(--text-muted);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.histo-main {
  flex: 1;
  min-width: 0;
}
.histo-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 160px;
  border-bottom: 1px solid var(--border);
  background-image: repeating-linear-gradient(
    to top,
    transparent 0px,
    transparent calc(25% - 1px),
    color-mix(in srgb, var(--border) 60%, transparent) calc(25% - 1px),
    color-mix(in srgb, var(--border) 60%, transparent) 25%
  );
}
.histo-col {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
  cursor: default;
}
/* Colonne empilée : sortants au-dessus, entrants en dessous — la hauteur totale
   est le volume de la tranche (cf. renderHistogram). */
.histo-stack {
  width: 100%;
  min-width: 2px;
  display: flex;
  flex-direction: column;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}
.histo-seg { width: 100%; transition: filter .1s; }
.histo-in { background: color-mix(in srgb, var(--accent) 62%, transparent); }
.histo-out { background: color-mix(in srgb, var(--orange) 62%, transparent); }
.histo-col:hover .histo-seg { filter: brightness(1.25) saturate(1.2); }

.histo-legend {
  display: flex;
  gap: 1.2rem;
  margin-top: .9rem;
  font-size: .75rem;
  color: var(--text-muted);
}
.histo-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.histo-swatch {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}

/* ── HEAT MAP (activité par jour et par heure) ── */
.heat-wrap { overflow-x: auto; }
.heat-grid { min-width: 520px; }
.heat-row {
  display: grid;
  grid-template-columns: 5.5rem repeat(24, minmax(0, 1fr)) 2.6rem;
  gap: 2px;
  align-items: center;
  padding: 1px 0;
  border-radius: 4px;
}
.heat-row.active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.heat-head { margin-bottom: .25rem; }
.heat-hlbl {
  font-size: .6rem;
  color: var(--text-muted);
  text-align: left;
  font-variant-numeric: tabular-nums;
}
button.heat-day {
  background: none; border: none; padding: .1rem .35rem .1rem 0;
  font-size: .72rem; color: var(--text-muted); text-align: right;
  cursor: pointer; white-space: nowrap; border-radius: 4px;
}
button.heat-day:hover { color: var(--accent); }
.heat-row.active button.heat-day { color: var(--accent); font-weight: 600; }
div.heat-day { min-width: 0; }
.heat-cell {
  height: 15px;
  border-radius: 2px;
  cursor: pointer;
  transition: outline-color .1s;
  outline: 1px solid transparent;
}
.heat-cell:hover { outline-color: var(--accent); }
.heat-total {
  font-size: .68rem;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.heat-note { font-size: .72rem; color: var(--text-muted); margin-top: .75rem; }

/* Bandeau « journée sélectionnée » */
.stats-day-chip {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--text-muted);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 8px; padding: .5rem .85rem; margin-bottom: 1rem;
}
.stats-day-chip strong { color: var(--text); }
.stats-day-chip .btn { padding: .25rem .7rem; font-size: .78rem; width: auto; }
.histo-labels {
  display: flex;
  gap: 2px;
  margin-top: .3rem;
}
.histo-lbl {
  flex: 1;
  font-size: .6rem;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: visible;
}

/* ── CDR ANNOTATIONS ── */
.cdr-actions { white-space: nowrap; width: 118px; text-align: center; }

.btn-callback {
  background: none; border: none;
  cursor: pointer; padding: 0 .4rem 0 0;
  color: var(--green);
  transition: color .15s, transform .1s;
  line-height: 0; vertical-align: middle;
}
.btn-callback:hover { color: var(--green); transform: scale(1.15); }

/* Rappel VIGIE : couleur de l'astreinte — c'est le mobile du cadre qui sonne,
   pas un poste, et la ligne VIGIE est présentée au destinataire. */
.btn-callback-vigie,
.btn-callback-vigie:hover { color: var(--orange); }

.btn-flag {
  background: none; border: none;
  cursor: pointer; padding: 0;
  color: var(--text-muted); opacity: .4;
  transition: color .15s, opacity .15s;
  line-height: 0; vertical-align: middle;
}
.btn-flag:hover         { color: var(--yellow); opacity: 1; }
.btn-flag.flagged       { color: var(--yellow); opacity: 1; }
.btn-flag.flagged:hover { color: var(--text-muted); opacity: .6; }

.btn-note-toggle {
  background: none; border: none;
  cursor: pointer; padding: 0 0 0 .4rem;
  color: var(--text-muted); opacity: .4;
  transition: color .15s, opacity .15s;
  line-height: 0; vertical-align: middle;
}
.btn-note-toggle:hover    { color: var(--accent); opacity: 1; }
.btn-note-toggle.has-note { color: var(--accent); opacity: 1; }

.btn-cdr-delete {
  background: none; border: none;
  cursor: pointer; padding: 0 0 0 .4rem;
  color: var(--text-muted); opacity: .4;
  transition: color .15s, opacity .15s, transform .1s;
  line-height: 0; vertical-align: middle;
}
.btn-cdr-delete:hover     { color: var(--red); opacity: 1; transform: scale(1.15); }
.btn-cdr-delete:disabled  { cursor: default; opacity: .3; }

tbody tr.cdr-flagged { background: color-mix(in srgb, var(--yellow) 6%, transparent); }
tbody tr.cdr-flagged:hover { background: color-mix(in srgb, var(--yellow) 11%, var(--surface2)); }

tbody tr.note-row         { background: var(--surface2) !important; }
tbody tr.note-row:hover   { background: var(--surface2) !important; }
tbody tr.note-row td      { padding: .4rem 1rem .6rem; border-top: none; }

.note-expand { display: flex; flex-direction: column; gap: .45rem; }
.note-textarea { width: 100%; font-size: .85rem; min-height: 62px; }
.note-row-actions { display: flex; gap: .5rem; }
.note-row-actions .btn { padding: .35rem .9rem; font-size: .8rem; }

/* ── FOOTER ── */
.app-footer {
  text-align: center;
  padding: .75rem 1.5rem;
  font-size: .75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* ── TOAST ── */
#toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--surface2); border: 1px solid var(--border);
  padding: .7rem 1.2rem; border-radius: 8px; font-size: .85rem;
  display: none; z-index: 1000; max-width: 320px;
}
#toast.show { display: block; }
#toast.error { border-color: var(--red); color: var(--red); }

/* ── RESPONSIVE MOBILE ── */
@media (max-width: 640px) {
  header { padding: 0 .75rem; gap: .4rem; }
  /* Le fil d'Ariane garde la page, le pôle passe à la trappe. */
  .crumb #crumb-pole { display: none; }

  main { padding: 1rem .75rem; }

  .login-wrap { padding: 1rem; align-items: flex-start; padding-top: 3rem; }
  .login-box { border-radius: 8px; }

  /* Filtres CDR empilés */
  .filters > div { width: 100%; }
  .filters input, .filters select { width: 100% !important; }

  /* Stats header empilé */
  .stats-header { flex-direction: column; align-items: flex-start; gap: .75rem; }

  /* Topologie : branches en colonne */
  .topo-branches { flex-direction: column; align-items: center; gap: 1.5rem; }
  .topo-branches::before { display: none; }
  .topo-branch-col { min-width: 0; }

  /* Audio player plus compact */
  .audio-cell { min-width: 0; }
  .audio-cell audio { width: 100%; min-width: 180px; }

  /* Toast plus proche du bas */
  #toast { right: .75rem; left: .75rem; max-width: none; bottom: .75rem; }
}

/* ── Annuaire (contacts externes) ─────────────────────────────────────────── */
.contacts-searchbar { max-width: 560px; margin-bottom: 1.25rem; }
.contacts-searchbar input { width: 100%; padding: .7rem 1rem; border-radius: 10px; font-size: .95rem; }

.contacts-results { display: flex; flex-direction: column; gap: .6rem; }
.contacts-empty { color: var(--text-muted); font-size: .9rem; padding: 1rem 0; }

.contact-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: .75rem 1rem;
}
.contact-name    { font-weight: 600; font-size: .95rem; }
.contact-company { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; }

.contact-numbers { display: flex; flex-wrap: wrap; gap: .5rem; }
.contact-call {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: .35rem .8rem; cursor: pointer;
  font-size: .85rem; transition: border-color .15s, color .15s;
}
.contact-call svg  { color: var(--green); }
.contact-call:hover { border-color: var(--green); color: var(--green); }
/* Le temps qu'un appel parte : plus de survol vert ni de clic possible. */
.contact-call:disabled { opacity: .5; cursor: default; }
.contact-call:disabled:hover { border-color: var(--border); color: var(--text); }
.contact-num-type {
  font-size: .7rem; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 .4rem;
}
/* Badge « ⏎ » : ce numéro-là est celui que la touche Entrée composera. Le repère est
   le même dans l'annuaire complet et dans celui de la page Poste — c'est la même
   promesse, elle doit avoir la même tête. */
.call-enter {
  font-family: inherit; font-size: .75rem; line-height: 1; margin-left: .35rem;
  color: var(--text-muted); background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px; padding: .1rem .3rem;
}
.contact-call:hover .call-enter,
.poste-dial:hover .call-enter { border-color: var(--green); color: var(--green); }

/* ── Éditeur de touches DSS Fanvil ── */
.fanvil-tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.fanvil-tab {
  padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); cursor: pointer;
  font-size: .85rem; font-weight: 600; transition: all .15s;
}
.fanvil-tab:hover { color: var(--text); border-color: var(--accent); }
.fanvil-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.fanvil-banner {
  display: flex; align-items: center; gap: .85rem;
  background: color-mix(in srgb, var(--orange) 12%, var(--surface));
  border: 1px solid var(--orange); border-radius: 8px;
  padding: .7rem 1rem; margin-bottom: 1.25rem;
}
.fanvil-banner-text { flex: 1; color: var(--orange); font-size: .85rem; line-height: 1.4; }
.fanvil-banner button {
  flex-shrink: 0; background: var(--orange); color: #fff; border: none;
  border-radius: 6px; padding: .5rem 1rem; font-size: .85rem; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
}
.fanvil-banner button:hover { filter: brightness(1.08); }
.fanvil-banner button:disabled { opacity: .6; cursor: default; }

.fanvil-page { margin-bottom: 1.5rem; }
.fanvil-page-title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 700; margin: 0 0 .55rem .15rem;
}
.fanvil-keys { display: flex; flex-direction: column; gap: .5rem; }
.fanvil-key {
  display: grid;
  grid-template-columns: 2rem .9rem minmax(160px, 1.6fr) minmax(120px, 1.1fr) minmax(150px, 1.6fr) minmax(90px, .8fr);
  gap: .6rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: 8px; padding: .5rem .7rem;
}
.fanvil-key.head { background: transparent; border: none; padding: .1rem .7rem; }
.fanvil-key.head span {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
}
.fanvil-key[data-color="Green"]  { border-left-color: var(--green); }
.fanvil-key[data-color="Blue"]   { border-left-color: #3b82f6; }
.fanvil-key[data-color="Yellow"] { border-left-color: #eab308; }
.fanvil-key[data-color="Purple"] { border-left-color: #a855f7; }
.fanvil-key[data-color="Red"]    { border-left-color: var(--red); }
.fanvil-keynum {
  width: 1.7rem; height: 1.7rem; border-radius: 6px; background: var(--surface2);
  color: var(--text-muted); display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
}
.fanvil-dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--border); }
.fanvil-dot[data-color="Green"]  { background: var(--green); }
.fanvil-dot[data-color="Blue"]   { background: #3b82f6; }
.fanvil-dot[data-color="Yellow"] { background: #eab308; }
.fanvil-dot[data-color="Purple"] { background: #a855f7; }
.fanvil-dot[data-color="Red"]    { background: var(--red); }
.fanvil-key select, .fanvil-key input { width: 100%; padding: .45rem .6rem; font-size: .85rem; }
.fanvil-key select { padding-right: 1.9rem; }

.fanvil-actionbar {
  display: flex; gap: .9rem; align-items: center; flex-wrap: wrap;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.fanvil-actionbar .btn { width: auto; }
@media (max-width: 720px) {
  .fanvil-key { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; }
  .fanvil-key.head { display: none; }
  .fanvil-key .fanvil-dot { display: none; }
  .fanvil-keynum { align-self: flex-start; }
}

/* ── Onglet VIGIE : roster cadres + glisser-déposer ──────────────────────── */
.vigie-subtitle { font-size: .9rem; font-weight: 600; margin: .2rem 0; }
.vigie-card-name { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.vigie-badge {
  display: inline-block; font-size: .65rem; font-weight: 700; vertical-align: middle;
  padding: .05rem .3rem; border-radius: 4px; background: var(--surface2); color: var(--text-muted);
}
.vigie-roster-card { min-width: 210px; cursor: grab; display: flex; flex-direction: column; gap: .45rem; }
.vigie-roster-card:active { cursor: grabbing; }
.vigie-roster-card.dragging { opacity: .45; }
.vigie-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.vigie-card-nums { font-size: .8rem; color: var(--text-muted); }
.vigie-chip-reactivate { border-color: var(--warning); color: var(--warning); }
.vigie-chip-reactivate:hover { background: var(--warning); color: #1a1d2e; border-color: var(--warning); }
.vigie-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.vigie-chip {
  font-size: .75rem; padding: .2rem .5rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  transition: background .15s, color .15s, border-color .15s;
}
.vigie-chip:hover { border-color: var(--accent); color: var(--accent); }
.vigie-chip.on { background: var(--success); border-color: var(--success); color: #fff; }
.vigie-dropzone { min-height: 64px; border-radius: 10px; padding: .4rem; transition: background .15s, outline-color .15s; outline: 2px dashed transparent; outline-offset: -2px; }
.vigie-dropzone.drag-over { outline-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Diagramme de routage des appels VIGIE : origine → 790 → 690 → 695 */
.vigie-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: .5rem; max-width: 880px; margin: 0 0 1.75rem; }
.vigie-flow-node {
  flex: 1 1 0; min-width: 132px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .85rem .6rem;
}
.vigie-flow-origin { border-style: dashed; }
.vigie-flow-num { font-size: 1.45rem; font-weight: 700; line-height: 1; color: var(--accent); height: 1.45rem; display: flex; align-items: center; }
.vigie-flow-num svg { width: 26px; height: 26px; }
.vigie-flow-primary .vigie-flow-num { color: var(--success); }
.vigie-flow-overflow .vigie-flow-num { color: var(--blue); }
.vigie-flow-label { font-size: .82rem; font-weight: 600; margin-top: .4rem; }
.vigie-flow-sub { font-size: .72rem; color: var(--text-muted); }
.vigie-flow-arrow { display: flex; align-items: center; color: var(--text-muted); font-size: 1.3rem; font-weight: 700; }
@media (max-width: 640px) {
  .vigie-flow { flex-direction: column; align-items: stretch; }
  .vigie-flow-arrow { justify-content: center; transform: rotate(90deg); }
}

/* ── HABILLAGE DE FULLCALENDAR ──
   La bibliothèque expose ses couleurs en variables CSS et le panel n'en définissait
   AUCUNE : le calendrier gardait donc ses valeurs claires par défaut (page blanche,
   bandes grises, bordures #ddd, boutons bleu ardoise). En thème sombre, la bande de
   jour de la vue liste — un gris clair — recevait le texte clair du panel : illisible.
   On mappe ici chaque variable sur les jetons du panel, ce qui fait suivre le thème
   automatiquement, dans les deux sens. */
.fc {
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface2);
  --fc-neutral-text-color: var(--text-muted);
  --fc-border-color: var(--border);
  --fc-small-font-size: .8em;

  /* Boutons : ceux du panel, pas le bleu ardoise de la bibliothèque. */
  --fc-button-text-color: var(--text);
  --fc-button-bg-color: var(--surface2);
  --fc-button-border-color: var(--border);
  --fc-button-hover-bg-color: var(--surface2);
  --fc-button-hover-border-color: var(--accent);
  --fc-button-active-bg-color: var(--accent);
  --fc-button-active-border-color: var(--accent);

  --fc-event-bg-color: var(--accent);
  --fc-event-border-color: var(--accent);
  --fc-event-text-color: #fff;
  --fc-event-selected-overlay-color: color-mix(in srgb, var(--accent) 25%, transparent);

  --fc-more-link-bg-color: var(--surface2);
  --fc-more-link-text-color: var(--text);
  --fc-highlight-color: color-mix(in srgb, var(--accent) 18%, transparent);
  --fc-today-bg-color: color-mix(in srgb, var(--accent) 10%, transparent);
  --fc-now-indicator-color: var(--red);
  --fc-non-business-color: color-mix(in srgb, var(--text-muted) 12%, transparent);
}
/* Le bouton actif passe en blanc sur accent : le texte doit suivre, sinon il reste
   sombre sur sombre. */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { color: #fff; }
.fc .fc-button-primary:disabled { opacity: .5; }
.fc .fc-toolbar-title { color: var(--text); }
.fc a { color: inherit; }

/* ── Vue LISTE (mobile) ──
   C'est elle qui rendait le plus mal : bande de jour illisible, lignes tassées,
   heures qui se replient. On la traite comme une liste du panel, pas comme un
   tableau de calendrier. */
.fc .fc-list { border-color: var(--border); border-radius: 10px; overflow: hidden; }
.fc .fc-list-empty { background: transparent; color: var(--text-muted); font-size: .88rem; }

/* Bande de jour : c'est un en-tête, il doit se lire comme tel. */
.fc .fc-list-day-cushion {
  background: var(--surface2);
  padding: .5rem .85rem;
  font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
}
.fc .fc-list-day-cushion a { color: inherit; text-decoration: none; }
/* La date à droite reprend du poids : c'est elle qu'on cherche en parcourant. */
.fc .fc-list-day-side-text { color: var(--text); font-weight: 700; }

.fc .fc-list-table td { padding: .6rem .85rem; border-color: var(--border); }
.fc .fc-list-event:hover td { background: var(--surface2); }
/* L'heure ne doit jamais se replier : deux bornes sur deux lignes se lisent comme
   deux créneaux. Chiffres tabulaires pour que les lignes s'alignent. */
.fc .fc-list-event-time {
  white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--text-muted); font-size: .8rem; vertical-align: top;
  width: 1%;
}
.fc .fc-list-event-title { color: var(--text); font-size: .9rem; }
.fc .fc-list-event-title a { color: inherit; text-decoration: none; }
.fc .fc-list-event-graphic { vertical-align: top; padding-top: .95rem; }
.fc .fc-list-event-dot { border-width: 5px; }

/* Planning VIGIE — créneaux d'absence (« en pause ») : rendu hachuré distinct des
   créneaux d'astreinte pleins. La couleur du cadre (background-color inline) reste
   visible sous les rayures pour identifier qui est concerné. */
.fc-event.fc-absence {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.45) 0,
    rgba(255, 255, 255, 0.45) 5px,
    rgba(255, 255, 255, 0) 5px,
    rgba(255, 255, 255, 0) 10px
  );
  border-style: dashed !important;
  opacity: 0.9;
}

/* Planning VIGIE — champs de la modale de créneau (select cadre + dates). La peau
   (fond, bordure, chevron, anneau de focus) vient de la base commune ; il ne reste
   ici que la largeur. */
.plan-field { width: 100%; }