/* Back-office Greenfid — feuille de style unique, sans dependance externe. */

:root {
  --vert: #1f7a53;
  --vert-clair: #e8f3ee;
  --vert-fonce: #155c3e;
  --encre: #1b2420;
  --gris: #5c6b64;
  --gris-clair: #e3e8e5;
  --fond: #f6f8f7;
  --blanc: #ffffff;
  --rouge: #a3271f;
  --rouge-clair: #fbeceb;
  --ambre: #8a6100;
  --ambre-clair: #fdf3dd;
  --rayon: 10px;
  --ombre: 0 1px 2px rgba(27, 36, 32, .06), 0 4px 14px rgba(27, 36, 32, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------------------ Entete */

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-clair);
  padding: 0 16px;
  padding-top: env(safe-area-inset-top, 0px);
}

.entete-contenu {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  min-height: 60px;
}

.marque {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--vert);
  text-decoration: none;
  letter-spacing: -.01em;
}

.navigation { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; }

.navigation a {
  color: var(--gris);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  font-size: .95rem;
}

.navigation a:hover { color: var(--encre); }
.navigation a.actif { color: var(--vert); border-bottom-color: var(--vert); font-weight: 600; }

/* ----------------------------------------------------------------- Contenu */

.contenu {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 16px 48px;
}

h1 { font-size: 1.6rem; margin: 0 0 6px; letter-spacing: -.02em; }
h2 { font-size: 1.1rem; margin: 0 0 12px; letter-spacing: -.01em; }

.aide { color: var(--gris); font-size: .9rem; margin: 0 0 18px; }

.carte {
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 24px;
  margin-bottom: 22px;
}

.carte-etroite { max-width: 420px; margin: 8vh auto 0; }
.carte-information { background: var(--vert-clair); border-color: #cde3d8; }

/* ------------------------------------------------------------ Formulaires */

.formulaire { display: flex; flex-direction: column; gap: 6px; }
.formulaire-en-ligne { margin: 0; }

label { font-weight: 600; font-size: .88rem; margin-top: 10px; }

input[type="text"], input[type="email"], input[type="password"], select {
  font: inherit;
  padding: 11px 12px;
  border: 1px solid var(--gris-clair);
  border-radius: 8px;
  background: var(--blanc);
  color: var(--encre);
  width: 100%;
}

input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 1px;
}

