/*
 * Thème metfi : fiche produit (catalog/product.tpl, catalog/_partials/product-*.tpl,
 * _partials/fiche/*).
 *
 * Mesures de la maquette : produit-desktop.html à 1440 px, produit-mobile.html
 * à 390 px. Points de rupture : deux colonnes à partir de 1024 px ; une
 * colonne de 768 à 1023 px (composants de l'ordinateur) ; mobile sous 768 px
 * (galerie en bande, accordéons, barre d'achat fixe), le même point que
 * metfi.js (MOBILE).
 *
 * Couleurs, police, rayons et hauteurs de boutons : variables --mf-* posées
 * par metfi_theme d'après reglages.json ; les hauteurs de la maquette qui
 * diffèrent du réglage s'en déduisent (56 px = hauteur du réglage + 8 px).
 *
 * Classic stylise les classes que le cœur exige (.product-prices,
 * .product-quantity, .bootstrap-touchspin, .product-flags,
 * #product-availability, .btn-primary…) : les règles de neutralisation sont
 * préfixées par .mf-fiche (ou body#product) pour l'emporter.
 */

/* ------------------------------------------------------------------ nuances
 * Étoile des notes (forme seule ; la couleur vient des variables).
 */
:root {
  --mf-fiche-etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 6.2 6.81.8-5.03 4.66 1.33 6.73L12 17.6l-6.05 3.29 1.33-6.73L2.25 9.5l6.81-.8z'/%3E%3C/svg%3E");
  --mf-fiche-hauteur-achat: calc(var(--mf-formes-hauteur-bouton, 48px) + 8px); /* 56 px */
}

/* -------------------------------------------------------------- fil d'Ariane
 * Partiel commun de classic (_partials/breadcrumb.tpl), mis à la maquette
 * sur la fiche seulement : séparateurs « › », dernier élément en gras.
 */
body#product #wrapper .breadcrumb {
  margin: 0;
  padding: 24px 0 0;
  font-size: 14px;
  line-height: normal;
}
body#product #wrapper .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body#product #wrapper .breadcrumb li,
body#product #wrapper .breadcrumb li a {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
}
body#product #wrapper .breadcrumb li::after {
  margin: 0 0 0 10px;
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  content: "›";
}
body#product #wrapper .breadcrumb li:last-child {
  color: var(--mf-couleurs-encre, #141414);
  font-weight: 600;
}
body#product #wrapper .breadcrumb li:last-child::after {
  content: none;
}
body#product #wrapper .breadcrumb li a:hover {
  color: var(--mf-couleurs-encre, #141414);
}

/* ---------------------------------------------------------------- squelette */
.mf-fiche {
  font-size: 16px;
  line-height: normal;
}
.mf-fiche__haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 56px;
  padding: 24px 0 80px;
}
.mf-fiche__visuel {
  position: relative;
  min-width: 0;
}
/*
 * Ordinateur : la galerie accompagne la colonne d'achat (la description
 * réelle est longue, la colonne de gauche resterait vide), quel que soit le
 * nombre de vues et la hauteur de la fenêtre.
 * top = min(24 px, hauteur de la fenêtre − hauteur de la galerie − 24 px) :
 * une galerie qui tient dans la fenêtre colle à 24 px du haut ; une galerie
 * plus haute défile avec la page jusqu'à montrer son bas (vignettes, bouton
 * 3D) à 24 px du bas de la fenêtre, puis reste là. Ses vignettes ne sont donc
 * jamais coupées pour de bon, et la photo garde la taille de la maquette.
 * La hauteur est publiée par metfi.js sur ce bloc (--mf-galerie-hauteur,
 * ResizeObserver de la galerie) ; sans elle, 24 px.
 * Élément d'une grille alignée en haut : il ne quitte jamais la rangée du
 * produit, donc ne déborde pas sur les accessoires.
 */
@media (min-width: 1024px) {
  .mf-fiche__visuel {
    position: sticky;
    top: min(24px, calc(100vh - var(--mf-galerie-hauteur, 0px) - 24px));
  }
}
.mf-fiche__infos {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  padding-top: 8px;
}
/* Sans caractéristique, #product-details est rendu seul et vide (le cœur et
   ExpertPackPro le lisent) : il ne doit pas compter dans l'espacement. */
