:root {
  --bg: #f4f5fa; --surface: #ffffff; --surface2: #eceef6; --texte: #1c1d2b; --doux: #5b5f77;
  --bord: #d6d9e8; --accent: #5b4bdb; --sur-accent: #ffffff; --ok: #1f9d55; --alerte: #d98a00; --erreur: #d12f4a;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1c27; --surface: #282a36; --surface2: #343746; --texte: #f1f2f8; --doux: #a3a7c0;
    --bord: #424559; --accent: #bd93f9; --sur-accent: #1b1c27; --ok: #50fa7b; --alerte: #ffb86c; --erreur: #ff6e8a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1b1c27; --surface: #282a36; --surface2: #343746; --texte: #f1f2f8; --doux: #a3a7c0;
  --bord: #424559; --accent: #bd93f9; --sur-accent: #1b1c27; --ok: #50fa7b; --alerte: #ffb86c; --erreur: #ff6e8a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--texte); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
a { color: var(--accent); }

button, select, input, textarea { font: inherit; color: inherit; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--bord);
  border-radius: 999px; background: var(--surface2); color: var(--texte); cursor: pointer; font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primaire { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.btn.primaire:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
select, input, textarea { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 9px 12px; }
select { min-height: 40px; border-radius: 999px; padding: 0 14px; font-weight: 600; font-size: .92rem; cursor: pointer; max-width: 100%; }

/* ---------- page d'accueil / accès ---------- */
.centre { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.carte { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--bord); border-radius: 24px; padding: 28px 24px; }
.logo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--accent); color: var(--sur-accent); margin-bottom: 16px; }
.logo svg { width: 28px; height: 28px; fill: currentColor; }
h1 { font-size: 1.7rem; line-height: 1.2; margin: 0 0 8px; font-weight: 800; }
.doux { color: var(--doux); margin: 0 0 20px; }
.ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ligne > * { flex: none; }
label { display: grid; gap: 6px; margin-bottom: 14px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
label input, label textarea { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 400; color: var(--texte); width: 100%; }
textarea { min-height: 84px; resize: vertical; }
h2 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); margin: 26px 0 8px; }
.recents { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.recents a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface2); text-decoration: none; color: var(--texte); font-family: var(--mono); font-size: .9rem; }
.recents a:hover { outline: 1px solid var(--accent); }
.recents small { color: var(--doux); font-family: system-ui, sans-serif; }
.etat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface2); }
.roue { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 3px solid var(--bord); border-top-color: var(--accent); animation: roue 1s linear infinite; }
@keyframes roue { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roue { animation-duration: 3s; } }
.erreur { color: var(--erreur); font-size: .9rem; margin: 8px 0 0; }
.lien { background: none; border: 0; color: var(--accent); font-weight: 600; cursor: pointer; padding: 10px 0 0; }

/* ---------- page d'un snippet ---------- */
body.room { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--bord); flex: none; }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; color: var(--texte); margin-right: auto; }
.marque .logo { width: 34px; height: 34px; border-radius: 10px; margin: 0; }
.marque .logo svg { width: 20px; height: 20px; }
.etat-co { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--doux); }
#statut::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--alerte); margin-right: 6px; }
#statut[data-etat="ok"]::before { background: var(--ok); }
#statut[data-etat="coupe"]::before { background: var(--erreur); }
#statut { display: inline-flex; align-items: center; }
#editeur { flex: 1 1 auto; min-height: 0; position: relative; }
#editeur .CodeMirror { position: absolute; inset: 0; height: auto; font-family: var(--mono); font-size: 14.5px; line-height: 1.5; }
#editeur .CodeMirror-gutters { border-right: 1px solid var(--bord); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--texte); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: .9rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 10; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) {
  .btn .txt { display: none; }
  .btn { padding: 0 12px; }
  .barre { padding: 8px 10px; }
}

.nom-page { font-family: var(--mono); font-size: .95rem; padding: 4px 12px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--bord); }
.saisie { display: flex; gap: 10px; flex-wrap: wrap; }
.saisie .prefixe { display: flex; align-items: center; flex: 1 1 200px; min-width: 0; border: 1px solid var(--bord); border-radius: 999px; background: var(--surface); padding: 0 6px 0 16px; }
.saisie .prefixe span { color: var(--doux); font-family: var(--mono); white-space: nowrap; }
.saisie .prefixe input { border: 0; background: none; min-width: 0; flex: 1; padding: 10px 6px; font-family: var(--mono); }
.saisie .prefixe input:focus-visible { outline: none; }
.saisie .prefixe:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }