/* style.css — RegionCities shared CSS cross-domain (D39)
 *
 * Cible : regioncities.net (PHP main + app) + client.regioncities.net
 *         (WASM client HTML chrome) + wiki.regioncities.net (DokuWiki).
 *
 * Identité visuelle : dark terminal aesthetic monospace, vert RC (#0a0)
 * comme accent primary. Cohérent avec client/index.html original.
 *
 * Convention BEM : .rc-block, .rc-block__elem, .rc-block--mod
 *
 * Sections :
 *   1. Base universal (sans préfixe) — typo, reset, forms, tables
 *   2. .rc-* components — header, footer, sidebar, buttons, forms layout
 *   3. .rc-page-* layouts — pages spécifiques (about, legal, verify)
 *   4. .dokuwiki .* — wiki content selectors (placeholder)
 *   5. .rc-client-* — client de jeu HTML chrome (loading, info, canvas)
 *   6. Responsive — media queries ≤ 768px
 */

/* ============================================================ */
/* Section 1 — Base universal                                   */
/* ============================================================ */

:root {
    color-scheme: dark;

    --rc-bg:           #000;
    --rc-bg-panel:     #111;
    --rc-bg-panel-2:   #1a1a1a;
    --rc-bg-panel-3:   #222;

    --rc-fg:           #eee;
    --rc-fg-muted:     #8c8;
    --rc-fg-bright:    #cfc;
    --rc-fg-dim:       #666;

    --rc-accent:       #0a0;
    --rc-accent-hi:    #4f4;
    --rc-accent-lo:    #050;

    --rc-error:        #f55;
    --rc-error-bg:     #210;
    --rc-warn:         #f90;
    --rc-warn-bg:      #221000;
    --rc-success:      #4f4;
    --rc-success-bg:   #021;

    --rc-border:       #0a0;
    --rc-border-dim:   #050;

    --rc-mono:         ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --rc-sidebar-w:    240px;
    --rc-header-h:     48px;
    --rc-footer-h:     auto;

    --rc-radius:       0;
    --rc-gap:          12px;
    --rc-gap-lg:       24px;
}

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

html, body {
    margin: 0;
    padding: 0;
    color: var(--rc-fg);
    font-family: var(--rc-mono);
    font-size: 14px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}
html {
    background-color: var(--rc-bg);
}
body {
    background-color: transparent;  /* laisse passer html bg + scanlines/beam pseudos */
}

/* Scrollbar always reserved : évite shift horizontal sur nav AJAX
   quand la hauteur du contenu change (login plus haut que home, etc.). */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rc-mono);
    color: var(--rc-fg-bright);
    letter-spacing: 0.04em;
    margin: 0 0 var(--rc-gap) 0;
    font-weight: 700;
}
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rc-fg-muted); }
h5, h6 { font-size: 13px; }

p, ul, ol, blockquote {
    margin: 0 0 var(--rc-gap) 0;
}

ul, ol {
    padding-left: 1.25em;
}

li {
    margin-bottom: 4px;
}

a {
    color: var(--rc-accent-hi);
    text-decoration: none;
    border-bottom: 1px dotted var(--rc-accent);
    transition: color 0.1s ease, border-color 0.1s ease;
}
a:hover, a:focus {
    color: #fff;
    border-bottom-color: #fff;
    outline: none;
}
a:visited { color: var(--rc-accent-hi); }

pre, code, kbd, samp {
    font-family: var(--rc-mono);
    background: var(--rc-bg-panel);
    color: var(--rc-fg-bright);
    padding: 1px 6px;
    border: 1px solid var(--rc-border-dim);
}
pre {
    padding: 10px 14px;
    overflow-x: auto;
    line-height: 1.4;
}
pre code {
    background: transparent;
    border: none;
    padding: 0;
}

hr {
    border: none;
    border-top: 1px solid var(--rc-border-dim);
    margin: var(--rc-gap-lg) 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--rc-gap);
}
th, td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--rc-border-dim);
}
th {
    color: var(--rc-fg-muted);
    border-bottom-color: var(--rc-border);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.1em;
}

strong, b { color: var(--rc-fg-bright); }
em, i { font-style: normal; color: var(--rc-fg-muted); }

/* Forms — universal */
form {
    margin: 0;
}

label {
    display: block;
    color: var(--rc-fg-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
textarea,
select {
    display: block;
    width: 100%;
    max-width: 360px;
    background: var(--rc-bg-panel-2);
    color: var(--rc-fg-bright);
    font-family: var(--rc-mono);
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
input:focus,
textarea:focus,
select:focus {
    border-color: var(--rc-accent-hi);
    background: var(--rc-bg-panel-3);
    box-shadow: 0 0 0 1px var(--rc-accent);
}
input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--rc-accent);
    margin-right: 6px;
    vertical-align: middle;
}

::placeholder {
    color: var(--rc-fg-dim);
    opacity: 1;
}

button {
    font-family: var(--rc-mono);
}

/* Selection highlight */
::selection {
    background: var(--rc-accent);
    color: #000;
}

/* ============================================================ */
/* Section 2 — .rc-* components                                 */
/* ============================================================ */

/* Header (mainframe anon + app shared) — fixed top, always visible */
.rc-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 12;
    height: var(--rc-header-h);
    background: var(--rc-bg-panel);
    border-bottom: 1px solid var(--rc-border);
    display: flex;
    align-items: center;
    padding: 0 var(--rc-gap-lg);
    gap: var(--rc-gap);
}

.rc-header__menu-toggle {
    display: none;  /* visible uniquement mobile (≤768px) */
    background: transparent;
    border: none;
    color: var(--rc-fg-bright);
    font-family: var(--rc-mono);
    font-size: 20px;
    line-height: 1;
    padding: 0 8px;
    cursor: pointer;
    transition: color 0.15s ease;
}
.rc-header__menu-toggle:hover {
    color: #fff;
}
.rc-header__menu-toggle:focus {
    outline: none;
    color: var(--rc-accent-hi);
}

.rc-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rc-fg-bright);
    border-bottom: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}
.rc-header__brand:hover {
    color: #fff;
}
.rc-header__logo {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
}
.rc-header__name {
    font-size: 14px;
}

/* Main (mainframe anon container) */
.rc-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--rc-gap-lg) var(--rc-gap-lg);
}

