/* Google Fonts for Hello Kitty theme */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Mochiy+Pop+One&family=Zen+Maru+Gothic&display=swap');

/* =====================================================================
   Boutique Hello Kitty — concept "Kawaii Y2K / Glossy Pop"
   Éditorial asymétrique, rails horizontaux, holographique, chrome glossy.
   Geste signature : l'étincelle (sparkle). Mobile-first. Variables.
   ===================================================================== */

:root {
  /* Palette Y2K */
  --lilac:   #F5B8CB;   /* secondaire, halos */
  --pink:    #E80D65;   /* principale, CTA */
  --sky:     #F5A0B5;   /* accent frais */
  --cream:   #FFEAEF;   /* fond */
  --ink:     #2B2440;   /* texte, contraste fort */
  --ink-soft:#6E6488;
  --blanc:   #FFFFFF;

  /* Surfaces glossy + chrome */
  --chrome: linear-gradient(135deg, #ffffff, #ffeaef 40%, #fdb8cf 70%, #ffeaef);
  --holo: linear-gradient(120deg, #E80D65, #f5b8cb 40%, #ffeaef 80%);
  --sheen: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 45%);

  --rayon: 18px;
  --rayon-lg: 28px;
  --rayon-sm: 12px;
  --ombre: 0 10px 0 rgba(43,36,64,.10);           /* ombre dure décalée, look sticker pop */
  --ombre-sm: 0 6px 0 rgba(43,36,64,.10);
  --ombre-soft: 0 18px 40px rgba(232,13,101,.18);

  --titre: 'Mochiy Pop One', system-ui, sans-serif;
  --corps: 'Zen Maru Gothic', system-ui, sans-serif;
  --manuscrit: 'Caveat', cursive;

  --maxw: 1200px;
}

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

body {
  counter-reset: sec;
  font-family: var(--corps);
  color: var(--ink);
  background-color: var(--cream);
  line-height: 1.65;
  /* fond holographique doux + fine grille arcade */
  background-image:
    radial-gradient(60% 50% at 12% 8%, rgba(232,13,101,.25), transparent 60%),
    radial-gradient(55% 45% at 88% 20%, rgba(245,176,203,.34), transparent 60%),
    radial-gradient(50% 45% at 70% 92%, rgba(232,13,101,.15), transparent 60%),
    linear-gradient(rgba(43,36,64,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,36,64,.035) 1px, transparent 1px);
  background-size: auto, auto, auto, 30px 30px, 30px 30px;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--titre); line-height: 1.18; font-weight: 400; }
img { max-width: 100%; display: block; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 6px; }

/* ---------- Geste signature : l'étincelle (sparkle) ---------- */
.bow { position: relative; display: inline-block; width: 20px; height: 20px; flex: none; }
.bow::before, .bow::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--pink);
}
.bow::before { width: 5px; height: 20px; transform: translate(-50%,-50%); border-radius: 50%/40%;
  -webkit-mask: radial-gradient(closest-side, #000 60%, transparent 62%) center/100% 100%; }
.bow::before { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); width: 20px; height: 20px; }
.bow::after { display: none; }
.bow i { display: none; }
.bow--mint::before { background: var(--sky); }

/* étiquette chrome (kicker) */
.kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--titre); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); background: var(--chrome);
  padding: .45rem 1rem; border-radius: 999px; margin-bottom: 1rem;
  box-shadow: inset 0 1px 0 #fff, var(--ombre-sm);
}
.kicker .bow { width: 15px; height: 15px; }

/* ---------- Boutons glossy ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--titre); font-size: .92rem; text-decoration: none; cursor: pointer;
  padding: .9em 1.7em; border-radius: 999px; border: 2px solid var(--ink); overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn::after { content: ""; position: absolute; inset: 0; background: var(--sheen); pointer-events: none; }
.btn i { width: 18px; height: 18px; position: relative; z-index: 1; }
.btn span, .btn { position: relative; }
.btn--primary { background: var(--pink); color: #fff; box-shadow: var(--ombre); }
.btn--ghost { background: var(--blanc); color: var(--ink); box-shadow: var(--ombre); }
.btn--mint { background: var(--sky); color: var(--ink); box-shadow: var(--ombre); }
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 8px 0 rgba(43,36,64,.18); }
.btn:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 rgba(43,36,64,.18); }

/* ---------- Sections plein écran + têtes éditoriales numérotées ---------- */
.section {
  counter-increment: sec;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 4.5rem 1.25rem; position: relative;
}
.section__head {
  max-width: var(--maxw); margin: 0 auto 2.4rem; width: 100%;
  text-align: left; position: relative; padding-left: 0;
}
.section__head h2 {
  font-size: clamp(1.9rem, 6.5vw, 3.2rem); margin-bottom: .6rem; line-height: 1.1;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .8rem;
}
.section__head h2::before {
  content: counter(sec, decimal-leading-zero);
  font-family: var(--titre); font-size: .55em;
  -webkit-text-stroke: 2px var(--pink); color: transparent;
  letter-spacing: .02em;
}
.section__intro { max-width: 600px; margin: 0; color: var(--ink-soft); font-size: 1.05rem; }

/* Bandeaux courts : rubans pleine largeur, hauteur naturelle (pas de numéro) */
.band { padding: 2.6rem 1.25rem; }

/* Flottement doux */
.float-soft { animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.float-slow { animation: floaty 7.5s ease-in-out infinite; }

/* =====================================================================
   1. HERO — asymétrique
   ===================================================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 2rem 1.25rem 3rem; overflow: hidden;
}
.hero__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 1.2rem; }
.hero__text { text-align: left; }
.hero__title {
  font-size: clamp(2.6rem, 13vw, 5rem); line-height: .98; margin-bottom: .5rem; color: var(--ink);
  text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(232,13,101,.25);
}
.hero__title span { color: var(--pink); display: block; }
.hero__tagline { font-family: var(--manuscrit); color: var(--ink); font-size: 1.6rem; margin-bottom: .8rem; }
.hero__tagline::before { content: "✦ "; color: var(--sky); }
.hero__lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 460px; margin-bottom: 1.4rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__promo { margin-top: 1.2rem; font-family: var(--titre); font-size: .9rem; }
.hero__promo strong { background: var(--ink); color: #fff; padding: .2em .6em; border-radius: 8px; letter-spacing: .04em; }

.hero__scene { position: relative; display: flex; justify-content: center; align-items: center; min-height: 260px; margin-top: 1rem; }
.hero__hero-img {
  position: relative; z-index: 2; max-height: 320px; width: auto;
  filter: drop-shadow(0 16px 0 rgba(43,36,64,.12));
}
.hero__blob {
  position: absolute; z-index: 1; width: 80%; max-width: 360px; aspect-ratio: 1/1; left: 50%; top: 50%;
  transform: translate(-50%,-50%) rotate(8deg);
  background: var(--holo); border-radius: 42% 58% 55% 45% / 55% 48% 52% 45%;
  filter: blur(2px); opacity: .9;
}
.hero__blob::after { content: ""; position: absolute; inset: 8px; border-radius: inherit; background: var(--sheen); }
.hero__float { position: absolute; z-index: 3; max-height: 54px; width: auto; filter: drop-shadow(0 6px 0 rgba(43,36,64,.12)); }
.hero__float--1 { top: 6%; left: 4%; }
.hero__float--2 { bottom: 12%; right: 4%; }
.hero__float--3 { top: 26%; right: 14%; max-height: 38px; }
.hero__scroll {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; background: var(--blanc); color: var(--pink);
  display: grid; place-items: center; border: 2px solid var(--ink); box-shadow: var(--ombre-sm);
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,6px)} }

/* =====================================================================
   MARQUEE (bandeau défilant)
   ===================================================================== */
.marquee {
  background: var(--ink); color: #fff; border-top: 3px solid var(--pink); border-bottom: 3px solid var(--pink);
  overflow: hidden; padding: .7rem 0;
}
.marquee__track { display: inline-flex; gap: 2.5rem; white-space: nowrap; will-change: transform; animation: slide 22s linear infinite; }
.marquee span { font-family: var(--titre); font-size: 1rem; letter-spacing: .05em; display: inline-flex; align-items: center; gap: 2.5rem; }
.marquee span::before { content: "✦"; color: var(--sky); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   2. RÉASSURANCE
   ===================================================================== */
.reassurance { background: linear-gradient(160deg, #ffeaef, #ffe0e8); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.reassurance__list {
  list-style: none; max-width: var(--maxw); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr; gap: 1.2rem;
}
.reassurance__list li { display: flex; align-items: center; gap: .9rem; }
.reassurance__list .ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--chrome); color: var(--pink); border: 2px solid var(--ink); }
.reassurance__list .ic i { width: 22px; height: 22px; }
.reassurance__list strong { display: block; font-family: var(--titre); font-size: .95rem; }
.reassurance__list span { font-size: .88rem; color: var(--ink-soft); }

/* =====================================================================
   RAILS horizontaux (catégories + produits)
   ===================================================================== */
.rail {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem .25rem 1.5rem; scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--lilac); border-radius: 8px; }
.rail-hint { max-width: var(--maxw); margin: 0 auto .4rem; width: 100%; font-family: var(--titre); font-size: .8rem; color: var(--ink-soft); display: flex; align-items: center; gap: .4rem; }
.rail-hint i { width: 16px; height: 16px; }

