/* =====================================================================
   Fortuna : système visuel v1 (lot 1). Charte Horus (03-ux.md §6).
   CSP stricte : aucun style en ligne, seules des variables CSS sont posées
   en JS via element.style.setProperty("--h" | "--soc", valeur).
   Points de rupture : mobile ≤ 767 px · tablette 768-1023 px · bureau ≥ 1024 px.
   Règle de lecture : jetons → base → mise en page → composants → responsive.
   ===================================================================== */

/* ---------- 1. Jetons ------------------------------------------------ */
:root {
  /* Marque */
  --violet: #A855F7;          /* signature : état actif, accents, graphiques */
  --violet-action: #9333EA;   /* fond du bouton principal (blanc dessus 5,4:1) */
  --violet-fonce: #7E22CE;    /* survol bouton principal, texte actif (7:1) */
  --violet-doux: #F3E8FF;     /* fond actif doux */
  --violet-voile: rgba(168, 85, 247, .14);
  --degrade: linear-gradient(90deg, #EC4899, #A855F7, #3B82F6);
  --degrade-doux: linear-gradient(135deg, #FCE7F3, #F3E8FF 50%, #DBEAFE);

  /* Neutres */
  --fond: #F8F7FC; --surface: #FFFFFF; --surface-2: #F2F0FA; --surface-3: #E9E6F3;
  --bord: #ECEAF4; --bord-fort: #DCD8EA; --bord-champ: #8F92AA;
  --texte: #1E1B3A; --texte-doux: #5E6380; --texte-inverse: #FFFFFF;
  --lien: #7E22CE; --focus: #9333EA;

  /* Sémantique (texte sur blanc ≥ 4,5:1) */
  --ok: #15803D; --alerte: #B45309; --bloque: #B91C1C; --info: #1D4ED8;

  /* Statuts : fond doux + texte foncé (≥ 6:1) */
  --st-brouillon-f: #EEEDF4; --st-brouillon-t: #4B4F66;
  --st-attente-f: #FEF3C7;   --st-attente-t: #92400E;
  --st-valide-f: #DCFCE7;    --st-valide-t: #166534;
  --st-envoye-f: #DBEAFE;    --st-envoye-t: #1E40AF;
  --st-retard-f: #FFEDD5;    --st-retard-t: #9A3412;
  --st-bloque-f: #FEE2E2;    --st-bloque-t: #991B1B;
  --st-paye-f: #15803D;      --st-paye-t: #FFFFFF;

  /* Pastilles de société (JS : el.style.setProperty("--soc", "var(--soc-2)")) */
  --soc-1: #475569; /* ardoise  */
  --soc-2: #0F766E; /* sarcelle */
  --soc-3: #C2410C; /* cuivre   */
  --soc-4: #4338CA; /* indigo   */
  --soc-5: #8A5A3C; /* noisette */

  /* Typographie */
  --police-titre: "Space Grotesk", system-ui, sans-serif;
  --police: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --t-xs: 12px; --t-s: 13px; --t-m: 14px; --t-l: 16px; --t-xl: 20px; --t-2xl: 24px; --t-3xl: 30px;

  /* Espacements (grille de 8, demi-pas de 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;

  /* Rayons, ombres */
  --rayon-s: 8px; --rayon: 12px; --rayon-l: 16px; --rayon-pilule: 999px;
  --ombre-1: 0 1px 2px rgba(30, 27, 58, .05);
  --ombre-2: 0 1px 2px rgba(30, 27, 58, .04), 0 4px 14px rgba(30, 27, 58, .06);
  --ombre-3: 0 2px 6px rgba(30, 27, 58, .06), 0 14px 36px rgba(30, 27, 58, .14);
  --ombre: var(--ombre-2); /* compatibilité lot 0 */

  /* Mouvement */
  --duree-courte: 120ms; --duree: 150ms; --duree-longue: 180ms;
  --courbe: cubic-bezier(.2, 0, 0, 1);

  /* Plans */
  --z-haut: 20; --z-menu: 30; --z-voile: 40; --z-panneau: 50; --z-fenetre: 60; --z-toast: 70;

  /* Gabarit */
  --haut-h: 60px; --lateral-l: 232px; --onglets-h: 64px; --cote-l: 340px;

  --toast-f: #1E1B3A; --toast-t: #F2F0FA; --toast-btn-f: rgba(255, 255, 255, .12); --toast-btn-t: #E9D5FF; --toast-ok: #86EFAC; --toast-erreur: #FCA5A5;
  color-scheme: light;
}

/* Thème sombre : système (sauf choix « clair ») */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --violet-doux: #2E2556; --violet-voile: rgba(192, 132, 252, .18);
    --degrade-doux: linear-gradient(135deg, #3A1B3A, #2E2556 50%, #16264A);
    --fond: #0F1224; --surface: #1E1B3A; --surface-2: #26224A; --surface-3: #2F2A58;
    --bord: #34305C; --bord-fort: #433E70; --bord-champ: #6E6A9A;
    --texte: #F2F0FA; --texte-doux: #A3A7C2;
    --lien: #D8B4FE; --focus: #C084FC; --violet-fonce: #E9D5FF;
    --ok: #4ADE80; --alerte: #FBBF24; --bloque: #F87171; --info: #93C5FD;
    --st-brouillon-f: #2C2950; --st-brouillon-t: #C9CBDB;
    --st-attente-f: #3A2A12;   --st-attente-t: #FCD34D;
    --st-valide-f: #123322;    --st-valide-t: #86EFAC;
    --st-envoye-f: #16264A;    --st-envoye-t: #93C5FD;
    --st-retard-f: #3B1F12;    --st-retard-t: #FDBA74;
    --st-bloque-f: #3B1520;    --st-bloque-t: #FCA5A5;
    --st-paye-f: #4ADE80;      --st-paye-t: #052E16;
    --soc-1: #94A3B8; --soc-2: #2DD4BF; --soc-3: #FB923C; --soc-4: #818CF8; --soc-5: #C8A07E;
    --ombre-1: none; --ombre-2: 0 1px 2px rgba(0, 0, 0, .3);
    --ombre-3: 0 16px 40px rgba(0, 0, 0, .5); --ombre: var(--ombre-2);
    --toast-f: #F2F0FA; --toast-t: #1E1B3A; --toast-btn-f: #E9D5FF; --toast-btn-t: #6B21A8; --toast-ok: #15803D; --toast-erreur: #B91C1C;
    color-scheme: dark;
  }
}
/* Thème sombre : choix explicite (mêmes valeurs) */
:root[data-theme="dark"] {
  --violet-doux: #2E2556; --violet-voile: rgba(192, 132, 252, .18);
  --degrade-doux: linear-gradient(135deg, #3A1B3A, #2E2556 50%, #16264A);
  --fond: #0F1224; --surface: #1E1B3A; --surface-2: #26224A; --surface-3: #2F2A58;
  --bord: #34305C; --bord-fort: #433E70; --bord-champ: #6E6A9A;
  --texte: #F2F0FA; --texte-doux: #A3A7C2;
  --lien: #D8B4FE; --focus: #C084FC; --violet-fonce: #E9D5FF;
  --ok: #4ADE80; --alerte: #FBBF24; --bloque: #F87171; --info: #93C5FD;
  --st-brouillon-f: #2C2950; --st-brouillon-t: #C9CBDB;
  --st-attente-f: #3A2A12;   --st-attente-t: #FCD34D;
  --st-valide-f: #123322;    --st-valide-t: #86EFAC;
  --st-envoye-f: #16264A;    --st-envoye-t: #93C5FD;
  --st-retard-f: #3B1F12;    --st-retard-t: #FDBA74;
  --st-bloque-f: #3B1520;    --st-bloque-t: #FCA5A5;
  --st-paye-f: #4ADE80;      --st-paye-t: #052E16;
  --soc-1: #94A3B8; --soc-2: #2DD4BF; --soc-3: #FB923C; --soc-4: #818CF8; --soc-5: #C8A07E;
  --ombre-1: none; --ombre-2: 0 1px 2px rgba(0, 0, 0, .3);
  --ombre-3: 0 16px 40px rgba(0, 0, 0, .5); --ombre: var(--ombre-2);
  --toast-f: #F2F0FA; --toast-t: #1E1B3A; --toast-btn-f: #E9D5FF; --toast-btn-t: #6B21A8; --toast-ok: #15803D; --toast-erreur: #B91C1C;
  color-scheme: dark;
}

/* ---------- 2. Base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--fond); color: var(--texte);
  font: 400 var(--t-m)/1.5 var(--police);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4 { font-family: var(--police-titre); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 var(--e-2); color: var(--texte); }
h1 { font-size: var(--t-2xl); } h2 { font-size: var(--t-l); } h3 { font-size: var(--t-m); } h4 { font-size: var(--t-s); }
p { margin: 0 0 var(--e-3); }
a { color: var(--lien); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
svg { flex: none; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { font: 500 11px/1 var(--police-mono); padding: 3px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--bord); color: var(--texte-doux); }
hr { border: 0; border-top: 1px solid var(--bord); margin: var(--e-4) 0; }
::selection { background: var(--violet-voile); }

/* Focus visible violet, partout */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--rayon-s); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

/* Utilitaires */
.cache { display: none !important; }
.doux { color: var(--texte-doux); }
.chiffre, .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.espace { flex: 1; }
.ico { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; line-height: 1; }
.ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.marque { font-family: var(--police-titre); font-weight: 700; font-size: var(--t-xl); letter-spacing: -0.03em;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }

/* ---------- 3. Mise en page ----------------------------------------- */
.app { display: grid; grid-template-columns: var(--lateral-l) minmax(0, 1fr); grid-template-rows: var(--haut-h) 1fr; min-height: 100vh; }

/* Barre du haut */
.haut { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-4);
  background: var(--surface); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: var(--z-haut); height: var(--haut-h); }
