/* ============================================================================
 * challenge.css - Design system isolé pour le Challenge Quinté+ (Saison 5+).
 *
 * Prefixe CSS exclusif : `.tbz-challenge-*` (anti-conflit avec `.tbz-agent-*`
 * du chat, `.tbz-conso-*` de la page conso, `.tbzh-cp-*` du popup footer).
 *
 * Variables custom regroupées sous `--tbz-ch-*` (anti-conflit avec
 * `--tbz-ag-*` et `--brand-*` du site global).
 *
 * Mobile-first via `@media (min-width: ...)`. Compatible Bootstrap 5 (déjà
 * chargé par header.php / footer.php).
 *
 * @author Claude (Cowork mode, 2026-05-14)
 * @version 1.0.0
 * ========================================================================== */

:root {
    --tbz-ch-primary:      #04586C;
    --tbz-ch-primary-dark: #034555;
    --tbz-ch-accent:       #FFD700;
    --tbz-ch-bg:           #f4f7f9;
    --tbz-ch-card:         #ffffff;
    --tbz-ch-text:         #343a40;
    --tbz-ch-muted:        #6c757d;
    --tbz-ch-border:       #e9ecef;
    --tbz-ch-success:      #198754;
    --tbz-ch-warn:         #f59e0b;
    --tbz-ch-danger:       #dc3545;
    --tbz-ch-bronze:       #cd7f32;
    --tbz-ch-silver:       #adb5bd;
    --tbz-ch-gold:         #FFD700;
    --tbz-ch-shadow-soft:  0 5px 15px rgba(0, 0, 0, 0.05);
    --tbz-ch-shadow-med:   0 8px 22px rgba(4, 88, 108, 0.12);
    --tbz-ch-radius:       12px;
    --tbz-ch-radius-sm:    8px;
}

/* ── Conteneur global ─────────────────────────────────────────────────────── */
.tbz-challenge-app {
    background-color: var(--tbz-ch-bg);
    color: var(--tbz-ch-text);
    padding: 20px 12px 40px;
    font-family: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
}

@media (min-width: 768px) {
    .tbz-challenge-app { padding: 30px 20px 60px; }
}

.tbz-challenge-wrap {
    max-width: 1140px;
    margin: 0 auto;
}

/* ── Header de page (titre + dates) ───────────────────────────────────────── */
.tbz-challenge-hero {
    background: linear-gradient(135deg, var(--tbz-ch-primary) 0%, var(--tbz-ch-primary-dark) 100%);
    color: #fff;
    border-radius: var(--tbz-ch-radius);
    padding: 22px 22px 26px;
    margin-bottom: 22px;
    box-shadow: var(--tbz-ch-shadow-med);
    position: relative;
    overflow: hidden;
}

.tbz-challenge-hero::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,215,0,0.18) 0%, transparent 70%);
    pointer-events: none;
}

.tbz-challenge-hero h1 {
    margin: 0 0 6px 0;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.2;
}

.tbz-challenge-hero .tbz-challenge-period {
    font-size: 0.95rem;
    opacity: 0.92;
    margin-bottom: 8px;
}

.tbz-challenge-hero .tbz-challenge-countdown {
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: var(--tbz-ch-radius-sm);
    padding: 8px 12px;
    display: inline-block;
    font-weight: 600;
    color: var(--tbz-ch-accent);
}

.tbz-challenge-hero .tbz-challenge-histo-link {
    display: inline-block;
    margin-top: 12px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff !important;
    text-decoration: none;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.2s;
}

.tbz-challenge-hero .tbz-challenge-histo-link:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

@media (min-width: 768px) {
    .tbz-challenge-hero { padding: 30px 32px; }
    .tbz-challenge-hero h1 { font-size: 2.1rem; }
}

/* ── Sections (cards) ─────────────────────────────────────────────────────── */
.tbz-challenge-section {
    background: var(--tbz-ch-card);
    border-radius: var(--tbz-ch-radius);
    box-shadow: var(--tbz-ch-shadow-soft);
    padding: 20px 18px;
    margin-bottom: 18px;
}

.tbz-challenge-section h2 {
    color: var(--tbz-ch-primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tbz-challenge-section h2 .tbz-challenge-h2-pill {
    background: var(--tbz-ch-primary);
    color: #fff;
    font-size: 0.7rem;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

@media (min-width: 768px) {
    .tbz-challenge-section { padding: 26px 24px; }
    .tbz-challenge-section h2 { font-size: 1.4rem; }
}

/* ── Mode "rollover en cours" (1er du mois 00h00-00h05) ───────────────────── */
.tbz-challenge-rollover {
    background: linear-gradient(135deg, #fff5e6 0%, #fff 100%);
    border: 1px solid var(--tbz-ch-warn);
    border-radius: var(--tbz-ch-radius);
    padding: 18px 20px;
    text-align: center;
    color: var(--tbz-ch-text);
}

.tbz-challenge-rollover h2 {
    color: var(--tbz-ch-warn);
    margin: 0 0 6px 0;
    font-size: 1.2rem;
    font-weight: 700;
}

/* ── Mon pronostic (form) ─────────────────────────────────────────────────── */
.tbz-challenge-myprono-status {
    padding: 10px 14px;
    border-radius: var(--tbz-ch-radius-sm);
    background: #eaf5f7;
    color: var(--tbz-ch-primary);
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tbz-challenge-myprono-status.is-submitted {
    background: #e6f7ed;
    color: var(--tbz-ch-success);
}

.tbz-challenge-myprono-status.is-anonymous {
    background: #fff5e6;
    color: var(--tbz-ch-warn);
}

.tbz-challenge-myprono-summary {
    background: var(--tbz-ch-bg);
    border: 1px dashed var(--tbz-ch-border);
    border-radius: var(--tbz-ch-radius-sm);
    padding: 12px 14px;
    margin: 8px 0 14px;
    font-size: 0.95rem;
}

.tbz-challenge-myprono-summary .tbz-challenge-horse-chip {
    display: inline-block;
    background: var(--tbz-ch-primary);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
    margin: 2px 3px;
    font-size: 0.85rem;
}

.tbz-challenge-myprono-summary .tbz-challenge-horse-chip.is-complement {
    background: var(--tbz-ch-accent);
    color: var(--tbz-ch-primary);
}

.tbz-challenge-cta {
    display: inline-block;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--tbz-ch-primary) 0%, var(--tbz-ch-primary-dark) 100%);
    color: #fff !important;
    border-radius: var(--tbz-ch-radius-sm);
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.95rem;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
}

.tbz-challenge-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(4, 88, 108, 0.25);
}

.tbz-challenge-cta.is-secondary {
    background: #fff;
    color: var(--tbz-ch-primary) !important;
    border: 1px solid var(--tbz-ch-primary);
}

/* ── Classement (table) ───────────────────────────────────────────────────── */
.tbz-challenge-ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.tbz-challenge-ranking-table th,
.tbz-challenge-ranking-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid var(--tbz-ch-border);
}

.tbz-challenge-ranking-table th {
    background: var(--tbz-ch-bg);
    font-weight: 700;
    color: var(--tbz-ch-primary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tbz-challenge-ranking-table tr.is-me {
    background: rgba(255, 215, 0, 0.12);
    font-weight: 700;
}

.tbz-challenge-ranking-table tr.is-virtual td {
    color: var(--tbz-ch-muted);
    font-style: italic;
}

.tbz-challenge-ranking-table .tbz-challenge-rank {
    font-weight: 800;
    color: var(--tbz-ch-primary);
    min-width: 38px;
}

.tbz-challenge-ranking-table .tbz-challenge-rank.is-top1 { color: var(--tbz-ch-gold); }
.tbz-challenge-ranking-table .tbz-challenge-rank.is-top2 { color: var(--tbz-ch-silver); }
.tbz-challenge-ranking-table .tbz-challenge-rank.is-top3 { color: var(--tbz-ch-bronze); }

.tbz-challenge-virtual-icon {
    display: inline-block;
    width: 18px; height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 4px;
    background: var(--tbz-ch-muted);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Badges (legende + ma collection) ─────────────────────────────────────── */
.tbz-challenge-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}

.tbz-challenge-badge {
    background: var(--tbz-ch-bg);
    border: 1px solid var(--tbz-ch-border);
    border-radius: var(--tbz-ch-radius-sm);
    padding: 10px 8px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--tbz-ch-muted);
    transition: transform 0.2s;
}

.tbz-challenge-badge.is-earned {
    background: linear-gradient(135deg, #fff 0%, #fffaeb 100%);
    border-color: var(--tbz-ch-accent);
    color: var(--tbz-ch-text);
}

.tbz-challenge-badge.is-earned:hover {
    transform: translateY(-2px);
}

.tbz-challenge-badge .tbz-challenge-badge-icon {
    font-size: 1.6rem;
    margin-bottom: 4px;
}

.tbz-challenge-badge.is-bronze { border-color: var(--tbz-ch-bronze); }
.tbz-challenge-badge.is-silver { border-color: var(--tbz-ch-silver); }
.tbz-challenge-badge.is-gold   { border-color: var(--tbz-ch-gold); }

/* ── Historique perso ─────────────────────────────────────────────────────── */
.tbz-challenge-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tbz-challenge-history-table th,
.tbz-challenge-history-table td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--tbz-ch-border);
    text-align: left;
}

.tbz-challenge-history-table .tbz-challenge-positive {
    color: var(--tbz-ch-success);
    font-weight: 700;
}

/* ── Carrousel vignettes (bas de page) ────────────────────────────────────── */
.tbz-challenge-carousel {
    margin-top: 28px;
}

.tbz-challenge-carousel h2 {
    color: var(--tbz-ch-primary);
    font-size: 1.15rem;
    margin: 0 0 14px;
}

.tbz-challenge-carousel-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 576px) {
    .tbz-challenge-carousel-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .tbz-challenge-carousel-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tbz-challenge-carousel-card {
    background: var(--tbz-ch-card);
    border-radius: var(--tbz-ch-radius);
    overflow: hidden;
    box-shadow: var(--tbz-ch-shadow-soft);
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: var(--tbz-ch-text) !important;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid var(--tbz-ch-border);
    position: relative;
}

.tbz-challenge-carousel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(4, 88, 108, 0.15);
}

