/* ==========================================================================
   BabiMams — base.css
   Design tokens, reset, typographie, utilitaires
   ========================================================================== */

/* --------------------------------------------------------------- Tokens */
:root {
  /* Couleurs de fond */
  --c-cream:        #fbf7f1;
  --c-blue-wash:    #eff6fa;
  --c-pink-wash:    #fbeef2;
  --c-green-wash:   #e4f0e9;
  --c-amber-wash:   #fcf1e1;
  --c-blue-tint:    #dcebf3;
  --c-white:        #ffffff;

  /* Couleurs de marque */
  --c-navy:         #33506b;
  --c-navy-deep:    #23374a;
  --c-navy-dark:    #22374a;
  --c-blue:         #3c7ca6;
  --c-blue-dark:    #2c5e80;
  --c-blue-soft:    #7fb3d5;
  --c-pink:         #d67f9e;
  --c-pink-dark:    #b65d80;
  --c-green:        #5ca989;
  --c-amber:        #e0a552;
  --c-red:          #d64545;

  /* Texte */
  --c-text:         #4a6478;
  --c-muted:        #7a93a5;
  --c-on-dark:      #c7d6e2;
  --c-on-dark-soft: #8fa4b5;
  --c-on-dark-str:  #e8eff4;

  /* Bordures & ombres */
  --border-soft:    rgba(60, 124, 166, .12);
  --border-card:    rgba(60, 124, 166, .1);
  --border-pill:    rgba(60, 124, 166, .15);
  --shadow-card:    0 8px 24px rgba(60, 124, 166, .08);
  --shadow-hover:   0 14px 32px rgba(60, 124, 166, .14);
  --shadow-header:  0 1px 0 rgba(60, 124, 166, .1);

  /* Typographie */
  --font-display: "Baloo 2", "Trebuchet MS", sans-serif;
  --font-body:    "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero:   52px;
  --fs-h2-lg:  34px;
  --fs-h2-md:  32px;
  --fs-h2-cta: 38px;
  --fs-h3:     19px;
  --fs-lead:   18px;
  --fs-body:   16px;
  --fs-sm:     15px;
  --fs-xs:     14px;
  --fs-2xs:    13px;

  /* Rythme */
  --wrap:        1160px;
  --gutter:      32px;
  --section-y:   88px;
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------------------------------------------------------------- Reset */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-navy);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: pretty;
}

p { margin: 0; text-wrap: pretty; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--c-blue);
  text-decoration: none;
  transition: color .15s var(--ease);
}
a:hover { color: var(--c-blue-dark); text-decoration: underline; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

button { font: inherit; color: inherit; cursor: pointer; }

/* ------------------------------------------------------- Accessibilité */
:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--c-navy);
  color: var(--c-white);
  font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; text-decoration: none; color: var(--c-white); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------- Utilitaires */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--blue  { background: var(--c-blue-wash); }
.section--pink  { background: var(--c-pink-wash); }
.section--navy  { background: var(--c-navy); color: var(--c-white); }
.section--tight { padding-block: 72px; }

.section__head { max-width: 620px; margin-bottom: 48px; }
.section__head--tight { margin-bottom: 40px; }

.eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--c-blue);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .04em;
}
.eyebrow--pink { color: var(--c-pink); }

.title-lg  { font-size: var(--fs-h2-lg); }
.title-md  { font-size: var(--fs-h2-md); }
.title-cta { font-size: var(--fs-h2-cta); }

.lead {
  margin-top: 16px;
  color: var(--c-text);
  font-size: 17px;
  line-height: 1.65;
}

/* ------------------------------------------------------ Motion réduite */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 860px) {
  :root {
    --gutter: 20px;
    --section-y: 56px;
    --fs-hero: 34px;
    --fs-h2-lg: 26px;
    --fs-h2-md: 24px;
    --fs-h2-cta: 28px;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-hero: 28px;
    --fs-h2-lg: 22px;
  }
}