/* ============================================================
   product-pack.css — Fiche produit : ENSEMBLES (packs)
   Chargé UNIQUEMENT sur une fiche pack, en complément de
   product-pdp.css dont il réutilise les tokens (--bleu, --dore,
   --ivoire, --vert, --gris, --bordure, --promo-red, --serif…).
   Additif : n'écrase aucune règle des fiches produit normales.

   Parti pris : un pack n'est pas une liste de courses, c'est un
   ensemble. Un filet doré relie les articles entre eux et porte
   leur quantité — c'est le seul geste appuyé de la page, tout le
   reste reste au niveau de sobriété du reste de la fiche.
   ============================================================ */

.section-pack-content {
  --pack-rail: 34px;   /* retrait du filet de liaison */
  --pack-node: 22px;   /* diamètre du nœud de quantité */
}

/* Les prix restent en CoText partout, comme .promo-card-price et
   .pdp-sticky-price : le serif est réservé aux titres de section.
   Chiffres à chasse fixe : sans ça les prix d'une colonne ne s'alignent
   pas verticalement, ce qui suffit à faire « brouillon ». */
.pdp-pack-save,
.pdp-pack-item-node,
.pdp-pack-item-price-val,
.pdp-pack-item-price-note,
.pdp-pack-total-old,
.pdp-pack-total-now,
.pdp-pack-total-badge-num,
.pdp-pack-thumb-qty {
  font-family: "co-text", sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ─── 1. HERO — badges pack ─────────────────────────────── */
/* .pdp-pack-flag et .pdp-pack-dim sont stylées avec les autres étiquettes du
   visuel dans product-pdp.css : elles partagent la palette des chips et, pour la
   première, la colonne .pdp-hero-flags. Rien à surcharger ici. */

/* ─── 2. HERO — vignettes de composition ────────────────── */
/* Remplace .pdp-gallery-thumbs sur un pack : une vignette légendée
   par article inclus. */
.pdp-pack-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}
.pdp-pack-thumb {
  display: block;
  color: inherit;
  border-radius: 10px;
  outline-offset: 3px;
}
.pdp-pack-thumb-img {
  position: relative;
  height: 110px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ivoire);
  border: 1px solid var(--bordure);
  transition: border-color 0.25s var(--ease);
}
.pdp-pack-thumb-img img {
  width: 100%;
  height: 100%;
  /* Les photos produit portent déjà leur fond studio clair : `cover` remplit
     la tuile sans raccord visible, `contain` les noyait dans un cadre. */
  object-fit: cover;
  display: block;
  transition: transform 0.35s var(--ease);
}
.pdp-pack-thumb-qty {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: rgba(26, 43, 74, 0.9);
  color: #fff;
  font-size: 0.63rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-pack-thumb:hover .pdp-pack-thumb-img { border-color: var(--dore); }
.pdp-pack-thumb:hover .pdp-pack-thumb-img img { transform: scale(1.04); }
.pdp-pack-thumb:focus-visible .pdp-pack-thumb-img { border-color: var(--dore); }
.pdp-pack-thumb-label {
  margin-top: 8px;
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--bleu);
  /* Hauteur constante : sans ça, une légende sur 2 lignes décale sa voisine. */
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── 2 bis. BUYBOX — ce que contient le pack, sous le titre ─── */
/* Placé avant le prix : c'est ce qui justifie le montant qui suit. */
.pdp-pack-usp {
  /* La marge basse est portée ici : .pdp-price-block ouvre sur un border-top
     sans margin-top, la liste viendrait sinon coller le filet. */
  margin: 18px 0 20px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pdp-pack-usp li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #2c3c5e;
}
.pdp-pack-usp svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--vert);
}
.pdp-pack-usp strong {
  font-weight: 700;
  color: var(--bleu);
}