.tbz-challenge-carousel-card .tbz-challenge-cc-header {
    background: linear-gradient(135deg, var(--tbz-ch-primary) 0%, var(--tbz-ch-primary-dark) 100%);
    color: #fff;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 1rem;
}

.tbz-challenge-carousel-card .tbz-challenge-cc-body {
    padding: 12px 14px 18px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--tbz-ch-text);
    flex: 1;
}

.tbz-challenge-carousel-card .tbz-challenge-cc-tag {
    display: inline-block;
    background: var(--tbz-ch-accent);
    color: var(--tbz-ch-primary);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.tbz-challenge-carousel-card .tbz-challenge-cc-cta {
    margin: 0 14px 14px;
    padding: 8px;
    text-align: center;
    background: var(--tbz-ch-bg);
    border-radius: var(--tbz-ch-radius-sm);
    font-weight: 700;
    color: var(--tbz-ch-primary);
    font-size: 0.85rem;
}

/* ── Bandeaux publicitaires (wrappers) ────────────────────────────────────── */
.tbz-challenge-ad-slot {
    margin: 22px 0;
    text-align: center;
    min-height: 50px;
}

.tbz-challenge-ad-slot .tbz-challenge-ad-label {
    display: block;
    font-size: 0.7rem;
    color: var(--tbz-ch-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

/* ── Notice "non connecté" / CTA inscription ──────────────────────────────── */
.tbz-challenge-cta-login {
    background: var(--tbz-ch-bg);
    border: 1px dashed var(--tbz-ch-primary);
    border-radius: var(--tbz-ch-radius-sm);
    padding: 16px;
    text-align: center;
    color: var(--tbz-ch-text);
}

.tbz-challenge-cta-login p {
    margin-bottom: 12px;
}

/* ── Picto distinctif IA / Robot ──────────────────────────────────────────── */
.tbz-challenge-icon-robot::before {
    content: "🤖";
    margin-right: 4px;
    font-size: 1em;
}
.tbz-challenge-icon-press::before {
    content: "📰";
    margin-right: 4px;
}
.tbz-challenge-icon-sniffer::before {
    content: "🐕";
    margin-right: 4px;
}

/* ── Petits utilitaires ───────────────────────────────────────────────────── */
.tbz-challenge-muted { color: var(--tbz-ch-muted); }
.tbz-challenge-small { font-size: 0.85rem; }
.tbz-challenge-strong { font-weight: 700; }
.tbz-challenge-mt-2 { margin-top: 12px; }
.tbz-challenge-mt-3 { margin-top: 18px; }
.tbz-challenge-mb-2 { margin-bottom: 12px; }
.tbz-challenge-mb-3 { margin-bottom: 18px; }
.tbz-challenge-textcenter { text-align: center; }

/* ── Boites d'alerte ──────────────────────────────────────────────────────── */
.tbz-challenge-alert {
    padding: 12px 14px;
    border-radius: var(--tbz-ch-radius-sm);
    margin-bottom: 14px;
    font-size: 0.92rem;
}
.tbz-challenge-alert.is-success { background: #e6f7ed; color: #0a5132; border: 1px solid #b7e2c8; }
.tbz-challenge-alert.is-warn    { background: #fff5e6; color: #7a4f0e; border: 1px solid #f1d39e; }
.tbz-challenge-alert.is-danger  { background: #fdecee; color: #7a0c14; border: 1px solid #f3c1c5; }
.tbz-challenge-alert.is-info    { background: #eaf5f7; color: var(--tbz-ch-primary); border: 1px solid #c8e0e5; }