/* Fiche produit (vedettes et variantes) */
.pdp { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-7); align-items: start; padding-top: var(--space-4); }
.gallery { position: sticky; top: 6rem; }
.gallery-main { aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-alt); position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); cursor: zoom-in; }
.gallery-main.is-zoomed img { transform: scale(1.8); cursor: zoom-out; }
.gallery-main .tag { position: absolute; top: var(--space-4); left: var(--space-4); }
.thumbs { display: flex; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
.thumb { width: 5.5rem; height: 5.5rem; border-radius: var(--r-sm); border: 2px solid var(--line-strong); background: var(--surface-alt); overflow: hidden; padding: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-pressed="true"] { border-color: var(--leaf-deep); }
.buy h1 { font-size: var(--text-2xl); margin: var(--space-3) 0 var(--space-3); }
.buy .rating a { color: var(--leaf-deep); }
.buy .price-row { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-4) 0; }
.triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-5) 0; }
.triptych div { padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--leaf-tint); }
.triptych strong { display: block; font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--leaf-deep); margin-bottom: var(--space-1); }
.triptych span { font-size: var(--text-sm); }
.buy-row { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); flex-wrap: wrap; }
.buy-row .btn { flex: 1; min-width: 14rem; }
.caution { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-dim); padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--gold-tint); margin-top: var(--space-4); }
.caution svg { flex: none; color: var(--gold); margin-top: .15rem; }
.caution a { color: var(--ink); font-weight: 600; }
.buy .reassure { margin-top: var(--space-5); }
.buy .help-block { margin-top: var(--space-5); }
.added { display: none; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-md); background: var(--leaf-tint); border: 1px solid var(--leaf); margin-top: var(--space-4); flex-wrap: wrap; }
.added.is-visible { display: flex; }
.added strong { display: block; }
.pdp-sections { margin-top: var(--space-8); display: grid; gap: var(--space-8); }
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.benefit { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.benefit h3 { margin-bottom: var(--space-2); }
.benefit p { color: var(--ink-dim); font-size: var(--text-sm); }
.spec { display: grid; grid-template-columns: 12rem 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.spec dt { font-weight: 700; }
.spec dd { margin: 0; color: var(--ink-dim); }
.same-product { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-alt); }
.same-product ul { columns: 2; column-gap: var(--space-6); margin: var(--space-3) 0 0; padding-left: 1.2rem; }
.same-product li { break-inside: avoid; margin-bottom: var(--space-2); font-size: var(--text-sm); }
.same-product li a { color: var(--ink-dim); }
.same-product li a:hover { color: var(--leaf-deep); }
.equiv { padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: var(--leaf-tint); font-size: var(--text-sm); margin-bottom: var(--space-3); }
/* Barre d'achat collante : le prix reste visible pendant tout le defilement,
   sur mobile comme sur grand ecran. Elle n'apparait que lorsque le bouton
   d'achat principal est sorti de l'ecran, pour ne pas doubler l'information. */
.buybar {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--gutter);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-strong);
  box-shadow: var(--glow-lg);
  transform: translateY(110%);
  transition: transform 280ms var(--ease);
}
.buybar.est-visible { transform: none; }
.buybar-infos { flex: 1; min-width: 0; }
.buybar-nom {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buybar-choix {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buybar .price { flex: none; font-size: var(--text-xl); }
.buybar .btn { flex: none; min-width: 14rem; }
body.has-buybar { padding-bottom: 5.5rem; }

@media (max-width: 55em) {
  .buybar-infos { display: none; }
  .buybar .btn { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }
html[data-motion="reduced"] .buybar { transition: none; }
@media (max-width: 55em) {
  .pdp { grid-template-columns: 1fr; gap: var(--space-5); }
  .gallery { position: static; }
  .triptych { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; }
  .same-product ul { columns: 1; }
}


/* Recapitulatif du sur-mesure */
.recap-variantes {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  background: var(--leaf-tint);
  border: 1px solid color-mix(in srgb, var(--leaf) 26%, transparent);
}
.recap-titre {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--leaf-deep); margin-bottom: var(--space-2);
}
.recap-texte { font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
.recap-barre {
  height: .7rem; margin-top: var(--space-3); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--leaf-light) 45%, var(--paper));
  overflow: hidden;
}
.recap-barre span {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--leaf-deep), var(--leaf));
  transition: width 420ms var(--ease);
}
.recap-legende { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-dim); }
@media (prefers-reduced-motion: reduce) { .recap-barre span { transition: none; } }

