/* Vanira — styles complémentaires (Tailwind via CDN gère le reste) */

:root {
  --vert-profond: #1F3D2B;
  --vert-feuille: #3E6B4F;
  --brun-gousse: #6B4226;
  --brun-caramel: #9C6B43;
  --creme: #F6EFE3;
  --ivoire: #EADBC4;
  --or-fleur: #C9A24B;
  --encre: #2A211A;
  --sable: #B9A98E;
  --erreur: #A23E2E;
}

body { background-color: var(--creme); }

/* Typographie : titres display plus raffinés */
.font-display { letter-spacing: .005em; }
h1, h2, h3 { text-wrap: balance; }
.lead { font-size: 1.125rem; line-height: 1.75; }

/* Reveals GSAP : état initial seulement si JS prêt */
.gsap-ready .reveal { opacity: 0; transform: translateY(24px); }

/* Filet doré décoratif */
.gold-rule {
  width: 54px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--or-fleur), #e3c987);
}
.gold-rule.center { margin-inline: auto; }

/* Eyebrow : sur-titre doré commun */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brun-caramel);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, var(--or-fleur), transparent);
}
.eyebrow.on-dark { color: var(--or-fleur); }

/* Texture papier subtile sur les fonds crème */
.paper {
  background-image:
    radial-gradient(circle at 18% 24%, rgba(107,66,38,.035) 0, transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(31,61,43,.04) 0, transparent 46%);
}

/* Grain subtil réutilisable (voiles, héros) */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Héros : composition riche en couches */
.hero-veil {
  background:
    radial-gradient(120% 90% at 15% 12%, rgba(31,61,43,.30) 0%, transparent 55%),
    linear-gradient(105deg, rgba(31,61,43,.88) 0%, rgba(31,61,43,.55) 42%, rgba(42,33,26,.62) 100%),
    linear-gradient(to top, rgba(42,33,26,.92) 0%, transparent 42%);
}
.hero-glow {
  position: absolute; width: 42rem; height: 42rem; border-radius: 999px;
  filter: blur(80px); pointer-events: none;
  background: radial-gradient(circle, rgba(201,162,75,.28), transparent 70%);
}

/* Liens dorés soulignés à l'animation */
.link-gold { position: relative; }
.link-gold::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--or-fleur); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.link-gold:hover::after { transform: scaleX(1); }

/* Boutons : finition douce */
.btn-gold {
  box-shadow: 0 8px 22px rgba(201,162,75,.35);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background-color .25s;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(201,162,75,.45); }

/* Cartes éditoriales : bordure fine + survol */
.card-lift { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(107,66,38,.16); border-color: rgba(201,162,75,.5); }

/* Carte produit hover */
.product-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.product-card:hover { transform: translateY(-6px); }
.product-card .pc-img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .pc-img { transform: scale(1.07); }

/* Badges grade */
.badge-grade { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

/* Scrollbar discrète drawer */
.drawer-scroll::-webkit-scrollbar { width: 6px; }
.drawer-scroll::-webkit-scrollbar-thumb { background: var(--sable); border-radius: 999px; }

/* Étoiles */
.stars { letter-spacing: 1px; }

/* Leaflet : coins arrondis */
.leaflet-container { border-radius: 16px; font-family: inherit; }

/* Timeline traçabilité */
.trace-line { background: var(--ivoire); }
.trace-line .trace-fill {
  background: linear-gradient(180deg, var(--or-fleur), var(--vert-feuille));
  transform-origin: top;
}

/* Focus visible accessible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--or-fleur);
  outline-offset: 2px;
}

/* Inputs cohérents */
.field {
  width: 100%; border-radius: 8px; border: 1px solid var(--ivoire);
  background: #fff; padding: .6rem .8rem; font-size: .9rem; color: var(--encre);
}
.field:focus { border-color: var(--or-fleur); outline: none; box-shadow: 0 0 0 3px rgba(201,162,75,.18); }

@media (prefers-reduced-motion: reduce) {
  .gsap-ready .reveal { opacity: 1 !important; transform: none !important; }
  .product-card, .product-card .pc-img, .card-lift, .btn-gold { transition: none !important; }
  .card-lift:hover, .btn-gold:hover { transform: none !important; }
  html { scroll-behavior: auto !important; }
}