/* ==========================================================================
   DA'CLUB — Composants globaux (réutilisables sur toutes les pages)
   Barre d'annonce · Header · Méga-menus · Menu mobile · Recherche ·
   Panier (drawer) · Carte produit · Rail · Onglets · Formulaires · Footer
   ========================================================================== */

/* ---- Barre d'annonce --------------------------------------------------- */
.announce {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  height: var(--announce-h);
  background: var(--c-grenat);
  color: rgba(245, 245, 243, .9);
}
.announce__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
}
.announce__side { display: flex; gap: var(--s-5); }
.announce__side--end { justify-content: flex-end; }
.announce__side a { opacity: .7; transition: opacity var(--t-fast); }
.announce__side a:hover { opacity: 1; }
.announce__track { position: relative; height: 1.3em; min-width: min(420px, 70vw); text-align: center; }
.announce__msg {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  white-space: nowrap;
}
.announce__msg.is-active { opacity: 1; transform: none; }
.announce__nav { display: inline-grid; place-items: center; width: 28px; height: 28px; opacity: .6; }
.announce__nav:hover { opacity: 1; }
.announce__center { display: flex; align-items: center; justify-content: center; gap: var(--s-2); }
@media (max-width: 899px) {
  .announce__inner { grid-template-columns: 1fr; }
  .announce__side, .announce__nav { display: none; }
  .announce__track { min-width: 0; width: 100%; }
  .announce__msg { font-size: .625rem; letter-spacing: .1em; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- Header ------------------------------------------------------------ */
.header {
  --header-bg: var(--c-paper);          /* header blanc par défaut */
  --header-fg: var(--c-ink);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  color: var(--header-fg);
  transition: transform .5s var(--ease-out), background-color .35s var(--ease-soft), box-shadow .35s;
}
.header::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
          backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--c-line);
  transition: background-color .35s var(--ease-soft), border-color .35s;
  z-index: -1;
}
.header[data-scrolled="true"]::before,
.header.has-mega::before,
.header:focus-within::before {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--c-line);
}
.header.has-mega::before { background: var(--c-paper); }
.header[data-hidden="true"]:not(.has-mega):not(:focus-within) { transform: translateY(-100%); }

.header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-5);
}
/* Logo à gauche · onglets centrés · actions à droite */
.header__start { display: flex; align-items: center; justify-self: start; }
.nav { justify-self: center; }
.header__logo { display: block; width: clamp(118px, 9vw, 150px); color: var(--c-ink); transition: opacity var(--t-fast); }
.header__logo:hover { opacity: .7; }
.header__logo .logo-mark { width: 100%; }
.header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.header__burger { display: none; }

.nav { display: flex; align-items: center; gap: clamp(.75rem, .2rem + 1.4vw, 2rem); height: 100%; }
.nav__item { height: 100%; display: flex; align-items: center; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .35em;
  height: 100%;
  font-family: var(--f-label);
  font-size: .71875rem;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: calc(50% - 14px);
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-expanded="true"]::after,
.nav__link[aria-current="page"]::after,
.nav__item.is-current > .nav__link::after { transform: scaleX(1); transform-origin: left; }
.nav__link--accent { color: var(--c-mute); }
.nav__chev { width: 9px; height: 9px; transition: transform var(--t-base) var(--ease-out); }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.header__action-label {
  font-family: var(--f-label); font-size: .71875rem; font-weight: 500; font-stretch: 112%;
  letter-spacing: .14em; text-transform: uppercase;
}
.header__search {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 40px; padding: 0 var(--s-3);
  margin-right: var(--s-2);
  border-bottom: 1px solid var(--c-line-strong);
  color: var(--c-mute);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.header__search:hover { color: var(--c-ink); border-color: var(--c-ink); }
.cart-count {
  position: absolute; top: 6px; right: 4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-grenat); color: var(--c-ivory);
  font: 600 10px/1 var(--f-sans);
  transition: transform .4s var(--ease-out);
}
.cart-count[data-count="0"] { transform: scale(0); }
.cart-count.is-bump { animation: bump .5s var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.35); } }
.header__cart { position: relative; }

/* Mobile / tablette : menu à gauche, logo au centre, recherche + panier à droite */
@media (max-width: 1099px) {
  .header__inner { grid-template-columns: 1fr auto 1fr; gap: var(--s-3); }
  .header__start { display: contents; }
  .header__start .header__burger { grid-column: 1; justify-self: start; margin-left: -10px; }
  .nav, .header__search, .header__hide-sm { display: none; }
  .header__burger { display: inline-grid; }
  .header__logo { grid-column: 2; justify-self: center; width: 116px; }
  .header__actions { grid-column: 3; margin-right: -10px; }
}

/* ---- Méga-menu ----------------------------------------------------------- */
.mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .6s var(--ease-out), visibility 0s linear .6s;
  z-index: var(--z-mega);
}
.mega.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .6s var(--ease-out), visibility 0s;
}
.mega__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  padding-block: var(--s-7) var(--s-8);
}
.mega__col { grid-column: span 2; }
.mega__col--wide { grid-column: span 3; }
.mega__title { margin-bottom: var(--s-4); color: var(--c-mute); }
.mega__list { display: grid; gap: .55rem; }
.mega__list a {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-size: .9375rem;
  transition: color var(--t-fast), transform var(--t-base) var(--ease-out);
}
.mega__list a:hover { color: var(--c-mute); transform: translateX(3px); }
.mega__list--big a {
  font-family: var(--f-display); letter-spacing: -.015em;
  font-size: 2.3rem; line-height: 1.05;
}
.mega__list--big a:hover { color: var(--c-ink); opacity: .55; }
.mega__tag { font-family: var(--f-label); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-mute); font-stretch: 112%; }
.mega__features { grid-column: span 6; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.mega__features--one { grid-column: span 4; grid-template-columns: 1fr; }
.mega__col, .mega__features > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.mega.is-open .mega__col, .mega.is-open .mega__features > * { opacity: 1; transform: none; }
.mega.is-open .mega__col:nth-child(2) { transition-delay: 50ms; }
.mega.is-open .mega__col:nth-child(3) { transition-delay: 100ms; }
.mega.is-open .mega__features > :nth-child(1) { transition-delay: 120ms; }
.mega.is-open .mega__features > :nth-child(2) { transition-delay: 180ms; }

/* Sous-menu compact « À propos » : ancré sous l'onglet, même animation que les méga-menus */
.nav__item--drop { position: relative; }
.mega--drop {
  left: 50%; right: auto; width: 380px; translate: -50% 0;
  border: 1px solid var(--c-line); border-top: 0;
  border-radius: 0 0 var(--r-media) var(--r-media);
  box-shadow: 0 30px 60px -34px rgba(18, 18, 18, .28);
}
.drop { display: grid; gap: 2px; padding: var(--s-3); }
.drop__link {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4); border-radius: var(--r-btn);
  transition: background var(--t-fast);
}
.drop__link:hover { background: var(--c-bone); }
.drop__n { font-family: var(--f-display); font-style: italic; font-size: 1rem; color: var(--c-mute); }
.drop__body { flex: 1; display: grid; gap: 3px; }
.drop__title { font-family: var(--f-display); font-size: 1.55rem; line-height: 1.05; letter-spacing: -.01em; }
.drop__desc { font-size: .8125rem; color: var(--c-mute); }
.drop__link .icon-arrow { opacity: 0; transform: translateX(-8px); transition: opacity var(--t-base), transform var(--t-base) var(--ease-out); }
.drop__link:hover .icon-arrow { opacity: 1; transform: none; }

.feature-card { position: relative; display: block; overflow: hidden; background: var(--c-bone); }
.feature-card__media { aspect-ratio: 4 / 5; overflow: hidden; }
.feature-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.feature-card:hover .feature-card__media img { transform: scale(1.05); }
.feature-card__body { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) 0 0; background: var(--c-paper); }

.page-overlay {
  position: fixed; inset: 0;
  background: var(--overlay);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease-soft), visibility 0s linear .5s;
  z-index: calc(var(--z-header) - 1);
}
.page-overlay.is-visible { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-soft), visibility 0s; }

/* ---- Drawers (panier, menu mobile) --------------------------------------- */
.drawer {
  position: fixed;
  top: 0; bottom: 0;
  z-index: var(--z-drawer);
  width: var(--drawer-w);
  display: flex; flex-direction: column;
  background: var(--c-paper);
  box-shadow: var(--shadow-panel);
  visibility: hidden;
  transition: transform .7s var(--ease-out), visibility 0s linear .7s;
}
.drawer--right { right: 0; transform: translateX(100%); }
.drawer--left { left: 0; transform: translateX(-100%); }
.drawer.is-open { transform: none; visibility: visible; transition: transform .7s var(--ease-out), visibility 0s; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--s-5);
  border-bottom: 1px solid var(--c-line);
  flex: none;
}
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.drawer__foot { flex: none; border-top: 1px solid var(--c-line); padding: var(--s-5); background: var(--c-paper); }
.drawer-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1);
  background: var(--overlay);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease-soft), visibility 0s linear .5s;
}
.drawer-backdrop.is-visible { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-soft), visibility 0s; }

