/* ==========================================================
   LATAFA — Landing page abaya (COD, TikTok/Meta Ads)
   Design éditorial, mobile-first. Polices auto-hébergées.
========================================================== */

/* ---------- Polices auto-hébergées ----------
   Cormorant Garamond : serif d'affichage (axe wght 300–700) — titres,
   prix, mot-symbole latin. C'est le levier principal de montée en gamme.
   Cairo : police variable (axe wght 200–1000) — corps de texte, labels.
   Chaque famille = un seul fichier, sous-ensemble minimal (voir README).

   Le nom arabe لطافة est porté par le logo (images/logo-latafa.webp), donc
   aucune police arabe n'est chargée. Si du texte arabe est ajouté un jour
   dans la page, il faudra réintégrer une police arabe (voir README).
*/
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/cairo-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- Jetons de design ---------- */
:root {
  --sand: #F4F1EC;
  --sand-deep: #EBE5DB;
  --white: #FFFFFF;
  --navy: #1F2A44;
  --gold: #B08D57;
  --burgundy: #7A2E2E;

  --ink: #1F2A44;
  --ink-soft: rgba(31, 42, 68, 0.72);
  --ink-mute: rgba(31, 42, 68, 0.52);
  --hairline: rgba(31, 42, 68, 0.13);
  --hairline-gold: rgba(176, 141, 87, 0.45);

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Cairo', 'Segoe UI', system-ui, sans-serif;

  --radius: 2px;
  --header-h: 72px;
  --sticky-h: 68px;
  --section-y: 72px;
  --ease: cubic-bezier(0.22, 0.68, 0.28, 1);
}

@media (min-width: 900px) {
  :root { --section-y: 120px; --header-h: 88px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit primer sur tout display defini par une classe
   (sinon un bloc en display:grid reste visible malgre hidden). */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  top: 0;
  z-index: 300;
  background: var(--navy);
  color: var(--white);
  padding: 14px 20px;
  font-size: 0.85rem;
}
.skip-link:focus { inset-inline-start: 0; }

/* ---------- Conteneurs et sections ---------- */
.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}
.container--narrow { max-width: 720px; }

.section { padding-block: var(--section-y); }
.section--tinted {
  background: var(--white);
  border-block: 1px solid var(--hairline);
}

.section__head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto clamp(36px, 6vw, 64px);
}
.section__title {
  font-size: clamp(1.9rem, 5.4vw, 2.9rem);
  margin-top: 14px;
}
.section__title::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: var(--gold);
  margin: 22px auto 0;
}
.section__lead {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 0.97rem;
}

/* ---------- Eyebrow (surtitre) ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.eyebrow--gold { color: var(--gold); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 38px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn--primary {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--navy);
  border-color: var(--navy);
}
.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.btn--gold:hover {
  background: var(--white);
  border-color: var(--white);
}
.btn--lg { padding: 19px 44px; }
.btn--block { width: 100%; }

.link-underline {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-gold);
  padding-bottom: 3px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.link-underline:hover { color: var(--navy); border-color: var(--gold); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(244, 241, 236, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  height: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
}
.site-header__icon {
  color: var(--navy);
  display: inline-flex;
  transition: color 0.3s var(--ease);
}
.site-header__icon:hover { color: var(--gold); }

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  color: var(--navy);
  line-height: 1;
}
.brand__mark {
  width: auto;
  height: 46px;
  flex: none;
}
.brand__fr {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-indent: 0.34em;
}

/* ---------- Bandeau de réassurance ---------- */
.trust {
  background: var(--sand-deep);
  border-block: 1px solid var(--hairline);
}
.trust__list {
  list-style: none;
  margin: 0 auto;
  padding: 26px 20px;
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 12px;
}
.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.trust__item svg {
  width: 26px;
  height: 26px;
  color: var(--gold);
}

/* ---------- Galerie ---------- */
.gallery {
  display: grid;
  gap: 44px;
}
.gallery__zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--sand-deep);
  cursor: zoom-in;
  overflow: hidden;
}
/* Ratio verrouillé : aucune photo ne peut décaler la mise en page (CLS) */
#mainProductImage {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.gallery__zoom:hover #mainProductImage { transform: scale(1.03); }
.gallery__zoom-hint {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(244, 241, 236, 0.92);
  color: var(--navy);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
}

