/* ═══════════════════════════════════════════
   BASE.CSS — Variables, Reset, Typographie
   Outdoor Booking © Creatiic
═══════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
  /* Couleurs */
  --night:  #0e1510;
  --deep:   #162019;
  --pine:   #1e3323;
  --moss:   #2e5235;
  --fern:   #4a7c54;
  --sage:   #7aaa80;
  --mist:   #b8d4ba;
  --snow:   #f0f4f0;
  --cream:  #faf8f3;
  --stone:  #f2ede6;
  --bark:   #5a4e3c;
  --ink:    #3a3228;
  --amber:  #e8c547;
  --ember:  #c9a82a;
  --white:  #ffffff;

  /* Typographie */
  --font-display: 'Fraunces', serif;
  --font-body:    'Instrument Sans', sans-serif;

  /* Espacements */
  --section-padding: 104px 24px;
  --section-max:     1040px;

  /* Bordures */
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  24px;
  --radius-full: 100px;

  /* Ombres */
  --shadow-sm:  0 2px 20px rgba(14,21,16,.05);
  --shadow-md:  0 8px 40px rgba(14,21,16,.10);
  --shadow-lg:  0 16px 60px rgba(14,21,16,.18);
  --shadow-amber: 0 8px 48px rgba(232,197,71,.4);

  /* Transitions */
  --transition: .22s ease;
}

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--night);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── NOISE OVERLAY ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: .35;
}

/* ── TYPOGRAPHIE ── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  font-weight: 700;
}

/* ── UTILITAIRES ── */
.section-label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fern);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--night);
  margin-bottom: 16px;
}

.section-sub {
  font-size: .95rem;
  color: var(--bark);
  line-height: 1.7;
  max-width: 500px;
}

/* ── ANIMATIONS ── */
@keyframes rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes twinkle {
  from { opacity: var(--min, .1); transform: scale(1); }
  to   { opacity: var(--max, .6); transform: scale(1.4); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: .3; transform: scaleY(1); }
  50%       { opacity: .7; transform: scaleY(1.1); }
}

.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s ease;
}
.fade-in.visible       { opacity: 1; transform: translateY(0); }
.fade-in-delay         { transition-delay: .15s; }
.fade-in-delay-2       { transition-delay: .28s; }