/* ————————————————————————————————————————————————————————
   Trésorerie Bao Family — feuille de style
   Palette de scénarios validée (contraste + daltonisme) en clair ET sombre.
   ———————————————————————————————————————————————————————— */

:root {
  --surface: #fcfcfb;
  --panel: #ffffff;
  --panel-2: #f6f6f4;
  --border: #e3e2de;
  --border-fort: #cfcec9;
  --ink: #1a1a19;
  --ink-2: #55534e;
  --ink-3: #8a8880;

  /* Palette catégorielle : ordre FIXE, jamais recyclée.
     Validée en clair et en sombre (bande de clarté, chroma, écart CVD, contraste). */
  --serie-1: #2563eb;
  --serie-2: #059669;
  --serie-3: #dc2626;
  --serie-4: #7c3aed;
  --serie-5: #ea580c;
  --serie-6: #0891b2;

  --bon: #047857;
  --alerte: #b45309;
  --grave: #b91c1c;

  --r: 8px;
  --ombre: 0 1px 2px rgba(0, 0, 0, .05), 0 1px 8px rgba(0, 0, 0, .04);
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

:root[data-theme="sombre"] {
  --surface: #1a1a19;
  --panel: #232322;
  --panel-2: #2b2b29;
  --border: #3a3a37;
  --border-fort: #4d4d49;
  --ink: #f2f1ee;
  --ink-2: #b4b2ac;
  --ink-3: #85837c;

  --serie-1: #3b82f6;
  --serie-2: #0fae86;
  --serie-3: #ef4444;
  --serie-4: #8b5cf6;
  --serie-5: #d97521;
  --serie-6: #22a5bd;

  --bon: #34d399;
  --alerte: #fbbf24;
  --grave: #f87171;
  --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 8px rgba(0, 0, 0, .2);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ——— En-tête ——— */
header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 0 22px; height: 56px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.marque { font-weight: 640; letter-spacing: -.01em; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.marque span { color: var(--ink-3); font-weight: 450; }
.logo-marque { height: 26px; width: auto; display: block; }

/* flex-wrap : la nav passe à la ligne plutôt que de pousser des onglets
   hors écran (l'onglet « Détail mensuel » était invisible à largeur moyenne). */
nav { display: flex; flex-wrap: wrap; gap: 2px; margin-left: 8px; }
nav button {
  border: 0; background: none; color: var(--ink-2);
  padding: 7px 13px; border-radius: 7px; cursor: pointer;
  font: inherit; font-weight: 500; white-space: nowrap;
}
nav button:hover { background: var(--panel-2); color: var(--ink); }
nav button[aria-current="page"] { background: var(--panel-2); color: var(--ink); font-weight: 600; }

.entete-droite { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Un display: posé par une classe écrase l'attribut hidden (spécificité UA) :
   le bouton « Connexion » du chantier login apparaissait pourtant hidden —
   réduit à sa pastille orange, incompréhensible (constaté par Billy). */
[hidden] { display: none !important; }

/* ——— Sélecteur de scénario (compact, juil. 2026) ———
   Seul l'actif affiche son nom ; les autres ne sont que des pastilles.
   Un clic bascule — l'état reste visible, contrairement à un déroulant. */
.scenario-choix { display: flex; align-items: center; }
.segment-scenarios {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--panel);
  padding: 2px;
}
.segment {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; font: inherit;
  padding: 4px 8px; border-radius: 999px; color: var(--ink-2);
}
.segment:hover { background: var(--panel-2); }
.segment.actif { background: color-mix(in srgb, var(--c) 12%, var(--panel)); color: var(--ink); font-weight: 600; }
.segment .pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.segment .nom { font-size: 13px; }

/* ——— Badge Pennylane (en-tête) ———
   Carré arrondi avec le logo ; point d'état en coin (vert = toutes les
   connexions vérifiées, orange = partiel, rouge = en échec). L'infobulle
   au survol donne le détail 12/12, les sociétés en erreur et la dernière
   synchro ; le clic ouvre le panneau d'import. */
.badge-pennylane {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); padding: 0;
}
.badge-pennylane:hover { border-color: var(--border-fort); background: var(--panel-2); }
.badge-pennylane .point-etat {
  position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--bon); border: 2px solid var(--bg);
}
.badge-pennylane.attention .point-etat { background: var(--alerte); }
.badge-pennylane.panne .point-etat { background: var(--grave); }
.badge-pennylane.panne { border-color: color-mix(in srgb, var(--grave) 45%, var(--border)); }

/* ——— Pastille d'état du connecteur (en-tête) ———
   Volontairement discrète : un point de couleur + le nom, pas de bordure.
   Vert = opérationnel · orange = à vérifier · rouge = en échec. */
.statut-connecteur {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 500; color: var(--ink-3);
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
.statut-connecteur:hover { background: var(--panel-2); color: var(--ink-2); }
.statut-connecteur .pastille-statut {
  width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--bon);
}
.statut-connecteur.attention .pastille-statut { background: var(--alerte); }
.statut-connecteur.panne .pastille-statut { background: var(--grave); }
/* Écran étroit : le point suffit, le nom passe en infobulle. */
@media (max-width: 1460px) { .statut-connecteur .statut-nom { display: none; } }

.bouton {
  border: 1px solid var(--border); background: var(--panel); color: var(--ink-2);
  padding: 6px 11px; border-radius: 7px; cursor: pointer; font: inherit; font-weight: 500;
}
.bouton:hover { border-color: var(--border-fort); color: var(--ink); }
.bouton.primaire { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.bouton.primaire:hover { opacity: .88; }
.bouton.discret { border-color: transparent; background: none; }
.bouton.discret:hover { background: var(--panel-2); }

main { padding: 22px; max-width: 1560px; margin: 0 auto; }

/* ——— Sous-navigation par onglet ———
   Générée depuis les titres de panneaux : cliquer fait défiler jusqu'à la
   section, la section visible est surlignée pendant le défilement. */
.sousnav {
  position: sticky; top: 56px; z-index: 40;
  display: flex; gap: 6px; overflow-x: auto;
  padding: 10px 2px 12px; margin: -6px 0 10px;
  background: linear-gradient(var(--surface) 82%, transparent);
  scrollbar-width: none;
}
.sousnav::-webkit-scrollbar { display: none; }
.sousnav-lien {
  border: 1px solid var(--border); background: var(--panel); color: var(--ink-2);
  padding: 5px 12px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 550; white-space: nowrap; flex: none;
}
.sousnav-lien:hover { border-color: var(--border-fort); color: var(--ink); }
.sousnav-lien[aria-current="true"] {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}
/* Le défilement s'arrête sous l'en-tête + la sous-nav, pas derrière. */
.panneau { scroll-margin-top: 112px; }
.vue[hidden] { display: none; }

/* ——— Tuiles d'indicateurs ——— */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tuile {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 16px; box-shadow: var(--ombre);
}
.tuile .libelle {
  font-size: 11.5px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .045em; font-weight: 600; margin-bottom: 7px;
}
.tuile .valeur { font-size: 25px; font-weight: 640; letter-spacing: -.022em; font-variant-numeric: tabular-nums; }
.tuile .detail { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.tuile.est-alerte .valeur { color: var(--alerte); }
.tuile.est-grave .valeur { color: var(--grave); }
.tuile.est-bon .valeur { color: var(--bon); }

/* ——— Panneaux ——— */
.panneau {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--ombre); margin-bottom: 16px;
}
.panneau > h2 {
  margin: 0; padding: 13px 16px; font-size: 13.5px; font-weight: 640;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.panneau > h2 .note { font-weight: 450; color: var(--ink-3); font-size: 12.5px; }
.panneau > h2 .actions { margin-left: auto; display: flex; gap: 6px; }
.panneau .corps { padding: 16px; }

/* ——— Graphiques ——— */
.graphe { width: 100%; display: block; overflow: visible; }
.graphe .grille { stroke: var(--border); stroke-width: 1; }
.graphe .axe-txt { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.graphe .ligne-zero { stroke: var(--border-fort); stroke-width: 1; stroke-dasharray: 2 3; }
.graphe .courbe { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graphe .courbe.prevu { stroke-dasharray: 5 4; }
.graphe .seuil { stroke: var(--alerte); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .75; }
.graphe .jalon { stroke: var(--border-fort); stroke-width: 1; stroke-dasharray: 2 4; }
.graphe .jalon-txt {
  fill: var(--ink-2); font-size: 10px;
  /* Halo couleur du panneau : le texte reste lisible quand une courbe le croise. */
  paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round;
}
.graphe .curseur { stroke: var(--ink-3); stroke-width: 1; }
.graphe .point-bas circle { stroke: var(--surface); stroke-width: 2; }
.graphe .point-bas text { font-size: 11px; font-weight: 640; }

.legende { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 16px 14px; font-size: 12.5px; color: var(--ink-2); }
.legende .item { display: inline-flex; align-items: center; gap: 7px; }
.legende .trait { width: 15px; height: 2.5px; border-radius: 2px; background: var(--c); flex: none; }
.legende .trait.pointille {
  background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 9px);
}

/* ——— Infobulle ——— */
.infobulle {
  position: fixed; z-index: 100; pointer-events: none; opacity: 0;
  transition: opacity .1s; background: var(--panel); color: var(--ink);
  border: 1px solid var(--border-fort); border-radius: var(--r);
  padding: 9px 11px; font-size: 12.5px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  min-width: 170px;
}
.infobulle.visible { opacity: 1; }
.infobulle .titre { font-weight: 640; margin-bottom: 6px; font-size: 12px; }
.infobulle .ligne { display: flex; justify-content: space-between; gap: 18px; padding: 1.5px 0; }
.infobulle .ligne .k { color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.infobulle .ligne .v { font-variant-numeric: tabular-nums; font-weight: 550; }
.infobulle .pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }

/* ——— Tableaux ——— */
.tableau-enveloppe { overflow-x: auto; }
/* Longs tableaux : hauteur bornée -> le défilement devient INTERNE à
   l'enveloppe, et l'en-tête sticky reste réellement visible. Sans cela,
   `overflow-x:auto` crée un contexte de défilement qui suit la page :
   l'en-tête partait avec elle (demande Billy, juil. 2026). */
.enveloppe-haute { max-height: calc(100vh - 150px); overflow: auto; }
/* Cellules compactes : un nombre court n'a pas besoin d'une cellule large.
   Appliqué aux colonnes « chiffre unique » (mois, taux, échéances…). */
table .cellule.compacte, td.compacte .cellule { max-width: 72px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 8px 11px; text-align: right; white-space: nowrap; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
thead th { border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); z-index: 2; }
th:first-child, td:first-child {
  text-align: left; position: sticky; left: 0; background: var(--panel);
  z-index: 1; min-width: 230px;
}
thead th:first-child { z-index: 3; }
td { font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: var(--panel-2); }
tbody tr:hover td:first-child { background: var(--panel-2); }
tr.section td { font-weight: 640; background: var(--panel-2); border-top: 1px solid var(--border); }
tr.section:hover td { background: var(--panel-2); }
tr.total td { font-weight: 640; border-top: 1px solid var(--border-fort); }
td.negatif { color: var(--grave); }
td.reel { background: color-mix(in srgb, var(--serie-5) 7%, transparent); }
.col-reel { color: var(--serie-5); }

/* ——— Comparateur fusionné dans le pied du tableau des hypothèses ——— */
#tableHypotheses .ecart { font-size: 11.5px; font-weight: 550; color: var(--ink-3); }
#tableHypotheses .ecart.pos { color: var(--bon); }
#tableHypotheses .ecart.neg { color: var(--grave); }
#tableHypotheses div.unite { margin-left: 0; }
/* Nom de scénario éditable dans l'en-tête de colonne. */
th.scenario-col .cellule.nom-sc { width: 118px; min-width: 0; font-weight: 600; font-size: 12.5px; }

/* ——— Cartes projet ——— */
.grille-projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.carte-projet {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--ombre);
}
.carte-projet.inactif { opacity: .5; }
.carte-projet .tete { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
.carte-projet .tete h3 { margin: 0; font-size: 14.5px; font-weight: 620; flex: 1; }
.carte-projet .sous { font-size: 12px; color: var(--ink-3); margin-bottom: 12px; }
.carte-projet .stats { display: flex; gap: 16px; margin: 11px 0 5px; }
.carte-projet .stats div { font-size: 12px; color: var(--ink-3); }
.carte-projet .stats b { display: block; font-size: 15px; color: var(--ink); font-weight: 620; font-variant-numeric: tabular-nums; }

.champ { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
.champ label { font-size: 12.5px; color: var(--ink-2); flex: 1; }
.champ .val { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 84px; text-align: right; }
.champ input[type="range"] { flex: 1.6; accent-color: var(--serie-1); }
.champ input[type="number"], .champ input[type="text"], .champ select {
  width: 116px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--panel); color: var(--ink);
  font: inherit; font-variant-numeric: tabular-nums; text-align: right;
}
.champ input[type="text"] { text-align: left; width: 100%; }
.champ input:focus, .champ select:focus { outline: 2px solid var(--serie-1); outline-offset: -1px; }

.interrupteur { position: relative; width: 36px; height: 20px; flex: none; }
.interrupteur input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.interrupteur .piste {
  position: absolute; inset: 0; border-radius: 999px; background: var(--border-fort);
  transition: background .15s; pointer-events: none;
}
.interrupteur .piste::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.interrupteur input:checked ~ .piste { background: var(--serie-2); }
.interrupteur input:checked ~ .piste::after { transform: translateX(16px); }

/* ——— Frise des ouvertures ——— */
.frise { position: relative; }
.frise .rail { fill: var(--panel-2); }
.frise .barre-travaux { fill: var(--ink-3); opacity: .28; }
.frise .barre-ca { fill: var(--c); opacity: .82; }
.frise .etiquette { fill: var(--ink); font-size: 11.5px; font-weight: 550; }
.frise .annee { fill: var(--ink-3); font-size: 11px; }

/* ——— Surcharge de scénario ——— */
.surcharge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  padding: 2px 7px; border-radius: 999px; font-weight: 600;
  background: color-mix(in srgb, var(--serie-4) 14%, transparent); color: var(--serie-4);
}

/* ——— Saisie directe dans les tableaux ——— */
/* Priorité au fonctionnel : on tape la valeur, on ne la cherche pas au curseur.
   Règle de lecture : une CASE visible = modifiable ; du texte nu = calculé.
   La case est un FOND teinté permanent (l'affordance reste lisible d'un coup
   d'œil) ; la bordure n'apparaît qu'au survol/focus — audit UX juil. 2026 :
   205 cellules bordées à l'écran donnaient au tableau un air de formulaire. */
.cellule {
  width: 100%; min-width: 78px; padding: 5px 7px;
  border: 1px solid transparent; border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 4.5%, transparent); color: var(--ink);
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
  text-align: right;
}
.cellule:hover { border-color: var(--border-fort); }
.cellule:focus {
  outline: none; border-color: var(--serie-1); background: var(--panel);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--serie-1) 16%, transparent);
}
.cellule.texte { text-align: left; min-width: 0; font-weight: 600; flex: 1; }
.cellule.date { min-width: 132px; text-align: left; }
/* Première colonne : interrupteur + nom, sans débordement sur la colonne suivante. */
.ligne-nom { display: flex; align-items: center; gap: 8px; min-width: 250px; }
.ligne-nom .interrupteur { flex: none; }
.cellule[type="month"]::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
.cellule[type="month"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
select.cellule { text-align: left; min-width: 110px; }
/* Volet « Réglages » d'une ouverture : champs nommés en grille, pas des
   colonnes — 8 réglages fins sortis du tableau (trop de cases, Billy). */
.volet-projet > td { background: var(--panel-2); padding: 12px 16px; }
.fiche-projet { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-end; }
.champ-projet { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-3); }
.champ-projet > span { white-space: nowrap; }
.champ-projet .cellule { background: var(--panel); }
.champ-projet.calcul b { color: var(--ink); font-size: 13px; }

