/* Le système de design de LOSTE AVOCAT — identité propre (client), chargée à la place de
 * `lyodge-kit/design/systeme.css`. Mêmes NOMS de jetons que le kit, valeurs à nous : le
 * vérificateur du kit (contraste WCAG, aucune couleur hors jetons) continue de tourner.
 * C'est lui la norme, pas la palette. Voir design/README.md et PLAN.md §5.
 *
 *   --fond-X / --texte-X   une SURFACE et le texte qu'elle porte
 *   --encre-X              du texte POSÉ SUR LE FOND DE PAGE, sans surface à lui
 *
 * Tout jeton de couleur ajouté ici doit rejoindre PAIRES/ENCRES dans
 * design/test/systeme.test.mjs, sinon le test de complétude échoue. C'est voulu.
 */

/* Instrument Serif & Instrument Sans — OFL 1.1, auto-hébergées (polices/LISEZMOI.md).
 * Sous-ensemble latin : il couvre les accents français, Œ/œ ET les diacritiques
 * combinants (U+0304, U+0308, U+0329) — sans eux, un titre collé depuis macOS en forme
 * décomposée voit sa lettre rendue en Instrument et son accent retomber sur Georgia, au
 * milieu du mot. Pas d'`unicode-range` : sur un fichier unique auto-hébergé il n'évite
 * aucun téléchargement, il ne fait que restreindre les caractères couverts. */
@font-face {
  font-family: 'Instrument Serif';
  src: url('polices/instrument-serif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('polices/instrument-serif-italique.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('polices/instrument-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Pas de thème sombre : le site a deux fonds décidés (papier et encre), pas deux thèmes.
   * Sans cette déclaration, un navigateur en mode sombre assombrit les champs natifs. */
  color-scheme: light;

  /* Surfaces */
  --fond-page: #f7f5f2;
  --texte-page: #141518;

  /* Le fond encre : les sections en négatif (hero, contact, barre d'appel). */
  --fond-encre: #141518;
  --texte-encre: #f7f5f2;
  --texte-encre-accent: #d07c84;
  --texte-encre-discret: #a8acb2;

  --fond-discret: #ece8e2;
  --texte-discret: #4c4f55;

  /* Encres — sur le fond de page */
  --encre-marque: #7a2430;   /* carmin prélevé sur le portrait : lèvres #ab5c5f, #723337 sur
                              * les 20 % les plus sombres. Remonté ici pour tenir 9:1. */
  --encre-discrete: #55585e;

  /* Traits — jamais une couleur de texte, donc hors paires */
  --bordure: #dcd6cd;
  --filet: #141518;
  --filet-encre: #3a3c42;

  /* Zéro. L'angle droit est une décision : c'est ce qui sépare ce site d'Antilope. */
  --rayon: 0;

  --focus-couleur: #7a2430;
  --focus-epaisseur: 2px;
  --focus-ecart: 3px;

  /* Espacements */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 16px;
  --espace-4: 24px;
  --espace-5: 40px;
  --espace-6: 64px;
  --espace-7: 96px;
  --espace-8: 144px;

  --cible-tactile: 44px;
  --barre-appel: 56px;

  /* Typographie — c'est ici que se joue le registre */
  --police-titre: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --police: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-forte: 600;

  --interlettrage-titre: -0.015em;
  --interlettrage-mention: 0.14em;   /* les capitales : nav, sur-titres, logo */

  --interligne-titre: 1.02;          /* le display est serré, à la Hando */
  --interligne-texte: 1.62;

  --taille-mention: 0.75rem;
  --taille-petite: 0.875rem;
  --taille-base: 1.0625rem;
  --taille-intertitre: 1.25rem;
  --taille-titre: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --taille-hero: clamp(2.5rem, 1rem + 7.2vw, 6rem);
  --taille-affiche: clamp(3rem, 1rem + 9vw, 7.5rem);

  /* La mesure : 62 à 68 signes, jamais plus. */
  --mesure: 34rem;
  --mesure-large: 78rem;
}

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

html {
  /* Ceinture. `clip` et pas `hidden` : `hidden` ferait de la racine un conteneur de
     défilement et casserait `position: sticky` dans la page. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--fond-page);
  color: var(--texte-page);
  font-family: var(--police);
  font-size: var(--taille-base);
  line-height: var(--interligne-texte);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--police-titre);
  font-weight: var(--graisse-normale);
  letter-spacing: var(--interlettrage-titre);
  line-height: var(--interligne-titre);
  margin: 0;
}

p {
  margin: 0 0 var(--espace-3);
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: var(--focus-epaisseur) solid var(--focus-couleur);
  outline-offset: var(--focus-ecart);
}

@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;
  }
}