/* ============================================================
   Système de design « medina »
   Back-office syndic de copropriété — Maroc
   ============================================================ */

:root {
  /* WCAG AA 1.4.3 (COP-195) : chaque token porteur de texte atteint >= 4,5:1 sur
     base-100/base-200/blanc ET sur son fond doux (badges) ; teinte d'origine,
     luminance abaissée. --warning reste un token d'ornement (points, barres) :
     le texte ambre passe par --warning-content. */
  /* COP-231 — tranches d'ancienneté de la dette (remplissages, jamais du texte). */
  --age0: #9fcfc8; --age1: #e7b75a; --age2: #d9793f; --age3: #c52e23; --age4: #b9bfc0;
  /* COP-255 — gravité des étapes d'escalade : jaune pâle → orange → rouge pâle → rouge
     (--stepN ornement, --stepN-soft fond, --stepN-text texte des compteurs). */
  --step1: #e7b75a; --step1-soft: #fbf3dc; --step1-text: #976109;
  --step2: #d9793f; --step2-soft: #fbeadf; --step2-text: #a8521f;
  --step3: #e57f76; --step3-soft: #fdeeed; --step3-text: #b3443b;
  --step4: #c52e23; --step4-soft: #fbe2e0; --step4-text: #c52e23;
  --shadow-chain: rgba(29,42,46,.08);
  --primary:      #17786f;   /* teal */
  --primary-2:    #11655d;   /* teal foncé (dégradé) */
  --primary-soft: #e6f1ef;   /* teal très clair (fonds) */
  --accent:       #b24924;   /* terracotta — PARCIMONIE */
  --accent-soft:  #fbe9e2;

  --base-100:     #fefdfb;   /* surfaces, sidebar */
  --base-200:     #f7f6f2;   /* fond de page */
  --base-300:     #e8e4db;   /* contours fins */
  --base-content: #1d2a2e;   /* texte */
  --muted:        #5f6a6e;   /* texte secondaire */
  --muted-2:      #94a0a3;   /* ORNEMENT uniquement (pictos, placeholders) — jamais du texte */
  --serie-in:     #2f9a8e;   /* séries de graphique : entrées (COP-297) */
  --serie-out:    #c9692f;   /* séries de graphique : sorties */

  --success:      #247a53;
  --success-soft: #e4f3ec;
  --warning:      #e0920f;
  --warning-soft: #fbf0db;
  --warning-content: #976109; /* texte ambre (badges, compteurs) */
  --error:        #c52e23;
  --error-soft:   #fbe6e4;
  --info:         #2a6db0;   /* note d'aide informative (COP-342) */
  --info-soft:    #e5eef8;

  --r-card: 1.1rem;
  --r-btn:  0.7rem;

  /* Faces. Cairo right after each Latin face: it only draws the Arabic glyphs (typed names, notes) in a French UI.
     Amounts and dates = the UI face with tabular digits; mono = references, codes and counters only. */
  --f-ui:   "Schibsted Grotesk", "Cairo", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", "Cairo", ui-monospace, monospace;

  --shadow-soft:  0 1px 2px rgba(29,42,46,.04), 0 7px 22px -10px rgba(29,42,46,.12);
  --shadow-card:  0 1px 2px rgba(29,42,46,.035), 0 10px 28px -16px rgba(29,42,46,.14);
  --shadow-lift:  0 14px 40px -14px rgba(29,42,46,.20);
  --shadow-teal:  0 8px 20px -8px rgba(23,120,111,.45);
  --shadow-foot:  0 -8px 18px -14px rgba(20,30,33,.5);
  --shadow-tip:   0 6px 20px -6px rgba(20,28,30,.4);
  --shadow-edge:  0 0 60px -8px rgba(29,42,46,.4);
  --shadow-on-teal:       0 8px 18px -8px rgba(0,0,0,.35);
  --shadow-on-teal-hover: 0 10px 22px -8px rgba(0,0,0,.45);

  /* Thème (COP-232) : plus aucune couleur en dur hors de ces tokens. */
  --on-primary:      #fff;      /* texte/picto sur un aplat teal ou terracotta */
  --border-hover:    #d9d4c8;   /* contour au survol */
  --nav-active:      #eeeae1;   /* aplat de l'entrée de menu active (un cran sous le survol --base-200) */
  --inverse-content: #fff;      /* texte sur surface inversée (toast, fond --base-content) */
  --toast-icon:      #6ee7b7;
  --overlay:         rgba(20,30,33,.42);
  --overlay-sidebar: rgba(20,28,30,.45);
  /* Papier : l'aperçu d'un document imprimé et le fond des logos/tampon restent clairs
     dans les deux thèmes (un PDF est de l'imprimé ; un logo sombre y reste lisible). */
  --paper:           #fff;
  --paper-content:   #1d2a2e;
  --paper-muted:     #5f6a6e;

  color-scheme: light;
}

/* ---------- Thème sombre (COP-232) ----------
   Suit le système (prefers-color-scheme) ; un choix explicite data-theme sur <html>
   (menu profil, mémorisé dans le navigateur) l'emporte dans les deux sens.
   Palette = celle des maquettes validées (.specs/maquettes/*-v2.html). Les deux blocs
   portent les mêmes valeurs : les garder identiques (MedinaThemeCssTest). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #3fb3a6; --primary-2: #2f9a8e; --primary-soft: #173532;
    --age0: #3f8f86; --age1: #c9982f; --age2: #d0763f; --age3: #e0584c; --age4: #4d5a5d;
    --step1: #c9982f; --step1-soft: #33291a; --step1-text: #e9b45a; --step2: #d0763f; --step2-soft: #3a2619; --step2-text: #e8935e;
    --step3: #e58a80; --step3-soft: #3a2220; --step3-text: #f0a39b; --step4: #e0584c; --step4-soft: #45201d; --step4-text: #ee7b70;
    --shadow-chain: rgba(0,0,0,.3);
    --accent: #e0795a; --accent-soft: #3a2219;
    --base-100: #1a2326; --base-200: #131a1c; --base-300: #2c383b; --base-content: #e7ecea;
    --muted: #a3adaf; --muted-2: #6b777a;
    --serie-in: #3fb3a6; --serie-out: #d0763f;
    --success: #5cc494; --success-soft: #16302a;
    --warning: #e7a53a; --warning-soft: #342914; --warning-content: #e9b45a;
    --error: #ee7b70; --error-soft: #3a1c1a;
    --info: #6fa8e0; --info-soft: #18283a;
    --shadow-soft: 0 1px 2px rgba(0,0,0,.3);
    --shadow-card: 0 1px 2px rgba(0,0,0,.3);
    --shadow-lift: 0 14px 40px -14px rgba(0,0,0,.6);
    --shadow-teal: 0 8px 20px -8px rgba(0,0,0,.5);
    --shadow-foot: 0 -8px 18px -14px rgba(0,0,0,.7);
    --shadow-tip:  0 6px 20px -6px rgba(0,0,0,.6);
    --shadow-edge: 0 0 60px -8px rgba(0,0,0,.7);
    --shadow-on-teal:       0 8px 18px -8px rgba(0,0,0,.5);
    --shadow-on-teal-hover: 0 10px 22px -8px rgba(0,0,0,.6);
    --on-primary: #0d1a19; --border-hover: #3d4b4e; --nav-active: #253034;
    --inverse-content: #131a1c; --toast-icon: #247a53;
    --overlay: rgba(0,0,0,.55); --overlay-sidebar: rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary: #3fb3a6; --primary-2: #2f9a8e; --primary-soft: #173532;
  --age0: #3f8f86; --age1: #c9982f; --age2: #d0763f; --age3: #e0584c; --age4: #4d5a5d;
  --step1: #c9982f; --step1-soft: #33291a; --step1-text: #e9b45a; --step2: #d0763f; --step2-soft: #3a2619; --step2-text: #e8935e;
  --step3: #e58a80; --step3-soft: #3a2220; --step3-text: #f0a39b; --step4: #e0584c; --step4-soft: #45201d; --step4-text: #ee7b70;
  --shadow-chain: rgba(0,0,0,.3);
  --accent: #e0795a; --accent-soft: #3a2219;
  --base-100: #1a2326; --base-200: #131a1c; --base-300: #2c383b; --base-content: #e7ecea;
  --muted: #a3adaf; --muted-2: #6b777a;
  --serie-in: #3fb3a6; --serie-out: #d0763f;
  --success: #5cc494; --success-soft: #16302a;
  --warning: #e7a53a; --warning-soft: #342914; --warning-content: #e9b45a;
  --error: #ee7b70; --error-soft: #3a1c1a;
    --info: #6fa8e0; --info-soft: #18283a;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.3);
  --shadow-card: 0 1px 2px rgba(0,0,0,.3);
  --shadow-lift: 0 14px 40px -14px rgba(0,0,0,.6);
  --shadow-teal: 0 8px 20px -8px rgba(0,0,0,.5);
  --shadow-foot: 0 -8px 18px -14px rgba(0,0,0,.7);
  --shadow-tip:  0 6px 20px -6px rgba(0,0,0,.6);
  --shadow-edge: 0 0 60px -8px rgba(0,0,0,.7);
  --shadow-on-teal:       0 8px 18px -8px rgba(0,0,0,.5);
  --shadow-on-teal-hover: 0 10px 22px -8px rgba(0,0,0,.6);
  --on-primary: #0d1a19; --border-hover: #3d4b4e; --nav-active: #253034;
  --inverse-content: #131a1c; --toast-icon: #247a53;
  --overlay: rgba(0,0,0,.55); --overlay-sidebar: rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ---------- Typographie : UNE échelle (COP-335) ----------
   Toute taille de texte du back-office lit un jeton de cette échelle, jamais un px en dur (TypographyCssTest).
   Chaque jeton = px × --fs-scale (1 par défaut ; la préférence « Taille du texte » du profil le change, COP-336).
   La typographie des listes (cellule, en-tête, pied, lot, badge, sous-ligne, référence) appartient à la base :
   une mise en conformité ne la redéfinit jamais par page. PDF, e-mails, portail résident et inscription : hors échelle. */
:root {
  --fs-scale: 1;
  /* Pas de l'échelle : la taille en px × --fs-scale (12,5 px = --fs-12-5). */
  --fs-9-5: calc(9.5px * var(--fs-scale) * var(--fs-scale-ar)); --fs-10: calc(10px * var(--fs-scale) * var(--fs-scale-ar)); --fs-10-5: calc(10.5px * var(--fs-scale) * var(--fs-scale-ar));
  --fs-11: calc(11px * var(--fs-scale) * var(--fs-scale-ar)); --fs-11-5: calc(11.5px * var(--fs-scale) * var(--fs-scale-ar)); --fs-12: calc(12px * var(--fs-scale) * var(--fs-scale-ar));
  --fs-12-5: calc(12.5px * var(--fs-scale) * var(--fs-scale-ar)); --fs-13: calc(13px * var(--fs-scale) * var(--fs-scale-ar)); --fs-13-5: calc(13.5px * var(--fs-scale) * var(--fs-scale-ar));
  --fs-14: calc(14px * var(--fs-scale) * var(--fs-scale-ar)); --fs-14-5: calc(14.5px * var(--fs-scale) * var(--fs-scale-ar)); --fs-15: calc(15px * var(--fs-scale) * var(--fs-scale-ar));
  --fs-15-5: calc(15.5px * var(--fs-scale) * var(--fs-scale-ar)); --fs-16: calc(16px * var(--fs-scale) * var(--fs-scale-ar)); --fs-16-5: calc(16.5px * var(--fs-scale) * var(--fs-scale-ar));
  --fs-17: calc(17px * var(--fs-scale) * var(--fs-scale-ar)); --fs-18: calc(18px * var(--fs-scale) * var(--fs-scale-ar)); --fs-19: calc(19px * var(--fs-scale) * var(--fs-scale-ar));
  --fs-20: calc(20px * var(--fs-scale) * var(--fs-scale-ar)); --fs-21: calc(21px * var(--fs-scale) * var(--fs-scale-ar)); --fs-22: calc(22px * var(--fs-scale) * var(--fs-scale-ar));
  --fs-23: calc(23px * var(--fs-scale) * var(--fs-scale-ar)); --fs-24: calc(24px * var(--fs-scale) * var(--fs-scale-ar)); --fs-25: calc(25px * var(--fs-scale) * var(--fs-scale-ar));
  --fs-26: calc(26px * var(--fs-scale) * var(--fs-scale-ar)); --fs-27: calc(27px * var(--fs-scale) * var(--fs-scale-ar)); --fs-28: calc(28px * var(--fs-scale) * var(--fs-scale-ar));
  --fs-32: calc(32px * var(--fs-scale) * var(--fs-scale-ar)); --fs-34: calc(34px * var(--fs-scale) * var(--fs-scale-ar));
  /* Rôles : zone de contenu et listes (tableaux, sous-tableaux dépliés). */
  --fs-base:  var(--fs-14);     /* texte de la zone de contenu (.app-content) */
  --fs-title: var(--fs-15);     /* titre de carte */
  --fs-cell:  var(--fs-14);     /* cellule, date, montant, pied de tableau */
  --fs-th:    var(--fs-11-5);   /* en-tête de colonne (majuscules) */
  --fs-sub:   var(--fs-12);     /* sous-ligne */
  --fs-badge: var(--fs-12);     /* badge */
  --fs-tag:   var(--fs-11);     /* étiquette de lot (mono 700, bordée) */
  --fs-ref:   var(--fs-12-5);   /* référence, n° de reçu (mono) */
  --fs-mini:  var(--fs-12-5);   /* sous-tableau déplié (deb-mini, cp-mini) */
  --fs-mini-th: var(--fs-10-5); /* en-tête de sous-tableau */
  --lh-cell:  1.4;
  /* Interligne et espacement des lettres = jetons (COP-340) : l'arabe est une écriture liée, espacement 0 et interligne 1,6 sous [dir=rtl]. */
  --lh-help: 1.55;
  --lh-text: 1.5; --lh-text-s: 1.45; --lh-snug: 1.3; --lh-normal: normal;
  --ls-caps: .05em; --ls-caps-s: .04em; --ls-caps-l: .07em; --ls-caps-xs: .03em; --ls-snug: -.01em; --ls-tight: -.02em;
  --fs-scale-ar: 1;             /* multiplicateur arabe (100 %), combiné à --fs-scale sous [dir=rtl] */
  /* Chiffres clés : QUATRE niveaux, tous en 700, police d'interface + chiffres alignés (COP-337). */
  --fs-kpi-hero: var(--fs-34);  /* UN par page : le chiffre héros (carte de situation de la fiche) */
  --fs-kpi-card: var(--fs-28);  /* solde d'une carte de compte (Trésorerie), décompte de l'AG */
  --fs-kpi:      var(--fs-23);  /* toute bande de chiffres clés */
  --fs-stat:     var(--fs-20);  /* statistique secondaire (journal, rappel, escalade, détail) */
  --fs-kpi-label: var(--fs-12-5); /* libellé (600) */
  --fs-kpi-foot:  var(--fs-12-5); /* pied */
  --fs-kpi-unit:  var(--fs-14);   /* unité « DH », « / 9 » (500, muted) */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--base-200);
  color: var(--base-content);
  font-family: var(--f-ui);
  font-size: var(--fs-15);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono, .num, .tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Montants et dates : police d'interface, chiffres alignés (COP-227). Le mono ne reste qu'aux références et codes. */
.mono { font-family: var(--f-ui); }
.num { font-family: var(--f-ui); }

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

/* ---------- Layout shell ---------- */
.app-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: 268px;
  height: 100vh;
  background: var(--base-100);
  /* Métriques de la maquette menu-login-v1 (COP-306) : interligne normal, filet de fin. */
  border-inline-end: 1px solid var(--base-300);
  line-height: var(--lh-normal);
  display: flex;
  flex-direction: column;
  /* Colonne flex 100vh à 3 zones (COP-111) : marque + sélecteur figés en tête,
     nav défilante au milieu, Configuration épinglée en bas. La sidebar elle-même ne
     défile jamais (les 3 zones se partagent 100vh) ; overflow VISIBLE pour que les
     surfaces flottantes (dropdown copro, popover Configuration, info-bulles rail)
     puissent déborder du rail 64px sans être tronquées. */
  overflow: visible;
  padding: 14px 10px 10px;
  z-index: 30;
  /* Transition douce plein ⇄ rail (COP-112). La largeur anime ; en ≤980px le bloc
     mobile remplace cette transition par celle du transform (tiroir off-canvas). */
  transition: width .22s cubic-bezier(.2,.7,.2,1), padding .22s cubic-bezier(.2,.7,.2,1);
}
/* Zone haute : marque + sélecteur copro, jamais comprimée ni défilante. */
/* Filet fin pleine largeur sous la marque / sélecteur (marges négatives = padding de la sidebar). */
.app-sidebar-top {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px;
  margin: 0 -10px 6px; padding: 0 12px 14px;
  border-bottom: 1px solid var(--base-300);
}
/* Zone basse : Paramètres (et future Configuration), épinglée, toujours visible ; le filet
   court sur toute la largeur de la sidebar (marges négatives = padding de la sidebar). */
.app-sidebar-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 0;
  margin: auto -10px 0;
  border-top: 1px solid var(--base-300);
}
.app-main {
  margin-inline-start: 268px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Suit la largeur du rail (COP-112), synchronisé avec la transition de la sidebar ; côté fin, la colonne
     d'aide non modale (COP-343) réserve sa place. */
  transition: margin-inline-start .22s cubic-bezier(.2,.7,.2,1), margin-inline-end .22s ease;
}
.app-content {
  font-size: var(--fs-base);
  padding: 26px 34px 60px;
  max-width: 1240px;
  width: 100%;
}

/* ---------- Sidebar brand + sélecteur ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--primary);
  display: grid; place-items: center;
  color: var(--on-primary);
  flex: none;
}
.brand-mark svg { width: 17px; height: 17px; }
.brand-text { flex: 1; min-width: 0; }
.brand-name {
  display: block;
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: 1.2;
}
/* Micro-textes INFORMATIFS en --muted (contraste AA) ; --muted-2 (~2.7:1) est
   réservé à l'ornement pur (placeholders, chevrons, pictos secondaires). */
.brand-sub { display: block; font-size: var(--fs-12); color: var(--muted); }

/* Marque = sélecteur de copro dès 2 memberships (COP-92) : la marque elle-même est le bouton,
   même position que la marque figée (marges négatives = padding ajouté pour l'aplat au survol). */
.brand-wrap { position: relative; }
.brand-switch {
  width: calc(100% + 4px);
  margin: -6px -2px;
  padding: 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: background .15s;
}
.brand-switch:hover, .brand-switch[aria-expanded="true"] { background: var(--base-200); }
.brand-chevron { width: 15px; height: 15px; flex: none; color: var(--muted-2); }
.brand-menu { position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 40; }

/* ---------- Navigation ---------- */
/* Seule zone défilante de la sidebar : prend l'espace restant et défile en interne
   (min-height:0 lève la taille-contenu minimale du flex pour autoriser l'overflow). */
