/* AEROCAP — fiche produit (gabarit Qarto « Produit 1 (n° 7) »). (structure reprise de L’Abritant V2, 04/11/2026)
   Design system V2 : carte C1_FicheProduit (bureau), M2_TelephoneFiche (téléphone).
   Chargée sur la seule page produit (config/theme.yml, assets.css.product).

   Deux sortes de règles :
   1. Classes de la carte (c1-*, « classes locales à verser au kit ») : hors couche, comme maquettes.css.
   2. Adaptation de Hummingbird (.page-product .product__…) : dans @layer ps-pages, la couche des règles
      de page de Hummingbird ; même sélecteur quand on redéclare une valeur du parent.
   Uniquement des jetons var(--…) pour couleurs, polices, rayons et espacements ; aucun !important.

   Sommaire : §1 mise en page · §2 galerie et conseiller · §3 bloc d’achat · §4 ancres et plis ·
   §5 sécurité et fabricant · §6 barre d’achat fixe · §7 galerie collante et paliers (1 200 / 992 / 768 / 480 px). */


/* §1 Mise en page : galerie à gauche, bloc d’achat de 520 px à droite ; plis et rail dessous. */
@layer ps-pages {
  .page-product .product__container { display: grid; grid-template-columns: minmax(0, 1fr) var(--bloc-achat); gap: var(--espace-12); align-items: start; }
  .page-product .product__left { display: grid; gap: var(--espace-4); align-content: start; min-width: 0; }
  /* Une colonne : « Sécurité et fabricant » est un pli comme les autres (retours de Gaëlle du 28/10/2026, ligne 69). */
  .page-product .product__bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace-8); align-items: start; margin-block-start: var(--espace-12); }
  .page-product .product__bottom-right { display: none; }
  /* « Déjà vus », « Dans la même catégorie » : détachés du bas de fiche (relevé des titres collés du 28/10/2026). */
  .page-product .module-products { margin-block-start: var(--espace-12); }
  .page-product .product__bottom-left, .page-product .product__bottom-right { min-width: 0; margin-block-end: var(--espace-12); }

  /* Espacements de Hummingbird remplacés par la grille du bloc d’achat */
  .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; }
}


/* §2 Galerie : vignettes de 84 px à gauche, image entière (contain), flèches et zoom de 40 px. */
@layer ps-pages {
  .page-product .product__images { --c1-vignette: 84px; display: grid; grid-template-columns: var(--c1-vignette) minmax(0, 1fr); gap: var(--espace-4); align-items: start; margin-block-end: 0; }
  .page-product .product__carousel, .page-product .product__no-image { grid-column: 2; grid-row: 1; aspect-ratio: 1 / 1; background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
  .page-product .product__carousel .carousel-inner, .page-product .product__carousel .carousel-item, .page-product .product__carousel .carousel-item picture { height: 100%; }
  .page-product .product__carousel picture, .page-product .product__no-image picture { display: block; }
  .page-product .product__carousel .carousel-item img, .page-product .product__no-image img { width: 100%; height: 100%; object-fit: contain; }

  .page-product .product__carousel .carousel-control-prev, .page-product .product__carousel .carousel-control-next { top: calc(50% - 20px); bottom: auto; width: 40px; height: 40px; opacity: 1; background: var(--blanc); color: var(--graphite); border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-s); }
  .page-product .product__carousel .carousel-control-prev { left: var(--espace-4); }
  .page-product .product__carousel .carousel-control-next { right: var(--espace-4); }
  .page-product .product__carousel .carousel-control-prev::after, .page-product .product__carousel .carousel-control-next::after, .page-product .product__zoom::after { content: ""; position: absolute; inset: -4px; }
  .page-product .product__carousel .carousel-control-prev-icon, .page-product .product__carousel .carousel-control-next-icon { width: auto; height: auto; background-color: transparent; }
  .page-product .product__carousel .carousel-control-prev-icon::before, .page-product .product__carousel .carousel-control-next-icon::before { color: var(--graphite); }
  .page-product .product__carousel .carousel-control-prev:focus-visible, .page-product .product__carousel .carousel-control-next:focus-visible, .page-product .product__zoom:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
  .page-product .product__zoom { top: var(--espace-4); right: var(--espace-4); bottom: auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: var(--blanc); color: var(--graphite); border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-s); box-shadow: none; }

  .page-product .product__thumbnails { grid-column: 1; grid-row: 1; margin-block-start: 0; }
  .page-product .product__thumbnails-list { display: flex; flex-direction: column; gap: var(--espace-3); margin: 0; padding: 0; list-style: none; }
  .page-product .product__thumbnail { display: block; width: var(--c1-vignette); height: var(--c1-vignette); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-s); overflow: hidden; }
  .page-product .product__thumbnail.active { border: var(--trait-hauban) solid var(--graphite); }
  .page-product .product__thumbnail picture { display: block; height: 100%; }
  .page-product .product__thumbnail-image { width: 100%; height: 100%; object-fit: contain; border-radius: 0; outline: 0; }
  .page-product .product__thumbnail.active .product__thumbnail-image { outline: 0; }
  .page-product .product__thumbnail:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }

  /* Étiquettes sur l’image : « Nouveau » en contour graphite, promotion sur jaune pâle (décision 26) */
  .page-product .product__carousel .product-flags { padding: var(--espace-4) 64px var(--espace-4) var(--espace-4); }
  .page-product .product__carousel .product-flags .badge:not(.discount) { background: var(--blanc); color: var(--graphite); border: var(--trait-moyen) solid var(--graphite); }
  .page-product .product__carousel .product-flags .badge.discount { background: var(--jaune-pale); color: var(--graphite); border: var(--trait-moyen) solid var(--jaune-pale); }
  .page-product .product__carousel .product-flags .badge { padding: 2px var(--espace-2); border-radius: var(--rayon-s); font-family: var(--font-technique); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
}