.bouton {
  display: inline-block;
  margin-top: 18px;
  padding: 11px 18px;
  background: var(--vert);
  color: var(--blanc);
  border: none;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.bouton:hover { background: var(--vert-fonce); }
.bouton-attention { background: var(--ambre); }
.bouton-attention:hover { background: #6d4d00; }

.bouton-discret {
  background: none;
  border: 1px solid var(--gris-clair);
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: .9rem;
  color: var(--gris);
  text-decoration: none;
  cursor: pointer;
}

.bouton-discret:hover { color: var(--encre); border-color: var(--gris); }

/* --------------------------------------------------------------- Bandeaux */

.bandeau {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: .92rem;
  margin: 0 0 18px;
  border: 1px solid transparent;
}

.bandeau-succes { background: var(--vert-clair); border-color: #cde3d8; color: var(--vert-fonce); }
.bandeau-erreur { background: var(--rouge-clair); border-color: #f0cfcc; color: var(--rouge); }
.bandeau-attention { background: var(--ambre-clair); border-color: #efdcae; color: var(--ambre); }
.bandeau-information { background: var(--fond); border-color: var(--gris-clair); color: var(--gris); }

/* ---------------------------------------------------------------- Tuiles */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 22px 0;
}

.tuile {
  display: block;
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 20px;
  text-decoration: none;
  color: inherit;
}

.tuile:hover { border-color: var(--vert); }
.tuile p { margin: 0; color: var(--gris); font-size: .9rem; }

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

.tableau-defilant { overflow-x: auto; background: var(--blanc);
  border: 1px solid var(--gris-clair); border-radius: var(--rayon); }

.tableau { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 760px; }
.tableau th, .tableau td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--gris-clair); vertical-align: top; }
.tableau th { background: var(--fond); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.tableau tr:last-child td { border-bottom: none; }
.tableau .vide { text-align: center; color: var(--gris); padding: 28px; }
.nowrap { white-space: nowrap; }

code { background: var(--fond); padding: 2px 6px; border-radius: 4px; font-size: .85em; }

.etiquette {
  display: inline-block;
  background: var(--fond);
  border: 1px solid var(--gris-clair);
  border-radius: 20px;
  padding: 1px 9px;
  margin: 1px 3px 1px 0;
  font-size: .78rem;
  color: var(--gris);
}

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

.filtres { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.filtres label { display: block; margin: 0 0 4px; }
.filtres .bouton { margin-top: 0; }

.pagination { display: flex; gap: 16px; align-items: center; justify-content: center; margin-top: 20px; font-size: .9rem; }
.pagination a { color: var(--vert); }

/* ------------------------------------------------------- Double auth. */

.qr { text-align: center; margin: 20px 0; }
.qr svg { width: 200px; height: 200px; }

.secret {
  display: inline-block;
  font-size: 1rem;
  letter-spacing: .12em;
  padding: 5px 10px;
  word-break: break-all;
}

.liste-codes {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.liste-codes li {
  background: var(--fond);
  border: 1px solid var(--gris-clair);
  border-radius: 8px;
  padding: 11px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  letter-spacing: .06em;
}

/* ----------------------------------------------------------- Definitions */

.definitions { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0; font-size: .92rem; }
.definitions dt { color: var(--gris); }
.definitions dd { margin: 0; }

/* ------------------------------------------------------------------ Pied */

.pied {
  text-align: center;
  color: var(--gris);
  font-size: .82rem;
  padding: 20px 16px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 640px) {
  .entete-contenu { gap: 12px; padding: 10px 0; }
  .navigation { order: 3; width: 100%; gap: 14px; }
  .contenu { padding: 20px 14px 40px; }
  .carte { padding: 18px; }
  .carte-etroite { margin-top: 4vh; }
  h1 { font-size: 1.35rem; }
  .definitions { grid-template-columns: 1fr; gap: 2px 0; }
  .definitions dd { margin-bottom: 10px; }
  .filtres > div { flex: 1 1 100%; }
}

/* --------------------------------------------------- Pastilles de statut */

.pastille {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pastille-actif      { background: var(--vert-clair);  color: var(--vert-fonce); border-color: #cde3d8; }
.pastille-privilege  { background: var(--vert-clair);  color: var(--vert-fonce); border-color: #cde3d8; }
.pastille-essentiel  { background: var(--fond);        color: var(--gris);       border-color: var(--gris-clair); }
.pastille-expire     { background: var(--ambre-clair); color: var(--ambre);      border-color: #efdcae; }
.pastille-suspendu   { background: var(--ambre-clair); color: var(--ambre);      border-color: #efdcae; }
.pastille-banni      { background: var(--rouge-clair); color: var(--rouge);      border-color: #f0cfcc; }

/* --------------------------------------------------- Entete avec action */

.titre-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.titre-action h1 { margin: 0; }
.titre-action .bouton { margin-top: 0; }

.tableau a { color: var(--vert); text-decoration: none; }
.tableau a:hover { text-decoration: underline; }

.bloque { color: var(--ambre); font-weight: 600; }
.facultatif { font-weight: 400; color: var(--gris); font-size: .85em; }

/* ------------------------------------------------- Console de messagerie */

.grille-messagerie {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.fil {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}

.bulle { max-width: 82%; border-radius: 12px; padding: 10px 13px; font-size: .92rem; }

.bulle-texte { white-space: pre-wrap; word-break: break-word; }

.bulle-pied { font-size: .72rem; opacity: .7; margin-top: 5px; }

.bulle-entrant {
  align-self: flex-start;
  background: var(--fond);
  border: 1px solid var(--gris-clair);
  border-bottom-left-radius: 3px;
}

.bulle-sortant {
  align-self: flex-end;
  background: var(--vert-clair);
  border: 1px solid #cde3d8;
  border-bottom-right-radius: 3px;
}

.liste-commandes, .liste-numeros { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.liste-commandes li, .liste-numeros li { padding: 5px 0; border-bottom: 1px solid var(--gris-clair); }
.liste-commandes li:last-child, .liste-numeros li:last-child { border-bottom: none; }
.liste-numeros a { color: var(--vert); text-decoration: none; }

@media (max-width: 860px) {
  .grille-messagerie { grid-template-columns: 1fr; }
  .bulle { max-width: 92%; }
}

/* ------------------------------------------- Pastilles de transaction */

.pastille-tr-validee                 { background: var(--vert-clair);  color: var(--vert-fonce); border-color: #cde3d8; }
.pastille-tr-en_attente_confirmation { background: var(--ambre-clair); color: var(--ambre);      border-color: #efdcae; }
.pastille-tr-en_file_attente         { background: var(--ambre-clair); color: var(--ambre);      border-color: #efdcae; }
.pastille-tr-saisie_en_cours         { background: var(--fond);        color: var(--gris);       border-color: var(--gris-clair); }
.pastille-tr-refusee                 { background: var(--rouge-clair); color: var(--rouge);      border-color: #f0cfcc; }
.pastille-tr-expiree                 { background: var(--fond);        color: var(--gris);       border-color: var(--gris-clair); }
.pastille-tr-annulee                 { background: var(--rouge-clair); color: var(--rouge);      border-color: #f0cfcc; }

.chiffre { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.chiffre-vert { color: var(--vert); }

.grille-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.grille-chiffres .aide { margin: 0; }

/* --------------------------------------------------- Pastilles de bon */

.pastille-bon-actif               { background: var(--vert-clair);  color: var(--vert-fonce); border-color: #cde3d8; }
.pastille-bon-en_cours_validation { background: var(--ambre-clair); color: var(--ambre);      border-color: #efdcae; }
.pastille-bon-utilise             { background: var(--fond);        color: var(--gris);       border-color: var(--gris-clair); }
.pastille-bon-expire              { background: var(--fond);        color: var(--gris);       border-color: var(--gris-clair); }
.pastille-bon-annule              { background: var(--rouge-clair); color: var(--rouge);      border-color: #f0cfcc; }

/* ------------------------------------------------- Pastilles d'offre */

.pastille-offre-active      { background: var(--vert-clair);  color: var(--vert-fonce); border-color: #cde3d8; }
.pastille-offre-programmee  { background: var(--ambre-clair); color: var(--ambre);      border-color: #efdcae; }
.pastille-offre-brouillon   { background: var(--fond);        color: var(--gris);       border-color: var(--gris-clair); }
.pastille-offre-epuisee     { background: var(--fond);        color: var(--gris);       border-color: var(--gris-clair); }
.pastille-offre-expiree     { background: var(--fond);        color: var(--gris);       border-color: var(--gris-clair); }
.pastille-offre-desactivee  { background: var(--rouge-clair); color: var(--rouge);      border-color: #f0cfcc; }

/* ------------------------------------------ Saisies propres aux offres */

/* Case a cocher d'un ciblage : la case precede son libelle, sur une ligne. */
.formulaire label.case {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  margin: 4px 0;
}

.formulaire label.case input { width: auto; margin: 0; }

.liste-simple {
  margin: 4px 0 0;
  padding-left: 18px;
}

.liste-simple li { margin-bottom: 2px; }

/* Annulation d'un code depuis la liste : motif et bouton cote a cote. */
.formulaire-ligne {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}

.formulaire-ligne input { margin: 0; }

/* ------------------------------------------- Espace professionnel (mobile) */

/* Pensé pour un téléphone tenu d'une main, au comptoir : peu d'éléments,
   grands, et rien qui demande de viser. */

body.pro {
  background: var(--fond);
}

.pro-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--vert-fonce);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.pro-entete .marque { color: #fff; font-weight: 600; text-decoration: none; }
.pro-entete .bouton-discret { color: #fff; border-color: rgba(255, 255, 255, .5); }

.pro-etablissement {
  flex: 1;
  font-size: .9rem;
  opacity: .9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-contenu {
  max-width: 34rem;
  margin: 0 auto;
  padding: 16px;
}

.pro-contenu h1 { font-size: 1.4rem; margin-top: 8px; }

/* Une cible tactile confortable : rien à viser. */
.bouton-large {
  display: block;
  width: 100%;
  padding: 16px;
  font-size: 1.1rem;
  text-align: center;
  margin-top: 16px;
}

/* Le montant est la seule saisie du parcours : il occupe la place. */
.saisie-montant {
  font-size: 1.6rem;
  text-align: center;
  letter-spacing: .02em;
}

.carte-client { text-align: center; }
.carte-client .identite { padding: 8px 0; }

.identifiant-client {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .04em;
}


.etapes { margin: 0; padding-left: 20px; }
.etapes li { margin-bottom: 8px; }

/* ---------------------------------------------------- QR client imprimable */

.carte-qr { text-align: center; }
.carte-qr .qr-image svg { width: 100%; max-width: 320px; height: auto; }
.carte-qr .identifiant-client { margin-top: 8px; }

@media print {
  .entete, .pied, .sans-impression, .titre-action .bouton-discret { display: none; }
  .carte-qr { border: none; box-shadow: none; }
  .carte-qr .qr-image svg { max-width: 60mm; }
}

/* Le code a six chiffres : gros, espace, impossible a saisir de travers. */
.saisie-code {
  font-size: 1.8rem;
  text-align: center;
  letter-spacing: .35em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}