.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Hauteur naturelle (COP-309) : sans défilement, la nav ne rétrécit plus sous son contenu —
     sinon elle déborde et passe sous Paramètres épinglé. Le pied suit (margin-top:auto). */
  flex: 0 0 auto;
  /* Pas de défilement (COP-309) : la nav tient dans la hauteur grâce à la densité (cf. media
     queries de hauteur plus bas), jamais d'ascenseur dans le menu. */
  overflow: visible;
}
.nav-label {
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-l);
  color: var(--primary-2);
  background: var(--primary-soft);
  font-weight: 700;
  padding: 5px 10px;
  margin: 18px 0 6px;
  border-radius: 8px;
}
:root[data-theme="dark"] .nav-label { color: var(--primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-label { color: var(--primary); } }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px;
  border-radius: 10px;
  color: var(--base-content);
  font-weight: 500;
  font-size: var(--fs-14);
  text-decoration: none;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.nav-item svg { width: 17px; height: 17px; flex: none; }
.nav-item:hover { background: var(--base-200); }
/* Item actif = aplat crème un cran plus marqué que le survol + texte en gras, sans teal : le teal
   doux est réservé aux titres de section, l'actif ne doit pas s'y confondre (choix du fondateur,
   écart assumé à la maquette menu-login-v1). Seule la barre « vous êtes ici » reste teal. */
.nav-item.active {
  background: var(--nav-active);
  color: var(--base-content);
  font-weight: 700;
}
/* Barre « vous êtes ici » dans la gouttière de la sidebar, hors de l'aplat (inset = -padding). */
.nav-item.active::before {
  content: "";
  position: absolute;
  inset-inline-start: -10px;
  top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 3px;
  /* Teal, PAS terracotta : « vous êtes ici » n'est pas une alerte — la terracotta
     reste réservée aux signaux critiques (badges alerte, pastille), parcimonie oblige. */
  background: var(--primary);
}
/* Bascule rail (COP-112) : un <button> rendu comme un nav-item (reset du chrome natif) ;
   la police seule est héritée — taille et graisse restent celles de .nav-item. */
.rail-toggle { width: 100%; border: 0; background: none; font-family: inherit; line-height: inherit; text-align: start; }
.nav-badge {
  margin-inline-start: auto;
  /* Le badge (20 px) ne grandit pas la ligne : même hauteur avec ou sans compteur. */
  margin-block: -2px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: var(--fs-11-5);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Deux natures de badge (COP-114, refonte COP-309), jetons Medina existants. Compteur teal =
   une file qui attend une action (pastille ronde, plein teal sur l'item actif) ; alerte
   terracotta = un signal critique/temporel, pas un chiffre : disque « ! ». Même gabarit
   (20 px) pour que les deux s'alignent dans la colonne de fin. */
.nav-badge--count { background: var(--primary-soft); color: var(--primary-2); }
[data-theme="dark"] .nav-badge--count { color: var(--primary); }
.nav-item.active .nav-badge--count { background: var(--primary); color: var(--base-100); }
.nav-badge--alert {
  background: var(--accent);
  color: var(--base-100);
  font-size: var(--fs-12);
  padding: 0;
  width: 20px;
}
.nav-badge--alert-count { width: auto; min-width: 20px; padding: 0 6px; box-sizing: border-box; font-weight: 700; }
.dropdown .dropdown-item.active { background: var(--base-200); font-weight: 600; }
.dropdown .dropdown-item.active svg { color: var(--primary); }

/* ---------- Topbar ---------- */
.topbar {
  /* COP-314 : la barre défile avec la page (plus collante), sans trait de séparation. */
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 34px;
  min-height: 66px;
}
/* Fil d'Ariane (COP-314) : accueil › parents cliquables › page courante. */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--muted); min-width: 0; }
.crumbs ol { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.crumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crumbs svg { width: 14px; height: 14px; color: var(--muted-2); flex: none; }
.crumbs .home svg, .crumbs .cur svg { width: 15px; height: 15px; color: inherit; }
.crumbs a {
  display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none;
  border-radius: 7px; padding: 3px 5px; margin: -3px -5px; max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumbs a > span { overflow: hidden; text-overflow: ellipsis; }
.crumbs a:hover { color: var(--base-content); background: var(--base-100); }
.crumbs .cur {
  display: inline-flex; align-items: center; gap: 6px; color: var(--base-content); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px;
}
[dir="rtl"] .crumbs .sep, [dir="rtl"] .crumbs .back svg { transform: scaleX(-1); }
.crumbs .anchor { position: relative; }
.crumb-more {
  border: 0; background: none; color: inherit; font: inherit; font-weight: 700; letter-spacing: var(--ls-caps);
  padding: 2px 7px; border-radius: 7px; cursor: pointer;
}
.crumb-more:hover, .crumb-more[aria-expanded="true"] { background: var(--base-100); color: var(--base-content); }
.crumbs .dropdown { position: absolute; top: calc(100% + 6px); inset-inline-start: -4px; min-width: 200px; z-index: 40; }
.crumbs .back { display: none; align-items: center; gap: 4px; min-width: 0; max-width: 100%; margin: 0; padding: 0;
  color: var(--base-content); font-weight: 600; font-size: var(--fs-13-5); text-decoration: none; }
.crumbs .back > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs .back:hover { background: none; }
.topbar-right { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

.search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 230px;
  padding: 8px 12px;
  background: var(--base-100);
  border: 1px solid var(--base-300);
  border-radius: var(--r-btn);
  color: var(--muted-2);
  transition: border-color .15s, box-shadow .15s, width .2s, background .15s;
  height: 38px; box-sizing: border-box;
}
.search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); width: 290px; }
/* COP-314 : (barre du haut seulement — les filtres rapides de liste restent des champs) réduite à la loupe (même cadre que les autres icônes) ; s'étend au survol, au focus clavier, au
   clic et à Ctrl K (classe .open posée par topbarSearch), reste ouverte tant qu'elle a le focus ou du texte. */
.search-box .search:not(.open) { width: 38px; padding: 0; gap: 0; justify-content: center; color: var(--muted); cursor: pointer; }
.search-box .search:not(.open):hover { background: var(--base-200); color: var(--base-content); }
.search-box .search:not(.open) input { width: 0; padding: 0; }
.search-box .search:not(.open) kbd { display: none; }
/* Ouverte = sa largeur finale d'un coup (hot 2026-10-30) : le focus ne la rallonge plus en un second temps. */
.search-box .search.open { width: 290px; }
.search svg { width: 16px; height: 16px; flex: none; }
.search input {
  border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: var(--fs-13-5); color: var(--base-content); width: 100%;
}
.search input::placeholder { color: var(--muted-2); }
.search kbd {
  font-family: var(--f-mono); font-size: var(--fs-10-5);
  background: var(--base-200); border: 1px solid var(--base-300);
  border-radius: 5px; padding: 1px 5px; color: var(--muted);
  /* Jamais compressé ni replié : « Ctrl K » (espace sécable) wrapperait sur 2 lignes
     et grandirait la topbar. */
  flex: none; white-space: nowrap;
}

/* Recherche personne ⌘K (COP-117) — dropdown de suggestions sous le champ. RTL via inset-inline. */
.search-box { position: relative; }
.search-results-wrap {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0;
  width: 320px; max-width: 80vw; z-index: 50;
}
.search-results {
  background: var(--base-100); border: 1px solid var(--base-300);
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lift);
}
.search-result {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; text-decoration: none; color: var(--base-content);
  border-bottom: 1px solid var(--base-300);
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover, .search-result:focus { background: var(--primary-soft); }
.search-result .sr-nom { font-weight: 600; font-size: var(--fs-13-5); }
.search-result .sr-lots { font-size: var(--fs-11-5); color: var(--muted); }
.search-empty {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--base-100); border: 1px solid var(--base-300);
  border-radius: 10px; box-shadow: var(--shadow-lift);
  padding: 14px; font-size: var(--fs-12-5); color: var(--muted);
}
.search-empty svg { width: 16px; height: 16px; flex: none; }

.icon-btn {
  position: relative;
  width: 38px; height: 38px;
  border-radius: var(--r-btn);
  background: var(--base-100);
  border: 1px solid var(--base-300);
  display: grid; place-items: center;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--base-200); color: var(--base-content); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.wa { color: var(--primary); }
.icon-btn.wa:hover { background: var(--primary-soft); }

/* Popover du hub WhatsApp — calé sur .pop de la maquette inbox-whatsapp-v1 (aucun padding, bordure, coins coupés). */
.wa-pop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 40;
  width: min(340px, calc(100vw - 32px)); padding: 0; overflow: hidden;
  border: 1px solid var(--base-300);
}
.wa-feed-list { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; }
/* Section « Envois en échec » sous l'inbox (COP-160) : une ligne = destinataire, nature · date · cause, « Renvoyer ». */
.wa-out-head { border-top: 1px solid var(--base-300); background: var(--base-200); font-size: var(--fs-12); padding-block: 6px; }
.wa-out-row {
  display: flex; align-items: center; gap: 8px;
  padding-block: 6px; padding-inline: 12px 6px;
  border-bottom: 1px solid var(--base-300); font-size: var(--fs-12-5);
}
.wa-out-row:last-child { border-bottom: 0; }
.wa-out-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.wa-out-meta { font-size: var(--fs-11-5); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 5px; align-items: baseline; }
.wa-out-err { color: var(--accent); }
.wa-renvoyer { flex: none; gap: 5px; }
.wa-renvoyer svg { width: 13px; height: 13px; }
.wa-feed-empty {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 16px 12px; font-size: var(--fs-12-5); color: var(--muted);
}
.wa-feed-empty svg { width: 16px; height: 16px; flex: none; }

.user-chip {
  /* COP-314 : un vrai <button> (clavier, aria-expanded) — on neutralise le style natif. */
  border: 0; background: none; color: inherit; font: inherit; text-align: start;
  display: flex; align-items: center; gap: 10px;
  padding: 5px 9px 5px 6px;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: background .15s;
}
.user-chip:hover { background: var(--base-100); }
.user-meta { line-height: 1.1; }
.user-name { font-weight: 600; font-size: var(--fs-13-5); letter-spacing: var(--ls-snug); }
.user-role { font-size: var(--fs-11); color: var(--muted); }
.user-chip > svg { width: 16px; height: 16px; color: var(--muted-2); }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 600; font-size: var(--fs-13); color: var(--on-primary);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.avatar.sm { width: 28px; height: 28px; font-size: var(--fs-11); }
.avatar.lg { width: 56px; height: 56px; font-size: var(--fs-19); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: var(--fs-13-5);
  padding: 8px 14px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .06s, box-shadow .15s, background .15s, border-color .15s;
  white-space: nowrap;
  text-decoration: none;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(.5px); }
/* Aplat teal, sans ombre portée (rendu des maquettes validées, COP-227). */
.btn-primary {
  background: var(--primary); border-color: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover { background: var(--primary-2); border-color: var(--primary-2); }
.btn-secondary {
  background: var(--base-100);
  border-color: var(--base-300);
  color: var(--base-content);
  box-shadow: var(--shadow-soft);
}
.btn-secondary:hover { background: var(--base-200); border-color: var(--border-hover); }
/* Un .btn sans variante (Importer, Relire…) = le bouton bordé des maquettes, pas un texte nu (COP-227). */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-danger):not(.btn-on-teal) {
  background: var(--base-100); border-color: var(--base-300); color: var(--base-content);
}
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-danger):not(.btn-on-teal):hover { border-color: var(--muted-2); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--base-200); color: var(--base-content); }
.btn-sm { padding: 6px 11px; font-size: var(--fs-12-5); }
.btn-sm svg { width: 15px; height: 15px; }
.btn-block { width: 100%; }
.btn-danger {
  background: var(--base-100); border-color: var(--base-300); color: var(--error);
}
.btn-danger:hover { background: var(--error-soft); border-color: var(--error); }

/* ---------- Cartes ---------- */
.card {
  background: var(--base-100);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}
.card-pad-0 { padding: 0; }
.card-title { font-weight: 600; font-size: var(--fs-title); letter-spacing: var(--ls-snug); }
.card-sub { color: var(--muted); font-size: var(--fs-12-5); margin-top: 2px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}

/* Page title */
.page-title { font-weight: 700; font-size: var(--fs-26); letter-spacing: var(--ls-snug); text-wrap: balance; margin: 0; }
@media (max-width: 640px) { .page-title { font-size: var(--fs-22); } }
.page-sub { color: var(--muted); font-size: var(--fs-13); line-height: var(--lh-text); margin: 4px 0 0; }

/* ---------- KPI ---------- */
.kpi { display: flex; flex-direction: column; gap: 10px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary);
}
.kpi-ico svg { width: 17px; height: 17px; }
.kpi-label { font-size: var(--fs-kpi-label); color: var(--muted); font-weight: 600; }
/* UN composant de chiffre clé (COP-337) : la valeur porte `kpi-value` (niveau bande, --fs-kpi) et, au besoin, UN
   modificateur de niveau (`kpi-hero` / `kpi-card` / `kpi-stat`). Les classes propres aux écrans ne gardent que leur
   mise en page (et la couleur), jamais la taille, la graisse ni la face (TypographyCssTest). */
.kpi-value { font-family: var(--f-ui); font-size: var(--fs-kpi); font-weight: 700; letter-spacing: var(--ls-tight); line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.kpi-value.kpi-hero { font-size: var(--fs-kpi-hero); }
.kpi-value.kpi-card { font-size: var(--fs-kpi-card); }
.kpi-value.kpi-stat { font-size: var(--fs-stat); }
.kpi-value .unit, .kpi-value small { font-size: var(--fs-kpi-unit); color: var(--muted); font-weight: 500; letter-spacing: normal;
  margin-inline-start: 3px; }
.kpi-foot { font-size: var(--fs-kpi-foot); color: var(--muted); display: flex; align-items: center; gap: 6px; }
/* Repli sur carte étroite = UNE règle : chaque carte de chiffre clé est un conteneur ; trop étroite (seuil en em, il
   suit --fs-scale), la valeur descend d'UN niveau (carte → bande, bande → statistique), pour qu'une bande de quatre
   tienne à 390 px comme à 1440 px. */
.kpi, .ins-kpi, .ag-stat, .cp-acct { container: kpi / inline-size; }
@container kpi (max-width: 13em) {
  .kpi-value { font-size: var(--fs-stat); }
  .kpi-value.kpi-card { font-size: var(--fs-kpi); }
}

.delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-12); font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  font-family: var(--f-mono);
}
.delta svg { width: 12px; height: 12px; }
.delta-up   { background: var(--success-soft); color: var(--success); }
.delta-down { background: var(--error-soft); color: var(--error); }

/* ---------- Chantiers (COP-242) ---------- */
.chantier-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

/* Progression sur 5 étapes (liste) : cinq barres, remplies jusqu'à l'étape courante. */
.dots5 { display: flex; gap: 3px; max-width: 200px; }
.dots5 i { flex: 1; height: 5px; border-radius: 99px; background: var(--base-300); }
.dots5 i.on { background: var(--primary); }

/* Frise d'état (fiche) : cinq étapes, faites / courante / à venir. */
.steps5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.steps5 .s5 { border-top: 4px solid var(--base-300); padding-top: 7px; font-size: var(--fs-12); color: var(--muted); font-weight: 600; line-height: var(--lh-snug); }
.steps5 .s5.done { border-color: var(--success); color: var(--base-content); }
.steps5 .s5.cur { border-color: var(--primary); color: var(--primary); }
@media (max-width: 700px) { .steps5 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } }

/* Faits de la fiche : grille de couples libellé / valeur. */
.chantier-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 20px; }
.chantier-fact-k { font-size: var(--fs-11-5); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); font-weight: 600; margin-bottom: 3px; }

/* Budget (COP-245) : barre dépensé / budget, rouge au dépassement (calculée, jamais stockée). */
.budget { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.budget .track { height: 8px; border-radius: 99px; background: var(--base-200); overflow: hidden; border: 1px solid var(--base-300); }
.budget .fill { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.budget .fill.over { background: var(--error); }
.budget .t { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-12-5); flex-wrap: wrap; }

/* Liste de dépenses à lier (tiroir « Lier ») : une case par dépense non rattachée. */
.pick { display: flex; flex-direction: column; gap: 8px; }
.pick .check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--base-300); border-radius: 10px; background: var(--base-100); cursor: pointer; }
.pick .check:hover { background: var(--base-200); }

/* Journal : frise verticale de lignes datées (ajout seul). */
.chantier-journal { display: flex; flex-direction: column; }
.chantier-journal-ligne { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--base-300); align-items: start; }
.chantier-journal-ligne:last-child { border-bottom: none; }
.chantier-journal-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--base-200); color: var(--muted); }
.chantier-journal-ico.humaine { background: var(--primary-soft); color: var(--primary); }
.chantier-journal-ico svg { width: 15px; height: 15px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-badge); font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning-content); }
.badge-error   { background: var(--error-soft); color: var(--error); }
.badge-neutral { background: var(--base-200); color: var(--muted); }
.badge-info    { background: var(--primary-soft); color: var(--primary); }
.badge-alert   { background: var(--accent-soft); color: var(--accent); }
/* Badge cliquable (ex. « Avis » d'une ligne d'appel, COP-273) : même gabarit qu'un badge, jamais un bouton de ligne. */
a.badge { text-decoration: none; cursor: pointer; }
a.badge:hover { background: var(--base-300); }
.badge-mre {
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }

/* ---------- Tableaux ---------- */
.table-medina { width: 100%; border-collapse: collapse; }
.table-medina thead th {
  text-align: start;
  font-size: var(--fs-th); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--base-300);
  white-space: nowrap;
}
/* un en-tête de colonne de montant s'aligne à droite mais reste dans la police d'interface */
.table-medina thead th.num { font-family: inherit; }
.table-medina tbody tr {
  transition: background .12s;
}
.table-medina tbody tr:hover { background: var(--base-200); }
.table-medina tbody td {
  padding: 10px 12px;
  border-top: 1px solid var(--base-300);
  vertical-align: middle;
  font-size: var(--fs-cell);
  line-height: var(--lh-cell);
}
.table-medina tbody tr:first-child td { border-top: 0; }
/* Pied = taille des cellules, gras, sur fond (COP-335 : fin des 13 px de list-pattern.css). */
.table-medina tfoot td { font-size: var(--fs-cell); line-height: var(--lh-cell); font-weight: 700; padding: 10px 12px; vertical-align: middle; }
.table-medina th .th-arr { font-size: var(--fs-10); letter-spacing: 0; }
.row-name { font-weight: 600; letter-spacing: var(--ls-snug); }
.row-sub { font-size: var(--fs-sub); color: var(--muted); }
/* Référence, n° de reçu, code : mono à --fs-ref (les montants et les dates restent en police d'interface). */
.ref, .table-medina tbody td.ref { font-family: var(--f-mono); font-size: var(--fs-ref); font-variant-numeric: tabular-nums; }
/* Tailles de la base pour un texte secondaire hors .row-sub (cellules d'import, notes) : jamais un font-size en ligne. */
.t-sub, .table-medina tbody td.t-sub { font-size: var(--fs-sub); }
.t-ref, .table-medina tbody td.t-ref { font-size: var(--fs-ref); }
.t-tag { font-size: var(--fs-tag); }
.lot-tag {
  font-family: var(--f-mono); font-size: var(--fs-tag); font-weight: 700;
  background: var(--base-200); color: var(--base-content); border: 1px solid var(--base-300);
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
}

/* ---------- Prescription ---------- */
.presc { display: flex; flex-direction: column; gap: 4px; }
.presc-date { font-family: var(--f-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-12-5); font-weight: 400; }

/* ---------- Filtres / segmented ---------- */
/* Segment = changer de VUE, jamais un filtre (COP-338) : un seul style, fond gris, l'actif en blanc. Un filtre = une
   pastille (.lp-chip, list-pattern.css). */
.seg { display: inline-flex; background: var(--base-200); border: 1px solid var(--base-300); border-radius: var(--r-btn); padding: 3px; gap: 2px; }
.seg button, .seg a, .seg > label {
  font-family: inherit; font-size: var(--fs-12-5); font-weight: 500;
  padding: 5px 11px; border: 0; background: transparent; color: var(--muted);
  border-radius: 8px; cursor: pointer; transition: background .14s, color .14s;
  text-decoration: none;
}
.seg button:hover, .seg a:hover, .seg > label:hover { color: var(--base-content); }
/* segment d'un formulaire GET serveur = <label><input type="radio" …> : radio invisible, focalisable au clavier. */
.seg > label { position: relative; display: inline-flex; align-items: center; }
.seg > label > input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.seg > label:has(> input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }
.seg button.active, .seg a.active, .seg [aria-pressed="true"], .seg [aria-current="page"], .seg > label:has(> input:checked) { background: var(--base-100); color: var(--base-content); font-weight: 600; box-shadow: var(--shadow-soft); }

/* ---------- Prochaine action ---------- */
.next-action {
  position: relative;
  border-radius: var(--r-card);
  padding: 22px 24px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--on-primary) 16%, transparent), transparent 55%),
    linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  color: var(--on-primary);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.next-action .na-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-11-5); font-weight: 600; letter-spacing: var(--ls-caps-xs); text-transform: uppercase;
  background: color-mix(in srgb, var(--on-primary) 16%, transparent); padding: 4px 10px; border-radius: 999px;
}
.next-action .na-tag svg { width: 13px; height: 13px; }
.next-action h3 { font-size: var(--fs-21); font-weight: 600; letter-spacing: var(--ls-tight); margin: 14px 0 6px; }
.next-action p { color: color-mix(in srgb, var(--on-primary) 80%, transparent); font-size: var(--fs-13-5); max-width: 52ch; margin: 0; }
.btn-on-teal {
  background: var(--on-primary); color: var(--primary-2);
  box-shadow: var(--shadow-on-teal);
}
.btn-on-teal:hover { background: var(--on-primary); box-shadow: var(--shadow-on-teal-hover); }

/* ---------- Graphe en barres CSS ---------- */
.chart { display: flex; align-items: flex-end; gap: 18px; height: 180px; padding-top: 8px; }

/* ---------- Activité / listes ---------- */
.feed { display: flex; flex-direction: column; }

/* ---------- Onglets (fiche) ---------- */
.tabs { display: flex; gap: 4px; }
.tab {
  font-family: inherit; font-size: var(--fs-14); font-weight: 600; color: var(--muted);
  padding: 10px 14px;
  border: 0; background: transparent; cursor: pointer; position: relative;
  transition: color .14s;
}
.tab:hover { color: var(--base-content); }
/* Onglet actif : teal gras souligné teal (rendu des maquettes, COP-227). */
.tab.active { color: var(--primary); }
.tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--primary);
}
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--base-300); margin-bottom: 16px; }

/* ---------- Timeline relances ---------- */
.timeline { position: relative; padding-inline-start: 26px; }
.timeline::before {
  content: ""; position: absolute; inset-inline-start: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--base-300);
}

/* ---------- Paliers de relance ---------- */
.palier {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 16px; border-radius: var(--r-btn);
  border: 1px solid var(--base-300); background: var(--base-100);
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.palier:hover { border-color: var(--primary); background: var(--primary-soft); }
.palier.is-current { border-color: var(--accent); background: var(--accent-soft); }
.palier-step {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-13);
  font-family: var(--f-mono);
  background: var(--base-200); color: var(--muted);
}
.palier.is-current .palier-step { background: var(--accent); color: var(--on-primary); }

/* ---------- Modale ---------- */
/* Pile : tiroir 50/51 < modale lancée depuis un tiroir (confirmation Medina, `.overlay-top`) 55. */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 24px;
}
.overlay.overlay-top { z-index: 55; }
.modal {
  width: 100%; max-width: 520px;
  background: var(--base-100);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.modal.wide { max-width: 600px; }
/* A document shown in a modal (PDF / image preview: justificatif, preuve, inbox piece, avis à afficher — COP-385). */
.modal.doc { max-width: 860px; }
.modal-doc-frame { width: 100%; height: 70vh; border: 0; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 0; }
.modal-title { font-weight: 600; font-size: var(--fs-18); letter-spacing: var(--ls-tight); }
/* Hot 2026-10-29 — a reference beside a modal title (PV-nnnnnn) reads at the title size, not the cell one. */
.modal-title .ref { font-size: inherit; font-weight: 500; letter-spacing: 0; margin-inline-start: 6px; }
.modal-body { padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { padding: 16px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; }
.modal-close {
  width: 32px; height: 32px; border-radius: 9px; border: 0; cursor: pointer;
  background: var(--base-200); color: var(--muted); display: grid; place-items: center;
}
.modal-close:hover { background: var(--base-300); }
.modal-close svg { width: 16px; height: 16px; }

/* Champs de formulaire */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-12-5); font-weight: 600; color: var(--muted); }
.input, .select {
  font-family: inherit; font-size: var(--fs-14); color: var(--base-content);
  padding: 10px 12px; border: 1px solid var(--base-300); border-radius: var(--r-btn);
  background: var(--base-100); outline: 0; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input.mono { font-family: var(--f-mono); font-weight: 600; }

/* Bloc IA pré-rempli */
.ai-prefill {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border-radius: var(--r-btn);
  background: var(--primary-soft);
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, transparent);
}
.ai-prefill svg { width: 16px; height: 16px; color: var(--primary); flex: none; margin-top: 1px; }
.ai-prefill .ai-txt { font-size: var(--fs-12-5); color: var(--primary-2); }
.ai-prefill .ai-txt b { font-weight: 600; }

