/* Purotu — styles complémentaires (Tailwind via CDN gère l'essentiel) */

:root {
  --bg: #FAF5EE;
  --surface: #FFFFFF;
  --primary: #C26B4E;
  --primary-dark: #9C4F36;
  --palm: #3F6B52;
  --palm-soft: #CBD9C9;
  --accent: #E2B887;
  --ink: #2B2320;
  --muted: #7A6E64;
  --border: #EAE0D3;
  --success: #4F8A5B;
  --sale: #D14B4B;
}

body { font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; }

.font-tnum { font-variant-numeric: tabular-nums; }

/* Display typographique : ligatures + balance des titres */
.font-display { font-feature-settings: "ss01","liga","dlig"; letter-spacing: -0.01em; }
h1.font-display, h2.font-display { text-wrap: balance; }
.tracking-brand { letter-spacing: 0.42em; }

/* Filet doré éditorial */
.editorial-rule {
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 99px;
}
.editorial-rule.is-light {
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* Grain subtil (overlay non bloquant) */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Voile dégradé chaud pour héros */
.hero-veil {
  background:
    radial-gradient(120% 90% at 15% 100%, rgba(156,79,54,.55), transparent 60%),
    linear-gradient(to top, rgba(43,35,32,.82) 0%, rgba(43,35,32,.30) 38%, rgba(43,35,32,.05) 70%);
}

/* Halo décoratif (mesh chaud) */
.warm-mesh {
  background:
    radial-gradient(38% 50% at 12% 10%, rgba(226,184,135,.35), transparent 70%),
    radial-gradient(42% 55% at 95% 0%, rgba(194,107,78,.18), transparent 70%),
    radial-gradient(50% 60% at 80% 100%, rgba(203,217,201,.30), transparent 70%);
}

/* Ombres douces cohérentes */
.shadow-soft { box-shadow: 0 1px 2px rgba(43,35,32,.04), 0 8px 24px -8px rgba(43,35,32,.12); }
.shadow-lift { box-shadow: 0 2px 4px rgba(43,35,32,.05), 0 18px 48px -16px rgba(43,35,32,.22); }

/* Lien souligné animé */
.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* Boutons : micro-élévation au survol */
.btn-cta { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background-color .25s; }
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(156,79,54,.6); }
.btn-cta:active { transform: translateY(0); }

/* Reveal au scroll (état initial avant GSAP) */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-visible,
.no-anim .reveal { opacity: 1; transform: none; }

/* Carte produit : swap photo au survol + élévation */
.product-card { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.product-card:hover { transform: translateY(-4px); }
.product-card .card-media { transition: box-shadow .45s ease; }
.product-card:hover .card-media { box-shadow: 0 22px 48px -20px rgba(43,35,32,.35); }
.product-card .img-hover { opacity: 0; transition: opacity .6s ease; }
.product-card:hover .img-hover { opacity: 1; }
.product-card .card-base { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .card-base { transform: scale(1.05); }
.product-card .quick-add {
  transform: translateY(120%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.product-card:hover .quick-add { transform: translateY(0); }

/* Pastille couleur sélectionnée */
.swatch { box-shadow: 0 0 0 1px rgba(43,35,32,.12); }
.swatch[aria-pressed="true"],
.swatch.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }

/* Taille en rupture */
.size-btn:disabled { position: relative; opacity: .4; cursor: not-allowed; }
.size-btn:disabled::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 130%; height: 1px; background: currentColor; transform: rotate(-18deg);
}

/* Hotspot lookbook */
.hotspot {
  position: absolute; width: 28px; height: 28px; border-radius: 99px;
  background: rgba(255,255,255,.9); border: 2px solid var(--primary);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.hotspot::before {
  content: ""; position: absolute; inset: -8px; border-radius: 99px;
  border: 2px solid rgba(194,107,78,.5); animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Drawer */
[x-cloak] { display: none !important; }

/* Toast */
.toast { box-shadow: 0 12px 40px rgba(43,35,32,.18); }

/* Scrollbar discrète */
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .hotspot::before { animation: none; }
  * { scroll-behavior: auto !important; }
}