/* ==========================================================================
   Isorava — DA inspiree de « Lime Frost » (21st.dev), mode clair.
   Tokens releves sur le theme puis convertis OKLCH -> sRGB.
   Contraintes verifiees : lime = couleur de SURFACE uniquement (1.3:1 sur
   blanc, jamais du texte ni un anneau de focus seul) ; tout texte >= 4.5:1.
   Aucune ressource externe : la CSP limite style-src et font-src a 'self'.
   ========================================================================== */

:root {
  /* Base */
  --bg: #fbfcf8;
  --card: #ffffff;
  --popover: #ffffff;
  --muted-bg: #f1f5f9;

  /* Texte */
  --fg: #0f172a;
  --muted-fg: #64748b;

  /* Lime : surfaces uniquement, toujours avec du texte noir */
  --primary: #aff33e;
  --primary-hover: #9de025;
  --on-primary: #000000;
  --primary-soft: #f0fdf4;
  /* Le lime lisible EN TEXTE. #65a30d ne faisait que 3.09:1 sur blanc alors
     qu'il colore `a:hover`, donc tous les liens survoles, et plusieurs
     libelles de 11-14px : l'invariant annonce en tete de fichier n'etait pas
     tenu. #4d7c0f est un cran plus fonce dans la meme famille et passe AA
     (4.99:1) sans changer le registre. */
  --primary-strong: #4d7c0f;

  /* Ardoise : boutons pleins secondaires, texte blanc */
  --slate: #334155;
  --slate-hover: #1e293b;
  --on-slate: #f8fafc;

  /* Traits */
  --border: #e2e8f0;
  --border-soft: #f1f5f9;

  /* Etats — valeurs choisies pour passer AA en texte ET en fond plein */
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --success: #15803d;
  --success-soft: #f0fdf4;
  --warning: #b45309;

  /* Series de graphiques (chart-1..5 du theme) */
  --chart-1: #aff33e;
  --chart-2: #334155;
  --chart-3: #22c55e;
  --chart-4: #64748b;
  --chart-5: #94a3b8;

  /* Formes — le theme utilise --radius: 1rem */
  --radius: 1rem;
  --radius-sm: 0.625rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* « General Sans » n'est pas embarquable sans l'auto-heberger (CSP) :
     pile systeme au grotesque geometrique proche. */
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Iowan Old Style', Palatino, Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

/* #app et #auth portent un display explicite, qui l'emporterait sur [hidden]. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--fg);
  text-decoration: none;
}
a:hover {
  color: var(--primary-strong);
}

::selection {
  background: var(--primary);
  color: var(--on-primary);
}

/* Le lime n'atteint pas 3:1 : l'anneau de focus s'appuie sur l'ardoise,
   le lime ne sert que de halo decoratif. */
:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  background-clip: content-box;
}

/* ==========================================================================
   Marque — monogramme « I » et nom
   ========================================================================== */

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--fg);
  user-select: none;
}

/* Monogramme en serif systeme : la CSP interdit une police distante. */
.brand-mono {
  font-family: var(--font-serif), serif;
  font-weight: 600;
  font-size: 1em;
  /* Le cadratin CJK est carre : ligne a 1 et pas de decalage, le centrage
     est assure par le conteneur flex. */
  line-height: 1;
  display: block;
}

/* Cible de clic confortable (44 px) sans grossir le glyphe */
.brand-link {
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  transition:
    background 0.15s var(--ease),
    color 0.15s var(--ease);
}

.brand-link:hover {
  background: var(--primary-soft);
  color: var(--fg);
}
.brand-link:active {
  background: var(--primary);
  color: var(--on-primary);
}

/* ==========================================================================
   Ossature
   ========================================================================== */

#app {
  display: flex;
  height: 100vh;
}

#sidebar {
  width: 244px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 14px 18px;
  background: var(--card);
  border-right: 1px solid var(--border-soft);
  overflow-y: auto;
}

.sidebar-brand {
  /* Dimensionne le monogramme : .brand-mono est en 1em */
  font-size: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Pousse le groupe en bas de la colonne. #sidebar est un conteneur flex
   vertical : `margin-top: auto` absorbe tout l'espace restant. */
.sidebar-bas {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.sidebar-nav a {
  padding: 9px 13px;
  color: var(--muted-fg);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  transition:
    background 0.15s var(--ease),
    color 0.15s var(--ease);
}

.sidebar-nav a:hover {
  background: var(--muted-bg);
  color: var(--fg);
}

/* Lime en aplat : le texte passe en noir, 15.7:1 */
.sidebar-nav a.active {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
}

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

#content {
  flex: 1;
  overflow: auto;
  padding: 30px 28px 60px;
}

/* Bandeau d'alerte, sous la barre du haut. Non masquable : il signale un
   blocage reel, pas une suggestion. */
#alerte {
  flex-shrink: 0;
}

.alerte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 28px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
}

.alerte > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.alerte strong {
  font-size: 0.9rem;
  color: #92400e;
}
.alerte .small {
  color: #a16207;
}
.alerte .btn {
  flex-shrink: 0;
}

/* ==========================================================================
   Titres
   ========================================================================== */

h1,
h2,
h3 {
  letter-spacing: -0.02em;
  color: var(--fg);
}
h2 {
  margin: 0 0 22px;
  font-size: 1.5rem;
  font-weight: 700;
}
h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 600;
}

/* ==========================================================================
   Cartes
   ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.grid-2 > .card,
.grid-3 > .card,
.grid-4 > .card {
  margin-bottom: 0;
}

/* ==========================================================================
   Indicateurs
   ========================================================================== */

.metric-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted-fg);
  letter-spacing: 0;
  text-transform: none;
}

.metric {
  margin: 8px 0 0;
  font-size: 2.15rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* Filet lime en tete des cartes de KPI : surface, jamais du texte */
.grid-4 > .card {
  position: relative;
  overflow: hidden;
}
.grid-4 > .card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--primary);
}

/* ==========================================================================
   Tableau de bord
   ========================================================================== */

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.page-head h2 {
  margin: 0;
}

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

.dash-main {
  min-width: 0;
}
.dash-rail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.dash-rail .card {
  margin-bottom: 0;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.card-head h3 {
  margin: 0;
}

/* --- Indicateurs --- */

.kpi {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.kpi::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--primary);
}

.kpi-value {
  font-size: 2.05rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-label {
  margin-top: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-fg);
}

.kpi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  min-height: 20px;
}

.trend {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* Texte 11 px : le seuil AA de 4.5:1 s'applique. Les teintes sont assombries
   par rapport aux tokens de base, qui echouent sur ces fonds pales. */
.trend.up {
  background: var(--success-soft);
  color: var(--success);
}
.trend.down {
  background: var(--danger-soft);
  color: #b91c1c;
}
.trend.flat {
  background: var(--muted-bg);
  color: #475569;
}

/* --- Graphiques --- */

.chart {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: 168px auto;
  gap: 6px 8px;
}

.chart-y {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  font-size: 0.68rem;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}

.chart-plot {
  grid-column: 2;
  position: relative;
  border-bottom: 1px solid var(--border);
  background: repeating-linear-gradient(to top, var(--border-soft) 0 1px, transparent 1px 33.33%);
}

.chart-plot svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Le lime seul ne fait que 1.3:1 sur blanc : un contour plus sombre porte le
   contraste des barres a 3:1, comme l'exige un objet graphique porteur
   d'information. */
.chart .bar {
  fill: var(--primary);
  stroke: var(--primary-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill 0.15s var(--ease);
}

.chart .bar:hover {
  fill: var(--primary-strong);
}

/* Trois series cote a cote : visite, invitation, message — l'ordre de la
   sequence. Les teintes vont du plus discret au plus affirme, dans ce meme
   ordre : une visite est un effleurement, un message est un engagement.

   Chacune garde un contour plus sombre. Le lime seul ne fait que 1.3:1 sur
   blanc, et un objet graphique porteur d'information doit atteindre 3:1 —
   meme regle que pour la barre unique au-dessus. */
.chart .bar.s0 {
  fill: var(--chart-5);
  stroke: var(--slate);
}
.chart .bar.s1 {
  fill: var(--chart-2);
  stroke: var(--slate-hover);
}
.chart .bar.s2 {
  fill: var(--primary);
  stroke: var(--primary-strong);
}

/* Au survol d'un groupe, les barres gardent leur couleur : c'est elle qui dit
   de quelle serie il s'agit. Seul le fond de la colonne change (`.bar-zone`). */
.chart .bar-groupe.actif .bar.s0 {
  fill: var(--chart-5);
}
.chart .bar-groupe.actif .bar.s1 {
  fill: var(--chart-2);
}
.chart .bar-groupe.actif .bar.s2 {
  fill: var(--primary);
}

/* Legende. La couleur ne porte jamais seule l'information — le libelle est
   ecrit, et l'infobulle redonne les trois valeurs nommees au survol. */
.chart-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--muted-fg);
}

