/* Accessibilité et ergonomie globale */
button, input, select, textarea { font:inherit; }
button:not(:disabled) { cursor:pointer; }
button { min-height:44px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.topbar-right { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.topbar-right .profile-button, .topbar-right .utility-button, .topbar-right .sound-toggle { min-height:46px; padding:11px 14px; color:var(--ink); border:1px solid rgba(184,243,74,.45); background:rgba(14,42,48,.96); box-shadow:0 4px 14px rgba(0,0,0,.18); font-size:10px; }
.topbar-right .profile-button { color:var(--bg); background:var(--green); border-color:var(--green); font-weight:700; }
.topbar-right .profile-button:hover { color:var(--bg); background:var(--gold); border-color:var(--gold); }
.topbar-right .utility-button:hover, .topbar-right .sound-toggle:hover { color:var(--bg); background:var(--blue); border-color:var(--blue); transform:translateY(-2px); }
.topbar-right .utility-button span { color:var(--gold); }
/* Thèmes et niveaux : deux colonnes confortables, une colonne sur mobile */
.theme-buttons, .level-buttons { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; gap:12px; margin-top:12px; }
.theme-button, .level-button { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; width:100%; min-width:0; min-height:88px; padding:17px 20px; color:var(--ink); border:2px solid rgba(255,255,255,.2); background:rgba(15,34,42,.94); box-shadow:0 4px 12px rgba(0,0,0,.18); line-height:1.3; text-align:left; white-space:normal; }
.theme-button strong, .level-button strong { margin-bottom:2px; font-size:12px; letter-spacing:.02em; }
.theme-button small, .level-button small { margin:0; color:var(--muted); line-height:1.45; letter-spacing:.01em; }
.theme-button:nth-child(1) { background:linear-gradient(135deg,rgba(119,224,199,.24),rgba(13,50,56,.94)); border-color:var(--blue); }
.theme-button:nth-child(2) { background:linear-gradient(135deg,rgba(184,243,74,.2),rgba(23,53,39,.94)); border-color:var(--green); }
.theme-button:nth-child(3) { background:linear-gradient(135deg,rgba(242,210,118,.22),rgba(57,44,25,.94)); border-color:var(--gold); }
.theme-button:nth-child(4) { background:linear-gradient(135deg,rgba(255,155,135,.2),rgba(59,34,39,.94)); border-color:var(--coral); }
.level-button:nth-child(1) { background:linear-gradient(135deg,rgba(119,224,199,.26),rgba(13,50,56,.94)); border-color:var(--blue); }
.level-button:nth-child(2) { background:linear-gradient(135deg,rgba(184,243,74,.22),rgba(23,53,39,.94)); border-color:var(--green); }
.level-button:nth-child(3) { background:linear-gradient(135deg,rgba(242,210,118,.24),rgba(57,44,25,.94)); border-color:var(--gold); }
.level-button:nth-child(4) { background:linear-gradient(135deg,rgba(255,155,135,.22),rgba(59,34,39,.94)); border-color:var(--coral); }
.level-button:nth-child(5) { background:linear-gradient(135deg,rgba(255,113,95,.24),rgba(61,28,31,.94)); border-color:var(--coral); }
.theme-button:hover, .level-button:hover { color:var(--bg); background:var(--blue); border-color:var(--blue); transform:translateY(-2px); }
.theme-button:hover small, .level-button:hover small { color:var(--bg); }
.theme-button.active, .level-button.active { color:var(--bg); background:var(--green); border-color:var(--green); box-shadow:0 7px 18px rgba(184,243,74,.22); }
.theme-button.active small, .level-button.active small { color:rgba(6,20,25,.78); }
/* Contrôles de quiz */
.option-button, .memory-option, .move-button, .quit-button { min-height:44px; }
.option-button { padding:15px 18px; }
/* Interfaces Clubs / Champions / Admin */
.club-dialog, .community-dialog, .admin-dialog { border-top:5px solid var(--blue); }
.club-form, .community-form { padding:18px; border:1px solid rgba(119,224,199,.3); background:rgba(119,224,199,.07); border-radius:8px; }
.club-form input, .club-form textarea, .community-form input, .community-form select, .community-form textarea { min-height:50px; border-color:rgba(119,224,199,.4); background:rgba(5,20,26,.85); }
.club-form label, .community-form label { color:var(--blue); }
.club-form > button, .community-form > button { width:100%; color:var(--bg); background:var(--green); border-color:var(--green); }
.club-form > button:hover, .community-form > button:hover { background:var(--gold); border-color:var(--gold); }
.club-card { border-left:4px solid var(--gold); background:linear-gradient(90deg,rgba(242,210,118,.1),rgba(8,22,32,.5)); }
.club-card strong { color:var(--gold); }
.club-actions { display:flex; flex-wrap:wrap; gap:10px; }
.club-actions button { min-width:110px; }
.club-actions button:first-child { color:var(--bg); background:var(--blue); border-color:var(--blue); }
.club-actions button:last-child { color:var(--bg); background:var(--gold); border-color:var(--gold); }
@media (max-width:900px) { .topbar-right .utility-button, .topbar-right .profile-button, .topbar-right .sound-toggle { font-size:9px; padding:10px 11px; } }
@media (max-width:600px) { .theme-buttons, .level-buttons { grid-template-columns:1fr; gap:10px; } .theme-button, .level-button { min-height:72px; padding:14px 16px; } .topbar-right { justify-content:flex-end; } }

/* Ajouts limités : dashboard compte et catégorie Footix */
.account-dashboard { display:grid; gap:16px; margin-top:26px; }.account-dashboard-card { display:grid; gap:8px; padding:22px; border:2px solid rgba(119,224,199,.45); background:linear-gradient(135deg,rgba(119,224,199,.15),rgba(15,34,42,.9)); }.account-dashboard-card .section-label { color:var(--blue); border:0; padding:0; }.account-dashboard-card strong { color:var(--ink); font:600 28px var(--display); }.account-dashboard-card small { color:var(--muted); }.account-dashboard-card b { color:var(--green); font:600 11px var(--display); letter-spacing:.1em; }.account-dashboard-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.account-dashboard-actions button { min-height:52px; padding:12px 16px; }.account-dashboard-actions .danger-action { color:var(--ink); border:1px solid var(--coral); background:rgba(255,113,95,.18); }.account-dashboard-actions .danger-action:hover { color:var(--bg); background:var(--coral); }.theme-button:nth-child(5) { background:linear-gradient(135deg,rgba(119,224,199,.2),rgba(31,40,62,.94)); border-color:var(--blue); }
@media (max-width:700px) { .account-dashboard-actions { grid-template-columns:1fr; }.account-dashboard-actions button { width:100%; } }

/* Contrôles publics : cibles de clic explicites, sans modifier les autres zones */
.topbar-right button, .theme-button, .level-button, .option-button, .memory-option, .move-button, .quit-button, .dialog-close { pointer-events:auto; cursor:pointer; }
.theme-buttons, .level-buttons { gap:14px; }
.theme-button, .level-button { min-height:92px; padding:18px 20px; }
.topbar-right { gap:14px; }

/* Dashboard admin simplifié : sections lisibles, actions colorées et espacées */
.admin-dialog { width:min(980px, calc(100vw - 28px)); max-width:980px; padding:0; border:0; border-top:6px solid var(--blue); background:var(--panel, #0f222a); }
.admin-dialog .dialog-lede { max-width:66ch; margin-bottom:18px; }
.admin-overview { display:grid; gap:18px; padding:4px 2px 8px; }
.admin-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.admin-stats strong { display:grid; gap:5px; min-height:92px; align-content:center; padding:16px 18px; border:1px solid rgba(255,255,255,.16); border-radius:12px; color:var(--ink); font:700 30px var(--display); background:linear-gradient(135deg,rgba(119,224,199,.2),rgba(13,39,48,.9)); }
.admin-stats strong:nth-child(2) { background:linear-gradient(135deg,rgba(242,210,118,.22),rgba(52,39,24,.92)); }
.admin-stats strong:nth-child(3) { background:linear-gradient(135deg,rgba(255,155,135,.22),rgba(57,31,37,.92)); }
.admin-stats small { color:var(--muted); font:600 11px var(--body); letter-spacing:.08em; text-transform:uppercase; }
.admin-overview h3 { margin:12px 0 -6px; padding-bottom:9px; color:var(--blue); border-bottom:1px solid rgba(119,224,199,.24); font:700 13px var(--display); letter-spacing:.08em; text-transform:uppercase; }
.admin-list { display:grid; gap:9px; }
.admin-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid rgba(255,255,255,.12); border-left:4px solid var(--blue); border-radius:10px; background:rgba(7,23,30,.7); }
.admin-row > span:first-child { min-width:0; display:grid; gap:5px; }
.admin-row > span:first-child small { color:var(--muted); overflow-wrap:anywhere; }
.admin-row-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.admin-row button, .admin-row-actions button { min-height:44px; padding:10px 14px; color:var(--bg); border:1px solid transparent; border-radius:8px; background:var(--green); font-weight:700; cursor:pointer; }
.admin-row button:hover, .admin-row-actions button:hover { transform:translateY(-1px); filter:brightness(1.08); }
.admin-row [data-badge-user], .admin-row [data-approve-badge] { background:var(--gold); }
.admin-row [data-approve-question] { background:var(--blue); }
.admin-row .danger-action { color:var(--ink); background:rgba(255,113,95,.24); border-color:var(--coral); }
.admin-row .badge-champions { padding:9px 11px; color:var(--bg); border-radius:999px; background:var(--green); font-size:10px; letter-spacing:.08em; }
.login-log-list .admin-row { border-left-color:var(--gold); }
.log-ok, .log-fail { min-width:58px; padding:8px 10px; border-radius:999px; text-align:center; font-size:10px; }
.log-ok { color:var(--bg); background:var(--green); }.log-fail { color:var(--ink); background:var(--coral); }
.empty-state { margin:0; padding:18px; border:1px dashed rgba(255,255,255,.2); border-radius:10px; color:var(--muted); background:rgba(255,255,255,.03); }
@media (max-width:700px) { .admin-stats { grid-template-columns:1fr; }.admin-row { align-items:stretch; flex-direction:column; }.admin-row-actions { justify-content:flex-start; }.admin-row-actions button { flex:1 1 140px; } }

/* Identité Footy Quiz et installation sur l’appareil */
.brand { display:inline-flex; align-items:center; gap:10px; }
.brand-logo { width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(184,243,74,.25)); }
.brand-name strong { color:var(--green); letter-spacing:.08em; }
.install-button { color:var(--bg) !important; background:var(--gold) !important; border-color:var(--gold) !important; font-weight:700; }
.install-button:hover { background:var(--green) !important; border-color:var(--green) !important; }
.install-button:disabled { opacity:.7; cursor:default; }
@media (max-width:700px) { .brand-logo { width:30px; height:30px; }.brand-name { font-size:10px; }.install-button { order:5; } }

/* Installation PWA : parcours clair sur tous les appareils */
.install-dialog { width:min(560px, calc(100vw - 28px)); max-width:560px; padding:0; border:0; border-top:6px solid var(--gold); color:var(--ink); background:var(--panel, #0f222a); box-shadow:0 22px 70px rgba(0,0,0,.45); }
.install-dialog::backdrop { background:rgba(2,10,14,.78); backdrop-filter:blur(4px); }
.install-dialog .dialog-lede { margin:0 24px 20px; color:var(--muted); line-height:1.6; }
.install-steps { display:grid; gap:12px; margin:0 24px 22px; }
.install-steps > div { display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid rgba(242,210,118,.35); border-radius:12px; background:rgba(242,210,118,.08); }
.install-steps b { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:50%; color:var(--bg); background:var(--gold); font:700 14px var(--display); }
.install-steps span { display:grid; gap:5px; }
.install-steps strong { color:var(--ink); font:700 13px var(--display); }
.install-steps small { color:var(--muted); font-size:12px; line-height:1.5; }
.install-dialog-actions { display:flex; gap:12px; padding:18px 24px 24px; border-top:1px solid rgba(255,255,255,.1); }
.install-dialog-actions button { flex:1; min-height:50px; }
.install-dialog-actions .button-primary { color:var(--bg); background:var(--gold); border-color:var(--gold); }
.install-dialog-actions .button-primary:hover { background:var(--green); border-color:var(--green); }
@media (max-width:600px) { .install-dialog-actions { flex-direction:column; }.install-dialog .dialog-lede, .install-steps { margin-left:18px; margin-right:18px; }.install-dialog-actions { padding-left:18px; padding-right:18px; } }