/* =====================================================================
   Styles propres à certaines pages
   ===================================================================== */

/* ---- Accueil public ---- */
.hero { display: grid; gap: var(--space-6); align-items: center; padding: var(--space-5) 0 var(--space-6); }
.hero h1 { font-size: 2rem; letter-spacing: -.03em; line-height: 1.12; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lead { color: var(--text-2); font-size: 1.05rem; margin-top: var(--space-4); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hero-note { color: var(--muted); font-size: .82rem; margin-top: var(--space-3); }
@media (min-width: 900px) {
    .hero { grid-template-columns: 1.1fr .9fr; padding: var(--space-7) 0; }
    .hero h1 { font-size: 3rem; }
}
.feature { display: flex; flex-direction: column; gap: var(--space-2); }
.feature .icon { width: 28px; height: 28px; color: var(--accent); }
.feature p { color: var(--text-2); font-size: .92rem; }
.preview-card .match-line { display: flex; justify-content: space-between; gap: var(--space-3); font-weight: 600; }
.preview-card + .preview-card { margin-top: var(--space-3); }

/* ---- Authentification ---- */
.auth-wrap { max-width: 440px; margin: var(--space-5) auto; }
.auth-wrap h1 { margin-bottom: var(--space-2); }
.auth-wrap .card { margin-top: var(--space-5); }

/* ---- Analyse d'un match ---- */
.match-hero { text-align: center; }
.match-hero .teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; }
.match-hero .team { font-size: 1.1rem; font-weight: 700; }
.match-hero .vs { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.big-probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.big-prob { background: var(--surface-2); border-radius: 12px; padding: var(--space-3); text-align: center; }
.big-prob strong { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.big-prob span { font-size: .78rem; color: var(--muted); }
.big-prob.is-top { background: var(--accent-soft); color: var(--accent); }
.explain-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.explain-list li { display: flex; gap: var(--space-2); color: var(--text-2); font-size: .92rem; }
.explain-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 8px; flex-shrink: 0; }
.market-table td:last-child { width: 40%; }
.prob-cell { display: flex; align-items: center; gap: var(--space-2); }
.prob-cell .meter { flex: 1; margin: 0; }
.locked { position: relative; }
.locked-overlay { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: var(--space-5); color: var(--text-2); }
.form-letters { display: inline-flex; gap: 3px; }
.form-letters span { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; }
.form-letters .V { background: var(--green-soft); color: var(--green); }
.form-letters .N { background: var(--surface-3); color: var(--text-2); }
.form-letters .D { background: var(--red-soft); color: var(--red); }

/* ---- Générateur ---- */
.generator { display: grid; gap: var(--space-5); }
@media (min-width: 1100px) { .generator { grid-template-columns: 380px 1fr; align-items: start; } .generator-form { position: sticky; top: calc(var(--topbar-h) + var(--space-5)); } }
.step { display: flex; flex-direction: column; gap: var(--space-3); }
.step + .step { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.step-title { display: flex; align-items: center; gap: var(--space-2); font-size: .95rem; }
.step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.advanced summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .9rem; padding: var(--space-2) 0; }
.picked-list { display: flex; flex-direction: column; gap: var(--space-2); }
.picked-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); background: var(--surface-2); border-radius: 10px; padding: var(--space-2) var(--space-3); font-size: .86rem; }
.search-results { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.search-results button { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); background: var(--surface); border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: .86rem; }
.search-results button:hover { background: var(--surface-2); }
.generate-bar { position: sticky; bottom: calc(var(--bottom-nav-h) + var(--safe-bottom)); background: var(--surface); padding: var(--space-3) 0 var(--space-2); margin-top: var(--space-4); }
@media (min-width: 1024px) { .generate-bar { position: static; padding: 0; } }

.results-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.results-summary { font-size: .88rem; color: var(--text-2); }
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 92%; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); scrollbar-width: thin; }
.carousel > * { scroll-snap-align: start; }
@media (min-width: 768px) { .carousel { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); overflow: visible; } }
.carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-2); }
.carousel-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.carousel-dots span.is-active { background: var(--accent); width: 18px; border-radius: 3px; }
@media (min-width: 768px) { .carousel-dots { display: none; } }
.rejections { margin-top: var(--space-3); }
.rejections li { display: flex; justify-content: space-between; font-size: .84rem; color: var(--text-2); padding: 4px 0; border-bottom: 1px dashed var(--line); }
.compare-table th:first-child, .compare-table td:first-child { position: sticky; left: 0; background: var(--surface); }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--radius); min-height: 280px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- Abonnements ---- */
.plans { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { display: flex; flex-direction: column; gap: var(--space-4); }
.plan.is-current { border-color: var(--accent); }
.plan-price { font-size: 1.8rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: .85rem; color: var(--muted); font-weight: 500; }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: .9rem; color: var(--text-2); }
.plan li { display: flex; gap: var(--space-2); }
.plan li .icon { width: 18px; height: 18px; color: var(--accent); }
.plan form { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); }

/* ---- Statistiques ---- */
.calib-row { display: grid; grid-template-columns: 70px 1fr 56px; align-items: center; gap: var(--space-3); font-size: .84rem; padding: 6px 0; }
.calib-bars { position: relative; height: 18px; background: var(--surface-2); border-radius: 4px; }
.calib-bars .pred { position: absolute; top: 0; bottom: 0; left: 0; background: var(--line-strong); border-radius: 4px; }
.calib-bars .obs { position: absolute; top: 5px; height: 8px; left: 0; background: var(--accent); border-radius: 4px; }

/* ---- Notifications ---- */
.notif { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.notif.is-unread { background: rgba(45, 212, 191, .05); }
.notif .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex-shrink: 0; }
.notif.is-read .dot { background: transparent; }

fieldset.step { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
fieldset.step legend { padding: 0; margin-bottom: var(--space-3); }

/* Dans la colonne étroite du générateur (grand écran), 2 profils par ligne pour éviter le débordement. */
@media (min-width: 1100px) {
    .generator-form .segmented { grid-template-columns: repeat(2, 1fr); }
    .generator { grid-template-columns: 400px minmax(0, 1fr); }
}