/* Les jetons de docs/design.md §10, réduits à ce que cette page pose. */
:root {
  --color-accent-dark: #9e4a2a;
  --color-bg: #fafaf7;
  --color-text-muted: #5c5f5b;
  --color-primary: #1b3a2f;
  --font-sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --text-base: 15px;
  --space-2: 8px;
  --space-6: 24px;
  --space-8: 32px;
  --weight-medium: 500;
}

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

body {
  background: var(--color-bg);
  color: var(--color-text-muted);
  display: grid;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
}

.client-area {
  color: var(--color-accent-dark);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  position: absolute;
  right: var(--space-8);
  text-decoration: none;
  top: var(--space-6);
}

.client-area:hover {
  text-decoration: underline;
}

.client-area:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* La taille rendue de la signature, d'où tout le bloc découle (#364). Elle
   suit la largeur entre deux bornes : aucune largeur fixe, aucune media query.
   La borne basse reste au-dessus des 110 px minimum du §2 sur le plus étroit
   des mobiles, la borne haute donne 560 px sur un écran de bureau.

   La zone de protection du §2 est le double de la demi-hauteur du L sur une
   page web, donc une hauteur de L sur chaque bord du bloc. Le L fait 132 des
   608,4 unités du viewBox, soit 21,7 % de la largeur rendue : le rembourrage
   suit donc la signature au lieu d'être un nombre de pixels figé. La tagline
   est dans le bloc, entre le logo et le bord bas. */
.signature {
  --signature-width: clamp(180px, 52vw, 560px);
  padding: calc(var(--signature-width) * 0.217);
}

.signature img {
  display: block;
  height: auto;
  width: var(--signature-width);
}

/* Empilée (§3) : 8 px sous la signature, alignée sur le L. Le L commence à
   61,16 des 608,4 du viewBox, soit 10,05 % de la largeur rendue. */
.tagline {
  /* Elle grandit avec la signature dans la proportion d'aujourd'hui, 15 px pour
     320 px rendus. Le plancher est ces mêmes 15 px : sur un mobile la signature
     ne grandit pas, donc la tagline n'y bouge pas non plus. */
  font-size: max(15px, calc(var(--signature-width) * 0.0469));
  font-weight: var(--weight-medium);
  letter-spacing: normal;
  line-height: 1.4;
  margin: var(--space-2) 0 0 10.05%;
}