/* ═══════════════════════════════════════════════════════════
   base.css — Fondations: Design Tokens + Reset + Effets visuels

   Chargé en 1er dans main.css

   SECTIONS:
   1. Design Tokens        → Palette, spacing, typographie, animations
   2. Reset               → Normalisation cross-browser
   3. Typographie         → Styles texte de base
   4. Grain               → Texture décorative de fond
   5. Curseur personnalisé → Styles point + anneau animé
   ═══════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Empire Green */
  --g-deep:    #152E24;
  --g-main:    #2B5245;
  --g-mid:     #3D7260;
  --g-light:   #619E87;
  --g-pale:    #C8DFD7;
  --g-ghost:   #EBF3EF;

  /* Cream — blanc grainé */
  --c-base:    #F5EEE4;
  --c-dark:    #EDE4D6;
  --c-darker:  #E2D6C5;

  /* Texte */
  --t-dark:    #1A1610;
  --t-mid:     #4A4540;
  --t-light:   #8A847C;
  --t-xlight:  #B8B2AA;

  /* Misc */
  --white:     #FEFCF9;
  --radius:    4px;
  --radius-md: 10px;
  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--c-base);
  color: var(--t-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
img, svg { display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ─── GRAIN ──────────────────────────────────────────────── */
/* Surcouche de texture animée simulant un blanc grainé (carte de visite) */
.grain {
  position: fixed;
  inset: -100%;
  width: 300%;
  height: 300%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' 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='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  animation: grain-move 0.4s steps(1) infinite;
}

@keyframes grain-move {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-3%, -8%); }
  20%  { transform: translate(-12%, 4%); }
  30%  { transform: translate(6%, -18%); }
  40%  { transform: translate(-4%, 20%); }
  50%  { transform: translate(-14%, 8%); }
  60%  { transform: translate(12%, 0%); }
  70%  { transform: translate(2%, 12%); }
  80%  { transform: translate(4%, 28%); }
  90%  { transform: translate(-8%, 8%); }
}

/* ─── CURSEUR PERSONNALISÉ ───────────────────────────────── */
/* Point précis + anneau inertiel, desktop uniquement */
.cursor-dot,
.cursor-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--g-main);
  transition: transform 0.1s var(--ease);
}

.cursor-ring {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--g-main);
  opacity: 0.5;
  transition:
    transform 0.15s var(--ease),
    width 0.3s var(--ease),
    height 0.3s var(--ease),
    opacity 0.3s;
}

.cursor-ring.hovering {
  width: 50px;
  height: 50px;
  opacity: 0.3;
}

/* Masqué sur tactile */
@media (hover: none) {
  .cursor-dot,
  .cursor-ring { display: none; }
}