/* ===========================================================
   ✿ Câlins & Threads — Direction Artistique
   Scrapbook girly · polaroïds · washi tape · cœurs · stickers
   =========================================================== */

/* ───────── Palette dominante ROSE (override) ───────── */
:root {
  --bg-pink:       #FFEFF5;   /* fond principal */
  --bg-pink-2:     #FBD8E5;   /* alternance section */
  --bg-cream:      #FFF6EE;   /* cards / pop blanc-crème */
  --washi-1:       #F4A6B5;   /* tape rose */
  --washi-2:       #E5C9F5;   /* tape lavande */
  --washi-3:       #C9E5C2;   /* tape menthe */
  --washi-4:       #FFDEA0;   /* tape miel */
  --ink:           #4A2A33;   /* texte foncé chaud */
  --ink-soft:      #8C5A6B;   /* texte secondaire */
  --rose-bright:   #D8527A;   /* CTA */
  --rose-deep:     #A8345B;   /* hover */
  --rose-pop:      #FF6B97;   /* accent fun */
  --gold-warm:     #D9A95C;
  --shadow-rose:   0 12px 32px -12px rgba(216, 82, 122, 0.4);
  --shadow-card:   0 8px 30px -10px rgba(74, 42, 51, 0.18);
  --paper-tape:    0 2px 4px rgba(0,0,0,0.08);
}

