/* Le store V2 (épique #123) : l'épicerie présentée comme le store en ligne d'une enseigne. Couleurs plus commerçantes
   que le reste de l'app (marine, tomate, étiquette jaune), mêmes polices (Archivo, IBM Plex Mono) ; la nutrition reste
   au premier plan (densité, portion réelle, Nutri-Score, NOVA), et le hors sélection reste visible, avec sa raison. */
.st {
  --st-marine: #0E2A47;
  --st-marine-2: #163B61;
  --st-fond: #F4F5F7;
  --st-blanc: #FFFFFF;
  --st-encre: #14202B;
  --st-texte-2: #4B5563;
  --st-filet: #E2E5EA;
  --st-tomate: #E0442A;
  --st-tomate-fonce: #B8321C;
  --st-jaune: #FFD84D;
  --st-vert: #17744A;
  --st-vert-fond: #E3F1E9;
  --st-hors: #8A2A0F;
  --st-hors-fond: #FBE9E3;
  --st-ombre: 0 1px 2px rgba(14, 42, 71, .06), 0 4px 14px rgba(14, 42, 71, .06);
  margin: 0; padding: 0 !important; background: var(--st-fond); color: var(--st-encre); font-family: var(--sans);
}
.st a { color: inherit; }
.st-evitement { position: absolute; left: -9999px; }
.st-evitement:focus { left: 12px; top: 12px; z-index: 100; background: var(--st-blanc); padding: 10px 14px; border-radius: 999px; }

