/* =========================================================================
   base.css - Reset léger + styles éléments
   Applique les tokens (tokens.css doit être chargé AVANT ce fichier).
   Mobile-first. Accessibilité : focus visibles, hiérarchie, reduced-motion.
   ========================================================================= */

/* -------------------------------------------------------------------------
   @font-face - police auto-hébergée en local (RGPD : pas de Google CDN).
   Famille UNIQUE : Plus Jakarta Sans (grotesk humaniste chaleureux, variable
   woff2 latin subset). Hiérarchie par le POIDS + la COULEUR, pas par la taille
   brute (cf. anti-slop : abandon de Fraunces « tell IA », Inter écarté aussi).
   Axe wght 400..700. Romain SEUL : l'@font-face italique (fichier jamais
   fourni, 404) a été retiré le 2026-10-01 ; mesuré au rendu sur les 8 pages,
   aucun texte n'est en Plus Jakarta italique (toutes les italiques du site
   sont en --font-signature, Fraunces). Si une emphase italique apparaît un
   jour en Jakarta, fournir le woff2 ET remettre la déclaration.
   Les anciens woff2 Fraunces/Inter restent dans ../fonts/ (nettoyage ultérieur).
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-latin-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   Fraunces - police de SIGNATURE uniquement (2026-07-19).
   Réintroduite pour raccrocher au logo (monogramme serif à fort contraste).
   Portée strictement limitée : wordmarks, H1 du hero, overlines, citation XL.
   Elle n'est JAMAIS la police des titres courants (cf. tokens.css §TYPO).
   Fallback serif système propre.

   FICHIERS ALLÉGÉS (2026-09-26, audit DESIGNER #5) : chaque fichier est
   réduit aux seules valeurs d'axes que le site emploie, relevées au rendu
   (1440 / 390 / 320) et non supposées :
   - droite  : wght 500-600 (wordmark footer 500, surtitres 600),
               opsz 24-144 (surtitres 24, wordmark 144). 67 -> 52 Ko ;
   - italique : wght 500 FIGÉ (seule graisse employée), opsz 24-144 GARDÉ
               VARIABLE : les mots-échos du hero n'ont pas de
               font-variation-settings, leur opsz suit donc leur taille
               (28 à 72 px), et le repère « Ce qui vous amène ici » est à
               opsz 24. Figer l'opsz à 144 aurait changé leur dessin.
               82 -> 39 Ko.
   Jeu de caractères : latin-1 complet + œ Œ ’ ‘ “ ” « » – — … € (français
   complet). Les descripteurs font-weight ci-dessous suivent ces plages : une
   graisse hors plage serait synthétisée, ce qui n'arrive pas aujourd'hui.
   Commande de régénération : cf. fonts/README.md.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-var.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic-latin-var.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   Hurricane - cursive des TITRES DE SECTION (2026-09-15).
   Calligraphie moderne au pinceau, choisie pour raccrocher le lettrage manuscrit
   du logo (contraste marqué, terminaisons mousses, accent en dièse épais).
   Robert Leuschke, SIL Open Font License 1.1 - auto-hébergée comme les autres,
   aucune requête vers un CDN (RGPD). Subset latin (U+0000-00FF + guillemets et
   apostrophe typographiques), 27 Ko, une seule graisse (400).
   PAS préchargée dans index.html : le premier H2 (« Bonjour et bienvenue… »)
   est sous la ligne de flottaison, le hero n'en contient aucun. font-display:
   swap : le repli cursive système s'affiche d'abord, le texte n'est jamais
   invisible.
   Portée déclarée dans tokens.css §TYPO (--font-manuscrite) et appliquée plus
   bas au seul sélecteur h2.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Hurricane';
  src: url('../fonts/hurricane-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

* {
  margin: 0;
}

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

body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--texte);
  font-family: var(--font-corps);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

ul,
ol {
  padding-left: 1.25em;
}

a {
  color: var(--vert-foret);
  text-decoration-color: var(--vert-sauge);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-micro) var(--ease-doux),
              text-decoration-color var(--dur-micro) var(--ease-doux);
}

a:hover {
  color: var(--vert-sauge);
  text-decoration-color: var(--dore-tournesol);
}

/* -------------------------------------------------------------------------
   Titres - Plus Jakarta Sans (grotesk), couleur forêt, portés par le poids.
   Tailles fluides via tokens.
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-titre);
  color: var(--titre);
  font-weight: var(--fw-bold); /* grotesk : titres en 700 (poids = hiérarchie) */
  letter-spacing: -0.012em;    /* léger resserrement, calme un grotesk en grand */
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}

