/* Beauteplus — feuille de style principale (mobile d'abord) */
:root {
  --coral: #F53F27;
  --fuchsia: #F5278E;
  --coral-deep: #D2301A;
  --coral-hover: #A82514;
  --fuchsia-deep: #C2186F;
  --ink: #2A1A2E;
  --ink-2: #6B5866;
  --ink-3: #7A6877;
  --bg: #FFF9F6;
  --petal: #FFE1EC;
  --petal-2: #FFEEF4;
  --peach: #FFF0EA;
  --peach-2: #FFEDE6;
  --line: #F6DED6;
  --soft: #FFF1EE;
  --green: #23845B;
  --green-ink: #1B6A49;
  --green-bg: #E9F4EE;
  --danger: #B42318;
  --radius: 20px;
  --gutter: clamp(16px, 4vw, 24px);
  --font-title: 'Sora', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 15px; padding-bottom: 72px; }
@media (min-width: 1024px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--coral-deep); }
a:hover { color: var(--coral-hover); }
h1, h2, h3 { font-family: var(--font-title); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(28px, 4vw, 42px); }
h2 { font-size: clamp(22px, 3vw, 32px); }
h3 { font-size: 17px; }
p { margin: 0 0 .8em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--fuchsia); outline-offset: 2px; border-radius: 6px; }
.icon { flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.muted { color: var(--ink-3); }
.hint { color: var(--ink-3); font-size: 13px; display: block; }
.center { text-align: center; }
.lead { font-size: clamp(16px, 1.6vw, 18px); color: var(--ink-2); max-width: 640px; }
.eyebrow { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--fuchsia-deep); font-weight: 500; margin: 0; }
.accent { color: var(--coral); }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barre d'annonce et en-tête */
.topbar { background: var(--ink); color: var(--bg); font-size: 13px; }
.topbar__inner { display: flex; justify-content: center; padding-top: 9px; padding-bottom: 9px; text-align: center; }
.topbar__inner span { display: inline-flex; align-items: center; gap: 8px; }
.topbar .icon { color: #F9A8CC; }
.header { background: var(--bg); border-top: 4px solid; border-image: linear-gradient(90deg, var(--coral), var(--fuchsia)) 1; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.header__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo icons" "search search"; gap: 12px; align-items: center; padding-top: 12px; padding-bottom: 10px; }
@media (min-width: 720px) { .header__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo search icons"; gap: 24px; padding-top: 16px; } }
.logo { grid-area: logo; font-family: var(--font-title); font-weight: 700; font-size: clamp(24px, 3vw, 28px); letter-spacing: -0.02em; color: var(--coral-deep); text-decoration: none; }
.logo span { color: var(--fuchsia); }
.logo--light { color: #fff; }
.logo--light span { color: #F9A8CC; }
.search { grid-area: search; position: relative; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 0 6px 0 16px; height: 48px; background: #fff; min-width: 0; }
.search__icon { color: var(--coral-deep); }
.search input, .search input:focus { border: 0 !important; outline: none; flex: 1; min-width: 0; min-height: 0 !important; height: 44px; padding: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 15px; }
.search:focus-within { border-color: var(--fuchsia-deep); box-shadow: 0 0 0 3px rgba(194, 24, 111, .15); }
body:has(.stickybuy) .fab-whatsapp { bottom: 150px; }
@media (min-width: 720px) { body:has(.stickybuy) .fab-whatsapp { bottom: 84px; } }
@media (min-width: 1024px) { body:has(.stickybuy) .fab-whatsapp { bottom: 24px; } }
.check > span { flex: 1; }
.search__go { flex: none; width: 38px; height: 38px; border-radius: 999px; border: 0; background: var(--petal); color: var(--fuchsia-deep); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.suggest { position: absolute; top: 54px; left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 30px rgba(42, 26, 46, .12); z-index: 40; }
.suggest a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.suggest a:hover, .suggest a[aria-selected="true"] { background: var(--petal-2); }
.header__icons { grid-area: icons; display: flex; gap: 2px; align-items: center; }
.iconbtn { position: relative; width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.iconbtn--primary { background: var(--coral-deep); color: var(--bg); }
.iconbtn--primary:hover { background: var(--coral-hover); color: #fff; }
.badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--fuchsia-deep); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 999px; background: var(--fuchsia-deep); border: 2px solid var(--bg); }
.chips { display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; padding-bottom: 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips--inline { padding-left: 0; padding-right: 0; margin-bottom: 20px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-size: 14px; }
.chip .icon { color: var(--coral-deep); }
.chip:hover, .chip.is-active { border-color: var(--coral-deep); color: var(--coral-deep); }
.chip--promo { background: var(--petal); border-color: var(--petal); color: var(--fuchsia-deep); font-weight: 600; }
.chip--promo .icon { color: var(--fuchsia-deep); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent; font-weight: 500; font-size: 16px; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s; text-align: center; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-loading { opacity: .65; pointer-events: none; }
.btn--primary { background: var(--coral-deep); color: var(--bg); }
.btn--primary:hover { background: var(--coral-hover); color: #fff; }
.btn--outline { border-color: var(--coral-deep); color: var(--coral-deep); background: transparent; }
.btn--outline:hover { background: var(--soft); }
.btn--ask { width: 100%; border-color: var(--fuchsia-deep); color: var(--fuchsia-deep); background: transparent; }
.btn--ask:hover { background: var(--petal-2); color: var(--fuchsia-deep); }
.btn--whatsapp { border-color: var(--green); color: var(--green-ink); background: transparent; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn--block { width: 100%; }
.btn--grow { flex: 1 1 220px; }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--coral-deep); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; min-height: 36px; }
.roundbtn { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--coral-deep); color: var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.roundbtn:hover { background: var(--coral-hover); color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions .btn { flex: 1 1 auto; max-width: 340px; }

/* Messages */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; margin: 16px 0 0; font-size: 15px; }
.alert--success { background: var(--green-bg); color: var(--green-ink); }
.alert--error { background: #FDECEA; color: var(--danger); }
.alert--info { background: var(--petal-2); color: var(--fuchsia-deep); }
.toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,.2); max-width: calc(100% - 32px); }
@media (min-width: 1024px) { .toast { bottom: 32px; } }
.form-error { color: var(--danger); font-size: 14px; margin: 0; }

/* Accueil */
.hero { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); align-items: center; padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(40px, 6vw, 72px); }
.hero__text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); }
.hero h1, .hero__title { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.05; letter-spacing: -0.03em; margin: 0; }
.hero__visual { flex: 1 1 420px; min-width: 0; position: relative; height: clamp(280px, 42vw, 540px); border-radius: clamp(20px, 3vw, 28px); background: var(--petal); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.blob { position: absolute; border-radius: 999px; opacity: .9; aspect-ratio: 1; }
.blob--fuchsia { top: 9%; right: 9%; width: 38%; background: var(--fuchsia); }
.blob--coral { bottom: -14%; left: -10%; width: 55%; background: var(--coral); }
.hero__art { position: relative; height: 78%; width: auto; }
.hero__img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.section { padding-bottom: clamp(48px, 7vw, 80px); }
.section__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: clamp(18px, 3vw, 28px); }
.section__head h2 { margin: 0; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; }
.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); }
@media (min-width: 960px) { .cats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } }
.cat { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.cat__circle { aspect-ratio: 1; border-radius: 999px; background: var(--petal); display: flex; align-items: center; justify-content: center; color: var(--coral-deep); overflow: hidden; transition: transform .2s; }
.cat__circle--peach { background: var(--peach-2); }
.cat__circle img { width: 100%; height: 100%; object-fit: cover; }
.cat:hover .cat__circle { transform: scale(1.03); }
.cat__name { text-align: center; font-weight: 500; font-size: clamp(13px, 1.4vw, 15px); line-height: 1.3; }

/* Cartes produit — style application mobile (grille dense, prix en avant, bouton pleine largeur) */
.grid-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
@media (min-width: 600px) { .grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; } }
@media (min-width: 960px) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; } .grid-products--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .grid-products--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; border-radius: 14px; background: var(--petal-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
@media (hover: hover) { .card:hover .card__media img { transform: scale(1.04); } }
.card__placeholder { color: var(--coral-deep); opacity: .5; display: flex; }
.card__tags { position: absolute; left: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .01em; color: #fff; }
.tag--sale { background: var(--fuchsia-deep); }
.tag--new { background: var(--ink); }
.card__fav { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2); }
.card__fav span { width: 34px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, .92); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(42, 26, 46, .12); transition: color .15s, transform .15s; }
.card__fav:hover span { color: var(--fuchsia-deep); }
.card__fav[aria-pressed="true"] span { color: var(--fuchsia-deep); }
.card__fav[aria-pressed="true"] svg, .pill.is-on svg { fill: currentColor; }
.card__fav:active span { transform: scale(.9); }
.card__body { display: flex; flex-direction: column; gap: 4px; padding: 8px 2px 0; flex: 1; min-width: 0; }
.card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 0; line-height: 1.25; }
.card__price strong { font-family: var(--font-title); font-size: clamp(16px, 1.6vw, 18px); font-weight: 700; color: var(--coral-deep); white-space: nowrap; letter-spacing: -.01em; }
.card__price strong small { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--ink-3); }
.card__price s { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.card__title { margin: 0; font-family: var(--font-body); font-size: 13.5px; font-weight: 400; line-height: 1.35; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--coral-deep); }
.card__brand { font-weight: 600; }
.card__meta { display: flex; align-items: center; gap: 6px; margin: 0; min-height: 20px; font-size: 12px; color: var(--ink-3); }
.card__rating { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); font-weight: 600; }
.card__rating .icon { color: #E8A317; fill: currentColor; }
.card__ask { display: inline-flex; align-items: center; gap: 4px; color: var(--fuchsia-deep); text-decoration: none; font-size: 12px; font-weight: 500; }
.card__buy { margin: 0; }
.card__btn { margin-top: 6px; width: 100%; height: 38px; border: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--coral-deep); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; }
.card__btn:hover { background: var(--coral-hover); color: #fff; }
.card__btn:active { transform: scale(.98); }
.card__btn--alt { background: var(--petal); color: var(--fuchsia-deep); }
.card__btn--alt:hover { background: #FFD3E4; color: var(--fuchsia-deep); }
.card__btn.is-loading { opacity: .7; }
.card .card__body { margin-top: auto; }
.badge-promo { position: absolute; left: 12px; top: 12px; background: var(--fuchsia-deep); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 8px; z-index: 1; }
.badge-promo[hidden] { display: none; }

/* Bandeau promo, engagements */
.promo-band { background: var(--petal); margin-bottom: clamp(48px, 7vw, 80px); }
.promo-band__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: clamp(32px, 5vw, 52px); padding-bottom: clamp(32px, 5vw, 52px); }
.promo-band__inner > div { flex: 1 1 320px; min-width: 0; }
.promo-band h2 { margin: 6px 0; }
.promo-band__icon { flex: none; width: 56px; height: 56px; border-radius: 999px; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--fuchsia-deep); }
.perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(20px, 3vw, 32px); padding-bottom: clamp(48px, 7vw, 72px); }
.perk { display: flex; gap: 16px; align-items: flex-start; }
.perk h3 { margin: 0 0 4px; }
.perk p { margin: 0; font-size: 14px; color: var(--ink-2); }
.perk__icon { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--peach-2); color: var(--coral-deep); display: flex; align-items: center; justify-content: center; }
.perk__icon--green { background: var(--green-bg); color: var(--green); }
.perk__icon--pink { background: var(--petal); color: var(--fuchsia-deep); }

