/* ============================================================
   COMPOSANTS UI — Magasin virtuel Duvéa
   Tous les composants réutilisables. Mobile-first, accessibles,
   touch targets ≥ 44 px, hover/focus/active soignés.
   Convention : .bem-style avec __element et --modifier.
   ============================================================ */

/* ============================================================
   00 · LOGO DUVÉA — strictement identique à duvea.fr
   Aucune dérive autorisée : la cohérence visuelle entre
   duvea.fr et duvea.fr/magasin/ en dépend.
   ============================================================ */

.logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-n {
  font-family: var(--font-wordmark);
  font-size: 44px;
  font-weight: 700;
  color: var(--bleu);
  letter-spacing: -0.02em;
  line-height: 1;
}

.logo-flag-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

.logo-flag {
  display: inline-flex;
  align-items: center;
}

.logo-flag svg {
  width: 38px;
  height: auto;
  display: block;
  filter: var(--shadow-flag-duvea);
}

.logo-mif {
  font-size: 8px;
  letter-spacing: var(--tracking-mif);
  text-transform: uppercase;
  color: var(--bleu);
  font-weight: 600;
  line-height: 1;
  opacity: 0.75;
}

@media (max-width: 900px) {
  .logo-n      { font-size: 26px; }
  .logo-flag svg { width: 28px; }
  .logo-mif    { font-size: 6.5px; letter-spacing: 0.2em; }
}

/* ----- Modifier .logo--sign — version "enseigne de boutique" -----
   Utilisé sur la porte d'entrée (Scène 1). 60-70 % de la taille standard,
   drop-shadow plus prononcée pour décoller de la pierre.
   Esprit Repetto rue de la Paix / Goyard rue Saint-Honoré. */
.logo--sign {
  filter: drop-shadow(0 2px 4px rgba(11, 37, 69, 0.20))
          drop-shadow(0 1px 1px rgba(11, 37, 69, 0.12));
}
.logo--sign .logo-n      { font-size: 30px; }
.logo--sign .logo-flag svg { width: 26px; }
.logo--sign .logo-mif    { font-size: 6.5px; letter-spacing: 0.2em; }

@media (max-width: 900px) {
  .logo--sign .logo-n      { font-size: 22px; }
  .logo--sign .logo-flag svg { width: 22px; }
  .logo--sign .logo-mif    { font-size: 6px; }
}

/* ============================================================
   01 · EYEBROW & LABELS
   ============================================================ */

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-block;
}

.eyebrow--gold { color: var(--color-gold-text); }
.eyebrow--dark { color: var(--text-primary); }

/* ============================================================
   02 · BUTTONS
   Trois variantes : primary (action principale), secondary
   (outline), ghost (sans fond). Deux tailles : default + large.
   Touch target ≥ 44 px sur mobile.
   ============================================================ */

.btn {
  --btn-bg: transparent;
  --btn-color: var(--text-primary);
  --btn-border: transparent;
  --btn-bg-hover: transparent;
  --btn-color-hover: var(--text-primary);
  --btn-border-hover: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;

  padding: var(--space-3) var(--space-6);
  min-height: 44px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);

  background-color: var(--btn-bg);
  color: var(--btn-color);

  cursor: pointer;
  user-select: none;

  transition:
    background-color var(--duration-fast) var(--ease-out-soft),
    color var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft),
    transform var(--duration-instant) var(--ease-out-soft);
}

