/* ==========================================================================
   MONTANTE VIP — Feuille de style principale
   Thème premium sombre, mobile-first, sans framework.
   ========================================================================== */

:root {
  /* Couleurs */
  --bg: #0b1020;
  --bg-2: #0f1530;
  --surface: #141b30;
  --surface-2: #1b2440;
  --surface-3: #232d4f;
  --border: #2a3556;
  --text: #eef2fb;
  --text-soft: #aab4cf;
  --text-mute: #7f8aac;

  --primary: #f5b301;          /* or / doré premium */
  --primary-dark: #d99a00;
  --primary-soft: rgba(245, 179, 1, 0.12);
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.14);

  --green: #22c55e;
  --green-soft: rgba(34, 197, 94, 0.14);
  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.14);
  --amber: #f59e0b;
  --amber-soft: rgba(245, 158, 11, 0.14);
  --slate: #64748b;
  --slate-soft: rgba(100, 116, 139, 0.16);

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.25);
  --container: 1140px;
  --font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* --- Reset léger -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(59, 130, 246, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(245, 179, 1, 0.08), transparent 55%);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
code {
  background: var(--surface-2); padding: .12em .4em; border-radius: 5px;
  font-size: .9em; color: var(--primary);
}
hr { border: none; border-top: 1px solid var(--border); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 18px; }
.narrow { max-width: 820px; }
.site-main { min-height: 60vh; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--primary);
  color: #111; padding: .6rem 1rem; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.text-gradient {
  background: linear-gradient(90deg, var(--primary), #ffe08a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.muted { color: var(--text-mute); }

/* --- Header / Navigation ----------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 16, 32, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); font-weight: 800; font-size: 1.15rem; }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 1.4rem; }
.brand-text { letter-spacing: .3px; }
.brand-logo { height: 70px; width: auto; display: block; }
.footer-logo { height: 92px; margin-bottom: .6rem; }

.nav-toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 46px; background: #10172a; border: 1px solid rgba(245,179,1,.65);
  border-radius: 10px; cursor: pointer; padding: 0; box-shadow: var(--shadow-soft);
}
.nav-icon {
  display: block; width: 27px; height: 27px; fill: none; stroke: var(--primary);
  stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
}
.nav-icon-close { display: none; }
.nav-toggle span { display: block; width: 24px; height: 3px; background: var(--primary); border-radius: 2px; transition: .25s; }
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle.open { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); border-color: var(--primary); }
.nav-toggle.open .nav-icon-menu { display: none; }
.nav-toggle.open .nav-icon-close { display: block; stroke: #1a1300; }
.nav-toggle.open span { background: #1a1300; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.primary-nav { display: none; }
.primary-nav.open {
  display: flex; flex-direction: column; gap: .55rem;
  position: absolute; left: 0; right: 0; top: 78px;
  background: rgba(11, 16, 32, 0.98); border-top: 1px solid rgba(245,179,1,.2); border-bottom: 1px solid var(--border);
  padding: 14px 18px 20px; box-shadow: 0 18px 38px rgba(0,0,0,.45);
}
.primary-nav a {
  color: var(--text); font-weight: 700; padding: .72rem .82rem; border-radius: 8px;
}
.primary-nav.open a:not(.btn) { background: rgba(27,36,64,.74); border: 1px solid rgba(42,53,86,.85); }
.primary-nav a:hover, .primary-nav a.active { color: var(--primary); text-decoration: none; }
.primary-nav .btn-primary, .primary-nav .nav-cta, .primary-nav .btn-primary:hover, .primary-nav .nav-cta:hover {
  color: #1a1300;
}
.primary-nav .nav-cta { padding: .78rem 1rem; }
.primary-nav .nav-admin { color: var(--accent); }
.nav-logout { margin-top: .3rem; }

/* --- Boutons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: .98rem; line-height: 1; cursor: pointer;
  padding: .85rem 1.4rem; border-radius: 11px; border: 1px solid transparent;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease, border-color .2s;
  text-align: center; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(180deg, var(--primary), var(--primary-dark)); color: #1a1300; box-shadow: 0 8px 20px rgba(245, 179, 1, 0.25); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(245, 179, 1, 0.35); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { background: var(--surface-2); color: var(--text-soft); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); }
.btn-danger { background: linear-gradient(180deg, #f05252, var(--red)); color: #fff; }
.btn-danger:hover { box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); }
.btn-block { width: 100%; }
.btn-lg { padding: 1rem 1.7rem; font-size: 1.05rem; }
.btn-sm { padding: .55rem .9rem; font-size: .86rem; }
.btn-xs { padding: .4rem .65rem; font-size: .78rem; border-radius: 8px; }
.inline-form { display: inline; }

/* --- Badges & pills ----------------------------------------------------- */
.badge {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .4px;
  padding: .4rem .8rem; border-radius: 999px; text-transform: uppercase;
}
.badge-soft { background: var(--primary-soft); color: var(--primary); border: 1px solid rgba(245,179,1,.25); }
.badge-live { background: var(--green-soft); color: var(--green); border: 1px solid rgba(34,197,94,.3); }

.status-pill {
  display: inline-block; font-size: .76rem; font-weight: 700; padding: .3rem .7rem;
  border-radius: 999px; white-space: nowrap;
}
.status-pending { background: var(--amber-soft); color: var(--amber); }
.status-won { background: var(--green-soft); color: var(--green); }
.status-lost { background: var(--red-soft); color: var(--red); }
.status-void { background: var(--slate-soft); color: #9aa6c2; }

/* --- Sections ----------------------------------------------------------- */
.section { padding: 64px 0; }
.section-alt { background: rgba(20, 27, 48, 0.55); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-title { font-size: 1.9rem; text-align: center; margin-bottom: 2.2rem; }
.section-title.left { text-align: left; margin-bottom: 0; }
.section-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; gap: 1rem; }
.link-arrow { font-weight: 700; }
.home-why-section { padding-top: 28px; }

/* --- Hero --------------------------------------------------------------- */
.hero { padding: 56px 0 40px; }
.hero-inner { display: grid; gap: 38px; }
.hero-content { max-width: 780px; }
.hero-title { font-size: 2.3rem; margin-top: 1rem; }
.hero-subtitle { font-size: 1.1rem; color: var(--text-soft); max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.4rem 0 1rem; }
.hero-note { font-size: .86rem; color: var(--text-mute); }

/* Cartes de pronostic */
.prono-card {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow); position: relative;
}
.prono-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.palier-tag {
  background: var(--primary-soft); color: var(--primary); font-weight: 800;
  padding: .3rem .75rem; border-radius: 9px; font-size: .9rem;
}
.prono-match { font-size: 1.35rem; margin: .2rem 0 .15rem; }
.prono-date { color: var(--text-mute); margin: 0 0 1rem; text-transform: capitalize; font-size: .95rem; }
.prono-pred {
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px;
  padding: .8rem .9rem; font-weight: 600; margin-bottom: 1rem;
}
.prono-pred span { color: var(--text-soft); font-weight: 500; }
.prono-live-score {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .25rem .8rem;
  background: rgba(11, 16, 32, .54); border: 1px solid var(--border); border-radius: 10px;
  padding: .72rem .85rem; margin: 0 0 1rem;
}
.live-score-label {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--text-soft); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
}
.live-score-label::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--amber);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .12);
}
.prono-live-score.is-final .live-score-label::before {
  background: var(--green); box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}
