:root{--encre:#0e2238;--marine:#16324f;--ardoise:#475569;--bord:#dde5ee;--fond:#f2f5f9;--action:#0a5c8a;
--rouge:#dc2626;--orange:#d97706;--vert:#059669;--gris-fonce:#5b6b7c;--gris:#94a3b8;
--ci-orange:#f77f00;--ci-vert:#009e60}
*{box-sizing:border-box}
body{margin:0;display:flex;min-height:100vh;background:var(--fond);color:var(--encre);
font:15px/1.5 "Segoe UI",system-ui,sans-serif}
aside{width:250px;flex:0 0 250px;background:var(--encre);color:#cbd5e1;display:flex;flex-direction:column}
.tricolore{display:block;height:3px;background:linear-gradient(90deg,var(--ci-orange) 0 33.4%,#fff 33.4% 66.7%,var(--ci-vert) 66.7% 100%)}
.marque{padding:18px 16px;border-bottom:1px solid #1e293b;font-weight:700;letter-spacing:.04em;color:#fff}
.marque small{display:block;font-weight:400;font-size:12px;color:#94a3b8;letter-spacing:0}
aside nav{flex:1;padding:8px}
aside nav a{display:block;padding:9px 12px;border-radius:6px;color:#cbd5e1;text-decoration:none;font-size:14px}
aside nav a:hover{background:#1e293b}
aside nav a.actif{background:var(--action);color:#fff;font-weight:600}
.profil{padding:12px 16px;border-top:1px solid #1e293b;font-size:13px}
.profil a{display:inline-block;margin-top:6px;color:#7dd3fc}
main{flex:1;min-width:0;padding:0 24px 32px}
header{padding:18px 0;border-bottom:1px solid var(--bord);margin-bottom:18px}
h1{margin:0;font-size:21px}
h2{font-size:15px;margin:0 0 4px}
.carte{background:#fff;border:1px solid var(--bord);border-radius:8px;padding:16px;margin-bottom:16px}
.grille{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* rangée des indicateurs : les six cartes tiennent sur une seule ligne,
   et retombent en deux colonnes sur petit écran */
.g-kpi{grid-template-columns:repeat(7,1fr)}
@media (max-width:1250px){.g-kpi{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1100px){.g-kpi{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.g-kpi{grid-template-columns:repeat(2,1fr)}}
.g-kpi .kpi .v{font-size:clamp(16px,1.4vw,24px);white-space:nowrap}
.g-kpi .kpi .t{font-size:11.5px;letter-spacing:.4px}
.kpi{background:#fff;border:1px solid var(--bord);border-radius:8px;padding:14px;border-top:3px solid var(--marine);
display:block;color:inherit;text-decoration:none}
a.kpi:hover{border-color:var(--action);box-shadow:0 2px 10px rgba(10,92,138,.12)}
a.kpi .aide{visibility:hidden}
a.kpi:hover .aide{visibility:visible}
.legende-anneau a{color:inherit;text-decoration:none}
.legende-anneau a:hover{text-decoration:underline}
.kpi.k-rouge{border-top-color:var(--rouge)}.kpi.k-orange{border-top-color:var(--orange)}
.kpi.k-vert{border-top-color:var(--vert)}
.k-gris{border-top-color:var(--gris)}.kpi.k-ci{border-top-color:var(--ci-orange)}
.kpi .t{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ardoise)}
.kpi .v{font-size:24px;font-weight:750;margin-top:2px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ardoise);
padding:6px 8px;border-bottom:1px solid var(--bord)}
td{padding:6px 8px;border-bottom:1px solid #f1f5f9}
tr:hover td{background:#f8fafc}
.num,.mono{font-family:Consolas,"Courier New",monospace;font-size:13px}
.num{text-align:right}
.puce{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid}
.rouge{color:var(--rouge);background:#fef2f2;border-color:#fecaca}
.orange{color:var(--orange);background:#fffbeb;border-color:#fde68a}
.vert{color:var(--vert);background:#ecfdf5;border-color:#a7f3d0}
.gris{color:#475569;background:#f8fafc;border-color:var(--bord)}
input,select,textarea{width:100%;padding:7px 9px;border:1px solid #cbd5e1;border-radius:6px;font:inherit;background:#fff}
textarea{min-height:120px;font-family:Consolas,monospace;font-size:12px}
label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ardoise);margin:0 0 3px}
.champ{margin-bottom:10px}
.a-saisir input{border-color:#f59e0b;background:#fffbeb}
button,.bouton{display:inline-block;padding:8px 14px;border:0;border-radius:6px;background:var(--action);
color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
button.second,.bouton.second{background:#fff;color:var(--encre);border:1px solid #cbd5e1}
button.danger{background:#fff;color:var(--rouge);border:1px solid #fecaca}
.flash{padding:10px 14px;border-radius:6px;margin:0 0 16px}
.flash.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.flash.err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.flash.avert{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.ctrl{border:1px solid var(--bord);border-radius:6px;padding:10px;margin-bottom:8px}
.ctrl code{background:var(--encre);color:#fff;padding:1px 6px;border-radius:4px;font-size:12px}
.ctrl p{margin:6px 0 0;color:#334155;font-size:14px}
.bandeau{border:1px solid;border-left-width:5px;border-radius:8px;padding:14px 16px;margin-bottom:16px}
.barres{display:flex;align-items:flex-end;gap:6px;height:150px;margin-top:10px}
.barres div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;font-size:10px;color:var(--ardoise)}
.barres i{display:block;width:100%;background:var(--action);border-radius:3px 3px 0 0}
.barres i.f{background:var(--rouge)}
.aide{color:var(--ardoise);font-size:13px}
@media(max-width:820px){body{flex-direction:column}aside{width:auto;flex:none}main{padding:0 12px 24px}}

/* ---------- graphiques ---------- */
.graphe{position:relative;height:230px;margin-top:8px}
.legende-anneau{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;font-size:13px}
.legende-anneau b{font-variant-numeric:tabular-nums}
.pastille{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:baseline}

/* ---------- page de connexion ---------- */
.porte{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:24px;
background:var(--encre) repeating-linear-gradient(-45deg,rgba(247,127,0,.05) 0 26px,transparent 26px 78px)}
.guichet{width:100%;max-width:420px;background:#fff;border-radius:10px;overflow:hidden;
box-shadow:0 24px 60px rgba(4,14,26,.5);animation:lever .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes lever{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.guichet .corps{padding:26px 28px 28px}
.eyebrow{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ardoise);margin:0 0 8px}
.guichet h1{font-size:19px;line-height:1.3;margin:0 0 2px;color:var(--encre)}
.guichet .aide{margin:0 0 18px}
.guichet input{padding:10px 11px}
.guichet input:focus{outline:2px solid var(--ci-orange);outline-offset:0;border-color:var(--ci-orange)}
.guichet button[type=submit]{width:100%;padding:11px;margin-top:6px;background:var(--encre);font-size:15px}
.guichet button[type=submit]:hover{background:var(--marine)}
.mdp{position:relative}
.mdp .voir{position:absolute;right:6px;bottom:5px;padding:4px 8px;border:0;background:none;color:var(--ardoise);
font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline}
.pied-porte{margin-top:16px;text-align:center;font-size:12px;color:#8fa3b8}
.secousse{animation:secousse .3s}
@keyframes secousse{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
:focus-visible{outline:2px solid var(--ci-orange);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.guichet,.secousse{animation:none}}


/* ============ écran de connexion E-Verif ============ */
.porte { background:
    radial-gradient(1100px 500px at 85% -10%, rgba(247,146,29,.16), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(0,154,68,.14), transparent 55%),
    linear-gradient(160deg, #0d1f2d 0%, #10293b 55%, #0d2233 100%); }
.guichet { max-width: 470px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(6px); animation: ev-lever .5s ease-out both; }
@keyframes ev-lever { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.guichet .corps { padding: 34px 38px 30px; }
.ev-sceau { display: block; width: fit-content; margin: 16px auto 12px; padding: 14px 34px;
  border-radius: 18px; text-align: center;
  font: 700 30px/1.1 "Segoe UI", system-ui, sans-serif; letter-spacing: .4px; color: #12293b;
  background: linear-gradient(140deg, #ffd39b, #f7921d 70%);
  box-shadow: 0 10px 26px rgba(247,146,29,.40), inset 0 1px 0 rgba(255,255,255,.55); }
.ev-nom { margin: 0 0 4px; font-size: 34px; letter-spacing: .4px; color: #fff; }
.ev-titre { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; color: #eaf2f8; line-height: 1.45; }
.ev-sous { margin: 0 0 14px; font-size: 12.5px; font-weight: 300; letter-spacing: .3px;
  color: #9fb3c4; font-style: italic; }
.guichet .champ input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16);
  transition: border-color .15s, box-shadow .15s; }
.guichet .champ input:focus { border-color: #f7921d; box-shadow: 0 0 0 3px rgba(247,146,29,.22); outline: none; }
.guichet button[type=submit] { width: 100%; padding: 12px; font-size: 15px; border-radius: 10px;
  background: linear-gradient(140deg, #f7921d, #e07b00); border: 0;
  box-shadow: 0 10px 24px rgba(247,146,29,.30); transition: transform .12s, box-shadow .12s; }
.guichet button[type=submit]:hover { transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(247,146,29,.38); }


/* ============ lisibilité et gaieté de l'écran d'accueil ============ */
.porte { background:
    radial-gradient(1200px 560px at 88% -12%, rgba(247,146,29,.26), transparent 58%),
    radial-gradient(1000px 520px at -12% 112%, rgba(0,176,80,.22), transparent 55%),
    radial-gradient(700px 420px at 50% 120%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(158deg, #123249 0%, #17405d 52%, #123249 100%); }
.guichet { border-color: rgba(255,255,255,.16); }
.guichet .tricolore { height: 6px;
  box-shadow: 0 2px 14px rgba(247,146,29,.45); }
.guichet .eyebrow { font-size: 11.5px; letter-spacing: .6px; line-height: 1.55;
  color: #ffe0b0; text-transform: uppercase; font-weight: 600;
  max-width: 44ch; margin-left: auto; margin-right: auto; text-align: center; }
.ev-nom { font-size: 36px; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.ev-titre { color: #f6fafd; font-size: 16px; text-align: center; }
.ev-sous { color: #c2d5e4; font-size: 13px; text-align: center; }
.guichet .aide { color: #d8e5ef; }
.guichet .champ label { color: #eaf3fa; font-weight: 600; letter-spacing: .3px; }
.guichet .champ input { color: #fff; font-size: 15px; padding: 11px 12px;
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); }
.guichet .champ input::placeholder { color: #a9bfd0; }
.guichet .voir { color: #ffd39b; }
.guichet .flash.err { background: rgba(214,64,69,.18); border: 1px solid rgba(255,131,131,.45);
  color: #ffd9d9; }
.pied-porte { color: #b9cddd; }


/* centrage du cartouche e-Vérif, prioritaire sur les règles génériques des titres */
.guichet .corps h1.ev-sceau, h1.ev-sceau {
  display: block; width: fit-content;
  margin-left: auto !important; margin-right: auto !important; text-align: center;
}