/* La Thérapie du TAO — Tokens du design system
   Source : projet Claude Design « La Thérapie du TAO — Design System »
   (https://claude.ai/design/p/9a846bb7-15f3-428c-bc08-bec692f7be0a)
   Fichiers amont : tokens/colors.css, tokens/typography.css, tokens/spacing.css

   ⚠️ DA 2026-07 — CHANGEMENT DE DIRECTION ARTISTIQUE.
   L'identité précédente (encre sur parchemin, serif Cormorant, angles vifs) est
   REMPLACÉE par : sable chaud, vert forêt, terre cuite, formes arrondies,
   accents manuscrits (Caveat).
   Les anciens noms de couleurs subsistent en fin de fichier comme ALIAS
   DÉPRÉCIÉS (contrat repris de l'amont) : ils pointent sur la nouvelle palette,
   ce qui permet à main.css de basculer sans réécriture massive.

   ⚠️ ÉVOLUTION TYPO (toujours DA 2026-07, pull du 2026-09-08) — NE PAS lire
   comme un retour à l'ancienne identité : seul l'appariement des polices
   change. --font-display redevient une serif (Cormorant Garamond), réservée
   aux TITRES ; l'Oswald condensé migre vers le nouveau --font-label, réservé
   aux LIBELLÉS/BOUTONS/NAVIGATION. Couleurs, formes arrondies et absence de
   serif hors des titres restent inchangées.

   Ce fichier réunit DEUX vocabulaires, volontairement :
   1. les noms de la base FSE (--surface-*, --text-body, --accent-*, --space-sm…),
      consommés par main.css et les compositions — les VALEURS changent, jamais
      les NOMS ;
   2. les noms natifs du design system (--color-sand-100, --tracking-widest…),
      pour qu'une maquette du projet Claude Design se porte quasi telle quelle.

   ⚠️ Deux familles commencent par --text- et ne se mélangent PAS :
      --text-heading / body / muted / accent / on-dark = COULEURS (base FSE)
      --text-xs / sm / base / lg / 2xl…                = TAILLES  (design system)
   Les presets éditeur équivalents sont dans theme.json : garder les deux en phase.

   ⚠️ ACCESSIBILITÉ — la terre cuite pleine #B05C33 NE PASSE PAS AA en texte de
   taille normale : 4,00:1 sur sable-100, 4,41:1 en fond de CTA avec libellé
   sable-50 (seuil AA = 4,5:1). Elle est donc réservée aux SURFACES et au GRAND
   texte. Tout texte courant, tout libellé de bouton et tout fond de CTA portant
   un libellé emploient --color-terracotta-deep #8E4726 (5,74:1 sur sable-100,
   6,34:1 en fond de CTA). Le miel et la sauge ne portent JAMAIS de texte sur
   sable (2,04:1 et 2,51:1) : uniquement en pastille avec texte forest-deep.
   Mesurer tout nouveau couple couleur/fond AVANT de l'introduire. */

/* Webfonts auto-hébergées (audit perf/sécurité du 2026-09-22) — anciennement un
   @import vers fonts.googleapis.com. Deux défauts qu'il posait :
   1. Chaîne de 3 requêtes avant le premier octet de police (tokens.css → CSS
      Google → fichier gstatic), sans le moindre `preconnect`.
   2. L'IP du visiteur partait chez Google dès la première page, AVANT tout
      consentement RGPD — la bannière cookies du site ne couvre pas ce cas.
   Les 6 fichiers ci-dessous sont les variable fonts DE GOOGLE elles-mêmes
   (mêmes octets que gstatic, un seul fichier par famille/style couvre tous
   les poids déclarés), filtrées au SEUL sous-ensemble Unicode « latin »
   (unicode-range U+0000-00FF + Œ/œ et ponctuation) : il couvre entièrement le
   français, seule langue du site. Poids exacts utilisés par le thème : Caveat
   500-700 (accents manuscrits), Cormorant Garamond 400-700 + 400 italique
   (titres), Nunito Sans 300-700 + 400 italique (texte courant), Oswald
   400-700 (libellés). Regénérer si un poids/style supplémentaire est utilisé
   un jour : https://fonts.googleapis.com/css2?family=... (voir historique
   git de ce fichier pour la requête complète), filtrer les blocs
   `unicode-range: U+0000-00FF...`, télécharger leur `src`. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/oswald.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/nunito-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-sans-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/caveat.woff2') format('woff2');
}

:root {
  /* ============================================================
     COULEURS — palette native (DA 2026-07 : nature, chaleur, apaisement)
     Proportions visées : sable ≈ 60 %, forêt ≈ 25 %, terre cuite ≈ 12 %,
     miel ≈ 3 %. La terre cuite ponctue, elle n'habille pas ; le miel est
     une étincelle par écran, jamais une surface.
     ============================================================ */

  /* ---- Sable / papier — fond ---- */
  --color-sand-50:  #FBF6EF;   /* surface la plus claire — cartes */
  --color-sand-100: #F5EADC;   /* fond principal — papier chaud */
  --color-sand-200: #EDDFCD;   /* sections alternées */
  --color-sand-300: #E0CDB6;   /* aplats doux, bordures chaudes */

  /* ---- Vert forêt — ancrage, sérieux (Bois) ---- */
  --color-forest:      #2F3B28;   /* titres, texte fort, surfaces sombres */
  --color-forest-deep: #212A1C;   /* pied de page, fonds profonds */
  --color-forest-soft: #47563B;   /* variante lisible sur sable */
  --color-sage:        #8E9A79;   /* pastilles, motifs végétaux */
  --color-sage-light:  #B7BFA6;   /* filets, lavis, fonds discrets */
  --color-sage-wash:   #E4E7DB;   /* fond de bloc très clair */

  /* ---- Terre cuite — énergie, accent (Feu) ---- */
  --color-terracotta:      #B05C33;   /* accent, SURFACES et grand texte */
  --color-terracotta-deep: #8E4726;   /* survol + tout texte/CTA (cf. a11y) */
  --color-terracotta-soft: #CE8A64;   /* variante douce, lisible sur fond sombre */
  --color-terracotta-wash: #F4E2D6;   /* fond de pastille */

  /* ---- Miel — la touche de gaieté ---- */
  --color-honey:      #D89A54;   /* soulignements, points, états actifs */
  --color-honey-wash: #F7E8CE;   /* fond de surlignage */

  /* ---- Encre — texte ---- */
  --color-ink:       #2A2520;   /* texte courant */
  --color-ink-soft:  #574F45;   /* texte secondaire */
  --color-ink-faint: #8B8074;   /* légendes, désactivé */

  /* ---- Alias sémantiques natifs (maquettes Claude Design) ---- */
  --surface-bg:      var(--color-sand-100);
  --surface-bg-alt:  var(--color-sand-200);
  --surface-dark:    var(--color-forest);
  --surface-overlay: rgba(245, 234, 220, 0.94);

  --text-primary:   var(--color-forest);
  --text-secondary: var(--color-ink-soft);
  --text-label:     var(--color-forest-soft);

  --color-accent:     var(--color-terracotta);
  --color-accent-alt: var(--color-sage);
  --color-accent-joy: var(--color-honey);
  --color-divider:    #DDD1BE;
  --color-border:     #D3C4AF;
  --color-focus:      var(--color-terracotta);

  /* ---- Rotation de pastilles (jamais deux de même couleur côte à côte) ---- */
  --tone-1-bg: var(--color-forest);
  --tone-1-fg: var(--color-sand-50);
  --tone-2-bg: var(--color-terracotta);
  --tone-2-fg: var(--color-sand-50);
  --tone-3-bg: var(--color-sage);
  --tone-3-fg: var(--color-forest-deep);

  /* ---- Échelle neutre (contrat base FSE) ---- */
  /* Pas de blanc pur dans cette identité : le « 0 » est le sable le plus clair. */
  --neutral-0:   var(--color-sand-50);
  --neutral-50:  var(--color-sand-100);
  --neutral-100: var(--color-sand-200);
  --neutral-200: var(--color-divider);
  --neutral-400: var(--color-border);
  --neutral-500: var(--color-ink-faint);
  --neutral-700: var(--color-ink-soft);
  --neutral-800: var(--color-ink);
  --neutral-900: var(--color-forest);

  /* ---- Rampe d'accent (contrat base FSE), du plus clair au plus dense ---- */
  /* ⚠️ --accent-500 (terre cuite pleine) ne porte PAS de texte de taille
     normale : pour un fond de bouton avec libellé, employer --accent-600. */
  --accent-100: var(--color-terracotta-wash);
  --accent-300: var(--color-terracotta-soft);
  --accent-500: var(--color-terracotta);
  --accent-600: var(--color-terracotta-deep);
  --accent-700: var(--color-forest);

  /* ---- Surfaces (contrat base FSE) ---- */
  --surface-page:    var(--color-sand-100);
  --surface-card:    var(--color-sand-50);
  --surface-alt:     var(--color-sand-200);
  --surface-band:    var(--color-sage-wash);   /* lavis sauge — respiration */
  --surface-inverse: var(--color-forest);
  --surface-hero:    var(--color-forest);

  /* ---- Texte (contrat base FSE) ---- */
  --text-heading: var(--color-forest);
  --text-body:    var(--color-ink);
  /* ⚠️ PAS --color-ink-faint : #8B8074 ne donne que 3,25:1 sur sable, sous AA.
     Ce token porte des légendes en 11–13 px, donc jamais du « grand texte » :
     il pointe sur l'encre douce (6,78:1). L'encre pâle reste disponible pour
     du décoratif ou du texte ≥ 24 px, mais n'a plus d'emploi courant ici. */
  --text-muted:   var(--color-ink-soft);
  --text-accent:  var(--color-terracotta-deep);   /* AA sur sable — cf. en-tête */
  --text-on-dark: var(--color-sand-50);

  /* ---- Bordures ---- */
  --border-soft:   var(--color-divider);
  --border-strong: var(--color-border);
  --border-thin:   1px solid var(--color-divider);
  --border-accent: 1px solid var(--color-accent);
  --border-forest: 1px solid var(--color-forest);

  /* ============================================================
     TYPOGRAPHIE — DA 2026-07 (évolution du 2026-09-08) : serif capitales
     pour les TITRES (Cormorant Garamond), condensé capitales pour les
     LIBELLÉS/BOUTONS/NAV (Oswald), sans humaniste pour le texte courant,
     script manuscrit pour les accents.
     ============================================================ */
  /* Titres, libellés et boutons restent TOUJOURS en capitales — seule la
     police des TITRES change (serif au lieu de condensé). */
  --font-display: 'Cormorant Garamond', 'Garamond', Georgia, serif;
  --font-label:   'Oswald', 'Archivo Narrow', 'Helvetica Neue', sans-serif;
  --font-body:    'Nunito Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
  /* Le manuscrit ne porte jamais un titre entier ni un paragraphe :
     une demi-phrase, une signature. Une seule occurrence par bloc. */
  --font-script:  'Caveat', 'Segoe Script', cursive;

  /* Échelle de tailles */
  --text-2xs:  0.6875rem;  /* 11px — micro-libellés */
  --text-xs:   0.75rem;    /* 12px — libellés capitales */
  --text-sm:   0.875rem;   /* 14px — légendes */
  --text-base: 1rem;       /* 16px — corps (minimum de la DA) */
  --text-md:   1.125rem;   /* 18px — corps large */
  --text-lg:   1.375rem;   /* 22px — chapô */
  --text-xl:   1.75rem;    /* 28px — sous-titres */
  --text-2xl:  2.25rem;    /* 36px — titres de section */
  --text-3xl:  3rem;       /* 48px — grands titres */
  --text-4xl:  4rem;       /* 64px — display */
  --text-5xl:  5.5rem;     /* 88px — héro */

  /* Verrouillage logo — texte du logo dans l'ensō (maquette Claude Design).
     ⚠️ Non consommé par le code du thème à ce jour : le logo est une image
     statique (assets/img/enso-*), pas un lockup texte généré en CSS. Token
     réservé si un lockup texte est introduit plus tard. */
  --text-lockup:     3.5rem;  /* 56px — titre du logo dans l'ensō */
  --tracking-lockup: 0.06em;  /* approche du verrouillage logo */

  /* Interlignes */
  /* ⚠️ --leading-tight passe de 1,02 à 1,08 avec le retour du serif sur les
     titres (2026-09-08) : la valeur vient de la DA, ne pas la retoucher sans
     nouvelle décision — revérifier au pixel les capitales accentuées après
     tout changement (cf. main.css, règle header + *:not(:has(.hero))). */
  --leading-tight:   1.08;   /* titres sérif en capitales */
  --leading-snug:    1.2;
  --leading-normal:  1.62;   /* texte courant */
  --leading-relaxed: 1.8;
  --leading-script:  1.25;

  /* Interlettrage — la même échelle sert les titres serif (--font-display)
     et les libellés condensés (--font-label) ; les valeurs n'ont pas changé
     avec le retour du serif sur les titres. */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.16em;
  --tracking-ultra:  0.26em;

  /* Graisses */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Sur-titres (contrat base FSE) */
  --type-eyebrow-size:    var(--text-xs);
  --type-eyebrow-spacing: var(--tracking-widest);

  /* ============================================================
     ESPACEMENTS (base 4px)
     ============================================================ */
  --space-1:  0.25rem;   /*   4px */
  --space-2:  0.5rem;    /*   8px */
  --space-3:  0.75rem;   /*  12px */
  --space-4:  1rem;      /*  16px */
  --space-5:  1.25rem;   /*  20px */
  --space-6:  1.5rem;    /*  24px */
  --space-8:  2rem;      /*  32px */
  --space-10: 2.5rem;    /*  40px */
  --space-12: 3rem;      /*  48px */
  --space-16: 4rem;      /*  64px */
  --space-20: 5rem;      /*  80px */
  --space-24: 6rem;      /*  96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */
  --space-48: 12rem;     /* 192px */

  /* Alias base FSE */
  --space-xs:      var(--space-2);
  --space-sm:      var(--space-4);
  --space-md:      var(--space-6);
  --space-lg:      var(--space-8);
  --space-xl:      var(--space-12);
  --space-2xl:     var(--space-16);
  --space-section: var(--space-24);

  /* ---- Gabarits ---- */
  --container-xs:  480px;
  --container-sm:  640px;
  --container-md:  820px;
  --container-lg:  1120px;   /* largeur de contenu de référence */
  --container-xl:  1300px;
  --container-2xl: 1440px;

  --section-y: var(--space-24);
  --section-x: var(--space-10);

  /* ============================================================
     RAYONS — la DA est ARRONDIE, jamais anguleuse.
     La forme la plus dure autorisée est --radius-xs (6px).
     ⚠️ Inversion complète par rapport à l'ancienne identité, où tous
     les rayons valaient 0 : ne pas « re-durcir » sans décision de design.
     ============================================================ */
  --radius-none: 0;        /* conservé pour les cas techniques (masques, filets) */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;     /* cartes et photos — le rayon de référence */
  --radius-xl:   32px;
  --radius-pill: 999px;    /* boutons et étiquettes */
  --radius-full: 50%;      /* pastilles d'icône parfaitement rondes */

  /* ---- Pastilles rondes (icônes) ---- */
  --dot-sm: 40px;
  --dot-md: 56px;
  --dot-lg: 72px;

  /* ============================================================
     OMBRES — douces et chaudes, jamais grises.
     Réservées aux éléments flottants ; les boutons restent plats.
     ============================================================ */
  --shadow-xs:   0 2px 10px rgba(58, 44, 30, 0.06);
  --shadow-sm:   0 2px 10px rgba(58, 44, 30, 0.06);
  --shadow-md:   0 8px 28px rgba(58, 44, 30, 0.09);
  --shadow-lg:   0 18px 56px rgba(58, 44, 30, 0.13);
  --shadow-card: var(--shadow-md);
  --shadow-btn:  none;

  /* ============================================================
     TRANSITIONS — micro-interactions seulement (survol 0,24 s).
     Aucune animation d'entrée, aucun parallaxe : la marque est calme.
     ============================================================ */
  --ease:     cubic-bezier(0.32, 0.72, 0.28, 1);
  --duration: 0.24s;
  --transition-fast: var(--duration) var(--ease);
  --transition-base: var(--duration) var(--ease);

  /* ============================================================
     ALIAS DÉPRÉCIÉS — noms de l'ancienne DA (carte de visite 2026-07),
     repris de tokens/colors.css amont. Ils permettent à main.css de
     basculer sans réécriture massive.
     ⚠️ Ne PAS les employer dans du CSS neuf : écrire les noms ci-dessus.
     ============================================================ */
  --color-parchment:        var(--color-sand-100);
  --color-parchment-light:  var(--color-sand-50);
  --color-parchment-dark:   var(--color-sand-200);
  --color-parchment-muted:  var(--color-sand-300);
  --color-warm-brown:       var(--color-terracotta-deep);
  --color-terracotta-light: var(--color-terracotta-soft);
  --color-seal-red:         var(--color-terracotta-deep);
  --color-seal:             var(--color-terracotta-deep);
  --color-bamboo:           var(--color-sage);
  --color-bamboo-light:     var(--color-sage-light);
  --color-mist:             var(--color-border);
  --color-mist-light:       var(--color-divider);
}