/* SPDX-License-Identifier: CC-BY-SA-4.0 */
/* SPDX-FileCopyrightText: 2025-2026 Nikola Milovanovic */
/* ============================================================================
   SOCLE WEB — identité « marker »
   Source unique des jetons de marque pour les trois sites publics :
   talas.fr, veza.fr et demo.talas.fr.

   POURQUOI CE FICHIER EXISTE
   veza-landing/IDENTITE.md se déclare « source de vérité pour les pages
   statiques » depuis le 2026-08-14, mais rien ne la mécanisait : chaque site
   recopiait les jetons à la main. Au 2026-08-26 ils avaient dérivé — trois
   noms différents pour la même demi-teinte d'encre, deux gouttières, deux
   largeurs de colonne, un basculeur de thème sur un site et pas sur les deux
   autres, et une graisse 500 déclarée nulle part employée. Un document qui
   n'a aucun effet est un document faux : celui-ci le remplace comme autorité
   technique, IDENTITE.md restant l'autorité doctrinale.

   CE QUE CE FICHIER CONTIENT — et rien d'autre :
     1. les jetons ;
     2. les deux thèmes ;
     3. le reset et la base typographique ;
     4. les primitives partagées par les trois sites (bouton, surtitre, titre
        de section, châssis d'en-tête et de pied).
   La mise en page propre à un site va dans le `site.css` de ce site. Si une
   règle ne sert qu'à un seul des trois, elle n'a rien à faire ici.

   LES SIX RÈGLES (cf. IDENTITE.md) : deux couleurs · aucun accent · une seule
   police en 400 · rayon 0 · aucune ombre · la structure ne tient qu'aux
   bordures. Si un cyan, un arrondi ou une ombre réapparaît ici, c'est une
   régression, pas une variante.

   Ne pas éditer la copie déposée dans le `public/` d'un site : elle est
   écrasée à chaque génération. Éditer CE fichier, puis rejouer
   `identite/web/construire.py`.
   ============================================================================ */

/* ─────────────────────────────  1. Jetons  ───────────────────────────── */
:root {
  /* Deux couleurs, et rien d'autre. Repli en l'absence de préférence
     exprimée : le PAPIER — marker est un dessin au marqueur, dont le sombre
     n'est qu'une inversion pure. */
  --mr-paper: #faf9f6;
  --mr-ink:   #000000;

  /* Demi-teintes : uniquement de l'encre transparente. Nommer un gris
     reviendrait à introduire une troisième couleur. Les noms sont chiffrés
     — `--ink-60`, pas `--soft` — parce que trois sites avaient inventé trois
     vocabulaires pour les mêmes valeurs (`--ink-2`/`--ink-60`/`--soft`) et
     qu'un nom qui dit sa valeur ne peut pas diverger en silence. */
  --ink-60: color-mix(in srgb, var(--mr-ink) 60%, transparent);
  --ink-45: color-mix(in srgb, var(--mr-ink) 45%, transparent);
  --ink-22: color-mix(in srgb, var(--mr-ink) 22%, transparent);
  --ink-12: color-mix(in srgb, var(--mr-ink) 12%, transparent);
  --ink-10: color-mix(in srgb, var(--mr-ink) 10%, transparent);
  --ink-06: color-mix(in srgb, var(--mr-ink)  6%, transparent);

  /* Teinte de MARQUE — quatrième emploi de la couleur, posé le 2026-08-19.
     Mesurée sur le stylo des croquis d'origine (216°), décalée à 228° pour
     tenir 32° d'écart avec l'état sémantique `info` (196°) : sous .26
     d'opacité, 20° ne suffisent pas à distinguer deux lavis.
     Elle n'apparaît QU'EN LAVIS DE FOND et sur des surfaces d'appartenance.
     Jamais sur un trait, jamais sur une icône, jamais sur le logo. */
  --marque-h:    228;
  --marque:      hsl(var(--marque-h) 56% 72%);
  --marque-wash: hsl(var(--marque-h) 56% 72% / .26);

  /* Une seule famille, graisse 400, titres compris. La déclinaison 500 qui
     traînait dans les `fonts.css` pointait sur le fichier 400 et n'était
     employée par aucune règle des trois sites : elle est retirée. */
  --mr-mono: "JetBrains Mono", ui-monospace, "Space Mono", "SFMono-Regular", Menlo, monospace;

  /* Mesures. La gouttière était à 4rem sur talas.fr et 3rem sur veza.fr sans
     raison énoncée ; 3rem l'emporte, c'est la valeur de la page la plus
     dense. --measure borne la LIGNE DE TEXTE, --maxw borne la GRILLE : les
     deux coexistent, elles ne mesurent pas la même chose. */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --measure: 36rem;
  --maxw:    70rem;

  /* Rayon 0. Le jeton existe pour que la valeur soit citable, pas pour être
     changée : le jour où il vaut autre chose que 0, l'identité a changé. */
  --r: 0px;

  --rule:        1px solid var(--ink-22);
  --rule-faint:  1px solid var(--ink-12);
  --rule-strong: 1px solid var(--mr-ink);
}

