/* ════════════════════════════════════════════════════════════════════════
   ProxiShop — COUCHE PREMIUM
   Chargée en dernier. Elle ne redéfinit pas la charte : olive #6B7B3C,
   ambre #D97706, crème #FAF8F3 restent les couleurs du produit.
   Ce qu'elle change, c'est la façon de les employer.

   Cinq partis pris, et la raison de chacun :

   1. La couleur devient rare.        Une seule action colorée par écran ;
                                      tout le reste vit en crème, blanc et
                                      filets. Un aplat qui ne sert à rien
                                      dilue celui qui sert.
   2. Le filet remplace l'ombre.      Bordures d'1 px, ombres quasi nulles.
                                      Une ombre portée visible sur une carte
                                      posée à plat est un artifice ; on la
                                      réserve aux éléments réellement
                                      au-dessus (modales, feuilles, barres).
   3. Les rayons se resserrent.       10 / 14 / 18 px au lieu de 12→30.
                                      Au-delà de ~16 px une carte cesse de
                                      paraître construite.
   4. Le survol ne déplace rien.      Plus de translateY : on change la
                                      bordure et l'opacité. Un bloc qui
                                      saute au passage de la souris n'a pas
                                      d'équivalent tactile et trahit
                                      l'amateurisme sur mobile.
   5. Le blanc tournant fait le luxe. Plus d'air entre les sections, moins
                                      de traits de séparation, une mesure de
                                      ligne tenue à 60-70 caractères.
   ════════════════════════════════════════════════════════════════════════ */

/* ══ 1. TOKENS AFFINÉS ════════════════════════════════════════════════ */
:root {
  /* Filets — un seul gris chaud, trois intensités */
  --ps-border:        #E4E0D6;
  --ps-border-light:  #EDEAE2;
  --ps-border-soft:   #F4F1EA;
  --ps-hairline:      1px solid var(--ps-border-light);

  /* Rayons resserrés */
  --ps-radius-sm:  8px;
  --ps-radius-md: 10px;
  --ps-radius-lg: 14px;
  --ps-radius-xl: 18px;
  --ps-radius-2xl: 22px;

  /* Élévation : trois niveaux, pas davantage.
     0 = posé (filet seul) · 1 = détaché · 2 = au-dessus (modale, feuille) */
  --ps-shadow-xs: none;
  --ps-shadow-sm: 0 1px 2px rgba(31, 41, 55, .04);
  --ps-shadow-md: 0 2px 8px rgba(31, 41, 55, .05);
  --ps-shadow-lg: 0 8px 28px rgba(31, 41, 55, .09);
  --ps-shadow-xl: 0 20px 56px rgba(31, 41, 55, .14);
  --ps-shadow-cta: none;
  --ps-shadow-cta-lg: none;

  /* Mouvement : une seule durée pour les micro-interactions,
     une seule courbe. C'est l'unité de rythme qui fait le soigné. */
  --ps-duration-sm:   140ms;
  --ps-duration-base: 180ms;
  --ps-duration-md:   220ms;
  --ps-ease-out: cubic-bezier(.2, .8, .2, 1);

  /* Typographie — graisses et interlettrage */
  --ps-tracking-display: -.022em;
  --ps-tracking-label:    .08em;

  /* Gouttières plus généreuses sur grand écran */
  --ps-gutter: 20px;
  --ps-gutter-lg: 40px;

  /* ── Ambre de marque, valeurs lisibles ──────────────────────────────
     #D97706 en aplat sous du texte blanc ne donne que 3,19:1 — sous le
     seuil de 4,5:1. La famille ambre est conservée, mais on descend d'un
     cran pour tout ce qui porte du texte ou fait office de fond d'action.
     Le ton vif reste disponible sous --ps-amber-bright pour les accents
     décoratifs posés sur fond sombre, où il est parfaitement lisible. */
  --ps-amber-bright: #D97706;
  --ps-cta:        #B45309;   /* 4,6:1 avec du blanc */
  --ps-cta-hover:  #92400E;   /* 6,4:1 */
  --ps-cta-deep:   #78350F;
  --ps-star:       #B45309;
}

