/* ==========================================================================
   Gabarits de page
   ========================================================================== */

/* --- Accueil : bannière --------------------------------------------------- */
.ds-hero {
  display: grid;
  overflow: hidden;
  background: var(--ds-rose-50);
  border: 1px solid var(--ds-rose-100);
  border-radius: var(--ds-radius-lg);
}

.ds-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-6) var(--ds-space-5);
}

.ds-hero__eyebrow {
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-bold);
  color: var(--ds-rose-600);
}

.ds-hero__title {
  font-size: var(--ds-fs-3xl);
  font-weight: var(--ds-fw-black);
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.ds-hero__text {
  max-width: 44ch;
  color: var(--ds-text-muted);
}

.ds-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-2);
}

.ds-hero__media {
  aspect-ratio: 16 / 9;
  background: var(--ds-rose-100);
}

.ds-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 48em) {
  .ds-hero { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .ds-hero__content { justify-content: center; padding: var(--ds-space-10); }
  .ds-hero__media { aspect-ratio: auto; min-height: 20rem; }
}

@media (max-width: 23.74em) {
  .ds-hero__actions .ds-btn { width: 100%; }
}

/* --- Accueil : bandeau WhatsApp ------------------------------------------ */
.ds-help {
  display: grid;
  gap: var(--ds-space-4);
  padding: var(--ds-space-6) var(--ds-space-5);
  background: var(--ds-green-50);
  border: 1px solid #cfe8d2;
  border-radius: var(--ds-radius-lg);
}

.ds-help__title { font-size: var(--ds-fs-xl); }
.ds-help__text { margin-top: var(--ds-space-1); color: var(--ds-text-muted); max-width: 52ch; }

@media (min-width: 48em) {
  .ds-help { grid-template-columns: 1fr auto; align-items: center; padding: var(--ds-space-8); }
}

/* Bannière promo secondaire (image + texte séparés : contraste garanti) */
.ds-promo-banner {
  display: grid;
  overflow: hidden;
  margin-bottom: var(--ds-space-4);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}

.ds-promo-banner__media { aspect-ratio: 21 / 9; background: var(--ds-gray-50); }
.ds-promo-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.ds-promo-banner__content { padding: var(--ds-space-5); display: grid; gap: var(--ds-space-2); align-content: center; justify-items: start; }
.ds-promo-banner__title { font-size: var(--ds-fs-xl); }

@media (min-width: 48em) {
  .ds-promo-banner { grid-template-columns: 1fr 1fr; }
  .ds-promo-banner__media { aspect-ratio: auto; min-height: 12rem; }
  .ds-promo-banner__content { padding: var(--ds-space-8); }
}

/* --- Archive produits ---------------------------------------------------- */
.ds-archive-desc { margin-top: var(--ds-space-3); }

.ds-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  margin-block: var(--ds-space-5) var(--ds-space-4);
}

.ds-toolbar__count { color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }

.ds-toolbar__controls {
  display: flex;
  gap: var(--ds-space-2);
  width: 100%;
}

.ds-toolbar__controls > * { flex: 1; }

.ds-toolbar .ds-select { min-height: var(--ds-tap); padding-block: 0; font-size: var(--ds-fs-sm); }

@media (min-width: 48em) {
  .ds-toolbar__controls { width: auto; }
  .ds-toolbar__controls > * { flex: none; }
  .ds-toolbar .ds-select { min-width: 14rem; }
}

.ds-filter-group + .ds-filter-group { margin-top: var(--ds-space-6); }
.ds-filter-group legend { font-weight: var(--ds-fw-bold); color: var(--ds-text-strong); margin-bottom: var(--ds-space-2); padding: 0; }
.ds-filter-group { margin: 0; padding: 0; border: 0; }

.ds-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-3); }

/* --- Fiche produit -------------------------------------------------------- */
.ds-product {
  display: grid;
  gap: var(--ds-space-6);
}

@media (min-width: 64em) {
  .ds-product {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--ds-space-10);
    align-items: start;
  }
  .ds-product__gallery { position: sticky; top: calc(var(--ds-header-h) + 3.5rem); }
}

.ds-gallery__viewport {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  scrollbar-width: none;
}