/* Une colonne de grille ne doit jamais s'élargir à cause de ses vignettes : avec
   photos + vidéos, la rangée défile horizontalement au lieu de pousser la
   galerie (et la vidéo) hors de l'écran. */
.product__top > * { min-width: 0; }
.gallery__thumbs {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
.thumb {
  flex: none;
  scroll-snap-align: start;
  width: 68px;
  padding: 0;
  border: 1px solid var(--hairline);
  background: var(--sand-deep);
  cursor: pointer;
  transition: border-color 0.3s var(--ease);
}
.thumb img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.thumb.is-active, .thumb:hover { border-color: var(--gold); }

/* ---------- Options (couleur / taille) ---------- */
.gallery__options { display: grid; gap: 34px; align-content: start; }

.option { border: none; margin: 0; padding: 0; }
.option__label {
  display: block;
  padding: 0;
  margin-bottom: 16px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.option__value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--navy);
  margin-left: 6px;
}
.option__help {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--ink-mute);
}

.sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.size-btn {
  min-width: 52px;
  padding: 13px 14px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.size-btn:hover { border-color: var(--navy); color: var(--navy); }
.size-btn.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.option--summary {
  border-top: 1px solid var(--hairline);
  padding-top: 30px;
  display: grid;
  gap: 20px;
  justify-items: start;
}

/* ---------- Disponibilité ---------- */
.availability {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.availability__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.88rem;
}
.availability__name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--navy);
}
.availability__status { color: var(--ink-mute); font-size: 0.82rem; text-align: right; }
.availability__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.availability__dot--ok { background: #4A7C59; }
.availability__dot--low { background: var(--gold); }
.availability__dot--unknown { background: var(--ink-mute); }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 26px; }
.field { display: grid; gap: 8px; }
.field-row { display: grid; gap: 26px; }

.field label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 2px;
  border: none;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.3s var(--ease);
}
.field textarea { resize: vertical; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%),
                    linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 13px) 21px, calc(100% - 8px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

/* Coloris unique : affiché en clair plutôt que dans une liste à un seul choix */
.field__label-static {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field__fixed {
  padding: 12px 2px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-size: 1rem;
}

.form__recap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--navy);
}
.form__recap-price { color: var(--burgundy); }

.form__status {
  text-align: center;
  font-size: 0.88rem;
  min-height: 1.4em;
}
.form__status.is-success { color: #4A7C59; }
.form__status.is-error { color: var(--burgundy); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--navy);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--gold);
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p {
  padding: 0 0 24px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding-block: 64px calc(var(--sticky-h) + 40px);
  font-size: 0.88rem;
}
.site-footer__brand {
  text-align: center;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
/* Variante monochrome claire du logo : le dessin d'origine est en brun
   foncé, presque illisible sur le marine du footer. */
.site-footer__mark {
  width: auto;
  height: 104px;
  margin: 0 auto;
}
.site-footer__brand .brand__fr {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--white);
  display: block;
  margin-top: 6px;
  text-indent: 0.34em;
}
.site-footer__tagline {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
}

.site-footer__cols {
  display: grid;
  gap: 34px;
  padding-block: 40px;
}
.site-footer__col h2,
.site-footer__col h3 {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.site-footer__social {
  list-style: none;
  margin: 36px 0 0;
  padding: 28px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
}
.site-footer__social a {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  transition: color 0.3s var(--ease);
}
.site-footer__social a:hover,
.site-footer__social a:focus-visible { color: var(--gold); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer__col a { text-decoration: none; transition: color 0.3s var(--ease); }
.site-footer__col a:hover { color: var(--gold); }

.site-footer__copy {
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- WhatsApp flottant ---------- */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: calc(var(--sticky-h) + 18px);
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  box-shadow: 0 6px 20px rgba(31, 42, 68, 0.22);
  z-index: 150;
  transition: transform 0.3s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.06); }

/* ---------- Barre CTA sticky ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 140;
  height: var(--sticky-h);
  padding-inline: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(31, 42, 68, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(176, 141, 87, 0.5);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__info { display: grid; gap: 1px; min-width: 0; }
.sticky-cta__name {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Sur les ecrans les plus etroits, le nom du modele passait avant d'etre lu en
   entier. La mention de livraison est deja repetee ailleurs dans la page :
   c'est elle qui cede la place, pas le nom du produit. */
@media (max-width: 419px) {
  .sticky-cta__ship { display: none; }
}
.sticky-cta__price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.1;
  white-space: nowrap;
}
.sticky-cta .btn { padding: 14px 26px; flex: none; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(31, 42, 68, 0.94);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 90vh; }
.lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- Révélation au scroll ----------
   Masqué uniquement si JS est actif (classe .js ajoutée par main.js),
   pour que le contenu reste visible sans JavaScript.
