/**
 * Carat — pages.css
 * Sections de page : home (hero, countdown, rails catégories, bespoke, éditorial,
 * témoignages, étapes, presse), listing (facettes + grille), PDP (galerie collante
 * + accordéons), panier, auth, contact, 404.
 * Aucun hex en dur (contrôlé par check_themes).
 */

/* ═══════════════════════ HOME — HERO ═══════════════════════ */
/* Hauteurs d'écran : `--sws-vh` vaut 1vh en rendu normal, mais l'aperçu Studio le
   redéfinit sur une hauteur d'écran plausible. Sans ça, l'iframe étant auto-ajustée à
   la hauteur TOTALE de la page (plusieurs milliers de px), `72vh` saturait le plafond
   et la section paraissait plus haute qu'en réel (mesuré : 740px contre 648px).
   NB : `svh` ne résout pas ce cas — vérifié, il vaut exactement `vh` hors mobile. */
:root { --sws-vh: 1vh; }

.crt-hero {
  position: relative;
  min-height: clamp(52rem, calc(72 * var(--sws-vh)), 74rem);
  display: flex;
  align-items: flex-end;
  background: var(--color-primary) center/cover no-repeat;
  color: var(--color-on-primary);
  overflow: hidden;
}
.crt-hero__slide {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  opacity: 0;
  transition: opacity 900ms ease;
}
.crt-hero__slide.is-active { opacity: 1; }
/* Fond vidéo (unique) + slide vidéo : couvrent la zone, sous le scrim et le contenu. */
.crt-hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; }
.crt-hero__slide--video { background: none; }
.crt-hero__slide-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; }
/* Scrim : garantit le contraste AA du titre/lead quel que soit le visuel du marchand. */
.crt-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(14, 46, 68, .88) 0%, rgba(14, 46, 68, .55) 42%, rgba(14, 46, 68, .22) 100%);
}
.crt-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: var(--space-9) var(--space-8); }
.crt-hero__title {
  margin: 0 0 var(--space-4);
  max-width: 20ch;
  font-size: clamp(3.2rem, 5.4vw, 6.4rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-on-primary);
}
.crt-hero__lead { max-width: 52ch; margin: 0 0 var(--space-6); font-size: 1.7rem; opacity: .94; }
.crt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.crt-hero__dots { position: absolute; z-index: 3; bottom: var(--space-5); inset-inline-end: var(--space-6); display: flex; gap: .8rem; }
.crt-hero__dot { width: 8px; height: 8px; border: 1px solid var(--color-on-primary); background: transparent; }
.crt-hero__dot.is-active { background: var(--color-on-primary); }

/* ═══════════════════════ COUNTDOWN ═══════════════════════ */
.crt-countdown {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-block: 1px solid rgba(255,255,255,.14);
}
.crt-countdown__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
}
.crt-countdown__title { margin: 0 0 .4rem; font-family: var(--font-family-base); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--color-on-primary); }
.crt-countdown__sub { margin: 0; font-size: var(--font-size-xs); opacity: .78; }
.crt-countdown__clock { display: flex; gap: var(--space-5); }
.crt-countdown__unit { text-align: center; min-width: 5rem; }
.crt-countdown__num { display: block; font-family: var(--font-family-base); font-size: 2.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.crt-countdown__lbl { display: block; margin-top: .3rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; opacity: .7; }

/* ═══════════════ RAIL CATÉGORIES (shop by style/shape) ═══════════════ */
.crt-rail { position: relative; }
.crt-rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.crt-rail__title { margin: 0; font-size: clamp(1.8rem, 2.2vw, 2.4rem); text-transform: uppercase; letter-spacing: .06em; }
.crt-rail__sub { margin: .4rem 0 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.crt-rail__nav { display: flex; gap: .6rem; }
.crt-rail__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  font-size: 1.4rem;
}
.crt-rail__btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

/* Rail : colonnes de largeur bornée — sans max, une catégorie unique occuperait
   toute la largeur et l'aspect-ratio la rendrait démesurément haute. */
.crt-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(18rem, 22vw, 26rem);
  justify-content: start;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.crt-rail__track::-webkit-scrollbar { display: none; }
.crt-rail__track > * { scroll-snap-align: start; }

/* Grille 5 colonnes : les items se répartissent, mais ne s'étirent jamais au-delà
   d'une colonne « normale » quand la boutique a moins de 5 catégories. */
.crt-rail__track--5 {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(0, calc((100% - 4 * var(--space-3)) / 5)));
  justify-content: start;
  overflow: visible;
}

