/* ==========================================================================
   Les Savons de Jadis — front v2 — socle.css
   Socle commun à toutes les pages : base, utilitaires, composants partagés.
   À charger après tokens.css. Aucune ombre sur les boutons, aucun titre animé à l'apparition.
   Sommaire : 1. Base et focus  2. Utilitaires et conteneur  3. Sections et panneaux teintés
   4. Titres de section  5. Liens, étoiles, pastilles  6. Boutons  7. Champs  8. En-tête
   9. Navigation mobile  10. Fil d'Ariane et bannière de page  11. Carte produit et rangée défilante
   12. Lettre d'information  13. Pied de page  14. Mouvement réduit
   ========================================================================== */

/* 1. BASE ET FOCUS ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + var(--e-5));
}
body {
  margin: 0;
  font-family: var(--font-texte);
  font-size: var(--fs-base);
  line-height: var(--lh-texte);
  color: var(--texte);
  background-color: var(--fond-page);
  /* Filigrane « Les savons de Jadis » : même déclaration que le site actuel
     (image répétée, 100 % de large, sous un voile blanc à 62 %) */
  background-image:
    linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .62)),
    url("../../public/img/bg/bg-2.png");
  background-repeat: repeat, repeat;
  background-position: 0 0, center top;
  background-size: auto, 100% auto;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(101, 157, 68, .18);
  overflow-x: clip;
}
h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 700;
  line-height: var(--lh-titre);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
a, button, input, summary { touch-action: manipulation; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs); }
::selection { background: var(--or-clair); color: var(--texte); }

[hidden] { display: none !important; }

/* 2. UTILITAIRES ET CONTENEUR ----------------------------------------------- */
.conteneur { width: 100%; max-width: calc(var(--conteneur) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: var(--e-4); top: -100px; z-index: var(--z-evitement); padding: var(--e-3) var(--e-5); background: var(--texte); color: var(--blanc); border-radius: var(--r-pilule); font-weight: 600; }
.evitement:focus { top: var(--e-3); outline-color: var(--or-fonce); }
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico--plein { fill: currentColor; stroke: none; }
.ico--s { width: 18px; height: 18px; }

/* 3. SECTIONS ET PANNEAUX TEINTÉS ------------------------------------------- */
/* Rythme vertical : chaque section apporte son espace au-dessus d'elle */
.section { padding-top: var(--e-bande); }
/* Panneau teinté : contenu dans le cadre (même largeur que le carrousel), coins arrondis ;
   le blanc et le filigrane restent visibles autour. Jamais de fond d'un bord à l'autre de l'écran. */
.bande--a, .bande--b { --pan-x: clamp(1.5rem, 4vw, 4rem); --pan-y: clamp(1.75rem, 4vw, 3.5rem); }
.bande--a > .conteneur, .bande--b > .conteneur { position: relative; isolation: isolate; padding: var(--pan-y) calc(var(--gouttiere) + var(--pan-x)); }
.bande--a > .conteneur::before, .bande--b > .conteneur::before { content: ""; position: absolute; inset: 0 var(--gouttiere); z-index: -1; border: 1px solid var(--bande-filet); border-radius: var(--r-xl); }
.bande--a > .conteneur::before { background: var(--bande-a); }
.bande--b > .conteneur::before { background: var(--bande-b); }
@media (max-width: 599px) {
  /* Sur mobile, le panneau va presque jusqu'aux bords pour ne pas perdre de place */
  .bande--a, .bande--b { --pan-x: var(--e-4); --pan-y: var(--e-5); }
  .bande--a > .conteneur, .bande--b > .conteneur { padding-inline: calc(var(--e-2) + var(--pan-x)); }
  .bande--a > .conteneur::before, .bande--b > .conteneur::before { inset-inline: var(--e-2); border-radius: var(--r-lg); }
}

/* 4. TITRES DE SECTION ------------------------------------------------------ */
/* Deux familles : .section__tete / .section__titre (accueil, pages de contenu) et .tete-section / .titre-section
   (fiche produit). .titre-trait ajoute le trait or sous n'importe quel titre. */
.section__tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-4) var(--e-6); margin-bottom: var(--e-6); }
.section__titre { font-size: var(--fs-2xl); max-width: 26ch; }
.section__titre--second { font-size: var(--fs-xl); max-width: 32ch; }
.section__chapo { color: var(--texte-moyen); max-width: 56ch; margin-top: var(--e-3); }
.titre-trait::after { content: ""; display: block; width: 72px; height: 4px; margin-top: var(--e-3); border-radius: 4px; background: var(--or); }
/* Système de titres de la fiche : toujours au-dessus du contenu, même taille, même trait or, même grille */
.tete-section { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-3) var(--e-5); margin-bottom: var(--e-5); }
.titre-section { font-size: var(--fs-2xl); }

/* 5. LIENS, ÉTOILES, PASTILLES ---------------------------------------------- */
.lien { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible); font-weight: 600; color: var(--lien); text-decoration: underline; text-decoration-color: var(--vert); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color var(--d-2) ease; }
.lien:hover { text-decoration-color: var(--or); }
.lien .ico { transition: transform var(--d-2) var(--ease-sortie); }
@media (hover: hover) and (pointer: fine) { .lien:hover .ico { transform: translateX(3px); } }
.etoiles { display: inline-flex; gap: 1px; color: var(--or-ambre); }
.etoiles .ico { width: 16px; height: 16px; }
.pastille { display: inline-flex; align-items: center; gap: var(--e-2); padding: .3rem .8rem; border-radius: var(--r-pilule); background: var(--vert-brume); color: var(--vert-profond); font-size: var(--fs-sm); font-weight: 500; line-height: 1.4; }
.pastille .ico { width: 16px; height: 16px; }

/* 6. BOUTONS — aucune ombre, retour d'appui par l'échelle ------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: 0 var(--e-5);
  border: 1.5px solid transparent; border-radius: var(--r-pilule);
  font-weight: 600; font-size: var(--fs-base); line-height: 1.2; text-align: center;
  box-shadow: none;
  transition: background-color var(--d-2) ease, border-color var(--d-2) ease, color var(--d-2) ease, transform var(--d-1) ease-out;
}
.btn:active { transform: scale(.97); }
.btn--or { background: var(--action); color: var(--sur-action); }
.btn--or:hover { background: var(--action-survol); }
.btn--or:active { background: var(--action-appui); }
.btn--vert { background: var(--vert-fonce); color: var(--blanc); }
.btn--vert:hover { background: var(--vert-profond); }
.btn--vert:active { background: var(--vert-profond); }
.btn--neutre { background: var(--blanc); border-color: var(--texte); color: var(--texte); }
.btn--neutre:hover, .btn--neutre:active { background: var(--texte); color: var(--blanc); }
.btn--sombre { background: var(--texte); color: var(--blanc); }
.btn--sombre:hover { background: #46413a; }
.btn--contour { border-color: var(--vert-fonce); color: var(--vert-profond); }
.btn--contour:hover { background: var(--vert-rosee); }
.btn--contour:active { background: var(--vert-rosee); border-color: var(--vert-profond); }
.btn--clair { border-color: rgba(255, 255, 255, .55); color: var(--blanc); }
.btn--clair:hover { background: rgba(255, 255, 255, .14); border-color: var(--blanc); }
.btn--grand { min-height: 56px; padding-inline: var(--e-6); font-size: var(--fs-md); }
.btn--bloc { width: 100%; }
.btn[aria-disabled="true"] { background: var(--gris-plateau); color: var(--texte-moyen); cursor: not-allowed; }
.btn[aria-disabled="true"]:active { transform: none; }
/* Bouton rond (flèches des rangées et du carrousel, pause) */
.carrousel__bouton { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; color: var(--vert-profond); transition: background-color var(--d-2) ease, transform var(--d-1) ease-out; }
.carrousel__bouton:hover { background: var(--vert-rosee); }
.carrousel__bouton:active { transform: scale(.94); }
.carrousel__bouton:focus-visible { border-radius: 50%; }
.carrousel__bouton[aria-disabled="true"] { color: var(--trait-champ); cursor: not-allowed; }
.carrousel__bouton[aria-disabled="true"]:hover { background: none; }
@media (max-width: 767px) { .carrousel__bouton { width: var(--cible); height: var(--cible); } }

