/* Mosqity — feuille de la famille « produit » (intégration des gabarits du design system Mosqity PS).
   Règles limitées à l’identifiant de page de <body>, jetons var(--…) seulement, aucun !important ;
   redéclaration d’un sélecteur de Hummingbird dans la même couche @layer que l’original.

   Fiche produit : carte C1_FicheProduit V2 (états des composants : X1_KitCommerce), gabarit Qarto « Fiche produit ·
   référentiel 2026 (Mosqity) » ; gabarits catalog/product.tpl et catalog/_partials/product-*.tpl, module
   productcomments ; script assets/js/fiche.js.

   Deux sortes de règles :
   1. Adaptation de Hummingbird : sélecteurs « .page-product .product__… » (la classe de <body id="product">), dans
      @layer ps-pages comme l’original ; ceux du module de réassurance dans @layer ps-modules.
   2. Classes de la carte (c1-*, et mqp-* du bloc commun des cartes C1 à C4, « à verser au kit ») : hors couche, comme
      maquettes.css, toujours précédées de #product.

   Paliers de la carte (@container 899 px dans la maquette) écrits en @media aux paliers du thème :
   1 200 / 992 (bloc d’achat sur une colonne, barre d’achat fixe, ancres défilantes) / 768 / 480 / 380 px.

   Sommaire : §1 mise en page · §2 galerie, encadré conseils, engagements · §3 bloc d’achat · §4 menu d’ancres et
   rappel · §5 suite de la fiche · §6 avis · §7 barre d’achat fixe · §8 paliers. */


/* §1 Mise en page ----------------------------------------------------------------------------------------------- */

@layer ps-pages {
  /* Bloc d’achat : une colonne sous 992 px ; galerie et bloc côte à côte ensuite (carte : 1,05 fr / 1 fr). */
  .page-product .product__actions,
  .page-product .product__add-to-cart-container,
  .page-product .product__availability,
  .page-product .product__customization,
  .page-product .product__description-short,
  .page-product .product__discounts,
  .page-product .product__manufacturer,
  .page-product .product__minimal-quantity,
  .page-product .product__name,
  .page-product .product__pack,
  .page-product .product__prices,
  .page-product .product__variants {
    margin-block-end: 0;
  }

  .page-product .product__images {
    margin-block-end: 0;
  }

  .page-product .product__bottom-left,
  .page-product .product__bottom-right {
    margin-block-end: 0;
  }

  .page-product .product__additional-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  @media (min-width: 992px) {
    .page-product .product__container {
      display: grid;
      gap: var(--space-6);
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }

    /* Suite de la fiche : une seule colonne (le menu d’ancres y colle jusqu’aux avis). */
    .page-product .product__bottom {
      display: block;
      margin-block-start: 0;
    }
  }

  @media (min-width: 1200px) {
    .page-product .product__container {
      gap: var(--space-7);
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }

    .page-product .product__additional-info {
      gap: var(--space-4);
    }

    .page-product .product__bottom-left,
    .page-product .product__bottom-right {
      margin-block-end: 0;
    }

    .page-product .product__actions,
    .page-product .product__add-to-cart-container,
    .page-product .product__availability,
    .page-product .product__customization,
    .page-product .product__description-short,
    .page-product .product__discounts,
    .page-product .product__manufacturer,
    .page-product .product__minimal-quantity,
    .page-product .product__name,
    .page-product .product__pack,
    .page-product .product__prices,
    .page-product .product__variants {
      margin-block-end: 0;
    }
  }
}

#product .product__container {
  padding-bottom: var(--space-7);
}

#product .product__left,
#product .product__right {
  min-width: 0;
}

/* Le crochet de réassurance est rendu sous la galerie : la colonne de droite du bas de fiche reste vide. */
#product .product__bottom-right:empty {
  display: none;
}


/* §2 Galerie, encadré « Pour une meilleure efficacité », engagements -------------------------------------------- */

#product .product__left {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

@layer ps-pages {
  /* Photo principale : packshot entier (contain) sur blanc, filet discret, grands arrondis de la charte. */
  .page-product .product__carousel {
    border-radius: var(--radius-photo);
    overflow: hidden;
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--border-subtle);
  }

  .page-product .product__no-image {
    position: relative;
  }

  /* Quatre vignettes (carte : photo principale + 4 vignettes). */
  .page-product .product__thumbnails {
    margin-block-start: 0;
  }

  .page-product .product__thumbnails-list {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .page-product .product__thumbnail {
    display: block;
    width: 100%;
    min-height: 44px;
    background-color: var(--white);
    border: none;
    border-radius: var(--radius-card);
    padding: 0;
  }

  .page-product .product__thumbnail-image {
    width: 100%;
    aspect-ratio: 1.25 / 1;
    object-fit: contain;
    border-radius: var(--radius-card);
    outline: 1px solid var(--border-subtle);
    outline-offset: -1px;
  }

  .page-product .product__thumbnail.active .product__thumbnail-image {
    outline: 2px solid var(--navy);
    outline-offset: -2px;
  }

  .page-product .product__zoom {
    bottom: var(--space-3);
    right: var(--space-3);
    box-shadow: none;
  }

  @media (min-width: 768px) {
    .page-product .product__thumbnails {
      margin-block-start: 0;
      margin-block-end: 0;
    }

    .page-product .product__thumbnails-list {
      gap: var(--space-3);
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (min-width: 992px) {
    .page-product .product__images {
      margin-block-end: 0;
    }
  }

  @media (min-width: 1200px) {
    .page-product .product__thumbnails-list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}

#product .product__carousel .carousel-item img,
#product .product__no-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.32 / 1;
  object-fit: contain;
}

/* Flèches et zoom : cercles blancs de 44 px, contour navy (CircleButton). */
#product .product__carousel .carousel-control-prev,
#product .product__carousel .carousel-control-next {
  top: calc(50% - 22px);
  bottom: auto;
  width: 44px;
  height: 44px;
  margin-inline: var(--space-3);
  opacity: 1;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--navy);
  border-radius: 50%;
}

#product .product__carousel .carousel-control-prev-icon,
#product .product__carousel .carousel-control-next-icon {
  width: auto;
  height: auto;
  background-color: transparent;
}

#product .product__carousel .carousel-control-prev-icon::before,
#product .product__carousel .carousel-control-next-icon::before {
  color: var(--navy);
}

#product .product__zoom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--navy);
  border-radius: 50%;
}

/* Étiquettes de l’image en pastilles contour. La remise et « en solde » n’y figurent pas : la promotion s’annonce
   dans le bloc prix, avec le prix de référence des 30 jours (lamomnibus), ou pas du tout. */
#product .product__carousel .product-flags,
#product .product__no-image .product-flags {
  padding: var(--space-4);
}

#product .product__carousel .product-flags .badge,
#product .product__no-image .product-flags .badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--navy);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}

#product .product-flags .badge.discount,
#product .product-flags .badge.on-sale {
  display: none;
}

/* Encadré navy « Pour une meilleure efficacité » : articles de la rubrique Conseils (lamconseils). */
#product .mqp-panneau {
  background: var(--off-white);
  color: var(--navy);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}

#product .mqp-panneau--navy {
  background: var(--navy);
  color: var(--white);
}

#product .mqp-panneau--bleu {
  background: var(--navy-100);
}

#product .c1-efficacite {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}

#product .c1-efficacite :focus-visible {
  outline-color: var(--focus-ring-sombre);
}

#product .c1-efficacite ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-5);
}

#product .c1-efficacite a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  color: var(--white);
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
}

#product .c1-efficacite a:hover span {
  text-decoration: underline;
}

#product .mqp-rond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--yellow);
  flex: none;
}

#product .mqp-rond svg {
  width: 20px;
  height: 20px;
}

/* Engagements : le module de réassurance en liste à filets (carte : « c1-engagements »). */
#product .c1-engagements {
  width: 100%;
}

@layer ps-modules {
  .blockreassurance--product {
    gap: 0;
    margin-block-end: 0;
  }
}