/* ─────────────────────────────  2. Thèmes  ───────────────────────────── */
/* Deux entrées, jamais une seule : le basculeur explicite ET la préférence du
   système. La plupart des visiteurs n'actionnent aucun basculeur — une valeur
   posée seulement sous [data-theme] ne les atteint pas. C'est le piège qui a
   fait diverger le lavis entre les trois sites. */

[data-theme="night"] {
  --mr-paper: #0a0a0a;
  --mr-ink:   #faf9f6;
  /* .26 disparaît presque sur fond noir ; .38 rend une visibilité comparable.
     Plafond doctrinal : .52. */
  --marque-wash: hsl(var(--marque-h) 56% 72% / .38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --mr-paper: #0a0a0a;
    --mr-ink:   #faf9f6;
    --marque-wash: hsl(var(--marque-h) 56% 72% / .38);
  }
}

/* ──────────────────────────  3. Reset et base  ────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* La police est posée sur `html` ET sur tous les contrôles de formulaire :
   les contrôles n'héritent pas de la police du document et retombent sinon
   sur celle du navigateur (relevé : Arial sur les boutons radio de veza.fr).
   L'exception passe inaperçue à l'œil sur un bouton radio, mais marker
   n'admet qu'une seule famille — c'est une brèche dans la règle. */
html, input, button, select, textarea { font-family: var(--mr-mono); }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--mr-paper);
  color: var(--mr-ink);
  font-family: var(--mr-mono);
  font-weight: 400;
  /* Le monospace est plus large que les proportionnelles héritées de SUMI :
     sans cette réduction, la ligne dépasse la longueur confortable. */
  font-size: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}
/* Le survol s'exprime par l'INVERSION paper/ink — pas par une teinte : dans
   marker, aucune couleur d'accent n'existe. */
a:hover { background: var(--mr-ink); color: var(--mr-paper); text-decoration: none; }

:focus-visible { outline: 2px solid var(--mr-ink); outline-offset: 2px; }
::selection { background: var(--mr-ink); color: var(--mr-paper); }

/* `em` ne se colore pas : il n'y a rien pour le colorer. Il s'appuie sur la
   même inversion que le reste. */
em { font-style: normal; }

.mono { font-family: var(--mr-mono); font-variant-numeric: tabular-nums; }

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

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

/* ────────────────────────  4. Primitives partagées  ──────────────────── */

.eyebrow {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.section-title {
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Boutons. Aucune ombre, aucun rayon, aucune teinte : l'état plein est
   l'inversion, l'état secondaire est une bordure. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--mr-mono); font-weight: 400; font-size: .98rem;
  padding: .85rem 1.5rem; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; text-decoration: none;
  transition: background .3s, color .3s, border-color .3s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--mr-ink); color: var(--mr-paper); }
.btn-primary:hover { background: var(--mr-paper); color: var(--mr-ink); box-shadow: inset 0 0 0 1px var(--mr-ink); }
.btn-ghost { border-color: var(--ink-22); color: var(--mr-ink); background: transparent; }
.btn-ghost:hover { border-color: var(--mr-ink); background: transparent; color: var(--mr-ink); }
.btn-text { background: transparent; color: var(--ink-60); padding-inline: .4rem; }
.btn-text:hover { background: transparent; color: var(--mr-ink); }
.btn-block { width: 100%; }
/* Une action annoncée mais pas encore ouverte : trait discontinu, curseur
   barré. Elle se distingue par la BORDURE, pas par un gris. */
.btn-stripe { background: var(--ink-06); color: var(--ink-45); border: 1px dashed var(--ink-22); cursor: not-allowed; }
.btn[disabled] { opacity: .65; }

/* Basculeur de thème. Il n'existait que sur talas.fr, et sur ses quatre pages
   seulement : veza.fr définissait le thème sombre sans offrir aucun moyen de
   le choisir, donc [data-theme] y était inactionnable. Les DEUX landings le
   portent désormais, sur toutes leurs pages, piloté par `theme.js`.
   La visite guidée, elle, n'en a pas et n'en aura pas : elle ne charge et
   n'exécute AUCUN script — c'est ce qui lui permet d'être lue hors ligne
   depuis le dépôt. Elle suit la préférence du système, un point c'est tout. */
.theme-toggle {
  width: 42px; height: 24px; padding: 0; position: relative;
  border: 1px solid var(--ink-22); border-radius: var(--r);
  background: var(--ink-06); cursor: pointer;
}
.theme-dot {
  position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: var(--r);
  background: var(--mr-ink);
  transition: left .4s cubic-bezier(.6,.1,.2,1);
}
[data-theme="night"] .theme-dot { left: 21px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .theme-dot { left: 21px; } }

/* ─────────────────────  5. Châssis commun aux trois sites  ───────────── */
/* En-tête et pied sont générés depuis `identite/web/chassis/` : les trois
   sites portaient le même triplet de liens croisés recopié à la main. */

.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.25rem var(--gutter);
  border-bottom: var(--rule);
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand:hover { background: none; color: inherit; }
.brand-mark { width: 34px; height: 34px; color: var(--mr-ink); }
.brand-mark.sm { width: 26px; height: 26px; }
.brand-word { letter-spacing: .26em; font-size: 1.05rem; }
.head-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.head-nav > a:not(.btn) { font-size: .9rem; color: var(--ink-60); text-decoration: none; }
.head-nav > a:not(.btn):hover { background: var(--mr-ink); color: var(--mr-paper); }
@media (max-width: 720px) { .head-nav > a:not(.btn) { display: none; } }

.site-foot {
  max-width: var(--maxw); margin-inline: auto;
  padding: 2.5rem var(--gutter) 3rem;
  border-top: var(--rule);
  color: var(--ink-60); font-size: .84rem;
}
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: 1.4rem; }

/* La famille : les trois sites, toujours dans le même ordre, celui qui n'est
   jamais visité en dernier étant marqué « vous y êtes ». Ce bloc est généré —
   ne pas l'écrire à la main dans une page. */
.famille { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: baseline; }
.famille a { font-size: .88rem; color: var(--ink-60); }
.famille a:hover { background: var(--mr-ink); color: var(--mr-paper); }
/* Le site courant : `aria-current`, pas seulement une classe. La classe `sep`
   est conservée parce que les deux feuilles de site s'y accrochent encore.
   Ces quatre règles étaient recopiées à l'identique dans les deux landings —
   et sur veza.fr elles appelaient `--ink-2`, `--ink-3` et `--ink`, trois
   jetons que cette feuille ne définissait pas : le bloc « famille » y était
   donc peint sans hiérarchie depuis le 2026-08-19, sans que rien ne le dise. */
.famille .sep,
.famille [aria-current="page"] {
  font-size: .78rem; color: var(--ink-45);
  text-decoration: none; cursor: default;
}

/* Lockup d'appartenance. « Veza par Talas » — la formule est arrêtée, elle ne
   se paraphrase pas en « un projet Talas ». Seule surface où le lavis de
   marque a droit de cité dans un pied de page. */
.lockup { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .6rem; background: var(--marque-wash); }