/* ============================================================
   MÉRIDIAN — theme.css (design system complet)
   Chargé automatiquement par PrestaShop. Sections : tokens,
   base (reset/typo/layout/boutons), composants. Le CSS par page
   (catalog/product/checkout) est chargé via stylesheets.tpl.
   ============================================================ */

/* ============================================================
   MÉRIDIAN — Design tokens
   Minimalisme éditorial luxe. Canvas blanc chaud, encre chaude,
   accent clay. Pas de dark mode.
   ============================================================ */

:root {
  /* canvas neutre chaud */
  --bg:        oklch(0.987 0.004 80);
  --bg-2:      oklch(0.965 0.005 80);   /* section alternée */
  --surface:   oklch(0.998 0.002 80);   /* cartes sur bg-2 */
  --ink:       oklch(0.205 0.012 65);   /* quasi-noir chaud */
  --ink-soft:  oklch(0.46 0.012 65);
  --ink-faint: oklch(0.62 0.010 65);
  --line:      oklch(0.885 0.006 75);
  --line-soft: oklch(0.93 0.005 75);
  --accent:    oklch(0.55 0.094 48);    /* clay sourd */
  --accent-ink: oklch(0.985 0.004 80);  /* texte sur accent */
  --sale:      oklch(0.53 0.135 30);    /* sienne brûlée (promos) */

  /* typographie */
  --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* échelle & motion */
  --maxw: 1480px;
  --gutter: clamp(20px, 4.5vw, 72px);
  --radius: 2px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .55s;

  /* header */
  --hdr-h: 70px;

  --shadow-soft: 0 1px 2px oklch(0.2 0.01 65 / .04), 0 18px 40px -20px oklch(0.2 0.01 65 / .18);
  --shadow-lift: 0 2px 6px oklch(0.2 0.01 65 / .06), 0 30px 60px -28px oklch(0.2 0.01 65 / .28);

  color-scheme: light;
}

/* ============================================================
   MÉRIDIAN — Base : reset, fontes, typo, layout, boutons, utils
   ============================================================ */

/* ---------- Fontes self-hosted (font-display: swap) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/bodoni-moda-variable.woff2") format("woff2");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip (et non hidden) : empêche le scroll horizontal des éléments full-bleed
     SANS faire du <body> un conteneur de défilement — sinon position:sticky casse. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* En-tête sticky : c'est <header id="header"> (enfant direct de <main>, pleine
   hauteur de page) qui doit porter le sticky — pas .mrd-header qui, imbriquée,
   serait bornée à la hauteur de #header et se détacherait dès le scroll. */
#header { position: sticky; top: 0; z-index: 60; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Typographie ---------- */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.1; }
.display { font-family: var(--font-display); font-weight: 500; line-height: .98; letter-spacing: -0.01em; }
.serif { font-family: var(--font-display); }
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint);
}
.t-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ---------- Layout ---------- */
.mrd-container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.mrd-section { padding-block: clamp(40px, 6vw, 90px); }
/* sections consécutives : le padding ne « collapse » pas comme les marges →
   on retire le padding-top quand une section en suit une autre, pour éviter
   le double espace (bottom de l'une + top de la suivante). */
.mrd-section + .mrd-section { padding-top: 0; }

/* Progressive enhancement : avec JS, on masque immédiatement les replis sans-JS
   (.ps-hidden-by-js) — évite le flash du bouton « Choisir » au paiement, etc.
   Le cœur PrestaShop les masque aussi mais trop tard (JS en bas de page). */
.js .ps-hidden-by-js { display: none; }
.mrd-full .mrd-container { max-width: none; }

/* Aligne le conteneur Bootstrap du thème sur l'échelle MÉRIDIAN */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
/* évite le double gutter quand un .mrd-container est imbriqué dans .container */
.container .mrd-container { max-width: none; padding-inline: 0; margin-inline: 0; }

/* ---------- Boutons ---------- */
.mrd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 16px 30px; border-radius: var(--radius); position: relative;
  transition: all .4s var(--ease); white-space: nowrap; border: 1px solid transparent;
}
.mrd-btn-solid { background: var(--ink); color: var(--bg); }
.mrd-btn-solid:hover { background: var(--accent); color: var(--accent-ink); }
.mrd-btn-outline { border-color: var(--ink); color: var(--ink); }
.mrd-btn-outline:hover { background: var(--ink); color: var(--bg); }
.mrd-btn-ghost { color: var(--ink); padding-inline: 4px; }
.mrd-btn-ghost::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.mrd-btn-ghost:hover::after { transform: scaleX(1); }
.mrd-btn-sm { padding: 11px 20px; font-size: 11px; }
.mrd-btn-lg { padding: 19px 38px; }
.mrd-btn-block { width: 100%; }

/* lien à soulignement animé */
.ulink { position: relative; }
.ulink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.ulink:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Badges ---------- */
.badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 1px; line-height: 1; display: inline-block;
}
.badge-sale { background: var(--sale); color: #fff; }
.badge-new { background: var(--ink); color: var(--bg); }
.badge-soft { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

/* ---------- Utilitaires ---------- */
.hairline { height: 1px; background: var(--line); border: 0; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.center { text-align: center; }

/* révélation au scroll (IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }

/* masquage scrollbar pour carrousels */
.noscroll::-webkit-scrollbar { display: none; }
.noscroll { -ms-overflow-style: none; scrollbar-width: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   MÉRIDIAN — Composants front-office
   Header / méga-menu / mobile / hero / carrousels / cartes /
   catégories / réassurance / about / marques / footer / divers
   ============================================================ */

/* ============ Bandeau d'annonce ============ */
.mrd-announce {
  background: var(--announce-bg, var(--ink)); color: var(--announce-fg, var(--bg)); text-align: center;
  padding: 9px 16px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500;
}
.mrd-announce .bandeau-item { display: inline-flex; gap: 10px; align-items: center; justify-content: center; }
.mrd-announce img { height: 16px; width: auto; }

/* Ticker vertical (activé par JS) : un message à la fois, qui défile vers le haut */
.mrd-announce .bandeau.is-ticker { position: relative; overflow: hidden; }
.mrd-announce .bandeau.is-ticker .bandeau-item {
  position: absolute; inset: 0; display: flex; gap: 10px; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(105%);
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.mrd-announce .bandeau.is-ticker .bandeau-item.is-active { opacity: 1; transform: translateY(0); }
.mrd-announce .bandeau.is-ticker .bandeau-item.is-leaving { opacity: 0; transform: translateY(-105%); }

/* ============ Header ============ */
.mrd-header {
  position: relative; z-index: 60; color: var(--mrd-hdr-fg, var(--ink));
  background: var(--mrd-hdr-bg, color-mix(in oklch, var(--bg) 90%, transparent));
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
/* variante transparente (hero fondu) : appliquée tant qu'on n'a pas scrollé */
.mrd-header[data-transparent="true"]:not([data-scrolled="true"]):not([data-mega-open="true"]) {
  color: #fff; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* en transparent, la ligne séparatrice de la nav-row (style centered) passe en blanc translucide */
.mrd-header[data-transparent="true"]:not([data-scrolled="true"]):not([data-mega-open="true"])[data-style="centered"] .mrd-nav-row { border-top-color: rgba(255,255,255,.22); }
.mrd-header-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--hdr-h);
}
/* style classic (header1) : logo gauche / nav centre / icônes droite (défaut, ci-dessus) */
/* style centered (header2) : icône recherche gauche / logo centre / icônes droite + nav dessous */
.mrd-header[data-style="centered"] .mrd-nav-row { border-top: 1px solid var(--line-soft); }
.mrd-header[data-style="centered"] .mrd-nav { height: 46px; }
/* style minimal (header3) : bouton « Menu » (ouvre le tiroir) gauche / logo centre / icônes droite */
.mrd-menu-btn { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.mrd-menu-btn:hover { opacity: .6; }
.mrd-menu-btn svg { width: 22px; height: 22px; }
.mrd-nav-source[hidden] { display: none; }
.mrd-logo { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: 0.04em; color: inherit; justify-self: center; }
.mrd-logo img { height: 28px; width: auto; }

.mrd-nav { display: flex; gap: 34px; justify-content: center; align-items: center; }
.mrd-nav-item { position: static; display: inline-flex; align-items: center; }
.mrd-nav-link {
  font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
  padding: 6px 0; color: inherit; opacity: .9; transition: opacity .3s;
}
.mrd-nav-link:hover { opacity: 1; }
.mrd-nav-link.is-accent { color: var(--accent); }
/* parent affiché en image (logo) : dimensionnement fait en inline dans menu.tpl
   (rendu serveur) pour être fiable même si le CSS combiné CCC n'est pas régénéré */
.mrd-header[data-mega-open="true"] .mrd-nav-link:not(:hover) { opacity: .55; }

.mrd-icons { display: flex; align-items: center; gap: 0; justify-self: end; }
.mrd-icon-btn {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center;
  color: inherit; transition: opacity .25s;
}
.mrd-icon-btn:hover { opacity: .6; }
.mrd-icon-dot {
  position: absolute; top: 5px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--accent); color: var(--accent-ink);
  font-size: 9.5px; font-weight: 700; display: grid; place-items: center; font-family: var(--font-sans);
}

/* barre mobile [menu][logo][recherche·panier] */
.mrd-header-mobile { display: none; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; }
.mrd-tap { width: 44px; height: 44px; display: grid; place-items: center; color: inherit; }
.mrd-header-mobile > .mrd-tap:first-child { justify-self: start; margin-left: -10px; }
.mrd-header-mobile .mrd-logo { justify-self: center; }
.mrd-header-mobile .mrd-mob-right { justify-self: end; display: flex; align-items: center; }

/* ============ Méga-menu (colonnes inline lvl2 → lvl3 → lvl4) ============ */
.mega-panel {
  position: absolute; left: 0; right: 0; top: 100%; background: white;
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-soft);
  opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none;
  transition: opacity .32s var(--ease), transform .4s var(--ease), visibility .32s;
}
.mega-panel.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.mega-inner { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 56px); padding-block: 32px 38px; }
.mega-inner:has(.mega-feature) { grid-template-columns: 1fr 280px; }
.mrd-chev { transition: transform .3s var(--ease); }
.mega-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(20px, 2.5vw, 40px); align-content: start; }
.mega-column { min-width: 0; }
.mega-col-title { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); padding-bottom: 4px; margin-bottom: 12px; }
.mega-sublist { display: flex; flex-direction: column; gap: 9px; }
.mega-sublink { text-align: left; font-size: 14px; color: var(--ink-soft); transition: color .2s; line-height: 1.3; }
.mega-sublink:hover { color: var(--ink); }
.mega-l4 { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 4px 0; padding-left: 12px; border-left: 1px solid var(--line); }
.mega-l4-link { text-align: left; font-size: 12.5px; color: var(--ink-faint); transition: color .2s; }
.mega-l4-link:hover { color: var(--accent); }
.mega-feature { position: relative; border-radius: 4px; overflow: hidden; text-align: left; align-self: stretch; min-height: 300px; display: block; }
.mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.mega-feature:hover img { transform: scale(1.05); }
.mega-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.15 0.01 65 / .55), transparent 62%); }
.mega-feature-cap { position: absolute; left: 20px; bottom: 18px; z-index: 2; color: #fff; }
.mega-feature-cap .display { font-size: 24px; font-weight: 500; display: block; margin-top: 4px; }

/* marques A→Z */
.mega-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: clamp(16px, 2vw, 30px) clamp(20px, 2.5vw, 40px); align-content: start; }
.mega-brand-group { min-width: 0; }
.mega-brand-letter { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--accent); line-height: 1; margin-bottom: 12px; }