.chart-serie {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-serie::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid;
}

.chart-serie.s0::before {
  background: var(--chart-5);
  border-color: var(--slate);
}
.chart-serie.s1::before {
  background: var(--chart-2);
  border-color: var(--slate-hover);
}
.chart-serie.s2::before {
  background: var(--primary);
  border-color: var(--primary-strong);
}

.chart .area {
  fill: rgba(175, 243, 62, 0.28);
}
.chart .line {
  fill: none;
  stroke: var(--primary-strong);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* Points de mesure : calque non deforme par le viewBox etire */
.chart-pts {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.chart .pt {
  fill: var(--card);
  stroke: var(--primary-strong);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}

.chart-x {
  grid-column: 2;
  position: relative;
  height: 16px;
  font-size: 0.68rem;
  color: var(--muted-fg);
}

.chart-x span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.chart-empty {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 20px;
  color: var(--muted-fg);
  font-size: 0.875rem;
  text-align: center;
  background: var(--muted-bg);
  border-radius: var(--radius-sm);
}

/* --- Rail : listes --- */

.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rail-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
  transition:
    background 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.rail-list a:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--fg);
}

.rail-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
}

.rail-meta {
  font-size: 0.72rem;
  color: var(--muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot.on {
  background: var(--success);
}
.dot.off {
  background: #cbd5e1;
}

/* --- Rail : compteurs du jour --- */

.quota {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quota-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--muted-fg);
}

.quota-head strong {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* Activite du jour : des lignes seules, sans barre dessous. Elle reprenait
   `.quota`, dont le `gap: 14px` et la marge basse menagent la place d'une
   jauge — absente ici. La carte occupait donc le double de sa hauteur utile.
   Une classe a elle plutot qu'une exception dans `.quota` : ce dernier sert
   aussi a la campagne, ou l'espacement est juste. */
.activite-jour {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activite-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-size: 0.85rem;
  color: var(--muted-fg);
}

.activite-ligne strong {
  color: var(--fg);
  /* Chiffres a chasse fixe : les nombres s'alignent d'une ligne a l'autre. */
  font-variant-numeric: tabular-nums;
}

.quota-track {
  height: 8px;
  background: var(--muted-bg);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

/* Meme raison que les barres du graphique, mais sur le rail gris le contour
   doit etre plus sombre encore pour tenir les 3:1. */
.quota-fill {
  height: 100%;
  background: var(--primary);
  border: 1px solid #4d7c0f;
  border-radius: var(--radius-pill);
}

/* --- Rail : fil d'activite --- */

.feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.feed li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.85rem;
}

.feed li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.feed-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--success);
  font-size: 0.8rem;
}

.feed-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed time {
  font-size: 0.72rem;
  color: var(--muted-fg);
  white-space: nowrap;
}

/* --- Funnel analytics --- */

.funnel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.funnel-row {
  display: grid;
  grid-template-columns: 180px 1fr 90px;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
}

.funnel-label {
  color: var(--muted-fg);
}

.funnel-bar-wrap {
  height: 18px;
  background: var(--muted-bg);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.funnel-bar {
  height: 100%;
  background: var(--primary);
  border: 1px solid var(--primary-strong);
  border-radius: var(--radius-pill);
  min-width: 4px;
}

.funnel-meta {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.empty {
  margin: 0;
  padding: 14px 0;
  color: var(--muted-fg);
  font-size: 0.875rem;
}
.empty a {
  color: var(--primary-strong);
  font-weight: 600;
}

/* ==========================================================================
   Brief de preparation
   ========================================================================== */

.brief-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  align-items: start;
}

.brief-rail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.brief-layout .card {
  margin-bottom: 0;
}

/* Cible le seul editeur de brief : la meme regle sur `.brief-layout textarea`
   etirait aussi les messages de l'editeur de sequence a 420 px. */
.brief-layout #brief {
  min-height: 420px;
  tab-size: 2;
}

.brief-layout textarea {
  font-size: 0.9rem;
  line-height: 1.65;
  /* Brief et messages sont structures : une chasse fixe garde l'alignement */
  font-family: var(--font-mono);
}

.seq-step textarea {
  min-height: 92px;
}

.badge {
  padding: 2px 9px;
  background: var(--muted-bg);
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #475569;
}

/* --- Jauge de remplissage --- */

.gauge {
  margin: 4px 0 14px;
}

.gauge-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.gauge-state.court {
  color: var(--warning);
}
.gauge-state.ok {
  color: var(--muted-fg);
}
.gauge-state.bon {
  color: var(--success);
}

/* --- Couverture --- */

.cover {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cover li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 0.85rem;
  color: var(--muted-fg);
  border-bottom: 1px solid var(--border-soft);
}

.cover li:last-child {
  border-bottom: 0;
}
.cover li.ok {
  color: var(--fg);
}

.cover-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--muted-bg);
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.cover li.ok .cover-mark {
  background: var(--success-soft);
  color: var(--success);
}

/* --- Etat d'enregistrement --- */

.save-ok {
  color: var(--success);
}
.save-pending {
  color: var(--warning);
}

/* --- Editeur de sequence --- */

.seq-step-head select {
  width: auto;
  min-width: 150px;
  min-height: 34px;
  margin: 0;
  padding: 4px 30px 4px 10px;
  font-size: 0.82rem;
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
}

.seq-unit {
  color: var(--muted-fg);
}
.seq-help {
  margin: 0 0 10px;
  color: var(--muted-fg);
}

/* Preambule impose : visite -> invitation -> premier message */
.seq-preamble {
  margin-bottom: 6px;
}

.seq-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.seq-chip .step-num {
  background: var(--card);
}
.seq-chip-nom {
  font-size: 0.875rem;
  font-weight: 600;
}
.seq-chip .small {
  color: var(--muted-fg);
}
.seq-chip .inline {
  margin-left: auto;
}
.seq-chip .inline + .badge {
  margin-left: 0;
}

.seq-arrow {
  display: grid;
  place-items: center;
  height: 22px;
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1;
}

.seq-note {
  padding: 10px 14px 0;
}
.seq-note textarea {
  margin-bottom: 4px;
}
.seq-note-vide {
  margin: 6px 0 0 14px;
  color: var(--muted-fg);
}

/* Bascule consigne / texte fixe */
.seq-modes {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: 10px;
  background: var(--muted-bg);
  border-radius: var(--radius-pill);
}

.mode {
  padding: 5px 13px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--muted-fg);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.mode.active {
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}

/* Apercu redige */
.apercu {
  margin-top: 10px;
  padding: 13px 15px;
  background: var(--primary-soft);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.6;
}

.apercu.error {
  background: var(--danger-soft);
  border-color: #fecaca;
  color: var(--danger);
}
.apercu p {
  margin: 6px 0 0;
  white-space: pre-wrap;
}

.apercu-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-fg);
}