/* Vignette catégorie : image + bandeau terracotta bas */
.crt-cat {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-alt) center/cover no-repeat;
}
.crt-cat__img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.22,.61,.36,1); }
.crt-cat:hover .crt-cat__img { transform: scale(1.06); }

/* Vignette « teintée » : la catégorie n'a pas d'image propre et on est retombé sur un
   packshot produit. Le fond pastel reste comme couleur d'attente derrière l'image, mais
   l'image couvre TOUJOURS tout le bloc (comme la maquette) — pas de packshot contenu au
   centre sur un aplat de couleur. */
.crt-cat--tinted { background: var(--crt-tint, var(--color-surface-alt)); }
.crt-cat--tint1 { --crt-tint: var(--color-tint-1); }
.crt-cat--tint2 { --crt-tint: var(--color-tint-2); }
.crt-cat--tint3 { --crt-tint: var(--color-tint-3); }
.crt-cat--tint4 { --crt-tint: var(--color-tint-4); }
.crt-cat--tint5 { --crt-tint: var(--color-tint-5); }
.crt-cat--tint6 { --crt-tint: var(--color-tint-6); }
.crt-cat--tint7 { --crt-tint: var(--color-tint-7); }
.crt-cat--tint8 { --crt-tint: var(--color-tint-8); }
/* Libellé en surimpression sur l'image (maquette) : pas de bandeau plein, un dégradé
   sombre depuis le bas assure le contraste du texte blanc quelle que soit la photo. */
.crt-cat__label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.4rem var(--space-4) 1.4rem;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  color: #fff;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
}
.crt-cat--tall { aspect-ratio: 3 / 4; }

/* ═══════════════ BANNIÈRE ÉDITORIALE (bespoke / what we do) ═══════════════ */
.crt-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(34rem, calc(46 * var(--sws-vh)), 52rem);
  background: var(--color-accent) center/cover no-repeat;
  color: var(--color-on-accent);
  text-align: center;
}
.crt-banner__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(14, 46, 68, .46); }
/* Vidéo de fond : couvre la section, sous le scrim (z-index 1) et le contenu (2). */
.crt-banner__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; }
.crt-banner__inner { position: relative; z-index: 2; width: 100%; padding-block: var(--space-8); }
/* Panneau de lisibilité : le texte reste lisible sur n'importe quel visuel marchand. */
.crt-banner__panel {
  max-width: 74ch;
  margin-inline: auto;
  padding: var(--space-7) var(--space-6);
  background: rgba(14, 46, 68, .55);
  backdrop-filter: blur(2px);
}
.crt-banner--left .crt-banner__panel { margin-inline: 0; }
.crt-banner__text { max-width: 62ch; margin-inline: auto; font-size: 1.6rem; }
.crt-banner__text em { font-family: var(--font-family-heading); font-size: 1.15em; font-style: italic; }
.crt-banner--left { text-align: start; }
.crt-banner--left .crt-banner__text { margin-inline: 0; }
.crt-banner__title { margin: 0 0 var(--space-4); font-size: clamp(2.4rem, 3.6vw, 3.8rem); text-transform: uppercase; letter-spacing: .05em; color: inherit; }
.crt-banner__cta { margin-top: var(--space-5); }