/* Carte et boutique */
.store { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 28px); padding-bottom: clamp(56px, 7vw, 88px); }
.store__map { flex: 999 1 520px; min-width: 0; height: clamp(260px, 38vw, 420px); border-radius: clamp(18px, 2.5vw, 24px); background: var(--peach-2); overflow: hidden; }
.store__map iframe { width: 100%; height: 100%; border: 0; }
.store__placeholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--coral-deep); text-align: center; padding: 20px; }
.store__placeholder p { margin: 0; font-weight: 600; }
.store__placeholder small { color: var(--ink-3); }
.store__info { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.infoline { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.infoline .icon { color: var(--coral-deep); margin-top: 1px; }

/* Pages internes */
.page { padding-top: clamp(20px, 3vw, 32px); padding-bottom: clamp(40px, 6vw, 72px); }
.narrow { max-width: 860px; }
.page__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.crumbs a { color: var(--ink-3); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.crumbs a:hover { color: var(--coral-deep); }
.empty { text-align: center; padding: clamp(32px, 6vw, 64px) 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-2); }
.empty .icon { color: var(--coral-deep); opacity: .7; }
.errcode { font-family: var(--font-title); font-size: 64px; font-weight: 700; color: var(--coral); line-height: 1; }
.prose p, .prose li { font-size: 16px; line-height: 1.7; }

/* Catalogue et filtres */
.catalog { display: grid; gap: 24px; }
@media (min-width: 960px) { .catalog { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } .filters { position: sticky; top: 150px; } }
.filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 18px; }
.filters summary { display: flex; align-items: center; gap: 8px; font-weight: 600; min-height: 52px; cursor: pointer; list-style: none; }
.filters summary::-webkit-details-marker { display: none; }
.filters__form { display: flex; flex-direction: column; gap: 8px; padding-bottom: 18px; }
.pricerange { border: 0; padding: 0; margin: 4px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pricerange legend { font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.link-reset { font-size: 14px; text-align: center; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 32px; }
.pagination a { min-width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); background: #fff; }
.pagination a[aria-current] { background: var(--coral-deep); color: #fff; border-color: var(--coral-deep); }

/* Formulaires */
label { font-size: 14px; font-weight: 500; display: block; margin: 10px 0 6px; }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 15px; }
textarea { min-height: 0; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--fuchsia-deep); box-shadow: 0 0 0 3px rgba(194, 24, 111, .15); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 12px 0; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--coral-deep); flex: none; }
.stack { display: flex; flex-direction: column; }
.stack > .btn { margin-top: 16px; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
.row2 > * { min-width: 0; }
@media (min-width: 560px) { .row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .row2 .row2__small:only-child { grid-column: span 1; } }
.inline { display: flex; gap: 8px; align-items: stretch; }
.inline input { flex: 1; min-width: 0; }
.formcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); margin-bottom: 20px; }
.formcard h2 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.formcard > .btn { margin-top: 16px; }
.auth { max-width: 480px; }
.danger summary { cursor: pointer; color: var(--danger); font-weight: 600; }
.stepnum { width: 30px; height: 30px; border-radius: 999px; background: var(--petal); color: var(--fuchsia-deep); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); }