/* ---- Panier ------------------------------------------------------------- */
.cart-ship { padding: var(--s-4) var(--s-5); background: var(--c-bone); }
.cart-ship__text { font-size: .8125rem; margin-bottom: var(--s-3); }
.cart-ship__text strong { font-weight: 600; }
.cart-ship__bar { height: 2px; background: var(--c-sand); overflow: hidden; }
.cart-ship__bar span { display: block; height: 100%; background: var(--c-ink); transform-origin: left; transition: transform .9s var(--ease-out); }

.cart-lines { padding: var(--s-2) var(--s-5); }
.cart-line {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-line);
  animation: line-in .6s var(--ease-out) both;
}
@keyframes line-in { from { opacity: 0; transform: translateX(16px); } }
.cart-line.is-removing { animation: line-out .4s var(--ease-in-out) forwards; }
@keyframes line-out { to { opacity: 0; transform: translateX(24px); } }
.cart-line__media { aspect-ratio: 4 / 5; background: var(--c-bone); display: grid; place-items: center; overflow: hidden; }
.cart-line__media img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.cart-line__title { font-size: .9375rem; line-height: 1.35; margin: 2px 0 6px; }
.cart-line__meta { font-size: .8125rem; color: var(--c-mute); }
.cart-line__actions { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.cart-line__price { text-align: right; font-size: .9375rem; }
.cart-line__remove { font-size: .75rem; color: var(--c-mute); text-decoration: underline; text-underline-offset: 3px; }
.cart-line__remove:hover { color: var(--c-ink); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line-strong); height: 34px; }
.qty button { width: 32px; height: 100%; display: grid; place-items: center; }
.qty button:hover { background: var(--c-bone); }
.qty output { min-width: 26px; text-align: center; font-size: .8125rem; font-variant-numeric: tabular-nums; }

.cart-empty { padding: var(--s-8) var(--s-5) var(--s-6); text-align: center; }
.cart-empty .flower-mark { width: 64px; margin: 0 auto var(--s-5); color: var(--c-sand); }
.cart-empty p { color: var(--c-mute); margin: var(--s-3) auto var(--s-5); max-width: 30ch; }

