/* scoroscope.com — skin Bootstrap → design tokens scoroscope
 *
 * À charger APRÈS bootstrap.min.css ET tokens.css.
 * Override les variables Bootstrap pour utiliser nos tokens (mint, ink, bg, etc.)
 * et ajoute les utilities du design system (eyebrow, ticker, chip-mint, etc.)
 */

/* =============================================================
   1. Override des variables Bootstrap avec nos tokens
   ============================================================= */
:root {
    /* Couleur primaire = mint */
    --bs-primary: var(--mint);
    --bs-primary-rgb: 26, 178, 112;
    --bs-link-color: var(--mint);
    --bs-link-color-rgb: 26, 178, 112;
    --bs-link-hover-color: var(--mint-bright);

    /* Body */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: 11, 15, 13;
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.5;

    /* Borders */
    --bs-border-color: var(--line);
    --bs-border-color-translucent: var(--line);
    --bs-border-radius: var(--r-md);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-lg);
    --bs-border-radius-xl: var(--r-xl);
    --bs-border-radius-pill: 999px;

    /* Tertiary surfaces */
    --bs-tertiary-bg: var(--bg-elev-2);
    --bs-secondary-bg: var(--bg-elev-2);
    --bs-tertiary-color: var(--ink-3);
    --bs-secondary-color: var(--ink-2);

    /* Form controls */
    --bs-form-control-bg: var(--bg-elev);
    --bs-form-control-color: var(--ink);

    /* Other semantic colors */
    --bs-success: var(--mint);
    --bs-success-rgb: 26, 178, 112;
    --bs-warning: var(--yellow);
    --bs-warning-rgb: 181, 132, 0;
    --bs-danger: var(--red);
    --bs-danger-rgb: 220, 63, 63;
    --bs-info: var(--blue);
    --bs-info-rgb: 44, 122, 224;
}

/* =============================================================
   2. Body / page de fond
   ============================================================= */
html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    /* App-like : zéro scroll horizontal, zéro zoom navigateur */
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}
/* Tous les enfants directs ne doivent JAMAIS déborder horizontalement */
body * { max-width: 100%; }
img, video, iframe, canvas, svg, table { max-width: 100%; height: auto; }
/* Sur mobile, désactive le double-tap zoom */
@media (max-width: 991.98px) {
    html, body { touch-action: pan-y pinch-zoom; }
    button, a, input, select, textarea, label { touch-action: manipulation; }
    /* Empêche iOS Safari de zoom auto sur les <input> < 16px */
    input, select, textarea { font-size: 16px !important; }
}
/* Conteneurs : pas de débordement horizontal */
.container, .container-fluid { max-width: 100vw; overflow-x: hidden; }

/* =============================================================
   3. Typographie utilitaires (issus du handoff)
   ============================================================= */
.display, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    font-weight: 600;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
    color: var(--ink);
}

.title-xl { font-family: var(--font-display); font-size: 38px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; color: var(--ink); }
.title-lg { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.title-md { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ticker {
    font-family: var(--font-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: var(--ink);
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint-text);
    display: inline-block;
}
.eyebrow.bare::before { display: none; }
.eyebrow.dot-yellow::before { background: var(--yellow); }
.eyebrow.dot-red::before    { background: var(--red); }
.eyebrow.dot-ink::before    { background: var(--ink); }

.text-ink   { color: var(--ink) !important; }
.text-ink-2 { color: var(--ink-2) !important; }
.text-ink-3 { color: var(--ink-3) !important; }
.text-ink-4 { color: var(--ink-4) !important; }
.text-mint  { color: var(--mint-text) !important; }
.text-mint-bright { color: var(--mint-bright) !important; }

/* =============================================================
   4. Surfaces & cards
   ============================================================= */
.bg-elev   { background: var(--bg-elev) !important; }
.bg-elev-2 { background: var(--bg-elev-2) !important; }
.bg-elev-3 { background: var(--bg-elev-3) !important; }
.bg-mint   { background: var(--mint) !important; color: var(--selection-fg) !important; }
.bg-mint-dim { background: var(--mint-dim) !important; color: var(--mint) !important; }

.card {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.card-flat {
    background: var(--bg-elev);
    border: 0;
    border-radius: var(--r-lg);
}

/* =============================================================
   5. Buttons (override les couleurs par défaut)
   ============================================================= */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: var(--r-md);
    transition: transform .12s, background-color .15s, box-shadow .15s;
}
.btn-primary {
    background: var(--mint);
    border-color: var(--mint);
    color: var(--selection-fg);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--mint-bright);
    border-color: var(--mint-bright);
    color: var(--selection-fg);
}
.btn-outline-primary {
    border-color: var(--mint);
    color: var(--mint);
}
.btn-outline-primary:hover {
    background: var(--mint);
    border-color: var(--mint);
    color: var(--selection-fg);
}

/* Bouton "mint" plus explicite */
.btn-mint {
    background: var(--mint);
    color: var(--selection-fg);
    border: none;
}
.btn-mint:hover { background: var(--mint-bright); color: var(--selection-fg); }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--bg-elev-2); color: var(--ink); }

/* =============================================================
   6. Chips & badges
   ============================================================= */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--bg-elev-2);
    color: var(--ink-2);
    border: 1px solid var(--line);
}
.chip-mint   { background: var(--mint-dim); color: var(--mint-deep); border-color: var(--mint-line); }
.chip-yellow { background: var(--yellow-dim); color: var(--yellow); border-color: rgba(181,132,0,0.32); }
.chip-red    { background: var(--red-dim); color: var(--red); border-color: rgba(220,63,63,0.32); }
.chip-live   { background: var(--red); color: #fff; border-color: transparent; }
.chip-live::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff; animation: pulse 1.2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* =============================================================
   7. Form controls
   ============================================================= */
.form-control, .form-select {
    background: var(--bg-elev);
    border: 1px solid var(--line-mid);
    color: var(--ink);
    border-radius: var(--r-md);
}
.form-control:focus, .form-select:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 4px rgba(26,178,112,0.18);
    color: var(--ink);
    outline: none;
}
.form-control-lg, .form-select-lg { min-height: 52px; }
.form-control::placeholder { color: var(--ink-4); }
.form-label { color: var(--ink-2); font-weight: 500; }

/* Score input (gros chiffre style "DigitPill") */
.score-input {
    width: 56px !important;
    height: 64px !important;
    text-align: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 28px;
    background: var(--bg-elev-2);
    border: 1.5px solid var(--line-mid);
    border-radius: var(--r-md);
    color: var(--ink);
    transition: border-color .15s;
}
.score-input:focus {
    border-color: var(--mint);
    background: var(--mint-dim);
    box-shadow: 0 0 0 4px var(--mint-dim);
    outline: none;
}

/* =============================================================
   8. Tables
   ============================================================= */
.table { color: var(--ink); border-color: var(--line); }
.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--ink);
    border-bottom-color: var(--line);
}
.table thead { color: var(--ink-3); }
.table thead th {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line-mid);
}
.table-hover tbody tr:hover { background: var(--bg-elev-2) !important; }

/* =============================================================
   9. Navbar
   ============================================================= */
.navbar {
    background: var(--bg-elev);
    border-bottom: 1px solid var(--line);
}
.navbar.navbar-dark, .navbar.bg-dark {
    background: var(--bg-elev) !important;
    border-bottom: 1px solid var(--line);
}
.navbar-brand strong {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink) !important;
}
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: var(--ink-2) !important;
}
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--ink) !important;
}
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--mint) !important;
}
.dropdown-menu {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
}
.dropdown-item { color: var(--ink); }
.dropdown-item:hover { background: var(--bg-elev-2); color: var(--ink); }

/* =============================================================
   10. Alerts (rester subtil, plus moderne)
   ============================================================= */
.alert {
    border-radius: var(--r-md);
    border-width: 1px;
}
.alert-info {
    background: var(--mint-dim);
    color: var(--mint);
    border-color: var(--mint-line);
}
.alert-warning {
    background: var(--yellow-dim);
    color: var(--yellow);
    border-color: rgba(181,132,0,0.32);
}
.alert-danger {
    background: var(--red-dim);
    color: var(--red);
    border-color: rgba(220,63,63,0.32);
}
.alert-success {
    background: var(--mint-dim);
    color: var(--mint);
    border-color: var(--mint-line);
}

/* =============================================================
   11. Footer
   ============================================================= */
footer.bg-dark {
    background: var(--bg-elev) !important;
    color: var(--ink-3) !important;
    border-top: 1px solid var(--line);
}
footer.bg-dark .text-white-50 { color: var(--ink-3) !important; }

/* =============================================================
   12. Hero (page d'accueil)
   ============================================================= */
.hero-mint {
    background: linear-gradient(180deg, var(--bg) 0%, var(--mint-dim) 100%);
    border-bottom: 1px solid var(--mint-line);
}

/* Hero landing (logged-out, riche en SEO/conversion) */
.hero-landing {
    background: linear-gradient(160deg, #E5F1EA 0%, #F6F6F2 65%);
    padding: 72px 0 56px;
    border-bottom: 1px solid var(--mint-line);
}
.hero-landing-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--ink);
}
.hero-landing-lead {
    font-size: 18px;
    max-width: 560px;
}
.cta-primary {
    box-shadow: var(--glow-mint);
}

/* Mockup match card dans le hero */
.hero-landing-mockup {
    position: relative;
    padding: 16px;
}
.hlm-card {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    box-shadow: var(--shadow-md);
    transform: rotate(-1deg);
    transition: transform .3s;
}
.hlm-card:hover { transform: rotate(0deg) scale(1.02); }
.hlm-league {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.hlm-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}
.hlm-team {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.hlm-score {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 28px;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.hlm-prono {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--line-mid);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.hlm-prono-score {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 22px;
    color: var(--mint-text);
}
.hlm-rank {
    margin-top: 16px;
    padding: 10px 14px;
    background: var(--mint-dim);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: rotate(1deg);
}

/* "Comment ça marche" steps */
.how-step {
    text-align: center;
    padding: 24px 16px;
}
.how-step-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: var(--mint-dim);
    color: var(--mint-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}
.how-step-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}
.how-step-body {
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.5;
    max-width: 280px;
    margin: 0 auto;
}

/* Cards stats avec hierarchie LIVE */
.card-stat-live {
    background: var(--mint-dim) !important;
    border-color: var(--mint-line) !important;
}
.card-stat-live .stat-live-num {
    font-size: 56px;
    line-height: 1;
    color: var(--mint-deep) !important;
}
.stat-num { font-size: 32px; line-height: 1; }
.chip-live {
    background: var(--red);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.08em;
    display: inline-block;
    animation: pulse-live 2s infinite;
}
@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@media (max-width: 575.98px) {
    .hero-landing { padding: 40px 0 32px; }
    .hero-landing-title { font-size: 30px; }
    .hero-landing-lead { font-size: 16px; }
    .card-stat-live .stat-live-num { font-size: 42px; }
    .stat-num { font-size: 26px; }
}

/* =============================================================
   24. Whimsy : confettis pour score exact (CSS pur, pas de lib)
   ============================================================= */
.scoro-confetti-burst {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}
.scoro-confetti-burst .conf {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0.9;
    animation: scoro-conf-fall var(--dur, 2s) cubic-bezier(.55,.05,.45,1) forwards;
    transform-origin: center;
}
@keyframes scoro-conf-fall {
    0%   { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--rot, 360deg)); opacity: 0.6; }
}

