/* ==========================================================================
   IMF - pages Produits (chargée après main.css et blocs.css)
   Maquettes : IMF-desktop-produits, -detendeurs, -detendeur-d249 (gabarit A),
   -produit-E024 (gabarit B), -gamme-raccords et -gamme-integrabloc (gabarit C).

   Sommaire
   1. Hero produit : carte blanche, surtitre + méta, pastilles
   2. Cartes à filet dégradé ×4, cartes secteurs
   3. Catalogue d'une famille : tri, filtres, cartes séries
   4. Configurateur (gabarits A et B) et barre « Votre configuration »
   5. Fiche : bande de caractéristiques, galerie, matériaux, téléchargements, devis
   6. Gammes (gabarit C) : pièces, tableaux de références, tableau dimensionnel,
      repères du panneau exemple
   ========================================================================== */

/* 1. Hero produit
   ========================================================================== */
.page-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 15px;
}

.page-hero__meta {
  font-family: var(--ff-code);
  font-size: 0.75rem;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.62);
}

.page-hero--product .page-hero__lead {
  max-width: 731px;
  color: rgb(255 255 255 / 0.7);
  font-size: var(--fs-hero-lede);
  line-height: 1.55;
  letter-spacing: 0;
}

/* pastilles de caractéristiques (contour blanc, capitales mono) */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.hero-badges li {
  padding: 5px 9px;
  border: 1px solid rgb(255 255 255 / 0.7);
  font-family: var(--ff-code);
  font-size: 0.75rem;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.8);
}

/* visuel : produit détouré sur carte blanche (490 × 375) */
.page-hero__product {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 490px);
  aspect-ratio: 490 / 375;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--c-white);
  justify-self: center;
}

.page-hero__product picture {
  display: contents;
}

.page-hero__product img {
  width: auto;
  max-width: var(--pw, 60%);
  height: auto;
  max-height: var(--ph, 74%);
  object-fit: contain;
}

/* trois produits : celui du centre en avant, les voisins coupés et pâlis */
.page-hero__product-side {
  position: absolute;
  top: 50%;
  height: 42%;
  opacity: 0.6;
  translate: 0 -50%;
}

.page-hero__product-side img {
  width: auto;
  max-width: none;
  height: 100%;
  max-height: none;
}

.page-hero__product-side--left {
  left: -5%;
}

.page-hero__product-side--right {
  right: -14%;
}

/* carrousel du héros (familles, séries) : le produit courant au centre, ses voisins
   coupés et pâlis sur les bords ; défilement par produits.js */
.page-hero__visual-wrap {
  display: grid;
  justify-items: center;
}

.product-carousel {
  display: block;
}

.product-carousel__slide {
  position: absolute;
  inset: 0 0 34px;
  display: grid;
  place-items: center;
  margin: 0;
  transition:
    translate 1s var(--ease-out),
    scale 1s var(--ease-out),
    opacity 0.8s var(--ease-out);
}

.product-carousel__slide img {
  width: auto;
  max-width: min(var(--mw), 64%);
  height: auto;
  max-height: min(var(--mh), 74%);
  object-fit: contain;
}

.product-carousel__slide[data-pos="0"] {
  z-index: 1;
}

.product-carousel__slide[data-pos="1"],
.product-carousel__slide[data-pos="-1"] {
  opacity: 0.6;
  scale: 0.78;
}

.product-carousel__slide[data-pos="1"] {
  translate: 47% 0;
}

.product-carousel__slide[data-pos="-1"] {
  translate: -47% 0;
}

.product-carousel__slide[data-pos="2"],
.product-carousel__slide[data-pos="-2"],
.product-carousel__slide[data-pos="far"] {
  opacity: 0;
  scale: 0.7;
}

.product-carousel__slide[data-pos="2"] {
  translate: 100% 0;
}

.product-carousel__slide[data-pos="-2"] {
  translate: -100% 0;
}

/* hors champ : repositionnée sans animation pour ne pas traverser la carte */
.product-carousel__slide[data-pos="far"] {
  translate: 160% 0;
  transition: none;
}