.seq-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Modeles d'approche */
.approches {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.approche {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.approche:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.approche strong {
  font-size: 0.875rem;
}
.approche .small {
  color: var(--muted-fg);
}

.vars {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vars li {
  margin: 0;
}

/* --- Suivi des envois programmes --- */

.runs {
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.runs .card-head {
  margin-bottom: 8px;
}
.runs-list li {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
}

/* --- Bascules ON / OFF des personas --- */

.toggle {
  min-width: 58px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background 0.15s var(--ease),
    color 0.15s var(--ease);
}

/* Vert fonce sur vert pale : lisible, et l'etat ne repose pas que sur la
   couleur puisque le libelle dit ON ou OFF. */
.toggle.on {
  background: var(--success-soft);
  color: var(--success);
  border-color: #bbf7d0;
}
.toggle.on:hover {
  background: #dcfce7;
}
.toggle.off {
  background: var(--muted-bg);
  color: #475569;
  border-color: var(--border);
}
.toggle.off:hover {
  background: #e2e8f0;
}

.toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Tableau des personas --- */

.row-actions.between {
  justify-content: space-between;
}

.check-inline {
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
}

/* Selecteur assez specifique pour battre `label.inline input`, qui dimensionne
   les petits champs numeriques des delais (64x34) et deformait la case. */
label.check-inline input[type='checkbox'] {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: 0 4px 0 0;
  accent-color: var(--primary-strong);
  cursor: pointer;
}

/* Dans une cellule etroite, les actions restent sur une ligne */
td .row-actions {
  flex-wrap: nowrap;
  margin-top: 0;
}

.row-edit td {
  background: var(--primary-soft);
  vertical-align: middle;
}
.row-edit input {
  margin: 0;
}

td .badge {
  margin-left: 6px;
  vertical-align: middle;
}

/* ==========================================================================
   Campagne : en-tete, dashboard, etapes
   ========================================================================== */

.camp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.camp-head-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.camp-head-main h2 {
  margin: 0;
}
.camp-actions {
  display: flex;
  gap: 8px;
}

/* Pastilles d'etat, reutilisees dans les tableaux */
.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.status.on {
  background: var(--success-soft);
  color: var(--success);
}
.status.off {
  background: var(--muted-bg);
  color: #475569;
}
.status.warn {
  background: #fffbeb;
  color: #92400e;
}
.status.bad {
  background: var(--danger-soft);
  color: #b91c1c;
}
.status.neutral {
  background: var(--muted-bg);
  color: #475569;
}

.camp-dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
  margin-bottom: 28px;
}

.camp-dash .card {
  margin-bottom: 0;
}

/* --- Entonnoir en tuiles --- */

.funnel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 10px;
}

.funnel-tile {
  padding: 14px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.funnel-tile.best {
  background: var(--primary-soft);
  border-color: var(--primary);
}

/* Un liseré par jalon : l'entonnoir se lit d'un coup d'oeil, sans que la
   couleur porte seule l'information (les libelles restent explicites). */
.funnel-tile {
  border-top: 3px solid var(--border);
}
.funnel-tile.t0 {
  border-top-color: #94a3b8;
}
.funnel-tile.t1 {
  border-top-color: #60a5fa;
}
.funnel-tile.t2 {
  border-top-color: #34d399;
}
.funnel-tile.t3 {
  border-top-color: #fbbf24;
}
.funnel-tile.t4 {
  border-top-color: #a78bfa;
}
.funnel-tile.t5 {
  border-top-color: #f472b6;
}
.funnel-tile.t6 {
  border-top-color: var(--primary-strong);
}

.wf-part {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted-fg);
}

.funnel-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-fg);
}

.funnel-value {
  margin: 6px 0 2px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.funnel-pct {
  font-size: 0.72rem;
  color: var(--muted-fg);
}

/* --- Paires cle / valeur --- */

.kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.kv > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kv strong {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* --- Navigation d'etapes : collante sous la barre du haut --- */

.step-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 0;
  margin-bottom: 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.step-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--muted-fg);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background 0.15s var(--ease),
    color 0.15s var(--ease);
}

.step-nav a:hover {
  background: var(--muted-bg);
  color: var(--fg);
}
.step-nav a.active {
  background: var(--primary);
  color: var(--on-primary);
}
.step-nav a.active .step-num {
  background: rgba(0, 0, 0, 0.18);
  color: var(--on-primary);
}

.step-num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--muted-bg);
  color: #475569;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Sections d'etape --- */

/* Le menu d'etapes reste visible pendant qu'on travaille l'etape ouverte */
#camp-menu {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
}
#camp-panneau {
  margin-top: 18px;
}
#camp-panneau > .card {
  margin-bottom: 0;
}

.step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.step-head h3 {
  margin: 0;
  font-size: 1.05rem;
}
.step-head .step-num {
  width: 24px;
  height: 24px;
  background: var(--primary);
  color: var(--on-primary);
}

.side-note {
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.side-note h4,
.step h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  font-weight: 700;
}

ul.check {
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
}
ul.check li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 5px;
}
ul.check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}

/* --- Sequence --- */

.seq-step {
  padding: 14px;
  margin-bottom: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.seq-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.seq-step textarea {
  margin-bottom: 0;
}

label.inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted-fg);
  font-weight: 500;
}

label.inline input {
  width: 64px;
  margin: 0;
  min-height: 34px;
  padding: 4px 8px;
  text-align: center;
}

/* Ligne ouverte dans le setter : le contact en cours de qualification doit
   rester reperable une fois la fiche ouverte au-dessus de la liste. */
.row-cliquable.active td {
  background: var(--primary-soft);
}

/* Le message d'apercu contient de vrais retours a la ligne, dont celui qui
   precede la signature : sans pre-wrap, elle se colle a la derniere phrase. */
.apercu-message {
  white-space: pre-wrap;
}

/* Cases a cocher empilees : cote a cote, deux libelles longs se lisent comme
   une seule phrase. */
.check-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

/* Un bouton desactive doit se voir comme tel : sans cela l'utilisateur clique
   et croit a une panne. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn:disabled:hover,
.btn[disabled]:hover {
  background: var(--primary);
  color: var(--on-primary);
}

.btn.secondary:disabled:hover,
.btn.secondary[disabled]:hover {
  background: var(--card);
  color: var(--fg);
}

/* ==========================================================================
   Setter IA : liste des conversations et fil
   ========================================================================== */

.setter-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.conv-liste {
  max-height: 70vh;
  overflow-y: auto;
}

/* Element de liste cliquable : un bouton, pas un div. Le clavier et les
   lecteurs d'ecran le traitent alors comme ce qu'il est. */
