/*
 * Thème de syn-systems.net (mêmes couleurs, cadre et typographie que core/SynSystems, wwwroot/style.css),
 * posé sur Bootstrap en mode sombre (data-bs-theme="dark") : les vues gardent leurs classes Bootstrap.
 */
:root[data-bs-theme=dark] {
  --bg: #0a0d13;
  --panel: #111722;
  --line: #1b2330;
  --line-strong: #263142;
  --fg: #f1f4f8;
  --text: #c9d0d9;
  --muted: #8a94a2;
  --accent: #29b0f0;
  --accent-hover: #52c1f5;
  --accent-ink: #061420;
  --ok: #2fbf71;
  --warn: #f0b429;
  --danger: #e5484d;
  --corner: 34px;

  --bs-body-font-family: Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --bs-font-monospace: ui-monospace, SFMono-Regular, Consolas, monospace;
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: 10, 13, 19;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 201, 208, 217;
  --bs-emphasis-color: var(--fg);
  --bs-heading-color: var(--fg);
  --bs-secondary-color: var(--muted);
  --bs-secondary-rgb: 138, 148, 162;
  --bs-secondary-bg: var(--panel);
  --bs-tertiary-bg: var(--panel);
  --bs-border-color: var(--line);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 41, 176, 240;
  --bs-success-rgb: 47, 191, 113;
  --bs-warning-rgb: 240, 180, 41;
  --bs-danger-rgb: 229, 72, 77;
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 41, 176, 240;
  --bs-link-hover-color: var(--accent-hover);
  --bs-link-hover-color-rgb: 82, 193, 245;
  --bs-focus-ring-color: rgba(41, 176, 240, .3);
  --bs-form-invalid-color: var(--danger);
  --bs-form-invalid-border-color: var(--danger);
  --bs-form-valid-border-color: var(--line-strong);
}

html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { font-size: 1rem; line-height: 1.6; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--fg); font-weight: 500; }
hr { border-color: var(--line); opacity: 1; }
::selection { background: rgba(41, 176, 240, .35); color: var(--fg); }

/* Cadre à coins accentués */
.frame {
  border: 1px solid #111823;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / var(--corner) 2px,
    linear-gradient(var(--accent), var(--accent)) top left / 2px var(--corner),
    linear-gradient(var(--accent), var(--accent)) top right / var(--corner) 2px,
    linear-gradient(var(--accent), var(--accent)) top right / 2px var(--corner),
    linear-gradient(var(--accent), var(--accent)) bottom left / var(--corner) 2px,
    linear-gradient(var(--accent), var(--accent)) bottom left / 2px var(--corner),
    linear-gradient(var(--accent), var(--accent)) bottom right / var(--corner) 2px,
    linear-gradient(var(--accent), var(--accent)) bottom right / 2px var(--corner);
  background-repeat: no-repeat;
}

.brand {
  display: inline-block;
  color: var(--fg);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.brand:hover { color: var(--fg); text-decoration: none; }
.brand span { color: var(--accent); }
.kicker {
  margin: 12px 0 0;
  color: var(--fg);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Pages de compte : un cadre centré */
.auth-shell {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.auth-frame { width: 100%; max-width: 480px; padding: clamp(24px, 6vw, 44px); }
.auth-frame.wide { max-width: 680px; }
.auth-head { padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.auth-head .brand { font-size: clamp(2rem, 9vw, 2.6rem); }

.site-nav {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center;
  margin-top: 16px;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
}
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--accent); text-decoration: none; }

/* Administration */
.admin-shell { max-width: 1240px; margin: 0 auto; padding: 24px 16px; }
.admin-frame { padding: clamp(20px, 4vw, 48px); }
.admin-hero {
  display: flex; flex-wrap: wrap; gap: 16px 48px;
  justify-content: space-between; align-items: flex-end;
  padding-bottom: 20px;
}
.admin-hero .brand { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.admin-hero .kicker { color: var(--muted); }
.hero-note { margin: 0; color: var(--muted); text-align: right; }
.hero-note strong { color: var(--accent); font-weight: 700; }
.hero-note a { margin-left: 12px; }
@media (max-width: 760px) { .hero-note { text-align: left; } .hero-note a { margin-left: 0; display: block; } }

.admin-nav {
  --bs-navbar-padding-y: 6px;
  --bs-navbar-color: var(--muted);
  --bs-navbar-hover-color: var(--fg);
  --bs-navbar-active-color: var(--accent);
  --bs-navbar-nav-link-padding-x: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.admin-nav .navbar-nav { gap: 2px 22px; }
.admin-nav .nav-link { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.admin-nav .nav-link.active { font-weight: 700; }
.admin-nav .navbar-toggler { border-color: var(--line-strong); }
.admin-main { padding-top: 32px; }

.page-title {
  margin: 0 0 24px;
  color: var(--accent);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
h2.h6 {
  margin-bottom: 14px;
  color: var(--fg);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Boutons : à plat, en capitales ; le principal reprend la forme du bouton d'accueil de syn-systems.net */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: 0;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
  padding-block: .55rem;
}
.btn-sm { font-size: .72rem; padding-block: .3rem; }
.btn-primary {
  --bs-btn-color: var(--accent-ink);
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent-ink);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-color: var(--accent-ink);
  --bs-btn-active-bg: var(--accent-hover);
  --bs-btn-active-border-color: var(--accent-hover);
  --bs-btn-disabled-color: var(--accent-ink);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 41, 176, 240;
  font-weight: 700;
  padding-inline: 1.75rem;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.btn-primary:not(.btn-sm) { padding-block: .75rem; font-size: .95rem; }
/* La découpe masquerait l'anneau de focus clavier. */
.btn-primary:focus-visible { clip-path: none; }
.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: var(--accent-ink);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-color: var(--accent-ink);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 41, 176, 240;
}
.btn-outline-secondary {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--fg);
  --bs-btn-hover-bg: var(--line);
  --bs-btn-hover-border-color: var(--muted);
  --bs-btn-active-color: var(--fg);
  --bs-btn-active-bg: var(--line);
  --bs-btn-active-border-color: var(--muted);
}
.btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: rgba(229, 72, 77, .5); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); }
.btn-outline-warning { --bs-btn-color: var(--warn); --bs-btn-border-color: rgba(240, 180, 41, .5); --bs-btn-hover-color: var(--accent-ink); --bs-btn-hover-bg: var(--warn); --bs-btn-hover-border-color: var(--warn); }
.btn-outline-success { --bs-btn-color: var(--ok); --bs-btn-border-color: rgba(47, 191, 113, .5); --bs-btn-hover-color: var(--accent-ink); --bs-btn-hover-bg: var(--ok); --bs-btn-hover-border-color: var(--ok); }

/* Formulaires */
.form-label {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.form-text { color: var(--muted); }
.form-control, .form-select {
  background-color: var(--panel);
  border-color: var(--line-strong);
  color: var(--fg);
}
.form-control:focus, .form-select:focus {
  background-color: var(--panel);
  border-color: var(--accent);
  color: var(--fg);
  box-shadow: 0 0 0 .2rem rgba(41, 176, 240, .18);
}
/* Dans un panneau, le champ reprend le fond de page pour ressortir. */
.card .form-control, .card .form-select, .card .form-control:focus, .card .form-select:focus { background-color: var(--bg); }
.form-control::placeholder { color: #5b6574; }
.form-control[readonly] { background-color: transparent; border-style: dashed; color: var(--muted); }
.form-control.input-validation-error { border-color: var(--danger); }
.form-check-input { background-color: var(--panel); border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(41, 176, 240, .18); }
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2329b0f0'/%3e%3c/svg%3e");
}
.text-danger.small, .field-validation-error, .validation-summary-errors { color: var(--danger) !important; }
.validation-summary-errors ul { margin: 0 0 16px; padding-left: 18px; }

/* Encadrés : fond de panneau et liseré coloré, comme les « callout » de syn-systems.net */
.alert {
  --bs-alert-bg: var(--panel);
  --bs-alert-color: var(--text);
  --bs-alert-border-color: transparent;
  --bs-alert-link-color: var(--accent);
  border: 0;
  border-left: 3px solid var(--alert-edge, var(--accent));
}
.alert-success { --alert-edge: var(--ok); }
.alert-warning { --alert-edge: var(--warn); }
.alert-danger { --alert-edge: var(--danger); }

/* Panneaux (cartes) : comme les tuiles du tableau de bord */
.card {
  --bs-card-bg: var(--panel);
  --bs-card-border-color: var(--line);
  --bs-card-color: var(--text);
  border-top: 2px solid var(--line);
}
a.card { transition: border-color .15s, transform .15s; }
a.card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
a.card .fs-3 { color: var(--accent); font-weight: 300 !important; line-height: 1.1; }
a.card .small { letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }

/* Tableaux */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--line);
  --bs-table-hover-bg: rgba(41, 176, 240, .05);
  --bs-table-hover-color: var(--fg);
}
.table.bg-body { background: transparent !important; }
.table > thead th {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom-color: var(--line-strong);
}
.table td, .table th { vertical-align: middle; }

/* Pastilles d'état */
.badge {
  border-radius: 0;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35em .6em;
  border: 1px solid transparent;
}
.badge.text-bg-success { color: var(--ok) !important; background: rgba(47, 191, 113, .1) !important; border-color: rgba(47, 191, 113, .45); }
.badge.text-bg-warning { color: var(--warn) !important; background: rgba(240, 180, 41, .1) !important; border-color: rgba(240, 180, 41, .45); }
.badge.text-bg-danger { color: var(--danger) !important; background: rgba(229, 72, 77, .1) !important; border-color: rgba(229, 72, 77, .45); }
.badge.text-bg-primary { color: var(--accent) !important; background: rgba(41, 176, 240, .1) !important; border-color: rgba(41, 176, 240, .45); }
.badge.text-bg-secondary, .badge.text-bg-dark, .badge.text-bg-light {
  color: var(--muted) !important; background: transparent !important; border-color: var(--line-strong) !important;
}

/* Divers */
dt { color: var(--muted); font-weight: 500; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.mono, .secret-box { font-family: var(--bs-font-monospace); }
.mono { color: var(--fg); }
.secret-box {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
  color: var(--fg);
  padding: .75rem 1rem;
  word-break: break-all;
}
.recovery-codes { columns: 2; font-family: var(--bs-font-monospace); font-size: 1.1rem; color: var(--fg); }
.qr { image-rendering: pixelated; width: 200px; height: 200px; }
textarea.mono { font-size: .875rem; }