/* ───────── Background : rose dominant ───────── */
body {
  background:
    radial-gradient(at 12% 8%,  rgba(255, 178, 196, 0.55) 0px, transparent 45%),
    radial-gradient(at 88% 18%, rgba(229, 201, 245, 0.45) 0px, transparent 50%),
    radial-gradient(at 50% 95%, rgba(255, 222, 234, 0.65) 0px, transparent 55%),
    radial-gradient(at 5% 80%,  rgba(255, 207, 222, 0.5) 0px, transparent 50%),
    linear-gradient(180deg, var(--bg-pink) 0%, #FFF8F8 100%) !important;
  color: var(--ink) !important;
}

/* Le motif texture papier garde son rôle */
body::before { opacity: 0.04 !important; }

/* ───────── Cœurs flottants (existants, on bouge plus) ───────── */
.bg-hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-hearts span {
  position: absolute;
  opacity: 0;
  animation: float-up 14s linear infinite;
  filter: drop-shadow(0 2px 6px rgba(216, 82, 122, 0.35));
}
.bg-hearts span:nth-child(1)  { left: 5%;  animation-delay: 0s;   font-size: 1rem;    color: var(--rose-pop); }
.bg-hearts span:nth-child(2)  { left: 18%; animation-delay: 3s;   font-size: 1.5rem;  color: var(--rose-bright); }
.bg-hearts span:nth-child(3)  { left: 32%; animation-delay: 6s;   font-size: 1.1rem;  color: var(--rose-pop); }
.bg-hearts span:nth-child(4)  { left: 47%; animation-delay: 1.5s; font-size: 1.3rem;  color: var(--gold-warm); }
.bg-hearts span:nth-child(5)  { left: 61%; animation-delay: 4s;   font-size: 0.9rem;  color: var(--rose-bright); }
.bg-hearts span:nth-child(6)  { left: 73%; animation-delay: 7s;   font-size: 1.4rem;  color: var(--rose-pop); }
.bg-hearts span:nth-child(7)  { left: 87%; animation-delay: 2s;   font-size: 1rem;    color: var(--washi-2); }
.bg-hearts span:nth-child(8)  { left: 12%; animation-delay: 9s;   font-size: 0.85rem; color: var(--rose-bright); }
.bg-hearts span:nth-child(9)  { left: 55%; animation-delay: 11s;  font-size: 1.2rem;  color: var(--rose-pop); }
.bg-hearts span:nth-child(10) { left: 90%; animation-delay: 5s;   font-size: 1rem;    color: var(--gold-warm); }
@keyframes float-up {
  0%   { transform: translateY(105vh) rotate(0) scale(0.7);  opacity: 0; }
  10%  { opacity: 0.65; }
  50%  { transform: translateY(50vh) rotate(180deg) scale(1.05); }
  90%  { opacity: 0.45; }
  100% { transform: translateY(-15vh) rotate(360deg) scale(0.5); opacity: 0; }
}

/* ───────── Marquee — discret, défilant ───────── */
.marquee {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(216, 82, 122, 0.12);
  border-bottom: 1px solid rgba(216, 82, 122, 0.12);
  position: relative;
  z-index: 5;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  padding: 0.55rem 0;
  animation: marquee 35s linear infinite;
  will-change: transform;
  /* Permet à la track de dépasser visuellement le viewport */
  width: max-content;
}
.marquee-track > span { white-space: nowrap; font-weight: 500; }
.marquee-track > span em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.22em;
}
.marquee-track .marquee-sep {
  color: var(--rose-bright);
  font-size: 0.9rem;
  letter-spacing: 0;
  opacity: 0.8;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Pause au survol — petit luxe */
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ───────── Header ───────── */
.site-header {
  background: rgba(255, 239, 245, 0.92) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(216, 82, 122, 0.18) !important;
  z-index: 60 !important;
}

.brand {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em;
  position: relative;
}
.brand::after {
  content: "✿";
  position: absolute;
  top: -0.5em;
  right: -0.9em;
  font-size: 0.65em;
  color: var(--rose-bright);
  animation: spin-flower 6s linear infinite;
}
@keyframes spin-flower {
  to { transform: rotate(360deg); }
}
.brand .amp {
  font-family: var(--font-script);
  color: var(--rose-bright);
  font-style: italic;
  font-size: 1.15em;
}

.nav-desktop a {
  position: relative;
  color: var(--ink) !important;
  font-weight: 500;
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 3px;
  background: var(--rose-bright);
  border-radius: 1px;
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-desktop a:hover::after,
.nav-desktop a[aria-current="page"]::after { width: 60%; }

/* ───────── Typographie : titres affirmés ───────── */
h1, h2, h3, h4 { color: var(--ink) !important; letter-spacing: -0.015em; }

.script {
  font-family: var(--font-script) !important;
  color: var(--rose-bright) !important;
  font-weight: 700 !important;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.script:hover { transform: rotate(-2deg) scale(1.05); }

.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: "";
  display: block;
  width: 80%;
  height: 8px;
  margin-top: 0.25rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><path d='M2 4 Q 30 -2, 60 4 T 120 4 T 180 4' fill='none' stroke='%23D8527A' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ───────── HERO : polaroid + stickers ───────── */
.hero { padding: 5rem 0 8rem !important; position: relative; }
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 80px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'><path d='M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,80 L0,80 Z' fill='%23FFF6EE'/></svg>");
  background-size: cover;
  pointer-events: none;
}

.hero h1 {
  color: var(--ink) !important;
  font-style: normal !important;
}
.hero h1 em, .hero h1 .amp { color: var(--rose-bright); font-style: italic; }

.hero-image {
  background: white !important;
  padding: 14px 14px 60px 14px !important;
  border-radius: 4px !important;
  box-shadow: 0 16px 40px -10px rgba(168, 52, 91, 0.35), 0 4px 12px rgba(0,0,0,0.08) !important;
  border: none !important;
  transform: rotate(-2.5deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: visible !important;
}
.hero-image:hover { transform: rotate(0) scale(1.02); }
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.hero-image > div:not(.blob-1):not(.blob-2):not(.hero-image-placeholder) { display: none; }

/* Washi tape sur le polaroid hero */
.hero-image::before, .hero-image::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 22px;
  background: var(--washi-1);
  background-image: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.3) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.3) 75%);
  background-size: 8px 8px;
  box-shadow: var(--paper-tape);
  z-index: 3;
}
.hero-image::before {
  top: -12px;
  left: -15px;
  transform: rotate(-22deg);
}
.hero-image::after {
  top: -12px;
  right: -15px;
  transform: rotate(22deg);
  background: var(--washi-2);
  background-image: inherit;
  background-size: inherit;
}

/* Blobs deviennent stickers décoratifs */
.hero-image .blob-1, .hero-image .blob-2 { display: none; }