/* ---------- en-tête ---------- */
.st-entete { position: sticky; top: 0; z-index: 30; background: var(--st-marine); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.st-bandeau { margin: 0; padding: 6px 16px; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; background: var(--st-tomate);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-align: center; }
.st-bandeau-proto { opacity: .9; }
.st-bandeau-proto::before { content: '·'; margin-right: 18px; }
.st-entete-corps { max-width: 1320px; margin: 0 auto; padding: 12px 16px; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; }
.st-retour { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--st-marine-2); color: #fff; }
.st-retour[hidden] { display: none; }
.st-logo { display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 8px; text-decoration: none; color: #fff; line-height: 1; }
.st-logo-tag { grid-column: 1 / 3; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.st-logo-nom { font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.st-logo-nom s { text-decoration-color: var(--st-tomate); text-decoration-thickness: 4px; }
.st-logo-store { align-self: center; white-space: nowrap; background: var(--st-jaune); color: var(--st-marine); font-family: var(--mono); font-weight: 600; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; }
.st-recherche { grid-column: 3; display: flex; align-items: center; background: var(--st-blanc); border-radius: 999px; padding: 4px; min-width: 0; }
.st-recherche input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; padding: 10px 14px; color: var(--st-encre); outline: none; }
.st-recherche button { width: 40px; height: 40px; border: 0; border-radius: 999px; display: grid; place-items: center; background: transparent; color: var(--st-marine); }
.st-recherche .st-recherche-ok { background: var(--st-tomate); color: #fff; }
.st-recherche:focus-within { box-shadow: 0 0 0 3px var(--st-jaune); }
.st-actions { display: flex; gap: 6px; }
.st-action { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--st-marine-2); color: #fff; font-weight: 600; font-size: 15px; }
.st-action-panier { background: var(--st-jaune); color: var(--st-marine); }
.st-action-panier span { font-family: var(--mono); font-weight: 600; }
.st-pastille { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--st-tomate); color: #fff;
  font-family: var(--mono); font-size: 12px; display: grid; place-items: center; }
.st-pastille[hidden] { display: none; }
.st-rayons { max-width: 1320px; margin: 0 auto; padding: 0 8px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.st-rayons::-webkit-scrollbar { display: none; }
.st-rayons button, .st-rayons a { flex: none; border: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 600; padding: 10px 12px 12px;
  border-bottom: 3px solid transparent; text-decoration: none; white-space: nowrap; opacity: .88; }
.st-rayons [aria-current="true"] { border-bottom-color: var(--st-jaune); opacity: 1; }
.st-rayons .st-rayons-aide { margin-left: auto; font-weight: 400; font-family: var(--mono); font-size: 12px; }

/* ---------- page ---------- */
.st-page { max-width: 1320px; margin: 0 auto; padding: 18px 16px 48px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.st-page.sans-cote { grid-template-columns: minmax(0, 1fr); }
.st-page.sans-cote .st-cote { display: none; }
.st-contenu { min-width: 0; outline: none; }
.st-chargement { color: var(--st-texte-2); }
.st-fil { margin: 0 0 8px; font-size: 13px; color: var(--st-texte-2); display: flex; flex-wrap: wrap; gap: 6px; }
.st-fil button { border: 0; background: none; padding: 0; color: var(--st-marine); text-decoration: underline; font-size: 13px; }
.st-titre { margin: 0; font-weight: 800; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.01em; }
.st-chapo { margin: 6px 0 0; color: var(--st-texte-2); line-height: 1.5; max-width: 52em; }
.st-outils { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 16px 0 12px; }
.st-compte { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--st-texte-2); }
.st-tri { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.st-tri select, .st-cote select { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--st-filet); border-radius: 10px; background: var(--st-blanc); color: var(--st-encre); }
.st-puces { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.st-puces::-webkit-scrollbar { display: none; }
.st-puce { flex: none; border: 1px solid var(--st-filet); background: var(--st-blanc); color: var(--st-encre); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; }
.st-puce small { font-family: var(--mono); color: var(--st-texte-2); margin-left: 6px; }
.st-puce[aria-current="true"] { background: var(--st-marine); border-color: var(--st-marine); color: #fff; }
.st-puce[aria-current="true"] small { color: #cfd8e3; }

/* ---------- colonne de gauche ---------- */
.st-cote { position: sticky; top: 124px; max-height: calc(100vh - 144px); overflow: auto; background: var(--st-blanc); border-radius: 18px; padding: 16px; box-shadow: var(--st-ombre); }
.st-cote h2 { margin: 0 0 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-texte-2); font-weight: 600; }
.st-cote section + section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--st-filet); }
.st-cote ul { list-style: none; margin: 0; padding: 0; }
.st-cote li button { width: 100%; display: flex; justify-content: space-between; gap: 8px; border: 0; background: none; text-align: left; padding: 7px 8px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--st-encre); }
.st-cote li button small { font-family: var(--mono); color: var(--st-texte-2); }
.st-cote li button[aria-current="true"] { background: var(--st-fond); font-weight: 700; }
.st-cote li li button { padding-left: 22px; font-size: 13px; }
.st-cote label { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0; }
.st-cote .st-filtre { display: grid; gap: 4px; margin-top: 8px; font-size: 13px; color: var(--st-texte-2); }
.st-lien { border: 0; background: none; padding: 0; color: var(--st-marine); text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; }

/* ---------- accueil du store ---------- */
.st-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0; border-radius: 24px; overflow: hidden; background: var(--st-marine); color: #fff; box-shadow: var(--st-ombre); }
.st-hero-texte { padding: 32px; }
.st-hero-sur { margin: 0 0 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-jaune); }
.st-hero h1 { margin: 0; font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.01em; }
.st-hero h1 em { font-style: normal; color: var(--st-jaune); }
.st-hero p { margin: 12px 0 0; line-height: 1.55; color: #d9e2ec; max-width: 34em; }
.st-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.st-hero-chiffres { background: var(--st-marine-2); padding: 28px; display: grid; gap: 14px; align-content: center; }
.st-hero-chiffres div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; }
.st-hero-chiffres b { font-family: var(--mono); font-size: 30px; color: var(--st-jaune); }
.st-hero-chiffres span { color: #d9e2ec; font-size: 14px; line-height: 1.4; }
.st-hero-chiffres s { text-decoration-color: var(--st-tomate); text-decoration-thickness: 2px; }
.st-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--st-tomate); color: #fff !important; font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; }
.st-bouton:hover { background: var(--st-tomate-fonce); }
.st-bouton.clair { background: var(--st-blanc); color: var(--st-marine) !important; }
.st-bouton.contour { background: transparent; color: var(--st-marine) !important; box-shadow: inset 0 0 0 2px var(--st-marine); }
.st-bouton.jaune { background: var(--st-jaune); color: var(--st-marine) !important; }
.st-bouton:disabled { opacity: .5; cursor: default; }
.st-section-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 32px 0 12px; }
.st-section-titre h2 { margin: 0; font-weight: 800; font-size: 22px; }
.st-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.st-categorie { display: grid; gap: 4px; align-content: start; text-align: left; border: 0; border-radius: 18px; padding: 16px; background: var(--st-blanc); box-shadow: var(--st-ombre); font: inherit; color: var(--st-encre); min-height: 110px; }
.st-categorie b { font-size: 17px; }
.st-categorie small { color: var(--st-texte-2); font-size: 13px; line-height: 1.4; }
.st-categorie span { margin-top: auto; font-family: var(--mono); font-size: 12px; color: var(--st-vert); }
.st-categorie:hover { box-shadow: 0 0 0 2px var(--st-marine); }

/* ---------- tuiles produit ---------- */
.st-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
.st-tuile { position: relative; display: flex; flex-direction: column; background: var(--st-blanc); border-radius: 18px; overflow: hidden; box-shadow: var(--st-ombre); }
.st-tuile-photo { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border: 0; padding: 14px; background: #fff; cursor: pointer; }
.st-tuile-photo { overflow: hidden; }
.st-tuile-photo img { width: 100%; height: 100%; object-fit: contain; }
.st-tuile-photo .st-sans-photo { width: 74%; aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; background: var(--st-fond); color: var(--st-texte-2);
  font-family: var(--mono); font-size: 13px; text-align: center; line-height: 1.3; padding: 8px; }
.st-densite { position: absolute; left: 10px; top: 10px; display: grid; justify-items: start; gap: 0; padding: 5px 9px; border-radius: 12px; background: var(--st-vert); color: #fff; line-height: 1.05; text-align: left; }
.st-densite b { font-family: var(--mono); font-size: 17px; }
.st-densite small { font-size: 10px; letter-spacing: .02em; }
.st-densite.moyen { background: #D9A93B; color: #2a1d02; }
.st-densite.faible { background: #6B7280; }
.st-densite.kcal { background: var(--st-marine); }
.st-ruban { position: absolute; right: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; background: var(--st-hors); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.st-tuile-corps { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 14px 10px; }
.st-marque { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-tuile h3 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.st-tuile h3 button { border: 0; background: none; padding: 0; font: inherit; text-align: left; color: inherit; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-tuile h3 button:hover { text-decoration: underline; }
.st-detail { margin: 0; font-size: 12px; color: var(--st-texte-2); }
.st-portion { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--st-encre); }
.st-portion b { font-family: var(--mono); font-weight: 600; }
.st-indicateurs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.st-indicateurs .nutriscore, .st-indicateurs .nova { transform: scale(.86); transform-origin: left center; }
.st-raison { margin: 4px 0 0; padding: 7px 9px; border-radius: 10px; background: var(--st-hors-fond); color: var(--st-hors); font-size: 12.5px; line-height: 1.35; }
.st-raison b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.st-tuile-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 14px; border-top: 1px dashed var(--st-filet); }
.st-prix { display: grid; line-height: 1.1; min-width: 0; }
.st-prix b { font-family: var(--mono); font-size: 18px; font-weight: 600; white-space: nowrap; }
.st-prix small { font-size: 11px; color: var(--st-texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-prix.absent b { font-size: 13px; color: var(--st-texte-2); font-family: var(--sans); font-weight: 600; }
.st-ajouter { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--st-tomate); color: #fff; font: inherit; font-weight: 700; font-size: 14px; }
.st-ajouter:hover { background: var(--st-tomate-fonce); }
.st-hors .st-tuile-pied { flex-wrap: wrap; }
.st-hors .st-tuile-pied .st-ajouter { width: 100%; justify-content: center; }
.st-hors .st-ajouter { background: transparent; color: var(--st-hors); box-shadow: inset 0 0 0 2px var(--st-hors); font-size: 13px; padding: 0 12px; }
.st-qte { flex: none; display: inline-flex; align-items: center; border-radius: 999px; background: var(--st-marine); color: #fff; }
.st-qte button { width: 38px; height: 42px; border: 0; background: none; color: #fff; font-size: 20px; font-weight: 700; display: grid; place-items: center; }
.st-qte output { min-width: 22px; text-align: center; font-family: var(--mono); font-weight: 600; }
.st-hors { background: #FCFBFA; }
.st-hors .st-tuile-photo img { filter: grayscale(.55); opacity: .85; }
.st-plus { display: flex; justify-content: center; margin: 18px 0 0; }

/* hors sélection d'un rayon : l'offre négative */
.st-horssel { margin-top: 36px; padding: 20px; border-radius: 22px; background: var(--st-blanc); box-shadow: var(--st-ombre); border-top: 6px solid var(--st-hors); }
.st-horssel h2 { margin: 0; font-size: 22px; font-weight: 800; }
.st-horssel > p { margin: 6px 0 0; color: var(--st-texte-2); line-height: 1.5; max-width: 52em; }
.st-raisons { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.st-raisons li { padding: 10px 12px; border-radius: 12px; background: var(--st-hors-fond); color: var(--st-hors); font-size: 13px; line-height: 1.4; }
.st-raisons b { display: flex; justify-content: space-between; gap: 8px; color: var(--st-encre); font-size: 14px; }
.st-raisons b span { font-family: var(--mono); color: var(--st-hors); }
.st-vide { padding: 24px; border-radius: 18px; background: var(--st-blanc); color: var(--st-texte-2); line-height: 1.5; }

/* ---------- tiroirs : panier et liste ---------- */
.st-voile { position: fixed; inset: 0; z-index: 40; background: rgba(14, 42, 71, .45); }
.st-voile[hidden] { display: none; }
.st-tiroir { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--st-fond); box-shadow: -8px 0 30px rgba(0, 0, 0, .2);
  display: flex; flex-direction: column; }
.st-tiroir[hidden] { display: none; }
.st-tiroir-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px; background: var(--st-marine); color: #fff; }
.st-tiroir-tete h2 { margin: 0; font-size: 20px; font-weight: 800; }
.st-tiroir-tete p { margin: 2px 0 0; font-family: var(--mono); font-size: 12px; color: #cfd8e3; }
.st-fermer { width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--st-marine-2); color: #fff; display: grid; place-items: center; }
.st-tiroir-corps { flex: 1; overflow: auto; padding: 14px 16px; }
.st-tiroir-pied { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--st-blanc); border-top: 1px solid var(--st-filet); display: grid; gap: 10px; }
.st-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-ligne { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--st-blanc); }
.st-ligne.hors { box-shadow: inset 3px 0 0 var(--st-hors); }
.st-ligne-photo { width: 56px; height: 56px; border: 0; border-radius: 10px; background: #fff; padding: 2px; display: grid; place-items: center; overflow: hidden; }
.st-ligne-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-ligne-photo span { font-family: var(--mono); font-size: 11px; color: var(--st-texte-2); }
.st-ligne-texte { min-width: 0; display: grid; gap: 2px; }
.st-ligne-texte b { font-size: 14px; line-height: 1.25; }
.st-ligne-texte small { font-size: 12px; color: var(--st-texte-2); }
.st-ligne-texte .st-ligne-hors { color: var(--st-hors); }
.st-ligne-droite { display: grid; justify-items: end; gap: 6px; }
.st-ligne-droite .st-qte button { width: 32px; height: 34px; font-size: 18px; }
.st-ligne-prix { font-family: var(--mono); font-weight: 600; font-size: 14px; }
.st-ligne-prix.absent { font-family: var(--sans); font-weight: 400; font-size: 12px; color: var(--st-texte-2); }
.st-totaux { display: grid; gap: 4px; }
.st-totaux span:last-child { white-space: nowrap; }
.st-totaux div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--st-texte-2); }
.st-totaux .st-total { color: var(--st-encre); font-size: 18px; font-weight: 800; }
.st-totaux .st-total b { font-family: var(--mono); font-weight: 600; font-size: 22px; }
.st-bilan { margin: 14px 0 0; padding: 14px; border-radius: 16px; background: var(--st-blanc); }
.st-bilan h3 { margin: 0 0 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-texte-2); font-weight: 600; }
.st-bilan-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.st-bilan-chiffres div { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--st-fond); }
.st-bilan-chiffres b { font-family: var(--mono); font-size: 18px; }
.st-bilan-chiffres small { font-size: 11.5px; color: var(--st-texte-2); line-height: 1.3; }
.st-barre { height: 10px; border-radius: 999px; background: var(--st-hors-fond); overflow: hidden; margin: 12px 0 6px; }
.st-barre i { display: block; height: 100%; background: var(--st-vert); }
.st-bilan p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--st-texte-2); }
.st-tiroir-vide { padding: 30px 10px; text-align: center; color: var(--st-texte-2); line-height: 1.5; }
.st-liste-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--st-blanc); }
.st-liste-ligne b { font-size: 14px; }
.st-liste-ligne small { display: block; font-size: 12px; color: var(--st-texte-2); margin-top: 2px; }
.st-liste-ligne.fait { opacity: .6; }
.st-liste-ligne .st-ajouter { min-height: 36px; font-size: 13px; padding: 0 12px; }
.st-coche { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12px; color: var(--st-vert); }

.st-tiroir select { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--st-filet); border-radius: 12px; background: var(--st-blanc); color: var(--st-encre); }

/* annonce */
.st-toast { position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-radius: 999px; background: var(--st-encre); color: #fff; box-shadow: 0 8px 26px rgba(0, 0, 0, .25); font-size: 14px; }
.st-toast[hidden] { display: none; }
.st-toast button { border: 0; background: var(--st-jaune); color: var(--st-marine); border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: 13px; }

/* pied */
.st-pied { background: var(--st-marine); color: #d9e2ec; padding: 26px 16px 36px; font-size: 13px; line-height: 1.6; }
.st-pied p { max-width: 1288px; margin: 0 auto 6px; }
.st-pied .mono { font-size: 12px; }

/* la fiche commune de l'app, aux couleurs du store */
.st #ar-fp { z-index: 50; }
.st-fiche-bloc { display: grid; gap: 10px; margin: 12px 0 4px; }
.st-fiche-bloc .st-raison { font-size: 14px; padding: 10px 12px; }
.st-fiche-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-fiche-actions .st-qte button { width: 44px; height: 46px; }

/* ---------- téléphone ---------- */
@media (max-width: 900px) {
  .st-page { grid-template-columns: minmax(0, 1fr); padding-top: 12px; }
  .st-cote { display: none; }
  .st-hero { grid-template-columns: minmax(0, 1fr); }
  .st-hero-texte { padding: 22px; }
  .st-hero-chiffres { padding: 18px 22px; }
}
@media (max-width: 720px) {
  .st-bandeau-proto { display: none; }
  .st-entete-corps { grid-template-columns: auto 1fr auto; grid-template-areas: "retour logo actions" "recherche recherche recherche"; gap: 10px; padding: 10px 12px; }
  .st-retour { grid-area: retour; }
  .st-logo { grid-area: logo; }
  .st-logo-nom { font-size: 19px; }
  .st-actions { grid-area: actions; }
  .st-recherche { grid-area: recherche; grid-column: 1 / -1; }
  .st-action-panier span { display: none; }
  .st-bandeau { font-size: 11px; padding: 5px 12px; }
  .st-indicateurs .nutriscore, .st-indicateurs .nova { transform: scale(.74); margin-right: -14px; margin-bottom: -6px; }
  .st-action { padding: 0 12px; }
  .st-action:not(.st-action-panier) span { display: none; }
  .st-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .st-tuile-corps { padding: 0 10px 8px; }
  .st-tuile-pied { padding: 8px 10px 10px; flex-wrap: wrap; }
  .st-tuile-pied .st-ajouter, .st-tuile-pied .st-qte { width: 100%; justify-content: center; }
  .st-tuile-pied .st-qte { justify-content: space-between; }
  .st-densite b { font-size: 15px; }
  .st-tiroir { width: 100vw; }
  .st-toast { width: calc(100vw - 24px); border-radius: 18px; justify-content: space-between; }
}
@media (prefers-reduced-motion: no-preference) {
  .st-tiroir { animation: st-glisse .22s ease-out; }
  @keyframes st-glisse { from { transform: translateX(30px); opacity: .4; } }
}

/* ---------- la taxonomie (taxonomie.html, #128) ---------- */
.st-entete-simple { grid-template-columns: auto 1fr; }
.tx { max-width: 1100px; margin: 0 auto; padding: 22px 16px 48px; }
.tx-tete { padding: 28px; border-radius: 24px; background: var(--st-marine); color: #fff; }
.tx-tete h1 { margin: 0; font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); }
.tx-tete p { margin: 10px 0 0; color: #d9e2ec; line-height: 1.55; max-width: 48em; }
.tx-tete p b { color: #fff; }
.tx-totaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 20px; }
.tx-totaux div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--st-marine-2); }
.tx-totaux b { font-family: var(--mono); font-size: 24px; color: var(--st-jaune); }
.tx-totaux s { text-decoration-color: var(--st-tomate); }
.tx-totaux span { font-size: 13px; color: #d9e2ec; line-height: 1.35; }
.tx-methode { margin-top: 18px; padding: 22px; border-radius: 22px; background: var(--st-blanc); box-shadow: var(--st-ombre); border-left: 6px solid var(--st-jaune); }
.tx-methode h2 { margin: 0 0 10px; font-size: 20px; font-weight: 800; }
.tx-methode ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }
.tx-note { margin: 6px 0 0; font-size: 14px; color: var(--st-texte-2); line-height: 1.5; }
.tx-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 24px 0 6px; }
.tx-chercher input { font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid var(--st-filet); border-radius: 999px; background: var(--st-blanc); min-width: 240px; }
.tx-categorie { margin-top: 26px; }
.tx-categorie[hidden], .tx-famille[hidden] { display: none; }
.tx-categorie h2 { margin: 0; font-size: 22px; font-weight: 800; }
.tx-categorie h2 small { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--st-texte-2); margin-left: 8px; }
.tx-famille { margin-top: 10px; border-radius: 16px; background: var(--st-blanc); box-shadow: var(--st-ombre); }
.tx-famille summary { display: grid; grid-template-columns: minmax(0, 1.6fr) 120px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.tx-famille summary::-webkit-details-marker { display: none; }
.tx-famille[open] summary { border-bottom: 1px solid var(--st-filet); }
.tx-famille-nom { display: grid; gap: 2px; min-width: 0; }
.tx-famille-nom b { font-size: 16px; }
.tx-famille-nom small { font-size: 12px; color: var(--st-texte-2); }
.tx-famille-barre { height: 8px; border-radius: 999px; background: var(--st-hors-fond); overflow: hidden; }
.tx-famille-barre i { display: block; height: 100%; background: var(--st-vert); }
.tx-famille-chiffres { font-family: var(--mono); font-size: 12.5px; color: var(--st-texte-2); }
.tx-famille-chiffres b { color: var(--st-encre); }
.tx-famille-chiffres s { text-decoration-color: var(--st-hors); }
.tx-famille-densite { font-family: var(--mono); font-size: 12.5px; color: var(--st-vert); white-space: nowrap; }
.tx-famille-corps { padding: 14px 16px 18px; }
.tx-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; }
.tx-famille h3 { margin: 14px 0 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-texte-2); font-weight: 600; }
.tx-famille h3:first-child { margin-top: 0; }
.tx-criteres { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--st-vert-fond); color: var(--st-vert); font-weight: 600; font-size: 14px; }
.tx-regles, .tx-retraits, .tx-exemples { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.tx-retraits { list-style: none; padding: 0; }
.tx-retraits li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 10px; border-radius: 8px; background: var(--st-hors-fond); color: var(--st-hors); margin-top: 4px; }
.tx-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tx-puces span { padding: 5px 10px; border-radius: 999px; background: var(--st-fond); font-size: 13px; }
.tx-puces small { font-family: var(--mono); color: var(--st-texte-2); }
.tx-portion { margin: 0; font-size: 15px; }
.tx-portion b { font-family: var(--mono); font-size: 20px; }
.tx-portion small { display: block; font-size: 12.5px; color: var(--st-texte-2); }
.tx-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.tx-table caption { text-align: left; font-size: 12px; color: var(--st-texte-2); padding-bottom: 6px; }
.tx-table th, .tx-table td { padding: 6px 8px; border-bottom: 1px solid var(--st-filet); text-align: right; white-space: nowrap; }
.tx-table th[scope="row"] { text-align: left; font-weight: 600; white-space: normal; }
.tx-table thead th { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--st-texte-2); }
.tx-table td { font-family: var(--mono); }
.tx-ligne-densite { background: var(--st-vert-fond); }
@media (max-width: 760px) {
  .tx-famille summary { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .tx-famille-barre { grid-column: 1 / -1; grid-row: 2; }
  .tx-famille-chiffres { grid-row: 3; }
  .tx-colonnes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tx-table { display: block; overflow-x: auto; }
  .tx-chercher, .tx-chercher input { width: 100%; min-width: 0; }
  .tx-tete { padding: 20px; }
}
.st-entete-simple .st-logo { justify-self: start; }
.tx-famille { scroll-margin-top: 84px; }

/* ---------- sans compte (#123) : l'épicerie au-delà du store, et la page « avec un compte » ---------- */
.st-action-connexion { text-decoration: none; }
.st-action-connexion[hidden] { display: none; }
.st-epicerie { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: center; padding: 26px 28px; border-radius: 24px; background: var(--st-blanc); box-shadow: var(--st-ombre); border-left: 6px solid var(--st-tomate); }
.st-epicerie .st-hero-sur { color: var(--st-tomate); }
.st-epicerie h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; }
.st-epicerie p { margin: 8px 0 0; color: var(--st-texte-2); line-height: 1.55; }
.st-epicerie .st-bouton.clair { box-shadow: inset 0 0 0 2px var(--st-marine); }
.st-epicerie-etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-epicerie-etapes li { counter-increment: etape; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--st-fond); }
.st-epicerie-etapes li::before { content: counter(etape); font-family: var(--mono); font-size: 12px; color: var(--st-tomate); }
.st-epicerie-etapes b { font-size: 16px; }
.st-epicerie-etapes span { font-size: 13px; color: var(--st-texte-2); }
.st-epicerie-etapes .st-etape-nutrition { grid-column: 1 / -1; background: var(--st-vert-fond); }
.st-epicerie-etapes .st-etape-nutrition::before { color: var(--st-vert); }
.st-epicerie-etapes .st-etape-nutrition b { color: var(--st-vert); }
.st-porte { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; background: rgba(14, 42, 71, .55); overflow: auto; }
.st-porte[hidden] { display: none; }
.st-porte-carte { position: relative; width: min(560px, 100%); padding: 30px 28px 24px; border-radius: 28px; background: var(--st-blanc); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); border-top: 8px solid var(--st-jaune); }
.st-porte-carte .st-hero-sur { color: var(--st-tomate); }
.st-porte-carte h2 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; padding-right: 44px; }
.st-porte-carte > p { margin: 10px 0 0; color: var(--st-texte-2); line-height: 1.55; }
.st-porte-fermer { position: absolute; top: 16px; right: 16px; background: var(--st-fond); color: var(--st-encre); }
.st-porte-produit { padding: 10px 12px; border-radius: 12px; background: var(--st-vert-fond); color: var(--st-vert) !important; font-weight: 600; }
.st-porte-points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.st-porte-points li { display: grid; gap: 2px; padding-left: 28px; position: relative; }
.st-porte-points li::before { content: ''; position: absolute; left: 4px; top: 5px; width: 12px; height: 7px; border-left: 3px solid var(--st-vert); border-bottom: 3px solid var(--st-vert); transform: rotate(-45deg); }
.st-porte-points b { font-size: 15px; }
.st-porte-points span { font-size: 14px; color: var(--st-texte-2); line-height: 1.4; }
.st-porte-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.st-porte-note { font-size: 13px !important; }
.st-pied p a { color: #fff; }
@media (max-width: 900px) { .st-epicerie { grid-template-columns: minmax(0, 1fr); padding: 22px; } }
@media (max-width: 720px) {
  .st-action-connexion span { display: none; }
  .st-porte { place-items: end center; padding: 0; }
  .st-porte-carte { border-radius: 28px 28px 0 0; padding: 26px 20px calc(20px + env(safe-area-inset-bottom)); }
  .st-porte-actions .st-bouton { width: 100%; }
}
@media (max-width: 420px) {
  .st-logo-store { display: none; }
  .st-actions { gap: 4px; }
  .st-action { padding: 0 11px; }
}

/* la pancarte « Bientôt ouvert ! » (app.css) accrochée à la carte de tête du store */
.st-hero { position: relative; }
.st-hero .panneau-ouvert { top: 14px; right: 30px; }
.st-hero .panneau-ouvert > span { font-size: 30px; padding: 9px 18px 10px; }
@media (max-width: 900px) { .st-hero .panneau-ouvert { top: 10px; right: 16px; } .st-hero .panneau-ouvert > span { font-size: 22px; padding: 6px 12px 7px; } .st-hero-sur { padding-right: 110px; min-height: 62px; } }

/* Mes favoris (#137) : le cœur d'une tuile */
.st-coeur { position: absolute; z-index: 2; top: 10px; right: 10px; width: 38px; height: 38px; border: 0; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--st-marine); box-shadow: 0 2px 8px rgba(14, 42, 71, .15); cursor: pointer; }
.st-coeur.actif { color: var(--st-tomate); }
.st-coeur.actif svg { fill: currentColor; }
.st-hors .st-ruban { top: auto; bottom: 10px; right: 10px; }
.st-rayons [data-nav="mes"] { color: var(--st-jaune); }