.btn:hover {
  background-color: var(--btn-bg-hover);
  color: var(--btn-color-hover);
  border-color: var(--btn-border-hover);
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variantes */
.btn--primary {
  --btn-bg: var(--color-primary);
  --btn-color: var(--color-text-on-dark);
  --btn-border: var(--color-primary);
  --btn-bg-hover: var(--color-primary-hover);
  --btn-color-hover: var(--color-text-on-dark);
  --btn-border-hover: var(--color-primary-hover);
}

.btn--secondary {
  --btn-bg: transparent;
  --btn-color: var(--color-text);
  --btn-border: var(--color-border-strong);
  --btn-bg-hover: var(--color-bg-secondary);
  --btn-color-hover: var(--color-text);
  --btn-border-hover: var(--color-primary);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-color: var(--text-secondary);
  --btn-border: transparent;
  --btn-bg-hover: transparent;
  --btn-color-hover: var(--color-noir-doux);
  --btn-border-hover: transparent;
  padding-inline: var(--space-3);
}

/* Tailles */
.btn--lg {
  font-size: var(--fs-base);
  letter-spacing: var(--tracking-widest);
  padding: var(--space-4) var(--space-7);
  min-height: 56px;
}

.btn--block {
  width: 100%;
}

/* ============================================================
   03 · CARTELLE — carte d'identification produit
   Format papier de musée, centré, sobre. Typographies mixtes :
   eyebrow / nom italique / détail / prix.
   ============================================================ */

.cartelle {
  background: var(--color-creme);
  padding: var(--space-5) var(--space-6);
  border: 1px solid rgba(196, 179, 160, 0.40);
  box-shadow: var(--shadow-sm);
  text-align: center;
  max-width: 280px;
  border-radius: 1px;     /* presque carré, papier "carton" */
  position: relative;
  transition:
    transform var(--duration-base) var(--ease-out-soft),
    box-shadow var(--duration-base) var(--ease-out-soft);
}

.cartelle:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.cartelle__category {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.cartelle__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  margin-top: var(--space-2);
}

.cartelle__detail {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  margin-top: var(--space-3);
}

.cartelle__divider {
  width: 28px;
  height: 1px;
  background: var(--color-gold-discret);
  margin: var(--space-4) auto var(--space-3);
  border: 0;
  opacity: 0.7;
}

.cartelle__price {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-wide);
  color: var(--text-primary);
}

/* ---------- Emphase éditoriale (rare, ~3 % de la palette) ----------
   Au sein d'un nom de modèle ou d'une accroche italique, <em> bascule
   en rouge bordeaux Duvéa pour souligner sans crier. */
.cartelle__name em,
.scene-title em,
.quote em,
.editorial em {
  font-style: italic;
  color: var(--color-accent);
}

/* ============================================================
   04 · BADGES — Made in France, EPV, 14 jours, etc.
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--color-taupe-cl);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.badge--gold {
  border-color: var(--color-gold);          /* bordure : décoratif */
  color: var(--color-gold-text);            /* texte : lisible */
}

.badge--solid {
  background: var(--color-creme);
  border-color: transparent;
  color: var(--text-secondary);
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

/* ============================================================
   05 · SIZE SELECTOR — sélecteur de tailles produit
   Esprit "menu de salle de musée", pas "checkout Stripe".
   État sélectionné : pas de fond plein, fine bordure ocre 1.5 px.
   Dimensions en Cormorant Garamond italic 14px.
   ============================================================ */

.size-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.size-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4);
  min-height: 76px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  transition:
    border-color var(--duration-base) var(--ease-out-soft),
    box-shadow var(--duration-base) var(--ease-out-soft);
}

.size-option:hover {
  border-color: var(--color-border-strong);
}

/* État sélectionné — fine bordure ocre, pas de fond plein.
   On double l'épaisseur visuelle via box-shadow inset pour rester
   sur 1.5 px sans déclencher de saut de layout. */
.size-option[aria-pressed='true'],
.size-option--selected {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-gold);
  box-shadow: inset 0 0 0 0.5px var(--color-gold);
}

.size-option__dimensions {
  font-family: var(--font-italic-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-text);
}

.size-option__price {
  font-family: var(--font-section-title);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-secondary);
}

.size-option[aria-pressed='true'] .size-option__price,
.size-option--selected .size-option__price {
  color: var(--color-text);
}

/* ============================================================
   06 · QUANTITY STEPPER — sélecteur de quantité +/-
   ============================================================ */

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-taupe-cl);
  border-radius: var(--radius-sm);
  background: transparent;
  height: 44px;
  overflow: hidden;
}

.qty__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.qty__btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
.qty__btn:disabled { opacity: 0.3; cursor: not-allowed; }

.qty__value {
  min-width: 36px;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   07 · ACCORDION — basé sur <details>/<summary>
   Sans JS. Animation lente du chevron.
   ============================================================ */

.accordion {
  border-bottom: 1px solid var(--border-subtle);
}

.accordion__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-primary);
  list-style: none;
  user-select: none;
}

.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { content: ''; }

