/* ==========================================================================
   MACACI — Système de design (reproduction fidèle de la mise en page
   simmons.fr, adaptée au contenu et à l'identité MACACI)
   Palette : bleu marine MACACI (#043280) + beige/crème éditorial + vert sauge
   ========================================================================== */

:root {
  /* Couleurs */
  --c-navy: #043280;          /* bleu marine MACACI — barres, liens, boutons */
  --c-navy-deep: #01204f;     /* footer, éléments très foncés */
  --c-ink: #17223b;           /* boutons sombres, titres */
  --c-tan: #c2a06a;           /* accent beige */
  --c-tan-band: #cbb083;      /* bandeau expertise */
  --c-cream: #f7f3ec;         /* fonds de section crème */
  --c-cream-2: #efe8db;
  --c-sage-bg: #e7efe4;       /* pastilles vertes */
  --c-sage-text: #35702f;
  --c-orange: #e0812c;        /* badges / récompenses */
  --c-paper: #ffffff;
  --c-text: #262b36;
  --c-text-soft: #6a7180;
  --c-text-faint: #9aa0ac;
  --c-border: #e6e2da;
  --c-line: #d9d4ca;

  /* Espacements */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Rayons — SIMMONS utilise des angles nets */
  --r-btn: 2px;
  --r-card: 6px;
  --r-pill: 999px;

  --font-head: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --shadow-1: 0 1px 3px rgba(23, 34, 59, 0.06);
  --shadow-2: 0 12px 32px rgba(23, 34, 59, 0.12);

  --wrap: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-paper);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--c-ink); font-weight: 600; line-height: 1.15; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-5); }

.section { padding: var(--sp-9) 0; }
.section--sm { padding: var(--sp-7) 0; }
.bg-paper { background: var(--c-paper); }
.bg-cream { background: var(--c-cream); }
.bg-cream2 { background: var(--c-cream-2); }
.bg-navy { background: var(--c-navy); color: #fff; }

/* ---------- Boutons (nets, rectangulaires, majuscules) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 15px 34px;
  border-radius: var(--r-btn);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
  line-height: 1;
}
.btn-dark { background: var(--c-ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-navy { background: var(--c-navy); color: #fff; }
.btn-navy:hover { background: var(--c-navy-deep); }
.btn-ghost { background: transparent; border-color: var(--c-ink); color: var(--c-ink); }
.btn-ghost:hover { background: var(--c-ink); color: #fff; }
.btn-light { background: #fff; color: var(--c-ink); }
.btn-light:hover { background: var(--c-cream-2); }
.btn-outline-light { background: transparent; border-color: #fff; color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--c-ink); }
.btn-block { width: 100%; }
.btn-sm { padding: 12px 22px; font-size: 11px; }

/* ---------- Titres de section ---------- */
.sec-head { margin-bottom: var(--sp-7); }
.sec-head--center { text-align: center; }
.sec-head__kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-head); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-tan);
  margin-bottom: var(--sp-3);
}
.sec-head--center .sec-head__kicker { justify-content: center; }
.sec-head__title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
}
/* variante titre avec barre verticale à gauche (SIMMONS "Découvrez nos incontournables") */
.sec-head--bar .sec-head__title { padding-left: var(--sp-4); }
.sec-head--bar .sec-head__title::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 3px; background: var(--c-tan);
}
/* variante titre centré avec tick vertical au-dessus */
.sec-head--center .sec-head__title { padding-top: var(--sp-5); }
.sec-head--center .sec-head__title::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1.5px; height: var(--sp-4); background: var(--c-tan);
}
.sec-head__sub { color: var(--c-text-soft); margin-top: var(--sp-3); max-width: 640px; }
.sec-head--center .sec-head__sub { margin-left: auto; margin-right: auto; }
.sec-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }

/* ---------- Header (3 rangées, façon SIMMONS) ---------- */
.promo-bar { background: var(--c-navy); color: #fff; font-size: 12.5px; letter-spacing: 0.02em; }
.promo-bar__inner { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); padding: 9px 0; text-align: center; }
.promo-bar strong { font-weight: 700; }

.site-header { background: var(--c-paper); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-1); }
.header-main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-6); padding: var(--sp-4) 0; }
.brand img { height: 94px; width: auto; }
.header-search {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--c-cream); border: 1px solid var(--c-border); border-radius: var(--r-pill);
  padding: 14px 22px; width: 100%; max-width: 680px; margin: 0 auto;
}
.header-search input { order: 1; }
.header-search svg { order: 2; }
.header-search svg { width: 17px; height: 17px; color: var(--c-text-faint); flex-shrink: 0; }
.header-search input { border: none; background: none; outline: none; width: 100%; font-size: 14px; font-family: var(--font-body); }
.header-utils { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.icon-btn { background: none; border: none; color: var(--c-ink); padding: 8px; display: inline-flex; position: relative; cursor: pointer; }
.icon-btn svg { width: 29px; height: 29px; }
.icon-btn:hover { color: var(--c-navy); }
.icon-btn__count { position: absolute; top: 2px; right: 2px; background: var(--c-orange); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

.header-nav-wrap { background: var(--c-navy); position: relative; }
.header-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); max-width: 1120px; margin: 0 auto; }
.header-nav__group { display: flex; align-items: center; gap: var(--sp-6); }
.header-nav a {
  font-family: var(--font-head); font-size: 13.5px; font-weight: 500; letter-spacing: 0.02em;
  color: #fff; padding: 13px 0; border-bottom: 2px solid transparent;
  transition: border-color .15s, opacity .15s;
}
.header-nav a:hover, .header-nav a.is-active { border-color: #fff; }
.header-nav__group--sec a { font-size: 12.5px; opacity: .9; }
.header-nav__group--sec a:hover { opacity: 1; }
.header-nav__phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 600 !important; }
.header-nav__phone svg { width: 15px; height: 15px; }

/* ---------- Méga menu (premium) ---------- */
.nav-item { position: static; }
.nav-item__link { display: inline-flex !important; align-items: center; gap: 6px; }
.nav-item__link .chev { width: 11px; height: 11px; transition: transform .25s ease; }
.nav-item:hover .nav-item__link .chev { transform: rotate(180deg); }

.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; color: var(--c-text);
  box-shadow: 0 34px 64px rgba(23,34,59,.24);
  border-top: 1px solid var(--c-border);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .26s ease, transform .26s ease, visibility .26s;
  z-index: 95; overflow: hidden;
}
.nav-item:hover > .mega, .nav-item:focus-within > .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega__body { padding: var(--sp-6) 0 var(--sp-5); }
.mega__inner { display: grid; grid-template-columns: 0.85fr 1.7fr 1.15fr; gap: var(--sp-7); align-items: stretch; }
.mega__col { display: flex; flex-direction: column; }
.mega__col h4 { font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-faint); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* Staggered reveal */
.mega__inner > * { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.nav-item:hover > .mega .mega__inner > *,
.nav-item:focus-within > .mega .mega__inner > * { opacity: 1; transform: translateY(0); }
.mega__inner > *:nth-child(1) { transition-delay: .05s; }
.mega__inner > *:nth-child(2) { transition-delay: .11s; }
.mega__inner > *:nth-child(3) { transition-delay: .17s; }

/* Raccourcis */
.mega-nav { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--c-ink); transition: background .15s, color .15s; }
.mega-nav svg { width: 15px; height: 15px; color: var(--c-navy); opacity: 0; transform: translateX(-5px); transition: opacity .18s, transform .18s; }
.mega-nav:hover { background: var(--c-cream); color: var(--c-navy); }
.mega-nav:hover svg { opacity: 1; transform: translateX(0); }

