/* ==========================================================================
   Les Savons de Jadis — front v2 — pages/produit.css
   Propre à la fiche produit. La bannière et le fil d'Ariane sont dans socle.css, le texte riche dans contenu.css.
   Le sélecteur de quantité (.quantite) et le compteur de favoris sont dessinés ici mais n'existent pas
   encore côté widgets : voir composants-react.css.
   Sommaire : 1. Haut de fiche (galerie, bloc d'achat, sommaire)  2. Description et « En bref »
   3. Avis  4. Savonnière, engagements, composition, savoir-faire  5. Colonne étroite
   6. Mobile et rappel d'achat  7. Mouvement réduit
   ========================================================================== */

/* 1. HAUT DE FICHE : galerie, bloc d'achat, sommaire collant ---------------- */
.fiche { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "galerie infos" "artisane infos"; align-items: start; gap: var(--e-6) clamp(1.5rem, 5vw, 5rem); padding-bottom: var(--e-bande); }
.fiche__infos { grid-area: infos; }
.galerie { grid-area: galerie; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.galerie__cadre { position: relative; grid-column: 2; grid-row: 1; }
.galerie__piste { display: flex; aspect-ratio: 1 / 1; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-xl); overscroll-behavior-x: contain; }
.galerie__piste::-webkit-scrollbar { display: none; }
.galerie__piste:focus-visible { border-radius: var(--r-xl); }
.galerie__vue { flex: none; width: 100%; height: 100%; scroll-snap-align: center; }
.galerie__vue img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.galerie__vue--photo img { object-fit: cover; mix-blend-mode: normal; }
.galerie__favori { position: absolute; right: var(--e-4); top: var(--e-4); width: 52px; height: 52px; }
.galerie__vignettes { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--e-3); }
.vignette { display: block; width: 84px; height: 84px; padding: 0; border-radius: var(--r-md); background: var(--blanc); border: 1px solid var(--trait); overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color var(--d-2) ease, transform var(--d-1) ease-out; }
.vignette img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.vignette[aria-current="true"] { outline-color: var(--vert-fonce); }
.vignette:hover { outline-color: var(--trait); }
.vignette[aria-current="true"]:hover { outline-color: var(--vert-fonce); }
.vignette:active { transform: scale(.96); }
.vignette:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-md); }
.galerie__points { display: none; }

.fiche__infos { min-width: 0; padding-top: var(--e-2); }
.fiche__pastilles { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.fiche__gamme { display: inline-flex; align-items: center; min-height: var(--cible); font-size: var(--fs-sm); color: var(--texte-moyen); text-decoration: underline; text-decoration-color: var(--trait-champ); text-underline-offset: 4px; }
.fiche__gamme:hover { color: var(--vert-profond); }
.fiche__titre { font-size: var(--fs-3xl); }
.fiche__accroche { margin-top: var(--e-3); font-size: var(--fs-md); color: var(--texte-moyen); max-width: 40ch; }
.fiche__note { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible); margin-top: var(--e-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; border-radius: var(--r-xs); }
.fiche__note strong { font-weight: 600; }
.fiche__note u { color: var(--texte-moyen); text-underline-offset: 4px; text-decoration-color: var(--trait); }
.fiche__note:hover u { color: var(--vert-profond); text-decoration-color: var(--vert); }

.achat { margin-top: var(--e-4); padding: var(--e-5); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-lg); }
.achat__prix-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); }
.achat__prix { font-family: var(--font-titre); font-weight: 700; font-size: 2.5rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.achat__unite { font-size: var(--fs-sm); color: var(--texte-moyen); }
.achat__unite span { white-space: nowrap; }
.achat__cgv { margin-top: var(--e-2); font-size: var(--fs-xs); }
.achat__cgv 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; }
.achat__cgv a:hover { color: var(--texte); text-decoration-color: var(--or); }

