/* =====================================================================
   Interface mobile (maquette PronoFoot IA) : bleu nuit + turquoise.
   Écrite mobile-first ; s'adapte ensuite aux tablettes et ordinateurs.
   Aucune image lourde : dégradés CSS et SVG en ligne uniquement.
   ===================================================================== */
:root {
    --mint: #34e0b3;
    --glow: 0 0 0 1px rgba(45, 212, 191, .35), 0 10px 30px -12px rgba(45, 212, 191, .55);
    --card-grad: linear-gradient(160deg, #13223d 0%, #0d182d 100%);
}

body.has-app-shell {
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(45, 212, 191, .10), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}
.brand-name em, .topbar-brand em { font-style: normal; color: var(--accent); }

/* ---- Barre du haut ---- */
.topbar-brand {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--text); font-weight: 800; font-style: italic; font-size: 1.15rem; letter-spacing: -.02em;
}
.topbar-brand:hover { text-decoration: none; }
.topbar-brand .brand-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.topbar-brand .brand-mark .icon { width: 20px; height: 20px; }
.is-desktop-only { display: none !important; }
.bell .dot-badge { background: #ef4444; color: #fff; box-shadow: 0 0 0 2px var(--bg); }
.dot-badge[hidden] { display: none; }

/* ---- Navigation basse ---- */
.bottom-nav { background: rgba(9, 15, 30, .97); border-top-color: rgba(45, 212, 191, .18); padding-left: 6px; padding-right: 6px; }
.bottom-nav a { border-radius: 14px; margin: 6px 3px; transition: background .15s, color .15s; }
.bottom-nav a.is-active {
    color: var(--accent);
    background: linear-gradient(180deg, rgba(45, 212, 191, .22), rgba(45, 212, 191, .08));
    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .35);
}

