/* Espace revendeur.
 *
 * Ni vitrine ni back-office. C'est un outil de comptoir : la personne qui
 * l'ouvre a un client devant elle, un téléphone à la main, et une connexion qui
 * n'est pas celle de Cotonou. D'où trois partis pris.
 *
 * Les cibles sont grandes. Un champ de quantité qu'on rate au pouce fait
 * commander douze sachets au lieu de deux, et personne ne relit.
 *
 * Les montants sont en chiffres tabulaires et alignés à droite. Une colonne de
 * prix qui ne s'aligne pas se recompte à la main.
 *
 * Une seule feuille, aucune police à charger, aucune icône. Elle doit peindre
 * sur une connexion qui tombe.
 */

:root {
  --green: #0f7038;
  --green-dark: #0a4f27;
  --gold: #c8a44a;
  --ink: #16211a;
  --muted: #5d6b62;
  --line: #d7e2d9;
  --paper: #fff;
  --wash: #f4f7f4;
  --warn: #8a4b06;
  --warn-wash: #fdf3e6;
  --bad: #9a1d1d;
  --bad-wash: #fdeeee;
  --ok-wash: #e9f5ec;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  /* Sans cela le navigateur retient chaque tape 300 ms pour guetter un
     double-tap. Sur une saisie de vingt quantités, cela se sent. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(15 112 56 / 12%);
  background: var(--wash);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Les encoches. En paysage sur un téléphone récent, la barre verte et le
   contenu passent sous l'encoche sans cela — et c'est précisément dans cette
   position qu'on lit un tableau de prix. */
.wrap {
  max-width: 56rem;
  margin: 0 auto;
  padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
}

body {
  padding-bottom: env(safe-area-inset-bottom);
}

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

.header {
  background: var(--green);
  color: #fff;
}

.header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 0.7rem;
}

.brand {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.brand__name {
  display: block;
  letter-spacing: 0.06em;
}

.brand__sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.85;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-inline-end: auto;
}

.nav a {
  color: #fff;
  text-decoration: none;
  padding-block: 0.15rem;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a.is-current {
  border-bottom-color: #fff;
}

.nav a[aria-current='page'] {
  font-weight: 700;
}

.who {
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Texte ----------------------------------------------------------------- */

main {
  padding-block: 1.5rem 4rem;
}

/* `balance` évite qu'un titre finisse sur un mot seul, ce qui arrive vite avec
   « Supermarché Wend-Kuuni » sur une largeur de téléphone. */
h1 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

h2 {
  font-size: 1.1rem;
  margin: 1.75rem 0 0.6rem;
  text-wrap: balance;
}

a {
  color: var(--green-dark);
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  background: var(--wash);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}

.lead {
  color: var(--muted);
  margin-top: -0.5rem;
  max-width: 62ch;
}

.muted {
  color: var(--muted);
}

.hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.25rem 0 0.75rem;
  max-width: 62ch;
}

.empty {
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 1rem;
  color: var(--muted);
}

/* Cartes ---------------------------------------------------------------- */

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}

.card {
  flex: 1 1 11rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.9rem 1rem;
}

/* Un encours au-delà du plafond n'est pas une nuance de gris : c'est la
   raison pour laquelle la prochaine commande sera refusée. */
.card--warn {
  border-color: #e8c79a;
  background: var(--warn-wash);
}

.card__number {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.card__label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Tableaux -------------------------------------------------------------- */

.scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.scroller .grid {
  min-width: 30rem;
}

.grid th,
.grid td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.grid thead th {
  background: var(--wash);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.grid .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.grid tfoot th {
  text-align: right;
  font-weight: 400;
  color: var(--muted);
}

.grid tfoot tr:last-child th,
.grid tfoot tr:last-child td {
  border-bottom: 0;
  font-weight: 700;
  color: var(--ink);
}

.grid tbody tr:last-child td {
  border-bottom: 0;
}

/* Pastilles ------------------------------------------------------------- */

.pill {
  display: inline-block;
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 0.12rem 0.5rem;
  border-radius: 10px;
  background: var(--ok-wash);
  color: var(--green-dark);
  white-space: nowrap;
}

/* Panneaux et formulaires ----------------------------------------------- */

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem 1.1rem 1.2rem;
  margin-bottom: 1.25rem;
}

.narrow {
  max-width: 24rem;
}

.field {
  margin: 0 0 0.9rem;
  max-width: 30rem;
}

.field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.field .hint {
  margin: 0.2rem 0 0;
}

input,
textarea {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.7rem;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: inherit;
}

textarea {
  resize: vertical;
  min-height: 5rem;
}

/* Sur tout ce qui prend le focus, pas seulement les champs : le parcours au
   clavier traversait les liens et les boutons sans rien montrer. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 3px;
}

.header a:focus-visible {
  outline-color: #fff;
}

button,
.button {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  min-height: 48px;
  border: 0;
  border-radius: 4px;
  background: var(--green);
  color: #fff;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

button:hover,
.button:hover {
  background: var(--green-dark);
  color: #fff;
}

.button--quiet {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--green-dark);
}

.button--quiet:hover {
  background: var(--wash);
  color: var(--green-dark);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin: 1rem 0 1.5rem;
}

.signout {
  margin-top: 1.5rem;
}

/* Le catalogue ---------------------------------------------------------- */

/* Une ligne par tisane plutôt qu'un tableau : sur un téléphone tenu à une
   main, un tableau à quatre colonnes se lit de travers, et le champ de
   quantité finit hors écran. */
.lines {
  margin-bottom: 1.25rem;
}

.line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.6rem;
}

/* `min-width: 0` : sans lui un enfant flex refuse de descendre sous la largeur
   de son contenu, et un nom d'étiquette long pousse le champ de quantité hors
   de l'écran au lieu de passer à la ligne. */
.line__what {
  flex: 1 1 14rem;
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.line__what .muted {
  font-size: 0.83rem;
}

.line__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.line__amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.line__price .muted {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.line__qty {
  flex: 0 0 7rem;
  margin: 0;
}

.line__qty input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Conditions et chronologie --------------------------------------------- */

dl.terms {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}

dl.terms dt {
  color: var(--muted);
  font-size: 0.85rem;
}

dl.terms dd {
  margin: 0;
}

.timeline {
  margin: 0;
  padding-left: 1.2rem;
}

.timeline li {
  margin-bottom: 0.6rem;
}

/* Messages -------------------------------------------------------------- */

.flash {
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid;
}

.flash p {
  margin: 0;
}

.flash--ok {
  background: var(--ok-wash);
  border-color: #b6dcc2;
  color: var(--green-dark);
}

.flash--error {
  background: var(--bad-wash);
  border-color: #e8b6b6;
  color: var(--bad);
}

/* Accessibilité --------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 50;
  background: var(--paper);
  color: var(--green-dark);
  padding: 0.7rem 1rem;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}