.live-score-value { justify-self: end; color: var(--text); font-size: 1.32rem; line-height: 1; font-weight: 900; }
.live-score-muted { justify-self: end; color: var(--text-mute); font-size: .85rem; font-weight: 700; }
.live-score-time { grid-column: 1 / -1; color: var(--text-mute); font-size: .76rem; }
.prono-meta { display: flex; gap: 12px; }
.prono-meta > div {
  flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: .65rem .8rem; display: flex; flex-direction: column; gap: .15rem;
}
.meta-label { font-size: .72rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: .5px; }
.meta-value { font-size: 1.2rem; font-weight: 800; color: var(--primary); }
.prono-note { font-size: .85rem; color: var(--text-mute); margin: 1rem 0 0; }
.prono-note .note-label { color: var(--text-soft); font-weight: 700; }
.prono-foot { margin-top: .9rem; font-size: .78rem; color: var(--text-mute); border-top: 1px solid var(--border); padding-top: .7rem; text-transform: capitalize; }
.prono-card-live.status-border-won { border-left: 4px solid var(--green); }
.prono-card-live.status-border-lost { border-left: 4px solid var(--red); }
.prono-card-live.status-border-pending { border-left: 4px solid var(--amber); }
.prono-card-live.status-border-void { border-left: 4px solid var(--slate); }

