/* mini · La lettre de bébé — design tokens */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Young+Serif&display=swap");

:root {
  /* Couleurs */
  --lait: #FBF6EE;          /* fond de page */
  --carte: #FFFFFF;         /* cartes, formulaire */
  --sable: #F3E9DB;         /* bandes, fond email */
  --filet: #EADFCF;         /* bordures */
  --filet-fort: #DCCDB8;    /* séparateurs FAQ */
  --encre: #1F3442;         /* texte, bouton (12:1 sur lait) */
  --encre-hover: #142430;
  --encre-texte: #3A4C57;   /* paragraphes secondaires */
  --encre-douce: #4C5E69;   /* petits textes (6,3:1) */
  --champ-bord: #8A7B6B;    /* bordure de champ (4,1:1 sur blanc) */
  --mandarine: #F2894A;     /* chat, décor — jamais pour du texte */
  --lien: #B04E12;          /* liens, surtitres (4,9:1) */
  --lien-hover: #8A3A0C;
  --beurre: #F7D98A;  --beurre-clair: #FCF0CF;
  --ciel: #BCD7E6;    --ciel-clair: #E3EEF4;
  --tilleul: #A9C8A0; --tilleul-clair: #E6F0E1; --tilleul-texte: #2F6A4A;
  --argile: #E9B9A3;
  --erreur: #B42318;  --erreur-fond: #FFF7F5;
  --focus: #2F62D6;

  /* Typo */
  --f-titre: "Young Serif", Georgia, serif;
  --f-texte: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --t-h1: clamp(32px, 1.4rem + 2.6vw, 60px);   /* lh 1.1 */
  --t-h2: clamp(28px, 1.2rem + 1.6vw, 42px);   /* lh 1.15 */
  --t-titre-lettre: 32px;                      /* lh 38px */
  --t-h3: 23px;                                /* lh 30px */
  --t-citation: 22px;                          /* lh 30px */
  --t-chapo: clamp(17px, 0.95rem + 0.35vw, 20px); /* lh 1.55 */
  --t-texte: 17px;                             /* lh 27px */
  --t-lettre: 18px;                            /* lh 29px */
  --t-bouton: 18px;                            /* 800, lh 24px */
  --t-libelle: 16px;                           /* 800, lh 22px */
  --t-petit: 15px;                             /* lh 21px */
  --t-surtitre: 13px;                          /* 800, capitales, +0.08em */

  /* Espaces */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px;
  --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-18: 72px; --e-22: 88px;
  --gouttiere: clamp(16px, 4vw, 48px);
  --conteneur: 1240px;

  /* Rayons */
  --r-champ: 12px; --r-case: 14px; --r-bouton: 16px; --r-citation: 20px;
  --r-carte: 24px; --r-illu: 32px; --r-pastille: 999px;

  /* Ombre */
  --ombre-carte: 0 18px 40px -24px rgb(31 52 66 / .35);

  /* Tailles */
  --h-bouton: 56px; --h-champ: 52px; --cible-min: 44px;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }