/* =========================================================================
   ATLANTIS STRENGTH, Product detail / configurator page (PDP)
   Builds on tokens.css + styles.css (reuses .btn, .eyebrow, .section-title,
   .link-arrow, .lang-switch, .nav__burger + mobile panel, .cta, .footer, .pcard).
   Product area is LIGHT; nav / video / feature sections are dark.
   ========================================================================= */

.pdp-body{ background:#fff; color:var(--atl-ink-1000); }

/* extra button variant used in a dark feature section */
.btn--outline.btn--on-dark{ color:#fff; border-color:rgba(255,255,255,.4); }
.btn--outline.btn--on-dark:hover{ background:#fff; color:var(--atl-ink-1000); border-color:#fff; }

/* =============================== HEADER / NAV ========================== */
.pnav{ position:sticky; top:0; z-index:var(--z-nav); background:#0b0b0c; }
.pnav__top{ border-bottom:1px solid var(--atl-ink-800); }
.pnav__top-inner{ display:flex; align-items:center; gap:26px; height:70px; }
.pnav__logo img{ height:28px; width:auto; display:block; }
.pnav__search{ flex:1; max-width:520px; display:flex; align-items:center; gap:10px;
  background:var(--atl-ink-900); border:1px solid var(--atl-ink-700); padding:0 14px; height:42px; color:var(--atl-ink-400); }
.pnav__search input{ flex:1; background:none; border:0; color:#fff; font:inherit; font-size:14px; }
.pnav__search input::placeholder{ color:var(--atl-ink-400); }
.pnav__search input:focus{ outline:none; }
.pnav__util{ display:flex; align-items:center; gap:18px; margin-left:auto; }
.pnav__quick{ font-family:var(--font-sans); font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--atl-ink-200); white-space:nowrap; }
.pnav__quick:hover{ color:#fff; }
.pnav__icon{ color:var(--atl-ink-200); position:relative; display:inline-flex; transition:color var(--dur-quick) var(--ease-out); }
.pnav__icon:hover{ color:#fff; }
.pnav__badge{ position:absolute; top:-7px; right:-8px; background:var(--accent); color:#fff; font-size:10px; font-weight:700;
  min-width:16px; height:16px; border-radius:999px; display:grid; place-items:center; padding:0 4px; }
.pnav__bottom{ background:#0b0b0c; }
.pnav__bottom-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:48px; border-top:1px solid transparent; }
.pnav__links{ display:flex; align-items:center; gap:26px; }
.pnav__link{ font-family:var(--font-sans); font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--atl-ink-200); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:color var(--dur-quick) var(--ease-out); }
.pnav__link:hover{ color:#fff; }
.pnav__link--accent{ color:var(--atl-red-soft); }
.pnav__link--accent:hover{ color:#fff; }

/* =============================== BREADCRUMB =========================== */
.crumb{ background:#fff; border-bottom:1px solid var(--atl-ink-150); }
.crumb__inner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:52px; padding-block:12px; font-size:13px; }
.crumb a{ color:var(--atl-ink-500); transition:color var(--dur-quick) var(--ease-out); }
.crumb a:hover{ color:var(--atl-ink-1000); }
.crumb__sep{ color:var(--atl-ink-300); }
.crumb__current{ color:var(--atl-ink-1000); font-weight:600; }

/* ========================= PRODUCT + CONFIGURATOR ===================== */
.pdp{ background:#fff; padding-block:clamp(20px,3vw,40px) clamp(48px,6vw,80px); }
.pdp__grid{ display:grid; grid-template-columns:minmax(0,1fr) 460px; gap:clamp(28px,4vw,60px); align-items:start; }

/* Gallery */
.gallery{ position:relative; background:var(--atl-ink-50); aspect-ratio:1/1; display:grid; place-items:center;
  padding:clamp(20px,3vw,48px); border:1px solid var(--atl-ink-150); }
.gallery__img{ max-width:100%; max-height:100%; object-fit:contain;
  transition:opacity var(--dur-base) var(--ease-out); }
.gallery__nav{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border:1px solid var(--atl-ink-200);
  background:#fff; display:grid; place-items:center; color:var(--atl-ink-700); cursor:pointer; transition:.18s var(--ease-out); }
.gallery__nav--prev{ left:14px; } .gallery__nav--next{ right:14px; }
.gallery__nav:hover{ background:var(--atl-ink-1000); color:#fff; border-color:var(--atl-ink-1000); }
.gallery__zoom{ position:absolute; bottom:14px; right:14px; width:42px; height:42px; border:1px solid var(--atl-ink-200);
  background:#fff; display:grid; place-items:center; color:var(--atl-ink-700); cursor:pointer; transition:.18s var(--ease-out); }
.gallery__zoom:hover{ background:var(--atl-ink-1000); color:#fff; border-color:var(--atl-ink-1000); }
.gallery__thumbs{ display:flex; gap:12px; margin-top:14px; }
.gallery__thumb{ width:78px; height:78px; border:1px solid var(--atl-ink-200); background:var(--atl-ink-50); padding:8px; cursor:pointer;
  transition:border-color var(--dur-quick) var(--ease-out); }
.gallery__thumb:hover{ border-color:var(--accent); }
.gallery__thumb.is-active{ border-color:var(--atl-ink-1000); border-width:2px; }
.gallery__thumb img{ width:100%; height:100%; object-fit:contain; }
/* Gallery stays visible while the configurator scrolls beside it (desktop).
   Sticks below the sticky header; releases when the product section ends. */
@media (min-width:1025px){
  .pdp__gallery{ position:sticky; top:88px; align-self:start; }
}
@media (min-width:1081px){
  .pdp__gallery{ top:134px; }
}

/* Configurator */
.config__eyebrow{ font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--atl-ink-500); margin:0 0 12px; }
.config__eyebrow span{ color:var(--atl-ink-300); margin:0 5px; }
.config__title{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; color:var(--atl-ink-1000);
  font-size:clamp(30px,3.4vw,46px); line-height:0.98; letter-spacing:var(--track-tight); margin:0 0 14px; }
.config__intro{ color:var(--atl-ink-600); font-size:15px; line-height:1.55; margin:0 0 14px; max-width:52ch; }
.config__spec{ color:var(--atl-ink-1000); font-size:12px; }

.loadconf{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border:1px solid var(--atl-ink-150); border-left:4px solid var(--accent); padding:15px 18px; margin:24px 0 6px; }
.loadconf__t{ display:block; font-weight:700; font-size:14px; color:var(--atl-ink-1000); }
.loadconf__s{ display:block; font-size:13px; color:var(--accent); margin-top:2px; }
.loadconf__select{ display:inline-flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer;
  font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--atl-ink-1000); }

/* Option groups (collapsible) */
.optgrp{ border-top:1px solid var(--atl-ink-150); }
.optgrp__head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:0; padding:22px 0; text-align:left; cursor:pointer; }
.optgrp__title{ font-family:var(--font-display); font-weight:700; font-size:17px; text-transform:uppercase; color:var(--atl-ink-1000); letter-spacing:.02em; }
.optgrp__meta{ display:inline-flex; align-items:center; gap:12px; }
.optgrp__price{ font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--atl-ink-1000); }
.optgrp__toggle{ width:15px; height:15px; position:relative; flex-shrink:0; }
.optgrp__toggle::before, .optgrp__toggle::after{ content:""; position:absolute; background:var(--atl-ink-1000); }
.optgrp__toggle::before{ left:0; right:0; top:50%; height:2px; transform:translateY(-50%); }
.optgrp__toggle::after{ top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); }
.optgrp.is-open .optgrp__toggle::after{ display:none; }
.optgrp__body{ display:none; padding-bottom:26px; }
.optgrp.is-open .optgrp__body{ display:block; }

.swatchset{ margin-bottom:20px; }
.swatchset:last-child{ margin-bottom:0; }
.swatchset__label{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--atl-ink-600); margin-bottom:12px; flex-wrap:wrap; }
.swatchset__price{ margin-left:auto; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--atl-ink-1000); }
.info{ display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--atl-ink-300);
  font-size:9px; line-height:1; font-style:italic; color:var(--atl-ink-400); font-family:Georgia, 'Times New Roman', serif; cursor:help; }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ width:48px; height:38px; background:var(--c); border:1px solid rgba(0,0,0,.14); padding:0; cursor:pointer; }
.swatch.is-active{ outline:2px solid var(--atl-ink-1000); outline-offset:2px; }
.swatch--preview{ width:22px; height:16px; cursor:default; }
.swatch--preview.swatch{ cursor:default; }
/* When a colour group is expanded, the header preview swatch is redundant */
.optgrp.is-open .swatch--preview{ display:none; }

.opt-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.opt-row--top{ margin-top:22px; }
.opt-row .swatchset__label{ margin-bottom:0; }
.opt-incl{ font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--atl-ink-1000); white-space:nowrap; }

.tiles{ display:flex; gap:12px; }
.tile{ width:56px; height:56px; border:1px solid var(--atl-ink-200); background:var(--atl-ink-50); display:grid; place-items:center; color:var(--atl-ink-500); padding:0; cursor:pointer; }
.tile.is-active{ border-color:var(--atl-ink-1000); border-width:2px; }
.tile--logo{ background:var(--atl-red); }
.tile--logo img{ width:28px; height:auto; }

.upload{ display:inline-flex; align-items:center; gap:10px; background:none; border:1px solid var(--atl-ink-200); padding:12px 18px;
  font-family:var(--font-sans); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--atl-ink-1000); cursor:pointer; transition:border-color var(--dur-quick) var(--ease-out); }
.upload:hover{ border-color:var(--atl-ink-1000); }
.opt-fine{ font-size:12px; color:var(--atl-ink-500); margin:14px 0 0; line-height:1.45; }

.pills{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{ min-width:48px; height:48px; padding:0 16px; border:1px solid var(--atl-ink-200); background:var(--atl-ink-50);
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--atl-ink-1000); cursor:pointer; text-transform:uppercase; }
.pill.is-active{ background:var(--atl-ink-1000); color:#fff; border-color:var(--atl-ink-1000); }
.pill--wide{ padding:0 26px; }

/* Price bar */
.pricebar{ border-top:2px solid var(--atl-ink-1000); margin-top:26px; padding-top:22px; }
.pricebar__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.pricebar__label{ font-size:14px; color:var(--atl-ink-600); }
.pricebar__total{ font-family:var(--font-display); font-weight:800; font-size:30px; color:var(--atl-ink-1000); }
.pricebar__actions{ display:flex; gap:14px; }
.stepper{ display:flex; align-items:center; border:1px solid var(--atl-ink-200); flex-shrink:0; }
.stepper button{ width:44px; height:50px; background:none; border:0; font-size:20px; color:var(--atl-ink-1000); cursor:pointer; }
.stepper button:hover{ background:var(--atl-ink-50); }
.stepper__val{ min-width:34px; text-align:center; font-weight:700; }
.pricebar__add{ flex:1; }
.pricebar__links{ display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.pricebar__links a{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--atl-ink-700); transition:color var(--dur-quick) var(--ease-out); }
.pricebar__links a:hover{ color:var(--atl-ink-1000); }
.pricebar__sep{ color:var(--atl-ink-300); }

/* =========================== DESCRIPTION ============================== */
.desc{ background:#fff; padding-block:clamp(40px,5vw,72px); border-top:1px solid var(--atl-ink-150); }
.desc__grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:clamp(32px,5vw,72px); }
.desc__title{ color:var(--atl-ink-1000); font-size:clamp(22px,2.4vw,32px); margin-bottom:22px; }
.desc__list{ display:flex; flex-direction:column; gap:14px; }
.desc__list li{ position:relative; padding-left:22px; color:var(--atl-ink-700); font-size:15px; line-height:1.55; }
.desc__list li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:9px; background:var(--accent); }
.reslink{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--atl-ink-200); padding:14px 18px;
  font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--atl-ink-1000); transition:border-color var(--dur-quick) var(--ease-out); }
.reslink:hover{ border-color:var(--atl-ink-1000); }

/* =============================== VIDEO ================================ */
.pvideo{ position:relative; min-height:clamp(320px,42vw,560px); background-image:var(--bg); background-size:cover; background-position:center; display:grid; place-items:center; }
.pvideo__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.pvideo__play{ position:relative; width:84px; height:84px; border-radius:50%; background:var(--accent); border:0; color:#fff;
  display:grid; place-items:center; cursor:pointer; padding-left:4px; transition:transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.pvideo__play:hover{ background:var(--atl-red-deep); transform:scale(1.06); }

/* ============================ FEATURE ROWS ============================ */
.pfeat{ background:var(--atl-ink-1000); color:#fff; padding-block:clamp(48px,6vw,96px); }
.pfeat__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.pfeat--reverse .pfeat__media{ order:-1; }
.pfeat__text{ min-width:0; }
.pfeat__text .eyebrow{ margin-bottom:18px; }
.pfeat .section-title{ color:#fff; margin-bottom:20px; font-size:clamp(26px,3vw,44px); }
.pfeat__p{ color:var(--atl-ink-300); font-size:15px; line-height:1.62; margin:0 0 28px; max-width:52ch; }
.pfeat__media{ aspect-ratio:4/3; overflow:hidden; min-width:0; }
.pfeat__media img{ width:100%; height:100%; object-fit:cover; }

/* =============================== RELATED ============================== */
.related{ background:var(--atl-ink-50); padding-block:clamp(48px,6vw,88px); }
.related__title{ color:var(--atl-ink-1000); margin-bottom:36px; }
/* minmax(0,1fr), not 1fr.
   A bare 1fr keeps an automatic MINIMUM of the track's min-content width, so
   one long product name ("Cambered / neutral fat grip pull-up bar") widened its
   column to 534px and pushed the last two cards 176px past the right edge of
   the page. The floor has to be zero for the four columns to share the row. */
.related__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.pcard__title{ overflow-wrap:anywhere; }
.pcard__from{ display:block; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--atl-ink-1000); margin-top:auto; padding-top:14px; }
.related .pcard__body{ min-width:0; }
/* .pcard__from carried the margin-top:auto that pushed the button to the card
   foot. It held a price, so it is gone from every product page; the spacer moves
   here, otherwise buttons sit at uneven heights across a row of cards. */
.related .pcard .btn--dark{ margin-top:auto; }

/* ============================ RESPONSIVE ============================== */
@media (max-width:1080px){
  .related__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1024px){
  .pnav__search, .pnav__bottom, .pnav__quick{ display:none; }
  .pnav__util .lang-switch{ display:none; }
  .nav__burger{ display:flex; }
  .pdp__grid{ grid-template-columns:1fr; }
  .pdp__config{ max-width:640px; }
}
@media (max-width:820px){
  .desc__grid{ grid-template-columns:1fr; gap:32px; }
  .pfeat__grid{ grid-template-columns:1fr; gap:28px; }
  .pfeat--reverse .pfeat__media{ order:0; }
  .pfeat__media{ order:-1; }
  .pfeat .btn{ max-width:100%; white-space:normal; }
}
@media (max-width:620px){
  .related__grid{ grid-template-columns:1fr; }
  .pricebar__total{ font-size:26px; }
  .gallery__thumb{ width:64px; height:64px; }
}

/* ------------------------------- Reduced motion ------------------------- */
@media (prefers-reduced-motion: reduce){
  .gallery__img{ transition:none !important; }
  .gallery__thumb{ transition:none !important; }
  .pvideo__play, .pvideo__play:hover{ transition:none !important; transform:none !important; }
}

/* =========================================================================
   PRODUCT SHEET (generated pages only)
   -------------------------------------------------------------------------
   Everything above this line is shared with the two HAND-BUILT configurator
   pages (produit/extenseur-de-jambes/ and -alt/), whose right-hand column is
   full of swatches, a price bar and a load selector. A square gallery is
   balanced there.

   The 165 GENERATED pages have no configurator, so that same square gallery
   was the whole problem: at a 1320px container the left column is 658px wide,
   which aspect-ratio:1/1 turned into a 658px TALL box. The machine landed at
   the bottom of the screen, the technical facts sat a screen and a half below,
   and the right column, holding only a title and two chips, read as empty.

   So this block is scoped to .pdp-body--fiche and never reaches the hand-built
   pages. It keeps the .gallery hooks (#gal-img, .gallery__thumb) that pdp.js
   binds, and only changes their size and their surroundings.
   ========================================================================= */

/* ------------------------------ Hero ---------------------------------- */
.pdp-body--fiche .pdp{ padding-block:clamp(14px,1.6vw,22px) clamp(36px,4.5vw,64px); }

.sheet__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,480px);
  gap:clamp(26px,3.4vw,52px);
  align-items:start;
}

