/* ==========================================================================
   Neuro Sisters Club
   Design  : handoff Claude Design, "Modele A v2 - Coquette Chic"
   Couleur : le rose du fond de son logo sur toutes les pages, seul le bas
             de page s'en detache. Aucun violet ailleurs que dans le logo.
   Un seul breakpoint : 900px. Mobile d'abord.
   ========================================================================== */

:root {
  /* le rose du fond du logo, sur toutes les pages sans exception */
  --page: #FAE8EF;
  --beige: #F6EEE3;              /* reserve au fond d'attente des photos */
  --ecru: var(--page);
  --card: #FFFFFF;
  --footer: #5A2338;             /* seul le bas de page s'en detache */

  /* encre chaude, rosee */
  --ink: #4C2A36;
  --ink-soft: #7D5766;
  --footer-ink: #F7D8E6;

  /* accent unique : rose framboise, contraste AA verifie */
  --accent: #A83E63;
  --accent-hover: #8F3253;
  --accent-active: #7C2A47;

  /* roses decoratifs */
  --rose: #F2A9C4;
  --rose-soft: #FBD3E2;
  --rose-line: #EFC3D4;

  /* couleurs reservees au logo, nulle part ailleurs */
  --logo-purple: #7B4A94;
  --logo-lilac: #EDA9DA;
  --logo-pink: #E85BAD;
  --logo-cream: #F7E9A0;
  --logo-gold: #F2C230;

  /* bordures */
  --border: #F0D5E1;
  --border-btn: #E4AFC4;
  --btn-ghost-hover: #FDF2F6;
  --thumb: #E3B9CB;

  /* ombres */
  --sh-card: 0 12px 30px rgba(168, 62, 99, .09);
  --sh-card-hover: 0 22px 44px rgba(168, 62, 99, .17);
  --sh-prod: 0 10px 26px rgba(168, 62, 99, .08);
  --sh-photo: 0 26px 60px rgba(168, 62, 99, .17);
  --sh-pola: 0 22px 46px rgba(168, 62, 99, .21);
  --sh-tilt: 0 24px 50px rgba(168, 62, 99, .15);
  --sh-shop: 0 20px 48px rgba(168, 62, 99, .11);
  --sh-dot: 0 8px 18px rgba(168, 62, 99, .11);

  /* rythme */
  --gutter: clamp(18px, 4.5vw, 44px);
  --maxw: 1180px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: "Mulish", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  animation: fadeIn .45s ease both;
}
body.is-leaving { opacity: 0; transition: opacity .26s ease; }

h1, h2, .card-title-lg, .arg h3, .tile h3, .pledge > h3 {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.08;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--rose-soft); color: var(--ink); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ==========================================================================
   LE LOGO, le vrai fichier de la cliente (assets/logo.png)
   ========================================================================== */
/* Le PNG d'origine est carre avec beaucoup de transparent autour. On le
   recadre sur son contenu reel (boite 1181x905 dans les 1200x1200) pour que
   le lettrage occupe vraiment la place qu'on lui donne. */
.brand, .brandsplash img { --logo-ratio: 1181 / 905; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img {
  height: 54px; width: auto; aspect-ratio: var(--logo-ratio);
  object-fit: cover; object-position: 50% 36%;
  transition: transform .45s var(--ease);
}
.brand:hover img { transform: rotate(-2deg) scale(1.05); }
/* sur le pied de page bordeaux, le logo violet est pose sur une pastille claire */
.site-footer .brand-badge img {
  height: 86px; background: var(--page);
  border-radius: 24px; padding: 12px 16px;
}

/* le grand logo, en haut de la page d'accueil */
.brandsplash {
  display: flex; justify-content: center;
  padding: clamp(16px, 2.6vw, 28px) var(--gutter) 0;
}
.brandsplash img {
  width: min(360px, 68vw); height: auto;
  aspect-ratio: var(--logo-ratio); object-fit: cover; object-position: 50% 36%;
  animation: logoIn 1.1s var(--ease) both, floatY 8s 1.1s ease-in-out infinite;
}

/* ==========================================================================
   EN-TETE
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250, 232, 239, .93);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  min-height: 68px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; white-space: nowrap;
}
/* ==========================================================================
   LES ONGLETS EN PASTILLES
   Rondes au repos, elles s'ouvrent au survol et au toucher pour laisser
   apparaitre leur libelle sur un degrade rose, avec un halo diffus dessous.
   ========================================================================== */
.gmenu { display: flex; align-items: center; gap: 10px; }
.site-header .gmenu { display: none; }
.gmenu-bar {
  justify-content: center; overflow-x: auto; scrollbar-width: none;
  padding: 12px var(--gutter) 14px;
  border-bottom: 1px solid var(--border);
}
.gmenu-bar::-webkit-scrollbar { display: none; }

.gtab {
  position: relative; flex: none;
  width: 48px; height: 48px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: var(--sh-dot);
  transition: width .5s var(--ease), box-shadow .5s var(--ease);
}
/* le halo flou, sous la pastille */
.gtab::before {
  content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 100%;
  border-radius: 999px; background: linear-gradient(45deg, var(--g1), var(--g2));
  filter: blur(15px); opacity: 0; transition: opacity .5s var(--ease);
}
/* le degrade qui remplit la pastille ouverte */
.gtab::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(45deg, var(--g1), var(--g2));
  opacity: 0; transition: opacity .5s var(--ease);
}
.gtab-icon {
  position: relative; z-index: 1; display: flex; color: var(--accent);
  transition: transform .45s var(--ease);
}
.gtab-label {
  position: absolute; z-index: 1; color: #fff;
  font-weight: 800; font-size: 12.5px; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap;
  transform: scale(0); transition: transform .45s var(--ease) .15s;
}
.gtab:hover, .gtab:focus-visible, .gtab.is-active, .gtab.is-going { width: 152px; box-shadow: none; }
.gtab:hover::before, .gtab:focus-visible::before, .gtab.is-active::before, .gtab.is-going::before { opacity: .55; }
.gtab:hover::after, .gtab:focus-visible::after, .gtab.is-active::after, .gtab.is-going::after { opacity: 1; }
.gtab:hover .gtab-icon, .gtab:focus-visible .gtab-icon,
.gtab.is-active .gtab-icon, .gtab.is-going .gtab-icon { transform: scale(0); }
.gtab:hover .gtab-label, .gtab:focus-visible .gtab-label,
.gtab.is-active .gtab-label, .gtab.is-going .gtab-label { transform: scale(1); }

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Mulish", sans-serif; font-weight: 800; font-size: 15px;
  border: none; border-radius: 999px; cursor: pointer;
  padding: 15px 28px;
  transition: background .25s, color .25s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
/* le reflet qui balaie le bouton */
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .38) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn:hover::before { transform: translateX(120%); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(168, 62, 99, .26); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(168, 62, 99, .34); }
.btn-primary:active { background: var(--accent-active); transform: none; }
.btn-ghost {
  background: #fff; color: var(--accent);
  border: 1.5px solid var(--border-btn); padding: 14px 28px;
}
.btn-ghost:hover { background: var(--btn-ghost-hover); color: var(--accent-hover); transform: translateY(-2px); }
.btn-sm { font-size: 14px; padding: 11px 22px; }

/* ==========================================================================
   TITRES
   ========================================================================== */
.kicker {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.kicker svg { flex: none; animation: floatY 5s ease-in-out infinite; }
.sec-head h1, .sec-head h2 { font-size: clamp(28px, 4vw, 44px); }
.sec-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(28px, 4.5vw, 46px); }
.sec-head-center { align-items: center; text-align: center; }
.sec-head-center .kicker { justify-content: center; }
.sec-head-split { gap: 18px; }
.sec-head-split > div { display: flex; flex-direction: column; gap: 10px; }
.sub { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; max-width: 56ch; }
.sec-head-center .sub { margin-inline: auto; }
.lede { font-size: 16.5px; line-height: 1.65; color: var(--ink-soft); max-width: 520px; text-wrap: pretty; }