#product .c1-engagements .reassurance {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--navy);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}

#product .c1-engagements a.reassurance:hover .reassurance__title {
  text-decoration: underline;
}

#product .c1-engagements .reassurance__image {
  width: 22px;
  height: 22px;
}

#product .c1-engagements .reassurance__image img {
  width: 100%;
  height: 100%;
}

#product .c1-engagements .reassurance__title {
  font-weight: var(--weight-bold);
}

#product .c1-engagements .reassurance__content br {
  display: none;
}

#product .c1-engagements .reassurance__desc {
  color: var(--navy);
  font-size: 13px;
}

#product .c1-engagements .reassurance__desc::before {
  content: " · ";
}


/* §3 Bloc d’achat ------------------------------------------------------------------------------------------------- */

#product .product__right {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

#product .product__right:focus {
  outline: 0;
}

#product .product__actions,
#product #add-to-cart-or-refresh,
#product .product__add-to-cart-container {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

#product .c1-titre {
  margin: 0;
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-bold);
  color: var(--navy);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

#product .c1-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

/* Note en disques : lien de 44 px vers les avis. */
#product .c1-note {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: 44px;
  margin: 0;
  color: var(--navy);
  font-size: 13px;
  text-decoration: none;
}

#product a.c1-note:hover span:last-child {
  text-decoration: underline;
}

#product .c1-ideal {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

#product .c1-accroche {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
}

#product .c1-accroche p {
  margin: 0;
}

#product .c1-plus {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: calc(-1 * var(--space-2));
  color: var(--navy);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Prix TTC, remise, prix de référence, éco-participation, encart de crédit. */
#product .c1-prix {
  display: grid;
  gap: var(--space-2);
}

#product .c1-prix__montant {
  font-size: 36px;
  line-height: 1;
  font-weight: var(--weight-bold);
  color: var(--navy);
  white-space: nowrap;
}

#product .c1-remise {
  height: 28px;
  font-size: 13px;
}

#product .c1-prixref,
#product .c1-credit {
  display: grid;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--off-white);
  font-size: 13px;
  line-height: 1.45;
}

#product .c1-prixref p,
#product .c1-credit p {
  margin: 0;
}

#product .mqp-barre {
  text-decoration: line-through;
  font-weight: var(--weight-bold);
}

#product .c1-prix .mq-mention {
  color: var(--navy);
}

/* Déclinaisons libellées par le besoin : cartes de 56 px (carte : « mqp-choix »), choisie en navy-100 et anneau navy. */
#product .product-variant {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

#product .product-variant__legend,
#product .product-variant__selected {
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}

#product .product-variant__radios,
#product .product-variant__colors {
  gap: var(--space-3);
}

#product .product-variant__radio .btn {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  min-width: 128px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-card);
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: normal;
}

#product .product-variant__radio .btn-check + .btn:hover {
  background: var(--navy-100);
  color: var(--navy);
}

#product .product-variant__radio .btn-check:checked + .btn {
  background: var(--navy-100);
  border-color: var(--navy);
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
}

#product .product-variant__radio .btn-check:focus-visible + .btn,
#product .input-color__input:focus-visible + .input-color__label {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

#product .input-color__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-card);
}

#product .input-color .color {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* Mention biocide (E67) : texte fixé, encadré au trait navy. */
#product .c1-biocide {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--navy);
  font-size: 13px;
  line-height: 1.45;
}

#product .c1-biocide p {
  margin: 0;
}

/* Stock en mot et icône, phrase de délai (au-dessus du bouton). */
#product .c1-dispo {
  display: grid;
  gap: var(--space-2);
}

#product .mqp-etat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--navy);
}

#product .mqp-etat .mq-ico {
  width: 20px;
  height: 20px;
}

#product .mqp-etat--succes {
  color: var(--succes);
}

#product .mqp-etat--alerte {
  color: var(--alerte);
}

#product .mqp-etat--erreur {
  color: var(--erreur);
}

#product .c1-dispo__detail {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--navy);
}

#product .c1-delai {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--navy);
}

#product .c1-delai .mq-ico {
  width: 20px;
  height: 20px;
}

/* Quantité (pilule, boutons de 44 px) et « Ajouter au panier » (seul jaune). */
#product .c1-acheter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

#product .c1-acheter .product__quantity {
  width: auto;
  flex: none;
}

#product .mqp-qte {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  width: auto;
  height: 48px;
  padding: 0 1px;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-pill);
  background: var(--white);
}

#product .mqp-qte .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--navy);
}

#product .mqp-qte .btn:hover {
  opacity: 1;
  background: var(--navy-100);
}

#product .mqp-qte .material-icons {
  font-size: 20px;
}

#product .mqp-qte input {
  flex: none;
  width: 40px;
  max-width: 40px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  font-weight: var(--weight-bold);
  text-align: center;
}

#product .c1-acheter .product__add-to-cart {
  flex: 1 1 200px;
  min-width: 0;
}

#product .product__add-to-cart-button {
  width: 100%;
  min-height: 52px;
  white-space: normal;
}

/* Sans achat possible : désactivé lisible (kit X1 : fond navy-100, texte navy), la raison est le mot de stock. */
#product .product__add-to-cart-button:disabled {
  opacity: 1;
  background: var(--navy-100);
  border-color: var(--navy-100);
  color: var(--navy);
}

#product .c1-expert {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--navy);
  font-size: 15px;
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* §4 Menu d’ancres collant et rappel d’achat ----------------------------------------------------------------------- */

/* Collé sous la barre collante de l’en-tête (64 px, 56 px sous 900 px) jusqu’à la fin des avis ; fond blanc et filet
   sur toute la largeur de l’écran par border-image (débord peint, sans défilement latéral). */
#product .c1-ancres {
  position: sticky;
  top: 64px;
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 72px;
  margin-bottom: var(--space-5);
  background: var(--white);
  border-image: linear-gradient(to top, var(--border-subtle) 1px, var(--white) 1px) fill 0 // 0 100vw;
}

#product .c1-ancres ul {
  display: flex;
  gap: var(--space-6);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

#product .c1-ancres ul::-webkit-scrollbar {
  display: none;
}

#product .c1-ancres ul a {
  display: flex;
  align-items: center;
  min-height: 72px;
  color: var(--navy);
  text-decoration: none;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

#product .c1-ancres ul a:hover {
  border-bottom-color: var(--navy-100);
}

#product .c1-ancres ul a[aria-current] {
  font-weight: var(--weight-bold);
  border-bottom-color: var(--navy);
}

#product .c1-ancres ul a:focus-visible {
  outline-offset: -3px;
}

#product .c1-rappel:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

#product .c1-rappel img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-card);
  object-fit: contain;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

#product .c1-rappel__t {
  display: grid;
  gap: 2px;
  min-width: 0;
  max-width: 280px;
  line-height: 1.2;
}

#product .c1-rappel__t b {
  font-size: 14px;
}

#product .c1-rappel__t > span {
  font-size: 12px;
}

#product .c1-rappel__p {
  font-size: 20px;
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

#product .c1-rappel .btn {
  flex: none;
}

#product .c1-coupe {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* §5 Suite de la fiche ------------------------------------------------------------------------------------------- */

#product .c1-suite {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
}

#product .c1-rangee {
  display: grid;
  gap: var(--space-7) var(--space-8);
  align-items: start;
}

#product .c1-rangee--duo {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

#product .c1-rangee--duo > :only-child {
  grid-column: 1 / -1;
}

#product .c1-rangee--trio {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-7) var(--space-6);
}

#product .c1-bloc {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}

#product .c1-pile {
  gap: var(--space-6);
}

/* Cibles des ancres : sous la barre collante (marge de défilement du thème, marque.js) et le menu d’ancres. */
#product .c1-suite [id] {
  scroll-margin-top: calc(72px + var(--space-2));
}

#product .c1-h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-bold);
  color: var(--navy);
  text-wrap: balance;
}

