/* ==========================================================================
   La Médocaine — fiche produit (maquette Figma, node 77:1032)
   Chargée UNIQUEMENT sur cette page (déclarée dans config/theme.yml).
   Règle : tout ce qui sert sur 2 pages ou plus remonte dans custom.css.
   ========================================================================== */

/* ── Fond de page ──────────────────────────────────────────────────────────
   Relevé sur la maquette : la page entière est en crème (#fbf8f3, jeton
   « cream/soft »), y compris la zone des onglets et « vous aimerez aussi ».
   Seules deux surfaces sont blanches : la carte du visuel et la bande du
   domaine. L'encadré d'achat n'a PAS d'aplat — il se détache par sa seule
   bordure. C'est déjà le fond du site (--bs-body-bg) : aucune règle ici,
   sinon elle ne ferait que répéter l'héritage.                              */

/* ── Structure ─────────────────────────────────────────────────────────────
   Maquette : visuels 643 px à gauche, informations 585 px à droite, gouttière
   de 116 px. Mobile d'abord : une seule colonne.                             */

/* Mobile : surtitre et titre, PUIS le visuel, puis l'achat. L'en-tête est
   un bloc à part (product.tpl) : c'est l'ordre du document, sans `order`. */
.product__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  /* Moins d'air en haut qu'en bas : le fil d'Ariane laisse déjà sa marge,
     et la maquette fait démarrer le visuel juste dessous. */
  padding-block: 1.25rem var(--md-section-y);
}

.product__header {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* La colonne d'infos sert de conteneur de requêtes : caractéristiques et
   conditionnements s'agencent selon SA largeur, qui ne suit pas l'écran (pleine
   largeur à 768 px, à peine 400 px à 992 px quand la fiche passe en deux
   colonnes). Des media queries sur l'écran ne pouvaient pas le voir. */
.product__right {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-block-start: 1.25rem;          /* 40 px sous le visuel en mobile */
  container-type: inline-size;
}

/* Desktop : visuel à gauche sur toute la hauteur, en-tête puis achat à
   droite. Mêmes 28 px entre surtitre, titre et accroche qu'avant le
   déplacement de l'en-tête. */
@media (min-width: 992px) {
  .product__container {
    grid-template-columns: minmax(0, 643fr) minmax(0, 585fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "visuel entete"
      "visuel achat";
    column-gap: clamp(2.5rem, 6vw, 7.25rem);    /* 116 px à 1440, 60 px à 992 */
    row-gap: 1.75rem;
  }

  .product__header {
    grid-area: entete;
    gap: 1.75rem;
  }

  .product__right {
    grid-area: achat;
    margin-block-start: 0;
  }

  /* Le visuel accompagne la colonne d'achat, plus haute que lui : sinon
     700 px vides sous les vignettes à 992 px. Calé sous l'en-tête collant,
     dont Hummingbird publie la hauteur dans --scroll-padding-top. */
  .product__left {
    grid-area: visuel;
    position: sticky;
    top: calc(var(--scroll-padding-top, 8rem) + 1rem);
    align-self: start;
  }
}

/* ── Visuels ───────────────────────────────────────────────────────────────
   Le parent rend la couverture puis les vignettes ; la maquette encadre la
   grande image et pose les vignettes en 156 px sous elle.                    */

.product__left .js-images-container img,
.product__cover img {
  width: 100%;
  height: auto;
  background-color: var(--md-white);
  border: 1px solid var(--md-line-soft);
}

.product__thumbnails,
.js-product-carousel {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-block-start: .875rem;
}

.js-thumb-container img {
  width: 9.75rem;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--md-line-soft);
  cursor: pointer;
  transition: border-color .2s ease;
}

.js-thumb-container img:hover,
.js-thumb-container.selected img { border-color: var(--md-gold); }

/* ── Titre ─────────────────────────────────────────────────────────────────  */

.product__eyebrow {
  color: var(--md-accent);        /* doré, comme le surtitre de la maquette */
  font-size: var(--md-fs-sm);
  font-weight: 500;
  letter-spacing: var(--md-ls-wide);
  text-transform: uppercase;
  margin: 0;
}

.product__name {
  font-family: var(--md-font-display);
  font-size: clamp(2rem, 4vw, 3rem);   /* 48 px dans la maquette */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--md-navy);
  margin: 0;
}