/* ============ Menu mobile — panneau drill-down ============ */
.msheet-overlay { position: fixed; inset: 0; z-index: 94; background: oklch(0.15 0.01 65 / .42); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.msheet-overlay.is-open { opacity: 1; visibility: visible; }
.msheet {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 95; width: min(90vw, 420px);
  background: var(--bg); display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .42s var(--ease);
  box-shadow: var(--shadow-lift); height: 100dvh;
}
.msheet.is-open { transform: translateX(0); }
.msheet-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); min-height: 60px; flex-shrink: 0; }
.msheet-title { font-family: var(--font-display); font-size: 20px; letter-spacing: .02em; }
.msheet-close { width: 40px; height: 40px; display: grid; place-items: center; margin-right: -8px; color: inherit; }
.msheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.msheet-list, .msheet-sub ul { list-style: none; margin: 0; }
.msheet-list { padding: 6px 18px calc(24px + env(safe-area-inset-bottom)); }

/* ligne d'un niveau : libellé (lien → page) + chevron séparé (déplie) facon Nike */
.msheet-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.msheet-node:last-child > .msheet-row { border-bottom: 0; }
.msheet-item {
  display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0;
  text-align: left; padding: 14px 2px; min-height: 52px; color: inherit; background: none;
}
.msheet-item:active { background: color-mix(in oklch, var(--ink) 5%, transparent); }
.msheet-item.is-static { cursor: default; }
.msheet-item.is-static:active { background: none; }
.msheet-item .lbl { font-size: 16px; font-weight: 500; }
.msheet-item.is-root .lbl { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: .01em; }
.msheet-item.is-accent .lbl { color: var(--accent); }

/* chevron de dépliage : tap target distinct à droite (n'ouvre pas la page) */
.msheet-toggle { flex: 0 0 auto; width: 54px; display: grid; place-items: center; color: var(--ink-soft); background: none; align-self: stretch; }
.msheet-toggle:active { background: color-mix(in oklch, var(--ink) 5%, transparent); }
.msheet-toggle .mrd-chev { transition: transform .3s var(--ease); }
.msheet-node.is-open > .msheet-row > .msheet-toggle .mrd-chev { transform: rotate(180deg); }

/* sous-niveau repliable : technique grid 0fr → 1fr (hauteur auto animée) */
.msheet-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.msheet-node.is-open > .msheet-sub { grid-template-rows: 1fr; }
.msheet-sub > ul { overflow: hidden; min-height: 0; padding-left: 14px; margin-left: 2px; }
.msheet-sub .msheet-item .lbl { font-family: var(--font-sans); font-size: 15px; }
/* dernier niveau (liens de destination, sans enfant) : encre plus claire pour la hiérarchie */
.msheet-sub .msheet-item.is-leaf .lbl { color: var(--ink-soft); font-weight: 400; }

/* ============ Hero ============ */
.hero { position: relative; overflow: hidden; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.hero-full { height: 100vh; min-height: 620px; }
.hero-full.overlay { margin-top: calc(-1 * var(--hdr-h)); }
/* header "centered" : 2 rangées (rangée --hdr-h + nav-row 46px + 1px bordure) → on remonte d'autant */
.hero-full.overlay.is-centered { margin-top: calc(-1 * (var(--hdr-h) + 47px)); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); pointer-events: none; }
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-bg { position: absolute; inset: -6% 0; }
/* le <picture> doit remplir sa zone (display:block + 100%) pour que le height:100%
   de l'<img> se résolve → sinon l'image ne couvre plus toute la hauteur du hero.
   N'affecte pas la bascule desktop/mobile : la <source media> gère juste la ressource. */
