/* ==========================================================================
   base.css — variables, reset, typographie, boutons, utilitaires
   ========================================================================== */

:root {
  /* Couleurs de base */
  --cream: #fdf8f2;
  --cream-2: #f6ede0;
  --ink: #1a2e2a;
  --ink-soft: #3b5550;

  /* Palette verte */
  --sage-1: #2f7d6b;
  --sage-2: #0d9488;
  --emerald: #059669;

  /* Palette accents */
  --coral-1: #ff8a6b;
  --coral-2: #f97066;
  --amber: #fbbf24;
  --violet-1: #a78bfa;
  --violet-2: #7c6ef2;
  --sky: #7dd3fc;

  /* Dégradés */
  --grad-hero: linear-gradient(135deg, #0d9488 0%, #2f7d6b 40%, #134e4a 100%);
  --grad-coral: linear-gradient(135deg, #ff8a6b 0%, #f97066 50%, #ef4444 100%);
  --grad-amber: linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%);
  --grad-violet: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 50%, #7c6ef2 100%);
  --grad-sage: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 40%, #10b981 100%);
  --grad-sky: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 50%, #0ea5e9 100%);
  --grad-card: linear-gradient(135deg, #fdf8f2 0%, #f6ede0 100%);

  /* Ombres */
  --shadow-sm: 0 2px 8px rgba(26, 46, 42, 0.06);
  --shadow-md: 0 10px 30px rgba(26, 46, 42, 0.08);
  --shadow-lg: 0 25px 60px rgba(26, 46, 42, 0.12);
  --shadow-glow: 0 10px 40px rgba(13, 148, 136, 0.25);
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Typographie */
h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Texte en dégradé (utilitaire) */
.grad-text {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.grad-coral {
  background: var(--grad-coral);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--grad-hero);
  color: white;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 50px rgba(13, 148, 136, 0.4);
}
.btn-primary:active { transform: translateY(-1px); }

.btn-coral {
  background: var(--grad-coral);
  color: white;
  box-shadow: 0 10px 30px rgba(249, 112, 102, 0.3);
}
.btn-coral:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 50px rgba(249, 112, 102, 0.4);
}

.btn-ghost {
  background: white;
  color: var(--ink);
  border: 1px solid rgba(26, 46, 42, 0.12);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sage-2);
}

/* Effet "ripple" au clic */
.btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}
.btn:active::after { width: 200%; height: 200%; }