/* Cases compactes : 12 mois de saisonnalité sur une seule ligne. */
.cellule.compacte { min-width: 52px; text-align: center; padding: 5px 4px; }
#tableSaison th, #tableSaison td { padding: 6px 4px; text-align: center; }
/* Cellule héritée d'un autre scénario : visible d'un coup d'œil. */
.cellule.heritee { color: var(--ink-3); font-style: italic; }
td.calcul { color: var(--ink-2); }
th.groupe {
  border-left: 1px solid var(--border);
  text-align: center !important; font-size: 10.5px;
}
td.sep, th.sep { border-left: 1px solid var(--border); }
.unite { color: var(--ink-3); font-size: 11.5px; margin-left: 3px; }

/* Bandeau du scénario actif dans le tableau d'hypothèses */
th.scenario-col { text-align: right; }
th.scenario-col .nom { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
th.scenario-col .pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
th.scenario-col.actif { background: color-mix(in srgb, var(--c) 12%, transparent); }
td.scenario-cell.actif { background: color-mix(in srgb, var(--c) 7%, transparent); }

/* ——— Bandeau de scénarios collant (demande Billy) ———
   Sur les GROS tableaux (hypothèses), l'en-tête Base/Optimiste/Prudent reste
   visible en défilant. Impératif : l'enveloppe ne doit PAS défiler elle-même
   (un conteneur overflow avale le sticky) — possible ici car ce tableau ne
   déborde pas horizontalement (4 colonnes). */
.enveloppe-collante { overflow-x: visible; }
.enveloppe-collante thead th {
  top: 104px;                       /* sous l'en-tête (56 px) + la sous-nav */
  z-index: 30;
  background: var(--panel);         /* opaque : le contenu passe dessous */
  box-shadow: 0 1px 0 var(--border);
}
.enveloppe-collante th.scenario-col.actif {
  background: color-mix(in srgb, var(--c) 12%, var(--panel));
}

/* ——— Fiche salarié (superposition) ——— */
.modale[hidden] { display: none; }
.modale { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modale-fond { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); backdrop-filter: blur(2px); }
.modale-boite {
  position: relative; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 48px rgba(0, 0, 0, .22);
  width: min(640px, 100%); max-height: 88vh; display: flex; flex-direction: column;
}
/* Note de modèle : visible sous le nom, ton atténué pour la distinguer du nom. */
.note-modele {
  font-weight: 450; font-size: 12px; color: var(--serie-4);
  margin-top: 2px; font-style: italic;
}
.note-modele::placeholder { color: var(--ink-3); font-style: italic; }

/* Variante large : le gestionnaire de modèles affiche un tableau params x modèles. */
.modale-boite.large { width: min(1020px, 96vw); }
.modale-tete {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.modale-tete h3 { margin: 0; font-size: 15.5px; font-weight: 640; flex: 1; }
.modale-corps { padding: 18px; overflow-y: auto; }
.modale-corps h4 {
  margin: 20px 0 8px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .045em; color: var(--ink-3); font-weight: 640;
}
.modale-corps h4:first-child { margin-top: 0; }

/* Ligne d'événement de carrière */
.evenement {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 7px; margin-bottom: 6px;
  background: var(--panel-2);
}
.evenement .type {
  font-size: 11px; font-weight: 640; padding: 2px 8px; border-radius: 999px;
  background: var(--c); color: #fff; white-space: nowrap;
}
.evenement .lib { flex: 1; font-size: 13px; }
.evenement .lib small { display: block; color: var(--ink-3); font-size: 11.5px; }
.evenement .montant { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Récapitulatif de paie */
.paie-recap {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; margin: 4px 0 6px;
}
.paie-recap div { background: var(--panel); padding: 11px 13px; }
.paie-recap .k { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.paie-recap .v { font-size: 18px; font-weight: 640; font-variant-numeric: tabular-nums; margin-top: 2px; }

.badge-statut {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--ink-2); white-space: nowrap;
}
tr.futur td { opacity: .62; }
tr.sortie td { opacity: .5; text-decoration: line-through; }
/* Ligne simplement désactivée (financement, projet) : estompée, jamais barrée —
   elle n'est pas « terminée », elle est en attente d'activation. */
tr.inactif td { opacity: .5; }
tr.inactif .cellule { text-decoration: none; }
td.clic, th.clic { cursor: pointer; }
tbody td.clic:hover { text-decoration: underline; }

/* ——— Frise de clôture (inspirée du « Suivi de clôture » Pennylane) ———
   Un point par mois de l'année : l'avancement de la clôture se lit d'un
   coup d'œil, le clic mène au mois (tableau) ou à l'action (carte). */
.frise-cloture {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--ombre); padding: 8px 14px; margin-bottom: 14px;
}
.frise-cloture .annee { font-size: 12.5px; font-weight: 640; color: var(--ink-2); margin-right: 10px; }
.mois-point {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; background: none; cursor: pointer; font: inherit;
  padding: 5px 8px; border-radius: 7px; color: var(--ink-3); font-size: 10.5px;
}
.mois-point:hover { background: var(--panel-2); color: var(--ink); }
.mois-point .rond {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--border-fort);
}
.mois-point.fait { color: var(--ink-2); }
.mois-point.fait .rond { background: var(--bon); box-shadow: none; }
.mois-point.retard .rond { background: var(--alerte); box-shadow: none; }
.mois-point.encours .rond { background: none; box-shadow: inset 0 0 0 2px var(--serie-1); }
.frise-legende { margin-left: auto; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.frise-legende .rond {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin: 0 3px 0 10px; vertical-align: baseline;
}

/* Mois ciblé depuis la frise : bref surlignage de la colonne. */
@keyframes ligne-flash {
  from { background: color-mix(in srgb, var(--serie-1) 16%, transparent); }
  to { background: none; }
}
tr.flash td, th.flash { animation: ligne-flash 1.8s ease-out; }

/* ——— Tableau du réel basculé : postes en lignes × mois en colonnes ——— */
#tableSuivi th { min-width: 112px; }
#tableSuivi th:first-child, #tableSuivi td:first-child { min-width: 215px; }
#tableSuivi .statut-mois {
  font-size: 10px; font-weight: 450; letter-spacing: 0; text-transform: none;
  color: var(--ink-3); margin-top: 1px;
  max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tableSuivi th [data-rouvrir] { padding: 0 5px; font-size: 11px; margin-top: 2px; }
#tableSuivi .cellule { min-width: 96px; }
.ecart-cellule {
  display: block; font-size: 10.5px; font-weight: 600; text-align: right;
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.ecart-cellule.bonne { color: var(--bon); }
.ecart-cellule.mauvaise { color: var(--grave); }
.pct-cellule {
  display: block; font-size: 10.5px; color: var(--ink-3); text-align: right;
  margin-top: 2px; font-variant-numeric: tabular-nums;
}

/* ——— Carte « Ce mois-ci » : importer → vérifier → clôturer ——— */
.etape { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-top: 1px solid var(--border); }
.etape:first-of-type { border-top: 0; }
.etape .num {
  width: 23px; height: 23px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 640;
  background: var(--panel-2); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--border-fort);
}
.etape.faite .num { background: var(--bon); color: #fff; box-shadow: none; font-size: 12.5px; }
.etape.attente { color: var(--ink-3); }
.etape.attente .num { box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-3); }
.etape .texte { flex: 1; font-weight: 550; min-width: 240px; }
.etape .texte small { display: block; font-weight: 450; color: var(--ink-3); font-size: 12px; margin-top: 1px; }

/* ——— « À surveiller » : dérives du dernier mois clôturé ——— */
.derive {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px dashed var(--border); font-size: 13px;
}
.derive:first-child { border-top: 0; }
.derive .point { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.derive.bonne .point { background: var(--bon); }
.derive.mauvaise .point { background: var(--grave); }
.derive .montant { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 640; white-space: nowrap; }
.derive.bonne .montant { color: var(--bon); }
.derive.mauvaise .montant { color: var(--grave); }

/* ——— Connecteur (style « intégrations ») ———
   Une carte par source de données : icône, nom + état, description,
   actions à droite ; les sociétés se déplient en dessous. */
.connecteur-tete { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.connecteur-icone {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  background: #fff; border: 1px solid var(--border);   /* le logo SVG porte les couleurs Pennylane */
}
.connecteur-infos { flex: 1; min-width: 220px; }
.connecteur-nom {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 640; letter-spacing: -.01em;
}
.connecteur-desc { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

/* Frise des mois de l'import : l'état de chaque mois clos d'un coup d'œil.
   complet = vert plein · groupe = orange (réel groupe sans détail sociétés) ·
   vide = neutre · en cours = hachuré, non importable. */
.connecteur-mois { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 12px; }
.mois-chip {
  border: 1px solid var(--border); background: var(--panel); cursor: pointer;
  font: inherit; font-size: 11.5px; padding: 3px 8px; border-radius: 999px;
  color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px;
}
.mois-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--border-fort); }
.mois-chip.complet::before { background: var(--bon); }
.mois-chip.groupe::before { background: var(--alerte); }
.mois-chip.encours { opacity: .55; }
.mois-chip.choisi { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.mois-chip:hover { border-color: var(--border-fort); color: var(--ink-2); }
.connecteur-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.badge-etat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; padding: 2.5px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--bon) 11%, var(--panel));
  color: var(--bon); white-space: nowrap;
}
.badge-etat .point { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-etat.attention { background: color-mix(in srgb, var(--alerte) 12%, var(--panel)); color: var(--alerte); }
.badge-etat.panne { background: color-mix(in srgb, var(--grave) 11%, var(--panel)); color: var(--grave); }

.connecteur-detail { margin-top: 12px; }
.connecteur-detail > summary {
  cursor: pointer; font-size: 12.5px; color: var(--ink-3); user-select: none;
  width: fit-content; border-radius: 6px; padding: 2px 4px;
}
.connecteur-detail > summary:hover { color: var(--ink-2); background: var(--panel-2); }
.connecteur-societes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.societe-puce {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel);
}
.societe-puce .point { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--bon); }
.societe-puce.off { color: var(--ink-3); }
.societe-puce.off .point { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.societe-puce.exclue { color: var(--ink-3); border-style: dashed; }
.societe-puce.exclue .point { background: none; box-shadow: inset 0 0 0 1.5px var(--border-fort); }
.connecteur-note { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; }
.connecteur-indice { font-size: 12px; color: var(--ink-3); margin-top: 8px; }

/* — Onglet KPIs : cash par société — */
.cash-lignes { display: flex; flex-direction: column; }
.cash-ligne {
  display: grid; grid-template-columns: minmax(130px, 190px) 1fr 120px 74px;
  align-items: center; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.cash-ligne.total { border-bottom: none; border-top: 1px solid var(--border-fort); font-weight: 600; margin-top: 2px; }
.cash-nom { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cash-ligne.total .cash-nom { color: var(--ink); }
.cash-piste { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.cash-barre { display: block; height: 100%; background: var(--serie-1); border-radius: 4px; }
.cash-barre.negatif { background: var(--grave); }
.cash-valeur { text-align: right; font-variant-numeric: tabular-nums; }
.cash-ligne .ecart-cellule { text-align: right; }
/* Roue d'attente des appels Pennylane (préfixe d'un .unite.chargement) */
.chargement::before {
  content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 7px;
  border: 2px solid var(--border-fort); border-top-color: var(--ink-2);
  border-radius: 50%; vertical-align: -1px; animation: tourner .8s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }

.alerte {
  background: color-mix(in srgb, var(--alerte) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--alerte) 40%, var(--border));
  border-left: 3px solid var(--alerte);
  border-radius: var(--r); padding: 13px 16px; margin-bottom: 16px;
  font-size: 13px; line-height: 1.55;
}
.alerte b { color: var(--alerte); }

.ecart-bon { color: var(--bon); font-weight: 600; }
.ecart-mauvais { color: var(--grave); font-weight: 600; }

/* Avis non bloquant (remplace alert) */
.avis {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  z-index: 300; max-width: min(560px, 92vw);
  padding: 11px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--border-fort); border-left: 3px solid var(--grave);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
}
.avis.visible { opacity: 1; transform: translate(-50%, 0); }
.avis.succes { border-left-color: var(--bon); }

.vide { padding: 40px 16px; text-align: center; color: var(--ink-3); }
.aide { font-size: 12.5px; color: var(--ink-3); margin: 0 0 14px; max-width: 78ch; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

@media (max-width: 900px) {
  header { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  nav { order: 3; width: 100%; overflow-x: auto; }
  main { padding: 14px; }
}

/* ————————————————————————————————————————————————————————
   Authentification — écran de connexion, compte, accès
   ———————————————————————————————————————————————————————— */

/* Écran de connexion : recouvre toute l'app tant qu'aucune session valide. */
.ecran-connexion {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 20px;
  background:
    radial-gradient(1100px 500px at 50% -10%, color-mix(in srgb, var(--serie-1) 9%, transparent), transparent 70%),
    var(--surface);
}
.ecran-connexion[hidden] { display: none; }
.connexion-boite {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: min(420px, 94vw); padding: 44px 40px 36px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--ombre);
}
.connexion-logo-img { width: min(300px, 78%); height: auto; }
.connexion-sous-titre { margin: 16px 0 26px; color: var(--ink-2); }
#boutonGoogle { min-height: 44px; display: flex; justify-content: center; color-scheme: light; }
.connexion-note { margin: 14px 0 0; min-height: 1.2em; font-size: 12.5px; color: var(--grave); }
.connexion-pied { margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* Avatar + menu du compte (déroulant, dans les codes des apps Google) */
.bouton-compte { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; line-height: 0; }
.bouton-compte:hover .avatar { filter: brightness(1.08); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--serie-1); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 640; font-size: 13.5px; line-height: 1;
}
.avatar.grand { width: 40px; height: 40px; font-size: 17px; flex: none; }
.menu-compte {
  position: fixed; top: 62px; right: 14px; z-index: 260; width: 288px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .16); padding: 8px;
}
.menu-compte[hidden] { display: none; }
.menu-compte-tete {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 10px 14px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.menu-email { font-weight: 600; word-break: break-all; }
.menu-role { color: var(--ink-3); font-size: 12.5px; }
.menu-item {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; padding: 9px 10px; border-radius: 8px;
  cursor: pointer; font: inherit; color: var(--ink);
}
.menu-item:hover { background: var(--panel-2); }

/* Pastille « lecture seule » dans l'en-tête */
.pill-lecture {
  font-size: 11.5px; font-weight: 600; color: var(--alerte);
  border: 1px solid color-mix(in srgb, var(--alerte) 45%, transparent);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}

/* Gestion des accès (modale) */
.table-acces { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-acces th { text-align: left; color: var(--ink-3); font-weight: 600; font-size: 12px; }
.table-acces th, .table-acces td { padding: 8px; border-bottom: 1px solid var(--border); }
.table-acces td { text-align: left; white-space: normal; }
.table-acces select {
  font: inherit; background: var(--panel); color: var(--ink);
  border: 1px solid var(--border-fort); border-radius: 6px; padding: 4px 6px;
}
.ajout-acces { display: flex; gap: 8px; margin-top: 16px; }
.ajout-acces input[type="email"] {
  flex: 1; font: inherit; background: var(--panel); color: var(--ink);
  border: 1px solid var(--border-fort); border-radius: 6px; padding: 6px 9px;
}
.ajout-acces select {
  font: inherit; background: var(--panel); color: var(--ink);
  border: 1px solid var(--border-fort); border-radius: 6px; padding: 6px 9px;
}

/* — Mode lecteur : consultation seule. —
   Le serveur rejette de toute façon chaque écriture ; ici on retire les
   gestes d'édition pour ne pas laisser croire qu'ils aboutiront. Les
   commandes d'AFFICHAGE (superposer, filtres d'années, légendes, export)
   restent actives : lire, c'est tout l'intérêt du rôle. */
body.lecteur main :is(button, input, select, textarea, [contenteditable]) {
  pointer-events: none; opacity: .55;
}
body.lecteur main :is(#btnExportCsv, #btnComparer, #btnDetailPct),
body.lecteur main :is(#chipsAnneesSuivi, #barrePnl, .legende) :is(button, input, select) {
  pointer-events: auto; opacity: 1;
}