@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --navy:#0A2A66; --blue:#1D5BD8; --sky:#9DBBF5; --pale:#EAF0FB; --ground:#F3F5F9;
  --ink:#0E1B33; --muted:#4A5A74; --line:#D7DEEA; --field:#C9D3E3;
  --err:#B42318; --err-bg:#FEECEB; --warn:#8A5200; --warn-bg:#FFF4E0; --ok:#0F6B42; --ok-bg:#E6F4EC;
  --gold:#F2C14E; --low-bg:#FCE3D6; --low:#8A2E0A;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font:400 15px/1.5 'IBM Plex Sans',system-ui,sans-serif}
a{color:var(--blue)} a:hover{color:var(--navy)}
h1,h2,h3{font-family:Archivo,sans-serif;color:var(--navy);margin:0}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* bande nationale + en-tête */
.drapeau{display:flex;height:14px}
.drapeau>div{flex:1}
.drapeau .v{background:#00853F}.drapeau .j{background:#FDEF42;display:flex;align-items:center;justify-content:center}.drapeau .r{background:#E31B23}
.entete{background:var(--navy);color:#fff;padding:12px 20px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between}
.marque{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.marque:hover{color:#fff}
.logo{width:40px;height:40px;border-radius:10px;background:var(--blue);display:flex;align-items:center;justify-content:center;font:800 17px Archivo,sans-serif}
.marque b{display:block;font:800 19px Archivo,sans-serif}
.marque small{display:block;font-size:13px;color:#C7D6F2}
.entete nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.entete nav a,.entete nav button{color:#C7D6F2;text-decoration:none;padding:9px 13px;border-radius:8px;font:500 14px 'IBM Plex Sans',system-ui,sans-serif;background:none;border:0;cursor:pointer;min-height:40px}
.entete nav a.actif{background:var(--blue);color:#fff;font-weight:600}
.entete nav a:hover,.entete nav button:hover{color:#fff}
.puce-user{padding:7px 12px;border:1px solid #3A5A99;border-radius:999px;font-size:13px;color:#fff}

.page{max-width:1240px;margin:0 auto;padding:22px 18px 60px}
.carte{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.pile{display:flex;flex-direction:column;gap:18px}
.rang{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.principal{flex:999 1 720px;min-width:0}
.cote{flex:1 1 300px;min-width:0}
.sur-titre{font:600 12px 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--blue)}
.num{font:700 13px 'IBM Plex Mono',monospace;color:var(--blue);margin-right:10px}
.discret{color:var(--muted);font-size:14px}
.mono{font-family:'IBM Plex Mono',monospace}

/* boutons */
.btn{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--field);background:#fff;color:var(--navy);font:600 14px 'IBM Plex Sans',system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:hover{border-color:var(--navy)}
.btn.prim{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.prim:hover{background:var(--navy);border-color:var(--navy)}
.btn.or{background:var(--gold);border-color:var(--gold);color:var(--navy);font-family:Archivo}
.btn.danger{color:var(--err);border-color:#F0B4AE}
.btn:disabled{background:#D7DEEA;border-color:#D7DEEA;color:#3F4E66;cursor:not-allowed}
.btn.petit{min-height:36px;padding:0 12px;font-size:13px}
.pilule{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--field);background:#fff;color:var(--navy);font:600 13px 'IBM Plex Sans',system-ui,sans-serif;cursor:pointer}
.pilule[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.onglets{display:flex;flex-wrap:wrap;gap:8px}
.onglets .pilule{border-radius:10px;min-height:44px;font-size:15px}

/* formulaires */
label.champ{display:flex;flex-direction:column;gap:6px;font:600 14px 'IBM Plex Sans',system-ui,sans-serif}
input,select,textarea{font:400 15px 'IBM Plex Sans',system-ui,sans-serif;color:var(--ink);border:1px solid var(--field);border-radius:8px;padding:9px 11px;background:#fff;min-height:42px}
textarea{resize:vertical;min-height:110px}
.grille-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}

/* tableaux de saisie */
.defile{overflow-x:auto}
.grille{display:grid;gap:6px;align-items:center}
.grille .tete{font:600 12px 'IBM Plex Sans',system-ui,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;text-align:center}
.grille .groupe{border-bottom:2px solid var(--sky);padding-bottom:4px}
.grille .groupe.fort{border-color:var(--navy)}
.niv{font:700 15px Archivo,sans-serif;color:var(--navy)}
.niv.total{font-size:14px;color:#fff;background:var(--navy);height:40px;display:flex;align-items:center;justify-content:center;border-radius:7px}
.case{width:100%;height:40px;border:1px solid var(--field);border-radius:7px;text-align:center;font:500 15px 'IBM Plex Mono',monospace;padding:0 4px;min-height:0}
.case.vide{border-style:dashed;border-color:#8A9BB8;background:#F8FAFD}
.case.err{border:2px solid var(--err);background:var(--err-bg);color:#7A1A12}
.case.warn{border:2px solid #C27A00;background:var(--warn-bg)}
.case:disabled{background:#F1F3F7;color:var(--ink)}
.calc{height:40px;display:flex;align-items:center;justify-content:center;font:600 15px 'IBM Plex Mono',monospace;color:var(--navy);background:var(--pale);border-radius:7px}
.calc.p0{background:#F1F3F7;color:#5B6B85}
.calc.p1{background:var(--low-bg);color:var(--low)}
.calc.p2{background:var(--blue);color:#fff}
.calc.p3{background:var(--navy);color:#fff}

/* statuts */
.statut{display:inline-block;text-align:center;font:600 12px 'IBM Plex Sans',system-ui,sans-serif;padding:5px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.s-valide{background:var(--navy);color:#fff}
.s-transmis{background:#DCE7FB;color:var(--navy)}
.s-rejete{background:var(--err-bg);color:#9B1C12}
.s-brouillon{background:var(--warn-bg);color:#7A4800}
.s-non_saisi{background:#fff;color:var(--muted);border:1px dashed #8A9BB8}
.s-avenir{background:#F1F3F7;color:#5B6B85}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.kpi b{display:block;font:800 30px/1 Archivo,sans-serif;color:var(--navy)}
.kpi span{display:block;font-size:13px;color:var(--muted);margin-top:6px}
.kpi.sombre{background:var(--navy);border-color:var(--navy)}.kpi.sombre b{color:#fff}.kpi.sombre span{color:#C7D6F2}
.kpi.rouge{background:var(--err-bg);border-color:#F5C2BD}.kpi.rouge b{color:var(--err)}.kpi.rouge span{color:#7A1A12}
.kpi.ambre{background:var(--warn-bg);border-color:#F0D29A}.kpi.ambre b{color:var(--warn)}.kpi.ambre span{color:#6B4000}

/* tables */
table.liste{width:100%;border-collapse:collapse;font-size:14px}
table.liste th{text-align:left;font:600 12px 'IBM Plex Sans',system-ui,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:8px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0}
table.liste td{padding:8px;border-bottom:1px solid #EEF1F6;vertical-align:middle}
table.liste tr:hover td{background:#F8FAFD}
table.liste td.c,table.liste th.c{text-align:center}
table.liste td.d,table.liste th.d{text-align:right}

/* messages */
.msg{border-radius:12px;padding:12px 14px;font-size:14px}
.msg.ok{background:var(--ok-bg);color:#0F5B39}
.msg.err{background:var(--err-bg);color:#7A1A12}
.msg.warn{background:var(--warn-bg);color:#6B4000}
.msg.info{background:var(--pale);color:var(--navy)}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;box-shadow:0 10px 30px rgba(10,42,102,.25);z-index:50;display:none;max-width:92vw}
#toast.err{background:var(--err)}

/* fenêtre */
dialog{border:0;border-radius:16px;padding:0;max-width:min(980px,94vw);width:100%;box-shadow:0 30px 80px rgba(10,42,102,.3)}
dialog::backdrop{background:rgba(14,27,51,.45)}
dialog .tete-dlg{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
dialog .corps-dlg{padding:20px;max-height:75vh;overflow:auto}
dialog .pied-dlg{padding:14px 20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}

/* tuiles portail */
.tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.tuile{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;text-decoration:none;color:var(--ink);min-height:150px;transition:border-color .15s,transform .15s}
.tuile:hover{border-color:var(--blue);transform:translateY(-2px);color:var(--ink)}
.tuile .ico{width:46px;height:46px;border-radius:12px;background:var(--pale);color:var(--navy);display:flex;align-items:center;justify-content:center;font:800 16px Archivo,sans-serif}
.tuile b{font:700 18px Archivo,sans-serif;color:var(--navy)}
.tuile.admin .ico{background:var(--navy);color:var(--gold)}

.cache{display:none!important}
.barre{height:8px;border-radius:999px;background:#22427F;overflow:hidden}
.barre>div{height:100%;background:var(--gold);border-radius:999px}
.jauge{height:10px;border-radius:999px;background:var(--pale);overflow:hidden;display:flex}

@media print{
  .drapeau{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .entete nav,.no-print,#toast{display:none!important}
  body{background:#fff}
  .carte{border:1px solid #bbb;break-inside:avoid}
  .calc,.niv.total,.statut{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}