/* =====================================================================
   VEYRION — Système de design
   Palette Discord : le panel et le client Discord se lisent d'un seul œil.
   ===================================================================== */

/* ---------- 1. Jetons ---------- */
:root {
    /* Fonds — teintes officielles de Discord.
       #1E1F22 barre de serveurs · #2B2D31 liste des salons
       #313338 zone de conversation · #111214 éléments flottants */
    --bg-base:        #313338;
    --bg-canvas:      #2B2D31;
    --bg-surface:     #2B2D31;
    --bg-elevated:    #1E1F22;
    --bg-overlay:     rgba(0, 0, 0, .8);
    --bg-input:       #1E1F22;
    --bg-hover:       rgba(255, 255, 255, .045);
    --bg-active:      rgba(88, 101, 242, .18);
    /* Distincte de --bg-surface : sert aux survols de ligne, aux en-têtes de
       tableau et aux blocs de message, qui seraient invisibles à teinte égale. */
    --bg-subtle:      #313338;

    /* Bordures */
    --border:         #3F4147;
    --border-strong:  #4E5058;
    --border-accent:  rgba(88, 101, 242, .5);

    /* Texte */
    --text:           #F2F3F5;
    --text-muted:     #B5BAC1;
    --text-subtle:    #949BA4;
    --text-invert:    #FFFFFF;

    /* Marque — blurple Discord */
    --brand:          #5865F2;
    --brand-hover:    #4752C4;
    --brand-ink:      #C9CDFB;
    --brand-soft:     rgba(88, 101, 242, .16);
    --brand-2:        #00A8FC;
    --brand-grad:     linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    --brand-grad-soft:linear-gradient(135deg, rgba(88,101,242,.20), rgba(0,168,252,.10));

    /* États — couleurs Discord, lisibles sur fond sombre */
    --success:        #23A559;
    --success-soft:   rgba(35, 165, 89, .15);
    --warning:        #F0B232;
    --warning-soft:   rgba(240, 178, 50, .15);
    --danger:         #F23F42;
    --danger-soft:    rgba(242, 63, 66, .15);
    --info:           #00A8FC;
    --info-soft:      rgba(0, 168, 252, .15);

    /* Rayons — 5px sur tout le site.
       `--r-full` reste réservé aux formes réellement circulaires
       (pastilles d'état, avatars, curseurs d'interrupteur). */
    --r-sm: 5px;
    --r-md: 5px;
    --r-lg: 5px;
    --r-xl: 5px;
    --r-full: 999px;

    /* Ombres — profondes, comme sur fond sombre Discord */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 8px 24px -8px rgba(0,0,0,.55);
    --shadow-lg: 0 24px 56px -18px rgba(0,0,0,.7);
    --glow:      0 0 0 3px rgba(88,101,242,.3);

    /* Layout */
    --sidebar-w: 268px;
    --topbar-h: 64px;

    /* Transitions */
    --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --t: 200ms cubic-bezier(.4, 0, .2, 1);
    --t-slow: 380ms cubic-bezier(.16, 1, .3, 1);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
p  { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-hover); }

code, kbd, pre { font-family: var(--mono); font-size: .85em; }

img { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }

::selection { background: rgba(88,101,242,.4); }

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

/* Taille par défaut des icônes.
   Les SVG du jeu interne n'ont ni width ni height : sans cette règle, le
   navigateur leur applique la taille par défaut d'un objet remplacé
   (300 × 150) partout où aucun composant ne les dimensionne — d'où les
   icônes géantes sur les cartes de serveur et la page de connexion.
   Toute règle de composant (`.btn svg`, `.badge svg`…) reste prioritaire. */
svg {
    width: 18px;
    height: 18px;
    flex: none;
    vertical-align: middle;
}

/* Barres de défilement */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #1A1B1E;
    border-radius: var(--r-full);
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #131416; background-clip: content-box; }

/* ---------- 2 bis. Thème du serveur sélectionné ----------
   Les deux teintes dominantes du logo Discord habillent la barre latérale
   et l'en-tête. `--guild-ink` est calculé par JS d'après la luminance du
   fond : texte clair sur logo sombre, texte sombre sur logo clair, pour
   rester lisible quelle que soit l'image. */
:root {
    --guild-1: var(--bg-canvas);
    --guild-2: var(--bg-canvas);
    --guild-ink: var(--text);
    --guild-ink-muted: var(--text-muted);
    --guild-line: var(--border);
}

body.has-guild-theme .sidebar {
    background: linear-gradient(165deg, var(--guild-1) 0%, var(--guild-2) 100%);
    border-right-color: var(--guild-line);
}
body.has-guild-theme .sidebar,
body.has-guild-theme .sidebar .logo,
body.has-guild-theme .sidebar .guild-switch { color: var(--guild-ink); }

body.has-guild-theme .sidebar-head,
body.has-guild-theme .sidebar-foot { border-color: var(--guild-line); }

body.has-guild-theme .nav-section-title { color: var(--guild-ink-muted); }

body.has-guild-theme .nav-link { color: var(--guild-ink-muted); }
body.has-guild-theme .nav-link:hover { background: var(--guild-line); color: var(--guild-ink); }
body.has-guild-theme .nav-link.is-active {
    background: var(--guild-line);
    color: var(--guild-ink);
}
body.has-guild-theme .nav-link.is-active::before { background: var(--guild-ink); }

body.has-guild-theme .guild-switch {
    background: var(--guild-line);
    border-color: transparent;
}
body.has-guild-theme .guild-switch:hover { background: var(--guild-line); border-color: var(--guild-ink-muted); }
body.has-guild-theme .guild-switch .subtle { color: var(--guild-ink-muted); }

body.has-guild-theme .user-chip { color: var(--guild-ink); }
body.has-guild-theme .user-chip:hover { background: var(--guild-line); }
body.has-guild-theme .user-chip .subtle { color: var(--guild-ink-muted); }

/* Bandeau supérieur : rappel discret de la teinte principale. */
body.has-guild-theme .topbar {
    border-bottom-color: var(--guild-line);
    box-shadow: inset 0 3px 0 0 var(--guild-1);
}