/* Stickers flottants autour du hero */
.hero-stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-stickers .sticker {
  position: absolute;
  font-size: 2.5rem;
  filter: drop-shadow(0 4px 8px rgba(216, 82, 122, 0.3));
  animation: sticker-wobble 4s ease-in-out infinite;
}
.hero-stickers .sticker:nth-child(1) { top: 12%; left: 8%;  animation-delay: 0s; }
.hero-stickers .sticker:nth-child(2) { top: 70%; left: 5%;  animation-delay: 1s; font-size: 1.8rem; }
.hero-stickers .sticker:nth-child(3) { top: 20%; right: 8%; animation-delay: 2s; font-size: 2rem; }
.hero-stickers .sticker:nth-child(4) { top: 78%; right: 3%; animation-delay: 0.5s; font-size: 2.2rem; }
@keyframes sticker-wobble {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-10px) rotate(6deg); }
}

/* ───────── Sections alternées rose ↔ crème ───────── */
section { position: relative; }
section.cream-section { background: var(--bg-cream); }
section.pink-section  { background: linear-gradient(180deg, var(--bg-pink-2) 0%, var(--bg-pink) 100%); }

/* Wave divider — entre sections */
.wave-divider {
  display: block;
  width: 100%;
  height: 60px;
  margin: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C240,60 480,0 720,30 C960,60 1200,0 1440,30 L1440,60 L0,60 Z' fill='%23FBD8E5'/></svg>");
  background-size: cover;
}
.wave-divider.up {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C240,0 480,60 720,30 C960,0 1200,60 1440,30 L1440,0 L0,0 Z' fill='%23FBD8E5'/></svg>");
}

/* ───────── Buttons — squishy + lisibles ───────── */
.btn {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 999px;
  padding: 0.95rem 1.75rem !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s,
              background 0.2s,
              color 0.2s !important;
}

.btn-primary {
  background: var(--rose-bright) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 6px 0 var(--rose-deep), 0 12px 24px -10px rgba(168, 52, 91, 0.5);
}
.btn-primary:hover {
  background: var(--rose-deep) !important;
  transform: translateY(-3px);
  box-shadow: 0 9px 0 var(--rose-deep), 0 18px 28px -10px rgba(168, 52, 91, 0.55);
}
.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--rose-deep), 0 6px 16px -8px rgba(168, 52, 91, 0.5);
}

.btn-secondary {
  background: white !important;
  color: var(--rose-deep) !important;
  border: 2px solid var(--rose-bright) !important;
  box-shadow: 0 4px 0 var(--rose-bright), var(--shadow-card);
}
.btn-secondary:hover {
  background: var(--rose-bright) !important;
  color: white !important;
  transform: translateY(-3px);
  box-shadow: 0 7px 0 var(--rose-deep), 0 14px 22px -8px rgba(168, 52, 91, 0.45);
}
.btn-secondary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--rose-bright);
}

.btn-ghost {
  color: var(--rose-deep) !important;
  background: transparent !important;
  font-weight: 600;
}
.btn-ghost:hover {
  background: rgba(216, 82, 122, 0.12) !important;
  transform: translateY(-1px);
}

/* ───────── Product cards — polaroïds inclinés ───────── */
.product-grid {
  gap: 2rem !important;
}
.product-card {
  background: white !important;
  padding: 12px 12px 24px 12px !important;
  border-radius: 4px !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s !important;
  position: relative;
  overflow: visible !important;
}
.product-card:nth-child(4n+1) { transform: rotate(-1.5deg); }
.product-card:nth-child(4n+2) { transform: rotate(1.2deg); }
.product-card:nth-child(4n+3) { transform: rotate(-0.8deg); }
.product-card:nth-child(4n)   { transform: rotate(1.8deg); }
.product-card:hover {
  transform: rotate(0) translateY(-8px) scale(1.04) !important;
  box-shadow: 0 20px 45px -12px rgba(216, 82, 122, 0.4) !important;
  z-index: 5;
}

/* Washi tape sticker en haut de la carte */
.product-card::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 70px;
  height: 18px;
  background: var(--washi-1);
  background-image: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.4) 25%, rgba(255,255,255,0.4) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.4) 75%);
  background-size: 6px 6px;
  box-shadow: var(--paper-tape);
  z-index: 3;
  border-radius: 1px;
}
.product-card:nth-child(3n+1)::before { background-color: var(--washi-1); }
.product-card:nth-child(3n+2)::before { background-color: var(--washi-2); }
.product-card:nth-child(3n)::before   { background-color: var(--washi-4); }

.product-card .image-wrap {
  background: var(--bg-pink) !important;
  border-radius: 2px;
  overflow: hidden;
}
.product-card .image-wrap::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D8527A'><path d='M12 21s-7-4.5-9.5-9C0 8 2 4 6 4c2 0 3 1 3.5 2C10 5 11 4 13 4c4 0 6 4 5.5 8-2.5 4.5-9.5 9-9.5 9z' stroke='white' stroke-width='1.5'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0.5) rotate(-20deg);
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(216,82,122,0.4));
}
.product-card:hover .image-wrap::after {
  opacity: 1;
  transform: scale(1) rotate(8deg);
}

.product-card .body { padding: 0.9rem 0.4rem 0.4rem !important; }
.product-card .name {
  font-family: var(--font-display) !important;
  font-size: 1.1rem;
  color: var(--ink);
  line-height: 1.2;
}
.product-card .price {
  font-family: var(--font-script);
  font-size: 1.5rem !important;
  color: var(--rose-bright) !important;
  font-weight: 700 !important;
  margin-top: 0.35rem !important;
}

/* badges-floating restent à leur place */
.product-card .badge-floating { z-index: 2; }

/* ───────── Badges plus girly ───────── */
.badge-unique {
  background: linear-gradient(135deg, var(--rose-pop) 0%, var(--rose-bright) 100%) !important;
  color: white !important;
  font-weight: 700;
  padding: 0.3rem 0.9rem 0.3rem 1.6rem !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px -4px rgba(255, 107, 151, 0.5);
}
.badge-unique::before {
  content: "✿";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
}

.badge-soldout {
  background: var(--ink) !important;
  color: white !important;
  padding: 0.4rem 1rem !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.7rem !important;
}

.badge-stock {
  background: var(--washi-3) !important;
  color: var(--ink) !important;
  font-weight: 600;
}

/* ───────── Pills filtres ───────── */
.pill {
  background: white !important;
  border: 2px solid var(--washi-1) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
}
.pill:hover {
  border-color: var(--rose-bright) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px -4px rgba(216, 82, 122, 0.4);
}
.pill.active {
  background: var(--rose-bright) !important;
  border-color: var(--rose-bright) !important;
  color: white !important;
  box-shadow: var(--shadow-rose);
}

/* ───────── Cart badge ───────── */
.cart-badge {
  background: var(--rose-pop) !important;
  color: white !important;
  font-weight: 700;
  animation: badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 3px 8px -2px rgba(255, 107, 151, 0.6);
}
@keyframes badge-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ───────── Inputs ───────── */
.input, .textarea, select.input {
  background: white !important;
  border: 2px solid var(--washi-1) !important;
  border-radius: 1rem !important;
  color: var(--ink) !important;
  font-weight: 500;
}
.input:focus, .textarea:focus, select.input:focus {
  border-color: var(--rose-bright) !important;
  box-shadow: 0 0 0 4px rgba(216, 82, 122, 0.2) !important;
  outline: none !important;
}

/* ───────── Cards stitched ───────── */
.card {
  background: white !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-card);
}
.card.stitched::after { border-color: rgba(216, 82, 122, 0.35) !important; }

/* ───────── Product detail ───────── */
.product-info h1 {
  color: var(--ink) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
}
.product-info .price-big {
  color: var(--rose-bright) !important;
  font-family: var(--font-script) !important;
  font-weight: 700 !important;
  font-size: 2.5rem !important;
  background: none !important;
  -webkit-text-fill-color: var(--rose-bright) !important;
}
.product-info .description { color: var(--ink-soft) !important; }
.product-info .info-list { color: var(--ink-soft) !important; }
.product-info .info-list li {
  padding: 0.4rem 0 !important;
  border-bottom: 1px dashed rgba(216, 82, 122, 0.2);
}
.product-info .info-list li:last-child { border-bottom: none; }

