/* =========================================================
   PORTAIL CLIENT — boutique en ligne
   Fichier : portail-client/portail.css
   ========================================================= */

:root {
  /* Toujours en clair, même si le téléphone est en mode sombre */
  color-scheme: only light;
  --bleu: #1f4fd8;
  --bleu-fonce: #173ba8;
  --marine: #0f1f3d;
  --bleu-clair: #e9effd;
  --vert: #15803d;
  --vert-clair: #dcfce7;
  --rouge: #b42318;
  --rouge-clair: #fee2e2;
  --fond: #f4f6fb;
  --texte: #1f2937;
  --discret: #64748b;
  --bord: #e3e8f0;
  --ombre: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

[hidden] { display: none !important; }

svg { flex: 0 0 auto; }

.cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ================= EN-TÊTE ================= */

.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  box-shadow: 0 1px 0 var(--bord), 0 4px 14px rgba(15, 23, 42, .04);
}

.entete-ligne {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 10px 20px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--marine);
  text-decoration: none;
}

.logo, .logo-defaut {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 12px;
}

.logo { background: #fff; object-fit: contain; border: 1px solid var(--bord); }

.logo-defaut {
  display: grid;
  place-items: center;
  background: var(--bleu-clair);
}

.logo-defaut svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--bleu);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entete-texte { display: flex; flex-direction: column; min-width: 0; }
.entete h1 { margin: 0; overflow: hidden; font-size: 19px; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.sous-marque { color: var(--discret); font-size: 13px; }

.recherche-entete {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
}

.recherche-entete svg {
  position: absolute;
  left: 14px;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--discret);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

#recherche {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 42px;
  border: 1px solid var(--bord);
  border-radius: 12px;
  background: #f6f8fc;
  color: var(--texte);
  font: inherit;
}

#recherche:focus { outline: 3px solid #bfd3fb; border-color: var(--bleu); background: #fff; }

.entete-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.action-entete {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--marine);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.action-entete:hover { background: #f1f5fb; }

.action-entete svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-entete.whatsapp { color: #128c4a; }

.panier-entete { gap: 14px; background: var(--bleu-clair); color: var(--bleu-fonce); }
.panier-entete:hover { background: #dbe6fd; }

.icone-panier { position: relative; display: inline-flex; }

.pastille-panier {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 99px;
  background: #e11d48;
  color: #fff;
  font-size: 10.5px;
  line-height: 15px;
  text-align: center;
}

.infos-ligne {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px 8px;
  overflow: hidden;
  color: var(--discret);
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.infos-ligne:empty { display: none; }

/* ================= MISE EN PAGE ================= */

.mise-en-page {
  max-width: 1360px;
  margin: 0 auto;
  padding: 18px 20px 0;
}

body.mode-catalogue .mise-en-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 22px;
}

main { min-width: 0; }

/* La page facture garde sa largeur de lecture */
body:not(.mode-catalogue) main { max-width: 760px; margin: 0 auto; }

.chargement, .petit { color: var(--discret); font-size: 13px; }
.centre { text-align: center; }

.carte {
  margin-bottom: 12px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--ombre);
}

.carte.vide { grid-column: 1 / -1; text-align: center; color: var(--discret); }
.carte.merci { border: 2px solid #86efac; background: #f0fdf4; }
.carte.merci h2 { margin: 0 0 6px; color: var(--vert); }

/* ================= BANNIÈRE ================= */

.banniere {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding: 26px 30px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(120deg, #173ba8 0%, #1f4fd8 55%, #3b82f6 100%);
  color: #fff;
}

.banniere::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  pointer-events: none;
}

.banniere-texte { position: relative; z-index: 1; min-width: 0; }
.banniere-accueil { margin: 0; color: #c9d8ff; font-size: 15px; font-weight: 600; }
.banniere h2 { margin: 2px 0 6px; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.1; }
.banniere-phrase { margin: 0 0 16px; max-width: 520px; color: #e3ebff; font-size: 16px; }

.banniere-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
}

.banniere-points li { display: flex; align-items: center; gap: 9px; }

.banniere-points span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .16);
  font-size: 18px;
}

.banniere-dessin {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.banniere-dessin svg { width: 190px; height: auto; }

.banniere-dessin img {
  width: 92px;
  height: 92px;
  padding: 8px;
  border-radius: 20px;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .2);
}

/* ================= CATÉGORIES ================= */

.titre-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.titre-section h2 { margin: 0; color: var(--marine); font-size: 23px; }

.categories {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.categories button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--bord);
  border-radius: 99px;
  background: #fff;
  color: var(--marine);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.categories button span { font-size: 15px; }
.categories button:hover { border-color: #b8c8ee; }
.categories button.actif { border-color: var(--bleu); background: var(--bleu); color: #fff; }

/* ================= CARTES PRODUITS ================= */

.grille-produits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 14px;
}

.carte-produit {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ombre);
  transition: transform .15s ease, box-shadow .15s ease;
}

.carte-produit:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, .1); }
.carte-produit.en-avant { outline: 3px solid #f59e0b; }
.carte-produit.vient-ajoute, .colonne-panier.vient-ajoute { animation: ajout .7s ease; }

@keyframes ajout {
  0% { box-shadow: 0 0 0 0 rgba(31, 79, 216, .45); }
  100% { box-shadow: 0 0 0 14px rgba(31, 79, 216, 0); }
}

.produit-visuel {
  position: relative;
  display: grid;
  height: 150px;
  place-items: center;
  border-bottom: 1px solid #f0f3f8;
}

.produit-visuel img { width: 100%; height: 100%; padding: 10px; object-fit: contain; }

.initiale {
  color: rgba(15, 31, 61, .55);
  font-size: 54px;
  font-weight: 800;
}

.dans-panier {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--bleu);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.produit-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 12px;
}

.produit-corps h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--marine);
  font-size: 15.5px;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.produit-detail {
  margin: 0;
  overflow: hidden;
  color: var(--discret);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.produit-prix {
  margin: 4px 0 0;
  color: var(--marine);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.produit-prix small { color: var(--discret); font-size: 12px; font-weight: 600; }

.etiquette {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.etiquette.en-stock { background: var(--vert-clair); color: var(--vert); }
.etiquette.epuise { background: var(--rouge-clair); color: var(--rouge); }

.est-epuise .produit-visuel { filter: grayscale(.8); opacity: .65; }

.choix-conditionnement {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.choix-conditionnement button {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-height: 30px;
  padding: 3px 9px;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: #fff;
  color: var(--marine);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.choix-conditionnement button small { color: var(--discret); font-size: 10.5px; }
.choix-conditionnement button.actif { border-color: var(--bleu); background: var(--bleu-clair); color: var(--bleu-fonce); }

.produit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

.quantite {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--bord);
  border-radius: 10px;
}

.quantite button {
  width: 32px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--marine);
  font-size: 18px;
  cursor: pointer;
}

.quantite span { min-width: 22px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

.ajouter {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: var(--bleu);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ajouter:hover { background: var(--bleu-fonce); }

.ajouter svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quantite button:disabled, .ajouter:disabled { cursor: not-allowed; }
.ajouter:disabled { background: #cbd5e1; color: #fff; }
.quantite button:disabled { color: #cbd5e1; }

/* ================= PANIER À DROITE ================= */

.colonne-panier {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  border-radius: 18px;
}

.bloc-panier, .bloc-paiements {
  padding: 18px;
  border: 1px solid var(--bord);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--ombre);
}

.bloc-panier-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.bloc-panier h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--marine);
  font-size: 20px;
}

.bloc-panier h2 svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compte-panier {
  display: grid;
  min-width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #f1f5fb;
  color: var(--marine);
  font-weight: 700;
}

.ligne-panier {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bord);
}

.mini-visuel {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--bord);
  border-radius: 10px;
  color: rgba(15, 31, 61, .55);
  font-weight: 800;
}

.mini-visuel img { width: 100%; height: 100%; object-fit: contain; }

.ligne-texte { flex: 1; min-width: 0; }
.ligne-texte strong { display: block; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.ligne-panier small { display: block; color: var(--discret); font-size: 12.5px; }

.compteur { display: flex; align-items: center; gap: 4px; }
.compteur span { min-width: 22px; font-weight: 700; text-align: center; }

.compteur button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: #fff;
  color: var(--marine);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.compteur button:hover { border-color: var(--bleu); color: var(--bleu); }

.supprimer {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #dc2626;
  cursor: pointer;
}

.supprimer:hover { background: #fee2e2; }

.supprimer svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.panier-vide { margin: 10px 0; padding: 18px 10px; border-radius: 12px; background: #f6f8fc; color: var(--discret); text-align: center; }

.totaux { margin: 12px 0 14px; }
.totaux p { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0; font-size: 14.5px; }
.totaux .discret { color: var(--discret); font-size: 13px; }

.total-a-payer {
  margin-top: 10px !important;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bleu-clair);
  color: var(--bleu-fonce);
  font-weight: 700;
}

.total-a-payer strong { font-size: 20px; font-variant-numeric: tabular-nums; }

.bloc-paiements h2 { margin: 0 0 12px; color: var(--marine); font-size: 16px; }
.bloc-paiements ul { display: grid; gap: 10px; margin: 0 0 10px; padding: 0; list-style: none; }
.bloc-paiements li { display: flex; align-items: center; gap: 12px; }
.bloc-paiements li span:last-child { display: flex; flex-direction: column; }
.bloc-paiements small { color: var(--discret); font-size: 12.5px; }
.bloc-paiements .discret { margin: 0; color: var(--discret); font-size: 12.5px; }

.logo-paiement {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  font-size: 22px;
}

.logo-paiement.especes { background: #e3f6ee; }
.logo-paiement.momo { background: #fdf3d9; }

/* ================= AVANTAGES ================= */

.avantages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1360px;
  margin: 28px auto 0;
  padding: 18px 20px;
  border-top: 1px solid var(--bord);
  background: #fff;
}

.avantages div { display: flex; align-items: center; gap: 12px; }
.avantages p { display: flex; flex-direction: column; margin: 0; color: var(--marine); font-size: 15px; }
.avantages small { color: var(--discret); font-size: 13px; }

.rond {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--bleu-clair);
  font-size: 22px;
}

/* ================= BOUTONS, FENÊTRE, FORMULAIRE ================= */

.barre-panier {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -6px 20px rgba(15, 23, 42, .12);
  font-weight: 700;
}

.bouton {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: var(--texte);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.bouton svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bouton.principal { border-color: var(--bleu); background: var(--bleu); color: #fff; }
.bouton.principal:hover { background: var(--bleu-fonce); }
.bouton.whatsapp { border-color: #16a34a; background: #16a34a; color: #fff; }
.bouton.large { width: 100%; }
.bouton.grand { min-height: 52px; border-radius: 12px; font-size: 16px; }
.bouton:disabled { opacity: .5; cursor: not-allowed; }

.fenetre {
  width: min(560px, 100vw);
  max-height: 92vh;
  margin: auto auto 0;
  padding: 0 16px 16px;
  border: 0;
  border-radius: 18px 18px 0 0;
}

@media (min-width: 640px) { .fenetre { margin: auto; border-radius: 16px; } }

.fenetre::backdrop { background: rgba(15, 23, 42, .5); }

.fenetre-entete {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 10px;
  background: #fff;
}

.fenetre-entete h2 { margin: 0; font-size: 18px; }
.fermer { width: 40px; height: 40px; border: 0; border-radius: 10px; background: #f3f4f6; font-size: 24px; cursor: pointer; }

.total-panier { margin: 12px 0; font-size: 16px; text-align: right; }

.formulaire { display: grid; gap: 12px; }
.formulaire label { display: grid; gap: 5px; font-size: 14px; font-weight: 600; }

.formulaire input[type="text"], .formulaire input[type="tel"], .formulaire textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font: inherit;
}

.formulaire fieldset { display: grid; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; }
.formulaire legend { padding: 0 4px; font-size: 14px; font-weight: 600; }
.formulaire .choix { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.aide { margin: 0; color: var(--discret); font-size: 12px; }
.message { margin: 0; color: var(--rouge); font-size: 14px; font-weight: 600; }
.message:empty { display: none; }

/* ----- Facture ----- */

.facture-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.facture-entete h2 { margin: 2px 0; font-size: 22px; }
.facture-entete .petit { margin: 0; }

.statut { flex: 0 0 auto; padding: 5px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.statut.payee { background: #dcfce7; color: var(--vert); }
.statut.partielle { background: #fef3c7; color: #92400e; }
.statut.impayee { background: #fee2e2; color: var(--rouge); }

.montants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.montants div { padding: 10px; border-radius: 10px; background: var(--bleu-clair); text-align: center; }
.montants span { display: block; color: var(--discret); font-size: 12px; }
.montants strong { font-size: 15px; }
.montants .reste { background: #fee2e2; }
.montants .reste strong { color: var(--rouge); }

.lignes { width: 100%; border-collapse: collapse; font-size: 14px; }
.lignes th { padding: 8px 6px; border-bottom: 2px solid var(--bord); color: var(--discret); font-size: 12px; text-align: left; }
.lignes td { padding: 8px 6px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.lignes th:not(:first-child), .lignes td:not(:first-child) { text-align: right; white-space: nowrap; }
.lignes small { color: var(--discret); }

.ligne-total { display: flex; justify-content: space-between; margin: 6px 6px 0; font-size: 14px; }

.facture h3 { margin: 16px 0 6px; font-size: 15px; }
.echeances { margin: 0; padding: 0; list-style: none; }
.echeances li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--bord); font-size: 14px; }
.echeances em { color: var(--discret); font-style: normal; }

.paiement { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #fffbeb; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.pied { padding: 20px 16px; color: var(--discret); font-size: 12px; text-align: center; }

.pied { padding: 20px 16px 26px; color: var(--discret); font-size: 12.5px; line-height: 1.6; text-align: center; }
.pied strong { color: var(--marine); }

/* Photo du produit (page facture) */
.produit-photo {
  display: block;
  width: calc(100% + 32px);
  max-height: 220px;
  margin: -16px -16px 12px;
  border-radius: 14px 14px 0 0;
  background: #f3f4f6;
  object-fit: cover;
}

/* Gros bouton « Commander en ligne » sur la facture */
.bouton.commander { margin-top: 18px; min-height: 52px; font-size: 17px; font-weight: 700; text-decoration: none; }

/* ================= ÉCRANS MOYENS ET TÉLÉPHONES ================= */

/* Sous 1100 px : le panier passe en bas (barre + fenêtre) */
@media (max-width: 1099px) {
  body.mode-catalogue .mise-en-page { grid-template-columns: 1fr; }
  .colonne-panier { position: static; max-height: none; }
  .colonne-panier .bloc-panier { display: none; }
  .avantages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  body.mode-catalogue .barre-panier { display: none !important; }
  body.mode-catalogue { padding-bottom: 0; }
}

@media (max-width: 760px) {
  .entete-ligne { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  .recherche-entete { order: 3; flex-basis: 100%; max-width: none; }
  .action-entete span:not(.icone-panier) { display: none; }
  .action-entete { padding: 0 10px; }
  .infos-ligne { display: none; }
  .mise-en-page { padding: 12px 12px 0; }
  .banniere { padding: 20px 18px; border-radius: 16px; }
  .banniere-dessin svg { width: 110px; }
  .banniere-dessin img { display: none; }
  .banniere-phrase { font-size: 14.5px; }
  .grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .produit-visuel { height: 120px; }
  .produit-corps { padding: 10px; }
  .produit-prix { font-size: 16px; }
  .produit-actions { flex-wrap: wrap; }
  .quantite { width: 100%; justify-content: space-between; }
  .ajouter { flex-basis: 100%; }
  .avantages { gap: 12px; padding: 16px 12px; }
}

@media (max-width: 420px) {
  .montants { grid-template-columns: 1fr; }
  .banniere-dessin { display: none; }
  .avantages { grid-template-columns: 1fr; }
}

@media print {
  .entete { position: static; box-shadow: none; }
  .actions, .barre-panier, .entete-actions, .recherche-entete, .colonne-panier, .avantages { display: none !important; }
  body { background: #fff; padding: 0; }
  .carte { box-shadow: none; }
  .bouton.commander, .bouton.commander + .petit { display: none !important; }
}

/* ================= SIGNATURE ÉLECTRONIQUE ================= */

.signature-bloc {
  margin: 18px 0 4px;
  padding: 14px 16px;
  border: 1px dashed #b8c8ee;
  border-radius: 14px;
  background: #f6f9ff;
}

.signature-bloc h3 { margin: 0 0 6px; color: var(--marine); font-size: 16px; }
.signature-bloc p { margin: 0 0 8px; font-size: 14px; }
.signature-bloc.signe { border: 1px solid #86efac; background: #f0fdf4; }
.signature-bloc.signe h3 { color: var(--vert); }
.signature-bloc.refuse { border: 1px solid #fecaca; background: #fef2f2; }
.signature-bloc.refuse h3 { color: var(--rouge); }
.signature-bloc .motif { padding: 8px 10px; border-radius: 8px; background: #fff; }
.signature-bloc code { font-size: 11.5px; }

.signature-image {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 6px 0 8px;
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: #fff;
}

.signature-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.signature-actions .bouton { flex: 1 1 160px; }
.bouton.danger { border-color: #dc2626; background: #dc2626; color: #fff; }

.pad-zone { display: grid; gap: 6px; }
.pad-tete { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; }

.pad {
  display: block;
  width: 100%;
  height: 200px;
  border: 2px dashed #94a3b8;
  border-radius: 12px;
  background: #fff;
  color-scheme: only light;
  forced-color-adjust: none;
  touch-action: none;
  cursor: crosshair;
}

.lien-bouton {
  border: 0;
  background: none;
  color: var(--bleu);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.recap {
  display: grid;
  gap: 6px;
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f6f8fc;
}

.recap p, .recap-signature { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: 14px; }
.recap span { color: var(--discret); }
.recap-signature { flex-direction: column; }
.recap-signature img { width: 100%; max-width: 360px; border: 1px solid var(--bord); border-radius: 10px; background: #fff; }
.recap-motif strong { text-align: right; }
.message.info { color: var(--bleu-fonce); }
.montants-livraison { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.montants-livraison strong { font-size: 14px; }

@media print {
  .signature-actions, .fenetre-signature { display: none !important; }
}

/* ================= PAIEMENT WAVE (facture) ================= */

.wave-bloc {
  display: grid;
  gap: 12px;
  margin: 18px 0 4px;
  padding: 16px;
  border: 1px solid #9be7ff;
  border-radius: 14px;
  background: #effbff;
}

.wave-tete { display: flex; align-items: center; gap: 12px; }
.wave-tete h3 { margin: 0; color: var(--marine); font-size: 17px; }
.wave-tete p { margin: 2px 0 0; font-size: 14px; }

.wave-logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #1dc8ff;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.wave-etapes { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }

.bouton.wave {
  min-height: 52px;
  border-color: #1dc8ff;
  background: #1dc8ff;
  color: #0b1f33;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}
.bouton.wave:hover { background: #0fb6ec; }

.bouton.wave-jai-paye { min-height: 48px; border-color: var(--vert); color: var(--vert); font-weight: 700; background: #fff; }

.wave-qr-details summary { color: var(--bleu-fonce); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.wave-qr { display: grid; place-items: center; margin-top: 10px; padding: 12px; border-radius: 12px; background: #fff; }
.wave-qr img, .wave-qr canvas { display: block; width: 200px; height: 200px; }

.wave-etat { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.wave-etat span { color: var(--texte); }
.wave-etat.attente { background: #fef3c7; color: #92400e; }
.wave-etat.refuse { background: #fef2f2; color: var(--rouge); }
.wave-etat.confirme { background: #f0fdf4; color: var(--vert); }

@media print {
  .wave-bloc .bouton, .wave-qr-details, .fenetre-wave { display: none !important; }
}

/* ================= 💬 DISCUTER AVEC LA BOUTIQUE ================= */

.chat-entete .icone-chat { position: relative; font-size: 19px; line-height: 1; }
.chat-entete .pastille-chat { position: absolute; top: -8px; right: -12px; }

.pastille-chat {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 99px;
  background: #e11d48;
  color: #fff;
  font-size: 10.5px;
  line-height: 15px;
  text-align: center;
}
.pastille-chat[hidden] { display: none; }

.chat-flottant {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 99px;
  background: var(--bleu);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(31, 79, 216, .35);
  cursor: pointer;
}
.chat-flottant:hover { background: var(--bleu-fonce); }
.chat-flottant .pastille-chat { position: absolute; top: -6px; right: -4px; }
/* Au-dessus de la barre du panier (téléphone) */
.barre-panier:not([hidden]) ~ .chat-flottant { bottom: calc(84px + env(safe-area-inset-bottom)); }

@media (max-width: 640px) {
  .chat-flottant { width: 54px; height: 54px; min-height: 54px; padding: 0; justify-content: center; font-size: 22px; }
  .chat-flottant span { display: none; }
  .chat-entete > span:last-child { display: none; }
}

.fenetre-chat { display: flex; flex-direction: column; width: min(520px, calc(100vw - 16px)); max-height: min(720px, calc(100vh - 24px)); }
.fenetre-chat[open] { display: flex; }

.chat-fil {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 220px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 12px 2px;
}

.bulle-chat { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.4; }
.bulle-chat p { margin: 0; overflow-wrap: anywhere; }
.bulle-chat small { display: block; margin-top: 3px; font-size: 11px; opacity: .75; }
.bulle-chat .bulle-ref { margin: 0 0 3px; font-weight: 700; }
.bulle-chat.client { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--bleu); color: #fff; }
.bulle-chat.boutique { align-self: flex-start; border-bottom-left-radius: 4px; background: #eef2f7; color: var(--texte); }

.chat-saisie { display: flex; gap: 8px; align-items: flex-end; padding-top: 8px; border-top: 1px solid var(--bord); }
.chat-saisie textarea {
  flex: 1 1 auto;
  min-height: 46px;
  max-height: 140px;
  padding: 10px 12px;
  border: 1px solid var(--bord);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  resize: vertical;
}
.chat-saisie .bouton { width: 50px; min-height: 46px; padding: 0; font-size: 18px; }
.fenetre-chat .aide.centre { margin-top: 6px; text-align: center; }
.formulaire textarea#chat-texte { padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; font: inherit; }

@media print {
  .chat-flottant, .chat-entete, .fenetre-chat, .bouton-chat-facture { display: none !important; }
}

/* « J'ai payé » grisé tant que le client n'est pas passé par Wave */
.bouton.wave-jai-paye:disabled { border-color: var(--bord); background: #f1f5f9; color: #94a3b8; opacity: 1; cursor: not-allowed; }
.wave-verrou { margin: -4px 0 0; color: var(--discret); font-size: 13px; text-align: center; }
.wave-verrou[hidden] { display: none; }

/* Phrase avec le lien Wave (entre les étapes et le bouton « Payer ») */
.wave-phrase{margin:4px 0 12px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.wave-phrase a{font-weight:700;text-decoration:underline}

/* =========================================================
   VERRE GLACÉ AU SURVOL (portail.js)
   Plaque de glace légère qui glisse d'un élément à l'autre.
   Seulement l'apparence.
   ========================================================= */
.pv-glace {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9990;
    width: 0;
    height: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 35%, rgba(255, 255, 255, 0) 45%),
        radial-gradient(90% 60% at 15% 120%, rgba(147, 197, 253, 0.20), rgba(147, 197, 253, 0) 65%),
        rgba(147, 197, 253, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 12px rgba(147, 197, 253, 0.25),
        0 6px 18px rgba(15, 23, 42, 0.14);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
}
.pv-glace.pv-visible { opacity: 1; }
.pv-glace.pv-sans-animation { transition: opacity 0.2s ease; }
@media print { .pv-glace { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .pv-glace { transition: opacity 0.2s ease; } }
/* Dans une fenêtre (panier, commande…), la glace reste posée par-dessus */
dialog > .pv-glace { position: absolute !important; top: 0 !important; left: 0 !important; margin: 0 !important; }

/* =========================================================
   MON PANIER (à droite, ordinateur) — VERRE GLACÉ ET DÉFILEMENT
   - le panier ressemble à une plaque de verre glacé
   - seule la liste des articles défile (en douceur) quand il y en
     a beaucoup : « Mon panier », le total et « Valider ma commande »
     restent toujours visibles
   ========================================================= */
.colonne-panier .bloc-panier {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .85);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .55) 100%),
    radial-gradient(120% 60% at 0% 0%, rgba(147, 197, 253, .22), rgba(147, 197, 253, 0) 60%);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 18px rgba(147, 197, 253, .18),
    0 14px 34px rgba(15, 23, 42, .12);
}

/* Liste des articles : défile toute seule, le reste du panier reste en place */
#lignes-laterales {
  max-height: max(170px, calc(100vh - 470px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(36, 77, 155, .35) transparent;
  margin-right: -6px;
  padding-right: 6px;
  /* fondu doux en haut et en bas quand il y a plus d'articles */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 12px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 12px), transparent 100%);
}
#lignes-laterales::-webkit-scrollbar { width: 6px; }
#lignes-laterales::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(36, 77, 155, .35); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .colonne-panier .bloc-panier { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  #lignes-laterales { scroll-behavior: auto; }
}