.product__manufacturer a {
  color: var(--md-muted);
  font-size: var(--md-fs-base);
  text-decoration: none;
}

.product__manufacturer a:hover { color: var(--md-gold); }

.product__description-short {
  color: var(--md-navy-soft);
  font-size: var(--md-fs-md);
  line-height: 1.55;
}

.product__description-short p:last-child { margin-bottom: 0; }

/* Beaucoup de fiches n'ont pas de résumé : le conteneur vide ajoutait deux
   gouttières de 1,75 rem entre le titre et les caractéristiques. */
.product__description-short:empty { display: none; }

/* ── Cartes de caractéristiques ────────────────────────────────────────────
   Quatre encadrés côte à côte dans la maquette (Cépages, Apogée, Service,
   Goût) ; ici les quatre premières caractéristiques renseignées.             */

/* Deux par ligne quand la colonne est étroite, quatre dès qu'elle le permet
   (voir la requête de conteneur ci-dessous) : jamais de carte orpheline. */
.product__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
}

/* Quatre sur une ligne dès que la colonne fait 34 rem : jamais 3 + 1, et plus
   de libellé qui touche la bordure (constaté à 390 et 1200 px). */
@container (min-width: 34rem) {
  .product__specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Chaque caractéristique porte son propre cadre : un produit qui n'en a qu'une
   affiche une carte, pas un bandeau vide sur toute la largeur. */
.product__spec {
  border: 1px solid var(--md-line-soft);
  padding: 1rem;
}

.product__spec-label {
  color: var(--md-muted);
  font-size: var(--md-fs-2xs);
  font-weight: 500;
  letter-spacing: var(--md-ls-wide);
  text-transform: uppercase;
}

.product__spec-value {
  color: var(--md-navy);
  font-size: var(--md-fs-lg);
  line-height: 1.3;
  margin: .25rem 0 0;
}

/* ── Déclinaisons (« Format » dans la maquette) ────────────────────────────
   Rendu natif de product-variants.tpl : on habille, on ne remplace rien.

   La maquette présente les conditionnements en cartes côte à côte, celle qui
   est retenue remplie de doré. Le bouton radio du cœur est conservé — il porte
   le clavier, l'accessibilité et le rafraîchissement ajax du prix — mais il
   devient invisible et couvre toute la carte : c'est son étiquette qui dessine.
   Aucune largeur figée : la grille se replie quand la place manque.           */

/* Bootstrap fait flotter les `legend` à gauche : les cartes se rangeaient à
   côté du libellé au lieu de dessous, sur une largeur amputée. */
.product-variant__legend {
  float: none;
  width: 100%;
  color: var(--md-muted);
  font-size: var(--md-fs-2xs);
  font-weight: 500;
  letter-spacing: var(--md-ls-wide);
  text-transform: uppercase;
  margin-block-end: .625rem;
  padding: 0;
}

/* Le format retenu se lit sur la carte dorée : le rappel « : Carton de 6 » du
   gabarit du cœur ferait doublon. Il reste lu par les lecteurs d'écran. */
.product-variant__selected { display: none; }

/* Colonne étroite : une liste, intitulé à gauche et prix à droite. Dès que la
   colonne fait 30 rem, les trois cartes de la maquette sur une ligne : plus
   de « Carton de 12 » seul sur un second rang. */
.product-variant__radios {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
}

.product-variant__radio {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.product-variant__radio .form-check-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.product-variant__radio label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  border: 1px solid var(--md-line-soft);
  padding: .875rem 1rem;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.product-variant__radio .form-check-label {
  font-family: var(--md-font-display);
  font-size: var(--md-fs-lg);
  line-height: 1.25;
  color: var(--md-navy);
}

/* Prix de la déclinaison, sous son intitulé, comme la maquette. */
.product-variant__price {
  display: block;
  color: var(--md-muted);
  font-size: var(--md-fs-xs);
  line-height: 1.4;
}

@container (min-width: 30rem) {
  .product-variant__radios { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .product-variant__radio label { display: block; }

  .product-variant__price {
    font-size: var(--md-fs-2xs);
    margin-block-start: .25rem;
  }
}

.product-variant__radio .form-check-input:checked ~ label .product-variant__price {
  color: var(--md-navy);
}

.product-variant__radio .form-check-input:checked ~ label {
  background-color: var(--md-accent);
  border-color: var(--md-accent);
}

.product-variant__radio .form-check-input:focus-visible ~ label {
  outline: 2px solid var(--md-accent);
  outline-offset: 2px;
}

.product-variant__radio .form-check-input:hover:not(:checked) ~ label {
  border-color: var(--md-gold-light);
}

.product__variants .product-variants__label,
.product-variants .form-control-label {
  display: block;
  color: var(--md-muted);
  font-size: var(--md-fs-2xs);
  font-weight: 500;
  letter-spacing: var(--md-ls-wide);
  text-transform: uppercase;
  margin-block-end: .625rem;
}

.product-variants .form-control,
.product-variants select {
  border: 1px solid var(--md-border);
  border-radius: 0;
  font-size: var(--md-fs-base);
  padding: .75rem;
}

/* ── Encadré d'achat ───────────────────────────────────────────────────────
   Prix, disponibilité, quantité et bouton dans une même surface bordée.      */

.product__purchase {
  position: relative;                     /* ancre la disponibilité en haut à droite */
  overflow: hidden;                       /* voir la note sur l'iframe de paiement */
  border: 1px solid var(--md-line-soft);  /* sans aplat : la bordure seule, comme la maquette */
  padding: 1.855rem 1.4375rem 1.3125rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

/* .product__additional-info accueille le paiement express de Stripe (Apple Pay,
   Google Pay) : il se remplit côté navigateur selon le portefeuille disponible.
   Quand aucun n'est proposé, le conteneur garde ses champs cachés et ses div de
   hauteur nulle : `:empty` ne le voit donc pas vide, et il laissait un trou.
   La seconde règle le masque dès qu'aucun de ses descendants ne porte de
   contenu. Un navigateur sans `:has` ignore la règle et retrouve l'ancien
   comportement, sans casse. */
.product__additional-info:empty { display: none; }

.product__additional-info:not(:has(*:not(:empty))) { display: none; }

/* Quand aucun portefeuille n'est proposé, il reste six enfants de hauteur nulle
   (trois champs cachés, trois conteneurs) que les deux règles ci-dessus ne
   voient pas vides : seul l'écart entre eux subsistait, soit un trou de 64 px
   sous les boutons. On le supprime ; l'espacement avec le bloc précédent est
   déjà donné par l'encadré d'achat, et un bouton express affiché apporte sa
   propre hauteur. */
.product__additional-info { row-gap: 0; }

.product__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1875rem .75rem;
  margin: 0;
}

.product__price {
  font-family: var(--md-font-display);
  font-size: 2.25rem;                     /* 36 px */
  font-weight: 600;
  line-height: 1.55;
  color: var(--md-navy);
}

/* Prix et mention de taxe sur une seule ligne, alignés sur la ligne de base.
   Le parent du couple n'est pas `.product__prices` mais `.product__prices-block`,
   qui empilait ses deux enfants : c'est donc lui qu'on met en ligne. */
.product__prices-block {
  display: flex;
  flex-direction: row;                    /* le parent l'empile en colonne */
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .625rem;
}

/* La mention de taxe reçoit le traitement que la maquette réserve à la ligne
   « 1 bouteille · 24,00 € l'unité », plutôt que d'inventer un libellé. */

.product__prices .product__tax-label,
.product__unit-price {
  color: var(--md-navy);
  font-size: var(--md-fs-2xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Produit en promotion. PrestaShop annonce « 3,95 € (Économisez 10 %) 3,56 € » :
   trois informations sur une ligne, dont un pourcentage en bleu vif hérité de
   Bootstrap. On garde le prix courant en tête, on renvoie le prix barré sur la
   ligne du dessous, et on retire la mention d'économie : la pastille « -10 % »
   posée sur le visuel dit déjà la remise. */
.product__discount-percentage { display: none; }

/* Ligne secondaire : l'ancien prix et le rappel du conditionnement partagent
   une seule ligne sous le prix, séparés par un point médian. Isolés chacun sur
   leur ligne, ils étiraient l'encadré et déséquilibraient le bloc. */
.product__prices-secondary {
  order: 2;
  flex-basis: 100%;
  display: flex;
  flex-direction: column;          /* en ligne dès 576 px */
  align-items: flex-start;
  gap: .25rem .625rem;
  margin-block-start: .25rem;
  /* Une seule graisse pour toute la ligne : l'ancien prix et le rappel du
     conditionnement se lisaient sinon comme deux informations sans rapport,
     l'un en 16 px bruns, l'autre en 11 px capitales. */
  font-size: var(--md-fs-2xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--md-muted);
}

/* Les enfants suivent la ligne : seul le barré distingue l'ancien prix. */
.product__prices-secondary .product__discount-price,
.product__prices-secondary .product__regular-price,
.product__prices-secondary .product__unit-computed {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Dès 576 px, les deux mentions sur une ligne, séparées d'un point médian.
   En dessous, empilées : repliées, le point commençait la seconde ligne. */
@media (min-width: 576px) {
  .product__prices-secondary {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
  }

  .product__prices-secondary > * + *::before {
    content: "·";
    margin-inline-end: .625rem;
    color: var(--md-muted);
  }
}

.product__regular-price {
  color: var(--md-muted);
  font-size: var(--md-fs-md);
  text-decoration: line-through;
}

/* Disponibilité : calée en haut à droite de l'encadré, comme la maquette. */
.product__availability { margin: 0; }

.product__availability-status {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--md-green);
  font-size: var(--md-fs-sm);
  font-weight: 500;
}

.product__availability-status.text-danger,
.product__availability-status.text-warning { color: var(--md-muted); }

.product__availability-icon {
  font-size: 0;                           /* la glyphe cède la place au point */
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background-color: currentcolor;
  flex: 0 0 auto;
}

@media (min-width: 576px) {
  .product__availability {
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline-end: 1.4375rem;
    text-align: right;
  }
}

/* Le module de paiement injecte son message « 3 versements… » en tête du
   conteneur d'ajout au panier. La maquette le veut SOUS le bouton : on ne
   déplace pas son point de montage, on ordonne la colonne. */
.product__add-to-cart-container {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.product__add-to-cart-container > .product__availability { order: 1; }
.product__add-to-cart-container > .product__actions-qty-add { order: 2; }
.product__add-to-cart-container > #payment-method-messaging-element { order: 3; }

/* Le message de paiement fractionné est un iframe posé par Stripe, en
   `width: calc(100% + 8px)` et `min-width: 100% !important` : il dépasse son
   parent par construction et faisait déborder la page de 84 px en mobile.
   Aucune règle ne peut le réduire — c'est l'encadré qui le contient
   (`overflow: hidden` ci-dessus). */
.product__add-to-cart-container > * { min-width: 0; }

#payment-method-messaging-element,
#stripe-express-checkout-element { max-width: 100%; overflow: hidden; }

#payment-method-messaging-element iframe,
#stripe-express-checkout-element iframe { max-width: 100%; }

/* Quantité + bouton sur une ligne, le bouton prend la place restante. */
.product__actions-qty-add {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .625rem;
}

/* Deux conteneurs de Stripe restent vides quand aucun paiement express n'est
   proposé : chacun consommait un écart, et le bouton d'ajout finissait 20 px
   avant le bord de l'encadré. `:empty` ne les voit pas vides (ils gardent des
   blancs) : on cible ceux qui n'ont aucun élément enfant. Dès que Stripe y
   monte son bouton, ils réapparaissent. */
.product__actions-qty-add > [id^="stripe-"]:not(:has(*)) { display: none; }

/* Hummingbird ajoute 20 px sous ce conteneur : 41 px sous le bouton d'ajout,
   contre 10 entre tous les autres blocs de l'encadré. */
.product__purchase .product__add-to-cart-container { margin-block-end: 0; }

.quantity-button__group {
  width: auto;
  border: 1px solid var(--md-border);
}

.quantity-button__group .btn,
.quantity-button__group .form-control {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  min-width: 2.75rem;
  text-align: center;
}

.quantity-button__group .form-control { max-width: 2.75rem; }

.product__actions-qty-add .add-to-cart,
.product__actions-qty-add [data-ps-ref="add-to-cart"] {
  --bs-btn-font-size: .9375rem;          /* 15 px */
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: 1.1875rem;
  flex: 1 1 12rem;
  justify-content: center;
  letter-spacing: .13em;
}

/* ── Actions secondaires ──────────────────────────────────────────────────
   « Mettre de côté » (blockwishlist) et « Demander un conseil » : deux
   boutons à filet, côte à côte, qui partagent la largeur.                  */

.product__secondary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .625rem;
}

/* Les deux boutons partagent la largeur à parts égales et occupent toute celle
   de l'encadré, comme la maquette. En dessous de leur largeur utile, ils se
   replient l'un sous l'autre plutôt que d'écraser leur libellé. */
/* Base de 12,5 rem : deux boutons côte à côte seulement quand leurs libellés
   tiennent sur une ligne. En dessous (colonne de 400 px à 992), ils
   s'empilent au lieu de couper « Demander un conseil » en deux. */
.product__secondary-actions > * {
  flex: 1 1 min(100%, 12.5rem);
  margin: 0;
  min-height: 2.75rem;             /* cible tactile (38 px avant) */
}

/* « Demander un conseil » : bouton à filet, il prend la largeur restante. */
.product__advice {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--md-navy);
  --bs-btn-color: var(--md-navy);
  --bs-btn-hover-bg: var(--md-navy);
  --bs-btn-hover-border-color: var(--md-navy);
  --bs-btn-hover-color: var(--md-cream);
  --bs-btn-font-size: .65625rem;          /* 10,5 px */
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: .625rem;
  --bs-btn-padding-x: 1rem;
  flex: 1 1 10rem;
  letter-spacing: .14em;
}

/* « Mettre de côté » : bouton natif de blockwishlist, déplacé par le script du
   module à côté de la quantité — on le cible donc par la page, pas par son
   parent.

   ⚠️ Hummingbird range ses règles dans des @layer et y empile des !important
   (fond, filet, largeur, marges). Dans la cascade, un !important DANS une
   couche bat un !important hors couche : notre feuille, non calquée, ne peut
   pas gagner de front. On pilote donc leur propre règle en redéfinissant la
   variable qu elle utilise, et on dessine le filet en ombre portée, qui n est
   pas dans leur liste (un outline calé vers l intérieur). */
#product button.wishlist-button-add {
  --bs-body-bg: transparent;              /* leur fond ET leur filet en dépendent */
  --bs-link-hover-color: var(--md-cream);
  align-self: stretch;                    /* même hauteur que « Demander un conseil » */
  justify-content: center;
  border-radius: 0;
  outline: 1px solid var(--md-navy);
  outline-offset: -1px;
  color: var(--md-navy);
  transition: background-color .2s ease, color .2s ease;
}

/* Avec son libellé, le bouton cesse d être carré : il prend la place qu il
   lui faut à côté du bouton d ajout. */
#product button.wishlist-button-add .wishlist-button__label {
  font-size: .65625rem;                   /* 10,5 px */
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-inline: .5rem .625rem;
}

#product button.wishlist-button-add:hover {
  --bs-body-bg: var(--md-navy);
  outline: 1px solid var(--md-navy);
  outline-offset: -1px;
}

/* ── Onglets ──────────────────────────────────────────────────────────────
   Hummingbird rend un accordéon Bootstrap. En mobile c'est le bon geste et on
   le garde ; à partir de 992 px la maquette veut des onglets, obtenus sans
   changer le balisage : `display: contents` sur chaque item fait remonter
   en-tête et volet au niveau du conteneur flex, les en-têtes prennent `order: 1`
   et se rangent sur une ligne, les volets `order: 2` et toute la largeur.
   Le « un seul ouvert » vient de data-bs-parent, posé par assets/js/custom.js. */

/* La rangée d'onglets court sur TOUTE la largeur, comme dans la maquette où le
   filet passe sous les quatre libellés d'un bord à l'autre. La zone n'est donc
   plus découpée en deux colonnes : c'est le corps des volets qui garde une
   largeur de lecture, et laisse la place du visuel prévu à droite. */
.product__bottom {
  display: block;
  padding-block-end: var(--md-section-y);
}

.product__accordion .accordion-item {
  background-color: transparent;
  border: 0;
  border-block-end: 1px solid var(--md-line-soft);
}

.product__accordion .accordion-button {
  --bs-accordion-btn-icon-width: .75rem;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23211c35'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
  background-color: transparent;
  box-shadow: none;
  color: var(--md-navy);
  font-family: var(--md-font-display);
  font-size: var(--md-fs-xl);
  font-weight: 600;
  padding: 1.375rem 0;
}

.product__accordion .accordion-body { padding: 0 0 1.5rem; }

@media (min-width: 992px) {
  .product__accordion {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 0;
  }

  /* Le filet gris s'arrêtait après le dernier onglet (648 px sur 936 à 992) :
     un pseudo-élément prend le reste de la rangée et le prolonge. */
  .product__accordion::after {
    content: "";
    order: 1;
    flex: 1 1 0;
    align-self: stretch;
    border-block-end: 1px solid var(--md-line);
  }

  /* Le cœur enveloppe ses volets dans .js-product-details (qu'il remplace en
     ajax) : sans le neutraliser aussi, les en-têtes restent empilés dedans. */
  .product__accordion .js-product-details,
  .product__accordion .accordion-item {
    display: contents;
    border: 0;
  }

  .product__accordion .accordion-header { order: 1; margin: 0; }
  .product__accordion .accordion-collapse { order: 2; flex: 0 0 100%; }

  /* Onglet : 11 px en capitales espacées, gris quand fermé, encre quand ouvert.
     Le filet gris court sous toute la rangée (les en-têtes se touchent) ; le
     filet sombre de l'onglet actif ne fait que la largeur de son libellé. */
  .product__accordion .accordion-header {
    border-block-end: 1px solid var(--md-line);
    padding-inline-end: 2.25rem;          /* 36 px, comme la maquette */
  }

  .product__accordion .accordion-button {
    --bs-accordion-btn-icon: none;
    --bs-accordion-btn-active-icon: none;
    --bs-accordion-btn-icon-width: 0;
    width: auto;
    color: var(--md-muted);
    font-family: var(--md-font-body);
    font-size: var(--md-fs-2xs);
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 1rem 0;
    margin-block-end: -1px;
    border-block-end: 1px solid transparent;
  }

  .product__accordion .accordion-button:hover { color: var(--md-navy); }

  .product__accordion .accordion-button:not(.collapsed) {
    color: var(--md-navy);
    border-block-end-color: var(--md-navy);
  }

  /* Les onglets prennent toute la largeur, le texte non : la maquette lui
     réserve la colonne de gauche et garde la droite pour un visuel. */
  .product__accordion .accordion-body {
    padding-block: 2.5rem 0;
    max-width: 44.75rem;                  /* 716 px, colonne de la maquette */
  }
}

.product__description,
.product__accordion .accordion-body {
  color: var(--md-navy-soft);
  font-size: var(--md-fs-base);
  line-height: 1.7;
}

.product__description :is(h2, h3) {
  font-family: var(--md-font-display);
  font-size: var(--md-fs-xl);
  font-weight: 500;
  color: var(--md-navy);
  margin-block: 1.75rem .75rem;
}

/* « Détails du produit » et « Fiche technique » : listes natives, rendues en
   deux colonnes séparées d'un filet, sans les aplats gris du parent. */
.details__list,
.product-features ul,
.product-features dl {
  list-style: none;
  margin: 0;
  padding: 0;
}

.details__item,
.product-features li,
.product-features dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  background: none;
  border-block-end: 1px solid var(--md-line-soft);
  padding: .75rem 0;
}