/* §3 Bloc d’achat (« pg-achat ») : encadré graphite, ordre de la décision 11. */
@layer ps-pages {
  .page-product .product__container > .product__right { display: grid; gap: var(--espace-3); padding: var(--espace-6); background: var(--blanc); color: var(--texte); border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-m); min-width: 0; }
  .page-product .product__container > .product__right:focus { outline: 0; }
  .page-product .product__actions, .page-product #add-to-cart-or-refresh { display: grid; gap: var(--espace-4); }
  .page-product .product__add-to-cart-container { display: grid; gap: var(--espace-4); }
  .page-product .product__availability { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-2) var(--espace-3); }
  .page-product .product__actions-qty-add { display: grid; gap: var(--espace-4); }
  .page-product .product__quantity { width: auto; }
  .page-product .product__minimal-quantity { margin-block-start: 0; color: var(--texte-doux); font-size: 14px; }
  .page-product .product__additional-info { gap: var(--espace-3); }
  .page-product .product__additional-info:empty { display: none; }

  /* Quantité : boutons + / − de 44 px, champ de 48 px (kit X1, « x1-qte ») */
  .page-product .product__quantity .input-group { flex-wrap: nowrap; width: auto; }
  .page-product .product__quantity .btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 48px; padding: 0; background: var(--blanc); color: var(--graphite); border: var(--trait-moyen) solid var(--trait-fort); border-radius: var(--rayon-s); }
  .page-product .product__quantity .btn:hover { opacity: 1; background: var(--jaune-pale); }
  .page-product .product__quantity .btn:focus-visible, .page-product .product__quantity input:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; box-shadow: none; }
  .page-product .product__quantity input { width: 56px; max-width: 56px; height: 48px; text-align: center; font-family: var(--font-technique); font-size: 16px; color: var(--graphite); background: var(--blanc); border: var(--trait-moyen) solid var(--trait-fort); border-inline: 0; border-radius: 0; }
}

.c1-achat__tete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--espace-2) var(--espace-3); min-height: 24px; }
.c1-nom { margin: var(--espace-1) 0 0; font-family: var(--font-titre); font-size: 36px; line-height: 40px; font-weight: 750; letter-spacing: -0.015em; font-variation-settings: "opsz" 48; color: inherit; }
.c1-accroche { font-size: 16px; line-height: 24px; color: var(--texte-doux); }
.c1-accroche p { margin: 0; }
/* Pièce détachée : « Compatible avec » sous le nom (E76, 28/10/2026), une ligne par gamme, dimensions en mono
   séparées par le trait oblique de la cote. */
.c1-compatible { display: grid; gap: var(--espace-1); margin-top: var(--espace-3); }
.c1-compatible__titre { margin: 0; }
.c1-compatible__liste { display: grid; gap: var(--espace-1); margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; }
.c1-compatible__liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--espace-2); }
.c1-compatible__dims { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--espace-2); font-family: var(--font-technique); font-size: 14px; }
.c1-compatible__dims span { display: inline-flex; align-items: center; gap: var(--espace-2); white-space: nowrap; }
.c1-compatible__dims span + span::before { content: ""; width: 10px; height: 2px; background: var(--graphite); transform: rotate(-64deg); }