.product-carousel__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  line-height: 1.55;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-grey-dark);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.product-carousel__slide[data-pos="0"] .product-carousel__caption {
  opacity: 1;
  transition-delay: 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  .product-carousel__slide,
  .product-carousel__caption {
    transition: none;
  }
}

@media (min-width: 56.25em) {
  .page-hero__grid:has(.page-hero__product) {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 40px;
  }
}

/* chiffres clés sur fond clair (panneau exemple) */
.stats--light .stats__item {
  border-left-color: var(--c-grey);
}

.stats--light dt {
  color: var(--c-grey-dark);
  opacity: 1;
}

/* 2. Cartes à filet dégradé ×4 · cartes secteurs
   ========================================================================== */
@media (min-width: 48em) {
  .grad-cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75em) {
  .grad-cards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grad-cards--4 .grad-card {
    min-height: 343px;
  }
}

.blocks > .grad-cards + .btn {
  justify-self: start;
}

.sector-cards {
  display: grid;
  gap: clamp(16px, 12.31px + 0.946vw, 30px);
}

.sector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 256px;
  padding: 30px clamp(22px, 19.89px + 0.541vw, 30px) 18px;
  border: 1px solid var(--c-grey);
  border-radius: 12px;
  background: var(--c-white);
}

.sector-card .tag {
  margin-bottom: 14px;
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sector-card__icon {
  position: absolute;
  top: 19px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-beige);
}

.sector-card__icon::before {
  content: "";
  width: 22px;
  height: 22px;
  background: var(--c-dark);
  -webkit-mask: var(--sector-icon) no-repeat center / contain;
  mask: var(--sector-icon) no-repeat center / contain;
}

.sector-card__icon--hydrogene {
  --sector-icon: url("../svg/secteurs/ico-hydrogene.svg");
}

.sector-card__icon--nucleaire {
  --sector-icon: url("../svg/secteurs/ico-nucleaire.svg");
}

.sector-card__icon--industrie {
  --sector-icon: url("../svg/secteurs/ico-industrie.svg");
}

.sector-card__title {
  padding-right: 64px;
  color: var(--c-ink);
  font-size: var(--fs-title-news);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.sector-card__text {
  max-width: 282px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgb(23 24 56 / 0.75);
}

.sector-card > .link-arrow {
  margin-top: auto;
  padding-top: 24px;
}

@media (min-width: 48em) {
  .sector-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75em) {
  .sector-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 3. Catalogue d'une famille
   ========================================================================== */
.series-head {
  display: grid;
  gap: 24px 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--c-grey);
}

.series-head .section-intro__main {
  padding-top: clamp(0px, -5.3px + 1.35vw, 20px);
}

.series-sort {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: end;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

.series-sort select {
  padding: 7px 34px 7px 13px;
  border: 1px solid var(--c-grey);
  border-radius: 6px;
  background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23171838' stroke-width='1.4'/%3E%3C/svg%3E") right 12px center / 10px 6px no-repeat;
  color: var(--c-dark);
  font: inherit;
  font-family: var(--ff-sans);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-transform: none;
  appearance: none;
  cursor: pointer;
}

.series-sort select:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}

@media (min-width: 56.25em) {
  .series-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* filtres : visibles avec JavaScript seulement (produits.js) */
.series-filters[hidden] {
  display: none;
}

.series-filters {
  display: grid;
  gap: 20px;
  padding: 26px 0 34px;
  color: var(--c-grey-dark);
  font-size: 0.8125rem;
  line-height: 17px;
}

.series-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 40px;
}

.series-filters__label {
  flex: none;
  width: 60px;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 16px;
  text-transform: uppercase;
}

.sf-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sf-field input[type="number"] {
  width: 84px;
  padding: 6px 10px;
  border: 1px solid var(--c-grey-dark);
  border-radius: 5px;
  background: var(--c-white);
  color: var(--c-dark);
  font: inherit;
  font-weight: 600;
  text-align: right;
  -moz-appearance: textfield;
}

.sf-field input[type="number"]::-webkit-outer-spin-button,
.sf-field input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.sf-field input[type="number"]:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 1px;
}

.sf-field--active input[type="number"] {
  border-color: var(--c-red);
  color: var(--c-red);
}

.sf-field--range {
  flex: 1 1 520px;
  flex-wrap: wrap;
  max-width: 845px;
}

/* mobile : libellé au-dessus, curseur et champ sur la ligne suivante */
.sf-field--range > label {
  flex: 1 0 100%;
}

@media (min-width: 48em) {
  .sf-field--range {
    flex-wrap: nowrap;
  }

  .sf-field--range > label {
    flex: none;
  }
}

.sf-range {
  position: relative;
  flex: 1;
  min-width: 200px;
  padding-bottom: 18px;
}

/* curseur logarithmique 0,1 → 1 000 bar */
.sf-range input[type="range"] {
  display: block;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.sf-range input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-red));
}

.sf-range input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-red));
}

.sf-range input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 2px solid var(--c-dark);
  border-radius: 50%;
  background: var(--c-white);
  appearance: none;
}

.sf-range input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--c-dark);
  border-radius: 50%;
  background: var(--c-white);
}

.sf-range:not(.is-set) input[type="range"]::-webkit-slider-thumb {
  border-color: var(--c-grey-dark);
}

.sf-range input[type="range"]:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 4px;
}

.sf-range__scale {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-code);
  font-size: 0.5625rem;
  line-height: 15.5px;
  letter-spacing: 0.15em;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.chip-group legend,
.chip-group__label {
  float: left;
  margin-right: 4px;
  padding: 0;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--c-grey);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-dark);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.4;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) linear,
    border-color var(--dur-fast) linear,
    color var(--dur-fast) linear;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip[aria-pressed="true"],
.chip:has(:checked) {
  border-color: var(--c-dark);
  background: var(--c-dark);
  color: var(--c-white);
}

.chip:has(:focus-visible),
.chip:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}

@media (hover: hover) {
  .chip:hover {
    border-color: var(--c-dark);
  }
}

@media (pointer: coarse) {
  .chip {
    padding-block: 9px;
  }
}

.sf-clear {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-left: auto;
  color: var(--c-grey-dark);
  font: inherit;
}

.sf-clear .icon {
  width: 12px;
  height: 12px;
}

@media (hover: hover) {
  .sf-clear:hover {
    color: var(--c-dark);
  }
}

.series-count {
  margin-bottom: 24px;
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

/* cartes séries */
.series-grid {
  display: grid;
  gap: 30px;
}

.series-grid > li[hidden] {
  display: none;
}

.series-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 19px;
  height: 100%;
  padding: 25px;
  border-radius: 12px;
  background: var(--c-white);
  transition: box-shadow var(--dur) var(--ease-out);
}

.series-card--bordered {
  border: 1px solid var(--c-grey);
}

.series-card__name {
  padding-left: 20px;
  border-left: 4px solid var(--c-red);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 17px;
  text-transform: uppercase;
}

.series-card__media {
  display: grid;
  place-items: center;
  height: 149px;
  padding: 12px;
  border-radius: 8px;
  background: var(--c-beige);
}

.series-card__media img {
  width: auto;
  max-width: 186px;
  height: auto;
  max-height: 120px;
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-out);
}

.series-card__title {
  font-size: var(--fs-title-card);
  font-weight: 500;
  line-height: 1.37;
  letter-spacing: -0.05em;
}

.series-card__title a {
  background: var(--u-hover) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out);
}

.series-card__text {
  margin-top: -5px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(23 24 56 / 0.75);
}

.series-card__specs {
  display: grid;
  gap: 7px;
  padding-top: 13px;
  border-top: 1px solid var(--c-grey);
  font-size: 0.6875rem;
  line-height: 15.5px;
}

.series-card__specs div {
  display: flex;
  gap: 4px;
}

.series-card__specs dt {
  color: var(--c-grey-dark);
}

.series-card__specs dt::after {
  content: " :";
}

.series-card__specs dd {
  font-weight: 500;
}

.series-card > .btn {
  align-self: flex-start;
  margin-top: auto;
}

@media (hover: hover) {
  .series-card:not(.series-card--custom):hover {
    box-shadow: 0 24px 50px -24px rgb(10 14 42 / 0.25);
  }

  .series-card:hover .series-card__media img {
    transform: scale(1.06);
  }

  .series-card:hover .series-card__title a {
    background-size: 100% 1px;
  }
}

.series-card__title a:focus-visible {
  background-size: 100% 1px;
}

/* carte « sur mesure » : dernière de la grille */
.series-card--custom {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  justify-content: flex-end;
  min-height: 420px;
  background: var(--c-navy) url("../img/decor/glow-hero.webp") 70% 60% / 260% no-repeat;
  background-image: image-set(
    url("../img/decor/glow-hero.avif") type("image/avif"),
    url("../img/decor/glow-hero.webp") type("image/webp")
  );
  color: var(--c-white);
}

.series-card--custom {
  padding-top: clamp(80px, 68.41px + 2.973vw, 124px);
}

.series-card--custom .series-card__kicker {
  position: absolute;
  top: 26px;
  left: 28px;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-red);
}

.series-card--custom .series-card__title {
  font-size: clamp(1.75rem, 1.684rem + 0.27vw, 2rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.series-card--custom .series-card__text {
  margin: 0 0 auto;
  color: rgb(255 255 255 / 0.8);
}

.series-card--custom > .btn {
  margin-top: 40px;
}

.series-empty {
  padding: 32px;
  border-radius: 12px;
  background: var(--c-white);
  color: var(--c-grey-dark);
  text-align: center;
}

.series-empty[hidden] {
  display: none;
}

@media (min-width: 37.5em) {
  .series-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .series-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 87.5em) {
  .series-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .series-card {
    min-height: 598px;
  }
}

/* 4. Configurateur (gabarits A, B) · barre « Votre configuration »
   ========================================================================== */
.config {
  display: grid;
  gap: 20px;
  padding: clamp(20px, 12.62px + 1.892vw, 48px) clamp(16px, 7.57px + 2.162vw, 48px) clamp(24px, 17.67px + 1.622vw, 48px);
  border-radius: var(--radius-card);
  background: var(--c-white);
}

.config__legend {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  color: var(--c-grey-dark);
  font-size: 0.875rem;
  line-height: 1.4;
}

.config__legend::before {
  content: "";
  order: 1;
  width: 74px;
  height: 3px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-red));
}

.config__legend span:last-child {
  order: 2;
}

.config__options {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* grille commune à l'en-tête et aux lignes */
.config__head,
.config__row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  grid-template-areas:
    "code label select"
    "track track track";
  align-items: center;
  gap: 8px 16px;
  padding: 10px 12px;
}