/* Preuve à valider */
.proof {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 14px; border: 1px solid var(--base-300); border-radius: var(--r-btn);
  background: var(--base-100);
}
.proof-thumb {
  position: relative;
  width: 52px; height: 52px; border-radius: 9px; flex: none;
  background: var(--base-200); color: var(--muted-2);
  border: 1px solid var(--base-300);
  display: grid; place-items: center;
}
a.proof-thumb:hover { border-color: var(--primary); }
/* Loupe : la vignette ouvre la pièce en grand. */
.proof-zoom {
  position: absolute; inset-block-end: 2px; inset-inline-end: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--base-100); color: var(--base-content); border: 1px solid var(--base-300);
}
.proof-zoom svg { width: 11px; height: 11px; }
.proof-thumb svg { width: 18px; height: 18px; }
.proof-thumb { overflow: hidden; }
.proof-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof-main { flex: 1; min-width: 0; }
.proof-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Actions de la ligne : en haut, à l'extrémité de fin (droite en FR, gauche en AR). */
.proof-actions { display: flex; align-items: center; gap: 8px; flex: none; align-self: flex-start; margin-inline-start: auto; }
/* Champs étiquetés du brouillon : légende (lu / saisi), puis étiquette au-dessus de la valeur. */
.proof-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; margin-top: 8px; }
.pf-cap { flex-basis: 100%; font-size: var(--fs-tag); font-weight: 700; color: var(--muted); }
.pf { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-l { font-size: var(--fs-sub); color: var(--muted); }
.pf-v { font-size: var(--fs-cell); color: var(--base-content); overflow-wrap: anywhere; }
.pf-miss { color: var(--warning-content); font-style: italic; }
/* Ligne de file = rôles de l'échelle (COP-335) : payeur et montant = cellule, le reste = sous-ligne. */
.proof-name { font-weight: 600; font-size: var(--fs-cell); }
.proof-meta { font-size: var(--fs-sub); color: var(--muted); margin-top: 3px; }
.proof-amt { font-weight: 700; font-size: var(--fs-cell); color: var(--base-content); }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; inset-block-end: 26px; inset-inline-end: 26px; z-index: 60; }
.toast {
  display: flex; align-items: center; gap: 11px;
  background: var(--base-content); color: var(--inverse-content);
  padding: 13px 18px; border-radius: var(--r-btn);
  box-shadow: var(--shadow-lift); font-size: var(--fs-14); font-weight: 500;
}
.toast svg { width: 18px; height: 18px; color: var(--toast-icon); }
/* COP-128 — inline action link inside a toast (« … — Reçu n° X · Imprimer ») */
.toast-action {
  color: var(--inverse-content); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; white-space: nowrap;
}
.toast-action::before { content: '·'; margin-inline-end: 8px; text-decoration: none; display: inline-block; }
.toast-action:hover { opacity: .85; }
/* ---------- Sélecteur de fichier (2026-10-21, fragments/fichier :: depot + assets/fichier.js) ----------
   L'input natif est posé transparent sur la zone (clic et glisser-déposer natifs) ; une fois le fichier choisi il
   ne capte plus les clics (la croix « retirer » reste cliquable). */
.fd { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 92px; padding: 14px 16px; border: 1.5px dashed var(--base-300); border-radius: var(--r-card);
  background: var(--base-200); text-align: center; transition: border-color .12s, background .12s; }
.fd:hover, .fd.fd-survol, .fd:focus-within { border-color: var(--primary); background: var(--primary-soft); }
.fd-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.fd.fd-plein { border-style: solid; background: var(--base-100); align-items: stretch; }
.fd.fd-plein .fd-input { pointer-events: none; }
.fd-vide { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); }
.fd-vide svg { width: 22px; height: 22px; color: var(--primary); }
.fd-texte { font-size: var(--fs-cell); color: var(--base-content); }
.fd-lien { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.fd-aide { font-size: var(--fs-sub); color: var(--muted); }
.fd-choisi { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: start; }
.fd-choisi > svg { width: 22px; height: 22px; flex: none; color: var(--primary); }
.fd-vignette { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 8px; border: 1px solid var(--base-300); }
.fd-nom { flex: 1; min-width: 0; font-size: var(--fs-cell); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-taille { flex: none; font-size: var(--fs-sub); color: var(--muted); font-variant-numeric: tabular-nums; }
.fd-retirer { position: relative; z-index: 2; flex: none; display: inline-flex; padding: 4px; border: none; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer; }
.fd-retirer:hover, .fd-retirer:focus-visible { background: var(--base-200); color: var(--base-content); }
.fd-retirer svg { width: 16px; height: 16px; }
.fd-photo { position: relative; z-index: 2; }
.fd-erreur { margin: 0; font-size: var(--fs-sub); color: var(--error); font-weight: 600; }
/* Une ligne dans une liste (documents de la copro, PV signé). */
.fd.fd-compact { flex-direction: row; min-height: 0; padding: 8px 12px; flex: 1 1 260px; }
.fd.fd-compact .fd-vide { flex-direction: row; gap: 8px; }
.fd.fd-compact .fd-vide svg { width: 18px; height: 18px; }
.fd.fd-compact .fd-choisi { flex: 1; }

/* 2026-10-21 — un refus : même place, couleur d'alerte, reste jusqu'à fermeture (croix). Lisible en clair et en sombre. */
.toast { max-width: min(460px, calc(100vw - 52px)); }
.toast.toast-error { background: var(--error-soft); color: var(--base-content); border: 1px solid var(--error); align-items: flex-start; }
.toast.toast-error svg { color: var(--error); flex: none; margin-top: 1px; }
.toast-close { flex: none; display: inline-flex; background: none; border: none; padding: 2px; margin-inline-start: 4px; border-radius: 6px; color: inherit; cursor: pointer; }
.toast-close:hover, .toast-close:focus-visible { background: var(--base-300); }
.toast.toast-error .toast-close svg { width: 16px; height: 16px; color: var(--base-content); margin-top: 0; }

/* ---------- Dropdown ---------- */
.dropdown {
  background: var(--base-100);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  padding: 7px;
  min-width: 200px;
}
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 9px; font-size: var(--fs-13-5); color: var(--base-content);
  cursor: pointer; text-decoration: none;
}
.dropdown-item:hover { background: var(--base-200); }
button.dropdown-item { width: 100%; border: 0; background: none; font: inherit; font-size: var(--fs-13-5); text-align: start; }
button.dropdown-item:hover { background: var(--base-200); }
.dropdown-item svg { width: 16px; height: 16px; color: var(--muted); }
.dropdown-sep { height: 1px; background: var(--base-300); margin: 6px 4px; }
/* Choix du thème (COP-232) : Clair · Sombre · Système, dans le menu profil. */
.theme-choice {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px; font-size: var(--fs-13-5); color: var(--base-content);
}
.theme-choice > svg { width: 16px; height: 16px; color: var(--muted); }
.theme-seg {
  display: inline-flex; margin-inline-start: auto;
  border: 1px solid var(--base-300); border-radius: 8px; overflow: hidden;
}
.theme-seg button {
  border: 0; background: none; font: inherit; font-size: var(--fs-12); font-weight: 500;
  padding: 4px 8px; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.theme-seg a {
  font-size: var(--fs-12); font-weight: 500; padding: 4px 8px; color: var(--muted); text-decoration: none; white-space: nowrap;
}
.theme-seg a + a { border-inline-start: 1px solid var(--base-300); }
.theme-seg a:hover { background: var(--base-200); color: var(--base-content); }
.theme-seg a.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.theme-seg button + button { border-inline-start: 1px solid var(--base-300); }
.theme-seg button:hover { background: var(--base-200); color: var(--base-content); }
.theme-seg button[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
/* Taille du texte (COP-336) : un « A » à la taille qu'il choisit, aligné sur la ligne de base. */
.ts-seg button { display: inline-flex; align-items: baseline; justify-content: center; gap: 6px; min-width: 30px; line-height: 1; padding: 5px 8px; }
.ts-seg .ts-s { font-size: var(--fs-11); font-weight: 600; }
.ts-seg .ts-m { font-size: var(--fs-13-5); font-weight: 600; }
.ts-seg .ts-l { font-size: var(--fs-16-5); font-weight: 600; }
.ts-seg.ts-wide { margin-inline-start: 0; }
.ts-seg.ts-wide button { padding: 7px 14px; font-size: var(--fs-13); }

/* ---------- Divers ---------- */
/* Bande de 3 chiffres clés (COP-300, commune depuis E42 : Dépenses, appel de fonds) — cartes .kpi, lien a.cp-kpi facultatif. */
.cp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .cp-kpis { grid-template-columns: minmax(0, 1fr); } }
.cp-kpis .kpi { padding: 16px; gap: 8px; min-width: 0; }
.cp-kpis a.cp-kpi { color: inherit; text-decoration: none; }
.cp-kpis a.cp-kpi:hover, .cp-kpis a.cp-kpi:focus-visible { border-color: var(--primary); }
.cp-kpis .kpi.alert .kpi-value { color: var(--accent); }
.cp-kpis .kpi-label svg { width: 14px; height: 14px; vertical-align: -2px; margin-inline-end: 4px; }
.cp-kpis .kpi-foot { line-height: var(--lh-text-s); }

[x-cloak] { display: none !important; }

/* ============================================================
   Couche d'INTERACTION (revue UX) — drawer, file de validation,
   états (vide / chargement / erreur), autocomplétion.
   Tokens Medina uniquement, aucune couleur / police nouvelle.
   Logique inline (inset-inline / margin-inline) => RTL-ready.
   ============================================================ */

/* ---------- Drawer (saisie : jamais en demi-page) ---------- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 51;
  width: 430px; max-width: 92vw;
  background: var(--base-100);
  box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
/* Tiroir plein écran sur mobile : une bande étroite à droite n'a pas de sens. */
@media (max-width: 560px) { .drawer { width: 100%; max-width: 100%; } }
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.open { transform: translateX(0); }
/* Panneau de la pièce, voisin du tiroir de correction : collé à son bord (largeur du tiroir = 430px). */
.drawer-pj {
  position: fixed; inset-block: 0; inset-inline-end: 430px; z-index: 51;
  width: min(640px, calc(100vw - 430px - 16px));
  background: var(--base-100); border-inline-end: 1px solid var(--base-300);
  box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column;
}
/* « Voir la pièce jointe » (tête du formulaire du tiroir) : pleine largeur, teinté primaire ; plein quand le panneau est ouvert. */
.btn-pj { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); flex: none; }
.btn-pj:hover { background: var(--primary-soft); border-color: var(--primary-2); }
.btn-pj[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.drawer-pj-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--base-300);
}
.drawer-pj-title { font-weight: 600; font-size: var(--fs-title); display: flex; align-items: baseline; gap: 8px; }
.drawer-pj-body { flex: 1; min-height: 0; overflow: auto; padding: 16px; background: var(--base-200); display: flex; justify-content: center; align-items: flex-start; }
.drawer-pj-img { max-width: 100%; height: auto; border: 1px solid var(--base-300); border-radius: 9px; background: var(--base-100); }
.drawer-pj-frame { width: 100%; height: 100%; min-height: 70vh; border: 0; background: var(--base-100); }
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 22px 24px 16px; border-bottom: 1px solid var(--base-300);
}
.drawer-title { font-weight: 600; font-size: var(--fs-18); letter-spacing: var(--ls-tight); }
.drawer-sub { font-size: var(--fs-13); color: var(--muted); margin-top: 3px; }
.drawer-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 15px; overflow: auto; flex: 1; }
/* Pied = barre d'action figée (le corps défile au-dessus) : légère élévation pour
   qu'il se lise comme une barre, pas comme la suite du formulaire. */
.drawer-foot {
  padding: 16px 24px; display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--base-300); background: var(--base-100);
  box-shadow: var(--shadow-foot);
}
/* ---------- File de validation (étend .proof) ---------- */
.queue-count {
  font-family: var(--f-mono); font-weight: 700; font-size: var(--fs-13);
  background: var(--accent); color: var(--on-primary); border-radius: 999px; padding: 1px 9px;
}
.queue { display: flex; flex-direction: column; gap: 10px; }
/* Brouillon non attribué (COP-54) : teinte d'alerte douce — l'argent n'est pas validable tel quel. */
.proof.tofix-row { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.proof-thumb.tofix { background: var(--warning-soft); color: var(--warning-content); }
.proof-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--base-300); border-top-color: var(--primary);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- États vide ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 13px; padding: 48px 24px;
}
.empty-ico {
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary);
}
.empty-ico svg { width: 26px; height: 26px; }
.empty-ico.sane { background: var(--success-soft); color: var(--success); }
.empty-title { font-weight: 600; font-size: var(--fs-16-5); letter-spacing: var(--ls-snug); }
.empty-text { font-size: var(--fs-13-5); color: var(--muted); max-width: 44ch; }

/* ---------- Chargement (indicateur HTMX) ---------- */
/* htmx ajoute .htmx-request sur l'élément en vol : on bascule le spinner. */
.hx-spin { display: none; }
.htmx-request .hx-spin { display: inline-grid; }
.htmx-request .hx-idle { display: none; }
.proof.htmx-request { opacity: .6; }

/* COP-77 — bouton occupé pour une soumission NON-HTMX (socle data-loading, app.js) :
   label masqué, anneau dans la couleur du bouton (marche sur primaire ET secondaire). */
.btn.is-loading { position: relative; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; top: calc(50% - 8px); left: calc(50% - 8px);
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; opacity: .65;
  animation: spin .7s linear infinite;
}

/* ---------- Erreur inline (champ) + bandeau ---------- */
.field-error { font-size: var(--fs-12); color: var(--error); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.field-error svg { width: 13px; height: 13px; }
.input.has-error, .select.has-error { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-soft); }
.banner-error {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border-radius: var(--r-btn);
  background: var(--error-soft); color: var(--error); font-size: var(--fs-13-5);
  border: 1px solid color-mix(in srgb, var(--error) 25%, transparent);
}
.banner-error svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.banner-success {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border-radius: var(--r-btn);
  background: var(--success-soft); color: var(--success); font-size: var(--fs-13-5);
  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
}
.banner-success svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.banner-info {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border-radius: var(--r-btn);
  background: var(--primary-soft); color: var(--primary); font-size: var(--fs-13-5);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.banner-info svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }

/* « Rôles & accès » (COP-119) : lignes du catalogue de rôles, lecture seule. */
.role-row { padding: 11px; border-radius: var(--r-btn); border: 1px solid var(--base-300); }
.role-row.role-current { border-color: var(--success); background: var(--success-soft); }
.role-ico {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--base-200); color: var(--muted);
}
.role-ico svg { width: 17px; height: 17px; }
.role-row.role-current .role-ico { background: var(--base-100); color: var(--success); }

/* ---------- Autocomplétion payeur (> ~15 lots => recherche) ---------- */
.ac { position: relative; }
.ac-menu {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 8;
  background: var(--base-100); border: 1px solid var(--base-300);
  border-radius: var(--r-btn); box-shadow: var(--shadow-lift);
  padding: 6px; max-height: 248px; overflow: auto;
}
.ac-opt { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.ac-opt:hover, .ac-opt.active { background: var(--base-200); }
.ac-opt .lot-tag { margin-inline-start: auto; }
.ac-empty { padding: 12px 10px; font-size: var(--fs-13); color: var(--muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .proof-spin { animation-duration: .001ms; }
  .drawer { transition-duration: .001ms; }
}

/* ---------- RTL ---------- */
/* Arabic = Cairo alone (Arabic, Latin and digits), the face of the syndic's own documents. Mono stays JetBrains Mono through --f-mono in both languages (COP-340). */
[dir="rtl"] {
  --f-ui: "Cairo", system-ui, sans-serif;
  --ls-caps: 0; --ls-caps-s: 0; --ls-caps-l: 0; --ls-caps-xs: 0; --ls-snug: 0; --ls-tight: 0;
  --lh-cell: 1.6; --lh-text: 1.6; --lh-text-s: 1.6; --lh-snug: 1.5; --lh-normal: 1.6; --lh-help: 1.7;
  --fs-scale-ar: 1;
}
.iso { unicode-bidi: isolate; direction: ltr; display: inline-block; }
/* Charts are drawn left to right (months, axes): an inherited RTL would flip text-anchor and put « % » before the number. */
[dir="rtl"] .ov-chart svg { direction: ltr; }
[dir="rtl"] .agelegend .p, [dir="rtl"] .ov-dleg .p { direction: ltr; unicode-bidi: isolate; display: inline-block; }
[dir="rtl"] .num, [dir="rtl"] .mono, [dir="rtl"] .tnum, [dir="rtl"] .kpi-value, [dir="rtl"] .presc-date { direction: ltr; unicode-bidi: embed; }

/* Transitions Alpine */
[x-transition] { will-change: opacity, transform; }


/* ============================================================
   AJOUTS V2 — menu mobile (tiroir + overlay) & accessibilité
   (design desktop inchangé : ne s'active qu'en <= 980px)
   ============================================================ */
.menu-toggle { display: none; }
.sidebar-overlay { display: none; }

/* ------------------------------------------------------------
   COP-112 — Mode rail (desktop) : plein ⇄ icônes seules.
   Concept purement desktop (≥981px) ; en ≤980px la sidebar est
   un tiroir off-canvas plein écran, jamais un rail. Une seule
   classe `.rail` sur l'<aside> pilote tout (état propre pour les
   badges en rail de COP-114). RTL-ready via propriétés logiques.
   ------------------------------------------------------------ */
@media (min-width: 981px) {
  .app-sidebar.rail { width: 68px; padding-inline: 10px; }
  /* La surface principale suit le rail (l'<aside> est un frère fixe). */
  body:has(.app-sidebar.rail) .app-main { margin-inline-start: 68px; }

  /* Marque : pastille conservée, texte masqué. */
  .app-sidebar.rail .brand { justify-content: center; padding-inline: 0; }
  .app-sidebar.rail .brand-text,
  .app-sidebar.rail .brand-chevron { display: none; }

  /* Sélecteur copro (la marque) : pastille seule, la liste s'ouvre à côté du rail — logique
     0/1/≥2 (COP-92) intacte. */
  .app-sidebar.rail .brand-menu { inset-inline-end: auto; width: 240px; }

  /* Items : centrés sur l'icône ; le libellé devient une info-bulle au survol
     (réutilise le <span> existant, déjà i18n — aucune lib, CSS pur). */
  .app-sidebar.rail .nav-item { justify-content: center; padding-inline: 0; }
  .app-sidebar.rail .nav-item > span:not(.nav-badge) {
    position: absolute;
    inset-inline-start: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: var(--base-content);
    color: var(--base-100);
    padding: 5px 9px;
    border-radius: 8px;
    font-size: var(--fs-12-5);
    font-weight: 500;
    box-shadow: var(--shadow-tip);
    opacity: 0;
    pointer-events: none;
    z-index: 50;
    transition: opacity .12s;
  }
  .app-sidebar.rail .nav-item:hover > span:not(.nav-badge) { opacity: 1; }

  /* En rail (≤64px), le badge perd son texte et devient un POINT coloré posé sur le coin
     de l'icône — lisible à 64px, sans chiffre (COP-114). Compteur → point teal, alerte →
     point terracotta. Le <span> reste positionné côté fin de ligne via propriété logique
     (inset-inline-end), donc correct en RTL. Halo couleur sidebar pour détacher de l'icône. */
  /* Rail (choix du fondateur, comme la maquette menu-login-v1) : aucun compteur ; seule l'alerte
     terracotta reste, en point au coin de l'icône. min-width: 0 = le gabarit 20 px du badge plein
     ne doit pas survivre (il recouvrait l'icône). */
  .app-sidebar.rail .nav-badge--count { display: none; }
  .app-sidebar.rail .nav-badge {
    position: absolute;
    inset-inline-end: 10px;
    top: 5px;
    margin: 0;
    padding: 0;
    width: 8px;
    min-width: 0;
    height: 8px;
    border-radius: 999px;
    font-size: 0;          /* masque le chiffre / le pictogramme */
    line-height: 0;
    border: 2px solid var(--base-100);
    box-sizing: content-box;
  }
  .app-sidebar.rail .nav-badge--alert { background: var(--accent); }

  /* En-tête de section → simple séparateur (texte masqué, filet horizontal). */
  .app-sidebar.rail .nav-label {
    font-size: 0;
    line-height: 0;
    padding: 0;
    height: 0;
    margin: 10px 8px 4px;
    border-top: 1px solid var(--base-300);
  }

  /* En rail, la nav ne défile pas (contenu icônes seules ≈ 500px, tient partout) :
     overflow visible pour que les info-bulles flottantes (calc(100% + 10px)) ne soient
     pas tronquées par le conteneur de défilement. */
  .app-sidebar.rail .nav { overflow: visible; }

  /* Bouton bascule : pictogramme inversé en rail (« déployer »). */
  .app-sidebar.rail .rail-toggle svg { transform: rotate(180deg); }

  /* Groupe Configuration en rail (COP-113) : icônes seules ; le chevron de pli n'a plus de
     sens (le libellé devient l'info-bulle au survol comme tout nav-item). */
}

@media (max-width: 980px) {
  .menu-toggle { display: grid; }
  /* En tiroir mobile, le rail n'a pas de sens : largeur pleine, contenu complet. */
  .rail-toggle { display: none; }
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
    box-shadow: var(--shadow-edge);
  }
  [dir="rtl"] .app-sidebar { transform: translateX(100%); }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { margin-inline-start: 0; }
  .app-content { padding: 20px 18px 56px; }
  .sidebar-overlay {
    display: block; position: fixed; inset: 0; z-index: 25;
    background: var(--overlay-sidebar); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  }
  /* Mobile (COP-314) : le fil devient « ‹ Parent » ; la recherche reste une loupe qui, ouverte, prend toute
     la largeur et masque le reste (le geste « un propriétaire est devant moi » reste à un clic). */
  .crumbs { flex: 1; }
  .crumbs ol { display: none; }
  .crumbs .back { display: inline-flex; }
  .topbar { padding: 12px 14px; gap: 10px; }
  .topbar-right { margin-inline-start: 0; gap: 6px; }
  .topbar:has(.search.open) .crumbs, .topbar:has(.search.open) .topbar-right > :not(.search-box) { display: none; }
  .topbar:has(.search.open) .topbar-right { flex: 1; min-width: 0; }
  .topbar:has(.search.open) .search-box { flex: 1; min-width: 0; }
  .search-box .search.open, .search.open:focus-within { width: 100%; }
  .search kbd { display: none; }
  .user-meta { display: none; }
  .user-chip > svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   COP-84 — « même personne ? » : autocomplétion de reconnaissance + badge de lien
   sur le champ « Propriétaire » (drawer de mutation). Aucune couleur/police hors
   socle Medina ; RTL-ready (logical properties). La proposition n'apparaît QUE
   quand un nom connu est reconnu — sinon ces blocs restent vides/cachés.
--------------------------------------------------------------------------- */
.match-list {
  margin-top: 6px; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--surface);
}
.match-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border: 0; background: transparent; cursor: pointer;
  text-align: start; font: inherit; border-bottom: 1px solid var(--border);
}
.match-row:last-child { border-bottom: 0; }
.match-row:hover { background: var(--primary-soft); }
.match-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--primary-soft); color: var(--primary);
}
.match-ico svg { width: 15px; height: 15px; }
.match-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.match-nom { font-weight: 600; font-size: var(--fs-13-5); }
.match-hint { font-size: var(--fs-11-5); color: var(--muted); }
.match-cta {
  font-size: var(--fs-11-5); font-weight: 600; color: var(--primary); flex: none;
  white-space: nowrap;
}
.link-badge {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 10px;
  background: var(--primary-soft); color: var(--primary);
}
.link-badge svg { width: 15px; height: 15px; flex: none; }
.link-badge-text { flex: 1; font-size: var(--fs-12-5); color: var(--text); min-width: 0; }
.link-badge-undo {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--fs-11-5); font-weight: 600; color: var(--primary);
  text-decoration: underline; flex: none;
}

/* ---------- Réglages en onglets verticaux (Paramètres, COP-217) ----------
   Colonne d'onglets à gauche (en ligne défilante sur mobile) ; chaque onglet porte son propre
   formulaire, enregistré séparément. Aucune couleur nouvelle : tokens Medina uniquement. */
