/**
 * Composants réutilisables — ClinLead Design System
 */

/* ============ Sidebar ============ */
.sidebar {
  width: var(--cl-sidebar-width);
  flex-shrink: 0;
  background: var(--cl-primary-900);
  color: var(--cl-white);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: var(--cl-z-sidebar);
}

.sidebar__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cl-space-2);
  padding: var(--cl-space-5) var(--cl-space-5);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
}
.sidebar__brand:hover { text-decoration: none; }

.sidebar__brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cl-white);
  border-radius: var(--cl-radius-md);
  padding: 8px 12px;
  box-shadow: var(--cl-shadow-sm);
}
.sidebar__brand-logo { height: 38px; width: auto; max-width: 160px; display: block; object-fit: contain; }
.sidebar__brand-sub { font-size: var(--cl-fs-xs); color: var(--cl-primary-100); opacity: 0.8; }

.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--cl-space-4) var(--cl-space-3); }

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--cl-space-3);
  padding: var(--cl-space-3) var(--cl-space-4);
  border-radius: var(--cl-radius-md);
  color: rgba(255,255,255,0.75);
  font-size: var(--cl-fs-sm);
  font-weight: var(--cl-fw-medium);
  margin-bottom: 2px;
  transition: background var(--cl-transition-fast), color var(--cl-transition-fast);
}
.sidebar__link:hover { background: rgba(255,255,255,0.08); color: var(--cl-white); text-decoration: none; }
.sidebar__link.is-active { background: var(--cl-primary-600); color: var(--cl-white); }
.sidebar__link .icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ============ Icônes SVG ============ */
.icon-svg { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; }
.icon-svg svg { display: block; }
.btn .icon-svg svg { width: 16px; height: 16px; }
.sidebar__link .icon-svg svg { width: 18px; height: 18px; }
.state-panel__icon .icon-svg svg { width: 40px; height: 40px; }
.state-panel__icon { color: var(--cl-gray-400); }
.medical-alert .icon-svg svg { width: 20px; height: 20px; }
.banner .icon-svg svg { width: 18px; height: 18px; }
.mode-indicator .icon-svg svg, .sidebar__mode-badge .icon-svg svg { width: 12px; height: 12px; }
.badge .icon-svg svg { width: 12px; height: 12px; }

.sidebar__footer {
  padding: var(--cl-space-4) var(--cl-space-5);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: var(--cl-fs-xs);
  color: rgba(255,255,255,0.55);
}

.sidebar__mode-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--cl-radius-full);
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-semibold);
  margin-top: var(--cl-space-2);
}
.sidebar__mode-badge.demo { background: var(--cl-warning-100); color: var(--cl-warning-600); }
.sidebar__mode-badge.live { background: var(--cl-success-100); color: var(--cl-success-600); }
.sidebar__mode-badge.historical { background: var(--cl-primary-100); color: var(--cl-primary-700); }
.sidebar__mode-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ============ Sidebar — mobile (barre horizontale) ============ */
@media (max-width: 640px) {
  .app-shell { flex-direction: column; }

  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    flex-direction: row;
    align-items: center;
  }

  .sidebar__brand { padding: var(--cl-space-2) var(--cl-space-3); border-bottom: none; border-right: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
  .sidebar__brand-sub { display: none; }
  .sidebar__brand-chip { padding: 5px 8px; }
  .sidebar__brand-logo { height: 26px; max-width: 110px; }

  .sidebar__nav {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: var(--cl-space-2);
  }

  .sidebar__link { margin-bottom: 0; margin-right: 4px; white-space: nowrap; flex-shrink: 0; }
  .sidebar__footer { display: none; }
}

/* ============ Header ============ */
.app-header {
  height: var(--cl-header-height);
  background: var(--cl-white);
  border-bottom: var(--cl-border-width) solid var(--cl-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--cl-space-6);
  position: sticky;
  top: 0;
  z-index: var(--cl-z-header);
}

.app-header__title { font-size: var(--cl-fs-lg); font-weight: var(--cl-fw-semibold); }
.app-header__meta { display: flex; align-items: center; gap: var(--cl-space-4); }
.app-header__sync { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); }

.app-header__brand { display: flex; align-items: center; gap: var(--cl-space-3); min-width: 0; }
.app-header__brand-logo { height: 32px; width: auto; max-width: 120px; display: block; object-fit: contain; flex-shrink: 0; }

.app-header__powered-by {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--cl-fs-xs); color: var(--cl-gray-400);
  white-space: nowrap;
}
.app-header__powered-by-mark { width: 16px; height: 16px; display: block; object-fit: contain; }

@media (max-width: 640px) {
  .app-header {
    height: auto;
    flex-wrap: wrap;
    gap: var(--cl-space-2);
    padding: var(--cl-space-3) var(--cl-space-4);
  }
  .app-header__title { font-size: var(--cl-fs-md); }
  .app-header__brand { width: 100%; }
  .app-header__brand-logo { height: 24px; }
  .app-header__meta { flex-wrap: wrap; gap: var(--cl-space-2); width: 100%; }
  .app-header__sync { display: none; }
  .app-header__powered-by { display: none; }
}

.app-header__user {
  display: flex; align-items: center; gap: var(--cl-space-2);
  padding: 6px 10px; border-radius: var(--cl-radius-full);
  background: var(--cl-gray-100);
  font-size: var(--cl-fs-sm); font-weight: var(--cl-fw-medium);
}
.app-header__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--cl-primary-500); color: var(--cl-white);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-bold);
}

/* ============ Mode intégré (iframe GoHighLevel) ============ */
/* Sidebar interne masquée : navigation horizontale compacte dans l'en-tête.
   Marges réduites pour économiser l'espace disponible dans l'iframe GHL. */
.app-shell--embedded .app-content { padding: var(--cl-space-3); }
.app-shell--embedded .page-header { margin-bottom: var(--cl-space-3); }

.app-header--embedded {
  height: auto;
  flex-wrap: wrap;
  padding: var(--cl-space-2) var(--cl-space-3);
  gap: var(--cl-space-2);
}
.app-header--embedded .app-header__brand-logo { height: 24px; }
.app-header--embedded .app-header__sync { display: none; }

.embedded-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
}
.embedded-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--cl-radius-md);
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-medium);
  color: var(--cl-gray-600); white-space: nowrap; flex-shrink: 0;
}
.embedded-nav__link:hover { background: var(--cl-gray-100); text-decoration: none; }
.embedded-nav__link.is-active { background: var(--cl-primary-100); color: var(--cl-primary-700); }
.embedded-nav__link .icon-svg svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .app-header--embedded { padding: var(--cl-space-2); }
  .embedded-nav { width: 100%; order: 3; }
}

.mode-indicator {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--cl-radius-full);
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-semibold);
}
.mode-indicator.demo { background: var(--cl-warning-100); color: var(--cl-warning-600); }
.mode-indicator.live { background: var(--cl-success-100); color: var(--cl-success-600); }
.mode-indicator.historical { background: var(--cl-primary-100); color: var(--cl-primary-700); }
.mode-indicator .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cl-space-2);
  padding: 9px 16px;
  border-radius: var(--cl-radius-md);
  font-size: var(--cl-fs-sm);
  font-weight: var(--cl-fw-medium);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--cl-transition-fast), border-color var(--cl-transition-fast), transform var(--cl-transition-fast);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  background: var(--cl-gray-100);
  color: var(--cl-gray-400);
  border-color: var(--cl-gray-200);
  filter: grayscale(0.4);
}

.btn-primary { background: var(--cl-primary-500); color: var(--cl-white); }
.btn-primary:hover { background: var(--cl-primary-600); }

.btn-secondary { background: var(--cl-white); color: var(--cl-gray-700); border-color: var(--cl-gray-300); }
.btn-secondary:hover { background: var(--cl-gray-050); }

.btn-success { background: var(--cl-success-600); color: var(--cl-white); }
.btn-success:hover { filter: brightness(1.08); }

.btn-danger { background: var(--cl-danger-600); color: var(--cl-white); }
.btn-danger:hover { filter: brightness(1.08); }

.btn-ghost { background: transparent; color: var(--cl-gray-600); }
.btn-ghost:hover { background: var(--cl-gray-100); }