.conv {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 11px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    background 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.conv:hover {
  background: var(--muted-bg);
  border-color: var(--slate);
}
.conv.active {
  background: var(--primary-soft);
  border-color: var(--primary);
}

.conv-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.conv-pied {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
  min-height: 4px;
}

.fil {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 4px 2px;
}

.msg {
  max-width: 78%;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
}

/* Recu a gauche, envoye a droite : la convention de toutes les messageries,
   qui evite de lire la direction dans une etiquette. */
.msg-recu {
  align-self: flex-start;
  background: var(--muted-bg);
}

.msg-envoye {
  align-self: flex-end;
  background: var(--primary-soft);
  border: 1px solid var(--primary);
}

.msg-texte {
  white-space: pre-wrap;
  font-size: 0.9rem;
}

/* Zone de redaction, sous le fil. Separee par un filet : ce qu'on ecrit n'est
   pas encore un message du fil, et rien ne doit laisser croire l'inverse. */
.composeur {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.composeur textarea {
  width: 100%;
  margin: 6px 0 0;
  resize: vertical;
  font-family: inherit;
  font-size: 0.9rem;
}

.composeur-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* La proposition du modele est une citation, pas un champ : elle ne se modifie
   pas sur place, elle se reprend dans la zone de redaction. La difference doit
   se voir sans avoir a cliquer. */
.brouillon-propose {
  margin: 6px 0 0;
  padding: 10px 13px;
  border-left: 3px solid var(--primary);
  background: var(--muted-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  white-space: pre-wrap;
  font-size: 0.9rem;
  color: var(--fg);
}

@media (max-width: 900px) {
  .setter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .conv-liste {
    max-height: 320px;
  }
}

/* ==========================================================================
   Tableau « quels personas rapportent » (etape Analyse)
   ========================================================================== */

.cel-jalon {
  white-space: nowrap;
  text-align: center;
}

.cel-n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Pastille de taux sous la valeur. Une seule teinte neutre pour les etapes
   intermediaires : sept couleurs, comme dans la maquette d'origine, feraient
   concurrence a la lecture des chiffres eux-memes. Seules les deux colonnes
   qui portent un jugement — leads, non-leads — sont teintees. */
.taux {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  background: var(--muted-bg);
  border-radius: var(--radius-pill);
  color: var(--muted-fg);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.taux.bon {
  background: var(--primary-soft);
  color: var(--success);
}

.taux.mauvais {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ==========================================================================
   Entonnoir en cascade (etape Analyse)
   ========================================================================== */

/* En dessous de 720 px le graphique deviendrait illisible plutot que petit :
   on le fait defiler horizontalement au lieu de l'ecraser. */
.ent-graphe-cadre {
  overflow-x: auto;
  margin: 4px 0 10px;
}

.ent-graphe {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
}

.ent-grille {
  stroke: var(--border);
  stroke-width: 1;
}

.ent-axe,
.ent-etiquette,
.ent-part {
  fill: var(--muted-fg);
  font-size: 13px;
  font-family: var(--font);
}

.ent-etiquette {
  fill: var(--fg);
  font-weight: 600;
}

.ent-valeur {
  fill: var(--fg);
  font-size: 19px;
  font-weight: 700;
  font-family: var(--font);
}

/* La courbe passe derriere les libellés des petites barres : un halo de la
   couleur de la carte les detache sans ajouter de fond opaque. */
.ent-valeur,
.ent-part {
  paint-order: stroke fill;
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Le lime ne fait que 1,3:1 sur blanc : en aplat de barre il lui faut un
   contour pour atteindre les 3:1 exiges d'un element graphique porteur
   d'information. */
.ent-barre {
  fill: var(--primary);
  stroke: var(--primary-strong);
  stroke-width: 1;
}

.ent-ligne {
  fill: none;
  stroke: var(--slate);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Rouge #ef4444 echoue en texte (3,76:1) : on prend --danger (#dc2626) sur le
   rose pale, qui passe AA. */
.ent-perte rect {
  fill: var(--danger-soft);
  stroke: #fecaca;
  stroke-width: 1;
}

/* Rappel entre l'etiquette, posee en bande haute, et l'intervalle qu'elle
   decrit. Discret : il traverse le graphique, il ne doit pas le decouper. */
.ent-amorce {
  stroke: #fecaca;
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.ent-perte-n,
.ent-perte-p {
  fill: var(--danger);
  font-family: var(--font);
  text-anchor: middle;
}

.ent-perte-n {
  font-size: 14px;
  font-weight: 700;
}

.ent-perte-p {
  font-size: 12px;
}

/* Menu des methodes d'ajout de contacts. Meme vocabulaire de pastilles que
   .step-nav, mais sans position collante : deux barres collantes empilees se
   masqueraient l'une l'autre. Les methodes sont des alternatives, pas des
   etapes : pas de numerotation, un icone suffit. */
.method-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.method-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted-fg);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background 0.15s var(--ease),
    color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.method-nav a:hover {
  background: var(--muted-bg);
  border-color: var(--slate);
  color: var(--fg);
}
.method-nav a.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
/* Le badge « Bientot » doit rester lisible sur le vert : meme traitement que
   .step-num dans la barre d'etapes. */
.method-nav a.active .badge {
  background: rgba(0, 0, 0, 0.18);
  color: var(--on-primary);
}
.method-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* Encart d'information dans un panneau : dit ce qu'une methode fait et ce
   qu'elle attend, sans dramatiser. Distinct de .alerte, banniere de page. */
.notice {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--muted-bg);
  border-left: 3px solid var(--slate);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.notice strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.88rem;
}
.notice p {
  margin: 0;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Une barre d'actions suivie d'autre chose doit respirer : sans marge basse, le
   bouton venait toucher l'en-tete du tableau des personas, d'autant plus visible
   que `thead th` est collant. Le :not(:last-child) evite d'ajouter du vide quand
   la barre termine sa carte. */
.row-actions:not(:last-child) {
  margin-bottom: 14px;
}
.row-actions .grow {
  flex: 1;
  min-width: 200px;
  margin: 0;
}

/* --- Pipeline : rail d'etapes --- */

.stages {
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 104px;
  padding: 12px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.15s var(--ease),
    background 0.15s var(--ease);
}

.stage:hover {
  background: var(--muted-bg);
}
.stage.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.stage-icon {
  font-size: 1rem;
  line-height: 1;
}
.stage-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted-fg);
  text-align: center;
  line-height: 1.25;
}
.stage-count {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stage.fam-gagne .stage-count {
  color: var(--success);
}
.stage.fam-perdu .stage-count {
  color: var(--danger);
}
.stage.fam-inactif {
  opacity: 0.75;
}

.stage-sep {
  display: grid;
  place-items: center;
  color: #cbd5e1;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* --- Analyse : entonnoir en cascade --- */

.waterfall {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 280px;
  /* Marge haute : la valeur du plus grand palier se pose au-dessus de sa barre */
  padding: 30px 0 0;
  overflow-x: auto;
}

.row-muted td {
  color: var(--muted-fg);
}

.wf-col {
  flex: 1;
  min-width: 76px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wf-bar-zone {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.wf-bar {
  position: relative;
  width: 100%;
  min-height: 4px;
  background: var(--primary);
  border: 1px solid var(--primary-strong);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.wf-val {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wf-loss {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 7px;
  background: var(--danger-soft);
  color: #b91c1c;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.wf-label {
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted-fg);
  text-align: center;
}

.mini {
  font-size: 0.68rem;
  color: var(--muted-fg);
  font-weight: 600;
}
.cell-wrap {
  white-space: normal;
  max-width: 380px;
}

/* Ligne entierement cliquable. Le lien du nom reste en place : il porte
   l'acces au clavier et le clic milieu, qu'un gestionnaire sur la ligne ne
   remplacerait pas. */
.row-cliquable {
  cursor: pointer;
}
.row-cliquable .cell-actions {
  cursor: default;
}

/* Le nom ne verdit pas au survol : le contour et la teinte de la ligne
   signalent deja la cible, et toute la ligne est cliquable — colorer le seul
   texte laisserait croire qu'il est la seule zone active. */
.row-cliquable a,
.row-cliquable a:hover {
  color: var(--fg);
}

/* Contour vert au survol, pour que la ligne se lise comme une case entiere.
   Trace en `inset box-shadow` et non en `border` : une bordure changerait la
   hauteur des cellules et ferait sauter le tableau au passage de la souris.
   `:focus-within` donne le meme repere au clavier. */
.row-cliquable:hover td,
.row-cliquable:focus-within td {
  background: var(--primary-soft);
  box-shadow:
    inset 0 1px 0 var(--primary),
    inset 0 -1px 0 var(--primary);
}

.row-cliquable:hover td:first-child,
.row-cliquable:focus-within td:first-child {
  box-shadow:
    inset 0 1px 0 var(--primary),
    inset 0 -1px 0 var(--primary),
    inset 1px 0 0 var(--primary);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.row-cliquable:hover td:last-child,
.row-cliquable:focus-within td:last-child {
  box-shadow:
    inset 0 1px 0 var(--primary),
    inset 0 -1px 0 var(--primary),
    inset -1px 0 0 var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ==========================================================================
   Boutons — pastille arrondie, comme le theme
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 10px 20px;
  background: var(--primary);
  color: var(--on-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background 0.15s var(--ease),
    transform 0.1s var(--ease),
    box-shadow 0.15s var(--ease);
}

.btn:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-sm);
}
.btn:active {
  transform: translateY(1px);
}

.btn.secondary {
  background: var(--card);
  border-color: var(--border);
  color: var(--fg);
}
.btn.secondary:hover {
  background: var(--muted-bg);
  box-shadow: none;
}

/* Variante ardoise pleine, l'accent fort du theme */
.btn.solid {
  background: var(--slate);
  color: var(--on-slate);
}
.btn.solid:hover {
  background: var(--slate-hover);
}

.btn.danger {
  background: transparent;
  border-color: #fecaca;
  color: var(--danger);
}
.btn.danger:hover {
  background: var(--danger-soft);
  box-shadow: none;
}

.btn.small {
  min-height: 32px;
  padding: 6px 14px;
  font-size: 0.8rem;
}

/* ==========================================================================
   Champs
   ========================================================================== */

input,
select,
textarea {
  font-family: inherit;
  font-size: 0.9rem;
}

/* Liste a tenir a jour : un type absent d'ici n'herite ni de la largeur, ni de
   la marge basse, et se retrouve colle a l'element suivant. C'etait le cas du
   champ d'adresse du brief (type='url'), d'ou le bouton « Generer un brief »
   accole. On enumere plutot que d'ecrire input:not([type='checkbox']) : cette
   forme prendrait le dessus sur `label.inline input`, qui dimensionne les
   champs de delai des sequences. */
.input,
.textarea,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='url'],
input[type='search'],
input[type='tel'],
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: var(--radius-sm);
  transition:
    border-color 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8;
}

.input:focus,
.textarea:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--slate);
  box-shadow: 0 0 0 3px rgba(175, 243, 62, 0.45);
}

textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted-fg) 50%),
    linear-gradient(135deg, var(--muted-fg) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 14px) 50%;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
  cursor: pointer;
}

label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fg);
}

/* ==========================================================================
   Grilles
   ========================================================================== */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.grid-2,
.grid-3,
.grid-4 {
  margin-bottom: 20px;
}

/* ==========================================================================
   Onglets
   ========================================================================== */

.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 22px;
  background: var(--muted-bg);
  border-radius: var(--radius-pill);
}

.tab {
  padding: 7px 16px;
  background: transparent;
  border: 0;
  color: var(--muted-fg);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  transition:
    background 0.15s var(--ease),
    color 0.15s var(--ease);
}

.tab:hover {
  color: var(--fg);
}
.tab.active {
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* ==========================================================================
   Tableaux — densite issue du profil « Data-Dense Dashboard »
   ========================================================================== */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--muted-bg);
  color: var(--muted-fg);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 10px 14px;
  white-space: nowrap;
}

thead th:first-child {
  border-radius: var(--radius-sm) 0 0 0;
}
thead th:last-child {
  border-radius: 0 var(--radius-sm) 0 0;
}

tbody td {
  height: 44px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg);
}

tbody tr {
  transition: background 0.12s var(--ease);
}
tbody tr:hover td {
  background: var(--primary-soft);
}
tbody tr:last-child td {
  border-bottom: 0;
}

/* ==========================================================================
   Divers
   ========================================================================== */

