/* Lipo & Moi — Design tokens (Direction C "Douceur")
   Importer dans chaque page : <link rel="stylesheet" href="../brand/design-tokens.css">
   Police chargée via Google Fonts ci-dessous. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500;1,9..144,600&family=Inter:wght@400;500&display=swap');

:root {
  /* Couleurs */
  --sable:        #F5ECE3; /* fond principal */
  --creme:        #FBF5EF; /* surfaces / cartes */
  --argile:       #C98A7A; /* accent chaud */
  --argile-clair: #F0DED4; /* tint pour blocs doux */
  --prune:        #5B3A4B; /* couleur primaire profonde (boutons, titres) */
  --prune-clair:  #7A5566;
  --sauge:        #9CA98C; /* secondaire végétal */
  --encre:        #382A2E; /* texte principal */
  --encre-doux:   #6F5F59; /* texte secondaire */
  --ligne:        #E3D6CA; /* bordures discrètes */

  /* Typo */
  --serif: 'Fraunces', Georgia, serif;   /* titres, marque (souvent en italique) */
  --sans:  'Inter', system-ui, sans-serif; /* corps */

  /* Rayons / ombres douces */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --ombre: 0 10px 30px rgba(91, 58, 75, 0.08);
}

/* Base */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--sable);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--prune); line-height: 1.2; }
h1 { font-size: clamp(30px, 5vw, 46px); }
h2 { font-size: clamp(24px, 3.5vw, 32px); }
h3 { font-size: 20px; }
a { color: var(--prune); }
em.marque { font-style: italic; font-family: var(--serif); }

/* Bouton signature */
.btn {
  display: inline-block;
  background: var(--prune);
  color: var(--sable);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  padding: 14px 26px;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { background: #4a2f3d; transform: translateY(-1px); }
.btn-clair { background: var(--argile); color: #4A1B0C; }

/* Accessibilité : focus clavier visible (WCAG 2.4.7) */
.btn:focus-visible,
a.pilier:focus-visible,
.child-card:focus-visible,
.cta-form input:focus-visible,
.cta-form .btn:focus-visible,
a:focus-visible { outline: 3px solid var(--prune); outline-offset: 2px; border-radius: var(--r-sm); }

/* Bloc doux réutilisable */
.carte {
  background: var(--creme);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre);
}

/* Disclaimer santé (obligatoire bas de page / lead magnet) */
.disclaimer {
  font-size: 13px;
  color: var(--encre-doux);
  background: var(--argile-clair);
  border-radius: var(--r-md);
  padding: 14px 18px;
  line-height: 1.55;
}

/* Mot de Léa — présence humaine, réutilisable (landing + articles) */
.mot-lea {
  background: var(--creme);
  border-left: 3px solid var(--argile);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 18px 24px;
  margin: 26px auto;
  max-width: 640px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--prune);
}
.mot-lea .sig {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-style: normal;
  font-family: var(--sans);
  color: var(--encre-doux);
}
.mot-lea .coeur { color: var(--argile); font-style: normal; }

/* Récompense émotionnelle : confirmation d'inscription (le moment où elle a baissé la garde) */
@keyframes lm-pop  { 0% { transform: scale(.4); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes lm-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fs-check    { animation: lm-pop  .5s cubic-bezier(.34,1.56,.64,1) both; }
.cta-success { animation: lm-fade .4s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .fs-check, .cta-success { animation: none; }
}