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

: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 */
  --ottone: #BE9A5C;        /* Laiton : ACCENT SECOND, réservé aux fonds sombres */
  --adriatico: #2F6F73;     /* Bleu Adriatique : ACCENT SANTÉ (/health-center/) */

  /* 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,3:1 et
     reste lisible partout. Le laiton descend au rang de second : filets,
     badges et surtitres, sur fond sombre uniquement, où il porte encore. */
  --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 --- */
  --font-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, Menlo, Monaco, Consolas, monospace;

  /* Échelle modulaire */
  --text-xs: 12px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-body: 18px;
  --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 */

  /* 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; }
}

/* Modificateurs d'univers */
body.theme-sante {
  --theme-accent: var(--adriatico);
  --theme-accent-hover: #23585c;
  --theme-accent-contrast: #FBFAF8;
}

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

html {
  font-size: 16px;
  /* Le Bodoni Moda amincit ses déliés quand la taille grandit : à 76 px ils
     passent sous le pixel. On fige l'axe optique sur le dessin des petits
     corps, dont les traits fins tiennent l'écran. Sans effet sur Instrument
     Sans, qui n'a pas d'axe opsz. */
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 14;
  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;
}

/* 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.12; }
h2 { font-size: clamp(28px, 3.4vw, var(--text-3xl)); line-height: 1.2; }
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.3; }

/* 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(--ottone);
}

.eyebrow-sante {
  color: var(--adriatico);
}

/* 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;
  }
}