/* SEDIS — Portail dépositaires
   Insight Smart Technologies */

:root {
  --vert:        #14653c;
  --vert-clair:  #e8f3ec;
  --jaune:       #f2c200;
  --encre:       #17201c;
  --gris:        #5f6b66;
  --gris-clair:  #e8ecea;
  --fond:        #f7f9f8;
  --blanc:       #ffffff;
  --rouge:       #b3261e;
  --orange:      #b06a00;
  --rayon:       12px;
  --ombre:       0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
}

* { box-sizing: border-box; }

/* L'attribut hidden doit primer sur les display: flex / grid qui suivent. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--encre);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.conteneur {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

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

.entete {
  background: var(--vert);
  color: var(--blanc);
  position: sticky;
  top: 0;
  z-index: 10;
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.marque {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Logo détouré : il se pose directement sur le vert du bandeau. */
.marque__logo {
  height: 48px;
  width: auto;
  display: block;
}

.marque__nom {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .06em;
}

.marque__sous {
  display: block;
  font-size: 12px;
  opacity: .8;
}

@media (max-width: 480px) {
  .marque__logo { height: 38px; }
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.depositaire {
  font-size: 14px;
  font-weight: 600;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bouton-clair {
  background: rgba(255,255,255,.14);
  color: var(--blanc);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.bouton-clair:hover { background: rgba(255,255,255,.24); }
.bouton-clair[disabled] { opacity: .5; cursor: default; }
.bouton-clair--discret { background: transparent; opacity: .8; }

/* ---------- Écran de connexion ---------- */

.connexion {
  max-width: 420px;
  margin: 48px auto;
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  padding: 32px 28px;
  box-shadow: var(--ombre);
}

.connexion__titre {
  margin: 0 0 8px;
  font-size: 22px;
}

.connexion__intro {
  margin: 0 0 24px;
  color: var(--gris);
  font-size: 15px;
}

.champ { display: block; margin-bottom: 16px; }

.champ__libelle {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.champ input {
  width: 100%;
  border: 1px solid var(--gris-clair);
  border-radius: 8px;
  padding: 13px 14px;
  font-size: 16px;   /* 16px : évite le zoom automatique sur iPhone */
  font-family: inherit;
  background: var(--fond);
  color: inherit;
}

.champ input:focus {
  outline: 2px solid var(--vert);
  outline-offset: 1px;
  background: var(--blanc);
}

.bouton-principal {
  width: 100%;
  background: var(--vert);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.bouton-principal:hover { filter: brightness(1.08); }
.bouton-principal[disabled] { opacity: .6; cursor: default; }

.connexion__erreur {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: 8px;
  background: #fdecea;
  color: #8c1d18;
  font-size: 14px;
  border-left: 3px solid var(--rouge);
}

.connexion__aide {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--gris);
  text-align: center;
}

/* ---------- Bandeau d'alerte ---------- */

.bandeau {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: var(--rayon);
  font-size: 14px;
  border-left: 4px solid var(--orange);
  background: #fff6e6;
  color: #7a4a00;
}

.bandeau--erreur {
  border-left-color: var(--rouge);
  background: #fdecea;
  color: #8c1d18;
}

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

.filtres { margin: 20px 0 8px; }

.recherche {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  padding: 0 14px;
  box-shadow: var(--ombre);
}

.recherche__icone { color: var(--gris); font-size: 18px; }

.recherche input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 13px 0;
  font-size: 16px;   /* 16px : évite le zoom automatique sur iPhone */
  font-family: inherit;
  background: transparent;
  color: inherit;
}

.familles {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.familles::-webkit-scrollbar { display: none; }

.puce {
  flex: 0 0 auto;
  border: 1px solid var(--gris-clair);
  background: var(--blanc);
  color: var(--gris);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.puce[aria-pressed="true"] {
  background: var(--vert);
  border-color: var(--vert);
  color: var(--blanc);
  font-weight: 600;
}

.compteur {
  color: var(--gris);
  font-size: 14px;
  margin: 14px 0 10px;
}

/* ---------- Grille produits ---------- */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding-bottom: 32px;
}

.chargement,
.vide {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--gris);
  padding: 48px 16px;
}

.carte {
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--rayon);
  padding: 16px;
  box-shadow: var(--ombre);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carte__haut {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.carte__texte { flex: 1; min-width: 0; }

.visuel {
  position: relative;
  flex: 0 0 auto;
  width: 74px;
  height: 94px;
  border-radius: 8px;
  background: var(--vert-clair);
  overflow: hidden;
}

.visuel__ini {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 19px;
  color: var(--vert);
  letter-spacing: .04em;
}

/* L'image, quand elle existe, recouvre les initiales. */
.visuel img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--vert-clair);
}

.carte__ref {
  font-size: 12px;
  color: var(--gris);
  letter-spacing: .04em;
}

.carte__nom {
  font-size: 17px;
  font-weight: 700;
  margin: 2px 0 0;
  line-height: 1.25;
}

.carte__famille {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vert);
  background: var(--vert-clair);
  border-radius: 999px;
  padding: 3px 9px;
}

.prix {
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.prix__unite {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--gris);
}

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

.pied {
  border-top: 1px solid var(--gris-clair);
  background: var(--blanc);
  padding: 18px 0 28px;
}

.pied__maj,
.pied__credit {
  margin: 0;
  font-size: 13px;
  color: var(--gris);
}

.pied__credit { margin-top: 6px; opacity: .75; }

/* ---------- Mode sombre ---------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --encre:      #eef2f0;
    --gris:       #9aa8a2;
    --gris-clair: #2b3531;
    --fond:       #131816;
    --blanc:      #1b2320;
    --vert-clair: #1d3a2b;
    --ombre:      0 1px 2px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"] {
  --encre:      #eef2f0;
  --gris:       #9aa8a2;
  --gris-clair: #2b3531;
  --fond:       #131816;
  --blanc:      #1b2320;
  --vert-clair: #1d3a2b;
  --ombre:      0 1px 2px rgba(0,0,0,.4);
}

/* ==================================================================
   Panier — brique 4
   ================================================================== */

/* ---- Sélecteur de quantité sur la carte produit ---- */

.qte {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--gris-clair);
  padding-top: 10px;
  margin-top: 2px;
}

.qte__bouton {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--gris-clair);
  background: var(--blanc);
  color: var(--encre);
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.qte__bouton:hover:not([disabled]) { border-color: var(--vert); color: var(--vert); }
.qte__bouton[disabled] { opacity: .35; cursor: default; }

.qte__champ {
  flex: 1;
  min-width: 0;
  text-align: center;
  border: 1px solid var(--gris-clair);
  border-radius: 8px;
  padding: 9px 4px;
  font-size: 16px;
  font-family: inherit;
  background: var(--fond);
  color: inherit;
}

.qte__champ:focus { outline: 2px solid var(--vert); outline-offset: 1px; }

.carte--choisie { border-color: var(--vert); box-shadow: 0 0 0 1px var(--vert), var(--ombre); }

/* ---- Barre basse ---- */

.panier-barre {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--vert);
  color: #fff;
  z-index: 20;
  box-shadow: 0 -2px 14px rgba(0,0,0,.18);
}

.panier-barre__int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.panier-barre__resume { font-size: 14px; line-height: 1.3; }
.panier-barre__resume strong { display: block; font-size: 17px; }
.panier-barre__resume span { opacity: .82; }

.bouton-principal--compact { width: auto; padding: 11px 20px; font-size: 15px; white-space: nowrap; }

/* ---- Panneau latéral ---- */

.voile {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 30;
}

.panier {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 100%);
  background: var(--blanc);
  z-index: 40;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.18);
}

.panier__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--gris-clair);
}

.panier__titre { margin: 0; font-size: 18px; }

.panier__fermer {
  border: 0;
  background: transparent;
  font-size: 20px;
  color: var(--gris);
  cursor: pointer;
  padding: 4px 8px;
  font-family: inherit;
}

.panier__corps { flex: 1; overflow-y: auto; padding: 8px 20px; }

.panier__vide { color: var(--gris); text-align: center; padding: 40px 0; }

.pligne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gris-clair);
}

.pligne__texte { flex: 1; min-width: 0; }
.pligne__nom { font-weight: 600; font-size: 15px; }
.pligne__detail { font-size: 13px; color: var(--gris); margin-top: 2px; }

