/* Thème « cockpit » : jetons, palettes et les seuls composants « cx- » utilisés par la page.
   Activé par <html data-theme="cockpit" data-palette="froid|titane|ambre|magenta"> et <body class="cx">.
   Toutes les couleurs se calculent depuis trois valeurs de base (accent, fond, état). */

/* ---------- Jetons ---------- */
:root {
  --cx-h: 190; --cx-s: 90%; --cx-l: 60%;
  --cx-bg-h: 220; --cx-bg-s: 30%; --cx-bg-l: 7%;
  --cx-ok-h: 145; --cx-ok-s: 65%; --cx-ok-l: 50%;
  --cx-bad-h: 0; --cx-bad-s: 75%; --cx-bad-l: 62%;
  --cx-text-l: 88%; --cx-dim-l: 62%;
  --cx-scan: rgb(255 255 255 / .014);   /* lignes de balayage */
  --cx-shine: rgb(255 255 255 / .07);   /* reflet métal en haut des surfaces */

  --cx-accent: hsl(var(--cx-h) var(--cx-s) var(--cx-l));
  --cx-ok: hsl(var(--cx-ok-h) var(--cx-ok-s) var(--cx-ok-l));
  --cx-bad: hsl(var(--cx-bad-h) var(--cx-bad-s) var(--cx-bad-l));
  --cx-bg: hsl(var(--cx-bg-h) var(--cx-bg-s) var(--cx-bg-l));
  --cx-panel: hsl(var(--cx-bg-h) var(--cx-bg-s) calc(var(--cx-bg-l) + 4%));
  --cx-panel-2: hsl(var(--cx-bg-h) var(--cx-bg-s) calc(var(--cx-bg-l) + 7%));
  --cx-line: hsl(var(--cx-bg-h) var(--cx-bg-s) calc(var(--cx-bg-l) + 14%));
  --cx-text: hsl(var(--cx-bg-h) 25% var(--cx-text-l));
  --cx-dim: hsl(var(--cx-bg-h) 14% var(--cx-dim-l));
  --cx-on-accent: var(--cx-bg);

  --cx-radius: 6px;
  --cx-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --cx-sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Palettes ---------- */
[data-palette="titane"] {
  --cx-h: 210; --cx-s: 22%; --cx-l: 74%;
  --cx-bg-h: 220; --cx-bg-s: 8%; --cx-bg-l: 5%;
  --cx-ok-h: 153; --cx-ok-s: 37%; --cx-ok-l: 59%;
  --cx-bad-h: 0; --cx-bad-s: 60%; --cx-bad-l: 60%;
}
[data-palette="ambre"] {
  --cx-h: 39; --cx-s: 74%; --cx-l: 55%;
  --cx-bg-h: 36; --cx-bg-s: 28%; --cx-bg-l: 5%;
  --cx-ok-h: 85; --cx-ok-s: 33%; --cx-ok-l: 56%;
  --cx-bad-h: 12; --cx-bad-s: 70%; --cx-bad-l: 55%;
}
[data-palette="magenta"] {
  --cx-h: 330; --cx-s: 66%; --cx-l: 59%;
  --cx-bg-h: 270; --cx-bg-s: 38%; --cx-bg-l: 5%;
  --cx-ok-h: 160; --cx-ok-s: 48%; --cx-ok-l: 58%;
  --cx-bad-h: 8; --cx-bad-s: 75%; --cx-bad-l: 58%;
}
:root[data-palette] { color-scheme: dark; }

/* ---------- Page : fond à quadrillage, balayage, police ---------- */
.cx {
  margin: 0; min-height: 100vh;
  color: var(--cx-text); font-family: var(--cx-sans); line-height: 1.5;
  background:
    radial-gradient(1100px 560px at 8% -8%, color-mix(in srgb, var(--cx-accent) 12%, transparent), transparent 62%),
    radial-gradient(900px 520px at 100% 0%, color-mix(in srgb, var(--cx-ok) 7%, transparent), transparent 58%),
    var(--cx-bg);
  background-attachment: fixed;
}
.cx::before { /* quadrillage */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--cx-accent) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--cx-accent) 4%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
}
.cx::after { /* lignes de balayage, très discrètes */
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--cx-scan) 0 1px, transparent 1px 3px);
}
.cx a { color: var(--cx-accent); }
.cx a:hover { color: var(--cx-text); }
.cx :focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 2px; }
.cx ::selection { background: color-mix(in srgb, var(--cx-accent) 35%, transparent); }
.cx-mono { font-family: var(--cx-mono); }
.cx-dim { color: var(--cx-dim); }

/* ---------- Barre du haut ---------- */
.cx-topbar {
  position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px;
  padding: 9px clamp(14px, 3vw, 40px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cx-bg) 96%, var(--cx-panel)), color-mix(in srgb, var(--cx-bg) 90%, transparent));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cx-line);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cx-accent) 22%, transparent), 0 8px 28px rgb(0 0 0 / .25);
}
.cx-brand { font-family: var(--cx-mono); font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cx-text); text-decoration: none; text-shadow: 0 0 14px color-mix(in srgb, var(--cx-accent) 60%, transparent); }
.cx-brand b { color: var(--cx-accent); font-weight: 600; }

/* ---------- Titre de page : « // TITRE » avec graduation dessous ---------- */
.cx-title {
  position: relative; margin: 6px 0 18px; padding-bottom: 12px;
  font-family: var(--cx-mono); font-size: 1.05rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--cx-text), var(--cx-accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cx-title::before { content: "// "; color: var(--cx-accent); -webkit-text-fill-color: var(--cx-accent); }
.cx-title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--cx-accent) 55%, transparent) 0 1px, transparent 1px 8px) bottom / 100% 58% no-repeat,
              linear-gradient(90deg, var(--cx-accent), transparent 55%) bottom / 100% 1px no-repeat;
}

/* ---------- Panneau : dégradé, reflet, équerres aux deux coins opposés ---------- */
.cx-panel {
  position: relative; padding: 16px 18px; border-radius: var(--cx-radius);
  background: linear-gradient(165deg, color-mix(in srgb, var(--cx-accent) 10%, var(--cx-panel)), var(--cx-panel) 58%);
  border: 1px solid color-mix(in srgb, var(--cx-accent) 14%, var(--cx-line));
  box-shadow: 0 10px 32px -16px rgb(0 0 0 / .7), inset 0 1px 0 var(--cx-shine), inset 0 0 28px color-mix(in srgb, var(--cx-accent) 5%, transparent);
  transition: border-color .25s, box-shadow .25s;
}
.cx-panel::before, .cx-panel::after { content: ""; position: absolute; width: 11px; height: 11px; pointer-events: none; border: 0 solid var(--cx-accent); opacity: .75; }
.cx-panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: var(--cx-radius); }
.cx-panel::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: var(--cx-radius); }
.cx-panel:hover { border-color: color-mix(in srgb, var(--cx-accent) 45%, var(--cx-line)); }
.cx-panel__title {
  margin: 0 0 12px; padding-bottom: 7px; font-family: var(--cx-mono); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--cx-accent) 50%, transparent) 0 1px, transparent 1px 6px) left bottom / 58% 4px no-repeat;
  color: var(--cx-accent);
}
.cx-panel__title::before { content: "// "; opacity: .6; }

/* ---------- Boutons ---------- */
.cx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; cursor: pointer;
  font-family: var(--cx-mono); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-text); text-decoration: none;
  border: 1px solid var(--cx-line); border-radius: 5px;
  background: linear-gradient(180deg, var(--cx-panel-2), var(--cx-panel)); box-shadow: inset 0 1px 0 var(--cx-shine);
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.cx-btn:hover { border-color: var(--cx-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--cx-accent) 24%, transparent), inset 0 1px 0 var(--cx-shine); }
.cx-btn--primary { color: var(--cx-on-accent); border-color: var(--cx-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--cx-accent) 62%, white), var(--cx-accent) 48%, color-mix(in srgb, var(--cx-accent) 68%, black)); }
.cx-btn--primary:hover { box-shadow: 0 0 18px color-mix(in srgb, var(--cx-accent) 45%, transparent), inset 0 1px 0 rgb(255 255 255 / .5); }
.cx-btn--danger:hover { border-color: var(--cx-bad); color: var(--cx-bad); box-shadow: 0 0 14px color-mix(in srgb, var(--cx-bad) 25%, transparent); }
.cx-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- Champs ---------- */
.cx-input {
  width: 100%; box-sizing: border-box; padding: 8px 11px; font: inherit; font-size: .9rem; color: var(--cx-text);
  background: color-mix(in srgb, var(--cx-accent) 5%, var(--cx-panel)); border: 1px solid var(--cx-line); border-radius: 5px; outline: 0;
}
.cx-input:focus { border-color: var(--cx-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cx-accent) 25%, transparent), 0 0 18px color-mix(in srgb, var(--cx-accent) 14%, transparent); }
.cx-input::placeholder { color: var(--cx-dim); opacity: .8; }

@media (prefers-reduced-motion: reduce) { .cx *, .cx-panel { transition: none !important; } }
@media (max-width: 720px) { .cx-topbar { flex-direction: column; align-items: flex-start; gap: 8px; } }