.config__head {
  grid-template-areas: "code label select";
  padding-block: 0 12px;
  border-bottom: 1px solid var(--c-beige-dark);
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

.config__head .config__label {
  font-family: var(--ff-sans);
  font-size: 1rem;
  text-transform: none;
}

.config__scale {
  display: none;
  justify-content: space-between;
  font-family: var(--ff-code);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.config__row {
  position: relative;
  border-bottom: 1px solid var(--c-beige-dark);
  cursor: pointer;
  transition: background-color var(--dur-fast) linear;
}

.config__row input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.config__code {
  grid-area: code;
  justify-self: start;
  min-width: 27px;
  padding: 3px 6px;
  border: 1px solid var(--c-dark);
  border-radius: 3px;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 1;
  text-align: center;
}

.config__label {
  grid-area: label;
  display: grid;
  gap: 2px;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--c-grey-dark);
}

.config__label strong {
  color: var(--c-dark);
  font-size: 0.9375rem;
  font-weight: 600;
}

.config__track {
  position: relative;
  grid-area: track;
  height: 14px;
  background: #f0f0f5;
}

/* barre de la plage : dégradé à l'échelle de toute la piste, découpé de --from à --to */
.config__bar {
  position: absolute;
  inset: 2px 0;
  background: linear-gradient(90deg, var(--c-blue) 0%, #6b3fd8 45%, var(--c-red) 100%);
  clip-path: inset(0 calc(100% - var(--to)) 0 var(--from));
}

.config__select {
  grid-area: select;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--c-grey-dark);
  white-space: nowrap;
}

.config__select::after {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.config__select-on {
  display: none;
}

.config__row:has(:checked) {
  background: rgb(255 74 74 / 0.08);
}

.config__row:has(:checked) .config__code {
  border-color: var(--c-red);
  background: var(--c-red);
  color: var(--c-white);
}

.config__row:has(:checked) .config__select {
  color: var(--c-red);
}

.config__row:has(:checked) .config__select::after {
  background: currentColor;
}

.config__row:has(:checked) .config__select-off {
  display: none;
}

.config__row:has(:checked) .config__select-on {
  display: inline;
}

.config__row:has(:focus-visible) {
  outline: 2px solid var(--c-red);
  outline-offset: -2px;
}

@media (hover: hover) {
  .config__row:not(:has(:checked)):hover {
    background: var(--c-beige);
  }
}

@media (min-width: 64em) {
  .config__head,
  .config__row {
    grid-template-columns: 54px minmax(0, 300fr) minmax(0, 620fr) 150px;
    grid-template-areas: "code label track select";
    column-gap: 22px;
  }

  .config__head {
    grid-template-areas: "code label scale select";
  }

  .config__scale {
    display: flex;
    grid-area: scale;
  }

  .config__select {
    justify-self: end;
  }
}

/* barre « Votre configuration » (gabarits A, B, C) */
.config-bar {
  display: grid;
  gap: 18px 32px;
  padding: clamp(20px, 17.89px + 0.541vw, 28px) clamp(20px, 17.89px + 0.541vw, 26px);
  border-radius: 12px;
  background: var(--c-navy);
  color: var(--c-white);
}

.config-bar__label {
  margin-bottom: 6px;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-red);
}

.config-bar__ref {
  font-size: clamp(1.5rem, 1.434rem + 0.27vw, 1.75rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.config-bar__detail {
  display: grid;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.config-bar__toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.config-bar__toggle legend {
  float: left;
  margin-right: 8px;
  padding: 0;
  font-family: var(--ff-code);
  font-size: 0.5625rem;
  line-height: 16px;
  text-transform: uppercase;
}

.config-bar .chip {
  border-color: rgb(255 255 255 / 0.8);
  background: transparent;
  color: var(--c-white);
  font-size: 0.8125rem;
}

.config-bar .chip:has(:checked) {
  border-color: var(--c-white);
  background: var(--c-white);
  color: var(--c-dark);
}

.config-bar > .btn {
  justify-self: start;
}

.config-note {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--c-grey-dark);
}

@media (min-width: 64em) {
  .config-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .config-bar > .btn {
    justify-self: end;
  }
}

/* 5. Fiche produit
   ========================================================================== */

/* bande de caractéristiques (filet dégradé en tête) */
.spec-strip {
  display: grid;
  gap: 24px 30px;
}

.spec-strip__item {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-top: 18px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-red)) 0 0 / 100% 2px no-repeat;
}

.spec-strip__label {
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--c-red);
}

.spec-strip__value {
  font-size: var(--fs-title-card);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* variante « atouts » : titre + texte */
.spec-strip__title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.spec-strip__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-grey-dark);
}

@media (min-width: 48em) {
  .spec-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75em) {
  .spec-strip {
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  }
}

/* deux colonnes : galerie | caractéristiques + téléchargements */
.product-detail {
  display: grid;
  gap: 48px clamp(40px, 26.84px + 3.378vw, 80px);
  align-items: start;
}

.product-detail__main {
  display: grid;
  gap: clamp(48px, 37.46px + 2.703vw, 88px);
}

.product-detail__side {
  display: grid;
  gap: clamp(40px, 33.67px + 1.622vw, 64px);
}

@media (min-width: 64em) {
  .product-detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .product-detail--gallery-right > :first-child {
    order: 2;
  }
}

/* galerie à onglets (Vue 3D · Photos · Schéma) */
.media-viewer {
  display: grid;
  gap: 18px;
}

.media-viewer__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 36px;
}

.media-viewer__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  border-bottom: 1px solid transparent;
  color: var(--c-grey-dark);
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}

.media-viewer__tab span {
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--c-grey-dark);
  color: var(--c-white);
  font-size: 0.5625rem;
  letter-spacing: 0;
}

.media-viewer__tab[aria-selected="true"] {
  border-bottom-color: var(--c-dark);
  color: var(--c-dark);
}

.media-viewer__tab[aria-selected="true"] span {
  background: var(--c-red);
}

@media (hover: hover) {
  .media-viewer__tab:hover {
    color: var(--c-dark);
  }
}

.media-viewer__panel[hidden] {
  display: none;
}

.media-viewer__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 727 / 734;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--c-white) radial-gradient(circle at 50% 45%, rgb(216 216 232 / 0.35), transparent 60%);
}

.media-viewer__stage picture {
  display: contents;
}

.media-viewer__stage img {
  position: absolute;
  inset: 9% 11%;
  width: 78%;
  height: 82%;
  max-width: none;
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-out);
}

.media-viewer__stage--wide img {
  inset: 6% 4%;
  width: 92%;
  height: 88%;
}

/* Schéma coté : légende visible en tête de scène (aussi reprise par la visionneuse plein écran),
   pas de saut de mise en page entre onglets. Le dessin laisse libres la légende (2 lignes sur
   mobile) et l'indication « Cliquer pour agrandir », pour ne masquer aucune cote. Fond blanc
   du dessin fondu dans le dégradé de la scène (multiply) */
.media-viewer__panel--schema {
  position: relative;
}

.media-viewer__stage--schema img {
  inset: max(15%, 64px) 8% auto;
  width: 84%;
  height: calc(100% - max(15%, 64px) - max(7%, 52px));
  mix-blend-mode: multiply;
}

.media-viewer__caption {
  position: absolute;
  top: 20px;
  right: 24px;
  left: 24px;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-grey-dark);
  pointer-events: none;
}

.media-viewer__hint {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--c-beige);
  color: var(--c-grey-dark);
  font-family: var(--ff-code);
  font-size: 0.5625rem;
  line-height: 16px;
  text-transform: uppercase;
}

@media (hover: hover) {
  .media-viewer__stage:hover img {
    transform: scale(1.03);
  }
}

/* caractéristiques : libellé mono | valeurs en pastilles */
.spec-table__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-grey);
}

.spec-table__title {
  font-size: var(--fs-title-news);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.spec-table__ref {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

.spec-table__row {
  display: grid;
  gap: 8px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-grey);
}

.spec-table__row dt {
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--c-dark);
}

.spec-table__row dd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spec-table__row dd span {
  padding: 2px 8px;
  border: 1px solid var(--c-beige-dark);
  border-radius: 3px;
  background: var(--c-white);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-grey-dark);
}

@media (min-width: 37.5em) {
  .spec-table__row {
    grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
    align-items: center;
  }
}

/* téléchargements (B12 « fichier » sur fond blanc) */
.downloads {
  display: grid;
  gap: 16px;
}

.downloads__title {
  font-size: var(--fs-title-news);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.downloads__list {
  display: grid;
  gap: 10px;
  max-width: 420px;
}

.download {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px 14px 14px;
  border-radius: 6px;
  background: var(--c-white);
  transition: box-shadow var(--dur) var(--ease-out);
}

.download .file__type {
  width: 36px;
  height: 36px;
  border-color: var(--c-beige-dark);
  border-radius: 50%;
  background: var(--c-beige);
  font-size: 0.5625rem;
}

.download__meta {
  display: grid;
  flex: 1;
  gap: 2px;
}

.download__name {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

.download__info {
  font-family: var(--ff-code);
  font-size: 0.5625rem;
  line-height: 1.55;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

.download .icon--download {
  color: var(--c-red);
  transition: transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
  .download:hover {
    box-shadow: 0 12px 30px -16px rgb(10 14 42 / 0.3);
  }

  .download:hover .icon--download {
    transform: translateY(2px);
  }
}

.product-disclaimer {
  max-width: 520px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-grey-dark);
}

/* demande de devis */
.quote-request {
  display: grid;
  justify-items: start;
  gap: 20px;
}

.quote-request__title {
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.05em;
}

.quote-request p {
  max-width: 520px;
  font-size: var(--fs-intro);
  line-height: 1.6;
  color: var(--c-grey-dark);
}

.quote-request .btn {
  margin-top: 8px;
}

/* 6. Gammes (gabarit C)
   ========================================================================== */

/* pièces numérotées */
.parts {
  border-top: 1px solid var(--c-grey);
}

.parts li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--c-grey);
  font-size: 0.875rem;
  line-height: 1.45;
}