/* ==========================================================================
   Polissage de la fiche produit (demande David, 12/09/2026)
   ========================================================================== */

/* Galerie : fond vert tres doux plutot qu'un gris plat, halo et cadre plus tenu */
.gallery-main {
  background:
    radial-gradient(70% 60% at 50% 38%, color-mix(in srgb, var(--leaf-tint) 92%, var(--paper)), var(--paper) 78%);
  border-color: color-mix(in srgb, var(--leaf) 18%, var(--line));
  box-shadow: var(--glow-lg);
}
.gallery-main .tag { box-shadow: var(--glow-sm); backdrop-filter: blur(2px); }
.thumbs { gap: var(--space-2); }
.thumb {
  width: 4.75rem; height: 4.75rem;
  border-width: 2px;
  border-color: var(--line);
  background: color-mix(in srgb, var(--leaf-tint) 55%, var(--paper));
}
.thumb[aria-pressed="true"] { box-shadow: var(--glow-sm); }

/* Colonne d'achat : hierarchie plus nette */
.buy .eyebrow {
  display: inline-flex; align-items: center;
  padding: .3rem var(--space-3);
  border-radius: var(--r-pill);
  background: var(--leaf-tint);
  color: var(--leaf-deep);
  border: 1px solid color-mix(in srgb, var(--leaf) 26%, transparent);
}
.buy h1 { line-height: 1.18; }
.buy .price-row {
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.buy .price.lg { font-size: var(--text-3xl); letter-spacing: -.01em; }
.buy .tax { font-size: var(--text-sm); color: var(--ink-dim); }

/* Triptyque : cartes plus lisibles, filet vert en tete */
.triptych div {
  position: relative;
  padding-top: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--glow-xs);
}
.triptych div::before {
  content: "";
  position: absolute; inset-inline: var(--space-4); top: 0;
  height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--leaf-deep), var(--leaf-light));
}

/* Bouton d'achat : plus large, plus present */
.buy-row .btn-primary { min-height: var(--tap); font-size: var(--text-lg); }

/* Bandeau de reassurance sous l'achat */
.buy .reassure li { align-items: flex-start; }
.buy .reassure svg { color: var(--leaf-deep); margin-top: .2rem; }

/* Sections basses : titres mieux poses */
.pdp-sections .section-head h2 { font-size: var(--text-2xl); }
.benefit { background: var(--surface); }

@media (max-width: 62em) {
  .gallery { position: static; }
}

/* Fiche produit : titres et prix ramenes a une taille plus juste avec Playfair
   Display. Le corps de texte reste a 18 px. */
.buy h1 { font-size: clamp(1.3rem, 1.05rem + 0.85vw, 1.5rem); }
.buy .price.lg { font-size: var(--text-2xl); }
.pdp-sections .section-head h2, .pdp-sections h2 { font-size: var(--text-2xl); }
.variant-set legend { font-size: var(--text-lg); }
.recap-texte { font-size: var(--text-lg); }

/* Galerie nettement plus petite : la colonne d'achat prime sur la photo.
   Le visuel passe de 633 px a 450 px de cote sur un grand ecran. */
/* Deux colonnes seulement au-dela de 62 em : en dessous, la fiche reste
   empilee. Cette regle arrive apres le bloc @media plus haut dans le fichier,
   elle doit donc etre elle-meme bornee, sinon elle le neutralise. */
@media (min-width: 62.01em) {
  .pdp { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: var(--space-6); }
  .gallery { max-width: 25rem; }
}
.gallery-main { border-radius: var(--r-md); }
.thumb { width: 4rem; height: 4rem; }

@media (max-width: 62em) {
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .gallery { max-width: 24rem; margin-inline: auto; width: 100%; }
}

/* Traduction du pourcentage en gouttes */
.recap-gouttes {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--leaf) 26%, transparent);
}
.recap-gouttes-titre {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leaf-deep);
  margin-bottom: var(--space-3);
}
.recap-gouttes-paire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.recap-gouttes-paire > div {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--leaf) 22%, transparent);
}
.recap-gouttes-paire strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--leaf-deep);
  line-height: 1.2;
}
.recap-gouttes-paire span {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-dim);
  margin-top: .15rem;
}
.recap-gouttes-note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-dim);
}

/* Estimation de livraison sur la fiche */
.livraison-produit {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--glow-xs);
}
.lp-titre {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--space-3);
}
.lp-modes { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.lp-mode {
  min-height: var(--tap-sm); padding: 0 var(--space-4);
  border-radius: var(--r-pill); border: 2px solid var(--line-strong);
  background: var(--surface); font-weight: 600; font-size: var(--text-sm); color: var(--ink);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.lp-mode[aria-pressed="true"] { border-color: var(--leaf-deep); background: var(--leaf-tint); color: var(--leaf-deep); }
.lp-mode:hover { border-color: var(--leaf); }
.lp-date { font-size: var(--text-lg); color: var(--ink); }
.lp-date strong { color: var(--leaf-deep); }
.lp-detail { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-dim); }
.lp-pays { margin-top: var(--space-3); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.lp-pays label { font-size: var(--text-sm); color: var(--ink-dim); }
.lp-pays select { max-width: 14rem; }

/* Sur grand écran, le prix remonte à droite de la ligne « Inhalateur bio ·
   Fabriqué en France ». L'ordre du HTML ne bouge pas : seul le placement
   change, donc la lecture au clavier et au lecteur d'écran reste logique. */
@media (min-width: 62em) {
  .buy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
  }
  .buy > * { grid-column: 1 / -1; }
  .buy .eyebrow {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
  }
  .buy .price-row {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin: 0;
    padding: 0;
    border: 0;
    gap: var(--space-2);
  }
  .buy h1 { grid-row: 2; margin-top: var(--space-3); }
  .buy .rating {
    grid-row: 3;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
  }
}

/* ==========================================================================
   La modale « mèche de coton » — pourquoi un stick et pas un diffuseur.
   Bornée au-delà de 62 em par rien du tout : elle vit hors de la grille
   .pdp, donc aucune règle de colonnes ne la concerne.
   ========================================================================== */
.stick-lien { margin: var(--space-3) 0 0; }

.modale-stick {
  width: min(34rem, calc(100vw - 2rem));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--glow-lg);
}
.modale-stick::backdrop { background: rgba(30, 42, 23, .45); }
.modale-stick h2 { margin: 0 0 var(--space-3); font-size: var(--text-xl); }
.modale-stick .lead { margin: 0 0 var(--space-5); }

.modale-fermer-ligne { display: flex; justify-content: flex-end; margin: 0 0 var(--space-2); }
.modale-fermer {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.modale-fermer:hover { background: var(--tint); color: var(--leaf-deep); }

/* Les quatre étapes : un numéro vert, un titre, une explication. */
.stick-etapes { counter-reset: etape; list-style: none; margin: 0; padding: 0; }
.stick-etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}
.stick-etapes li::before {
  content: counter(etape);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--leaf), var(--leaf-deep));
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
}
.stick-etapes strong { align-self: center; }
.stick-etapes span { grid-column: 2; color: var(--muted); font-size: var(--text-sm); }

@media (prefers-reduced-motion: reduce) {
  .modale-stick { animation: none; }
}