/* ─── 3. BUYBOX — mention « achat séparé » + encart offre limitée ─────────
   Le bloc prix d'un pack utilise le gabarit de la fiche standard (valeur barrée et
   pilule « Économisez » au-dessus, prix en dessous) : il n'y a donc RIEN à styler ici
   pour le prix, la valeur barrée ou la pilule — tout vient de product-pdp.css, y
   compris le rouge promo. Deux rouges différents pour la même fonction, c'était
   exactement ce qui faisait lire la fiche pack comme un gabarit à part.

   Ne subsiste que la mention qui qualifie la valeur barrée. Volontairement discrète :
   le montant est déjà dans la pilule, cette ligne ne fait que dire à quoi il se
   compare. */
.pdp-pack-save {
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(33, 31, 96, 0.55);
}

/* Notice, pas alerte : un filet doré à gauche plutôt qu'un cadre jaune
   fermé, pour rester dans la voix de la marque. */
.pdp-pack-deadline {
  position: relative;
  margin: 14px 0 18px;
  padding: 16px 18px 16px 20px;
  background: linear-gradient(90deg, rgba(201, 169, 110, 0.10), rgba(201, 169, 110, 0.03));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pdp-pack-deadline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--dore);
}
.pdp-pack-deadline-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dore);
}
.pdp-pack-deadline-head svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.pdp-pack-deadline-body {
  margin-top: 7px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--bleu);
}
.pdp-pack-deadline-body strong { font-weight: 700; }
.pdp-pack-deadline-note {
  margin-top: 6px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--gris);
}

/* ─── 4. SECTION « Ce que contient votre pack » ─────────── */
.section-pack-content {
  /* Respiration symétrique autour de la carte : sans le bas, la bande sombre
     « Pourquoi choisir le pack » vient coller le pied de la composition. */
  padding: clamp(32px, 4vw, 56px) 0;
}
.pdp-pack-card {
  background: var(--ivoire);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 38px) clamp(20px, 3vw, 40px);
}
.pdp-pack-card h2 {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--bleu);
}

/* Le filet de liaison : il court derrière les nœuds de quantité et
   groupe visuellement les articles en un seul ensemble. */
.pdp-pack-list {
  position: relative;
  margin-top: 26px;
  padding-left: var(--pack-rail);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pdp-pack-list::before {
  content: '';
  position: absolute;
  left: calc(var(--pack-rail) / 2 - 6px);
  top: 46px;
  bottom: 46px;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(201, 169, 110, 0) 0%,
    var(--dore) 12%,
    var(--dore) 88%,
    rgba(201, 169, 110, 0) 100%
  );
}