.parts__pos {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--c-red);
}

.gamme-text {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: clamp(16px, 13.37px + 0.676vw, 28px);
}

.gamme-text > .text {
  max-width: 620px;
}

.gamme-text > .parts {
  width: 100%;
  margin-top: 12px;
}

/* tableaux de références sélectionnables */
.ref-panel {
  display: grid;
  gap: 28px;
  padding: clamp(20px, 12.62px + 1.892vw, 48px) clamp(16px, 7.57px + 2.162vw, 48px);
  border-radius: var(--radius-card);
  background: var(--c-white);
}

.ref-filters {
  display: grid;
  gap: 14px;
}

.ref-filters .chip-group legend {
  width: 110px;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 29px;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

.ref-table {
  overflow-x: auto;
  scrollbar-width: thin;
}

.ref-table:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 4px;
}

.ref-table table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  text-align: left;
}

.ref-table th[scope="col"] {
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--c-beige-dark);
  font-family: var(--ff-code);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--c-grey-dark);
  white-space: nowrap;
}

.ref-table td,
.ref-table tbody th {
  padding: 13px 14px;
  border-bottom: 1px solid var(--c-beige-dark);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--c-grey-dark);
  vertical-align: middle;
}

.ref-table tbody th {
  color: var(--c-dark);
  font-size: 0.9375rem;
  font-weight: 600;
}

.ref-table tbody tr {
  cursor: pointer;
  transition: background-color var(--dur-fast) linear;
}

.ref-table tbody tr[hidden] {
  display: none;
}

.ref-table__code {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--c-dark);
  border-radius: 3px;
  color: var(--c-dark);
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 1;
}

.ref-table__cat {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ref-table__pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 16px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.ref-table__pick input {
  position: absolute;
  opacity: 0;
}

.ref-table__pick::after {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.ref-table__pick:has([type="checkbox"])::after {
  border-radius: 2px;
}

.ref-table__pick-on {
  display: none;
}

.ref-table tr:has(.ref-table__pick :checked) {
  background: rgb(255 74 74 / 0.08);
}

.ref-table tr:has(.ref-table__pick :checked) .ref-table__code {
  border-color: var(--c-red);
  background: var(--c-red);
  color: var(--c-white);
}

.ref-table tr:has(.ref-table__pick :checked) .ref-table__pick {
  color: var(--c-red);
}

.ref-table tr:has(.ref-table__pick :checked) .ref-table__pick::after {
  background: currentColor;
}

.ref-table tr:has(.ref-table__pick :checked) .ref-table__pick-off {
  display: none;
}

.ref-table tr:has(.ref-table__pick :checked) .ref-table__pick-on {
  display: inline;
}

.ref-table__pick:has(:focus-visible) {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}

@media (hover: hover) {
  .ref-table tbody tr:not(:has(:checked)):hover {
    background: var(--c-beige);
  }
}

.ref-empty {
  padding: 24px;
  border-radius: 8px;
  background: var(--c-beige);
  color: var(--c-grey-dark);
  font-size: 0.875rem;
  text-align: center;
}

.ref-empty[hidden] {
  display: none;
}

/* tableau dimensionnel + schéma coté */
.dims {
  display: grid;
  gap: 32px clamp(32px, 15.14px + 4.324vw, 80px);
  align-items: start;
}

.dims__figure {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--c-grey);
  border-radius: var(--radius-card);
}

.dims__figure img {
  width: 100%;
  height: auto;
}

.dims__figure figcaption {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-grey-dark);
}