.error {
  color: var(--danger);
  font-size: 0.85rem;
}
.success {
  color: var(--success);
  font-size: 0.85rem;
}
.small {
  font-size: 0.8rem;
  color: var(--muted-fg);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 22px 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 2px 6px;
  background: var(--muted-bg);
  border-radius: 6px;
  color: var(--fg);
}

/* ==========================================================================
   Authentification
   ========================================================================== */

.auth-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: radial-gradient(620px 380px at 50% -8%, rgba(175, 243, 62, 0.22), transparent 62%), var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 408px;
  padding: 38px 34px 30px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.auth-card .brand {
  font-size: 2.6rem;
  margin-bottom: 14px;
}
.auth-card h1 {
  margin: 0 0 8px;
  font-size: 1.6rem;
}
.auth-card > p {
  color: var(--muted-fg);
  margin: 0 0 26px;
  font-size: 0.9rem;
}
.auth-card input {
  margin-bottom: 14px;
}

.auth-card button {
  width: 100%;
  min-height: 46px;
  margin-top: 8px;
  background: var(--primary);
  color: var(--on-primary);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.925rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}

.auth-card button:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-sm);
}

.auth-field {
  margin-bottom: 2px;
}

.auth-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 2px;
  color: var(--muted-fg);
  font-size: 0.8rem;
}
.auth-sep::before,
.auth-sep::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}

.auth-card .auth-google {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
}
.auth-card .auth-google:hover {
  background: var(--muted-bg);
}

.auth-link {
  text-align: center;
  margin: 18px 0 0;
  font-size: 0.85rem;
  color: var(--muted-fg);
}
.auth-link a {
  color: var(--primary-strong);
  font-weight: 600;
}

/* Entree locale de developpement. Separee par un filet, et volontairement
   discrete : ce n'est pas une seconde facon de se connecter mais un
   contournement, et il ne doit pas rivaliser avec « Se connecter ». La regle
   generique `.auth-card button` pose le fond primaire et la pleine largeur ; il
   faut donc les defaire ici, une classe seule n'y suffirait pas. */
.auth-dev {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.auth-card .auth-dev button {
  width: auto;
  min-height: 38px;
  margin-top: 0;
  padding: 0 18px;
  background: transparent;
  color: var(--muted-fg);
  border: 1px solid var(--border);
  font-weight: 500;
}

.auth-card .auth-dev button:hover {
  background: var(--muted-bg);
  color: var(--fg);
  box-shadow: none;
}

.auth-dev .small {
  margin: 10px 0 0;
}

.auth-card .error,
.auth-card .success {
  display: block;
  text-align: center;
  margin: 12px 0 0;
  min-height: 1.2em;
}

/* ==========================================================================
   Reglages
   ========================================================================== */

.section-titre {
  margin: 26px 0 14px;
}

/* Zone destructrice, visuellement mise a part du reste des reglages */
.danger-zone {
  border-color: #fecaca;
}
.danger-zone h3 {
  color: var(--danger);
}

/* Jours d'envoi */
.jours {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 18px;
}

.jour {
  min-width: 56px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted-fg);
  transition:
    background 0.15s var(--ease),
    color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.jour:hover {
  background: var(--muted-bg);
}
.jour.on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

/* Etat courant des envois */
.etat-envoi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--border);
  background: var(--muted-bg);
}

.etat-envoi.ouvert {
  background: var(--primary-soft);
  border-left-color: var(--success);
}
.etat-envoi.ferme {
  background: var(--muted-bg);
  border-left-color: var(--warning);
}
.etat-envoi .small {
  color: var(--muted-fg);
}

/* Services externes */
.service {
  margin-bottom: 0;
}
.service.on {
  border-color: #bbf7d0;
}

/* Formules d'abonnement */
.plan {
  margin-bottom: 0;
  text-align: center;
}
.plan h4 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.plan-prix {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan-prix span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted-fg);
}
.plan .btn {
  width: 100%;
  margin-top: 14px;
}
.plan .small {
  margin: 6px 0 0;
}

/* --- Ecran de choix de formule (plan gate) -------------------------------- */

.plan-gate-fond {
  align-items: center;
  padding-top: 20px;
}

.plan-gate {
  width: min(880px, 100%);
  padding: 32px;
  text-align: center;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.plan-gate h2 {
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.plan-gate > p {
  margin: 0 auto 22px;
  max-width: 560px;
  color: var(--muted-fg);
}

.plan-gate .grid-3 {
  margin-bottom: 20px;
  text-align: left;
}

.plan-gate .grid-3 .plan {
  text-align: center;
}

/* L'ecran est bloquant : il defile lui-meme sur petit ecran. */
.plan-gate-fond {
  overflow-y: auto;
}

.plan-gate {
  margin: auto 0;
}

.plan-gate-note {
  margin: 0 auto 14px;
  max-width: 560px;
  color: var(--warning);
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
}

.plan .btn {
  margin-top: auto;
}

.plan-accroche {
  min-height: 3em;
  color: var(--muted-fg);
}

.plan-points {
  margin: 14px 0 16px;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 0.85rem;
}

.plan-points li {
  position: relative;
  padding: 3px 0 3px 20px;
}

.plan-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary-strong);
  font-weight: 700;
}

.plan-conseille {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.plan-courante {
  border-color: var(--slate);
}

.plan-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.bascule-periodicite {
  display: inline-flex;
  gap: 4px;
  margin: 0 auto 18px;
  padding: 4px;
  background: var(--muted-bg);
  border-radius: var(--radius-pill);
}

.bascule-periodicite button {
  padding: 6px 14px;
  background: transparent;
  color: var(--muted-fg);
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  cursor: pointer;
}

.bascule-periodicite button.active {
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}

.bascule-periodicite button span {
  color: var(--primary-strong);
  font-size: 0.75rem;
}

.case-conditions {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px auto 14px;
  max-width: 620px;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.45;
}

.case-conditions input {
  flex: none;
  width: auto;
  margin-top: 3px;
}

.pied-legal {
  margin: 16px 0 0;
  color: var(--muted-fg);
  text-align: center;
}

.pied-legal a {
  color: inherit;
}

/* Badge « Votre formule » : distinct de « Le plus choisi ». */
.plan-badge-courante {
  background: var(--slate);
  color: var(--on-slate);
}

/* Jauges de consommation (onglet Abonnement) */
.usage {
  margin: 8px 0 12px;
}

.jauge-usage-texte {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
}

.jauge-usage-barre {
  height: 8px;
  margin-top: 6px;
  background: var(--muted-bg);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.jauge-usage-barre span {
  display: block;
  height: 100%;
  background: var(--primary);
}

.jauge-pleine .jauge-usage-barre span {
  background: var(--warning);
}

#bandeau-formule {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: 22px;
  display: flex;
  gap: 12px;
  align-items: center;
  max-width: min(640px, calc(100% - 32px));
  padding: 12px 16px;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
}

#bandeau-formule[hidden] {
  display: none;
}

#bandeau-formule a {
  white-space: nowrap;
  font-weight: 600;
}

#bandeau-formule .btn-icone {
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--muted-fg);
  font-size: 1.1rem;
  cursor: pointer;
}

/* ==========================================================================
   Menu d'actions
   ========================================================================== */

.btn-menu {
  min-width: 34px;
  padding: 4px 10px;
  font-size: 1rem;
  line-height: 1;
}

.cell-actions {
  text-align: right;
  white-space: nowrap;
}

.menu-pop {
  position: fixed;
  z-index: 60;
  min-width: 232px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.menu-pop hr {
  margin: 6px 4px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg);
}

.menu-item .small {
  color: var(--muted-fg);
  font-weight: 400;
}
.menu-item:hover {
  background: var(--muted-bg);
}
.menu-item.danger {
  color: var(--danger);
}
.menu-item.danger:hover {
  background: var(--danger-soft);
}
.menu-item.danger .small {
  color: var(--danger);
  opacity: 0.8;
}

/* Bouton plein destructeur, reserve aux confirmations */
.btn.danger-solide {
  background: var(--danger);
  border-color: transparent;
  color: #fff;
}
.btn.danger-solide:hover {
  background: #b91c1c;
}

/* ==========================================================================
   Boite de dialogue
   ========================================================================== */

.dlg {
  width: min(460px, calc(100vw - 32px));
  max-height: min(70vh, 640px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.dlg::backdrop {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
}

.dlg-form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.dlg-head {
  padding: 22px 24px 14px;
}
.dlg-head h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.dlg-head p {
  margin: 0;
}

.dlg-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Formulaire a plusieurs champs (dialog.js > formulaire). Les champs
   respirent davantage que les lignes d'une liste : on y saisit, on n'y
   choisit pas. */
.dlg-champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.dlg-champ label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2, #475569);
}
.dlg-champ input,
.dlg-champ select {
  width: 100%;
  margin-bottom: 0;
}
.dlg-champ .small {
  margin: 0;
}
/* Le champ invalide ne se signale qu'apres une tentative de validation :
   souligner en rouge un champ requis encore vide, avant meme qu'on l'ait
   touche, se lit comme une erreur alors que rien n'a ete fait. */
.dlg-champ input:user-invalid {
  border-color: var(--danger);
}

/* L'en-tete porte le focus initial : le poser sur la premiere ligne la ferait
   passer pour deja choisie. */
.dlg-head:focus {
  outline: none;
}
.dlg-head:focus-visible {
  outline: none;
  box-shadow: none;
}

.dlg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition:
    background 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.dlg-item:hover {
  background: var(--muted-bg);
}

/* Le choix retenu, distinct du simple survol */
.dlg-item.selected {
  background: var(--primary-soft);
  border-color: var(--primary);
}

.dlg-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dlg-item-main strong {
  font-size: 0.9rem;
}
.dlg-item-main .small {
  color: var(--muted-fg);
}

.dlg-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.15s var(--ease),
    transform 0.15s var(--ease);
}

.dlg-item.selected .dlg-check {
  opacity: 1;
  transform: none;
}

.dlg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px 20px;
}

.dlg-foot .small {
  color: var(--muted-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dlg-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.dlg-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dlg-actions .btn:disabled:hover {
  background: var(--primary);
  box-shadow: none;
}

/* ==========================================================================
   Notification
   ========================================================================== */

#toast {
  position: fixed;
  /* Au-dessus de l'ecran de formules (60) : ses messages doivent se voir. */
  z-index: 70;
  bottom: 22px;
  right: 22px;
  display: none;
  padding: 13px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  animation: toast-in 0.25s var(--ease);
}

#toast.success {
  border-left-color: var(--success);
}
#toast.error {
  border-left-color: var(--danger);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Adaptatif
   ========================================================================== */