.details__item:last-child,
.product-features li:last-child { border-block-end: 0; }

.details__title,
.product-features dt {
  color: var(--md-muted);
  font-weight: 400;
}

.details__right,
.product-features dd { color: var(--md-navy); margin: 0; }

/* Le parent pose un aplat gris sur la LISTE (.details__list), pas sur ses
   lignes : c'est lui qu'il faut neutraliser pour ne garder que les filets. */
.product__accordion .details__list,
.product__accordion .details__item,
.product__accordion .product-features,
.product__accordion .product-features li { background-color: transparent; }

/* Ligne « Marque » du tableau de détails : le cœur y rend le LOGO du domaine,
   et sans logo sa vignette « aucune image disponible » de 98 px. Le domaine a
   sa propre section en bas de fiche, avec son nom, son texte et son lien : la
   ligne ferait double emploi. */
.details__item--manufacturer { display: none; }

/* Réassurance de la colonne de droite : liste sobre, pas de bandeau. */
.product__bottom-right .block-reassurance,
.product__bottom-right .blockreassurance_product { background: none; }

.product__bottom-right .block-reassurance-item,
.product__bottom-right .blockreassurance_product > div {
  border-block-end: 1px solid var(--md-line-soft);
  padding-block: 1rem;
}

/* ── Le domaine ────────────────────────────────────────────────────────────
   Bande crème : visuel carré à gauche, texte de la marque à droite.          */