.pligne__qte { font-weight: 700; font-size: 16px; white-space: nowrap; }

.pligne__retirer {
  border: 0;
  background: transparent;
  color: var(--rouge);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  padding: 4px;
}

.panier__pied {
  border-top: 1px solid var(--gris-clair);
  padding: 16px 20px 20px;
}

.panier__pied textarea {
  width: 100%;
  border: 1px solid var(--gris-clair);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  background: var(--fond);
  color: inherit;
  resize: vertical;
}

.champ__option { font-weight: 400; color: var(--gris); }

.panier__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 0 14px;
  font-size: 15px;
}

.panier__total strong { font-size: 20px; }

.panier__erreur {
  margin: 0 0 12px;
  padding: 11px 14px;
  border-radius: 8px;
  background: #fdecea;
  color: #8c1d18;
  font-size: 14px;
  border-left: 3px solid var(--rouge);
}

.panier__mention {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--gris);
  text-align: center;
  line-height: 1.45;
}

/* ---- Confirmation ---- */

.confirme {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(400px, calc(100% - 32px));
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 32px 28px;
  text-align: center;
  z-index: 50;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}

.confirme__coche {
  width: 58px; height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--vert-clair);
  color: var(--vert);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirme__titre { margin: 0 0 8px; font-size: 20px; }
.confirme__texte { margin: 0 0 22px; color: var(--gris); font-size: 15px; }

/* La barre du panier ne doit pas masquer la fin de la grille. */
body.avec-panier .grille { padding-bottom: 96px; }

/* ==================================================================
   Suivi des commandes — brique 5
   ================================================================== */

.bouton-clair { position: relative; }

/* Pastille sur "Mes commandes" quand une commande a change d'etat */
.pastille-nouveau {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--jaune);
  color: #3a2d00;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* Bandeau d'information en haut du catalogue */
.avis {
  margin: 18px 0 0;
  padding: 13px 16px;
  border-radius: var(--rayon);
  font-size: 15px;
  background: var(--vert-clair);
  color: var(--vert);
  border-left: 4px solid var(--vert);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.avis__texte { flex: 1; }
.avis__texte strong { display: block; }

.avis__fermer {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 17px;
  cursor: pointer;
  padding: 0 4px;
  font-family: inherit;
  opacity: .7;
}

.avis--annule {
  background: #fdecea;
  color: #8c1d18;
  border-left-color: var(--rouge);
}

/* Lignes de l'historique */

.cmd {
  border-bottom: 1px solid var(--gris-clair);
  padding: 14px 0;
}

.cmd__haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.cmd__ref { font-weight: 700; font-size: 15px; }
.cmd__date { font-size: 13px; color: var(--gris); }
.cmd__total { font-weight: 600; white-space: nowrap; }

.etat {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--gris-clair);
  color: var(--gris);
}

.etat--recue   { background: #eef2f0; color: var(--gris); }
.etat--validee { background: var(--vert-clair); color: var(--vert); }
.etat--cours   { background: #fff6e6; color: #7a4a00; }
.etat--livree  { background: var(--vert-clair); color: var(--vert); }
.etat--annulee { background: #fdecea; color: #8c1d18; }

.cmd__detail {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid var(--gris-clair);
  font-size: 14px;
  color: var(--gris);
}

.cmd__detail div { padding: 3px 0; }

/* ---- Pied de carte : l'etat de disponibilite et le prix ----
   La quantite se choisit en haut de la carte, l'etat se lit en bas. */

.carte__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;      /* colle le pied en bas, cartes de hauteurs egales */
  padding-top: 10px;
  border-top: 1px solid var(--gris-clair);
}

.etiquette {
  display: inline-block;
  flex: 0 1 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

.etiquette--dispo   { background: var(--vert); }
.etiquette--faible  { background: var(--orange); }
.etiquette--rupture { background: var(--rouge); }

/* Une rupture reste commandable - SEDIS l'assume - mais se distingue
   au premier coup d'oeil. */
.carte--rupture { border-color: #f1c8c8; }
.carte--rupture .visuel { opacity: .55; }
.carte--rupture .carte__nom { color: var(--gris); }

/* ---------- Parcours « nouveau client » ---------- */

/* Sépare les deux entrées de l'écran de connexion : le dépositaire qui a
   son code, et le commerçant qui n'en a pas encore. */
.separateur {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--gris);
  font-size: 13px;
}

.separateur::before,
.separateur::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gris-clair);
}

.bouton-second {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border: 1px solid var(--vert);
  background: var(--blanc);
  color: var(--vert);
  border-radius: var(--rayon);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.bouton-second:hover { background: var(--vert-clair); }

.bouton-lien {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--gris);
  font-size: 14px;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.bouton-lien:hover { color: var(--vert); }

.bandeau--nouveau {
  border-left: 4px solid var(--vert);
  background: var(--vert-clair);
  color: var(--encre);
}

/* ---------- Prévenir SEDIS sur WhatsApp ---------- */

/* Posé sur l'écran de confirmation, au-dessus de « Continuer » : la
   commande est déjà enregistrée, ce message ne fait que la signaler. */

.bouton-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  margin-bottom: 12px;
  background: #1faa54;
  color: #fff;
  border-radius: var(--rayon);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
}

.bouton-whatsapp:hover  { filter: brightness(1.07); }
.bouton-whatsapp:active { filter: brightness(.95); }
.bouton-whatsapp:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }

.bouton-whatsapp__icone { font-size: 19px; line-height: 1; }

.confirme__aide {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gris);
  margin: 0 0 16px;
}

/* ---------- Banderole d'appel à la commande ---------- */

/* Posée en tête de catalogue. Or du logo SEDIS sur vert profond :
   elle attire l'oeil sans sortir de la charte. Le lien descend
   directement sur la grille des boissons. */

.banderole {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 20px;
  padding: 16px 16px 16px 26px;
  border-radius: 999px;
  background: linear-gradient(105deg, #f7d64a 0%, #f2c230 48%, #e3ad16 100%);
  box-shadow: 0 6px 18px rgba(226, 173, 22, .28);
  text-decoration: none;
  color: var(--vert);
}

.banderole:hover  { filter: brightness(1.04); }
.banderole:active { filter: brightness(.96); }
.banderole:focus-visible { outline: 3px solid var(--vert); outline-offset: 3px; }

.banderole__texte {
  font-size: clamp(17px, 3.6vw, 27px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .012em;
  text-transform: uppercase;
}

.banderole__rond {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 480px) {
  .banderole { padding: 13px 13px 13px 18px; gap: 10px; }
  .banderole__rond { width: 34px; height: 34px; font-size: 17px; }
}

/* ---------- Mise en surbrillance de la banderole ---------- */

/* Deux mouvements superposes : la bande respire, et un reflet la traverse
   comme sur une enseigne lumineuse.
   Ce n'est volontairement pas un clignotement franc. Un fondu au noir rend
   le texte illisible une fois sur deux, et au-dela de trois eclats par
   seconde il devient dangereux pour les personnes photosensibles. Ici la
   bande reste lisible en permanence tout en accrochant l'oeil. */

@keyframes banderole-respire {
  0%, 100% {
    box-shadow: 0 6px 18px rgba(226, 173, 22, .28);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 8px 28px rgba(226, 173, 22, .65),
                0 0 0 5px rgba(242, 194, 48, .30);
    transform: scale(1.014);
  }
}

@keyframes banderole-reflet {
  0%   { transform: translateX(-130%); }
  60%  { transform: translateX(260%); }
  100% { transform: translateX(260%); }
}

.banderole {
  position: relative;
  overflow: hidden;
  animation: banderole-respire 1.7s ease-in-out infinite;
}

/* Le reflet, decoupe par le rayon de la pastille. */
.banderole::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .75) 50%,
              rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%);
  animation: banderole-reflet 2.6s ease-in-out infinite;
  pointer-events: none;
}

/* Le texte et le bouton passent devant le reflet. */
.banderole__texte,
.banderole__rond { position: relative; z-index: 1; }

/* Un visiteur qui a demande moins d'animation garde une bande fixe,
   simplement plus lumineuse. */
@media (prefers-reduced-motion: reduce) {
  .banderole { animation: none; box-shadow: 0 8px 26px rgba(226, 173, 22, .55); }
  .banderole::after { display: none; }
}