/* L'ACCUEIL — la première chose qu'on voit, et la seule qu'on voie avant d'être quelqu'un. */
:root {
  --bg: #f7f7fb; --surface: #fff; --ink: #1f2330; --muted: #8a8fa3; --line: #e6e6ef;
  --accent: #5b21b6; --accent-soft: #ede9fe; --radius: 12px;
  --shadow: 0 1px 3px rgba(20, 20, 40, 0.06), 0 1px 2px rgba(20, 20, 40, 0.04);
}
/* LA LUMINOSITÉ (2026-09-25) — le système par défaut, et le choix du menu du compte par-dessus : la barre pose `data-look`
 * (`light` ou `dark`) sur la racine. ⚠ DEUX BLOCS, LES MÊMES JETONS : le CSS ne sait pas dire « média OU attribut », et le
 * média seul servait la page avant que la barre n'arrive — sans lui, un appareil sombre verrait un éclair clair. */
@media (prefers-color-scheme: dark) {
  :root:not([data-look="light"]) { --bg: #14161a; --surface: #1b1e24; --ink: #d6dae1; --muted: #7c8394; --line: #2a2f38;
          --accent: #a78bfa; --accent-soft: #2b2440; --shadow: none; }
}
:root[data-look="dark"] { --bg: #14161a; --surface: #1b1e24; --ink: #d6dae1; --muted: #7c8394; --line: #2a2f38;
        --accent: #a78bfa; --accent-soft: #2b2440; --shadow: none; }
* { box-sizing: border-box; }
/* ⚠ LA PAGE OCCUPE LA FENÊTRE, ET LE PIED TOUCHE LE BAS. Sans cela l'accueil flottait au milieu :
   l'en-tête, une porte, puis du vide sous un pied posé nulle part. Les sondes l'ont dit avant l'œil —
   *un pied qui ne touche pas le bas ne se voit pas quand la page est courte, et saute aux yeux quand
   elle ne l'est plus.* Même mise en page que l'atelier : une colonne, et le corps prend ce qui reste. */
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { flex: 1; min-height: 0; }
main { padding: 28px 22px; max-width: 900px; margin: 0 auto; width: 100%; box-sizing: border-box; }
footer { padding: 10px 20px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
footer .bad { color: #b91c1c; }

/* LES APPS — une tuile par app, et rien qui ressemble à un menu : *ce qu'on ouvre se montre, ça ne
   se déroule pas.* La grille suit le contenu, elle n'est pas comptée en pistes. */
.apps { display: flex; flex-wrap: wrap; gap: 14px; }
.apps:empty::after { content: "no application is open to you here"; color: var(--muted); font-style: italic; }
.app { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; min-width: 220px; flex: 1 1 220px; }
.app:hover { border-color: var(--accent); }
.app b { display: block; font-size: 16px; margin-bottom: 4px; }
.app span { color: var(--muted); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* ⚠ `needs` SE MONTRE, PARCE QU'IL NE GARDE PAS. L'afficher dit à qui lit qu'il faudra ces droits —
   et rappelle que ce n'est pas cette liste qui les vérifie. */
.app .needs { display: block; margin-top: 8px; color: var(--accent); background: var(--accent-soft); border-radius: calc(6px * var(--corner, 1)); padding: 2px 7px; font-size: 11px; }

/* LA PORTE — même dessin que celle du bureau, et pour cause : c'est le même fichier, recopié. */
/* ⚠ QUAND ELLE EST LÀ, LA PORTE EST LE CONTENU. Elle était posée AVANT le corps avec une marge : il
   restait donc un trou entre les deux, et le corps vide gardait sa place. *Ce qu'on ne peut pas
   faire tant qu'on n'est pas entré n'est pas à côté de la page, c'est la page.* Elle prend donc ce
   qui reste, et le corps vide s'efface. */
/* LA PORTE — le logo à gauche, les façons d'entrer à droite (2026-09-21) ; au téléphone, le logo passe au-dessus, petit. */
.door { max-width: 660px; width: 100%; margin: 0 auto; align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px; align-items: center; flex: 1; align-content: center; }
.door .ways { display: grid; gap: 10px; }
.door .mark img { display: block; width: 100%; max-width: 260px; height: auto; margin-left: auto; }
@media (max-width: 640px) { .door { grid-template-columns: minmax(0, 1fr); max-width: 340px; gap: 12px; } .door .mark img { max-width: 104px; margin: 0 auto; } }
.door:empty { display: none; }
main:empty { display: none; }
.door form { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.door input { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: calc(8px * var(--corner, 1)); background: var(--bg); color: var(--ink); }
.door button { font: inherit; padding: 9px 13px; border: 1px solid var(--accent); border-radius: calc(8px * var(--corner, 1)); background: var(--accent); color: #fff; cursor: pointer; }
.door .way { display: block; text-align: center; padding: 10px; border: 1px solid var(--line); border-radius: calc(8px * var(--corner, 1)); background: var(--surface); color: var(--ink); text-decoration: none; }
.door .dev { border-style: dashed; opacity: 0.75; }
.door .dev button { background: var(--surface); color: var(--muted); border-color: var(--line); font-size: 12px; }

/* L'OUBLI — discret tant qu'on ne l'a pas, entier quand on le demande. */
.door .aside { display: block; text-align: center; color: var(--muted); font-size: 12px; text-decoration: none; padding: 4px; }
.door .aside:hover { color: var(--accent); text-decoration: underline; }
.door .again p { margin: 0 0 2px; color: var(--muted); font-size: 12px; }

/* ── LA BARRE DU SOCLE (`/shell.css`) — on ne lui donne QUE des couleurs.
 *
 * ⚠ SA FORME A DÉMÉNAGÉ AU SOCLE le 2026-08-30, avec le module qu'elle habille. Les trois écrans en
 * gardaient chacun une copie, et une copie de plus est une divergence de plus. Ce qui reste ici est
 * le seul lien qui ne peut pas déménager : la PALETTE de cet écran-ci. */
.shell {
  --shell-ink: var(--ink);
  --shell-dim: var(--muted);
  --shell-line: var(--line);
  --shell-face: var(--surface);
  --shell-sunk: var(--bg);
  --shell-accent: var(--accent);
}