.hero-bg picture, .hero-split-img picture { display: block; width: 100%; height: 100%; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.15 0.01 65 / .6) 2%, oklch(0.15 0.01 65 / .12) 42%, transparent 70%); }
.hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(64px, 11vh, 130px); color: #fff; }
.hero-content .eyebrow { color: rgba(255,255,255,.78); margin-bottom: 20px; }
.hero-content h1, .hero-content h2 { font-size: clamp(52px, 9vw, 150px); font-weight: 500; color: #fff; margin-bottom: 26px; }
.hero-content p { font-size: 19px; max-width: 460px; color: rgba(255,255,255,.85); margin-bottom: 36px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-ctas .mrd-btn-solid { background: #fff; color: #111; }
.hero-ctas .mrd-btn-light { border: 1px solid rgba(255,255,255,.6); color: #fff; }
/* position horizontale du texte (config slider → $textPosition : left / center / right) */
.hero-content.is-left   { align-items: flex-start; text-align: left; }
.hero-content.is-center { align-items: center;     text-align: center; }
.hero-content.is-right  { align-items: flex-end;   text-align: right; }
.hero-content.is-center .hero-ctas { justify-content: center; }
.hero-content.is-right  .hero-ctas { justify-content: flex-end; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); transition: background .3s; z-index: 3; }
.hero-arrow:hover { background: rgba(255,255,255,.28); }
.hero-arrow.prev { left: clamp(16px, 3vw, 40px); }
.hero-arrow.next { right: clamp(16px, 3vw, 40px); }
.hero-dots { position: absolute; left: 0; right: 0; bottom: clamp(28px, 5vh, 56px); display: flex; gap: 10px; justify-content: flex-start; padding-inline: var(--gutter); z-index: 3; }
.hero-dot { height: 3px; width: 22px; background: rgba(255,255,255,.45); border-radius: 3px; transition: all .5s var(--ease); }
.hero-dot.is-active { width: 46px; background: #fff; }
/* hero split */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; min-height: min(92vh, 880px); border-bottom: 1px solid var(--line); }
.hero-split-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px,7vw,110px) clamp(24px,6vw,96px); }
.hero-split-text h1 { font-size: clamp(44px,6.5vw,104px); margin-bottom: 26px; }
.hero-split-text p { font-size: 18px; max-width: 440px; color: var(--ink-soft); margin-bottom: 38px; }
.hero-split-img { position: relative; overflow: hidden; min-height: 100%; }
.hero-split-img img { width: 100%; height: 100%; object-fit: cover; }

/* ============ Carrousel produits ============ */
.mrd-carousel { position: relative; }
/* zone faisant office de référence pour les flèches : ne contient que la piste,
   pas le titre — les boutons se centrent ainsi sur l'image et non sur tout le bloc.
   container-type permet d'exprimer le centre de l'image en unités cqw. */
.mrd-carousel-viewport { position: relative; container-type: inline-size; }
/* hauteur d'image fixe dans le carrousel → centre des flèches déterministe.
   On force l'image à remplir la boîte 3/4 (cadrage cover) : la chaîne
   .pcard-link > picture étant inline, height:100% ne se propage pas seul. */
.mrd-carousel .pcard-media { aspect-ratio: 3 / 4; }
.mrd-carousel .pcard-link { display: block; height: 100%; }
.mrd-carousel .pcard-img { position: absolute; inset: 0; }
.mrd-carousel .pcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mrd-carousel-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 38px; flex-wrap: wrap; gap: 16px; }
.mrd-carousel-head h2 { font-family: var(--font-display); font-size: clamp(28px,4vw,48px); font-weight: 500; }
.mrd-carousel-track { display: flex; gap: clamp(12px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
/* min-width:0 → l'item reste à son flex-basis ; un nom long (white-space:nowrap
   sur mobile) est clippé par overflow:hidden au lieu d'élargir la carte et donc l'image */
.mrd-carousel-track > * { scroll-snap-align: start; flex: 0 0 calc((100% - 3 * clamp(12px,1.6vw,22px)) / 4); min-width: 0; }
/* top = moitié de la hauteur d'image = largeur_carte × (4/3) / 2.
   En 4 colonnes : largeur_carte = (100cqw − 3·gap) / 4 → centre = (100cqw − 3·gap) / 6. */
.mrd-carousel-btn { position: absolute; top: calc((100cqw - 3 * clamp(12px, 1.6vw, 22px)) / 6); transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--shadow-soft); z-index: 2; transition: background .3s; }
.mrd-carousel-btn:hover { background: var(--ink); color: var(--bg); }
.mrd-carousel-btn.prev { left: -10px; }
.mrd-carousel-btn.next { right: -10px; }

/* ============ Carte produit (.pcard) ============ */
.pcard { height: 100%; position: relative; }
.pcard-media { position: relative; overflow: hidden; border-radius: 2px;}
.pcard-link { position: relative; display: block; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pcard:hover .pcard-media img { transform: scale(1.05); }
/* image de survol : 2e visuel en fondu doux par-dessus la cover (desktop uniquement) */
.pcard-img-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .55s var(--ease); }
.pcard-img-hover img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover .pcard-img-hover { opacity: 1; }
}
.pcard-flags { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }

/* ---------- Pastilles produit (flags) : « nouveau », « promotion »… ----------
   Rendu par catalog/_partials/product-flags.tpl sur la miniature ET la fiche.
   Le flag « discount » (prix réduit) est retiré côté template. */
.product-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.product-flag {
  display: inline-block; line-height: 1; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 1px; background: var(--ink); color: var(--bg);
}
.product-flag.new { background: var(--ink); color: var(--bg); }              /* nouveau */
.product-flag.on-sale { background: var(--sale); color: #fff; }             /* promotion */
.product-flag.online-only, .product-flag.pack { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
/* sur la fiche produit : espace sous les pastilles uniquement s'il y en a */
.article-info .product-flags:has(.product-flag) { margin-bottom: 14px; }
.pcard-wish { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--ink); opacity: 0; transform: scale(.85); transition: all .35s var(--ease); box-shadow: var(--shadow-soft); z-index: 2; }
.pcard:hover .pcard-wish { opacity: 1; transform: scale(1); }
/* cœur wishlist : toute la pastille est cliquable + survolable */
.pcard-wish .wishlist-button { width: 100%; height: 100%; }
.pcard-wish .wishlist { display: grid; place-items: center; width: 100%; height: 100%; color: inherit; }
.pcard-wish .wishlist svg { width: 20px; height: 20px; display: block; }
.pcard-wish .wishlist svg path { stroke: var(--ink); fill: none; transition: fill .25s var(--ease), stroke .25s var(--ease); }
/* survol : le cœur change de couleur et se remplit */
.pcard-wish:hover .wishlist svg path { stroke: var(--sale); fill: var(--sale); }
/* produit déjà en wishlist : affiché d'office dans la couleur de survol */
.pcard-wish .wishlist-button.active .wishlist svg path { stroke: var(--sale); fill: var(--sale); }
.pcard-qa { position: absolute; left: 14px; right: 14px; bottom: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--bg); color: var(--ink); border: 1px solid var(--ink); border-radius: 2px; padding: 13px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: all .4s var(--ease); z-index: 2; }
.pcard:hover .pcard-qa { opacity: 1; transform: none; }
.pcard-qa:hover { background: var(--ink); color: var(--bg); }
/* mobile : cartes 2 colonnes → bouton « Aperçu » plus compact (sinon trop gros) */
@media (max-width: 700px) {
  .pcard-qa { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; font-size: 9.5px; gap: 6px; letter-spacing: .08em; }
  .pcard-qa svg { width: 12px; height: 12px; }
}
/* titre + prix sur la MÊME ligne (le titre prend la place, le prix reste à droite) */
.pcard-meta { margin-top: 14px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pcard-name { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; flex: 1 1 auto; min-width: 0; }
.pcard-name a { color: inherit; }
/* marque : bloc pleine largeur AU-DESSUS du titre ET du prix */
.pcard-sub { margin-top: 14px; margin-bottom: 4px; }
.pcard-sub + .pcard-meta { margin-top: 0; }
.pcard .variant-links + .pcard-sub { margin-top: 9px; }
/* pastilles de couleur sur la carte (option configCatalogue → couleurs ; rendu par variant-links.tpl)
   placées AU-DESSUS du titre/prix */
.pcard .variant-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.pcard .variant-links + .pcard-meta { margin-top: 9px; }
.pcard .variant-links a { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); background-size: cover; background-position: center; transition: box-shadow .2s var(--ease); }
.pcard .variant-links a:hover { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--ink); }
.pcard-price { font-size: 14.5px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.pcard-price .old { color: var(--ink-faint); text-decoration: line-through; font-weight: 400; margin-right: 6px; }
.pcard-price .now.is-sale { color: var(--sale); }

/* ============ Catégories ============ */
.cat-head { margin-bottom: 38px; }
.cat-head h2 { font-family: var(--font-display); font-size: clamp(28px,4vw,48px); font-weight: 500; }
/* Carte commune : image plein cadre, overlay dégradé, contenu centré */
.cat-card { position: relative; overflow: hidden; border-radius: 3px; display: block; text-align: center; background: var(--ink); }
.cat-card img, .cat-card .cat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.cat-card:hover img, .cat-card:hover .cat-img { transform: scale(1.05); }
.cat-card-ov { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, oklch(0.15 0.01 65 / .12), oklch(0.15 0.01 65 / .32)); }
.cat-card-body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; color: #fff; }
.cat-card-eyebrow { color: rgba(255,255,255,.8); }
.cat-card-name { font-family: var(--font-sans); font-size: clamp(20px,2vw,30px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.cat-card-link { position: relative; padding-bottom: 3px; font-size: 13.5px; color: #fff; }
.cat-card-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: center; transition: transform .4s var(--ease); }
.cat-card:hover .cat-card-link::after { transform: scaleX(0); }
/* V1 — éditorial : disposition ADAPTÉE au nombre de catégories (classe cat-n-{N}) */
.cat-grid { display: grid; gap: 16px; }
.cat-grid.cat-n-3, .cat-grid.cat-n-4, .cat-grid.cat-n-5 { height: clamp(520px, 60vw, 720px); }
/* 1 : bandeau large */
.cat-grid.cat-n-1 { grid-template-columns: 1fr; height: clamp(360px, 40vw, 500px); }
/* 2 : deux grandes cartes */
.cat-grid.cat-n-2 { grid-template-columns: 1fr 1fr; height: clamp(420px, 46vw, 560px); }
/* 3 : une grande à gauche + deux empilées à droite */
.cat-grid.cat-n-3 { grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; }
.cat-grid.cat-n-3 .cat-card:first-child { grid-column: 1; grid-row: 1 / span 2; }
/* 4 : grande gauche / 2 empilées centre / grande droite (disposition d'origine) */
.cat-grid.cat-n-4 { grid-template-columns: 1.15fr 1fr 1.15fr; grid-template-rows: 1fr 1fr; }
.cat-grid.cat-n-4 .cat-card:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.cat-grid.cat-n-4 .cat-card:nth-child(2) { grid-column: 2; grid-row: 1; }
.cat-grid.cat-n-4 .cat-card:nth-child(3) { grid-column: 2; grid-row: 2; }
.cat-grid.cat-n-4 .cat-card:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
/* 5 : grande gauche (2 rangées) + 2×2 à droite */
.cat-grid.cat-n-5 { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.cat-grid.cat-n-5 .cat-card:first-child { grid-column: 1; grid-row: 1 / span 2; }
/* 6 et plus : grille régulière 3 colonnes */
.cat-grid.cat-n-6 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(240px, 24vw, 340px); }

/* V2 — uniforme : cartes égales, nombre de colonnes selon le nombre de catégories.
   Hauteur de rangée définie sinon les cartes (sans contenu en flux) s'effondrent. */
.cat-uniform { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(340px, 27vw, 420px); gap: 16px; }
.cat-uniform.cat-n-1 { grid-template-columns: 1fr; }
.cat-uniform.cat-n-2 { grid-template-columns: repeat(2, 1fr); }
.cat-uniform.cat-n-3, .cat-uniform.cat-n-5, .cat-uniform.cat-n-6 { grid-template-columns: repeat(3, 1fr); }

/* ============ Réassurance (trust) ============ */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 40px; }
.trust-item { display: flex; gap: 16px; align-items: flex-start; padding: 44px 0; }
.trust-ico { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); background: var(--surface); }
.trust-ico img { width: 24px; height: 24px; object-fit: contain; }
.trust-item .title { font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.trust-item .sub { color: var(--ink-soft); font-size: 13.5px; }
/* slider mobile */
.trust-slider { display: none; overflow: hidden; }
.trust-slider-track { display: flex; transition: transform .55s var(--ease); }
.trust-slider-track .trust-item { flex: 0 0 100%; flex-direction: column; align-items: center; text-align: center; padding: 8px 0; }
.trust-dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.trust-dots button { width: 7px; height: 7px; border-radius: 7px; background: var(--line); transition: all .4s var(--ease); }
.trust-dots button.is-active { width: 22px; background: var(--accent); }

/* La section « À propos » est éditée via l'éditeur PrestaShop → pas de style
   imposé par le thème, mise en forme gérée au cas par cas dans l'éditeur. */

/* ============ Marques (bandeau) ============ */
.brand-strip { text-align: center; }
.brand-strip h2 { font-size: clamp(24px, 3vw, 40px); margin-bottom: 32px; } /* font-family fournie par .display */

.brand-item { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-item img { max-height: 54px; width: auto; }

/* style par défaut : rangée centrée qui passe à la ligne */
.brand-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 64px); }