.settings-layout { display: block; }
.settings-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--base-300); margin-bottom: 16px;
  overflow-x: auto; scrollbar-width: none;
}
.settings-tab {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: var(--fs-14); font-weight: 600; color: var(--muted);
  padding: 10px 14px; text-decoration: none; cursor: pointer; position: relative; transition: color .14s;
}
.settings-tab:hover { color: var(--base-content); }
.settings-tab.active { color: var(--primary); }
.settings-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary);
}
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.settings-grid .full { grid-column: 1 / -1; }
.settings-bar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--base-300); }
.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-card {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
  border: 1.5px solid var(--base-300); border-radius: 11px; font-weight: normal;
}
.choice-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.choice-card.is-disabled { opacity: .55; cursor: not-allowed; }
.choice-card b { display: block; color: var(--base-content); }
.choice-card span { color: var(--muted); font-size: var(--fs-12-5); }
.recap-box { background: var(--base-200); border-radius: 10px; padding: 12px 14px; font-size: var(--fs-13); display: flex; flex-direction: column; gap: 4px; }
.recap-box .recap-big { font-size: var(--fs-18); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--base-content); }
.doc-preview {
  border: 1px solid var(--base-300); border-radius: 10px; padding: 14px 16px; background: var(--paper); color: var(--paper-content);
  --muted: var(--paper-muted);   /* le texte secondaire de l'aperçu reste celui du papier */
  display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-12);
}
.doc-preview b { font-size: var(--fs-14); }
.doc-preview .doc-preview-num { text-align: end; font-family: var(--f-mono); }
@media (max-width: 760px) {
  .settings-grid, .choice-cards { grid-template-columns: 1fr; }
}

/* ---------- Onglets de navigation avec compteurs + phrase d'orientation (COP-219) ---------- */
.tab-bar-nav { overflow-x: auto; scrollbar-width: none; }
.tab-bar-nav::-webkit-scrollbar { display: none; }
/* La barre défile (overflow) : le soulignement reste DANS l'onglet, sinon il est rogné. */
.tab-bar-nav .tab.active::after { bottom: 0; }
.tab-bar-nav .tab { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; }
.tab-count {
  font-family: var(--f-mono); font-size: var(--fs-11); font-weight: 700;
  border-radius: 99px; padding: 1px 7px; background: var(--base-300); color: var(--base-content); /* --muted sur --base-300 < 4,5:1 */
}
.tab-count-alert { background: var(--accent-soft); color: var(--accent); }
.tab-risk { display: inline-flex; align-items: center; gap: 3px; }
.tab-risk svg { width: 12px; height: 12px; }
.screen-intro { color: var(--muted); font-size: var(--fs-13); line-height: var(--lh-text); margin: -4px 0 16px; }

/* ---------- Paiements v3 : en-tête titre + périmètre commun + « Nouveau paiement » (COP-311) ---------- */
.pay-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pay-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pay-head-sep { width: 1px; align-self: stretch; background: var(--base-300); margin-inline: 2px; }
@media (max-width: 640px) { .pay-head-sep { display: none; } }
/* « Appliquer les avances » (COP-221) : bandeau au-dessus de la matrice, seulement quand il a un effet. */
.pay-avances { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.pay-avances-txt { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: var(--fs-13); }
.pay-avances-ico { display: inline-flex; color: var(--primary); }
.pay-avances-ico svg { width: 16px; height: 16px; }
.pay-avances-msg { display: flex; gap: 4px 8px; flex-wrap: wrap; align-items: baseline; }
.pay-avances-titre { font-weight: 600; }
.pay-avances-detail { overflow-x: auto; }
.pay-avances-head { padding: 16px 18px 12px; }
.pay-avances-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 18px;
  border-top: 1px solid var(--base-300); }
.pay-avances-detail .table-medina td.r, .pay-avances-detail .table-medina th.r { text-align: end; }

/* ---------- Paiements v3 : onglet Encaissements, bande de chiffres + liste serveur (COP-312) ---------- */
.enc-zone { display: flex; flex-direction: column; gap: 16px; }
.enc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.enc-kpi { text-align: start; padding: 14px 16px; gap: 5px; border: 1px solid var(--base-300); color: inherit; text-decoration: none; min-width: 0; }
.enc-kpi:hover, .enc-kpi:focus-visible { border-color: var(--muted-2); }
.enc-kpi.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset, var(--shadow-card); }
.enc-kpi .kpi-label { display: flex; gap: 7px; align-items: center; }
.enc-kpi .kpi-label svg { width: 15px; height: 15px; }
.enc-kpi .kpi-foot { display: block; line-height: var(--lh-cell); }
.enc-card .card-head { flex-wrap: wrap; gap: 12px; }
.enc-table tbody + tbody tr:first-child td { border-top: 1px solid var(--base-300); }
.enc-row { cursor: pointer; }
.enc-row.expanded td { background: var(--primary-soft); }
.enc-chevron { width: 14px; height: 14px; transition: transform .15s; }
.enc-chevron.open, .enc-row.expanded .enc-chevron { transform: rotate(90deg); }
[dir="rtl"] .enc-chevron { transform: scaleX(-1); }
[dir="rtl"] .enc-chevron.open, [dir="rtl"] .enc-row.expanded .enc-chevron { transform: scaleX(-1) rotate(90deg); }
.enc-detail td { background: var(--base-200); padding: 12px 16px 16px; }
.enc-table tfoot td { font-weight: 700; background: var(--base-200); border-top: 1px solid var(--base-300); }

/* ---------- Répartition par lot : grille lots × mois d'UN exercice (COP-219, hot session 2026-10-18) ----------
   Même case que l'onglet Répartition de la fiche (fp-hm) : ✓ soldé · reste en orange bordé (partiel) · reste en rouge
   (impayé) ; point sarcelle = réglé en tout ou partie par une avance (COP-221). Colonne du lot collée au défilement. */
.rep-wrap { overflow-x: auto; }
table.rep-grid thead th, table.rep-grid tbody td, table.rep-grid tfoot td { padding: 6px 4px; }
table.rep-grid tr > :first-child { padding-inline-start: 16px; }
table.rep-grid tr > :last-child { padding-inline-end: 16px; }
table.rep-grid .rg-lot { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--base-100); min-width: 170px; max-width: 240px; }
table.rep-grid thead .rg-lot, table.rep-grid tfoot td:first-child { background: var(--base-200); }
table.rep-grid tbody tr:hover .rg-lot { background: var(--base-200); }
table.rep-grid .rg-lot .lot-tag { white-space: nowrap; }
table.rep-grid .rg-nom { display: block; margin-top: 2px; font-size: var(--fs-sub); color: var(--muted); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.rep-grid .rg-nom:hover { color: var(--primary); text-decoration: underline; }
table.rep-grid th.rg-m { text-align: center; white-space: nowrap; }
table.rep-grid th.rg-m small { display: block; font-weight: 500; color: var(--muted); }
table.rep-grid td.rg-m { text-align: center; min-width: 54px; }
table.rep-grid td.rg-reste { white-space: nowrap; font-weight: 700; }

.rg-none { color: var(--muted-2); }
.rg-c { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 32px;
  padding: 0 5px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; white-space: nowrap;
  font-family: var(--f-ui); font-variant-numeric: tabular-nums; font-size: var(--fs-11-5); font-weight: 700; }
.rg-c svg { width: 14px; height: 14px; }
.rg-c.ok { background: var(--success-soft); color: var(--success); }
.rg-c.part { background: var(--warning-soft); color: var(--warning-content); border-color: var(--warning); }
.rg-c.ko { background: var(--error-soft); color: var(--error); }
.rg-c:hover { border-color: currentColor; }
.rg-c:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.rg-av { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.rg-c .rg-av { position: absolute; top: 3px; inset-inline-end: 3px; }
/* Détail d'une case, déplié sous le lot : la boîte reste visible quand la grille défile horizontalement. */
tr.rep-det:empty { display: none; }
table.rep-grid tbody tr.rep-det > td { background: var(--base-200); padding: 10px 16px 14px; }
.rep-det-box { position: sticky; inset-inline-start: 16px; max-width: 760px; }
.rep-det-close { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 1; }
.rep-legend { display: inline-flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-12); color: var(--muted); }
.rep-legend > span { display: inline-flex; gap: 6px; align-items: center; }
.rep-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid var(--base-300); }
.rep-legend .sw.ok { background: var(--success-soft); }
.rep-legend .sw.part { background: var(--warning-soft); border-color: var(--warning); }
.rep-legend .sw.ko { background: var(--error-soft); }
/* COP-221 : ce qu'une avance a réglé — même teinte que le réglé, hachurée (barre des appels). */
.bar-avance { background: repeating-linear-gradient(45deg, var(--primary) 0 3px, var(--primary-soft) 3px 6px); }
.kv { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: var(--fs-13); }
.kv .num { font-weight: 700; }

/* ---------- Périmètre d'un paiement : lots concernés + aperçu de la répartition (COP-220) ---------- */
.lot-checks { display: flex; flex-direction: column; gap: 6px; }
.lot-check {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer;
  border: 1px solid var(--base-300); border-radius: var(--r-btn); font-size: var(--fs-13);
}
.lot-check.on { border-color: var(--primary); background: var(--primary-soft); }
.lot-check input { accent-color: var(--primary); }
.lot-check input:disabled + .lot-tag { opacity: .85; }
.apercu-repartition {
  border: 1px solid var(--base-300); border-radius: var(--r-btn); background: var(--base-200);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-13);
}
.apercu-title { font-weight: 600; }
.apercu-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.apercu-row .num { font-weight: 700; }
.apercu-hint { font-size: var(--fs-12); color: var(--muted); line-height: var(--lh-text-s); }
.apercu-inline { color: var(--muted); font-size: var(--fs-sub); margin-top: 4px; }
.apercu-inline summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; }
.apercu-inline summary::-webkit-details-marker { display: none; }
.apercu-inline summary:hover { color: var(--primary); }
.apercu-inline .apercu-chev { width: 14px; height: 14px; transition: transform .15s; }
[dir=rtl] .apercu-inline .apercu-chev { transform: scaleX(-1); }
.apercu-inline[open] .apercu-chev { transform: rotate(90deg); }
.apercu-lignes { display: grid; grid-template-columns: max-content max-content max-content; gap: 4px 16px;
  align-items: center; margin: 6px 0 2px; padding: 8px 12px; font-size: var(--fs-mini); border: 1px solid var(--base-300);
  border-radius: var(--r-btn); background: var(--base-200); width: max-content; max-width: 100%; }
.apercu-lignes .al-appel { color: var(--base-content); }
.apercu-lignes .al-amt { text-align: end; font-weight: 600; color: var(--base-content); }
.field-hint { font-size: var(--fs-12); color: var(--muted); line-height: var(--lh-text-s); }
/* Hot 2026-10-29 — a decision checkbox inside a modal form (label + optional hint under it). */
.modal-check { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; font-size: var(--fs-13-5); cursor: pointer; }
.modal-check input { margin-top: 3px; accent-color: var(--primary); }
.modal-check .field-hint { display: block; margin-top: 2px; }
.field .lot-check { font-size: var(--fs-13); font-weight: 500; color: var(--base-content); }

/* ---------- Impayés & relances — onglet Débiteurs (COP-228) ---------- */
.deb-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13-5); font-weight: 600; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 36px; height: 20px; border-radius: 99px; background: var(--base-300); position: relative; transition: background .15s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--base-100); box-shadow: 0 1px 2px var(--base-300); transition: inset-inline-start .15s; }
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { inset-inline-start: 18px; }
.switch input:focus-visible + .track { outline: 2px solid var(--primary); outline-offset: 2px; }
.deb-detail { font-size: var(--fs-mini); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.deb-side { display: flex; flex-direction: column; gap: 14px; }
.deb-sec { font-size: var(--fs-11-5); font-weight: 600; letter-spacing: var(--ls-caps-s); text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
/* Sous-tableau déplié (Débiteurs, fiche) = une seule définition, comme .cp-mini (COP-335). */
.deb-mini { width: 100%; border-collapse: collapse; font-size: var(--fs-mini); line-height: var(--lh-snug); }
.deb-mini th { text-align: start; font-weight: 600; color: var(--muted); font-size: var(--fs-mini-th); padding: 4px 8px; border-bottom: 1px solid var(--base-300); }
.deb-mini td { font-size: var(--fs-mini); padding: 5px 8px; border-bottom: 1px solid var(--base-300); }
.deb-mini tr:last-child td { border-bottom: 0; }
/* dans une ligne dépliée d'un .table-medina, le sous-tableau garde ses tailles (sinon tbody td / thead th l'emportent) */
.table-medina .deb-mini td { font-size: var(--fs-mini); line-height: var(--lh-snug); }
.table-medina .deb-mini th { font-size: var(--fs-mini-th); }
.deb-tl { font-size: var(--fs-mini); line-height: var(--lh-cell); padding-inline-start: 12px; border-inline-start: 2px solid var(--base-300); margin-bottom: 8px; }
.deb-links { display: flex; gap: 8px; flex-wrap: wrap; }
.deb-links .btn { font-size: var(--fs-12-5); }
/* ---------- Impayés & relances — lignes de liste, compte rendu, tiroir Relancer (COP-229, Contentieux) ---------- */
.rel-file { padding: 0; margin-bottom: 18px; }
.rel-file a.row-name { color: inherit; text-decoration: none; }
.rel-file a.row-name:hover { text-decoration: underline; }
.rel-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--base-300); align-items: center; }
.rel-row:last-child { border-bottom: 0; }
.rel-row input[type=checkbox] { accent-color: var(--primary); width: 16px; height: 16px; }
.rel-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rel-line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rel-line .lot-tag { margin: 0; }
.rel-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rel-amount { font-weight: 700; color: var(--error); }
/* COP-261 : une dette abandonnée reste due mais n'est plus une alerte. */
.rel-amount.quiet { color: var(--base-content); }
.rel-cr { margin-bottom: 14px; }
.rel-cr ul { margin: 6px 0 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; }
.rel-cr li .btn { margin-inline-start: 8px; }
.rel-montant { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-13-5); }
/* Hot 2026-10-30 : tiroir Relancer élargi, nom du copropriétaire en titre lisible, montant relancé en rouge (alerte). */
.rel-drawer { width: min(560px, 100%); }
.rel-drawer .drawer-body { gap: 12px; }
.rel-somme { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-btn); background: var(--base-200); }
.rel-somme .field-hint { margin: 0; }
/* L'avertissement de cadence suggère seulement : une note, au corps des autres précisions du tiroir. */
.rel-drawer .banner-warning { font-size: var(--fs-12-5); line-height: var(--lh-text-s); padding: 9px 12px; gap: 8px; }
.rel-drawer .banner-warning svg { width: 15px; height: 15px; }
/* Les trois canaux côte à côte : nom sur la 1re ligne, précision dessous ; empilés sur un écran étroit. */
.rel-drawer .rel-canaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rel-drawer .rel-canaux.rel-langues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rel-ok-canal.err { color: var(--error); }
.rel-drawer .rel-check { flex-wrap: wrap; align-items: flex-start; row-gap: 2px; }
.rel-drawer .rel-check .who { flex-basis: 100%; margin-inline-start: 0; line-height: var(--lh-text-s); }
@media (max-width: 520px) { .rel-drawer .rel-canaux { grid-template-columns: 1fr; } }
/* Les montants des tiroirs Relancer / Générer des lettres = le chiffre clé niveau statistique (`kpi-value kpi-stat`, COP-337). */
.rel-montant-val { color: var(--error); }
.rel-toute { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13-5); font-weight: 600; cursor: pointer; }
/* Hot 2026-10-30 : le résultat de la relance dans le tiroir — confirmation centrée, puis la carte du document. */
.rel-ok { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 16px 14px; border-radius: var(--r-card); background: var(--success-soft); }
.rel-ok-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--success); color: var(--on-primary); margin-bottom: 6px; }
.rel-ok-ico svg { width: 19px; height: 19px; stroke-width: 2.6; }
.rel-ok-titre { font-size: var(--fs-14); font-weight: 700; color: var(--success); }
.rel-ok-montant { color: var(--base-content); }
.rel-ok-canal { font-size: var(--fs-12); color: var(--muted); }
.rel-doc { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--base-300);
  border-radius: var(--r-card); background: var(--base-100); color: inherit; text-decoration: none;
  box-shadow: var(--shadow-soft); transition: border-color .15s, box-shadow .15s; }
.rel-doc:hover { border-color: var(--primary); box-shadow: var(--shadow-card); }
.rel-doc-ico { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary); }
.rel-doc-ico svg { width: 22px; height: 22px; }
.rel-doc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rel-doc-txt b { font-size: var(--fs-14); }
.rel-doc-txt span { font-size: var(--fs-12-5); color: var(--muted); }
.rel-doc .btn { flex: none; }
.rel-canaux { display: flex; flex-direction: column; gap: 8px; }
.field .rel-check { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--base-300); border-radius: var(--r-btn); cursor: pointer; font-size: var(--fs-13-5); font-weight: 500; color: var(--base-content); }
.field .rel-check.on { border-color: var(--primary); background: var(--primary-soft); }
.field .rel-check.off { opacity: .55; cursor: not-allowed; }
.rel-check input { accent-color: var(--primary); }
/* COP-230 — onglet Journal des relances : 3 chiffres (le 3e est un lien-filtre), puis le registre. */
.rel-check .who { margin-inline-start: auto; font-size: var(--fs-12); color: var(--muted); }
.field-label { font-size: var(--fs-12-5); font-weight: 600; color: var(--muted); }
@media (max-width: 640px) {
  .rel-row { grid-template-columns: auto minmax(0, 1fr); }
  .rel-right { grid-column: 2; justify-content: flex-start; }
}
.show-sm { display: none; }
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .show-sm { display: block; }
  .deb-detail { grid-template-columns: minmax(0, 1fr); }
  .table-medina .badge { white-space: normal; }
}

/* COP-231 — onglet Vue d'ensemble : KPIs cliquables, barre d'ancienneté, graphiques SVG (tokens seulement). */
.ov { display: flex; flex-direction: column; gap: 18px; }
.ov-grid .card-head .btn-ghost { color: var(--primary); }
/* « La dette depuis l'origine » : UNE carte — le reste à recouvrer (héros) à côté de l'ancienneté, puis trois chiffres
   secondaires en pied (hot 2026-10-17, remplace les quatre cartes KPI + l'encart « déjà prescrit »). */
.ov-stock { padding: 0; overflow: hidden; }
.ov-stock-main { display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 28px; padding: 16px; align-items: start; }
@media (max-width: 760px) { .ov-stock-main { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.ov-hero, .ov-stat { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.ov-hero:hover .kpi-value, .ov-hero:focus-visible .kpi-value { color: var(--primary); }
.ov-stock .kpi-label { display: flex; align-items: center; gap: 7px; }
.ov-stock .kpi-label svg { width: 15px; height: 15px; }
.ov-hero .kpi-value { white-space: nowrap; }
.ov-age { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ov-age-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ov-age-head .kpi-label { cursor: help; }
.ov-stock .agebar { height: 26px; border-radius: 8px; }
.ov-stock .agelegend { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 0; }
.ov-stock .agelegend a { align-items: center; gap: 6px; padding: 3px 6px; white-space: nowrap; }
.ov-stock .agelegend .sw { width: 10px; height: 10px; margin-top: 0; }
.ov-stock .agelegend .v { font-size: var(--fs-13); }
.ov-info { width: 13px; height: 13px; color: var(--muted); }
.ov-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--base-300); }
.ov-stat { padding: 12px 16px; }
.ov-stat + .ov-stat { border-inline-start: 1px solid var(--base-300); }
.ov-stat:hover, .ov-stat:focus-visible { background: var(--base-200); }
.ov-stat.alert .kpi-value { color: var(--accent); }
.ov-stat.danger .kpi-value { color: var(--error); }
@media (max-width: 760px) {
  .ov-stats { grid-template-columns: minmax(0, 1fr); }
  .ov-stat + .ov-stat { border-inline-start: 0; border-top: 1px solid var(--base-300); }
}
.ov-note { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--fs-13); color: var(--muted); padding: 0 16px 12px; }
.ov-note b { color: var(--base-content); font-family: var(--f-ui); }
.ov-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--age4); flex: none; }
.ov-total { font-family: var(--f-ui); font-weight: 700; }
/* Amounts in the UI face: tabular digits keep the columns aligned. */
.ov-note b, .ov-total, .agelegend .v, .ov-hbar .amt, .ov-dleg b, .fp-kv .v, .fp-rate .amt, .fp-tli .when, .esc-step .n, .esc-side .n { font-variant-numeric: tabular-nums; }
.agebar { display: flex; height: 44px; border-radius: 10px; overflow: hidden; gap: 2px; }
.agebar a { min-width: 6px; display: block; }
.agebar a:hover, .agebar a:focus-visible { filter: brightness(1.08); }
.a0 { background: var(--age0); } .a1 { background: var(--age1); } .a2 { background: var(--age2); } .a3 { background: var(--age3); }
.a4 { background: repeating-linear-gradient(135deg, var(--age4) 0 6px, var(--base-300) 6px 11px); }
.agelegend { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px; margin-top: 14px; }
.agelegend a { display: flex; gap: 9px; align-items: flex-start; padding: 6px; border-radius: 8px; color: inherit; text-decoration: none; }
.agelegend a:hover, .agelegend a:focus-visible { background: var(--base-200); }
.agelegend .sw { width: 12px; height: 12px; border-radius: 3px; margin-top: 3px; flex: none; }
.agelegend .l { font-size: var(--fs-12-5); color: var(--muted); }
.agelegend .v { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-14); }
.agelegend .p { font-size: var(--fs-12); color: var(--muted); }
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } }
.ov-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.ov-chart .grid { stroke: var(--base-300); stroke-width: 1; }
.ov-chart .axis { fill: var(--muted); font-size: var(--fs-13-5); font-family: var(--f-ui); }
.ov-chart .line { fill: none; stroke: var(--primary); stroke-width: 2.2; }
.ov-chart .area { fill: var(--primary-soft); }
.ov-chart .endpt { fill: var(--primary); }
.ov-chart .endlbl { fill: var(--base-content); font-size: var(--fs-12); font-weight: 700; font-family: var(--f-ui); }
.ov-chart .bar-bg { fill: var(--base-200); }
.ov-chart .bar { fill: var(--primary); }
.ov-chart .bar.low { fill: var(--age1); }
.ov-chart .val { fill: var(--base-content); font-size: var(--fs-11-5); font-weight: 700; font-family: var(--f-ui); }
.ov-hbars { display: flex; flex-direction: column; gap: 10px; }
.ov-hbar { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-13); color: inherit; text-decoration: none; }
a.ov-hbar:hover .nm, a.ov-hbar:focus-visible .nm { text-decoration: underline; }
.ov-hbar .track { height: 10px; border-radius: 99px; background: var(--base-200); overflow: hidden; }
.ov-hbar .fill { display: block; height: 100%; background: var(--warning); border-radius: 99px; } /* une dette, jamais le vert « OK » (hot 2026-10-30) */
.ov-hbar .fill.ok { background: var(--primary); } /* arriérés < « arriérés minimum » */
.ov-hbar .fill.hot { background: var(--age3); }
.ov-hbar .amt { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-12-5); }
.ov-hbar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-foot { font-size: var(--fs-12-5); color: var(--muted); margin-top: 10px; line-height: var(--lh-text); }
@media (max-width: 560px) { .ov-hbar { grid-template-columns: minmax(0, 1fr) auto; } .ov-hbar .track { grid-column: 1 / -1; order: 3; } }
/* COP-252: the overview in two sections (« La dette depuis l'origine » / « Activité de l'exercice ») */
.ov-sec { display: flex; flex-direction: column; gap: 18px; }
.ov-sec + .ov-sec { margin-top: 14px; padding-top: 22px; border-top: 1px solid var(--base-300); }
.ov-sec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ov-sec-head h2 { font-size: var(--fs-17); margin: 0; }
/* « La dette depuis l'origine — Immeuble A » : l'immeuble suivi, dans le titre, en ton secondaire ; la règle en infobulle. */
.ov-sec-head h2[title] { cursor: help; }
.ov-h2-scope { color: var(--muted); font-weight: 500; }
/* Overlaid exercices: one colour per year, y0 = the latest (COP-252 charts, years superposed). */
.ov-years { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; font-size: var(--fs-12-5); color: var(--muted); }
.ov-year { display: inline-flex; align-items: center; gap: 6px; }
.ov-year b { color: var(--base-content); font-variant-numeric: tabular-nums; }
.ov-year .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ov-year .sw.y0 { background: var(--primary); } .ov-year .sw.y1 { background: var(--age2); }
.ov-year .sw.y2 { background: var(--age1); } .ov-year .sw.y3 { background: var(--age4); }
.ov-chart .line.y1 { stroke: var(--age2); } .ov-chart .line.y2 { stroke: var(--age1); } .ov-chart .line.y3 { stroke: var(--age4); }
.ov-chart .endpt.y1 { fill: var(--age2); } .ov-chart .endpt.y2 { fill: var(--age1); } .ov-chart .endpt.y3 { fill: var(--age4); }
.ov-chart .bar.y1 { fill: var(--age2); } .ov-chart .bar.y2 { fill: var(--age1); } .ov-chart .bar.y3 { fill: var(--age4); }
.ov-donut { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ov-donut svg { width: 150px; height: 150px; flex: none; }
.ov-donut .back { fill: none; stroke: var(--base-200); stroke-width: 22; }
.ov-donut .slice { fill: none; stroke-width: 22; }
.ov-donut .ctr { fill: var(--base-content); font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-12); }
.ov-donut .sub { fill: var(--muted); font-size: var(--fs-11); font-family: var(--f-ui); }
.dn0 { stroke: var(--primary); background: var(--primary); } .dn1 { stroke: var(--age2); background: var(--age2); }
.dn2 { stroke: var(--age3); background: var(--age3); } .dn-recent { stroke: var(--age1); background: var(--age1); }
.ov-dleg { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-13); min-width: 0; flex: 1 1 150px; }
.ov-dleg > div { display: flex; gap: 9px; align-items: baseline; }
.ov-dleg .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; transform: translateY(1px); }
.ov-dleg b { font-family: var(--f-ui); }
.ov-dleg .p { color: var(--muted); font-size: var(--fs-12); }
.ov-hbar.dim { opacity: .45; }
.ov-sec .card-sub, .ov .card-sub { color: var(--muted); font-size: var(--fs-12-5); margin-top: 2px; line-height: var(--lh-text); }

