/*
 * DCS Galaxy — composants communs (cartes, pastilles, boutons, barre de lecture de Pulsar). Thème sombre.
 * Couleurs de la plateforme : principale #FF793E, destructif #FF0000, avertissement #FACC15,
 * succès / opérationnel #4ADE80, info #60A5FA. La coque et les pages de la plateforme sont dans platform.css.
 */
:root {
    --app-bg: #0a0f15;
    --panel-bg: #0d141b;
    --card-bg: #111a23;
    --card-bg-hover: #16212c;
    --card-border: #1f2b38;
    --subtle-fill: #1a2531;
    --muted: #8d97a6;
    --text: #e6e9ee;
    --mono-bg: #0a0d11;
    --ok: #4ade80;
    --ok-fill: rgba(74, 222, 128, 0.12);
    --warn: #facc15;
    --warn-fill: rgba(250, 204, 21, 0.12);
    --bad: #ff0000;
    --bad-fill: rgba(255, 0, 0, 0.12);
    --idle: #6b7482;
    --idle-fill: rgba(141, 151, 166, 0.12);
    --accent: #ff793e;
    --info: #60a5fa;
    --info-fill: rgba(96, 165, 250, 0.12);
    --accent-fill: rgba(255, 121, 62, 0.12);
    --accent-text: #160a04;
    --mono: 'Cascadia Mono', Consolas, Menlo, monospace;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--app-bg);
    color: var(--text);
    font: 14px/1.45 'Segoe UI', system-ui, -apple-system, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.app { display: flex; flex-direction: column; min-height: 100vh; }

/* ------------------------------------------------------------------ en-tête */

.header {
    background: var(--panel-bg);
    border-bottom: 1px solid var(--card-border);
    padding: 14px 24px 0;
}
.header-row { display: flex; align-items: center; gap: 14px; }
.logo {
    width: 38px; height: 38px; border-radius: 9px;
    display: grid; place-items: center;
    background: var(--accent-fill); border: 1px solid var(--accent); color: var(--accent);
    flex: none;
}
.header h1 { font-size: 18px; font-weight: 600; margin: 0; }
.header .spacer { flex: 1; }
.header .who { color: var(--muted); font-size: 12px; text-align: right; }
.header .who a.active { color: var(--text); font-weight: 600; }

.nav { display: flex; gap: 22px; margin-top: 8px; overflow-x: auto; }
.nav button, .nav a {
    background: none; border: 0; padding: 8px 0 10px; cursor: pointer;
    color: var(--muted); font: inherit; font-size: 14px;
    border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none;
}
.nav button:hover, .nav a:hover { color: var(--text); text-decoration: none; }
.nav .active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

.main { flex: 1; padding: 20px; width: 100%; }
.main.narrow { max-width: 900px; }

/* ------------------------------------------------------------------ texte */

.h2 { font-size: 15px; font-weight: 600; margin: 0; }
.section {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    color: var(--muted); text-transform: uppercase; margin: 0 0 12px;
}
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12px; }
.key { color: var(--muted); font-size: 13px; padding: 3px 16px 3px 0; white-space: nowrap; vertical-align: top; }
.val { font-size: 13px; padding: 3px 0; word-break: break-word; }

/* ------------------------------------------------------------------ cartes */

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 16px 18px;
}
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }

.callout {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--accent-fill); border-left: 3px solid var(--accent);
    border-radius: 4px; padding: 12px 14px;
}
.callout.bad { background: var(--bad-fill); border-left-color: var(--bad); }
.callout.warn { background: var(--warn-fill); border-left-color: var(--warn); }
.callout .grow { flex: 1; }

.chip {
    display: inline-flex; flex-direction: column;
    background: var(--subtle-fill); border-radius: 6px; padding: 6px 10px; margin: 0 8px 8px 0;
}
.chip .label { font-size: 11px; color: var(--muted); }
.chip .value { font-size: 14px; font-weight: 600; }

.code-chip {
    font-family: var(--mono); font-size: 11px;
    background: var(--subtle-fill); border-radius: 4px; padding: 1px 6px; color: var(--muted);
}

/* ------------------------------------------------------------------ pastilles d'état */

.pill {
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: 12px; padding: 4px 12px 4px 10px; font-size: 12px; white-space: nowrap;
    background: var(--idle-fill);
}
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--idle); }
.pill.ok { background: var(--ok-fill); } .pill.ok::before { background: var(--ok); }
.pill.warn { background: var(--warn-fill); } .pill.warn::before { background: var(--warn); }
.pill.bad { background: var(--bad-fill); } .pill.bad::before { background: var(--bad); }

.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--idle); flex: none; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
.dot.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

/* ------------------------------------------------------------------ boutons et champs */

button.btn, a.btn, label.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 6px; padding: 6px 12px; cursor: pointer;
    font: inherit; font-size: 13px; line-height: 20px;
    background: var(--subtle-fill); color: var(--text); border: 1px solid var(--card-border);
    text-decoration: none;
}
.btn:hover:not(:disabled) { border-color: var(--muted); text-decoration: none; }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
.btn.accent { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
.btn.accent:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--accent); }
.btn.subtle { background: transparent; border-color: transparent; color: var(--muted); }
.btn.subtle:hover:not(:disabled) { color: var(--text); background: var(--subtle-fill); }
.btn.danger:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); }
.btn.big { padding: 10px 18px; font-size: 14px; }
.btn.icon { padding: 6px; }
.btn svg { width: 16px; height: 16px; flex: none; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field .field-label { color: var(--muted); font-size: 13px; }
input.input, select.input, textarea.input {
    width: 100%; font: inherit; color: var(--text);
    background: var(--mono-bg); border: 1px solid var(--card-border); border-radius: 6px; padding: 7px 10px;
}
input.input:focus, select.input:focus, textarea.input:focus { outline: none; border-color: var(--accent); }
input.code-input { font-family: var(--mono); font-size: 22px; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; }
.help { font-size: 12px; color: var(--muted); margin-top: 2px; }
.field-error { font-size: 12px; color: var(--bad); }
.rules { list-style: none; margin: -4px 0 14px; padding: 0; font-size: 12px; color: var(--muted); columns: 2; column-gap: 12px; }
.rules li { break-inside: avoid; margin-bottom: 2px; }
.rules li.ok { color: var(--ok); }

/* ------------------------------------------------------------------ onglets secondaires */

.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--card-border); margin-bottom: 16px; overflow-x: auto; }
.tabs button, .tabs a {
    background: none; border: 0; padding: 6px 0 9px; cursor: pointer; font: inherit;
    color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs button.active, .tabs a.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--text); }

/* ------------------------------------------------------------------ listes de tracks */