*/
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
/* Deja a l'ecran au chargement : visible d'emblee, sans transition. */
.js [data-reveal].is-instant { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================
   TABLETTE (≥ 640px)
========================================================== */
@media (min-width: 640px) {
  .trust__list { grid-template-columns: repeat(4, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); gap: 44px 36px; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================
   DESKTOP (≥ 900px)
========================================================== */
@media (min-width: 900px) {
  .container { padding-inline: 40px; }

  .gallery {
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(48px, 5vw, 80px);
    align-items: center;
  }
  .option--summary {
    justify-items: stretch;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 28px;
  }

  .features { grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }

  .trust__list { padding-block: 32px; }

  /* La barre sticky devient une pastille centrée, moins intrusive */
  .sticky-cta {
    left: 50%;
    right: auto;
    bottom: 26px;
    width: min(520px, calc(100% - 52px));
    transform: translate(-50%, calc(100% + 26px));
    border: 1px solid rgba(176, 141, 87, 0.5);
    padding-inline: 26px;
  }
  .sticky-cta.is-visible { transform: translate(-50%, 0); }
  .whatsapp-float { right: 26px; bottom: 26px; width: 68px; height: 68px; }

  .brand__mark { height: 58px; }
  .brand__fr { font-size: 1.12rem; }
  .site-footer__mark { height: 128px; }
}

/* ==========================================================
   MINI-SITE — composants ajoutés avec l'architecture 3 pages
========================================================== */

/* ---------- Bandeau d'annonce ---------- */
/* Généré uniquement si l'annonce est active ET non expirée, ou récurrente
   (build-site.py). Le minuteur (si présent) est rempli par js/main.js. */
.announcement {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 10px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.announcement__timer {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 600;
  min-width: 4.5em;
}
.announcement__timer:empty { display: none; }

/* ---------- Navigation ---------- */
.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-self: start;
}
.site-nav__link {
  display: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.site-nav__link:hover { color: var(--gold); }
.site-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-nav__back:hover { color: var(--gold); }

.field__hint { margin: 8px 0 0; font-size: 0.72rem; line-height: 1.5; color: var(--ink-mute); }

/* ---------- Option « ajouter un article » (data/order-bump.json) ---------- */
.bump {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 8px 0 18px;
  padding: 16px;
  border: 1px dashed var(--hairline-gold);
  background: rgba(176, 141, 87, 0.06);
  cursor: pointer;
}
.bump input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--burgundy); }
.bump__text { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.bump__label { font-weight: 600; color: var(--ink); }
.bump__price { color: var(--burgundy); font-weight: 600; font-size: 0.85rem; }
.bump__price s { color: var(--ink-mute); font-weight: 400; margin-inline-start: 6px; }

/* ---------- Guide des tailles : lien + fenêtre ---------- */
.sizes__guide { text-align: center; margin: 18px 0 0; }
.field__link { align-self: flex-start; margin-top: 8px; background: none; border-top: 0; border-inline: 0; cursor: pointer; }
.size-popup__table { width: 100%; margin: 18px 0 0; }
.js-size-calc { margin-top: 24px; }

/* ---------- Notification d'achat récent (js/main.js) ---------- */
.recent-toast {
  position: fixed;
  inset-inline-start: 16px;
  top: calc(var(--header-h) + 56px);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(320px, calc(100vw - 100px));
  padding: 12px 14px 12px 16px;
  background: var(--white);
  border: 1px solid var(--hairline-gold);
  box-shadow: 0 6px 24px rgba(31, 42, 68, 0.12);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.recent-toast.is-visible { opacity: 1; transform: none; }
@media (min-width: 900px) {
  .recent-toast { top: auto; bottom: 24px; }
}
.recent-toast__close {
  flex: none;
  background: none;
  border: 0;
  padding: 2px 6px;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .recent-toast { transition: none; }
}

/* Montant et référence : toujours lus de gauche à droite, même en arabe */
#recapPrice, #recapRef, #recapAmount, .bump__price { direction: ltr; unicode-bidi: isolate; }

/* ---------- Alerte stock bas (js/product.js, données réelles) ---------- */
.low-stock {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--burgundy);
}

/* ---------- Badges de réassurance sous le bouton d'achat ---------- */
.cod-badges {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cod-badges__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
}
.cod-badges__item svg { color: var(--gold); }

/* ---------- Offres spéciales (données : data/offers.json) ---------- */
.offers__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  display: grid;
  gap: 24px;
}
.offer {
  position: relative;
  padding: 40px 28px 32px;
  text-align: center;
  background: var(--sand);
  border: 1px solid var(--hairline-gold);
}
.offer__badge {
  position: absolute;
  top: -12px;
  inset-inline: 0;
  margin-inline: auto;
  width: max-content;
  padding: 5px 16px;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.offer__title { font-size: clamp(1.5rem, 5vw, 2rem); margin: 0; }
.offer__text {
  margin: 14px auto 26px;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.offer__note {
  margin: 18px 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

/* ---------- Hero de l'accueil ----------
   Mobile : photo plein cadre (le tissu, porte), voile degrade, titre/CTA
   poses dessus — toujours visibles sans defiler. Desktop (>=900px) : deux
   colonnes, photo encadree d'un filet dore, texte a cote. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(640px, 86vh);
  display: flex;
  align-items: flex-end;
  background: var(--navy);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* Vidéo d'ouverture : superposée à la photo de garde, qui reste visible tant
   que la lecture n'a pas réellement commencé (classe is-playing, js/main.js). */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 42, 68, 0) 28%, rgba(20, 20, 22, 0.5) 56%, rgba(20, 20, 22, 0.8) 84%, rgba(20, 20, 22, 0.92) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 24px clamp(32px, 7vw, 56px);
  text-align: center;
  color: var(--white);
}
.hero__content .eyebrow--gold { color: var(--gold); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65); }
.hero__title {
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  margin: 14px 0 0;
  color: var(--white);
}
.hero__text {
  margin-top: 14px;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.86);
}
.hero__cta { margin-top: 26px; }

@media (min-width: 900px) {
  .hero {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
    max-width: 1180px;
    margin-inline: auto;
    padding: clamp(56px, 8vw, 96px) 40px;
    background: var(--sand);
  }
  .hero__media {
    position: relative;
    inset: auto;
    order: 2;
    padding: 10px;
    border: 1px solid var(--hairline-gold);
  }
  .hero__video {
    inset: 11px;
    width: calc(100% - 22px);
    height: calc(100% - 22px);
  }
  .hero__media img {
    position: static;
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .hero__veil { display: none; }
  .hero__content {
    position: static;
    order: 1;
    width: auto;
    padding: 0;
    text-align: start;
    color: var(--ink);
  }
  .hero__title { color: var(--ink); }
  .hero__text { color: var(--ink-soft); }
  .hero__cta { margin-top: 32px; }
}

/* ---------- Filtres ---------- */
/* ---------- Filtres ----------
   Sur telephone, les pastilles depliees repoussaient le premier modele tres
   bas dans la page : la visiteuse defilait longtemps avant de voir un seul
   produit. Le panneau est donc ferme par defaut et s'ouvre en tiroir. Chaque
   categorie tient sur une seule ligne qui defile, quel que soit le nombre de
   pastilles. */

.filters-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.filters-open {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.3s var(--ease);
}
.filters-open:hover { border-color: var(--navy); }
.filters-open__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--burgundy);
  color: var(--white);
  font-size: 0.68rem;
  line-height: 1;
}
.filters-open__badge[hidden] { display: none; }

.filters-backdrop {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: rgba(31, 42, 68, 0.42);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.filters-zone.is-open .filters-backdrop { opacity: 1; }

.filters {
  position: fixed;
  z-index: 311;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  background: var(--sand);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -10px 40px rgba(31, 42, 68, 0.18);
  transform: translateY(101%);
  transition: transform 0.28s var(--ease);
  visibility: hidden;
}
.filters-zone.is-open .filters { transform: translateY(0); visibility: visible; }

.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--hairline);
}
.filters__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--navy);
}
.filters__close {
  display: inline-flex;
  padding: 6px;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.filters__close:hover { color: var(--navy); }

.filters__body {
  display: grid;
  gap: 20px;
  padding: 18px 0 20px;
  overflow-y: auto;
}
.filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  background: var(--sand);
}
.filters__apply { flex: 1; justify-content: center; }

.filters__group { display: grid; gap: 10px; position: relative; }
.filters__label {
  padding-inline: 20px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* Un rail : une seule ligne par categorie, qui defile au doigt. */
.filters__chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding-inline: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: 20px;
}
.filters__chips::-webkit-scrollbar { display: none; }
.filters__chips .chip { flex: 0 0 auto; }

/* Meme repere que pour les tableaux : un degrade du cote ou il reste des
   pastilles a decouvrir. */
.filters__group::before,
.filters__group::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  height: 38px;
  width: 30px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
.filters__group::after {
  inset-inline-end: 0;
  background: linear-gradient(to left, var(--sand) 22%, rgba(244, 241, 236, 0));
}
.filters__group::before {
  inset-inline-start: 0;
  background: linear-gradient(to right, var(--sand) 22%, rgba(244, 241, 236, 0));
}
.filters__group.has-more::after,
.filters__group.has-previous::before { opacity: 1; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.chip__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot);
  border: 1px solid rgba(31, 42, 68, 0.2);
}
.filters__reset {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0;
  color: var(--burgundy);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.filters__count {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-mute);
}

/* ---------- Grille de produits ---------- */
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 16px;
}
.grid__empty {
  text-align: center;
  color: var(--ink-soft);
  padding: 40px 0;
}

.card { display: flex; flex-direction: column; }
.card__link { text-decoration: none; color: inherit; display: block; }
.card__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--sand-deep);
  margin-bottom: 14px;
}
/* Emplacement reserve avant l'arrivee des suggestions : meme encombrement
   qu'une carte reelle, pour que le remplissage ne decale rien. */
.card--reserve .card__media { aspect-ratio: 4 / 5; }
.card--reserve { visibility: hidden; }

.card__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}
.card__img--back {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.card__link:hover .card__img--back { opacity: 1; }
.card__link:hover .card__img--front { transform: scale(1.03); }
.card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--burgundy);
  color: var(--white);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
}
.card__body { display: grid; gap: 4px; }
.card__name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--navy);
  line-height: 1.2;
}
.card__price {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--burgundy);
}
.card__colors { display: flex; gap: 8px; margin-top: 12px; }
.card__dot {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  background: var(--dot);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 2px var(--white);
  cursor: pointer;
  transition: box-shadow 0.3s var(--ease);
}
.card__dot.is-active { box-shadow: inset 0 0 0 2px var(--white), 0 0 0 1px var(--gold); }
.card__single-color {
  margin-top: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Fiche produit ---------- */
.product { padding-block: clamp(24px, 4vw, 48px) 0; }
.product__top { display: grid; gap: 32px; }
.product__name {
  font-size: clamp(2rem, 7vw, 2.8rem);
  margin-top: 12px;
}
.product__tagline {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 0.97rem;
}
.product__price {
  margin: 26px 0;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.price--old {
  font-size: 1.2rem;
  color: var(--ink-mute);
  text-decoration: line-through;
}
.price__promo {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--burgundy);
}
.product__info .option { margin-bottom: 26px; }

/* Ratio verrouillé : aucune photo ne peut décaler la mise en page (CLS) */
#mainProductImage {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: 58vh;
  transition: transform 0.8s var(--ease);
}
.gallery__zoom:hover #mainProductImage { transform: scale(1.02); }

