/* =====================================================================
   Base : remise à zéro raisonnée, typographie, accessibilité
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: calc(var(--font-size-base) * var(--interface-zoom) / 100);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: calc(var(--line-height-body) / 100);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Aucun débordement horizontal, quelle que soit la largeur. */
  overflow-x: hidden;
}

/*
 * LE PIED DE PAGE NE DOIT PAS SAUTER (v1.10.0).
 *
 * DÉFAUT MESURÉ : un décalage de mise en page de **0,461** sur la page
 * Tarifs, et de 0,192 sur Courses — pour un seuil recommandé de 0,1. Un seul
 * décalage, toujours le même, toujours causé par `.site-footer`.
 *
 * La raison est structurelle : la coquille s'affiche d'abord, avec un
 * contenu encore vide ; le pied de page se retrouve donc juste sous l'en-tête,
 * haut dans l'écran. Quand les tarifs arrivent — un appel à l'API plus tard —
 * ils le repoussent d'un coup vers le bas. C'est le genre de saut qui fait
 * cliquer à côté quand il se produit sous le doigt.
 *
 * On réserve donc la place : la zone de contenu occupe au minimum la hauteur
 * de l'écran, moins l'en-tête. Le pied de page démarre ainsi en bas dès le
 * premier rendu et n'a plus de raison de bouger.
 *
 * `flex: 1 0 auto` fait le reste : le contenu prend l'espace disponible sans
 * jamais être comprimé en dessous de sa taille réelle.
 */
main,
#main {
  flex: 1 0 auto;
  min-height: calc(100dvh - var(--header-height, 72px));
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-variation-settings: var(--display-settings, normal);
  letter-spacing: calc(var(--heading-tracking) / 1000 * 1em);
  line-height: 1.14;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  text-wrap: balance;
  /* Un sérif à axe optique se dessine mieux avec le crénage et les
     ligatures actifs ; les chiffres restent proportionnels dans un titre. */
  font-kerning: normal;
  font-feature-settings: "kern", "liga", "calt";
}

h1 { font-size: var(--size-4xl); }
h2 { font-size: var(--size-3xl); }
h3 { font-size: var(--size-2xl); }
h4 { font-size: var(--size-xl); }
h5 { font-size: var(--size-lg); }

/* Les intertitres de niveau 4 et 5 reprennent la police du texte : à ces
   tailles, le sérif de titre perd sa finesse et brouille la hiérarchie. */
h4, h5 {
  font-family: var(--font-sans);
  font-variation-settings: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Chiffres tabulaires là où l'on compare des montants ou des heures. */
.table, .numeric, .price, dd { font-variant-numeric: tabular-nums; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-primary-dark); }

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

ul, ol { margin: 0 0 var(--space-4); padding-inline-start: 1.35em; }
li + li { margin-top: var(--space-1); }

hr {
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-6) 0;
}

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* --------------------------------------------------------------------
   Focus : anneau à deux tons, visible sur fond clair COMME sur fond
   sombre. Le liseré blanc intérieur garantit le contraste partout.
   -------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-surface),
    0 0 0 calc(2px + var(--focus-ring-width)) var(--color-focus);
  border-radius: var(--radius-button);
  position: relative;
  z-index: 2;
}

/* Lien d'évitement, premier élément atteignable au clavier. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  transform: translateY(-200%);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-lg);
  font-weight: 600;
  z-index: 200;
  transition: transform var(--transition);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Contenu réservé aux technologies d'assistance. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Respecte la préférence système avant toute autre considération. */
@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;
  }
}
:root[data-reduce-motion="true"] *,
:root[data-reduce-motion="true"] *::before,
:root[data-reduce-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-contrast: more) {
  :root {
    --color-border: #7b8f9b;
    --color-muted: #3d5361;
    --border-width: 2px;
  }
}

::selection { background: var(--color-primary-soft); color: var(--color-text); }

/* Barre de défilement discrète, sans casser l'accessibilité. */
@supports (scrollbar-width: thin) {
  * { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
}