/* IRL Comptoir — les jetons et les briques du SYSTÈME D'INTERFACE (24/09/2026).
   Contrat : docs/mockups/systeme-comptoir.html · garde : test/systeme-comptoir.test.js.

   ⭐ LE MÊME SYSTÈME QUE L'APP GRAND PUBLIC (app/app.css § « LE SYSTÈME D'INTERFACE ») :
   la même échelle de plans anthracite, les mêmes gris calculés, le même bouton, le même
   rond, les mêmes icônes tracées — un patron qui passe de l'app à son Comptoir reste dans
   une seule famille. Ce fichier ne portait plus que ÇA de vivant : les trois quarts de ses
   règles (onglets, carte géographique, QR, jauge, fidélité en pastilles…) venaient d'une
   maquette d'avant le Comptoir, et plus rien ne les nommait.

   ⚠️ Le Comptoir n'a qu'UN thème, le foncé — comme l'Atelier (« effort perdu à ce stade
   MVP »). Il était resté au noir #0B0B0F que l'app a quitté le 19/09 (« trop de noir ») ;
   il passe à l'anthracite de l'app. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,800;0,900;1,900&family=Inter:wght@300;400;600;700;800;900&display=swap');

:root{
  /* Les quatre plans de l'app — plus c'est près de toi, plus c'est clair. */
  --n0:#22232B; --n1:#2C2D37; --n2:#343542; --n3:#3C3D4A;
  /* Les noms historiques du Comptoir, gardés pour ses règles : ils DÉSIGNENT les plans. */
  --noir:var(--n0); --fond:var(--n0); --carte:var(--n1); --carte-forte:var(--n2); --feuille:var(--n3);
  /* ⛔ Deux familles d'or, comme dans l'app : `--or`/`--accent` écrivent (un lien, un titre),
     `--ambre`/`--jaune` remplissent (un bouton, une pastille), avec du noir dessus. */
  --accent:#FFD700; --or:#FFD700; --jaune:#FFD700; --ambre:#FBBF24; --or-sourd:#D97706;
  --vert:#22C55E; --vert-fond:#22C55E;
  --rouge:#FB8B8B; --rouge-fond:#FF3B5C; --bleu:#3B82F6;
  /* ⚠️ Les gris de l'app sont CALCULÉS : le plus sombre qui passe 4,5:1 sur les quatre plans.
     Le #7C7C8C d'avant tombait à 3,3:1 sur une carte. */
  --craie:#FFFFFF; --craie2:#D6D6E0; --fumee:#BABAC9; --fumee2:#A8A8B7;
  --cuivre:#FDA85A;                 /* l'alerte : le `--orange-texte` de l'app, lisible sur sa teinte */
  --ouvert:var(--vert);
  /* ⚠️ `--trait` était LU par la liste des clients, les passages d'un client et le réglage
     de la carte de fidélité — et défini nulle part : leurs filets n'existaient pas. */
  --trait:rgba(255,255,255,.10); --trait-fort:rgba(255,255,255,.13);
  --filet:var(--trait); --filet2:var(--trait-fort);
  --rond-fond:rgba(255,255,255,.09); --rond-fond-presse:rgba(255,255,255,.17);
  --toast-fond:rgba(11,11,15,.97);
  --r-ctl:14px;                     /* l'arrondi d'un CONTRÔLE : bouton, champ, bloc intérieur */
  --h-btn:48px;                     /* la hauteur d'un bouton et d'un champ */
  --rayon:24px; --rayon-s:14px;     /* une carte ; un bloc dans une carte */
  --display:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --corps:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Toute classe posant un `display` bat le [hidden] du navigateur, dont la
   specificite est nulle. Sans cette regle, `hidden` reste sans effet. */
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--n0);color:var(--craie);font-family:var(--corps);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}

/* ⭐ LE FOCUS CLAVIER de l'app : `:focus-visible`, jamais `:focus`, un anneau de 2 px DÉCALÉ
   de 2 — donc sur le fond, jamais sur le contrôle. Il y en avait douze variantes (3 px à
   l'intérieur d'un champ, 3 px dehors ailleurs), écrites contrôle par contrôle. */
:focus-visible{outline:2px solid var(--accent) !important;outline-offset:2px}
input:focus-visible,textarea:focus-visible{outline-offset:2px}