.list { display: flex; flex-direction: column; gap: 6px; }
.track {
    display: flex; align-items: center; gap: 10px;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px;
    padding: 6px 8px 6px 6px; min-height: 44px;
}
.track:hover { background: var(--card-bg-hover); }
.track.current { border-color: var(--accent); background: var(--accent-fill); }
.track.dragging { opacity: 0.4; }
.track.drop-target { border-color: var(--accent); border-style: dashed; }
.track .handle { cursor: grab; color: var(--muted); display: grid; place-items: center; width: 22px; }
.track .handle svg { width: 14px; height: 14px; }
.track .index { font-family: var(--mono); font-size: 12px; color: var(--muted); width: 22px; text-align: right; }
.track .name { flex: 1; min-width: 0; }
.track .name strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track .name .sub { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track .meta { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.track input.input { padding: 4px 8px; }

.empty { text-align: center; padding: 28px 12px; color: var(--muted); }
.empty .bubble {
    width: 56px; height: 56px; border-radius: 50%; background: var(--subtle-fill);
    display: grid; place-items: center; margin: 0 auto 12px; color: var(--muted);
}
.empty .bubble svg { width: 22px; height: 22px; }
.empty .h2 { color: var(--text); margin-bottom: 4px; }

/* ------------------------------------------------------------------ choix du mode serveur */

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.choice {
    text-align: left; cursor: pointer; font: inherit; color: var(--text);
    background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 8px; padding: 12px 14px;
}
.choice:hover:not(:disabled) { background: var(--card-bg-hover); }
.choice.selected { border-color: var(--accent); background: var(--accent-fill); }
.choice:disabled { opacity: 0.55; cursor: not-allowed; }

/* ------------------------------------------------------------------ journal */

.log {
    font-family: var(--mono); font-size: 12px;
    background: var(--mono-bg); border: 1px solid var(--card-border); border-radius: 8px;
    padding: 10px 12px; height: 55vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.log .line { display: flex; gap: 10px; }
.log .time { color: var(--muted); flex: none; }
.log .warning { color: var(--warn); }
.log .error { color: var(--bad); }

/* ------------------------------------------------------------------ barre de lecture */

.transport {
    position: sticky; bottom: 0;
    background: var(--panel-bg); border-top: 1px solid var(--card-border);
    padding: 16px 24px; display: flex; gap: 14px; align-items: center;
}
.transport .status { flex: 1; min-width: 0; }
.transport .title { font-size: 15px; font-weight: 600; }
.transport .percent { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.transport .detail { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress { height: 6px; border-radius: 3px; background: var(--subtle-fill); margin: 8px 0 6px; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); transition: width 0.4s ease; }
.transport .actions { display: flex; gap: 8px; }

/* ------------------------------------------------------------------ appareils */

.devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.device-card .name { font-size: 16px; font-weight: 600; }
.device-card table { margin: 10px 0 14px; border-collapse: collapse; }

/* ------------------------------------------------------------------ administration des comptes */

.account {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px;
    padding: 10px 12px;
}
.account .name { flex: 1; min-width: 220px; }
.account .name strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account .name .sub { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.auth { max-width: 400px; margin: 60px auto; }
.auth .logo { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 16px; }
.auth .logo svg { width: 30px; height: 30px; }
.center { text-align: center; }

.banner { padding: 10px 24px; background: var(--bad-fill); border-bottom: 1px solid var(--bad); font-size: 13px; }
.banner.warn { background: var(--warn-fill); border-bottom-color: var(--warn); }

.version { text-align: right; font-size: 11px; color: var(--muted); padding: 4px 16px 6px; }

dialog.modal {
    width: min(440px, calc(100vw - 32px));
    background: var(--card-bg); color: var(--text);
    border: 1px solid var(--card-border); border-radius: 10px; padding: 20px 22px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
dialog.modal::backdrop { background: rgba(0, 0, 0, 0.55); }

.spinner {
    width: 14px; height: 14px; border-radius: 50%; flex: none;
    border: 2px solid var(--card-border); border-top-color: var(--accent);
    animation: spin 0.8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Interrupteur (case à cocher role="switch") */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input {
    appearance: none; margin: 0; flex: none; cursor: inherit;
    width: 36px; height: 20px; border-radius: 10px; position: relative;
    background: var(--subtle-fill); border: 1px solid var(--card-border);
    transition: background 0.15s, border-color 0.15s;
}
.switch input::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; border-radius: 50%; background: var(--muted);
    transition: transform 0.15s, background 0.15s;
}
.switch input:checked { background: var(--accent); border-color: var(--accent); }
.switch input:checked::after { transform: translateX(16px); background: var(--accent-text); }
.switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled, .switch input:disabled + span { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 700px) {
    .header { padding: 12px 16px 0; }
    .main { padding: 16px; }
    .transport { flex-wrap: wrap; padding: 12px 16px; }
    .transport .actions { width: 100%; }
    .transport .actions .btn { flex: 1; }
}

/* Paires libellé / valeur (Mon compte) */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin-bottom: 12px; }

/* Texte juridique (CGU) */
.legal { line-height: 1.6; max-width: 72ch; }
.legal h1 { font-size: 20px; margin: 0 0 4px; }
.legal h2 { font-size: 14px; letter-spacing: 0.02em; margin: 22px 0 6px; }
.legal p { margin: 0 0 10px; }
.legal ul { margin: 0 0 10px; padding-left: 22px; }
.legal li { margin-bottom: 4px; }
.legal table { border-collapse: collapse; width: 100%; margin: 0 0 12px; font-size: 13px; }
.legal th, .legal td { border: 1px solid var(--card-border); padding: 6px 10px; text-align: left; vertical-align: top; }
.legal th { background: var(--subtle-fill); }
/* Logo Orionsys en haut à droite des textes juridiques ; fond blanc : logo noir lisible en thème sombre */
.legal-logo { float: right; width: 140px; height: auto; margin: 0 0 12px 16px; padding: 8px; background: #fff; border-radius: 8px; }
@media (max-width: 700px) { .legal-logo { width: 96px; } }

/* ------------------------------------------------------------------ fenêtres à contenu libre, son d'un track */

dialog.modal.wide { width: min(1100px, calc(100vw - 32px)); }
dialog.modal { position: relative; }
.modal-body { border: 0; padding: 0; margin: 0; min-width: 0; }
.modal-busy {
    position: absolute; inset: 0; border-radius: 10px; z-index: 2;
    background: color-mix(in srgb, var(--card-bg) 92%, transparent);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px;
}
.modal-busy .progress { width: 260px; max-width: 70%; height: 4px; border-radius: 2px; background: var(--card-border); margin: 0; }
/* Chargement : un segment qui parcourt la barre, tant qu'aucune progression n'est connue */
.progress.indeterminate { position: relative; }
.progress.indeterminate::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 2px; background: var(--accent);
    animation: progress-slide 1.2s ease-in-out infinite;
}
@keyframes progress-slide { from { left: -35%; } to { left: 100%; } }

.sound-timeline { display: block; width: 100%; height: 190px; border-radius: 6px; outline: none; touch-action: none; }
.sound-timeline:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.sound-scroll { width: 100%; margin: 4px 0 0; accent-color: var(--accent); }
.sound-controls { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 16px; }
.sound-controls label { display: inline-flex; align-items: center; gap: 8px; }
.sound-controls input.input.number { width: 110px; }
.sound-controls input[type='range'] { width: 150px; accent-color: var(--accent); }
.sound-controls .percent { font-family: var(--mono); font-size: 12px; color: var(--muted); width: 42px; }
.details-table { border-collapse: collapse; width: 100%; }
.modal-busy span { white-space: pre-line; }
.sound-controls input[type='checkbox'] { accent-color: var(--accent); }

/* ============================================================ Galaxy+ */
/* Action bloquée : grisée, cadenas ; au clic, une info-bulle mène à Galaxy+ */
.gp-locked-wrap { position: relative; display: inline-flex; }
.btn.gp-locked, .gp-locked { opacity: 0.55; cursor: pointer; }
.btn.gp-locked svg:last-child { width: 14px; height: 14px; }
.gp-tip {
    position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: max-content; max-width: min(320px, 80vw);
    display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--warn); border-radius: 10px;
    background: var(--card-bg); color: var(--text); font-size: 13px; line-height: 1.45; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.gp-tip.right { left: auto; right: 0; }
.gp-tip-link { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); font-weight: 600; }
.gp-tip-link svg { width: 14px; height: 14px; }
/* Contenu réservé à Galaxy+ et page provisoire */
/* Étiquette « Galaxy+ » à côté du titre d'une page réservée : fond orange, texte blanc, taille fixe quel que soit le titre */
.gp-tag {
    display: inline-block; margin-left: 12px; padding: 3px 10px; border-radius: 6px; vertical-align: middle;
    background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; line-height: 1.4; letter-spacing: 0.04em; white-space: nowrap;
}
.gp-reserved, .gp-soon { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 560px; margin: 12vh auto 0; padding: 0 16px; text-align: center; }
.gp-reserved h2 { margin: 0; font-size: 22px; }
.gp-reserved p { margin: 0 0 6px; }
.gp-reserved-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--warn-fill); color: var(--warn); }
.gp-reserved-icon svg { width: 26px; height: 26px; }
.gp-soon { margin-top: 8vh; }
.gp-soon .lead { font-size: 18px; color: var(--warn); font-weight: 600; margin: 0; }
.gp-perks { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.gp-perks li { display: flex; gap: 10px; align-items: flex-start; }
.gp-perks svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--warn); }
/* Bandeau de dépassement (admins de l'escadrille) : impossible à fermer */
.gp-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; background: #facc15; color: #1a1a1a; }
.gp-banner svg { width: 18px; height: 18px; flex: none; }
.gp-banner strong { font-weight: 700; }
.gp-banner .grow { flex: 1 1 260px; min-width: 0; }
.gp-banner .btn { border-color: #1a1a1a; color: #1a1a1a; background: transparent; }
.gp-banner .btn.accent { background: #1a1a1a; color: #facc15; }
/* Popup de dépassement */
.gp-overflows { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 12px; }
.gp-overflows li { padding: 10px 12px; border-left: 3px solid var(--warn); background: var(--warn-fill); border-radius: 6px; }
.gp-overflows strong { display: block; }
.gp-overflows span { color: var(--muted); font-size: 13px; }
/* Écran bloquant : choix de l'escadrille gardée */
.gp-choice { max-width: 640px; margin: 8vh auto 0; padding: 0 16px; }
.gp-choice-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.gp-choice-list label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--card-border); border-radius: 10px; cursor: pointer; }
.gp-choice-list label.checked { border-color: var(--accent); }
@media (max-width: 640px) {
    .gp-tip { left: auto; right: 0; }
    .gp-banner .btn { flex: 1 1 auto; justify-content: center; }
}
.gp-banner-slot { padding: 22px 28px 0; }
.gp-banner-slot:empty { display: none; }
.gp-banner-slot:not(:empty) + .page { padding-top: 0; }
.gp-banner-slot .gp-banner { margin: 0 0 16px; }
@media (max-width: 640px) { .gp-banner-slot { padding: 16px 16px 0; } }

/* Étiquette « Galaxy+ » des pages de Constellation aux données limitées : info-bulle au survol et au focus clavier */
.gp-limits { position: relative; cursor: help; outline: none; }
.gp-limits:focus-visible { box-shadow: 0 0 0 2px #fff; }
.gp-tip {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(340px, 80vw); padding: 12px 14px;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    color: var(--text); font-size: 13.5px; font-weight: 400; letter-spacing: normal; line-height: 1.45; text-align: left; white-space: normal;
}
.gp-limits:hover .gp-tip, .gp-limits:focus-visible .gp-tip { display: grid; gap: 6px; }
.gp-tip > strong { color: var(--accent); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.gp-tip-line small { display: block; color: var(--muted); font-size: 12.5px; }
.gp-tip > em { color: var(--muted); font-style: normal; border-top: 1px solid var(--card-border); padding-top: 6px; }

/*
 * Plateforme Galaxy : pages de connexion, coque (barre latérale, fil d'Ariane), hub, administration.
 * Les couleurs viennent des variables de galaxy.css.
 */

/* ------------------------------------------------------------------ marque */
.brand { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; }
.brand .brand-logo { height: 46px; width: auto; display: block; }
.brand .wordmark { color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.42em; padding-left: 0.42em; }
.brand.large .brand-logo { height: 92px; }
.brand.large .wordmark { font-size: 22px; }
.brand:hover { text-decoration: none; }
/* Logo d'un module : il prend la boîte de l'icône au trait qu'il remplace, à ses proportions */
.tool-logo { display: block; flex: none; object-fit: contain; }

/* ------------------------------------------------------------------ connexion / inscription */
.auth-split { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(380px, 1fr); min-height: 100vh; background: #0b1017; }
.auth-hero {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 68px 56px; overflow: hidden; color: #fff;
    background:
        linear-gradient(180deg, rgba(8, 12, 18, 0.55) 0%, rgba(8, 12, 18, 0.1) 38%, rgba(8, 12, 18, 0.82) 100%),
        radial-gradient(120% 70% at 78% 62%, rgba(255, 156, 60, 0.95) 0%, rgba(255, 121, 62, 0.55) 18%, rgba(120, 52, 28, 0.35) 42%, rgba(12, 18, 27, 0) 70%),
        linear-gradient(180deg, #1a2029 0%, #2b2426 36%, #5a3523 58%, #1a1512 76%, #0b0e13 100%);
    background-size: cover; background-position: center;
}
.auth-hero .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.auth-hero.has-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 18, 0.6) 0%, rgba(8, 12, 18, 0.15) 38%, rgba(8, 12, 18, 0.85) 100%); }
.auth-hero > :not(.backdrop) { position: relative; z-index: 1; }
.auth-hero .brand { align-self: flex-start; }
.auth-hero h1 { font-size: clamp(40px, 5.4vw, 78px); line-height: 1.04; font-weight: 800; margin: 0 0 18px; letter-spacing: -0.01em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.auth-hero .lead { font-size: clamp(16px, 1.7vw, 26px); line-height: 1.25; color: rgba(255, 255, 255, 0.86); margin: 0; max-width: 22em; }
.auth-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 0; }
.auth-tool { display: inline-flex; align-items: center; gap: 14px; padding: 0 28px; font-size: 18px; border-left: 1px solid rgba(255, 255, 255, 0.28); }
.auth-tool:first-child { padding-left: 0; border-left: 0; }
.auth-tool .mark { width: 44px; height: 44px; display: grid; place-items: center; color: var(--accent); flex: none; border: 2px solid var(--accent); border-radius: 50%; overflow: hidden; }
/* Le logo de l'application dans le rond ; une image d'outil sans logo de module le remplit */
.auth-tool .mark svg, .auth-tool .mark .tool-logo { width: 26px; height: 26px; object-fit: contain; }
.auth-tool .mark img:not(.tool-logo) { width: 100%; height: 100%; object-fit: cover; }
.auth-panel { position: relative; display: flex; flex-direction: column; padding: 34px clamp(24px, 5vw, 84px) 22px; background: #0d1219; }
.auth-back { align-self: flex-end; display: inline-flex; align-items: center; gap: 10px; color: #c9d1dc; font-size: 16px; }
.auth-back svg { width: 20px; height: 20px; }
.auth-top { display: flex; justify-content: flex-end; align-items: center; gap: 24px; flex-wrap: wrap; }
.auth-top .auth-back { align-self: auto; }
/* Choix de la langue (connexion, inscription ; « Mon compte » une fois connecté) */
.lang-switch { display: inline-flex; border: 1px solid #2a3442; border-radius: 8px; overflow: hidden; }
.lang-switch button { background: none; border: 0; color: #9aa6b5; font: inherit; font-size: 14px; padding: 6px 12px; cursor: pointer; }
.lang-switch button + button { border-left: 1px solid #2a3442; }
.lang-switch button.active { background: rgba(255, 121, 62, 0.14); color: #e6e9ee; }
.lang-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.auth-form { margin: auto 0; width: 100%; max-width: 520px; align-self: center; padding: 28px 0; }
.auth-tabs { display: inline-flex; border-bottom: 1px solid #2a3442; margin-bottom: 36px; }
.auth-tabs a { padding: 12px 28px; font-size: 20px; font-weight: 600; color: #8792a2; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.auth-tabs a:hover { text-decoration: none; color: #fff; }
.auth-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-form h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; margin: 0 0 6px; color: #fff; }
.auth-form .lead { font-size: 21px; color: #aeb7c4; margin: 0 0 34px; }
.auth-form label.lbl { display: block; font-size: 17px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.auth-input { position: relative; margin-bottom: 26px; }
.auth-input input {
    width: 100%; height: 56px; padding: 0 22px; font-size: 17px; color: #fff; background: #0f151d; border: 1px solid #333e4d; border-radius: 6px; outline: none;
}
.auth-input input::placeholder { color: #707b8b; }
.auth-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-fill); }
.auth-input .reveal { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; color: #c9d1dc; cursor: pointer; }
.auth-input .reveal svg { width: 24px; height: 24px; }
.auth-hint { font-size: 15px; color: #aeb7c4; margin: -14px 0 22px; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -4px 0 30px; font-size: 16px; color: #c9d1dc; }
.check { display: inline-flex; align-items: flex-start; gap: 16px; cursor: pointer; font-size: 16px; color: #c9d1dc; }
.check input { appearance: none; width: 28px; height: 28px; flex: none; margin: 0; border: 2px solid #5a6676; border-radius: 4px; background: transparent; cursor: pointer; display: grid; place-items: center; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ''; width: 7px; height: 13px; border: solid var(--accent-text); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); }
.check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check a, .auth-form a.orange, .auth-alt a { color: var(--accent); }
.check a { text-decoration: underline; }
.auth-submit {
    width: 100%; height: 60px; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-text); font-size: 20px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.auth-submit:hover:not(:disabled) { filter: brightness(1.07); }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-alt { text-align: center; font-size: 17px; color: #c9d1dc; margin: 28px 0 0; }
.auth-alt a { margin-left: 10px; }
.auth-foot { border-top: 1px solid #232d3a; padding-top: 22px; display: flex; justify-content: center; gap: 0; font-size: 14px; }
.auth-foot a { color: #c9d1dc; padding: 0 28px; border-left: 1px solid #5a6676; }
.auth-foot a:first-child { border-left: 0; }
.auth-rules { list-style: none; margin: -12px 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 13px; color: #8792a2; }
.auth-rules li::before { content: '○ '; }
.auth-rules li.ok { color: var(--ok); }
.auth-rules li.ok::before { content: '● '; }
.auth-form .callout { margin-bottom: 22px; }

@media (max-width: 980px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-hero { min-height: 300px; padding: 28px 24px; gap: 28px; }
    .auth-tool { font-size: 15px; padding: 0 16px; }
    .auth-form { padding: 20px 0; }
}

/* ------------------------------------------------------------------ coque */
.shell { display: grid; grid-template-columns: 242px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--panel-bg); border-right: 1px solid var(--card-border); overflow-y: auto; }
.sidebar .brand { padding: 24px 0 18px; align-self: center; }
.sidebar .role { align-self: center; margin: -6px 0 16px; padding: 4px 18px; border: 1px solid var(--accent); border-radius: 5px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; }
.side-title { padding: 14px 28px 8px; font-size: 12px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.side-sep { height: 1px; background: var(--card-border); margin: 12px 14px; }
.side-link { display: flex; align-items: center; gap: 18px; margin: 2px 8px 2px 0; padding: 13px 20px 13px 26px; border-left: 4px solid transparent; border-radius: 0 6px 6px 0; color: var(--text); font-size: 15px; }
.side-link:hover { text-decoration: none; background: var(--subtle-fill); }
.side-link.active { color: var(--accent); background: var(--accent-fill); border-left-color: var(--accent); }
.side-link.off { color: var(--muted); }
.side-link svg, .side-link .tool-logo { width: 26px; height: 26px; flex: none; }
.side-link.off .tool-logo { filter: grayscale(1); opacity: 0.55; }
.side-link .tag { margin-left: auto; font-size: 11px; color: var(--muted); }
.side-spacer { flex: 1; min-height: 16px; }
.side-user { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--card-border); color: var(--text); }
.side-user:hover { text-decoration: none; background: var(--subtle-fill); }
.side-user .who { min-width: 0; flex: 1; }
.side-user .who strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .who span { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user svg { width: 18px; height: 18px; color: var(--muted); }
.avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #2a3442; color: #fff; font-weight: 700; font-size: 16px; }
.avatar.accent { background: #7a5a22; border: 2px solid var(--accent); }
.avatar.big { width: 74px; height: 74px; font-size: 24px; }
/* Avatar Galaxy du pilote : sa photo remplace ses initiales */
.avatar.photo { overflow: hidden; background: #1c2633; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.content { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 16px 28px; border-bottom: 1px solid var(--card-border); font-size: 15px; color: var(--text); }
.topbar .crumb-sep { color: var(--muted); }
.topbar .spacer { flex: 1; }
.page { padding: 22px 28px 40px; width: 100%; }
.page-title { font-size: clamp(28px, 2.8vw, 42px); font-weight: 800; margin: 0; line-height: 1.15; }
.page-lead { font-size: 19px; color: #b7c0cd; letter-spacing: 0.03em; margin: 2px 0 16px; }
.shell .main { padding: 22px 28px 40px; }

@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .sidebar .brand { padding: 12px 16px; }
    .sidebar .brand .brand-logo { height: 32px; }
    .side-title, .side-sep, .side-spacer { display: none; }
    .side-link { margin: 2px; padding: 8px 12px; border-left: 0; border-radius: 6px; gap: 8px; }
    .side-link svg, .side-link .tool-logo { width: 20px; height: 20px; }
    .side-user { border-top: 0; margin-left: auto; }
}

/* ------------------------------------------------------------------ états, badges */
.state { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 6px; font-size: 14px; background: var(--subtle-fill); border: 1px solid var(--card-border); white-space: nowrap; }
.state::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #9aa7c7; flex: none; }
.state.operational { background: var(--ok-fill); border-color: rgba(74, 222, 128, 0.45); }
.state.operational::before { background: var(--ok); }
.state.maintenance { background: var(--warn-fill); border-color: rgba(250, 204, 21, 0.45); }
.state.maintenance::before { background: var(--warn); }
.state.plain { background: none; border: 0; padding: 0; }
.state.plain.operational { color: var(--ok); }
.state.plain.maintenance { color: var(--warn); }
.state.plain.upcoming { color: #b7c0cd; }
.dot { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: #c9d1dc; white-space: nowrap; }
.dot::before { flex: none; }
/* Pastille seule (sans libellé) : elle est elle-même le point, coloré par galaxy.css */
.dot:empty::before { content: none; }
.dot::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--idle); }
.dot.success::before { background: var(--ok); }
.dot.warning::before { background: var(--warn); }
.dot.info::before { background: var(--info); }
.banner-info { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 18px; border: 1px solid rgba(96, 165, 250, 0.45); border-left: 4px solid var(--info); border-radius: 6px; background: var(--info-fill); }
.banner-info svg { width: 22px; height: 22px; color: var(--info); flex: none; }
.banner-info .grow { flex: 1; }
.btn.outline { background: transparent; border-color: var(--accent); color: var(--accent); font-weight: 600; }
.btn.destructive { background: transparent; border-color: var(--bad); color: var(--bad); font-weight: 600; }
.btn.destructive svg { color: var(--bad); }
.btn.destructive:hover:not(:disabled) { background: var(--bad-fill); border-color: var(--bad); }
.text-bad { color: var(--bad); }

/* ------------------------------------------------------------------ hub */
/* Hauteur de la bannière, reprise par les visuels des cartes : celle de la photo (2172 × 484) sur 63 % de la largeur. */
.hub { container-type: inline-size; --hub-banner-h: max(130px, calc(100cqw * 304.92 / 2172)); }
.hub-banner {
    /* La photo (2172 × 484) occupe 63 % de la largeur : la bannière a exactement sa hauteur. */
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
    height: var(--hub-banner-h); padding: 20px 32px; margin-bottom: 18px;
    border: 1px solid var(--card-border); border-radius: 6px; background: #0b0e13;
}
.hub-banner::before {
    /* Bord gauche de la photo en fondu : transparent, puis de plus en plus visible. */
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 63%;
    background: url(/build/images/hub-banner.f5968d5b.png) right center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
.hub-banner > * { position: relative; }
.hub-banner .over { color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; }
.hub-banner .line { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; margin-top: 6px; }
.hub-banner .line::after { content: ''; display: block; width: 50px; height: 4px; background: var(--accent); margin-top: 16px; }
.hub-h { font-size: clamp(22px, 2vw, 28px); font-weight: 700; margin: 0 0 12px; }
.hub-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.hub-card { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px; overflow: hidden; min-width: 0; }
.hub-card .visual { position: relative; height: var(--hub-banner-h, 150px); background: linear-gradient(120deg, #18222e 0%, #2a2623 55%, #4a2e22 100%); background-size: cover; background-position: center; }
.hub-card .visual.has-image { background: none; }
.hub-card a.visual { display: block; }
.hub-card .visual > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-card .visual .glyph { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); color: var(--accent); }
.hub-card .visual .glyph svg, .hub-card .visual .glyph .tool-logo { width: 76px; height: 76px; }
.hub-card .visual .glyph .tool-logo { object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
.hub-card .body { display: flex; align-items: flex-end; gap: 16px; padding: 12px 24px 16px; flex: 1; }
.hub-card .body .text { flex: 1; min-width: 0; }
.hub-card h3 { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.hub-card p { margin: 0; color: #b7c0cd; font-size: 15px; }
.hub-card .meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.hub-card .note { color: var(--muted); font-size: 13px; }
.hub-card .tagline { display: inline-block; align-self: flex-start; margin: 0 0 6px; padding: 4px 14px; border-radius: 6px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.hub-card.locked .visual, .hub-card.locked h3, .hub-card.locked p { filter: grayscale(1); opacity: 0.55; }
.hub-open { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 6px; font-size: 16px; font-weight: 600; white-space: nowrap; background: var(--accent); color: var(--accent-text); border: 2px solid var(--accent); }
.hub-open:hover { text-decoration: none; filter: brightness(1.07); }
.hub-open.outline { background: transparent; color: var(--accent); }
.hub-open svg { width: 22px; height: 22px; }
.hub-soon { padding: 9px 16px; border-radius: 6px; background: var(--subtle-fill); font-size: 15px; white-space: nowrap; }
.hub-activity { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px; }
.hub-activity h3 { font-size: 22px; font-weight: 700; margin: 0; padding: 14px 24px; }
.hub-activity .item { display: flex; align-items: center; gap: 22px; padding: 12px 24px; border-top: 1px solid var(--card-border); }
.hub-activity .item > svg, .hub-activity .item > .tool-logo { width: 32px; height: 32px; flex: none; }
.hub-activity .item .text { flex: 1; min-width: 0; }
.hub-activity .item strong { display: block; font-size: 16px; }
.hub-activity .item span { color: var(--muted); font-size: 14px; }
.hub-activity .go { display: inline-flex; align-items: center; gap: 12px; color: var(--accent); font-weight: 600; font-size: 15px; white-space: nowrap; }
.hub-activity .go.off { color: var(--muted); cursor: not-allowed; }
.hub-activity .go svg { width: 22px; height: 22px; }

@media (max-width: 1100px) {
    .hub-cards { grid-template-columns: 1fr; }
    .hub-card .body { flex-wrap: wrap; }
}

/* ------------------------------------------------------------------ administration */
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, 1fr); gap: 24px; align-items: start; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.toolbar { display: flex; gap: 16px; margin-bottom: 18px; }
.search { position: relative; flex: 1; }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: #c9d1dc; }
.search input, .select, .panel input[type='text'], .panel textarea, .panel select {
    width: 100%; height: 46px; padding: 0 16px; font-size: 16px; color: var(--text); background: var(--panel-bg); border: 1px solid var(--card-border); border-radius: 5px; outline: none; font-family: inherit;
}
.search input { padding-left: 52px; }
.select { width: auto; min-width: 220px; }
.panel textarea { height: 76px; padding: 12px 16px; resize: vertical; }
.search input:focus, .select:focus, .panel input:focus, .panel textarea:focus, .panel select:focus { border-color: var(--accent); }
.table { border: 1px solid var(--card-border); border-radius: 5px; background: var(--panel-bg); overflow: hidden; }
.table .thead, .table .trow { display: grid; align-items: center; gap: 16px; padding: 0 18px; }
.table.tools .thead, .table.tools .trow { grid-template-columns: minmax(0, 1fr) 170px 56px; }
.table.users .thead, .table.users .trow { grid-template-columns: minmax(0, 1fr) 130px 84px; }
.table .thead { height: 48px; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: #c9d1dc; }
.table .trow { min-height: 86px; border-top: 1px solid var(--card-border); cursor: pointer; background: transparent; width: 100%; text-align: left; color: inherit; font: inherit; border-left: 0; border-right: 0; border-bottom: 0; }
.table .trow:hover { background: var(--card-bg-hover); }
.table .trow.selected { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 5px; background: var(--accent-fill); }
.table .trow.dragging { opacity: 0.4; }
.table .trow.drop { box-shadow: inset 0 3px 0 var(--accent); }
.table .trow.inactive .ident strong { color: var(--muted); }
.ident { display: flex; align-items: center; gap: 22px; min-width: 0; }
.ident .thumb { width: 172px; height: 66px; flex: none; border-radius: 4px; object-fit: cover; background: linear-gradient(120deg, #18222e, #4a2e22); }
.ident .names { min-width: 0; }
.ident strong { display: block; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ident .names span { display: block; color: #b7c0cd; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--card-border); border-radius: 5px; background: var(--card-bg); color: var(--text); cursor: pointer; }
.icon-btn:hover { border-color: var(--muted); }
.icon-btn svg { width: 20px; height: 20px; }
.table-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 4px; font-size: 16px; color: #c9d1dc; }
.pager { display: flex; gap: 12px; }
.pager button { width: 44px; height: 42px; border: 1px solid var(--card-border); border-radius: 4px; background: var(--panel-bg); color: var(--text); font-size: 15px; cursor: pointer; }
.pager button.current { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.hint { display: flex; align-items: center; gap: 30px; padding: 26px 30px; border: 1px solid var(--card-border); border-radius: 5px; background: var(--panel-bg); }
.hint svg { width: 54px; height: 54px; flex: none; }
.hint strong { display: block; font-size: 17px; margin-bottom: 6px; }
.hint p { margin: 0; color: #c9d1dc; font-size: 15px; line-height: 1.5; }
.panel { border: 1px solid var(--card-border); border-radius: 5px; background: var(--panel-bg); }
.panel-head { display: flex; align-items: flex-start; gap: 22px; padding: 18px 26px; border-bottom: 1px solid var(--card-border); }
.panel-head h3 { font-size: 26px; font-weight: 700; margin: 0; }
.panel-head p { margin: 2px 0 0; color: #b7c0cd; font-size: 17px; }
.panel-head .close { margin-left: auto; background: none; border: 0; color: var(--text); cursor: pointer; padding: 6px; }
.panel-head .close svg { width: 22px; height: 22px; }
.panel-body { padding: 18px 26px 22px; }
.panel .lbl { display: block; font-size: 16px; font-weight: 600; margin: 14px 0 8px; }
.panel .lbl small { font-weight: 400; color: var(--muted); font-size: 14px; }
.panel .help { font-size: 13px; color: #b7c0cd; margin: 6px 0 0; }
.panel .translation { margin: 18px 0 0; padding: 4px 16px 16px; border: 1px solid var(--card-border); border-radius: 5px; min-width: 0; }
.panel .translation legend { padding: 0 6px; font-size: 16px; font-weight: 600; }
.panel .translation legend small { font-weight: 400; color: var(--muted); font-size: 14px; }
.panel .translation > .help { margin: 0 0 4px; }
.panel .preview { width: 100%; height: 108px; border-radius: 4px; object-fit: cover; display: block; margin-bottom: 12px; background: linear-gradient(120deg, #18222e, #4a2e22); }
.panel .file-btn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 40px; border: 1px solid #5a6676; border-radius: 5px; cursor: pointer; font-size: 15px; }
.panel .file-btn svg { width: 20px; height: 20px; }
.panel .file-btn input { display: none; }
.panel.login-image { margin-top: 20px; }
.panel.login-image .preview { height: 180px; }
.panel.login-image .buttons { display: flex; gap: 12px; }
.panel.login-image .buttons .file-btn { flex: 1; }
.panel-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.panel-actions .btn { padding: 11px 22px; font-size: 16px; }
.facts { display: grid; grid-template-columns: minmax(150px, 0.8fr) 1.2fr; gap: 10px 16px; font-size: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--card-border); }
.facts span:nth-child(odd) { color: #c9d1dc; }
.access-row { display: flex; align-items: center; gap: 18px; padding: 10px 16px; border: 1px solid var(--card-border); border-radius: 5px; margin-top: 6px; }
.access-row .names { flex: 1; min-width: 0; }
.access-row strong { display: block; font-size: 16px; }
.access-row .verdict { width: 104px; font-size: 15px; }
.switch.big input { width: 58px; height: 30px; border-radius: 15px; }
.switch.big input::after { width: 24px; height: 24px; }
.switch.big input:checked::after { transform: translateX(28px); }
.note-box { display: flex; align-items: center; gap: 16px; padding: 12px 16px; margin-top: 14px; border: 1px solid var(--card-border); border-radius: 5px; font-size: 13px; color: #c9d1dc; }
.note-box svg { width: 22px; height: 22px; flex: none; }
.danger-zone { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--card-border); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

@media (max-width: 1200px) {
    .admin-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ notifications (la cloche) */
.bell { position: relative; }
.bell > .btn { position: relative; padding: 8px; color: var(--text); }
.bell > .btn svg { width: 22px; height: 22px; }
.bell .count { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 700; line-height: 1; }
.bell-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 25; width: min(400px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
.bell-panel .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--card-border); font-size: 16px; color: var(--text); }
.bell-panel .head button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 13.5px; cursor: pointer; }
.bell-panel .none { margin: 0; padding: 22px 16px; color: var(--muted); font-size: 15px; }
.bell-panel ul { list-style: none; margin: 0; padding: 0; }
.bell-panel li + li { border-top: 1px solid var(--card-border); }
.bell-panel li button { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 12px 16px 12px 20px; border: 0; border-left: 3px solid transparent; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bell-panel li button:hover { background: var(--card-bg-hover); }
.bell-panel li button.unread { border-left-color: var(--accent); background: var(--accent-fill); }
.bell-panel li strong { font-size: 15px; }
.bell-panel li span { font-size: 14px; color: #c9d1dc; }
.bell-panel li small { font-size: 12.5px; color: var(--muted); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Administration → Exercices Orbit */
.table.exercises .thead, .table.exercises .trow { grid-template-columns: 28px 64px minmax(0, 1fr) 120px 56px; }
.table.exercises .trow { min-height: 70px; }
.table.exercises .grip { display: grid; place-items: center; color: #8d97a6; cursor: grab; }
.table.exercises .grip svg { width: 22px; height: 22px; stroke-width: 2.6; }
.table.exercises .grip.off { opacity: 0.3; cursor: default; }
.table.exercises .order { font-size: 17px; font-weight: 700; }
.table.exercises .ident { display: flex; align-items: center; gap: 16px; min-width: 0; }
.table.exercises .ident > svg { width: 28px; height: 28px; flex: none; color: #c9d1dc; }
.table.exercises .names { min-width: 0; }
.table.exercises .names strong { display: block; font-size: 17px; }
.table.exercises .names span { display: block; font-size: 13.5px; color: #b7c0cd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table.exercises .status { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14.5px; }
.table.exercises .status::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--idle); }
.table.exercises .status.on { border-color: rgba(74, 222, 128, 0.4); background: var(--ok-fill); color: var(--ok); }
.table.exercises .status.on::before { background: var(--ok); }
.panel input[type='number'] { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--card-border); border-radius: 5px; background: var(--panel-bg); color: var(--text); font: inherit; font-size: 16px; outline: none; }
.panel input[type='number']:focus { border-color: var(--accent); }
.icon-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-choices button { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--card-border); border-radius: 5px; background: var(--panel-bg); color: #c9d1dc; cursor: pointer; }
.icon-choices button svg { width: 26px; height: 26px; }
.icon-choices button:hover { border-color: var(--muted); }
.icon-choices button.selected { border-color: var(--accent); background: var(--accent-fill); color: var(--accent); }
.icon-choices button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.status-switch { align-items: flex-start; gap: 22px; }
.status-switch strong { display: block; font-size: 16px; }
.status-switch small { display: block; font-size: 14px; color: #b7c0cd; }
.panel .usage { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--card-border); font-size: 14.5px; color: #c9d1dc; }
.panel .usage svg { width: 24px; height: 24px; flex: none; }

/* État du Connector : étiquette de la barre du haut (toutes pages) et avertissement des outils */
.connector { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px; border: 1px solid var(--card-border); border-radius: 999px; background: var(--panel-bg); font-size: 14px; white-space: nowrap; cursor: default; outline: none; }
.connector i, .connector-tip .machine i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #f59e0b; }
.connector.ok i, .connector-tip .machine.ok i { background: var(--ok); }
.connector.dcs_stopped i, .connector-tip .machine.dcs_stopped i { background: #dfe4ea; }
.connector.offline { border-color: rgba(245, 158, 11, 0.5); }
.connector:focus-visible { border-color: var(--accent); }
.connector-tip { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; min-width: 280px; padding: 8px 14px; border: 1px solid #3a4656; border-radius: 6px; background: #0a0f15; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); white-space: normal; text-align: left; }
.connector:hover .connector-tip, .connector:focus .connector-tip, .connector:focus-within .connector-tip { display: block; }
.connector-tip .none { color: #c9d1dc; }
.connector-tip .machine { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--card-border); }
.connector-tip .machine:first-child { border-top: 0; }
.connector-tip .machine strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connector-tip .machine span { color: #c9d1dc; white-space: nowrap; }
.connector-tip .machine small { grid-column: 2 / -1; font-size: 12.5px; color: var(--muted); }
.snackbar { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 14px; max-width: min(720px, calc(100vw - 32px)); padding: 12px 12px 12px 18px; border: 1px solid rgba(245, 158, 11, 0.6); border-radius: 8px; background: #1b1408; color: var(--text); font-size: 15px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
.snackbar > svg { width: 24px; height: 24px; flex: none; color: #f59e0b; }
.snackbar button { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
.snackbar button svg { width: 16px; height: 16px; }
.snackbar button:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 820px) {
    .connector { font-size: 0; gap: 0; padding: 9px; }
    .connector-tip { font-size: 14px; }
}

/* Administration : bases d'Orbit, sorties rejetées */
.table.bases .thead, .table.bases .trow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 190px 130px; }
.table.bases .trow { min-height: 56px; }
.table.bases .mono, .table.rejected .mono { font-family: var(--mono); font-size: 13.5px; color: #b7c0cd; }
.table.rejected .thead, .table.rejected .trow { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 2fr) 230px; }
.table.rejected .trow { min-height: 70px; }
.table.rejected .names { min-width: 0; }
.table.rejected .names strong, .table.rejected .names span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table.rejected .names span { font-size: 13.5px; color: #b7c0cd; }
.table.bases .status, .table.rejected .status { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14.5px; }
.table.bases .status.on { border-color: rgba(96, 165, 250, 0.4); background: var(--info-fill); color: var(--info); }
.table.rejected .status.off { border-color: rgba(250, 204, 21, 0.4); background: var(--warn-fill); color: var(--warn); }

/* Administration : codes bêta */
.hint.beta-registration { margin-bottom: 24px; gap: 24px; flex-wrap: wrap; }
.hint.beta-registration .grow { flex: 1; min-width: 240px; }
.table.betacodes .thead, .table.betacodes .trow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 110px 130px; }
.table.betacodes .trow { min-height: 56px; }
.table.betacodes .mono, .beta-code-show .mono { font-family: var(--mono); letter-spacing: 0.04em; }
.table.betacodes .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table.betacodes .status { display: inline-flex; align-items: center; padding: 5px 14px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14.5px; }
.table.betacodes .status.on { border-color: rgba(74, 222, 128, 0.4); background: var(--ok-fill); color: var(--ok); }
.table.betacodes .status.off { color: var(--muted); }
#beta-code.mono { font-family: var(--mono); text-transform: uppercase; }
.beta-code-show { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.beta-code-show .mono { font-size: 22px; font-weight: 700; color: #fff; }
.beta-code-show .copied { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-size: 14px; }
.beta-code-show .copied svg { width: 16px; height: 16px; }
.beta-uses { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--card-border); }
.beta-uses h4 { margin: 0 0 10px; font-size: 15px; }
.beta-uses ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
.beta-uses li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.beta-uses li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-uses .small { font-size: 13px; margin: 0; }
@media (max-width: 640px) {
    .table.betacodes .thead, .table.betacodes .trow { grid-template-columns: minmax(0, 1fr) 70px 100px; }
    .table.betacodes .thead > :nth-child(2), .table.betacodes .trow > :nth-child(2) { display: none; }
}

/* Pulsar — statistiques des serveurs (sessions des pilotes) */
.page.pstats { display: flex; flex-direction: column; gap: 14px; }
.page.pstats .page-lead { margin-bottom: 0; }
.pstats-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pstats-filters label { position: relative; display: block; }
.pstats-filters label > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; pointer-events: none; }
.pstats-filters select, .pstats-filters input { width: 100%; height: 50px; padding: 0 14px 0 54px; font: inherit; font-size: 16px; color: var(--text); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px; outline: none; color-scheme: dark; }
.pstats-filters select:focus, .pstats-filters input:focus { border-color: var(--accent); }
.pstats-filters label.date > span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #b7c0cd; pointer-events: none; }
.pstats-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pstats-tile { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 14px 18px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); min-width: 0; }
.pstats-tile svg { width: 40px; height: 40px; flex: none; color: var(--accent); stroke-width: 1.5; }
.pstats-tile strong { display: block; font-size: clamp(22px, 2vw, 30px); font-weight: 800; line-height: 1.1; white-space: nowrap; }
.pstats-tile span { display: block; font-size: 14px; color: #c9d1dc; margin-top: 3px; }
.pstats-panel { border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); overflow: hidden; }
.pstats-panel h2 { margin: 0; padding: 16px 18px 8px; font-size: 18px; font-weight: 700; }
.pstats-panel h2 small { margin-left: 10px; font-size: 14px; font-weight: 400; color: #b7c0cd; }
.pstats-table .thead, .pstats-table .trow { display: grid; grid-template-columns: minmax(0, 2fr) 130px 140px minmax(150px, 1fr) minmax(170px, 1fr); align-items: center; gap: 16px; padding: 0 18px; }
.pstats-table .thead { height: 46px; }
.pstats-table .thead button { all: unset; cursor: pointer; font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #c9d1dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstats-table .thead button:hover, .pstats-table .thead button.sorted { color: var(--text); }
.pstats-table .thead button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.pstats-table .trow { min-height: 62px; border-top: 1px solid var(--card-border); font-size: 16px; }
.pstats-table .trow.none { display: block; padding: 20px 18px; min-height: 0; }
.pstats-table .who { min-width: 0; }
.pstats-table .who strong, .pstats-table .who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstats-table .who small { font-size: 13px; color: #b7c0cd; }
.pstats-table .who .mono { font-size: 12.5px; }
.pstats-explain { display: flex; gap: 14px; padding: 14px 18px; border: 1px solid var(--card-border); border-radius: 6px; color: #b7c0cd; font-size: 14.5px; }
.pstats-explain svg { width: 24px; height: 24px; flex: none; color: var(--info); }
.pstats-explain p { margin: 0 0 4px; }
@media (max-width: 1250px) {
    .pstats-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pstats-table { overflow-x: auto; }
    .pstats-table .thead, .pstats-table .trow { min-width: 860px; }
}

/* Hub : étiquette d'un outil en aperçu (connecteur manquant en rouge, compte DCS à lier en jaune), cliquable */
.hub-card .meta .hub-tag { font-weight: 600; text-decoration: none; cursor: pointer; }
.hub-card .meta .hub-tag.bad { color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.hub-card .meta .hub-tag.warn { color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.hub-card .meta .hub-tag:hover { filter: brightness(1.15); }

/*
 * Orbit (carnet de vol) : barre latérale du module, vue d'ensemble, mes vols, mes appareils, statistiques.
 * Les couleurs viennent des variables de galaxy.css (couleur principale : --accent, #ff793e).
 */

/* ------------------------------------------------------------------ coque */
.orbit-brand { display: flex; align-items: center; gap: 18px; padding: 14px 26px 22px; }
.orbit-brand svg, .orbit-brand .tool-logo { width: 42px; height: 42px; color: var(--accent); flex: none; }
.orbit-brand strong { display: block; font-size: 21px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.1; }
.orbit-brand span { color: #c9d1dc; font-size: 16px; }
.orbit-sync { display: inline-flex; align-items: center; gap: 12px; font-size: 14.5px; color: #e6e9ee; white-space: nowrap; }
.orbit-sync svg { width: 26px; height: 26px; }
.topbar-avatar .avatar { width: 38px; height: 38px; font-size: 14px; border: 1px solid #3a4656; }
.topbar-avatar:hover { text-decoration: none; }

.page.orbit { display: flex; flex-direction: column; gap: 14px; padding-bottom: 28px; }
.page.orbit .page-title { margin-bottom: -12px; }
.page.orbit .page-lead { margin-bottom: 0; }
.orbit i { font-style: normal; color: var(--muted); margin: 0 6px; }
.orbit-none { margin: 0; padding: 26px; border: 1px dashed var(--card-border); border-radius: 6px; color: #b7c0cd; font-size: 15px; }

/* ------------------------------------------------------------------ drapeau, photo d'appareil */
.orbit-flag { width: 27px; height: 18px; border-radius: 2px; vertical-align: -3px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.orbit-flag.code { display: inline-grid; place-items: center; width: auto; min-width: 27px; padding: 0 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; background: var(--subtle-fill); color: #c9d1dc; }
.orbit-photo { position: relative; display: block; overflow: hidden; background: #0b0e13 url(/build/images/hub-banner.f5968d5b.png) 78% center / cover no-repeat; }
.orbit-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------------ profil (vue d'ensemble) */
.orbit-profile {
    position: relative; display: flex; align-items: center; gap: 26px; min-height: 142px; padding: 24px 28px; overflow: hidden;
    border: 1px solid var(--card-border); border-radius: 6px; background: #0d141b;
}
.orbit-profile::before {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 66%;
    background: url(/build/images/hub-banner.f5968d5b.png) right center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.orbit-profile > * { position: relative; }
.orbit-profile .avatar.big { width: 82px; height: 82px; font-size: 28px; background: #1c2633; border: 1px solid #3a4656; }
.orbit-profile strong { display: block; font-size: 30px; font-weight: 800; line-height: 1.2; }
.orbit-profile > div span, .orbit-profile > div a { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 18px; color: #dfe4ea; }
.orbit-squadrons { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 32px; }
.orbit-squadrons p { margin: 0; font-size: 17px; color: #dfe4ea; }
.orbit-squadrons small { display: block; margin-top: 2px; font-size: 14px; color: #c9d1dc; }
.orbit-profile .orbit-squadrons span { display: inline; margin: 0; font-size: inherit; color: inherit; }
.orbit-squadrons .cst-rank { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.orbit-squadrons .cst-rank img { width: 24px; height: 24px; object-fit: contain; }

/* ------------------------------------------------------------------ totaux */
.orbit-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.orbit-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orbit-tile { display: flex; align-items: center; gap: 26px; min-height: 122px; padding: 18px 24px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); min-width: 0; }
.orbit-tile svg { width: 58px; height: 58px; flex: none; color: var(--accent); stroke-width: 1.5; }
.orbit-tile strong { display: block; font-size: clamp(26px, 2.5vw, 40px); font-weight: 800; line-height: 1.1; white-space: nowrap; }
.orbit-tile span { display: block; font-size: 17px; color: #c9d1dc; margin-top: 4px; }
.orbit-tile small { display: block; font-size: 15px; color: #b7c0cd; }
.orbit-tiles.compact { gap: 10px; }
.orbit-tiles.compact .orbit-tile, .orbit-tiles.two .orbit-tile { min-height: 88px; padding: 12px 14px; gap: 14px; }
.orbit-tiles.compact .orbit-tile svg, .orbit-tiles.two .orbit-tile svg { width: 42px; height: 42px; }
.orbit-tiles.compact .orbit-tile strong, .orbit-tiles.two .orbit-tile strong { font-size: clamp(20px, 1.8vw, 27px); }
.orbit-tiles.compact .orbit-tile span, .orbit-tiles.two .orbit-tile span { font-size: 13.5px; margin-top: 2px; }
.orbit-tiles.compact .orbit-tile { gap: 10px; padding: 12px 10px; }
.orbit-tiles.compact .orbit-tile svg { width: 36px; height: 36px; }
.orbit-tiles.compact .orbit-tile span { font-size: 12.5px; white-space: nowrap; }

/* ------------------------------------------------------------------ titres de section */
.orbit-section { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 8px; }
.orbit-section h2 { margin: 0; font-size: 25px; font-weight: 800; }
.orbit-section a { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.orbit-section a svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ cartes d'appareil */
.orbit-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.orbit-card { display: flex; flex-direction: column; padding: 0; text-align: left; font: inherit; color: var(--text); cursor: pointer; overflow: hidden; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); }
.orbit-card:hover { text-decoration: none; border-color: #3a4656; }
.orbit-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.orbit-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.orbit-card .orbit-photo { height: clamp(132px, 12.6vw, 180px); }
.orbit-card .caption { display: block; padding: 10px 18px 12px; }
.orbit-card strong { display: block; font-size: 21px; font-weight: 800; }
.orbit-card .caption span { font-size: 17.5px; color: #dfe4ea; }
/* Carrousel (« Mes appareils ») : trois cartes visibles, le reste défile ; le padding laisse voir le contour de focus */
.orbit-carousel { position: relative; }
.orbit-carousel .orbit-cards { position: relative; display: flex; gap: 16px; padding: 4px; margin: -4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 4px; scrollbar-width: none; }
.orbit-carousel .orbit-cards::-webkit-scrollbar { display: none; }
.orbit-carousel .orbit-card { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; }
.orbit-carousel > .btn { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); padding: 10px; border-radius: 50%; background: var(--card-bg); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.orbit-carousel > .btn svg { width: 22px; height: 22px; }
.orbit-carousel > .prev { left: -14px; }
.orbit-carousel > .next { right: -14px; }

/* ------------------------------------------------------------------ tableaux */
.orbit-table { border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); overflow: hidden; }
.orbit-table .thead, .orbit-table .trow { display: grid; align-items: center; gap: 14px; padding: 0 22px; width: 100%; }
.orbit-table .thead { height: 40px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #dfe4ea; }
.orbit-table .trow { min-height: 50px; border: 0; border-top: 1px solid var(--card-border); background: transparent; color: inherit; font: inherit; font-size: 15px; text-align: left; }
.orbit-table.last .thead, .orbit-table.last .trow { grid-template-columns: 150px minmax(0, 2fr) minmax(0, 1.2fr) 150px minmax(0, 1.2fr) 116px; }
.orbit-table.aircraft .thead, .orbit-table.aircraft .trow { grid-template-columns: 160px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) 116px; }
.orbit-table.aircraft .trow { min-height: 36px; }
.orbit-table.flights .thead, .orbit-table.flights .trow { grid-template-columns: 128px minmax(0, 1fr) 112px minmax(140px, 0.55fr) 40px; }
.orbit-table.flights .thead { height: 50px; font-size: 13.5px; }
.orbit-table.flights .trow { min-height: 80px; font-size: 17px; cursor: pointer; }
.orbit-table.flights .trow[role='button']:hover { background: var(--card-bg-hover); }
.orbit-table.flights .trow[role='button']:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Suppression d'un vol : dernière colonne de « Mes vols », et bas du détail */
.orbit-table.flights .orbit-delete { justify-self: end; color: var(--muted); }
.orbit-table.flights .orbit-delete:hover:not(:disabled) { color: var(--bad); background: var(--bad-fill); }
.orbit-table.flights .orbit-delete svg { width: 18px; height: 18px; }
.orbit-detail .orbit-delete-flight { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; }
.orbit-table.flights .trow.selected { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 5px; background: var(--accent-fill); }
.orbit-table.flights .trow.empty-row { cursor: default; }
.orbit-table .mission { display: flex; align-items: center; gap: 22px; min-width: 0; }
.orbit-table .mission svg { width: 30px; height: 30px; flex: none; color: #c9d1dc; }
.orbit-table .mission > span { min-width: 0; }
.orbit-table .mission strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orbit-table.flights .mission strong { font-size: 18px; font-weight: 700; }
.orbit-table .mission small { display: block; font-size: 13.5px; color: #b7c0cd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orbit-table.flights .mission small { font-size: 16.5px; }
.orbit-table.aircraft .mission strong { font-weight: 400; }
.orbit-table.stats { border: 0; border-radius: 0; background: transparent; }
.orbit-table.stats .thead, .orbit-table.stats .trow { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); padding: 0 14px; text-align: center; }
.orbit-table.stats .thead span:first-child, .orbit-table.stats .trow .name { text-align: left; }
.orbit-table.stats .trow { min-height: 40px; font-size: 16.5px; }
.orbit-table.stats .name { display: flex; align-items: center; gap: 30px; }
.orbit-table.stats .name svg { width: 28px; height: 28px; flex: none; }
.orbit-table.stats .trow.total { font-weight: 800; }
/* Tableau de chasse : onglets par catégorie d'unité, puis unité, abattus, abattu par (en-têtes triables) */
.orbit-kills { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.orbit-kills .orbit-tabs.small { margin: 0; flex-wrap: wrap; }
.orbit-table.kills .thead, .orbit-table.kills .trow { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.orbit-table.kills .thead button { justify-self: start; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.orbit-table.kills .thead button:hover, .orbit-table.kills .thead button.sorted { color: var(--accent); }
.orbit-table.kills .thead button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.orbit-table.kills .trow { min-height: 46px; font-size: 16px; font-variant-numeric: tabular-nums; }
.orbit-table.kills .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orbit-table.kills .trow > span:not(.name) { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.orbit-table.kills .trow > span:not(.name) svg { width: 20px; height: 20px; flex: none; }
.orbit-table.kills .win { color: var(--ok); }
.orbit-table.kills .loss { color: var(--bad); }
.orbit-panel .orbit-table.kills, .orbit-block .orbit-table.kills { background: #0f1720; }
/* Seconde ligne de tuiles : chasseur et prédateur, noms longs coupés */
.orbit-tiles.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orbit-tiles.pair .orbit-tile > div { min-width: 0; }
.orbit-tiles.pair strong { overflow: hidden; text-overflow: ellipsis; font-size: clamp(22px, 2vw, 32px); }
.btn.orbit-details { justify-self: end; padding: 6px 18px; gap: 12px; font-size: 13.5px; font-weight: 600; background: #0d141b; }
.btn.orbit-details svg { width: 18px; height: 18px; color: var(--accent); }
.orbit-note { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 12.5px; color: #c9d1dc; }
.orbit-note svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ issue d'un vol */
.orbit-outcome { display: inline-flex; align-items: center; gap: 22px; white-space: nowrap; }
.orbit-outcome i { width: 13px; height: 13px; margin: 0; border-radius: 50%; background: var(--ok); flex: none; }
.orbit-outcome.warn i { background: var(--warn); }
.orbit-outcome.bad i { background: var(--bad); }
.orbit-outcome.info i { background: var(--info); }
.orbit-outcome.badge { gap: 12px; padding: 5px 14px 5px 12px; border: 1px solid var(--ok); border-radius: 999px; background: var(--ok-fill); color: var(--ok); font-size: 15px; }
.orbit-outcome.badge.warn { border-color: var(--warn); background: var(--warn-fill); color: var(--warn); }
.orbit-outcome.badge.bad { border-color: var(--bad); background: var(--bad-fill); color: #ff6b6b; }
.orbit-outcome.badge.info { border-color: var(--info); background: var(--info-fill); color: var(--info); }

/* ------------------------------------------------------------------ mes vols */
.orbit-flights { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.orbit-flights.with-detail { grid-template-columns: minmax(0, 1.72fr) minmax(340px, 1fr); }
.orbit-filters { display: flex; align-items: center; gap: 10px; padding: 20px 8px; margin-bottom: 18px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); }
.orbit-filters .search { flex: 1 1 120px; min-width: 120px; }
.orbit-filters .search input, .orbit-filters .select { height: 44px; font-size: 14px; background: #0d141b; }
.orbit-filters .search svg { left: 12px; width: 20px; height: 20px; }
.orbit-filters .search input { padding-left: 40px; }
.orbit-filters .select { min-width: 0; flex: 0 1 auto; padding: 0 8px; font-size: 13.5px; }
.orbit-reset { flex: none; background: none; border: 0; padding: 0 4px; font: inherit; font-size: 14px; color: var(--accent); text-decoration: underline; cursor: pointer; }
.orbit-reset:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.orbit-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 22px 24px; border-top: 1px solid var(--card-border); font-size: 16px; font-style: italic; color: #dfe4ea; }
.orbit-pager .pages { display: flex; align-items: center; gap: 10px; font-style: normal; }
.orbit-pager button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--card-border); border-radius: 5px; background: #0d141b; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.orbit-pager button svg { width: 18px; height: 18px; }
.orbit-pager button:hover:not(:disabled) { border-color: var(--muted); }
.orbit-pager button:disabled { opacity: 0.4; cursor: default; }
.orbit-pager button.current { border-color: var(--accent); background: var(--accent-fill); color: var(--accent); font-weight: 700; }
.orbit-pager .gap { color: var(--muted); }

.orbit-detail { position: relative; padding: 22px 22px 20px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); }
.orbit-detail .close { position: absolute; top: 22px; right: 20px; background: none; border: 0; padding: 6px; color: var(--text); cursor: pointer; }
.orbit-detail .close svg { width: 22px; height: 22px; }
.orbit-detail h2 { margin: 0 44px 0 0; font-size: 29px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.orbit-detail .date { margin: 4px 0 12px; font-size: 19px; color: #dfe4ea; }
.orbit-detail h3 { margin: 18px 0 12px; font-size: 18px; font-weight: 700; }
.orbit-kv { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px 0; margin: 16px 0; padding: 18px 0; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); font-size: 16px; }
.orbit-kv dt { color: #c9d1dc; }
.orbit-kv dd { margin: 0; overflow-wrap: anywhere; }
.orbit-tiles.two + .orbit-kv { border-top: 1px solid var(--card-border); }
.orbit-timeline { list-style: none; margin: 0; padding: 0 0 4px; }
.orbit-timeline li { position: relative; display: grid; grid-template-columns: 94px minmax(0, 1fr); padding: 0 0 12px 38px; font-size: 16px; }
.orbit-timeline li::before { content: ''; position: absolute; left: 5px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.orbit-timeline li::after { content: ''; position: absolute; left: 10px; top: 17px; bottom: -5px; width: 2px; background: var(--accent); }
.orbit-timeline li:last-child { padding-bottom: 0; }
.orbit-timeline li:last-child::after { display: none; }
.orbit-synced { display: flex; align-items: flex-start; gap: 16px; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--card-border); font-size: 14.5px; }
.orbit-synced svg { width: 26px; height: 26px; flex: none; color: var(--ok); }
.orbit-synced.warn svg { color: var(--warn); }
.orbit-synced.info svg { color: var(--info); }
.orbit-synced span { padding-top: 3px; }
.orbit-synced small { display: block; margin-top: 4px; font-size: 13px; color: #b7c0cd; }

/* ------------------------------------------------------------------ mes appareils */
.orbit-aircraft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px 18px; padding: 10px 12px 12px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); }
.orbit-aircraft .orbit-photo.large { min-height: 188px; border-radius: 5px; }
.orbit-aircraft .summary { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 6px 4px 0 8px; min-width: 0; }
.orbit-aircraft .title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.orbit-aircraft h2 { margin: 0; font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1.1; }
.orbit-aircraft .title p { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; margin: 6px 0 0; font-size: 17px; color: #dfe4ea; }
.orbit-aircraft .title .btn { padding: 10px 20px; gap: 12px; font-size: 15px; white-space: nowrap; }
.orbit-aircraft .title .btn svg { width: 20px; height: 20px; }
.orbit-aircraft .block { padding: 12px 16px 10px; border: 1px solid var(--card-border); border-radius: 5px; background: #0f1720; min-width: 0; }
.orbit-aircraft .block h3 { margin: 0 0 8px; font-size: 21px; font-weight: 800; }
.orbit-line { display: flex; align-items: center; gap: 30px; padding: 6px 14px; margin-bottom: 6px; border: 1px solid var(--card-border); border-radius: 4px; }
.orbit-line.plain { border-width: 0 0 1px; border-radius: 0; padding: 4px 14px 10px; }
.orbit-line svg { width: 34px; height: 34px; flex: none; }
.orbit-line strong { display: block; font-size: 17.5px; font-weight: 600; }
.orbit-line small { display: block; font-size: 15px; color: #dfe4ea; }
.orbit-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; padding: 6px 0 0; font-size: 15.5px; }
.orbit-facts > span { display: inline-flex; align-items: center; gap: 14px; padding: 4px 22px; border-left: 1px solid var(--card-border); }
.orbit-facts > span:first-child { border-left: 0; }
.orbit-facts svg { width: 24px; height: 24px; flex: none; }
.orbit-facts svg + svg, .orbit-facts span > svg:not(:first-child) { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ statistiques */
.orbit-selects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.orbit-selects label { position: relative; display: block; }
.orbit-selects svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; pointer-events: none; }
.orbit-selects select { width: 100%; height: 54px; padding: 0 16px 0 64px; font: inherit; font-size: 17px; color: var(--text); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 6px; outline: none; }
.orbit-selects select:focus { border-color: var(--accent); }
.orbit-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.orbit-panel { padding: 8px 14px 6px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); min-width: 0; }
.orbit-panel h2 { margin: 0; padding: 4px 0 8px; font-size: 25px; font-weight: 800; }
.orbit-row { display: flex; align-items: center; gap: 28px; padding: 14px 12px; border-top: 1px solid var(--card-border); }
.orbit-row.slim { padding: 13px 12px; }
.orbit-row > svg { width: 48px; height: 48px; flex: none; }
.orbit-row.slim > svg { width: 40px; height: 40px; color: var(--accent); }
.orbit-row > span:nth-child(2) { flex: 1; min-width: 0; }
.orbit-row strong { display: block; font-size: 19px; font-weight: 700; }
.orbit-row small { display: block; font-size: 17px; color: #c9d1dc; }
.orbit-row .figure { text-align: right; }
.orbit-row .figure strong { font-size: 27px; font-weight: 800; line-height: 1.2; }
.orbit-row.slim .figure strong { font-size: 23px; }
.orbit-explain { display: flex; align-items: center; gap: 28px; padding: 12px 20px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); }
.orbit-explain svg { width: 34px; height: 34px; flex: none; }
.orbit-explain strong { display: block; font-size: 16px; margin-bottom: 2px; }
.orbit-explain p { margin: 0; font-size: 13.5px; color: #c9d1dc; }

/* ------------------------------------------------------------------ écrans étroits */
@media (max-width: 1180px) {
    .orbit-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .orbit-flights.with-detail, .orbit-aircraft, .orbit-two { grid-template-columns: minmax(0, 1fr); }
    .orbit-table.last .thead, .orbit-table.last .trow { grid-template-columns: 120px minmax(0, 2fr) minmax(0, 1fr) 90px minmax(0, 1fr) 110px; }
}
@media (max-width: 1400px) {
    .orbit-flights.with-detail .orbit-filters { flex-wrap: wrap; }
}
@media (max-width: 820px) {
    .orbit-filters { flex-wrap: wrap; }
    .orbit-cards, .orbit-selects { grid-template-columns: minmax(0, 1fr); }
    .orbit-carousel .orbit-card { flex-basis: 85%; }
    .orbit-carousel > .prev { left: 4px; }
    .orbit-carousel > .next { right: 4px; }
    .orbit-table.last .thead, .orbit-table.aircraft .thead { display: none; }
    .orbit-table.last .trow, .orbit-table.aircraft .trow { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 16px; row-gap: 4px; }
    .orbit-table.kills .thead, .orbit-table.kills .trow { grid-template-columns: minmax(0, 1fr) auto auto; padding: 0 16px; }
    .orbit-tiles.pair, .orbit-tiles.pair.profile { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ sous-onglets (statistiques, détail d'un vol) */
.orbit-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--card-border); }
.orbit-tabs button { display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px 12px 14px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; color: #c9d1dc; font: inherit; font-size: 17px; cursor: pointer; }
.orbit-tabs button svg { width: 24px; height: 24px; }
/* Onglet réservé à Galaxy+ : petit cadenas après son nom */
.orbit-tabs button svg ~ svg { width: 16px; height: 16px; margin-left: -6px; color: var(--warn); }
.orbit-tabs button:hover { color: var(--text); }
.orbit-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.orbit-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.orbit-tabs.small { margin: 16px 0 4px; }
.orbit-tabs.small button { padding: 10px 18px; font-size: 15.5px; }
.orbit-tabs.small button.active { color: var(--text); }

/* ------------------------------------------------------------------ progression : en-têtes de panneau */
.orbit-panel .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 4px 0 12px; }
.orbit-panel .head h2 { padding: 0; }
.orbit-panel .head p { margin: 2px 0 0; font-size: 15px; color: #c9d1dc; }
.orbit-panel > .orbit-none { margin-bottom: 10px; }
.orbit-panel > .orbit-note { padding: 12px 0 6px; }
.orbit-panel > .empty { padding: 44px 12px; }
.orbit-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ mes objectifs */
.orbit-goals .history { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.orbit-goals .history svg { width: 20px; height: 20px; }
.orbit-goals .slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.orbit-goals .goal { display: flex; flex-direction: column; gap: 12px; min-height: 176px; padding: 18px 16px 6px; border: 1px solid var(--card-border); border-radius: 6px; background: #0f1720; min-width: 0; }
.orbit-goals .what { display: flex; align-items: flex-start; gap: 22px; flex: 1; }
.orbit-goals .what > svg { width: 46px; height: 46px; flex: none; color: var(--accent); stroke-width: 1.5; }
.orbit-goals .what strong { display: block; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.orbit-goals .figures { display: block; margin-top: 4px; font-size: 21px; color: #b7c0cd; white-space: nowrap; }
.orbit-goals .figures b { font-size: 30px; font-weight: 800; color: var(--text); }
.orbit-goals .meter { height: 12px; border-radius: 6px; background: #223041; overflow: hidden; }
.orbit-goals .meter span { display: block; height: 100%; min-width: 0; border-radius: 6px; background: var(--accent); }
.orbit-goals .actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; border-top: 1px solid var(--card-border); }
.orbit-goals .actions button { display: inline-flex; align-items: center; gap: 12px; padding: 12px 8px; border: 0; background: none; color: #dfe4ea; font: inherit; font-size: 15px; cursor: pointer; }
.orbit-goals .actions button svg { width: 22px; height: 22px; }
.orbit-goals .actions button:hover:not(:disabled) { color: var(--accent); }
.orbit-goals .actions button:disabled { opacity: 0.5; cursor: default; }
.orbit-goals .goal.vacant { align-items: center; justify-content: center; gap: 10px; padding: 18px 16px; border-style: dashed; background: transparent; text-align: center; }
.orbit-goals .goal.vacant > svg { width: 38px; height: 38px; color: var(--muted); }
.orbit-goals .goal.vacant p { margin: 0; font-size: 14.5px; color: #b7c0cd; }
.orbit-goals .goal.vacant .btn { padding: 9px 18px; gap: 10px; font-size: 15px; }
.orbit-reached { display: flex; flex-direction: column; gap: 4px; max-height: min(60vh, 520px); overflow-y: auto; }
.orbit-reached > div { display: flex; align-items: center; gap: 16px; padding: 12px 4px; border-top: 1px solid var(--card-border); }
.orbit-reached > div:first-of-type { border-top: 0; }
.orbit-reached svg { width: 28px; height: 28px; flex: none; color: var(--ok); }
.orbit-reached strong { display: block; font-size: 16px; }
.orbit-reached small { display: block; font-size: 13.5px; color: #b7c0cd; }

/* ------------------------------------------------------------------ activité de vol */
.orbit-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--card-border); border-radius: 6px; background: #0d141b; }
.orbit-toggle button { padding: 8px 18px; border: 0; border-radius: 4px; background: none; color: #c9d1dc; font: inherit; font-size: 14.5px; cursor: pointer; white-space: nowrap; }
.orbit-toggle button.active { background: var(--accent-fill); color: var(--accent); font-weight: 700; }
.orbit-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.orbit-activity .chart { position: relative; }
.orbit-activity svg { display: block; }
.orbit-activity .grid { stroke: #26323f; stroke-width: 1; stroke-dasharray: 3 4; }
.orbit-activity .base { stroke: #4a5868; stroke-width: 1; }
.orbit-activity .tick, .orbit-activity .label { fill: #b7c0cd; font-size: 13.5px; }
.orbit-activity .axis-title { fill: #b7c0cd; font-size: 14px; }
.orbit-activity .bar { fill: var(--accent); }
.orbit-activity .band { fill: rgba(255, 255, 255, 0.05); }
.orbit-activity .hit { fill: transparent; }
.orbit-activity .tip { position: absolute; transform: translate(-50%, -100%); padding: 8px 12px; border: 1px solid #3a4656; border-radius: 6px; background: #0a0f15; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); font-size: 13px; white-space: nowrap; pointer-events: none; z-index: 2; }
.orbit-activity .tip span, .orbit-activity .tip small { display: block; color: #b7c0cd; }
.orbit-activity .tip strong { display: block; font-size: 15px; }

/* ------------------------------------------------------------------ mes entraînements, exercices, bilan */
.orbit-table.trainings { background: #0f1720; }
.orbit-table.trainings .thead, .orbit-table.trainings .trow { grid-template-columns: 128px minmax(0, 1fr) minmax(0, 1.6fr) 190px 150px; }
.orbit-table.trainings .trow { min-height: 58px; padding-top: 8px; padding-bottom: 8px; font-size: 16px; }
.orbit-table.trainings .trow.empty-row { grid-template-columns: minmax(0, 1fr); }
.orbit-table.trainings .name { display: flex; align-items: center; gap: 18px; min-width: 0; }
.orbit-table.trainings .name svg { width: 28px; height: 28px; flex: none; }
.orbit-table.trainings .name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orbit-table.trainings .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.see { justify-self: end; padding: 8px 14px; gap: 10px; font-size: 14.5px; white-space: nowrap; }
.btn.see svg { width: 18px; height: 18px; }
.orbit-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border: 1px solid #3a4656; border-radius: 999px; background: #17212d; font-size: 14.5px; white-space: nowrap; }
.orbit-chip.inactive { border-style: dashed; color: #b7c0cd; }
.orbit-chip button { display: grid; place-items: center; width: 22px; height: 22px; margin-right: -6px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.orbit-chip button svg { width: 12px; height: 12px; stroke-width: 2.4; }
.orbit-chip button:hover { background: rgba(255, 255, 255, 0.12); }
.orbit-assessment { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 10px; border-radius: 999px; font-size: 14.5px; white-space: nowrap; background: var(--info-fill); color: var(--text); }
.orbit-assessment svg { width: 20px; height: 20px; color: var(--info); }
.orbit-assessment.warn { background: var(--warn-fill); }
.orbit-assessment.warn svg { color: var(--warn); }
.orbit-assessment.ok { background: var(--ok-fill); }
.orbit-assessment.ok svg { color: var(--ok); }
.orbit-multi { position: relative; }
.orbit-multi summary { display: flex; align-items: center; gap: 14px; min-width: 240px; height: 46px; padding: 0 14px; border: 1px solid var(--card-border); border-radius: 6px; background: #0d141b; font-size: 15px; cursor: pointer; list-style: none; }
.orbit-multi summary::-webkit-details-marker { display: none; }
.orbit-multi summary span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orbit-multi summary svg { width: 20px; height: 20px; flex: none; }
.orbit-multi summary svg:last-child { width: 14px; height: 14px; transform: rotate(90deg); }
.orbit-multi[open] summary { border-color: var(--accent); }
.orbit-multi .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 100%; max-height: 320px; overflow-y: auto; padding: 8px; border: 1px solid #3a4656; border-radius: 6px; background: #0d141b; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
.orbit-multi .menu label { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 4px; font-size: 15px; white-space: nowrap; cursor: pointer; }
.orbit-multi .menu label:hover { background: var(--card-bg-hover); }
.orbit-multi .menu input, .orbit-picker .list input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.orbit-multi .menu em, .orbit-picker em { font-style: normal; color: var(--muted); font-weight: 400; }
.orbit-multi .menu p { margin: 6px 10px; }
.orbit-multi .menu .orbit-reset { display: block; margin: 6px 10px 4px; }

/* ------------------------------------------------------------------ détail d'un vol : notes et exercices */
.orbit-notes h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 20px 0 10px; font-size: 19px; font-weight: 700; }
.orbit-notes h3 small { font-size: 14px; font-weight: 400; color: #b7c0cd; }
.orbit-notes h3 .private { display: inline-flex; align-items: center; gap: 8px; }
.orbit-notes h3 .private svg { width: 18px; height: 18px; }
.orbit-notes .exercises { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--card-border); }
.orbit-notes .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 44px; }
.orbit-notes .chips .orbit-chip { border-color: var(--accent); background: var(--accent-fill); padding: 8px 16px; font-size: 15px; }
.orbit-notes .choose { flex: none; padding: 10px 16px; gap: 10px; font-size: 15px; white-space: nowrap; }
.orbit-notes .choose svg { width: 22px; height: 22px; }
.orbit-notes .assessments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.orbit-notes .assessments button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 14px 14px; border: 1px solid var(--card-border); border-radius: 6px; background: #0f1720; color: var(--text); font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; }
.orbit-notes .assessments button svg { width: 26px; height: 26px; }
.orbit-notes .assessments button i { position: absolute; top: 16px; right: 14px; width: 20px; height: 20px; margin: 0; border: 2px solid #8d97a6; border-radius: 50%; }
.orbit-notes .assessments button:hover { border-color: #3a4656; }
.orbit-notes .assessments button.selected { border-color: var(--info); background: var(--info-fill); font-weight: 700; }
.orbit-notes .assessments button.selected svg { color: var(--info); }
.orbit-notes .assessments button.selected i { border-color: var(--info); background: radial-gradient(circle, var(--info) 0 45%, transparent 50%); }
.orbit-notes .assessments button.warn.selected { border-color: var(--warn); background: var(--warn-fill); }
.orbit-notes .assessments button.warn.selected svg { color: var(--warn); }
.orbit-notes .assessments button.warn.selected i { border-color: var(--warn); background: radial-gradient(circle, var(--warn) 0 45%, transparent 50%); }
.orbit-notes .assessments button.ok.selected { border-color: var(--ok); background: var(--ok-fill); }
.orbit-notes .assessments button.ok.selected svg { color: var(--ok); }
.orbit-notes .assessments button.ok.selected i { border-color: var(--ok); background: radial-gradient(circle, var(--ok) 0 45%, transparent 50%); }
.orbit-notes .assessments button:focus-visible, .orbit-notes textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.orbit-notes textarea { display: block; width: 100%; min-height: 140px; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: 6px; background: #0d141b; color: var(--text); font: inherit; font-size: 15.5px; line-height: 1.5; resize: vertical; }
.orbit-notes .actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--card-border); }
.orbit-notes .actions .btn { min-width: 132px; justify-content: center; padding: 11px 22px; font-size: 15.5px; }

/* Fenêtre « Choisir les exercices » */
dialog.modal:has(.orbit-picker), dialog.modal:has(.orbit-reached) { width: min(640px, calc(100vw - 32px)); }
.orbit-picker .search { display: block; margin-bottom: 14px; }
.orbit-picker .list { display: flex; flex-direction: column; gap: 8px; max-height: min(52vh, 520px); overflow-y: auto; padding-right: 4px; }
.orbit-picker .list label { display: flex; align-items: center; gap: 18px; padding: 12px 16px; border: 1px solid var(--card-border); border-radius: 6px; cursor: pointer; }
.orbit-picker .list label:hover { background: var(--card-bg-hover); }
.orbit-picker .list label.checked { border-color: var(--accent); background: var(--accent-fill); }
.orbit-picker .list svg { width: 28px; height: 28px; flex: none; color: #c9d1dc; }
.orbit-picker .list strong { display: block; font-size: 16px; }
.orbit-picker .list small { display: block; font-size: 13.5px; color: #c9d1dc; }
.orbit-picker .list p { margin: 12px 4px; }
.orbit-picker .foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--card-border); }
.orbit-picker .foot strong { flex: 1; color: var(--accent); font-size: 15px; }
.orbit-picker .foot .btn { min-width: 112px; justify-content: center; padding: 10px 20px; font-size: 15px; }

@media (max-width: 1180px) {
    .orbit-goals .slots { grid-template-columns: minmax(0, 1fr); }
    .orbit-table.trainings .thead { display: none; }
    .orbit-table.trainings .trow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
    .orbit-table.trainings .chips { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
    .orbit-panel .head, .orbit-notes .exercises { flex-wrap: wrap; }
    .orbit-notes .assessments { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ page d'un vol : analyse, notes */

.orbit-back { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; color: var(--text); text-decoration: none; font-size: 15.5px; }
.orbit-back svg { width: 20px; height: 20px; }
.orbit-back:hover { color: var(--accent); }
.orbit-detail .orbit-outcome.badge { margin-right: 14px; }
.orbit-detail .open-flight { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 18px; font-size: 15.5px; text-decoration: none; }
.orbit-detail .open-flight svg { width: 20px; height: 20px; }
.topbar a:not(.topbar-avatar) { color: inherit; text-decoration: none; }
.topbar a:not(.topbar-avatar):hover { color: var(--accent); }

.orbit-flight .flight-head .page-title { margin: 0 0 6px; overflow-wrap: anywhere; }
.orbit-flight .flight-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: 18px; color: #dfe4ea; }
.orbit-flight .flight-head p i { font-style: normal; color: var(--muted); }
.orbit-flight .flight-head .orbit-outcome { margin-left: 10px; }
/* Départ et arrivée sont des noms : ils se replient au lieu de pousser la carte */
.orbit-flight .orbit-tiles .orbit-tile { min-height: 96px; padding: 14px 20px; gap: 18px; }
.orbit-flight .orbit-tiles .orbit-tile svg { width: 44px; height: 44px; }
.orbit-flight .orbit-tiles .orbit-tile strong { font-size: clamp(20px, 1.7vw, 27px); white-space: normal; overflow-wrap: anywhere; }
.orbit-flight .orbit-tiles .orbit-tile span { font-size: 14.5px; }
.orbit-flight .orbit-tiles .orbit-tile > div { min-width: 0; }

.orbit-banner { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 16px; border: 1px solid var(--warn); border-radius: 6px; background: var(--warn-fill); color: var(--text); font-size: 15px; }
.orbit-banner svg { width: 22px; height: 22px; flex: none; color: var(--warn); }

.flight-analysis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 370px); gap: 14px; align-items: stretch; }
.flight-analysis .chronology { padding: 14px 18px 16px; }
.flight-analysis .chronology h2 { font-size: 21px; padding-bottom: 14px; }
.orbit-timeline li button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.orbit-timeline li button:hover { color: var(--accent); }
.orbit-timeline li button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.orbit-timeline li i { font-style: normal; color: var(--muted); }

.orbit-map { position: relative; min-height: 380px; border: 1px solid var(--card-border); border-radius: 6px; overflow: hidden; background: #0e1a26; }
.orbit-map .canvas { position: absolute; inset: 0; }
.orbit-map.fixed { min-height: 300px; }
.orbit-map.fixed .canvas { pointer-events: none; }
.orbit-map .controls { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.orbit-map .controls button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #2c3948; background: rgba(13, 20, 27, 0.92); color: var(--text); font: inherit; font-size: 14.5px; cursor: pointer; }
.orbit-map .controls button:hover { background: #16212c; }
.orbit-map .controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.orbit-map .controls svg { width: 20px; height: 20px; }
.orbit-map .zoom { display: flex; flex-direction: column; }
.orbit-map .zoom button { width: 36px; height: 34px; }
.orbit-map .zoom button:first-child { border-radius: 6px 6px 0 0; }
.orbit-map .zoom button:last-child { border-radius: 0 0 6px 6px; margin-top: -1px; }
.orbit-map .recenter { padding: 8px 14px 8px 10px; border-radius: 6px; }
.orbit-map .attribution { position: absolute; right: 0; bottom: 0; margin: 0; padding: 2px 8px; border-radius: 6px 0 0 0; background: rgba(8, 14, 20, 0.72); color: rgba(230, 233, 238, 0.82); font-size: 11px; line-height: 1.5; }
.orbit-map .attribution a { color: inherit; }
.orbit-map-fallback { margin: 0; padding: 40px 24px; text-align: center; color: #c9d1dc; }
.orbit-map-marker { position: relative; width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px rgba(8, 14, 20, 0.6); }
.orbit-map-marker.step { width: 10px; height: 10px; border-width: 2px; }
.orbit-map-marker span { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 14.5px; font-weight: 700; white-space: nowrap; text-shadow: 0 0 4px #080e14, 0 0 4px #080e14, 0 1px 2px #080e14; }
.orbit-map-plane { width: 26px; height: 26px; filter: drop-shadow(0 0 3px rgba(8, 14, 20, 0.9)); pointer-events: none; }
.orbit-map-plane svg { display: block; fill: var(--accent); stroke: #fff; stroke-width: 0.8; stroke-linejoin: round; }

.orbit-nodata { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 220px; padding: 24px; border: 1px dashed var(--card-border); border-radius: 6px; background: var(--card-bg); color: #c9d1dc; text-align: center; }
.orbit-nodata svg { width: 34px; height: 34px; color: var(--muted); }
.orbit-nodata p { margin: 0; font-size: 16px; }
p.orbit-nodata.small { min-height: 0; margin: 0 0 14px; padding: 18px; font-size: 14.5px; }

.orbit-flight .orbit-panel { padding: 14px 18px 16px; }
.orbit-flight .orbit-panel h2 { font-size: 21px; padding: 0 0 4px; }
.orbit-flight .orbit-panel .lead { margin: 0 0 6px; font-size: 14.5px; color: #b7c0cd; }
.orbit-curves { position: relative; display: block; width: 100%; }
.orbit-curves .readout { position: relative; height: 34px; }
.orbit-curves .readout span { position: absolute; top: 0; transform: translateX(-50%); padding: 5px 14px; border: 1px solid #3a4656; border-radius: 6px; background: #0d141b; color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orbit-curves .curve { display: block; width: 100%; margin: 0; }
.orbit-curves .curve figcaption { margin: 4px 0 2px; font-size: 14.5px; font-weight: 700; }
.orbit-curves .curve > div { width: 100%; min-height: 168px; cursor: crosshair; }
.orbit-curves .axis-title { margin: 2px 0 0; text-align: center; font-size: 14px; color: #c9d1dc; }
.orbit-curves .uplot { font-family: inherit; }

.flight-notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 500px); gap: 14px; align-items: start; }
.flight-notes[hidden] { display: none; }
.flight-notes .orbit-notes h3:first-child { margin-top: 12px; }
.flight-notes .recall .orbit-kv { margin: 6px 0 14px; padding: 10px 0 14px; border-top: 0; }
.flight-notes .recall .orbit-map { margin-bottom: 14px; }
.flight-notes .recall .analyse { display: flex; width: 100%; justify-content: center; align-items: center; gap: 12px; padding: 12px 18px; font-size: 15.5px; }
.flight-notes .recall .analyse svg { width: 20px; height: 20px; }

@media (max-width: 1100px) {
    .flight-analysis, .flight-notes { grid-template-columns: minmax(0, 1fr); }
    .orbit-map { min-height: 320px; }
}
.orbit-map-heading { padding: 3px 9px; border: 1px solid #3a4656; border-radius: 6px; background: rgba(13, 20, 27, 0.92); color: var(--text); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; white-space: nowrap; pointer-events: none; }

/* Chronologie : tirs (jaune), cible touchée (vert), impact sans cible (gris), coups reçus et fins brutales (rouge) */
.orbit-timeline li.shot::before { background: #FFD166; }
.orbit-timeline li.hit::before { background: var(--ok); }
.orbit-timeline li.miss::before { background: var(--idle); }
.orbit-timeline li.danger::before { background: var(--bad); }
.flight-analysis .chronology > .small { margin: 12px 0 0; }

/* Partage d'un vol : boutons à droite du titre, confirmation dessous */
.flight-head .flight-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.flight-share { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 520px; }
.flight-share .buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.flight-share .btn svg { width: 18px; height: 18px; }
.flight-share p { margin: 0; font-size: 14px; color: #c9d1dc; text-align: right; }
.flight-share input { width: min(420px, 80vw); padding: 4px 8px; border: 1px solid var(--card-border); border-radius: 4px; background: var(--card-bg); color: var(--text); font: 13px var(--mono); }

/* Vol partagé par lien : page seule, sans menu */
.shared-flight { max-width: 1320px; margin: 0 auto; padding: 0 0 24px; }
.shared-brand { margin: 0; padding: 18px 28px 0; font-size: 15px; color: var(--muted); }
.shared-brand strong { color: var(--text); letter-spacing: 0.2em; text-transform: uppercase; }
.shared-brand i { font-style: normal; margin: 0 8px; }
.shared-notes h3 { margin: 18px 0 8px; font-size: 17px; }
.shared-notes .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shared-notes .assessment { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }
.shared-notes .assessment svg { width: 22px; height: 22px; }
.shared-notes .assessment.warn { color: var(--warn); }
.shared-notes .assessment.info { color: var(--info); }
.shared-notes .assessment.ok { color: var(--ok); }

/* ------------------------------------------------------------------ profil pilote */
.orbit-profile .profile-link { display: flex; width: fit-content; margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--accent); }
.orbit-profile .profile-link svg { width: 18px; height: 18px; }
.orbit-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; min-height: 250px; padding: 26px 28px 22px; overflow: hidden; border: 1px solid var(--card-border); border-radius: 6px; background: #0d141b url(/build/images/hub-banner.f5968d5b.png) center / cover no-repeat; }
.orbit-hero .hero-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.orbit-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 15, 21, 0.9) 0%, rgba(10, 15, 21, 0.55) 55%, rgba(10, 15, 21, 0.2) 100%), linear-gradient(0deg, rgba(10, 15, 21, 0.75) 0%, transparent 60%); }
.orbit-hero > .identity, .orbit-hero > .actions { position: relative; z-index: 1; }
.orbit-hero .identity { display: flex; align-items: center; gap: 26px; }
.orbit-hero .avatar.big { width: 132px; height: 132px; font-size: 44px; border: 3px solid #fff; background: #1c2633; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); }
.orbit-hero h2 { margin: 0; font-size: clamp(28px, 2.8vw, 40px); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.orbit-hero .since { margin: 4px 0 0; font-size: 16px; color: #dfe4ea; }
.orbit-hero .bio { margin: 10px 0 0; max-width: 720px; font-size: 16.5px; color: #e6e9ee; white-space: pre-line; overflow-wrap: anywhere; }
.orbit-hero .visibility { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-left: auto; padding: 6px 14px; border: 1px solid #5a6676; border-radius: 999px; background: rgba(10, 15, 21, 0.7); font-size: 14px; white-space: nowrap; }
.orbit-hero .visibility svg { width: 18px; height: 18px; }
.orbit-hero .visibility.public { border-color: var(--accent); color: var(--accent); }
.orbit-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.orbit-hero .actions .btn { padding: 10px 20px; gap: 12px; font-size: 15px; background: rgba(13, 20, 27, 0.85); border-color: #5a6676; }
.orbit-hero .actions .btn.accent { background: var(--accent); border-color: var(--accent); }
.orbit-hero .actions .btn svg { width: 20px; height: 20px; }
.tabs.orbit-profile-tabs { margin: 4px 0 0; gap: 34px; }
.tabs.orbit-profile-tabs a { font-size: 16px; padding-bottom: 12px; }
.tabs.orbit-profile-tabs a.active { color: var(--accent); }
.orbit-tiles.profile .orbit-tile { min-height: 104px; gap: 22px; }
.orbit-tiles.profile .orbit-tile svg { width: 50px; height: 50px; color: var(--accent); }
.orbit-tiles.profile.stack { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.orbit-tiles.profile.stack .orbit-tile { min-height: 84px; }
.orbit-tiles.profile.stack .orbit-tile svg { width: 40px; height: 40px; }
.orbit-tiles.profile.stack .orbit-tile strong { font-size: 28px; }
.orbit-profile-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.orbit-block { padding: 18px 22px 20px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); min-width: 0; }
.orbit-block h3 { margin: 0; font-size: 21px; font-weight: 800; }
.orbit-block h3 small { font-size: 15px; font-weight: 400; color: #b7c0cd; }
.orbit-block .sub { margin: 4px 0 14px; font-size: 14.5px; color: #b7c0cd; }
.orbit-block h3 + ul, .orbit-block h3 + p.muted, .orbit-block h3 + div { margin-top: 14px; }
.orbit-block .more { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 15px; font-weight: 600; }
.orbit-block .more svg { width: 18px; height: 18px; }
.orbit-experience { list-style: none; margin: 0; padding: 0; border: 1px solid var(--card-border); border-radius: 5px; background: #0f1720; }
.orbit-experience li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 8px 16px 8px 8px; border-top: 1px solid var(--card-border); }
.orbit-experience li:first-child { border-top: 0; }
.orbit-experience .orbit-photo { height: 56px; border-radius: 4px; }
.orbit-experience strong { font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orbit-experience strong small, .orbit-table.profile-aircraft .name small { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: var(--accent-fill); color: var(--accent); font-size: 12px; font-weight: 600; vertical-align: 2px; }
.orbit-experience span { text-align: right; font-size: 14.5px; color: #c9d1dc; white-space: nowrap; }
.orbit-experience span b { display: block; font-size: 18px; font-weight: 800; color: var(--text); }
.orbit-table.profile-aircraft { background: #0f1720; }
.orbit-table.profile-aircraft .thead, .orbit-table.profile-aircraft .trow { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.6fr); }
.orbit-table.profile-aircraft .trow { min-height: 62px; font-size: 16px; }
.orbit-table.profile-aircraft .name { display: flex; align-items: center; gap: 18px; min-width: 0; }
.orbit-table.profile-aircraft .name .orbit-photo { width: 96px; height: 46px; flex: none; border-radius: 4px; }
.orbit-table.profile-aircraft .name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orbit-table.profile-aircraft .trow > strong { font-size: 18px; font-weight: 800; }
.orbit-table.profile-aircraft .share { display: flex; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orbit-table.profile-aircraft .share i { flex: 1; height: 10px; margin: 0; border-radius: 2px; background: #1a2531; overflow: hidden; }
.orbit-table.profile-aircraft .share b { display: block; height: 100%; background: var(--accent); }
.orbit-main-aircraft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 26px; margin-top: 14px; padding: 14px; border: 1px solid var(--card-border); border-radius: 5px; background: #0f1720; }
.orbit-main-aircraft .orbit-photo { height: 170px; border-radius: 4px; }
.orbit-main-aircraft span { display: block; font-size: 16px; color: #dfe4ea; }
.orbit-main-aircraft strong { display: block; font-size: 36px; font-weight: 800; line-height: 1.15; }
.orbit-main-aircraft small { display: block; font-size: 16px; color: #dfe4ea; }
.orbit-main-aircraft em { display: inline-block; margin-top: 10px; padding: 5px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-style: normal; font-size: 13.5px; font-weight: 700; }
.orbit-profile-squadrons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.orbit-profile-squadrons li { display: flex; align-items: center; gap: 22px; padding: 14px 18px; border: 1px solid var(--card-border); border-radius: 5px; background: #0f1720; }
.orbit-profile-squadrons .about { flex: 1; min-width: 0; }
.orbit-profile-squadrons .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.orbit-profile-squadrons .head strong { font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.orbit-profile-squadrons dl { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 10px 0 0; }
.orbit-profile-squadrons dd.roles { flex-wrap: wrap; row-gap: 2px; }
.orbit-profile-squadrons dd.roles span { white-space: nowrap; }
.orbit-profile-squadrons dt { font-size: 12.5px; color: #b7c0cd; }
.orbit-profile-squadrons dd { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 15.5px; font-weight: 600; }
.orbit-profile-squadrons dd.grade img, .orbit-signature-squadron .grade img { width: 28px; height: 28px; object-fit: contain; }
.orbit-profile-squadrons dd.roles span + span::before { content: '·'; margin-right: 8px; color: var(--muted); }
.btn.see-squadron { flex: none; padding: 7px 14px; gap: 10px; font-size: 14px; white-space: nowrap; }
.btn.see-squadron svg { width: 18px; height: 18px; }
.orbit-none.profile-refused { display: flex; align-items: center; gap: 24px; }
.orbit-none.profile-refused svg { width: 44px; height: 44px; flex: none; color: var(--accent); }
.orbit-none.profile-refused strong { font-size: 20px; }
.orbit-none.profile-refused p { margin: 4px 0 0; }

/* ------------------------------------------------------------------ modifier mon profil */
.orbit-edit { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.orbit-edit form, .orbit-edit aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.orbit-edit-title { margin: 0 0 14px; font-size: 21px; font-weight: 800; }
.orbit-edit-lead { margin: -8px 0 14px; font-size: 14.5px; color: #b7c0cd; }
.orbit-edit .panel .lbl:first-of-type { margin-top: 0; }
.orbit-edit .panel .lbl .required { color: var(--accent); }
.orbit-edit .panel .lbl .count { float: right; }
.orbit-edit .panel textarea { height: 104px; }
.orbit-edit-images { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: end; }
.orbit-edit-images > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.orbit-edit-images .avatar.big { width: 120px; height: 120px; font-size: 40px; align-self: center; border: 3px solid #fff; }
.orbit-edit-images .preview { height: 120px; margin: 0; }
.orbit-edit-images .cst-image-buttons .btn { padding: 0 14px; }
.orbit-edit-images .file-btn { white-space: nowrap; padding: 0 12px; }
.orbit-upload { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; color: #c9d1dc; }
.orbit-upload svg { width: 18px; height: 18px; flex: none; }
.orbit-upload.refused { color: #ff6b6b; }
.orbit-visibility { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.orbit-visibility .options { display: flex; flex-direction: column; gap: 12px; }
.orbit-visibility label { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--card-border); border-radius: 5px; cursor: pointer; }
.orbit-visibility label.checked { border-color: var(--accent); background: var(--accent-fill); }
.orbit-visibility input[type='radio'] { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.orbit-visibility label strong { display: block; font-size: 16.5px; }
.orbit-visibility label small { display: block; font-size: 14px; color: #c9d1dc; }
.orbit-visibility .shown { padding: 14px 18px; border: 1px solid var(--card-border); border-radius: 5px; background: #0f1720; }
.orbit-visibility .shown > strong { font-size: 15.5px; }
.orbit-visibility ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.orbit-visibility li { display: flex; align-items: center; gap: 12px; }
.orbit-visibility li svg { width: 22px; height: 22px; flex: none; }
.orbit-visibility .note { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; font-size: 13.5px; color: #c9d1dc; }
.orbit-visibility .note svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.orbit-info { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); }
.orbit-info svg { width: 24px; height: 24px; flex: none; color: var(--info); }
.orbit-info strong { display: block; font-size: 14.5px; color: var(--info); }
.orbit-info p { margin: 6px 0 0; font-size: 13.5px; color: #c9d1dc; }

/* ------------------------------------------------------------------ signature de forum */
.orbit-signature-squadron { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 32px; }
.orbit-signature-squadron .select { min-width: 280px; height: 46px; }
.orbit-signature-squadron > div { display: flex; flex-direction: column; gap: 6px; padding-left: 32px; border-left: 1px solid var(--card-border); }
.orbit-signature-squadron small { font-size: 12.5px; color: #b7c0cd; }
.orbit-signature-squadron .grade { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 16px; font-weight: 600; }
.orbit-signature-preview { display: grid; place-items: center; min-height: 120px; margin-top: 14px; padding: 2px; border: 2px solid var(--accent); border-radius: 4px; background: #0a0f15; overflow: hidden; }
.orbit-signature-preview img { display: block; width: 100%; max-width: 800px; height: auto; }
.orbit-signature-preview + .sub { margin-top: 10px; }
.orbit-signature-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 14px; }
.orbit-signature-actions .btn, .orbit-block > .btn { padding: 11px 22px; gap: 12px; font-size: 15.5px; }
.orbit-signature-actions .btn svg, .orbit-block > .btn svg, .orbit-signature-code .btn svg { width: 20px; height: 20px; }
.orbit-block .callout { margin: 0 0 14px; }
.tabs.orbit-signature-tabs { margin: 14px 0 10px; gap: 0; border-bottom: 0; }
.tabs.orbit-signature-tabs button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 26px; border: 1px solid var(--card-border); font-size: 15px; }
.tabs.orbit-signature-tabs button + button { border-left: 0; }
.tabs.orbit-signature-tabs button.active { border-color: var(--accent); border-left: 1px solid var(--accent); background: var(--accent-fill); }
.tabs.orbit-signature-tabs svg { width: 18px; height: 18px; }
.orbit-signature-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; margin-bottom: 14px; }
.orbit-signature-code pre { margin: 0; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: 5px; background: var(--mono-bg); font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.orbit-signature-code > div { display: flex; flex-direction: column; gap: 10px; }
.orbit-signature-code .btn { padding: 11px 20px; gap: 12px; font-size: 15px; white-space: nowrap; }
.orbit-signature-code .copied { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--ok); border-radius: 5px; background: var(--ok-fill); color: var(--ok); font-size: 14px; font-weight: 600; }
.orbit-signature-code .copied svg { width: 18px; height: 18px; }

@media (max-width: 1100px) {
    .orbit-profile-columns, .orbit-edit, .orbit-visibility, .orbit-main-aircraft { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
    .orbit-hero .identity { flex-wrap: wrap; }
    .orbit-hero .avatar.big { width: 96px; height: 96px; font-size: 32px; }
    .orbit-hero .visibility { margin-left: 0; }
    .orbit-tiles.profile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .orbit-edit-images, .orbit-signature-code { grid-template-columns: minmax(0, 1fr); }
    .orbit-profile-squadrons .head { flex-wrap: wrap; }
    .orbit-table.profile-aircraft .thead { display: none; }
    .orbit-table.profile-aircraft .trow { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 16px; row-gap: 6px; }
    .orbit-signature-squadron > div { padding-left: 0; border-left: 0; }
}

/* Vue d'ensemble en aperçu (compte DCS à lier) : encadré de ce qui manque, liens visibles mais inactifs */
.orbit-preview { align-items: center; gap: 14px; }
.orbit-preview > svg { width: 22px; height: 22px; flex: none; }
.orbit-preview p { margin: 4px 0 0; }
.orbit-profile .profile-link.off { color: var(--muted); cursor: default; }

/*
 * Constellation (gestion d'escadrille) : barre latérale du module, annuaire, fiche publique, formulaire d'escadrille,
 * membres, vue d'ensemble. Les couleurs viennent des variables de galaxy.css.
 */

/* ------------------------------------------------------------------ coque */
.cst-brand { display: flex; align-items: center; gap: 14px; padding: 14px 20px 18px 24px; }
.cst-brand svg, .cst-brand .tool-logo { width: 36px; height: 36px; color: var(--accent); flex: none; }
.cst-brand strong { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; }
.cst-brand span { color: #c9d1dc; font-size: 14px; }
.cst-current { display: block; margin: 0 14px 10px; }
.cst-current span { display: block; padding: 0 12px 6px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cst-current select { width: 100%; height: 44px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--text); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 5px; }
.cst-current select:focus { outline: none; border-color: var(--accent); }
.cst-current p { margin: 0; padding: 0 12px; font-size: 14px; color: #b7c0cd; }

.page.constellation { display: flex; flex-direction: column; gap: 16px; padding-bottom: 28px; }
.page.constellation .page-lead { margin-bottom: 0; }
.constellation i { font-style: normal; color: var(--muted); margin: 0 6px; }
.cst-none { margin: 0; padding: 26px; border: 1px dashed var(--card-border); border-radius: 6px; color: #b7c0cd; font-size: 15px; }
.cst-foot { margin: 4px; font-size: 14px; color: #b7c0cd; }
.cst-h { margin: 8px 0 0; font-size: 25px; font-weight: 800; }
.cst-back { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; align-self: flex-start; }
.cst-back svg { width: 18px; height: 18px; }
.btn.cst-cta { padding: 10px 20px; gap: 12px; font-size: 15px; white-space: nowrap; }
.btn.cst-cta svg { width: 20px; height: 20px; }
.cst-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px !important; }
.cst-actions .btn { padding: 9px 18px; font-size: 15px; }

/* ------------------------------------------------------------------ logo, bannière, pastilles */
.cst-logo { width: 56px; height: 56px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: #1c2633; border: 1px solid #3a4656; color: #fff; font-weight: 700; font-size: 19px; }
.cst-logo.small { width: 40px; height: 40px; font-size: 14px; border-radius: 6px; }
.cst-logo.large { width: 92px; height: 92px; font-size: 30px; border-radius: 10px; }
.cst-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cst-banner { position: relative; height: 120px; overflow: hidden; background: #0b0e13 url(/build/images/hub-banner.f5968d5b.png) 78% center / cover no-repeat; }
.cst-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cst-roles, .cst-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cst-role { padding: 3px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; background: var(--subtle-fill); color: #c9d1dc; white-space: nowrap; }
.cst-role.admin { background: var(--accent-fill); color: var(--accent); }
.cst-role.instructor { background: var(--info-fill); color: var(--info); }
.cst-chip { padding: 3px 10px; border: 1px solid var(--card-border); border-radius: 12px; font-size: 13px; color: #c9d1dc; white-space: nowrap; }

/* ------------------------------------------------------------------ annuaire */
.cst-toolbar { flex-wrap: wrap; align-items: center; margin-bottom: 0; }
.cst-toolbar .search { min-width: 240px; }
.cst-toolbar .select { min-width: 180px; }
.cst-views { display: inline-flex; border: 1px solid var(--card-border); border-radius: 5px; overflow: hidden; }
.cst-views button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 0; background: var(--panel-bg); color: #c9d1dc; font: inherit; font-size: 15px; cursor: pointer; }
.cst-views button svg { width: 18px; height: 18px; }
.cst-views button.current { background: var(--accent-fill); color: var(--accent); font-weight: 600; }
.cst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.cst-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); }
.cst-card .cst-banner { height: 96px; }
.cst-card .body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 0 18px 16px; }
.cst-card .title { display: flex; align-items: flex-end; gap: 14px; margin-top: -24px; position: relative; }
.cst-card .title > div { min-width: 0; padding-top: 34px; }
.cst-card h2 { margin: 0; font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }
.cst-card .title p { margin: 2px 0 0; font-size: 14px; color: #c9d1dc; }
.cst-card .description { margin: 0; font-size: 15px; line-height: 1.45; color: #c9d1dc; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cst-card .foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--card-border); font-size: 14px; color: #c9d1dc; }
.cst-card .foot > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.cst-card .foot svg { width: 18px; height: 18px; }
.cst-card .foot .btn { margin-left: auto; }

/* ------------------------------------------------------------------ tableaux */
.cst-table { border: 1px solid var(--card-border); border-radius: 5px; background: var(--panel-bg); overflow: hidden; }
.cst-table .thead, .cst-table .trow { display: grid; align-items: center; gap: 16px; padding: 0 18px; }
.cst-table .thead { height: 46px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #c9d1dc; }
.cst-table .trow { min-height: 66px; padding-top: 8px; padding-bottom: 8px; border: 0; border-top: 1px solid var(--card-border); background: transparent; width: 100%; text-align: left; color: inherit; font: inherit; font-size: 15px; }
.cst-table button.trow { cursor: pointer; }
.cst-table button.trow:hover { background: var(--card-bg-hover); }
.cst-table .trow.selected { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 5px; background: var(--accent-fill); }
.cst-table .trow.empty-row { grid-template-columns: minmax(0, 1fr); }
.cst-table .who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cst-table .who strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-table .who .avatar { width: 40px; height: 40px; font-size: 14px; }
.cst-table.directory .thead, .cst-table.directory .trow { grid-template-columns: minmax(180px, 1.4fr) 150px 110px minmax(120px, 1.2fr) 80px 170px 150px; }
.cst-table.public-members .thead, .cst-table.public-members .trow { grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) minmax(160px, 1.4fr); }
.cst-table.members .thead, .cst-table.members .trow { grid-template-columns: minmax(160px, 1fr) minmax(110px, 0.8fr) minmax(140px, 1fr) minmax(120px, 1fr) 96px; }

/* ------------------------------------------------------------------ fiche d'escadrille */
.cst-sheet { border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); overflow: hidden; }
.cst-sheet .cst-banner { height: 180px; }
.cst-sheet.compact { position: relative; }
.cst-sheet.compact .cst-banner { position: absolute; inset: 0; height: auto; }
.cst-sheet.compact .cst-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 14, 19, .88), rgba(11, 14, 19, .55)); }
.cst-sheet.compact .head { position: relative; padding: 18px 24px; }
.cst-sheet.compact .head .cst-logo { margin-top: 0; }
.cst-sheet.compact .head .grow { padding-top: 0; }
.cst-sheet .head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px; padding: 0 24px 18px; }
.cst-sheet .head .cst-logo { margin-top: -34px; position: relative; }
.cst-sheet .head .grow { flex: 1; min-width: 200px; padding-top: 12px; }
.cst-sheet .head h2 { margin: 0; font-size: 26px; font-weight: 800; }
.cst-sheet .head p { margin: 4px 0 0; font-size: 16px; color: #c9d1dc; }
.cst-sheet .head .mine { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cst-sheet .about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; padding: 18px 24px 22px; border-top: 1px solid var(--card-border); }
.cst-sheet .description { margin: 0; font-size: 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-sheet dl { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px 16px; font-size: 15px; }
.cst-sheet dt { color: #c9d1dc; }
.cst-sheet dd { margin: 0; overflow-wrap: anywhere; }
.cst-sheet dd a { display: inline-flex; align-items: center; gap: 8px; }
.cst-sheet dd svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ formulaire */
.cst-form textarea { height: 112px; }
.cst-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.cst-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.cst-picker label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--card-border); border-radius: 5px; font-size: 15px; cursor: pointer; }
.cst-picker label.checked { border-color: var(--accent); background: var(--accent-fill); }
.cst-picker input { accent-color: var(--accent); }
.panel .preview.logo { width: 108px; }
.cst-image-buttons { display: flex; gap: 10px; }
.cst-image-buttons .file-btn { flex: 1; }

/* ------------------------------------------------------------------ fiche d'un membre */
.cst-member .panel-head { align-items: center; }
.cst-member .panel-head h3 { font-size: 22px; }
.cst-member .panel-head p { font-size: 15px; }
.cst-member .panel-head small { color: var(--muted); }
.cst-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.cst-line.end { justify-content: flex-end; margin-top: 12px; }
.cst-switches { display: flex; flex-direction: column; gap: 12px; }
.cst-later { margin: 0; font-size: 15px; }

/* ------------------------------------------------------------------ vue d'ensemble */
.cst-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cst-block { padding: 18px 22px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); min-height: 130px; }
.cst-block.wide { grid-column: 1 / -1; }
.cst-block h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 19px; font-weight: 700; }
.cst-block h3 svg { width: 24px; height: 24px; color: var(--accent); }
.cst-block p { margin: 0; font-size: 15px; }

/* ------------------------------------------------------------------ candidatures, invitations */
.cst-joining { display: flex; flex-direction: column; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--card-border); background: var(--panel-bg); }
.cst-joining .line, .cst-requests article { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.cst-joining .grow, .cst-requests .grow, .cst-applications .grow, .cst-invitations .grow { flex: 1; min-width: 180px; }
.cst-joining .btn, .cst-requests .btn, .cst-applications .btn, .cst-invitations .btn { padding: 8px 16px; font-size: 14.5px; }
.cst-requests { display: flex; flex-direction: column; gap: 10px; }
.cst-requests article { padding: 14px 18px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); }
.cst-requests .grow { display: flex; flex-direction: column; gap: 4px; }
.cst-requests strong { font-size: 17px; }
.cst-requests .grow > span { font-size: 14.5px; color: #c9d1dc; }
.cst-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--accent); color: var(--accent-text); font-size: 13px; font-weight: 700; }
.cst-applications { display: flex; flex-direction: column; gap: 12px; }
.cst-applications article { padding: 14px 16px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); }
.cst-applications header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.cst-applications header strong { display: block; font-size: 17px; }
.cst-applications header span { font-size: 14px; color: #c9d1dc; }
.cst-applications .avatar, .cst-invitations .avatar { width: 40px; height: 40px; font-size: 14px; }
.cst-applications dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 16px; margin: 12px 0 0; font-size: 15px; }
.cst-applications dt { color: #c9d1dc; }
.cst-applications dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-invitations { margin-top: 16px; min-height: 0; }
.cst-invitations form { display: flex; gap: 10px; }
.cst-invitations form .input { flex: 1; height: 40px; font-size: 15px; }
.cst-invitations ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cst-invitations li { display: flex; align-items: center; gap: 12px; }
.cst-invitations li strong { display: block; font-size: 15.5px; }
.cst-invitations li small { color: #c9d1dc; font-size: 13.5px; }
.cst-apply { display: flex; flex-direction: column; }
.cst-apply .lbl { display: block; font-size: 15px; font-weight: 600; margin: 14px 0 8px; }
.cst-apply .lbl small { font-weight: 400; color: var(--muted); font-size: 13px; }
.cst-apply textarea { resize: vertical; }
.cst-apply .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ------------------------------------------------------------------ décisions collégiales, suppression */
.cst-deletion { align-items: center; }
.cst-deletion > svg { width: 30px; height: 30px; flex: none; color: var(--bad); }
.cst-deletion strong { font-size: 17px; }
.cst-deletion small { color: var(--muted); }
.cst-deletion p { margin: 4px 0 0; font-size: 14.5px; color: #c9d1dc; }
.cst-deletion .btn { padding: 8px 16px; font-size: 14.5px; white-space: nowrap; }
.cst-decisions { display: flex; flex-direction: column; gap: 12px; }
.cst-decisions article { padding: 14px 16px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); }
.cst-decisions header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.cst-decisions .grow { flex: 1; min-width: 220px; }
.cst-decisions header strong { display: block; font-size: 17px; }
.cst-decisions header span { font-size: 14px; color: #c9d1dc; }
.cst-decisions header small { color: var(--muted); }
.cst-decisions .btn { padding: 8px 16px; font-size: 14.5px; }
.cst-decisions .votes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.cst-danger { border-color: rgba(255, 0, 0, 0.35); min-height: 0; }
.cst-danger h3 svg { color: var(--bad); }
.cst-danger p { margin-bottom: 14px; color: #c9d1dc; line-height: 1.5; }
.cst-danger .btn { padding: 9px 18px; font-size: 15px; }
.cst-danger .callout { margin-bottom: 12px; }
.cst-tile-link { color: inherit; display: block; }
.cst-tile-link:hover { text-decoration: none; }
.cst-tile-link:hover .orbit-tile { border-color: var(--accent); }
.cst-member .callout { margin-bottom: 14px; font-size: 14.5px; }

.departure-choices { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: #c9d1dc; }

/* ------------------------------------------------------------------ activités */
.cst-activities { display: flex; flex-direction: column; gap: 12px; }
.cst-activity { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; padding: 16px 20px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); }
.cst-block .cst-activity { background: var(--panel-bg); }
.cst-activity.cancelled { opacity: 0.6; }
.cst-activity .grow, .cst-activity-sheet .grow { flex: 1; min-width: 260px; }
.cst-activity .top, .cst-activity-sheet .top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cst-activity h3 { margin: 8px 0 4px; font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }
.cst-activity .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; font-size: 14px; color: #c9d1dc; }
.cst-activity .meta span { display: inline-flex; align-items: center; gap: 8px; }
.cst-activity .meta svg { width: 17px; height: 17px; }
.cst-activity .side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cst-activity .btn { padding: 8px 16px; font-size: 14.5px; white-space: nowrap; }
.cst-when { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15.5px; }
.cst-when svg { width: 18px; height: 18px; color: var(--accent); }
.cst-when small { color: var(--muted); font-size: 13px; }
.cst-type { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; background: var(--subtle-fill); color: #c9d1dc; }
.cst-type svg { width: 15px; height: 15px; }
.cst-type.mission { background: var(--accent-fill); color: var(--accent); }
.cst-type.training { background: var(--info-fill); color: var(--info); }
.cst-type.evaluation { background: var(--ok-fill); color: var(--ok); }
.cst-more { margin: 12px 0 0 !important; }
.cst-more a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.cst-more svg { width: 18px; height: 18px; }
.cst-activity-sheet .head { padding: 20px 24px 18px; align-items: flex-start; }
.cst-activity-sheet .head .grow { padding-top: 0; }
.cst-activity-sheet .page-title { margin: 8px 0 4px; font-size: clamp(24px, 2.4vw, 34px); overflow-wrap: anywhere; }
.cst-activity-sheet .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cst-activity-sheet .actions .btn { padding: 8px 16px; font-size: 14.5px; }
.cst-activity-sheet h3 { margin: 18px 0 6px; font-size: 16px; }
.cst-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cst-links a { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.cst-links svg { width: 16px; height: 16px; flex: none; }
.pill.info { background: var(--info-fill); } .pill.info::before { background: var(--info); }
.cst-activity-facts { display: flex; flex-wrap: wrap; gap: 14px 32px; padding: 16px 24px 20px; border-top: 1px solid var(--card-border); }
.cst-activity-facts > span { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.cst-activity-facts > span > svg { width: 24px; height: 24px; flex: none; color: #c9d1dc; }
.cst-activity-facts > span > span { display: flex; flex-direction: column; min-width: 0; }
.cst-activity-facts strong { font-size: 15.5px; overflow-wrap: anywhere; }
.cst-activity-facts small { font-size: 13px; color: #b7c0cd; }
.cst-activity-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.cst-activity-cols.even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.cst-activity-cols .main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cst-activity-cols .cst-box h4 { margin-top: 16px; }
.cst-activity-cols .callout { margin: 0; align-items: center; }
.cst-activity-cols .callout > svg { width: 26px; height: 26px; flex: none; }
.cst-activity-resources, .cst-my-evaluations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cst-activity-resources li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 0; border-top: 1px solid var(--card-border); }
.cst-activity-resources li:first-child { border-top: 0; padding-top: 0; }
.cst-activity-resources li > svg { width: 22px; height: 22px; flex: none; color: #c9d1dc; }
.cst-activity-resources small { display: block; font-size: 13.5px; color: #b7c0cd; }
.cst-activity-resources a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.cst-activity-resources a svg { width: 16px; height: 16px; }
.cst-answer .choices { display: flex; flex-direction: column; gap: 8px; }
.cst-answer .choices button { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); color: var(--text); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
.cst-answer .choices button i { width: 20px; height: 20px; flex: none; border: 2px solid var(--muted); border-radius: 50%; }
.cst-answer .choices button:hover:not(:disabled) { border-color: var(--muted); }
.cst-answer .choices button:disabled { opacity: 0.45; cursor: not-allowed; }
.cst-answer .choices button small { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--warn); }
.cst-answer .choices button.selected.ok { border-color: var(--ok); background: var(--ok-fill); }
.cst-answer .choices button.selected.warn { border-color: var(--warn); background: var(--warn-fill); }
.cst-answer .choices button.selected.bad { border-color: var(--bad); background: var(--bad-fill); }
.cst-answer .choices button.selected.ok i { border-color: var(--ok); background: radial-gradient(var(--ok) 45%, transparent 50%); }
.cst-answer .choices button.selected.warn i { border-color: var(--warn); background: radial-gradient(var(--warn) 45%, transparent 50%); }
.cst-answer .choices button.selected.bad i { border-color: var(--bad); background: radial-gradient(var(--bad) 45%, transparent 50%); }
.cst-answer .aircraft { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-size: 14.5px; color: #c9d1dc; }
.cst-answer .aircraft .select { width: 100%; min-width: 0; }
.cst-answer .help { margin-top: 10px; font-size: 13.5px; }
.cst-section { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.cst-section .btn { padding: 9px 18px; font-size: 15px; }
.cst-box-title small { font-size: 14px; font-weight: 400; color: #b7c0cd; }
.cst-table.participants .thead, .cst-table.participants .trow { grid-template-columns: minmax(160px, 1.3fr) minmax(130px, 1fr) 140px 160px; }
.cst-table.attendance .thead, .cst-table.attendance .trow { grid-template-columns: minmax(150px, 1.2fr) minmax(150px, 1fr) 150px; }
.cst-table.attendance .select { min-width: 0; width: 100%; height: 40px; font-size: 15px; }
.cst-table.attendance .select.ok { border-color: var(--ok); }
.cst-table.attendance .select.bad { border-color: var(--bad); }
.cst-table.flat .who .avatar { width: 34px; height: 34px; font-size: 13px; }
.cst-add-pilot { width: 100%; margin-top: 12px; }
.cst-presence { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 16.5px; font-weight: 600; }
.cst-presence i { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 800; color: #0b0e13; }
.cst-presence.ok { color: var(--ok); } .cst-presence.ok i { background: var(--ok); }
.cst-presence.bad { color: var(--bad); } .cst-presence.bad i { background: var(--bad); }
.cst-report { padding: 12px 14px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); }
.cst-report-by { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: 13.5px; color: #b7c0cd; }
.cst-activity-cols textarea { width: 100%; resize: vertical; }
.cst-my-evaluations li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--card-border); }
.cst-my-evaluations li:first-child { border-top: 0; padding-top: 0; }
.cst-my-evaluations strong { min-width: 180px; font-size: 16px; }
.cst-my-evaluations small { font-size: 13.5px; color: #b7c0cd; }
.cst-my-evaluations p { flex-basis: 100%; margin: 0; font-size: 14.5px; color: #c9d1dc; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-debrief-actions { align-items: center; }
.cst-debrief-actions .btn { padding: 10px 20px; font-size: 15px; }
.cst-debrief-actions .btn svg { width: 18px; height: 18px; }
.cst-calendar { border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); padding: 16px 18px 18px; }
.cst-calendar > header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cst-calendar > header h2 { margin: 0 8px; min-width: 190px; text-align: center; font-size: 20px; font-weight: 800; }
.cst-calendar > header .btn { padding: 7px 12px; font-size: 14.5px; }
.cst-calendar > header .btn svg { width: 18px; height: 18px; }
.cst-calendar .weekdays, .cst-calendar .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cst-calendar .weekdays span { padding: 0 8px 8px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #c9d1dc; }
.cst-calendar .days { border-top: 1px solid var(--card-border); border-left: 1px solid var(--card-border); }
.cst-calendar .day { display: flex; flex-direction: column; gap: 4px; min-height: 108px; padding: 6px; border-right: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); min-width: 0; }
.cst-calendar .day.other { background: var(--panel-bg); }
.cst-calendar .day.other .number { color: var(--muted); }
.cst-calendar .day .number { align-self: flex-end; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 13.5px; color: #c9d1dc; }
.cst-calendar .day.today .number { background: var(--accent); color: #0b0e13; font-weight: 700; }
.cst-calendar .event { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-left: 3px solid var(--muted); border-radius: 4px; background: var(--subtle-fill); color: var(--text); font-size: 13px; min-width: 0; }
.cst-calendar .event:hover { text-decoration: none; filter: brightness(1.2); }
.cst-calendar .event.mission { border-left-color: var(--accent); background: var(--accent-fill); }
.cst-calendar .event.training { border-left-color: var(--info); background: var(--info-fill); }
.cst-calendar .event.evaluation { border-left-color: var(--ok); background: var(--ok-fill); }
.cst-calendar .event.cancelled { opacity: 0.5; text-decoration: line-through; }
.cst-calendar .event small { flex: none; color: #c9d1dc; }
.cst-calendar .event strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cst-calendar .event i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--muted); }
.cst-calendar .event i.ok { background: var(--ok); } .cst-calendar .event i.warn { background: var(--warn); } .cst-calendar .event i.bad { background: var(--bad); }
.cst-calendar > .muted { margin: 14px 0 0; }
.cst-activity-form .cst-tabs { padding: 0 20px; }
.cst-activity-form .cst-tabs small { font-weight: 400; color: var(--muted); }
.cst-activity-form select { width: 100%; }
.cst-attached { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); }
.cst-attached > svg { width: 22px; height: 22px; flex: none; color: #c9d1dc; }
.cst-attached .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.cst-attached small { font-size: 13.5px; color: #b7c0cd; }
.cst-form .cst-file { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; padding: 12px; border: 1px dashed var(--card-border); border-radius: 6px; color: var(--muted); cursor: pointer; }
.cst-form .cst-file:hover { border-color: var(--accent); color: var(--text); }
.cst-form .cst-file svg { width: 20px; height: 20px; flex: none; }
.cst-form .cst-file input { display: none; }
.cst-evaluation-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; }
.cst-evaluation-facts a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; overflow-wrap: anywhere; }
.cst-evaluation-facts a svg { width: 20px; height: 20px; flex: none; }
.cst-eval.single { grid-template-columns: minmax(0, 1fr); }
.cst-evaluations header .btn { align-self: center; }
.cst-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.panel.cst-form input[type='date'], .panel.cst-form input[type='time'], .panel.cst-form input[type='number'] { width: 100%; height: 46px; padding: 0 16px; font: inherit; font-size: 16px; color: var(--text); background: var(--panel-bg); border: 1px solid var(--card-border); border-radius: 5px; outline: none; color-scheme: dark; }
.panel.cst-form input[type='number'] { max-width: 160px; }
.panel.cst-form input:focus { border-color: var(--accent); }
.cst-link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 44px; gap: 10px; margin-bottom: 8px; }
.cst-link-row .btn svg { width: 18px; height: 18px; }
.cst-form .btn.outline { padding: 8px 16px; font-size: 14.5px; }

/* ------------------------------------------------------------------ formations, parcours, évaluations, dossier */
.cst-formations, .cst-dossier, .cst-evaluations { display: flex; flex-direction: column; gap: 14px; }
.cst-formations article, .cst-dossier article, .cst-evaluations article { padding: 18px 22px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); }
.cst-formations article.archived, .cst-dossier article.frozen { opacity: 0.75; }
.cst-formations header, .cst-dossier header, .cst-evaluations header { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 18px; }
.cst-formations .grow, .cst-dossier .grow, .cst-evaluations .grow, .cst-skills .grow, .cst-flights .grow, .cst-validations .grow { flex: 1; min-width: 200px; }
.cst-formations h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cst-formations header p { margin: 0 0 10px; font-size: 15px; color: #c9d1dc; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-formations .counts { font-size: 14px; color: #c9d1dc; white-space: nowrap; padding-top: 6px; }
.cst-formations .actions { display: inline-flex; gap: 8px; align-items: center; }
.cst-formations .btn, .cst-skills .btn, .cst-evaluations .btn, .cst-flights .btn, .cst-table.parcours .btn { padding: 8px 16px; font-size: 14.5px; white-space: nowrap; }
.cst-formations .btn.icon { padding: 7px 10px; font-size: 16px; }
.cst-formations .btn.icon svg { width: 18px; height: 18px; }
.cst-formations ol { list-style: none; margin: 14px 0; padding: 0; border-top: 1px solid var(--card-border); }
.cst-formations li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--card-border); }
.cst-formations li > svg, .cst-skills article > svg, .cst-dossier li > svg, .cst-validations svg { width: 26px; height: 26px; flex: none; color: var(--accent); }
.cst-formations li strong { font-size: 16.5px; }
.cst-formations li p { margin: 4px 0 0; font-size: 14.5px; color: #c9d1dc; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-formations li .resources { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cst-formations li .resources a { display: inline-flex; align-items: center; gap: 6px; }
.cst-formations li .resources svg { width: 15px; height: 15px; }
.rank { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--subtle-fill); font-size: 13.5px; font-weight: 700; color: #c9d1dc; }
.cst-skills { display: flex; flex-direction: column; gap: 8px; }
.cst-skills article { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; padding: 12px 18px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--card-bg); }
.cst-skills strong { font-size: 16.5px; }
.cst-skills small, .cst-flights small, .cst-validations small, .cst-acquired small, .cst-table.history small { display: block; font-size: 13.5px; color: #c9d1dc; }
.cst-skills .actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.cst-table.parcours .thead, .cst-table.parcours .trow { grid-template-columns: minmax(220px, 1.6fr) minmax(110px, 1fr) minmax(110px, 1fr) 190px 110px 160px; }
.cst-table.history .thead, .cst-table.history .trow { grid-template-columns: 170px minmax(160px, 1.2fr) 220px minmax(110px, 0.8fr) minmax(160px, 1.6fr); }
.cst-table.history.pilots .thead, .cst-table.history.pilots .trow { grid-template-columns: 170px minmax(100px, 0.8fr) minmax(160px, 1.2fr) 220px minmax(110px, 0.8fr) minmax(160px, 1.6fr); }
.cst-table.history .comment { white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-table.matrix .thead, .cst-table.matrix .trow { grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 1fr) 80px 80px; }
.cst-table.matrix .trow { min-height: 48px; }
.cst-evaluations header strong, .cst-dossier h3 { display: block; margin: 0; font-size: 17.5px; font-weight: 700; }
.cst-evaluations header span, .cst-dossier header .grow > span { font-size: 14px; color: #c9d1dc; }
.cst-evaluations .avatar { width: 40px; height: 40px; font-size: 14px; }
.cst-evaluations textarea { margin-top: 12px; resize: vertical; }
.cst-evaluations .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.cst-evaluations .outcome { margin: 10px 0 0; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-dossier ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 28px; }
.cst-dossier li { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 15px; }
.cst-dossier li .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-flights { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; }
.cst-flights .flight { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; width: 100%; padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); }
.cst-flights .flight > svg { width: 24px; height: 24px; flex: none; color: var(--accent); }
.cst-flights .pick { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; max-width: 640px; }
.cst-flights .pick button:not(.btn) { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cst-flights .pick button:not(.btn):hover { border-color: var(--accent); }
.cst-validations, .cst-acquired { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cst-validations li { display: flex; align-items: center; gap: 12px; }
.cst-acquired strong { font-size: 15px; }
.cst-worked { display: flex; flex-direction: column; gap: 10px; }
.cst-worked fieldset { margin: 0; padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 6px; }
.cst-worked fieldset > label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; cursor: pointer; }
.cst-worked input { accent-color: var(--accent); }
.cst-apply .icon-choices button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); color: var(--text); cursor: pointer; }
.cst-apply .icon-choices button svg { width: 22px; height: 22px; }
.cst-apply .icon-choices button.selected { border-color: var(--accent); background: var(--accent-fill); color: var(--accent); }
.cst-apply .cst-link-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 40px; }
.cst-linked-flight .cst-back { margin: 18px 28px 0; background: none; border: 0; color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }

/* ------------------------------------------------------------------ formation : onglets, suivi, parcours, évaluation */
.cst-tabs { margin-bottom: 0; gap: 4px; }
.cst-tabs a, .cst-tabs button { padding: 12px 18px; font-size: 15.5px; white-space: nowrap; }
.cst-tabs a.active, .cst-tabs button.active { color: var(--accent); }
.cst-box { border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); padding: 18px 20px; }
.cst-box > header { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 14px; }
.cst-box > header h2 { margin: 0; font-size: 21px; font-weight: 800; }
.cst-box > header p { margin: 4px 0 0; color: #c9d1dc; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-box .grow, .cst-skill-head .grow { flex: 1; min-width: 200px; }
.cst-box-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 14px; font-size: 18px; font-weight: 700; }
.cst-box-title > svg { width: 22px; height: 22px; flex: none; color: #c9d1dc; }
.cst-box-title > a, .cst-box-title > .btn { margin-left: auto; font-size: 14.5px; font-weight: 600; }
.cst-box-title > .btn + a, .cst-box-title > .cst-tag + a { margin-left: auto; }
.cst-box .btn, .cst-master .btn, .cst-skill-head .btn { padding: 7px 14px; font-size: 14.5px; white-space: nowrap; gap: 8px; }
.cst-box .btn svg, .cst-skill-head .btn svg { width: 16px; height: 16px; }
.cst-box .who, .cst-parcours-bar .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cst-box .who .avatar { width: 42px; height: 42px; font-size: 15px; }
.cst-box .who > svg { width: 30px; height: 30px; flex: none; color: #c9d1dc; }
.cst-box .who strong { display: block; font-size: 16px; }
.cst-box .who > div span { display: block; font-size: 13.5px; color: #b7c0cd; }
.cst-box h4 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: #c9d1dc; display: flex; align-items: center; gap: 8px; }
.cst-box h4 svg { width: 18px; height: 18px; }
.cst-info { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 0; padding: 12px 16px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--subtle-fill); font-size: 14.5px; color: #c9d1dc; }
.cst-info svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.cst-info strong { display: block; color: var(--text); }
.cst-info span { min-width: 0; overflow-wrap: anywhere; }
.cst-state { display: inline-block; padding: 3px 12px; border: 1px solid var(--accent); border-radius: 14px; font-size: 13.5px; color: var(--accent); background: var(--accent-fill); white-space: nowrap; }
.cst-state.done { border-color: var(--ok); color: var(--ok); background: var(--ok-fill); }
.cst-tag { display: inline-block; padding: 2px 10px; border: 1px solid var(--idle); border-radius: 4px; font-size: 13.5px; font-weight: 600; color: #c9d1dc; background: var(--idle-fill); white-space: nowrap; }
.cst-tag.in_progress { border-color: var(--info); color: var(--info); background: var(--info-fill); }
.cst-tag.acquired { border-color: var(--ok); color: var(--ok); background: var(--ok-fill); }
.cst-tag.todo { border-color: var(--accent); color: var(--accent); background: var(--accent-fill); }
.cst-mark { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: #c9d1dc; white-space: nowrap; }
.cst-mark i { width: 18px; height: 18px; margin: 0; flex: none; display: grid; place-items: center; border: 2px solid var(--idle); border-radius: 50%; font-size: 11px; font-weight: 800; color: var(--accent-text); }
.cst-mark.in_progress { color: var(--info); }
.cst-mark.in_progress i { border-color: var(--info); border-right-color: transparent; }
.cst-mark.acquired { color: var(--ok); }
.cst-mark.acquired i { border-color: var(--ok); background: var(--ok); }
.cst-progress { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 14.5px; white-space: nowrap; }
.cst-progress > span { width: 96px; height: 6px; border-radius: 3px; background: var(--subtle-fill); overflow: hidden; }
.cst-progress i { display: block; height: 100%; margin: 0; background: var(--accent); }

/* catalogue, compétences */
.cst-fcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.cst-fcards article { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); }
.cst-fcards article.archived { opacity: 0.7; }
.cst-fcards h2 { margin: 0; font-size: 20px; font-weight: 800; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; overflow-wrap: anywhere; }
.cst-fcards p { margin: 0; }
.cst-fcards .description { color: #c9d1dc; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-fcards .meta { font-size: 14px; color: #b7c0cd; }
.cst-fcards footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.cst-fcards .btn { padding: 7px 14px; font-size: 14.5px; }
.cst-master { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.cst-master > nav { display: flex; flex-direction: column; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); overflow: hidden; }
.cst-master > nav a { display: block; padding: 14px 18px; border-left: 3px solid transparent; border-bottom: 1px solid var(--card-border); color: var(--text); }
.cst-master > nav a:last-child { border-bottom: 0; }
.cst-master > nav a:hover { text-decoration: none; background: var(--card-bg-hover); }
.cst-master > nav a.current { border-left-color: var(--accent); background: var(--accent-fill); }
.cst-master > nav strong { display: block; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.cst-master > nav span { display: block; margin-top: 4px; font-size: 13.5px; color: #b7c0cd; }
.cst-skill-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--card-border); }
.cst-skill-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 0; border-bottom: 1px solid var(--card-border); }
.cst-skill-list li > svg { width: 26px; height: 26px; flex: none; color: var(--accent); }
.cst-skill-list strong { font-size: 16.5px; }
.cst-skill-list p { margin: 3px 0 0; font-size: 14.5px; color: #c9d1dc; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cst-skill-list .actions { display: inline-flex; gap: 2px; }
.cst-skill-list .btn.icon { padding: 7px 9px; font-size: 16px; }

/* suivi des pilotes */
.cst-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
.cst-filters label { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: #c9d1dc; }
.cst-filters .select { min-width: 0; width: 100%; height: 44px; font-size: 15px; }
.cst-filters .search.wide { grid-column: span 2; flex-direction: row; }
.cst-filters .search input { height: 46px; font-size: 15px; }
.cst-filters > .btn { grid-column: 4; justify-self: end; }
.cst-table.tracking .thead, .cst-table.tracking .trow { grid-template-columns: minmax(150px, 1.1fr) minmax(150px, 1.3fr) minmax(110px, 1fr) minmax(100px, 0.9fr) 130px 110px 90px; }
.cst-table.instructors .thead, .cst-table.instructors .trow { grid-template-columns: minmax(160px, 1.2fr) 90px minmax(140px, 1.4fr) 110px 130px 90px 160px; }
.cst-table.tracking .btn, .cst-table.instructors .btn, .cst-table.sessions .btn { padding: 7px 14px; font-size: 14.5px; white-space: nowrap; }
.cst-table.sessions .thead, .cst-table.sessions .trow { grid-template-columns: 150px minmax(160px, 1.6fr) minmax(100px, 0.8fr) minmax(100px, 0.8fr) minmax(100px, 1fr) 150px; }
.cst-table.flat { border: 0; border-radius: 0; background: transparent; }
.cst-table.flat .thead, .cst-table.flat .trow { padding: 0 6px; }
.cst-table.flat .thead { height: 38px; text-transform: none; letter-spacing: 0; font-size: 14px; }
.cst-table.flat .trow { min-height: 48px; padding-top: 5px; padding-bottom: 5px; font-size: 15px; }
.cst-table.board .thead, .cst-table.board .trow { grid-template-columns: 34px minmax(160px, 1.6fr) 150px 150px minmax(100px, 1fr) 120px; }
.cst-table.board.evaluates .thead, .cst-table.board.evaluates .trow { grid-template-columns: 34px minmax(160px, 1.6fr) 150px 150px minmax(100px, 1fr) 210px; }
.cst-table .actions { display: inline-flex; justify-content: flex-end; gap: 8px; }
.cst-table.board a:not(.btn), .cst-skill-list a:not(.btn) { color: var(--text); }
.cst-table.board a:not(.btn):hover, .cst-skill-list a:not(.btn):hover { color: var(--accent); }

/* formation d'un pilote */
.cst-board { display: flex; flex-direction: column; gap: 14px; }
.cst-board-title { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.cst-board-title h2 { margin: 0; font-size: 24px; font-weight: 700; }
.cst-board-title .select { height: 44px; font-size: 16px; font-weight: 600; }
.cst-summary { display: flex; flex-wrap: wrap; gap: 20px 40px; }
.cst-summary > div:first-child { padding-right: 40px; border-right: 1px solid var(--card-border); min-width: 240px; }
.cst-summary h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.cst-summary h3 strong { margin-left: auto; font-size: 20px; font-weight: 800; }
.cst-summary p { margin: 10px 0 0; font-size: 13.5px; color: #b7c0cd; }
.cst-bar { display: flex; align-items: center; gap: 14px; }
.cst-bar > span { flex: 1; height: 12px; border-radius: 6px; background: var(--subtle-fill); overflow: hidden; }
.cst-bar i { display: block; height: 100%; margin: 0; border-radius: 6px; background: var(--accent); }
.cst-bar b { font-size: 14px; font-weight: 400; color: #c9d1dc; white-space: nowrap; }
.cst-aircraft-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding-top: 12px; padding-bottom: 12px; }
.cst-aircraft-tabs > span { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.cst-aircraft-tabs > span svg { width: 24px; height: 24px; color: #c9d1dc; }
.cst-aircraft-tabs [role='tablist'] { display: inline-flex; border: 1px solid var(--card-border); border-radius: 6px; overflow: hidden; }
.cst-aircraft-tabs button { min-width: 140px; height: 40px; padding: 0 20px; border: 0; background: var(--panel-bg); color: #c9d1dc; font: inherit; font-size: 15px; cursor: pointer; }
.cst-aircraft-tabs button.current { background: var(--accent); color: var(--accent-text); font-weight: 700; }
.cst-parcours-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 24px; }
.cst-parcours-bar .who { margin-right: 16px; align-self: center; }
.cst-parcours-bar label, .cst-eval-head .reference label { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 180px; font-size: 14.5px; color: #c9d1dc; }
.cst-parcours-bar .select { min-width: 0; width: 100%; height: 44px; font-size: 15px; }

/* évaluer */
.cst-eval-head { padding: 0; }
.cst-eval-head .cst-parcours-bar { border: 0; border-bottom: 1px solid var(--card-border); border-radius: 0; background: transparent; }
.cst-eval-head .reference { padding: 14px 20px 18px; }
.cst-eval-head .reference label { margin-bottom: 8px; }
.cst-eval-head .reference > div { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); }
.cst-eval-head .reference svg { width: 20px; height: 20px; flex: none; color: #c9d1dc; }
.cst-eval-head .reference .select { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font-size: 15.5px; }
.cst-eval { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; padding: 0; }
.cst-eval > nav { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; border-right: 1px solid var(--card-border); }
.cst-eval > nav h3 { margin: 0 8px 10px; font-size: 16px; font-weight: 600; }
.cst-eval > nav button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-left: 3px solid transparent; border-radius: 4px; background: transparent; color: #c9d1dc; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.cst-eval > nav button:hover { background: var(--card-bg-hover); }
.cst-eval > nav button.current { border-left-color: var(--accent); background: var(--accent-fill); color: var(--accent); font-weight: 600; }
.cst-eval > nav svg { width: 20px; height: 20px; flex: none; }
.cst-eval > nav .grow { flex: 1; min-width: 0; }
.cst-eval .cst-dot { display: block; width: 9px; height: 9px; padding: 0; margin: 0; border-radius: 50%; background: var(--idle); flex: none; }
.cst-eval .cst-dot.in_progress { background: var(--info); }
.cst-eval .cst-dot.acquired { background: var(--ok); }
.cst-eval .body { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 20px; min-width: 0; }
.cst-eval .body > header { display: flex; align-items: flex-start; gap: 14px; }
.cst-eval .body > header svg { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.cst-eval .body h2 { margin: 0; font-size: 18px; font-weight: 700; }
.cst-eval .body > header p { margin: 4px 0 0; font-size: 14.5px; color: #c9d1dc; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-eval .criteria { padding: 14px 16px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); }
.cst-eval .criteria ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: #c9d1dc; }
.cst-eval .criteria li::before { content: '→'; margin-right: 10px; color: var(--muted); }
.cst-eval .criteria p { margin: 0; }
.cst-eval .body > h4 { margin: 4px 0 0; color: var(--text); font-size: 15.5px; }
.cst-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cst-states label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--card-border); border-radius: 6px; cursor: pointer; }
.cst-states label.checked { border-color: var(--accent); background: var(--accent-fill); }
.cst-states label.acquired.checked { border-color: var(--ok); background: var(--ok-fill); }
.cst-states input, .cst-correct input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--accent); }
.cst-states label.acquired input { accent-color: var(--ok); }
.cst-states strong { display: block; font-size: 15.5px; }
.cst-states small { display: block; margin-top: 3px; font-size: 13px; color: #b7c0cd; }
.cst-eval .lbl { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 -6px; font-size: 15px; font-weight: 600; }
.cst-eval textarea { resize: vertical; }
.cst-eval .cst-info { margin-top: 0; }
.cst-eval .actions { display: flex; justify-content: flex-end; gap: 10px; }
.cst-eval .actions .btn { padding: 9px 20px; font-size: 15px; }
.lbl b { color: var(--accent); font-weight: 600; }
.lbl .count { margin-left: auto; float: right; }

/* historique d'une compétence */
.cst-timeline { list-style: none; margin: 0; padding: 0; }
.cst-timeline li { position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 18px; padding: 0 0 22px 30px; }
.cst-timeline li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--idle); }
.cst-timeline li.in_progress::before { background: var(--info); }
.cst-timeline li.acquired::before { background: var(--ok); }
.cst-timeline li.todo::before { background: var(--accent); }
.cst-timeline li::after { content: ''; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: var(--card-border); }
.cst-timeline li:last-child { padding-bottom: 0; }
.cst-timeline li:last-child::after { display: none; }
.cst-timeline time { width: 150px; flex: none; font-size: 15px; }
.cst-timeline time small { display: block; color: #b7c0cd; font-size: 14px; }
.cst-timeline p { margin: 0 0 8px; }
.cst-timeline .what { font-size: 14.5px; color: #c9d1dc; }
.cst-timeline .what .cst-tag { margin-right: 10px; }
.cst-timeline .what strong { color: var(--text); }
.cst-timeline .comment { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-timeline .session { display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); font-size: 14.5px; color: #c9d1dc; }
.cst-timeline .session > svg { width: 18px; height: 18px; flex: none; }
.cst-correct { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; margin-top: 6px; }
.cst-correct fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
.cst-correct fieldset label { display: flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; }
.cst-correct textarea { width: 100%; resize: vertical; }

/* fiche d'une compétence */
.cst-skill-head { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.cst-skill-head .icon { width: 72px; height: 72px; flex: none; display: grid; place-items: center; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); }
.cst-skill-head .icon svg { width: 40px; height: 40px; }
.cst-skill-head .page-title { font-size: clamp(24px, 2.2vw, 32px); overflow-wrap: anywhere; }
.cst-skill-head p { margin: 6px 0 0; font-size: 15.5px; color: #c9d1dc; }
.cst-skill-head p strong { color: var(--text); }
.cst-prose { margin: 0; font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-criteria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cst-criteria li { display: flex; align-items: flex-start; gap: 14px; font-size: 15.5px; }
.cst-criteria li span { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 13.5px; font-weight: 800; }
.cst-follow .cst-three { gap: 18px 24px; }
.cst-follow .cst-three p { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 15.5px; }
.cst-follow .cst-three p svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #c9d1dc; }
.cst-follow small { display: block; font-size: 13.5px; color: #b7c0cd; }
.cst-last-comment { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 18px; }
.cst-last-comment h4 { margin: 10px 0 0; }
.cst-last-comment p { margin: 0; padding: 12px 16px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-last-comment small { margin-top: 6px; }

/* séance */
.cst-session-when { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; font-size: 17px; color: #c9d1dc; }
.cst-session-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; }
.cst-session-facts > div { padding: 16px 20px; border-right: 1px solid var(--card-border); display: flex; flex-direction: column; gap: 6px; }
.cst-session-facts > div:last-child { border-right: 0; }
.cst-session-facts p { margin: 0; }
.cst-session-facts .presence { width: 30px; height: 30px; margin: 0; flex: none; display: grid; place-items: center; border: 2px solid var(--idle); border-radius: 50%; font-weight: 800; color: var(--accent-text); }
.cst-session-facts .presence.ok { border-color: var(--ok); background: var(--ok); }
.cst-session-facts .presence.bad { border-color: var(--bad); }
.cst-worked-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cst-worked-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--accent); border-radius: 18px; font-size: 14.5px; color: var(--text); }
.cst-worked-chips svg { width: 16px; height: 16px; }
.cst-comment { padding: 12px 14px; border-radius: 6px; background: var(--panel-bg); }
.cst-comment + .cst-comment { margin-top: 10px; }
.cst-comment p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cst-box .cst-flights { margin-top: 0; }

/* inscription */
.cst-enroll .cst-two { gap: 0 28px; }
.cst-enroll input[type='date'] { width: 100%; }
.cst-enroll .help { margin: 8px 0 6px; font-size: 13.5px; color: #b7c0cd; }
.cst-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cst-pills button { padding: 5px 14px; border: 1px solid var(--card-border); border-radius: 16px; background: transparent; color: #c9d1dc; font: inherit; font-size: 13.5px; cursor: pointer; }
.cst-pills button.selected { border-color: var(--accent); color: var(--accent); background: var(--accent-fill); }
.cst-multi { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 46px; padding: 5px 8px; border: 1px solid var(--card-border); border-radius: 5px; background: var(--panel-bg); }
.cst-multi > span { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border: 1px solid var(--card-border); border-radius: 4px; background: var(--subtle-fill); font-size: 14.5px; }
.cst-multi > span button { border: 0; background: none; color: #c9d1dc; font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px; }
.cst-multi select { flex: 1; min-width: 150px; height: 34px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; }
.cst-multi select:focus { outline: none; }
.btn.cst-attach { align-self: flex-start; gap: 10px; padding: 9px 16px; font-size: 14.5px; }
.btn.cst-attach svg { width: 18px; height: 18px; }

@media (max-width: 1100px) {
    .cst-master, .cst-eval, .cst-correct, .cst-last-comment { grid-template-columns: 1fr; }
    .cst-eval > nav { border-right: 0; border-bottom: 1px solid var(--card-border); }
    .cst-filters, .cst-session-facts, .cst-states { grid-template-columns: 1fr 1fr; }
    .cst-filters > .btn { grid-column: auto; }
    .cst-summary > div:first-child { border-right: 0; padding-right: 0; }
}

/* Ressources et imports */
.cst-upload { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cst-upload small { color: var(--muted); overflow-wrap: anywhere; }
.cst-upload.refused small { color: var(--bad); }
.cst-upload-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.cst-apply .cst-file { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; padding: 12px; border: 1px dashed var(--card-border); border-radius: 6px; color: var(--muted); cursor: pointer; overflow-wrap: anywhere; }
.cst-apply .cst-file:hover { border-color: var(--accent); color: var(--text); }
.cst-apply .cst-file svg { width: 20px; height: 20px; flex: none; }
.cst-apply .cst-file input { display: none; }
.cst-apply .help { margin: 0 0 10px; font-size: 13px; color: var(--muted); }

@media (max-width: 1100px) {
    .cst-sheet .about, .cst-blocks, .cst-two, .cst-three, .cst-activity-cols, .cst-activity-cols.even { grid-template-columns: 1fr; }
    .cst-evaluation-facts { grid-template-columns: 1fr 1fr; }
    .cst-calendar .day { min-height: 84px; padding: 4px; }
    .cst-calendar .event small { display: none; }
    .cst-table.participants .thead { display: none; }
    .cst-table.participants .trow { grid-template-columns: 1fr 1fr; }
    .cst-table.directory .thead { display: none; }
    .cst-table.directory .trow { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ bibliothèque de ressources */
.cst-res-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 6px; background: var(--subtle-fill); color: #c9d1dc; }
.cst-res-icon svg { width: 20px; height: 20px; }
.cst-res-icon.pdf { background: var(--bad-fill); color: #ff6b6b; }
.cst-res-icon.link { background: var(--info-fill); color: var(--info); }
.cst-res-state.warn { color: var(--warn); }
.cst-res-state.bad { color: var(--bad); }
.help.bad { color: var(--bad); }

.cst-library { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card-bg); }
.cst-library .search { flex: none; }
.cst-library .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
.cst-library .filters label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #c9d1dc; }
.cst-library .filters .select { min-width: 170px; }
.cst-library .filters .switches { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-left: auto; padding-bottom: 8px; }
.cst-library .bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent-fill); }
.cst-library .bulk strong { margin-right: auto; }
.cst-library .bulk .btn { padding: 7px 14px; font-size: 14.5px; }
.cst-library footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cst-library .pager { display: inline-flex; align-items: center; gap: 10px; }
.cst-library .pager .btn { padding: 6px 10px; }
.cst-library .pager .btn svg { width: 16px; height: 16px; }
.cst-table.library .thead, .cst-table.library .trow { grid-template-columns: 24px minmax(220px, 2fr) minmax(110px, 1fr) minmax(110px, 0.9fr) minmax(150px, 1.1fr) 130px 150px; }
.cst-table.library .trow.archived { opacity: 0.7; }
.cst-table.library .who a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cst-table.library .state { display: flex; flex-wrap: wrap; gap: 6px; }
.cst-table.library .actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.cst-table.library .btn { padding: 7px 14px; font-size: 14.5px; white-space: nowrap; }
.cst-table.library .btn.icon { padding: 7px 9px; }
.cst-table.library .btn svg { width: 16px; height: 16px; }
.cst-table.library input[type='checkbox'], .cst-res-picker input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--accent); }

.cst-res-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.cst-res-head .cst-res-icon { width: 56px; height: 56px; }
.cst-res-head .cst-res-icon svg { width: 28px; height: 28px; }
.cst-res-head .grow { flex: 1; min-width: 220px; }
.cst-res-head .page-title { font-size: clamp(24px, 2.2vw, 32px); overflow-wrap: anywhere; }
.cst-res-head .pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.cst-res-head .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cst-res-head .btn { padding: 8px 16px; font-size: 14.5px; gap: 8px; }
.cst-res-head .btn svg { width: 16px; height: 16px; }
.cst-res-type { padding: 3px 10px; border-radius: 4px; font-size: 13px; font-weight: 700; }
.cst-res-type.pdf { background: var(--bad-fill); color: #ff6b6b; }
.cst-res-type.link { background: var(--info-fill); color: var(--info); }
.btn.outline.accent-line { border-color: var(--accent); color: var(--accent); }
.cst-res-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.cst-res-cols.single { grid-template-columns: minmax(0, 1fr); }
.cst-res-tiles { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.cst-res-tiles > span { display: flex; align-items: center; gap: 12px; min-width: 180px; padding: 10px 16px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); }
.cst-res-tiles svg { width: 24px; height: 24px; flex: none; color: #c9d1dc; }
.cst-res-tiles small { display: block; font-size: 13px; color: #b7c0cd; }
.cst-res-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 28px; margin: 18px 0; font-size: 15px; }
.cst-res-facts dt { display: flex; align-items: center; gap: 10px; color: #c9d1dc; }
.cst-res-facts dt svg { width: 18px; height: 18px; }
.cst-res-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cst-res-cols .cst-line { justify-content: flex-start; }
.cst-res-cols .btn.accent { padding: 10px 20px; font-size: 15px; }
.cst-info.bad { border-color: rgba(255, 0, 0, 0.35); background: var(--bad-fill); }
.cst-res-preview { display: flex; min-height: 520px; padding: 0; overflow: hidden; }
.cst-res-preview iframe { flex: 1; width: 100%; min-height: 520px; border: 0; background: #fff; }
.cst-res-preview .empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px; }
.cst-res-preview .empty strong { font-size: 18px; color: var(--text); }
.cst-res-preview .empty p { margin: 0; }
.cst-res-preview .mark { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid currentColor; border-radius: 50%; }
.cst-res-preview .mark svg { width: 26px; height: 26px; }
.cst-res-preview .mark.warn { color: var(--warn); }
.cst-res-preview .mark.bad { color: var(--bad); }
.cst-res-preview .reason { margin-top: 12px; padding: 12px 16px; border: 1px solid rgba(255, 0, 0, 0.35); border-radius: 6px; background: var(--bad-fill); text-align: left; color: var(--text); }
.cst-res-preview .reason strong { display: block; font-size: 14px; color: #ff6b6b; }
.cst-res-uses { list-style: none; margin: 0; padding: 0; }
.cst-res-uses li { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--card-border); }
.cst-res-uses li:first-child { border-top: 0; }
.cst-res-uses svg { width: 20px; height: 20px; flex: none; }
.cst-res-uses strong { width: 130px; flex: none; }
.cst-res-uses .grow { color: #c9d1dc; overflow-wrap: anywhere; }

.cst-res-form .input, .cst-res-form select.input { width: 100%; }
.cst-res-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.cst-res-types button { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.cst-res-types button:hover { border-color: var(--muted); }
.cst-res-types button.selected { border-color: var(--accent); background: var(--accent-fill); }
.cst-res-types button.selected svg { color: var(--accent); }
.cst-res-types svg { width: 30px; height: 30px; flex: none; color: #c9d1dc; }
.cst-res-types strong { display: block; font-size: 16px; }
.cst-res-types small { font-size: 13.5px; color: #b7c0cd; }
.cst-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border: 1px dashed #5a6676; border-radius: 6px; color: #c9d1dc; text-align: center; cursor: pointer; }
.cst-drop:hover, .cst-drop.over { border-color: var(--accent); background: var(--accent-fill); }
.cst-drop input { display: none; }
.cst-drop small { font-size: 13px; color: #b7c0cd; }
.cst-drop .chosen { display: flex; align-items: center; gap: 14px; width: min(100%, 520px); margin-bottom: 8px; text-align: left; }
.cst-drop .chosen .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cst-drop .chosen strong { display: block; color: var(--text); }
.cst-apply .cst-drop + .help { margin-top: 6px; }
.cst-apply .cst-info { margin-bottom: 4px; }

.cst-res-attach { display: flex; flex-direction: column; gap: 10px; }
.cst-res-attach .buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 6px; }
.cst-res-attach .buttons .btn { justify-content: center; gap: 10px; padding: 10px 14px; font-size: 14.5px; border-color: var(--card-border); color: var(--text); }
.cst-res-attach .buttons .btn.accent-line { border-color: var(--accent); color: var(--accent); }
.cst-res-attach .buttons .btn svg { width: 18px; height: 18px; }
.cst-res-attach .cst-attached { margin-bottom: 0; }
.cst-res-attach .cst-attached .btn { padding: 7px 14px; font-size: 14px; gap: 8px; white-space: nowrap; }
.cst-res-attach .cst-attached .btn svg { width: 15px; height: 15px; }
.cst-res-picker { gap: 12px; }
.cst-res-picker .count { margin: 0; font-size: 14px; }
.cst-res-picker .list { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; border: 1px solid var(--card-border); border-radius: 6px; }
.cst-res-picker .list > p { margin: 0; padding: 16px; }
.cst-res-picker .list label { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--card-border); cursor: pointer; }
.cst-res-picker .list label:first-child { border-top: 0; }
.cst-res-picker .list label.checked { background: var(--accent-fill); }
.cst-res-picker .list label.taken { opacity: 0.5; cursor: not-allowed; }
.cst-res-picker .list .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cst-res-picker .list strong { display: block; }
.cst-res-picker .list small { font-size: 13.5px; color: #b7c0cd; }
.cst-res-picker .actions { align-items: center; }
.cst-res-picker .actions .grow { flex: 1; }
.cst-activity-resources li > .cst-res-icon { width: 34px; height: 34px; }
.cst-activity-resources li a strong { color: var(--text); }

@media (max-width: 1100px) {
    .cst-res-cols, .cst-res-types, .cst-res-attach .buttons { grid-template-columns: minmax(0, 1fr); }
    .cst-table.library .thead { display: none; }
    .cst-table.library .trow { grid-template-columns: 24px minmax(0, 1fr); row-gap: 6px; }
    .cst-table.library .trow > span:nth-child(n + 3) { grid-column: 2; }
    .cst-library .filters .switches { margin-left: 0; }
}

/* ------------------------------------------------------------------ grades et insignes */
.cst-rank { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cst-rank img { width: 24px; height: 24px; flex: none; object-fit: contain; }
.cst-rank > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-admin-tabs { margin-bottom: 4px; }
.cst-table .thead .sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.cst-table .thead .sort svg { width: 14px; height: 14px; transform: rotate(90deg); opacity: 0.5; }
.cst-table .thead .sort.active { color: var(--accent); }
.cst-table .thead .sort.active svg { opacity: 1; }
.cst-table.ranks .thead, .cst-table.ranks .trow { grid-template-columns: 24px 48px minmax(180px, 1fr) minmax(180px, 1.2fr) 90px 96px; }
.cst-table.ranks .trow { cursor: grab; }
.cst-table.ranks .trow.empty-row { grid-template-columns: minmax(0, 1fr); cursor: default; }
.cst-table.ranks .trow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cst-table.ranks .trow.dragging { opacity: 0.4; }
.cst-table.ranks .trow.drop { box-shadow: inset 0 3px 0 var(--accent); }
.cst-table.ranks .grip { display: grid; place-items: center; color: #8d97a6; }
.cst-table.ranks .grip svg { width: 20px; height: 20px; }
.cst-table.ranks .name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cst-table.ranks .name strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-table.ranks .actions .btn { padding: 7px 9px; }
.cst-insignia { display: block; width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 4px; background: #18222e; }
.cst-insignia.large { width: 96px; height: 96px; }
.cst-insignia-edit { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.cst-insignia-edit .cst-image-buttons { flex-direction: column; align-items: stretch; }
.cst-insignia-edit .btn { cursor: pointer; }
.cst-choices { display: flex; flex-direction: column; gap: 12px; }
.cst-choices label { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 15px; cursor: pointer; }
.cst-choices label.disabled { color: var(--muted); cursor: default; }
.cst-choices input { accent-color: var(--accent); }

/* ------------------------------------------------------------------ lien vers le profil pilote (fiche d'un membre) */
.btn.cst-profile-link { margin-top: 10px; padding: 6px 14px; gap: 8px; font-size: 14px; }
.btn.cst-profile-link svg { width: 18px; height: 18px; }

/*
 * Pulsar (lecture de tracks) : barre latérale du module (sélecteur de connecteur), états de l'en-tête, écrans d'un
 * connecteur, barre de lecture. Reprend la coque d'Orbit et de Constellation ; les couleurs viennent de galaxy.css.
 */

/* ------------------------------------------------------------------ coque */
.pulsar-current .pick { position: relative; display: block; }
.pulsar-current .pick select { padding-left: 34px; }
.pulsar-current .pick .pulsar-dot { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--idle); pointer-events: none; }
.pulsar-current .pick .pulsar-dot.ok { background: var(--ok); }
.pulsar-current .pick .pulsar-dot.warn { background: var(--warn); }

/* Trois états du connecteur ouvert, après le fil d'Ariane */
.pulsar-states { display: inline-flex; align-items: center; gap: 6px 14px; margin-left: 10px; flex-wrap: wrap; min-width: 0; }
.topbar:has(.pulsar-states) > span:not(.pulsar-states) { white-space: nowrap; }
.pulsar-states > span { display: inline-flex; align-items: center; gap: 8px; }
.pulsar-states small { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.page.pulsar.screen { flex: 1; display: flex; flex-direction: column; gap: 16px; padding-bottom: 28px; }
.page.pulsar .page-lead { margin-bottom: 0; }
.page.pulsar .card .section { font-size: 12px; }

/* ------------------------------------------------------------------ lecture */
.pulsar-play { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
/*
 * Écran Lecture : la colonne tient dans la fenêtre (barre de lecture comprise) ; les deux cartes en occupent le reste
 * et seules leurs listes défilent, jamais la page. Filtre, import et zone de dépôt restent en vue.
 */
.content:has(.page.pulsar.lecture) { height: 100vh; height: 100dvh; }
.page.pulsar.lecture { min-height: 0; padding-bottom: 16px; }
.page.pulsar.lecture .pulsar-play { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.pulsar-list-card { display: flex; flex-direction: column; min-height: 0; }
.pulsar-list-card > * { flex: none; }
.pulsar-list-card .pulsar-dropzone { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.pulsar-list-card .pulsar-dropzone > * { flex: none; }
.pulsar-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.pulsar-blocked { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 6px; background: var(--warn-fill); color: var(--warn); }
.pulsar-blocked svg { width: 18px; height: 18px; flex: none; }

/* Zone de dépôt : la liste entière accepte un track glissé depuis la bibliothèque */
.pulsar-dropzone { border-radius: 8px; transition: box-shadow 0.15s; }
.pulsar-dropzone.over { box-shadow: 0 0 0 2px var(--accent); }
.pulsar-drop { margin-top: 8px; padding: 10px 12px; border: 1.5px dashed var(--card-border); border-radius: 8px; color: var(--muted); font-size: 12.5px; text-align: center; }
.pulsar-dropzone.over .pulsar-drop { border-color: var(--accent); color: var(--accent); background: var(--accent-fill); }
.pulsar-drop.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 32px 16px; font-size: 13px; }
.pulsar-drop.empty svg { width: 22px; height: 22px; }
.pulsar-drop.empty strong { color: var(--text); font-size: 15px; }

.pulsar-filter { display: block; flex: none; margin-bottom: 10px; }
.pulsar-filter svg { left: 12px; width: 18px; height: 18px; }
.pulsar-filter input { height: 38px; padding-left: 40px; font-size: 14px; }
.track[draggable='true'] { cursor: grab; }
.pulsar-badge { flex: none; padding: 2px 8px; border-radius: 4px; background: var(--accent-fill); color: var(--accent); font-size: 11.5px; font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------------ options, serveur */
.pulsar-advanced > summary { list-style: none; }
.pulsar-advanced > summary::-webkit-details-marker { display: none; }
.pulsar-advanced-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 12px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card-bg); cursor: pointer; }
.pulsar-advanced-head:hover { background: var(--card-bg-hover); }
.pulsar-advanced-head svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform 0.15s; }
.pulsar-advanced[open] .pulsar-advanced-head svg { transform: rotate(90deg); }
.pulsar-advanced-head strong { display: block; font-size: 15px; }
.pulsar-advanced-head small { display: block; color: var(--muted); font-size: 12.5px; }

.pulsar-form { max-width: 820px; }

/* ------------------------------------------------------------------ journal */
.page.pulsar .log { font-family: inherit; font-size: 13px; }
.page.pulsar .log .time { font-variant-numeric: tabular-nums; }
.page.pulsar .log .message { font-family: var(--mono); font-size: 12px; }

/* ------------------------------------------------------------------ mises à jour, à propos */
.pulsar-update-state { border-left: 3px solid var(--idle); }
.pulsar-update-state.ok { border-left-color: var(--ok); }
.pulsar-update-state.warn { border-left-color: var(--warn); }
.pulsar-update-state .head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pulsar-update-state .head .grow { flex: 1; min-width: 220px; }
.pulsar-update-state .head p { margin: 0; }
.pulsar-update-state .list { margin-top: 14px; }

/* Cartes d'une même ligne à la même hauteur */
.pulsar-about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; max-width: 1100px; }
/* Logo Orionsys à droite du texte ; fond blanc : logo noir lisible en thème sombre (comme les textes juridiques) */
.pulsar-credits { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pulsar-credits img { flex: none; width: 120px; height: auto; padding: 8px; background: #fff; border-radius: 8px; }

/* ------------------------------------------------------------------ barre de lecture */
.transport { z-index: 5; }
/* Avertissement du connecteur : au-dessus de la barre de lecture */
.content:has(.transport) .snackbar { bottom: 120px; }
.content:has(.transport.compact) .snackbar { bottom: 64px; }
.transport .reason { display: inline-flex; align-items: center; gap: 8px; max-width: 300px; color: var(--warn); font-size: 13px; }
.transport .reason svg { width: 18px; height: 18px; flex: none; }
.transport.compact { padding: 8px 24px; gap: 12px; }
.transport.compact .dot { width: 10px; height: 10px; }
.transport.compact .title { font-size: 13px; white-space: nowrap; }
.transport.compact .detail { flex: 1; min-width: 0; }
.transport.compact .progress { width: 160px; flex: none; margin: 0; height: 4px; }

@media (max-width: 1100px) {
    .pulsar-play, .pulsar-about { grid-template-columns: minmax(0, 1fr); }
    /* Cartes l'une sous l'autre : la page défile pour passer de l'une à l'autre, chaque liste garde son défilement */
    .content:has(.page.pulsar.lecture) { height: auto; }
    .page.pulsar.lecture .pulsar-play { grid-template-rows: none; }
    .pulsar-scroll { max-height: 55vh; }
}
@media (max-width: 700px) {
    .pulsar-states { margin-left: 0; gap: 8px; }
    .pulsar-states small { display: none; }
    .transport .reason { width: 100%; max-width: none; }
    .transport.compact .progress { display: none; }
}

/*
 * Accueil d'un nouveau compte (Bienvenue, Identité) : plein écran, fond sombre, accent orange. Les champs de
 * l'identité (callsign, grille des pilotes) servent aussi dans Orbit, où elle se modifie.
 */
.onboarding { position: relative; min-height: 100vh; display: flex; flex-direction: column; color: #fff; background: #080c12; }
.onboarding h1 { margin: 0; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.06; font-weight: 800; letter-spacing: -0.01em; }
.onboarding-next {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 36px; border: 0; border-radius: 6px;
    background: var(--accent); color: var(--accent-text); font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.onboarding-next:hover:not(:disabled) { filter: brightness(1.07); text-decoration: none; }
.onboarding-next:disabled { opacity: 0.45; cursor: not-allowed; }
.onboarding-next:focus-visible, .onboarding-back:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.onboarding-back { color: #c9d1dc; font-size: 18px; padding: 12px 4px; }
.onboarding-back:hover { color: #fff; text-decoration: none; }

/* Bienvenue : base aérienne au couchant, assombrie pour le texte, centré dans l'écran */
.onboarding.welcome {
    justify-content: center; align-items: center; padding: clamp(96px, 14vh, 150px) clamp(20px, 6vw, 96px);
    background:
        radial-gradient(70% 60% at 50% 50%, rgba(8, 12, 18, 0.78) 0%, rgba(8, 12, 18, 0.5) 100%),
        linear-gradient(180deg, rgba(8, 12, 18, 0.55) 0%, rgba(8, 12, 18, 0.1) 40%, rgba(8, 12, 18, 0.85) 100%),
        url(/build/images/hub-banner.f5968d5b.png) 82% center / cover no-repeat,
        #080c12;
}
.onboarding.welcome .brand { position: absolute; top: clamp(24px, 5vh, 56px); left: clamp(24px, 6vw, 96px); align-items: flex-start; }
.welcome-body { max-width: 820px; text-align: center; }
.welcome-body h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); }
.welcome-body p { margin: 22px auto 44px; max-width: 26em; font-size: clamp(18px, 1.9vw, 26px); line-height: 1.3; color: rgba(255, 255, 255, 0.88); }

/* Identité */
.onboarding.identity { align-items: center; padding: clamp(24px, 5vh, 56px) 20px; background: radial-gradient(90% 60% at 50% 0%, #1a1410 0%, #0b1017 58%, #080c12 100%); }
.onboarding.identity form { width: 100%; max-width: 860px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.onboarding.identity h1 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 28px; }
.onboarding.identity h2 { margin: 30px 0 14px; font-size: 22px; font-weight: 700; }
.onboarding.identity .help { margin: 10px 0 0; font-size: 15px; color: #aeb7c4; }
.onboarding.identity .avatar-grid { max-height: max(244px, calc(100vh - 540px)); }
.onboarding.identity .notice, .onboarding.identity .callout { margin-top: 18px; }
.onboarding-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding-bottom: 8px; }

.callsign-field label { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 600; color: #fff; }
.callsign-field input {
    width: 100%; max-width: 440px; height: 56px; padding: 0 20px; font: inherit; font-size: 19px; color: #fff; background: #0f151d;
    border: 1px solid #333e4d; border-radius: 6px; outline: none;
}
.callsign-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-fill); }
.callsign-field .callsign-rules, .callsign-field .help { margin: 8px 0 0; font-size: 14px; color: #aeb7c4; }

.avatar-grid {
    /* Lignes à la hauteur des vignettes : en auto, une hauteur plafonnée les écrase et les vignettes se chevauchent */
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: max-content; gap: 12px; padding: 6px; overflow-y: auto; overscroll-behavior: contain;
    max-height: 360px; border: 1px solid var(--card-border); border-radius: 8px; background: rgba(8, 12, 18, 0.6); scrollbar-color: #3a4656 transparent;
}
.avatar-grid label { position: relative; display: block; aspect-ratio: 1; border: 3px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: #111a23; scroll-margin: 12px; }
.avatar-grid label:hover { border-color: #56637a; }
.avatar-grid input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.avatar-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-grid label.selected { border-color: var(--accent); }
.avatar-grid label:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 1px; }
.avatar-grid .tick { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: none; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.avatar-grid label.selected .tick { display: grid; }
.avatar-grid .tick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.avatar-grid-wait { min-height: 244px; display: grid; place-content: center; justify-items: center; gap: 14px; border: 1px solid var(--card-border); border-radius: 8px; }

/* Mon compte : identité en lecture seule */
.identity-card { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.identity-card strong { display: block; font-size: 20px; }
.identity-card span { color: var(--muted); font-size: 13px; }

/* Orbit : modification de l'identité (profil du pilote) */
.orbit-edit-title ~ .avatar-grid { margin: 8px 0; max-height: 300px; }
.panel .callsign-field { margin-bottom: 14px; }
.panel .callsign-field label { font-size: inherit; }

@media (max-width: 640px) {
    .onboarding-actions { flex-direction: column-reverse; align-items: stretch; }
    .onboarding-actions .onboarding-back { text-align: center; }
    .avatar-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
    .callsign-field input { max-width: none; }
}

/* Mon compte : modification de l'identité sur place */
.identity-edit { display: grid; gap: 14px; margin-bottom: 18px; }
.identity-edit .identity-card { margin-bottom: 0; }
.identity-edit .avatar-grid { max-height: 300px; }
.identity-card .grow { flex: 1; min-width: 0; }
.identity-edit .identity-label { margin-bottom: -4px; font-size: 17px; font-weight: 600; color: #fff; }

/*
 * Visites guidées (web/components/Tutorial.tsx) : page assombrie et bloquée, cible éclairée d'un liseré orange, bulle
 * à flèche, bouton « Passer la visite » en haut à droite.
 */
.tour { position: fixed; inset: 0; z-index: 1000; }
/* Capte tout : ni clic ni survol n'atteignent la page, cible éclairée comprise */
.tour-block { position: absolute; inset: 0; }
.tour-spot {
    position: fixed; border-radius: 10px; pointer-events: none;
    box-shadow: 0 0 0 2px var(--accent), 0 0 0 200vmax rgba(4, 7, 11, 0.78), 0 0 24px 2px rgba(255, 121, 62, 0.35);
}
.tour-spot.none { inset: 50% auto auto 50%; width: 0; height: 0; box-shadow: 0 0 0 200vmax rgba(4, 7, 11, 0.78); }
/* Plusieurs zones éclairées : la page est assombrie par un masque percé de chacune, les zones n'ont que leur liseré */
.tour-dim { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: rgba(4, 7, 11, 0.78); }
.tour-spot.ring { box-shadow: 0 0 0 2px var(--accent), 0 0 24px 2px rgba(255, 121, 62, 0.35); }
/* Cible utilisable (onboarding de Constellation) : sa zone répond au clic */
.tour-hit { position: fixed; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }

.tour-bubble {
    position: fixed; width: min(380px, calc(100vw - 24px)); padding: 20px 22px 18px; border-radius: 10px;
    background: #16202b; border: 1px solid #33404f; color: var(--text); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.tour-bubble h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; line-height: 1.2; color: #fff; }
.tour-bubble p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #d5dbe3; }
.tour-arrow { position: absolute; width: 14px; height: 14px; background: #16202b; border: 1px solid #33404f; border-right: 0; border-bottom: 0; }
.tour-bubble.bottom .tour-arrow { top: -8px; transform: translateX(-50%) rotate(45deg); }
.tour-bubble.top .tour-arrow { bottom: -8px; transform: translateX(-50%) rotate(225deg); }
.tour-bubble.right .tour-arrow { left: -8px; transform: translateY(-50%) rotate(-45deg); }
.tour-bubble.left .tour-arrow { right: -8px; transform: translateY(-50%) rotate(135deg); }

.tour-remind { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 14px; color: #c9d1dc; cursor: pointer; }
.tour-remind input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.tour-foot { display: flex; align-items: center; gap: 10px; }
.tour-count { margin-right: auto; font-size: 14px; font-weight: 600; color: #aeb7c4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tour-prev, .tour-next, .tour-skip { font: inherit; font-size: 15px; font-weight: 700; min-height: 44px; padding: 0 18px; border-radius: 6px; cursor: pointer; }
.tour-next { border: 0; background: var(--accent); color: var(--accent-text); }
.tour-next:hover { filter: brightness(1.07); }
.tour-prev { background: transparent; border: 1px solid #4a5768; color: var(--text); }
.tour-prev:hover { border-color: #8d97a6; }
.tour-skip { position: fixed; top: 10px; right: 12px; font-weight: 600; background: rgba(13, 20, 27, 0.92); border: 1px solid #4a5768; color: #fff; }
.tour-skip:hover { border-color: #fff; }
.tour-skip span { margin-left: 6px; font-size: 18px; line-height: 1; }
.tour :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.tour-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1000; max-width: calc(100vw - 24px); padding: 14px 24px; border-radius: 8px;
    background: #16202b; border: 1px solid var(--accent); color: #fff; font-size: 16px; font-weight: 600; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    animation: tour-toast 0.25s ease-out;
}
@keyframes tour-toast { from { opacity: 0; transform: translate(-50%, 10px); } }
@media (prefers-reduced-motion: reduce) { .tour-toast { animation: none; } }

@media (max-width: 480px) {
    .tour-bubble { padding: 16px 16px 14px; }
    .tour-foot { flex-wrap: wrap; }
    .tour-prev, .tour-next { padding: 0 14px; }
    .tour-next { flex: 1 1 auto; }
}

/*
 * Onboarding d'Orbit (web/orbitOnboarding.tsx) : fenêtre de configuration (étapes 1 à 5) et écran de fin (12). La
 * visite (6 à 11) reprend la surcouche des visites guidées (tutorial.css).
 */
.obd { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(4, 7, 11, 0.78); overflow-y: auto; }
.obd-panel {
    position: relative; width: min(760px, 100%); padding: 22px 26px 20px; border-radius: 12px;
    background: #16202b; border: 1px solid #33404f; color: var(--text); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.obd :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.obd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.obd-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #aeb7c4; }
.obd-later { font: inherit; font-size: 14px; font-weight: 600; min-height: 36px; padding: 0 14px; border-radius: 6px; cursor: pointer; background: transparent; border: 1px solid #4a5768; color: #fff; }
.obd-later:hover { border-color: #fff; }

.obd-progress { display: flex; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.obd-progress li { flex: 1; }
.obd-progress span, .obd-progress button {
    display: block; width: 100%; height: 6px; padding: 0; border: 0; border-radius: 3px; background: #2b3644;
    font-size: 0; color: transparent; cursor: default;
}
.obd-progress li.done span, .obd-progress li.done button { background: rgba(255, 121, 62, 0.55); }
.obd-progress li.current span, .obd-progress li.current button { background: var(--accent); }
/* Mode réglage : les étapes se choisissent */
.obd-progress button { height: 22px; font-size: 12px; font-weight: 700; color: #fff; cursor: pointer; }

.obd-panel h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; line-height: 1.2; color: #fff; }
.obd-panel h2:focus { outline: none; }
.obd-text { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: #d5dbe3; }
.obd-text strong { color: #fff; }
.obd-action { margin: 0 0 16px; }
.obd-hint { margin: 8px 0 0; font-size: 14px; color: #f0b35a; }

.obd-capture { margin: 0 0 14px; }
.obd-shot { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid #33404f; background: #0b1017; }
.obd-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Zone mise en évidence : liseré orange par-dessus l'image ; seule éclairée, le reste de l'image est assombri */
.obd-zone {
    position: absolute; border-radius: 6px; pointer-events: none;
    box-shadow: 0 0 0 2px var(--accent), 0 0 18px 2px rgba(255, 121, 62, 0.5);
    animation: obd-pulse 1.6s ease-in-out infinite;
}
.obd-zone.solo { box-shadow: 0 0 0 2px var(--accent), 0 0 18px 2px rgba(255, 121, 62, 0.5), 0 0 0 200vmax rgba(4, 7, 11, 0.45); }
@keyframes obd-pulse { 50% { outline: 4px solid rgba(255, 121, 62, 0.35); outline-offset: 3px; } }
@media (prefers-reduced-motion: reduce) { .obd-zone { animation: none; } }

.obd-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.obd-legend button { font: inherit; font-size: 14px; min-height: 34px; padding: 0 12px; border-radius: 17px; cursor: pointer; background: transparent; border: 1px solid #4a5768; color: #c9d1dc; }
.obd-legend button.on { border-color: var(--accent); color: #fff; background: rgba(255, 121, 62, 0.14); }

/* Mode réglage (?onboardingDebug=1) : toutes les zones, leurs valeurs, la position du pointeur */
.obd-capture.debug .obd-zone { animation: none; box-shadow: none; outline: 2px dashed #ff3df5; background: rgba(255, 61, 245, 0.12); }
.obd-capture.debug .obd-zone small {
    position: absolute; left: 0; bottom: 100%; margin-bottom: 2px; padding: 1px 5px; border-radius: 3px; white-space: nowrap;
    font: 600 11px/1.4 ui-monospace, monospace; color: #fff; background: rgba(0, 0, 0, 0.8);
}
.obd-pointer { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 3px; font: 600 12px/1.4 ui-monospace, monospace; color: #fff; background: rgba(0, 0, 0, 0.8); pointer-events: none; }
.obd-capture.debug .obd-shot { cursor: crosshair; }

.obd-status { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 600; color: #c9d1dc; }
.obd-status.done { color: #6fdc8c; }
.obd-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #2f8f4e; color: #fff; font-size: 13px; font-weight: 800; }
.obd-tick.big { width: 56px; height: 56px; font-size: 30px; margin-bottom: 14px; }

.obd-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.obd-prev, .obd-next { font: inherit; font-size: 15px; font-weight: 700; min-height: 44px; padding: 0 20px; border-radius: 6px; cursor: pointer; }
.obd-prev { margin-right: auto; background: transparent; border: 1px solid #4a5768; color: var(--text); }
.obd-prev:hover { border-color: #8d97a6; }
.obd-next { border: 0; background: var(--accent); color: var(--accent-text); }
.obd-next:hover:not(:disabled) { filter: brightness(1.07); }
.obd-next:disabled { opacity: 0.45; cursor: not-allowed; }

.obd-end { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 8px 6px; }
.obd-end .obd-text { max-width: 32em; }
.obd-end .obd-text + .obd-text { margin-top: -6px; }
/* Bienvenue : marque d'Orbit, puis « Terminer plus tard » et « Commencer » */
.obd-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); }
.obd-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.obd-end-actions .obd-prev { margin-right: 0; }

@media (max-width: 520px) {
    .obd { padding: 8px; }
    .obd-panel { padding: 16px; }
    .obd-head { flex-wrap: wrap; }
    .obd-panel h2 { font-size: 21px; }
}
.obd-mark .tool-logo { width: 30px; height: 30px; }

/*
 * Onboarding de Constellation (web/constellationOnboarding.tsx) : les visites reprennent la surcouche des visites
 * guidées (tutorial.css) et la fenêtre des onboardings (orbit-onboarding.css). Ici, le mode réglage seulement.
 */
.onboarding-debug [data-onboarding] { outline: 2px dashed #ff3df5 !important; outline-offset: 2px; }

.cob-debug {
    position: fixed; left: 12px; bottom: 12px; z-index: 1001; width: min(460px, calc(100vw - 24px)); padding: 10px 12px;
    border-radius: 8px; background: rgba(0, 0, 0, 0.88); border: 1px solid #ff3df5; color: #fff;
    font: 600 12px/1.5 ui-monospace, monospace;
}
.cob-debug p { margin: 6px 0 0; }
.cob-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cob-row + .cob-row { margin-top: 6px; }
.cob-row strong { margin-right: 4px; color: #ff9cf9; }
.cob-debug button { font: inherit; min-height: 26px; padding: 0 8px; border-radius: 4px; cursor: pointer; background: transparent; border: 1px solid #6b5470; color: #fff; }
.cob-debug button.on { border-color: #ff3df5; background: rgba(255, 61, 245, 0.25); }
.cob-debug code { padding: 0 4px; border-radius: 3px; background: rgba(255, 61, 245, 0.18); }
.cob-debug em { font-style: normal; color: #f0b35a; }
.cob-debug .ok { color: #6fdc8c; }
.cob-marked { display: flex; flex-wrap: wrap; gap: 4px; color: #c9d1dc; }

/* Pied de page légal, pages publiques (documents juridiques, signalement), administration de la modération */

.legal-footer { margin-top: auto; padding: 18px 24px 22px; border-top: 1px solid var(--card-border); color: var(--muted); font-size: 12.5px; line-height: 1.55; text-align: center; }
.legal-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: 6px; font-size: 13.5px; }
.legal-footer nav a { color: #c9d1dc; }
.legal-footer p { max-width: 760px; margin: 0 auto; }
.legal-footer.compact { padding: 14px 20px 16px; }
.auth-panel .legal-footer { margin-top: 0; border-top-color: #232d3a; padding: 18px 0 0; }

.public-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--app-bg); }
.public-head { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--card-border); }
.public-head .spacer { flex: 1; }
.public-page > .main { flex: 1; width: 100%; max-width: 920px; margin: 0 auto; padding: 28px 16px 40px; }

.legal-version { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.legal h1 { font-size: 22px; margin: 0 0 8px; }
.legal h2 { font-size: 16px; letter-spacing: 0; margin: 26px 0 8px; }
.legal h3 { font-size: 14.5px; margin: 18px 0 6px; }
.legal h4 { font-size: 13.5px; margin: 14px 0 4px; }
.legal ol { margin: 0 0 10px; padding-left: 22px; }
.legal hr { border: 0; border-top: 1px solid var(--card-border); margin: 24px 0; }
.legal code { font-family: var(--mono); font-size: 0.92em; background: var(--mono-bg); padding: 1px 5px; border-radius: 4px; }
.legal-table { overflow-x: auto; margin: 0 0 12px; }
.legal-table table { margin: 0; }
.legal :target { scroll-margin-top: 16px; }

.report-form { display: grid; gap: 4px; }
.report-form textarea { resize: vertical; }
.report-done p { margin: 0 0 10px; }

.mod-list { display: grid; gap: 10px; }
.mod-item { display: block; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: 6px; background: var(--panel-bg); color: inherit; }
.mod-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mod-item-head .spacer, .mod-item .grow { flex: 1; min-width: 0; }
.mod-location { margin: 10px 0 6px; word-break: break-all; font-size: 13.5px; }
.mod-location svg { width: 14px; height: 14px; vertical-align: -2px; }
.mod-text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #c9d1dc; }
.mod-decision { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--subtle-fill); white-space: pre-wrap; }
.mod-file, .mod-squadron { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.mod-file .grow { display: grid; gap: 2px; }
.mod-name { overflow-wrap: anywhere; }
.mod-squadron:hover { background: var(--card-bg-hover); text-decoration: none; }
.mod-squadron svg { width: 18px; height: 18px; }
.mod-names { display: grid; }
.mod-name-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--card-border); }
.mod-name-row .grow { flex: 1; min-width: 0; }
.mod-name-row:first-child { border-top: 0; padding-top: 0; }
.back-link { display: inline-flex; align-items: center; gap: 6px; }
.back-link svg { width: 16px; height: 16px; }

/* Formulaire de contact (Aide & support) */
.support-form { display: grid; gap: 4px; }
.support-form textarea { resize: vertical; }
.support-done p { margin: 0 0 10px; }

/* Questions fréquentes (Aide & support) : recherche, catégories, accordéons, invitation au support */
.faq { display: grid; gap: 12px; }
.faq-search { position: relative; }
.faq-search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.faq-search .input { width: 100%; padding-left: 40px; }
.faq-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-categories button { padding: 6px 12px; border: 1px solid var(--card-border); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 13.5px; cursor: pointer; }
.faq-categories button:hover { border-color: var(--accent); }
.faq-categories button.active { background: var(--accent-fill); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.faq-categories button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-count { margin: 0; }
.faq-empty { margin: 4px 0; color: var(--muted); }
.faq-group { display: grid; }
.faq-group h3 { margin: 10px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.faq-item { border-top: 1px solid var(--card-border); }
.faq-item:last-child { border-bottom: 1px solid var(--card-border); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px; font-weight: 600; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform 0.15s ease; }
.faq-item[open] summary svg { transform: rotate(90deg); color: var(--accent); }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-answer { padding: 0 2px 14px; color: #c9d1dc; }
.faq-answer p { margin: 0 0 8px; line-height: 1.55; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-contact { align-items: center; flex-wrap: wrap; margin-top: 8px; }
.faq-contact > svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.faq-contact p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .faq-item summary svg { transition: none; } }