.accordion__summary::after {
  content: '+';
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-xl);
  color: var(--text-muted);
  transition: transform var(--duration-base) var(--ease-out-soft);
  line-height: 1;
}

.accordion[open] > .accordion__summary::after {
  content: '−';
}

.accordion__body {
  padding: var(--space-2) 0 var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* ============================================================
   08 · INPUTS / FIELDS
   ============================================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.field__input,
.field__textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-taupe-cl);
  border-radius: var(--radius-sm);
  background: var(--color-blanc-pur);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  transition:
    border-color var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-fast) var(--ease-out-soft);
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--text-muted);
}

.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--color-gold-discret);
  box-shadow: 0 0 0 3px rgba(168, 139, 92, 0.12);
}

.field__hint {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ============================================================
   09 · DRAWER — panier latéral droit
   Slide-in lent, backdrop sobre, fond crème.
   Pilotable en JS via .drawer--open et .drawer-backdrop--open.
   ============================================================ */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(31, 26, 20, 0.40);
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out-soft);
}

.drawer-backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  background: var(--color-blanc-pur);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-medium) var(--ease-out-quart);
  will-change: transform;
}

.drawer--open {
  transform: translateX(0);
}

.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.drawer__title {
  font-family: var(--font-section-title);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.drawer__close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast);
}
.drawer__close:hover { background: var(--bg-secondary); }

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
}

.drawer__footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

/* ============================================================
   10 · CART ITEM — ligne du panier (utilisé dans drawer)
   ============================================================ */

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.cart-item:last-child { border-bottom: none; }

.cart-item__image {
  width: 80px;
  height: 80px;
  background: var(--color-creme);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
}

.cart-item__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-md);
  color: var(--text-primary);
}

.cart-item__variant {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.cart-item__price {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--text-primary);
}

/* ============================================================
   11 · CART TOTAL — résumé du panier
   ============================================================ */

.cart-total {
  display: grid;
  gap: var(--space-2);
}

.cart-total__row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.cart-total__row--final {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--text-primary);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
}

/* ============================================================
   12 · CART TRIGGER — icône panier flottante (top right)
   ============================================================ */

.cart-trigger {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-sticky);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--color-blanc-pur);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-fast) var(--ease-out-soft);
}

.cart-trigger:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.cart-trigger__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

.cart-trigger__count[data-count='0'] {
  display: none;
}

/* ============================================================
   13 · TAGLINE / QUOTE — bandeaux de citation
   ============================================================ */

.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  text-align: center;
  letter-spacing: var(--tracking-tight);
  max-width: 38ch;
  margin-inline: auto;
}

.quote--lg { font-size: var(--fs-2xl); }

.quote::before { content: '« '; opacity: 0.5; }
.quote::after  { content: ' »'; opacity: 0.5; }

/* ============================================================
   14 · CART DRAWER — slide-in droit, fond crème, bord laiton
   Phase 1 du panier multi-produits Duvéa.
   Auto-injecté par assets/js/cart-drawer.js sur toute page
   ayant un #maison-nav.
   ============================================================ */

.cart-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(246, 240, 231, 0.40);   /* crème 40 % */
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out-soft);
}
.cart-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: calc(100vw - 16px);
  background: var(--creme);
  border-left: 2px solid var(--ocre);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 400ms var(--ease-out-soft);
  will-change: transform;
}
.cart-drawer.is-open {
  transform: translateX(0);
}

@media (max-width: 600px) {
  .cart-drawer {
    width: 100vw;
    border-left: none;
    border-top: 2px solid var(--ocre);
  }
}

/* Header du drawer */
.cart-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5);
  border-bottom: 1px solid var(--gris-cl);
}

.cart-drawer__title {
  font-family: var(--font-section-title);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: var(--tracking-tight);
  color: var(--bleu);
  margin: 0;
}

.cart-drawer__close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--gris);
  cursor: pointer;
  transition: background 200ms var(--ease-out-soft), color 200ms var(--ease-out-soft);
}
.cart-drawer__close:hover {
  background: var(--blanc);
  color: var(--noir);
}

/* Body — scrollable */
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}

/* Empty state */
.cart-drawer__empty {
  text-align: center;
  padding: var(--space-7) 0;
}
.cart-drawer__empty-title {
  font-family: var(--font-section-title);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--noir);
  margin: 0 0 var(--space-2);
}
.cart-drawer__empty-sub {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--gris);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* Cart line — photo 60x60 + nom + meta + qty / prix + retirer */
.cart-line {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--gris-cl);
}
.cart-line:first-child { padding-top: 0; }
.cart-line:last-child  { border-bottom: 0; }

.cart-line__photo {
  display: block;
  width: 60px;
  height: 60px;
  background: var(--blanc);
  border: 1px solid var(--gris-cl);
  overflow: hidden;
}
.cart-line__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-line__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.cart-line__name {
  font-family: var(--font-section-title);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--noir);
  margin: 0;
  line-height: 1.2;
}
.cart-line__meta {
  font-family: var(--font-italic-editorial);
  font-style: italic;
  font-size: 13px;
  color: var(--gris);
  margin: 0;
}

.cart-line__qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  border: 1px solid var(--gris-cl);
  border-radius: var(--radius-sm);
  background: var(--blanc);
  width: fit-content;
}
.cart-line__qty button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--gris);
  cursor: pointer;
  transition: color 200ms var(--ease-out-soft);
}
.cart-line__qty button:hover { color: var(--noir); }
.cart-line__qty span {
  min-width: 20px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--noir);
  font-variant-numeric: tabular-nums;
}

.cart-line__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
}
.cart-line__price {
  font-family: var(--font-section-title);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--noir);
  margin: 0;
  white-space: nowrap;
}
.cart-line__remove {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gris);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--gris-cl);
  text-underline-offset: 3px;
  transition: color 200ms var(--ease-out-soft);
}
.cart-line__remove:hover { color: var(--rouge); }

/* Footer — sous-total + livraison + CTA */
.cart-drawer__foot {
  padding: var(--space-5);
  border-top: 1px solid var(--gris-cl);
  background: var(--blanc);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cart-drawer__shipping {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ocre-fc);
  margin: 0;
  text-align: center;
  letter-spacing: var(--tracking-wide);
}
.cart-drawer__shipping[hidden] { display: none; }

.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--noir);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gris-cl);
}
.cart-drawer__subtotal strong {
  font-family: var(--font-section-title);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--bleu);
  letter-spacing: var(--tracking-tight);
}

.cart-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 200ms var(--ease-out-soft), color 200ms var(--ease-out-soft);
}

.cart-drawer__cta--primary {
  background: var(--bleu);
  color: var(--creme);
  border: 1px solid var(--bleu);
}
.cart-drawer__cta--primary:hover {
  background: var(--bleu-cl);
  border-color: var(--bleu-cl);
}

.cart-drawer__cta--ghost {
  background: transparent;
  color: var(--gris);
  border: 1px solid var(--gris-cl);
}
.cart-drawer__cta--ghost:hover {
  color: var(--noir);
  border-color: var(--noir);
}

/* Bloque le scroll body quand le drawer est ouvert (mobile-friendly) */
body.has-cart-open {
  overflow: hidden;
}

/* ============================================================
   15 · BADGE PANIER LAITON — override de scene-maison.css
   Phase 1 demande un badge laiton, le défaut était bleu marine.
   ============================================================ */

.maison-nav__cart-count {
  background: var(--ocre);
  color: var(--bleu);
}

/* Animation +1 — quand un produit est ajouté, le bouton "ping" */
@keyframes cart-ping {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.maison-nav__cart.is-pinging {
  animation: cart-ping 420ms var(--ease-out-soft);
}
.maison-nav__cart.is-pinging .maison-nav__cart-count {
  box-shadow: 0 0 0 3px rgba(200, 153, 104, 0.30);
}

/* Badge "+1" flottant — apparaît au-dessus à droite de l'icône panier
   à chaque ajout. Fade-in + translate-Y -10px puis fade-out (1.5s).
   Cercle laiton, "+1" Manrope bold crème. Élément JS éphémère :
   ajouté par pingHeaderBadge(), retiré du DOM après l'animation. */
.maison-nav__cart-plusone {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ocre);
  border: 1px solid #D4AC58;
  color: var(--creme);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.01em;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(11, 37, 69, 0.18);
  animation: cart-plusone 1.5s var(--ease-out-soft) forwards;
}

