/* Self-hosted fonts via @fontsource — sous-set latin uniquement (couvre le FR : é è à ç ê î ô û ù).
   @import doit précéder tout le reste, y compris les directives @tailwind.
   Body : Geist Variable (axe wght 100-900) — alternative non-saturée à Inter/Montserrat.
   Display : Playfair Display, conservé selon brief client. */
@import '@fontsource/playfair-display/latin-400.css';
@import '@fontsource/playfair-display/latin-500.css';
@import '@fontsource/playfair-display/latin-400-italic.css';
/* Geist Variable couvre cyrillic/vietnamese/latin-ext/latin via unicode-range —
   le navigateur ne télécharge que le woff2 latin pour notre site FR. */
@import '@fontsource-variable/geist/wght.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================================
   BASE
   ============================================================ */
@layer base {
  :root {
    color-scheme: light;
    --section-gap: clamp(4rem, 8vw, 7.5rem); /* 64px ↔ 120px responsive */

    /* Tokens de courbes — référence unique pour CSS et Tailwind.
       --ease-rosa = entrances, scrolls, transitions longues (≥ 300ms).
       --ease-rosa-quick = hovers, focus, états < 240ms. */
    --ease-rosa: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-rosa-quick: cubic-bezier(0.4, 0, 0.2, 1);
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    @apply bg-paper text-charcoal font-body text-body-md;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
  }

  ::selection {
    background: oklch(42% 0.045 130);
    color: oklch(98% 0.005 110);
  }

  img { @apply max-w-full h-auto; }

  /* Focus-visible globalisé sur tout élément interactif sans état custom.
     Spécifications design system : ring sage 3px à 30% opacité, pas d'outline. */
  :focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(83, 98, 79, 0.30);
    border-radius: 4px;
  }
}

/* ============================================================
   COMPONENTS — utility classes du design system
   ============================================================ */
@layer components {

  /* ---------- Section padding responsive ---------- */
  .py-section {
    padding-top: var(--section-gap);
    padding-bottom: var(--section-gap);
  }
  .pt-section { padding-top: var(--section-gap); }
  .pb-section { padding-bottom: var(--section-gap); }

  .px-page {
    @apply px-margin-mobile md:px-margin-desktop;
  }

  /* ---------- Container max ---------- */
  .container-rosa {
    @apply max-w-container-max mx-auto px-page;
  }

  /* ============== Boutons ============== */
  .btn {
    @apply inline-flex items-center justify-center gap-2 font-body font-semibold uppercase tracking-widest;
    @apply rounded border border-transparent;
    @apply cursor-pointer select-none;
    text-decoration: none;
    transition:
      background-color 200ms var(--ease-rosa-quick),
      color 200ms var(--ease-rosa-quick),
      border-color 200ms var(--ease-rosa-quick),
      transform 90ms var(--ease-rosa-quick);
  }
  .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px oklch(42% 0.045 130 / 0.30);
  }
  /* Feedback tactile : scale subtil au clic, conforme à la guidance Emil. */
  .btn:active { transform: scale(0.97) translateY(1px); }
  @media (prefers-reduced-motion: reduce) {
    .btn:active { transform: translateY(1px); }
  }
  .btn[disabled],
  .btn[aria-disabled="true"] {
    @apply opacity-45 cursor-not-allowed pointer-events-none;
  }

  .btn-sm { @apply text-[11px] px-[18px] py-[10px] min-h-[40px]; }
  .btn-md { @apply text-[12px] px-7 py-[14px] min-h-[48px]; }
  .btn-lg { @apply text-[13px] px-10 py-[18px] min-h-[56px]; }

  .btn-primary {
    background-color: #53624f;
    color: #ffffff;
  }
  .btn-primary:hover { background-color: #3c4b38; }
  .btn-primary:active { background-color: #243221; }

  .btn-secondary {
    background-color: transparent;
    color: #1b1c1c;
    border-color: #1b1c1c;
  }
  .btn-secondary:hover {
    background-color: #1b1c1c;
    color: #fcf9f8;
  }

  .btn-tertiary {
    background-color: #7c5450;
    color: #ffffff;
  }
  .btn-tertiary:hover { background-color: #623d3a; }
  .btn-tertiary:focus-visible { box-shadow: 0 0 0 3px rgba(124, 84, 80, 0.30); }

  .btn-ghost {
    background-color: transparent;
    color: #53624f;
  }
  .btn-ghost:hover { background-color: #f0f3ef; }

  .btn-link {
    @apply inline-flex items-center gap-2 font-body font-semibold uppercase tracking-widest text-[12px];
    color: #53624f;
    padding: 4px 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    transition: color 200ms ease;
    text-decoration: none;
  }
  .btn-link:hover { color: #3c4b38; }
  .btn-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(83, 98, 79, 0.30);
    border-radius: 2px;
  }

  /* ============== Form fields ============== */
  .field {
    @apply flex flex-col gap-2;
  }
  .field-label {
    @apply font-body text-[11px] font-semibold uppercase tracking-widest;
    color: #444841;
  }
  .field-input,
  .field-textarea,
  .field-select {
    @apply font-body text-body-md w-full;
    @apply px-3.5 py-3 min-h-[48px];
    background-color: #ffffff;
    color: #1b1c1c;
    border: 1px solid #c4c8bf;
    border-radius: 4px;
    transition:
      border-color 200ms ease,
      box-shadow 200ms ease,
      background-color 200ms ease;
  }
  .field-textarea {
    @apply min-h-[140px];
    resize: vertical;
  }
  .field-input::placeholder,
  .field-textarea::placeholder { color: #9a958a; }
  .field-input:hover,
  .field-textarea:hover,
  .field-select:hover { border-color: #747871; }
  .field-input:focus,
  .field-textarea:focus,
  .field-select:focus {
    outline: none;
    border-color: #53624f;
    box-shadow: 0 0 0 3px rgba(83, 98, 79, 0.18);
  }
  .field-input:invalid:not(:placeholder-shown),
  .field-textarea:invalid:not(:placeholder-shown) {
    border-color: #ba1a1a;
  }
  .field-input:invalid:not(:placeholder-shown):focus,
  .field-textarea:invalid:not(:placeholder-shown):focus {
    box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.20);
  }
  .field-help {
    @apply font-body text-caption;
    color: #747871;
  }
  .field-err {
    @apply font-body text-caption;
    color: #ba1a1a;
  }

  /* ============== Chips / Tags (pill réservé status) ============== */
  .chip {
    @apply inline-flex items-center gap-1.5 font-body font-semibold uppercase;
    @apply text-[11px] tracking-wider;
    padding: 6px 12px;
    border-radius: 9999px;
  }
  .chip-sage    { background:#d7e7cf; color:#243221; }
  .chip-rose    { background:#ffdad6; color:#2f1311; }
  .chip-sand    { background:#e8e2d6; color:#1e1c14; }
  .chip-outline { background:transparent; border:1px solid #c4c8bf; color:#444841; }

  /* ============== Eyebrow (label au-dessus d'un titre) ============== */
  .eyebrow {
    @apply font-body text-[11px] font-semibold uppercase;
    letter-spacing: 0.14em;
    color: #747871;
  }
  .eyebrow-rose { color: #7c5450; }
  .eyebrow-sage { color: #53624f; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
@layer utilities {
  .shadow-whisper { box-shadow: 0 8px 24px rgba(44, 44, 44, 0.04); }
  .opacity-45 { opacity: 0.45; }

  /* Gradient overlay pour garantir lisibilité légendes blanches sur image */
  .overlay-caption {
    background: linear-gradient(
      to bottom,
      transparent 40%,
      rgba(27, 28, 28, 0.65) 100%
    );
  }
  .overlay-caption-strong {
    background: linear-gradient(
      to bottom,
      transparent 30%,
      rgba(27, 28, 28, 0.78) 100%
    );
  }
}

/* ============================================================
   REVEAL ON LOAD + SCROLL (existant, conservé)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html[data-reveal-ready] [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  html[data-reveal-ready] [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  html[data-reveal-ready] [data-reveal="fade"] { transform: none; }

  html[data-reveal-ready] [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  html[data-reveal-ready] [data-reveal-stagger].is-revealed > * {
    opacity: 1;
    transform: translateY(0);
  }

  html[data-reveal-ready] [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
  html[data-reveal-ready] [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 80ms; }
  html[data-reveal-ready] [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 160ms; }
  html[data-reveal-ready] [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 240ms; }
  html[data-reveal-ready] [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 320ms; }
  html[data-reveal-ready] [data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 400ms; }
}

/* ============================================================
   SHEET MOBILE (drawer plein écran avec backdrop)
   ============================================================ */
[data-mobile-sheet] {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
}
[data-mobile-sheet][data-open="true"] { visibility: visible; }

[data-mobile-sheet] .sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 28, 28, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 240ms ease;
}
[data-mobile-sheet][data-open="true"] .sheet-backdrop { opacity: 1; }

[data-mobile-sheet] .sheet-panel {
  position: absolute;
  inset: 0;
  background: #fcf9f8;
  transform: translateY(8px);
  opacity: 0;
  transition:
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
[data-mobile-sheet][data-open="true"] .sheet-panel {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-mobile-sheet] .sheet-backdrop,
  [data-mobile-sheet] .sheet-panel {
    transition: none;
  }
}

/* Empêcher le scroll body quand le sheet est ouvert */
body.has-sheet-open { overflow: hidden; }