/* Méta sur 3 colonnes (Cote / Mise / Gain estimé) */
.prono-meta-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.prono-meta-3 .meta-value { font-size: 1.05rem; }
.meta-gain { color: var(--green) !important; }

/* Bannière de résultat de montante (espace MONTANTE) */
.montante-result {
  display: flex; align-items: center; gap: 1rem;
  border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 26px;
  border: 1px solid var(--border); box-shadow: var(--shadow-soft);
}
.montante-result-icon { font-size: 2.4rem; line-height: 1; }
.montante-result-title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.montante-result-sub { margin: .3rem 0 0; color: var(--text-soft); font-size: .92rem; }
.montante-result-won {
  background: linear-gradient(110deg, var(--green-soft), rgba(245,179,1,.10));
  border-color: rgba(34,197,94,.4);
}
.montante-result-won .montante-result-title strong { color: var(--green); }
.montante-result-lost {
  background: linear-gradient(110deg, var(--surface-2), var(--surface-3));
  border-color: var(--border);
}
.empty-state-soft { border-style: solid; background: var(--surface); }

/* Barre de contrôle de la montante (admin) */
.montante-control {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.montante-control-info { display: flex; flex-direction: column; gap: .35rem; }
.montante-control-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* --- Features ----------------------------------------------------------- */
.features-grid, .steps { display: grid; gap: 18px; }
.feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-soft);
}
.feature-icon { font-size: 1.8rem; margin-bottom: .6rem; }
.feature h3 { font-size: 1.15rem; }
.feature p { color: var(--text-soft); margin: 0; }

.step {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; position: relative; text-align: center;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; font-weight: 800; font-size: 1.2rem;
  background: var(--primary-soft); color: var(--primary); margin-bottom: 1rem;
}
.step p { color: var(--text-soft); margin: 0; }

/* --- Pricing ------------------------------------------------------------ */
.pricing-grid { display: grid; gap: 20px; }
.pricing-grid-single { max-width: 420px; margin: 0 auto; }
.price-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px; position: relative; display: flex; flex-direction: column;
  box-shadow: var(--shadow-soft); transition: transform .15s ease, border-color .2s;
}
.price-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.price-card-featured { border-color: var(--primary); box-shadow: 0 14px 40px rgba(245,179,1,.18); }
.ribbon {
  position: absolute; top: -12px; right: 18px; background: var(--primary); color: #1a1300;
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: .35rem .8rem; border-radius: 999px;
}
.price-name { font-size: 1.25rem; margin-bottom: .15rem; }
.price-tagline { color: var(--text-mute); font-size: .9rem; margin-bottom: 1rem; }
.price-amount { display: flex; align-items: baseline; gap: .4rem; margin-bottom: 1.2rem; }
.price-value { font-size: 2.1rem; font-weight: 800; color: var(--text); }
.price-period { color: var(--text-mute); font-size: .9rem; }
.price-features { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .6rem; }
.price-features li { display: flex; gap: .55rem; color: var(--text-soft); font-size: .95rem; }
.price-features .check { color: var(--green); font-weight: 800; }
.price-card form, .price-card > a.btn { margin-top: auto; }
.price-foot { font-size: .78rem; color: var(--text-mute); margin: .8rem 0 0; text-align: center; }

