/* Lightning by Solution Instrumentation. Tokens from the 2025 Guide de normes graphiques:
   Bleu solution #202764 (principale), Jaune chantier #DD9118 et Vert techno #00C897 (accents, CTA),
   Charcoal #4D4D4D (texte), Blanc. Titres: Asap Bold. Emphase: Asap Semi-bold. Paragraphes: Inter Regular. */
@font-face { font-family: "Asap"; src: url("/static/fonts/asap-variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bleu: #202764; --jaune: #dd9118; --vert: #00c897; --charcoal: #4d4d4d; --blanc: #ffffff;
  /* dark: Bleu solution as the page itself, as in the brand's full-bleed slides */
  --bg: #1a2054; --surface: var(--bleu); --surface-2: #2a3178; --line: #3a4290;
  --text: var(--blanc); --muted: #b7bde0;
  --accent: var(--vert); --accent-ink: #0a2a22; --accent-2: var(--jaune);
  --danger: #ff8a80; --ok: var(--vert); --focus: var(--vert);
  --logo: url("/static/img/logo-white.png"); --emblem: url("/static/img/emblem-white.png");
  --grid-line: rgba(255,255,255,.07);
  --radius: 4px;
  --font-title: "Asap", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}
:root[data-theme="light"] {
  --bg: #f3f4f8; --surface: var(--blanc); --surface-2: #eef0f6; --line: #d8dbe8;
  --text: var(--charcoal); --muted: #6b7190;
  --accent: var(--bleu); --accent-ink: var(--blanc); --accent-2: var(--jaune);
  --danger: #b3261e; --ok: #0a9e78; --focus: var(--bleu);
  --logo: url("/static/img/logo.png"); --emblem: url("/static/img/emblem.png");
  --grid-line: rgba(32,39,100,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--text); font: 400 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, .brand .product b { font-family: var(--font-title); font-weight: 700; letter-spacing: .005em; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h1 span.hl, .hl { background: linear-gradient(transparent 55%, var(--vert) 55%, var(--vert) 92%, transparent 92%); padding: 0 .15em; }
strong, b { font-family: var(--font-title); font-weight: 600; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* header: the guide's edge accent bar, then the logo, then the product */
.topbar { position: relative; display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.5rem .8rem 2rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.topbar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--vert); }
.brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.brand .logo { display: block; width: 160px; height: 51px; background: var(--logo) no-repeat left center / contain; }
.brand .product { display: flex; flex-direction: column; line-height: 1.15; padding-left: 1rem; border-left: 1px solid var(--line); }
.brand .product b { font-size: 1.2rem; }
.brand .product small { color: var(--muted); font-size: .85rem; }
.topbar nav { display: flex; gap: 1.25rem; align-items: center; color: var(--muted); font-size: .95rem; }
.topbar nav a { text-decoration: none; }
.topbar nav a:hover { color: var(--text); }

/* the perspective-grid motif from the guide, kept faint and low on the page */
main {
  flex: 1; width: 100%; max-width: 64rem; margin: 0 auto; padding: 2rem 1.5rem; position: relative;
}
body::after {
  content: ""; position: fixed; inset: auto 0 0 0; height: 42vh; pointer-events: none; z-index: -1;
  background:
    linear-gradient(to bottom, var(--bg) 0%, transparent 40%),
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 28px);
  transform: perspective(600px) rotateX(48deg); transform-origin: bottom center;
}
footer { padding: 1rem 1.5rem 1rem 2rem; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--surface); position: relative; }
footer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--jaune); }
footer .motto { color: var(--text); font-family: var(--font-title); font-weight: 600; }

.narrow { max-width: 26rem; margin: 6vh auto; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
label { display: block; font-size: .9rem; color: var(--muted); margin: .9rem 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=date], select {
  width: 100%; padding: .65rem .75rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font: inherit;
}
input::placeholder { color: var(--muted); }
.code { letter-spacing: .35em; font-size: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; }

button, .btn { display: inline-block; padding: .7rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { border-color: var(--muted); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; width: 100%; margin-top: 1.25rem; font-family: var(--font-title); font-weight: 600; font-size: 1rem; }
.btn-primary:hover { filter: brightness(1.06); border-color: transparent; }
.btn-secondary { background: var(--accent-2); color: #1d1300; border-color: transparent; }
.btn-link { background: none; border: none; padding: 0; color: var(--muted); text-decoration: underline; }
.btn-link:hover { color: var(--text); }

.alert { padding: .7rem .9rem; border-radius: var(--radius); border: 1px solid var(--line); border-left-width: 4px; margin-bottom: 1rem; font-size: .95rem; }
.alert-error { border-color: var(--danger); color: var(--danger); }
.alert-ok { border-color: var(--ok); color: var(--ok); }

.qr { display: block; width: 200px; height: 200px; margin: .5rem auto 1rem; background: #fff; padding: 8px; border-radius: var(--radius); }
.secret { font-family: ui-monospace, Consolas, monospace; word-break: break-all; font-size: .85rem; padding: .5rem .7rem; background: var(--surface-2); border-radius: var(--radius); }

.actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; font-size: .9rem; }
.theme-form { display: inline; }

@media (max-width: 640px) {
  .brand .logo { width: 40px; height: 40px; background-image: var(--emblem); }
  .brand .product { padding-left: .75rem; }
  .topbar, footer { padding-left: 1.25rem; padding-right: 1rem; }
  footer { flex-direction: column; gap: .25rem; }
}
@media (prefers-reduced-motion: no-preference) { button, .btn { transition: filter .12s, border-color .12s; } }