.btn-whatsapp { background: #1fa855; color: var(--cl-white); }
.btn-whatsapp:hover { background: #178a45; }

.btn-sm { padding: 6px 12px; font-size: var(--cl-fs-xs); }
.btn-icon { padding: 8px; }
.btn-block { width: 100%; }

/* ============ Cards ============ */
.card {
  background: var(--cl-white);
  border: var(--cl-border-width) solid var(--cl-border-color);
  border-radius: var(--cl-radius-lg);
  box-shadow: var(--cl-shadow-sm);
}
.card__header {
  padding: var(--cl-space-4) var(--cl-space-5);
  border-bottom: var(--cl-border-width) solid var(--cl-border-color);
  display: flex; align-items: center; justify-content: space-between;
}
.card__title { font-size: var(--cl-fs-md); font-weight: var(--cl-fw-semibold); }
.card__body { padding: var(--cl-space-5); }

/* ============ KPI tiles ============ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--cl-space-4);
  margin-bottom: var(--cl-space-6);
}
.kpi-tile {
  background: var(--cl-white);
  border: var(--cl-border-width) solid var(--cl-border-color);
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-5);
  display: flex; flex-direction: column; gap: var(--cl-space-2);
  box-shadow: var(--cl-shadow-sm);
  border-left: 3px solid var(--cl-gray-200);
  transition: box-shadow var(--cl-transition-base), transform var(--cl-transition-base);
  cursor: pointer;
}
/* Survol subtil : jamais de bond marqué. */
.kpi-tile:hover { box-shadow: var(--cl-shadow-md); transform: translateY(-1px); }
.kpi-tile.is-active { border-left-color: var(--cl-primary-500); background: var(--cl-primary-050); }
.kpi-tile__label { font-size: var(--cl-fs-xs); color: var(--cl-gray-600); font-weight: var(--cl-fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-tile__value { font-size: var(--cl-fs-2xl); font-weight: var(--cl-fw-bold); color: var(--cl-gray-900); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-tile--nouveau { border-left-color: var(--sla-nouveau-fg); }
.kpi-tile--surveiller { border-left-color: var(--sla-surveiller-fg); }
.kpi-tile--retard { border-left-color: var(--sla-retard-fg); }
.kpi-tile--critique { border-left-color: var(--sla-critique-fg); }

/* ============ Badges SLA / statut ============ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--cl-radius-full);
  font-size: 11px; font-weight: var(--cl-fw-semibold);
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.badge-sla-nouveau { background: var(--sla-nouveau-bg); color: var(--sla-nouveau-fg); }
.badge-sla-surveiller { background: var(--sla-surveiller-bg); color: var(--sla-surveiller-fg); }
.badge-sla-retard { background: var(--sla-retard-bg); color: var(--sla-retard-fg); }
.badge-sla-critique { background: var(--sla-critique-bg); color: var(--sla-critique-fg); }
.badge-sla-traite { background: var(--sla-traite-bg); color: var(--sla-traite-fg); }

.badge-priority-haute { background: var(--cl-danger-100); color: var(--cl-danger-600); }
.badge-priority-moyenne { background: var(--cl-warning-100); color: var(--cl-warning-600); }
.badge-priority-basse { background: var(--cl-gray-100); color: var(--cl-gray-600); }
.badge-priority-faible { background: var(--cl-gray-100); color: var(--cl-gray-600); }
.badge-priority-critique { background: var(--cl-critical-100); color: var(--cl-critical-600); }
.badge-priority-a_examiner { background: var(--cl-warning-100); color: var(--cl-warning-600); }
.badge-priority-personnalisee { background: var(--cl-success-100); color: var(--cl-success-600); }

.badge-sentiment-positif { background: var(--cl-success-100); color: var(--cl-success-600); }
.badge-sentiment-neutre { background: var(--cl-gray-100); color: var(--cl-gray-600); }
.badge-sentiment-negatif { background: var(--cl-danger-100); color: var(--cl-danger-600); }

.badge-risk-faible { background: var(--cl-gray-100); color: var(--cl-gray-600); }
.badge-risk-moyen { background: var(--cl-warning-100); color: var(--cl-warning-600); }
.badge-risk-eleve { background: var(--cl-critical-100); color: var(--cl-critical-600); }

.badge-neutral { background: var(--cl-gray-100); color: var(--cl-gray-600); }
.badge-info { background: var(--cl-info-100); color: var(--cl-info-600); }

/* ============ Étiquettes par famille ============ */
/* Bordure subtile commune : donne du relief sans alourdir, et garantit une
   séparation visible même sur fond blanc. Le libellé texte est toujours
   présent — la couleur ne porte jamais l'information seule. */
.badge-status, .badge-langue, .badge-categorie { border: 1px solid rgba(16, 42, 67, 0.08); }

.badge-status-a_traiter { background: var(--tag-a-traiter-bg); color: var(--tag-a-traiter-fg); }
.badge-status-en_cours { background: var(--tag-en-cours-bg); color: var(--tag-en-cours-fg); }
.badge-status-traite { background: var(--tag-traite-bg); color: var(--tag-traite-fg); }
.badge-status-sans_action { background: var(--tag-sans-action-bg); color: var(--tag-sans-action-fg); }

.badge-langue-fr { background: var(--tag-langue-fr-bg); color: var(--tag-langue-fr-fg); }
.badge-langue-ar, .badge-langue-darija_ar, .badge-langue-darija_latin { background: var(--tag-langue-ar-bg); color: var(--tag-langue-ar-fg); }
.badge-langue-en { background: var(--tag-langue-en-bg); color: var(--tag-langue-en-fg); }
.badge-langue-mixte, .badge-langue-autre { background: var(--tag-langue-autre-bg); color: var(--tag-langue-autre-fg); }

.badge-categorie-rendez_vous { background: var(--tag-rdv-bg); color: var(--tag-rdv-fg); }
.badge-categorie-prix_et_tarifs, .badge-categorie-prix { background: var(--tag-prix-bg); color: var(--tag-prix-fg); }
.badge-categorie-medical_sensible, .badge-categorie-medical { background: var(--tag-medical-bg); color: var(--tag-medical-fg); }
.badge-categorie-relance { background: var(--tag-relance-bg); color: var(--tag-relance-fg); }
.badge-categorie-suivi_reclamation, .badge-categorie-suivi { background: var(--tag-suivi-bg); color: var(--tag-suivi-fg); }
.badge-categorie-localisation { background: var(--tag-localisation-bg); color: var(--tag-localisation-fg); }
.badge-categorie-horaires { background: var(--tag-horaires-bg); color: var(--tag-horaires-fg); }
.badge-categorie-verification_humaine { background: var(--tag-verification-bg); color: var(--tag-verification-fg); }

/* Priorité — pastel uniquement, jamais de rouge vif. */
.badge-priorite { border: 1px solid rgba(16, 42, 67, 0.08); }
.badge-priorite-haute { background: var(--cl-corail-050); color: var(--cl-corail-600); }
.badge-priorite-moyenne { background: var(--cl-ambre-050); color: var(--cl-ambre-600); }
.badge-priorite-basse, .badge-priorite-faible { background: var(--tag-sans-action-bg); color: var(--tag-sans-action-fg); }
/* Catégorie inconnue : neutre, jamais reclassée dans une famille colorée. */
.badge-categorie { background: var(--cl-gray-100); color: var(--cl-gray-700); }

/* ============ Badge de canal (quatre sources) ============ */
/* Icône + libellé texte toujours ensemble — jamais uniquement une couleur ou
   une icône seule (voir shared/channel-normalize.js). */
.badge-channel {
  background: var(--cl-gray-100); color: var(--cl-gray-700);
  gap: 5px;
}
/* Canal visible sans devenir l'élément dominant (voir Mission « Alignement
   des compteurs et allègement des couleurs ») : fond blanc/transparent,
   icône + texte colorés, jamais une grande bande rose ou bleue pleine. */
.badge-channel.channel-instagram_dm, .badge-channel.channel-instagram_comment {
  background: transparent; color: var(--cl-danger-700);
  border: 1px solid rgba(141, 53, 73, 0.22);
}
.badge-channel.channel-facebook_messenger, .badge-channel.channel-facebook_comment {
  background: transparent; color: var(--cl-bleu-doux-600);
  border: 1px solid rgba(58, 90, 149, 0.22);
}
.badge-channel.channel-unknown { background: var(--cl-gray-100); color: var(--cl-gray-500); font-style: italic; }
.badge-channel__comment-marker svg { width: 10px; height: 10px; }

/* Badge de source dans l'en-tête de la fiche Interaction. */
.page-header__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }

/* Historique de conversation : hauteur initiale limitée et défilement
   INTERNE, pour que la zone de réponse et les actions restent visibles sans
   devoir beaucoup descendre. */
.conversation-thread {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--cl-space-2);
  padding-right: 4px;
}

/* Auteur d'un message dans le fil de conversation : la distinction
   prospect / équipe Looxwell est portée par un libellé texte, jamais
   uniquement par la position ou la couleur de la bulle. */
.msg-bubble__author {
  font-size: 10px;
  font-weight: var(--cl-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-bottom: 3px;
}

/* ============ Table interactions ============ */
.table-wrap { overflow-x: auto; border-radius: var(--cl-radius-lg); border: var(--cl-border-width) solid var(--cl-border-color); background: var(--cl-white); }
.itable { width: 100%; border-collapse: collapse; min-width: 1100px; }
.itable thead th {
  text-align: left; font-size: var(--cl-fs-xs); text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--cl-gray-500); font-weight: var(--cl-fw-semibold);
  padding: var(--cl-space-3) var(--cl-space-4);
  border-bottom: var(--cl-border-width) solid var(--cl-border-color);
  background: var(--cl-gray-050);
  position: sticky; top: 0;
}
[dir="rtl"] .itable thead th { text-align: right; }
.itable tbody td {
  padding: var(--cl-space-2) var(--cl-space-4);
  border-bottom: var(--cl-border-width) solid var(--cl-border-color);
  font-size: var(--cl-fs-sm);
  vertical-align: middle;
}
.itable tbody tr { transition: background var(--cl-transition-fast); cursor: pointer; }
.itable tbody tr:hover { background: var(--cl-gray-050); }
.itable tbody tr:last-child td { border-bottom: none; }

/* Colonne "Dernier message" élargie, colonne État/SLA plus étroite —
   purement dimensionnel, aucune donnée supplémentaire affichée. */
.itable th:nth-child(3), .itable td:nth-child(3) { width: 320px; }
.itable th:nth-child(4), .itable td:nth-child(4) { width: 130px; }

/* ============ États sémantiques du Centre d'action ============ */
/* Fond de ligne toujours neutre/blanc — jamais de fond rouge foncé couvrant
   toute la ligne. Seule une fine bordure gauche colorée signale l'état,
   en complément du badge (icône + libellé + couleur), jamais la couleur
   seule (voir css/pages.css pour les badges eux-mêmes). */
.itable tbody tr.medical-sensitive { border-left: 3px solid var(--cl-danger-600); }
.itable tbody tr.medical-emergency { border-left: 4px solid var(--cl-danger-600); background: var(--cl-danger-050, #fff5f5); }
.itable tbody tr.call-now { border-left: 3px solid var(--cl-warning-600); }
.itable tbody tr.call-overdue { border-left: 3px solid var(--cl-danger-600); }

/* Léger surlignage temporaire des nouvelles interactions détectées par
   l'actualisation automatique (voir js/pages/centre-action.js) — s'estompe
   en douceur, jamais un clignotement. */
.itable tbody tr.itable__row--new { background: var(--cl-primary-050); transition: background 3s ease; }

.cell-name { font-weight: var(--cl-fw-semibold); color: var(--cl-gray-900); }
/* Aperçu du message sur 2 lignes maximum avec ellipse propre (uniquement
   dans la liste) — le texte complet reste affiché sans troncature sur la
   page de détail de l'interaction (js/pages/interaction.js, non modifiée). */
/* L'aperçu ne doit JAMAIS dominer la ligne : il vient en dernier dans la
   hiérarchie visuelle (nom > urgence > étiquettes > actions > aperçu).
   Une seule ligne sur desktop, deux au maximum sur petit écran. */
.cell-preview {
  color: var(--cl-gray-500);
  font-size: var(--cl-fs-xs);
  font-weight: var(--cl-fw-regular);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .cell-preview { -webkit-line-clamp: 2; }
}
.cell-time { color: var(--cl-gray-500); font-size: var(--cl-fs-xs); }

.row-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* WhatsApp est l'action de contact PRINCIPALE : légèrement mise en avant,
   les autres restent secondaires et discrètes. La distinction ne repose
   jamais sur la seule couleur (libellé accessible + infobulle). */
.row-actions .btn-whatsapp { box-shadow: var(--cl-shadow-sm); }
.row-actions .btn-ghost, .row-actions .btn-secondary { opacity: 0.9; }
.row-actions .btn-ghost:hover, .row-actions .btn-secondary:hover { opacity: 1; }

/* ============ Cellule État / Écoulé ============ */
/* Disposition : badge de statut centré en haut, chronomètre (le nombre
   seul, en grand) centré juste en dessous, libellé discret "Temps écoulé"
   sous le chronomètre. Le chronomètre n'est jamais imbriqué dans le badge. */
.state-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 120px; text-align: center; }
.state-cell__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }

.timer-block { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 1px; }

.elapsed-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  /* Largeur minimale stable : évite que la cellule se redimensionne à
     chaque seconde lorsque le nombre de chiffres change (ex: 9:59 -> 10:00
     ou passage à HH:MM:SS). */
  min-width: 5.5ch;
  color: var(--cl-gray-800);
  font-size: 20px;
}
@media (min-width: 641px) { .elapsed-timer { font-size: 22px; } }
@media (min-width: 1024px) { .elapsed-timer { font-size: 24px; } }

.elapsed-timer.timer-stopped { color: var(--cl-gray-400); font-weight: 600; }

/* Couleurs du chronomètre alignées sur le badge SLA/callNow actif — jamais
   un fond de carte rouge foncé, uniquement la couleur du texte. */
.elapsed-timer.sla-new { color: var(--cl-success-600); }
.elapsed-timer.sla-watch { color: var(--cl-warning-600); }
.elapsed-timer.sla-late { color: var(--cl-danger-600); }
.elapsed-timer.sla-critical { color: var(--cl-danger-700, var(--cl-danger-600)); }
.elapsed-timer.call-now { color: var(--cl-warning-600); }
.elapsed-timer.call-overdue { color: var(--cl-danger-600); }

.elapsed-timer__caption {
  font-size: 10px;
  color: var(--cl-gray-500);
  font-weight: var(--cl-fw-medium);
  letter-spacing: 0.01em;
  margin-top: 0;
}
@media (min-width: 641px) { .elapsed-timer__caption { font-size: 11px; } }

.badge.sla-new { background: var(--cl-success-100); color: var(--cl-success-600); }
.badge.sla-watch { background: var(--cl-warning-100); color: var(--cl-warning-600); border: 1px solid var(--cl-warning-600); }
.badge.sla-late { background: var(--cl-danger-100); color: var(--cl-danger-600); border: 1px solid var(--cl-danger-600); }
.badge.sla-critical { background: var(--cl-danger-100); color: var(--cl-danger-600); border: 1px solid var(--cl-danger-600); font-weight: var(--cl-fw-bold); }
/* Aucune animation clignotante n'est utilisée pour "critique" — la
   distinction se fait par la bordure renforcée et l'icône d'alerte. */

.badge.medical-sensitive { background: var(--cl-white); color: var(--cl-danger-600); border: 1px solid var(--cl-danger-600); }
.badge.medical-emergency { background: var(--cl-danger-100); color: var(--cl-danger-600); border: 1px solid var(--cl-danger-600); font-weight: var(--cl-fw-bold); }

.badge.call-now { background: var(--cl-warning-100); color: var(--cl-warning-600); border: 1px solid var(--cl-warning-600); }
.badge.call-overdue { background: var(--cl-danger-100); color: var(--cl-danger-600); border: 1px solid var(--cl-danger-600); }

/* ============ Filters bar ============ */
.filters-bar {
  display: flex; flex-wrap: wrap; gap: var(--cl-space-3);
  padding: var(--cl-space-4);
  background: var(--cl-white);
  border: var(--cl-border-width) solid var(--cl-border-color);
  border-radius: var(--cl-radius-lg);
  margin-bottom: var(--cl-space-4);
  align-items: center;
}
.filters-bar select, .filters-bar input[type="text"], .filters-bar input[type="search"], .filters-bar input[type="date"] {
  border: var(--cl-border-width) solid var(--cl-gray-300);
  border-radius: var(--cl-radius-sm);
  padding: 8px 12px;
  font-size: var(--cl-fs-sm);
  background: var(--cl-white);
  color: var(--cl-gray-800);
  min-width: 140px;
}
.filters-bar input[type="text"], .filters-bar input[type="search"] { min-width: 220px; }
.filters-bar select:focus, .filters-bar input:focus { outline: none; box-shadow: var(--cl-shadow-focus); border-color: var(--cl-primary-500); }
.filters-bar__reset { margin-left: auto; }
[dir="rtl"] .filters-bar__reset { margin-left: 0; margin-right: auto; }

/* ============ Pagination ============ */
.pagination-bar {
  display: flex; align-items: center; gap: var(--cl-space-3);
  padding: var(--cl-space-3) var(--cl-space-1);
  flex-wrap: wrap;
}
.pagination-bar select {
  border: var(--cl-border-width) solid var(--cl-gray-300);
  border-radius: var(--cl-radius-sm);
  padding: 6px 10px;
  font-size: var(--cl-fs-sm);
}
.pagination-bar > span { margin-right: auto; }
[dir="rtl"] .pagination-bar > span { margin-right: 0; margin-left: auto; }

/* ============ Forms ============ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--cl-space-4); }
.field label { font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-semibold); color: var(--cl-gray-600); text-transform: uppercase; letter-spacing: 0.02em; }
.field select, .field input, .field textarea {
  border: var(--cl-border-width) solid var(--cl-gray-300);
  border-radius: var(--cl-radius-sm);
  padding: 10px 12px;
  font-size: var(--cl-fs-base);
  font-family: inherit;
}
.field textarea { resize: vertical; min-height: 80px; }

/* ============ Modal ============ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--cl-z-modal);
  padding: var(--cl-space-4);
  animation: cl-fade-in var(--cl-transition-base);
}
.modal {
  background: var(--cl-white);
  border-radius: var(--cl-radius-lg);
  width: 100%; max-width: 480px;
  box-shadow: var(--cl-shadow-lg);
  max-height: 90vh; overflow-y: auto;
}
.modal__header { padding: var(--cl-space-5); border-bottom: 1px solid var(--cl-border-color); display: flex; justify-content: space-between; align-items: center; }
.modal__body { padding: var(--cl-space-5); }
.modal__footer { padding: var(--cl-space-4) var(--cl-space-5); border-top: 1px solid var(--cl-border-color); display: flex; justify-content: flex-end; gap: var(--cl-space-3); }
.modal--danger .modal__header { color: var(--cl-danger-600); }

/* ============ Saisie manuelle du numéro WhatsApp ============ */
/* Le numéro saisi ici ne quitte jamais cette modale : aucun enregistrement
   GHL, aucun localStorage, aucun journal (voir js/whatsapp-action.js). */
.phone-prompt { max-width: 420px; }
.phone-prompt__row { display: flex; gap: var(--cl-space-2); }
.phone-prompt__code { width: 86px; flex-shrink: 0; text-align: center; }
.phone-prompt__number { flex: 1; min-width: 0; }
.phone-prompt__error {
  font-size: var(--cl-fs-xs);
  color: var(--cl-danger-600);
  font-weight: var(--cl-fw-semibold);
}

/* ============ Toast ============ */
.toast-stack { position: fixed; bottom: var(--cl-space-5); right: var(--cl-space-5); z-index: var(--cl-z-toast); display: flex; flex-direction: column; gap: var(--cl-space-2); }
[dir="rtl"] .toast-stack { right: auto; left: var(--cl-space-5); }
.toast {
  background: var(--cl-gray-900); color: var(--cl-white);
  padding: 12px 16px; border-radius: var(--cl-radius-md);
  font-size: var(--cl-fs-sm); box-shadow: var(--cl-shadow-lg);
  min-width: 260px; animation: cl-fade-in var(--cl-transition-base);
  display: flex; align-items: center; gap: var(--cl-space-2);
}
.toast.success { background: var(--cl-success-600); }
.toast.error { background: var(--cl-danger-600); }
.toast.warning { background: var(--cl-warning-600); }

/* ============ Skeletons ============ */
.skeleton { background: var(--cl-gray-200); border-radius: var(--cl-radius-sm); animation: cl-skeleton-pulse 1.4s ease-in-out infinite; }
.skeleton-row { height: 44px; margin-bottom: var(--cl-space-2); border-radius: var(--cl-radius-md); }
.skeleton-tile { height: 92px; border-radius: var(--cl-radius-lg); }

/* ============ Empty / error states ============ */
.state-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--cl-space-12) var(--cl-space-6);
  color: var(--cl-gray-500);
}
.state-panel__icon { display: flex; justify-content: center; margin-bottom: var(--cl-space-3); }
.state-panel__title { font-size: var(--cl-fs-md); font-weight: var(--cl-fw-semibold); color: var(--cl-gray-700); margin-bottom: var(--cl-space-1); }
.state-panel__desc { font-size: var(--cl-fs-sm); max-width: 420px; }

/* État d'erreur compact — occupe uniquement la zone concernée, jamais un
   grand bloc vide (voir Mission « Finition premium des listes »). */
.state-panel--error { padding: var(--cl-space-6) var(--cl-space-4); }
.state-panel--error .state-panel__icon { color: var(--cl-corail-600); margin-bottom: var(--cl-space-2); }
.state-panel--error .btn { margin-top: var(--cl-space-2); }

.banner {
  display: flex; align-items: center; gap: var(--cl-space-3);
  padding: var(--cl-space-3) var(--cl-space-4);
  border-radius: var(--cl-radius-md);
  font-size: var(--cl-fs-sm);
  margin-bottom: var(--cl-space-4);
}
.banner-danger { background: var(--cl-danger-100); color: var(--cl-danger-600); border: 1px solid var(--cl-critical-600); font-weight: var(--cl-fw-semibold); }
.banner-warning { background: var(--cl-warning-100); color: var(--cl-warning-600); }
.banner-info { background: var(--cl-info-100); color: var(--cl-info-600); }
.historical-banner { margin: var(--cl-space-4) var(--cl-space-6) 0; }
@media (max-width: 640px) { .historical-banner { margin: var(--cl-space-3); } }
.banner-success { background: var(--cl-success-100); color: var(--cl-success-600); }

