/* static/magasin.css — Interface MAGASIN, direction « Comptoir ».
 *
 * Écran tactile 21 pouces (1920 × 1080), au doigt, debout, souvent à deux.
 * Ce qui presse occupe le haut en grosses tuiles ; le dock des modules reste
 * sous le pouce, en bas, toujours au même endroit.
 *
 * Feuille SÉPARÉE de l'administration (admin.css) : ce sont deux métiers et
 * deux appareils, et ils doivent pouvoir évoluer sans se gêner.
 *
 * Règles tactiles du projet : rien de cliquable sous 48 px, aucun sens porté
 * par un survol, et le bouton qui valide reste visible sans défiler.
 * Mêmes couleurs et même vocabulaire que l'appli actuelle.
 */

:root {
  --fond: #f4f6f9;
  --surface: #ffffff;
  --ardoise: #2c3e50;
  --ardoise-clair: #34495e;
  --texte: #2c3e50;
  --gris-fonce: #666666;
  --gris-moyen: #999999;
  --bordure: #dddddd;
  --fond-clair: #eeeeee;
  --accent: #2980b9;
  --accent-pale: #eaf4fe;
  /* Les teintes de sens, reprises telles quelles de coquille/modules.py :
     aucune n'est inventee, chacune a deja un role dans l'appli. */
  --vert: #1e8449;        --vert-pale: #e8f8f0;      /* ce qui est regle */
  --ambre: #b9770e;       --ambre-pale: #fef6e4;     /* ce qui demande un oeil */
  --rouge: #c0392b;       --rouge-pale: #fdecea;     /* ce qui est refuse */
  /* Les trois teintes de TYPE DE NICOTINE, reprises telles quelles de
     LiquidFinder (static/style.css). Elles ne disent pas un etat mais une
     NATURE : sels de nicotine, hybride, classique. Sans elles, les ronds du
     melangeur perdaient leur couleur en silence — var() inconnue = propriete
     invalide, aucune erreur, juste du blanc sur rien (releve par Romain le
     16/09 : « blanc sur vert c'est illisible »). */
  --bleu: #3498db;        /* NS, sels de nicotine */
  --violet: #9b59b6;      /* NSHY, hybride */
  --vert-nicotine: #27ae60;   /* classique */
  --orange: #e67e22;      /* le booster, bouton actif */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;                      /* on lit debout, à bout de bras */
  background: var(--fond);
  color: var(--texte);
  line-height: 1.5;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; }

