/* ============================================================
   Moda Clic — custom.css (compléments au design system Tailwind)
   ============================================================ */

:root {
  --paper: #F5F0E6;
  --ink: #221D15;
  --taupe: #8A7C68;
  --bordeaux: #7B2D26;
  --gold: #B08A4A;
}

::selection { background: var(--gold); color: var(--ink); }

html { scroll-behavior: smooth; }

body { font-family: 'Jost', system-ui, sans-serif; color: var(--ink); background: var(--paper); }

.font-display, .font-display em, h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; }

/* --- Navigation -------------------------------------------------- */
.nav-item {
  position: relative;
  display: inline-block;
  padding: 0.35rem 0;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  transition: color 0.2s ease;
}
.nav-item::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--bordeaux);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-item:hover, .nav-item[aria-current="page"] { color: var(--bordeaux); }
.nav-item:hover::after, .nav-item[aria-current="page"]::after { transform: scaleX(1); }

.nav-sub { display: block; padding: 0.55rem 0.75rem; font-size: 0.92rem; color: var(--ink); border-radius: 0.375rem; transition: background .15s ease, color .15s ease; }
.nav-sub:hover, .nav-sub[aria-current="page"] { background: var(--bordeaux); color: var(--paper); }

.dropdown { transition: opacity .15s ease; }

/* --- Liens texte soulignement doré --- */
.link-gold { background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease; }
.link-gold:hover { background-size: 100% 1.5px; }

/* --- Animations hero (entrée en cascade) --- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-hero > * { opacity: 0; animation: riseIn .8s cubic-bezier(.2,.7,.2,1) forwards; }
.anim-hero > *:nth-child(1) { animation-delay: .10s; }
.anim-hero > *:nth-child(2) { animation-delay: .22s; }
.anim-hero > *:nth-child(3) { animation-delay: .34s; }
.anim-hero > *:nth-child(4) { animation-delay: .46s; }

/* --- Révélation au scroll --- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- Vignettes produit --- */
.tile-img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tile:hover .tile-img { transform: scale(1.05); }
.tile .tile-name { background-image: linear-gradient(var(--bordeaux), var(--bordeaux)); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease; }
.tile:hover .tile-name { background-size: 100% 1.5px; }

/* --- Accordéons (FAQ) --- */
details.faq { border-bottom: 1px solid rgb(34 29 21 / .12); }
details.faq summary { cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .chev { transition: transform .25s ease; }
details.faq[open] summary .chev { transform: rotate(180deg); }

/* --- Divers --- */
.aspect-tile { aspect-ratio: 1 / 1; }
.text-balance { text-wrap: balance; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

#toast-region { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 70; }
.toast { animation: riseIn .3s ease both; }

/* Grain léger sur les héros sombres */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .anim-hero > *, .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}