/* ============ Tabs ============ */
.tabs { display: flex; gap: var(--cl-space-2); border-bottom: 1px solid var(--cl-border-color); margin-bottom: var(--cl-space-5); }
.tab { padding: var(--cl-space-3) var(--cl-space-4); font-size: var(--cl-fs-sm); font-weight: var(--cl-fw-medium); color: var(--cl-gray-500); border-bottom: 2px solid transparent; cursor: pointer; }
.tab.is-active { color: var(--cl-primary-500); border-bottom-color: var(--cl-primary-500); }

/* ============ Tooltip ============ */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
  background: var(--cl-gray-900); color: var(--cl-white);
  padding: 6px 10px; border-radius: var(--cl-radius-sm);
  font-size: var(--cl-fs-xs); white-space: nowrap; z-index: var(--cl-z-dropdown);
  box-shadow: var(--cl-shadow-md);
}

/* ============ Login ============ */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cl-primary-900), var(--cl-primary-600)); padding: var(--cl-space-4); }
.login-card { background: var(--cl-white); border-radius: var(--cl-radius-lg); box-shadow: var(--cl-shadow-lg); padding: var(--cl-space-8); width: 100%; max-width: 420px; }
.login-card__logo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cl-space-2); margin-bottom: var(--cl-space-5); }
.login-card__logo-img { height: 64px; width: auto; max-width: 100%; object-fit: contain; display: block; }

.login-card__looxwell-zone {
  display: flex;
  align-items: center;
  gap: var(--cl-space-3);
  padding: var(--cl-space-3) var(--cl-space-4);
  border: 1px solid var(--cl-border-color);
  border-radius: var(--cl-radius-md);
  background: var(--cl-gray-050);
  margin-bottom: var(--cl-space-5);
}
.login-card__looxwell-logo { height: 40px; width: auto; max-width: 90px; object-fit: contain; display: block; flex-shrink: 0; }
.login-card__looxwell-label { font-size: var(--cl-fs-sm); font-weight: var(--cl-fw-medium); color: var(--cl-gray-700); }

/* ============ Progress funnel ============ */
.funnel { display: flex; flex-wrap: wrap; gap: var(--cl-space-3); }
.funnel__step { flex: 1; min-width: 140px; background: var(--cl-primary-050); border-radius: var(--cl-radius-md); padding: var(--cl-space-4); text-align: center; }
.funnel__step-value { font-size: var(--cl-fs-xl); font-weight: var(--cl-fw-bold); color: var(--cl-primary-600); }
.funnel__step-label { font-size: var(--cl-fs-xs); color: var(--cl-gray-600); margin-top: 4px; }

/* ============ Medical banner ============ */
.medical-alert {
  background: var(--cl-critical-100); border: 1px solid var(--cl-critical-600);
  color: var(--cl-critical-600); border-radius: var(--cl-radius-md);
  padding: var(--cl-space-3) var(--cl-space-4); font-weight: var(--cl-fw-semibold);
  display: flex; align-items: center; gap: var(--cl-space-2);
  margin-bottom: var(--cl-space-4);
}

/* ============================================================
   Centre d'action — composition (bandeau, KPI, bande SLA, filtres)
   ============================================================ */

/* --- Bandeau d'urgence : blanc, accent corail, jamais de grand aplat rouge. */
.urgency-banner {
  display: flex; align-items: center; gap: var(--cl-space-4);
  background: var(--cl-white);
  border: 1px solid var(--cl-border-color);
  border-left: 4px solid var(--cl-corail);
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-4) var(--cl-space-5);
  margin-bottom: var(--cl-space-4);
  box-shadow: var(--cl-shadow-sm);
}
.urgency-banner__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--cl-radius-md);
  background: var(--cl-corail-050);
  color: var(--cl-corail-600);
}
.urgency-banner__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.urgency-banner__title { font-size: var(--cl-fs-md); font-weight: var(--cl-fw-semibold); color: var(--cl-gray-900); }
.urgency-banner__subtitle { font-size: var(--cl-fs-sm); color: var(--cl-gray-600); }
.btn-urgent { background: var(--cl-corail); color: var(--cl-white); flex-shrink: 0; }
.btn-urgent:hover { background: var(--cl-corail-600); }

/* --- Quatre KPI avec hiérarchie (le premier domine). --- */
.kpi-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: var(--cl-space-4);
  margin-bottom: var(--cl-space-3);
}
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kpi-row { grid-template-columns: 1fr; } }

.kpi-card {
  background: var(--cl-white);
  border: 1px solid var(--cl-border-color);
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-5);
  display: flex; flex-direction: column; gap: var(--cl-space-2);
  box-shadow: var(--cl-shadow-sm);
  transition: box-shadow var(--cl-transition-base), border-color var(--cl-transition-fast);
}
.kpi-card--clickable { cursor: pointer; }
.kpi-card--clickable:hover { box-shadow: var(--cl-shadow-md); }
.kpi-card__label {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--cl-fs-sm); font-weight: var(--cl-fw-medium); color: var(--cl-gray-600);
}
.kpi-card__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cl-gray-400); flex-shrink: 0; }
.kpi-card__value {
  font-size: 2.25rem; font-weight: var(--cl-fw-bold); line-height: 1.05;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--cl-gray-900);
}
.kpi-card--primary .kpi-card__value { font-size: 3rem; }
.kpi-card__empty { font-size: var(--cl-fs-md); font-weight: var(--cl-fw-semibold); color: var(--cl-gray-400); }
.kpi-card__note { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); }
.kpi-card__detail { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); }
.kpi-card--unavailable { background: var(--cl-surface-muted); }

/* Un accent coloré par KPI — teinte douce, surface majoritairement blanche.
   La carte principale « À traiter » (voir Mission « Alignement des
   compteurs ») garde un fond blanc/crème très clair : plus de grand aplat
   rose saturé, seulement une fine bordure supérieure corail et un petit
   point corail — le nombre reste en bleu marine pour un contraste net. */
.kpi-card--corail { background: var(--cl-surface-card); border-color: var(--cl-border-color); border-top: 3px solid var(--cl-corail); }
.kpi-card--corail .kpi-card__dot { background: var(--cl-corail); }
.kpi-card--corail .kpi-card__value { color: var(--cl-primary-800); }
.kpi-card--ambre .kpi-card__dot { background: var(--cl-ambre); }
.kpi-card--ambre .kpi-card__value { color: var(--cl-ambre-600); }
.kpi-card--turquoise .kpi-card__dot { background: var(--cl-turquoise); }
.kpi-card--turquoise .kpi-card__value { color: var(--cl-turquoise-600); }
.kpi-card--bleu .kpi-card__dot { background: var(--cl-bleu-doux); }
.kpi-card--bleu .kpi-card__value { color: var(--cl-primary-800); }
.kpi-card.is-active { border-color: var(--cl-primary-500); box-shadow: var(--cl-shadow-md); }

/* --- Bande SLA compacte : une ligne, pas quatre cartes. --- */
.sla-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--cl-space-3); margin-bottom: var(--cl-space-4);
}
@media (max-width: 900px) { .sla-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sla-band { grid-template-columns: 1fr; } }