/* style "brand2" : défilement continu (marquee). La piste est dupliquée dans le tpl ;
   width:max-content + flex-shrink:0 évitent que les logos se compressent, et on défile
   d'exactement une moitié (translateX(-50%)) pour une boucle sans couture. */
.brand-track { overflow: hidden; }
.brand-track-inner { display: flex; width: max-content; align-items: center; animation: brand-marquee 32s linear infinite; }
.brand-track-inner .brand-item { margin-right: clamp(24px, 4vw, 64px); } /* espacement uniforme (gap laisserait une couture au raccord) */
.brand-track:hover .brand-track-inner { animation-play-state: paused; }
@keyframes brand-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .brand-track-inner { animation: none; } }

/* ============ Footer ============ */
.mrd-footer { border-top: 1px solid var(--line); background: var(--foot-bg, var(--bg-2)); color: var(--foot-fg, var(--ink-soft)); margin-top: auto; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr)); gap: 40px; }
.foot-about { max-width: 360px; }
.foot-about p { font-size: 14.5px; color: inherit; margin: 20px 0 24px; line-height: 1.6; }
.foot-col .eyebrow { margin-bottom: 18px; }
.foot-col ul { display: flex; flex-direction: column; gap: 12px; }
.foot-col a { font-size: 14px; color: inherit; }
.foot-col-toggle { display: none; }
.foot-social { display: flex; gap: 8px; margin-top: 26px; }
.foot-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: inherit; transition: all .3s var(--ease); }
.foot-social a:hover { border-color: var(--ink); color: var(--ink); }
.foot-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 12px; color: inherit; opacity: .82; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
/* eyebrow (titres de colonnes) + copyright suivent la couleur configurée en back-office (--foot-fg) */
.mrd-footer .eyebrow { color: inherit; }
/* logo footer : hauteur libre (l'attribut height a été retiré) */
.foot-logo { height: auto; }

/* ---- Bande newsletter (hook displayFooterBefore) — maquette « NewsletterBand » ---- */
.nlb { border-top: 1px solid var(--line); }
.nlb[data-tone="surface"] { background: var(--bg); }
.nlb-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(36px, 5vw, 60px); }
.nlb-copy { min-width: 0; }
.nlb-form-wrap { min-width: 0; }
.nlb-msg { margin-bottom: 16px; }
.nlb-field { display: flex; gap: 10px; border-bottom: 1.5px solid var(--ink); padding-bottom: 4px; }
.nlb-field input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 16px; padding: 12px 2px; font-family: var(--font-sans); }
.nlb-field .btn { flex-shrink: 0; }
.nlb-note { font-size: 11.5px; margin-top: 10px; line-height: 1.5; }
/* case à cocher RGPD (maquette) */
.nlb-gdpr { display: flex; gap: 11px; align-items: flex-start; text-align: left; width: 100%; margin-top: 18px; cursor: pointer; }
.nlb-gdpr-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.nlb-gdpr-box { flex-shrink: 0; margin-top: 1px; width: 19px; height: 19px; border-radius: 3px; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--accent-ink); transition: background .2s var(--ease), border-color .2s var(--ease); }
.nlb-gdpr-box svg { opacity: 0; transition: opacity .15s var(--ease); }
.nlb-gdpr-input:checked ~ .nlb-gdpr-box { background: var(--ink); border-color: var(--ink); }
.nlb-gdpr-input:checked ~ .nlb-gdpr-box svg { opacity: 1; }
.nlb-gdpr-input:focus-visible ~ .nlb-gdpr-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.nlb-gdpr-txt { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
/* repli : consentement officiel rendu par le hook psgdpr */
.nlb-gdpr-hook { margin-top: 18px; font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 760px) { .nlb-inner { grid-template-columns: 1fr; gap: 22px; } }
/* mobile : le gros bouton plein noir débordait verticalement du champ à filet fin.
   On empile → champ souligné en haut, bouton pleine largeur dessous. */
@media (max-width: 560px) {
  .nlb-field { flex-direction: column; align-items: stretch; gap: 14px; border-bottom: 0; padding-bottom: 0; }
  .nlb-field input { width: 100%; flex: none; border-bottom: 1.5px solid var(--ink); padding: 12px 2px; }
  .nlb-field .btn { width: 100%; justify-content: center; }
}

/* ============ Breadcrumb / divers ============ */
.mrd-breadcrumb { font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.02em; padding-block: 18px; }
.mrd-breadcrumb a { color: var(--ink-soft); }
.mrd-breadcrumb a:hover { color: var(--ink); }
.mrd-breadcrumb li { display: inline; }
.mrd-breadcrumb li:not(:last-child)::after { content: "/"; margin: 0 8px; color: var(--line); }

/* ============ Responsive ============ */
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 0 32px; }
}
@media (max-width: 860px) {
  .mrd-header-row, .mrd-nav-row { display: none !important; }
  .mrd-header-mobile { display: grid; }
  .hero-split { grid-template-columns: 1fr; }
  .hero-split-img { min-height: 56vh; }
  .mrd-carousel-track > * { flex-basis: calc((100% - clamp(12px,1.6vw,22px)) / 2); }
  /* 2 colonnes : largeur_carte = (100cqw − gap)/2 → centre image = (100cqw − gap)/3 */
  .mrd-carousel-btn { top: calc((100cqw - clamp(12px,1.6vw,22px)) / 3); }
  /* tablette : toutes les dispositions retombent sur 2 colonnes régulières */
  /* grid-template-rows:none → toutes les rangées deviennent implicites (grid-auto-rows) ;
     "auto" créait une 1re rangée explicite qui s'effondrait à 0 (cartes en position:absolute) */
  .cat-grid, .cat-uniform { height: auto !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: none !important; grid-auto-rows: clamp(180px, 34vw, 240px); }
  .cat-grid.cat-n-1, .cat-uniform.cat-n-1 { grid-template-columns: 1fr !important; }
  .cat-grid .cat-card, .cat-uniform .cat-card { grid-column: auto !important; grid-row: auto !important; }
  /* on garde la 1re carte (vedette) pleine largeur pour l'accent éditorial */
  .cat-grid.cat-n-3 .cat-card:first-child,
  .cat-grid.cat-n-4 .cat-card:first-child,
  .cat-grid.cat-n-5 .cat-card:first-child { grid-column: 1 / -1 !important; }
  .hero-arrow { display: none; }
}
@media (max-width: 700px) {
  .trust-grid { display: none; }
  .trust-slider { display: block; }
  .foot-grid { grid-template-columns: 1fr; gap: 0; }
  .foot-about { max-width: none; margin-bottom: 8px; }
  /* accordéon footer : défini dans la section consolidée « Footer » plus bas */
  .pcard-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* nom + prix empilés (au lieu du flex côte à côte) : un titre long ne
     décale plus le prix ni la hauteur des cartes → images alignées */
  .pcard-meta { display: block; }
  .pcard-price { text-align: right; margin-top: 4px; }
}
@media (max-width: 620px) {
  .cat-grid, .cat-uniform { grid-auto-rows: clamp(160px, 42vw, 220px); }
  .trust-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MÉRIDIAN — Habillage des composants modules (Phase 2 polish)
   ============================================================ */

/* ---- Icônes header (search / compte / panier) dans .mrd-icons ---- */
.mrd-icons .header-icon, .mrd-mob-right .header-icon { position: relative; display: inline-flex; align-items: center; }
.header-icon svg { width: 22px; height: 22px; }
.mrd-icons .hidden-sm-down, .mrd-mob-right .hidden-sm-down { display: none !important; } /* libellés texte masqués, on garde les icônes */

/* recherche : icône bouton + champ déroulant au focus */
#search_widget { position: relative; }
#search_widget form { display: flex; align-items: center; }
#search_widget .search-icon { width: 22px; height: 22px; cursor: pointer; }
#search_widget .search-container { position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-width: 80vw;
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow-soft);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .25s var(--ease); z-index: 50; }
#search_widget:focus-within .search-container, #search_widget:hover .search-container { opacity: 1; visibility: visible; transform: none; }
#search_widget .search-input { border: 1px solid var(--line); border-radius: 2px; padding: 11px 13px; width: 100%; }

