/* Jetons de la charte (couleurs, polices, rayons), thème sombre par défaut, éléments de base */

:root {
    /* Couleurs du logo PLACE : nuit violette, dégradé violet-magenta, bleu, barre arc-en-ciel */
    --bg-0: #04020a;
    --bg-1: #090515;
    --bg-2: #110a24;
    --surface: rgba(24, 14, 48, 0.62);
    --surface-2: rgba(255, 255, 255, 0.035);
    --surface-3: rgba(255, 255, 255, 0.065);
    --line: rgba(196, 160, 255, 0.15);
    --line-strong: rgba(196, 160, 255, 0.28);
    --text: #f4effe;
    --text-2: #c8bce4;
    --muted: #9a8dbd;
    --violet: #a64dff;
    --magenta: #ff2e93;
    --blue: #4d7dff;
    --blue-2: #b59bff;
    --cyan: #5fd0ff;
    --hc: #5fe8a4;
    --hp: #ffcf6b;
    --peak: #ff7b98;
    --accent: var(--violet);
    --grad: linear-gradient(120deg, #a64dff 0%, #e03ad2 55%, #ff2e93 100%);
    --grad-froid: linear-gradient(180deg, #a64dff 0%, #3a6bff 100%);
    /* Barre arc-en-ciel du logo : huit couleurs franches */
    --arc-1: #d7192a;
    --arc-2: #f07010;
    --arc-3: #12a03c;
    --arc-4: #00b4e6;
    --arc-5: #ffc000;
    --arc-6: #c8104e;
    --arc-7: #4e8a48;
    --arc-8: #6e3fa0;
    --rainbow: linear-gradient(90deg, var(--arc-1) 0 12.5%, var(--arc-2) 12.5% 25%, var(--arc-3) 25% 37.5%, var(--arc-4) 37.5% 50%, var(--arc-5) 50% 62.5%, var(--arc-6) 62.5% 75%, var(--arc-7) 75% 87.5%, var(--arc-8) 87.5% 100%);
    --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7), 0 2px 0 rgba(255, 255, 255, 0.02) inset;
    --font: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --radius-lg: 16px;
    --radius: 12px;
    --radius-sm: 8px;
    --menu-bg: #140b2a;
    --field-bg: rgba(6, 3, 14, 0.6);
    --vig-vert: #2fd07f;
    --vig-jaune: #ffd500;
    --vig-orange: #ff8c1a;
    --vig-rouge: #ff3d4f;
    color-scheme: dark;
}

body.is-base {
    --accent: var(--violet);
}

body.is-hc {
    --accent: var(--hc);
}

body.is-hp {
    --accent: var(--hp);
}

body.is-peak {
    --accent: var(--peak);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    background: var(--bg-1);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: var(--font);
    line-height: 1.5;
    background: radial-gradient(1100px 600px at 8% -12%, rgba(166, 77, 255, 0.22), transparent 60%), radial-gradient(900px 520px at 100% -4%, rgba(255, 46, 147, 0.16), transparent 62%), radial-gradient(900px 600px at -10% 105%, rgba(58, 107, 255, 0.10), transparent 60%), linear-gradient(170deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 100%);
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 340px;
    pointer-events: none;
    background: radial-gradient(600px 220px at 30% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
    transition: background 1.2s var(--ease);
    z-index: 0;
}

a {
    color: var(--blue-2);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--cyan);
}

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 6px;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
    50% { box-shadow: 0 0 0 6px transparent; }
}

.tabs {
    display: flex;
    gap: 4px;
    padding: 12px 20px 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: thin;
}

.tab {
    padding: 8px 12px 10px;
    border-bottom: 2px solid transparent;
    color: var(--text-2);
    font-size: 0.9rem;
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
}

.tab:hover {
    color: var(--text);
}

.tab.is-active {
    color: var(--text);
    border-bottom-color: var(--violet);
}

.logout {
    padding-top: 6px;
}

.section-desc {
    margin: 0;
    color: var(--text-2);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 72ch;
}

.subsection {
    display: grid;
    gap: 10px;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.help {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    background: var(--surface-2);
}

.help summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}

.help ol {
    margin: 10px 0 2px;
    padding-left: 20px;
    display: grid;
    gap: 4px;
    font-size: 0.86rem;
    color: var(--text-2);
}

body.is-base {
    --accent: var(--violet);
}

@media (min-width: 1600px) {
    html {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:not([data-motion="full"]) *,
    html:not([data-motion="full"]) *::before,
    html:not([data-motion="full"]) *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}