.pdp-pack-item {
  position: relative;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 22px;
  align-items: center;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.pdp-pack-item:hover {
  border-color: rgba(201, 169, 110, 0.55);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.pdp-pack-item-node {
  position: absolute;
  left: calc(var(--pack-rail) * -1);
  top: 50%;
  transform: translateY(-50%);
  width: var(--pack-node);
  height: var(--pack-node);
  border-radius: 50%;
  background: var(--ivoire);
  border: 1px solid var(--dore);
  color: var(--dore);
  font-size: 0.63rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.pdp-pack-item:hover .pdp-pack-item-node {
  background: var(--dore);
  color: #fff;
}

.pdp-pack-item-img {
  height: 82px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ivoire);
}
.pdp-pack-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-pack-item-body { min-width: 0; }
.pdp-pack-item-name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bleu);
}
.pdp-pack-item-name a {
  color: inherit;
  text-decoration: none;
  outline-offset: 3px;
}
.pdp-pack-item-name a:hover { color: var(--dore); }
/* La déclinaison est une précision, pas le nom : elle recule. */
.pdp-pack-item-variant {
  font-weight: 500;
  color: var(--gris);
  white-space: nowrap;
}
.pdp-pack-item-variant:not(:empty)::before {
  content: '·';
  margin: 0 5px 0 5px;
  color: rgba(107, 122, 143, 0.55);
}
.pdp-pack-item-desc {
  margin-top: 5px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #3a4a63;
  /* 2 lignes max : la hauteur de ligne du pack ne doit pas dépendre de la
     longueur du résumé saisi en BO. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pdp-pack-item-price {
  text-align: right;
  min-width: 104px;
}
.pdp-pack-item-price-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bleu);
  white-space: nowrap;
}
.pdp-pack-item-price-note {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--gris);
  white-space: nowrap;
}
/* Rappel de quantité sous le prix : mobile uniquement (le nœud disparaît). */
.pdp-pack-item-price-note--mobile-qty { display: none; }

/* Pied : le prix du pack domine, le reste est du contexte. */
.pdp-pack-total {
  margin-top: 24px;
  padding-top: 22px;
  padding-left: var(--pack-rail);
  border-top: 1px solid var(--bordure);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(20px, 3vw, 36px);
}
.pdp-pack-total-block { text-align: right; }
.pdp-pack-total-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}
.pdp-pack-total-label--pack { color: var(--dore); }
.pdp-pack-total-old {
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gris);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
.pdp-pack-total-now {
  margin-top: 2px;
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--bleu);
  white-space: nowrap;
}
.pdp-pack-total-badge {
  align-self: flex-end;
  background: var(--promo-red, #DE2F27);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(222, 47, 39, 0.22);
}
.pdp-pack-total-badge-num {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
.pdp-pack-total-badge-label {
  margin-top: 2px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
}

/* ─── 4 bis. SECTION « L'expérience du pack » ───────────── */
.section-pack-story {
  padding: clamp(32px, 4vw, 56px) 0;
}
.pdp-pack-story {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.pdp-pack-story-text .eyebrow { margin-bottom: 12px; }
.pdp-pack-story-text h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--bleu);
}
.pdp-pack-story-text p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #3a4a63;
}
.pdp-pack-story-text strong {
  font-weight: 600;
  color: var(--bleu);
}
.pdp-pack-story-img {
  height: 360px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ivoire);
}
.pdp-pack-story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Sans visuel, le texte reprend toute la largeur plutôt que de laisser un vide. */
.section-pack-story--notext-img .pdp-pack-story {
  grid-template-columns: 1fr;
  max-width: 760px;
}

/* ─── 5. Variante pack de la bande sombre « Pourquoi… » ─── */
.section-why--pack .pdp-atouts-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.section-why--pack .pdp-atout {
  padding: 20px 22px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 15px;
}
.section-why--pack .pdp-atout-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(201, 169, 110, 0.14);
  margin-bottom: 0;
  flex-shrink: 0;
}
.section-why--pack .pdp-atout-icon svg {
  width: 20px;
  height: 20px;
}
.section-why--pack .pdp-atout h3 {
  margin-bottom: 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 920px) {
  .section-pack-content { --pack-rail: 28px; }
  .pdp-pack-item { grid-template-columns: 80px 1fr auto; gap: 16px; padding: 16px 18px; }
  .pdp-pack-item-img { height: 72px; }
  .section-why--pack .pdp-atouts-grid { grid-template-columns: 1fr; }
  .pdp-pack-story { grid-template-columns: 1fr; gap: 24px; }
  .pdp-pack-story-img { height: 300px; order: 2; }
}

