/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  background: radial-gradient(circle at top, var(--bg-top) 0%, var(--bg) 70%);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  transition: background-color .25s, color .25s;
}

a { color: var(--green); text-decoration: none; transition: color .15s; }
a:hover { color: var(--green-dark); }
img { max-width: 100%; height: auto; }

/* ── ANIMATIONS GLOBALES ── */
@keyframes blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.6); }
}

@keyframes borderGlow {
  0%, 100% {
    box-shadow: 0 0 0 1px var(--green-mid),
                0 0 18px rgba(114,173,88,.25),
                0 0 40px rgba(114,173,88,.10);
  }
  50% {
    box-shadow: 0 0 0 1px var(--green-mid),
                0 0 28px rgba(114,173,88,.4),
                0 0 60px rgba(114,173,88,.18);
  }
}

@keyframes heartRipple {
  0%   { transform: translate(-50%, -52%) scale(1);   opacity: .7; filter: blur(0px); }
  100% { transform: translate(-50%, -52%) scale(2.8); opacity: 0;  filter: blur(1px); }
}

@keyframes heartPulse {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 3px rgba(220,50,50,.7)); }
  25%       { transform: scale(1.5); filter: drop-shadow(0 0 8px rgba(220,50,50,1)); }
  50%       { transform: scale(1.1); filter: drop-shadow(0 0 4px rgba(220,50,50,.8)); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── UTILITAIRES ── */
.ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ico svg { display: block; }

.section-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 10px;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -.03em;
  margin: 0 0 44px;
  color: var(--text);
  line-height: 1.2;
}

.section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  margin-bottom: 10px;
  display: block;
}

.tag { border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 500; }
.tag-green { background: var(--accent); color: var(--green-dark); }
.tag-gold  { background: var(--gold-light); color: var(--gold); }
.tag-blue  { background: #e8f0fe; color: #1967d2; }
html.dark .tag-blue { background: #0d1e3a; color: #7aacff; }

.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  flex-shrink: 0;
}