/* =======================================================================
   BETLAB.CSS — STYLE GLOBAL POUR LANDING + INSCRIPTION
   ======================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* Cacher le titre WordPress */
h1.entry-title {
    display: none !important;
}

#prematch-app {
    font-family:'Space Grotesk','Inter', system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text','Segoe UI', sans-serif;
    padding:24px;
}

h1, h2, h3, h4, h5 {
    font-family:'Space Grotesk','Inter',system-ui,sans-serif;
}

body, button, input, select, textarea {
    font-family:'Space Grotesk','Inter',system-ui,sans-serif;
}

body.match-view {
    background:linear-gradient(135deg,#020617,#0b132c);
}

/* Focus Match : réduire le padding interne pour coller davantage aux bords */
body.match-view #prematch-app {
    padding-left: 8px;
    padding-right: 8px;
}

body.match-view .focus-panel {
    padding-left: 10px;
    padding-right: 10px;
}

.match-view .site-main,
.match-view #primary,
.match-view #prematch-app {
    background:linear-gradient(135deg,#020617,#0b132c);
    min-height:100vh;
    padding:0 !important;
    margin:0 !important;
}

.match-view .site-main,
.match-view #primary,
.match-view #prematch-app {
    background:linear-gradient(135deg,#020617,#0b132c);
    min-height:100vh;
}

/* -----------------------------------------------------------------------
   LANDING — HEADER
------------------------------------------------------------------------ */

.prematch-shell {
    background:#ffffff;
    position:relative;
    overflow:hidden;
}

/* remove extra overlays to keep a unified background */
.prematch-shell::before,
.prematch-shell::after {
    display:none;
}

.brand-title {
    font-size:24px;
    font-weight:800;
    background:linear-gradient(100deg,#0284c7,#0ea5e9,#38bdf8,#7dd3fc);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 2px 8px rgba(14,165,233,0.35);
    text-decoration:none;
    display:inline-block;
    cursor:pointer;
    font-family:'Space Grotesk','Inter',system-ui,sans-serif;
}

/* Landing — bouton header */
.btn-prematch-premium {
    background:linear-gradient(120deg,#0ea5e9,#38bdf8,#0ea5e9);
    color:#ffffff; /* 👈 texte toujours blanc */
    border:none;
    padding:9px 20px;
    border-radius:999px;
    font-weight:700;
    cursor:pointer;
    font-size:14px;
    transition:background-position 0.6s ease,color 0.2s ease,transform 0.1s ease, box-shadow 0.25s ease;
    background-size:200% 100%;
    box-shadow:0 10px 26px rgba(14,165,233,0.35);
}

.btn-prematch-premium:hover,
.btn-prematch-premium:active {
    background-position:100% 0;
    color:#ffffff; /* 👈 on garde blanc même au survol */
    transform:translateY(-1px);
    box-shadow:0 14px 30px rgba(14,165,233,0.4);
}

.prematch-header {
    padding:10px 0;
}

.hero-block {
    margin-top:30px;
    margin-bottom:24px;
}

.hero-role {
    margin-top:8px;
    font-size:38px;
    font-weight:800;
    color:#0f172a;
    font-family:'Space Grotesk','Inter',system-ui,sans-serif;
}

.hero-role-accent {
    color:#0ea5e9;
    font-style:italic;
    font-weight:800;
    display:inline-block;
    transition:opacity 0.2s ease, transform 0.2s ease;
}



.hero-headline {
    font-size: 1.5rem; /* même taille que la sous-phrase */
    line-height: 1.2;
    font-weight: 800;
    color: #020617; /* texte foncé sur fond clair */
    margin: 0;
    font-family:'Space Grotesk','Inter',system-ui,sans-serif; /* même police que le logo BetLab */
}



.hero-typing {
    position: relative;
    display: inline-block;
    padding-right: 4px;
}

.hero-typing::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    width: 2px;
    height: 1.1em;
    transform: translateY(-50%);
    background: #0ea5e9;
    animation: hero-caret-blink 0.9s step-end infinite;
}

@keyframes hero-caret-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

.hero-subline {
    margin-top: 12px;
    font-size: 1.5rem; /* aligné sur la phrase dynamique */
    line-height: 1.25;
    color: #0f172a;
    font-weight: 700;
    font-family:'Space Grotesk','Inter',system-ui,sans-serif; /* même police que le logo BetLab */
}

/* mot "cotes" barré proprement */
.hero-word--cotes {
    position:relative;
    text-decoration:line-through;
    text-decoration-thickness:2px;
    text-decoration-color:#0ea5e9; /* bleu BetLab */
}

/* mot "stats" surligné façon cercle / gribouillage */
.hero-word--stats {
    position: relative;
    display: inline-block;
    font-weight: 700;
    z-index:1;
}

/* Griffonnage qui entoure le mot */
/* cercle griffonné légèrement plus large */
.hero-word--stats::after {
    content: "";
    position: absolute;

    /* 🔥 élargi + ajusté ici */
    left: -0.55em;       /* avant : -0.35em */
    right: -0.55em;      /* avant : -0.35em */
    top: -0.35em;        /* avant : -0.25em */
    bottom: -0.35em;     /* avant : -0.25em */

    pointer-events: none;
    z-index: -1;

    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;

    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'>\
  <path d='M10 30 C 10 5, 110 5, 110 30 C 110 55, 10 55, 10 30 Z' \
        stroke='%230ea5e9' stroke-width='4' fill='none' \
        stroke-linecap='round' stroke-linejoin='round' />\
  <path d='M14 32 C 14 12, 106 12, 106 32 C 106 50, 14 50, 14 32 Z' \
        stroke='%23038ddd' stroke-width='2' fill='none' \
        stroke-linecap='round' stroke-linejoin='round' />\
</svg>");
}


.hero-stat-accent {
    color: #38bdf8; /* bleu clair BetLab */
    font-weight: 800;
    font-style: italic;
}

.hero-accent-number,
.hero-accent-word {
    color: #0ea5e9;
    font-weight: 800;
    font-style: italic;
}

.hero-accent {
    font-style:italic;
    font-weight:800;
    background:linear-gradient(100deg,#0284c7,#0ea5e9,#38bdf8,#7dd3fc);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* -----------------------------------------------------------------------
   LANDING — DATE PICKER
------------------------------------------------------------------------ */

.date-picker-wrapper {
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    position:relative;
    z-index:2;
}

.date-nav {
    border:none;
    background:#e5e7eb;
    color:#0f172a;
    width:36px;
    height:36px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    transition:background 0.2s ease,color 0.2s ease,transform 0.15s ease;
}
.date-nav:hover:not(:disabled) {
    background:#d1d5db;
}
.date-nav:disabled {
    opacity:0.4;
    cursor:default;
}

#date-selector {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    flex:1;
    padding:6px 8px;
}
#date-selector::-webkit-scrollbar {
    display:none;
}

#match-list {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:12px;
}

