:root {
  /* === Exaïa Brand === */
  --grad: linear-gradient(135deg, #44d68a 0%, #0abfbc 50%, #1565c0 100%);
  --grad-h: linear-gradient(135deg, #3bc87e 0%, #089893 50%, #0f52a0 100%);
  --grad-accent: linear-gradient(
    135deg,
    rgba(233, 30, 140, 0.16) 0%,
    rgba(10, 191, 188, 0.14) 56%,
    rgba(68, 214, 138, 0.12) 100%
  );
  --grad-pink: linear-gradient(135deg, #e91e8c 0%, #ff67ba 100%);
  --color-primary: #0abfbc;
  --color-primary-dark: #089893;
  --color-green: #85f88d;
  --color-blue: #1565c0;
  --color-pink: #e91e8c;
  --color-pink-dark: #b9156d;
  --color-pink-soft: #fff1f8;
  --color-primary-alpha: rgba(10, 191, 188, 0.1);
  --color-green-alpha: rgba(68, 214, 138, 0.1);
  --color-pink-alpha: rgba(233, 30, 140, 0.1);
  --color-blue-alpha: rgba(21, 101, 192, 0.1);

  /* === Text === */
  --color-text: #1a2533;
  --color-text-light: #546270;
  --color-muted: #8a97a3;

  /* === Backgrounds === */
  --color-bg: #ffffff;
  --color-bg-soft: #f5f9fb;
  --color-bg-card: #ffffff;
  --color-section-alt: #eef7f7;
  --color-border: rgba(26, 37, 51, 0.09);
  --color-border-strong: rgba(26, 37, 51, 0.16);

  /* === Navigation === */
  --color-nav-bg: rgba(255, 255, 255, 0.96);
  --nav-height: 72px;

  /* === Footer === */
  --color-footer-bg: #101820;
  --color-footer-text: #b8c3cc;

  /* === Shadows === */
  --shadow-xs: 0 2px 8px rgba(10, 191, 188, 0.06);
  --shadow-sm: 0 4px 20px rgba(10, 191, 188, 0.1);
  --shadow-md: 0 8px 40px rgba(10, 191, 188, 0.14);
  --shadow-card: 0 2px 16px rgba(26, 37, 51, 0.08);
  --shadow-pink: 0 10px 30px rgba(233, 30, 140, 0.16);

  /* === Semantic === */
  --color-success: #00c853;
  --color-error: #ff3b30;

  /* === Layout === */
  --container-width: 1200px;
  --section-spacing: clamp(60px, 8vw, 96px);

  /* === Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* === Transitions === */
  --t-fast: 140ms ease;
  --t-base: 240ms ease;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  min-width: 320px;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

::selection {
  background: rgba(233, 30, 140, 0.18);
}

img {
  display: block;
  max-width: 100%;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Lien d'évitement clavier : hors écran (jamais display:none/visibility:hidden pour rester
   dans l'arbre d'accessibilité et focusable), révélé au-dessus de la nav fixe au focus. */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--color-text);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: var(--radius-md);
  transition: top var(--t-fast);
}
.skip-link:focus {
  top: 1rem;
}

section[id] {
  scroll-margin-top: calc(var(--nav-height) + 16px);
}

.container {
  width: min(100% - 40px, var(--container-width));
  margin: 0 auto;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

strong {
  font-weight: 600;
}

/* Gradient text */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hidden {
  display: none;
}
.text-center {
  text-align: center;
}

/* Animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes logoIn {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(-6px);
  }
  65% {
    transform: scale(1.05) translateY(1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes leafPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-25deg) translate(0, 8px);
  }
  70% {
    transform: scale(1.15) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg) translate(0, 0);
  }
}
@keyframes brushDraw {
  from {
    stroke-dashoffset: 280;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.fade-in {
  animation: fadeUp 0.6s ease both;
}