/* Synage — page d'accueil.
   Fond noir, un globe en pointillé qui tourne lentement, et un seul panneau : l'adresse MCP
   à copier. Tout le reste de la page est du texte, écrit pour être lu par un agent autant
   que par une personne — donc aucune information portée par une image ou par une couleur
   seule (RGAA 1.2, 3.1), et une hiérarchie de titres continue.
   Polices auto-hébergées (EC-03) : aucune requête vers un service de police distant. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0300-0301, U+0303-0304, U+0308-0309, U+1E00-1EFF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/spline-sans-mono-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/spline-sans-mono-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0300-0301, U+0303-0304, U+0308-0309, U+1E00-1EFF;
}


:root {
  /* Fond quasi noir, jamais #000 : un noir absolu fait vibrer le texte fin et supprime
     toute possibilité de hiérarchie par élévation. */
  --bg: #05070a;
  --bg-raised: #0d1218;
  --bg-sunken: #010204;
  --panel: #111820;
  --panel-line: #222d38;

  --ink: #e9eef3;          /* 17:1 sur --bg */
  --ink-soft: #9fadbb;     /* 7,6:1 sur --bg — corps de texte secondaire */
  --ink-faint: #7d8b99;    /* 5,1:1 sur --bg — plancher, jamais en dessous */

  --line: #1e2833;
  --line-strong: #33414f;

  /* Une seule couleur d'accent. Elle sert le globe, la marque et l'action unique de la
     page ; l'employer ailleurs diluerait la seule chose qu'on demande de faire ici. */
  --accent: #6fd6c4;
  --accent-strong: #9fe8db;
  --accent-dim: #1c3d3a;

  --amber: #f0b968;
  --amber-dim: #3a2c15;
  --alert: #f08a80;
  --alert-dim: #3a1c19;

  --focus: #7fc4ff;

  --radius: 14px;
  --radius-sm: 9px;
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 74rem;
  --measure: 42rem;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* Focus visible partout, jamais retiré (RGAA 10.7). Un contour à fort contraste plus un
   décalage, pour rester lisible aussi bien sur le fond que sur un panneau. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 20;
  background: var(--accent);
  color: #04211d;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus { top: 0.75rem; }

a { color: var(--accent-strong); }
a:hover { color: #c8f3ea; }

code, pre { font-family: var(--font-mono); }

.kicker {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------------------------------------------------------------- en-tête */

.site-header {
  position: relative;
  z-index: 3;
  padding: 1.25rem 0;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.brand-mark { width: 1.75rem; height: 1.75rem; color: var(--accent); flex: none; }
.brand:hover .brand-mark { color: var(--accent-strong); }

.lang-switcher ul {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lang-switcher a {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.lang-switcher a:hover { color: var(--ink); background: var(--bg-raised); }
/* L'état courant ne repose pas sur la seule couleur : fond, graisse et aria-current. */
.lang-switcher a[aria-current='page'] {
  color: var(--ink);
  background: var(--bg-raised);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--panel-line);
}

/* ---------------------------------------------------------------- scène */

.stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 3rem 1.25rem 5rem;
  min-height: min(46rem, 88vh);
  overflow: hidden;
}

.globe-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* Le SVG rendu par le serveur et le canvas dessiné par le script partagent exactement la
   même boîte : le remplacement de l'un par l'autre ne déplace donc rien. */
.globe,
.globe-canvas {
  width: min(62rem, 152vw);
  height: auto;
  aspect-ratio: 1 / 1;
  /* Points blancs. Mesuré : même au point le plus brillant, sous le panneau à 94 %, le
     texte le plus discret reste à 4,79:1 — au-dessus du seuil de 4,5:1. Le globe est
     purement décoratif, aucune information de la page n'en dépend. */
  color: #ffffff;
  opacity: 0.62;
}
.globe-canvas { position: absolute; }
/* Posée par app.js UNIQUEMENT après un premier tracé réussi sur le canvas : si quoi que ce
   soit échoue, le globe de repli reste visible plutôt que de laisser un trou. */
.globe.is-replaced { display: none; }

.stage-inner {
  position: relative;
  z-index: 2;
  width: min(100%, 40rem);
  text-align: center;
}
.stage-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}
.stage-lede {
  margin: 0 auto 2.25rem;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- panneau d'installation */

.install-modal {
  text-align: left;
  /* 94 %, pas moins. Mesuré : sur un point de globe, le texte le plus discret du panneau
     tombe à 4,64:1 avec un panneau à 88 % — au-dessus du seuil, mais sans marge. À 94 % il
     est à 4,89:1. Un panneau posé sur un décor coloré est exactement le cas où un ratio
     calculé sur les valeurs CSS ment : on mesure la composition, pas la couleur nominale. */
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9), 0 2px 0 rgba(255, 255, 255, 0.03) inset;
}
.install-modal h2 {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}
.install-hint {
  margin: 0 0 1.15rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.copy-block { margin: 0; }
.copy-block + .copy-block { margin-top: 1rem; }
.copy-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}
.copy-value {
  display: block;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.9375rem;
  overflow-x: auto;
}
.copy-value--url { padding: 0.7rem 0.85rem; white-space: nowrap; }
.copy-value--code { margin: 0; padding: 0.7rem 0.85rem; font-size: 0.8125rem; line-height: 1.55; }
.copy-value--code code { background: none; padding: 0; }

.copy-btn {
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* 44px de haut : cible tactile confortable (RGAA / WCAG 2.5.8). */
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: #04211d;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}
.copy-btn:hover { background: var(--accent-strong); }
/* L'état « copié » se dit aussi en toutes lettres dans le bouton et dans la zone live :
   la couleur seule ne porte jamais l'information (RGAA 3.1). */
.copy-btn.is-copied { background: var(--accent-strong); }
.copy-btn .icon { width: 1.15rem; height: 1.15rem; flex: none; }

.copy-status {
  margin: 0.4rem 0 0;
  min-height: 1.25rem;
  font-size: 0.8125rem;
  color: var(--accent-strong);
}

.install-advanced { margin-top: 1.35rem; }
.install-advanced > summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.875rem;
  padding: 0.35rem 0;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
}
.install-advanced > summary:hover { color: var(--ink); }
.install-advanced[open] > summary { margin-bottom: 0.85rem; }

/* ---------------------------------------------------------------- documentation */

.doc, .doors {
  padding: 4rem 0;
  border-top: 1px solid var(--line);
}
.doc h2, .doors h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
  letter-spacing: -0.02em;
}
.doc h3 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.doc h4, .door h4 { margin: 1.75rem 0 0.5rem; font-size: 1rem; }
.doc p, .door p { max-width: var(--measure); color: var(--ink-soft); }
.doc > .lede, .doors > .lede { color: var(--ink); font-size: 1.0625rem; }
.doc code, .door code {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.875em;
  color: var(--accent-strong);
}

.steps, .rule-list, .limit-list {
  max-width: var(--measure);
  padding-left: 1.35rem;
  color: var(--ink-soft);
}
.steps li, .rule-list li, .limit-list li { margin-bottom: 0.6rem; }
.steps li::marker { color: var(--accent); font-weight: 700; }
.limit-list li::marker { color: var(--amber); }

.def-list { margin: 1rem 0 0; max-width: var(--measure); }
.def-item {
  display: grid;
  gap: 0.15rem 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}
.def-item dt { font-weight: 600; }
.def-item dd { margin: 0; color: var(--ink-soft); }

@media (min-width: 44rem) {
  .def-item { grid-template-columns: 11rem 1fr; }
}

/* Le schéma du mécanisme, en liste ordonnée : il se lit aussi bien sans CSS. */
.mechanism {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  max-width: var(--measure);
  counter-reset: mech;
}
.mech-node {
  position: relative;
  padding: 0.75rem 0.9rem 0.75rem 2.5rem;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  counter-increment: mech;
}
.mech-node::before {
  content: counter(mech);
  position: absolute;
  left: 0.9rem;
  top: 0.8rem;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.mech-node--synage { border-left-color: var(--accent); }
.mech-node--equipped { border-left-color: var(--accent-dim); }
.mech-node--unequipped { border-left-color: var(--amber); }
.mech-title { display: block; font-weight: 600; }
.mech-caption { display: block; color: var(--ink-soft); font-size: 0.9375rem; }

/* ---------------------------------------------------------------- les deux portes */

.doors { display: grid; gap: 2rem; }
.door {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.door h3 { margin: 0 0 0.6rem; font-size: 1.1875rem; }
.door > p:first-of-type { color: var(--ink); }

@media (min-width: 60rem) {
  .doors { grid-template-columns: 1fr 1fr; align-items: start; }
  .doors > h2, .doors > .lede { grid-column: 1 / -1; }
}

.time-promise, .reassurance {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--accent-strong);
  font-size: 0.9375rem;
}
.time-promise .icon, .reassurance .icon { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.2rem; }

.level-list { margin: 0.75rem 0 0; }
.level-item {
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.level-item + .level-item { margin-top: 0.5rem; }
.level-item dt { font-weight: 600; }
.level-item dd { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; }
/* Disponible / indisponible se distingue par le fond ET par la mention en clair. */
.level-item--active { border-color: var(--accent-dim); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.level-item--unavailable { opacity: 0.75; }
.level-item--unavailable em { color: var(--amber); font-style: normal; font-weight: 600; }

.disclosure {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 0.9rem 1rem;
  background: var(--amber-dim);
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
  border-radius: var(--radius-sm);
}
.disclosure .icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--amber); margin-top: 0.25rem; }
.disclosure h4 { margin: 0 0 0.25rem; font-size: 0.9375rem; }
.disclosure p { margin: 0; font-size: 0.9375rem; }

.ec06-note, .opt-out {
  margin-top: 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.link-check {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 1rem;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.link-check .icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--accent); margin-top: 0.25rem; }
.link-check-body { min-width: 0; flex: 1; }
.link-check-body h4 { margin: 0 0 0.3rem; font-size: 0.9375rem; }
.link-check label {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}
.link-check-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.link-check input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
}
.link-check input::placeholder { color: var(--ink-faint); }
.link-check button {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--accent-strong);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}
.link-check button:hover { border-color: var(--accent); background: var(--accent-dim); }

.link-check-result { margin: 0.6rem 0 0; min-height: 1.25rem; font-size: 0.875rem; }
/* Chaque état porte un préfixe textuel en plus de sa couleur (RGAA 3.1). */
.link-check-result.is-valid { color: var(--accent-strong); }
.link-check-result.is-invalid { color: var(--alert); }
.link-check-result.is-empty { color: var(--ink-faint); }

/* ---------------------------------------------------------------- pied */

.site-footer { border-top: 1px solid var(--line); padding: 2rem 0 3rem; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-start;
  justify-content: space-between;
}
.footer-text p { margin: 0 0 0.35rem; max-width: var(--measure); }
.ec06-footer { color: var(--ink-soft); font-size: 0.875rem; }
.tagline { color: var(--ink-faint); font-size: 0.875rem; }

/* ---------------------------------------------------------------- page absente */

.not-found { padding: 5rem 0 7rem; }
.not-found h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); margin: 0 0 0.75rem; }
.not-found p { color: var(--ink-soft); max-width: var(--measure); }
.button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 1rem;
  padding: 0.5rem 1.15rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.button--primary { background: var(--accent); color: #04211d; }
.button--primary:hover { background: var(--accent-strong); color: #04211d; }

/* ---------------------------------------------------------------- mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}