/* ============================================================
   DASHBOARD V2 — feuille de style
   Calquée sur l'interface du CRM Talvo : mêmes tokens, même
   densité, mêmes composants (pilules de période, tuiles à icône
   colorée, cartes avec texte explicatif sous le titre).
   ============================================================ */

:root {
  /* 03/11 — LA PALETTE DU CRM, STYLE APPLE (« la même DA que le CRM partout ») : noir, gris #1C1C1E / #2C2C2E,
     séparateurs fins, texte secondaire rgba(235,235,245,.6), bleu adouci #4387E0. Recopiée de lc-crm `globals.css`. */
  color-scheme: dark;

  /* --- surfaces --- */
  --background:         #000000;   /* le corps, derrière tout */
  --content:            #000000;   /* la zone de contenu = le fond de page, comme L'agence, Fleetroom et Talvo (les cartes sont PLUS CLAIRES que le fond, comme dans le kit) */
  --surface:            #1c1c1e;   /* cartes — mesuré dans Talvo */
  --surface-2:          #2c2c2e;   /* blocs imbriqués, plus sombres que la carte */
  --raised:             #2c2c2e;
  --sidebar:            #000000;
  --sidebar-active:     rgba(255, 255, 255, .09);

  /* --- encre --- */
  --ink:                #ffffff;
  --ink-soft:           rgba(235, 235, 245, .6);
  /* Talvo teinte le texte de sa barre laterale en bleu tres pale,
     pas en gris neutre. C est une part de la difference qu on voyait. */
  --nav-ink:            rgba(235, 235, 245, .86);   /* CRM : muted-foreground, entrées ET titres de groupe (12/10) */
  --nav-label:          rgba(235, 235, 245, .6);
  --ink-mute:           rgba(235, 235, 245, .5);

  /* --- accent --- */
  --primary:            #4387e0;   /* mesuré dans Talvo */
  --primary-hover:      #5a96e4;
  --primary-ink:        #ffffff;
  --primary-soft:       rgba(67, 135, 224, .14);
  --primary-rgb:        67, 135, 224;   /* pour les halos rgba(var(--primary-rgb), x) */
  --primary-fg:         #9cc0ee;

  /* --- lignes --- */
  --line:               rgba(84, 84, 88, .48);
  --line-strong:        rgba(118, 118, 128, .32);
  --input-bg:           rgba(255, 255, 255, .07);   /* Talvo : le champ a le fond de la page */

  /* --- séries de graphiques (ordre fixe, jamais cyclé) --- */
  --series-1: #3987e5;  --series-2: #d95926;  --series-3: #199e70;
  --series-4: #c98500;  --series-5: #d55181;  --series-6: #008300;
  --series-7: #9085e9;  --series-8: #e66767;
  /* Agence de chatting : ta part — BLEU, comme le net (12/10). Elle
     était rose ; « il y a vert et rose… il faut que ce soit bleu » (le
     porteur du projet) : ce que tu prends est ton net, et le net est
     bleu dans toute l'application. */
  --chatting: #3987e5;  --chatting-texte: #9cc4f5;

  /* --- statuts (réservés, jamais utilisés comme série) --- */
  /* Ce qui entre et ce qui sort ont leur propre paire, distincte des
     couleurs de séries : ce n'est pas une identité parmi huit, c'est
     un sens. Le rouge est un rouge de série — pas `--critical`, qui
     reste réservé aux états. Séparation daltonisme contre le bleu :
     ΔE 24,8 en protanopie, 35,2 en tritanopie, contraste ≥ 3:1 sur
     la surface #191b1e. */
  --gains:    #3987e5;
  --depenses: #e2483f;
  /* Le texte d'un montant négatif : le rouge des dépenses, éclairci
     pour rester lisible en petit sur fond sombre. */
  --negatif:  #ff5c5c;
  /* Brut en VERT, net en BLEU, dans toute l'application — choix du
     propriétaire. Le bleu du net est celui des gains sur les courbes. */
  --brut:        #22a565;
  --brut-texte:  #74dca2;
  --net:         #3987e5;
  --net-texte:   #9cc4f5;
  /* Ce qui sort, en trois natures : dépense ROUGE, abonnement ORANGE,
     paye d'équipe VIOLET — sur le calendrier, la courbe et les listes. */
  --sortie-depense:    #e2483f;
  --sortie-abonnement: #c98500;
  --sortie-equipe:     #9085e9;

  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;

  /* --- teintes des tuiles à icône --- */
  --tile-blue:   #3987e5;  --tile-violet: #9085e9;  --tile-teal:  #17a2a2;
  --tile-green:  #22a565;  --tile-pink:   #d55181;  --tile-amber: #c98500;

  /* --- chrome des graphiques --- */
  --grid:     rgba(255, 255, 255, .05);
  --axis:     rgba(255, 255, 255, .12);

  /* --- géométrie --- */
  --r-sm: 8px;
  --r:    16.8px;   /* rayon des cartes, mesuré */
  --r-lg: 16px;
  --sidebar-w: 214px;   /* la barre du kit : 214 px */
  --topbar-h:  auto;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Geist", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.3);
  /* Le contour des cartes du CRM : un anneau d'un pixel (ring-1 ring-foreground/5)
     et une ombre douce (shadow-sm), pas une bordure (12/10). */
  /* L'espace intérieur d'une carte : celui du CRM (card-spacing 4 = 16 px, 27/10). */
  --pad-carte: 16px;
  --ring-carte: none;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.018em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); background-clip: content-box; }

/* ------------------------------------------------------------
   Connexion
   ------------------------------------------------------------ */
.auth-screen {
  display: grid; place-items: center; min-height: 100svh; padding: 24px;
  background:
    radial-gradient(56rem 36rem at 50% -12%, rgba(48,128,255,.11), transparent 62%),
    var(--background);
}
.auth-card {
  width: 100%; max-width: 392px; padding: 30px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 15px;
}
.auth-logo { display: flex; align-items: center; gap: .45rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; }
.auth-logo svg { width: 1.05em; height: 1.05em; }
.auth-sub { color: var(--ink-mute); font-size: .85rem; margin-bottom: 4px; }
.auth-error {
  font-size: .82rem; color: #ff8f91; background: rgba(208,59,59,.1);
  border: 1px solid rgba(208,59,59,.28); border-radius: var(--r-sm); padding: 9px 11px;
}
.auth-hint { font-size: .78rem; color: var(--ink-mute); text-align: center; }
/* Le code d'accès (13/10) : le même écran que la connexion, posé PAR-DESSUS
   tout le reste — rien du Dashboard ne doit se voir derrière. */
#code-screen { position: fixed; inset: 0; z-index: 1000; }
.code-champ { letter-spacing: .5em; text-align: center; font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Ossature
   ------------------------------------------------------------ */
.layout { display: flex; min-height: 100svh; }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  /* Pas de bordure : Talvo n en a aucune. Le liseré clair se lisait
     comme un rebord bleuté contre le bleu nuit de la barre. */
  background: var(--sidebar);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100svh; z-index: 30;
}
.sidebar-head {
  display: flex; align-items: center; gap: 6px;
  padding: 16px 16px 4px; flex: none;
}

/* Les carrés Paramètres et Profil, au-dessus du menu — le CRM au pixel
   (12/10) : 64 px de haut, rayon 14, fond à peine plus clair, anneau
   d'un pixel ; la page ouverte s'éclaire et son icône prend la couleur. */
.carres-barre { display: flex; gap: 8px; padding: 12px 12px 0; flex: none; }
.carres-barre .carre {
  flex: 1; min-width: 0; height: 64px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: 14px; font-size: 12px; line-height: 16px; font-weight: 500;
  color: var(--nav-ink); background: rgba(255, 255, 255, .03);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
  transition: background .15s, color .15s, box-shadow .15s;
}
.carres-barre .carre:hover { background: rgba(255, 255, 255, .06); color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .05); }
.carres-barre .carre.active { background: rgba(255, 255, 255, .08); color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.carres-barre .carre.active svg { color: var(--primary); }
.carre-mot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* Spécificité volontaire : .icon-btn est déclaré plus bas avec
   display:inline-grid et écraserait un simple .sidebar-close{display:none}. */
.icon-btn.sidebar-close { display: none; margin-left: auto; }

/* `min-height: 0` est indispensable : sans lui un enfant de colonne
   flex refuse de rétrécir sous la hauteur de son contenu, et le menu
   déborde sur le profil au lieu de défiler. */
/* Mesures relevées sur le CRM Talvo, à ne pas retoucher :
   padding 16px 12px, 20px entre les sections, items de 34px. */
.nav {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 20px;

  /* La barre de défilement ne se montre qu'au survol. Elle était
     visible en permanence, collée au bord droit : sur un menu qui
     tient presque tout entier, ça se lit comme un défaut de mise en
     page plutôt que comme une aide. Firefox n'a pas d'équivalent au
     survol, on la lui laisse fine. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .18s;
}
.nav:hover, .nav:focus-within {
  scrollbar-color: rgba(255,255,255,.14) transparent;
}
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.nav:hover::-webkit-scrollbar-thumb,
.nav:focus-within::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
.nav::-webkit-scrollbar-track { background: transparent; }

/* --- sections repliables --- */
.nav-section { display: grid; }

/* Au repos, ce bouton doit être indiscernable du simple libellé de
   section du CRM : mêmes taille, graisse, couleur, espacement. Le
   chevron ne se montre qu'au survol — replier reste possible sans que
   la barre en ait l'air. */
.nav-label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; font-family: inherit; text-align: left; cursor: pointer;
  background: transparent; border: 0;
  font-size: 10.5px; font-weight: 500; line-height: 1.5;
  text-transform: uppercase; letter-spacing: .11em;
  color: var(--nav-label); padding: 0 8px 6px;   /* titre de groupe du kit : 10,5 px, capitales, .11em */
  transition: color .12s;
}
.nav-label:hover { color: var(--ink-soft); }
.nav-chevron {
  flex: none; opacity: 0; transition: transform .16s ease, opacity .12s ease;
}
.nav-label:hover .nav-chevron,
.nav-label:focus-visible .nav-chevron,
.nav-label[aria-expanded="false"] .nav-chevron { opacity: .75; }
.nav-label[aria-expanded="false"] .nav-chevron { transform: rotate(-90deg); }
.nav-items { display: grid; gap: 2px; }
.nav-label[aria-expanded="false"] + .nav-items { display: none; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 9px;
  font-size: 14px; line-height: 20px; font-weight: 400; color: var(--nav-ink);   /* entrée du kit : 14 px, rayon 9, py 10 */
  transition: all .15s;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(255, 255, 255, .04); color: var(--ink); }
.nav-item.active { background: rgba(255, 255, 255, .07); color: var(--ink); font-weight: 500; }
.nav-item.active .nav-ico { color: var(--primary); }
.nav-ico { width: 16px; display: inline-grid; place-items: center; color: currentColor; font-size: .95em; flex: none; }

.sidebar-foot {
  padding: 10px; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; align-items: center; gap: 10px; flex: none;
}
/* « Installer l'appli », juste au-dessus du compte. */
.installer-appli { margin: 0 14px 10px; flex: none; }
/* Dans l'appli installée sur iPhone : rien sous l'encoche ni sous la barre du bas. */
@media (display-mode: standalone) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}
.user-chip { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding: 8px; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 99px; flex: none;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  background: #c2410c; color: #fff;
}
.user-meta { min-width: 0; display: grid; }
.user-name { font-size: 13px; font-weight: 500; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: 12px; color: rgba(234,235,237,.55); }

.sidebar-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 29; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--content); }

/* --- en-tête de page --- */
.topbar {
  display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;
  padding: 24px 24px 16px;
  background: var(--content);
}
/* Largeur plancher : sous 240px les filtres passent à la ligne plutôt
   que d'écraser le titre, qui se coupait en deux. */
.topbar-title { flex: 1 1 240px; min-width: 240px; }
.topbar-title h1 { font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -.01em; text-wrap: balance; }
.page-sub { font-size: 14px; color: var(--ink-mute); margin-top: 2px; }
/* `min-width: 0` : sans lui, la barre de périodes impose sa largeur au
   parent et pousse toute la page vers la droite sur petit écran. */
.topbar-filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-width: 0; max-width: 100%;
}
/* « ↻ Recharger » : l'appli installée n'a pas le bouton du navigateur. */
.bouton-recharger { display: inline-flex; align-items: center; gap: 6px; }
.recharger-ico { font-size: 1rem; line-height: 1; display: inline-block; }
.bouton-recharger.en-cours .recharger-ico { animation: tourner .7s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .recharger-texte { display: none; } }
.icon-btn.sidebar-open { display: none; }

/* ------------------------------------------------------------
   `min-width: 0` sur toute la chaîne, et c'est indispensable.

   Un enfant de flex vaut `min-width: auto` par défaut : il refuse de
   descendre sous la largeur intrinsèque de son contenu. Un tableau de
   quatorze colonnes poussait donc `.view` à 1 100 px dans une fenêtre
   de 500 — et avec elle les cartes, les onglets et le bandeau, alors
   même que `.table-wrap` avait son `overflow-x: auto` prêt à servir.

   Il ne pouvait pas servir : une boîte ne défile que si sa propre
   largeur est contrainte. Sans cette règle, tout l'écran débordait
   pour un seul tableau.
   ------------------------------------------------------------ */
.view { padding: 0 24px 32px; flex: 1; min-width: 0; }
.view > * + * { margin-top: 18px; }
.view > *, .card, .card-corps, .table-wrap { min-width: 0; }

/* Le même rythme vertical à l'intérieur d'une vue qu'entre les vues.
   Sans ça, un écran qui empile bandeau + carte dans un seul conteneur
   les colle l'un à l'autre. */
.stack { display: grid; gap: 18px; align-content: start; }

.loading { display: flex; align-items: center; gap: 10px; color: var(--ink-mute); padding: 60px 0; justify-content: center; }
.spinner {
  width: 16px; height: 16px; border-radius: 99px;
  border: 2px solid rgba(255,255,255,.13); border-top-color: var(--primary);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   Pilules de période (segmented control)
   ------------------------------------------------------------ */
.segmented {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface); border-radius: 14px; padding: 4px;
  box-shadow: var(--ring-carte);
  min-width: 0; max-width: 100%; overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------
   Sur un écran étroit, les périodes passent à la ligne.

   Elles défilaient horizontalement, sans barre visible : « 90 derniers
   jours » se coupait au bord de l'écran et « Choisir le mois » comme
   « Cette année » sortaient carrément du cadre. Rien ne disait qu'on
   pouvait faire glisser — le dashboard paraissait simplement casse.

   Le défilement reste la règle sur grand écran, où la barre tient sur
   une ligne et où un retour à la ligne ferait sauter la mise en page.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .segmented {
    flex-wrap: wrap; overflow-x: visible;
    row-gap: 6px;
  }
  .topbar { padding: 18px 16px 14px; gap: 14px; }
  .topbar-filters { width: 100%; }
  .view { padding: 0 16px 28px; }
}
.segmented button {
  font: inherit; font-size: 12px; font-weight: 500; line-height: 16px;
  padding: 6px 10px; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--nav-ink); border: 0;
  white-space: nowrap; transition: background .12s, color .12s;
}
.segmented button:hover { color: var(--ink); background: var(--raised); }
.segmented button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }

/* ------------------------------------------------------------
   Boutons & contrôles
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; padding: 0 12px; border-radius: 10px;
  border: 1px solid transparent; background: var(--raised); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap;
  cursor: pointer; transition: background .12s, border-color .12s, opacity .12s;
}
.btn:hover { background: #262a30; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.8px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline { background: var(--background); border-color: var(--line); color: var(--ink); }
.btn-outline:hover { background: var(--raised); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.btn-danger { background: transparent; border-color: rgba(208,59,59,.35); color: #ff8f91; }
.btn-danger:hover { background: rgba(208,59,59,.12); }

.icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: 0; background: transparent; color: var(--ink-mute);
  border-radius: var(--r-sm); cursor: pointer; font-size: .88rem;
}
.icon-btn:hover { background: rgba(255,255,255,.07); color: var(--ink); }

.select, .input, .textarea {
  height: 34px; padding: 0 10px; width: 100%;
  background: var(--input-bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 14px;
}
.textarea { height: auto; padding: 10px 12px; min-height: 80px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%237d838e' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-mute); }
.select:focus, .input:focus, .textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(48,128,255,.18);
}
.select-wrap { display: block; }
.input-sm { height: 32px; font-size: .8rem; }

/* `align-content: start` : deux champs côte à côte ont la même hauteur
   de case, mais si l'un porte une aide et pas l'autre, leurs contenus
   ne doivent pas s'étirer — sinon les deux champs se désalignent. */
.field { display: grid; gap: 7px; align-content: start; }
.field > span { font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid { display: grid; gap: 16px; }
.form-actions { display: flex; gap: 9px; justify-content: flex-end; padding-top: 4px; }

/* Bloc dépliable dans un formulaire — les champs facultatifs, rangés
   pour ne pas allonger la saisie courante. */
.form-fold {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 14px; background: var(--surface-2);
}
.form-fold > summary {
  cursor: pointer; font-size: .8rem; font-weight: 500; color: var(--ink-soft);
  list-style: none;
}
.form-fold > summary::-webkit-details-marker { display: none; }
.form-fold > summary::before { content: '▸ '; color: var(--ink-mute); }
.form-fold[open] > summary::before { content: '▾ '; }

/* Liste modifiable des Paramètres */
.liste-tete, .liste-ligne { display: grid; gap: 9px; align-items: center; }
.liste-tete {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-mute); padding: 0 2px 7px;
}
.liste-ligne + .liste-ligne { margin-top: 7px; }
.liste-ligne .input:disabled {
  color: var(--ink-mute); background: var(--surface-2); cursor: not-allowed;
}

/* Choix d'un mois dans la barre du haut */
.month-pick { position: relative; display: inline-flex; }
.month-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 500; line-height: 16px;
  padding: 6px 10px; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--nav-ink);
  border: 0; white-space: nowrap;
  transition: background .12s, color .12s;
}
.month-btn:hover { color: var(--ink); background: var(--raised); }
.month-btn.actif {
  background: var(--primary); color: var(--primary-ink); border-color: transparent;
}

/* Fixe, pas absolu : la barre de périodes défile horizontalement
   (`overflow:auto`) et découpait net la liste des mois. */
.month-pop {
  position: fixed; z-index: 40;
  width: 268px; max-height: 340px; overflow-y: auto;
  padding: 12px; display: grid; gap: 12px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.month-year-label {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  color: var(--ink-mute); padding: 0 2px 7px;
}
.month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.month-cell {
  font: inherit; font-size: 12.5px; padding: 7px 4px; border-radius: 8px;
  background: var(--surface-2); color: var(--ink-soft);
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: background .12s, color .12s;
}
.month-cell:hover { background: rgba(255,255,255,.07); color: var(--ink); }
.month-cell.actif { background: var(--primary); color: var(--primary-ink); font-weight: 600; }
.hint { font-size: .8rem; color: var(--ink-mute); line-height: 1.5; }

/* ------------------------------------------------------------
   Cartes
   ------------------------------------------------------------ */
.card {
  background: var(--surface); box-shadow: var(--ring-carte);
  border-radius: var(--r); padding: var(--pad-carte);
}
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 14px; flex-wrap: wrap;
}
/* `min-width: 0` sur le titre : sans lui il refuse de rétrécir, et ce
   sont les filtres à droite qui s'empilent en colonne. Quand la place
   manque vraiment, ils passent à la ligne ENTIÈRE plutôt que de
   s'empiler un par un. */
.card-head > :first-child { min-width: 0; flex: 0 1 auto; }
.card-head h2 { font-size: 16px; font-weight: 500; letter-spacing: -.005em; }
.card-head .sub { font-size: 13px; color: var(--ink-mute); margin-top: 4px; max-width: 68ch; line-height: 1.5; }
.card-actions {
  /* `nowrap` ici : les filtres restent en ligne. S'ils ne tiennent
     pas, c'est le bloc ENTIER qui passe sous le titre — `.card-head`
     enveloppe — plutôt qu'un empilement d'un contrôle par ligne. */
  display: flex; align-items: center; gap: 9px; flex-wrap: nowrap;
  flex: 0 0 auto; justify-content: flex-end;
}

/* Carte repliable : le chevron devant le titre, le corps qui s'efface. */
.card-titre { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.card-fold {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 1px;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--ink-mute);
  transition: transform .16s ease, color .12s, background .12s;
}
.card-fold:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.card-fold[aria-expanded="false"] { transform: rotate(-90deg); }
.card.replie .card-corps { display: none; }
.card.replie .card-head { margin-bottom: 0; }
/* Un filtre dans un en-tête de carte reste compact : les colonnes de
   la table valent mieux que la largeur d'un menu déroulant. */
.card-actions .select { max-width: 150px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-kpi { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.span-2 { grid-column: span 2; }

/* --- bandeau d'indicateurs, façon Talvo --- */
.kpi-band {
  display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  background: var(--surface); box-shadow: var(--ring-carte);
  border-radius: var(--r); padding: 20px;
}
.kpi-hero { display: flex; align-items: center; gap: 16px; padding-right: 28px; }
.kpi-hero .tile-ico { width: 48px; height: 48px; border-radius: 14px; font-size: 1.15rem; }
.kpi-hero .tile-ico svg { width: 24px; height: 24px; }
.tile-ico-hero { background: rgba(var(--primary-rgb), .15); color: var(--primary); }
.kpi-hero-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--ink-mute); }
.kpi-hero-value { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-top: 2px; }
.kpi-sep { width: 1px; background: var(--line); margin: 0 28px 0 0; flex: none; }

/* Le total de l'agence, dans son encadré.

   Deux grands chiffres côte à côte se lisent comme deux versions du
   même : on hésite sur celui qui compte. L'encadré dit que celui-ci
   est d'une autre nature — le total de l'entreprise, dont ton bénéfice
   n'est qu'une part. Une bordure et un fond à peine plus clair
   suffisent : pas de couleur, qui le ferait passer pour une alerte. */
/* 12/10 : plus d'encadré — « la même DA que le CRM », dont le grand
   chiffre a sa pastille, pas de cadre. C'est elle qui le distingue
   désormais de ton bénéfice, qui n'en a pas. */
.kpi-hero-total { padding-right: 28px; }
.kpi-hero-total .kpi-hero-value { color: var(--ink); }
/* Trois colonnes fixes plutôt qu'un remplissage automatique.

   `auto-fit` casait quatre tuiles sur la première rangée et deux sur
   la seconde selon la largeur disponible : la lecture changeait d'un
   écran à l'autre, et les tuiles de la cascade — frais, part
   collaborateurs, dépenses — ne tombaient jamais au même endroit.
   Trois par rangée, l'ordre de la cascade se lit de gauche à droite
   puis à la ligne, toujours pareil. */
.kpi-rest {
  flex: 1; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 24px; align-content: center;
}
/* Sept ou huit tuiles (Total de l'OFM, avec l'agence de chatting) : quatre par
   rangée sur un grand écran plutôt qu'une tuile seule sur la dernière ; en
   dessous, trois — à quatre, les libellés s'y coupaient (« Frais de platefor… »). */
@media (min-width: 1500px) {
  .kpi-rest.kpi-rest-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .kpi-rest, .kpi-rest.kpi-rest-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Total : ce qui sort, sur sa rangée — le total et ses trois natures (27/10). */
.kpi-band.kpi-sorties { padding-top: 14px; padding-bottom: 14px; }
.kpi-rest.kpi-rest-sorties { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .kpi-rest.kpi-rest-sorties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mini { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tile-ico {
  width: 28px; height: 28px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: .8rem;
}
.tile-ico svg { width: 14px; height: 14px; }
.mini-label { font-size: 12px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-value { font-size: 14px; font-weight: 600; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.mini-note { font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* « On te doit » (Agence de chatting) : un cadre ROUGE tant qu'un lundi
   manque, VERT quand tout est reçu (13/10) — « un cadre rouge quand les
   paiements manquent, un cadre vert quand c'est bon » (le porteur du projet). */
.mini.mini-cadre-rouge, .mini.mini-cadre-vert {
  margin: -9px -11px; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid;
}
.mini.mini-cadre-rouge {
  border-color: color-mix(in srgb, var(--negatif) 55%, transparent);
  background: color-mix(in srgb, var(--negatif) 8%, transparent);
}
.mini.mini-cadre-vert {
  border-color: color-mix(in srgb, var(--good) 55%, transparent);
  background: color-mix(in srgb, var(--good) 8%, transparent);
}

/* --- tuiles de stat --- */
.stat { background: var(--surface); box-shadow: var(--ring-carte); border-radius: var(--r); padding: var(--pad-carte); }
.stat-label { font-size: 12px; color: var(--nav-ink); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.stat-value { font-size: 1.6rem; font-weight: 600; letter-spacing: -.028em; margin-top: 7px; font-variant-numeric: tabular-nums; }
.stat-foot { font-size: .78rem; color: var(--ink-mute); margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; }
.delta.up   { color: #3ddc84; }
.delta.down { color: #ff8f91; }
.delta.flat { color: var(--ink-mute); }

/* --- cascade des montants --- */
.waterfall { display: grid; gap: 9px; }
.wf-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; }
.wf-bar { position: relative; height: 34px; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.wf-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-sm); }
.wf-name { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .8rem; font-weight: 500; z-index: 1; }
.wf-amount { font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 600; min-width: 104px; text-align: right; }

/* ------------------------------------------------------------
   Lignes de réglage « nom … valeur % »  (façon Commissions & parts)
   ------------------------------------------------------------ */
.rate-list { display: grid; gap: 8px; }
.rate-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.rate-name { flex: 1; min-width: 0; font-size: .88rem; font-weight: 500; }
.rate-name small { display: block; font-size: .74rem; color: var(--ink-mute); font-weight: 400; margin-top: 1px; }
.rate-input { width: 74px; flex: none; }
.rate-unit { color: var(--ink-mute); font-size: .82rem; flex: none; }

/* Le même champ, mais posé dans une cellule de table : il doit tenir
   sur la ligne sans la faire grandir. */
.rate-cell { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; }
.rate-cell .rate-input { width: 62px; text-align: right; }

.group-label {
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-mute); margin: 18px 0 4px;
}
.group-label:first-child { margin-top: 0; }
.group-note { font-size: .78rem; color: var(--ink-mute); margin-bottom: 10px; line-height: 1.5; }

/* --- pastilles de valeur, façon « Matin 08:00–14:00 » --- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.value-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: .82rem;
}
.value-chip b { font-weight: 600; }
.value-chip .v { color: var(--ink-mute); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Badges
   ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 500;
  background: var(--raised); color: var(--nav-ink); border: 1px solid transparent;
  white-space: nowrap;
}
.badge-good     { background: rgba(34,165,101,.13); color: #4ddb92; border-color: rgba(34,165,101,.28); }
.badge-warning  { background: rgba(201,133,0,.14);  color: #e5b040; border-color: rgba(201,133,0,.3); }
.badge-critical { background: rgba(208,59,59,.14);  color: #ff8f91; border-color: rgba(208,59,59,.3); }
.badge-primary  { background: var(--primary-soft);  color: #7fb0ff; border-color: rgba(48,128,255,.3); }
/* Une pastille qui s'ouvre : IRL mène au contrat et au salaire. */
.badge-bouton { font: inherit; font-size: .74rem; cursor: pointer; transition: filter .12s, box-shadow .12s; }
.badge-bouton:hover { filter: brightness(1.25); box-shadow: 0 0 0 3px rgba(12,163,12,.15); }
/* Une modèle IA : une pastille discrète, violette, à côté du vert des IRL. */
.badge-ia { background: color-mix(in srgb, var(--tile-violet) 14%, transparent); color: #b8b0f5;
            border-color: color-mix(in srgb, var(--tile-violet) 32%, transparent); }
.badge-dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: none; }

/* ------------------------------------------------------------
   Tableaux
   ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; }
.card > .table-wrap { margin: 0 calc(-1 * var(--pad-carte)) calc(-1 * var(--pad-carte)); padding: 0 var(--pad-carte) 4px; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th {
  text-align: left; font-weight: 500; font-size: 12px;
  color: var(--nav-ink); padding: 0 14px 9px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
thead th:first-child { padding-left: 0; }
thead th:last-child  { padding-right: 0; }
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--ink); }
thead th .arrow { opacity: .35; margin-left: 4px; }
thead th.sorted .arrow { opacity: 1; color: var(--primary); }
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody td:first-child { padding-left: 0; }
tbody td:last-child  { padding-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255,255,255,.025); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: .82rem; }
.dim { color: var(--ink-mute); }
.strong { font-weight: 600; }
.pos { color: #3ddc84; }
/* Un montant NÉGATIF — un mois où tu perds de l'argent — se lit en
   rouge franc, pas en rose : il doit sauter aux yeux. #ff5c5c garde un
   contraste de 5,7:1 sur la surface #191b1e. */
.neg { color: var(--negatif); }
.row-actions { display: flex; gap: 3px; justify-content: flex-end; }
.cell-main { font-weight: 500; }
.cell-sub { font-size: .755rem; color: var(--ink-mute); margin-top: 2px; }
.cell-flex { display: flex; align-items: center; gap: 11px; }
.avatar {
  width: 32px; height: 32px; border-radius: 99px; flex: none; object-fit: cover;
  background: var(--raised); display: inline-grid; place-items: center;
  font-size: .74rem; font-weight: 600; color: var(--ink-soft);
}

.empty { padding: 56px 20px; text-align: center; color: var(--ink-mute); }
.empty-title { font-weight: 500; color: var(--ink); margin-bottom: 6px; font-size: .95rem; }
.empty-sub { font-size: .85rem; max-width: 46ch; margin: 0 auto; line-height: 1.55; }

.toolbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; min-width: 160px; }

/* ------------------------------------------------------------
   Graphiques
   ------------------------------------------------------------ */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid-line {
  stroke: var(--grid); stroke-width: 1;
  stroke-dasharray: 2 5; opacity: .55;
}
.chart .axis-line { stroke: var(--axis); stroke-width: 1; }
.chart .tick { fill: var(--ink-mute); font-size: 11px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.chart .series-line {
  fill: none; stroke-width: 2.25;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Le halo : le même trait, flouté, en retrait dessous. Il détache la
   courbe du fond sombre — sans lui, elle y reste plate. */
.chart .series-halo {
  fill: none; stroke-width: 3.5; opacity: .34;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
/* Le point survolé porte un anneau de la couleur de la surface : il
   se pose SUR la courbe au lieu de s'y fondre. */
.chart .series-dot { r: 4.5; stroke: var(--surface); stroke-width: 2.5; }
.chart .bar { rx: 4; }
.chart .hover-band { fill: transparent; cursor: crosshair; }
.chart .crosshair { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ink-mute); }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  background: #1a1d23; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 10px 12px; box-shadow: var(--shadow);
  font-size: .78rem; min-width: 140px; opacity: 0; transition: opacity .1s;
}
.tooltip.show { opacity: 1; }
/* La carte des fans (Classement, 13/10) : la carte, et à côté les premiers pays. */
.carte-fans {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 24px; align-items: center;
}
@media (max-width: 900px) { .carte-fans { grid-template-columns: minmax(0, 1fr); } }
.carte-zone { position: relative; }
.carte-fans-svg { width: 100%; height: auto; display: block; max-height: 280px; }
.carte-fans-svg path { stroke: var(--surface); stroke-width: .6; }
.carte-fans-svg .pays { fill: var(--surface-2); }
.carte-fans-svg .pays-actif:hover { filter: brightness(1.3); }
.carte-liste { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 9px; }
.carte-liste li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; font-size: 13px;
}
.carte-pays { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-n { color: var(--ink-mute); }

/* La prévision de Total (13/10) : trois chiffres, la courbe, le suivi. */
.prevision-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .prevision-tuiles { grid-template-columns: minmax(0, 1fr); } }
.prevision-tuile {
  background: var(--surface-2); border-radius: var(--r-sm); padding: 14px 16px; display: grid; gap: 4px;
}
.prevision-valeur { font-size: 22px; font-weight: 700; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.prevision-variation { font-size: 12px; font-weight: 500; }
.prevision-variation.hausse { color: var(--brut-texte); }
.prevision-variation.baisse { color: var(--negatif); }
.prevision-zone { position: relative; }
.prevision-courbe { width: 100%; height: auto; display: block; }
.prevision-reel { fill: none; stroke: var(--gains); stroke-width: 1.6; stroke-linejoin: round; }
.prevision-prevu { fill: none; stroke: var(--gains); stroke-width: 1.6; stroke-opacity: .5; stroke-linejoin: round; }
.prevision-bande { fill: var(--gains); fill-opacity: .12; stroke: none; }
.prevision-aujourdhui { stroke: var(--line-strong); stroke-width: 1; }
.prevision-date { fill: var(--ink-mute); font-size: 10px; font-family: var(--font-sans); }
.prevision-suivi { display: grid; gap: 8px; }
.prevision-lignes { display: grid; gap: 6px; }
.prevision-ligne {
  display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr 90px; gap: 10px; align-items: center;
  font-size: 13px; padding: 6px 0; border-top: 1px solid var(--line);
}
.prevision-ligne > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.prevision-ecart.dedans { color: var(--brut-texte); }
.prevision-valeur.fiabilite-bonne { color: var(--brut-texte); }
.prevision-valeur.fiabilite-moyenne { color: #f5c26b; }
.prevision-valeur.fiabilite-faible { color: var(--negatif); }
.prevision-ecart.dehors { color: var(--negatif); }
.tooltip-title { font-weight: 600; margin-bottom: 6px; }
.tooltip-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 2px 0; }
.tooltip-key { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-mute); }
.tooltip-val { font-variant-numeric: tabular-nums; font-weight: 600; }

/* 260px : une adresse e-mail entiere tient, sans etre coupee au
   milieu — c'est elle qui distingue deux homonymes. */
.bar-row { display: grid; grid-template-columns: minmax(0, 260px) 1fr auto; align-items: center; gap: 14px; padding: 6px 0; }
.bar-track { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; }
.bar-label { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { font-size: .84rem; font-variant-numeric: tabular-nums; font-weight: 500; min-width: 92px; text-align: right; }

.split-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; gap: 2px; background: var(--surface-2); }
.split-seg { height: 100%; }

/* ------------------------------------------------------------
   Modale
   ------------------------------------------------------------ */
/* 13/10 — la forme des fenêtres du CRM : « les fenêtres, c'est pas très
   beau… il y a trop de trucs décrits » (le porteur du projet). Un titre,
   les champs, et les boutons dans une bande en bas ; plus d'explication
   sous les champs. Une seule forme pour toutes les fenêtres. */
.modal-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
  z-index: 50; display: grid; place-items: center; padding: 24px; overflow-y: auto;
}
.modal {
  width: 100%; max-width: 520px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); max-height: calc(100svh - 48px);
  display: flex; flex-direction: column;
}
.modal.wide { max-width: 820px; }

/* Agence de chatting : les onglets (une modèle chacun), et sur l'onglet
   d'une modèle, sa ligne d'infos et « ✎ Modifier » sur la même ligne.
   Ils remplacent la page qui s'ouvrait par-dessus l'écran (13/10). */
.chatting-barre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.chatting-barre .tabs { margin-bottom: 0; }
.chatting-infos { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Le point rouge d'un onglet qui attend un « Reçu » — le même que dans le menu. */
.tab-point {
  display: inline-block; width: 7px; height: 7px; margin-left: 7px; vertical-align: middle;
  border-radius: 50%; background: var(--negatif);
}
.texte-chatting { color: var(--chatting-texte); }
.stat.stat-chatting { background: color-mix(in srgb, var(--chatting) 9%, var(--surface)); }
.recu-resume {
  padding: 12px 14px; background: color-mix(in srgb, var(--chatting) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--chatting) 28%, transparent); border-radius: var(--r-sm);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px 4px; flex: none;
}
.modal-head h2 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.modal-body { padding: 14px 20px 20px; overflow-y: auto; }
/* Les explications sous les champs (`hint`) : plus dans les fenêtres. */
.modal .field > .hint { display: none; }
/* Les boutons d'une fenêtre, dans leur bande, comme au CRM. */
.modal-body > * > .form-actions:last-child {
  margin: 6px -20px -20px; padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ------------------------------------------------------------
   Notifications & bandeaux
   ------------------------------------------------------------ */
.toasts { position: fixed; bottom: 22px; right: 22px; z-index: 60; display: grid; gap: 9px; max-width: 352px; }
.toast {
  background: #1a1d23; border: 1px solid var(--line-strong); border-left: 3px solid var(--primary);
  border-radius: var(--r-sm); padding: 13px 15px; box-shadow: var(--shadow);
  font-size: .85rem; animation: slide-in .18s ease-out;
}
.toast.ok    { border-left-color: var(--good); }
.toast.error { border-left-color: var(--critical); }
.toast.warn  { border-left-color: var(--warning); }
.toast-title { font-weight: 600; margin-bottom: 3px; }
.toast-body  { color: var(--ink-mute); font-size: .8rem; }
@keyframes slide-in { from { opacity: 0; transform: translateX(12px); } }

.banner {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px; border-radius: var(--r);
  background: rgba(201,133,0,.07); border: 1px solid rgba(201,133,0,.24);
  font-size: .85rem;
}
.banner.info { background: var(--primary-soft); border-color: rgba(48,128,255,.24); }
.banner-ico { flex: none; font-size: 1rem; line-height: 1.35; }
.banner-title { font-weight: 600; margin-bottom: 3px; }
.banner-body { color: var(--ink-mute); line-height: 1.5; }
.banner-body code {
  font-family: var(--font-mono); font-size: .92em;
  background: rgba(255,255,255,.07); padding: 2px 6px; border-radius: 5px;
}

/* onglets internes */
/* Les onglets défilent au besoin plutôt que d'élargir la page :
   « Calendrier · Dépenses · Abonnements · Importer un CSV » ne tient
   pas sur un téléphone, et un onglet coupé vaut mieux qu'un écran
   entier décalé vers la droite. */
/* 12/10 : les onglets du CRM — des pilules dans un bloc carte, l'onglet
   ouvert en bleu plein (« la même DA partout »). */
.tabs {
  display: flex; gap: 4px; width: fit-content; max-width: 100%;
  padding: 4px; background: var(--surface); border-radius: 14px; box-shadow: var(--ring-carte);
  min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; }
.tab {
  padding: 6px 12px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--nav-ink);
  border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s;
}
.tab:hover { color: var(--ink); background: var(--raised); }
.tab.active { color: var(--primary-ink); background: var(--primary); }
/* « Importer un CSV » : une action, pas une liste — un petit cadre bleu. */
.tab.tab-encadre {
  align-self: center; margin: 0 0 0 4px; padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--brut) 70%, transparent); border-radius: 10px;
  color: var(--brut-texte); background: color-mix(in srgb, var(--brut) 10%, transparent);
}
/* 12/10 : « Importer un CSV » en vert, comme « Liste des ventes » du Total. */
.tab.tab-encadre:hover { color: #b7f0cf; background: color-mix(in srgb, var(--brut) 18%, transparent); }
.tab.tab-encadre.active { color: #fff; background: var(--brut); border-color: var(--brut); }
/* Le bouton vert (Total : « Liste des ventes »). */
.btn-vert { background: var(--brut); color: #fff; }
.btn-vert:hover { background: color-mix(in srgb, var(--brut) 85%, white); }
/* La légende des couleurs de Dépenses, juste sous les onglets. */
.legende-natures { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -8px 0 16px; }
.legende-natures .legend-item { font-size: .8rem; color: var(--ink); }
/* Les onglets collaient au calendrier : il faut respirer entre les deux. */
.tabs { margin-bottom: 20px; }

/* ------------------------------------------------------------
   Calendrier
   ------------------------------------------------------------ */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }

.cal-dow {
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-mute); text-align: center; padding-bottom: 2px;
}

.cal-day {
  position: relative; min-height: 106px; padding: 9px 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 3px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.cal-day:hover { border-color: var(--line-strong); background: #1c2027; }
.cal-day.out { background: transparent; border-color: transparent; pointer-events: none; min-height: 0; }
.cal-day.future { opacity: .38; }
.cal-day.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal-day.validated { background: rgba(34,165,101,.055); border-color: rgba(34,165,101,.22); }
.cal-day.validated:hover { background: rgba(34,165,101,.09); }

.cal-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cal-num { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-check { color: #4ddb92; font-size: .78rem; font-weight: 700; line-height: 1; }
.cal-pending {
  width: 6px; height: 6px; border-radius: 99px; background: var(--warning);
  display: inline-block; flex: none;
}
.cal-amt { font-size: .775rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.35; }
.cal-amt.dim { color: var(--ink-mute); }
.cal-dots { display: flex; gap: 4px; margin-top: auto; padding-top: 4px; }
.cal-dot { width: 5px; height: 5px; border-radius: 99px; flex: none; }

/* Graphique + détail côte à côte. Replier le détail rend au dessin
   toute la largeur : c'est la forme de la courbe qu'on vient lire, pas
   la table. */
.graph-zone {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
  transition: grid-template-columns .2s ease;
}
.graph-zone.detail-replie { grid-template-columns: minmax(0, 1fr) auto; }
.graph-zone.detail-replie > :last-child { width: 210px; }
.graph-zone.detail-replie > :last-child .table-wrap,
.graph-zone.detail-replie > :last-child .card-head .sub { display: none; }

@media (max-width: 1100px) {
  .graph-zone,
  .graph-zone.detail-replie { grid-template-columns: minmax(0, 1fr); }
  .graph-zone.detail-replie > :last-child { width: auto; }
}

/* Le graphique du CRM (revenue-chart.tsx), au pixel — voir `graphiqueCrm` (12/10). */
.gcrm-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.gcrm-legende { display: flex; align-items: center; gap: 12px; font-size: 10px; color: var(--nav-ink); }
.gcrm-legende-item { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
                     font: inherit; color: inherit; cursor: pointer; transition: opacity .15s; }
.gcrm-legende-item.masquee { opacity: .4; }
.gcrm-trait { width: 12px; height: 2px; border-radius: 99px; }
.gcrm-tiret { width: 12px; height: 2px; background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 5px); }
.gcrm-bascule { margin-left: auto; }
.gcrm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gcrm-grille { stroke: var(--line-strong); }  /* suit le thème (clair compris) */
.gcrm-graduation { fill: var(--nav-ink); font-family: var(--font-sans); }
.gcrm-zero { fill: color-mix(in srgb, var(--nav-ink) 40%, transparent); }
.gcrm-dates { position: relative; height: 14px; margin-top: 4px; font-size: 10px; color: var(--nav-ink); }
.gcrm-dates span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* Paramètres et Profil : pas de barre des périodes (12/10). */
.topbar.sans-periode #period-seg { display: none; }

/* Profil (12/10) : le compte, en grand, comme une fiche. */
.profil-identite { display: flex; align-items: center; gap: 16px; }
.profil-avatar {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #c2410c; color: #fff; font-size: 18px; font-weight: 600;
}
.profil-nom { font-size: 18px; font-weight: 600; }
.profil-courriel { font-size: 13px; color: var(--nav-ink); margin-top: 2px; overflow-wrap: anywhere; }

/* Paramètres → Menu (12/10) : une carte par catégorie, ses pages en lignes. */
.menu-categories { display: grid; gap: 12px; }
.menu-ligne {
  display: grid; gap: 10px; padding: 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .02); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}
.menu-tete { display: flex; align-items: center; gap: 6px; }
.menu-titre { flex: 1; min-width: 0; font-weight: 600; }
.menu-entrees { display: grid; gap: 6px; padding-left: 10px; border-left: 2px solid rgba(255, 255, 255, .06); }
.menu-entree { display: flex; align-items: center; gap: 8px; }
.menu-entree-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
                   background: rgba(var(--primary-rgb), .12); color: var(--primary); }
.menu-libelle { flex: 1; min-width: 0; height: 32px; font-size: 13px; }
.menu-type { flex: none; font-size: 11.5px; color: var(--nav-ink); white-space: nowrap; min-width: 130px; }
.menu-ajout { width: auto; max-width: 260px; height: 32px; font-size: 13px; color: var(--nav-ink); }
.menu-pied { display: flex; align-items: center; gap: 12px; }
.menu-statut { font-size: 12px; color: var(--nav-ink); }
.menu-vide-texte { font-size: 13px; color: var(--nav-ink); }
@media (max-width: 700px) { .menu-type { display: none; } }
/* Le menu de gauche quand il est vide : de quoi commencer. */
.menu-vide { display: grid; gap: 10px; justify-items: start; padding: 8px; font-size: 13px; color: var(--nav-ink); }
.sidebar[data-replie] .menu-vide { display: none; }

/* « + Ajouter une vente » en tête de Total, à droite. */
.total-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: -6px; }
/* La liste des ventes ajoutées à la main (Total). */
.liste-ventes { display: grid; gap: 6px; max-height: min(60vh, 520px); overflow-y: auto; }
.vente-ligne {
  display: grid; grid-template-columns: 92px 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
}
.vente-date { font-size: 13px; color: var(--nav-ink); font-variant-numeric: tabular-nums; }
.vente-quoi { min-width: 0; }
.vente-moyen { font-size: 13px; font-weight: 500; }
.vente-note { font-size: 12px; color: var(--nav-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vente-montant { text-align: right; font-variant-numeric: tabular-nums; }
.vente-brut { font-weight: 600; }
.vente-net { font-size: 12px; color: var(--nav-ink); }
.vente-actions { display: flex; gap: 2px; }

/* Dans L'agence, le € / $ et « Actualiser » sont déjà dans SA barre du haut
   (12/10, « tu peux les enlever, vu qu'ils sont déjà tout en haut ») : le
   Dashboard ne les répète pas. Ouvert seul, il les garde. */
.dans-agence #devise-seg, .dans-agence .bouton-recharger { display: none; }

/* € / $ dans la barre du haut : le même bloc que les périodes, à côté d'elles. */
.topbar .seg { background: var(--surface); padding: 4px; gap: 4px; border-radius: 14px; box-shadow: var(--ring-carte); }
.topbar .seg-btn { padding: 6px 10px; border-radius: 10px; }

/* Interrupteur courbe / barres, posé au-dessus d'un graphique. */
.chart-tools { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.seg {
  display: inline-flex; gap: 2px; padding: 0;
  background: transparent; border: 0; border-radius: 8px;
}
.seg-btn {
  font: inherit; font-size: 12px; font-weight: 500; line-height: 16px;
  padding: 4px 8px; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--ink-mute); border: 0;
  transition: background .12s, color .12s;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.actif { background: var(--primary); color: var(--primary-ink); }

/* Un abonnement listé dans une case du calendrier des échéances. */
.cal-sub {
  display: flex; align-items: center; gap: 5px;
  font-size: .7rem; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-sub-dot {
  width: 5px; height: 5px; border-radius: 99px; flex: none;
  background: var(--warning);
}
.cal-sub-dot.fait { background: var(--good); }

/* Échelle de chaleur du calendrier : quatre paliers, pour dire ce que
   la teinte des cases signifie. */
.heat-scale { display: inline-flex; gap: 2px; margin-right: 2px; }
.heat-scale > span {
  width: 13px; height: 10px; border-radius: 2px;
  border: 1px solid var(--line);
}

@media (max-width: 900px) {
  .cal { gap: 5px; }
  .cal-day { min-height: 82px; padding: 7px 8px; }
  .cal-amt { font-size: .7rem; }
  .cal-num { font-size: .76rem; }
}
@media (max-width: 560px) {
  .cal-day { min-height: 66px; padding: 6px; }
  .cal-amt { font-size: .64rem; }
  .cal-dots { display: none; }
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-hero { padding-right: 20px; }
  .kpi-sep { margin-right: 20px; }
}

@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: var(--shadow);
  }
  .sidebar.open { transform: none; }
  .icon-btn.sidebar-close, .icon-btn.sidebar-open { display: inline-grid; }
  .topbar { padding: 18px 18px 14px; }
  .view { padding: 0 18px 32px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  /* `nowrap` : une colonne flex qui a le droit de passer à la ligne
     répartit ses lignes en hauteur et étire la bande bien au-delà de
     son contenu. Empilé, il n'y a qu'une colonne — rien à envelopper. */
  .kpi-band { flex-direction: column; flex-wrap: nowrap; gap: 20px; }
  .kpi-hero { padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
  .kpi-hero-total { margin-right: 0; border-bottom: 1px solid var(--line-strong); padding-bottom: 14px; }
  .kpi-sep { display: none; }
  /* Empilées, les tuiles n'ont plus d'espace à occuper : sans ça elles
     s'étirent et laissent un grand vide sous le chiffre principal. */
  .kpi-rest { flex: none; align-content: start; }
  .card > .table-wrap { margin: 0 -22px -22px; padding: 0 22px 4px; }
}

/* Sous 640 px, les boutons d'une carte passent à la ligne. En
   `nowrap`, trois boutons côte à côte dépassaient du cadre — et comme
   ils sont ancrés à droite, c'est le début qui sortait de l'écran. */
@media (max-width: 640px) {
  /* `flex: 0 0 auto` gardait au bloc sa largeur idéale : il passait
     bien sous le titre, mais en dépassant du cadre par la droite. Sur
     un écran étroit il prend toute la ligne et ses contrôles ont le
     droit de rétrécir. */
  .card-actions {
    flex-wrap: wrap; justify-content: flex-start;
    flex: 1 1 100%; max-width: 100%; min-width: 0;
  }
  .card-actions > * { min-width: 0; }
  .card-actions .select, .card-actions .input { max-width: 100%; }
  .card-head { gap: 12px; }
}

@media (max-width: 640px) {
  .topbar-title h1 { font-size: 1.3rem; }
  .segmented { overflow-x: auto; max-width: 100%; }
  .toasts { left: 16px; right: 16px; max-width: none; }
  .bar-row { grid-template-columns: 104px 1fr auto; }
  .card { padding: 18px; }
  .card > .table-wrap { margin: 0 -18px -18px; padding: 0 18px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------
   Paye — une ligne par virement, son détail replié dessous.

   Ce n'est pas une table : la ligne principale est un virement, les
   lignes du détail sont des personnes. Deux natures différentes dans
   une même table auraient obligé à lire la colonne « Qui » deux fois
   pour comprendre de quoi on parle.
   ------------------------------------------------------------ */
.paye-liste { display: grid; gap: 8px; }
.paye-bloc {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); overflow: hidden;
}
.paye-ligne {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 11px 13px;
}
.paye-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.paye-montant { text-align: right; line-height: 1.3; }
.paye-detail {
  border-top: 1px solid var(--line);
  padding: 4px 13px 10px;
  background: color-mix(in srgb, var(--background) 55%, transparent);
}
/* Le chevron d'un groupe tourne comme celui d'une carte. */
.paye-actions .icon-btn { transition: transform .14s; }
.paye-actions .icon-btn.tourne { transform: rotate(180deg); }

.note-bas {
  margin: 0; padding: 0 2px;
  font-size: 12px; color: var(--ink-mute);
}

/* ------------------------------------------------------------
   Un nom qui ouvre une fiche.

   Un bouton, pour le clavier et les lecteurs d'écran, mais qui se lit
   comme le texte de la cellule : seul le survol dit qu'on peut cliquer.
   ------------------------------------------------------------ */
.lien-fiche {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 1px; min-width: 0; max-width: 100%;
  padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.lien-fiche.cell-flex { flex-direction: row; align-items: center; }
.lien-fiche > span:not(.avatar) { display: flex; flex-direction: column; min-width: 0; }
.lien-fiche .cell-main { transition: color .12s; }
.lien-fiche:hover .cell-main,
.lien-fiche:focus-visible .cell-main { color: #7fb0ff; text-decoration: underline; text-underline-offset: 3px; }

/* « Modifier » se repère d'un coup d'œil : c'est l'action qu'on vient
   chercher sur une ligne, les autres restent discrètes. */
.icon-btn.icon-btn-bleu { color: #7fb0ff; background: var(--primary-soft); }
.icon-btn.icon-btn-bleu:hover { color: #fff; background: var(--primary); }

/* ------------------------------------------------------------
   La fiche d'une modèle, et l'historique de son accord.
   ------------------------------------------------------------ */
.fiche-tete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avatar-lg { width: 46px; height: 46px; font-size: .95rem; }
.fiche-nom { font-size: 1.15rem; font-weight: 600; line-height: 1.25; }
.fiche-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fiche-kpi { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
@media (max-width: 760px) { .fiche-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fiche-notes { margin: 0; white-space: pre-wrap; color: var(--ink-soft); line-height: 1.55; }

.accords { display: grid; gap: 0; }
.accord {
  position: relative;
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 12px; align-items: start;
  padding: 12px 0 14px;
}
.accord + .accord { border-top: 1px solid var(--line); }
/* Le fil de la chronologie : il relie les points d'une période à l'autre. */
.accord::before {
  content: ''; position: absolute; left: 7px; top: 0; bottom: 0;
  width: 2px; background: var(--line-strong);
}
.accord:first-child::before { top: 18px; }
.accord:last-child::before { bottom: calc(100% - 18px); }
.accord:only-child::before { display: none; }
.accord-point {
  position: relative; z-index: 1;
  width: 12px; height: 12px; margin: 4px 0 0 2px; border-radius: 99px;
  background: var(--surface); border: 2px solid var(--ink-mute);
}
.accord-en-cours .accord-point { background: var(--primary); border-color: var(--primary); }
.accord-corps { min-width: 0; display: grid; gap: 3px; }
.accord-titre {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  font-weight: 600;
}
.accord-partage { font-weight: 400; color: var(--ink-mute); font-size: .85rem; }
.accord-dates { color: var(--ink-soft); font-size: .88rem; }
.accord-note {
  margin-top: 4px; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-soft); font-size: .84rem;
}

/* ------------------------------------------------------------
   L'équipe : une carte par personne payée, ses parts par section.
   ------------------------------------------------------------ */
.equipe-barre {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; flex-wrap: wrap;
}
.equipe-sections {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.equipe-section {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); padding: 10px 12px; min-width: 0;
}
.equipe-section-tete {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-mute); margin-bottom: 6px;
}
.equipe-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px; min-height: 30px; font-size: .88rem;
}
.equipe-ligne .icon-btn { width: 26px; height: 26px; }
/* Une paye de la liste : ✎ devant la date, le montant, puis ✕. */
.equipe-ligne.paye-passee { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.equipe-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* L'éditeur des parts, dans la fiche d'un manager. */
.repartition-cadre {
  display: grid; gap: 12px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--background) 40%, transparent);
}
.repartition-cadre > .btn { justify-self: start; }
.repartition { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.repartition-section {
  display: grid; gap: 6px; align-content: start; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.repartition-tete { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.repartition-titre { font-weight: 600; flex: 1; }
.repartition-titre-input { flex: 1; min-width: 0; }
.repartition-sous-total { color: var(--ink-mute); font-size: .82rem; white-space: nowrap; }
.repartition-lignes { display: grid; gap: 6px; }
.repartition-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 30px;
  align-items: center; gap: 6px;
}
.repartition-ligne.seul { grid-template-columns: minmax(0, 1fr) auto; }
.repartition-ajout { justify-self: start; padding-left: 4px; }
.repartition-total {
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--primary-soft); color: var(--ink-soft); font-size: .86rem; line-height: 1.5;
}

/* La carte d'une équipe : la paye à saisir, le mois, les dernières payes. */
.equipe-corps { gap: 14px; }
.equipe-alerte {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: var(--r-sm);
  background: rgba(201,133,0,.08); border: 1px solid rgba(201,133,0,.26);
}
.equipe-chiffres {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.equipe-chiffre {
  padding: 10px 12px; border-radius: 10px; min-width: 0;
  background: color-mix(in srgb, var(--raised) 45%, transparent); box-shadow: inset 0 0 0 1px var(--line);
}
.equipe-valeur { font-size: 1.05rem; font-weight: 600; margin: 2px 0 1px; }
.equipe-historique { display: grid; gap: 4px; }
.equipe-historique-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px;
}

/* ------------------------------------------------------------
   Euros ou dollars, à côté du montant qu'on tape.
   ------------------------------------------------------------ */
.titre-avec-devise { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.devise-bascule {
  /* La marge négative garde l'intitulé à la hauteur de son voisin. */
  display: inline-flex; padding: 2px; gap: 2px; margin: -4px 0;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--input-bg);
}
.devise-choix {
  min-width: 26px; height: 20px; padding: 0 6px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--ink-mute); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.devise-choix:hover { color: var(--ink); }
.devise-choix.actif { background: var(--primary); color: var(--primary-ink); }
.conversion-devise:empty { display: none; }

/* Un texte de cellule qui ne passe jamais à la ligne : toutes les
   rangées d'un tableau gardent la même hauteur. */
.une-ligne { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
td .lien-fiche .une-ligne, td > .une-ligne { display: block; }

/* Une case à cocher avec son intitulé, alignée sur les champs voisins. */
.case-a-cocher {
  display: flex; align-items: center; gap: 10px; align-self: end;
  min-height: 34px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg);
}
.case-a-cocher input { width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.case-a-cocher > span { display: flex; flex-direction: column; line-height: 1.3; }
.case-a-cocher .hint { margin: 0; }

input[type="file"].input { height: auto; padding: 6px 8px; font-size: .82rem; }

/* Les documents d'une modèle. */
.documents { display: grid; gap: 8px; }
.document {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.document-ico {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 8px; background: var(--primary-soft); color: #7fb0ff;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
}
.document .une-ligne { max-width: 100%; }

/* ------------------------------------------------------------
   Brut en vert, net en bleu — partout où les deux se côtoient.

   Un petit fond, pas une couleur de texte criarde : on distingue d'un
   coup d'œil ce que le client a payé de ce qui est vraiment arrivé.
   ------------------------------------------------------------ */
/* Toute la colonne, de l'en-tête à la dernière ligne — pas une pastille
   sous le chiffre. */
th.col-brut, td.col-brut { background: color-mix(in srgb, var(--brut) 9%, transparent); }
th.col-net,  td.col-net  { background: color-mix(in srgb, var(--net) 11%, transparent); }
thead th.col-brut, thead th.col-net { padding-top: 8px; border-radius: 8px 8px 0 0; }
thead th.col-brut { color: var(--brut-texte); }
thead th.col-net  { color: var(--net-texte); }
tbody tr:last-child td.col-brut, tbody tr:last-child td.col-net { border-radius: 0 0 8px 8px; }
/* Une colonne teintée en dernière position garde son rembourrage. */
tbody td.col-brut:last-child, tbody td.col-net:last-child,
thead th.col-brut:last-child, thead th.col-net:last-child { padding-right: 14px; }

.stat.stat-brut { background: color-mix(in srgb, var(--brut) 8%, var(--surface)); }
.stat.stat-net  { background: color-mix(in srgb, var(--net) 10%, var(--surface)); }
/* Le bouton Brut | Net prend la couleur de ce qu'il affiche. */
.seg-btn.actif.seg-brut { background: var(--brut); color: #fff; }
.seg-btn.actif.seg-net  { background: var(--net);  color: #fff; }
/* Dépense ou abonnement, en tête du formulaire : deux gros boutons,
   chacun de la couleur de sa nature. */
.choix-sortie { display: flex; width: 100%; }
.choix-sortie .seg-btn { flex: 1; font-size: .9rem; padding: 9px 12px; }
.seg-btn.actif.seg-depense    { background: var(--sortie-depense);    color: #fff; }
.seg-btn.actif.seg-abonnement { background: var(--sortie-abonnement); color: #fff; }
.bloc-abonnement { display: grid; gap: 8px; }
.phrase-abonnement { color: #e3a93c; margin: 0; }
.texte-brut { color: var(--brut-texte); }
.texte-depense    { color: var(--negatif); }
.texte-abonnement { color: #e3a93c; }
.texte-equipe     { color: #b8b0f5; }
.badge-nature-depense    { background: color-mix(in srgb, var(--sortie-depense) 14%, transparent);
                           color: #ff8a82; border-color: color-mix(in srgb, var(--sortie-depense) 32%, transparent); }
.badge-nature-abonnement { background: color-mix(in srgb, var(--sortie-abonnement) 14%, transparent);
                           color: #e3a93c; border-color: color-mix(in srgb, var(--sortie-abonnement) 32%, transparent); }
.badge-nature-equipe     { background: color-mix(in srgb, var(--sortie-equipe) 14%, transparent);
                           color: #b8b0f5; border-color: color-mix(in srgb, var(--sortie-equipe) 32%, transparent); }
.stat.stat-depense    { background: color-mix(in srgb, var(--sortie-depense) 8%, var(--surface)); }
.stat.stat-abonnement { background: color-mix(in srgb, var(--sortie-abonnement) 9%, var(--surface)); }
.stat.stat-equipe     { background: color-mix(in srgb, var(--sortie-equipe) 10%, var(--surface)); }
/* Une ligne par nature dans une case du calendrier. */
.cal-nature { font-size: .68rem; opacity: .85; margin-left: 3px; font-weight: 400; }
.texte-net  { color: var(--net-texte); }

/* « Tu gardes » : le champ du pourcentage, et la fin du contrat dessous. */
.cellule-gardes { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cellule-gardes .une-ligne { max-width: 190px; line-height: 1.1; font-size: .74rem; }
/* Un champ plus bas : avec la note dessous, la ligne garde la hauteur des autres. */
.cellule-gardes .input-sm { height: 26px; }
/* La note sous le % — « Salaire 1 000 $ / mois » comme « fin du 50/50 » :
   une seule couleur, un seul style, pour toutes les modèles. */
.cellule-gardes .note-gardes { color: var(--ink-mute); font-weight: 400; }
.input.champ-brut {
  background: color-mix(in srgb, var(--tile-green) 9%, var(--input-bg));
  border-color: color-mix(in srgb, var(--tile-green) 38%, transparent);
}
.input.champ-net {
  background: color-mix(in srgb, var(--tile-blue) 10%, var(--input-bg));
  border-color: color-mix(in srgb, var(--tile-blue) 40%, transparent);
}

/* Une nouvelle version en ligne, proposée sans interrompre une saisie. */
.bandeau-version {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 32px); padding: 10px 14px;
  background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--shadow); font-size: .86rem;
}

.recherche-clients { width: 220px; max-width: 100%; }
@media (max-width: 640px) {
  .recherche-clients { width: 100%; }
  .paye-ligne { flex-wrap: wrap; }
  .accord { grid-template-columns: 16px minmax(0, 1fr); }
  .accord > .icon-btn { grid-column: 2; justify-self: start; }
}

/* La bande survolée d'un graphique en barres : un fond très pâle qui
   dit laquelle des trente colonnes l'infobulle décrit. */
.chart .hover-fond {
  fill: rgba(255,255,255,.035);
  pointer-events: none;
  transition: opacity .1s;
}

/* Un montant PRÉVU, jamais constaté : souligné en pointillé, comme la
   courbe des dépenses. On ne le confond pas avec ce qui est dû. */
.prevu {
  color: var(--ink-mute);
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
}


/* Menu repliable (214 ↔ 68 px), comme dans L'agence : même clé de mémoire, mêmes mesures. */
.sidebar { transition: width .2s ease, flex-basis .2s ease; }
.rail-bascule { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: #155dfc; color: #fff; cursor: pointer; display: inline-grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); transition: background .12s; }
.rail-bascule:hover { background: #1447e6; }
.rail-bascule svg { transition: transform .2s; }
.sidebar[data-replie] { width: 68px; flex-basis: 68px; }
.sidebar[data-replie] .sidebar-head { padding: 16px 0 4px; justify-content: center; }
.sidebar[data-replie] .carres-barre { flex-direction: column; padding: 12px 10px 0; }
.sidebar[data-replie] .carres-barre .carre { flex: none; height: 44px; font-size: 0; }
.sidebar[data-replie] .installer-appli { display: none; }
.sidebar[data-replie] .carre-mot { display: none; }
.sidebar[data-replie] .rail-bascule { margin: 0; }
.sidebar[data-replie] .rail-bascule svg { transform: rotate(180deg); }
.sidebar[data-replie] .mot-marque, .sidebar[data-replie] .user-meta, .sidebar[data-replie] .nav-chevron { display: none; }
.sidebar[data-replie] .nav-item { justify-content: center; padding-inline: 0; font-size: 0; }
.sidebar[data-replie] .nav-item .nav-ico { font-size: 1rem; }
.sidebar[data-replie] .nav-label { height: 1px; width: 24px; margin: 0 auto 8px; padding: 0; overflow: hidden; font-size: 0; background: var(--line); pointer-events: none; }
.sidebar[data-replie] .sidebar-foot { flex-direction: column; padding: 12px 8px; }
@media (max-width: 860px) { .rail-bascule { display: none; } }

/* ------------------------------------------------------------
   Équipe ↔ L'agence (09/10) — la DA du CRM : un carré bleu devant le
   titre, les membres en lignes nettes, le total en grand.
   ------------------------------------------------------------ */
.titre-tuile { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.tuile-ico {
  flex: none; width: 40px; height: 40px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary);
}
/* La couleur de chaque équipe, celle de Gestion des paiements (L'agence) : chatteurs vert, VA bleu ciel, création violet. */
.tuile-ico.tuile-paye,
.tuile-ico.tuile-chat     { background: rgba(16, 185, 129, .15); color: #10b981; }
.tuile-ico.tuile-tel      { background: rgba(14, 165, 233, .15); color: #0ea5e9; }
.tuile-ico.tuile-creation { background: rgba(139, 92, 246, .15); color: #8b5cf6; }
.tuile-ico.tuile-modele   { background: color-mix(in srgb, var(--tile-pink) 15%, transparent); color: var(--tile-pink); }
.agence-bloc { display: grid; gap: 12px; }
.agence-dates { flex-wrap: wrap; }
.agence-contenu { display: grid; gap: 10px; }
.agence-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.agence-total { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--negatif); }
.agence-tete-droite { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.agence-tete-droite .agence-fait { padding: 4px 10px; font-size: 12px; }
.agence-lignes {
  display: grid; border-radius: 10px; overflow: hidden;
  background: color-mix(in srgb, var(--raised) 30%, transparent); box-shadow: inset 0 0 0 1px var(--line);
}
.agence-ligne {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px; padding: 9px 12px; font-size: .9rem;
}
.agence-ligne + .agence-ligne { border-top: 1px solid var(--line); }
.agence-initiales {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-size: .72rem; font-weight: 600;
  background: var(--primary-soft); color: var(--primary-fg, #8fbbff);
}
.agence-section {
  font-size: .72rem; padding: 2px 8px; border-radius: 999px;
  color: var(--ink-mute); border: 1px solid var(--line);
}
.agence-section.manager { color: var(--primary-fg, #8fbbff); border-color: rgba(var(--primary-rgb), .35); }
.agence-saisir { justify-self: start; }
.agence-fait {
  justify-self: start; font-size: .86rem; padding: 7px 12px; border-radius: var(--r-sm);
  color: #34d399; background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .3);
}
.agence-erreur {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: .86rem; padding: 10px 12px; border-radius: var(--r-sm);
  color: #fca5a5; background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .28);
}

/* L'en-tête de paye (09/10) — le même que Gestion de paye dans L'agence. */
.paye-entete {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px;
  padding: var(--pad-carte) 20px;
}
@media (max-width: 900px) { .paye-entete { grid-template-columns: 1fr; } }
.paye-titre { margin: 0; font-size: 16px; font-weight: 600; }
.paye-sous { color: var(--primary); font-size: 14px; margin: 2px 0 0; }
.paye-vues { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.paye-vue {
  display: grid; text-align: left; gap: 1px; padding: 6px 12px; border: 0; border-radius: 10px;
  background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--nav-ink); cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
  transition: background .12s, color .12s;
}
.paye-vue small { font-size: 10.5px; font-weight: 400; opacity: .85; }
.paye-vue:hover { color: var(--ink); background: var(--raised); }
.paye-vue.active { background: rgba(var(--primary-rgb), .15); color: var(--primary); box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .4); }
/* La semaine rendue payée : grisée (12/10). */
.paye-vue.payee { opacity: .45; }
.paye-vue.payee.active { opacity: .7; background: var(--raised); color: var(--ink); box-shadow: none; }
.spinner.petit { width: 13px; height: 13px; border-width: 2px; margin-right: 7px; vertical-align: -2px; display: inline-block; }
.btn .spinner.petit { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.paye-action { justify-self: end; }
.paye-confirmer { padding: 10px 18px; }
.paye-total {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-radius: var(--r, 14px);
  border: 1px solid rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .07);
  font-weight: 600; font-size: 1.02rem;
}
.paye-total-val { color: #34d399; font-size: 1.35rem; font-weight: 700; }
.paye-archive { display: grid; gap: 4px; padding: 14px 16px; }
.paye-archive-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding: 9px 12px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--foreground); font: inherit; text-align: left; cursor: pointer;
}
.paye-archive-ligne:hover, .paye-archive-ligne.active { background: var(--primary-soft); border-color: rgba(var(--primary-rgb), .3); }
.paye-a-confirmer {
  font-size: .75rem; padding: 3px 9px; border-radius: 999px;
  color: #fbbf24; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .3);
}
.agence-fait.petit { font-size: .75rem; padding: 3px 9px; }
/* La pastille « paye à confirmer » sur l'entrée Équipe du menu, le lundi. */
.nav-item.a-confirmer { position: relative; }
.nav-item.a-confirmer::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: #f87171; box-shadow: 0 0 8px rgba(248, 113, 113, .8);
}

/* Équipe : Modèle — chaque modèle à part (26/10) : ce qui reste à verser, ce qu'on te doit, ce que tu as donné. */
.modele-solde { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); gap: 8px; }
.modele-du { color: var(--negatif); }
.modele-recevoir { color: #34d399; }

/* ============================================================
   🔴 LA DA DE L'AGENCE, POUR DE VRAI (27/10) — « je veux vraiment que
   tu améliores tout ça, que ce soit pareil. Tu mets des cadres en bleu ;
   fais le beau, comme la DA des autres sites — aide-toi du CRM, de
   Création IA » (le porteur du projet).

   Recopié de Création IA (`metier/src/app/globals.css`, `.ci-*`, et
   `contenu/carte-etape.tsx`) : la carte à CADRE BLEU (2 px, accent à
   45 %), son en-tête en bande avec un trait dessous, le bouton de pli
   bleu plein de 28 px ; les boutons à halo au survol (`.ci-btn`), le
   contour qui bleuit (`.ci-btn2`), le rouge plein qui supprime ou
   confirme un paiement (`.ci-rouge`), le vert (`.ci-vert`) ; les
   onglets en pilules, l'actif bleu plein avec son halo (`.ci-pilule`).
   Les couleurs restent les variables du thème : un accent choisi dans
   L'agence (Paramètres → Thème) recolore tout, cadres compris.
   ============================================================ */
:root {
  --cadre: rgba(var(--primary-rgb), .45);
  --cadre-doux: rgba(var(--primary-rgb), .22);
  --rouge-plein: #dc2626; --rouge-survol: #ef4444;
  --vert-plein: #059669;  --vert-survol: #10b981;
  /* L'orange des abonnements, en bouton plein (27/10 — « + Abonnements » en orange). */
  --orange-plein: var(--sortie-abonnement); --orange-survol: color-mix(in srgb, var(--sortie-abonnement) 82%, white);
  --solde-vert: #34d399;  --solde-rouge: #ff6b6b;
}

/* --- cartes : le cadre bleu, l'en-tête en bande --- */
.card { border: 2px solid var(--cadre); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.card > .card-head {
  margin: calc(-1 * var(--pad-carte)) calc(-1 * var(--pad-carte)) 16px;
  padding: 13px var(--pad-carte); align-items: center;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--primary-rgb), .07), transparent);
  border-radius: calc(var(--r) - 2px) calc(var(--r) - 2px) 0 0;
}
.card.replie > .card-head { margin-bottom: calc(-1 * var(--pad-carte)); border-bottom-color: transparent; border-radius: calc(var(--r) - 2px); }
.card-head h2 { font-size: 16px; font-weight: 600; line-height: 1.5; }
.card-head .sub { margin-top: 1px; }
.card-fold {
  width: 28px; height: 28px; margin-top: 0; border-radius: 8px;
  background: var(--primary); color: var(--primary-ink);
}
.card-fold:hover { background: var(--primary-hover); color: var(--primary-ink); box-shadow: 0 0 18px -4px rgba(var(--primary-rgb), .9); }
.card-fold[aria-expanded="false"] { transform: rotate(-90deg); }
/* Les tuiles et le bandeau : un cadre plus fin, de la même couleur. */
.stat, .kpi-band { box-shadow: none; border: 1px solid var(--cadre-doux); }
.tabs { box-shadow: none; border: 1px solid var(--cadre-doux); }

/* --- boutons : ceux de Création IA --- */
.btn { border-radius: 10px; transition: background .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s; }
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 22px -3px rgba(var(--primary-rgb), .95); }
.btn-outline { background: transparent; border-color: var(--line-strong); color: var(--ink-soft); }
.btn-outline:hover:not(:disabled) { background: rgba(var(--primary-rgb), .12); border-color: rgba(var(--primary-rgb), .6); color: var(--primary-fg); }
/* Rouge PLEIN : supprimer, et confirmer un paiement (« le bouton Confirmer le paiement doit être rouge », 27/10). */
.btn-danger { background: var(--rouge-plein); border-color: transparent; color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--rouge-survol); box-shadow: 0 0 22px -3px rgba(239, 68, 68, .9); }
.btn-vert { background: var(--vert-plein); color: #fff; }
.btn-vert:hover:not(:disabled) { background: var(--vert-survol); box-shadow: 0 0 22px -3px rgba(16, 185, 129, .9); }
.btn-orange { background: var(--orange-plein); border-color: transparent; color: #fff; }
.btn-orange:hover:not(:disabled) { background: var(--orange-survol); box-shadow: 0 0 22px -3px color-mix(in srgb, var(--sortie-abonnement) 90%, transparent); }
.btn-ghost:hover { background: rgba(255, 255, 255, .06); }
/* La croix qui SUPPRIME est rouge (celle qui ferme une fenêtre reste neutre). */
.icon-btn.icon-btn-rouge { color: var(--solde-rouge); }
.icon-btn.icon-btn-rouge:hover { color: #fff; background: var(--rouge-plein); box-shadow: 0 0 14px -4px rgba(239, 68, 68, .9); }
.icon-btn.icon-btn-bleu:hover { box-shadow: 0 0 14px -4px rgba(var(--primary-rgb), .9); }

/* --- onglets et choix : les pilules de Création IA --- */
.tab { border-radius: 8px; transition: background .15s, color .15s, box-shadow .15s; }
.tab:hover { background: rgba(var(--primary-rgb), .14); color: var(--primary-fg); }
.tab.active, .tab.active:hover { background: var(--primary); color: var(--primary-ink); box-shadow: 0 0 16px -4px rgba(var(--primary-rgb), .9); }
.seg-btn.actif { box-shadow: 0 0 14px -5px rgba(var(--primary-rgb), .9); }
.paye-vue.active { box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .55), 0 0 16px -6px rgba(var(--primary-rgb), .9); }

/* --- champs : le contour bleuit au survol, comme `.ci-champ` --- */
@media (hover: hover) {
  .input:hover, .select:hover, .textarea:hover { border-color: rgba(var(--primary-rgb), .7); box-shadow: 0 0 18px -8px rgba(var(--primary-rgb), .85); }
}

/* --- tableaux : en-têtes en petites capitales, ligne survolée bleutée --- */
thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
tbody tr:hover { background: rgba(var(--primary-rgb), .04); }

/* --- fenêtres : le même cadre que les cartes --- */
.modal { border: 2px solid var(--cadre); }

/* --- états vides : une seule forme, centrée, sans phrase de trop --- */
.vide-semaine {
  padding: 18px 14px; text-align: center; color: var(--ink-mute); font-size: 13.5px;
  border: 1px dashed var(--line-strong); border-radius: 10px;
}
.empty { padding: 40px 20px; }

/* --- une lecture gardée, le temps que L'agence réponde --- */
.agence-contenu.provisoire .agence-lignes, .agence-contenu.provisoire .agence-total { opacity: .55; }

/* --- « Archive » : ce qui est passé, replié sous un bouton --- */
.archive { display: grid; gap: 8px; margin-top: 4px; }
.archive-bouton { justify-self: start; }
.archive-chevron { display: inline-block; transition: transform .15s; }
.archive-bouton[aria-expanded="true"] .archive-chevron { transform: rotate(90deg); }
.archive-zone:empty { display: none; }
.archive-zone { display: grid; gap: 8px; padding-left: 10px; border-left: 2px solid var(--cadre-doux); }

/* --- la petite fenêtre « Confirmer le paiement » --- */
.confirm-paiement { display: grid; gap: 14px; }
.confirm-total { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.confirm-lignes { display: grid; border: 1px solid var(--line); border-radius: 10px; max-height: 260px; overflow-y: auto; }
.confirm-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: 13.5px; }
.confirm-ligne + .confirm-ligne { border-top: 1px solid var(--line); }

/* --- Agence de chatting : les soldes, une ligne par modèle --- */
.solde-vert { color: var(--solde-vert); }
.solde-rouge { color: var(--solde-rouge); }
.solde-total {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line);
}
.solde-total-val { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.solde-op { color: var(--ink-mute); font-weight: 600; padding: 0 2px; }
.solde-op.grand { font-size: 22px; }
.table-soldes td { vertical-align: middle; }
.table-soldes .row-actions { gap: 6px; align-items: center; }
.solde-ligne.ouverte td { border-bottom-color: transparent; }
.solde-plier { transition: transform .15s; }
.solde-plier[aria-expanded="false"] { transform: rotate(-90deg); }
.solde-detail-tr:hover { background: transparent; }
.solde-detail-tr > td { padding-top: 0; }
.solde-detail {
  display: grid; gap: 12px; padding: 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--cadre-doux);
}
.solde-detail-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.solde-detail-bloc { display: grid; gap: 8px; align-content: start; }
.solde-calcul { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; font-variant-numeric: tabular-nums; }
.solde-calcul > span:not(.solde-op) { display: grid; }
.solde-calcul small { font-size: 11px; color: var(--ink-mute); font-weight: 400; }
.solde-semaines { display: grid; border: 1px solid var(--line); border-radius: 10px; }
.solde-semaine { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 12px; font-size: 13px; }
.solde-semaine + .solde-semaine { border-top: 1px solid var(--line); }
.solde-semaine-droite { display: inline-flex; align-items: center; gap: 6px; }
.solde-semaine-droite .icon-btn { width: 26px; height: 26px; }
.solde-net-ligne {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums;
  padding: 10px 12px; border-radius: 10px; background: rgba(var(--primary-rgb), .06);
}

/* --- téléphone : rien ne déborde --- */
@media (max-width: 760px) {
  .solde-total { grid-template-columns: 1fr; gap: 6px; }
  .solde-total .solde-op { display: none; }
  .solde-total-val { font-size: 22px; }
  .solde-detail-grille { grid-template-columns: minmax(0, 1fr); }
  .card > .card-head { padding: 12px var(--pad-carte); }
  .table-soldes .col-proprio { display: none; }
}

/* Salaires par équipe (28/10) : une section par groupe, son total dans l'en-tête. */
.salaires-groupe-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 0 2px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }

/* Modèles (28/10) : « ma part X % · sa part Y % » côte à côte, et la fin de contrat. */
.parts-ligne { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.parts-libelle { font-size: .74rem; color: var(--ink-mute); }
.parts-sa { font-size: .8rem; color: var(--ink-soft); }
.badge.badge-fin { margin-top: 3px; color: var(--negatif); border-color: color-mix(in srgb, var(--negatif) 35%, transparent);
  background: color-mix(in srgb, var(--negatif) 10%, transparent); }

/* Équipe (28/10) : une semaine rendue et payée se voit en VERT ; « Archive » en bleu. */
.paye-vue.payee, .paye-vue.payee.active { opacity: 1; color: var(--solde-vert); background: color-mix(in srgb, var(--vert-plein) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vert-plein) 45%, transparent); }
.paye-vue.paye-vue-archive:not(.active) { color: var(--primary-fg); box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .35); }
.paye-archive-ligne.payee { box-shadow: inset 3px 0 0 var(--vert-plein); }

/* Le logo d'une source de ventes (28/10) : Telegram, OnlyFans — petit, rond, aligné sur le texte. */
.logo-source { display: inline-flex; width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.16em; }
.logo-source svg { width: 100%; height: 100%; display: block; }
.tile-ico .logo-source { width: 20px; height: 20px; }
.sources-ventes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.puce-source { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 999px;
  font-size: 12px; color: var(--ink-soft); background: var(--raised); border: 1px solid var(--line); }
.puce-source .num { color: var(--ink); font-weight: 600; }

/* Total (28/10) : la page dans un conteneur, et le mode photo — sans boutons de repli ni encombrement. */
.vue-total > * + * { margin-top: 18px; }
.bouton-photo { display: inline-flex; align-items: center; gap: 6px; }
.mode-photo .card-fold, .mode-photo .gcrm-bascule { display: none; }
.mode-photo .total-actions { justify-content: flex-end; }
/* Salaires : le total puis les quatre équipes, sur une seule rangée quand la place le permet. */
@media (min-width: 1100px) { .grid.grid-salaires { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.equipe-ligne.paye-passee { box-shadow: inset 3px 0 0 var(--vert-plein); }
.paye-faite { color: var(--solde-vert); font-weight: 700; }

/* « Mode photo » : VIOLET plein, bien visible (28/10). */
:root { --violet-plein: #7c3aed; --violet-survol: #8b5cf6; }
.btn-violet { background: var(--violet-plein); border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 0 16px -4px rgba(124, 58, 237, .9); }
.btn-violet:hover:not(:disabled) { background: var(--violet-survol); box-shadow: 0 0 24px -3px rgba(139, 92, 246, .95); }
.total-actions .bouton-photo { margin-right: auto; }
/* Mode photo : Telegram et OnlyFans, côte à côte. */
.kpi-rest.kpi-rest-photo { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Agence de chatting (28/10) : les ventes d'une semaine en puces, bien espacées. */
.solde-semaine { align-items: flex-start; padding: 10px 12px; }
.solde-semaine-texte { display: grid; gap: 4px; min-width: 0; }
.puces-ventes { margin: 0; padding-left: 18px; color: var(--ink-mute); font-size: 12.5px; line-height: 1.6; }
.puces-ventes li::marker { color: var(--primary); }

/* Fiche client (28/10) : qui, puis les chiffres, puis les achats — aligné, aéré. */
.identite-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; }
@media (max-width: 760px) { .identite-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.identite-valeur { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; margin-top: 3px; }
.fiche-client .grid-kpi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.identite-grille.fiche-chiffres { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) { .identite-grille.fiche-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fiche-chiffres .identite-valeur { font-size: 16px; }

/* Prévision (28/10) : peu de mots, les chiffres en grand, la fourchette dessous. */
.prev-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.prev-case { padding: 12px 14px; border-radius: var(--r-sm, 10px); background: var(--raised); border: 1px solid var(--cadre-doux); }
.prev-libelle { font-size: 12px; color: var(--ink-mute); }
.prev-valeur { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; }
.prev-fourchette { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.prev-comparaison { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.prev-sur { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-sm, 10px); border: 1px solid var(--line); }
.prev-sur-ligne { display: flex; justify-content: space-between; font-size: 13px; }
@media (max-width: 640px) { .prev-grille { grid-template-columns: 1fr; } }

/* Total : la répartition en couleurs (28/10). */
.rep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 900px) { .rep { grid-template-columns: 1fr; } }
.rep-bloc { display: grid; gap: 8px; align-content: start; }
.rep-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rep-totaux { display: inline-flex; gap: 10px; font-size: 13px; }
.rep-barre { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--raised); }
.rep-segment { height: 100%; }
.rep-segment + .rep-segment { box-shadow: inset 2px 0 0 var(--surface); }
.rep-ligne { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr 1.2fr; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; }
.rep-ligne + .rep-ligne { border-top: 1px solid var(--line); }
.rep-ligne-sortie { grid-template-columns: minmax(0, 1.4fr) 1fr 1.2fr; }
.rep-entete { font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .04em; padding: 2px 0; }
.rep-nom { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rep-pastille { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rep-part { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); justify-content: flex-end; }
.rep-mini { width: 60px; height: 6px; border-radius: 99px; background: var(--raised); overflow: hidden; display: inline-block; }
.rep-mini > span { display: block; height: 100%; }

/* ============================================================
   🔴 LA DA DU CRM, À L'IDENTIQUE (03/11) — « la même DA que le CRM partout… quand on passe de L'agence au CRM, il n'y
   a pas de différence » (le porteur du projet). Le CRM est passé au style Apple le 03/11 : menu noir en dégradé avec
   une fine bande à droite, choix sur fond blanc translucide, pastilles grises, boutons pleins sans halo, cartes sans
   cadre. Ce bloc vient en dernier : il prime sur les cadres bleus et les halos du 27/10.
   ============================================================ */
.sidebar {
  background: linear-gradient(90deg, var(--background) 0%, color-mix(in srgb, var(--background) 92%, white 3%) 100%);
  border-right: 1px solid transparent;
  border-image: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--primary) 45%, transparent) 35%, rgba(255, 255, 255, 0.16) 65%, transparent 100%) 1;
}
.carres-barre .carre { border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: none; color: var(--nav-ink); }
.carres-barre .carre:hover { background: rgba(255, 255, 255, .09); box-shadow: none; }
.carres-barre .carre.active { background: rgba(255, 255, 255, .12); box-shadow: none; }
.nav-item { font-size: 14px; border-radius: 8px; }
.nav-item:hover { background: rgba(255, 255, 255, .05); }
.nav-item.active { background: rgba(255, 255, 255, .09); }
.card { border: 0; box-shadow: none; }
.card > .card-head { background: none; }
.card-fold:hover, .btn-primary:hover:not(:disabled), .icon-btn.icon-btn-bleu:hover,
.input:hover, .select:hover, .textarea:hover { box-shadow: none; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.segmented { background: rgba(255, 255, 255, .06); border-radius: 8px; padding: 2px; }
.segmented button { border-radius: 6px; }
.segmented button:hover { background: transparent; }
.segmented button[aria-pressed="true"], .tab.active, .tab.active:hover, .seg-btn.actif, .month-btn.actif {
  background: rgba(255, 255, 255, .14); color: var(--ink); box-shadow: none;
}
/* Le titre de page dans le cadre gris du CRM, avec « Connexion sécurisée » (03/11). */
#page-title {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  width: fit-content; min-width: min(100%, 24rem); padding: .3rem .85rem; border-radius: .6rem;
  background-color: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  font-size: 1.375rem; font-weight: 600; line-height: 1.75rem;
}
#page-title::after {
  content: "Connexion sécurisée"; flex-shrink: 0; padding-left: 14px; font-size: 11px; font-weight: 500;
  color: var(--ink-soft); background: radial-gradient(circle at 4px 50%, #34c759 3px, transparent 3.6px) no-repeat;
}

/* 🔴 LES RÈGLES GLOBALES DU CRM, DEUXIÈME PASSE (03/11 — « toutes les pages parfaitement identiques au CRM ») : le fin
   liseré clair des cartes, leurs titres à 15 px, plus aucun titre en majuscules (le CRM n'en écrit nulle part), les
   barres de défilement cachées. En Clair (`html` sans `.dark`), le liseré passe en teinte foncée. */
.card, .stat { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html:not(.dark) .card, html:not(.dark) .stat { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.card-head h2 { font-size: 15px; font-weight: 600; letter-spacing: 0; }
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
.nav-label { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.liste-tete, .group-label, .kpi-hero-label, .rep-entete, .cal-dow, .equipe-section-tete, thead th { text-transform: none; letter-spacing: 0; font-size: 12px; }
/* 🔴 PLUS DE TITRE EN HAUT DES PAGES (03/11 — « enlève tous les titres en haut… sur toutes les pages… ça fait moche ») :
   le cadre « … · Connexion sécurisée » ne se voit plus ; le titre reste pour les lecteurs d'écran. */
#page-title {
  position: absolute !important; width: 1px; height: 1px; min-width: 0; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}