/* ---- Langue (menu latéral) ---- */
.lang-switch { display: flex; align-items: center; gap: 6px; padding: 6px 12px 10px; color: var(--muted); }
.lang-switch .icon { width: 18px; height: 18px; }
.lang-switch button {
    border: 1px solid var(--line-strong); background: transparent; color: var(--text-2);
    border-radius: 8px; padding: 3px 9px; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.lang-switch button.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---- Accueil ---- */
.home { display: flex; flex-direction: column; gap: 14px; }
.hero-card {
    position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 42%; align-items: center;
    min-height: 150px; padding: 18px 16px; border-radius: 20px;
    background:
        radial-gradient(90% 120% at 100% 30%, rgba(45, 212, 191, .28), transparent 60%),
        linear-gradient(135deg, #10284a 0%, #0b1a33 60%, #0a1428 100%);
    box-shadow: var(--glow);
}
.hero-hello { color: var(--text-2); font-size: .82rem; margin-bottom: 4px; }
.hero-card h2 { font-size: 1.22rem; line-height: 1.3; font-weight: 750; letter-spacing: -.01em; }
.hero-card h2 span { color: var(--accent); }
.hero-art { align-self: stretch; display: grid; place-items: center; }
.hero-orb { width: 100%; max-width: 170px; height: auto; filter: drop-shadow(0 6px 18px rgba(45, 212, 191, .35)); }

.cta-generate {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; border-radius: 18px; padding: 0 18px;
    background: linear-gradient(90deg, #2dd4bf, var(--mint));
    color: #04211c; font-weight: 800; font-size: 1.08rem;
    box-shadow: 0 10px 28px -10px rgba(52, 224, 179, .75);
}
.cta-generate:hover { text-decoration: none; filter: brightness(1.05); }
.cta-generate:active { transform: scale(.99); }
.cta-generate .icon { width: 24px; height: 24px; }

.quick-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick-tiles a {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 84px; border-radius: 16px; padding: 10px 4px;
    background: var(--card-grad); border: 1px solid var(--line);
    color: var(--text); font-size: .8rem; font-weight: 600; text-align: center;
}
.quick-tiles a:hover { text-decoration: none; border-color: rgba(45, 212, 191, .45); }
.quick-tiles .icon { width: 26px; height: 26px; color: var(--accent); }
.quick-tiles a:nth-child(2) .icon { color: var(--amber); }
.tile-badge {
    position: absolute; top: 6px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #ef4444; color: #fff; font-size: .7rem; display: grid; place-items: center;
}

.pick-card { border-radius: 20px; background: var(--card-grad); border: 1px solid var(--line); overflow: hidden; }
.pick-head {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px;
    color: var(--text); font-weight: 750; font-size: 1.05rem;
}
.pick-head:hover { text-decoration: none; }
.pick-head span { display: inline-flex; align-items: center; gap: 8px; }
.pick-head .icon { width: 20px; height: 20px; }
.pick-head span .icon { color: #fb923c; }
.pick-body {
    display: block; margin: 6px 10px 12px; padding: 12px; border-radius: 16px;
    background: rgba(9, 16, 32, .65); border: 1px solid var(--line); color: var(--text);
}
.pick-body:hover { text-decoration: none; border-color: rgba(45, 212, 191, .4); }
.pick-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: .8rem; }
.pick-comp { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.pick-comp img { border-radius: 4px; background: #fff; }
.pick-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 14px 0; }
.pick-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 650; font-size: .95rem; }
.pick-vs {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface-3); color: var(--text-2); font-weight: 800; font-size: .85rem;
}
.pick-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pick-odds span, .pills-3 span {
    text-align: center; padding: 9px 4px; border-radius: 12px; background: var(--surface-3);
    font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums;
}
.pick-odds span.is-top, .pills-3 span.is-top { background: linear-gradient(90deg, #2dd4bf, var(--mint)); color: #04211c; }
.pick-foot { color: var(--muted); font-size: .74rem; margin-top: 10px; text-align: center; }
.pick-empty { display: flex; gap: 10px; align-items: center; padding: 10px 16px 18px; color: var(--text-2); font-size: .9rem; }
.pick-empty .icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--muted); }

.home-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.home-stats .card { padding: 14px; }
.home-stats .stat-value { font-size: 1.35rem; }
.home-lists { margin-top: 4px; }

/* Écussons */
.crest { display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.crest img { width: 100%; height: 100%; object-fit: contain; }
.crest-text { background: linear-gradient(145deg, #1e3a5f, #13233f); border: 1px solid var(--line-strong); color: var(--text); font-weight: 750; font-size: .78rem; }

/* ---- Onglets ---- */
.tab-list, .segment-tabs {
    display: flex; gap: 6px; padding: 5px; margin-bottom: 14px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--line);
}
.tab-list button, .segment-tabs a {
    flex: 1; min-height: 40px; border: 0; border-radius: 12px; background: transparent;
    color: var(--text-2); font-weight: 650; font-size: .92rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.segment-tabs a:hover { text-decoration: none; color: var(--text); }
.tab-list button.is-active, .segment-tabs a.is-active {
    background: linear-gradient(90deg, #2dd4bf, var(--mint)); color: #04211c; box-shadow: 0 6px 18px -8px rgba(52, 224, 179, .8);
}
.segment-tabs b { font-size: .75rem; opacity: .75; }
.tab-panel { display: flex; flex-direction: column; gap: 14px; }
.tab-panel[hidden] { display: none; }

/* ---- Analyse d'un match ---- */
.match-head { background: var(--card-grad); }
.match-head-meta { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-2); font-size: .82rem; text-align: center; }
.match-head-meta img { border-radius: 4px; background: #fff; }
.match-head-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 14px; }
.match-head-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 700; }
.match-head-score { font-size: 1.25rem; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.match-head + .m-tabs { margin-top: 14px; }

.rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: center; margin: 6px 0 4px; }
.ring {
    --tone: var(--accent);
    width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--tone) var(--deg), var(--surface-3) 0);
}
.ring-b { --tone: #94a3b8; }
.ring-c { --tone: var(--amber); }
.ring.is-top { box-shadow: 0 0 22px -4px var(--tone); }
.ring-inner {
    width: 70px; height: 70px; border-radius: 50%; background: #0c1629;
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.ring-inner strong { font-size: 1.08rem; color: var(--tone); font-variant-numeric: tabular-nums; }
.ring-inner span { font-size: .8rem; color: var(--text-2); font-weight: 650; }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 16px; padding: 12px; border-radius: 14px; background: rgba(9, 16, 32, .55); }
.check-list li { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.check-list .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); stroke-width: 3; flex-shrink: 0; }
.ai-pick {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
    background: linear-gradient(90deg, rgba(45, 212, 191, .16), rgba(52, 224, 179, .05));
    border: 1px solid rgba(45, 212, 191, .45);
}
.ai-pick > .icon { width: 34px; height: 34px; color: var(--amber); flex-shrink: 0; }
.ai-pick strong { display: block; color: var(--accent); font-size: .98rem; }
.ai-pick span { font-size: .9rem; color: var(--text); }
.h2h-row { display: grid; grid-template-columns: 74px 1fr auto 1fr; gap: 8px; align-items: center; }
.h2h-row span:nth-child(2) { text-align: right; }
.h2h-row strong { font-variant-numeric: tabular-nums; }

/* ---- Liste des analyses ---- */
.day-title { font-size: 1rem; margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.analysis-list { display: grid; gap: 10px; }
.analysis-item {
    display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px;
    background: var(--card-grad); border: 1px solid var(--line); color: var(--text);
}
.analysis-item:hover { text-decoration: none; border-color: rgba(45, 212, 191, .45); }
.analysis-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: .8rem; }
.analysis-teams { display: flex; flex-direction: column; gap: 6px; font-weight: 650; }
.team-line { display: flex; align-items: center; gap: 8px; }
.pills-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pills-3 span { font-size: .82rem; font-weight: 600; padding: 7px 4px; }
.pills-3 b { font-weight: 800; }

/* ---- Live ---- */
.live-note { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.live-note .icon { width: 16px; height: 16px; color: #ef4444; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.live-row {
    display: grid; grid-template-columns: 52px 1fr auto; grid-template-areas: "time teams score" "time comp score";
    gap: 2px 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--text);
}
.live-row:last-child { border-bottom: 0; }
.live-row:hover { text-decoration: none; background: var(--surface-2); }
.live-time { grid-area: time; color: var(--text-2); font-size: .85rem; font-variant-numeric: tabular-nums; }
.live-tag { background: #ef4444; color: #fff; border-radius: 6px; padding: 2px 6px; font-size: .68rem; letter-spacing: .04em; }
.live-teams { grid-area: teams; display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .92rem; }
.live-teams > span { display: flex; align-items: center; gap: 8px; }
.live-score { grid-area: score; display: flex; flex-direction: column; gap: 6px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-score.is-live b { color: var(--accent); }
.live-comp { grid-area: comp; }

/* ---- Mes coupons ---- */
.coupon-stack { display: grid; gap: 14px; }
.m-coupon { border-radius: 20px; padding: 14px; background: var(--card-grad); border: 1px solid var(--line); }
.m-coupon header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.m-coupon header a { color: var(--text); min-width: 0; }
.m-coupon h3 { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-count { flex-shrink: 0; background: linear-gradient(90deg, #2dd4bf, var(--mint)); color: #04211c; border-radius: 999px; padding: 3px 10px; font-size: .74rem; font-weight: 800; }
.m-selections { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.m-selections li {
    display: grid; grid-template-columns: 20px 1fr auto 22px; align-items: center; gap: 8px;
    padding: 10px; border-radius: 12px; background: rgba(9, 16, 32, .6); font-size: .88rem;
}
.m-selections li > .icon { width: 18px; height: 18px; color: var(--text-2); }
.m-match { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-pick { font-weight: 800; color: var(--text); }
.m-res .icon { width: 18px; height: 18px; stroke-width: 2.6; }
.r-won .m-res { color: var(--green); }
.r-lost .m-res { color: var(--red); }
.r-pending .m-res, .r-void .m-res { color: var(--muted); }
.m-total { display: flex; align-items: center; justify-content: space-between; margin: 12px 2px 8px; font-weight: 600; }
.total-pill { background: linear-gradient(90deg, #22c55e, var(--mint)); color: #04211c; border-radius: 10px; padding: 5px 12px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.m-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; }
.btn-copy {
    width: 100%; min-height: 48px; border: 0; border-radius: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(90deg, #2dd4bf, var(--mint)); color: #04211c; font-weight: 800; font-size: 1rem;
}
.btn-copy .icon { width: 20px; height: 20px; }
.btn-copy:active { transform: scale(.99); }

/* ---- Composer un coupon ---- */
.builder-top { margin-bottom: 4px; }
.builder-top .label { margin-top: 10px; display: block; }
.builder-day { display: grid; gap: 8px; }
.b-fixture { border-radius: 16px; background: var(--card-grad); border: 1px solid var(--line); overflow: hidden; }
.b-fixture.is-picked { border-color: rgba(45, 212, 191, .6); }
.b-fixture[hidden] { display: none; }
.b-fixture-head {
    width: 100%; display: grid; grid-template-columns: 46px 1fr auto 20px; grid-template-areas: "time teams picked chev" "time comp picked chev";
    align-items: center; gap: 2px 10px; padding: 12px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer;
}
.b-time { grid-area: time; color: var(--text-2); font-size: .85rem; font-variant-numeric: tabular-nums; }
.b-teams { grid-area: teams; display: flex; flex-direction: column; gap: 5px; font-size: .92rem; }
.b-teams > span { display: flex; align-items: center; gap: 8px; }
.b-teams b { font-weight: 650; }
.b-comp { grid-area: comp; }
.b-picked { grid-area: picked; background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 3px 8px; font-weight: 800; font-size: .8rem; }
.b-picked[hidden] { display: none; }
.b-chevron { grid-area: chev; width: 18px; height: 18px; color: var(--muted); transition: transform .15s; }
.b-fixture.is-open .b-chevron { transform: rotate(180deg); }
.b-markets { border-top: 1px solid var(--line); padding: 4px 12px 12px; }
.b-markets[hidden] { display: none; }
.b-market-name { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 6px; font-weight: 650; }
.b-outcomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.b-outcome {
    display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 9px 10px; border-radius: 12px; cursor: pointer;
    background: rgba(9, 16, 32, .65); border: 1px solid var(--line); color: var(--text);
}
.b-outcome:hover { border-color: rgba(45, 212, 191, .45); }
.b-outcome.is-selected { background: linear-gradient(90deg, #2dd4bf, var(--mint)); border-color: transparent; color: #04211c; }
.b-o-label { font-size: .82rem; line-height: 1.25; }
.b-o-figs { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.b-o-figs b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.b-o-figs small { font-size: .74rem; opacity: .8; }

.slip {
    position: fixed; left: 0; right: 0; z-index: 24;
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
    background: rgba(12, 22, 41, .98); border-top: 1px solid rgba(45, 212, 191, .4);
    box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .7);
}
.slip[hidden] { display: none; }
.slip-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.slip-toggle { flex: 1; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; font-size: .9rem; }
.slip-toggle strong { font-size: 1.15rem; color: var(--accent); }
.slip-odds { margin-left: auto; color: var(--text-2); }
.slip-odds b { color: var(--text); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.slip-list { max-height: 40vh; overflow-y: auto; padding: 6px 14px 0; display: flex; flex-direction: column; gap: 6px; }
.slip-list[hidden] { display: none; }
.slip-item { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.slip-item div { display: flex; flex-direction: column; font-size: .84rem; min-width: 0; }
.slip-item span { color: var(--text-2); }
body.has-slip .content { padding-bottom: 96px; }

/* ---- Profil ---- */
.profile-quick { display: grid; gap: 14px; margin-bottom: 16px; }
.profile-quick .card-title h2 { display: inline-flex; align-items: center; gap: 8px; }
.profile-quick .card-title .icon { width: 18px; height: 18px; color: var(--accent); }
.lang-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-links a, .profile-links button {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line);
    background: transparent; color: var(--text); font-size: .95rem; font-weight: 550; text-align: left; cursor: pointer;
}
.profile-links a:hover, .profile-links button:hover { background: var(--surface-2); text-decoration: none; }
.profile-links .icon { width: 20px; height: 20px; color: var(--accent); }
.profile-links span { flex: 1; }
.profile-links a .icon:last-child { color: var(--muted); width: 16px; height: 16px; }
.profile-links form:last-child button { border-bottom: 0; color: var(--red); }
.profile-links form:last-child .icon { color: var(--red); }

/* ---- Tablettes et ordinateurs ---- */
@media (min-width: 640px) {
    .hero-card { min-height: 180px; padding: 24px; }
    .hero-card h2 { font-size: 1.5rem; }
    .home-stats { grid-template-columns: repeat(4, 1fr); }
    .profile-quick { grid-template-columns: repeat(3, 1fr); }
    .analysis-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .topbar-title.is-desktop-only { display: block !important; }
    .avatar.is-desktop-only { display: grid !important; }
    .topbar .only-mobile { display: none; }
    .topbar-brand { display: none; }
    .home { display: grid; grid-template-columns: 1.15fr .85fr; align-items: start; }
    .home > .hero-card, .home > .cta-generate, .home > .quick-tiles { grid-column: 1; }
    .home > .pick-card { grid-column: 2; grid-row: 1 / span 3; }
    .home > .home-stats, .home > .home-lists { grid-column: 1 / -1; }
    .slip { left: var(--sidebar-w); bottom: 0; }
    body.has-slip .content { padding-bottom: 110px; }
    .analysis-list { grid-template-columns: repeat(3, 1fr); }
    .coupon-stack { grid-template-columns: repeat(2, 1fr); }
    .m-tabs { max-width: 900px; }
}
@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
}
.m-tabs .card-title h2 { display: inline-flex; align-items: center; gap: 6px; }
.m-tabs .card-title h2 .icon { width: 18px; height: 18px; color: #fb923c; }

/* Pelouse sous le bandeau d'accueil */
.hero-card { isolation: isolate; }
.hero-pitch { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; object-fit: cover; object-position: center bottom; opacity: .4; z-index: -1; pointer-events: none; }
.hero-copy, .hero-art { position: relative; }