/* 7. CHAMPS ----------------------------------------------------------------- */
/* Liste déroulante (tri). Les autres champs sont stylés avec leur composant :
   recherche (en-tête), lettre d'information, prix (catégorie), quantité (fiche produit). */
.tri { display: flex; align-items: center; gap: var(--e-3); font-size: var(--fs-sm); color: var(--texte-moyen); }
.tri select { height: var(--cible); padding: 0 2.5rem 0 var(--e-4); border: 1.5px solid var(--trait-champ); border-radius: var(--r-pilule); background-color: var(--blanc); color: var(--texte); font-size: 1rem; font-weight: 500; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335591f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 18px; cursor: pointer; transition: border-color var(--d-2) ease; }
.tri select:hover { border-color: var(--vert-fonce); }
.tri select:focus-visible { border-radius: var(--r-pilule); }

/* 8. EN-TÊTE ---------------------------------------------------------------- */
.promo { margin: 0; background: var(--blanc); border-bottom: 1px solid var(--trait); color: var(--texte); font-size: var(--fs-sm); font-weight: 500; text-align: center; }
.promo a { display: flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--cible); padding: var(--e-2) var(--gouttiere); line-height: 1.35; }
.promo a:hover { text-decoration: underline; text-underline-offset: 4px; }
.promo a:focus-visible { outline-offset: -4px; }
.promo .ico { width: 18px; height: 18px; color: var(--or-brun); }

/* Fond opaque : ce qui passe sous l'en-tête collant (bouton d'achat compris) ne se devine pas au travers */
.entete { position: sticky; top: 0; z-index: var(--z-entete); background: var(--blanc); }
.entete__rang { position: relative; display: flex; align-items: center; gap: var(--e-4); min-height: var(--entete-h); }
.marque { display: inline-flex; align-items: center; gap: var(--e-3); flex: none; min-height: var(--cible); border-radius: var(--r-sm); }
.marque img { width: 56px; height: auto; }
.marque__nom { font-family: var(--font-titre); font-weight: 700; font-size: 1.1875rem; line-height: 1.1; letter-spacing: .005em; }

.nav { flex: none; margin-right: auto; }
.nav__liste { display: flex; align-items: center; gap: var(--e-2); }
.nav__lien { display: inline-flex; align-items: center; gap: .3rem; height: var(--cible); padding: 0 .8rem; border-radius: var(--r-pilule); font-size: .9375rem; font-weight: 500; white-space: nowrap; transition: background-color var(--d-2) ease, color var(--d-2) ease; }
.nav__lien:hover, .nav__item.est-ouvert > .nav__lien { background: var(--vert-brume); color: var(--vert-profond); }
.nav__lien.est-courant { background: var(--gris-plateau); }
.nav__lien .ico { width: 16px; height: 16px; transition: transform var(--d-2) var(--ease-sortie); }
.nav__item.est-ouvert > .nav__lien .ico { transform: rotate(180deg); }

/* Panneaux déroulants (Boutique, Ma démarche) */
.panneau {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1;
  padding: 0 var(--gouttiere) var(--e-4);
  visibility: hidden; opacity: 0; transform: translateY(-6px); transform-origin: top center;
  transition: opacity var(--d-2) ease-out, transform var(--d-2) var(--ease-sortie), visibility 0s linear var(--d-2);
  pointer-events: none;
}
.panneau__carte { max-width: var(--conteneur); margin-inline: auto; padding: var(--e-5); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-lg); box-shadow: var(--ombre-flottante); pointer-events: auto; }
.nav__item.est-ouvert > .panneau { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .nav__item:hover > .panneau { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav__item:hover > .nav__lien { background: var(--vert-brume); color: var(--vert-profond); }
}
.panneau__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-4); }
.panneau__titre { font-family: var(--font-titre); font-weight: 700; font-size: var(--fs-lg); }
.mega { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-4); }
.mega__lien { display: block; border-radius: var(--r-md); font-weight: 600; font-size: .9375rem; }
.mega__lien img { width: 100%; aspect-ratio: 13 / 8; object-fit: cover; border-radius: var(--r-md); background: var(--gris-plateau); transition: transform var(--d-3) var(--ease-sortie); }
.mega__lien span { display: block; padding: var(--e-2) var(--e-1) 0; }
.mega__lien:hover span { color: var(--vert-profond); text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .mega__lien:hover img { transform: scale(1.03); } }
.demarche { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--e-6); align-items: start; }
.demarche__sapo { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5); border-radius: var(--r-md); background: var(--blanc); border: 1.5px solid var(--or); color: var(--texte); transition: background-color var(--d-2) ease; }
.demarche__sapo:hover { background: var(--or-pale); }
.demarche__sapo strong { font-family: var(--font-titre); font-size: var(--fs-lg); line-height: 1.2; }
.demarche__sapo u { text-underline-offset: 4px; text-decoration-color: var(--or-brun); font-weight: 600; margin-top: var(--e-2); }
.demarche__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e-5); }
.demarche__liste a { display: flex; align-items: center; min-height: var(--cible); padding: var(--e-1) var(--e-3); border-radius: var(--r-sm); font-size: .9375rem; }
.demarche__liste a:hover { background: var(--vert-brume); color: var(--vert-profond); }

/* Recherche produits */
/* Recherche repliée par défaut (bouton loupe). Ouverte, elle recouvre la navigation, entre le logo et les icônes :
   elle est positionnée en absolu, donc rien ne bouge dans l'en-tête. */