.link-more {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-weight: 800; font-size: 14px; color: var(--accent); transition: color .2s;
}
.link-more svg { transition: transform .35s var(--ease); }
.link-more:hover { color: var(--accent-active); }
.link-more:hover svg { transform: translateX(5px); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.band { padding: clamp(48px, 7vw, 84px) 0 clamp(56px, 8vw, 92px); }
.band-tight { padding: clamp(36px, 5vw, 60px) 0 clamp(40px, 6vw, 68px); }
.band-intro { padding-top: clamp(36px, 5vw, 60px); }
/* un filet fleuri, seule separation entre deux sections de meme rose */
.rule {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  height: 1px; background: linear-gradient(90deg, transparent, var(--rose-line) 20%, var(--rose-line) 80%, transparent);
  background-clip: content-box;
}
.band-flush { padding-bottom: clamp(18px, 3vw, 30px); }
.band[id] { scroll-margin-top: 84px; }

.scallop {
  height: 22px;
  background-color: var(--top);
  background-image: radial-gradient(circle at 13px 22px, var(--bottom) 12px, transparent 12.8px);
  background-size: 26px 22px;
  background-repeat: repeat-x;
}

/* ==========================================================================
   LA VITRINE
   Quatre photos plein cadre qui occupent l'ecran d'accueil, avec pour seul
   appel a l'action un lien souligne. Aucun bouton ici, c'est voulu.
   ========================================================================== */
.showcase { padding-top: clamp(16px, 2.6vw, 28px); }
.showcase-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  height: clamp(330px, calc(100svh - 510px), 540px);
}
.shot { overflow: hidden; border-radius: 18px; background: var(--beige); }
.shot:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.shot:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
  animation: shotIn .9s var(--ease) both;
}
.shot:nth-child(2) img { animation-delay: .1s; }
.shot:nth-child(3) img { animation-delay: .2s; }
.shot:nth-child(4) img { animation-delay: .3s; }
.shot:hover img { transform: scale(1.05); }

.showcase-link { text-align: center; padding: clamp(18px, 3vw, 30px) var(--gutter) 0; }
.showcase-link a {
  position: relative; display: inline-block;
  font-family: "Fredoka", sans-serif; font-weight: 600;
  font-size: clamp(22px, 3.4vw, 34px); color: var(--accent);
  padding-bottom: 6px;
}
.showcase-link a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform-origin: left;
  transition: transform .45s var(--ease);
}
.showcase-link a:hover { color: var(--accent-hover); }
.showcase-link a:hover::after { animation: underlineSwipe .55s var(--ease); }

.hl { color: var(--accent); position: relative; }
/* le trait qui se trace sous "jolies affaires" */
.hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.1em; height: .07em;
  background: var(--rose); border-radius: 99px;
  transform: scaleX(0); transform-origin: left;
  animation: drawLine .9s .8s var(--ease) forwards;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }


/* cadres photo */
.frame { background: #fff; border-radius: 20px; padding: 10px; position: relative; }
.frame img { border-radius: 14px; object-fit: cover; width: 100%; }
.frame figcaption {
  font-size: 11.5px; font-style: italic; color: var(--ink-soft);
  text-align: center; padding: 7px 4px 2px;
}
.frame-bow { position: absolute; top: -13px; left: 50%; z-index: 3; transform: translateX(-50%) rotate(-2deg); }
.frame-tilt {
  margin: 14px auto 0; max-width: 460px; box-shadow: var(--sh-tilt);
  transform: rotate(-1.5deg); transition: transform .6s var(--ease);
}
.frame-tilt:hover { transform: rotate(0deg) scale(1.02); }

.r45 { aspect-ratio: 4 / 5; }
.r34 { aspect-ratio: 3 / 4; }
.r11 { aspect-ratio: 1 / 1; }

/* ==========================================================================
   GRILLES ET CARTES
   ========================================================================== */
.grid-3, .grid-4 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}

.card {
  display: flex; flex-direction: column; gap: 11px;
  background: var(--card); border-radius: 24px; padding: 10px 10px 16px;
  box-shadow: var(--sh-card);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-card-hover); }
.card-img { overflow: hidden; border-radius: 16px; background: var(--beige); }
.card-img img { width: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card-img img { transform: scale(1.06); }
.card-body { display: flex; flex-direction: column; gap: 4px; padding: 0 8px; }
.card-title { font-weight: 700; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.card-title-lg { font-size: 18px; line-height: 1.2; }
.card-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.card-price {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; font-size: 15px; color: var(--accent); margin-top: 2px;
}
.card-price svg { transition: transform .35s var(--ease); }
.card:hover .card-price svg { transform: translateX(5px); }

.recall { text-align: center; font-size: 14px; color: var(--ink-soft); margin-top: 26px; }
.recall a { font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.center-cta { display: flex; justify-content: center; margin-top: 30px; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 13.5px; color: var(--ink);
  background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 16px;
  transition: border-color .25s, color .25s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.chip span { font-weight: 800; font-size: 12px; color: var(--accent); }
.chip:hover {
  border-color: var(--accent); color: var(--accent);
  transform: translateY(-3px); box-shadow: var(--sh-card);
}

/* ==========================================================================
   RAIL BEST-SELLERS
   ========================================================================== */
.rail-wrap { padding: 0; }
.rail {
  display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 14px var(--gutter) 24px;
  scroll-padding-left: var(--gutter);
  scrollbar-width: thin; scrollbar-color: var(--thumb) transparent;
  touch-action: pan-x;          /* au doigt, le rail ne part que sur les cotes */
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail::-webkit-scrollbar-thumb { background: var(--thumb); border-radius: 99px; }
.rail .card { flex: 0 0 auto; width: min(62vw, 250px); scroll-snap-align: start; }

/* ==========================================================================
   CARTES LUMINEUSES, portage du composant spotlight en CSS natif
   Le curseur alimente --x / --y / --xp sur <html> (assets/site.js)
   ========================================================================== */
.glow-card {
  --base: 318;                 /* teinte de depart, plein rose */
  --spread: 46;                /* la teinte glisse vers le framboise */
  --radius: 24;
  --border: 2;
  --size: 240;
  --border-size: calc(var(--border) * 1px);
  --spot: calc(var(--size) * 1px);
  --hue: calc(var(--base) + (var(--xp, .5) * var(--spread)));
  position: relative;
  border: var(--border-size) solid var(--rose-line);
  background-color: var(--card);
  background-image: radial-gradient(
    var(--spot) var(--spot) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue) 88% 82% / .30), transparent);
  background-attachment: fixed;
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  touch-action: manipulation;
}
.glow-card::before, .glow-card::after, .glow-halo::before {
  pointer-events: none; content: ""; position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed;
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* le liseré coloré qui suit le curseur */
.glow-card::before {
  background-image: radial-gradient(
    calc(var(--spot) * .75) calc(var(--spot) * .75) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue) 90% 64%), transparent 100%);
}
/* le point blanc, juste sous le curseur */
.glow-card::after {
  background-image: radial-gradient(
    calc(var(--spot) * .45) calc(var(--spot) * .45) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(0 0% 100% / .95), transparent 100%);
}
/* le halo diffus autour de la carte */
.glow-halo {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: calc(var(--radius) * 1px);
  filter: blur(18px); opacity: .75; will-change: filter;
}
.glow-halo::before {
  inset: -9px; border-width: 9px;
  border-radius: calc(var(--radius) * 1px + 9px);
  background-image: radial-gradient(
    calc(var(--spot) * .8) calc(var(--spot) * .8) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue) 92% 70%), transparent 100%);
}

/* ==========================================================================
   ATELIER, TUILES, BOUTIQUE
   ========================================================================== */
.atelier-grid, .teaser-grid {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 64px);
}
.atelier-grid > figure, .teaser-grid > figure { flex: 1 1 300px; max-width: 460px; margin: 0 auto; }
.atelier-grid > div, .teaser-grid > div { flex: 1.15 1 340px; display: flex; flex-direction: column; gap: 16px; }
.atelier-grid h1, .teaser-grid h2 { font-size: clamp(28px, 4vw, 44px); }

.args { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.arg { display: flex; align-items: flex-start; gap: 14px; }
.arg-dot {
  flex: none; width: 46px; height: 46px; border-radius: 999px;
  background: #fff; box-shadow: var(--sh-dot);
  display: grid; place-items: center; color: var(--accent);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.arg:hover .arg-dot { transform: scale(1.12) rotate(-8deg); box-shadow: var(--sh-card-hover); }
.arg h3 { font-size: 17.5px; margin-bottom: 3px; }
.arg p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

/* ==========================================================================
   LA PAGE A PROPOS, texte qui s'allume mot a mot
   Le JS pose --p sur le paragraphe (0 = tout estompe, 1 = tout allume) et
   --s sur chaque mot, sa position dans la phrase. Le reste est du calcul.
   ========================================================================== */
.about { max-width: 820px; }
.magic { --p: 1; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.55; }
.magic .mw {
  display: inline-block;
  opacity: clamp(.2, calc(.2 + .8 * (var(--p) - var(--s)) * var(--n)), 1);
}
.magic + .about-h { margin-top: clamp(30px, 4vw, 48px); }
.about-h {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px); color: var(--accent);
  margin-bottom: 12px;
}
.about-closing {
  margin-top: clamp(30px, 4vw, 48px); padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--border);
}
.about-list { display: flex; flex-direction: column; gap: 20px; margin-top: 6px; }
.about-list li { display: flex; align-items: flex-start; gap: 14px; }
.about-list h4 {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600;
  font-size: 18px; margin-bottom: 4px;
}
.about-list .magic { font-size: clamp(17px, 1.8vw, 21px); }

.sec-head > svg { animation: beat 3.2s ease-in-out infinite; }

.tile {
  background: #fff; border-radius: 24px; padding: 22px 20px;
  box-shadow: var(--sh-card);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--sh-card-hover); }