.achat__etat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin-top: var(--e-3); font-size: var(--fs-sm); }
.stock { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 600; color: var(--vert-profond); }
.stock::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 4px var(--vert-rosee); }
.achat__delai { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--texte-moyen); }
.achat__delai .ico { width: 18px; height: 18px; }
.achat__ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-3); margin-top: var(--e-5); }
.achat__ligne .btn { padding-inline: var(--e-4); }
.quantite { display: inline-grid; grid-template-columns: 48px 44px 48px; align-items: center; height: 56px; border: 1.5px solid var(--trait-champ); border-radius: var(--r-pilule); background: var(--blanc); }
.quantite button { display: grid; place-items: center; width: 48px; height: 100%; border-radius: var(--r-pilule); color: var(--vert-profond); transition: background-color var(--d-2) ease, transform var(--d-1) ease-out; }
.quantite button:hover { background: var(--vert-brume); }
.quantite button:active { transform: scale(.9); }
.quantite button[aria-disabled="true"] { color: var(--trait-champ); cursor: not-allowed; }
.quantite button[aria-disabled="true"]:hover { background: none; }
.quantite button:focus-visible { border-radius: var(--r-pilule); outline-offset: 0; }
.quantite input { width: 44px; height: 100%; padding: 0; border: 0; background: transparent; text-align: center; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.quantite input::-webkit-outer-spin-button, .quantite input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.achat__favori { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--trait-champ); background: var(--blanc); color: var(--texte); transition: border-color var(--d-2) ease, color var(--d-2) ease, transform var(--d-1) ease-out; }
.achat__favori:hover { border-color: var(--or-fonce); color: var(--or-brun); }
.achat__favori:active { transform: scale(.94); }
.achat__favori:focus-visible { border-radius: 50%; }
.achat__favori[aria-pressed="true"] { border-color: var(--or-ambre); color: var(--or-ambre); }
.achat__port { display: flex; align-items: center; gap: var(--e-3); margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--trait); font-size: var(--fs-sm); line-height: 1.45; color: var(--texte-moyen); }
.achat__port .ico { color: var(--vert-fonce); }
.paiements { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-4); font-size: var(--fs-xs); color: var(--texte-moyen); }
.paiements img { width: 40px; height: 28px; object-fit: contain; border-radius: 4px; background: var(--blanc); }

.sommaire { position: sticky; top: var(--entete-h); z-index: var(--z-sommaire); background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-block: 1px solid var(--trait); }
.sommaire .conteneur { display: flex; align-items: center; justify-content: space-between; gap: var(--e-5); }
.sommaire ul { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; padding-block: var(--e-2); }
/* Rappel d'achat : n'apparaît que lorsque le bouton principal est sorti de l'écran ; sa place est réservée, les onglets ne bougent pas */
.sommaire__achat { display: flex; align-items: center; gap: var(--e-4); flex: none; font-size: .9375rem; opacity: 0; visibility: hidden; transition: opacity var(--d-2) ease, visibility 0s linear var(--d-2); }
.sommaire__achat.est-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
.sommaire__achat strong { font-family: var(--font-titre); font-size: var(--fs-md); }
.sommaire__achat span { font-weight: 600; font-variant-numeric: tabular-nums; }
.sommaire__achat .btn { min-height: var(--cible); padding-inline: var(--e-4); font-size: .9375rem; }
.sommaire ul::-webkit-scrollbar { display: none; }
.sommaire a { display: inline-flex; align-items: center; height: var(--cible); padding: 0 var(--e-4); border-radius: var(--r-pilule); font-weight: 500; white-space: nowrap; transition: background-color var(--d-2) ease, color var(--d-2) ease; }
.sommaire a:hover { background: var(--vert-brume); color: var(--vert-profond); }
.sommaire a[aria-current="true"] { background: var(--vert-rosee); color: var(--vert-profond); font-weight: 600; }
.sommaire a:focus-visible { border-radius: var(--r-pilule); outline-offset: -3px; }

.detail { padding-top: var(--e-bande); scroll-margin-top: 2.5rem; }