/* --- CTA band ----------------------------------------------------------- */
.section-cta { padding: 50px 0; }
.cta-band {
  background: linear-gradient(110deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 34px; display: flex; flex-direction: column; gap: 18px; text-align: center;
}
.cta-band h2 { margin: 0; font-size: 1.6rem; }
.cta-band p { margin: 0; color: var(--text-soft); }

/* --- Legal strip -------------------------------------------------------- */
.legal-strip { background: rgba(20, 27, 48, 0.6); border-top: 1px solid var(--border); padding: 40px 0; }
.legal-strip-grid { display: grid; gap: 14px; margin-bottom: 1rem; }
.legal-item { display: flex; gap: .7rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.legal-item span { font-size: 1.2rem; }
.legal-item p { margin: 0; font-size: .88rem; color: var(--text-soft); }
.legal-strip-note { text-align: center; font-size: .85rem; color: var(--text-mute); margin: 0; }

/* --- Page hero ---------------------------------------------------------- */
.page-hero { padding: 50px 0 10px; text-align: center; }
.page-hero h1 { font-size: 2rem; margin-top: .8rem; }
.page-hero-sub { color: var(--text-soft); max-width: 620px; margin: 0 auto; }

/* --- Notices ------------------------------------------------------------ */
.notice { border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin-bottom: 1.4rem; border: 1px solid var(--border); }
.notice-info { background: var(--accent-soft); border-color: rgba(59,130,246,.3); color: #cfe0ff; }
.notice-soft { background: var(--surface-2); color: var(--text-soft); }
.notice-success { background: var(--green-soft); border-color: rgba(34,197,94,.3); color: #b9f6cd; }
.notice-warning { background: var(--amber-soft); border-color: rgba(245,158,11,.3); color: #ffe1ad; }
.notice-error { background: var(--red-soft); border-color: rgba(239,68,68,.3); color: #ffc9c9; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 18px; }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; float: right; color: var(--primary); font-weight: 800; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { color: var(--text-soft); padding-bottom: 16px; margin: 0; }

/* --- Flash -------------------------------------------------------------- */
.flash-zone { padding-top: 16px; display: grid; gap: 10px; }
.flash {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
  animation: flashIn .3s ease;
}
@keyframes flashIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }
.flash-success { background: var(--green-soft); border-color: rgba(34,197,94,.35); color: #c7f7d6; }
.flash-error { background: var(--red-soft); border-color: rgba(239,68,68,.35); color: #ffd1d1; }
.flash-info { background: var(--accent-soft); border-color: rgba(59,130,246,.35); color: #d4e4ff; }
.flash-close { background: none; border: none; color: inherit; font-size: 1.3rem; cursor: pointer; line-height: 1; }

/* --- Formulaires -------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.form-grid { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field-wide { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .92rem; color: var(--text-soft); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .9rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; color: var(--text);
  font-size: 1rem; font-family: inherit; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.field input:disabled { opacity: .6; cursor: not-allowed; }
.field textarea { resize: vertical; }
.field-hint { color: var(--text-mute); font-size: .82rem; }
.check-row { display: flex; align-items: center; gap: .65rem; color: var(--text-soft); font-weight: 600; }
.check-row input { width: auto; }
.check-row-compact { font-size: .82rem; gap: .45rem; margin-top: .1rem; }
.field-row { display: flex; justify-content: flex-end; }
.form-row { display: grid; gap: 1.1rem; }
.field-check { display: flex; align-items: flex-start; gap: .6rem; }
.field-check input { width: 18px; height: 18px; margin-top: .25rem; flex-shrink: 0; }
.field-check label { font-size: .9rem; color: var(--text-soft); font-weight: 500; }
.form-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.link-small { font-size: .86rem; }

.form-errors { background: var(--red-soft); border: 1px solid rgba(239,68,68,.35); border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin-bottom: 1.2rem; color: #ffd1d1; }
.form-errors-title { font-weight: 700; margin: 0 0 .4rem; }
.form-errors ul { margin: 0; padding-left: 1.2rem; }

/* --- Auth --------------------------------------------------------------- */
.auth-section { padding: 50px 0; }
.auth-container { display: flex; justify-content: center; }
.auth-card {
  width: 100%; max-width: 460px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 34px; box-shadow: var(--shadow);
}
.auth-title { font-size: 1.6rem; margin-bottom: .25rem; }
.auth-sub { color: var(--text-soft); margin-bottom: 1.5rem; }
.auth-switch { text-align: center; margin: 1.4rem 0 0; color: var(--text-soft); }

/* --- Contact ------------------------------------------------------------ */
.contact-grid { display: grid; gap: 28px; }
.contact-info h3 { font-size: 1.2rem; }
.contact-info p { color: var(--text-soft); }

/* --- Member ------------------------------------------------------------- */
.member-hero {
  padding: 44px 0 0; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(27,36,64,.5), transparent);
}
.member-hero h1 { font-size: 1.9rem; }
.member-hero-sub { color: var(--text-soft); padding-bottom: 28px; }
.member-hero-montante { background: linear-gradient(180deg, rgba(245,179,1,.08), transparent); }
.member-access-line { color: var(--text-soft); font-size: .95rem; padding-bottom: 20px; }

.dash-grid, .profil-grid { display: grid; gap: 20px; }
.dash-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-soft);
}
.dash-card-soft { background: var(--surface-2); }
.dash-card h3 { font-size: 1.1rem; }
.dash-status { font-weight: 800; margin: .2rem 0 1rem; }
.dash-status-ok { color: var(--green); }
.dash-status-off { color: var(--text-mute); }
.dash-line { color: var(--text-soft); margin: .35rem 0; }
.dash-note { font-size: .85rem; color: var(--amber); }
.dash-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; }
.dash-links a { display: block; padding: .7rem .8rem; border-radius: 9px; color: var(--text-soft); font-weight: 600; }
.dash-links a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

.prono-grid { display: grid; gap: 20px; }

.empty-state { text-align: center; padding: 60px 20px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-state h2 { font-size: 1.3rem; }
.empty-state p { color: var(--text-soft); max-width: 420px; margin: 0 auto; }

/* Profil panels */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-soft); }
.panel-title { font-size: 1.2rem; margin-bottom: 1rem; }
.panel-subtitle { font-size: 1rem; }
.panel-sep { margin: 1.5rem 0; }
.panel-danger { border-color: rgba(239,68,68,.4); }
.panel-danger .panel-title { color: var(--red); }
.kv-table { width: 100%; border-collapse: collapse; }
.kv-table th, .kv-table td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.kv-table th { color: var(--text-mute); font-weight: 600; width: 45%; }
.kv-table td { color: var(--text); }

/* Locked */
.locked-section { padding: 60px 0; }
.locked-card { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 44px 28px; box-shadow: var(--shadow); }
.locked-icon { font-size: 3.2rem; margin-bottom: .5rem; }
.locked-card h1 { font-size: 1.7rem; }
.locked-card p { color: var(--text-soft); max-width: 480px; margin: 0 auto 1.6rem; }
.locked-card .btn { margin: .3rem; }
.locked-benefits { list-style: none; padding: 0; margin: 2rem auto 0; max-width: 420px; text-align: left; display: grid; gap: .6rem; color: var(--text-soft); }
.locked-note { font-size: .82rem; color: var(--text-mute); margin-top: 1.6rem; }

/* --- Result cards (success/cancel/404/error) --------------------------- */
.result-card { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px 28px; box-shadow: var(--shadow); }
.result-icon { font-size: 3.4rem; margin-bottom: .6rem; }
.result-card h1 { font-size: 1.7rem; }
.result-card p { color: var(--text-soft); max-width: 520px; margin: 0 auto 1.6rem; }
.result-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.result-note { font-size: .85rem; color: var(--text-mute); margin-top: 1.4rem; }
.result-success { border-top: 4px solid var(--green); }
.result-cancel { border-top: 4px solid var(--amber); }
.error-detail { text-align: left; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; overflow-x: auto; font-size: .8rem; color: var(--text-mute); margin-top: 1.4rem; }

/* --- Tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.data-table th, .data-table td { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--border); }
.data-table thead th { color: var(--text-mute); font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; background: var(--surface-2); }
.data-table tbody tr:hover { background: var(--surface-2); }
.cell-sub { font-size: .82rem; color: var(--text-mute); margin-top: .2rem; }
.cell-mono { font-family: ui-monospace, monospace; font-size: .8rem; color: var(--text-mute); }
.actions-cell { display: flex; gap: .4rem; align-items: center; white-space: nowrap; }

.badge-mini { display: inline-block; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 6px; }
.badge-on { background: var(--green-soft); color: var(--green); }
.badge-off { background: var(--red-soft); color: var(--red); }
.badge-admin { background: var(--accent-soft); color: var(--accent); margin-left: .3rem; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--border); padding: 48px 0 24px; margin-top: 40px; }
.footer-grid { display: grid; gap: 28px; margin-bottom: 28px; }
.footer-tagline { color: var(--text-mute); font-size: .9rem; max-width: 320px; margin-top: .8rem; }
.footer-col h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .6px; color: var(--text-mute); margin-bottom: .9rem; }
.footer-col a { display: block; color: var(--text-soft); padding: .25rem 0; font-size: .92rem; }
.footer-col a:hover { color: var(--primary); text-decoration: none; }
.footer-small { color: var(--text-mute); font-size: .82rem; margin-top: .6rem; }
.footer-disclaimer { background: var(--red-soft); border: 1px solid rgba(239,68,68,.25); border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-bottom: 20px; }
.footer-disclaimer p { margin: 0; font-size: .84rem; color: #ffd9d9; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border); padding-top: 18px; color: var(--text-mute); font-size: .85rem; }
.footer-bottom p { margin: 0; }
.footer-age { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: .2rem .55rem; font-weight: 800; color: var(--text-soft); }

/* --- Legal pages -------------------------------------------------------- */
.legal-page { padding: 46px 0 60px; }
.legal-page h1 { font-size: 2rem; }
.legal-page h2 { font-size: 1.25rem; margin-top: 2rem; color: var(--primary); }
.legal-page p, .legal-page li { color: var(--text-soft); }
.legal-updated { color: var(--text-mute); font-size: .88rem; }
.legal-warning { background: var(--amber-soft); border: 1px solid rgba(245,158,11,.3); border-radius: var(--radius-sm); padding: 1rem 1.2rem; color: #ffe1ad !important; margin-top: 2rem; font-size: .9rem; }

/* ==========================================================================
   ADMIN
   ========================================================================== */
.admin-body { background: #0a0f1e; }
.admin-topbar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.admin-brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; color: var(--text); }
.admin-brand-logo { height: 38px; width: auto; display: block; }
.admin-brand span { color: var(--primary); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; align-self: flex-start; }
.admin-brand:hover { text-decoration: none; }
.admin-nav { display: flex; gap: .3rem; flex-wrap: wrap; flex: 1; }
.admin-nav a { padding: .5rem .85rem; border-radius: 8px; color: var(--text-soft); font-weight: 600; font-size: .92rem; }
.admin-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.admin-nav a.active { background: var(--primary-soft); color: var(--primary); }
.admin-actions { display: flex; gap: .5rem; align-items: center; }
.admin-main { max-width: 1200px; margin: 0 auto; padding: 26px 20px 60px; }
.admin-page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.admin-page-head h1 { margin: 0; font-size: 1.7rem; }

.stats-grid { display: grid; gap: 16px; margin-bottom: 26px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: .3rem; box-shadow: var(--shadow-soft); }
.stat-icon { font-size: 1.5rem; }
.stat-value { font-size: 1.9rem; font-weight: 800; color: var(--primary); }
.stat-label { color: var(--text-mute); font-size: .85rem; }

.admin-cols { display: grid; gap: 20px; margin-bottom: 20px; }
.admin-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-soft); margin-bottom: 20px; }
.admin-panel h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.admin-form-panel { max-width: 760px; }

.quick-actions { display: grid; gap: .5rem; }
.quick-action { display: block; padding: .8rem 1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; color: var(--text-soft); font-weight: 600; }
.quick-action:hover { color: var(--text); border-color: var(--primary); text-decoration: none; }

.log-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.log-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .2rem; border-bottom: 1px solid var(--border); font-size: .88rem; }
.log-action { font-weight: 700; color: var(--text-soft); }
.log-meta { color: var(--text-mute); font-size: .8rem; text-align: right; }

.search-form { display: flex; gap: .5rem; }
.search-form input { padding: .55rem .8rem; background: var(--bg); border: 1px solid var(--border); border-radius: 9px; color: var(--text); }

.status-select { padding: .35rem .5rem; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-weight: 700; font-size: .82rem; cursor: pointer; }
.status-select.status-won { color: var(--green); }
.status-select.status-lost { color: var(--red); }
.status-select.status-pending { color: var(--amber); }
.status-select.status-void { color: var(--slate); }
.status-form { margin: 0; }

.help-list { color: var(--text-soft); }
.help-list li { margin-bottom: .5rem; }

/* ==========================================================================
   RESPONSIVE (tablette / desktop)
   ========================================================================== */
@media (min-width: 640px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid-single { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .legal-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1.3fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
  .prono-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  .hero-title { font-size: 2.7rem; }
  .page-hero h1 { font-size: 2.4rem; }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .primary-nav { display: flex !important; position: static; flex-direction: row; align-items: center;
    gap: .3rem; background: none; border: none; padding: 0; box-shadow: none; }
  .primary-nav.open { position: static; flex-direction: row; background: none; border: none; padding: 0; box-shadow: none; }
  .primary-nav a { padding: .5rem .75rem; color: var(--text-soft); }
  .primary-nav a:not(.btn), .primary-nav.open a:not(.btn) { background: transparent; border: 0; }
  .nav-cta { margin-left: .4rem; }
  .nav-logout { margin: 0 0 0 .3rem; }

  .hero-title { font-size: 3rem; }
  .features-grid { grid-template-columns: repeat(4, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid-single { grid-template-columns: 1fr; }
  .pricing-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .settings-status-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .admin-cols { grid-template-columns: 1fr 1fr; }
  .profil-grid { grid-template-columns: 1fr 1fr; }
  .panel-wide { grid-column: 1 / -1; }
  .prono-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(4, 1fr); }
  .pricing-grid-single { grid-template-columns: 1fr; }
}