/* Fiche produit (produit.php, mise en page du 17/10/2026, maquette
   fiche-produit-box-tee.html). Chargé APRÈS catalogue.css, sur cette page
   seulement : réutilise ses variables (--ink, --paper, --border,
   --photo-bg…), son header, son footer, ses bulles (.info-tip) et son guide
   des tailles. Charte : monochrome strict, Helvetica 600/700 pour les
   titres, Open Sans 400 pour le texte, angles droits.
   CSP : aucun style en ligne, les pastilles de couleur sont des SVG fill. */

.pdp2 {
  --pdp-gutter: 56px;
  --pdp-max: 1280px;
  --pdp-head: 96px;   /* hauteur du header collant (catalogue.css .head) */
  --pdp-bar: 116px;   /* barre flottante du bas : carte (≈ 83 px) + marges */
  --pdp-hero-muted: rgba(255, 255, 255, .68);
  --pdp-field: rgba(30, 30, 28, .32);
  padding-bottom: var(--pdp-bar); /* le footer reste lisible au-dessus de la barre */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.pdp2 :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Hero ---------- */
/* Deux vraies colonnes (texte | photo plein cadre) : le texte ne passe
   jamais sur la photo, quelle que soit la longueur du nom. */
.pdh {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  min-height: 600px;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.pdh :focus-visible { outline-color: var(--paper); }
.pdh__photo {
  grid-column: 2;
  grid-row: 1;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2a28;
}
.pdh__photo { position: relative; }
.pdh__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* haut de l’image gardé : têtes des mannequins */
.pdh__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--pdp-hero-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pdh__placeholder-big {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: none;
  color: var(--paper);
}
.pdh__inner {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  /* Aligné sur la colonne de contenu du site (1280 px centrés) */
  padding: 24px 48px 48px max(var(--pdp-gutter), calc((100vw - var(--pdp-max)) / 2 + var(--pdp-gutter)));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.pdh__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  font-weight: 600;
}
.pdh__back { color: var(--paper); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.pdh__back:hover { text-decoration: underline; }
.pdh__ref { color: var(--pdp-hero-muted); letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }

.pdh .eco-badges--labelled { margin: 0 0 16px; }
.pdh .eco-badge { color: var(--paper); background: transparent; border-color: currentColor; }

.pdh__name {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 9vw, 128px);
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
  overflow-wrap: break-word; /* coupe seulement un mot plus large que la colonne, sans tiret */
}
.pdh__name--l { font-size: clamp(44px, 6.6vw, 96px); }
.pdh__name--xl { font-size: clamp(36px, 4.8vw, 68px); line-height: .95; }
.pdh__tagline { margin: 18px 0 0; font-size: 20px; line-height: 1.4; max-width: 30ch; }
.pdh__price { margin: 14px 0 0; font-size: 14px; color: var(--pdp-hero-muted); max-width: 46ch; }
.pdh__price b { color: var(--paper); font-weight: 600; }

/* Pastilles du hero (cerclées de blanc : une couleur sombre reste visible sur le fond noir) */
.pdh__colors { margin-top: 22px; }
.pdh__colors-lbl {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pdp-hero-muted);
}
.pdh__colors-name { color: var(--paper); }
.pdh__swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -6px; }
.pdh__sw {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pdh__sw[hidden], .pdh__more[hidden] { display: none; }
.pdh__sw svg { width: 28px; height: 28px; display: block; border-radius: 50%; }
.pdh__sw:hover svg { box-shadow: 0 0 0 1px var(--paper); }
.pdh__sw[aria-pressed="true"] svg { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--paper); }
/* Couleur sans code hex : pilule de texte ; bouton de 40 px (zone tactile), pilule visible de 28 px */
.pdh__sw--text { width: auto; padding: 0 4px; border-radius: 0; font-size: 11px; font-weight: 600; }
.pdh__sw--text span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
}
.pdh__sw--text:hover span { border-color: var(--paper); }
.pdh__sw--text[aria-pressed="true"] span { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pdh__more {
  min-height: 40px;
  padding: 0 8px;
  color: var(--paper);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdh__more:hover { text-decoration-thickness: 2px; }
.pdh__colors-note { margin: 4px 0 0; font-size: 12px; color: var(--pdp-hero-muted); }

.pdh__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pdh__cta,
.pdh__ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--paper);
  cursor: pointer;
}
.pdh__cta { background: var(--paper); color: var(--ink); }
.pdh__cta:hover { background: transparent; color: var(--paper); }
/* .sizes-toggle (catalogue.js ouvre le guide) : on neutralise son style clair. */
.pdh__ghost, .pdh__ghost.sizes-toggle { background: transparent; color: var(--paper); align-self: auto; gap: 0; }
.pdh__ghost:hover, .pdh__ghost.sizes-toggle:hover { background: var(--paper); color: var(--ink); }

/* ---------- Bande de caractéristiques ----------
   17/10 : toutes les valeurs à la même taille, sur une ligne (les valeurs du
   hub sont des textes libres de longueur très variable : « 180 GSM » comme
   « 100% coton biologique Combed Ring Spun »). Chaque case prend la largeur
   de son texte ; libellé sous la valeur (ordre HTML dt → dd, inversé ici). */
.pds { border-bottom: 1px solid var(--ink); }
.pds__inner {
  max-width: var(--pdp-max);
  margin: 0 auto;
  padding: 0 var(--pdp-gutter);
  display: flex;
}
.pds__item {
  flex: 1 0 auto; /* valeur courte : jamais rétrécie, donc jamais coupée */
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 8px;
  padding: 28px 32px;
  border-left: 1px solid var(--ink);
}
.pds__item:first-child { padding-left: 0; border-left: 0; }
/* Valeur longue (> 40 caractères, ex. une phrase de composition) : prend la
   place restante et passe à la ligne plutôt que d'être coupée. */
.pds__item--long { flex: 1 1 320px; }
/* Avec une valeur longue, les cases courtes restent à la largeur de leur texte : toute la place libre va à la valeur longue */
.pds--long .pds__item:not(.pds__item--long) { flex-grow: 0; }
.pds__item--long .pds__value { white-space: normal; overflow: visible; }
.pds__value {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* filet de sécurité seulement : texte complet au survol (title) */
}
.pds__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

/* ---------- Description + vignettes ---------- */
.pdi {
  max-width: var(--pdp-max);
  margin: 0 auto;
  padding: 48px var(--pdp-gutter) 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}
.pdi__desc { flex: 1 1 380px; margin: 0; font-size: 18px; line-height: 1.65; max-width: 64ch; }
.pdi__thumbs { flex: 1 1 380px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pdi__thumb {
  aspect-ratio: 3 / 4;
  padding: 0;
  background: var(--photo-bg);
  border: 1px solid transparent;
  overflow: hidden;
}
.pdi__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdi__thumb:hover { border-color: var(--border); }
.pdi__thumb.is-active { border-color: var(--ink); }

/* ---------- Configurateur ---------- */
.cfg {
  max-width: var(--pdp-max);
  margin: 0 auto;
  padding: 64px var(--pdp-gutter) 96px;
  /* Pas de scroll-margin : html a déjà scroll-padding-top (catalogue.css) ;
     les deux s'additionnaient. Les sauts du JS sont calculés dans produit.js. */
}
.cfg__title {
  margin: 0 0 24px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.cfg__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px;
}
.cfg__step {
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  text-align: left;
  background: var(--photo-bg);
  border: 2px solid transparent;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cfg__step-num { margin-right: .4em; }
.cfg__step-sub {
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfg__step[aria-current="step"] { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.cfg__step.is-done { background: var(--ink); color: var(--paper); }
.cfg__step:disabled { cursor: not-allowed; opacity: .6; }
.cfg__step:not(:disabled):not([aria-current]):hover { border-color: var(--ink); }

.cfg__body { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; align-items: flex-start; }
.cfg__main { flex: 999 1 560px; min-width: 0; border: 1px solid var(--border); padding: 32px; }
.cfg__panel[hidden] { display: none; }
.cfg__h {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
}
.cfg__h:focus { outline: none; }
.cfg__h:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.cfg__hint { margin: 6px 0 24px; color: var(--ink-secondary); font-size: 14px; line-height: 1.5; }
.cfg__lbl {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Cartes de choix (techniques, emplacements) */
.cfg__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cfg__choice {
  min-height: 140px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--pdp-field);
  color: var(--ink);
}
.cfg__choice:hover { border-color: var(--ink); }
.cfg__choice[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cfg__choice .quote-tile__icon { width: 52px; height: 52px; color: currentColor; }
.cfg__choice-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.cfg__choice-desc { font-size: 12px; line-height: 1.4; opacity: .8; }
.cfg__choice-min { font-size: 11px; opacity: .7; }

/* Couleurs */
.cfg__colors { margin-bottom: 28px; }
/* Vignette de la couleur choisie : mobile seulement (sur ordinateur, la photo du résumé reste à côté) */
.cfg__preview { display: none; }
.cfg__preview-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cfg__swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.cfg__sw {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 2px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cfg__sw svg { width: 40px; height: 40px; display: block; }
.cfg__sw[aria-checked="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.cfg__sw:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }
.cfg__sw[aria-checked="true"]:focus-visible { outline-style: solid; outline-width: 3px; }
.cfg__sw--text {
  width: auto;
  min-width: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--pdp-field);
  font-size: 12px;
  font-weight: 600;
}
.cfg__sw--text[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cfg__sw.is-out { opacity: .55; }
.cfg__sw.is-out::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1.5px;
  background: var(--ink);
  transform: rotate(-45deg);
  pointer-events: none;
}
/* Stock fournisseur : niveaux en noir et blanc (charte), pas de couleur d'alerte. */
.pdp2 .pdp__stock { margin-top: 14px; }
.pdp2 .pdp__stock[data-level="low"] { border-left-color: var(--ink); border-left-style: dashed; }
.pdp2 .pdp__stock[data-level="out"] { border-left-color: var(--ink); border-left-width: 6px; }

/* Référence libre */
.cfg__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.cfg__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cfg__field input,
.cfg textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--pdp-field);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px; /* 16 px : pas de zoom automatique sur iPhone */
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.cfg textarea { min-height: 110px; margin-top: 8px; resize: vertical; line-height: 1.5; }
.cfg__field input:focus, .cfg textarea:focus { border-color: var(--ink); }

/* Tailles */
.cfg__sizes-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cfg__link,
.cfg__link.sizes-toggle {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cfg__link.sizes-toggle:hover { background: none; text-decoration-thickness: 2px; }
.cfg__check { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 14px; cursor: pointer; min-height: 44px; }
.cfg__check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.cfg__sizes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cfg__sizes[hidden], .cfg__unknown[hidden] { display: none; }
.cfg__size { display: flex; flex-direction: column; gap: 6px; text-align: center; font-size: 13px; font-weight: 600; }
.cfg__size--total { max-width: 240px; text-align: left; }
.cfg__qty {
  width: 100%;
  min-height: 48px;
  padding: 0 8px;
  border: 1px solid var(--pdp-field);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  text-align: center;
}
.cfg__qty:focus { border-color: var(--ink); }
.cfg__total { margin: 14px 0 0; font-size: 14px; color: var(--ink-secondary); }
.cfg__total.is-ok { color: var(--ink); font-weight: 600; }
.cfg__total.is-short { color: var(--ink); }

/* Récapitulatif */
.cfg__recap { margin: 14px 0 24px; border-top: 1px solid var(--ink); }
.cfg__recap div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.cfg__recap dt { color: var(--ink-secondary); flex: none; }
.cfg__recap dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* Confirmation */
.cfg__done { border: 2px solid var(--ink); margin: -32px; padding: 32px; }
.cfg__done .cfg__hint { margin-bottom: 20px; }
.cfg__nav--done { margin: 0 0 12px; }

/* Messages + navigation */
.cfg__error { margin: 20px 0 0; padding: 12px 14px; border: 1px solid var(--ink); border-left-width: 4px; font-size: 14px; font-weight: 600; }
.cfg__error[hidden] { display: none; }
.cfg__nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cfg__nav[hidden] { display: none; }
.cfg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.cfg__btn--primary { background: var(--ink); color: var(--paper); }
.cfg__btn--secondary { background: var(--paper); color: var(--ink); }
.cfg__btn--primary:hover { background: #000; }
.cfg__btn--secondary:hover { background: var(--photo-bg); }
.cfg__btn:disabled { opacity: .35; cursor: not-allowed; }
.cfg__btn[aria-disabled="true"] { opacity: .45; }

/* Résumé « Ton devis en cours » */
.cfg__aside {
  flex: 1 1 300px;
  max-width: 360px;
  position: sticky;
  top: calc(var(--pdp-head) + 16px);
  padding: 24px;
  background: var(--photo-bg);
}
.cfg__aside .cfg__recap div { font-size: 14px; padding: 10px 0; }
/* Ligne produit du résumé, comme dans un panier : vignette nette (marge
   autour, fond blanc) + nom, couleur choisie, prix. La vignette suit la
   couleur choisie et les vignettes de la page (produit.js). */
.cfg__item { display: flex; gap: 16px; align-items: flex-start; margin: 14px 0 18px; }
.cfg__item .cfg__shot-img {
  flex: none;
  width: 96px;
  height: 120px;
  object-fit: cover;
  object-position: center top;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--border);
}
.cfg__item-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.cfg__item-name {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word;
}
.cfg__item-meta { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-secondary); }
.cfg__est.is-empty {
  margin: 6px 0 12px;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-secondary);
}
.cfg__est {
  margin: 4px 0 8px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.cfg__note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-secondary); }
.cfg__note b { color: var(--ink); }

/* ---------- Barre flottante ----------
   17/10 : bloc noir décollé des bords, aligné sur la colonne de contenu.
   Cachée (classe is-hidden + inert, posées par le PHP) tant que le bouton
   du hero est à l'écran ; produit.js la fait glisser depuis le bas ensuite. */
.pdbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 15; /* sous le header (20) et ses menus, au-dessus du contenu */
  padding: 0 12px;
  pointer-events: none; /* seule la carte capte les clics, pas la bande transparente autour */
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0s;
}
.pdbar.is-hidden {
  transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px)));
  visibility: hidden;
  transition: transform .24s ease-in, visibility 0s linear .24s;
}
.pdbar__card {
  display: flow-root; /* la marge haute de la progression reste dans la carte */
  pointer-events: auto;
  max-width: calc(var(--pdp-max) - 2 * var(--pdp-gutter) + 32px);
  margin: 0 auto;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .18);
}
.pdbar :focus-visible { outline-color: var(--paper); }
/* Progression : un segment par étape (plein = faite, gris clair = en cours) */
.pdbar__progress { display: flex; gap: 4px; height: 3px; margin: 12px 16px 0; } /* à l'intérieur de la carte : collé au bord, le blanc se confondait avec la page */
.pdbar__progress span { flex: 1; background: rgba(255, 255, 255, .16); transition: background-color .2s ease; }
.pdbar__progress span.is-current { background: rgba(255, 255, 255, .45); }
.pdbar__progress span.is-done { background: var(--paper); }
.pdbar__inner {
  min-height: 68px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.pdbar__img {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: cover;
  object-position: center top;
  background: #2a2a28;
}
.pdbar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pdbar__name {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.005em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdbar__sum { font-size: 12px; color: var(--pdp-hero-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdbar__nums { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pdbar__price { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; white-space: nowrap; }
.pdbar__pcs { font-size: 12px; color: var(--pdp-hero-muted); white-space: nowrap; }
.pdbar__step { display: none; font-size: 11px; color: var(--pdp-hero-muted); white-space: nowrap; }
.pdbar__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.pdbar__btn:hover { background: transparent; color: var(--paper); }

/* ---------- Toast ---------- */
.pdp-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pdp-bar) + 20px + env(safe-area-inset-bottom, 0));
  z-index: 16;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, .25);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.pdp-toast.is-shown { opacity: 1; }
.pdp-toast:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pdp-toast, .pdbar, .pdbar.is-hidden, .pdbar__progress span { transition: none; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1023px) {
  .pdh { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
  .pdh__inner { padding-right: 32px; }
  /* Caractéristiques en 2 × 2 (plus assez de place pour une seule ligne) */
  .pds__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pds__item { padding: 22px 24px; border-left: 0; }
  .pds__item:nth-child(odd) { padding-left: 0; }
  .pds__item:nth-child(even) { border-left: 1px solid var(--ink); }
  .pds__item:nth-child(n+3) { border-top: 1px solid var(--border); }
  .pds__value { white-space: normal; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .pdp2 { --pdp-gutter: 20px; --pdp-head: 72px; --pdp-bar: 92px; }

  /* Hero : photo en haut, texte dessous (lisible, sans voile sur la photo) */
  .pdh { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pdh__photo { grid-column: 1; grid-row: 1; aspect-ratio: 1 / 1; max-height: 58vh; min-height: 0; }
  .pdh--nophoto .pdh__photo { aspect-ratio: auto; height: 180px; }
  .pdh__inner { grid-column: 1; grid-row: 2; padding: 0 var(--pdp-gutter) 36px; gap: 20px; }
  /* Retour + réf. posés en haut de la photo, sur un dégradé pour rester lisibles */
  .pdh__top { position: absolute; top: 0; left: 0; right: 0; z-index: 1; padding: 4px var(--pdp-gutter); background: linear-gradient(rgba(30, 30, 28, .6), rgba(30, 30, 28, 0)); }
  .pdh__ref { color: var(--paper); }
  .pdh__body { padding-top: 28px; }
  .pdh__name { font-size: clamp(44px, 15vw, 72px); }
  .pdh__name--l { font-size: clamp(36px, 11vw, 56px); }
  .pdh__name--xl { font-size: clamp(30px, 8.6vw, 44px); }
  .pdh__tagline { font-size: 17px; }
  .pdh__actions > * { flex: 1 1 auto; }
  .pdh__cta { flex-basis: 100%; }

  /* Caractéristiques : une valeur par ligne, sur toute la largeur (comme
     sur ordinateur : valeur au-dessus, libellé dessous) */
  .pds__inner { display: block; }
  .pds__item,
  .pds__item:nth-child(odd),
  .pds__item:nth-child(even) {
    gap: 4px;
    padding: 14px 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .pds__item:first-child { border-top: 0; }
  .pds__value { font-size: 16px; white-space: normal; overflow-wrap: break-word; }

  .pdi { padding-top: 32px; gap: 24px; }
  .pdi__desc { font-size: 16px; line-height: 1.6; }
  .pdi__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .cfg { padding-top: 48px; padding-bottom: 56px; }
  .cfg__steps { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
  .cfg__steps li { flex: 0 0 auto; width: 46%; scroll-snap-align: start; }
  .cfg__main { padding: 20px; }
  .cfg__h { font-size: 22px; }
  .cfg__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfg__choice { min-height: 120px; padding: 14px 10px; }
  .cfg__fields { grid-template-columns: 1fr; }
  .cfg__sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cfg__done { margin: -20px; padding: 20px; }
  .cfg__nav .cfg__btn { flex: 1 1 auto; padding: 0 16px; }
  /* Couleur : vignette de la photo à gauche des pastilles */
  .cfg__colors--preview { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; }
  .cfg__preview { display: block; aspect-ratio: 4 / 5; background: var(--photo-bg); overflow: hidden; }
  .cfg__colors--preview .cfg__swatches { gap: 8px; }
  /* L'aside passe sous le configurateur */
  .cfg__aside { position: static; max-width: none; flex-basis: 100%; }

  /* Barre compacte : mini-photo + pièces / étape + bouton */
  .pdbar { padding: 0 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .pdbar__inner { min-height: 60px; padding: 8px; gap: 12px; }
  .pdbar__progress { margin: 8px 8px 0; }
  .pdbar__img { width: 40px; height: 40px; }
  .pdbar__text { display: none; }
  .pdbar__nums { flex: 1; min-width: 0; align-items: flex-start; }
  .pdbar__price { display: none; }
  .pdbar__nums:not(:has(.pdbar__pcs)) .pdbar__price { display: block; } /* fiche sans configurateur : le prix seul */
  .pdbar__pcs { font-size: 14px; font-weight: 600; color: var(--paper); }
  .pdbar__min { display: none; }
  .pdbar__step { display: block; }
  .pdbar__btn { padding: 0 16px; }
}
@media (max-width: 380px) {
  .pds__value { font-size: 15px; }
  .cfg__steps li { width: 62%; }
}