.haut .marque { width: calc(var(--lateral-l) - var(--e-4) - var(--e-3)); padding-left: var(--e-2); }

/* Sélecteur de société */
.selecteur, .avatar, .recherche, :has(> .menu-nouveau) { position: relative; }
.selecteur > button { display: inline-flex; align-items: center; gap: var(--e-2); height: 38px; min-width: 210px;
  border: 1px solid var(--bord-fort); background: var(--surface); border-radius: var(--rayon-s); padding: 0 var(--e-3);
  font-weight: 600; transition: border-color var(--duree) var(--courbe), background var(--duree) var(--courbe); }
.selecteur > button:hover { border-color: var(--violet); }
.selecteur > button[aria-expanded="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-voile); }
.selecteur > button > :last-child { margin-left: auto; color: var(--texte-doux); }

/* Menus déroulants (sociétés, avatar, nouveau, résultats) */
.liste-soc, .menu-avatar, .menu-nouveau, .resultats-recherche {
  position: absolute; top: calc(100% + 6px); z-index: var(--z-menu); margin: 0; padding: var(--e-1); list-style: none;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-3);
  animation: apparait var(--duree) var(--courbe); }
.liste-soc { left: 0; min-width: 300px; }
.menu-avatar, .menu-nouveau { right: 0; min-width: 260px; }
.liste-soc li button, .menu-avatar li > button, .menu-avatar li > a, .menu-nouveau li > button, .menu-nouveau li > a, .resultats-recherche li > a, .resultats-recherche li > button {
  width: 100%; display: flex; align-items: center; gap: var(--e-3); border: 0; background: none; color: var(--texte);
  padding: var(--e-2) var(--e-3); min-height: 38px; border-radius: var(--rayon-s); text-align: left; text-decoration: none;
  transition: background var(--duree-courte) var(--courbe); }
.liste-soc li button:hover, .menu-avatar li > :is(button, a):hover, .menu-nouveau li > :is(button, a):hover,
.resultats-recherche li > :is(a, button):hover, .resultats-recherche li > [aria-selected="true"] { background: var(--surface-2); text-decoration: none; }
.liste-soc li button[aria-current="true"] { background: var(--violet-doux); font-weight: 600; }
.liste-soc li button[aria-current="true"]::after { content: "✓"; color: var(--violet-fonce); margin-left: var(--e-2); }
.liste-soc li button:disabled, .liste-soc li button[aria-disabled="true"] { color: var(--texte-doux); cursor: not-allowed; }
.liste-soc li button:disabled::after, .liste-soc li button[aria-disabled="true"]::after { content: "⊘"; color: var(--bloque); }
.liste-soc .pays { margin-left: auto; color: var(--texte-doux); font-size: var(--t-xs); font-weight: 500; }
.liste-soc .separateur, .menu-avatar .separateur, .menu-nouveau .separateur { height: 1px; background: var(--bord); margin: var(--e-1) var(--e-2); }
.liste-soc input { margin-bottom: var(--e-1); }
.menu-avatar .entete { padding: var(--e-2) var(--e-3) var(--e-3); border-bottom: 1px solid var(--bord); margin-bottom: var(--e-1); }
.menu-avatar li > [aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--violet-fonce); }
.menu-nouveau li .ico { color: var(--texte-doux); }
.menu-nouveau li kbd { margin-left: auto; }
.menu-nouveau .titre-groupe { padding: var(--e-2) var(--e-3) var(--e-1); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }

/* Recherche */
.recherche { flex: 1; max-width: 440px; }
.recherche input { height: 38px; padding-left: 38px; background: var(--surface-2); border-color: transparent; }
.recherche input:hover { border-color: var(--bord-fort); }
.recherche input:focus { background: var(--surface); border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-voile); }
.recherche > .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--texte-doux); pointer-events: none; }
.recherche > kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.resultats-recherche { left: 0; right: 0; max-height: 420px; overflow: auto; }
.resultats-recherche .titre-groupe { padding: var(--e-2) var(--e-3) var(--e-1); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.resultats-recherche .num, .resultats-recherche .montant { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--texte-doux); }