.recherche { position: absolute; z-index: 2; top: 50%; left: calc(var(--gouttiere) + 56px + var(--e-4)); right: calc(var(--gouttiere) + 4 * 48px + 3 * var(--e-1) + var(--e-3)); height: 48px; margin-top: -24px; background: var(--blanc); opacity: 0; visibility: hidden; transform: translateX(16px); transition: opacity var(--d-2) ease-out, transform var(--d-2) var(--ease-sortie), visibility 0s linear var(--d-2); }
.recherche.est-ouverte { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.recherche__fermer { position: absolute; right: 2px; top: 2px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--texte-moyen); transition: background-color var(--d-2) ease, color var(--d-2) ease; }
.recherche__fermer:hover { background: var(--gris-plateau); color: var(--texte); }
.recherche__fermer:focus-visible { border-radius: 50%; outline-offset: -2px; }
.recherche__fermer .ico { width: 20px; height: 20px; }
.action[aria-expanded="true"] { background: var(--vert-brume); }
.recherche__champ { display: block; width: 100%; height: 48px; padding: 0 3.25rem 0 2.9rem; border: 1.5px solid var(--trait-champ); border-radius: var(--r-pilule); background: var(--blanc); font-size: 1rem; line-height: 1.2; color: var(--texte); transition: border-color var(--d-2) ease, background-color var(--d-2) ease; -webkit-appearance: none; appearance: none; }
.recherche__champ::placeholder { color: var(--texte-2); opacity: 1; }
.recherche__champ:hover { border-color: var(--vert-fonce); }
.recherche__champ:focus { border-color: var(--vert-profond); }
.recherche__champ:focus-visible { outline-offset: 2px; border-radius: var(--r-pilule); }
.recherche__champ::-webkit-search-cancel-button { -webkit-appearance: none; }
.recherche__ico { position: absolute; left: var(--e-4); top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--vert-fonce); pointer-events: none; }
.recherche__panneau { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: var(--z-suggestions); max-height: min(70dvh, 520px); overflow-y: auto; padding: var(--e-2); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-md); box-shadow: var(--ombre-flottante); }
.recherche__panneau[hidden] { display: none; }
.recherche__option { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); min-height: 60px; padding: var(--e-1) var(--e-3) var(--e-1) var(--e-1); border-radius: var(--r-sm); }
.recherche__option:hover, .recherche__option.est-active { background: var(--vert-brume); }
.recherche__option img { width: 52px; height: 52px; object-fit: contain; border-radius: var(--r-xs); }
.recherche__vignette { border-radius: var(--r-sm); background: var(--blanc); border: 1px solid var(--trait); overflow: hidden; }
.recherche__option strong { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.recherche__option small { display: block; font-size: var(--fs-xs); color: var(--texte-moyen); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche__option b { font-weight: 600; font-size: .9375rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recherche__vide { padding: var(--e-4); font-size: var(--fs-sm); color: var(--texte-moyen); overflow-wrap: anywhere; }
.recherche__vide a { color: var(--lien); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.recherche__tous { display: flex; align-items: center; justify-content: space-between; min-height: var(--cible); margin-top: var(--e-1); padding: 0 var(--e-3); border-top: 1px solid var(--trait); font-size: var(--fs-sm); font-weight: 600; color: var(--lien); }

.entete__actions { display: flex; align-items: center; gap: var(--e-1); flex: none; }
.action { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--vert-profond); transition: background-color var(--d-2) ease, transform var(--d-1) ease-out; }
.action:hover { background: var(--vert-brume); }
.action:active { transform: scale(.94); }
.action:focus-visible { border-radius: 50%; }
.compteur { position: absolute; top: 3px; right: 1px; min-width: 21px; height: 21px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--r-pilule); background: var(--or); color: var(--texte); border: 2px solid var(--blanc); font-size: .6875rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.compteur[data-vide="true"] { display: none; }

/* 1024–1279 : la navigation tient sur la même ligne, un peu resserrée */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__liste { gap: 0; }
  .nav__lien { padding-inline: .6rem; }
}
@media (min-width: 1024px) { .marque__nom { display: none; } }
@media (min-width: 1280px) { .nav { margin-left: var(--e-2); } }
@media (min-width: 1440px) { .entete__rang { gap: var(--e-5); } }

/* 9. NAVIGATION MOBILE (< 1024 px) : barre au pouce + feuille de menu ------- */
.barre-mobile, .feuille, .voile { display: none; }
@media (max-width: 1023px) {
  :root { --entete-h: 0px; }
  .entete { position: static; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .entete__rang { gap: var(--e-2) var(--e-3); padding-block: var(--e-2); min-height: 0; }
  .nav, .action--favoris, .action--panier { display: none; }
  /* Sur mobile, le champ ouvert recouvre toute la rangée (logo compris) */
  .recherche { left: var(--gouttiere); right: var(--gouttiere); }
  .entete__actions { margin-left: auto; }
  .entete { position: relative; z-index: var(--z-entete); }
  .marque img { width: 48px; }

  .barre-mobile {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch;
    position: fixed; left: var(--e-3); right: var(--e-3); bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-barre-mobile);
    max-width: 520px; margin-inline: auto; height: var(--barre-mobile-h); padding: 0 var(--e-2);
    background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-pilule);
    box-shadow: var(--ombre-flottante);
  }
  .barre-mobile__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: var(--cible); border-radius: var(--r-pilule); font-size: .75rem; font-weight: 500; line-height: 1.2; color: var(--texte-moyen); transition: color var(--d-2) ease, transform var(--d-1) ease-out; }
  .barre-mobile__item .ico { width: 24px; height: 24px; }
  .barre-mobile__item:active { transform: scale(.94); }
  .barre-mobile__item[aria-current="page"], .barre-mobile__item[aria-expanded="true"] { color: var(--vert-profond); font-weight: 600; }
  .barre-mobile__item[aria-current="page"]::before { content: ""; position: absolute; top: 6px; width: 28px; height: 3px; border-radius: 3px; background: var(--or); }
  .barre-mobile__item:focus-visible { outline-offset: -4px; border-radius: var(--r-pilule); }
  .barre-mobile__item .compteur { top: 6px; right: calc(50% - 24px); }

  .voile { display: block; position: fixed; inset: 0; z-index: var(--z-voile); background: rgba(45, 42, 37, .5); opacity: 0; visibility: hidden; transition: opacity var(--d-3) ease, visibility 0s linear var(--d-3); }
  .voile.est-ouvert { opacity: 1; visibility: visible; transition-delay: 0s; }
  .feuille {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-feuille);
    max-width: 640px; margin-inline: auto; max-height: min(86dvh, 720px);
    background: var(--blanc); border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%); visibility: hidden;
    transition: transform var(--d-3) var(--ease-tiroir), visibility 0s linear var(--d-3);
    overscroll-behavior: contain;
  }
  .feuille.est-ouvert { transform: none; visibility: visible; transition-delay: 0s; }
  .feuille__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-4) var(--e-2) var(--e-5); }
  .feuille__tete::before { content: ""; position: absolute; top: 8px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: var(--trait); }
  .feuille__titre { font-size: var(--fs-lg); }
  .feuille__corps { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--e-4) calc(var(--e-5) + env(safe-area-inset-bottom, 0px)); }
  .menu-mobile > li + li { border-top: 1px solid var(--gris-plateau); }
  .menu-mobile a, .menu-mobile summary { display: flex; align-items: center; gap: var(--e-3); min-height: 52px; padding: var(--e-2) var(--e-2); border-radius: var(--r-sm); font-size: var(--fs-md); font-weight: 500; }
  .menu-mobile summary { justify-content: space-between; cursor: pointer; list-style: none; }
  .menu-mobile summary::-webkit-details-marker { display: none; }
  .menu-mobile summary .ico { width: 20px; height: 20px; transition: transform var(--d-2) var(--ease-sortie); }
  .menu-mobile details[open] summary .ico { transform: rotate(180deg); }
  .menu-mobile a:active, .menu-mobile summary:active { background: var(--vert-brume); }
  .menu-mobile [aria-current="page"] { color: var(--vert-profond); font-weight: 600; }
  .sous-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); padding: 0 0 var(--e-4); }
  .sous-menu a { min-height: 56px; padding: var(--e-1) var(--e-3) var(--e-1) var(--e-1); background: var(--vert-brume); font-size: .9375rem; line-height: 1.25; }
  .sous-menu img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; flex: none; }
  .sous-menu--texte a { padding-left: var(--e-3); }
  .feuille__pied { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-4); }
  .feuille__pied .lien { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 599px) {
  .marque { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 359px) {
  .marque { gap: var(--e-2); }
  .marque img { width: 42px; }
  .marque__nom { font-size: 1rem; }
}

/* 10. FIL D'ARIANE ET BANNIÈRE DE PAGE -------------------------------------- */
.ariane { padding-block: var(--e-4) var(--e-2); font-size: var(--fs-sm); color: var(--texte-moyen); }
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-1); }
.ariane li { display: inline-flex; align-items: center; gap: var(--e-1); }
.ariane a { display: inline-flex; align-items: center; min-height: var(--cible); padding-inline: var(--e-1); border-radius: var(--r-xs); text-decoration: underline; text-decoration-color: var(--trait); text-underline-offset: 4px; }
.ariane a:hover { color: var(--vert-profond); text-decoration-color: var(--vert); }
.ariane .ico { width: 14px; height: 14px; color: var(--trait-champ); }
.ariane [aria-current] { padding-inline: var(--e-1); color: var(--texte); font-weight: 500; }
/* Bannière de page (image et titre varient d'une page à l'autre) : bandeau dans le cadre, sous l'en-tête ;
   le fil d'Ariane se pose dans la zone vide de la photo. Sur la fiche produit, .banniere__surtitre est un simple
   rappel du rayon (masqué sur mobile) ; avec .entree--titre, c'est le titre de la page (h1), toujours visible. */
