/* ════════════════════════════════════════════════════════════════════
   ProxiShop — Couche composants « Refonte vues » (préfixe pv-)
   Charte : Clean & Human · Nature Distilled
   Olive #6B7B3C · Ambre CTA #D97706 · Crème #FAF8F3
   DM Serif Display · Plus Jakarta Sans · DM Mono
   S'appuie sur les tokens --ps-* de design-system-pro.css
   ════════════════════════════════════════════════════════════════════ */

/* Alpine.js — masque les éléments avant initialisation */
[x-cloak] { display: none !important; }

/* ── 1. Structure de page ──────────────────────────────────────────── */
.pv-page { background: var(--ps-bg); min-height: 60vh; }
.pv-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.pv-container--narrow { max-width: 880px; }
.pv-section { padding: var(--ps-space-12) 0; }
.pv-section--tight { padding: var(--ps-space-8) 0; }

.pv-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: var(--ps-space-6); flex-wrap: wrap; }
.pv-section-title { font-family: 'DM Serif Display', serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 400; color: var(--ps-text-heading); margin: 0; line-height: 1.2; }
.pv-section-sub { font-size: .9rem; color: var(--ps-text-soft); margin: 6px 0 0; max-width: 60ch; }
.pv-section-link { font-size: .85rem; font-weight: 700; color: var(--ps-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.pv-section-link:hover { color: var(--ps-primary-hover); text-decoration: underline; }

/* ── 2. Hero ───────────────────────────────────────────────────────── */
/* Fix largeur : le hero s'étendait bord à bord (100% fenêtre) alors que
   toutes les autres sections de la page restent contenues dans
   .pv-container (1280px max) — écart visible avec la bannière promo,
   les grilles boutiques/produits, etc. Recadré ici pour TOUTES les
   pages qui partagent .pv-hero (accueil, catalogue, boutiques). */
.pv-hero { background: linear-gradient(135deg, var(--ps-primary-deep) 0%, var(--ps-primary) 70%, var(--ps-primary-light) 120%); color: #fff; padding: var(--ps-space-16) 0 var(--ps-space-12); position: relative; overflow: hidden; max-width: 1280px; margin: 20px auto 0; border-radius: var(--ps-radius-xl); }
@media (max-width: 700px) {
    .pv-hero { margin: 0 auto; border-radius: 0; }
}
.pv-hero::after { content: ''; position: absolute; right: -120px; top: -80px; width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; }
.pv-hero__inner { position: relative; z-index: 1; max-width: 720px; }
.pv-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.14); padding: 6px 14px; border-radius: var(--ps-radius-pill); margin-bottom: 16px; }
.pv-hero__title { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.15; margin: 0 0 14px; }
.pv-hero__title em { font-style: italic; color: #F5E3C8; }
.pv-hero__text { font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.88); margin: 0 0 26px; max-width: 54ch; }
.pv-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pv-hero__stats { display: flex; gap: 28px; margin-top: 34px; flex-wrap: wrap; }
.pv-hero__stat-num { font-family: 'DM Mono', monospace; font-size: 1.5rem; font-weight: 500; }
.pv-hero__stat-label { font-size: .78rem; color: rgba(255,255,255,.75); }

/* ── 3. Boutons (compléments) ──────────────────────────────────────── */
/* L'attribut HTML `hidden` vaut display:none dans la feuille du navigateur,
   avec une spécificité nulle : la moindre classe qui pose un `display` le
   neutralise. C'est ce qui affichait « Créer ma boutique » et « Précédent »
   dès la première étape de l'inscription commerçant, à côté de
   « Continuer » — les boutons portent .pv-btn, donc display:inline-flex.
   On rétablit le sens de `hidden` pour tous les composants pv-*. */
[hidden] { display: none !important; }

.pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: var(--ps-radius-lg); font-family: inherit; font-size: .9rem; font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
.pv-btn:focus-visible { outline: 3px solid var(--ps-cta); outline-offset: 2px; }
.pv-btn--cta { background: var(--ps-cta-hover); color: #fff; box-shadow: 0 6px 18px var(--ps-cta-shadow); }
.pv-btn--cta:hover { background: var(--ps-cta-hover); transform: translateY(-1px); }
.pv-btn--primary { background: var(--ps-primary); color: #fff; }
.pv-btn--primary:hover { background: var(--ps-primary-hover); }
.pv-btn--outline { background: transparent; color: var(--ps-primary); border: 1.5px solid var(--ps-primary); }
.pv-btn--outline:hover { background: var(--ps-primary-soft); }
.pv-btn--ghost { background: transparent; color: var(--ps-text-soft); }
.pv-btn--ghost:hover { background: var(--ps-surface-soft); color: var(--ps-text); }
.pv-btn--light { background: #fff; color: var(--ps-primary-deep); }
.pv-btn--light:hover { background: var(--ps-primary-soft); }
.pv-btn--danger { background: transparent; color: var(--ps-error); border: 1.5px solid currentColor; }
.pv-btn--danger:hover { background: #FEF2F2; }
.pv-btn--sm { min-height: 38px; padding: 0 16px; font-size: .82rem; border-radius: var(--ps-radius-md); }
.pv-btn--block { width: 100%; }
.pv-btn[disabled], .pv-btn--loading { opacity: .55; pointer-events: none; }

/* ── 4. Chips catégories / filtres ─────────────────────────────────── */
.pv-chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.pv-chips::-webkit-scrollbar { display: none; }
.pv-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--ps-radius-pill); background: var(--ps-surface); border: 1.5px solid var(--ps-border-light); color: var(--ps-text); font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: all .15s ease; }
.pv-chip:hover { border-color: var(--ps-primary); color: var(--ps-primary); }
.pv-chip.is-active { background: var(--ps-primary); border-color: var(--ps-primary); color: #fff; }
.pv-chip:focus-visible { outline: 3px solid var(--ps-cta); outline-offset: 2px; }

/* ── 5. Cartes boutique ────────────────────────────────────────────── */
.pv-grid { display: grid; gap: 20px; }
.pv-grid--shops { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pv-grid--products { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.pv-shop-card { display: flex; flex-direction: column; background: var(--ps-surface); border: 1px solid var(--ps-border-light); border-radius: var(--ps-radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pv-shop-card:hover { transform: translateY(-3px); box-shadow: var(--ps-shadow-md); border-color: var(--ps-primary-pale); }
.pv-shop-card:focus-visible { outline: 3px solid var(--ps-cta); outline-offset: 2px; }
.pv-shop-card__banner { height: 110px; background: linear-gradient(120deg, var(--ps-primary-soft), var(--ps-primary-pale)); position: relative; }
.pv-shop-card__banner img { width: 100%; height: 100%; object-fit: cover; }
.pv-shop-card__logo { position: absolute; left: 16px; bottom: -22px; width: 52px; height: 52px; border-radius: var(--ps-radius-md); background: var(--ps-surface); border: 2px solid var(--ps-surface); box-shadow: var(--ps-shadow-sm); display: flex; align-items: center; justify-content: center; font-family: 'DM Serif Display', serif; font-size: 1.3rem; color: var(--ps-primary); overflow: hidden; }
.pv-shop-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.pv-shop-card__body { padding: 30px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pv-shop-card__name { font-size: 1rem; font-weight: 700; color: var(--ps-text-heading); margin: 0; }
.pv-shop-card__meta { font-size: .78rem; color: var(--ps-text-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pv-shop-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--ps-border-light); }
.pv-rating { display: inline-flex; align-items: center; gap: 4px; font-family: 'DM Mono', monospace; font-size: .8rem; font-weight: 500; color: var(--ps-text); }
.pv-rating svg { color: var(--ps-star, #D9A406); }

/* Badges d'état boutique / livraison */
.pv-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--ps-radius-pill); font-size: .7rem; font-weight: 700; }
.pv-badge--open { background: #E7F4EC; color: #1F6A3B; }
.pv-badge--closed { background: #FEE2E2; color: #991B1B; }
.pv-badge--delivery { background: var(--ps-primary-soft); color: var(--ps-primary-deep); }
.pv-badge--promo { background: var(--ps-cta-soft); color: var(--ps-cta-deep); }
.pv-badge--neutral { background: var(--ps-surface-soft); color: var(--ps-text-soft); }

/* ── 6. Cartes produit ─────────────────────────────────────────────── */
.pv-product-card { display: flex; flex-direction: column; background: var(--ps-surface); border: 1px solid var(--ps-border-light); border-radius: var(--ps-radius-lg); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; position: relative; }
.pv-product-card:hover { transform: translateY(-3px); box-shadow: var(--ps-shadow-md); }
.pv-product-card__media { aspect-ratio: 1 / 1; background: var(--ps-surface-soft); display: flex; align-items: center; justify-content: center; position: relative; }
.pv-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pv-product-card__media svg { color: var(--ps-border); }
.pv-product-card__promo { position: absolute; top: 10px; left: 10px; }
.pv-product-card__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pv-product-card__name { font-size: .88rem; font-weight: 600; color: var(--ps-text); margin: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.pv-product-card__name a { color: inherit; text-decoration: none; }
.pv-product-card__name a::after { content: ''; position: absolute; inset: 0; }
.pv-product-card__shop { font-size: .72rem; color: var(--ps-text-soft); }
.pv-product-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.pv-price { font-family: 'DM Mono', monospace; font-weight: 500; font-size: 1rem; color: var(--ps-text-heading); }
.pv-price--old { font-size: .78rem; color: var(--ps-text-muted); text-decoration: line-through; margin-inline-end: 6px; }
.pv-price--promo { color: var(--ps-cta-deep); }
.pv-price small { font-size: .68rem; font-weight: 400; color: var(--ps-text-soft); }
.pv-add-btn { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: var(--ps-radius-md); border: none; background: var(--ps-cta-hover); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, transform .1s ease; }
.pv-add-btn:hover { background: var(--ps-cta-hover); }
.pv-add-btn:active { transform: scale(.95); }
.pv-add-btn:focus-visible { outline: 3px solid var(--ps-primary); outline-offset: 2px; }
.pv-add-btn[disabled] { background: var(--ps-border); cursor: not-allowed; }

/* ── 7. Fil d'ariane ───────────────────────────────────────────────── */
.pv-crumbs { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ps-text-soft); padding: var(--ps-space-4) 0; flex-wrap: wrap; }
.pv-crumbs a { color: var(--ps-text-soft); text-decoration: none; }
.pv-crumbs a:hover { color: var(--ps-primary); text-decoration: underline; }
.pv-crumbs span[aria-current] { color: var(--ps-text); font-weight: 600; }

/* ── 8. Cartes génériques / panneaux ───────────────────────────────── */
.pv-card { background: var(--ps-surface); border: 1px solid var(--ps-border-light); border-radius: var(--ps-radius-lg); padding: var(--ps-space-6); }
.pv-card--soft { background: var(--ps-surface-soft); border: none; }
.pv-card__title { font-size: 1.05rem; font-weight: 700; color: var(--ps-text-heading); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.pv-card__title svg { color: var(--ps-primary); flex-shrink: 0; }

/* ── 9. Formulaires ────────────────────────────────────────────────── */
.pv-field { margin-bottom: var(--ps-space-4); }
.pv-label { display: block; font-size: .82rem; font-weight: 600; color: var(--ps-text); margin-bottom: 6px; }
.pv-label .req { color: var(--ps-error); }
.pv-input, .pv-select, .pv-textarea { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--ps-radius-md); border: 1.5px solid transparent; background: var(--ps-surface-soft); font-family: inherit; font-size: .9rem; color: var(--ps-text); transition: border-color .15s ease, background .15s ease; }
.pv-textarea { min-height: 100px; resize: vertical; }
.pv-input:focus, .pv-select:focus, .pv-textarea:focus { outline: none; border-color: var(--ps-primary); background: #fff; }
.pv-input[aria-invalid="true"] { border-color: var(--ps-error); }
.pv-error { font-size: .76rem; color: var(--ps-error); margin-top: 5px; display: flex; align-items: center; gap: 5px; }
.pv-help { font-size: .74rem; color: var(--ps-text-soft); margin-top: 5px; }

/* Radios « carte » (mode de livraison, paiement) */
.pv-option { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--ps-border-light); border-radius: var(--ps-radius-md); background: var(--ps-surface); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.pv-option:hover { border-color: var(--ps-primary-pale); }
.pv-option:has(input:checked) { border-color: var(--ps-primary); background: var(--ps-primary-soft); }
.pv-option:has(input:focus-visible) { outline: 3px solid var(--ps-cta); outline-offset: 2px; }
.pv-option input { margin-top: 3px; accent-color: var(--ps-primary); width: 18px; height: 18px; }
.pv-option__title { font-size: .88rem; font-weight: 700; color: var(--ps-text); }
.pv-option__desc { font-size: .76rem; color: var(--ps-text-soft); margin-top: 2px; }

/* ── 10. Panier ────────────────────────────────────────────────────── */
.pv-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .pv-cart-layout { grid-template-columns: minmax(0, 1fr); } }
.pv-cart-shop { background: var(--ps-surface); border: 1px solid var(--ps-border-light); border-radius: var(--ps-radius-lg); overflow: hidden; margin-bottom: var(--ps-space-5); }
.pv-cart-shop__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: var(--ps-primary-soft); }
.pv-cart-shop__name { font-weight: 700; font-size: .92rem; color: var(--ps-primary-deep); display: flex; align-items: center; gap: 8px; }
.pv-cart-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--ps-border-light); align-items: center; }
.pv-cart-item__img { width: 72px; height: 72px; border-radius: var(--ps-radius-md); background: var(--ps-surface-soft); object-fit: cover; }
.pv-cart-item__name { font-size: .88rem; font-weight: 600; color: var(--ps-text); margin: 0 0 4px; }
.pv-cart-item__unit { font-size: .74rem; color: var(--ps-text-soft); }
.pv-cart-item__end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pv-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--ps-border-light); border-radius: var(--ps-radius-pill); overflow: hidden; }
.pv-qty button { width: 40px; height: 40px; border: none; background: transparent; color: var(--ps-primary); font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.pv-qty button:hover { background: var(--ps-primary-soft); }
.pv-qty span { min-width: 34px; text-align: center; font-family: 'DM Mono', monospace; font-size: .9rem; }
.pv-remove { border: none; background: none; color: var(--ps-text-muted); font-size: .74rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 6px; min-height: 44px; }
.pv-remove:hover { color: var(--ps-error); }

.pv-summary { position: sticky; top: 76px; }
.pv-summary__row { display: flex; justify-content: space-between; font-size: .88rem; color: var(--ps-text-soft); padding: 7px 0; }
.pv-summary__row strong { color: var(--ps-text); }
.pv-summary__row--total { border-top: 1px solid var(--ps-border-light); margin-top: 8px; padding-top: 14px; font-size: 1rem; color: var(--ps-text); font-weight: 700; }
.pv-summary__row--total .pv-price { font-size: 1.25rem; }
.pv-summary__row--discount { color: #1F6A3B; font-weight: 600; }

/* ── 11. Timeline commande ─────────────────────────────────────────── */
.pv-timeline { display: flex; flex-direction: column; gap: 0; }
.pv-timeline__step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 22px; }
.pv-timeline__step::before { content: ''; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: var(--ps-border-light); }
.pv-timeline__step:last-child::before { display: none; }
.pv-timeline__dot { width: 28px; height: 28px; border-radius: 50%; background: var(--ps-surface-soft); border: 2px solid var(--ps-border-light); display: flex; align-items: center; justify-content: center; color: var(--ps-text-muted); }
.pv-timeline__step.is-done .pv-timeline__dot { background: var(--ps-primary); border-color: var(--ps-primary); color: #fff; }
.pv-timeline__step.is-current .pv-timeline__dot { background: var(--ps-cta-hover); border-color: var(--ps-cta); color: #fff; }
.pv-timeline__step.is-done::before { background: var(--ps-primary); }
.pv-timeline__label { font-size: .85rem; font-weight: 600; color: var(--ps-text-soft); padding-top: 4px; }
.pv-timeline__step.is-done .pv-timeline__label, .pv-timeline__step.is-current .pv-timeline__label { color: var(--ps-text); }

/* Statuts de commande — pastilles */
.pv-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--ps-radius-pill); font-size: .74rem; font-weight: 700; }
.pv-status--pending    { background: #FEF9C3; color: #854D0E; }
.pv-status--confirmed  { background: #DBEAFE; color: #1E40AF; }
.pv-status--processing { background: #FFEDD5; color: #9A3412; }
.pv-status--shipped    { background: #EDE9FE; color: #5B21B6; }
.pv-status--delivered  { background: #DCFCE7; color: #166534; }
.pv-status--cancelled  { background: #FEE2E2; color: #991B1B; }

/* ── 12. Profil (client) ───────────────────────────────────────────── */
.pv-profile-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .pv-profile-layout { grid-template-columns: minmax(0, 1fr); } }
.pv-profile-nav { background: var(--ps-surface); border: 1px solid var(--ps-border-light); border-radius: var(--ps-radius-lg); padding: 10px; position: sticky; top: 76px; }
.pv-profile-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; min-height: 44px; border-radius: var(--ps-radius-md); font-size: .86rem; font-weight: 600; color: var(--ps-text-soft); text-decoration: none; transition: background .15s ease, color .15s ease; }
.pv-profile-nav a:hover { background: var(--ps-surface-soft); color: var(--ps-text); }
.pv-profile-nav a.is-active { background: var(--ps-primary-soft); color: var(--ps-primary-deep); }
.pv-profile-nav a svg { flex-shrink: 0; }
.pv-profile-nav__logout { color: var(--ps-error) !important; }
.pv-profile-nav hr { border: none; border-top: 1px solid var(--ps-border-light); margin: 8px 6px; }

.pv-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.pv-stat { background: var(--ps-surface); border: 1px solid var(--ps-border-light); border-radius: var(--ps-radius-lg); padding: 16px; }
.pv-stat__num { font-family: 'DM Mono', monospace; font-size: 1.4rem; font-weight: 500; color: var(--ps-text-heading); }
.pv-stat__label { font-size: .74rem; color: var(--ps-text-soft); margin-top: 2px; }

/* ── 13. Avis ──────────────────────────────────────────────────────── */
.pv-review { padding: 16px 0; border-top: 1px solid var(--ps-border-light); }
.pv-review__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pv-review__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ps-primary-soft); color: var(--ps-primary-deep); font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.pv-review__name { font-size: .85rem; font-weight: 700; color: var(--ps-text); }
.pv-review__date { font-size: .72rem; color: var(--ps-text-muted); }
.pv-review__text { font-size: .88rem; color: var(--ps-text); line-height: 1.6; margin: 6px 0 0; }
.pv-review__reply { margin-top: 10px; padding: 12px 14px; background: var(--ps-surface-soft); border-inline-start: 3px solid var(--ps-primary); border-start-end-radius: var(--ps-radius-md); border-end-end-radius: var(--ps-radius-md); font-size: .82rem; color: var(--ps-text-soft); }
.pv-stars { display: inline-flex; gap: 2px; color: #D9A406; }
.pv-stars .off { color: var(--ps-border); }

/* ── 13b. Accordéon catégories (fiche boutique) ────────────────────── */
.pv-acc { border: 1px solid var(--ps-border-light); border-radius: var(--ps-radius-lg); background: var(--ps-surface); margin-bottom: var(--ps-space-4); overflow: hidden; }
.pv-acc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; user-select: none; min-height: 56px; transition: background .15s ease; }
.pv-acc__head::-webkit-details-marker { display: none; }
.pv-acc__head:hover { background: var(--ps-surface-soft); }
.pv-acc__head:focus-visible { outline: 3px solid var(--ps-cta); outline-offset: -3px; }
.pv-acc__title { font-family: 'DM Serif Display', serif; font-size: 1.15rem; color: var(--ps-text-heading); }
.pv-acc__chevron { color: var(--ps-text-muted); transition: transform .2s ease; }
.pv-acc[open] .pv-acc__chevron { transform: rotate(180deg); }
.pv-acc[open] .pv-acc__head { border-bottom: 1px solid var(--ps-border-light); background: var(--ps-primary-soft); }
.pv-acc[open] .pv-acc__title { color: var(--ps-primary-deep); }
.pv-acc__body { padding: 18px; }

/* ── 14. États vides ───────────────────────────────────────────────── */
.pv-empty { text-align: center; padding: var(--ps-space-16) 20px; }
.pv-empty__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--ps-primary-soft); color: var(--ps-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.pv-empty__title { font-family: 'DM Serif Display', serif; font-size: 1.3rem; color: var(--ps-text-heading); margin: 0 0 8px; }
.pv-empty__text { font-size: .9rem; color: var(--ps-text-soft); margin: 0 0 20px; }

/* ── 15. Bannières promo (carousel accueil) ────────────────────────── */
.pv-banner { border-radius: var(--ps-radius-xl); overflow: hidden; background: var(--ps-primary-deep); color: #fff; position: relative; min-height: 180px; display: flex; align-items: center; }
.pv-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.pv-banner__content { position: relative; z-index: 1; padding: 28px 32px; background: linear-gradient(90deg, rgba(31,41,55,.72) 0%, rgba(31,41,55,.15) 100%); width: 100%; min-height: 180px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; }
.pv-banner__title { font-family: 'DM Serif Display', serif; font-size: 1.5rem; margin: 0; }
.pv-banner__dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.pv-banner__dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: none; background: var(--ps-border); cursor: pointer; }
.pv-banner__dots button.is-active { background: var(--ps-primary); }

/* ── 15b. Authentification ─────────────────────────────────────────── */
.pv-auth { min-height: 100vh; background: var(--ps-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; }
.pv-auth__brand { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; margin-bottom: 22px; }
.pv-auth__brand-name { font-family: 'DM Serif Display', serif; font-size: 1.7rem; color: var(--ps-primary); }
.pv-auth__brand-name em { font-style: italic; }
.pv-auth__brand-tag { font-size: .72rem; color: var(--ps-text-soft); letter-spacing: .04em; }
.pv-auth__card { width: 100%; max-width: 460px; background: var(--ps-surface); border: 1px solid var(--ps-border-light); border-radius: var(--ps-radius-xl); box-shadow: var(--ps-shadow-md); padding: 32px 30px; }
.pv-auth__card--wide { max-width: 720px; }
.pv-auth__title { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.5rem; color: var(--ps-text-heading); margin: 0 0 6px; text-align: center; }
.pv-auth__sub { font-size: .88rem; color: var(--ps-text-soft); text-align: center; margin: 0 0 22px; line-height: 1.55; }
.pv-auth__divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ps-text-muted); font-size: .76rem; }
.pv-auth__divider::before, .pv-auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--ps-border-light); }
.pv-auth__google { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; width: 100%; border: 1.5px solid var(--ps-border-light); border-radius: var(--ps-radius-lg); background: #fff; color: var(--ps-text); font-size: .88rem; font-weight: 600; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.pv-auth__google:hover { border-color: var(--ps-primary); background: var(--ps-primary-soft); }
.pv-auth__footer { text-align: center; font-size: .84rem; color: var(--ps-text-soft); margin-top: 20px; }
.pv-auth__footer a { color: var(--ps-primary); font-weight: 700; text-decoration: none; }
.pv-auth__footer a:hover { text-decoration: underline; }
.pv-auth__back { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ps-text-soft); text-decoration: none; margin-top: 18px; min-height: 44px; }
.pv-auth__back:hover { color: var(--ps-primary); }
.pv-check { display: flex; align-items: flex-start; gap: 10px; font-size: .82rem; color: var(--ps-text); cursor: pointer; line-height: 1.5; }
.pv-check input { accent-color: var(--ps-primary); width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; }

/* Choix de compte (acheteur / commerçant) */
.pv-choice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 640px) { .pv-choice { grid-template-columns: minmax(0, 1fr); } }
.pv-choice__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 20px; border: 1.5px solid var(--ps-border-light); border-radius: var(--ps-radius-lg); background: var(--ps-surface); text-decoration: none; color: inherit; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.pv-choice__card:hover { border-color: var(--ps-primary); transform: translateY(-3px); box-shadow: var(--ps-shadow-md); }
.pv-choice__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--ps-primary-soft); color: var(--ps-primary); display: flex; align-items: center; justify-content: center; }
.pv-choice__title { font-size: 1.02rem; font-weight: 700; color: var(--ps-text-heading); }
.pv-choice__desc { font-size: .8rem; color: var(--ps-text-soft); line-height: 1.5; }

/* Étapes (inscription commerçant) */
.pv-steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 24px; }
.pv-steps__dot { width: 32px; height: 32px; border-radius: 50%; background: var(--ps-surface-soft); border: 2px solid var(--ps-border-light); color: var(--ps-text-muted); font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: 'DM Mono', monospace; }
.pv-steps__dot.is-active { background: var(--ps-primary); border-color: var(--ps-primary); color: #fff; }
.pv-steps__dot.is-done { background: var(--ps-primary-soft); border-color: var(--ps-primary); color: var(--ps-primary-deep); }
.pv-steps__line { width: 36px; height: 2px; background: var(--ps-border-light); }

/* ── 16. Divers ────────────────────────────────────────────────────── */
.pv-divider { border: none; border-top: 1px solid var(--ps-border-light); margin: var(--ps-space-6) 0; }
.pv-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--ps-radius-md); font-size: .82rem; line-height: 1.5; }
.pv-note--info { background: #EFF6FF; color: #1E40AF; }
.pv-note--warn { background: var(--ps-cta-soft); color: var(--ps-cta-deep); }
.pv-note--success { background: #E7F4EC; color: #1F6A3B; }
.pv-note svg { flex-shrink: 0; margin-top: 1px; }

.pv-pagination { display: flex; justify-content: center; margin-top: var(--ps-space-8); }

@media (prefers-reduced-motion: reduce) {
  .pv-shop-card, .pv-product-card, .pv-btn, .pv-add-btn { transition: none; }
  .pv-shop-card:hover, .pv-product-card:hover, .pv-btn--cta:hover { transform: none; }
}

/* Mobile */
@media (max-width: 768px) {
  .pv-section { padding: var(--ps-space-8) 0; }
  .pv-hero { padding: var(--ps-space-10) 0 var(--ps-space-8); }
  .pv-grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pv-cart-item { grid-template-columns: 56px minmax(0, 1fr); }
  .pv-cart-item__img { width: 56px; height: 56px; }
  .pv-cart-item__end { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .pv-page { padding-bottom: 76px; } /* espace pour la bottom nav mobile */
}

/* ════════════════════════════════════════════════════════════════════
   LOT 1 — FONDATIONS DE LA REFONTE PUBLIQUE
   1. Tokens manquants (typo, cible tactile, focus)
   2. Police arabe réellement appliquée
   3. Support RTL (darija incluse)
   4. Accessibilité : focus, cibles 44px, mouvement réduit
   5. Primitives d'état : squelette, bouton occupé
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens manquants ──────────────────────────────────────────── */
:root {
  /* Échelle typographique — base 16px (sous 16px iOS zoome au focus) */
  --ps-text-xs:   0.75rem;  /* 12 — méta, légendes uniquement */
  --ps-text-sm:   0.875rem; /* 14 — libellés, texte secondaire */
  --ps-text-base: 1rem;     /* 16 — corps, minimum sur mobile */
  --ps-text-lg:   1.125rem; /* 18 */
  --ps-text-xl:   1.25rem;  /* 20 */
  --ps-text-2xl:  1.5rem;   /* 24 */
  --ps-text-3xl:  2rem;     /* 32 */
  --ps-text-4xl:  2.5rem;   /* 40 */

  --ps-leading-tight: 1.2;  /* titres */
  --ps-leading-base:  1.5;  /* corps */
  --ps-leading-loose: 1.7;  /* texte long */

  /* Cible tactile — Apple HIG 44pt / Material 48dp */
  --ps-touch: 44px;
  --ps-touch-lg: 48px;

  /* Anneau de focus — jamais supprimé */
  --ps-focus-ring: 2px solid var(--ps-primary);
  --ps-focus-offset: 2px;

  /* Paires sémantiques : surface + texte dessus, toutes vérifiées ≥ 4.5:1 */
  --ps-success-surface: var(--ps-success-bg);
  --ps-success-on: #14532D;
  --ps-error-surface: var(--ps-error-bg);
  --ps-error-on: #991B1B;
  --ps-warning-surface: var(--ps-warning-bg);
  --ps-warning-on: #92400E;
  --ps-info-surface: var(--ps-cat-blue-bg);
  --ps-info-on: #075985;
}

/* ── 2. Police arabe : Cairo était chargée mais jamais appliquée ──── */
/* Le sélecteur porte sur lang^="ar" pour couvrir ar ET ar-MA (darija). */
[lang^="ar"] body,
[lang^="ar"] button,
[lang^="ar"] input,
[lang^="ar"] select,
[lang^="ar"] textarea {
  font-family: 'Cairo', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── 3. RTL ───────────────────────────────────────────────────────── */
/* Le reste du CSS utilise des propriétés logiques et se retourne seul.
   Ne sont listés ici que les cas qui n'ont pas d'équivalent logique. */

/* 3.1 Icônes directionnelles : on retourne le dessin, pas la position */
[dir="rtl"] .pv-carousel__arrow svg,
[dir="rtl"] .pv-arrow svg,
[dir="rtl"] .ps-breadcrumb__sep svg,
[dir="rtl"] .pv-back svg,
[dir="rtl"] [data-flip-rtl] {
  transform: scaleX(-1);
}

/* 3.2 background-position n'a pas de forme logique */
[dir="rtl"] select.input,
[dir="rtl"] .pv-select {
  background-position: left 0.75rem center;
}

/* 3.3 Défilements horizontaux : on repart de la fin */
[dir="rtl"] .pv-scroller,
[dir="rtl"] .pv-chips,
[dir="rtl"] .pv-cats {
  direction: rtl;
}

/* 3.4 Ombres portées directionnelles */
[dir="rtl"] .pv-card--lifted {
  box-shadow: -4px 4px 16px rgba(26, 22, 18, 0.08);
}

/* 3.5 Les nombres et les prix restent en lecture latine même en arabe */
[dir="rtl"] .pv-price,
[dir="rtl"] .pv-variant__price,
[dir="rtl"] .pv-sheet__opt-meta,
[dir="rtl"] .pv-cart-item__unit,
[dir="rtl"] .pv-price--old,
[dir="rtl"] .pv-price--unit,
[dir="rtl"] .ps-price,
[dir="rtl"] .pv-qty__value,
[dir="rtl"] time,
[dir="rtl"] [data-numeric] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── 4. Accessibilité ─────────────────────────────────────────────── */

/* 4.1 Focus visible partout, au clavier uniquement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--ps-focus-ring);
  outline-offset: var(--ps-focus-offset);
  border-radius: var(--ps-radius-sm);
}

/* 4.2 Cibles tactiles — plancher de 44px sur tout ce qui se tape */
.pv-qty__btn,
.pv-dot,
.pv-icon-btn,
.pv-carousel__arrow,
.pv-tab {
  min-width: var(--ps-touch);
  min-height: var(--ps-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

/* Un point de carrousel reste visuellement petit mais se tape sur 44px */
.pv-dot {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.pv-dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: var(--ps-radius-pill);
  background: var(--ps-border);
  transition: background var(--ps-duration-sm) var(--ps-ease-out),
              transform var(--ps-duration-sm) var(--ps-ease-out);
}
.pv-dot[aria-current="true"]::before,
.pv-dot.is-active::before {
  background: var(--ps-primary);
  transform: scale(1.3);
}

/* Champs de saisie : 16px minimum et hauteur confortable */
input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], input[type="search"], input[type="password"],
select, textarea {
  font-size: max(var(--ps-text-base), 1rem);
  min-height: var(--ps-touch-lg);
}

/* 4.3 État désactivé lisible et non cliquable */
button[disabled], .pv-btn[disabled], .pv-btn.is-disabled,
[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* 4.4 Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 5. Primitives d'état ─────────────────────────────────────────── */

/* 5.1 Squelette — mêmes dimensions que le contenu final (pas de CLS) */
.pv-skel {
  position: relative;
  overflow: hidden;
  background: var(--ps-surface-soft);
  border-radius: var(--ps-radius-md);
}
.pv-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
              transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: pvSkel 1.2s infinite;
}
[dir="rtl"] .pv-skel::after { animation-name: pvSkelRtl; }
@keyframes pvSkel    { 100% { transform: translateX(100%); } }
@keyframes pvSkelRtl { 100% { transform: translateX(-200%); } }

.pv-skel--text  { height: 1em; margin-block: 0.35em; }
.pv-skel--title { height: 1.4em; width: 60%; }
.pv-skel--img   { aspect-ratio: 4 / 3; width: 100%; }

/* 5.2 Bouton occupé — verrou visuel contre la double soumission */
.pv-btn[data-busy="true"] {
  pointer-events: none;
  opacity: 0.75;
}
.pv-btn[data-busy="true"]::before {
  content: '';
  width: 1em;
  height: 1em;
  margin-inline-end: 0.5em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pvSpin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes pvSpin { 100% { transform: rotate(360deg); } }

/* 5.3 Région d'annonce pour lecteurs d'écran */
.pv-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════════
   LOT 2 — CHECKOUT : progression, groupes de champs, barre collante
   ════════════════════════════════════════════════════════════════════ */

/* ── Indicateur d'étapes ──────────────────────────────────────────── */
.pv-steps {
  display: flex;
  gap: var(--ps-space-2);
  list-style: none;
  margin: 0 0 var(--ps-space-5);
  padding: 0;
  counter-reset: step;
}
.pv-steps__item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--ps-space-2);
  padding: var(--ps-space-3);
  background: var(--ps-surface);
  border: 1px solid var(--ps-border-light);
  border-radius: var(--ps-radius-md);
  font-size: var(--ps-text-sm);
  color: var(--ps-text-soft);
  min-height: var(--ps-touch);
}
.pv-steps__num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--ps-radius-pill);
  background: var(--ps-primary-soft);
  color: var(--ps-primary-deep);
  font-weight: 700;
  font-size: var(--ps-text-xs);
}
.pv-steps__item[aria-current="step"] {
  border-color: var(--ps-primary);
  color: var(--ps-text);
  font-weight: 600;
}
.pv-steps__item[aria-current="step"] .pv-steps__num {
  background: var(--ps-primary);
  color: #fff;
}
@media (max-width: 600px) {
  .pv-steps__label { display: none; }
  .pv-steps__item { flex: 0 0 auto; justify-content: center; }
}

/* Pastille de numéro dans les titres de carte */
.pv-step-badge {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-inline-end: var(--ps-space-1);
  border-radius: var(--ps-radius-pill);
  background: var(--ps-primary);
  color: #fff;
  font-size: var(--ps-text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── fieldset utilisé comme carte : neutraliser le style navigateur ── */
.pv-card--step { border: 1px solid var(--ps-border-light); min-inline-size: 0; }
fieldset.pv-card--step { margin-inline: 0; padding-block-start: var(--ps-space-4); }
fieldset.pv-card--step > legend {
  padding-inline: 0;
  display: flex;
  align-items: center;
  gap: var(--ps-space-2);
}

/* ── Groupes d'options radio ──────────────────────────────────────── */
.pv-options { display: grid; gap: var(--ps-space-3); }
.pv-option {
  display: flex;
  align-items: flex-start;
  gap: var(--ps-space-3);
  padding: var(--ps-space-3) var(--ps-space-4);
  min-height: var(--ps-touch);
  border: 1.5px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  cursor: pointer;
  transition: border-color var(--ps-duration-sm) var(--ps-ease-out),
              background var(--ps-duration-sm) var(--ps-ease-out);
}
.pv-option:hover { border-color: var(--ps-primary-light); background: var(--ps-surface-soft); }
.pv-option input[type="radio"] {
  width: 20px; height: 20px;
  margin-block-start: 2px;
  accent-color: var(--ps-primary);
  flex-shrink: 0;
}
.pv-option:has(input:checked) {
  border-color: var(--ps-primary);
  background: var(--ps-primary-soft);
}
.pv-option:has(input:focus-visible) {
  outline: var(--ps-focus-ring);
  outline-offset: var(--ps-focus-offset);
}
.pv-option__title { display: block; font-weight: 600; font-size: var(--ps-text-sm); color: var(--ps-text); }
.pv-option__desc  { display: block; font-size: var(--ps-text-xs); color: var(--ps-text-soft); margin-block-start: 2px; line-height: var(--ps-leading-base); }

/* ── Libellés et champs ───────────────────────────────────────────── */
.pv-label {
  display: block;
  font-weight: 600;
  font-size: var(--ps-text-sm);
  color: var(--ps-text-heading);
  margin-block-end: var(--ps-space-2);
}
.pv-label--sm { font-size: var(--ps-text-xs); }
.pv-req { color: var(--ps-error); margin-inline-start: 2px; }
.pv-help { font-size: var(--ps-text-xs); color: var(--ps-text-soft); margin-block-start: var(--ps-space-2); }
.pv-error {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--ps-text-xs);
  font-weight: 600;
  color: var(--ps-error-on);
  margin-block-start: var(--ps-space-2);
}
.pv-error::before {
  content: '';
  width: 14px; height: 14px;
  flex-shrink: 0;
  background: currentColor;
  /* Le message d'erreur ne repose pas que sur la couleur : une icône l'accompagne. */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Cline x1='12' y1='16.5' x2='12.01' y2='16.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pv-errors-list { margin: var(--ps-space-2) 0 0; padding-inline-start: var(--ps-space-4); font-size: var(--ps-text-sm); }
.pv-errors-list a { color: var(--ps-error-on); }
[aria-invalid="true"] {
  border-color: var(--ps-error) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}

/* ── Détail boutique ──────────────────────────────────────────────── */
.pv-shop-totals {
  padding: var(--ps-space-3) var(--ps-space-4);
  border-block-start: 1px dashed var(--ps-border-light);
  font-size: var(--ps-text-xs);
  color: var(--ps-text-soft);
  display: flex;
  justify-content: space-between;
  gap: var(--ps-space-3);
  flex-wrap: wrap;
}
.pv-shop-field {
  margin: 0;
  padding: var(--ps-space-3) var(--ps-space-4) var(--ps-space-4);
  border-block-start: 1px solid var(--ps-border-light);
}
.pv-slot-row { display: flex; gap: var(--ps-space-3); flex-wrap: wrap; }
.pv-slot-col { flex: 1; min-width: 150px; }

/* ── Résumé collant ───────────────────────────────────────────────── */
@media (min-width: 901px) {
  .pv-summary { position: sticky; top: calc(var(--ps-header-h) + var(--ps-space-4)); align-self: start; }
  .pv-stickybar { display: none; }
}

/* Barre basse mobile — le total et l'action restent atteignables */
.pv-stickybar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--ps-z-sticky);
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-3);
  padding: var(--ps-space-3) var(--ps-gutter);
  padding-bottom: calc(var(--ps-space-3) + env(safe-area-inset-bottom));
  background: var(--ps-surface);
  border-block-start: 1px solid var(--ps-border);
  box-shadow: var(--ps-shadow-lg);
}
@media (max-width: 900px) {
  .pv-stickybar { display: flex; }
  /* Le contenu ne doit pas finir caché sous la barre */
  .pv-page { padding-bottom: 96px; }
  /* Le bouton du résumé n'est masqué QUE si une barre basse le remplace
     (page de validation). Dans le panier il n'y a pas de barre : le bouton
     « Commander » disparaissait donc entièrement sur téléphone. */
  .pv-page:has(.pv-stickybar) .pv-summary .pv-btn--cta { display: none; }
}
/* Sous 768 px la barre de navigation du bas (64 px) occupe le bas de l'écran :
   la barre d'action se pose au-dessus d'elle, sinon elle est recouverte. */
@media (max-width: 767px) {
  .pv-stickybar {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--ps-space-3);
    z-index: 101;
  }
  .pv-page:has(.pv-stickybar) { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
}
.pv-stickybar__total { display: flex; flex-direction: column; line-height: 1.15; }
.pv-stickybar__label { font-size: var(--ps-text-xs); color: var(--ps-text-soft); }
.pv-stickybar .pv-btn--cta { min-height: var(--ps-touch-lg); padding-inline: var(--ps-space-6); }

/* Le focus clavier doit battre les `outline:none` posés sur :focus plus haut
   dans le fichier (spécificité .pv-input:focus > input:focus-visible). */
.pv-input:focus-visible, .pv-select:focus-visible, .pv-textarea:focus-visible,
.pv-btn:focus-visible, .pv-option:has(input:focus-visible), a.pv-btn:focus-visible {
  outline: var(--ps-focus-ring);
  outline-offset: var(--ps-focus-offset);
}

/* ════════════════════════════════════════════════════════════════════
   LOT 3 — PANIER : quantité optimiste, annulation, lignes lisibles
   ════════════════════════════════════════════════════════════════════ */

/* Le champ de quantité remplace le <span> : il est saisissable au clavier
   tout en gardant l'apparence du compteur. */
.pv-qty__value {
  width: 44px;
  min-height: var(--ps-touch);
  border: 0;
  background: transparent;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: var(--ps-text-base);
  font-variant-numeric: tabular-nums;
  color: var(--ps-text);
  padding: 0;
}
.pv-qty__value:focus-visible {
  outline: var(--ps-focus-ring);
  outline-offset: -2px;
  border-radius: var(--ps-radius-sm);
}
.pv-qty__btn {
  border: 0;
  background: transparent;
  color: var(--ps-primary);
  font-size: var(--ps-text-lg);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--ps-duration-sm) var(--ps-ease-out);
}
.pv-qty__btn:hover:not(:disabled) { background: var(--ps-primary-soft); }
.pv-qty__btn:active:not(:disabled) { transform: scale(0.94); }
.pv-qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Les prix de ligne changent de valeur sans changer de largeur */
.pv-price, .pv-cart-item__unit { font-variant-numeric: tabular-nums; }

/* ── Bandeau d'information avec annulation ────────────────────────── */
.pv-toast {
  position: fixed;
  inset-inline: var(--ps-gutter);
  bottom: calc(var(--ps-space-4) + env(safe-area-inset-bottom));
  z-index: var(--ps-z-toast);
  margin-inline: auto;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-4);
  padding: var(--ps-space-3) var(--ps-space-4);
  background: var(--ps-text);
  color: #fff;
  border-radius: var(--ps-radius-md);
  box-shadow: var(--ps-shadow-lg);
  font-size: var(--ps-text-sm);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--ps-duration-md) var(--ps-ease-out),
              transform var(--ps-duration-md) var(--ps-ease-out);
}
.pv-toast.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.pv-toast__undo {
  flex-shrink: 0;
  min-height: var(--ps-touch);
  padding-inline: var(--ps-space-4);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--ps-radius-sm);
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.pv-toast__undo:hover { background: rgba(255, 255, 255, 0.14); }
.pv-toast__undo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Une ligne retirée disparaît sans laisser de trou clignotant */
.pv-cart-item[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   LOT 3 — FICHE PRODUIT : ordre de décision, déclinaisons tangibles
   ════════════════════════════════════════════════════════════════════ */
.pv-product-info { display: flex; flex-direction: column; gap: var(--ps-space-5); }
.pv-product-brand { color: var(--ps-primary); font-weight: 700; font-size: var(--ps-text-sm); margin-block-end: -12px; }
.pv-product-title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--ps-text-heading);
  margin: 0;
  line-height: var(--ps-leading-tight);
}
.pv-product-price { padding: var(--ps-space-5) var(--ps-space-6); margin: 0; }
.pv-product-price__row { display: flex; align-items: baseline; gap: var(--ps-space-3); flex-wrap: wrap; }
.pv-product-price__note { margin: var(--ps-space-2) 0 0; font-size: var(--ps-text-sm); font-weight: 700; color: var(--ps-primary); }
.pv-price--xl { font-size: var(--ps-text-3xl); }
.pv-price--lg { font-size: var(--ps-text-lg); }