.c1-prix { gap: var(--espace-1); }
.c1-prix p { margin: 0; }
.c1-prix__ligne { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--espace-1) var(--espace-3); }
.c1-prix__ht { font-family: var(--font-technique); font-size: 13px; line-height: 18px; color: var(--texte-doux); white-space: nowrap; }
.c1-prix-ref { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); }
.c1-prix-ref s { font-family: var(--font-technique); }
.c1-prix__unite { font-size: 13px; line-height: 18px; color: var(--texte-doux); }

/* Déclinaisons : boutons « pg-variante », pastilles nommées « c1-couleur » (cibles de 44 px au moins) */
.c1-variantes { display: grid; gap: var(--espace-4); }
.c1-champ { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 0; }
.c1-champ legend { float: none; width: auto; padding: 0; margin: 0 0 var(--espace-2); font-size: 15px; line-height: 20px; }
.c1-champ--ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); }
.c1-champ--ligne legend { float: left; margin: 0; }
.c1-champ .pg-variantes { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.c1-champ .pg-variante { position: relative; min-height: 48px; align-content: center; cursor: pointer; }
.c1-champ .pg-variante:hover { border-color: var(--graphite); }
.c1-champ .pg-variante:has(input:checked) { background: var(--graphite); border-color: var(--graphite); color: var(--toile); }
.c1-champ .pg-variante:has(input:focus-visible), .c1-couleur:has(input:focus-visible) { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
.c1-couleurs { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.c1-couleur { position: relative; display: inline-flex; align-items: center; gap: var(--espace-2); min-height: 44px; padding: 0 var(--espace-3) 0 var(--espace-2); background: var(--blanc); border: var(--trait-moyen) solid var(--trait-fort); border-radius: var(--rayon-s); font-size: 15px; font-weight: 600; cursor: pointer; }
.c1-couleur.on, .c1-couleur:has(input:checked) { border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); }
.c1-couleur .pg-pastille { display: inline-block; flex: none; }

/* Disponibilité et délai (texte du back-office, en attendant l’estimateur au code postal) */
.c1-dispo .pg-stock { margin: 0; }
.c1-dispo__detail { display: block; font-size: 13px; font-weight: 400; color: var(--texte-doux); }
.c1-delai { display: flex; align-items: flex-start; gap: var(--espace-2); margin: 0; font-size: 14px; line-height: 20px; color: var(--texte-doux); }
.c1-delai svg { margin-top: 2px; }

/* Quantité puis bouton d’achat (seul jaune visible) */
.c1-qte { display: flex; align-items: center; gap: var(--espace-4); font-size: 15px; font-weight: 600; }
.c1-qte__lib { margin: 0; }
.c1-commande .product__add-to-cart-button { width: 100%; min-height: 56px; }
/* Total dans le bouton (R200) : sans place sous 380 px (palier du DS ; 23 px de trop à 320 px), où la barre
   d’achat fixe montre déjà le prix. */
@media (max-width: 379.98px) { .c1-commande .ab-bouton__total { display: none; } }

/* Pied du bloc d’achat : une seule liste d’engagements, filet entre les lignes, sans encadré (variante F1, 28/10/2026) */
.c1-engagements { list-style: none; margin: var(--espace-2) 0 0; padding: 0; border-top: var(--trait-fin) solid var(--trait); }
.c1-engagements li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--espace-1) var(--espace-3); align-items: start; padding: var(--espace-3) 0; border-bottom: var(--trait-fin) solid var(--trait); font-size: 14px; line-height: 20px; color: var(--texte-doux); }
.c1-engagements .pg-ico { width: 20px; height: 20px; color: var(--graphite); }
.c1-engagements b { display: block; color: var(--graphite); font-weight: 600; }
.c1-engagements a { display: inline-flex; align-items: center; min-height: 44px; margin-top: -12px; color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.c1-engagements a:focus-visible { outline: var(--trait-hauban) solid var(--jaune-hauban); outline-offset: 2px; }
.c1-engagements__liens { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--espace-4); }


/* §3 ter « Souvent acheté avec » (fiche d’un accessoire ; carte C1) : miniatures du catalogue (A3) dans la grille
   pg-grille--4, à la place de l’encadré « À ajouter avec ce produit », même écart avec le menu d’ancres. */