/* compte */
#_desktop_user_info, .user-info, .logout-content { display: inline-flex; align-items: center; }
.user-info .account, .user-info > a { display: inline-flex; align-items: center; gap: 8px; padding: 0 6px; height: 42px; color: inherit; }
.user-info svg { width: 22px; height: 22px; }
.user-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; }

/* panier */
#_desktop_cart .blockcart, .blockcart.cart-preview { position: relative; }
#_desktop_cart .header, .blockcart .header { display: inline-flex; align-items: center; position: relative; padding: 0 6px; height: 42px; }
.blockcart svg { width: 22px; height: 22px; }
.cart-products-count { position: absolute; top: 2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 9.5px; font-weight: 700;
  display: grid; place-items: center; line-height: 1; }
.blockcart.inactive .cart-products-count { display: none; }

/* favoris (wishlist) */
.wishlist-link { display: inline-flex; align-items: center; padding: 0 6px; height: 42px; color: inherit; transition: color .18s var(--ease); }
.wishlist-link:hover { color: var(--accent); }

/* ---- Modal panier → tiroir latéral droit MÉRIDIAN ---- */
#blockcart-modal .modal-dialog { position: fixed; top: 0; right: 0; bottom: 0; margin: 0; width: min(440px, 92vw); max-width: none; }
#blockcart-modal .modal-content { height: 100%; height: 100dvh; border-radius: 0; display: flex; flex-direction: column; }
#blockcart-modal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
#blockcart-modal .modal-title { font-family: var(--font-display); font-size: 18px; font-weight: 500; }
#blockcart-modal .close { background: none; border: none; }
#blockcart-modal .modal-body { flex: 1; overflow-y: auto; padding: 8px 22px; }
#blockcart-modal .modal-footer { border-top: 1px solid var(--line); padding: 18px 22px calc(18px + env(safe-area-inset-bottom)); }
#blockcart-modal .cart-items { display: block; width: 100%;}
#blockcart-modal .cart-product-line { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.cart-product-line .product-image img { width: 72px; height: 90px; object-fit: cover; border-radius: 2px; }
.cart-product-line .product-infos { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cart-product-line .product-name { font-size: 14.5px; font-weight: 500; }
.cart-product-line .product-line-info .label,
.cart-product-line .product-line-info .value { font-size: 12.5px; color: var(--ink-faint); }
.cart-product-line .product-line-info .value { margin-right: 6px; }
.cart-product-line .product-price { font-weight: 600; }
.cart-product-line .product-qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.product-qty-container { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.product-qty-container .quantity-button {
  width: 24px; height: 26px; display: grid; place-items: center;
  font-size: 14px; line-height: 1; color: var(--ink-soft); cursor: pointer; user-select: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.product-qty-container .quantity-button:hover { background: var(--ink); color: var(--bg); }
.product-qty-container .quantity-button.is-disabled { color: var(--line); cursor: not-allowed; background: none; }
.product-qty-input {
  width: 30px; height: 26px; text-align: center; border: none; border-inline: 1px solid var(--line);
  background: transparent; font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--ink);
  -moz-appearance: textfield;
}
.product-qty-input:focus { outline: none; }
.product-qty-input::-webkit-outer-spin-button,
.product-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.remove-from-cart { display: inline-grid; place-items: center; color: var(--ink-faint); transition: color .18s var(--ease); }
.remove-from-cart:hover { color: var(--sale); }
.remove-from-cart svg { width: 16px; height: 16px; }
#blockcart-modal .cart-content-btn { display: flex; flex-direction: column; gap: 10px; }
#blockcart-modal .cart-content-btn .btn { width: 100%; }
/* Suppression animée d'une ligne du mini-panier (max-height piloté en JS). */
#blockcart-modal .cart-product-line { transition: max-height .38s var(--ease), opacity .26s ease, transform .38s var(--ease), padding .38s var(--ease), margin .38s var(--ease); }
#blockcart-modal .cart-product-line.is-removing { opacity: 0; transform: translateX(28px); padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-bottom-width: 0; pointer-events: none; }

/* ---- Réseaux sociaux (footer) : .rs-items / .rs-item ---- */
.foot-social { display: flex; gap: 8px; flex-wrap: wrap; }
.foot-social .row, .foot-social [class*="col-"] { margin: 0; padding: 0; flex: none; max-width: none; width: auto; }
.rs-items { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; }
.rs-item a, .foot-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-soft); transition: all .3s var(--ease); }
.rs-item a:hover, .foot-social a:hover { border-color: var(--ink); color: var(--ink); }
.rs-item img, .foot-social img { width: 18px; height: 18px; object-fit: contain; }

/* ---- Bandeau cookies MÉRIDIAN (compact, inspiré du presta_theme) ---- */
#cookie-main-btn { position: fixed; left: 20px; bottom: 20px; z-index: 80; width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); display: none; place-items: center; cursor: pointer; }
#cookie-main-btn img { width: 24px; height: 24px; }
/* masqué par défaut : c'est cookie.js qui l'affiche si le consentement n'est pas donné */
#cookie-banner { position: fixed; left: 20px; bottom: 20px; z-index: 85; width: min(380px, calc(100vw - 40px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-lift); display: none; }
.cookie-banner-content { padding: 20px; }
.cookie-heading h5 { font-family: var(--font-display); font-size: 18px; font-weight: 500; margin: 0 0 8px; }
.cookie-description p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.cookie-links { margin-top: 10px; font-size: 12px; }
.cookie-links a { color: var(--accent); }
/* section "personnaliser" masquée par défaut (affichée par cookie.js) */
.cookie-customize { display: none; padding: 0 20px 16px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 6px; }
.cookie-category .cookie-content span { font-size: 13.5px; font-weight: 600; }
.cookie-category .cookie-desc { font-size: 11.5px; color: var(--ink-faint); font-style: italic; margin: 4px 0 0; }
/* boutons segmentés compacts */
.cookie-buttons { display: flex; align-items: stretch; border-top: 1px solid var(--line); }
.cookie-buttons button { flex: 1 1 100%; padding: 13px 8px; background: none; border: none; border-right: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: background .2s; }
.cookie-buttons button:last-child { border-right: none; }
.cookie-buttons button:hover { background: var(--bg-2); }
.cookie-buttons #accept-all { color: var(--accent); }
/* au 1er affichage : Tout refuser / Personnaliser / Tout accepter (cookie.js révèle les autres) */
#return, #save-preferences { display: none; }
.switch { position: relative; display: inline-block; width: 46px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--line); border-radius: 24px; transition: .3s; cursor: pointer; }
.switch .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .3s; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(22px); }

/* ---- displayMagasin (bandeau magasin) : neutralise un éventuel résidu ---- */
.mrd-header + .header-banner { display: none; }

/* ============================================================
   MÉRIDIAN — Phase 2b : breadcrumb + footer (correctifs)
   ============================================================ */

/* ---- Breadcrumb (classe réelle .breadcrumb) ---- */
.breadcrumb { padding: 16px 0; margin: 0; background: none; }
.breadcrumb.nobreadcrumb, .breadcrumb[data-depth="1"] { display: none; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 12.5px; letter-spacing: .02em; }
.breadcrumb li { display: inline-flex; align-items: center; color: var(--ink); }
.breadcrumb li a { display: inline-flex; align-items: center; color: var(--ink-faint); transition: color .2s; }
.breadcrumb li a:hover { color: var(--ink); }
.breadcrumb li a span + span { margin: 0 8px; color: var(--line); } /* séparateur "|" */
.breadcrumb li:last-child { color: var(--ink); font-weight: 500; }

/* ---- Footer : titres de colonne (desktop) + accordéon repliable (mobile) ---- */
.foot-col-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; padding: 0; cursor: default; }
.foot-col-toggle .ico { display: none; }
.foot-col .eyebrow { margin-bottom: 18px; }
.foot-col ul { display: flex; flex-direction: column; gap: 12px; }
.foot-col ul li { line-height: 1.3; }

@media (max-width: 700px) {
  /* L'animation de repli porte sur .foot-col (grille : titre auto + liens 0fr→1fr),
     PAS sur le <ul> : avec plusieurs <li>, un grid-template-rows:0fr sur le <ul> ne
     replie que le 1er <li> (les autres passent en lignes implicites auto) → liens
     visibles et superposés. En faisant du <ul> l'unique cellule repliable, tout se
     replie proprement. */
  .foot-col { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows .35s var(--ease); border-bottom: 1px solid var(--line); }
  .foot-col.is-open { grid-template-rows: auto 1fr; }
  .foot-col-toggle { padding: 16px 0; cursor: pointer; }
  .foot-col-toggle .ico { display: block; transition: transform .3s var(--ease); color: var(--ink-soft); }
  .foot-col.is-open .foot-col-toggle .ico { transform: rotate(45deg); }
  .foot-col .eyebrow { margin: 0; }
  .foot-col > ul { min-height: 0; overflow: hidden; }
  .foot-col.is-open > ul { padding-bottom: 16px; }
}

/* ============================================================
   MÉRIDIAN — Phase 2b : overlay de recherche (fidèle maquette)
   ============================================================ */
.mrd-search { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; }
.mrd-search.is-open { visibility: visible; pointer-events: auto; }
.mrd-search-backdrop { position: absolute; inset: 0; background: oklch(0.15 0.01 65 / .35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s var(--ease); }
.mrd-search.is-open .mrd-search-backdrop { opacity: 1; }
.mrd-search-panel { position: absolute; top: 0; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-soft); transform: translateY(-100%); transition: transform .5s var(--ease); }
.mrd-search.is-open .mrd-search-panel { transform: none; }
.mrd-search-panel .mrd-container { padding-block: clamp(22px, 4vw, 34px); }
.mrd-search-form { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.mrd-search-ico { flex-shrink: 0; }
.mrd-search-field { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: var(--font-display); font-size: clamp(20px, 4vw, 30px); padding: 4px 0; }
.mrd-search-close { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; }
/* Résultats produits en direct */
.mrd-search-results { margin-top: 22px; max-height: min(58vh, 520px); overflow-y: auto; }
.mrd-search-empty { color: var(--ink-soft); font-size: 14px; padding: 8px 0; }
.mrd-sr-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 28px; }
.mrd-sr-item { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: var(--radius); transition: background .25s var(--ease); }
.mrd-sr-item:hover { background: var(--bg-2); }
.mrd-sr-thumb { flex-shrink: 0; width: 52px; height: 52px; background: var(--bg-2); overflow: hidden; border-radius: var(--radius); display: grid; place-items: center; }
.mrd-sr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mrd-sr-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mrd-sr-name { font-size: 14px; line-height: 1.3; color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.mrd-sr-price { font-size: 13px; color: black ; }
.mrd-sr-price del { color: var(--ink-faint); margin-right: 5px; }
.mrd-sr-all { display: inline-block; margin-top: 16px; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.mrd-sr-all:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) { .mrd-sr-list { grid-template-columns: 1fr; } }

/* ============================================================
   MÉRIDIAN — Page 404 (pagenotfound)
   ============================================================ */
.nf-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100svh - var(--hdr-h, 70px) - 120px); padding-block: clamp(60px, 12vh, 130px); text-align: center; }
.nf-inner { max-width: 640px; }
.nf-big { font-size: clamp(120px, 26vw, 300px); font-weight: 600; line-height: .82; letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--ink) 0%, color-mix(in oklch, var(--ink) 55%, transparent) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 18px; }
.nf-title { font-size: clamp(22px, 3vw, 38px); font-weight: 500; margin-bottom: 18px; }
.nf-lead { font-size: 16.5px; max-width: 460px; margin: 0 auto 36px; line-height: 1.6; }
.nf-search { display: flex; align-items: center; gap: 12px; max-width: 460px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 40px; padding: 7px 7px 7px 18px; background: var(--surface);
  transition: border-color .25s var(--ease); }
.nf-search:focus-within { border-color: var(--ink); }
.nf-search-ico { flex-shrink: 0; color: var(--ink-soft); }
.nf-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 15px; }
.nf-search .mrd-btn { flex-shrink: 0; border-radius: 40px; padding: 11px 22px; }
.nf-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ============================================================
   MÉRIDIAN — Confirmation de commande (order-confirmation)
   ============================================================ */
.ocf-page { padding-block: 40px; }
.ocf-hero { max-width: 620px; margin: 0 auto 40px; }
.ocf-h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 500; margin-bottom: 16px; }
.ocf-hero-lead { font-size: 16.5px; line-height: 1.6; }
.ocf-badge { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; margin: 0 auto 24px; animation: ocfPop .5s var(--ease-out) both; }
@keyframes ocfPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ocf-badge { animation: none; } }

/* suivi */
.ocf-track { display: flex; justify-content: center; gap: 0; max-width: 680px; margin: 0 auto 48px; }
.ocf-track-step { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ocf-track-rail { display: flex; align-items: center; width: 100%; justify-content: center; position: relative; }
.ocf-track-node { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg);
  display: grid; place-items: center; color: var(--ink-faint); flex-shrink: 0; z-index: 1; }
.ocf-track-step[data-state="done"] .ocf-track-node,
.ocf-track-step[data-state="active"] .ocf-track-node { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ocf-track-line { position: absolute; left: 50%; right: -50%; top: 50%; height: 1px; background: var(--line); transform: translateY(-50%); }
.ocf-track-line[data-on="true"] { background: var(--accent); }
.ocf-track-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.ocf-track-step[data-state="todo"] .ocf-track-label { color: var(--ink-faint); }

/* grille + cartes */
.ocf-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 48px); max-width: 1040px; margin: 0 auto; align-items: start; }
.ocf-card { border: 1px solid var(--line); border-radius: 4px; padding: 24px; background: var(--bg); }
.ocf-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; }
.ocf-card-title { font-size: 22px; font-weight: 500; }
.ocf-hook { max-width: 1040px; margin: 0 auto 24px; }

/* articles */
.ocf-item { display: flex; gap: 14px; padding-block: 16px; border-top: 1px solid var(--line-soft); }
.ocf-item-thumb { width: 64px; aspect-ratio: 3/4; flex-shrink: 0; border-radius: 2px; overflow: hidden; background: var(--bg-2); }
.ocf-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ocf-item-info { flex: 1; min-width: 0; }
.ocf-item-top { display: flex; justify-content: space-between; gap: 10px; }
.ocf-item-name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.ocf-item-price { font-weight: 600; font-size: 14px; white-space: nowrap; }
.ocf-item-meta { margin-top: 5px; }

/* totaux */
.ocf-totals { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; padding-top: 16px; margin-top: 6px; border-top: 1px solid var(--line); }
.ocf-row { display: flex; justify-content: space-between; gap: 12px; }
.ocf-row-bold { font-weight: 600; font-size: 15px; }
.ocf-row-accent span:last-child { color: var(--accent); }

/* actions */
.ocf-actions { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; }

/* aside */
.ocf-aside { display: flex; flex-direction: column; gap: 16px; }
.ocf-line { display: flex; gap: 12px; align-items: flex-start; }
.ocf-line-ico { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.ocf-line-circle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-soft); flex-shrink: 0; }
.ocf-line-txt { font-size: 13.5px; line-height: 1.55; }
.ocf-line-strong { font-weight: 600; }
.ocf-addr { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line-soft); }
.ocf-help { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 4px; background: var(--bg-2); border: 1px solid var(--line-soft); }
.ocf-help-txt { font-size: 12.5px; line-height: 1.5; }
.ocf-account { max-width: 1040px; margin: 24px auto 0; }

@media (max-width: 860px) {
  .ocf-grid { grid-template-columns: 1fr; }
  .ocf-track { margin-bottom: 36px; }
  .ocf-track-label { font-size: 10px; letter-spacing: 0.08em; }
}

/* widget ps_searchbar = simple déclencheur (le champ inline est remplacé par l'overlay) */
#search_widget .search-container { display: none !important; }
#search_widget, #search_widget .search-icon { cursor: pointer; }

/* ============================================================
   MÉRIDIAN — Phase 2c : footer en flex (nb de colonnes variable)
   ============================================================ */
.foot-grid { display: flex !important; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.foot-grid > * { flex: 1 1 170px; min-width: 0; }
.foot-grid > .foot-about { flex: 2 1 300px; }
@media (max-width: 700px) {
  .foot-grid { gap: 0; }
  .foot-grid > * { flex-basis: 100%; }
  .foot-grid > .foot-about { margin-bottom: 8px; }
}

/* ============================================================
   MÉRIDIAN — Phase 3 : ShipBar (livraison offerte) + anim panier
   ============================================================ */
.mrd-shipbar { padding: 16px 0; }
.mrd-shipbar-text { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 9px; }
.mrd-shipbar-text strong { color: var(--ink); font-weight: 600; }
.mrd-shipbar-text .is-unlocked { color: var(--accent); font-weight: 600; }
.mrd-shipbar-track { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.mrd-shipbar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .5s var(--ease); }
.mrd-shipbar-track span { display: none; }

/* panier : glissement latéral droite + backdrop */
#blockcart-modal.modal { background: oklch(0.15 0.01 65 / .42); opacity: 1; }
#blockcart-modal .modal-dialog { transform: translateX(100%); transition: transform .42s var(--ease); }
#blockcart-modal.in .modal-dialog, #blockcart-modal.show .modal-dialog { transform: translateX(0); }
#blockcart-modal .modal-title { font-family: var(--font-display); }
#blockcart-modal .delivery-info-btn { padding: 0 0 4px; }

/* ============================================================
   MÉRIDIAN — Modale « connexion requise »
   Affichée par views/js/wishlist-btn.js quand un visiteur non connecté
   clique sur le cœur wishlist. Même langage visuel que la popup / quickview.
   ============================================================ */
.mrd-auth-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); }
.mrd-auth-modal.is-open { opacity: 1; visibility: visible; }
.mrd-auth-overlay { position: absolute; inset: 0; background: oklch(0.15 0.01 65 / .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.mrd-auth-box { position: relative; width: min(92vw, 420px); background: var(--bg); border-radius: 4px; box-shadow: var(--shadow-soft); padding: clamp(30px, 4vw, 46px) clamp(24px, 4vw, 40px); text-align: center; transform: scale(.96); transition: transform .35s var(--ease); }
.mrd-auth-modal.is-open .mrd-auth-box { transform: none; }
.mrd-auth-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; font-size: 24px; line-height: 1; color: var(--ink); background: var(--bg-2); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.mrd-auth-close:hover { background: var(--ink); color: var(--bg); }
.mrd-auth-ico { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--bg-2); color: var(--sale); }
.mrd-auth-title { font-family: var(--font-display); font-size: clamp(22px, 3vw, 28px); font-weight: 500; margin-bottom: 10px; }
.mrd-auth-text { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; margin-bottom: 24px; }
.mrd-auth-actions { display: flex; flex-direction: column; gap: 10px; }
.mrd-auth-actions .mrd-btn { width: 100%; }

/* ============================================================
   MÉRIDIAN — Modal « Aperçu rapide » (quick view)
   Ouvert via la loupe .pcard-qa des miniatures (listing ET accueil).
   Il réutilise les partials produit (galerie, prix, variantes, panier).
   Comme il peut s'ouvrir sur des pages où product.css n'est PAS chargé
   (accueil, recherche, marque…), TOUT est restylé ici, scopé à .quickview.
   ============================================================ */

/* fond sombre + centrage vertical (la dialog porte .modal-dialog-centered) */
.quickview.modal { background: oklch(0.15 0.01 65 / .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.quickview .modal-dialog { width: min(94vw, 940px); max-width: none; margin: 4vh auto; }
.quickview .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 8vh); }
.quickview .modal-content { width: 100%; border-radius: 4px; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; }

/* ouverture : fondu + léger zoom (même langage que la popup newsletter) */
.quickview.fade .modal-dialog { transform: scale(.97); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease); }
.quickview.in .modal-dialog, .quickview.show .modal-dialog { transform: none; opacity: 1; }

/* en-tête réduit à la croix, flottante en haut à droite */
.quickview .modal-header { position: absolute; top: 0; right: 0; z-index: 5; padding: 0; border: 0; background: none; }
.quickview .modal-header .close {
  width: 40px; height: 40px; margin: 14px 14px 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; line-height: 1;
  color: var(--ink); background: var(--bg-2); cursor: pointer; opacity: 1;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.quickview .modal-header .close:hover { background: var(--ink); color: var(--bg); }

/* corps : grille galerie | infos, défilante en interne si trop haute */
.quickview .modal-body { padding: clamp(24px, 3vw, 40px); overflow-y: auto; min-height: 0; flex: 1; }
.quickview .modal-body > .row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.5vw, 48px); align-items: start; margin: 0; }
.quickview .modal-body > .row > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; }

/* ---- Galerie (colonne gauche) ---- */
.quickview .images-container { display: block; }
.quickview .product-cover { position: relative; margin-bottom: 12px; }
.quickview .product-cover img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; border-radius: 3px; display: block; }
.quickview .product-cover .layer { display: none; }                       /* pas de zoom plein écran dans le quickview */
.quickview .js-qv-mask { overflow: hidden; }
.quickview .product-images { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; list-style: none; margin: 0; }
.quickview .product-images .thumb-container { cursor: pointer; flex: 0 0 auto; }
.quickview .product-images .thumb { width: 60px; height: 78px; object-fit: cover; border-radius: 2px; border: 1px solid var(--line); opacity: .7; transition: opacity .3s, border-color .3s; }
.quickview .product-images .thumb.selected, .quickview .product-images .thumb:hover { opacity: 1; border-color: var(--ink); }
.quickview .arrows { display: none; }                                      /* flèches verticales inutiles : strip horizontal */

/* ---- Infos (colonne droite) ---- */
.quickview h1.h1, .quickview .modal-body .h1 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; line-height: 1.08; margin: 0 0 12px; }
.quickview .product-prices { margin: 0 0 16px; }
.quickview .product-price, .quickview .current-price, .quickview .current-price-value, .quickview .product-prices .price { font-size: 24px; font-weight: 600; color: var(--ink); }
.quickview .product-prices .regular-price, .quickview .product-discount .regular-price { color: var(--ink-faint); text-decoration: line-through; font-weight: 400; font-size: 17px; margin-right: 10px; }
.quickview .product-price.has-discount .current-price-value, .quickview .has-discount .current-price-value { color: var(--sale); }
.quickview .product-prices .discount, .quickview .product-flags .discount-percentage { background: var(--sale); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 2px; margin-left: 8px; }
.quickview .tax-shipping-delivery-label { font-size: 12px; color: var(--ink-faint); }
.quickview #product-description-short { color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; margin: 0 0 22px; }
.quickview .product-actions { margin-top: 4px; }