.sla-chip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cl-space-2);
  background: var(--cl-white);
  border: 1px solid var(--cl-border-color);
  border-radius: var(--cl-radius-md);
  padding: 10px var(--cl-space-4);
  cursor: pointer;
  transition: border-color var(--cl-transition-fast), box-shadow var(--cl-transition-fast);
}
.sla-chip:hover { box-shadow: var(--cl-shadow-sm); }
.sla-chip.is-active { border-color: var(--cl-primary-500); box-shadow: var(--cl-shadow-sm); }
.sla-chip__label {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--cl-fs-sm); color: var(--cl-gray-600); min-width: 0;
}
.sla-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sla-chip__value { font-size: var(--cl-fs-lg); font-weight: var(--cl-fw-bold); font-variant-numeric: tabular-nums; color: var(--cl-gray-900); }
.sla-chip--critique .sla-chip__dot { background: var(--cl-corail); }
.sla-chip--en_retard .sla-chip__dot { background: var(--cl-ambre); }
.sla-chip--a_surveiller .sla-chip__dot { background: #c9a227; }
.sla-chip--nouveau .sla-chip__dot { background: var(--cl-bleu-doux); }
/* Un niveau à zéro s'efface visuellement sans disparaître. */
.sla-chip.is-empty { background: var(--cl-surface-muted); }
.sla-chip.is-empty .sla-chip__label, .sla-chip.is-empty .sla-chip__value { color: var(--cl-gray-400); }
.sla-chip.is-empty .sla-chip__dot { background: var(--cl-gray-300); }

/* --- Filtres : une ligne principale + panneau avancé repliable. --- */
.filters-bar { flex-direction: column; align-items: stretch; gap: var(--cl-space-3); }
.filters-bar__main { display: flex; flex-wrap: wrap; gap: var(--cl-space-3); align-items: center; }
.filters-bar__search { flex: 1 1 260px; min-width: 200px; }
.filters-bar__search input { width: 100%; }
.filters-advanced {
  display: flex; flex-wrap: wrap; gap: var(--cl-space-3);
  padding-top: var(--cl-space-3);
  border-top: 1px solid var(--cl-border-color);
}
.filters-advanced[hidden] { display: none; }

/* ============================================================
   Liste compacte des demandes en attente
   ============================================================
   Remplace le tableau à dix colonnes : une ligne = une demande,
   lisible d'un coup d'œil, sans défilement horizontal de page.
   L'aperçu du message est volontairement court — le texte intégral
   reste disponible sur la fiche Interaction. */
.ilist { display: flex; flex-direction: column; gap: var(--cl-space-2); }

.ilist__row {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(0, 2fr) auto auto;
  align-items: center;
  gap: var(--cl-space-4);
  background: var(--cl-white);
  border: 1px solid var(--cl-border-color);
  border-left: 3px solid transparent;
  border-radius: var(--cl-radius-lg);
  padding: var(--cl-space-3) var(--cl-space-4);
  cursor: pointer;
  transition: box-shadow var(--cl-transition-fast), border-color var(--cl-transition-fast);
}
.ilist__row:hover { box-shadow: var(--cl-shadow-sm); }
.ilist__row:focus-visible { box-shadow: var(--cl-shadow-focus); }

/* Accent gauche par niveau d'urgence UNIQUEMENT — toujours accompagné du
   badge et du chronomètre, jamais toute la ligne teintée (voir Mission
   « Alignement des compteurs et allègement des couleurs ») : fond blanc
   conservé, fine bordure gauche colorée par palier SLA. */
.ilist__row.sla-critical, .ilist__row.call-overdue { border-left-color: var(--cl-corail); }
.ilist__row.sla-late { border-left-color: var(--cl-ambre); }
.ilist__row.sla-watch { border-left-color: #c9a227; }
.ilist__row.sla-new { border-left-color: var(--cl-turquoise); }
.ilist__row.medical-emergency, .ilist__row.medical-sensitive { border-left-color: var(--cl-danger-600); }
/* Surlignage temporaire d'une nouvelle interaction détectée. */
.ilist__row--new { background: var(--cl-turquoise-050); border-color: var(--cl-turquoise); }

.ilist__identity { display: flex; align-items: center; gap: var(--cl-space-3); min-width: 0; }
.ilist__avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--cl-radius-md);
  background: var(--cl-primary-050); color: var(--cl-primary-700);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-bold);
}
.ilist__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ilist__name {
  font-weight: var(--cl-fw-semibold); color: var(--cl-gray-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ilist__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* Aperçu : une seule ligne, petit, secondaire — jamais dominant. */
.ilist__preview {
  font-size: var(--cl-fs-sm);
  color: var(--cl-gray-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ilist__tags { display: flex; flex-wrap: wrap; gap: 5px; }

.ilist__state { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.ilist__timer {
  font-size: var(--cl-fs-md);
  font-weight: var(--cl-fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--cl-gray-800);
}
.ilist__timer.sla-new { color: var(--cl-turquoise-600); }
.ilist__timer.sla-watch { color: #8a6d10; }
.ilist__timer.sla-late { color: var(--cl-ambre-600); }
.ilist__timer.sla-critical { color: var(--cl-corail-600); }
.ilist__timer.call-now { color: var(--cl-ambre-600); }
.ilist__timer.call-overdue { color: var(--cl-corail-600); }
.ilist__timer.timer-stopped { color: var(--cl-gray-400); font-weight: var(--cl-fw-semibold); }

.ilist__row .row-actions { flex-shrink: 0; flex-wrap: nowrap; }

/* --- Tablette : l'état passe sous le contenu, la ligne reste compacte. --- */
@media (max-width: 1024px) {
  .ilist__row { grid-template-columns: minmax(160px, 1fr) minmax(0, 1.6fr) auto; }
  .ilist__row .row-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* --- Mobile : empilement propre, aucun débordement horizontal. --- */
@media (max-width: 640px) {
  .ilist__row { grid-template-columns: 1fr auto; gap: var(--cl-space-2) var(--cl-space-3); }
  .ilist__identity { grid-column: 1; }
  .ilist__state { grid-column: 2; align-items: flex-end; }
  .ilist__body { grid-column: 1 / -1; }
  /* Deux lignes maximum d'aperçu sur petit écran. */
  .ilist__preview {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .ilist__row .row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ============================================================
   Finition premium — accents discrets, jamais décoratifs
   ============================================================ */

/* Filet coloré en haut des cartes KPI : signe la hiérarchie sans ajouter
   d'aplat coloré ni de dégradé lourd. */
.kpi-card { position: relative; overflow: hidden; }
.kpi-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--cl-gray-300);
}
.kpi-card--corail::before { background: var(--cl-corail); }
.kpi-card--ambre::before { background: var(--cl-ambre); }
.kpi-card--turquoise::before { background: var(--cl-turquoise); }
.kpi-card--bleu::before { background: var(--cl-bleu-doux); }
.kpi-card--unavailable::before { background: var(--cl-gray-300); }

/* Le chiffre principal respire davantage. */
.kpi-card--primary { justify-content: center; }

/* La barre latérale gagne un liseré chaud, rappel discret de la marque. */
.sidebar { box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06); }
.sidebar__link.is-active {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 3px 0 0 var(--cl-turquoise);
}

/* En-tête de la liste : titre + compteur, aligné sur la maquette. */
.ilist-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--cl-space-4); margin-bottom: var(--cl-space-3);
}
.ilist-header__title { font-size: var(--cl-fs-md); font-weight: var(--cl-fw-semibold); color: var(--cl-gray-900); }
.ilist-header__hint { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); }

/* Avatar : teinte dérivée du niveau d'urgence de la ligne. */
.ilist__row.sla-critical .ilist__avatar { background: var(--cl-corail-050); color: var(--cl-corail-600); }
.ilist__row.sla-late .ilist__avatar { background: var(--cl-ambre-050); color: var(--cl-ambre-600); }
.ilist__row.sla-new .ilist__avatar { background: var(--cl-turquoise-050); color: var(--cl-turquoise-600); }

/* Boutons d'action de la liste : ronds, discrets, WhatsApp en vert d'eau. */
.ilist__row .row-actions .btn-icon {
  border-radius: var(--cl-radius-md);
  border: 1px solid var(--cl-border-color);
  background: var(--cl-white);
  color: var(--cl-gray-600);
}
.ilist__row .row-actions .btn-icon:hover { background: var(--cl-surface-muted); color: var(--cl-gray-800); }
.ilist__row .row-actions .btn-whatsapp {
  background: var(--cl-turquoise-050);
  border-color: #bfe3da;
  color: var(--cl-turquoise-600);
}
.ilist__row .row-actions .btn-whatsapp:hover { background: #d5efe9; }
.ilist__row .row-actions .btn-primary {
  background: var(--cl-primary-800); border-color: var(--cl-primary-800); color: var(--cl-white);
}
.ilist__row .row-actions .btn-primary:hover { background: var(--cl-primary-700); }

/* Pagination : le sélecteur de lignes devient un vrai contrôle lisible. */
.pagination-bar select {
  border-radius: var(--cl-radius-md);
  border-color: var(--cl-border-color);
  background: var(--cl-white);
  font-weight: var(--cl-fw-medium);
}

/* ============================================================
   Messages privés — interface maître-détail
   ============================================================ */
.md-layout {
  display: grid;
  /* Colonne gauche ~34-38 %, panneau droit ~62-66 % (voir Mission
     « Ergonomie opérationnelle »), avec un plancher lisible sur petit écran. */
  grid-template-columns: minmax(300px, 36%) minmax(0, 1fr);
  gap: var(--cl-space-4);
  align-items: start;
}
/* Bouton retour mobile — masqué sur desktop, affiché uniquement dans le
   panneau droit en dessous du point de rupture (voir media query mobile). */
.md-detail__back { display: none; }

.md-list {
  background: transparent;
  border: none;
}
.md-list__header {
  padding: 2px var(--cl-space-2) var(--cl-space-2);
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-semibold);
  color: var(--cl-gray-600); text-transform: uppercase; letter-spacing: 0.04em;
}
.md-list__items {
  max-height: 70vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--cl-space-2);
  padding: 2px; /* laisse respirer l'ombre des cartes sans la rogner */
}

/* Carte premium — chaque conversation est visuellement indépendante (voir
   Mission « Finition premium des listes ») : jamais un simple séparateur
   horizontal comme unique délimitation entre deux conversations. */
.md-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--cl-space-3) var(--cl-space-4);
  background: var(--cl-surface-card);
  border: 1px solid var(--cl-border-color);
  border-left: 3px solid transparent;
  border-radius: var(--cl-radius-lg);
  box-shadow: var(--cl-shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--cl-transition-fast), border-color var(--cl-transition-fast);
}
.md-item:hover { box-shadow: var(--cl-shadow-md); }
.md-item:focus-visible { box-shadow: var(--cl-shadow-focus); }
/* Sélection claire, sans couleur agressive : léger fond teinté + accent
   gauche renforcé, jamais un aplat saturé. */
.md-item.is-selected { background: var(--cl-primary-050); border-color: var(--cl-primary-100); border-left-color: var(--cl-primary-600); box-shadow: var(--cl-shadow-md); }
.md-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cl-space-2); }
.md-item__name { font-weight: var(--cl-fw-semibold); color: var(--cl-gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-item__time { font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-semibold); color: var(--cl-gray-600); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.md-item__preview {
  font-size: var(--cl-fs-xs); color: var(--cl-gray-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.md-item__tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* Panneau droit : tient dans la hauteur disponible de l'écran (voir
   Mission « Ergonomie opérationnelle », section 4) — en-tête compact fixe,
   historique flexible/scrollable, composer et actions toujours accessibles
   sans avoir à descendre au bas d'une très grande carte. */
.md-detail {
  background: var(--cl-white);
  border: 1px solid var(--cl-border-color);
  border-radius: var(--cl-radius-lg);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 160px);
  position: sticky;
  top: var(--cl-space-4);
  overflow: hidden;
}
.md-detail__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--cl-space-3);
  padding: var(--cl-space-3) var(--cl-space-4);
  border-bottom: 1px solid var(--cl-border-color);
  flex: 0 0 auto;
}
.md-detail__who { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.md-detail__name { font-size: var(--cl-fs-md); font-weight: var(--cl-fw-semibold); color: var(--cl-gray-900); }
.md-detail__badges { display: flex; flex-wrap: wrap; gap: 5px; }
/* Historique : SEULE zone qui défile dans le panneau — jamais toute la page. */
.md-detail .conversation-thread { padding: var(--cl-space-4); flex: 1 1 auto; overflow-y: auto; min-height: 120px; max-height: none; }
.md-detail .activity-log { flex: 0 0 auto; margin: 0 var(--cl-space-4); }

.md-unresolved {
  display: flex; flex-direction: column; gap: var(--cl-space-2); align-items: flex-start;
  background: var(--cl-surface-muted);
  border-radius: var(--cl-radius-md);
  padding: var(--cl-space-4);
}

/* --- Zone de réponse : compacte, sous l'historique, toujours visible
   (flex:0 0 auto, jamais dans la zone qui défile). --- */
.md-reply {
  display: flex; flex-direction: column; gap: var(--cl-space-3);
  padding: var(--cl-space-4);
  border-top: 1px solid var(--cl-border-color);
  background: var(--cl-surface-page);
  border-radius: 0 0 var(--cl-radius-lg) var(--cl-radius-lg);
  flex: 0 0 auto;
}
.md-reply__head { display: flex; align-items: center; gap: var(--cl-space-2); }
.md-reply__textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--cl-gray-300);
  border-radius: var(--cl-radius-md);
  padding: 10px 12px;
  font-family: inherit; font-size: var(--cl-fs-sm);
  resize: vertical; min-height: 84px;
  background: var(--cl-white);
}
.md-reply__textarea:focus { outline: none; box-shadow: var(--cl-shadow-focus); border-color: var(--cl-primary-500); }
/* Bouton principal (Tester sans envoyer / futur Envoyer sur Instagram-Facebook)
   EN BAS À GAUCHE — jamais à droite (voir Mission « Ergonomie opérationnelle »). */
.md-reply__foot { display: flex; align-items: center; gap: var(--cl-space-3); flex-wrap: wrap; }
.md-reply__counter { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); font-variant-numeric: tabular-nums; margin-left: auto; }
.md-reply__actions { display: flex; flex-wrap: wrap; gap: var(--cl-space-2); }
.md-reply--disabled { gap: var(--cl-space-3); }

/* --- Tablette / mobile : bascule liste / détail dans le même module,
   jamais une page dédiée (voir Mission « Ergonomie opérationnelle »,
   section 9). --- */
@media (max-width: 900px) {
  .md-layout { grid-template-columns: 1fr; }
  .md-list__items { max-height: calc(100vh - 320px); }
  .md-detail { position: static; max-height: none; }
  .md-detail .conversation-thread { max-height: 50vh; }
  .md-detail__back { display: inline-flex; }

  /* Par défaut sur mobile : seule la liste est visible. Dès qu'une
     conversation est sélectionnée, .md-layout--detail-active bascule
     l'affichage vers le panneau droit uniquement (avec bouton retour). */
  .md-layout:not(.md-layout--detail-active) .md-detail { display: none; }
  .md-layout--detail-active .md-list { display: none; }
}

/* CTA « Traiter » : action principale de routage vers la page dédiée. */
.btn-treat { background: var(--cl-primary-800); color: var(--cl-white); }
.btn-treat:hover { background: var(--cl-primary-700); }
.ilist__row .row-actions .btn-treat { flex-shrink: 0; }

/* Commentaire ciblé depuis le Centre d'action. */
.card.is-targeted { border-color: var(--cl-primary-500); box-shadow: var(--cl-shadow-md); }

/* Note discrète accompagnant un CTA principal désactivé (ex : réponse au
   commentaire non encore reliée). */
.actions-row__note { font-size: var(--cl-fs-xs); color: var(--cl-gray-500); align-self: center; }
@media (max-width: 640px) {
  /* L'ordre des CTA est conservé sur mobile : « Répondre » reste en tête. */
  .actions-row { flex-wrap: wrap; }
}

/* =============================================================================
   Statut manuel segmenté — [À traiter] [En cours] [Traité]
   Couleurs pastel imposées, jamais foncées : rose très clair, jaune pastel,
   vert pastel. La sélection active reste visible sans jamais dépendre de la
   couleur seule (fond + texte + libellé toujours présents).
   ============================================================================= */
.status-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--cl-surface-muted);
  border: var(--cl-border-width) solid var(--cl-border-color);
  border-radius: var(--cl-radius-full);
}
.status-segmented__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--cl-gray-600);
  font-size: var(--cl-fs-xs);
  font-weight: var(--cl-fw-medium);
  padding: 6px 12px;
  border-radius: var(--cl-radius-full);
  cursor: pointer;
  transition: background var(--cl-transition-fast), color var(--cl-transition-fast);
}
.status-segmented__btn:hover { background: var(--cl-white); }
.status-segmented__btn.is-active.status-segmented__btn--a-traiter {
  background: var(--tag-a-traiter-bg); color: var(--tag-a-traiter-fg);
}
.status-segmented__btn.is-active.status-segmented__btn--en-cours {
  background: var(--cl-ambre-050); color: var(--cl-ambre-600);
}
.status-segmented__btn.is-active.status-segmented__btn--traite {
  background: var(--tag-traite-bg); color: var(--tag-traite-fg);
}

/* =============================================================================
   Bloc WhatsApp — numéro complet + deux actions distinctes.
   ============================================================================= */
.wa-block { display: flex; flex-direction: column; gap: var(--cl-space-2); }
.wa-block__number {
  display: flex; align-items: center; gap: var(--cl-space-2);
  font-size: var(--cl-fs-xs); color: var(--cl-gray-600);
}
.wa-block__actions { display: flex; flex-wrap: wrap; gap: var(--cl-space-2); }

/* =============================================================================
   Filtres compacts — page Commentaires. Une ligne de recherche, une ligne de
   filtres rapides (38-44px de hauteur), panneau avancé repliable.
   ============================================================================= */
.compact-filters {
  display: flex; flex-direction: column; gap: var(--cl-space-2);
  margin-bottom: var(--cl-space-4);
}
.compact-filters__search { display: flex; gap: var(--cl-space-2); }
.compact-filters__search-input {
  flex: 1; height: 40px; padding: 0 var(--cl-space-3);
  border: var(--cl-border-width) solid var(--cl-border-color);
  border-radius: var(--cl-radius-md); font-size: var(--cl-fs-sm);
}
.compact-filters__mobile-toggle { display: none; }
.compact-filters__row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--cl-space-2);
  min-height: 38px;
}
.compact-filters__chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 var(--cl-space-3);
  border: var(--cl-border-width) solid var(--cl-border-color);
  border-radius: var(--cl-radius-full);
  background: var(--cl-surface-card);
  color: var(--cl-gray-600);
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-medium);
  cursor: pointer;
  transition: background var(--cl-transition-fast), color var(--cl-transition-fast);
}
.compact-filters__chip:hover { background: var(--cl-surface-muted); }
.compact-filters__chip.is-active {
  background: var(--cl-primary-100); color: var(--cl-primary-700);
  border-color: var(--cl-primary-100);
}
.compact-filters__select {
  height: 38px; padding: 0 var(--cl-space-2);
  border: var(--cl-border-width) solid var(--cl-border-color);
  border-radius: var(--cl-radius-md);
  font-size: var(--cl-fs-xs); color: var(--cl-gray-700);
  background: var(--cl-surface-card);
}
.compact-filters__count {
  margin-left: auto; font-size: var(--cl-fs-xs); color: var(--cl-gray-500);
  white-space: nowrap;
}
.compact-filters__panel {
  display: flex; flex-wrap: wrap; gap: var(--cl-space-2);
  padding: var(--cl-space-3);
  background: var(--cl-surface-muted);
  border-radius: var(--cl-radius-md);
}

@media (max-width: 720px) {
  .compact-filters__mobile-toggle { display: inline-flex; }
  .compact-filters__row > select,
  .compact-filters__row .compact-filters__count { display: none; }
  .compact-filters__row { min-height: 0; }
}

/* =============================================================================
   Pastille discrète « X à traiter » — reflète le statut EFFECTIF (dérogation
   locale incluse) en tête de page. Jamais un bandeau proéminent : petite,
   pastel, alignée avec le titre.
   ============================================================================= */
.pending-count-pill {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 var(--cl-space-3);
  border-radius: var(--cl-radius-full);
  background: var(--tag-a-traiter-bg); color: var(--tag-a-traiter-fg);
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-semibold);
  align-self: flex-start;
}
.pending-count-pill:empty { display: none; }
.pending-count-pill--empty { background: var(--tag-traite-bg); color: var(--tag-traite-fg); }