/* Bouton de date */
.date-btn {
    border:none;
    padding:8px 10px;
    min-height:40px;
    border-radius:999px;
    background:#e7e9ed;
    color:#4b5563;
    font-size:13px;
    line-height:1.2;
    cursor:pointer;
    font-weight:500;
    transition:background 0.2s ease,color 0.2s ease,transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow:none;
    font-family:'Inter',system-ui,sans-serif;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-width:72px;
}

/* 1ère ligne : Auj / Lun / ... */
.date-btn__day {
    font-style:italic;
    font-weight:600;
    font-size:13px;
    display:block;
    color:#4b5563;
}

/* 2ème ligne : 21 Nov / 22 Nov... → BLEU par défaut */
.date-btn__date {
    font-size:13px;
    display:block;
    color:#0ea5e9;
}

/* 👉 ÉTAT ACTIF : fond bleu plein + tout en blanc */
.date-btn.active {
    background:#0ea5e9 !important;
    box-shadow:none !important;
}

.date-btn.active,
.date-btn.active .date-btn__day,
.date-btn.active .date-btn__date {
    color:#ffffff !important;
}

.date-btn:hover {
    background:#dbeafe;
    transform:translateY(-1px) scale(1.02);
    box-shadow:0 10px 24px rgba(14,165,233,0.15);
}

/* -----------------------------------------------------------------------
   LANDING — MATCH CARDS
------------------------------------------------------------------------ */

.match-card {
    display:block;
    background:#e7e9ed;
    border:1px solid #d1d5db;
    padding:14px 15px;
    border-radius:16px;
    margin-bottom:14px;
    cursor:pointer;
    transition:transform 0.16s ease,box-shadow 0.2s ease,border-color 0.12s ease, background 0.15s ease, opacity 0.15s ease;
    color:#0f172a;
    font-family:'Space Grotesk','Inter',system-ui,sans-serif;
    overflow:hidden;
    width:100%;
    box-shadow:0 8px 32px rgba(0,0,0,0.12);
    opacity:0;
    animation:fadeUp 0.25s ease-out forwards;
}
.match-card:hover {
    transform:translateY(-3px);
    box-shadow:0 12px 36px rgba(0,0,0,0.16);
    border-color:#cbd5f5;
}