/* Avatar */
.avatar > button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--degrade); color: #fff;
  font: 700 var(--t-s)/1 var(--police-titre); display: grid; place-items: center; }
.avatar > button:hover { box-shadow: 0 0 0 3px var(--violet-voile); }

/* Menu latéral */
.lateral { background: var(--surface); border-right: 1px solid var(--bord); padding: var(--e-3) var(--e-2);
  display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--haut-h); height: calc(100vh - var(--haut-h)); overflow-y: auto; }
.lateral a { display: flex; align-items: center; gap: var(--e-3); min-height: 40px; padding: var(--e-2) var(--e-3); border-radius: var(--rayon-s);
  color: var(--texte-doux); text-decoration: none; font-weight: 500; position: relative;
  transition: background var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe); }
.lateral a:hover { background: var(--surface-2); color: var(--texte); text-decoration: none; }
.lateral a[aria-current="page"] { background: var(--violet-doux); color: var(--violet-fonce); font-weight: 600; }
.lateral a[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--violet); }
.lateral a .compteur { margin-left: auto; }
.lateral .titre-groupe { padding: var(--e-4) var(--e-3) var(--e-1); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.lateral .bas { margin-top: auto; border-top: 1px solid var(--bord); padding-top: var(--e-2); }

main { padding: var(--e-6) var(--e-6) var(--e-7); max-width: 1240px; width: 100%; min-width: 0; }
main:focus { outline: none; }
main > * + *, #contenu > * + * { margin-top: var(--e-5); }
main > .entete-page + *, #contenu > .entete-page + *, #contenu > .fil + * { margin-top: 0; }

/* Barre d'onglets (mobile) */
.onglets-bas { display: none; }

/* ---------- 4. Boutons ---------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); height: 38px; padding: 0 var(--e-4);
  border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte); border-radius: var(--rayon-s);
  font-weight: 500; font-size: var(--t-m); line-height: 1; white-space: nowrap; text-decoration: none; user-select: none;
  transition: background var(--duree) var(--courbe), border-color var(--duree) var(--courbe), color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe); }
.btn:hover { border-color: var(--bord-champ); background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .ico { margin-left: -2px; }
.btn-principal, .btn-nouveau { background: var(--violet-action); border-color: var(--violet-action); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(126, 34, 206, .25); }
.btn-principal:hover, .btn-nouveau:hover { background: #7E22CE; border-color: #7E22CE; color: #fff; }
.btn-danger { color: var(--bloque); }
.btn-danger:hover { background: var(--st-bloque-f); border-color: var(--bloque); color: var(--st-bloque-t); }
.btn-danger.btn-plein { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.btn-fantome { background: transparent; border-color: transparent; color: var(--texte-doux); }
.btn-fantome:hover { background: var(--surface-2); border-color: transparent; color: var(--texte); }
.btn-petit { height: 30px; padding: 0 var(--e-3); font-size: var(--t-s); border-radius: 7px; }
.btn-icone { width: 38px; padding: 0; position: relative; }
.btn-icone.btn-petit { width: 30px; }
.btn-icone .point { position: absolute; top: 2px; right: 1px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
  background: #BE185D; color: #fff; font: 700 10px/14px var(--police); text-align: center; border: 2px solid var(--surface); box-sizing: content-box; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--surface-2); border-color: var(--bord); color: var(--texte-doux); box-shadow: none; cursor: not-allowed; transform: none; }
.raison { display: block; margin-top: var(--e-1); font-size: var(--t-xs); color: var(--texte-doux); line-height: 1.4; max-width: 280px; }
.btn-nouveau .fleche { opacity: .8; margin-left: 2px; }
.groupe-btn { display: inline-flex; flex-direction: column; align-items: flex-end; }

/* ---------- 5. En-tête de page ---------------------------------------- */
.fil { display: flex; width: fit-content; align-items: center; gap: var(--e-1); font-size: var(--t-s); font-weight: 500; color: var(--texte-doux); margin-bottom: var(--e-2); }
.fil:hover { color: var(--violet-fonce); text-decoration: none; }
.entete-page { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3) var(--e-4); margin-bottom: var(--e-5); }
.entete-page > :first-child { min-width: 0; }
.entete-page h1 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-3); }
.entete-page .sous-titre { margin: var(--e-1) 0 0; color: var(--texte-doux); display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); }
.entete-page .actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-2); }
.entete-page .espace { flex: 1; }

/* ---------- 6. Cartes ------------------------------------------------- */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-4); }
.cartes.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: var(--e-5); box-shadow: var(--ombre-1); min-width: 0; }
.carte.large { grid-column: 1 / -1; }
.carte-titre { display: flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-4); }
.carte-titre .ico { color: var(--texte-doux); }
.carte-titre h2, .carte-titre h3 { margin: 0; font-size: var(--t-s); font-family: var(--police); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-doux); }
.carte-titre a { margin-left: auto; font-size: var(--t-s); font-weight: 500; }

/* Carte KPI */
.carte-kpi { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-4) var(--e-5); position: relative; }
.carte-kpi .libelle { font-size: var(--t-s); font-weight: 500; color: var(--texte-doux); display: flex; align-items: center; gap: var(--e-2); }
.carte-kpi .valeur { font: 600 var(--t-3xl)/1.15 var(--police-titre); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--texte); white-space: nowrap; }
.carte-kpi .valeur small { font-size: .55em; font-weight: 500; color: var(--texte-doux); margin-left: 2px; }
.carte-kpi .evolution { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-xs); font-weight: 600; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.carte-kpi .evolution.hausse { color: var(--ok); }
.carte-kpi .evolution.baisse { color: var(--bloque); }
.carte-kpi .evolution .doux { font-weight: 400; }
a.carte-kpi, button.carte-kpi { text-align: left; color: inherit; text-decoration: none; transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe); }
a.carte-kpi:hover, button.carte-kpi:hover { border-color: var(--bord-fort); box-shadow: var(--ombre-2); text-decoration: none; }

/* Mini-graphique en barres : JS pose --h (ex. "62%") sur chaque .barre */
.barres, .sparkline { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-top: var(--e-3); }
.barres .barre { flex: 1; min-width: 4px; height: var(--h, 4%); min-height: 2px; border-radius: 3px 3px 1px 1px; background: var(--surface-3);
  transition: height var(--duree-longue) var(--courbe), background var(--duree) var(--courbe); }
.barres .barre.courante, .barres .barre:last-child { background: var(--violet); }
.barres .barre:hover { background: var(--violet-fonce); }