@keyframes cart-plusone {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 1; transform: translateY(-4px); }
  60%  { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Reduced-motion : neutralise toutes les anims du panier */
@media (prefers-reduced-motion: reduce) {
  .cart-backdrop,
  .cart-drawer { transition: none; }
  .maison-nav__cart.is-pinging { animation: none; }
  .maison-nav__cart-plusone { animation: none; opacity: 0; }
}

/* ============================================================
   16 · PAGE /panier.html — vue grand format
   ============================================================ */

/* Sur la page panier elle-même on masque l'icône panier du header :
   l'utilisateur est déjà devant son panier en grand format, ouvrir le
   drawer par-dessus serait redondant. */
.page--panier .maison-nav__cart { display: none; }

.panier-page {
  /* Padding-top calé sur la hauteur réelle du chrome haut fixe :
     slogan-banner (50 px) + bandeau réassurance (40 px) + header
     sticky (72 px) = 162 px, + 28 px de respiration = 190 px.
     Évite que le titre "Mon panier" passe sous le header (Vague 2.0). */
  padding: 190px var(--space-5) clamp(var(--space-6), 6vw, var(--space-8));
  max-width: var(--container-default);
  margin: 0 auto;
}

@media (max-width: 900px) {
  .panier-page {
    /* Mobile : slogan 40 + réassurance 40 + header 60 = 140 px, + 24. */
    padding-top: 164px;
  }
}

.panier-page__title {
  font-family: var(--font-section-title);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  color: var(--bleu);
  letter-spacing: var(--tracking-tight);
  text-align: center;
  margin: 0 0 var(--space-3);
}

.panier-page__subtitle {
  font-family: var(--font-italic-editorial);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--gris);
  text-align: center;
  margin: 0 0 var(--space-7);
}

.panier-page__rule {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--ocre);
  margin: var(--space-5) auto var(--space-7);
}

/* Empty state plein écran */
.panier-page__empty {
  text-align: center;
  padding: var(--space-8) 0;
}
.panier-page__empty p {
  font-family: var(--font-italic-editorial);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--gris);
  margin: 0 0 var(--space-5);
}
.panier-page__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  background: var(--bleu);
  color: var(--creme);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 200ms var(--ease-out-soft);
}
.panier-page__empty-cta:hover { background: var(--bleu-cl); }

/* Layout 2 colonnes : items + sidebar total */
.panier-page__layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 900px) {
  .panier-page__layout { grid-template-columns: 1fr; }
}

/* Tableau d'items */
.panier-table {
  display: grid;
  gap: var(--space-3);
}

.panier-row {
  display: grid;
  grid-template-columns: 120px 1fr auto auto auto;
  gap: var(--space-5);
  padding: var(--space-5);
  align-items: center;
  background: var(--blanc);
  border: 1px solid var(--gris-cl);
}
@media (max-width: 700px) {
  .panier-row {
    grid-template-columns: 80px 1fr;
    grid-template-areas:
      "photo body"
      "qty   side"
      "remove remove";
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
  }
  .panier-row__photo  { grid-area: photo; }
  .panier-row__body   { grid-area: body; }
  .panier-row__qty    { grid-area: qty; justify-self: start; }
  .panier-row__side   { grid-area: side; justify-self: end; }
  .panier-row__remove { grid-area: remove; justify-self: end; }
}

.panier-row__photo {
  width: 120px;
  aspect-ratio: 1 / 1;
  background: var(--creme);
  border: 1px solid var(--gris-cl);
  overflow: hidden;
}
@media (max-width: 700px) { .panier-row__photo { width: 80px; } }
.panier-row__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.panier-row__body { min-width: 0; }
.panier-row__name {
  font-family: var(--font-section-title);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--noir);
  margin: 0 0 var(--space-1);
}
.panier-row__name a { color: inherit; text-decoration: none; }
.panier-row__name a:hover { color: var(--bleu); }

.panier-row__meta {
  font-family: var(--font-italic-editorial);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--gris);
  margin: 0;
}

.panier-row__qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--gris-cl);
  border-radius: var(--radius-sm);
  background: var(--creme);
}
.panier-row__qty button {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--gris);
  cursor: pointer;
}
.panier-row__qty button:hover { color: var(--noir); }
.panier-row__qty span {
  min-width: 24px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--noir);
  font-variant-numeric: tabular-nums;
}

.panier-row__side {
  font-family: var(--font-section-title);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--noir);
  white-space: nowrap;
}

.panier-row__remove {
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gris);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--gris-cl);
  text-underline-offset: 3px;
  transition: color 200ms var(--ease-out-soft);
}
.panier-row__remove:hover { color: var(--rouge); }

/* Sidebar total */
.panier-summary {
  background: var(--creme);
  border: 1px solid var(--gris-cl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-7);
}

.panier-summary__title {
  font-family: var(--font-section-title);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--bleu);
  margin: 0 0 var(--space-2);
}

.panier-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--noir);
}
.panier-summary__row strong {
  font-family: var(--font-section-title);
  font-weight: 600;
  color: var(--noir);
}
.panier-summary__row--muted { color: var(--gris); }
.panier-summary__row--muted strong { color: var(--gris); font-weight: 400; }

.panier-summary__row--total {
  padding-top: var(--space-3);
  border-top: 1px solid var(--gris-cl);
  font-family: var(--font-section-title);
  font-size: var(--fs-md);
}
.panier-summary__row--total strong {
  font-size: var(--fs-xl);
  color: var(--bleu);
}

.panier-summary__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--bleu);
  color: var(--creme);
  border: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.panier-summary__cta:disabled,
.panier-summary__cta[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--gris);
}
.panier-summary__hint {
  font-family: var(--font-italic-editorial);
  font-style: italic;
  font-size: 13px;
  color: var(--gris);
  text-align: center;
  margin: 0;
}

/* Réassurance bas de page */
.panier-reassure {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--gris-cl);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gris);
}
.panier-reassure span { display: inline-flex; align-items: center; gap: var(--space-2); }
.panier-reassure span::before {
  content: '◆';
  color: var(--ocre);
  font-size: 8px;
}


/* ============================================================
   FOOTER "RETOUR À DUVEA.FR" — composant transverse
   Présent sur toutes les pages du magasin sauf la porte d'entrée racine
   (qui propose un bouton secondaire dédié). Discret, hérite du fond
   de la page (transparent), filet supérieur fin gris-clair.
   ============================================================ */

.duvea-back {
  width: 100%;
  padding: 24px var(--space-5);
  text-align: center;
  background: transparent;
  border-top: 1px solid var(--gris-cl);
}

.duvea-back__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--gris);
  text-decoration: none;
  transition:
    color 200ms var(--ease-out-soft),
    text-decoration-color 200ms var(--ease-out-soft);
}

.duvea-back__link:hover,
.duvea-back__link:focus-visible {
  color: var(--bleu);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .duvea-back__link { transition: none; }
}


/* ============================================================
   13 · BANDEAU RÉASSURANCE — top de page magasin
   "Made in France · EPV · Confection française 48-72h · Retours 14 jours"
   Hauteur 40px, fond sable, sticky décalé sous lui via padding-top
   appliqué au body via la présence du bandeau (cf. règle ci-dessous).
   ============================================================ */
.reassure-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-sticky) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  background: #F5EFE6;
  color: var(--bleu);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Décalage du header sticky et du bouton "Magasin/Porte d'entrée" pour
   laisser place au slogan-banner (50 px) + reassure-banner (40 px). La
   devanture index.html n'utilise ni .maison-nav ni .maison-back, donc
   ces règles ne l'affectent pas. */
.reassure-banner { top: 50px; }
.maison-nav { top: 90px !important; }
.maison-back { top: 186px !important; }
@media (max-width: 900px) {
  .reassure-banner { top: 40px; }
  .maison-nav { top: 80px !important; }
  .maison-back { top: 164px !important; }
}

@media (max-width: 480px) {
  .reassure-banner {
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 0 12px;
  }
}

/* iPhone SE/12 mini, écrans ≤ 400 px : bandeau encore plus dense pour
   éviter un débordement de "Made in France · EPV · Confection française 48-72h ·
   Retours 14 jours" sur deux lignes. */
@media (max-width: 400px) {
  .reassure-banner {
    font-size: 10px;
    letter-spacing: 0;
    padding: 0 8px;
  }
}


/* ============================================================
   14 · SLOGAN sous logo dans le header sticky
   "Parce qu'une bonne journée commence la veille."
   ============================================================ */
