/**
 * APULIA HEALTH CENTER — Design Tokens & Reset
 * Charte graphique Roots Agency — Août 2026
 */

/* ==========================================================================
   COMMISSIONER — la police unique du site, auto-hébergée
   ==========================================================================
   Un seul dessin pour tout : titres, texte, navigation, boutons, formulaires,
   prix. Playfair Display et Figtree sont retirés, avec leurs appels à Google
   Fonts : plus aucune requête vers fonts.googleapis.com ni fonts.gstatic.com,
   donc plus de tiers sur le chemin critique du rendu.

   Fichiers : la police variable, axe wght 300→700, découpée en deux sous-
   ensembles Unicode. Deux fichiers de 30 à 37 ko couvrent tout le français ;
   seul « latin » est réellement demandé sur nos pages — « latin-ext » ne se
   télécharge que si un caractère de sa plage apparaît, ce qui n'arrive
   pratiquement jamais ici. C'est pourquoi lui seul est préchargé dans le
   <head> des pages.

   Source : Google Fonts, Commissioner v24 (SIL Open Font License 1.1),
   fichiers relevés le 10 septembre 2026.
   ========================================================================== */

@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/commissioner-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/commissioner-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- PALETTE DE COULEURS NOMMÉES --- */
  --calce: #E9EAE5;         /* Chaux : fond clair alternatif et univers santé */
  --sale: #FBFAF8;          /* Blanc de sel : cartes, conteneurs, nav opaque */
  --inchiostro: #171C19;    /* Encre basalte : texte courant et fonds sombres immersifs */
  --oliva: #4E5B45;         /* Olive : marque, eyebrows, badges, puces utilitaires */
  --brun-apulia: #694117;   /* Brun Apulia, la couleur du logo : ACCENT SPA */
  --brun-clair: #C0772A;    /* Même teinte, éclaircie : ACCENT SUR FOND SOMBRE */
  --brun-photo: #DFA262;    /* La même, un cran plus claire : ACCENT SUR PHOTOGRAPHIE VOILÉE */

  /* Variables d'accentuation contextuelle (redéfinies par classe d'univers).
     L'accent principal est celui du logo. Le laiton n'a jamais eu le contraste
     d'un accent de premier plan — 2,3:1 sur le blanc de sel, la charte
     l'interdisait déjà en dessous de 18 px — là où le brun tient 8,5:1 et
     reste lisible partout. Le laiton est retiré : là où il servait, sur les
     fonds sombres, c'est la teinte du logo éclaircie qui prend le relais —
     même angle de teinte à 31°, 4,9:1 sur l'encre. Une seule couleur d'accent
     sur le site, en deux valeurs selon le fond. */
  --theme-accent: var(--brun-apulia);
  --theme-accent-hover: #7d5220;
  --theme-accent-contrast: #FBFAF8;

  /* Teintes dérivées d'opacité */
  --border-light: rgba(23, 28, 25, 0.12);
  --border-medium: rgba(23, 28, 25, 0.20);
  --border-dark: rgba(251, 250, 248, 0.16);
  --text-muted: #5b6159;
  --text-muted-dark: rgba(251, 250, 248, 0.76);

  /* --- TYPOGRAPHIE --- */
  /* Une seule police pour tout le site : Commissioner, auto-hébergée en
     variable (voir les @font-face en tête de fichier). Les deux variables
     restent distinctes — les composants les nomment par leur rôle, et le
     jour où le titrage reprendrait un dessin propre, une seule ligne suffit.
     Aujourd'hui elles pointent sur la même famille, ce qui est voulu : le
     couple Playfair Display / Figtree est retiré.

     Le repli système est le même des deux côtés, et volontairement neutre :
     si le fichier tarde, le texte s'affiche dans un sans-serif proche des
     proportions de Commissioner, pas dans un serif qui ferait sauter la
     mise en page au moment de la bascule. */
  --font-display: 'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Pas de jeton monospace. La direction demande une seule typographie
     visible : le jeton est retiré plutôt que laissé inutilisé, pour qu'aucune
     règle future ne puisse le rappeler sans décision explicite. */

  /* Échelle modulaire */
  --text-xs: 12px;
  --text-sm: 12px;
  --text-base: 14px;   /* annotations, légendes, méta */
  --text-md: 16px;     /* lecture secondaire : cartes, réponses FAQ, champs */
  --text-body: 18px;   /* corps de texte courant */
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 30px;
  --text-3xl: 44px;
  --text-4xl: 52px;
  --text-5xl: 64px;

  /* --- STRUCTURE & GRILLE --- */
  --max-width: 1320px;
  --max-width-text: 68ch;
  --gutter: 24px;
  --radius: 2px; /* Règle stricte : 2px partout, aucun arrondi organique */
  /* Les boutons font exception : 10 px, pour les détacher des surfaces à
     angle vif — cartes, images, encadrés — qui gardent le rayon de 2 px. */
  --radius-btn: 10px;

  /* Marges latérales adaptatives */
  --page-padding: 24px;

  /* Rythme vertical.
     --section-gap    : le pas plein, entre deux bandeaux qui changent de fond ;
     --section-gap-sm : le demi-pas, quand une section prolonge la précédente
                        ou suit immédiatement le hero de page. */
  --section-gap: 80px;
  --section-gap-sm: 48px;

  /* Un bandeau qui porte sa propre couleur trace un bord franc : ses deux
     voisins viennent buter dessus. Il lui faut donc un pas plus large que
     celui d'une section transparente, sinon les sections se lisent collées. */
  --section-gap-lg: 96px;

  /* Hauteur réelle de la barre de navigation collante (.site-header).
     Sert au décalage des ancres, pas au calage des hero : le header est en
     flux, sa hauteur est déjà réservée au-dessus du contenu. */
  --header-h: 80px;

  /* Respiration haute et basse des hero de page interne */
  --sp-hero: 48px;

  /* --- TRANSITIONS & MOTION --- */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 160ms;
  --dur-medium: 240ms;
  --dur-drawer: 280ms;
  --dur-signature: 480ms;
  --dur-reveal: 500ms;
  --dur-slow: 800ms;
}