.cart-upsell { padding: var(--s-5); border-top: 1px solid var(--c-line); }
.cart-upsell__list { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: var(--s-3); overflow-x: auto; scrollbar-width: none; margin-top: var(--s-4); padding-bottom: 4px; }
.cart-upsell__list::-webkit-scrollbar { display: none; }
.mini-card { display: grid; gap: 6px; font-size: .75rem; }
.mini-card__media { aspect-ratio: 4 / 5; background: var(--c-bone); display: grid; place-items: center; }
.mini-card__media img { width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.mini-card__title { line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cart-total__amount { font-size: 1.125rem; font-weight: 500; }
.cart-note { font-size: .75rem; color: var(--c-mute); margin-bottom: var(--s-4); }
.cart-trust { display: flex; justify-content: center; gap: var(--s-4); margin-top: var(--s-4); color: var(--c-mute); }
.cart-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: .6875rem; }
.cart-trust .icon { width: 14px; height: 14px; }

/* ---- Recherche ---------------------------------------------------------- */
.search {
  position: fixed; left: 0; right: 0; top: 0;
  z-index: calc(var(--z-drawer) + 2);   /* au-dessus du voile des drawers */
  background: var(--c-paper);
  max-height: 100svh; overflow-y: auto;
  transform: translateY(-102%);
  visibility: hidden;
  transition: transform .7s var(--ease-out), visibility 0s linear .7s;
}
.search.is-open { transform: none; visibility: visible; transition: transform .7s var(--ease-out), visibility 0s; }
.search__bar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4);
  height: calc(var(--header-h) + 32px);
  border-bottom: 1px solid var(--c-line);
}
.search__input {
  width: 100%; border: 0; outline: 0; background: none;
  font-family: var(--f-display); letter-spacing: -.015em;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem); line-height: 1;
}
.search__input::placeholder { color: var(--c-sand); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__body { padding-block: var(--s-6) var(--s-8); display: grid; grid-template-columns: 1fr 3fr; gap: var(--s-7); }
.search__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 var(--s-4);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  font-size: .8125rem;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip:hover { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.search__results { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-top: var(--s-4); }
.search__empty { color: var(--c-mute); margin-top: var(--s-4); }
.search__all { margin-top: var(--s-6); }
@media (max-width: 899px) {
  .search__body { grid-template-columns: 1fr; gap: var(--s-6); }
  .search__results { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Menu mobile --------------------------------------------------------- */
.mnav { width: min(520px, 100vw); }
.mnav__body { position: relative; overflow: hidden; flex: 1; }
.mnav__panel {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-5) var(--s-5) var(--s-7);
  background: var(--c-paper);
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
}
.mnav__panel[data-depth="1"] { transform: translateX(100%); }
.mnav__panel.is-active { transform: none; }
.mnav.has-sub .mnav__panel[data-depth="0"] { transform: translateX(-30%); opacity: 0; }
.mnav__search {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; height: 48px; padding: 0 var(--s-4);
  background: var(--c-bone); color: var(--c-mute); font-size: .9375rem;
  margin-bottom: var(--s-5);
}
.mnav__primary li { border-bottom: 1px solid var(--c-line); }
.mnav__primary a, .mnav__primary button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 14px 0;
  font-family: var(--f-display); letter-spacing: -.015em;
  font-size: 2.5rem; line-height: 1;
  text-align: left;
}
.mnav__primary .icon-arrow { width: 16px; height: 16px; opacity: .5; }
.mnav__back { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); }
.mnav__sublist { display: grid; gap: 2px; margin-bottom: var(--s-6); }
.mnav__sublist a { display: block; padding: 10px 0; font-size: 1.0625rem; border-bottom: 1px solid var(--c-line); }
.mnav__sublist--big a { display: grid; gap: 4px; padding: var(--s-4) 0; }
.mnav__sublist--big span { font-family: var(--f-display); font-size: 1.9rem; line-height: 1.05; letter-spacing: -.015em; }
.mnav__sublist--big small { font-size: .875rem; color: var(--c-mute); }
.mnav__feature { margin-top: var(--s-6); }
.mnav__util { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-6); }
.mnav__util a {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3); border: 1px solid var(--c-line); font-size: .8125rem;
}
.mnav__util .icon { width: 16px; height: 16px; }
.mnav.is-open .mnav__primary li { animation: mnav-in .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@keyframes mnav-in { from { opacity: 0; transform: translateX(-18px); } }

/* ---- Carte produit -------------------------------------------------------- */
.pcard { position: relative; display: flex; flex-direction: column; gap: var(--s-3); }
.pcard__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--c-bone);
  overflow: hidden;
  isolation: isolate;
}
.pcard__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;               /* image entière, jamais coupée */
  mix-blend-mode: multiply;          /* fond blanc : fusion avec la carte */
  transition: opacity .6s var(--ease-soft), transform 1.1s var(--ease-out);
}
.pcard__img--alt { opacity: 0; }
.pcard:hover .pcard__img--main { transform: scale(1.04); }
.pcard.has-alt:hover .pcard__img--main { opacity: 0; }
.pcard.has-alt:hover .pcard__img--alt { opacity: 1; transform: scale(1.02); }
.pcard__badges { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; flex-wrap: wrap; gap: 6px; z-index: 2; }
.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  background: var(--c-paper);
  font-family: var(--f-label); font-size: .59375rem; font-weight: 600; font-stretch: 112%;
  letter-spacing: .14em; text-transform: uppercase;
}
.badge--ink { background: var(--c-grenat); color: var(--c-ivory); }
.badge--alert { color: var(--c-alert); }
.badge--line { background: transparent; border: 1px solid var(--c-line-strong); }

/* Ajout rapide : tailles qui montent depuis le bas de la vignette */
.pcard__quick {
  position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3);
  z-index: 3;
  padding: var(--s-3);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(calc(100% + var(--s-4)));
  transition: transform .55s var(--ease-out);
}
.pcard:hover .pcard__quick,
.pcard:focus-within .pcard__quick { transform: none; }
.pcard__quick-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-2); }
/* Tailles sur une seule ligne : elles se partagent la largeur pour toutes rester visibles.
   Au-delà de 8 tailles (sneakers), une ligne ne suffit plus : elles passent à la ligne, aucune n'est masquée. */
