/* ──────────────────────────────────────────────────────────────────────
   LE COMPTOIR — socle de style
   Un outil de travail, pas une vitrine : densité maîtrisée, filets d'un
   pixel, un seul accent, et des chiffres toujours alignés. Rien ne clignote,
   rien ne brille. Ce qui doit se lire se lit du premier coup.
   ────────────────────────────────────────────────────────────────────── */

@font-face{font-family:Inter;src:url(/fonts/Inter-Variable-latin.woff2)format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Inter Tight';src:url(/fonts/Inter-Tight-Variable-latin.woff2)format('woff2');font-weight:100 900;font-display:swap}

:root{
  /* LE COMPTOIR — le zinc du plateau, le laiton de la barre.
     Une marque à elle, qui ne reprend pas celle de la maison qui l'édite. */
  --fond:#FAF9F7;
  --panneau:#FFFFFF;
  --rail:#F5F3EF;
  --creux:#EFECE6;

  --encre:#14161A;
  --texte:#474B52;
  --mention:#848A93;
  --faible:#AFB4BC;

  --filet:#E6E3DD;
  --filet-fort:#D3CFC7;

  /* l'accent : le laiton */
  --terre:#9A6F2C;
  --terre-vive:#B8893B;
  --terre-pale:#F6EFE1;
  --terre-clair:#D9BE84;

  /* le zinc, pour les fonds sombres de la marque */
  --zinc:#191C21;
  --zinc-clair:#262A31;

  --vert:#2F6B4F; --vert-pale:#E6F0EA;
  --rouge:#8C3A3A; --rouge-pale:#F6E9E7;
  --ambre:#8A6A22; --ambre-pale:#F7F0DC;

  --ombre-fine:0 1px 2px rgba(20,22,26,.04);
  --ombre:0 1px 2px rgba(20,22,26,.04),0 8px 24px -12px rgba(20,22,26,.10);
  --ombre-haute:0 2px 4px rgba(20,22,26,.05),0 18px 44px -16px rgba(20,22,26,.18);

  --rail-l:16.5rem;
  --r:.625rem;
  --r-g:1rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);
  font:.9375rem/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:'Inter Tight',Inter,sans-serif;color:var(--encre);margin:0;
  letter-spacing:-.022em;font-weight:600;line-height:1.14}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
::selection{background:var(--terre-pale);color:var(--encre)}
:focus-visible{outline:2px solid var(--terre);outline-offset:2px;border-radius:4px}

/* ── l'ossature ─────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--rail-l) 1fr;min-height:100vh}

.rail{background:var(--rail);border-right:1px solid var(--filet);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.rail__marque{display:flex;align-items:center;gap:.625rem;padding:1.125rem 1.25rem 1rem;
  border-bottom:1px solid var(--filet)}
/* Le signe : un comptoir vu de profil. Le plateau déborde, le meuble porte.
   En laiton sur le zinc. Rien d'autre à retenir. */
.sceau{width:1.875rem;height:1.875rem;border-radius:.5625rem;background:var(--zinc);
  display:grid;place-items:center;flex:none}
.sceau svg{width:1.125rem;height:1.125rem;display:block}
.sceau .plateau{fill:var(--terre-clair)}
.sceau .meuble{fill:var(--terre-vive);opacity:.72}
.rail__sceau{width:1.875rem;height:1.875rem;border-radius:.5625rem;background:var(--zinc);
  display:grid;place-items:center;flex:none}
.rail__nom{font-family:'Inter Tight',sans-serif;font-weight:650;font-size:.9375rem;
  letter-spacing:-.02em;color:var(--encre);line-height:1.1}
.rail__nom{font-size:1rem;letter-spacing:-.028em}
.rail__nom small{display:block;font-family:Inter,sans-serif;font-weight:400;font-size:.625rem;
  letter-spacing:.11em;color:var(--faible);text-transform:uppercase;margin-top:.0625rem}

.rail__nav{padding:.875rem .75rem 1.25rem;flex:1}
.rail__groupe{margin-bottom:1.125rem}
.rail__titre{font-size:.625rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faible);padding:0 .5rem;margin:0 0 .4375rem}
.rail__lien{display:flex;align-items:center;gap:.625rem;padding:.4375rem .5rem;border-radius:.5rem;
  color:var(--texte);font-size:.875rem;line-height:1.3;position:relative;
  transition:background .14s,color .14s}
.rail__lien:hover{background:var(--creux);color:var(--encre)}
.rail__lien[aria-current="page"]{background:var(--panneau);color:var(--encre);font-weight:550;
  box-shadow:var(--ombre-fine)}
.rail__lien[aria-current="page"]::before{content:"";position:absolute;left:-.75rem;top:.5rem;bottom:.5rem;
  width:2px;border-radius:0 2px 2px 0;background:var(--terre)}
.rail__lien i{width:1rem;height:1rem;flex:none;color:var(--mention)}
.rail__lien[aria-current="page"] i{color:var(--terre)}
.rail__pastille{margin-left:auto;font-size:.6875rem;font-weight:600;color:var(--mention);
  background:var(--creux);border-radius:999px;padding:.0625rem .375rem;min-width:1.25rem;text-align:center}
.rail__lien[aria-current="page"] .rail__pastille{background:var(--terre-pale);color:var(--terre)}

.rail__pied{border-top:1px solid var(--filet);padding:.75rem;display:flex;align-items:center;gap:.625rem}
.rail__jeton{width:1.875rem;height:1.875rem;border-radius:999px;background:var(--terre);color:#fff;
  display:grid;place-items:center;font-size:.75rem;font-weight:600;flex:none}
.rail__qui{font-size:.8125rem;color:var(--encre);font-weight:550;line-height:1.2}
.rail__qui small{display:block;font-weight:400;color:var(--mention);font-size:.6875rem}

/* ── la barre haute ─────────────────────────────────────────────────── */
.haut{position:sticky;top:0;z-index:20;background:rgba(251,250,248,.86);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--filet)}
.haut__dedans{display:flex;align-items:center;gap:1rem;padding:.875rem 1.75rem}
.haut__titre{font-size:1.0625rem;font-weight:600}
.haut__fil{font-size:.75rem;color:var(--mention);margin-top:.125rem}
.haut__actions{margin-left:auto;display:flex;align-items:center;gap:.5rem}

/* ── les briques ────────────────────────────────────────────────────── */
.page{padding:1.5rem 1.75rem 3.5rem;max-width:84rem}
.grille{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}

.carte{background:var(--panneau);border:1px solid var(--filet);border-radius:var(--r-g);
  box-shadow:var(--ombre-fine)}
.carte__tete{display:flex;align-items:center;gap:.75rem;padding:.9375rem 1.125rem;
  border-bottom:1px solid var(--filet)}
.carte__tete h2,.carte__tete h3{font-size:.9375rem;font-weight:600}
.carte__tete .droite{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.carte__corps{padding:1.125rem}
.carte__pied{padding:.75rem 1.125rem;border-top:1px solid var(--filet);
  font-size:.8125rem;color:var(--mention);display:flex;align-items:center;gap:.75rem}

/* le chiffre qui compte */
.chiffre{padding:1.125rem}
.chiffre__cle{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mention);margin:0 0 .5rem}
.chiffre__val{font-family:'Inter Tight',sans-serif;font-size:1.875rem;font-weight:600;
  letter-spacing:-.035em;color:var(--encre);line-height:1}
.chiffre__val span{font-size:1rem;font-weight:500;color:var(--mention);letter-spacing:-.01em}
.chiffre__note{margin:.5rem 0 0;font-size:.75rem;color:var(--mention)}

.delta{display:inline-flex;align-items:center;gap:.1875rem;font-size:.75rem;font-weight:600;
  padding:.0625rem .3125rem;border-radius:.3125rem}
.delta--haut{color:var(--vert);background:var(--vert-pale)}
.delta--bas{color:var(--rouge);background:var(--rouge-pale)}
.delta--plat{color:var(--mention);background:var(--creux)}

/* étiquettes d'état */
.etat{display:inline-flex;align-items:center;gap:.3125rem;font-size:.75rem;font-weight:550;
  padding:.125rem .4375rem;border-radius:.375rem;white-space:nowrap}
.etat::before{content:"";width:.375rem;height:.375rem;border-radius:999px;background:currentColor;flex:none}
.etat--vert{color:var(--vert);background:var(--vert-pale)}
.etat--ambre{color:var(--ambre);background:var(--ambre-pale)}
.etat--rouge{color:var(--rouge);background:var(--rouge-pale)}
.etat--neutre{color:var(--mention);background:var(--creux)}
.etat--terre{color:var(--terre);background:var(--terre-pale)}

/* boutons */
.bt{display:inline-flex;align-items:center;gap:.4375rem;padding:.4375rem .75rem;border-radius:.5rem;
  font-size:.8125rem;font-weight:550;border:1px solid var(--filet-fort);background:var(--panneau);
  color:var(--encre);transition:background .14s,border-color .14s,box-shadow .14s;white-space:nowrap}