/* Carte-liste : lignes cliquables avec flèche */
.carte-liste { padding: 0; overflow: hidden; }
.carte-liste > .carte-titre { padding: var(--e-4) var(--e-5) 0; margin-bottom: var(--e-2); }
.carte-liste ul, .carte-liste ol { list-style: none; margin: 0; padding: 0; }
.carte-liste li + li { border-top: 1px solid var(--bord); }
.carte-liste li > a, .carte-liste li > button { display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 48px;
  padding: var(--e-3) var(--e-5); border: 0; background: none; color: var(--texte); text-align: left; text-decoration: none;
  transition: background var(--duree-courte) var(--courbe); }
.carte-liste li > a::after, .carte-liste li > button::after { content: "→"; color: var(--texte-doux); margin-left: var(--e-1); transition: transform var(--duree) var(--courbe), color var(--duree) var(--courbe); }
.carte-liste li > a:hover, .carte-liste li > button:hover { background: var(--surface-2); text-decoration: none; }
.carte-liste li > a:hover::after, .carte-liste li > button:hover::after { transform: translateX(3px); color: var(--violet-fonce); }
.carte-liste .texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-liste .texte small { display: block; color: var(--texte-doux); font-size: var(--t-xs); }
.carte-liste .montant, .carte-liste .num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.carte-liste .nombre { min-width: 28px; height: 28px; padding: 0 var(--e-2); border-radius: var(--rayon-s); display: inline-grid; place-items: center;
  background: var(--surface-2); font: 600 var(--t-s)/1 var(--police-titre); font-variant-numeric: tabular-nums; }
.carte-liste .pied { padding: var(--e-3) var(--e-5); border-top: 1px solid var(--bord); font-size: var(--t-s); color: var(--texte-doux); }

/* ---------- 7. Pastilles, statuts, badges -------------------------------- */
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--soc, var(--texte-doux));
  box-shadow: 0 0 0 2px var(--surface); }
.pastille.grande { width: 14px; height: 14px; }
.societe { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; }
.societe > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.statut { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--rayon-pilule);
  font-size: var(--t-xs); font-weight: 600; line-height: 1; white-space: nowrap; background: var(--st-brouillon-f); color: var(--st-brouillon-t); }
.statut::before { font-size: 11px; width: 12px; text-align: center; }
.statut-brouillon { background: var(--st-brouillon-f); color: var(--st-brouillon-t); }
.statut-brouillon::before { content: "○"; }
.statut-attente { background: var(--st-attente-f); color: var(--st-attente-t); }
.statut-attente::before { content: "◷"; }
.statut-valide, .statut-accepte { background: var(--st-valide-f); color: var(--st-valide-t); }
.statut-valide::before, .statut-accepte::before { content: "✓"; }
.statut-envoye { background: var(--st-envoye-f); color: var(--st-envoye-t); }
.statut-envoye::before { content: "⇄"; }
.statut-retard { background: var(--st-retard-f); color: var(--st-retard-t); }
.statut-retard::before { content: "!"; font-weight: 800; }
.statut-bloque, .statut-refuse { background: var(--st-bloque-f); color: var(--st-bloque-t); }
.statut-bloque::before { content: "⊘"; }
.statut-refuse::before { content: "✕"; }
.statut-paye { background: var(--st-paye-f); color: var(--st-paye-t); }
.statut-paye::before { content: "●"; font-size: 8px; }

.badge { display: inline-flex; align-items: center; gap: var(--e-1); height: 22px; padding: 0 var(--e-2); border-radius: 6px;
  font-size: var(--t-xs); font-weight: 600; line-height: 1; white-space: nowrap; background: var(--surface-2); color: var(--texte-doux); }
.badge.ok { background: var(--st-valide-f); color: var(--st-valide-t); }
.badge.alerte { background: var(--st-attente-f); color: var(--st-attente-t); }
.badge.bloque { background: var(--st-bloque-f); color: var(--st-bloque-t); }
.badge.info { background: var(--st-envoye-f); color: var(--st-envoye-t); }
.badge.marque-violet { background: var(--violet-doux); color: var(--violet-fonce); }

.compteur { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rayon-pilule);
  background: var(--surface-3); color: var(--texte); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }

/* ---------- 8. Filtres en pastilles ---------------------------------------- */
.pastilles-filtres { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-4); }
.pastilles-filtres > button { display: inline-flex; align-items: center; gap: var(--e-2); height: 32px; padding: 0 var(--e-3);
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-pilule); background: var(--surface); color: var(--texte-doux);
  font-size: var(--t-s); font-weight: 500; white-space: nowrap; transition: all var(--duree-courte) var(--courbe); }
.pastilles-filtres > button:hover { color: var(--texte); border-color: var(--bord-champ); }
.pastilles-filtres > button[aria-pressed="true"] { background: var(--violet-doux); border-color: var(--violet); color: var(--violet-fonce); font-weight: 600; }
.pastilles-filtres > button[aria-pressed="true"] .compteur { background: var(--violet-action); color: #fff; }
.pastilles-filtres > .espace { flex: 1; }
.barre-outils { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }

/* ---------- 9. Tableaux ---------------------------------------------- */
.tableau { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); box-shadow: var(--ombre-1); font-size: var(--t-m); }
.tableau th { position: sticky; top: var(--haut-h); z-index: 1; background: var(--surface); text-align: left; font-size: var(--t-xs);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-doux); padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--bord); white-space: nowrap; }
.tableau thead tr:first-child th:first-child { border-top-left-radius: var(--rayon); }
.tableau thead tr:first-child th:last-child { border-top-right-radius: var(--rayon); }
.tableau td { padding: 0 var(--e-4); height: 52px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr { transition: background var(--duree-courte) var(--courbe); }
.tableau tbody tr:hover { background: var(--surface-2); cursor: pointer; }
.tableau tbody tr[aria-selected="true"] { background: var(--violet-doux); }
.tableau tbody tr:focus-visible { outline-offset: -2px; }
.tableau .num, .tableau th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau td.num { font-weight: 500; }
.tableau .principal { font-weight: 600; color: var(--texte); }
.tableau .secondaire { display: block; font-size: var(--t-xs); color: var(--texte-doux); font-weight: 400; }
.tableau .actions-ligne { width: 48px; text-align: right; }
.tableau td.vide, .tableau .vide td { height: auto; padding: var(--e-7) var(--e-4); text-align: center; color: var(--texte-doux); cursor: default; }
.tableau tbody tr.vide:hover { background: transparent; cursor: default; }
.tableau tfoot td { height: 48px; background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--bord); border-bottom: 0; }
.tableau tfoot tr:last-child td:first-child { border-bottom-left-radius: var(--rayon); }
.tableau tfoot tr:last-child td:last-child { border-bottom-right-radius: var(--rayon); }
.total-filtre { margin-top: var(--e-3); font-size: var(--t-s); color: var(--texte-doux); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 10. État vide -------------------------------------------- */
.etat-vide { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--e-7) var(--e-5); max-width: 440px; margin: 0 auto; }
.etat-vide .illus, .etat-vide > .ico { width: 72px; height: 72px; border-radius: 50%; background: var(--degrade-doux); color: var(--violet-fonce);
  display: grid; place-items: center; margin-bottom: var(--e-4); box-shadow: inset 0 0 0 1px var(--violet-voile); }