/* Ligne principale de la carte de match */
.match-card > div:first-child {
    display:grid !important; /* écrase le display:flex inline */
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); /* gauche / centre / droite */
    align-items:center;
    column-gap:12px;
}

/* Bloc équipe gauche : rien de spécial, il reste à gauche */
.match-card > div:first-child > div:nth-child(1) {
    justify-self:start;
}

/* Bloc heure + ligue : toujours sur l'axe vertical central */
.match-card__info {
    font-size:12px;
    text-align:center;
    min-width:80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    color:#6b7280;

    justify-self:center;   /* 👈 centre la colonne dans la grille */
}

/* Bloc équipe droite : toujours aligné à droite */
.match-card > div:first-child > div:nth-child(3) {
    justify-self:end;
    text-align:right;
}

.match-card__tag {
    font-size:13px;
    color:#4b5563;
    font-weight:600;
}

.match-card__cta {
    font-size:12.5px;
    color:#0ea5e9;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'Space Grotesk','Inter',system-ui,sans-serif;
}
.match-card__cta .cta-arrow {
    display:inline-block;
    transition:transform 0.2s ease;
}
.match-card:hover .match-card__cta .cta-arrow {
    transform:translateX(3px);
}

.match-card__cta {
    position:relative;
    overflow:hidden;
    animation:ctaPulse 1.8s ease-in-out infinite;
}

/* Carte de match à l'intérieur de la zone floutée Premium */
.match-card.match-card--locked {
    background:#e7e9ed !important;      /* fond gris clair */
    color:#0f172a !important;
    border-color:#d1d5db !important;
    box-shadow:none !important;
}

/* On garde le blur, mais plus doux si tu veux */
.locked-teaser__card {
    filter:blur(4px);   /* tu peux descendre à 3 ou 2 si tu veux encore moins flou */
    opacity:0.7;
}


@media (prefers-reduced-motion: no-preference) {
    .match-card__cta .cta-arrow {
        animation:ctaArrowPulse 1.8s ease-in-out infinite;
    }
    .match-card:hover .match-card__cta .cta-arrow {
        animation:none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .match-card__cta,
    .match-card__cta .cta-arrow {
        animation:none !important;
    }
}

.ast-scroll-to-top {
    display:none !important;
}

.match-skeleton {
    background:linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.08), rgba(255,255,255,0.05));
    background-size:200% 100%;
    animation:skeleton 1.2s ease-in-out infinite;
    border-radius:12px;
    height:78px;
    margin-bottom:10px;
}

/* -----------------------------------------------------------------------
   LANDING — GRILLE MATCH + FOCUS
------------------------------------------------------------------------ */

.prematch-grid {
    display:grid;
    grid-template-columns:clamp(280px, 26vw, 360px) 1fr;
    gap:20px;
    align-items:flex-start;
    overflow:visible;
}

.team-logo {
    width:26px;
    height:26px;
    border-radius:999px;
    object-fit:cover;
    background:transparent;
}

/* -----------------------------------------------------------------------
   LANDING — FOCUS MATCH PANELS
------------------------------------------------------------------------ */

.focus-panel {
    border-radius:18px;
    padding:20px;
    background:linear-gradient(135deg,#020617,#111827);
    border:1px solid rgba(15,23,42,0.7);
    color:#e5e7eb;
    margin-top:18px;
    font-family:'Space Grotesk','Inter',system-ui,sans-serif;
    overflow:visible;
}

.focus-back-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.08);
    color:#e5e7eb;
    cursor:pointer;
    font-weight:700;
    margin-bottom:16px;
    padding-left:16px;
    position:relative;
    z-index:10;
}

/* -----------------------------------------------------------------------
   LANDING — CRITÈRES
------------------------------------------------------------------------ */

.criteria-grid {
    display:flex;
    gap:10px;
    margin-bottom:16px;
    flex-wrap:wrap;
    justify-content:center;
}

.criteria-item {
    flex:1 1 140px;
    max-width:180px;
    min-width:140px;
    border-radius:16px;
    padding:14px;
    background:rgba(6,11,25,0.92);
    border:1px solid rgba(148,163,184,0.25);
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
    text-align:center;
}