/* Carte produit mini */
.mega-prod { display: flex; align-items: center; gap: var(--sp-3); padding: 10px; border-radius: 14px; border: 1px solid transparent; transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
.mega-prod:hover { background: #fff; border-color: var(--c-border); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.mega-prod__thumb { width: 66px; height: 66px; border-radius: 12px; overflow: hidden; background: var(--c-cream); flex-shrink: 0; }
.mega-prod__thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.mega-prod__meta { display: flex; flex-direction: column; gap: 3px; line-height: 1.3; }
.mega-prod__name { font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--c-ink); }
.mega-prod__price { font-size: 12.5px; font-weight: 700; color: var(--c-navy); }

/* Feature */
.mega-feature { position: relative; border-radius: 16px; overflow: hidden; min-height: 260px; display: flex; }
.mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mega-feature:hover img { transform: scale(1.05); }
.mega-feature__ov { position: relative; margin-top: auto; width: 100%; padding: var(--sp-5); background: linear-gradient(180deg, rgba(4,26,64,0), rgba(4,26,64,.5) 45%, rgba(4,26,64,.92)); color: #fff; }
.mega-feature__ov .k { font-family: var(--font-head); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #e7c98a; }
.mega-feature__ov h4 { color: #fff; font-size: 20px; margin: 6px 0 var(--sp-4); line-height: 1.2; }

/* Barre du bas */
.mega__bar { background: var(--c-cream); border-top: 1px solid var(--c-border); }
.mega__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-4) 0; }
.mega__cta { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-navy); }
.mega__cta svg { width: 17px; height: 17px; transition: transform .2s; }
.mega__cta:hover svg { transform: translateX(5px); }
.mega__trust { display: flex; gap: var(--sp-5); }
.mega__trust span { font-size: 12.5px; color: var(--c-text-soft); display: inline-flex; align-items: center; gap: 6px; }
.mega__trust svg { width: 15px; height: 15px; color: var(--c-sage-text); }

/* Correctif : le bleu marine des liens de nav (.header-nav a { color:#fff }) était
   hérité par les liens du méga → texte blanc invisible. On force la bonne couleur. */
.header-nav .mega-nav { color: var(--c-ink); }
.header-nav .mega-nav:hover { color: var(--c-navy); }
.header-nav .mega-prod__name { color: var(--c-ink); }
.header-nav .mega-prod__price { color: var(--c-navy); }
.header-nav .mega__cta { color: var(--c-navy); }
.header-nav .mega-feature__ov .k { color: #e7c98a; }
.header-nav .mega-feature__ov h4 { color: #fff; }

.nav-toggle { display: none; background: none; border: none; flex-direction: column; gap: 5px; padding: var(--sp-1); }
.nav-toggle span { width: 24px; height: 2px; background: var(--c-ink); border-radius: 2px; }
.nav-scrim { display: none; position: fixed; inset: 0; background: rgba(4,50,128,.4); z-index: 98; }
.nav-scrim.is-open { display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--c-navy-deep); }
.hero-slides { position: relative; height: 560px; }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,26,64,.72) 0%, rgba(4,26,64,.35) 45%, rgba(4,26,64,0) 75%); }
.hero-inner { position: absolute; inset: 0; }
.hero-inner .wrap { height: 100%; display: flex; align-items: center; }
.hero-content { max-width: 540px; color: #fff; }
.hero-content .eyebrow { display: inline-block; font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; opacity: .9; margin-bottom: var(--sp-4); border-bottom: 2px solid var(--c-tan); padding-bottom: 6px; }
.hero-content h1 { color: #fff; font-size: clamp(30px, 4.6vw, 52px); font-weight: 600; line-height: 1.08; margin-bottom: var(--sp-4); }
.hero-content p { font-size: 17px; color: rgba(255,255,255,.9); margin-bottom: var(--sp-5); max-width: 440px; }
.hero-badge { position: absolute; top: var(--sp-6); right: var(--sp-6); width: 108px; height: 108px; background: var(--c-orange); color: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--font-head); box-shadow: var(--shadow-2); transform: rotate(-8deg); z-index: 3; }
.hero-badge strong { font-size: 26px; font-weight: 700; line-height: 1; }
.hero-badge span { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; padding: 0 8px; }
.hero-dots { position: absolute; bottom: var(--sp-5); left: 50%; transform: translateX(-50%); display: flex; gap: var(--sp-2); z-index: 4; }
.hero-dots button { width: 34px; height: 3px; border: none; background: rgba(255,255,255,.45); padding: 0; cursor: pointer; transition: background .2s; }
.hero-dots button.is-active { background: #fff; }

/* ---------- Cartes produit (riches, façon SIMMONS) ---------- */
.grid { display: grid; gap: var(--sp-5); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Carte produit — style SIMMONS : sans bordure, image arrondie, pastilles pastel, prix bleu */
.pcard { display: flex; flex-direction: column; background: transparent; border: none; box-shadow: none; }
.pcard__media { position: relative; display: block; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; background: var(--c-cream); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; mix-blend-mode: multiply; }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__badge { position: absolute; top: var(--sp-4); font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; padding: 8px 15px; border-radius: var(--r-pill); }
.pcard__badge--new { left: var(--sp-4); background: var(--c-navy); color: #fff; }
.pcard__badge--promo { right: var(--sp-4); background: #fff; color: var(--c-ink); box-shadow: 0 3px 10px rgba(23,34,59,.14); }
.pcard__body { padding: var(--sp-4) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.pcard__name { font-size: 18px; font-weight: 600; color: var(--c-ink); line-height: 1.3; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: var(--r-pill); background: var(--c-sage-bg); color: var(--c-sage-text); }
.tag--green { background: #e5f0e4; color: #3f7a3a; }
.tag--blue  { background: #e6ecf6; color: #3a5ca8; }
.tag--orange{ background: #f6ecdf; color: #b5732a; }
.tag--pink  { background: #f6e6e8; color: #b23a4a; }
.tag--gray  { background: #ecedf0; color: #5a6270; }
.pcard__price { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: 2px; }
.price-now { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--c-navy); }
.price-old { font-size: 13px; color: var(--c-text-faint); text-decoration: line-through; }
.pcard__dim { font-size: 12.5px; font-style: italic; color: var(--c-text-faint); }

/* ---------- Cartes catégorie (bento/mosaïque façon SIMMONS) ---------- */
.cat-bento { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 236px 236px; gap: var(--sp-4); }
.cat-bento .cat-card:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.cat-bento .cat-card:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }

.cat-card { position: relative; display: block; border-radius: 16px; overflow: hidden; height: 100%; color: #fff; }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.cat-card:hover img { transform: scale(1.06); }
.cat-card__ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,26,64,0) 40%, rgba(4,26,64,.78) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-5); }
.cat-card__ov h3 { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cat-bento .cat-card:nth-child(1) .cat-card__ov h3 { font-size: 24px; }
.cat-card__ov span { display: none; }

/* ---------- Bandeau de confiance (icônes) ---------- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.trust__item { display: flex; align-items: center; gap: var(--sp-3); justify-content: center; text-align: left; }
.trust__item svg { width: 34px; height: 34px; color: var(--c-navy); flex-shrink: 0; }
.trust__item span { font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink); line-height: 1.3; }

/* ---------- Section split (image + texte, bouton sur l'image) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; border-radius: var(--r-card); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split__media .btn { position: absolute; left: 50%; bottom: var(--sp-5); transform: translateX(-50%); }
.split__text h2 { font-size: clamp(22px, 2.8vw, 34px); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: var(--sp-4); }
.split__text p { color: var(--c-text-soft); margin-bottom: var(--sp-4); }
.split__stats { display: flex; gap: var(--sp-6); margin: var(--sp-5) 0; }
.split__stats strong { display: block; font-family: var(--font-head); font-size: 30px; color: var(--c-navy); }
.split__stats span { font-size: 12.5px; color: var(--c-text-soft); }

/* ---------- Bandeau expertise (beige, 3 items circulaires) ---------- */
.expertise { background: linear-gradient(180deg, #cdb388, #c2a06a); padding: var(--sp-8) 0; }
.expertise__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.expertise__item { display: flex; align-items: center; gap: var(--sp-4); }
.expertise__thumb { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid rgba(255,255,255,.55); }
.expertise__thumb img { width: 100%; height: 100%; object-fit: cover; }
.expertise__item h4 { color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.expertise__item a { color: #fff; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 2px; }
.expertise__item a:hover { border-color: #fff; }

/* ---------- Héritage / engagements (texte + badges) ---------- */
.heritage__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items: center; }
.heritage__text p { color: var(--c-text-soft); margin-bottom: var(--sp-4); }
.heritage__badges { display: flex; gap: var(--sp-5); justify-content: center; flex-wrap: wrap; }
.seal { width: 150px; height: 150px; border-radius: 50%; background: var(--c-paper); border: 2px solid var(--c-cream-2); box-shadow: var(--shadow-1); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-3); }
.seal strong { font-family: var(--font-head); font-size: 30px; color: var(--c-navy); line-height: 1; }
.seal span { font-family: var(--font-head); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-soft); margin-top: 6px; }
.seal--logo { padding: 0; overflow: hidden; }
.seal--logo img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }

/* ---------- Store locator (fond carte) ---------- */
.locator { position: relative; overflow: hidden; background: #e8ecf1;
  background-image:
    linear-gradient(rgba(4,50,128,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4,50,128,.06) 1px, transparent 1px),
    linear-gradient(rgba(4,50,128,.10) 2px, transparent 2px),
    linear-gradient(90deg, rgba(4,50,128,.10) 2px, transparent 2px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
}
.locator__card { background: var(--c-paper); box-shadow: var(--shadow-2); border-radius: var(--r-card); padding: var(--sp-7); max-width: 560px; margin: 0 auto; text-align: center; }
.locator__card .big { font-family: var(--font-head); font-size: 40px; font-weight: 700; color: var(--c-navy); line-height: 1; margin: var(--sp-3) 0; }
.locator__card p { color: var(--c-text-soft); margin-bottom: var(--sp-5); }
/* Formulaire : le bouton (nowrap) débordait. flex-wrap + bases souples =
   ligne unique quand ça rentre, empilement propre sinon. */
.locator__form { display: flex; flex-wrap: wrap; gap: var(--sp-2); max-width: 460px; margin: 0 auto; }
.locator__form input { flex: 1 1 210px; min-width: 0; padding: 13px 16px; border: 1px solid var(--c-border); border-radius: var(--r-btn); font-family: var(--font-body); font-size: 14px; }
.locator__form .btn { flex: 1 1 170px; justify-content: center; }

/* ---------- "À la loupe" — vitrine produit + gros texte fantôme ---------- */
.loupe { position: relative; overflow: hidden; background: var(--c-cream); }
.loupe__ghost { position: absolute; top: 8%; left: 0; right: 0; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: clamp(52px, 12vw, 168px); letter-spacing: 0.04em; color: rgba(4,50,128,.05); white-space: nowrap; pointer-events: none; user-select: none; line-height: 1; }
.loupe__inner { position: relative; display: grid; grid-template-columns: 44px 1.15fr 0.85fr; gap: var(--sp-6); align-items: center; }
.loupe__label { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-text-faint); }
.loupe__specs { }
.loupe__specs .stat { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); }
.loupe__specs .stat strong { font-family: var(--font-head); font-size: 30px; font-weight: 700; color: var(--c-navy); min-width: 90px; }
.loupe__specs .stat span { font-size: 14px; color: var(--c-text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.loupe__product { text-align: center; }
.loupe__product img { max-width: 460px; margin: 0 auto var(--sp-5); }

/* ---------- Blog / conseils ---------- */
.blog { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-6); }
.blog__feature { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 360px; }
.blog__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog__feature .blog__ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,26,64,0) 40%, rgba(4,26,64,.85)); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-6); color: #fff; }
.blog__feature h3 { color: #fff; font-size: 22px; max-width: 420px; }
.blog__feature p { color: rgba(255,255,255,.85); font-size: 14px; margin-top: var(--sp-2); max-width: 440px; }
.blog__list { display: flex; flex-direction: column; gap: var(--sp-4); }
.blog__item { display: grid; grid-template-columns: 132px 1fr; gap: var(--sp-4); background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; }
.blog__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; }
.blog__item__body { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; display: flex; flex-direction: column; justify-content: center; }
.blog__item__kicker { font-family: var(--font-head); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tan); margin-bottom: 6px; }
.blog__item h4 { font-size: 15px; line-height: 1.35; color: var(--c-ink); }

/* ---------- Deuxième bandeau de confiance (services) ---------- */
.services { background: var(--c-cream); }
.services__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.services__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); }
.services__item svg { width: 38px; height: 38px; color: var(--c-navy); }
.services__item strong { font-family: var(--font-head); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink); }
.services__item span { font-size: 12.5px; color: var(--c-text-soft); }

/* ---------- Bloc SEO ---------- */
.seo { background: var(--c-paper); border-top: 1px solid var(--c-border); }
.seo__cols { columns: 2; column-gap: var(--sp-8); }
.seo p { font-size: 12.5px; color: var(--c-text-faint); line-height: 1.7; margin-bottom: var(--sp-3); }
.seo h2 { font-size: 15px; color: var(--c-text-soft); margin-bottom: var(--sp-3); }

/* ---------- Bannière catégorie (pages intérieures) ---------- */
.cat-banner { background: var(--c-navy); color: #fff; padding: var(--sp-8) 0; text-align: center; }
.cat-banner h1 { color: #fff; font-size: clamp(28px, 4vw, 42px); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--sp-3); }
.cat-banner p { color: rgba(255,255,255,.85); font-size: 15px; }
.crumb { font-size: 12.5px; color: var(--c-text-soft); padding: var(--sp-4) 0; }
.crumb a:hover { color: var(--c-navy); }
.crumb span { margin: 0 8px; color: var(--c-text-faint); }

/* ---------- Boutiques ---------- */
.store-card { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.store-card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.store-card__media { aspect-ratio: 16/10; overflow: hidden; }
.store-card__media img { width: 100%; height: 100%; object-fit: cover; }
.store-card__body { padding: var(--sp-5); }
.store-card__body h3 { font-size: 17px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--sp-2); }
.store-card__body p { font-size: 13.5px; color: var(--c-text-soft); margin-bottom: var(--sp-3); min-height: 40px; }
.store-card__phone { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 600; color: var(--c-navy); font-size: 14px; }
.store-card__phone svg { width: 16px; height: 16px; }

.store-mini { display: flex; align-items: center; gap: var(--sp-3); background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-3); }
.store-mini img { width: 66px; height: 66px; border-radius: var(--r-btn); object-fit: cover; flex-shrink: 0; }
.store-mini h4 { font-size: 14px; text-transform: uppercase; }
.store-mini span { font-size: 12px; color: var(--c-text-soft); }

/* ---------- Témoignages ---------- */
.tcard { background: var(--c-paper); border-radius: var(--r-card); padding: var(--sp-6) var(--sp-5); text-align: center; position: relative; border: 1px solid var(--c-border); }
.tcard__q { font-family: Georgia, serif; font-size: 44px; color: var(--c-tan); line-height: .8; }
.tcard img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: var(--sp-3) auto var(--sp-4); border: 3px solid var(--c-cream); }
.tcard__stars { color: var(--c-orange); letter-spacing: 2px; font-size: 13px; margin-bottom: var(--sp-2); }
.tcard h4 { font-size: 15px; margin-bottom: var(--sp-2); }
.tcard p { font-size: 13.5px; color: var(--c-text-soft); }

/* ---------- Footer ---------- */
.footer-newsletter { background: var(--c-navy-deep); color: #fff; padding: var(--sp-8) 0; }
.footer-grid { background: var(--c-navy-deep); color: rgba(255,255,255,.82); padding: 0 0 var(--sp-6); }
.footer-cols { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--sp-6); padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-brand img { height: 54px; margin-bottom: var(--sp-4); background: #fff; padding: 6px; border-radius: var(--r-btn); }
.footer-brand p { font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: var(--sp-4); }
.footer-social { display: flex; gap: var(--sp-3); }
.footer-social a { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.footer-social a:hover { background: #fff; color: var(--c-navy-deep); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 { color: #fff; font-family: var(--font-head); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-4); }
.footer-col li { margin-bottom: var(--sp-3); }
.footer-col a { font-size: 13.5px; color: rgba(255,255,255,.72); }
.footer-col a:hover { color: #fff; }

.newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.newsletter-inner h3 { color: #fff; font-size: 20px; margin-bottom: 4px; }
.newsletter-inner p { color: rgba(255,255,255,.7); font-size: 13.5px; }
.newsletter-form { display: flex; gap: var(--sp-2); flex: 1; max-width: 460px; min-width: 280px; }
.newsletter-form input { flex: 1; padding: 14px 18px; border: none; border-radius: var(--r-btn); font-size: 14px; font-family: var(--font-body); }

.footer-bottom { background: var(--c-navy-deep); }
.footer-bottom__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-5) 0; border-top: 1px solid rgba(255,255,255,.14); }
.footer-pay { display: flex; align-items: center; gap: var(--sp-3); }
.footer-pay img { height: 30px; border-radius: 4px; }
.footer-legal { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer-legal a, .footer-copy { font-size: 12px; color: rgba(255,255,255,.55); }
.footer-legal a:hover { color: #fff; }

/* ---------- Utilitaires ---------- */
.center { text-align: center; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .trust, .services__row { grid-template-columns: repeat(2, 1fr); }
  .expertise__row { grid-template-columns: 1fr; gap: var(--sp-5); }
  .split, .heritage__grid, .blog { grid-template-columns: 1fr; gap: var(--sp-6); }
  .split--reverse .split__media { order: 0; }
  .loupe__inner { grid-template-columns: 1fr; }
  .loupe__label { display: none; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .header-main { grid-template-columns: auto 1fr auto; }
  .header-search { display: none; }
  .brand img { height: 72px; }
}
@media (max-width: 768px) {
  .section { padding: var(--sp-7) 0; }
  .promo-bar__inner { font-size: 11px; }
  .header-nav {
    position: fixed; top: 0; right: -300px; height: 100vh; width: 280px;
    background: var(--c-paper); flex-direction: column; align-items: flex-start;
    justify-content: flex-start; padding: 90px var(--sp-5) var(--sp-5); gap: var(--sp-4);
    box-shadow: -8px 0 24px rgba(0,0,0,.15); transition: right .25s ease; z-index: 99; overflow-y: auto;
  }
  .header-nav.is-open { right: 0; }
  .header-nav a { padding: var(--sp-2) 0; color: var(--c-ink); }
  .header-nav__group { flex-direction: column; align-items: flex-start; gap: var(--sp-3); width: 100%; }
  .header-nav__group--sec { border-left: none; padding-left: 0; border-top: 1px solid var(--c-border); padding-top: var(--sp-4); margin-top: var(--sp-2); }
  .nav-item { width: 100%; }
  .mega { display: none; }
  .nav-item__link .chev { display: none; }
  .nav-toggle { display: flex; }

  /* --- Hero mobile : lisibilité + plus aucun chevauchement --- */
  .hero-slides { height: 520px; }
  /* le sujet des visuels est à droite → on recadre vers la droite */
  .hero-slide img { object-position: 68% center; }
  /* voile vertical : sur mobile le texte occupe toute la largeur */
  .hero-slide__scrim {
    background: linear-gradient(180deg, rgba(4,26,64,.58) 0%, rgba(4,26,64,.78) 55%, rgba(4,26,64,.90) 100%);
  }
  /* texte ancré en bas → le badge (en haut) ne peut plus le couper */
  .hero-inner .wrap { align-items: flex-end; padding-bottom: 56px; }
  .hero-content { max-width: 100%; }
  .hero-content h1 { font-size: 28px; }
  .hero-content p { font-size: 15px; margin-bottom: var(--sp-5); }
  .hero-badge { width: 76px; height: 76px; top: 20px; right: 16px; }
  .hero-badge strong { font-size: 21px; }
  .hero-badge span { font-size: 8px; padding: 0 5px; }

  /* --- Header mobile : logo compact, cibles tactiles --- */
  .brand img { height: 54px; }
  .header-main { padding: var(--sp-3) 0; gap: var(--sp-3); }
  .header-nav a { padding: 11px 0; }          /* zone tactile ~44px */
  .icon-btn { padding: 10px; }                /* zone tactile ~44px */

  /* --- Grilles produits : 2 colonnes sur mobile (au lieu d'1) --- */
  .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .grid-2 { grid-template-columns: 1fr; }
  /* textes des cartes ajustés au format 2 colonnes */
  .pcard__name { font-size: 14.5px; }
  .price-now { font-size: 16px; }
  .pcard__dim { font-size: 11.5px; }
  .tag { font-size: 10.5px; padding: 5px 9px; }
  .pcard__badge { font-size: 10px; padding: 6px 10px; top: var(--sp-3); left: var(--sp-3); }
  .pcard__body { gap: var(--sp-2); }

  .trust, .services__row { grid-template-columns: 1fr; }
  .trust__item { justify-content: flex-start; }
  .footer-cols { grid-template-columns: 1fr; }
  .newsletter-inner { flex-direction: column; align-items: stretch; }
  .seo__cols { columns: 1; }
  .loupe__ghost { font-size: 64px; }
  .locator__card { padding: var(--sp-5); }
}

/* Bento catégories — tablette */
@media (max-width: 900px) {
  .cat-bento { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px; }
  .cat-bento .cat-card:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
  .cat-bento .cat-card:nth-child(4) { grid-column: 1 / span 2; grid-row: 3; }
  .cat-bento .cat-card:nth-child(1) .cat-card__ov h3 { font-size: 20px; }
}
/* Bento catégories — mobile */
@media (max-width: 560px) {
  .cat-bento { grid-template-columns: 1fr; grid-template-rows: repeat(4, 180px); }
  .cat-bento .cat-card { grid-column: 1 !important; grid-row: auto !important; }
}

/* ============ Page produit (PDP) ============ */
.pdp__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); align-items: start; }
.pdp__gallery { position: sticky; top: 150px; }

/* Galerie slider */
.gal__stage { position: relative; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; background: var(--c-cream); }
.gal__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .4s ease; }
.gal__slide.is-active { opacity: 1; visibility: visible; }
.gal__slide img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.gal__badge { position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 4; }
.gal__seal { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 66px; height: 66px; z-index: 4; filter: drop-shadow(0 4px 10px rgba(23,34,59,.2)); }
.gal__seal img { width: 100%; height: 100%; object-fit: contain; }
.gal__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; box-shadow: 0 4px 14px rgba(23,34,59,.18); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; color: var(--c-ink); transition: background .15s, transform .15s; }
.gal__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.gal__arrow svg { width: 20px; height: 20px; }
.gal__arrow--prev { left: 14px; }
.gal__arrow--next { right: 14px; }
.gal__dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 4; }
.gal__dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(23,34,59,.3); cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.gal__dots button.is-active { background: var(--c-navy); transform: scale(1.3); }
.gal__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.gal__thumb { width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--c-cream); cursor: pointer; padding: 0; transition: border-color .15s; }
.gal__thumb.is-active { border-color: var(--c-navy); }
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

.pdp__cat { font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-tan); }
.pdp__title { font-size: clamp(24px, 3vw, 34px); margin: var(--sp-2) 0 var(--sp-4); }
.pdp__price { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pdp__price .price-now { font-size: 28px; }
.pdp__price .price-old { font-size: 16px; }
.pdp .pcard__tags { margin-bottom: var(--sp-5); }
.pdp__desc { color: var(--c-text-soft); margin-bottom: var(--sp-5); }
.pdp__specs { border-top: 1px solid var(--c-border); margin-bottom: var(--sp-5); }
.pdp__specs li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 11px 0; border-bottom: 1px solid var(--c-border); font-size: 14px; }
.pdp__specs li span:first-child { color: var(--c-text-soft); }
.pdp__specs li span:last-child { font-weight: 600; color: var(--c-ink); text-align: right; }
.pdp__field { margin-bottom: var(--sp-5); }
.pdp__field label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-soft); margin-bottom: var(--sp-2); }
.pdp__field select { width: 100%; padding: 13px 16px; border: 1px solid var(--c-border); border-radius: var(--r-btn); font-family: var(--font-body); font-size: 14px; background: #fff; color: var(--c-ink); }
.pdp__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pdp__pay { font-size: 12.5px; color: var(--c-text-faint); margin-bottom: var(--sp-5); }
.pdp__trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); border-top: 1px solid var(--c-border); padding-top: var(--sp-5); }
.pdp__trust div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; }
.pdp__trust svg { width: 26px; height: 26px; color: var(--c-navy); }
.pdp__trust span { font-size: 11.5px; color: var(--c-text-soft); line-height: 1.3; }

.pdp__details { max-width: 880px; margin: 0 auto; }
.pdp__details h3 { font-size: 21px; margin-bottom: var(--sp-4); }
.pdp__plus { margin-bottom: var(--sp-6); }
.pdp__plus li { position: relative; padding-left: 30px; margin-bottom: var(--sp-3); color: var(--c-text-soft); }
.pdp__plus li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-sage-bg); }
.pdp__plus li::after { content: ""; position: absolute; left: 5.5px; top: 9px; width: 6px; height: 3px; border-left: 2px solid var(--c-sage-text); border-bottom: 2px solid var(--c-sage-text); transform: rotate(-45deg); }

.acc__item { border-bottom: 1px solid var(--c-border); }
.acc__item:first-child { border-top: 1px solid var(--c-border); }
.acc__head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; background: none; border: none; font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--c-ink); text-align: left; cursor: pointer; }
.accicon { width: 20px; height: 20px; position: relative; flex-shrink: 0; }
.accicon::before, .accicon::after { content: ""; position: absolute; background: var(--c-navy); border-radius: 2px; }
.accicon::before { top: 9px; left: 2px; right: 2px; height: 2px; }
.accicon::after { left: 9px; top: 2px; bottom: 2px; width: 2px; transition: transform .25s; }
.acc__item.is-open .accicon::after { transform: scaleY(0); }
.acc__body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc__body-inner { padding: 0 0 var(--sp-4); color: var(--c-text-soft); font-size: 14px; line-height: 1.65; }

.pdp-why { background: linear-gradient(180deg,#cdb388,#c2a06a); padding: var(--sp-7) 0; text-align: center; }
.pdp-why h2 { color: #fff; font-size: clamp(22px,3vw,30px); text-transform: uppercase; letter-spacing: .04em; }

/* Zoom rows (étiquettes verticales façon SIMMONS) */
.zoom-row { display: grid; grid-template-columns: 46px 1fr 1fr; gap: var(--sp-6); align-items: center; margin-bottom: var(--sp-8); }
.zoom-row:last-child { margin-bottom: 0; }
.zoom-row--reverse { grid-template-columns: 1fr 1fr 46px; }
.zoom-row__label { position: relative; align-self: stretch; min-height: 240px; display: flex; align-items: center; justify-content: center; }
.zoom-row__label span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--c-text-soft); white-space: nowrap; }
.zoom-row--reverse .zoom-row__label span { transform: none; }
.zoom-row__label::before, .zoom-row__label::after { content: ""; position: absolute; width: 15px; height: 15px; left: 50%; transform: translateX(-50%); }
.zoom-row__label::before { top: 0; border-top: 2px solid var(--c-tan); border-left: 2px solid var(--c-tan); }
.zoom-row__label::after { bottom: 0; border-bottom: 2px solid var(--c-tan); border-right: 2px solid var(--c-tan); }
.zoom-row__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; }
.zoom-row__text h3 { font-size: 21px; margin-bottom: var(--sp-3); }
.zoom-row__text p { color: var(--c-text-soft); margin-bottom: var(--sp-4); }
.zoom-row__text li { position: relative; padding-left: 20px; margin-bottom: 8px; color: var(--c-text-soft); font-size: 14px; }
.zoom-row__text li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-navy); }

@media (max-width: 900px) {
  .pdp__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .pdp__gallery { position: static; }
  .zoom-row, .zoom-row--reverse { grid-template-columns: 1fr; gap: var(--sp-4); }
  .zoom-row__media { order: -1; }
  .zoom-row__label { min-height: auto; justify-content: flex-start; }
  .zoom-row__label span { writing-mode: horizontal-tb; transform: none; letter-spacing: .18em; color: var(--c-tan); }
  .zoom-row__label::before, .zoom-row__label::after { display: none; }
}

/* ============ Page catégorie (avec filtres) ============ */
.catpage { padding: var(--sp-4) 0 var(--sp-8); }
.catpage__grid { display: grid; grid-template-columns: 252px 1fr; gap: var(--sp-6); align-items: start; }
.filters { position: sticky; top: 150px; background: var(--c-cream); border-radius: var(--r-card); padding: var(--sp-4) var(--sp-3); }
.filters__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-line); margin-bottom: var(--sp-1); }
.filters__head h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.filters__reset { font-size: 10.5px; color: var(--c-navy); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; background: none; border: none; }
.filters__reset:hover { text-decoration: underline; }
.filter-group { border-bottom: 1px solid var(--c-line); }
.filter-group__head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-2); background: none; border: none; font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink); cursor: pointer; }
.filter-group__head svg { width: 16px; height: 16px; transition: transform .2s; color: var(--c-text-soft); }
.filter-group.is-open .filter-group__head svg { transform: rotate(180deg); }
.filter-group__body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.filter-group.is-open .filter-group__body { max-height: 360px; }
.filter-group__body-inner { padding: 0 var(--sp-2) var(--sp-3); }
.filter-opt { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 0; font-size: 14px; color: var(--c-text-soft); cursor: pointer; }
.filter-opt input { width: 17px; height: 17px; accent-color: var(--c-navy); cursor: pointer; flex-shrink: 0; }
.filter-opt:hover { color: var(--c-navy); }