.etat-vide .illus svg, .etat-vide > .ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.etat-vide h2, .etat-vide h3 { font-size: var(--t-l); margin-bottom: var(--e-1); }
.etat-vide p { color: var(--texte-doux); margin-bottom: var(--e-5); }
.carte.bientot, .bientot { text-align: center; padding: var(--e-7) var(--e-5); color: var(--texte-doux); }

/* ---------- 11. Formulaires ------------------------------------------- */
label { display: block; font-size: var(--t-s); font-weight: 500; color: var(--texte); margin: 0 0 6px; }
.champ { display: flex; flex-direction: column; min-width: 0; }
.champ + .champ { margin-top: var(--e-4); }
.grille-champs .champ + .champ { margin-top: 0; }
.champ .obligatoire { color: var(--bloque); margin-left: 2px; }
:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), select, textarea) {
  width: 100%; height: 40px; padding: 0 var(--e-3); border: 1px solid var(--bord-champ); border-radius: var(--rayon-s);
  background: var(--surface); color: var(--texte); font: inherit; font-size: var(--t-m);
  transition: border-color var(--duree-courte) var(--courbe), box-shadow var(--duree-courte) var(--courbe); }
textarea { height: auto; min-height: 96px; padding: var(--e-2) var(--e-3); line-height: 1.5; resize: vertical; }
select { appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--texte-doux) 50%), linear-gradient(135deg, var(--texte-doux) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
:where(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--texte-doux); }
:where(input:not([type=checkbox], [type=radio]), select, textarea):focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-voile); outline: none; }
input::placeholder, textarea::placeholder { color: var(--texte-doux); opacity: .85; }
input:disabled, select:disabled, textarea:disabled, input[readonly] { background: var(--surface-2); color: var(--texte-doux); border-color: var(--bord); cursor: not-allowed; }
input.num, .num input { text-align: right; font-variant-numeric: tabular-nums; }
input.prerempli { background: var(--violet-doux); border-color: var(--violet); } /* lecture automatique, à vérifier */
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; margin: 0; accent-color: var(--violet-action); flex: none; cursor: pointer; }
.aide { margin: 6px 0 0; font-size: var(--t-xs); color: var(--texte-doux); line-height: 1.4; }
.erreur-champ { margin: 6px 0 0; font-size: var(--t-xs); font-weight: 500; color: var(--bloque); display: flex; gap: var(--e-1); line-height: 1.4; }
.erreur-champ::before { content: "✕"; font-weight: 700; }
.champ.invalide :is(input, select, textarea), [aria-invalid="true"] { border-color: var(--bloque) !important; }
.champ.invalide :is(input, select, textarea):focus, [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, .15) !important; }
.case { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-m); font-weight: 400; margin: 0; cursor: pointer; line-height: 1.4; }
.case input { margin-top: 1px; }
.case + .case { margin-top: var(--e-3); }

.grille-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-5); }
.grille-champs.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-champs .large, .grille-champs .champ.large { grid-column: 1 / -1; }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.bloc { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: var(--e-5); box-shadow: var(--ombre-1); }
fieldset.bloc + fieldset.bloc, fieldset.bloc + .bloc, .bloc + .bloc { margin-top: var(--e-4); }
fieldset.bloc > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--e-4); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--texte-doux); }
fieldset.bloc > legend + * { clear: both; }
details.bloc > summary { cursor: pointer; font-weight: 600; color: var(--texte-doux); list-style: none; display: flex; align-items: center; gap: var(--e-2); }
details.bloc > summary::before { content: "▸"; transition: transform var(--duree) var(--courbe); }
details.bloc[open] > summary::before { transform: rotate(90deg); }
details.bloc[open] > summary { margin-bottom: var(--e-4); }

/* Lignes de facture éditables */
.lignes-edition { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--t-m); }
.lignes-edition th { text-align: left; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-doux);
  padding: 0 var(--e-2) var(--e-2); border-bottom: 1px solid var(--bord); white-space: nowrap; }
.lignes-edition td { padding: var(--e-2) var(--e-1); border-bottom: 1px solid var(--bord); vertical-align: top; }
.lignes-edition .designation { width: auto; }
.lignes-edition .qte { width: 80px; } .lignes-edition .pu { width: 120px; } .lignes-edition .remise { width: 90px; }
.lignes-edition .tva { width: 96px; } .lignes-edition .total { width: 120px; } .lignes-edition .suppr { width: 40px; }
.lignes-edition th.num, .lignes-edition .qte, .lignes-edition .pu, .lignes-edition .remise, .lignes-edition .total { text-align: right; }
.lignes-edition td :is(input, select, textarea) { border-color: transparent; background: transparent; height: 36px; }
.lignes-edition td textarea { min-height: 36px; padding-top: 7px; resize: none; }
.lignes-edition tr:hover td :is(input, select, textarea) { border-color: var(--bord-fort); background: var(--surface); }
.lignes-edition td :is(input, select, textarea):focus { background: var(--surface); }
.lignes-edition td.total { font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 16px; white-space: nowrap; }
.lignes-edition td.suppr .btn-icone { opacity: 0; transition: opacity var(--duree-courte) var(--courbe); }
.lignes-edition tr:hover td.suppr .btn-icone, .lignes-edition td.suppr .btn-icone:focus-visible { opacity: 1; }
.lignes-edition tr.chapitre td { background: var(--surface-2); font-weight: 600; }
.lignes-edition tfoot td, .lignes-edition .ajouts { border-bottom: 0; padding-top: var(--e-3); }
.lignes-edition .ajouts { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.poignee { cursor: grab; color: var(--texte-doux); }

/* Totaux */
.totaux { margin: var(--e-4) 0 0 auto; width: 100%; max-width: 340px; background: var(--surface-2); border-radius: var(--rayon); padding: var(--e-4) var(--e-5); }
.totaux dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--e-2) var(--e-4); }
.totaux dt { color: var(--texte-doux); }
.totaux dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.totaux .ttc, .totaux dt.ttc + dd { padding-top: var(--e-3); margin-top: var(--e-1); border-top: 1px solid var(--bord-fort); }
.totaux dt.ttc { color: var(--texte); font-weight: 600; align-self: end; }
.totaux dd.ttc, .totaux dt.ttc + dd { font: 600 var(--t-2xl)/1.1 var(--police-titre); letter-spacing: -0.02em; color: var(--texte); }

