/* ==========================================================================
   InZeBox — Fiche produit (commune aux boutiques)
   Chargé par templates/_partials/head.tpl sur toutes les pages, AVANT le CSS
   boutique (proconfort.css / toutpourtoi.css) pour que celui-ci puisse
   redéfinir les variables ci-dessous.

   Portée :
   - « .page-product .product__container » = fiche produit uniquement.
     La quickview porte aussi .page-product mais pas .product__container :
     elle garde le rendu Hummingbird.
   - Les variantes en boutons et le style des prix sont aussi appliqués dans la quickview.

   Sommaire
   1. Variables (à surcharger par boutique)
   2. Référence / marque sous le titre (valeurs alignées, logo)
   3. Variantes en boutons (type d'attribut « Boutons radio »)
   4. Images : zone carrée + liseré, vignettes carrées, défilement horizontal, cases vides
   5. Onglets
   6. Tableaux : Fiche technique, Détails du produit, tableaux de la description
   7. Colonne droite : sections et séparateurs, récapitulatif, état du stock
   8. Flèches de la bande de vignettes
   9. Bas de fiche pleine largeur, description justifiée
   10. Commentaires : en-tête en forme d'onglet, 2 colonnes en desktop
   11. Titre du produit / marque
   12. Étoiles des avis sous la disponibilité, réassurance
   13. Guide des tailles : lien et popup
   14. Boutons aux couleurs de la boutique (quantité, panier, avis)
   15. Produit indisponible : alerte « Prévenez-moi » + « Ajouter au panier » désactivé (0.33.0)
   ========================================================================== */