.c1-souvent { display: grid; gap: var(--espace-4); margin: 0 0 var(--espace-8); }
.c1-souvent h2 { margin: 0; }

/* §3 bis « À ajouter avec ce produit » (réf. l.204 ; carte C1), à la manière d’Amazon : une colonne par article
   (photo, case, nom, prix) reliées par « + », total et bouton à droite ; article décoché estompé. Sous 768 px, une
   ligne par article (photo de 72 px à gauche) et le total dessous. Colonnes de 200 px au plus, qui se resserrent
   quand la place manque (recette du 03/11 : 4 articles débordaient de 19 à 268 px entre 768 et 1 200 px) ; total
   sous les articles avant 1 200 px. */
.c1-ensemble { display: grid; gap: var(--espace-4); margin: 0 0 var(--espace-8); padding: var(--espace-6); background: var(--jaune-pale); border-radius: var(--rayon-m); }
.c1-ensemble h2 { margin: 0; }
.c1-ensemble__corps { display: grid; grid-template-columns: minmax(0, max-content) minmax(240px, 280px); justify-content: start; gap: var(--espace-8); align-items: start; }
.c1-ensemble__articles { display: flex; align-items: stretch; gap: var(--espace-3); min-width: 0; margin: 0; padding: 0; list-style: none; }
.c1-ensemble__article { flex: 0 1 auto; display: grid; grid-template-columns: auto minmax(0, 200px); grid-template-rows: minmax(0, 1fr) var(--cible-min); gap: 0 var(--espace-3); align-items: start; min-width: 0; }
.c1-ensemble__article:first-child { grid-template-columns: minmax(0, 200px); }
.c1-ensemble__article + .c1-ensemble__article::before { content: "+"; grid-row: 1; margin-top: 86px; font-family: var(--font-titre); font-size: 28px; line-height: 1; font-weight: 700; color: var(--graphite); }
.c1-ensemble__article > label { grid-row: 1; display: flex; flex-direction: column; gap: var(--espace-2); align-self: stretch; min-width: 0; margin: 0; cursor: pointer; }
.c1-ensemble__article + .c1-ensemble__article > label, .c1-ensemble__article + .c1-ensemble__article > .c1-ensemble__voir { grid-column: 2; }
.c1-ensemble__visuel { display: block; aspect-ratio: 1; background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-s); overflow: hidden; transition: opacity .15s; }
.c1-ensemble__visuel img { display: block; width: 100%; height: 100%; object-fit: contain; }
.c1-ensemble__article:has(input:not(:checked)) .c1-ensemble__visuel { opacity: .45; }
.c1-ensemble__case { display: flex; align-items: flex-start; gap: var(--espace-2); min-height: var(--cible-min); padding-top: var(--espace-1); font-size: 14px; line-height: 20px; }
.c1-ensemble__case input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--graphite); }
.c1-ensemble__case b { font-weight: 600; }
.c1-ensemble__prix { margin-top: auto; font-family: var(--font-technique); font-size: 15px; font-weight: 600; white-space: nowrap; }
.c1-ensemble__voir { grid-row: 2; justify-self: start; display: inline-flex; align-items: center; min-height: var(--cible-min); color: var(--graphite); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.c1-ensemble__total { display: grid; gap: var(--espace-3); padding: var(--espace-4); background: var(--blanc); border-radius: var(--rayon-s); }
.c1-ensemble__somme { display: grid; gap: var(--espace-1); margin: 0; font-size: 15px; }
.c1-ensemble__somme b { font-family: var(--font-titre); font-size: 28px; line-height: 32px; font-weight: 700; }
.c1-ensemble__bouton { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; white-space: normal; }
.c1-ensemble__message { margin: 0; font-size: 14px; line-height: 20px; }
.c1-ensemble__message:empty { display: none; }
@media (max-width: 1199.98px) {
  .c1-ensemble__corps { grid-template-columns: minmax(0, 1fr); }
  .c1-ensemble__total { justify-items: start; }
  .c1-ensemble__bouton { width: auto; }
}
@media (max-width: 767.98px) {
  .c1-ensemble { padding: var(--espace-4); }
  .c1-ensemble__articles { flex-direction: column; align-items: stretch; gap: var(--espace-2); }
  .c1-ensemble__article, .c1-ensemble__article:first-child { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: var(--espace-1); }
  .c1-ensemble__article + .c1-ensemble__article::before { grid-row: auto; margin: 0; justify-self: center; font-size: 22px; }
  .c1-ensemble__article + .c1-ensemble__article > label, .c1-ensemble__article + .c1-ensemble__article > .c1-ensemble__voir { grid-column: 1; }
  .c1-ensemble__article > label { grid-row: auto; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: var(--espace-3); }
  .c1-ensemble__voir { grid-row: auto; }
  .c1-ensemble__prix { margin-top: 0; }
  .c1-ensemble__case { padding-top: 0; }
  .c1-ensemble__voir { padding-left: 0; }
  .c1-ensemble__total { justify-items: stretch; }
  .c1-ensemble__bouton { width: 100%; }
}

/* §3 ter Pli « Pièces détachées » (Qarto E76) : une ligne par pièce, photo 56 px, nom et référence, prix en mono,
   « Ajouter » en contour ; sous 480 px, prix et bouton passent sous le nom. */
.c1-pieces__liste { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--trait-fin) solid var(--trait); }
.c1-pieces__ligne { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: var(--espace-2) var(--espace-4); align-items: center; padding: var(--espace-3) 0; border-bottom: var(--trait-fin) solid var(--trait); }
.c1-pieces__visuel { display: block; width: 56px; height: 56px; background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-s); overflow: hidden; }
.c1-pieces__visuel img { display: block; width: 100%; height: 100%; object-fit: contain; }
.c1-pieces__texte { display: grid; gap: 2px; min-width: 0; font-size: 15px; line-height: 20px; }
.c1-pieces__texte a { color: var(--graphite); font-weight: 600; text-decoration: none; }
.c1-pieces__texte a:hover { text-decoration: underline; text-underline-offset: 3px; }
.c1-pieces__texte small { font-family: var(--font-technique); font-size: 12px; color: var(--texte-doux); }
.c1-pieces__prix { font-family: var(--font-technique); font-size: 15px; font-weight: 600; white-space: nowrap; }
.c1-pieces__bouton { min-height: var(--cible-min); padding: 0 var(--espace-4); }
.c1-pieces__aucune { margin: var(--espace-3) 0 0; color: var(--texte-doux); }
/* Pli « Nos conseils » (E77) : articles de la rubrique Conseils liés au produit. */
.c1-conseils__liste { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--trait-fin) solid var(--trait); }
.c1-conseils__ligne { display: grid; gap: var(--espace-1); padding: var(--espace-4) 0; border-bottom: var(--trait-fin) solid var(--trait); }
.c1-conseils__titre { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-titre); font-size: 19px; line-height: 24px; font-weight: 700; color: var(--graphite); text-decoration: none; }
.c1-conseils__titre:hover { text-decoration: underline; text-underline-offset: 3px; }
.c1-conseils__chapo { margin: 0; max-width: 66ch; font-size: 15px; line-height: 22px; color: var(--texte-doux); }
.c1-conseils__ligne small { font-family: var(--font-technique); font-size: 12px; color: var(--texte-doux); }
.c1-conseils__tous { margin: var(--espace-4) 0 0; }
.c1-conseils__tous a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.c1-pieces__indispo, .c1-pieces__erreur { font-size: 14px; color: var(--texte-doux); }
.c1-pieces__aide { margin: var(--espace-4) 0 0; font-size: 15px; color: var(--texte-doux); }
@media (max-width: 479.98px) {
  .c1-pieces__ligne { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .c1-pieces__ligne > :is(.c1-pieces__bouton, .c1-pieces__indispo) { grid-column: 2 / -1; justify-self: start; }
}

/* §4 Menu d’ancres collant et plis (<details>) */
.c1-ancres { display: flex; align-items: center; gap: var(--espace-4); margin-bottom: var(--espace-6); }
.c1-ancres__liste { display: flex; flex: 1; min-width: 0; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
/* Rappel d’achat (état 05) : prix du bloc et seul bouton jaune visible, à droite du menu, dès 992 px. */
.c1-ancres__achat { display: none; flex: none; align-items: center; gap: var(--espace-4); padding-block: var(--espace-2); }
.c1-ancres__bouton { min-height: 48px; padding: 0 var(--espace-6); }
/* Le menu ne colle qu’à l’intérieur de son conteneur (les plis) : avec le rappel, il est fixé sous la barre collante
   de l’en-tête sur toute la largeur, jusqu’en bas de page ; une cale garde sa place dans le flux (marque.js). */
.c1-ancres--achat { position: fixed; top: var(--barre-collante); left: 0; right: 0; z-index: 1025; margin: 0; padding-inline: max(var(--marge), calc((100% - 1280px) / 2)); }
.c1-ancres--achat .c1-ancres__achat { display: flex; }
/* Sous 992 px, le menu ne colle jamais (le rappel d’achat est la barre fixe du bas) : posé juste au-dessus des plis
   fermés, il répétait leurs titres (double empilement signalé le 02/11). Les plis suffisent. */
@media (max-width: 991.98px) {
  .c1-ancres { display: none; }
}
.c1-ancres__liste::-webkit-scrollbar { display: none; }
.c1-ancres__liste > a { flex: none; display: flex; align-items: center; min-height: 48px; padding: 0 var(--espace-4); color: inherit; font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; }
.c1-ancres__liste > a:first-child { padding-left: 0; }
.c1-ancres__liste > a:hover { background: var(--jaune-pale); box-shadow: inset 0 -3px 0 var(--graphite); }
.c1-ancres__liste > a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: -3px; }

.c1-plis { border-top: var(--trait-moyen) solid var(--graphite); }
.c1-pli { border-bottom: var(--trait-fin) solid var(--trait); scroll-margin-top: calc(var(--barre-collante) + 48px); }
.c1-pli > summary { display: flex; align-items: center; gap: var(--espace-6); min-height: 48px; padding: 0 var(--espace-4); list-style: none; cursor: pointer; }
.c1-pli > summary::-webkit-details-marker { display: none; }
.c1-pli > summary h2 { flex: 1; margin: 0; color: inherit; }
.c1-pli > summary:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: -3px; }
.c1-pli__resume { display: inline-flex; align-items: center; gap: var(--espace-2); font-family: var(--font-technique); font-size: 13px; line-height: 18px; color: var(--texte-doux); }
.c1-pli[open] > summary { background: var(--jaune-pale); box-shadow: inset 0 -3px 0 var(--graphite); }
.c1-pli[open] .c1-ico-plus, .c1-pli:not([open]) .c1-ico-moins { display: none; }
.c1-ico-plus, .c1-ico-moins { display: inline-flex; }
.c1-pli__corps { padding: var(--espace-6) var(--espace-4) var(--espace-8); }
.c1-desc { max-width: 880px; font-size: 17px; line-height: 27px; }
.c1-tech { overflow-x: auto; }
.c1-tech .pg-tech { min-width: 0; }
/* Glossaire « Que signifie… ? » (R137, variante 3 du 01/11/2026, module lamglossaire) : renvoi numéroté en mono après
   le nom de la caractéristique, légende repliée sous le tableau (une ligne : titre, trait de cote, nombre de termes, +), titre suivi du trait de la cote (ligne + trait oblique à 64°). */
