/* ══════════════════════════════════════════════════════════════════════════════
   STUDIO — Design System
   Plateforme pour animateurs evenementiels / DJ
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   1. CUSTOM PROPERTIES (tokens de design)
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Couleurs de fond ─────────────────────────────────────────────────── */
    --st-bg:             #09090f;
    --st-bg-raised:      #111118;
    --st-bg-surface:     rgba(255,255,255,.04);
    --st-bg-surface-alt: rgba(255,255,255,.06);
    --st-bg-overlay:     rgba(255,255,255,.08);

    /* ── Bordures ─────────────────────────────────────────────────────────── */
    --st-border:         rgba(255,255,255,.07);
    --st-border-hover:   rgba(255,255,255,.14);
    --st-border-accent:  rgba(168,85,247,.35);

    /* ── Accent principal : violet / magenta ──────────────────────────────── */
    --st-accent:         #a855f7;
    --st-accent-hover:   #c084fc;
    --st-accent-soft:    rgba(168,85,247,.12);
    --st-accent-glow:    rgba(168,85,247,.25);

    /* ── Accent secondaire : or (CTAs, brand) ─────────────────────────────── */
    --st-gold:           #facc15;
    --st-gold-hover:     #fde047;
    --st-gold-soft:      rgba(250,204,21,.10);
    --st-gold-glow:      rgba(250,204,21,.20);

    /* ── Accent tertiaire : cyan (info, liens) ────────────────────────────── */
    --st-cyan:           #22d3ee;
    --st-cyan-soft:      rgba(34,211,238,.10);
    --st-cyan-glow:      rgba(34,211,238,.20);

    /* ── Semantique ───────────────────────────────────────────────────────── */
    --st-success:        #34d399;
    --st-success-soft:   rgba(52,211,153,.12);
    --st-error:          #f87171;
    --st-error-soft:     rgba(248,113,113,.12);
    --st-warning:        #fbbf24;
    --st-warning-soft:   rgba(251,191,36,.12);
    --st-info:           var(--st-cyan);
    --st-info-soft:      var(--st-cyan-soft);

    /* ── Texte ────────────────────────────────────────────────────────────── */
    --st-text:           #eee;
    --st-text-secondary: rgba(255,255,255,.55);
    --st-text-muted:     rgba(255,255,255,.35);
    --st-text-on-accent: #111;

    /* ── Espacement ───────────────────────────────────────────────────────── */
    --st-sp-xs: .25rem;
    --st-sp-sm: .5rem;
    --st-sp-md: 1rem;
    --st-sp-lg: 1.5rem;
    --st-sp-xl: 2.5rem;
    --st-sp-2xl: 4rem;

    /* ── Rayons de bord ───────────────────────────────────────────────────── */
    --st-radius-sm: 6px;
    --st-radius-md: 10px;
    --st-radius-lg: 16px;
    --st-radius-xl: 24px;
    --st-radius-full: 9999px;

    /* ── Ombres ────────────────────────────────────────────────────────────── */
    --st-shadow-sm:  0 1px 3px rgba(0,0,0,.3);
    --st-shadow-md:  0 4px 16px rgba(0,0,0,.4);
    --st-shadow-lg:  0 8px 32px rgba(0,0,0,.5);
    --st-shadow-glow:0 0 20px var(--st-accent-glow);

    /* ── Typographie ──────────────────────────────────────────────────────── */
    --st-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --st-font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --st-text-xs:  .75rem;
    --st-text-sm:  .85rem;
    --st-text-base: 1rem;
    --st-text-lg:  1.15rem;
    --st-text-xl:  1.35rem;
    --st-text-2xl: 1.75rem;
    --st-text-3xl: 2.25rem;

    /* ── Transitions ──────────────────────────────────────────────────────── */
    --st-ease: cubic-bezier(.4,0,.2,1);
    --st-duration: .25s;

    /* ── Layout ────────────────────────────────────────────────────────────── */
    --st-max-w: 1100px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   2. RESET & BASE
   ══════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--st-font);
    background: var(--st-bg);
    color: var(--st-text);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Arriere-plan subtil — grille de points */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    background-image: radial-gradient(circle, rgba(168,85,247,.06) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

a { color: var(--st-cyan); text-decoration: none; transition: color var(--st-duration) var(--st-ease); }
a:hover { color: var(--st-gold); }

::selection { background: var(--st-accent-soft); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════════
   3. CLASSES UTILITAIRES REUTILISABLES
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Conteneur ────────────────────────────────────────────────────────────── */
.st-container   { max-width: var(--st-max-w); margin-inline: auto; padding-inline: var(--st-sp-lg); }

/* ── Flexbox ──────────────────────────────────────────────────────────────── */
.st-flex          { display: flex; }
.st-flex--col     { flex-direction: column; }
.st-flex--center  { align-items: center; justify-content: center; }
.st-flex--between { align-items: center; justify-content: space-between; }
.st-flex--wrap    { flex-wrap: wrap; }

/* ── Grilles ──────────────────────────────────────────────────────────────── */
.st-grid     { display: grid; gap: var(--st-sp-lg); }
.st-grid--2  { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.st-grid--3  { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.st-grid--4  { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ── Espacement (gap) ─────────────────────────────────────────────────────── */
.st-gap--xs  { gap: var(--st-sp-xs); }
.st-gap--sm  { gap: var(--st-sp-sm); }
.st-gap--md  { gap: var(--st-sp-md); }
.st-gap--lg  { gap: var(--st-sp-lg); }
.st-gap--xl  { gap: var(--st-sp-xl); }

/* ── Padding ──────────────────────────────────────────────────────────────── */
.st-pad--sm  { padding: var(--st-sp-sm); }
.st-pad--md  { padding: var(--st-sp-md); }
.st-pad--lg  { padding: var(--st-sp-lg); }
.st-pad--xl  { padding: var(--st-sp-xl); }

/* ── Texte ────────────────────────────────────────────────────────────────── */
.st-text--center { text-align: center; }
.st-text--left   { text-align: left; }
.st-text--right  { text-align: right; }

.st-text--xs    { font-size: var(--st-text-xs); }
.st-text--sm    { font-size: var(--st-text-sm); }
.st-text--base  { font-size: var(--st-text-base); }
.st-text--lg    { font-size: var(--st-text-lg); }
.st-text--xl    { font-size: var(--st-text-xl); }
.st-text--2xl   { font-size: var(--st-text-2xl); }
.st-text--3xl   { font-size: var(--st-text-3xl); }

.st-text--bold     { font-weight: 700; }
.st-text--semibold { font-weight: 600; }
.st-text--light    { font-weight: 300; }

.st-text--primary   { color: var(--st-text); }
.st-text--secondary { color: var(--st-text-secondary); }
.st-text--muted     { color: var(--st-text-muted); }
.st-text--accent    { color: var(--st-accent); }
.st-text--gold      { color: var(--st-gold); }
.st-text--cyan      { color: var(--st-cyan); }
.st-text--success   { color: var(--st-success); }
.st-text--error     { color: var(--st-error); }

/* ── Glass (effet vitrifie reutilisable) ──────────────────────────────────── */
.st-glass {
    background: var(--st-bg-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.st-glass--raised {
    background: var(--st-bg-surface-alt);
    box-shadow: var(--st-shadow-md);
}
.st-glass:hover {
    border-color: var(--st-border-hover);
}

/* ── Glow (lueur neon reutilisable) ───────────────────────────────────────── */
.st-glow         { box-shadow: var(--st-shadow-glow); }
.st-glow--gold   { box-shadow: 0 0 20px var(--st-gold-glow); }
.st-glow--cyan   { box-shadow: 0 0 20px var(--st-cyan-glow); }
.st-glow--text   { text-shadow: 0 0 12px var(--st-accent-glow); }

/* ── Bordure accent ───────────────────────────────────────────────────────── */
.st-border--accent { border-color: var(--st-border-accent) !important; }
.st-border--gold   { border-left: 3px solid var(--st-gold) !important; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.st-badge {
    display: inline-flex; align-items: center;
    padding: .15rem .6rem;
    font-size: var(--st-text-xs); font-weight: 600;
    border-radius: var(--st-radius-full);
    background: var(--st-accent-soft);
    color: var(--st-accent-hover);
}
.st-badge--gold    { background: var(--st-gold-soft);    color: var(--st-gold); }
.st-badge--cyan    { background: var(--st-cyan-soft);    color: var(--st-cyan); }
.st-badge--success { background: var(--st-success-soft); color: var(--st-success); }
.st-badge--error   { background: var(--st-error-soft);   color: var(--st-error); }

/* ── Separateur ───────────────────────────────────────────────────────────── */
.st-divider {
    border: none;
    border-top: 1px solid var(--st-border);
    margin: var(--st-sp-lg) 0;
}

/* ── Icone decorative (emoji dans un cercle) ──────────────────────────────── */
.st-icon-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.8rem; height: 2.8rem;
    border-radius: var(--st-radius-full);
    background: var(--st-accent-soft);
    font-size: 1.25rem;
    margin-bottom: var(--st-sp-sm);
    flex-shrink: 0;
}
.st-icon-circle--gold { background: var(--st-gold-soft); }
.st-icon-circle--cyan { background: var(--st-cyan-soft); }

/* ── Visibilite ───────────────────────────────────────────────────────────── */
.st-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

/* ── Animations reutilisables ─────────────────────────────────────────────── */
@keyframes st-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes st-pulse-glow {
    0%, 100% { box-shadow: 0 0 12px var(--st-accent-glow); }
    50%      { box-shadow: 0 0 28px var(--st-accent-glow), 0 0 48px var(--st-accent-glow); }
}
.st-animate--fade-in { animation: st-fade-in .4s var(--st-ease) both; }
.st-animate--pulse   { animation: st-pulse-glow 2s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════════════════════
   4. COMPOSANTS — BOUTONS
   ══════════════════════════════════════════════════════════════════════════════ */
.st-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--st-sp-sm);
    padding: .65rem 1.4rem; border: none;
    border-radius: var(--st-radius-md);
    font-size: var(--st-text-sm); font-weight: 600; font-family: inherit;
    cursor: pointer; text-decoration: none;
    transition: all var(--st-duration) var(--st-ease);
    color: var(--st-text);
}
.st-btn:hover  { text-decoration: none; }
.st-btn:active { transform: scale(.97); }

.st-btn--primary {
    background: linear-gradient(135deg, var(--st-accent), #9333ea);
    color: #fff;
    box-shadow: 0 2px 12px var(--st-accent-glow);
}
.st-btn--primary:hover {
    background: linear-gradient(135deg, var(--st-accent-hover), var(--st-accent));
    box-shadow: 0 4px 20px var(--st-accent-glow);
    color: #fff;
}

.st-btn--gold {
    background: linear-gradient(135deg, var(--st-gold), #eab308);
    color: var(--st-text-on-accent);
    box-shadow: 0 2px 12px var(--st-gold-glow);
}
.st-btn--gold:hover {
    background: linear-gradient(135deg, var(--st-gold-hover), var(--st-gold));
    box-shadow: 0 4px 20px var(--st-gold-glow);
    color: var(--st-text-on-accent);
}

.st-btn--outline {
    background: transparent;
    border: 1px solid var(--st-border-hover);
    color: var(--st-text-secondary);
}
.st-btn--outline:hover {
    border-color: var(--st-accent);
    color: var(--st-accent);
    background: var(--st-accent-soft);
}

.st-btn--ghost {
    background: transparent; color: var(--st-text-secondary);
}
.st-btn--ghost:hover { color: var(--st-accent); background: var(--st-accent-soft); }

.st-btn--sm   { padding: .35rem .75rem; font-size: var(--st-text-xs); }
.st-btn--lg   { padding: .85rem 2rem;   font-size: var(--st-text-base); }
.st-btn--block { width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════════
   5. COMPOSANTS — FORMULAIRES
   ══════════════════════════════════════════════════════════════════════════════ */
.st-form { display: flex; flex-direction: column; gap: var(--st-sp-md); }

.st-form__group {
    display: flex; flex-direction: column; gap: var(--st-sp-xs);
}

.st-form__label {
    font-size: var(--st-text-sm); font-weight: 600;
    color: var(--st-text-secondary);
    letter-spacing: .02em;
}

.st-form__input,
.st-form__select,
.st-form__textarea {
    padding: .7rem 1rem;
    border-radius: var(--st-radius-md);
    border: 1px solid var(--st-border);
    background: var(--st-bg-surface);
    color: var(--st-text);
    font-size: var(--st-text-base);
    font-family: inherit;
    outline: none;
    transition: border-color var(--st-duration) var(--st-ease),
                box-shadow var(--st-duration) var(--st-ease);
}
.st-form__input:focus,
.st-form__select:focus,
.st-form__textarea:focus {
    border-color: var(--st-accent);
    box-shadow: 0 0 0 3px var(--st-accent-soft);
}
.st-form__input::placeholder { color: var(--st-text-muted); }
.st-form__textarea { resize: vertical; min-height: 100px; }

/* ══════════════════════════════════════════════════════════════════════════════
   6. COMPOSANTS — MESSAGES FLASH
   ══════════════════════════════════════════════════════════════════════════════ */
.st-msg {
    padding: .75rem 1rem;
    border-radius: var(--st-radius-md);
    font-size: var(--st-text-sm);
    margin-bottom: var(--st-sp-md);
    border: 1px solid transparent;
    animation: st-fade-in .3s var(--st-ease) both;
}
.st-msg--error   { background: var(--st-error-soft);   border-color: rgba(248,113,113,.3); color: var(--st-error); }
.st-msg--success { background: var(--st-success-soft); border-color: rgba(52,211,153,.3);  color: var(--st-success); }
.st-msg--warning { background: var(--st-warning-soft); border-color: rgba(251,191,36,.3);  color: var(--st-warning); }
.st-msg--info    { background: var(--st-info-soft);    border-color: rgba(34,211,238,.3);   color: var(--st-info); }

/* ══════════════════════════════════════════════════════════════════════════════
   7. COMPOSANTS — CARDS
   ══════════════════════════════════════════════════════════════════════════════ */
.st-card {
    background: var(--st-bg-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-lg);
    padding: var(--st-sp-lg);
    transition: border-color var(--st-duration) var(--st-ease),
                transform var(--st-duration) var(--st-ease),
                box-shadow var(--st-duration) var(--st-ease);
}
.st-card:hover {
    border-color: var(--st-border-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(168,85,247,.08);
}
.st-card h3 {
    font-size: var(--st-text-lg); font-weight: 700;
    color: var(--st-text); margin-bottom: var(--st-sp-xs);
}
.st-card p {
    font-size: var(--st-text-sm);
    color: var(--st-text-secondary);
    line-height: 1.5;
}
.st-card--admin {
    border-left: 3px solid var(--st-gold);
}
.st-card--admin:hover {
    box-shadow: 0 8px 24px var(--st-gold-glow);
}

/* Grille de cartes (alias pour retrocompatibilite) */
.st-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--st-sp-lg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   8. LAYOUT — BANNIERE
   ══════════════════════════════════════════════════════════════════════════════ */
.st-banner {
    background: var(--st-bg-raised);
    border-bottom: 1px solid var(--st-border);
    padding: .8rem 0;
    position: relative; z-index: 100;
}
.st-banner__inner {
    max-width: var(--st-max-w); margin: 0 auto;
    padding: 0 var(--st-sp-lg);
    display: flex; align-items: center; justify-content: space-between;
}
.st-banner__brand {
    font-size: 1.35rem; font-weight: 800;
    color: var(--st-gold);
    text-decoration: none;
    letter-spacing: -.02em;
    text-shadow: 0 0 18px var(--st-gold-glow);
    transition: text-shadow var(--st-duration) var(--st-ease);
}
.st-banner__brand:hover {
    text-decoration: none;
    text-shadow: 0 0 28px var(--st-gold-glow), 0 0 48px var(--st-gold-glow);
    color: var(--st-gold);
}
.st-banner__tagline {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: var(--st-text-sm); color: var(--st-text-muted);
    white-space: nowrap; pointer-events: none;
}

/* Hero version (page d'accueil) */
.st-banner--hero {
    padding: var(--st-sp-xl) 0;
    text-align: center;
    background: linear-gradient(180deg, var(--st-bg-raised) 0%, var(--st-bg) 100%);
    border-bottom: none;
}
.st-banner--hero .st-banner__inner {
    flex-direction: column; gap: var(--st-sp-sm);
}
.st-banner--hero .st-banner__brand {
    font-size: var(--st-text-3xl);
    text-shadow: 0 0 32px var(--st-gold-glow), 0 0 64px rgba(168,85,247,.12);
}
.st-banner--hero .st-banner__tagline {
    position: static; transform: none;
    font-size: var(--st-text-base);
    color: var(--st-text-secondary);
    max-width: 400px;
}

/* ── Bouton hamburger ──────────────────────────────────────────────────────── */
.st-burger {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 4px;
    z-index: 200;
}
.st-burger span {
    display: block; width: 24px; height: 2px;
    border-radius: var(--st-radius-full);
    background: var(--st-gold);
    transition: transform .3s var(--st-ease), opacity .2s;
}
.st-burger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.st-burger--open span:nth-child(2) { opacity: 0; }
.st-burger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════════════════════════
   9. LAYOUT — NAVIGATION
   ══════════════════════════════════════════════════════════════════════════════ */
.st-nav {
    max-height: 0; overflow: hidden;
    background: var(--st-bg-raised);
    border-bottom: 1px solid var(--st-border);
    transition: max-height .35s var(--st-ease);
}
.st-nav--open { max-height: 500px; }

.st-nav__list {
    list-style: none;
    max-width: var(--st-max-w); margin: 0 auto;
    display: flex; flex-direction: column;
    padding: var(--st-sp-sm) var(--st-sp-lg);
}
.st-nav__item {
    border-bottom: 1px solid var(--st-border);
}
.st-nav__item:last-child { border-bottom: none; }

.st-nav__link {
    display: block;
    padding: .7rem 0;
    font-size: var(--st-text-sm); font-weight: 500;
    color: var(--st-text-secondary);
    text-decoration: none;
    transition: color var(--st-duration) var(--st-ease);
}
.st-nav__link:hover,
.st-nav__link--active {
    color: var(--st-accent-hover);
    text-decoration: none;
}
.st-nav__link--active {
    color: var(--st-accent);
    font-weight: 600;
}

.st-nav__link--logout {
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: var(--st-text-sm); font-weight: 500;
    color: var(--st-text-muted); padding: .7rem 0;
    transition: color var(--st-duration) var(--st-ease);
}
.st-nav__link--logout:hover { color: var(--st-error); }

.st-nav__user {
    font-size: var(--st-text-xs); color: var(--st-text-muted);
    padding: .7rem 0; display: block;
}
.st-nav__logout-form { display: block; }
.st-nav__item--auth {
    border-top: 1px solid var(--st-border);
}

/* Desktop : menu horizontal */
@media (min-width: 768px) {
    .st-burger { display: none; }
    .st-nav {
        max-height: none; overflow: visible;
    }
    .st-nav__list {
        flex-direction: row; align-items: center; gap: .1rem;
        padding: 0 var(--st-sp-lg);
    }
    .st-nav__item { border-bottom: none; }
    .st-nav__link {
        padding: .55rem .85rem;
        border-radius: var(--st-radius-sm);
    }
    .st-nav__link:hover {
        background: var(--st-accent-soft);
    }
    .st-nav__link--active {
        background: var(--st-accent-soft);
    }
    .st-nav__item--auth { border-top: none; margin-left: auto; }
    .st-nav__item--auth + .st-nav__item--auth { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   10. LAYOUT — FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */
.st-footer {
    margin-top: auto;
    border-top: 1px solid var(--st-border);
    background: var(--st-bg-raised);
    padding: var(--st-sp-xl) var(--st-sp-lg) var(--st-sp-lg);
}
.st-footer__inner {
    max-width: var(--st-max-w); margin: 0 auto;
    text-align: center;
}
.st-footer__links {
    display: flex; justify-content: center; gap: var(--st-sp-lg);
    flex-wrap: wrap; margin-bottom: var(--st-sp-md);
}
.st-footer__link {
    font-size: var(--st-text-sm); color: var(--st-text-muted);
    text-decoration: none;
    transition: color var(--st-duration) var(--st-ease);
}
.st-footer__link:hover { color: var(--st-accent-hover); }
.st-footer__copy {
    font-size: var(--st-text-xs); color: var(--st-text-muted);
    opacity: .6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   11. LAYOUT — CONTENU PRINCIPAL
   ══════════════════════════════════════════════════════════════════════════════ */
.st-main {
    max-width: 960px;
    margin: var(--st-sp-xl) auto;
    padding: 0 var(--st-sp-lg);
    animation: st-fade-in .35s var(--st-ease) both;
}
.st-main h2 {
    font-size: var(--st-text-xl); font-weight: 700;
    color: var(--st-text);
    margin-bottom: var(--st-sp-lg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   12. PAGES — HERO ACCUEIL
   ══════════════════════════════════════════════════════════════════════════════ */
.st-hero {
    text-align: center;
    padding: var(--st-sp-lg) 0 var(--st-sp-xl);
}
.st-hero h2 {
    font-size: var(--st-text-2xl); font-weight: 800;
    background: linear-gradient(135deg, var(--st-gold) 0%, var(--st-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--st-sp-sm);
}
.st-hero p {
    font-size: var(--st-text-lg);
    color: var(--st-text-secondary);
    max-width: 480px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   13. PAGES — AUTH (login / register)
   ══════════════════════════════════════════════════════════════════════════════ */
.st-login-card {
    width: 100%; max-width: 420px;
    margin: 0 auto;
    padding: var(--st-sp-xl) var(--st-sp-xl);
    background: var(--st-bg-surface-alt);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-xl);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--st-shadow-lg), 0 0 40px rgba(168,85,247,.04);
}
.st-login-card__title {
    text-align: center;
    font-size: var(--st-text-2xl); font-weight: 800;
    color: var(--st-text);
    margin-bottom: var(--st-sp-xs);
}
.st-login-card__subtitle {
    text-align: center;
    font-size: var(--st-text-sm);
    color: var(--st-text-muted);
    margin-bottom: var(--st-sp-xl);
}
.st-login-card__footer {
    text-align: center;
    font-size: var(--st-text-sm);
    color: var(--st-text-muted);
    margin-top: var(--st-sp-lg);
}
.st-login-card__footer a {
    color: var(--st-accent);
    font-weight: 600;
    text-decoration: none;
}
.st-login-card__footer a:hover {
    color: var(--st-accent-hover);
    text-decoration: underline;
}

/* Séparateur "ou" entre formulaire classique et Google */
.st-divider {
    display: flex; align-items: center; gap: var(--st-sp-sm);
    margin: var(--st-sp-lg) 0;
    color: var(--st-text-muted);
    font-size: var(--st-text-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.st-divider::before,
.st-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--st-border);
}
/* Centre le bouton Google et supprime la marge interne par défaut */
.g_id_signin > div { margin: 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════════
   14. ADMINISTRATION — GESTION DES MEMBRES
   ══════════════════════════════════════════════════════════════════════════════ */

/* Carte admin cliquable (lien) */
.st-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.st-card--link:hover { transform: translateY(-2px); }

/* En-tête de section admin */
.st-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--st-sp-md);
    margin-bottom: var(--st-sp-lg);
    flex-wrap: wrap;
}
.st-page-header__title {
    font-size: var(--st-text-xl); font-weight: 700;
    display: flex; align-items: center; gap: var(--st-sp-sm);
    margin: 0;
}
.st-page-header__sub { color: var(--st-text-muted); font-size: var(--st-text-sm); margin-top: .25rem; }

/* Badge muted */
.st-badge--muted { background: transparent; color: var(--st-text-muted); border: 1px solid var(--st-border); }

/* Barre de recherche */
.st-search-bar {
    display: flex; align-items: center; gap: var(--st-sp-sm);
    margin-bottom: var(--st-sp-lg);
    flex-wrap: wrap;
}
.st-search-bar .st-form__input { flex: 1; min-width: 200px; }

/* Enveloppe du tableau (scroll horizontal sur mobile) */
.st-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-lg);
    background: var(--st-bg-raised);
    margin-bottom: var(--st-sp-lg);
}

/* Tableau principal */
.st-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--st-text-sm);
}
.st-table thead tr {
    background: var(--st-bg-overlay);
    border-bottom: 1px solid var(--st-border);
}
.st-table th {
    padding: .65rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: var(--st-text-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--st-text-muted);
    white-space: nowrap;
}
.st-table td {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--st-border);
    vertical-align: middle;
}
.st-table tbody tr:last-child td { border-bottom: none; }
.st-table tbody tr:hover { background: var(--st-bg-overlay); }
.st-table__row--muted { opacity: .55; }
.st-table__id    { color: var(--st-text-muted); width: 3rem; }
.st-table__email { color: var(--st-text-secondary); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-table__date  { color: var(--st-text-muted); white-space: nowrap; }
.st-table__empty { text-align: center; padding: var(--st-sp-xl) !important; color: var(--st-text-muted); }
.st-table__self-note { color: var(--st-text-muted); font-size: var(--st-text-xs); }

/* Actions inline (les petits formulaires dans chaque ligne) */
.st-table__actions { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.st-inline-form { margin: 0; padding: 0; }

/* Bouton danger (supprimer) */
.st-btn--danger { color: var(--st-error) !important; }
.st-btn--danger:hover { background: var(--st-error-soft) !important; color: var(--st-error) !important; }

/* Pagination */
.st-pagination {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    flex-wrap: wrap;
    margin-top: var(--st-sp-lg);
}
.st-pagination__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem;
    padding: 0 .5rem;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    font-size: var(--st-text-sm); font-weight: 500;
    color: var(--st-text-secondary);
    text-decoration: none;
    background: var(--st-bg-raised);
    transition: all var(--st-duration) var(--st-ease);
}
.st-pagination__btn:hover {
    border-color: var(--st-accent);
    color: var(--st-accent);
    background: var(--st-accent-soft);
}
.st-pagination__btn--active {
    background: var(--st-accent);
    border-color: var(--st-accent);
    color: #fff;
    font-weight: 700;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   15. PAGES — ERREURS 403 / 404
   ══════════════════════════════════════════════════════════════════════════════ */
.st-error { text-align: center; padding: var(--st-sp-2xl) var(--st-sp-md); }
.st-error h2 {
    font-size: var(--st-text-2xl);
    margin-bottom: var(--st-sp-sm);
}
.st-error p {
    color: var(--st-text-secondary);
    margin-bottom: var(--st-sp-lg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   15. LAYOUT — FULLSCREEN (videoprojecteur)
   ══════════════════════════════════════════════════════════════════════════════ */
.st-fullscreen {
    background: #000; color: #fff; overflow: hidden;
}
.fs-root { width: 100vw; height: 100vh; }

/* ══════════════════════════════════════════════════════════════════════════════
   16. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    :root {
        --st-sp-xl: 1.5rem;
        --st-sp-lg: 1rem;
    }
    .st-login-card { padding: var(--st-sp-lg); }
    .st-hero h2    { font-size: var(--st-text-xl); }
    .st-cards      { grid-template-columns: 1fr; }
}