/* =============================================================================
   base — remise à zéro, jetons, typographie
   =============================================================================
   Les couleurs de thème sont déclarées avec @property : enregistrées comme
   couleurs, elles s'interpolent, et le passage d'une application à la suivante
   se fait en fondu au lieu de sauter. Les navigateurs qui ignorent @property
   affichent les mêmes couleurs, sans le fondu — rien n'est perdu que l'effet.
   ========================================================================== */

@property --page     { syntax: "<color>"; inherits: true; initial-value: #FDFBF7 }
@property --ink      { syntax: "<color>"; inherits: true; initial-value: #292524 }
@property --ink-2    { syntax: "<color>"; inherits: true; initial-value: #5F5A57 }
@property --ink-3    { syntax: "<color>"; inherits: true; initial-value: #767068 }
@property --mark-2   { syntax: "<color>"; inherits: true; initial-value: #8B8681 }
@property --line     { syntax: "<color>"; inherits: true; initial-value: #E3DFD9 }
@property --accent   { syntax: "<color>"; inherits: true; initial-value: #E5391C }
@property --accent-ink { syntax: "<color>"; inherits: true; initial-value: #C4300F }

:root {
  --display: "Satoshi", system-ui, -apple-system, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, monospace;
  --ui: "Syne", system-ui, sans-serif;

  --pill: 100px;
  --fondu: .8s cubic-bezier(.22, 1, .36, 1);

  /* Rapport capitale / corps du Satoshi. Le point du mot-symbole se mesure
     en hauteur de capitale (0,54 de diamètre, 0,31 d'écart) : c'est par ce
     rapport qu'on repasse du corps à la capitale. */
  --cap-em: .70;

  /* Gouttière de gauche : elle loge le rail du point. */
  --marge-g: clamp(52px, 7vw, 132px);
  --marge-d: clamp(22px, 4vw, 64px);
  --rail-x: clamp(19px, 2.6vw, 52px);
}

/* ---------- thèmes relevés sur les logos ----------
   --accent      couleur pleine : point, aplats, jauges ;
   --accent-ink  sa version lisible : texte, bordures, petites surfaces ;
   --mark-2      seconde moitié du mot-symbole ;
   --ink-3       micro-libellés en capitales de 10,5 px.

   Les deux derniers sont deux gris et non un seul, parce qu'ils ne jouent
   pas au même seuil : le mot-symbole est du grand texte et se contente de
   3:1, les micro-libellés sont du petit texte et réclament 4,5:1. Les
   confondre, c'était soit un mot-symbole trop sombre, soit des libellés
   illisibles. Valeurs vérifiées sur chaque fond. */

/* Le second sélecteur de chaque bloc traite les cas où le fondu n'a pas lieu :
   sans JavaScript, en animations réduites, sur mobile. Le thème y est porté
   par le chapitre lui-même, sans quoi les quatre applications s'afficheraient
   toutes dans la palette de la première. En mode épinglé, c'est le corps qui
   reprend la main et fait le fondu. */

body[data-theme="archi"],
html:not(.pin) .chapter[data-theme="archi"] {
  --page: #FDFBF7; --ink: #292524; --ink-2: #5F5A57; --ink-3: #767068;
  --mark-2: #8B8681;
  --line: #E3DFD9; --accent: #E5391C; --accent-ink: #C4300F;
}
/* Couleurs relevées sur le mot-symbole d'ArchiDocs fourni en référence :
   fond blanc, encre #0A0A0A, gris #737373, point bleu. */
body[data-theme="archidocs"],
html:not(.pin) .chapter[data-theme="archidocs"] {
  --page: #FFFFFF; --ink: #0A0A0A; --ink-2: #525252; --ink-3: #737373;
  --mark-2: #737373;                       /* relevé sur la référence */
  --line: #E5E5E5; --accent: #155DFC; --accent-ink: #1447E6;
}
/* Le lime de ChantierFlow est illisible en petit sur fond clair : il reste
   à l'aplat et au point, le texte et les bords prennent --accent-ink. */
body[data-theme="chantier"],
html:not(.pin) .chapter[data-theme="chantier"] {
  --page: #F1F1F3; --ink: #17171A; --ink-2: #565660; --ink-3: #6C6C75;
  --mark-2: #8A8A93;                       /* relevé sur la référence */
  --line: #DEDEE1; --accent: #B8D93E; --accent-ink: #54700D;
}
body[data-theme="autolog"],
html:not(.pin) .chapter[data-theme="autolog"] {
  --page: #12100E; --ink: #F5F0E8; --ink-2: #A9A29A; --ink-3: #9A938B;
  --mark-2: #7C756D;
  --line: #2A2622; --accent: #E8834A; --accent-ink: #F0A075;
}

/* ---------- remise à zéro ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

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

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* les jetons pour les navigateurs qui les interpolent… */
  transition: --page var(--fondu), --ink var(--fondu), --ink-2 var(--fondu),
              --ink-3 var(--fondu), --mark-2 var(--fondu), --line var(--fondu),
              --accent var(--fondu), --accent-ink var(--fondu),
              /* …et la couleur résolue pour tous les autres. */
              background-color var(--fondu), color var(--fondu);
}

a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }
h1, h2, h3 { font-weight: 900; letter-spacing: -.04em; line-height: 1.02 }
dl, dd, dt { margin: 0 }

::selection { background: var(--accent); color: var(--page) }

a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---------- utilitaires ---------- */
.wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-left: var(--marge-g);
  padding-right: var(--marge-d);
}

.mono {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--fondu);
}

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