/* =============================================================================
   Cartes Commentaires — compactes, premium, pastel.
   Base blanc/crème, bordure gris bleuté très claire, ombre légère, accent
   vertical discret selon le canal. Aucune couleur ne remplit toute la carte.
   ============================================================================= */
.comment-card-list { display: flex; flex-direction: column; gap: var(--cl-space-3); }

.comment-card {
  background: var(--cl-surface-card);
  border: var(--cl-border-width) solid var(--cl-border-color);
  border-left: 3px solid var(--cl-gray-200);
  border-radius: var(--cl-radius-lg);
  box-shadow: var(--cl-shadow-sm);
  padding: var(--cl-space-3) var(--cl-space-4);
  display: flex; flex-direction: column; gap: 6px;
  transition: box-shadow var(--cl-transition-base), border-color var(--cl-transition-base);
}
.comment-card:hover { box-shadow: var(--cl-shadow-md); border-color: var(--cl-gray-300); }
.comment-card.is-targeted {
  background: var(--cl-primary-050);
  border-left-width: 4px;
  border-left-color: var(--cl-primary-500);
  box-shadow: var(--cl-shadow-md);
}

/* Accent latéral discret selon le canal — jamais un fond coloré. */
.comment-card--instagram_comment { border-left-color: var(--cl-rose); }
.comment-card--facebook_comment { border-left-color: var(--cl-bleu-doux); }

.comment-card__row1 { display: flex; align-items: center; gap: var(--cl-space-2); }
.comment-card__avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--cl-primary-100); color: var(--cl-primary-700);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-bold);
}
.comment-card__name { font-weight: var(--cl-fw-semibold); font-size: var(--cl-fs-sm); }
.comment-card__time { margin-left: auto; font-size: var(--cl-fs-xs); color: var(--cl-gray-500); white-space: nowrap; }
.comment-card__row1 .sla-delay-badge { margin-left: auto; }

.comment-card__row2 { display: flex; flex-direction: column; gap: 4px; }
.comment-card__text {
  font-size: var(--cl-fs-sm); color: var(--cl-gray-800); line-height: var(--cl-lh-base);
}
.comment-card__text--clamped {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.comment-card__text--clamped.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
.comment-card__expand {
  align-self: flex-start; background: none; border: none; padding: 0;
  font-size: var(--cl-fs-xs); font-weight: var(--cl-fw-medium);
  color: var(--cl-primary-600); cursor: pointer;
}
.comment-card__expand:hover { text-decoration: underline; }

.comment-card__row3 { display: flex; flex-wrap: wrap; gap: 6px; }

/* Ligne 4 (réponse publique/privée) et statut : accessibles, compacts. */
.comment-card .actions-row { margin-top: 0; }
.comment-card .status-segmented { align-self: flex-start; }

/* Dernière ligne : actions secondaires discrètes, jamais mises en avant. */
.comment-card__footer { display: flex; gap: var(--cl-space-2); margin-top: 2px; }
.comment-card__footer:empty { display: none; }

/* =============================================================================
   Section secondaire « Activité » — événements techniques (création de
   dossier prospect, etc.), jamais des bulles de conversation. Repliée par
   défaut, discrète (voir js/activity-log.js).
   ============================================================================= */
.activity-log {
  margin-top: var(--cl-space-2);
  border: var(--cl-border-width) solid var(--cl-border-color);
  border-radius: var(--cl-radius-md);
  background: var(--cl-surface-muted);
  font-size: var(--cl-fs-xs);
}
.activity-log__summary {
  padding: var(--cl-space-2) var(--cl-space-3);
  cursor: pointer;
  color: var(--cl-gray-600);
  font-weight: var(--cl-fw-medium);
  list-style: none;
}
.activity-log__summary::-webkit-details-marker { display: none; }
.activity-log__list { list-style: none; padding: 0 var(--cl-space-3) var(--cl-space-2); margin: 0; display: flex; flex-direction: column; gap: 4px; }
.activity-log__item { color: var(--cl-gray-500); }

/* =============================================================================
   Badge de délai compact (voir js/sla-badge.js) — petit, jamais de fond
   coloré plein sur la carte, jamais de couleur agressive.
   ============================================================================= */
.sla-delay-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--cl-radius-full);
  font-size: 11px; font-weight: var(--cl-fw-semibold);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sla-delay-badge--unavailable { background: var(--cl-gray-100); color: var(--cl-gray-500); }
.sla-delay-badge--lt5 { background: var(--cl-turquoise-050); color: var(--cl-turquoise-600); }
.sla-delay-badge--5to15 { background: var(--cl-bleu-doux-050); color: var(--cl-bleu-doux-600); }
.sla-delay-badge--15to30 { background: var(--cl-ambre-050); color: var(--cl-ambre-600); }
.sla-delay-badge--30to24h { background: var(--sla-retard-bg); color: var(--sla-retard-fg); }
.sla-delay-badge--gt24h { background: var(--cl-danger-050); color: var(--cl-danger-600); }

/* =============================================================================
   Indicateurs discrets « déjà préparé » (jamais un statut) — voir
   js/contact-block.js buildPreparedBadges.
   ============================================================================= */
.prepared-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.prepared-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--cl-radius-full);
  font-size: 11px; font-weight: var(--cl-fw-medium);
  background: var(--cl-primary-050); color: var(--cl-primary-700);
}

/* ===========================================================================
   Pages « Coming soon » — Rendez-vous, Google My Business, Analyse d'appels
   ---------------------------------------------------------------------------
   Même famille graphique, trois accents distincts. L'objectif est qu'un
   module non ouvert se lise comme PLANIFIÉ, jamais comme cassé ou oublié.
   =========================================================================== */
.coming-soon {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 56px);
  background: linear-gradient(160deg, var(--cl-primary-900) 0%, var(--cl-primary-800) 55%, var(--cl-primary-700) 100%);
  color: #fff;
  box-shadow: 0 24px 60px -28px rgba(10, 32, 56, 0.55);
  text-align: center;
}

/* Halo d'accent : la seule chose qui distingue les trois pages. */
.coming-soon__glow {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 70%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
}
.coming-soon--turquoise .coming-soon__glow { background: radial-gradient(circle at 30% 50%, var(--cl-turquoise, #2ec4b6), transparent 65%); }
.coming-soon--navy      .coming-soon__glow { background: radial-gradient(circle at 70% 40%, #4f7fd1, transparent 65%); }
.coming-soon--sable     .coming-soon__glow { background: radial-gradient(circle at 50% 45%, #d8b26a, transparent 65%); }

.coming-soon__inner { position: relative; max-width: 620px; margin: 0 auto; }

/* Le conteneur reste de niveau bloc : le logo doit occuper sa propre ligne,
   au-dessus du badge. La pastille claire est portée par l'image elle-même —
   le logo Looxwell est destiné à un fond blanc. */
.coming-soon__mark { margin-bottom: 22px; }
.coming-soon__logo {
  height: 54px; width: auto; display: inline-block; vertical-align: middle;
  background: var(--cl-white);
  border-radius: 14px;
  padding: 9px 14px;
  box-shadow: 0 2px 12px rgba(6, 43, 111, 0.22);
}

.coming-soon__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.coming-soon__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cl-turquoise, #2ec4b6);
  box-shadow: 0 0 0 0 rgba(46, 196, 182, 0.7);
  animation: coming-soon-pulse 2.4s ease-out infinite;
}
@keyframes coming-soon-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 196, 182, 0.65); }
  70%  { box-shadow: 0 0 0 9px rgba(46, 196, 182, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 196, 182, 0); }
}

.coming-soon__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.coming-soon__title {
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  font-weight: 700; letter-spacing: -0.02em; color: #fff;
}
.coming-soon__subtitle {
  margin: 0 0 18px;
  font-size: clamp(1rem, 2.4vw, 1.15rem); font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}
.coming-soon__body {
  margin: 0 auto 26px; max-width: 460px;
  font-size: 0.95rem; line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
}

.coming-soon__hints {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 0 0 28px; padding: 0; list-style: none;
}
.coming-soon__hint {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.82rem; color: rgba(255, 255, 255, 0.82);
}
.coming-soon__hint-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.coming-soon__foot {
  margin: 0; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 640px) {
  .coming-soon { border-radius: 18px; }
  .coming-soon__hints { flex-direction: column; align-items: stretch; }
  .coming-soon__hint { justify-content: center; }
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  .coming-soon__dot { animation: none; }
}