.entree { position: relative; }
.banniere { position: relative; display: block; height: 240px; margin-top: var(--e-3); overflow: hidden; border-radius: var(--r-lg); background: var(--blanc); }
.banniere img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.banniere__surtitre { display: none; font-family: var(--font-titre); font-weight: 700; font-size: var(--fs-xl); line-height: 1.15; }
.entree--titre .banniere__surtitre { display: block; font-size: var(--fs-2xl); }
@media (min-width: 768px) {
  .entree { margin-bottom: var(--e-5); }
  .entree__texte { position: absolute; left: 39%; width: 33%; top: var(--e-3); height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: var(--e-6); }
  .banniere__surtitre { display: block; }
  .entree__texte .ariane { padding-block: 0; }
  .entree__texte .ariane ol { justify-content: center; }
}
@media (max-width: 767px) {
  /* Très compact sur mobile : une bande de photo, le fil d'Ariane reste dessous */
  .banniere { height: 92px; margin-top: var(--e-2); border-radius: var(--r-sm); }
  .banniere img { object-position: 50% 30%; }
  .entree--titre .banniere__surtitre { margin-top: var(--e-4); font-size: 1.75rem; }
  .entree--titre .ariane { padding-block: 0; }
}

/* 11. CARTE PRODUIT ET RANGÉE DÉFILANTE ------------------------------------- */
.grille-produits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-7) var(--e-5); }
@media (max-width: 1023px) { .grille-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6) var(--e-4); } }
@media (max-width: 719px) {
  .grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-3); }
  .carte__prix { font-size: var(--fs-md); }
  .carte__meta { gap: var(--e-1); }
  .carte__nb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) { .carte__meta { flex-wrap: wrap; min-height: 40px; align-content: flex-start; } }