.gallery-main {
  background: white !important;
  padding: 16px 16px 60px !important;
  border-radius: 4px !important;
  box-shadow: var(--shadow-card) !important;
  transform: rotate(-1.5deg);
  position: relative;
  overflow: visible !important;
}
.gallery-main::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 90px;
  height: 20px;
  background: var(--washi-2);
  background-image: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.4) 25%, rgba(255,255,255,0.4) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.4) 75%);
  background-size: 6px 6px;
  box-shadow: var(--paper-tape);
}
.gallery-main img { border-radius: 2px; }
.thumb {
  background: white !important;
  padding: 4px !important;
  border: 2px solid var(--washi-1) !important;
  border-radius: 6px !important;
}
.thumb.active {
  border-color: var(--rose-bright) !important;
  transform: scale(1.05);
}

/* ───────── Panier ───────── */
.cart-line {
  background: white !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cart-line::after { display: none; }
.cart-line:hover {
  transform: translateX(4px) rotate(-0.3deg);
  box-shadow: 0 14px 28px -10px rgba(216, 82, 122, 0.3) !important;
}
.cart-summary {
  background: linear-gradient(135deg, white 0%, var(--bg-pink) 100%) !important;
  border: 2px solid var(--rose-bright) !important;
  box-shadow: var(--shadow-rose) !important;
}

/* ───────── Footer ───────── */
.site-footer {
  margin-top: 8rem !important;
  background: linear-gradient(180deg, transparent 0%, var(--bg-pink-2) 100%) !important;
  border-top: none !important;
  position: relative;
}
.site-footer::before {
  content: "";
  display: block;
  height: 60px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 C240,0 480,60 720,30 C960,0 1200,60 1440,30 L1440,0 L0,0 Z' fill='%23FBD8E5'/></svg>");
  background-size: cover;
  margin-top: -60px;
}
.site-footer h4 { color: var(--rose-deep) !important; font-weight: 700; }
.site-footer a { color: var(--ink-soft) !important; }
.site-footer a:hover { color: var(--rose-bright) !important; }

/* ───────── Toast ───────── */
.toast {
  background: white !important;
  color: var(--ink) !important;
  border: 2px solid var(--rose-bright);
  box-shadow: var(--shadow-rose) !important;
  font-weight: 600;
}
.toast.success {
  background: var(--rose-bright) !important;
  color: white !important;
  border-color: var(--rose-deep);
}
.toast.error {
  background: var(--ink) !important;
  color: white !important;
}

/* ───────── Lang dropdown — glassmorphism rose ───────── */
.lang-dropdown {
  position: relative;
  margin-left: 0.5rem;
}
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem 0.5rem 0.75rem;
  background: rgba(216, 82, 122, 0.12);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(216, 82, 122, 0.22);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--rose-deep);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(168, 52, 91, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.lang-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 107, 151, 0.0) 0%, rgba(255, 107, 151, 0.15) 100%);
  opacity: 0;
  transition: opacity 0.3s;
}
.lang-trigger:hover {
  background: rgba(216, 82, 122, 0.2);
  border-color: rgba(216, 82, 122, 0.4);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 6px 18px -4px rgba(216, 82, 122, 0.3);
}
.lang-trigger:hover::before { opacity: 1; }
.lang-trigger .flag {
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}
.lang-trigger .code { color: inherit; font-weight: 700; }
.lang-trigger .chev {
  color: currentColor;
  opacity: 0.6;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
  margin-left: 0.1rem;
}
.lang-trigger:hover .chev { opacity: 1; }
.lang-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); opacity: 1; }
.lang-trigger[aria-expanded="true"] {
  background: rgba(216, 82, 122, 0.22);
  border-color: rgba(216, 82, 122, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 20px -4px rgba(216, 82, 122, 0.35);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 0.65rem);
  right: 0;
  min-width: 185px;
  background: rgba(255, 240, 246, 0.85);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 18px;
  padding: 0.4rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 24px 50px -12px rgba(168, 52, 91, 0.35),
    0 6px 16px rgba(0,0,0,0.06);
  border: 1px solid rgba(216, 82, 122, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.94);
  transform-origin: top right;
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s;
  z-index: 9999;
}
.lang-dropdown[data-open="true"] .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Petite flèche pointant vers le bouton */
.lang-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 1px solid rgba(216, 82, 122, 0.18);
  border-top: 1px solid rgba(216, 82, 122, 0.18);
  transform: rotate(45deg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

.lang-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  color: var(--ink) !important;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  position: relative;
}
.lang-item .flag {
  font-size: 1.25rem;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12));
}
.lang-item .lbl  { flex: 1; }
.lang-item .dot  {
  color: var(--rose-bright);
  font-weight: 700;
  font-size: 0.9rem;
  background: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px -1px rgba(216, 82, 122, 0.3);
}
.lang-item:hover {
  background: rgba(255, 255, 255, 0.65);
  color: var(--rose-deep) !important;
  transform: translateX(3px);
}
.lang-item.active {
  background: rgba(255, 255, 255, 0.7);
  color: var(--rose-deep) !important;
  font-weight: 700;
}