/* ---------------------------------------------------------------------------------------------------------
   Fiche copropriétaire v3 (COP-238) — en-tête, carte de situation, onglets. Jetons uniquement (COP-232).
   --------------------------------------------------------------------------------------------------------- */
.fp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fp-who { display: flex; gap: 14px; align-items: center; min-width: 0; }
.fp-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-19); flex: none; border: 1px solid var(--base-300); }
.fp-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fp-contacts { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 6px; color: var(--muted); font-size: var(--fs-12-5); }
.fp-contacts > span { display: inline-flex; gap: 6px; align-items: center; }
.fp-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fp-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .fp-grid2 { grid-template-columns: minmax(0, 1fr); } }

.fp-hero { padding: 18px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
.fp-hero-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
@media (max-width: 760px) { .fp-hero-main { grid-template-columns: minmax(0, 1fr); } }
.fp-amt { margin: 4px 0 6px; }
.fp-amt.due { color: var(--error); }
.fp-amt.ok { color: var(--success); }
.fp-facts { color: var(--muted); font-size: var(--fs-13); line-height: 1.6; }
.fp-act { border-inline-start: 4px solid var(--primary); padding: 2px 0 2px 16px; display: flex; flex-direction: column; gap: 6px; }
.fp-act.alert { border-inline-start-color: var(--accent); }
.fp-act.err { border-inline-start-color: var(--error); }
.fp-act.ok { border-inline-start-color: var(--success); }
.fp-act.info { border-inline-start-color: var(--primary); }
.fp-act.neutral { border-inline-start-color: var(--muted-2); }
.fp-act h3 { margin: 0; font-size: var(--fs-16); display: flex; gap: 8px; align-items: center; }
.fp-act p { margin: 0; color: var(--muted); font-size: var(--fs-13); line-height: var(--lh-text); }
.fp-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.agebar.thin { height: 12px; border-radius: 99px; }
.fp-agelegend { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 8px; font-size: var(--fs-12); color: var(--muted); }
.fp-agelegend a { display: inline-flex; gap: 6px; align-items: center; color: inherit; text-decoration: none; }
.fp-agelegend a:hover, .fp-agelegend a:focus-visible { text-decoration: underline; }
.fp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.fp-dot.a0, .fp-dot.a1, .fp-dot.a2, .fp-dot.a3, .fp-dot.a4 { border-radius: 50%; }
.fp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-chip { display: inline-flex; gap: 6px; align-items: center; background: var(--warning-soft); border: 1px solid var(--warning); color: var(--warning-content); border-radius: 99px; padding: 5px 11px; font-size: var(--fs-12-5); font-weight: 600; text-decoration: none; }
.fp-chip svg { width: 15px; height: 15px; }

.fp-idrow { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--base-300); font-size: var(--fs-13); }
.fp-idrow:last-child { border-bottom: none; }
.fp-idrow .k { color: var(--muted); width: 92px; flex: none; font-size: var(--fs-12); }
.fp-idrow .v { min-width: 0; overflow-wrap: anywhere; }
.fp-keyfigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 520px) { .fp-keyfigs { grid-template-columns: minmax(0, 1fr); } }
.fp-sec { font-size: var(--fs-11-5); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); font-weight: 600; margin: 0 0 4px; }
.fp-sub { font-size: var(--fs-12); color: var(--muted); }
.fp-keyfigs .fp-sub:first-of-type { margin-bottom: 10px; }
.fp-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; font-size: var(--fs-13); align-items: baseline; }
.fp-kv .k { color: var(--muted); }
.fp-kv .v { font-family: var(--f-ui); font-weight: 700; text-align: end; }
.fp-rate { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 12px; }
.fp-rate .track { height: 10px; border-radius: 99px; background: var(--base-200); overflow: hidden; }
.fp-rate .fill { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.fp-rate .amt { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-12-5); }


/* ---------- Fiche v3 : onglet Suivi, frise unique (COP-241) — jetons seulement ---------- */
.fp-tl { display: flex; flex-direction: column; }
.fp-tli { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--base-300); align-items: start; }
.fp-tli:last-child { border-bottom: none; }
.fp-tli .ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--base-200); color: var(--muted); }
.fp-tli .ic svg { width: 15px; height: 15px; }
.fp-tli .ic.rel { background: var(--accent-soft); color: var(--accent); }
.fp-tli .ic.note { background: var(--primary-soft); color: var(--primary-2); }
.fp-tli .t { font-weight: 600; font-size: var(--fs-14); }
.fp-tli .d { color: var(--muted); font-size: var(--fs-12-5); margin-top: 2px; line-height: var(--lh-text-s); overflow-wrap: anywhere; white-space: pre-line; }
.fp-tli .when { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; font-family: var(--f-ui); }
.fp-palier { padding: 12px 16px; border-bottom: 1px solid var(--base-300); font-size: var(--fs-12-5); color: var(--muted); line-height: var(--lh-text); }
.fp-palier b { color: var(--base-content); }
@media (max-width: 640px) { .fp-tli { grid-template-columns: 30px minmax(0, 1fr); } .fp-tli .when { grid-column: 2; } }

/* COP-246 — « Suggestion à valider » banner of the Réclamations tab (maquette reclamations-chantiers-v1). */
.suggest { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px;
  border: 1px dashed var(--primary); background: var(--primary-soft); border-radius: var(--r-card); font-size: var(--fs-13); }
.suggest .grow { flex: 1 1 280px; line-height: var(--lh-text); }
.suggest .tag { font-size: var(--fs-10-5); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps-s); color: var(--primary-2); }
:root[data-theme="dark"] .suggest .tag { color: var(--primary); }

.seg a { display: inline-flex; align-items: center; gap: 7px; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--base-200); }
/* ---------- COP-255 — Impayés & relances, onglet Escalade ----------
   Bandeau de 4 étapes enchaînées (chevrons, gravité --step1..4) + « Abandonnés » à part ; liste d'une étape
   (lignes .rel-row, filtres dans l'en-tête, pagination) ; mini-barre d'avancement (Débiteurs) ; parcours (fiche). */
.esc-stack { display: flex; flex-direction: column; gap: 16px; }
.esc-chainwrap { display: flex; flex-direction: column; gap: 6px; }
.esc-lead { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: var(--fs-12-5); text-decoration: none; }
.esc-lead:hover { color: var(--primary); }
.esc-lead svg { width: 14px; height: 14px; }
.esc-chainrow { display: flex; gap: 14px; align-items: stretch; }
.esc-chain { display: flex; flex: 1 1 auto; min-width: 0; filter: drop-shadow(0 1px 1px var(--shadow-chain)); }
.esc-step, .esc-side { position: relative; display: flex; flex-direction: column; gap: 2px; text-align: start; color: inherit; text-decoration: none; background: var(--base-100); }
.esc-step { flex: 1 1 0; min-width: 0; padding: 12px 30px 12px 32px; margin-inline-start: -12px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); }
.esc-step:first-child { margin-inline-start: 0; padding-inline-start: 16px; border-radius: var(--r-card) 0 0 var(--r-card);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
[dir="rtl"] .esc-step { clip-path: polygon(100% 0, 18px 0, 0 50%, 18px 100%, 100% 100%, calc(100% - 18px) 50%); }
[dir="rtl"] .esc-step:first-child { clip-path: polygon(100% 0, 18px 0, 0 50%, 18px 100%, 100% 100%); }
.esc-step:hover, .esc-side:hover { background: var(--base-200); }
.esc-step[aria-current="true"], .esc-side[aria-current="true"] { background: var(--tone-soft); box-shadow: inset 0 -3px 0 var(--tone); }
.esc-step .n, .esc-side .n { color: var(--tone-text); }
.esc-step .t, .esc-side .t { font-size: var(--fs-12-5); font-weight: 700; }
.esc-step .a, .esc-side .a { font-size: var(--fs-12); color: var(--muted); }
.esc-step .x { font-size: var(--fs-11-5); font-weight: 700; color: var(--error); }
/* COP-259 : menu « Actions » d'une ligne de l'étape Mise en demeure (popover au clic, jetons seulement). */
.esc-menu-host { position: relative; }
.esc-menu { position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 20; min-width: 270px; max-width: calc(100vw - 32px);
  background: var(--base-100); border: 1px solid var(--base-300); border-radius: var(--r-card); box-shadow: var(--shadow-lift);
  padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.esc-mitem { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-btn);
  background: transparent; color: inherit; font: inherit; font-size: var(--fs-13-5); text-align: start; text-decoration: none; cursor: pointer; }
.esc-mitem:hover, .esc-mitem:focus-visible { background: var(--base-200); }
.esc-mitem-danger { color: var(--error); }
/* COP-273 : écran de l'attestation de situation (formulaire court + attestations émises). Espacements seulement. */
.att-head { margin-bottom: 18px; }
.att-card { max-width: 640px; }
.att-card + .att-card { margin-top: 18px; }
.att-form { display: flex; flex-direction: column; gap: 14px; }
.att-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--base-300); }
.att-jour { color: var(--muted); }
.att-acts { display: flex; gap: 8px; margin-inline-start: auto; }
.att-inline { display: contents; }
/* Mobile : le bouton est à gauche de la ligne, le menu s'étend sur la largeur de la ligne (jamais rogné). */
@media (max-width: 640px) {
  .esc-list .rel-row { position: relative; }
  .esc-menu-host { position: static; }
  .esc-menu { inset-inline: 12px; min-width: 0; top: calc(100% - 6px); }
}
.esc-step::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--tone); }
.esc-side { flex: 0 0 190px; padding: 12px 16px; border: 1px dashed var(--base-300); border-radius: var(--r-card); }
.esc-t1 { --tone: var(--step1); --tone-soft: var(--step1-soft); --tone-text: var(--step1-text); }
.esc-t2 { --tone: var(--step2); --tone-soft: var(--step2-soft); --tone-text: var(--step2-text); }
.esc-t3 { --tone: var(--step3); --tone-soft: var(--step3-soft); --tone-text: var(--step3-text); }
.esc-t4 { --tone: var(--step4); --tone-soft: var(--step4-soft); --tone-text: var(--step4-text); }
.esc-t0 { --tone: var(--muted-2); --tone-soft: var(--base-200); --tone-text: var(--muted); }
@media (max-width: 760px) {
  .esc-chainrow { flex-direction: column; }
  .esc-chain { flex-direction: column; }
  .esc-step, .esc-step:first-child, [dir="rtl"] .esc-step, [dir="rtl"] .esc-step:first-child { margin: 0 0 -8px; padding: 12px 16px 20px; border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px)); }
  .esc-step:first-child { border-radius: var(--r-card) var(--r-card) 0 0; }
  .esc-side { flex-basis: auto; }
}
.esc-intro { margin: 0; color: var(--muted); font-size: var(--fs-13); line-height: var(--lh-text); }
.esc-intro b { color: var(--base-content); }
.esc-count { color: var(--muted); font-size: var(--fs-12-5); }
.esc-why { font-size: var(--fs-12); color: var(--muted); line-height: var(--lh-text-s); }
.esc-why b { color: var(--base-content); font-weight: 600; }
.esc-list .rel-row { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 640px) {
  .esc-list .rel-row { grid-template-columns: minmax(0, 1fr); }
  .esc-list .rel-right { grid-column: 1; justify-content: flex-start; }
}
/* Geste « Mettre en demeure » (COP-258) : tiroir commun unitaire / groupé. */
.md-dest { display: flex; flex-direction: column; border: 1px solid var(--base-300); border-radius: var(--r-btn); }
.md-dest-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--base-300); }
.md-dest-row:last-child { border-bottom: 0; }
.md-dest-nom { display: flex; flex-direction: column; min-width: 0; }
.md-apercu { width: 100%; height: 420px; border: 1px solid var(--base-300); border-radius: var(--r-btn); background: var(--base-200); }
.md-delai { width: 100px; }
.md-relu { display: flex; align-items: center; gap: 8px; font-size: var(--fs-13-5); font-weight: 600; cursor: pointer; }
.md-relu input { accent-color: var(--primary); width: 16px; height: 16px; }
.md-langues { flex-direction: row; }
.md-langues .rel-check { flex: 1; }
.md-drawer .banner-error a { color: inherit; text-decoration: underline; }
.md-drawer .btn:disabled { opacity: .5; cursor: not-allowed; }
/* Parcours de recouvrement (fiche personne, onglet Suivi). */
.esc-parcours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.esc-pstep { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 6px; border-top: 3px solid var(--base-300); font-size: var(--fs-12); }
.esc-pstep .pl { font-weight: 700; color: var(--muted); }
.esc-pstep .pd { color: var(--muted); font-size: var(--fs-11-5); line-height: var(--lh-snug); }
.esc-pstep.done { border-color: var(--success); }
.esc-pstep.done .pl { color: var(--success); }
.esc-pstep.cur { border-color: var(--step2); background: var(--step2-soft); border-radius: 0 0 8px 8px; }
.esc-pstep.cur .pl { color: var(--step2-text); }
.esc-pstep.cur .pd { color: var(--base-content); }
.esc-pourquoi { margin: 6px 0 0; font-size: var(--fs-12-5); color: var(--muted); line-height: var(--lh-text-s); }
.esc-pourquoi b { color: var(--base-content); }
@media (max-width: 640px) { .esc-parcours { grid-template-columns: 1fr 1fr; } }
.fp-parcours { padding: 14px 16px; border-bottom: 1px solid var(--base-300); }
.fp-parcours .deb-sec { margin-top: 0; }
/* ---------- COP-256 — Paramètres › Recouvrement › Modèles de documents ----------
   Bandeau d'avertissement (émission refusée), cartes par type, aperçu « papier » du texte, historique des versions. */
.banner-warning {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border-radius: var(--r-btn);
  background: var(--warning-soft); color: var(--warning-content); font-size: var(--fs-13-5);
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}
.banner-warning svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.modele-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.modele-lignes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.modele-lignes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--base-300); }
.modele-ligne-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.modele-langue { font-weight: 600; min-width: 64px; }
.modele-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .modele-grid { grid-template-columns: minmax(0, 1fr); } }
.modele-apercu-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.modele-papier {
  border: 1px solid var(--base-300); border-radius: 10px; padding: 22px 26px;
  background: var(--paper); color: var(--paper-content); font-size: var(--fs-13-5); line-height: 1.6;
}
.modele-papier p { margin: 0 0 12px; white-space: pre-line; }
.modele-papier p:last-child { margin-bottom: 0; }
.modele-papier[dir="rtl"] { font-family: "Cairo", system-ui, sans-serif; }
.modele-historique { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.modele-historique li { padding: 10px 8px; border-top: 1px solid var(--base-300); border-radius: 6px; }
.modele-historique li.is-current { background: var(--base-200); }
.modele-historique a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: inherit; text-decoration: none; font-weight: 600; margin-bottom: 4px; }
.modele-historique a:hover { color: var(--primary); }
.modele-variables { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr; gap: 4px; font-size: var(--fs-12-5); }
.modele-variables code { font-family: var(--f-mono); font-size: var(--fs-12); background: var(--base-200); padding: 1px 6px; border-radius: 5px; }

/* COP-263: « Dossier d'injonction » - one card per personne with the checklist of its pièces (tokens only). */
.dos-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; padding: 16px; }
.dos-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--base-300); border-radius: var(--r-card); background: var(--base-100); }
.dos-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--base-300); }
.dos-body { flex: 1; padding: 14px 16px; }
.dos-sec { margin: 0 0 8px; font-size: var(--fs-11-5); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); font-weight: 600; }
.dos-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-top: 1px solid var(--base-300); }
.dos-foot .dos-gen { display: contents; }
/* COP-264: the court follow-up stepper (manual statuses), tokens only. */
.stepper { display: flex; flex-wrap: wrap; margin: 6px 0 2px; }
.stepper .step { flex: 1 1 90px; text-align: center; font-size: var(--fs-11-5); font-weight: 600; padding: 7px 4px; border-bottom: 3px solid var(--base-300); color: var(--muted); }
.stepper .step.done { border-color: var(--success); color: var(--success); }
.stepper .step.cur { border-color: var(--primary); color: var(--primary); }
.dos-block { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-btn); background: var(--error-soft); color: var(--error); font-size: var(--fs-12-5); line-height: var(--lh-text-s); }
.dos-block svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.ck { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--base-300); font-size: var(--fs-13); align-items: start; }
.ck:last-child { border-bottom: none; }
.ck .ico { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-11); font-weight: 700; margin-top: 1px; }
.ck.ok .ico { background: var(--success-soft); color: var(--success); }
.ck.ko .ico { background: var(--error-soft); color: var(--error); }
.ck.opt .ico { background: var(--base-200); color: var(--muted); border: 1px solid var(--base-300); }
.ck .d { color: var(--muted); font-size: var(--fs-12); }

/* ===== Inbox WhatsApp (COP-274, en conversations depuis E43 COP-389 — maquette inbox-whatsapp-v2), jetons Medina uniquement ===== */
.ibx-dotbadge {
  position: absolute; top: -5px; inset-inline-end: -5px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
  background: var(--accent); color: var(--on-primary);
  font-size: var(--fs-11); font-weight: 700; font-family: var(--f-mono);
  display: grid; place-items: center; box-shadow: 0 0 0 2px var(--base-200);
}
.ibx-muted { color: var(--muted); }
.ibx-mono { font-family: var(--f-mono); font-size: var(--fs-12-5); font-variant-numeric: tabular-nums; }
.ibx-count { font-family: var(--f-mono); font-size: var(--fs-11); font-weight: 700; border-radius: 99px; padding: 1px 7px; background: var(--base-300); color: var(--muted); }
.ibx-count-alert { background: var(--accent-soft); color: var(--accent); }
.ibx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ibx-head .page-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Popover de la barre du haut */
.ibx-pop-head { padding: 8px 12px; font-size: var(--fs-13); font-weight: 700; border-bottom: 1px solid var(--base-300); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ibx-pop-row { padding: 6px 12px; border-bottom: 1px solid var(--base-300); font-size: var(--fs-12-5); display: flex; flex-direction: column; gap: 1px; color: inherit; text-decoration: none; }
.ibx-pop-row:hover { background: var(--base-200); }
.ibx-pop-l1 { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.ibx-pop-who { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibx-pop-l1 .ibx-mono { flex: none; font-size: var(--fs-11-5); font-weight: 400; }
.ibx-pop-l2 { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibx-pop-pj { display: flex; align-items: center; gap: 5px; }
.ibx-pop-pj svg { width: 13px; height: 13px; flex: none; }
.ibx-pop-foot { padding: 6px 12px; display: flex; justify-content: flex-end; }
/* « Ouvrir l'inbox » = un lien (pas un bouton) avec sa flèche, retournée en RTL (hot 2026-10-30). */
.wa-pop-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12-5); font-weight: 600; color: var(--primary); text-decoration: none; }
.wa-pop-link:hover { text-decoration: underline; }
.wa-pop-link svg { width: 14px; height: 14px; }
[dir="rtl"] .wa-pop-link svg { transform: scaleX(-1); }

.ibx-card { padding: 0; }
.ibx-retention { font-size: var(--fs-12-5); color: var(--muted); display: inline-flex; gap: 6px; align-items: center; margin-inline-start: auto; }
.ibx-retention svg { width: 15px; height: 15px; flex: none; }
.ibx-lnk { color: var(--primary); font-weight: 600; text-decoration: none; cursor: pointer; }

.ibx-selbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--base-300); background: var(--base-200); font-size: var(--fs-13); }
.ibx-selbar.active { background: var(--primary-soft); }
.ibx-selbar label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-weight: 600; }
.ibx-acts-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.ibx-card input[type=checkbox] { accent-color: var(--primary); width: 16px; height: 16px; }