/* Variante « une ligne qui défile » : la carte suivante dépasse pour signaler la suite */
.rangee-produits { --visibles: 4.3; --ecart: var(--e-5); display: flex; gap: var(--ecart); margin: calc(-1 * var(--e-2)); padding: var(--e-2); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--e-2); scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--r-md); }
.rangee-produits::-webkit-scrollbar { display: none; }
.rangee-produits:focus-visible { outline-offset: 2px; }
.rangee-produits > .carte { flex: 0 0 calc((100% - var(--ecart) * (var(--visibles) - .3)) / var(--visibles)); scroll-snap-align: start; }
.section__outils { display: flex; align-items: center; gap: var(--e-4); }
.section__fleches { display: flex; }
@media (max-width: 1099px) { .rangee-produits { --visibles: 3.3; --ecart: var(--e-4); } }
@media (max-width: 719px) {
  .rangee-produits { --visibles: 2.25; --ecart: var(--e-3); margin-inline: calc(-1 * var(--gouttiere)); padding-inline: var(--gouttiere); scroll-padding-inline: var(--gouttiere); border-radius: 0; }
  .section__fleches { display: none; }
}
@media (max-width: 419px) { .rangee-produits { --visibles: 1.7; } }
.carte { position: relative; display: flex; flex-direction: column; min-width: 0; }
.carte__visuel { position: relative; aspect-ratio: 1 / 1; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-savon-a); overflow: hidden; transition: border-color var(--d-2) ease; }
.carte:nth-child(4n + 2) .carte__visuel { border-radius: var(--r-savon-b); }
.carte:nth-child(4n + 3) .carte__visuel { border-radius: var(--r-savon-c); }
.carte:nth-child(4n + 4) .carte__visuel { border-radius: var(--r-savon-d); }
/* Les packshots sur fond blanc se fondent dans la surface beige */
.carte__visuel img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--d-3) var(--ease-sortie); }
.carte__visuel--photo img { object-fit: cover; mix-blend-mode: normal; }
@media (hover: hover) and (pointer: fine) {
  .carte:hover .carte__visuel { border-color: var(--or); }
  .carte:hover .carte__visuel img { transform: scale(1.04); }
}
.carte__favori { position: absolute; right: var(--e-2); top: var(--e-2); z-index: 2; display: grid; place-items: center; width: var(--cible); height: var(--cible); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--texte); transition: background-color var(--d-2) ease, color var(--d-2) ease, transform var(--d-1) ease-out; }
.carte__favori:hover { background: var(--blanc); color: var(--or-brun); }
.carte__favori:active { transform: scale(.9); }
.carte__favori:focus-visible { border-radius: 50%; }
.carte__favori .ico { width: 22px; height: 22px; }
[data-favori][aria-pressed="true"] { color: var(--or-ambre); }
[data-favori][aria-pressed="true"] .ico { fill: currentColor; }
.carte__corps { display: flex; flex-direction: column; flex: 1; gap: var(--e-1); padding: var(--e-3) var(--e-1) 0; }
/* Quatre rangées de hauteur fixe : état et note, nom (2 lignes), bénéfice (2 lignes), prix et ajout */
.carte__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: 22px; font-size: var(--fs-xs); line-height: 1.3; }
.carte__stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--vert-profond); white-space: nowrap; }
.carte__stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }
.carte--rupture .carte__stock { color: var(--texte-moyen); }
.carte--rupture .carte__stock::before { background: var(--trait-champ); }
.carte__nom { font-size: var(--fs-md); line-height: 1.25; min-height: 2.5em; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.carte__nom a { outline: none; }
.carte__nom a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-md); }
.carte__nom a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 4px; }
.carte:hover .carte__nom a { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.carte__desc { min-height: 2.9em; font-size: var(--fs-sm); line-height: 1.45; color: var(--texte-moyen); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.carte__note { display: inline-flex; align-items: center; gap: var(--e-1); color: var(--texte-moyen); font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte__note .ico { width: 14px; height: 14px; color: var(--or-ambre); }
.carte__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: 56px; margin-top: auto; padding-top: var(--e-2); }
.carte__prix { font-weight: 600; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte__ajout { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-width: 48px; height: 48px; padding: 0 var(--e-4); border-radius: var(--r-pilule); background: var(--action); color: var(--sur-action); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; transition: background-color var(--d-2) ease, color var(--d-2) ease, transform var(--d-1) ease-out; }
.carte__ajout:hover { background: var(--action-survol); }
.carte__ajout:active { transform: scale(.95); background: var(--action-appui); }
.carte__ajout:focus-visible { border-radius: var(--r-pilule); }
.carte__ajout .ico { width: 20px; height: 20px; }
@media (max-width: 1279px) {
  .carte__ajout { width: 48px; padding: 0; }
  .carte__ajout .ajout__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Rupture de stock : image éteinte, mention écrite, pas d'action d'achat */
.carte--rupture .carte__visuel img { filter: grayscale(.7); opacity: .5; }
.carte--rupture .carte__prix { color: var(--texte-moyen); font-weight: 500; font-size: var(--fs-md); }
.carte--rupture .carte__pied { flex-wrap: nowrap; }
@media (max-width: 359px) { .carte__indispo { display: none !important; } }
.carte__indispo { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--e-2); border-radius: var(--r-pilule); border: 1.5px dashed var(--trait); color: var(--texte-moyen); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .carte--rupture:hover .carte__visuel { border-color: var(--trait-champ); } }
/* Rayon rappelé sur la carte quand la grille mélange les catégories (boutique, recherche) */
.carte__rayon { display: none; font-size: var(--fs-xs); font-weight: 500; color: var(--or-brun); line-height: 1.3; }
.liste__grille--mixte .carte__rayon { display: block; }
/* Rangée entièrement visible : les flèches n'ont plus d'objet */
[data-defile].est-complet .section__fleches { display: none; }

/* 12. LETTRE D'INFORMATION -------------------------------------------------- */
.lettre { padding-top: var(--e-bande); }
.lettre__panneau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--e-5) var(--e-7); padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); background-color: var(--lettre-fond); border: 1px solid var(--lettre-filet); border-radius: var(--r-xl); overflow: hidden; position: relative; isolation: isolate; }
.lettre__alveoles { position: absolute; right: -70px; top: -56px; z-index: -1; width: 340px; height: auto; color: var(--or); opacity: .3; }
.lettre__titre { font-size: var(--fs-xl); max-width: 20ch; }
.lettre__chapo { margin-top: var(--e-2); color: var(--texte-moyen); max-width: 44ch; }
.lettre__form { display: flex; gap: var(--e-2); padding: 5px; background: var(--blanc); border: 1.5px solid var(--trait-champ); border-radius: var(--r-pilule); }
.lettre__form:has(.lettre__champ:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.lettre__champ { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 var(--e-4); border: 0; border-radius: var(--r-pilule); background: transparent; font-size: 1rem; }
.lettre__champ:focus-visible { outline: none; }
.lettre__champ::placeholder { color: var(--texte-2); opacity: 1; }
.lettre__note { margin-top: var(--e-3); font-size: var(--fs-xs); line-height: 1.5; color: var(--texte-moyen); max-width: 60ch; }
.lettre__retour { margin-top: var(--e-2); font-size: var(--fs-sm); font-weight: 600; min-height: 1.5em; }
@media (max-width: 899px) { .lettre__panneau { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) {
  .lettre__alveoles { width: 220px; right: -90px; top: -70px; }
  .lettre__form { flex-direction: column; padding: var(--e-2); border-radius: var(--r-md); }
  .lettre__champ { border-radius: var(--r-sm); }
}

/* 13. PIED DE PAGE — fond clair, trois zones : contact, liens, barre basse --- */
.pied { margin-top: var(--e-bande); padding-top: var(--e-6); background: var(--pied-fond); border-top: 1px solid var(--pied-filet); }
.pied__barre { padding-block: var(--e-3) var(--e-4); background: var(--pied-barre); border-top: 1px solid var(--pied-filet); }
.pied__contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-5) var(--e-6); padding: var(--e-5) clamp(1.25rem, 3vw, 3rem); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-lg); }
.pied__marque { display: flex; align-items: center; gap: var(--e-4); min-width: 0; }
.pied__marque img { width: 64px; flex: none; }
.pied__marque strong { display: block; font-family: var(--font-titre); font-size: var(--fs-lg); line-height: 1.2; }
.pied__marque span { display: block; font-size: .9375rem; font-style: italic; color: var(--texte-moyen); }
.pied__boutons { display: flex; flex-wrap: wrap; gap: var(--e-3); }

.pied__grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-6) var(--e-7); padding: var(--e-7) clamp(0rem, 3vw - 1rem, 3rem); }
.pied__titre { font-size: var(--fs-md); margin-bottom: var(--e-3); }
.pied__titre::after { content: ""; display: block; width: 32px; height: 3px; margin-top: var(--e-2); border-radius: 3px; background: var(--or); }
.pied address { font-size: .9375rem; line-height: 1.7; color: var(--texte-moyen); }
.pied__appuis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin-top: var(--e-3); }
.pied__mention { display: inline-flex; align-items: center; gap: var(--e-3); min-height: 48px; font-size: var(--fs-sm); font-weight: 500; border-radius: var(--r-sm); }
.pied__mention img { width: 40px; height: 40px; flex: none; }
.pied__mention span { text-decoration: underline; text-decoration-color: var(--trait-champ); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color var(--d-2) ease; }
.pied__mention:hover span { text-decoration-color: var(--or); }
.pied__reseau { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--blanc); color: var(--or-brun); transition: background-color var(--d-2) ease, color var(--d-2) ease, transform var(--d-1) ease-out; }
.pied__reseau:hover { background: var(--or); color: var(--texte); }
.pied__reseau:active { transform: scale(.94); }
.pied__reseau:focus-visible { border-radius: 50%; }
.pied__liens { display: grid; }
.pied__liens--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-5); }
.pied__liens a { display: inline-flex; align-items: center; min-height: var(--cible); min-width: var(--cible); font-size: .9375rem; line-height: 1.35; color: var(--texte-moyen); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: color var(--d-2) ease, text-decoration-color var(--d-2) ease; }
.pied__liens a:hover { color: var(--texte); text-decoration-color: var(--or); }

