/* =========================================================
   Guadaluz — styles.css  v2 "Lumière"
   Warm amber · Ivory · Premium artisan
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --container: 1200px;
  --gutter:    20px;
  --header-h:  76px;

  --bg:       #fdf5f2;
  --surface:  #ffffff;
  --surface2: #fdf0ec;

  --text:   #2d1f1f;
  --muted:  rgba(45,31,31,.55);
  --muted2: rgba(45,31,31,.38);

  --line:  rgba(45,31,31,.08);
  --line2: rgba(45,31,31,.13);

  --brand:       #2d1f1f;
  --brand-light: #fdddd0;
  --brand-dark:  #1a1212;
  --brand-glow:  rgba(45,31,31,.18);

  --brand2: #c9847a;
  --brand3: #2d1f1f;
  --brand4: #5c3a3a;

  --grad: linear-gradient(135deg, #d4918a 0%, #fdddd0 45%, #f0b8ad 60%, #d4918a 100%);

  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-xs:    0 2px 8px rgba(45,31,31,.07);
  --shadow-sm:    0 8px 28px rgba(45,31,31,.10);
  --shadow:       0 20px 60px rgba(45,31,31,.13);
  --shadow-lg:    0 40px 120px rgba(45,31,31,.18);
  --shadow-brand: 0 8px 32px rgba(45,31,31,.22);

  --ease:  cubic-bezier(.2,.8,.2,1);
  --ease2: cubic-bezier(.16,1,.3,1);
  --speed: 200ms;

  --ring:  0 0 0 4px rgba(45,31,31,.15);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--text);
  line-height: 1.65;
  background:
    radial-gradient(ellipse 900px 500px at 0% 0%,    rgba(253,221,208,.40), transparent 55%),
    radial-gradient(ellipse 700px 500px at 100% 20%, rgba(201,132,122,.12), transparent 55%),
    radial-gradient(ellipse 900px 600px at 30% 110%, rgba(253,221,208,.25), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
.hidden { display: none !important; }
::selection { background: rgba(253,221,208,.60); }
:root { scroll-padding-top: calc(var(--header-h) + 20px); }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease2), transform 600ms var(--ease2);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: rgba(250,248,244,.88);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(45,31,31,.07);
  transition: box-shadow var(--speed) var(--ease), background var(--speed) var(--ease);
}
.header.is-scrolled {
  background: rgba(250,248,244,.96);
  box-shadow: 0 4px 24px rgba(45,31,31,.08);
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.brandLogo { height: 40px; width: auto; object-fit: contain; display: block; }
.brandDot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 5px rgba(45,31,31,.15);
  flex-shrink: 0;
}

/* Desktop nav pill */
.nav {
  display: flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 999px;
  background: rgba(45,31,31,.04);
  border: 1px solid rgba(45,31,31,.08);
}
.nav a {
  padding: 9px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.nav a:hover { background: rgba(45,31,31,.10); color: var(--brand); transform: translateY(-1px); }

.headerActions { display: flex; align-items: center; gap: 10px; }

/* Hamburger button */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(45,31,31,.10);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: 0; flex-shrink: 0;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.hamburger:active { background: rgba(45,31,31,.06); }
.hamburger__bars {
  display: block;
  width: 20px; height: 2px;
  border-radius: 99px;
  background: var(--text);
  position: relative;
  transition: background .24s var(--ease2);
}
.hamburger__bars::before,
.hamburger__bars::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  border-radius: 99px;
  background: var(--text);
  position: absolute; left: 0;
  transition: transform .28s var(--ease2), width .28s var(--ease2);
}
.hamburger__bars::before { top: -6px; }
.hamburger__bars::after  { top:  6px; width: 14px; }
.hamburger.is-open .hamburger__bars            { background: transparent; }
.hamburger.is-open .hamburger__bars::before    { transform: rotate(45deg)  translateY(6px); width: 20px; }
.hamburger.is-open .hamburger__bars::after     { transform: rotate(-45deg) translateY(-6px); width: 20px; }

/* Overlay nav */
.navOverlay {
  display: none;
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(45,31,31,.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .32s ease;
}
.navOverlay.is-open { opacity: 1; }

/* Éléments masqués sur desktop */
.navClose { display: none; }
.navSocial { display: none; }


.cartBtn {
  position: relative;
  height: 44px; min-width: 44px;
  padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(45,31,31,.10);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  cursor: pointer; font-weight: 700; font-size: 15px;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.cartBtn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cartBtn__count {
  position: absolute; top: -7px; right: -7px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff; font-weight: 800; font-size: 11px;
  border: 2px solid var(--bg);
  box-shadow: var(--shadow-brand);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Typography ---------- */
.muted  { color: var(--muted); }
.muted2 { color: var(--muted2); }
.tiny   { font-size: 12px; color: var(--muted); }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--brand-light); color: var(--brand-dark);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  border: 1.5px solid rgba(45,31,31,.12);
  background: var(--surface); color: var(--text);
  cursor: pointer; font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
  overflow: hidden; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0);    box-shadow: var(--shadow-xs); }
.btn[disabled] { opacity: .42; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.w100 { width: 100%; }

.btn--primary {
  background: var(--grad);
  border-color: transparent;
  color: #fff; font-weight: 800;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover {
  box-shadow: 0 14px 40px rgba(45,31,31,.42);
  filter: brightness(1.06);
}
.btn--ghost {
  background: rgba(45,31,31,.04);
  border-color: rgba(45,31,31,.10);
  color: var(--muted);
}
.btn--ghost:hover { background: rgba(45,31,31,.07); color: var(--text); }
.btn--danger {
  background: rgba(220,38,38,.07);
  border-color: rgba(220,38,38,.20);
  color: #dc2626;
}
.btn--danger:hover { background: rgba(220,38,38,.13); box-shadow: 0 8px 24px rgba(220,38,38,.18); }

/* ---------- Layout ---------- */
main, .main { padding-bottom: 40px; }
.main { max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter) 80px; }
.section { max-width: var(--container); margin: 0 auto; padding: 120px var(--gutter) 0; }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 32px;
}
.section__head h2 {
  margin: 0;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
}
.section__head h2::after {
  content: "";
  display: block; width: 36px; height: 3px;
  border-radius: 99px; background: var(--grad); margin-top: 10px;
}
.section__head p { margin: 0; }

/* ---------- Badge / Pill ---------- */
.badge {
  font-size: 12px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(45,31,31,.52); color: #fff; font-weight: 700;
}
.pill {
  display: inline-flex; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(45,31,31,.22);
  background: var(--brand-light); color: var(--brand-dark);
  font-size: 12px; font-weight: 700;
}

/* ---------- Product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }

.card {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid rgba(45,31,31,.07);
  box-shadow: var(--shadow-xs);
  overflow: hidden; cursor: pointer;
  transition: transform 500ms var(--ease2), box-shadow 500ms var(--ease2);
}
.card:hover { transform: translateY(-10px); box-shadow: var(--shadow); }
.card.flash { animation: flashCard .4s var(--ease2); }
@keyframes flashCard {
  0%  { box-shadow: var(--shadow-xs); }
  50% { box-shadow: 0 0 0 5px rgba(45,31,31,.18), var(--shadow-sm); }
  100%{ box-shadow: var(--shadow-xs); }
}

.productMedia { position: relative; aspect-ratio: 4 / 3; min-height: 180px; background: #f0e8dc; overflow: hidden; }
.productMedia img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  transition: transform 800ms var(--ease2), filter 800ms var(--ease2);
  filter: saturate(1.06);
  /* masque l'icone image cassée */
  color: transparent;
  font-size: 0;
}
.card:hover .productMedia img { transform: scale(1.12); filter: saturate(1.15) contrast(1.04); }
.productMedia__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(45,31,31,.22), transparent 65%);
  pointer-events: none;
}
.productMedia__top {
  position: absolute; inset: 12px 12px auto 12px;
  display: flex; justify-content: flex-end;
}

.productBody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.productBody h3 { margin: 0; font-size: 16px; font-weight: 700; }
.productFooter { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.price {
  font-weight: 800; font-size: 18px; letter-spacing: -.01em;
  color: var(--brand4);
}

/* ---------- Pack wizard ---------- */
.packWizard { display: flex; flex-direction: column; gap: 20px; }
.packStep {
  background: var(--surface); border: 1px solid rgba(45,31,31,.07);
  box-shadow: var(--shadow-xs); border-radius: var(--r-xl); padding: 24px;
}
.packStep__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.packStep__title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.packTypes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.packTypeCard {
  text-align: left;
  border: 2px solid rgba(45,31,31,.07); border-radius: var(--r-lg);
  padding: 22px;
  background: linear-gradient(135deg, rgba(45,31,31,.04), rgba(250,248,244,.8));
  box-shadow: var(--shadow-xs); cursor: pointer;
  transition: transform 500ms var(--ease2), box-shadow 500ms var(--ease2), border-color 300ms var(--ease);
}
.packTypeCard:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); border-color: rgba(45,31,31,.30); }
.packTypeCard.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(45,31,31,.15), var(--shadow-sm);
}
.packTypeCard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.packTypeCard h4 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.packTypeCard p  { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.packBuilder { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.packPickGrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }

.packPick {
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid rgba(45,31,31,.07); box-shadow: var(--shadow-xs); overflow: hidden;
  transition: transform 500ms var(--ease2), box-shadow 500ms var(--ease2);
}
.packPick:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.packPick.is-out { opacity: .48; filter: grayscale(.7); pointer-events: none; }
.packPick__media { aspect-ratio: 16 / 9; background: #f0e8dc; overflow: hidden; }
.packPick__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 800ms var(--ease2); }
.packPick:hover .packPick__media img { transform: scale(1.10); }
.packPick__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.packPick__title { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.packPick__title h4 { margin: 0; font-size: 14px; font-weight: 700; }
.packPickMeta { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.packPick__actions { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.counter { display: flex; align-items: center; gap: 8px; }
.counter button {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1.5px solid rgba(45,31,31,.10); background: rgba(45,31,31,.04);
  cursor: pointer; font-size: 16px; font-weight: 700;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.counter button:hover { background: rgba(45,31,31,.12); border-color: rgba(45,31,31,.32); transform: scale(1.06); }
.counter button[disabled] { opacity: .35; cursor: not-allowed; transform: none; }
.counter span { min-width: 20px; text-align: center; font-weight: 800; font-size: 15px; }

.packPreview {
  position: sticky; top: calc(var(--header-h) + 20px);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--surface), rgba(245,227,192,.10));
  border: 1.5px solid rgba(45,31,31,.18);
  box-shadow: var(--shadow-sm); padding: 22px;
}
.packPreview__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.packPreview__lines {
  padding: 12px 0; display: flex; flex-direction: column; gap: 8px; min-height: 88px;
}
.packLine { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }
.packLine strong { color: var(--text); }
.packPreview__summary { margin-top: 14px; }

.sumRow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.sumRow--total { border-top: 1.5px solid var(--line2); margin-top: 6px; padding-top: 12px; }
.sumRow--total strong {
  font-size: 20px; font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ---------- Forms ---------- */
.adminBox, .newsletter {
  background: var(--surface); border: 1px solid rgba(45,31,31,.08);
  box-shadow: var(--shadow-xs); border-radius: var(--r-xl); padding: 24px;
}
.newsletter { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.newsletter input {
  flex: 1; min-width: 220px; height: 48px;
  border-radius: var(--r-sm); border: 1.5px solid rgba(45,31,31,.10);
  background: rgba(45,31,31,.03); padding: 0 14px; outline: none;
  transition: border-color var(--speed), box-shadow var(--speed);
}
.newsletter input:focus { border-color: var(--brand); box-shadow: var(--ring); }
.formMsg { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

.label {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
}
.label input, .label textarea, .label select {
  border-radius: var(--r-sm); border: 1.5px solid rgba(45,31,31,.10);
  background: rgba(45,31,31,.03); padding: 0 14px; outline: none;
  color: var(--text); font-size: 14px; font-weight: normal;
  letter-spacing: 0; text-transform: none;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease);
}
.label input, .label select { height: 48px; }
.label textarea { padding: 12px 14px; min-height: 80px; resize: vertical; }
.label input:focus, .label textarea:focus, .label select:focus {
  border-color: var(--brand); box-shadow: var(--ring); background: rgba(45,31,31,.04);
}

.input {
  width: 100%; height: 48px; border-radius: var(--r-sm);
  border: 1.5px solid rgba(45,31,31,.10); background: rgba(45,31,31,.03);
  padding: 0 14px; outline: none; color: var(--text); font-size: 14px;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.input:focus { border-color: var(--brand); box-shadow: var(--ring); }

.adminProductGrid {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 16px 24px 8px;
  max-height: 340px; overflow-y: auto;
  content-visibility: auto;
  contain-intrinsic-size: 0 340px;
}
.adminThumb {
  position: relative; width: 80px; height: 80px;
  border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .18s, box-shadow .18s;
  background: var(--surface2);
  flex-shrink: 0;
}
.adminThumb:hover { box-shadow: var(--shadow-sm); }
.adminThumb.is-selected { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45,31,31,.12); }
.adminThumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adminThumb__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: var(--muted2);
}
.adminThumb__del {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 11px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 0;
  transition: background .15s;
}
.adminThumb__del:hover { background: rgba(200,50,50,.85); }
.adminThumb__name {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.45);
  color: #fff; font-size: 9px; font-weight: 600;
  padding: 3px 4px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.adminForm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.adminForm .label:last-child { grid-column: 1 / -1; }

/* ---------- Drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.drawer.open { pointer-events: auto; }
.drawer__overlay {
  position: absolute; inset: 0;
  background: rgba(45,31,31,.38); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 280ms var(--ease2);
}
.drawer.open .drawer__overlay { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(460px, 93vw);
  transform: translateX(100%); transition: transform 360ms var(--ease2);
  background: var(--bg); border-left: 1px solid rgba(45,31,31,.08);
  box-shadow: -24px 0 80px rgba(45,31,31,.14);
  display: flex; flex-direction: column;
}
.drawer.open .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.drawer__head strong { font-size: 15px; font-weight: 800; }
.drawer__body { padding: 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; flex: 1; }

.iconBtn {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1px solid rgba(45,31,31,.09); background: rgba(45,31,31,.04);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.iconBtn:hover { background: rgba(45,31,31,.08); transform: scale(1.04); }

.cartItems { display: flex; flex-direction: column; gap: 10px; }
.cartItem {
  border-radius: var(--r); background: var(--surface);
  border: 1px solid rgba(45,31,31,.07); padding: 10px 14px;
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
  box-shadow: var(--shadow-xs); transition: box-shadow var(--speed) var(--ease);
}
.cartItem:hover { box-shadow: var(--shadow-sm); }
.cartItem__img {
  width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
  background: var(--surface2); flex-shrink: 0;
}
.cartItem__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartItem__info { min-width: 0; }
.cartItem h4 { margin: 0; font-size: 14px; font-weight: 700; }
.cartItem p  { margin: 0; font-size: 12px; color: var(--muted); }

.qty { display: flex; align-items: center; gap: 7px; }
.qty button {
  width: 36px; height: 36px; border-radius: var(--r-xs);
  border: 1.5px solid rgba(45,31,31,.10); background: rgba(45,31,31,.04);
  cursor: pointer; font-size: 16px; font-weight: 700;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.qty button:hover { background: rgba(45,31,31,.10); border-color: rgba(45,31,31,.28); }
.qty span { min-width: 18px; text-align: center; font-weight: 800; }

.cartSummary { border-top: 1.5px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Footer ---------- */
.footer {
  margin-top: 80px; padding: 36px var(--gutter);
  border-top: 1px solid var(--line);
  background: linear-gradient(to bottom, transparent, rgba(45,31,31,.02));
}
.footer__inner { max-width: var(--container); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer__links { display: flex; gap: 20px; }
.footer__links a { color: var(--muted); font-size: 14px; font-weight: 500; transition: color var(--speed) var(--ease), transform var(--speed) var(--ease); }
.footer__links a:hover { color: var(--brand); transform: translateY(-1px); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px;
  background: var(--text); color: #fff;
  font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; z-index: 9999;
  white-space: nowrap; box-shadow: var(--shadow);
  transition: opacity .24s var(--ease), transform .24s var(--ease2);
}
.toast.is-on    { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--success { background: #2d6a4f; }
.toast--error   { background: #c0392b; }
.toast--warning { background: #b45309; }
.toast--info    { background: var(--brand-dark); }

/* Badge pop quand le compteur change */
@keyframes badgePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.6); }
  65%  { transform: scale(0.85); }
  100% { transform: scale(1); }
}
.cartBtn__count.pop { animation: badgePop .42s cubic-bezier(.34,1.56,.64,1); }

/* ---------- Button loading state ---------- */
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn--loading {
  pointer-events: none; opacity: .78;
}
.btn--loading::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.90);
  border-radius: 50%;
  animation: btnSpin .65s linear infinite;
  margin-right: 4px;
}
.btn--ghost.btn--loading::before,
.btn:not(.btn--primary).btn--loading::before {
  border-color: rgba(45,31,31,.18);
  border-top-color: rgba(45,31,31,.70);
}

/* ---------- FormMsg states ---------- */
.formMsg { min-height: 18px; font-size: 13px; transition: color .2s; }
.formMsg.is-success { color: #2d6a4f !important; }
.formMsg.is-error   { color: #c0392b !important; }
.formMsg.is-info    { color: var(--brand); }

/* ---------- Skeleton shimmer ---------- */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg,
    rgba(45,31,31,.06) 0%, rgba(45,31,31,.11) 50%, rgba(45,31,31,.06) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 10px;
}
.skeletonCard {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid rgba(45,31,31,.06);
  overflow: hidden;
}
.skeletonCard__media { aspect-ratio: 4/3; }
.skeletonCard__body  { padding: 18px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Modal générique (adminAddModal, etc.) ---------- */
.modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 9100;
}
.modal.open { display: block; }

.modal__overlay {
  position: absolute; inset: 0;
  background: rgba(12,10,8,.42);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .22s ease;
}
.modal.open .modal__overlay { opacity: 1; }

.modal__panel {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -47%) scale(.97); opacity: 0;
  width: min(580px, calc(100vw - 28px));
  max-height: calc(100vh - 48px);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .26s var(--ease2), opacity .2s ease;
}
.modal.open .modal__panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  background: var(--surface2);
}
.modal__head strong { font-weight: 800; font-size: 15px; }
.modal__body { padding: 22px; overflow: auto; }

/* ---------- PDP Modal ---------- */
.pdpModal { display: none; position: fixed; inset: 0; z-index: 9000; }
.pdpModal.open { display: block; }
.pdpModal__overlay {
  position: absolute; inset: 0;
  background: rgba(45,31,31,.38); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .24s ease;
}
.pdpModal.open .pdpModal__overlay { opacity: 1; }
.pdpModal__panel {
  position: absolute; left: 50%; top: 50%;
  width: min(780px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 32px));
  transform: translate(-50%, -48%) scale(.97); opacity: 0;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); border: 1px solid rgba(45,31,31,.08);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .28s var(--ease2), opacity .22s ease;
}
.pdpModal.open .pdpModal__panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.pdpModal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--surface2);
}
.pdpModal__head strong { font-size: 15px; font-weight: 800; }
.pdpModal__body { overflow: auto; flex: 1; }

