/* =========================================================
   Rénovation Metbach — Custom styles
   Augments Tailwind CDN with brand theme, fluid type,
   animated decorations, reveal system and components.
   ========================================================= */

:root {
  --page: #F7F4EE;
  --surface: #FFFFFF;
  --ink: #0E1318;
  --ink-2: #1B2A3A;
  --muted: #5B6677;
  --line: #E7E1D5;
  --accent: #B8602A;        /* copper / terracotta */
  --accent-dark: #8A4520;
  --accent-soft: #F3DEC8;
  --forest: #2D5F3F;        /* arbo / landscape accent */
  --gold: #C99A4D;
  --ring: rgba(184, 96, 42, 0.28);
  --shadow-lg: 0 30px 60px -20px rgba(14, 19, 24, 0.18), 0 12px 24px -10px rgba(14, 19, 24, 0.10);
  --shadow-sm: 0 1px 2px rgba(14, 19, 24, 0.06), 0 4px 12px -2px rgba(14, 19, 24, 0.06);
  --radius: 16px;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--page);
  color: var(--ink);
  font-feature-settings: "ss01", "cv11";
}

.font-display { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; letter-spacing: -0.02em; }
.font-serif-d { font-family: 'Instrument Serif', 'Georgia', serif; letter-spacing: -0.01em; }

/* Fluid type */
.h-display { font-size: clamp(2.5rem, 6vw + 1rem, 5.75rem); line-height: 1.02; font-weight: 700; }
.h-section { font-size: clamp(2rem, 3.2vw + 0.5rem, 3.25rem); line-height: 1.08; font-weight: 700; }
.h-eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--accent-dark); }

/* Background decorations */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(14,19,24,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,19,24,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.grid-bg-dark {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.dot-bg {
  background-image: radial-gradient(rgba(14,19,24,0.08) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Animated gradient text — darker stops for AA contrast on cream */
.gradient-text {
  background: linear-gradient(120deg, #8A4520 0%, #A75A28 35%, #2D5F3F 75%, #0E1318 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue 14s ease infinite;
}
@keyframes hue { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Spotlight on hero */
.spotlight {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 50% at 25% 30%, rgba(184,96,42,0.18), transparent 60%),
    radial-gradient(40% 50% at 75% 70%, rgba(45,95,63,0.16), transparent 60%);
  pointer-events: none;
  filter: blur(20px);
}

/* Aurora ribbon (Aceternity-style) */
.aurora {
  position: absolute;
  inset: -25%;
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(184,96,42,.0) 0deg,
      rgba(184,96,42,.35) 60deg,
      rgba(201,154,77,.30) 120deg,
      rgba(45,95,63,.28) 200deg,
      rgba(27,42,58,.20) 280deg,
      rgba(184,96,42,.0) 360deg);
  filter: blur(60px);
  opacity: .55;
  animation: spin 22s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Floating shapes */
.float-y { animation: floatY 8s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Button */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 0.95rem 1.4rem; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(14,19,24,.45);
}
.btn-primary:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(184,96,42,.55); }
.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(184,96,42,.55);
}
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(184,96,42,.7); }
.btn-ghost {
  background: rgba(14,19,24,.04);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: rgba(14,19,24,.08); transform: translateY(-2px); }
.btn-glass {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
}
.btn-glass:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }

/* Chip / tag */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  background: rgba(184,96,42,.14);
  color: #6E3617;
  border: 1px solid rgba(138,69,32,.30);
}
.chip-dark {
  background: rgba(255,255,255,.10);
  color: #FFE7CF;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}

/* Service card */
.service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
  height: 100%;
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px 140px at var(--mx,50%) var(--my,0%), rgba(184,96,42,.10), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(184,96,42,.35); }
.service-card:hover::before { opacity: 1; }
.service-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(184,96,42,.14), rgba(45,95,63,.10));
  color: var(--accent);
  border: 1px solid rgba(184,96,42,.18);
  margin-bottom: 1rem;
  transition: transform .35s ease;
}
.service-card:hover .service-icon { transform: rotate(-6deg) scale(1.05); }
.service-card .arrow {
  position: absolute; right: 1.25rem; bottom: 1.25rem;
  width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--page); color: var(--ink);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.service-card:hover .arrow { background: var(--ink); color: #fff; transform: translate(2px,-2px); }

/* Bento card */
.bento {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink-2);
  color: #fff;
  isolation: isolate;
  min-height: 240px;
}
.bento::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,19,24,0) 30%, rgba(14,19,24,.85) 100%);
}
.bento .bento-content { position: relative; z-index: 2; }
.bento img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; z-index: 0; }
.bento:hover img { transform: scale(1.08); }

