:root{
  --ink:#16161D; --ink-doux:#2A2A33; --papier:#F7F7F8; --ligne:#E8E8EB; --ligne-pale:#F1F1F3;
  --gris:#6E7178; --pale:#9B9DA5; --accent:#5E6AD2; --accent-fond:#EFF0FC;
  --ambre:#B7791F; --ambre-fond:#FDF6E7; --alerte:#D14343; --alerte-fond:#FDF0F0;
  --ok:#3E9E6A; --ok-fond:#EDF7F1;
  --ombre:0 1px 2px rgba(16,16,29,.05); --rayon:8px;
  --police:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--ink);font-family:var(--police);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;border:none;background:none;padding:0;cursor:pointer}
input,select{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.app{display:flex;min-height:100vh}
.barre{width:256px;flex-shrink:0;border-right:1px solid var(--ligne)}
.marque{display:flex;align-items:center;gap:10px;padding:20px 16px 16px}
.logo{width:26px;height:26px;border-radius:7px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.marque b{display:block;font-size:14px;font-weight:600;line-height:1.2}
.marque span{display:block;font-size:12px;color:var(--pale);line-height:1.2}
.nav{display:flex;flex-direction:column;gap:4px;padding:0 12px 16px}
.nav button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:6px;
  font-size:14px;color:var(--gris);border:1px solid transparent;text-align:left;white-space:nowrap;transition:background .12s}
.nav button:hover{background:rgba(22,22,29,.04)}
.nav button svg{flex-shrink:0;color:var(--pale)}
.nav button[aria-current="true"]{background:#fff;border-color:var(--ligne);box-shadow:var(--ombre);color:var(--ink);font-weight:600}
.nav button[aria-current="true"] svg{color:var(--accent)}

.contenu{flex:1;min-width:0;background:#fff;padding:28px 40px 40px}
.entete{max-width:680px;margin-bottom:28px}
.entete h1{font-size:24px;font-weight:600;letter-spacing:-.02em}
.entete p{font-size:14px;color:var(--gris);margin-top:6px}
.pied{max-width:680px;margin-top:48px;padding-top:14px;border-top:1px solid var(--ligne-pale);font-size:12px;color:var(--pale)}

@media (max-width:860px){
  .app{flex-direction:column}
  .barre{width:100%;border-right:none;border-bottom:1px solid var(--ligne)}
  .nav{flex-direction:row;overflow-x:auto;scrollbar-width:thin}
  .nav button{width:auto}
  .contenu{padding:24px 20px 32px}
  .entete h1{font-size:20px}
}

.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:32px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:20px}
.stats .large{grid-column:1/-1}
.trois{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:24px}

.bloc{margin-bottom:28px}
.bloc>h3{font-size:14px;font-weight:600;margin-bottom:12px}
.bloc-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}

.champ{display:block;margin-bottom:16px}
.champ .etiquette{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;margin-bottom:6px}
.info-bulle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border:1px solid var(--pale);border-radius:50%;font-size:10px;font-weight:700;color:var(--gris);cursor:help;flex-shrink:0}
.info-bulle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.info-contenu{position:absolute;left:20px;top:-5px;width:300px;padding:9px 10px;background:var(--ink);color:#fff;border-radius:7px;box-shadow:0 6px 18px rgba(16,16,29,.18);font-size:12px;font-weight:400;line-height:1.45;opacity:0;visibility:hidden;transform:translateY(3px);transition:opacity .12s,transform .12s,visibility .12s;z-index:20;pointer-events:none}
.info-bulle:hover .info-contenu,.info-bulle:focus .info-contenu{opacity:1;visibility:visible;transform:translateY(0)}
.boite{display:flex;align-items:stretch;background:#fff;border:1px solid var(--ligne);border-radius:6px;box-shadow:var(--ombre);transition:border-color .12s,box-shadow .12s}
.boite:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-fond)}
.boite input{width:100%;padding:8px 12px;font-size:14px;border:none;background:transparent;outline:none;font-variant-numeric:tabular-nums;min-width:0}
.boite .unite{display:flex;align-items:center;padding:8px 12px 8px 4px;font-size:14px;color:var(--pale);white-space:nowrap}
.aide{display:block;font-size:12px;color:var(--pale);margin-top:6px;line-height:1.6}