.criteria-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:8px;
}

.criteria-label {
    font-size:12px;
    color:#f1f5f9;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:6px;
}

.criteria-icon {
    font-size:15px;
}

.criteria-badge {
    width:58px;
    height:58px;
    border-radius:50%;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:700;
    color:#fff;
    isolation:isolate;
}
.criteria-badge::before {
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:conic-gradient(#0ea5e9 var(--fill,0deg), rgba(14,165,233,0.1) 0);
}
.criteria-badge::after {
    content:"";
    position:absolute;
    inset:8px;
    border-radius:50%;
    background:#020617;
}
.criteria-badge span {
    position:relative;
    z-index:1;
}

/* -----------------------------------------------------------------------
   LANDING — PARIS SPORTIFS
------------------------------------------------------------------------ */

.paris-header { display:none; }
.paris-title { display:none; }

/* -----------------------------------------------------------------------
   LANDING — MOMENTUM GRAPH
------------------------------------------------------------------------ */

#momentum-wrapper,
#momentumChart,
.chart-meta,
.chart-heading,
.legend-item,
.legend-line {
    display:none !important;
}

/* Menu dropdown signaux */
.pin-filter-dropdown {
    position:relative;
}

.pin-filter-toggle {
    border:1px solid rgba(148,163,184,0.35);
    background:rgba(15,23,42,0.6);
    color:#e5e7eb;
    font-size:12px;
    padding:6px 14px;
    border-radius:999px;
    cursor:pointer;
}

.pin-filter-menu {
    position:absolute;
    right:0;
    top:calc(100% + 6px);
    background:#0f172a;
    border:1px solid rgba(148,163,184,0.35);
    border-radius:12px;
    padding:12px;
    min-width:200px;
    display:none;
    box-shadow:0 14px 32px rgba(2,6,23,0.65);
}

.pin-filter-menu.open {
    display:block;
}

.pin-filter-menu label {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:#e5e7eb;
}

/* -----------------------------------------------------------------------
   LANDING — MODAL INFO CRITÈRES
------------------------------------------------------------------------ */

.criteria-modal {
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:80;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease;
}
.criteria-modal.open {
    opacity:1;
    pointer-events:auto;
}
.criteria-modal__backdrop {
    position:absolute;
    inset:0;
    background:rgba(2,6,23,0.8);
    backdrop-filter:blur(4px);
}
.criteria-modal__dialog {
    position:relative;
    width:min(340px,90vw);
    background:#0f172a;
    border:1px solid rgba(148,163,184,0.35);
    border-radius:16px;
    padding:24px;
}

/* -----------------------------------------------------------------------
   RESPONSIVE LANDING
------------------------------------------------------------------------ */

@media (max-width:768px) {

    /* Landing: élargir la zone de contenu */
    body:not(.match-view) #prematch-app {
        padding:0 6px 20px;
        max-width:100% !important;
        width:100vw;
        margin-left:calc(50% - 50vw);
        margin-right:calc(50% - 50vw);
        box-sizing:border-box;
    }
    body:not(.match-view) #primary,
    body:not(.match-view) .site-main {
        padding:0 !important;
        margin:0 !important;
    }

    .prematch-header {
        padding:6px 0 10px;
        margin-bottom:12px !important;
    }

    .hero-block {
        margin-top:36px;
        margin-bottom:22px;
    }

    .hero-block h2 {
        font-size:32px !important;
    }

    .date-picker-wrapper {
        gap:18px;
        position:sticky;
        top:52px;
        z-index:10;
    }

    .date-nav {
        width:20px;
        height:20px;
        font-size:12px;
        opacity:0.75;
    }

    .date-btn {
        padding:8px 11px;
        min-height:32px;
        font-size:13px;
    }

    #date-selector {
        position:sticky;
        top:60px;
        z-index:10;
        padding:10px 4px;
        gap:18px;
    }

    #prematch-app {
    }

    .prematch-grid {
        display:block;
    }

    body:not(.match-view) .match-card {
        width:100%;
        margin-left:auto;
        margin-right:auto;
        padding:14px 16px;
        box-shadow:0 8px 24px rgba(0,0,0,0.12);
        margin-bottom:12px;
        border-radius:16px;
        background:#0a1020;
        border:1px solid rgba(255,255,255,0.06);
        color:#e5e7eb;
    }



    #momentum-wrapper {
        min-height:260px;
        width:calc(100% + 48px);
        margin-left:-24px;
    }
}