/* ---------- Pastilles de coloris (fiche produit) ---------- */
.swatches { display: flex; gap: 14px; }
.swatch {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--swatch-color);
  cursor: pointer;
  box-shadow: inset 0 0 0 3px var(--white);
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.swatch:hover { border-color: var(--ink-mute); }
.swatch.is-active {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 3px var(--white), 0 0 0 1px var(--gold);
}

/* ---------- Calculateur de taille ---------- */
.sizer { display: grid; gap: 20px; }
.sizer__fields { display: grid; gap: 20px; }
.sizer__hint {
  font-size: 0.76rem;
  color: var(--ink-mute);
  text-align: center;
}
.sizer__result {
  margin-top: 30px;
  padding: 26px 24px;
  background: var(--sand-deep);
  border: 1px solid var(--hairline-gold);
  text-align: center;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.sizer__headline {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.4vw, 1.7rem);
  color: var(--navy);
  line-height: 1.3;
}
.sizer__note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 44ch;
}
.sizer__excluded {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
  color: var(--ink-mute);
  text-align: center;
}

/* ---------- Description détaillée ---------- */
.specs { margin: 0; border-top: 1px solid var(--hairline); }
.specs__row {
  display: grid;
  gap: 4px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--hairline);
}
.specs dt {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.specs dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Sélecteur de taille ---------- */
.sizes--lg { justify-content: center; gap: 12px; }
.sizes--lg .size-btn { min-width: 64px; padding: 15px 18px; font-size: 0.85rem; }
.size-btn.is-out {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.size-btn.is-out:hover { border-color: var(--hairline); color: var(--ink-soft); }

/* ---------- Avis clientes ---------- */
.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.review {
  background: var(--white);
  border: 1px solid var(--hairline);
  padding: 24px;
}
.review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.review__name {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.review__stars { color: var(--gold); letter-spacing: 0.1em; font-size: 0.9rem; }
.review__text {
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--navy);
}
.review__transcript {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.review__transcript-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}

/* Lecteur audio sur mesure — le lecteur natif casserait la mise en page */
.player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--sand);
  border: 1px solid var(--hairline);
}
.player__toggle {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
.player__toggle:hover { background: var(--burgundy); }
.player__bar {
  flex: 1;
  height: 3px;
  background: var(--hairline);
  border-radius: 999px;
  overflow: hidden;
}
.player__progress {
  display: block;
  width: 0;
  height: 100%;
  background: var(--gold);
  transition: width 0.15s linear;
}
.player__time {
  flex: none;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
}

/* ---------- Page de remerciement ---------- */
.thanks {
  padding-block: clamp(48px, 9vw, 96px);
  text-align: center;
}
.thanks__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid var(--hairline-gold);
  color: var(--gold);
  margin-bottom: 26px;
}
.thanks__title {
  font-size: clamp(1.9rem, 6.4vw, 2.9rem);
  margin-top: 14px;
}
.thanks__text {
  margin: 20px auto 0;
  max-width: 48ch;
  color: var(--ink-soft);
}
.thanks__recap {
  margin: 34px auto 0;
  max-width: 380px;
  text-align: left;
  border-top: 1px solid var(--hairline);
}
.thanks__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--hairline);
}
.thanks__row dt {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.thanks__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--navy);
}
.thanks__fallback {
  margin: 30px auto 0;
  max-width: 46ch;
  font-size: 0.88rem;
  color: var(--ink-mute);
}
.thanks .btn { margin-top: 32px; }

.btn--ghost {
  background: transparent;
  border-color: var(--hairline-gold);
  color: var(--navy);
}
.btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* ---------- Cercle Latafa ---------- */
/* Généré uniquement si circle.url est renseigné — jamais de bouton mort */
.circle {
  text-align: center;
  padding: clamp(32px, 6vw, 56px) 28px;
  border: 1px solid var(--hairline-gold);
  background: var(--white);
}
.circle__title {
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  margin-top: 12px;
}
.circle__text {
  margin: 16px auto 28px;
  max-width: 44ch;
  color: var(--ink-soft);
}