/* 1. Variables ------------------------------------------------------------ */
:root {
  /* Onglets */
  --ibx-tab-line-color: #d9d9d9;          /* ligne grise continue */
  --ibx-tab-line-width: 1px;
  --ibx-tab-active-color: var(--primary, #0b69f6); /* liseré de l'onglet actif */
  --ibx-tab-active-width: 3px;
  --ibx-tab-text-color: #4b5563;
  --ibx-tab-text-active-color: #1f2937;
  --ibx-tab-font-size: 1rem;
  --ibx-tab-font-size-mobile: .875rem;
  --ibx-tab-font-weight: 600;
  --ibx-tab-font-weight-active: 700;
  --ibx-tab-text-transform: uppercase;
  --ibx-tab-gap: 2rem;
  --ibx-tab-gap-mobile: 1.25rem;

  /* Images */
  --ibx-img-border-color: #d9d9d9;        /* liseré gris image + vignettes */
  --ibx-img-border-width: 1px;
  --ibx-img-radius: var(--bs-border-radius, .375rem);
  --ibx-img-bg: #fff;
  --ibx-thumb-gap: .75rem;
  --ibx-thumb-active-color: var(--ibx-tab-active-color);
  --ibx-thumb-placeholder-bg: #f5f5f5;    /* case vide : gris très clair */
  --ibx-thumb-placeholder-icon: #d4d4d4;  /* icône « image » de la case vide */
  --ibx-thumb-scroll-step: 1;             /* vignettes défilées par clic sur < > (1 ou 3) */
  --ibx-thumb-nav-width: 2.25rem;         /* largeur de la zone en surbrillance */
  --ibx-thumb-nav-bg: rgba(255, 255, 255, .85);        /* souris : zone au survol */
  --ibx-thumb-nav-bg-touch: rgba(255, 255, 255, .45);  /* tactile : zone permanente, plus transparente */
  --ibx-thumb-nav-color: #1f2937;

  /* Colonne droite */
  --ibx-separator-color: color-mix(in srgb, var(--primary, #0b69f6) 25%, #fff); /* liseré atténué */
  --ibx-separator-width: 1px;
  --ibx-section-spacing: 1.25rem;
  --ibx-summary-lines: 4;                 /* récapitulatif : lignes visibles avant « Afficher plus » */
  --ibx-summary-line-height: 1.5;
  --ibx-summary-toggle-size: .8125rem;    /* « Afficher plus / moins » : 13 px */

  /* Boutons aux couleurs de la boutique (0.17.0) */
  --ibx-btn-bg: var(--primary, #0b69f6);                        /* fond « Ajouter au panier » */
  --ibx-btn-bg-hover: color-mix(in srgb, var(--ibx-btn-bg) 85%, #000);
  --ibx-btn-text: #fff;                                         /* texte sur fond boutique */
  --ibx-btn-outline-color: var(--ibx-btn-bg);                   /* boutons « avis » (contour) */
  --ibx-btn-tint: color-mix(in srgb, var(--ibx-btn-bg) 10%, #fff); /* survol des boutons - / + */

  /* Réassurance (0.16.1) */
  --ibx-reassurance-icon-size: 2rem;              /* 32 px (module : 64 px) */
  --ibx-reassurance-gap: .5rem;                   /* écarts icône/texte et entre blocs : 8 px (16 px avant) */
  --ibx-reassurance-title-color: var(--primary, #0b69f6);
  --ibx-reassurance-title-size: 1rem;
  --ibx-reassurance-desc-size: .8125rem;          /* 13 px (14 px avant) */
  --ibx-reassurance-desc-color: #6b7280;
  --ibx-size-guide-link-size: .875rem;    /* lien « Guide des tailles » */
  --ibx-link-color: var(--primary, #0b69f6);
  --ibx-title-brand-gap: 5px;             /* espace entre le titre du produit et la marque */
  --ibx-description-align: justify;       /* alignement du texte de la description (≥ 768 px) */
  --ibx-comments-columns-gap: 3rem;       /* espace entre les 2 colonnes d'avis (desktop) */
  --ibx-comments-separator-color: var(--ibx-tab-line-color); /* trait vertical entre les colonnes */
  --ibx-table-max-width: 50rem;           /* largeur max. des tableaux Fiche technique / Détails */
  --ibx-stock-in-color: #198754;          /* vert « En stock » (contraste 4,5:1 sur blanc) */

  /* Référence / marque */
  --ibx-meta-label-color: #9ca3af;
  --ibx-meta-value-color: #1f2937;
  --ibx-brand-logo-height: 40px;
  --ibx-brand-logo-max-width: 10rem;      /* logo au format « brand_logo » (large) */

  /* Tableaux (fiche technique, détails, description) */
  --ibx-table-border-color: #e5e7eb;
  --ibx-table-label-bg: color-mix(in srgb, var(--primary, #0b69f6) 10%, #fff); /* colonne libellés */
  --ibx-table-stripe-bg: color-mix(in srgb, var(--primary, #0b69f6) 4%, #fff); /* lignes paires */
  --ibx-table-text-color: #1f2937;

  /* Variantes en boutons */
  --ibx-variant-text-color: #1f2937;
  --ibx-variant-bg: #fff;
  --ibx-variant-border-color: #d9d9d9;
  --ibx-variant-hover-border-color: var(--primary, #0b69f6);
  --ibx-variant-active-border-color: var(--primary, #0b69f6);
  --ibx-variant-active-bg: color-mix(in srgb, var(--primary, #0b69f6) 10%, #fff);
  --ibx-variant-active-text-color: #1f2937;
  --ibx-variant-radius: var(--bs-border-radius, .375rem);
  --ibx-variant-min-width: 4.5rem;
  --ibx-variant-height: 2.75rem; /* ≥ 44 px : cible tactile confortable */
}

/* 2. Référence / marque sous le titre ------------------------------------- */
/* Grille à 2 colonnes : tous les libellés dans la 1re, toutes les valeurs alignées dans la 2e */
.ibx-product-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: .75rem;
  row-gap: .375rem;
  align-items: center;
  font-size: .9375rem;
  line-height: 1.5;
}

.ibx-product-meta__row {
  display: contents; /* les dt/dd deviennent directement cellules de la grille */
}

.ibx-product-meta__row[hidden] {
  display: none;
}

.ibx-product-meta__label {
  font-weight: 400; /* Bootstrap met les <dt> en gras */
  color: var(--ibx-meta-label-color);
}

.ibx-product-meta__label::after {
  content: "\00a0:"; /* typographie française : espace insécable avant « : » */
}

.ibx-product-meta__value {
  margin: 0;
  color: var(--ibx-meta-value-color);
}

/* Marque : logo + nom = un seul lien (même onglet) */
.ibx-brand {
  display: inline-flex;
  gap: .625rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

a.ibx-brand:hover .ibx-brand__name,
a.ibx-brand:focus-visible .ibx-brand__name {
  text-decoration: underline;
}

.ibx-brand__logo {
  width: auto;
  max-width: 8rem;
  height: var(--ibx-brand-logo-height);
  object-fit: contain;
}

/* Format « brand_logo » (large) : le logo remplit son cadre, on lui laisse la largeur */
.ibx-brand__logo--wide {
  max-width: var(--ibx-brand-logo-max-width);
}

/* 3. Variantes en boutons ------------------------------------------------- */
/* Balisage : templates/catalog/_partials/product-variants.tpl (type « Boutons radio »).
   L'input radio est masqué visuellement mais reste focusable et cliquable via son label. */
.ibx-variant-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ibx-variant-button {
  position: relative;
  margin: 0;
}

.ibx-variant-button__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}

.ibx-variant-button__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ibx-variant-min-width);
  min-height: var(--ibx-variant-height);
  padding: .375rem 1rem;
  margin: 0;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ibx-variant-text-color);
  cursor: pointer;
  user-select: none;
  background-color: var(--ibx-variant-bg);
  border: 1px solid var(--ibx-variant-border-color);
  border-radius: var(--ibx-variant-radius);
  transition: border-color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.ibx-variant-button__label:hover {
  border-color: var(--ibx-variant-hover-border-color);
}

/* Sélection : bordure 2 px couleur boutique + fond teinté + gras
   (le gras et le fond compensent un contraste de bordure faible, ex. orange) */
.ibx-variant-button__input:checked + .ibx-variant-button__label {
  font-weight: 700;
  color: var(--ibx-variant-active-text-color);
  background-color: var(--ibx-variant-active-bg);
  border-color: var(--ibx-variant-active-border-color);
  box-shadow: inset 0 0 0 1px var(--ibx-variant-active-border-color);
}

.ibx-variant-button__input:focus-visible + .ibx-variant-button__label {
  outline: 2px solid var(--ibx-variant-active-border-color);
  outline-offset: 2px;
}

.ibx-variant-button__input:disabled + .ibx-variant-button__label {
  cursor: not-allowed;
  opacity: .5;
}

/* 4. Images ---------------------------------------------------------------- */
/* 4a. Image principale : zone carrée + liseré */
.page-product .product__container .product__carousel {
  aspect-ratio: 1 / 1;
  background-color: var(--ibx-img-bg);
  border: var(--ibx-img-border-width) solid var(--ibx-img-border-color);
  border-radius: var(--ibx-img-radius);
}

.page-product .product__container .product__carousel .carousel-inner,
.page-product .product__container .product__carousel .carousel-item {
  height: 100%;
}

.page-product .product__container .product__carousel .carousel-item picture {
  display: block;
  height: 100%;
}

.page-product .product__container .product__carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* jamais de rognage d'un emballage */
}

/* 4b. Vignettes : 4 visibles sur la largeur de l'image, défilement horizontal au-delà */
.page-product .product__container .product__thumbnails-list {
  display: grid;
  grid-template-columns: none; /* annule repeat(4|5|6) d'Hummingbird */
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--ibx-thumb-gap)) / 4);
  gap: var(--ibx-thumb-gap);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;            /* barre masquée : remplacée par les flèches (section 8) */
}

.page-product .product__container .product__thumbnails-list::-webkit-scrollbar {
  display: none;
}

.page-product .product__container .product__thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  background-color: var(--ibx-img-bg);
  border: var(--ibx-img-border-width) solid var(--ibx-img-border-color);
  border-radius: var(--ibx-img-radius);
  scroll-snap-align: start;
}

.page-product .product__container .product__thumbnail picture {
  display: block;
  height: 100%;
}

.page-product .product__container .product__thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* Vignette active : on remplace le contour bleu Hummingbird par la couleur boutique */
.page-product .product__container .product__thumbnail.active .product__thumbnail-image {
  outline-color: transparent;
}

.page-product .product__container .product__thumbnail.active {
  outline: 2px solid var(--ibx-thumb-active-color);
  outline-offset: -2px;
}

/* Focus des vignettes (0.33.2) : Hummingbird ajoute « focus-ring » = halo bleu
   de 0,25rem EXTÉRIEUR à la vignette, rogné à gauche et à droite par la liste qui
   défile (overflow). Halo supprimé. Pour la navigation au CLAVIER uniquement
   (:focus-visible, jamais au clic souris), un pointillé est dessiné À L'INTÉRIEUR
   de la vignette : rien ne dépasse, et il se distingue du cadre plein de la
   vignette active. */
.page-product .product__container .product__thumbnail.focus-ring:focus {
  box-shadow: none;              /* seul le halo est retiré : le cadre de la vignette active reste */
}

.page-product .product__container .product__thumbnail:focus-visible {
  outline: 2px dashed var(--ibx-thumb-active-color);
  outline-offset: -6px;
}

/* 4c. Cases vides : seulement sur la fiche produit (pas dans la quickview) */
.product__thumbnail--placeholder {
  display: none;
}

.page-product .product__container .product__thumbnail--placeholder {
  position: relative;
  display: block;
  cursor: default;
  pointer-events: none;
  background-color: var(--ibx-thumb-placeholder-bg);
}

/* Icône « image » discrète, dessinée en SVG via un masque : sa couleur vient
   d'une variable (--ibx-thumb-placeholder-icon), aucun fichier image. */
.page-product .product__container .product__thumbnail--placeholder::before {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36%;
  height: 36%;
  content: "";
  background-color: var(--ibx-thumb-placeholder-icon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.75'/%3E%3Cpath d='M21 16l-5-5-8 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.75'/%3E%3Cpath d='M21 16l-5-5-8 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 5. Onglets --------------------------------------------------------------- */
.ibx-tabs__scroller {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;            /* Firefox */
  -webkit-overflow-scrolling: touch;
}

.ibx-tabs__scroller::-webkit-scrollbar {
  display: none;                    /* Chrome / Safari */
}

/* Indice de défilement (mobile) : fondu sur le bord qui cache des onglets */
.ibx-tabs__scroller.has-overflow-end {
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
  mask-image: linear-gradient(to right, #000 85%, transparent);
}

.ibx-tabs__scroller.has-overflow-start {
  -webkit-mask-image: linear-gradient(to left, #000 85%, transparent);
  mask-image: linear-gradient(to left, #000 85%, transparent);
}

.ibx-tabs__scroller.has-overflow-start.has-overflow-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.ibx-tabs__nav {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ibx-tab-gap-mobile);
  width: max-content;
  min-width: 100%;
  /* ligne grise continue sous tous les onglets */
  box-shadow: inset 0 calc(-1 * var(--ibx-tab-line-width)) 0 var(--ibx-tab-line-color);
}

.ibx-tabs__tab {
  flex: 0 0 auto;
  padding: .5rem 0 .625rem;
  font-size: var(--ibx-tab-font-size-mobile);
  font-weight: var(--ibx-tab-font-weight);
  line-height: 1.2;
  color: var(--ibx-tab-text-color);
  text-transform: var(--ibx-tab-text-transform);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  /* le liseré coloré recouvre la ligne grise */
  border-bottom: var(--ibx-tab-active-width) solid transparent;
  transition: color .15s ease-in-out, border-color .15s ease-in-out;
}

.ibx-tabs__tab:hover {
  color: var(--ibx-tab-text-active-color);
}

.ibx-tabs__tab.is-active {
  font-weight: var(--ibx-tab-font-weight-active); /* l'état actif ne repose pas que sur la couleur */
  color: var(--ibx-tab-text-active-color);
  border-bottom-color: var(--ibx-tab-active-color);
}

.ibx-tabs__tab:focus-visible {
  outline: 2px solid var(--ibx-tab-active-color);
  outline-offset: 2px;
}

.ibx-tabs__tab[hidden],
.ibx-tabs__panel[hidden],
.ibx-tabs__scroller[hidden] {
  display: none;
}

.ibx-tabs__panel {
  padding-block: 1.25rem;
}

.ibx-tabs__panel:focus-visible {
  outline: 2px solid var(--ibx-tab-active-color);
  outline-offset: 4px;
}

@media (min-width: 768px) {
  .ibx-tabs__nav {
    gap: var(--ibx-tab-gap);
  }

  .ibx-tabs__tab {
    font-size: var(--ibx-tab-font-size);
  }
}

/* 6. Tableaux -------------------------------------------------------------- */
/* 6a. Fiche technique + Détails du produit (balisage InZeBox : .ibx-table) */
.ibx-table {
  width: 100%;
  margin: 0;
  color: var(--ibx-table-text-color);
  border-collapse: collapse;
  border: 1px solid var(--ibx-table-border-color);
}

.ibx-table th,
.ibx-table td {
  padding: .625rem .875rem;
  vertical-align: top;
  text-align: left;
  border: 1px solid var(--ibx-table-border-color);
}

.ibx-table__label {
  width: 35%;
  min-width: 8rem;
  font-weight: 600;
  background-color: var(--ibx-table-label-bg);
}

.ibx-table tbody tr:nth-child(even) .ibx-table__value {
  background-color: var(--ibx-table-stripe-bg);
}

/* Défensif : une ligne de tableau reste une ligne de tableau quelle que soit
   une règle héritée (cf. 0.10.0 : .details__item en display:grid) */
.ibx-table tr {
  display: table-row;
}

/* 6b. Tableaux saisis dans la description (TinyMCE) : même charte.
   Les largeurs posées en ligne par TinyMCE restent prioritaires. */
/* Même charte dans la popup du guide des tailles (clone de la description) */
:is(.product__description, .ibx-size-guide) table {
  width: 100%;
  margin-block: 1rem;
  color: var(--ibx-table-text-color);
  border-collapse: collapse;
  border: 1px solid var(--ibx-table-border-color);
}

:is(.product__description, .ibx-size-guide) table th,
:is(.product__description, .ibx-size-guide) table td {
  padding: .625rem .875rem;
  border: 1px solid var(--ibx-table-border-color);
}

:is(.product__description, .ibx-size-guide) table tr:first-child > *,
:is(.product__description, .ibx-size-guide) table th {
  font-weight: 600;
  background-color: var(--ibx-table-label-bg);
}

:is(.product__description, .ibx-size-guide) table tr:nth-child(even) > td {
  background-color: var(--ibx-table-stripe-bg);
}

/* Tableau large sur mobile : défilement dans son conteneur, pas de la page */
.product__description {
  overflow-x: auto;
}

/* 7. Colonne droite --------------------------------------------------------- */
/* Chaque section porte son séparateur (bordure haute). Une section absente
   n'est pas rendue : jamais deux liserés consécutifs. */
.page-product .product__container .ibx-section {
  padding-block: var(--ibx-section-spacing);
  border-top: var(--ibx-separator-width) solid var(--ibx-separator-color);
}

/* Référence / marque : place pour le premier séparateur */
.page-product .product__container .ibx-product-meta {
  margin-block-end: var(--ibx-section-spacing);
}

/* Marges natives d'Hummingbird neutralisées en fin de section */
.page-product .product__container .ibx-section > :last-child,
.page-product .product__container .ibx-section .product__variants > :last-child,
.page-product .product__container .ibx-section .product__add-to-cart-container > :last-child {
  margin-block-end: 0;
}

.page-product .product__container .ibx-section .product__variants,
.page-product .product__container .ibx-section .product__description-short,
.page-product .product__container .ibx-section .product__add-to-cart-container {
  margin-block-end: 0;
}

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

/* 7a. Récapitulatif limité à N lignes, « Afficher plus / Afficher moins » sur place */
.ibx-summary__content {
  line-height: var(--ibx-summary-line-height);
}

.ibx-summary__content > :last-child {
  margin-block-end: 0;
}

.ibx-summary.is-clamped .ibx-summary__content {
  max-height: calc(var(--ibx-summary-lines) * var(--ibx-summary-line-height) * 1em);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.ibx-summary__toggle {
  display: inline-flex;
  gap: .125rem;
  align-items: center;
  min-height: 44px;           /* zone tactile confortable, texte réduit (0.16.0) */
  padding: 0;
  margin-block-start: .125rem;
  font-size: var(--ibx-summary-toggle-size);
  font-weight: 500;
  color: var(--ibx-link-color);
  cursor: pointer;
  background: none;
  border: 0;
}

.ibx-summary__toggle:hover span,
.ibx-summary__toggle:focus-visible span {
  text-decoration: underline;
}

.ibx-summary__toggle[hidden] {
  display: none;
}

.ibx-summary__icon {
  font-size: 1rem;
  transition: transform .2s ease-in-out;
}

.ibx-summary__toggle[aria-expanded="true"] .ibx-summary__icon {
  transform: rotate(180deg);
}

/* 7b. Prix et panier dans la même section */
.page-product .product__container .ibx-section--buy .product__prices {
  margin-block-end: 1rem;
}

/* 7c. État du stock (sous le bouton panier) */
.page-product .product__container .ibx-section--buy .product__availability {
  margin-block: 1rem 0;
}

.ibx-stock--in {
  color: var(--ibx-stock-in-color);
}

.ibx-stock--in .ibx-stock__label {
  font-weight: 600;
}

.ibx-stock__sub {
  color: #6b7280; /* « Derniers articles en stock » : discret */
}

/* 8. Flèches de la bande de vignettes -------------------------------------- */
/* Boutons posés sur les bords de la bande, sur une zone en surbrillance.
   Souris : visibles au survol ou au focus clavier. Doigt : toujours visibles.
   Affichés seulement s'il y a du défilement, masqués en bout de bande (inzebox-product.js). */
.page-product .product__container .ibx-thumbs {
  position: relative;
}

.ibx-thumbs__nav {
  display: none;
}

.page-product .product__container .ibx-thumbs__nav {
  position: absolute;
  inset-block: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ibx-thumb-nav-width);
  padding: 0;
  color: var(--ibx-thumb-nav-color);
  cursor: pointer;
  background: var(--ibx-thumb-nav-bg);
  border: 0;
  opacity: 0;
  transition: opacity .2s ease-in-out;
}

.page-product .product__container .ibx-thumbs__nav--prev {
  inset-inline-start: 0;
  border-start-start-radius: var(--ibx-img-radius);
  border-end-start-radius: var(--ibx-img-radius);
}

.page-product .product__container .ibx-thumbs__nav--next {
  inset-inline-end: 0;
  border-start-end-radius: var(--ibx-img-radius);
  border-end-end-radius: var(--ibx-img-radius);
}

.page-product .product__container .ibx-thumbs__nav[hidden] {
  display: none;
}

.page-product .product__container .ibx-thumbs:hover .ibx-thumbs__nav,
.page-product .product__container .ibx-thumbs:focus-within .ibx-thumbs__nav {
  opacity: 1;
}

@media (hover: hover) {
  .page-product .product__container .ibx-thumbs__nav:hover {
    background: rgba(255, 255, 255, .95);
  }
}

.page-product .product__container .ibx-thumbs__nav:focus-visible {
  outline: 2px solid var(--ibx-thumb-active-color);
  outline-offset: -2px;
  opacity: 1;
}

/* Écrans tactiles : pas de survol → flèches toujours visibles, plus discrètes */
@media (hover: none) {
  .page-product .product__container .ibx-thumbs__nav {
    width: calc(var(--ibx-thumb-nav-width) * .85);
    background: var(--ibx-thumb-nav-bg-touch);
    opacity: 1;
  }

  /* la flèche reste lisible sur une photo claire malgré la transparence du fond */
  .page-product .product__container .ibx-thumbs__nav .material-icons {
    text-shadow: 0 0 3px #fff, 0 0 6px #fff;
  }
}

/* 9. Bas de fiche pleine largeur ------------------------------------------- */
/* Hummingbird (lg+) : grille 55 % onglets / 45 % réassurance. La réassurance est
   désactivée : les onglets prennent toute la largeur. La colonne droite, si un
   module y affiche un jour quelque chose, passe dessous. */
.page-product .product__bottom {
  display: block;
}

.page-product .product__bottom-right:not(:has(*)) {
  display: none; /* vide (hook displayReassurance sans contenu) : pas de marge fantôme */
}

/* Description : toute la largeur disponible, texte justifié (0.15.0).
   Justification à partir de 768 px : sur un écran de téléphone, les lignes sont trop
   courtes et la justification crée de grands blancs entre les mots.
   Césure automatique (langue de la page) pour limiter ces blancs sur grand écran.
   Les cellules de tableau ne sont pas justifiées. */
@media (min-width: 768px) {
  .ibx-tabs__panel .product__description :is(p, li) {
    text-align: var(--ibx-description-align);
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

.ibx-tabs__panel .ibx-table {
  max-width: var(--ibx-table-max-width);
}

/* 10. Commentaires : en-tête « Commentaires (n) » en forme d'onglet ----------- */
/* Surcharge : modules/productcomments/views/templates/hook/product-comments-list.tpl */
#product-comments-list-header.ibx-comments-header {
  display: block;
  padding: 0;
  margin-block-end: 0;
}

.ibx-comments-header .ibx-tabs__nav {
  align-items: flex-end;
}

.ibx-tabs__tab--static {
  margin: 0;
  cursor: default;
}

.ibx-tabs__tab--static:hover {
  color: var(--ibx-tab-text-active-color);
}

.ibx-comments-header__grade {
  display: flex;
  align-items: center;
  padding-block-end: .5rem;
  margin-inline-start: auto;
}

.ibx-comments-body {
  padding-block: 1.25rem;
}

/* Hummingbird fixe une hauteur de 1rem au bloc « aucun avis » : on la libère */
.ibx-comments-body #empty-product-comment {
  height: auto;
  padding-block: 0;
}

/* Avis sur 2 colonnes en desktop, séparées par un trait vertical (0.15.0).
   Les avis sont insérés par le JS du module dans #product-comments-list (ordre :
   1 | 2 / 3 | 4…). Le trait est un dégradé d'arrière-plan centré (pas de ::before :
   Hummingbird l'utilise pour l'indicateur de chargement) ; affiché seulement à
   partir de 2 avis. */
@media (min-width: 992px) {
  .page-product #product-comments-list.has-comments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ibx-comments-columns-gap);
    align-items: start;
  }

  .page-product #product-comments-list.has-comments:has(> .comment:nth-child(2)) {
    background: linear-gradient(var(--ibx-comments-separator-color), var(--ibx-comments-separator-color)) center / 1px 100% no-repeat;
  }
}

/* 11. Titre du produit / marque ---------------------------------------------- */
.page-product .product__container .product__name {
  margin-block-end: var(--ibx-title-brand-gap);
}

.page-product .product__container .ibx-product-meta {
  margin-block-start: 0;
}

/* 12. Étoiles des avis sous la disponibilité, réassurance ------------------- */
.page-product .product__container .ibx-buy__additional {
  margin-block: .75rem 0;
}

.page-product .product__container .ibx-buy__additional:empty {
  display: none;
}

/* Réassurance : liste verticale d'Hummingbird (.blockreassurance--product), compactée (0.16.1) */
.page-product .product__container .ibx-section--reassurance .blockreassurance {
  gap: var(--ibx-reassurance-gap);
  margin-block-end: 0;
}

.page-product .product__container .ibx-section--reassurance .reassurance {
  gap: var(--ibx-reassurance-gap);
  align-items: center;
}

/* Icône : le module l'affiche en <img> puis la remplace souvent par le <svg> en ligne */
.page-product .product__container .ibx-section--reassurance .reassurance__image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ibx-reassurance-icon-size);
  height: var(--ibx-reassurance-icon-size);
}

.page-product .product__container .ibx-section--reassurance .reassurance__image :is(img, svg) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.page-product .product__container .ibx-section--reassurance .reassurance__content {
  line-height: 1.3;
}

.page-product .product__container .ibx-section--reassurance .reassurance__content br {
  display: none; /* le titre et le texte sont déjà sur deux lignes (blocs) */
}

.page-product .product__container .ibx-section--reassurance .reassurance__title {
  display: block;
  font-size: var(--ibx-reassurance-title-size);
  font-weight: 700;
  color: var(--ibx-reassurance-title-color);
}

.page-product .product__container .ibx-section--reassurance .reassurance__desc {
  display: block;
  margin-block-start: .125rem;
  font-size: var(--ibx-reassurance-desc-size);
  line-height: 1.35;
  color: var(--ibx-reassurance-desc-color);
}

/* 13. Guide des tailles ------------------------------------------------------ */
/* Ligne « Taille : L » : libellé à gauche, lien aligné à droite */
.product-variant__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .25rem;
}

.ibx-size-guide-link {
  display: none; /* quickview : pas de popup, pas de lien */
}

.page-product .product__container .ibx-size-guide-link {
  display: inline-flex;
  gap: .25rem;
  align-items: center;
  min-height: 44px;           /* zone tactile 44 px… */
  padding: 0 .25rem;
  margin-block: -12px;        /* …sans agrandir la ligne « Taille : L » */
  margin-inline-start: auto;  /* aligné à droite */
  font-size: var(--ibx-size-guide-link-size);
  font-weight: 500;
  color: var(--ibx-link-color);
  cursor: pointer;
  background: none;
  border: 0;
}

.page-product .product__container .ibx-size-guide-link[hidden] {
  display: none;
}

.page-product .product__container .ibx-size-guide-link .material-icons {
  font-size: 1.125rem;
}

.page-product .product__container .ibx-size-guide-link:hover span,
.page-product .product__container .ibx-size-guide-link:focus-visible span {
  text-decoration: underline;
}

.page-product .product__container .ibx-size-guide-link:focus-visible {
  outline: 2px solid var(--ibx-link-color);
  outline-offset: 2px;
}

/* Popup : tableaux toujours dans la largeur (les largeurs posées en ligne par TinyMCE
   provoqueraient un défilement horizontal sur mobile) */
.ibx-size-guide table {
  width: 100% !important;
  max-width: 100%;
  table-layout: auto;
}

.ibx-size-guide :is(th, td, col) {
  width: auto !important;
  overflow-wrap: anywhere;
}

.ibx-size-guide img {
  max-width: 100%;
  height: auto;
}

.ibx-size-guide > .guide-tailles > :first-child {
  margin-block-start: 0;
}

.ibx-size-guide > .guide-tailles > :last-child {
  margin-block-end: 0;
}

/* Le titre de la popup (« Guide des tailles ») remplace le premier titre du bloc cloné,
   qui ferait doublon ; il reste visible dans l'onglet Description. */
.ibx-size-guide > .guide-tailles > :is(h1, h2, h3, h4, h5, h6):first-child {
  display: none;
}

/* 14. Boutons aux couleurs de la boutique (0.17.0) --------------------------- */
/* Variables de composant Bootstrap, limitées aux boutons cités : le --bs-primary global
   (en-tête, pied de page, tunnel de commande) n'est pas modifié.
   Contraste du texte : voir la section « Boutons » de proconfort.css / toutpourtoi.css. */

/* 14a. « Ajouter au panier » (fiche + quickview) et bouton d'envoi de la fenêtre d'avis */
.page-product .product__add-to-cart-button.btn-primary,
#post-product-comment-modal .btn-primary,
#product-comment-posted-modal .btn-primary {
  --bs-btn-color: var(--ibx-btn-text);
  --bs-btn-bg: var(--ibx-btn-bg);
  --bs-btn-border-color: var(--ibx-btn-bg);
  --bs-btn-hover-color: var(--ibx-btn-text);
  --bs-btn-hover-bg: var(--ibx-btn-bg-hover);
  --bs-btn-hover-border-color: var(--ibx-btn-bg-hover);
  --bs-btn-active-color: var(--ibx-btn-text);
  --bs-btn-active-bg: var(--ibx-btn-bg-hover);
  --bs-btn-active-border-color: var(--ibx-btn-bg-hover);
  --bs-btn-disabled-color: var(--ibx-btn-text);
  --bs-btn-disabled-bg: var(--ibx-btn-bg);
  --bs-btn-disabled-border-color: var(--ibx-btn-bg);
}

/* 14b. Boutons - et + de la quantité : icône couleur boutique, survol teinté */
.page-product .quantity-button__group .btn {
  --bs-btn-color: var(--ibx-btn-outline-color);
  --bs-btn-hover-color: var(--ibx-btn-outline-color);
  --bs-btn-hover-bg: var(--ibx-btn-tint);
  --bs-btn-active-color: var(--ibx-btn-outline-color);
  --bs-btn-active-bg: var(--ibx-btn-tint);
}

.page-product .quantity-button__group .btn .material-icons {
  color: inherit;
}

/* 14c. « Soyez le premier à donner votre avis » et « Donner votre avis » (contour) */
.page-product .post-product-comment.btn-outline-primary {
  --bs-btn-color: var(--ibx-btn-outline-color);
  --bs-btn-border-color: var(--ibx-btn-outline-color);
  --bs-btn-hover-color: var(--ibx-btn-text);
  --bs-btn-hover-bg: var(--ibx-btn-bg);
  --bs-btn-hover-border-color: var(--ibx-btn-bg);
  --bs-btn-active-color: var(--ibx-btn-text);
  --bs-btn-active-bg: var(--ibx-btn-bg-hover);
  --bs-btn-active-border-color: var(--ibx-btn-bg-hover);
}

/* Focus clavier : anneau Bootstrap bleu remplacé par la couleur boutique */
:is(.page-product .product__add-to-cart-button,
    .page-product .quantity-button__group .btn,
    .page-product .post-product-comment,
    #post-product-comment-modal .btn-primary):focus-visible {
  outline: 2px solid var(--ibx-btn-bg);
  outline-offset: 2px;
  box-shadow: none;
}

/* 15. Produit / déclinaison indisponible (0.33.0) ----------------------------
   15a. Bloc « Prévenez-moi lorsque le produit est disponible » (module
        ps_emailalerts, gabarit Hummingbird) : fond clair teinté couleur
        boutique, liseré à gauche, bouton aux couleurs de la boutique.
   15b. « Ajouter au panier » désactivé : fond très clair + bordure couleur
        boutique, texte gris, pour qu'il se lise comme indisponible.
   Couvre la fiche produit et la quickview (pas de préfixe .page-product). */
:root {
  --ibx-alert-bg: color-mix(in srgb, var(--primary, #0b69f6) 8%, #fff);
  --ibx-alert-border: color-mix(in srgb, var(--primary, #0b69f6) 30%, #fff);
  --ibx-alert-accent: var(--ibx-tab-active-color, var(--primary, #0b69f6));
  --ibx-alert-accent-width: 4px;
  --ibx-alert-title-color: var(--ibx-tab-text-active-color, #1f2937);
  --ibx-alert-text-color: #374151;                                         /* 9,2:1 sur le fond teinté */
  --ibx-btn-disabled-bg: color-mix(in srgb, var(--primary, #0b69f6) 6%, #fff);
  --ibx-btn-disabled-border: color-mix(in srgb, var(--primary, #0b69f6) 45%, #fff);
  --ibx-btn-disabled-text: #6b7280;                                        /* ≈ 4,6:1 : lisible mais éteint */
}

/* 15a. Bloc d'alerte ------------------------------------------------------- */
.ps-emailalerts--product .ps-emailalerts__content {
  gap: .625rem;
  padding: 1rem 1.125rem;
  color: var(--ibx-alert-text-color);
  background-color: var(--ibx-alert-bg);
  border: 1px solid var(--ibx-alert-border);
  border-left: var(--ibx-alert-accent-width) solid var(--ibx-alert-accent);
  border-radius: var(--bs-border-radius);
}

.ps-emailalerts--product .ps-emailalerts__content > .h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ibx-alert-title-color);
}

.ps-emailalerts--product .ps-emailalerts__content .form-control {
  background-color: #fff;
  border-color: var(--ibx-alert-border);
}

.ps-emailalerts--product .ps-emailalerts__content .form-control:focus {
  border-color: var(--ibx-alert-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary, #0b69f6) 25%, transparent);
}

/* Bouton « Prévenez-moi » : mêmes couleurs que « Ajouter au panier » */
.ps-emailalerts--product .ps-emailalerts__content .btn-primary {
  --bs-btn-color: var(--ibx-btn-text);
  --bs-btn-bg: var(--ibx-btn-bg);
  --bs-btn-border-color: var(--ibx-btn-bg);
  --bs-btn-hover-color: var(--ibx-btn-text);
  --bs-btn-hover-bg: var(--ibx-btn-bg-hover);
  --bs-btn-hover-border-color: var(--ibx-btn-bg-hover);
  --bs-btn-active-color: var(--ibx-btn-text);
  --bs-btn-active-bg: var(--ibx-btn-bg-hover);
  --bs-btn-active-border-color: var(--ibx-btn-bg-hover);
  justify-self: start;
}

.ps-emailalerts--product .ps-emailalerts__content .btn-primary:focus-visible {
  outline: 2px solid var(--ibx-btn-bg);
  outline-offset: 2px;
  box-shadow: none;
}

/* Case de consentement RGPD (module psgdpr) cochée : couleur boutique */
.ps-emailalerts--product .form-check-input:checked {
  background-color: var(--ibx-btn-bg);
  border-color: var(--ibx-btn-bg);
}

/* Confirmation « Vous serez prévenu… » : même habillage que le bloc */
.ps-emailalerts--product > .alert-info {
  color: var(--ibx-alert-text-color);
  background-color: var(--ibx-alert-bg);
  border: 1px solid var(--ibx-alert-border);
  border-left: var(--ibx-alert-accent-width) solid var(--ibx-alert-accent);
}

/* 15b. « Ajouter au panier » désactivé ------------------------------------
   Sélecteur plus précis que 14a (qui force le fond plein même désactivé). */
.page-product .product__add-to-cart-button.btn-primary:is(:disabled, [aria-disabled="true"]),
.product__add-to-cart-button.btn-primary:is(:disabled, [aria-disabled="true"]) {
  --bs-btn-disabled-color: var(--ibx-btn-disabled-text);
  --bs-btn-disabled-bg: var(--ibx-btn-disabled-bg);
  --bs-btn-disabled-border-color: var(--ibx-btn-disabled-border);
  --bs-btn-disabled-opacity: 1;              /* couleurs explicites : pas de voile Bootstrap */
  border-style: dashed;                      /* indice d'indisponibilité qui ne repose pas que sur la couleur */
  box-shadow: none;
}

.product__add-to-cart-button.btn-primary:is(:disabled, [aria-disabled="true"]) .material-icons {
  color: inherit;
  opacity: .7;
}