/* css/v2.css — Nouveaux éléments : connexion, sous-onglets Architecte, étapes, succès, fiche, cinématiques, donjon du jour… */

/* Selon la version de la base : certains blocs n'existent qu'en v2 */
.v2-seul { display: none !important; }
body.mode-v2 .v2-seul { display: revert !important; }
body.mode-v2 .v1-seul { display: none !important; }
body.chargement .tab-content { opacity: .55; }

.indicateur-attente { margin-top: 4px; font-size: .75rem; color: #fdba74; text-align: center; }

/* ---------- Connexion ---------- */
.ecran-connexion { position: fixed; inset: 0; z-index: 400; background: radial-gradient(circle at 50% 20%, #0f2547, #040811 75%);
  align-items: center; justify-content: center; padding: calc(20px + env(safe-area-inset-top)) 16px 20px; }
body.connexion-requise .tab-content, body.connexion-requise .bottom-nav { visibility: hidden; }
.connexion-carte { width: 100%; max-width: 380px; background: var(--panel-bg); border: 1px solid var(--neon-blue); border-radius: 14px; padding: 22px 18px;
  box-shadow: var(--neon-glow); text-align: center; }
.connexion-carte .system-title { font-size: 1.3rem; margin-bottom: 6px; }
.connexion-intro { color: var(--text-muted); margin-bottom: 14px; }
.connexion-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.role-choix { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 1.6rem; padding: 12px 6px; background: rgba(0,240,255,.05);
  border: 1px solid rgba(0,240,255,.25); }
.role-choix b { font-size: 1rem; } .role-choix small { font-size: .72rem; color: var(--text-muted); font-weight: 500; }
.role-choix.actif { border-color: var(--neon-blue); background: rgba(0,240,255,.16); box-shadow: var(--neon-glow); }
.connexion-aide { font-size: .75rem; color: var(--text-muted); margin-top: 10px; }

/* ---------- Statut ---------- */
.titre-chasseur { color: var(--gold); font-weight: 700; font-style: italic; font-size: .9rem; margin: 2px 0 2px; }
.btn-fiche { margin-top: 6px; width: auto; padding: 4px 10px; font-size: .78rem; }
.choix-apparence { margin-top: 10px; }
.succes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.succes { border: 1px solid rgba(138,180,248,.2); border-radius: 8px; padding: 6px 4px; text-align: center; opacity: .55; display: flex; flex-direction: column; gap: 2px; }
.succes.obtenu { opacity: 1; border-color: var(--gold); background: rgba(255,200,0,.08); box-shadow: 0 0 8px rgba(255,200,0,.2); }
.succes-icone { font-size: 1.3rem; } .succes-nom { font-size: .7rem; line-height: 1.15; } .succes small { font-size: .62rem; color: var(--text-muted); }
.aide { font-size: .8rem; color: var(--text-muted); margin: 4px 0 8px; }
.sous-titre { color: var(--gold); margin: 14px 0 6px; font-size: .9rem; }

/* ---------- Quêtes ---------- */
.badge-cle { background: rgba(168,85,247,0.2); border: 1px solid #a855f7; color: #e9d5ff; }
.badge-equipe { background: rgba(56,189,248,.18); border: 1px solid #38bdf8; color: #bae6fd; }
.badge-serie { background: rgba(255,120,0,0.18); border: 1px solid #fb923c; color: #fdba74; }
.badge-recurrente { background: rgba(0,240,255,.1); border: 1px solid rgba(0,240,255,.4); font-size: .7rem; }
.etapes { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--neon-blue); background: rgba(0,240,255,.05); border-radius: 0 8px 8px 0; }
.etapes-titre { font-size: .8rem; font-weight: 700; color: var(--neon-blue); margin-bottom: 4px; }
.etape { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .95rem; cursor: pointer; }
.etape input { width: 20px; height: 20px; accent-color: var(--green); }
.etape.faite span { text-decoration: line-through; color: var(--text-muted); }
.commentaire-architecte { background: rgba(255,42,84,0.15); border-left: 3px solid var(--urgent-red); padding: 8px; margin-top: 8px; font-weight: 700; color: #ff8da1; }
.quete-envoyee { margin-top: 10px; padding: 10px; background: rgba(255,200,0,0.1); border: 1px solid var(--gold); border-radius: 6px; text-align: center; color: var(--gold); font-weight: 700; }
.btn-photo.desactive { opacity: .45; pointer-events: none; }
.chrono.pause { border-color: #38bdf8; background: rgba(56,189,248,.1); color: #bae6fd; }

/* ---------- Espace Architecte ---------- */
.admin-entete { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; position: sticky; top: calc(108px + env(safe-area-inset-top)); z-index: 5;
  background: rgba(4,8,17,.92); padding: 6px 0; backdrop-filter: blur(6px); }
.sous-onglets { display: flex; gap: 6px; flex: 1; min-width: 0; }
.sous-onglet { flex: 1; padding: 9px 4px; font-size: .8rem; background: rgba(0,240,255,.04); border: 1px solid rgba(0,240,255,.25); position: relative; white-space: nowrap; }
.sous-onglet.actif { background: rgba(0,240,255,.16); border-color: var(--neon-blue); box-shadow: var(--neon-glow); }
.pastille { position: absolute; top: -6px; right: -4px; background: var(--urgent-red); color: #fff; border-radius: 10px; font-size: .7rem; padding: 1px 6px; }
#btn-verrouiller { width: auto; flex: 0 0 auto; }
.admin-section { display: none; } .admin-section.actif { display: block; }
.carte-validation { border: 1px solid var(--neon-blue); border-radius: 8px; padding: 12px; margin-top: 10px; background: rgba(0,0,0,0.3); }
.validation-sans-photo { margin: 8px 0; padding: 8px; border-left: 3px solid var(--green); background: rgba(0,230,118,0.1); font-weight: 700; color: var(--green); }
.cadre-recompenses, .cadre-recurrence { background: rgba(0,240,255,0.06); border: 1px dashed rgba(0,240,255,0.45); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.cadre-titre { font-size: .82rem; font-weight: 700; color: #fff; margin-bottom: 8px; text-transform: uppercase; }
.jours-semaine { display: flex; flex-wrap: wrap; gap: 6px; }
.jours-semaine label { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border: 1px solid rgba(0,240,255,.3); border-radius: 8px; font-size: .85rem; }
.jours-semaine input { accent-color: var(--neon-blue); }
textarea { width: 100%; background: rgba(0,0,0,.4); color: var(--text-main); border: 1px solid rgba(0,240,255,.3); border-radius: 8px; padding: 10px; font-size: 1rem; font-family: inherit; user-select: text; }
.boutons-tests { flex-wrap: wrap; }
.vacances-on { color: #7dd3fc; font-weight: 700; margin-bottom: 8px; }
.erreur-ligne { font-size: .78rem; border-left: 3px solid var(--urgent-red); padding: 4px 8px; margin: 6px 0; background: rgba(255,42,84,.06); word-break: break-word; user-select: text; }
.etage-comp { color: var(--gold); font-weight: 600; }
#admin-sauvegardes .btn-small { display: block; width: 100%; margin-top: 6px; }

/* ---------- Donjon ---------- */
.donjon-jour { margin: 10px 0; padding: 10px; border: 1px solid rgba(255,200,0,.5); border-radius: 10px; background: rgba(255,200,0,.06); }
.dj-titre { font-family: 'Orbitron', sans-serif; font-size: .85rem; color: var(--gold); } .dj-titre small { font-family: 'Rajdhani', sans-serif; color: var(--text-muted); }
.dj-infos { font-size: .8rem; color: var(--text-muted); margin: 4px 0 8px; }
.aide-manette { font-size: .72rem; color: var(--text-muted); margin-top: 8px; }
.hud-chip.chrono-run { color: var(--gold); }
#btn-grappin { background: rgba(255,200,0,.15); border-color: rgba(255,200,0,.6); }

/* ---------- Fiche du Chasseur ---------- */
#fiche-chasseur { z-index: 300; }
.fiche-carte { max-width: 420px; width: calc(100% - 24px); }
.fiche-carte canvas { width: 100%; height: auto; border-radius: 10px; display: block; margin-bottom: 10px; }

/* ---------- Cinématiques ---------- */
.cinematique { position: fixed; inset: 0; z-index: 500; display: none; background: #02040a; }
.cinematique.visible { display: block; }
.cinematique canvas { width: 100%; height: 100%; display: block; }
.cinematique-passer { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: .8rem; color: var(--text-muted); }