/* LISTE D'ÉPICERIE — apparence */
.zone-image { position: relative; }
.pastille {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  width: clamp(24px, 3.4vw, 34px); height: clamp(24px, 3.4vw, 34px); padding: 0;
  border-radius: 50%; border: 2px solid #101725; cursor: pointer;
  display: grid; place-items: center;
  background: #FFBE00; color: #101725;
  font: 800 clamp(13px, 1.9vw, 17px)/1 "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  transition: transform .12s ease, background-color .12s ease;
}
.pastille:hover { transform: translate(-50%, -50%) scale(1.15); }
.pastille.choisi { background: #16803A; color: #FFFFFF; border-color: #FFFFFF; }
.pastille svg { width: 58%; height: 58%; }

.liste-bouton {
  position: fixed; left: 50%; bottom: 16px; z-index: 30; transform: translateX(-50%);
  min-height: 44px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: #FFBE00; color: #101725; font: 800 0.95rem/1.2 "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.liste-bouton svg { width: 22px; height: 22px; }
.liste-bouton .nombre {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; background: #101725; color: #FFBE00; font-size: 0.82rem;
}

.liste-voile { position: fixed; inset: 0; z-index: 60; background: rgba(6, 10, 18, .7); }
.liste-panneau {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(460px, 100%);
  overflow-y: auto; overscroll-behavior: contain;   /* tout le panneau défile : la liste, puis le total */
  background: #141B2B; color: #FFFFFF; border-left: 1px solid #2B3550;
  font-family: "Segoe UI", system-ui, sans-serif;
  box-shadow: -12px 0 30px rgba(0, 0, 0, .5);
}
.liste-tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid #2B3550; background: #141B2B; }
.liste-tete h2 { flex: 1 1 auto; margin: 0; font-size: clamp(1.2rem, 5.9vw, 1.55rem); line-height: 1.15; color: #FFBE00; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.liste-fermer {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: #191F2D; border: 1px solid #2B3550; color: #FFFFFF;
}
.liste-fermer svg { width: 18px; height: 18px; }
.liste-corps { padding: 4px 16px 8px; }
.liste-vide { margin: 40px 10px; text-align: center; color: #A9B8D3; line-height: 1.5; }
.liste-magasin { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px -16px 6px; padding: 3px 16px; background: #F3EFE6; color: #FFBE00; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; }
.liste-vignette { flex: 0 0 auto; display: grid; place-items: center; background: #FFFFFF; border-radius: 9px; overflow: hidden; }
.liste-vignette.photo { border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.liste-vignette > span { position: relative; display: block; overflow: hidden; }
.liste-vignette img { position: absolute; display: block; max-width: none; }
.liste-ligne {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid #232C42;
}
.liste-ligne.sans-photo { grid-template-columns: minmax(0, 1fr) auto; }
.liste-nom { font-weight: 700; line-height: 1.25; }
.liste-det { color: #A9B8D3; font-size: 0.84rem; }
.liste-det:empty, .liste-ref:empty, .liste-eco:empty { display: none; }
.liste-prix { margin-top: 2px; font-weight: 700; font-size: 0.92rem; }
.liste-ref { color: #A9B8D3; font-size: 0.8rem; }
.liste-total { font-weight: 800; font-size: 1.05rem; text-align: right; white-space: nowrap; }
.liste-eco { font-size: 0.85rem; text-align: right; white-space: nowrap; color: #4ADE80; font-weight: 700; }
.liste-eco.nulle { color: #A9B8D3; font-weight: 400; }
.liste-qte { display: inline-flex; align-items: center; gap: 0; margin-top: 4px; border: 1px solid #2B3550; border-radius: 999px; overflow: hidden; }
.liste-qte button { width: 36px; height: 34px; border: 0; cursor: pointer; background: #191F2D; color: #FFBE00; font: 800 1.1rem/1 inherit; }
.liste-qte button:hover { background: #232C42; }
.liste-qte span { min-width: 58px; text-align: center; font-weight: 700; font-size: 0.95rem; }
.liste-pied { margin-top: 6px; padding: 16px 18px 22px; border-top: 1px solid #2B3550; background: #101725; }
.liste-somme { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.liste-somme + .liste-somme { margin-top: 6px; }
.liste-somme b { font-size: 1.35rem; }
.liste-somme.eco { color: #4ADE80; font-weight: 700; }
.liste-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.liste-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font: 700 0.92rem/1.2 inherit;
  background: #191F2D; color: #FFFFFF; border: 1px solid #2B3550;
}
.liste-actions button svg { width: 18px; height: 18px; flex: 0 0 auto; }
.liste-actions button:disabled { opacity: .45; cursor: default; }
.liste-actions .vider { grid-column: 1 / -1; background: none; border-color: transparent; color: #A9B8D3; font-weight: 600; padding: 4px; text-decoration: underline; }
.liste-actions .principal { background: #FFBE00; color: #101725; border-color: #FFBE00; }
.liste-note { margin: 10px 0 0; color: #A9B8D3; font-size: 0.78rem; line-height: 1.35; }

/* Place libre en bas de page, pour que le bouton « Ma liste » ne cache rien une fois en bas. */
body { padding-bottom: 76px; }

.liste-essai { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: #3A2A00; color: #FFD24D; font-size: 0.78rem; line-height: 1.35; }

/* Sous-total de chaque magasin */
.liste-sous-total { margin: 10px 0 4px; padding: 10px 14px; border-radius: 12px; background: #191F2D; border: 1px solid #2B3550; }
.liste-sous-total div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.liste-sous-total span:first-child { font-weight: 700; }
.liste-sous-total b { font-size: 1.08rem; }
.liste-sous-total .eco { margin-top: 2px; color: #4ADE80; font-weight: 700; font-size: 0.86rem; }

/* Bandeau du magasin : blanc cassé sur toute la largeur, logo au centre ; doré avec le nom s'il n'y a pas de logo */
.liste-magasin .liste-vignette { border-radius: 0; background: #FFFFFF; box-shadow: 0 0 0 1px #D8D2C6; }   /* logos rectangulaires, tous au même format */
.liste-vignette.logo img { position: static; width: 100%; height: 100%; }
.liste-magasin.sans-logo { background: #FFBE00; color: #101725; padding: 7px 16px; }
.liste-corps > .liste-magasin:first-child { margin-top: 12px; }

/* Nom du magasin, à gauche du bandeau ; le logo reste au centre.
   Même écriture que le titre « MA LISTE D'ÉPICERIE » : même police, gras, doré, majuscules. */
.liste-magasin { position: relative; }
.liste-magasin-nom {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  max-width: calc(50% - 72px); overflow: hidden; white-space: nowrap;
  color: #FFBE00; font-weight: 800; font-size: clamp(1.1rem, 5.6vw, 1.4rem); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase;
}

/* Bandeau avec logo : le logo est à gauche, à la place du nom, et sa hauteur est exactement celle du bandeau. */
.liste-magasin.avec-logo { margin-left: 0; margin-right: 0; padding-left: 0;   /* à droite : aligné avec les cadres des produits */
    /* le bandeau commence au logo : rien de blanc à gauche */
  padding-top: 0; padding-bottom: 0; height: 34px; display: flex; justify-content: flex-start; align-items: stretch; }
.liste-magasin.avec-logo .liste-vignette { box-shadow: none; display: block; }
.liste-magasin.avec-logo .liste-vignette img { display: block; }

/* Chaque produit : un rectangle blanc au FORMAT STANDARD, le même pour tous (même hauteur, mêmes colonnes).
   À droite, les écritures tassées et alignées à droite (nom, détail, prix, prix de référence) ;
   à gauche, l'image du produit telle qu'elle est sur la circulaire, la plus grande possible.
   En dessous : la quantité à gauche, les montants à droite. */
.liste-ligne { grid-template-columns: minmax(0, 1fr) auto; }
.liste-carte {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px 10px 6px 6px; height: 108px;
  background: #FFFFFF; color: #101725; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.liste-carte .liste-vignette.photo { flex: 1 1 0; min-width: 0; height: 96px; border-radius: 6px; box-shadow: none; }
.liste-vignette.photo > span { max-width: 100%; }
.liste-vignette.photo img { height: auto; }
.liste-vignette.photo i { position: absolute; display: block; background: #FFFFFF; }
.liste-fiche { flex: 0 0 42%; min-width: 0; text-align: right; }
.liste-carte .liste-nom { font-size: 0.84rem; line-height: 1.04; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.liste-carte .liste-det { color: #5B6478; font-size: 0.74rem; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste-carte .liste-prix { color: #C8102E; font-weight: 800; font-size: 1.12rem; line-height: 1.02; white-space: nowrap; }
.liste-carte .liste-ref { color: #5B6478; font-size: 0.68rem; line-height: 1.02; margin-top: 1px; }
.liste-carte .liste-prix { margin-top: 1px; }

/* Total général : un cadre comme les sous-totaux, mais qui se distingue par son contour doré. */
.liste-total-general { padding: 12px 14px; border-radius: 12px; background: #191F2D; border: 2px solid #FFBE00; }
.liste-total-general .liste-somme:first-child span { font-weight: 700; }
.liste-pied { padding-left: 16px; padding-right: 16px; }   /* le cadre du total s'aligne avec les cadres des produits */

/* La note du bas : petite écriture, texte justifié. */
.liste-note { font-size: 0.68rem; line-height: 1.3; text-align: justify; }

/* Plus de bande blanche à côté du logo : il ne reste que le logo, à gauche. */
.liste-magasin.avec-logo { background: none; }

/* Cases blanches moins hautes (demande de l'utilisateur). */
.liste-carte { height: 88px; padding: 5px 10px 5px 5px; }
.liste-carte .liste-vignette.photo { height: 78px; }
.liste-fiche { flex-basis: 46%; max-height: 78px; overflow: hidden; }
.liste-carte .liste-nom { font-size: 0.8rem; }
.liste-carte .liste-det { font-size: 0.72rem; }
.liste-carte .liste-prix { font-size: 1.06rem; }
.liste-carte .liste-ref { font-size: 0.62rem; }

/* Cases transparentes (choix de l'utilisateur) : contour fin, nom en blanc, prix en doré.
   L'image blanche du produit commence exactement au bord gauche de la case, sur la même limite que le logo du magasin. */
.liste-carte { background: none; color: #FFFFFF; border: 0; box-shadow: inset 0 0 0 1px #2B3550; padding: 0 10px 0 0; overflow: hidden; }
.liste-carte .liste-vignette.photo { height: 100%; border-radius: 11px; }
.liste-carte .liste-vignette.photo > span { max-height: 100%; }
.liste-carte .liste-det, .liste-carte .liste-ref { color: #A9B8D3; }
.liste-carte .liste-prix { color: #FFBE00; }

/* Sous la case du produit : « Prix de référence <magasin> <mois année> : <prix> » (plus bas prix documenté). */
.liste-min { grid-column: 1 / -1; margin: -2px 0 2px; text-align: right; color: #A9B8D3; font-size: 0.68rem; line-height: 1.2; }

/* ---------- L'appréciation du prix ---------- */
/* Sur l'image de la circulaire : une petite étiquette sous le bouton « + » de chaque produit. */
.appreciation {
  --demi: clamp(12px, 1.7vw, 17px);                       /* la moitié du bouton « + » */
  position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, calc(var(--demi) + 1px));
  padding: 1px 6px 2px; border-radius: 999px; border: 1.5px solid #101725;
  font: 800 clamp(8.5px, 1.2vw, 12px)/1.15 "Segoe UI", system-ui, sans-serif; letter-spacing: 0.01em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.appreciation.dessus { transform: translate(-50%, calc(-100% - var(--demi) - 1px)); }
.appreciation.a-droite { transform: translate(calc(-100% + var(--demi)), calc(var(--demi) + 1px)); }
.appreciation.a-gauche { transform: translate(calc(0px - var(--demi)), calc(var(--demi) + 1px)); }
.appreciation.dessus.a-droite { transform: translate(calc(-100% + var(--demi)), calc(-100% - var(--demi) - 1px)); }
.appreciation.dessus.a-gauche { transform: translate(calc(0px - var(--demi)), calc(-100% - var(--demi) - 1px)); }
.appreciation.niveau-0 { background: #16803A; color: #FFFFFF; }     /* Excellent */
.appreciation.niveau-1 { background: #1D6FE0; color: #FFFFFF; }     /* Très bon */
.appreciation.niveau-2 { background: #FFE14A; color: #101725; }     /* Bon prix */
.appreciation.niveau-3 { background: #F28C28; color: #101725; }     /* Prix cher */
.appreciation.niveau-4 { background: #D32F2F; color: #FFFFFF; }     /* Très cher */
/* Dans la liste : l'appréciation écrite devant le prix d'un produit absent de la base. */
.liste-app { margin-right: 6px; font-size: 0.68rem; font-weight: 800; vertical-align: 2px; }
.liste-app.niveau-0 { color: #4ADE80; } .liste-app.niveau-1 { color: #7DB7FF; } .liste-app.niveau-2 { color: #FFE14A; }
.liste-app.niveau-3 { color: #FFA94D; } .liste-app.niveau-4 { color: #FF8A8A; }
.appreciation.cote-droit { transform: translate(calc(var(--demi) + 2px), -50%); }
.appreciation.cote-gauche { transform: translate(calc(-100% - var(--demi) - 2px), -50%); }
.appreciation { font-size: clamp(8px, 1.2vw, 12px); padding: 1px 5px 2px; }

/* ---------- Appréciation du prix, version ordonnée (demande de l'utilisateur : sur téléphone, les étiquettes
   étaient trop grandes et en désordre) ----------
   1. La COULEUR du bouton « + » dit l'appréciation ; une légende des couleurs est écrite sous chaque image.
   2. Les boutons sont proportionnels à la largeur de l'image (plus petits sur téléphone).
   3. Les étiquettes écrites ne s'affichent que si l'image est assez large (ordinateur, tablette). */
.zone-image { container-type: inline-size; }
.pastille { width: clamp(19px, 3.6cqw, 34px); height: clamp(19px, 3.6cqw, 34px); border-width: 1.5px; font-size: clamp(11px, 2cqw, 17px); }
.pastille.niveau-0 { --c: #16803A; background: #16803A; color: #FFFFFF; }     /* Excellent */
.pastille.niveau-1 { --c: #1D6FE0; background: #1D6FE0; color: #FFFFFF; }     /* Très bon */
.pastille.niveau-2 { --c: #FFD21F; background: #FFD21F; color: #101725; }     /* Bon prix */
.pastille.niveau-3 { --c: #F28C28; background: #F28C28; color: #101725; }     /* Prix cher */
.pastille.niveau-4 { --c: #D32F2F; background: #D32F2F; color: #FFFFFF; }     /* Très cher */
.pastille { border-color: #FFFFFF; box-shadow: 0 0 0 1px rgba(16, 23, 37, .55), 0 2px 6px rgba(0, 0, 0, .4); }
.pastille.choisi { background: #101725; color: #FFFFFF; border-color: var(--c, #FFFFFF); border-width: 2.5px; }   /* dans la liste : fond foncé, le nombre, contour de la couleur */
.appreciation { display: none; --demi: clamp(9.5px, 1.8cqw, 17px); }
@container (min-width: 620px) { .appreciation { display: block; } }
.legende-prix { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 8px 4px 0; color: #C9D3E6; font-size: 0.74rem; font-weight: 600; line-height: 1.2; }
.legende-prix span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legende-prix span::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #FFFFFF; }
.legende-prix .niveau-0::before { background: #16803A; } .legende-prix .niveau-1::before { background: #1D6FE0; }
.legende-prix .niveau-2::before { background: #FFD21F; } .legende-prix .niveau-3::before { background: #F28C28; }
.legende-prix .niveau-4::before { background: #D32F2F; }

/* Légende : toujours sur UNE seule ligne. Avec 4 ou 5 couleurs, elles sont alignées et réparties sur toute la
   largeur de l'image (la première au bord gauche, la dernière au bord droit). */
.legende-prix { flex-wrap: nowrap; margin: 8px 0 0; font-size: clamp(9.5px, 3vw, 12.5px); }
.legende-prix.n-4, .legende-prix.n-5 { justify-content: space-between; gap: 0 4px; padding: 0 2px; }
.legende-prix.n-5 { font-size: clamp(8.5px, 2.55vw, 12.5px); }
.legende-prix span { gap: 4px; }
.legende-prix span::before { width: 0.95em; height: 0.95em; flex: 0 0 auto; }

/* À droite du logo du magasin : la loupe, qui ouvre la circulaire de ce magasin. */
.liste-magasin.avec-logo { align-items: center; gap: 10px; }
.liste-magasin.avec-logo .liste-vignette { align-self: stretch; }
.liste-loupe {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: zoom-in;
  display: grid; place-items: center; background: #191F2D; color: #FFBE00; border: 1px solid #2B3550;
}
.liste-loupe svg { width: 17px; height: 17px; }
.liste-loupe:hover { background: #232C42; }
.liste-vignette.photo.cliquable { cursor: zoom-in; }
.liste-loupe:focus-visible, .liste-vignette.photo.cliquable:focus-visible { outline: 3px solid #FFBE00; outline-offset: 2px; }

/* La loupe est tout près du logo. C'est un lien vers la circulaire en ligne du magasin. */
.liste-magasin.avec-logo { gap: 6px; }
a.liste-loupe { text-decoration: none; width: 32px; height: 32px; }
a.liste-vignette.photo.cliquable { cursor: pointer; }

/* Le bouton « Circulaire » : la loupe et le mot, dans un bouton doré, tout près du logo. */
a.liste-loupe { width: auto; height: 32px; padding: 0 12px 0 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
                background: #FFBE00; color: #101725; border-color: #FFBE00; font-weight: 700; font-size: 0.86rem; line-height: 1; white-space: nowrap; }
a.liste-loupe:hover { background: #FFCB33; }
a.liste-loupe i { font-style: normal; }
a.liste-loupe svg { width: 16px; height: 16px; flex: 0 0 auto; }
a.liste-loupe { text-transform: none; letter-spacing: 0; }

/* Les lignes de totaux tiennent toujours sur UNE ligne (le libellé à gauche, le montant à droite). */
.liste-total-general .liste-somme, .liste-sous-total div { flex-wrap: nowrap; white-space: nowrap; gap: 8px; }
.liste-total-general .liste-somme > *, .liste-sous-total div > * { white-space: nowrap; flex: 0 0 auto; }

/* La légende ne doit jamais élargir la carte ni la page : sa largeur est celle de l'image, pas celle de son texte.
   (Si le texte est trop large, liste.js réduit l'écriture jusqu'à ce qu'il tienne.) */
.legende-prix { width: 0; min-width: 100%; box-sizing: border-box; overflow: hidden; }

/* ---------- LISTE SUR FOND BLANC (demande de l'utilisateur, 14 octobre 2026) ----------
   Le panneau, l'entête, le pied et toutes les écritures passent sur fond blanc. Doré foncé pour les prix (lisible sur blanc). */
.liste-panneau { background: #FFFFFF; color: #101725; border-left: 1px solid #D8D2C6; box-shadow: -12px 0 30px rgba(0, 0, 0, .25); }
.liste-tete { background: #FFFFFF; border-bottom: 1px solid #D8D2C6; }
.liste-tete h2 { color: #101725; }
.liste-fermer { background: #F3F4F7; border-color: #D8D2C6; color: #101725; }
.liste-vide { color: #5B6478; }
.liste-ligne { border-bottom-color: #E6E2DA; }
.liste-det, .liste-ref, .liste-min { color: #5B6478; }
.liste-carte { color: #101725; box-shadow: inset 0 0 0 1px #D8D2C6; }
.liste-carte .liste-det, .liste-carte .liste-ref { color: #5B6478; }
.liste-carte .liste-prix { color: #D48A00; }
.liste-eco, .liste-somme.eco, .liste-sous-total .eco { color: #15803D; }
.liste-eco.nulle { color: #5B6478; }
.liste-qte { border-color: #D8D2C6; }
.liste-qte button { background: #F3F4F7; color: #101725; }
.liste-qte button:hover { background: #E6E8EE; }
.liste-sous-total { background: #F3F4F7; border-color: #D8D2C6; }
.liste-pied { background: #FFFFFF; border-top: 1px solid #D8D2C6; }
.liste-total-general { background: #F3F4F7; border-color: #FFBE00; }
.liste-actions button { background: #F3F4F7; color: #101725; border-color: #D8D2C6; }
.liste-actions .principal { background: #FFBE00; color: #101725; border-color: #FFBE00; }
.liste-actions .vider { background: none; border-color: transparent; color: #5B6478; }
.liste-note { color: #5B6478; }
.liste-essai { background: #FFF4CC; color: #7A5A00; }
.liste-magasin-nom { color: #101725; }
.liste-loupe { background: #F3F4F7; color: #101725; border-color: #D8D2C6; }
.liste-app.niveau-0 { color: #15803D; } .liste-app.niveau-1 { color: #1D6FE0; } .liste-app.niveau-2 { color: #B8860B; }
.liste-app.niveau-3 { color: #D97706; } .liste-app.niveau-4 { color: #D32F2F; }

/* Trois boutons sur une ligne : Partager, Télécharger, Imprimer ; « Vider la liste » en dessous. */
.liste-actions { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.liste-actions button { padding: 10px 6px; font-size: 0.86rem; gap: 6px; }
@media (max-width: 380px) { .liste-actions button { font-size: 0.8rem; gap: 4px; } }

/* ---------- IMPRESSION : seule la liste s'imprime, sur toute la largeur de la feuille ---------- */
@media print {
  @page { margin: 12mm; }
  body { padding: 0 !important; background: #FFFFFF !important; }
  body > *:not(.liste-panneau) { display: none !important; }
  .liste-panneau { display: block !important; position: static !important; width: 100% !important; height: auto !important;
                   overflow: visible !important; border: 0 !important; box-shadow: none !important; }
  .liste-tete { position: static !important; }
  .liste-fermer, .liste-actions, .liste-loupe, .liste-qte button { display: none !important; }
  .liste-qte { border: 0; }
  .liste-ligne, .liste-sous-total, .liste-total-general, .liste-magasin { break-inside: avoid; page-break-inside: avoid; }
  .liste-carte { box-shadow: inset 0 0 0 1px #BBB; }
}

/* Sur fond blanc : plus de halo autour des logos ; en impression, « Quantité : » devant le nombre. */
.liste-magasin .liste-vignette, .liste-magasin.avec-logo .liste-vignette { box-shadow: none; }
@media print {
  .liste-qte span::before { content: "Quantité : "; font-weight: 600; color: #5B6478; }
  .liste-qte span { min-width: 0; padding: 0; }
}

/* Plus de boutons jaunes dans la liste (demande du 14 oct.) : « Circulaire » et « Télécharger » en blanc, comme les autres. */
.liste-panneau a.liste-loupe { background: #FFFFFF; color: #101725; border: 1px solid #D8D2C6; }
.liste-panneau a.liste-loupe:hover { background: #F3F4F7; }
.liste-actions button, .liste-actions .principal { background: #FFFFFF; color: #101725; border: 1px solid #D8D2C6; }
.liste-actions button:hover { background: #F3F4F7; }
.liste-actions .vider { background: none; border-color: transparent; }