/* ═══════════════ SPLIT ÉDITORIAL (image / texte) ═══════════════ */
.crt-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.crt-split--reverse .crt-split__media { order: 2; }
.crt-split__media { position: relative; }
.crt-split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.crt-split__duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.crt-split__duo img { aspect-ratio: 3 / 4; }
.crt-split__title { margin: 0 0 var(--space-4); font-size: clamp(2.2rem, 2.8vw, 3rem); text-transform: uppercase; letter-spacing: .05em; }
.crt-split__text { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Titre centré large (« It's time to find the perfect ring ») */
.crt-bigtitle {
  max-width: 26ch;
  margin: 0 auto var(--space-7);
  font-size: clamp(2.6rem, 4.2vw, 4.4rem);
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: center;
  line-height: 1.15;
}

/* ═══════════════ AVIS / TÉMOIGNAGES ═══════════════ */
.crt-reviews { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-8); align-items: center; }
.crt-reviews__stars { display: inline-flex; gap: .3rem; margin-bottom: var(--space-4); }
.crt-reviews__star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--color-success);
  color: var(--color-on-primary);
  font-size: 1.3rem;
}
.crt-reviews__label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.crt-reviews__title { margin: 0 0 var(--space-4); font-size: clamp(2rem, 2.6vw, 2.8rem); text-transform: uppercase; letter-spacing: .05em; }
.crt-reviews__card { background: var(--color-surface-alt); }
.crt-reviews__card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.crt-reviews__quote { padding: var(--space-5); font-size: var(--font-size-sm); }
.crt-reviews__quote strong { display: block; margin-bottom: .6rem; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); }

/* Grille de portraits « They said yes! » */
.crt-wall { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.crt-wall img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ═══════════════ ÉTAPES (how it works) ═══════════════ */
.crt-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
/* `width:100%` explicite pour que le média garde son ratio aussi bien en grille
   qu'en rail (grid à flux colonne, où l'item n'a pas de largeur intrinsèque). */
.crt-step__media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-alt); }
.crt-step__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crt-step__title { margin: var(--space-4) 0 var(--space-2); font-family: var(--font-family-base); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); }
.crt-step__text { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.7; }

/* ═══════════════ PRESSE ═══════════════ */
.crt-press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-8); }
.crt-press img { height: 34px; width: auto; opacity: .6; transition: opacity var(--transition-base); }
.crt-press img:hover { opacity: 1; }

/* ═══════════════════════ LISTING ═══════════════════════ */
.crt-listing__head { padding-block: var(--space-5) var(--space-4); }
.crt-listing__title { margin: 0; font-size: clamp(2.4rem, 3.2vw, 3.4rem); text-transform: uppercase; letter-spacing: .05em; }
.crt-listing__count { margin-inline-start: var(--space-3); font-family: var(--font-family-base); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Puces de sous-catégories (chips Carat) */
.crt-chips { display: flex; flex-wrap: wrap; gap: .8rem; padding-bottom: var(--space-5); }
.crt-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .8rem 1.8rem;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.crt-chip:hover, .crt-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

.crt-listing { display: grid; grid-template-columns: 24rem 1fr; gap: var(--space-7); align-items: start; }
.crt-listing__sidebar { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.crt-listing__sidebar-head {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-muted);
}
.crt-listing__topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}
.crt-listing__showing { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; }
.crt-listing__tools { display: flex; align-items: center; gap: var(--space-3); }
.crt-listing__sort { width: auto; min-width: 20rem; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .06em; }
.crt-listing__more { padding-block: var(--space-7); text-align: center; }

/* Facettes (rendues par sws-listing.js dans #swsFacets) */
.crt-facets .filterbox__group, .crt-facets > div { border-bottom: 1px solid var(--color-border); }
.crt-facets h4, .crt-facets .filter-title {
  margin: 0;
  padding: 1.5rem 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
}
.crt-facets label { display: flex; align-items: center; gap: .8rem; padding-block: .5rem; font-size: var(--font-size-sm); color: var(--color-text-muted); cursor: pointer; }
.crt-facets label:hover { color: var(--color-text); }
.crt-facets input[type="checkbox"], .crt-facets input[type="radio"] { width: auto; margin: 0; }

/* Bouton filtres mobile */
.crt-filter-toggle { display: none; }

/* ═══════════════════════ PDP ═══════════════════════ */
.crt-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; padding-top: var(--space-5); }

