/* ==========================================================================
   Les 3 Sourires — Design tokens (charte graphique v1.0)
   Seul fichier du site autorisé à contenir des valeurs de couleur.
   Tout le reste du CSS utilise ces variables.
   ========================================================================== */

:root {
  /* Couleurs de marque */
  --color-primary: #16405B;      /* Bleu profond — confiance */
  --color-secondary: #71B5B0;    /* Turquoise doux — bien-être */
  --color-accent: #BF8C44;       /* Doré chaud — premium */
  --color-bg: #F7F5F5;           /* Blanc chaud — fond général */
  /* Valeurs techniques */
  --color-surface: #FFFFFF;
  --color-accent-text: #8A5F1F;  /* Doré lisible sur fond clair */
  --color-error: #B3261E;
  /* Associations */
  --color-text: var(--color-primary);
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #16405B;
  /* Typographie */
  --font-heading: 'Manrope', 'Manrope Fallback', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Raleway', 'Raleway Fallback', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-script: 'Caveat', 'Caveat Fallback', 'Segoe Script', cursive;
  --fw-heading: 600;
  --fw-body: 500;
  --fw-body-strong: 700;
  /* Forme et profondeur */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-soft: 0 8px 24px rgba(22, 64, 91, 0.08);
  --shadow-hover: 0 12px 32px rgba(22, 64, 91, 0.14);
  /* Mise en page */
  --container: 1200px;
  --section-space: clamp(4rem, 8vw, 7rem);

  /* --- Dérivés (opacités des couleurs de la charte uniquement) --- */
  --color-border: rgba(22, 64, 91, 0.08);         /* Bordure des cartes */
  --color-border-strong: rgba(22, 64, 91, 0.2);   /* Filet bleu à 20 % (bloc turquoise) */
  --color-primary-soft: rgba(22, 64, 91, 0.06);   /* Survol discret sur fond clair */
  --color-overlay: rgba(22, 64, 91, 0.55);        /* Voile sur image */
  --color-accent-tint: rgba(191, 140, 68, 0.12);  /* Survol du bouton secondaire */
  --color-todo-bg: rgba(191, 140, 68, 0.18);      /* Fond des placeholders [À COMPLÉTER] */
  --color-on-primary-muted: rgba(255, 255, 255, 0.8); /* Texte secondaire sur fond bleu */
  --color-on-primary-line: rgba(255, 255, 255, 0.16); /* Filets clairs sur fond bleu */
  --color-secondary-soft: rgba(113, 181, 176, 0.28);  /* Formes vertes décoratives */
  --color-secondary-faint: rgba(113, 181, 176, 0.14); /* Fonds verts très légers (cartes, pastilles) */
  --color-on-secondary-line: rgba(255, 255, 255, 0.22); /* Formes claires décoratives sur fond vert */
  --shadow-header: 0 4px 18px rgba(22, 64, 91, 0.08);

  /* Filet doré : signature graphique du site (rappel du filet du logo) */
  --rule: 1px solid var(--color-accent);
  --rule-short: 40px;

  /* Espacements (grille de 8 px) */
  --space-1: 0.5rem;   /*  8 px */
  --space-2: 1rem;     /* 16 px */
  --space-3: 1.5rem;   /* 24 px */
  --space-4: 2rem;     /* 32 px */
  --space-5: 2.5rem;   /* 40 px */
  --space-6: 3rem;     /* 48 px */
  --space-8: 4rem;     /* 64 px */
  --space-10: 5rem;    /* 80 px */
  --gutter: clamp(1.25rem, 3vw, 2rem);

  /* Mouvement : une seule courbe et une seule durée sur tout le site */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Sortie douce (apparitions) */

  /* En-tête */
  --logo-size: 60px;
  --header-pad: 0.5rem;
  --header-h: calc(var(--logo-size) + 2 * var(--header-pad));
  --action-bar-h: 64px;

  /* Typographie fluide */
  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  --fs-h4: 1.125rem;
  --fs-body: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-key: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  --fs-script: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

@media (min-width: 64em) {
  :root {
    --logo-size: 92px;
    --header-pad: 0.625rem;
  }
}