/* ==========================================================
   RESPONSIVE — composants du mini-site
========================================================== */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
  .grid--compact { grid-template-columns: repeat(3, 1fr); }
  .sizer__fields { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .site-header__inner { grid-template-columns: 1fr auto 1fr; }
  .site-nav__link { display: inline-block; }
  .site-nav__back { display: none; }
  .site-header__icon { justify-self: end; }

  .grid { grid-template-columns: repeat(4, 1fr); gap: 44px 28px; }
  /* Centrée : avec une ou deux suggestions, une grille fixe laisserait un vide à droite */
  .grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(0, 250px));
    justify-content: center;
    max-width: 860px;
    margin-inline: auto;
  }

  .product__top {
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(48px, 5vw, 80px);
    align-items: start;
  }
  .product__info { padding-top: 10px; }
  #mainProductImage { max-height: none; }

}

/* A partir de 768 px la place ne manque plus : le panneau reste ouvert en
   permanence, sans bouton ni tiroir, mais chaque categorie garde son rail
   pour ne jamais depasser une ligne. */
@media (min-width: 768px) {
  .filters-open,
  .filters__head,
  .filters__foot,
  .filters-backdrop { display: none; }

  .filters {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 40px;
    max-height: none;
    padding: 0 0 26px;
    border-radius: 0;
    border-bottom: 1px solid var(--hairline);
    box-shadow: none;
    transform: none;
    visibility: visible;
    background: none;
  }
  .filters__body {
    display: contents;
  }
  .filters__label,
  .filters__chips { padding-inline: 0; }
  .filters__group::before { background: linear-gradient(to right, var(--sand) 22%, rgba(244, 241, 236, 0)); }
  .filters__group::after { background: linear-gradient(to left, var(--sand) 22%, rgba(244, 241, 236, 0)); }

  .filters-bar { margin-bottom: 0; }
  .filters-bar .filters__count { margin-inline-start: auto; }
}

/* Confirmation WhatsApp sur la page de remerciement — filet de sécurité
   quand l'onglet ouvert depuis la fiche produit a été bloqué */
.thanks__wa {
  margin: 34px auto 0;
  max-width: 430px;
  padding: 24px;
  border: 1px solid var(--hairline-gold);
  background: var(--white);
}
.thanks__wa-text {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.thanks__wa .btn { margin-top: 0; }

/* Zone d'avis vide : invitation honnête plutôt qu'une section masquée ou
   un faux témoignage. Le doute sur l'absence d'avis est levé par la phrase
   « ce modèle vient d'arriver ». */
.reviews__invite {
  text-align: center;
  padding: clamp(28px, 5vw, 44px) 26px;
  border: 1px solid var(--hairline-gold);
  background: var(--white);
}
.reviews__invite-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  color: var(--navy);
}
.reviews__invite-text {
  margin: 14px auto 24px;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* Rupture totale : la fiche bascule en « prévenez-moi » plutôt que de laisser
   la cliente devant un formulaire qu'elle ne peut pas valider. */
.price__soldout {
  display: inline-block;
  margin-top: 4px;
  padding: 5px 12px;
  background: var(--sand-deep);
  border: 1px solid var(--hairline-gold);
  color: var(--burgundy);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.soldout-note {
  margin: 4px 0 20px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.soldout-cta { text-align: center; }

/* Catalogue peu fourni : une grille à 4 colonnes laisserait un grand vide à
   droite. Les cartes sont alors plus grandes et centrées, ce qui se lit comme
   un choix et non comme un manque. */
@media (min-width: 900px) {
  .grid--sparse {
    grid-template-columns: repeat(auto-fit, minmax(0, 300px));
    justify-content: center;
    gap: 48px 40px;
  }
}

/* ---------- Contenu rédactionnel (page retours, articles) ---------- */
.prose { color: var(--ink-soft); }
.prose h2 {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  margin: 42px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.prose h3 { font-size: 1.2rem; margin: 28px 0 10px; }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--burgundy); text-underline-offset: 3px; }
.prose strong { color: var(--navy); }
/* Tableaux comparatifs des articles. Le conteneur defile horizontalement :
   sur un telephone, un tableau a quatre colonnes ne doit pas elargir la page
   (aucun defilement horizontal du document, jamais). */
.prose__tablewrap { position: relative; margin: 0 0 24px; }
.prose__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--hairline-gold);
}
/* Un tableau coupe net laisse croire qu'on a tout lu. Ce degrade sur le bord
   ou il reste du contenu dit qu'il faut faire glisser. Il est pose sur le
   cadre, pas sur la zone qui defile, sinon il partirait avec le contenu. */
