/* L’Abritant — fiche produit (gabarit Qarto « Produit 1 (n° 7) »).
   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 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; }
  .page-product .product__bottom { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--espace-8); align-items: start; 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; }
}

/* Bandeau conseiller sous l’image (aligné sur l’image, pas sur les vignettes) */
.c1-conseil { margin: 0 0 0 calc(84px + var(--espace-4)); min-height: 48px; }
.c1-conseil a { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-family: var(--font-technique); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.c1-conseil a:focus-visible { outline: var(--trait-hauban) solid var(--jaune-hauban); outline-offset: 2px; }


/* §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; }

.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; }

/* Réassurance courte (module Customer Reassurance) en pied de bloc */
.c1-reassurance { padding-top: var(--espace-3); border-top: var(--trait-fin) solid var(--trait); font-size: 14px; line-height: 20px; }
.c1-reassurance .blockreassurance { display: grid; gap: var(--espace-2); }
.c1-reassurance .reassurance { display: flex; align-items: flex-start; gap: var(--espace-2); }
.c1-reassurance .reassurance__image img, .c1-reassurance .reassurance__image svg { width: 20px; height: 20px; }
.c1-reassurance .reassurance__title { font-weight: 600; }
.c1-reassurance .reassurance__desc { color: var(--texte-doux); }


/* §4 Menu d’ancres collant et plis (<details>) */
.c1-ancres { margin-bottom: var(--espace-6); }
.c1-ancres__liste { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: 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; }
.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; }


/* §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 */
@media (max-width: 1199.98px) {
  @layer ps-pages {
    .page-product .product__container { grid-template-columns: minmax(0, 1fr) 440px; gap: var(--espace-8); }
    .page-product .product__bottom { grid-template-columns: minmax(0, 1fr) 320px; }
  }
}

@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-conseil { margin-left: 0; }
  .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 : ancres de 46 px qui défilent seules, plis de 60 px */
  .c1-ancres__liste > a { min-height: 46px; padding: 0 var(--espace-3); font-size: 14px; line-height: 18px; }
  .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; }
  .c1-barre-achat .ab-bouton { flex: 1; }
}