/* Ballistat — identité bleu / violet / blanc. Aucun fond noir. Chargé après style.css, theme-light.css et pay.css.
   Jetons de couleur uniques : toute la palette vit ici ; les autres feuilles s'y réfèrent. */
:root {
  color-scheme: light;
  --white: #ffffff;
  --blue-50: #eef3ff; --blue-100: #dfe8ff; --blue-300: #8fb0f5; --blue-500: #5b7cf0; --blue-600: #3b57c8; --blue-700: #2c3f9c;
  --violet-50: #f4efff; --violet-100: #e7defd; --violet-300: #b39cf2; --violet-500: #8a63f0; --violet-600: #6b47d6; --violet-700: #4f34b0;
  /* surfaces de l'interface : verre bleu et violet, texte blanc (le fond animé reste visible autour) */
  --fg: #ffffff; --mut: #dbe0ff; --link: #d4e2ff; --ok: #b8f5cf; --bad: #ffd0d4; --warn-fg: #ffe9b0;
  --card: rgba(26, 36, 124, 0.66); --card2: rgba(62, 44, 160, 0.66);
  --muted: rgba(255, 255, 255, 0.13); --field: rgba(255, 255, 255, 0.14); --line: rgba(255, 255, 255, 0.26);
  --chrome: linear-gradient(135deg, rgba(30, 42, 140, 0.97), rgba(72, 48, 176, 0.97));
  --btn: linear-gradient(120deg, #6f8dff, #8d66ff);
  --blue: #6f8dff; --blue-d: #d4e2ff; --violet: #9a73ff; --violet-d: #e6dcff; --indigo: #7c8cff;
  --bg: #3346b8; --bg2: #3b4cc0; --pri: #6f8dff; --ring: #cfd8ff; --a: #d9c9ff; --h: #cfe0ff;
  --grad: linear-gradient(120deg, #5b7cf0 0%, #8a63f0 100%);
  --halo: 0 0 0 3px rgba(255, 255, 255, 0.22), 0 10px 26px -8px rgba(86, 84, 230, 0.7);
  --sheen: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  --sheen-v: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.28) 50%, transparent 62%);
}
html { background: #3346b8; color: #fff; }
body { background: transparent; }

/* ---- couche de fond animé (voir ux.js et fx.js) ---- */
.bgfx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(160deg, #2e3fae 0%, #4a3fc0 55%, #6a46d0 100%); }
.bgfx i, .bgfx::after { display: none; }
.bgimg { position: absolute; inset: 0; background: none; opacity: 0; transform: none; filter: none; transition: opacity 0.6s; }
.bgimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(59, 111, 224, 0.5), rgba(118, 82, 230, 0.45)); mix-blend-mode: screen; }
body.app-ready[data-fx="home"] .bgimg { background: url(/bg-m.jpg) center / cover no-repeat; opacity: 1; }
@media (min-width: 760px) { body.app-ready[data-fx="home"] .bgimg { background-image: url(/bg.jpg); } }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.26s; }
#fx.off { opacity: 0; }
.bgshade { position: absolute; inset: 0; background: transparent; }
body[data-fx="home"] .bgshade { background: linear-gradient(180deg, rgba(60, 60, 190, 0) 0, rgba(60, 60, 190, 0) 40%, rgba(54, 56, 182, 0.8) 78%, rgba(50, 54, 178, 0.97) 100%), rgba(54, 56, 182, calc(var(--sc, 0) * 0.85)); }
body[data-fx] .bgfx { background: linear-gradient(160deg, #2e3fae 0%, #4a3fc0 55%, #6a46d0 100%); }
body[data-fx="pitch"] .bgfx { background: radial-gradient(90% 70% at 50% 40%, #4a5fd0 0, #2f3fae 80%); }
body[data-fx="radar"] .bgfx { background: radial-gradient(90% 70% at 50% 40%, #6a50d6 0, #34409f 80%); }
body[data-fx="coins"] .bgfx { background: radial-gradient(90% 70% at 50% 25%, #5a56d8 0, #3a3aa8 80%); }
body[data-fx="beams"] .bgfx { background: radial-gradient(90% 80% at 50% 100%, #7c55dc 0, #3a3ca8 78%); }
body[data-fx="chart"] .bgfx { background: radial-gradient(90% 70% at 20% 20%, #4a63d4 0, #33409f 78%); }
body[data-fx="net"] .bgfx { background: linear-gradient(160deg, #33449f 0%, #4a3dae 100%); }
/* accueil : le héros devient un verre bleu pour laisser voir le stade animé */
body[data-fx="home"] .hero.home-hero, body[data-page="home"] .hero.home-hero { background: rgba(26, 36, 124, 0.7) !important; border-color: var(--line); box-shadow: 0 18px 50px -24px rgba(10, 16, 80, 0.8); }
@media (max-width: 719px) { body[data-fx="home"] .hero.home-hero, body[data-page="home"] .hero.home-hero { background: rgba(26, 36, 124, 0.86) !important; } }
#top, #side { background: var(--chrome); border-color: var(--line); }

/* texte net : plus d'ombre lumineuse héritée du thème nuit */
.eyebrow, .hero *, .home-hero *, h1, h2, h3, strong, p, a, span { text-shadow: none !important; }

/* ---- boutons « magiques » : balayage de brillance, halo au survol, ondulation au clic ---- */
button, .btn { position: relative; overflow: hidden; color: #fff; background-image: var(--sheen), var(--btn); background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat; border-color: rgba(255, 255, 255, 0.34); transition: transform 0.18s ease, box-shadow 0.25s ease, background-color 0.2s ease; }
button:hover:not(:disabled), .btn:hover { background-image: var(--sheen), var(--btn); background-position: -30% 0, 0 0; box-shadow: var(--halo); transition: background-position 0.75s ease, transform 0.18s ease, box-shadow 0.25s ease; }
button.sec, .btn.sec, #top button, .langbtn, .iconbtn, .userbtn { background-color: rgba(76, 92, 205, 0.95); background-image: var(--sheen-v); background-size: 260% 100%; background-position: 130% 0; color: var(--fg); border: 1px solid var(--line); }
button.sec:hover:not(:disabled), .btn.sec:hover, #top button:hover:not(:disabled) { background-image: var(--sheen-v); background-position: -30% 0; background-color: rgba(98, 114, 228, 0.98); box-shadow: var(--halo); }
button:disabled, .btn[aria-disabled="true"] { background-image: none; background-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6); }
button:active:not(:disabled), .btn:active { transform: scale(0.97); }
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: scale(0); animation: ripple 0.6s ease-out forwards; pointer-events: none; }
button.sec .ripple, .btn.sec .ripple { background: rgba(59, 111, 224, 0.2); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
/* micro-interactions : cartes et tickets se soulèvent, les pastilles de formule pulsent doucement */
.card, .plan, .ticket, .matchcard, .fixture-item { transition: transform 0.22s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.plan:hover, .ticket:hover, .matchcard:hover, .card.coupon-shop-card:hover { box-shadow: 0 14px 34px -18px rgba(86, 84, 230, 0.55); }
a, .tab, .daychip, .sportchip { transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; }
@media (prefers-reduced-motion: reduce) {
  button, .btn { background-image: none; transition: none; }
  .bgfx #fx { display: none; }
  .ripple { display: none; }
}

/* champs : verre clair, texte blanc ; listes et dates lisibles */
input, select, textarea { color: var(--fg); background-color: var(--field); border: 1px solid var(--line); color-scheme: dark; }
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.62); }
select option { background: #34419f; color: #fff; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pf-dialog { background: linear-gradient(160deg, #3547b5, #5b45c6); color: #fff; border: 1px solid var(--line); }
.pf-dialog::backdrop { background: rgba(40, 36, 120, 0.55); }
.photo-thumb, .photo-ticket { background: var(--muted); }

body .boot { --fg: #1f2a6b; --mut: #3d4a93; background: #eef2ff; color: #1f2a6b; } /* écran de chargement : inchangé, clair */
.msg, .msg.ok, .msg.err, .msg.warn, .msg.info { color: #fff; }
.msg { background: rgba(41, 56, 158, 0.94); border-color: rgba(255, 255, 255, 0.3); }
.msg.ok { background: rgba(21, 110, 84, 0.94); } .msg.err { background: rgba(160, 36, 70, 0.94); } .msg.warn { background: rgba(130, 90, 12, 0.94); }
.msg a { color: #fff; text-decoration: underline; }

/* logo : l'image Ballistat est dessinée pour fond clair -> pastille blanche (« un peu de blanc ») dans la barre bleue */
#top .brand { background: #ffffff; border-radius: 12px; padding: 3px 10px 3px 8px; box-shadow: 0 6px 18px -8px rgba(20, 30, 110, 0.6); }

/* lisibilité : texte blanc partout, liens clairs, états colorés lisibles sur fond bleu */
body, #main, main, label, p, li, td, th, h1, h2, h3, h4, summary { color: var(--fg); }
.mut, .small, .eyebrow, small, figcaption, caption { color: var(--mut); }
a { color: var(--link); }
a:hover { color: #fff; }
table { color: var(--fg); }
th { background: rgba(255, 255, 255, 0.12); }
td, th { border-color: var(--line); }

/* ---- parité SM Pronostic : pronostic + probabilité, bouton Analyser, tableau de bord, barres de réussite ---- */
.pick-pct { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 99px; font-weight: 800; font-size: 0.85em; background: rgba(255, 255, 255, 0.16); }
.pick-pct.conf-strong { color: #b8f5cf; } .pick-pct.conf-mid { color: #ffe9b0; } .pick-pct.conf-low { color: #ffd0d4; }
.btn.analyse { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; font-weight: 800; }
.btn.analyse svg { width: 16px; height: 16px; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3, 12px); margin: var(--s3, 12px) 0; }
.tile { display: grid; gap: 4px; padding: var(--s4, 16px); border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.tile-k { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.tile-v { font-size: 1.25rem; overflow-wrap: anywhere; }
.bar-row { display: grid; gap: 6px; margin: 10px 0; }
.bar-head { display: flex; justify-content: space-between; gap: 12px; }
.bar-track { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8aa4ff, #b49bff); }
.bar-fill.good { background: linear-gradient(90deg, #5be3a8, #b8f5cf); } .bar-fill.mid { background: linear-gradient(90deg, #f0b44a, #ffe9b0); } .bar-fill.low { background: linear-gradient(90deg, #f27a90, #ffd0d4); }
.fin-match { display: grid; gap: 8px; }
.fin-duel { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--fg); text-decoration: none; }
.tier-note { display: grid; gap: 10px; border-color: rgba(184, 245, 207, 0.55); }
.fixture-bottom { gap: 8px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .bar-fill { transition: none; } }
/* cartes de match sur petit écran : les pronostics sur toute la largeur, puis Analyser et favori */
@media (max-width: 640px) { .fixture-bottom { display: grid; grid-template-columns: 1fr auto; align-items: center; } .fixture-bottom .fixture-selections { grid-column: 1 / -1; } .fixture-selection { min-width: 0; } .bnav a { font-size: 0.7rem; } }

/* ---- match : équipes empilées avec leur logo (comme l'application de référence) ---- */
.fixture-goals { display: none; }
body .fixture-meta { display: flex !important; align-items: center; gap: 10px; flex-wrap: nowrap; }
body .fixture-meta > :last-child { margin-left: auto; flex: none; }
body .fixture-meta .fixture-competition { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  body .fixture-duel { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  body .fixture-side { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 12px; text-align: left; }
  body .fixture-side strong { flex: 1; text-align: left !important; white-space: normal !important; font-size: 1.05rem; overflow: visible !important; }
  body .fixture-vs { display: none !important; }
  body .fixture-goals { display: inline-block; font-weight: 800; font-size: 1.2rem; min-width: 1.4ch; text-align: right; }
  body .fixture-side .crest, body .fixture-side img { width: 40px !important; height: 40px !important; flex: none; }
}
/* favori : étoile dorée bien visible quand elle est active */
body .star { color: #ffffff; }
body .star[aria-pressed="true"] { color: #ffd36b; background: rgba(255, 211, 107, 0.18); border-color: rgba(255, 211, 107, 0.6); }
body .star[aria-pressed="true"] svg { fill: currentColor; }