.ibx-top { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; }
.ibx-who { font-weight: 700; }
.ibx-num { color: var(--muted); font-size: var(--fs-12-5); font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.ibx-text { margin-top: 6px; line-height: var(--lh-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ibx-text.ibx-clamp:not(.ibx-open) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ibx-more { background: none; border: none; padding: 0; color: var(--primary); font-weight: 600; font-size: var(--fs-12-5); cursor: pointer; margin-top: 4px; font-family: inherit; }
.ibx-atts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ibx-att { display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--base-300); background: var(--base-200); border-radius: var(--r-btn); padding: 5px 10px; font-size: var(--fs-12-5); cursor: pointer; color: inherit; font-weight: 600; font-family: inherit; }
.ibx-att:hover { border-color: var(--primary); }
.ibx-att svg { width: 15px; height: 15px; flex: none; }
.ibx-att-ns { cursor: default; border-style: dashed; background: var(--warning-soft); color: var(--warning-content); }
.ibx-att-ns:hover { border-color: var(--base-300); }
.ibx-meta { color: var(--muted); font-size: var(--fs-12); margin-top: 8px; display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.ibx-meta > span { display: inline-flex; gap: 5px; align-items: center; }
.ibx-meta svg { width: 14px; height: 14px; flex: none; }
.ibx-act { position: relative; display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
.ibx-act .btn { justify-content: center; }
.ibx-btn-icon { width: 34px; padding: 5px 0; }
.ibx-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 20; background: var(--base-100); border: 1px solid var(--base-300); border-radius: var(--r-card); box-shadow: var(--shadow-lift); padding: 6px; min-width: 230px; display: flex; flex-direction: column; }
.ibx-menu button { display: flex; gap: 9px; align-items: center; background: none; border: none; padding: 9px 10px; border-radius: 8px; font-size: var(--fs-13-5); cursor: pointer; color: inherit; text-align: start; font-weight: 500; font-family: inherit; }
.ibx-menu button:hover { background: var(--base-200); }
.ibx-menu button svg { width: 15px; height: 15px; flex: none; }
.ibx-sub { display: block; font-size: var(--fs-11-5); color: var(--muted); font-weight: 400; }


.ibx-empty { padding: 44px 16px; text-align: center; color: var(--muted); }
.ibx-empty b { display: block; color: var(--base-content); font-size: var(--fs-16); margin-bottom: 6px; }
.ibx-skel { display: none; padding: 16px; flex-direction: column; gap: 14px; }
.ibx-skel.htmx-request { display: flex; }
.ibx-skel i { display: block; height: 54px; border-radius: var(--r-btn); background: linear-gradient(90deg, var(--base-200), var(--base-300), var(--base-200)); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .ibx-skel i { animation: ibx-sh 1.2s linear infinite; } @keyframes ibx-sh { to { background-position: -200% 0; } } }
.ibx-src { border: 1px solid var(--base-300); border-radius: var(--r-btn); padding: 9px 11px; font-size: var(--fs-13); background: var(--base-200); line-height: var(--lh-text-s); }
.ibx-src-t { font-size: var(--fs-11-5); color: var(--muted); font-family: var(--f-mono); margin-bottom: 3px; }
.ibx-check { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid var(--base-300); border-radius: var(--r-btn); cursor: pointer; font-size: var(--fs-13-5); line-height: var(--lh-cell); }
.ibx-check.on { border-color: var(--primary); background: var(--primary-soft); }
.ibx-check .muted { color: var(--muted); font-size: var(--fs-12-5); }
.ibx-card .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Inbox WhatsApp v2 — conversations (proposition, à ajouter au bloc Inbox de medina.css ; jetons Medina uniquement) =====
   Liste = une ligne par conversation (copro + numéro normalisé). La conversation s'ouvre dans un tiroir large
   (`fragments/drawer :: shellOfCls(…, 'ibx-drawer', …)`) : bandeau d'état, fil qui défile (ouvert sur le dernier
   message), réponse figée en pied. La réclamation bascule dans le MÊME tiroir (volet), jamais un second tiroir. */
.ibx-conv { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; align-items: start; cursor: pointer; border-bottom: 1px solid var(--base-300); }
.ibx-conv:last-of-type { border-bottom: none; }
.ibx-conv:hover, .ibx-conv.open { background: var(--base-200); }
.ibx-conv.ibx-unread { background-image: linear-gradient(var(--primary-soft), var(--primary-soft)); background-position: left; background-size: 4px 100%; background-repeat: no-repeat; }
[dir=rtl] .ibx-conv.ibx-unread { background-position: right; }
.ibx-conv.ibx-sel { background-color: var(--primary-soft); }
.ibx-last { margin-top: 5px; color: var(--muted); display: flex; gap: 6px; align-items: center; min-width: 0; }
.ibx-last .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ibx-last svg { width: 14px; height: 14px; flex: none; }
.ibx-last.unread { color: var(--base-content); font-weight: 600; }
[dir=rtl] .ibx-open-ico svg { transform: scaleX(-1); }

/* Le tiroir de conversation */
.ibx-drawer { width: min(640px, 100%); }
.ibx-drawer .drawer-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ibx-state { display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; padding: 10px 24px; border-bottom: 1px solid var(--base-300); font-size: var(--fs-12-5); color: var(--muted); }
.ibx-state .sp { flex: 1; }
.ibx-fil { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 16px; background: var(--base-200); }
.ibx-day { align-self: center; font-size: var(--fs-11-5); font-weight: 600; color: var(--muted); background: var(--base-100); border: 1px solid var(--base-300); border-radius: 99px; padding: 2px 10px; margin: 8px 0 2px; }
.ibx-line { display: flex; gap: 8px; align-items: flex-start; }
.ibx-line.out { justify-content: flex-end; }
.ibx-line > input[type=checkbox], .ibx-line > .ibx-nocheck { flex: none; width: 16px; margin-top: 12px; accent-color: var(--primary); }
.ibx-bul { max-width: 82%; min-width: 0; padding: 9px 12px; border-radius: var(--r-card); border: 1px solid var(--base-300); background: var(--base-100); }
.ibx-line.in .ibx-bul { border-start-start-radius: 4px; }
.ibx-line.out .ibx-bul { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 25%, transparent); border-start-end-radius: 4px; }
.ibx-line.ibx-sel .ibx-bul { outline: 2px solid var(--primary); outline-offset: 1px; }
.ibx-line.ibx-done .ibx-bul { opacity: .85; }
.ibx-bul .ibx-text { margin-top: 0; }
.ibx-prefix { color: var(--muted); }
.ibx-bul-foot { display: flex; gap: 6px 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; font-size: var(--fs-11-5); color: var(--muted); }
.ibx-bul-foot > span { display: inline-flex; gap: 4px; align-items: center; }
.ibx-bul-foot svg { width: 13px; height: 13px; flex: none; }
.ibx-bul-foot .ok { color: var(--primary); }
.ibx-bul-foot .ko { color: var(--error); font-weight: 600; }
.ibx-line .ibx-act { flex: none; margin-top: 4px; }

/* Pièces lues dans le fil */
.ibx-media { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ibx-media:first-child { margin-top: 0; }
.ibx-thumb { width: 220px; max-width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-btn); border: 1px solid var(--base-300); background: var(--base-200); color: var(--muted); display: grid; place-items: center; cursor: zoom-in; padding: 0; font-family: inherit; }
.ibx-thumb svg { width: 28px; height: 28px; }
.ibx-thumb.video { width: 280px; aspect-ratio: 16 / 9; cursor: pointer; }
.ibx-thumb.video .play { width: 42px; height: 42px; border-radius: 50%; background: var(--base-100); color: var(--primary); display: grid; place-items: center; box-shadow: var(--shadow-soft); }
.ibx-thumb.video .play svg { width: 20px; height: 20px; }
.ibx-thumb.sticker { width: 96px; aspect-ratio: 1; border: none; background: none; cursor: default; }
.ibx-dur { font-size: var(--fs-11-5); color: var(--muted); }
.ibx-audio { width: 280px; max-width: 100%; height: 36px; }
.ibx-mini { display: flex; gap: 10px; align-items: center; border: 1px solid var(--base-300); border-radius: var(--r-btn); background: var(--base-200); padding: 8px 10px; font-size: var(--fs-13); max-width: 320px; }
.ibx-mini svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.ibx-mini b { display: block; }
.ibx-react { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-12); color: var(--muted); }

/* Événement du fil (réclamation créée…) */
.ibx-evt { align-self: center; display: inline-flex; gap: 6px 8px; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 100%; font-size: var(--fs-12); color: var(--muted); background: var(--base-100); border: 1px dashed var(--base-300); border-radius: 99px; padding: 4px 12px; }
.ibx-evt svg { width: 14px; height: 14px; flex: none; }

/* Sélection dans le fil (barre collée en bas du fil) + réponse en pied */
.ibx-fil .ibx-selbar { position: sticky; bottom: 0; border: 1px solid var(--base-300); border-radius: var(--r-btn); margin-top: 6px; box-shadow: var(--shadow-soft); }
.ibx-drawer .drawer-foot { flex-wrap: wrap; }
.drawer-foot.ibx-reply { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 20px; }
.ibx-reply .input { width: 100%; min-height: 56px; resize: vertical; font-family: inherit; line-height: var(--lh-text); }
.ibx-reply-foot { display: flex; gap: 8px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: var(--fs-12); color: var(--muted); }
.ibx-reply-foot > span { display: inline-flex; gap: 5px; align-items: center; }
.ibx-reply-foot svg { width: 14px; height: 14px; flex: none; }
.drawer-foot.ibx-closed { justify-content: stretch; padding: 12px 20px; }
.drawer-foot.ibx-closed .banner-info { flex: 1; }
@media (max-width: 760px) {
  .ibx-conv { grid-template-columns: 22px minmax(0, 1fr); }
  .ibx-conv .ibx-act { grid-column: 2; justify-content: flex-start; }
  .ibx-fil { padding-inline: 12px; }
  .ibx-bul { max-width: 100%; }
}
/* Reports de l'app (E43, COP-389) : la vraie vignette / vidéo du fil et la modale de pièce, jetons seuls. */
.ibx-conv-main { min-width: 0; }
.ibx-thumb > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
img.ibx-thumb.sticker { object-fit: contain; }
.ibx-video { width: 280px; max-width: 100%; border-radius: var(--r-btn); border: 1px solid var(--base-300); background: var(--base-200); }
.ibx-modal-body { max-height: 78vh; overflow: auto; align-items: center; }
.ibx-modal-img { max-width: 100%; height: auto; }
/* ---------- E33 / COP-290 — Inscriptions des résidents : carte de la collecte ----------
   Identique à .specs/maquettes/inscription-residents-v1.html (vue Syndic). Jetons uniquement. */
