/* ============================================================
   theme.css — DESIGN SYSTEM de l'ERP (source de vérité des styles).
   Édité par le designer (tokens + composants). Chargé par index.html
   (<link>) et par design/styleguide.html. Ne PAS mettre de JS ici.
   Marque blanche : la couleur de marque est dérivée au runtime
   (appliquerPalette) — ne jamais coder une couleur de marque en dur.
   ============================================================
   ARCHITECTURE (méthodes modernes) :
   - Cascade layers @layer : ordre de priorité par rôle (voir déclaration ci-dessous).
     Une couche plus basse dans la liste l'emporte, sans bataille de spécificité.
     tokens < base < composants < pages < utilitaires.
   - Tokens 2 niveaux : primitives (palette brute) -> sémantique (rôles).
     On change un rôle (sémantique) ; les primitives changent rarement.
   - Surcharges par page : dans @layer pages, avec un sélecteur .page-<clé>
     (chaque page porte la classe page-<clé>, ex. page-achats).
   ============================================================ */

@layer tokens, base, composants, pages, utilitaires;

/* Bloc AJOUTÉ par le dev (2026-07) — surcharges de page. Priorité via l'ordre @layer (pages > composants). */
@layer pages {
  /* Tableau de bord : quand la place manque, inputs de date compacts (icône du sélecteur masquée). */
  @media (max-width:1080px){
    .page-dashboard .filtres .filtre input[type=date]{min-width:0;width:120px;padding:6px 8px;font-size:12px}
    .page-dashboard .filtres .filtre input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}
  }
}


/* Bloc AJOUTÉ par le dev (skin caisse) — placé ici juste après la déclaration de
   cascade ; la priorité vient de l'ordre @layer (pages > composants), pas de la
   position physique. N'écrase rien du reste du fichier. */
@layer pages {
  /* ============================================================
     CAISSE — skin POS sombre premium (façon JDC, modernisé)
     Scopé .page-caisse (mode normal) + .verrou-corps (mode kiosque verrouillé).
     N'affecte AUCUN autre écran. Tokens sombres locaux + finitions
     (ombres douces, halos de marque, arrondis, chiffres tabulaires).
     La couleur de marque reste dynamique (var(--primaire)) → marque blanche OK.
     Ajouté par le dev (skin caisse) ; le designer peut l'affiner ici même.
     ============================================================ */
  :is(.page-caisse, .verrou-corps){
    --fond:#0e1116; --surface:#171b23; --surface-2:#1f2531; --fond-2:#1f2531;
    --bordure:#2a313f; --texte:#eceef3; --texte-2:#98a2b3;
    --pos-accent:color-mix(in oklab, var(--primaire) 72%, #fff);
    --pos-glow:color-mix(in oklab, var(--primaire) 55%, transparent);
    color:var(--texte);
  }
  .page-caisse{ background:radial-gradient(1100px 480px at 12% -12%, #1b2233 0%, #0e1116 62%); border-radius:16px; }
  .verrou-caisse{ background:radial-gradient(1100px 480px at 12% -12%, #1b2233 0%, #0e1116 62%); }
  .verrou-caisse .verrou-tete{ background:color-mix(in oklab, var(--surface) 82%, transparent); border-bottom:1px solid var(--bordure); color:var(--texte); backdrop-filter:blur(6px); }

  /* Champs génériques dans la caisse et ses modales */
  :is(.page-caisse, .verrou-corps) input,
  :is(.page-caisse, .verrou-corps) select,
  :is(.page-caisse, .verrou-corps) textarea{ background:var(--surface-2); border-color:var(--bordure); color:var(--texte); }
  :is(.page-caisse, .verrou-corps) input::placeholder{ color:var(--texte-2); }

  /* Barre d'outils : bandeau translucide flottant */
  :is(.page-caisse, .verrou-corps) .pos2-toolbar{ background:color-mix(in oklab, var(--surface) 72%, transparent); backdrop-filter:blur(7px); border:1px solid var(--bordure); border-radius:14px; padding:8px 12px; box-shadow:0 8px 22px rgba(0,0,0,.38); }
  :is(.page-caisse, .verrou-corps) .pos2-sess{ color:var(--pos-accent); letter-spacing:.01em; }
  :is(.page-caisse, .verrou-corps) .btn-discret{ background:var(--surface-2); border:1px solid var(--bordure); color:var(--texte); }
  :is(.page-caisse, .verrou-corps) .btn-discret:hover{ background:#2b323f; border-color:#3a4152; }
  :is(.page-caisse, .verrou-corps) .btn-secondaire{ background:var(--surface-2); }
  :is(.page-caisse, .verrou-corps) .pos2-btn-fermer{ background:transparent; border:1px solid color-mix(in oklab, var(--primaire) 58%, var(--bordure)); color:var(--pos-accent); }
  :is(.page-caisse, .verrou-corps) .pos2-btn-fermer:hover{ background:color-mix(in oklab, var(--primaire) 16%, var(--surface)); }

  /* Recherche + compteur */
  :is(.page-caisse, .verrou-corps) .pos2-count{ color:var(--texte); }
  :is(.page-caisse, .verrou-corps) .pos2-recherche input{ background:var(--surface-2); border-color:var(--bordure); }
  :is(.page-caisse, .verrou-corps) .pos2-eff{ background:var(--surface-2); border-color:var(--bordure); color:var(--texte); }

  /* Tuiles produits : dégradé + halo de marque au survol */
  :is(.page-caisse, .verrou-corps) .pos2-tuile{ background:linear-gradient(180deg,#1c222e,#161b23); border:1px solid var(--bordure); box-shadow:0 2px 10px rgba(0,0,0,.36); }
  :is(.page-caisse, .verrou-corps) .pos2-tuile:hover{ border-color:color-mix(in oklab, var(--primaire) 50%, var(--bordure)); box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 1px var(--pos-glow); transform:translateY(-2px); }
  :is(.page-caisse, .verrou-corps) .pos2-img{ position:relative; }
  :is(.page-caisse, .verrou-corps) .pos2-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.4)); }
  :is(.page-caisse, .verrou-corps) .pos2-nom{ color:var(--texte); }
  :is(.page-caisse, .verrou-corps) .pos2-prix{ color:var(--pos-accent); font-variant-numeric:tabular-nums; }
  :is(.page-caisse, .verrou-corps) .pos2-badge{ box-shadow:0 3px 10px var(--pos-glow); }

  /* Panneau panier (droite) */
  :is(.page-caisse, .verrou-corps) .pos2-droite{ background:linear-gradient(180deg,#191f2a,#141822); border:1px solid var(--bordure); box-shadow:0 12px 34px rgba(0,0,0,.46); }
  :is(.page-caisse, .verrou-corps) .pos2-droite-tete{ border-bottom-color:var(--bordure); }
  :is(.page-caisse, .verrou-corps) .pos2-droite-tete select{ background:var(--surface-2); border-color:var(--bordure); color:var(--texte); }
  :is(.page-caisse, .verrou-corps) .pos2-nb{ color:var(--texte-2); }
  :is(.page-caisse, .verrou-corps) .pos2-info-groupe{ background:color-mix(in oklab, var(--primaire) 22%, var(--surface)); color:var(--pos-accent); }
  :is(.page-caisse, .verrou-corps) .pos2-vide{ color:var(--texte-2); }
  :is(.page-caisse, .verrou-corps) .pos2-cl{ background:var(--surface-2); border:1px solid transparent; }
  :is(.page-caisse, .verrou-corps) .pos2-cl:hover{ border-color:var(--bordure); }
  :is(.page-caisse, .verrou-corps) .pos2-cl-soli{ background:color-mix(in oklab, var(--primaire) 16%, var(--surface)); }
  :is(.page-caisse, .verrou-corps) .pos2-cl-nom{ color:var(--texte); }
  :is(.page-caisse, .verrou-corps) .pos2-cl-sub{ color:var(--texte-2); }
  :is(.page-caisse, .verrou-corps) .pos2-cl-mt{ color:var(--texte); font-variant-numeric:tabular-nums; }
  :is(.page-caisse, .verrou-corps) .pos2-cl-rem{ color:var(--pos-accent); }
  :is(.page-caisse, .verrou-corps) .pos2-cl-x{ color:var(--pos-accent); }

  /* Pied panier : total + actions */
  :is(.page-caisse, .verrou-corps) .pos2-pied{ border-top-color:var(--bordure); background:linear-gradient(180deg,transparent,rgba(0,0,0,.22)); }
  :is(.page-caisse, .verrou-corps) .pos2-total span{ color:var(--texte-2); }
  :is(.page-caisse, .verrou-corps) .pos2-total b{ color:var(--pos-accent); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
  :is(.page-caisse, .verrou-corps) .pos2-btn-effacer{ background:var(--surface-2); border-color:var(--bordure); color:var(--texte); }
  :is(.page-caisse, .verrou-corps) .pos2-btn-effacer:hover:not(:disabled){ background:#2b323f; }
  :is(.page-caisse, .verrou-corps) .pos2-btn-paiement{ box-shadow:0 8px 20px var(--pos-glow); }
  :is(.page-caisse, .verrou-corps) .pos2-btn-paiement:hover:not(:disabled){ filter:brightness(1.07); }

  /* Modales caisse (paiement, quantité, divers, mixte, sur compte, validation) */
  :is(.page-caisse, .verrou-corps) .voile{ background:rgba(6,8,12,.62); backdrop-filter:blur(3px); }
  :is(.page-caisse, .verrou-corps) .pos2-modal{ background:linear-gradient(180deg,#1b212c,#151a22); border:1px solid var(--bordure); box-shadow:0 26px 72px rgba(0,0,0,.62); }
  :is(.page-caisse, .verrou-corps) .pos2-modal-tete{ background:linear-gradient(180deg, var(--primaire), var(--primaire-fonce)); }
  :is(.page-caisse, .verrou-corps) .pos2-modal-pied{ border-top-color:var(--bordure); }
  :is(.page-caisse, .verrou-corps) .pos2-lab{ color:var(--texte); }
  :is(.page-caisse, .verrou-corps) .pos2-saisie{ background:var(--surface-2); border-color:var(--bordure); color:var(--texte); }
  :is(.page-caisse, .verrou-corps) .pos2-paie-c{ background:var(--surface-2); border-color:var(--bordure); color:var(--texte); }
  :is(.page-caisse, .verrou-corps) .pos2-paie-c:hover{ border-color:var(--primaire); box-shadow:0 12px 28px rgba(0,0,0,.5); transform:translateY(-2px); }
  :is(.page-caisse, .verrou-corps) .pos2-paie-l{ color:var(--pos-accent); }
  :is(.page-caisse, .verrou-corps) .pos2-rendu-b{ background:var(--surface-2); border-color:var(--bordure); }
  :is(.page-caisse, .verrou-corps) .pos2-rendu-l{ color:var(--texte-2); }
  :is(.page-caisse, .verrou-corps) .pos2-rendu-v{ font-variant-numeric:tabular-nums; }
  :is(.page-caisse, .verrou-corps) .pos2-btn-ok{ box-shadow:0 8px 20px var(--pos-glow); }

  /* Compacité caisse — plus dense, moins « énorme » */
  :is(.page-caisse, .verrou-corps) .pos2{ grid-template-columns:1fr 316px; gap:12px; }
  :is(.page-caisse, .verrou-corps) .pos2-grille{ grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; }
  :is(.page-caisse, .verrou-corps) .pos2-img{ height:78px; }
  :is(.page-caisse, .verrou-corps) .pos2-img span{ font-size:22px; }
  :is(.page-caisse, .verrou-corps) .pos2-tuile-bas{ padding:7px 9px; }
  :is(.page-caisse, .verrou-corps) .pos2-nom{ font-size:12.5px; }
  :is(.page-caisse, .verrou-corps) .pos2-prix{ font-size:12px; margin-top:2px; }
  :is(.page-caisse, .verrou-corps) .pos2-badge{ font-size:10px; padding:1px 6px; top:6px; right:6px; }
  :is(.page-caisse, .verrou-corps) .pos2-count{ font-size:14px; }
  :is(.page-caisse, .verrou-corps) .pos2-recherche{ gap:8px; margin-bottom:8px; }
  :is(.page-caisse, .verrou-corps) .pos2-recherche input{ padding:7px 10px; font-size:13px; }
  :is(.page-caisse, .verrou-corps) .pos2-cart{ padding:7px 10px; gap:5px; }
  :is(.page-caisse, .verrou-corps) .pos2-cl{ padding:6px 7px; }
  :is(.page-caisse, .verrou-corps) .pos2-cl-img{ width:34px; height:34px; }
  :is(.page-caisse, .verrou-corps) .pos2-cl-nom{ font-size:12.5px; }
  :is(.page-caisse, .verrou-corps) .pos2-cl-sub{ font-size:11px; }
  :is(.page-caisse, .verrou-corps) .pos2-droite-tete{ padding:9px 11px; }
  :is(.page-caisse, .verrou-corps) .pos2-toolbar .btn{ padding:6px 10px; font-size:12.5px; }

  /* Pavé de paiement inline (sous le panier, façon comptoir JDC) */
  :is(.page-caisse, .verrou-corps) .pos2-pay{ border-top:1px solid var(--bordure); padding:9px 10px; display:flex; flex-direction:column; gap:8px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.22)); }
  :is(.page-caisse, .verrou-corps) .pos2-pay-ecran{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
  :is(.page-caisse, .verrou-corps) .pos2-pay-l{ background:var(--surface-2); border:1px solid var(--bordure); border-radius:9px; padding:6px 9px; display:flex; flex-direction:column; gap:1px; }
  :is(.page-caisse, .verrou-corps) .pos2-pay-l span{ font-size:10px; color:var(--texte-2); text-transform:uppercase; letter-spacing:.04em; }
  :is(.page-caisse, .verrou-corps) .pos2-pay-l b{ font-size:16px; font-variant-numeric:tabular-nums; color:var(--texte); }
  :is(.page-caisse, .verrou-corps) .pos2-pay-ecran .pos2-pay-l:first-child b{ color:var(--pos-accent); }
  :is(.page-caisse, .verrou-corps) .pos2-pay-rendre.actif b{ color:#4ade80; }
  :is(.page-caisse, .verrou-corps) .pos2-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  :is(.page-caisse, .verrou-corps) .pos2-pad-t{ font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; padding:10px 0; border-radius:10px; border:1px solid var(--bordure); background:linear-gradient(180deg,#232a36,#1b212b); color:var(--texte); cursor:pointer; transition:transform .05s,background .12s; }
  :is(.page-caisse, .verrou-corps) .pos2-pad-t:hover{ background:#2b3340; }
  :is(.page-caisse, .verrou-corps) .pos2-pad-t:active{ transform:scale(.95); }
  :is(.page-caisse, .verrou-corps) .pos2-pad-c{ padding:8px 0; border-radius:10px; border:1px solid var(--bordure); background:var(--surface-2); color:var(--texte-2); font-weight:600; font-size:12.5px; cursor:pointer; }
  :is(.page-caisse, .verrou-corps) .pos2-pad-c:hover:not(:disabled){ background:#2b3340; color:var(--texte); }
  :is(.page-caisse, .verrou-corps) .pos2-pad-c:disabled{ opacity:.45; cursor:not-allowed; }
  :is(.page-caisse, .verrou-corps) .pos2-pay-moyens{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
  :is(.page-caisse, .verrou-corps) .pos2-pay-m{ padding:11px 3px; border-radius:11px; border:1px solid var(--bordure); font-weight:800; font-size:13px; cursor:pointer; background:linear-gradient(180deg,#232a36,#1b212b); color:var(--texte); transition:filter .12s,transform .05s,border-color .12s,box-shadow .12s; }
  :is(.page-caisse, .verrou-corps) .pos2-pay-m:hover:not(:disabled){ border-color:color-mix(in oklab, var(--primaire) 55%, var(--bordure)); box-shadow:0 8px 18px var(--pos-glow); }
  :is(.page-caisse, .verrou-corps) .pos2-pay-m:active:not(:disabled){ transform:translateY(1px); }
  :is(.page-caisse, .verrou-corps) .pos2-pay-m:disabled{ opacity:.4; cursor:not-allowed; }
  :is(.page-caisse, .verrou-corps) .pos2-pay-m-def{ background:var(--primaire); color:#fff; border-color:transparent; box-shadow:0 6px 16px var(--pos-glow); }
  :is(.page-caisse, .verrou-corps) .pos2-pay-m-def:hover:not(:disabled){ filter:brightness(1.08); }
  :is(.page-caisse, .verrou-corps) .pos2-pay-plus{ display:flex; align-items:center; gap:7px; }
  :is(.page-caisse, .verrou-corps) .pos2-pay-plus .btn{ flex:1; padding:7px 6px; font-size:12.5px; }
  :is(.page-caisse, .verrou-corps) .pos2-pay-fac{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--texte-2); white-space:nowrap; }
  :is(.page-caisse, .verrou-corps) .pos2-pay-actions{ display:flex; gap:7px; }
  :is(.page-caisse, .verrou-corps) .pos2-pay-actions .pos2-btn-effacer{ flex:1; padding:8px; }

  /* Accessibilité : focus visible net sur fond sombre */
  :is(.page-caisse, .verrou-corps) .pos2-tuile:focus-visible,
  :is(.page-caisse, .verrou-corps) .pos2-paie-c:focus-visible,
  :is(.page-caisse, .verrou-corps) button:focus-visible{ outline:2px solid var(--pos-accent); outline-offset:2px; }
}

@layer tokens {
:root{
  /* ---- Primitives (palette brute — échelles du design system) ---- */
  --white:#ffffff;
  /* --neutral-500 relevé de #848490 à #6b6b78 pour l'accessibilité : le gris de texte passe de 3,69:1
     (échec WCAG AA) à 5,25:1 sur blanc. Il alimente --texte-2 ET --gris. */
  --neutral-50:#fafafa; --neutral-100:#f4f4f5; --neutral-200:#e3e3e8; --neutral-500:#6b6b78; --neutral-900:#17171c;
  --success-600:#1aa910; --success-100:#defddb;
  --info-600:#2563eb;    --info-100:#dbeafe;
  --danger-600:#da2828;  --danger-100:#fee2e2;
  --warning-600:#dd7802; --warning-100:#fff4c6;
  /* Primitives statistiques (data-viz) : 8 teintes catégorielles, stop « 600 » (fort).
     Pas de tint -100 : le fond clair est dérivé en color-mix côté composant. */
  --stat-1-600:#2f6fd6; --stat-2-600:#2f9e5b; --stat-3-600:#cf3a48; --stat-4-600:#dd8a24;
  --stat-5-600:#7b48d1; --stat-6-600:#139c94; --stat-7-600:#d24d90; --stat-8-600:#5a67c0;
  --radius-md:12px; --radius-sm:8px;

  /* ---- Marque (marque blanche) — SEULE --primaire est injectée au runtime ;
     tous les états sont DÉRIVÉS ici en CSS via color-mix (oklab), déterministe.
     Ratios calibrés sur l'échelle du designer (blanc = éclaircir, noir = foncer). ---- */
  --primaire:#b60029;
  --primaire-hover:color-mix(in oklab, var(--primaire) 90%, #000);   /* survol : +10% noir */
  --primaire-actif:color-mix(in oklab, var(--primaire) 71%, #000);   /* pressed : +29% noir */
  --primaire-fonce:color-mix(in oklab, var(--primaire) 82%, #000);   /* bordures/en-têtes : +18% noir */
  --primaire-disabled:color-mix(in oklab, var(--primaire) 49%, #fff); /* désactivé : +51% blanc */
  --primaire-light:color-mix(in oklab, var(--primaire) 29%, #fff);   /* fond léger/halo : +71% blanc */
  --primaire-clair:color-mix(in oklab, var(--primaire) 10%, #fff);   /* très pâle : +90% blanc */
  /* Marque en TEXTE : identique au primaire en clair, ÉCLAIRCIE en sombre (voir @supports).
     Le primaire brut (#b60029) sur fond sombre ne fait que 2,86:1 → illisible. Utiliser ce token
     pour tout TEXTE/icône en couleur de marque ; garder --primaire pour les FONDS. */
  --primaire-texte:var(--primaire);
  /* Survol d'un texte/bordure de marque : plus foncé en clair, plus CLAIR en sombre (voir @supports)
     — dans les deux cas le contraste augmente. */
  --primaire-texte-hover:var(--primaire-hover);

  /* ---- Sémantique (rôles — pointent vers les primitives) ---- */
  --fond:var(--white); --surface:var(--white); --surface-2:var(--neutral-100);
  --texte:var(--neutral-900); --texte-2:var(--neutral-500); --bordure:var(--neutral-200);
  --bordure-carte:var(--surface); /* bordure des cartes : invisible en clair, = --bordure en sombre (voir @supports) */
  --gris:var(--neutral-500); --gris-clair:var(--neutral-50);
  --vert:var(--success-600); --vert-clair:var(--success-100);
  --bleu:var(--info-600); --bleu-clair:var(--info-100);
  --rouge:var(--danger-600); --rouge-clair:var(--danger-100);
  --warning:var(--warning-600); --warning-clair:var(--warning-100);

  /* ---- Statistiques (sous-classe couleur — AU MÊME TITRE QUE la sémantique ci-dessus) ----
     Rôles data-viz catégoriels --stat-1..8 → primitives --stat-*-600 (modèle à 2 niveaux, comme la
     sémantique). VOLONTAIREMENT distincts des rôles sémantiques : ici la couleur = un identifiant de
     catégorie (graphes, légendes, cartes stat), PAS un état. Bascule sombre dans @supports. */
  --stat-1:var(--stat-1-600); --stat-2:var(--stat-2-600); --stat-3:var(--stat-3-600); --stat-4:var(--stat-4-600);
  --stat-5:var(--stat-5-600); --stat-6:var(--stat-6-600); --stat-7:var(--stat-7-600); --stat-8:var(--stat-8-600);

  --rayon:var(--radius-md); --rayon-sm:var(--radius-sm);

  /* ---- Ombres, typo, layout ---- */
  --ombre:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --ombre-md:0 10px 26px rgba(16,24,40,.20),0 4px 9px rgba(16,24,40,.12);
  --ombre-lg:0 20px 60px rgba(0,0,0,.25);
  --police:'Inter',system-ui,sans-serif; --police-titres:'Poppins','Inter',system-ui,sans-serif;
  --sidebar-w:230px;
}

/* ---- Dark mode (méthode moderne : color-scheme + light-dark) ----
   DORMANT : color-scheme:light => light-dark() renvoie la valeur CLAIRE (rendu 100% identique aujourd'hui).
   POUR ACTIVER : passer color-scheme à « light dark » (après audit des couleurs codées en dur
   dans les composants — beaucoup de #fff/#000 littéraux à migrer vers les tokens d'abord).
   Garde @supports => aucune régression sur les navigateurs qui ne connaissent pas light-dark(). */
@supports (color: light-dark(#fff, #000)){
  :root{
    color-scheme: light;
    --fond: light-dark(var(--white), #09090b);
    --surface: light-dark(var(--white), #17171c);
    --surface-2: light-dark(var(--neutral-100), #26262b);
    --texte: light-dark(var(--neutral-900), #f4f4f5);
    --texte-2: light-dark(var(--neutral-500), #9f9fac);
    /* Marque en texte : éclaircie en sombre pour repasser au-dessus de 4,5:1. */
    --primaire-texte: light-dark(var(--primaire), color-mix(in oklab, var(--primaire) 62%, #fff));
    --primaire-texte-hover: light-dark(var(--primaire-hover), color-mix(in oklab, var(--primaire) 45%, #fff));
    /* Teintes pâles de marque : en sombre, mélanger avec --surface (et non #fff), sinon un fond rose pâle
       reste clair en thème sombre et le texte devient illisible. */
    --primaire-clair: light-dark(color-mix(in oklab, var(--primaire) 10%, #fff), color-mix(in oklab, var(--primaire) 20%, var(--surface)));
    --primaire-light: light-dark(color-mix(in oklab, var(--primaire) 29%, #fff), color-mix(in oklab, var(--primaire) 32%, var(--surface)));
    --bordure: light-dark(var(--neutral-200), #3e3e47);
    --bordure-carte: light-dark(var(--surface), var(--bordure));
    --gris: light-dark(var(--neutral-500), #9f9fac);
    --gris-clair: light-dark(var(--neutral-50), #17171c);
    --vert: light-dark(var(--success-600), #50e444);
    --vert-clair: light-dark(var(--success-100), #043003);
    --bleu: light-dark(var(--info-600), #60a5fa);
    --bleu-clair: light-dark(var(--info-100), #172554);
    --rouge: light-dark(var(--danger-600), #f77272);
    --rouge-clair: light-dark(var(--danger-100), #440b0b);
    --warning: light-dark(var(--warning-600), #ffc21f);
    --warning-clair: light-dark(var(--warning-100), #461a02);
    /* Statistiques : light = primitive --stat-*-600 ; dark = teinte éclaircie (contraste sur fond foncé). */
    --stat-1: light-dark(var(--stat-1-600), #6ea6f5);
    --stat-2: light-dark(var(--stat-2-600), #57d98c);
    --stat-3: light-dark(var(--stat-3-600), #f2777f);
    --stat-4: light-dark(var(--stat-4-600), #f2b445);
    --stat-5: light-dark(var(--stat-5-600), #a98cef);
    --stat-6: light-dark(var(--stat-6-600), #3fd3c6);
    --stat-7: light-dark(var(--stat-7-600), #f284bd);
    --stat-8: light-dark(var(--stat-8-600), #8f9ce8);
  }
  /* Bascule MANUELLE : l'app (JS) pose data-theme="dark|light" sur <html>.
     color-scheme est hérité => tous les tokens light-dark() basculent d'un coup. */
  :root[data-theme="dark"]{ color-scheme: dark; }
  :root[data-theme="light"]{ color-scheme: light; }
}
} /* @layer tokens */

@layer base {
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--police);background:var(--fond);color:var(--texte);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select{font-family:inherit}
input,select,textarea{accent-color:var(--primaire)}
/* Champs de saisie — base DS (2026-07, dev) : tout input/select/textarea SANS classe hérite du look du design system.
   :where() = spécificité 0 -> .saisie / .champ input / .filtre input / styles inline priment. Cases/radios/fichiers/boutons exclus. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset])),select,textarea{font-family:inherit;color:var(--texte);background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon-sm);padding:7px 10px;font-size:13px;max-width:100%}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
/* Accessibilité — FOCUS CLAVIER visible par défaut sur tout élément focusable (RGAA / WCAG 2.1 AA).
   Halo net de 2px en couleur de marque lisible (--primaire-texte, éclairci en sombre).
   Les composants peuvent l'affiner (cloche, profil, fil…) ; le skin caisse le surcharge en @layer pages.
   ⚠️ Ne JAMAIS poser outline:none sans un remplacement visible (bordure + halo). */
:focus-visible{outline:2px solid var(--primaire-texte);outline-offset:2px}
} /* @layer base */

@layer composants {
.app{display:flex;height:100dvh;overflow:hidden}
/* Teintes de texte de la navbar : DÉRIVÉES de la marque en color-mix (blanc + --primaire), au lieu de roses
   codés en dur. En marque blanche elles suivent donc n'importe quelle couleur client. (Le fond = --primaire ;
   le design suppose une marque assez foncée pour du texte clair, comme le #fff déjà utilisé ici.) */
.sidebar{--nav-txt:color-mix(in oklab, var(--primaire) 16%, #fff);--nav-txt-2:color-mix(in oklab, var(--primaire) 26%, #fff);--nav-txt-off:color-mix(in oklab, var(--primaire) 42%, #fff);width:var(--sidebar-w);background:var(--primaire);color:#fff;padding:20px 14px;flex-shrink:0;display:flex;flex-direction:column;height:100dvh;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:99px}
.logo{font-family:var(--police-titres);font-size:20px;font-weight:800;letter-spacing:.12em;padding:6px 12px 22px}
.marque{display:flex;align-items:center;gap:9px;padding:2px 6px 18px}
.logo-chip{background:#fff;border-radius:6px;padding:3px 5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-img{max-height:28px;max-width:90px;display:block}
.marque-nom{font-family:var(--police-titres);font-weight:800;font-size:15px;letter-spacing:.02em;color:#fff;line-height:1.15}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--nav-txt);text-decoration:none;font-weight:500;margin-bottom:2px;cursor:pointer}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.actif{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
.nav-groupe{margin-bottom:1px}
.nav-gh{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--nav-txt);font-weight:600;cursor:pointer;user-select:none}
.nav-gh:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-gh .chev{margin-left:auto;font-size:10px;transition:transform .18s}
.nav-gh .chev.o{transform:rotate(90deg)}
.nav-sub a{display:block;padding:7px 12px 7px 40px;border-radius:8px;color:var(--nav-txt-2);text-decoration:none;font-size:13px;cursor:pointer}
.nav-sub a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-sub a.actif{background:rgba(255,255,255,.18);color:#fff;font-weight:600}
.nav-sub a.disabled{color:var(--nav-txt-off);opacity:.55;cursor:default}
.nav-sub a.disabled:hover{background:none;color:var(--nav-txt-off)}
.sidebar .pied{margin-top:auto;padding-top:8px}
.lien-deco{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:8px;color:var(--nav-txt, color-mix(in oklab, var(--primaire) 16%, #fff));cursor:pointer;font-weight:500;font-size:13px}
.carte-table .lien-deco{display:inline-flex;color:var(--primaire-texte);padding:4px 7px;font-weight:600}.carte-table .lien-deco:hover{background:var(--primaire-clair)}
.lien-deco:hover{background:rgba(255,255,255,.1);color:#fff}
.principal{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;height:100dvh}
.entete{background:var(--surface);border-bottom:1px solid var(--bordure);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.entete h1{font-family:var(--police-titres);font-size:18px;font-weight:800;line-height:1.2}
.utilisateur{display:flex;align-items:center;gap:10px;color:var(--texte-2);font-size:13px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primaire);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
/* En-tête : le fil d'Ariane remplace le titre de page (à gauche) ; le bloc notif/profil reste à droite. */
.entete .fil{margin-bottom:0}

/* Notifications — cloche + pastille de compteur + menu déroulant, prêts pour la donnée.
   Ouverture/fermeture du menu = comportement (JS ou <details>) → Nico. La pastille de compteur est en
   --rouge (alerte), PAS en marque : un compteur doit rester rouge quel que soit le client (marque blanche).
   Markup type :
   <div class="notifs">
     <button class="cloche" aria-label="Notifications" aria-expanded="false">{svg cloche}<span class="cloche-badge">9+</span></button>
     <div class="notif-menu"> … </div>
   </div> */
.notifs{position:relative;display:flex;align-items:center}
.cloche{position:relative;background:transparent;border:none;cursor:pointer;color:var(--texte-2);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s,color .12s}
.cloche:hover{background:var(--surface-2);color:var(--texte)}
.cloche:focus-visible{outline:2px solid var(--primaire-light);outline-offset:1px}
.cloche svg{width:20px;height:20px}
.cloche-badge{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--rouge);color:#fff;font-size:10.5px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
.notif-menu{position:absolute;top:calc(100% + 8px);right:0;width:344px;max-width:88vw;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);box-shadow:var(--ombre-lg);overflow:hidden;z-index:50}
.notif-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bordure)}
.notif-tete h3{font-family:var(--police-titres);font-size:15px;font-weight:700}
.notif-tete-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.notif-lien{background:none;border:none;color:var(--primaire-texte);font-size:12.5px;font-weight:600;cursor:pointer;padding:0;white-space:nowrap}
/* Bouton icône « rafraîchir » (recharge la liste) — à côté de « tout marquer lu ». */
.notif-refresh{width:32px;height:32px;flex-shrink:0;border-radius:var(--rayon-sm);border:1px solid var(--bordure);background:var(--surface);color:var(--texte-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .12s,border-color .12s}
.notif-refresh:hover{color:var(--primaire-texte);border-color:var(--primaire-texte)}
.notif-refresh:focus-visible{outline:2px solid var(--primaire-light);outline-offset:1px}
.notif-refresh svg{width:16px;height:16px}
.notif-liste{list-style:none;margin:0;padding:0;max-height:420px;overflow-y:auto}
/* Item : tag de nature (couleur --c) + titre + corps + actions. Fond teinté si .non-lu.
   Nature (sévérité/type) → couleur du tag via une classe : .notif-urgent/-attention/-info/-ok. */
.notif-item{--c:var(--gris);display:flex;flex-direction:column;gap:7px;padding:13px 16px;border-bottom:1px solid var(--bordure);color:inherit}
.notif-item:last-child{border-bottom:none}
.notif-item.non-lu{background:color-mix(in oklab, var(--primaire) 6%, var(--surface))}
.notif-item-tete{display:flex;align-items:center;gap:8px}
.notif-tag{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--c)}
.notif-titre{font-size:13.5px;font-weight:600;color:var(--texte);line-height:1.3;min-width:0}
.notif-temps{margin-left:auto;padding-left:8px;font-size:11.5px;color:var(--texte-2);flex-shrink:0;white-space:nowrap}
.notif-corps{font-size:12.5px;color:var(--texte-2);line-height:1.4}
.notif-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:3px}
.notif-urgent{--c:var(--rouge)}
.notif-attention{--c:var(--warning)}
.notif-info{--c:var(--bleu)}
.notif-ok{--c:var(--vert)}
.notif-vide{padding:28px 16px;text-align:center;color:var(--texte-2);font-size:13px}
.notif-pied{padding:10px 16px;text-align:center;border-top:1px solid var(--bordure)}
.notif-pied a{color:var(--primaire-texte);font-size:13px;font-weight:600;text-decoration:none}
/* Menu flottant — panneau générique d'une dropdown CUSTOM (autocomplétion, menu contextuel, liste déroulante).
   Style commun des dropdowns custom ; même langage visuel que le menu de notif (`.notif-menu` = membre
   spécialisé de la même famille : mêmes tokens surface/bordure). Tokenisé → dark mode.
   Le PARENT (le champ/déclencheur) doit être en position:relative. Aligné à gauche par défaut (pleine largeur du champ). */
.menu-flottant{position:absolute;z-index:50;top:calc(100% + 4px);left:0;min-width:100%;max-width:92vw;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon-sm);box-shadow:var(--ombre-md);max-height:280px;overflow-y:auto}
.menu-flottant-droite{left:auto;right:0}
.menu-option{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13.5px;color:var(--texte);white-space:nowrap}
.menu-option:hover{background:var(--surface-2)}
.menu-option.actif{background:color-mix(in oklab, var(--primaire) 12%, var(--surface));color:var(--primaire-texte)}
.menu-option-creer{color:var(--primaire-texte);font-weight:600}
.contenu{padding:24px 28px;flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
/* Sticky en-tetes de tableaux : sur une page AVEC tableau, c est le conteneur .carte-table (overflow:auto) qui scrolle, pas la page, donc th{position:sticky} tient. Pages sans tableau : scroll de page inchange. */
/* Modèle « page qui scrolle » (2026-07) : .contenu scrolle toujours ; chaque .carte-table est bornée en hauteur et scrolle en interne (thead collant). Ancienne règle .contenu:has(.carte-table){overflow:hidden} retirée. */
.btn{border:none;border-radius:var(--rayon-sm);padding:8px 16px;font-weight:600;font-size:14px;cursor:pointer;transition:all .15s}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primaire{background:var(--primaire);color:#fff}.btn-primaire:hover:not(:disabled){background:var(--primaire-hover)}.btn-primaire:active:not(:disabled){background:var(--primaire-actif)}.btn-primaire:disabled{background:var(--primaire-disabled);opacity:1}
/* Bouton secondaire : fond TRANSPARENT en permanence. Le survol/appui ne change pas le fond —
   c'est le texte ET la bordure qui s'intensifient (--primaire-texte → --primaire-texte-hover). */
.btn-secondaire{background:transparent;color:var(--primaire-texte);border:1px solid var(--primaire-texte)}
.btn-secondaire:hover:not(:disabled){background:transparent;color:var(--primaire-texte-hover);border-color:var(--primaire-texte-hover)}
.btn-secondaire:active:not(:disabled){background:transparent;color:var(--primaire-texte-hover);border-color:var(--primaire-texte-hover)}
.btn-discret{background:transparent;color:var(--texte-2);padding:10px 4px}
.barre-actions{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.barre-actions h2{font-family:var(--police-titres);font-size:22px;font-weight:800;line-height:1.15}.boutons{display:flex;gap:10px;align-items:center}
/* ===== Grille KPI responsive (règles designer 2026-07) =====
   La ligne remplit toujours la largeur du bloc ; chaque carte = 1/C (C = nb de colonnes déduit du
   NOMBRE de cartes via :has(), sans toucher au JS). justify-content:center → dernière ligne incomplète
   centrée. Plancher à 2 colonnes (2 cartes tiennent sur tous les écrans).
   Bascule : 2→2 · 3→3→2 · 4→4→2 · 5→5→3→2 · 6→3→2 (3 par ligne max). */
.kpis{--kpi-gap:14px;--kpi-c:4;display:flex;flex-wrap:wrap;gap:var(--kpi-gap);margin-bottom:18px;justify-content:center}
.kpis>*{flex:1 1 calc((100% - (var(--kpi-c) - 1) * var(--kpi-gap)) / var(--kpi-c));max-width:calc((100% - (var(--kpi-c) - 1) * var(--kpi-gap)) / var(--kpi-c));min-width:0;margin:0}
.kpis:has(>*:only-child){--kpi-c:1}
.kpis:has(>*:nth-child(2):last-child){--kpi-c:2}
.kpis:has(>*:nth-child(3):last-child){--kpi-c:3}
.kpis:has(>*:nth-child(4):last-child){--kpi-c:4}
.kpis:has(>*:nth-child(5):last-child){--kpi-c:5}
.kpis:has(>*:nth-child(6):last-child){--kpi-c:3}
@media (max-width:1200px){ .kpis:has(>*:nth-child(5):last-child){--kpi-c:3} }
@media (max-width:900px){
  .kpis:has(>*:nth-child(3):last-child){--kpi-c:2}
  .kpis:has(>*:nth-child(4):last-child){--kpi-c:2}
}
@media (max-width:680px){
  .kpis:has(>*:nth-child(5):last-child){--kpi-c:2}
  .kpis:has(>*:nth-child(6):last-child){--kpi-c:2}
}
.dash-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
/* ===== Caisse POS v3 ===== */
.pos2-wrap{display:flex;flex-direction:column;height:calc(100vh - 124px);min-height:480px}
.pos2-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pos2-sess{font-size:13px;font-weight:700;color:var(--primaire)}
.pos2-btn-fermer{background:var(--primaire);color:#fff;border:none;border-radius:10px;padding:8px 16px;font-weight:700;cursor:pointer}
.pos2{display:grid;grid-template-columns:1fr 360px;gap:14px;flex:1;min-height:0}
.pos2-gauche{display:flex;flex-direction:column;min-height:0}
.pos2-recherche{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pos2-count{font-size:17px;font-weight:800;white-space:nowrap}
.pos2-recherche input{flex:1;border:1px solid var(--bordure);border-radius:10px;padding:9px 12px;font-size:14px}
.pos2-eff{border:1px solid var(--bordure);background:var(--surface);border-radius:9px;width:36px;height:36px;cursor:pointer;font-size:15px}
.pos2-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;overflow-y:auto;padding:2px 4px 8px 0;align-content:start}
.pos2-tuile{position:relative;border:none;border-radius:16px;background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.10);cursor:pointer;text-align:left;overflow:hidden;display:flex;flex-direction:column;transition:transform .06s,box-shadow .12s}
.pos2-tuile:hover{box-shadow:0 4px 14px rgba(0,0,0,.16)}
.pos2-tuile:active{transform:scale(.97)}
.pos2-img{height:120px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.pos2-img span{color:#fff;font-size:30px;font-weight:800;letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.pos2-badge{position:absolute;top:8px;right:8px;background:var(--primaire);color:#fff;font-size:11.5px;font-weight:800;padding:2px 7px;border-radius:20px}
.pos2-tuile-bas{padding:10px 12px}
.pos2-nom{font-weight:700;font-size:14.5px;line-height:1.2;color:var(--texte)}
.pos2-prix{font-size:14px;color:var(--primaire);font-weight:700;margin-top:3px}
.pos2-droite{background:var(--surface);border-radius:16px;box-shadow:0 1px 4px rgba(0,0,0,.10);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.pos2-droite-tete{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--bordure)}
.pos2-droite-tete select{flex:1;border:1px solid var(--bordure);border-radius:10px;padding:8px 10px;font-size:13.5px;background:var(--surface)}
.pos2-nb{font-size:12.5px;color:var(--texte-2);white-space:nowrap}
.pos2-info-groupe{font-size:12px;color:var(--primaire);background:color-mix(in srgb,var(--primaire) 10%,#fff);padding:5px 14px;font-weight:600}
.pos2-cart{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.pos2-vide{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--texte-2);font-size:30px;min-height:160px}
.pos2-vide div{font-size:14px}
.pos2-cl{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:var(--surface-2)}
.pos2-cl-soli{background:color-mix(in srgb,var(--primaire) 9%,#fff)}
.pos2-cl-img{width:40px;height:40px;border-radius:9px;background-size:cover;background-position:center;flex-shrink:0}
.pos2-cl-mid{flex:1;min-width:0}
.pos2-cl-nom{font-size:13.5px;font-weight:600;line-height:1.2}
.pos2-cl-rem{color:var(--primaire);font-weight:700;font-size:12px}
.pos2-cl-sub{font-size:12px;color:var(--texte-2);margin-top:2px}
.pos2-cl-mt{font-weight:800;font-size:14px;white-space:nowrap}
.pos2-cl-x{border:none;background:none;color:var(--primaire);cursor:pointer;font-size:15px;width:24px}
.pos2-pied{border-top:1px solid var(--bordure);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
#ticket-impression{display:none}
.tk-h{text-align:center;font-weight:bold;line-height:1.45}
.tk-l{display:flex;justify-content:space-between;gap:6px;line-height:1.45}
.tk-sep{border-top:1px dashed #000;margin:5px 0}
@media print{body.impression-ticket *{visibility:hidden!important}body.impression-ticket #ticket-impression,body.impression-ticket #ticket-impression *{visibility:visible!important}body.impression-ticket #ticket-impression{display:block!important;position:absolute;left:0;top:0;width:72mm;padding:3mm;font-family:'Courier New',monospace;font-size:12px;color:#000;background:#fff}}
.pos2-total{display:flex;justify-content:space-between;align-items:baseline}
.pos2-total span{font-size:15px;color:var(--texte-2)}
.pos2-total b{font-size:24px;font-weight:800;color:var(--primaire)}
.pos2-btn-effacer{flex:1;background:var(--surface-2);border:1px solid var(--bordure);border-radius:10px;padding:11px;font-weight:600;cursor:pointer;color:var(--texte)}
.pos2-btn-paiement{flex:1.4;background:var(--primaire);color:#fff;border:none;border-radius:10px;padding:11px;font-weight:800;font-size:15px;cursor:pointer}
.pos2-btn-paiement:disabled,.pos2-btn-effacer:disabled{opacity:.5;cursor:not-allowed}
.pos2-journal{margin-top:12px}
/* pad numérique */
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pad-k{background:var(--primaire);color:#fff;border:none;border-radius:10px;padding:16px 0;font-size:20px;font-weight:700;cursor:pointer}
.pad-k:active{filter:brightness(.92)}
.pad-x{background:var(--primaire)!important}
.pad-pt{background:#b07a1e!important}
/* modales POS */
.pos2-modal{background:var(--surface);border-radius:14px;width:min(680px,94vw);max-height:92vh;overflow:auto;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.pos2-modal-lg{width:min(820px,95vw)}
.pos2-modal-tete{background:var(--primaire);color:#fff;font-size:17px;font-weight:700;padding:14px 18px;border-radius:14px 14px 0 0;display:flex;justify-content:space-between;align-items:center}
.pos2-x-tete{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1}
.pos2-modal-corps{padding:18px 20px}
.pos2-modal-pied{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--bordure)}
.pos2-lab{font-size:14px;font-weight:700}
.pos2-saisie{width:100%;border:1px solid var(--bordure);border-radius:10px;padding:11px 12px;font-size:18px;margin:8px 0 12px;background:var(--surface)}
.pos2-btn-ok{background:var(--primaire);color:#fff;border:none;border-radius:10px;padding:11px 22px;font-weight:700;font-size:15px;cursor:pointer}
.pos2-btn-ok:disabled{opacity:.6}
.pos2-btn-v{flex:1;background:var(--primaire);color:#fff;border:none;border-radius:9px;padding:12px 0;font-weight:700;font-size:16px;cursor:pointer}
.pos2-btn-x{background:var(--primaire);color:#fff;border:none;border-radius:9px;padding:12px 18px;font-weight:700;cursor:pointer}
.pos2-paie{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pos2-paie-c{border:1px solid var(--bordure);border-radius:14px;background:var(--surface);cursor:pointer;padding:20px 10px;display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .06s,box-shadow .12s}
.pos2-paie-c:hover{box-shadow:0 4px 16px rgba(0,0,0,.15);transform:translateY(-2px)}
.pos2-paie-ic{font-size:54px;line-height:1}
.pos2-paie-l{color:var(--primaire);font-weight:800;font-size:18px}
.pos2-rendu{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.pos2-rendu-b{border:1px solid var(--bordure);border-radius:12px;padding:14px 22px;text-align:center;min-width:120px}
.pos2-rendu-l{font-size:14px;font-weight:700;margin-bottom:6px}
.pos2-rendu-v{font-size:26px;font-weight:800}
.pos2-fl{color:var(--primaire);font-size:22px;font-weight:800}
.verrou-caisse{height:100vh;display:flex;flex-direction:column;background:var(--fond,#f4f4f5);overflow:hidden}
.verrou-tete{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--primaire);color:#fff;position:relative;flex:none}
.verrou-tete .marque-nom{font-weight:700;letter-spacing:.3px}
.verrou-badge{font-size:12.5px;opacity:.92}
.verrou-exit{position:absolute;top:0;right:0;width:56px;height:46px;background:transparent;border:none;cursor:default}
.verrou-corps{padding:12px 16px;width:100%;flex:1;min-height:0;display:flex;flex-direction:column}
.verrou-corps .pos2-wrap{height:auto;flex:1;min-height:0}
.kpi{background:var(--surface);border:1px solid var(--bordure-carte);border-radius:var(--rayon);padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--ombre-md)}
.kpi .libelle{font-size:14px;color:var(--texte-2);font-weight:400;display:flex;align-items:center;gap:8px}
.kpi .valeur{font-family:var(--police-titres);font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
/* Icône optionnelle à côté du titre KPI : <span class="kpi-ic">…</span> (glyphe, emoji ou SVG).
   color:inherit => l'icône suit la couleur du titre (.libelle). */
.kpi-ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;font-size:16px;line-height:1;color:inherit}
/* ===== Composants STATISTIQUES (couleurs = tokens --stat-1..8, jamais les rôles sémantiques) ===== */

/* Carte Stat — bandeau statistique PARAMÉTRABLE (ex « mini-KPI »). Une variable --c pilote la couleur.
   4 axes d'options combinables :
   • COULEUR : .carte-stat-1..8 (palette --stat-*) ou .carte-stat-neutre (gris).
   • TAILLE  : normale (défaut) ou .carte-stat-sm (compacte).
   • ICÔNE   : optionnelle → <span class="carte-stat-ic">…</span> en tête (glyphe/emoji/SVG, prend --c).
   • VALEUR  : optionnelle → <span class="valeur">…</span>. Sans elle = simple étiquette d'info.
   Fond = teinte color-mix(--c 12%, surface) ; bordure = --c ; libellé grisé, valeur en --c.
   DARK : fond neutre, bordure + écriture en --c. */
.stats-cartes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.carte-stat{--c:var(--stat-1);display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;border:1px solid var(--c);background:color-mix(in oklab, var(--c) 12%, var(--surface));font-size:14px;white-space:nowrap}
.carte-stat-ic{display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--c);flex-shrink:0}
.carte-stat .libelle{color:var(--texte-2);font-weight:500}
.carte-stat .valeur{color:var(--c);font-weight:700;font-variant-numeric:tabular-nums}
/* Taille compacte (couvre l'ancien candidat « puce / étiquette d'info ») */
.carte-stat-sm{padding:4px 11px;gap:6px;font-size:12px}
.carte-stat-sm .carte-stat-ic{font-size:13px}
/* Couleurs : palette statistique + neutre */
.carte-stat-1{--c:var(--stat-1)} .carte-stat-2{--c:var(--stat-2)} .carte-stat-3{--c:var(--stat-3)} .carte-stat-4{--c:var(--stat-4)}
.carte-stat-5{--c:var(--stat-5)} .carte-stat-6{--c:var(--stat-6)} .carte-stat-7{--c:var(--stat-7)} .carte-stat-8{--c:var(--stat-8)}
.carte-stat-neutre{--c:var(--gris)}
/* Dark : fond neutre (bordure + valeur restent en --c) → seul le libellé reprend la couleur. */
:root[data-theme="dark"] .carte-stat{background:transparent}
:root[data-theme="dark"] .carte-stat .libelle{color:var(--c)}

/* Carte à accent latéral — conteneur (carte / bandeau) avec un liseré vertical coloré à gauche.
   Inspiré des Cartes Stat : couleur pilotée par --c, variabilité par le CONTENU (libre : message, titre+valeur, ligne…).
   L'accent est un bandeau ::before au coin VOLONTAIREMENT moins arrondi que la carte (rayon 2px vs --rayon) et
   légèrement inséré → il ne suit pas l'arrondi de la carte, dont la roundness reste inchangée.
   Couleur = STATUT/sévérité (sémantique, pas catégorie) : bandeau d'alerte = warning, succès = vert, etc.
   Dark mode gratuit (surface + tokens sémantiques). */
.carte-accent{--c:var(--primaire);position:relative;background:var(--surface);border:1px solid var(--bordure-carte);border-radius:var(--rayon);box-shadow:var(--ombre-md);padding:13px 16px 13px 22px}
.carte-accent::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:4px;border-radius:2px;background:var(--c)}
.carte-accent-primaire{--c:var(--primaire)}
.carte-accent-vert{--c:var(--vert)}
.carte-accent-rouge{--c:var(--rouge)}
.carte-accent-warning{--c:var(--warning)}
.carte-accent-bleu{--c:var(--bleu)}
.carte-accent-neutre{--c:var(--gris)}
/* Sous-parties optionnelles réutilisables dans une carte-accent (ex. « puce/carte à valeur ») */
.carte-accent .valeur{color:var(--c);font-weight:700;font-variant-numeric:tabular-nums}

/* ===== Pipeline de leads (kanban) — colonnes d'étape + cartes déplaçables =====
   Chaque colonne porte sa couleur d'étape via --c (palette --stat-* : ce sont des CATÉGORIES).
   Les cartes sont des .carte-accent (accent latéral) rendues déplaçables via .carte-accent-drag.
   Responsive : la rangée défile horizontalement, les colonnes ne s'écrasent jamais. */
.pipeline{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.pipeline-col{--c:var(--gris);flex:0 0 clamp(238px,25vw,300px);display:flex;flex-direction:column;min-width:0}
.pipeline-tete{display:flex;align-items:center;gap:8px;padding:0 2px 8px;border-bottom:3px solid var(--c)}
.pipeline-puce{width:9px;height:9px;border-radius:50%;background:var(--c);flex-shrink:0}
.pipeline-titre{font-weight:700;font-size:14.5px;color:var(--texte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipeline-nb{margin-left:auto;color:var(--texte-2);font-size:13px;font-variant-numeric:tabular-nums;flex-shrink:0}
.pipeline-total{color:var(--texte-2);font-size:13px;padding:8px 2px 10px;font-variant-numeric:tabular-nums}
.pipeline-liste{display:flex;flex-direction:column;gap:10px;flex:1;min-height:130px;padding:10px;border:1px solid var(--bordure);border-radius:var(--rayon);background:var(--surface);transition:background .12s,border-color .12s}
/* Zone de dépôt survolée pendant un glisser (classe posée par le JS) */
.pipeline-liste.survol{border-color:var(--c);border-style:dashed;background:color-mix(in oklab, var(--c) 8%, var(--surface))}
.pipeline-vide{color:var(--texte-2);font-size:12.5px;text-align:center;padding:16px 6px}
/* Couleurs d'étape */
.pipeline-col-neutre{--c:var(--gris)}
.pipeline-col-1{--c:var(--stat-1)} .pipeline-col-2{--c:var(--stat-2)} .pipeline-col-3{--c:var(--stat-3)} .pipeline-col-4{--c:var(--stat-4)}
.pipeline-col-5{--c:var(--stat-5)} .pipeline-col-6{--c:var(--stat-6)} .pipeline-col-7{--c:var(--stat-7)} .pipeline-col-8{--c:var(--stat-8)}
/* Les cartes d'une colonne héritent automatiquement de la couleur de l'étape :
   la couleur ne se règle qu'UNE fois, sur la colonne. */
.pipeline-col .carte-accent{--c:inherit}
/* Carte déplaçable (états visuels ; le déplacement réel est géré par le JS de l'app) */
.carte-accent-drag{cursor:grab;user-select:none}
.carte-accent-drag:active{cursor:grabbing}
.carte-accent.en-glissement{opacity:.55;box-shadow:var(--ombre-lg);transform:rotate(1.5deg)}
/* Contenu d'une carte de lead */
.lead-titre{font-weight:600;font-size:14px;line-height:1.3;color:var(--texte)}
.lead-sous{color:var(--texte-2);font-size:13px;margin-top:2px}
.lead-pied{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:8px}
.lead-montant{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.lead-proba{color:var(--texte-2);font-size:13px;font-variant-numeric:tabular-nums;flex-shrink:0}

/* ===== Module de statistique — carte : en-tête (titre + description + total) / graphe / note.
   Réutilise le graphe en barres .stat-flux ; toutes les valeurs sont dynamiques (--h + libellés). ===== */
.stat-module{background:var(--surface);border:1px solid var(--bordure-carte);border-radius:var(--rayon);box-shadow:var(--ombre-md);padding:18px 20px}
/* En-tête : titre + description EMPILÉS à gauche, total à droite. */
.stat-module-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:18px}
.stat-module-ident{flex:1;min-width:220px}
.stat-module-titre{font-weight:700;font-size:15px;color:var(--texte)}
.stat-module-desc{color:var(--texte-2);font-size:13px;margin-top:3px;line-height:1.45}
.stat-module-total{font-size:14px;color:var(--texte);white-space:nowrap;font-variant-numeric:tabular-nums;flex-shrink:0}
.stat-module-note{color:var(--texte-2);font-size:12.5px;line-height:1.55;margin-top:16px}
/* Période sans valeur : trait plat, MÊME largeur que les autres (héritée de la piste), rayon réduit
   pour lire comme un trait net et non comme une pastille. */
.stat-flux-bar.vide{height:3px;min-height:3px;border-radius:2px;background:var(--bordure);padding:0}
/* Responsive (mêmes seuils que le reste de l'app) */
@media (max-width:560px){
  .pipeline-col{flex-basis:82vw}
  .stat-module{padding:14px}
  .stat-flux{gap:10px}
  .stat-flux-piste{width:28px}
  .stat-flux-val{font-size:12px}
}

/* Répartition (donut + légende). Le donut est un disque en conic-gradient + trou central.
   « plein » = anneau épais (--trou = diamètre du trou). Nico remplace le conic-gradient par les
   parts réelles : conic-gradient(var(--stat-1) 0 P1%, var(--stat-2) 0 P2%, …). */
.stat-repart{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.stat-donut{--trou:56%;position:relative;width:176px;height:176px;flex-shrink:0;border-radius:50%;
  background:conic-gradient(var(--stat-1) 0 25%,var(--stat-2) 0 50%,var(--stat-3) 0 72%,var(--stat-4) 0 96%,var(--stat-5) 0 100%)}
.stat-donut::after{content:"";position:absolute;inset:calc((100% - var(--trou)) / 2);border-radius:50%;background:var(--surface)}
.stat-legende{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;min-width:230px;flex:1}
.stat-legende li{display:flex;align-items:center;gap:11px;font-size:14px}
.stat-puce{width:13px;height:13px;border-radius:50%;flex-shrink:0;background:var(--c,var(--stat-1))}
.stat-legende .libelle{color:var(--texte)}
.stat-legende .valeur{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--texte)}

/* Flux (barres verticales pleines et arrondies). Chaque colonne : valeur en haut, barre, libellé en bas.
   Nico : hauteur de barre via --h (0–100%), couleur via --c (var(--stat-N)). */
.stat-flux{display:flex;align-items:flex-end;justify-content:space-around;gap:18px;padding-top:6px}
.stat-flux-col{display:flex;flex-direction:column;align-items:center;gap:9px;flex:1;min-width:0}
.stat-flux-val{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* La LARGEUR est portée par la piste et la barre la remplit → toutes les barres ont
   structurellement la même largeur, pleines comme vides. */
.stat-flux-piste{display:flex;align-items:flex-end;justify-content:center;height:128px;width:42px}
.stat-flux-bar{--h:60%;--c:var(--stat-1);width:100%;height:var(--h);min-height:10px;border-radius:13px;background:var(--c)}
.stat-flux-lib{font-size:13px;color:var(--texte-2)}
.filtres{background:var(--surface);border:1px solid var(--bordure-carte);border-radius:var(--rayon);box-shadow:var(--ombre-md);padding:12px 16px;display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:18px}
.filtre{display:flex;flex-direction:column;gap:4px}.filtre label{font-size:11.5px;font-weight:600;color:var(--texte-2)}
.filtre select,.filtre input{border:1px solid var(--bordure);border-radius:var(--rayon-sm);padding:7px 10px;font-size:13px;background:var(--surface);min-width:130px}
.carte-table{background:var(--surface);border:1px solid var(--bordure-carte);border-radius:var(--rayon);box-shadow:var(--ombre-md);overflow:auto;flex:1;min-height:0;display:flex;flex-direction:column}
/* border-collapse:separate (+ spacing 0) est REQUIS pour un en-tête sticky fiable : en mode collapse,
   la bordure basse du <th> appartient à la grille (pas à la cellule) et décroche au scroll. En separate,
   bordures + ombre suivent le <th> collant. Le scroll doit se faire DANS .carte-table (hauteur bornée). */
.carte-table>table{flex:0 0 auto;min-width:640px;border-collapse:separate;border-spacing:0}
table{width:100%;border-collapse:separate;border-spacing:0}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#fff;padding:12px 14px;border-bottom:1px solid var(--primaire-fonce);background:var(--primaire);white-space:nowrap;position:sticky;top:0;z-index:2;box-shadow:0 4px 6px -4px rgba(16,24,40,.25)}
td{padding:12px 14px;border-bottom:1px solid var(--bordure);vertical-align:middle}
/* Tri sur TOUTES les colonnes des tableaux .carte-table, par défaut.
   Exclure une colonne (ex. actions, case vide) : classe .no-tri sur le <th>.
   .tri-asc / .tri-desc = colonne active + sens. Le pictogramme est en CSS ;
   le TRI lui-même (réordonner les DONNÉES) est géré par le JS de l'app. */
.carte-table th:not(.no-tri){cursor:pointer;user-select:none;padding-right:26px;position:sticky;top:0}
.carte-table th:not(.no-tri):hover{background:var(--primaire-fonce)}
.carte-table th:not(.no-tri)::after{content:"\21C5";position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:11px;opacity:.45;transition:opacity .15s}
.carte-table th:not(.no-tri):hover::after{opacity:.85}
.carte-table th.tri-asc::after{content:"\2191";opacity:1}
.carte-table th.tri-desc::after{content:"\2193";opacity:1}
/* Mêmes affordances de tri pour les tableaux .tbl (ex. CQP), sans sticky (position:relative). */
.tbl th:not(.no-tri){cursor:pointer;user-select:none;padding-right:26px;position:relative}
.tbl th:not(.no-tri)::after{content:"\21C5";position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:11px;opacity:.45;transition:opacity .15s}
.tbl th:not(.no-tri):hover::after{opacity:.85}
.tbl th.tri-asc::after{content:"\2191";opacity:1}
.tbl th.tri-desc::after{content:"\2193";opacity:1}
tr:last-child td{border-bottom:none}tbody tr:hover{background:var(--surface-2)}
.montant,th.montant{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.montant{font-weight:600}
.cell-report:hover{background:var(--primaire-clair);box-shadow:inset 0 0 0 1px var(--primaire)}
.opt-tiers:hover{background:var(--primaire-clair)}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.st-brouillon{background:var(--gris-clair);color:var(--gris)}.st-valide{background:var(--vert-clair);color:var(--vert)}
.st-paye{background:var(--bleu-clair);color:var(--bleu)}.st-annule{background:var(--rouge-clair);color:var(--rouge)}
.tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;color:#fff;margin:1px 3px 1px 0}
.pastille{display:inline-block;width:10px;height:10px;border-radius:50%}
.p-vert{background:var(--vert);box-shadow:0 0 0 3px var(--vert-clair)}.p-gris{background:var(--gris)}
.btn-verifier{background:var(--primaire-clair);color:var(--primaire-texte);border:1px solid var(--primaire-texte);border-radius:var(--rayon-sm);padding:5px 12px;font-weight:600;font-size:12.5px;cursor:pointer}
.btn-verifier:hover{background:var(--primaire);color:#fff}
.pied-table{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:var(--texte-2);font-size:13px;position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--bordure);z-index:2;margin-top:auto}
.pagination{display:flex;gap:6px}.pagination button{border:1px solid var(--bordure);background:var(--surface);border-radius:6px;padding:5px 11px;cursor:pointer}
.pagination button:disabled{opacity:.4;cursor:default}.pagination button.actif{background:var(--primaire);color:#fff;border-color:var(--primaire)}
.vide,.chargement{padding:48px;text-align:center;color:var(--texte-2)}
.voile{position:fixed;inset:0;background:rgba(16,24,40,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal{background:var(--surface);border-radius:14px;width:min(960px,100%);max-height:92vh;overflow:auto;box-shadow:var(--ombre-lg)}
.modal-sm{width:min(540px,100%)}
.modal-entete{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--bordure)}
.modal-entete h3{font-family:var(--police-titres);font-size:17px;font-weight:600;line-height:1.25}.fermer{background:none;border:none;font-size:22px;cursor:pointer;color:var(--texte-2);line-height:1}
.modal-corps{display:grid;grid-template-columns:1fr 1fr}.modal-corps-1{padding:20px 24px}
.justif{background:var(--surface-2);border-right:1px solid var(--bordure);padding:20px;display:flex;flex-direction:column;gap:12px;min-height:420px}
.justif h4,.donnees h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-2);margin-bottom:4px}
.apercu{flex:1;background:var(--surface);border:1px solid var(--bordure);border-radius:8px;overflow:hidden;box-shadow:var(--ombre);display:flex;align-items:center;justify-content:center;min-height:300px}
.apercu img{width:100%;height:auto;display:block}.apercu iframe{width:100%;height:440px;border:0}
.note-signee{font-size:11.5px;color:var(--texte-2)}
.donnees{padding:20px 24px;display:flex;flex-direction:column;gap:11px}
.champ{display:flex;flex-direction:column;gap:4px}.champ label{font-size:12px;font-weight:600;color:var(--texte-2)}
.champ input,.champ select{border:1px solid var(--bordure);border-radius:var(--rayon-sm);padding:8px 12px;font-size:14px}
/* Focus des champs : halo 2px (remplacement visible de l'outline, cf. accessibilité). */
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--primaire-texte);box-shadow:0 0 0 2px var(--primaire-texte)}
.deux-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:11px}.trois-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:11px}
.modal-corps-1 input,.modal-corps-1 select,.modal-corps-1 textarea{max-width:100%;box-sizing:border-box}
.modal-pied{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--bordure)}
.zone-depot{border:2px dashed var(--bordure);border-radius:10px;padding:28px;text-align:center;color:var(--texte-2);cursor:pointer;display:block}
.zone-depot:hover{border-color:var(--primaire);background:var(--primaire-clair)}
.liste-fichiers{font-size:13px;color:var(--texte);margin-top:10px;text-align:left;max-height:130px;overflow:auto}
.zone-depot.drag{border-color:var(--primaire);background:var(--primaire-clair)}
.barre-prog{height:10px;background:var(--gris-clair);border-radius:99px;overflow:hidden;margin:8px 0}
.barre-prog>div{height:100%;background:var(--primaire);transition:width .4s}
.login-fond{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--primaire)}
.login-carte{background:var(--surface);border-radius:14px;box-shadow:var(--ombre-lg);padding:34px;width:min(380px,100%)}
.login-carte .logo{color:var(--primaire-texte);text-align:center;padding-bottom:18px}.login-carte .champ{margin-bottom:14px}
.login-err{color:var(--rouge);font-size:13px;margin-bottom:10px}
/* Profil cliquable dans l'en-tête (bloc nom + avatar) → mène à la page profil. */
.profil{display:inline-flex;align-items:center;gap:9px;padding:3px 5px 3px 10px;border:none;background:transparent;border-radius:999px;text-decoration:none;color:inherit;cursor:pointer;transition:background .12s}
.profil:hover{background:var(--surface-2)}
.profil:focus-visible{outline:2px solid var(--primaire-light);outline-offset:1px}
.profil .profil-nom{font-size:13px;color:var(--texte-2)}
/* Page profil — en-tête (grand avatar + identité) + cartes d'infos éditables (réutilise .carte/.champ/.saisie/.btn). */
.profil-page{max-width:720px}
.profil-tete{display:flex;align-items:center;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.profil-avatar-lg{width:84px;height:84px;border-radius:50%;background:var(--primaire);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--police-titres);font-weight:800;font-size:30px;flex-shrink:0}
.profil-ident{min-width:0}
.profil-nom-lg{font-family:var(--police-titres);font-size:24px;font-weight:800;line-height:1.15}
.profil-mail{color:var(--texte-2);font-size:14px;margin-top:2px}
.profil-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.toast{position:fixed;bottom:24px;right:24px;background:var(--vert);color:#fff;padding:13px 20px;border-radius:10px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:60}
.toast.err{background:var(--rouge)}
.lab{font-size:11.5px;color:var(--texte-2);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
.bandeau-poc{background:var(--warning-clair);border:1px solid color-mix(in oklab, var(--warning) 40%, var(--warning-clair));color:var(--warning);border-radius:8px;padding:8px 14px;font-size:12.5px;margin-bottom:16px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
/* ===== Interrupteur (toggle) — case à cocher stylée, icône dans le curseur OPTIONNELLE =====
   Markup : <label class="interrupteur"><input type="checkbox">
              <span class="piste"><span class="curseur"></span></span> Libellé </label>
   Icône (facultative) : ajouter dans .curseur → <span class="ic ic-off">✕</span><span class="ic ic-on">✓</span>
   Curseur blanc volontaire (convention toggle) ; piste via tokens (dark-mode friendly). */
.interrupteur{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:14px;color:var(--texte)}
.interrupteur input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.interrupteur .piste{position:relative;flex-shrink:0;width:46px;height:26px;border-radius:99px;background:var(--bordure);transition:background .18s ease}
.interrupteur .curseur{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .18s ease;display:flex;align-items:center;justify-content:center}
.interrupteur input:checked + .piste{background:var(--primaire)}
.interrupteur input:checked + .piste .curseur{transform:translateX(20px)}
.interrupteur input:focus-visible + .piste{box-shadow:0 0 0 3px var(--primaire-light)}
.interrupteur input:disabled + .piste{opacity:.45}
.interrupteur:has(input:disabled){cursor:not-allowed;color:var(--texte-2)}
/* Icône optionnelle : ✕ (inactif) → ✓ (actif) */
.interrupteur .curseur .ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;transition:opacity .15s}
.interrupteur .curseur .ic-on{opacity:0;color:var(--primaire)}
.interrupteur .curseur .ic-off{opacity:1;color:var(--texte-2)}
.interrupteur input:checked + .piste .curseur .ic-on{opacity:1}
.interrupteur input:checked + .piste .curseur .ic-off{opacity:0}
/* Taille compacte */
.interrupteur-sm .piste{width:38px;height:22px}
.interrupteur-sm .curseur{width:16px;height:16px}
.interrupteur-sm .curseur .ic{font-size:10px}
.interrupteur-sm input:checked + .piste .curseur{transform:translateX(16px)}
/* --- Variante dark/light : lune (inactif = clair) → soleil (actif = sombre).
   Icônes injectées en CSS (::before lune, ::after soleil) : aucun markup d'icône requis. --- */
.interrupteur-theme .curseur::before,.interrupteur-theme .curseur::after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;transition:opacity .15s}
.interrupteur-theme .curseur::before{content:"\263E";color:var(--texte-2)}          /* ☾ lune */
.interrupteur-theme .curseur::after{content:"\2600\FE0E";color:var(--primaire);opacity:0}  /* ☀ soleil */
.interrupteur-theme input:checked + .piste .curseur::before{opacity:0}
.interrupteur-theme input:checked + .piste .curseur::after{opacity:1}
/* Dans la navbar (fond de marque) : piste blanche translucide + icônes contrastées. */
.sidebar .interrupteur-theme{color:#fff}
.sidebar .interrupteur-theme .piste{background:rgba(255,255,255,.22)}
.sidebar .interrupteur-theme input:checked + .piste{background:rgba(255,255,255,.42)}
.sidebar .interrupteur-theme .curseur::before{color:#3e3e47}
.sidebar .interrupteur-theme .curseur::after{color:#dd7802}
/* Scrollbars modernes */
*{scrollbar-width:thin;scrollbar-color:var(--bordure) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#c7ccd4;border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#a8aeb8;background-clip:content-box}
/* Burger + overlay (mobile) */
.burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--texte);margin-right:4px;line-height:1}
.overlay-menu{display:none}
/* Responsive */
@media (max-width:900px){
  html,body{height:auto;overflow:visible;overscroll-behavior:auto}
  .app{height:auto;min-height:100vh;overflow:visible}
  .principal{height:auto;min-height:100vh}
  .contenu{overflow:visible}
  .sidebar{position:fixed;top:0;left:0;height:100vh;z-index:40;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--ombre-lg)}
  .sidebar.ouvert{transform:translateX(0)}
  .overlay-menu{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
  .burger{display:block}
  .principal{width:100%}
  .dash-charts{grid-template-columns:1fr}
  .cqp-root .cqp-gx3,.cqp-modal .cqp-gx3{grid-template-columns:1fr 1fr}
  .pos2-wrap{height:auto}
  .pos2{grid-template-columns:1fr}
  .pos2-grille{max-height:46vh}
  .pos2-droite{min-height:340px}
  .contenu{padding:16px}
  .entete{padding:12px 16px}
  .modal-corps{grid-template-columns:1fr}
  .justif{border-right:none;border-bottom:1px solid var(--bordure);min-height:auto}
}
@media (max-width:560px){
  .deux-cols,.trois-cols,.cqp-root .cqp-gx3,.cqp-modal .cqp-gx3{grid-template-columns:1fr}
  .utilisateur span{display:none}
  .barre-actions{align-items:flex-start}
}

/* ============================================================
   Composants partagés (ajoutés pour dé-siloter le module CQP —
   voir chantier « design system unifié »). Tokenisés → dark mode
   et marque blanche gérés automatiquement. Additif : aucune règle
   existante modifiée.
   ============================================================ */
/* Boutons complémentaires (le CQP réutilisera .btn + ces variantes) */
.btn-danger{background:var(--rouge);color:#fff}.btn-danger:hover:not(:disabled){filter:brightness(.93)}
.btn-sm{padding:6px 12px;font-size:12.5px}
/* Bouton neutre (contour discret) — action secondaire sobre ; survol = marque. */
.btn-doux{background:var(--surface);color:var(--texte-2);border:1px solid var(--bordure)}.btn-doux:hover:not(:disabled){border-color:var(--primaire-texte);color:var(--primaire-texte);background:var(--primaire-clair)}
/* Carte générique : conteneur de contenu (hors tableau ; pour les tableaux, garder .carte-table) */
.carte{background:var(--surface);border:1px solid var(--bordure-carte);border-radius:var(--rayon);box-shadow:var(--ombre-md)}
.carte-scroll{display:flex;flex-direction:column;overflow:hidden}
.carte-corps{padding:20px;overflow:auto}
.carte-tete{padding:13px 18px;border-bottom:1px solid var(--bordure);font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Onglets partagés */
.onglets{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.onglet{padding:9px 22px;border-radius:10px 10px 0 0;background:var(--surface-2);color:var(--texte-2);font-weight:700;font-size:14px;border:none;cursor:pointer}
.onglet.actif{background:var(--primaire);color:#fff}

/* Fil d'Ariane (breadcrumb) — navigation discrète : « où suis-je » (page › sous-page › élément).
   Ancêtres = liens grisés (--texte-2), survol --primaire. Page actuelle = .fil-actuel (non cliquable,
   --texte, un cran plus appuyé mais sobre). Séparateur « › » injecté en CSS (aucun markup à ajouter).
   Markup type : <nav class="fil" aria-label="Fil d'Ariane"><ol>
     <li><a href="…">Ressources humaines</a></li><li><a href="…">Salariés</a></li>
     <li><span class="fil-actuel" aria-current="page">Nom du salarié</span></li></ol></nav> */
.fil{font-size:13px;margin-bottom:16px}
.fil ol{display:flex;flex-wrap:wrap;align-items:center;gap:7px;list-style:none;margin:0;padding:0}
.fil li{display:flex;align-items:center;gap:7px;min-width:0}
.fil li:not(:first-child)::before{content:"\203A";color:var(--texte-2);opacity:.55;font-size:14px;line-height:1}
.fil a{color:var(--texte-2);text-decoration:none;border-radius:var(--rayon-sm);padding:1px 3px;transition:color .12s}
.fil a:hover{color:var(--primaire-texte)}
.fil a:focus-visible{outline:2px solid var(--primaire-light);outline-offset:1px}
.fil-actuel{color:var(--texte);font-weight:500;max-width:38ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Utilitaire texte grisé (= couleur --texte-2) */
.txt-doux{color:var(--texte-2)}
/* Variantes de badge (fond doux + texte, tokenisées → dark mode) */
.badge-vert{background:var(--vert-clair);color:var(--vert)}
.badge-rouge{background:var(--rouge-clair);color:var(--rouge)}
.badge-orange{background:var(--warning-clair);color:var(--warning)}
.badge-bleu{background:var(--bleu-clair);color:var(--bleu)}
.badge-gris{background:var(--gris-clair);color:var(--gris)}
/* Saisie autonome : input/select/textarea hors .champ */
.saisie{width:100%;max-width:100%;background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon-sm);padding:10px 12px;font-size:14px}
.saisie:focus{outline:none;border-color:var(--primaire-texte);box-shadow:0 0 0 2px var(--primaire-texte)}
textarea.saisie{min-height:72px;resize:vertical;line-height:1.4}
/* Table compacte réutilisable (en-tête marque, tokenisée) */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl th{position:sticky;top:0;background:var(--primaire);color:#fff;text-align:left;padding:10px 12px;font-weight:600;font-size:12.5px;white-space:nowrap;z-index:2;box-shadow:0 4px 6px -4px rgba(16,24,40,.25)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--bordure)}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl-fixe{table-layout:fixed}
.tbl-fixe td,.tbl-fixe th{word-break:break-word;vertical-align:top}

/* ============================================================
   Module Formation CQP — styles encapsulés sous .cqp-root
   (déplacé depuis index.html le 2026-07-02). Consomme les tokens
   de marque via var(--primaire).
   ============================================================ */
.cqp-root{color:var(--texte);font-size:14px}
/* Composants dupliqués migrés vers les classes partagées le 2026-07-08 (chantier design system unifié) :
   .cqp-carte*→.carte*, .cqp-btn*→.btn*, .cqp-champ→.champ, .cqp-inp/.cqp-sel→.saisie,
   .cqp-tb/.cqp-tbfix→.tbl/.tbl-fixe, .cqp-badge/.cqp-b-*→.badge/.badge-*, .cqp-muted→.txt-doux, KPI→.kpi.
   Ne restent ci-dessous que les éléments RÉELLEMENT spécifiques au module CQP (tokens aliasés → dark mode). */
.cqp-root .cqp-center{flex:1;display:flex;align-items:center;justify-content:center;color:var(--texte-2);flex-direction:column;gap:10px;min-height:120px}
.cqp-root .cqp-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.cqp-root .cqp-row>*{flex:1;min-width:160px}
.cqp-root .cqp-lien{cursor:pointer}
.cqp-root .cqp-barbloc{margin-bottom:13px}
.cqp-root .cqp-barbloc .h{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;gap:10px}
.cqp-root .cqp-barbloc .track{height:22px;background:var(--surface-2);border-radius:6px;overflow:hidden;position:relative}
.cqp-root .cqp-barbloc .fill{height:100%;background:var(--primaire);border-radius:6px 0 0 6px;min-width:2px;display:flex;align-items:center;justify-content:flex-end;padding-right:7px;color:#fff;font-size:11px;font-weight:700}
.cqp-root .cqp-niv{display:inline-flex;gap:4px}
.cqp-root .cqp-niv button{width:26px;height:26px;border-radius:9999px;border:1.5px solid var(--bordure);font-size:12px;font-weight:700;color:var(--texte-2);background:var(--surface);cursor:pointer}
.cqp-root .cqp-niv button.on1{background:var(--bleu);border-color:var(--bleu);color:#fff}
.cqp-root .cqp-niv button.on2{background:#9333ea;border-color:#9333ea;color:#fff}
.cqp-root .cqp-niv button.on3{background:var(--warning);border-color:var(--warning);color:#fff}
.cqp-root .cqp-niv button.on4{background:var(--vert);border-color:var(--vert);color:#fff}
.cqp-root .cqp-wiz{display:flex;margin-bottom:20px;border-bottom:1px solid var(--bordure);padding-bottom:14px}
.cqp-root .cqp-wiz .st{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--texte-2);font-weight:700;font-size:14px}
.cqp-root .cqp-wiz .st .n{width:26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--texte-2);display:flex;align-items:center;justify-content:center;font-size:13px}
.cqp-root .cqp-wiz .st.on{color:var(--primaire-texte)}
.cqp-root .cqp-wiz .st.on .n{background:var(--primaire);color:#fff}
.cqp-root .cqp-chk{display:flex;align-items:center;gap:10px;border:1px solid var(--bordure);border-radius:10px;padding:11px 13px;cursor:pointer;font-size:13.5px}
.cqp-root .cqp-chk:hover{background:var(--surface-2)}
.cqp-root .cqp-chk.on{border-color:var(--primaire);background:var(--primaire-light)}
.cqp-root .cqp-chk input{width:17px;height:17px;flex-shrink:0;accent-color:var(--primaire)}
.cqp-root .cqp-gx{display:grid;gap:10px}
.cqp-root .cqp-gx3{grid-template-columns:repeat(3,1fr)}
.cqp-root .cqp-eval-bloc{margin-bottom:18px;border:1px solid var(--bordure);border-radius:10px;overflow:hidden}
.cqp-root .cqp-eval-bloc>.t{background:var(--primaire);color:#fff;padding:9px 14px;font-weight:700;font-size:13.5px}
.cqp-root .cqp-eval-act{background:var(--surface-2);font-weight:700;font-size:12.5px}
.cqp-root .cqp-eval-act.crit{background:var(--rouge-clair);color:var(--primaire);box-shadow:inset 3px 0 0 var(--primaire)}
.cqp-root tr.cqp-eval-comp>td{background:var(--primaire-light);border-top:2px solid var(--primaire)}
.cqp-root tr.cqp-eval-comp>td:first-child{font-weight:700}
.cqp-root tr.crit>td:first-child{box-shadow:inset 3px 0 0 var(--primaire)}
.cqp-root tr.crit-sub>td:first-child{box-shadow:inset 3px 0 0 var(--primaire-clair)}
.cqp-root .cqp-crit-badge{display:inline-block;font-size:9.5px;font-weight:800;color:#fff;background:var(--primaire);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle;letter-spacing:.3px}
.cqp-root .cqp-tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border-radius:50%;background:var(--primaire);color:#fff;font-size:11px;font-weight:800;cursor:help;vertical-align:middle}
.cqp-root .cqp-dstep{display:flex;gap:4px;overflow-x:auto;padding:4px 2px 12px}
.cqp-root .cqp-dstep .s{flex:1;min-width:84px;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer}
.cqp-root .cqp-dstep .s .dot{width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--texte-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;border:2px solid transparent;flex-shrink:0}
.cqp-root .cqp-dstep .s.done .dot{background:var(--vert);color:#fff}
.cqp-root .cqp-dstep .s.part .dot{background:var(--warning);color:#fff}
.cqp-root .cqp-dstep .s.actif .dot{border-color:var(--primaire);box-shadow:0 0 0 3px var(--primaire-clair)}
.cqp-root .cqp-dstep .s .lbl{font-size:10.5px;color:var(--texte-2);max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cqp-root .cqp-dstep .s.actif .lbl{color:var(--texte);font-weight:700}
.cqp-root .cqp-sigpad{border:2px dashed var(--bordure);border-radius:10px;touch-action:none;background:var(--surface);width:100%}
.cqp-root .cqp-feuille-scroll{overflow-y:auto}
.cqp-root .cqp-feuille{background:var(--surface)}
.cqp-root .cqp-feuille table{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:18px}
.cqp-root .cqp-feuille th,.cqp-root .cqp-feuille td{border:1px solid var(--bordure);padding:6px 8px;text-align:left}
.cqp-root .cqp-feuille th{background:var(--surface-2)}
.cqp-root .cqp-feuille h2{font-size:16px;margin:14px 0 6px}
.cqp-root .cqp-printonly{display:none}
.cqp-voile{position:fixed;inset:0;background:rgba(17,24,39,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.cqp-modal{background:var(--surface);border-radius:14px;box-shadow:var(--ombre-lg);width:100%;max-width:620px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;font-size:14px}
.cqp-modal.large{max-width:980px}
/* Boutons/champs/saisies/badges internes = composants partagés (.btn/.champ/.saisie/.badge). Ne restent ici que la structure de modale + éléments spécifiques CQP. */
.cqp-modal .cqp-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.cqp-modal .cqp-row>*{flex:1;min-width:140px}
.cqp-modal .cqp-center{display:flex;align-items:center;justify-content:center;padding:20px;color:var(--texte-2)}
.cqp-modal .cqp-gx{display:grid;gap:10px}.cqp-modal .cqp-gx3{grid-template-columns:repeat(3,1fr)}
.cqp-modal .cqp-chk{display:flex;align-items:center;gap:10px;border:1px solid var(--bordure);border-radius:10px;padding:11px 13px;cursor:pointer;font-size:13.5px}.cqp-modal .cqp-chk.on{border-color:var(--primaire);background:var(--primaire-light)}.cqp-modal .cqp-chk input{width:17px;height:17px;accent-color:var(--primaire)}
.cqp-modal .cqp-wiz{display:flex;margin-bottom:20px;border-bottom:1px solid var(--bordure);padding-bottom:14px}.cqp-modal .cqp-wiz .st{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--texte-2);font-weight:700}.cqp-modal .cqp-wiz .st .n{width:26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--texte-2);display:flex;align-items:center;justify-content:center}.cqp-modal .cqp-wiz .st.on{color:var(--primaire)}.cqp-modal .cqp-wiz .st.on .n{background:var(--primaire);color:#fff}
.cqp-modal .cqp-sigpad{border:2px dashed var(--bordure);border-radius:10px;touch-action:none;background:var(--surface);width:100%}
.cqp-modal-tete{padding:16px 20px;border-bottom:1px solid var(--bordure);display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:16px}
.cqp-modal-body{padding:20px;overflow:auto}
.cqp-modal-pied{padding:14px 20px;border-top:1px solid var(--bordure);display:flex;justify-content:flex-end;gap:10px}
.cqp-x{font-size:22px;color:var(--texte-2);line-height:1;background:none;border:none;cursor:pointer}
.cqp-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#1f2630;color:#fff;padding:12px 20px;border-radius:10px;box-shadow:var(--ombre-lg);z-index:1001;font-weight:600;font-size:13.5px}
.cqp-toast.err{background:var(--primaire)}
@media print{.cqp-noprint{display:none!important}.cqp-root .cqp-printonly{display:block!important}.cqp-root .carte{box-shadow:none!important;border:none!important}}

/* ===== Éditeur Quill + rendu rich-text (.rh-md / .fiche-html) ===== */
.ql-editor{min-height:180px;font-size:13.5px}.ql-container{font-family:inherit}.fiche-html p{margin:0 0 6px}.fiche-html ul,.fiche-html ol{margin:0 0 6px 18px}.rh-md p{margin:0 0 7px}.rh-md ul,.rh-md ol{margin:4px 0 8px 20px}.rh-md li{margin:2px 0}.rh-md code{background:var(--fond);padding:1px 5px;border-radius:3px;font-size:12px}.rh-md strong{font-weight:600}

/* ===== Comptes & cartes (ajout dev 2026-07) ===== */
/* Grille des cartes de compte (indépendante de .kpis pour ne pas subir la logique de comptage KPI). */
.comptes-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;align-content:start}
/* Badge « type de compte » : couleur sémantique par nature (courant→bleu, épargne→vert…). Jamais de marque en dur. */
.badge-compte{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--gris-clair);color:var(--gris)}
.badge-compte-courant{background:var(--bleu-clair);color:var(--bleu)}
.badge-compte-epargne{background:var(--vert-clair);color:var(--vert)}
.badge-compte-titres{background:color-mix(in oklab,var(--stat-5) 16%,var(--surface));color:var(--stat-5)}
.badge-compte-caisse{background:var(--warning-clair);color:var(--warning)}
.badge-compte-autre{background:var(--gris-clair);color:var(--gris)}
/* Bloc « carte bancaire associée » sous une carte de compte. */
.compte-cartes{margin-top:10px;border-top:1px solid var(--bordure);padding-top:8px;display:flex;flex-direction:column;gap:4px}
/* Ligne cliquable (carte liée) : hover rouge léger tokenisé, arrondi + padding ; plafond centré verticalement. */
.compte-carte-lien{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:var(--rayon-sm);cursor:pointer;transition:background .12s}
.compte-carte-lien:hover{background:var(--rouge-clair)}
.compte-carte-lien-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.compte-carte-plafond{align-self:center;color:var(--texte-2);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
/* Bouton « lier une carte » (aucune carte associée). */
.compte-carte-lier{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px dashed var(--bordure);border-radius:var(--rayon-sm);background:transparent;color:var(--primaire-texte);font-weight:600;font-size:12.5px;cursor:pointer;transition:border-color .12s,background .12s}
.compte-carte-lier:hover{border-color:var(--primaire-texte);background:var(--primaire-clair)}
.compte-carte-lier:focus-visible{outline:2px solid var(--primaire-texte);outline-offset:2px}

} /* @layer composants */

@layer pages {
  /* Surcharges spécifiques à une page — le designer écrit ICI.
     Chaque page porte une classe "page-<clé>" (ex. page-achats, page-ventes, page-tresorerie).
     Cette couche l'emporte sur "composants" sans !important ni spécificité forcée.
     Ex. :  .page-achats select{ border-radius:14px }  */
}

@layer utilitaires {
  /* Petites classes utilitaires transverses, si besoin (la couche la plus prioritaire). */
}

/* Accessibilité — MOUVEMENT RÉDUIT. Respecte le réglage système « réduire les animations »
   (vestibulaire / sensibilité au mouvement) : on neutralise transitions et animations.
   Hors @layer et en !important pour primer sur tout composant. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}