/* -----------------------------------------------------------------------
   LANDING — ZONE VERROUILLÉE / INSCRIPTION
------------------------------------------------------------------------ */

/* ===================  PREMIUM CARD LOCKED  =================== */

.locked-teaser {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin: 8px 0 10px;
    width: 100%;
}

.locked-teaser--alone {
    margin-top: 0;
}

/* Contient la carte clonée (match-card) */
.locked-teaser__card {
    pointer-events: none; /* pas cliquable */
}

/* La carte clonée : même style qu'une match-card mais floutée */
.match-card--locked {
    filter: blur(2px);
    opacity: 0.3;
    pointer-events: none;
}

/* Overlay translucide par-dessus la carte floutée */
.locked-teaser__overlay {
    position: absolute;
    inset: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;

    /* ⚠️ important : alpha plus faible pour VOIR la carte derrière */
    background: linear-gradient(
        135deg,
        rgba(5, 10, 24, 0.4),
        rgba(10, 18, 34, 0.4)
    );
    backdrop-filter: blur(3px);
    color: #e5e7eb;
}

.locked-teaser__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.locked-teaser__hint {
    font-weight: 600;
    font-size: 14px;
}

/* Bouton */
.locked-teaser__btn {
    border:none;
    background:#0ea5e9;
    color:#ffffff;      /* ✅ texte blanc */
    padding:9px 17px;
    border-radius:999px;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(14,165,233,0.35);
}

.locked-teaser__btn:hover {
    background:#0284c7;
    color:#ffffff;
}

@keyframes fadeUp {
    from { opacity:0; transform:translateY(10px); }
    to { opacity:1; transform:translateY(0); }
}

@keyframes skeleton {
    0% { background-position:-200% 0; }
    100% { background-position:200% 0; }
}

@keyframes ctaArrowPulse {
    0% { transform:translateX(0); }
    50% { transform:translateX(3px); }
    100% { transform:translateX(0); }
}

@keyframes ctaPulse {
    0% { transform:translateX(0); }
    50% { transform:translateX(4px); }
    100% { transform:translateX(0); }
}

/* -----------------------------------------------------------------------
   PREMIUM LOCKED CARD (GLOBAL REUSABLE)
------------------------------------------------------------------------ */

/* -----------------------------------------------------------------------
   PAGE TRANSITION OVERLAY
------------------------------------------------------------------------ */

