:root { color-scheme: light dark; }

html, body {
  height: 100%;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: url('/static/fond-app.png') no-repeat center center fixed;
  background-size: cover; /* couvre tout l'écran, quelle que soit la taille */
  background-attachment: fixed; /* évite que le fond bouge */
  background-position: center;  /* centre l'image */
  color: #fff;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

.screen { display: none; min-height: calc(100dvh - 64px - env(safe-area-inset-bottom)); padding: 20px; }
.screen.active { display: block; }
h1 { margin: 0 0 12px; font-size: 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card { background: #161616; border: 1px solid #2a2a2a; border-radius: 14px; padding: 18px; }

.btn {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 14px; border-radius: 12px; text-decoration: none; font-weight: 700;
  background: #ffd400; color: #111; border: 1px solid #e6bf00; cursor:pointer;
}
.btn:active { transform: translateY(1px); }
.muted { opacity: .7; }
.row { display: flex; gap: 10px; }
.vstack { display:flex; flex-direction:column; gap:10px; }

/* Inputs >=16px pour éviter zoom iOS */
input[type="password"], input[type="text"], input[type="email"] {
  padding: 12px; border-radius: 10px; border: 1px solid #2a2a2a;
  background: #121212; color: #fff; font-size: 16px; line-height: 1.2;
}
label { font-size: 13px; opacity:.8; }

.small { font-size:12px; opacity:.8; }

/* Bottom nav */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 64px;
  display: flex; background: #111; border-top: 1px solid #262626; z-index: 9999;
  padding: 6px env(safe-area-inset-right) calc(6px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
}
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #cfcfcf; text-decoration: none; font-size: 12px; cursor:pointer; }
.tab.active { color: #ffd400; }

/* --- HERO (logo + dates) --- */
.hero {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:24px 10px 8px; text-align:center;
}
.hero-logo {
  max-width: 180px; /* largeur max */
  height: auto;
  display: block;
  margin: 0 auto 12px; /* centrée avec un petit espace en bas */
}
.hero-dates {
  font-weight:700; letter-spacing:.3px;
  background:#161616; border:1px solid #2a2a2a; padding:8px 14px; border-radius:999px;
}

.highlights-container {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin: 20px 0;
}
.highlight { text-align: center; cursor: pointer; }
.highlight img {
  width: 90px; height: 90px; border-radius: 50%; border: 3px solid #ffdf00; object-fit: cover;
}

/* ==== Highlights modal ==== */
.hl-modal{position:fixed;inset:0;display:none;z-index:1000}
.hl-modal.show{display:block}
.hl-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(2px)}
.hl-dialog{position:absolute;inset:4% 2%;margin:0 auto;max-width:900px;border-radius:16px;overflow:hidden}
.hl-close{position:absolute;top:8px;right:10px;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer;z-index:5}
.hl-stage{position:relative;height:68vh;display:flex;align-items:center;justify-content:center;background:#000}
.hl-stage img,.hl-stage video{max-width:100%;max-height:100%;display:block}
.hl-prev,.hl-next{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:28px;border-radius:999px;cursor:pointer;z-index:4}
.hl-prev{left:10px}.hl-next{right:10px}
.hl-bars{position:absolute;left:0;right:0;top:0;display:flex;gap:6px;padding:10px;z-index:3}
.hl-bar{flex:1;height:3px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden}
.hl-bar > span{display:block;height:100%;width:0;background:#00e676;transition:width .1s linear}
.hl-caption{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:14px;padding:10px 12px;background:rgba(0,0,0,.35)}

/* Cartes lien */
.link-card { display: block; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.link-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.btn.outline { background: transparent; border: 1px solid #fff; }

/* ——— Page "More" ——— */
.more-list { padding: 4px 0 88px; }
.group-title {
  color: #6e2da8;
  font-size: .88rem; font-weight: 700;
  padding: 12px 16px 6px; text-transform: uppercase; letter-spacing: .03em;
}
.more-item {
  display:flex; align-items:center; gap:12px;
  padding:16px; background:#0c1c3c; border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff; text-decoration:none;
}
.more-item:active { background:#0f244e; }
.mi-icon { width:28px; text-align:center; opacity:.9 }

/* Bouton login sticky bas */
.sticky-login {
  position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom));
  padding: 12px 16px; background: linear-gradient(180deg, rgba(12,28,60,0), rgba(12,28,60,.9));
}
.btn-green { background:#146a3a; color:#fff; width:100%; }
.btn-outline { background:transparent; border:1px solid #fff; color:#fff; padding:10px 14px; border-radius:4px; }

/* ====== MODALE LOGIN ====== */

/* Modale centrée par défaut */
.login-modal {
  position: fixed; inset: 0; display: none;
  background: rgba(0,0,0,.5); backdrop-filter: blur(8px);
  z-index: 1000;
}
.login-modal.show { display: flex; justify-content: center; align-items: center; }

/* Boîte */
.login-sheet {
  position: relative;               /* ✅ pour positionner .login-close */
  width: min(560px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px; box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    url('/static/bg/grass-blur.jpg') center/cover no-repeat;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  color: #fff;
}

/* Plein écran sur mobile */
@media (max-width: 520px) {
  .login-modal.show { align-items: stretch; }
  .login-sheet {
    width: 100vw; height: 100vh; max-height: none;
    border-radius: 0; padding: 16px;
    display: flex; flex-direction: column;
    overflow: hidden;                           /* scroll géré dans .login-body */
  }
  .login-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ✅ Nouveau système de vues piloté par [hidden] */
#loginModal .view { display: block; }
#loginModal .view[hidden] { display: none !important; }

/* (Ancien système supprimé)
.view { display: none; }
.login-sheet:not(.is-register) .view-login { display: block; }
.login-sheet.is-register .view-register { display: block; }
*/

.login-close {
  position:absolute; top:10px; right:12px; font-size:24px;
  background:transparent; border:0; color:#fff; opacity:.9
}
.login-head { text-align:center; padding:28px 20px 8px; }
.login-badge { width:64px; height:64px; object-fit:contain; margin-bottom:8px; }
.login-title { margin:0; letter-spacing:.04em; font-weight:800; }
.login-sub { margin:6px 0 0; opacity:.9; font-size:.9rem; }

/* Bloc commun dans la modale */
.login-body .login-label {
  display: block;
  margin: 10px 0 6px;
  font-weight: 600;
}
.login-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #2a2a2a;
  background: #121212;
  color: #fff;
  font-size: 16px;
}

/* Bouton type lien (pour "Mot de passe oublié ?") */
.link-btn {
  background: none; border: none; color: #8ab4ff; padding: 0;
  font: inherit; cursor: pointer; text-decoration: underline;
}
.login-help { text-align:right; margin:6px 0 12px; }

/* Ligne label + œil */
.pwd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pwd-row .login-label { margin: 10px 0; }
.pwd-toggle {
  border: 1px solid #2a2a2a;
  background: #1b1b1b;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
}

/* Actions */
.login-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.login-actions .btn { flex: 1; }

/* Message de statut */
.auth-msg {
  margin-top: 12px;
  font-size: 14px;
}
.auth-msg.is-success { color: #43d17a; }
.auth-msg.is-error   { color: #ff6b6b; }

/* Vue forgot */
.view-forgot p {
  margin: 0 0 10px;
  color: #cfcfcf;
  font-size: 14px;
}

/* Code login */
.code-login { margin-top:16px; padding-top:12px; border-top:1px solid rgba(255,255,255,.2); }
.code-row { display:flex; gap:8px; margin:8px 0; }

/* Register */
.register-block { margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.2); }
.register-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width: 520px){ .register-grid { grid-template-columns:1fr; } }

/* Accessibilité */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Menu */
.menu-stack { display:flex; flex-direction:column; gap:10px; padding:12px 16px 88px; }
.menu-btn {
  display:block; padding:14px 16px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18); background:#0c1c3c; color:#fff;
  text-decoration:none; font-weight:700; text-align:left; line-height:1.2;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.menu-btn.login { background:#146a3a; border-color:rgba(255,255,255,.25); text-align:center; }
.menu-btn:hover { box-shadow:0 6px 16px rgba(0,0,0,.25); background:#0f244e; }

/* --- BLOG hero slider --- */
.blog-wrap { padding: 0 0 12px; }
.blog-hero-slider{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.blog-hero-slider::-webkit-scrollbar{ display:none; }
.blog-hero{
  position:relative;
  height: 62vh;
  min-height: 420px;
  max-height: 620px;
  scroll-snap-align:start;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #2a2a2a;
  background-color:#111;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.blog-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.85) 100%);
}
.blog-hero-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  gap:14px;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  text-align:center; z-index:1;
}
.blog-badge{
  display:inline-block;
  padding:6px 10px;
  font-size:12px; font-weight:800; letter-spacing:.12em;
  color:#111; background:#ffd400; border-radius:999px;
}
.blog-title{
  margin:0; font-weight:800; line-height:1.15; text-transform:uppercase;
  font-size: clamp(18px, 6vw, 26px);
}
.blog-btn{
  display:inline-block; padding:11px 16px;
  border:2px solid #fff; border-radius:10px;
  font-weight:800; text-decoration:none; color:#fff; background:transparent;
}
.blog-dots{ display:flex; justify-content:center; gap:8px; padding:10px 0 0; }
.blog-dot{ width:8px; height:8px; border-radius:50%; background:#666; opacity:.6; }
.blog-dot.active{ background:#fff; opacity:1; }

@media (min-width: 768px){
  .blog-hero{ height:60vh; min-height:480px; max-height:700px; }
  .blog-title{ font-size: clamp(22px, 3.2vw, 34px); }
}

/* Player quick actions */
.player-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 4px;
}

/* Gros bouton jaune */
.btn-yellow {
  display:block; width:100%; padding:14px 16px; border-radius:10px;
  font-weight:800; text-align:center; text-decoration:none;
  background:#ffd400; color:#111; border:1px solid #e6bf00;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.btn-yellow:active { transform: translateY(1px); }

/* Secondaire clair */
.btn-outline-light {
  display:block; width:100%; padding:12px 14px; border-radius:10px; font-weight:700;
  text-align:center; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5);
}

/* Insta */
.insta-wrap { margin: 20px 0 8px; display:flex; justify-content:center; }
.insta-circles {
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  padding:6px 2px;
}
.insta-item {
  background:none; border:none; padding:0; cursor:pointer;
  width:100px; display:flex; flex-direction:column; align-items:center;
}
.insta-img {
  width:86px; height:86px; border-radius:999px; object-fit:cover;
  border:3px solid #FFD400;
  box-shadow:0 0 0 2px rgba(0,0,0,.2);
  display:block; transition:transform .12s ease;
}
.insta-item:active .insta-img, .insta-item:focus .insta-img { transform:scale(0.98); }
.insta-caption{
  margin-top:8px; font-size:.85rem; color:#fff; text-align:center; line-height:1.2;
  white-space:normal; overflow:visible; text-overflow:clip; word-break:break-word; max-width:96px;
}

/* Twitch status */
.twitch-status-bar{
  position: sticky; top: 0; z-index: 1000;
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.12);
  white-space: nowrap; overflow-x: auto;
}
.twitch-pill{
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: 999px; border: none; cursor: pointer; color: #fff;
  font-weight: 700; font-size: 12px; line-height: 1; background: #146a3a;
  box-shadow: 0 0 0 0 rgba(145,70,255,0); -webkit-tap-highlight-color: transparent;
}
.twitch-pill:active{ transform: scale(.98); }
.twitch-pill .dot{ width: 8px; height: 8px; border-radius: 50%; background: #FF3131; }
.twitch-pill.live .dot{ animation: dot-blink 1s infinite; }
.twitch-pill.live{ animation: pill-glow 1.2s infinite; }
.twitch-pill.offline{ background:#3bcc54; opacity:.78; }
@keyframes dot-blink{ 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes pill-glow{
  0% { box-shadow:0 0 0 0 rgba(145,70,255,.55) }
  70%{ box-shadow:0 0 10px 5px rgba(145,70,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(145,70,255,0) }
}

/* ==== TABLEAUX intégré ==== */
.cat-btn {
  flex:1; border-radius:10px; border:1px solid #2a2a2a; background:#161616; color:#fff; font-weight:700; padding:10px 12px; cursor:pointer;
}
.cat-btn:active { transform:translateY(1px); }
.cat-btn.active { background:#ffd400; border-color:#e6bf00; color:#111; }

.round-tab { border:1px solid #2a2a2a; background:#161616; color:#fff; border-radius:10px; padding:10px 12px; font-weight:700; white-space:nowrap; cursor:pointer; }
.round-tab.active { background:#ffd400; border-color:#e6bf00; color:#111; }

.draw-container {
  padding:10px 8px 20px;
  display:grid; grid-auto-flow:column; grid-auto-columns:88%;
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
}
@media (min-width:768px){ .draw-container { grid-auto-columns:minmax(260px,1fr) } }

.round-col { scroll-snap-align:start; display:flex; flex-direction:column; gap:10px; }
.round-col-title { color:#ffd400; font-weight:800; margin:2px 4px; }

.match {
  background:#161616; border-radius:14px; border:1px solid #2a2a2a; padding:10px; display:flex; flex-direction:column; gap:6px;
}
.player-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.p-name { color:#fff; font-weight:800; font-size:14px; }
.p-seed { color:#ffd400; font-weight:800; font-size:12px; }
.p-flag { font-size:13px; margin-right:4px }
.p-score { color:#ffd400; font-weight:800; font-size:13px; }
.is-winner .p-name { color:#ffd400 }
.muted .p-name { opacity:.6 }
.badge { background:#ffd400; color:#111; font-weight:800; border-radius:8px; padding:2px 6px; font-size:11px; }

.toolbar-scroll {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.toolbar-scroll::-webkit-scrollbar { display: none; }
.toolbar-btn {
  flex: 0 0 auto; border: 1px solid #2a2a2a; background: #161616; color: #fff;
  border-radius: 10px; padding: 10px 14px; font-weight: 700; white-space: nowrap; cursor: pointer; scroll-snap-align: start;
}
.toolbar-btn.active { background: #ffd400; border-color: #e6bf00; color: #111; }
.toolbar-btn:active { transform: translateY(1px); }

/* Pile verticale plein-width */
.stack { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

/* Boutons plein-largeur */
.btn.block {
  display: block; width: 100%; text-align: center; padding: 14px 16px; font-size: 16px; border-radius: 10px;
}
@media (min-width: 700px) { .btn.block { font-size: 18px; } }

/* S'assure que padding/border n'explosent pas la largeur */
*, *::before, *::after { box-sizing: border-box; }

/* Grille auto-fit : 3 par ligne quand il y a la place, sinon 2, sinon 1 */
.grid.autogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: stretch; }
@media (max-width: 360px) { .grid.autogrid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }

/* Titres */
.tools-title {
  margin: 22px 0 10px;
  font-size: clamp(16px, 2.5vw, 18px);
  font-weight: 800;
}

/* 3 colonnes égales, largeur 100% écran */
.tool-row.grid.autogrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 10px 0 24px;
  width: 100%;
}

/* Boutons égaux */
.tool-row .card {
  display: flex;
}

.tool-row .btn {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 2.8vw, 15px); /* s'adapte à la largeur écran */
}

/* Ajustement petits écrans */
@media (max-width: 360px) {
  .tool-row { gap: 8px; }
  .tool-row .btn { padding: 10px 6px; font-size: clamp(11px, 3vw, 14px); }
}

/* Carte + bouton plein container, sans overlap */
.card { display: flex; }
.card .btn {
  flex: 1 1 auto; display: block; width: 100%; text-align: center;
  padding: 14px 16px; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Variante Admin */
.btn.warn { background: #8a2d2d; color: #fff; }

/* Users */
.user-toolbar { display: flex; gap: 10px; align-items: center; margin: 8px 0 12px; }
.user-toolbar input[type="search"] { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid #2e3a5c; background:#0f1d3a; color:#fff; }

.user-list { display: flex; flex-direction: column; gap: 10px; }
.user-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; background: #15264a; border: 1px solid #263a6b; border-radius: 12px; padding: 10px; }
.u-main .u-name { font-weight: 600; }
.u-main .u-email { font-size: 12px; opacity: .8; }

.u-roles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.role-chip { display: inline-flex; gap: 6px; align-items: center; background: #0f1d3a; border: 1px solid #2e3a5c; border-radius: 999px; padding: 6px 10px; font-size: 13px; }
.role-chip input { accent-color: #2b5236; }

.u-actions .btn.mini { padding: 8px 10px; font-size: 13px; }

@media (max-width: 480px) {
  .user-row { grid-template-columns: 1fr; }
  .u-roles { justify-content: flex-start; }
  .u-actions { display: flex; justify-content: flex-end; }
}

/* Boutons Login et Logout en vert */
#openLogin,
#btnLogout {
  background-color: #146a3a; /* Vert utilisé dans ton thème */
  color: #fff;
  border: none;
  font-weight: bold;
}

#openLogin:hover,
#btnLogout:hover {
  background-color: #146a3a; /* Vert plus foncé au survol */
}

/* ==== LAYERS & SAFE AREA FIX (override global) ==== */

/* 1) La tabbar reste visible mais sous les modales */
.tabbar { z-index: 120 !important; }

/* La barre Twitch en haut aussi sous les modales */
.twitch-status-bar { z-index: 110 !important; }

/* 2) Les écrans ne passent plus sous la tabbar */
.screen { padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }

/* 3) Modales au-dessus de tout */
.login-modal,
.hl-modal { z-index: 2000 !important; }

.login-sheet,
.hl-dialog { z-index: 2001 !important; }

.hl-prev, .hl-next, .hl-close, .hl-bars, .hl-caption { z-index: 2002 !important; }

/* 4) Quand une modale est ouverte (ton code met overflow:hidden sur <body>) :
      on rend la tabbar non cliquable et on la met derrière */
body[style*="overflow: hidden"] nav.tabbar {
  z-index: 0 !important;
  pointer-events: none;
  opacity: .7;
  filter: saturate(.75);
}

.btn.social {
  background: linear-gradient(135deg, #1a4b8c, #2267b2);
  color: #fff;
  border: 1px solid #185087;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.btn.social:hover {
  background: linear-gradient(135deg, #2267b2, #1a4b8c);
}
.btn.social:active {
  transform: translateY(1px);
}