.ins-page { display: flex; flex-direction: column; gap: 16px; }
.ins-sub { max-width: none; line-height: var(--lh-text); }
.ins-empty-text { max-width: 60ch; }
.ins-muted { color: var(--muted); }
.ins-camp { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ins-camp-top { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; }
.ins-ttl { font-weight: 700; font-size: var(--fs-15); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ins-ttl svg { width: 15px; height: 15px; }
.ins-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.ins-acts .btn { padding: 5px 10px; gap: 6px; }
.ins-acts .btn svg { width: 15px; height: 15px; }
.ins-acts .btn:disabled { opacity: .5; cursor: not-allowed; }
.ins-inline { display: inline; }
.ins-code { font-family: var(--f-mono); font-weight: 700; font-size: var(--fs-13); background: var(--base-200); border: 1px solid var(--base-300); border-radius: 8px; padding: 3px 8px; white-space: nowrap; }
.ins-ref { font-family: var(--f-mono); font-size: var(--fs-12-5); white-space: nowrap; }
.ins-note { display: flex; gap: 9px; align-items: flex-start; background: var(--warning-soft); color: var(--warning-content); border-radius: var(--r-btn); padding: 10px 12px; font-size: var(--fs-13); line-height: var(--lh-text-s); }
.ins-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.ins-prog { display: flex; flex-direction: column; gap: 6px; }
.ins-prog-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ins-prog-bar { height: 10px; border-radius: 99px; background: var(--base-300); overflow: hidden; display: flex; }
.ins-prog-bar i { display: block; height: 100%; }
.ins-prog-bar .p1, .ins-sw.p1 { background: var(--primary); }
.ins-prog-bar .p2, .ins-sw.p2 { background: color-mix(in srgb, var(--primary) 55%, transparent); }
.ins-prog-bar .p2 { border-inline-start: 1px solid var(--base-100); }
.ins-sw.p0 { background: var(--base-300); }
.ins-prog-leg { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: var(--fs-12-5); color: var(--muted); }
.ins-prog-leg > span { display: inline-flex; gap: 6px; align-items: center; }
.ins-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ins-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ins-kpi { border: 1px solid var(--base-300); border-radius: var(--r-btn); padding: 10px 12px; background: var(--base-100); }
.ins-kpi .v.alert { color: var(--accent); }
.ins-drawer-form { display: contents; }
.ins-lbl { font-size: var(--fs-12-5); font-weight: 600; color: var(--muted); }
.ins-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ins-modal-text { margin: 0; line-height: var(--lh-text); font-size: var(--fs-13-5); }
.ins-msgbox { border: 1px solid var(--base-300); border-radius: var(--r-btn); padding: 10px 12px; background: var(--base-200); font-size: var(--fs-13); line-height: var(--lh-text); white-space: pre-wrap; unicode-bidi: plaintext; overflow-wrap: anywhere; max-height: 50vh; overflow: auto; }
/* ---------- E33 / COP-293 — Inscriptions : file « À valider », Traitées, Lots sans contact, tiroir, modales ----------
   Identique à .specs/maquettes/inscription-residents-v1.html (vue Syndic). Jetons uniquement. */
.ins-list { padding: 0; overflow: visible; }
.ins-tabs .tab-bar { margin-bottom: 0; padding: 0 8px; }
.ins-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--base-300); }
.ins-tools .input { flex: 1 1 220px; max-width: 320px; }
.ins-tools-note { font-size: var(--fs-12-5); color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.ins-tools-note svg { width: 14px; height: 14px; flex: none; }
.ins-grow { flex: 1; font-size: var(--fs-13); }
.ins-b-al { background: var(--accent-soft); color: var(--accent); }
.ins-lotref { font-family: var(--f-mono); font-size: var(--fs-14); font-weight: 700; white-space: nowrap; }
.ins-lotref-lg { font-size: var(--fs-15); }
.ins-decl { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--base-300); align-items: start; cursor: pointer; }
.ins-decl:hover { background: var(--base-200); }
.ins-decl:last-child, .ins-trow:last-child { border-bottom: none; }
.ins-d-lot .s { font-size: var(--fs-12); color: var(--muted); margin-top: 2px; }
.ins-d-lot .badge { margin-top: 6px; }
.ins-d-main, .ins-t-main { min-width: 0; }
.ins-d-name { font-weight: 700; font-size: var(--fs-15); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ins-d-line { font-size: var(--fs-12-5); color: var(--muted); margin-top: 4px; display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; }
.ins-d-line > span { display: inline-flex; gap: 5px; align-items: center; }
.ins-d-line b { color: var(--base-content); }
.ins-d-line svg { width: 14px; height: 14px; flex: none; }
.ins-d-alert { margin-top: 8px; font-size: var(--fs-12-5); display: flex; gap: 6px; align-items: center; color: var(--accent); font-weight: 600; }
.ins-d-alert svg { width: 14px; height: 14px; flex: none; }
.ins-d-act { display: flex; gap: 8px; align-items: center; position: relative; }
.ins-btn-icon { width: 34px; padding: 5px 0; justify-content: center; }
.ins-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 20; background: var(--base-100); border: 1px solid var(--base-300); border-radius: var(--r-card); box-shadow: var(--shadow-lift); padding: 6px; min-width: 230px; display: flex; flex-direction: column; }
.ins-menu form { display: contents; }
.ins-menu button { display: flex; gap: 9px; align-items: center; background: none; border: none; padding: 9px 10px; border-radius: 8px; font-size: var(--fs-13-5); cursor: pointer; color: inherit; text-align: start; font-weight: 500; font-family: inherit; }
.ins-menu button:hover { background: var(--base-200); }
.ins-menu button svg { width: 15px; height: 15px; flex: none; }
.ins-menu .ins-menu-danger { color: var(--error); }
.ins-trow { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--base-300); align-items: center; }
.ins-t-name { font-weight: 600; }
.ins-t-name .ins-muted { font-weight: 500; }
@media (max-width: 760px) {
  .ins-decl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ins-d-act { justify-content: flex-start; }
  .ins-trow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
.ins-lotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ins-lotgrid > div { padding: 9px 16px; border-bottom: 1px solid var(--base-300); display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-13); min-width: 0; }
.ins-lotgrid .ins-lotref { font-size: var(--fs-12-5); font-weight: 500; }
.ins-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-drawer { width: min(560px, 100%); }
.ins-detail { display: contents; }
.ins-modal-body { display: flex; flex-direction: column; gap: 12px; }
.ins-check { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid var(--base-300); border-radius: var(--r-btn); cursor: pointer; font-size: var(--fs-13-5); line-height: var(--lh-cell); }
.ins-check.on { border-color: var(--primary); background: var(--primary-soft); }
.ins-check .ins-muted { font-size: var(--fs-12-5); }
.ins-check input, .ins-cmp-row input { accent-color: var(--primary); width: 16px; height: 16px; margin: 2px 0 0; }
.ins-note-al { display: flex; gap: 9px; align-items: flex-start; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-btn); padding: 10px 12px; font-size: var(--fs-13); line-height: var(--lh-text-s); }
.ins-note-al svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.ins-cmp { border: 1px solid var(--base-300); border-radius: var(--r-card); overflow: hidden; }
.ins-cmp-row { display: grid; grid-template-columns: 28px 110px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--base-300); align-items: start; font-size: var(--fs-13); cursor: pointer; }
.ins-cmp-row:last-child { border-bottom: none; }
.ins-cmp-row.head { background: var(--base-200); font-size: var(--fs-12); font-weight: 700; color: var(--muted); padding: 8px 12px; cursor: default; }
.ins-cmp-row .k { font-weight: 600; color: var(--muted); }
.ins-cmp-row .new { font-weight: 600; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ins-cmp-row.off .new { color: var(--muted); font-weight: 500; text-decoration: line-through; }
@media (max-width: 560px) {
  .ins-cmp-row { grid-template-columns: 28px minmax(0, 1fr); }
  .ins-cmp-row .k, .ins-cmp-row .old, .ins-cmp-row .new { grid-column: 2; }
  .ins-cmp-row.head { display: none; }
}
.ins-sp { flex: 1; }
.ins-trace { font-size: var(--fs-12-5); line-height: var(--lh-text); }
.ins-btn-danger-solid { background: var(--error); border-color: var(--error); color: var(--on-primary); }
.ins-btn-danger-solid:disabled { opacity: .5; cursor: not-allowed; }
.ins-drawer .drawer-title { font-weight: 700; font-size: var(--fs-17); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Menu sans défilement (COP-309) : on resserre par paliers progressifs selon la hauteur de la
   fenêtre (lignes 38 → 34 → 30 → 26 px), jamais d'ascenseur ni de chevauchement du pied. */
@media (max-height: 830px) {
  .nav { gap: 3px; }
  .nav-item { padding-block: 9px; }
  .nav-label { margin-block: 12px 4px; }
}
@media (max-height: 740px) {
  .nav { gap: 1px; }
  .nav-item { padding-block: 7px; }
  .nav-label { margin-block: 8px 2px; }
}
@media (max-height: 640px) {
  .nav-item { padding-block: 4px; font-size: var(--fs-13-5); }
  .nav-label { margin-block: 5px 1px; padding-block: 2px; }
  .brand-sub { display: none; }
}
@media (max-height: 560px) {
  /* Très basse fenêtre : les titres de section deviennent de simples filets. */
  .app-sidebar:not(.rail) .nav-label { font-size: 0; line-height: 0; padding: 0; height: 1px; margin: 5px 8px 3px; background: var(--base-300); }
}

/* ---------- Paiements v3 — Vue consolidée (COP-313) : graphiques SVG serveur, jetons existants seulement ---------- */
.pc-kpis { margin-bottom: 16px; }
.pc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pc-grid > .full { grid-column: 1 / -1; }
@media (max-width: 900px) { .pc-grid { grid-template-columns: minmax(0, 1fr); } }
.pc-grid .tbl-wrap { overflow-x: auto; }
.pc-chart { padding: 6px 12px 4px; direction: ltr; }
.pc-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.pc-chart .grid { stroke: var(--base-300); stroke-width: 1; }
.pc-chart .axis { fill: var(--muted); font-size: var(--fs-11); font-family: var(--f-ui); font-variant-numeric: tabular-nums; }
.pc-chart .dlabel { fill: var(--base-content); font-size: var(--fs-11); font-weight: 700; font-family: var(--f-ui); font-variant-numeric: tabular-nums; }
.pc-chart .hit { fill: transparent; cursor: default; }
.pc-chart .hit:hover { fill: var(--base-200); }
.pc-chart .seg { stroke: var(--base-100); stroke-width: 2; }
.pc-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pc-chart .pc-l-app { stroke: var(--muted-2); }
.pc-chart .pc-l-enc { stroke: var(--primary); }
.pc-chart .pc-dot { stroke: var(--base-100); stroke-width: 2; }
.pc-chart .pc-dot-app { fill: var(--muted-2); }
.pc-chart .pc-dot-enc { fill: var(--primary); }
.pc-chart .bar-low { fill: var(--age1); }
.pc-chart .bar-ok { fill: var(--primary); }
.pc-chart svg .pc-vir { fill: var(--primary); }
.pc-chart svg .pc-esp { fill: var(--age2); }
.pc-chart svg .pc-rep { fill: url(#pc-hatch); }
.pc-hatch-bg { fill: var(--base-300); }
.pc-hatch-fg { fill: var(--age4); }
.pc-lg { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-12); color: var(--muted); padding: 4px 16px 12px; align-items: center; }
.pc-lg > span { display: inline-flex; gap: 6px; align-items: center; }
.pc-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pc-sw.pc-vir { background: var(--primary); }
.pc-sw.pc-esp { background: var(--age2); }
.pc-sw.pc-rep { background: repeating-linear-gradient(135deg, var(--age4) 0 4px, var(--base-300) 4px 7px); }
.pc-sw-low { background: var(--age1); }
.pc-ln { width: 16px; height: 0; border-top: 2px solid; display: inline-block; }
.pc-ln-enc { border-color: var(--primary); }
.pc-ln-app { border-color: var(--muted-2); border-top-style: dashed; }
.pc-hbars { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.pc-hb-row { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-13); }
.pc-hb-row.pc-hb-taux { grid-template-columns: minmax(0, 1fr) auto; }
.pc-hb-track { height: 10px; background: var(--base-200); border-radius: 99px; overflow: hidden; }
.pc-hb-fill { height: 100%; background: var(--primary); border-radius: 99px; }
.pc-hb-fill.pc-low { background: var(--age1); }
.pc-hb-val { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-hb-val small { color: var(--muted); font-weight: 500; margin-inline-start: 6px; }
.pc-col-taux { min-width: 180px; }
.pc-tip { position: fixed; z-index: 70; pointer-events: none; background: var(--base-100); color: var(--base-content); border: 1px solid var(--base-300); border-radius: 10px; box-shadow: var(--shadow-lift); padding: 8px 10px; font-size: var(--fs-12-5); line-height: var(--lh-text); min-width: 170px; font-variant-numeric: tabular-nums; }
.pc-tip b { display: block; margin-bottom: 2px; }
.pc-tip .kv { display: flex; justify-content: space-between; gap: 14px; }
@media (max-width: 560px) { .pc-hb-row { grid-template-columns: minmax(0, 1fr) auto; } .pc-hb-row .pc-hb-track { grid-column: 1 / -1; order: 3; } }

/* ---------- « Impayés & relances » = maquette impayes-v4 (portée : classe page-impayes sur <main>) ----------
   Cartes bordées, titres 700, valeur de KPI colorée (alerte / danger), tri discret. Aucune taille de texte ici :
   l'échelle de la base s'applique (COP-335). */
.page-impayes .card { border: 1px solid var(--base-300); border-radius: 17.6px; }
.page-impayes .card-title { font-weight: 700; letter-spacing: 0; }
.page-impayes .table-medina thead th.th-sort.is-active .th-inner,
.page-impayes .table-medina thead th.th-sort.is-active .th-sort-ico { color: var(--muted); }
/* Étiquette de suivi longue (« Abandonné : hors recouvrement ») : une seule ligne, comme la maquette (COP-317). */
.page-impayes .table-medina td .badge { white-space: nowrap; }
/* Mobile : courbe et barres gardent une largeur lisible (libellés de mois) et défilent au lieu de s'écraser. */
@media (max-width: 560px) {
  .page-impayes .ov-chart { overflow-x: auto; padding-inline-start: 34px; }
  .page-impayes .ov-chart svg[viewBox$=" 200"] { min-width: 600px; }
}
/* Listes Impayés : boutons de ligne comme la maquette. */
.page-impayes .table-medina td .btn { padding: 5px 10px; }
/* En-têtes de colonnes (COP-317) : une ligne, flèche de tri (↕ ▲ ▼) collée au libellé — jamais poussée à l'autre bout. */
.page-impayes .table-medina thead th { white-space: nowrap; }
.page-impayes .table-medina thead th.th-sort .th-inner,
.page-impayes .table-medina thead th.th-sort.num .th-inner { white-space: nowrap; flex-direction: row; gap: 3px; }
/* Ligne de total (COP-317) : mêmes alignements que le corps du tableau ; le libellé est un compte. */
.page-impayes .table-medina tfoot td.num { text-align: end; }
.page-impayes .table-medina tfoot .row-sub { font-weight: 400; margin-top: 2px; }
/* États vides des listes (maquette : carte simple, titre en gras, texte discret, bouton sous le texte). */
.page-impayes .imp-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
.page-impayes .imp-empty b { display: block; color: var(--base-content); margin-bottom: 4px; }
.imp-empty b { font-size: var(--fs-title); }
.page-impayes .imp-empty p { margin: 0; line-height: var(--lh-text); }
.page-impayes .imp-empty .btn { margin-top: 10px; }
.page-impayes .imp-empty .imp-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.page-impayes .imp-empty .imp-empty-actions .btn { margin-top: 0; }
/* Vue d'ensemble (COP-317) : filet sous l'en-tête des cartes, marges 14 / 16 px comme la maquette ; titres de KPI neutres. */
.page-impayes .ov-sec .card:not(.kpi):not(.next-action):not(.imp-empty):not(.ov-stock) { padding: 0; }
.page-impayes .ov-sec .card:not(.kpi):not(.next-action):not(.imp-empty):not(.ov-stock) > .card-head { padding: 14px 16px; margin-bottom: 0; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--base-300); }
.page-impayes .ov-sec .card:not(.kpi):not(.next-action):not(.imp-empty):not(.ov-stock) > .card-body { padding: 14px 16px; }
/* Nom + lots d'une ligne : le nom (arabe compris) garde son interligne, les lots passent dessous avec un vrai espacement. */
.page-impayes .table-medina td .row-sub:has(.lot-tag) { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.page-impayes .table-medina td .row-sub .lot-tag { margin: 0 !important; display: inline-block; }

/* Zone dépliée d'un propriétaire / lot (maquette impayes-v4) : tailles = --fs-mini de la base. */
.page-impayes .deb-detail { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
/* Relances de la ligne dépliée (COP-317) : pastille + date · nature canal · statut, « Dû à l'envoi » dessous, paiement ensuite. */
.page-impayes .deb-timeline { display: flex; flex-direction: column; gap: 8px; }
.page-impayes .deb-tl { display: flex; gap: 9px; align-items: flex-start; padding: 0; border: 0; margin: 0; }
.page-impayes .deb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); margin-top: 5px; flex: none; }
.page-impayes .deb-tl.pay .deb-dot { background: var(--success); }
/* COP-374 (maquette impayes-debiteurs-v5) : canal de la dernière relance, icône discrète. */
.page-impayes .deb-rel { display: inline-flex; align-items: center; gap: 6px; }
.page-impayes .deb-rel svg { width: 15px; height: 15px; color: var(--muted); }
.page-impayes .deb-arel { cursor: help; gap: 4px; }
.page-impayes .deb-rel .deb-arel svg { width: 13px; height: 13px; color: inherit; }

/* Bulle d'information stylée ([data-bulle], app.js) : carte flottante aux jetons du thème, jamais l'info-bulle du système. */
.bulle {
  position: fixed; z-index: 1000; max-width: 300px; padding: 8px 11px;
  background: var(--base-100); color: var(--base-content);
  border: 1px solid var(--base-300); border-radius: 10px; box-shadow: var(--shadow-lift);
  font-size: var(--fs-12-5); line-height: var(--lh-text); font-weight: 500;
  pointer-events: none;
}
/* Hot 2026-10-30 : un volet de tiroir montré / caché par x-show (qui écrase un display:contents) — corps qui défile, pied visible. */
.drawer-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Un volet vide ou masqué ne prend jamais de place (le fil de l'inbox ne se partage pas la hauteur avec les volets cachés). */
.drawer-pane:empty, .drawer-pane[hidden] { display: none; }
/* COP-377 / hot 2026-10-30 : tiroir « Générer des lettres » aligné sur Relancer — destinataires retirables en table
   (en-tête figé), puis la liste des PDF du ZIP dans le résultat. */
.deb-lettres { max-height: 320px; overflow: auto; border: 1px solid var(--base-300); border-radius: var(--r-btn); }
.deb-lettres .table-medina { margin: 0; }
.deb-lettres thead th { position: sticky; top: 0; z-index: 1; background: var(--base-200); }
.deb-lettres td { padding-block: 6px; }
.deb-lettre-x { width: 36px; text-align: end; }
.deb-lettre-x .modal-close { width: 26px; height: 26px; }
/* Hot 2026-10-31 : « Générer des lettres », un tiroir plus compact — moins d'air sous l'en-tête, le commentaire
   collé à « Destinataires », des lignes de liste plus basses (la taille du texte reste celle du socle). */
.lettres-drawer .drawer-body { padding-top: 14px; gap: 10px; }
.lettres-dest { gap: 2px; }
.lettres-dest .field-hint { margin: 0 0 4px; }
.deb-lettres .table-medina th { padding-block: 5px; }
.deb-lettres .table-medina td { padding-block: 3px; }
.lettres-drawer .deb-lettre-x .modal-close { width: 22px; height: 22px; }
.deb-fichiers { list-style: none; margin: 0; padding: 4px 0; max-height: 220px; overflow: auto;
  border: 1px solid var(--base-300); border-radius: var(--r-btn); }
.deb-fichiers li { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: var(--fs-12-5); }
.deb-fichiers li + li { border-top: 1px solid var(--base-200); }
.deb-fichiers svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.page-impayes .deb-reperes .row-sub { line-height: var(--lh-cell); }
@media (max-width: 640px) { .page-impayes .deb-detail { grid-template-columns: minmax(0, 1fr); } .page-impayes .table-medina td .badge { white-space: normal; } }
.page-impayes .deb-mini td { padding: 4px 8px; }
.page-impayes .deb-mini td.tnum { white-space: nowrap; }

.page-impayes .table-medina td.num .row-sub, .page-impayes .table-medina tfoot .row-sub { white-space: nowrap; }

/* ---------- Impayés : métriques de la maquette impayes-v4 (COP-317, revue des styles calculés maquette vs app) ----------
   Interligne normal hors tableaux (la maquette n'en fixe aucun), boutons sans ombre, contrôles des barres de filtres en
   7 × 10 px. Polices et tailles = la règle commune (COP-335 : fin de l'exception mono / Tajawal de COP-317). */
.page-impayes {
  --r-btn: 11.2px;
  --r-card: 17.6px;
  line-height: var(--lh-normal);
}
.page-impayes h1, .page-impayes h2, .page-impayes h3, .page-impayes [role="tab"], .page-impayes .card-title, .page-impayes .card-sub,
.page-impayes .kpi-label, .page-impayes .kpi-foot, .page-impayes .kpi-value { line-height: var(--lh-normal); }
.page-impayes .amount-due { font-weight: 700; color: var(--error); white-space: nowrap; }
/* « dont N DH prescrits » sous le reste dû : il se replie au lieu d'élargir la colonne (maquette : 100 px). */
.page-impayes .table-medina tbody td.num .row-sub, .page-impayes .table-medina tfoot tr td.num .row-sub { white-space: normal; }
/* Tableau : noms sans resserrement (cellules, étiquettes de lot, badges = la base). */
.page-impayes .row-name { letter-spacing: normal; }
.page-impayes .badge-neutral { border: 1px solid var(--base-300); }
/* Boutons : aplat sans ombre, espacement 6 px ; petits boutons 5 × 10 px / 12,5 px. */
.page-impayes .btn { box-shadow: none; gap: 6px; padding: 8px 13px; }
/* Bouton fantôme = lien d'action sarcelle (maquette .btn-ghost), pas gris ; pastille des bandeaux 9 px. */
.page-impayes .btn-ghost { color: var(--primary); background: transparent; border-color: transparent; }
.page-impayes .ov-dot { width: 9px; height: 9px; }
.page-impayes .btn-sm, .page-impayes .table-medina td .btn { padding: 5px 10px; }
/* Champs et listes des barres de filtres : 7 × 10 px, largeur selon le contenu (la maquette ne les borne pas). */
.page-impayes .input, .page-impayes .select, .page-impayes .lp-input { padding: 7px 10px; border-radius: var(--r-btn); line-height: var(--lh-normal); }
.page-impayes .table-medina td .row-sub:has(.lot-tag) { margin-top: 3px; gap: 3px; }

/* ---------- « Paiements » = maquette paiements-v3 (portée : classe page-paiements sur <main>, revue des styles calculés) ----------
   Mêmes causes qu'Impayés : base 14 px et interligne normal (la maquette n'en fixe aucun), cartes bordées dont l'en-tête
   porte la marge (14 × 16 px) et un filet, titres 700, boutons sans ombre, contrôles de filtre à 34 px. Polices et tailles
   = la règle commune de la base (COP-335 : montants en --f-ui, .ref en mono, aucune taille de texte ici). */
.page-paiements { --r-btn: 11.2px; --r-card: 17.6px; line-height: var(--lh-normal); }
.page-paiements .page-title, .page-paiements .tab, .page-paiements .card-title, .page-paiements .card-sub, .page-paiements .text-muted,
.page-paiements .kpi-label, .page-paiements .kpi-value, .page-paiements .btn, .page-paiements .tab-count,
.page-paiements .rep-legend, .page-paiements .pc-lg, .page-paiements .pc-hb-row,
.page-paiements .pc-chart, .page-paiements .pay-head-sep { line-height: var(--lh-normal); }
.page-paiements .screen-intro { line-height: var(--lh-text); }
/* Cartes : bordées ; celles à en-tête n'ont pas de marge, l'en-tête 14 × 16 px porte un filet. */
.page-paiements .card:not(.enc-kpi) { border: 1px solid var(--base-300); }
.page-paiements #queue-card, .page-paiements #encaissements-card, .page-paiements .pc-grid > .card { padding: 0; }
.page-paiements .card > .card-head { padding: 14px 16px; margin-bottom: 0; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--base-300); }
.page-paiements .card-title { font-weight: 700; letter-spacing: normal; }
/* File « À valider » : en-tête 12 × 16 px à filet, brouillons en lignes séparées par un filet (pas en tuiles). */
.page-paiements #queue-card > div:first-child { padding: 12px 16px; margin-bottom: 0 !important; border-bottom: 1px solid var(--base-300); }
.page-paiements #queue-card .queue { gap: 0; }
.page-paiements #queue-card .proof { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--base-300); border-radius: 0; background: transparent; }
.page-paiements #queue-card .proof:last-child { border-bottom: 0; }
/* Boutons : aplat sans ombre, 8 × 13 px ; petits 5 × 10 px ; fantôme = lien d'action sarcelle. */
.page-paiements .btn { box-shadow: none; gap: 6px; padding: 8px 13px; }
.page-paiements .btn-sm { padding: 5px 10px; }
.page-paiements .btn-ghost { color: var(--primary); background: transparent; border-color: transparent; }
.page-paiements .btn-ghost:hover { background: var(--base-200); color: var(--primary-2); }
/* Tableaux : montants 700, alignement « r » (cellules, pied, références .ref = la base). */
.page-paiements .table-medina td.r, .page-paiements .table-medina th.r { text-align: end; }
.page-paiements .amt { font-weight: 700; white-space: nowrap; }
.page-paiements .row-name { letter-spacing: normal; }
.page-paiements .row-sub { margin-top: 2px; }
.page-paiements .lot-tag { display: inline-block; margin: 1px 3px 1px 0; }
.page-paiements .badge-neutral { border: 1px solid var(--base-300); }

/* ---------- AG v2 (COP-320, E36) : liste + fiche en quatre étapes — identique à assemblees-v2.html ----------
   Étape = DÉRIVÉE (EtapeAssemblee) ; jetons seuls, aucun hex. Le bloc suit les métriques de la maquette
   (.hero, .steps4, .stepnav, .stp, .chip) : 14 px de base, cartes bordées, 18 px d'écart. */
.page-ag { display: flex; flex-direction: column; gap: 18px; }
.page-ag > * { min-width: 0; }
.page-ag .btn { box-shadow: none; gap: 6px; padding: 8px 13px; }
.page-ag .btn-sm { padding: 5px 10px; }
.page-ag .ag-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.page-ag .ag-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-ag .page-sub { line-height: var(--lh-text); margin: 6px 0 0; }
.page-ag .ag-sub { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.page-ag .ag-sub > span { display: inline-flex; gap: 6px; align-items: center; }
.page-ag .ag-sub svg, .page-ag .ag-banner > svg, .page-ag .ag-btns svg { width: 15px; height: 15px; flex: none; }
.page-ag .ag-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; position: relative; }
.page-ag .ag-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40; min-width: 270px; white-space: normal; }
.page-ag .ag-menu-btn { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: start; }
.page-ag .ag-menu-btn:disabled { opacity: .55; cursor: not-allowed; }
.page-ag .ag-danger, .page-ag .ag-danger svg { color: var(--error); }
.page-ag .ag-why { font-size: var(--fs-11-5); color: var(--muted); padding: 0 11px 6px 37px; line-height: var(--lh-cell); }
.page-ag .tnum { font-variant-numeric: tabular-nums; }
.page-ag .muted { color: var(--muted); }

.ag-verif { font-size: var(--fs-11); font-weight: 700; color: var(--warning-content); background: var(--warning-soft); border-radius: 99px; padding: 1px 7px; white-space: nowrap; }
.page-ag .ag-banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--fs-13); line-height: var(--lh-text-s); padding: 11px 14px; border-radius: var(--r-card); border: 1px solid var(--base-300); background: var(--base-100); }
.page-ag .ag-banner .ag-grow { flex: 1 1 280px; min-width: 0; }
.page-ag .ag-banner-alert { border-color: var(--accent); background: var(--accent-soft); }
.page-ag .ag-banner-alert > svg { color: var(--accent); }
.page-ag .ag-banner-lock { border-color: var(--muted-2); }

/* Liste : prochaine assemblée */
.page-ag .ag-hero { padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; align-items: start; }
@media (max-width: 760px) { .page-ag .ag-hero { grid-template-columns: minmax(0, 1fr); } }
.page-ag .ag-k { font-size: var(--fs-11-5); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); font-weight: 600; }
.page-ag .ag-hero h2 { margin: 6px 0 4px; font-size: var(--fs-20); }
.page-ag .ag-when { font-size: var(--fs-13); color: var(--muted); line-height: 1.6; }
.page-ag .ag-jcount { display: inline-flex; align-items: baseline; gap: 4px; margin-top: 8px; }
.page-ag .ag-jcount small { font-size: var(--fs-13); font-weight: 600; color: var(--muted); }
.page-ag .ag-next { border-inline-start: 4px solid var(--primary); padding: 2px 0 2px 16px; display: flex; flex-direction: column; gap: 8px; }
.page-ag .ag-next-alert { border-color: var(--accent); }
.page-ag .ag-next h3 { margin: 0; font-size: var(--fs-16); }
.page-ag .ag-next p { margin: 0; color: var(--muted); font-size: var(--fs-13); line-height: var(--lh-text); }
.page-ag .ag-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.page-ag .ag-steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.page-ag .ag-s4 { border-top: 4px solid var(--base-300); padding-top: 7px; font-size: var(--fs-12); color: var(--muted); font-weight: 600; line-height: var(--lh-snug); }
.page-ag .ag-s4.done { border-color: var(--success); color: var(--base-content); }
.page-ag .ag-s4.cur { border-color: var(--primary); color: var(--primary-2); }

/* Liste : historique */
.page-ag .ag-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--base-300); flex-wrap: wrap; }
.page-ag .ag-tbl { overflow-x: auto; }
.page-ag .ag-tbl .table-medina thead th, .page-ag .ag-tbl .table-medina tbody td { padding: 10px 12px; }
.page-ag .ag-row { position: relative; cursor: pointer; }
.page-ag .ag-row-name { font-weight: 600; color: inherit; text-decoration: none; }
.page-ag .ag-row-name::after { content: ""; position: absolute; inset: 0; }
.page-ag .ag-row-name:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.page-ag .ag-row-sub { color: var(--muted); font-size: var(--fs-12); margin-top: 2px; }
.page-ag .ag-chev { width: 15px; height: 15px; color: var(--muted-2); }
.page-ag .ag-empty { text-align: center; padding: 22px 12px; }
@media (max-width: 640px) { .page-ag .ag-hide-sm { display: none; } }

/* Fiche : navigation par étapes */
.page-ag .ag-stepnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .page-ag .ag-stepnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-ag .ag-stp { text-align: start; color: inherit; text-decoration: none; background: var(--base-100); border: 1px solid var(--base-300); border-radius: var(--r-btn); padding: 11px 12px; display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.page-ag .ag-stp:hover { border-color: var(--muted-2); }
.page-ag .ag-stp b { display: block; font-size: var(--fs-13-5); }
.page-ag .ag-stp-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-12-5); background: var(--base-200); border: 1px solid var(--base-300); flex: none; }
.page-ag .ag-stp-s { display: block; font-size: var(--fs-12); color: var(--muted); margin-top: 2px; line-height: var(--lh-snug); }
.page-ag .ag-stp.done .ag-stp-n { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.page-ag .ag-stp.late .ag-stp-n { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.page-ag .ag-stp.late .ag-stp-s { color: var(--accent); }
.page-ag .ag-stp[aria-selected="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 -3px 0 var(--primary); }
.page-ag .ag-stp[aria-selected="true"] .ag-stp-n { background: var(--primary); border-color: var(--primary); color: var(--base-100); }
.page-ag .ag-empty-card { padding: 30px 16px; text-align: center; color: var(--muted); line-height: var(--lh-text); }
.page-ag .ag-empty-card b { display: block; color: var(--base-content); font-size: var(--fs-15); margin-bottom: 4px; }
.page-ag .ag-empty-card p { margin: 0; }
.ag-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ag-hint { font-size: var(--fs-12); color: var(--muted); line-height: var(--lh-text-s); margin: 0; }

/* COP-321 (E36) : étape Préparer — ordre du jour typé, calendrier, documents (assemblees-v2.html). */
.page-ag .ag-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
@media (max-width: 960px) { .page-ag .ag-cols { grid-template-columns: minmax(0, 1fr); } }
.page-ag .ag-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.page-ag .ag-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 14px; font-size: var(--fs-13); align-items: baseline; padding: 14px 16px; }
.page-ag .ag-kv .k { color: var(--muted); }
.page-ag .ag-kv .v { font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.page-ag .ag-card-sub { color: var(--muted); font-size: var(--fs-12-5); margin-top: 2px; line-height: var(--lh-text); }
.page-ag .ag-pt { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--base-300); align-items: start; }
.page-ag .ag-pt:last-child { border-bottom: none; }
.page-ag .ag-pt-no { width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-2); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-12-5); }
:root[data-theme="dark"] .page-ag .ag-pt-no { color: var(--primary); }
.page-ag .ag-pt-lib { font-weight: 600; line-height: var(--lh-cell); }
.page-ag .ag-pt-meta { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: var(--fs-12-5); color: var(--muted); }
.page-ag .ag-pt-meta > span { display: inline-flex; gap: 5px; align-items: center; }
.page-ag .ag-pt-meta svg { width: 14px; height: 14px; flex: none; }
.page-ag .ag-pt-meta a { color: var(--primary); font-weight: 600; text-decoration: none; }
.page-ag .ag-pt-acts { display: flex; gap: 2px; }
.page-ag .ag-pt-acts form { margin: 0; }
.page-ag .ag-btn-icon { width: 34px; padding: 5px 0; justify-content: center; }
.page-ag .ag-btn-icon svg { width: 16px; height: 16px; }
.page-ag .ag-suggest { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border: 1px dashed var(--primary); background: var(--primary-soft); border-radius: var(--r-btn); font-size: var(--fs-13); margin: 14px 16px 0; }
.page-ag .ag-suggest .ag-grow { flex: 1 1 260px; line-height: var(--lh-text); }
.page-ag .ag-suggest form { margin: 0; }
.page-ag .ag-doc { display: flex; gap: 10px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--base-300); font-size: var(--fs-13-5); }
.page-ag .ag-doc:last-child { border-bottom: none; }
.page-ag .ag-doc .ag-grow { flex: 1; min-width: 0; }
.page-ag .ag-doc small { display: block; color: var(--muted); font-size: var(--fs-12); margin-top: 2px; line-height: var(--lh-snug); }
.page-ag .ag-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--base-200); flex: none; color: var(--muted); }
.page-ag .ag-ico svg { width: 16px; height: 16px; }
.page-ag .ag-hint-p { font-size: var(--fs-12); color: var(--muted); line-height: var(--lh-text-s); margin: 0; padding: 0 16px 14px; }
.page-ag .ag-card-head .card-title svg { width: 16px; height: 16px; vertical-align: -2px; margin-inline-end: 4px; }

/* COP-322 — Convoquer : trois chiffres, carte d'envoi, suivi par copropriétaire (assemblees-v2.html, tabConvoc). */
.page-ag .ag-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.page-ag .ag-stat { padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.page-ag .ag-stat .l { display: flex; gap: 7px; align-items: center; }
.page-ag .ag-stat .l svg { width: 15px; height: 15px; flex: none; }
.page-ag .ag-stat .f { line-height: var(--lh-cell); }
.page-ag .ag-stat.alert .v { color: var(--accent); }
.page-ag .ag-stat.ok .v { color: var(--success); }
.page-ag .ag-bar { height: 8px; border-radius: 99px; background: var(--base-200); border: 1px solid var(--base-300); overflow: hidden; display: flex; }
.page-ag .ag-bar i { display: block; height: 100%; background: var(--success); }
.page-ag .ag-send { padding: 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.page-ag .ag-send .ag-grow { flex: 1 1 300px; min-width: 0; }
.page-ag .ag-ico-lg { width: 40px; height: 40px; }
.page-ag .ag-row-name-plain { font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.page-ag .ag-conv-modal { margin: 0 0 10px; padding-inline-start: 18px; line-height: 1.6; font-size: var(--fs-14); }

/* COP-323 (E36) — AG v2, étape Séance : présence (segments tactiles), constat, votes. Jetons seuls. */
.page-ag .ag-seg { width: fit-content; max-width: 100%; display: inline-flex; border: 1px solid var(--base-300); border-radius: var(--r-btn); overflow: hidden; }
.page-ag .ag-seg button { border: none; background: var(--base-100); padding: 8px 11px; min-height: 36px; font-size: var(--fs-12-5); font-weight: 600; color: var(--muted); cursor: pointer; }
.page-ag .ag-seg button + button { border-inline-start: 1px solid var(--base-300); }
.page-ag .ag-seg button[aria-pressed="true"].p { background: var(--success-soft); color: var(--success); }
.page-ag .ag-seg button[aria-pressed="true"].r { background: var(--primary-soft); color: var(--primary-2); }
.page-ag .ag-seg button[aria-pressed="true"].a { background: var(--base-300); color: var(--base-content); }
.page-ag .ag-seg button[aria-pressed="true"].ok { background: var(--success); color: var(--on-primary); }
.page-ag .ag-seg button[aria-pressed="true"].ko { background: var(--error); color: var(--on-primary); }
.page-ag .ag-seg button[aria-pressed="true"].aj { background: var(--muted); color: var(--on-primary); }
.page-ag .ag-seg button:disabled { cursor: default; opacity: .75; }
.page-ag .ag-pres-sum { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--base-300); font-size: var(--fs-13); }
.page-ag .ag-pres-sum b { font-variant-numeric: tabular-nums; font-size: var(--fs-15); }
.page-ag .ag-pres-sum .note { color: var(--muted); font-size: var(--fs-12); flex: 1 1 220px; }
.page-ag .ag-pres-scroll { max-height: 420px; overflow: auto; }
.page-ag .ag-pres-form { margin: 0; }
.page-ag .ag-mand { max-width: 220px; }
.page-ag .ag-vote { padding: 14px 16px; border-bottom: 1px solid var(--base-300); display: flex; flex-direction: column; gap: 10px; margin: 0; }
.page-ag .ag-vote:last-of-type { border-bottom: none; }
.page-ag .ag-vote-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.page-ag .ag-vote-head b { flex: 1 1 300px; }
.page-ag .ag-vote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 110px)) minmax(0, 1fr); gap: 10px; align-items: end; }
@media (max-width: 640px) { .page-ag .ag-vote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page-ag .ag-vote-grid .dec { grid-column: 1 / -1; } }
.page-ag .ag-vote-grid label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.page-ag .ag-vote-grid input { font-variant-numeric: tabular-nums; }
.page-ag .ag-vote-grid .dec { display: flex; flex-direction: column; gap: 4px; }
.page-ag .ag-vote-grid .dec > span { font-size: var(--fs-12); font-weight: 600; color: var(--muted); }
.page-ag .ag-vote-check { font-size: var(--fs-12); color: var(--muted); }
.page-ag .ag-vote-check.bad { color: var(--error); }
.page-ag .ag-vote-link { font-size: var(--fs-12); color: var(--muted); display: flex; gap: 6px; align-items: center; }
.page-ag .ag-vote-link svg { width: 12px; height: 12px; flex: none; }
.page-ag .ag-seance-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--base-300); }
.page-ag .ag-seance-foot .note { color: var(--muted); font-size: var(--fs-12-5); margin-inline-end: auto; }

/* COP-324 (E36) — AG v2, étape PV & notification : PV généré, observations, PV signé (assemblees-v2.html). Jetons seuls. */
.page-ag .ag-pvdoc { margin: 16px; border: 1px solid var(--base-300); border-radius: var(--r-btn); background: var(--base-200); padding: 16px 18px; font-size: var(--fs-13); line-height: 1.6; }
.page-ag .ag-pvdoc h4 { margin: 0 0 6px; font-size: var(--fs-14); }
.page-ag .ag-pvdoc ol { margin: 6px 0 0; padding-inline-start: 20px; }
.page-ag .ag-pvdoc li { margin-bottom: 4px; }
.page-ag .ag-obs { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin: 0; }
.page-ag .ag-obs .field { width: 100%; }
.page-ag .ag-drop { margin: 0 16px 16px; border: 1.5px dashed var(--base-300); border-radius: var(--r-btn); padding: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: var(--fs-13); }
.page-ag .ag-drop .ag-grow { flex: 1 1 220px; min-width: 0; }
.page-ag .ag-drop.ok { border-style: solid; border-color: var(--success); background: var(--success-soft); }
.page-ag .ag-drop svg { width: 18px; height: 18px; flex: none; }
.page-ag .ag-drop-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin: 0; }
.page-ag .ag-check { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--fs-13-5); }
.page-ag .ag-late { color: var(--accent); }

/* Fiche : barre période + lots, groupes de paiements, répartition par lots (fiche v4) — jetons seuls */
/* Versements de la fiche : date et montant à 13px, au niveau des badges et étiquettes de lot de la ligne */
.lp-tools .fp-legend { margin-inline-start: auto; }
.fp-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-12); color: var(--muted); }
.fp-legend span { display: inline-flex; gap: 6px; align-items: center; }
.fp-legend .sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--base-300); }
.fp-legend .sw.ok { background: var(--success-soft); } .fp-legend .sw.part { background: var(--warning-soft); border-color: var(--warning); } .fp-legend .sw.ko { background: var(--error-soft); }
.fp-legend .sw.prescrit { background: repeating-linear-gradient(135deg, var(--age4) 0 4px, var(--base-300) 4px 8px); }
.fp-hmsec + .fp-hmsec { border-top: 1px solid var(--base-300); }
.fp-hmtitle { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 14px 16px 6px; font-size: var(--fs-14); }
.fp-hmsum { margin-inline-start: auto; }
table.fp-hm th, table.fp-hm td { padding: 6px 4px; }
table.fp-hm th:first-child, table.fp-hm td:first-child { padding-inline-start: 12px; }
table.fp-hm td.hm { text-align: center; min-width: 46px; }
table.fp-hm td.hm .hm-c { display: flex; align-items: center; justify-content: center; min-height: 32px; border-radius: 7px; font-size: var(--fs-11-5); font-weight: 700; }
table.fp-hm td.hm .hm-c svg { width: 14px; height: 14px; }
table.fp-hm td.hm.ok .hm-c { background: var(--success-soft); color: var(--success); }
table.fp-hm td.hm.part .hm-c { background: var(--warning-soft); color: var(--warning-content); border: 1px solid var(--warning); }
table.fp-hm td.hm.ko .hm-c { background: var(--error-soft); color: var(--error); }
table.fp-hm td.hm.prescrit .hm-c { background: repeating-linear-gradient(135deg, var(--age4) 0 6px, var(--base-300) 6px 11px); color: var(--muted); }
@media (max-width: 640px) { table.fp-hm td.hm { min-width: 38px; } table.fp-hm td.hm .hm-c { font-size: var(--fs-10-5); } }

/* « Taille du texte » du profil (COP-336) : trois paliers posés sur <html> par layout.html. */
html[data-text-size="petit"] { --fs-scale: .9; }
html[data-text-size="grand"] { --fs-scale: 1.15; }

/* ---------- Aide en ligne (E38, COP-342) ----------
   Composants partagés du drawer d'aide, des info-bulles et de l'aide de champ ; valeurs de la maquette
   aide-en-ligne-v1 en jetons (tailles --fs-*, interligne --lh-help, interlettrage --ls-*). Aucun style en ligne
   dans les fragments help/ : classes seules. RTL : propriétés logiques, chevrons miroir. */
.help-panel { background: var(--base-100); border-inline-start: 1px solid var(--base-300); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.help-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; }
.help-head .ttl { flex: 1; min-width: 0; }
.help-head .ttl b { font-size: var(--fs-title); display: block; }
.help-head .ttl span { font-size: var(--fs-sub); color: var(--muted); }
.help-search { margin: 0 16px 8px; display: flex; align-items: center; gap: 9px; padding: 8px 11px; background: var(--base-200); border: 1px solid var(--base-300); border-radius: var(--r-btn); color: var(--muted-2); }
.help-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); background: var(--base-100); }
.help-search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: var(--fs-13-5); }
.help-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 16px 16px; }
.help-intro { font-size: var(--fs-13-5); line-height: var(--lh-help); color: var(--base-content); margin: 6px 0 12px; }
.help-sec { font-size: var(--fs-th); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--muted); margin: 14px 0 6px; }
[dir="rtl"] .help-sec { text-transform: none; }
.help-task { border: 1px solid var(--base-300); border-radius: .85rem; margin-bottom: 8px; background: var(--base-100); overflow: hidden; }
.help-task.flash { animation: help-flash 1.4s ease; }
@keyframes help-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--primary-soft); border-color: var(--primary); } 100% { box-shadow: none; } }
.help-task > button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 0; background: none; cursor: pointer; text-align: start; font-weight: 600; font-size: var(--fs-base); color: inherit; }
.help-task > button:hover { background: var(--base-200); }
.help-task .n { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-2); font: 700 var(--fs-th) var(--f-mono); display: grid; place-items: center; flex: none; }
.help-task .panel { display: none; padding-block: 0 12px; padding-inline: 44px 12px; font-size: var(--fs-13-5); line-height: var(--lh-help); }
.help-task.open .panel { display: block; }
.help-task .panel p { margin: 0 0 8px; }
.help-task ol { margin: 0 0 8px; padding-inline-start: 18px; }
.help-task li { margin-bottom: 4px; }
.help-task b.k { font-weight: 700; }
.help-note { display: flex; gap: 8px; padding: 8px 10px; border-radius: .7rem; font-size: var(--fs-mini); line-height: var(--lh-text); margin-top: 6px; }
.help-note svg { margin-top: 1px; width: 15px; height: 15px; flex: none; }
.help-note.info { background: var(--info-soft); }
.help-note.info svg { color: var(--info); }
.help-note.warn { background: var(--warning-soft); color: var(--base-content); }
.help-note.warn svg { color: var(--warning-content); }
.help-empty { text-align: center; padding: 26px 10px; color: var(--muted); }
.help-empty b { display: block; color: var(--base-content); margin-bottom: 4px; }
.help-foot { border-top: 1px solid var(--base-300); padding: 10px 16px; display: flex; flex-direction: column; gap: 7px; }
.help-foot .hint { font-size: var(--fs-sub); color: var(--muted); display: flex; gap: 6px; align-items: center; }
.help-link { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--fs-cell); color: var(--primary-2); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; text-align: start; }
.help-link:hover { text-decoration: underline; }
.help-text { font-size: var(--fs-sub); color: var(--muted); margin-top: 4px; line-height: var(--lh-text-s); }
.help-list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 9px; font-size: var(--fs-13-5); line-height: var(--lh-help); }
.help-fallback { padding: 20px 4px 8px; }

/* Drawer d'aide non modal (COP-343) : colonne fixe côté fin de la coquille (420 px) dont `body.help-open` réserve
   la place à .app-main ; aucun overlay, la page reste cliquable ; fermée = hors champ ET invisible (hors tabulation).
   ≤ 980 px (point de rupture de la sidebar) : feuille plein écran qui monte du bas. */
.help-panel { position: fixed; inset-block: 0; inset-inline-end: 0; width: 420px; z-index: 28; visibility: hidden; transform: translateX(100%); transition: transform .22s ease, visibility 0s linear .22s; }
[dir="rtl"] .help-panel { transform: translateX(-100%); }
body.help-open .help-panel { visibility: visible; transform: none; transition: transform .22s ease; }
body.help-open .app-main { margin-inline-end: 420px; }
body.help-open .toast-wrap { inset-inline-end: calc(420px + 26px); }
.help-head .icon-btn { width: 32px; height: 32px; flex: none; }
.help-search svg { width: 17px; height: 17px; flex: none; }
.help-link svg { width: 16px; height: 16px; flex: none; }
.help-see { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.help-see .help-sec { margin: 0; }
.help-empty > span { display: block; }
.help-empty .help-link { justify-content: center; margin-top: 10px; }
.help-foot .hint { flex-wrap: wrap; }
.help-foot kbd { font: 600 var(--fs-mini-th) var(--f-mono); background: var(--base-200); border: 1px solid var(--base-300); border-radius: 5px; padding: 1px 5px; color: var(--muted); white-space: nowrap; }
/* « ? » neutre (le terracotta est réservé aux alertes) ; aide ouverte = teinte primaire douce. */
.help-toggle[aria-expanded="true"] { background: var(--primary-soft); color: var(--primary-2); border-color: var(--primary); }
:root[data-theme="dark"] .help-toggle[aria-expanded="true"], :root[data-theme="dark"] .help-link, :root[data-theme="dark"] .help-task .n { color: var(--primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .help-toggle[aria-expanded="true"], :root:not([data-theme="light"]) .help-link, :root:not([data-theme="light"]) .help-task .n { color: var(--primary); } }
@media (max-width: 980px) {
  .help-panel, [dir="rtl"] .help-panel { inset: 0; width: auto; z-index: 45; border-inline-start: 0; transform: translateY(100%); }
  body.help-open .help-panel { transform: none; }
  body.help-open .app-main { margin-inline-end: 0; }
  body.help-open .toast-wrap { inset-inline-end: 26px; }
  body.help-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .help-panel, .app-main { transition-duration: .001ms; } }

/* Aide = lecture, pas saisie : fond doux, pas d'ombre, contenu à plat (plus d'accordéon) défilant verticalement. */
.help-panel { background: var(--primary-soft); box-shadow: none; }
.help-head { align-items: center; padding-bottom: 12px; }
.help-mark { width: 34px; height: 34px; border-radius: .7rem; background: var(--base-100); color: var(--primary-2); display: grid; place-items: center; flex: none; }
.help-mark svg { width: 18px; height: 18px; }
.help-search { background: var(--base-100); }
.help-body { padding: 4px 20px 20px; }
.help-intro { font-size: var(--fs-base); }
.help-task { border: 0; border-radius: 0; background: none; margin: 0 0 18px; overflow: visible; }
.help-task > button { padding: 0; pointer-events: none; cursor: default; font-size: var(--fs-title); font-weight: 700; margin-bottom: 4px; }
.help-task > button:hover { background: none; }
.help-task .n { display: none; }
.help-task .panel { display: block; padding: 0; font-size: var(--fs-base); }
.help-note.info, .help-note.warn { background: var(--base-100); }
.help-foot { background: var(--base-100); }
:root[data-theme="dark"] .help-mark { color: var(--primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .help-mark { color: var(--primary); } }

/* Aide : cartes de tâche, icône, étapes « action → effet », pastille d'action. */
.help-task { background: var(--base-100); border: 1px solid var(--base-300); border-radius: .9rem; padding: 14px; margin: 0 0 12px; }
.help-task > button { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.help-task .panel p { color: var(--muted); margin: 0 0 10px; }
.help-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.help-steps li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; line-height: var(--lh-help); }
.help-btn { display: inline-flex; align-items: center; font-size: var(--fs-badge); font-weight: 600; padding: 3px 10px; border-radius: var(--r-btn); border: 1px solid var(--base-300); background: var(--base-200); color: var(--base-content); white-space: nowrap; }
.help-task .help-note { margin-top: 12px; }
.help-task .help-note.info { background: var(--info-soft); }
.help-task .help-note.warn { background: var(--warning-soft); }

/* Aide au point de friction (COP-344) : help-tip (« i » + popover, fragments/help :: tip), bandeau de conseil
   dismissable (fragments/help :: banner). Un popover à la fois (assets/help.js) ; aligné côté fin s'il déborde (.end) ;
   ≤ 640 px = feuille basse. Le popover remet à zéro ce qu'il hérite d'un <th> ou d'un badge (majuscules, graisse). */
.help-tip { position: relative; display: inline-flex; vertical-align: middle; }
.help-tip > button { width: 18px; height: 18px; border-radius: 50%; border: 0; background: none; color: var(--muted-2); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
.help-tip > button:hover, .help-tip > button[aria-expanded="true"] { color: var(--primary); background: var(--primary-soft); }
.help-tip > button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.help-tip > button svg { width: 15px; height: 15px; }
.help-pop { position: absolute; z-index: 40; top: calc(100% + 8px); inset-inline-start: -10px; width: 290px; max-width: calc(100vw - 24px); background: var(--base-100); border: 1px solid var(--base-300); border-radius: .9rem; box-shadow: var(--shadow-lift); padding: 12px 14px; text-align: start; text-transform: none; letter-spacing: normal; font-weight: 400; white-space: normal; color: var(--base-content); font-size: var(--fs-cell); line-height: var(--lh-text); display: none; cursor: auto; }
.help-pop::before { content: ""; position: absolute; top: -6px; inset-inline-start: 14px; width: 10px; height: 10px; background: var(--base-100); border-inline-start: 1px solid var(--base-300); border-top: 1px solid var(--base-300); transform: rotate(45deg); }
.help-tip.open .help-pop { display: block; }
.help-tip.end .help-pop { inset-inline-start: auto; inset-inline-end: -10px; }
.help-tip.end .help-pop::before { inset-inline-start: auto; inset-inline-end: 14px; }
.help-pop .t { display: block; font-weight: 700; font-size: var(--fs-cell); margin-bottom: 3px; }
.help-pop .more { margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: var(--fs-mini); color: var(--primary-2); background: none; border: 0; padding: 0; cursor: pointer; }
.help-pop .more:hover { text-decoration: underline; }
.help-pop .more svg { width: 14px; height: 14px; }
[dir="rtl"] .help-pop .flip { transform: scaleX(-1); }
@media (max-width: 640px) {
  .help-pop, .help-tip.end .help-pop { position: fixed; inset-inline: 12px; inset-block: auto 14px; width: auto; max-width: none; z-index: 60; }
  .help-pop::before { display: none; }
}
.help-banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; margin-bottom: 18px; background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); border-radius: .9rem; font-size: var(--fs-cell); line-height: var(--lh-text); }
.help-banner > svg { color: var(--info); margin-top: 1px; width: 17px; height: 17px; flex: none; }
.help-banner-text { flex: 1; min-width: 0; }
.help-banner form { margin: 0; margin-inline-start: auto; flex: none; }
.help-banner .x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 6px; display: grid; place-items: center; }
.help-banner .x:hover { background: var(--base-200); color: var(--base-content); }
.help-banner .x svg { width: 16px; height: 16px; }
.help-foot form { margin: 0; }
:root[data-theme="dark"] .help-pop .more { color: var(--primary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .help-pop .more { color: var(--primary); } }
.empty-help { margin-top: 10px; display: flex; justify-content: center; }

/* ---------- « Exercices » = maquette exercices-v1 (COP-358 ; portée : classe page-exercices sur <main>, revue des styles
   calculés) ----------
   Mêmes causes que Paiements : interligne normal hors cellules (la maquette n'en fixe aucun), cartes bordées dont
   l'en-tête porte la marge (14 × 16 px) et un filet, titres 700, boutons sans ombre. Aucune taille de texte ici : listes,
   chiffres clés et boutons suivent la base (COP-335 / 337). */
.page-exercices .page-title, .page-exercices .ex-band, .page-exercices .tab, .page-exercices .card-title,
.page-exercices .kpi-label, .page-exercices .kpi-value, .page-exercices .btn, .page-exercices .cp-ck .t,
.page-exercices .cp-anx .n, .page-exercices .cp-anx b { line-height: var(--lh-normal); }
.page-exercices .card { border: 1px solid var(--base-300); }
.page-exercices .card:has(> .card-head) { padding: 0; }
.page-exercices .card > .card-head { padding: 14px 16px; margin-bottom: 0; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--base-300); }
.page-exercices .card-title { font-weight: 700; letter-spacing: normal; }
.page-exercices .card > .cp-checks { border-top: 0; }
.page-exercices .card > .cp-annexes { padding: 16px; }
.page-exercices .card > .cp-hint { padding: 14px 16px; }
.page-exercices .btn { box-shadow: none; gap: 6px; padding: 8px 13px; }
.page-exercices .btn-sm { padding: 5px 10px; }

/* COP-380 : frise datée du dossier (tiroir « Voir le dossier ») — jetons seuls. */
.dos-frise { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dos-frise li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding-bottom: 14px; position: relative; }
.dos-frise li::before { content: ""; position: absolute; inset-inline-start: 6px; top: 14px; bottom: 0; width: 2px; background: var(--base-300); }
.dos-frise li:last-child::before { display: none; }
.dos-frise .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primary); background: var(--base-100); margin-top: 3px; z-index: 1; }
.dos-frise .done .dot { background: var(--primary); }
.dos-frise .now .dot { border-color: var(--error); background: var(--error-soft); }
.dos-frise .next .dot { border-style: dashed; border-color: var(--muted); }
.dos-frise .next { color: var(--muted); }
.dos-docs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* Aide : libellé d'étape sans pastille (pastille `.help-btn` réservée aux vrais boutons / badges de l'écran). */
.help-steps .help-k { font-size: var(--fs-base); font-weight: 700; }