/* ================================================================
   ByUs Event — Design System
   ----------------------------------------------------------------
   Tokens neutres + composants. Les couleurs de marque
   (--color-primary, --color-secondary, --color-background, --color-text)
   sont injectées par Event::cssVariables() dans <style> au-dessus.
   Ce fichier ajoute uniquement des tokens neutres (gris, ombres,
   radius) et des composants/utilitaires basés sur ces variables.
   ================================================================ */

:root {
    /* ── Tokens neutres (ne dépendent pas du thème event) ─────────── */
    --color-surface: #FFFFFF;
    --color-surface-muted: #FAFAFD;
    --color-text-muted: #5B6478;
    --color-text-faint: #8A93A6;
    --color-border: #E7E5F1;
    --color-border-strong: #D5D2E7;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, .06);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .08);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Sémantiques (constantes) */
    --color-success: #10B981;
    --color-success-soft: #D1FAE5;
    --color-warning: #F59E0B;
    --color-warning-soft: #FEF3C7;
    --color-danger: #EF4444;
    --color-danger-soft: #FEE2E2;
    --color-info: #3B82F6;
    --color-info-soft: #DBEAFE;

    /* Fallbacks RGB du primary si l'event n'a pas généré --color-primary-rgb
       (Event::cssVariables() doit fournir la vraie valeur en RGB triplet) */
    --color-primary-rgb: 20, 9, 104;
}

/* Variantes du primary calculées à partir du triplet RGB injecté */
:root {
    --color-primary-soft: rgba(var(--color-primary-rgb), .08);
    --color-primary-faint: rgba(var(--color-primary-rgb), .04);
    --color-primary-glow: rgba(var(--color-primary-rgb), .25);
}

/* ────────────────────────────────────────────────────────────────
   BASE
   ──────────────────────────────────────────────────────────────── */