/* 2. DESCRIPTION ET CARTE « EN BREF » --------------------------------------- */
/* Texte riche du back-office à gauche (.prose, contenu.css), carte « En bref » à droite */
.description { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-5) clamp(2rem, 5vw, 5rem); align-items: start; }
/* Plus courte que le texte : la carte reste en place pendant que le texte défile à côté */
.bref { position: sticky; top: calc(var(--entete-h) + 84px); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-lg); }
.bref__corps { padding: var(--e-5); }
.bref__titre { font-size: var(--fs-lg); }
.bref__points { display: grid; gap: var(--e-3); margin-top: var(--e-4); }
.bref__points li { display: flex; align-items: center; gap: var(--e-3); font-weight: 500; }
.bref__points .ico { display: block; flex: none; width: 40px; height: 40px; padding: 9px; border-radius: var(--r-galet-b); background: var(--vert-rosee); color: var(--vert-profond); }
.bref__faits { display: grid; margin: var(--e-4) 0 0; font-size: .9375rem; }
.bref__faits div { display: flex; justify-content: space-between; gap: var(--e-4); padding-block: var(--e-2); border-top: 1px solid var(--trait); }
.bref__faits dt { color: var(--texte-moyen); }
.bref__faits dd { margin: 0; font-weight: 500; text-align: right; }
.avis-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e-5) var(--e-7); align-items: start; }
@media (max-width: 1023px) { .description, .avis-grille { grid-template-columns: minmax(0, 1fr); } .bref { position: static; } }
@media (max-width: 599px) { .bref__corps { padding: var(--e-4); } .bref { border-radius: var(--r-md); } }

/* 3. AVIS ------------------------------------------------------------------- */
.avis-resume { display: grid; gap: var(--e-4); padding: var(--e-5); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-lg); }
.avis-resume__note { display: flex; align-items: center; gap: var(--e-4); }
.avis-resume__valeur { font-family: var(--font-titre); font-weight: 700; font-size: 3.25rem; line-height: 1; font-variant-numeric: lining-nums; }
.avis-resume__note small { display: block; font-size: var(--fs-sm); color: var(--texte-moyen); }
.repartition { display: grid; gap: 6px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.repartition__note { display: inline-flex; align-items: center; gap: 3px; }
.repartition__note .ico { width: 14px; height: 14px; color: var(--or-ambre); }
.repartition li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 1.2rem; align-items: center; gap: var(--e-2); color: var(--texte-moyen); }
.repartition__jauge { height: 8px; border-radius: 8px; background: rgba(45, 42, 37, .12); overflow: hidden; }
.repartition__jauge i { display: block; height: 100%; border-radius: 8px; background: var(--or-ambre); }
/* Filtre des avis par note : pastilles (même dessin que les pastilles de sous-catégorie) */
.avis-filtre { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-4); }
.avis-filtre__note { display: inline-flex; align-items: center; gap: 4px; min-height: var(--cible); padding: 0 var(--e-4); border: 1px solid var(--trait-champ); border-radius: var(--r-pilule); background: var(--blanc); font-size: .9375rem; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; transition: border-color var(--d-2) ease, background-color var(--d-2) ease; }
.avis-filtre__note:hover { border-color: var(--texte); }
.avis-filtre__note:focus-visible { border-radius: var(--r-pilule); }
.avis-filtre__note[aria-pressed="true"] { background: var(--vert-rosee); border-color: var(--vert-fonce); color: var(--vert-profond); font-weight: 600; }
.avis-filtre__note .ico { width: 14px; height: 14px; color: var(--or-ambre); }
.avis-filtre__nb { margin-left: 2px; font-size: var(--fs-xs); color: var(--texte-moyen); }
.avis-filtre__note[aria-pressed="true"] .avis-filtre__nb { color: inherit; }
.avis-liste { display: grid; gap: var(--e-4); }
.avis { padding: var(--e-5); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-lg); }
.avis__tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.avis__auteur { font-weight: 600; }
.avis__date { margin-left: auto; font-size: var(--fs-sm); color: var(--texte-moyen); font-variant-numeric: tabular-nums; }
.avis__titre { margin-top: var(--e-3); font-family: var(--font-texte); font-weight: 600; font-size: var(--fs-md); line-height: 1.35; }
.avis__texte { margin-top: var(--e-2); max-width: 68ch; }
.avis__utile { display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--cible); margin-top: var(--e-3); padding: 0 var(--e-4); border: 1.5px solid var(--trait-champ); border-radius: var(--r-pilule); font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color var(--d-2) ease, border-color var(--d-2) ease, transform var(--d-1) ease-out; }
.avis__utile:hover { background: var(--vert-brume); border-color: var(--vert-fonce); }
.avis__utile:active { transform: scale(.97); }
.avis__utile[aria-pressed="true"] { background: var(--vert-rosee); border-color: var(--vert-fonce); color: var(--vert-profond); }
.avis__utile:focus-visible { border-radius: var(--r-pilule); }
.avis__utile .ico { width: 18px; height: 18px; }

