/* Ce que les huit pages du domaine ont en commun : la palette, la police, le
   fond, et les surfaces que le navigateur dessine à notre place.
 *
 * **Pourquoi un fichier, alors que chaque page portait son bloc.** Elles le
 * portaient toutes les huit, à l'identique, et le commentaire d'origine ne se
 * souvenait que de deux d'entre elles — « si la palette bouge, elle bouge ici
 * aussi, et dans `confidentialite.html` ». Sept copies d'une même vérité, c'est
 * six occasions d'en oublier une ; le dépôt a déjà payé ce prix sur le bloc SVG
 * de la marque, et c'est `make icons` qui l'a réglé. Ici, un lien suffit.
 *
 * Ce qui RESTE dans chaque page : sa mise en page. La largeur d'une page de
 * conditions n'est pas celle d'une page de tarifs, et ce n'est pas une
 * divergence — c'est le sujet qui décide.
 *
 * Les valeurs, elles, restent RECOPIÉES de `lib/core/theme/kh_colors.dart`, qui
 * fait foi (constitution, Principe X) : une page web ne lit pas les tokens
 * Dart. Ce fichier ne supprime pas cette recopie, il la ramène à UNE. */

/* La police du produit.
   Le site parlait avec la voix du système, l'app avec la sienne — et l'on
   passait de l'une à l'autre en suivant un lien. Fichier variable : une
   requête pour toutes les graisses, mise en cache pour tout le domaine.
   `swap` pour que le texte s'affiche pendant qu'elle arrive. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/hanken-grotesk.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* **Deux teintes, et chacune a un emploi.**
   Le bleu dit la marque ; le chaud dit ce qui est offert — un essai, deux mois,
   une invitation. Le fond passe du gris-bleu froid au SABLE : l'app vit sous
   une lumière de comptoir, un site se lit dans un fauteuil.
   Le chaud n'est pas inventé : c'est l'accent de visisyndic, l'app sœur, et la
   piste « terracotta sobre » d'abord retenue pour ce produit-ci.

   Toutes les paires sont mesurées. La plus juste est `mute` sur le sable, à
   4,92:1 — l'ancien #64748B y tombait à 4,49, sous le seuil. */
:root {
  color-scheme: light dark;
  /* kh-brand-colors */
  --brand-background: #0F172A;
  --brand-foreground: #FFFFFF;
  --brand-secondary: #5EB3E4;
  /* /kh-brand-colors */
  --bg: #FAF8F5;
  --surface: #FFFFFF;
  --text: #0F172A;
  --dim: #475569;
  --mute: #5F6E80;
  --border: #E7E1D8;
  --line: #EFEAE2;
  --accent: #1E6FA8;
  --on-accent: #FFFFFF;
  --accent-soft: #E8F2FA;
  --warm: #B45309;
  --on-warm: #FFFFFF;
  --warm-soft: #FDF3E7;
  --danger: #DC2626;
  --success: #15803D;
  --ok: var(--success);
  --control: #7B8796;
  /* La taille de la pastille de marque. Chaque page la sienne : 56 sur
     l'accueil, 38 sur les tarifs, 44 partout ailleurs. */
  --mark: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F172A;
    --surface: #1B2537;
    --text: #F8FAFC;
    --dim: #CBD5E1;
    --mute: #94A3B8;
    --border: #334155;
    --line: #273449;
    --accent: #5EB3E4;
    --on-accent: #0F172A;
    --accent-soft: #10263A;
    --warm: #E0813F;
    --on-warm: #0F172A;
    --warm-soft: #33261A;
    --danger: #F87171;
    --success: #4ADE80;
    --control: #718096;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  position: relative;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* Le halo chaud, derrière le haut de chaque page.
   Il teinte la plus grande surface visible en n'occupant AUCUNE hauteur — ce
   qui est exactement ce qu'il fallait le jour où le panneau d'illustration
   repoussait le bouton des tarifs sous le pli. `absolute` et non `fixed` : un
   halo qui suivrait le défilement serait un calque, pas un lever de jour. */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 520px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(62% 100% at 62% 0%, var(--warm-soft) 0%, transparent 72%);
}

/* Les surfaces que l'on n'a pas dessinées portent quand même le dessin :
   sélection, caret, barres de défilement, anneau de focus. Laissées aux
   navigateurs, elles appartiennent à aucun système. */
::selection { background: var(--accent-soft); color: var(--text); }
:root {
  accent-color: var(--accent);
  caret-color: var(--accent);
  scrollbar-color: var(--border) transparent;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* La marque, dans sa pastille. Le tracé lui-même est écrit par
   `tool/make_icon.py` (`make icons`) entre les marqueurs `kh-mark`. */
.mark {
  width: var(--mark); height: var(--mark);
  margin: 0 0 1.25rem;
  border-radius: calc(var(--mark) / 3.7);
  background: var(--brand-background);
  color: var(--brand-foreground);
  display: grid; place-items: center;
}
.mark svg { width: var(--mark); height: var(--mark); display: block; }

/* Un chemin dans l'application, écrit comme on le tape.
   Deux formes, et c'est la PONCTUATION qui décide de laquelle :

   — au milieu d'une phrase, la puce est en ligne. « Sur l'accueil :
     `Gestionnaires`, puis… » — elle se lit comme un mot ;

   — quand elle TERMINE la phrase, elle prend sa ligne (`.seul`) et la phrase
     n'a plus de point final. Une puce en ligne qui remplit sa ligne rejette
     toujours la ponctuation qui la suit sur la ligne d'après : un point
     orphelin, qui se lit comme une faute de frappe. On a essayé de la
     raccourcir — vrai progrès, mais à 320 px l'orphelin revenait —, puis de
     la passer en `inline` avec `box-decoration-break`, ce qui la scinde en
     trois boîtes qu'on lit comme trois puces. Reste la seule forme qui
     n'admet pas le problème : un chemin qui finit une phrase est un élément,
     pas un mot, et un élément se met sur sa ligne. */
.path {
  display: inline-block;
  font-size: .925rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: .1rem .5rem;
  color: var(--text);
}
.path.seul { display: block; margin: .55rem 0 .1rem; }

a { color: var(--accent); }
strong { color: var(--text); font-weight: 600; }

footer {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--mute); font-size: .875rem;
}
footer a { color: var(--accent); }