/* ── Déclinaisons : de vrais boutons radio, 44 px, état visible sans JS ── */
.pv-variants { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.pv-variants > legend { padding: 0; margin-block-end: var(--ps-space-3); }
.pv-variants__grid { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }
.pv-variant {
  min-height: var(--ps-touch);
  padding: var(--ps-space-2) var(--ps-space-4);
  border: 2px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  background: var(--ps-surface);
  font-family: inherit;
  font-size: var(--ps-text-sm);
  color: var(--ps-text);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--ps-duration-sm) var(--ps-ease-out),
              background var(--ps-duration-sm) var(--ps-ease-out),
              transform var(--ps-duration-sm) var(--ps-ease-out);
}
.pv-variant:hover:not(:disabled) { border-color: var(--ps-primary-light); }
.pv-variant:active:not(:disabled) { transform: scale(0.97); }
/* L'état choisi ne repose pas que sur la couleur : bordure épaisse + coche */
.pv-variant.is-selected,
.pv-variant[aria-checked="true"] {
  border-color: var(--ps-primary);
  background: var(--ps-primary-soft);
  font-weight: 700;
}
.pv-variant.is-selected .pv-variant__label::after,
.pv-variant[aria-checked="true"] .pv-variant__label::after {
  content: ' ✓';
  color: var(--ps-primary);
}
.pv-variant:disabled, .pv-variant.is-out {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--ps-surface-soft);
  text-decoration-line: line-through;
  text-decoration-color: var(--ps-text-muted);
}
.pv-variant__label { display: block; }
.pv-variant__price { display: block; font-size: var(--ps-text-xs); color: var(--ps-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-variant__state { display: block; font-size: var(--ps-text-xs); font-weight: 600; }
.pv-variant__state--out { color: var(--ps-error-on); }
.pv-variant__state--low { color: var(--ps-warning-on); }

.pv-product-stock { margin: 0; }
.pv-product-buy { border-block-start: 1px solid var(--ps-border-light); padding-block-start: var(--ps-space-5); }
.pv-product-buy__row { display: flex; align-items: center; gap: var(--ps-space-4); margin-block-end: var(--ps-space-4); }
.pv-product-block { margin: 0; }
.pv-product-h2 { font-size: var(--ps-text-lg); font-weight: 700; color: var(--ps-text-heading); margin: 0 0 var(--ps-space-2); }
.pv-product-desc { color: var(--ps-text-soft); line-height: var(--ps-leading-loose); margin: 0; max-width: 68ch; }

/* ── Repli des caractéristiques ───────────────────────────────────── */
.pv-details { border: 1px solid var(--ps-border-light); border-radius: var(--ps-radius-md); }
.pv-details__summary {
  min-height: var(--ps-touch);
  display: flex; align-items: center;
  padding: var(--ps-space-3) var(--ps-space-4);
  font-weight: 700; font-size: var(--ps-text-sm);
  color: var(--ps-text-heading);
  cursor: pointer;
}
.pv-details[open] .pv-details__summary { border-block-end: 1px solid var(--ps-border-light); }
.pv-specs { display: flex; flex-wrap: wrap; gap: var(--ps-space-3); padding: var(--ps-space-4); margin: 0; }
.pv-spec { background: var(--ps-surface-soft); border-radius: var(--ps-radius-sm); padding: var(--ps-space-2) var(--ps-space-4); }
.pv-spec__key { font-size: var(--ps-text-xs); color: var(--ps-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pv-spec__val { font-size: var(--ps-text-sm); font-weight: 700; color: var(--ps-text); margin: 0; }

/* Sur mobile, le bouton d'ajout reste atteignable */
@media (max-width: 900px) {
  .pv-product-buy {
    position: sticky;
    bottom: 0;
    z-index: var(--ps-z-sticky);
    background: var(--ps-surface);
    padding: var(--ps-space-4) 0 calc(var(--ps-space-3) + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(26, 22, 18, 0.06);
  }
}

/* ════════════════════════════════════════════════════════════════════
   LOT 4 — LISTE DES BOUTIQUES : filtrer avant de parcourir
   ════════════════════════════════════════════════════════════════════ */
.pv-filterbar {
  background: var(--ps-surface);
  border-block-end: 1px solid var(--ps-border-light);
  padding-block: var(--ps-space-4);
  position: sticky;
  top: var(--ps-header-h-mobile);
  z-index: var(--ps-z-sticky);
}
@media (min-width: 769px) { .pv-filterbar { top: var(--ps-header-h); } }

.pv-filterbar__form { display: flex; gap: var(--ps-space-3); flex-wrap: wrap; align-items: center; }
.pv-filterbar__selects { display: flex; gap: var(--ps-space-2); flex-wrap: wrap; align-items: center; }
.pv-filterbar__recap {
  margin: var(--ps-space-3) 0 0;
  font-size: var(--ps-text-sm);
  color: var(--ps-text-soft);
  display: flex; gap: var(--ps-space-3); align-items: center; flex-wrap: wrap;
}

/* Champ de recherche : 48 px et 16 px, sinon iOS zoome au focus */
.pv-searchbar {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: var(--ps-space-2);
  background: var(--ps-surface-soft);
  border: 1.5px solid transparent;
  border-radius: var(--ps-radius-pill);
  padding-inline: var(--ps-space-4);
  min-height: var(--ps-touch-lg);
  color: var(--ps-text-muted);
}
.pv-searchbar:focus-within { border-color: var(--ps-primary); background: var(--ps-surface); }
.pv-searchbar input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: var(--ps-text-base);
  color: var(--ps-text);
  min-height: var(--ps-touch);
  min-width: 0;
}
.pv-select--inline {
  width: auto;
  min-height: var(--ps-touch-lg);
  padding-inline: var(--ps-space-4);
  border-radius: var(--ps-radius-pill);
  background: var(--ps-surface-soft);
  border: 1.5px solid transparent;
  font-size: var(--ps-text-sm);
}

.pv-chips { display: flex; gap: var(--ps-space-2); align-items: center; overflow-x: auto; padding-block: var(--ps-space-3) 2px; scrollbar-width: thin; }
.pv-chips__sep { flex-shrink: 0; width: 1px; height: 24px; background: var(--ps-border); }
.pv-chip--strong { font-weight: 700; }
.pv-chip__x { margin-inline-start: var(--ps-space-1); font-weight: 700; }
.pv-chip[aria-current="true"], .pv-chip.is-active { background: var(--ps-primary); color: #fff; border-color: var(--ps-primary); }

/* Badge d'état : position logique, et un pictogramme double la couleur */
.pv-card-badge {
  position: absolute;
  top: var(--ps-space-3);
  inset-inline-end: var(--ps-space-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pv-shop-card__desc {
  font-size: var(--ps-text-sm);
  color: var(--ps-text-soft);
  margin: 0;
  line-height: var(--ps-leading-base);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════
   LOT 5 — FICHE BOUTIQUE : feuille de sélection des déclinaisons
   ════════════════════════════════════════════════════════════════════ */
.pv-add-btn--choose {
  width: auto;
  min-height: var(--ps-touch);
  padding-inline: var(--ps-space-4);
  font-size: var(--ps-text-sm);
  font-weight: 700;
  white-space: nowrap;
}

.pv-noscroll { overflow: hidden; }

.pv-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--ps-z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Le flou signale que l'arrière-plan est écarté, il n'est pas décoratif. */
  background: rgba(26, 22, 18, 0.5);
  backdrop-filter: blur(2px);
  animation: pvSheetIn var(--ps-duration-md) var(--ps-ease-out);
}
.pv-sheet[hidden] { display: none; }
@media (min-width: 640px) { .pv-sheet { align-items: center; } }
@keyframes pvSheetIn { from { opacity: 0; } to { opacity: 1; } }

.pv-sheet__panel {
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--ps-surface);
  border-start-start-radius: var(--ps-radius-xl);
  border-start-end-radius: var(--ps-radius-xl);
  animation: pvSheetUp var(--ps-duration-md) var(--ps-ease-out);
}
@media (min-width: 640px) { .pv-sheet__panel { border-radius: var(--ps-radius-xl); } }
@keyframes pvSheetUp { from { transform: translateY(18px); } to { transform: none; } }

.pv-sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ps-space-3);
  padding: var(--ps-space-4) var(--ps-space-5);
  border-block-end: 1px solid var(--ps-border-light);
}
.pv-sheet__close {
  min-width: var(--ps-touch); min-height: var(--ps-touch);
  border: 0; background: none; cursor: pointer;
  font-size: var(--ps-text-2xl); line-height: 1;
  color: var(--ps-text-soft);
  border-radius: var(--ps-radius-sm);
}
.pv-sheet__close:hover { background: var(--ps-surface-soft); }

.pv-sheet__body { overflow-y: auto; padding: var(--ps-space-3); display: grid; gap: var(--ps-space-2); }
.pv-sheet__opt {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ps-space-3);
  min-height: var(--ps-touch-lg);
  padding: var(--ps-space-3) var(--ps-space-4);
  border: 2px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  background: var(--ps-surface);
  font-family: inherit;
  font-size: var(--ps-text-sm);
  color: var(--ps-text);
  text-align: start;
  cursor: pointer;
}
.pv-sheet__opt:hover:not(:disabled) { border-color: var(--ps-primary-light); }
.pv-sheet__opt.is-selected, .pv-sheet__opt[aria-checked="true"] {
  border-color: var(--ps-primary);
  background: var(--ps-primary-soft);
  font-weight: 700;
}
.pv-sheet__opt.is-selected .pv-sheet__opt-label::after,
.pv-sheet__opt[aria-checked="true"] .pv-sheet__opt-label::after { content: ' ✓'; color: var(--ps-primary); }
.pv-sheet__opt:disabled, .pv-sheet__opt.is-out {
  opacity: 0.5; cursor: not-allowed; background: var(--ps-surface-soft);
}
.pv-sheet__opt-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.pv-sheet__opt-state { font-size: var(--ps-text-xs); font-weight: 700; }
.pv-sheet__opt-state--out { color: var(--ps-error-on); }
.pv-sheet__opt-state--low { color: var(--ps-warning-on); }
.pv-sheet__foot {
  padding: var(--ps-space-4);
  padding-bottom: calc(var(--ps-space-4) + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--ps-border-light);
}

/* ════════════════════════════════════════════════════════════════════
   LOT 4 — ACCUEIL : repli du mode d'emploi, newsletter
   ════════════════════════════════════════════════════════════════════ */
.pv-howto {
  border: 1px solid var(--ps-border-light);
  border-radius: var(--ps-radius-lg);
  background: var(--ps-surface);
}
.pv-howto__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-space-4);
  min-height: var(--ps-touch-lg);
  padding: var(--ps-space-4) var(--ps-space-5);
  cursor: pointer;
  list-style: none;
}
.pv-howto__summary::-webkit-details-marker { display: none; }
.pv-howto__summary strong { display: block; font-size: var(--ps-text-lg); color: var(--ps-text-heading); }
.pv-howto__sub { display: block; font-size: var(--ps-text-sm); color: var(--ps-text-soft); }
.pv-howto__chevron { flex-shrink: 0; transition: transform var(--ps-duration-md) var(--ps-ease-out); }
.pv-howto[open] .pv-howto__chevron { transform: rotate(180deg); }
.pv-howto[open] .pv-howto__summary { border-block-end: 1px solid var(--ps-border-light); }
.pv-howto .pv-home-steps { padding: var(--ps-space-5); }

/* ── Newsletter ───────────────────────────────────────────────────
   Déplacée en entier dans premium.css : les règles vivaient ici, un
   correctif footer plus bas dans ce même fichier, et un troisième jeu
   dans premium.css. Une seule source désormais. */

.pv-note--ok { flex-basis: 100%; background: var(--ps-success-surface); color: var(--ps-success-on); }

/* Recherche centrée (page catalogue) */
.pv-searchbar--centered { max-width: 420px; margin: 0 auto var(--ps-space-8); background: var(--ps-surface); border-color: var(--ps-border-light); }
.pv-cat-card[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   CORRECTIFS APRÈS MISE EN LIGNE — régressions de mes propres règles
   ════════════════════════════════════════════════════════════════════ */

/* 1. Pastilles de catégorie écrasées ──────────────────────────────────
   J'avais posé `flex-wrap: nowrap` + `overflow-x: auto` sur .pv-chips en
   pensant à la barre de filtres des boutiques. Sur l'accueil, les pastilles
   gardaient `flex-shrink: 1` : dans un conteneur nowrap elles se réduisaient
   toutes à leur min-width de 44 px, et le libellé passait sous l'émoji.
   Elles doivent défiler, pas rétrécir. */
.pv-chips > * { flex: 0 0 auto; }
.pv-chips .pv-chip,
.pv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  /* `auto` et non `0` : pour un élément flex, min-width:auto signifie
     « jamais en dessous de sa largeur min-content ». C'est exactement la
     protection que mon plancher de 44 px avait supprimée. */
  min-width: auto;
  min-height: var(--ps-touch);
  padding-inline: var(--ps-space-4);
  white-space: nowrap;
  touch-action: manipulation;
}
/* Sur les écrans confortables, pas de défilement : les pastilles reviennent
   à la ligne, c'est plus lisible qu'une rangée qui fuit vers la droite. */
@media (min-width: 900px) {
  .pv-chips { flex-wrap: wrap; overflow-x: visible; }
}
/* Masque de dégradé : on voit qu'il reste des pastilles à droite */
.pv-chips {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pv-chips::-webkit-scrollbar { display: none; }
.pv-chips > * { scroll-snap-align: start; }

/* 2. Bannière promo — plus d'aspect-ratio imposé ─────────────────────
   `aspect-ratio: 16/7` fixait la hauteur à 147 px sur un écran de 375 px,
   alors que le contenu en réclame 450 : tout était coupé. Et sur desktop
   elle devenait inutilement haute. La hauteur est désormais réservée par
   palier — le saut de chargement est évité sans rien tronquer. */
.pv-banner--premium { aspect-ratio: auto !important; }
/* Plus de max-height : la bannière porte désormais un article réel, son
   prix et d'autres promotions — une hauteur plafonnée la tronquait. */
@media (min-width: 981px) { .pv-banner--premium { min-height: 280px; } }

/* 3. En-tête qui déborde sur mobile ──────────────────────────────────
   .ps-header__actions faisait 208 px de large dans 375 px : le bouton
   « Connexion » sortait de l'écran et créait un défilement horizontal. */
@media (max-width: 480px) {
  .ps-header__actions { gap: var(--ps-space-2); min-width: 0; }
  .ps-header__login {
    padding-inline: var(--ps-space-3);
    font-size: var(--ps-text-sm);
    white-space: nowrap;
  }
  .ps-header__inner, .ps-header__actions { flex-wrap: nowrap; }
  .ps-header__tagline { display: none; }
}
/* Rien ne doit pouvoir élargir la page */
html, body { overflow-x: hidden; max-width: 100%; }
.ps-bottom-nav { max-width: 100vw; box-sizing: border-box; }

/* 4. Contraste du hero ───────────────────────────────────────────────
   Le texte était en blanc à 88 % sur un dégradé qui s'éclaircit jusqu'à
   #8FA05A : environ 2,9:1, sous le seuil de 4,5:1. On assombrit la fin du
   dégradé, on repasse le texte en blanc plein, et le halo clair est écarté
   de la zone de lecture. */
.pv-hero {
  background-image: linear-gradient(135deg,
      #2E3819 0%,
      var(--ps-primary-deep) 45%,
      #55632F 100%) !important;
}
.pv-hero__text, .pv-hero p { color: #FFFFFF !important; }
.pv-hero__title { color: #FFFFFF; }
.pv-hero__eyebrow { background: rgba(0, 0, 0, 0.28); color: #FFFFFF; }
/* Le halo décoratif reste, mais derrière le texte et très atténué */
.pv-hero::before, .pv-hero::after { opacity: 0.35; }
.pv-hero__inner, .pv-hero > * { position: relative; z-index: 1; }

/* Rangée de statistiques : 3 colonnes égales plutôt qu'un orphelin */
@media (max-width: 640px) {
  .pv-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-space-3); text-align: center; }
  .pv-hero__stats > * { min-width: 0; }
}

/* 5. Vignette de carte boutique — le visuel remplit le cadre ─────────── */
.pv-shop-card__banner { overflow: hidden; }
.pv-shop-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  filter: saturate(0.85);
}
.pv-shop-card__logo {
  z-index: 2;
  box-shadow: var(--ps-shadow-sm);
  border: 2px solid var(--ps-surface);
}

/* 6. « Comment ça marche » : une vraie section, pas une ligne repliée ── */
.pv-howto {
  border: 0;
  background: linear-gradient(135deg, var(--ps-primary-soft) 0%, var(--ps-surface) 70%);
  border-radius: var(--ps-radius-xl);
  box-shadow: var(--ps-shadow-sm);
  overflow: hidden;
}
.pv-howto__summary { padding: var(--ps-space-6); }
.pv-howto__summary strong { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: var(--ps-text-2xl); }
.pv-howto__sub { margin-block-start: 2px; }
.pv-howto[open] .pv-howto__summary { border-block-end: 0; padding-block-end: 0; }
.pv-howto .pv-home-steps { padding: var(--ps-space-6); }
@media (max-width: 640px) {
  .pv-howto .pv-home-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-4); }
}

/* ════════════════════════════════════════════════════════════════════
   LISTE DES BOUTIQUES SUR TÉLÉPHONE — filtres et rayons
   ════════════════════════════════════════════════════════════════════
   Deux défauts de présentation, tous deux dus à une mise en page pensée
   pour le bureau et laissée telle quelle sur petit écran :

   — la barre de filtres empilait un champ de recherche, deux listes
     déroulantes de largeur automatique et un bouton, le tout en
     `flex-wrap` : les deux listes se retrouvaient de largeurs
     différentes, parfois seules sur leur ligne, et le bouton pendait
     dans le vide ;
   — les rayons défilaient horizontalement. Au doigt, sur 375 px, il
     fallait balayer pour découvrir ce qui existe, sans jamais savoir
     combien il y en avait.

   Sur téléphone : recherche pleine largeur, les deux listes côte à côte
   à parts égales, bouton pleine largeur, et les rayons qui s'enroulent.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* La barre n'est plus collante sur téléphone : une fois les rayons
     dépliés elle mesure près de 480 px, soit les trois quarts d'un écran
     de 667 px. Collée en haut, elle ne laissait plus voir que deux lignes
     de résultats. Elle défile donc avec la page, comme son contenu. */
  .pv-filterbar { position: static; padding-block: var(--ps-space-3); }

  .pv-filterbar__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ps-space-2);
    align-items: stretch;
  }
  .pv-filterbar .pv-searchbar {
    grid-column: 1 / -1;
    min-width: 0;          /* 240 px forçait un débordement sur 360 px */
  }
  .pv-filterbar__selects {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ps-space-2);
  }
  .pv-filterbar .pv-select--inline {
    width: 100%;
    min-width: 0;
    padding-inline: var(--ps-space-3);
    font-size: var(--ps-text-sm);
  }
  /* Les listes se soumettent toutes seules (data-autosubmit) : le bouton
     ne sert qu'au clavier et aux navigateurs sans JavaScript. Il passe
     sous les listes, sur toute la largeur, au lieu de les bousculer. */
  .pv-filterbar__selects > .pv-btn {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
    min-height: var(--ps-touch);
  }

  /* ── Les rayons s'enroulent au lieu de défiler ───────────────── */
  .pv-chips {
    flex-wrap: wrap;
    overflow: visible;
    gap: var(--ps-space-2);
    padding-block: var(--ps-space-3) 0;
  }
  /* Un filet vertical entre deux pastilles n'a plus de sens dès que la
     rangée se replie : il se retrouve seul en bout de ligne. */
  .pv-chips__sep { display: none; }
  /* « Ouvert maintenant » garde sa ligne : c'est un interrupteur, pas un
     rayon, et le mélanger aux autres brouille les deux. */
  .pv-chip--strong { flex: 1 0 100%; justify-content: center; }

  .pv-chips .pv-chip {
    min-height: 40px;
    padding-inline: var(--ps-space-3);
    font-size: var(--ps-text-sm);
    gap: 6px;
  }

  .pv-filterbar__recap { margin-block-start: var(--ps-space-3); font-size: var(--ps-text-xs); }
}


/* ════════════════════════════════════════════════════════════════════
   Carte article sur téléphone — le compteur de quantité débordait
   ════════════════════════════════════════════════════════════════════
   La carte fait ~150 px de large : prix + compteur + bouton « + » sur une
   même ligne ne tiennent pas, le « + » du compteur était rogné. Le prix passe
   au-dessus, le compteur et le bouton d'ajout prennent toute la largeur. */
@media (max-width: 480px) {
  .pv-product-card__foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .pv-product-card__foot .pv-cart-form { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 6px; }
  .pv-product-card__foot .pv-qte { display: flex; width: 100%; box-sizing: border-box; }
  .pv-product-card__foot .pv-qte .pv-qte__btn { flex: 0 0 36px; width: 36px; }
  .pv-product-card__foot .pv-qte input.pv-qte__val { flex: 1 1 auto; width: auto; min-width: 0; }
  .pv-product-card__foot .pv-add-btn { width: 100%; }
}