/* ==========================================================================
   SMILE — Socle : réinitialisation, réglages du document, typographie
   --------------------------------------------------------------------------
   Dépend de tokens.css (à charger AVANT ce fichier).
   Règle du projet : aucune couleur, taille, ombre ou durée en dur.
   Seules exceptions tolérées : les traits de règle (1–2 px) et les points de
   rupture des media queries — une media query ne peut pas lire une variable.

   Points de rupture utilisés dans tout le projet :
     40em (640 px) · 48em (768 px) · 64em (1024 px) · 80em (1280 px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Réinitialisation moderne
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Compense la hauteur de l'en-tête collant lors des ancres. */
  scroll-padding-top: var(--sp-16);
}

body {
  min-height: 100%;
  min-height: 100dvh;
  background-color: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-sans);
  /* Corps fluide : 15 px à 375 px, 16 px au-delà d'environ 640 px. */
  font-size: clamp(var(--fs-base), var(--fs-base) + 0.25vw, var(--fs-md));
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  /* Le tableau admin défile dans son propre conteneur : la page, jamais. */
  overflow-x: hidden;
}

/* Médias : jamais plus larges que leur conteneur. */
img,
svg,
video,
canvas,
picture {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Les champs héritent de la typographie du document. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

/* Évite les débordements de mots très longs (noms de 40 caractères, URL).
   `overflow-wrap` suffit : il ne coupe qu'en cas de débordement réel. Pas de
   `hyphens: auto` — la césure automatique française sur une colonne étroite
   produit des coupures disgracieuses en plein milieu d'un énoncé. */
p,
li,
h1,
h2,
h3,
h4,
dd,
dt,
figcaption,
label,
td,
th {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   2. Titres — serif, resserrés
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(var(--fs-2xl), var(--fs-xl) + 2.2vw, var(--fs-3xl));
}

h2 {
  font-size: clamp(var(--fs-xl), var(--fs-lg) + 1.4vw, var(--fs-2xl));
}

h3 {
  font-size: var(--fs-xl);
}

h4 {
  font-size: var(--fs-lg);
}

h5,
h6 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

/* Chapeau : sous-titre d'introduction sous un h1. */
.lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--c-ink-muted);
  text-wrap: pretty;
}

p {
  text-wrap: pretty;
}

/* Micro-libellé en capitales — sections d'admin, en-têtes de tableau. */
.eyebrow {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-subtle);
}

small,
.text-sm {
  font-size: var(--fs-sm);
}

.text-muted {
  color: var(--c-ink-muted);
}

.text-subtle {
  color: var(--c-ink-subtle);
}

strong,
b {
  font-weight: var(--fw-semibold);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* Chiffres alignés partout où on compare des nombres. */
.tnum,
time,
output {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. Liens
   -------------------------------------------------------------------------- */

a {
  color: var(--c-primary);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--sp-1);
  transition: color var(--t-fast) var(--ease);
}

a:hover {
  color: var(--c-primary-hover);
}

a:active {
  color: var(--c-primary-active);
}

/* Lien qui ne doit pas se souligner (logo, libellé de navigation).
   NE PAS ajouter ici `a.btn`, `a.card` ou `a.tab` : un sélecteur type+classe
   (0,1,1) l'emporterait sur `.btn--primary` (0,1,0) et repeindrait le texte
   du bouton en couleur d'encre sur l'aplat orange. Ces composants gèrent
   déjà leur propre `color` et `text-decoration`, ce qui suffit à battre le
   sélecteur d'élément `a`. */
a.plain {
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------------------------------
   4. Listes, séparateurs, citations
   -------------------------------------------------------------------------- */

ul,
ol {
  padding-inline-start: var(--sp-5);
}

/* Listes de mise en page : puces retirées.
   Attention : `list-style: none` fait perdre la sémantique de liste à
   VoiceOver/Safari. Toujours écrire `role="list"` sur le <ul> concerné —
   c'est le seul remède fiable (l'astuce du `::before` vide ne marche pas). */
.list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

li + li {
  margin-top: var(--sp-1);
}

hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--c-border);
  margin-block: var(--sp-6);
  color: inherit;
}

blockquote {
  padding-inline-start: var(--sp-4);
  border-inline-start: var(--sp-1) solid var(--c-border-strong);
  color: var(--c-ink-muted);
}

/* --------------------------------------------------------------------------
   5. Sélection de texte
   -------------------------------------------------------------------------- */

::selection {
  background-color: var(--c-orange);
  color: var(--c-graphite);
}

/* --------------------------------------------------------------------------
   6. Focus — visible, jamais supprimé
   --------------------------------------------------------------------------
   Anneau double à dessein : `box-shadow` porte la teinte orange douce,
   `outline` survit au mode contraste élevé de Windows, où les ombres
   disparaissent. Ne JAMAIS écrire `outline: none` dans ce projet.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-ring);
}

/* Aucune règle `:focus:not(:focus-visible) { outline: none }` ici : les
   navigateurs qui gèrent :focus-visible masquent déjà d'eux-mêmes le contour
   au clic. L'écrire n'apporterait rien et contredirait la règle du projet. */

@supports not selector(:focus-visible) {
  :focus {
    outline: 2px solid var(--c-orange);
    outline-offset: var(--focus-offset);
  }
}

/* --------------------------------------------------------------------------
   7. Accessibilité — masquage visuel sûr
   --------------------------------------------------------------------------
   `clip-path: inset(50%)` + 1 px de boîte : le contenu reste dans l'arbre
   d'accessibilité et lisible par les lecteurs d'écran, contrairement à
   `display: none` ou `visibility: hidden`.
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Variante pour le lien d'évitement : réapparaît au focus clavier. */
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus {
  position: fixed;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: var(--h-touch);
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  clip-path: none;
  background-color: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

/* Élément purement décoratif : à masquer aussi de l'arbre d'accessibilité
   via aria-hidden="true" dans le HTML. */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8. Mouvement
   --------------------------------------------------------------------------
   Défilement doux uniquement si l'utilisateur ne demande pas l'inverse.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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

/* --------------------------------------------------------------------------
   9. Impression — réglages du document (les composants complètent)
   -------------------------------------------------------------------------- */

@media print {
  html,
  body {
    background-color: var(--c-white);
    color: var(--c-graphite);
    font-size: var(--fs-sm);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }
}