/* Footer (shared anon + app) — fixed bottom, always visible */
.rc-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: var(--rc-bg-panel);
    border-top: 1px solid var(--rc-border);
    padding: 10px var(--rc-gap-lg);
    font-size: 12px;
    color: var(--rc-fg-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Body padding = espace réservé pour header + footer fixed */
body {
    padding-top: var(--rc-header-h);
    padding-bottom: 44px;
}
body.rc-client-body {
    padding-top: 0;
    padding-bottom: 0;
}
.rc-footer a {
    color: var(--rc-fg-muted);
    border-bottom-color: var(--rc-border-dim);
}
.rc-footer a:hover {
    color: var(--rc-fg-bright);
    border-bottom-color: var(--rc-accent-hi);
}
.rc-footer__sep {
    color: var(--rc-border-dim);
}
.rc-footer__locale {
    color: var(--rc-fg-dim);
    margin-left: auto;
}
.rc-footer__locale-active {
    color: var(--rc-fg-bright);
    background: var(--rc-bg-panel-3);
    padding: 1px 6px;
    border: 1px solid var(--rc-border);
    font-weight: 700;
}

/* Buttons */
.rc-button {
    display: inline-block;
    background: var(--rc-bg-panel-2);
    color: var(--rc-fg-bright);
    font-family: var(--rc-mono);
    font-size: 13px;
    padding: 8px 16px;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.3;
    transition: background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.1s ease,
                box-shadow 0.15s ease;
}
.rc-button:hover,
.rc-button:focus {
    background: var(--rc-accent-lo);
    color: #fff;
    border-color: var(--rc-accent-hi);
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 0 var(--rc-border-dim);
}
.rc-button:active {
    transform: translateY(0);
    box-shadow: none;
}

a.rc-button {
    border-bottom-width: 1px;
    text-decoration: none;
}

.rc-button--primary {
    background: var(--rc-accent);
    color: #000;
    border-color: var(--rc-accent-hi);
}
.rc-button--primary:hover,
.rc-button--primary:focus {
    background: var(--rc-accent-hi);
    color: #000;
}

/* Forms layout */
.rc-form-row {
    margin-bottom: var(--rc-gap);
}

.rc-form-errors {
    background: var(--rc-error-bg);
    border: 1px solid var(--rc-error);
    color: var(--rc-error);
    padding: 8px 12px;
    font-size: 13px;
}
.rc-form-errors div {
    margin: 2px 0;
}

.rc-form-success {
    background: var(--rc-success-bg);
    border: 1px solid var(--rc-success);
    color: var(--rc-success);
    padding: 8px 12px;
    font-size: 13px;
}

/* Hero */
.rc-hero {
    padding: var(--rc-gap-lg) 0;
    border-bottom: 1px solid var(--rc-border-dim);
    margin-bottom: var(--rc-gap-lg);
}
.rc-hero__title {
    font-size: 28px;
    letter-spacing: 0.08em;
    color: var(--rc-accent-hi);
    margin-bottom: var(--rc-gap);
}
.rc-hero__pitch {
    max-width: 720px;
    color: var(--rc-fg);
    line-height: 1.6;
}

/* App layout (mainframe LOGUÉ) */
.rc-app-body {
    /* body class quand on est dans app.php */
}

.rc-app-layout {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    min-height: 0;
}

.rc-app-content {
    flex: 1 1 auto;
    padding: var(--rc-gap-lg);
    overflow-y: auto;
    /* offset pour la sidebar fixed à gauche */
    margin-left: var(--rc-sidebar-w);
}

/* Sidebar */
.rc-sidebar {
    /* Sidebar fixed entre header et footer — toujours visible desktop,
       drawer mobile via transform translateX. */
    position: fixed;
    top: var(--rc-header-h);
    bottom: 44px;
    left: 0;
    width: var(--rc-sidebar-w);
    background: var(--rc-bg-panel);
    border-right: 1px solid var(--rc-border);
    display: flex;
    flex-direction: column;
    padding: var(--rc-gap-lg) 0;
    gap: var(--rc-gap);
    overflow-y: auto;
    z-index: 11;
    transition: transform 0.2s ease;
}

/* Backdrop drawer (mobile uniquement) */
.rc-sidebar-backdrop {
    display: none;
    position: fixed;
    top: var(--rc-header-h);
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.rc-sidebar-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.rc-sidebar__nav {
    display: flex;
    flex-direction: column;
}

.rc-sidebar__link {
    display: block;
    padding: 8px var(--rc-gap-lg);
    color: var(--rc-fg-muted);
    border-bottom: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    border-left: 2px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rc-sidebar__link:hover,
.rc-sidebar__link:focus {
    background: var(--rc-bg-panel-2);
    color: var(--rc-fg-bright);
    border-left-color: var(--rc-accent);
    outline: none;
}
.rc-sidebar__link--active {
    background: var(--rc-bg-panel-2);
    color: var(--rc-accent-hi);
    border-left-color: var(--rc-accent-hi);
}
.rc-sidebar__badge {
    display: inline-block;
    background: var(--rc-error, #f55);
    color: #fff;
    padding: 1px 7px; border-radius: 10px;
    font-size: 11px; font-weight: bold;
    margin-left: 6px; vertical-align: middle;
    font-family: var(--rc-mono, monospace);
}

.rc-sidebar__logout {
    border-top: 1px solid var(--rc-border-dim);
    padding-top: var(--rc-gap);
    margin-top: auto;  /* pin au bottom si espace, collapse si overflow */
}

.rc-sidebar__logout-btn {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}
.rc-sidebar__logout-btn:hover {
    background: var(--rc-bg-panel-2);
    color: var(--rc-error);
    border-left-color: var(--rc-error);
}

/* App sections (content area) — pas de max-width global (acté 2026-06-01) */
.rc-app-section {
}
.rc-app-section__title {
    font-size: 20px;
    color: var(--rc-accent-hi);
    border-bottom: 1px solid var(--rc-border-dim);
    padding-bottom: var(--rc-gap);
    margin-bottom: var(--rc-gap-lg);
}
.rc-app-section__stub {
    color: var(--rc-fg-dim);
    font-size: 13px;
}

/* Legacy placeholder app.php (still used in app.php → A.5 replaced) */
.rc-app-placeholder {
    padding: var(--rc-gap-lg);
}

/* ============================================================ */
/* Section 3 — .rc-page-* layouts                                */
/* ============================================================ */

.rc-page-about,
.rc-page-legal,
.rc-page-verify {
    max-width: 720px;
}

.rc-play {
    margin-top: var(--rc-gap-lg);
}
.rc-play__title {
    font-size: 18px;
    color: var(--rc-accent-hi);
    border-bottom: 1px solid var(--rc-border-dim);
    padding-bottom: 8px;
    margin-bottom: var(--rc-gap-lg);
}
.rc-play__with-account,
.rc-play__anonymous {
    background: var(--rc-bg-panel);
    border: 1px solid var(--rc-border-dim);
    padding: var(--rc-gap-lg);
    margin-bottom: var(--rc-gap);
}
.rc-play__with-account h3,
.rc-play__anonymous h3 {
    color: var(--rc-accent-hi);
    margin-bottom: var(--rc-gap);
}

/* Altcha widget — minimal dark tweak (lib injects its own shadow DOM,
   on cible juste le host element pour bg cohérent) */
altcha-widget {
    display: block;
    max-width: 360px;
    color-scheme: dark;
}

/* ============================================================ */
/* Credits view (B.0)                                           */
/* ============================================================ */

.rc-page-credits h2 {
    margin-top: var(--rc-gap-lg);
}

.rc-credits-balance {
    background: var(--rc-bg-panel);
    border: 1px solid var(--rc-border);
    padding: var(--rc-gap-lg);
    margin-bottom: var(--rc-gap-lg);
    font-size: 20px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.rc-credits-balance__label {
    color: var(--rc-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
}
.rc-credits-balance__value {
    color: var(--rc-accent-hi);
    font-size: 28px;
}
.rc-credits-balance__unit {
    color: var(--rc-fg-muted);
    font-size: 14px;
}

.rc-credit-slider {
    background: var(--rc-bg-panel);
    border: 1px solid var(--rc-border-dim);
    padding: var(--rc-gap-lg);
    margin-bottom: var(--rc-gap-lg);
}

/* Container slider + ruler en overlay sur la même zone verticale.
   contain: layout paint + GPU layer = paint isolé du reste de la page,
   le compositing du drag n'a pas à recompose les CRT pseudos. */
.rc-credit-slider__track-area {
    position: relative;
    height: 50px;
    margin: var(--rc-gap) 0;
    contain: layout paint;
    transform: translateZ(0);
}

/* Native input[type="range"] styling — thumb GPU-friendly, track invisible
   (ruler SVG = visual track). */
.rc-credit-slider input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    width: 100%;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    touch-action: none;
}
.rc-credit-slider input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    height: 50px;
    border: none;
}
.rc-credit-slider input[type="range"]::-moz-range-track {
    background: transparent;
    height: 50px;
    border: none;
}
.rc-credit-slider input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 4px;
    height: 50px;
    background: var(--rc-accent-hi);
    border: none;
    border-radius: 0;
    cursor: ew-resize;
    margin-top: 0;
    will-change: transform;
}
.rc-credit-slider input[type="range"]::-moz-range-thumb {
    width: 4px;
    height: 50px;
    background: var(--rc-accent-hi);
    border: none;
    border-radius: 0;
    cursor: ew-resize;
    will-change: transform;
}


/* Ruler SVG : ticks de tailles variables ancrés bottom, et baseline 1px */
.rc-credit-slider__ruler {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    pointer-events: none;
    z-index: 1;
    color: var(--rc-accent);
}
.rc-credit-slider__ruler svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Labels chiffrés sous le slider, aux paliers majeurs */
.rc-credit-slider__scale {
    position: relative;
    height: 14px;
    margin-top: 2px;
    font-size: 10px;
    color: var(--rc-fg-muted);
    pointer-events: none;
}
.rc-credit-slider__scale span {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}
.rc-credit-slider__readout {
    margin: var(--rc-gap) 0;
}
.rc-credit-slider__amounts {
    font-size: 16px;
    color: var(--rc-fg-bright);
}
.rc-credit-slider__amounts strong {
    color: var(--rc-accent-hi);
}
.rc-credit-slider__breakdown {
    color: var(--rc-fg-muted);
    font-size: 13px;
    margin-top: 4px;
}
.rc-credit-slider__cap {
    color: var(--rc-fg-dim);
    font-size: 12px;
    margin: var(--rc-gap) 0;
}

.rc-ads-subsection {
    background: var(--rc-bg-panel);
    border: 1px solid var(--rc-border-dim);
    padding: var(--rc-gap-lg);
    margin-bottom: var(--rc-gap);
}
.rc-ads-subsection h2 {
    color: var(--rc-accent-hi);
    border-bottom: 1px solid var(--rc-border-dim);
    padding-bottom: 8px;
    margin-bottom: var(--rc-gap);
}

.rc-ads-options {
    border: 1px solid var(--rc-border-dim);
    padding: var(--rc-gap);
    margin: var(--rc-gap) 0;
}
.rc-ads-options legend {
    color: var(--rc-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    padding: 0 6px;
}
.rc-ads-options label {
    display: block;
    color: var(--rc-fg);
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 8px;
    cursor: pointer;
}
.rc-ads-options label:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.7;
}
.rc-ads-options__ratio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    color: var(--rc-fg-muted);
    font-size: 12px;
}
.rc-ads-options__ratio input[type="number"] {
    display: inline;
    width: 60px;
    padding: 2px 4px;
    font-size: 12px;
    max-width: 60px;
}

.rc-ads-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rc-gap);
    margin: var(--rc-gap) 0;
}
.rc-ads-card {
    flex: 1 1 200px;
    background: var(--rc-bg-panel-2);
    border: 1px solid var(--rc-border-dim);
    padding: var(--rc-gap);
    display: flex;
    flex-direction: column;
    gap: var(--rc-gap);
}
.rc-ads-card h3 {
    color: var(--rc-fg-bright);
    margin: 0;
}

/* Watch popup figure */
.rc-ads-watch-modal {
    max-width: 640px;
}
.rc-ads-watch-figure {
    margin: 0 0 var(--rc-gap) 0;
    border: 1px solid var(--rc-border-dim);
    background: #000;
}
.rc-ads-watch-img,
.rc-ads-watch-video {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    height: auto;
    margin: 0 auto;
}
.rc-ads-watch-video {
    width: 100%;
}

/* Campaigns table */
.rc-ads-campaigns-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--rc-gap);
}
.rc-ads-campaigns-table th,
.rc-ads-campaigns-table td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--rc-border-dim);
    font-size: 12px;
    vertical-align: middle;
}
.rc-ads-campaigns-table th {
    color: var(--rc-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom-color: var(--rc-border);
}
.rc-ads-campaigns-title-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rc-ads-campaigns-thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid var(--rc-border-dim);
}

.rc-ads-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.rc-ads-actions .rc-button {
    padding: 4px 8px;
    font-size: 11px;
}

.rc-ads-cooldown-inputs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.rc-ads-cooldown-inputs input[type="number"] {
    width: 80px;
    max-width: 80px;
}
.rc-ads-cooldown-inputs select {
    max-width: 160px;
}
.rc-form-help {
    display: block;
    margin-top: 4px;
    color: var(--rc-fg-dim);
    font-size: 11px;
}

.rc-credits-history {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--rc-gap);
}
.rc-credits-history th {
    text-align: left;
    color: var(--rc-fg-muted);
    border-bottom: 1px solid var(--rc-border);
    padding: 6px 10px;
    font-size: 12px;
    text-transform: uppercase;
}
.rc-credits-history td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--rc-border-dim);
}
.rc-tx-positive { color: var(--rc-accent-hi); }
.rc-tx-negative { color: var(--rc-error); }

/* Modal generic */
.rc-modal[hidden] { display: none; }
.rc-modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}
.rc-modal__content {
    position: relative;
    background: var(--rc-bg-panel);
    border: 1px solid var(--rc-border);
    padding: var(--rc-gap-lg);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

/* Home stats bar (compteurs publics sous play_anonymous) */
.rc-stats {
    margin-top: var(--rc-gap-lg);
    padding: 8px var(--rc-gap);
    border-top: 1px solid var(--rc-border-dim);
    color: var(--rc-fg-muted);
    /* Font auto-scale entre 9px et 12px selon largeur viewport,
       garde toujours sur 1 ligne avec nowrap. */
    font-size: clamp(9px, 2.4vw, 12px);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    overflow-x: hidden;
}
.rc-stats__item {
    color: var(--rc-fg-muted);
    white-space: nowrap;
}
.rc-stats__item strong {
    color: var(--rc-accent-hi);
    font-weight: 700;
}
.rc-stats__sep {
    color: var(--rc-border-dim);
}
.rc-stats__end {
    color: var(--rc-fg-dim);
    margin-left: auto;
}

/* ============================================================ */
/* Section 4 — DokuWiki content selectors (placeholder)         */
/* ============================================================ */
/* À étendre quand wiki sera intégré (cf D39 §5). Pour l'instant
   on style juste assez pour que le rendu wiki ne soit pas illisible.   */

.dokuwiki {
    color: var(--rc-fg);
    font-family: var(--rc-mono);
}
.dokuwiki .page {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--rc-gap-lg);
}
.dokuwiki .toc {
    background: var(--rc-bg-panel);
    border: 1px solid var(--rc-border-dim);
    padding: var(--rc-gap);
    margin-bottom: var(--rc-gap-lg);
}
.dokuwiki .toc__list {
    list-style: none;
    padding-left: var(--rc-gap);
}
.dokuwiki .level1 { font-size: 22px; color: var(--rc-accent-hi); }
.dokuwiki .level2 { font-size: 18px; color: var(--rc-fg-bright); }
.dokuwiki .level3 { font-size: 16px; color: var(--rc-fg-muted); }
.dokuwiki .sectionedit1,
.dokuwiki .sectionedit2,
.dokuwiki .sectionedit3 {
    margin-top: var(--rc-gap-lg);
}

/* ============================================================ */
/* Section 5 — .rc-client-* (client de jeu HTML chrome)         */
/* ============================================================ */

/* Body container quand on est sur client.regioncities.net :
   override hauteur exacte (vs min-height 100vh universel) — le canvas
   avec flex: 1 + min-height: 0 a besoin d'un parent à hauteur définie
   pour s'étirer correctement (équivalent à l'original html,body{height:100%}). */
html.rc-client-html,
body.rc-client-body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.rc-client-canvas {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Status row en bas (backend select + label info) */
.rc-client-info {
    flex: 0 0 auto;
    padding: 6px 10px;
    background: var(--rc-bg-panel);
    color: var(--rc-fg-bright);
    border-top: 1px solid var(--rc-border);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.rc-client-info select {
    background: var(--rc-bg-panel-2);
    color: var(--rc-fg-bright);
    border: 1px solid var(--rc-border);
    font-family: var(--rc-mono);
    font-size: 12px;
    padding: 2px 4px;
    max-width: none;
    width: auto;
}
.rc-client-info a {
    margin-left: auto;
    color: var(--rc-fg-bright);
    border-bottom: none;
}
.rc-client-info a:hover {
    color: #fff;
}

/* Loading overlay (affiché jusqu'à fin du téléchargement WASM) */
.rc-client-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--rc-bg);
    color: var(--rc-fg-bright);
    font-family: var(--rc-mono);
    font-size: 14px;
    z-index: 100;
}
.rc-client-loading h1 {
    font-size: 22px;
    margin: 0 0 24px 0;
    color: var(--rc-fg-bright);
    letter-spacing: 0.05em;
}
.rc-client-loading__bar-wrap {
    width: 360px;
    height: 16px;
    background: var(--rc-bg-panel-2);
    border: 1px solid var(--rc-border);
    position: relative;
}
.rc-client-loading__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--rc-accent), var(--rc-accent-hi));
    transition: width 0.1s ease-out;
}
.rc-client-loading__text {
    margin-top: 10px;
    font-size: 12px;
    color: var(--rc-fg-muted);
}
.rc-client-loading.hidden {
    display: none;
}

/* ============================================================ */
/* Section 5.5 — Loading bar AJAX nav (Turbolinks style)        */
/* ============================================================ */

.rc-nav-progress {
    position: fixed;
    top: var(--rc-header-h);  /* collée juste sous le header */
    left: 0;
    width: 0%;
    height: 1px;
    background: var(--rc-accent-hi);
    /* Glow downward-only (offset Y > blur) pour ne pas chevaucher le header */
    box-shadow: 0 3px 6px var(--rc-accent-hi);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
}
body.rc-client-body .rc-nav-progress {
    top: 0;  /* pas de header sur client */
}

/* ============================================================ */
/* Section 5.6 — Hero cursor blink (terminal aesthetic)         */
/* ============================================================ */

/* Cursor blink sur les gros titres principaux de chaque page */
.rc-hero__title::after,
.rc-app-section__title::after,
.rc-page-about h1::after,
.rc-page-legal h1::after,
.rc-page-verify h1::after {
    content: '▍';
    display: inline-block;
    margin-left: 4px;
    color: var(--rc-accent-hi);
    animation: rc-cursor-blink 1.06s step-end infinite;
}

@keyframes rc-cursor-blink {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}

/* ============================================================ */
/* Section 5.7 — Scanlines CRT (overlay subtil)                 */
/* ============================================================ */

/* Edge beams statiques (haut/bas phosphore CRT) sur body::after.
   Force GPU layer pour isoler du reste. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: linear-gradient(
        180deg,
        rgba(0, 255, 0, 0.10) 0%,
        transparent 15%,
        transparent 85%,
        rgba(0, 255, 0, 0.10) 100%
    );
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}

/* Scan beam animé sur html::after via transform translateY (GPU-accelerated,
   composite seulement, pas de repaint). Strip 120px de haut, glisse de
   -120px (off-screen top) à 100vh (off-screen bottom) en 8s linear loop. */