/* Messages (connexion, formulaires) */
.message { margin-top: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--rayon-s); background: var(--surface-2); font-size: var(--t-s); }
.message.erreur { background: var(--st-bloque-f); color: var(--st-bloque-t); }
.message.ok { background: var(--st-valide-f); color: var(--st-valide-t); }

/* ---------- 12. Fiche document ----------------------------------------- */
.fiche:not(dl) { display: grid; grid-template-columns: minmax(0, 1fr) var(--cote-l); gap: var(--e-5); align-items: start; }
.fiche-principale { min-width: 0; display: flex; flex-direction: column; gap: var(--e-4); }
.fiche-cote { position: sticky; top: calc(var(--haut-h) + var(--e-4)); display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.fiche-cote .carte { padding: var(--e-4); }
.apercu-pdf { aspect-ratio: 1 / 1.414; background: #fff; color: #1E1B3A; border: 1px solid var(--bord); border-radius: var(--rayon-s); box-shadow: var(--ombre-2); padding: var(--e-4); font-size: 9px; overflow: hidden; }
.parties { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); font-weight: 600; }
.parties .vers { color: var(--texte-doux); font-weight: 400; }
dl.fiche { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: var(--e-1) var(--e-3); margin: 0 0 var(--e-2); }
dl.fiche dt { color: var(--texte-doux); }
dl.fiche dd { margin: 0; overflow-wrap: anywhere; }

/* Frise d'étapes */
.frise { display: flex; list-style: none; margin: 0; padding: var(--e-4) var(--e-5); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); counter-reset: etape; }
.frise li { flex: 1; display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-s); font-weight: 500; color: var(--texte-doux); min-width: 0; white-space: nowrap; }
.frise li::before { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--bord-fort); background: var(--surface);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; }
.frise li:not(:last-child)::after { content: ""; flex: 1; height: 2px; min-width: 12px; margin: 0 var(--e-2); background: var(--bord-fort); border-radius: 1px; }
.frise li.fait { color: var(--texte); }
.frise li.fait::before { content: "✓"; background: var(--ok); border-color: var(--ok); color: var(--surface); }
.frise li.fait::after { background: var(--ok); }
.frise li.courant { color: var(--violet-fonce); font-weight: 600; }
.frise li.courant::before { border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-voile); background: var(--violet-doux); }
.frise li.echec::before { content: "✕"; background: var(--bloque); border-color: var(--bloque); color: var(--surface); }
.frise li.echec { color: var(--bloque); }

/* Contrôles « Prêt à partir ? » */
.controles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-s); }
.controles li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 var(--e-2); align-items: start; line-height: 1.45; }
.controles li > * { grid-column: 2; }
.controles li::before { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; line-height: 1; }
.controles li.ok::before { content: "✓"; background: var(--st-valide-f); color: var(--st-valide-t); }
.controles li.bloque::before { content: "✕"; background: var(--st-bloque-f); color: var(--st-bloque-t); }
.controles li.alerte::before { content: "!"; background: var(--st-attente-f); color: var(--st-attente-t); }
.controles li.bloque { color: var(--st-bloque-t); font-weight: 500; }
.controles li small { display: block; color: var(--texte-doux); font-weight: 400; }

/* Cadenas : document validé */
.cadenas { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--rayon-s);
  background: var(--surface-2); border: 1px solid var(--bord); color: var(--texte); font-size: var(--t-s); }
.cadenas .ico { color: var(--violet-fonce); }
.cadenas strong { font-weight: 600; }
.cadenas a, .cadenas .btn { margin-left: auto; }

/* Choix de société « Pour qui ? » */
.choix-societes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.choix-societes > button { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-4) 0 var(--e-3);
  border: 1.5px solid var(--bord-fort); border-radius: var(--rayon-pilule); background: var(--surface); color: var(--texte); font-weight: 500;
  transition: all var(--duree-courte) var(--courbe); }
.choix-societes > button .pastille { width: 14px; height: 14px; }
.choix-societes > button:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--violet); }
.choix-societes > button[aria-pressed="true"], .choix-societes > button[aria-checked="true"] { border-color: var(--violet); background: var(--violet-doux); color: var(--violet-fonce); font-weight: 600; box-shadow: 0 0 0 3px var(--violet-voile); }
.choix-societes > button[aria-pressed="true"]::after, .choix-societes > button[aria-checked="true"]::after { content: "✓"; font-weight: 700; }
.choix-societes > button:disabled, .choix-societes > button[aria-disabled="true"] { background: var(--surface-2); border-style: dashed; color: var(--texte-doux); cursor: not-allowed; }
.choix-societes > button:disabled .pastille, .choix-societes > button[aria-disabled="true"] .pastille { filter: grayscale(1); opacity: .6; }
.choix-societes > button:disabled::after, .choix-societes > button[aria-disabled="true"]::after { content: "⊘"; color: var(--bloque); font-weight: 700; }

/* ---------- 13. Panneaux, fenêtres, toasts ------------------------------- */
.voile { position: fixed; inset: 0; z-index: var(--z-voile); background: rgba(15, 18, 36, .42); opacity: 0; visibility: hidden;
  transition: opacity var(--duree-longue) var(--courbe), visibility 0s linear var(--duree-longue); }
.voile.ouvert { opacity: 1; visibility: visible; transition: opacity var(--duree-longue) var(--courbe); }
.panneau-lateral { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-panneau); width: min(480px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--bord); box-shadow: var(--ombre-3); transform: translateX(104%); visibility: hidden;
  transition: transform var(--duree-longue) var(--courbe), visibility 0s linear var(--duree-longue); }
.panneau-lateral.ouvert { transform: none; visibility: visible; transition: transform var(--duree-longue) var(--courbe); }
.panneau-lateral > header, .fenetre > header { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--bord); }
.panneau-lateral > header h2, .fenetre > header h2 { margin: 0; font-size: var(--t-l); flex: 1; min-width: 0; }
.panneau-lateral > .corps, .fenetre > .corps { flex: 1; overflow-y: auto; padding: var(--e-5); }
.panneau-lateral > footer, .fenetre > footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); padding: var(--e-4) var(--e-5); border-top: 1px solid var(--bord); background: var(--surface); }
.panneau-lateral .actions { display: flex; flex-wrap: wrap; gap: var(--e-2); padding: var(--e-3) var(--e-5); border-bottom: 1px solid var(--bord); }

.fenetre { position: fixed; z-index: var(--z-fenetre); left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 760px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon-l); box-shadow: var(--ombre-3); animation: fenetre-entre var(--duree-longue) var(--courbe); }
.fenetre.large { width: min(820px, calc(100vw - 32px)); }
.fenetre .etapes { display: flex; gap: var(--e-2); padding: var(--e-3) var(--e-5); font-size: var(--t-s); color: var(--texte-doux); border-bottom: 1px solid var(--bord); }
.fenetre .etapes [aria-current="step"] { color: var(--violet-fonce); font-weight: 600; }