.sizes { display: flex; flex-wrap: nowrap; gap: 3px; }
.sizes--many { flex-wrap: wrap; max-height: 9.5rem; overflow-y: auto; scrollbar-width: thin; }
.sizes--many .size { flex: 0 0 calc((100% - 5 * 3px) / 6); max-width: none; }
.size { flex: none; min-width: 34px; padding: 0 5px; }
.size {
  flex: 1 1 0; min-width: 0; max-width: 64px; height: 30px; padding: 0 2px; white-space: nowrap;
  border: 1px solid var(--c-line);
  font-size: .75rem; font-variant-numeric: tabular-nums;
  background: var(--c-paper);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.size:hover:not(:disabled) { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.size:disabled { color: var(--c-grey); text-decoration: line-through; cursor: not-allowed; background: transparent; }
.size.is-loading { background: var(--c-ink); color: var(--c-paper); }

.pcard__info { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); align-items: start; }
.pcard__brand { grid-column: 1 / -1; color: var(--c-mute); }
.pcard__title {
  font-size: .9375rem; line-height: 1.35; font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__title a { transition: color var(--t-fast); }
.pcard__title a:hover { color: var(--c-mute); }
.pcard__media-link { position: absolute; inset: 0; z-index: 1; }
.pcard__price { font-size: .9375rem; text-align: right; }
.pcard__split { grid-column: 1 / -1; font-size: .75rem; color: var(--c-mute); }
.pcard__mobile-add { display: none; }
.pcard.is-soldout .pcard__img { opacity: .55; }
/* Cadrage calculé (app.js › __dcFrame) : position et taille en % de la carte */
.pcard__img.is-framed { inset: auto; max-width: none; object-fit: fill; transform-origin: 50% 50%; }
/* Fond coloré (gris, noir…) : l'image couvre la carte, pas de fusion */
.pcard__img.is-solid { mix-blend-mode: normal; }
.pcard__media { background: var(--tile-bg, var(--c-bone)); }
.pcard__quick-close { display: none; }

@media (hover: none) {
  .pcard:hover .pcard__quick, .pcard:focus-within .pcard__quick { transform: translateY(calc(100% + var(--s-4))); }
  .pcard.is-quick-open .pcard__quick { transform: none; }
  .pcard__quick { left: var(--s-2); right: var(--s-2); bottom: var(--s-2); }
  .pcard__quick-close { display: grid; place-items: center; width: 26px; height: 26px; }
  .pcard__mobile-add {
    display: grid; place-items: center;
    position: absolute; right: var(--s-2); bottom: var(--s-2); z-index: 2;
    width: 36px; height: 36px; border-radius: var(--r-pill);
    background: var(--c-paper);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
  }
  .pcard:hover .pcard__img--main { transform: none; }
}

/* ---- Rail horizontal ------------------------------------------------------ */
.rail { position: relative; }
.rail__track {
  --cols: 4.6;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols));
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-x);
  padding-inline: var(--page-x);
  margin-inline: calc(var(--page-x) * -1);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }
.rail__foot { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-5); }
.rail__progress { flex: 1; height: 1px; background: var(--c-line); position: relative; overflow: hidden; }
.rail__progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: currentColor; transition: transform .3s var(--ease-out), width .3s; }
.rail__nav { display: flex; gap: var(--s-2); }
.rail__btn {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.rail__btn:hover:not(:disabled) { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.rail__btn:disabled { opacity: .3; cursor: default; }
.section--night .rail__btn { border-color: var(--c-line-inv); }
.section--night .rail__btn:hover:not(:disabled) { background: var(--c-paper); color: var(--c-ink); }
@media (max-width: 1099px) { .rail__track { --cols: 2.6; } }
@media (max-width: 767px) { .rail__track { --cols: 1.55; } .rail__nav { display: none; } }

/* ---- Onglets -------------------------------------------------------------- */
.tabs { display: flex; gap: clamp(1rem, .5rem + 1.5vw, 2.25rem); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none;
  padding: 6px 0;
  font-family: var(--f-display); letter-spacing: -.015em;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.9rem); line-height: 1;
  color: var(--c-grey);
  transition: color var(--t-base) var(--ease-out);
}
.tab sup { font-family: var(--f-label); font-size: .6875rem; vertical-align: top; margin-left: 4px; letter-spacing: .08em; font-stretch: 112%; }
.tab:hover, .tab[aria-selected="true"] { color: var(--c-ink); }
.tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--c-ink);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tabpanel { animation: panel-in .8s var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } }

/* ---- Formulaires ------------------------------------------------------------ */
.field { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid currentColor; }
.field input {
  flex: 1; min-width: 0; height: 54px; border: 0; outline: 0; background: transparent;
  font-size: 1rem;
}
.field input::placeholder { color: inherit; opacity: .5; }
.field button { display: inline-flex; align-items: center; gap: var(--s-2); padding-left: var(--s-4); }
.form-note { font-size: .75rem; opacity: .6; margin-top: var(--s-3); }
.form-success { display: flex; align-items: center; gap: var(--s-3); min-height: 55px; border-bottom: 1px solid currentColor; }

/* ---- Toast ---------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: var(--s-5); z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: var(--c-ink); color: var(--c-paper);
  font-size: .8125rem;
  transform: translate(-50%, calc(100% + 3rem));
  visibility: hidden;
  transition: transform .6s var(--ease-out), visibility 0s linear .6s;
  max-width: calc(100vw - 2rem);
}
.toast.is-visible { transform: translate(-50%, 0); visibility: visible; transition: transform .6s var(--ease-out), visibility 0s; }

/* ---- Footer ---------------------------------------------------------------- */
.footer { background: var(--grain), var(--c-night); color: var(--c-ivory); overflow: hidden; }
/* Bande de réassurance en tête de footer, d'une autre couleur pour marquer la transition */
.footer__band { background: var(--c-paper); color: var(--c-ink); }
.footer__band .footer__trust { border: 0; }
/* Réassurance centrée : icône au-dessus, texte centré dans chaque colonne */
.footer__band .footer__trust div { flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); }
.footer__band .footer__trust strong { margin-bottom: 2px; }
.footer__band .footer__trust div { color: rgba(18,18,18,.7); }
.footer__band .icon { color: var(--c-grenat); }
.footer__band .footer__trust strong { color: var(--c-ink); }
.footer a { transition: opacity var(--t-fast); }
.footer__top {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-7) var(--gutter);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--s-7);
  border-bottom: 1px solid var(--c-line-inv);
}
.footer__brand { grid-column: span 4; display: grid; align-content: start; gap: var(--s-4); }
.footer__brand .logo-mark { width: 132px; }
.footer__brand .t-display { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem); }
.footer__contact { display: grid; gap: 6px; font-size: .9375rem; color: rgba(255,255,255,.72); font-style: normal; }
.footer__contact a:hover { color: var(--c-paper); }
.footer__social { display: flex; gap: var(--s-2); }
.footer__social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--c-line-inv); border-radius: var(--r-pill);
}
.footer__social a:hover { background: var(--c-paper); color: var(--c-ink); }
.footer__col { grid-column: span 2; }
.footer__col:first-of-type { grid-column: 5 / span 2; }
.footer__col:last-of-type { grid-column: 11 / span 2; }
.footer__title { margin-bottom: var(--s-5); color: rgba(255,255,255,.5); }
.footer__links { display: grid; gap: .6rem; font-size: .9375rem; }
.footer__links a { opacity: .82; }
.footer__links a:hover { opacity: 1; }

.footer__trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-line-inv);
}
.footer__trust div { display: flex; gap: var(--s-3); align-items: flex-start; font-size: .8125rem; color: rgba(255,255,255,.7); }
.footer__trust strong { display: block; color: var(--c-paper); font-weight: 500; }
.footer__trust-desc { display: block; }
.footer__trust .icon { margin-top: 2px; }

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6);
  padding-block: var(--s-5);
  font-size: .75rem; color: rgba(255,255,255,.55);
}
.footer__bottom a:hover { color: var(--c-paper); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer__pay { display: flex; flex-wrap: wrap; gap: 6px; }
.footer__pay li { display: flex; }
.footer__pay svg { width: 38px; height: 24px; display: block; }
.footer__region {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 34px; padding: 0 var(--s-3);
  border: 1px solid var(--c-line-inv);
  background: transparent; color: rgba(255,255,255,.8); font-size: .75rem;
}
.footer__credit a { color: var(--c-paper); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); transition: text-decoration-color var(--t-fast); }
.footer__credit a:hover { text-decoration-color: var(--c-paper); }