.tile h3 { font-size: 17.5px; margin-bottom: 7px; }
.tile p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

.shop-card {
  max-width: 820px; margin: 0 auto; background: #fff;
  border-radius: 24px; padding: clamp(28px, 6vw, 60px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 13px; box-shadow: var(--sh-shop);
}
.shop-card > svg { animation: beat 3.2s ease-in-out infinite; }
.shop-card h1 { font-size: clamp(28px, 4vw, 42px); }
.shop-card .kicker { justify-content: center; }
.shop-card .sub { margin-inline: auto; }
.shop-line, .shop-hours {
  display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--ink-soft);
}
.shop-line { font-weight: 700; font-size: 16.5px; color: var(--ink); }
.shop-line svg, .shop-hours svg { flex: none; color: var(--accent); }
.shop-hours { font-size: 15.5px; }
.shop-card .btn { margin-top: 12px; }

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.site-footer { background: var(--footer); color: var(--footer-ink); padding: clamp(44px, 7vw, 72px) 0 26px; }
.footer-inner, .footer-bottom { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.footer-inner { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 72px); }
.foot-col { display: flex; flex-direction: column; gap: 10px; flex: 1 1 150px; }
.foot-brand { flex: 1.2 1 250px; }
.foot-brand > p { font-size: 14px; line-height: 1.65; color: rgba(247, 216, 230, .85); max-width: 300px; }
.foot-title {
  font-family: "Mulish", sans-serif; font-weight: 800; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 216, 230, .7); margin-bottom: 4px;
}
.foot-col a { font-size: 14px; color: var(--footer-ink); transition: color .2s, transform .3s var(--ease); }
.foot-col a:not(.brand):hover { color: #fff; transform: translateX(4px); }
.foot-text { font-size: 14px; line-height: 1.65; color: rgba(247, 216, 230, .85); }
.pay-title { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; margin-top: 6px; }
.pay-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pay {
  border: 1px solid rgba(247, 216, 230, .45); border-radius: 999px;
  padding: 5px 11px; font-weight: 800; font-size: 10.5px; letter-spacing: .08em;
}
.footer-bottom {
  margin-top: 44px; padding-top: 20px;
  border-top: 1px solid rgba(247, 216, 230, .25);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: rgba(247, 216, 230, .8);
}
.footer-bottom a { font-weight: 700; color: #fff; }

/* ==========================================================================
   TITRES ANIMES AU SCROLL
   Le JS ne pose qu'une variable --t (0 = lettres eparpillees, 1 = en place).
   Chaque lettre en deduit son decalage a partir de sa distance au centre.
   ========================================================================== */
.split { perspective: 500px; --t: 1; }
.split .sw { display: inline-block; white-space: nowrap; }
.split .sc {
  display: inline-block;
  transform:
    translateX(calc(var(--d) * var(--sx) * (1 - var(--t)) * 1px))
    rotateX(calc(var(--d) * var(--rx) * (1 - var(--t)) * 1deg));
  will-change: transform;
}
/* les lettres debordent le temps de se rassembler, sans barre horizontale */
main, .band, .brandsplash, .showcase { overflow-x: clip; }

/* ==========================================================================
   APPARITIONS AU SCROLL
   ========================================================================== */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   IMAGES CLES
   ========================================================================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes drawLine { to { transform: scaleX(1); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.16); } 36% { transform: scale(1); } 54% { transform: scale(1.09); } }
@keyframes shotIn { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes underlineSwipe { 0% { transform: scaleX(1); } 45% { transform: scaleX(0); transform-origin: right; } 46% { transform-origin: left; } 100% { transform: scaleX(1); } }
@keyframes logoIn { from { opacity: 0; transform: scale(.86) translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes tapPop { 0% { transform: scale(1); } 45% { transform: scale(.9); } 100% { transform: scale(1); } }

/* ==========================================================================
   DESKTOP
   ========================================================================== */
@media (min-width: 900px) {
  .site-header .gmenu { display: flex; }
  .gmenu-bar { display: none; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .showcase-grid { grid-template-columns: repeat(4, 1fr); }
  .brand img { height: 60px; }
  .sec-head-split { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .sec-head-split .link-more { align-self: flex-end; padding-bottom: 4px; }
}

/* ==========================================================================
   MOUVEMENT REDUIT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hl::after { transform: scaleX(1); }
  .split .sc { transform: none !important; }
  .magic .mw { opacity: 1 !important; }
  body { opacity: 1 !important; }
}