/* Bande blanche pleine largeur. La fiche produit est rendue dans un
   container : on ressort de ses marges avec 100vw et des marges négatives,
   puis le .container intérieur recentre le texte. */
.product__brand {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background-color: var(--md-white);
  padding-block: var(--md-section-y);
}

.product__brand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 992px) {
  .product__brand-grid { grid-template-columns: minmax(0, 512fr) minmax(0, 716fr); gap: 5rem; }
}

.product__brand-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.product__brand-eyebrow {
  color: var(--md-muted);
  font-size: var(--md-fs-2xs);
  font-weight: 500;
  letter-spacing: var(--md-ls-wide);
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.product__brand-title {
  font-family: var(--md-font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--md-navy);
  margin: 0 0 1.25rem;
}

.product__brand-text {
  color: var(--md-navy-soft);
  font-size: var(--md-fs-base);
  line-height: 1.7;
}

.product__brand-link { margin-block-start: 1.5rem; }

/* ── « Vous aimerez aussi… » ───────────────────────────────────────────────
   Le bloc des produits de la même catégorie arrive juste après la section du
   domaine : sans respiration au-dessus, son surtitre se colle au paragraphe
   précédent. La maquette lui donne le même intervalle qu'entre deux sections. */
.ps-categoryproducts { padding-block-start: var(--md-section-y); }