html::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 255, 0, 0.06) 50%,
        transparent 100%
    );
    pointer-events: none;
    z-index: -1;
    will-change: transform;
    animation: rc-crt-scan-y 8s linear infinite;
    transform: translateY(-120px);
}

@keyframes rc-crt-scan-y {
    from { transform: translateY(-120px); }
    to   { transform: translateY(100vh); }
}

body.rc-client-body::after {
    display: none;
}
html.rc-client-html::after {
    display: none;
}

/* Toutes les animations CRT passent maintenant par transform (GPU) =
   pas de repaint plein-écran. Plus besoin du drag-pause hack. */

/* Scanlines : pattern pseudo-random sur tile 30px (8 lignes à positions
   irrégulières au lieu d'1 toutes les 3px). Drift via transform translateY.
   z-index: -1 + body bg transparent + html bg #000 → scanlines visibles
   sur fond noir, masquées par les panels opaques. */
body::before {
    content: '';
    position: fixed;
    top: -30px;
    left: 0;
    right: 0;
    bottom: -30px;
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.025) 0px,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px,
        transparent 5px,
        rgba(255, 255, 255, 0.025) 5px,
        rgba(255, 255, 255, 0.025) 6px,
        transparent 6px,
        transparent 8px,
        rgba(255, 255, 255, 0.025) 8px,
        rgba(255, 255, 255, 0.025) 9px,
        transparent 9px,
        transparent 14px,
        rgba(255, 255, 255, 0.025) 14px,
        rgba(255, 255, 255, 0.025) 15px,
        transparent 15px,
        transparent 19px,
        rgba(255, 255, 255, 0.025) 19px,
        rgba(255, 255, 255, 0.025) 20px,
        transparent 20px,
        transparent 23px,
        rgba(255, 255, 255, 0.025) 23px,
        rgba(255, 255, 255, 0.025) 24px,
        transparent 24px,
        transparent 27px,
        rgba(255, 255, 255, 0.025) 27px,
        rgba(255, 255, 255, 0.025) 28px,
        transparent 28px,
        transparent 30px
    );
    background-size: 100% 30px;
    background-repeat: repeat;
    z-index: -1;
    pointer-events: none;
    animation: rc-scanline-drift 8s linear infinite;
    will-change: transform;
}

@keyframes rc-scanline-drift {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-30px); }
}

body.rc-client-body {
    background-image: none;
    animation: none;
}
body.rc-client-body::before {
    display: none;
}

/* ============================================================ */
/* Section 6 — Micro-interactions (fade-in, focus, motion safety)*/
/* ============================================================ */

@keyframes rc-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rc-hero,
.rc-app-section,
.rc-page-about,
.rc-page-legal,
.rc-page-verify {
    animation: rc-fade-in 0.25s ease-out;
}

.rc-play__with-account,
.rc-play__anonymous {
    animation: rc-fade-in 0.3s ease-out;
}

/* Sidebar link active state subtle pulse on entry */
.rc-sidebar__link--active {
    animation: rc-fade-in 0.2s ease-out;
}

/* Form rows : staggered subtle entry — pas trop appuyé pour ne pas
   distraire pendant la saisie. */
.rc-form-row {
    animation: rc-fade-in 0.2s ease-out;
}

/* Accessibility : respecter prefers-reduced-motion pour les motions
   décoratives, mais préserver les effets CRT et cursor blink qui font
   partie de l'identité visuelle (terminal aesthetic). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* CRT effects + cursor blink immune à la reduction */
    html::after {
        animation: rc-crt-scan-y 8s linear infinite !important;
    }
    body::before {
        animation: rc-scanline-drift 0.8s linear infinite !important;
    }
    .rc-hero__title::after,
    .rc-app-section__title::after,
    .rc-page-about h1::after,
    .rc-page-legal h1::after,
    .rc-page-verify h1::after {
        animation: rc-cursor-blink 1.06s step-end infinite !important;
    }
}

/* ============================================================ */
/* Section 7 — Responsive (≤ 768px)                              */
/* ============================================================ */

@media (max-width: 768px) {
    .rc-header {
        padding: 0 var(--rc-gap);
    }
    .rc-header__menu-toggle {
        display: block;
    }
    .rc-main {
        padding: var(--rc-gap);
    }
    .rc-footer {
        padding: var(--rc-gap);
        font-size: 11px;
    }
    .rc-footer__locale {
        margin-left: 0;  /* pas d'auto-push à droite sur viewport étroit */
    }

    /* Sidebar drawer : cachée par défaut, slide-in quand .is-open */
    .rc-sidebar {
        transform: translateX(-100%);
    }
    .rc-sidebar.is-open {
        transform: translateX(0);
    }
    .rc-sidebar-backdrop {
        display: block;
    }

    /* Content prend toute la largeur — sidebar cachée par défaut */
    .rc-app-content {
        margin-left: 0;
        padding: var(--rc-gap);
    }

    .rc-hero__title {
        font-size: 22px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        max-width: 100%;
    }
}

/* ============================================================ */
/* D.0 Gestionnaire d'Utilisateurs (mod_users)                  */
/* ============================================================ */

.rc-page-mod-users { padding: var(--rc-gap) 0; }

.rc-mod-users-search { margin: var(--rc-gap) 0; }
.rc-mod-users-search__form {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.rc-mod-users-search__q     { flex: 1; min-width: 200px; }
.rc-mod-users-search__filter { min-width: 180px; }
.rc-mod-users-search__status {
    font-size: 0.9em;
    color: var(--rc-fg-bright);
    min-height: 1.2em;
    margin: 0.5rem 0;
}

.rc-mod-users-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}
.rc-mod-users-table th {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--rc-accent-hi);
    color: var(--rc-accent-hi);
}
.rc-mod-users-table td {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--rc-border-dim);
}
.rc-mod-users-table__row:hover { background: var(--rc-border-dim); }
.rc-mod-users-table code { color: var(--rc-fg-bright); }

.rc-mod-users-detail {
    margin: var(--rc-gap) 0;
    padding: var(--rc-gap);
    border: 1px solid var(--rc-border-dim);
    background: var(--rc-bg-panel);
}
.rc-mod-users-detail__grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
}
.rc-mod-users-detail__grid dt { color: var(--rc-accent-hi); }
.rc-mod-users-detail__grid dd { margin: 0; color: var(--rc-fg-bright); }
.rc-mod-users-detail__grid dd code {
    color: var(--rc-fg-bright);
    background: var(--rc-border-dim);
    padding: 0.05em 0.3em;
}
.rc-mod-users-detail__notice {
    margin-top: var(--rc-gap);
    font-size: 0.9em;
    color: var(--rc-fg-dim);
}

.rc-mod-users-audit {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.9em;
}
.rc-mod-users-audit th {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--rc-accent-hi);
    color: var(--rc-accent-hi);
}
.rc-mod-users-audit td {
    padding: 0.5rem 0.5rem;
    vertical-align: top;
    border-bottom: 1px solid var(--rc-border-dim);
}
.rc-mod-users-audit code { color: var(--rc-fg-bright); }
.rc-mod-users-audit small { color: var(--rc-fg-dim); font-size: 0.85em; }

/* Actions panel (sous-bloc 2) */
.rc-mod-users-actions {
    margin: var(--rc-gap) 0;
    padding: var(--rc-gap);
    border: 1px solid var(--rc-border-dim);
    background: var(--rc-bg-panel);
}
.rc-mod-users-actions__row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.rc-mod-users-actions__row label { color: var(--rc-accent-hi); min-width: 80px; }
.rc-mod-users-actions__row select { min-width: 220px; }
.rc-mod-users-actions__row small { color: var(--rc-fg-dim); font-size: 0.85em; }
.rc-mod-users-actions__hint { color: var(--rc-fg-dim); font-size: 0.85em; margin-top: -0.25rem; }

/* Transfers list (sous-bloc 2) */
.rc-mod-users-transfers {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.9em;
}
.rc-mod-users-transfers th {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--rc-accent-hi);
    color: var(--rc-accent-hi);
}
.rc-mod-users-transfers td {
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--rc-border-dim);
}
.rc-mod-users-transfers small { color: var(--rc-fg-dim); }

/* ============================================================ */
/* C.0 Autorité de Certification (admin_ca)                     */
/* ============================================================ */

.rc-page-admin-ca { padding: var(--rc-gap) 0; }