/* Step row */
.step-num {
  font-family: 'Instrument Serif', serif;
  font-size: 3.25rem; line-height: 1;
  color: var(--accent);
}

/* Marquee */
.marquee {
  display: flex; gap: 3rem;
  animation: marquee 36s linear infinite;
  width: max-content;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee:hover, .marquee:focus-within { animation-play-state: paused; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }
.reveal-delay-6 { transition-delay: .48s; }

/* Number counters */
.stat-number { font-family: 'Instrument Serif', serif; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; color: var(--ink); }

/* Pulse dot */
.pulse-dot {
  position: relative;
  display: inline-block; width: 8px; height: 8px;
  border-radius: 999px; background: #22c55e;
}
.pulse-dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70% { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Form */
.field-label { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; letter-spacing: .05em; text-transform: uppercase; }
.field {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.field textarea { min-height: 130px; resize: vertical; }

/* Header */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-bottom-color: rgba(231, 225, 213, 0.7);
}
.nav-link {
  position: relative;
  padding: .5rem .25rem;
  font-weight: 500;
  color: var(--ink);
  transition: color .2s ease;
}
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover { color: var(--accent); }
.nav-link:hover::after { transform: scaleX(1); }

/* Mobile menu */
.mobile-menu {
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.mobile-menu.open { transform: translateX(0); }

/* Logo mark */
.logo-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  display: grid; place-items: center;
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  position: relative;
  overflow: hidden;
}
.logo-mark::before {
  content: "";
  position: absolute; inset: -2px;
  background: linear-gradient(135deg, var(--accent), transparent 60%);
  opacity: .55;
  mix-blend-mode: overlay;
}

/* Scroll cue */
.scroll-cue {
  width: 24px; height: 40px;
  border: 2px solid currentColor;
  border-radius: 14px;
  position: relative;
  opacity: .65;
}
.scroll-cue::after {
  content: "";
  position: absolute; left: 50%; top: 7px;
  width: 3px; height: 8px;
  background: currentColor;
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollCue 1.6s ease infinite;
}
@keyframes scrollCue {
  0% { transform: translate(-50%, 0); opacity: 1; }
  60% { transform: translate(-50%, 14px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

/* Testimonial */
.quote-mark {
  font-family: 'Instrument Serif', serif;
  font-size: 5rem; line-height: 1;
  color: var(--accent);
  opacity: .4;
}

/* Stagger images / image collage */
.image-stack { position: relative; aspect-ratio: 4/5; max-width: 100%; }
.image-stack img { position: absolute; border-radius: 18px; box-shadow: var(--shadow-lg); width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: cover; }
.image-stack .img-1 { inset: 0 30% 30% 0; }
.image-stack .img-2 { inset: 25% 0 0 35%; border: 6px solid var(--page); }

/* Utility */
.container-pad { padding-left: clamp(1rem, 4vw, 3rem); padding-right: clamp(1rem, 4vw, 3rem); }
.no-scrollbar::-webkit-scrollbar { display: none; }
html, body { overflow-x: hidden; }
body { max-width: 100vw; }

/* Ensure anchor targets aren't hidden behind the sticky header */
:target,
[id^="services"],
[id="services"], [id="about"], [id="process"], [id="realisations"], [id="avis"], [id="faq"], [id="contact"], [id="zones"] {
  scroll-margin-top: 96px;
}
html { scroll-padding-top: 96px; }

/* Map / iframe */
.map-frame {
  width: 100%; min-height: 360px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  filter: grayscale(20%) contrast(1.05);
}

/* Focus rings */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Honeypot field (hidden from users, visible to dumb bots) */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .marquee { animation: none !important; }
  .gradient-text { animation: none !important; background-position: 0 0 !important; }
  .float-y { animation: none !important; }
  .pulse-dot::after { animation: none !important; }
}

/* Details / Summary icon rotation when open */
details[open] summary .lucide-plus,
details[open] summary i[data-lucide="plus"] { transform: rotate(45deg); }
details summary i[data-lucide="plus"] { transition: transform .25s ease; }