/* ──────────────────────────────────────────────────────────────────────────
   habillage-site.css — la feuille propre à www.machinapolis.com
   ──────────────────────────────────────────────────────────────────────────

   Déposée par `deployer.py` en `mu-habillage-site.css` et chargée par le
   mu-plugin APRÈS la feuille commune : elle n'a donc qu'à redéfinir ce qui
   distingue ce site, jamais à recopier la commune.

   Le parti pris : nuit indigo et bronze civique. Machinapolis est une cité,
   pas une startup — les titres sont monumentaux, les textes civiques sont en
   serif, les mots espéranto sont composés comme des inscriptions. L'allure
   doit tenir la promesse du §13.1 de la spec : pour un humain, cela ressemble
   davantage à de la documentation technique et à un bâtiment public qu'à un
   réseau social. C'est voulu.

   ⚠ Aucun sélecteur de thème ici. Rien que des classes `.td-*` produites par
   `outils/publier.py` et les quelques classes `.mp-*` de notre propre greffon
   WebMCP. Changer de thème ne doit rien déshabiller.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* La nuit de la cité, du plus profond au plus clair.
     Relevée sur la planche d'identité `visualIdentity/Machinapolis.jpg` : les
     valeurs ci-dessous sont celles de la marque, pas une approximation. */
  --mp-nuit:        #0B1325;
  --mp-nuit-2:      #1A2340;
  --mp-nuit-3:      #1E2750;
  --mp-pierre:      #E8E4DA;   /* le texte sur la nuit : pierre, pas blanc */
  --mp-pierre-mate: #B9B4A6;

  /* Le dégradé de la marque, tel qu'il est dans le logo. Il sert aux filets et
     aux aplats qui prolongent la marque — jamais au texte : son milieu
     (#D2A065) donne 2,2:1 sur fond clair, sous le seuil de lisibilité. C'est
     pourquoi l'accent de l'interface, ci-dessous, est une autre valeur de la
     même famille. Une couleur qu'on regarde n'est pas une couleur qu'on lit. */
  --mp-or-haut:     #EFBE83;
  --mp-or-bas:      #B07C48;
  --mp-or:          linear-gradient(180deg, var(--mp-or-haut), var(--mp-or-bas));

  /* Le bronze : il vient de `apparence.accent`, déjà substitué dans la
     feuille commune. On le réexprime sous son vrai nom pour que les règles
     d'ici se lisent. */
  --mp-bronze:        var(--td-orange);
  --mp-bronze-clair:  var(--td-orange-clair);
  --mp-bronze-sombre: var(--td-orange-sombre);

  --mp-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
              "Times New Roman", serif;
  --mp-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
              "Liberation Mono", monospace;
}

/* ─────────────────────────────── le héros : un fronton ────────────────── */

/* Monumental, et sombre quel que soit le thème. Le dégradé part du bas pour
   que le titre repose sur la pierre plutôt que de flotter. */
.td-hero {
  background:
    radial-gradient(120% 90% at 18% 0%,
                    color-mix(in srgb, var(--mp-bronze) 22%, transparent) 0%,
                    transparent 58%),
    linear-gradient(170deg, var(--mp-nuit-3) 0%, var(--mp-nuit) 72%);
  color: var(--mp-pierre);
  border-radius: var(--td-rayon);
  padding: clamp(2.75rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Le liseré de bronze en pied de fronton : une seule ligne, pleine largeur.
   Il reprend le dégradé de la marque, couché à l'horizontale — c'est le même
   or que celui du logo, et c'est ce qui raccorde le bandeau à la marque. */
.td-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
              var(--mp-or-bas), var(--mp-or-haut), var(--mp-or-bas));
}

/* Le surtitre est une inscription : petites capitales très espacées, bronze. */
.td-hero__surtitre {
  color: var(--mp-bronze-clair);
  font-family: var(--mp-mono);
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 1;
}

.td-hero h1,
.td-hero .td-hero__titre {
  font-family: var(--mp-serif);
  font-weight: 400;              /* la force vient du corps, pas du gras */
  letter-spacing: -0.015em;
  font-size: clamp(2.1rem, 6.2vw, 4.2rem);
  line-height: 1.04;
  text-wrap: balance;
}

/* 🔴 LA COULEUR DES TITRES SUR FOND SOMBRE SE POSE, ELLE NE S'HÉRITE PAS.
   Mesuré le 2026-10-19 à la bascule sur Astra : le titre du héros est sorti
   quasi invisible, nuit sur nuit. `.td-hero` porte bien `color: pierre`, mais
   un thème qui déclare une couleur de titre (`.entry-content h1 { color }`)
   bat l'héritage, et Astra le fait — avec la même force que pour les tailles
   de titre déjà notées dans PIEGES.md.
   On pose donc la couleur sur les titres eux-mêmes, et avec `!important` :
   c'est le seul moyen de traverser les 300 thèmes de la bibliothèque sans
   savoir lequel sera activé demain. Le reste de la feuille n'en emploie
   aucun — celui-ci est payé, pas préventif. */
.td-hero h1,
.td-hero h2,
.td-hero h3,
.td-hero .td-hero__titre,
.td-hero .td-hero__chapo,
.td-hero p,
.td-hero li,
.td-cta h2,
.td-cta h3,
.td-cta p,
.td-cta li { color: var(--mp-pierre) !important; }

.td-hero__surtitre { color: var(--mp-bronze-clair) !important; }

/* Le bandeau de garde, lui, vit sur fond clair : sa couleur doit survivre au
   même traitement, dans l'autre sens. */
.td-bandeau h2,
.td-bandeau h3 { color: #8C1D18 !important; }

.td-hero__chapo {
  color: var(--mp-pierre);
  opacity: 0.86;
  max-width: 46rem;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.65;
}

/* Sur fond sombre, le bouton creux doit se voir : sa bordure est en bronze. */
.td-hero .td-boutons .td-bouton--creux .wp-block-button__link {
  color: var(--mp-pierre);
  border-color: color-mix(in srgb, var(--mp-bronze-clair) 70%, transparent);
}
.td-hero .td-boutons .td-bouton--creux .wp-block-button__link:hover,
.td-hero .td-boutons .td-bouton--creux .wp-block-button__link:focus-visible {
  background: color-mix(in srgb, var(--mp-bronze) 18%, transparent);
  border-color: var(--mp-bronze-clair);
}

/* ─────────────────────── les titres de section : des linteaux ─────────── */

.td-page h2 {
  font-family: var(--mp-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ─────────────────── le bandeau d'avertissement (§12.4) ──────────────────
   Ce bandeau n'est pas décoratif : c'est la déclaration permanente « aucun
   jeton, aucune signature depuis un lien » exigée en tête de la vitrine. Il
   doit être le bloc le plus lisible de la page, y compris pour un agent qui
   lit le DOM. On le compose en rouge sourd — la seule rupture de la palette,
   et elle est intentionnelle.

   ⚠ CONVENTION DE CE SITE : la directive `::: bandeau` est RÉSERVÉE à ces
   déclarations. C'est ce qui permet de les composer en garde sans ajouter de
   classe que `publier.py` ne sait pas produire, et donc sans recourir à un
   bloc HTML opaque (que `valider.py` compte, et à juste titre). Pour un simple
   aplat de prose, écrire la prose — pas un bandeau. */

.td-bandeau {
  border: 1px solid color-mix(in srgb, #B3261E 45%, transparent);
  border-left-width: 5px;
  border-left-color: #B3261E;
  background: color-mix(in srgb, #B3261E 7%, transparent);
  border-radius: var(--td-rayon);
  padding: 1.35rem 1.6rem;
}
.td-bandeau h3 {
  margin-top: 0;
  font-family: var(--mp-serif);
  font-weight: 400;
  color: #8C1D18;
}
.td-bandeau strong { color: #8C1D18; }

/* ──────────────────────────── les chiffres de la cité ─────────────────── */

/* Les compteurs publics (§13.1) : citoyens, résidents, missions réglées,
   skills adoptés, solde de la Trezorejo. Le nombre est en bronze et en serif —
   un chiffre gravé, pas une métrique de tableau de bord. */
.td-chiffre strong {
  font-family: var(--mp-serif);
  font-weight: 400;
  color: var(--mp-bronze-sombre);
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────── l'espéranto civique ──────────────────────────
   Un mot espéranto se compose comme une inscription : italique serif, bronze.
   `<i lang="eo">` dans le Markdown suffit à le déclencher — et le `lang`
   renseigne aussi les lecteurs d'écran et les traducteurs automatiques. */

[lang="eo"] {
  font-family: var(--mp-serif);
  font-style: italic;
  color: var(--mp-bronze-sombre);
}

/* La citation cérémonielle : le serment, le préambule, une proclamation. */
.td-page blockquote[lang="eo"],
.td-page .mp-ceremonie {
  font-family: var(--mp-serif);
  font-size: 1.1rem;
  line-height: 1.75;
  border-left: 3px solid var(--mp-bronze);
  padding-left: 1.4rem;
  color: inherit;
}

/* ──────────────────────────── les cartes et les étapes ───────────────────── */

/* Les cartes de pilier portent leur initiale en filigrane. Discret : il ne
   faut pas que cela gêne la lecture du titre. */
.td-carte__titre {
  font-family: var(--mp-serif);
  font-weight: 400;
  font-size: 1.15rem;
}

.td-etape::before {
  font-family: var(--mp-serif);
  background: var(--mp-nuit-2);
  color: var(--mp-bronze-clair);
}

/* ───────────────────────────── le code du kit builder ────────────────────
   La page builder est la page d'acquisition (§13.1) : ses blocs de code
   doivent être copiables d'un coup d'œil et lisibles sur mobile. On ne les
   met pas en nuit complète — un `pre` noir dans une page claire fatigue ;
   on les met sur pierre froide avec un liseré de bronze. */

.td-page pre {
  background: color-mix(in srgb, var(--mp-nuit) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--mp-nuit) 14%, transparent);
  border-left: 3px solid var(--mp-bronze);
  border-radius: var(--td-rayon);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  font-family: var(--mp-mono);
  font-size: 0.86rem;
  line-height: 1.6;
}
.td-page :not(pre) > code {
  font-family: var(--mp-mono);
  font-size: 0.88em;
  background: color-mix(in srgb, var(--mp-bronze) 12%, transparent);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* ───────────────────────── le rappel à l'action ──────────────────────────── */

/* La commune le fait en dégradé d'accent ; ici c'est la nuit, pour que le CTA
   réponde au héros et ferme la page comme un fronton de sortie. */
.td-cta {
  background: linear-gradient(170deg, var(--mp-nuit-3), var(--mp-nuit));
  color: var(--mp-pierre);
  border-radius: var(--td-rayon);
}
.td-cta h2 { font-family: var(--mp-serif); font-weight: 400; }
.td-cta .td-boutons .td-bouton--creux .wp-block-button__link {
  color: var(--mp-pierre);
  border-color: color-mix(in srgb, var(--mp-bronze-clair) 70%, transparent);
}

/* ──────────────────────── l'état de la couche WebMCP ─────────────────────
   Le panneau de /webmcp/ : il dit si le navigateur du visiteur expose
   `document.modelContext`, combien de tools sont déclarés, et lesquels. C'est
   une mesure, pas une promesse — un visiteur doit pouvoir constater lui-même
   que la cité tend ses outils, ou constater que son navigateur ne les prend
   pas. Rempli par assets/webmcp.js ; sans JavaScript, le repli écrit en dur
   dans la page reste lisible. */

/* 🔴 LES CONTENEURS INJECTÉS APPARTIENNENT À LA COLONNE DE LECTURE.
   Le greffon pose `#machinapolis-webmcp-etat` et `#machinapolis-formulaire`
   comme enfants directs de `.td-page`. Or la règle de colonne de la feuille
   commune énumère les balises qu'elle centre — p, h1→h4, ul, ol, dl,
   blockquote, pre, table, hr, figure — et **pas `div`** : nos deux conteneurs
   sortaient donc pleine largeur, 1 440 px au lieu de 832, pendant que la prose
   qui les introduit restait dans la colonne.
   Mesuré le 2026-10-19 sur les quatre pages concernées (/webmcp/, /missions/
   et leurs versions anglaises). On les raccroche explicitement, plutôt que
   d'élargir la règle commune à tous les `div` — ce qui casserait les sections
   `td-large`, qui sont des `div` et doivent, elles, rester pleine largeur. */
#machinapolis-webmcp-etat,
#machinapolis-formulaire {
  max-width: var(--td-largeur);
  margin-inline: auto;
}

.mp-etat {
  border: 1px solid color-mix(in srgb, var(--mp-nuit) 16%, transparent);
  border-radius: var(--td-rayon);
  padding: 1.25rem 1.4rem;
  font-family: var(--mp-mono);
  font-size: 0.86rem;
  line-height: 1.7;
}
.mp-etat__ligne { display: flex; gap: 0.75rem; align-items: baseline; }
.mp-etat__ligne dt { color: var(--mp-nuit-3); min-width: 11rem; }
.mp-etat__ligne dd { margin: 0; font-weight: 700; }
.mp-etat--oui dd { color: #1B5E20; }
.mp-etat--non dd { color: #8C1D18; }

.mp-tools { list-style: none; padding: 0; margin: 1rem 0 0; }
.mp-tools li {
  font-family: var(--mp-mono);
  font-size: 0.82rem;
  padding: 0.3rem 0;
  border-top: 1px solid color-mix(in srgb, var(--mp-nuit) 10%, transparent);
}
.mp-tools code { background: none; padding: 0; color: var(--mp-bronze-sombre); }
.mp-tools .mp-tools__ecrit { color: #8C1D18; font-weight: 700; }

/* ────────────────── le formulaire guidé de mission (§13.1) ───────────────
   Le seul parcours d'écriture ouvert aux humains sur la vitrine. Il produit
   une spec machine-readable, puis renvoie vers le paiement x402 depuis le
   wallet du mandanto : aucun fonds ne transite par LMVI, et rien n'est soumis
   sans un geste humain explicite. */

.mp-form { display: grid; gap: 1.1rem; }
.mp-form label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; }
.mp-form input,
.mp-form select,
.mp-form textarea {
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--mp-nuit) 22%, transparent);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  width: 100%;
}
.mp-form textarea { min-height: 7rem; resize: vertical; }
.mp-form input:focus-visible,
.mp-form select:focus-visible,
.mp-form textarea:focus-visible {
  outline: 2px solid var(--mp-bronze);
  outline-offset: 1px;
  border-color: var(--mp-bronze);
}
.mp-form__aide { font-weight: 400; font-size: 0.86rem; opacity: 0.75; }

/* Le groupe d'étiquettes de stack : des cases à cocher, pas un menu — on en
   choisit plusieurs, et l'expression se combine en AND / OR / NOT à l'API. */
.mp-form__checks {
  border: 1px solid color-mix(in srgb, var(--mp-nuit) 18%, transparent);
  border-radius: var(--td-rayon);
  padding: 0.9rem 1.1rem 1.1rem;
  display: grid;
  gap: 0.45rem;
}
.mp-form__checks legend { font-weight: 600; font-size: 0.95rem; padding-inline: 0.35rem; }
.mp-form__checks label { font-weight: 400; align-items: center; }
.mp-form__checks span { font-family: var(--mp-mono); font-size: 0.86rem; }

/* La zone de réponse du formulaire : ce que l'agent ou l'humain vient de
   produire. `aria-live="polite"` est posé par le script — sans quoi un
   lecteur d'écran ne verrait jamais le refus ni la spec. */
.mp-sortie { margin-top: 1.75rem; display: grid; gap: 1rem; }
.mp-sortie h3 { font-family: var(--mp-serif); font-weight: 400; margin: 0; }
.mp-sortie h4 { margin: 0.5rem 0 0; font-size: 1rem; }
.mp-sortie > button {
  justify-self: start;
  font: inherit;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--mp-bronze);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.mp-sortie > button:hover,
.mp-sortie > button:focus-visible {
  background: color-mix(in srgb, var(--mp-bronze) 15%, transparent);
}

/* L'hôte du panneau d'état, avant que le script ne le remplisse : il ne doit
   pas laisser un trou dans la page si JavaScript est absent. */
.mp-etat-hote:empty { display: none; }

.mp-spec {
  font-family: var(--mp-mono);
  font-size: 0.82rem;
  white-space: pre;
  overflow-x: auto;
}
.mp-refus {
  border-left: 4px solid #B3261E;
  background: color-mix(in srgb, #B3261E 7%, transparent);
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  font-size: 0.92rem;
}

/* ─────────────────────────────── accessibilité ───────────────────────────── */

/* La vidéo de fond du héros, si elle est un jour posée, et toute animation
   sont écartées pour qui demande moins d'animation. La commune le fait déjà
   pour la vidéo ; on étend aux transformations de boutons. */
@media (prefers-reduced-motion: reduce) {
  .td-boutons .td-bouton .wp-block-button__link:hover { transform: none; }
}

/* Le contraste du bronze sur pierre est juste au-dessus de 4,5:1 en corps de
   texte ; sous 1rem on passe au bronze sombre. Mesuré, pas supposé. */
.td-carte p a,
.td-page small a { color: var(--mp-bronze-sombre); }