/* Fiche produit */
.product { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 56px); margin-bottom: 48px; }
.gallery { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.gallery__main { position: relative; aspect-ratio: 1; border-radius: clamp(20px, 3vw, 28px); background: var(--petal-2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.thumb { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); background: var(--peach); padding: 0; overflow: hidden; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border: 2px solid var(--coral-deep); }
.pinfo { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pinfo h1 { margin: 6px 0; }
.pinfo__meta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pinfo__desc { color: var(--ink-2); margin: 0; }
.rating { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-3); text-decoration: none; }
.stars { display: inline-flex; color: var(--line); }
.stars .on { color: #E8A317; }
.stars .on svg { fill: currentColor; }
.pprice { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pprice__now { font-size: clamp(26px, 3vw, 32px); font-weight: 600; color: var(--coral-deep); }
.pprice__was { color: var(--ink-3); font-size: 17px; }
.buy { display: flex; flex-direction: column; gap: 16px; }
.variants { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.variants legend { font-size: 14px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.variant input { position: absolute; opacity: 0; }
.variant span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.variant input:checked + span { border: 2px solid var(--coral-deep); background: var(--petal-2); color: var(--coral-deep); font-weight: 600; }
.variant input:focus-visible + span { outline: 3px solid var(--fuchsia); outline-offset: 2px; }
.variant { margin: 0; font-weight: 400; }
.confirm { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--green-bg); color: var(--green-ink); font-size: 14px; }
.confirm .icon { color: var(--green); }
.buy__row { display: flex; gap: 12px; flex-wrap: wrap; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; height: 54px; background: #fff; }
.qty button { width: 46px; height: 52px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qty input { width: 44px !important; min-height: 0 !important; height: 40px; border: 0 !important; padding: 0 !important; text-align: center; font-weight: 600; box-shadow: none !important; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty--sm { height: 44px; width: fit-content; margin-top: 8px; }
.qty--sm button { width: 40px; height: 42px; }
.qty--sm span { min-width: 24px; text-align: center; font-weight: 600; }
.out { display: flex; align-items: center; gap: 8px; color: var(--danger); margin: 0; }
.social { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 14px; cursor: pointer; color: var(--ink); text-decoration: none; }
.pill .icon { color: var(--coral-deep); }
.pill.is-on { border-color: var(--fuchsia-deep); color: var(--fuchsia-deep); }
.pill.is-on .icon { color: var(--fuchsia-deep); }
.infolist { margin: 0; padding: 16px; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--ink-2); background: var(--soft); border-radius: 16px; }
.infolist li { display: flex; gap: 12px; align-items: center; }
.infolist .icon { color: var(--coral-deep); }
.tabs { margin-bottom: 48px; }
.tabs__list { display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.tabs__list button { flex: none; min-height: 48px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 15px; color: var(--ink-2); cursor: pointer; padding: 0; }
.tabs__list button[aria-selected="true"] { border-color: var(--coral-deep); color: var(--coral-deep); font-weight: 600; }
.tabs__panel { padding: 18px 0; max-width: 760px; color: var(--ink-2); line-height: 1.7; }
.reviews { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); margin-bottom: 48px; }
.reviews__intro { flex: 1 1 280px; min-width: 0; }
.reviews__body { flex: 2 1 480px; min-width: 0; }
.verified { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--green-ink); background: var(--green-bg); padding: 4px 10px; border-radius: 999px; }
.comments__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin: 12px 0; }
.sort { display: flex; gap: 12px; font-size: 14px; }
.sort a[aria-current] { font-weight: 600; }
.comment { border-bottom: 1px solid var(--line); padding: 16px 0; }
.comment header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; font-size: 14px; }
.comment time { color: var(--ink-3); font-size: 13px; }
.comment p { margin: 0; }
.reply { margin: 12px 0 0 clamp(12px, 3vw, 28px); padding: 12px 14px; background: var(--soft); border-radius: 14px; }
.comment__actions { margin-top: 6px; }
.stars--sm { color: var(--line); }
.rate { border: 0; padding: 0; margin: 0 0 8px; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rate legend { width: 100%; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.rate input { position: absolute; opacity: 0; }
.rate label { margin: 0; cursor: pointer; color: var(--line); padding: 4px; }
.rate input:checked ~ label, .rate label:hover, .rate label:hover ~ label { color: #E8A317; }
.rate input:checked ~ label svg { fill: currentColor; }
.stickybuy { display: none; }
@media (max-width: 719px) {
  .stickybuy { display: flex; position: fixed; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); padding: 10px 16px; background: var(--bg); border-top: 1px solid var(--line); align-items: center; gap: 12px; z-index: 25; box-shadow: 0 -6px 18px rgba(42,26,46,.08); }
  .stickybuy div { display: flex; flex-direction: column; font-size: 12px; }
  .stickybuy strong { color: var(--coral-deep); font-size: 16px; white-space: nowrap; }
  .product-page { padding-bottom: 96px; }
}

/* Fenêtres */
.dialog { width: min(520px, calc(100% - 24px)); border: 0; border-radius: 24px; padding: 28px clamp(18px, 4vw, 28px); background: var(--bg); color: var(--ink); max-height: calc(100vh - 32px); overflow: auto; }
.dialog::backdrop { background: rgba(42, 26, 46, .55); }
@media (max-width: 559px) { .dialog { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 24px 24px 0 0; } }
.dialog__close { position: absolute; right: 14px; top: 14px; }
.dialog__close button { width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--soft); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dialog h2 { padding-right: 48px; font-size: 24px; }
.mini { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--soft); margin: 12px 0 4px; }
.mini img, .mini > .icon { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--petal-2); color: var(--coral-deep); padding: 0; }
.mini div { display: flex; flex-direction: column; }
.done-icon { width: 64px; height: 64px; border-radius: 999px; background: var(--green-bg); color: var(--green); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.done-icon--wait { background: var(--petal); color: var(--fuchsia-deep); }
.done-icon--off { background: #FDECEA; color: var(--danger); }
.steps { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 12px; }
.steps li { display: flex; gap: 12px; align-items: center; color: var(--ink-3); }
.steps li::before { content: ""; width: 12px; height: 12px; border-radius: 999px; border: 2px solid var(--line); }
.steps li.is-on { color: var(--ink); font-weight: 600; }
.steps li.is-on::before { background: var(--coral-deep); border-color: var(--coral-deep); }
.sharegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.sharegrid a, .sharegrid button { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; cursor: pointer; font-size: 15px; }
.sharegrid .icon { color: var(--coral-deep); }

/* Panier et commande */
.cartlayout, .checkout { display: grid; gap: 24px; }
@media (min-width: 960px) { .cartlayout, .checkout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } .summary { position: sticky; top: 150px; } }
.cartline { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.cartline.has-issue { background: #FFF6F5; }
.cartline__img { width: 84px; height: 84px; border-radius: 14px; background: var(--petal-2); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--coral-deep); }
.cartline__img img { width: 100%; height: 100%; object-fit: cover; }
.cartline__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cartline__info a { color: var(--ink); text-decoration: none; }
.cartline__end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
@media (max-width: 479px) {
  .cartline { grid-template-columns: 72px minmax(0, 1fr); gap: 10px 12px; }
  .cartline__img { width: 72px; height: 72px; }
  .cartline__end { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}
.summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 3vw, 24px); display: flex; flex-direction: column; gap: 14px; }
.summary h2 { font-size: 20px; margin: 0; }
.totals { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.totals div { display: flex; justify-content: space-between; gap: 12px; }
.totals dt { color: var(--ink-2); }
.totals dd { margin: 0; font-weight: 500; text-align: right; }
.totals .discount dd { color: var(--fuchsia-deep); }
.totals .total { border-top: 1px solid var(--line); padding-top: 12px; font-size: 17px; }
.totals .total dt { color: var(--ink); font-weight: 600; }
.totals .total dd { color: var(--coral-deep); font-weight: 700; }
.minilist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.minilist li { display: flex; justify-content: space-between; gap: 12px; }
.choices { display: grid; gap: 10px; }
@media (min-width: 560px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice { margin: 0; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; min-height: 72px; }
.choice .icon { grid-row: span 2; color: var(--coral-deep); }
.choice small { color: var(--ink-3); font-weight: 400; }
.choice input:checked + span { border: 2px solid var(--coral-deep); background: var(--petal-2); }
.choice input:focus-visible + span { outline: 3px solid var(--fuchsia); outline-offset: 2px; }
.choice.is-disabled { opacity: .55; cursor: not-allowed; }
.orderhead { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; }
.ordergrid { display: grid; gap: 0 20px; }
@media (min-width: 760px) { .ordergrid { grid-template-columns: 1fr 1fr; } }
.tracker { list-style: none; padding: 0; margin: 0 0 24px; display: flex; gap: 4px; overflow-x: auto; }
.tracker li { flex: 1 1 0; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; color: var(--ink-3); position: relative; }
.tracker li span { width: 30px; height: 30px; border-radius: 999px; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; color: transparent; background: #fff; }
.tracker li.is-done span { background: var(--green); border-color: var(--green); color: #fff; }
.tracker li.is-current { color: var(--ink); font-weight: 600; }
.timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.timeline li { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.timeline time { color: var(--ink-3); min-width: 130px; }
.sandbox { background: #fff; border: 2px dashed var(--fuchsia-deep); border-radius: var(--radius); padding: 28px; }
.sandbox__tag { display: inline-block; background: var(--petal); color: var(--fuchsia-deep); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 999px; margin-bottom: 12px; }

/* Espace client */
.account__grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .account__grid { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.accnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 900px) { .accnav { flex-direction: column; position: sticky; top: 150px; } }
.accnav a, .accnav button { flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; color: var(--ink); text-decoration: none; background: transparent; border: 0; cursor: pointer; font-size: 15px; white-space: nowrap; width: 100%; }
.accnav a[aria-current] { background: var(--petal-2); color: var(--coral-deep); font-weight: 600; }
.accnav .icon { color: var(--coral-deep); }
.accnav .count { margin-left: auto; background: var(--fuchsia-deep); color: #fff; border-radius: 999px; font-size: 12px; padding: 0 7px; }
.rowlink { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
a.rowlink.formcard { padding: 18px; margin-bottom: 12px; }
.status { display: inline-block; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--petal-2); color: var(--fuchsia-deep); }
.status--ok { background: var(--green-bg); color: var(--green-ink); }
.status--off { background: #FDECEA; color: var(--danger); }
.status--wait { background: var(--peach); color: var(--coral-deep); }
.reqcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.reqcard header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.reqcard header > div { display: flex; flex-direction: column; }
.reqcard header a { color: var(--ink); }
.answer { display: flex; gap: 10px; align-items: flex-start; background: var(--soft); padding: 12px; border-radius: 12px; }
.answer .icon { color: var(--green); }
.notif { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 12px 0; }
.notif.is-unread { border-left: 4px solid var(--fuchsia-deep); }
.notif p { margin: 6px 0; color: var(--ink-2); }
.notif footer { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
.notif footer a { display: inline-flex; align-items: center; gap: 4px; }
.addr { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }

/* Pied de page */
.footer { background: var(--ink); color: var(--line); margin-top: 24px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: clamp(40px, 6vw, 56px); padding-bottom: 28px; font-size: 14px; line-height: 1.9; }
@media (min-width: 560px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer h2 { font-family: var(--font-body); font-size: 15px; color: #fff; letter-spacing: 0; margin-bottom: 6px; }
.footer a { color: var(--line); display: block; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer p { margin: 0; }
.footer .logo { display: inline-block; margin-bottom: 8px; font-size: 24px; }
.socials { display: flex; gap: 8px; margin-top: 12px; }
.socials a { width: 44px; height: 44px; border-radius: 999px; border: 1px solid #43304A; display: flex; align-items: center; justify-content: center; }
.paylogos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.paylogos span { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #43304A; border-radius: 10px; padding: 6px 12px; font-size: 13px; line-height: 1.4; }
.paylogos .icon { color: #F9A8CC; }
.muted-light { color: #CDB8C6; font-size: 13px; line-height: 1.5; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; padding-bottom: 28px; border-top: 1px solid #43304A; font-size: 13px; color: #CDB8C6; }
.footer__bottom a { display: inline; color: #CDB8C6; }

/* WhatsApp flottant et navigation mobile */
.fab-whatsapp { position: fixed; right: 16px; bottom: 84px; width: 56px; height: 56px; border-radius: 999px; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(42, 26, 46, .2); z-index: 26; }
.fab-whatsapp:hover { color: #fff; background: var(--green-ink); }
.product-page ~ .fab-whatsapp { bottom: 150px; }
@media (min-width: 1024px) { .fab-whatsapp { bottom: 24px; right: 24px; } }



/* ===== Navigation : en-tête, menu principal (ordinateur), tiroir et barre d'onglets (mobile) ===== */
.header__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "burger logo icons" "search search search"; }
.header__burger { grid-area: burger; margin-left: -8px; }
.header .logo { justify-self: start; }
.hide-mobile { display: none !important; }
@media (min-width: 720px) {
  .header__row { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "burger logo search icons"; }
}
@media (max-width: 1023px) {
  .chips { display: none !important; }
  .header__row { gap: 8px 10px; padding-top: 8px; padding-bottom: 10px; }
  .search { height: 40px; padding: 0 4px 0 12px; gap: 8px; border-radius: 12px; background: var(--soft); border-color: transparent; }
  .search input, .search input:focus { height: 36px; font-size: 14px; }
  .search .search__icon { width: 16px; height: 16px; }
  .search__go { width: 32px; height: 32px; border-radius: 10px; }
  .suggest { top: 46px; }
  .header .logo { font-size: 23px; }
  .header .iconbtn { width: 40px; height: 40px; }
}
@media (min-width: 1024px) {
  .header__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo search icons"; padding-bottom: 14px; }
  .header__burger, .chips { display: none !important; }
  .hide-mobile { display: flex !important; }
}
.iconbtn--labeled { width: auto; padding: 0 12px; gap: 8px; font-size: 14px; font-weight: 500; text-decoration: none; border-radius: 999px; }
.iconbtn--labeled:hover { background: var(--petal-2); color: var(--coral-deep); }
.iconbtn--labeled .dot { top: 8px; right: auto; left: 28px; }
.iconbtn:hover { color: var(--coral-deep); }
.iconbtn--primary:hover { color: #fff; }

.mainnav { display: none; border-top: 1px solid var(--line); background: #fff; }
@media (min-width: 1024px) { .mainnav { display: block; } }
.mainnav__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mainnav__list { display: flex; align-items: stretch; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mainnav__link { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; border: 0; background: none; cursor: pointer; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
.mainnav__link .icon { color: var(--coral-deep); }
.mainnav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--coral), var(--fuchsia)); transform: scaleX(0); transition: transform .2s; }
.mainnav__link:hover, .mainnav__link[aria-current], .mainnav__link[data-current], .mainnav__link[aria-expanded="true"] { color: var(--coral-deep); }
.mainnav__link:hover::after, .mainnav__link[aria-current]::after, .mainnav__link[data-current]::after, .mainnav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.mainnav__link--promo, .mainnav__link--promo .icon { color: var(--fuchsia-deep); }
.mainnav__caret { transition: transform .2s; color: var(--ink-3) !important; }
.mainnav__link[aria-expanded="true"] .mainnav__caret { transform: rotate(180deg); }
.mainnav__wa { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--green-ink); text-decoration: none; padding: 8px 14px; border-radius: 999px; background: var(--green-bg); white-space: nowrap; }
.mainnav__wa:hover { color: var(--green-ink); background: #DCEFE4; }
@media (max-width: 1399px) { .mainnav__wa { display: none; } }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 24px 40px rgba(42, 26, 46, .14); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 35; }
.mainnav__mega.is-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega__inner { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; padding-top: 28px; padding-bottom: 32px; }
.mega__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 28px; }
.mega__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mega__cat { display: flex; align-items: center; gap: 12px; font-family: var(--font-title); font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; margin-bottom: 4px; }
.mega__cat:hover { color: var(--coral-deep); }
.mega__ico { flex: none; width: 42px; height: 42px; border-radius: 14px; background: var(--petal-2); color: var(--coral-deep); display: flex; align-items: center; justify-content: center; }
.mega__col:nth-child(even) .mega__ico { background: var(--peach); }
.mega__sub { padding: 3px 0 3px 54px; color: var(--ink-2); font-size: 14px; text-decoration: none; }
.mega__sub:hover { color: var(--coral-deep); }
.mega__aside { display: flex; flex-direction: column; gap: 12px; }
.mega__promo { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 22px; border-radius: 20px; color: #fff; text-decoration: none; background: linear-gradient(140deg, var(--coral-deep), var(--fuchsia-deep)); }
.mega__promo:hover { color: #fff; filter: brightness(1.05); }
.mega__promo strong { font-family: var(--font-title); font-size: 22px; }
.mega__promo span { font-size: 14px; opacity: .95; }
.mega__all { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); text-decoration: none; font-weight: 600; }

/* Tiroir mobile (dialog natif : focus piégé et touche Échap gérés par le navigateur) */
.drawer { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(88vw, 380px); max-width: none; height: 100%; max-height: none; padding: 0; border: 0; background: var(--bg); color: var(--ink); box-shadow: 20px 0 60px rgba(42, 26, 46, .25); transform: translateX(-100%); transition: transform .25s ease, overlay .25s allow-discrete, display .25s allow-discrete; }
.drawer[open] { transform: none; }
@starting-style { .drawer[open] { transform: translateX(-100%); } }
.drawer::backdrop { background: rgba(42, 26, 46, .45); backdrop-filter: blur(2px); }
.drawer__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px 20px; background: var(--bg); border-top: 4px solid; border-image: linear-gradient(90deg, var(--coral), var(--fuchsia)) 1; border-bottom: 1px solid var(--line); z-index: 1; }
.drawer__body { padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.drawer__user { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.drawer__user > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.drawer__user small { color: var(--ink-3); }
.drawer__avatar { width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; background: linear-gradient(140deg, var(--coral), var(--fuchsia)); }
.drawer__auth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer__auth .btn { padding: 0 12px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 12.5px; font-weight: 500; text-align: center; line-height: 1.25; }
.tile[aria-current] { border-color: var(--coral-deep); color: var(--coral-deep); }
.tile__ico { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--petal); color: var(--fuchsia-deep); }
.tile--1 .tile__ico { background: var(--peach-2); color: var(--coral-deep); }
.tile--2 .tile__ico { background: #F1E8FA; color: #6B3FA0; }
.drawer__title { font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 10px 4px 0; font-weight: 600; }
.drawer__list { list-style: none; margin: 0; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.drawer__list li + li { border-top: 1px solid var(--soft); }
.drawer__list a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; color: var(--ink); text-decoration: none; font-size: 15px; }
.drawer__list a[aria-current] { color: var(--coral-deep); font-weight: 600; }
.drawer__ico { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--petal-2); color: var(--coral-deep); display: flex; align-items: center; justify-content: center; }
.drawer__ico--green { background: var(--green-bg); color: var(--green); }
.drawer__chev { margin-left: auto; color: var(--ink-3); }
.drawer__count { margin-left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--fuchsia-deep); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.drawer__logout { padding: 4px 8px; }
html:has(.drawer[open]) { overflow: hidden; }

/* Barre d'onglets façon application */
.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(66px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom); background: rgba(255, 249, 246, .96); backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); z-index: 27; box-shadow: 0 -8px 24px rgba(42, 26, 46, .07); }
.bottomnav a, .bottomnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--ink-2); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.bottomnav__ico { position: relative; width: 52px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.bottomnav [aria-current] { color: var(--coral-deep); font-weight: 600; }
.bottomnav [aria-current] .bottomnav__ico { background: var(--petal); }
.bottomnav .badge { top: -4px; right: 6px; }
.bottomnav .dot { top: 3px; right: 14px; }
@media (min-width: 1024px) { .bottomnav { display: none; } }
body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { body { padding-bottom: 0; } }

/* ===== Accueil : carrousel plein écran des 5 dernières publications ===== */
.hc { position: relative; overflow: hidden; background: var(--ink); }
.hc__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.hc__track::-webkit-scrollbar { display: none; }
.hc__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; min-height: clamp(560px, 82vh, 680px); display: flex; overflow: hidden; color: #fff; isolation: isolate; }
@media (min-width: 900px) { .hc__slide { min-height: clamp(460px, 64vh, 620px); } }
.hc__slide--0 { background: linear-gradient(125deg, #B8240F 0%, var(--coral-deep) 38%, var(--fuchsia-deep) 100%); }
.hc__slide--1 { background: linear-gradient(125deg, var(--ink) 0%, #4A1D45 55%, #8C1659 100%); }
.hc__slide--2 { background: linear-gradient(125deg, #9E1A5E 0%, var(--fuchsia-deep) 45%, #D2301A 100%); }
.hc__bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none; object-fit: cover; filter: blur(38px) saturate(1.2); opacity: .32; mix-blend-mode: soft-light; z-index: -1; }
.hc__glow { position: absolute; border-radius: 999px; z-index: -1; pointer-events: none; }
.hc__glow--a { width: 46vw; max-width: 620px; aspect-ratio: 1; right: -8vw; top: -18%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); }
.hc__glow--b { width: 36vw; max-width: 480px; aspect-ratio: 1; left: -10vw; bottom: -30%; background: radial-gradient(circle, rgba(249, 168, 204, .35), transparent 65%); }
.hc__inner { position: relative; width: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 22px; padding-top: 26px; padding-bottom: 96px; }
@media (min-width: 900px) { .hc__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(32px, 5vw, 72px); padding-top: 48px; padding-bottom: 104px; } }
.hc__text { display: flex; flex-direction: column; gap: 12px; max-width: 600px; min-width: 0; }
.hc__eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.hc__title { margin: 0; font-size: clamp(30px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 700; }
.hc__title a { color: #fff; text-decoration: none; }
.hc__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hc__brand { margin: 0; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #FFD9E8; }
.hc__desc { margin: 0; font-size: clamp(15px, 1.5vw, 17px); color: rgba(255, 255, 255, .92); max-width: 52ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hc__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 0; }
.hc__price strong { font-family: var(--font-title); font-size: clamp(24px, 2.8vw, 32px); }
.hc__price s { color: rgba(255, 255, 255, .78); }
.hc__from { font-size: 14px; color: rgba(255, 255, 255, .85); }
.hc__off { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fff; color: var(--fuchsia-deep); }
.hc__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.hc__btn { background: #fff; color: var(--coral-deep); min-height: 50px; font-weight: 600; }
.hc__btn:hover { background: var(--petal-2); color: var(--coral-hover); }
.hc__btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.hc__btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.hc__media { position: relative; flex: none; align-self: center; width: min(62vw, 300px); aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: rgba(255, 255, 255, .12); box-shadow: 0 30px 60px rgba(20, 6, 18, .35); transform: rotate(2deg); transition: transform .5s; }
@media (min-width: 900px) { .hc__media { width: clamp(300px, 32vw, 440px); margin-right: clamp(0px, 3vw, 40px); } }
.hc__slide:nth-child(even) .hc__media { transform: rotate(-2deg); }
.hc__media img { width: 100%; height: 100%; object-fit: cover; }
.hc__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .7); }
.hc__controls { position: absolute; left: 0; right: 0; bottom: 22px; pointer-events: none; }
.hc__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hc__dots, .hc__arrows { display: flex; align-items: center; gap: 6px; pointer-events: auto; }
.hc__dot { width: 34px; height: 34px; border: 0; padding: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hc__dot span { position: relative; width: 10px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .45); overflow: hidden; transition: width .3s, background .3s; }
.hc__dot[aria-current] span { width: 34px; background: rgba(255, 255, 255, .35); }
.hc__dot[aria-current] span::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: hcprogress var(--hc-delay, 6s) linear forwards; }
.hc.is-paused .hc__dot[aria-current] span::after { animation-play-state: paused; }
@keyframes hcprogress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hc__arrow { width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(6px); }
.hc__arrow:hover { background: rgba(255, 255, 255, .26); }
.hc__arrow .is-play, .hc.is-paused .hc__arrow .is-pause { display: none; }
.hc.is-paused .hc__arrow .is-play { display: block; }
@media (max-width: 599px) { .hc__arrows [data-carousel-prev], .hc__arrows [data-carousel-next] { display: none; } }

.trust { display: flex; gap: 10px 28px; overflow-x: auto; scrollbar-width: none; padding-top: 18px; padding-bottom: 18px; margin-bottom: clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.trust::-webkit-scrollbar { display: none; }
.trust span { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.trust .icon { color: var(--green); }
@media (min-width: 1100px) { .trust { justify-content: space-between; } }

/* Rangées de produits par catégorie */
.section__head h2 { display: inline-flex; align-items: center; gap: 12px; }
.section__ico { flex: none; width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--petal); color: var(--fuchsia-deep); }
.rail:nth-of-type(even) .section__ico { background: var(--peach-2); color: var(--coral-deep); }
.rail .section__head { align-items: center; margin-bottom: 8px; }
.rail__intro { color: var(--ink-2); margin: 0 auto 16px; font-size: 14px; }
.rail__tools { display: flex; align-items: center; gap: 8px; }
.rail__tools .more { margin-right: 6px; }
.rail__btn { display: none; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.rail__btn:hover:not(:disabled) { border-color: var(--coral-deep); color: var(--coral-deep); }
.rail__btn:disabled { opacity: .4; cursor: default; }
@media (min-width: 900px) { .rail__btn { display: inline-flex; } }
.rail__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; padding: 4px var(--gutter) 6px; }
.rail__track .rail__item:nth-child(n+7) { display: none; }
.rail__more { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px var(--gutter) 0; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.rail__more:hover { border-color: var(--coral-deep); color: var(--coral-deep); }
@media (min-width: 600px) {
  .rail__track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gutter) - 2 * 18px) / 3.2); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: 10px; scrollbar-width: none; }
  .rail__track .rail__item:nth-child(n+7) { display: flex; }
  .rail__more { display: none; }
}
.rail__track::-webkit-scrollbar { display: none; }
@media (min-width: 960px) { .rail__track { grid-auto-columns: calc((100% - 2 * var(--gutter) - 3 * 24px) / 4); gap: 24px; } }
@media (min-width: 1240px) { .rail__track { padding-inline: calc((100% - 1240px) / 2 + var(--gutter)); scroll-padding-inline: calc((100% - 1240px) / 2 + var(--gutter)); grid-auto-columns: calc((1240px - 2 * var(--gutter) - 3 * 24px) / 4); } }
.rail__item { scroll-snap-align: start; min-width: 0; display: flex; }
.rail__item .card { width: 100%; }

/* Avis clients */
.testimonials { background: linear-gradient(180deg, var(--bg), var(--petal-2)); padding: clamp(40px, 6vw, 72px) 0; margin-bottom: clamp(40px, 6vw, 72px); }
.testimonials__grid { display: grid; gap: 20px; }
@media (min-width: 960px) { .testimonials__grid { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } }
.testimonials__list { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.testimonials__list::-webkit-scrollbar { display: none; }
.testimonials__list > * { scroll-snap-align: start; }
@media (min-width: 960px) { .testimonials__list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } }
@media (min-width: 1180px) { .testimonials__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.score { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.score__value { font-family: var(--font-title); font-size: 52px; font-weight: 700; line-height: 1; color: var(--ink); }
.score__value small { font-size: 20px; color: var(--ink-3); font-weight: 500; }
.score p { margin: 0; color: var(--ink-2); font-size: 14px; }
.score .stars .icon { width: 22px; height: 22px; }
.score--empty { flex-direction: row; align-items: flex-start; gap: 16px; }
.score--empty h3 { margin: 0 0 4px; }
.score__icon { flex: none; width: 56px; height: 56px; border-radius: 18px; background: var(--green-bg); color: var(--green); display: flex; align-items: center; justify-content: center; }
.score--side { position: sticky; top: 170px; }
.rcard { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(42, 26, 46, .05); min-width: 0; }
.rcard__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rcard__avatar { flex: none; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(140deg, var(--coral), var(--fuchsia)); }
.rcard__who { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 14px; }
.rcard__body { position: relative; margin: 0; padding-left: 30px; color: var(--ink); font-size: 15px; }
.rcard__body p { margin: 0; }
.rcard__quote { position: absolute; left: 0; top: 0; color: var(--fuchsia); opacity: .5; }
.rcard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--soft); font-size: 13px; color: var(--ink-3); }
.rcard__product { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.rcard__product span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcard__product img, .rcard__thumb { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--petal-2); display: flex; align-items: center; justify-content: center; color: var(--coral-deep); }
.reviews-page { display: grid; gap: 24px; margin-top: 24px; }
@media (min-width: 900px) { .reviews-page { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } }
.reviews-list { display: grid; gap: 16px; }
@media (min-width: 1100px) { .reviews-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dist { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.dist li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 28px; align-items: center; gap: 8px; }
.dist li span:first-child { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-2); }
.dist li .icon { color: #E8A317; fill: currentColor; }
.dist__bar { height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.dist__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #E8A317, #F5C34B); }
.dist__n { text-align: right; color: var(--ink-3); }

/* Validation de l'e-mail */
.verify { text-align: left; }
.verify__icon { width: 68px; height: 68px; border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(140deg, var(--coral-deep), var(--fuchsia-deep)); margin-bottom: 12px; }
.verify__tips { list-style: none; margin: 0 0 8px; padding: 14px 16px; border-radius: 16px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-2); }
.verify__tips li { display: flex; gap: 10px; align-items: flex-start; }
.verify__tips .icon { color: var(--coral-deep); margin-top: 2px; }
.verify__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.verify__foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--green-ink); font-weight: 500; text-decoration: none; }

/* ===== Garde-fous responsive : aucun élément ne doit dépasser la largeur de l'écran ===== */
html, body { max-width: 100%; }
body { overflow-x: clip; overflow-wrap: break-word; }
img, svg, video, iframe, canvas, embed, object { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
input, select, textarea { min-width: 0; }
input[type="date"], input[type="datetime-local"], input[type="time"] { min-width: 0; width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }
table { max-width: 100%; }
td, th, dd, .card__title, h1, h2, h3 { overflow-wrap: break-word; }
.card__title, .rcard__body { overflow-wrap: anywhere; }
.wrap { width: 100%; }
/* Très petits écrans (320–399 px) */
@media (max-width: 399px) {
  :root { --gutter: 14px; }
  .btn { padding: 0 18px; font-size: 15px; }
  .stickybuy { gap: 10px; padding: 8px 12px; }
  .stickybuy .btn { flex: 1 1 auto; min-height: 48px; padding: 0 12px; white-space: nowrap; }
  .fab-whatsapp { width: 48px; height: 48px; right: 12px; }
  .fab-whatsapp .icon { width: 24px; height: 24px; }
  .topbar { font-size: 12px; }
}
/* Le bouton WhatsApp flottant ne doit pas masquer les formulaires du panier et du paiement sur mobile */
@media (max-width: 1023px) { body:has(.checkout) .fab-whatsapp, body:has(.cartlayout) .fab-whatsapp { display: none; } }

/* Menu principal ordinateur : plus compact entre 1024 et 1279 px pour tenir sur une ligne */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mainnav__link { padding: 0 9px; gap: 6px; font-size: 14px; }
  .mainnav__link::after { left: 9px; right: 9px; }
}
.mainnav__row { min-width: 0; }
.mainnav__list { min-width: 0; flex-wrap: nowrap; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
button.iconbtn { border: 0; background: none; cursor: pointer; padding: 0; }
button.iconbtn--primary { background: var(--coral-deep); }
.badge[hidden] { display: none; }
.hc__bar { justify-content: flex-start; gap: 20px; }
@media (max-width: 899px) {
  .hc__media { width: min(44vw, 180px); border-radius: 22px; }
  .hc__inner { gap: 18px; padding-top: 22px; }
  .hc__actions .btn { flex: 1 1 auto; min-height: 46px; padding: 0 18px; font-size: 15px; }
}

/* ===== Mobile façon application (≤ 599 px) ===== */
.card__buy, .card__btn--alt { margin-top: auto; }
.card__body > .card__btn--alt { margin-top: auto; }
.card__meta { margin-bottom: 2px; }
@media (max-width: 599px) {
  .topbar__inner { padding-top: 6px; padding-bottom: 6px; }
  .topbar__inner span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 12px; }
  .topbar__inner .icon { display: none; }
  /* Carrousel : bannière arrondie compacte, texte à gauche, visuel à droite */
  .hc { margin: 10px var(--gutter) 0; border-radius: 20px; }
  .hc__slide { min-height: 0; height: 236px; }
  .hc__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 14px 40px 16px; }
  .hc__text { gap: 6px; flex: 1 1 auto; }
  .hc__eyebrow { font-size: 11px; padding: 4px 10px; }
  .hc__title { font-size: 21px; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hc__brand, .hc__desc, .hc__actions .hc__btn--ghost, .hc__from, .hc__price s { display: none; }
  .hc__price { margin: 0; }
  .hc__price strong { font-size: 19px; }
  .hc__off { font-size: 11px; padding: 2px 7px; }
  .hc__actions { margin-top: 2px; }
  .hc__actions .btn { flex: 0 0 auto; min-height: 36px; padding: 0 14px; font-size: 13px; gap: 6px; }
  .hc__actions .btn .icon { width: 15px; height: 15px; }
  .hc__media { width: 36%; max-width: 150px; border-radius: 16px; transform: rotate(3deg); align-self: center; }
  .hc__slide:nth-child(even) .hc__media { transform: rotate(-3deg); }
  .hc__controls { bottom: 6px; }
  .hc__bar { gap: 4px; }
  .hc__dot { width: 22px; height: 30px; }
  .hc__dot span { width: 7px; height: 7px; }
  .hc__dot[aria-current] span { width: 22px; }
  .hc__arrows { display: none; }
  .trust { padding-top: 12px; padding-bottom: 12px; margin-bottom: 18px; gap: 8px 18px; }
  .trust span { font-size: 12.5px; }
  .section { padding-bottom: 32px; }
  .section__head { margin-bottom: 12px; }
  .section__head h2 { font-size: 19px; gap: 8px; }
  .section__ico { width: 32px; height: 32px; border-radius: 10px; }
  .section__ico .icon { width: 17px; height: 17px; }
  .rail .section__head .more { font-size: 13px; }
  .rail__intro { display: none; }
  .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
  .cat { gap: 6px; }
  .cat__circle { border-radius: 18px; }
  .cat__circle .icon { width: 28px; height: 28px; }
  .cat__name { font-size: 11.5px; }
}
@media (max-width: 599px) { .fab-whatsapp { display: none; } body:has(.product-page) .fab-whatsapp { display: flex; } .card__price s { font-size: 11px; } }

@media (max-width: 959px) {
  .filters { padding: 0 14px; border-radius: 14px; }
  .filters summary { min-height: 46px; }
  .filters:not([open]) summary::after { content: "Afficher"; margin-left: auto; font-size: 13px; font-weight: 500; color: var(--coral-deep); }
  .filters[open] summary::after { content: "Masquer"; margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ink-3); }
}

/* « Nos univers » en vignettes illustrées */
.cats--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
@media (min-width: 600px) { .cats--tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 14px; } }
@media (min-width: 1100px) { .cats--tiles { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 14px; } }
.cat--tile { display: block; border-radius: 22px; transition: transform .2s ease, filter .2s ease; }
.cat--tile img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(42, 26, 46, .10)); }
@media (hover: hover) { .cat--tile:hover { transform: translateY(-4px); } .cat--tile:hover img { filter: drop-shadow(0 14px 20px rgba(42, 26, 46, .16)); } }
.cat--tile:active { transform: scale(.97); }
.cats--tiles .cat:not(.cat--tile) { justify-content: center; }

/* Affiche de la page d'accueil */
.poster { margin-bottom: clamp(28px, 4vw, 48px); }
.poster a, .poster picture { display: block; }
.poster img { width: 100%; height: auto; border-radius: clamp(16px, 2vw, 24px); box-shadow: 0 14px 34px rgba(42, 26, 46, .10); }
.poster a { border-radius: clamp(16px, 2vw, 24px); transition: transform .2s; }
@media (hover: hover) { .poster a:hover { transform: translateY(-2px); } }

/* ===== Fiche produit façon place de marché (Wildberries / AliExpress) ===== */
.pp { display: grid; gap: 16px 28px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "head" "buy" "details"; margin-bottom: 36px; }
@media (min-width: 900px) {
  .pp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "gallery head" "gallery buy" "gallery details"; align-items: start; }
}
@media (min-width: 1180px) {
  .pp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 340px; grid-template-areas: "gallery head buy" "gallery details buy"; grid-template-rows: auto 1fr; }
  .pp__buy { position: sticky; top: 150px; }
}
.pp__gallery { grid-area: gallery; min-width: 0; }
.pp__head { grid-area: head; min-width: 0; }
.pp__buy { grid-area: buy; min-width: 0; }
.pp__details { grid-area: details; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* Galerie */
.pgal { display: flex; gap: 12px; }
@media (min-width: 900px) { .pgal { position: sticky; top: 150px; } }
.pgal__thumbs { display: none; flex-direction: column; gap: 8px; width: 74px; flex: none; max-height: 640px; overflow-y: auto; scrollbar-width: none; }
.pgal__thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .pgal__thumbs { display: flex; } }
.pgal__thumb { padding: 0; border: 2px solid transparent; border-radius: 12px; background: var(--petal-2); overflow: hidden; cursor: pointer; aspect-ratio: 4 / 5; flex: none; }
.pgal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pgal__thumb.is-active { border-color: var(--coral-deep); }
.pgal__stage { position: relative; flex: 1; min-width: 0; border-radius: 20px; overflow: hidden; background: var(--petal-2); }
.pgal__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.pgal__track::-webkit-scrollbar { display: none; }
.pgal__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; }
.pgal__slide img { width: 100%; height: 100%; object-fit: cover; }
.pgal__slide--empty { color: var(--coral-deep); opacity: .5; }
.pgal__badge { position: absolute; left: 12px; top: 12px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--fuchsia-deep); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; }
.pgal__badge[hidden] { display: none; }
.pgal__fav { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .94); color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 12px rgba(42, 26, 46, .14); }
.pgal__fav.is-on { color: var(--fuchsia-deep); }
.pgal__fav.is-on svg { fill: currentColor; }
.pgal__count { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(42, 26, 46, .62); color: #fff; font-size: 12px; font-weight: 600; }
@media (min-width: 900px) { .pgal__count { display: none; } }
@media (max-width: 899px) {
  .product-page .crumbs { display: none; }
  .pp__gallery { margin: 0 calc(-1 * var(--gutter)); }
  .pgal__stage { border-radius: 0; }
}

/* En-tête */
.pp__brandline { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; font-size: 13px; }
.pp__brand { font-weight: 700; color: var(--fuchsia-deep); text-decoration: none; letter-spacing: .02em; }
.pp__title { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; margin: 0 0 10px; font-weight: 600; }
.pp__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13.5px; color: var(--ink-3); }
.pp__stats .icon { flex: none; }
.pp__rating { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); text-decoration: none; }
.pp__rating .icon { color: #E8A317; fill: currentColor; }
.pp__rating strong { color: var(--ink); }
.pp__stat { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); text-decoration: none; }

/* Bloc d'achat */
.buybox { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 30px rgba(42, 26, 46, .06); }
.buybox__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.buybox__now { font-family: var(--font-title); font-size: clamp(26px, 3vw, 32px); font-weight: 700; color: var(--coral-deep); letter-spacing: -.02em; line-height: 1.1; }
.buybox__was { color: var(--ink-3); font-size: 15px; }
.buybox__was[hidden], .buybox__off[hidden], .buybox__save[hidden] { display: none; }
.buybox__off { align-self: center; padding: 2px 8px; border-radius: 6px; background: var(--fuchsia-deep); color: #fff; font-size: 13px; font-weight: 700; }
.buybox__save { display: flex; align-items: center; gap: 6px; margin: -4px 0 0; font-size: 13.5px; color: var(--green-ink); }
.buybox__save strong { font-weight: 700; }
.buybox__form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.buybox__format { margin: 0; font-size: 14px; color: var(--ink-2); }
.chips-opt { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-opt legend { width: 100%; padding: 0; margin-bottom: 8px; font-size: 14px; color: var(--ink-2); }
.chips-opt legend strong { color: var(--ink); }
.chip-opt { position: relative; cursor: pointer; }
.chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
.chip-opt span { display: flex; flex-direction: column; gap: 1px; min-width: 88px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 500; line-height: 1.25; transition: border-color .15s, background .15s; }
.chip-opt small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.chip-opt:hover span { border-color: var(--coral); }
.chip-opt input:checked + span { border-color: var(--coral-deep); background: var(--soft); box-shadow: inset 0 0 0 1px var(--coral-deep); }
.chip-opt input:focus-visible + span { outline: 3px solid var(--fuchsia); outline-offset: 2px; }
.buybox__stock { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; }
.buybox__stock.is-in { color: var(--green-ink); }
.buybox__stock.is-out { color: var(--danger); }
.buybox__row { display: flex; gap: 10px; }
.buybox__row[hidden] { display: none; }
.buybox__row .qty { height: 52px; flex: none; }
.buybox__cta { flex: 1; min-height: 52px; border-radius: 14px; font-weight: 600; }
.buybox .btn--ask { border-radius: 14px; min-height: 48px; }
.buybox__perks { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--soft); display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.buybox__perks li { display: flex; align-items: flex-start; gap: 10px; }
.buybox__perks strong { color: var(--ink); font-weight: 600; }
.buybox__ico { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--petal-2); color: var(--coral-deep); display: flex; align-items: center; justify-content: center; }

/* Caractéristiques (lignes pointillées) */
.specs h2, .pp__summary h2 { font-size: 18px; margin: 0 0 10px; }
.specs dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.specs dl > div { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.specs dt { color: var(--ink-3); flex: none; max-width: 48%; }
.specs dl > div::before { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); min-width: 16px; }
.specs dd { order: 2; margin: 0; color: var(--ink); text-align: right; max-width: 52%; overflow-wrap: anywhere; }
.pp__summary p { margin: 0 0 6px; color: var(--ink-2); }
.pp__details .social { display: flex; flex-wrap: wrap; gap: 8px; }

/* Barre d'achat mobile */
.stickybuy s { font-size: 12px; color: var(--ink-3); }
.stickybuy s[hidden] { display: none; }
@media (max-width: 899px) { .product-page .buybox { box-shadow: none; } }
/* L'attribut hidden doit toujours masquer, quel que soit le style du composant */
[hidden] { display: none !important; }
.buybox__row { flex-wrap: wrap; }
.buybox__cta { flex: 1 1 170px; white-space: nowrap; padding: 0 16px; }
.buybox .btn--ask { padding: 0 14px; font-size: 15px; }
.buybox .link-btn { align-self: flex-start; }
.card__sold { color: var(--ink-3); } .card__rating + span + .card__sold::before { content: "·"; margin-right: 6px; }

/* ===== Accueil : menu latéral des catégories + 5 produits par rangée (ordinateur) ===== */
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.home-side { display: none; }
@media (min-width: 1180px) {
  .home-layout { grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
  .home-side { display: block; position: sticky; top: 150px; }
}
.home-main { min-width: 0; }
/* Dans la colonne principale, les rangées s'alignent sur la colonne (pas de marges internes en double) */
.home-main .wrap { max-width: none; padding-left: 0; padding-right: 0; }
.home-main .rail__track { padding-left: 0; padding-right: 0; scroll-padding-inline: 0; }
.home-main .rail__more { margin-left: 0; margin-right: 0; }
@media (min-width: 1024px) {
  .rail__track, .home-main .rail__track { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 16px; overflow: visible; padding-inline: var(--gutter); scroll-snap-type: none; }
  .home-main .rail__track { padding-inline: 0; }
  .rail__track .rail__item:nth-child(n+6) { display: flex; }
  .rail__track .rail__item:nth-child(n+11) { display: none; }
  .rail__btn { display: none !important; }
  .rail__track .card__title { font-size: 13.5px; }
}
@media (min-width: 1240px) { .rail__track { padding-inline: calc((100% - 1240px) / 2 + var(--gutter)); } .home-main .rail__track { padding-inline: 0; } }
@media (min-width: 1180px) {
  .home-main .cats--tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 124px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 8px; }
}

.sidecat { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 10px; box-shadow: 0 8px 24px rgba(42, 26, 46, .05); }
.sidecat__title { display: flex; align-items: center; gap: 8px; margin: 4px 8px 8px; font-family: var(--font-title); font-weight: 600; font-size: 16px; }
.sidecat__title .icon { color: var(--coral-deep); }
.sidecat ul { list-style: none; margin: 0; padding: 0; }
.sidecat__item { position: relative; }
.sidecat__item > a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 14px; }
.sidecat__item > a:hover, .sidecat__item:focus-within > a { background: var(--soft); color: var(--coral-deep); }
.sidecat__ico { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--petal-2); color: var(--coral-deep); display: flex; align-items: center; justify-content: center; }
.sidecat__name { flex: 1; min-width: 0; line-height: 1.25; }
.sidecat__n { font-size: 12px; color: var(--ink-3); background: var(--bg); border-radius: 999px; padding: 1px 8px; }
.sidecat__chev { color: var(--ink-3); }
.sidecat__fly { position: absolute; left: calc(100% + 6px); top: 0; z-index: 20; min-width: 230px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(42, 26, 46, .16); display: none; flex-direction: column; }
.sidecat__item:hover .sidecat__fly, .sidecat__item:focus-within .sidecat__fly { display: flex; }
.sidecat__fly a { padding: 9px 10px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 14px; }
.sidecat__fly a:hover { background: var(--soft); color: var(--coral-deep); }
.sidecat__flyall { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; color: var(--ink) !important; border-bottom: 1px solid var(--soft); margin-bottom: 4px; }
.sidecat__links { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--soft); display: flex; flex-direction: column; }
.sidecat__links a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.sidecat__links a .icon { color: var(--fuchsia-deep); }
.sidecat__links a:hover { background: var(--soft); color: var(--coral-deep); }

/* Rangées de produits dans la fiche produit (alignées sur la page) */
.product-page .rail .wrap { max-width: none; padding-left: 0; padding-right: 0; }
.product-page .rail__track { padding-left: 0 !important; padding-right: 0 !important; scroll-padding-inline: 0; }
.product-page .rail__more { margin-left: 0; margin-right: 0; }

/* Avis clients : résumé + notation 5 étoiles */
.reviews2 { margin: 8px 0 48px; }
.reviews2 > h2 { margin-bottom: 18px; }
.reviews2 > h2 .muted { font-weight: 400; font-size: .8em; }
.reviews2__grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .reviews2__grid { grid-template-columns: 340px minmax(0, 1fr); align-items: start; } .rsummary { position: sticky; top: 150px; } }
.reviews2__list { min-width: 0; }
.rsummary { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.rsummary__score { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-title); }
.rsummary__score strong { font-size: 46px; line-height: 1; }
.rsummary__score span { font-size: 18px; color: var(--ink-3); }
.rsummary .stars .icon { width: 22px; height: 22px; }
.rsummary p { margin: 0; }
.rsummary__empty { display: flex; flex-direction: column; gap: 4px; }
.rsummary__cta { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--soft); }
.rsummary__note { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-2); background: var(--bg); border-radius: 12px; padding: 12px; }
.rsummary__note .icon { flex: none; color: var(--coral-deep); margin-top: 2px; }
.rateform { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.rateform__title { font-weight: 600; }
.starpick { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.starpick input { position: absolute; opacity: 0; pointer-events: none; }
.starpick label { margin: 0; padding: 2px; cursor: pointer; color: #E6D8D2; transition: transform .12s, color .12s; line-height: 0; }
.starpick label:hover, .starpick label:hover ~ label, .starpick input:checked ~ label { color: #F2A900; }
.starpick label:hover svg, .starpick label:hover ~ label svg, .starpick input:checked ~ label svg { fill: currentColor; }
.starpick label:active { transform: scale(.88); }
.starpick input:focus-visible + label { outline: 3px solid var(--fuchsia); outline-offset: 2px; border-radius: 6px; }
.rateform__word { font-size: 14px; font-weight: 600; color: var(--ink-3); min-height: 20px; }
.rateform .hint { display: flex; align-items: center; gap: 4px; }
.rate-link { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--fuchsia-deep); white-space: nowrap; } .rate-link .icon { color: #F2A900; fill: currentColor; }
@media (min-width: 1180px) {
  .home-layout { grid-template-columns: 252px minmax(0, 1fr); }
  .home-side { z-index: 15; }
}
.sidecat__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }