/* ===========================================================================
   Roselin — overrides on top of the compiled Tailwind stylesheet (style.css)
   - defines the Geist font CSS variables (originally injected by Next.js)
   - forces the intended light theme (defeats prefers-color-scheme:dark)
   - reveal-on-scroll system (replaces the Framer Motion whileInView entrances)
   - floating header pill scrolled-state + mobile menu overlay
   =========================================================================== */

:root {
  /* font variables consumed by .font-sans / .font-mono in style.css */
  --font-geist-sans: "Geist";
  --font-geist-mono: "Geist Mono";

  /* re-assert the light design tokens AFTER style.css so the
     @media (prefers-color-scheme: dark) block can never flip the
     alternating light/dark section rhythm this layout is built around */
  --background: #fafaf9;
  --foreground: #1c1917;
  --accent: #065f46;
  --accent-foreground: #fafaf9;
  --muted: #f5f5f4;
  --muted-foreground: #78716c;
  color-scheme: light;

  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* keep the document from ever rendering a dark canvas */
html, body { background-color: var(--background); }

/* ---------------------------------------------------------------------------
   Reveal-on-scroll
   The hidden "from" state only applies when JS is on (html.js) AND the user
   has not asked for reduced motion. Otherwise everything is visible by default
   — no flash, no JS-required content, no motion for those who opt out.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: var(--from, none);
    transition:
      opacity var(--dur, 0.8s) var(--reveal-ease) var(--d, 0s),
      transform var(--dur, 0.8s) var(--reveal-ease) var(--d, 0s);
  }
  /* transform-only entrance (the header slides down without fading) */
  .js [data-reveal="slide"] { opacity: 1; }

  .js [data-reveal].is-in {
    opacity: 1;
    transform: var(--to, none);
  }
}

/* ---------------------------------------------------------------------------
   Floating header pill — gains a frosted background once the page is scrolled
   (matches the original: bg-white/70 backdrop-blur-md border-black/5 shadow)
   --------------------------------------------------------------------------- */
.header-pill { transition: all 0.5s var(--reveal-ease); }
.header-pill.scrolled {
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0.75rem 1.5rem;            /* px-6 py-3 */
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.04);
}

/* subtle press feedback echoing the original button micro-interaction */
.btn-press { transition: transform 0.2s var(--reveal-ease), background-color 0.2s ease; }
.btn-press:active { transform: scale(0.97); }

/* ---------------------------------------------------------------------------
   Mobile menu overlay
   --------------------------------------------------------------------------- */
.mobile-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--reveal-ease);
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }

.mobile-menu a,
.mobile-menu .m-cta {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.45s var(--reveal-ease), transform 0.45s var(--reveal-ease);
}
.mobile-menu.open a,
.mobile-menu.open .m-cta { opacity: 1; transform: none; }
.mobile-menu.open a:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open a:nth-child(2) { transition-delay: 0.10s; }
.mobile-menu.open a:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open a:nth-child(4) { transition-delay: 0.20s; }
.mobile-menu.open .m-cta { transition-delay: 0.25s; }

body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu a,
  .mobile-menu .m-cta { transition: opacity 0.2s ease; transform: none; }
}

/* ---------------------------------------------------------------------------
   Utilitaires absents du build Tailwind purgé d'origine mais requis par la
   mise en page FR (icône tél, boutons contact, footer 4 colonnes, largeurs
   de texte, filigrane). Hors @layer : priorité supérieure, donc appliqués.
   --------------------------------------------------------------------------- */
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.pt-4 { padding-top: 1rem; }
.top-8 { top: 2rem; }
.right-6 { right: 1.5rem; }
.mb-20 { margin-bottom: 5rem; }
.gap-2\.5 { gap: 0.625rem; }
.max-w-xl { max-width: 36rem; }
.max-w-\[34ch\] { max-width: 34ch; }
.max-w-\[42ch\] { max-width: 42ch; }
.max-w-\[48ch\] { max-width: 48ch; }
.text-\[18vw\] { font-size: 18vw; }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3); }

@media (min-width: 768px) {
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-start-5 { grid-column-start: 5; }
}