.catalogue-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; margin-bottom: var(--sp-5); }
.catalogue-card__media img { width: 100%; height: 100%; object-fit: cover; min-height: 250px; }
.catalogue-card__body { padding: var(--sp-6); display: flex; flex-direction: column; justify-content: center; }
.catalogue-card__body h1 { font-size: 22px; margin-bottom: var(--sp-3); }
.catalogue-card__body p { color: var(--c-text-soft); font-size: 13.5px; line-height: 1.75; }

.catpage__bar { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.catpage__count { font-size: 13px; color: var(--c-text-soft); margin-right: auto; }
.catpage__count strong { color: var(--c-ink); font-family: var(--font-head); }
.catpage__sort { display: flex; align-items: center; gap: var(--sp-2); }
.catpage__sort label { font-size: 13px; color: var(--c-text-soft); }
.catpage__sort select { padding: 9px 13px; border: 1px solid var(--c-border); border-radius: var(--r-btn); font-family: var(--font-body); font-size: 13px; background: #fff; color: var(--c-ink); cursor: pointer; }
.catpage__note { font-size: 12px; font-style: italic; color: var(--c-text-faint); margin-top: var(--sp-5); }
.catpage__empty { grid-column: 1 / -1; padding: var(--sp-7); text-align: center; color: var(--c-text-soft); display: none; }

/* Bouton "Filtrer" — visible uniquement sur mobile/tablette */
.filters-toggle { display: none; }

@media (max-width: 992px) {
  .catpage__grid { grid-template-columns: 1fr; }
  /* les filtres deviennent un tiroir repliable : ils ne poussent plus les produits en bas */
  .filters { position: static; display: none; margin-bottom: var(--sp-4); }
  .filters.is-open { display: block; }
  .filters-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; margin-bottom: var(--sp-4); padding: 14px 18px;
    background: var(--c-cream); border: 1px solid var(--c-border); border-radius: var(--r-btn);
    font-family: var(--font-head); font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--c-ink); cursor: pointer;
  }
  .filters-toggle svg { width: 18px; height: 18px; transition: transform .2s; flex-shrink: 0; }
  .filters-toggle.is-open svg { transform: rotate(180deg); }
  .catpage .grid-3 { grid-template-columns: 1fr 1fr; }
  .catpage__bar { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .catalogue-card { grid-template-columns: 1fr; }
  .catalogue-card__body { padding: var(--sp-5); }
  .catalogue-card__media img { min-height: 190px; }
}

/* ============ Nos boutiques — carte + liste ============ */
.boutiques-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.boutiques-map { position: sticky; top: 150px; }
#map { height: 640px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--c-border); background: var(--c-cream); z-index: 0; }
.boutiques-map__note { font-size: 12px; color: var(--c-text-faint); margin-top: var(--sp-2); font-style: italic; }
.boutiques-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.boutique-item { display: grid; grid-template-columns: 134px 1fr; background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.boutique-item:hover, .boutique-item.is-active { box-shadow: var(--shadow-2); border-color: var(--c-navy); }
.boutique-item__media img { width: 100%; height: 100%; object-fit: cover; min-height: 148px; }
.boutique-item__body { padding: var(--sp-4); }
.boutique-item__body h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.boutique-item__addr { font-size: 13px; color: var(--c-text-soft); margin-bottom: var(--sp-3); line-height: 1.5; }
.boutique-item__tel { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--c-navy); margin-bottom: var(--sp-3); }
.boutique-item__tel svg { width: 15px; height: 15px; }
.boutique-item__mapbtn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1.5px solid var(--c-border); border-radius: var(--r-btn); padding: 8px 14px; font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.boutique-item__mapbtn:hover { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.boutique-item__mapbtn svg { width: 14px; height: 14px; }
.map-pin { background: var(--c-navy); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.leaflet-popup-content { font-family: var(--font-body); font-size: 13px; }
.leaflet-popup-content strong { font-family: var(--font-head); color: var(--c-navy); }

@media (max-width: 900px) {
  .boutiques-layout { grid-template-columns: 1fr; }
  .boutiques-map { position: static; }
  #map { height: 420px; }
}

/* ============ Panier & Caisse ============ */
.page-title { font-size: clamp(24px,3vw,34px); margin: var(--sp-3) 0 var(--sp-6); }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--c-ink); color: #fff; padding: 13px 22px; border-radius: var(--r-btn); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s; z-index: 200; display: flex; align-items: center; gap: 10px; }
.toast.is-show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.toast svg { width: 18px; height: 18px; color: #6EC071; }

.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-6); align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: var(--sp-3); }
.cart-row { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--sp-4); align-items: center; background: var(--c-paper); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--sp-3); }
.cart-row__img { width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--c-cream); display: block; }
.cart-row__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.cart-row__info h3 { font-size: 15px; margin-bottom: 4px; }
.cart-row__price { font-size: 13px; color: var(--c-text-soft); margin-bottom: var(--sp-2); }
.cart-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-border); border-radius: var(--r-btn); overflow: hidden; }
.qty button { width: 32px; height: 34px; background: var(--c-cream); border: none; font-size: 17px; cursor: pointer; color: var(--c-ink); line-height: 1; }
.qty button:hover { background: var(--c-cream-2); }
.qty span { min-width: 36px; text-align: center; font-weight: 600; font-size: 14px; }
.cart-row__linetotal { font-family: var(--font-head); font-weight: 700; color: var(--c-navy); font-size: 15px; }
.cart-row__remove { background: none; border: none; color: var(--c-text-faint); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0; }
.cart-row__remove:hover { color: var(--c-orange); }

.cart-summary, .checkout-summary { background: var(--c-cream); border-radius: var(--r-card); padding: var(--sp-5); position: sticky; top: 150px; }
.cart-summary h3, .checkout-summary h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-4); }
.cart-summary__row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 14px; padding: 8px 0; color: var(--c-text-soft); }
.cart-summary__total { border-top: 1px solid var(--c-line); margin-top: var(--sp-2); padding-top: var(--sp-3); font-size: 18px; font-weight: 700; color: var(--c-ink); }
.cart-summary__total span:last-child { color: var(--c-navy); font-family: var(--font-head); white-space: nowrap; }
.cart-summary .btn { margin-top: var(--sp-3); }
.cart-empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--c-text-soft); font-size: 16px; }
.cart-empty a.btn { color: #fff; }

.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-6); align-items: start; }
.checkout-form h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; margin: var(--sp-5) 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); }
.checkout-form h3:first-child { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--c-text-soft); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--r-btn); font-family: var(--font-body); font-size: 14px; background: #fff; color: var(--c-ink); }
.field textarea { min-height: 82px; resize: vertical; }
.pay-opts { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.pay-opt { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid var(--c-border); border-radius: var(--r-btn); cursor: pointer; font-size: 14px; transition: border-color .15s, background .15s; }
.pay-opt input { accent-color: var(--c-navy); width: 17px; height: 17px; }
.pay-opt:has(input:checked) { border-color: var(--c-navy); background: #fff; }
.checkout-summary__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line); font-size: 13px; }
.checkout-summary__item img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; background: var(--c-cream); mix-blend-mode: multiply; flex-shrink: 0; }
.checkout-summary__item .n { font-weight: 600; color: var(--c-ink); }
.checkout-summary__item .q { color: var(--c-text-soft); font-size: 12px; }
.checkout-summary__item .p { margin-left: auto; font-weight: 600; color: var(--c-navy); white-space: nowrap; }

.checkout-done { text-align: center; max-width: 580px; margin: 0 auto; padding: var(--sp-7) var(--sp-5); }
.checkout-done__icon { width: 74px; height: 74px; border-radius: 50%; background: var(--c-sage-bg); color: var(--c-sage-text); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-5); }
.checkout-done__icon svg { width: 38px; height: 38px; }
.checkout-done h2 { font-size: 26px; margin-bottom: var(--sp-3); }
.checkout-done p { color: var(--c-text-soft); margin-bottom: var(--sp-4); }
.checkout-done__ref { display: inline-block; background: var(--c-cream); border-radius: var(--r-btn); padding: 9px 18px; font-family: var(--font-head); font-weight: 600; color: var(--c-navy); margin-bottom: var(--sp-6); }

@media (max-width: 900px) {
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .cart-summary, .checkout-summary { position: static; }
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 76px 1fr; }
  .cart-row__right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ============ Finitions mobile ============ */
/* filet de sécurité : aucun débordement horizontal */
body { overflow-x: hidden; }

@media (max-width: 560px) {
  .section { padding: var(--sp-6) 0; }
  .section--sm { padding: var(--sp-5) 0; }
  .wrap { padding: 0 var(--sp-4); }
  .sec-head { margin-bottom: var(--sp-5); }
  /* cibles tactiles confortables */
  .btn { padding: 14px 22px; }
  .btn-sm { padding: 12px 16px; }
  .pdp__trust { gap: var(--sp-2); }
  .pdp__trust span { font-size: 10.5px; }
  .checkout-done { padding: var(--sp-6) var(--sp-3); }
  .cart-summary, .checkout-summary { padding: var(--sp-4); }
}

/* Très petits écrans : on repasse les produits sur 1 colonne */
@media (max-width: 400px) {
  .grid-4, .grid-3, .catpage .grid-3 { grid-template-columns: 1fr; }
  .pcard__name { font-size: 16px; }
  .price-now { font-size: 18px; }
  .hero-content h1 { font-size: 25px; }
  .locator__card .big { font-size: 32px; }
}

/* =====================================================================
   PATCH AUDIT 2026-08 (Digicreative) — responsive mobile & confort tactile
   Aucun libellé modifié. Bloc à conserver en FIN de feuille (les
   correctifs 3 et 5 doivent gagner sur les règles d'origine).
   ===================================================================== */

/* 1) FIX RACINE : le formulaire newsletter du footer imposait une largeur
   minimale de 368px (input sans min-width:0 + bouton nowrap), ce qui
   forçait le viewport de mise en page à ~385px sur tous les téléphones
   de 390px et moins -> site entier légèrement dézoomé, sur TOUTES les
   pages. Même correctif que celui déjà appliqué à .locator__form. */
.newsletter-form { flex-wrap: wrap; }
.newsletter-form input { min-width: 0; flex: 1 1 180px; }

/* 2) « À la loupe » (accueil) : l'image en 460px fixes débordait de
   l'écran et les stats étaient coupées sur mobile. */
.loupe__product img { max-width: min(460px, 100%); height: auto; }

/* 3) iOS zoome brutalement au focus de tout champ < 16px. */
@media (max-width: 768px) {
  .header-search input, .locator__form input, .newsletter-form input,
  .pdp__field select, .catpage__sort select,
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* 4) Cibles tactiles >= 44px (reco Apple/Google) : on agrandit la zone
   cliquable, pas le dessin. Concerne le burger (32×24), les points du
   hero (34×3 !), les points de galerie produit (8×8) et le zoom de la
   carte Leaflet (30×30). */
.nav-toggle { padding: 10px; }
.hero-dots button, .gal__dots button { position: relative; }
.hero-dots button::before, .gal__dots button::before {
  content: ""; position: absolute; inset: -14px;
}
.leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }

/* 5) Lisibilité mobile : tailles minimales relevées, libellés inchangés
   (l'audit relevait des textes à 8-11px). */
@media (max-width: 768px) {
  .promo-bar__inner { font-size: 12px; }
  .sec-head__kicker { font-size: 12px; }
  .tag { font-size: 12px; padding: 5px 10px; }
  .pcard__badge { font-size: 12px; }
  .pcard__dim { font-size: 12px; }
  .hero-badge { width: 84px; height: 84px; }
  .hero-badge strong { font-size: 22px; }
  .hero-badge span { font-size: 9px; }
  .seal span { font-size: 11px; }
  .blog__item__kicker { font-size: 11.5px; }
}

/* 6) Images à hauteur fixée en CSS (logos, moyens de paiement) : la
   largeur doit rester automatique pour que le ratio soit respecté,
   y compris avec les attributs width/height ajoutés sur les <img>
   (l'audit mesurait le logo affiché en 0,72 pour un natif 0,64 et le
   bandeau paiements étiré). */
.brand img, .footer-brand img, .footer-pay img { width: auto; object-fit: contain; }

/* =====================================================================
   PATCH CLIENT 2026-08-05 (v2) — retours de relecture MACACI
   Bloc à conserver en fin de feuille.
   ===================================================================== */

/* C/D/K/M — FIX RACINE : l'attribut height des <img> (ajouté pour le
   layout shift) neutralisait l'aspect-ratio CSS → les visuels des
   sections « Notre différence » et « Zoom » s'affichaient en recadrage
   PORTRAIT (têtes coupées, colonnes immenses, vides autour du texte).
   height:auto rend la main à l'aspect-ratio 4/3. */
.split__media img, .zoom-row__media img { height: auto; }
/* le sujet des photos 16:9 recadrées en 4/3 est à droite (page La marque) ;
   sans effet sur l'accueil dont le visuel est déjà au format 4/3 */
.split__media img { object-position: 70% center; }

/* K/M — cadrage des visuels zoom : sujets à droite, enseigne en haut */
.zoom .zoom-row:nth-of-type(1) .zoom-row__media img { object-position: 72% 30%; }
.zoom .zoom-row--reverse .zoom-row__media img { object-position: 60% center; }
.zoom .zoom-row:nth-of-type(3) .zoom-row__media img { object-position: center 22%; }

/* A — badge héros : en bas à droite sur desktop, plus jamais sur le
   visage du mannequin. Libellé restructuré « Conçus pour durer / 15 ans ». */
.hero-badge { top: auto; bottom: 64px; right: 48px; }
.hero-badge span { margin: 0 0 4px; font-size: 8.5px; padding: 0 12px; }
.hero-badge strong { font-size: 22px; }
/* Sur mobile le sujet (la dame, la famille) occupe le tiers DROIT des trois
   visuels : le badge y touchait les cheveux. Il passe donc en haut à GAUCHE,
   sur le fond (mur, oreillers, plante), loin de tout visage. */
@media (max-width: 768px) {
  .hero-badge { top: 16px; bottom: auto; right: auto; left: 16px; width: 92px; height: 92px; }
  .hero-badge strong { font-size: 18px; }
  .hero-badge span { font-size: 9px; padding: 0 8px; }
}