.duvea-slogan {
  position: relative;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.3;
  color: rgba(11, 37, 69, 0.85);
  letter-spacing: 0.01em;
  margin-left: 22px;
  padding: 6px 0 6px 22px;
  white-space: nowrap;
  align-self: center;
}
.duvea-slogan::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg,
    rgba(200, 153, 104, 0)   0%,
    rgba(200, 153, 104, 0.55) 50%,
    rgba(200, 153, 104, 0)   100%);
}

@media (max-width: 1024px) {
  .duvea-slogan { font-size: 15px; margin-left: 14px; padding-left: 16px; }
}

@media (max-width: 768px) {
  .duvea-slogan { display: none; }
}


/* ============================================================
   15 · SLOGAN page panier — juste avant le bouton paiement
   ============================================================ */
.panier-summary__slogan {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.3;
  color: rgba(11, 37, 69, 0.8);
  text-align: center;
  margin: 18px 0 14px;
  padding: 0 4px;
}


/* ============================================================
   16 · MENU MOBILE — hamburger + drawer (audit 2026-04-30 bug 3)
   Avant cette passe, le menu COUETTES/OREILLERS/TRAVERSINS/MAGASIN
   était caché en display:none ≤ 900 px sans alternative. Désormais
   un bouton hamburger (injecté par menu-drawer.js dans #maison-nav)
   ouvre un drawer latéral droit avec les 4 liens.
   ============================================================ */

/* ----- Bouton hamburger ----- */
.menu-trigger {
  /* Caché par défaut sur desktop (le menu textuel est visible). */
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 12px 10px;
  margin-right: var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms var(--ease-out-soft);
}

.menu-trigger:hover,
.menu-trigger:focus-visible {
  background: var(--creme);
  outline: none;
}

.menu-trigger__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--bleu);
  border-radius: 1px;
  transition:
    transform 250ms var(--ease-out-soft),
    opacity   250ms var(--ease-out-soft);
}

/* État ouvert : transformation du hamburger en croix discrète. */
.menu-trigger[aria-expanded='true'] .menu-trigger__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.menu-trigger[aria-expanded='true'] .menu-trigger__bar:nth-child(2) {
  opacity: 0;
}
.menu-trigger[aria-expanded='true'] .menu-trigger__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Visible uniquement ≤ 900 px, comme la disparition du menu textuel
   (.maison-nav__menu { display: none }) gérée dans scene-maison.css. */
@media (max-width: 900px) {
  .menu-trigger {
    display: inline-flex;
  }
}

/* ----- Backdrop ----- */
.menu-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.40);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease-out-soft);
}
.menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ----- Drawer panel ----- */
.menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: #F5EFE6;                /* sable Duvéa, cohérent banner */
  border-left: 2px solid var(--ocre);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 250ms var(--ease-out-soft);
  will-change: transform;
}
.menu-drawer.is-open {
  transform: translateX(0);
}

.menu-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid rgba(11, 37, 69, 0.08);
}

.menu-drawer__title {
  font-family: var(--font-section-title);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: var(--tracking-tight);
  color: var(--bleu);
}

.menu-drawer__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--gris);
  cursor: pointer;
  transition: background 200ms var(--ease-out-soft), color 200ms var(--ease-out-soft);
}
.menu-drawer__close:hover,
.menu-drawer__close:focus-visible {
  background: rgba(255, 252, 247, 0.7);
  color: var(--noir);
  outline: none;
}

.menu-drawer__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

.menu-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.menu-drawer__link {
  display: flex;
  align-items: center;
  min-height: 56px;                   /* touch target large + respiration */
  padding: 16px var(--space-6);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 37, 69, 0.06);
  transition: background 200ms var(--ease-out-soft), color 200ms var(--ease-out-soft);
}
.menu-drawer__link:hover,
.menu-drawer__link:focus-visible {
  background: rgba(255, 252, 247, 0.6);
  color: var(--noir);
  outline: none;
}
.menu-drawer__list li:last-child .menu-drawer__link {
  border-bottom: 0;
}

.menu-drawer__foot {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid rgba(11, 37, 69, 0.08);
}

.menu-drawer__tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(11, 37, 69, 0.7);
  display: block;
  text-align: center;
}

/* Bloque le scroll body quand le menu est ouvert. */
body.has-menu-open {
  overflow: hidden;
}

/* Reduced-motion : suppression des transitions de slide. */
@media (prefers-reduced-motion: reduce) {
  .menu-backdrop,
  .menu-drawer,
  .menu-trigger__bar {
    transition: none;
  }
}

/* ============================================================
   BOUTON FLOTTANT « ← Retour à l'accueil » (vers duvea.fr)
   Miroir du bouton « 🛒 Boutique → » côté vitrine.
   Injecté dans le DOM par assets/js/floating-back.js.
   ============================================================ */
.duvea-back-fab {
  position: fixed;
  left: 24px;
  bottom: 100px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  background: var(--bleu);
  color: #FFFFFF;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(11, 37, 69, 0.35);
  transition: transform 0.2s ease, box-shadow 0.25s ease, opacity 0.35s ease;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  white-space: nowrap;
}
.duvea-back-fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.duvea-back-fab:hover,
.duvea-back-fab:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 8px 26px rgba(11, 37, 69, 0.45);
  outline: none;
}
/* Sur les fiches produits, l'acte2-banner sticky bottom occupe ~80-100px.
   On remonte le bouton pour qu'il reste visible au-dessus. */
.page--produit .duvea-back-fab {
  bottom: 160px;
}
@media (max-width: 480px) {
  .duvea-back-fab {
    left: 16px;
    bottom: 100px;
    padding: 14px 22px;
    font-size: 14px;
  }
  .page--produit .duvea-back-fab {
    bottom: 160px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .duvea-back-fab { transition: opacity .2s ease; }
  .duvea-back-fab:hover,
  .duvea-back-fab:focus-visible { transform: none; }
}

/* ============================================================
   BANDEAU SLOGAN SIGNATURE — sticky en haut, identique vitrine
   "Parce qu'une bonne journée commence la veille."
   ============================================================ */
.slogan-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-sticky) + 2);  /* 102, au-dessus du reassure (101) */
  background: #FAF6EE;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 20px;
  text-align: center;
  border-bottom: 1px solid rgba(11, 37, 69, 0.06);
}
.slogan-banner-rule {
  flex: 0 0 80px;
  height: 1px;
  background: var(--ocre);
  opacity: 0.85;
}
.slogan-banner-txt {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  color: var(--bleu);
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  animation: sloganIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes sloganIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  .slogan-banner { height: 40px; padding: 0 14px; gap: 12px; }
  .slogan-banner-rule { flex: 0 0 40px; }
  .slogan-banner-txt { font-size: 16px; }
}
@media (max-width: 480px) {
  .slogan-banner-rule { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slogan-banner-txt { animation: none; opacity: 1; transform: none; }
}


/* ============================================================
   17 · SOCIAL PROOF — Vague 2.0
   Bandeau certifications renforcé, témoignage fondatrice,
   module avis "bientôt". Palette signature : crème, bleu
   marine, ocre — via tokens, sans toucher au design global.
   ============================================================ */

/* 17a · Bandeau certifications — sous le bouton d'achat */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0;
  justify-content: center;
}
.trust-badges .badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--creme);
  color: var(--bleu);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  border: 1px solid var(--ocre);
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.trust-badges .emoji { font-size: 18px; }

/* 17b · Témoignage Brigitte — bande crème pleine largeur */
.testimonial-brigitte {
  background: var(--creme);
  padding: 64px 32px;
  margin: 64px 0;
  text-align: center;
}
.testimonial-brigitte .testimonial-content {
  max-width: 700px;
  margin: 0 auto;
}
.testimonial-brigitte blockquote {
  margin: 0;
  font-family: var(--font-section-title);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--bleu);
}
.testimonial-brigitte cite {
  display: block;
  margin-top: 24px;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: var(--ocre);
}

/* 17c · Module avis "bientôt" — sous le titre, avant le prix */
.reviews-pending {
  margin: 24px 0;
  padding: 20px;
  background: var(--blanc);
  border: 1px solid var(--ocre);
  border-radius: var(--radius-lg);
  text-align: center;
}
.reviews-pending .stars-display {
  margin-bottom: 12px;
  font-size: 28px;
  letter-spacing: 4px;
}
.reviews-pending .reviews-status {
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--bleu);
}
.reviews-pending .reviews-offer {
  font-size: 14px;
  color: var(--bleu);
}