#product .c1-h4 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  font-weight: var(--weight-bold);
  color: var(--navy);
}

#product .c1-h5 {
  margin: 0;
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--navy);
}

#product .c1-desc .rich-text {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  overflow-wrap: break-word;
}

#product .c1-suite .rich-text img {
  max-width: 100%;
  height: auto;
}

/* Recharges à cocher. */
#product .c1-recharges {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

#product .c1-recharge {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
  line-height: 1.35;
}

#product .c1-recharge__case {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  cursor: pointer;
}

#product .c1-recharge__case input {
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 6px;
  cursor: pointer;
}

#product .c1-recharge__nom {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#product .c1-recharge__nom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--navy);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

#product .c1-recharge__prix {
  white-space: nowrap;
}

#product .c1-recharges__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

#product .c1-recharges__pied .mq-mention:empty {
  display: none;
}

/* Caractéristiques et identification (carte : « mqp-specs »). */
#product .mqp-specs {
  display: grid;
  margin: 0;
}

#product .mqp-specs > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-5);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

#product .mqp-specs dt {
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}

#product .mqp-specs dd {
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: var(--weight-bold);
  text-align: right;
  overflow-wrap: anywhere;
}

#product .mqp-specs dd a {
  color: inherit;
}

/* Documents à télécharger. */
#product .c1-docs {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

#product .c1-docs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--navy);
  font-size: 15px;
  text-decoration: none;
}

#product .c1-docs a:hover > span:first-child {
  text-decoration: underline;
}

#product .c1-docs a > span:first-child {
  display: grid;
  min-width: 0;
  overflow-wrap: anywhere;
}

#product .c1-docs small {
  font-size: 13px;
}

#product .c1-docs__poids {
  flex: none;
  font-size: 13px;
  white-space: nowrap;
}

/* Sécurité et fabricant. */
#product .c1-securite {
  gap: var(--space-3);
}

#product .c1-alerte {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--erreur);
  color: var(--erreur);
  font-size: 14px;
}

#product .c1-alerte a {
  color: inherit;
}

#product .mqp-puces {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

#product .mqp-puces li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.45;
}

#product .mqp-puces li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy);
}

/* Lien d’action en capitales et cercle-flèche (TextLink, CircleButton). */
#product .mqp-fleche {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  color: var(--navy);
  text-decoration: none;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}

#product .mqp-fleche i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--yellow);
  flex: none;
}

#product .mqp-fleche i svg {
  width: 20px;
  height: 20px;
}

#product .mqp-fleche:hover {
  text-decoration: underline;
}

/* Questions fréquentes (contenu de module en <details>). */
#product .c1-ia {
  margin: 0;
  padding: var(--space-2) var(--space-3);
}

#product .mqp-faq details {
  border-bottom: 1px solid var(--border-subtle);
}

#product .mqp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-3) 0;
  list-style: none;
  font-size: 17px;
  font-weight: var(--weight-bold);
  cursor: pointer;
}

#product .mqp-faq summary::-webkit-details-marker {
  display: none;
}

#product .mqp-faq summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  font-size: 18px;
  flex: none;
}

#product .mqp-faq details[open] summary::after {
  content: "−";
  background: var(--navy);
  color: var(--white);
}

#product .mqp-faq details > :not(summary) {
  margin: 0 0 var(--space-4);
  font-size: 15px;
  line-height: 1.5;
  max-width: 70ch;
}

/* Pour aller plus loin : listes de produits des modules (miniatures du catalogue). */
#product .c1-plus-loin {
  display: grid;
  gap: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
}


/* §6 Avis (module productcomments) -------------------------------------------------------------------------------- */

#product .c1-avis {
  gap: var(--space-4);
}

#product .c1-moderation {
  max-width: 60ch;
}

#product .c1-disques[data-grade^="1"] i:nth-child(n+2),
#product .c1-disques[data-grade^="2"] i:nth-child(n+3),
#product .c1-disques[data-grade^="3"] i:nth-child(n+4),
#product .c1-disques[data-grade^="4"] i:nth-child(n+5),
#product .c1-disques[data-grade^="0"] i {
  background: var(--navy-100);
}