.toast { position: fixed; z-index: var(--z-toast); left: 50%; bottom: var(--e-5); transform: translateX(-50%); display: flex; align-items: center; gap: var(--e-4);
  max-width: calc(100vw - 32px); padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5); border-radius: var(--rayon);
  background: var(--toast-f); color: var(--toast-t); box-shadow: 0 12px 32px rgba(15, 18, 36, .35); font-size: var(--t-m); animation: toast-entre var(--duree-longue) var(--courbe); }
.toast button { border: 0; background: var(--toast-btn-f); color: var(--toast-btn-t); font-weight: 600; height: 32px; padding: 0 var(--e-3); border-radius: var(--rayon-s); }
.toast button:hover { filter: brightness(1.15); }
.toast .ico { color: var(--toast-ok); }
.toast.erreur .ico { color: var(--toast-erreur); }

.enregistre { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-xs); font-weight: 500; color: var(--texte-doux); animation: fondu var(--duree-longue) var(--courbe); }
.enregistre::before { content: "✓"; color: var(--ok); font-weight: 700; }
.enregistre.en-cours::before { content: "…"; color: var(--texte-doux); }

/* ---------- 14. Paramètres ------------------------------------------- */
.grille-parametres { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e-4); }
.carte-param { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; column-gap: var(--e-3); align-items: center;
  padding: var(--e-4) var(--e-5); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-1);
  color: var(--texte); text-align: left; text-decoration: none; width: 100%;
  transition: border-color var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), transform var(--duree) var(--courbe); }
.carte-param:hover { border-color: var(--bord-fort); box-shadow: var(--ombre-2); text-decoration: none; }
.carte-param:hover::after { color: var(--violet-fonce); transform: translateX(3px); }
.carte-param::after { content: "›"; grid-column: 3; grid-row: 1 / 3; font-size: 20px; color: var(--texte-doux); transition: transform var(--duree) var(--courbe); }
.carte-param > .ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 10px; background: var(--violet-doux); color: var(--violet-fonce); }
.carte-param h3, .carte-param .titre { margin: 0; font: 600 var(--t-m)/1.3 var(--police); }
.carte-param .etat { font-size: var(--t-s); color: var(--texte-doux); line-height: 1.4; display: flex; align-items: center; gap: var(--e-1); }
.carte-param .etat.alerte { color: var(--alerte); }

/* ---------- 15. Connexion (lot 0, conservé) -------------------------------- */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: var(--e-5) var(--e-4); background: var(--fond); }
.carte-connexion { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-l); padding: var(--e-6) 28px; box-shadow: var(--ombre-2); }
.carte-connexion .marque { font-size: 28px; }
.carte-connexion p { margin: var(--e-1) 0 var(--e-4); }
.carte-connexion label { margin-top: var(--e-3); }
.carte-connexion .btn-principal { width: 100%; margin-top: var(--e-4); height: 44px; }
.qr { display: block; margin: var(--e-3) auto; width: 200px; height: 200px; background: #fff; border-radius: var(--rayon-s); padding: 6px; }
.secret { font-family: var(--police-mono); word-break: break-all; background: var(--surface-2); padding: var(--e-2); border-radius: var(--rayon-s); }
.codes { columns: 2; font-family: var(--police-mono); padding-left: 18px; }

/* ---------- 16. Mouvement ------------------------------------------------- */
@keyframes apparait { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes fenetre-entre { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes toast-entre { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes feuille-entre { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- 17. Responsive ------------------------------------------------ */
/* Tablette : menu replié en icônes, fiche sur une colonne */
@media (max-width: 1023px) {
  .fiche:not(dl) { grid-template-columns: minmax(0, 1fr); }
  .fiche-cote { position: static; }
  .grille-champs.trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main { padding: var(--e-5) var(--e-5) var(--e-7); }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .app { grid-template-columns: 68px minmax(0, 1fr); }
  .lateral { padding: var(--e-3) var(--e-2); align-items: stretch; }
  .lateral a { justify-content: center; padding: var(--e-2); }
  .lateral .libelle, .lateral .titre-groupe, .lateral a .compteur { display: none; }
  .haut .marque { width: auto; padding-left: 0; }
  .recherche { max-width: 320px; }
}

/* Mobile 390 px : barre d'onglets en bas, tableaux en cartes */
@media (max-width: 767px) {
  :root { --haut-h: 56px; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--haut-h) 1fr; padding-bottom: calc(var(--onglets-h) + env(safe-area-inset-bottom)); }
  .lateral, .haut .marque, .haut .recherche { display: none; }
  .haut { gap: var(--e-2); padding: 0 var(--e-4); }
  .selecteur > button { min-width: 0; max-width: 58vw; }
  .selecteur > button #soc-nom, .selecteur > button .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .btn-nouveau { width: 38px; padding: 0; }
  .btn-nouveau .libelle, .btn-nouveau .fleche { display: none; }
  .liste-soc { position: fixed; left: var(--e-4); right: var(--e-4); top: calc(var(--haut-h) + 4px); min-width: 0; }
  .menu-avatar, .menu-nouveau { position: fixed; left: var(--e-4); right: var(--e-4); top: calc(var(--haut-h) + 4px); min-width: 0; }
  main { padding: var(--e-4) var(--e-4) var(--e-6); }
  main > * + *, #contenu > * + * { margin-top: var(--e-4); }
  #contenu > .entete-page + *, #contenu > .fil + * { margin-top: 0; }
  h1 { font-size: var(--t-xl); }

  .onglets-bas { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-haut); height: calc(var(--onglets-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--bord); }
  .onglets-bas a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 44px;
    font-size: 11px; font-weight: 500; color: var(--texte-doux); text-decoration: none; position: relative; }
  .onglets-bas a > :first-child { font-size: 18px; line-height: 1; }
  .onglets-bas a[aria-current="page"] { color: var(--violet-fonce); font-weight: 600; }
  .onglets-bas a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--violet); }

  .entete-page { align-items: flex-start; margin-bottom: var(--e-4); }
  .entete-page > :first-child { flex: 1 1 100%; }
  .entete-page .actions { margin-left: 0; width: 100%; }
  .entete-page .actions .btn-principal { flex: 1; }
  .groupe-btn { align-items: stretch; }

  .cartes, .cartes.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .cartes > .carte:not(.carte-kpi) { grid-column: 1 / -1; }
  .carte { padding: var(--e-4); }
  .carte-kpi { padding: var(--e-3) var(--e-4); }
  .carte-kpi .valeur { font-size: var(--t-xl); }
  .carte-liste li > a, .carte-liste li > button { padding: var(--e-3) var(--e-4); }
  .carte-liste > .carte-titre { padding: var(--e-4) var(--e-4) 0; }

  .pastilles-filtres { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--e-4)) var(--e-3); padding: 2px var(--e-4);
    scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .pastilles-filtres::-webkit-scrollbar { display: none; }
  .pastilles-filtres > button { scroll-snap-align: start; flex: none; }

  /* Tableau → liste de cartes : chaque td porte data-libelle */
  .tableau, .tableau tbody, .tableau tr, .tableau td, .tableau tfoot { display: block; width: 100%; }
  .tableau { background: transparent; border: 0; box-shadow: none; }
  .tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau tbody tr { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-2);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--e-3); }
  .tableau td { height: auto; padding: 0; border: 0; display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
  .tableau td[data-libelle]::before { content: attr(data-libelle); font-size: var(--t-xs); color: var(--texte-doux); font-weight: 500; }
  .tableau td:first-child, .tableau td.principal { font-weight: 600; }
  .tableau td:first-child::before, .tableau td.principal::before, .tableau td.num::before, .tableau td:has(.statut)::before, .tableau td:has(.societe)::before { content: none; }
  .tableau td.num { justify-content: flex-end; font-weight: 600; }
  .tableau td.actions-ligne { display: none; }
  .tableau td.vide, .tableau .vide td { grid-column: 1 / -1; justify-content: center; padding: var(--e-6) 0; }
  .tableau tfoot tr { display: flex; justify-content: space-between; padding: var(--e-3) var(--e-4); background: var(--surface-2); border-radius: var(--rayon); }
  .tableau tfoot td { background: transparent; border: 0; height: auto; width: auto; }

  .grille-champs, .grille-champs.trois { grid-template-columns: minmax(0, 1fr); }
  fieldset.bloc { padding: var(--e-4); }

  /* Lignes de facture en cartes */
  .lignes-edition, .lignes-edition tbody, .lignes-edition tfoot { display: block; }
  .lignes-edition thead { display: none; }
  .lignes-edition tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2); padding: var(--e-3) 0; border-bottom: 1px solid var(--bord); position: relative; }
  .lignes-edition td { padding: 0; border: 0; width: auto !important; min-width: 0 !important; display: block; }
  .lignes-edition td.designation { grid-column: 1 / -1; padding-right: 44px; }
  .lignes-edition td[data-libelle]::before { content: attr(data-libelle); display: block; font-size: 11px; color: var(--texte-doux); margin-bottom: 2px; }
  .lignes-edition td :is(input, select, textarea) { border-color: var(--bord-champ); background: var(--surface); }
  .lignes-edition td.total { padding-top: 0; text-align: right; align-self: end; }
  .lignes-edition td.suppr { position: absolute; top: var(--e-3); right: 0; }
  .lignes-edition td.suppr .btn-icone { opacity: 1; }
  .totaux { max-width: none; }

  .frise { overflow-x: auto; padding: var(--e-3) var(--e-4); scrollbar-width: none; }
  .frise li { flex: none; }
  .frise li:not(:last-child)::after { min-width: 16px; width: 16px; flex: none; }

  .panneau-lateral { width: 100vw; border-left: 0; }
  .fenetre, .fenetre.large { top: auto; bottom: 0; left: 0; transform: none; width: 100vw; max-height: 92vh; border-radius: var(--rayon-l) var(--rayon-l) 0 0;
    padding-bottom: env(safe-area-inset-bottom); animation: feuille-entre var(--duree-longue) var(--courbe); }
  .fenetre > footer .btn { flex: 1; }
  .toast { bottom: calc(var(--onglets-h) + var(--e-3) + env(safe-area-inset-bottom)); width: calc(100vw - 32px); justify-content: space-between; }
  .grille-parametres { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
  .choix-societes { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--e-4)); padding: 4px var(--e-4); scrollbar-width: none; }
  .choix-societes > button { flex: none; }
}

/* Impression : seul le contenu */
@media print {
  .haut, .lateral, .onglets-bas, .toast, .voile, .entete-page .actions { display: none !important; }
  .app { display: block; } main { padding: 0; max-width: none; }
  .carte, .tableau { box-shadow: none; }
}

/* ---------- Ajouts du lot 1 (intégration des écrans) ---------------------- */
.nouveau, .recherche, .selecteur, .avatar { position: relative; }
.carte-tableau { border-radius: var(--rayon); }
.liste-simple { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.liste-simple li { line-height: 1.45; }
.empreinte { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; word-break: break-all; color: var(--texte-doux); }
.carte-param.inactif { opacity: .62; cursor: not-allowed; }
.carte-param.inactif::after { display: none; }
.lignes-edition.lecture td { padding-top: var(--e-3); padding-bottom: var(--e-3); }
form.en-ligne { max-width: 320px; }
.choix-societes > button[data-mode] { min-width: 160px; justify-content: center; }
.carte-liste li > button { width: 100%; }
.total-filtre { color: var(--texte-doux); }
.total-filtre strong { color: var(--texte); margin-left: var(--e-1); }
.insecable { white-space: nowrap; }
/* revue UI lot 1 : bloquants 2, 5, 6, 7, 10 et mineurs 22, 23, 26 ; accessibilité (titre focalisé par programme) */
.lignes-edition td :is(input, select, textarea) { border-color: var(--bord-champ); background: var(--surface); }
.lignes-edition .tva { width: 128px; }
.carte-kpi .valeur { font-size: clamp(20px, 1.8vw, 26px); overflow-wrap: anywhere; }
.entete-page .actions { justify-content: flex-end; }
.groupe-btn .raison { max-width: 260px; text-align: right; }
.groupe-btn .raison:empty { display: none; }
.plus-actions .menu-plus { top: 44px; }
.menu-plus button.danger { color: var(--bloque); }
.pastille.externe { background: none; box-shadow: inset 0 0 0 2px var(--texte-doux); }
:root { --soc-6: #4D7C0F; --soc-7: #86198F; --soc-8: #0E7490; --soc-9: #A16207; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --soc-6: #A3E635; --soc-7: #E879F9; --soc-8: #67E8F9; --soc-9: #FACC15; } }
:root[data-theme="dark"] { --soc-6: #A3E635; --soc-7: #E879F9; --soc-8: #67E8F9; --soc-9: #FACC15; }
.choix-societes + .champ, .choix-societes + .cache + .champ { margin-top: var(--e-4); }
.carte > .btn, .carte > .groupe-btn, form + .btn { margin-top: var(--e-3); }
.carte-param[aria-disabled="true"] { opacity: .7; }
h1[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; box-shadow: none; }
@media (max-width: 767px) {
  .tableau .masque-mobile, .masque-mobile { display: none !important; }
  .tableau .principal { white-space: nowrap; }
}
.lignes-edition .qte { width: 64px; } .lignes-edition .pu { width: 112px; } .lignes-edition .remise { width: 72px; }
.lignes-edition .tva { width: 108px; } .lignes-edition .total { width: 112px; } .lignes-edition .suppr { width: 36px; }
.ajouts select { width: auto; max-width: 280px; }
.grille-champs input[name="remise_globale_pct"] { max-width: 120px; }