.dim-table {
  overflow-x: auto;
}

.dim-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: left;
}

.dim-table thead th {
  padding: 12px 14px;
  background: var(--c-dark);
  color: var(--c-white);
  font-family: var(--ff-code);
  font-size: 0.625rem;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}

.dim-table tbody th,
.dim-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-grey);
}

.dim-table tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.dim-table td {
  color: var(--c-grey-dark);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 64em) {
  .dims {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* codes de tubes (dans l'accordéon) */
.code-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 24px;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.4;
}

.code-list b {
  margin-right: 8px;
  font-family: var(--ff-code);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--c-red);
}

/* panneau exemple : repères en deux colonnes */
.markers {
  display: grid;
  gap: 0 40px;
  border-top: 1px solid var(--c-grey);
}

.markers li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-grey);
  font-size: 0.875rem;
  line-height: 1.35;
}

.markers__num {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  color: var(--c-red);
}

.markers__ref {
  font-family: var(--ff-code);
  font-size: 0.625rem;
  color: var(--c-grey-dark);
}

@media (min-width: 37.5em) {
  .markers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(8, auto);
  }
}

/* Compléments */
[data-js-only][hidden] {
  display: none !important;
}

.stats dd.stats__text {
  white-space: normal;
  line-height: 1;
}

/* page Produits : l'aide au choix ouvre la section */
.products--page {
  padding-top: clamp(40px, 33.67px + 1.622vw, 64px);
}

.products-intro {
  margin-top: clamp(48px, 32.19px + 4.054vw, 108px);
  padding-bottom: clamp(32px, 23.57px + 2.162vw, 56px);
}

.series-card__media--generic img {
  opacity: 0.45;
}

/* sur fond blanc, la scène de la galerie garde un contour */
.section:not(.section--beige) .media-viewer__stage {
  border: 1px solid var(--c-grey);
}

/* Modèle 3D (<model-viewer>) : remplit la scène, l'image d'attente a le même cadrage */
.media-viewer__stage--3d {
  cursor: grab;
}

.media-viewer__stage--3d:active {
  cursor: grabbing;
}

.media-viewer__stage model-viewer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--c-red);
  --progress-bar-height: 2px;
}

.media-viewer__stage--3d img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.media-viewer__stage model-viewer:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: -2px;
}

/* commandes du modèle : zoom avant / arrière, plein écran */
.media-viewer__controls {
  position: absolute;
  z-index: 1;
  top: 18px;
  right: 18px;
  display: grid;
  gap: 8px;
}

.media-viewer__controls[hidden],
.media-viewer__ctrl[hidden] {
  display: none;
}

.media-viewer__ctrl {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-beige);
  color: var(--c-dark);
  font-family: var(--ff-mono);
  font-size: 1.125rem;
  line-height: 1;
  transition: background-color var(--dur-fast) linear;
}

@media (hover: hover) {
  .media-viewer__ctrl:hover {
    background: var(--c-beige-dark);
  }
}

.media-viewer__stage--3d:fullscreen {
  border-radius: 0;
  background: var(--c-white);
}

.media-viewer__hint-touch {
  display: none;
}

@media (pointer: coarse) {
  .media-viewer__hint-mouse {
    display: none;
  }

  .media-viewer__hint-touch {
    display: inline;
  }
}

/* configurateur : choix principal facultatif (devis générique) */
.config__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
}

.config__top .config__legend {
  margin-left: auto;
}

.config__clear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--c-grey);
  border-radius: 999px;
  color: var(--c-dark);
  font-size: 0.8125rem;
  line-height: 1.4;
  transition: border-color var(--dur-fast) linear;
}

.config__clear[hidden] {
  display: none;
}

.config__clear .icon {
  width: 10px;
  height: 10px;
}

@media (hover: hover) {
  .config__clear:hover {
    border-color: var(--c-dark);
  }
}

.media-viewer__stage--3d .media-viewer__hint {
  z-index: 1;
  pointer-events: none;
}