html, body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 400 !important;
    background-color: var(--color-background, #F7F6FB) !important;
    color: var(--color-text, #0F172A);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    /* color: laisser hériter du parent — permet aux bandeaux colorés
       (ex room headers en bleu/violet) d'avoir leur titre en blanc.
       Les vues qui veulent forcer le noir font color: var(--color-text)
       inline ou via la classe Tailwind appropriée. */
    color: inherit;
}
h1 { letter-spacing: -0.035em; }

/* ------------------------------------------------------------------
   Neutralisation du custom.css legacy qui force `h2 { font-size: 2rem !important }`.
   Cet override casse tous les sous-titres en `text-sm uppercase` (titres de
   sections "EN DIRECT", "PROCHAINES SESSIONS" etc qui se retrouvent gigantesques).
   On rétablit un comportement standard, surchargeable par les classes Tailwind.
   ------------------------------------------------------------------ */
.h2, h2 { font-size: 1.5rem !important; }
.h2.text-sm, h2.text-sm { font-size: 0.875rem !important; }
.h2.text-base, h2.text-base { font-size: 1rem !important; }
.h2.text-lg, h2.text-lg { font-size: 1.125rem !important; }
.h2.text-xl, h2.text-xl { font-size: 1.25rem !important; }
.h2.text-2xl, h2.text-2xl { font-size: 1.5rem !important; }
.h2.text-3xl, h2.text-3xl { font-size: 1.875rem !important; }
.h2.text-4xl, h2.text-4xl { font-size: 2.25rem !important; }

/* Casser le font-weight: 700 !important global hérité du custom.css legacy */
body, p, span, div, td, li, a, label, input, textarea, button {
    font-weight: inherit !important;
}
body { font-weight: 400 !important; }
p, span:not([class*="font-"]):not([style*="font-weight"]),
div:not([class*="font-"]):not([style*="font-weight"]) {
    font-weight: 400;
}

/* ────────────────────────────────────────────────────────────────
   HIGHLIGHT — soulignement secondary derrière mot primary
   "marker fluo" — marche avec n'importe quelles couleurs event
   ──────────────────────────────────────────────────────────────── */

.byus-highlight {
    position: relative;
    color: var(--color-primary, #140968);
    white-space: nowrap;
    z-index: 0;
}
.byus-highlight::before {
    content: '';
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 8%;
    height: 38%;
    background: var(--color-secondary, #FFC700);
    opacity: .55;
    z-index: -1;
    border-radius: 4px;
    transform: skew(-3deg);
}

/* ────────────────────────────────────────────────────────────────
   BOUTONS
   ──────────────────────────────────────────────────────────────── */

.byus-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 22px;
    border-radius: var(--radius-md);
    transition: transform .15s, box-shadow .15s, filter .15s, border-color .15s;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    line-height: 1;
}
.byus-btn:hover { transform: translateY(-1px); }

.byus-btn-primary {
    background: var(--color-primary, #140968);
    color: white;
    box-shadow: 0 6px 20px var(--color-primary-soft);
}
.byus-btn-primary:hover {
    box-shadow: 0 10px 28px var(--color-primary-glow);
    filter: brightness(1.08);
    color: white;
}

.byus-btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
.byus-btn-secondary:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.byus-btn-accent {
    background: var(--color-secondary, #FFC700);
    color: var(--color-primary, #140968);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 18px;
}
.byus-btn-accent:hover {
    filter: brightness(1.05);
    color: var(--color-primary, #140968);
}

/* Bouton "ghost" : lisible peu importe le couple de couleurs event.
   Utilisé pour les actions secondaires de la nav (Favoris, etc.). */
.byus-btn-ghost {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-weight: 600;
    font-size: 14px;
    padding: 9px 16px;
}
.byus-btn-ghost:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
    background: var(--color-surface);
}
.byus-btn-ghost svg {
    color: var(--color-primary);
}

.byus-btn-sm { padding: 8px 14px; font-size: 13px; }
.byus-btn-lg { padding: 14px 26px; font-size: 16px; }

/* ────────────────────────────────────────────────────────────────
   CARDS
   ──────────────────────────────────────────────────────────────── */

.byus-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, transform .2s, border-color .2s;
    overflow: hidden;
}
.byus-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
}
.byus-card-feature { padding: 28px; }

.byus-card-clickable:hover {
    transform: translateY(-2px);
}

/* ────────────────────────────────────────────────────────────────
   PILLS / BADGES
   ──────────────────────────────────────────────────────────────── */

.byus-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    background: var(--color-primary-soft);
    color: var(--color-primary, #140968);
    line-height: 1.2;
}

.byus-pill-success { background: var(--color-success-soft); color: #047857; }
.byus-pill-warning { background: var(--color-warning-soft); color: #92400E; }
.byus-pill-danger { background: var(--color-danger-soft); color: #991B1B; }
.byus-pill-info { background: var(--color-info-soft); color: #1E40AF; }
.byus-pill-pink { background: #FCE7F3; color: #9D174D; }

.byus-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary, #140968);
    box-shadow: 0 0 0 4px var(--color-primary-soft);
    animation: byus-pulse 2s infinite;
    flex-shrink: 0;
}
@keyframes byus-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--color-primary-soft); }
    50% { box-shadow: 0 0 0 8px var(--color-primary-faint); }
}

.byus-pill-dot-success {
    background: var(--color-success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .15);
    animation: byus-pulse-success 2s infinite;
}
@keyframes byus-pulse-success {
    0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, .15); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, .05); }
}

/* ────────────────────────────────────────────────────────────────
   ICON TILE
   ──────────────────────────────────────────────────────────────── */

.byus-icon-tile {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary, #140968);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.byus-icon-tile-secondary {
    background: var(--color-secondary, #FFC700);
    color: var(--color-primary, #140968);
}

/* ────────────────────────────────────────────────────────────────
   HEADER STICKY
   ──────────────────────────────────────────────────────────────── */

.byus-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(247, 246, 251, .85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.byus-nav-link {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.byus-nav-link:hover {
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
}
.byus-nav-link.active {
    background: var(--color-surface);
    color: var(--color-primary, #140968);
    font-weight: 600;
}

.byus-mobile-link {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.byus-mobile-link:hover { background: var(--color-surface-muted); color: var(--color-text); text-decoration: none; }
.byus-mobile-link.active {
    background: var(--color-primary-soft);
    color: var(--color-primary, #140968);
    font-weight: 600;
}

/* ────────────────────────────────────────────────────────────────
   PAGE HEADER (slot $header pour les pages internes)
   ──────────────────────────────────────────────────────────────── */

.byus-page-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.byus-page-header-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 24px 24px;
}

/* ────────────────────────────────────────────────────────────────
   HERO
   ──────────────────────────────────────────────────────────────── */

.byus-hero {
    position: relative;
    overflow: hidden;
}
.byus-hero-blob {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.byus-hero-blob::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -100px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-primary-soft) 0%, transparent 60%);
}
.byus-hero-blob::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 199, 0, .08) 0%, transparent 60%);
}

.byus-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary, #140968);
}

/* ────────────────────────────────────────────────────────────────
   STATS
   ──────────────────────────────────────────────────────────────── */

.byus-stat-num {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--color-text, #0F172A);
    line-height: 1;
}

/* ────────────────────────────────────────────────────────────────
   SESSION ROW (programme)
   ──────────────────────────────────────────────────────────────── */

.byus-session-row {
    transition: background .15s;
}
.byus-session-row:hover {
    background: var(--color-surface-muted);
}
.byus-session-row.is-live {
    background: var(--color-primary-faint);
}

.byus-day-tab {
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: all .15s;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.byus-day-tab:hover { border-color: var(--color-border-strong); color: var(--color-text); text-decoration: none; }
.byus-day-tab.active {
    background: var(--color-primary, #140968);
    color: white;
    border-color: var(--color-primary, #140968);
}

/* ────────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────────── */

.byus-footer {
    background: var(--color-primary, #140968);
    color: white;
    margin-top: 96px;
}

.byus-footer-link {
    color: rgba(255, 255, 255, .85);
    transition: color .15s;
    font-size: 14px;
    text-decoration: none;
}
.byus-footer-link:hover {
    color: white;
    text-decoration: none;
}

.byus-social-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .1);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.byus-social-icon:hover {
    background: rgba(255, 255, 255, .2);
    color: white;
}

/* ────────────────────────────────────────────────────────────────
   AVATAR STACK
   ──────────────────────────────────────────────────────────────── */

.byus-avatar-stack {
    display: flex;
}
.byus-avatar-stack > * {
    border: 2px solid white;
    border-radius: 50%;
    margin-left: -8px;
    width: 32px;
    height: 32px;
    object-fit: cover;
    background: var(--color-surface-muted);
}
.byus-avatar-stack > *:first-child { margin-left: 0; }

/* ────────────────────────────────────────────────────────────────
   UTILITAIRES
   ──────────────────────────────────────────────────────────────── */

.byus-text-muted { color: var(--color-text-muted) !important; }
.byus-text-faint { color: var(--color-text-faint) !important; }
.byus-text-primary { color: var(--color-primary, #140968) !important; }
.byus-bg-primary-soft { background: var(--color-primary-soft) !important; }
.byus-bg-surface { background: var(--color-surface) !important; }
.byus-bg-surface-muted { background: var(--color-surface-muted) !important; }
.byus-border { border: 1px solid var(--color-border) !important; }

/* ────────────────────────────────────────────────────────────────
   OVERRIDE LEGACY — couper la teinte indigo des nav-link Breeze
   ──────────────────────────────────────────────────────────────── */

/* Les composants Breeze (nav-link, responsive-nav-link) ont des
   classes border-indigo-* hardcodées. On neutralise sans toucher au composant. */
.byus-nav-wrapper a[class*="border-indigo"] {
    border-color: var(--color-primary, #140968) !important;
    color: var(--color-primary, #140968) !important;
}

/* ────────────────────────────────────────────────────────────────
   LIENS GENERIQUES — éviter le texte sous-ligné Tailwind par défaut
   ──────────────────────────────────────────────────────────────── */
.byus-card a:not(.byus-btn) {
    text-decoration: none;
}