/* ---- Media column ---- */
.sheet__media{ min-width:0; }
/* Stick the photo under the header while the identity column scrolls.
   Containing block is .sheet__grid, so it releases at the end of <section class="pdp">.
   Two-column sheet only: below 1025px the photo sits above the facts, and
   pinning it would cover them. Header height changes when .pnav collapses. */
@media (min-width:1025px){
  .pdp-body--fiche .sheet__media{
    position:sticky; top:88px; align-self:start;
  }
}
@media (min-width:1081px){
  .pdp-body--fiche .sheet__media{ top:134px; }
}

/* The frame is landscape and CAPPED IN HEIGHT, so the machine is always whole
   and always above the fold. aspect-ratio sets the shape, max-height wins when
   the viewport is short: on a 1080px screen the stage is 443px tall, header,
   breadcrumb and all of the identity column included, the hero fits once. */
.pdp-body--fiche .gallery{
  aspect-ratio:16/11;
  max-height:min(46vh,470px);
  padding:0;
  overflow:hidden;
  background:var(--atl-ink-50);
  border:1px solid var(--atl-ink-150);
}
/* The photo is positioned, not laid out.
   place-items:center inside a grid gives the image an AUTO-height grid area, so
   its max-height:100% has nothing definite to resolve against and computes to
   none: a 1000px shot then spilled straight through the frame and over the
   thumbnails. Absolute insets plus margin:auto give it a containing block with
   a definite size in both axes, so it is centred and contained whatever the
   original's proportions. */
.pdp-body--fiche .gallery__img{
  position:absolute;
  inset:clamp(14px,1.8vw,30px);
  margin:auto;
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  object-fit:contain;
}
.pdp-body--fiche .gallery__nav{ width:38px; height:38px; }
.pdp-body--fiche .gallery__nav--prev{ left:10px; }
.pdp-body--fiche .gallery__nav--next{ right:10px; }

/* A rail, not a row: eight thumbnails must not decide the page width. */
.pdp-body--fiche .gallery__thumbs{
  display:flex; gap:10px; margin-top:12px;
  overflow-x:auto; scrollbar-width:thin; padding-bottom:4px;
  scroll-snap-type:x proximity;
}
/* Sized so a full eight-shot set fits the rail without scrolling at desktop
   width; more than that scrolls rather than widening the column. */
.pdp-body--fiche .gallery__thumb{
  flex:0 0 auto; width:clamp(52px,5.1vw,64px); height:clamp(52px,5.1vw,64px);
  scroll-snap-align:start; padding:6px;
}

/* The official site's own disclaimer, under its own gallery. */
.viewer__note{ margin:10px 0 0; font-size:12px; color:var(--atl-ink-400); line-height:1.4; }

/* ---- Identity column ---- */
.sheet__info{ min-width:0; }

.pdp-body--fiche .config__title{ font-size:clamp(28px,2.6vw,40px); margin:0 0 12px; }
.ident__cat{ margin:0 0 16px; font-size:14px; color:var(--atl-ink-600); }
.ident__cat a{ color:var(--atl-ink-700); border-bottom:1px solid var(--atl-ink-200); }
.ident__cat a:hover{ color:var(--atl-ink-1000); border-bottom-color:var(--atl-ink-1000); }

.ident__flags{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.flag{
  font-family:var(--font-sans); font-weight:700; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; padding:5px 10px; border:1px solid var(--accent); color:var(--accent);
}
.flag--quiet{ border-color:var(--atl-ink-200); color:var(--atl-ink-500); }

/* The lead paragraph. Only 21 products have editorial copy upstream, so the
   column is built to stand up without it: the key figures below carry it. */
.ident__lead{ margin:0 0 18px; font-size:15px; line-height:1.6; color:var(--atl-ink-700); max-width:56ch; }

/* ---- The figures that used to be a screen and a half down ---- */
.keyspec{ border-top:2px solid var(--atl-ink-1000); margin:0 0 20px; }
.keyspec__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-left:1px solid var(--atl-ink-150);
}
.keyspec__item{
  border-right:1px solid var(--atl-ink-150); border-bottom:1px solid var(--atl-ink-150);
  padding:11px 13px; min-width:0;
}
.keyspec__k{
  display:block; font-family:var(--font-sans); font-weight:700; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--atl-ink-500); margin-bottom:5px;
}
.keyspec__v{
  display:block; font-family:var(--font-display); font-weight:700; font-size:19px;
  line-height:1.1; color:var(--atl-ink-1000);
}
.keyspec__alt{ display:block; font-size:12px; color:var(--atl-ink-500); margin-top:3px; }
.keyspec__more{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:12px; }

/* ---- Taxonomy chips, now real links to the category pages ---- */
/* Four groups of one chip each, stacked, ate more column than they earned.
   Paired up, they read as one block of metadata. */
.taxo__set{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 20px; margin-bottom:18px; }
.taxo{ min-width:0; }
.taxo__label{
  display:block; font-family:var(--font-sans); font-weight:700; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--atl-ink-500); margin-bottom:9px;
}
.taxo__list{ display:flex; flex-wrap:wrap; gap:8px; }
.taxo__chip{
  display:inline-flex; align-items:center; height:36px; padding:0 13px;
  border:1px solid var(--atl-ink-200); background:var(--atl-ink-50);
  font-family:var(--font-sans); font-weight:600; font-size:13px; color:var(--atl-ink-1000);
  transition:border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out);
}
a.taxo__chip:hover{ border-color:var(--atl-ink-1000); background:#fff; }

/* ---- Call to action ---- */
.buy{ border-top:1px solid var(--atl-ink-150); padding-top:18px; }
.buy .btn--block{ width:100%; }
/* Le second bouton, "Ajouter a mon projet". En contour : il n'est pas
   l'action principale de la fiche, il est celle qu'on repete de fiche en
   fiche pour se constituer une liste. */
.buy__add{ margin-top:10px; }
.buy__second{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; margin-top:14px; }
.buy__second a{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--atl-ink-700); }
.buy__second a:hover{ color:var(--atl-ink-1000); }

/* ---------------------------- Description ------------------------------ */
.about{ background:#fff; padding-block:clamp(40px,5vw,72px); border-top:1px solid var(--atl-ink-150); }
.about__grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(32px,4.5vw,64px); align-items:start; }
.about__prose p{ color:var(--atl-ink-700); font-size:16px; line-height:1.68; margin:0 0 18px; max-width:66ch; }
.about__prose p:last-child{ margin-bottom:0; }
.about__features{ border-top:2px solid var(--atl-ink-1000); padding-top:20px; }
.about__features .desc__list li{ font-size:14.5px; }
/* No paragraphs upstream: the features become the whole section and spread. */
.about__grid--features-only{ grid-template-columns:1fr; }
.about__grid--features-only .about__features .desc__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 44px; }

/* -------------------------- Specifications ----------------------------- */
.specs{ background:var(--atl-ink-50); padding-block:clamp(40px,5vw,72px); }
.specs__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,4.5vw,64px); align-items:start; }
/* Only one of the two columns has something in it: a table for a product whose
   photograph is not on file, or the reverse. A lone child in a 1fr 1fr grid
   leaves half the band empty, which is the fault this page was fixed for once
   already. It drops to a single column, capped, because a three-column table
   stretched across the full 1320px puts every value an arm's length from its
   label. */
.specs__grid--solo{ grid-template-columns:minmax(0,760px); }
.specs__table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--atl-ink-150); }
.specs__table caption{ caption-side:top; text-align:left; padding:0 0 14px; }
.specs__table th, .specs__table td{ padding:13px 16px; border-bottom:1px solid var(--atl-ink-150); text-align:left; font-size:14px; }
.specs__table tr:last-child th, .specs__table tr:last-child td{ border-bottom:0; }
.specs__table thead th{
  font-family:var(--font-sans); font-weight:700; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--atl-ink-500); background:var(--atl-ink-50);
}
.specs__table tbody th{ font-weight:600; color:var(--atl-ink-1000); width:44%; }
.specs__table tbody td{ color:var(--atl-ink-700); font-variant-numeric:tabular-nums; white-space:nowrap; }
.specs__photo{ margin:0; }
.specs__photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; border:1px solid var(--atl-ink-150); }
.specs__photo figcaption{ margin-top:10px; font-size:12px; color:var(--atl-ink-500); }
.specs__note{ margin:14px 0 0; font-size:12px; color:var(--atl-ink-500); line-height:1.5; }

/* ---------------------------- Resources -------------------------------- */
.resources{ background:#fff; padding-block:clamp(40px,5vw,72px); border-top:1px solid var(--atl-ink-150); }
.resources__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.rescard{
  display:flex; align-items:center; gap:16px; padding:20px;
  border:1px solid var(--atl-ink-200); background:#fff; min-width:0;
  transition:border-color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out);
}
.rescard:hover{ border-color:var(--atl-ink-1000); background:var(--atl-ink-50); }
.rescard__icon{ flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; background:var(--accent); color:#fff; }
.rescard__body{ min-width:0; }
.rescard__title{ display:block; font-family:var(--font-display); font-weight:700; font-size:16px; text-transform:uppercase; color:var(--atl-ink-1000); line-height:1.15; }
.rescard__meta{ display:block; font-size:12px; color:var(--atl-ink-500); margin-top:4px; }

/* ---------------------------- Responsive ------------------------------- */
@media (max-width:1180px){
  .sheet__grid{ grid-template-columns:minmax(0,1fr) minmax(340px,420px); }
  .keyspec__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1024px){
  /* One column. The media leads, the identity follows, nothing is cropped. */
  .sheet__grid{ grid-template-columns:1fr; gap:28px; }
  .sheet__info{ max-width:720px; }
  .pdp-body--fiche .gallery{ aspect-ratio:16/10; max-height:min(52vh,440px); }
  .keyspec__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .resources__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .about__grid, .specs__grid{ grid-template-columns:1fr; gap:32px; }
  .about__grid--features-only .about__features .desc__list{ grid-template-columns:1fr; }
  .specs__photo{ order:-1; }
}
@media (max-width:640px){
  .pdp-body--fiche .gallery{ aspect-ratio:4/3; max-height:min(48vh,360px); }
  .keyspec__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .keyspec__v{ font-size:17px; }
  .resources__grid{ grid-template-columns:1fr; }
  .specs__table th, .specs__table td{ padding:11px 12px; font-size:13px; }
  .specs__table tbody th{ width:40%; }
}
/* Two figures a row survives down to a 360px screen; below that the labels
   ("Starting resistance") wrap to three lines and one column reads better. */
@media (max-width:360px){
  .keyspec__grid{ grid-template-columns:1fr; }
  .taxo__set{ grid-template-columns:1fr; }
}