.prose__tablewrap::before,
.prose__tablewrap::after {
  content: "";
  position: absolute;
  inset-block: 1px 0;
  width: 34px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
.prose__tablewrap::after {
  inset-inline-end: 0;
  background: linear-gradient(to left, var(--sand) 18%, rgba(244, 241, 236, 0));
}
.prose__tablewrap::before {
  inset-inline-start: 0;
  background: linear-gradient(to right, var(--sand) 18%, rgba(244, 241, 236, 0));
}
.prose__tablewrap.has-more::after,
.prose__tablewrap.has-previous::before { opacity: 1; }
.prose table,
.prose__table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.92rem;
}
.prose th, .prose td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}
.prose th {
  color: var(--navy);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--sand-deep);
}
.prose tbody tr:nth-child(even) { background: rgba(31, 42, 68, 0.025); }
.prose tbody tr:last-child td { border-bottom: none; }
.prose td:first-child { color: var(--navy); font-weight: 600; }

/* Le bloc FAQ en fin d'article : chaque question se lit d'un coup d'oeil. */
.prose h3 + p { margin-top: 0; }
.prose__cta { margin-top: 40px; text-align: center; }

.article__cover { margin: 0 0 36px; }
.article__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- Liste des articles ---------- */
.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.post { border-bottom: 1px solid var(--hairline); }
.post__link {
  display: grid;
  gap: 6px;
  padding: 26px 2px;
  text-decoration: none;
  transition: padding-left 0.35s var(--ease);
}
.post__link:hover { padding-left: 10px; }
.post__date {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.post__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.6vw, 1.6rem);
  color: var(--navy);
  line-height: 1.25;
}
.post__excerpt { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- Vidéo dans la galerie ---------- */
.gallery__stage { position: relative; }
#mainProductVideo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  max-height: 58vh;
  background: var(--navy);
  display: block;
}
.thumb--video { position: relative; }
.thumb__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: rgba(31, 42, 68, 0.35);
  pointer-events: none;
}
@media (min-width: 900px) {
  #mainProductVideo { max-height: none; }
}

/* ---------- Sélecteur de langue ---------- */
.site-header__end {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.lang-switch__current { color: var(--navy); }
.lang-switch__long { display: none; }
.lang-switch__short { display: inline; }
@media (min-width: 900px) {
  .lang-switch__long { display: inline; }
  .lang-switch__short { display: none; }
}
.lang-switch__link {
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.lang-switch__link:hover { color: var(--gold); }
.lang-switch__link::before {
  content: "·";
  margin-inline-end: 6px;
  color: var(--hairline);
}

/* ---------- Panneau de commande ---------- */
/* <dialog> natif : la touche Échap et le piège de focus sont gérés par le
   navigateur, pas réimplémentés à la main. */
.modal {
  width: min(560px, calc(100% - 32px));
  max-height: min(90vh, 900px);
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--sand);
  color: var(--ink);
  overflow: hidden;
}
.modal::backdrop {
  background: rgba(31, 42, 68, 0.72);
  backdrop-filter: blur(3px);
}
.modal__dismiss { position: sticky; top: 0; z-index: 2; height: 0; }
.modal__close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
.modal__close:hover { background: var(--sand-deep); }
.modal__body {
  padding: clamp(28px, 5vw, 40px);
  overflow-y: auto;
  max-height: min(90vh, 900px);
}
.modal__title {
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  margin-top: 10px;
}
.modal__lead {
  margin: 14px 0 28px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.sizes__cta { margin-top: 34px; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in 0.28s var(--ease); }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- Mesures détaillées ---------- */
/* Généré uniquement quand des mesures réelles existent dans products.json */
.measures {
  margin-top: 26px;
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
}
.measures summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.measures__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  font-size: 0.88rem;
}
.measures__table th,
.measures__table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--hairline);
  text-align: center;
}
.measures__table th:first-child,
.measures__table td:first-child { text-align: start; font-weight: 600; color: var(--navy); }
.measures__table th { color: var(--ink-mute); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; }
.measures__note { margin-top: 14px; font-size: 0.8rem; color: var(--ink-mute); }