/* ── L'ICÔNE — un tracé du sprite (en tête du corps de index.html), jamais un emoji ── */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:20px;height:20px;flex:0 0 auto;display:inline-block;vertical-align:middle;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i.plein{fill:currentColor}

/* ── LE BOUTON — tout ce qui porte un mot. Celui de l'app, au pixel. ────────────────
   Il y en avait cinq dessins : `.bouton` (13 px, 900), `.c-btn` (12 px), les pilules de
   l'en-tête, les liens soulignés, et « Changer d'adresse » — un `.bouton` sans couleur, que
   le navigateur peignait en BLANC. La casse de phrase pour tous, comme l'app. */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--h-btn);padding:0 20px;min-width:0;border-radius:var(--r-ctl);
  border:1px solid var(--trait-fort);background:var(--n2);color:var(--craie);
  font-family:var(--corps);font-weight:800;font-size:15px;line-height:1.1;letter-spacing:-.1px;
  text-transform:none;text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;
  transition:filter .15s,background-color .15s,opacity .15s}
.bouton > svg{width:18px;height:18px;flex:none}
.bouton .i{width:18px;height:18px}
.bouton.large{display:flex;width:100%}
.bouton.plein{background:var(--ambre);border-color:var(--ambre);color:#191100}
.bouton.vert{background:var(--vert-fond);border-color:var(--vert-fond);color:#04220F}
.bouton.rouge{background:var(--rouge-fond);border-color:var(--rouge-fond);color:#1A0008}
.bouton.compact{height:44px;padding:0 16px;border-radius:999px;font-size:14px}
.bouton.carre{width:var(--h-btn);flex:0 0 var(--h-btn);padding:0}
.bouton.nu{height:auto;min-height:44px;padding:6px 8px;background:none;border-color:transparent;
  color:var(--fumee);font-weight:700;font-size:14px;line-height:1.3;white-space:normal}
/* Le lien de l'app : l'or du texte, jamais souligné — un soulignement se lit comme une page web. */
.bouton.lien{height:44px;padding:0 2px;background:none;border-color:transparent;color:var(--accent)}
.bouton[aria-pressed="true"]{color:var(--or);border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.12)}
.bouton:active{filter:brightness(1.1)}
.bouton.plein:active,.bouton.vert:active,.bouton.rouge:active{filter:brightness(.93)}
.bouton:disabled,.bouton[aria-disabled="true"]{opacity:.45;cursor:default;filter:none}
/* Un bouton PLEIN éteint passe au neutre : l'ambre à 45 % donnait un kaki boueux. */
.bouton.plein:disabled,.bouton.vert:disabled,.bouton.rouge:disabled{opacity:1;background:var(--n2);
  border-color:var(--trait);color:var(--fumee2)}

/* ── LE ROND — Fermer. 44 px DESSINÉS au Comptoir (contrat du 20/09 : les croix des feuilles
   et du scanner font 44 × 44), la croix TRACÉE de l'app — plus un « ✕ » en caractère. ── */
.btn-rond{position:relative;width:44px;height:44px;flex:0 0 44px;display:inline-flex;
  align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:50%;
  background:var(--rond-fond);color:var(--craie);cursor:pointer;transition:background-color .15s}
.btn-rond .i{width:20px;height:20px;stroke-width:2}
.btn-rond:active{background:var(--rond-fond-presse)}

/* ── LE BADGE — une étiquette : 24 px, une teinte, une icône ── */
.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;line-height:1}
.badge .i{width:13px;height:13px;stroke-width:2.1}
.badge.vert{background:var(--vert-fond);color:#04220F}
.badge.or{background:var(--jaune);color:#191100}
.badge.teinte{background:rgba(251,191,36,.12);color:var(--ambre)}
.badge.neutre{background:var(--n2);color:var(--fumee)}

/* ── LA TUILE — l'icône d'un chiffre ou d'une ligne ── */
.tuile{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--n2);color:var(--accent)}
.tuile .i{width:21px;height:21px}

/* ── LE TEXTE — surtitre, nom, phrase, mentions ── */
.cat{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--ambre);
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px}
.cat .i{width:15px;height:15px;stroke-width:2}
.nom{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 6px;line-height:1.08;overflow-wrap:anywhere}
.punch{font-style:italic;color:var(--fumee);font-size:14px;margin:0 0 12px}
.mini{font-size:13px;color:var(--fumee)}
.mono{font-family:var(--mono)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}