.rc-admin-ca-info {
    margin: var(--rc-gap) 0;
    padding: var(--rc-gap);
    border: 1px solid var(--rc-border-dim);
    background: var(--rc-bg-panel);
}
.rc-admin-ca-info__grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
}
.rc-admin-ca-info__grid dt { color: var(--rc-accent-hi); }
.rc-admin-ca-info__grid dd { margin: 0; color: var(--rc-fg-bright); }
.rc-admin-ca-info__grid code {
    color: var(--rc-fg-bright);
    background: var(--rc-border-dim);
    padding: 0.05em 0.3em;
}
.rc-admin-ca-info__hex {
    font-size: 0.85em;
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
}
.rc-admin-ca-info__verify {
    margin-top: var(--rc-gap);
    padding-top: var(--rc-gap);
    border-top: 1px dashed var(--rc-border-dim);
}
.rc-admin-ca-info__verify-result {
    margin-top: 0.5rem;
    font-family: var(--rc-mono);
    font-size: 0.9em;
}
.rc-admin-ca-info__verify-errors {
    margin-top: 0.5rem;
    font-size: 0.85em;
    color: var(--rc-error);
}
.rc-admin-ca-info__verify-errors ul {
    margin: 0.25rem 0 0 1.5rem;
    padding: 0;
}

.rc-admin-ca-certs,
.rc-admin-ca-crl {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.9em;
}
.rc-admin-ca-certs th,
.rc-admin-ca-crl th {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--rc-accent-hi);
    color: var(--rc-accent-hi);
}
.rc-admin-ca-certs td,
.rc-admin-ca-crl td {
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--rc-border-dim);
}
.rc-admin-ca-certs code,
.rc-admin-ca-crl code {
    color: var(--rc-fg-bright);
    background: var(--rc-border-dim);
    padding: 0.05em 0.3em;
}
.rc-admin-ca-certs small,
.rc-admin-ca-crl small { color: var(--rc-fg-dim); }

.rc-admin-ca-sign {
    margin: var(--rc-gap) 0;
    padding: var(--rc-gap);
    border: 1px solid var(--rc-border-dim);
    background: var(--rc-bg-panel);
}
.rc-admin-ca-sign h3 {
    margin: 0 0 0.5rem 0;
    color: var(--rc-accent-hi);
    font-size: 1em;
}
.rc-admin-ca-sign__row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.rc-admin-ca-sign__row input { min-width: 220px; }
.rc-admin-ca-sign__row small { color: var(--rc-fg-dim); font-size: 0.85em; }

.rc-admin-ca-cert-status {
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: 0;
    font-size: 0.85em;
    border: 1px solid var(--rc-border-dim);
}
.rc-admin-ca-cert-status--pending_approval { color: var(--rc-warn); border-color: var(--rc-warn); background: var(--rc-warn-bg); }
.rc-admin-ca-cert-status--active           { color: var(--rc-success); border-color: var(--rc-success); background: var(--rc-success-bg); }
.rc-admin-ca-cert-status--revoked          { color: var(--rc-error); border-color: var(--rc-error); background: var(--rc-error-bg); }

.rc-admin-ca-pending__count { margin: 0.25rem 0 0.5rem 0; }

.rc-admin-ca-certs-filter {
    margin: 0.5rem 0;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.rc-admin-ca-certs-filter label { color: var(--rc-accent-hi); }
.rc-admin-ca-certs-filter select { min-width: 200px; }

.rc-admin-ca-info__danger {
    margin-top: var(--rc-gap);
    padding-top: var(--rc-gap);
    border-top: 1px dashed var(--rc-error);
}
.rc-admin-ca-info__danger-title { color: var(--rc-error); margin: 0 0 0.5rem 0; }
.rc-admin-ca-info__danger-intro { margin: 0 0 0.5rem 0; }
.rc-admin-ca-info__danger-steps { margin: 0 0 0.75rem 1.5rem; color: var(--rc-fg-bright); }
.rc-button--danger {
    color: var(--rc-error);
    border-color: var(--rc-error);
    background: var(--rc-error-bg);
}
.rc-button--danger:hover {
    color: #fff;
    background: var(--rc-error);
}

/* ============================================================ */
/* D.1 Gestionnaire de Créateurs (mod_creators)                 */
/* ============================================================ */

.rc-page-mod-creators { padding: var(--rc-gap) 0; }

.rc-mod-creators-pending { margin: var(--rc-gap) 0; }
.rc-mod-creators-pending__count { margin: 0.25rem 0 0.5rem 0; }
.rc-mod-creators-pending__item {
    margin: 0.5rem 0;
    padding: 0.75rem;
    border: 1px solid var(--rc-border-dim);
    background: var(--rc-bg-panel);
}
.rc-mod-creators-pending__item header { margin-bottom: 0.5rem; }
.rc-mod-creators-pending__date {
    float: right;
    color: var(--rc-fg-dim);
    font-size: 0.85em;
}
.rc-mod-creators-pending__motivation,
.rc-mod-creators-pending__samples {
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 0.5rem;
    background: var(--rc-bg-panel-2);
    border: 1px solid var(--rc-border-dim);
    margin: 0.25rem 0;
    font-size: 0.9em;
    max-height: 300px;
    overflow-y: auto;
}
.rc-mod-creators-pending__terms { margin: 0.5rem 0; }
.rc-mod-creators-pending__actions {
    margin: 0.5rem 0 0 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rc-mod-creators-detail__actions {
    margin: 0.5rem 0 1rem 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.75rem;
    background: var(--rc-bg-panel-2);
    border-left: 4px solid var(--rc-accent);
    border-radius: 4px;
}
.rc-mod-creators-detail__actions-hint {
    flex-basis: 100%;
    color: var(--rc-fg-muted);
    margin-top: 0.25rem;
}

.rc-page-assets { padding: var(--rc-gap) 0; }

.rc-assets-stats { margin: 0.5rem 0 1.5rem; }
.rc-assets-stats__grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
    padding: 0.75rem;
    background: var(--rc-bg-panel-2);
    border-left: 4px solid var(--rc-accent);
    border-radius: 4px;
}
.rc-assets-stats__grid dt {
    font-weight: bold;
    color: var(--rc-fg-muted);
}
.rc-assets-stats__grid dd { margin: 0; color: var(--rc-fg-bright); }

.rc-assets-list-controls { margin: 0.5rem 0; }
.rc-assets-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
}
.rc-assets-table th, .rc-assets-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px dotted var(--rc-border-dim);
}
.rc-assets-table th { color: var(--rc-accent-hi); font-weight: bold; }
.rc-assets-table tbody tr:hover { background: var(--rc-bg-panel-2); }
.rc-assets-table code { font-size: 0.9em; }

.rc-assets-kind {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.8em;
    font-weight: bold;
    background: var(--rc-bg-panel-3);
}
.rc-assets-kind--BUILDING { color: var(--rc-accent-hi); }
.rc-assets-kind--NETWORK  { color: var(--rc-warn); }
.rc-assets-kind--AUDIO    { color: #4cf; }

.rc-assets-payouts__table {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
    margin: 0.5rem 0;
}
.rc-assets-payouts__table th, .rc-assets-payouts__table td {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px dotted var(--rc-border-dim);
}
.rc-assets-payouts__table th { color: var(--rc-accent-hi); }

.rc-assets-detail {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--rc-bg-panel-2);
    border-left: 4px solid var(--rc-accent-hi);
    border-radius: 4px;
}
.rc-assets-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.rc-assets-detail__header h3 { margin: 0; color: var(--rc-accent-hi); }
.rc-assets-detail h4 {
    margin: 1rem 0 0.5rem;
    color: var(--rc-fg-bright);
    border-bottom: 1px dotted var(--rc-border-dim);
    padding-bottom: 0.25rem;
}
.rc-assets-detail__desc {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    padding: 0.5rem;
    background: var(--rc-bg-panel);
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.9em;
}

.rc-page-admin-infra { padding: var(--rc-gap) 0; }
.rc-admin-infra__summary {
    margin: 0.25rem 0 1rem;
    color: var(--rc-fg-muted);
}
.rc-admin-infra-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
}
.rc-admin-infra-table th, .rc-admin-infra-table td {
    padding: 0.45rem 0.7rem;
    text-align: left;
    border-bottom: 1px dotted var(--rc-border-dim);
}
.rc-admin-infra-table th { color: var(--rc-accent-hi); }
.rc-admin-infra-table td:last-child { white-space: nowrap; }
.rc-admin-infra-providers__add { margin: 0.75rem 0 0; }
.rc-admin-infra__form {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--rc-bg-panel-2);
    border-left: 4px solid var(--rc-accent);
    border-radius: 4px;
    max-width: 640px;
}
.rc-admin-infra__form h3 { margin: 0 0 0.75rem; color: var(--rc-accent-hi); }
.rc-admin-infra__lookup {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.rc-admin-infra__lookup input { flex: 1; }
.rc-admin-infra__slug-preview {
    margin: 0.75rem 0;
    padding: 0.5rem 0.75rem;
    background: var(--rc-bg-panel);
    border-radius: 3px;
}
.rc-admin-infra__slug-preview code { color: var(--rc-accent-hi); font-size: 1.05em; }

.rc-host-status {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.8em;
    font-weight: bold;
    background: var(--rc-bg-panel-3);
}
.rc-host-status--provisioning { color: var(--rc-warn); }
.rc-host-status--active       { color: var(--rc-accent-hi); }
.rc-host-status--dead         { color: var(--rc-error); }

.rc-admin-infra-ovh__creds summary { cursor: pointer; padding: 0.5rem 0; color: var(--rc-accent-hi); }
.rc-admin-infra-ovh__creds[open] summary { margin-bottom: 0.5rem; }
.rc-app-section__status { color: var(--rc-fg-muted); margin: 0.5rem 0; }
.rc-ovh-pricing-opt {
    display: block;
    padding: 0.15rem 0.35rem;
    margin: 0;
    border-radius: 0;
    background: var(--rc-bg-panel);
    color: var(--rc-fg-bright);
    font-size: 0.85em;
    border-bottom: 1px dotted var(--rc-border-dim);
}
.rc-ovh-pricing-opt:last-child { border-bottom: 0; }
.rc-ovh-dc-avail {
    display: block;
    padding: 0.15rem 0.35rem;
    background: var(--rc-bg-panel);
    color: var(--rc-fg-bright);
    font-size: 0.85em;
    border-bottom: 1px dotted var(--rc-border-dim);
}
.rc-ovh-dc-avail:last-child { border-bottom: 0; }
/* Padding 0 sur les <td> dont le contenu = stack pricings/dc, pour que le bg
   uniforme du span block remplisse toute la cellule sans bande vide. */
.rc-admin-infra-table td.rc-cell-stack { padding: 0; }
.rc-ovh-type-vps, .rc-ovh-type-eco {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
}
.rc-ovh-type-vps { background: #1a4a5a; color: #b8e8ff; }
.rc-ovh-type-eco { background: #5a3a1a; color: #ffd8a8; }
.rc-ovh-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
    background: var(--rc-bg-panel);
    border-radius: 3px;
}
.rc-ovh-filters label { cursor: pointer; }
.rc-ovh-filters small { color: var(--rc-fg-muted); margin-left: auto; }
.rc-admin-infra-table th.rc-sortable {
    cursor: pointer;
    user-select: none;
}
.rc-admin-infra-table th.rc-sortable:hover { color: var(--rc-fg-bright); }

/* .rc-page-link-rclotgen — max-width retiré 2026-06-01 (cohérent avec drop max-width global de .rc-app-section) */
.rc-link-rclotgen__card {
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 1px solid var(--rc-border);
    border-radius: 6px;
    background: var(--rc-bg-panel-2);
}
.rc-link-rclotgen__ttl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding: 0;
    border: none;
}
@media (max-width: 480px) {
    .rc-link-rclotgen__ttl-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.rc-link-rclotgen__ttl-grid legend {
    grid-column: 1 / -1;
    margin-bottom: 0.25rem;
    font-weight: bold;
    font-size: 0.9em;
    color: var(--rc-fg-bright);
}
.rc-link-rclotgen__ttl-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rc-border-dim);
    border-radius: 4px;
    cursor: pointer;
    background: var(--rc-bg-panel);
    color: var(--rc-fg);
}
.rc-link-rclotgen__ttl-option:hover {
    border-color: var(--rc-accent-hi);
    background: var(--rc-bg-panel-3);
}
.rc-link-rclotgen__ttl-option input[type="radio"] {
    margin: 0;
}
.rc-link-rclotgen__details {
    padding: 0.75rem;
    background: var(--rc-bg-panel-2);
    border-left: 4px solid var(--rc-border-dim);
    border-radius: 4px;
}
.rc-link-rclotgen__details ul {
    margin: 0.5rem 0 0 1.5rem;
    padding: 0;
    font-size: 0.9em;
    color: var(--rc-fg-muted);
}

.rc-mod-creators-search { margin: var(--rc-gap) 0; }
.rc-mod-creators-search__form {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.rc-mod-creators-search__q { flex: 1; min-width: 200px; }
.rc-mod-creators-search__filter { min-width: 220px; }
.rc-mod-creators-search__status {
    font-size: 0.9em;
    color: var(--rc-fg-bright);
    min-height: 1.2em;
    margin: 0.5rem 0;
}

.rc-mod-creators-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}
.rc-mod-creators-table th {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--rc-accent-hi);
    color: var(--rc-accent-hi);
}
.rc-mod-creators-table td {
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--rc-border-dim);
}
.rc-mod-creators-table__row:hover { background: var(--rc-border-dim); }
.rc-mod-creators-table code { color: var(--rc-fg-bright); }

.rc-mod-creators-detail {
    margin: var(--rc-gap) 0;
    padding: var(--rc-gap);
    border: 1px solid var(--rc-border-dim);
    background: var(--rc-bg-panel);
}
.rc-mod-creators-detail h3 { color: var(--rc-accent-hi); margin: var(--rc-gap) 0 0.5rem 0; }
.rc-mod-creators-detail__grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
}
.rc-mod-creators-detail__grid dt { color: var(--rc-accent-hi); }
.rc-mod-creators-detail__grid dd { margin: 0; color: var(--rc-fg-bright); }

.rc-mod-creators-certs,
.rc-mod-creators-rclot {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.9em;
}
.rc-mod-creators-certs th,
.rc-mod-creators-rclot th {
    text-align: left;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--rc-accent-hi);
    color: var(--rc-accent-hi);
}
.rc-mod-creators-certs td,
.rc-mod-creators-rclot td {
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--rc-border-dim);
}
.rc-mod-creators-certs code,
.rc-mod-creators-rclot code { color: var(--rc-fg-bright); }


/* ===================================================================
 * B.1 Mes Realms (sous-bloc 4 UI)
 * ===================================================================*/

.rc-realms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rc-gap);
    margin-bottom: var(--rc-gap-lg);
}

.rc-realms-empty {
    padding: var(--rc-gap-lg);
    text-align: center;
    border: 1px dashed var(--rc-border-dim);
    color: var(--rc-fg-muted);
}

.rc-realms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--rc-gap);
}

.rc-realm-card {
    border: 1px solid var(--rc-border);
    background: var(--rc-bg-panel);
    padding: var(--rc-gap);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rc-realm-card--terminating { opacity: 0.7; border-color: #c00; }
.rc-realm-card--terminated  { opacity: 0.4; }
.rc-realm-card--lost        { border-color: #c00; }

.rc-realm-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.rc-realm-card__name { margin: 0; font-size: 1.1em; }
.rc-realm-card__name a { color: inherit; text-decoration: none; }
.rc-realm-card__name a:hover { text-decoration: underline; }
.rc-realm-card__desc { color: var(--rc-fg-muted); font-size: 0.9em; margin: 0; }
.rc-realm-card__meta { list-style: none; padding: 0; margin: 0; font-size: 0.85em; }
.rc-realm-card__meta li { margin: 2px 0; }
.rc-realm-card__warning { color: #c80; }
.rc-realm-card__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* Status badges */
.rc-realm-status {
    display: inline-block; padding: 2px 8px; border-radius: 3px;
    font-size: 0.75em; font-weight: bold; text-transform: uppercase;
    background: #ccc; color: #333;
}
.rc-realm-status--active                  { background: #0a0; color: #fff; }
.rc-realm-status--provisioning            { background: #08a; color: #fff; }
.rc-realm-status--stopped                 { background: #999; color: #fff; }
.rc-realm-status--suspended               { background: #c80; color: #fff; }
.rc-realm-status--terminating             { background: #c00; color: #fff; }
.rc-realm-status--terminated              { background: #444; color: #fff; }
.rc-realm-status--lost                    { background: #c00; color: #fff; }
.rc-realm-status--pending_admin_provision { background: #909; color: #fff; }

/* Detail header */
.rc-realm-detail__header { margin-bottom: var(--rc-gap); }
.rc-back-link { color: var(--rc-fg-muted); text-decoration: none; font-size: 0.9em; }
.rc-back-link:hover { text-decoration: underline; }

/* Tabs */
.rc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rc-border); margin-bottom: var(--rc-gap); }
.rc-tab {
    background: transparent; border: 1px solid transparent; border-bottom: none;
    padding: 8px 16px; cursor: pointer; color: var(--rc-fg-muted);
}
.rc-tab:hover { color: var(--rc-fg); }
.rc-tab--active {
    background: var(--rc-bg-panel); border-color: var(--rc-border);
    color: var(--rc-fg); position: relative; top: 1px;
}
.rc-tab-panel { padding: var(--rc-gap) 0; }

/* Form helpers */
.rc-radio, .rc-checkbox { display: inline-block; margin-right: 12px; cursor: pointer; }
.rc-warning {
    color: #c80; padding: 8px 12px; background: #fff3cd; border-left: 4px solid #f90;
}
.rc-info {
    color: #036; padding: 8px 12px; background: #def; border-left: 4px solid #08a;
}

/* Members table */
.rc-realm-invite-form, .rc-realm-ban-form { display: flex; gap: 6px; margin-bottom: var(--rc-gap); flex-wrap: wrap; }
.rc-realm-invite-form input, .rc-realm-ban-form input { flex: 1; min-width: 150px; }
.rc-realm-members-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.rc-realm-members-table th, .rc-realm-members-table td {
    padding: 6px 8px; border-bottom: 1px solid var(--rc-border-dim); text-align: left;
}
.rc-realm-member-status {
    display: inline-block; padding: 2px 6px; border-radius: 3px;
    font-size: 0.75em; font-weight: bold;
}
.rc-realm-member-status--member { background: #0a0; color: #fff; }
.rc-realm-member-status--banned { background: #c00; color: #fff; }

/* Bibliothèque Synaptic */
.rc-biblio {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--rc-gap);
    min-height: 400px;
}
.rc-biblio-sidebar {
    border-right: 1px solid var(--rc-border-dim);
    padding-right: var(--rc-gap);
}
.rc-biblio-sidebar h3 { margin-top: 0; font-size: 0.9em; }
.rc-biblio-sidebar select, .rc-biblio-sidebar input { width: 100%; }
.rc-biblio-main { display: flex; flex-direction: column; min-height: 0; }
.rc-biblio-list {
    list-style: none; padding: 0; margin: 0;
    flex: 1; overflow-y: auto; max-height: 500px;
    border: 1px solid var(--rc-border-dim);
}
.rc-biblio-row {
    border-bottom: 1px solid var(--rc-border-dim);
}
.rc-biblio-row[hidden] { display: none; }
.rc-biblio-row__label {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 8px; align-items: center;
    padding: 4px 8px; cursor: pointer; font-size: 0.85em;
}
.rc-biblio-row__label:hover { background: var(--rc-bg-hover, #eef); }
.rc-biblio-row--queued { background: #ffd; }
.rc-biblio-row__creator { color: var(--rc-fg-muted); margin-left: 4px; }
.rc-biblio-row__date { color: var(--rc-fg-muted); font-size: 0.9em; }
.rc-biblio-row__fqdn { font-family: monospace; font-size: 0.8em; color: var(--rc-fg-muted); }

.rc-biblio-kind {
    display: inline-block; padding: 2px 6px; border-radius: 3px;
    font-size: 0.7em; font-weight: bold;
}
.rc-biblio-kind--BUILDING { background: #0a0; color: #fff; }
.rc-biblio-kind--NETWORK  { background: #08a; color: #fff; }
.rc-biblio-kind--AUDIO    { background: #c80; color: #fff; }

.rc-biblio-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px; border-top: 1px solid var(--rc-border-dim); margin-top: 8px;
}

@media (max-width: 700px) {
    .rc-biblio { grid-template-columns: 1fr; }
    .rc-biblio-sidebar { border-right: none; border-bottom: 1px solid var(--rc-border-dim); padding-right: 0; padding-bottom: var(--rc-gap); }
}

/* ===================================================================
 * C.2 Mes Collections (sous-bloc 3 UI)
 * ===================================================================*/

.rc-collections-mine, .rc-collections-browse { margin-bottom: var(--rc-gap-lg); }
.rc-collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--rc-gap);
}
.rc-collection-card {
    border: 1px solid var(--rc-border);
    background: var(--rc-bg-panel);
    padding: var(--rc-gap);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rc-collection-card header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rc-collection-card h3 { margin: 0; font-size: 1.05em; flex: 1; }
.rc-collection-card h3 a { color: inherit; text-decoration: none; }
.rc-collection-card h3 a:hover { text-decoration: underline; }
.rc-collection-card__desc { color: var(--rc-fg-muted); font-size: 0.9em; margin: 0; }
.rc-collection-card__meta { color: var(--rc-fg-muted); font-size: 0.85em; margin: 0; }

.rc-collection-badge {
    display: inline-block; padding: 2px 8px; border-radius: 3px;
    font-size: 0.7em; font-weight: bold; text-transform: uppercase;
    background: #ccc; color: #333;
}
.rc-collection-badge--realm      { background: #08a; color: #fff; }
.rc-collection-badge--client     { background: #c80; color: #fff; }
.rc-collection-badge--private    { background: #555; color: #fff; }
.rc-collection-badge--public     { background: #0a0; color: #fff; }
.rc-collection-badge--subscribed { background: #909; color: #fff; }

.rc-collections-browse__filters {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: var(--rc-gap); align-items: center;
}
.rc-collections-browse__filters input,
.rc-collections-browse__filters select { padding: 4px 8px; }

.rc-collection-detail { margin-bottom: var(--rc-gap-lg); }
.rc-collection-assets-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.rc-collection-assets-table th,
.rc-collection-assets-table td {
    padding: 6px 8px; border-bottom: 1px solid var(--rc-border-dim); text-align: left;
}

/* C.2 picker — modal wide + row layout pour Add Asset picker */
.rc-modal__content--wide { max-width: 880px; }
#rc-collection-add-asset-modal .rc-biblio { min-height: 400px; max-height: 60vh; }
#rc-collection-add-asset-modal .rc-biblio-row__label {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    cursor: default;
}
#rc-collection-add-asset-modal .rc-biblio-row__label:hover { background: var(--rc-bg-hover, #eef); }
#rc-collection-add-asset-modal .rc-biblio-row__label button { white-space: nowrap; }

/* B.2 play.php — card selected highlight */
.rc-page-play .rc-realm-card--selected,
.rc-page-play .rc-collection-card--selected {
    border-color: #0a0;
    background: #0a200a;
    box-shadow: 0 0 0 2px rgba(0, 170, 0, 0.3);
}

/* B.2 play.php — ads policy line + description bolder */
.rc-page-play .rc-realm-card__desc {
    color: var(--rc-fg); font-size: 0.95em; margin: 4px 0;
    padding: 6px 8px; background: rgba(255,255,255,0.04); border-left: 3px solid var(--rc-border-dim);
}
.rc-realm-card__ads-policy {
    margin: 8px 0 0 0; padding: 6px 8px;
    background: rgba(0,170,170,0.08); border-left: 3px solid #0aa;
    font-size: 0.92em;
}
.rc-realm-card__ads-policy strong { color: #0e0; }

/* ============ Modal générique (rcPrompt / rcConfirm / rcMultiPrompt) ============ */
/* Note : classes nommées rc-jsmodal* pour éviter collision avec rc-modal
   existant (l. 965, pattern modal reauth qui force display:flex sur .rc-modal). */
.rc-jsmodal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75); z-index: 9500;
    display: flex; align-items: center; justify-content: center;
}
.rc-jsmodal {
    display: block;
    background: var(--rc-bg-panel, #111);
    border: 1px solid var(--rc-border, #0a0);
    border-radius: 4px;
    padding: 20px; width: min(800px, 92vw); max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
    font-family: var(--rc-mono, monospace);
}
.rc-jsmodal__form select {
    background: var(--rc-bg, #000); color: var(--rc-fg, #eee);
    border: 1px solid var(--rc-border-dim, #050); padding: 6px 8px;
    font-family: inherit; font-size: 1em;
    width: 100%; box-sizing: border-box;
}

/* ============ Toast UI Editor — override couleurs natives (bleu) → vert RC ============
   Sprite icônes : ligne y=3px = normal, y=-23px = active (bleu).
   On force toujours y=3px et on colorise via filter + bg accent.
   Utilisé par : forum (création/edit post/comment), support (modal new ticket),
   et tout futur appel à rcInitToastEditor. */
.rc-toast-editor-wrap { margin-top: 4px; }
.toastui-editor-defaultUI {
    border-color: var(--rc-border, #0a0) !important;
    border-radius: 4px;
}
.toastui-editor-dark .toastui-editor-toolbar-icons {
    filter: brightness(0.85) sepia(1) saturate(4) hue-rotate(45deg);
}
.toastui-editor-dark .toastui-editor-toolbar-icons:not(:disabled):hover {
    background-color: var(--rc-accent-lo, #050) !important;
    border-color: var(--rc-accent-lo, #050) !important;
    filter: brightness(1.1) sepia(1) saturate(5) hue-rotate(45deg);
}
.toastui-editor-dark .toastui-editor-toolbar-icons:not(:disabled).active {
    background-position-y: 3px !important;
    background-color: var(--rc-accent-lo, #050) !important;
    border-color: var(--rc-accent-hi, #4f4) !important;
    filter: brightness(1.3) sepia(1) saturate(6) hue-rotate(45deg);
}
.toastui-editor-dark .toastui-editor-mode-switch .tab-item.active {
    color: var(--rc-accent-hi, #4f4) !important;
    border-color: var(--rc-accent-hi, #4f4) !important;
}
.toastui-editor-dark .toastui-editor-popup-add-image .tab-item.active,
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync.active:before {
    color: var(--rc-accent-hi, #4f4) !important;
    border-bottom-color: var(--rc-accent-hi, #4f4) !important;
}

/* Field + counter container — wrap pour que counter suive width du field */
.rc-field-with-counter {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
}
.rc-field-with-counter:has(.rc-toast-editor-wrap) {
    display: block;
    width: 100%;
}
.rc-field-with-counter > input,
.rc-field-with-counter > textarea {
    display: block;
}
.rc-char-counter {
    display: block; text-align: right;
    color: var(--rc-fg-dim, #666); margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.rc-char-counter--warn { color: var(--rc-warn, #f90); }
.rc-char-counter--err  { color: var(--rc-error, #f55); font-weight: bold; }
.rc-jsmodal--danger { border-color: var(--rc-error, #f55); }
.rc-jsmodal__title {
    display: block;
    margin: 0 0 12px 0;
    color: var(--rc-accent-hi, #4f4);
    font-size: 1.1em;
}
.rc-jsmodal--danger .rc-jsmodal__title { color: var(--rc-error, #f55); }
.rc-jsmodal__msg { display: block; margin: 0 0 12px 0; color: var(--rc-fg, #eee); }
.rc-jsmodal__field, .rc-jsmodal__form input, .rc-jsmodal__form textarea {
    display: block;
    width: 100%; box-sizing: border-box;
    background: var(--rc-bg, #000); color: var(--rc-fg, #eee);
    border: 1px solid var(--rc-border-dim, #050);
    padding: 6px 8px; font-family: inherit; font-size: 1em;
}
.rc-jsmodal__form { display: block; }
.rc-jsmodal__form p { display: block; margin: 0 0 10px 0; }
.rc-jsmodal__form label {
    display: block; margin-bottom: 4px;
    color: var(--rc-fg-muted, #8c8); font-size: 0.9em;
}
.rc-jsmodal__actions {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
}
/* MP user picker (inside rc-jsmodal) */
.rc-mp-picker__list {
    margin-top: 8px; max-height: 320px; overflow-y: auto;
    border: 1px solid var(--rc-border-dim, #050);
    background: var(--rc-bg, #000);
}
.rc-mp-picker__item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; width: 100%;
    background: transparent; border: 0;
    color: var(--rc-fg, #eee);
    text-align: left; cursor: pointer; font-family: inherit;
    border-bottom: 1px solid var(--rc-bg-panel-2, #1a1a1a);
}
.rc-mp-picker__item:hover {
    background: var(--rc-accent-lo, #050);
    color: var(--rc-fg-bright, #cfc);
}
.rc-mp-picker__item--dim, .rc-mp-picker__item:disabled {
    opacity: 0.45; cursor: not-allowed;
}
.rc-mp-picker__item--dim:hover, .rc-mp-picker__item:disabled:hover {
    background: transparent; color: var(--rc-fg, #eee);
}
.rc-mp-picker__badge {
    margin-left: auto;
    padding: 1px 6px; border-radius: 8px;
    background: var(--rc-accent-lo, #050);
    color: var(--rc-fg-bright, #cfc);
    font-size: 0.8em;
}
.rc-mp-picker__selected {
    margin: 8px 0 0 0; font-size: 0.9em; padding: 4px;
}

/* ============ C.4 — Bulle MP universelle (D31) ============ */
.rc-mp-bubble {
    position: fixed; bottom: 60px; right: 16px;
    z-index: 9000; font-family: var(--rc-mono, monospace);
}
.rc-mp-bubble__toggle {
    background: var(--rc-bg-panel-2, #1a1a1a);
    border: 2px solid var(--rc-accent, #0a0);
    color: var(--rc-fg-bright, #cfc);
    width: 56px; height: 56px; border-radius: 50%;
    cursor: pointer; font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    position: relative;
}
.rc-mp-bubble__toggle:hover {
    background: var(--rc-accent-lo, #050);
    border-color: var(--rc-accent-hi, #4f4);
}
.rc-mp-bubble__badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--rc-error, #f55); color: #fff;
    border-radius: 12px; padding: 2px 6px;
    font-size: 11px; min-width: 18px; text-align: center;
    font-family: var(--rc-mono, monospace);
}
.rc-mp-bubble__panel {
    position: absolute; bottom: 64px; right: 0;
    width: 400px; height: 500px; max-height: 80vh;
    background: var(--rc-bg-panel, #111);
    border: 1px solid var(--rc-border, #0a0);
    border-radius: 4px;
    display: flex; flex-direction: column;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.rc-mp-bubble--collapsed .rc-mp-bubble__panel { display: none; }
.rc-mp-bubble__header {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 12px; border-bottom: 1px solid var(--rc-border-dim, #050);
    background: var(--rc-bg-panel-2, #1a1a1a);
}
.rc-mp-bubble__title { flex: 1; font-weight: bold; color: var(--rc-accent-hi, #4f4); }
.rc-mp-bubble__action, .rc-mp-bubble__close, .rc-mp-bubble__back {
    background: transparent; border: 1px solid var(--rc-border-dim, #050);
    color: var(--rc-fg-muted, #8c8); padding: 2px 8px; cursor: pointer;
    border-radius: 2px;
}
.rc-mp-bubble__action:hover, .rc-mp-bubble__close:hover, .rc-mp-bubble__back:hover {
    background: var(--rc-accent-lo, #050); color: var(--rc-fg-bright, #cfc);
}
.rc-mp-bubble__threads, .rc-mp-bubble__thread-view {
    flex: 1; overflow-y: auto; padding: 8px;
}
.rc-mp-bubble__thread-view { display: flex; flex-direction: column; padding: 0; }
.rc-mp-thread {
    padding: 8px 12px; margin-bottom: 4px; cursor: pointer;
    border-left: 2px solid transparent;
    background: var(--rc-bg-panel-2, #1a1a1a);
}
.rc-mp-thread:hover { border-left-color: var(--rc-accent-hi, #4f4); background: #222; }
.rc-mp-thread--unread { border-left-color: var(--rc-accent-hi, #4f4); }
.rc-mp-thread__name { color: var(--rc-fg-bright, #cfc); font-weight: bold; }
.rc-mp-thread__unread {
    display: inline-block; background: var(--rc-error, #f55); color: #fff;
    padding: 1px 6px; border-radius: 10px; font-size: 11px; margin-left: 4px;
}
.rc-mp-thread__preview {
    margin-top: 2px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-size: 0.9em;
}
.rc-mp-bubble__thread-header {
    display: flex; gap: 4px; align-items: center; padding: 8px;
    border-bottom: 1px solid var(--rc-border-dim, #050);
    background: var(--rc-bg-panel-2, #1a1a1a);
}
.rc-mp-bubble__thread-title { flex: 1; font-weight: bold; }
.rc-mp-bubble__messages {
    flex: 1; overflow-y: auto; padding: 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.rc-mp-msg {
    background: var(--rc-bg-panel-2, #1a1a1a);
    padding: 6px 10px; border-radius: 4px;
    max-width: 85%; word-wrap: break-word;
}
.rc-mp-msg--own {
    align-self: flex-end;
    background: var(--rc-accent-lo, #050);
    border: 1px solid var(--rc-accent, #0a0);
}
.rc-mp-msg__meta { font-size: 0.85em; color: var(--rc-fg-muted, #8c8); }
.rc-mp-msg__body { white-space: pre-wrap; color: var(--rc-fg, #eee); }
.rc-mp-msg__actions { margin-top: 2px; display: flex; gap: 4px; }
.rc-mp-msg__actions button {
    background: transparent; border: none;
    color: var(--rc-fg-dim, #666); cursor: pointer;
    font-size: 0.9em;
}
.rc-mp-msg__actions button:hover { color: var(--rc-accent-hi, #4f4); }
.rc-mp-bubble__send {
    display: flex; gap: 4px; padding: 8px;
    border-top: 1px solid var(--rc-border-dim, #050);
    background: var(--rc-bg-panel-2, #1a1a1a);
}
.rc-mp-bubble__send textarea {
    flex: 1; background: var(--rc-bg, #000); color: var(--rc-fg, #eee);
    border: 1px solid var(--rc-border-dim, #050); padding: 4px 8px;
    font-family: var(--rc-mono, monospace); resize: vertical;
}
.rc-mp-flash {
    position: fixed; bottom: 130px; right: 16px; z-index: 9100;
    padding: 8px 12px; border-radius: 4px;
    background: var(--rc-bg-panel-2, #1a1a1a);
    border: 1px solid var(--rc-border, #0a0);
    color: var(--rc-fg-bright, #cfc); max-width: 380px;
}
.rc-mp-flash--err { border-color: var(--rc-error, #f55); color: var(--rc-error, #f55); }
.rc-mp-flash--ok { border-color: var(--rc-accent-hi, #4f4); }
@media (max-width: 480px) {
    .rc-mp-bubble__panel {
        position: fixed; bottom: 0; right: 0; left: 0; top: auto;
        width: 100vw; height: 70vh; max-height: 70vh; border-radius: 0;
    }
}