@media (max-width: 1099px) {
  .footer__brand { grid-column: 1 / -1; }
  .footer__col, .footer__col:first-of-type, .footer__col:last-of-type { grid-column: span 3; }
  .footer__trust { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-5); }
}
@media (max-width: 767px) {
  .footer__top { gap: var(--s-5) var(--gutter); padding-block: var(--s-6) var(--s-5); }
  .footer__band .footer__trust { grid-template-columns: 1fr 1fr; row-gap: var(--s-4); padding-block: var(--s-4); }
  .footer__band .footer__trust div > span { font-size: .75rem; }
  .footer__band .footer__trust-desc { display: none; }
  .footer__links { gap: .4rem; font-size: .875rem; }
  .footer__title { margin-bottom: var(--s-3); }
  .footer__col, .footer__col:first-of-type, .footer__col:last-of-type { grid-column: span 6; }
  .footer__trust { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- Carte produit — mobile uniquement (le desktop reste inchangé) ------------ */
@media (max-width: 767px) {
  .pcard { gap: var(--s-2); }
  .pcard__img { filter: brightness(1.03); }
  .pcard__badges { top: var(--s-2); left: var(--s-2); }
  .badge { height: 20px; padding: 0 6px; font-size: .53rem; }
  .pcard__info { grid-template-columns: 1fr; gap: 3px; }
  .pcard__brand { font-size: .5625rem; }
  .pcard__title { font-size: .8125rem; line-height: 1.3; }
  .pcard__price { text-align: left; font-size: .875rem; font-weight: 500; }
  .pcard__split { display: none; }
  .pcard__mobile-add {
    right: var(--s-2); bottom: var(--s-2);
    width: 30px; height: 30px;
    background: var(--c-paper); border: 1px solid var(--c-line-strong); box-shadow: none;
  }
  .pcard__mobile-add .icon-arrow { width: 11px; height: 11px; }
}

/* ---- Arrondis très légers sur les cadres d'images et petits contrôles ---------- */
.pcard__media, .feature-card, .feature-card__media, .mini-card__media, .cart-line__media,
.brands__float, .pcard__quick, .toast { border-radius: var(--r-media); }
.size, .qty, .badge, .appstore, .footer__region, .mnav__search, .mnav__util a { border-radius: var(--r-btn); }

/* ---- Fil d'Ariane + accordéons (partagés : collection, fiche produit) ----- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); color: var(--c-mute); margin-bottom: var(--s-6); }
.breadcrumb a { transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--c-ink); }
.breadcrumb [aria-current] { color: var(--c-ink); }

.fgroup { border-bottom: 1px solid var(--c-line); }
.fgroup summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-4) 0; cursor: pointer; list-style: none;
}
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary .t-label { flex: 1; }
.fgroup[open] summary .nav__chev { transform: rotate(180deg); }
.fgroup .nav__chev { transition: transform var(--t-base) var(--ease-out); }
.fgroup__n { display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-paper); font-size: .625rem; }
.fgroup__body { padding-bottom: var(--s-5); }

/* ---- Curseur fleur Da'Club (souris uniquement) ------------------------------
   Curseur natif : aucun décalage avec la souris. Fleur encre à liseré blanc
   (lisible sur fonds clairs et sombres) ; disque encre + fleur au survol des liens.
   Le préfixe html.js donne la priorité sur les « cursor: pointer » des pages. */
@media (hover: hover) and (pointer: fine) {
  html.js {
    cursor: url("../img/cursor/flower.png") 16 16, auto;
    cursor: -webkit-image-set(url("../img/cursor/flower.png") 1x, url("../img/cursor/flower@2x.png") 2x) 16 16, auto;
    cursor: image-set(url("../img/cursor/flower.png") 1x, url("../img/cursor/flower@2x.png") 2x) 16 16, auto;
  }
  html.js :is(a[href], button, [role="button"], summary, label, select, .fopt, .ftoggle, .fcolor, .fsize, [data-open]) {
    cursor: url("../img/cursor/flower-link.png") 16 16, pointer;
    cursor: -webkit-image-set(url("../img/cursor/flower-link.png") 1x, url("../img/cursor/flower-link@2x.png") 2x) 16 16, pointer;
    cursor: image-set(url("../img/cursor/flower-link.png") 1x, url("../img/cursor/flower-link@2x.png") 2x) 16 16, pointer;
  }
  html.js :is(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea) { cursor: text; }
  html.js :is(:disabled, .is-empty) { cursor: not-allowed; }
}
/* Éclosion d'une fleur à chaque clic */
.cursor-bloom {
  position: fixed; z-index: 9999; width: 34px; margin: -17px 0 0 -17px;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
  animation: cursor-bloom .7s var(--ease-out) forwards;
}
@keyframes cursor-bloom {
  from { opacity: .9; transform: scale(.35) rotate(0deg); }
  to { opacity: 0; transform: scale(1.9) rotate(75deg); }
}

/* ---- Produits « vivants » au survol : la pièce s'incline vers le curseur ------
   Ajouter data-tilt sur un conteneur : l'image qu'il contient suit la souris. */
[data-tilt] img {
  transform:
    perspective(900px)
    rotateX(calc(var(--ty, 0) * -9deg)) rotateY(calc(var(--tx, 0) * 11deg))
    translate3d(calc(var(--tx, 0) * 10px), calc(var(--ty, 0) * 8px), 0)
    scale(var(--tilt-s, 1));
  transition: transform .9s var(--ease-out);
}
[data-tilt].is-tilting { --tilt-s: 1.07; }
[data-tilt].is-tilting img { transition-duration: .35s; }
/* Cartes produits avec data-tilt (section « Da'Club, notre ligne. ») : les deux vues suivent le curseur */
.pcard .pcard__media[data-tilt] .pcard__img {
  transform:
    perspective(900px)
    rotateX(calc(var(--ty, 0) * -9deg)) rotateY(calc(var(--tx, 0) * 11deg))
    translate3d(calc(var(--tx, 0) * 10px), calc(var(--ty, 0) * 8px), 0)
    scale(var(--tilt-s, 1));
  transition: opacity .6s var(--ease-soft), transform .9s var(--ease-out);
}
.pcard .pcard__media[data-tilt].is-tilting .pcard__img { transition: opacity .6s var(--ease-soft), transform .35s var(--ease-out); }

/* ---- Avis en cartes qui défilent (accueil Labs, fiche produit) --------------
   Deux rangées en sens opposés, fondu sur les bords, pause au survol / au doigt. */
.rv-loop { overflow: hidden; }
.rv-loop__rows { display: grid; gap: var(--gutter); margin-top: var(--s-7); }
.rv-loop__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rv-loop__track { display: flex; gap: var(--gutter); width: max-content; padding-block: 8px; animation: rv-scroll var(--rv-dur, 60s) linear infinite; }
.rv-loop__row--rev .rv-loop__track { animation-direction: reverse; animation-duration: calc(var(--rv-dur, 60s) * 1.15); }
.rv-loop.is-off .rv-loop__track, .rv-loop.is-held .rv-loop__track { animation-play-state: paused; }
@media (hover: hover) { .rv-loop__row:hover .rv-loop__track { animation-play-state: paused; } }
@keyframes rv-scroll { to { transform: translate3d(-50%, 0, 0); } }

.rv-card {
  position: relative; flex: none; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6);
  width: clamp(280px, 24vw, 390px); min-height: 15.5rem; margin: 0; padding: var(--s-6);
  overflow: hidden; background: var(--c-bone); color: var(--c-ink); border-radius: var(--r-media);
  transition: background .5s var(--ease-soft), color .5s var(--ease-soft), transform .6s var(--ease-out);
}
.section--sand .rv-card { background: var(--c-paper); }
.rv-card__flower { position: absolute; right: -14%; bottom: -22%; width: 52%; opacity: .04; transform: rotate(-16deg); transition: transform 1.2s var(--ease-out), opacity .5s; pointer-events: none; }
.rv-card__quote { position: relative; margin: 0; font-family: var(--f-display); font-size: clamp(1.2rem, 1.05rem + .45vw, 1.5rem); line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty; }
.rv-card__who { position: relative; display: flex; align-items: center; gap: var(--s-3); }
.rv-card__who > span:last-child { display: grid; gap: 3px; }
.rv-card__who strong { font-weight: 500; font-size: .9375rem; }
.rv-card__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; font-family: var(--f-display); font-size: 1.15rem; }
@media (hover: hover) {
  .rv-card:hover { background: var(--c-ink); color: var(--c-ivory, #f4f4f2); transform: translateY(-6px); }
  .rv-card:hover .t-label--mute { color: rgba(255, 255, 255, .6); }
  .rv-card:hover .rv-card__flower { opacity: .12; transform: rotate(24deg) scale(1.08); }
}
/* Sans animation : une rangée qui se fait défiler à la main */
.rv-loop.is-static .rv-loop__row { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; padding-inline: var(--page-x); }
.rv-loop.is-static .rv-loop__row--rev { display: none; }
.rv-loop.is-static .rv-loop__track { animation: none; }
@media (max-width: 767px) {
  .rv-loop__rows { margin-top: var(--s-6); }
  .rv-loop__row--rev { display: none; }
  .rv-card { width: 80vw; min-height: 14rem; padding: var(--s-5); }
}