/* Scanette — l'ecran d'une caisse de supermarche.
   Le comptoir est sombre, le ticket est en papier. C'est ce contraste qui fait
   lire la mise en page d'un coup d'oeil, sans qu'on ait besoin de titres. */

:root {
  --comptoir: #12140f;
  --tapis: #191c15;
  --tapis-clair: #21251c;
  --bord: #2f3529;
  --bord-vif: #414a37;

  --texte: #e6e9df;
  --texte-doux: #9aa38c;
  --texte-faible: #6b7460;

  --led: #8ee04e;          /* l'afficheur de prix */
  --led-sombre: #2c4a19;
  --laser: #ff3b30;        /* la douchette */
  --ambre: #f0b429;
  --manque: #ff6b5e;

  --papier: #f6f2e7;
  --papier-ombre: #e2dcc9;
  --encre: #23211c;
  --encre-pale: #857f6f;

  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--comptoir);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; cursor: pointer; }

/* ------------------------------------------------------------------ */
/* Disposition : 80 % recettes / 20 % ticket                           */
/* ------------------------------------------------------------------ */

.caisse {
  display: grid;
  grid-template-columns: 80fr 20fr;
  min-height: 100%;
  align-items: start;
}

.tapis {
  min-width: 0;
  padding: 18px 22px 60px;
  /* Le tapis roulant : de fines rainures, tres discretes. */
  background:
    repeating-linear-gradient(90deg,
      transparent 0 38px, rgba(255,255,255,.014) 38px 39px),
    var(--tapis);
}

.ticket-zone {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 14px 14px 14px 0;
  min-width: 250px;
  display: flex;
}

/* ------------------------------------------------------------------ */
/* Enseigne                                                            */
/* ------------------------------------------------------------------ */

.enseigne {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bord);
  margin-bottom: 14px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 21px;
  letter-spacing: -.02em;
}

/* Un vrai petit code-barres en CSS, pas une image. */
.logo-barres {
  width: 26px; height: 22px;
  background: repeating-linear-gradient(90deg,
    var(--led) 0 2px, transparent 2px 4px,
    var(--led) 4px 5px, transparent 5px 8px,
    var(--led) 8px 11px, transparent 11px 12px,
    var(--led) 12px 13px, transparent 13px 16px,
    var(--led) 16px 18px, transparent 18px 21px,
    var(--led) 21px 22px, transparent 22px 26px);
  border-radius: 1px;
}

.logo-mot { font-weight: 650; }

.baseline { margin: 0; color: var(--texte-doux); font-size: 13.5px; flex: 1; min-width: 200px; }

.compteur {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--led);
  background: var(--led-sombre);
  border: 1px solid #3d6425;
  padding: 3px 8px;
  border-radius: var(--r);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Saisie                                                              */
/* ------------------------------------------------------------------ */

.saisie { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }

.saisie-champ { position: relative; flex: 1; min-width: 260px; }

#texte {
  width: 100%;
  display: block;
  padding: 11px 13px;
  background: var(--comptoir);
  color: var(--texte);
  border: 1px solid var(--bord-vif);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
  min-height: 76px;
}
#texte::placeholder { color: var(--texte-faible); }
#texte:focus { outline: none; border-color: var(--led); box-shadow: 0 0 0 3px rgba(142,224,78,.13); }

/* Le rayon rouge qui balaie le champ pendant la dictee. */
.laser {
  position: absolute; left: 1px; right: 1px; top: 0;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--laser), transparent);
  box-shadow: 0 0 12px 2px rgba(255,59,48,.55);
  opacity: 0;
  pointer-events: none;
}
.ecoute .laser { opacity: 1; animation: balayage 1.9s ease-in-out infinite; }
@keyframes balayage {
  0%, 100% { transform: translateY(6px); }
  50%      { transform: translateY(64px); }
}
@media (prefers-reduced-motion: reduce) {
  .ecoute .laser { animation: none; opacity: .8; }
}

.saisie-actions { display: flex; gap: 8px; align-items: flex-start; }

.btn-micro, .btn-scanner, .btn-son {
  border: 1px solid var(--bord-vif);
  background: var(--tapis-clair);
  border-radius: var(--r);
  padding: 10px 14px;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.btn-micro:hover, .btn-scanner:hover, .btn-son:hover { border-color: var(--bord-vif); background: #282d20; }

.btn-scanner {
  background: var(--led); color: #10240a; border-color: var(--led);
  font-weight: 620;
}
.btn-scanner:hover { background: #9dea60; border-color: #9dea60; }

/* La douchette : un petit pistolet vu de profil. */
.douchette {
  width: 13px; height: 15px; position: relative; display: inline-block;
  background: currentColor;
  clip-path: polygon(0 0, 62% 0, 62% 46%, 100% 46%, 100% 100%, 38% 100%, 38% 54%, 0 54%);
  opacity: .85;
}
.btn-micro[aria-pressed="true"] {
  border-color: var(--laser);
  background: #2a1614;
  color: #ffb3ad;
}
.btn-micro[aria-pressed="true"] .douchette { color: var(--laser); opacity: 1; }

.btn-son { padding: 10px 11px; font-size: 15px; line-height: 1; }
.btn-son[aria-pressed="false"] { opacity: .42; }

.micro-note {
  width: 100%; margin: 2px 0 0;
  font-size: 12.5px; color: var(--ambre);
}

/* ------------------------------------------------------------------ */
/* Filtres                                                             */
/* ------------------------------------------------------------------ */

.filtres {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 12px 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bord);
}
.filtres-groupe { display: flex; gap: 6px; flex-wrap: wrap; }
.filtres-groupe + .filtres-groupe { border-left: 1px solid var(--bord); padding-left: 16px; }

.puce {
  border: 1px solid var(--bord-vif);
  background: transparent;
  color: var(--texte-doux);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 12.5px;
}
.puce:hover { color: var(--texte); border-color: #566047; }
.puce[aria-pressed="true"] {
  background: var(--led); border-color: var(--led); color: #10240a; font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Resultats                                                           */
/* ------------------------------------------------------------------ */

.vide { max-width: 560px; padding: 34px 0; color: var(--texte-doux); font-size: 14px; }
.vide-titre { color: var(--texte); font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.btn-exemple {
  margin-top: 14px;
  background: transparent; border: 1px dashed var(--bord-vif);
  color: var(--led); border-radius: var(--r); padding: 8px 14px; font-size: 13px;
}
.btn-exemple:hover { border-style: solid; }

.rayon-titre {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 7px;
  font-size: 11.5px; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--texte-faible);
}
.rayon-titre::after {
  content: ""; flex: 1; height: 1px; background: var(--bord);
}
.rayon-titre.rayon-pret { color: var(--led); }
.rayon-titre.rayon-pret::after { background: var(--led-sombre); }

/* Une recette = une ligne. Dense, tout se lit sans deplier. */
.recette {
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--tapis-clair);
  margin-bottom: 4px;
  overflow: hidden;
}
.recette:hover { border-color: var(--bord-vif); }
.recette.ouverte { border-color: var(--led-sombre); background: #1d2117; }

.recette-tete {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  background: none; border: 0; text-align: left;
}

/* Jauge de couverture, facon afficheur de caisse. */
.jauge {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  padding: 3px 0;
  border-radius: 3px;
  color: var(--ambre);
  background: #2a2411;
  border: 1px solid #4a3d14;
}
.recette.pret .jauge { color: var(--led); background: var(--led-sombre); border-color: #3d6425; }

.recette-corps { min-width: 0; }
.recette-titre {
  margin: 0; font-size: 14.5px; font-weight: 590;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recette-meta {
  margin: 1px 0 0;
  font-size: 12px; color: var(--texte-faible);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recette-meta .sep { opacity: .45; margin: 0 5px; }
.recette-meta .manque { color: var(--manque); }
.recette-meta .pret { color: var(--led); }
.recette-meta .util { color: var(--texte-doux); }

.recette-fin { display: flex; align-items: center; gap: 10px; }
.recette-duree {
  font-family: var(--mono); font-size: 12.5px; color: var(--texte-doux);
  white-space: nowrap;
}
.chevron { color: var(--texte-faible); font-size: 11px; transition: transform .15s; }
.recette.ouverte .chevron { transform: rotate(90deg); }

/* Detail deplie */
.detail {
  border-top: 1px solid var(--bord);
  padding: 12px 12px 14px 68px;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
  gap: 18px;
}
.detail h4 {
  margin: 0 0 6px; font-size: 11px; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .08em; color: var(--texte-faible);
}
.detail-ing { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.detail-ing li { display: flex; gap: 7px; padding: 1.5px 0; align-items: baseline; }
.detail-ing .coche { font-family: var(--mono); font-size: 12px; width: 12px; flex: none; }
.detail-ing .oui .coche { color: var(--led); }
.detail-ing .non .coche { color: var(--manque); }
.detail-ing .placard .coche { color: var(--texte-faible); }
.detail-ing .non span:last-child { color: var(--manque); }
.detail-ing .qte { color: var(--texte-faible); font-family: var(--mono); font-size: 12px; }
.detail-ing .opt { color: var(--texte-faible); font-style: italic; font-size: 12px; }

.detail-etapes { margin: 0; padding-left: 19px; font-size: 13.5px; color: #d3d8ca; }
.detail-etapes li { padding: 2.5px 0; }
.detail-astuce {
  margin: 10px 0 0; padding: 8px 11px;
  background: #2a2411; border-left: 2px solid var(--ambre);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 13px; color: #e8d9a8;
}
.detail-resume { margin: 0 0 10px; font-size: 13.5px; color: var(--texte-doux); }
.detail-materiel { margin: 8px 0 0; font-size: 12px; color: var(--texte-faible); }

/* Le menu de la semaine */
.menu-semaine {
  border: 1px dashed var(--bord-vif); border-radius: var(--r);
  padding: 11px 13px; margin: 16px 0 4px;
  background: #1b1f16;
}
.menu-semaine h3 {
  margin: 0 0 7px; font-size: 11.5px; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .08em; color: var(--led);
}
.menu-semaine ol { margin: 0; padding-left: 18px; font-size: 13.5px; }
.menu-semaine li { padding: 1.5px 0; }
.menu-semaine .util { color: var(--texte-faible); font-size: 12px; }

/* ------------------------------------------------------------------ */
/* Le ticket                                                           */
/* ------------------------------------------------------------------ */

.ticket {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 26px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05);
  /* Le papier thermique n'est jamais parfaitement blanc ni uniforme. */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.035), transparent 18px),
    linear-gradient(0deg, rgba(0,0,0,.03), transparent 22px);
  max-height: 100%;
}

/* Les dents du massicot, en haut et en bas. */
.ticket-dents { height: 7px; flex: none; background: var(--papier); }
.ticket-dents-haut {
  -webkit-mask-image: radial-gradient(circle at 4px 0, transparent 4px, #000 4.5px);
  mask-image: radial-gradient(circle at 4px 0, transparent 4px, #000 4.5px);
  -webkit-mask-size: 8px 7px; mask-size: 8px 7px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.ticket-dents-bas {
  -webkit-mask-image: radial-gradient(circle at 4px 7px, transparent 4px, #000 4.5px);
  mask-image: radial-gradient(circle at 4px 7px, transparent 4px, #000 4.5px);
  -webkit-mask-size: 8px 7px; mask-size: 8px 7px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}

.ticket-corps {
  padding: 10px 13px 14px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}

.ticket-entete { text-align: center; margin: 0 0 8px; }
.ticket-entete p { margin: 0; letter-spacing: .04em; }
.ticket-marque {
  font-size: 16px; font-weight: 700; letter-spacing: .32em !important;
  margin-bottom: 3px !important;
}
.ticket-entete p:not(.ticket-marque) { color: var(--encre-pale); font-size: 10.5px; }

.ticket-sep {
  border: 0; border-top: 1px dashed #b9b2a0;
  margin: 8px 0;
}

.ticket-lignes { list-style: none; margin: 0; padding: 0; }

/* Une ligne d'article : le nom, des points de conduite, la quantite. */
.ticket-ligne {
  display: flex; align-items: baseline; gap: 3px;
  padding: 1.5px 0;
  text-transform: uppercase;
}
.ticket-ligne .nom {
  flex: none; max-width: 70%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-ligne .points {
  flex: 1;
  border-bottom: 1px dotted #c2bba8;
  transform: translateY(-3px);
  min-width: 8px;
}
.ticket-ligne .qte { flex: none; font-variant-numeric: tabular-nums; }
.ticket-ligne .retirer {
  flex: none; border: 0; background: none; padding: 0 0 0 5px;
  color: #b0a897; font-size: 12px; line-height: 1;
}
.ticket-ligne .retirer:hover { color: var(--laser); }

/* Article non reconnu : on le montre quand meme, barre, pour que
   l'utilisateur voie ce qui n'a pas ete pris en compte. */
.ticket-ligne.inconnu .nom { color: #a9a08c; text-decoration: line-through; }
.ticket-ligne.inconnu .qte { color: #a9a08c; }
.ticket-ligne.approx .nom { color: #8a7a42; }
.ticket-ligne .marque-approx { font-size: 9px; color: #8a7a42; }

/* Un article qui vient d'etre passe : le flash du scanner. */
@keyframes bip {
  from { background: rgba(142,224,78,.55); }
  to   { background: transparent; }
}
.ticket-ligne.neuve { animation: bip .55s ease-out; }
@media (prefers-reduced-motion: reduce) { .ticket-ligne.neuve { animation: none; } }

.ticket-rien { text-align: center; color: var(--encre-pale); margin: 12px 0; letter-spacing: .1em; }

.ticket-totaux { margin: 0; }
.ticket-ligne-total {
  display: flex; justify-content: space-between; gap: 8px;
  margin: 0; padding: 1px 0;
  text-transform: uppercase;
}
.ticket-ligne-total b { font-variant-numeric: tabular-nums; }
.ticket-ligne-total:first-child { font-size: 13px; font-weight: 700; }

.ticket-option {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--encre-pale); cursor: pointer;
  margin: 2px 0 10px;
}
.ticket-option input { margin: 2px 0 0; accent-color: #3f7c1c; flex: none; }
.ticket-option small { text-transform: none; letter-spacing: 0; font-size: 9.5px; }

.ticket-pied { text-align: center; color: var(--encre-pale); font-size: 10px; }
.ticket-pied p { margin: 0; letter-spacing: .06em; }
.code-barres { width: 100%; height: 40px; display: block; margin-bottom: 2px; }
#code-barres-txt { letter-spacing: .22em; margin-bottom: 6px !important; font-size: 10.5px; }

.ticket-vider {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: 1px solid #cdc5b2; border-radius: 3px;
  color: var(--encre-pale); padding: 5px;
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .1em;
}
.ticket-vider:hover { border-color: var(--laser); color: var(--laser); }

/* ------------------------------------------------------------------ */
/* Ecrans etroits : le ticket passe au-dessus, en bandeau              */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .caisse { grid-template-columns: 1fr; }
  .ticket-zone {
    position: static; height: auto; order: 2;
    padding: 0 14px 24px; min-width: 0;
  }
  .tapis { order: 1; padding: 14px 14px 20px; }
  .ticket { max-height: none; }
  .ticket-corps { overflow: visible; }
  .detail { grid-template-columns: 1fr; padding-left: 12px; }
  .recette-tete { grid-template-columns: 40px minmax(0,1fr) auto; gap: 9px; }
}

@media (max-width: 560px) {
  .saisie-actions { width: 100%; }
  .btn-scanner { flex: 1; justify-content: center; }
  .filtres-groupe + .filtres-groupe { border-left: 0; padding-left: 0; }
  .recette-duree { display: none; }
}