.pied__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-6); font-size: var(--fs-sm); color: var(--texte-moyen); }
.pied__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-5); }
.pied__legal a { display: inline-flex; align-items: center; min-height: var(--cible); color: var(--texte-moyen); text-decoration: underline; text-decoration-color: var(--trait-champ); text-underline-offset: 4px; }
.pied__legal a:hover { color: var(--texte); text-decoration-color: var(--or); }
.pied__google { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible); padding: 0 var(--e-4); border: 1px solid var(--trait); border-radius: var(--r-pilule); background: var(--blanc); color: var(--texte); font-weight: 500; font-variant-numeric: tabular-nums; transition: border-color var(--d-2) ease; }
.pied__google:hover { border-color: var(--or-fonce); }
.pied__google:focus-visible { border-radius: var(--r-pilule); }
.pied__google .ico--plein { width: 16px; height: 16px; color: var(--or-ambre); }
.pied__google svg:first-child { width: 18px; height: 18px; }
.pied__google small { font-size: inherit; font-weight: 400; color: var(--texte-moyen); }
.pied__paiements { display: flex; align-items: center; gap: var(--e-2); min-height: var(--cible); }
.pied__paiements span { margin-right: var(--e-1); }
.pied__paiements img { width: 44px; height: 30px; padding: 2px; object-fit: contain; border: 1px solid var(--trait); border-radius: 6px; background: var(--blanc); }
@media (max-width: 1023px) {
  /* La dernière ligne reste lisible au-dessus de la barre de navigation flottante */
  .pied__barre { padding-bottom: calc(var(--barre-mobile-h) + var(--e-6) + env(safe-area-inset-bottom, 0px)); }
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-5); padding-block: var(--e-6); }
}
@media (max-width: 599px) {
  .pied__contact { padding: var(--e-5) var(--e-4); border-radius: var(--r-md); }
  .pied__boutons { width: 100%; }
  .pied__boutons .btn { flex: 1 1 100%; }
  .pied__grille > :nth-child(-n + 2) { grid-column: 1 / -1; }
  .pied__bas { flex-direction: column; align-items: flex-start; gap: var(--e-1); }
}

/* 14. MOUVEMENT RÉDUIT ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn:active, .action:active, .carte__ajout:active, .carte__favori:active, .barre-mobile__item:active { transform: none; }
  .carte:hover .carte__visuel img, .mega__lien:hover img, .lien:hover .ico { transform: none; }
  .recherche { transform: none; }
  .feuille, .panneau, .recherche { transition: opacity .01ms, visibility 0s !important; }
}

/* 15. COMPLÉMENTS DU GABARIT RÉEL (template_v2.php) ---------------------------
   Éléments absents de la maquette statique ou portés par sa feuille de démonstration :
   fenêtre de dialogue (sauvegarde du panier), bandeau promo sans lien ou à plusieurs messages,
   menu du client connecté, retour de la lettre d'information, réseaux sociaux sans pictogramme du sprite. */
