:root{--bg:#f4f6f5;--surface:#fff;--ink:#1b2420;--muted:#5c6862;--line:#dde3e0;--accent:#146356;--accent-dark:#0f4d43;--ok:#1a7f4e;--warn:#b5790a;--danger:#b8342b;--blue:#eef3fb}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px "Segoe UI",system-ui,sans-serif;line-height:1.35}header{min-height:58px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:8px max(3vw,20px);position:sticky;top:0;z-index:10}.brand{color:var(--accent);font-weight:700;font-size:17px}.who{margin-left:auto;color:var(--muted)}a{color:var(--accent);text-decoration:none}main{max-width:1600px;margin:auto;padding:20px max(2vw,22px) 38px}button,.toolbutton{border:1px solid #cbd5d0;background:#fff;color:var(--ink);border-radius:5px;padding:8px 11px;font:600 13px "Segoe UI",sans-serif;cursor:pointer;white-space:nowrap}.primary{background:var(--accent);border-color:var(--accent);color:#fff}.primary:hover{background:var(--accent-dark)}.app-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:2px 2px 14px}.app-head h1{font-size:23px;line-height:1.15;margin:4px 0;color:var(--accent);font-weight:650}.app-head p,.back{margin:0;color:var(--muted);font-size:13px}.toolbar{display:flex;gap:6px;flex-wrap:wrap;justify-content:end}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}.metrics article{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);padding:11px 16px 11px 19px;min-height:70px}.metrics article i{position:absolute;left:0;top:0;bottom:0;width:4px;background:#5c6862}.metrics .success i{background:var(--ok)}.metrics .warning i{background:var(--warn)}.metrics .danger-metric i{background:var(--danger)}.metrics span{display:block;text-transform:uppercase;font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.04em}.metrics strong{display:block;text-align:right;font-size:21px;margin-top:6px}.desk-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);overflow:auto}.desk-tabs button{border:0;border-radius:0;background:transparent;padding:11px 16px;color:var(--muted);font-size:14px}.desk-tabs button.active{color:var(--accent);font-weight:700;background:#fff;border:1px solid var(--line);border-bottom-color:#fff;margin-bottom:-1px}.desk-tabs b{font-size:11px;background:#e1ece8;border-radius:10px;padding:1px 6px}.tab-panel{display:none;background:#fff;border:1px solid var(--line);border-top:0;padding:13px;min-height:470px}.tab-panel.active{display:block}.panel-tools,.list-head,.footbar{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:9px}.panel-tools label{font-weight:600}.panel-tools select,.panel-tools input,.side-panel input,.side-panel select{border:1px solid #becac4;border-radius:4px;padding:7px;background:#fff;font:inherit}.search{width:260px}.table-wrap{overflow:auto;border:1px solid var(--line);max-height:500px}table{width:100%;border-collapse:collapse;min-width:760px;font-size:13px}th{position:sticky;top:0;background:#f4f6f5;color:var(--muted);text-align:left;text-transform:uppercase;letter-spacing:.025em;font-size:11px}th,td{padding:7px 8px;border-bottom:1px solid #e8ecea;vertical-align:middle}tbody tr:nth-child(even){background:var(--blue)}tbody tr:hover{background:#dcece6}.gap{color:var(--danger);font-weight:650}.credit-row{background:#fbf0dc!important}.empty{text-align:center;color:var(--muted);padding:28px}.footbar{margin:10px 0 0;font-size:12px;color:var(--muted)}.two-tables{display:grid;grid-template-columns:1fr 1fr;gap:12px}.list-card{min-width:0}.list-head h2{font-size:14px;margin:0;color:var(--muted)}.list-head small{color:var(--muted)}.text-danger{color:var(--danger);border-color:#e5b3b1}.alert-button{color:#fff;background:var(--danger);border-color:var(--danger)}.side-panel{position:fixed;z-index:30;right:0;top:0;width:min(430px,100%);height:100vh;overflow:auto;background:#fff;box-shadow:-10px 0 30px #0002;padding:28px;transform:translateX(105%);transition:transform .2s ease}.side-panel.open{transform:translateX(0)}.side-panel .close{float:right;font-size:24px;border:0;padding:0 6px}.side-panel h2{margin:0 0 12px;color:var(--accent)}.side-panel p{color:var(--muted)}.side-panel form{display:grid;gap:12px;clear:both}.side-panel label{display:grid;gap:5px;font-weight:600}.side-panel .check{display:block;font-weight:400}.side-panel ul{padding-left:18px}.side-panel li{padding:9px 0;border-bottom:1px solid var(--line)}.flash{padding:10px 13px;margin-bottom:14px;border-left:4px solid var(--ok);background:#e6f4ec}.flash.error{background:#fbeaea;border-color:var(--danger)}.auth{max-width:430px;margin:12vh auto}.auth h1{color:var(--accent)}.auth form{display:grid;gap:16px;background:#fff;border:1px solid var(--line);padding:20px}.auth label{display:grid;gap:4px;font-weight:600}.auth input{padding:9px;border:1px solid #becac4;border-radius:4px}@media(max-width:900px){.metrics{grid-template-columns:repeat(2,1fr)}.app-head{align-items:start;flex-direction:column}.toolbar{justify-content:start}.two-tables{grid-template-columns:1fr}}@media(max-width:600px){main{padding:12px}.metrics{gap:6px}.metrics article{padding:9px 10px 9px 14px;min-height:62px}.metrics strong{font-size:17px}.desk-tabs button{padding:10px 12px}.tab-panel{padding:8px}.panel-tools,.list-head,.footbar{align-items:flex-start;flex-wrap:wrap}.search{width:100%}.toolbar{width:100%;display:grid;grid-template-columns:1fr 1fr}.toolbar>*{text-align:center}.app-head h1{font-size:19px}header .who{display:none}}
.table-total{text-align:right;font-weight:700;padding:8px 4px 0;font-size:14px}
/* Boite de dialogue interne, en remplacement de alert/confirm/prompt natifs :
   coherente avec le reste de l'interface et non bloquante pour le navigateur. */
#message-dialog{border:1px solid var(--line);border-radius:6px;padding:0;max-width:min(460px,92vw);background:var(--surface);color:var(--ink);box-shadow:0 18px 50px #0003}
#message-dialog::backdrop{background:#0b1a1666}
#message-dialog form{padding:22px;display:grid;gap:16px}
#message-dialog .message-text{margin:0;font-size:14.5px;line-height:1.45;white-space:pre-line}
#message-dialog .message-saisie{display:grid;gap:5px;font-weight:650;font-size:12px}
#message-dialog .message-saisie input{border:1px solid #becac4;border-radius:5px;padding:9px;font:inherit;background:var(--surface);color:var(--ink)}
#message-dialog .message-actions{display:flex;gap:8px;justify-content:flex-end}
#message-dialog button[disabled]{opacity:.5;cursor:not-allowed}
/* Import en cours : barre indeterminee + curseur d'attente, pour que le delai
   de lecture des fichiers soit visiblement un traitement et non un blocage. */
.import-running{position:relative;cursor:progress}
.import-running .file-picker,.import-running button{pointer-events:none;opacity:.6}
.import-running::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--line) 0 40%,var(--accent) 40% 60%,var(--line) 60% 100%);background-size:250% 100%;animation:import-progress 1.1s linear infinite}
@keyframes import-progress{from{background-position:100% 0}to{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.import-running::after{animation:none;background:var(--accent)}}
.rules-page{max-width:1120px;margin:0 auto}
.rules-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}
.rules-heading h1{margin:5px 0 3px;color:var(--accent);font-size:25px}
.rules-heading p,.section-title p,.rule-create>p{margin:0;color:var(--muted)}
.rules-count{background:#dcebe6;color:var(--accent);font-weight:700;border-radius:20px;padding:7px 12px}
.rule-create,.rules-existing{background:var(--surface);border:1px solid var(--line);padding:20px;margin-bottom:16px}
.rule-create h2,.section-title h2{margin:0 0 5px;font-size:17px}
.rule-form{display:grid;grid-template-columns:1.25fr .65fr 1.4fr 1.4fr auto;align-items:end;gap:12px;margin-top:17px}
.rule-form label{display:grid;gap:5px;font-weight:650;font-size:12px}
.rule-form input,.rule-form select{width:100%;min-width:0;border:1px solid #becac4;border-radius:5px;padding:9px;background:var(--surface);color:var(--ink);font:inherit}
.section-title{display:flex;justify-content:space-between;align-items:start;margin-bottom:14px}
.rule-card{border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:5px;margin-top:10px;background:var(--surface)}
.rule-card.is-disabled{border-left-color:#89938e;opacity:.8}
.rule-summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:14px 16px}
.rule-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rule-title h3{font-size:15px;margin:0}
.rule-status,.rule-kind{font-size:11px;font-weight:700;border-radius:12px;padding:3px 8px;background:#e9eceb;color:var(--muted)}
.rule-status.active{background:#dff2e8;color:var(--ok)}
.rule-kind{background:#e6ecef;color:#395662}
.rule-match{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);align-items:center;gap:12px;margin-top:10px}
.rule-match span{font-weight:650}
.rule-match small{display:block;color:var(--muted);font-size:9px;letter-spacing:.06em;margin-bottom:2px}
.rule-match>b{color:var(--muted)}
.rule-card details{border-top:1px solid var(--line);padding:10px 16px}
.rule-card summary{cursor:pointer;color:var(--accent);font-weight:650}
.rule-edit{grid-template-columns:1.25fr .65fr 1.4fr 1.4fr auto}
.rule-delete{display:flex;justify-content:flex-end;margin-top:12px}
.rules-empty{text-align:center;border:1px dashed var(--line);padding:35px;color:var(--muted)}
.rules-empty p{margin:5px 0 0}
[data-theme="dark"] .rules-count{background:#183f36;color:#9fd7c7}
[data-theme="dark"] .rule-status.active{background:#173f30;color:#8ed7b2}
[data-theme="dark"] .rule-kind{background:#293942;color:#bdd0d9}
[data-theme="dark"] .rule-form input,[data-theme="dark"] .rule-form select{border-color:#52615a}
@media(max-width:1000px){.rule-form,.rule-edit{grid-template-columns:1fr 1fr}.rule-form button{min-height:38px}.rule-summary{align-items:start}.rule-match{grid-template-columns:1fr}.rule-match>b{display:none}}
@media(max-width:600px){.rules-heading{align-items:start}.rules-count{white-space:nowrap}.rule-create,.rules-existing{padding:14px}.rule-form,.rule-edit{grid-template-columns:1fr}.rule-summary{grid-template-columns:1fr}.rule-summary form button{width:100%}}
.compte-inactif{opacity:.62}
.ligne-motdepasse{display:flex;gap:6px}
.ligne-motdepasse input{border:1px solid #becac4;border-radius:4px;padding:6px;font:inherit;width:130px;background:var(--surface);color:var(--ink)}
.scope-exercice{display:flex;align-items:center;gap:4px;flex-wrap:wrap;color:var(--muted);font-weight:600}
.scope-exercice a{border:1px solid var(--line);border-radius:4px;padding:4px 9px;font-weight:600;background:var(--surface)}
.scope-exercice a.actif{background:var(--accent);border-color:var(--accent);color:#fff}
.scope-note{margin-top:8px;padding:8px 11px;border-left:3px solid var(--warn);background:var(--warn-bg,#fbf0dc);font-size:12.5px}
/* --- Confort d'usage au doigt (telephone, tablette) ------------------------
   Mesure sur l'interface reelle : les cases a cocher tombaient a 13x13 px et
   le lien de retour a 17 px de haut, sous le minimum de 24x24 px requis par
   l'accessibilite. Or cocher une proposition est l'action principale. */
.back{display:inline-block;padding:6px 0}
/* Deux criteres complementaires : « pointer:coarse » couvre les tablettes en
   paysage, ou l'ecran est large mais le doigt reste imprecis ; la largeur
   couvre les cas ou le navigateur ne declare pas son type de pointeur. */
@media (pointer:coarse), (max-width:900px){
  input[type=checkbox]{width:24px;height:24px}
  th,td{padding:9px 8px}
}
@media (max-width:600px){
  /* Le bandeau du haut debordait l'ecran : ses elements portent white-space
     nowrap et ne se rétrécissent donc pas. L'ajout du lien « Mon compte » a
     fait franchir la limite. Ils passent desormais a la ligne. */
  header{flex-wrap:wrap;gap:8px;row-gap:2px;padding:6px 12px;min-height:0}
  header a,header button{font-size:12.5px}
  /* Les cinq onglets depassaient la largeur de l'ecran et defilaient
     horizontalement sans aucun indice visuel : « Banque(s) » restait donc
     invisible. Ils passent a la ligne, tous atteignables. */
  .desk-tabs{flex-wrap:wrap;overflow:visible}
  .desk-tabs button{padding:12px 11px}
  .desk-tabs button.active{margin-bottom:0;border-bottom-color:var(--line)}
  button,.toolbutton{min-height:42px}
  input[type=checkbox]{width:24px;height:24px}
}