/* ============================================================
   MELOTURF — DESIGN SYSTEM « ÉMERAUDE »
   Noir profond · émeraude lumineux · verre fumé · reflets maîtrisés.
   Couche chargée EN DERNIER : retune les tokens de styles.css,
   fournit la coque (sidebar desktop / tab bar mobile), les composants
   partagés (boutons, panneaux, badges, états) et les écrans refondus
   (accueil, cartes de course, analyse).
   Échelle d'espacement : 4 · 8 · 12 · 16 · 24 · 32 · 48.
   Réf. : maquette « MELOTURF — concept 02 » + brief de refonte.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  --bg: #060D0B;
  --bg-deep: #030807;
  --panel: #0C1915;
  --panel-2: #0F1F1A;
  --panel-3: #12251F;
  --glass: rgba(9, 22, 18, .58);
  --glass-2: rgba(12, 28, 23, .5);
  --line: #294039;
  --line-strong: #3A5A4F;
  --line-glow: rgba(55, 242, 197, .35);
  --text: #F5FAF8;
  --muted: #A7BBB4;
  --muted-2: #7E938B;
  /* Émeraude */
  --emerald: #16D9AC;
  --mint: #37F2C5;
  --lime: #37F2C5;              /* alias historique : accent d'action */
  --lime-dark: #042019;         /* texte sur fond menthe */
  --lime-soft: rgba(22, 217, 172, .14);
  --emerald-deep: #0B5C49;
  /* Sémantique (hors identité) */
  --gold: #E6B85C;              /* avertissement / état intermédiaire */
  --cyan: #6EC7FF;              /* information */
  --red: #F28B91;               /* erreur */
  --font-body: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 20px;
  --shadow-1: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-2: 0 20px 50px rgba(0, 0, 0, .5);
  --glow-lime: 0 8px 28px rgba(22, 217, 172, .28);
  --topbar-h: 64px;
  --side-w: 248px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 150ms;
  --t-base: 200ms;
}

/* ---------- 2. BASE ---------- */
html { background: var(--bg); }
body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: #060D0B url("img/glass.webp") 62% 50% / cover no-repeat;
}
body::after {
  /* rayons de lumière diagonaux, comme sur la maquette : halo diffus fondu en « écran » */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 34%, rgba(55, 242, 197, .22) 45%, transparent 56%),
    linear-gradient(104deg, transparent 54%, rgba(22, 217, 172, .15) 63%, transparent 73%),
    radial-gradient(55% 45% at 82% 0%, rgba(22, 217, 172, .28) 0, transparent 62%),
    url("img/bg-glow.webp") center / cover no-repeat;
  mix-blend-mode: screen; opacity: .9;
}
@media (max-width: 700px) { body::before { background-position: 78% 50%; } }
h1, h2, h3, .duel-score, .course-time { font-family: var(--font-display); }
h1 { font-weight: 800; letter-spacing: -.03em; }
h2 { font-weight: 800; letter-spacing: -.02em; }
.eyebrow { color: var(--emerald); letter-spacing: .12em; font-weight: 700; font-size: 11px; }
.subtitle, .weather-note, .responsible-note { color: var(--muted); }
.responsible-note { font-size: 13px; }
::selection { background: var(--mint); color: var(--lime-dark); }
::-webkit-scrollbar-thumb { background: #22382F; border-color: var(--bg); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.num, .tabular, .mt-time, .mt-when, .day-stats strong, .metric strong, .performance-metric strong,
.course-time, .mt-countdown { font-variant-numeric: tabular-nums lining-nums; }
[hidden] { display: none !important; }
.mt-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Icônes inline (famille unique, trait fin) */
.mt-ico, .side-link svg, .bottom-nav svg, .mt-btn svg, .mt-bell svg, .mt-back svg, .mt-sheet svg {
  width: 20px; height: 20px; flex: 0 0 auto;
}

/* ---------- 3. COQUE : SIDEBAR + COLONNE ---------- */
.app-shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.app-col { min-width: 0; display: flex; flex-direction: column; }
.app-col > main { flex: 1; width: min(1360px, calc(100% - 2 * clamp(16px, 3.2vw, 40px))); margin: 0 auto; padding-top: 8px; }

.side-nav {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: 16px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 14px 20px;
  background: linear-gradient(180deg, rgba(8, 18, 15, .62), rgba(5, 12, 10, .72));
  border-right: 1px solid rgba(41, 64, 57, .55);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  z-index: 30;
}
.side-status { display: flex; align-items: center; gap: 8px; padding: 6px 14px 2px; font-size: 12px; color: var(--muted); }
.side-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px var(--emerald); flex: 0 0 auto; }
.side-status.offline i { background: var(--red); box-shadow: 0 0 8px var(--red); }
.side-brand {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 8px 16px; text-decoration: none; color: var(--text);
}
.mt-lockup { width: 196px; height: auto; display: block; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.mt-emblem { width: 34px; height: 34px; display: block; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }
.side-wordmark, .topbar .brand strong {
  font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: .12em;
  color: var(--text);
}
.side-links { display: flex; flex-direction: column; gap: 4px; }
.side-link {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1px solid transparent !important; border-radius: 14px !important;
  background: transparent !important; color: var(--muted) !important;
  font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base), border-color var(--t-base);
}
.side-link:hover { background: rgba(255, 255, 255, .04) !important; color: var(--text) !important; }
.side-link.active {
  background: rgba(22, 217, 172, .16) !important; color: #fff !important;
  border-color: rgba(22, 217, 172, .28) !important; font-weight: 700;
}
.side-link.active svg { color: var(--mint); filter: drop-shadow(0 0 6px rgba(55, 242, 197, .55)); }
.side-link.active::before {
  content: ""; position: absolute; left: -14px; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--mint); box-shadow: 0 0 10px var(--mint);
}
.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }

/* Carte Premium compacte (sidebar) */
.mt-premium-card {
  position: relative; overflow: hidden;
  padding: 16px; border-radius: var(--radius-m);
  background: linear-gradient(160deg, rgba(22, 217, 172, .12), rgba(12, 25, 21, .9) 60%);
  border: 1px solid rgba(22, 217, 172, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.mt-premium-card::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(55, 242, 197, .22), transparent 70%); pointer-events: none;
}
.mt-premium-card .mt-badge { margin-bottom: 8px; }
.mt-premium-card strong { display: block; font-size: 15px; line-height: 1.25; margin-bottom: 4px; }
.mt-premium-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.mt-premium-card ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.mt-premium-card li { display: flex; align-items: center; gap: 6px; }
.mt-premium-card li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); flex: 0 0 auto; }
.mt-premium-card { background-image: linear-gradient(90deg, rgba(10, 22, 18, .96) 0%, rgba(10, 22, 18, .86) 55%, rgba(10, 22, 18, .5) 100%), url("img/premium.webp"); background-size: cover; background-position: center right; }
.mt-premium-card .mt-btn-primary { background: rgba(22, 217, 172, .08); color: var(--mint); border: 1px solid rgba(55, 242, 197, .55); box-shadow: none; }
.mt-premium-card .mt-btn-primary:hover { background: rgba(22, 217, 172, .16); box-shadow: 0 0 20px rgba(22, 217, 172, .2); }
.mt-premium-card > * { position: relative; z-index: 1; }
#mt-premium-compact .mt-premium-card { margin: 0 0 16px; padding-right: 110px; }

/* ---------- 4. TOPBAR ---------- */
.topbar {
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(16px, 3.2vw, 40px) 0;
  display: flex; align-items: center; gap: 10px;
  background: rgba(6, 13, 11, .55);
  border-bottom: 1px solid rgba(41, 64, 57, .4);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  position: sticky; top: 0; z-index: 20;
  justify-content: flex-end;
}
@media (min-width: 1024px) { .topbar .status { display: none !important; } }
.topbar .brand { display: none; align-items: center; gap: 10px; text-decoration: none; }
.topbar .brand .mt-emblem { width: 32px; height: 32px; }
.topbar .status {
  display: inline-flex; align-items: center; gap: 8px; margin-right: auto;
  padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line);
}
.topbar .status span, #api-dot { width: 7px; height: 7px; margin: 0; background: var(--emerald); box-shadow: 0 0 8px var(--emerald); }
.topbar .status b { color: var(--text); font-weight: 600; }
.mt-bell {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  color: var(--muted); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.mt-bell:hover, .mt-bell[aria-expanded="true"] { color: var(--text); border-color: var(--line-strong); background: rgba(255, 255, 255, .05); }
.mt-bell-count {
  position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--mint); color: var(--lime-dark);
  font-size: 10px; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.account-area { display: flex; align-items: center; gap: 8px; margin-left: 0; }
.account-area .account-btn { white-space: nowrap; }
.account-chip {
  min-height: 44px; padding: 6px 12px 6px 6px; gap: 10px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 600; transition: border-color var(--t-fast), background var(--t-fast);
}
.account-chip:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .05); }
.account-chip .avatar { width: 30px; height: 30px; background: var(--emerald); color: var(--lime-dark); }
.account-chip .state-dot { background: var(--emerald); }

/* Popover notifications */
.mt-pop {
  position: absolute; top: calc(100% + 8px); right: clamp(16px, 3.2vw, 40px); z-index: 70;
  width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto;
  padding: 8px; border-radius: var(--radius-m);
  background: rgba(12, 25, 21, .96); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  animation: mt-pop var(--t-base) var(--ease);
}
.mt-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 10px; }
.mt-pop-head strong { font-size: 14px; }
.mt-pop-head button { font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 4px 6px; }
.mt-pop-head button:hover { color: var(--text); }
.mt-notif {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: start;
  width: 100%; padding: 10px 10px; border: 0; border-radius: 12px; background: transparent;
  color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.mt-notif:hover { background: rgba(255, 255, 255, .04); }
.mt-notif.read { opacity: .6; }
.mt-notif strong { font-size: 13.5px; line-height: 1.3; }
.mt-notif span { grid-column: 1; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.mt-notif time { grid-column: 2; grid-row: 1; font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.mt-notif b { grid-column: 1; font-size: 11px; color: var(--emerald); font-weight: 700; }
.mt-pop-empty { padding: 20px 12px 24px; text-align: center; color: var(--muted); font-size: 13px; }
@keyframes mt-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 5. BOUTONS ---------- */
.mt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 14px; border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base), background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.mt-btn:active { transform: scale(.98); }
.mt-btn-primary { background: linear-gradient(100deg, var(--mint), var(--emerald)); color: var(--lime-dark); box-shadow: var(--glow-lime), inset 0 1px 0 rgba(255, 255, 255, .35); }
.mt-btn-primary:hover { box-shadow: 0 10px 34px rgba(22, 217, 172, .4), inset 0 1px 0 rgba(255, 255, 255, .4); filter: brightness(1.04); }
.mt-btn-secondary { background: rgba(255, 255, 255, .04); color: var(--text); border-color: var(--line-strong); }
.mt-btn-secondary:hover { border-color: var(--line-glow); background: rgba(22, 217, 172, .08); }
.mt-btn-tertiary { min-height: 40px; padding: 0 8px; color: var(--mint); background: transparent; }
.mt-btn-tertiary:hover { color: #fff; }
.mt-btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.mt-btn[disabled] { opacity: .5; cursor: default; }
.mt-btn .mt-spin { width: 16px; height: 16px; border: 2px solid rgba(0, 0, 0, .25); border-top-color: currentColor; border-radius: 50%; animation: mt-spin .8s linear infinite; }
@keyframes mt-spin { to { transform: rotate(360deg); } }

/* Boutons historiques alignés sur le système */
/* Hiérarchie : par défaut un bouton de panneau est SECONDAIRE (contour). Seules les
   actions principales d'un écran sont en menthe pleine (liste ci-dessous + .mt-btn-primary). */
.panel button {
  border-radius: 12px !important; min-height: 42px; font-weight: 700;
  color: var(--text) !important; background: rgba(9, 22, 18, .6) !important; border: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-base), background var(--t-base);
}
.panel button:hover:not(:disabled) { transform: none; filter: none; border-color: rgba(55, 242, 197, .5) !important; background: rgba(22, 217, 172, .08) !important; }
#run-race, #bet-save, #duel-save, .gate-cta, .account-btn, .plan-choose, .panel .mt-btn-primary {
  border-radius: 12px !important; border: 0 !important; min-height: 42px;
  font-weight: 700; color: var(--lime-dark) !important;
  background: linear-gradient(100deg, var(--mint), var(--emerald)) !important;
  box-shadow: var(--glow-lime), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
}
#run-race:hover, #bet-save:hover, #duel-save:hover, .panel .mt-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 10px 34px rgba(22, 217, 172, .38) !important; }
.account-btn.ghost, .panel .race-chip, .panel .focus-chip, .panel .pick-slot, .panel .consensus-row, .panel .pace-chip,
.panel .brief-meeting, .panel .highlight-card, .panel .legend-title, .panel .panel-toggle, .panel .alert-horse-link,
.panel [data-read-notification], .panel .db-card, .panel .mt-btn-secondary, .panel .mt-btn-tertiary {
  background: rgba(255, 255, 255, .04) !important; color: var(--text) !important; box-shadow: none !important;
  border: 1px solid var(--line-strong) !important;
}
.panel .mt-btn-tertiary { border: 0 !important; background: transparent !important; color: var(--mint) !important; }
.panel .legend-title { border: 0 !important; background: transparent !important; min-height: 0; }

/* ---------- 6. PANNEAUX & SURFACES ---------- */
.panel, .metric, .performance-metric, .race-meta, .day-stats, .program-hero, .direct-hero, .performance-hero,
.daily-brief, .day-highlights-panel, .hotlist-panel, .race-picker, .direct-live-badge, .lb-you {
  background: var(--glass) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-l) !important;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}
.metric, .performance-metric, .race-meta, .day-stats { border-radius: var(--radius-m) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
.metric::before { background: linear-gradient(90deg, var(--emerald), transparent 70%); opacity: .5; }
.panel { padding: 24px; margin: 16px 0; }
.panel-head { margin-bottom: 16px; gap: 12px; }
.panel h2 { font-size: 22px; font-weight: 700; }
.program-hero, .direct-hero, .performance-hero { padding: 24px clamp(20px, 3vw, 32px) !important; }
#program-view .program-hero { background: transparent !important; border: 0 !important; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 10px 4px 8px !important; margin-bottom: 20px; align-items: end; }
#program-view .program-hero h1 { font-size: clamp(30px, 3.4vw, 46px); margin: 2px 0 4px; }
@media (min-width: 1024px) {
  #program-view .program-hero { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
  #program-view .program-hero h1 { white-space: nowrap; }
}
#program-view .day-stats > div { padding: 10px 16px !important; }
#program-view .day-stats strong { font-size: 20px; }
#program-view .day-stats span { font-size: 10px; }
#program-view .program-hero p { font-size: 17px; color: #C6D6D0; }
#program-view .program-hero .eyebrow { color: var(--muted); letter-spacing: .14em; }
.performance-hero, .direct-hero, .program-hero { margin-bottom: 16px; position: relative; overflow: hidden; isolation: isolate; }
.direct-hero, .performance-hero { background-image: linear-gradient(90deg, rgba(14, 30, 25, .97) 0%, rgba(14, 30, 25, .86) 45%, rgba(14, 30, 25, .4) 100%), url("img/direct-hero.webp") !important; background-size: cover !important; background-position: center right !important; }
.performance-hero { background-image: linear-gradient(90deg, rgba(14, 30, 25, .97) 0%, rgba(14, 30, 25, .8) 50%, rgba(14, 30, 25, .35) 100%), url("img/glass.webp") !important; }
.program-hero h1, .direct-hero h1, .performance-hero h1 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; margin: 2px 0 6px; }
.program-hero p, .direct-hero p, .performance-hero p { margin: 0; color: var(--muted); font-size: 15px; }
.demo-stamp { border-color: var(--line) !important; color: var(--muted) !important; }
.quinte-quicklink { display: none !important; }
.performance-summary { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 12px !important; }
.performance-metric { padding: 16px !important; }
.performance-metric .metric-scope { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.35; color: var(--muted-2); }
.performance-metric strong, .metric strong { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }

/* Badges & pastilles */
.mt-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--mint); background: rgba(22, 217, 172, .1); border: 1px solid rgba(22, 217, 172, .35);
}
.mt-badge-neutral { color: var(--muted); background: rgba(255, 255, 255, .04); border-color: var(--line-strong); }
.mt-status {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap; letter-spacing: 0;
  color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}