/* H2 = LES TITRES DE SECTION, en cursive depuis le 2026-09-15 (demande
   d'Aurélie ; les titres seulement, jamais le texte courant). Les neuf H2 de
   index.html sont tous des titres de section : c'est pourquoi le sélecteur nu
   suffit et qu'aucune classe n'est nécessaire.
   - font-weight 400 + font-synthesis: none : Hurricane n'existe qu'en une
     graisse. Sans ça, le 600 hérité de la règle h1..h4 ci-dessus ferait
     SYNTHÉTISER un gras par le navigateur (épaississement uniforme qui écrase
     justement le contraste pleins/déliés qu'on est venu chercher).
   - letter-spacing: normal : le -0,012em du grotesk décollait les liaisons
     entre lettres d'un script lié.
   - -webkit-font-smoothing: auto : le `antialiased` global (body) AMINCIT le
     texte sur macOS ; sur les déliés filiformes de Hurricane il les faisait
     blanchir. On revient au rendu sous-pixel pour ces titres uniquement.
   - Corps et interlignage : cf. tokens.css (--fs-h2-manuscrit, 44 → 62 px). */
h2 {
  font-family: var(--font-manuscrite);
  font-size: var(--fs-h2-manuscrit);
  line-height: var(--lh-h2-manuscrit);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: normal;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  /* RÉSERVE D'ENCRE (2026-09-28, retour d'Aurélie : « le D et le F de
     "formation" sont coupés », capture Safari à 1440). Hurricane dessine
     LOIN hors de ses boîtes : mesuré glyphe par glyphe (canvas, 100 px),
     jusqu'à 0,29 em à GAUCHE de l'origine (j 0,29 · g 0,20 · y 0,15 · f 0,10)
     et 0,39 em à DROITE de l'avance (T 0,39 · f 0,36 · F 0,30 · J 0,29) ; en
     bas, les jambages (g j y f : 0,38 em) dépassent la line-box de 0,03 em.
     Chrome peint quand même cette encre hors boîte ; Safari NON dès que le
     titre a son propre calque (filter/transform du reveal §0, colonne
     collante des formations) : ce calque est borné à la BOÎTE, la boucle du
     D et celle du f étaient coupées net au bord gauche.
     Correctif à la racine : la boîte ENGLOBE l'encre. Padding de la réserve,
     compensé par une marge négative égale : la boîte de contenu (donc les
     retours à la ligne, le centrage et la position du texte) ne bouge pas
     d'un pixel. Les règles qui posent un margin-bottom sur un H2 doivent
     retrancher --encre-bas (cf. site.css, .psy-public__titre et pages
     légales). Le haut n'a pas besoin de réserve (accents : 0,76 em, la
     line-box en offre 0,87). */
  --encre-g: 0.3em;
  --encre-d: 0.4em;
  --encre-bas: 0.06em;
  padding: 0 var(--encre-d) var(--encre-bas) var(--encre-g);
  margin-inline: calc(-1 * var(--encre-g)) calc(-1 * var(--encre-d));
  margin-bottom: calc(-1 * var(--encre-bas));
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semi); /* 600 */
  letter-spacing: -0.006em;
}

p {
  max-width: var(--measure);
}

/* -------------------------------------------------------------------------
   Accessibilité - focus visibles (clavier)
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Lien d'évitement (skip link) */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100px;
  z-index: 100;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--vert-foret);
  color: var(--creme);
  border-radius: var(--radius-sm);
  transition: top var(--dur-micro) var(--ease-doux);
}
.skip-link:focus {
  top: var(--space-sm);
}

/* -------------------------------------------------------------------------
   Layout - container + section (mobile-first)
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Garantit que le contenu lisible de CHAQUE section reste au-dessus du
     champ de pollen sticky plein viewport (cf. site.css §3b + tokens.css) :
     .container est le point de sortie commun à toutes les sections vers la
     pile d'empilement de la racine (aucune section n'isole plus son
     contenu). */
  position: relative;
  z-index: var(--z-contenu);
}

.section {
  padding-block: var(--section-y);
}

@media (min-width: 768px) {
  :root {
    --section-y: var(--space-3xl); /* 128px desktop */
    --gutter: var(--space-lg);
  }
}

/* -------------------------------------------------------------------------
   Classes typographiques utilitaires (rôles du tableau §3)
   ------------------------------------------------------------------------- */
.t-display {
  font-family: var(--font-titre);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  color: var(--titre);
  font-weight: var(--fw-bold); /* grotesk : display porté par le poids */
  letter-spacing: -0.018em;
}
.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--texte-doux);
  text-wrap: pretty; /* pas de ligne veuve sur les chapôs */
}
.t-small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}
.t-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semi);
  color: var(--texte-doux);
}
/* Overline = élément de SIGNATURE : serif Fraunces en capitales très espacées,
   calqué sur la baseline « PSYCHOLOGUE CLINICIENNE » du logo. opsz basse pour
   des capitales robustes à 13px (pas de hairlines fragiles). */
.t-overline {
  font-family: var(--font-signature);
  font-variation-settings: var(--fvs-signature-petit);
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  font-weight: var(--fw-semi); /* 600 */
  text-transform: uppercase;
  letter-spacing: var(--ls-signature);
  color: var(--vert-sauge);
}

/* -------------------------------------------------------------------------
   prefers-reduced-motion - §4 : on coupe transitions/animations longues,
   on garde des fades très courts et le focus.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}