@media (max-width: 640px) {
  /* Badges hero */
  .pdp-hero-flags { top: 10px; left: 10px; gap: 4px; }
  .pdp-gallery-main .pdp-pack-dim,
  .pdp-gallery-main .promo-card-combination { bottom: 10px; left: 10px; }
  .pdp-gallery-main .promo-card-delivery-badge { top: 10px; right: 10px; }
  .pdp-gallery-main .promo-card-memory-badge { bottom: 10px; right: 10px; }

  /* Vignettes de composition */
  .pdp-pack-thumbs { gap: 8px; }
  .pdp-pack-thumb-img { height: 66px; border-radius: 8px; }
  .pdp-pack-thumb-img img { padding: 5px; }
  .pdp-pack-thumb-label { margin-top: 6px; font-size: 0.63rem; }

  /* Buybox */
  .pdp-pack-save { font-size: 0.82rem; }
  .pdp-pack-deadline { padding: 14px 16px 14px 18px; }
  .pdp-pack-deadline-body { font-size: 0.85rem; }
  .pdp-pack-deadline-note { font-size: 0.76rem; }

  /* Section composition : le filet n'a plus la place, la liste redevient
     une pile simple et la quantité repasse sous le prix. */
  .section-pack-content { padding: 0 0 40px; }
  .pdp-pack-card { border-radius: 14px; }
  .pdp-pack-list { padding-left: 0; margin-top: 20px; gap: 10px; }
  .pdp-pack-list::before { display: none; }
  .pdp-pack-item-node { display: none; }

  .pdp-pack-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
  }
  .pdp-pack-item:hover { transform: none; }
  .pdp-pack-item-img {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 8px;
  }
  .pdp-pack-item-body { flex: 1; }
  .pdp-pack-item-name { font-size: 0.88rem; }
  .pdp-pack-item-variant { display: block; white-space: normal; }
  .pdp-pack-item-variant:not(:empty)::before { content: none; }
  .pdp-pack-item-desc { display: none; }
  .pdp-pack-item-price { min-width: 0; }
  .pdp-pack-item-price-val { font-size: 0.85rem; }
  .pdp-pack-item-price-note { font-size: 0.68rem; }
  .pdp-pack-item-price-note--mobile-qty { display: block; }

  .pdp-pack-total {
    margin-top: 18px;
    padding-top: 16px;
    padding-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .pdp-pack-total-block {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
  }
  .pdp-pack-total-label { font-size: 0.66rem; }
  .pdp-pack-total-old { margin-top: 0; font-size: 0.95rem; }
  .pdp-pack-total-now { margin-top: 0; font-size: 1.5rem; }
  .pdp-pack-total-badge {
    margin-top: 2px;
    padding: 11px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 7px;
  }
  .pdp-pack-total-badge-num { font-size: 1rem; }
  .pdp-pack-total-badge-label { margin-top: 0; font-size: 0.7rem; letter-spacing: 0.06em; }

  /* Expérience du pack */
  .section-pack-story { padding: 0 0 36px; }
  .pdp-pack-story { gap: 16px; }
  .pdp-pack-story-text h2 { font-size: 1.25rem; margin-bottom: 12px; }
  .pdp-pack-story-text p { font-size: 0.88rem; }
  .pdp-pack-story-img { height: 220px; border-radius: 12px; }

  /* USP */
  .pdp-pack-usp { margin: 14px 0 16px; gap: 7px; }
  .pdp-pack-usp li { font-size: 0.79rem; gap: 8px; }

  /* Bande sombre */
  .section-why--pack .pdp-atout { padding: 14px 16px; gap: 12px; }
  .section-why--pack .pdp-atout-icon { width: 32px; height: 32px; }
  .section-why--pack .pdp-atout-icon svg { width: 17px; height: 17px; }
  .section-why--pack .pdp-atout h3 { font-size: 0.8rem; }
}

/* ─── Accessibilité ─────────────────────────────────────── */
.pdp-pack-thumb:focus-visible,
.pdp-pack-item-name a:focus-visible {
  outline: 2px solid var(--dore);
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .pdp-pack-thumb-img,
  .pdp-pack-thumb-img img,
  .pdp-pack-item,
  .pdp-pack-item-node {
    transition: none;
  }
  .pdp-pack-item:hover { transform: none; }
  .pdp-pack-thumb:hover .pdp-pack-thumb-img img { transform: none; }
}

/* ─── Configurateur de pack ───────────────────────────────────────────────
   Carte repliée par défaut : le client voit sa configuration et le prix, et déplie
   seulement s'il veut changer quelque chose.
   Tokens repris du design (marine #1a2b4a, doré #b39a6d, filet #e6e2da, ivoire
   #f7f4ef) — aucune nouvelle couleur de charte. */
.pdp-configurator {
  margin-top: 22px;
  border: 1px solid #e6e2da;
  border-radius: 14px;
  padding: 18px 24px;
  background: #fff;
}

/* Toute la carte déplie : le bouton porte l'en-tête entier plutôt qu'une zone
   cliquable posée sur un div, pour rester utilisable au clavier. */
.pdp-configurator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.pdp-configurator-titles { display: block; }

.pdp-configurator-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #b39a6d;
  text-transform: uppercase;
}

/* Récapitulatif live « 160×200 · Hêtre Huilé · Mi-ferme », sous le libellé. */
.pdp-configurator-recap {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #1a2b4a;
}
.pdp-configurator-recap:empty { display: none; }

.pdp-configurator-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1a2b4a;
  background: #f7f4ef;
  padding: 8px 14px;
  border-radius: 999px;
}
.pdp-configurator-chevron {
  display: inline-block;
  transition: transform .15s ease;
}
.pdp-configurator[data-open="1"] .pdp-configurator-chevron { transform: rotate(180deg); }

/* Panneau : masqué par max-height et non par display:none, pour que les <select>
   restent lisibles par combination.js et que la transition soit possible. */
.pdp-configurator-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .15s ease, opacity .15s ease;
}
.pdp-configurator[data-open="1"] .pdp-configurator-panel {
  /* Généreux : trois groupes occupent ~390px. La valeur ne sert qu'à borner la
     transition, la hauteur réelle reste celle du contenu. */
  max-height: 1200px;
  opacity: 1;
}

/* Les attributs à valeur unique (« Longueur : 200 ») sont déjà résumés dans le
   récapitulatif : les répéter alourdit le configurateur. */
.pdp-configurator .pdp-option-readonly-row { display: none; }

.pdp-configurator #attributes .pdp-option-group:first-child { margin-top: 18px; }

/* Mouvement supprimé pour qui le demande. */
@media (prefers-reduced-motion: reduce) {
  .pdp-configurator-panel,
  .pdp-configurator-chevron { transition: none; }
}

/* ─── Alignements sur le design de référence ────────────────────────────── */

/* 3 — Promesse d'ensemble, juste sous le titre. Le design la met en italique, dans un
   gris bleuté plus clair que le corps de texte : c'est une accroche, pas une phrase de
   description. */
.pdp-pack-subtitle {
  /* Collée au titre, comme dans le design : seule la marge basse du h1 les sépare. */
  margin: 0;
  font-size: 16px;
  font-style: italic;
  color: #6b7690;
}

/* ─── Rythme vertical du buybox ─────────────────────────────────────────────
   Le design cadence la colonne d'achat par paliers réguliers : 18-22px entre deux
   blocs, et un filet de séparation entre la configuration et le prix. Sans lui, la
   carte du configurateur et le prix se touchaient (0px), ce qui faisait lire les deux
   comme un seul bloc. */
.pdp-configurator + .pdp-price-block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee9e0;
}

/* Les marges verticales de ces blocs fusionnent (margin collapsing) et retombaient à
   14px : on force le palier du design. */
.pdp-price-block + .pdp-pack-deadline { margin-top: 20px; }
.pdp-pack-deadline + .pdp-buy-row { margin-top: 18px; }
.pdp-reassurance-row + #esa-widget,
.pdp-reassurance-row + .esa-widget { margin-top: 20px; }
#esa-widget + .pdp-lede-bottom,
.esa-widget + .pdp-lede-bottom { margin-top: 20px; }
.pdp-lede-bottom + .pdp-note { margin-top: 12px; }

/* 7 — Les attributs à valeur unique (« Longueur : 200 ») sont déjà résumés dans le
   récapitulatif de la carte : les répéter alourdit le configurateur. */
.pdp-configurator .pdp-option-readonly-row { display: none; }