/* ══ 2. FONDATIONS ════════════════════════════════════════════════════ */
body {
  background: var(--ps-bg);
  color: var(--ps-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Les titres serif portent l'identité : interlettrage resserré, pas de gras */
.pv-hero__title,
.pv-section-title,
.pv-product-title,
.pv-banner__title,
.pv-cta-band h2,
.ps-news__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  letter-spacing: var(--ps-tracking-display);
  text-wrap: balance;
}

/* Sous-titres : un seul gris, une mesure tenue */
.pv-section-sub,
.pv-hero__text {
  max-width: 62ch;
  line-height: 1.6;
}

/* Surtitres et étiquettes : petites capitales espacées */
.pv-hero__eyebrow,
.pv-home-step__num,
.pv-spec__key,
.ps-footer__title {
  letter-spacing: var(--ps-tracking-label);
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 700;
}

/* Les chiffres ne doivent jamais faire danser la mise en page */
.pv-price, .pv-price--old, .pv-rating, .pv-hero-stat__num,
.pv-flash-card__timer, [data-numeric], time {
  font-variant-numeric: tabular-nums;
}

/* ══ 3. RESPIRATION ═══════════════════════════════════════════════════ */
.pv-container { padding-inline: var(--ps-gutter); }
@media (min-width: 1024px) { .pv-container { padding-inline: var(--ps-gutter-lg); } }

/* Deux tailles de section, pas cinq */
.pv-section        { padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.pv-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* En-tête de section : le titre respire, le lien s'efface */
.pv-section-head { margin-block-end: clamp(1.25rem, 3vw, 2rem); align-items: flex-end; }
.pv-section-title { font-size: clamp(1.5rem, 3.4vw, 2.25rem); line-height: 1.15; }
.pv-section-sub { font-size: .9rem; color: var(--ps-text-soft); margin-block-start: .5rem; }
.pv-section-link {
  font-size: .82rem; font-weight: 600;
  color: var(--ps-text-soft);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--ps-duration-sm) var(--ps-ease-out),
              border-color var(--ps-duration-sm) var(--ps-ease-out);
}
.pv-section-link:hover { color: var(--ps-primary); border-block-end-color: currentColor; text-decoration: none; }

/* ══ 4. BOUTONS ═══════════════════════════════════════════════════════ */
/* L'ombre colorée sous le bouton d'action a été retirée : elle donne un
   rendu « bouton de landing page » qui va contre le parti pris épuré.
   Et le survol ne déplace plus le bouton — un déplacement n'a pas
   d'équivalent tactile et rend le pointage imprécis. */
.pv-btn {
  min-height: 48px;
  padding-inline: 24px;
  border-radius: var(--ps-radius-md);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.005em;
  box-shadow: none;
  transition: background var(--ps-duration-sm) var(--ps-ease-out),
              color var(--ps-duration-sm) var(--ps-ease-out),
              border-color var(--ps-duration-sm) var(--ps-ease-out),
              opacity var(--ps-duration-sm) var(--ps-ease-out);
}
.pv-btn:hover { transform: none; }
.pv-btn:active { opacity: .88; }

.pv-btn--cta       { background: var(--ps-cta); color: #FFFFFF; box-shadow: none; }
.pv-btn--cta:hover { background: var(--ps-cta-hover); box-shadow: none; transform: none; }

.pv-btn--primary       { background: var(--ps-primary); color: #FFFFFF; }
.pv-btn--primary:hover { background: var(--ps-primary-hover); }

.pv-btn--outline {
  background: transparent;
  color: var(--ps-text);
  border: 1px solid var(--ps-border);
}
.pv-btn--outline:hover { background: transparent; border-color: var(--ps-primary); color: var(--ps-primary); }

.pv-btn--light       { background: #FFFFFF; color: var(--ps-primary-deep); border: 1px solid transparent; }
.pv-btn--light:hover { background: #FFFFFF; border-color: var(--ps-primary-pale); }

.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--danger { border: 1px solid currentColor; }
.pv-btn--sm { min-height: 40px; padding-inline: 16px; font-size: .82rem; }

/* Un anneau de focus discret mais net, dans la couleur de marque */
.pv-btn:focus-visible,
.pv-chip:focus-visible,
.pv-shop-card:focus-visible,
.pv-product-card a:focus-visible {
  outline: 2px solid var(--ps-primary);
  outline-offset: 2px;
}

/* ══ 5. SURFACES ══════════════════════════════════════════════════════ */
/* Le filet porte la carte ; l'ombre ne sert qu'à ce qui est réellement
   au-dessus du plan de la page. */
.pv-card,
.pv-shop-card,
.pv-product-card,
.pv-flash-card,
.pv-testimonial,
.pv-home-step,
.pv-cart-shop,
.pv-details {
  border: var(--ps-hairline);
  border-radius: var(--ps-radius-lg);
  box-shadow: none;
  background: var(--ps-surface);
}

.pv-shop-card,
.pv-product-card,
.pv-flash-card {
  transition: border-color var(--ps-duration-base) var(--ps-ease-out),
              box-shadow var(--ps-duration-base) var(--ps-ease-out);
}
.pv-shop-card:hover,
.pv-product-card:hover,
.pv-flash-card:hover {
  transform: none;
  border-color: var(--ps-primary-pale);
  box-shadow: var(--ps-shadow-md);
}

/* La vignette d'une carte boutique : un aplat très clair, pas un dégradé */
.pv-shop-card__banner { background: var(--ps-surface-soft); }
.pv-shop-card__cover { opacity: .22; filter: saturate(.7); }
.pv-shop-card__logo {
  border-radius: var(--ps-radius-md);
  border: 2px solid var(--ps-surface);
  box-shadow: var(--ps-shadow-sm);
}
.pv-shop-card__name { font-size: .96rem; font-weight: 650; letter-spacing: -.01em; }
.pv-shop-card__foot { border-block-start: var(--ps-hairline); }

/* L'image produit respire au lieu de remplir le cadre à ras bord */
.pv-product-card__media,
.pv-flash-card__media { background: var(--ps-surface-soft); }
.pv-product-card__name,
.pv-flash-card__name { font-weight: 600; letter-spacing: -.01em; }

/* ══ 6. PASTILLES ET ÉTIQUETTES ═══════════════════════════════════════ */
.pv-chip {
  border: 1px solid var(--ps-border);
  background: transparent;
  font-weight: 500;
  font-size: .85rem;
  transition: border-color var(--ps-duration-sm) var(--ps-ease-out),
              background var(--ps-duration-sm) var(--ps-ease-out),
              color var(--ps-duration-sm) var(--ps-ease-out);
}
.pv-chip:hover { background: var(--ps-surface); border-color: var(--ps-primary-pale); color: var(--ps-text); }
.pv-chip.is-active,
.pv-chip[aria-current="true"] {
  background: var(--ps-primary-deep);
  border-color: var(--ps-primary-deep);
  color: #FFFFFF;
  font-weight: 600;
}
.pv-cat { border-color: var(--ps-border); background: transparent; font-weight: 500; }
.pv-cat:hover { background: var(--ps-surface); border-color: var(--ps-primary-pale); color: var(--ps-text); }
.pv-cat.is-active { background: var(--ps-primary-deep); border-color: var(--ps-primary-deep); }

/* Badges : petits, désaturés, capitales espacées */
.pv-badge {
  padding: 4px 9px;
  border-radius: var(--ps-radius-sm);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.pv-badge--open    { background: #EDF5EF; color: #1B5E34; border-color: #D7E8DC; }
.pv-badge--closed  { background: #FBF0F0; color: #8E2020; border-color: #F2DCDC; }
.pv-badge--delivery{ background: var(--ps-primary-soft); color: var(--ps-primary-deep); border-color: var(--ps-primary-pale); }
.pv-badge--promo   { background: #FDF6EA; color: var(--ps-cta-deep); border-color: #F2E4CB; }
.pv-badge--neutral { background: transparent; color: var(--ps-text-soft); border-color: var(--ps-border); }

/* ══ 7. CHAMPS ════════════════════════════════════════════════════════ */
.pv-input, .pv-select, .pv-textarea,
input[type="text"], input[type="tel"], input[type="email"],
input[type="search"], input[type="password"], input[type="number"],
input[type="date"], select, textarea {
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  background: var(--ps-surface);
  min-height: 48px;
  padding-inline: 14px;
  font-size: 1rem;
  color: var(--ps-text);
  transition: border-color var(--ps-duration-sm) var(--ps-ease-out),
              box-shadow var(--ps-duration-sm) var(--ps-ease-out);
}
.pv-input:hover, .pv-select:hover, .pv-textarea:hover { border-color: var(--ps-border); }
.pv-input:focus, .pv-select:focus, .pv-textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ps-primary);
  box-shadow: 0 0 0 3px rgba(107, 123, 60, .12);
  background: var(--ps-surface);
}
.pv-label { font-size: .82rem; font-weight: 600; color: var(--ps-text-heading); letter-spacing: -.005em; }
.pv-help  { font-size: .78rem; color: var(--ps-text-soft); }

/* ══ 8. HERO ══════════════════════════════════════════════════════════ */
/* Un aplat profond plutôt qu'un dégradé à trois arrêts : le dégradé
   attirait l'œil sur lui-même et abaissait le contraste du texte. */
.pv-hero {
  background-image: none !important;
  background-color: var(--ps-primary-deep);
  border-radius: 0;
  max-width: none;
  margin: 0;
}
.pv-hero::before, .pv-hero::after { opacity: .18; }
/* Le halo de l'accroche vivait ici avec un !important, qui écrasait en
   silence le fond défini par la page d'accueil — y compris le treillis
   géométrique de la refonte, invisible pour cette seule raison. Le fond
   appartient désormais à home.blade.php, qui est le seul endroit où on
   le lit. */
.pv-hero__eyebrow {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .92);
  font-size: .68rem;
}
.pv-hero__title em { color: #E4D7B7; }
/* Sur fond olive profond, l'ambre vif reste parfaitement lisible */
.pv-hero .pv-btn--cta { background: var(--ps-amber-bright); color: #1A1207; }
.pv-hero .pv-btn--cta:hover { background: #E8890B; }
.pv-hero__text { color: rgba(255, 255, 255, .84) !important; }
.pv-hero-stats { border-block-start: 1px solid rgba(255, 255, 255, .14); }
.pv-hero-stat__label { color: rgba(255, 255, 255, .66); letter-spacing: .01em; }

/* La barre de recherche est l'objet le plus précieux de la page :
   blanc pur, filet invisible, une seule ombre douce. */
.pv-hero-search {
  background: #FFFFFF;
  box-shadow: 0 12px 36px rgba(20, 26, 12, .18);
  border-radius: var(--ps-radius-lg);
}
@media (min-width: 640px) { .pv-hero-search { border-radius: 999px; } }
/* La règle générique sur les champs dessinait une bordure et un fond DANS
   la barre de recherche : un cadre dans un cadre, exactement ce que le
   parti pris épuré cherche à éliminer. On les neutralise ici. */
.pv-hero-search__field { background: transparent; }
.pv-hero-search__field input,
.pv-hero-search__field select,
.pv-searchbar input {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding-inline: 0;
  border-radius: 0;
}
.pv-hero-search__field input:focus,
.pv-hero-search__field select:focus,
.pv-searchbar input:focus { border: 0; box-shadow: none; background: transparent; }
.pv-hero-search__field input::placeholder { color: var(--ps-text-muted); }

/* La ville a besoin de place : « Toutes les villes » était coupé.
   C'est la recherche libre qui absorbe la contrainte, pas le menu. */
@media (min-width: 640px) {
  .pv-hero-search { grid-template-columns: minmax(0, 1fr) minmax(170px, auto) auto; }
}
.pv-hero-search__submit { border-radius: var(--ps-radius-md); font-weight: 600; }
@media (min-width: 640px) { .pv-hero-search__submit { border-radius: 999px; } }

/* ══ 9. BANNIÈRE PROMO ════════════════════════════════════════════════
   Les réglages de cette section ont été retirés : ils habillaient une
   bannière sombre (texte blanc, voile, pastille translucide). La bannière
   est désormais une surface claire qui porte un article réel et son prix,
   et son habillage vit avec elle, dans la page d'accueil. Laisser ici des
   couleurs blanches revenait à peindre du blanc sur du blanc. */

/* ══ 10. EN-TÊTE ══════════════════════════════════════════════════════ */
.ps-header {
  background: rgba(250, 248, 243, .88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-block-end: var(--ps-hairline);
  box-shadow: none;
}
.ps-header__login { border-radius: var(--ps-radius-md); font-weight: 600; }
.ps-header__nav a { font-weight: 500; letter-spacing: -.005em; }

/* ══ 11. PIED DE PAGE ═════════════════════════════════════════════════ */
/* Un aplat, pas un dégradé — et des filets qui existent vraiment sur fond
   sombre (les précédents disparaissaient). */
.ps-footer {
  background: #232B12 !important;
  border-block-start: 0;
  margin-block-start: clamp(3rem, 8vw, 6rem);
}
.ps-footer__grid { border-block-end: 1px solid rgba(255, 255, 255, .10); }
.ps-footer__title { color: rgba(255, 255, 255, .55); font-size: .68rem; }
.ps-footer__link { color: rgba(255, 255, 255, .78); font-size: .88rem; }
.ps-footer__link:hover { color: #FFFFFF; text-decoration: none; border-block-end: 1px solid currentColor; }
.ps-footer__bottom { color: rgba(255, 255, 255, .45); }

/* ══ 12. BANDEAU D'APPEL ══════════════════════════════════════════════ */
.pv-cta-band {
  background-image: none;
  background-color: var(--ps-primary-deep);
  border-radius: var(--ps-radius-xl);
}
.pv-cta-band p { color: rgba(255, 255, 255, .82); }

/* ══ 13. AVIS ═════════════════════════════════════════════════════════ */
.pv-testimonial__quote { color: var(--ps-border-soft); font-size: 3.5rem; }
.pv-testimonial__text { color: var(--ps-text); line-height: 1.7; }
.pv-testimonial__avatar { background: var(--ps-primary-soft); color: var(--ps-primary-deep); font-weight: 600; }

/* ══ 14. ÉTAPES ═══════════════════════════════════════════════════════ */
.pv-home-step__icon {
  background: transparent;
  border: 1px solid var(--ps-border);
  color: var(--ps-primary);
  border-radius: var(--ps-radius-md);
}
/* Le numéro d'étape est du texte ambre sur crème : il doit tenir 4,5:1 */
.pv-home-step__num { color: var(--ps-cta-hover); }
.pv-flash-card__discount { background: var(--ps-cta-hover); }
.pv-home-step h3 { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; }

/* ══ 15. ÉTATS VIDES, NOTES, TABLEAUX ═════════════════════════════════ */
.pv-empty {
  border: 1px dashed var(--ps-border);
  border-radius: var(--ps-radius-lg);
  background: transparent;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.pv-empty__icon { color: var(--ps-border); }
.pv-empty__title { font-family: 'DM Serif Display', serif; font-weight: 400; letter-spacing: var(--ps-tracking-display); }

.pv-note {
  border-radius: var(--ps-radius-md);
  border: 1px solid var(--ps-border-light);
  background: var(--ps-surface);
  font-size: .88rem;
}
.pv-note--warn { background: #FDF7EC; border-color: #F0E3C8; color: var(--ps-cta-deep); }
.pv-note--info { background: var(--ps-surface-soft); border-color: var(--ps-border-light); color: var(--ps-text-soft); }
.pv-note--ok   { background: #EDF5EF; border-color: #D7E8DC; color: #1B5E34; }

/* ══ 16. MOUVEMENT ════════════════════════════════════════════════════ */
/* Apparitions plus courtes et plus discrètes : 10 px et 380 ms au lieu de
   14 px et 500 ms. Le mouvement doit se sentir, pas se voir. */
@keyframes pvFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pv-anim-fade-up { animation-duration: .38s; }

/* ══ 17. DÉTAIL FINAL ═════════════════════════════════════════════════ */
::selection { background: var(--ps-primary-pale); color: var(--ps-primary-deep); }
:where(a, button, [role="button"]) { -webkit-tap-highlight-color: transparent; }
hr, .pv-divider { border: 0; border-block-start: var(--ps-hairline); margin-block: var(--ps-space-8); }

/* Barre de défilement discrète (desktop uniquement) */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--ps-border) transparent; }
  *::-webkit-scrollbar { width: 10px; height: 10px; }
  *::-webkit-scrollbar-thumb { background: var(--ps-border); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
  *::-webkit-scrollbar-track { background: transparent; }
}

/* ══ 18. SIGNATURE PROXISHOP ══════════════════════════════════════════
   Une seule définition pour l'en-tête, le pied de page et les pages
   d'authentification.

   Le symbole en cartouche a disparu : 28 px de pictogramme à côté d'un nom
   de 1,35 rem, c'était le symbole qui portait le regard et le nom qui
   passait au second plan. Une signature de marque se lit d'abord. Reste le
   wordmark, calé sur la hauteur de l'en-tête, avec un point ambre en guise
   de ponctuation.

   Les couleurs passent par des variables locales, ce qui permet à la
   variante claire de tout basculer d'un coup pour les fonds sombres. */
.ps-logo {
  --logo-proxi: var(--ps-primary-deep);
  --logo-shop:  var(--ps-text-soft);
  --logo-dot:   var(--ps-cta);
  --logo-tag:   var(--ps-text-muted);

  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1.05;
}
.ps-logo--light {
  --logo-proxi: #FFFFFF;
  --logo-shop:  rgba(255, 255, 255, .78);
  --logo-dot:   #E9A94A;
  --logo-tag:   rgba(255, 255, 255, .45);
}
.ps-logo__text {
  font-family: 'DM Serif Display', serif;
  font-size: 1.18rem;              /* tient dans un en-tête de 60 px */
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.015em;
  color: var(--logo-shop);
  white-space: nowrap;
}
@media (min-width: 768px) { .ps-logo__text { font-size: 1.28rem; } }
/* « Proxi » porte la marque, « Shop » la complète : la hiérarchie se fait
   par la valeur, pas par deux couleurs vives qui se disputent l'attention. */
.ps-logo__text em { font-style: normal; font-weight: 400; color: var(--logo-proxi); }
.ps-logo__text i  { font-style: normal; color: var(--logo-dot); margin-inline-start: 1px; }
.ps-logo__tagline {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--logo-tag);
  margin-block-start: 2px;
  white-space: nowrap;
}
.ps-logo:focus-visible { outline: 2px solid var(--ps-primary); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 400px) { .ps-logo__tagline { display: none; } }

/* ══ 19. SÉLECTEUR DE LANGUE ══════════════════════════════════════════
   Deux langues, des drapeaux sans libellé. Le drapeau seul ne suffit pas à
   un lecteur d'écran : chaque lien porte donc le nom de la langue en texte
   masqué, et la langue courante est annoncée par aria-current. */
.ps-header__lang { gap: 2px; }
.ps-header__lang a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: var(--ps-radius-md);
  border: 1px solid transparent;
  gap: 0;
}
.ps-header__lang a[aria-current="true"] {
  border-color: var(--ps-primary-pale);
  background: var(--ps-primary-soft);
}
.ps-header__lang .ps-flag { width: 22px; height: 16px; border-radius: 3px; opacity: .6; }
.ps-header__lang a:hover .ps-flag,
.ps-header__lang a[aria-current="true"] .ps-flag { opacity: 1; }

/* Colonne d'identité du pied de page */
.ps-footer__brand { display: flex; flex-direction: column; gap: var(--ps-space-4); }
.ps-footer__logo { align-self: flex-start; }
.ps-footer__pitch {
  font-size: .84rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .62);
  max-width: 34ch;
  margin: 0;
}

/* ══ 20. CONSENTEMENT AUX COOKIES ═════════════════════════════════════
   Une carte flottante, pas un bandeau pleine largeur. Le bandeau lit comme
   une alerte système et écrase la page ; la carte se présente comme une
   demande — ce qu'elle est. Elle reprend le vocabulaire du reste du site :
   filet d'1 px, rayon de 18 px, une seule ombre, aucune couleur superflue. */
.ps-cookies {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1200;
  padding: var(--ps-gutter);
  padding-bottom: calc(var(--ps-gutter) + env(safe-area-inset-bottom));
  pointer-events: none;   /* seule la carte intercepte les clics */
}
.ps-cookies__card {
  pointer-events: auto;
  max-width: 460px;
  margin-inline: auto;
  padding: var(--ps-space-5);
  background: var(--ps-surface);
  border: 1px solid var(--ps-border-light);
  border-radius: var(--ps-radius-xl);
  box-shadow: 0 20px 56px rgba(31, 41, 55, .16);
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-4);

  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity var(--ps-duration-md) var(--ps-ease-out),
              transform var(--ps-duration-md) var(--ps-ease-out);
}
@media (min-width: 900px) {
  .ps-cookies { padding: var(--ps-space-6); }
  /* Sur grand écran elle se cale en bas à gauche : elle n'a pas à occuper
     le centre d'une page que le visiteur est en train de lire. */
  .ps-cookies__card { margin-inline: 0 auto; }
}
.ps-cookies.is-visible .ps-cookies__card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ps-cookies__card { transition: none; opacity: 1; transform: none; }
}

.ps-cookies__head { display: flex; gap: var(--ps-space-4); align-items: flex-start; }
.ps-cookies__icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--ps-radius-md);
  background: var(--ps-primary-soft);
  color: var(--ps-primary);
}
.ps-cookies__icon svg { width: 20px; height: 20px; }

.ps-cookies__title {
  font-family: inherit;
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ps-text-heading);
  margin: 0 0 4px;
  text-transform: none;
}
.ps-cookies__text {
  margin: 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ps-text-soft);
}

/* Les deux actions occupent la même surface : refuser doit être aussi
   simple qu'accepter. Seul le remplissage signale l'action principale. */
.ps-cookies__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ps-space-2); }
@media (min-width: 420px) { .ps-cookies__actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ps-cookies__btn {
  min-height: 46px;
  padding-inline: var(--ps-space-3);
  border-radius: var(--ps-radius-md);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  text-align: center;
  transition: background var(--ps-duration-sm) var(--ps-ease-out),
              border-color var(--ps-duration-sm) var(--ps-ease-out),
              color var(--ps-duration-sm) var(--ps-ease-out);
}
.ps-cookies__btn--ghost {
  background: transparent;
  border: 1px solid var(--ps-border);
  color: var(--ps-text-soft);
}
.ps-cookies__btn--ghost:hover { border-color: var(--ps-text-muted); color: var(--ps-text); }
.ps-cookies__btn--solid {
  background: var(--ps-primary-deep);
  border: 1px solid var(--ps-primary-deep);
  color: #FFFFFF;
}
.ps-cookies__btn--solid:hover { background: var(--ps-primary); border-color: var(--ps-primary); }
.ps-cookies__btn:focus-visible { outline: 2px solid var(--ps-primary); outline-offset: 2px; }
.ps-cookies__btn:active { opacity: .9; }

.ps-cookies__link {
  font-size: .76rem;
  color: var(--ps-text-muted);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  align-self: flex-start;
}
.ps-cookies__link:hover { color: var(--ps-primary); border-block-end-color: currentColor; }

/* La barre de navigation mobile remonte tant que la carte est là */
.ps-cookies.is-visible ~ .ps-bottom-nav { transform: translateY(-100%); }

/* ═══════════════════════════════════════════════════════════════════
   §21 — EN-TÊTE DE PAGE UNIFIÉ  (.ps-pagehead)
   ═══════════════════════════════════════════════════════════════════
   Voir resources/views/components/layout/page-header.blade.php.

   Six pages publiques portaient six en-têtes différents : bandeau vert
   foncé pleine largeur ici, carte crème centrée là, titre 1,8 rem sur
   l'une et 3 rem sur l'autre. Le site n'avait pas l'air d'un site.

   Un seul en-tête, une seule échelle, une seule couleur de fond. Les
   pages gardent leur contenu propre ; c'est la porte d'entrée qui est
   commune.
   ═══════════════════════════════════════════════════════════════════ */

.ps-pagehead {
  padding-block: var(--ps-space-10) var(--ps-space-8);
  border-block-end: 1px solid var(--ps-border-light);
  background: var(--ps-surface);
}
@media (min-width: 768px) {
  .ps-pagehead { padding-block: var(--ps-space-16) var(--ps-space-10); }
}

.ps-pagehead--center { text-align: center; }
.ps-pagehead--center .ps-pagehead__title,
.ps-pagehead--center .ps-pagehead__text { margin-inline: auto; }
.ps-pagehead--center .ps-pagehead__tools { justify-content: center; }

.ps-pagehead__eyebrow {
  margin: 0 0 var(--ps-space-3);
  font-size: var(--ps-text-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ps-text-muted);
}

.ps-pagehead__title {
  margin: 0;
  font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.08;
  color: var(--ps-text-heading);
  max-width: 20ch;
  text-wrap: balance;
}
.ps-pagehead__title em { font-style: italic; color: var(--ps-primary); }

.ps-pagehead__text {
  margin: var(--ps-space-4) 0 0;
  max-width: 58ch;
  font-size: var(--ps-text-base); line-height: var(--ps-leading-relaxed);
  color: var(--ps-text-soft);
}

.ps-pagehead__tools {
  display: flex; flex-direction: column; gap: var(--ps-space-3);
  margin-block-start: var(--ps-space-8);
}
@media (min-width: 720px) {
  .ps-pagehead__tools {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: var(--ps-space-4);
  }
}

/* Un badge occasionnel au-dessus du titre (ex. « Depuis 2025 — Salé ») */
.ps-pagehead__badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 var(--ps-space-4);
  padding: 5px 12px;
  border: 1px solid var(--ps-border-light);
  border-radius: var(--ps-radius-pill);
  font-size: var(--ps-text-xs); font-weight: 600;
  color: var(--ps-text-soft); background: var(--ps-surface-soft);
}

/* ── Neutralisation des anciens en-têtes ──────────────────────────
   Les pages conservent leurs feuilles de style poussées, dont les
   règles d'en-tête ne servent plus. On les désarme ici plutôt que de
   toucher à six fichiers, pour qu'un oubli d'upload ne ressuscite pas
   un bandeau vert isolé. */
.ps-contact-hero,
.ps-faq-hero,
.ps-about-hero,
.ps-sitemap-hero { display: none !important; }

/* ── Badge « Achat vérifié » ───────────────────────────────────────
   Marque un avis rattaché à une commande réelle (Review::order_id).
   Utilisé sur la page boutique et dans les témoignages de l'accueil. */
.ps-verified {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--ps-radius-pill);
  background: var(--ps-success-bg);
  color: #0F7A37;
  border: 1px solid rgba(22, 163, 74, .22);
  font-size: 0.6875rem; font-weight: 700; line-height: 1.4;
  letter-spacing: .01em; white-space: nowrap;
  vertical-align: middle;
}
.ps-verified svg { flex: 0 0 auto; }