/* variantes — couleurs = pastilles rondes, tailles = boutons (repris de product.css) */
.quickview .product-variants .product-variants-item { margin-bottom: 18px; }
.quickview .product-variants .control-label, .quickview .product-variants label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 9px; }
.quickview .product-variants .group-color { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.quickview .product-variants .group-color .input-container, .quickview .product-variants .group-color label { margin: 0; border: 0; }
.quickview .product-variants .input-color { position: absolute; opacity: 0; width: 0; height: 0; }
.quickview .product-variants .group-color .color { display: block; width: 32px; height: 32px; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .2s; background-size: cover; background-position: center; }
.quickview .product-variants .input-color:checked + .color, .quickview .product-variants .group-color .color.checked { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--ink); }
.quickview .product-variants .group-radio { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.quickview .product-variants .group-radio .input-container { margin: 0; }
.quickview .product-variants .input-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.quickview .product-variants .radio-label { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 2px; font-size: 13px; cursor: pointer; transition: all .2s; }
.quickview .product-variants .input-radio:checked + .radio-label { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.quickview .product-variants .input-radio.disabled + .radio-label { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.quickview .product-variants .form-control-select { max-width: 100%; }

/* quantité + ajout panier (en ligne pour rester compact) */
.quickview .product-quantity { display: flex; align-items: stretch; gap: 12px; margin-top: 6px; }
.quickview .product-quantity .qty .input-group { border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; height: 100%; }
.quickview .product-quantity input { width: 52px; text-align: center; border: none; height: 50px; }
.quickview .add { display: flex; align-items: stretch; gap: 12px; flex: 1; }
.quickview .add .btn-primary, .quickview .btn.add-to-cart {
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: 2px;
  padding: 0 26px; min-height: 50px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: all .4s var(--ease); flex: 1;
}
.quickview .add .btn-primary:hover, .quickview .btn.add-to-cart:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.quickview .add .btn-primary:disabled, .quickview .btn.add-to-cart[disabled] { opacity: .5; cursor: not-allowed; }
.quickview .add .btn-primary:disabled:hover, .quickview .btn.add-to-cart[disabled]:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.quickview .product-add-to-cart .shopping-cart { width: 18px; height: 18px; fill: currentColor; }
.quickview .add .wishlist-button { border: 1px solid var(--line); border-radius: 2px; display: grid; place-items: center; width: 50px; flex: 0 0 auto; }
.quickview .product-minimal-quantity:empty { display: none; }
.quickview #product-availability { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }

/* pied : infos additionnelles produit ; masqué si vide */
.quickview .modal-footer { border-top: 1px solid var(--line); padding: 16px clamp(24px, 3vw, 40px); flex: none; }
.quickview .modal-footer:has(.product-additional-info:empty) { display: none; }

/* responsive : sous 720px → une seule colonne (galerie au-dessus des infos) */
@media (max-width: 720px) {
  .quickview .modal-dialog { width: 96vw; margin: 3vh auto; }
  .quickview .modal-dialog-centered { min-height: calc(100% - 6vh); }
  .quickview .modal-body > .row { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   MÉRIDIAN — Pop up newsletter (variantes : image / plein cadre)
   Structure conservée : .popup > .popup-content > [.popup-media] + .popup-body
   Variante pilotée depuis le back-office via .popup--image / .popup--bleed
   (le JS popup.js gère l'ouverture via les classes .show)
   ============================================================ */

/* fond sombre (div.overlay du layout, en début de <body>).
   On exclut .hero-full.overlay : la classe .overlay sert aussi de
   modificateur "header transparent" sur le slider/hero — sans ce :not()
   le slider serait mis en display:none. */
.overlay:not(.hero-full) {
  position: fixed; inset: 0; z-index: 9998;
  background: oklch(0.15 0.01 65 / .5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: none; opacity: 0; transition: opacity .4s var(--ease);
}
.overlay:not(.hero-full).show { opacity: 1; }

/* carte — scopée à #popup-newsletter : la classe .popup est aussi portée
   par le popup magasin (#popup-store), qu'on ne veut pas restyler ici. */
#popup-newsletter {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: min(92vw, 820px); max-height: 90vh;
  background: var(--bg); color: var(--ink);
  border-radius: 5px; box-shadow: var(--shadow-lift);
  overflow: hidden; z-index: 9999;
  display: none; opacity: 0;
  transition: opacity .4s var(--ease), transform .45s var(--ease);
}
#popup-newsletter.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* bouton de fermeture rond (fidèle maquette) */
.popup .close-popup {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1; color: var(--ink);
  background: var(--bg-2); cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.popup .close-popup:hover { background: var(--ink); color: var(--bg); }

/* titres & texte */
.popup .popup-body h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.02;
  letter-spacing: -.01em; text-transform: none; margin: 0 0 14px;
}
.popup .popup-body p {
  color: var(--ink-soft); font-size: 14.5px; line-height: 1.6;
  margin: 0 0 24px; max-width: 380px;
}

/* formulaire : filet souligné minimaliste */
.popup .newsletter-form {
  display: flex; align-items: stretch; gap: 0;
  max-width: 420px; border-bottom: 1.5px solid var(--ink);
}
.popup .newsletter-form .form-control {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  box-shadow: none; height: auto; font-size: 15px; padding: 13px 2px; color: var(--ink);
}
.popup .newsletter-form .btn-submit-newsletter {
  flex: none; width: auto; height: auto; border: none; background: none;
  color: var(--ink); font-size: 12.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 0 4px; border-radius: 0; cursor: pointer;
  transition: color .25s var(--ease);
}
.popup .newsletter-form .btn-submit-newsletter:hover { color: var(--accent); }

/* -------- Variante IMAGE : image à gauche, contenu à droite -------- */
.popup--image { width: min(92vw, 820px); }
.popup--image .popup-content { display: grid; grid-template-columns: 1fr 1fr; }
.popup--image .popup-media { position: relative; min-height: 440px; }
.popup--image .popup-media .popup-image {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0;
}
.popup--image .popup-body {
  padding: clamp(28px, 3.4vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
}
/* repli si aucune image n'a été uploadée : carte simple sur une colonne */
.popup--image .popup-content:not(:has(.popup-media)) { grid-template-columns: 1fr; }

/* -------- Variante PLEIN CADRE : image en fond, texte superposé -------- */
.popup--bleed { width: min(92vw, 680px); }
.popup--bleed .popup-content { position: relative; display: flex; min-height: 460px; }
.popup--bleed .popup-media { position: absolute; inset: 0; z-index: 0; }
.popup--bleed .popup-media .popup-image {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0;
}
.popup--bleed .popup-content::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, oklch(0.15 0.01 65 / .82), oklch(0.15 0.01 65 / .4));
}
.popup--bleed .popup-body {
  position: relative; z-index: 2; width: 100%; margin-top: auto;
  padding: clamp(28px, 3.4vw, 48px);
}
.popup--bleed .popup-body h2 { color: #fff; }
.popup--bleed .popup-body p { color: rgba(255, 255, 255, .85); max-width: 440px; }
.popup--bleed .close-popup { color: #fff; background: rgba(255, 255, 255, .14); }
.popup--bleed .close-popup:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.popup--bleed .newsletter-form { border-bottom-color: rgba(255, 255, 255, .55); }
.popup--bleed .newsletter-form .form-control { color: #fff; }
.popup--bleed .newsletter-form .form-control::placeholder { color: rgba(255, 255, 255, .7); }
.popup--bleed .newsletter-form .btn-submit-newsletter { color: #fff; }
.popup--bleed .newsletter-form .btn-submit-newsletter:hover { color: rgba(255, 255, 255, .75); }
/* repli si aucune image : fond sombre pour garder le texte lisible */
.popup--bleed .popup-content:not(:has(.popup-media)) { background: var(--ink); }

/* responsive : sous 860px l'image latérale passe en pleine largeur (masquée) */
@media (max-width: 860px) {
  .popup--image { width: min(92vw, 440px); }
  .popup--image .popup-content { grid-template-columns: 1fr; }
  .popup--image .popup-media { display: none; }
}