/* 6 — Nom du coloris sous chaque pastille (design de référence) : avec deux essences
   de bois, la couleur seule ne suffit pas à choisir.
   La pastille .pdp-pill-color porte normalement le cercle (48px, bordure, overflow
   hidden) et masque son label. On rend le bouton transparent et on transfère le cercle
   au .pdp-swatch, sinon le label réaffiché déborde du rond et se retrouve coupé. */
.pdp-pills-color .pdp-pill.pdp-pill-color--labelled {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pdp-pill-color--labelled .pdp-swatch {
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--bordure);
  box-sizing: border-box;
}
/* L'état actif est porté par le cercle, pas par le bouton : .pdp-pill-color.is-active
   dessine sinon un cadre carré autour de la légende. */
.pdp-pills-color .pdp-pill-color--labelled.is-active,
.pdp-pills-color .pdp-pill-color--labelled.active {
  border: 0;
  background: none;
  box-shadow: none;
}
.pdp-pill-color--labelled.is-active .pdp-swatch,
.pdp-pill-color--labelled.active .pdp-swatch {
  border-color: var(--dore);
  box-shadow: 0 0 0 2px var(--dore);
}
.pdp-pills-color .pdp-pill-color--labelled .pill-label {
  position: static;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 400;
  color: #5b6478;
}

/* 12 — Déclinaison sous le nom de l'article, dans les vignettes de la galerie. */
.pdp-pack-thumb-variant {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: #8a90a0;
}

/* 13 — Tiret cadratin entre le nom de l'article et sa déclinaison. */
.pdp-pack-item-sep {
  margin: 0 6px;
  color: #9099a8;
  font-weight: 400;
}

/* ─── Bloc disponibilité (widget magasin) ───────────────────────────────────
   Le design en fait une carte cernée d'un filet fin, dont la première ligne est
   posée sur ivoire — même grammaire que le configurateur et la fiche technique.
   Le widget natif était une carte plate, sans fond ni bordure, qui flottait entre
   deux blocs cadrés. */
.pdp-buybox #esa-widget {
  border: 1px solid #eee9e0;
  border-radius: 10px;
  overflow: hidden;              /* les filets s'arrêtent aux angles arrondis */
  background: #fff;
}
.pdp-buybox #esa-widget .esa-avail-row {
  padding: 12px 16px;
  font-size: 14px;
}
/* Ligne « En ligne » : fond ivoire, comme l'en-tête de carte du design. */
.pdp-buybox #esa-widget .esa-avail-row--online { background: #f7f4ef; }
/* Les lignes suivantes (magasin du client) sont séparées par un filet. */
.pdp-buybox #esa-widget .esa-avail-row + .esa-avail-row,
.pdp-buybox #esa-widget .esa-trigger { border-top: 1px solid #eee9e0; }
.pdp-buybox #esa-widget .esa-trigger { padding: 12px 16px; font-size: 14px; }

/* La pastille d'état reprend le vert du design plutôt que la couleur générique. */
.pdp-buybox #esa-widget .esa-avail-dot.is-green { background: #3a8a4c; }
.pdp-buybox #esa-widget .online-store-available.is-green { color: #3a8a4c; }

/* La promesse d'ensemble est déjà affichée sous le titre : la répéter dans un encart
   « En quelques mots » en bas de colonne fait doublon. */
.pdp-buybox .pdp-pack-subtitle ~ .pdp-lede-bottom { display: none; }

/* Conteneur de paiement fractionné sans échéance éligible : masqué par
   initEmptyPaymentWidget() dès qu'il ne produit aucun texte. La ligne « ou 3× … sans
   frais » du bloc prix reste, elle, toujours affichée. */
.pdp-buybox .alma-pp-container.is-empty { display: none; }

/* Les pastilles d'un même groupe gardent la même hauteur, que l'option porte un écart
   de prix ou non (l'option de référence n'en affiche aucun). */
.pdp-configurator .pdp-pills .pdp-pill { align-self: stretch; }