@media (min-width: 1024px) {
  :root {
    --page-padding: 96px;
    --section-gap: 128px;
    --section-gap-sm: 72px;
    --section-gap-lg: 152px;
    --sp-hero: 72px;
  }
}

/* Au-delà de 1440 px, la marge latérale continue de s'ouvrir : le bandeau de
   contenu ne doit pas venir toucher le bord de l'écran. */
@media (min-width: 1440px) {
  :root { --page-padding: 120px; }
}

/* --- RESET & BASE STYLES --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* Plus de réglage d'axe optique : il figeait l'`opsz` d'un Didone que le
     site n'utilise plus. Commissioner n'a pas cet axe, et laisser traîner un
     font-variation-settings global empêcherait toute variation ultérieure
     d'être posée simplement là où on en a besoin. */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--sale);
  color: var(--inchiostro);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--inchiostro);
  background-color: var(--sale);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dur-fast) ease;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
}

/* Commissioner jusque dans le code.
   La feuille du navigateur impose une chasse fixe à ces balises, et une taille
   de police à part : dès qu'une famille monospace est active, le corps par
   défaut tombe à 13 px au lieu de 16. Reprendre la famille sans reprendre la
   taille laisserait des noms de cookies rabougris au milieu d'une phrase, donc
   les deux sont repris. La graisse un cran au-dessus garde `_ga` lisible comme
   une valeur technique, sans faire appel à une seconde typographie. */
code, kbd, samp, pre, var, tt {
  font-family: var(--font-body);
  font-size: inherit;
  font-style: normal;
  font-weight: 600;
}

/* Typographie de base.
   L'interlignage n'est plus unique : 1,05 sur un Didone à grands jambages ne
   pardonne rien, c'est ce qui faisait buter le corps de texte sur les titres.
   Il s'ouvre à mesure que le corps diminue — le hero peut rester serré, un
   titre de section sur trois lignes ne le peut pas. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--inchiostro);
  text-wrap: balance;
}

h1 { font-size: clamp(38px, 5.6vw, var(--text-5xl)); line-height: 1.25; }
h2 { font-size: clamp(28px, 3.4vw, var(--text-3xl)); line-height: 1.25; }
h3 { font-size: clamp(22px, 2.4vw, var(--text-2xl)); line-height: 1.25; }
h4 { font-size: var(--text-xl); font-family: var(--font-body); font-weight: 600; line-height: 1.5; }

/* Respiration sous les titres.
   L'interlignage des titres est serré (1.05) : sans marge basse, la première
   ligne du corps de texte venait toucher les jambages du titre. Les classes
   qui portent déjà leur propre marge (.hero-title, .section-head h2,
   .intention-title, .mega-title…) restent prioritaires. */
h1, h2 { margin-bottom: 20px; }
h3, h4 { margin-bottom: 12px; }

/* Un titre en dernière position ne pousse pas le bas de son bloc. */
h1:last-child, h2:last-child, h3:last-child, h4:last-child { margin-bottom: 0; }

p {
  max-width: var(--max-width-text);
  margin-bottom: 1.25rem;
}

p:last-child {
  margin-bottom: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva);
  margin-bottom: 1rem;
  display: inline-block;
}

.eyebrow-light {
  color: var(--brun-clair);
}

/* Utilitaires conteneurs */
.container {
  width: 100%;
  max-width: calc(var(--max-width) + var(--page-padding) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

/* Conteneur de lecture. Il partage la boîte du conteneur large — même marge
   gauche, même marge droite — et ne bride que la longueur de ligne de son
   contenu. Centré, son bloc démarrait 170 px à droite de tout le reste de la
   page : un décrochage visible dès qu'une section de lecture voisinait une
   section pleine largeur. */
.container-narrow {
  width: 100%;
  max-width: calc(var(--max-width) + var(--page-padding) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

.container-narrow > * { max-width: 900px; }

/* Accessibilité Clavier */
:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Prise en charge prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}