/* Mini animation "score exact" sur la prono-card */
.score-exact-burst {
    animation: scoro-pulse-mint 0.6s ease-out;
}

/* =============================================================
   25. Points badge (sidebar, header de la nav)
   ============================================================= */
.scoro-points-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--mint-dim) 0%, rgba(26,178,112,0.04) 100%);
    border: 1px solid var(--mint-line);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--mint-deep);
    font-family: var(--font-mono);
    font-weight: 700;
    transition: all .15s;
}
.scoro-points-badge:hover {
    background: var(--mint-dim);
    color: var(--mint-deep);
    transform: translateY(-1px);
}
.scoro-points-badge i {
    color: var(--mint-deep);
    font-size: 18px;
}
.scoro-points-badge .spb-value {
    font-size: 18px;
    flex-grow: 1;
}
.scoro-points-badge .spb-label {
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
@media (max-width: 991.98px) {
    .scoro-points-badge { margin-bottom: 8px; padding: 8px 12px; }
    .scoro-points-badge .spb-value { font-size: 16px; }
}

/* =============================================================
   26. Monthly ranking banner (paliers + quota free)
   ============================================================= */
.monthly-banner-paliers {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--mint-dim) 0%, rgba(26,178,112,0.04) 100%);
    border: 1px solid var(--mint-line);
    border-radius: var(--r-md);
    flex-wrap: wrap;
}
.monthly-banner-paliers .mp-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-weight: 700;
}
.monthly-banner-paliers .mp-medal { font-size: 22px; }
.monthly-banner-paliers .mp-pts { font-size: 14px; color: var(--mint-deep); }
.monthly-banner-paliers .mp-status {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.monthly-banner-quota {
    margin-top: 8px;
    padding: 12px 16px;
    background: var(--yellow-dim);
    border: 1px solid rgba(181,132,0,0.20);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--ink);
    line-height: 1.5;
}
.monthly-banner-quota i { margin-right: 4px; }
.quota-progress {
    height: 8px;
    background: var(--bg-elev-2);
    border-radius: 4px;
    overflow: hidden;
}
.quota-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--mint-deep) 0%, var(--mint) 100%);
    transition: width .3s;
}

/* =============================================================
   27. Boutique : cartes produits + commandes
   ============================================================= */
.shop-product-card {
    transition: transform .15s, box-shadow .15s;
    overflow: hidden;
}
.shop-product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.shop-product-img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    background: var(--bg-elev-2);
}
.shop-product-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    font-size: 48px;
    background: linear-gradient(135deg, var(--bg-elev-2), var(--bg-elev-3));
}
.order-card { transition: box-shadow .15s; }
.order-product-img {
    width: 80px;
    height: 80px;
    border-radius: var(--r-md);
    object-fit: cover;
    background: var(--bg-elev-2);
    flex-shrink: 0;
}
.order-product-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    font-size: 28px;
}

/* Title-sm pour les sous-titres modaux */
.title-sm {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

/* =============================================================
   28. Admin pages (sobre, fonctionnel)
   ============================================================= */
.admin-stat {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 20px;
    text-align: center;
}
.admin-stat .as-value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 28px;
    color: var(--ink);
}
.admin-stat .as-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-top: 6px;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
}
.admin-table th, .admin-table td {
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
}
.admin-table th {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}

/* Dropzone d'upload local pour image produit (admin) */
.pm-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
    border: 2px dashed var(--mint-line);
    border-radius: var(--r-md);
    background: var(--mint-dim);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .12s;
    margin: 0;
}
.pm-dropzone:hover,
.pm-dropzone.is-dragover {
    border-color: var(--mint);
    background: rgba(26,178,112,0.14);
    transform: translateY(-1px);
}
.pm-dropzone.is-uploading {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

/* =============================================================
   29. Autocomplete adresse (API BAN data.gouv.fr) + save-address toggle
   ============================================================= */
.addr-suggestions {
    position: absolute;
    top: 100%;
    left: var(--bs-gutter-x, 8px);
    right: var(--bs-gutter-x, 8px);
    background: var(--bg-elev);
    border: 1px solid var(--mint-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    z-index: 1080;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 4px;
}
.addr-suggestions .addr-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    color: var(--ink);
    transition: background .1s;
}
.addr-suggestions .addr-item:last-child { border-bottom: none; }
.addr-suggestions .addr-item:hover,
.addr-suggestions .addr-item.is-active {
    background: var(--mint-dim);
    color: var(--ink);
}
.addr-suggestions .addr-item .ai-main {
    font-weight: 600;
    font-size: 14px;
}
.addr-suggestions .addr-item .ai-ctx {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
}
.addr-suggestions .addr-empty {
    padding: 14px;
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
}
.addr-suggestions .addr-spinner {
    padding: 14px;
    text-align: center;
    color: var(--ink-3);
    font-size: 13px;
}

/* "Sauvegarder cette adresse" — toggle visible style card cliquable */
.save-address-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--mint-dim);
    border: 1px solid var(--mint-line);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s;
    margin: 0;
}
.save-address-toggle:hover {
    background: rgba(26,178,112,0.14);
    border-color: var(--mint);
    transform: translateY(-1px);
}
.save-address-toggle input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--mint);
    cursor: pointer;
}
.save-address-toggle .sat-icon {
    font-size: 22px;
    color: var(--mint-deep);
    line-height: 1;
}
.save-address-toggle .sat-text {
    flex: 1;
    line-height: 1.4;
}
.save-address-toggle:has(input:checked) {
    background: rgba(26,178,112,0.18);
    border-color: var(--mint);
}
@keyframes scoro-pulse-mint {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 var(--mint); }
    50%  { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(26,178,112,0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(26,178,112,0); }
}

/* =============================================================
   13. Selection
   ============================================================= */
::selection { background: var(--mint); color: var(--selection-fg); }

/* =============================================================
   14. Avatar placeholder
   ============================================================= */
.avatar, .avatar-placeholder {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    flex-shrink: 0;
}
.avatar-placeholder {
    background: linear-gradient(135deg, var(--mint), var(--mint-bright));
    color: var(--selection-fg);
    font-size: .8rem;
}

/* =============================================================
   15. TEAM BADGE — vrai logo API-Football OU fallback monogramme
   Wrapper qui force la taille pour ne pas afficher l'image en native.
   ============================================================= */
.team-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: transparent;
}
.team-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* Variante fallback (monogramme couleur quand pas de logo) */
.team-badge.is-fallback {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    box-shadow: 0 1px 2px var(--crest-shade), inset 0 1px 0 rgba(255,255,255,0.18);
    user-select: none;
}
/* Sizes : la border-radius = size * 0.18 (un peu plus rond que les Crests carrés) */
.team-badge.size-32 { width: 32px;  height: 32px;  border-radius: 6px; font-size: 11px; }
.team-badge.size-36 { width: 36px;  height: 36px;  border-radius: 7px; font-size: 12px; }
.team-badge.size-48 { width: 48px;  height: 48px;  border-radius: 9px; font-size: 16px; }
.team-badge.size-62 { width: 62px;  height: 62px;  border-radius: 11px; font-size: 21px; }
.team-badge.size-96 { width: 96px;  height: 96px;  border-radius: 18px; font-size: 32px; }

/* =============================================================
   16. MATCHCARD pixel-perfect (handoff ui.jsx MatchCard)
   READ-ONLY : pas de DigitPill ici, on ouvre une modale au clic.
   ============================================================= */
.match-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px 18px 16px 24px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.match-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.match-card.has-prono {
    border-color: var(--mint-line);
}
.match-card .spine {
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
}

/* Header : compbadge + date mono */
.match-card .mc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.match-card .mc-comp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.match-card .mc-comp .comp-square {
    width: 16px; height: 16px;
    border-radius: 3px;
    background: var(--ink);
    color: #fff;
    font-size: 7px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.match-card .mc-date {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
}

/* Body : équipe gauche | centre (vs / prono) | équipe droite */
.match-card .mc-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}
.match-card .mc-team-l {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.match-card .mc-team-r {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
    min-width: 0;
}
.match-card .mc-team-info { min-width: 0; }
.match-card .mc-team-r .mc-team-info { text-align: right; }
.match-card .mc-team-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match-card .mc-team-side {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 2px;
}

/* Centre : vs / TON PRONO */
.match-card .mc-center {
    text-align: center;
    min-width: 70px;
}
.match-card .mc-center .vs {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--ink-4);
    font-weight: 700;
}
.match-card .mc-center .prono-label {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--mint);
    letter-spacing: 0.14em;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.match-card .mc-center .prono-score {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.04em;
    color: var(--mint);
    line-height: 1;
}
.match-card .mc-center .prono-score .sep {
    opacity: 0.5;
    margin: 0 2px;
}

/* Footer cotes : 3 cards égales avec label + cote */
.match-card .mc-odds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 14px;
}
.odd-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    color: var(--ink-2);
    transition: background-color .12s;
}
.odd-card .odd-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.odd-card .odd-val {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.odd-card.is-my-pick {
    background: var(--mint-dim);
    border-color: var(--mint-line);
    color: var(--mint);
}

/* Date group header */
.date-group-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 0 8px;
    margin-top: 20px;
    margin-bottom: 8px;
    scroll-margin-top: 80px;  /* offset pour le scroll-into-view (au cas où sticky header */
}
.date-group-header.is-today {
    border-top: 2px solid var(--mint);
    padding-top: 14px;
}
.date-group-header.is-today .dgh-title {
    color: var(--mint);
}
.date-group-header .dgh-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.date-group-header .dgh-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}

/* =============================================================
   17. PREDICT MODAL (handoff mobile-a.jsx ScreenPredict)
   ============================================================= */
.predict-modal .modal-dialog {
    max-width: 560px;
}
.predict-modal .modal-content {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
}
.predict-modal .modal-header {
    border-bottom: 0;
    padding: 20px 20px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.predict-modal .modal-body {
    padding: 8px 20px 24px;
}
.predict-modal .pm-close,
.predict-modal .pm-share {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color .12s;
}
.predict-modal .pm-close:hover { background: var(--bg-elev-2); }

/* Match identity : grand Crest + nom + FormRow */
.predict-modal .pm-identity {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 8px;
    padding: 14px 0 22px;
}
.predict-modal .pm-team {
    text-align: center;
}
.predict-modal .pm-team .crest { margin: 0 auto; }
.predict-modal .pm-team .pm-team-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    margin-top: 8px;
    color: var(--ink);
}
.predict-modal .pm-team .pm-team-side {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 4px;
    font-weight: 600;
}
.predict-modal .pm-vs {
    text-align: center;
    padding-top: 16px;
}
.predict-modal .pm-vs .vs-label {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink-3);
    letter-spacing: -0.04em;
}
.predict-modal .pm-vs .vs-date {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 8px;
    letter-spacing: 0.08em;
}

/* DigitPicker grand format (handoff mobile-a.jsx DigitPicker) */
.predict-modal .pm-pickers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px 0 14px;
}
.predict-modal .pm-pickers .pm-sep {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--ink-4);
    font-weight: 300;
}
.digit-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.digit-picker .dp-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    padding: 0;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    color: var(--ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.digit-picker .dp-btn:hover { background: var(--bg-elev-2); color: var(--mint); }
.digit-picker .digit-pill {
    width: 104px;
    height: 132px;
    margin: 10px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: var(--bg-elev);
    border: 1.5px solid var(--mint);
    box-shadow: 0 0 0 6px var(--mint-dim);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 84px;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--ink);
}

/* Potential gain bar */
.predict-modal .pm-gain {
    margin: 18px 0;
}
.predict-modal .pm-gain .card {
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.predict-modal .pm-help {
    text-align: center;
    margin-top: 10px;
    font-size: 11px;
    color: var(--ink-3);
}

/* Bouton VALIDER mono full-width */
.btn-validate {
    width: 100%;
    padding: 18px;
    font-size: 15px;
    letter-spacing: 0.04em;
    font-family: var(--font-mono);
    font-weight: 700;
    background: var(--mint);
    color: var(--selection-fg);
    border: none;
    border-radius: var(--r-md);
    transition: background-color .12s;
}
.btn-validate:hover { background: var(--mint-bright); color: var(--selection-fg); }
.btn-validate:disabled { background: var(--ink-3); cursor: not-allowed; }

/* =============================================================
   18b. LAYOUT — Sidebar verticale gauche (style WebSidebar handoff)
   ============================================================= */
.scoro-layout {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}

.scoro-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--bg-elev);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    padding: 20px 14px;
    z-index: 100;
}

.scoro-sidebar-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 10px 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}
.scoro-sidebar-logo a {
    display: inline-flex;
    align-items: center;
}
.scoro-sidebar-logo img {
    height: 28px;
    width: auto;
}

.scoro-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow-y: auto;
}
.ssn-divider {
    height: 1px;
    background: var(--line);
    margin: 10px 8px;
    flex-shrink: 0;
}
.ssn-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--ink-2);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    transition: background-color .12s, color .12s;
    border: 1px solid transparent;
}
.ssn-item i {
    font-size: 17px;
    color: var(--ink-3);
    transition: color .12s;
}
.ssn-item:hover {
    background: var(--bg-elev-2);
    color: var(--ink);
}
.ssn-item:hover i { color: var(--ink); }
.ssn-item.active {
    background: var(--mint-dim);
    color: var(--mint);
    border-color: var(--mint-line);
}
.ssn-item.active i { color: var(--mint); }

.scoro-sidebar-footer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.ssf-user {
    width: 100%;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    color: var(--ink);
    transition: background-color .12s;
}
.ssf-user:hover { background: var(--bg-elev-2); }
.ssf-user::after { display: none; }
.ssf-user-info {
    min-width: 0;
    flex: 1;
}
.ssf-user-pseudo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.1;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ssf-user-email {
    font-size: 11px;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* Main content : décalé de la largeur de la sidebar */
.scoro-main {
    margin-left: 240px;
    flex: 1;
    min-width: 0;
    background: var(--bg);
}

/* Burger mobile (caché en desktop) */
.scoro-burger {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1100;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scoro-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 99;
}

/* Mobile : sidebar en off-canvas */
@media (max-width: 991.98px) {
    .scoro-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: var(--shadow-md);
    }
    .scoro-sidebar.open {
        transform: translateX(0);
    }
    .scoro-main {
        margin-left: 0;
        padding-top: 60px; /* place pour le burger */
    }
    .scoro-sidebar-overlay.show {
        display: block;
    }
}

/* =============================================================
   18b1. DATE TABS — bandeau horizontal jours (style livescore)
   ============================================================= */
.date-tabs-wrap {
    position: relative;
    margin-bottom: 14px;
}
.date-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 4px 12px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.date-tabs::-webkit-scrollbar { display: none; }

.date-tab {
    flex-shrink: 0;
    min-width: 68px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    text-align: center;
    cursor: pointer;
    font-family: var(--font-body);
    color: var(--ink-2);
    transition: background-color .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s;
    user-select: none;
}
.date-tab:hover {
    background: var(--bg-elev-2);
    border-color: var(--line-strong);
    color: var(--ink);
    transform: translateY(-1px);
}
.date-tab.active {
    background: var(--mint);
    color: var(--selection-fg);
    border-color: var(--mint);
    box-shadow: 0 6px 18px rgba(26, 178, 112, 0.28);
}
.date-tab.is-today:not(.active) {
    border-color: var(--mint-line);
    color: var(--mint);
}
.date-tab .dt-day {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.85;
}
.date-tab .dt-num {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    margin-top: 2px;
    line-height: 1;
}
.date-tab .dt-mon {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 2px;
    letter-spacing: 0.08em;
}

/* Boutons de scroll prev/next sur desktop */
.date-tabs-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    color: var(--ink-2);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: var(--shadow-sm);
    transition: background-color .12s;
}
.date-tabs-scroll-btn:hover { background: var(--mint-dim); color: var(--mint); }
.date-tabs-scroll-btn.prev { left: -6px; }
.date-tabs-scroll-btn.next { right: -6px; }
@media (min-width: 768px) {
    .date-tabs-wrap:hover .date-tabs-scroll-btn { display: flex; }
}

/* =============================================================
   18c. FILTRES MODERNES (filter-bar) — design premium
   Layout horizontal, focus mint, séparateurs subtils, icônes inline
   ============================================================= */
.filter-bar {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 6px;
    display: flex;
    align-items: stretch;
    gap: 4px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s, border-color .15s;
}
.filter-bar:focus-within {
    border-color: var(--mint-line);
    box-shadow: var(--glow-mint);
}
.filter-bar .fb-item {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    transition: background-color .12s;
    min-width: 0;
}
.filter-bar .fb-item + .fb-item {
    border-left: 1px solid var(--line);
}
.filter-bar .fb-item:focus-within {
    background: var(--bg-elev-2);
    border-left-color: transparent;
}
.filter-bar .fb-icon {
    color: var(--ink-3);
    font-size: 16px;
    flex-shrink: 0;
    transition: color .12s;
}
.filter-bar .fb-item:focus-within .fb-icon { color: var(--mint); }
.filter-bar .fb-content { flex: 1; min-width: 0; }
.filter-bar .fb-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    margin-bottom: 2px;
}
.filter-bar .fb-input,
.filter-bar .fb-select {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    padding: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
}
.filter-bar .fb-input::placeholder { color: var(--ink-4); font-weight: 400; }
.filter-bar .fb-input { cursor: text; }
.filter-bar .fb-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237A828B' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 18px;
}
.filter-bar .fb-select:disabled {
    color: var(--ink-4);
    cursor: not-allowed;
}
.filter-bar .fb-cta {
    background: var(--ink);
    color: var(--bg-elev);
    border: none;
    border-radius: var(--r-md);
    padding: 0 18px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color .15s;
    flex-shrink: 0;
}
.filter-bar .fb-cta:hover { background: var(--mint); color: var(--selection-fg); }
.filter-bar .fb-cta.is-ghost { background: var(--bg-elev-2); color: var(--ink-2); }
.filter-bar .fb-cta.is-ghost:hover { background: var(--mint-dim); color: var(--mint); }

/* Étoile favoris compact dans la filter-bar */
.filter-bar .fb-cta.fb-fav {
    width: 36px; padding: 0;
    background: var(--bg-elev-2);
    color: var(--ink-3);
    font-size: 16px;
}
.filter-bar .fb-cta.fb-fav.is-active {
    background: var(--mint);
    color: var(--selection-fg);
}
.filter-bar .fb-cta.fb-fav i { font-size: 16px; }

/* Mini-drapeau dans les chips favoris */
.chip-flag {
    width: 18px; height: 12px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
    margin-right: 4px;
}

/* Modale Gérer mes favoris */
.fm-tabs { gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.fm-tabs .nav-link {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--ink-3);
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    display: inline-flex; align-items: center; gap: 6px;
}
.fm-tabs .nav-link.active {
    background: var(--mint);
    color: var(--selection-fg);
    border-color: var(--mint);
}
.fm-list {
    max-height: 380px;
    overflow-y: auto;
}
.fm-row {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 6px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    transition: background-color .12s;
}
.fm-row:hover { background: var(--bg-elev-2); }
.fm-row.is-fav { background: var(--mint-dim); }
.fm-logo { width: 20px; height: 20px; object-fit: contain; }
.fm-icon { font-size: 18px; color: var(--ink-3); }
.fm-label { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-toggle {
    background: none; border: none;
    color: var(--ink-3); font-size: 18px;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: color .12s, background .12s;
}
.fm-toggle:hover { background: var(--bg-elev-2); }
.fm-toggle.is-on { color: var(--yellow); }
@media (max-width: 991.98px) {
    .fm-list { max-height: none !important; overflow-y: visible !important; }
}

/* Active filter chips au-dessus de la bar */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    min-height: 0;
}
.filter-chip-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--mint-dim);
    border: 1px solid var(--mint-line);
    color: var(--mint);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.filter-chip-active .fca-label {
    font-family: var(--font-mono);
    font-size: 9px;
    opacity: 0.7;
    margin-right: 2px;
    text-transform: uppercase;
}
.filter-chip-active button {
    background: none;
    border: none;
    color: var(--mint);
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity .12s;
    display: flex;
    align-items: center;
}
.filter-chip-active button:hover { opacity: 1; }

@media (max-width: 767.98px) {
    .filter-bar { flex-direction: column; padding: 8px; }
    .filter-bar .fb-item + .fb-item { border-left: none; border-top: 1px solid var(--line); }
}

/* =============================================================
   19. LEADERBOARD : podium + LeaderRow (handoff mobile-b.jsx)
   ============================================================= */
.podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: end;
    gap: 12px;
    padding: 10px 0 4px;
}
.podium-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.podium-col.is-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: var(--r-md);
    transition: background-color .15s, transform .15s;
    padding: 6px 4px;
}
.podium-col.is-link:hover {
    background: var(--bg-elev-2);
    transform: translateY(-2px);
    color: inherit;
}
.podium-pie {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.podium-pie svg { display: block; }
.podium-avatar {
    width: calc(var(--size) + 8px);
    height: calc(var(--size) + 8px);
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg, var(--ring), color-mix(in srgb, var(--ring) 60%, transparent));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.podium-avatar > * {
    border: 2px solid var(--bg-elev);
}
.podium-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    color: var(--ink);
    margin-top: 2px;
    text-align: center;
}
.podium-name.is-me { color: var(--mint); }
.podium-score {
    font-size: 20px;
    margin-bottom: 2px;
}
.podium-pronos {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 6px;
}
.podium-block {
    width: 100%;
    height: var(--h);
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg, var(--bg-from), var(--bg-to));
    border: 1px solid var(--border);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
}
.podium-rank {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}
.podium-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    font-weight: 700;
    margin-top: 6px;
}

/* LeaderRow */
.leader-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    transition: background-color .12s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.leader-row:hover { background: var(--bg-elev-2); }
.leader-row.is-me { background: var(--mint-dim); }
.leader-row, .leader-row:hover, .leader-row:focus { color: inherit; }

/* Mini-pie dans la row (entre meta et score) */
.lr-pie {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: transform .15s ease;
    position: relative;
}
.lr-pie:hover { transform: scale(1.15); }
.lr-pie svg { display: block; }
.lr-pie-empty {
    font-size: 14px; color: var(--ink-4);
}

/* Popover de zoom au hover */
.lr-pie-zoom {
    position: absolute;
    z-index: 9999;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 14px 16px;
    min-width: 270px;
    max-width: 340px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}
.lr-pie-zoom.is-visible { opacity: 1; transform: scale(1); }
.lr-pie-zoom-inner { display: flex; flex-direction: column; gap: 10px; }
.lr-pie-zoom-title {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    padding-bottom: 6px;
}
.lr-pie-zoom-pie { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* Légende compacte du pie */
.scoro-pie-legend {
    display: flex; flex-direction: column; gap: 3px;
    margin-top: 6px;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
}
.scoro-pie-legend .spl-item {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 4px;
}
.scoro-pie-legend .spl-item:hover { background: var(--bg-elev-2); }
.scoro-pie-legend .spl-dot {
    width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}
.scoro-pie-legend .spl-label {
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scoro-pie-legend .spl-val {
    color: var(--ink);
    font-weight: 600;
    font-size: 11px;
}
.scoro-pie-legend .spl-extra {
    color: var(--mint);
    font-size: 11px;
    font-weight: 600;
    min-width: 42px;
    text-align: right;
}

.lr-rank {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--bg-elev-2);
    color: var(--ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}
.lr-rank.is-me {
    background: var(--mint);
    color: var(--selection-fg);
}
.lr-info { flex: 1; min-width: 0; }
.lr-name {
    display: flex;
    align-items: center;
    gap: 6px;
}
.lr-name > span:first-child {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leader-row.is-me .lr-name > span:first-child { color: var(--mint); }
.lr-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--mint);
    background: rgba(26,178,112,0.16);
    padding: 2px 6px;
    border-radius: 4px;
}
.lr-meta {
    display: flex;
    gap: 12px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--ink-3);
}
.lr-score {
    font-size: 18px;
    color: var(--ink);
    text-align: right;
    flex-shrink: 0;
}
.lr-score.is-me { color: var(--mint); }

/* Carte "Ta position" */
.lb-me-card {
    padding: 4px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--mint-dim), transparent);
    border: 1px solid var(--mint-line);
}

/* =============================================================
   21. DASHBOARD / FEED — Featured hero match + mini match cards
   ============================================================= */
.featured-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    border: 1px solid var(--mint-line);
    background: linear-gradient(135deg, var(--bg-elev) 0%, var(--mint-dim) 100%);
    margin-bottom: 24px;
}
.featured-hero-content {
    position: relative;
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}
.featured-info .featured-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
    margin-top: 4px;
}
.featured-info .featured-sub {
    font-size: 13px;
    color: var(--ink-2);
    margin-top: 8px;
}
.featured-score {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}
.featured-score-num {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(48px, 6vw, 72px);
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ink);
}
.featured-score-num .sep {
    color: var(--ink-3);
    margin: 0 12px;
}
.featured-prono {
    padding: 18px;
    border-radius: var(--r-lg);
    background: rgba(26, 178, 112, 0.08);
    border: 1px solid var(--mint-line);
    min-width: 200px;
}
.featured-prono-score {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -0.04em;
    color: var(--mint);
    margin-top: 4px;
}

@media (max-width: 767.98px) {
    .featured-hero-content {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
        padding: 20px;
    }
    .featured-score { flex-wrap: wrap; }
}

/* Mini match card (utilisé sur le dashboard) */
.match-card-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 8px;
    text-decoration: none;
    color: var(--ink);
    transition: background-color .12s, border-color .12s;
}
.match-card-mini:hover {
    background: var(--bg-elev-2);
    border-color: var(--mint-line);
    color: var(--ink);
}
.mc-mini-time {
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 700;
    width: 48px;
    flex-shrink: 0;
}
.mc-mini-name {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mc-mini-tail {
    flex-shrink: 0;
    margin-left: auto;
}

/* =============================================================
   22. AUTH SPLIT-SCREEN (login + register)
   ============================================================= */

/* Mini-header utilisé sur les pages auth (layout=auth dans render_header) */
.auth-mini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 100;
}
.auth-mh-logo { line-height: 0; display: inline-block; }
.auth-mh-logo img { display: block; height: 28px; width: auto; }

.scoro-main-auth {
    padding: 0 !important;
    margin: 0 !important;
    min-height: calc(100vh - 53px);
}

.auth-split {
    min-height: calc(100vh - 53px);
    display: grid;
    grid-template-columns: 42% 58%;
}
.auth-split-hero {
    /* Gradient assombri pour contraste AA sur tagline blanche (vs ancien mint→mint-bright qui donnait 2.5:1) */
    background: linear-gradient(135deg, #0A5C38 0%, #1AB270 100%);
    color: var(--selection-fg);
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.auth-hero-footer { opacity: 1; color: rgba(255,255,255,0.92); }
.auth-benefit { font-size: 14px; font-weight: 500; }
.auth-benefit i { font-size: 16px; flex-shrink: 0; }
.auth-split-hero::before {
    content: '';
    position: absolute;
    inset: -50%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.4), transparent 50%),
        radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,0.3), transparent 50%),
        radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,0.3), transparent 50%),
        radial-gradient(1px 1px at 85% 22%, rgba(255,255,255,0.4), transparent 50%);
    opacity: 0.5;
    pointer-events: none;
}
.auth-split-hero > * { position: relative; z-index: 1; }
.auth-hero-logo {
    display: inline-block;
    background: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    line-height: 0;
}
.auth-hero-logo img {
    height: 32px;
    display: block;
    width: auto;
}
.auth-split-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--selection-fg);
}
.auth-split-hero .tagline {
    font-size: 16px;
    line-height: 1.5;
    opacity: 1;
    color: rgba(255,255,255,0.96);
    max-width: 380px;
}
.auth-split-form {
    background: var(--bg);
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-split-form-inner {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
}
@media (max-width: 767.98px) {
    .auth-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .auth-split-hero {
        padding: 20px 24px 24px;
        min-height: auto;
    }
    .auth-split-hero h1 { font-size: 22px; line-height: 1.15; }
    .auth-split-hero .tagline { display: none; }
    .auth-split-hero .auth-hero-footer { display: none; }
    .auth-split-hero .d-flex.flex-column.gap-2 { display: none; }
    .auth-split-form {
        padding: 24px 24px 32px;
    }
}

/* =============================================================
   23. PROFIL + LIGUES empty state
   ============================================================= */
.empty-state {
    padding: 60px 32px;
    text-align: center;
    border: 2px dashed var(--line-mid);
    border-radius: var(--r-xl);
    background: var(--bg-elev);
}
.empty-state .empty-icon {
    font-size: 56px;
    color: var(--ink-3);
    margin-bottom: 16px;
}
.empty-state h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    color: var(--ink);
    margin-bottom: 8px;
}
.empty-state p {
    color: var(--ink-3);
    max-width: 420px;
    margin: 0 auto 20px;
}

.profil-hero {
    background: linear-gradient(135deg, var(--mint-dim), transparent);
    border: 1px solid var(--mint-line);
    border-radius: var(--r-xl);
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
/* Avatar grand format — fonctionne partout (hero + modal + composer) */
/* Triple-sélecteur pour battre n'importe quelle autre règle, y compris inline style natif d'image */
.avatar-big,
img.avatar-big,
.profil-hero .avatar-big,
.modal-body .avatar-big {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.avatar-big {
    background: linear-gradient(135deg, var(--mint), var(--mint-bright));
    color: var(--selection-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 36px;
}
img.avatar-big {
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    padding: 0 !important;
    background: var(--bg-elev-2);
}
/* Filet final : tout <img> direct dans .profil-hero ou .modal-body est bridé */
.profil-hero > img,
.modal-body .text-center > img {
    max-width: 96px;
    max-height: 96px;
}
.profil-hero h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    letter-spacing: -0.02em;
    margin: 0;
}

/* =============================================================
   18d. TIME FILTER (Tous / Passés / Futurs)
   ============================================================= */
.time-filter {
    display: inline-flex;
    gap: 4px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    box-shadow: var(--shadow-sm);
}
.time-filter .tf-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: none;
    background: transparent;
    color: var(--ink-3);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.time-filter .tf-btn:hover { color: var(--ink); background: var(--bg-elev-2); }
.time-filter .tf-btn.active {
    background: var(--ink);
    color: var(--bg-elev);
}
.time-filter .tf-btn.active i { color: var(--mint); }

/* =============================================================
   23b. NOTIFICATIONS — badge sidebar + notif-row
   ============================================================= */
.ssn-item { position: relative; }
.ssn-notif-badge {
    position: absolute;
    top: 8px;
    right: 12px;
    background: var(--red);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(220,63,63,0.4);
}

.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 8px;
    cursor: pointer;
    position: relative;
    transition: background-color .12s, border-color .12s;
}
.notif-row:hover {
    background: var(--bg-elev-2);
    border-color: var(--mint-line);
}
.notif-row.is-unread {
    background: linear-gradient(90deg, var(--mint-dim), var(--bg-elev) 50%);
    border-color: var(--mint-line);
}
.notif-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}
.notif-line { font-size: 14px; line-height: 1.4; }
.notif-preview {
    font-style: italic;
    padding: 4px 10px;
    background: var(--bg-elev-2);
    border-radius: var(--r-sm);
    border-left: 3px solid var(--line-mid);
}
.notif-time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
}
.notif-dot {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 3px var(--mint-dim);
}

/* =============================================================
   25. SEARCH SIDEBAR + GROUPES + MESSENGER
   ============================================================= */
.scoro-search-wrap { position: relative; padding: 0 4px 14px; }
.scoro-search {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .12s, background-color .12s;
}
.scoro-search:focus-within { background: var(--bg-elev); border-color: var(--mint-line); box-shadow: 0 0 0 3px var(--mint-dim); }
.scoro-search i { color: var(--ink-3); }
.scoro-search input { background: transparent; border: none; outline: none; flex: 1; color: var(--ink); font-size: 13px; }
.scoro-search input::placeholder { color: var(--ink-4); }

.scoro-search-results {
    position: absolute;
    top: 100%; left: 4px; right: 4px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    max-height: 380px;
    overflow-y: auto;
    z-index: 50;
    padding: 4px;
}
.ssr-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--ink);
    transition: background-color .12s;
}
.ssr-item:hover { background: var(--bg-elev-2); color: var(--ink); }
.ssr-info { flex: 1; min-width: 0; }
.ssr-name { font-size: 13px; font-weight: 600; }
.ssr-meta { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.ssr-empty { padding: 14px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* Groupes */
.group-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px !important; height: 56px !important;
    border-radius: 14px;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    box-sizing: border-box;
}
.group-avatar.size-big { width: 96px !important; height: 96px !important; border-radius: 22px; font-size: 32px; }
img.group-avatar { object-fit: cover; object-position: center; display: block; padding: 0; }

/* Filet de sécurité : tout <img> dans avatar-placeholder doit cover */
.avatar-placeholder img,
img.avatar-img { object-fit: cover; object-position: center; width: 100%; height: 100%; display: block; border-radius: inherit; }
.group-card { transition: box-shadow .15s; }
.group-card:hover { box-shadow: var(--shadow-md); }

/* Carte groupe : layout flex avec wrap responsive */
.group-card-body {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}
.group-card-body .group-info {
    flex: 1 1 0;
    min-width: 0;
}
.group-card-body .group-info .group-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 600px;
}
.group-card-body .group-action-wrap { flex-shrink: 0; }
.group-card-body .group-action { white-space: nowrap; }

/* Mobile : on resserre l'avatar et on autorise le wrap si vraiment serré */
@media (max-width: 575.98px) {
    .group-card-body { gap: 12px; padding: 12px !important; }
    .group-avatar { width: 44px !important; height: 44px !important; border-radius: 11px; font-size: 14px; }
    .group-card-body .group-info .group-desc { max-width: 100%; }
    .group-card-body .group-action { padding: 4px 10px; font-size: 12px; }
    .group-card-body .group-action .ga-label { display: none; }
    .group-card-body .group-action i { font-size: 16px; margin: 0; }
}

/* Messenger */
.messenger {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    height: calc(100vh - 220px);
    min-height: 480px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
}
.messenger-list {
    border-right: 1px solid var(--line);
    overflow-y: auto;
}
.messenger-chat {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.conv-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    position: relative;
    transition: background-color .12s;
}
.conv-item:hover { background: var(--bg-elev-2); }
.conv-item.active { background: var(--mint-dim); border-left: 3px solid var(--mint); padding-left: 11px; }
.conv-item.has-unread .ci-name { font-weight: 700; }
.conv-item.has-unread .ci-preview { color: var(--ink); font-weight: 600; }
.ci-name { font-size: 13px; color: var(--ink); }
.ci-time { font-size: 10px; color: var(--ink-3); margin-left: 8px; flex-shrink: 0; }
.ci-preview {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ci-badge {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: var(--mint); color: var(--selection-fg);
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 999px;
}

.chat-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-elev);
    font-weight: 600;
}
.chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.msg {
    display: flex; align-items: flex-end; gap: 6px;
    max-width: 80%;
    align-self: flex-start;
}
.msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    padding: 8px 12px;
    border-radius: 14px;
    border-top-left-radius: 4px;
}
.msg.is-mine .msg-bubble {
    background: var(--mint);
    color: var(--selection-fg);
    border-color: var(--mint);
    border-radius: 14px;
    border-top-right-radius: 4px;
}
.msg-pseudo { font-size: 11px; color: var(--mint); font-weight: 700; margin-bottom: 2px; }
.msg-text { font-size: 14px; line-height: 1.4; word-wrap: break-word; }
.msg-time { font-size: 9px; margin-top: 4px; opacity: 0.6; }

.chat-composer {
    display: flex; gap: 6px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: var(--bg-elev);
}
.chat-composer input { flex: 1; }

@media (max-width: 767.98px) {
    /* === Mode mobile WhatsApp ===
       Par défaut: liste seule plein écran.
       Quand une conv est ouverte (.has-active-chat): chat seul plein écran. */
    .messenger {
        grid-template-columns: 1fr;
        height: calc(100dvh - 160px);
        min-height: 0;
        border-radius: var(--r-lg);
        overflow: hidden;
    }
    /* État par défaut : liste visible, chat caché */
    .messenger-list {
        display: block;
        border-right: none;
        max-height: none;
        height: 100%;
        overflow-y: auto;
    }
    .messenger-chat {
        display: none !important;
        height: 100%;
        flex-direction: column;
    }
    /* État "chat ouvert" : liste cachée, chat plein écran */
    .messenger.has-active-chat .messenger-list { display: none; }
    .messenger.has-active-chat .messenger-chat {
        display: flex !important;
    }

    /* Conv items : style WhatsApp avec avatar + info à droite */
    .conv-item {
        gap: 12px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
    }
    .conv-item:last-child { border-bottom: none; }
    .conv-item .ci-name {
        font-size: 15px;
        font-weight: 600;
        color: var(--ink);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .conv-item .ci-time {
        font-size: 11px;
        color: var(--ink-3);
        flex-shrink: 0;
        margin-left: 8px;
    }
    .conv-item .ci-preview {
        font-size: 13px;
        color: var(--ink-3);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        margin-top: 2px;
    }
    .conv-item.active { background: var(--mint-dim); }
    .ligue-chats-section .eyebrow { padding: 12px 14px 6px; margin: 0 !important; }

    /* Header chat mobile : back button + nom centré */
    .chat-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px !important;
        border-bottom: 1px solid var(--line);
        background: var(--bg-elev);
    }
    .chat-back-btn {
        background: transparent;
        border: none;
        padding: 4px 8px;
        cursor: pointer;
        color: var(--mint);
        font-size: 22px;
        flex-shrink: 0;
        margin: -4px 0 -4px -4px;
    }
    .chat-header .chat-title-name {
        font-weight: 600;
        font-size: 15px;
        color: var(--ink);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}

/* Badges sidebar messages */
.ssn-msg-badge {
    position: absolute;
    top: 8px; right: 12px;
    background: var(--mint); color: var(--selection-fg);
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 999px; min-width: 18px;
    text-align: center; line-height: 1.2;
    box-shadow: 0 2px 6px rgba(26,178,112,0.4);
}

/* Bouton message dans page user */
.nc-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    margin-bottom: 4px;
    transition: background-color .12s, border-color .12s;
    color: var(--ink);
    text-decoration: none;
}
.nc-item:hover { background: var(--bg-elev-2); border-color: var(--mint-line); }

/* =============================================================
   24. FEED — composer, post-card, embed match, comments
   ============================================================= */
.composer-card { background: var(--bg-elev); border: 1px solid var(--line); }
.composer-input {
    background: transparent;
    border: none;
    resize: none;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    padding: 0;
    outline: none;
    width: 100%;
}
.composer-input:focus { outline: none; box-shadow: none; }

.composer-attached-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--mint-dim);
    border: 1px solid var(--mint-line);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--ink);
    flex-wrap: wrap;
}
.composer-attached-card .btn-attached-remove {
    background: none;
    border: none;
    color: var(--ink-3);
    padding: 0 4px;
    margin-left: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.composer-attached-card .btn-attached-remove:hover { color: var(--red); }

/* Post card */
.post-card {
    transition: box-shadow .15s;
}
.post-card:hover { box-shadow: var(--shadow-md); }
.post-content {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    word-wrap: break-word;
}
.post-actions {
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}
.post-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.post-btn:hover { background: var(--bg-elev-2); color: var(--ink); }
.post-btn.is-liked { color: var(--red); }
.post-btn.is-liked:hover { background: var(--red-dim); }

/* Media grid (images/vidéos d'un post) */
.media-grid {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    border-radius: var(--r-md);
    overflow: hidden;
    position: relative;
}
.media-grid.mg-1 { grid-template-columns: 1fr; }
.media-grid.mg-2 { grid-template-columns: 1fr 1fr; }
.media-grid.mg-3 { grid-template-columns: 1fr 1fr; }
.media-grid.mg-3 .media-item:first-child { grid-row: span 2; }
.media-grid.mg-4 { grid-template-columns: 1fr 1fr; }
.media-item {
    background: var(--bg-elev-2);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    position: relative;
}
.media-grid.mg-1 .media-item { aspect-ratio: 16 / 10; max-height: 480px; }
.media-item img, .media-item video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}
.media-more {
    position: absolute;
    bottom: 4px; right: 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-weight: 700;
}

/* Composer media preview */
.composer-media-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.composer-media-item {
    width: 80px; height: 80px;
    border-radius: var(--r-sm);
    overflow: hidden;
    position: relative;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
}
.composer-media-item img, .composer-media-item video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.composer-media-item .cm-remove {
    position: absolute;
    top: 2px; right: 2px;
    width: 22px; height: 22px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 12px;
}
.composer-media-item .cm-remove:hover { background: var(--red); }

/* Post menu dropdown */
.post-menu .dropdown-toggle-no-arrow::after { display: none; }
.post-menu .dropdown-menu i { color: var(--ink-3); margin-right: 6px; }

/* Report reasons */
.report-reason {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.report-reason:hover { background: var(--bg-elev-2); border-color: var(--line-strong); }
.report-reason input { accent-color: var(--mint); margin-right: 4px; }
.report-reason i { color: var(--ink-3); }
.report-reason input:checked ~ i,
.report-reason:has(input:checked) {
    color: var(--mint);
}
.report-reason:has(input:checked) {
    background: var(--mint-dim);
    border-color: var(--mint-line);
    color: var(--mint);
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 40px;
}
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close {
    position: absolute;
    top: 20px; right: 30px;
    background: none;
    border: none;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

/* Reactions */
.post-btn.btn-react.is-disliked { color: var(--ink-2); }
.post-btn.btn-react.is-disliked:hover { background: var(--bg-elev-3); color: var(--ink); }

/* Post embed match */
.post-embed {
    display: block;
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--bg-elev-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--ink);
    transition: border-color .12s, background-color .12s;
}
.post-embed:hover {
    background: var(--bg-elev);
    border-color: var(--mint-line);
    color: var(--ink);
}
.post-embed .pe-league {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.post-embed .pe-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}
.post-embed .pe-team {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    min-width: 0;
}
.post-embed .pe-team span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-embed .pe-score {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--ink-3);
}
.post-embed .pe-score.is-ft { color: var(--ink); }

/* Attach modal */
.attach-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
    margin-bottom: 6px;
    transition: border-color .12s, background-color .12s;
    font-family: var(--font-body);
    font-size: 13px;
}
.attach-item:hover {
    background: var(--bg-elev-2);
    border-color: var(--mint-line);
    color: var(--ink);
}

/* Comments modal */
.comment-row {
    display: flex;
    gap: 10px;
    padding: 10px 0;
}
.comment-row + .comment-row { border-top: 1px solid var(--line); }
.comment-content {
    color: var(--ink);
    line-height: 1.45;
    word-wrap: break-word;
}
.btn-reply {
    background: none;
    border: none;
    color: var(--mint);
    padding: 0;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-reply:hover { text-decoration: underline; }

/* Thread de réponses indenté (récursif, cap visuel à 4 niveaux) */
.reply-thread {
    margin-left: 28px;
    padding-left: 12px;
    border-left: 2px solid var(--line-mid);
}
.reply-thread .comment-row { padding: 8px 0; }
.reply-thread .comment-row + .comment-row { border-top: 1px solid var(--line); }
/* À partir du niveau 4 : on garde l'effet d'imbrication mais avec un indent réduit
   pour éviter que ça déborde sur la droite. */
.reply-thread .reply-thread .reply-thread .reply-thread {
    margin-left: 14px;
    padding-left: 10px;
}
.reply-thread .reply-thread .reply-thread .reply-thread .reply-thread {
    margin-left: 8px;
    padding-left: 8px;
}

/* Hover sur counter social (profile user) */
.social-counter:hover {
    background: var(--bg-elev-2);
    border-color: var(--mint-line);
}

/* =============================================================
   20. SCOREDISK (cercle SVG note /10)
   ============================================================= */
.score-disk {
    position: relative;
    flex-shrink: 0;
}
.score-disk svg { transform: rotate(-90deg); }
.score-disk .sd-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.score-disk .sd-val {
    font-family: var(--font-mono);
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}
.score-disk .sd-sub {
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.08em;
    margin-top: 2px;
}

/* =============================================================
   16. Spinner + small utils
   ============================================================= */
.spinner-border { color: var(--mint); }
.text-muted { color: var(--ink-3) !important; }
hr { border-color: var(--line); opacity: 1; }
code { color: var(--mint); background: var(--mint-dim); padding: 1px 6px; border-radius: var(--r-xs); }

/* =============================================================
   17. Bordure ligne (utils)
   ============================================================= */
.border, .border-bottom, .border-top, .border-start, .border-end {
    border-color: var(--line) !important;
}

/* =============================================================
   19. Segment switcher (Global / Mini-ligues sur /classement)
   ============================================================= */
.lb-segment {
    display: inline-flex;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 4px;
    gap: 2px;
    box-shadow: var(--shadow-sm);
}
.lb-seg-btn {
    background: transparent;
    border: none;
    color: var(--ink-3);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.lb-seg-btn:hover { color: var(--ink); background: var(--bg-elev-2); }
.lb-seg-btn.is-active {
    background: var(--mint);
    color: var(--selection-fg);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.lb-seg-btn.is-active:hover { background: var(--mint); color: var(--selection-fg); }
.lb-seg-btn i { font-size: 14px; }

/* =============================================================
   20. Country breakdown (camembert sur /user)
   ============================================================= */
.country-breakdown {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: center;
}
.country-breakdown .cb-pie-wrap { display: flex; justify-content: center; }
.country-breakdown .cb-legend-wrap {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}
.cb-row {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
    transition: background-color .12s;
}
.cb-row:hover { background: var(--bg-elev-2); }
.cb-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cb-country { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-pronos { color: var(--ink-3); font-size: 11px; }
@media (max-width: 600px) {
    .country-breakdown { grid-template-columns: 1fr; }
    .country-breakdown .cb-legend-wrap { max-height: none; }
}

/* Member rows sur /ligue */
.member-row { transition: background-color .12s; }
.member-row:last-child { border-bottom: none !important; }
.member-row:hover { background: var(--bg-elev-2); }

/* Leader-row cliquable (clic ouvre détail membre) */
.leader-row-clickable { cursor: pointer; }

/* Modal Stats match : rang + avatar + pseudo + prono + note */
.ms-list { display: flex; flex-direction: column; }
.ms-row {
    display: grid;
    grid-template-columns: 36px 32px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: background-color .12s;
}
.ms-row:last-child { border-bottom: none; }
.ms-row:hover { background: var(--bg-elev-2); color: inherit; }
.ms-row.is-me { background: var(--mint-dim); }
.ms-rank {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-elev-2);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-weight: 700; font-size: 12px;
}
.ms-rank-none { color: var(--ink-4); background: transparent; }
.ms-info { min-width: 0; }
.ms-name { font-weight: 600; color: var(--ink); }
.ms-prono { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

/* Modal Member pronos : ligne récap match + prono + note */
.mp-summary {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.mp-list { display: flex; flex-direction: column; }
.mp-row {
    display: grid;
    grid-template-columns: 50px 100px 1fr 100px auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: background-color .12s;
}
.mp-row:last-child { border-bottom: none; }
.mp-row:hover { background: var(--bg-elev-2); color: inherit; }
.mp-date { font-size: 11px; color: var(--ink-3); }
.mp-league {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.mp-teams {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    overflow: hidden;
    min-width: 0;
}
.mp-team {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
    color: var(--ink);
}
.mp-score { color: var(--ink); font-weight: 700; padding: 0 4px; }
.mp-prono {
    color: var(--mint); font-size: 11px;
    text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 700px) {
    .mp-row { grid-template-columns: 1fr auto; gap: 4px; }
    .mp-date, .mp-league, .mp-prono { font-size: 10px; }
    .mp-teams { font-size: 11px; }
}

/* =============================================================
   Chat WhatsApp-like pour /ligue (discussion linéaire avec replies)
   ============================================================= */
.chat-thread {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px 10px;
    height: clamp(220px, calc(100vh - 320px), 600px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* === Panel Discussion : layout WhatsApp ===
   Le panel prend TOUTE la hauteur restante du viewport.
   À l'intérieur : thread scrollable (flex:1) + composer fixe en bas. */
.lig-panel[data-panel="discussion"] {
    display: flex !important;
    flex-direction: column;
    /* 100dvh = viewport dynamique ; on soustrait la hauteur de tout ce qui est
       au-dessus (hero + barre d'onglets + subhead + marges container). */
    height: calc(100dvh - 200px);
    min-height: 320px;
    overflow: hidden;  /* le scroll se fait DANS le thread, pas sur le panel */
}
.lig-panel[data-panel="discussion"].d-none { display: none !important; }

/* Thread = la zone scrollable, occupe tout l'espace dispo */
.lig-panel[data-panel="discussion"] .chat-thread {
    flex: 1 1 0;
    min-height: 0;       /* CRITIQUE pour que flex:1 fonctionne dans un flex column */
    max-height: none !important;
    height: auto !important;
    overflow-y: auto;
    justify-content: flex-end;
}

/* Composer = hauteur naturelle, ne se rétrécit jamais */
.lig-panel[data-panel="discussion"] .chat-composer {
    flex: 0 0 auto;
    margin-top: 8px;
}

@media (max-width: 991.98px) {
    .lig-panel[data-panel="discussion"] {
        height: calc(100dvh - 170px);
    }
}
@media (max-width: 600px) {
    .lig-panel[data-panel="discussion"] {
        height: calc(100dvh - 150px);
        min-height: 300px;
    }
}
.chat-msg {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 85%;
}
.chat-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg-avatar { flex-shrink: 0; text-decoration: none; }
.chat-msg-bubble {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px 12px 6px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    min-width: 60px;
    max-width: 100%;
}
.chat-msg.is-mine .chat-msg-bubble {
    background: var(--mint-dim);
    border-color: var(--mint-line);
}
.chat-msg-pseudo {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 2px;
    line-height: 1;
}
.chat-reply-ref {
    display: block;
    background: rgba(0,0,0,0.04);
    border-left: 3px solid var(--mint);
    border-radius: 4px;
    padding: 4px 8px;
    margin-bottom: 6px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color .12s;
}
.chat-reply-ref:hover { background: rgba(0,0,0,0.08); }
.chat-reply-ref .crr-pseudo {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--mint);
    line-height: 1.2;
}
.chat-reply-ref .crr-content {
    display: block;
    font-size: 11px;
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-msg-content {
    font-size: 14px;
    color: var(--ink);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.chat-msg-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    justify-content: flex-end;
}
.chat-msg-time {
    font-size: 10px;
    color: var(--ink-3);
}
.chat-act {
    background: none;
    border: none;
    color: var(--ink-3);
    font-size: 11px;
    padding: 2px 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s, color .12s;
    border-radius: 4px;
}
.chat-msg:hover .chat-act { opacity: 1; }
.chat-act:hover { color: var(--mint); background: rgba(0,0,0,0.04); }
.chat-act.text-danger:hover { color: var(--red) !important; }
.chat-msg-highlight .chat-msg-bubble {
    box-shadow: 0 0 0 3px var(--mint);
    animation: chat-pulse 1.4s ease;
}
@keyframes chat-pulse {
    0%   { box-shadow: 0 0 0 3px var(--mint); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Composer */
.chat-reply-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mint-dim);
    border: 1px solid var(--mint-line);
    border-radius: var(--r-md);
    padding: 6px 10px;
    margin-top: 8px;
}
.chat-reply-banner .chat-reply-quote {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.chat-reply-banner .chat-reply-quote span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btn-close-reply {
    background: none; border: none;
    color: var(--ink-3); cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.btn-close-reply:hover { background: rgba(0,0,0,0.06); color: var(--ink); }

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 8px;
}
.chat-composer textarea {
    flex: 1;
    resize: none;
    min-height: 42px;
    max-height: 120px;
    border-radius: 21px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    font-size: 14px;
    line-height: 1.4;
}
.chat-composer textarea:focus {
    border-color: var(--mint-line);
    outline: none;
    box-shadow: 0 0 0 2px var(--mint-dim);
}
.chat-send-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}
.chat-send-btn:disabled { opacity: 0.4; }

/* Bouton "Voir stats" sous la card-match dans /ligue */
.ligue-match-wrap .ligue-match-actions {
    margin-top: -6px;
    margin-bottom: 10px;
    text-align: right;
    padding-right: 8px;
}
.ligue-match-wrap .ligue-match-stats {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
}

/* =============================================================
   21. Picker matchs (création ligue + ajout ligue)
   ============================================================= */
.btn-xs {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--r-sm);
}

.picker-filters {
    display: grid;
    grid-template-columns: 1fr 1fr 140px;
    gap: 6px;
}
.picker-filters .form-control { font-size: 13px; }
@media (max-width: 600px) {
    .picker-filters { grid-template-columns: 1fr; }
}

.picker-list {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-elev);
}
/* Sur mobile : un SEUL scroll = celui du modal-body, pas de scroll interne */
@media (max-width: 991.98px) {
    .picker-list {
        max-height: none !important;
        overflow-y: visible !important;
    }
}
.picker-group { border-bottom: 1px solid var(--line); }
.picker-group:last-child { border-bottom: none; }
.picker-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-elev-2);
    font-size: 11px;
    color: var(--ink-3);
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--line);
}
.picker-group-head .pg-flag,
.picker-group-head .pg-logo {
    width: 16px; height: 16px; object-fit: contain; border-radius: 2px;
    background: #fff;
    padding: 1px;
}
.picker-group-head .pg-country { color: var(--ink); font-weight: 600; }
.picker-group-head .pg-sep { color: var(--ink-4); }
.picker-group-head .pg-league { color: var(--ink-2); }

/* Logo de ligue dans les match-cards (header) */
.match-card .mc-comp .comp-logo {
    width: 16px; height: 16px;
    object-fit: contain;
    border-radius: 2px;
    background: #fff;
    padding: 1px;
    flex-shrink: 0;
}
.picker-group-head .pg-count { margin-left: auto; color: var(--ink-3); font-size: 10px; }

.picker-match {
    display: grid;
    grid-template-columns: 20px 70px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    transition: background-color .12s;
    margin: 0;
}
.picker-match:last-child { border-bottom: none; }
.picker-match:hover { background: var(--bg-elev-2); }
.picker-match.is-checked { background: var(--mint-dim); }
.picker-match.is-disabled { opacity: 0.55; cursor: not-allowed; }
.picker-match input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--mint);
    cursor: inherit;
}
.picker-match .pm-date { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.picker-match .pm-teams {
    display: flex; align-items: center; gap: 6px;
    min-width: 0;
    font-size: 13px;
    color: var(--ink);
}
/* .pm-logo / .pm-name / .pm-vs / .pm-date : globaux pour fonctionner partout (picker + scope-row + rule-row) */
.pm-logo {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain;
    flex-shrink: 0;
    display: inline-block;
}
.picker-match .pm-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.picker-match .pm-vs {
    font-size: 10px; color: var(--ink-3); font-weight: 600;
    padding: 0 4px;
}

/* =============================================================
   22. Scope rows (matchs de la ligue affichés sur /ligue?id=X)
   ============================================================= */
.scope-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    transition: background-color .12s;
}
.scope-row:last-child { border-bottom: none; }
.scope-row:hover { background: var(--bg-elev-2); }
.scope-row-main {
    flex: 1;
    display: grid;
    grid-template-columns: 85px 130px 1fr auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    color: inherit;
}
.scope-row .sr-date { font-size: 11px; color: var(--ink-3); white-space: nowrap; font-family: var(--font-mono); }
.scope-row .sr-league {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--ink-2);
    overflow: hidden;
    min-width: 0;
}
.scope-row .sr-league > span:last-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.scope-row .sr-teams {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px;
    overflow: hidden;
    min-width: 0;
}
.scope-row .sr-teams .pm-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.scope-row .sr-teams .pm-vs {
    font-size: 10px; color: var(--ink-3); font-weight: 600;
    padding: 0 4px; flex-shrink: 0;
}
@media (max-width: 700px) {
    .scope-row-main { grid-template-columns: 70px 1fr auto; gap: 6px; }
    .scope-row .sr-league { display: none; }
    .scope-row .sr-date { font-size: 10px; }
}

/* Bloc règle dynamique (au-dessus des scope-rows) */
.scope-rules-block { margin-bottom: 4px; }
.rule-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--mint-dim);
    border: 1px solid var(--mint-line);
    border-radius: var(--r-md);
    margin: 4px;
}
.rule-row .rr-logo {
    width: 14px !important; height: 14px !important;
    max-width: 14px !important; max-height: 14px !important;
    object-fit: contain;
    flex-shrink: 0;
}
.rule-row .rr-icon { font-size: 14px; color: var(--mint); flex-shrink: 0; }
.rule-row .rr-info { flex-grow: 1; min-width: 0; }
.rule-row .rr-title {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rule-row .rr-title .chip { font-size: 9px; }
.rule-row .rr-sub {
    font-size: 11px; color: var(--ink-3);
    font-family: var(--font-mono);
    margin-top: 2px;
}

/* =============================================================
   Ligue hero — layout ultra-compact : avatar + libellés sur 1 ligne,
   actions + code dans une colonne à droite
   ============================================================= */
.ligue-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    flex-wrap: nowrap;
}
.ligue-hero .lh-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.ligue-hero .group-avatar.size-big {
    width: 48px !important; height: 48px !important;
    font-size: 16px; border-radius: 12px;
    flex-shrink: 0;
}
.ligue-hero .lh-info { min-width: 0; flex: 1; }
.ligue-hero .lh-text {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
}
.ligue-hero .lh-eyebrow {
    margin: 0; padding: 0;
    font-size: 9px; letter-spacing: 0.14em;
    line-height: 1.2;
}
.ligue-hero .lh-sep { color: var(--ink-4); line-height: 1; }
.ligue-hero .lh-info h1 {
    font-size: 18px;
    line-height: 1.15;
    margin: 0;
    font-weight: 700;
}
.ligue-hero .lh-counts { white-space: nowrap; font-size: 11px; }
.ligue-hero .lh-desc {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: var(--ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ligue-hero .lh-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.ligue-hero .ligue-hero-actions {
    display: flex;
    gap: 4px;
}
.ligue-hero .ligue-hero-actions .hero-act {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
}
.ligue-hero .ligue-hero-actions .hero-act i { font-size: 13px; }
.ligue-hero .lh-code {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 2px 1px 8px;
    background: rgba(255,255,255,0.65);
    border: 1px solid var(--mint-line);
    border-radius: 999px;
}
.ligue-hero .lh-code .btn-xs { padding: 0 4px; font-size: 10px; }

/* Back-bar alignée au burger sur mobile */
.ligue-back-bar { display: flex; align-items: center; margin-bottom: 8px !important; }
.ligue-back-bar .btn { padding: 4px 12px; }
/* Desktop : container compact en haut */
.ligue-page { padding-top: 12px !important; padding-bottom: 16px !important; }
@media (max-width: 991.98px) {
    .ligue-page {
        padding-top: 0 !important;
        padding-bottom: 16px !important;
        margin-top: 0 !important;
    }
    .ligue-page > *:first-child,
    .ligue-page .ligue-back-bar,
    .ligue-page #ligue-hero,
    .ligue-page .profil-hero.ligue-hero {
        margin-top: 0 !important;
    }
    .ligue-page .ligue-back-bar { margin-bottom: 0 !important; }
    .ligue-page #ligue-hero { padding-top: 0 !important; }
    /* Back-bar : bouton CARRÉ icon-only collé au burger sur mobile */
    .ligue-back-bar {
        position: fixed;
        top: 14px; left: 60px;       /* 14 + 40 burger + 6 gap = 60 */
        z-index: 1099;
        height: 40px;
        margin: 0 !important;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .ligue-back-bar .ligue-back-btn {
        width: 40px; height: 40px;
        padding: 0 !important;
        background: var(--bg-elev) !important;
        border: 1px solid var(--line) !important;
        border-radius: var(--r-md) !important;
        box-shadow: var(--shadow-sm) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }
    .ligue-back-bar .ligue-back-btn span { display: none !important; }
    .ligue-back-bar .ligue-back-btn i { font-size: 18px; margin: 0 !important; }
}
@media (max-width: 600px) {
    /* Hero ligue : padding-left de 110px (place pour burger + flèche back) */
    .ligue-hero {
        padding: 8px 10px 8px 110px !important;
        gap: 8px;
        position: relative;
        min-height: 52px;
    }
    .ligue-hero .lh-main { gap: 8px; min-width: 0; }
    .ligue-hero .group-avatar.size-big {
        width: 36px !important; height: 36px !important;
        font-size: 11px;
        border-radius: 8px;
    }
    .ligue-hero .lh-text { gap: 4px; flex-direction: row; align-items: baseline; flex-wrap: wrap; }
    .ligue-hero .lh-eyebrow { display: none !important; }
    .ligue-hero .lh-info h1 { font-size: 14px !important; }
    .ligue-hero .lh-counts { font-size: 9px; }
    .ligue-hero .lh-desc { display: none; }
    /* Actions : icônes seules en haut à droite */
    .ligue-hero .ligue-hero-actions .hero-act {
        padding: 5px 7px !important;
        font-size: 11px;
    }
    .ligue-hero .ligue-hero-actions .hero-act i { font-size: 13px; }
    .ligue-hero .ligue-hero-actions .hero-act span { display: none !important; }
    .ligue-hero .lh-code span.mono { font-size: 10px !important; letter-spacing: .1em !important; }
    .ligue-hero .lh-code .btn-xs { padding: 0 4px !important; font-size: 9px !important; }
    .ligue-hero .lh-sep { display: none; }
}

/* =============================================================
   Onglets de section sur /ligue?id=X (Classement / Matchs / Discussion)
   ============================================================= */
.lig-tabs {
    display: flex;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    margin: 16px 0 12px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.lig-tabs::-webkit-scrollbar { display: none; }
.lig-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    white-space: nowrap;
    min-width: 0;
}
.lig-tab:hover { color: var(--ink); background: var(--bg-elev-2); }
.lig-tab.is-active {
    background: var(--mint);
    color: var(--selection-fg);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.lig-tab.is-active:hover { background: var(--mint); color: var(--selection-fg); }
.lig-tab i { font-size: 14px; }
@media (max-width: 480px) {
    .lig-tab { padding: 8px 8px; font-size: 12px; }
    .lig-tab span { font-size: 12px; }
}

/* Sous-libellé contextuel sous les onglets (compteur + actions de l'onglet actif) */
.lig-tab-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 22px;
    padding: 0 6px;
    margin-bottom: 10px;
}
.lig-tab-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: space-between;
}
.lig-tab-sub .btn-xs { flex-shrink: 0; }

.lig-panel {
    animation: lig-panel-in .18s ease;
}
@keyframes lig-panel-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   Accordions de section sur /ligue?id=X (LEGACY — conservé pour compat)
   ============================================================= */
.lig-section {
    margin-top: 18px;
    border: none;
}
.lig-section[open] + .lig-section { margin-top: 18px; }
.lig-section-head {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    user-select: none;
    margin-bottom: 6px;
}
.lig-section-head::-webkit-details-marker { display: none; }
.lig-section-head::marker { display: none; }
.lig-section-title {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lig-section-title .lig-chev {
    font-size: 14px;
    color: var(--ink-3);
    transition: transform .18s ease;
}
.lig-section[open] .lig-section-title .lig-chev {
    transform: rotate(90deg);
    color: var(--mint);
}
.lig-section-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lig-section-body {
    animation: lig-fade-in .2s ease;
}
@keyframes lig-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Wrap pour match-card sur /ligue?id=X (bouton retrait flottant) */
.ligue-match-wrap { position: relative; }
.ligue-match-wrap .match-card { margin-bottom: 10px; }
.ligue-match-wrap .ligue-match-rm {
    position: absolute;
    top: 6px; right: 6px;
    z-index: 2;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 24px; height: 24px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
}
.ligue-match-wrap .ligue-match-rm:hover { background: var(--bg-elev-2); }

/* Boutons disabled : rester clairement VISIBLES (background mint atténué, pas transparent) */
.btn.btn-mint:disabled,
.btn.btn-mint.disabled {
    background: var(--mint) !important;
    color: var(--selection-fg) !important;
    opacity: 0.5;
    cursor: not-allowed;
}
.btn.btn-ghost:disabled,
.btn.btn-ghost.disabled { opacity: 0.45; cursor: not-allowed; }

/* =============================================================
   ★ MOBILE AUDIT — fixes globaux toutes pages (< 992px) ★
   Force des comportements défensifs pour éviter overflow, débordement,
   contenus cachés par burger, etc. sur petits écrans.
   ============================================================= */
@media (max-width: 991.98px) {
    /* 0. ★ TITRE DE PAGE AU NIVEAU DU BURGER ★
       Sur mobile, le burger fixe (top:14, height:40) occupe la zone top-left.
       On force le 1er d-flex à : column + padding-left reservé burger + titre compact. */
    .scoro-main { padding-top: 0 !important; }

    /* Cas 1 : .container > .d-flex first-child (la plupart des pages) */
    .container > .d-flex:first-child {
        padding-left: 56px !important;
        padding-top: 6px !important;
        min-height: 44px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }
    .container > .d-flex:first-child > div:first-child { width: 100%; }
    .container > .d-flex:first-child h1,
    .container > .d-flex:first-child .title-lg {
        font-size: 20px !important;
        line-height: 1.1;
        margin: 0 !important;
    }
    .container > .d-flex:first-child .eyebrow {
        font-size: 9px !important;
        margin-bottom: 1px !important;
    }
    .container > .d-flex:first-child .btn {
        align-self: flex-start;
        max-width: 100%;
    }

    /* Cas 2 : .container > .profil-hero direct (page /profil) */
    .container > .profil-hero:first-child {
        padding-left: 60px !important;
        padding-top: 8px !important;
        padding-right: 12px !important;
        padding-bottom: 14px !important;
    }
    /* Sur /profil, l'avatar (96px) ne tient pas à côté du burger : on l'empile */
    .container > .profil-hero { flex-wrap: wrap; gap: 10px !important; }
    .container > .profil-hero > .avatar-big,
    .container > .profil-hero > img.avatar-big {
        width: 56px !important; height: 56px !important;
        font-size: 22px !important;
    }
    .container > .profil-hero h1 { font-size: 18px !important; line-height: 1.1; }
    .container > .profil-hero .eyebrow { font-size: 9px !important; }

    /* Cas 3 : .container > div:first-child non-flex (mb-2 etc.) */
    .container > div:first-child:not(.d-flex):not(.profil-hero) {
        padding-left: 56px !important;
        min-height: 44px !important;
        padding-top: 8px !important;
    }

    /* Exceptions : pages avec leur propre layout (ligue avec back-bar fixe).
       On force avec une spécificité élevée (classes multiples) car la règle
       générique :first-child:not(.d-flex):not(.profil-hero) a 4 classes de score. */
    .container.ligue-page.ligue-page > div:first-child:not(.d-flex):not(.profil-hero),
    .container.ligue-page.ligue-page > .d-flex:first-child,
    .container.ligue-page > .ligue-back-bar:first-child {
        padding-left: 0 !important;
        padding-top: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
        flex-direction: row !important;
    }
    /* Et explicitement, la back-bar fixe : aucun padding interne du tout */
    .ligue-page .ligue-back-bar.ligue-back-bar {
        padding: 0 !important;
        min-height: 0 !important;
    }
    /* Sur les pages auth (login/register) → pas de burger, pas besoin */
    .auth-split { padding-left: 0 !important; padding-top: 0 !important; min-height: 0 !important; }

    /* 1. Container : padding réduit, full-width */
    .container { padding-left: 12px !important; padding-right: 12px !important; }
    .container.py-4 { padding-top: 6px !important; padding-bottom: 16px !important; }
    .container.py-3 { padding-top: 4px !important; padding-bottom: 16px !important; }
    .container.py-5 { padding-top: 10px !important; padding-bottom: 20px !important; }

    /* 2. Tous les d-flex justify-content-between dans le header :
          forcer flex-wrap pour éviter overflow horizontal */
    .container > .d-flex.justify-content-between { flex-wrap: wrap !important; gap: 8px; }

    /* 3. Titres : tailles réduites pour mobile */
    .container h1, .container .title-lg { font-size: 22px !important; line-height: 1.15; }
    .container h2 { font-size: 18px !important; }

    /* 4. Filter-bar : passe en colonne 1 sur mobile (au lieu de 3 col) */
    .filter-bar {
        flex-wrap: wrap !important;
        padding: 4px !important;
    }
    .filter-bar > .fb-item {
        flex-basis: 100%;
        padding: 8px 10px !important;
    }
    .filter-bar > .fb-item + .fb-item { border-left: none !important; border-top: 1px solid var(--line); }
    .filter-bar > .fb-cta { flex-basis: 100%; padding: 8px !important; justify-content: center; }

    /* 5. Modals : prennent toute la largeur écran */
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }
    .modal-content { border-radius: var(--r-lg) !important; }
    .modal-body { padding: 14px !important; }
    .modal-header { padding: 12px 14px !important; }
    .modal-footer { padding: 10px 14px !important; flex-wrap: wrap; gap: 6px; }

    /* 6. Cards : padding réduit */
    .card-body { padding: 12px !important; }

    /* 7. Boutons larges : ne dépassent jamais la cellule */
    .btn { max-width: 100%; white-space: normal; }
    .btn-group { flex-wrap: wrap; }

    /* 8. Tableaux : scroll horizontal autorisé localement (au lieu du global hidden) */
    .table-responsive, .scoro-table-wrap {
        overflow-x: auto;
        max-width: 100vw;
        -webkit-overflow-scrolling: touch;
    }

    /* 9. Date tabs (style livescore) : padding réduit */
    .date-tabs-wrap { padding: 0 !important; }
    .date-tab { padding: 6px 10px !important; font-size: 12px !important; }

    /* 10. Filter chips actifs : passent en wrap */
    .filter-chips { flex-wrap: wrap; }

    /* 11. Composer / formulaires : labels et inputs full-width */
    .composer-card .composer-input { font-size: 14px !important; }
    .form-control { font-size: 14px; }
    /* Force 16px sur tous les inputs pour empêcher iOS auto-zoom (déjà fait plus haut) */

    /* 12. Sidebar overlay : zindex correct, transition smooth */
    .scoro-sidebar-overlay { z-index: 1099; }
    .scoro-sidebar { z-index: 1100; }

    /* 13. Search bar globale en sidebar : taille réduite */
    .scoro-search input { font-size: 14px !important; }

    /* 14. Empty state : marges réduites */
    .empty-state { padding: 30px 16px !important; }
    .empty-state h2 { font-size: 18px !important; }
    .empty-icon { font-size: 2.2rem !important; }

    /* 15. Notif/Msg badges : ne s'écrasent pas */
    .ssn-notif-badge, .ssn-msg-badge { z-index: 2; }

    /* 16. Burger : un peu plus visible (shadow plus marquée) */
    .scoro-burger { box-shadow: var(--shadow-md) !important; }
    /* Si une modale est ouverte (Bootstrap ajoute body.modal-open), masquer le burger
       pour ne pas chevaucher le titre de la modale */
    body.modal-open .scoro-burger,
    body.modal-open .ligue-back-bar { display: none !important; }

    /* 17. Match-card mobile : compact */
    .match-card { padding: 12px 14px 12px 18px !important; }
    .match-card .mc-team-name { font-size: 13px !important; }
    .match-card .mc-center { min-width: 56px !important; }
    .match-card .mc-comp { font-size: 9px !important; }
    .match-card .mc-date { font-size: 10px !important; }

    /* 18. Predict modal : digits picker tient sur mobile */
    .predict-modal .digit-pill { font-size: 36px !important; }
    .predict-modal .pm-team-name { font-size: 13px !important; }

    /* 19. Page sidebar burger vs back-bar ligue : pas de conflit */
    .ligue-back-bar { z-index: 1098; }

    /* 20. Toutes les images débordantes contenues */
    img, video { max-width: 100%; height: auto; }
}

/* Très petit écran (< 380px / iPhone SE) */
@media (max-width: 380px) {
    .container { padding-left: 10px !important; padding-right: 10px !important; }
    .container h1, .container .title-lg { font-size: 20px !important; }
    .lig-tab { padding: 7px 6px !important; }
    .lig-tab span { font-size: 11px !important; }
    .match-card .mc-team-name { font-size: 12px !important; }
    /* Match detail hero (page /match?id=X) */
    .match-detail-hero { padding: 12px !important; }
    .mdh-title { font-size: 18px !important; margin-top: 8px !important; }
    .mdh-score { font-size: 36px !important; }
    .mdh-vs { font-size: 16px !important; }
    .mdh-team .mdh-team-name { font-size: 13px !important; }
    .mdh-prono-card { min-width: 0 !important; padding: 10px !important; }
    .mdh-prono-card .score { font-size: 28px !important; }
}

/* /match?id=X — hero détaillé : compactage mobile générique */
@media (max-width: 991.98px) {
    .match-detail-hero { padding: 16px !important; }
    .mdh-title { font-size: 22px !important; }
    .mdh-score { font-size: 44px !important; }
    .mdh-vs { font-size: 18px !important; }
    .mdh-team .mdh-team-name { font-size: 15px !important; }
    .mdh-prono-card { min-width: 0 !important; padding: 12px !important; }
    .mdh-prono-card .score { font-size: 32px !important; }
    .mdh-body { gap: 10px !important; margin-top: 14px !important; }
}