.bandeau-vue {
  background: #fef6e4; color: #b9770e;
  padding: 14px 32px; font-size: 1em;
}
.bandeau-vue a { color: #b9770e; text-decoration: underline; margin-left: 10px; }

.comptoir { min-height: 100vh; display: flex; flex-direction: column; }

/* ─────────────────────── En-tête ─────────────────────── */

.comptoir-haut {
  background: var(--ardoise); color: #fff;
  min-height: 84px; display: flex; align-items: center; gap: 20px; padding: 0 36px;
}
.comptoir-haut b { font-size: 1.5em; }
.comptoir-haut span { color: #bdc3c7; font-size: 1.05em; }

/* Le fil d'Ariane, a la place du nom de l'appli : on veut savoir OU on est,
   pas comment le logiciel s'appelle. Le premier segment ramene a l'accueil,
   le dernier est la ou l'on se trouve — il ne se clique pas. */
.fil { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fil a {
  color: #bdc3c7; text-decoration: none; min-height: 48px;
  display: flex; align-items: center; padding: 0 10px; border-radius: 10px;
}
.fil a:hover { background: var(--ardoise-clair); color: var(--surface); }
.fil-sep { color: #7f8c8d; }
.fil-rub { color: #bdc3c7; }
.fil-ici { color: var(--surface); font-weight: 600; }
.comptoir-haut .retour {
  margin-left: auto; background: var(--ardoise-clair); color: #fff;
  min-height: 56px; display: flex; align-items: center;
  padding: 0 24px; border-radius: 12px; font-weight: 600;
}

/* ─────────────────────── Les tuiles ─────────────────────── */

.comptoir-corps { flex: 1; padding: 32px 36px 40px; }
.comptoir-tete { margin-bottom: 26px; }
.comptoir-tete h1 { font-size: 2.2em; letter-spacing: -.015em; }
.comptoir-tete p { color: var(--gris-fonce); font-size: 1.2em; margin-top: 4px; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; }
.tuile {
  background: var(--accent-pale); border-radius: 18px; padding: 28px 30px;
  display: grid; gap: 12px; align-content: start; position: relative;
  min-height: 200px; border: 2px solid transparent;
}
.tuile:hover, .tuile:focus-visible { border-color: var(--accent); outline: none; }
.tuile h2 { font-size: 1.5em; }
.tuile p { color: #444; line-height: 1.45; }
.tuile-etat { position: absolute; top: 20px; right: 24px; font-size: 1.3em; }
/* L'icône d'un outil (coquille/icones.py) : un emoji ou un dessin, à la taille du titre. */
.tuile-icone { display: inline-flex; vertical-align: -0.1em; }
.icone-svg { width: 1.05em; height: 1.05em; color: var(--accent); flex: 0 0 auto; }
/* La même icône devant le titre de l'écran de l'outil. */
.titre-icone { display: inline-block; margin-right: 2px; }

/* La tuile DOUBLE : un bloc NORMAL coupe a l'horizontale, un outil en haut,
   un en bas (Romain, 16/09 : « un bloc normal decoupe de facon horizontale,
   cela permettrait de conserver les css »). Chaque moitie reprend le fond,
   les marges et le survol de .tuile ; la vocation tient sur une ligne, pour
   que les deux moities fassent la hauteur d'une tuile simple. */
.tuile-double {
  background: transparent; padding: 0; gap: 2px; border: 0;
  grid-template-rows: 1fr 1fr; align-content: stretch;
}
/* Pas de trait entre les deux (Romain, 16/09) : deux pixels d'espace, et le
   fond de la page fait la separation. Les coins arrondis restent ceux du bloc. */
.tuile-moitie {
  position: relative; display: grid; gap: 6px; align-content: center;
  background: var(--accent-pale); padding: 12px 30px;
  border: 2px solid transparent;
}
.tuile-moitie:first-child { border-radius: 18px 18px 0 0; }
.tuile-moitie:last-child { border-radius: 0 0 18px 18px; }
.tuile-moitie:hover, .tuile-moitie:focus-visible { border-color: var(--accent); outline: none; }
.tuile-moitie p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile-moitie .tuile-etat { top: 12px; right: 24px; }

.comptoir-vide {
  background: var(--surface); border-radius: 18px; padding: 40px;
  color: var(--gris-fonce); font-size: 1.15em;
}

/* ─────────────────────── Le détail d'un module ─────────────────────── */

.comptoir-detail { background: var(--surface); border-radius: 18px; padding: 32px 36px; }

.vocation { display: grid; gap: 24px; position: relative; }
.vocation > header { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.vocation .fil { font-size: 0.85em; color: var(--gris-moyen); }
.vocation h1 { font-size: 2em; }
.vocation h2 { font-size: 0.95em; color: var(--gris-fonce); margin-bottom: 10px; }
.vocation .phrase { font-size: 1.2em; line-height: 1.55; }
.vocation section { border-top: 1px solid var(--bordure); padding-top: 20px; }
.idees { padding-left: 22px; display: grid; gap: 9px; }
.note { color: var(--gris-fonce); }

.etiq { font-size: 0.85em; font-weight: 600; padding: 7px 15px; border-radius: 99px; white-space: nowrap; }
.e-idee     { background: var(--fond-clair); color: var(--gris-fonce); }
.e-chantier { background: #fef6e4; color: #b9770e; }
.e-pret     { background: #e8f8f0; color: #1e8449; }

.bases { display: grid; gap: 12px; }
.base {
  background: var(--fond); border-radius: 12px; padding: 16px 18px;
  display: grid; gap: 5px; border-left: 4px solid var(--bordure);
}
.base .tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.base code { font-family: "Cascadia Mono", Consolas, monospace; font-weight: 600; }
.base .utilite { color: var(--gris-fonce); font-size: 0.95em; }
.fam { font-size: 0.78em; font-weight: 700; text-transform: uppercase; padding: 3px 10px; border-radius: 5px; }
.f-anous    { background: var(--accent-pale); color: var(--accent); }
.f-copie    { background: var(--fond-clair); color: var(--gris-fonce); }
.f-calculee { background: #e8f8f0; color: #1e8449; }
.base.f-b-anous    { border-left-color: var(--accent); }
.base.f-b-calculee { border-left-color: #1e8449; }

/* Les deux icônes : 48 px, comme tout ce qui se touche ici. */
.duo { display: flex; gap: 10px; margin-left: auto; }
.duo-b {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid var(--bordure); background: var(--surface);
  color: var(--gris-fonce); font: inherit; font-size: 1.2em; cursor: pointer;
}
.duo-b:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.bulle {
  position: absolute; top: 74px; right: 0; width: min(620px, 96%);
  background: var(--ardoise); color: #eee;
  border-radius: 16px; padding: 24px 28px; display: grid; gap: 10px;
  box-shadow: 0 10px 30px rgba(44, 62, 80, .35); z-index: 5;
}
.bulle h4 { color: #fff; font-size: 1.2em; }
.bulle p { line-height: 1.5; }
.bulle::before {
  content: ""; position: absolute; top: -10px; right: 28px;
  border: 10px solid transparent; border-top: 0; border-bottom-color: var(--ardoise);
}
/* `hidden` doit gagner : une règle `display` sur .bulle écrase l'attribut HTML
   et les deux bulles s'affichent l'une sur l'autre (constaté le 16/09). */
.bulle[hidden] { display: none; }


/* ─────────────────────── Le dock, sous le pouce ─────────────────────── */

/* Le dock a DEUX rangees (Romain, 16/09) : en haut ce qui peut reclamer
   quelque chose, en bas les outils qu'on va chercher. La separation doit se
   voir sans qu'on l'explique, d'ou le trait entre les deux et la rangee basse
   posee sur le fond plutot que sur la surface. */
.dock {
  position: sticky; bottom: 0;
  background: var(--surface); border-top: 1px solid var(--bordure);
}
.dock-rang { display: flex; gap: 10px; padding: 12px 20px; flex-wrap: wrap; }

/* Rangee haute : le travail vient a toi. Pleine taille, c'est elle qu'on
   touche le plus souvent. */
.dock-appel a {
  min-height: 64px; min-width: 160px; padding: 0 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; text-align: center; font-size: 1.02em;
}

/* Rangee basse : les outils purs. Plus discrete, mais la cible reste tactile
   (48 px de haut au minimum, regle de l'interface Comptoir). */
.dock-outils {
  background: var(--fond); border-top: 1px solid var(--bordure);
  padding-block: 8px;
}
.dock-outils a {
  min-height: 48px; min-width: 130px; padding: 0 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; text-align: center; font-size: 0.96em;
  color: var(--gris-fonce);
}

.dock a:hover { background: var(--fond); }
.dock-outils a:hover { background: var(--surface); }
.dock a.actif { background: var(--accent-pale); color: var(--accent); font-weight: 600; }

@media (max-width: 760px) {
  .comptoir-corps { padding: 22px 18px 30px; }
  .tuiles { grid-template-columns: 1fr; }
  /* Au telephone, les deux rangees defilent horizontalement plutot que de
     manger la moitie de l'ecran en retours a la ligne. */
  .dock-rang { flex-wrap: nowrap; overflow-x: auto; }
  .dock-appel a, .dock-outils a { min-width: 128px; }
}


/* ============================ LE MELANGEUR ============================
   Version deconnectee. Tactile : rien de cliquable sous 48 px, et le bouton
   qui valide reste visible sans defiler (il est colle en bas du corps).
   Les teintes viennent du module (--module / --module-pale), jamais d'ici. */

/* Le degagement du bas suit la hauteur REELLE du dock (--dock-h, mesuree par
   le gabarit), plus de quoi respirer. Ecrite en dur, elle recasse des que le
   dock change — c'est arrive le 16/09 avec la seconde rangee. */
.melangeur { max-width: 900px; margin: 0 auto; padding-bottom: calc(var(--dock-h, 96px) + 40px); }

.mel-tete h1 { font-size: 1.9em; }
.mel-tete p { color: var(--gris-fonce); font-size: 1.15em; margin-top: 4px; }

.mel-bloc {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 18px; padding: 22px 24px; margin-top: 18px;
}
.mel-bloc h2 {
  font-size: 1.25em; display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.mel-num {
  background: var(--module, var(--accent)); color: #fff;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85em; flex: 0 0 auto;
}
.mel-aide { color: var(--gris-fonce); margin: 10px 0; line-height: 1.5; }

/* Les dosages courants : des cibles franches, pas des liens. */
.mel-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mel-chip {
  min-height: 56px; min-width: 88px; padding: 0 18px;
  border: 2px solid var(--bordure); border-radius: 14px;
  background: var(--surface); color: var(--texte);
  font-size: 1.05em; font-weight: 600; cursor: pointer;
}
.mel-chip:hover { border-color: var(--module, var(--accent)); }

.mel-ligne {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 14px;
}
.mel-ligne label { color: var(--gris-fonce); }
.mel-ligne input {
  min-height: 56px; width: 8em; padding: 0 14px; font-size: 1.15em;
  border: 2px solid var(--bordure); border-radius: 12px;
  background: var(--surface); color: var(--texte);
}
.mel-ligne input:focus {
  outline: none; border-color: var(--module, var(--accent));
}
.mel-unite { color: var(--gris-fonce); }

.mel-btn-secondaire {
  min-height: 56px; padding: 0 22px; border-radius: 12px;
  border: 2px solid var(--module, var(--accent));
  background: var(--surface); color: var(--module, var(--accent));
  font-size: 1.02em; font-weight: 600; cursor: pointer;
}

/* Ce qu'on a retenu : visible en permanence, sinon on ne sait plus ce qu'on
   a dit avoir sous la main. */
.mel-retenus { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mel-vide { color: var(--gris-moyen); font-style: italic; }
.mel-retenu {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--module-pale, var(--accent-pale));
  color: var(--module, var(--accent));
  border-radius: 12px; padding: 10px 8px 10px 16px;
  font-weight: 600; min-height: 48px;
}
.mel-retenu small { font-weight: 400; opacity: 0.8; }
.mel-x {
  min-width: 36px; min-height: 36px; border: none; border-radius: 9px;
  background: transparent; color: inherit; font-size: 1.3em; cursor: pointer;
}
.mel-x:hover { background: var(--surface); }

/* Le bouton qui valide : toujours atteignable. */
/* Le bouton qui valide se colle AU-DESSUS du dock, jamais dessous. */
.mel-valider {
  position: sticky; bottom: var(--dock-h, 0px); padding: 16px 0 6px;
  background: linear-gradient(to bottom, transparent, var(--fond) 32%);
  z-index: 2;
}
.mel-btn {
  width: 100%; min-height: 68px; border: none; border-radius: 16px;
  background: var(--module, var(--accent)); color: #fff;
  font-size: 1.25em; font-weight: 600; cursor: pointer;
}

/* Le resultat. La combinaison la plus simple est mise en avant, les autres
   restent lisibles : c'est un conseil, pas une decision a notre place. */
.mel-compte { color: var(--gris-fonce); margin-bottom: 14px; }
.mel-combo {
  border: 1px solid var(--bordure); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 12px;
}
.mel-combo-mieux {
  border: 2px solid var(--module, var(--accent));
  background: var(--module-pale, var(--accent-pale));
}
.mel-recette { font-size: 1.3em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mel-plus { color: var(--gris-moyen); }
.mel-type {
  font-size: 0.62em; font-weight: 600; letter-spacing: 0.04em;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 8px; padding: 4px 10px; color: var(--gris-fonce);
}
.mel-genere, .mel-volumes { color: var(--gris-fonce); margin-top: 8px; line-height: 1.5; }
.mel-ratio { color: var(--gris-moyen); margin-top: 6px; font-size: 0.95em; }

.mel-erreur {
  background: #fdecea; color: #c0392b; border-radius: 12px;
  padding: 16px 18px; font-weight: 600;
}
.mel-trivial {
  background: var(--accent-pale); color: var(--accent);
  border-radius: 12px; padding: 16px 18px; font-weight: 600;
}

@media (max-width: 760px) {
  .mel-ligne input { width: 100%; }
  .mel-bloc { padding: 18px 16px; }
}

/* --- Les deux versions du melangeur : melange pur et DIY --------------- */
.mel-onglets { display: flex; gap: 8px; margin-top: 18px; }
.mel-onglet {
  min-height: 56px; padding: 0 26px; border: none; cursor: pointer;
  border-radius: 14px 14px 0 0; font-size: 1.08em; font-weight: 600;
  background: var(--fond-clair); color: var(--gris-fonce);
}
.mel-onglet.actif { background: var(--module, var(--accent)); color: #fff; }

/* Un panneau d'onglet. `hidden` doit gagner, sinon les deux versions du
   melangeur s'affichent l'une sous l'autre. */
.mel-panneau[hidden] { display: none; }

/* Deux facons de poser le probleme DIY : je vise un volume, ou j'ai deja une
   quantite de base. Une bascule, pas deux ecrans. */
.mel-bascules { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.mel-bascule {
  min-height: 52px; padding: 0 20px; cursor: pointer;
  border: 2px solid var(--bordure); border-radius: 12px;
  background: var(--surface); color: var(--gris-fonce); font-size: 1em;
}
.mel-bascule.actif {
  border-color: var(--module, var(--accent));
  background: var(--module-pale, var(--accent-pale));
  color: var(--module, var(--accent)); font-weight: 600;
}

.mel-case { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.mel-case input { width: 26px; height: 26px; }
.mel-unite small { color: var(--gris-moyen); }

/* La recette : un volume en tete, puis une ligne par composant. Le chiffre
   d'abord, le nom ensuite — c'est le ml qu'on cherche des yeux en versant. */
.diy-total {
  background: var(--module-pale, var(--accent-pale));
  color: var(--module, var(--accent));
  border-radius: 14px; padding: 16px 18px; font-size: 1.3em; margin-bottom: 14px;
}
.diy-total small { display: block; font-size: 0.62em; opacity: 0.85; margin-top: 4px; }
.diy-ligne {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--bordure); border-radius: 14px;
  padding: 14px 18px; margin-bottom: 10px;
}
.diy-icone { font-size: 1.7em; flex: 0 0 auto; }
.diy-ml {
  font-size: 1.6em; font-weight: 600; min-width: 3.6em; text-align: right;
  color: var(--texte); flex: 0 0 auto;
}
.diy-ml small { font-size: 0.5em; font-weight: 400; color: var(--gris-moyen); margin-left: 3px; }
.diy-nom { display: flex; flex-direction: column; gap: 2px; }
.diy-nom span { color: var(--gris-fonce); font-size: 0.95em; line-height: 1.4; }

/* La recette et sa fiole cote a cote : le dessin dit les proportions plus vite
   que trois nombres, mais ce sont les nombres qu'on verse. */
.diy-resultat-corps { display: flex; gap: 22px; align-items: flex-start; }
.diy-fiole { flex: 0 0 auto; }
.diy-lignes { flex: 1 1 auto; min-width: 0; }

/* Ce que la recette DONNE, par opposition a ce qu'on verse. */
.diy-pipeline { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.diy-mesure {
  flex: 1 1 220px; background: var(--fond); border-radius: 14px;
  padding: 14px 18px; display: flex; flex-direction: column; gap: 3px;
}
.diy-mesure-nom { color: var(--gris-fonce); font-size: 0.95em; }
.diy-mesure b { font-size: 1.45em; }
.diy-mesure-note { color: var(--gris-moyen); font-size: 0.88em; line-height: 1.4; }

@media (max-width: 760px) {
  .diy-resultat-corps { flex-direction: column; align-items: center; }
}

/* L'engrenage, a cote du titre comme l'ampoule ailleurs. Meme place pour
   tous ; c'est le CONTENU qui depend de qui regarde. */
.mel-tete-ligne { display: flex; align-items: center; gap: 14px; }
.mel-icone {
  min-width: 48px; min-height: 48px; cursor: pointer; font-size: 1.35em;
  border: 1px solid var(--bordure); border-radius: 12px;
  background: var(--surface); color: var(--gris-fonce);
}
.mel-icone:hover { border-color: var(--module, var(--accent)); color: var(--module, var(--accent)); }

.bulle-reglages {
  display: grid; gap: 16px; margin-top: 14px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 16px; padding: 20px 22px;
}
.bulle-reglages[hidden] { display: none; }   /* `hidden` doit gagner sur `display` */
.reglage-note { color: var(--gris-fonce); font-weight: 600; }
.reglage-groupe h4 { font-size: 1.02em; margin-bottom: 8px; color: var(--module, var(--accent)); }
.reglage {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px;
  padding: 8px 0; border-top: 1px solid var(--fond-clair);
}
.reglage-nom { color: var(--texte); }
.reglage-valeur { font-weight: 600; font-size: 1.1em; text-align: right; white-space: nowrap; }
.reglage-valeur small { color: var(--gris-moyen); font-weight: 400; margin-left: 4px; }
.reglage-aide { grid-column: 1 / -1; color: var(--gris-moyen); font-size: 0.9em; line-height: 1.4; }
.reglage-lecture, .reglage-source {
  color: var(--gris-fonce); font-size: 0.92em; line-height: 1.5;
  border-top: 1px solid var(--fond-clair); padding-top: 12px;
}
.reglage-source code { background: var(--fond); padding: 2px 6px; border-radius: 6px; }

/* La version live : une case, decochee par defaut. Tant qu'elle n'est pas
   branchee, on le DIT plutot que de laisser croire. */
.mel-live {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 18px;
  background: var(--fond-clair); border-radius: 14px;
}
.mel-live-note { color: var(--gris-fonce); font-size: 0.94em; }
.mel-live-attente { background: #fef6e4; }
.mel-live-attente .mel-live-note { color: #b9770e; }

/* La zone live : visible seulement quand on la demande, et nettement separee
   de la saisie a la main — on doit voir d'un coup d'oeil ce qui vient du stock. */
.mel-amont {
  background: var(--accent-pale); border-radius: 14px;
  padding: 14px 18px; margin-bottom: 14px;
}
.mel-amont[hidden] { display: none; }
.mel-etiquette { color: var(--gris-fonce); min-width: 9em; }
.mel-trouve {
  display: block; width: 100%; text-align: left; cursor: pointer;
  min-height: 56px; padding: 10px 16px; margin-top: 8px;
  border: 1px solid var(--bordure); border-radius: 12px;
  background: var(--surface); color: var(--texte); font-size: 1em;
}
.mel-trouve:hover { border-color: var(--accent); }
.mel-trouve span { display: block; color: var(--gris-fonce); font-size: 0.88em; margin-top: 2px; }
.mel-chip small { display: block; font-weight: 400; font-size: 0.7em; color: var(--gris-moyen); }
.mel-chip.actif {
  border-color: var(--module, var(--accent));
  background: var(--module-pale, var(--accent-pale));
  color: var(--module, var(--accent));
}

/* ============ LE BANC D'ESSAI ============
   Pastilles de simulation, le temps du developpement. Il doit se voir que
   c'est un echafaudage : d'ou la bande hachuree et le mot « banc d'essai ».
   Le jour ou « Qui est la ? » repond, tout ceci disparait. */
.bandeau-essai {
  display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap;
  padding: 10px 18px; background: #fef6e4; color: #b9770e;
  border-bottom: 1px solid #f0dcb0; font-size: 0.92em;
}
.bandeau-titre {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 0.85em; opacity: 0.75;
}
.bandeau-groupe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bandeau-groupe b { color: #8a5a08; }
.bandeau-groupe .manque { color: #c0392b; font-style: italic; }
.pastille {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  border: 1px solid #e0c48a; background: #fffaf0; color: #b9770e;
  text-decoration: none; line-height: 1.5; white-space: nowrap;
}
.pastille:hover { border-color: #b9770e; }
.pastille.on { background: #b9770e; border-color: #b9770e; color: #fff; font-weight: 600; }

/* LE BOUTON D ACTION DU COMPTOIR. Il manquait : chaque outil se fabriquait le
   sien (.hl-b dans le melangeur, .btn-valider-al herite de la V1...), et
   Romain l a vu tout de suite -- « le bouton chercher ainsi que le bloc
   recherche me semblent de CSS differentes de ce qu on a fait jusqu a
   maintenant ». Un motif d interface appartient a la feuille d INTERFACE, pas
   a celle d un outil : c est la seule facon qu il reste le meme partout.
   48 px de haut au minimum, regle de l interface Comptoir. */
.btn-comptoir {
  min-height: 48px; padding: 0 22px; border: none; border-radius: 10px;
  background: var(--module, var(--accent)); color: var(--surface);
  font-size: 1em; font-weight: 600; cursor: pointer;
}
.btn-comptoir:hover { filter: brightness(1.06); }
.btn-comptoir:active { transform: scale(0.98); }
.btn-comptoir[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Le champ de saisie qui va avec : meme hauteur, meme rayon. */
.champ-comptoir {
  min-height: 48px; padding: 0 16px;
  border: 2px solid var(--bordure); border-radius: 10px;
  background: var(--surface); color: var(--texte); font-size: 1em;
}
.champ-comptoir:focus { outline: none; border-color: var(--module, var(--accent)); }
/* Grisé tant qu'il n'est pas prêt (une liste qui se charge, par exemple). */
.champ-comptoir:disabled { background: var(--fond-clair); color: var(--gris-moyen); cursor: wait; }

/* ─────────── Les composants des OUTILS du comptoir ───────────
   Romain, 17/09 : les écrans employé s'uniformisent « selon l'univers
   magasin.css ». Chaque outil fabriquait son en-tête, sa recherche, ses cartes
   et ses historiques (cdv-, dbl-, pc-…) : les mêmes motifs, dessinés trois
   fois. Ils vivent ici ; la feuille d'un outil ne garde que ce qui n'existe
   que chez lui. Tout ce qui se touche fait 48 px au moins. */
.comptoir-outil { max-width: 900px; position: relative; }   /* la bulle de l ampoule s y accroche */
.comptoir-outil.large { max-width: 1320px; }
/* L'en-tête d'un OUTIL : titre à gauche, ampoule à droite. Limité aux outils :
   l'accueil garde son en-tête (titre et sous-titre l'un sous l'autre). */
.comptoir-outil > .comptoir-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.comptoir-outil.large > .comptoir-tete,
.comptoir-outil.large > .comptoir-recherche,
.comptoir-outil.large > .phrase,
.comptoir-outil.large > .outil-etat,
.comptoir-outil.large > .outil-note { max-width: 860px; }

/* La recherche : un champ et son bouton, jamais la touche Entrée seule. */
.comptoir-recherche { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.comptoir-recherche .champ-comptoir { flex: 1 1 18rem; }

/* Les résultats sur deux colonnes quand l'écran le permet (Romain, 16/09). */
.comptoir-grille {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px; align-items: start;
}
@media (max-width: 1000px) { .comptoir-grille { grid-template-columns: 1fr; } }

/* La carte d'une fiche. `a-voir` (ambre) : ce qui demande un œil ;
   `faite` (vert) : ce qui vient d'être réglé. */
.comptoir-carte {
  border: 1px solid var(--bordure); border-radius: 12px;
  background: var(--surface); padding: 14px 16px; margin-bottom: 10px;
}
.comptoir-grille > .comptoir-carte { margin-bottom: 0; }
.comptoir-carte.a-voir { border-left: 5px solid var(--ambre); }
.comptoir-carte.faite { border-left: 5px solid var(--vert); }
.comptoir-identite { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.comptoir-num { font-size: 0.82em; color: var(--gris-moyen); }
.comptoir-infos {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin: 8px 0 12px; font-size: 0.88em; color: var(--gris-fonce);
}
.comptoir-remarque { display: block; margin: 6px 0 10px; font-size: 0.86em; color: var(--ambre); }
.comptoir-remarque.neutre { color: var(--gris-moyen); font-style: italic; }
/* L'état d'une fiche se lit sans chercher : gris par défaut, vert si réglée. */
.comptoir-statut {
  font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--fond-clair); color: var(--gris-moyen);
}
.faite .comptoir-statut { background: var(--vert-pale); color: var(--vert); }

/* Les boutons d'une carte ou d'un écran : le geste principal d'abord. */
.comptoir-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.comptoir-carte .comptoir-actions { margin: 0; }
.comptoir-actions[hidden] { display: none; }
.btn-comptoir.secondaire {
  background: var(--surface); color: var(--gris-fonce);
  border: 1px solid var(--bordure); text-decoration: none;
  display: inline-flex; align-items: center;
}

/* L'historique des passages en caisse, sous une carte. `autre` : une vente
   faite sous une AUTRE fiche du même client. */
.comptoir-historique { margin-top: 12px; border-top: 1px solid var(--bordure); padding-top: 12px; }
.comptoir-entete { margin: 0 0 10px; font-size: 0.88em; color: var(--gris-fonce); }
.comptoir-vente { padding: 10px 12px; border-radius: 10px; background: var(--fond); margin-bottom: 8px; }
.comptoir-vente.autre { background: var(--ambre-pale); }
.comptoir-vente-date { font-weight: 700; font-size: 0.88em; }
.comptoir-badge {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--ambre); color: var(--surface); font-size: 0.75em;
}
.comptoir-vente-articles { margin-top: 6px; font-size: 0.9em; line-height: 1.5; }
.comptoir-vente-paiement { margin-top: 4px; font-size: 0.82em; color: var(--gris-moyen); }

/* LE TABLEAU COMMUN (Outil.tableau, static/outil.js) en taille comptoir.
   Romain, 17/09 : toutes les listes ont les chevrons de classement, les puces à
   lettre et les pages de 250 — au comptoir aussi. Mêmes classes qu'en
   administration, cibles de 48 px. */
.outil-table-conteneur { overflow-x: auto; }
.outil-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 12px; }
.outil-table th {
  text-align: left; font-weight: 600; color: var(--gris-fonce);
  padding: 10px 12px; border-bottom: 2px solid var(--bordure); white-space: nowrap;
}
.outil-table td { height: 52px; padding: 6px 12px; border-bottom: 1px solid var(--fond-clair); vertical-align: middle; }
.outil-table tbody tr:has(.outil-choix:checked) td { background: var(--accent-pale); }
.tri-b {
  font: inherit; font-weight: 600; color: inherit; background: none; border: 0;
  min-height: 48px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.chevron { font-size: 0.8em; opacity: .35; }
.trie .chevron { opacity: 1; color: var(--accent); }
.trie { color: var(--texte); }
.col-choix { width: 44px; }
.outil-choix { width: 24px; height: 24px; accent-color: var(--accent); cursor: pointer; }
.outil-num { font-variant-numeric: tabular-nums; color: var(--gris-fonce); white-space: nowrap; }
.outil-lettres, .outil-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.lettre {
  font: inherit; font-weight: 600; min-width: 44px; min-height: 44px; padding: 0 8px;
  border: 1px solid var(--bordure); border-radius: 10px; background: var(--surface);
  color: var(--texte); cursor: pointer;
}
.lettre.on { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.lettre[disabled] { opacity: .3; cursor: default; }
.outil-pages .outil-note { margin-left: 8px; }

/* Un bloc sous la liste (questions, alertes). */
.comptoir-bloc {
  margin-top: 14px; padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--bordure); background: var(--surface); display: grid; gap: 10px;
}
.comptoir-bloc h2 { font-size: 1.15em; }
.comptoir-bloc.a-voir { border-left: 5px solid var(--ambre); }
/* Une question posée à l'employé, et sa réponse. */
.comptoir-question { padding: 10px 0; border-top: 1px solid var(--bordure); display: grid; gap: 8px; }
.comptoir-pastille { display: inline-block; padding: 2px 8px; margin: 2px 2px 2px 0; border-radius: 999px; background: var(--fond); }
.comptoir-reponse { display: flex; flex-wrap: wrap; gap: 10px; }
.comptoir-reponse .champ-comptoir { flex: 1 1 14rem; }
.comptoir-question.appris .champ-comptoir { background: var(--vert-pale); }

/* LE VOYANT d'un service, à côté de l'ampoule (Romain, 17/09) : un rond vert
   quand tout va bien, rouge avec une pastille « 1 » quand il faut regarder ;
   le toucher ouvre sa bulle, qui dit pourquoi et quoi faire. */
.duo-b.voyant { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.voyant-rond { width: 20px; height: 20px; border-radius: 50%; background: var(--gris-moyen); }
.voyant[data-etat="ok"] .voyant-rond { background: var(--vert); }
.voyant[data-etat="ko"] .voyant-rond { background: var(--rouge); }
.voyant-pastille {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; background: var(--rouge); color: var(--surface);
  font-size: 0.75em; font-weight: 700; line-height: 22px; box-sizing: border-box;
}
.voyant-pastille[hidden] { display: none; }

/* ─────────── Le témoin d'activité (pages/coquille.html) ─────────── */
/* En haut, au centre, par-dessus tout : on doit le voir sans le chercher,
   même en ayant fait défiler la page. Assez bas pour ne pas cacher les
   pastilles du banc d'essai, qui restent cliquables pendant l'attente. */
.temoin {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 10px; max-width: min(640px, 92vw);
  padding: 10px 18px; border-radius: 999px;
  background: var(--ardoise); color: #fff; font-size: 0.95em;
  box-shadow: 0 6px 20px rgba(44, 62, 80, .35);
}
.temoin[hidden] { display: none; }
.temoin-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.temoin-duree { font-variant-numeric: tabular-nums; opacity: .8; white-space: nowrap; }
.temoin-point {
  flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  animation: temoin-pouls 1s ease-in-out infinite;
}
@keyframes temoin-pouls { 50% { transform: scale(1.6); opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .temoin-point { animation: none; } }

/* ─────────── Les messages d'action (static/outil.js, Outil.agir) ───────────
   Les mêmes que dans admin.css, en taille comptoir : la ligne d'état, le
   message flottant (sa croix fait 48 px) et le bouton armé.
   Vert = écriture réussie, ambre = suppression ou retrait, rouge = échec. */
.outil-etat { font-weight: 600; min-height: 1.5em; margin: 8px 0; }
.outil-etat[data-sorte="cours"],
.outil-etat[data-sorte="consigne"] { color: var(--gris-fonce); }
.outil-etat[data-sorte="ecrit"] { color: var(--vert); }
.outil-etat[data-sorte="supprime"] { color: var(--ambre); }
.outil-etat[data-sorte="erreur"] { color: var(--rouge); }
.outil-bulles {
  position: fixed; z-index: 60; right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: grid; gap: 10px; width: min(460px, calc(100vw - 32px));
}
.outil-bulle {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px;
  border-radius: 12px; border: 1px solid var(--bordure); border-left: 6px solid var(--gris-fonce);
  background: var(--surface); color: var(--texte); font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  animation: outil-bulle-entree .2s ease-out;
}
.outil-bulle[data-sorte="cours"] { border-left-color: var(--accent); }
.outil-bulle[data-sorte="ecrit"] { border-left-color: var(--vert); background: var(--vert-pale); }
.outil-bulle[data-sorte="supprime"] { border-left-color: var(--ambre); background: var(--ambre-pale); }
.outil-bulle[data-sorte="erreur"] { border-left-color: var(--rouge); background: var(--rouge-pale); }
.outil-bulle-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.outil-bulle-fermer {
  flex: none; min-width: 48px; min-height: 48px; font-size: 1.4em; line-height: 1;
  border: 0; background: none; color: var(--gris-fonce); cursor: pointer;
}
@keyframes outil-bulle-entree { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .outil-bulle { animation: none; } }
.outil-note { font-size: 0.9em; color: var(--gris-fonce); }
.outil-vide { color: var(--gris-moyen); font-style: italic; }

/* Le bouton ARMÉ (Outil.armer) : le prochain appui agit. Il doit se voir. */
.btn-comptoir.btn-arme { background: var(--ambre); color: var(--surface); border-color: var(--ambre); }

/* Un lien qui ECRIT chez Arthur se voit au premier coup d'oeil. */
.f-ecriture { background: var(--rouge-pale); color: var(--rouge); }
.lien-ecrit { border-left: 4px solid var(--rouge); }