/* 15.1 Fenêtre de dialogue centrée — reprise de la maquette (maquette-demo.css, 11.1) */
.fenetre { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: var(--e-4); background: rgba(45, 42, 37, .55); opacity: 0; visibility: hidden; transition: opacity var(--d-2) ease-out, visibility 0s linear var(--d-2); overscroll-behavior: contain; }
.fenetre.est-ouvert { opacity: 1; visibility: visible; transition-delay: 0s; }
.fenetre__carte { position: relative; width: 100%; max-width: 500px; max-height: calc(100dvh - 2 * var(--e-4)); overflow: hidden auto; padding: var(--e-6) var(--e-6) calc(var(--e-5) + 4px); background: var(--blanc); border-radius: var(--r-lg); text-align: center; box-shadow: var(--ombre-flottante); transform: translateY(12px) scale(.97); transition: transform var(--d-3) var(--ease-sortie); }
.fenetre.est-ouvert .fenetre__carte { transform: none; }
.fenetre__carte:focus-visible { outline: none; }
.fenetre__fermer { position: absolute; right: var(--e-2); top: var(--e-2); color: var(--texte-moyen); }
.fenetre__embleme { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--e-3); border-radius: var(--r-galet-a); background: var(--or); color: var(--texte); }
.fenetre__embleme .ico { width: 30px; height: 30px; stroke-width: 2.25; }
.fenetre__titre { font-size: var(--fs-xl); margin-bottom: var(--e-5); }
.fenetre__actions { display: flex; gap: var(--e-3); }
.fenetre__actions .btn { flex: 1 1 auto; padding-inline: var(--e-4); white-space: nowrap; }
.sauvegarde__champ { display: block; text-align: left; }
.sauvegarde__champ label { display: block; margin-bottom: var(--e-2); font-size: var(--fs-sm); font-weight: 500; color: var(--texte-moyen); }
.sauvegarde__champ input { display: block; width: 100%; height: 52px; padding: 0 var(--e-4); border: 1.5px solid var(--trait-champ); border-radius: var(--r-sm); background: var(--blanc); font-size: 1rem; transition: border-color var(--d-2) ease; }
.sauvegarde__champ input:hover { border-color: var(--vert-fonce); }
.sauvegarde__champ input:focus-visible { border-color: var(--vert-profond); border-radius: var(--r-sm); outline-offset: 2px; }
.sauvegarde__retour { margin-top: var(--e-2); min-height: 1.5em; font-size: var(--fs-sm); font-weight: 500; color: #b42318; text-align: left; }
.sauvegarde .fenetre__actions { margin-top: var(--e-3); }
@media (max-width: 479px) {
  .fenetre__carte { padding: var(--e-6) var(--e-4) calc(var(--e-4) + 4px); border-radius: var(--r-md); }
  .fenetre__actions { flex-direction: column-reverse; }
  .fenetre__actions .btn { flex: none; width: 100%; }
}
/* 15.2 Bandeau promo sans lien : même mise en place que le lien */
.promo__texte { display: flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--cible); padding: var(--e-2) var(--gouttiere); line-height: 1.35; }
/* 15.3 Menu du client connecté : panneau sous l'icône du compte (mêmes mécanismes que les panneaux de navigation) */
.compte__initiales { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--or); color: var(--texte); font-size: var(--fs-xs); font-weight: 700; line-height: 1; letter-spacing: .02em; }
.panneau--compte .panneau__carte { max-width: 340px; margin-right: 0; padding: var(--e-4); }
.panneau--compte .panneau__titre { padding: var(--e-1) var(--e-3) var(--e-3); }
.compte__infos { display: grid; gap: var(--e-2); margin-bottom: var(--e-3); }
.compte__infos a { display: flex; align-items: center; gap: var(--e-3); min-height: 56px; padding: var(--e-2) var(--e-3); border-radius: var(--r-sm); background: var(--vert-brume); }
.compte__infos a:hover { color: var(--vert-profond); }
.compte__infos .ico { color: var(--vert-profond); }
.compte__infos strong { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.compte__infos small { display: block; font-size: var(--fs-xs); color: var(--texte-moyen); line-height: 1.35; }
.compte__liens { border-top: 1px solid var(--trait); padding-top: var(--e-2); }
.compte__liens a { display: flex; align-items: center; min-height: var(--cible); padding: var(--e-1) var(--e-3); border-radius: var(--r-sm); font-size: .9375rem; }
.compte__liens a:hover { background: var(--vert-brume); color: var(--vert-profond); }
/* 15.4 Lettre d'information : retour de l'envoi */
.lettre__retour[data-etat="succes"] { color: var(--vert-profond); }
.lettre__retour[data-etat="erreur"] { color: #b42318; }
/* 15.5 Réseaux sociaux hors sprite : pictogramme du moteur sdj-icons.css */
.pied__reseau i { font-size: 22px; }
/* 15.6 Message d'information ou d'erreur dans le contenu (message boutique du BO, erreurs de formulaire) */
.message { margin-bottom: var(--e-4); padding: var(--e-3) var(--e-4); border: 1px solid var(--trait); border-radius: var(--r-md); background: var(--vert-brume); color: var(--texte); font-size: .9375rem; line-height: 1.5; }
.message--erreur { border-color: #f1b5ae; background: #fdf1ef; color: #8a1c12; }

/* 16. COMPLÉMENTS DES PAGES SANS BLOC (contact, FAQ, mentions légales, événements, galeries, panier…) ----
   Ajouts du 03/10/2026 : composants partagés par plusieurs vues v2, absents de la maquette.
   ----------------------------------------------------------------------------------------------------- */
/* 16.1 Champ de formulaire : étiquette au-dessus, contour 3:1, cible de 52 px */
.champ { display: block; margin-bottom: var(--e-4); }
.champ > label { display: block; margin-bottom: var(--e-2); font-size: var(--fs-sm); font-weight: 600; }
.champ > label small { font-size: inherit; font-weight: 400; color: var(--texte-moyen); }
.champ input, .champ textarea, .champ select { display: block; width: 100%; min-height: 52px; padding: .8rem var(--e-4); border: 1.5px solid var(--trait-champ); border-radius: var(--r-sm); background: var(--blanc); font: inherit; font-size: 1rem; line-height: 1.5; color: var(--texte); transition: border-color var(--d-2) ease; }
.champ textarea { min-height: 10rem; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-2); opacity: 1; }
.champ input:hover, .champ textarea:hover, .champ select:hover { border-color: var(--vert-fonce); }
.champ input:focus-visible, .champ textarea:focus-visible, .champ select:focus-visible { border-color: var(--vert-profond); border-radius: var(--r-sm); outline-offset: 2px; }
.champ__aide { margin-top: var(--e-2); font-size: var(--fs-sm); color: var(--texte-moyen); }
.champs-2 { display: grid; gap: 0 var(--e-4); }
@media (min-width: 600px) { .champs-2 { grid-template-columns: 1fr 1fr; } }
.message--succes { border-color: var(--vert); }
.message ul { display: grid; gap: var(--e-1); }
/* 16.2 Accordéon (<details>) : FAQ, documents légaux */
.accordeon { display: grid; gap: var(--e-3); }
.accordeon__item { border: 1px solid var(--trait); border-radius: var(--r-md); background: var(--blanc); transition: border-color var(--d-2) ease; }
.accordeon__item[open] { border-color: var(--vert); }
.accordeon__item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 64px; padding: var(--e-3) var(--e-5); border-radius: var(--r-md); cursor: pointer; list-style: none; }
.accordeon__item > summary::-webkit-details-marker { display: none; }
.accordeon__item > summary:focus-visible { border-radius: var(--r-md); outline-offset: -3px; }
.accordeon__titre { font-family: var(--font-texte); font-size: var(--fs-md); font-weight: 600; line-height: 1.35; }
.accordeon__item > summary .ico { flex: none; width: 22px; height: 22px; color: var(--vert-profond); transition: transform var(--d-2) var(--ease-sortie); }
.accordeon__item[open] > summary .ico { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .accordeon__item > summary:hover { background: var(--vert-brume); } }
.accordeon__corps { padding: var(--e-2) var(--e-5) var(--e-5); }
.accordeon__corps.prose { max-width: none; }
@media (max-width: 599px) {
  .accordeon__item > summary { padding-inline: var(--e-4); }
  .accordeon__corps { padding-inline: var(--e-4); }
}
@media (prefers-reduced-motion: reduce) { .accordeon__item > summary .ico { transition: none; } }

/* ============================================================
   16. Menu principal centré et plus grand (demande du 2026-10-03)
   Le menu se centre entre le logo et les actions ; le corps grandit
   dès que la largeur le permet, sans jamais passer à la ligne.
   ============================================================ */
@media (min-width: 1024px) {
  .nav { margin-inline: auto; }
}
@media (min-width: 1280px) {
  .nav { margin-left: auto; }
  .nav__lien { font-size: 1.0625rem; padding-inline: .9rem; }
}
@media (min-width: 1440px) {
  .nav__lien { font-size: 1.125rem; padding-inline: 1rem; }
}

/* 17. COMPLÉMENTS DES PAGES SANS BLOC, SUITE (événements, galeries, avis, désabonnement) --------------
   Ajouts du 03/10/2026, à la suite de « 16. Compléments des pages sans bloc » (16.1 champs, 16.2 accordéon).
   ----------------------------------------------------------------------------------------------------- */
/* 17.1 Visionneuse d'images (partiel v2/frontend/partials/visionneuse.php, js/visionneuse.js) :
   la photo n'est jamais agrandie au-delà de sa définition (width et height automatiques, bornes max seulement) */
.visionneuse { position: fixed; inset: 0; z-index: 110; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e-2); padding: var(--e-3); background: rgba(45, 42, 37, .94); color: var(--blanc); opacity: 0; visibility: hidden; transition: opacity var(--d-2) ease-out, visibility 0s linear var(--d-2); }
.visionneuse.est-ouvert { opacity: 1; visibility: visible; transition-delay: 0s; }
.visionneuse:focus-visible { outline: none; }
.visionneuse__compte { grid-column: 1 / 3; grid-row: 1; padding-left: var(--e-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.visionneuse__bouton { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--blanc); transition: background-color var(--d-2) ease, transform var(--d-1) ease-out; }
.visionneuse__bouton:hover { background: rgba(255, 255, 255, .28); }
.visionneuse__bouton:active { transform: scale(.94); }
.visionneuse__bouton:focus-visible { outline-color: var(--or-clair); border-radius: 50%; }
.visionneuse__fermer { grid-column: 3; grid-row: 1; justify-self: end; }
.visionneuse__prec { grid-column: 1; grid-row: 2; }
.visionneuse__suiv { grid-column: 3; grid-row: 2; }
.visionneuse__vue { grid-column: 2; grid-row: 2; display: grid; place-items: center; min-height: 0; height: 100%; margin: 0; }
.visionneuse__vue img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 170px); border-radius: var(--r-xs); background: rgba(255, 255, 255, .06); }
.visionneuse__legende { grid-column: 1 / -1; grid-row: 3; min-height: 1.6em; text-align: center; font-size: .9375rem; }
.visionneuse--seule .visionneuse__prec, .visionneuse--seule .visionneuse__suiv { visibility: hidden; }
@media (max-width: 599px) {
  .visionneuse { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: var(--e-2); }
  .visionneuse__compte { grid-column: 1; }
  .visionneuse__fermer { grid-column: 2; }
  .visionneuse__vue { grid-column: 1 / -1; }
  .visionneuse__vue img { max-height: calc(100dvh - 220px); }
  .visionneuse__legende { grid-row: 3; }
  .visionneuse__prec { grid-column: 1; grid-row: 4; justify-self: end; }
  .visionneuse__suiv { grid-column: 2; grid-row: 4; justify-self: start; }
}
/* Vignette qui ouvre la visionneuse : un vrai bouton autour de l'image */
.vignette-photo { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border-radius: var(--r-sm); background: var(--gris-plateau); cursor: zoom-in; }
.vignette-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-3) var(--ease-sortie); }
.vignette-photo:focus-visible { border-radius: var(--r-sm); }
@media (hover: hover) and (pointer: fine) { .vignette-photo:hover img { transform: scale(1.04); } }
/* 17.2 Carte d'état (lien invalide, confirmation, remerciement) : un panneau sauge contenu et centré */
.etat { display: grid; justify-items: center; gap: var(--e-3); max-width: 640px; margin-inline: auto; padding: clamp(1.75rem, 1rem + 4vw, 3.5rem) clamp(1.25rem, .6rem + 3vw, 3rem); border-radius: var(--r-xl); background: var(--sauge-pale); text-align: center; }
.etat__embleme { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-galet-a); background: var(--blanc); color: var(--vert-profond); }
.etat__embleme .ico { width: 30px; height: 30px; }
.etat--alerte .etat__embleme { color: #b42318; }
.etat__titre { font-size: var(--fs-xl); }
.etat__texte { max-width: 48ch; color: var(--texte-moyen); }
.etat__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-3); margin-top: var(--e-3); }
.etat__actions .btn--contour, .etat__actions .btn--neutre { background: var(--blanc); }
.etat__retour { width: 100%; margin: var(--e-2) 0 0; text-align: left; }
.etat__retour:empty { display: none; }
@media (max-width: 479px) { .etat__actions .btn { width: 100%; } }
/* 17.3 Pagination numérotée */
.pages { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin-top: var(--e-6); }
.pages a { display: grid; place-items: center; min-width: var(--cible); height: var(--cible); padding: 0 var(--e-3); border: 1.5px solid var(--trait-champ); border-radius: var(--r-pilule); background: var(--blanc); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color var(--d-2) ease, border-color var(--d-2) ease; }
.pages a:hover { border-color: var(--texte); }
.pages a:focus-visible { border-radius: var(--r-pilule); }
.pages a[aria-current] { border-color: var(--texte); background: var(--texte); color: var(--blanc); }
@media (prefers-reduced-motion: reduce) { .visionneuse, .visionneuse__bouton, .vignette-photo img { transition: none; } .vignette-photo:hover img { transform: none; } }
/* 17.4 Mosaïque de vignettes carrées (galerie liée à un événement, vue d'une galerie) */
.mosaique { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)); gap: var(--e-3); }
.mosaique .vignette-photo { aspect-ratio: 1; }
.mosaique figure { margin: 0; }
.mosaique figcaption, .mosaique__legende { margin-top: var(--e-2); font-size: var(--fs-sm); color: var(--texte-moyen); }
/* 17.5 Photo plus petite que son cadre (js/photos.js) : jamais agrandie. Le cadre se réduit à la photo
   (ni fond gris ni bande) ; la photo garde sa taille réelle, centrée. */