.bt:hover{background:var(--creux)}
.bt--plein{background:var(--encre);color:var(--fond);border-color:var(--encre)}
.bt--plein:hover{background:#000}
.bt--terre{background:var(--terre);color:#fff;border-color:var(--terre)}
.bt--terre:hover{background:var(--terre-vive)}
.bt--nu{border-color:transparent;background:none;color:var(--mention)}
.bt--nu:hover{background:var(--creux);color:var(--encre)}
.bt--g{padding:.625rem 1rem;font-size:.875rem;border-radius:.625rem}

/* champs */
.champ{display:flex;align-items:center;gap:.5rem;background:var(--panneau);border:1px solid var(--filet-fort);
  border-radius:.5rem;padding:.4375rem .625rem;font-size:.8125rem;color:var(--encre)}
.champ i{color:var(--faible);flex:none}
.champ input,.champ select{border:0;outline:0;background:none;font:inherit;color:inherit;width:100%}
.champ input::placeholder{color:var(--faible)}

/* tableaux */
.tab{width:100%;border-collapse:collapse;font-size:.8125rem}
.tab th{text-align:left;font-weight:600;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mention);padding:.625rem 1.125rem;border-bottom:1px solid var(--filet);white-space:nowrap}
.tab td{padding:.75rem 1.125rem;border-bottom:1px solid var(--filet);vertical-align:middle}
.tab tr:last-child td{border-bottom:0}
.tab tbody tr{transition:background .12s}
.tab tbody tr:hover{background:var(--rail)}
.tab .nom{font-weight:600;color:var(--encre)}
.tab .sec{color:var(--mention);font-size:.75rem}
.tab .num{text-align:right;font-variant-numeric:tabular-nums}
.tab .fin{text-align:right}

/* listes de lignes */
.lignes{display:grid}
.ligne{display:flex;align-items:center;gap:.875rem;padding:.8125rem 1.125rem;
  border-bottom:1px solid var(--filet)}
.ligne:last-child{border-bottom:0}
.ligne:hover{background:var(--rail)}
.ligne__t{font-weight:600;color:var(--encre);font-size:.875rem}
.ligne__s{font-size:.75rem;color:var(--mention)}
.ligne__d{margin-left:auto;text-align:right;white-space:nowrap}

.jeton{width:2rem;height:2rem;border-radius:.5rem;background:var(--creux);color:var(--terre);
  display:grid;place-items:center;font-size:.75rem;font-weight:650;flex:none;
  font-family:'Inter Tight',sans-serif}

/* barres et jauges */
.jauge{height:.375rem;background:var(--creux);border-radius:999px;overflow:hidden}
.jauge i{display:block;height:100%;border-radius:999px;background:var(--terre)}
.barres{display:flex;align-items:flex-end;gap:.4375rem;height:7.5rem}
/* La colonne occupe toute la hauteur et sert de piste ; la part pleine se
   mesure en pourcentage de cette piste. Sans hauteur sur la colonne, le
   pourcentage n'a aucune reference et le graphique reste vide. */
.barres div{flex:1;height:100%;position:relative;background:var(--creux);border-radius:.25rem}
.barres div b{position:absolute;left:0;right:0;bottom:0;background:var(--terre);
  border-radius:.25rem;display:block;min-height:2px}
.legende{display:flex;gap:.4375rem;margin-top:.5rem}
.legende span{flex:1;text-align:center;font-size:.6875rem;color:var(--faible)}

/* le vide, traité comme un état à part entière */
.vide{padding:2.5rem 1.125rem;text-align:center;color:var(--mention)}
.vide h3{font-size:.9375rem;margin:0 0 .3125rem}
.vide p{margin:0 auto;max-width:24rem;font-size:.8125rem}

.sep{height:1px;background:var(--filet);margin:1.25rem 0}
.mut{color:var(--mention)}
.pt{font-size:.75rem}
.nb{font-family:'Inter Tight',sans-serif;font-weight:600;letter-spacing:-.02em;color:var(--encre)}

/* bandeau de maquette */
.maquette{background:var(--terre);color:#fff;font-size:.75rem;text-align:center;padding:.375rem;
  letter-spacing:.01em}
.maquette a{text-decoration:underline;text-underline-offset:.15em}

@media (max-width:60rem){
  .app{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--filet)}
  .rail__marque{border-bottom:0;border-right:1px solid var(--filet);white-space:nowrap}
  .rail__nav{display:flex;gap:.25rem;padding:.5rem;flex:0 0 auto}
  .rail__groupe{margin:0;display:flex;gap:.25rem}
  .rail__titre{display:none}
  .rail__lien{white-space:nowrap}
  .rail__lien[aria-current="page"]::before{left:0;right:0;top:auto;bottom:-.5rem;width:auto;height:2px}
  .rail__pied{display:none}
  /* La recherche est posee a une largeur fixe : au telephone elle pousse la
     barre hors de l'ecran. On la retire, le menu suffit. */
  .haut__dedans{flex-wrap:wrap}
  .haut__actions .champ{display:none}
  .app>div{min-width:0}
  .page{padding:1.125rem 1rem 3rem;min-width:0}
  .carte,.chiffre{min-width:0}
  .g2,.g3,.g4,.g-2-1,.g-1-2{grid-template-columns:1fr}
  .haut__dedans{padding:.75rem 1rem}
}