/* Mobile : ajustement */
.nav-mobile .lang-dropdown { margin-left: 0; align-self: flex-start; }
.nav-mobile .lang-menu { right: auto; left: 0; transform-origin: top left; }
.nav-mobile .lang-menu::before { right: auto; left: 18px; }

/* ───────── Admin polish ───────── */
.admin-header { background: linear-gradient(135deg, var(--bg-pink) 0%, white 100%) !important; }
.admin-nav a.active { background: var(--rose-bright) !important; color: white !important; }
.admin-stat .value { color: var(--rose-bright) !important; font-family: var(--font-script); font-size: 2.5rem !important; }
.status-badge.status-paid { background: var(--rose-bright) !important; color: white !important; }
.status-badge.status-shipped { background: var(--washi-3) !important; color: var(--ink) !important; }

/* ───────── Reveal on scroll ───────── */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ───────── Scrollbar ───────── */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg-pink-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--rose-pop) 0%, var(--rose-bright) 100%);
  border-radius: 999px;
  border: 2px solid var(--bg-pink-2);
}

/* ───────── Cursor heart (sur produits) ───────── */
.product-card,
.gallery-main img,
.thumb {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><path fill='%23D8527A' stroke='white' stroke-width='1.5' d='M12 21s-7-4.5-9.5-9C0 8 2 4 6 4c2 0 3 1 3.5 2C10 5 11 4 13 4c4 0 6 4 5.5 8-2.5 4.5-9.5 9-9.5 9z'/></svg>") 16 16, pointer;
}

/* ───────── Empty state ───────── */
.empty-state .big-script {
  color: var(--rose-bright) !important;
  font-size: 3rem !important;
  animation: gentle-float 3.5s ease-in-out infinite;
}
@keyframes gentle-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}

/* ───────── Cursor trail container ───────── */
.cursor-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}
.cursor-trail .heart {
  position: absolute;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B97'><path d='M12 21s-7-4.5-9.5-9C0 8 2 4 6 4c2 0 3 1 3.5 2C10 5 11 4 13 4c4 0 6 4 5.5 8-2.5 4.5-9.5 9-9.5 9z'/></svg>");
  background-size: contain;
  animation: trail-fade 0.9s ease-out forwards;
}
@keyframes trail-fade {
  0%   { opacity: 0.85; transform: scale(1) rotate(0); }
  100% { opacity: 0;    transform: scale(0.3) translateY(20px) rotate(40deg); }
}

/* ───────── Stamp "Made with love" ───────── */
.love-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem;
  border: 2px dashed var(--rose-bright);
  border-radius: 999px;
  color: var(--rose-deep);
  font-family: var(--font-script);
  font-size: 1.2rem;
  font-weight: 700;
  background: white;
  transform: rotate(-2deg);
  box-shadow: var(--shadow-card);
}
.love-stamp::before, .love-stamp::after { content: "♡"; color: var(--rose-pop); }

/* ───────── Heart click pop (déjà bien aimé !) ───────── */
@keyframes heart-pop {
  0%   { transform: translateY(0) scale(0.5);    opacity: 1; }
  50%  { transform: translateY(-35px) scale(1.3); opacity: 1; }
  100% { transform: translateY(-70px) scale(0.6); opacity: 0; }
}