@media (max-width: 1023px) { .associes .grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 4. SAVONNIÈRE, ENGAGEMENTS, COMPOSITION, SAVOIR-FAIRE --------------------- */
.artisane { grid-area: artisane; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--e-5); align-items: center; padding: var(--e-5); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-lg); }
.artisane__photo { display: block; width: 148px; height: auto; aspect-ratio: 1200 / 1458; border-radius: var(--r-sm); background: var(--gris-plateau); }
.artisane__titre { font-size: var(--fs-lg); line-height: 1.25; }
.artisane blockquote { margin: var(--e-3) 0 0; font-size: .9375rem; line-height: 1.6; color: var(--texte-moyen); }
.artisane__pied { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-4); margin-top: var(--e-3); }
.artisane__pied .signature { font-size: var(--fs-lg); }
.artisane__pied .lien { font-size: var(--fs-sm); }
/* Engagements du produit : liste compacte sous le bloc d'achat */
.engagements { margin-top: var(--e-5); }
.engagements__titre { font-size: var(--fs-md); margin-bottom: var(--e-3); }
.engagements__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-5); }
.engagement { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--e-2); align-items: start; font-size: var(--fs-sm); line-height: 1.45; }
.engagement .ico { width: 20px; height: 20px; color: var(--vert-fonce); }
.engagement strong { display: block; font-weight: 600; color: var(--texte); }
.engagement span span { display: block; color: var(--texte-moyen); }
/* Composition : « qu'y a-t-il dedans ? » (cartes de même format, une photo et l'origine) puis la liste INCI et les mentions */
/* Une rangée de cartes identiques : elle tient telle quelle jusqu'à cinq ingrédients, et défile au-delà (jamais de carte orpheline) */
.matieres { --visibles: 5; --ecart: var(--e-4); display: flex; gap: var(--ecart); margin: calc(-1 * var(--e-1)); padding: var(--e-1); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--e-1); scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--r-md); }
.matieres::-webkit-scrollbar { display: none; }
.matieres:focus-visible { outline-offset: 2px; }
.matiere { flex: 0 0 calc((100% - var(--ecart) * (var(--visibles) - 1)) / var(--visibles)); display: flex; flex-direction: column; scroll-snap-align: start; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-md); overflow: hidden; }
.matiere__photo { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--gris-plateau); }
.matiere__corps { display: flex; flex-direction: column; flex: 1; padding: var(--e-4); }
.matiere__nom { font-size: var(--fs-md); line-height: 1.25; }
.matiere__apport { margin-top: var(--e-2); font-size: var(--fs-sm); line-height: 1.5; color: var(--texte-moyen); }
.matiere__origine { margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--trait); font-size: var(--fs-sm); line-height: 1.5; }
.matiere__lien { display: inline-flex; align-items: center; min-height: var(--cible); margin-top: auto; padding-top: var(--e-1); font-size: var(--fs-sm); font-weight: 600; color: var(--lien); text-decoration: underline; text-decoration-color: var(--vert); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.matiere__lien:hover { text-decoration-color: var(--or); }
.compo__pied { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-5) var(--e-7); margin-top: var(--e-6); padding-top: var(--e-5); border-top: 1px solid rgba(53, 89, 31, .18); }
.compo__sous-titre { font-family: var(--font-texte); font-size: var(--fs-sm); font-weight: 600; color: var(--texte-moyen); }
/* Bulles INCI : une vraie liste, calme (ni survol, ni curseur, ni focus) pour ne pas ressembler à des filtres */
.compo__inci { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.compo__inci li { padding: .4rem .9rem; border: 1px solid var(--trait); border-radius: var(--r-pilule); background: var(--blanc); font-size: .9375rem; line-height: 1.4; cursor: default; }
.compo__note { margin-top: var(--e-3); font-size: var(--fs-sm); color: var(--texte-moyen); }
.compo__note strong { font-weight: 600; color: var(--texte); }
.compo__mentions { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-4); align-items: center; align-self: start; padding: var(--e-4); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-md); }
.compo__mentions img { width: 64px; height: auto; }
.compo__mentions strong { display: block; font-weight: 600; color: var(--texte); }
.compo__mentions span { display: block; font-size: var(--fs-sm); line-height: 1.5; color: var(--texte-moyen); }
@media (max-width: 1199px) { .matieres { --visibles: 3.3; } }
@media (max-width: 899px) { .compo__pied { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 719px) {
  .matieres { --visibles: 1.35; --ecart: var(--e-3); margin-inline: calc(-1 * var(--pan-x)); padding-inline: var(--pan-x); scroll-padding-inline: var(--pan-x); border-radius: 0; }
  .matiere__corps { padding: var(--e-3) var(--e-4) var(--e-2); }
}

/* Savoir-faire (commun à toutes les fiches) : photo de l'atelier et les quatre temps de la fabrication */
.savoir { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(1.5rem, 4vw, 4.5rem); }
.savoir__photo { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 688; border-radius: var(--r-sm); background: var(--gris-plateau); }
.savoir__chapo { font-size: var(--fs-md); color: var(--texte-moyen); max-width: 56ch; }
.savoir__etapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-5); margin-top: var(--e-5); counter-reset: temps; }
.savoir__etapes li { position: relative; padding-left: 2.5rem; counter-increment: temps; font-size: var(--fs-sm); line-height: 1.5; color: var(--texte-moyen); }
.savoir__etapes li::before { content: counter(temps); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--or); color: var(--texte); font-weight: 700; line-height: 1; }
.savoir__etapes strong { display: block; font-size: var(--fs-base); font-weight: 600; line-height: 1.3; color: var(--texte); }
.savoir__actions { margin-top: var(--e-5); }
/* Parole de cliente mise en exergue */
.avis-exergue { margin: var(--e-5) 0 0; padding-left: var(--e-5); border-left: 3px solid var(--or); }
.avis-exergue p { font-family: var(--font-titre); font-style: italic; font-weight: 700; font-size: var(--fs-lg); line-height: 1.35; }
.avis-exergue footer { margin-top: var(--e-2); font-size: var(--fs-sm); color: var(--texte-moyen); }
@media (max-width: 1023px) {
  .savoir { grid-template-columns: minmax(0, 1fr); }
  .savoir__photo { max-width: 640px; }
}
@media (max-width: 599px) {
  .artisane { grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-4); margin-inline: var(--gouttiere); padding: var(--e-4); border-radius: var(--r-md); align-items: start; }
  .artisane__photo { width: 96px; }
  .artisane__titre { font-size: var(--fs-md); }
  .artisane blockquote { grid-column: 1 / -1; }
  .artisane__corps { display: contents; }
  .artisane__pied { grid-column: 1 / -1; margin-top: 0; }
  .engagements__liste, .savoir__etapes { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
}