@media (max-width: 1240px) {
  .dash-grid,
  .camp-dash,
  .brief-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .brief-rail {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .brief-rail .card {
    flex: 1 1 260px;
  }
  .dash-rail {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .dash-rail .card {
    flex: 1 1 280px;
  }
}

@media (max-width: 1100px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  #app {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  #sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }

  .sidebar-brand {
    padding: 0 12px 0 0;
    margin: 0;
    border-bottom: 0;
    border-right: 1px solid var(--border-soft);
    font-size: 1.5rem;
  }

  .sidebar-nav {
    flex-direction: row;
    gap: 4px;
  }
  .sidebar-nav a {
    white-space: nowrap;
  }

  /* La barre devient horizontale : « en bas » n'a plus de sens, le groupe se
     place a la fin de la ligne. */
  .sidebar-bas {
    margin-top: 0;
    margin-left: auto;
    padding-top: 0;
    padding-left: 12px;
    border-top: 0;
    border-left: 1px solid var(--border-soft);
  }

  #content {
    padding: 20px 16px 48px;
  }
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Admin & onboarding */
.admin-section {
  margin-bottom: 2rem;
}
.admin-section h3 {
  margin-bottom: 0.75rem;
}
.onboarding {
  margin-bottom: 1.5rem;
  background: var(--primary-soft);
  border: 1px solid var(--primary);
}
.onboarding-steps {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.onboarding-steps .step {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
  text-decoration: none;
}
.onboarding-steps .step:hover {
  border-color: var(--primary-strong);
}
.onboarding-steps .step.done {
  color: var(--muted-fg);
  border-style: dashed;
  opacity: 0.75;
  cursor: default;
}
.table-wrap {
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  padding: 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.data-table th {
  color: var(--muted-fg);
  font-weight: 600;
}
.data-table .empty {
  text-align: center;
  color: var(--muted-fg);
  padding: 1rem;
}

/* ==========================================================================
   Boite de reception / AI Inbox
   ========================================================================== */

.inbox-grid {
  grid-template-columns: 320px 1fr;
  align-items: start;
}

#conversation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.conversation-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background 0.15s var(--ease),
    border-color 0.15s var(--ease);
}
.conversation-item:hover {
  background: var(--muted-bg);
  border-color: var(--primary);
}
.conversation-item.active {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.conversation-name {
  font-weight: 600;
  font-size: 0.9rem;
}
.conversation-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

#conversation-detail {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}
.conversation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.conversation-header h3 {
  margin: 0;
}
.conversation-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.messages-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  max-height: 500px;
  overflow-y: auto;
}
.message-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.message-bubble.left {
  align-self: flex-start;
  background: var(--muted-bg);
}
.message-bubble.right {
  align-self: flex-end;
  background: var(--primary-soft);
  border-color: var(--primary);
}
.message-sender {
  color: var(--muted-fg);
  margin-bottom: 4px;
}
.message-text {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.reply-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reply-actions {
  display: flex;
  justify-content: flex-end;
}
.suggestion-box {
  padding: 12px;
  background: var(--muted-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.suggestion-box.hidden {
  display: none;
}

@media (max-width: 860px) {
  .inbox-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Complements — composants introduits par la refonte fonctionnelle
   ==========================================================================
   La direction artistique reste « Lime Frost » : cartes arrondies, lime en
   SURFACE uniquement, ombres douces, pile systeme. Ce bloc habille les
   briques ajoutees avec le nouveau tableau de bord (bande d'indicateurs,
   file du matin, entonnoir), la palette ⌘K et les en-tetes de page — sans
   toucher aux regles ci-dessus.

   Contrainte tenue : le lime (#aff33e, 1.3:1 sur blanc) ne porte jamais de
   texte ni une information seule. Quand une valeur doit se detacher, c'est
   --primary-strong (#65a30d) ou --slate qui s'en charge.
   ========================================================================== */

/* --- Vocabulaire typographique ------------------------------------------ */

/* Sur-titre d'un ecran. Discret : il situe, il n'annonce pas. */
.t-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.t-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.t-label--accent {
  color: var(--primary-strong);
}

.t-lead {
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted-fg);
  max-width: 68ch;
}

/* Chargement : les etiquettes et la structure s'affichent tout de suite, les
   valeurs sont remplacees par des tirets a chasse fixe. Rien ne bouge quand
   la donnee arrive, puisque les chiffres sont deja en `tnum`. Un « skeleton »
   anime aurait fait clignoter la page a chaque changement de periode. */
.t-attente {
  font-family: var(--font-mono);
  opacity: 0.35;
  user-select: none;
}

/* Colonne chiffree : chasse fixe et alignement a droite, sinon les nombres
   ne se comparent pas d'une ligne a l'autre. */
.num,
td.num,
th.num {
  text-align: right;
  white-space: nowrap; /* « 40,4 % » ne doit pas se couper entre le nombre et l'unite */
  font-variant-numeric: tabular-nums;
}

/* --- En-tete de page ----------------------------------------------------- */

.page-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.page-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- Rail : compteur d'attente ------------------------------------------- */

/* Le nombre d'elements qui attendent vraiment une action. Colle au libelle
   sans cette mise en forme. */
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-compteur {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--muted-bg);
  color: var(--muted-fg);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.sidebar-nav a.active .nav-compteur {
  background: rgba(0, 0, 0, 0.14);
  color: var(--on-primary);
}

/* --- Badge de raccourci clavier (utilise par la palette) ------------------ */

.kbd {
  flex-shrink: 0;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--muted-fg);
  white-space: nowrap;
}

/* --- Palette de navigation (⌘K) ------------------------------------------ */

.palette-fond {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 20px 20px;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: palette-entree 0.18s var(--ease);
}

@keyframes palette-entree {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.palette {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.palette-champ {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.palette-chevron {
  color: var(--primary-strong);
  font-weight: 700;
}
.palette-champ input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--fg);
}
.palette-champ input:focus {
  outline: none;
  box-shadow: none;
}

.palette-liste {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 42vh;
  overflow-y: auto;
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg);
}
/* L'item courant reprend l'aplat lime de la navigation : un seul vocabulaire
   de selection dans tout le produit. */
.palette-item.actif {
  background: var(--primary);
  color: var(--on-primary);
}
.palette-detail {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--muted-fg);
}
.palette-item.actif .palette-detail {
  color: var(--on-primary);
  opacity: 0.7;
}
.palette-vide {
  padding: 14px 12px;
  font-size: 0.875rem;
  color: var(--muted-fg);
}

/* --- Bande d'indicateurs ------------------------------------------------- */

/* UNE carte divisee en six colonnes, et non six cartes cote a cote.
   Six bordures, six ombres et six rayons pour six nombres, c'etait beaucoup
   d'habillage : les valeurs se comparent mieux quand rien ne les separe
   qu'un filet. */
.kpi-bande {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.kpi-bande .kpi {
  padding: 16px 18px 14px;
  border: 0;
  border-left: 1px solid var(--border-soft);
  border-radius: 0;
  box-shadow: none;
}
.kpi-bande .kpi:first-child {
  border-left: 0;
}

/* Le filet lime coiffait les six colonnes a l'identique, ce qui annulait la
   hierarchie : le seul indicateur sur lequel on peut agir doit etre le seul
   marque. Les cinq autres decrivent. */
.kpi-bande .kpi::after {
  content: none;
}
.kpi-bande .kpi.actionnable::after {
  content: '';
}
.kpi-bande .kpi-value {
  font-size: 1.6rem;
  white-space: nowrap;
}
/* L'unite accompagne le chiffre, elle ne le concurrence pas. */
.kpi-unite {
  font-size: 0.62em;
  font-weight: 600;
  padding-left: 0.1em;
}
.kpi-bande .kpi-label {
  font-size: 0.78rem;
}
.kpi-bande .kpi-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* Le pied colle a gauche : avec space-between herite, une carte a deux
     elements les ecartait aux extremites quand ses voisines n'en avaient
     qu'un, et la bande perdait son alignement. */
  justify-content: flex-start;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--muted-fg);
}

/* Le seul indicateur sur lequel on peut agir tout de suite est le seul
   marque : filet lime en tete, fond tres pale, valeur en lime lisible. Les
   cinq autres decrivent, celui-la commande. */
.kpi-bande .kpi.actionnable {
  background: var(--primary-soft);
}
.kpi.actionnable .kpi-value {
  color: var(--primary-strong);
}
.kpi.actionnable .kpi-label {
  color: var(--primary-strong);
  font-weight: 600;
}

/* En dessous de six colonnes, les filets verticaux ne suffisent plus : il
   faut aussi separer les rangees. */
@media (max-width: 1400px) {
  .kpi-bande {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kpi-bande .kpi:nth-child(3n + 1) {
    border-left: 0;
  }
  .kpi-bande .kpi:nth-child(n + 4) {
    border-top: 1px solid var(--border-soft);
  }
}
@media (max-width: 780px) {
  .kpi-bande {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpi-bande .kpi:nth-child(odd) {
    border-left: 0;
  }
  .kpi-bande .kpi:nth-child(n + 3) {
    border-top: 1px solid var(--border-soft);
  }
}

/* --- File du matin ------------------------------------------------------- */

/* Le premier element est ouvert — bordure lime, message cite, action
   visible ; les suivants sont au repos. C'est ce bloc qui fait terminer le
   tableau de bord sur une action plutot que sur des compteurs. */
.file-item {
  display: block;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
  transition:
    background 0.15s var(--ease),
    border-color 0.15s var(--ease);
}
.file-item:last-child {
  margin-bottom: 0;
}

/* Le survol entoure, et rien de plus. Un bouton revele ici faisait grandir la
   carte, descendre les suivantes, et bouger le graphique d'engagement dans la
   colonne voisine — un mouvement a cote de ce qu'on regarde. Une couleur de
   bordure ne change aucune dimension.

   `:focus-visible` autant que `:hover` : au clavier il n'y a pas de survol, et
   la carte parcourue doit se voir. */
.file-item:hover,
.file-item:focus-visible {
  background: var(--primary-soft);
  border-color: var(--primary-strong);
  color: var(--fg);
  outline: none;
}

/* La premiere carte n'a plus de couleur propre. Elle portait le fond vert pale
   et la bordure sombre du temps ou elle etait « ouverte », avec son bouton
   visible. Depuis que le survol emploie exactement ces deux valeurs, elle
   paraissait survolee en permanence — et le survol reel ne changeait plus rien
   sur elle.

   Ce qui la distingue reste : sa reponse se lit entre guillemets, en texte
   plein (`.file-extrait.citation`). Une difference de contenu, qui n'entre pas
   en conflit avec un etat d'interaction. */

.file-tete {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.file-nom {
  font-size: 0.9rem;
  font-weight: 600;
}
.file-quand {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--muted-fg);
}
.file-qualite {
  margin-top: 3px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-extrait {
  margin-top: 7px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted-fg);
}
.file-extrait.citation {
  color: var(--fg);
}

/* --- Entonnoir des deals ------------------------------------------------- */

.pipe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.pipe-etape {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
/* Le liseré s'attenue le long de l'entonnoir : le sens de lecture est dans la
   couleur, ce qu'une serie categorielle ne dirait pas. Le libelle reste
   explicite — la teinte ne porte jamais l'information seule. */
.pipe-trait {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--primary);
}
.pipe-trait.t2 {
  background: rgba(175, 243, 62, 0.7);
}
.pipe-trait.t3 {
  background: rgba(175, 243, 62, 0.5);
}
.pipe-trait.t4 {
  background: rgba(175, 243, 62, 0.32);
}
.pipe-libelle {
  padding-top: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}
.pipe-val {
  font-size: 0.78rem;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .pipe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Suppression d'une ligne --------------------------------------------- */

/* Un cadre rouge sur chaque ligne criait plus fort que la donnee qu'il
   accompagne : la couleur n'arrive qu'au survol, quand l'intention se forme. */
.btn-supprimer {
  padding: 2px 7px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted-fg);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s var(--ease),
    color 0.15s var(--ease);
}
.btn-supprimer:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Une campagne en pause s'eteint plutot que de porter un marqueur de plus. */
.row-muted td,
.row-muted td a {
  color: var(--muted-fg);
}

/* --- Confort de lecture -------------------------------------------------- */

/* Un utilisateur qui a demande moins d'animation n'en recoit aucune. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Marque : monogramme + nom ------------------------------------------------ */

/* Le nom accompagne le glyphe. `.brand` est en `inline-flex` avec le monogramme
   dimensionne par `.sidebar-brand` (1.9rem) : le nom se cale dessus en `em`
   pour rester proportionne si la taille du bloc change. */
.brand {
  gap: 0.32em;
  align-items: baseline;
}
.brand-nom {
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}
/* Le bloc marque n'est plus un glyphe centre : c'est un logotype surmontant
   l'espace de travail. Il passe donc en colonne et s'aligne a gauche, comme
   les entrees de navigation en dessous. Sans `flex-direction`, « Isorava » et le
   nom de l'espace se retrouvaient colles sur la meme ligne. */
.sidebar-brand {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 13px;
  padding-right: 13px;
}

/* --- Pastilles d'etat ---------------------------------------------------- */

/* Plein contre contour, et non deux ronds pleins que seule la couleur
   distinguait — le gris #cbd5e1 ne faisait que 1.48:1, quasi invisible. La
   forme porte desormais l'information autant que la teinte. */
.dot.off {
  background: transparent;
  border: 1.5px solid var(--muted-fg);
}

/* --- Etats vides --------------------------------------------------------- */

/* Un tableau vide affichait « Aucune entreprise » dans une cellule, alors que
   c'est souvent le tout premier ecran d'un compte neuf. Un etat vide dit ce
   qui manque ET par ou commencer. */
.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 20px;
  text-align: center;
  color: var(--muted-fg);
}
.etat-vide strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
}
.etat-vide p {
  margin: 0;
  font-size: 0.875rem;
  max-width: 46ch;
}
/* Dans une cellule de tableau, l'etat vide occupe toute la largeur sans
   heriter de la hauteur de ligne ni du filet bas. */
td > .etat-vide {
  padding: 28px 20px;
}
tbody tr.ligne-vide td {
  height: auto;
  border-bottom: 0;
}
tbody tr.ligne-vide:hover td {
  background: none;
}

/* --- Rail : espace de travail et deconnexion ----------------------------- */

/* Reloge depuis la barre du haut supprimee. Sous la marque, l'espace situe le
   travail sans occuper une bande entiere pour trois elements. */
.sidebar-espace {
  margin-top: 10px;
  padding-left: 2px;
  min-width: 0;
}
.sidebar-espace .nom {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-espace .role {
  display: block;
  font-size: 0.72rem;
  color: var(--muted-fg);
}

/* La deconnexion se fait une fois par jour : elle reste discrete, et ne prend
   sa couleur d'alerte qu'au survol. */
.sidebar-nav a.nav-deconnexion {
  color: var(--muted-fg);
}
.sidebar-nav a.nav-deconnexion:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

/* --- En-tete de page : actions groupees a droite ------------------------- */

.page-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.page-head-actions .tabs {
  margin-bottom: 0;
}
.page-head-actions .btn {
  text-decoration: none;
}

/* Consequence de l'absence de compte LinkedIn, reprise dans « Premiers pas »
   depuis que le bandeau d'alerte est masque sur le tableau de bord. */
.onboarding-note {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--muted-fg);
}

/* --- Graphique : survol et zone de clic ---------------------------------- */

/* Zone de survol invisible sur toute la hauteur de la colonne. Sans elle il
   fallait viser le sommet d'une barre parfois haute de trois pixels. */
.chart .bar-zone {
  fill: transparent;
}
.chart .bar-groupe:hover .bar-zone,
.chart .bar-groupe.actif .bar-zone {
  fill: color-mix(in srgb, var(--primary) 14%, transparent);
}
.chart .bar-groupe.actif .bar {
  fill: var(--primary-hover);
}

/* Infobulle : suit la barre survolee, centree dessus. `translateX(-50%)` la
   recentre sur le point donne en pourcentage. */
.chart-bulle {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 10px;
  background: var(--slate);
  color: var(--on-slate);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  pointer-events: none; /* ne doit jamais voler le survol a la barre */
  white-space: nowrap;
}
.chart-bulle strong {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.chart-bulle span {
  font-size: 0.68rem;
  opacity: 0.75;
}

/* --- Campagnes en colonne etroite ---------------------------------------- */

/* Le bloc a rejoint la colonne de droite : une liste, plus un tableau. */
.camp-ligne {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg);
}
.camp-ligne:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.camp-ligne:hover {
  color: var(--fg);
}
.camp-ligne:hover .camp-nom {
  color: var(--primary-strong);
}

.camp-tete {
  display: flex;
  align-items: center;
  gap: 8px;
}
.camp-nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
}
.camp-chiffres {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
  padding-left: 14px;
  font-size: 0.78rem;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}
.camp-chiffres .taux {
  margin-top: 0;
  margin-left: auto;
}

/* --- Corps du tableau de bord : deux colonnes de meme hauteur ------------ */

/* `align-items: start` laissait chaque colonne a sa hauteur propre : le
   graphique seul a gauche faisait 293px face a 938px a droite. On les etire
   donc a la meme hauteur, et c'est le graphique qui absorbe la difference —
   il y gagne, une courbe ecrasee sur 168px se lit mal. */
.dash-grid {
  align-items: stretch;
  /* Le bloc Pipeline suit immediatement : sans cette marge il se collait au
     corps. Les cartes portent leur propre `margin-bottom`, mais celles de la
     colonne principale ne l ont plus depuis qu elles s etirent. */
  margin-bottom: 20px;
}
/* C'est la colonne de DROITE qui commande la hauteur, la gauche s'y adapte.
   Tant que la carte Engagement participait au calcul, le graphique poussait
   la ligne a 870px face a 650px de contenu reel a droite — d'ou un bloc qui
   paraissait trop grand, avec du blanc en bas.
   La sortir du flux (`position: absolute`) annule sa hauteur intrinseque : la
   ligne est alors dimensionnee par la seule colonne de droite, et la carte
   vient la remplir exactement. `min-height: 0` seul ne suffisait pas — un
   enfant flex refuse de descendre sous sa taille de contenu. */
.dash-main {
  position: relative;
  min-height: 0;
}
.dash-main > .card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}
/* La zone du graphique prend toute la hauteur restante de sa carte... */
.dash-main > .card > #dash-engagement {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* ...et le graphique remplit exactement ce qui reste. Un plafond avait ete
   pose ici : il laissait la carte s etirer sans que le trace suive, donc une
   bande blanche en bas qui faisait paraitre le bloc trop grand. La hauteur du
   graphique est desormais celle de la colonne de droite, ni plus ni moins. */
#dash-engagement .chart {
  flex: 1;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}
#dash-engagement .chart-empty {
  flex: 1;
}

/* --- Page Reponses : barre de filtres ------------------------------------ */

.setter-filtres {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.setter-filtres .tabs {
  margin-bottom: 0;
}
.setter-filtres-droite {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
/* Les champs de formulaire portent une marge basse par defaut : elle
   decalerait la barre par rapport aux segments. */
.setter-filtres-droite select,
.setter-filtres-droite input {
  width: auto;
  margin-bottom: 0;
}
.setter-filtres-droite select {
  min-width: 180px;
}
.setter-filtres-droite input {
  min-width: 220px;
}

/* Compteur accole au libelle du filtre : la repartition se lit sans cliquer. */
.tab-n {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--muted-bg);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.tab.active .tab-n {
  background: rgba(0, 0, 0, 0.14);
}

@media (max-width: 900px) {
  .setter-filtres-droite {
    margin-left: 0;
    width: 100%;
  }
  .setter-filtres-droite select,
  .setter-filtres-droite input {
    flex: 1;
    min-width: 0;
  }
}

/* Pagination d'un tableau long (Prospects). Centree, discrete : c'est une
   commande de parcours, pas une action de la page. */
.pagination {
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.pagination .small {
  color: var(--text-2, #475569);
  min-width: 12ch;
  text-align: center;
}

/* Le titre et sa pastille forment un bloc ; sans ce groupement, la pastille
   passait a la ligne des qu'un champ de recherche partageait l'en-tete. */
.card-head > div > h3 + .small {
  margin: 2px 0 0;
}

/* Recherche logee dans l'en-tete d'un tableau : large sans prendre toute la
   ligne, sinon elle pousse le titre et se lit comme le sujet de la carte.

   `input.recherche-table` et non `.recherche-table` seule : la regle generique
   `input[type='search']` pose `width: 100%` avec une specificite de (0,1,1),
   qu'une simple classe (0,1,0) ne peut pas depasser. La marge basse des champs
   de formulaire n'a pas lieu d'etre ici non plus. */
input.recherche-table {
  width: min(340px, 45%);
  margin-bottom: 0;
}
@media (max-width: 720px) {
  input.recherche-table {
    width: 100%;
  }
}

/* E-mail et telephone dans un tableau : cliquables, mais sans la couleur ni le
   soulignement d'un lien de navigation. Une colonne entiere de liens bleus se
   lirait comme une liste d'actions alors que ce sont des donnees. */
.lien-discret {
  color: inherit;
  text-decoration: none;
}
.lien-discret:hover,
.lien-discret:focus-visible {
  text-decoration: underline;
}

/* Avertissement bloquant dans un encadre : la campagne est pleine, l'action
   demandee n'aboutira pas. Rouge, contrairement au `notice` neutre qui informe. */
.notice.danger {
  border-color: var(--danger);
}
.notice.danger strong {
  color: var(--danger);
}

/* Le plafond approche sans etre atteint : on colore sans encadrer, l'action
   reste possible. */
.small.avertissement {
  color: var(--warning);
  font-weight: 600;
}

/* Comptes LinkedIn relies : nom, profil public, initiales. */
.comptes-linkedin li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comptes-linkedin .rail-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
}

.comptes-linkedin .rail-name a {
  font-weight: 400;
}

.comptes-linkedin .rail-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.avatar-initiales {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--slate);
  color: var(--on-slate);
  font-size: 0.8rem;
  font-weight: 700;
}

/* --- Cloche de notifications -------------------------------------------- */
.cloche-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 13px;
  border: 0;
  background: transparent;
  color: var(--muted-fg);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.cloche-btn:hover,
.cloche-btn[aria-expanded='true'] {
  background: var(--muted-bg);
  color: var(--fg);
}
.cloche-compteur {
  background: var(--primary);
  color: var(--on-primary);
}
.cloche-panneau {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  width: min(380px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow: auto;
  background: var(--popover);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 900px) {
  .cloche-panneau {
    left: 248px;
  }
}
.cloche-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.cloche-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cloche-liste li > a,
.cloche-liste li > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
}
.cloche-liste li > a:hover {
  background: var(--muted-bg);
}
.cloche-liste li.non-lue > a,
.cloche-liste li.non-lue > div {
  box-shadow: inset 3px 0 0 var(--primary-strong);
}
.cloche-liste .empty {
  padding: 18px 14px;
}
.cloche-date {
  color: var(--muted-fg);
}

/* Protection du compte LinkedIn (pause, montee en charge). */
.comptes-linkedin .protection {
  font-weight: 400;
  color: var(--muted-fg);
}

/* --- Etiquettes (criteres de recherche, personas, tranches) --------------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.chip:hover,
.chip.on,
.chip[aria-pressed='true'] {
  border-color: var(--primary-strong);
  background: var(--primary-soft);
}
.chip.critere {
  cursor: default;
}
.chip .small {
  color: var(--muted-fg);
}
.chip-x {
  border: 0;
  background: transparent;
  color: var(--muted-fg);
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.chip-x:hover {
  color: var(--fg);
}
.rc-criteres {
  margin: 12px 0;
}
tr.attenue td {
  opacity: 0.6;
}