/* En ligne (pas inline-block) : aucune coupure entre le dernier mot et le numéro (« toit 4 » restait seul à 375 px). */
.c1-renvoi { position: relative; display: inline; margin-left: 2px; font-family: var(--font-technique); font-size: 11px; font-weight: 600; line-height: 16px; color: var(--texte-doux); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Zone d’appui de 44 px autour du numéro (cible minimale du design system). */
.c1-renvoi::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.c1-renvoi:hover { color: var(--texte); }
.c1-renvoi:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
.c1-legende { margin-top: var(--espace-6); max-width: 880px; }
.c1-legende__titre { display: flex; align-items: center; gap: var(--espace-3); min-height: 44px; margin: 0; cursor: pointer; list-style: none; font-family: var(--font-technique); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte); }
.c1-legende__titre::after { content: ""; flex: 1 1 0; height: 16px; background: linear-gradient(-64deg, transparent 44%, var(--graphite) 44%, var(--graphite) 56%, transparent 56%) right center / 10px 16px no-repeat, linear-gradient(var(--graphite), var(--graphite)) left center / 100% var(--trait-moyen) no-repeat; }
.c1-legende__titre::-webkit-details-marker { display: none; }
.c1-legende__titre:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
.c1-legende__compte { order: 2; flex: none; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texte-doux); }
.c1-legende__titre .c1-ico-plus, .c1-legende__titre .c1-ico-moins { order: 3; }
/* Dans le pli ouvert « Caractéristiques », .c1-pli[open] masque tous les + : la légende règle les siens. */
.c1-legende:not([open]) .c1-legende__titre .c1-ico-plus, .c1-legende[open] .c1-legende__titre .c1-ico-moins { display: inline-flex; }
.c1-legende[open] .c1-legende__titre .c1-ico-plus, .c1-legende:not([open]) .c1-legende__titre .c1-ico-moins { display: none; }
.c1-legende__liste { display: grid; gap: var(--espace-1); margin: var(--espace-3) 0 0; }
.c1-legende__ligne { position: relative; padding: var(--espace-2) var(--espace-2) var(--espace-2) 40px; border-radius: var(--rayon-s); }
/* Ligne atteinte par un renvoi : fond jaune-pale (état courant), jamais de contour de couleur. */
.c1-legende__ligne.on { background: var(--jaune-pale); }
.c1-legende__ligne:focus { outline: none; }
.c1-legende__ligne:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
.c1-legende__ligne dt { font-family: var(--font-texte); font-size: 15px; line-height: 21px; font-weight: 600; color: var(--texte); }
.c1-legende__num { position: absolute; left: var(--espace-2); top: var(--espace-2); font-family: var(--font-technique); font-size: 13px; line-height: 21px; font-weight: 600; color: var(--texte-doux); }
.c1-legende__ligne dd { margin: 0; font-family: var(--font-texte); font-size: 15px; line-height: 23px; color: var(--texte); }
.c1-legende__lien { margin: var(--espace-4) 0 0 40px; font-size: 15px; line-height: 21px; }
.c1-legende__lien a { color: var(--texte); font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--trait-moyen); text-underline-offset: 4px; }
.c1-docs { display: grid; gap: var(--espace-3); margin: 0; padding: 0; list-style: none; }
.c1-doc__texte { flex: 1; display: grid; gap: 2px; min-width: 0; }
.c1-docs .ab-bouton { flex: none; }