.crt-pdp__gallery { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-3); position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.crt-pdp__thumbs { display: flex; flex-direction: column; gap: var(--space-3); }
.crt-gallery__thumb { width: 8rem; aspect-ratio: 1/1; overflow: hidden; border: 1px solid transparent; background: var(--color-surface-alt); padding: 0; }
.crt-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.crt-gallery__thumb.is-active { border-color: var(--color-primary); }
.crt-pdp__stage { position: relative; background: var(--color-surface-alt); aspect-ratio: 1/1; overflow: hidden; }
.crt-gallery__stage, .crt-gallery__stage img { width: 100%; height: 100%; object-fit: cover; }
.crt-pdp__stage-empty { width: 100%; height: 100%; background: var(--color-surface-alt); }
.crt-pdp__badge { position: absolute; top: var(--space-4); inset-inline-start: var(--space-4); z-index: 2; }

.crt-pdp__info { padding-top: var(--space-2); }
.crt-pdp__eyebrow { display: inline-block; margin-bottom: var(--space-3); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--color-text-muted); }
.crt-pdp__title { margin: 0 0 var(--space-4); font-size: clamp(2.2rem, 3vw, 3.2rem); text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; }
.crt-pdp__price { margin-bottom: var(--space-6); }
.crt-pdp__price .sws-price__now { font-family: var(--font-family-base); font-weight: var(--font-weight-base); }

/* Champs variantes façon Carat : label capitale + select pleine largeur */
.crt-pdp__form .mnx-optform { display: block; }
.crt-pdp__form .mnx-optform__fields { display: flex; flex-direction: column; gap: var(--space-4); }
.crt-pdp__form label,
.crt-pdp__form .mnx-optform label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-muted);
}
.crt-pdp__note { margin: -.6rem 0 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }

.crt-pdp__meta { margin-block: var(--space-4); }
.crt-pdp__stock { display: inline-flex; align-items: center; gap: .8rem; font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; }
.crt-pdp__stock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); }

.crt-pdp__buy { display: flex; gap: var(--space-3); margin-block: var(--space-5); }
.crt-pdp__add { flex: 1 1 auto; justify-content: space-between; }
.crt-pdp__buynow { margin-bottom: var(--space-5); }
.crt-pdp__ask { margin-bottom: var(--space-3); }

.crt-pdp__pickup { display: flex; gap: var(--space-3); padding-block: var(--space-4); font-size: var(--font-size-xs); color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.crt-pdp__pickup i { color: var(--color-success); }

.crt-pdp__actions { display: flex; flex-wrap: wrap; gap: var(--space-5); padding-block: var(--space-4); }
.crt-pdp__action { display: inline-flex; align-items: center; gap: .7rem; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.crt-pdp__action:hover { color: var(--color-accent); }
.crt-pdp__action.is-active, .crt-pdp__action.full { color: var(--color-accent); }

.crt-pdp__share { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); }
.crt-pdp__share-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--color-text-muted); }

.crt-pdp__reassurance { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }

/* Prose (description) */
.crt-prose { font-size: var(--font-size-sm); line-height: 1.8; color: var(--color-text-muted); }
.crt-prose h2, .crt-prose h3 { color: var(--color-text); }
.crt-prose img { margin-block: var(--space-4); }
.crt-prose ul { padding-inline-start: 1.8rem; }
.crt-prose li { margin-bottom: .5rem; }

.crt-specs__group { margin-top: var(--space-4); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); }
.crt-specs__list { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.crt-specs__list li { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: .9rem; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.crt-specs__k { color: var(--color-text-muted); }

.crt-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-5); }
.crt-tag { padding: .5rem 1.2rem; background: var(--color-surface-alt); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.crt-tag:hover { background: var(--color-primary); color: var(--color-on-primary); }

.crt-storerating { display: flex; align-items: center; gap: var(--space-4); }
.crt-storerating__score { font-family: var(--font-family-heading); font-size: 3rem; color: var(--color-warning); }
.crt-storerating__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Bandeau CTA « Ask our team » */
.crt-ask { background: var(--color-primary); color: var(--color-on-primary); text-align: center; }
.crt-ask__title { margin: 0 0 var(--space-4); font-size: clamp(2.4rem, 3.6vw, 3.6rem); text-transform: uppercase; letter-spacing: .05em; color: var(--color-on-primary); }
.crt-ask__text { max-width: 70ch; margin: 0 auto var(--space-5); font-size: var(--font-size-sm); opacity: .9; }

/* ═══════════════════════ PANIER ═══════════════════════ */
.crt-cart { display: grid; grid-template-columns: 1.6fr .8fr; gap: var(--space-7); align-items: start; }
.crt-cart__title { margin-bottom: var(--space-5); font-size: clamp(2.4rem, 3.2vw, 3.2rem); text-transform: uppercase; letter-spacing: .05em; }

.crt-cartline { display: grid; grid-template-columns: 10rem 1fr auto; gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
.crt-cartline__media { aspect-ratio: 1/1; background: var(--color-surface-alt); overflow: hidden; }
.crt-cartline__media img { width: 100%; height: 100%; object-fit: cover; }
.crt-cartline__title { margin: 0 0 .6rem; font-family: var(--font-family-base); font-size: var(--font-size-sm); }
.crt-cartline__opts { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.crt-cartline__opts span { display: block; }
.crt-cartline__end { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.crt-cartline__price { font-size: var(--font-size-sm); }
.crt-cartline__remove { color: var(--color-text-muted); font-size: 1.5rem; }
.crt-cartline__remove:hover { color: var(--color-danger); }

.crt-summary { position: sticky; top: calc(var(--header-height) + var(--space-4)); padding: var(--space-6); background: var(--color-surface-alt); }
.crt-summary__title { margin: 0 0 var(--space-5); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); }
.crt-summary__row { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: .8rem; font-size: var(--font-size-sm); }
.crt-summary__row--total { margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border-strong); font-size: 1.8rem; }
.crt-summary__note { margin-top: var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; }
.crt-summary__actions { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }

/* Ligne panier dans le drawer */
.crt-drawerline { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.crt-drawerline__media { aspect-ratio: 1/1; background: var(--color-surface-alt); overflow: hidden; }
.crt-drawerline__media img { width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════════════ VUE RAPIDE (modale) ═══════════════════════ */
/* Contrat base.js : #quickproductview rempli en AJAX par /product/quickview. */
.crt-quickmodal .modal-dialog { width: min(96rem, calc(100vw - 3.2rem)); margin-top: 6vh; }
.crt-quickmodal .modal-content { border: 0; }
.crt-quickmodal .modal-body { padding: 0; }

.crt-quick { display: grid; grid-template-columns: 1fr 1fr; }
.crt-quick__media { position: relative; aspect-ratio: 1/1; background: var(--color-surface-alt); overflow: hidden; }
.crt-quick__media img { width: 100%; height: 100%; object-fit: cover; }
.crt-quick__badge { position: absolute; top: var(--space-4); inset-inline-start: var(--space-4); z-index: 2; }
.crt-quick__info { padding: var(--space-7) var(--space-6); max-height: 82vh; overflow-y: auto; }
.crt-quick__eyebrow { display: inline-block; margin-bottom: var(--space-2); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--color-text-muted); }
.crt-quick__title { margin: 0 0 var(--space-3); font-size: 2.4rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.25; }
.crt-quick__price { margin-bottom: var(--space-5); }
.crt-quick__price .sws-price__now { font-family: var(--font-family-base); font-size: 1.8rem; font-weight: var(--font-weight-base); }
.crt-quick__form .mnx-optform__fields { display: flex; flex-direction: column; gap: var(--space-4); }
.crt-quick__form label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--color-text-muted); }
.crt-quick__buy { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.crt-quick__add { flex: 1 1 auto; }
.crt-quick__excerpt { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.crt-quick__link { display: inline-block; margin-top: var(--space-4); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); border-bottom: 1px solid currentColor; padding-bottom: .3rem; }
.crt-quick__close {
  position: absolute; top: var(--space-3); inset-inline-end: var(--space-3); z-index: 3;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface); color: var(--color-text); font-size: 1.8rem;
}
.crt-quick__close:hover { background: var(--color-primary); color: var(--color-on-primary); }

@media (max-width: 767px) {
  .crt-quick { grid-template-columns: 1fr; }
  .crt-quick__info { padding: var(--space-5) var(--space-4); max-height: none; }
  .crt-quickmodal .modal-dialog { margin: 1.6rem auto; }
}

/* ═══════════════════════ PARALLAXE (option de bloc) ═══════════════════════ */
/* Couche de fond translatée au scroll par theme.js (transform uniquement).
   `background-attachment: fixed` est volontairement évité : cassé sur iOS et
   coûteux en repaint. La couche est sur-dimensionnée en hauteur pour qu'aucun bord
   n'apparaisse aux extrêmes du déplacement. */
/* Débord vertical : la couche est translatée au scroll, elle doit rester plus haute
   que sa section pour qu'aucun bord n'apparaisse aux extrêmes du déplacement.
   -12%/124% était trop juste (bande de fond visible en haut quand le décalage est
   maximal) ; on dimensionne au double de l'amplitude possible. */
.crt-px {
  position: absolute;
  inset-inline: 0;
  top: -30%;
  height: 160%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}
.crt-banner--px, .crt-hero--px { position: relative; overflow: hidden; background-image: none !important; }
/* Empilement : couche image (0) → voile de contraste (1) → contenu (2).
   Le voile doit rester SOUS le texte, sinon il l'assombrit au lieu de le détacher. */
.crt-banner--px > .crt-banner__scrim,
.crt-hero--px > .crt-hero__scrim { z-index: 1; }
.crt-banner--px > .crt-banner__inner,
.crt-hero--px > .crt-hero__inner { position: relative; z-index: 2; }

/* Respect de la préférence système : aucune translation. */
@media (prefers-reduced-motion: reduce) {
  .crt-px { transform: none !important; top: 0; height: 100%; }
}

/* ═══════════════════════ BLOCS V3 (slots d'insertion) ═══════════════════════ */
/* Wrapper de zone : toujours présent (même vide) pour que le Studio affiche ses
   hotspots d'édition.
   NE PAS utiliser `display:none` sur le slot vide : l'élément sortirait du flux et
   se retrouverait à top:0 — les 6 slots s'empileraient alors au même endroit, et le
   Studio n'afficherait qu'un seul « Ajouter un bloc » (mesuré : 6 slots à top=0).
   On le garde donc dans le flux, simplement sans hauteur ni marge. L'overlay Studio
   pose `.sws-slot-overlay` (+ min-height) et le rend visible à sa vraie position. */
.crt-slot:empty {
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.crt-slot:empty.sws-slot-overlay { height: auto; overflow: visible; }

/* Slot en repli : il ENVELOPPE la section statique du thème (elle reste visible et
   inchangée). Le wrapper doit être neutre en rendu public — c'est l'overlay Studio
   qui le matérialise et y pose le bouton « Modifier cette section ». */
.crt-slot--static { display: contents; }
.crt-slot--static.sws-slot-overlay { display: block; }
.ts-block-insert + .ts-block-insert { margin-top: 0; }

/* Rendu générique CORE (front/theme/_common/blocks/section.tpl) : stylé par les
   tokens du thème actif — sert de repli quand un thème ne fournit pas ses propres
   blocks/section-*.tpl. */
.sws-block__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.sws-block__split--reverse .sws-block__media { order: 2; }
.sws-block__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sws-block__banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(28rem, calc(38 * var(--sws-vh)), 44rem);
  background: var(--color-surface-alt) center/cover no-repeat;
}
.sws-block__banner-inner { position: relative; z-index: 2; width: 100%; padding: var(--space-7) var(--space-5); }
.sws-block__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: var(--space-5); }
.sws-block__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(22rem, 26vw, 30rem);
  justify-content: start;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sws-block__rail::-webkit-scrollbar { display: none; }
.sws-block__rail > * { scroll-snap-align: start; }
.sws-block__item-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-alt); }
.sws-block__item-media img { width: 100%; height: 100%; object-fit: cover; }
.sws-block__item-title {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
}
.sws-block__item-text { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.7; }

@media (max-width: 991px) {
  .sws-block__split { grid-template-columns: 1fr; gap: var(--space-6); }
  .sws-block__split--reverse .sws-block__media { order: 0; }
}

/* ═══════════════════════ BACK TO TOP ═══════════════════════ */
.crt-to-top {
  position: fixed;
  inset-inline-end: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 1.8rem;
}
.crt-to-top:hover { background: var(--color-accent); color: var(--color-on-accent); }

/* ═══════════════════════ AUTH / CONTACT / 404 ═══════════════════════ */
.crt-auth { padding-block: var(--space-8); }
.crt-auth__card { max-width: 46rem; margin-inline: auto; }
.crt-auth__title { margin: 0 0 var(--space-2); font-size: 2.8rem; text-transform: uppercase; letter-spacing: .05em; }
.crt-auth__sub { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.crt-auth__foot { margin-top: var(--space-5); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.crt-auth__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.crt-auth .form-group { margin-bottom: var(--space-4); }

/* En-tête de page simple (contact, CMS) */
.crt-pagehead { padding-block: var(--space-7); background: var(--color-surface-alt); text-align: center; }
.crt-pagehead__title { margin: 0 0 var(--space-3); font-size: clamp(2.6rem, 3.6vw, 3.6rem); text-transform: uppercase; letter-spacing: .05em; }
.crt-pagehead__intro { max-width: 60ch; margin-inline: auto; font-size: var(--font-size-sm); color: var(--color-text-muted); }

.crt-contact__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-8); align-items: start; }
.crt-contact__info h2 { font-size: 2.2rem; text-transform: uppercase; letter-spacing: .04em; }
.crt-contact__info p { font-size: var(--font-size-sm); }
.crt-contact__captcha { display: flex; align-items: flex-end; gap: var(--space-4); }
.crt-contact__captcha .sws-field { flex: 1 1 auto; margin-bottom: 0; }

.crt-404__text { max-width: 50ch; margin-inline: auto; color: var(--color-text-muted); }

.crt-404 { padding-block: var(--space-9); text-align: center; }
.crt-404__code { font-family: var(--font-family-heading); font-size: clamp(7rem, 16vw, 15rem); line-height: 1; color: var(--color-surface-alt); }
/* Chevauchement volontaire du titre sur le « 404 » en filigrane, mais mesuré : à
   -32px le titre masquait le chiffre. On ne remonte que d'un tiers de sa hauteur. */
.crt-404__title { margin-top: calc(var(--space-4) * -1); position: relative; }

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width: 1100px) {
  .crt-listing { grid-template-columns: 20rem 1fr; gap: var(--space-5); }
  .crt-wall { grid-template-columns: repeat(4, 1fr); }
  .crt-steps { grid-template-columns: repeat(2, 1fr); }
  .crt-rail__track--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
  .crt-pdp { grid-template-columns: 1fr; gap: var(--space-6); }
  .crt-pdp__gallery { position: static; grid-template-columns: 1fr; }
  .crt-pdp__thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .crt-gallery__thumb { width: 7rem; flex: 0 0 auto; }
  .crt-cart { grid-template-columns: 1fr; }
  .crt-summary { position: static; }
  .crt-split, .crt-reviews, .crt-contact__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .crt-split--reverse .crt-split__media { order: 0; }

  /* Facettes en tiroir mobile */
  .crt-listing { grid-template-columns: 1fr; }
  .crt-filter-toggle { display: inline-flex; }
  .crt-listing__sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 210;
    width: min(32rem, 88vw);
    padding: var(--space-5);
    background: var(--color-surface);
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--transition-base), visibility var(--transition-base);
  }
  [dir="rtl"] .crt-listing__sidebar { transform: translateX(100%); }
  .crt-listing__sidebar.is-open { transform: translateX(0); visibility: visible; }
}

@media (max-width: 640px) {
  .crt-hero { min-height: 46rem; }
  /* Boutons hero : côte à côte et dimensionnés au contenu (pas de pleine largeur) */
  .crt-hero__actions { gap: var(--space-2); }
  .crt-hero__actions .sws-btn { flex: 0 1 auto; padding-inline: 1.8rem; font-size: 1.15rem; }
  .crt-countdown__inner { flex-direction: column; align-items: flex-start; }
  .crt-countdown__clock { gap: var(--space-4); }
  .crt-steps { grid-template-columns: 1fr; }
  .crt-rail__track--5 { grid-template-columns: repeat(2, 1fr); }
  .crt-wall { grid-template-columns: repeat(3, 1fr); }
  .crt-press { gap: var(--space-5); }
  .crt-press img { height: 24px; }
  .crt-cartline { grid-template-columns: 8rem 1fr; }
  .crt-cartline__end { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .crt-pdp__buy { flex-wrap: wrap; }
  .crt-pdp__add { width: 100%; }
}