.page-transition-overlay {
    position:fixed;
    inset:0;
    background:linear-gradient(135deg,#020617,#0b132c);
    opacity:0;
    transform:translateX(100%);
    transition:transform 0.32s ease-out, opacity 0.32s ease-out;
    z-index:9999;
    pointer-events:none;
}

.page-transition-overlay--active {
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
}
@media (max-width: 768px) {

  /* FocusCard vraiment full-width, quoi qu'il arrive autour */
  #focus-card,
  .focus-panel {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0 !important;
    background: linear-gradient(135deg,#020617,#0b132c) !important;
    padding-left:20px;
    padding-right:20px;
    position: relative;
    z-index: 5;
    box-sizing:border-box;
  }

  /* Masquer la focus card sur la landing mobile, mais l'afficher sur les pages match (body.match-view) */
  body:not(.match-view) #focus-card,
  body:not(.match-view) .focus-panel {
    display: none !important;
  }
}

/* Désactiver totalement le bouton "scroll to top" Astra / autres */
#ast-scroll-top,
.ast-scroll-to-top,
.ast-scroll-top-icon,
.scroll-to-top,
a[href="#top"],
a[href="#page-top"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* -----------------------------------------------------------------------
   LANDING — PARIS TABS
------------------------------------------------------------------------ */

.paris-tabs {
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding:10px 0;
    scrollbar-width:none;
}
.paris-tabs::-webkit-scrollbar {
    display:none;
}

.paris-tab {
    border:none;
    background:rgba(255,255,255,0.08);
    color:#e5e7eb;
    padding:12px 18px;
    border-radius:12px;
    font-weight:700;
    font-size:12px;
    cursor:pointer;
    white-space:nowrap;
    transition:background 0.2s ease, color 0.2s ease, transform 0.1s ease;
    position:relative;
    z-index:5;
}

.paris-tab.active {
    background:#0ea5e9;
    color:#0b1224;
    transform:translateY(-1px);
}

.match-card.selected {
    background:linear-gradient(135deg,#020617,#111827);
    color:#e5e7eb;
    border-color:#0ea5e9;
    box-shadow:0 14px 36px rgba(14,165,233,0.25);
}

.match-card.selected .match-card__tag {
    color:#cbd5f5;
}

.match-card.selected .match-card__cta {
    color:#38bdf8;
}

.paris-insights-list {
    margin:16px 0 0;
    padding-left:18px;
    display:flex;
    flex-direction:column;
    gap:6px;
    color:#e5e7eb;
    font-size:13px;
}

/* =======================================================================
   INSCRIPTION — PAGE REGISTER
   ======================================================================= */

.betlab-page {
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    background:radial-gradient(circle at top, #151c3a 0, #060712 55%, #02030a 100%);
    color:#f5f7ff;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text","Segoe UI", sans-serif;
    z-index:20;
}

.bl-header {
    position:absolute;
    top:28px;
    left:7vw;
}

.bl-logo {
    display:inline-block;
    padding:8px 6px;
    font-size:1.7rem;
    font-weight:800;
    letter-spacing:0.03em;
    background:linear-gradient(90deg, #4cc9ff, #388bff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-family:'Space Grotesk','Inter',system-ui,sans-serif;
}

.bl-main {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:120px 16px 60px;
}

.bl-signup-card {
    width:min(720px, 100% - 32px);
    padding:32px 26px;
    border-radius:28px;
    background:linear-gradient(140deg, rgba(6,10,32,0.92), rgba(10,16,40,0.88));
    border:1px solid rgba(90,120,255,0.25);
    backdrop-filter:blur(16px);
    box-shadow:0 24px 60px rgba(0,0,0,0.55);
}

.bl-headline {
    text-align:center;
    font-size:1.8rem;
    font-weight:800;
    margin:0 0 24px;
    color:#e8edf7;
    text-shadow:0 2px 14px rgba(0,0,0,0.5);
}

.bl-headline .accent {
    color:#4cc9ff;
    font-weight:800;
    text-shadow:0 2px 18px rgba(76,201,255,0.35);
}

.bl-form {
    width:100%;
}

.bl-label {
    color:#e8edf7;
    font-weight:700;
    margin-bottom:6px;
    display:inline-block;
}

.bl-form-row {
    display:flex;
    flex-direction:column;
    gap:10px;
}

@media (min-width:640px) {
    .bl-form-row {
        flex-direction:row;
    }
}

.bl-input {
    flex:1;
    padding:14px 16px;
    border-radius:999px;
    border:1px solid rgba(134,151,255,0.5);
    background:rgba(4,7,26,0.95);
    color:#f5f7ff;
    font-size:0.95rem;
}

.bl-input:focus {
    border-color:#4cc9ff;
    box-shadow:0 0 0 1px rgba(76,201,255,0.5);
}

.bl-button {
    border:none;
    cursor:pointer;
    padding:14px 26px;
    border-radius:999px;
    font-size:0.95rem;
    font-weight:700;
    letter-spacing:0.08em;
    background:linear-gradient(90deg, #4cc9ff, #388bff);
    color:#020414;
    box-shadow:0 10px 25px rgba(17,90,200,0.6);
}

/* ===========================================================================
   MOBILE — full-width mais avec léger padding
   =========================================================================== */
@media (max-width: 768px) {

  /* Wrapper principal : enlever la grande marge mais garder 12px */
  #prematch-app {
      padding-left: 2px !important;
      padding-right: 2px !important;
      padding-top: 16px; /* si tu veux garder le padding haut */
      padding-bottom: 24px;
  }

  /* Match cards : occuper toute la largeur disponible */
  .match-card {
      width: 100%;
      margin-left: 0 !important;
      margin-right: 0 !important;
  }

  /* FocusCard mobile — si tu veux qu'elle reste vraiment edge-to-edge */
  #focus-card,
  .focus-panel {
      width: 100%;
      margin-left: 0 !important;
      margin-right: 0 !important;
      border-radius: 0 !important;
  }
}


/* ===========================================================================
   Fix Mobile + Fix Focus Match Page — Background & Border
   =========================================================================== */

/* 1. Bouton Inscription → texte blanc */
@media (max-width: 768px) {
  .btn-prematch-premium {
      color: #ffffff !important;
  }
}

/* 2. Focus Match : même background que la carte, plus de rupture de couleur */
body.match-view {
    background: linear-gradient(135deg,#020617,#0b132c) !important;
}

/* 3. Focus Match : retirer TOUTES les bordures visibles */
body.match-view #focus-card,
body.match-view .focus-panel {
    border: none !important;
    box-shadow: none !important;
}

/* Tap feedback sur les match-cards (mobile only) */
@media (max-width: 768px) {
  .match-card {
    transition:
      transform 0.12s ease,
      box-shadow 0.12s ease,
      border-color 0.12s ease;
  }

  .match-card:active {
    transform: scale(0.97);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    border-color: #0ea5e9;
  }
}


/* Animation de la liste de paris quand on change d'onglet */
.paris-insights-list {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.paris-insights-list.is-updating {
  opacity: 0;
  transform: translateY(6px);
}


/* ===================  ANIMATION WIGGLE 🔒  =================== */

@keyframes lock-wiggle {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  20% {
    transform: rotate(-6deg) translateY(-1px);
  }
  40% {
    transform: rotate(6deg) translateY(-1px);
  }
  60% {
    transform: rotate(-3deg) translateY(0);
  }
  80% {
    transform: rotate(3deg) translateY(0);
  }
}

/* Icônes de lock dans la bannière et la focus */
.locked-teaser__icon,
.focus-locked__icon {
  display: inline-block;
  font-size: 20px;
  animation: lock-wiggle 1.8s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Respecte les users en reduced motion */
@media (prefers-reduced-motion: reduce) {
  .locked-teaser__icon,
  .focus-locked__icon {
    animation: none;
  }
}

/* Animation plus fluide du mot qui change (experts/parieurs) */
#hero-role-word {
  display: inline-block;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* ======================================================================
   LOADER BETLAB
   ====================================================================== */

/* Overlay loader BetLab – visible par défaut */
.betlab-loader-overlay {
    position: fixed;
    inset: 0;
    background: #020617;            /* même fond que le site */
    display: flex;                  /* visible dès le premier paint */
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.35s ease;
}

/* État caché (après chargement / transition) */
.betlab-loader-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.betlab-loader-inner {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.betlab-loader-logo {
  font-family: 'Space Grotesk','Inter',system-ui,sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: linear-gradient(100deg,#0284c7,#0ea5e9,#38bdf8,#7dd3fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 18px rgba(56,189,248,0.6);
  animation: loaderPulse 1.4s ease-in-out infinite;
}

.betlab-loader-ring {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  border-top: 3px solid rgba(56,189,248,0.9);
  border-right: 3px solid rgba(56,189,248,0.4);
  border-bottom: 3px solid transparent;
  border-left: 3px solid transparent;
  box-shadow: 0 0 25px rgba(56,189,248,0.45);
  animation: loaderSpin 0.9s linear infinite;
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

@keyframes loaderPulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%     { transform: scale(1.06); opacity: 0.75; }
}



/* Uniformiser le fond sur la page focus match (mobile) */
body.match-view {
  background: radial-gradient(circle at top, #111827 0, #020617 55%, #02030a 100%);
}

body.match-view #focus-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* la liste de bullets n’a pas de fond propre */
body.match-view .paris-insights-list {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Slider période "Airbnb like" */
.period-range {
    margin: 15px 0 20px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Texte "Sélectionner / période" */
.period-range-caption {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    line-height: 1.25;
    white-space: nowrap;
}

/* La zone qui contient la barre uniquement */
.period-range-track {
    position: relative;
    flex: 1;                 /* prend le reste de la largeur */
}

/* On ne garde PAS de background ici → pas de double barre */
.period-range-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: transparent;
    outline: none;
}

/* Track WebKit (iOS / Chrome mobile / Safari) : UNE seule barre bleue */
.period-range-input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: #0ea5e9;
}

/* Track Firefox */
.period-range-input::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: #0ea5e9;
}

/* Thumb WebKit */
.period-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f9fafb;
    border: 2px solid #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14,165,233,0.25);
    margin-top: -7px; /* centre le thumb sur la barre */
}

/* Thumb Firefox */
.period-range-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f9fafb;
    border: 2px solid #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14,165,233,0.25);
}

/* Tooltip au-dessus du curseur */
.period-range-thumb-label {
    position: absolute;
    top: -28px;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: #e5e7eb;
    background: #020617;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.5);
    white-space: nowrap;
    pointer-events: none;
}



/* HEATMAP BTTS FOCUS MATCH
   ------------------------ */
.btts-heatmap {
  display: flex;
  align-items: flex-start;
  gap: 0px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative;
  margin-top: 6px;
  margin-bottom: 18px; /* 👉 espace avec les bullet points */
}

.btts-heatmap {
    --heatmap-cell-height: 26px;  /* à ajuster si besoin */
}

/* Colonne Y : logos */
.btts-heatmap-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(var(--cell-size) * 2 + 6px);
  padding-top: 2px;
  padding-bottom: 2px;
  position: relative;
}

/* Axe vertical bleu */
.btts-heatmap-y::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--betlab-blue);
}

.team-logo {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* HEATMAP BTTS (Focus Match) */
.btts-heatmap {
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:12px;
    --heatmap-cols: 20;
}

/* Colonne Y : logos + stats + axe vertical */
.btts-heatmap-y {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    padding-right:10px; /* espace pour l’axe bleu */
}

/* Une ligne par équipe : logo + % */
.btts-heatmap-y-row {
    display:flex;
    align-items:center;
    gap:6px;
    transform:translateY(-2px); /* surélève un peu pour aligner avec les cases */
}

/* Seulement dans la heatmap, on override la taille des logos */
.btts-heatmap .team-logo {
    width:var(--heatmap-cell-height);
    height:var(--heatmap-cell-height);
    border-radius:999px;
    overflow:hidden;
}
.btts-heatmap .team-logo img {
    width:100%;
    height:100%;
    object-fit:contain;
}
/* Pour le 50%, 62%, etc. */
.btts-heatmap .team-stat {
    font-size:12px;      /* même que .paris-tab */
    font-weight:700;     /* même niveau de “force” visuelle */
    color:#9ca3af;
}

/* Axe vertical bleu (même bleu que tes boutons) */
.btts-heatmap-y::after {
    content:"";
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:2px;
    background:#0ea5e9; /* 👈 même bleu que les boutons */
}

/* Zone principale à droite : heatmap + ticks */

/* Grille + axe horizontal */
.btts-heatmap-main {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

.btts-heatmap-grid {
    display:grid;
    position:relative;
    grid-template-rows:repeat(2, var(--heatmap-cell-height));
    grid-template-columns:repeat(var(--heatmap-cols), minmax(0, 1fr));
    gap:3px;
}

/* Axe horizontal placé entre les cases et les petits ticks */
.btts-heatmap-grid::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-6px;       /* ligne juste au-dessus des petits traits */
    height:2px;
    background:#0ea5e9;
}

/* Cases de la heatmap (un peu plus hautes) */
.btts-heatmap-grid .cell {
    height:var(--heatmap-cell-height);
    border-radius:3px;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
}

.btts-heatmap-grid .cell.yes { background:#34c759; }
.btts-heatmap-grid .cell.no  { background:#ff3b30; }

.btts-heatmap-grid .cell:hover {
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(0,0,0,0.25);
}

/* Petits traits gris sur l’axe horizontal */
.btts-heatmap-ticks {
    display:grid;
    grid-template-columns:repeat(var(--heatmap-cols), minmax(0, 1fr));
    gap:3px;
    margin-top:8px;
}

.btts-heatmap-ticks .tick {
    width:1px;
    height:6px;
    margin:0 auto;
    background:rgba(148,163,184,0.9);
}

/* Tooltip au survol / clic */
.btts-heatmap-tooltip {
    position:fixed;
    pointer-events:none;
    background:#111827;
    color:#f9fafb;
    padding:4px 8px;
    border-radius:6px;
    font-size:11px;
    line-height:1.4;
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
    opacity:0;
    transform:translate(-50%, -8px);
    transition:opacity .08s ease, transform .08s ease;
    z-index:9999;
    white-space:nowrap;
}
.btts-heatmap-tooltip.visible {
    opacity:1;
    transform:translate(-50%, -10px);
}





/* Hero BetLab : harmonisation phrases + texte dynamique */
.hero-headline,
.hero-subline,
#hero-typing,
#hero-role-word {
    font-family: 'Space Grotesk','Inter',system-ui,sans-serif !important;
    font-size: 1.7rem !important;
    line-height: 1.25;
    font-weight: 800;
}


@media (max-width: 768px) {
    .hero-headline,
    .hero-subline,
    #hero-typing,
    #hero-role-word {
        font-size: 1.45rem !important;
        line-height: 1.25;
    }
}