/* 5. COLONNE ÉTROITE -------------------------------------------------------- */
/* Colonne étroite (mobile, et bureau entre 1024 et 1279 px) : le bouton d'achat prend toute la largeur */
@media (max-width: 599px), (min-width: 1024px) and (max-width: 1279px) {
  .achat__ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .achat__ligne .btn { grid-column: 1 / -1; grid-row: 1; }
  .quantite { grid-template-columns: 52px minmax(44px, 1fr) 52px; width: 100%; }
  .quantite input { width: 100%; }
  .quantite button { width: 52px; }
  .achat__ligne .quantite { grid-column: 1; grid-row: 2; }
  .achat__ligne .achat__favori { grid-column: 2; grid-row: 2; }
}

/* 6. MOBILE ET RAPPEL D'ACHAT ----------------------------------------------- */
.achat-mobile { display: none; }

@media (max-width: 1023px) {
  .fiche { grid-template-columns: minmax(0, 1fr); grid-template-areas: "galerie" "infos" "artisane"; gap: var(--e-5); padding-bottom: var(--e-6); }
  .galerie { display: block; }
  .sommaire__achat { display: none; }
  .galerie__piste { border-radius: var(--r-lg); max-height: 560px; margin-inline: auto; }
  .galerie__cadre { max-width: 560px; margin-inline: auto; }
  .galerie__vignettes { flex-direction: row; justify-content: center; margin-top: var(--e-3); }
  .vignette { width: 64px; height: 64px; border-radius: var(--r-sm); }
  .sommaire { top: 0; }
  .achat-mobile {
    display: flex; align-items: center; gap: var(--e-3);
    position: fixed; left: var(--e-3); right: var(--e-3); z-index: var(--z-barre-achat);
    bottom: calc(var(--e-3) + var(--barre-mobile-h) + var(--e-2) + env(safe-area-inset-bottom, 0px));
    max-width: 520px; margin-inline: auto; padding: var(--e-2) var(--e-2) var(--e-2) var(--e-5);
    background: var(--blanc); color: var(--texte); border: 1px solid var(--trait); border-radius: var(--r-pilule);
    box-shadow: var(--ombre-flottante);
    transform: translateY(calc(100% + 120px)); visibility: hidden;
    transition: transform var(--d-3) var(--ease-tiroir), visibility 0s linear var(--d-3);
  }
  .achat-mobile.est-visible { transform: none; visibility: visible; transition-delay: 0s; }
  .achat-mobile__texte { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
  .achat-mobile__texte strong { display: block; font-family: var(--font-titre); font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .achat-mobile__texte span { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
  .achat-mobile .btn { flex: none; min-height: 48px; padding-inline: var(--e-4); }
  .achat-mobile .btn:focus-visible { border-radius: var(--r-pilule); }
  .a-barre-achat .pied__barre { padding-bottom: calc(var(--barre-mobile-h) + 64px + var(--e-7) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 599px) {
  .fiche-page .conteneur--galerie { padding-inline: 0; }
  /* Galerie moins haute : titre et prix remontent dans le premier écran */
  .galerie__piste { aspect-ratio: 5 / 4; border-width: 0 0 1px; border-radius: 0; }
  .galerie__vignettes { display: none; }
  .galerie__points { display: flex; justify-content: center; gap: 6px; position: absolute; left: 0; right: 0; bottom: var(--e-3); pointer-events: none; }
  .galerie__points i { width: 8px; height: 8px; border-radius: 50%; background: rgba(45, 42, 37, .28); transition: background-color var(--d-2) ease, transform var(--d-2) ease; }
  .galerie__points i.est-actif { background: var(--vert-profond); transform: scale(1.25); }
  .fiche__infos { padding-inline: var(--gouttiere); }
  .achat { padding: var(--e-4); border-radius: var(--r-md); }
}

/* 7. MOUVEMENT RÉDUIT ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vignette:active, .quantite button:active, .achat__favori:active, .avis__utile:active { transform: none; }
  .achat-mobile { transition: opacity .01ms, visibility 0s !important; }
}

/* 8. COMPLÉMENTS DU RENDU RÉEL (vue v2 produitSingle.php, 2026-10-03) --------
   Ce que la maquette statique ne couvrait pas : widgets React à la place des boutons, fiche sans
   sélecteur de quantité, rupture de stock, image unique, pictogrammes du back-office, composition
   sans cartes d'ingrédient, liste d'avis paginée, produit retiré. */
/* Ligne d'achat sans sélecteur de quantité : bouton d'ajout (widget) et favori */
.achat__ligne--sans-quantite { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
#achat-principal { display: block; min-width: 0; }
.achat__ligne--sans-quantite .btn[aria-disabled="true"] { grid-column: auto; grid-row: auto; }
.sommaire__achat [data-sdj-widget], .achat-mobile [data-sdj-widget] { flex: none; }
/* Rupture de stock */
.stock--rupture { color: var(--texte-moyen); }
.stock--rupture::before { background: var(--trait-champ); box-shadow: 0 0 0 4px var(--gris-plateau); }
/* Galerie à une seule image : pas de colonne de vignettes */
.galerie--seule { grid-template-columns: minmax(0, 1fr); }
.galerie--seule .galerie__cadre { grid-column: 1; }
/* Favori sur la galerie : le point de montage du widget porte la position, le bouton remplit le cadre */
.galerie__favori .btn-favorite { position: static; width: 52px; height: 52px; }
/* Pictogrammes choisis au back-office (SVG du jeu « savonnerie » ou ancienne classe Font Awesome) */
.pastille .sdj-svg-icon { width: 16px; height: 16px; flex: none; }
.pastille i { font-size: 14px; }
.bref__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-galet-b); background: var(--vert-rosee); color: var(--vert-profond); font-size: 20px; }
.bref__ico .sdj-svg-icon, .bref__points .bref__ico .ico { display: block; width: 22px; height: 22px; padding: 0; border-radius: 0; background: none; }
/* Composition sans cartes d'ingrédient : texte détaillé du back-office, puis liste INCI */
.compo__details { max-width: 80ch; }
.compo__pied--seul { grid-template-columns: minmax(0, 1fr); }
.composition-section .compo__details + .compo__pied { margin-top: var(--e-5); }
.composition-section .tete-section + .compo__pied { margin-top: 0; padding-top: 0; border-top: 0; }
/* Avis : suite de la liste, aucun avis */
.avis-plus { margin-top: var(--e-4); }
.avis-vide { color: var(--texte-moyen); }
/* Produit retiré de la vente */
.retire { display: flex; align-items: flex-start; gap: var(--e-4); margin-bottom: var(--e-5); padding: var(--e-4) var(--e-5); background: var(--or-pale); border: 1px solid var(--or); border-radius: var(--r-md); }
.retire .ico { color: var(--or-brun); }
.retire strong { display: block; font-weight: 600; }
.retire span { display: block; font-size: var(--fs-sm); color: var(--texte-moyen); }
.fiche--retire .galerie__vue img, .fiche--retire .vignette img { filter: grayscale(1); opacity: .7; }
.fiche--retire .achat__prix { color: var(--texte-moyen); text-decoration: line-through; }
.retire__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }

/* 9. CONTENUS RÉGLÉS AU BACK-OFFICE (écran « Front public ») — ajouts du 03/10/2026 ------------------- */
/* Carte de la savonnière sans portrait, mention du label sans logo : le texte prend toute la largeur */
.artisane--sans-photo { grid-template-columns: minmax(0, 1fr); }
.compo__mentions--sans-logo { grid-template-columns: minmax(0, 1fr); }
/* Le portrait garde ses proportions réelles, quelle que soit la photo choisie au back-office */
.artisane__photo { aspect-ratio: auto; object-fit: cover; }
/* Sélecteur de quantité et bouton d'ajout : rendus par le widget d'ajout au panier (variante « full-quantity ») dans
   #achat-principal ; la quantité choisie est rappelée dans le bouton (× 3) */
#achat-principal.achat__saisie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); min-width: 0; }
.achat__saisie .quantite { flex: none; }
.achat__saisie .btn-add-to-cart { flex: 1 1 0; width: auto; min-width: 0; }
.sdj-add-quantity { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Colonne étroite : le bouton d'ajout sur toute la largeur, puis la quantité et le favori sur une même ligne.
   Le conteneur du widget s'efface (display: contents) pour que le bouton et la quantité se rangent dans la
   grille de .achat__ligne, à côté du favori. */
@media (max-width: 599px), (min-width: 1024px) and (max-width: 1279px) {
  #achat-principal.achat__saisie { display: contents; }
  .achat__ligne > .achat__saisie > .btn-add-to-cart { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .achat__ligne > .achat__saisie > .quantite { grid-column: 1; grid-row: 2; width: 100%; }
  .achat__ligne > .achat__saisie ~ [data-sdj-widget="favorite"] { grid-column: 2; grid-row: 2; }
}

/* Photo de galerie dont la source est plus petite que le cadre : taille réelle, centrée dans le cadre blanc, jamais agrandie */
.galerie__vue--bornee { display: grid; place-items: center; }
.galerie__vue--bornee img { width: min(100%, var(--def-l)); height: min(100%, var(--def-h)); object-fit: contain; mix-blend-mode: normal; }
/* Engagements sous la galerie quand la carte de la savonnière n'est pas affichée (accessoires, laine…) */
.fiche__engagements { grid-area: artisane; }
/* La hauteur en trop de la colonne d'achat va à la seconde rangée : pas de vide entre la galerie et ce qui la suit */
@media (min-width: 1024px) { .fiche { grid-template-rows: auto 1fr; } }
.fiche__engagements .engagements { margin-top: 0; }
@media (max-width: 1023px) { .fiche__engagements { padding-inline: var(--gouttiere); } }