/* ───────── Reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  .bg-hearts span,
  .brand::after,
  .hero-stickers .sticker,
  .cart-badge,
  .empty-state .big-script,
  .marquee-track,
  .cursor-trail .heart {
    animation: none !important;
  }
  .product-card { transform: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================
   📱 RESPONSIVE — anti-overflow + ajustements mobile
   =========================================================== */

@media (max-width: 768px) {

  /* Stop tous les transform: rotate qui débordent */
  .product-card,
  .product-card:nth-child(4n+1),
  .product-card:nth-child(4n+2),
  .product-card:nth-child(4n+3),
  .product-card:nth-child(4n) {
    transform: none !important;
  }
  .product-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
  }

  /* Hero polaroïd : moins incliné + scale réduit */
  .hero-image {
    transform: rotate(-1.5deg) !important;
    max-width: 100%;
    margin: 0 auto;
  }
  .hero-image:hover { transform: rotate(0) !important; }

  /* Stickers du hero : plus petits + repositionnés (pas trop près des bords) */
  .hero-stickers .sticker { font-size: 1.5rem !important; }
  .hero-stickers .sticker:nth-child(1) { top: 8%;  left: 4%; }
  .hero-stickers .sticker:nth-child(2) { top: 88%; left: 6%; }
  .hero-stickers .sticker:nth-child(3) { top: 8%;  right: 4%; }
  .hero-stickers .sticker:nth-child(4) { top: 88%; right: 6%; }

  /* Galerie atelier mobile : tout reset */
  .atelier-gallery > div:first-of-type,
  .atelier-gallery .atelier-poll-2 {
    transform: rotate(0) !important;
    width: min(85%, 380px) !important;
    position: relative !important;
    margin: 0 auto !important;
    right: auto !important;
    top: auto !important;
  }
  .atelier-gallery .atelier-poll-2 { margin-top: -1.5rem !important; }

  /* Gallery main (page produit) : déjà bien */
  .gallery-main { transform: rotate(-0.5deg) !important; }

  /* Container : padding réduit */
  .container { padding-left: 1rem; padding-right: 1rem; }

  /* Hero h1 : taille adaptée */
  .hero h1 { font-size: clamp(2.25rem, 9vw, 3.25rem) !important; }

  /* Marquee : légèrement plus petit */
  .marquee { font-size: 0.7rem; letter-spacing: 0.18em; }
  .marquee-track { gap: 1.6rem; padding: 0.45rem 0.5rem; }

  /* Lang dropdown menu : aligné à droite mais sans déborder */
  .lang-menu { min-width: 165px; }

  /* Wave dividers : un peu plus courts pour gagner de la place */
  .wave-divider { height: 40px; }

  /* Cards stitched : padding intérieur réduit */
  .card { border-radius: 1rem !important; }

  /* Buttons : taille un poil plus compacte */
  .btn { padding: 0.85rem 1.3rem !important; font-size: 0.92rem; }

  /* Polaroid mini-grille atelier : enlever rotation pour pas déborder */
  .atelier-mini-card { transform: none !important; }
}

/* Très petit (< 380px) — Iphone SE et plus petits */
@media (max-width: 380px) {
  .hero { padding: 3rem 0 6rem !important; }
  .hero h1 { font-size: 2.25rem !important; }
  .hero-stickers .sticker { font-size: 1.2rem !important; }
  .lang-trigger .code { display: none; } /* Affiche juste le drapeau */
  .lang-trigger { padding: 0.4rem 0.6rem; }
  .brand { font-size: 1.1rem !important; }
  .nav-toggle { padding: 0.4rem !important; }
}

/* Tablet alignment fix */
@media (min-width: 769px) and (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .product-card:nth-child(4n+1),
  .product-card:nth-child(4n+2),
  .product-card:nth-child(4n+3),
  .product-card:nth-child(4n) {
    transform: rotate(-0.5deg);
  }
  .product-card:nth-child(2n) { transform: rotate(0.5deg) !important; }
}

/* Empêche les images de déborder */
img { max-width: 100%; height: auto; }

/* Marquee : enferme bien dans le viewport */
.marquee { max-width: 100vw; overflow: hidden; }

/* bg-hearts ne déborde JAMAIS */
.bg-hearts { width: 100vw; max-width: 100vw; }

/* Stickers du hero : confined */
.hero-stickers { overflow: hidden; }