/* =====================================================================
   MybetF2F — feuille de style partagée
   Direction : "tableau de scores de vestiaire" moderne
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Narrow:wght@600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* Palette : bleu-ardoise + accents fonctionnels */
  --bg:           #11161d;   /* fond profond, ardoise bleutée */
  --bg-soft:      #1a212b;   /* cartes */
  --bg-line:      #28323f;   /* bordures, séparateurs */
  --ink:          #eef2f6;   /* texte principal */
  --ink-dim:      #8b97a6;   /* texte secondaire */
  --win:          #7ee787;   /* vert "gagné" / validé (statuts) */
  --live:         #ffb454;   /* ambre "en cours" */
  --accent:       #4aa8ff;   /* bleu d'action (liens, focus) */
  --brand:        #4aa8ff;   /* bleu de marque (logo + boutons) */
  --brand-ink:    #06223d;   /* texte foncé sur fond bleu */
  --danger:       #ff6b6b;   /* erreurs */

  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 10px 30px rgba(0,0,0,.35);

  --font-body:    'Archivo', system-ui, sans-serif;
  --font-display: 'Archivo Narrow', 'Archivo', sans-serif;
  --font-num:     'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Marque ---- */
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .5px;
  display: inline-flex;
  align-items: baseline;
  gap: .1em;
}
.brand .f2f {
  color: var(--brand);
}

/* ---- Écran d'authentification ---- */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  /* léger motif de lignes type feuille de match */
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(74,168,255,.08), transparent 60%),
    var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-soft);
  border: 1px solid var(--bg-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 30px;
}

.auth-logo {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
  letter-spacing: .5px;
}
.auth-logo .f2f { color: var(--brand); }

.auth-tagline {
  text-align: center;
  color: var(--ink-dim);
  font-size: 14px;
  margin-bottom: 26px;
}

/* ---- Onglets connexion / inscription ---- */
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  border: 1px solid var(--bg-line);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 22px;
}
.tabs button {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  padding: 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}
.tabs button.active {
  background: var(--bg-soft);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--bg-line);
}

/* ---- Formulaires ---- */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--bg-line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  transition: border-color .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
}
.field input::placeholder { color: #54606e; }

.btn {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-ink);
  background: var(--brand);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px;
  cursor: pointer;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { filter: brightness(.95); }

/* ---- Messages ---- */
.msg {
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 14px;
  margin-bottom: 16px;
}
.msg.error {
  background: rgba(255,107,107,.12);
  border: 1px solid rgba(255,107,107,.35);
  color: #ffb3b3;
}
.msg.ok {
  background: rgba(126,231,135,.12);
  border: 1px solid rgba(126,231,135,.35);
  color: var(--win);
}
.msg ul { margin: 4px 0 0 18px; }

/* ---- Aide mot de passe ---- */
.pwd-hint {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: -8px;
  margin-bottom: 16px;
  line-height: 1.45;
}

.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =====================================================================
   Pages internes (connecté)
   ===================================================================== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--bg-line);
  background: var(--bg-soft);
}
.topbar .brand { font-size: 22px; }
.topbar .right { display: flex; align-items: center; gap: 16px; }
.topbar .who { color: var(--ink-dim); font-size: 14px; }
.topbar .who b { color: var(--ink); font-weight: 600; }
.badge-super {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--bg); background: var(--live);
  padding: 3px 8px; border-radius: 20px; margin-left: 6px;
}
.logout { color: var(--ink-dim); font-size: 14px; }
.main { max-width: 920px; margin: 0 auto; padding: 36px 22px; }

/* Titres de page */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 26px; flex-wrap: wrap;
}
.page-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.page-sub { color: var(--ink-dim); font-size: 14px; margin-top: 2px; }

/* Bouton + (action principale) */
.btn-add {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--brand-ink); background: var(--brand);
  border: 0; border-radius: var(--radius-sm); padding: 10px 16px;
  cursor: pointer; text-decoration: none;
}
.btn-add:hover { filter: brightness(1.06); text-decoration: none; }
.btn-add .plus { font-size: 18px; line-height: 1; }

/* Bouton secondaire / lien retour */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--ink-dim); text-decoration: none;
}
.btn-ghost:hover { color: var(--ink); text-decoration: none; }

/* Liste de compétitions */
.comp-grid { display: grid; gap: 14px; }
.comp-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius); padding: 18px 20px;
  transition: border-color .15s;
}
.comp-card:hover { border-color: var(--accent); text-decoration: none; }
.comp-card .row1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.comp-card .nom { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.comp-card .meta { color: var(--ink-dim); font-size: 13px; margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }
.comp-card .meta .num { font-family: var(--font-num); color: var(--ink); }

.chip {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.chip.sport { background: rgba(74,168,255,.14); color: var(--accent); }
.chip.ouverte { background: rgba(126,231,135,.14); color: var(--win); }
.chip.en_cours { background: rgba(255,180,84,.14); color: var(--live); }
.chip.terminee { background: rgba(139,151,166,.16); color: var(--ink-dim); }

/* Formulaire (carte) */
.form-card {
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius); padding: 26px; max-width: 520px;
}
.form-card .field select {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--bg-line);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }

/* Matchs */
.section-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  margin: 30px 0 14px; display: flex; align-items: center; justify-content: space-between;
}
.match-list { display: grid; gap: 8px; }
.match-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius-sm); padding: 12px 16px;
}
.match-teams { font-weight: 500; }
.match-teams .vs { color: var(--ink-dim); font-family: var(--font-num); margin: 0 8px; font-size: 13px; }
.match-when { color: var(--ink-dim); font-size: 13px; font-family: var(--font-num); }
.match-phase { color: var(--ink-dim); font-size: 12px; }
.match-del {
  color: var(--ink-dim); background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.match-del:hover { color: var(--danger); background: rgba(255,107,107,.1); }

.empty {
  border: 1px dashed var(--bg-line); border-radius: var(--radius);
  padding: 34px; text-align: center; color: var(--ink-dim);
}
.empty .big { font-family: var(--font-display); font-size: 19px; color: var(--ink); margin-bottom: 6px; }

.inline-form { display: contents; }

/* ---- Invitation ---- */
.invite-row { display: flex; gap: 10px; align-items: stretch; }
.invite-row .btn-add { white-space: nowrap; }

/* ---- Participants ---- */
.part-list { display: flex; flex-wrap: wrap; gap: 8px; }
.part-row {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: 30px; padding: 7px 14px;
}
.part-name { font-weight: 600; font-size: 14px; }
.part-team {
  font-size: 11px; font-weight: 600; color: var(--accent);
  background: rgba(74,168,255,.14); padding: 2px 8px; border-radius: 20px;
}
.part-solo { font-size: 11px; color: var(--ink-dim); }

/* ---- Choix de participation (rejoindre) ---- */
.join-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.join-card {
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius); padding: 22px;
}
.join-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.join-desc { color: var(--ink-dim); font-size: 14px; margin-bottom: 16px; line-height: 1.5; }

/* ---- Vainqueur final (bonus) ---- */
.bonus-card {
  background: linear-gradient(135deg, rgba(255,180,84,.10), rgba(74,168,255,.06));
  border: 1px solid rgba(255,180,84,.30);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 8px;
}
.bonus-head { display: flex; align-items: center; gap: 14px; }
.bonus-star { font-size: 26px; color: var(--live); line-height: 1; }
.bonus-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.bonus-pts { font-size: 13px; color: var(--live); margin-left: 6px; }
.bonus-sub { color: var(--ink-dim); font-size: 13px; margin-top: 2px; }

/* ---- Liste de pronostics ---- */
.prono-list { display: grid; gap: 8px; }
.prono-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius-sm); padding: 12px 16px;
}
.prono-row.locked { opacity: .6; }
.prono-teams { font-weight: 500; }
.prono-teams .vs { color: var(--ink-dim); font-family: var(--font-num); margin: 0 6px; }
.prono-meta { color: var(--ink-dim); font-size: 12px; margin-top: 3px; }
.prono-scores { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.prono-scores input {
  width: 52px; text-align: center; font-family: var(--font-num); font-size: 17px; font-weight: 700;
  color: var(--ink); background: var(--bg); border: 1px solid var(--bg-line);
  border-radius: var(--radius-sm); padding: 9px 4px;
  -moz-appearance: textfield;
}
.prono-scores input::-webkit-outer-spin-button,
.prono-scores input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prono-scores input:focus { outline: none; border-color: var(--brand); }
.prono-scores input:disabled { color: var(--ink-dim); }
.prono-scores .sep { color: var(--ink-dim); font-family: var(--font-num); }

/* ---- Logo image ---- */
.brand-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo:hover { text-decoration: none; }
.brand-logo img { height: 40px; width: auto; display: block; }
.brand-text {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: .5px; color: var(--ink);
}
.brand-text .f2f { color: var(--brand); }
.auth-logo-img { text-align: center; margin-bottom: 10px; }
.auth-logo-img img { width: 180px; height: auto; }

/* ---- Admin : participer à sa propre compétition ---- */
.admin-join {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius-sm); padding: 12px 16px;
}
.admin-join-txt { color: var(--ink-dim); font-size: 14px; }
.admin-join-hint { color: var(--ink-dim); font-size: 12px; font-style: italic; }
.btn-ghost-bordered {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 7px 14px; text-decoration: none;
}
.btn-ghost-bordered:hover { background: rgba(74,168,255,.1); text-decoration: none; }

/* ---- Filigrane global (toutes les pages connectées) ---- */
.page-watermark {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 80vw);
  height: min(620px, 80vw);
  background: url('/assets/logo-app.png') center/contain no-repeat;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
.main { position: relative; z-index: 1; }

/* ---- Tableau de bord ---- */
.dashboard { position: relative; min-height: 60vh; }
.dash-content { position: relative; z-index: 1; }
.welcome { font-family: var(--font-display); font-size: 30px; font-weight: 700; margin-bottom: 8px; }
.welcome span { color: var(--brand); }
.lead { color: var(--ink-dim); margin-bottom: 32px; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Saisie des résultats ---- */
.res-list { display: grid; gap: 8px; }
.res-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius-sm); padding: 12px 16px;
}
.res-row.done { border-color: rgba(126,231,135,.3); }
.res-match { flex: 1; min-width: 0; }
.res-teams { font-weight: 500; }
.res-teams .vs { color: var(--ink-dim); font-family: var(--font-num); margin: 0 6px; }
.res-meta { color: var(--ink-dim); font-size: 12px; margin-top: 3px; }
.res-scores { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.res-scores input {
  width: 50px; text-align: center; font-family: var(--font-num); font-size: 17px; font-weight: 700;
  color: var(--ink); background: var(--bg); border: 1px solid var(--bg-line);
  border-radius: var(--radius-sm); padding: 9px 4px; -moz-appearance: textfield;
}
.res-scores input::-webkit-outer-spin-button,
.res-scores input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.res-scores input:focus { outline: none; border-color: var(--brand); }
.res-scores .sep { color: var(--ink-dim); }
.res-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-mini {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--brand-ink); background: var(--brand); border: 0;
  border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer;
}
.btn-mini:hover { filter: brightness(1.06); }
.btn-mini.ghost { background: transparent; color: var(--ink-dim); border: 1px solid var(--bg-line); }
.btn-mini.ghost:hover { color: var(--danger); border-color: var(--danger); filter: none; }

/* ---- Classement ---- */
.champion-banner {
  background: linear-gradient(135deg, rgba(255,180,84,.18), rgba(255,180,84,.06));
  border: 1px solid rgba(255,180,84,.4); color: var(--live);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px;
  font-size: 15px; text-align: center;
}
.champion-banner strong { color: var(--ink); }
.rank-table {
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius); overflow: hidden;
}
.rank-head, .rank-row {
  display: grid; grid-template-columns: 56px 1fr 80px; align-items: center;
  padding: 13px 18px;
}
.rank-head {
  font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-dim); border-bottom: 1px solid var(--bg-line);
}
.rank-row { border-bottom: 1px solid var(--bg-line); }
.rank-row:last-child { border-bottom: 0; }
.rank-pos { font-family: var(--font-num); font-weight: 700; font-size: 16px; }
.rank-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rank-pts { font-family: var(--font-num); font-weight: 700; font-size: 20px; text-align: right; color: var(--brand); }
.rank-tag { font-size: 11px; font-weight: 600; color: var(--accent); background: rgba(74,168,255,.14); padding: 2px 7px; border-radius: 20px; }
.rank-bonus { font-size: 12px; font-weight: 700; color: var(--live); }
.rank-you { font-size: 11px; font-weight: 700; color: var(--brand-ink); background: var(--brand); padding: 2px 8px; border-radius: 20px; }
.rank-row.me { background: rgba(74,168,255,.07); }
.rank-row.pod-1 .rank-pts { color: var(--live); }
.rank-legend { color: var(--ink-dim); font-size: 13px; margin-top: 16px; text-align: center; }
.rank-legend strong { color: var(--ink); font-family: var(--font-num); }

/* ---- Liens de navigation (barre du haut) ---- */
.nav-link { color: var(--ink-dim); font-size: 14px; text-decoration: none; }
.nav-link:hover { color: var(--ink); text-decoration: none; }

/* ---- Compte ---- */
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 680px) { .account-grid { grid-template-columns: 1fr; } }
.form-card textarea:focus, .form-card select:focus { outline: none; border-color: var(--brand); }

/* ---- Tickets ---- */
.ticket-list { display: grid; gap: 12px; }
.ticket-card {
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius); padding: 16px 18px;
}
.ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ticket-subj { font-weight: 600; font-size: 15px; }
.ticket-statut { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.st-ouvert { background: rgba(74,168,255,.16); color: var(--accent); }
.st-en_cours { background: rgba(255,180,84,.16); color: var(--live); }
.st-resolu { background: rgba(126,231,135,.16); color: var(--win); }
.ticket-meta { color: var(--ink-dim); font-size: 12px; margin: 5px 0 10px; }
.ticket-msg { font-size: 14px; line-height: 1.55; color: var(--ink); }
.ticket-reply {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(126,231,135,.07); border: 1px solid rgba(126,231,135,.25);
  font-size: 14px; line-height: 1.55;
}
.ticket-reply-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--win); margin-bottom: 5px; }
.ticket-answer { margin-top: 12px; display: grid; gap: 8px; }
.ticket-answer-row { display: flex; gap: 8px; align-items: center; }

/* =====================================================================
   Landing page publique
   ===================================================================== */
.lp { max-width: 1000px; margin: 0 auto; padding: 0 22px; }

.lp-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; margin-bottom: 10px;
}
.lp-nav-cta {
  font-size: 14px; font-weight: 600; color: var(--ink);
  border: 1px solid var(--bg-line); border-radius: var(--radius-sm);
  padding: 9px 18px; text-decoration: none;
}
.lp-nav-cta:hover { border-color: var(--brand); text-decoration: none; }

/* Hero */
.lp-hero { text-align: center; padding: 30px 0 50px; }
.lp-hero-logo {
  width: 200px; max-width: 56vw; height: auto; margin-bottom: 26px;
  filter: drop-shadow(0 14px 40px rgba(74,168,255,.25));
}
.lp-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 5vw, 46px); line-height: 1.1; margin-bottom: 18px;
}
.lp-title span { color: var(--brand); }
.lp-sub {
  color: var(--ink-dim); font-size: clamp(15px, 2.2vw, 18px);
  max-width: 620px; margin: 0 auto 30px; line-height: 1.6;
}
.lp-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-cta-primary {
  font-family: var(--font-body); font-size: 16px; font-weight: 700;
  color: var(--brand-ink); background: var(--brand);
  border: 0; border-radius: var(--radius-sm); padding: 14px 26px;
  text-decoration: none; cursor: pointer; display: inline-block;
}
.lp-cta-primary:hover { filter: brightness(1.07); text-decoration: none; }
.lp-cta-ghost {
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  color: var(--ink); background: transparent;
  border: 1px solid var(--bg-line); border-radius: var(--radius-sm);
  padding: 14px 26px; cursor: pointer;
}
.lp-cta-ghost:hover { border-color: var(--accent); }
.lp-note { color: var(--ink-dim); font-size: 13px; margin-top: 18px; }

/* Features */
.lp-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 20px 0 50px;
}
@media (max-width: 720px) { .lp-features { grid-template-columns: 1fr; } }
.lp-feat {
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius); padding: 26px 22px; text-align: center;
}
.lp-feat-ico { font-size: 34px; margin-bottom: 12px; }
.lp-feat-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.lp-feat p { color: var(--ink-dim); font-size: 14px; line-height: 1.55; }

/* How */
.lp-how { padding: 20px 0 50px; }
.lp-how-title {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  text-align: center; margin-bottom: 28px;
}
.lp-steps {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  max-width: 720px; margin: 0 auto 34px;
}
@media (max-width: 600px) { .lp-steps { grid-template-columns: 1fr; } }
.lp-step {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius); padding: 18px;
}
.lp-step-num {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand); color: var(--brand-ink);
  font-family: var(--font-num); font-weight: 700; font-size: 16px;
  display: grid; place-items: center;
}
.lp-step div { font-size: 14px; line-height: 1.5; color: var(--ink-dim); }
.lp-step strong { color: var(--ink); font-size: 15px; }
.lp-final-cta { text-align: center; }

/* Footer */
.lp-footer {
  border-top: 1px solid var(--bg-line); padding: 26px 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.lp-footer .brand-text { font-size: 18px; }
.lp-footer-note { color: var(--ink-dim); font-size: 13px; }

/* ---- Catalogue d'import ---- */
.catalog-card {
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius); padding: 20px;
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.catalog-main { flex: 1; min-width: 240px; }
.catalog-nom { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.catalog-desc { color: var(--ink-dim); font-size: 14px; margin-bottom: 10px; line-height: 1.5; }
.catalog-form { min-width: 200px; }

/* =====================================================================
   Bracket / arborescence par phases
   ===================================================================== */
/* Puce de match commune */
.bm {
  background: var(--bg); border: 1px solid var(--bg-line);
  border-radius: var(--radius-sm); overflow: hidden; min-width: 190px;
}
.bm-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-size: 14px; gap: 10px;
}
.bm-row:first-child { border-bottom: 1px solid var(--bg-line); }
.bm-team { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-row.win .bm-team { color: var(--win); font-weight: 700; }
.bm-score { font-family: var(--font-num); font-weight: 700; font-size: 15px; color: var(--ink); }
.bm-score.muted { color: var(--ink-dim); }
.bm-date { padding: 5px 12px; font-size: 11px; color: var(--ink-dim); background: var(--bg-soft); font-family: var(--font-num); }

/* Poules : grille de cartes */
.poules-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px; align-items: start;
}
.poule-card {
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  align-self: start;
}
.poule-head {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--brand); margin-bottom: 2px;
}

/* Bracket des phases finales : colonnes horizontales scrollables */
.bracket-scroll { overflow-x: auto; padding-bottom: 10px; }
.bracket {
  display: flex; gap: 28px; align-items: stretch; min-width: min-content; padding: 4px;
}
.bracket-col {
  display: flex; flex-direction: column; min-width: 200px;
}
.bracket-col-head {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--ink-dim);
  text-align: center; margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--bg-line);
}
.bracket-col-matchs {
  display: flex; flex-direction: column; justify-content: space-around;
  gap: 16px; flex: 1;
}
/* Connecteurs visuels entre colonnes */
.bracket-col + .bracket-col { position: relative; }
.bracket-col + .bracket-col::before {
  content: ''; position: absolute; left: -28px; top: 0; bottom: 0; width: 28px;
  background-image: linear-gradient(var(--bg-line), var(--bg-line));
  background-size: 1px 100%; background-position: center; background-repeat: no-repeat;
  opacity: .4;
}

/* Liste admin repliable */
.admin-matchs { margin-top: 18px; }
.admin-matchs summary {
  cursor: pointer; color: var(--ink-dim); font-size: 14px; font-weight: 600;
  padding: 8px 0; user-select: none;
}
.admin-matchs summary:hover { color: var(--ink); }

/* ---- Bouton danger discret (supprimer compétition) ---- */
.btn-danger-link {
  background: transparent; border: 1px solid transparent;
  color: var(--danger); font-family: var(--font-body); font-size: 13px;
  cursor: pointer; padding: 6px 10px; border-radius: var(--radius-sm);
  text-decoration: underline; text-underline-offset: 2px;
}
.btn-danger-link:hover { background: rgba(255,107,107,.1); text-decoration: none; }

/* ---- Bouton retirer participant ---- */
.part-row { display: flex; align-items: center; gap: 10px; }
.part-remove {
  background: transparent; border: 1px solid var(--bg-line);
  color: var(--ink-dim); font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 4px 10px; border-radius: 20px;
}
.part-remove:hover { color: var(--danger); border-color: var(--danger); }

/* ---- Gestion des lots (page admin) ---- */
.lots-list { display: grid; gap: 8px; margin-bottom: 6px; }
.lot-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-soft); border: 1px solid var(--bg-line);
  border-radius: var(--radius-sm); padding: 12px 16px;
}
.lot-rang { font-family: var(--font-num); font-weight: 700; min-width: 56px; }
.lot-desc { flex: 1; }

/* ---- Vitrine des lots (dans le classement) ---- */
.lots-showcase {
  background: linear-gradient(135deg, rgba(74,168,255,.1), rgba(74,168,255,.03));
  border: 1px solid rgba(74,168,255,.3);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px;
}
.lots-showcase-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: 12px; }
.lots-showcase-list { display: grid; gap: 8px; }
.lot-show { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.lot-show-rang { font-family: var(--font-num); font-weight: 700; min-width: 32px; }
.lot-show-desc { color: var(--ink); }

/* ---- Carte de synchronisation des scores ---- */
.sync-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(126,231,135,.1), rgba(126,231,135,.03));
  border: 1px solid rgba(126,231,135,.3);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px;
}
.sync-text { display: flex; flex-direction: column; gap: 3px; }
.sync-text strong { font-size: 15px; }
.sync-text span { color: var(--ink-dim); font-size: 13px; }
.sync-last { color: var(--win) !important; font-size: 12px !important; }