/* §5 Sécurité et fabricant (GPSR), rail à droite des plis */
.c1-rail { display: grid; gap: var(--espace-3); align-content: start; }
.c1-rail .pg-titre-sec { margin: 0; }
.c1-rail .pg-gpsr { grid-template-columns: 1fr; gap: var(--espace-3); padding: var(--espace-3) var(--espace-4); }
.c1-rail .pg-gpsr p { margin: 0; }
.c1-rail .pg-gpsr p + p { margin-top: var(--espace-1); }
.c1-rail .pg-gpsr h3 { margin: 0 0 var(--espace-2); font-family: var(--font-technique); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.c1-rail .pg-gpsr a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.c1-rail .pg-gpsr p { overflow-wrap: anywhere; }
.c1-consignes { display: grid; gap: var(--espace-1); margin: 0; padding-left: var(--espace-4); }
.c1-rail .pg-message { margin: 0; }


/* §6 Barre d’achat fixe (M2, décision 14) : sous 992 px seulement, retirée tant que le bouton du
   bloc est à l’écran là où le navigateur sait lier une animation au défilement ; ailleurs, toujours
   visible. */
.add .c1-barre-achat { display: none; }
.c1-barre-achat__nom { flex: 1; min-width: 0; font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c1-barre-achat__prix { display: grid; flex: none; }
.c1-barre-achat__prix small { font-family: var(--font-technique); font-size: 11px; line-height: 14px; color: var(--texte-doux); white-space: nowrap; }
.c1-barre-achat .ab-bouton { flex: none; min-height: 48px; padding: 0 var(--espace-4); }

@keyframes c1-barre-retiree {
  from, to { transform: translateY(110%); visibility: hidden; }
}


/* §7 Paliers */
/* Galerie collante (demande de Quentin du 03/11/2026) : le bloc d’achat est plus haut qu’elle, elle reste à l’écran
   pendant qu’on choisit les options. Sous la barre collante de l’en-tête et, une fois fixé, sous le menu d’ancres
   (--c1-ancres-fixe, posée par marque.js). Seulement si elle tient entière à l’écran (612 + 155 px). */
@media (min-width: 992px) and (min-height: 800px) {
  @layer ps-pages {
    .page-product .product__left { position: sticky; top: calc(var(--barre-collante) + var(--c1-ancres-fixe, 0px) + var(--espace-6)); }
  }
}
@media (min-width: 992px) and (min-height: 800px) and (prefers-reduced-motion: no-preference) {
  @layer ps-pages {
    .page-product .product__left { transition: top 0.2s ease-out; }
  }
}

@media (max-width: 1199.98px) {
  @layer ps-pages {
    .page-product .product__container { grid-template-columns: minmax(0, 1fr) 440px; gap: var(--espace-8); }
  }
}

@media (max-width: 991.98px) {
  @layer ps-pages {
    .page-product .product__container { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); }
    .page-product .product__bottom { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); }
    .page-product .product__bottom-left { margin-block-end: 0; }
    #product { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  }

  .add .c1-barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; display: flex; padding: var(--espace-2) var(--espace-4) calc(var(--espace-2) + env(safe-area-inset-bottom, 0px)); min-height: 64px; }

  @supports (animation-timeline: view()) and (timeline-scope: --c1-achat) {
    .page-product .add { timeline-scope: --c1-achat; }
    .page-product .product__add-to-cart-button { view-timeline-name: --c1-achat; }
    .add .c1-barre-achat { animation-name: c1-barre-retiree; animation-timing-function: linear; animation-fill-mode: none; animation-timeline: --c1-achat; animation-range: cover 0% cover 100%; }
  }
}