img.est-native { position: static !important; inset: auto !important; width: min(100%, var(--def-l)) !important; height: auto !important; aspect-ratio: var(--def-r); object-fit: contain !important; transform: none !important; border-radius: inherit; }
.cadre-natif { display: grid !important; place-items: center; aspect-ratio: auto !important; min-height: 0 !important; height: auto !important; background: none !important; }
/* 17.6 Fil d'Ariane dans la bannière (à partir de 768 px) : une seule ligne ; le dernier élément, s'il est long,
   est coupé par des points de suspension (le texte entier reste dans la page pour les lecteurs d'écran) */
@media (min-width: 768px) {
  .entree__texte .ariane { width: 100%; }
  .entree__texte .ariane ol { flex-wrap: nowrap; }
  .entree__texte .ariane li { flex: none; }
  .entree__texte .ariane li:last-child { flex: 0 1 auto; min-width: 0; }
  .entree__texte .ariane [aria-current] { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
/* 17.7 Panneau de suggestions de la recherche : titres de groupe, liens vers une catégorie ou une page, rupture */
.recherche__groupe { margin: var(--e-2) var(--e-3) var(--e-1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-moyen); }
.recherche__option.recherche__option--lien { display: flex; align-items: center; min-height: var(--cible); padding-left: var(--e-3); }
.recherche__option--lien > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-2); min-width: 0; }
.recherche__option--rupture small { color: var(--texte); font-weight: 600; }

/* ============================================================
   18. Produits indisponibles non grisés (demande du 2026-10-03)
   La photo et le prix d'un produit en rupture gardent leur aspect
   normal ; l'indisponibilité se lit par la mention « Rupture de
   stock » et la pastille « Indisponible » à la place du bouton.
   ============================================================ */
.carte--rupture .carte__visuel img { filter: none; opacity: 1; }
.carte--rupture .carte__prix { color: inherit; font-weight: 600; font-size: var(--fs-lg); }
/* Sur une carte étroite (deux par ligne sur mobile), le prix à sa taille normale et la pastille
   « Indisponible » ne tiennent pas côte à côte : la pastille passe sous le prix au lieu de déborder. */
.carte--rupture .carte__pied { flex-wrap: wrap; }

/* ============================================================
   19. Bannière de page adaptée au mobile (demande du 2026-10-03)
   Sous 768 px, la photo (très large, 4:1) n'est plus réduite en
   bande : elle est recadrée sur sa partie droite (bidon et savons),
   à une taille lisible, et le titre de la page se pose sur la zone
   claire de gauche, sous un voile blanc. La hauteur suit le titre
   (un titre long agrandit la bannière au lieu de déborder).
   Le fil d'Ariane reste dessous. Fiche produit (sans titre dans la
   bannière) : bande un peu plus haute, même recadrage.
   ============================================================ */
@media (max-width: 767px) {
  .entree--titre { display: grid; grid-template-columns: minmax(0, 1fr); }
  .entree--titre .entree__texte { display: contents; }
  .entree--titre .banniere { grid-area: 1 / 1; height: auto; min-height: 148px; border-radius: var(--r-md); }
  .entree--titre .banniere img { position: absolute; inset: 0; object-position: 82% 50%; }
  .entree--titre .banniere::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .84) 44%, rgba(255, 255, 255, 0) 74%);
  }
  .entree--titre .banniere__surtitre {
    grid-area: 1 / 1; position: relative; z-index: 1; align-self: center;
    width: 64%; margin: var(--e-2) 0 0; padding: var(--e-4) 0 var(--e-4) var(--e-4);
    font-size: 1.5rem; line-height: 1.15; text-wrap: balance; overflow-wrap: break-word; hyphens: auto;
  }
  .entree--titre .ariane { grid-area: 2 / 1; }
  .entree:not(.entree--titre) .banniere { height: 112px; border-radius: var(--r-md); }
  .entree:not(.entree--titre) .banniere img { object-position: 60% 50%; }
}

/* 16 (suite). Entre 1024 et 1179 px, le menu de sept entrées ne tient pas à la taille
   normale : il se resserre pour que l'icône du panier ne soit pas coupée à droite. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .entete__rang { gap: var(--e-2); }
  .nav__lien { padding-inline: .42rem; font-size: .875rem; }
  .marque__nom { display: none; }
}