/* ---------- Cartes catégories (glossy chrome) ---------- */
.cat-card {
  position: relative; background: var(--blanc); border: 2px solid var(--ink);
  border-radius: var(--rayon); padding: 1.5rem; box-shadow: var(--ombre); overflow: hidden;
}
.cat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 38%; background: var(--sheen); pointer-events: none; }
.cat-card__icon { position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1rem; color: #fff; border: 2px solid var(--ink); }
.cat-card__icon i { width: 26px; height: 26px; }
.cat-card:nth-child(4n+1) .cat-card__icon { background: var(--pink); }
.cat-card:nth-child(4n+2) .cat-card__icon { background: var(--sky); }
.cat-card:nth-child(4n+3) .cat-card__icon { background: var(--lilac); }
.cat-card:nth-child(4n+4) .cat-card__icon { background: #ffc857; }
.cat-card h3 { position: relative; z-index: 1; font-size: 1.15rem; margin-bottom: .4rem; }
.cat-card p { color: var(--ink-soft); margin-bottom: 1rem; font-size: .92rem; }
.link-bow { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--titre); font-size: .85rem; color: var(--pink); text-decoration: none; }
.link-bow i { width: 16px; height: 16px; transition: transform .15s ease; }
.link-bow:hover i { transform: translateX(4px); }

/* ---------- Guide d'achat (cartes décalées) ---------- */
.guide__grid { max-width: var(--maxw); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.guide__col { background: var(--blanc); border: 2px solid var(--ink); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.6rem; }
.guide__col-title { font-family: var(--titre); font-size: 1.1rem; margin-bottom: .6rem; color: var(--pink); display: flex; align-items: center; gap: .5rem; }
.guide__col p { color: var(--ink-soft); margin-bottom: .8rem; }
.guide__col p:last-child { margin-bottom: 0; }

/* =====================================================================
   CARTES PRODUITS (placeholders)
   ===================================================================== */
.product-card {
  position: relative; background: var(--blanc); border: 2px solid var(--ink); border-radius: var(--rayon);
  padding: .9rem; box-shadow: var(--ombre); display: flex; flex-direction: column;
}
.product-card__flag {
  position: absolute; top: -10px; right: 14px; z-index: 3; transform: rotate(6deg);
  font-family: var(--titre); font-size: .68rem; color: #fff; background: var(--ink);
  padding: .3em .8em; border-radius: 8px; border: 2px solid var(--ink);
}
.product-card__media {
  position: relative; border-radius: var(--rayon-sm); aspect-ratio: 1/1; display: grid; place-items: center;
  margin-bottom: .9rem; overflow: hidden; border: 2px solid var(--ink);
  background: repeating-linear-gradient(45deg, rgba(232,13,101,.12) 0 14px, rgba(245,176,203,.18) 14px 28px);
}
.product-card__media::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 40%; background: var(--sheen); }
.product-card__media .ph { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; font-family: var(--titre); color: var(--ink-soft); font-size: .82rem; }
.product-card__media .ph i { width: 32px; height: 32px; color: var(--pink); }
.product-card__name { font-family: var(--titre); font-size: .98rem; margin-bottom: .15rem; }
.product-card__cat { font-size: .74rem; color: var(--sky); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .7rem; }
.product-card__bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.product-card__price { font-family: var(--titre); font-size: 1.15rem; color: var(--ink); }
.product-card__price s { font-size: .8rem; color: var(--ink-soft); }
.product-card__add { border: 2px solid var(--ink); background: var(--pink); color: #fff; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; flex: none; display: grid; place-items: center; box-shadow: var(--ombre-sm); transition: transform .12s ease; }
.product-card__add:hover { transform: translate(-2px,-2px); }
.product-card__add i { width: 20px; height: 20px; }

/* =====================================================================
   FEATURE image + texte (offset + rotation)
   ===================================================================== */
.feature__inner { max-width: var(--maxw); margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 2rem; align-items: center; }
.feature__media { position: relative; display: grid; place-items: center; width: 100%; min-height: 260px; }
.feature__media::before {
  content: ""; position: absolute; width: 74%; aspect-ratio: 1/1; border-radius: var(--rayon-lg);
  background: var(--holo); border: 3px solid var(--ink); box-shadow: var(--ombre); transform: rotate(-5deg);
}
.feature--reverse .feature__media::before { transform: rotate(5deg); }
.feature__media img { max-height: 320px; width: auto; position: relative; z-index: 2; filter: drop-shadow(0 14px 0 rgba(43,36,64,.14)); }
.feature__media--empty::before { background: var(--cream); }
.feature__blob { display: none; }
.feature__text h2 { font-size: clamp(1.7rem, 6vw, 2.6rem); margin: .4rem 0 .8rem; }
.feature__text p { color: var(--ink-soft); margin-bottom: .8rem; }
.soft-list { list-style: none; margin-top: 1rem; display: grid; gap: .7rem; }
.soft-list li { display: flex; align-items: center; gap: .6rem; font-weight: 700; }

/* =====================================================================
   CHIFFRES
   ===================================================================== */
.stats { background: var(--ink); border-top: 3px solid var(--pink); border-bottom: 3px solid var(--pink); }
.stats__list {
  list-style: none; max-width: var(--maxw); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; text-align: center;
}
.stats__num { display: block; font-family: var(--titre); font-size: clamp(2rem,9vw,3rem); color: #fff; }
.stats__num::after { content: ""; }
.stats li:nth-child(odd) .stats__num { color: var(--sky); }
.stats li:nth-child(even) .stats__num { color: var(--lilac); }
.stats__label { color: #cfc7e6; font-size: .88rem; }

/* =====================================================================
   INTERACTIF : Machine à pince (claw machine)
   ===================================================================== */
.gacha { max-width: 540px; margin: 0 auto; width: 100%; }
.gacha__machine { background: var(--blanc); border: 3px solid var(--ink); border-radius: var(--rayon-lg); box-shadow: var(--ombre); padding: 1.6rem; text-align: center; }
.gacha__dome {
  position: relative; height: 230px; margin: 0 auto 1.2rem; border-radius: var(--rayon);
  background: linear-gradient(180deg, #e7f6ff, #ffe6f3); border: 3px solid var(--ink); overflow: hidden;
}
.gacha__dome::before {
  /* la pince qui pend du haut */
  content: ""; position: absolute; top: 0; left: 50%; width: 3px; height: 46px; background: var(--ink);
  transform: translateX(-50%); transition: height .5s ease;
}
.gacha.is-spinning .gacha__dome::before { height: 120px; }
.gacha__capsule {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 70px; border-radius: 14px; border: 3px solid var(--ink);
  background: var(--chrome); display: grid; place-items: center; color: var(--ink);
  transition: top .5s ease;
}
.gacha.is-spinning .gacha__capsule { top: 116px; animation: sway .6s ease-in-out infinite; }
@keyframes sway { 0%,100%{transform:translateX(-58%)} 50%{transform:translateX(-42%)} }
.gacha__capsule i { width: 30px; height: 30px; }
.gacha__reveal { position: absolute; inset: 0; display: none; place-items: center; }
.gacha.is-open .gacha__capsule { display: none; }
.gacha.is-open .gacha__dome::before { height: 46px; }
.gacha.is-open .gacha__reveal { display: grid; }
.gacha__reveal img { max-height: 170px; width: auto; filter: drop-shadow(0 10px 0 rgba(43,36,64,.14)); animation: pop .4s ease; }
@keyframes pop { from { opacity: 0; transform: scale(.8) rotate(-4deg); } to { opacity: 1; transform: scale(1); } }
.gacha__knob { font-family: var(--titre); font-size: .95rem; background: var(--pink); color: #fff; border: 2px solid var(--ink); cursor: pointer; padding: .8em 1.8em; border-radius: 999px; box-shadow: var(--ombre-sm); transition: transform .12s ease; }
.gacha__knob:hover { transform: translate(-2px,-2px); }
.gacha__knob:disabled { opacity: .6; cursor: wait; }
.gacha__result { margin-top: 1.2rem; min-height: 64px; }
.gacha__result .name { font-family: var(--titre); font-size: 1.2rem; color: var(--pink); }
.gacha__result .msg { font-family: var(--manuscrit); font-size: 1.3rem; color: var(--ink); }
.gacha__result .reco { color: var(--ink-soft); margin-top: .3rem; }

/* =====================================================================
   PROMO
   ===================================================================== */
.promo { background: var(--lilac); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.promo__inner {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  display: flex; flex-direction: column; gap: 1.3rem; align-items: flex-start; text-align: left;
}
.promo__text h2 { font-size: clamp(1.7rem,6vw,2.6rem); margin: .3rem 0 .5rem; color: var(--ink); }
.promo__text p { color: var(--ink); max-width: 480px; }
.promo__code { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--titre); font-size: 1.25rem; letter-spacing: .04em; background: var(--blanc); color: var(--ink); border: 2px dashed var(--pink); border-radius: 14px; padding: .7em 1.2em; cursor: pointer; box-shadow: var(--ombre-sm); transition: transform .12s ease; }
.promo__code:hover { transform: translate(-2px,-2px); }
.promo__code i { width: 22px; height: 22px; color: var(--pink); }

/* =====================================================================
   AVIS
   ===================================================================== */
.grid--reviews { max-width: var(--maxw); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.review-card { background: var(--blanc); border: 2px solid var(--ink); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.5rem; }
.review-card__stars { display: flex; gap: .15rem; color: #ffc857; margin-bottom: .8rem; }
.review-card__stars i { width: 20px; height: 20px; fill: #ffc857; }
.review-card blockquote { font-size: 1.02rem; margin-bottom: 1rem; }
.review-card figcaption { font-family: var(--titre); font-size: .85rem; color: var(--ink-soft); display: flex; align-items: center; gap: .5rem; }
.review-card .pastille { width: 34px; height: 34px; border-radius: 10px; background: var(--chrome); color: var(--ink); display: grid; place-items: center; border: 2px solid var(--ink); flex: none; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq__list { max-width: 760px; margin: 0 auto; width: 100%; display: grid; gap: .9rem; }
.faq-item { background: var(--blanc); border: 2px solid var(--ink); border-radius: var(--rayon-sm); box-shadow: var(--ombre-sm); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--titre); font-size: .98rem; padding: 1.1rem 1.2rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { width: 22px; height: 22px; flex: none; transition: transform .2s ease; color: var(--pink); }
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item__body { padding: 0 1.2rem 1.2rem; color: var(--ink-soft); }

/* =====================================================================
   NEWSLETTER
   ===================================================================== */
.newsletter__card { position: relative; overflow: hidden; max-width: 760px; margin: 0 auto; width: 100%; text-align: left; background: var(--ink); color: #fff; border: 3px solid var(--pink); border-radius: var(--rayon-lg); box-shadow: var(--ombre); padding: 2.6rem 1.6rem; }
.newsletter__card .kicker { color: var(--ink); }
.newsletter__card h2 { font-size: clamp(1.6rem,6vw,2.4rem); margin-bottom: .6rem; color: #fff; }
.newsletter__card p { color: #cfc7e6; max-width: 480px; margin: 0 0 1.4rem; }
.newsletter__deco { position: absolute; top: -16px; right: -8px; width: 92px; opacity: .9; transform: rotate(12deg); }
.newsletter__form { max-width: 480px; }
.field { display: flex; flex-direction: column; gap: .6rem; }
.field input { font-family: var(--corps); font-size: 1rem; padding: .9em 1.2em; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); }
.field input::placeholder { color: var(--ink-soft); }
.field__error { color: #ffd0e2; font-weight: 700; margin-top: .6rem; }
.newsletter__small { font-size: .8rem; color: #a99fc6; margin-top: 1rem; }

/* =====================================================================
   TOAST
   ===================================================================== */
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 200%); z-index: 999; background: var(--ink); color: #fff; font-family: var(--titre); font-size: .9rem; padding: .9em 1.4em; border-radius: 999px; border: 2px solid var(--pink); box-shadow: var(--ombre); transition: transform .35s cubic-bezier(.2,.9,.3,1.3); max-width: 90vw; text-align: center; }
.toast.is-visible { transform: translate(-50%, 0); }

/* =====================================================================
   Apparition au scroll
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (min-width: 640px) {
  .reassurance__list { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .rail { grid-auto-columns: 42%; }
  .guide__grid { grid-template-columns: repeat(3, 1fr); }
  .stats__list { grid-template-columns: repeat(4, 1fr); }
  .grid--reviews { grid-template-columns: repeat(3, 1fr); }
  .field { flex-direction: row; }
  .field input { flex: 1; }
}

@media (min-width: 1000px) {
  .hero__inner { flex-direction: row; align-items: center; gap: 2rem; }
  .hero__text { flex: 1.1; }
  .hero__scene { flex: .9; min-height: 420px; margin-top: 0; }
  .hero__hero-img { max-height: 460px; }

  .reassurance__list { grid-template-columns: repeat(4, 1fr); }

  /* Sur desktop les rails deviennent des grilles équilibrées */
  .rail { display: grid; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .rail#product-grid { grid-template-columns: repeat(3, 1fr); }
  .rail-hint { display: none; }

  .feature__inner { flex-direction: row; }
  .feature--reverse .feature__inner { flex-direction: row-reverse; }
  .feature__media, .feature__text { flex: 1; }
  .feature__media img { max-height: 400px; }
  .feature__text { padding-left: 1rem; }
  .feature--reverse .feature__text { padding-left: 0; padding-right: 1rem; }

  .promo__inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* =====================================================================
   prefers-reduced-motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none !important; }
}


/* Overrides */
.pp-wrapper * { box-sizing: border-box; }
.pp-wrapper { font-family: var(--corps); color: var(--ardoise); line-height: 1.6; }
.pp-wrapper h1, .pp-wrapper h2, .pp-wrapper h3 { font-family: var(--titre); line-height: 1.1; font-weight: 700; }
.pp-wrapper img { max-width: 100%; display: block; height: auto; }
.pp-wrapper .hero { min-height: 100svh !important; }
.pp-wrapper .feature { min-height: 100svh !important; }
.pp-wrapper .bestsellers, .pp-wrapper .reviews, .pp-wrapper .faq, .pp-wrapper .guide,
.pp-wrapper .collections, .pp-wrapper .gacha-section, .pp-wrapper .reassurance,
.pp-wrapper .stats, .pp-wrapper .promo, .pp-wrapper .newsletter, .pp-wrapper .marquee { min-height: auto !important; }

.pp-wrapper .guide__col {
  background: var(--blanc); border: 3px solid var(--ardoise); border-radius: var(--rayon);
  box-shadow: var(--ombre-collee); padding: 1.8rem; transition: transform 0.15s ease;
}
.pp-wrapper .guide__col:hover { transform: translateY(-3px); }
.pp-wrapper .guide__col-title { font-family: var(--titre); font-weight: 700; font-size: 1.2rem; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.5rem; }

@media (min-width: 640px) {
  .pp-wrapper .grid--reviews { grid-template-columns: repeat(3,1fr); }
  .pp-wrapper .reassurance__list { grid-template-columns: repeat(2,1fr); }
  .pp-wrapper .stats__list { grid-template-columns: repeat(4,1fr); }
}
@media (min-width: 900px) {
  .pp-wrapper .reassurance__list { grid-template-columns: repeat(4,1fr); }
  .pp-wrapper .guide__grid { grid-template-columns: repeat(3,1fr); }
  .pp-wrapper .feature__inner { flex-direction: row !important; }
  .pp-wrapper .feature--reverse .feature__inner { flex-direction: row-reverse !important; }
}
.pp-wrapper .bestsellers ul.products {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem;
  max-width: var(--maxw); margin: 0 auto; padding: 0; list-style: none;
}
@media (min-width: 640px) { .pp-wrapper .bestsellers ul.products { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 900px) { .pp-wrapper .bestsellers ul.products { grid-template-columns: repeat(4,1fr); } }
.pp-wrapper .bestsellers ul.products::before, .pp-wrapper .bestsellers ul.products::after { display: none !important; }
.pp-wrapper .bestsellers li.product { width: 100% !important; margin: 0 !important; clear: none !important; float: none !important; }
.page-id-10 .shoptimizer-archive .col-full { max-width: 100% !important; padding: 0 !important; }
.page-id-10 .content-area { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
.page-id-10 .shoptimizer-archive .archive-header { display: none; }
.pp-wrapper .cat-card { display: flex; flex-direction: column; }
.pp-wrapper .cat-card .link-bow { margin-top: auto; }
.pp-wrapper .newsletter { padding-top: 3rem !important; padding-bottom: 3rem !important; }


/* =====================================================================
   Shoptimizer / WordPress integration overrides
   ===================================================================== */

.shoptimizer.archive .site-main .entry-content, .shoptimizer .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

.shoptimizer.archive #primary.content-area, .shoptimizer #primary.content-area {
  max-width: 100% !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}

.shoptimizer.archive .col-full, .shoptimizer .col-full {
  max-width: 100% !important;
}

.pp-wrapper {
  width: 100%;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.pp-wrapper > section,
.pp-wrapper > div {
  width: 100vw;
  max-width: 100vw;
  margin-left: 0;
  margin-right: 0;
}

/* Preconnect to Google Fonts */
@font-face { font-family: 'preloaded'; src: local('☺'); }

/* =====================================================================
   WooCommerce product cards styling (for [products] shortcode)
   ===================================================================== */

.pp-wrapper ul.products {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  max-width: var(--maxw); margin: 0 auto; padding: 0; list-style: none;
}
@media (min-width: 640px) { .pp-wrapper ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .pp-wrapper ul.products { grid-template-columns: repeat(4, 1fr); } }
.pp-wrapper ul.products::before, .pp-wrapper ul.products::after { display: none !important; }
.pp-wrapper ul.products li.product {
  width: 100% !important; margin: 0 !important; clear: none !important; float: none !important;
  background: var(--blanc); border: 2px solid var(--ink); border-radius: var(--rayon);
  padding: 1rem; box-shadow: var(--ombre); display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.pp-wrapper ul.products li.product::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 38%;
  background: var(--sheen); pointer-events: none;
}
.pp-wrapper ul.products li.product a.woocommerce-LoopProduct-link {
  position: relative; z-index: 1; margin-bottom: 0.5rem;
}
.pp-wrapper ul.products li.product img {
  border-radius: var(--rayon-sm); border: 2px solid var(--ink);
  aspect-ratio: 1/1; object-fit: cover; width: 100%;
}
.pp-wrapper ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--titre); font-size: 1rem; margin: 0.5rem 0 0.3rem;
  color: var(--ink); padding: 0; position: relative; z-index: 1;
}
.pp-wrapper ul.products li.product .price {
  font-family: var(--titre); font-size: 1.1rem; color: var(--pink);
  margin-bottom: 0.7rem; position: relative; z-index: 1;
}
.pp-wrapper ul.products li.product .price del {
  font-size: 0.8rem; color: var(--ink-soft);
}
.pp-wrapper ul.products li.product .price ins {
  text-decoration: none; color: var(--pink); font-weight: 700;
}
.pp-wrapper ul.products li.product .button {
  margin-top: auto !important; position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-family: var(--titre); font-size: 0.85rem; text-decoration: none;
  background: var(--pink) !important; color: #fff !important;
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 0.6em 1.4em; box-shadow: var(--ombre-sm);
  transition: transform 0.12s ease;
}
.pp-wrapper ul.products li.product .button:hover {
  transform: translate(-2px, -2px); background: var(--pink) !important;
}
.pp-wrapper ul.products li.product .star-rating {
  position: relative; z-index: 1; margin: 0.3rem 0;
}

/* =====================================================================
   Button color improvements
   ===================================================================== */

.pp-wrapper .btn--ghost {
  background: #FFEAEF !important;
  color: var(--pink) !important;
  border-color: var(--pink) !important;
}
.pp-wrapper .btn--ghost:hover {
  background: var(--pink) !important;
  color: #fff !important;
}

.pp-wrapper .hero__title {
  text-shadow: 3px 3px 0 #FFEAEF, 6px 6px 0 rgba(232,13,101,.25);
}

/* =====================================================================
   Search bar - remove white border/background
   ===================================================================== */
.site-header .site-search .dgwt-wcas-search-wrapp {
  background: transparent !important;
}
.site-header .site-search .dgwt-wcas-sf-wrapp {
  background: #FFEAEF !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0 !important;
}
.site-header .site-search .dgwt-wcas-sf-wrapp input.dgwt-wcas-search-input {
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 16px !important;
}
.site-header .site-search .dgwt-wcas-sf-wrapp .dgwt-wcas-ico-magnifier {
  display: none !important;
}
.site-header .site-search .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit {
  background: #E80D65 !important;
  border-radius: 999px !important;
  margin: 4px !important;
}
.site-search .dgwt-wcas-search-wrapp {
  background: transparent !important;
}
.site-search .dgwt-wcas-sf-wrapp {
  background: #FFEAEF !important;
  border: none !important;
  border-radius: 999px !important;
}

/* =====================================================================
   Product cards - uniform sizing
   ===================================================================== */
.pp-wrapper ul.products li.product {
  min-height: 380px !important;
}
.pp-wrapper ul.products li.product img {
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  max-height: 200px !important;
  width: 100% !important;
}
.pp-wrapper ul.products li.product .woocommerce-loop-product__title {
  min-height: 2.4em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* =====================================================================
   Search bar - clean white, NO pink dot
   Overrides DGWT Pirx style
   ===================================================================== */

/* Reset the DGWT Pirx wrapper */
.site-header .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx {
  max-width: 100% !important;
  background: transparent !important;
}

/* Remove Pirx padding/background from sf-wrapp */
.site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
  background: #ffffff !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 999px !important;
  padding: 0 !important;
}

/* Search input - clean, no extra padding for Pirx icon */
.site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input.dgwt-wcas-search-input {
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  color: #333 !important;
}

/* Hide the Pirx circular submit button completely */
.site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
  display: none !important;
}

/* Hide Pirx preloader margin */
.site-header .dgwt-wcas-style-pirx .dgwt-wcas-preloader {
  margin-right: 0 !important;
}

/* Mobile search bar */
.site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
  background: #ffffff !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 999px !important;
  padding: 0 !important;
}
.site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input.dgwt-wcas-search-input {
  background: transparent !important;
  border: none !important;
  padding: 10px 16px !important;
}
.site-search .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
  display: none !important;
}