/* ---------- 3. Utilitaires ---------- */
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: .82rem; }
.tiny { font-size: .75rem; }
.bold { font-weight: 650; }
.mono { font-family: var(--mono); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-sm { display: flex; flex-direction: column; gap: .5rem; }
.stack-lg { display: flex; flex-direction: column; gap: 1.75rem; }
.row { display: flex; align-items: center; gap: .75rem; }
.row-sm { display: flex; align-items: center; gap: .4rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.gap-0 { gap: 0; }

.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }

/* ---------- 4. Boutons ---------- */
.btn {
    --btn-bg: var(--bg-elevated);
    --btn-fg: var(--text);
    --btn-bd: var(--border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .58rem 1rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 560;
    line-height: 1.2;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-md);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
    user-select: none;
}
.btn:hover:not(:disabled) { border-color: var(--border-strong); background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled, .btn[aria-busy="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* Bouton visible mais inopérant : on montre l'action possible plutôt que
   de la faire disparaître, et le motif est affiché juste en dessous. */
.btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(.6);
}

.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary {
    --btn-bg: var(--brand-grad);
    --btn-fg: var(--text-invert);
    --btn-bd: transparent;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) { --btn-bg: linear-gradient(135deg, #4338CA 0%, #1D4ED8 100%); box-shadow: var(--shadow-md); }

.btn-ghost { --btn-bg: transparent; --btn-bd: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { --btn-bg: var(--bg-hover); color: var(--text); box-shadow: none; }

.btn-outline { --btn-bg: var(--bg-surface); }

.btn-success { --btn-bg: var(--success-soft); --btn-fg: var(--success); --btn-bd: rgba(6,122,85,.28); }
.btn-danger  { --btn-bg: var(--danger-soft);  --btn-fg: var(--danger);  --btn-bd: rgba(217,45,32,.28); }
.btn-warning { --btn-bg: var(--warning-soft); --btn-fg: var(--warning); --btn-bd: rgba(181,71,8,.28); }
.btn-solid-danger { --btn-bg: var(--danger); --btn-fg: var(--text-invert); --btn-bd: transparent; }

.btn-sm { padding: .38rem .7rem; font-size: .8rem; border-radius: var(--r-sm); }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { padding: .8rem 1.5rem; font-size: .95rem; border-radius: var(--r-lg); }
.btn-block { width: 100%; }
.btn-icon { padding: .5rem; aspect-ratio: 1; }

.btn-discord { --btn-bg: #5865F2; --btn-fg: var(--text-invert); --btn-bd: transparent; }
.btn-discord:hover:not(:disabled) { --btn-bg: #4752C4; }

.btn-group { display: inline-flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- 5. Cartes ---------- */
.card {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* Le survol souligne l'encadrement sans le faire bouger : une carte n'est
   pas un bouton, elle ne doit pas donner l'impression d'être cliquable. */
.card:hover { border-color: var(--border-strong); }
.card-glass {
    background: rgba(43, 45, 49, .78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-color: var(--border-strong);
}
.card-flush { padding: 0; overflow: hidden; }
.card-hover { transition: border-color var(--t), transform var(--t), box-shadow var(--t); }
.card-hover:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* En-tête de carte : séparé du contenu par un filet, pour que le titre
   se lise comme un en-tête et non comme un premier paragraphe. */
.card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    margin: -.25rem 0 1.1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--border);
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head .card-sub { color: var(--text-muted); font-size: .82rem; margin-top: .25rem; line-height: 1.5; }

.card-section { padding: 1.35rem 1.5rem; border-bottom: 1px solid var(--border); }
.card-section:last-child { border-bottom: 0; }
.card-section .card-sub { color: var(--text-muted); font-size: .82rem; margin-top: .25rem; line-height: 1.5; }

/* ---------- 6. Statistiques ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }

.stat {
    position: relative;
    padding: 1.15rem 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color var(--t), transform var(--t);
}
.stat::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 2px;
    background: var(--accent, var(--brand-grad));
    opacity: .85;
}
.stat:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-label { display: flex; align-items: center; gap: .45rem; color: var(--text-muted); font-size: .78rem; font-weight: 550; text-transform: uppercase; letter-spacing: .04em; }
.stat-label svg { width: 15px; height: 15px; opacity: .8; }
.stat-value { font-size: 2.15rem; font-weight: 700; letter-spacing: -.03em; margin-top: .45rem; font-variant-numeric: tabular-nums; }
.stat-meta { margin-top: .3rem; font-size: .78rem; color: var(--text-subtle); }

.stat.is-pending    { --accent: linear-gradient(90deg,#F0B232,#FFD469); }
.stat.is-accepted   { --accent: linear-gradient(90deg,#23A559,#3BA55D); }
.stat.is-refused    { --accent: linear-gradient(90deg,#F23F42,#FF7A7C); }
.stat.is-sanctioned { --accent: linear-gradient(90deg,#B084F5,#F23F42); }
.stat.is-neutral    { --accent: linear-gradient(90deg,#00A8FC,#5865F2); }

/* ---------- 7. Badges & pastilles ---------- */
.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem;
    font-size: .74rem; font-weight: 600; line-height: 1.4;
    border-radius: var(--r-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge-brand   { background: var(--brand-soft);   color: var(--brand-ink); border-color: rgba(79,70,229,.28); }
.badge-success { background: var(--success-soft); color: var(--success); border-color: rgba(6,122,85,.26); }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(181,71,8,.26); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: rgba(217,45,32,.26); }
.badge-info    { background: var(--info-soft);    color: var(--info);    border-color: rgba(11,111,208,.26); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-subtle); }
.dot-online  { background: var(--success); box-shadow: 0 0 0 3px rgba(6,122,85,.16); }
.dot-offline { background: #B3BBCB; }
.dot-error   { background: var(--danger); box-shadow: 0 0 0 3px rgba(217,45,32,.16); }

.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------- 8. Formulaires ---------- */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

label, .label {
    font-size: .82rem; font-weight: 560; color: var(--text);
}
.label-hint { font-size: .76rem; color: var(--text-subtle); font-weight: 400; }

input[type="text"], input[type="number"], input[type="url"], input[type="password"],
input[type="date"], input[type="search"], input[type="email"], input[type="color"],
select, textarea {
    width: 100%;
    padding: .6rem .8rem;
    font: inherit;
    font-size: .875rem;
    color: var(--text);
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--glow);
}
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }

textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

input[type="color"] { padding: 3px; height: 38px; cursor: pointer; }

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5568' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: 16px;
    padding-right: 2.2rem;
}
select[multiple] { background-image: none; padding-right: .8rem; min-height: 130px; }

/* Cases à cocher / interrupteurs */
.check { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; padding: .35rem 0; }
.check input[type="checkbox"], .check input[type="radio"] {
    appearance: none;
    width: 18px; height: 18px; flex: none; margin-top: 1px;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--t-fast);
    position: relative;
}
.check input[type="radio"] { border-radius: 50%; }
.check input:checked {
    background: var(--brand);
    border-color: var(--brand);
}
.check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute; left: 5px; top: 1px;
    width: 5px; height: 10px;
    border: solid var(--text-invert); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.check input[type="radio"]:checked::after {
    content: ''; position: absolute; inset: 4px; background: var(--text-invert); border-radius: 50%;
}
.check-text { font-size: .85rem; }
.check-desc { font-size: .78rem; color: var(--text-subtle); margin-top: .1rem; }

.switch { position: relative; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.switch input { appearance: none; width: 40px; height: 22px; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--r-full); cursor: pointer; transition: all var(--t-fast); flex: none; }
.switch input::after {
    content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; background: #B3BBCB; border-radius: 50%;
    transition: all var(--t-fast);
}
.switch input:checked { background: var(--brand); border-color: var(--brand); }
.switch input:checked::after { left: 21px; background: var(--text-invert); }

.help { font-size: .78rem; color: var(--text-subtle); line-height: 1.5; }
.error-text { font-size: .78rem; color: var(--danger); }

fieldset { border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; margin: 0; }
legend { padding: 0 .5rem; font-size: .82rem; font-weight: 600; color: var(--text-muted); }

/* ---------- 9. Tableaux ---------- */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}
table.data { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.data th {
    padding: .7rem 1rem;
    text-align: left;
    font-size: .74rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-subtle);
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
}
table.data td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr { transition: background var(--t-fast); }
table.data tbody tr:hover { background: var(--bg-hover); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.actions { text-align: right; white-space: nowrap; }

/* État vide : encadré en pointillés, pour signaler un emplacement à remplir
   plutôt qu'une zone vide par accident. */
.empty {
    padding: 3.25rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
    background: var(--bg-subtle);
    margin: 1rem;
}
.empty svg { width: 52px; height: 52px; opacity: .28; margin: 0 auto .9rem; }
.empty h3 { color: var(--text); margin-bottom: .4rem; }

/* ---------- 10. Mise en page applicative ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: none;
    background: var(--bg-canvas);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    transition: transform var(--t-slow);
}
.sidebar-head {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--border);
}
.sidebar-body { flex: 1; overflow-y: auto; padding: .9rem .7rem; }
.sidebar-foot { padding: .8rem .7rem; border-top: 1px solid var(--border); }

.nav-section { margin-bottom: 1.1rem; }
.nav-section-title {
    padding: 0 .6rem .4rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-subtle);
}
.nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .65rem;
    border-radius: var(--r-md);
    color: var(--text-muted);
    font-size: .875rem;
    font-weight: 520;
    transition: background var(--t-fast), color var(--t-fast);
    position: relative;
}
.nav-link svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav-link:hover { background: var(--bg-hover); color: var(--text); }
.nav-link.is-active {
    background: var(--bg-active);
    color: var(--brand-ink);
    font-weight: 600;
}
.nav-link.is-active::before {
    content: '';
    position: absolute; left: -.7rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 0 3px 3px 0;
    background: var(--brand);
}
.nav-link .badge { margin-left: auto; }

.main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
}
.main-full { margin-left: 0; }

.topbar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    background: rgba(49, 51, 56, .85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
}
.topbar h1 { font-size: 1.1rem; }

.content { flex: 1; padding: 2rem 2.25rem; max-width: 1600px; width: 100%; }
.content-narrow { max-width: 960px; }

.page-head { margin-bottom: 1.75rem; }
.page-head h1 { margin-bottom: .35rem; font-size: 1.9rem; }
.page-head p { color: var(--text-muted); max-width: 74ch; }

/* Logo */
.logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; color: var(--text); letter-spacing: -.02em; }
.logo-mark {
    width: 32px; height: 32px; flex: none;
    border-radius: 9px;
    background: var(--brand-grad);
    display: grid; place-items: center;
    color: var(--text-invert); font-weight: 800; font-size: .95rem;
    box-shadow: var(--shadow-sm);
}

/* Sélecteur de serveur dans la barre latérale */
.guild-switch {
    display: flex; align-items: center; gap: .65rem;
    width: 100%;
    padding: .55rem .6rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    text-align: left;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.guild-switch:hover { border-color: var(--border-strong); background: var(--bg-elevated); }
.guild-avatar {
    width: 32px; height: 32px; flex: none; border-radius: 9px;
    background: var(--bg-elevated); object-fit: cover;
    display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: var(--text-muted);
    border: 1px solid var(--border);
}
.guild-avatar-lg { width: 52px; height: 52px; border-radius: 14px; font-size: 1.1rem; }

/* Menu utilisateur */
.user-chip {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .55rem;
    border-radius: var(--r-md);
    transition: background var(--t-fast);
    width: 100%;
    text-align: left;
    color: var(--text);
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
}
.user-chip:hover { background: var(--bg-hover); }
.user-chip img { width: 30px; height: 30px; border-radius: 50%; flex: none; }

/* ---------- 11. Onglets ---------- */
.tabs {
    display: flex; gap: .25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
    overflow-x: auto;
}
.tab {
    padding: .6rem .9rem;
    font-size: .875rem;
    font-weight: 560;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--t-fast), border-color var(--t-fast);
    display: inline-flex; align-items: center; gap: .45rem;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-bottom-color: var(--brand); }
.tab .badge { font-size: .7rem; padding: .1rem .4rem; }

/* Pilules de filtre */
.pills { display: flex; gap: .4rem; flex-wrap: wrap; }
.pill {
    padding: .3rem .7rem;
    font-size: .8rem;
    border-radius: var(--r-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: all var(--t-fast);
}
.pill:hover { border-color: var(--border-strong); color: var(--text); }
.pill.is-active { background: var(--brand-soft); border-color: var(--border-accent); color: var(--brand-ink); font-weight: 600; }

/* ---------- 12. Modales ---------- */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 200;
    background: var(--bg-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: grid; place-items: center;
    padding: 1.25rem;
    opacity: 0;
    animation: fadeIn var(--t) forwards;
    overflow-y: auto;
}
.modal {
    width: 100%;
    max-width: 560px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    transform: translateY(12px) scale(.985);
    opacity: 0;
    animation: modalIn var(--t-slow) forwards;
    max-height: calc(100vh - 2.5rem);
    display: flex;
    flex-direction: column;
    margin: auto;
}
.modal-lg { max-width: 780px; }
.modal-xl { max-width: 1040px; }
.modal-head {
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.modal-body { padding: 1.35rem; overflow-y: auto; flex: 1; }
.modal-foot {
    padding: 1rem 1.35rem;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: .6rem;
    flex-wrap: wrap;
}

@keyframes fadeIn { to { opacity: 1; } }
@keyframes modalIn { to { transform: translateY(0) scale(1); opacity: 1; } }

/* ---------- 13. Notifications ---------- */
.toasts {
    position: fixed;
    bottom: 1.25rem; right: 1.25rem;
    z-index: 300;
    display: flex; flex-direction: column; gap: .6rem;
    max-width: min(400px, calc(100vw - 2.5rem));
    pointer-events: none;
}
.toast {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .85rem 1rem;
    background: rgba(30, 31, 34, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--brand);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    font-size: .85rem;
    pointer-events: auto;
    animation: toastIn var(--t-slow) forwards;
}
.toast.is-leaving { animation: toastOut var(--t) forwards; }
.toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.toast-success { border-left-color: var(--success); }
.toast-success svg { color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-error svg { color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-warning svg { color: var(--warning); }
.toast-info svg { color: var(--info); }
.toast-close { margin-left: auto; background: none; border: 0; color: var(--text-subtle); cursor: pointer; padding: 0 .1rem; font-size: 1.1rem; line-height: 1; }
.toast-close:hover { color: var(--text); }

@keyframes toastIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateX(30px); opacity: 0; } }

/* ---------- 14. Graphiques ---------- */
/* Les graphiques se dimensionnent seuls : `height` annule la taille
   d'icône par défaut appliquée à tout <svg>. */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .85rem; font-size: .78rem; color: var(--text-muted); }
.chart-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.chart-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.bar-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr auto; align-items: center; gap: .75rem; padding: .35rem 0; font-size: .82rem; }
.bar-track { height: 8px; background: var(--bg-elevated); border-radius: var(--r-full); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-full); background: var(--brand-grad); transition: width var(--t-slow); }

.progress { height: 6px; background: var(--bg-elevated); border-radius: var(--r-full); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--brand-grad); border-radius: var(--r-full); transition: width var(--t-slow); }

/* ---------- 15. Aperçu d'embed Discord ---------- */
.discord-preview {
    background: #313338;
    border-radius: var(--r-md);
    padding: 1rem;
    font-size: .875rem;
    color: #dbdee1;
}
.discord-embed {
    position: relative;
    background: #2b2d31;
    border-radius: 4px;
    padding: .75rem 1rem 1rem 1.05rem;
    max-width: 520px;
    border-left: 4px solid var(--embed-color, #7C5CFF);
}
.discord-embed-author { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; margin-bottom: .5rem; }
.discord-embed-author img { width: 24px; height: 24px; border-radius: 50%; }
.discord-embed-title { font-weight: 650; color: #fff; margin-bottom: .4rem; }
.discord-embed-desc { white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.discord-embed-fields { display: grid; gap: .55rem; margin-top: .65rem; }
.discord-embed-fields.has-inline { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.discord-field-name { font-weight: 650; color: #fff; font-size: .82rem; }
.discord-field-value { font-size: .82rem; white-space: pre-wrap; }
.discord-embed-image { margin-top: .7rem; border-radius: 4px; max-height: 260px; object-fit: cover; }
.discord-embed-thumb { position: absolute; top: .8rem; right: .8rem; width: 72px; height: 72px; border-radius: 4px; object-fit: cover; }
.discord-embed-footer { display: flex; align-items: center; gap: .45rem; margin-top: .7rem; font-size: .74rem; color: #a3a6aa; }
.discord-embed-footer img { width: 18px; height: 18px; border-radius: 50%; }
.discord-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.discord-button {
    padding: .4rem .8rem; border-radius: 3px; font-size: .82rem; font-weight: 550;
    background: #4e5058; color: #fff; border: 0;
}
.discord-button.primary { background: #5865F2; }
.discord-button.success { background: #248046; }
.discord-button.danger  { background: #da373c; }
.discord-button.link    { background: #4e5058; }

/* Variables cliquables */
.var-chip {
    font-family: var(--mono);
    font-size: .74rem;
    padding: .18rem .45rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--brand-ink);
    cursor: pointer;
    transition: all var(--t-fast);
}
.var-chip:hover { border-color: var(--border-accent); background: var(--brand-soft); }

/* ---------- 16. Fil d'activité ---------- */
.timeline { display: flex; flex-direction: column; }
.timeline-item {
    display: grid; grid-template-columns: 26px 1fr; gap: .75rem;
    padding-bottom: 1rem;
    position: relative;
}
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute; left: 12px; top: 26px; bottom: 0;
    width: 1px; background: var(--border);
}
.timeline-dot {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    z-index: 1;
}
.timeline-dot svg { width: 13px; height: 13px; }
.timeline-body { font-size: .85rem; min-width: 0; }
.timeline-time { font-size: .74rem; color: var(--text-subtle); }

/* ---------- 17. Conversation (tickets) ---------- */
.chat { display: flex; flex-direction: column; gap: .9rem; padding: 1.1rem; overflow-y: auto; max-height: 60vh; }
.msg { display: flex; gap: .7rem; }
.msg img.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.msg-bubble {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: .6rem .85rem;
    max-width: 72ch;
    font-size: .875rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.msg-meta { font-size: .74rem; color: var(--text-subtle); margin-bottom: .2rem; display: flex; gap: .5rem; align-items: center; }
.msg.is-staff { flex-direction: row-reverse; }
.msg.is-staff .msg-bubble { background: var(--brand-soft); border-color: rgba(79,70,229,.24); }
.msg.is-staff .msg-meta { justify-content: flex-end; }
.msg.is-system { justify-content: center; }
.msg.is-system .msg-bubble { background: transparent; border-style: dashed; color: var(--text-muted); font-size: .8rem; }

/* ---------- 18. Publicités ---------- */
.ad-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 1.05rem;
    padding: 1.4rem 1.5rem;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.ad-card:hover { background: var(--bg-subtle); }
.ad-card:last-child { border-bottom: 0; }
.ad-card img.avatar {
    width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid var(--border);
}

/* Liseré d'état : le tri visuel se fait au premier coup d'œil. */
.ad-card[data-status="pending"]    { border-left-color: var(--warning); }
.ad-card[data-status="accepted"]   { border-left-color: var(--success); }
.ad-card[data-status="refused"]    { border-left-color: var(--danger); }
.ad-card[data-status="sanctioned"] { border-left-color: #B084F5; }
.ad-content {
    margin-top: .55rem;
    padding: .7rem .85rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-accent);
    border-radius: var(--r-sm);
    font-size: .85rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow-y: auto;
}

/* Publicité restituée telle qu'elle apparaît sur Discord :
   le texte brut, puis les images en aperçu. */
/* Le message restitué à la manière de Discord : bloc plein largeur, texte
   confortable, liseré de marque à gauche comme un embed. */
.ad-message {
    margin-top: .75rem;
    padding: 1.1rem 1.3rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
}
.ad-message-text {
    font-size: .95rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 420px;
    overflow-y: auto;
    padding-right: .5rem;
}
/* Discord met les liens en bleu : on garde ce repère visuel. */
.ad-message-text a { color: var(--info); text-decoration: underline; }

.ad-media { margin-top: .75rem; display: grid; gap: .5rem; }
.ad-media.is-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.ad-thumb {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--bg-elevated);
    max-width: 620px;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.ad-media.is-grid .ad-thumb { max-width: none; }
.ad-thumb:hover {
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.ad-thumb img {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    background: var(--bg-elevated);
    display: block;
}
.ad-media.is-grid .ad-thumb img { max-height: 260px; object-fit: cover; }

/* Aperçu encore à l'essai : masqué tant que le chargement n'a pas abouti.
   `display:none` plutôt qu'une opacité — l'emplacement ne doit pas être
   réservé dans la grille pour une image qui ne viendra peut-être jamais. */
.ad-thumb.is-probing { display: none; }

/* Palier de sanction : seuil · action · durée */
.rule-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(160px, 2fr) minmax(100px, 1fr);
    gap: .5rem;
    align-items: center;
}
@media (max-width: 640px) {
    .rule-row { grid-template-columns: 1fr; }
}

.ad-files { margin-top: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.ad-file {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .6rem;
    font-size: .8rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-muted);
    max-width: 100%;
}
.ad-file:hover { border-color: var(--brand); color: var(--brand); }
.ad-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .78rem; color: var(--text-subtle); margin-top: .7rem; }

/* Barre d'action : détachée du message par un filet, boutons plus larges et
   pleins — la décision est l'acte principal de la page, elle doit peser
   visuellement plus que les métadonnées qui la précèdent. */
.ad-actions {
    display: flex; gap: .5rem; flex-wrap: wrap;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border);
}
.ad-actions .btn {
    padding: .5rem 1rem;
    font-size: .84rem;
    font-weight: 600;
}
.ad-actions .btn svg { width: 15px; height: 15px; }

/* Décisions en couleur pleine : lisibles d'un coup d'œil, et difficiles à
   confondre entre elles. */
.ad-actions .btn-success {
    --btn-bg: var(--success); --btn-fg: var(--text-invert); --btn-bd: transparent;
}
.ad-actions .btn-danger {
    --btn-bg: var(--danger); --btn-fg: var(--text-invert); --btn-bd: transparent;
}
.ad-actions .btn-warning {
    --btn-bg: var(--warning); --btn-fg: var(--text-invert); --btn-bd: transparent;
}
.ad-actions .btn-success:hover:not(:disabled),
.ad-actions .btn-danger:hover:not(:disabled),
.ad-actions .btn-warning:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: var(--shadow-md);
}

/* L'action neutre reste en retrait pour ne pas concurrencer les décisions. */
.ad-actions .btn-outline, .ad-actions .btn-ghost { font-weight: 550; }

/* ---------- 19. Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: 1.25rem; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 34px; height: 34px;
    display: grid; place-items: center;
    padding: 0 .5rem;
    font-size: .82rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--bg-surface);
    transition: all var(--t-fast);
}
.pagination a:hover { border-color: var(--border-strong); color: var(--text); }
.pagination .is-current { background: var(--brand-soft); border-color: var(--border-accent); color: var(--brand-ink); font-weight: 600; }
.pagination .is-disabled { opacity: .4; pointer-events: none; }

/* ---------- 20. Alertes ---------- */
/* Alerte : un liseré de couleur porte le niveau, l'encadrement reste sobre. */
.alert {
    display: flex; gap: .85rem;
    padding: 1rem 1.2rem;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-subtle);
    background: var(--bg-elevated);
    font-size: .875rem;
    line-height: 1.6;
}
.alert-success { border-left-color: var(--success); }
.alert-warning { border-left-color: var(--warning); }
.alert-danger  { border-left-color: var(--danger); }
.alert-info    { border-left-color: var(--info); }
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.alert-title { font-weight: 620; margin-bottom: .15rem; }
.alert-success { background: var(--success-soft); border-color: rgba(6,122,85,.24); }
.alert-success svg { color: var(--success); }
.alert-warning { background: var(--warning-soft); border-color: rgba(181,71,8,.24); }
.alert-warning svg { color: var(--warning); }
.alert-danger { background: var(--danger-soft); border-color: rgba(217,45,32,.24); }
.alert-danger svg { color: var(--danger); }
.alert-info { background: var(--info-soft); border-color: rgba(11,111,208,.24); }
.alert-info svg { color: var(--info); }

/* ---------- 21. Secrets ---------- */
.secret {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1rem;
    background: var(--bg-subtle);
    border: 1px dashed var(--border-accent);
    border-radius: var(--r-md);
    font-family: var(--mono);
    font-size: .8rem;
    line-height: 1.6;
    word-break: break-all;
}

/* Champ de formulaire : l'étiquette respire au-dessus de son encadrement. */
fieldset { padding: 1.25rem 1.35rem; }
.secret-masked { letter-spacing: .12em; color: var(--text-subtle); }

/* ---------- 22. Page publique ---------- */
.hero {
    position: relative;
    padding: 6rem 1.5rem 5rem;
    text-align: center;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; inset: -40% 0 auto 50%;
    width: 900px; height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(88,101,242,.22) 0%, rgba(0,168,252,.08) 40%, transparent 68%);
    pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 {
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    letter-spacing: -.035em;
    margin-bottom: 1rem;
    color: var(--text);
}
.hero p { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--text-muted); max-width: 62ch; margin: 0 auto 2rem; }

.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .85rem;
    border-radius: var(--r-full);
    background: var(--brand-soft);
    border: 1px solid var(--border-accent);
    color: var(--brand-ink);
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.public-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.75rem;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
    background: rgba(30, 31, 34, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.section { padding: 4.5rem 1.75rem; max-width: 1240px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 2.75rem; }
.section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: .7rem; }
.section-head p { color: var(--text-muted); max-width: 62ch; margin: 0 auto; font-size: 1rem; }

.feature {
    padding: 1.75rem;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    transition: border-color var(--t), transform var(--t);
}
.feature:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-icon {
    width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center;
    background: var(--brand-grad-soft);
    border: 1px solid rgba(79,70,229,.22);
    color: var(--brand);
    margin-bottom: .9rem;
}
.feature-icon svg { width: 20px; height: 20px; }
.feature h3 { margin-bottom: .4rem; }
.feature p { color: var(--text-muted); font-size: .875rem; }

.public-foot {
    border-top: 1px solid var(--border);
    padding: 2rem 1.75rem;
    text-align: center;
    color: var(--text-subtle);
    font-size: .82rem;
}

/* Page d'authentification */
.auth-shell {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}
.auth-shell::before {
    content: '';
    position: absolute; inset: -30% 0 auto 50%;
    width: 800px; height: 800px; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(88,101,242,.20) 0%, transparent 65%);
}
.auth-card {
    position: relative;
    width: 100%; max-width: 420px;
    padding: 2.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

/* Cartes de serveurs */
.server-card {
    display: flex; align-items: center; gap: .9rem;
    padding: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: all var(--t);
    color: var(--text);
}
.server-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text); }
/* Le chevron de fin de carte : discret, jamais dimensionné par un composant. */
.server-card > svg:last-child { width: 18px; height: 18px; color: var(--text-subtle); }
.server-card.is-disabled { opacity: .55; pointer-events: none; }

/* ---------- 23. Divers ---------- */
.kbd {
    display: inline-block;
    padding: .1rem .4rem;
    font-family: var(--mono); font-size: .74rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
}

.divider-text {
    display: flex; align-items: center; gap: .9rem;
    color: var(--text-subtle); font-size: .78rem;
    margin: 1.25rem 0;
}
.divider-text::before, .divider-text::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

.copy-btn { background: none; border: 0; color: var(--text-subtle); cursor: pointer; padding: .2rem; display: inline-grid; place-items: center; border-radius: 5px; transition: all var(--t-fast); }
.copy-btn:hover { color: var(--brand); background: var(--bg-hover); }
.copy-btn svg { width: 15px; height: 15px; }

.skeleton {
    background: linear-gradient(90deg, var(--bg-elevated) 25%, rgba(255,255,255,.06) 50%, var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }

.spinner {
    width: 15px; height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.scroll-x { overflow-x: auto; }
.max-h-300 { max-height: 300px; overflow-y: auto; }
.max-h-420 { max-height: 420px; overflow-y: auto; }

/* ---------- 24. Responsive ---------- */
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 1200px) {
    .grid-main { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    :root { --sidebar-w: 250px; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    body.nav-open .sidebar { transform: none; }
    body.nav-open .sidebar-backdrop {
        display: block;
        position: fixed; inset: 0; z-index: 55;
        background: var(--bg-overlay);
        backdrop-filter: blur(3px);
    }
    .main { margin-left: 0; }
    .sidebar-toggle { display: inline-grid; }
    .content { padding: 1.15rem; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .topbar { padding: 0 1rem; }
    .hero { padding: 4rem 1.25rem 3rem; }
    .section { padding: 3rem 1.25rem; }
    .toasts { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; }
    .modal-foot { flex-direction: column-reverse; }
    .modal-foot .btn { width: 100%; }
    .ad-card { grid-template-columns: 1fr; }
    .ad-card img.avatar { display: none; }
    .field-row { grid-template-columns: 1fr; }
    table.data { font-size: .8rem; }
    table.data th, table.data td { padding: .6rem .7rem; }
}

@media (max-width: 520px) {
    .stat-value { font-size: 1.5rem; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .btn { padding: .52rem .85rem; }
    .content { padding: .9rem; }
}

/* ---------- 25. Impression & préférences ---------- */
@media print {
    .sidebar, .topbar, .toasts, .btn, .pagination { display: none !important; }
    .main { margin: 0; }
    body { background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}