/* Extrait de index.html le 05/09/2026 pour rendre possible une CSP stricte :
   avec un <style> en ligne, il faudrait style-src 'unsafe-inline', ce qui
   annule une bonne part de la protection recherchée. */
  :root{
    --fond:#f6f7f9; --carte:#fff; --trait:#dfe3e8; --texte:#1c2530;
    --doux:#5f6b7a; --vert:#2e7d32; --rouge:#b3261e; --accent:#1d4ed8;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--fond);color:var(--texte);
       font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  header{background:var(--carte);border-bottom:1px solid var(--trait);
         padding:14px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  header h1{font-size:17px;margin:0;font-weight:650}
  header .qui{margin-left:auto;color:var(--doux);font-size:13px}
  main{padding:20px;max-width:1200px;margin:0 auto}
  .carte{background:var(--carte);border:1px solid var(--trait);border-radius:10px;
         padding:18px;margin-bottom:18px}
  .tableau{overflow-x:auto}
  table{border-collapse:collapse;width:100%;font-size:14px}
  th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--trait)}
  thead th{position:sticky;top:0;z-index:2;background:var(--carte);font-weight:600;
           font-size:12px;color:var(--doux);text-transform:uppercase;letter-spacing:.03em;
           box-shadow:inset 0 -1px var(--trait)}
  /* Les deux lignes d'en-tête de la matrice restent visibles en faisant défiler
     les personnes (02/10/2026). Le tableau défile DANS son cadre : un sticky ne
     colle qu'à son conteneur de défilement, et `overflow-x:auto` en fait un sans
     hauteur limitée — les en-têtes partaient avec la page. La seconde ligne se
     pose sous la première (--h-applis, mesurée dans app.js). */
  #carteMatrice .tableau{max-height:calc(100vh - 170px);overflow:auto}
  #enteteDroits th{top:var(--h-applis,33px)}
  th.appli{text-align:center;border-left:2px solid var(--trait);background:#eef1f5}
  td.case{text-align:center;border-left:1px solid #eef1f5}
  tbody tr:hover{background:#fafbfc}
  .nom{font-weight:600}
  .ident{color:var(--doux);font-size:12px}
  input[type=checkbox]{width:17px;height:17px;cursor:pointer;accent-color:var(--accent)}
  input[type=checkbox]:disabled{cursor:not-allowed;opacity:.45}
  .source-stock{background:#fff8e6}
  .source-derive{background:#f3f0fb}
  td.source-derive input{pointer-events:none}
  .legende{color:var(--doux);font-size:13px;margin-top:10px}
  .badge{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;
         border:1px solid var(--trait);background:#f2f4f7;color:var(--doux)}
  button{font:inherit;padding:8px 14px;border-radius:7px;border:1px solid var(--trait);
         background:var(--carte);cursor:pointer}
  button.primaire{background:var(--accent);color:#fff;border-color:var(--accent)}
  input[type=text],input[type=password]{font:inherit;padding:9px 11px;border-radius:7px;
         border:1px solid var(--trait);width:100%}
  .connexion{max-width:340px;margin:60px auto}
  .champ{margin-bottom:12px}
  .champ label{display:block;font-size:13px;color:var(--doux);margin-bottom:4px}
  .erreur{color:var(--rouge);font-size:13px;margin-top:10px;white-space:pre-wrap}
  .ok{color:var(--vert)}
  #journal td{font-size:13px}
  .muet{color:var(--doux)}
  @media (max-width:700px){ main{padding:12px} .carte{padding:12px} }

  /* Gestion des comptes (25/09/2026) */
  .entete-carte{display:flex;align-items:center;gap:12px;margin-bottom:10px}
  .entete-carte h2{font-size:15px;margin:0}
  .entete-carte button{margin-left:auto}
  .panneau{border:1px solid var(--trait);border-radius:8px;padding:14px;margin:10px 0 14px;background:#fafbfc}
  .panneau h3{font-size:14px;margin:0 0 10px}
  .grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
  .ligne{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .ligne input{flex:1;min-width:160px}
  .resultat{border-color:var(--vert);background:#f1f8f2}
  .mdp-affiche code{font-size:17px;padding:4px 10px;background:#fff;border:1px solid var(--trait);border-radius:6px;letter-spacing:.04em}
  .actions-compte{white-space:nowrap;text-align:right}
  .actions-compte button{padding:4px 9px;font-size:13px;margin-left:4px}
  button.danger{color:var(--rouge);border-color:var(--rouge)}
  tr.inactif td{color:var(--doux)}
  tr.inactif .nom{text-decoration:line-through}