.pdpGrid { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.pdpMedia { background: var(--surface2); overflow: hidden; cursor: zoom-in; }
.pdpMedia img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }

/* Lightbox plein écran */
.imgLightbox {
  display: none;
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.96);
  align-items: center; justify-content: center;
  cursor: zoom-out;
  touch-action: auto;
}
.imgLightbox.open { display: flex; }
.imgLightbox img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  touch-action: pinch-zoom;
  user-select: none;
}
.imgLightbox__close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none;
  color: #fff; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pdpInfo { padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.pdpTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pdpPrice {
  font-size: 28px; font-weight: 900; letter-spacing: -.02em;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pdpStock { font-size: 13px; padding: 5px 12px; border-radius: 999px; background: rgba(61,122,91,.10); color: var(--brand2); font-weight: 700; }
.pdpDesc { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }

/* Notify */
.notifyRow { border: 1.5px solid rgba(45,31,31,.18); border-radius: var(--r); padding: 14px; background: rgba(45,31,31,.04); display: flex; flex-direction: column; gap: 10px; }
.notifyRow__left strong { font-size: 14px; }
.notifyToggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.notifyToggle input { display: none; }
.toggleUi { position: absolute; inset: 0; border-radius: 999px; background: rgba(45,31,31,.14); cursor: pointer; transition: background .22s; }
.toggleUi::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform .22s var(--ease2); }
.notifyToggle input:checked + .toggleUi { background: var(--brand); }
.notifyToggle input:checked + .toggleUi::before { transform: translateX(20px); }

/* ---------- Hero ---------- */
.hero0 {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  overflow: hidden;
  padding: 72px 20px 64px;
  text-align: center;
  background:
    radial-gradient(ellipse 900px 420px at 50% -5%, rgba(253,221,208,.80), transparent 62%),
    radial-gradient(ellipse 500px 300px at 10% 100%, rgba(196,120,120,.12), transparent 55%),
    radial-gradient(ellipse 500px 300px at 90% 100%, rgba(196,120,120,.10), transparent 55%),
    var(--bg);
}
/* Logo watermark en fond */
.hero0__deco {
  position: absolute; inset: 0; pointer-events: none;
  background: url("images/logo.jpg") no-repeat center center / 520px auto;
  opacity: .07;
}
.hero0__inner {
  position: relative;
  max-width: 700px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.hero0__content {
  display: flex; flex-direction: column; align-items: center;
}
.hero0__tag {
  display: inline-flex; align-items: center;
  padding: 6px 16px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255,255,255,.80); border: 1px solid rgba(45,31,31,.16);
  color: var(--muted);
}
.hero0__title {
  margin: 22px 0 16px;
  font-size: clamp(36px, 5.8vw, 68px);
  line-height: 1.06; letter-spacing: -0.04em; font-weight: 900; color: var(--text);
}
.hero0__grad {
  background: linear-gradient(90deg, #b86262, #d98888, #b86262);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero0__lead {
  font-size: 16px; line-height: 1.78; color: var(--muted);
  max-width: 48ch; margin: 0 0 28px;
}
.hero0__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  overflow: hidden;
  padding: 110px 40px 100px;
  text-align: center;
  background: linear-gradient(180deg, #fdddd0 0%, #fdf5f2 50%, #fdf5f2 100%);
}
.hero__watermark {
  position: absolute; inset: 0; pointer-events: none;
  background: url("images/logo.jpg") no-repeat center 38% / 580px auto;
  opacity: .06;
}
.hero__inner {
  position: relative;
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.hero__eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
}
.hero__line {
  width: 36px; height: 1px;
  background: rgba(45,31,31,.28);
  margin: 28px 0;
}
.hero__title {
  font-size: clamp(44px, 5.8vw, 78px);
  font-weight: 900; line-height: 1.06; letter-spacing: -0.04em;
  color: var(--text); margin: 0;
}
.hero__sub {
  font-size: 17px; line-height: 1.85; color: var(--muted);
  max-width: 50ch; margin: 32px 0 0;
}
.hero__cta {
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: center; margin-top: 44px;
}

/* ---------- Gift Card ---------- */
.gift { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.gift__previewWrap { padding: 20px; border-radius: var(--r-xl); background: rgba(45,31,31,.03); border: 1px solid rgba(45,31,31,.07); }
.gift__form { padding: 24px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid rgba(45,31,31,.07); box-shadow: var(--shadow-sm); }
.gift__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.giftCard {
  position: relative; border-radius: 26px; padding: 20px;
  min-height: 260px; overflow: hidden;
  box-shadow: 0 26px 70px rgba(45,31,31,.18), inset 0 0 0 1px rgba(255,255,255,.22);
  background: radial-gradient(900px 520px at 10% 10%, rgba(255,255,255,.20), transparent 60%);
}
.giftCard::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; }
.giftCard[data-color="violet"]::before { background: linear-gradient(135deg, #7c3aed, #a78bfa, #6d28d9); }
.giftCard[data-color="rose"]::before  { background: linear-gradient(135deg, #c47878, #fdddd0, #b86060); }
.giftCard[data-color="ambre"]::before  { background: linear-gradient(135deg, var(--brand), #e6a84e, var(--brand-dark)); }
.giftCard[data-color="noir"]::before   { background: linear-gradient(135deg, #1c1814, #3d3530, #0d0b09); }
.giftCard::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background:
    radial-gradient(600px 400px at 90% -10%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(400px 300px at -10% 110%, rgba(255,255,255,.10), transparent 55%);
}
.giftCard__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.giftCard__brand   { font-size: 13px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.giftCard__amount  { font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -.02em; }
.giftCard__title   { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.78); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }
.giftCard__meta    { display: flex; flex-direction: column; gap: 8px; }
.giftCard__row     { display: flex; flex-direction: column; gap: 2px; }
.giftCard__label   { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.55); }
.giftCard__value   { font-size: 13px; color: rgba(255,255,255,.90); font-weight: 600; word-break: break-all; }
.giftCard__msg     { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.75); font-style: italic; line-height: 1.5; }
.giftCard__foot    { margin-top: 12px; }
.giftCard__hint    { font-size: 10px; color: rgba(255,255,255,.50); letter-spacing: .06em; }

.colorSwatches { display: flex; gap: 10px; margin-top: 6px; }
.swatch {
  -webkit-appearance: none; appearance: none;
  display: block; padding: 0;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: none; outline: 3px solid transparent; outline-offset: 3px;
  overflow: hidden; flex-shrink: 0;
  transition: transform var(--speed) var(--ease), outline-color var(--speed) var(--ease);
}
.swatch:hover { transform: scale(1.14); }
.swatch.is-selected { outline-color: var(--brand); transform: scale(1.08); }
.swatch[data-gc-color="violet"] { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.swatch[data-gc-color="rose"]  { background: linear-gradient(135deg, #c47878, #fdddd0); }
.swatch[data-gc-color="ambre"]  { background: linear-gradient(135deg, var(--brand), #e6a84e); }
.swatch[data-gc-color="noir"]   { background: linear-gradient(135deg, #1c1814, #3d3530); }

/* ---------- Testimonials ---------- */
.testiOverall { display: flex; justify-content: center; margin-bottom: 48px; }
.testiScore { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.testiScore__num {
  font-size: 4.2rem; font-weight: 900; line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.testiScore__stars { font-size: 1.6rem; color: var(--brand3); letter-spacing: 3px; }
.testiScore__label { font-size: 14px; color: var(--muted); font-weight: 600; }
.testiCarouselWrap { display: flex; align-items: center; gap: 16px; }
.testiArrow {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--line2); background: var(--surface);
  box-shadow: var(--shadow-xs); font-size: 24px; cursor: pointer; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.testiArrow:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: scale(1.08); box-shadow: var(--shadow-brand); }
.testiViewport { overflow: hidden; flex: 1; min-width: 0; }
.testiTrack { display: flex; gap: 24px; transition: transform 480ms var(--ease2); will-change: transform; }
.testiCard {
  flex-shrink: 0; background: var(--surface); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.testiCard:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.testiCard__stars { font-size: 1.1rem; color: var(--brand3); letter-spacing: 2px; }
.testiCard__text  { font-size: 15px; line-height: 1.75; color: var(--muted); font-style: italic; margin: 0; flex: 1; }
.testiCard__foot  { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); gap: 8px; }
.testiCard__name  { font-size: 14px; font-weight: 700; color: var(--text); }
.testiCard__date  { font-size: 12px; color: var(--muted2); white-space: nowrap; }
.testiDots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.testiDot { width: 8px; height: 8px; border-radius: 999px; background: var(--line2); border: none; cursor: pointer; padding: 0; transition: background var(--speed) var(--ease), width var(--speed) var(--ease); }
.testiDot.is-on { background: var(--brand); width: 26px; }

/* =============================================
   Section avis — header + trust bar
============================================= */
.testiTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.testiTop__title {
  margin: 0;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
}
.testiTop__title::after {
  content: "";
  display: block; width: 36px; height: 3px;
  border-radius: 99px; background: var(--grad); margin-top: 10px;
}

/* Score centré, grand, sans cadre */
.testiScoreBlock {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-bottom: 48px;
}
.testiScoreBlock__num {
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 900; line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.testiScoreBlock__stars {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--brand3); letter-spacing: 4px; line-height: 1;
}
.testiScoreBlock__label {
  font-size: 15px; color: var(--muted); font-weight: 600; margin-top: 2px;
}

/* =============================================
   Testimonial form modal
============================================= */
.testiModal {
  display: none;
  position: fixed; inset: 0;
  z-index: 9200;
  align-items: center; justify-content: center;
}
.testiModal[aria-hidden="false"] { display: flex; }

.testiModal__overlay {
  position: absolute; inset: 0;
  background: rgba(45,31,31,.44);
  backdrop-filter: blur(6px);
  animation: fadeIn .22s ease both;
}

.testiModal__panel {
  position: relative; z-index: 1;
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px 32px;
  animation: slideUp .28s var(--ease2) both;
}

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(18px) scale(.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.testiModal__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(45,31,31,.10);
  background: rgba(45,31,31,.04);
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.testiModal__close:hover { background: rgba(45,31,31,.09); color: var(--text); }

.testiModal__header { text-align: center; margin-bottom: 28px; }
.testiModal__icon {
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--brand-light);
  font-size: 24px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.testiModal__title { margin: 0 0 6px; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.testiModal__sub   { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }

.testiModal__form { display: flex; flex-direction: column; gap: 18px; }

/* Form fields inside modal */
.testiField { display: flex; flex-direction: column; gap: 8px; }
.testiField__label {
  font-size: 12px; font-weight: 700; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
}
.testiField__input {
  width: 100%; height: 48px;
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(45,31,31,.10);
  background: rgba(45,31,31,.03);
  padding: 0 14px; outline: none;
  color: var(--text); font-size: 15px;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease);
}
.testiField__input--area { height: auto; padding: 14px; resize: none; line-height: 1.6; }
.testiField__input:focus { border-color: var(--brand); box-shadow: var(--ring); background: rgba(45,31,31,.04); }

/* Star rating block */
.testiRatingBlock { display: flex; flex-direction: column; gap: 10px; }
.testiStarPicker  { display: flex; gap: 6px; }
.testiStarBtn {
  font-size: 36px; line-height: 1;
  border: none; background: none; cursor: pointer; padding: 2px 4px;
  color: rgba(45,31,31,.14);
  transition: color 120ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.testiStarBtn:hover { transform: scale(1.18); }
.testiStarBtn.is-on { color: var(--brand3); }
.testiRatingHint { font-size: 12px; color: var(--muted); font-style: italic; min-height: 16px; }

.testiModal__submit { margin-top: 4px; padding: 15px; font-size: 15px; }

.testiFormMsg {
  min-height: 20px; font-size: 13px; color: #dc2626;
  text-align: center; margin: 0;
}
.testiFormMsg:empty { display: none; }

/* Success state */
.testiModal__success { text-align: center; padding: 16px 0 8px; }
.testiSuccess__icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand2), #52b788);
  color: #fff; font-size: 30px; font-weight: 800;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  animation: popIn .4s var(--ease2) both;
}
@keyframes popIn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.testiSuccess__title { margin: 0 0 10px; font-size: 1.3rem; font-weight: 800; }
.testiSuccess__sub   { margin: 0 0 24px; font-size: 14px; color: var(--muted); line-height: 1.6; }

/* =============================================
   Auth card (login / signup)
============================================= */
.authCard {
  max-width: 440px;
  background: var(--surface);
  border: 1px solid rgba(45,31,31,.08);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: 36px 32px;
  transition: max-width .25s var(--ease2);
}
.authCard--wide { max-width: 560px; }
.authForm { display: flex; flex-direction: column; gap: 14px; }
.authForm__title { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.authForm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.authSwitch { margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.authSwitch a { color: var(--brand); font-weight: 700; text-decoration: underline; }

/* =============================================
   User profile card
============================================= */
.userProfile {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid rgba(45,31,31,.08);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: 28px 32px;
  max-width: 640px;
  position: relative;
  overflow: hidden;
}
.userProfile::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad);
}
.userProfile__avatar {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--grad);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
  box-shadow: 0 6px 20px rgba(45,31,31,.30);
}
.userProfile__info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.userProfile__greeting {
  margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em;
}
.userProfile__email { margin: 0; font-size: 14px; color: var(--muted); }

.roleBadge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--brand-light); color: var(--brand-dark);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin-top: 4px; align-self: flex-start;
}

/* =============================================
   Orders list (user)
============================================= */
.ordersList { display: flex; flex-direction: column; gap: 12px; }

.orderCard {
  background: var(--surface);
  border: 1px solid rgba(45,31,31,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.orderCard { cursor: pointer; }
.orderCard:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.orderCard__cta { padding: 0 20px 14px; font-size: 12px; color: var(--muted2); }

.orderCard__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(45,31,31,.06);
}
.orderCard__id {
  font-size: 13px; font-weight: 700; color: var(--muted);
  font-family: monospace; letter-spacing: .04em;
}
.orderCard__body {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 20px 16px;
}
.orderCard__meta {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: 13px; color: var(--muted);
}
.orderCard__meta span { display: flex; align-items: center; gap: 5px; }
.orderCard__date { font-size: 12px; color: var(--muted2); }
.orderCard__total {
  font-size: 20px; font-weight: 900; letter-spacing: -.01em;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Status badges */
.orderStatus {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.orderStatus::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.orderStatus--waiting  { background: rgba(245,158,11,.12); color: #b45309; }
.orderStatus--prep     { background: rgba(45,31,31,.12); color: var(--brand-dark); }
.orderStatus--transit  { background: rgba(59,130,246,.12); color: #1d4ed8; }
.orderStatus--done     { background: rgba(61,122,91,.12);  color: var(--brand2); }
.orderStatus--default  { background: rgba(45,31,31,.06);   color: var(--muted); }

/* Empty state */
.ordersEmpty {
  text-align: center; padding: 60px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ordersEmpty__icon  { font-size: 3rem; }
.ordersEmpty__title { margin: 0; font-size: 1.2rem; font-weight: 800; }
.ordersEmpty__sub   { margin: 0; color: var(--muted); font-size: 14px; }

/* My orders card override */
#myOrdersList .cartItem { background: var(--surface); }

/* =============================================
   User order detail overlay
============================================= */
.uod-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  background: rgba(45,31,31,.48);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: uod-fade-in 180ms var(--ease);
}

.uod-panel {
  background: var(--surface);
  border-radius: var(--r-xl);
  width: 100%; max-width: 520px; max-height: 82vh;
  overflow-y: auto; overflow-x: hidden;
  padding: 28px 24px 36px;
  box-shadow: var(--shadow-lg);
  animation: uod-scale-in 260ms var(--ease2);
}

.uod-panel__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}

.uod-panel__title {
  margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em;
}

.uod-close {
  border: none; background: var(--surface2); color: var(--brand);
  border-radius: 50%; width: 36px; height: 36px;
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease);
  flex-shrink: 0;
}
.uod-close:hover { background: var(--brand-light); transform: scale(1.08); }

.uod-status { margin: 10px 0 18px; }

.uod-meta {
  background: var(--surface2);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 14px;
}
.uod-meta p { margin: 0; color: var(--text); }
.uod-meta .uod-date { font-size: 12px; color: var(--muted); }

.uod-total-line {
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 10px;
  border-top: 1px solid rgba(45,31,31,.08);
}

.uod-total-value {
  font-size: 22px; font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.uod-section-label {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--muted2);
}

.uod-items { display: flex; flex-direction: column; }

.uod-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(45,31,31,.07);
}
.uod-item:last-child { border-bottom: none; }

.uod-item__img {
  width: 66px; height: 66px; border-radius: var(--r-sm);
  object-fit: cover; flex-shrink: 0;
}

.uod-item__placeholder {
  width: 66px; height: 66px; border-radius: var(--r-sm);
  background: var(--surface2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}

.uod-item__info { flex: 1; min-width: 0; }
.uod-item__name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.uod-item__sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

@keyframes uod-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes uod-scale-in {
  from { transform: scale(.95) translateY(10px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

/* =============================================
   Dashboard — tabs
============================================= */
.dashTabs {
  display: flex; gap: 4px;
  background: rgba(45,31,31,.04);
  border: 1px solid rgba(45,31,31,.08);
  border-radius: var(--r-lg);
  padding: 5px; margin-bottom: 24px;
  width: fit-content;
}
.dashTab__btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--r-sm);
  border: none; background: transparent;
  font-size: 14px; font-weight: 600; color: var(--muted);
  cursor: pointer; white-space: nowrap;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.dashTab__btn:hover { color: var(--text); background: rgba(45,31,31,.05); }
.dashTab__btn.is-active {
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-xs);
}
.dashTab__badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* =============================================
   Dashboard — panels & cards
============================================= */
.dashPanel { display: flex; flex-direction: column; gap: 20px; }
.dashPanel.hidden { display: none !important; }

.dashCard {
  background: var(--surface);
  border: 1px solid rgba(45,31,31,.08);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.dashCard__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(45,31,31,.06);
  background: var(--surface2);
}
.dashCard__title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.dashCard__controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dashCard__foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px 24px;
  border-top: 1px solid rgba(45,31,31,.06);
  background: var(--surface2);
}
.dashCard .adminForm { padding: 20px 24px; margin: 0; }
.dashCard .adminOrdersList { padding: 0 24px 4px; }
.dashCard .adminOrderDetail { margin: 0 24px 20px; }

/* Orders */
.adminOrdersList { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.adminOrderRow {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 16px; border-radius: var(--r);
  border: 1px solid rgba(45,31,31,.07); background: var(--bg);
  cursor: pointer; text-align: left;
  transition: background var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.adminOrderRow:hover { background: var(--surface); box-shadow: var(--shadow-xs); transform: translateX(3px); }
.adminOrderDetail {
  border-radius: var(--r-lg); border: 1.5px solid rgba(45,31,31,.18);
  background: rgba(45,31,31,.04); padding: 18px;
  margin-top: 8px;
}

/* Status pill */
.statusPill {
  display: inline-flex; padding: 5px 12px; border-radius: 999px;
  background: rgba(61,122,91,.10); color: var(--brand2);
  font-size: 12px; font-weight: 700;
}

/* =============================================
   Admin — form grid (modal add product)
============================================= */
.formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 4px; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.field input, .field textarea, .field select {
  border-radius: var(--r-sm); border: 1.5px solid rgba(45,31,31,.10);
  background: rgba(45,31,31,.03); padding: 0 14px; outline: none;
  color: var(--text); font-size: 14px; font-weight: normal;
  letter-spacing: 0; text-transform: none;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.field input, .field select { height: 48px; }
.field textarea { padding: 12px 14px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); box-shadow: var(--ring); }
.adminAddFooter { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.imgPicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }

/* =============================================
   Testimonials admin cards
============================================= */
.testiAdminCard {
  border: 1px solid rgba(45,31,31,.08); border-radius: var(--r-lg);
  padding: 18px 20px; margin: 0 24px 12px;
  transition: box-shadow var(--speed) var(--ease);
}
.testiAdminCard:first-child { margin-top: 16px; }
.testiAdminCard:last-child  { margin-bottom: 20px; }
.testiAdminCard:hover { box-shadow: var(--shadow-xs); }
.testiAdminCard__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 10px;
}
.testiAdminCard__body {
  font-size: 14px; line-height: 1.65; color: var(--muted);
  font-style: italic; margin: 0 0 14px;
}
.testiAdminCard__actions { display: flex; gap: 10px; }

/* =============================================
   Gift cards list (account)
============================================= */
.gcList { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.gcCard {
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.gcCard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.gcCard--used { opacity: .55; filter: grayscale(.6); }

.gcCard__visual {
  padding: 20px 18px; color: #fff;
  position: relative; overflow: hidden;
}
.gcCard__visual-top {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px;
}
.gcCard__brand  { font-size: 11px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; opacity: .82; }
.gcCard__amount { font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; }
.gcCard__label  { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .72; margin-bottom: 12px; }
.gcCard__code   {
  background: rgba(255,255,255,.15); border-radius: 10px; padding: 10px 14px;
  font-size: 1rem; font-weight: 900; letter-spacing: .12em; text-align: center;
}

.gcCard__body { padding: 14px 18px 16px; background: var(--surface); }

.gcCard__balance { display: flex; flex-direction: column; gap: 0; }
.gcCard__balanceBar {
  height: 6px; border-radius: 99px; background: rgba(45,31,31,.10); overflow: hidden;
}
.gcCard__balanceFill {
  height: 100%; border-radius: 99px;
  background: var(--grad);
  transition: width .4s var(--ease2);
}

/* =============================================
   Admin — client search results
============================================= */
.clientProfile {
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--surface2);
  border: 1px solid var(--line);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.clientProfile__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 16px; flex-shrink: 0;
}
.clientGcCard {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; margin-bottom: 10px;
  transition: box-shadow var(--speed) var(--ease);
}
.clientGcCard:hover { box-shadow: var(--shadow-xs); }
.clientGcCard__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 8px;
}
.clientGcCard__code {
  font-family: monospace; font-size: 14px; font-weight: 800;
  letter-spacing: .06em; color: var(--text);
}
.clientGcCard__balance {
  font-size: 16px; font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.clientGcCard__deduct {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px;
}

/* =============================================
   Admin — other
============================================= */
.adminActions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* My orders (user) */
#myOrdersList .cartItem { background: var(--surface); }

/* ---------- Animations ---------- */
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)} }
.cartBtn.bump { animation: bump .30s var(--ease); }

/* ---------- Stock out ---------- */
.card.is-out { opacity: .50; filter: grayscale(.9); }
.card.is-out .productMedia::after {
  content: "Rupture"; position: absolute; top: 10px; left: 10px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(45,31,31,.78); color: #fff;
}
.packPick.is-out { opacity: .45; filter: grayscale(.7); }

/* ---------- Stars (kept for any remaining refs) ---------- */
.stars { display: inline-flex; gap: 2px; }
.star { width: 14px; height: 14px; border-radius: 2px; background: var(--line2); }
.star.is-on  { background: var(--brand3); }
.star.is-half{ background: linear-gradient(90deg, var(--brand3) 50%, var(--line2) 50%); }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
  .hero0 { min-height: 86vh; padding-top: 30px; padding-bottom: 88px; }
  .hero0__inner { grid-template-columns: 2.8fr 1.5fr; padding-left: 30px; }
  .hero0__title { font-size: clamp(38px, 5.2vw, 58px); }
  .hero0__lead  { font-size: 15px; }
  .hero0__candles { width: min(520px, 42vw); }
}

@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .packBuilder { grid-template-columns: 1fr; }
  .packPreview { position: relative; top: auto; }
}

/* ── Tablet / Large mobile (≤ 768px) ───── */
@media (max-width: 768px) {

  /* ── Header: 3-column grid (hamburger | brand centered | cart) ── */
  .header {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    padding: 0 12px;
    gap: 0;
  }
  .hamburger      { display: inline-flex; align-self: center; justify-self: start; }
  .brand          { justify-content: center; align-self: center; }
  .brandText      { display: block; font-size: 15px; }
  .headerActions  { justify-self: end; display: flex; align-items: center; }

  /* ── Nav: panneau plein écran ── */
  .navOverlay { display: block; pointer-events: none; }
  .navOverlay.is-open { pointer-events: auto; }

  .nav {
    position: fixed;
    top: 0; right: 0;
    width: 100vw; height: 100dvh;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 100px 40px 60px;
    background: #ffffff;
    border: none; border-radius: 0;
    transform: translateX(100%);
    opacity: 1;
    pointer-events: none;
    transition: transform .38s cubic-bezier(.16,1,.3,1);
  }
  .nav.open,
  .nav.is-open {
    transform: translateX(0);
    pointer-events: auto;
  }
  .nav::before { display: none; }

  /* Bouton fermer */
  .navClose {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 20px; right: 20px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(45,31,31,.06);
    border: 1px solid rgba(45,31,31,.10);
    font-size: 18px; color: var(--text); cursor: pointer;
    transition: background .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .navClose:hover { background: rgba(45,31,31,.12); }

  /* Liens */
  .nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0;
    font-size: 18px; font-weight: 600; letter-spacing: 0;
    color: var(--text); text-align: left;
    background: transparent; border: none; border-radius: 0;
    width: 100%;
    transform: none !important;
    transition: color .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .nav a::after { content: "›"; font-size: 28px; font-weight: 300; color: var(--muted2); }
  .nav a:hover { background: transparent; transform: none; }
  .nav a:active { color: var(--brand2); }

  /* Réseaux sociaux — collés en bas */
  .navSocial {
    margin-top: auto;
    padding-top: 24px;
    display: flex; gap: 20px;
  }
  .navSocial__link {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500; color: var(--muted);
    border: none; border-radius: 0; width: auto;
    padding: 0; justify-content: flex-start;
    transition: color .18s ease;
  }
  .navSocial__link::after { display: none; }
  .navSocial__link:active { color: var(--text); }

  /* ── Hero ── */
  .hero { padding: 64px 24px 56px; }
  .hero__title { font-size: clamp(32px, 8vw, 48px); }
  .hero__sub { font-size: 15px; line-height: 1.75; margin-top: 22px; }
  .hero__line { margin: 20px 0; }
  .hero__cta { margin-top: 30px; gap: 10px; }
  .hero__watermark { background-size: 360px auto; }

  /* ── Spacing ── */
  :root { --header-h: 66px; }
  .section { padding-top: 64px; padding-left: var(--gutter); padding-right: var(--gutter); }
  .section__head { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 0; margin-bottom: 16px; }
  .section__head h2 { font-size: clamp(20px, 5vw, 28px); margin-top: 0; }
  .section__head h2::after { margin-top: 6px; }

  /* ── Hero ── */
  .hero0 { padding: 32px 20px 20px; }
  .hero0__title { font-size: clamp(26px, 6.5vw, 38px); margin: 12px 0 10px; }
  .hero0__lead  { font-size: 14px; max-width: 40ch; margin-bottom: 20px; }
  .hero0__tag   { font-size: 9px; padding: 5px 12px; }
  .hero0__actions { margin-top: 4px; gap: 10px; }
  .hero0__deco  { background-size: 300px auto; }

  /* ── Product grid ── */
  .grid { gap: 14px; }
  .productBody { padding: 14px 16px 16px; }
  .productBody h3 { font-size: 14px; }

  /* ── Grids / layout ── */
  .gift { grid-template-columns: 1fr; }
  .gift__grid { grid-template-columns: 1fr; }
  .adminForm { grid-template-columns: 1fr; }
  .packPickGrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .packTypes { grid-template-columns: 1fr; }
  .packStep { padding: 16px; border-radius: var(--r-lg); }
  .packStep__head { flex-direction: column; align-items: flex-start; }
  .packTypeCard { padding: 18px; }
  .formGrid { grid-template-columns: 1fr; }

  /* ── PDP Modal ── */
  .pdpGrid { grid-template-columns: 1fr; }
  .pdpModal__panel {
    width: 88vw; height: 82dvh;
    top: 50%; right: auto; bottom: auto; left: 50%;
    transform: translate(-50%, -46%) scale(.97);
    border-radius: 20px;
    max-height: none;
  }
  .pdpModal.open .pdpModal__panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .pdpMedia { height: 32vh; min-height: 160px; }
  .pdpMedia img { object-fit: contain; }
  .pdpInfo  { padding: 16px 18px 24px; gap: 12px; }
  .pdpPrice { font-size: 22px; }

  /* ── Testimonials ── */
  .testiArrow { display: none; }
  .testiCarouselWrap { gap: 0; }
  .testiTop { flex-direction: column; gap: 8px; }
  .testiScoreBlock { margin-bottom: 28px; }
  .testiCard { padding: 22px 20px; }

  /* ── Auth card ── */
  .authCard { padding: 26px 22px; max-width: 100%; }
  .authCard--wide { max-width: 100%; }
  .authForm__row { grid-template-columns: 1fr; }
  .authForm__title { font-size: 1.2rem; }

  /* ── User profile card ── */
  .userProfile {
    padding: 20px;
    gap: 14px;
    max-width: 100%;
    flex-wrap: nowrap;
  }
  .userProfile__info { min-width: 0; }
  .userProfile__greeting { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ── Dashboard tabs (horizontal scroll) ── */
  .dashTabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .dashTabs::-webkit-scrollbar { display: none; }
  .dashTab__btn { padding: 9px 14px; font-size: 13px; white-space: nowrap; }

  /* ── Dashboard cards ── */
  .dashCard__head { flex-direction: column; align-items: flex-start; }
  .dashCard__controls { flex-wrap: wrap; width: 100%; }
  .dashCard__controls .input { width: 100%; min-width: unset; }
  .dashCard .adminForm { padding: 14px 16px; gap: 12px; }
  .dashCard__foot { padding: 14px 16px; flex-direction: column; align-items: stretch; }
  .dashCard__foot .btn { justify-content: center; }

  /* ── Order cards ── */
  .orderCard__meta { gap: 8px; flex-wrap: wrap; }
  .orderCard__body { gap: 8px; flex-direction: column; align-items: flex-start; }
  .orderCard__total { align-self: flex-end; }
  .adminOrderRow { flex-wrap: wrap; gap: 8px; }

  /* ── Gift cards list ── */
  .gcList { grid-template-columns: 1fr; }

  /* ── Modals ── */
  .modal__panel {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 32px);
    border-radius: var(--r-lg);
  }
  .testiModal__panel { padding: 28px 20px 24px; border-radius: var(--r-xl); }

  /* ── Cart drawer ── */
  .drawer__panel { width: 92vw; border-left: none; border-radius: 20px 0 0 20px; top: 0; bottom: 0; height: 100dvh; }

  /* ── Footer ── */
  .footer { margin-top: 60px; }
  .footer__inner { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .footer__links { flex-wrap: wrap; justify-content: center; gap: 16px; }

  /* ── Client search ── */
  .clientGcCard__deduct { flex-direction: column; align-items: flex-start; }
}

/* ── Small phones (≤ 480px) ─────────────── */
@media (max-width: 480px) {
  :root { --gutter: 14px; }

  /* ── Hero ── */
  .hero { padding: 48px 20px 40px; }
  .hero__title { font-size: 28px; }
  .hero__sub { font-size: 14px; margin-top: 16px; }
  .hero__line { margin: 16px 0; width: 28px; }
  .hero__eyebrow { font-size: 10px; letter-spacing: .18em; }
  .hero__cta { margin-top: 24px; flex-direction: column; align-items: center; }
  .hero__cta .btn { width: 100%; max-width: 260px; justify-content: center; }
  .hero__watermark { background-size: 260px auto; }

  /* ── Spacing ── */
  .section { padding-top: 48px; }
  .section__head { margin-top: 0; margin-bottom: 12px; }
  .section__head h2 { margin-top: 0; font-size: 18px; }

  /* ── Product grid: keep 2 cols but tighter ── */
  .grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .card { border-radius: var(--r); }
  .productBody { padding: 10px 12px 14px; gap: 7px; }
  .productBody h3 { font-size: 13px; }
  .price { font-size: 15px; }
  .productFooter .btn { font-size: 12px; padding: 8px 12px; }

  /* ── Hero ── */
  .hero0 { padding: 24px 16px 16px; }
  .hero0__title { font-size: 22px; margin: 10px 0 8px; }
  .hero0__lead  { font-size: 13px; line-height: 1.6; max-width: 34ch; margin-bottom: 16px; }
  .hero0__tag   { font-size: 8px; padding: 4px 10px; letter-spacing: .10em; }
  .hero0__actions .btn { font-size: 12px; padding: 10px 16px; }
  .hero0__deco  { background-size: 200px auto; }

  /* ── Modal produit ── */
  .pdpModal__panel { width: 96vw; }
  .pdpMedia { height: 26vh; min-height: 140px; }

  /* ── Pack wizard ── */
  .packTypeCard { padding: 14px; }
  .packTypeCard h4 { font-size: 16px; }
  .packPickGrid { grid-template-columns: 1fr; }
  .packPreview { padding: 14px; border-radius: var(--r-lg); }
  .packPick__body { padding: 10px; }
  .packPick__title h4 { font-size: 13px; }

  /* ── Auth ── */
  .authCard { padding: 20px 16px; border-radius: var(--r-lg); }
  .authForm__title { font-size: 1.05rem; }
  .userProfile { padding: 16px; border-radius: var(--r-lg); gap: 12px; flex-wrap: wrap; }
  .userProfile__avatar { width: 46px; height: 46px; font-size: 17px; }
  .userProfile__greeting { font-size: 15px; }
  .userProfile__email { font-size: 13px; }
  #logoutBtn { width: 100%; justify-content: center; font-size: 13px; padding: 10px; margin-top: 2px; }

  /* ── Dashboard ── */
  .dashTab__btn { padding: 8px 12px; font-size: 12px; }
  .dashCard__head { padding: 14px 14px 12px; }
  .dashCard__foot { padding: 12px 14px; }
  .dashCard .adminForm { padding: 12px 14px; }
  .dashCard .adminOrdersList { padding: 0 12px 4px; }
  .dashCard .adminOrderDetail { margin: 0 12px 14px; }

  /* ── Order cards ── */
  .orderCard__head { padding: 12px 14px 10px; }
  .orderCard__body { padding: 10px 14px 14px; }
  .orderCard__id   { font-size: 12px; }
  .orderCard__total { font-size: 18px; }
  .orderCard__meta { font-size: 12px; gap: 6px; }
  .orderStatus { font-size: 11px; padding: 4px 10px; }

  /* ── Gift card preview (purchase) ── */
  .giftCard { min-height: 200px; padding: 16px; border-radius: 20px; }
  .giftCard__amount { font-size: 22px; }
  .giftCard__brand  { font-size: 11px; }
  .gcCard__visual   { padding: 16px 14px; }
  .gcCard__amount   { font-size: 1.35rem; }
  .gcCard__code     { font-size: .9rem; padding: 8px 12px; }

  /* ── Toast ── */
  .toast {
    left: var(--gutter); right: var(--gutter);
    transform: translateY(20px);
    width: auto; white-space: normal;
    text-align: center; justify-content: center;
    border-radius: var(--r-lg);
    font-size: 13px; padding: 11px 18px;
  }
  .toast.is-on { transform: translateY(0); }

  /* ── Testimonials ── */
  .testiCard { padding: 18px 16px; }
  .testiCard__text { font-size: 14px; }
  .testiScoreBlock__num { font-size: 3.2rem; }
  .testiScoreBlock__stars { font-size: 1.4rem; }

  /* ── Modals ── */
  .modal__panel { width: calc(100vw - 16px); border-radius: var(--r-lg); }
  .modal__body  { padding: 16px 14px; }
  .modal__head  { padding: 14px 16px; }
  .adminAddFooter { flex-direction: column; gap: 8px; }
  .adminAddFooter .btn { width: 100%; justify-content: center; }

  /* ── Footer ── */
  .footer { margin-top: 40px; padding: 24px var(--gutter); }
  .footer__links { gap: 12px; }
  .footer__links a { font-size: 13px; }
}