.stat{background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);box-shadow:var(--ombre);padding:12px 14px}
.stat .etiq{font-size:12px;color:var(--pale);margin-bottom:6px;line-height:1.35}
.stat .val{font-size:20px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat .u{font-size:12px;color:var(--pale);margin-left:6px}
.t-accent{color:var(--accent)} .t-ok{color:var(--ok)} .t-ambre{color:var(--ambre)} .t-alerte{color:var(--alerte)}

.alerte{display:flex;gap:10px;padding:12px 14px;border-radius:var(--rayon);font-size:14px;line-height:1.6;color:var(--ink-doux);margin-bottom:20px}
.alerte svg{flex-shrink:0;margin-top:3px}
.alerte.ambre{background:var(--ambre-fond)} .alerte.ambre svg{color:var(--ambre)}
.alerte.alerte-r{background:var(--alerte-fond)} .alerte.alerte-r svg{color:var(--alerte)}
.alerte.ok{background:var(--ok-fond)} .alerte.ok svg{color:var(--ok)}

.cadre{background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);box-shadow:var(--ombre);overflow:hidden}
.cadre.graphe{padding:12px 8px 4px 0}
.note{font-size:12px;color:var(--pale);margin-top:8px;line-height:1.6}

.bouton{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:14px;color:var(--gris);
  background:#fff;border:1px solid var(--ligne);border-radius:6px;box-shadow:var(--ombre);transition:background .12s}
.bouton:hover{background:var(--papier)}

.enclair{margin-top:32px;background:#fff;border:1px solid var(--ligne);border-radius:10px;box-shadow:var(--ombre)}
.enclair .tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ligne-pale)}
.enclair .tete b{font-size:14px;font-weight:600}
.enclair .tete i{font-style:normal;font-size:12px;color:var(--pale);margin-left:8px}
.enclair .corps{padding:12px 16px}
.enclair p{font-size:14px;line-height:1.6;padding:4px 0;color:var(--gris)}
.enclair p.cle{color:var(--ink);font-weight:500;padding-left:12px;border-left:2px solid var(--accent)}

.tableau{overflow-x:auto}
.tableau table{min-width:560px;font-size:14px}
.tableau th{font-size:12px;color:var(--pale);font-weight:500;padding:10px 12px;text-align:left}
.tableau thead tr{background:var(--papier)}
.tableau td{padding:8px;border-top:1px solid var(--ligne-pale)}
.tableau td:first-child{padding-left:12px}
.tableau .c{text-align:center}
.tableau input[type=text]{width:100%;padding:6px 10px;font-size:14px;border:1px solid var(--ligne);border-radius:6px;background:#fff}
.tableau input[type=number]{width:64px;padding:6px 8px;font-size:14px;text-align:center;border:1px solid var(--ligne);border-radius:6px;background:#fff}
.tableau select{padding:5px 8px;font-size:14px;border:1px solid var(--ligne);border-radius:6px;background:#fff}
.retirer{padding:4px;border-radius:5px;color:var(--pale);display:inline-flex}
.retirer:hover{background:var(--ligne-pale);color:var(--alerte)}

.jauge{height:8px;background:var(--ligne-pale);border-radius:4px;overflow:hidden}
.jauge div{height:8px;border-radius:4px;background:var(--accent)}
.rang{background:#fff;border:1px solid var(--ligne);border-radius:var(--rayon);box-shadow:var(--ombre);padding:12px 14px;margin-bottom:10px}
.rang.premier{border-color:var(--accent)}
.rang .ligne{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;font-size:14px}
.poste{padding:8px 12px;border-bottom:1px solid var(--ligne-pale)}
.poste .ligne{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.poste .jauge,.poste .jauge div{height:6px;border-radius:3px}

.carte{background:#fff;border:1px solid var(--ligne);border-radius:10px;box-shadow:var(--ombre);padding:16px;margin-bottom:16px}
.carte h4{font-size:14px;font-weight:600;margin-bottom:16px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}