/* 1/2/4 — héros mobile : voile allégé (plus lumineux) + cadrage par slide */
@media (max-width: 768px) {
  .hero-slide__scrim {
    background: linear-gradient(180deg, rgba(4,26,64,.26) 0%, rgba(4,26,64,.48) 55%, rgba(4,26,64,.80) 100%);
  }
  /* le visage de la dormeuse est dans le quart droit du cliché : sans ce
     recadrage il sortait du champ sur mobile */
  .hero-slide:nth-child(1) img { object-position: 78% center; }
  .hero-slide:nth-child(2) img { object-position: 88% center; }
}

/* Bandeau de réassurance (6 boutiques / fabrication / livraison / durabilité) :
   sur mobile les items étaient collés à gauche, laissant un grand vide à droite.
   Le couple icône + libellé est désormais centré, comme le bandeau services. */
@media (max-width: 768px) {
  .trust__item { justify-content: center; text-align: center; }
}

/* 3 — cartes produit : contenu centré sur mobile (fin du vide à droite).
   Sélecteurs restreints à `.pcard` : les classes `pcard__tags` / `pcard__price`
   sont réutilisées dans la fiche produit, où la colonne reste alignée à gauche. */
@media (max-width: 768px) {
  .pcard__body { align-items: center; text-align: center; }
  .pcard .pcard__tags { justify-content: center; }
  .pcard .pcard__price { justify-content: center; }
}

/* E/11 — bandeau expertise : casse normale (lisibilité), cercles agrandis
   (92 → 176 px) et vignettes PHOTO dédiées, recadrées sur leur sujet
   (gros plan matelas + étiquette GOLD / famille / façade Deux-Plateaux). */
.expertise__item h4 { text-transform: none; font-size: 17px; letter-spacing: .01em; }
.expertise__thumb { width: 176px; height: 176px; border-width: 4px; }
@media (max-width: 768px) {
  .expertise__thumb { width: 140px; height: 140px; }
}

/* 11 — stats « Notre différence » : hiérarchie visuelle harmonisée */
.split__stats { gap: var(--sp-6); }
.split__stats > div { border-left: 2px solid var(--c-tan); padding-left: var(--sp-4); }
.split__stats span { display: block; margin-top: 2px; font-size: 12.5px; }
@media (max-width: 768px) {
  .split__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .split__stats strong { font-size: 24px; }
}

/* H/9 — « À la loupe » : le matelas s'affichait à 492 px dans une section de
   1232 px (perdu au milieu du vide) et le filigrane, en taille fixe et sur une
   seule ligne, était coupé aux deux extrémités — y compris sur PC.
   1. Visuel produit fourni en double définition (984 px) et affiché jusqu'à
      620 px de large.
   2. Marges verticales de la section réduites (96 → 60 px).
   3. Filigrane : taille proportionnelle à la largeur d'écran, donc jamais
      rogné, du mobile au grand écran, sans césure. */
.section.loupe { padding: 44px 0 56px; }
/* le filigrane garde sa propre bande : le visuel ne masque plus le texte */
.loupe__inner { grid-template-columns: 44px 1.3fr 0.85fr; align-items: center; padding-top: 72px; }
.loupe__product img { max-width: min(620px, 100%); margin-bottom: var(--sp-4); }
.loupe__ghost {
  top: 16px;
  font-size: min(7vw, 104px);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
@media (max-width: 1080px) {
  .loupe__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (max-width: 768px) {
  .section.loupe { padding: 32px 0 40px; }
  .loupe__inner { padding-top: 46px; }
  .loupe__ghost { top: 10px; }
  .loupe__product img { max-width: min(420px, 100%); }
}
/* les chiffres clés ne doivent jamais se couper en deux (« 15 » / « ans ») */
.loupe__specs .stat strong, .split__stats strong, .seal strong, .locator__card .big {
  white-space: nowrap;
}
@media (max-width: 560px) {
  .loupe__specs .stat strong { min-width: 78px; font-size: 26px; }
  .loupe__specs .stat span { font-size: 13px; }
}

/* 8/N — galerie produit : produit entier et plus grand (contain sur les
   rendus détourés), fond légèrement plus chaud/premium ; la photo
   d'ambiance (gal-insitu) reste en cover. */
.gal__stage, .gal__thumb { background: #f4ecdf; }
.gal__slide img { object-fit: contain; padding: 14px; }
.gal__slide img.gal-insitu { object-fit: cover; padding: 0; }
/* FLASH BLANC AU CHANGEMENT DE VUE : les visuels portaient un
   `mix-blend-mode: multiply` (hérité des rendus sur fond blanc d'origine).
   Or, pendant le fondu, une opacité intermédiaire crée un contexte
   d'empilement qui ISOLE le calque : la fusion cesse de s'appliquer le temps
   de la transition, le visuel repasse en blanc pur, puis redevient fondu à la
   fin — d'où le clignotement. Les images étant réellement détourées
   (transparence vérifiée), la fusion n'a plus lieu d'être. */
.gal__slide img, .gal__thumb img { mix-blend-mode: normal; }
/* La 4e vignette (photo d'ambiance du Gold) portait la rangée à 328 px
   insécables : sur un écran de 320 px le viewport de mise en page passait à
   344 px et la galerie était coupée. */
.gal__thumbs { flex-wrap: wrap; }
@media (max-width: 560px) {
  .gal__thumb { width: 64px; height: 64px; }
}

/* B/6 — carte catégorie « Nos matelas » : visuel DÉDIÉ cat-matelas-card.webp
   = photo étendue par IA (Ideogram reframe 05/08) — la photo d'origine
   coupait la tête de lit et le coin droit du matelas, aucun recadrage ne
   pouvait donc montrer le lit entier. Cartes plus hautes sur mobile et
   tablette pour conserver le lit complet. */
@media (max-width: 900px) {
  .cat-bento { grid-template-rows: 320px 200px 200px; }
}
@media (max-width: 560px) {
  .cat-bento { grid-template-rows: 280px repeat(3, 180px); }
}

/* Boutons à libellé long sur très petit écran : « Explorer nos conseils et
   astuces » mesurait 335 px insécables, ce qui poussait le viewport de mise en
   page à 351 px sur un écran de 320 px (site dézoomé + bouton coupé). On
   autorise le retour à la ligne : les libellés courts, eux, tiennent toujours
   sur une ligne. */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
}

/* Tableau de caractéristiques descendu dans un accordéon : il ne doit plus
   porter son filet supérieur ni sa marge de bloc autonome. */
.acc__body .pdp__specs { margin-bottom: 0; border-top: none; }
.acc__body .pdp__specs li:last-child { border-bottom: none; padding-bottom: 0; }

/* Accordéons remontés dans la colonne d'achat, sous « Commander par
   téléphone » : ordre boutons → mention de prix → accordéons → réassurance. */
.pdp__acc { margin: var(--sp-5) 0 var(--sp-3); }
.pdp__acc .acc__head { font-size: 14.5px; padding: var(--sp-3) 0; }
.pdp__acc .acc__body-inner { font-size: 13.5px; }
.pdp__acc .pdp__plus { margin-bottom: 0; }
.pdp__acc .pdp__plus li { font-size: 13.5px; margin-bottom: var(--sp-2); }
.pdp__acc .pdp__specs li { font-size: 13.5px; padding: 9px 0; }
.pdp__info .pdp__trust { margin-top: var(--sp-2); }

/* J — accordéons fiche produit : « Les + » ouvert par défaut
   (max-height:none = jamais de contenu rogné, même si la police web
   charge après l'init JS ; le JS remet une valeur px au premier clic) */
.acc__item.is-open .acc__body { max-height: none; }
.acc__body .pdp__plus { margin-bottom: 0; }