/* AlloSelect — storefront theme "Midnight & Amber" */

:root {
  --navy: #022446;
  --navy-deep: #011a33;
  --yellow: #f7b500;
  --red: #e5484d;
  --topbar: #011a33;
  --bg: #f5f6f8;
  --surface: #fff;
  --surface-2: #f1f3f6;
  --line: #e6e8ee;
  --line-2: #d6dae2;
  --ink: #0b1324;
  --text: #1f2937;
  --muted: #6b7280;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --shadow-md: 0 10px 28px rgba(16, 24, 40, .09);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, .16);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--text);
  background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Wide sliders must never widen the mobile layout viewport (keeps fixed drawers on screen). */
@supports (overflow: clip) {
  html { overflow-x: clip; }
  body { overflow-x: clip !important; }
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); color: var(--ink); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
main:focus { outline: none; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: #fff; color: var(--ink); border-radius: 10px; }
.skip-link:focus { left: 10px; top: 10px; }
.container { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.page-width { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.icon { flex-shrink: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--yellow); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 22px;
  border: 1.5px solid transparent; border-radius: 12px; font-family: var(--font); font-size: 14.5px; font-weight: 600; line-height: 1.15;
  text-align: center; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--navy, .btn--dark { background: var(--navy); color: #fff; box-shadow: 0 6px 16px rgba(11, 19, 36, .18); }
.btn--navy:hover, .btn--dark:hover { box-shadow: 0 10px 24px rgba(11, 19, 36, .26); }
.btn--yellow { background: var(--yellow); color: var(--ink); box-shadow: 0 6px 16px rgba(247, 181, 0, .35); }
.btn--yellow:hover { box-shadow: 0 10px 24px rgba(247, 181, 0, .45); }
.btn--outline { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn--outline:hover { border-color: var(--ink); }
.btn--block { display: flex; width: 100%; }
.btn--square { border-radius: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-loading { pointer-events: none; opacity: .7; }
.link-underline { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- age popup ---------- */
.age-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(7, 13, 26, .72); backdrop-filter: blur(8px); }
.age-modal__box { position: relative; width: 100%; max-width: 440px; padding: 40px 32px 30px; border-radius: 26px; background: #fff; text-align: center; box-shadow: var(--shadow-lg); animation: pop-in .3s var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.age-modal__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.age-modal__title { display: inline-grid; place-items: center; width: 92px; height: 92px; margin-bottom: 18px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-size: 22px; box-shadow: 0 0 0 8px rgba(247, 181, 0, .15); }
.age-modal__text { max-width: 340px; margin: 0 auto; color: var(--muted); font-size: 15px; line-height: 1.65; }
.age-modal__submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 24px; border: 0; border-radius: 14px; background: var(--yellow); color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.age-modal__submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(247, 181, 0, .4); }

/* ---------- top bars ---------- */
.topbar { position: relative; display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 48px; background: var(--topbar); color: rgba(255, 255, 255, .9); font-size: 13px; text-align: center; }
.topbar p { margin: 0; font-weight: 500; }
.topbar__close { position: absolute; top: 50%; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .55); cursor: pointer; transform: translateY(-50%); }
.topbar__close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.topbar__close .icon { width: 16px; height: 16px; }
.announce { background: var(--yellow); color: var(--ink); }
.announce p { display: flex; align-items: center; justify-content: center; min-height: 34px; margin: 0; padding: 4px 16px; font-size: 13px; font-weight: 600; text-align: center; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; box-shadow: 0 12px 30px rgba(7, 13, 26, .16); }
.header { background: var(--navy); color: #fff; }
.header__inner { display: flex; align-items: center; gap: 28px; max-width: 1440px; margin: 0 auto; padding: 14px 24px; }
.header__logo { flex-shrink: 0; }
.header__logo { display: flex; align-items: center; }
.header__logo img { display: block; width: max(270px, var(--logo-w, 270px)) !important; max-width: 320px; height: auto; mix-blend-mode: lighten; transition: transform .25s var(--ease); }
.header__logo:hover img { transform: scale(1.03); }
.header-search { flex: 1; max-width: 640px; margin: 0 auto; }
.search { position: relative; }
.search__input { width: 100%; height: 48px; padding: 0 18px 0 48px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; outline: none; transition: background .2s, border-color .2s, box-shadow .2s, color .2s; }
.search__input::placeholder { color: rgba(255, 255, 255, .6); }
.search__input:focus { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 0 0 0 4px rgba(247, 181, 0, .35); }
.search__input:focus::placeholder { color: var(--muted); }
.search__button { position: absolute; top: 50%; left: 6px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .75); cursor: pointer; transform: translateY(-50%); }
.search:focus-within .search__button { color: var(--ink); }
.search--page .search__input { background: #fff; color: var(--ink); border: 1.5px solid var(--line-2); }
.search--page .search__input::placeholder { color: var(--muted); }
.search--page .search__button { color: var(--ink); }
.header__icons { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 14px; background: transparent; color: inherit; cursor: pointer; transition: background .2s, color .2s; }
.icon-btn:hover { background: rgba(255, 255, 255, .08); }
.header__cart { background: rgba(255, 255, 255, .08); }
.header__cart:hover { background: var(--yellow); color: var(--ink); }
.header__cart .icon { width: 28px; height: 28px; }
.cart-count { position: absolute; top: 3px; right: 3px; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--navy); border-radius: 10px; background: var(--yellow); color: var(--ink); font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.header__menu-toggle, .header__search-toggle { display: none; }
.mobile-search { padding: 0 14px 14px; }

.header-menu { background: var(--navy); border-top: 1px solid rgba(255, 255, 255, .07); }
.header-menu .container { overflow-x: auto; scrollbar-width: none; }
.header-menu .container::-webkit-scrollbar { display: none; }
.header-menu ul { display: flex; gap: 4px; width: max-content; margin: 0 auto; padding: 8px 0; }
.header-menu a { display: block; padding: 8px 14px; border-radius: 999px; color: rgba(255, 255, 255, .78); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s; }
.header-menu a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.header-menu a[aria-current="page"] { background: var(--yellow); color: var(--ink); font-weight: 600; }

/* predictive search */
.predictive { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; max-height: 70vh; overflow: auto; background: #fff; color: var(--ink); border-radius: 18px; box-shadow: var(--shadow-lg); }
.predictive__heading { margin: 0; padding: 14px 18px 8px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.predictive__list a { display: flex; align-items: center; gap: 14px; padding: 8px 18px; }
.predictive__list a:hover { background: var(--surface-2); }
.predictive__list img { width: 48px; height: 48px; padding: 4px; object-fit: contain; background: var(--surface-2); border-radius: 10px; }
.predictive__list span { display: block; line-height: 1.35; }
.predictive__name { font-size: 14px; font-weight: 500; }
.predictive__price { font-size: 13px; font-weight: 700; }
.predictive__none { padding: 14px 18px; font-size: 14px; color: var(--muted); }
.predictive__all { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.predictive__all:hover { background: var(--surface-2); }

/* ---------- drawers ---------- */
.overlay { position: fixed; inset: 0; z-index: 55; background: rgba(7, 13, 26, .55); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.overlay.is-open { opacity: 1; visibility: visible; }
.menu-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(88vw, 380px); overflow-y: auto; background: #fff; color: var(--ink); box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform .35s var(--ease); }
.menu-drawer.is-open { transform: none; }
.menu-drawer__head { display: flex; justify-content: flex-end; padding: 12px; }
.menu-drawer__head .icon-btn { background: var(--surface-2); }
.menu-drawer__list { padding: 0 12px; }
.menu-drawer__list a { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 14px; font-size: 15.5px; font-weight: 600; }
.menu-drawer__list a:hover { background: var(--surface-2); }
.menu-drawer__img { width: 46px; height: 46px; margin: 0; object-fit: cover; background: var(--surface-2); border-radius: 12px; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; transition: background .2s, color .2s, transform .2s; }
.socials a:hover { background: var(--yellow); color: var(--ink); transform: translateY(-2px); }
.socials--dark { padding: 20px 24px; }
.socials--dark a { background: var(--surface-2); color: var(--ink); }

.cart-drawer { position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; flex-direction: column; width: min(calc(100vw - 24px), 420px); overflow: hidden; background: #fff; color: var(--ink); border-radius: 24px; box-shadow: var(--shadow-lg); transform: translateX(calc(100% + 24px)); transition: transform .35s var(--ease); }
.cart-drawer.is-open { transform: none; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.cart-drawer__head h2 { font-size: 20px; }
.cart-drawer__close { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); cursor: pointer; transition: background .2s, transform .2s; }
.cart-drawer__close:hover { background: var(--line); transform: rotate(90deg); }
.cart-drawer__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.drawer-empty { margin: auto; padding: 24px; text-align: center; }
.drawer-empty__title { margin-bottom: 18px; color: var(--ink); font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.drawer-items { flex: 1; overflow-y: auto; padding: 4px 20px; }
.drawer-item { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.drawer-item__img img { width: 76px; height: 76px; padding: 6px; object-fit: contain; background: var(--surface-2); border-radius: 14px; mix-blend-mode: multiply; }
.drawer-item__title { display: block; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.drawer-item__title:hover { text-decoration: underline; }
.drawer-item__unit { color: var(--muted); font-size: 13px; }
.drawer-item__row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.drawer-item__row .qty { flex: 0 0 112px; }
.drawer-item__remove { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.drawer-item__remove:hover { background: #fef2f2; color: #dc2626; }
.drawer-item__total { font-size: 15px; font-weight: 700; white-space: nowrap; }
.drawer-footer { padding: 18px 20px 20px; background: #fff; border-top: 1px solid var(--line); }
.drawer-footer__note { margin: 6px 0 14px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.min-notice { margin: 10px 0; padding: 10px 14px; border-radius: 12px; background: #fff7e0; color: #5b4300; font-size: 13px; line-height: 1.5; }
.min-notice.is-shaking { animation: shake .45s ease; box-shadow: 0 0 0 2px var(--yellow); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- quantity control ---------- */
.qty { position: relative; display: flex; align-items: center; height: 42px; padding: 3px; background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px; }
.qty__input { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 15px; font-weight: 600; text-align: center; outline: none; -moz-appearance: textfield; appearance: textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__btn { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: var(--surface-2); color: var(--ink); cursor: pointer; transition: background .15s; }
.qty__btn:hover { background: var(--yellow); }

/* ---------- product card ---------- */
.pcard { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.pcard__media { position: relative; display: block; margin: 8px 8px 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2); border-radius: 14px; }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .6s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.06); }
.badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.pcard .badge { position: absolute; top: 10px; left: 10px; z-index: 1; }
.badge--sold { background: rgba(11, 19, 36, .88); color: #fff; }
.badge--sale { background: var(--red); color: #fff; }
.pcard__content { flex: 1; padding: 12px 14px 4px; }
.pcard__title { display: -webkit-box; min-height: 2.7em; overflow: hidden; color: var(--ink); font-family: var(--font); font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: 0; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 6px; color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.price__compare { color: var(--muted); font-size: 13px; font-weight: 500; }
.price--sale .price__current { color: var(--red); }
.price--large { font-size: 30px; margin: 0; }
.pcard__form { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px 14px; container-type: inline-size; }
.pcard__form .qty { flex: 0 0 108px; }
.pcard__add { flex: 1; min-width: 0; min-height: 42px; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; }
@container (max-width: 260px) {
  .pcard__form .qty, .pcard__add { flex: 1 1 100%; }
}

/* ---------- sliders & section heads ---------- */
.slider { position: relative; }
.slider__nav { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; background: #fff; border: 1.5px solid var(--line-2); border-radius: 50%; color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s, color .2s, opacity .2s; }
.slider__nav:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.slider__nav[disabled] { opacity: .35; cursor: default; background: #fff; border-color: var(--line-2); color: var(--ink); }
.slider__nav .icon { width: 16px; height: 16px; }
.js-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.js-track::-webkit-scrollbar { display: none; }
.js-track > li { scroll-snap-align: start; }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sec-head__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; color: var(--ink); }
.sec-head__title h2 { padding-bottom: 3px; font-size: clamp(22px, 2.4vw, 30px); background: linear-gradient(var(--yellow), var(--yellow)) 0 100% / 0 3px no-repeat; transition: background-size .35s var(--ease); }
.sec-head__title:hover h2 { background-size: 100% 3px; }
.sec-head__count { color: var(--muted); font-size: 14px; font-weight: 500; }
.sec-head__actions { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.see-all { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 18px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 16px rgba(11, 19, 36, .18); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.see-all__n { display: grid; place-items: center; min-width: 26px; height: 24px; margin-left: -2px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 700; }
.see-all .icon { width: 32px; height: 32px; padding: 9px; border-radius: 50%; background: var(--yellow); color: var(--ink); transition: transform .25s var(--ease); }
.see-all:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(11, 19, 36, .28); }
.see-all:hover .icon { transform: translateX(3px); }

/* ---------- homepage sections ---------- */
.hero { padding: 16px 16px 0; line-height: 0; }
.hero > a { display: block; }
.hero video, .hero img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

.rich { padding: 64px 0 36px; text-align: center; }
.rich__inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.rich__title { font-size: clamp(28px, 4vw, 46px); }
.rich__text { margin: 18px auto 28px; color: var(--muted); font-size: 17px; line-height: 1.75; }

.section-title { font-size: clamp(24px, 3vw, 36px); text-align: center; }
.cats { --cat-per-view: 7; --cat-size: min(172px, calc(100vw / var(--cat-per-view) - 28px)); position: relative; padding: 40px 0 20px; }
.cats__head { text-align: center; }
.cats__viewport { margin-top: 24px; padding: 10px 0 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cats__viewport::-webkit-scrollbar { display: none; }
.cats__viewport.is-dragging { cursor: grabbing; user-select: none; }
.cats__viewport.is-dragging a { pointer-events: none; }
.cats__track { display: flex; width: max-content; }
.cats__track img { -webkit-user-drag: none; }
@keyframes cats-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.cat { flex: 0 0 calc(100vw / var(--cat-per-view)); display: flex; flex-direction: column; align-items: center; text-align: center; transition: opacity .3s; }
.cat__img { position: relative; display: block; width: var(--cat-size); height: var(--cat-size); background: #fff; border-radius: 28px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.cat__clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.cat__clip img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cat__shape { display: none; }
.cat__img:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.cat__img:hover .cat__clip img { transform: scale(1.07); }
.cats__track:hover .cat:not(:hover) { opacity: .55; }
.cat__title { width: var(--cat-size); margin-top: 12px; font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: 0; }

.fc { padding: 28px 0; }
.fc > .container { max-width: none !important; }
.fc__track { gap: 16px; padding: 6px 2px 16px; }
.fc__slide { flex: 0 0 calc((100% - 64px) / 5); }
@media (min-width: 1600px) { .fc__slide { flex-basis: calc((100% - 80px) / 6); } }
@media (min-width: 2000px) { .fc__slide { flex-basis: calc((100% - 96px) / 7); } }
.fc__more a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; min-height: 320px; padding: 24px; background: linear-gradient(160deg, #fff, var(--surface-2)); border: 1.5px dashed var(--line-2); border-radius: 18px; color: var(--ink); font-weight: 700; text-align: center; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.fc__more a:hover { border-color: var(--ink); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.fc__more .icon { width: 56px; height: 56px; padding: 16px; border-radius: 50%; background: var(--ink); color: var(--yellow); transition: transform .25s var(--ease); }
.fc__more a:hover .icon { transform: translateX(4px); }
.fc__more small { color: var(--muted); font-weight: 500; }

.img-banner { padding: 28px 16px; }
.img-banner__wrap { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.img-banner__wrap img { width: 100%; transition: transform .8s var(--ease); }
.img-banner__wrap:hover img { transform: scale(1.02); }
.img-banner__btn { position: absolute; left: 6.5%; bottom: 27%; }

.map { padding: 40px 16px; }
.map__inner { display: grid; grid-template-columns: 1.1fr 1fr; max-width: 1280px; margin: 0 auto; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.map__left { min-height: 420px; line-height: 0; }
.map__frame { width: 100%; height: 100%; min-height: 420px; border: 0; }
.map__right { display: flex; align-items: center; padding: 48px; }
.map__text { max-width: 460px; color: var(--text); text-align: left; }
.map__text h2 { margin-bottom: 14px; font-size: clamp(24px, 3vw, 34px); }
.map__text p { color: var(--muted); font-size: 16px; line-height: 1.75; }

.testi { padding: 48px 16px; }
.testi__head { margin-bottom: 28px; text-align: center; }
.testi .slider { max-width: 1280px; margin: 0 auto; }
.testi .slider__nav { position: absolute; top: 45%; z-index: 3; box-shadow: var(--shadow-md); transform: translateY(-50%); }
.testi .slider__nav--prev { left: -8px; }
.testi .slider__nav--next { right: -8px; }
.testi__track { gap: 18px; padding: 4px 2px 18px; }
.testi__slide { flex: 0 0 calc((100% - 36px) / 3); }
.testi__card { display: flex; flex-direction: column; height: 100%; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--text); font-size: 15px; line-height: 1.65; text-align: left; }
.testi__img { height: 260px; margin: 0 0 18px; overflow: hidden; border-radius: 16px; }
.testi__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.testi__stars { display: flex; gap: 2px; margin: 0 4px 10px; color: var(--yellow); }
.testi__stars .icon { width: 18px; height: 18px; }
.testi__card p { margin: 0 4px 12px; }
.testi__card p strong { color: var(--ink); }
.testi__card p:last-child { margin: auto 4px 4px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); }

.badges { padding: 16px 16px 64px; }
.badges__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1280px; margin: 0 auto; }
.badges__item {
  --tone: #f7b500; --tone-2: #ffd45c;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 30px 20px 26px; border-radius: 24px; overflow: hidden; text-align: center; color: var(--text);
  background: linear-gradient(170deg, #fff 0%, #fdfbf5 100%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .06), 0 18px 34px -28px rgba(2, 36, 70, .75);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.badges__item[data-tone="green"]  { --tone: #10b981; --tone-2: #6ee7b7; }
.badges__item[data-tone="blue"]   { --tone: #2563eb; --tone-2: #93c5fd; }
.badges__item[data-tone="violet"] { --tone: #7c3aed; --tone-2: #c4b5fd; }
.badges__item[data-tone="pink"]   { --tone: #db2777; --tone-2: #f9a8d4; }
.badges__item[data-tone="cyan"]   { --tone: #0891b2; --tone-2: #67e8f9; }
/* liseré dégradé qui s'allume au survol */
.badges__item::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(140deg, var(--tone), transparent 45%, transparent 60%, var(--tone-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .35; transition: opacity .35s;
}
.badges__item:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(2, 36, 70, .6); }
.badges__item:hover::before { opacity: 1; }
.badges__glow { position: absolute; left: 50%; top: -70px; width: 190px; height: 190px; margin-left: -95px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tone) 28%, transparent), transparent 68%); opacity: .55; transition: opacity .35s, transform .5s var(--ease); pointer-events: none; }
.badges__item:hover .badges__glow { opacity: .9; transform: scale(1.12); }
.badges__icon {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px;
  background: linear-gradient(140deg, var(--tone), var(--tone-2)); color: #fff;
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--tone) 90%, transparent);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.badges__item:hover .badges__icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); }
/* onde qui part de l'icône au survol */
.badges__icon i { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--tone); opacity: 0; }
.badges__item:hover .badges__icon i { animation: badgeWave 1.4s ease-out infinite; }
.badges__item h3 { margin: 16px 0 4px; font-size: 16px; letter-spacing: .01em; }
.badges__item p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.badges__check { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.badges__item:hover .badges__check { opacity: 1; transform: none; }
/* apparition en cascade (reprend le .reveal du site, avec un décalage par carte) */
.badges__item.reveal { transform: translateY(26px) scale(.97); transition-delay: calc(var(--i, 0) * .09s); }
.badges__item.reveal.is-in { transform: none; }
@keyframes badgeWave { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .badges__item.reveal { transition: none; transform: none; } .badges__icon i { animation: none; } }
@media (max-width: 900px) { .badges__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .badges__item { padding: 22px 14px 20px; } .badges__icon { width: 54px; height: 54px; border-radius: 18px; } .badges__item h3 { font-size: 14.5px; margin-top: 12px; } }

/* ---------- footer ---------- */
.footer-banner { padding: 0 16px 32px; }
.footer-banner img { width: 100%; border-radius: var(--radius-lg); }
.footer { padding: 64px 0 24px; background: var(--navy-deep); color: rgba(255, 255, 255, .7); border-radius: 32px 32px 0 0; }
.footer__top { display: grid; grid-template-columns: 1.3fr 1.2fr 1.1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.footer__logo { display: inline-block; margin-bottom: 18px; padding: 10px 16px; border-radius: 18px; background: var(--navy); }
.footer__logo img { width: 150px; mix-blend-mode: lighten; }
.footer__brand p { max-width: 320px; margin: 0; font-size: 14px; line-height: 1.75; }
.footer-block__heading { margin-bottom: 16px; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.footer a { color: rgba(255, 255, 255, .72); transition: color .2s; }
.footer a:hover { color: var(--yellow); }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
.footer-links a { font-size: 14px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
.footer-contact .icon { margin-top: 1px; color: var(--yellow); }
.footer-media .socials { margin-bottom: 16px; }
.footer-media video { width: 100%; max-width: 240px; border-radius: 18px; }
.footer-legal { margin: 14px 0 0; color: rgba(255, 255, 255, .45); font-size: 12px; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 22px; font-size: 13px; }
.footer__bottom small { font-size: 13px; }
.policies { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-right: auto; }
.policies a { font-size: 13px; }
.footer__payment { display: flex; gap: 8px; }
.pay { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 26px; border-radius: 6px; background: #fff; font-size: 8px; font-weight: 800; line-height: 1; }
.pay--amex { background: #1f72cd; color: #fff; }
.pay--apple { background: #000; color: #fff; font-size: 9px; border: 1px solid rgba(255, 255, 255, .4); }
.pay--visa { color: #1a1f71; font-size: 10px; font-style: italic; }
.pay--mc i { width: 14px; height: 14px; border-radius: 50%; background: #eb001b; }
.pay--mc i + i { margin-left: -6px; background: #f79e1b; mix-blend-mode: multiply; }

/* ---------- collection ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; color: rgba(255, 255, 255, .6); font-size: 13px; }
.crumbs a:hover { color: #fff; }
.crumbs--light { justify-content: flex-start; margin: 20px auto 0; color: var(--muted); }
.crumbs--light a:hover { color: var(--ink); }
.coll-hero { position: relative; overflow: hidden; margin: 16px 16px 0; padding: 48px 24px; color: #fff; text-align: center; background: radial-gradient(120% 140% at 0% 0%, #1b2a4a 0%, var(--navy) 55%, var(--navy-deep) 100%); border-radius: var(--radius-lg); }
.coll-hero::after { content: ""; position: absolute; top: -80px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 181, 0, .32), transparent 70%); pointer-events: none; }
.coll-hero .crumbs { position: relative; z-index: 1; justify-content: center; }
.coll-hero__title { position: relative; z-index: 1; margin: 0; padding: 0; color: #fff; font-size: clamp(30px, 4.5vw, 48px); }
.coll-hero__count { position: relative; z-index: 1; margin: 8px 0 0; color: rgba(255, 255, 255, .7); }
.coll-hero__desc { position: relative; z-index: 1; max-width: 720px; margin: 14px auto 0; padding: 0; color: rgba(255, 255, 255, .82); }
.coll-hero__desc a { color: var(--yellow); }
.coll { display: flex; align-items: flex-start; gap: 24px; max-width: 1440px; margin: 0 auto; padding: 24px 24px 64px; }
.facets { position: sticky; top: 150px; flex: 0 0 280px; max-height: calc(100vh - 170px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.facets__toggle { display: none; }
.facets__sort { padding: 20px 20px 16px; border-bottom: 1px solid var(--line); }
.facets__sort label, .facets__heading { display: block; margin-bottom: 8px; color: var(--ink); font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.facets__sort select { width: 100%; height: 44px; padding: 0 36px 0 12px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; font-size: 14px; cursor: pointer; appearance: none; -webkit-appearance: none; }
.facets__filters { padding: 16px 20px 20px; }
.facets__active { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.facet-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; }
.facets__clear { align-self: center; color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: underline; }
.facet { padding: 14px 0; border-top: 1px solid var(--line); }
.facet summary { display: flex; align-items: center; justify-content: space-between; color: var(--ink); font-size: 14px; font-weight: 600; list-style: none; cursor: pointer; }
.facet summary::-webkit-details-marker { display: none; }
.facet summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.facet[open] summary::after { transform: rotate(-135deg); }
.facet__check { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; cursor: pointer; }
.facet__check input { width: 18px; height: 18px; accent-color: var(--ink); }
.facet__hint { margin: 10px 0; color: var(--muted); font-size: 13px; }
.facet__price { display: flex; gap: 8px; }
.facet__price label { position: relative; flex: 1; }
.facet__price span { position: absolute; top: 50%; left: 10px; color: var(--muted); font-size: 13px; transform: translateY(-50%); }
.facet__price input { width: 100%; height: 42px; padding: 0 10px 0 24px; border: 1.5px solid var(--line-2); border-radius: 10px; font-size: 14px; }
.coll__main { flex: 1; min-width: 0; }
.coll__main--full { max-width: 1440px; margin: 0 auto; padding: 0 24px 56px; }
.coll__count { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.coll__empty { padding: 64px 20px; text-align: center; background: #fff; border: 1.5px dashed var(--line-2); border-radius: var(--radius-lg); }
.coll__empty a { text-decoration: underline; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.grid__item { min-width: 0; padding: 0; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 36px; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-weight: 600; }
.pagination a:hover { border-color: var(--ink); }
.pagination a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination span { background: transparent; border-color: transparent; }

/* ---------- product ---------- */
.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; padding-top: 20px; padding-bottom: 24px; }
.product__main-img { position: relative; aspect-ratio: 1; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 28px; }
.product__main-img img { width: 100%; height: 100%; object-fit: cover; }
.product__thumbs { display: flex; gap: 10px; margin-top: 12px; }
.product__thumbs button { width: 76px; height: 76px; padding: 0; overflow: hidden; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
.product__thumbs button.is-active { border-color: var(--ink); }
.product__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.product__info { position: sticky; top: 150px; align-self: start; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 28px; }
.product__vendor { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.product__title { margin-bottom: 14px; font-size: clamp(26px, 3vw, 38px); }
.product__price { display: flex; align-items: center; gap: 12px; }
.product__tax { margin: 8px 0 22px; color: var(--muted); font-size: 13px; }
.product__tax a { text-decoration: underline; }
.product__qty-label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 600; }
.product__qty { width: 170px; margin-bottom: 18px; }
.product__qty .qty { height: 50px; }
.product__qty .qty__btn { width: 38px; height: 38px; }
.product__form .btn { min-height: 54px; font-size: 15px; }
.product__form .btn + .btn { margin-top: 10px; }
.product__desc { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.product__share { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.product__share:hover { background: var(--line); }
.related { padding-top: 32px; padding-bottom: 64px; }
.related__title { margin-bottom: 20px; font-size: clamp(22px, 2.4vw, 30px); }

/* ---------- cart page ---------- */
.cart-page { padding-top: 40px; padding-bottom: 64px; }
.cart-page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cart-page__head h1 { font-size: clamp(28px, 3.5vw, 42px); }
.cart-page__empty { padding: 64px 20px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cart-page__empty h2 { margin-bottom: 20px; font-size: 24px; }
.cart-table { width: 100%; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0; }
.cart-table th { padding: 14px 20px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.cart-table td { padding: 18px 20px; border-top: 1px solid var(--line); vertical-align: middle; }
.cart-table__right { text-align: right !important; }
.cart-row__product { display: flex; align-items: center; gap: 16px; }
.cart-row__img img { width: 84px; height: 84px; padding: 8px; object-fit: contain; background: var(--surface-2); border-radius: 14px; mix-blend-mode: multiply; }
.cart-row__title { color: var(--ink); font-weight: 600; }
.cart-row__title:hover { text-decoration: underline; }
.cart-row__unit { color: var(--muted); font-size: 14px; }
.cart-row__qty { display: flex; align-items: center; gap: 8px; }
.cart-row__qty .qty { flex: 0 0 120px; }
.cart-row__total { color: var(--ink); font-weight: 700; }
.cart-page__footer { display: flex; justify-content: flex-end; margin-top: 20px; }
.cart-page__totals { width: 100%; max-width: 420px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cart-page__sub { display: flex; align-items: baseline; justify-content: space-between; margin: 0; color: var(--ink); font-size: 16px; }
.cart-page__sub strong { font-size: 22px; }
.cart-page__note { margin: 6px 0 12px; color: var(--muted); font-size: 13px; }

/* ---------- forms / checkout / contact / policy ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 6px; color: var(--ink); font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px; color: var(--ink); font-size: 15px; outline: none; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(11, 19, 36, .08); }
.field--error input, .field--error select { border-color: #ef4444; }
.field__error { display: block; margin-top: 4px; color: #dc2626; font-size: 12.5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-error { padding: 12px 16px; background: #fef2f2; border-radius: 12px; color: #b91c1c; font-size: 14px; }
.form-success { padding: 12px 16px; background: #ecfdf5; border-radius: 12px; color: #047857; font-size: 14px; }
.checkout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; padding-top: 40px; padding-bottom: 64px; }
.checkout__form { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.checkout h1 { margin-bottom: 18px; font-size: clamp(26px, 3vw, 34px); }
.checkout h2 { margin: 24px 0 12px; font-size: 17px; }
.pay-options { overflow: hidden; margin-bottom: 22px; border: 1.5px solid var(--line-2); border-radius: 14px; }
.pay-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--ink); font-weight: 500; cursor: pointer; }
.pay-option + .pay-option { border-top: 1px solid var(--line); }
.pay-option input { width: 18px; height: 18px; accent-color: var(--ink); }
.checkout__summary { position: sticky; top: 150px; align-self: start; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.summary-items li { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--ink); font-size: 14px; }
.summary-items__img { position: relative; }
.summary-items__img img { width: 64px; height: 64px; padding: 6px; object-fit: contain; background: var(--surface-2); border-radius: 12px; mix-blend-mode: multiply; }
.summary-items__img em { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border: 2px solid #fff; border-radius: 12px; background: var(--ink); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center; }
.summary-items__title { line-height: 1.4; }
.summary-row { display: flex; justify-content: space-between; padding: 6px 0; color: var(--text); font-size: 14px; }
.summary-row--total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 18px; font-weight: 800; }
.summary-row--total small { color: var(--muted); font-size: 12px; font-weight: 500; }
.checkout-done { padding-top: 64px; padding-bottom: 64px; }
.checkout-done__box { max-width: 560px; margin: 0 auto; padding: 40px 32px; background: #fff; border: 1px solid var(--line); border-radius: 28px; text-align: center; }
.checkout-done__check { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-size: 34px; line-height: 1; }
.checkout-done h1 { margin-bottom: 12px; font-size: 30px; }
.page-main { padding-top: 48px; padding-bottom: 8px; text-align: center; }
.page-main__title { font-size: clamp(30px, 4.5vw, 48px); }
.contact { max-width: 720px; padding-top: 16px; padding-bottom: 64px; }
.contact h2 { margin-bottom: 16px; font-size: 20px; }
.contact__form { padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.policy { max-width: 840px; margin: 32px auto 64px; padding: 44px; background: #fff; border: 1px solid var(--line); border-radius: 28px; }
.policy__title { margin-bottom: 24px; font-size: clamp(26px, 3.5vw, 40px); text-align: center; }
.rte { color: var(--text); line-height: 1.75; }
.rte a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
.rte h2, .rte h3 { margin: 1.6em 0 .6em; }
.rte table { width: 100%; border-collapse: collapse; }
.rte td, .rte th { padding: 8px; border: 1px solid var(--line); }
.search-page { padding-top: 48px; padding-bottom: 16px; text-align: center; }
.search-page h1 { margin-bottom: 20px; font-size: clamp(28px, 4vw, 42px); }
.search--page { max-width: 640px; margin: 0 auto 14px; }
.search-page__count { color: var(--muted); }
.search-page__none { padding-bottom: 56px; color: var(--muted); text-align: center; }
.notfound { padding-top: 96px; padding-bottom: 96px; text-align: center; }
.notfound h1 { margin-bottom: 12px; font-size: clamp(32px, 5vw, 56px); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; padding: 12px 18px; background: var(--ink); border-radius: 14px; box-shadow: var(--shadow-lg); color: #fff; font-size: 14px; font-weight: 500; transform: translateX(-50%); }

/* ---------- cash-on-delivery button & popup ---------- */
.drawer-total { display: flex; align-items: baseline; justify-content: space-between; color: #000; }
.drawer-total span:first-child { font-size: 16px; font-weight: 700; }
.drawer-total span:last-child { font-size: 18px; color: var(--muted); }
.btn-cod { display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; min-height: 60px; padding: 10px 20px; border: 0; border-radius: 6px; background: #000; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: .2px; text-align: center; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); transition: transform .15s, box-shadow .15s; }
.btn-cod:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.btn-cod.is-blocked { opacity: .75; }
.cart-page__totals .btn-cod { margin-top: 12px; }

.cod-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(9, 16, 28, .55); backdrop-filter: blur(4px); animation: cod-fade .2s ease-out; }
@keyframes cod-fade { from { opacity: 0; } }
.cod-modal__box { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: min(92vh, 920px); overflow: hidden; background: #f4f5f7; color: #111827; border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); letter-spacing: 0; animation: cod-in .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes cod-in { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.cod-modal__head { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: #fff; border-bottom: 1px solid #eceef1; }
.cod-modal__title h2 { color: #111827; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.cod-modal__title p { margin: 2px 0 0; color: #6b7280; font-size: 13px; line-height: 1.4; }
.cod-modal__close { flex-shrink: 0; margin-left: auto; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #f1f2f4; color: #111827; cursor: pointer; transition: background .15s, transform .15s; }
.cod-modal__close:hover { background: #e4e6ea; transform: rotate(90deg); }
.cod-modal__body { flex: 1; min-height: 0; display: flex; flex-direction: column; line-height: 1.5; }
.cod-loading { display: grid; place-items: center; min-height: 320px; }
.cod-spinner { width: 34px; height: 34px; border: 3px solid #e5e7eb; border-top-color: var(--navy); border-radius: 50%; animation: cod-spin .8s linear infinite; }
@keyframes cod-spin { to { transform: rotate(360deg); } }

.cod { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.cod__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 6px; overscroll-behavior: contain; }
.cod-trust { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cod-trust span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid #e5e7eb; border-radius: 30px; background: #fff; color: #1f2937; font-size: 12px; font-weight: 600; line-height: 1; }
.cod-trust .icon { color: var(--navy); }
.cod-card { margin-bottom: 12px; padding: 16px; background: #fff; border: 1px solid #eceef1; border-radius: 16px; }
.cod-step { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: #111827; font-size: 15px; font-weight: 700; letter-spacing: 0; }
.cod-step span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; }

/* summary */
.cod-summary > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; user-select: none; }
.cod-summary > summary::-webkit-details-marker { display: none; }
.cod-summary__title { display: flex; align-items: center; gap: 8px; color: #111827; font-size: 15px; font-weight: 700; }
.cod-summary__title .icon { color: var(--navy); }
.cod-summary__title em { color: #6b7280; font-style: normal; font-weight: 500; }
.cod-summary__total { margin-left: auto; font-size: 16px; font-weight: 700; }
.cod-summary__chev { display: grid; color: #6b7280; transition: transform .2s; }
.cod-summary[open] .cod-summary__chev { transform: rotate(180deg); }
.cod-lines { margin: 12px 0 0; padding: 0; list-style: none; }
.cod-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 12px 0; border-top: 1px solid #f0f1f3; transition: opacity .2s; }
.cod-line.is-busy { opacity: .45; pointer-events: none; }
.cod-line__img { grid-row: span 2; width: 56px; height: 56px; overflow: hidden; background: #fff; border: 1px solid #eceef1; border-radius: 12px; }
.cod-line__img img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.cod-line__title { color: #111827; font-size: 14px; font-weight: 600; line-height: 1.35; }
.cod-line__total { color: #111827; font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; }
.cod-line__total s { display: block; color: #9ca3af; font-size: 12px; font-weight: 400; }
.cod-line__row { display: flex; align-items: center; gap: 10px; }
.cod-line__unit { color: #6b7280; font-size: 12px; }
.cod-stepper { display: inline-flex; align-items: center; overflow: hidden; background: #fff; border: 1px solid #dfe2e6; border-radius: 30px; }
.cod-stepper button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: #111827; cursor: pointer; }
.cod-stepper button:hover { background: #f3f4f6; }
.cod-stepper button:disabled { color: #c7cbd1; cursor: not-allowed; background: none; }
.cod-stepper span { min-width: 22px; font-size: 14px; font-weight: 600; text-align: center; }
.cod-line__remove { justify-self: end; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: #9ca3af; cursor: pointer; transition: color .15s, background .15s; }
.cod-line__remove:hover { background: #fef2f2; color: #dc2626; }
.cod-sum { margin: 6px 0 0; padding-top: 10px; border-top: 1px dashed #e3e5e8; }
.cod-sum div { display: flex; justify-content: space-between; padding: 3px 0; color: #4b5563; font-size: 14px; }
.cod-sum dt, .cod-sum dd { margin: 0; }
.cod-sum .is-free { color: #15803d; font-weight: 700; }
.cod-sum__total { margin-top: 6px; padding-top: 9px !important; border-top: 1px solid #f0f1f3; color: #111827 !important; font-size: 16px !important; font-weight: 700; }

/* floating-label fields */
.cod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cod-field { position: relative; margin-bottom: 10px; }
.cod-grid .cod-field { margin-bottom: 0; }
.cod-grid + .cod-field { margin-top: 10px; }
.cod-field__icon { position: absolute; left: 15px; top: 27px; z-index: 1; display: grid; color: #9ca3af; transform: translateY(-50%); pointer-events: none; transition: color .15s; }
.cod-field input, .cod-field select, .cod-field textarea {
  display: block; width: 100%; height: 54px; margin: 0; padding: 20px 14px 5px 46px; border: 1.5px solid #e1e4e8; border-radius: 12px; background: #fff;
  color: #111827; font-size: 15px; letter-spacing: 0; outline: none; appearance: none; -webkit-appearance: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.cod-field select { padding-right: 40px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 15px center; }
.cod-field textarea { height: auto; min-height: 88px; padding-top: 24px; resize: vertical; line-height: 1.45; }
.cod-field label { position: absolute; left: 46px; top: 27px; color: #6b7280; font-size: 15px; line-height: 1; white-space: nowrap; transform: translateY(-50%); pointer-events: none; transition: top .15s, font-size .15s, color .15s; }
.cod-field input:focus + label, .cod-field input:not(:placeholder-shown) + label,
.cod-field textarea:focus + label, .cod-field textarea:not(:placeholder-shown) + label,
.cod-field select + label { top: 15px; font-size: 11.5px; font-weight: 600; }
.cod-field input:hover, .cod-field select:hover, .cod-field textarea:hover { border-color: #cfd4da; }
.cod-field input:focus, .cod-field select:focus, .cod-field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(2, 36, 70, .1); }
.cod-field:focus-within .cod-field__icon, .cod-field:focus-within label { color: var(--navy); }
.cod-field__error { display: none; margin: 5px 2px 0; color: #dc2626; font-size: 12.5px; font-weight: 500; }
.cod-field.is-error input, .cod-field.is-error select, .cod-field.is-error textarea { border-color: #ef4444; background-color: #fffafa; }
.cod-field.is-error .cod-field__icon, .cod-field.is-error label { color: #dc2626; }
.cod-field.is-error .cod-field__error { display: block; }
.cod-field.is-error { animation: cod-shake .35s; }
@keyframes cod-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cod-link { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 6px 0; border: 0; background: none; color: var(--navy); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cod-link:hover { text-decoration: underline; }
.cod-hint { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: #6b7280; font-size: 12.5px; line-height: 1.4; }
/* Bouton « Utiliser ma position actuelle » : facilite la saisie sans jamais la remplacer */
.cod-geo { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; margin: 0 0 12px; padding: 12px 14px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #062a52, #0b3d75); color: #fff; font: inherit; text-align: left; cursor: pointer; overflow: hidden; box-shadow: 0 12px 26px -16px rgba(6, 42, 82, .9); transition: transform .28s var(--ease), box-shadow .28s var(--ease); -webkit-tap-highlight-color: transparent; }
.cod-geo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, rgba(247, 181, 0, .9), rgba(96, 165, 250, .5) 45%, rgba(247, 181, 0, .7)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.cod-geo::after { content: ""; position: absolute; top: 0; left: -70%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); animation: cod-geo-shine 5s ease-in-out 1s infinite; pointer-events: none; }
.cod-geo:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(6, 42, 82, 1); }
.cod-geo:active { transform: translateY(0); }
.cod-geo:disabled, .cod-geo.is-busy { cursor: default; }
.cod-geo__pin { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, var(--yellow), #ffd45c); color: #062a52; box-shadow: 0 6px 16px -6px rgba(247, 181, 0, .8); }
.cod-geo__pin .icon { position: relative; z-index: 2; }
.cod-geo__ping { position: absolute; inset: 0; border-radius: 13px; border: 2px solid rgba(247, 181, 0, .7); opacity: 0; animation: cod-geo-radar 2.6s cubic-bezier(.2, .7, .3, 1) infinite; }
.cod-geo__ping--2 { animation-delay: 1.3s; }
.cod-geo__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cod-geo__txt b { font-size: 14px; font-weight: 800; }
.cod-geo__txt em { color: rgba(255, 255, 255, .62); font-size: 11.5px; font-style: normal; font-weight: 500; }
.cod-geo__go { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--yellow); transition: transform .25s var(--ease); }
.cod-geo:hover .cod-geo__go { transform: translateX(3px); }
.cod-geo__spin { display: none; width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, .25); border-top-color: var(--yellow); border-radius: 50%; animation: codSpin .7s linear infinite; }
.cod-geo.is-busy { pointer-events: none; }
.cod-geo.is-busy .cod-geo__go { display: none; }
.cod-geo.is-busy .cod-geo__spin { display: block; }
.cod-geo.is-busy .cod-geo__ping { animation-duration: 1.3s; }
@keyframes cod-geo-radar { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes cod-geo-shine { 0%, 60% { left: -70%; } 82%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .cod-geo::after, .cod-geo__ping { animation: none; } }
.cod-geo__msg { margin: -2px 0 10px; font-size: 12.5px; line-height: 1.4; }
.cod-geo__msg.is-load { color: #6b7280; }
.cod-geo__msg.is-ok { color: #059669; }
.cod-geo__msg.is-error { color: #dc2626; }
@keyframes codSpin { to { transform: rotate(360deg); } }
.cod-field--area { margin: 8px 0 0; }

/* payment choice */
.cod-pay { display: grid; gap: 8px; }
.cod-pay label { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid #e1e4e8; border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.cod-pay label:hover { border-color: #cfd4da; }
.cod-pay input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cod-pay__icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: #f1f3f6; color: var(--navy); }
.cod-pay__text { min-width: 0; line-height: 1.3; }
.cod-pay__text strong { display: block; color: #111827; font-size: 14.5px; }
.cod-pay__text small { color: #6b7280; font-size: 12.5px; }
.cod-pay__radio { flex-shrink: 0; width: 20px; height: 20px; margin-left: auto; border: 2px solid #cfd4da; border-radius: 50%; transition: border .15s; }
.cod-pay label:has(input:checked) { border-color: var(--navy); background: #f5f8fc; }
.cod-pay input:checked ~ .cod-pay__radio { border: 6px solid var(--navy); }
.cod-pay input:focus-visible ~ .cod-pay__radio { outline: 2px solid var(--navy); outline-offset: 2px; }

.cod-checks { padding: 2px 4px 6px; }
.cod-check { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: #374151; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.cod-check input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.cod .form-error { margin: 4px 0 10px; border-radius: 12px; font-size: 13.5px; }
.cod .min-notice { margin: 0 0 12px; border-radius: 12px; }

/* sticky footer */
.cod__footer { flex: none; padding: 12px 16px 14px; background: #fff; border-top: 1px solid #eceef1; box-shadow: 0 -8px 24px rgba(0, 0, 0, .05); }
.cod__footer-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.cod__footer-total span { color: #6b7280; font-size: 13px; }
.cod__footer-total strong { color: #111827; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.cod-submit { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; border: 0; border-radius: 14px; background: var(--navy); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .1px; cursor: pointer; box-shadow: 0 8px 20px rgba(2, 36, 70, .25); transition: transform .15s, box-shadow .15s, opacity .15s; }
.cod-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(2, 36, 70, .3); }
.cod-submit:active { transform: none; }
.cod-submit:disabled { background: #9aa5b1; box-shadow: none; cursor: not-allowed; transform: none; }
.cod-submit__spin { display: none; width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: cod-spin .7s linear infinite; }
.cod-submit.is-loading { pointer-events: none; opacity: .9; }
.cod-submit.is-loading .cod-submit__spin { display: block; }
.cod-submit.is-loading .icon { display: none; }
.cod__legal { margin: 9px 0 0; color: #9ca3af; font-size: 11.5px; line-height: 1.4; text-align: center; }
.cod__legal a { color: inherit; text-decoration: underline; }

/* order confirmation */
.cod-modal__box.is-done { position: relative; background: #fff; }
.cod-modal__box.is-done .cod-modal__head { position: absolute; top: 0; right: 0; z-index: 3; padding: 14px; background: transparent; border: 0; }
.cod-modal__box.is-done .cod-modal__head::before, .cod-modal__box.is-done .cod-modal__title { display: none; }
.cod-modal__box.is-done .cod-modal__close { background: rgba(255, 255, 255, .14); color: #fff; }
.cod-modal__box.is-done .cod-modal__close:hover { background: rgba(255, 255, 255, .24); }
.cod-thanks { overflow-y: auto; background: #fff; }
.cod-thanks__hero { position: relative; overflow: hidden; padding: 46px 28px 36px; color: #fff; text-align: center; background: radial-gradient(120% 95% at 50% 0%, #0b3d73 0%, var(--navy) 55%, #011a33 100%); }
.cod-thanks__hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--yellow), transparent); }
.cod-thanks__badge { width: 70px; height: 70px; margin: 0 auto 18px; }
.cod-thanks__badge svg { width: 100%; height: 100%; }
.cod-thanks__badge circle { fill: rgba(255, 183, 0, .1); stroke: var(--yellow); stroke-width: 1.5; stroke-dasharray: 160; stroke-dashoffset: 160; animation: cod-draw .7s ease-out forwards; }
.cod-thanks__badge path { fill: none; stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: cod-draw .4s .5s ease-out forwards; }
.cod-thanks__eyebrow { margin: 0 0 8px; color: rgba(255, 255, 255, .68); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.cod-thanks__hero h3 { margin: 0 0 10px; color: #fff; font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.cod-thanks__lead { max-width: 360px; margin: 0 auto; color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.55; }
.cod-thanks__steps { margin: 0; padding: 26px 28px 6px; list-style: none; }
.cod-thanks__steps li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.cod-thanks__steps li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: #e8ebef; }
.cod-thanks__steps li.is-done::before { background: var(--navy); }
.cod-thanks__steps li > span { position: relative; z-index: 1; flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f1f3f6; color: #9aa3ad; }
.cod-thanks__steps li.is-done > span { background: var(--navy); color: #fff; }
.cod-thanks__steps li.is-current > span { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); animation: cod-pulse 1.8s ease-out infinite; }
@keyframes cod-pulse { 0% { box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 0 rgba(2, 36, 70, .3); } 100% { box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 10px rgba(2, 36, 70, 0); } }
.cod-thanks__steps strong { display: block; color: #111827; font-size: 14.5px; line-height: 1.35; }
.cod-thanks__steps li:not(.is-done):not(.is-current) strong { color: #6b7280; }
.cod-thanks__steps small { color: #6b7280; font-size: 13px; line-height: 1.45; }
.cod-thanks__recap { margin: 4px 28px 22px; padding: 4px 18px; background: #fafbfc; border: 1px solid #eceef1; border-radius: 16px; }
.cod-thanks__recap div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid #eef0f2; font-size: 14px; }
.cod-thanks__recap div:last-child { border-bottom: 0; }
.cod-thanks__recap dt { margin: 0; color: #6b7280; }
.cod-thanks__recap dd { margin: 0; color: #111827; font-weight: 600; text-align: right; }
.cod-thanks__recap .is-total dt { color: #111827; font-weight: 600; }
.cod-thanks__recap .is-total dd { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.cod-thanks__actions { display: grid; gap: 14px; padding: 0 28px 28px; text-align: center; }
.cod-thanks__help { color: #6b7280; font-size: 13.5px; }
.cod-thanks__help strong { color: #111827; }
.cod-thanks__help:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .cod-thanks__hero { padding: 44px 20px 30px; }
  .cod-thanks__hero h3 { font-size: 27px; }
  .cod-thanks__steps { padding: 22px 18px 4px; }
  .cod-thanks__recap { margin: 4px 16px 18px; }
  .cod-thanks__actions { padding: 0 16px calc(20px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .cod-thanks__badge circle, .cod-thanks__badge path { animation: none; stroke-dashoffset: 0; }
  .cod-thanks__steps li.is-current > span { animation: none; }
}

/* confirmation & empty */
.cod-done, .cod-empty { overflow-y: auto; padding: 32px 20px 24px; text-align: center; }
.cod-empty .icon { margin: 0 auto 10px; color: #9ca3af; }
.cod-empty h3, .cod-done h3 { margin-bottom: 6px; color: #111827; font-size: 22px; font-weight: 700; }
.cod-empty p { color: #6b7280; }
.cod-done__check { width: 78px; height: 78px; margin: 0 auto 16px; }
.cod-done__check svg { width: 100%; height: 100%; }
.cod-done__check circle { fill: #e8f7ee; stroke: #16a34a; stroke-width: 2; stroke-dasharray: 160; stroke-dashoffset: 160; animation: cod-draw .6s ease-out forwards; }
.cod-done__check path { fill: none; stroke: #16a34a; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: cod-draw .35s .45s ease-out forwards; }
@keyframes cod-draw { to { stroke-dashoffset: 0; } }
.cod-done__num { display: inline-block; margin-bottom: 18px; padding: 5px 14px; border-radius: 30px; background: #e8eef6; color: var(--navy); font-size: 14px; font-weight: 700; }
.cod-done__recap { margin: 0 0 14px; padding: 12px 16px; background: #fff; border: 1px solid #eceef1; border-radius: 16px; text-align: left; }
.cod-done__recap > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; color: #6b7280; font-size: 14px; }
.cod-done__recap strong { color: #111827; font-weight: 600; text-align: right; }
.cod-done__recap .cod-done__total { margin-top: 4px; padding-top: 10px; border-top: 1px dashed #e3e5e8; color: #111827; }
.cod-done__total strong { font-size: 18px; font-weight: 800; }
.cod-done__info { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border-radius: 14px; background: #fff7e0; color: #5b4300; font-size: 13.5px; line-height: 1.5; text-align: left; }
.cod-done__info .icon { flex-shrink: 0; margin-top: 1px; }
.cod-done__actions { display: grid; gap: 8px; }
.cod-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 10px 16px; border: 0; border-radius: 14px; background: var(--navy); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; transition: opacity .15s; }
.cod-btn:hover { opacity: .92; }
.cod-btn--ghost { background: #fff; color: #111827; border: 1.5px solid #e1e4e8; }
.cod-empty .cod-btn { max-width: 280px; margin-top: 12px; }

@media (max-width: 600px) {
  .cod-modal { align-items: flex-end; padding: 0; }
  .cod-modal__box { max-width: none; max-height: 94vh; max-height: 94dvh; border-radius: 22px 22px 0 0; animation: cod-up .32s cubic-bezier(.2, .8, .2, 1); }
  @keyframes cod-up { from { transform: translateY(100%); } }
  .cod-modal__head { padding: 20px 16px 12px; }
  .cod-modal__head::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #d1d5db; }
  .cod-grid { grid-template-columns: 1fr; gap: 10px; }
  .cod-field input, .cod-field select, .cod-field textarea { font-size: 16px; }
  .cod__scroll { padding: 12px 12px 6px; }
  .cod-card { padding: 14px; }
  .cod__footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .btn-cod { gap: 14px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .cod-modal, .cod-modal__box, .cod-field.is-error { animation: none; }
  .cod-done__check circle, .cod-done__check path { animation: none; stroke-dashoffset: 0; }
}



/* theme overrides for the cash-on-delivery button */
.drawer-total span:first-child { font-family: var(--font-display); font-size: 17px; }
.drawer-total span:last-child { color: var(--ink); font-weight: 700; }
.btn-cod { gap: 16px; border-radius: 14px; background: var(--navy); box-shadow: 0 10px 24px rgba(11, 19, 36, .25); font-size: 15.5px; }
.btn-cod .icon { color: var(--yellow); }
.btn-cod:hover { box-shadow: 0 14px 30px rgba(11, 19, 36, .32); }

/* ---------- WhatsApp order button ---------- */
.btn-wa { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; margin-bottom: 10px; padding: 10px 18px; border-radius: 14px; background: #25d366; color: #fff !important; font-size: 15.5px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 22px rgba(37, 211, 102, .3); transition: transform .15s, box-shadow .15s, background .15s; }
.btn-wa:hover { background: #1fbe5b; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(37, 211, 102, .4); }
.btn-wa.is-blocked { opacity: .7; }
.cart-page__totals .btn-wa { margin-top: 12px; }
.cod-thanks__code { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; letter-spacing: .06em; color: var(--navy) !important; }

/* ---------- express checkout v2 (conversion) ---------- */
.btn-cod { position: relative; overflow: hidden; }
.btn-cod::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .25), transparent); transform: skewX(-20deg); animation: cod-shine 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes cod-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.btn-cod__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.btn-cod__text strong { font-size: 16px; font-weight: 800; }
.btn-cod__text small { margin-top: 3px; color: rgba(255, 255, 255, .72); font-size: 12.5px; font-weight: 500; }
a.btn-cod { color: #fff; text-decoration: none; }

.cod-modal { background: rgba(4, 12, 24, .62); backdrop-filter: blur(6px); }
.cod-modal__box { max-width: 540px; background: #f3f5f8; border-radius: 26px; }
.cod-modal__head { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 18px 16px; overflow: hidden; border: 0; background: radial-gradient(120% 150% at 0% 0%, #0b3f78 0%, var(--navy) 45%, #011a33 100%); color: #fff; }
.cod-modal__head::after { content: ""; position: absolute; right: -70px; top: -90px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 181, 0, .32), transparent 65%); pointer-events: none; }
.cod-modal__top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.cod-modal__lock { display: grid; flex-shrink: 0; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--yellow), #ffd45c); color: #111; box-shadow: 0 10px 22px -8px rgba(247, 181, 0, .7); }
.cod-modal__title h2 { color: #fff; font-size: 19px; font-weight: 800; }
.cod-modal__title p { color: rgba(255, 255, 255, .72); }
.cod-modal__close { position: relative; z-index: 1; background: rgba(255, 255, 255, .12); color: #fff; }
.cod-modal__close:hover { background: rgba(255, 255, 255, .22); }
.cod-badges { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cod-badges li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: rgba(255, 255, 255, .07); animation: cod-badge .5s cubic-bezier(.2, .8, .2, 1) both; }
.cod-badges li:nth-child(2) { animation-delay: .08s; }
.cod-badges li:nth-child(3) { animation-delay: .16s; }
@keyframes cod-badge { from { opacity: 0; transform: translateY(8px); } }
.cod-badges span { display: grid; flex-shrink: 0; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(247, 181, 0, .16); color: var(--yellow); }
.cod-badges b { color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.25; }

.cod__scroll { padding: 14px 14px 8px; }
.cod-card { border-radius: 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.cod-step { font-size: 15.5px; font-weight: 800; }
.cod-step span { background: linear-gradient(135deg, var(--navy), #0b3f78); }
.cod-summary > summary { gap: 12px; }
.cod-summary__thumbs { display: flex; flex-shrink: 0; }
.cod-summary__thumbs img, .cod-summary__thumbs em { width: 40px; height: 40px; margin-left: -12px; padding: 3px; border: 2px solid #fff; border-radius: 12px; background: #fff; object-fit: contain; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.cod-summary__thumbs > :first-child { margin-left: 0; }
.cod-summary__thumbs em { display: grid; place-items: center; background: #eef1f5; color: var(--navy); font-size: 12px; font-style: normal; font-weight: 800; }
.cod-summary__title { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; line-height: 1.3; }
.cod-summary__title em { font-size: 12.5px; }
.cod-summary__total { font-size: 17px; font-weight: 800; }

.cod-eta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid #bbf7d0; border-radius: 18px; background: linear-gradient(120deg, #ecfdf5, #f7fef9); color: #065f46; }
.cod-eta__icon { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #10b981; color: #fff; animation: cod-live 2.2s infinite; }
@keyframes cod-live { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); } 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
.cod-eta strong { display: block; font-size: 14.5px; line-height: 1.3; }
.cod-eta small { color: #047857; font-size: 12.5px; }
.cod-field input { border-radius: 14px; }

.cod-paycard { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--navy); border-radius: 16px; background: linear-gradient(120deg, #f3f7fc, #fff); }
.cod-paycard__icon { display: grid; flex-shrink: 0; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--navy); color: var(--yellow); }
.cod-paycard__text { flex: 1; min-width: 0; line-height: 1.35; }
.cod-paycard__text strong { display: block; color: #111827; font-size: 15.5px; }
.cod-paycard__text small { color: #6b7280; font-size: 12.5px; }
.cod-paycard__check { display: grid; flex-shrink: 0; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #10b981; color: #fff; box-shadow: 0 4px 10px rgba(16, 185, 129, .35); }

.cod__footer { padding: 12px 14px 14px; box-shadow: 0 -10px 30px rgba(16, 24, 40, .08); }
.cod-submit { justify-content: space-between; height: 60px; padding: 0 8px 0 20px; overflow: hidden; border-radius: 16px; background: linear-gradient(120deg, var(--yellow), #ffd45c 60%, var(--yellow)); background-size: 200% 100%; color: #111; font-size: 16px; font-weight: 800; box-shadow: 0 14px 28px -12px rgba(247, 181, 0, .8); transition: background-position .5s, transform .15s, box-shadow .15s; }
.cod-submit::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); animation: cod-shine 3.2s ease-in-out infinite; pointer-events: none; }
.cod-submit:hover { background-position: 100% 0; box-shadow: 0 18px 34px -12px rgba(247, 181, 0, .9); }
.cod-submit__label { display: inline-flex; align-items: center; gap: 9px; transition: opacity .15s; }
.cod-submit__price { padding: 10px 14px; border-radius: 12px; background: #031a33; color: #fff; font-size: 15px; font-weight: 800; transition: opacity .15s; }
.cod-submit:disabled { background: #cbd2da; color: #fff; box-shadow: none; }
.cod-submit:disabled::after { display: none; }
.cod-submit__spin { position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -10px; border-color: rgba(0, 0, 0, .15); border-top-color: #111; }
.cod-submit.is-loading .cod-submit__label, .cod-submit.is-loading .cod-submit__price { opacity: 0; }
.cod__reassure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; color: #047857; font-size: 12.5px; font-weight: 600; text-align: center; }

.cod-modal__box.is-done .cod-modal__head { overflow: visible; background: transparent; }
.cod-modal__box.is-done .cod-modal__head::after, .cod-modal__box.is-done .cod-badges, .cod-modal__box.is-done .cod-modal__lock { display: none; }
.cod-thanks__note { display: flex; gap: 10px; margin: 0 28px 16px; padding: 12px 14px; border-radius: 14px; background: #fff7e0; color: #5b4300; font-size: 13px; line-height: 1.5; }
.cod-thanks__note .icon { flex-shrink: 0; margin-top: 1px; }
.cod-copy { margin-left: 8px; padding: 3px 10px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #111827; font-size: 12px; font-weight: 700; vertical-align: middle; cursor: pointer; }
.cod-copy:hover { border-color: var(--navy); }
.cod-btn--wa { background: #25d366; color: #fff; box-shadow: 0 10px 22px -10px rgba(37, 211, 102, .7); }
.cod-btn--wa:hover { background: #1fbe5b; opacity: 1; }

/* cart below the minimum order: progress + invitation to the shop */
.minbox { margin: 0 0 12px; overflow: hidden; border: 1px solid #f1dfa3; border-radius: 18px; background: linear-gradient(135deg, #fffaeb, #fff 72%); color: #111827; text-align: left; }
.minbox.is-shaking { animation: minbox-shake .5s; }
@keyframes minbox-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.minbox__progress { padding: 12px 14px 11px; }
.minbox__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #5b4300; font-size: 13px; }
.minbox__row span { display: inline-flex; align-items: center; gap: 6px; }
.minbox__row .icon { flex-shrink: 0; color: #d97706; }
.minbox__row em { color: #92700c; font-size: 12px; font-style: normal; font-weight: 600; white-space: nowrap; }
.minbox__bar { display: block; height: 7px; margin-top: 8px; overflow: hidden; border-radius: 7px; background: #f6e7b8; }
.minbox__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f7b500, #ffd45c); transition: width .5s var(--ease); }
.minbox__store { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px 10px; border-top: 1px dashed #efd999; }
.minbox__icon { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--navy); color: var(--yellow); }
.minbox__store strong { display: block; color: #111827; font-size: 14px; line-height: 1.35; }
.minbox__store p { margin: 3px 0 0; color: #4b5563; font-size: 12.5px; line-height: 1.5; }
.minbox__actions { display: flex; gap: 8px; padding: 2px 14px 13px; }
.minbox__actions:empty { display: none; }
.minbox__actions a { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; height: 38px; border: 1px solid #e5e7eb; border-radius: 11px; background: #fff; color: #111827 !important; font-size: 13px; font-weight: 700; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.minbox__actions a:hover { border-color: var(--navy); box-shadow: 0 6px 14px -8px rgba(2, 36, 70, .35); }
.minbox__actions .icon { color: var(--navy); }
.cod .minbox { margin-bottom: 12px; }

/* products whose page is switched off (Paramètres → Pages produit): same look, not clickable */
span.pcard__media, span.drawer-item__img, span.cart-row__img { display: block; cursor: default; }
.pcard--static .pcard__media img { transform: none !important; }
.pcard--static .pcard__title { cursor: default; }
.predictive__list .predictive__item { display: flex; align-items: center; gap: 14px; padding: 8px 18px; cursor: default; }

@media (max-width: 600px) {
  .cod-modal__box { border-radius: 24px 24px 0 0; }
  .cod-modal__head { padding: 24px 14px 14px; }
  .cod-modal__head::before { background: rgba(255, 255, 255, .35); }
  .cod-modal__lock { display: none; }
  .cod-badges { gap: 6px; }
  .cod-badges li { flex-direction: column; justify-content: center; gap: 6px; padding: 9px 4px; text-align: center; }
  .cod-badges b { font-size: 11px; }
  .cod-submit { font-size: 15px; }
  .cod-thanks__note { margin: 0 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-cod::after, .cod-submit::after, .cod-eta__icon, .cod-badges li { animation: none; }
}

/* product page: express checkout */
.btn--express { gap: 10px; }
.product__assure { display: grid; gap: 9px; margin: 14px 0 0; padding: 13px 15px; border: 1px solid #e5e7eb; border-radius: 16px; background: #fff; list-style: none; }
.product__assure li { display: flex; align-items: center; gap: 10px; color: #111827; font-size: 13.5px; font-weight: 600; }
.product__assure .icon { flex-shrink: 0; color: var(--navy); }
/* sticky order bar (mobile) — slides in once the main button has scrolled away */
.pbar { display: none; }
@media (max-width: 749px) {
  .pbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 22px; background: linear-gradient(135deg, rgba(4, 30, 58, .94), rgba(2, 18, 36, .97)); box-shadow: 0 20px 46px -14px rgba(2, 20, 40, .6), inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); opacity: 0; transform: translateY(calc(100% + 30px)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .3s; pointer-events: none; }
  .pbar.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  .pbar::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(120deg, rgba(247, 181, 0, .6), rgba(255, 255, 255, .06) 35%, rgba(255, 255, 255, .06) 65%, rgba(247, 181, 0, .4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
  .pbar__img { display: block; flex-shrink: 0; width: 46px; height: 46px; padding: 3px; border-radius: 15px; background: #fff; }
  .pbar__img img { width: 100%; height: 100%; border-radius: 12px; object-fit: contain; }
  .pbar__qty { display: flex; flex-shrink: 0; align-items: center; height: 46px; padding: 0 3px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 15px; background: rgba(255, 255, 255, .07); }
  .pbar__qty button { display: grid; place-items: center; width: 30px; height: 38px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: #fff; cursor: pointer; transition: background .15s; }
  .pbar__qty button:active { background: rgba(255, 255, 255, .14); }
  .pbar__qty button:disabled { opacity: .3; cursor: default; }
  .pbar__qty span { min-width: 20px; color: #fff; font-size: 15px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
  .pbar__btn { position: relative; display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; height: 46px; padding: 0 5px 0 14px; overflow: hidden; border: 0; border-radius: 15px; background: linear-gradient(120deg, var(--yellow), #ffd45c 60%, var(--yellow)); background-size: 200% 100%; color: #111; font-size: 14.5px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(247, 181, 0, .85); transition: background-position .5s, transform .15s; }
  .pbar__btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); animation: cod-shine 3.4s ease-in-out infinite; pointer-events: none; }
  .pbar__btn:active { transform: scale(.98); }
  .pbar__btn > span { display: inline-flex; align-items: center; gap: 7px; overflow: hidden; white-space: nowrap; }
  .pbar__btn em { flex-shrink: 0; padding: 8px 10px; border-radius: 11px; background: #031a33; color: #fff; font-size: 13.5px; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
  .pbar__btn.is-loading { opacity: .75; pointer-events: none; }
  .template-product main { padding-bottom: 88px; }
}
@media (max-width: 370px) { .pbar__img { display: none; } }
@media (prefers-reduced-motion: reduce) { .pbar { transition: none; } .pbar__btn::after { animation: none; } }

/* ==================== header v2 ==================== */
/* rotating announcement ribbon */
.ribbon { position: relative; z-index: 41; border-bottom: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(90deg, #011a33, var(--navy) 50%, #011a33); color: rgba(255, 255, 255, .9); font-size: 12.5px; }
.ribbon__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1440px; height: 36px; margin: 0 auto; padding: 0 24px; }
.ribbon__ticker { position: relative; flex: 1; min-width: 0; height: 36px; overflow: hidden; }
.ribbon__ticker p { position: absolute; inset: 0; display: flex; align-items: center; margin: 0; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; opacity: 0; transform: translateY(100%); transition: transform .6s var(--ease), opacity .6s; }
.ribbon__ticker p.is-active { opacity: 1; transform: none; }
.ribbon__ticker p.is-leaving { opacity: 0; transform: translateY(-100%); }
.ribbon__links { display: flex; flex-shrink: 0; gap: 20px; }
.ribbon__links a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .82); font-weight: 600; transition: color .2s; }
.ribbon__links a:hover { color: var(--yellow); }
.ribbon__links .icon { color: var(--yellow); }

/* sticky glass header */
/* solid navy (same colour as the logo's own background, so the logo never shows a box) */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(255, 255, 255, .07); background: var(--navy); box-shadow: none; transition: transform .45s var(--ease), box-shadow .3s; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--yellow), transparent); opacity: 0; transform: scaleX(.3); transition: opacity .4s, transform .7s var(--ease); pointer-events: none; }
.site-header.is-compact { box-shadow: 0 16px 36px -16px rgba(1, 16, 32, .6); }
.site-header.is-compact::after { opacity: .9; transform: none; }
.site-header.is-hidden { transform: translateY(-110%); }
.hdr { display: flex; align-items: center; gap: 22px; max-width: 1440px; height: 80px; margin: 0 auto; padding: 0 24px; color: #fff; }
.hdr > * { animation: hdr-in .6s var(--ease) both; }
.hdr > :nth-child(2) { animation-delay: .06s; }
.hdr > :nth-child(3) { animation-delay: .12s; }
.hdr > :nth-child(4) { animation-delay: .18s; }
@keyframes hdr-in { from { opacity: 0; transform: translateY(-8px); } }
/* The logo link is exactly as tall as the bar and clips the image's navy padding, so the logo stays big but never sticks out. */
.hdr__logo { display: flex; flex-shrink: 0; align-items: center; height: 80px; overflow: hidden; }
/* No animation on the link itself: a transformed parent isolates the image and its navy box would show through. */
.hdr > .hdr__logo { animation: none; }
.hdr__logo img { display: block; width: clamp(190px, var(--logo-w, 210px), 230px); height: auto; max-width: none; mix-blend-mode: lighten; transform-origin: left center; transition: transform .35s var(--ease); animation: hdr-in .6s var(--ease) .06s backwards; }
.hdr__logo:hover img { transform: scale(1.03); }
.site-header.is-compact .hdr__logo img { transform: scale(.88); }

/* search fields */
.hdr-field { position: relative; }
.hdr-field .search__input { height: 50px; padding: 0 18px 0 48px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; transition: background .25s, border-color .25s, box-shadow .25s, color .25s; }
.hdr-field .search__input::placeholder { color: rgba(255, 255, 255, .62); }
.hdr-field .search__input:hover { border-color: rgba(255, 255, 255, .26); }
.hdr-field .search__input:focus { border-color: #fff; background: #fff; color: var(--ink); box-shadow: 0 0 0 4px rgba(247, 181, 0, .35), 0 18px 40px -18px rgba(0, 0, 0, .55); }
.hdr-field .search__input:focus::placeholder { color: var(--muted); }
.hdr-field__icon { position: absolute; left: 17px; top: 25px; z-index: 1; display: grid; color: rgba(255, 255, 255, .65); transform: translateY(-50%); pointer-events: none; transition: color .2s; }
.hdr-field:focus-within .hdr-field__icon { color: var(--navy); }
.hdr-field .predictive { top: calc(100% + 10px); }
.hdr__search { flex: 1; max-width: 620px; margin: 0 auto; }
.hdr__search .search__input { padding-right: 96px; }
.hdr__kbd { position: absolute; right: 56px; top: 50%; padding: 1px 8px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 7px; color: rgba(255, 255, 255, .55); font: 600 12px var(--font, Inter), sans-serif; transform: translateY(-50%); pointer-events: none; transition: opacity .2s; }
.hdr__search:focus-within .hdr__kbd { opacity: 0; }
.hdr__search-go { position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: var(--yellow); color: var(--ink); cursor: pointer; transform: translateY(-50%); transition: transform .2s var(--ease), box-shadow .2s; }
.hdr__search-go:hover { box-shadow: 0 8px 18px -6px rgba(247, 181, 0, .75); transform: translateY(-50%) scale(1.06); }

/* actions */
.hdr__actions { display: flex; flex-shrink: 0; align-items: center; gap: 10px; margin-left: auto; }
.hdr__icon { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .09); color: #fff; cursor: pointer; transition: background .2s, opacity .3s, transform .3s var(--ease); }
.hdr__icon:hover { background: rgba(255, 255, 255, .16); }
.hdr__action, .hdr__cart { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 6px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .05); color: #fff; transition: background .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.hdr__action:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); transform: translateY(-1px); }
.hdr__action-icon, .hdr__cart-icon { position: relative; display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--yellow); }
.hdr__action-text, .hdr__cart-text { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.hdr__action-text small, .hdr__cart-text small { color: rgba(255, 255, 255, .6); font-size: 11.5px; font-weight: 500; }
.hdr__action-text strong, .hdr__cart-text strong { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hdr__cart { border-color: transparent; background: linear-gradient(120deg, var(--yellow), #ffd45c); color: var(--ink); box-shadow: 0 12px 26px -12px rgba(247, 181, 0, .85); }
.hdr__cart:hover { box-shadow: 0 16px 32px -12px rgba(247, 181, 0, .95); transform: translateY(-2px); }
.hdr__cart .hdr__cart-icon { background: #031a33; color: #fff; }
.hdr__cart .hdr__cart-icon .icon { width: 24px; height: 24px; }
.hdr__cart .hdr__cart-text small { color: rgba(17, 24, 39, .62); }
.hdr__cart .cart-count { top: -7px; right: -7px; border-color: #ffc933; background: #e5484d; color: #fff; }
/* Bouton « Se connecter / Espace client » — visible en permanence */
.hdr__login { position: relative; overflow: hidden; }
.hdr__login::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, rgba(247, 181, 0, .55), rgba(255, 255, 255, .05) 45%, rgba(247, 181, 0, .35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; pointer-events: none; }
.hdr__login .hdr__action-icon { background: linear-gradient(135deg, var(--yellow), #ffd45c); color: #031a33; overflow: hidden; }
.hdr__login .hdr__action-icon .icon { position: relative; z-index: 1; }
.hdr__login .hdr__action-icon::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-18deg); animation: hdr-login-shine 4.5s ease-in-out 1.2s infinite; }
.hdr__login:hover .hdr__action-icon { transform: scale(1.05); }
.hdr__login-avatar { width: 100%; height: 100%; object-fit: cover; }
.hdr__login .hdr__account-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border: 2px solid var(--navy); border-radius: 50%; background: #22c55e; }
.hdr__login.is-on::before { background: linear-gradient(120deg, rgba(34, 197, 94, .5), rgba(255, 255, 255, .05) 50%, rgba(34, 197, 94, .3)); }
.hdr__login.is-on .hdr__action-icon::after { display: none; }
@keyframes hdr-login-shine { 0%, 55% { left: -60%; } 78%, 100% { left: 130%; } }
.cart-count.is-bump { animation: hdr-bump .6s var(--ease); }
.hdr__cart.is-bump .hdr__cart-icon { animation: hdr-wiggle .6s var(--ease); }
@keyframes hdr-bump { 30% { transform: scale(1.45); } 60% { transform: scale(.9); } }
@keyframes hdr-wiggle { 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }

/* cart reminder: gentle repeating nudge + golden halo while the cart has items */
.hdr__cart.has-items .hdr__cart-icon { animation: hdr-nudge 4.5s var(--ease) 1.5s infinite; }
.hdr__cart.has-items .hdr__cart-icon::after { content: ""; position: absolute; inset: -4px; border: 2px solid rgba(247, 181, 0, .9); border-radius: 15px; opacity: 0; animation: hdr-halo 4.5s ease-out 1.5s infinite; pointer-events: none; }
.hdr__cart.has-items .cart-count { animation: hdr-count 4.5s var(--ease) 1.5s infinite; }
.hdr__cart.is-bump .hdr__cart-icon { animation: hdr-wiggle .6s var(--ease); }
@keyframes hdr-nudge { 0%, 78%, 100% { transform: none; } 82% { transform: rotate(-13deg) scale(1.06); } 86% { transform: rotate(10deg) scale(1.06); } 90% { transform: rotate(-6deg); } 94% { transform: rotate(3deg); } }
@keyframes hdr-halo { 0%, 78% { opacity: 0; transform: scale(.9); } 82% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes hdr-count { 0%, 80%, 100% { transform: none; } 86% { transform: scale(1.3); } 92% { transform: scale(.95); } }

/* mobile/left group: hamburger + compact search button */
.hdr__start { display: none; }

/* hamburger */
.hdr__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .09); cursor: pointer; transition: background .2s; }
.hdr__burger span { display: block; height: 2px; border-radius: 2px; background: #fff; transition: width .3s var(--ease); }
.hdr__burger span:nth-child(2) { width: 65%; }
.hdr__burger:hover span:nth-child(2) { width: 100%; }

/* compact search dropdown (mobile, once scrolled) */
.hdr-drop { display: none; }

/* sub bar: categories (scrolls with the page, no layout jump) */
.hdr-sub { position: relative; z-index: 39; border-bottom: 1px solid rgba(255, 255, 255, .06); background: var(--navy); }
.hdr-sub__search { display: none; }
.hdr-nav { display: flex; align-items: center; gap: 16px; max-width: 1440px; margin: 0 auto; padding: 0 24px; }
.hdr-nav__list { display: flex; flex: 1; gap: 4px; min-width: 0; margin: 0; padding: 10px 0; overflow-x: auto; list-style: none; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.hdr-nav__list::-webkit-scrollbar { display: none; }
.hdr-nav__list li { flex-shrink: 0; animation: hdr-in .55s var(--ease) both; animation-delay: calc(.12s + var(--i, 0) * .035s); }
.hdr-nav__list a { position: relative; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; color: rgba(255, 255, 255, .8); font-size: 14px; font-weight: 600; white-space: nowrap; transition: color .2s, background .2s; }
.hdr-nav__list a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--yellow); transform: scaleX(0); transition: transform .3s var(--ease); }
.hdr-nav__list a:hover { color: #fff; }
.hdr-nav__list a:hover::after { transform: scaleX(1); }
.hdr-nav__list a[aria-current="page"] { background: var(--yellow); color: var(--ink); }
.hdr-nav__list a[aria-current="page"]::after { display: none; }
.hdr-nav__promise { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid rgba(52, 211, 153, .28); border-radius: 999px; background: rgba(52, 211, 153, .1); color: #a7f3d0; font-size: 12.5px; font-weight: 700; }
.hdr-live { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: hdr-live 2s infinite; }
@keyframes hdr-live { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

/* menu drawer */
.menu-drawer { display: flex; flex-direction: column; width: min(90vw, 400px); background: linear-gradient(180deg, var(--navy) 0%, #011a33 100%); color: #fff; box-shadow: 30px 0 60px -20px rgba(0, 0, 0, .55); }
.mdr__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 8px; }
.mdr__logo img { display: block; width: 150px; mix-blend-mode: lighten; }
.mdr__close { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 13px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: transform .35s var(--ease), background .2s; }
.mdr__close:hover { background: rgba(255, 255, 255, .18); transform: rotate(90deg); }
.mdr__search { margin: 6px 16px 4px; }
.mdr__label { margin: 16px 22px 6px; color: rgba(255, 255, 255, .48); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.menu-drawer .menu-drawer__list { margin: 0; padding: 0 10px; list-style: none; }
.menu-drawer__list li { opacity: 0; transform: translateX(-18px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: calc(var(--i, 0) * 35ms + .08s); }
.menu-drawer.is-open .menu-drawer__list li { opacity: 1; transform: none; }
.menu-drawer .menu-drawer__list a { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 16px; color: #fff; font-size: 15px; font-weight: 600; transition: background .2s; }
.menu-drawer .menu-drawer__list a:hover, .menu-drawer .menu-drawer__list a[aria-current="page"] { background: rgba(255, 255, 255, .08); }
.menu-drawer__list a > span { flex: 1; min-width: 0; }
.menu-drawer__list a > .icon { flex-shrink: 0; color: rgba(255, 255, 255, .38); transition: transform .2s, color .2s; }
.menu-drawer__list a:hover > .icon { color: var(--yellow); transform: translateX(3px); }
.menu-drawer .menu-drawer__img { width: 50px; height: 50px; border-radius: 14px; background: #fff; object-fit: cover; }
.mdr__quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 16px 6px; }
.mdr__quick a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 12px 6px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .05); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; transition: background .2s, border-color .2s; }
.mdr__quick a:hover { border-color: rgba(247, 181, 0, .45); background: rgba(255, 255, 255, .1); }
.mdr__quick .icon { color: var(--yellow); }
.mdr__quick a.is-wa .icon { color: #25d366; }
.mdr__socials { margin: auto 16px 22px; padding-top: 14px; }

@media (max-width: 1180px) {
  .hdr__action { padding: 0 6px; }
  .hdr__action-text { display: none; }
}
@media (max-width: 989px) {
  .ribbon__inner { justify-content: center; height: 32px; padding: 0 14px; }
  .ribbon__ticker { height: 32px; }
  .ribbon__ticker p { justify-content: center; font-size: 12px; text-align: center; }
  .ribbon__links { display: none; }
  .hdr { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; height: 64px; padding: 0 12px; }
  .hdr__start { display: flex; align-items: center; gap: 6px; justify-self: start; }
  .hdr__burger { display: flex; }
  .hdr__logo { justify-self: center; }
  .hdr__logo { height: 64px; }
  .hdr__logo img { width: min(46vw, 180px); transform-origin: center; }
  .site-header.is-compact .hdr__logo img { transform: scale(.86); }
  .hdr__search { display: none; }
  .hdr__actions { justify-self: end; gap: 6px; }
  /* Sur mobile, la barre du haut privilégie « Se connecter » + panier ; le suivi reste dans le menu et le pied de page */
  .hdr__action.js-track-open { display: none; }
  .hdr__action { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; background: transparent; }
  .hdr__action-icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .09); }
  .hdr__action:hover { transform: none; }
  /* Le bouton « Se connecter » garde son libellé sur mobile : c'est l'appel à l'action principal */
  .hdr__login { width: auto; height: 44px; padding: 0 12px 0 5px; gap: 8px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
  .hdr__login::before { display: none; }
  .hdr__login .hdr__action-icon { width: 34px; height: 34px; border-radius: 10px; }
  .hdr__login .hdr__action-icon .icon { width: 19px; height: 19px; }
  .hdr__login .hdr__action-text { display: flex; }
  .hdr__login .hdr__action-text small { display: none; }
  .hdr__login .hdr__action-text strong { font-size: 13px; }
  .hdr__icon { display: grid; opacity: 0; pointer-events: none; transform: scale(.6); }
  .site-header.is-compact .hdr__icon { opacity: 1; pointer-events: auto; transform: none; }
  .hdr__cart { height: 44px; padding: 0; border-radius: 14px; }
  .hdr__cart .hdr__cart-icon { width: 44px; height: 44px; border-radius: 14px; background: transparent; color: var(--ink); }
  .hdr__cart .hdr__cart-icon .icon { width: 25px; height: 25px; }
  .hdr__cart-text { display: none; }
  .hdr__cart .cart-count { top: -5px; right: -5px; }
  .hdr-drop { position: absolute; left: 0; right: 0; top: 100%; display: block; padding: 10px 12px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(1, 26, 51, .97); box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .6); animation: hdr-in .3s var(--ease); }
  .hdr-drop[hidden] { display: none; }
  .hdr-sub__search { display: block; padding: 10px 12px 2px; }
  .hdr-sub__search .search__input { height: 48px; }
  .hdr-sub .hdr-field__icon { top: 24px; }
  .hdr-nav { padding: 0 12px; }
  .hdr-nav__list { gap: 6px; padding: 10px 0 12px; }
  .hdr-nav__list a { padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); font-size: 13px; }
  .hdr-nav__list a::after { display: none; }
  .hdr-nav__promise { display: none; }
}
@media (max-width: 400px) {
  .hdr { gap: 4px; padding: 0 10px; }
  .hdr__start, .hdr__actions { gap: 4px; }
  .hdr__logo img { width: min(33vw, 124px); }
  .hdr__burger, .hdr__icon, .hdr__cart, .hdr__cart .hdr__cart-icon { width: 40px; height: 40px; }
  .hdr__action:not(.hdr__login), .hdr__action:not(.hdr__login) .hdr__action-icon { width: 40px; height: 40px; }
  .hdr__burger { padding: 0 11px; }
  .hdr__login { height: 40px; padding: 0 10px 0 4px; gap: 6px; }
  .hdr__login .hdr__action-icon { width: 32px; height: 32px; }
  .hdr__login .hdr__action-text strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr > *, .hdr-nav__list li, .hdr-live, .cart-count.is-bump, .hdr__cart.is-bump .hdr__cart-icon,
  .hdr__cart.has-items .hdr__cart-icon, .hdr__cart.has-items .hdr__cart-icon::after, .hdr__cart.has-items .cart-count { animation: none; }
  .site-header, .ribbon__ticker p, .menu-drawer__list li { transition: none; }
}

/* ---------- branded footer ---------- */
.ft { position: relative; overflow: hidden; padding: 0 0 28px; background: var(--navy-deep); color: rgba(255, 255, 255, .72); border-radius: 36px 36px 0 0; }
.ft::before { content: ""; position: absolute; top: -200px; right: -140px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 181, 0, .14), transparent 65%); pointer-events: none; }
.ft::after { content: ""; position: absolute; bottom: -220px; left: -160px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(60, 120, 220, .16), transparent 65%); pointer-events: none; }
.ft .container { position: relative; z-index: 1; }
.ft a { color: rgba(255, 255, 255, .72); transition: color .2s; }
.ft a:hover { color: var(--yellow); }
.ft-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin: 48px 0 56px; padding: 34px 40px; border-radius: 28px; background: linear-gradient(120deg, var(--yellow) 0%, #ffd45c 100%); color: var(--ink); box-shadow: 0 24px 50px rgba(0, 0, 0, .25); }
.ft-cta .eyebrow { margin: 0; color: rgba(11, 19, 36, .7); }
.ft-cta .eyebrow::before { background: var(--ink); }
.ft-cta h2 { max-width: 560px; margin: 6px 0; color: var(--ink); font-size: clamp(22px, 2.6vw, 32px); }
.ft-cta p { margin: 0; color: rgba(11, 19, 36, .72); font-weight: 500; }
.ft-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ft-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 20px; border: 0; border-radius: 14px; font-family: var(--font); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.ft-btn:hover { transform: translateY(-2px); }
.ft .ft-btn--dark, .ft .ft-btn--dark:hover { background: var(--ink); color: #fff; box-shadow: 0 10px 24px rgba(11, 19, 36, .3); }
.ft .ft-btn--wa, .ft .ft-btn--wa:hover { background: #25d366; color: #05301a; box-shadow: 0 10px 24px rgba(37, 211, 102, .35); }
.ft .ft-btn--light, .ft .ft-btn--light:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.ft-grid { display: grid; grid-template-columns: 1.35fr 1.4fr 1fr 1.25fr; gap: 44px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ft-brand__logo { display: inline-flex; margin-bottom: 20px; padding: 16px 24px; border-radius: 22px; background: var(--navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 30px rgba(0, 0, 0, .25); }
.ft-brand__logo img { width: 230px; max-width: 100%; mix-blend-mode: lighten; }
.ft-brand p { max-width: 360px; margin: 0 0 18px; font-size: 14.5px; line-height: 1.75; }
.ft-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ft-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(255, 255, 255, .05); color: #fff; font-size: 12.5px; font-weight: 600; }
.ft-pills .icon { color: var(--yellow); }
.ft-col h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: #fff; font-family: var(--font); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ft-col h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(247, 181, 0, .55), transparent); }
.ft-links { display: grid; gap: 11px; }
.ft-links--2 { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.ft-links a { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; }
.ft-links a::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background .2s, transform .2s; }
.ft-links a:hover::before { background: var(--yellow); transform: scale(1.35); }
.ft-contact li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-size: 14.5px; line-height: 1.5; }
.ft-contact__icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--yellow); }
.ft-contact small { display: block; color: rgba(255, 255, 255, .45); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ft-contact strong, .ft .ft-contact a { color: #fff; font-weight: 600; }
.ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 24px; font-size: 13px; }
.ft-bottom p { margin: 0; }
.ft-bottom strong { color: #fff; }
.ft-legal { flex-basis: 100%; color: rgba(255, 255, 255, .4); font-size: 12px; }
@media (max-width: 1100px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 749px) {
  .ft { border-radius: 26px 26px 0 0; }
  .ft-cta { margin: 28px 0 36px; padding: 24px 20px; border-radius: 22px; }
  .ft-cta__actions, .ft-btn { width: 100%; }
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .ft-brand, .ft-col--cats, .ft-col--contact { grid-column: 1 / -1; }
  .ft-brand__logo img { width: 200px; }
  .ft-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- order tracking ---------- */
.trk-modal { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; padding: 20px 16px; background: rgba(7, 13, 26, .62); backdrop-filter: blur(6px); animation: cod-fade .2s ease-out; }
.trk-modal__box { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: min(92vh, 980px); overflow: hidden; background: #f4f5f7; border-radius: 26px; box-shadow: var(--shadow-lg); animation: cod-in .3s var(--ease); }
.trk-modal__close { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background .2s, transform .2s; }
.trk-modal__close:hover { background: rgba(255, 255, 255, .24); transform: rotate(90deg); }
.trk-hero { position: relative; flex-shrink: 0; padding: 34px 28px 26px; color: #fff; text-align: center; background: radial-gradient(120% 120% at 50% 0%, #0b3d73 0%, var(--navy) 55%, #011a33 100%); }
.trk-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--yellow), transparent); }
.trk-hero__icon { display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 12px; border-radius: 18px; background: rgba(247, 181, 0, .14); color: var(--yellow); }
.trk-hero h2 { color: #fff; font-size: 27px; }
.trk-hero p { max-width: 430px; margin: 8px auto 18px; color: rgba(255, 255, 255, .76); font-size: 14.5px; }
.trk-form { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; padding: 6px; background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }
.trk-form input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; outline: none; }
.trk-form input::placeholder { color: #b3b9c2; }
.trk-form button { flex-shrink: 0; padding: 0 24px; border: 0; border-radius: 12px; background: var(--yellow); color: var(--ink); font-size: 15px; font-weight: 800; cursor: pointer; transition: transform .15s; }
.trk-form button:hover { transform: translateY(-1px); }
.trk-form button:disabled { opacity: .6; transform: none; }
.trk-result { flex: 1; min-height: 0; overflow-y: auto; }
.trk-result:not(:empty) { padding: 16px; }
.trk-loading { display: grid; place-items: center; padding: 40px; }
.trk-error { margin: 0; padding: 14px 16px; border-radius: 14px; background: #fef2f2; color: #b91c1c; font-weight: 500; text-align: center; }
.trk { display: grid; gap: 12px; }
.trk-card { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.trk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.trk-eyebrow { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.trk-head h3 { margin: 4px 0; font-size: 21px; }
.trk-head p { margin: 0; color: var(--muted); font-size: 14px; }
.trk-badge { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.trk-badge--warning { background: #fff1c2; color: #7a5b00; }
.trk-badge--info { background: #e0f0ff; color: #00527c; }
.trk-badge--amber { background: #ffe8c7; color: #8a4b00; }
.trk-badge--purple { background: #ede4ff; color: #4a1d96; }
.trk-badge--success { background: #dcfce7; color: #166534; }
.trk-badge--neutral { background: #e5e7eb; color: #374151; }
.trk-progress { height: 8px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: #eceef2; }
.trk-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--navy), var(--yellow)); transition: width .8s var(--ease); }
.trk-progress--cancelled i { background: #d1d5db; }
.trk-driver { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: linear-gradient(120deg, var(--navy), #0b3d73); color: #fff; box-shadow: 0 12px 26px rgba(2, 36, 70, .25); }
.trk-driver__avatar { display: grid; place-items: center; flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: 17px; font-weight: 800; }
.trk-driver__info { flex: 1; min-width: 0; }
.trk-driver__info small { display: block; color: rgba(255, 255, 255, .65); font-size: 12px; }
.trk-driver__info strong { display: block; font-size: 17px; }
.trk-driver__info span { color: rgba(255, 255, 255, .75); font-size: 13px; }
.trk-driver__call { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 14px; background: var(--yellow); color: var(--ink) !important; font-weight: 800; text-decoration: none; }
.trk-steps { margin: 0; padding: 0; list-style: none; }
.trk-step { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.trk-step:last-child { padding-bottom: 0; }
.trk-step:not(:last-child)::before { content: ""; position: absolute; top: 44px; bottom: 4px; left: 20px; width: 2px; background: #e3e6eb; }
.trk-step.is-done:not(:last-child)::before { background: var(--navy); }
.trk-step__icon { position: relative; z-index: 1; display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: #eef0f3; color: #9aa3ad; }
.trk-step.is-done .trk-step__icon { background: var(--navy); color: #fff; }
.trk-step.is-current .trk-step__icon { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); animation: trk-pulse 1.8s ease-out infinite; }
@keyframes trk-pulse { 0% { box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 0 rgba(2, 36, 70, .35); } 100% { box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 12px rgba(2, 36, 70, 0); } }
.trk-step.is-cancelled .trk-step__icon { background: #fee2e2; color: #dc2626; }
.trk-step__body { flex: 1; min-width: 0; padding-top: 2px; }
.trk-step__body strong { display: block; color: var(--ink); font-size: 15px; }
.trk-step.is-pending .trk-step__body strong { color: #9aa3ad; }
.trk-step__body p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.trk-step.is-pending .trk-step__body p { color: #b3b9c2; }
.trk-step__body time { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; }
.trk-step.is-current time { background: #fff3cf; color: #7a5b00; }
.trk-step.is-pending time { padding: 0; background: transparent; color: #b3b9c2; }
.trk-step__meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--ink); font-size: 13px; font-weight: 600; }
.trk-step__meta a { text-decoration: underline; }
.trk-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.trk-summary div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.trk-summary span { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.trk-summary strong { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.35; }
.trk-items { margin-top: 12px; }
.trk-items summary { color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.trk-items ul { margin: 10px 0 0; }
.trk-items li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.trk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; font-size: 13.5px; }
.trk-refresh { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 0; border-radius: 10px; background: #fff; color: var(--ink); font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); }
.trk-foot a { color: var(--muted); }
.trk-foot a strong { color: var(--ink); }
.trk-page { max-width: 760px; padding-top: 32px; padding-bottom: 64px; }
.trk-card-shell { overflow: hidden; background: #f4f5f7; border-radius: 26px; box-shadow: var(--shadow-md); }
@keyframes trk-up { from { transform: translateY(100%); } }
@media (max-width: 600px) {
  .trk-modal { align-items: flex-end; padding: 0; }
  .trk-modal__box { max-width: none; max-height: 94vh; max-height: 94dvh; border-radius: 24px 24px 0 0; animation: trk-up .32s var(--ease); }
  .trk-hero { padding: 30px 18px 22px; }
  .trk-hero h2 { font-size: 23px; }
  .trk-form input { font-size: 16px; }
  .trk-form button { padding: 0 16px; }
  .trk-driver__call { width: 100%; justify-content: center; }
  .trk-page { padding: 12px 10px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .trk-step.is-current .trk-step__icon { animation: none; }
}

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in, .no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .js-track { scroll-behavior: auto; }
  .cats__track { animation: none; }
  .cats__viewport { overflow-x: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 1199px) {
  .fc__slide { flex-basis: calc((100% - 48px) / 4); }
  .cats { --cat-per-view: 6; }
}
@media (max-width: 1024px) {
  .map__inner { grid-template-columns: 1fr; }
  .map__left, .map__frame { min-height: 320px; }
  .map__right { padding: 32px; }
  .testi__slide { flex-basis: calc((100% - 18px) / 2); }
  .badges__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 989px) {
  .header__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 10px 12px; }
  .header__menu-toggle, .header__search-toggle { display: inline-grid; }
  .header__logo { justify-self: center; }
  .header__logo img { width: min(56vw, 240px) !important; }
  .header__inner { padding: 12px; }
  .header-search, .header-menu { display: none; }
  .header__icons { gap: 4px; }
  .coll { flex-direction: column; padding: 16px 16px 48px; }
  .facets { position: static; flex: none; width: 100%; max-height: none; }
  .facets__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; border: 0; background: #fff; color: var(--ink); font-weight: 700; cursor: pointer; }
  .facets__toggle::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; }
  .facets__toggle[aria-expanded="true"]::after { content: "−"; }
  .facets__body { display: none; border-top: 1px solid var(--line); }
  .facets.is-open .facets__body { display: block; }
  .checkout { grid-template-columns: 1fr; }
  .checkout__summary { position: static; order: -1; }
  .fc__slide { flex-basis: calc((100% - 32px) / 3); }
  .cats { --cat-per-view: 5; }
  .product__info { position: static; }
}
@media (max-width: 749px) {
  body { font-size: 14.5px; }
  .container, .page-width { padding: 0 14px; }
  .topbar { min-height: 34px; font-size: 12px; }
  .announce p { min-height: 30px; font-size: 12px; }
  .cart-drawer { left: 12px; right: 12px; width: auto; }
  .menu-drawer { max-width: calc(100vw - 40px); }
  .hero { padding: 10px 10px 0; }
  .hero video, .hero img { border-radius: 18px; }
  .rich { padding: 40px 0 20px; }
  .rich__text { font-size: 15px; }
  .rich .btn { max-width: 100%; }
  .cats { --cat-per-view: 3.3; --cat-size: calc(100vw / 3.3 - 20px); padding-top: 28px; }
  .cat__img { border-radius: 22px; }
  .cat__title { font-size: 13px; }
  .fc { padding: 18px 0; }
  .sec-head { align-items: center; margin-bottom: 14px; }
  .sec-head__actions .slider__nav, .sec-head__count, .see-all__n { display: none; }
  .see-all { height: 38px; padding-left: 14px; font-size: 13px; }
  .see-all .icon { width: 28px; height: 28px; padding: 8px; }
  .fc__track { gap: 10px; }
  .fc__slide { flex-basis: 46%; }
  .fc__more a { min-height: 260px; }
  .pcard { border-radius: 16px; }
  .pcard__content { padding: 10px 10px 2px; }
  .pcard__title { font-size: 13px; }
  .price { font-size: 15px; }
  .pcard__form { gap: 6px; padding: 8px 10px 10px; }
  .pcard__add { font-size: 12.5px; }
  .img-banner { padding: 14px 10px; }
  .img-banner__wrap { border-radius: 18px; }
  .img-banner__btn { bottom: 10%; min-height: 36px; padding: 8px 14px; font-size: 12px; }
  .map { padding: 24px 10px; }
  .map__right { padding: 24px; }
  .testi { padding: 32px 12px; }
  .testi__slide { flex-basis: 86%; }
  .testi .slider__nav { display: none; }
  .testi__img { height: 220px; }
  .badges { padding: 8px 12px 40px; }
  .badges__inner { gap: 10px; }
  .badges__item { padding: 20px 12px; }
  .badges__item .icon { width: 46px; height: 46px; padding: 11px; border-radius: 14px; }
  .badges__item h3 { font-size: 14px; }
  .badges__item p { font-size: 12.5px; }
  .footer-banner { padding: 0 10px 20px; }
  .footer { padding: 44px 0 20px; border-radius: 24px 24px 0 0; }
  .footer__top { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .coll-hero { margin: 10px 10px 0; padding: 34px 18px; border-radius: 20px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product { grid-template-columns: 1fr; padding-top: 12px; }
  .product__main-img { border-radius: 22px; }
  .product__info { padding: 22px; border-radius: 22px; }
  .cart-page__head { align-items: center; }
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody { display: block; }
  .cart-table tr { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); }
  .cart-table tr:first-child { border-top: 0; }
  .cart-table td { padding: 6px 0; border: 0; }
  .cart-table td:first-child { grid-column: 1 / -1; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .checkout__form, .contact__form { padding: 20px; }
  .policy { margin: 16px; padding: 26px 18px; border-radius: 22px; }
  .age-modal__box { padding: 34px 22px 24px; }
}
@media (max-width: 400px) {
  .cats { --cat-per-view: 3; --cat-size: calc(100vw / 3 - 18px); }
}

/* ================= Ajout au panier : vol vers le panier ================= */
.fx-layer { position: fixed; inset: 0; z-index: 9999; overflow: hidden; pointer-events: none; }
.fx-fly { position: absolute; width: 0; height: 0; will-change: transform; }
.fx-fly__ball { position: absolute; left: 0; top: 0; display: grid; place-items: center; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: #fff; color: var(--navy); box-shadow: 0 0 0 4px rgba(247, 181, 0, .9), 0 18px 40px -8px rgba(3, 26, 51, .55), 0 0 36px rgba(247, 181, 0, .75); will-change: transform, opacity; }
.fx-fly__ball img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.fx-confetti { position: absolute; width: 9px; height: 13px; border-radius: 3px; will-change: transform, opacity; }
.fx-spark { position: absolute; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 10px currentColor; will-change: transform, opacity; }
.fx-ring { position: absolute; width: 56px; height: 56px; border: 3px solid #f7b500; border-radius: 50%; box-shadow: 0 0 18px rgba(247, 181, 0, .8); will-change: transform, opacity; }
.fx-plus { position: absolute; padding: 4px 11px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 15px; font-weight: 900; box-shadow: 0 8px 20px -6px rgba(229, 72, 77, .8); white-space: nowrap; will-change: transform, opacity; }

/* Bouton « Ajouté ! » */
.pcard__add.is-added, .product__form .btn.is-added { background: linear-gradient(135deg, #22c55e, #15803d); border-color: transparent; color: #fff; animation: fx-btn-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
.btn.is-added .fx-check { flex-shrink: 0; }
.btn.is-added .fx-check path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: fx-check-draw .45s .1s ease-out forwards; }
@keyframes fx-btn-pop { 0% { transform: scale(1); } 30% { transform: scale(.9); } 65% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes fx-check-draw { to { stroke-dashoffset: 0; } }

/* Le panier « avale » le produit */
.hdr__cart.is-catch { animation: fx-cart-catch .85s cubic-bezier(.34, 1.56, .64, 1); }
.hdr__cart.is-catch .hdr__cart-icon { animation: fx-cart-gulp .85s cubic-bezier(.34, 1.56, .64, 1); }
.hdr__cart.is-catch .cart-count { animation: fx-count-pop .7s cubic-bezier(.34, 1.56, .64, 1) .08s; }
@keyframes fx-cart-catch { 0% { transform: scale(1); } 20% { transform: scale(.86, 1.12); } 45% { transform: scale(1.14, .9); } 70% { transform: scale(.97, 1.03); } 100% { transform: scale(1); } }
@keyframes fx-cart-gulp { 0% { transform: rotate(0); } 25% { transform: rotate(-14deg) translateY(3px); } 50% { transform: rotate(12deg); } 75% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }
@keyframes fx-count-pop { 0% { transform: scale(1); } 40% { transform: scale(1.8); background: #22c55e; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fx-layer { display: none; } }

/* ================= Aperçu rapide ================= */
.pcard__quick { position: absolute; top: 16px; right: 16px; z-index: 3; display: inline-flex; align-items: center; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px;
  background: rgba(255, 255, 255, .82); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(3, 26, 51, .45); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; overflow: hidden; opacity: 0; transform: translateY(-8px) scale(.85);
  transition: opacity .35s var(--ease), transform .45s cubic-bezier(.34, 1.56, .64, 1), background .25s, color .25s, box-shadow .25s; }
.pcard__quick-ic { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; }
.pcard__quick-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .4s var(--ease), opacity .3s, padding .4s var(--ease); }
.pcard:hover .pcard__quick, .pcard__quick:focus-visible { opacity: 1; transform: none; }
.pcard__quick:hover, .pcard__quick:focus-visible { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 14px 30px -10px rgba(3, 26, 51, .65); }
.pcard__quick:hover .pcard__quick-label, .pcard__quick:focus-visible .pcard__quick-label { max-width: 80px; padding-right: 16px; opacity: 1; }
.pcard__quick:hover .pcard__quick-ic { color: var(--yellow); animation: qv-blink 1.1s ease-in-out; }
.pcard__quick.is-tapped { animation: qv-tap .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes qv-blink { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.15); } 55% { transform: scaleY(1); } }
@keyframes qv-tap { 0% { transform: scale(1); } 40% { transform: scale(.82); } 100% { transform: scale(1); } }
/* Écrans tactiles : bouton toujours visible */
@media (hover: none) {
  .pcard__quick { top: 14px; right: 14px; height: 38px; opacity: 1; transform: none; overflow: visible; }
  .pcard__quick-ic { width: 36px; height: 36px; }
  .pcard__quick::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--yellow); opacity: 0; animation: qv-ping 3.2s ease-out 1.2s infinite; pointer-events: none; }
}
@keyframes qv-ping { 0% { opacity: .9; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(1.45); } }

.qv { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; }
.qv[hidden] { display: none; }
.qv__backdrop { position: absolute; inset: 0; background: rgba(3, 12, 28, .58); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.qv__panel { position: relative; width: min(980px, 100%); max-height: min(720px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 30px; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .55); }
.qv__grab { display: none; }
.qv__close { position: absolute; top: 16px; right: 16px; z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 8px 20px -8px rgba(3, 26, 51, .35); cursor: pointer; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .2s, color .2s; }
.qv__close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.qv__body { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.qv__gallery { position: relative; background: var(--surface-2); }
.qv__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.qv__track::-webkit-scrollbar { display: none; }
.qv__slide { flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: center; overflow: hidden; }
.qv__slide img { width: 100%; height: 100%; object-fit: cover; }
.qv.is-loaded .qv__slide.is-current img { animation: qv-zoom 6s ease-out both; }
@keyframes qv-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.qv__dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 7px; }
.qv__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .6); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); cursor: pointer; transition: width .35s var(--ease), background .25s; }
.qv__dot.is-active { width: 26px; background: #fff; }
.qv__badge { position: absolute; top: 18px; left: 18px; }
.qv__info { display: flex; flex-direction: column; gap: 14px; padding: 34px 34px 30px; }
.qv__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 30px; padding-right: 48px; }
.qv__stock { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 12.5px; font-weight: 700; }
.qv__stock i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: qv-live 1.8s ease-out infinite; }
.qv__stock--low { background: #ffedd5; color: #c2410c; }
.qv__stock--out { background: #f1f5f9; color: #64748b; }
@keyframes qv-live { 0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, .45); } 100% { box-shadow: 0 0 0 9px rgba(21, 128, 61, 0); } }
.qv__incart { padding: 6px 12px; border-radius: 999px; background: #fff7df; color: #92400e; font-size: 12.5px; font-weight: 700; }
.qv__title { margin: 0; color: var(--ink); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.qv__price .price { margin: 0; }
.qv__text { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.qv__form { display: grid; gap: 10px; margin-top: 4px; }
.qv__qty .qty { width: 150px; }
.qv__add, .qv__buy { min-height: 52px; border-radius: 16px; font-size: 15px; }
.qv__perks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 2px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; font-weight: 600; }
.qv__perks li { display: inline-flex; align-items: center; gap: 7px; }
.qv__perks .icon { color: var(--navy); }
.qv__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--ink); font-size: 14px; font-weight: 800; text-decoration: none; }
.qv__more .icon { transition: transform .25s var(--ease); }
.qv__more:hover .icon { transform: translateX(4px); }
.qv__sk { display: block; height: 14px; margin: 8px 0; border-radius: 8px; background: linear-gradient(90deg, #eef1f6 25%, #f8fafc 45%, #eef1f6 65%); background-size: 300% 100%; animation: qv-shimmer 1.2s linear infinite; }
.qv__sk--btn { height: 52px; margin-top: 16px; border-radius: 16px; }
@keyframes qv-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.qv.is-loaded .qv__stagger { animation: qv-rise .55s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes qv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.qv-ghost { position: fixed; z-index: 1; object-fit: cover; transform-origin: 0 0; will-change: transform; }
body.qv-open .fx-layer { z-index: 9999; }

@media (max-width: 759px) {
  .qv { align-items: flex-end; padding: 0; }
  .qv__panel { width: 100%; max-height: 92vh; border-radius: 26px 26px 0 0; }
  .qv__grab { position: absolute; top: 8px; left: 50%; z-index: 6; display: block; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(255, 255, 255, .85); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
  .qv__close { top: 18px; right: 14px; width: 40px; height: 40px; }
  .qv__body { grid-template-columns: 1fr; }
  .qv__info { gap: 12px; padding: 20px 18px calc(22px + env(safe-area-inset-bottom)); }
  .qv__row { padding-right: 0; }
  .qv__form { grid-template-columns: auto 1fr; align-items: center; }
  .qv__form .qv__buy, .qv__form > button[disabled] { grid-column: 1 / -1; }
  .qv__qty .qty { width: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .qv.is-loaded .qv__stagger, .qv.is-loaded .qv__slide.is-current img, .pcard__quick::after { animation: none; }
}

/* Suivi client : alerte du livreur (accident, report, annulation) */
.trk-alert { display: flex; gap: 14px; padding: 16px 18px; border-radius: 20px; background: #fff7ed; border: 1.5px solid #fdba74; box-shadow: 0 10px 24px rgba(234, 88, 12, .12); animation: trkAlertIn .5s cubic-bezier(.2, .8, .3, 1) both; }
.trk-alert--accident, .trk-alert--annule { background: #fef2f2; border-color: #fca5a5; box-shadow: 0 10px 24px rgba(220, 38, 38, .14); }
.trk-alert__icon { font-size: 26px; line-height: 1.1; }
.trk-alert strong { display: block; font-size: 16px; }
.trk-alert p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #4b5563; }
.trk-alert__reason { font-style: italic; color: #7c2d12; }
@keyframes trkAlertIn { from { opacity: 0; transform: translateY(-12px); } }

/* Suivi client : carte du livreur en direct */
.trk-live { padding: 0; overflow: hidden; }
.trk-live__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: 15px; }
.trk-live__dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); animation: trkPing 1.8s ease-out infinite; }
.trk-live__eta { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--navy, #022446); }
.trk-live__map { height: 300px; background: #eef1f6; }
.trk-live__map .leaflet-control-attribution { font-size: 9px; }
.trk-live__wait { display: grid; place-items: center; height: 100%; color: #667085; font-size: 13.5px; }
.trk-live__hint { margin: 0; padding: 10px 18px 14px; font-size: 12.5px; color: #667085; }
.trk-pin { position: relative; width: 0; height: 0; }
.trk-pin__body { position: absolute; left: -19px; top: -44px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: linear-gradient(135deg, #ffd45c, #f7b500); border: 3px solid #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); font-size: 17px; }
.trk-pin__body { font-size: 0; }
.trk-pin__body::before { content: "🏠"; display: block; transform: rotate(45deg); font-size: 17px; }
.trk-pin__shadow { position: absolute; left: -11px; top: -7px; width: 22px; height: 11px; border-radius: 50%; background: rgba(247, 181, 0, .4); animation: trkPing 2s ease-out infinite; }
@keyframes trkPing { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
@media (max-width: 600px) { .trk-live__map { height: 240px; } }

/* Fenêtre d'accès : majorité + zone de livraison */
.age-modal__box { position: relative; width: 100%; max-width: 480px; padding: 34px 30px 26px; border-radius: 28px; overflow: hidden; background: linear-gradient(170deg, #ffffff 0%, #fffaf0 100%); text-align: center; box-shadow: 0 30px 70px -20px rgba(2, 36, 70, .55); animation: ageIn .55s cubic-bezier(.2, .85, .3, 1) both; }
.age-modal__glow { position: absolute; left: 50%; top: -120px; width: 320px; height: 320px; margin-left: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(247, 181, 0, .35), transparent 65%); pointer-events: none; }
.age-modal__badge { position: relative; display: inline-grid; place-items: center; width: 104px; height: 104px; margin-bottom: 16px; border-radius: 50%; background: var(--navy, #022446); color: var(--yellow, #f7b500); font-family: var(--font-display, inherit); font-size: 23px; font-weight: 800; box-shadow: 0 0 0 10px rgba(247, 181, 0, .16), 0 16px 32px -12px rgba(2, 36, 70, .6); animation: ageBadge 3.5s ease-in-out infinite; }
.age-modal__h { margin: 0 0 8px; font-size: 22px; line-height: 1.25; }
.age-modal__text { max-width: 380px; margin: 0 auto; color: var(--muted, #667085); font-size: 14.5px; line-height: 1.6; }
.age-zone { display: flex; gap: 12px; margin: 20px 0 4px; padding: 14px 16px; border-radius: 18px; text-align: left; background: rgba(2, 36, 70, .05); border: 1px solid rgba(2, 36, 70, .1); }
.age-zone__pin { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px; background: var(--navy, #022446); color: var(--yellow, #f7b500); }
.age-zone strong { display: block; font-size: 14.5px; line-height: 1.35; }
.age-zone p { margin: 4px 0 0; color: var(--muted, #667085); font-size: 13px; line-height: 1.5; }
.age-zone__zips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.age-zone__zips span { padding: 3px 9px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(2, 36, 70, .12); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.age-modal__submit { gap: 8px; margin-top: 20px; min-height: 56px; border-radius: 16px; font-size: 15.5px; box-shadow: 0 14px 30px -14px rgba(247, 181, 0, .9); }
.age-modal__deny { display: block; width: 100%; margin-top: 10px; padding: 12px; border: 0; border-radius: 14px; background: transparent; color: var(--muted, #667085); font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.age-modal__legal { margin: 14px 0 0; color: #98a2b3; font-size: 11.5px; line-height: 1.5; }
.age-modal__stop { display: grid; gap: 8px; padding: 12px 4px; }
.age-modal__stop-ic { font-size: 46px; line-height: 1; }
.age-modal__stop strong { font-size: 18px; }
.age-modal__stop p { margin: 0; color: var(--muted, #667085); font-size: 14px; line-height: 1.55; }
.age-modal__box.is-denied { background: #fff; }
@keyframes ageIn { from { opacity: 0; transform: translateY(26px) scale(.94); } }
@keyframes ageBadge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .age-modal__box, .age-modal__badge { animation: none; } }
@media (max-width: 600px) { .age-modal__box { padding: 28px 20px 22px; } .age-modal__badge { width: 88px; height: 88px; font-size: 20px; } .age-modal__h { font-size: 19px; } }


/* ------------------------------------------------------------------ espace client */
.hdr__account { position: relative; }
.hdr__account-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #fff; }
.mdr__account { display: flex; align-items: center; gap: 12px; margin: 0 16px 10px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(247,181,0,.16), rgba(247,181,0,.05)); border: 1px solid rgba(247,181,0,.4); color: inherit; text-decoration: none; }
.mdr__account span { flex: 1; display: grid; gap: 2px; }
.mdr__account small { color: var(--muted); font-size: 12px; }

/* connexion / inscription */
.acc-auth { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding-top: 34px; padding-bottom: 54px; }
.acc-auth__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(2,36,70,.06); font-size: 13px; font-weight: 700; }
.acc-auth h1 { margin: 16px 0 22px; font-size: clamp(26px, 4vw, 40px); line-height: 1.12; }
.acc-auth__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.acc-auth__list li { display: flex; gap: 12px; align-items: flex-start; }
.acc-auth__list li > svg { flex-shrink: 0; margin-top: 2px; color: var(--yellow, #f7b500); }
.acc-auth__list strong { display: block; font-size: 15px; }
.acc-auth__list span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.acc-card { padding: 28px; border-radius: 26px; background: #fff; box-shadow: 0 30px 60px -30px rgba(2,36,70,.45); border: 1px solid rgba(15,23,42,.07); }
.acc-tabs { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(15,23,42,.05); margin-bottom: 20px; }
.acc-tabs a { flex: 1; padding: 10px; border-radius: 10px; text-align: center; font-size: 14px; font-weight: 700; color: var(--muted); text-decoration: none; transition: background .2s, color .2s; }
.acc-tabs a.is-active { background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgba(2,36,70,.12); }
.acc-google { display: flex; justify-content: center; }
.acc-gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; width: 100%; max-width: 330px; min-height: 48px; padding: 0 20px; border: 1px solid #dadce0; border-radius: 999px; background: #fff; color: #3c4043; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
.acc-gbtn:hover { border-color: #c6c9cd; background: #f8f9fa; box-shadow: 0 2px 8px rgba(60, 64, 67, .15); }
.acc-gbtn:active { transform: scale(.985); }
.acc-gbtn__logo { flex-shrink: 0; width: 19px; height: 19px; }
.acc-gbtn.is-busy { opacity: .6; cursor: default; }
.acc-gbtn.is-busy span::after { content: "‚6"; }
.acc-or { position: relative; margin: 18px 0; text-align: center; }
.acc-or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(15,23,42,.1); }
.acc-or span { position: relative; padding: 0 12px; background: #fff; color: var(--muted); font-size: 12.5px; }
.acc-form { display: grid; gap: 14px; }
.acc-field { display: grid; gap: 6px; }
.acc-field > span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.acc-field input { height: 50px; padding: 0 14px; border: 1.5px solid rgba(15,23,42,.12); border-radius: 13px; font-size: 15px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.acc-field input:focus { outline: 0; border-color: var(--yellow, #f7b500); box-shadow: 0 0 0 4px rgba(247,181,0,.18); }
.acc-field--locked input { background: rgba(15,23,42,.04); color: var(--muted); }
.acc-check { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.acc-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--yellow, #f7b500); color: var(--ink); font-size: 15px; font-weight: 800; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.acc-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(247,181,0,.9); }
.acc-submit--inline { margin-top: 14px; text-decoration: none; }
.acc-hint { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
.acc-error { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 12px 14px; border-radius: 13px; background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; font-size: 13.5px; }

/* espace connecte */
.acc { padding-top: 26px; padding-bottom: 60px; }
.acc-flash { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 13px 16px; border-radius: 14px; background: #ecfdf5; border: 1px solid #6ee7b7; color: #047857; font-size: 14px; }
.acc-flash--error { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.acc-head { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 22px; background: linear-gradient(130deg, var(--navy, #022446), #0b3d73); color: #fff; }
.acc-avatar { display: grid; place-items: center; flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: var(--yellow, #f7b500); color: var(--ink); font-size: 22px; font-weight: 800; }
.acc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acc-head__text { flex: 1; min-width: 0; }
.acc-head__text h1 { margin: 0; font-size: 22px; }
.acc-head__text p { margin: 4px 0 0; opacity: .75; font-size: 13.5px; }
.acc-head__out button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.acc-nav { display: flex; gap: 8px; overflow-x: auto; margin: 18px 0 22px; padding-bottom: 4px; }
.acc-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; background: rgba(15,23,42,.05); color: inherit; text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.acc-nav a.is-active { background: var(--navy, #022446); color: #fff; }
.acc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; }
.acc-stats div { padding: 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(15,23,42,.08); box-shadow: 0 10px 24px -20px rgba(2,36,70,.6); }
.acc-stats span { display: block; color: var(--muted); font-size: 12.5px; }
.acc-stats strong { display: block; margin-top: 4px; font-size: 22px; font-family: var(--font-display, inherit); }
.acc-h2 { margin: 26px 0 14px; font-size: 19px; }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.acc-tile { display: grid; gap: 6px; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid rgba(15,23,42,.08); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.acc-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(2,36,70,.6); }
.acc-tile > svg { color: var(--yellow, #f7b500); }
.acc-tile strong { font-size: 15.5px; }
.acc-tile span { color: var(--muted); font-size: 13px; }
.acc-order { margin-bottom: 12px; padding: 16px 18px; border-radius: 20px; background: #fff; border: 1px solid rgba(15,23,42,.08); }
.acc-order--road { border-color: rgba(167,139,250,.55); box-shadow: 0 12px 30px -22px rgba(124,58,237,.8); }
.acc-order--done { border-color: rgba(52,211,153,.5); }
.acc-order--off { opacity: .72; }
.acc-order__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.acc-order__num { display: block; font-weight: 800; font-size: 15.5px; }
.acc-order__date { color: var(--muted); font-size: 12.5px; }
.acc-order__state { padding: 5px 12px; border-radius: 999px; background: rgba(2,36,70,.07); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.acc-order--road .acc-order__state { background: rgba(167,139,250,.18); color: #6d28d9; }
.acc-order--done .acc-order__state { background: rgba(16,185,129,.16); color: #047857; }
.acc-order__body { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--muted); font-size: 13.5px; }
.acc-order__total { color: var(--ink); font-size: 17px; font-weight: 800; }
.acc-order__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(15,23,42,.12); }
.acc-order__addr { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.acc-order__track { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 12px; background: var(--navy, #022446); color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 700; }
.acc-addresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 22px; }
.acc-address { position: relative; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid rgba(15,23,42,.08); }
.acc-address.is-default { border-color: rgba(247,181,0,.65); }
.acc-address__tag { position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(247,181,0,.18); font-size: 11.5px; font-weight: 700; }
.acc-address p { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.acc-address__phone { display: flex; align-items: center; gap: 6px; }
.acc-address__note { font-style: italic; }
.acc-address__actions { display: flex; gap: 14px; margin-top: 14px; }
.acc-address__actions a, .acc-address__actions button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; }
.acc-address__actions button:hover { color: #dc2626; }
.acc-form--card { max-width: 620px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid rgba(15,23,42,.08); }
.acc-form--card h3 { margin: 0 0 6px; font-size: 16.5px; }
.acc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acc-empty { display: grid; justify-items: center; gap: 8px; padding: 50px 20px; border-radius: 22px; background: #fff; border: 1px dashed rgba(15,23,42,.16); text-align: center; }
.acc-empty > svg { color: var(--muted); }
.acc-empty p { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .acc-auth { grid-template-columns: 1fr; gap: 26px; } .acc-auth__pitch { order: 2; } }
@media (max-width: 600px) { .acc-card { padding: 20px; } .acc-row { grid-template-columns: 1fr; } .acc-head { flex-wrap: wrap; } .acc-head__out { width: 100%; } .acc-head__out button { width: 100%; justify-content: center; } }
.acc-next { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 12px 14px; border-radius: 13px; background: rgba(247,181,0,.14); border: 1px solid rgba(247,181,0,.45); font-size: 13.5px; font-weight: 600; }

/* ------------------------------------------------------------------ bannières promo */
.promo-wrap { display: grid; gap: 10px; padding: 14px 16px 0; max-width: 1280px; margin: 0 auto; }
.promo { --c: #f7b500; --c2: #ffd45c; position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--c), var(--c2)); color: #10131c; text-decoration: none; box-shadow: 0 16px 34px -22px color-mix(in srgb, var(--c) 90%, transparent); animation: promoIn .55s cubic-bezier(.2, .85, .3, 1) both; }
.promo[data-color="green"]  { --c: #059669; --c2: #34d399; color: #fff; }
.promo[data-color="blue"]   { --c: #2563eb; --c2: #60a5fa; color: #fff; }
.promo[data-color="violet"] { --c: #7c3aed; --c2: #c4b5fd; color: #fff; }
.promo[data-color="red"]    { --c: #dc2626; --c2: #fca5a5; color: #fff; }
.promo::after { content: ""; position: absolute; top: -40%; left: -30%; width: 60%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); animation: promoShine 3.6s ease-in-out infinite; }
.promo__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.promo__body strong { display: block; font-size: 16.5px; line-height: 1.25; }
.promo__body p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; opacity: .88; }
.promo__code { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 9px; background: rgba(255, 255, 255, .34); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; }
.promo__cta { position: relative; z-index: 1; flex-shrink: 0; padding: 11px 16px; border-radius: 13px; background: rgba(0, 0, 0, .2); font-size: 13.5px; font-weight: 800; }
.promo__close { position: relative; z-index: 1; flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .14); color: inherit; cursor: pointer; font-size: 17px; line-height: 1; }
@keyframes promoIn { from { opacity: 0; transform: translateY(-14px); } }
@keyframes promoShine { 0%, 65% { left: -30%; } 100% { left: 130%; } }
@media (max-width: 600px) { .promo { flex-wrap: wrap; } .promo__cta { width: 100%; text-align: center; } }

/* ------------------------------------------------------------------ avis clients */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.stars__i { display: inline-flex; color: rgba(15, 23, 42, .2); }
.stars__i.is-on { color: #f7b500; }
.stars__i.is-half { color: #f7b500; opacity: .55; }
.rv-block { padding: 46px 16px 10px; }
.rv-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.rv-block h2 { margin: 0 0 6px; font-size: 24px; }
.rv-score { display: flex; align-items: center; gap: 10px; }
.rv-score b { font-size: 18px; }
.rv-score span { color: var(--muted); font-size: 13.5px; }
.rv-empty-note { margin: 0; color: var(--muted); font-size: 14px; }
.rv-open { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--yellow); color: var(--ink); font-size: 14px; font-weight: 800; cursor: pointer; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.rv-open:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -14px rgba(247, 181, 0, .9); }
.rv-form { display: grid; gap: 12px; margin-bottom: 22px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid rgba(15, 23, 42, .08); animation: rvIn .4s var(--ease) both; }
.rv-form__stars { display: flex; gap: 4px; }
.rv-form__stars button { padding: 2px; border: 0; background: none; color: rgba(15, 23, 42, .2); cursor: pointer; transition: transform .2s, color .2s; }
.rv-form__stars button.is-on { color: #f7b500; }
.rv-form__stars button:hover { transform: scale(1.15); }
.rv-form textarea { padding: 12px 14px; border: 1.5px solid rgba(15, 23, 42, .12); border-radius: 14px; font: inherit; font-size: 14.5px; resize: vertical; }
.rv-form textarea:focus { outline: 0; border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(247, 181, 0, .16); }
.rv-form__foot { display: flex; align-items: center; gap: 12px; }
.rv-send { height: 46px; padding: 0 20px; border: 0; border-radius: 14px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; }
.rv-note { margin: 0; color: var(--muted); font-size: 13.5px; }
.rv-items { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rv-item { padding: 18px; border-radius: 20px; background: #fff; border: 1px solid rgba(15, 23, 42, .08); }
.rv-item__head { display: flex; align-items: flex-start; gap: 12px; }
.rv-avatar { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--yellow); font-weight: 800; }
.rv-verified { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(16, 185, 129, .14); color: #047857; font-size: 11.5px; font-weight: 700; }
.rv-item__meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.rv-item p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; }
.rv-reply { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(2, 36, 70, .05); }
.rv-reply strong { font-size: 13px; }
.rv-reply p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
@keyframes rvIn { from { opacity: 0; transform: translateY(-10px); } }

/* Suppression du compte (exigence Google Play / RGPD) */
.acc-danger { margin-top: 18px; border: 1px solid rgba(229, 72, 77, .35) !important; }
.acc-danger h3 { color: #c62828; }
.acc-submit--danger { background: #e5484d; color: #fff; }