.mt-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mt-status.soon { color: var(--mint); border-color: rgba(22, 217, 172, .35); background: rgba(22, 217, 172, .08); }
.mt-status.live { color: #FFB4B9; border-color: rgba(242, 139, 145, .4); background: rgba(242, 139, 145, .08); }
.mt-status.live::before { animation: mt-blink 1.4s ease-in-out infinite; }
.mt-status.done { color: var(--muted); }
.mt-status.await { color: var(--gold); border-color: rgba(230, 184, 92, .35); }
.mt-status.off { color: var(--muted-2); border-style: dashed; }
.mt-status.off::before, .mt-status.done::before { opacity: .5; }
@keyframes mt-blink { 50% { opacity: .35; } }
.quinte-badge { background: linear-gradient(135deg, var(--mint), var(--emerald)) !important; color: var(--lime-dark) !important; box-shadow: none !important; border-radius: 6px; }

/* États : squelettes, vide, erreur */
.mt-skel { position: relative; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.mt-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  transform: translateX(-100%); animation: mt-shimmer 1.6s ease-in-out infinite;
}
@keyframes mt-shimmer { to { transform: translateX(100%); } }
.mt-skel-text { height: 14px; }
.mt-skel-title { height: 22px; width: 60%; }
.mt-state {
  display: grid; justify-items: center; gap: 10px; padding: 40px 20px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-l); color: var(--muted);
}
.mt-state svg { width: 28px; height: 28px; color: var(--muted-2); }
.mt-state strong { color: var(--text); font-size: 16px; }
.mt-state p { margin: 0; font-size: 14px; max-width: 42ch; line-height: 1.5; }
.mt-state.error { border-color: rgba(242, 139, 145, .4); }
.mt-state.error svg { color: var(--red); }

/* ---------- 7. ACCUEIL ---------- */
.program-hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.day-stats {
  display: grid; grid-auto-flow: column; grid-auto-columns: auto; gap: 0; overflow: hidden;
  background: rgba(9, 22, 18, .45) !important; box-shadow: none; border-color: rgba(41, 64, 57, .6) !important;
}
.day-stats > div { padding: 12px 20px !important; border-right: 1px solid var(--line); border-bottom: 0; background: transparent !important; }
.day-stats > div:last-child { border-right: 0; }
.day-stats strong { font-size: 24px; font-weight: 800; color: var(--text); background: none; -webkit-text-fill-color: initial; letter-spacing: -.02em; }
.day-stats span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.day-stats #verified-stat:not([hidden]) { border-left: 1px solid var(--line); }

/* Carte immersive Quinté+ */
.mt-feature { margin: 0 0 16px; }
.mt-feature-card {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 300px;
  border-radius: var(--radius-l); overflow: hidden; isolation: isolate;
  background: #0A1C17 url("img/rays.webp") 40% 60% / cover no-repeat;
  border: 1px solid rgba(55, 242, 197, .45);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(22, 217, 172, .06), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.mt-feature-card::before {
  /* reflet doux dans l'angle supérieur gauche */
  content: ""; position: absolute; left: -10%; top: -40%; width: 60%; height: 90%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(55, 242, 197, .14), transparent); pointer-events: none; z-index: 1;
}
.mt-feature-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mt-feature-media img {
  position: absolute; right: 0; top: 0; height: 100%; width: 68%; object-fit: cover; object-position: 60% 30%;
  display: block; opacity: 0; transition: opacity .4s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%);
  mask-image: linear-gradient(90deg, transparent 0, #000 32%);
}
.mt-feature-media img.is-loaded { opacity: .96; }
.mt-feature-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 24, 19, .72) 0%, rgba(8, 24, 19, .6) 40%, rgba(8, 24, 19, .08) 68%, rgba(8, 24, 19, .2) 100%),
              linear-gradient(0deg, rgba(6, 13, 11, .55) 0%, transparent 45%);
}
.mt-feature-body { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.mt-feature-body .mt-badge, .mt-feature-body .mt-status, .mt-feature-body .mt-btn { text-shadow: none; }
.mt-feature-body { position: relative; z-index: 2; display: grid; align-content: center; gap: 10px; padding: 32px clamp(20px, 3vw, 36px); }
.mt-feature-body .mt-badge { justify-self: start; }
.mt-feature-title { margin: 6px 0 0; font-size: clamp(32px, 3.8vw, 50px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.mt-feature-title small { display: block; font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-top: 8px; }
.mt-feature-name { margin: 0; font-size: clamp(18px, 1.9vw, 26px); font-weight: 700; letter-spacing: -.015em; }
.mt-feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--muted); font-size: 15px; }
.mt-feature-meta .mt-status { height: 28px; }
.mt-feature-result { margin: 0; font-size: 14px; color: var(--muted); }
.mt-feature-result b { color: var(--text); font-variant-numeric: tabular-nums; }
.mt-feature-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.mt-feature-actions .mt-btn-primary { min-height: 50px; padding: 0 24px; font-size: 16px; border-radius: 16px; }
.mt-feature-caption { position: absolute; right: 14px; bottom: 10px; z-index: 2; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 250, 248, .45); }
.mt-feature-card.is-skeleton { min-height: 280px; }
.mt-feature-card.is-skeleton .mt-feature-body { gap: 14px; }

/* Barre d'outils : filtres */
.mt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 20px; }
.mt-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(9, 22, 18, .5); border: 1px solid rgba(41, 64, 57, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mt-seg button + button { position: relative; }
.mt-seg button + button::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 1px; background: rgba(255, 255, 255, .08); }
.mt-seg button[aria-pressed="true"] + button::before, .mt-seg button[aria-pressed="true"]::before { display: none; }
.mt-seg button {
  min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base);
}
.mt-seg button:hover { color: var(--text); }
.mt-seg button[aria-pressed="true"] { background: var(--mint); color: var(--lime-dark); font-weight: 700; box-shadow: 0 4px 16px rgba(55, 242, 197, .28); }
.mt-toolbar .mt-seg.status button { padding: 0 12px; font-size: 13px; }
.mt-select {
  position: relative; display: inline-flex; align-items: center;
}
.mt-select select {
  appearance: none; -webkit-appearance: none; min-height: 46px; padding: 0 38px 0 14px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .035); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.mt-select::after {
  content: ""; position: absolute; right: 16px; width: 7px; height: 7px; pointer-events: none;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg);
}
.mt-toolbar .mt-reset { margin-left: auto; }
.mt-dates { display: inline-flex; gap: 6px; }

/* Prochains départs */
.mt-upcoming { margin: 0 0 28px; }
.mt-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.mt-sec-head h2 { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.025em; }
.mt-sec-head .mt-sub { color: var(--muted); font-size: 14px; }
.mt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mt-card {
  position: relative; display: grid; grid-template-rows: 150px 1fr; overflow: hidden; isolation: isolate;
  min-height: 240px; padding: 0; text-align: left; border-radius: 18px; cursor: pointer;
  background: var(--glass) !important; border: 1px solid var(--line) !important; color: var(--text) !important;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .04); font: inherit;
  transition: transform var(--t-base) var(--ease), border-color var(--t-base), box-shadow var(--t-base);
}
.mt-card:hover { transform: translateY(-2px); border-color: rgba(22, 217, 172, .4) !important; box-shadow: var(--shadow-2), 0 0 0 1px rgba(22, 217, 172, .12); }
.mt-card:active { transform: scale(.985); }
.mt-card-media { position: relative; grid-row: 1; overflow: hidden; background: linear-gradient(135deg, #0D241D, #0A1A15); }
.mt-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s ease; }
.mt-card-media img.is-loaded { opacity: .9; }
.mt-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 24, 19, .15), rgba(8, 24, 19, .9)); }
.mt-card-top { position: absolute; left: 14px; right: 14px; top: 106px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mt-card-time { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.mt-card .mt-status { color: var(--mint); border-color: rgba(55, 242, 197, .55); background: rgba(6, 13, 11, .55); }
.mt-card .mt-status.live { color: #FFB4B9; border-color: rgba(242, 139, 145, .5); }
.mt-card-body { grid-row: 2; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 14px 16px 16px; }
.mt-card-name { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.015em; grid-column: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mt-card-meta { margin: 0; grid-column: 1; font-size: 13.5px; color: var(--muted); }
.mt-card-pick { grid-column: 1; margin-top: 6px; }
.mt-card-arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.mt-arrow {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(22, 217, 172, .4); background: rgba(22, 217, 172, .08); color: var(--mint);
  transition: background var(--t-base), transform var(--t-base) var(--ease);
}
.mt-arrow svg { width: 18px; height: 18px; }
.mt-card:hover .mt-arrow, .mt-row:hover .mt-arrow { background: var(--mint); color: var(--lime-dark); transform: translateX(2px); }
.mt-card.is-skeleton { pointer-events: none; }
.mt-card.is-skeleton .mt-card-media { background: rgba(255, 255, 255, .04); }

/* Pronostic (membres) : pastille compacte */
.mt-pick { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font-size: 13px; color: var(--muted); }
.mt-pick-n { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--mint); color: var(--lime-dark); font-weight: 800; font-size: 13px; }
.mt-pick b { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-pick em { font-style: normal; font-variant-numeric: tabular-nums; }
.mt-pick .mt-tone { height: 22px; padding: 0 8px; font-size: 10.5px; }
.mt-tone.solid { color: var(--mint); border-color: rgba(22, 217, 172, .35); background: rgba(22, 217, 172, .08); }
.mt-tone.playable { color: var(--text); }
.mt-tone.open { color: var(--gold); border-color: rgba(230, 184, 92, .35); }
.mt-tone.avoid { color: var(--red); border-color: rgba(242, 139, 145, .35); }
.mt-pick-lock { color: var(--muted-2); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.mt-pick-lock svg { width: 14px; height: 14px; }

/* Programme complet */
.mt-program { margin-bottom: 32px; }
.mt-board-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); margin: 0; }
.mt-board-summary b { color: var(--text); font-weight: 800; margin-right: 3px; }
.mt-board-summary .ok b { color: var(--mint); }
.mt-board-summary .warn b { color: var(--gold); }
.mt-meeting { margin: 0 0 20px; }
.mt-meeting-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; padding: 0 4px; }
.mt-meeting-head h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.mt-meeting-head .mt-r { color: var(--mint); font-weight: 800; font-size: 13px; letter-spacing: .08em; }
.mt-meeting-head .mt-sub { color: var(--muted); font-size: 13px; }
.mt-meeting-head .mt-src { margin-left: auto; color: var(--muted-2); font-size: 12px; }
.mt-rows { display: grid; gap: 6px; }
.mt-row {
  display: grid; grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr) auto 40px; align-items: center; gap: 12px 16px;
  width: 100%; min-height: 64px; padding: 10px 14px 10px 16px; text-align: left; cursor: pointer;
  border-radius: 14px; border: 1px solid rgba(41, 64, 57, .7) !important; background: rgba(9, 22, 18, .5) !important;
  color: var(--text) !important; font: inherit; box-shadow: none !important;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast) var(--ease);
}
.mt-row:hover { background: rgba(22, 217, 172, .05) !important; border-color: rgba(22, 217, 172, .3) !important; }
.mt-row:active { transform: scale(.995); }
.mt-row.is-done { opacity: .72; }
.mt-row.is-done:hover { opacity: 1; }
.mt-row.is-quinte { border-color: rgba(22, 217, 172, .35) !important; background: linear-gradient(90deg, rgba(22, 217, 172, .07), transparent 40%) !important; }
.mt-row-time { display: grid; line-height: 1.1; }
.mt-row-time b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.mt-row-time small { font-size: 11px; color: var(--muted-2); font-weight: 600; margin-top: 3px; }
.mt-row-main { min-width: 0; display: grid; gap: 2px; }
.mt-row-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-row-name .quinte-badge { margin-right: 6px; font-size: 10px; padding: 3px 6px; vertical-align: 2px; }
.mt-row-meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-row-pick { min-width: 0; }
.mt-row-result { display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.mt-row-result b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; }
.mt-row-result .hit { font-style: normal; font-weight: 700; }
.mt-row-status { justify-self: end; }
.mt-row .mt-arrow { width: 36px; height: 36px; }
.mt-sep { margin: 16px 4px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; }

/* ---------- 8. ANALYSE ---------- */
.mt-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 8px; margin: 8px 0 0;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast);
}
.mt-back:hover { color: var(--text); border-color: var(--line-strong); }
.mt-back svg { width: 16px; height: 16px; }
#analysis-view .hero { padding: 20px 0 16px; gap: 24px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
#analysis-view .hero h1 { font-size: clamp(26px, 3vw, 38px); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; margin: 0 0 8px; }
#analysis-view .hero .eyebrow { font-size: 12px; }
#analysis-view .subtitle { font-size: 14px; margin: 0; }
.race-meta { background: rgba(255, 255, 255, .03) !important; backdrop-filter: none; }
.race-meta div { padding: 12px 16px; }
.race-meta span { font-size: 10.5px; letter-spacing: .08em; margin-bottom: 4px; }
.race-meta strong { font-size: 14px; }
.race-picker { margin-top: 0; padding: 12px 16px; position: static !important; box-shadow: none !important; }
.race-picker label { font-size: 15px; }
.race-picker select { border-radius: 12px; background-color: rgba(255, 255, 255, .04); border-color: var(--line); padding: 12px 42px 12px 14px; }
.race-chip { border-radius: 10px; min-height: 40px; }
.race-chip.active { background: var(--mint) !important; color: var(--lime-dark) !important; box-shadow: none !important; }
.race-actions { margin: 12px 0 4px; gap: 8px; }
.race-actions button { border-radius: 12px; min-height: 42px; background: rgba(255, 255, 255, .03); border-color: var(--line); color: var(--muted); font-weight: 700; }
.race-actions button:hover { border-color: var(--line-strong); color: var(--text); transform: none; }
.race-actions button.active { color: var(--mint); border-color: rgba(22, 217, 172, .45); background: rgba(22, 217, 172, .08); }
#action-feedback { color: var(--emerald); font-size: 12px; }
.mode-toggle { margin: 8px 0 12px; }
.mode-toggle button { min-height: 36px; padding: 0 16px; font-size: 13px; }
.mode-toggle button.active { background: var(--mint); color: var(--lime-dark); font-weight: 700; }
.section-nav { top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); margin: 0 0 16px; padding: 10px 0; background: rgba(6, 13, 11, .9); border-bottom: 1px solid var(--line); }
.section-nav button { min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .03); border-color: var(--line); color: var(--muted); }
.section-nav button:hover { color: var(--text); border-color: var(--line-strong); }
.section-nav button.active { background: var(--lime-soft); border-color: rgba(22, 217, 172, .4); color: var(--mint); }
.summary { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.metric { padding: 16px 18px; }
.metric span { font-size: 11px; letter-spacing: .08em; }
.metric strong { font-size: 22px; margin-top: 6px; }
.expert-pick-panel { border-color: rgba(22, 217, 172, .35) !important; background: linear-gradient(160deg, rgba(22, 217, 172, .08), var(--glass) 55%) !important; }
.expert-pick-panel .pick-slot.base { border-color: rgba(22, 217, 197, .55); background: rgba(22, 217, 172, .1); }
.pick-slot .pick-rank { color: var(--muted); }
.pick-slot.base .pick-rank { color: var(--mint); }
.pick-hl.base { border-color: rgba(22, 217, 172, .45); }
.pick-play-label { color: var(--emerald); }
.pick-reason b { color: var(--mint); }
.rk.top { background: var(--mint); color: var(--lime-dark); }
.proj-seg.win, .legend .win { background: var(--mint); }
.proj-seg.place, .legend .place { background: #4DA98F; }
.proj-seg.top7, .legend .top7 { background: #2E6E66; }
.proj-win { color: var(--mint); }
.score { color: var(--mint); }
.form { color: var(--emerald); }
.tag.joker { border-color: rgba(22, 217, 172, .5); color: var(--mint); background: rgba(22, 217, 172, .08); }
.tag.value { border-color: rgba(110, 199, 255, .5); color: var(--cyan); background: rgba(110, 199, 255, .08); }
.cat.gagnant { color: var(--mint); background: rgba(22, 217, 172, .1); }
.cat.pretendant { color: #FFB4B9; background: rgba(242, 139, 145, .1); }
.cat.outsider { color: var(--gold); background: rgba(230, 184, 92, .1); }
.cat.surprise { color: var(--cyan); background: rgba(110, 199, 255, .1); }
tbody tr:hover { background: rgba(22, 217, 172, .06); box-shadow: inset 3px 0 0 var(--mint); }
tbody tr:hover .number { background: var(--mint); color: var(--lime-dark); border-color: var(--mint); }
th { font-size: 10.5px; letter-spacing: .1em; color: var(--muted-2); }
td { font-size: 14px; padding: 14px 12px; }
.table-wrap { overflow: auto; border-radius: 12px; }
.gate-lock { background: rgba(6, 13, 11, .97); }
.gate-ico { display: none; }
.gate-inner strong { font-size: 17px; }
.gate-inner p { font-size: 13.5px; }
.analysis-loading { border-radius: 12px; }

/* ---------- 9. NAVIGATION MOBILE : TAB BAR + FEUILLE PROFIL ---------- */
.bottom-nav { display: none; }
.mt-sheet-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(3, 8, 7, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: mt-fade var(--t-base) ease; }
.mt-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; max-height: min(88vh, 720px); overflow: auto;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0;
  background: rgba(12, 25, 21, .98); border: 1px solid var(--line-strong); border-bottom: 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); animation: mt-slide-up .22s var(--ease);
}
.mt-sheet-grip { width: 40px; height: 4px; margin: 4px auto 14px; border-radius: 2px; background: var(--line-strong); }
.mt-sheet h2 { margin: 0 0 12px; font-size: 20px; font-weight: 800; }
.mt-sheet-account { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); margin-bottom: 12px; }
.mt-sheet-account .avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--emerald); color: var(--lime-dark); font-weight: 800; overflow: hidden; flex: 0 0 auto; }
.mt-sheet-account .avatar img { width: 100%; height: 100%; object-fit: cover; }
.mt-sheet-account div { min-width: 0; flex: 1; }
.mt-sheet-account strong { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-sheet-account span { font-size: 12.5px; color: var(--muted); }
.mt-sheet-account .mt-btn { flex: 0 0 auto; }
.mt-sheet-links { display: grid; gap: 4px; margin: 0 0 12px; }
.mt-sheet-link {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 12px; border-radius: 14px;
  border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 600;
  text-align: left; cursor: pointer; width: 100%; text-decoration: none;
}
.mt-sheet-link:hover, .mt-sheet-link:active { background: rgba(255, 255, 255, .04); }
.mt-sheet-link svg { color: var(--muted); }
.mt-sheet-link.active { background: var(--lime-soft); border-color: rgba(22, 217, 172, .22); }
.mt-sheet-link.active svg { color: var(--mint); }
.mt-sheet-link .mt-chev { margin-left: auto; width: 16px; height: 16px; color: var(--muted-2); }
.mt-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 12px; }
.mt-sheet-row span { font-size: 15px; font-weight: 600; }
.mt-sheet .mode-toggle { margin: 0; }
.mt-sheet-legal { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 12px 0; font-size: 12.5px; }
.mt-sheet-legal a { color: var(--muted); text-decoration: none; }
.mt-sheet-legal a:hover { color: var(--text); text-decoration: underline; }
.mt-sheet-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--muted); font-size: 20px; cursor: pointer; }
@keyframes mt-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mt-fade { from { opacity: 0; } to { opacity: 1; } }