@media (max-width: 767.98px) {
  @layer ps-pages {
    /* M2 : galerie 4/3 en contain, vignettes de 64 px qui défilent sous l’image */
    .page-product .product__images { --c1-vignette: 64px; grid-template-columns: minmax(0, 1fr); gap: var(--espace-2); }
    .page-product .product__carousel, .page-product .product__no-image { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; }
    .page-product .product__thumbnails { grid-column: 1; grid-row: 2; }
    .page-product .product__thumbnails-list { flex-direction: row; gap: var(--espace-2); overflow-x: auto; scrollbar-width: none; }
    .page-product .product__thumbnails-list::-webkit-scrollbar { display: none; }
    .page-product .product__thumbnails-item { flex: none; }
    .page-product .product__carousel .carousel-control-prev, .page-product .product__carousel .carousel-control-next { top: calc(50% - 22px); width: 44px; height: 44px; }
    .page-product .product__carousel .carousel-control-prev { left: var(--espace-3); }
    .page-product .product__carousel .carousel-control-next { right: var(--espace-3); }
    .page-product .product__zoom { top: var(--espace-3); right: var(--espace-3); width: 44px; height: 44px; }

    /* M2 : bloc d’achat 16 / 16 / 24, nom 28/32, prix 28/32 */
    .page-product .product__container > .product__right { gap: var(--espace-2); padding: var(--espace-4) var(--espace-4) var(--espace-6); }
    .page-product .product__actions, .page-product #add-to-cart-or-refresh, .page-product .product__add-to-cart-container { gap: var(--espace-4); }
  }

  .c1-nom { font-size: 28px; line-height: 32px; letter-spacing: -0.01em; font-variation-settings: "opsz" 28; }
  .c1-prix.pg-achat__prix { padding: var(--espace-2) var(--espace-4); }
  .c1-prix .pg-prix { font-size: 28px; line-height: 32px; }

  /* M2 : plis de 60 px (pas de menu d’ancres sous 992 px) */
  .c1-pli > summary { min-height: 60px; gap: var(--espace-3); }
  .c1-pli > summary h2 { font-size: 19px; line-height: 24px; }
  .c1-pli__resume { display: none; }
  .c1-pli__corps { padding: var(--espace-6) var(--espace-3) var(--espace-8); }
  .c1-tech .pg-tech th { width: 40%; padding: 10px var(--espace-3); font-size: 14px; }
  .c1-tech .pg-tech td { padding: 10px var(--espace-3); font-size: 13px; line-height: 19px; }
  .c1-docs .pg-doc { flex-wrap: wrap; padding: var(--espace-3) var(--espace-4); }
  .c1-rail .titre-2 { font-size: 28px; line-height: 34px; }
}

@media (max-width: 479.98px) {
  /* M2 : sans le nom ; prix 18 px, « Ajouter au panier » */
  .c1-barre-achat__nom { display: none; }
  /* min-width 0 : à 320 px, le bouton dépassait de 11 px de l'écran. */
  .c1-barre-achat .ab-bouton { flex: 1; min-width: 0; white-space: normal; }
  /* Engagements : liens sous le texte, alignés sur lui */
  .c1-engagements li { grid-template-columns: 20px minmax(0, 1fr); }
  .c1-engagements li > a, .c1-engagements__liens { grid-column: 2; justify-content: flex-start; margin-top: -8px; }
}