/* ── Note de la boutique sur une carte produit ─────────────────────
   Un article n'a pas d'avis propre : la note affichée est celle de la
   boutique qui le vend, et l'info-bulle le dit explicitement. */
.pv-shoprate {
  display: inline-flex; align-items: center; gap: 3px;
  margin-inline-start: 6px;
  color: #B45309; font-weight: 700;
  white-space: nowrap; vertical-align: middle;
}
.pv-shoprate svg { flex: 0 0 auto; }
.pv-shoprate small { color: var(--ps-text-muted); font-weight: 600; font-size: 0.95em; }

/* ── Stock bas sur une carte produit ──────────────────────────────
   Affiché seulement sous un seuil réel (5 pièces), jamais en continu :
   une urgence permanente ne veut plus rien dire. */
.pv-lowstock {
  display: inline-flex; align-items: center;
  /* Le corps de la carte est une colonne flex : sans align-self, le badge
     s'étire sur toute la largeur et ressemble à une barre d'alerte. */
  align-self: flex-start; width: fit-content;
  margin-block-start: 4px;
  padding: 2px 7px;
  border-radius: var(--ps-radius-pill);
  background: #FEF3C7; color: #92400E;
  border: 1px solid rgba(180, 83, 9, .2);
  font-size: 0.6875rem; font-weight: 700; line-height: 1.4;
  white-space: nowrap;
}

/* ── Partage WhatsApp ─────────────────────────────────────────────
   Lien wa.me : il ouvre l'application installée, ou WhatsApp Web sur
   ordinateur. Aucun script tiers, donc aucun traceur embarqué. */
.pv-share-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-block: var(--ps-space-3) var(--ps-space-4);
  padding: 10px 16px;
  min-height: 44px;
  border-radius: var(--ps-radius-pill);
  border: 1px solid rgba(37, 211, 102, .38);
  background: rgba(37, 211, 102, .08);
  color: #0E7A40;
  font-size: var(--ps-text-sm); font-weight: 700;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.pv-share-wa:hover { background: rgba(37, 211, 102, .16); border-color: rgba(37, 211, 102, .55); }
.pv-share-wa svg { flex: 0 0 auto; color: #25D366; }
.pv-share-wa--block { display: flex; width: 100%; margin-block-start: 0; }

/* ── Point d'entrée « Besoin d'aide ? » ───────────────────────────
   Bouton flottant en bas à droite. Il est remonté de 76 px sur mobile
   pour laisser la barre de navigation basse (64 px) entièrement
   cliquable, et reste sous le panneau de cookies dans l'empilement. */
.ps-help {
  position: fixed;
  inset-inline-end: 16px;
  bottom: 76px;
  z-index: 95;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
@media (min-width: 768px) { .ps-help { bottom: 20px; inset-inline-end: 20px; } }

.ps-help__btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border: 0; border-radius: var(--ps-radius-pill);
  background: var(--ps-primary-deep); color: #FFFFFF;
  font-family: inherit; font-size: var(--ps-text-sm); font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(61, 74, 34, .28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ps-help__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(61, 74, 34, .34); }
.ps-help__btn:active { transform: scale(.97); }
.ps-help__btn svg { flex: 0 0 auto; }
/* Sur les petits écrans le libellé prend la place du contenu : on garde
   l'icône seule, mais l'aria-label porte toujours le nom du bouton. */
@media (max-width: 599px) { .ps-help__btn-label { display: none; } .ps-help__btn { padding: 12px; } }

.ps-help__panel {
  width: min(300px, calc(100vw - 32px));
  padding: 14px;
  border-radius: var(--ps-radius-xl);
  background: var(--ps-surface);
  border: 1px solid var(--ps-border-light);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .16);
}
.ps-help__lead {
  margin: 0 0 10px;
  font-size: var(--ps-text-sm); font-weight: 700;
  color: var(--ps-text-heading); line-height: 1.4;
}
.ps-help__item {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 9px 11px;
  margin-block-end: 6px;
  border-radius: var(--ps-radius-md);
  border: 1px solid var(--ps-border-light);
  background: var(--ps-surface-soft);
  color: var(--ps-text); text-decoration: none;
  font-size: var(--ps-text-sm); font-weight: 600;
}
.ps-help__item:hover { background: #F2EEE4; border-color: var(--ps-border); }
.ps-help__item svg { flex: 0 0 auto; color: var(--ps-primary-deep); }
.ps-help__item--wa svg { color: #25D366; }
.ps-help__note {
  margin: 10px 0 0;
  font-size: 0.6875rem; color: var(--ps-text-soft); line-height: 1.5;
}

/* ══ NEWSLETTER « Restez informé » ════════════════════════════════════
   Source unique. Trois jeux de règles se recouvraient auparavant
   (views.css, son correctif footer, puis ce fichier) : la bordure venait
   d'un fichier, le fond d'un autre, et le rembourrage d'un troisième.

   Structure : deux zones seulement — l'accroche et le formulaire. Elles
   se posent côte à côte à partir de 860 px et l'une sous l'autre en
   dessous ; rien n'est caché sur petit écran, tout est empilé. Le champ
   et le bouton ne se séparent qu'à partir de 520 px, en dessous le
   bouton passe en pleine largeur plutôt que de réduire le champ à vingt
   caractères. */
.ps-news {
  display: grid;
  gap: var(--ps-space-5);
  padding: var(--ps-space-6);
  margin-block-end: var(--ps-space-8);
  border-radius: var(--ps-radius-lg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 860px) {
  .ps-news { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); align-items: center; gap: var(--ps-space-8); }
}

.ps-news__intro { display: flex; align-items: flex-start; gap: var(--ps-space-3); min-width: 0; }
.ps-news__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--ps-radius-md);
  background: rgba(255, 255, 255, .10);
  color: #FFFFFF;
}
.ps-news__title {
  margin: 0 0 4px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 4vw, 1.4rem);
  line-height: 1.2;
  color: #FFFFFF;
}
.ps-news__sub {
  margin: 0;
  font-size: var(--ps-text-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
  max-width: 46ch;
}

.ps-news__form { min-width: 0; }
.ps-news__row { display: flex; flex-wrap: wrap; gap: var(--ps-space-2); }

.ps-news__input {
  flex: 1 1 220px;
  min-width: 0;                 /* sans quoi un flex item refuse de passer sous sa largeur de contenu et déborde */
  min-height: var(--ps-touch-lg);
  padding-inline: var(--ps-space-4);
  border: 1px solid transparent;
  border-radius: var(--ps-radius-md);
  background: rgba(255, 255, 255, .96);
  font-family: inherit;
  font-size: 16px;              /* en dessous de 16px, iOS zoome à la mise au point */
  color: var(--ps-text);
}
.ps-news__input::placeholder { color: var(--ps-text-muted); }
.ps-news__input:focus-visible { outline: 2px solid var(--ps-brand-amber, #D97706); outline-offset: 2px; }
.ps-news__input.is-invalid { border-color: #F87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, .25); }

/* Piège à robots : retiré du flux et de l'ordre de tabulation, jamais lu
   par un lecteur d'écran. display:none suffirait mais certains robots
   l'ignorent justement parce qu'il est trop reconnaissable. */
.ps-news__trap {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ps-news__submit {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--ps-touch-lg);
  padding-inline: var(--ps-space-5);
  border: 0; border-radius: var(--ps-radius-md);
  background: var(--ps-brand-amber, #D97706); color: #FFFFFF;
  font-family: inherit; font-size: var(--ps-text-sm); font-weight: 700;
  white-space: nowrap; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.ps-news__submit:hover { background: #B45309; }
.ps-news__submit:active { transform: scale(.98); }
@media (max-width: 519px) {
  .ps-news__input  { flex: 1 1 100%; }
  .ps-news__submit { flex: 1 1 100%; }
}

.ps-news__error {
  margin: 7px 0 0;
  font-size: 0.78rem; font-weight: 600; color: #FCA5A5;
}
.ps-news__legal {
  margin: 9px 0 0;
  font-size: 0.72rem; line-height: 1.5;
  color: rgba(255, 255, 255, .5);
}
.ps-news__done {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  padding: 13px 15px;
  border-radius: var(--ps-radius-md);
  background: rgba(134, 239, 172, .14);
  border: 1px solid rgba(134, 239, 172, .34);
  color: #BBF7D0;
  font-size: var(--ps-text-sm); font-weight: 600; line-height: 1.45;
}
.ps-news__done svg { flex: 0 0 auto; }

/* ══ CIBLES TACTILES ══════════════════════════════════════════════════
   Relevé sur le site en ligne à 390 px : liens de pied de page 31 px de
   haut, liens du plan du site 31 px, bouton de langue 43×25, logos 90×20,
   cases à cocher 17 px. Les recommandations tiennent en une phrase :
   44×44 px (Apple) ou 48×48 dp (Material).

   Les liens placés DANS un paragraphe (adresses e-mail des pages légales,
   « formulaire de contact ») restent à leur taille : les agrandir
   désaligne le texte autour, et ils sont explicitement exclus du critère
   WCAG 2.5.8 au titre des liens en ligne dans du texte. */

/* Pied de page : la zone cliquable s'étend sous le texte, la ligne
   visible ne bouge pas. */
.ps-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Plan du site : mêmes listes, même correction. */
.ps-sitemap-sublink,
.ps-sitemap-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Sélecteur de langue de l'en-tête — 43×25 au relevé. */
.ps-lang-mobile > button,
#ps-lang-toggle {
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

/* Le logo est le lien le plus utilisé du site pour revenir à l'accueil ;
   il n'offrait que 20 px de haut. */
.ps-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Cases à cocher et boutons radio : 17 à 20 px au relevé. On les porte à
   22 px et on étend la zone au libellé qui les accompagne, qui est ce que
   le doigt vise réellement. */
input[type="checkbox"],
input[type="radio"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--ps-primary, #6B7B3C);
}
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

/* Le lien d'évitement reste à 1×1 px tant qu'il n'a pas le focus : c'est
   son fonctionnement normal, il n'est pas concerné. */

/* Deux derniers liens sous la barre des 36 px au contrôle : celui de la
   boutique sous le bandeau promo, et « Comment nous utilisons les
   cookies » dans le panneau de consentement — ce dernier est le seul
   moyen de s'informer avant de choisir, il doit être facile à viser. */
.pv-ticket__shop,
.ps-cookies__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* « Retour à l'accueil » en pied des pages légales : seul lien de sortie
   de ces pages, 22 px de haut. Les adresses e-mail écrites au fil du
   texte restent telles quelles (liens en ligne dans du texte). */
.ps-legal-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════
   Vitrine de boutique — rangée « Mis en avant »
   ───────────────────────────────────────────────────────────────
   En tête de la page boutique, avant les accordéons par catégorie.
   C'est une RANGÉE et non un tri : les articles étant regroupés en
   accordéons, un ordre serait invisible — épingler ne produisait
   donc rien du tout sur le site avant le 4 octobre 2026.

   Le bandeau de boutique qui vivait ici a été retiré avec les
   bannières de commerçants.

   Tous les jetons utilisés ici sont définis dans la feuille :
   --ps-space-1..6/8, --ps-radius-sm/md/lg, --ps-primary*,
   --ps-text*, --ps-border*, --ps-surface*. Pas de --ps-radius nu
   ni de --ps-transition : ils n'existent pas, et une déclaration
   qui les utilise est silencieusement ignorée.
   ═══════════════════════════════════════════════════════════════ */

/* ── Rangée « Mis en avant » ────────────────────────────────── */
.pv-featured { margin-bottom: var(--ps-space-6); }

.pv-featured__title {
  display: flex;
  align-items: center;
  gap: var(--ps-space-2);
  margin: 0 0 var(--ps-space-3);
  font-size: var(--ps-text-lg);
  font-weight: 700;
  color: var(--ps-text-heading);
}

.pv-featured__title svg { color: var(--ps-primary); flex: 0 0 auto; }

/* Défilement horizontal avec accroche : sur un téléphone, six articles
   ne tiennent pas côte à côte, et les empiler ferait descendre les
   catégories hors de l'écran. */
.pv-featured__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
  gap: var(--ps-space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--ps-space-2);
  -webkit-overflow-scrolling: touch;
}

.pv-featured__card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border-light);
  border-radius: var(--ps-radius-md);
  overflow: hidden;
}

.pv-featured__media {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ps-surface-soft);
  color: var(--ps-text-soft);
}

.pv-featured__media img { width: 100%; height: 100%; object-fit: cover; }

.pv-featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--ps-space-1);
  padding: var(--ps-space-2) var(--ps-space-3) var(--ps-space-3);
}

.pv-featured__name {
  margin: 0;
  font-size: var(--ps-text-sm);
  font-weight: 600;
  line-height: 1.3;
  /* Deux lignes au plus : au-delà, les cartes de la rangée n'ont plus
     la même hauteur et le défilement devient irrégulier. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pv-featured__name a { color: var(--ps-text-heading); text-decoration: none; }
.pv-featured__name a:hover { color: var(--ps-primary); }

.pv-featured__price {
  font-size: var(--ps-text-sm);
  font-weight: 700;
  color: var(--ps-text-heading);
}

.pv-featured__price small { font-size: var(--ps-text-xs); font-weight: 600; color: var(--ps-text-muted); }

@media (max-width: 768px) {
  .pv-featured__row { grid-auto-columns: 132px; }
}

/* Vitrine : la carte entiere est cliquable.
   Une couverture transparente posee au-dessus de la carte porte le lien ;
   le titre garde le sien pour les lecteurs d'ecran et la navigation au
   clavier, et passe au-dessus de la couverture grace a son z-index. */
.pv-featured__card--lien { position: relative; }
.pv-featured__couverture {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  text-indent: -9999px; overflow: hidden;
}
.pv-featured__card--lien:hover { border-color: var(--ps-primary, #6B7B3C); }
.pv-featured__card--lien:focus-within { outline: 2px solid var(--ps-primary, #6B7B3C); outline-offset: 2px; }
.pv-featured__card--lien .pv-featured__name a { position: relative; z-index: 2; }

/* Entree de retour vers l'espace gerant ou l'administration : mise en avant,
   parce que c'est la destination la plus probable pour qui la voit. */
.ps-dropdown__link--fort {
  font-weight: 700;
  color: var(--ps-primary, #6B7B3C);
  border-bottom: 1px solid var(--ps-border-light, #e6e2d8);
}
.ps-dropdown__link--fort svg { color: var(--ps-primary, #6B7B3C); }

/* Taille de base des drapeaux de langue.
   Elle n'existait que dans deux contextes precis (.nv-lang__item .ps-flag et
   .ps-header__lang .ps-flag). Partout ailleurs — notamment le selecteur de
   langue du profil gerant — le SVG n'avait aucune dimension et s'affichait a
   la taille par defaut d'un SVG sans attributs, donc enorme. Les deux regles
   existantes restent prioritaires, elles sont plus specifiques. */
.ps-flag { width: 20px; height: 14px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }

/* ═══ §22 — Etat de la boutique avant achat ═══════════════════════════════
   Deux bandeaux, deux sens. Le rouge refuse, l'ambre previent. Ils se
   posent au-dessus des articles, la ou le client decide, et non au bout du
   tunnel de commande comme c'etait le cas. */
.bq-etat {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin: 0 0 16px;
  border-radius: 12px; font-size: .88rem; font-weight: 600; line-height: 1.45;
}
.bq-etat svg { flex: 0 0 auto; }
.bq-etat--ferme   { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.bq-etat--differe { background: #FEF3C7; border: 1px solid #FDE68A; color: #92400E; }

/* ═══ §23 — Note par etoiles cliquables ═══════════════════════════════════
   La note se saisissait dans une liste deroulante « 1 / 5 … 5 / 5 », alors
   que les avis deja publies s'affichent en etoiles juste a cote. On saisit
   donc dans la meme langue qu'on lit.

   Les boutons radio restent la : ils portent la valeur, la validation
   `required` et la navigation au clavier. Tant que le script n'a pas pose
   `is-interactif`, ils sont visibles et le formulaire fonctionne sans
   JavaScript. */
.pv-note { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pv-note__etoile { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pv-note__etoile svg { display: none; }
.pv-note__resume { margin-inline-start: 8px; font-size: .85rem; font-weight: 700; color: #6B7B3C; }

.pv-note.is-interactif { gap: 2px; }
.pv-note.is-interactif .pv-note__etoile { padding: 4px; }
.pv-note.is-interactif .pv-note__etoile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-note.is-interactif .pv-note__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pv-note.is-interactif .pv-note__etoile svg { display: block; color: #E5E7EB; transition: color .12s ease, transform .12s ease; }
.pv-note.is-interactif .pv-note__etoile.is-pleine svg { color: #F59E0B; }
/* Le focus clavier doit se voir : c'est le seul repere quand on navigue
   aux fleches. */
.pv-note.is-interactif .pv-note__etoile input:focus-visible + svg {
  outline: 2px solid #6B7B3C; outline-offset: 2px; border-radius: 4px;
}
.pv-note.is-interactif .pv-note__etoile:hover svg { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .pv-note.is-interactif .pv-note__etoile svg { transition: none; }
  .pv-note.is-interactif .pv-note__etoile:hover svg { transform: none; }
}

/* ═══ §24 — Quantite sur les cartes d'article ═════════════════════════════
   Le « + » ajoutait toujours une unite : pour en commander trois il fallait
   ouvrir la fiche, ou cliquer trois fois. Le selecteur se pose a cote du
   bouton, dans la meme rangee, sans pousser le prix a la ligne. */
.pv-qte {
  display: inline-flex; align-items: center;
  border: 1px solid var(--ps-border, #e6e2d8); border-radius: 10px;
  background: #fff; overflow: hidden; flex: 0 0 auto;
}
.pv-qte__btn {
  width: 32px; height: 36px; border: 0; background: transparent;
  color: var(--ps-brand-olive, #6B7B3C);
  font-family: inherit; font-size: 1.05rem; font-weight: 800; line-height: 1;
  cursor: pointer; transition: background .12s ease;
}
.pv-qte__btn:hover:not([disabled]) { background: var(--ps-brand-olive-soft, #EEF3E4); }
.pv-qte__btn[disabled] { color: #c9cfbb; cursor: not-allowed; }
.pv-qte__btn:focus-visible { outline: 2px solid var(--ps-brand-olive, #6B7B3C); outline-offset: -2px; }
.pv-qte__val {
  width: 34px; height: 36px; border: 0; border-inline: 1px solid var(--ps-border, #e6e2d8);
  text-align: center; font-family: inherit; font-size: .86rem; font-weight: 700;
  color: var(--ps-text, #1F2937); background: transparent; padding: 0;
  -moz-appearance: textfield;
}
.pv-qte__val::-webkit-outer-spin-button,
.pv-qte__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pv-qte__val:focus-visible { outline: 2px solid var(--ps-brand-olive, #6B7B3C); outline-offset: -2px; }

/* Le formulaire de carte aligne le selecteur et le bouton d'ajout. */
.pv-cart-form, .pv-card form { display: inline-flex; align-items: center; gap: 6px; }

/* Sur un telephone etroit, le selecteur se reduit plutot que de casser la
   rangee du prix. */
@media (max-width: 400px) {
  .pv-qte__btn { width: 28px; }
  .pv-qte__val { width: 28px; }
}

/* ═══ §25 — Banniere de confirmation d'ajout ══════════════════════════════
   Le toast nu annoncait l'ajout sans dire quoi faire ensuite : le client
   restait sur la fiche, sans savoir s'il devait revenir en arriere ou
   chercher son panier. La banniere porte les deux chemins. */
.pv-ajout {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 290px; max-width: min(460px, 92vw);
  padding: 14px 44px 14px 18px;
  background: #fff; border: 1px solid var(--ps-border, #e6e2d8);
  border-inline-start: 4px solid var(--ps-brand-olive, #6B7B3C);
  border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,.14);
  animation: slideDown .35s cubic-bezier(.16,1,.3,1);
}
.pv-ajout__titre { font-size: .92rem; font-weight: 800; color: #3f4a21; line-height: 1.35; }
.pv-ajout__differe {
  font-size: .82rem; font-weight: 600; line-height: 1.45;
  color: #92400E; background: #FEF3C7; border: 1px solid #FDE68A;
  border-radius: 10px; padding: 8px 12px;
}
.pv-ajout__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pv-ajout__lien, .pv-ajout__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 16px; border-radius: 10px;
  font-size: .85rem; font-weight: 700; text-decoration: none;
}
.pv-ajout__lien {
  color: var(--ps-brand-olive, #6B7B3C); background: #fff;
  border: 1px solid var(--ps-border, #e6e2d8);
}
.pv-ajout__lien:hover { background: var(--ps-brand-olive-soft, #EEF3E4); }
.pv-ajout__cta { color: #fff; background: var(--ps-brand-olive, #6B7B3C); margin-inline-start: auto; }
.pv-ajout__cta:hover { background: var(--ps-brand-olive-dark, #566231); }
.pv-ajout__fermer {
  position: absolute; top: 8px; inset-inline-end: 8px;
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: #9aa87a;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.pv-ajout__fermer:hover { background: #F4F7EC; color: #3f4a21; }

@media (max-width: 480px) {
  .pv-ajout { inset-inline: 12px; left: auto; transform: none; max-width: none; }
  .pv-ajout__cta, .pv-ajout__lien { flex: 1 1 auto; }
  .pv-ajout__cta { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-ajout { animation: none; }
}

/* ═══ §26 — Creneaux de retrait en boutique ═══════════════════════════════
   Le mode retrait etait accepte sans qu'aucun moment soit demande. Les
   creneaux sont decoupes sur les horaires reels du commerce, aujourd'hui ou
   demain, par tranches d'une heure.

   Des boutons radio, et non une liste deroulante : six creneaux se lisent
   d'un coup d'oeil et se touchent du pouce, la ou un <select> demande deux
   gestes et cache les options. */
.pv-creneaux { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.pv-creneaux__jour { display: flex; flex-direction: column; gap: 8px; }
.pv-creneaux__titre {
  font-size: .82rem; font-weight: 800; color: #3f4a21;
  display: flex; align-items: baseline; gap: 6px;
}
.pv-creneaux__titre small { font-size: .76rem; font-weight: 600; color: #9aa87a; }
.pv-creneaux__liste { display: flex; flex-wrap: wrap; gap: 8px; }

.pv-creneau { display: inline-flex; cursor: pointer; }
.pv-creneau input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-creneau span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px;
  border: 1.5px solid var(--ps-border, #e6e2d8); border-radius: 12px;
  background: #fff; color: #3f4a21;
  font-size: .88rem; font-weight: 700; white-space: nowrap;
  transition: border-color .12s ease, background .12s ease;
}
.pv-creneau:hover span { border-color: #c9d4ad; background: #FAFBF6; }
.pv-creneau input:checked + span {
  border-color: var(--ps-brand-olive, #6B7B3C);
  background: #F4F7EC; color: #3f4a21;
  box-shadow: inset 0 0 0 1px var(--ps-brand-olive, #6B7B3C);
}
.pv-creneau input:focus-visible + span {
  outline: 2px solid var(--ps-brand-olive, #6B7B3C); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pv-creneau span { transition: none; }
}

/* ═══ Compteurs de quantité (+ / −) : le chiffre doit rester visible ═══════
   La règle générique « input[type=text|number] » de la section 7 (bordure,
   fond, padding-inline: 14px, min-height: 48px) l'emporte sur
   .pv-qty__value / .pv-qte__val (spécificité plus forte). Résultat mesuré :
   44 px de large − 2×14 px de padding = 14 px utiles sur la fiche produit
   (« 12 » coupé), 0 px sur les cartes → le chiffre disparaissait.
   On re-pose ici le style du compteur avec une spécificité supérieure. */
.pv-qty input.pv-qty__value {
  width: 44px; height: 40px; min-height: 40px;
  padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
  text-align: center; font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ps-text, #1F2937);
}
.pv-qty input.pv-qty__value:focus { box-shadow: none; }
.pv-qte input.pv-qte__val {
  width: 38px; height: 38px; min-height: 38px;
  padding: 0; border: 0; border-inline: 1px solid var(--ps-border, #e6e2d8); border-radius: 0;
  background: transparent; box-shadow: none;
  text-align: center; font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ps-text, #1F2937);
}
.pv-qte input.pv-qte__val:focus { box-shadow: none; }
.pv-qte .pv-qte__btn { height: 38px; }
@media (max-width: 400px) {
  .pv-qte .pv-qte__btn { width: 32px; }
  .pv-qte input.pv-qte__val { width: 34px; }
}

/* ══ PIED DE PAGE — rythme et densité ═════════════════════════════════
   Constat (relevé en ligne) : quatre colonnes égales de 286 px pour des
   listes de 3 à 5 liens, des lignes de 44 px sur ordinateur, une barre du
   bas empilée et centrée, 839 px de grille et 1 345 px de pied de page sur
   mobile, et la dernière ligne cachée sous la barre de navigation fixe.

   Règles : échelle de 8 px ; la colonne d'identité est plus large que les
   listes ; les cibles de 44 px ne restent qu'au doigt (pointeur grossier ou
   écran étroit), à la souris 32 px suffisent ; mobile en deux colonnes. */
.ps-footer {
  margin-block-start: clamp(1.5rem, 3vw, 2rem);
  padding-block: clamp(2rem, 4vw, 3rem) 0;
}
.ps-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: 32px clamp(24px, 4vw, 56px);
  margin-block-end: 0;
  padding-block-end: 32px;
}
.ps-footer__brand { gap: 12px; }
.ps-footer__pitch { max-width: 36ch; }
.ps-footer__title { margin: 0 0 12px; letter-spacing: .08em; font-family: inherit; line-height: 1.3; }
.ps-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ps-footer__link { min-height: 32px; padding: 0; }
.ps-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 24px;
  padding-block: 16px;
  text-align: start;
  font-size: .78rem;
}
.ps-footer__bottom p { margin: 0; }

/* Tablette : identité sur toute la largeur, puis trois listes. */
@media (max-width: 899px) {
  .ps-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ps-footer__brand { grid-column: 1 / -1; }
  .ps-footer__pitch { max-width: 56ch; }
}

/* Mobile : deux colonnes, « Légal » en pleine largeur sur deux colonnes de liens. */
@media (max-width: 639px) {
  .ps-footer { padding-block-start: 24px; }
  .ps-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-block-end: 24px; }
  .ps-footer__col--legal { grid-column: 1 / -1; }
  .ps-footer__col--legal .ps-footer__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .ps-footer__link { min-height: 44px; }
  .ps-footer__bottom { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* Réserve pour la barre de navigation fixe (64 px, visible sous 768 px) :
   elle se place UNE fois, tout en bas, sous le pied de page. Auparavant
   <main> (64 px) puis .pv-page (76 à 96 px) la réservaient entre le contenu
   et le pied de page — jusqu'à 160 px de vide avant le footer — et le pied
   de page, lui, restait recouvert. */
#main-content { padding-bottom: 0; }
@media (max-width: 900px) { .pv-page { padding-bottom: 0; } }
.pv-page:has(.pv-stickybar) { padding-bottom: 0; }
@media (max-width: 767px) {
  .ps-footer__bottom { padding-block-end: calc(80px + env(safe-area-inset-bottom, 0px)); }
  /* barre d'action fixe (validation de commande) au-dessus de la navigation */
  body:has(.pv-stickybar) .ps-footer__bottom { padding-block-end: calc(168px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 640px) { .ps-footer__bottom { padding-inline-end: 64px; } } /* laisse la place au bouton d'aide flottant */
@media (pointer: coarse) { .ps-footer__link { min-height: 44px; } }