.ds-gallery__viewport::-webkit-scrollbar { display: none; } /* remplacé par les vignettes + compteur */

.ds-gallery__slide {
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  margin: 0;
}

.ds-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ds-gallery__wrap { position: relative; }

.ds-gallery__counter {
  position: absolute;
  right: var(--ds-space-3);
  bottom: var(--ds-space-3);
  padding: 0.125rem var(--ds-space-2);
  border-radius: var(--ds-radius-pill);
  background: rgb(17 24 39 / 0.75);
  color: var(--ds-white);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-semibold);
}

.ds-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-2);
  display: none;
}

.ds-gallery__nav--prev { left: var(--ds-space-3); }
.ds-gallery__nav--next { right: var(--ds-space-3); }

@media (hover: hover) and (min-width: 48em) {
  .ds-gallery__nav { display: inline-grid; }
}

.ds-gallery__thumbs {
  display: flex;
  gap: var(--ds-space-2);
  margin: var(--ds-space-3) 0 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
}

.ds-gallery__thumb {
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  overflow: hidden;
  flex-shrink: 0;
}

.ds-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ds-gallery__thumb[aria-current="true"] { border-color: var(--ds-rose-500); }

.ds-product__summary > * + * { margin-top: var(--ds-space-4); }

.ds-product__title { font-size: var(--ds-fs-2xl); }

.ds-product__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-3);
  font-size: var(--ds-fs-sm);
  color: var(--ds-text-muted);
}

.ds-product__short { color: var(--ds-text-muted); }
.ds-product__short ul { margin: 0; padding-left: 1.1rem; }

.ds-buy {
  display: grid;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}

.ds-buy__row {
  display: flex;
  flex-wrap: wrap;            /* < 400px : le bouton passe sous la quantité au lieu de se casser sur 3 lignes */
  gap: var(--ds-space-3);
  align-items: stretch;
}

.ds-buy__row .ds-btn { flex: 1 1 12rem; white-space: nowrap; }
.ds-buy__row .ds-qty { flex: 0 0 auto; }

/* Bouton à deux niveaux (libellé + précision) */
.ds-btn__stack { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.25; }
.ds-btn__sub { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); opacity: 0.9; }

.ds-buy__hint { font-size: var(--ds-fs-sm); color: var(--ds-text-muted); }

.ds-buy__or {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  color: var(--ds-text-subtle);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ds-buy__or::before,
.ds-buy__or::after { content: ""; flex: 1; height: 1px; background: var(--ds-border); }

/* Variantes : nuancier en radios (lisible au clavier et par lecteur d'écran) */
.ds-swatches { margin: 0; padding: 0; border: 0; }
.ds-swatches legend { padding: 0; margin-bottom: var(--ds-space-2); font-weight: var(--ds-fw-bold); color: var(--ds-text-strong); font-size: var(--ds-fs-sm); }
.ds-swatches legend output { font-weight: var(--ds-fw-regular); color: var(--ds-text-muted); }

.ds-swatches__list { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }

.ds-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-tap);
  padding: 0 var(--ds-space-3) 0 var(--ds-space-2);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-semibold);
  cursor: pointer;
}

.ds-swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

.ds-swatch__dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid rgb(17 24 39 / 0.15);
}

.ds-swatch:hover { border-color: var(--ds-gray-500); }
.ds-swatch:has(input:checked) { border-color: var(--ds-rose-500); box-shadow: 0 0 0 1px var(--ds-rose-500); background: var(--ds-rose-50); }
.ds-swatch:has(input:focus-visible) { outline: 3px solid var(--ds-focus); outline-offset: 2px; }
.ds-swatch--unavailable { color: var(--ds-gray-600); text-decoration: line-through; }

.ds-swatch--size { padding: 0 var(--ds-space-4); }

.ds-variation-status { font-size: var(--ds-fs-sm); }

/* Barre d'achat collante (mobile/tablette) */
.ds-buybar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--ds-z-bottomnav);
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3) var(--ds-gutter) calc(var(--ds-space-3) + var(--ds-safe-bottom));
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-3);
  transform: translateY(110%);
  transition: transform var(--ds-dur-slow) var(--ds-ease);
  visibility: hidden;
}

.ds-buybar.is-visible { transform: none; visibility: visible; }

.ds-buybar__info { min-width: 0; flex: 1; }
.ds-buybar__title { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-buybar .ds-btn { flex-shrink: 0; }

body.ds-has-buybar .ds-bottomnav { display: none; }
body.ds-has-buybar { padding-bottom: calc(5rem + var(--ds-safe-bottom)); }

@media (min-width: 64em) {
  .ds-buybar { display: none; }
  body.ds-has-buybar { padding-bottom: 0; }
}

.ds-attrs { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm); }
.ds-attrs th,
.ds-attrs td { padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-border); text-align: left; vertical-align: top; }
.ds-attrs th { width: 40%; color: var(--ds-text-muted); font-weight: var(--ds-fw-semibold); }

.ds-product__more { margin-top: var(--ds-section-gap); }

/* --- Panier ------------------------------------------------------------ */
.ds-cart {
  display: grid;
  gap: var(--ds-space-6);
}

@media (min-width: 64em) {
  .ds-cart { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
  .ds-cart__aside { position: sticky; top: calc(var(--ds-header-h) + 4rem); }
}

.ds-cart__lines {
  padding: var(--ds-space-4) var(--ds-space-5);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}

.ds-cart__lines .ds-line:last-child { border-bottom: 0; padding-bottom: 0; }

@media (min-width: 48em) {
  .ds-cart__lines .ds-line { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .ds-cart__lines .ds-line__img { width: 5.5rem; height: 5.5rem; }
}

.ds-cart__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-4);
}

.ds-coupon { display: flex; gap: var(--ds-space-2); margin-top: var(--ds-space-4); }
.ds-coupon .ds-input { min-height: var(--ds-tap); }
.ds-coupon .ds-btn { flex-shrink: 0; }

.ds-cart__lines.is-busy { position: relative; }
.ds-cart__lines.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.6);
}

/* --- Validation de commande --------------------------------------------- */
.ds-checkout {
  display: grid;
  gap: var(--ds-space-6);
}

@media (min-width: 64em) {
  .ds-checkout { grid-template-columns: minmax(0, 1fr) 26rem; align-items: start; }
  .ds-checkout__aside { position: sticky; top: calc(var(--ds-header-h) + 4rem); order: 2; }
}

.ds-panel {
  padding: var(--ds-space-5);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}

.ds-panel + .ds-panel { margin-top: var(--ds-space-4); }

.ds-panel__title {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-4);
  font-size: var(--ds-fs-lg);
}

.ds-step {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--ds-rose-50);
  color: var(--ds-rose-600);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-black);
}

.ds-review-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  min-height: var(--ds-tap-lg);
  padding: var(--ds-space-3) var(--ds-space-4);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  font-weight: var(--ds-fw-semibold);
}

/* Récapitulatif repliable sur mobile uniquement (classe posée par le JS : sans JS il reste ouvert) */
@media (max-width: 63.99em) {
  .ds-js .ds-checkout__aside:not(.is-open) .ds-review-panel { display: none; }
  .ds-checkout__aside.is-open .ds-review-toggle { border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; border-bottom: 0; }
  .ds-checkout__aside.is-open .ds-review-panel { border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg); }
}

@media (min-width: 64em) {
  .ds-review-toggle { display: none; }
}

.ds-error-summary { margin-bottom: var(--ds-space-4); }
.ds-error-summary:focus { outline: 3px solid var(--ds-red-700); outline-offset: 2px; }

.ds-legal { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); }

/* --- Confirmation ------------------------------------------------------- */
.ds-thanks {
  display: grid;
  justify-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-8) var(--ds-space-5);
  text-align: center;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}

.ds-thanks__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--ds-green-50);
  color: var(--ds-green-700);
}

.ds-thanks__icon .ds-icon { width: 2rem; height: 2rem; }