@layer ps-pages {
  .page-product #product-comments-list-header {
    display: grid;
    gap: var(--space-3);
    margin-block-end: 0;
    padding: 0;
  }

  .page-product #product-comments-list .comment {
    background-color: transparent;
    border-bottom: 1px solid var(--border-subtle);
    margin: 0;
    padding: var(--space-4) 0;
  }

  .page-product #product-comments-list .comment__author,
  .page-product #product-comments-list .comment__date,
  .page-product #product-comments-list .comment__title {
    color: var(--navy);
  }
}

#product #product-comments-list .comment__buttons .btn {
  min-height: 44px;
}


/* §7 Barre d’achat fixe (carte C1, état 04) : sous 992 px, quand le bouton du bloc n’est pas à l’écran (fiche.js). */

#product .mqp-fixe {
  display: none;
}

#product .c1-fixe__t {
  display: grid;
  flex: 1;
  min-width: 0;
}

#product .c1-fixe__t b {
  font-size: 13px;
}

#product .c1-fixe__p {
  font-size: 17px;
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

#product .mqp-fixe .btn {
  flex: none;
  min-width: 0;
  padding-inline: var(--space-5);
}


/* §8 Paliers ------------------------------------------------------------------------------------------------------ */

@media (max-width: 1199.98px) {
  #product .c1-titre {
    font-size: 40px;
  }

  #product .c1-rappel__t {
    max-width: 200px;
  }

  #product .c1-ancres ul {
    gap: var(--space-5);
  }
}

@media (max-width: 991.98px) {
  #product .product__container {
    display: grid;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
  }

  #product .c1-titre {
    font-size: 30px;
  }

  #product .c1-prix__montant {
    font-size: 30px;
  }

  /* Ancres : rangée défilante de 46 px sous la barre collante ; le rappel laisse la place à la barre fixe. */
  #product .c1-ancres {
    min-height: 46px;
    margin-bottom: var(--space-4);
  }

  #product .c1-ancres ul {
    gap: var(--space-5);
  }

  #product .c1-ancres ul a {
    min-height: 46px;
  }

  #product .c1-rappel:not([hidden]) {
    display: none;
  }

  #product .c1-suite [id] {
    scroll-margin-top: calc(46px + var(--space-2));
  }

  #product .c1-rangee--duo {
    grid-template-columns: minmax(0, 1fr);
  }

  #product .mqp-fixe:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1015;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    border-top: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-soft);
  }

  /* Place de la barre en bas de page, pour qu’elle ne cache jamais la fin du pied. */
  #product:has([data-c1-barre]) {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* Sous 900 px, la barre collante de l’en-tête mesure 56 px (marque.css). */
@media (max-width: 899.98px) {
  #product .c1-ancres {
    top: 56px;
  }
}

@media (max-width: 767.98px) {
  #product .c1-suite {
    gap: var(--space-6);
  }

  #product .c1-rangee {
    gap: var(--space-6);
  }

  #product .c1-efficacite ul {
    grid-template-columns: minmax(0, 1fr);
  }

  #product .c1-h2 {
    font-size: 24px;
  }

  #product .product__carousel .carousel-item img,
  #product .product__no-image img {
    aspect-ratio: 1.15 / 1;
  }
}

@media (max-width: 479.98px) {
  #product .c1-titre {
    font-size: 28px;
  }

  #product .product-variant__radio .btn {
    min-width: 0;
  }

  #product .c1-acheter .product__add-to-cart {
    flex-basis: 100%;
  }

  #product .mqp-specs dd {
    text-align: left;
  }

  #product .mqp-fixe .btn {
    padding-inline: var(--space-4);
  }
}

/* 320-379 px : la barre d’achat garde le prix et le bouton, sans le nom. */
@media (max-width: 379.98px) {
  #product .c1-fixe__t b {
    display: none;
  }

  #product .mqp-fixe .btn {
    flex: 1;
    white-space: normal;
  }
}