/* =========================================================
   AperoRoom — Override formulaires + UI partagee
   ───────────────────────────────────────────────────────
   Repeint en Rose Garden tous les composants .jb-* hérités
   de l'ancien thème Twilight (bleu) :
   - Formulaires auth (login / register)
   - Inputs / labels / checkboxes
   - Boutons primary/ghost/secondary
   - Auth card + topbar
   - Divider "ou"
   - Liens
   ========================================================= */

/* ─── Auth shell (page entiere pour login/register) ─── */
.jb-auth-shell {
    background: transparent !important;
}

.jb-topbar {
    background: rgba(22, 9, 16, 0.62) !important;
    border-bottom: 1px solid var(--pt-line, rgba(232,62,107,0.18)) !important;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}

/* ─── Carte auth (login/register) ─── */
.jb-auth-card {
    background: rgba(22, 9, 16, 0.72) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    border-radius: var(--r-xl, 24px) !important;
    box-shadow:
        0 20px 60px rgba(232, 62, 107, 0.12),
        0 0 80px rgba(232, 62, 107, 0.05) !important;
    color: var(--pt-text, #FFD6DC) !important;
}

.jb-auth-eyebrow {
    background: rgba(232, 62, 107, 0.10) !important;
    border: 1px solid rgba(232, 62, 107, 0.30) !important;
    color: var(--pt-primary, #E83E6B) !important;
}

.jb-auth-title {
    font-family: var(--font-display, 'Instrument Serif', serif) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: var(--pt-text, #FFD6DC) !important;
    background: linear-gradient(135deg, #FFD6DC, #E83E6B 60%, #FFB000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jb-auth-sub {
    color: var(--pt-text-muted, rgba(255,214,220,0.6)) !important;
    font-family: var(--font-display, 'Instrument Serif', serif);
    font-style: italic;
}

.jb-auth-footer {
    color: var(--pt-text-muted, rgba(255,214,220,0.6)) !important;
    border-top: 1px dashed var(--pt-line, rgba(232,62,107,0.18)) !important;
}
.jb-auth-footer-gift {
    color: #FFB000 !important;
    background: rgba(255, 176, 0, 0.10) !important;
    border: 1px solid rgba(255, 176, 0, 0.30) !important;
}

/* ─── Fields ─── */
.jb-field { margin-bottom: 16px; }
.jb-label {
    color: var(--pt-text, #FFD6DC) !important;
    font-weight: 600 !important;
}

.jb-input-wrap {
    background: rgba(255, 214, 220, 0.04) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    border-radius: 12px !important;
    transition: all 0.15s ease;
}
.jb-input-wrap:focus-within {
    border-color: var(--pt-primary, #E83E6B) !important;
    background: rgba(232, 62, 107, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(232, 62, 107, 0.15) !important;
}

.jb-input-icon {
    color: var(--pt-text-muted, rgba(255,214,220,0.5)) !important;
}
.jb-input-wrap:focus-within .jb-input-icon {
    color: var(--pt-primary, #E83E6B) !important;
}

.jb-input {
    background: transparent !important;
    color: var(--pt-text, #FFD6DC) !important;
    caret-color: var(--pt-primary, #E83E6B);
}
.jb-input::placeholder {
    color: var(--pt-text-muted, rgba(255,214,220,0.4)) !important;
}
.jb-input:focus { outline: none !important; }

.jb-input-toggle {
    color: var(--pt-text-muted, rgba(255,214,220,0.5)) !important;
    background: transparent !important;
}
.jb-input-toggle:hover {
    color: var(--pt-primary, #E83E6B) !important;
}

/* ─── Checkboxes & radio ─── */
.jb-check {
    color: var(--pt-text-muted, rgba(255,214,220,0.7)) !important;
}
.jb-check-box {
    border: 1.5px solid var(--pt-line, rgba(232,62,107,0.30)) !important;
    background: rgba(255, 214, 220, 0.04) !important;
}
.jb-check input:checked + .jb-check-box {
    background: linear-gradient(135deg, #E83E6B, #C2185B) !important;
    border-color: #E83E6B !important;
    color: #fff !important;
}

/* ─── Row (entre fields, ou checkbox + lien) ─── */
.jb-row {
    color: var(--pt-text-muted) !important;
}

/* ─── Liens ─── */
.jb-link {
    color: var(--pt-primary, #E83E6B) !important;
    font-weight: 600;
}
.jb-link:hover {
    color: #FFB000 !important;
}

/* ─── Divider "ou" ─── */
.jb-divider {
    color: var(--pt-text-muted, rgba(255,214,220,0.4)) !important;
}
.jb-divider::before,
.jb-divider::after {
    background: var(--pt-line, rgba(232,62,107,0.18)) !important;
}

/* ─── Boutons globaux : repeints en rose ─── */
.jb-btn {
    font-family: inherit;
    transition: all 0.15s ease;
}

.jb-btn--primary {
    background: linear-gradient(135deg, #E83E6B, #C2185B) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 6px 22px rgba(232, 62, 107, 0.35) !important;
}
.jb-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(232, 62, 107, 0.50) !important;
}

.jb-btn--secondary {
    background: rgba(255, 176, 0, 0.12) !important;
    color: #FFB000 !important;
    border: 1px solid rgba(255, 176, 0, 0.35) !important;
}
.jb-btn--secondary:hover {
    background: rgba(255, 176, 0, 0.20) !important;
    border-color: rgba(255, 176, 0, 0.55) !important;
}

.jb-btn--ghost {
    background: transparent !important;
    color: var(--pt-text, #FFD6DC) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
}
.jb-btn--ghost:hover {
    background: rgba(232, 62, 107, 0.08) !important;
    border-color: rgba(232, 62, 107, 0.40) !important;
}
.jb-btn--ghost-danger {
    color: #FF6B6B !important;
}
.jb-btn--ghost-danger:hover {
    background: rgba(255, 107, 107, 0.08) !important;
    border-color: rgba(255, 107, 107, 0.40) !important;
}

/* ─── jb-flash (messages flash) ─── */
.jb-flash {
    background: rgba(232, 62, 107, 0.10);
    border: 1px solid rgba(232, 62, 107, 0.35);
    color: var(--pt-text);
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 14px;
}
.jb-flash--success {
    background: rgba(80, 200, 120, 0.10);
    border-color: rgba(80, 200, 120, 0.45);
    color: #50C878;
}
.jb-flash--error {
    background: rgba(255, 107, 107, 0.10);
    border-color: rgba(255, 107, 107, 0.45);
    color: #FF6B6B;
}
.jb-flash--warning {
    background: rgba(255, 176, 0, 0.10);
    border-color: rgba(255, 176, 0, 0.45);
    color: #FFB000;
}
.jb-flash--info {
    background: rgba(93, 234, 255, 0.10);
    border-color: rgba(93, 234, 255, 0.40);
    color: #5DEAFF;
}

/* ─── credit chip (header credit pill) repeint rose/or ─── */
.jb-credit-chip {
    background: rgba(255, 176, 0, 0.10) !important;
    border: 1px solid rgba(255, 176, 0, 0.35) !important;
    color: #FFB000 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700;
}
.jb-credit-chip svg { color: #FFB000 !important; }
.jb-credit-plus {
    background: rgba(232, 62, 107, 0.20) !important;
    color: #fff !important;
    border-radius: 50%;
}
.jb-credit-plus:hover {
    background: rgba(232, 62, 107, 0.40) !important;
}

/* ─── Lang switcher pill ─── */
.jb-lang-pill {
    background: rgba(255, 214, 220, 0.06) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-lang-pill:hover {
    background: rgba(232, 62, 107, 0.10) !important;
    border-color: rgba(232, 62, 107, 0.40) !important;
}

/* ─── jb-header (legacy header sur pages legal/contact) ─── */
.jb-header {
    background: rgba(22, 9, 16, 0.62) !important;
    border-bottom: 1px solid var(--pt-line, rgba(232,62,107,0.18)) !important;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    color: var(--pt-text, #FFD6DC);
}
.jb-header-title {
    color: var(--pt-text, #FFD6DC) !important;
    font-family: var(--font-display, 'Instrument Serif', serif);
    font-style: italic;
    font-size: 22px;
}
.jb-nav-link {
    color: var(--pt-text-muted, rgba(255,214,220,0.7)) !important;
}
.jb-nav-link:hover {
    color: var(--pt-primary, #E83E6B) !important;
}

/* ─── Brand legacy (icon note rose) ─── */
.jb-brand {
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-brand__icon {
    color: var(--pt-primary, #E83E6B) !important;
}
.jb-brand__accent {
    color: var(--pt-primary, #E83E6B) !important;
}

/* ─── Legal pages container ─── */
.jb-legal {
    color: var(--pt-text, #FFD6DC);
}
.jb-legal h1, .jb-legal h2, .jb-legal h3 {
    color: var(--pt-text, #FFD6DC);
    font-family: var(--font-display, 'Instrument Serif', serif);
    font-style: italic;
    font-weight: 400;
}
.jb-legal p, .jb-legal li {
    color: var(--pt-text-muted, rgba(255,214,220,0.75));
}
.jb-legal a {
    color: var(--pt-primary, #E83E6B);
}
.jb-legal__eyebrow {
    color: var(--pt-primary, #E83E6B) !important;
}
.jb-legal__updated {
    color: var(--pt-text-muted, rgba(255,214,220,0.55)) !important;
}
.jb-faq-cat {
    background: rgba(255, 214, 220, 0.04) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-faq-cat:hover {
    background: rgba(232, 62, 107, 0.10) !important;
    border-color: rgba(232, 62, 107, 0.40) !important;
}

/* ─── Form errors (Symfony default rendering) ─── */
.jb-field ul, .form-errors ul {
    list-style: none;
    padding: 6px 0 0;
    margin: 0;
    font-size: 12px;
    color: #FF6B6B;
}

/* ─── Tags / pills generaux ─── */
.jb-tag {
    background: rgba(232, 62, 107, 0.12);
    border: 1px solid rgba(232, 62, 107, 0.30);
    color: var(--pt-primary, #E83E6B);
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.jb-tag--accent { background: rgba(232,62,107,0.18) !important; }
.jb-tag--success {
    background: rgba(80, 200, 120, 0.15) !important;
    border-color: rgba(80, 200, 120, 0.45) !important;
    color: #50C878 !important;
}
.jb-tag--blue {
    background: rgba(93, 234, 255, 0.12) !important;
    border-color: rgba(93, 234, 255, 0.35) !important;
    color: #5DEAFF !important;
}

/* =========================================================
   FORMULAIRES ROOM NEW + ACCOUNT — override couleurs bleues
   ───────────────────────────────────────────────────────
   Ces classes sont definies dans app.css avec la palette
   Twilight bleue. On les repeint en rose nuit (AperoRoom).
   ========================================================= */

/* ─── Form cards (sections numerotees du formulaire) ─── */
.jb-form-card {
    background: rgba(45, 15, 31, 0.55) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-form-card h3 {
    color: var(--pt-text, #FFD6DC) !important;
    font-family: var(--font-display, 'Instrument Serif', serif);
    font-style: italic;
    font-size: 22px !important;
    font-weight: 400 !important;
}
.jb-form-card h3 .num {
    background: linear-gradient(135deg, #E83E6B, #C2185B) !important;
    color: #fff !important;
    border: 1px solid rgba(232, 62, 107, 0.40) !important;
}
.jb-form-card .jb-input,
.jb-form-card select.jb-input,
.jb-form-card input.jb-input,
.jb-form-card textarea.jb-input {
    background: rgba(255, 214, 220, 0.04) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    border-radius: 12px !important;
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-form-card .jb-input:focus,
.jb-form-card select.jb-input:focus,
.jb-form-card input.jb-input:focus,
.jb-form-card textarea.jb-input:focus {
    outline: none !important;
    border-color: var(--pt-primary, #E83E6B) !important;
    background: rgba(232, 62, 107, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(232, 62, 107, 0.15) !important;
}

/* Texteares hints */
.jb-field-hint, .jb-form-card .field-hint {
    color: var(--pt-text-muted, rgba(255,214,220,0.55)) !important;
    font-size: 12px;
}

/* ─── Radio cards (mode 1 ecran / multi-ecrans) ─── */
.jb-radio-card {
    background: rgba(22, 9, 16, 0.60) !important;
    border: 1.5px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-radio-card:hover {
    border-color: rgba(232, 62, 107, 0.45) !important;
    background: rgba(232, 62, 107, 0.08) !important;
}
.jb-radio-card.is-active {
    border-color: var(--pt-primary, #E83E6B) !important;
    background: radial-gradient(circle at 100% 0%, rgba(232,62,107,0.22), transparent 60%), rgba(22,9,16,0.55) !important;
    box-shadow: 0 6px 24px rgba(232, 62, 107, 0.20);
}
.jb-radio-card-check {
    border-color: var(--pt-line, rgba(232,62,107,0.30)) !important;
}
.jb-radio-card.is-active .jb-radio-card-check {
    background: linear-gradient(135deg, #E83E6B, #C2185B) !important;
    border-color: var(--pt-primary, #E83E6B) !important;
    color: #fff !important;
}
.jb-radio-card-title {
    color: var(--pt-text, #FFD6DC) !important;
    font-weight: 700;
}
.jb-radio-card-sub {
    color: var(--pt-text-muted, rgba(255,214,220,0.65)) !important;
}
.jb-radio-card-cost {
    color: #FFB000 !important;
    font-weight: 600;
}
.jb-radio-card-illus {
    background: rgba(255, 214, 220, 0.04) !important;
    border: 1px dashed var(--pt-line, rgba(232,62,107,0.20)) !important;
}
.jb-illus-tv, .jb-illus-screen {
    background: linear-gradient(135deg, rgba(232,62,107,0.20), rgba(142,90,110,0.18)) !important;
    border: 1px solid rgba(232,62,107,0.30) !important;
}

/* ─── Source switch (radios YouTube vs favoris) ─── */
.jb-source-switch {
    background: rgba(22, 9, 16, 0.60) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
}
.jb-source-switch__label {
    color: var(--pt-text-muted, rgba(255,214,220,0.6)) !important;
}
.jb-source-switch__opt input[type="radio"]:checked + .jb-source-switch__dot + .jb-source-switch__label {
    background: rgba(232, 62, 107, 0.18) !important;
    border-color: rgba(232, 62, 107, 0.45) !important;
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-source-switch__opt:hover .jb-source-switch__label {
    color: var(--pt-text, #FFD6DC) !important;
}

/* ─── Favorites locked (state Google deconnecte) ─── */
.jb-favorites-locked {
    background: linear-gradient(135deg, rgba(232, 62, 107, 0.06), rgba(255, 176, 0, 0.04)) !important;
    border: 1px dashed var(--pt-line, rgba(232,62,107,0.22)) !important;
    color: var(--pt-text, #FFD6DC);
}
.jb-favorites-locked__icon {
    background: rgba(232, 62, 107, 0.15) !important;
    color: var(--pt-primary, #E83E6B) !important;
    border: 1px solid rgba(232, 62, 107, 0.35) !important;
}

/* ─── Cost recap aside (right column) ─── */
.jb-cost {
    background: rgba(45, 15, 31, 0.55) !important;
    border: 1px solid rgba(255, 176, 0, 0.30) !important;
    color: var(--pt-text, #FFD6DC) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.jb-cost h3 {
    color: var(--pt-text, #FFD6DC) !important;
    font-family: var(--font-display, 'Instrument Serif', serif);
    font-style: italic;
    font-weight: 400 !important;
}
.jb-cost-row-label {
    color: var(--pt-text-muted, rgba(255,214,220,0.7)) !important;
}
.jb-cost-row-value {
    color: var(--pt-text, #FFD6DC) !important;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}
.jb-cost-total {
    border-top: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-cost-total-label { color: var(--pt-text-muted, rgba(255,214,220,0.7)) !important; }
.jb-cost-total-value {
    color: #FFB000 !important;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}
.jb-cost-balance {
    color: var(--pt-text-muted, rgba(255,214,220,0.65)) !important;
    border-top: 1px dashed var(--pt-line, rgba(232,62,107,0.18)) !important;
}
.jb-cost-balance strong { color: #FFB000 !important; }
.jb-cost-hint {
    color: var(--pt-text-muted, rgba(255,214,220,0.55)) !important;
    font-style: italic;
    font-family: var(--font-display, 'Instrument Serif', serif);
}
.jb-pricing-warning {
    background: rgba(255, 176, 0, 0.10) !important;
    border: 1px solid rgba(255, 176, 0, 0.35) !important;
    color: #FFB000 !important;
}

/* ─── Segment (filter buttons : En cours / Terminés) ─── */
.jb-segment {
    background: rgba(22, 9, 16, 0.55) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    border-radius: 999px !important;
}
.jb-segment button {
    color: var(--pt-text-muted, rgba(255,214,220,0.6)) !important;
    background: transparent !important;
}
.jb-segment button.is-active {
    background: linear-gradient(135deg, #E83E6B, #C2185B) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(232, 62, 107, 0.30);
}

/* ─── Recent rooms list (Mon Comptoir legacy bg) ─── */
.jb-rrooms {
    background: transparent !important;
}
.jb-rroom {
    background: rgba(45, 15, 31, 0.55) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    color: var(--pt-text, #FFD6DC);
}
.jb-rroom-title { color: var(--pt-text, #FFD6DC) !important; }
.jb-rroom-meta-item { color: var(--pt-text-muted, rgba(255,214,220,0.65)) !important; }
.jb-rroom-status--live {
    background: linear-gradient(135deg, #E83E6B, #C2185B) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(232, 62, 107, 0.45);
}
.jb-rroom-status--ended {
    background: rgba(255, 214, 220, 0.06) !important;
    color: var(--pt-text-muted, rgba(255,214,220,0.55)) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.18)) !important;
}
.jb-rroom-qr {
    background: rgba(22, 9, 16, 0.70) !important;
    border: 1px solid rgba(232, 62, 107, 0.25) !important;
}

/* ─── Tables (transactions / Mon Comptoir / Admin) ─── */
.jb-table-wrap {
    background: rgba(45, 15, 31, 0.55) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
}
.jb-table th {
    background: rgba(22, 9, 16, 0.40) !important;
    color: var(--pt-text-muted, rgba(255,214,220,0.7)) !important;
    border-bottom: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
}
.jb-table td {
    color: var(--pt-text, #FFD6DC) !important;
    border-bottom: 1px solid rgba(255, 214, 220, 0.05) !important;
}
.jb-table-amount--in { color: #50C878 !important; }
.jb-table-amount--out { color: var(--pt-primary, #E83E6B) !important; }
.jb-table-date { color: var(--pt-text-muted, rgba(255,214,220,0.6)) !important; }

/* ─── Stats cards legacy ─── */
.jb-stat, .jb-stat--accent {
    background: rgba(45, 15, 31, 0.55) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    color: var(--pt-text, #FFD6DC);
}
.jb-stat--accent {
    background: linear-gradient(135deg, rgba(255,176,0,0.10), rgba(232,62,107,0.06)) !important;
    border-color: rgba(255, 176, 0, 0.35) !important;
}
.jb-stat-label { color: var(--pt-text-muted, rgba(255,214,220,0.7)) !important; }
.jb-stat-value { color: var(--pt-text, #FFD6DC) !important; font-family: 'JetBrains Mono', monospace; }
.jb-stat-sub { color: var(--pt-text-muted, rgba(255,214,220,0.55)) !important; }
.jb-stat--accent .jb-stat-value { color: #FFB000 !important; }

/* ─── Friends grid ─── */
.jb-friends-grid {
    background: transparent;
}
.jb-friend {
    background: rgba(45, 15, 31, 0.55) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    color: var(--pt-text, #FFD6DC);
}
.jb-friend:hover {
    background: rgba(232, 62, 107, 0.08) !important;
    border-color: rgba(232, 62, 107, 0.4) !important;
}
.jb-friend-name { color: var(--pt-text, #FFD6DC) !important; }
.jb-friend-sub { color: var(--pt-text-muted, rgba(255,214,220,0.6)) !important; }
.jb-friend-tip { color: var(--pt-primary, #E83E6B) !important; }

/* ─── CTA hero room (legacy block "Prêt à lancer ta prochaine soirée") ─── */
.jb-cta-room {
    background: linear-gradient(135deg, rgba(232,62,107,0.12), rgba(255,176,0,0.06)) !important;
    border: 1px solid rgba(232, 62, 107, 0.30) !important;
}
.jb-cta-room h2 {
    color: var(--pt-text, #FFD6DC) !important;
    font-family: var(--font-display, 'Instrument Serif', serif);
    font-style: italic;
}
.jb-cta-room p { color: var(--pt-text-muted, rgba(255,214,220,0.65)) !important; }
.jb-cta-room-hint { color: var(--pt-text-muted, rgba(255,214,220,0.55)) !important; }

/* ─── Empty state legacy ─── */
.jb-empty {
    background: rgba(255, 214, 220, 0.02) !important;
    border: 1px dashed var(--pt-line, rgba(232,62,107,0.18)) !important;
    color: var(--pt-text, #FFD6DC);
}
.jb-empty-title {
    color: var(--pt-text, #FFD6DC) !important;
    font-family: var(--font-display, 'Instrument Serif', serif);
    font-style: italic;
    font-weight: 400;
}
.jb-empty-text { color: var(--pt-text-muted, rgba(255,214,220,0.65)) !important; }

/* ─── Profile hero / avatar header ─── */
.jb-profile {
    background: rgba(45, 15, 31, 0.55) !important;
    border: 1px solid var(--pt-line, rgba(232,62,107,0.22)) !important;
    color: var(--pt-text, #FFD6DC);
}
.jb-profile-name {
    color: var(--pt-text, #FFD6DC) !important;
    font-family: var(--font-display, 'Instrument Serif', serif);
    font-style: italic;
    font-weight: 400;
}
.jb-profile-meta-item { color: var(--pt-text-muted, rgba(255,214,220,0.65)) !important; }

/* ─── Block heads (section titles dans Mon Comptoir legacy) ─── */
.jb-block-title {
    color: var(--pt-text, #FFD6DC) !important;
    font-family: var(--font-display, 'Instrument Serif', serif);
    font-style: italic;
    font-weight: 400;
}
.jb-block-count {
    background: rgba(232, 62, 107, 0.15) !important;
    color: var(--pt-primary, #E83E6B) !important;
    border: 1px solid rgba(232, 62, 107, 0.30) !important;
}
.jb-block-link {
    color: var(--pt-primary, #E83E6B) !important;
}
.jb-block-pending {
    background: rgba(255, 176, 0, 0.12) !important;
    color: #FFB000 !important;
    border: 1px solid rgba(255, 176, 0, 0.35) !important;
}

/* ─── Cards generiques jb-card (page friendship, etc.) ─── */
.jb-card {
    background: rgba(45, 15, 31, 0.55) !important;
    border: 1px solid var(--pt-line, rgba(232, 62, 107, 0.22)) !important;
    color: var(--pt-text, #FFD6DC) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.jb-card h1, .jb-card h2, .jb-card h3 {
    color: var(--pt-text, #FFD6DC) !important;
    font-family: var(--font-display, 'Instrument Serif', serif);
    font-style: italic;
    font-weight: 400;
}
.jb-card p, .jb-card li {
    color: var(--pt-text-muted, rgba(255, 214, 220, 0.75)) !important;
}

/* ─── Friendship: list items "Mes amis" + boutons Retirer ─── */
.jb-friends-list-item,
.jb-friend-row {
    background: rgba(45, 15, 31, 0.45) !important;
    border: 1px solid var(--pt-line, rgba(232, 62, 107, 0.18)) !important;
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-friends-list-item strong,
.jb-friend-row strong {
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-friend-action-remove,
.jb-friend-action-decline {
    background: rgba(255, 176, 0, 0.15) !important;
    color: #FFB000 !important;
    border: 1px solid rgba(255, 176, 0, 0.35) !important;
}
.jb-friend-action-remove:hover,
.jb-friend-action-decline:hover {
    background: rgba(255, 176, 0, 0.25) !important;
    border-color: rgba(255, 176, 0, 0.55) !important;
}
.jb-friend-action-accept {
    background: linear-gradient(135deg, #50C878, #2E8B57) !important;
    color: #fff !important;
}

/* ─── Soon tag ─── */
.jb-soon-tag {
    background: rgba(93, 234, 255, 0.10) !important;
    color: #5DEAFF !important;
    border: 1px solid rgba(93, 234, 255, 0.30) !important;
}
.jb-section--soon {
    opacity: 0.7;
}

/* ─── Pills langues (section "Langues acceptees pour les videos") ─── */
.jb-lang-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.jb-lang-chip {
    background: rgba(255, 214, 220, 0.04) !important;
    border: 1px solid var(--pt-line, rgba(232, 62, 107, 0.22)) !important;
    color: var(--pt-text-muted, rgba(255, 214, 220, 0.65)) !important;
    border-radius: 999px !important;
    /* Les <button> n'héritent pas de la police du body -> Windows afficherait
       « FR/GB » au lieu des drapeaux. On force la stack avec Twemoji Country Flags
       en tête (unicode-range limité aux drapeaux : le texte latin reste en Inter). */
    font-family: 'Twemoji Country Flags', 'Inter', 'Segoe UI', system-ui, sans-serif !important;
}
.jb-lang-chip:hover {
    border-color: rgba(232, 62, 107, 0.45) !important;
    color: var(--pt-text, #FFD6DC) !important;
    background: rgba(232, 62, 107, 0.06) !important;
}
.jb-lang-chip.is-active {
    background: linear-gradient(135deg, rgba(232, 62, 107, 0.18), rgba(232, 62, 107, 0.08)) !important;
    border-color: rgba(232, 62, 107, 0.45) !important;
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-lang-chip.is-active::after {
    color: var(--pt-primary, #E83E6B) !important;
}

/* ─── Selects (option dropdown) — fond rose nuit au lieu de blanc natif ───
   Les <option> ne sont pas vraiment stylables (style natif du navigateur),
   on force quand meme background-color + color qui marchent dans Chrome/FF/Safari. */
select.jb-input,
select.pe-field,
.jb-form-card select,
.pe-field select {
    background-color: rgba(22, 9, 16, 0.85) !important;
    color: var(--pt-text, #FFD6DC) !important;
    /* Custom arrow rose en SVG inline (chevron-down) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E83E6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px 14px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 38px !important;
}
select.jb-input option,
select.pe-field option,
.jb-form-card select option,
.pe-field select option {
    background-color: #2D0F1F !important;
    color: #FFD6DC !important;
    padding: 8px;
}
select.jb-input option:hover,
select.jb-input option:checked {
    background: linear-gradient(135deg, #E83E6B, #C2185B) !important;
    color: #fff !important;
}

/* ─── Boutons radio "Amis uniquement / Tout le monde" (section Acces) ─── */
.jb-radio-toggle,
.jb-acces-toggle {
    background: rgba(22, 9, 16, 0.60) !important;
    border: 1px solid var(--pt-line, rgba(232, 62, 107, 0.22)) !important;
}
.jb-radio-toggle__opt,
.jb-acces-toggle__opt {
    color: var(--pt-text-muted, rgba(255, 214, 220, 0.65)) !important;
}
.jb-radio-toggle__opt.is-active,
.jb-acces-toggle__opt.is-active,
input[type="radio"]:checked + .jb-radio-toggle__opt {
    background: linear-gradient(135deg, rgba(232, 62, 107, 0.20), rgba(232, 62, 107, 0.08)) !important;
    border: 1px solid rgba(232, 62, 107, 0.45) !important;
    color: var(--pt-text, #FFD6DC) !important;
    box-shadow: 0 2px 8px rgba(232, 62, 107, 0.20);
}

/* ─── Capacite maximum (input number) ─── */
input.jb-input[type="number"] {
    background: rgba(255, 214, 220, 0.04) !important;
    border: 1px solid var(--pt-line, rgba(232, 62, 107, 0.22)) !important;
    color: var(--pt-text, #FFD6DC) !important;
}

/* ─── Scrollbar interne sur resultats YouTube : on enleve max-height ───
   Le user trouve la scrollbar interne penible. On laisse la page scroller
   naturellement avec la molette. */
.jb-yt-results,
.jb-youtube-search__results {
    max-height: none !important;
    overflow-y: visible !important;
    scrollbar-gutter: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Lignes vidéo « glass apéro » — restyle moderne (fini le bleu JukeBox)
   Dégradé chaleureux, glow rose au survol, vignette qui zoome, sélection
   qui s'illumine. Remplace le navy rgba(11,18,39) + l'indigo #1a2348.
   ═══════════════════════════════════════════════════════════════════ */
.jb-yt-row {
    background: linear-gradient(135deg, rgba(58, 20, 38, 0.55) 0%, rgba(33, 11, 22, 0.60) 100%) !important;
    border: 1px solid rgba(232, 62, 107, 0.14) !important;
    border-radius: 14px !important;
    padding: 9px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22) !important;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease, background .2s ease !important;
}
.jb-yt-row:hover {
    background: linear-gradient(135deg, rgba(232, 62, 107, 0.17) 0%, rgba(45, 15, 28, 0.62) 100%) !important;
    border-color: rgba(232, 62, 107, 0.50) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 26px rgba(232, 62, 107, 0.22), 0 2px 8px rgba(0, 0, 0, 0.30) !important;
}
.jb-yt-row.is-selected {
    background: linear-gradient(135deg, rgba(232, 62, 107, 0.26) 0%, rgba(45, 15, 28, 0.70) 100%) !important;
    border-color: #E83E6B !important;
    box-shadow: 0 0 0 1px rgba(232, 62, 107, 0.55), 0 10px 28px rgba(232, 62, 107, 0.30) !important;
}
/* Vignette : dark warm + relief + zoom doux au survol */
.jb-yt-thumb {
    background: #2a0f1a !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 3px 8px rgba(0, 0, 0, 0.32) !important;
}
.jb-yt-thumb img { transition: transform .3s cubic-bezier(.2,.8,.2,1) !important; }
.jb-yt-row:hover .jb-yt-thumb img { transform: scale(1.07) !important; }
.jb-yt-thumb-time { background: rgba(20, 6, 12, 0.82) !important; border-radius: 5px !important; }
/* Pastille de sélection rose qui s'illumine */
.jb-yt-check { border-color: rgba(232, 62, 107, 0.35) !important; }
.jb-yt-row.is-selected .jb-yt-check {
    background: #E83E6B !important;
    border-color: #E83E6B !important;
    box-shadow: 0 0 14px rgba(232, 62, 107, 0.65) !important;
}
/* Lignes verrouillées (>5min) : pas de faux affordance au survol */
.jb-yt-row.jb-yt-row--locked:hover {
    transform: none !important;
    background: linear-gradient(135deg, rgba(48, 18, 32, 0.45), rgba(28, 10, 18, 0.50)) !important;
    border-color: rgba(232, 62, 107, 0.10) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important;
}
.jb-yt-row.jb-yt-row--locked:hover .jb-yt-thumb img { transform: none !important; }

/* ─── Source switch base styling pour pills (Rechercher / Mes favoris) ─── */
.jb-source-switch__label {
    border-radius: 999px !important;
}

/* ─── Scrollbar globale plus discrete (rose pale au lieu de bleu) ─── */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
    background: rgba(232, 62, 107, 0.25) !important;
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(232, 62, 107, 0.45) !important;
}
*::-webkit-scrollbar-track {
    background: transparent !important;
}

/* ─── Hero home : on clip HORIZONTAL uniquement (pour le halo qui depasse
   a droite), mais pas vertical (sinon le hint "tirage au sort" est coupe). */
.apero-hero {
    overflow-x: hidden;
    overflow-y: visible;
    max-width: 100%;
    padding-bottom: 70px !important; /* place pour le track + hint sous le vinyl */
}
.apero-hero-vinyl {
    flex-shrink: 0;
}
/* Sur mobile, le vinyl est trop gros : on le reduit + on le clip si depasse */
@media (max-width: 1024px) {
    .apero-hero-vinyl {
        max-width: 100% !important;
        margin: 0 auto;
    }
}
.apero-hero-demo {
    overflow: visible !important;
}

/* ─── Pill radio "Amis uniquement / Tout le monde" (section Acces) ───
   app.css : .jb-pill-radio-btn.is-active { background: #fff; color: #0b1227; }
   On le repeint en rose AperoRoom. */
.jb-pill-radio {
    background: rgba(22, 9, 16, 0.65) !important;
    border: 1px solid var(--pt-line, rgba(232, 62, 107, 0.22)) !important;
}
.jb-pill-radio-btn {
    color: var(--pt-text-muted, rgba(255, 214, 220, 0.6)) !important;
    background: transparent !important;
}
.jb-pill-radio-btn:hover {
    color: var(--pt-text, #FFD6DC) !important;
    background: rgba(232, 62, 107, 0.06) !important;
}
.jb-pill-radio-btn.is-active {
    background: linear-gradient(135deg, #E83E6B, #C2185B) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(232, 62, 107, 0.35);
}

/* ─── Modal "Amis uniquement" (popup invitation amis) ───
   app.css : fond gradient bleu (#1e2a52 -> #0b1227). On repeint en rose nuit. */
.jb-friends-modal__backdrop {
    background: rgba(10, 4, 8, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.jb-friends-modal__card {
    background: linear-gradient(180deg, rgba(45, 15, 31, 0.95), rgba(22, 9, 16, 0.98)) !important;
    border: 1px solid rgba(232, 62, 107, 0.30) !important;
    box-shadow: 0 20px 60px rgba(232, 62, 107, 0.20), 0 0 80px rgba(0, 0, 0, 0.6) !important;
}
.jb-friends-modal__head h3 {
    color: var(--pt-text, #FFD6DC) !important;
    font-family: var(--font-display, 'Instrument Serif', serif);
    font-style: italic;
    font-weight: 400;
    font-size: 22px !important;
}
.jb-friends-modal__close {
    color: var(--pt-text-muted, rgba(255, 214, 220, 0.7)) !important;
}
.jb-friends-modal__close:hover {
    background: rgba(232, 62, 107, 0.12) !important;
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-friends-modal__sub {
    color: var(--pt-text-muted, rgba(255, 214, 220, 0.65)) !important;
}
.jb-friends-modal__toggle-btn {
    background: rgba(255, 214, 220, 0.04) !important;
    border: 1px solid var(--pt-line, rgba(232, 62, 107, 0.22)) !important;
    color: var(--pt-text-muted, rgba(255, 214, 220, 0.6)) !important;
}
.jb-friends-modal__toggle-btn:hover {
    background: rgba(232, 62, 107, 0.08) !important;
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-friends-modal__toggle-btn.is-active {
    background: linear-gradient(135deg, rgba(232, 62, 107, 0.20), rgba(232, 62, 107, 0.08)) !important;
    border-color: rgba(232, 62, 107, 0.45) !important;
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-friends-modal__row {
    color: var(--pt-text, #FFD6DC) !important;
}
.jb-friends-modal__row:hover {
    background: rgba(232, 62, 107, 0.06) !important;
}
.jb-friends-modal__row-check { color: var(--pt-text-muted, rgba(255, 214, 220, 0.5)) !important; }
.jb-friends-modal__row-check.is-active,
.jb-friends-modal__row input[type="checkbox"]:checked + .jb-friends-modal__row-check {
    color: #50C878 !important;
}
.jb-friends-modal__pagination {
    color: var(--pt-text-muted, rgba(255, 214, 220, 0.6)) !important;
    border-top: 1px solid var(--pt-line, rgba(232, 62, 107, 0.18)) !important;
}
.jb-friends-modal__actions {
    border-top: 1px solid var(--pt-line, rgba(232, 62, 107, 0.18)) !important;
}

/* ─── Sonnerie (item sidebar notifications) avec badge + dot pulse ─── */
.apero-nav-item--sonnerie {
    position: relative;
}
.apero-sonnerie-badge {
    background: linear-gradient(135deg, #FF1744, #E83E6B) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(255, 23, 68, 0.50);
    animation: apero-sonnerie-badge-pop 0.4s ease-out;
}
@keyframes apero-sonnerie-badge-pop {
    0%   { transform: scale(0); opacity: 0; }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}
/* Petit dot rouge en haut de l'icone qui pulse pour attirer l'oeil */
.apero-sonnerie-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF1744;
    box-shadow: 0 0 8px rgba(255, 23, 68, 0.8);
    animation: apero-sonnerie-pulse 1.6s ease-in-out infinite;
}
@keyframes apero-sonnerie-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.2); }
}
/* Item entier en surlignage léger rose si non lu */
.apero-nav-item--sonnerie.has-unread {
    color: var(--pt-text, #FFD6DC);
}

/* ─── Body font stack : inclut Twemoji Country Flags pour Windows ───
   app.css ligne 134 a `body.jb-body { font-family: var(--jb-font) }` qui
   gagne en specificite contre `body { ... }` dans tokens.css.
   On override ici avec specificite egale + !important. */
body.jb-body,
body {
    font-family: 'Twemoji Country Flags', 'Inter', 'Apple Color Emoji',
                 'Segoe UI Emoji', 'Noto Color Emoji', system-ui,
                 -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ─── Sidebar styles globaux (deplaces depuis style inline du partial) ─── */
.jb-sidebar.apero-sidebar {
    background: rgba(22, 9, 16, 0.72);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-right: 1px solid var(--pt-line, rgba(232, 62, 107, 0.22));
    padding: 18px 12px;
}

/* ─── Toggle pure CSS : checkbox VRAIMENT cachee (sr-only standard) ───
   iOS Safari ignore opacity:0 sur certains inputs natifs. Le pattern
   sr-only avec clip:rect(0,0,0,0) est le seul a marcher PARTOUT. */
.apero-sidebar-toggle-input {
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    opacity: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    /* Pas de pointer-events:none — sinon le label ne peut pas toggle */
}

/* Hamburger feedback subtil quand ouvert (rose translucide + border accent). */
.apero-sidebar-toggle-input:checked ~ .apero-hamburger {
    background: rgba(232, 62, 107, 0.18) !important;
    border-color: rgba(232, 62, 107, 0.55) !important;
}
/* Transforme les 3 lignes du hamburger en croix X quand ouvert
   (pas indispensable mais effet UX sympa) */
.apero-sidebar-toggle-input:checked ~ .apero-hamburger svg {
    transform: rotate(90deg);
    transition: transform 0.25s ease;
}
.apero-hamburger svg { transition: transform 0.25s ease; }

/* ─── Mobile : casser le grid CSS pour que jb-main prenne toute la largeur ───
   Sur iPhone (< 1024px), .jb-app etait en grid avec une colonne "fantome"
   reservee a la sidebar fixed, contraignant jb-main a 60% de l'ecran. */
@media (max-width: 1024px) {
    .jb-app {
        display: block !important;
        grid-template-columns: none !important;
    }
    .jb-main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Sidebar fermee : translateX(-100%) + visibility hidden */
    .jb-sidebar {
        background: #0A0408 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        isolation: isolate;
        z-index: 50 !important;
        box-shadow: none !important;
        visibility: hidden;
        transition: transform 0.28s ease, visibility 0s linear 0.28s !important;
    }

    /* Quand checkbox cochee : sidebar visible + backdrop visible.
       Double selecteur : ~ (sibling, compat all browsers) + :has()
       (parent selector, iOS 15.4+/Chrome 105+) pour max fiabilite. */
    #apero-sidebar-toggle:checked ~ .jb-app .jb-sidebar,
    body:has(#apero-sidebar-toggle:checked) .jb-sidebar {
        transform: translateX(0) !important;
        visibility: visible !important;
        transition: transform 0.28s ease, visibility 0s linear 0s !important;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.6) !important;
    }
    #apero-sidebar-toggle:checked ~ .apero-sidebar-backdrop,
    body:has(#apero-sidebar-toggle:checked) .apero-sidebar-backdrop {
        display: block !important;
    }

    /* Backdrop : <label> qui ferme le toggle au clic */
    .apero-sidebar-backdrop {
        cursor: pointer;
    }
}

/* Garde aussi le toggle via la classe `.sidebar-open` pour compat
   (au cas ou un JS externe la set). */
@media (max-width: 1024px) {
    body.sidebar-open .jb-sidebar {
        transform: translateX(0) !important;
        visibility: visible !important;
    }
    body.sidebar-open .apero-sidebar-backdrop {
        display: block !important;
    }
}
/* Backdrop : on retire le blur partout, juste fond sombre.
   IMPORTANT : ce <label for="apero-sidebar-toggle"> ne DOIT PAS couvrir
   la zone de la sidebar, sinon les clicks sur les liens internes sont
   captures par le label (= toggle le checkbox = ferme la sidebar) AU LIEU
   d'atteindre le <a>. On le positionne donc apres la sidebar (left: 280px). */
.apero-sidebar-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.65) !important;
    z-index: 45 !important;
    /* Le backdrop commence APRES la largeur de la sidebar (280px ou 82vw) */
    left: min(280px, 82vw) !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    inset: auto !important; /* Annule le `inset: 0` par defaut */
}
/* Hamburger : optimisation tap iOS (reduit le delai 300ms + previent double-tap zoom) */
.apero-hamburger {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(232, 62, 107, 0.3);
}

/* ─── Footer : colle aux bords ───
   Le probleme : .jb-main (app.css ligne 145) a `padding: 24px`. Ce padding
   cree un espace autour du footer aussi. Solution : annuler ce padding sur
   .jb-main et le mettre INTERIEUR aux <main class="jb-content">. Les pages
   avec style inline custom (credits, account, room/new, etc.) ont deja
   leur propre padding, donc pas impact pour elles. Les pages standard
   (home, legal, etc.) recoivent leur padding via .jb-content. */
.jb-main {
    padding: 0 !important;
}
.jb-main > .jb-content {
    padding: 24px 28px;
}
/* Les pages avec style="padding:..." inline override naturellement
   (style inline > class) — pas besoin d'override supplementaire. */

.jb-footer-home {
    margin: 0 !important;
    padding: 22px 32px !important;
    background: rgba(10, 4, 8, 0.62);
    border-top: 1px solid var(--pt-line, rgba(232, 62, 107, 0.18)) !important;
    color: var(--pt-text-muted, rgba(255, 214, 220, 0.6)) !important;
    border-radius: 0 !important;
    width: 100%;
}
.jb-footer-home a {
    color: var(--pt-primary, #E83E6B) !important;
}
.jb-footer-home a:hover {
    color: #FFB000 !important;
}
.jb-footer-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

/* Footer pousse en bas SANS casser le grid layout : on s'appuie sur
   `.jb-app { min-height: 100vh }` deja defini dans app.css + `.jb-main {
   display: flex; flex-direction: column; }` deja defini.
   On ajoute juste flex: 1 sur le main interne. */
.jb-main > main,
.jb-main > .jb-content {
    flex: 1;
}

/* ============================================================
   Pastilles de comptage (.jb-pill) : le fond bleu marine hérité
   d'app.css (var(--jb-bg-card) = #16243e) jurait avec le thème.
   → teinte rose AperoRoom. (le room-view garde son override propre)
   ============================================================ */
.jb-pill {
    background: rgba(232, 62, 107, 0.15);
    border: 1px solid rgba(232, 62, 107, 0.30);
    color: var(--pt-primary, #E83E6B);
    font-weight: 700;
}

/* Étiquette « (compte free) » à droite du pseudo (demandes reçues) */
.jb-free-tag {
    font-size: 12px;
    font-weight: 500;
    color: var(--pt-primary, #E83E6B);
    opacity: 0.85;
    white-space: nowrap;
}

/* Avatar cliquable → vers le profil public (nouvel onglet) */
.jb-avatar--link {
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.jb-avatar--link:hover {
    transform: scale(1.07);
    box-shadow: 0 0 0 2px rgba(232, 62, 107, 0.55);
}

/* Icône calendrier des <input type="datetime-local"> : par défaut quasi invisible
   (glyphe sombre sur fond foncé). On l'éclaircit (invert) + agrandit -> bien visible
   pour tout le monde. (En FREE le champ est disabled : l'icône reste visible mais
   grisée/non-cliquable, c'est voulu.) */
input.jb-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.9) brightness(1.35);
    opacity: 0.85;
    cursor: pointer;
    transform: scale(1.35);
    margin-right: 6px;
    transition: opacity .15s ease;
}
input.jb-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
input.jb-input[type="datetime-local"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}