.mf-fiche__infos > .mf-caracteristiques:not(:has(dl)) {
  display: none;
}
.mf-fiche .mf-titre-section {
  font-size: 32px;
}

/* ------------------------------------------------------------------ galerie */
.mf-galerie.images-container {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 12px;
}
.mf-galerie__piste {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
}
.mf-galerie__vue {
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.mf-galerie__vue.est-active {
  display: flex;
}
/* Pas d'événements du pointeur sur les photos : classic branche sur
   .js-qv-product-cover un balayage tactile qui bloquerait la bande mobile. */
.mf-galerie__photo {
  display: block;
  width: 88%;
  height: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.mf-galerie__modele {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
}
/* Affiche du modèle (la photo, sur fond blanc) fondue dans le fond doux. */
.mf-galerie__modele::part(default-poster) {
  background-color: var(--mf-couleurs-fond-doux, #f3f3f1);
  background-size: 88% auto;
  background-blend-mode: multiply;
}

.mf-galerie__vignettes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mf-galerie__case {
  display: block;
  min-width: 0;
}
.mf-galerie__vignette {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
  color: var(--mf-couleurs-encre, #141414);
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.mf-galerie__vignette[aria-current="true"] {
  border-color: var(--mf-couleurs-encre, #141414);
}
.mf-galerie__vignette:hover {
  border-color: var(--mf-nuance-encre-survol);
}
.mf-galerie__vignette:focus-visible {
  outline: 2px solid var(--mf-couleurs-encre, #141414);
  outline-offset: 2px;
}
.mf-galerie__vignette img.thumb {
  display: block;
  width: 88%;
  height: auto;
  margin: 0;
  border: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Compteur et points : mobile seulement. */
.mf-galerie__compteur,
.mf-galerie__points {
  display: none;
}

/* Badge de remise (.product-flags de classic : position, couleurs, majuscules). */
.mf-fiche .product-flags.mf-drapeaux {
  display: flex;
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.mf-fiche .product-flags li.product-flag.mf-drapeaux__badge {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  border-radius: var(--mf-formes-rayon-badge, 3px);
  background: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-fond, #ffffff);
  font-size: 14px;
  font-weight: 800;
  line-height: normal;
  text-transform: none;
}

/* ------------------------------------------------------------------- en-tête */
.mf-fiche__entete {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mf-fiche__categorie {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 14px;
  font-weight: 600;
}
.mf-fiche__titre {
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.mf-fiche__avis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 14px;
}
a.mf-fiche__avis:hover,
a.mf-fiche__avis:focus {
  color: var(--mf-couleurs-encre, #141414);
  text-decoration: underline;
}
.mf-etoiles {
  display: inline-block;
  flex: 0 0 auto;
  width: 88px;
  height: 16px;
  background: linear-gradient(90deg, var(--mf-couleurs-encre, #141414) var(--mf-note, 0%), var(--mf-couleurs-bordure, #e6e6e4) var(--mf-note, 0%));
  -webkit-mask: var(--mf-fiche-etoile) left center / 16px 16px space no-repeat;
  mask: var(--mf-fiche-etoile) left center / 16px 16px space no-repeat;
}
.mf-fiche__resume {
  color: var(--mf-couleurs-texte, #444444);
  font-size: 16px;
  line-height: 1.6;
}
.mf-fiche__resume p {
  margin: 0 0 8px;
  color: inherit;
  font-size: inherit;
}

/* --------------------------------------------------------------------- prix */
.mf-fiche .product-prices.mf-prix-fiche {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 24px;
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
}
.mf-fiche .product-prices.mf-prix-fiche div {
  margin-bottom: 0;
}
.mf-prix--fiche {
  gap: 14px;
}
.mf-fiche .mf-prix--fiche .product-price {
  display: block;
  color: var(--mf-couleurs-encre, #141414);
}
.mf-prix--fiche .mf-prix__actuel {
  font-size: 40px;
  letter-spacing: -0.01em;
}
.mf-prix--fiche .mf-prix__barre {
  font-size: 20px;
}
.mf-prix__badge {
  align-self: center;
  padding: 6px 10px;
  border-radius: var(--mf-formes-rayon-badge, 3px);
  background: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-fond, #ffffff);
  font-size: 13px;
  font-weight: 800;
}
.mf-prix-fiche__detail {
  color: var(--mf-couleurs-texte, #444444);
  font-size: 14px;
}
/* Message officiel de PS Checkout : sous le prix, avant la mention (maquette). */
.mf-prix-fiche #ps_checkout-paypal-pay-later-message-product {
  order: 1;
  margin: 0;
}
.mf-prix-fiche__mention {
  order: 2;
  color: var(--mf-couleurs-texte, #444444);
  font-size: 15px;
  line-height: 1.5;
}

/* ------------------------------------------------------------ formulaire */
.mf-fiche .product-actions {
  margin: 0;
}
.mf-fiche__achat {
  margin: 0;
}
.mf-fiche .product-variants.mf-variantes:has(.mf-variantes__groupe) {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 28px;
}
.mf-fiche .product-variants > .product-variants-item.mf-variantes__groupe {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.mf-variantes__libelle {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--mf-couleurs-encre, #141414);
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
}
.mf-variantes__choix {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mf-variante {
  display: flex;
  position: relative;
  margin: 0;
  cursor: pointer;
}
/* Le champ radio reste dans la page (clavier, lecteurs d'écran, cœur) mais
   ne se voit pas : c'est le nom qui fait le bouton. */
.mf-variante__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  clip: rect(0 0 0 0);
}
.mf-variante__nom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--mf-formes-hauteur-bouton, 48px);
  padding: 0 22px;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond, #ffffff);
  color: var(--mf-couleurs-encre, #141414);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mf-variante:hover .mf-variante__nom {
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
}
.mf-variante__radio:checked + .mf-variante__nom {
  background: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-fond, #ffffff);
}
.mf-variante__radio:focus-visible + .mf-variante__nom {
  outline: 2px solid var(--mf-couleurs-encre, #141414);
  outline-offset: 2px;
}
.mf-variante__couleur {
  width: 16px;
  height: 16px;
  border: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
  border-radius: 50%;
  background-size: cover;
}

/* Volume : tableau de classic, seulement s'il y a des remises par quantité. */
.mf-fiche .product-discounts:not(:has(table)) {
  display: none;
}
.mf-fiche .product-discounts:has(table) {
  margin: 0 0 28px;
}

/* Quantité et bouton d'achat. */
.mf-fiche .product-add-to-cart.mf-achat {
  word-wrap: normal;
}
.mf-fiche .product-quantity.mf-achat__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}
.mf-achat__quantite {
  display: flex;
  align-items: center;
}
.mf-achat__libelle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mf-fiche .product-quantity .qty.mf-quantite {
  display: flex;
  float: none;
  align-items: center;
  box-sizing: border-box;
  height: var(--mf-fiche-hauteur-achat);
  margin: 0;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond, #ffffff);
}
/* Classic enveloppe le champ dans TouchSpin (.bootstrap-touchspin) et y
   ajoute ses flèches : l'enveloppe s'efface, les flèches sont masquées, les
   boutons − et + du thème les remplacent. */
.mf-quantite .bootstrap-touchspin {
  display: contents;
}
.mf-quantite .bootstrap-touchspin .input-group-btn-vertical,
.mf-quantite .bootstrap-touchspin-prefix,
.mf-quantite .bootstrap-touchspin-postfix {
  display: none !important;
}
.mf-quantite__bouton {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mf-couleurs-encre, #141414);
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.mf-quantite__bouton:focus-visible {
  outline: 2px solid var(--mf-couleurs-encre, #141414);
  outline-offset: -4px;
}
.mf-fiche .product-quantity #quantity_wanted.mf-quantite__champ {
  box-sizing: border-box;
  width: 40px;
  min-width: 32px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--mf-couleurs-encre, #141414);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.mf-quantite__champ::-webkit-outer-spin-button,
.mf-quantite__champ::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.mf-fiche .product-quantity .add.mf-achat__ajout {
  display: flex;
  float: none;
  flex: 1 1 260px;
  margin: 0;
}
.mf-fiche .product-actions .add-to-cart.mf-achat__bouton {
  width: 100%;
  height: var(--mf-fiche-hauteur-achat);
  padding: 0 24px;
  border-radius: var(--mf-formes-rayon, 4px);
  box-shadow: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}
.mf-fiche .product-actions .add-to-cart.mf-achat__bouton:disabled {
  border-color: var(--mf-couleurs-bordure, #e6e6e4);
  background: var(--mf-couleurs-bordure, #e6e6e4);
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  opacity: 1;
  cursor: not-allowed;
}
.mf-achat__alertes:has(*) {
  margin-top: 16px;
}
.mf-achat__alertes .alert {
  margin: 0;
}
.mf-fiche .product-minimal-quantity:has(span) {
  margin: 12px 0 0;
  color: var(--mf-couleurs-texte, #444444);
  font-size: 14px;
}
.mf-fiche .product-minimal-quantity:not(:has(span)) {
  display: none;
}

/* Disponibilité : message de PrestaShop, pastille verte en stock. */
.mf-fiche #product-availability.mf-dispo {
  display: none;
  margin: 0;
  font-weight: 600;
}
.mf-fiche #product-availability.mf-dispo:has(.mf-dispo__message) {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 28px;
  color: var(--mf-couleurs-encre, #141414);
  font-size: 15px;
}
.mf-dispo__pastille {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mf-dispo__pastille--en-stock {
  background: var(--mf-couleurs-stock, #1f7a3a);
}
.mf-dispo__pastille--precommande {
  border: 2px solid var(--mf-couleurs-encre, #141414);
}
.mf-dispo__pastille--indisponible {
  border: 2px solid var(--mf-couleurs-texte-doux, #6b6b6b);
}
.mf-dispo__textes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mf-dispo__detail {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 14px;
  font-weight: 500;
}

/* Logos des moyens de paiement, ajoutés par PS Checkout à la fin de
   .product-add-to-cart (réglage du module) : discrets, à la charte. */
.mf-fiche #ps_checkout-payment-method-logo-block-container {
  margin-top: 20px;
}
.mf-fiche #ps_checkout-payment-method-logo-block-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 13px;
  font-weight: 600;
}

/* Bloc de cdnewsletter (styles en ligne du module) : seulement de l'espace. */
.mf-fiche .product-additional-info:has(*) {
  margin-top: 28px;
}

/* Alerte de précommande d'ExpertPackPro : à la charte (pas d'orange). */
.mf-fiche .epp-oos-alert {
  margin: 0 0 28px;
  padding: 16px 20px;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
  color: var(--mf-couleurs-encre, #141414);
}
.mf-fiche .epp-oos-alert__title {
  color: var(--mf-couleurs-encre, #141414);
  font-size: 15px;
  letter-spacing: 0.02em;
}
.mf-fiche .epp-oos-alert__message {
  color: var(--mf-couleurs-texte, #444444);
}

/* ------------------------------------------------------------ réassurance */
.mf-fiche__reassurance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
  list-style: none;
}
.mf-fiche__engagement {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}

/* ------------------------------------- description, caractéristiques, livraison */
.mf-infos {
  border-top: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
}
.mf-infos__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 0;
  border-bottom: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
}
.mf-infos__titre {
  font-size: 18px;
  font-weight: 700;
}
.mf-infos__bouton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mf-couleurs-encre, #141414);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
}
/* Ordinateur : le bouton désactivé par metfi.js est un simple titre. */
.mf-infos__bouton:disabled {
  color: var(--mf-couleurs-encre, #141414);
  opacity: 1;
  cursor: default;
}
.mf-infos__signe {
  display: none;
}
.mf-infos__panneau {
  color: var(--mf-couleurs-texte, #444444);
  font-size: 16px;
  line-height: 1.65;
}
.mf-infos__texte {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Description du produit (HTML de l'éditeur du back-office). */
.mf-fiche__description > :first-child {
  margin-top: 0;
}
.mf-fiche__description > :last-child {
  margin-bottom: 0;
}
.mf-fiche__description p,
.mf-fiche__description li,
.mf-fiche__description td,
.mf-fiche__description th {
  color: var(--mf-couleurs-texte, #444444);
  font-size: 16px;
  line-height: 1.65;
}
.mf-fiche__description p {
  margin: 0 0 12px;
}
.mf-fiche__description h1,
.mf-fiche__description h2,
.mf-fiche__description h3,
.mf-fiche__description h4,
.mf-fiche__description h5,
.mf-fiche__description h6 {
  margin: 20px 0 8px;
  color: var(--mf-couleurs-encre, #141414);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}
.mf-fiche__description ul,
.mf-fiche__description ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.mf-fiche__description ul {
  list-style: disc;
}
.mf-fiche__description ol {
  list-style: decimal;
}
.mf-fiche__description strong,
.mf-fiche__description b {
  color: var(--mf-couleurs-encre, #141414);
  font-weight: 700;
}
.mf-fiche__description a {
  color: var(--mf-couleurs-encre, #141414);
  text-decoration: underline;
}
.mf-fiche__description table {
  width: 100%;
  margin: 0 0 12px;
  border-collapse: collapse;
}
.mf-fiche__description th,
.mf-fiche__description td {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
  font-size: 15px;
  text-align: left;
  vertical-align: top;
}
.mf-fiche__description img,
.mf-fiche__description video {
  max-width: 100%;
  height: auto;
}
/* Vidéo intégrée (YouTube, 560 × 315 dans l'éditeur) : pleine largeur, en 16/9. */
.mf-fiche__description iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 0 12px;
  border: 0;
  border-radius: var(--mf-formes-rayon, 4px);
}

/* Caractéristiques : grille libellé / valeur. */
.mf-caracteristiques__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 0;
  font-size: 15px;
}
.mf-caracteristiques__nom {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-weight: 400;
}
.mf-caracteristiques__valeur {
  margin: 0;
  color: var(--mf-couleurs-encre, #141414);
  font-weight: 600;
}

/* ------------------------------------------------------------- accessoires */
.mf-accessoires {
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
}
.mf-accessoires__cadre {
  padding-top: 72px;
  padding-bottom: 72px;
}
.mf-accessoires__titre {
  margin-bottom: 28px;
}
.mf-accessoires__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mf-accessoire {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond, #ffffff);
}
.mf-accessoire__image {
  display: flex;
  flex: 0 0 120px;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-fond-doux, #f3f3f1);
}
.mf-accessoire__image img {
  display: block;
  width: 88%;
  height: auto;
  mix-blend-mode: multiply;
}
.mf-accessoire__infos {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.mf-accessoire__nom {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.mf-accessoire__nom a,
.mf-accessoire__nom a:hover,
.mf-accessoire__nom a:focus {
  color: var(--mf-couleurs-encre, #141414);
}
.mf-accessoire__nom a:hover {
  text-decoration: underline;
}
.mf-prix--accessoire .mf-prix__actuel {
  font-size: 19px;
}
.mf-prix--accessoire .mf-prix__barre {
  font-size: 14px;
}
.mf-accessoire__ajout {
  flex: 0 0 auto;
  margin: 0;
}
.mf-accessoire .mf-accessoire__bouton {
  min-height: calc(var(--mf-formes-hauteur-bouton, 48px) - 4px); /* 44 px */
  padding: 0 18px;
  background: var(--mf-couleurs-fond, #ffffff);
  font-size: 15px;
}
.mf-accessoire .mf-accessoire__bouton:hover,
.mf-accessoire .mf-accessoire__bouton:focus {
  background: var(--mf-couleurs-encre, #141414);
  color: var(--mf-couleurs-fond, #ffffff);
}
.mf-accessoire__bouton .mf-icone {
  display: none;
}

/* ---------------------------------------------------- autres produits, avis */
.mf-autres {
  padding: 80px 0 96px;
}
.mf-autres__titre {
  margin-bottom: 28px;
}
.mf-avis {
  padding: 0 0 96px;
}
.mf-avis__titre {
  margin-bottom: 8px;
}

/* productcomments : liste, en-tête et boutons, à la charte (CSS seulement ;
   les gabarits du module ne sont pas redéfinis). */
.mf-avis #product-comments-list-header {
  align-items: center;
  padding: 16px 0 24px;
  border-bottom: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
  color: var(--mf-couleurs-encre, #141414);
  font-size: 16px;
  font-weight: 700;
}
.mf-avis #product-comments-list-header .material-icons {
  display: none;
}
/* Note moyenne de l'en-tête : le module n'y dessine jamais les étoiles
   (list-comments.js ne les pose que dans la liste) ; la note est déjà dans
   le résumé sous le titre de la fiche. */
.mf-avis #product-comments-list-header .comments-note {
  display: none;
}
.mf-avis .product-comment-list-item {
  margin: 0;
  padding: 24px 0;
  border-bottom: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
  background: transparent;
}
.mf-avis #empty-product-comment {
  padding: 32px 0;
  border-bottom: 0;
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
}
.mf-avis .product-comment-list-item .comment-infos {
  height: auto;
  min-height: 0;
  margin-bottom: 12px;
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 14px;
  letter-spacing: normal;
}
.mf-avis .product-comment-list-item .comment-infos .grade-stars {
  margin-bottom: 8px;
}
.mf-avis .product-comment-list-item .comment-content .h4 {
  height: auto;
  margin: 0 0 8px;
  color: var(--mf-couleurs-encre, #141414);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.3;
  text-transform: none;
}
.mf-avis .product-comment-list-item .comment-content p {
  color: var(--mf-couleurs-texte, #444444);
  font-size: 15px;
  letter-spacing: normal;
  line-height: 1.6;
}
.mf-avis .product-comment-list-item .comment-content .comment-buttons a {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
}
.mf-avis .star-content div.star,
.mf-avis .star-content div.star-on,
.mf-avis .star-content div.star-hover,
.product-comment-modal .star-content div.star,
.product-comment-modal .star-content div.star-on,
.product-comment-modal .star-content div.star-hover {
  background: var(--mf-couleurs-bordure, #e6e6e4);
  -webkit-mask: var(--mf-fiche-etoile) center / contain no-repeat;
  mask: var(--mf-fiche-etoile) center / contain no-repeat;
}
.mf-avis .star-content div.star-on,
.mf-avis .star-content div.star-hover,
.product-comment-modal .star-content div.star-on,
.product-comment-modal .star-content div.star-hover {
  background: var(--mf-couleurs-encre, #141414);
}
.mf-avis .btn-comment,
.product-comment-modal .btn-comment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  min-height: var(--mf-formes-hauteur-bouton, 48px);
  padding: 0 24px;
  border: 1.5px solid var(--mf-couleurs-encre, #141414);
  border-radius: var(--mf-formes-rayon, 4px);
  background: var(--mf-couleurs-encre, #141414);
  box-shadow: none;
  color: var(--mf-couleurs-fond, #ffffff);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
}
.mf-avis .btn-comment:hover,
.product-comment-modal .btn-comment:hover {
  border-color: var(--mf-nuance-encre-survol);
  background: var(--mf-nuance-encre-survol);
}
.mf-avis .btn-comment .material-icons {
  margin: 0;
  font-size: 18px;
}
.mf-avis #product-comments-list-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
}
.mf-avis #product-comments-list-pagination ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mf-avis #product-comments-list-pagination ul li span {
  color: var(--mf-couleurs-texte-doux, #6b6b6b);
  font-size: 16px;
}
.mf-avis #product-comments-list-pagination ul li.active span {
  color: var(--mf-couleurs-encre, #141414);
}

/* ------------------------------------------------------- barre d'achat fixe */
.mf-barre-achat {
  display: none;
}

/* ==================================================== une colonne (< 1024) */
@media (max-width: 1023.98px) {
  .mf-fiche__haut {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  /* Galerie carrée : bornée, pour que l'achat reste près du haut de l'écran. */
  .mf-fiche__visuel {
    justify-self: center;
    width: 100%;
    max-width: 560px;
  }
}

/* ================================================================ mobile */
@media (max-width: 767.98px) {
  body#product #wrapper .breadcrumb {
    display: none;
  }
  /* Toast au-dessus de la barre d'achat ; pied de page jamais caché dessous. */
  body#product {
    --mf-toast-bas: 96px;
  }
  body#product:has(.mf-barre-achat) .mf-pied {
    padding-bottom: 87px;
  }

  .mf-fiche .mf-titre-section {
    font-size: 22px;
    letter-spacing: -0.01em;
  }
  .mf-fiche__haut {
    gap: 0;
    padding: 0;
  }

  /* Galerie : bande bord à bord qui défile, compteur et points. */
  .mf-fiche__visuel {
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin: 0 calc(-1 * var(--mf-cadre-marge));
  }
  .mf-galerie__piste {
    display: flex;
    aspect-ratio: auto;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .mf-galerie__piste::-webkit-scrollbar {
    display: none;
  }
  .mf-galerie__vue,
  .mf-galerie__vue.est-active {
    display: flex;
    flex: 0 0 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .mf-galerie__photo {
    width: 90%;
  }
  .mf-galerie__vignettes {
    display: none;
  }
  .mf-galerie--plusieurs .mf-galerie__compteur {
    display: block;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    margin: 0;
    padding: 6px 10px;
    border-radius: 12px;
    background: var(--mf-couleurs-fond, #ffffff);
    color: var(--mf-couleurs-encre, #141414);
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
  }
  .mf-galerie--plusieurs .mf-galerie__points {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 2;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
  }
  .mf-galerie__point {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--mf-couleurs-encre, #141414);
    opacity: 0.3;
    transition: width 0.2s ease, opacity 0.2s ease;
  }
  .mf-galerie__point.est-actif {
    width: 20px;
    opacity: 1;
  }
  .mf-fiche .product-flags.mf-drapeaux {
    top: 14px;
    left: 14px;
  }
  .mf-fiche .product-flags li.product-flag.mf-drapeaux__badge {
    padding: 6px 10px;
    font-size: 13px;
  }

  /* Achat. */
  .mf-fiche__infos {
    gap: 18px;
    padding: 20px 0 8px;
  }
  .mf-fiche__entete {
    gap: 6px;
  }
  .mf-fiche__categorie {
    display: none;
  }
  .mf-fiche__titre {
    font-size: 28px;
    line-height: 1.15;
  }
  .mf-fiche__avis {
    font-size: 13px;
  }
  .mf-fiche .product-prices.mf-prix-fiche {
    gap: 6px;
    padding: 16px;
  }
  .mf-prix--fiche {
    gap: 10px;
  }
  .mf-prix--fiche .mf-prix__actuel {
    font-size: 30px;
    letter-spacing: normal;
  }
  .mf-prix--fiche .mf-prix__barre {
    font-size: 16px;
  }
  .mf-prix--fiche .mf-prix__badge {
    display: none;
  }
  .mf-prix-fiche__mention {
    font-size: 14px;
  }

  .mf-fiche .product-variants.mf-variantes:has(.mf-variantes__groupe) {
    gap: 18px;
    margin-bottom: 18px;
  }
  .mf-fiche .product-variants > .product-variants-item.mf-variantes__groupe {
    gap: 10px;
  }
  .mf-variantes__choix {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .mf-variante__nom {
    justify-content: center;
    width: 100%;
    min-height: var(--mf-formes-hauteur-bouton-mobile, 52px);
    padding: 0 12px;
    text-align: center;
  }

  /* Quantité seule sur sa ligne ; le bouton d'achat est dans la barre fixe. */
  .mf-achat__quantite {
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }
  .mf-achat__libelle {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    color: var(--mf-couleurs-encre, #141414);
    font-size: 15px;
    font-weight: 700;
  }
  .mf-fiche .product-quantity .qty.mf-quantite {
    height: var(--mf-formes-hauteur-bouton, 48px);
  }
  .mf-fiche .product-quantity #quantity_wanted.mf-quantite__champ {
    width: 32px;
    min-width: 28px;
  }
  .mf-fiche .product-quantity .add.mf-achat__ajout {
    display: none;
  }
  .mf-fiche #product-availability.mf-dispo:has(.mf-dispo__message) {
    margin-top: 18px;
    font-size: 14px;
  }
  .mf-fiche .product-additional-info:has(*) {
    margin-top: 18px;
  }
  .mf-fiche .epp-oos-alert {
    margin-bottom: 18px;
  }

  .mf-fiche__reassurance {
    display: none;
  }

  /* Accordéons. */
  .mf-infos {
    margin-top: 2px;
  }
  .mf-infos__section {
    gap: 0;
    padding: 0;
  }
  .mf-infos__titre {
    font-size: 16px;
  }
  .mf-infos__bouton {
    min-height: 58px;
    cursor: pointer;
  }
  .mf-infos__signe {
    display: block;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
  }
  .mf-infos__signe::before {
    content: "+";
  }
  .mf-infos__bouton[aria-expanded="true"] .mf-infos__signe::before {
    content: "−";
  }
  .mf-infos__panneau {
    margin: 0 0 18px;
    font-size: 15px;
  }
  .mf-fiche__description p,
  .mf-fiche__description li,
  .mf-fiche__description td,
  .mf-fiche__description th {
    font-size: 15px;
  }
  .mf-fiche__description table {
    display: block;
    overflow-x: auto;
  }

  /* Accessoires : cartes sur fond doux, bouton carré « + ». */
  .mf-accessoires {
    background: transparent;
  }
  .mf-accessoires__cadre {
    padding-top: 32px;
    padding-bottom: 8px;
  }
  .mf-accessoires__titre {
    margin-bottom: 14px;
  }
  .mf-accessoires__liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .mf-accessoire {
    gap: 14px;
    padding: 10px;
    background: var(--mf-couleurs-fond-doux, #f3f3f1);
  }
  .mf-accessoire__image {
    flex-basis: 84px;
    width: 84px;
    height: 84px;
    background: transparent;
  }
  .mf-accessoire__image img {
    width: 92%;
  }
  .mf-accessoire__infos {
    gap: 2px;
  }
  .mf-accessoire__nom {
    font-size: 15px;
  }
  .mf-prix--accessoire {
    gap: 8px;
  }
  .mf-prix--accessoire .mf-prix__actuel {
    font-size: 16px;
  }
  .mf-prix--accessoire .mf-prix__barre {
    font-size: 12px;
  }
  .mf-accessoire .mf-accessoire__bouton,
  .mf-accessoire .mf-accessoire__bouton:hover,
  .mf-accessoire .mf-accessoire__bouton:focus {
    flex: 0 0 auto;
    width: var(--mf-formes-hauteur-bouton, 48px);
    min-width: 0;
    height: var(--mf-formes-hauteur-bouton, 48px);
    min-height: 0;
    padding: 0;
    border: 0;
    background: var(--mf-couleurs-encre, #141414);
    color: var(--mf-couleurs-fond, #ffffff);
  }
  .mf-accessoire__libelle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .mf-accessoire__bouton .mf-icone {
    display: block;
  }

  /* Autres produits : carrousel bord à bord, défilement aimanté. */
  .mf-autres {
    padding: 32px 0 24px;
  }
  .mf-autres__titre {
    margin-bottom: 14px;
  }
  .mf-autres .mf-grille-produits {
    display: flex;
    gap: 12px;
    margin: 0 calc(-1 * var(--mf-cadre-marge));
    padding: 0 var(--mf-cadre-marge);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--mf-cadre-marge);
    scrollbar-width: none;
  }
  .mf-autres .mf-grille-produits::-webkit-scrollbar {
    display: none;
  }
  .mf-autres .mf-vignette-cadre {
    flex: 0 0 168px;
    scroll-snap-align: start;
  }
  .mf-autres .mf-vignette.product-miniature {
    gap: 8px;
  }
  .mf-autres .mf-vignette__infos {
    gap: 8px;
  }
  .mf-autres .mf-prix--vignette {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .mf-autres .mf-prix--vignette .mf-prix__actuel {
    font-size: 16px;
  }
  .mf-autres .mf-prix--vignette .mf-prix__barre {
    font-size: 12px;
  }
  .mf-autres .mf-vignette__badge {
    padding: 4px 7px;
    font-size: 11px;
  }

  .mf-avis {
    padding-bottom: 32px;
  }

  /* Barre d'achat fixe en bas de l'écran. */
  .mf-barre-achat {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--mf-couleurs-bordure, #e6e6e4);
    background: var(--mf-couleurs-fond, #ffffff);
  }
  /* Menu plein écran ouvert (metfi.js pose mf-sans-defilement sur <html>) :
     la barre s'efface. Son z-index ne suffit pas à la passer dessous : le
     menu est dans #header, que classic pose en contexte d'empilement à 999,
     et la barre, à 1000, cacherait « Mon compte » et capterait son toucher. */
  html.mf-sans-defilement .mf-barre-achat {
    display: none;
  }
  .mf-barre-achat__total {
    flex: 0 0 auto;
    margin: 0;
    color: var(--mf-couleurs-encre, #141414);
    font-size: 19px;
    font-weight: 800;
    white-space: nowrap;
  }
  .mf-barre-achat .mf-barre-achat__bouton {
    flex: 1 1 auto;
    min-height: calc(var(--mf-formes-hauteur-bouton-mobile, 52px) + 2px); /* 54 px */
    padding: 0 16px;
    font-size: 16px;
  }
  .mf-barre-achat .mf-barre-achat__bouton:disabled {
    border-color: var(--mf-couleurs-bordure, #e6e6e4);
    background: var(--mf-couleurs-bordure, #e6e6e4);
    color: var(--mf-couleurs-texte-doux, #6b6b6b);
    cursor: not-allowed;
  }
}

/* Sur ordinateur, toutes les sections sont ouvertes, même sans JavaScript. */
@media (min-width: 768px) {
  .mf-infos__panneau[hidden] {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-variante__nom,
  .mf-galerie__point {
    transition: none;
  }
}