.ds-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--ds-space-3);
  margin: var(--ds-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.ds-order-overview li {
  padding: var(--ds-space-3) var(--ds-space-4);
  background: var(--ds-surface-muted);
  border-radius: var(--ds-radius);
  font-size: var(--ds-fs-sm);
  color: var(--ds-text-muted);
}

.ds-order-overview strong { display: block; color: var(--ds-text-strong); font-size: var(--ds-fs-md); }

/* --- Compte --------------------------------------------------------------- */
.ds-narrow { max-width: 28rem; margin-inline: auto; }

.ds-account {
  display: grid;
  gap: var(--ds-space-6);
}

.ds-account > * { min-width: 0; }

@media (min-width: 64em) {
  .ds-account { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; }
}

.ds-account-nav ul { margin: 0; padding: 0; list-style: none; }

.ds-account-nav a {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  min-height: var(--ds-tap);
  padding: 0 var(--ds-space-3);
  border-radius: var(--ds-radius);
  color: var(--ds-text);
  font-weight: var(--ds-fw-semibold);
  text-decoration: none;
}

.ds-account-nav a:hover { background: var(--ds-surface-muted); }
.ds-account-nav a[aria-current="page"] { background: var(--ds-rose-50); color: var(--ds-rose-600); }

@media (max-width: 63.99em) {
  .ds-account-nav ul { display: flex; gap: var(--ds-space-2); overflow-x: auto; }
  .ds-account-nav a { white-space: nowrap; border: 1px solid var(--ds-border); background: var(--ds-surface); }
}

/* Tableau responsive (commandes) : lignes empilées sur mobile */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm); }
.ds-table th,
.ds-table td { padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-border); text-align: left; }
.ds-table thead th { color: var(--ds-text-muted); font-weight: var(--ds-fw-semibold); }

@media (max-width: 47.99em) {
  .ds-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .ds-table tr { display: block; padding: var(--ds-space-3) 0; border-bottom: 1px solid var(--ds-border); }
  .ds-table td { display: flex; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-1) 0; border: 0; }
  .ds-table td::before { content: attr(data-title); color: var(--ds-text-muted); font-weight: var(--ds-fw-semibold); }
}

/* --- 404 ---------------------------------------------------------------- */
.ds-404__code {
  font-size: clamp(3.5rem, 2rem + 8vw, 6rem);
  font-weight: var(--ds-fw-black);
  line-height: 1;
  color: var(--ds-rose-500);
}

/* --- Galerie d'états --------------------------------------------------- */
.ds-specimen {
  padding: var(--ds-space-5);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}

.ds-specimen + .ds-specimen { margin-top: var(--ds-space-4); }
.ds-specimen__title { font-size: var(--ds-fs-lg); margin-bottom: var(--ds-space-4); }
.ds-specimen__row { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); align-items: center; }
.ds-specimen__row + .ds-specimen__row { margin-top: var(--ds-space-4); }
.ds-specimen__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--ds-grid-gap); margin: 0; padding: 0; list-style: none; }

/* --- Page de remerciement Fast Order (.threevg-dfo-thankyou) --------------
   Remplace les surcharges !important de order-polish.css (complément 1.1.0)
   par une seule carte structurée. */
.ds-thanks-card {
  max-width: 67.5rem;
  margin-inline: auto;
  padding: var(--ds-space-6) var(--ds-space-5);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-1);
}

.ds-thanks-card .ds-thanks__icon { width: 2.75rem; height: 2.75rem; margin-bottom: var(--ds-space-3); }
.ds-thanks-card .ds-thanks__icon .ds-icon { width: 1.5rem; height: 1.5rem; }
.ds-thanks-card__sub { max-width: 60ch; margin-top: var(--ds-space-2); color: var(--ds-text-muted); }
.ds-thanks-card .ds-order-overview { margin-top: var(--ds-space-5); }

.ds-thanks-card__main {
  display: grid;
  gap: var(--ds-space-4);
  margin-top: var(--ds-space-5);
}

.ds-thanks-card__main > * { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.ds-thanks-card__main .ds-panel + .ds-panel { margin-top: 0; }

@media (min-width: 48em) {
  .ds-thanks-card { padding: var(--ds-space-8); }
  .ds-thanks-card__main { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}

.ds-thanks-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-6);
}

@media (max-width: 47.99em) {
  .ds-thanks-card__actions .ds-btn { width: 100%; }
}