/* Desktop : la feuille Paramètres devient un panneau centré ; l'invitation compacte vit dans la sidebar */
@media (min-width: 1024px) {
  #mt-premium-compact { display: none; }
  .mt-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(440px, calc(100vw - 48px)); transform: translate(-50%, -50%); border-radius: 24px; border-bottom: 1px solid var(--line-strong); padding: 20px 20px 20px; animation: mt-pop var(--t-base) var(--ease); }
  .mt-sheet-grip { display: none; }
}

/* ---------- 10. PIED DE PAGE ---------- */
footer { color: var(--muted-2); font-size: 12.5px; }
.app-download { border-color: var(--line) !important; background: var(--glass) !important; border-radius: var(--radius-l) !important; }
.app-badge { border-radius: 12px !important; }
.anj-18 { display: inline-grid; place-items: center; min-width: 28px; height: 20px; padding: 0 5px; margin-right: 6px; border-radius: 6px; border: 1px solid var(--red); color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .04em; vertical-align: -3px; }

/* ---------- 11. ACCESSIBILITÉ & PERFORMANCE ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .mt-skel::after { display: none; }
  .mt-feature-media img, .mt-card-media img { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .panel, .topbar, .side-nav, .mt-sheet, .mt-pop, .mt-card, .program-hero, .direct-hero, .performance-hero, .race-picker { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--panel) !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .program-hero, .direct-hero, .performance-hero, .race-picker, .mt-card { background: var(--panel) !important; }
  .topbar { background: rgba(6, 13, 11, .97); }
  .mt-pop, .mt-sheet { background: var(--panel-2); }
}
@media (hover: none) {
  .mt-card:hover, .mt-row:hover { transform: none; }
  .mt-btn:hover { filter: none; }
}

/* ---------- 12. RESPONSIVE ---------- */
@media (max-width: 1180px) {
  :root { --side-w: 220px; }
  .mt-row { grid-template-columns: 60px minmax(0, 1.3fr) minmax(0, 1fr) auto 36px; }
}
@media (max-width: 1023px) {
  .app-shell { display: block; }
  .side-nav { display: none; }
  .topbar .brand { display: flex; margin-right: auto; }
  .topbar .status { display: none; }
  /* Un SEUL dégagement pour la barre fixe : sous le pied de page (le contenu n'en a pas besoin, le pied suit). */
  .app-col > main { padding-bottom: 0 !important; }
  footer { padding: 18px 16px calc(98px + env(safe-area-inset-bottom, 0px)) !important; margin-top: 8px !important; }
  .program-hero { grid-template-columns: 1fr; gap: 16px; }
  .day-stats { justify-self: start; }
  .mt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-cards .mt-card:nth-child(3) { display: none; }
  .mt-row { grid-template-columns: 56px minmax(0, 1fr) auto 36px; }
  .mt-row-pick, .mt-row-result { grid-column: 2 / -1; }
  #analysis-view .hero { grid-template-columns: 1fr; gap: 16px; }

  /* Tab bar : 4 destinations, verre, zones de sécurité */
  .bottom-nav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    padding: 6px; border-radius: 22px;
    background: rgba(10, 22, 18, .9); border: 1px solid var(--line-strong);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2);
  }
  .bottom-nav .view-tab, .bottom-nav .mt-profile-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 54px; padding: 6px 2px; border: 0 !important; border-radius: 16px !important;
    background: transparent !important; color: var(--muted) !important;
    font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: color var(--t-base), background var(--t-base), transform var(--t-fast) var(--ease);
  }
  .bottom-nav svg { width: 22px; height: 22px; }
  .bottom-nav .view-tab.active, .bottom-nav .mt-profile-tab[aria-expanded="true"] { color: var(--mint) !important; background: var(--lime-soft) !important; }
  .bottom-nav .view-tab.active svg { filter: drop-shadow(0 0 8px rgba(55, 242, 197, .6)); }
  .bottom-nav .view-tab:active, .bottom-nav .mt-profile-tab:active { transform: scale(.94); }
}
@media (max-width: 700px) {
  :root { --topbar-h: 58px; }
  .topbar { gap: 8px; padding-left: 16px; padding-right: 16px; }
  .topbar .brand strong { font-size: 15px; letter-spacing: .1em; }
  .account-area { gap: 6px; }
  .account-area .account-btn { padding: 8px 12px; font-size: 13px; min-height: 40px; }
  .mt-bell { width: 40px; height: 40px; }
  .account-chip { padding-right: 8px; }
  .account-chip > span:last-child { display: none; }
  body { font-size: 15px; }
  .app-col > main { width: calc(100% - 32px); }
  .panel { padding: 16px; margin: 12px 0; border-radius: var(--radius-m) !important; }
  .panel h2 { font-size: 20px; }
  .program-hero, .direct-hero, .performance-hero { padding: 18px 16px !important; }
  .program-hero h1, .direct-hero h1, .performance-hero h1 { font-size: 28px; }
  .day-stats { width: 100%; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
  .day-stats > div { padding: 10px 12px !important; }
  .day-stats strong { font-size: 20px; }
  .day-stats #verified-stat:not([hidden]) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }

  /* Carte Quinté+ réduite : image à droite, texte lisible */
  .mt-feature-card { grid-template-columns: 1fr; min-height: 250px; }
  .mt-feature-media img { width: 100%; object-position: 72% 30%; -webkit-mask-image: none; mask-image: none; }
  .mt-feature-media::after { background: linear-gradient(90deg, rgba(8, 24, 19, .95) 0%, rgba(8, 24, 19, .8) 45%, rgba(8, 24, 19, .35) 100%), linear-gradient(0deg, rgba(6, 13, 11, .7), transparent 50%); }
  .mt-feature-body { padding: 20px 18px 22px; gap: 8px; }
  .mt-feature-title { font-size: 30px; }
  .mt-feature-name { font-size: 17px; }
  .mt-feature-meta { font-size: 14px; }
  .mt-feature-actions .mt-btn { min-height: 44px; }

  .mt-toolbar { gap: 8px; }
  .mt-toolbar .mt-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mt-toolbar .mt-seg::-webkit-scrollbar { display: none; }
  .mt-toolbar .mt-reset { margin-left: 0; }
  .mt-sec-head h2 { font-size: 21px; }
  .mt-cards { grid-template-columns: 1fr; gap: 10px; }
  .mt-card { grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr) 118px; min-height: 0; }
  .mt-card-media { grid-column: 2; grid-row: 1 / span 2; min-height: 118px; }
  .mt-card-media::after { background: linear-gradient(90deg, rgba(9, 22, 18, 1), rgba(9, 22, 18, .15) 40%, rgba(9, 22, 18, .1)); }
  .mt-card-top { position: static; grid-column: 1; grid-row: 1; justify-content: flex-start; gap: 10px; padding: 12px 14px 0; }
  .mt-card-body { grid-column: 1; grid-row: 2; padding: 6px 14px 12px; grid-template-columns: 1fr; }
  .mt-card-time { font-size: 24px; text-shadow: none; }
  .mt-card-top .mt-status { height: 24px; font-size: 11.5px; padding: 0 8px; }
  .mt-card-arrow { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
  .mt-sec-head { flex-wrap: wrap; gap: 4px 12px; }
  .mt-sec-head h2 { font-size: 22px; }
  .mt-sec-head .mt-sub { white-space: nowrap; font-size: 13px; }
  .mt-card-arrow .mt-arrow { width: 34px; height: 34px; }
  .mt-card-name { font-size: 16px; -webkit-line-clamp: 1; }
  .mt-row { grid-template-columns: 52px minmax(0, 1fr) 32px; gap: 6px 10px; padding: 10px 12px; }
  .mt-row-status { grid-column: 2; grid-row: 2; justify-self: start; }
  .mt-row-pick, .mt-row-result { grid-column: 2; }
  .mt-row .mt-arrow { grid-column: 3; grid-row: 1 / span 3; width: 32px; height: 32px; }
  .mt-row-time b { font-size: 16px; }
  .mt-row-name { font-size: 15px; white-space: normal; }
  .mt-meeting-head .mt-src { display: none; }

  /* Analyse : partants en cartes */
  #runners-panel .table-wrap { overflow: visible; }
  #runners-panel table, #runners-panel tbody, #runners-panel tr, #runners-panel td { display: block; }
  #runners-panel thead { display: none; }
  #runners-panel tbody tr {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
    margin: 0 0 10px; padding: 14px 14px 12px; border-radius: 14px;
    border: 1px solid var(--line); background: rgba(255, 255, 255, .025); box-shadow: none !important;
  }
  #runners-panel td { padding: 0; border: 0; font-size: 14px; }
  #runners-panel td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 2px; }
  #runners-panel td[data-label="Rang"] { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 800; color: var(--muted); }
  #runners-panel td[data-label="Rang"]::before { display: inline; margin-right: 4px; }
  #runners-panel td[data-label="Cheval"] { grid-column: 1 / -1; padding-right: 52px; }
  #runners-panel td[data-label="Cheval"]::before { display: none; }
  #runners-panel td[data-label="Signal"] { grid-column: 1 / -1; }
  #runners-panel td[data-label="Jockey · entraîneur"] { grid-column: 1 / -1; }
  #runners-panel .score { font-size: 20px; }
  #runners-panel .horse { gap: 10px; }
  .summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .race-meta { grid-template-columns: 1fr 1fr; }
  .race-picker { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .account-area .account-btn.ghost { display: none; }
}
@media (max-width: 400px) {
  .day-stats > div { padding: 10px 8px !important; }
  .day-stats span { font-size: 10px; letter-spacing: .04em; }
  .mt-feature-title { font-size: 26px; }
}

/* ---------- 13. ICÔNES FINES (remplacent les emojis générés par les scripts) ----------
   .mt-i = masque SVG coloré par currentColor ; .mt-dot = pastille d'état. */
.mt-i, [class^="mt-i-"] {
  display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.18em; margin-right: .22em;
  background-color: currentColor; flex: 0 0 auto;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.mt-i:last-child, [class^="mt-i-"]:last-child { margin-right: 0; }
.mt-dot, [class^="mt-dot-"] { display: inline-block; width: .62em; height: .62em; border-radius: 50%; vertical-align: .04em; margin-right: .4em; background: var(--muted); box-shadow: 0 0 6px currentColor; }
.mt-dot-ok { background: var(--mint); color: var(--mint); }
.mt-dot-mid { background: var(--gold); color: var(--gold); }
.mt-dot-warn { background: #F0A35E; color: #F0A35E; }
.mt-dot-bad { background: var(--red); color: var(--red); }
.mt-i-flag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4h11l-1.5 4 1.5 4H5'/%3E%3C/svg%3E"); }
.mt-i-wind { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10a3 3 0 1 0-3-3M3 12h14a3 3 0 1 1-3 3M3 16h8'/%3E%3C/svg%3E"); }
.mt-i-target { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='black'/%3E%3C/svg%3E"); }
.mt-i-flame { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 22c4 0 7-3 7-7 0-3-2-5-3-7-1 2-2 3-3 3 0-3-1-5-3-8-1 4-5 6-5 12a7 7 0 0 0 7 7z'/%3E%3C/svg%3E"); }
.mt-i-timer { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2M9 2h6'/%3E%3C/svg%3E"); }
.mt-i-zap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h8l-1 8 10-12h-8l1-8z'/%3E%3C/svg%3E"); }
.mt-i-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6z'/%3E%3C/svg%3E"); }
.mt-i-users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16 20a5 5 0 0 1 5.5-5'/%3E%3C/svg%3E"); }
.mt-i-trend { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E"); }
.mt-i-rain { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 15a5 5 0 1 1 1-9.9A6 6 0 0 1 20 7a4 4 0 0 1-1 8M8 18v3M12 17v4M16 18v3'/%3E%3C/svg%3E"); }
.mt-i-gem { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9zM2 9h20M10 3l2 6 2-6M8 9l4 12 4-12'/%3E%3C/svg%3E"); }
.mt-i-coins { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='M13.5 9.5a5.5 5.5 0 1 1-4 4'/%3E%3C/svg%3E"); }
.mt-i-warning { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2zM12 10v4M12 18h.01'/%3E%3C/svg%3E"); }
.mt-i-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2l3 7 7 .6-5.3 4.6L18 21l-6-3.5L6 21l1.3-6.8L2 9.6 9 9z'/%3E%3C/svg%3E"); }
.mt-i-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.mt-i-hourglass { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 2h12M6 22h12M7 2c0 6 5 6 5 10s-5 4-5 10M17 2c0 6-5 6-5 10s5 4 5 10'/%3E%3C/svg%3E"); }
.mt-i-medal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='M8 9.5l-3-7h5l2 4 2-4h5l-3 7'/%3E%3C/svg%3E"); }
.mt-i-bot { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='8' width='16' height='12' rx='3'/%3E%3Cpath d='M12 4v4M8.5 13h.01M15.5 13h.01M9 17h6'/%3E%3C/svg%3E"); }
.mt-i-trophy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4Z'/%3E%3Cpath d='M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3'/%3E%3C/svg%3E"); }
.mt-i-heart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21s-8-5-8-11a4 4 0 0 1 8-1 4 4 0 0 1 8 1c0 6-8 11-8 11z'/%3E%3C/svg%3E"); }
.mt-i-bulb { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); }
.mt-i-pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.mt-i-swords { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4l12 12M20 4L8 16M14 14l4 4M10 14l-4 4M3 21l3-3M21 21l-3-3'/%3E%3C/svg%3E"); }
.mt-i-mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.mt-i-news { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 8h6M7 12h10M7 16h10'/%3E%3C/svg%3E"); }
.mt-i-key { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='15' r='4.5'/%3E%3Cpath d='M11.5 11.5L20 3M16 7l2.5 2.5M18.5 4.5L21 7'/%3E%3C/svg%3E"); }
.mt-i-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.mt-i-gift { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4'/%3E%3Cpath d='M5 12v9h14v-9M12 8v13M12 8c-2 0-4.5-1-4.5-3s3-2 4.5 3c1.5-5 4.5-5 4.5-3s-2.5 3-4.5 3'/%3E%3C/svg%3E"); }
.mt-i-card { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
.mt-i-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.mt-i-plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.mt-i-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.mt-i-trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }
.mt-i-eye { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.mt-i-eye-off { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
.mt-i-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.mt-i-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.mt-i-chart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 20V11M12 20V4M19 20v-7'/%3E%3C/svg%3E"); }
.mt-i-dice { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8' cy='8' r='1.3' fill='black'/%3E%3Ccircle cx='16' cy='8' r='1.3' fill='black'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='black'/%3E%3Ccircle cx='8' cy='16' r='1.3' fill='black'/%3E%3Ccircle cx='16' cy='16' r='1.3' fill='black'/%3E%3C/svg%3E"); }
.mt-i-cpu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/%3E%3C/svg%3E"); }
/* Classement : rang médaillé */
.lb-medal { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; font-size: 13px; color: var(--muted); }
.lb-medal.m1 { color: var(--mint); }
.lb-medal.m2 { color: #C9D6D1; }
.lb-medal.m3 { color: var(--gold); }
.lb-avatar-bot [class^="mt-i-"], .lb-avatar-ia [class^="mt-i-"] { margin: 0; width: 1.1em; height: 1.1em; }
.acc-pwd-eye [class^="mt-i-"] { margin: 0; width: 18px; height: 18px; }
.scenario-icon [class^="mt-i-"], .top-icon [class^="mt-i-"], .notification-icon [class^="mt-i-"] { margin: 0; width: 1.15em; height: 1.15em; }
.ds-chip [class^="mt-i-"] { width: .95em; height: .95em; }
.ds-chip.live [class^="mt-dot-"] { margin-right: .4em; }

/* ---------- 14. FORMULAIRES DE COMPTE ---------- */
.acc-modal { background: rgba(10, 22, 18, .96) !important; border-color: var(--line-strong) !important; border-radius: 22px !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.acc-modal h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
.acc-field label { font-size: 13px; color: var(--muted); font-weight: 600; }
.acc-field input, .acc-field select { min-height: 46px; border-radius: 12px !important; border-color: var(--line) !important; background: rgba(255, 255, 255, .035) !important; color: var(--text); font-size: 15px; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.acc-field input:focus, .acc-field select:focus { border-color: var(--mint) !important; box-shadow: 0 0 0 3px rgba(55, 242, 197, .15); }
.acc-field.has-error input, .acc-field.has-error select { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(242, 139, 145, .14); }
.acc-field-error { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--red); }
.acc-field-error::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.acc-check.has-error, label.has-error { color: var(--red); }
.acc-error { font-size: 13px; }
.acc-tabs { background: rgba(9, 22, 18, .5) !important; border: 1px solid var(--line); }
.acc-tabs button.active { background: var(--mint) !important; color: var(--lime-dark) !important; font-weight: 700; }
.acc-submit { min-height: 48px; border-radius: 14px !important; font-size: 15px; position: relative; }
.acc-submit.is-loading { color: transparent !important; pointer-events: none; }
.acc-submit.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(4, 32, 25, .3); border-top-color: var(--lime-dark); border-radius: 50%; animation: mt-spin .8s linear infinite; }
.acc-pwd-eye { color: var(--muted); }

/* ============================================================
   15. ACCUEIL v3 — maquette finale (recherche, stats à icônes,
   carte Quinté+ + top 5 IA, barre de filtres, cartes départs)
   ============================================================ */
/* icônes supplémentaires */
.mt-i-bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 1 1 12 0v5l1.5 2h-15Z'/%3E%3Cpath d='M10 21a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
.mt-i-home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.mt-i-play { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m10 8.5 5 3.5-5 3.5z'/%3E%3C/svg%3E"); }
.mt-i-analysis { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M6 16l4-6 4 3 5-8'/%3E%3C/svg%3E"); }
.mt-i-book { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 4.5A2.5 2.5 0 0 1 7.5 2H19v18H7.5A2.5 2.5 0 0 0 5 22V4.5Z'/%3E%3Cpath d='M5 19.5A2.5 2.5 0 0 0 7.5 22H19M9 7h6'/%3E%3C/svg%3E"); }
.mt-i-calendar { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E"); }
.mt-i-settings { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E"); }
.mt-i-layers { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 12l9 5 9-5M3 16l9 5 9-5'/%3E%3C/svg%3E"); }
.mt-i-grid { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.mt-i-sliders { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8M4 12h2M10 12h10'/%3E%3Ccircle cx='15.5' cy='7' r='2'/%3E%3Ccircle cx='9.5' cy='17' r='2'/%3E%3Ccircle cx='7.5' cy='12' r='2'/%3E%3C/svg%3E"); }
.mt-i-horseshoe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 20V11a6 6 0 0 1 12 0v9'/%3E%3Cpath d='M4 20h4M16 20h4M6 14h.01M18 14h.01'/%3E%3C/svg%3E"); }
.mt-i-jump { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 18c4-9 10-11 18-6'/%3E%3Cpath d='M15 10l6 2-1 6M3 21h18'/%3E%3C/svg%3E"); }
.mt-i-distance { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v18M8 6l4-3 4 3M8 18l4 3 4-3'/%3E%3C/svg%3E"); }
.mt-i-cloud { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 18a5 5 0 1 1 1-9.9A6 6 0 0 1 20 10a4 4 0 0 1-1 8z'/%3E%3C/svg%3E"); }
.mt-i-arrow-up { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); }
.mt-i-arrow-down { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
.mt-i-equal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9h12M6 15h12'/%3E%3C/svg%3E"); }

/* --- barre latérale --- */
.side-brand { align-items: flex-start; padding: 10px 6px 14px; gap: 6px; }
.side-tagline { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding-left: 2px; }
.side-link [class^="mt-i-"] { width: 20px; height: 20px; margin: 0; color: var(--muted); }
.side-link.active [class^="mt-i-"] { color: var(--mint); filter: drop-shadow(0 0 6px rgba(55, 242, 197, .5)); }
.side-live { margin-left: auto; height: 20px; padding: 0 8px; border-radius: 999px; background: #E11D48; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 20px; font-style: normal; box-shadow: 0 0 12px rgba(225, 29, 72, .6); }
.side-nav .side-links { gap: 2px; }
.side-link { min-height: 46px; font-size: 15px; }

/* encart « intelligence » */
.mt-promo { position: relative; overflow: hidden; padding: 18px 16px 16px; border-radius: 18px; border: 1px solid rgba(22, 217, 172, .25); background: linear-gradient(100deg, rgba(10, 22, 18, .97) 0%, rgba(10, 22, 18, .9) 58%, rgba(10, 22, 18, .35) 100%), url("img/premium.webp") right center / cover no-repeat; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.mt-promo > * { position: relative; z-index: 1; }
.mt-promo strong { display: block; font-size: 16px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; max-width: 150px; margin-bottom: 10px; }
.mt-promo ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: #D5E2DD; }
.mt-promo li { display: flex; align-items: center; gap: 8px; }
.mt-promo li::before { content: ""; width: 7px; height: 7px; background: var(--mint); transform: rotate(45deg); flex: 0 0 auto; box-shadow: 0 0 6px rgba(55, 242, 197, .6); }
.mt-promo .mt-btn { width: 100%; min-height: 44px; }

/* --- barre du haut : recherche --- */
.topbar { justify-content: flex-start; gap: 12px; }
.mt-search { position: relative; flex: 1 1 auto; max-width: 620px; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(9, 22, 18, .55); color: var(--muted); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.mt-search:focus-within { border-color: rgba(55, 242, 197, .55); box-shadow: 0 0 0 3px rgba(55, 242, 197, .12); }
.mt-search svg { width: 18px; height: 18px; flex: 0 0 auto; }
.mt-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; outline: none; }
.mt-search input::placeholder { color: var(--muted-2); }
.mt-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mt-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 80; max-height: 60vh; overflow: auto; padding: 6px; border-radius: 16px; background: rgba(10, 22, 18, .98); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); animation: mt-pop var(--t-base) var(--ease); }
.mt-srow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.mt-srow:hover, .mt-srow[aria-selected="true"] { background: rgba(22, 217, 172, .08); }
.mt-srow .mt-sr-k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; min-width: 54px; }
.mt-srow .mt-sr-t { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-srow .mt-sr-t small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.mt-srow .mt-sr-s { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mt-search-empty { padding: 14px; font-size: 13px; color: var(--muted); text-align: center; }
.topbar .account-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 18px; border-radius: 14px !important; font-size: 14px; }
.topbar .account-btn.ghost { background: rgba(9, 22, 18, .55) !important; border: 1px solid var(--line) !important; color: var(--text) !important; }
.topbar .account-btn [class^="mt-i-"] { width: 16px; height: 16px; margin: 0; }
.mt-bell { width: 46px; height: 46px; border-radius: 14px; }
.mt-bell-count { background: #E11D48; color: #fff; }
@media (max-width: 1023px) { .mt-search { display: none; } .topbar { justify-content: flex-end; } }

/* --- titre + 4 cartes de stats --- */
#program-view .program-hero { align-items: center; }
.mt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mt-stat { display: flex; align-items: center; gap: 12px; min-height: 86px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(9, 22, 18, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mt-stat > [class^="mt-i-"] { width: 26px; height: 26px; margin: 0; color: var(--mint); filter: drop-shadow(0 0 8px rgba(55, 242, 197, .45)); }
.mt-stat strong { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.mt-stat span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.25; color: var(--muted); }
#program-view .program-hero h1 { font-size: clamp(28px, 2.7vw, 46px); }
#program-view .program-hero p { font-size: 15px; max-width: 34ch; }
.mt-stats { grid-template-columns: repeat(4, minmax(148px, 1fr)); gap: 8px; }
.mt-stat { padding: 12px 12px; gap: 10px; min-height: 80px; }
.mt-stat strong { font-size: 22px; }
.mt-stat span { font-size: 11.5px; }

/* --- carte Quinté+ v3 --- */
.mt-feature2 { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr); gap: 18px; min-height: 330px; padding: 20px; border-radius: 22px; overflow: hidden; isolation: isolate; border: 1px solid rgba(55, 242, 197, .5); background: #0A1C17 url("img/rays.webp") 40% 60% / cover no-repeat; box-shadow: var(--shadow-2), 0 0 0 1px rgba(22, 217, 172, .08), 0 0 40px rgba(22, 217, 172, .12); }
.mt-feature2 .mt-feature-media { right: 0; left: auto; width: 100%; }
.mt-feature2 .mt-feature-media img { left: 14%; right: auto; width: 58%; object-position: 60% 20%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent 0, #000 26%, #000 82%, transparent); }
.mt-feature2 .mt-feature-media::after { background: linear-gradient(90deg, rgba(8, 24, 19, .75) 0%, rgba(8, 24, 19, .55) 36%, rgba(8, 24, 19, .05) 60%, rgba(8, 24, 19, .35) 100%), linear-gradient(0deg, rgba(6, 13, 11, .6) 0%, transparent 45%); }
.mt-feature2 .mt-feature-body { padding: 10px 4px 6px 8px; align-content: start; gap: 8px; }
.mt-feature2 .mt-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt-ribbon { display: inline-block; padding: 5px 14px; border-radius: 6px; background: linear-gradient(100deg, #E11D48, #BE123C); color: #fff; font-size: 15px; font-weight: 800; font-style: italic; letter-spacing: .01em; transform: skewX(-8deg); box-shadow: 0 6px 18px rgba(225, 29, 72, .35); }
.mt-feature2 .mt-feature-kicker { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.mt-feature2 .mt-feature-kicker b { color: var(--text); }
.mt-feature2 .mt-feature-kicker i { color: var(--mint); }
.mt-feature2 .mt-feature-kicker span { color: var(--mint); text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.mt-feature2 .mt-feature-title { font-size: clamp(30px, 3.4vw, 46px); margin: 0; }
.mt-feature2 .mt-feature-sub { margin: 0; font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; color: #DCE8E3; letter-spacing: -.01em; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.mt-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 10px; background: rgba(6, 13, 11, .55); border: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; font-weight: 600; color: #E6F0EC; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mt-chip [class^="mt-i-"] { width: 15px; height: 15px; margin: 0; color: var(--mint); }
.mt-feature2 .mt-feature-actions { margin-top: 14px; }
.mt-feature2 .mt-feature-actions .mt-btn-primary { min-height: 52px; padding: 0 26px; border-radius: 14px; font-size: 16px; }
.mt-feature-caption { bottom: 8px; right: auto; left: 20px; }
/* panneau top 5 */
.mt-top5 { position: relative; z-index: 2; align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; background: rgba(6, 13, 11, .72); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.mt-top5-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.mt-top5-head h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.mt-top5-head .mt-badge { height: 24px; font-size: 10.5px; }
.mt-top5-row { display: grid; grid-template-columns: 20px 30px 30px minmax(0, 1fr) 44px 48px 16px; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .03); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--t-fast); }
.mt-top5-row:hover { background: rgba(22, 217, 172, .08); }
.mt-top5-row .rk { font-size: 12px; font-weight: 800; color: var(--muted); text-align: center; }
.mt-top5-row .cloth { display: grid; place-items: center; height: 26px; border-radius: 6px; font-size: 13px; font-weight: 800; }
.mt-top5-row .silk { width: 26px; height: 30px; object-fit: contain; }
.mt-top5-row .nm { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-top5-row .pc { font-size: 14px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.mt-top5-row .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mt-top5-row .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--emerald), var(--mint)); }
.mt-top5-row .tr { width: 14px; height: 14px; margin: 0; }
.mt-top5-row .tr.up { color: var(--mint); }
.mt-top5-row .tr.down { color: var(--red); }
.mt-top5-row .tr.flat { color: var(--muted); }
.mt-top5 .mt-top5-cta { margin-top: auto; width: 100%; min-height: 42px; font-size: 14px; }
.mt-top5-lock { display: grid; justify-items: center; gap: 8px; padding: 18px 10px; text-align: center; color: var(--muted); font-size: 13.5px; }
.mt-top5-lock [class^="mt-i-"] { width: 26px; height: 26px; color: var(--mint); }
.mt-top5-lock strong { color: var(--text); font-size: 15px; }
.mt-top5 .mt-skel { height: 40px; border-radius: 10px; }

/* --- barre de filtres v3 --- */
.mt-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.mt-filterbar .mt-seg { background: rgba(9, 22, 18, .6); }
.mt-filterbar .mt-seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; font-size: 14px; }
.mt-filterbar .mt-seg button [class^="mt-i-"] { width: 17px; height: 17px; margin: 0; color: var(--muted); }
.mt-filterbar .mt-seg button[aria-pressed="true"] [class^="mt-i-"] { color: var(--lime-dark); }
.mt-filterbar .mt-seg button[data-disc="Quinté+"] [class^="mt-i-"] { color: #F5B544; }
.mt-filterbar .mt-right { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.mt-filterbar .mt-select select { min-height: 48px; border-radius: 14px; background: rgba(9, 22, 18, .6); padding-left: 16px; font-weight: 600; }
.mt-filterbar .mt-select.has-ico select { padding-left: 40px; }
.mt-filterbar .mt-select.has-ico::before { content: ""; position: absolute; left: 14px; width: 16px; height: 16px; background: var(--muted); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; pointer-events: none; }
.mt-filterbar .mt-btn-secondary { min-height: 48px; border-radius: 14px; background: rgba(9, 22, 18, .6); }
.mt-filterbar .mt-btn-secondary[aria-expanded="true"] { border-color: rgba(55, 242, 197, .55); color: var(--mint); }
.mt-filters-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--line-strong); background: rgba(9, 22, 18, .35); }
.mt-filters-more .mt-lab { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; margin-right: 4px; }

/* --- cartes « Prochains départs » v3 --- */
.mt-sec-head .mt-btn-tertiary { font-size: 15px; }
.mt-cards2 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mt-card2 { position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; border-radius: 18px; border: 1px solid var(--line); background: rgba(9, 22, 18, .6); box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform var(--t-base) var(--ease), border-color var(--t-base), box-shadow var(--t-base); }
.mt-card2:hover { transform: translateY(-2px); border-color: rgba(22, 217, 172, .4); }
.mt-card2.is-quinte { border-color: rgba(55, 242, 197, .6); box-shadow: var(--shadow-1), 0 0 0 1px rgba(55, 242, 197, .25), 0 0 28px rgba(22, 217, 172, .15); }
.mt-card2 .mt-card-media { height: 96px; }
.mt-card2 .mt-card-media::after { background: linear-gradient(180deg, rgba(8, 24, 19, .05), rgba(9, 22, 18, .95)); }
.mt-card2-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 14px; flex: 1; }
.mt-card2 .venue { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #DCE8E3; }
.mt-card2 .venue [class^="mt-i-"] { width: 14px; height: 14px; margin: 0; color: var(--mint); }
.mt-card2 .when { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mt-card2 .when b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.mt-card2 .race { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mt-card2 .race .lbl { flex: 0 0 auto; padding: 3px 8px; border-radius: 7px; background: rgba(255, 255, 255, .07); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.mt-card2 .race .nm { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-card2 .meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 2px; }
.mt-card2 .top3 { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.mt-card2 .top3 b { color: var(--text); font-size: 14px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.mt-card2 .conf { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.mt-card2 .conf .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mt-card2 .conf .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--emerald), var(--mint)); border-radius: 3px; }
.mt-card2 .conf b { color: var(--mint); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mt-card2 .lock { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--muted-2); }
.mt-card2 .lock [class^="mt-i-"] { width: 14px; height: 14px; margin: 0; }
.mt-card2 .mt-btn { margin-top: auto; width: 100%; min-height: 42px; font-size: 14px; border-radius: 12px; }
.mt-card2 .mt-btn-secondary { border-color: rgba(55, 242, 197, .4); color: var(--mint); background: rgba(22, 217, 172, .06); }
/* états (couleurs maquette : rouge en cours, ambre imminent, gris à venir, violet Quinté+) */
.mt-status.soon { color: #F5B544; border-color: rgba(245, 181, 68, .45); background: rgba(245, 181, 68, .1); }
.mt-status.quinte { color: #fff; border-color: transparent; background: linear-gradient(100deg, #7C3AED, #A855F7); box-shadow: 0 4px 14px rgba(139, 92, 246, .35); }
.mt-status.quinte::before { display: none; }
.mt-status.live { color: #FF8A95; border-color: rgba(242, 139, 145, .45); background: rgba(242, 139, 145, .1); }
.mt-status.upcoming { color: #DCE8E3; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.mt-status.upcoming::before { background: #9FB2AB; }

@media (max-width: 1500px) { .mt-cards2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mt-cards2 .mt-card2:nth-child(5) { display: none; } .mt-stats { gap: 8px; } .mt-stat { padding: 12px; gap: 10px; } }
@media (max-width: 1280px) { .mt-cards2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mt-cards2 .mt-card2:nth-child(4) { display: none; } .mt-feature2 { grid-template-columns: 1fr; } .mt-top5 { background: rgba(6, 13, 11, .8); } #program-view .program-hero { grid-template-columns: 1fr; } }
@media (max-width: 1023px) { .mt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mt-cards2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mt-cards2 .mt-card2:nth-child(n+3) { display: none; } .mt-filterbar .mt-right { margin-left: 0; } }
@media (max-width: 700px) {
  .mt-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mt-stat { min-height: 0; padding: 12px; gap: 10px; }
  .mt-stat strong { font-size: 20px; }
  .mt-stat span { font-size: 11px; }
  .mt-feature2 { padding: 14px; min-height: 0; gap: 12px; }
  .mt-feature2 .mt-feature-media { height: 210px; inset: auto 0 auto 0; top: 0; }
  .mt-feature2 .mt-feature-media img { left: 0; width: 100%; height: 210px; object-position: 62% 18%; -webkit-mask-image: none; mask-image: none; }
  .mt-feature2 .mt-feature-media::after { background: linear-gradient(180deg, rgba(8, 24, 19, .1) 0%, rgba(8, 24, 19, .35) 55%, #0A1C17 100%); }
  .mt-feature2 .mt-feature-body { padding: 150px 4px 4px; }
  .mt-feature2 .mt-feature-title { font-size: 28px; }
  .mt-feature2 .mt-feature-sub { font-size: 16px; }
  .mt-chip { height: 28px; font-size: 12.5px; padding: 0 9px; }
  .mt-top5 { padding: 12px; }
  .mt-top5-head h3 { font-size: 16px; }
  .mt-top5-row { grid-template-columns: 18px 28px minmax(0, 1fr) 40px 16px; }
  .mt-top5-row .silk, .mt-top5-row .bar { display: none; }
  .mt-filterbar .mt-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mt-filterbar .mt-seg button { padding: 0 12px; font-size: 13px; }
  .mt-filterbar .mt-seg button span { white-space: nowrap; }
  .mt-cards2 { grid-template-columns: 1fr; }
  .mt-cards2 .mt-card2:nth-child(n+3) { display: flex; }
  .mt-card2 { flex-direction: row; }
  .mt-card2 .mt-card-media { width: 120px; height: auto; flex: 0 0 120px; order: 2; }
  .mt-card2 .mt-card-media::after { background: linear-gradient(90deg, rgba(9, 22, 18, 1), rgba(9, 22, 18, .1) 45%); }
  .mt-card2-body { padding: 12px; }
  .mt-card2 .mt-btn { min-height: 38px; font-size: 13px; }
}

/* ============================================================
   16. MOBILE v3 — maquette téléphone (en-tête, recherche, stats,
   carte Quinté+, départs en défilement, tab bar 5, analyse)
   ============================================================ */
.mt-topbtn { display: none; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; }
.mt-topbtn svg, .mt-topbtn [class^="mt-i-"] { width: 22px; height: 22px; margin: 0; }
.mt-fav-top[aria-pressed="true"] { color: var(--mint); }
.brand-tagline { display: none; }
.mt-ahero, .mt-apanel { display: none; }

@media (max-width: 1023px) {
  .topbar { display: grid; grid-auto-flow: column; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; align-items: center; gap: 4px; padding-left: 10px; padding-right: 10px; }
  .topbar .brand { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; min-width: 0; }
  .topbar .brand .mt-lockup { width: clamp(132px, 40vw, 168px); filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5)); }
  .topbar .brand strong { display: none; }
  .brand-tagline { display: block; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap; }
  .mt-topbtn.mt-menu { display: grid; }
  .mt-topbtn.mt-account-top { display: grid; position: relative; }
  .mt-account-top .mt-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid rgba(55, 242, 197, .5); }
  .mt-account-top .mt-av-ini { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--emerald); color: var(--lime-dark); font-size: 13px; font-weight: 800; }
  .mt-account-top.is-anon { color: var(--lime-dark); background: var(--mint); border-radius: 12px; box-shadow: 0 4px 14px rgba(55, 242, 197, .3); }
  .mt-account-top.is-on::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 2px var(--bg); }
  .mt-account-top.is-lapsed::after { background: var(--red); }
  body[data-view="analysis"] .mt-topbtn.mt-menu { display: none; }
  body[data-view="analysis"] .mt-topbtn.mt-back-top { display: grid; }
  .topbar .mt-right-cluster, .topbar .account-area { display: none !important; }
  .topbar .mt-bell { width: 44px; height: 44px; border: 0; background: transparent; }
  .topbar .mt-bell-count { top: 2px; right: 2px; }
  body[data-view="analysis"] .mt-fav-top:not([hidden]) { display: grid; }
  .topbar-actions { display: flex; align-items: center; gap: 2px; justify-self: end; }
  /* recherche sous l'en-tête */
  .topbar .mt-search { display: none; }
  #mt-search-slot .mt-search { display: flex; max-width: none; margin: 2px 0 14px; min-height: 48px; }
  /* stats : 4 cartes en ligne, icône au-dessus */
  .mt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .mt-stat { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 12px 6px; min-height: 0; }
  .mt-stat > [class^="mt-i-"] { width: 24px; height: 24px; }
  .mt-stat strong { font-size: 22px; }
  .mt-stat span { font-size: 10.5px; line-height: 1.2; overflow-wrap: anywhere; }
  /* carte Quinté+ : photo en haut à droite, texte par-dessus, bouton pleine largeur */
  .mt-feature2 { grid-template-columns: 1fr; padding: 16px; min-height: 0; gap: 14px; }
  .mt-feature2 .mt-feature-media { inset: 0; height: 300px; }
  .mt-feature2 .mt-feature-media img { left: auto; right: -6%; width: 78%; height: 300px; object-position: 50% 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, transparent 0, #000 35%); }
  .mt-feature2 .mt-feature-media::after { background: linear-gradient(90deg, rgba(8, 24, 19, .9) 0%, rgba(8, 24, 19, .55) 45%, rgba(8, 24, 19, .05) 80%), linear-gradient(0deg, #0A1C17 0%, rgba(10, 28, 23, .85) 20%, transparent 60%); }
  .mt-feature2 .mt-feature-body { padding: 0; gap: 8px; min-height: 270px; }
  .mt-feature2 .mt-badges { gap: 8px; }
  .mt-ribbon { font-size: 13px; padding: 4px 11px; }
  .mt-feature2 .mt-feature-kicker { font-size: 14px; }
  .mt-feature2 .mt-feature-title { font-size: clamp(28px, 8vw, 34px); max-width: 62%; }
  .mt-feature2 .mt-feature-sub { font-size: 17px; max-width: 70%; }
  .mt-chips { gap: 6px 8px; }
  .mt-chip { height: 30px; padding: 0 10px; font-size: 13px; }
  .mt-feature2 .mt-feature-actions { margin-top: 10px; }
  .mt-feature2 .mt-feature-actions .mt-btn-primary { width: 100%; min-height: 50px; }
  .mt-feature-caption { display: none; }
  /* top 5 : panneau séparé sous la carte */
  .mt-feature2 .mt-top5 { background: rgba(6, 13, 11, .8); padding: 14px; }
  .mt-top5-head h3 { font-size: 17px; }
  .mt-top5-row { grid-template-columns: 18px 26px 22px minmax(0, 1fr) 38px 40px 14px; gap: 6px; min-height: 42px; padding: 4px 6px; }
  .mt-top5-row .nm { font-size: 13.5px; }
  .mt-top5-row .silk { width: 22px; height: 26px; }
  .mt-top5-row .silk, .mt-top5-row .bar { display: block; }
  .mt-top5-row .tr { display: none; }
  .mt-top5-row .mt-chev { display: block; width: 14px; height: 14px; color: var(--muted); }
  /* barre de filtres : segments défilants, jamais plus larges que l'écran */
  #mt-toolbar { display: block; }
  .mt-filterbar { gap: 8px; width: 100%; min-width: 0; }
  .mt-filterbar .mt-seg { flex: 1 1 100%; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mt-filterbar .mt-seg::-webkit-scrollbar { display: none; }
  .mt-filterbar .mt-seg button { flex: 0 0 auto; }
  .mt-filterbar .mt-right { width: 100%; margin-left: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; }
  .mt-filterbar .mt-select { min-width: 0; }
  .mt-filterbar .mt-select select { width: 100%; min-width: 0; padding: 0 30px 0 12px; font-size: 13px; }
  .mt-filterbar .mt-select.has-ico select { padding-left: 12px; }
  .mt-filterbar .mt-select.has-ico::before { display: none; }
  .mt-filterbar .mt-btn-secondary { padding: 0 14px; }
  .mt-filters-more { width: 100%; }
  /* départs : défilement horizontal, cartes verticales */
  .mt-cards2 { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
  .mt-cards2::-webkit-scrollbar { display: none; }
  .mt-cards2 .mt-card2 { display: flex; flex-direction: column; flex: 0 0 min(232px, 68vw); scroll-snap-align: start; }
  .mt-cards2 .mt-card2:nth-child(n+3) { display: flex; }
  .mt-card2 .mt-card-media { width: auto; height: 92px; flex: 0 0 92px; order: 0; }
  .mt-card2 .mt-card-media::after { background: linear-gradient(180deg, rgba(8, 24, 19, .05), rgba(9, 22, 18, .95)); }
  .mt-card2-body { padding: 10px 12px 12px; }
  .mt-card2 .when b { font-size: 24px; }
  .mt-card2 .mt-btn { min-height: 40px; font-size: 13.5px; }
  /* tab bar 5 entrées */
  .bottom-nav { grid-template-columns: repeat(5, 1fr); }
  .bottom-nav button[data-nav] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 54px; padding: 6px 2px; border: 0; border-radius: 16px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
  .bottom-nav button[data-nav] [class^="mt-i-"], .bottom-nav .view-tab [class^="mt-i-"] { width: 22px; height: 22px; margin: 0; }
  .bottom-nav button.active, .bottom-nav button[data-nav].active { color: var(--mint) !important; background: var(--lime-soft) !important; }
  .bottom-nav button.active [class^="mt-i-"] { filter: drop-shadow(0 0 8px rgba(55, 242, 197, .6)); }

  /* ---- analyse mobile ---- */
  #analysis-view .hero, #analysis-view .race-actions, #mt-back-program { display: none !important; }
  .mt-ahero { display: block; position: relative; margin: 6px -16px 14px; padding: 0 16px 14px; overflow: hidden; }
  .mt-ahero-media { position: relative; height: 230px; margin: 0 -16px; }
  .mt-ahero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 20%; display: block; opacity: 0; transition: opacity .4s; }
  .mt-ahero-media img.is-loaded { opacity: 1; }
  .mt-ahero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 13, 11, .2) 0%, rgba(6, 13, 11, .1) 40%, var(--bg) 100%); }
  .mt-ahero-badges { position: absolute; top: 12px; left: 16px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
  .mt-ahero-badges .mt-badge { background: rgba(6, 13, 11, .7); backdrop-filter: blur(8px); }
  .mt-ahero-badges .mt-badge.q { color: var(--lime-dark); background: var(--mint); border-color: transparent; }
  .mt-ahero-badges .mt-badge.v { color: var(--mint); }
  .mt-ahero-title { position: relative; z-index: 2; margin: -48px 0 0; font-size: clamp(26px, 7.4vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
  .mt-ahero-sub { position: relative; z-index: 2; margin: 4px 0 0; font-size: 16px; font-weight: 700; color: #DCE8E3; }
  .mt-ahero .mt-chips { margin-top: 12px; }
  .mt-ahero-result { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
  .mt-ahero-result b { color: var(--text); }
  .mt-apanel { display: grid; gap: 12px; margin: 0 0 14px; }
  .mt-apanel .panel { margin: 0; }
  .mt-ap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .mt-ap-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
  .mt-ap-conf { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; min-width: 0; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 12px; color: var(--muted); white-space: nowrap; }
  .mt-ap-conf b { color: var(--mint); font-size: 14px; }
  .mt-ap-conf i { width: 34px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; display: inline-block; }
  .mt-ap-conf i::after { content: ""; display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--emerald), var(--mint)); border-radius: 3px; }
  .panel .mt-ap-row { background: rgba(255, 255, 255, .03) !important; color: var(--text) !important; box-shadow: none !important; border: 1px solid var(--line) !important; min-height: 0; }
  .panel .mt-ap-row:hover { filter: none; background: rgba(22, 217, 172, .07) !important; }
  .mt-ap-row { display: grid; grid-template-columns: 32px 38px minmax(0, 1fr) 58px 14px; align-items: center; gap: 10px; width: 100%; padding: 10px; margin-bottom: 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .mt-ap-row:last-of-type { margin-bottom: 0; }
  .mt-ap-row .cloth { display: grid; place-items: center; height: 34px; border-radius: 8px; font-size: 15px; font-weight: 800; }
  .mt-ap-row .silkbox { display: grid; place-items: center; width: 38px; height: 42px; border-radius: 10px; background: rgba(255, 255, 255, .05); overflow: hidden; }
  .mt-ap-row .silkbox img { width: 30px; height: 36px; object-fit: contain; }
  .mt-ap-row .nm { font-size: 14.5px; font-weight: 700; display: block; line-height: 1.2; }
  .mt-ap-row .why { font-size: 12px; color: var(--muted); line-height: 1.3; display: block; }
  .mt-ap-row .pc { display: grid; gap: 4px; justify-items: end; }
  .mt-ap-row .pc i { width: 58px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; display: block; }
  .mt-ap-row .pc i::after { content: ""; display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--emerald), var(--mint)); }
  .mt-ap-row .pc b { font-size: 15px; font-weight: 800; color: var(--mint); font-variant-numeric: tabular-nums; }
  .mt-ap-row .mt-chev { width: 16px; height: 16px; color: var(--muted); }
  .mt-ap-sel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .mt-ap-sel-main h3, .mt-ap-sel-side h3 { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
  .mt-ap-sel-side h3 { font-size: 12px; color: var(--muted); text-align: center; }
  .mt-ap-nums { display: flex; flex-wrap: wrap; gap: 6px; }
  .mt-ap-nums .cloth { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; font-size: 15px; font-weight: 800; }
  .mt-ap-sel-side { display: flex; gap: 10px; }
  .mt-ap-sel-side > div { display: grid; justify-items: center; }
  .mt-ap-note { margin: 0; font-size: 14px; line-height: 1.55; color: #D5E2DD; }
  .mt-ap-note-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 17px; font-weight: 800; }
  .mt-ap-note-head [class^="mt-i-"] { width: 22px; height: 22px; color: var(--mint); margin: 0; }
  .mt-apanel .mt-btn-primary { width: 100%; min-height: 48px; margin-top: 12px; }
  .mt-ap-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mt-ap-actions .mt-btn { min-height: 44px; padding: 0 8px; font-size: 13px; border-radius: 14px; background: rgba(9, 22, 18, .6); border: 1px solid var(--line); color: var(--text); }
  .mt-ap-actions .mt-btn[aria-pressed="true"] { color: var(--mint); border-color: rgba(55, 242, 197, .5); }
  .mt-ap-actions .mt-btn [class^="mt-i-"] { width: 16px; height: 16px; margin: 0; }
  .mt-ap-lock { display: grid; justify-items: center; gap: 8px; padding: 14px 8px 4px; text-align: center; color: var(--muted); font-size: 13.5px; }
  .mt-ap-lock [class^="mt-i-"] { width: 26px; height: 26px; color: var(--mint); }
  .mt-ap-lock strong { color: var(--text); font-size: 15px; }
  #analysis-view .section-nav { margin-bottom: 12px; }
}
@media (max-width: 700px) {
  .topbar { padding-left: 8px; padding-right: 8px; }
  .mt-stat strong { font-size: 20px; }
  .mt-stat span { font-size: 10px; }
}

/* badge de fiabilité : passe à la ligne au lieu d'être coupé */
.metric .reliability-badge { white-space: normal; line-height: 1.3; }

/* Instantané servi depuis le cache : bandeau discret pendant la mise à jour. */
.mt-stale { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: var(--muted); background: rgba(9, 22, 18, .6); border: 1px solid var(--line); }
.mt-stale i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: mt-blink 1.2s ease-in-out infinite; }
.mt-stale.is-offline { color: #FFD3D7; border-color: rgba(242, 139, 145, .4); }
.mt-stale.is-offline i { background: var(--red); box-shadow: 0 0 8px var(--red); animation: none; }

/* ============================================================
   17. SYNTHÈSE « ULTIME SÉLECTION » + « LE TOP, CRITÈRE PAR CRITÈRE »
   ============================================================ */
.topboard-panel { padding: 16px !important; }
.tb-hero { position: relative; overflow: hidden; isolation: isolate; padding: 18px 18px 16px; border-radius: 18px; border: 1px solid rgba(55, 242, 197, .4); background: #0A1C17 url("img/rays.webp") 30% 60% / cover no-repeat; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 30px rgba(22, 217, 172, .1); }
.tb-hero-media { position: absolute; inset: 0; z-index: 0; }
.tb-hero-media img { position: absolute; right: -4%; top: 0; height: 100%; width: 60%; object-fit: cover; object-position: 55% 15%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent 0, #000 38%, #000 85%, transparent); opacity: .95; }
.tb-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 24, 19, .9) 0%, rgba(8, 24, 19, .7) 45%, rgba(8, 24, 19, .15) 75%, rgba(8, 24, 19, .35) 100%), linear-gradient(0deg, rgba(8, 24, 19, .92) 0%, rgba(8, 24, 19, .35) 45%, transparent 70%); }
.tb-hero > * { position: relative; z-index: 1; }
.tb-hero .eyebrow { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px; color: var(--mint); font-size: 11px; letter-spacing: .18em; }
.tb-hero .eyebrow [class^="mt-i-"] { width: 11px; height: 11px; margin: 0; }
.tb-hero h2 { margin: 0; font-size: clamp(26px, 6.4vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.tb-sub { margin: 4px 0 16px; font-size: 14px; color: #C6D6D0; }
.topboard-panel .ultime-combo { justify-content: flex-start; gap: 4px; padding: 0; }
.topboard-panel .ultime-dot { display: block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.topboard-panel .ultime-num {
  display: grid; place-items: center; min-width: 44px; height: 50px; padding: 0 6px; border-radius: 12px !important;
  font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: #fff !important; background: rgba(22, 217, 172, .12) !important; border: 1px solid rgba(55, 242, 197, .55) !important;
  box-shadow: 0 0 14px rgba(22, 217, 172, .22), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base);
}
.topboard-panel .ultime-num:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(22, 217, 172, .4) !important; }
.topboard-panel .ultime-num.base { border-color: var(--mint) !important; }
.topboard-panel .ultime-num:first-child {
  position: relative; min-width: 56px; height: 58px; font-size: 30px; color: #1F1400 !important;
  background: linear-gradient(160deg, #FFE38A, #F2B82B 60%, #D99A12) !important; border-color: #FFD765 !important;
  box-shadow: 0 0 26px rgba(242, 184, 43, .55), inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}
.topboard-panel .ultime-num:first-child::before, .topboard-panel .ultime-num:first-child::after {
  content: ""; position: absolute; top: 50%; width: 14px; height: 30px; transform: translateY(-50%);
  background: #F2B82B; opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 30' fill='black'%3E%3Cpath d='M7 0c3 3 4 7 3 11-2-2-4-5-3-11zM3 6c3 2 5 5 5 9-3-1-5-4-5-9zM1 13c3 1 5 4 6 8-3 0-5-3-6-8zM1 21c3 0 5 2 7 5-3 1-6-1-7-5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 30' fill='black'%3E%3Cpath d='M7 0c3 3 4 7 3 11-2-2-4-5-3-11zM3 6c3 2 5 5 5 9-3-1-5-4-5-9zM1 13c3 1 5 4 6 8-3 0-5-3-6-8zM1 21c3 0 5 2 7 5-3 1-6-1-7-5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.topboard-panel .ultime-num:first-child::before { left: -13px; }
.topboard-panel .ultime-num:first-child::after { right: -13px; transform: translateY(-50%) scaleX(-1); }
.topboard-panel .ultime-combo { padding-left: 12px; }
.topboard-panel .ultime-bases { display: block; margin: 14px 0 0; text-align: left; font-size: 14px; line-height: 1.45; color: #E6F0EC; }
.topboard-panel .ultime-bases::before { content: ""; display: inline-block; vertical-align: -3px; margin-right: 8px; width: 16px; height: 16px; background: #F2B82B; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l3 7 7 .6-5.3 4.6L18 21l-6-3.5L6 21l1.3-6.8L2 9.6 9 9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l3 7 7 .6-5.3 4.6L18 21l-6-3.5L6 21l1.3-6.8L2 9.6 9 9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.topboard-panel .ultime-bases b { color: #F2B82B; }
.topboard-panel .ultime-bases b + b, .topboard-panel .ultime-bases b:nth-of-type(2) { color: var(--mint); }
.tb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 12px; }
.tb-head .top-title { margin: 0; font-size: 14px; letter-spacing: .14em; color: var(--text); }
.tb-head .mt-btn { min-height: 40px; border-radius: 999px; }
.tb-head .mt-btn svg { width: 16px; height: 16px; }
.topboard-panel .top-board { display: grid; gap: 10px; border: 0; border-radius: 0; overflow: visible; }
.topboard-panel .top-row {
  --tr: 22, 217, 172; --tr-img: url("img/bg-glow.webp");
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 36px; grid-template-areas: "ico label go" "ico nums go"; align-items: center; gap: 6px 12px;
  padding: 14px 12px 14px 14px; border-radius: 16px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(var(--tr), .45); background: linear-gradient(90deg, rgba(var(--tr), .16), rgba(9, 22, 18, .9) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.topboard-panel .top-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tr-img) right center / 55% auto no-repeat; opacity: .55; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 70%); mask-image: linear-gradient(90deg, transparent 35%, #000 70%); }
.topboard-panel .top-row::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(9, 22, 18, .2) 50%, rgba(var(--tr), .12) 100%); }
.topboard-panel .top-icon { grid-area: ico; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: rgba(var(--tr), .14); border: 1px solid rgba(var(--tr), .55); color: rgb(var(--tr)); box-shadow: 0 0 16px rgba(var(--tr), .25); }
.topboard-panel .top-icon [class^="mt-i-"] { width: 24px; height: 24px; margin: 0; }
.topboard-panel .top-label { grid-area: label; display: grid; gap: 1px; min-width: 0; }
.topboard-panel .top-label strong { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.topboard-panel .top-label small { font-size: 12.5px; color: var(--muted); }
.topboard-panel .top-nums { grid-area: nums; gap: 6px; }
.topboard-panel .top-num {
  display: grid; place-items: center; min-width: 36px; height: 38px; padding: 0 6px; border-radius: 10px !important;
  font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: #052A20 !important;
  background: linear-gradient(160deg, #5BF5D0, #16D9AC) !important; border: 1px solid rgba(255, 255, 255, .25) !important;
  box-shadow: 0 4px 12px rgba(22, 217, 172, .3), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  transition: transform var(--t-fast) var(--ease);
}
.topboard-panel .top-num:hover { transform: translateY(-2px); }
.topboard-panel .top-num.lead { min-width: 44px; height: 44px; font-size: 20px; color: #1F1400 !important; background: linear-gradient(160deg, #FFE38A, #F2B82B 60%, #D99A12) !important; border-color: #FFD765 !important; box-shadow: 0 0 20px rgba(242, 184, 43, .5), inset 0 1px 0 rgba(255, 255, 255, .5) !important; }
.topboard-panel .top-more { display: grid; place-items: center; min-width: 36px; height: 38px; padding: 0 8px; border-radius: 10px !important; font-size: 14px; font-weight: 800; color: var(--mint) !important; background: rgba(22, 217, 172, .08) !important; border: 1px dashed rgba(55, 242, 197, .5) !important; box-shadow: none !important; cursor: pointer; }
.topboard-panel .top-rest { display: contents; }
.topboard-panel .top-go { grid-area: go; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22) !important; background: rgba(6, 13, 11, .55) !important; color: #fff !important; box-shadow: none !important; cursor: pointer; }
.topboard-panel .top-go svg { width: 18px; height: 18px; }
.topboard-panel .top-go:hover { border-color: rgba(var(--tr), .7) !important; }
.topboard-panel .tr-entourage { --tr: 230, 184, 92; --tr-img: url("img/hero-quinte.webp"); }
.topboard-panel .tr-forme { --tr: 77, 163, 255; --tr-img: url("img/card-trot.webp"); }
.topboard-panel .tr-vitesse { --tr: 242, 114, 124; --tr-img: url("img/rays.webp"); }
.topboard-panel .tr-chances { --tr: 168, 85, 247; --tr-img: url("img/crystal.webp"); }
.topboard-panel .tr-distance { --tr: 240, 163, 94; --tr-img: url("img/card-plat.webp"); }
.topboard-panel .tr-terrain { --tr: 110, 199, 255; --tr-img: url("img/glass.webp"); }
.topboard-panel .tr-valeur { --tr: 22, 217, 172; --tr-img: url("img/bg-glow.webp"); }
.topboard-panel .tr-gains { --tr: 242, 184, 43; --tr-img: url("img/premium.webp"); }
/* sommaire de l'analyse : pilules à icône */
.section-nav button { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; font-size: 14px; }
.section-nav button [class^="mt-i-"] { width: 16px; height: 16px; margin: 0; }
.section-nav button.active [class^="mt-i-"] { color: var(--mint); }
@media (min-width: 701px) {
  .topboard-panel .top-row { grid-template-columns: 56px minmax(220px, .9fr) minmax(0, 1.6fr) 36px; grid-template-areas: "ico label nums go"; }
  .topboard-panel .ultime-num { min-width: 52px; height: 56px; font-size: 26px; }
  .topboard-panel .ultime-num:first-child { min-width: 64px; height: 66px; font-size: 34px; }
}
@media (max-width: 400px) {
  .topboard-panel .ultime-num { min-width: 38px; height: 46px; font-size: 21px; padding: 0 4px; }
  .topboard-panel .ultime-num:first-child { min-width: 50px; height: 54px; font-size: 27px; }
  .topboard-panel .top-num { min-width: 32px; height: 34px; font-size: 15px; }
  .topboard-panel .top-num.lead { min-width: 40px; height: 40px; font-size: 18px; }
}

@media (max-width: 700px) {
  .tb-hero { padding: 120px 14px 14px; }
  .tb-hero-media img { right: 0; width: 100%; height: 150px; object-position: 60% 18%; -webkit-mask-image: none; mask-image: none; }
  .tb-hero-media::after { background: linear-gradient(180deg, rgba(8, 24, 19, .15) 0%, rgba(8, 24, 19, .45) 90px, #0A1C17 150px, #0A1C17 100%); }
  .tb-hero h2 { font-size: 28px; }
  .tb-sub { margin-bottom: 12px; }
  .topboard-panel .top-row { padding: 12px 10px 12px 12px; }
  .topboard-panel .top-row::before { background-size: 70% auto; opacity: .4; }
}

/* ============================================================
   18. « MON PRONO VS L'IA » — Votre top 5 / Le top 5 de l'IA
   ============================================================ */
.myprono-panel .myprono-boards { gap: 14px; }
.myprono-panel .myprono-col { --mc: 242, 184, 43; position: relative; overflow: hidden; isolation: isolate; padding: 0 !important; border-radius: 18px !important; border: 1px solid rgba(var(--mc), .45) !important; background: rgba(9, 22, 18, .7) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 24px rgba(var(--mc), .1); }
.myprono-panel .myprono-col.ia { --mc: 77, 163, 255; }
.myprono-panel .mp-head { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 14px; min-height: 100px; background: linear-gradient(90deg, rgba(var(--mc), .16), rgba(9, 22, 18, .6) 60%); border-bottom: 1px solid rgba(var(--mc), .25); overflow: hidden; }
.myprono-panel .mp-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("img/hero-quinte.webp") right 20% / 55% auto no-repeat; opacity: .75; -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 65%); mask-image: linear-gradient(90deg, transparent 35%, #000 65%); }
.myprono-panel .myprono-col.ia .mp-head::before { background-image: url("img/crystal.webp"); }
.myprono-panel .mp-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: rgba(var(--mc), .14); border: 1px solid rgba(var(--mc), .55); color: rgb(var(--mc)); box-shadow: 0 0 16px rgba(var(--mc), .3); }
.myprono-panel .mp-ico [class^="mt-i-"] { width: 28px; height: 28px; margin: 0; }
.myprono-panel .myprono-col-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.myprono-panel .mp-sub { margin: 2px 0 0; font-size: 13px; color: #C6D6D0; }
.myprono-panel .mp-more { min-height: 38px; border-radius: 999px; white-space: nowrap; background: rgba(6, 13, 11, .6) !important; border-color: rgba(255, 255, 255, .22) !important; color: #fff !important; }
.myprono-panel .mp-more svg { width: 15px; height: 15px; }
.myprono-panel .myprono-list { gap: 8px; padding: 10px; }
.myprono-panel .myprono-row { display: grid; grid-template-columns: 44px 56px minmax(0, 1fr) auto 60px; align-items: center; gap: 10px; padding: 8px 8px 8px 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08) !important; background: rgba(6, 13, 11, .55) !important; color: var(--text) !important; box-shadow: none !important; text-align: left; }
.myprono-panel .myprono-row:hover { border-color: rgba(var(--mc), .55) !important; }
.myprono-panel .mr-rank { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 20px; font-weight: 800; color: #DCE8E3; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.myprono-panel .mr-rank.r1 { color: #1F1400; background: linear-gradient(160deg, #FFE38A, #F2B82B 60%, #D99A12); border-color: #FFD765; box-shadow: 0 0 16px rgba(242, 184, 43, .5); }
.myprono-panel .mr-rank.r2 { color: #121A17; background: linear-gradient(160deg, #F2F5F4, #BFC9C5 60%, #97A39F); border-color: #E3E9E6; }
.myprono-panel .mr-rank.r3 { color: #2A1200; background: linear-gradient(160deg, #F6B46B, #E07F2A 60%, #B8601A); border-color: #F7BE7E; }
.myprono-panel .mr-silk { display: grid; place-items: center; width: 56px; height: 60px; border-radius: 12px; background: linear-gradient(160deg, rgba(var(--mc), .14), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.myprono-panel .mr-silk .silk { width: 38px; height: 44px; object-fit: contain; }
.myprono-panel .mr-horse { display: grid; gap: 3px; min-width: 0; }
.myprono-panel .mr-horse b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.myprono-panel .mr-horse small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.myprono-panel .mr-horse small [class^="mt-i-"] { width: 12px; height: 12px; margin: 0; }
.myprono-panel .mr-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.myprono-panel .mr-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; color: #DCE8E3; background: rgba(22, 217, 172, .08); border: 1px solid rgba(22, 217, 172, .25); white-space: nowrap; }
.myprono-panel .mr-chip [class^="mt-i-"] { width: 12px; height: 12px; margin: 0; color: var(--mint); }
.myprono-panel .mr-chip b { color: var(--mint); font-weight: 800; letter-spacing: .04em; }
.myprono-panel .mr-dist.mid b { color: var(--gold); } .myprono-panel .mr-dist.low b { color: var(--muted); }
.myprono-panel .mr-side { display: flex; align-items: center; gap: 8px; }
.myprono-panel .mr-diverge { font-style: normal; height: 26px; padding: 0 10px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: #F2B82B; background: rgba(242, 184, 43, .12); border: 1px solid rgba(242, 184, 43, .55); white-space: nowrap; }
.myprono-panel .mr-agree { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; color: var(--muted); }
.myprono-panel .mr-agree [class^="mt-i-"] { width: 20px; height: 20px; margin: 0; }
.myprono-panel .myprono-row.agree .mr-agree { color: var(--mint); filter: drop-shadow(0 0 6px rgba(55, 242, 197, .6)); }
.myprono-panel .mr-score { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 12px; background: rgba(22, 217, 172, .08); border: 1px solid rgba(55, 242, 197, .55); box-shadow: inset 0 0 18px rgba(22, 217, 172, .12), 0 0 14px rgba(22, 217, 172, .2); line-height: 1; }
.myprono-panel .mr-score b { font-size: 22px; font-weight: 800; color: var(--mint); font-variant-numeric: tabular-nums; }
.myprono-panel .mr-score small { font-size: 9.5px; color: var(--muted); margin-top: 1px; }
.myprono-panel .myprono-col.ia .mr-score { border-color: rgba(110, 199, 255, .55); box-shadow: inset 0 0 18px rgba(77, 163, 255, .14), 0 0 14px rgba(77, 163, 255, .2); background: rgba(77, 163, 255, .08); }
.myprono-panel .myprono-col.ia .mr-score b { color: #8FC4FF; }
.myprono-panel .myprono-col.ia .mr-chip [class^="mt-i-"], .myprono-panel .myprono-col.ia .mr-chip b { color: #8FC4FF; }
@media (max-width: 1180px) { .myprono-panel .myprono-boards { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .myprono-panel .mp-head { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 14px 12px; }
  .myprono-panel .mp-ico { width: 48px; height: 48px; }
  .myprono-panel .mp-more { grid-column: 1 / -1; justify-self: end; min-height: 34px; font-size: 12.5px; }
  .myprono-panel .myprono-col-title { font-size: 20px; }
  .myprono-panel .myprono-list { padding: 8px; gap: 6px; }
  .myprono-panel .myprono-row { grid-template-columns: 36px 46px minmax(0, 1fr) 50px; grid-template-areas: "rank silk horse score" "rank silk side score"; gap: 4px 8px; padding: 8px 6px; }
  .myprono-panel .mr-rank { grid-area: rank; width: 36px; height: 36px; font-size: 17px; }
  .myprono-panel .mr-silk { grid-area: silk; width: 46px; height: 52px; }
  .myprono-panel .mr-silk .silk { width: 32px; height: 38px; }
  .myprono-panel .mr-horse { grid-area: horse; }
  .myprono-panel .mr-horse b { font-size: 15px; }
  .myprono-panel .mr-side { grid-area: side; justify-self: start; }
  .myprono-panel .mr-agree { width: 24px; height: 24px; }
  .myprono-panel .mr-agree [class^="mt-i-"] { width: 17px; height: 17px; }
  .myprono-panel .mr-diverge { height: 22px; font-size: 11px; }
  .myprono-panel .mr-score { grid-area: score; width: 50px; height: 50px; }
  .myprono-panel .mr-score b { font-size: 18px; }
  .myprono-panel .mr-chips { flex-wrap: nowrap; overflow: hidden; }
  .myprono-panel .mr-chip { height: 22px; font-size: 11px; padding: 0 7px; gap: 3px; }
  .myprono-panel .mr-chip > span { display: none; }
  .myprono-panel .mr-silk { width: 40px; height: 48px; }
  .myprono-panel .mr-silk .silk { width: 28px; height: 34px; }
  .myprono-panel .myprono-row { grid-template-columns: 34px 40px minmax(0, 1fr) 50px; }
  .myprono-panel .mr-rank { width: 34px; height: 34px; font-size: 16px; }
}
@media (min-width: 701px) and (max-width: 1180px) { .myprono-panel .mr-chips { flex-wrap: nowrap; } }

/* ============================================================
   19. ANALYSE EN 7 ONGLETS (Synthèse · Sélection · Partants · Analyses ·
   Simulation · Stratégies · Rythme) + écran Synthèse
   ============================================================ */
#analysis-view.tabbed > .atab-hide { display: none !important; }
.section-nav button[aria-selected="true"], .section-nav button.active { background: var(--lime-soft); border-color: rgba(22, 217, 172, .5); color: var(--mint); font-weight: 700; }
.mt-synth { display: grid; gap: 12px; margin: 0 0 14px; }
.mt-synth:empty { display: none; }
.mt-synth .panel { margin: 0; }
.ms-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 0 10px; }
.ms-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.ms-head small { font-size: 12.5px; color: var(--muted); }
.ms-top5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ms-tile { --c: 22, 217, 172; display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 14px; border: 1px solid rgba(var(--c), .55); background: linear-gradient(180deg, rgba(var(--c), .16), rgba(9, 22, 18, .7)); color: var(--text); font: inherit; cursor: pointer; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.panel .ms-tile, .panel .ms-trend-row, .panel .ms-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important; color: var(--text) !important; filter: none; transform: none; min-height: 0; }
.panel .ms-tile { background: linear-gradient(180deg, rgba(var(--c), .18), rgba(9, 22, 18, .75)) !important; border: 1px solid rgba(var(--c), .55) !important; }
.panel .ms-trend-row { background: rgba(255, 255, 255, .03) !important; border: 1px solid rgba(255, 255, 255, .06) !important; }
.ms-card.coeur { background: rgba(9, 22, 18, .6) !important; color: var(--text) !important; box-shadow: none !important; text-align: left; font: inherit; cursor: pointer; }
.ms-card.coeur .v { color: #fff; }
.ms-tile .cloth { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-size: 16px; font-weight: 800; }
.ms-tile .silk { width: 28px; height: 32px; object-fit: contain; }
.ms-tile b { font-size: 11px; font-weight: 700; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #F5FAF8; }
.ms-tile.lead b { color: #FFE38A; }
.ms-tile.lead { --c: 242, 184, 43; }
.ms-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ms-card { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(9, 22, 18, .6); }
.ms-card .k { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.ms-card .v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.ms-card .v small { font-size: 13px; color: var(--muted); font-weight: 600; }
.ms-card .ms-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); margin-top: 10px; overflow: hidden; }
.ms-card .ms-bar i { display: block; height: 6px; width: var(--w, 0%); border-radius: 3px; background: linear-gradient(90deg, var(--emerald), var(--mint)); }
.ms-card.coeur { border-color: rgba(242, 184, 43, .5); }
.ms-card.coeur .k { color: #F2B82B; display: flex; align-items: center; gap: 5px; }
.ms-card.coeur .k [class^="mt-i-"] { width: 13px; height: 13px; margin: 0; color: #F2B82B; }
.ms-card.coeur .v { font-size: 20px; }
.ms-card.coeur .n { display: block; font-size: 13px; color: #DCE8E3; margin-top: 3px; }
.ms-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ms-info div { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line); background: rgba(9, 22, 18, .55); text-align: center; }
.ms-info [class^="mt-i-"] { width: 20px; height: 20px; margin: 0; color: var(--mint); }
.ms-info b { font-size: 14px; }
.ms-info span { font-size: 11px; color: var(--muted); line-height: 1.15; }
.ms-cta { width: 100%; min-height: 48px; }
.ms-trend { display: grid; gap: 6px; }
.ms-trend-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ms-trend-row [class^="mt-i-"] { width: 18px; height: 18px; margin: 0; }
.ms-trend-row.up [class^="mt-i-"] { color: var(--mint); } .ms-trend-row.down [class^="mt-i-"] { color: var(--red); } .ms-trend-row.fav [class^="mt-i-"] { color: #F2B82B; }
.ms-trend-row b { display: block; font-size: 13.5px; } .ms-trend-row small { display: block; font-size: 12px; color: var(--muted); }
.ms-trend-row em { font-style: normal; font-weight: 800; font-size: 14px; }
.ms-trend-row.up em { color: var(--mint); } .ms-trend-row.down em { color: var(--red); } .ms-trend-row.fav em { color: #F2B82B; }
/* Partants : tri */
.mt-sort { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.mt-sort button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line) !important; background: rgba(9, 22, 18, .6) !important; color: var(--muted) !important; font: inherit; font-size: 13px; font-weight: 600; box-shadow: none !important; }
.mt-sort button[aria-pressed="true"] { color: var(--mint) !important; border-color: rgba(22, 217, 172, .5) !important; background: var(--lime-soft) !important; }
/* Sous-navigation d'un onglet (Analyses) */
.mt-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.mt-subnav button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line) !important; background: rgba(9, 22, 18, .6) !important; color: var(--text) !important; font: inherit; font-size: 13px; font-weight: 700; box-shadow: none !important; }
@media (min-width: 1024px) { .mt-synth { display: none !important; } }
@media (max-width: 1023px) {
  #analysis-view .section-nav { position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); z-index: 12; margin: 0 -16px 12px; padding: 8px 16px; background: rgba(6, 13, 11, .92); }
  #analysis-view .summary, #analysis-view .essentiel-card, #analysis-view .reliability-banner { display: none !important; }
  .mt-ahero { margin-bottom: 8px; }
}

/* ============================================================
   20. « MON PRONO VS L'IA » — profils, curseurs, accord, duel (maquette)
   ============================================================ */
.myprono-panel .eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.myprono-panel .eyebrow [class^="mt-i-"] { width: 13px; height: 13px; margin: 0; color: #F2B82B; }
.myprono-panel h2 { font-size: clamp(24px, 6vw, 30px); }
.myprono-panel h2 .mp-ia { font-style: normal; color: var(--mint); }
.myprono-panel .mp-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(22, 217, 172, .35); background: rgba(22, 217, 172, .08); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.2; }
.myprono-panel .mp-pill [class^="mt-i-"] { width: 20px; height: 20px; margin: 0; color: var(--mint); flex: 0 0 auto; }
.myprono-panel .myprono-intro { font-size: 15px; color: #DCE8E3; }
.myprono-panel .myprono-intro b { color: var(--mint); }
/* profils : pilules contour, seule l'active est remplie */
.myprono-panel .myprono-presets button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px !important; font-size: 14px; font-weight: 700; color: var(--text) !important; background: rgba(9, 22, 18, .6) !important; border: 1px solid rgba(22, 217, 172, .35) !important; box-shadow: none !important; transition: background var(--t-base), color var(--t-base), box-shadow var(--t-base); }
.myprono-panel .myprono-presets button [class^="mt-i-"] { width: 16px; height: 16px; margin: 0; color: var(--mint); }
.myprono-panel .myprono-presets button.active { color: var(--lime-dark) !important; background: linear-gradient(100deg, var(--mint), var(--emerald)) !important; border-color: transparent !important; box-shadow: 0 6px 20px rgba(55, 242, 197, .3) !important; }
.myprono-panel .myprono-presets button.active [class^="mt-i-"] { color: var(--lime-dark); }
/* curseurs : icône en badge, piste dégradée, pouce blanc */
.myprono-panel .myprono-slider { padding: 12px 14px 14px; border-radius: 16px; border: 1px solid rgba(22, 217, 172, .25); background: rgba(9, 22, 18, .6); }
.myprono-panel .ms-head { font-size: 15px; font-weight: 700; align-items: center; margin-bottom: 8px; }
.myprono-panel .ms-head > span { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding-left: 42px; }
.myprono-panel .ms-head > span::before { content: ""; position: absolute; left: 0; top: 50%; width: 32px; height: 32px; transform: translateY(-50%); border-radius: 10px; background: rgba(22, 217, 172, .12); border: 1px solid rgba(22, 217, 172, .4); box-shadow: 0 0 10px rgba(22, 217, 172, .15); }
.myprono-panel .ms-head [class^="mt-i-"] { position: absolute; left: 7px; top: 50%; width: 18px; height: 18px; margin: 0; transform: translateY(-50%); color: var(--mint); }
.myprono-panel .ms-val { font-size: 17px; font-weight: 800; color: var(--mint); }
.myprono-panel input[type="range"] { -webkit-appearance: none; appearance: none; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--emerald) 0%, var(--mint) var(--pct, 50%), rgba(255, 255, 255, .1) var(--pct, 50%)); outline: none; accent-color: var(--mint); }
.myprono-panel input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 0 0 4px rgba(55, 242, 197, .25); cursor: pointer; }
.myprono-panel input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 0 0 4px rgba(55, 242, 197, .25); cursor: pointer; }
.myprono-panel input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(55, 242, 197, .35); }
/* accord des deux mondes */
.myprono-panel .myprono-blend { padding: 16px 14px; border-radius: 18px; border: 1px solid rgba(22, 217, 172, .35); background: rgba(9, 22, 18, .65); }
.myprono-panel .blend-head { align-items: center; }
.myprono-panel .blend-head .myprono-col-title { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.myprono-panel .blend-head .myprono-col-title [class^="mt-i-"] { width: 20px; height: 20px; margin: 0; color: #F2B82B; }
.myprono-panel .blend-label { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(242, 184, 43, .5); background: rgba(242, 184, 43, .1); color: #F2B82B; font-size: 13px; font-weight: 800; white-space: nowrap; }
.myprono-panel #myprono-blend { background: linear-gradient(90deg, #F2B82B 0%, var(--mint) var(--pct, 50%), rgba(255, 255, 255, .1) var(--pct, 50%)); }
.myprono-panel .blend-scale { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.myprono-panel .blend-scale span:nth-child(2) { color: var(--text); font-weight: 700; }
.myprono-panel .final-combo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0 10px; }
.myprono-panel .final-num { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 92px; padding: 10px 4px; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, .12) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(9, 22, 18, .7)) !important; color: var(--text) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important; font: inherit; transition: transform var(--t-fast) var(--ease); }
.myprono-panel .final-num:hover { transform: translateY(-2px); }
.myprono-panel .final-num .fn-rank { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #B8C7C1; }
.myprono-panel .final-num .fn-n { font-size: 30px; font-weight: 800; line-height: 1; color: #fff; }
.myprono-panel .final-num .fn-score { font-size: 14px; font-weight: 700; color: var(--mint); }
.myprono-panel .final-num.both .fn-n { text-decoration: underline; text-decoration-color: var(--mint); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.myprono-panel .final-num.lead { border-color: rgba(55, 242, 197, .7) !important; background: linear-gradient(180deg, rgba(22, 217, 172, .22), rgba(9, 22, 18, .75)) !important; box-shadow: 0 0 20px rgba(22, 217, 172, .25), inset 0 1px 0 rgba(255, 255, 255, .1) !important; }
.myprono-panel .final-num.lead .fn-n { color: var(--mint); }
.myprono-panel .fn-crown { position: absolute; top: -10px; left: 50%; width: 20px; height: 16px; transform: translateX(-50%); background: #F2B82B; filter: drop-shadow(0 0 6px rgba(242, 184, 43, .7)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='black'%3E%3Cpath d='M2 6l5 5 5-9 5 9 5-5-2 13H4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='black'%3E%3Cpath d='M2 6l5 5 5-9 5 9 5-5-2 13H4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.myprono-panel .verdict-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: #C6D6D0; }
.myprono-panel .myprono-final .verdict-note::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; background: var(--mint); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
/* sceller le duel */
.myprono-panel .myprono-duel { position: relative; overflow: hidden; isolation: isolate; padding: 18px 16px !important; border-radius: 18px !important; border: 1px solid rgba(242, 184, 43, .45) !important; background: linear-gradient(90deg, rgba(9, 22, 18, .96) 0%, rgba(9, 22, 18, .85) 55%, rgba(9, 22, 18, .45) 100%), url("img/direct-hero.webp") right center / 60% auto no-repeat !important; }
.myprono-panel .duel-launch-copy .myprono-col-title { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.myprono-panel .duel-launch-copy span { display: block; }
.myprono-panel .verdict-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; }
.myprono-panel .verdict-title [class^="mt-i-"] { width: 16px; height: 16px; margin: 0; color: var(--mint); }
.myprono-panel .myprono-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px; border-radius: 999px !important; background: rgba(9, 22, 18, .6) !important; border: 1px solid rgba(22, 217, 172, .4) !important; color: var(--text) !important; box-shadow: none !important; font-size: 13.5px; font-weight: 700; }
.myprono-panel .myprono-chip b { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--mint); color: var(--lime-dark); font-size: 13px; font-weight: 800; }
.myprono-panel .verdict-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.myprono-panel .duel-launch-copy .myprono-col-title [class^="mt-i-"] { width: 22px; height: 22px; margin: 0; color: #F2B82B; }
.myprono-panel .duel-launch-copy span { font-size: 14px; color: #DCE8E3; }
.myprono-panel .duel-launch-copy b { color: var(--mint); }
.myprono-panel .duel-stake { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(6, 13, 11, .55); font-size: 13px; }
.myprono-panel .duel-stake input { min-height: 42px; border-radius: 10px !important; background: rgba(255, 255, 255, .04) !important; border-color: var(--line) !important; color: var(--text); font-size: 16px; }
.myprono-panel #duel-save { min-height: 52px; border-radius: 16px !important; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.myprono-panel #duel-save::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.6 7.6'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.6 7.6'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 700px) {
  .myprono-panel .final-combo { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .myprono-panel .final-num { min-height: 84px; padding: 10px 2px; }
  .myprono-panel .final-num .fn-n { font-size: 26px; }
  .myprono-panel .myprono-presets button { min-height: 42px; padding: 0 14px; font-size: 13.5px; }
  .myprono-panel .panel-head { flex-direction: column; align-items: flex-start; }
  /* en-tête : la signature ne doit plus chevaucher les onglets */
  :root { --topbar-h: 64px; }
  .topbar .brand .mt-lockup { width: clamp(124px, 36vw, 150px); }
  .brand-tagline { font-size: 7.5px; }
}

/* ============================================================
   21. AUDIT UX — chargement, hiérarchie, contraste, démonstration
   ============================================================ */
/* Stats du jour en attente : pulsation discrète au lieu de tirets figés */
.mt-stats.is-loading strong { color: transparent; position: relative; }
.mt-stats.is-loading strong::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 14px; transform: translate(-50%, -50%); border-radius: 7px; background: rgba(255, 255, 255, .08); animation: mt-blink 1.2s ease-in-out infinite; }
/* Numéros de chevaux : toujours blancs sur pastille sombre, jamais gris sur gris */
.cons-n, .pace-n, .number, .lb-rank, .rk:not(.top) { color: #fff !important; background: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 255, 255, .18) !important; font-weight: 800; }
/* Mon prono : réglages repliés par défaut (mobile), résultat d'abord */
.mp-toggle { display: none; }
@media (max-width: 1023px) {
  .myprono-panel { display: flex; flex-direction: column; }
  .myprono-panel > .panel-head { order: 0; }
  .myprono-panel > .myprono-blend { order: 1; margin-bottom: 12px; }
  .myprono-panel > .myprono-duel { order: 2; margin-bottom: 12px; }
  .myprono-panel > .mp-toggle { order: 3; }
  .myprono-panel > .mp-settings { order: 4; }
  .myprono-panel > .myprono-boards { order: 5; }
  .myprono-panel > .myprono-verdict { order: 6; }
  .myprono-panel > .responsible-note { order: 7; }
  .mp-toggle { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px; margin: 0 0 10px; border-radius: 14px; border: 1px solid rgba(22, 217, 172, .35) !important; background: rgba(9, 22, 18, .6) !important; color: var(--text) !important; text-align: left; font: inherit; box-shadow: none !important; cursor: pointer; }
  .mp-toggle [class^="mt-i-"] { width: 20px; height: 20px; margin: 0; color: var(--mint); justify-self: center; }
  .mp-toggle span { font-size: 15px; font-weight: 800; grid-column: 2; }
  .mp-toggle small { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--muted); }
  .mp-toggle svg { grid-column: 3; grid-row: 1 / span 2; width: 20px; height: 20px; transition: transform var(--t-base) var(--ease); }
  .mp-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .mp-settings { display: none; }
  .mp-settings.is-open { display: block; animation: mt-fade var(--t-base) ease; }
  .myprono-panel .myprono-boards { display: none; }
  .myprono-panel .mp-settings.is-open ~ .myprono-boards { display: grid; }
  .myprono-panel .myprono-verdict { display: none; }
  .myprono-panel .mp-settings.is-open ~ .myprono-verdict { display: flex; }
}
/* Résultats : démonstration vs vérifié */
.perf-demo-banner, .perf-verified { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; }
.perf-demo-banner { border: 1px dashed rgba(230, 184, 92, .7); background: rgba(230, 184, 92, .08); color: #F3D7A0; }
.perf-verified { border: 1px solid rgba(22, 217, 172, .4); background: rgba(22, 217, 172, .07); color: #DCE8E3; }
.perf-demo-banner [class^="mt-i-"], .perf-verified [class^="mt-i-"] { width: 24px; height: 24px; margin: 2px 0 0; }
.perf-demo-banner [class^="mt-i-"] { color: var(--gold); } .perf-verified [class^="mt-i-"] { color: var(--mint); }
.perf-demo-banner strong, .perf-verified strong { display: block; font-size: 15px; margin-bottom: 2px; color: var(--text); }
.perf-demo-banner span, .perf-verified span { font-size: 13.5px; line-height: 1.45; }
#performance-view.is-demo .panel, #performance-view.is-demo .performance-metric { border-style: dashed !important; opacity: .82; }
#performance-view.is-demo .performance-metric strong::after { content: " démo"; font-size: 11px; font-weight: 700; color: var(--gold); vertical-align: super; }
.demo-stamp { display: none !important; }
/* Ancien rendu du programme (démonstration) : jamais affiché dans la nouvelle coque */
#meeting-list > .meeting, #meeting-list > p.panel { display: none !important; }

/* ============================================================
   22. PIED DE PAGE COMPACT (mobile) + invitation PWA discrète
   ============================================================ */
.mt-pwa-hint { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 8px; max-width: 720px; margin: 0 auto 14px; padding: 8px 8px 8px 14px; border-radius: 14px; border: 1px solid rgba(22, 217, 172, .3); background: rgba(22, 217, 172, .06); text-align: left; }
.mt-pwa-txt { font-size: 13px; color: var(--text); font-weight: 600; }
.mt-pwa-go { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(55, 242, 197, .55); background: rgba(22, 217, 172, .1); color: var(--mint); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mt-pwa-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.mt-pwa-tip { position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 95; display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 2px 8px; padding: 14px 14px 14px 16px; border-radius: 16px; border: 1px solid var(--line-strong); background: rgba(10, 22, 18, .98); color: var(--text); font-size: 14px; line-height: 1.45; box-shadow: var(--shadow-2); animation: mt-slide-up .22s var(--ease); }
.mt-pwa-tip > b { color: var(--mint); font-size: 15px; }
.mt-pwa-tip > span { grid-column: 1; color: #DCE8E3; }
.mt-pwa-tip > button { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
@media (max-width: 1023px) {
  footer .app-download { display: none !important; }       /* QR + gros boutons : ordinateur seulement */
  footer { font-size: 11px; line-height: 1.45; }
  footer > span { margin-bottom: 6px; }
  footer .anj-warning { margin: 0 auto 8px; padding: 8px 10px; font-size: 11px; }
  footer .legal-links { font-size: 11.5px; }
  footer .legal-links a { padding: 6px 2px; display: inline-block; }   /* zones tactiles ≥ 32 px */
}
@media (min-width: 1024px) { .mt-pwa-hint { display: none !important; } }
/* Mode installé (PWA) ou coque native : aucune invitation, dégagement identique */
@media (display-mode: standalone) { .mt-pwa-hint, footer .app-download { display: none !important; } }
html.is-native .mt-pwa-hint, html.is-native footer .app-download { display: none !important; }

/* ============================================================
   23. MELOTURF LAB
   ============================================================ */
.lab-panel { border-color: rgba(22, 217, 172, .4) !important; background: linear-gradient(160deg, rgba(22, 217, 172, .07), var(--glass) 50%) !important; }
.lab-head { margin-bottom: 14px; }
.lab-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.lab-head .eyebrow [class^="mt-i-"] { width: 14px; height: 14px; margin: 0; }
.lab-head h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.lab-sub { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; max-width: 60ch; }
.lab-select { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 0 12px; scrollbar-width: none; }
.lab-select::-webkit-scrollbar { display: none; }
.lab-select button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px 0 6px; border-radius: 999px !important; font-size: 13.5px; font-weight: 700; }
.lab-select button[aria-pressed="true"] { border-color: rgba(55, 242, 197, .7) !important; background: var(--lime-soft) !important; color: var(--mint) !important; }
.lab-cloth { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; font-size: 14px; font-weight: 800; flex: 0 0 auto; }
.lab-card { margin: 0 0 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(9, 22, 18, .6); }
.lab-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lab-card-head .eyebrow { margin: 0 0 2px; font-size: 10.5px; }
.lab-card-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.lab-level { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; border: 1px solid; }
.lab-level.sm { height: 24px; font-size: 12px; padding: 0 8px; }
.lab-level.l-robuste { color: var(--mint); border-color: rgba(55, 242, 197, .5); background: rgba(22, 217, 172, .1); }
.lab-level.l-moyen { color: #F2B82B; border-color: rgba(242, 184, 43, .5); background: rgba(242, 184, 43, .1); }
.lab-level.l-fragile { color: #FF8A95; border-color: rgba(242, 139, 145, .5); background: rgba(242, 139, 145, .1); }
.lab-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.lab-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lab-kpis div { padding: 10px 8px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); text-align: center; }
.lab-kpis b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.lab-kpis span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); line-height: 1.2; }
.lab-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.lab-note b { color: var(--text); }
.lab-details { margin-top: 10px; }
.lab-details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--mint); }
.lab-scen { display: grid; gap: 6px; margin-top: 10px; }
.lab-scen-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 48px; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.lab-scen-row b { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.lab-bar { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.lab-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--emerald), var(--mint)); }
.lab-fav { padding: 12px 0 4px; border-top: 1px solid rgba(255, 255, 255, .06); }
.lab-fav:first-of-type { border-top: 0; padding-top: 0; }
.lab-fav-head, .lab-hidden-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lab-fav-head .nm, .lab-hidden-head .nm { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; }
.lab-fav-head .nm small, .lab-hidden-head .nm small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.lab-reasons, .lab-hidden ul { margin: 0; padding: 0 0 0 2px; list-style: none; display: grid; gap: 6px; font-size: 13.5px; color: #DCE8E3; line-height: 1.4; }
.lab-reasons li, .lab-hidden li { display: flex; gap: 8px; }
.lab-reasons li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: #FF8A95; }
.lab-hidden li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--mint); }
.lab-hidden { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.lab-hidden:first-of-type { border-top: 0; padding-top: 0; }
.lab-table { display: grid; gap: 6px; }
.lab-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px 52px 52px 40px; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px !important; border-radius: 12px !important; text-align: left; font: inherit; }
.lab-row .nm { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-row .k { font-size: 13px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.lab-row .lab-level { justify-self: end; }
.lab-legend { margin: 10px 0 0; font-size: 12px; color: var(--muted-2); line-height: 1.45; }
@media (max-width: 700px) {
  .lab-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lab-kpis b { font-size: 17px; }
  .lab-row { grid-template-columns: 30px minmax(0, 1fr) 44px 44px 36px; }
  .lab-row .k:nth-of-type(3) { display: none; }
  .lab-scen-row { grid-template-columns: 96px minmax(0, 1fr) 44px; font-size: 12.5px; }
}

/* LAB — modules 4 et 5 */
.lab-inv-row { display: grid; grid-template-columns: minmax(0, 1fr) 60px 64px; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
.lab-inv-row strong { display: block; font-size: 14px; }
.lab-inv-row small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }
.lab-inv-row b { font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.lab-inv-row em { font-style: normal; text-align: right; font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.lab-inv-row.up em { color: var(--mint); } .lab-inv-row.down em { color: #FF8A95; }
.lab-inv-row.up { border-color: rgba(22, 217, 172, .35); }
.lab-combo { padding: 10px 12px; border-radius: 12px; background: rgba(22, 217, 172, .08); border: 1px solid rgba(22, 217, 172, .35); color: var(--text); }
.lab-inter { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.lab-inter:first-of-type { border-top: 0; padding-top: 0; }
.lab-inter-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.lab-inter-head strong { font-size: 15px; margin-left: 4px; }
.lab-inter p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #DCE8E3; }
.lab-inter.warn .lab-inter-head strong { color: #F2B82B; } .lab-inter.ok .lab-inter-head strong { color: var(--mint); } .lab-inter.info .lab-inter-head strong { color: #8FC4FF; }

/* LAB — badge de validation par module */
.lab-verif { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lab-verif.ok { color: var(--mint); border: 1px solid rgba(55, 242, 197, .5); background: rgba(22, 217, 172, .1); }
.lab-verif.exp { color: var(--muted); border: 1px dashed var(--line-strong); background: rgba(255, 255, 255, .03); }
@media (max-width: 700px) { .lab-card-head { flex-wrap: wrap; } .lab-verif { white-space: normal; height: auto; min-height: 24px; padding: 4px 9px; line-height: 1.3; } }

/* Analyse avant réception du programme : écran d'attente, aucun panneau de démonstration */
#analysis-view.is-demo > *:not(.section-nav):not(#mt-analysis-wait):not(#analysis-loading) { display: none !important; }
#mt-analysis-wait { margin: 8px 0 16px; }

/* Mode Essentiel + onglets : insights.css masque les modules avancés (partants, cotes, stratégies,
   rythme, direct). Quand l'utilisateur ouvre explicitement l'un de ces onglets, son contenu doit
   s'afficher, sinon l'onglet est vide. La Synthèse et la Sélection gardent le filtrage Essentiel. */
body[data-mode="essentiel"] #analysis-view[data-tab="partants"] > .panel:not(.atab-hide):not([hidden]),
body[data-mode="essentiel"] #analysis-view[data-tab="analyses"] > .panel:not(.atab-hide):not([hidden]),
body[data-mode="essentiel"] #analysis-view[data-tab="strategies"] > .panel:not(.atab-hide):not([hidden]),
body[data-mode="essentiel"] #analysis-view[data-tab="rythme"] > .panel:not(.atab-hide):not([hidden]),
body[data-mode="essentiel"] #analysis-view[data-tab="simulation"] > .panel:not(.atab-hide):not([hidden]) { display: block !important; }

/* Bloc « Installez MELOTURF » : QR avec blason + badges de type store */
.app-dl-qr img { width: 148px !important; height: 148px !important; border-radius: 16px !important; padding: 6px !important; }
.app-dl-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.app-dl-brand img { width: 44px; height: 44px; border-radius: 12px; }
.app-dl-brand .app-dl-title { margin: 0 !important; font-family: var(--font-display) !important; font-size: 1.1rem !important; }
.store-badge { display: inline-flex; align-items: center; gap: 12px; min-width: 196px; padding: 9px 18px 9px 14px; border-radius: 12px; background: #000; border: 1px solid rgba(255, 255, 255, .28); color: #fff; text-decoration: none; cursor: pointer; font: inherit; transition: transform .15s ease, border-color .15s ease; }
.store-badge:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .6); color: #fff; }
.store-badge svg { width: 30px; height: 30px; flex: 0 0 auto; }
.store-badge span { display: grid; text-align: left; line-height: 1.1; }
.store-badge small { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; font-weight: 500; }
.store-badge strong { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; font-family: var(--font-display); }
.store-badge.is-soon { opacity: .78; }
.store-badge.is-soon:hover { opacity: 1; }