/* Styles communs aux pages (accueil, map, invitation, compte) */
:root { --bg:#f9fafb; --card:#fff; --fg:#1d2330; --muted:#6b7280; --line:#e5e7eb; --accent:#2563eb; --danger:#b91c1c; --ok:#15803d; }
* { box-sizing:border-box; }
/* Un élément masqué reste masqué, même si une règle lui donne un affichage (flex, grid…) */
[hidden] { display:none !important; }
html, body { margin:0; font:15px/1.5 system-ui, sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--accent); }
#topbar { display:flex; align-items:center; gap:16px; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
#topbar .brand { font-weight:700; font-size:17px; text-decoration:none; color:var(--fg); }
#topbar nav { display:flex; gap:14px; margin-left:auto; align-items:center; flex-wrap:wrap; }
#topbar nav a { text-decoration:none; }
#topbar .who { color:var(--muted); }
main.page { max-width:860px; margin:0 auto; padding:24px 16px 48px; }
h1 { font-size:24px; margin:0 0 6px; }
h2 { font-size:18px; margin:0 0 10px; }
p.lead, .muted { color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin-bottom:18px; }
.card.auth { max-width:420px; margin:0 auto 18px; }
.auth-title { text-align:center; margin:24px 0 18px; }
.auth h2 { margin:0 0 4px; }
.auth .msg:empty { display:none; }
#forgot { text-align:center; }
#forgot-mail:not([hidden]) + #recover { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.auth .switch { margin:4px 0 0; padding-top:12px; border-top:1px solid var(--line); text-align:center; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:700px) { .grid2 { grid-template-columns:1fr; } }
form.stack { display:flex; flex-direction:column; gap:10px; }
form.row, .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
label.field { display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--muted); }
input, select, button, textarea { font:inherit; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--fg); }
input[type=checkbox] { padding:0; }
button { cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
/* Lien présenté comme un bouton (téléchargement de l'APK) */
a.button { display:block; text-align:center; text-decoration:none; padding:10px 14px; border-radius:8px; font-weight:600; }
a.button.primary { background:var(--accent); color:#fff; }
.small { font-size:13px; }
/* Force d'un nouveau mot de passe */
/* Œil afficher / masquer, posé à droite dans le champ */
.pw-wrap { position:relative; display:flex; flex:1; }
.pw-wrap input { flex:1; width:100%; padding-right:40px; }
.pw-eye { position:absolute; right:4px; top:50%; transform:translateY(-50%); padding:4px; border:none; background:none; color:var(--muted); line-height:0; }
.pw-eye:hover, .pw-eye:focus-visible { color:var(--accent); }
.pw-eye svg { width:20px; height:20px; fill:currentColor; }
.pw-meter { margin:-4px 0 4px; font-size:13px; }
.pw-bar { height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.pw-bar-fill { display:block; height:100%; width:0; transition:width .2s, background .2s; }
.pw-meter[data-score="0"] .pw-bar-fill { background:#dc2626; }
.pw-meter[data-score="1"] .pw-bar-fill { background:#ea580c; }
.pw-meter[data-score="2"] .pw-bar-fill { background:#ca8a04; }
.pw-meter[data-score="3"] .pw-bar-fill { background:#16a34a; }
.pw-meter[data-score="4"] .pw-bar-fill { background:#15803d; }
.pw-label { display:block; margin-top:4px; color:var(--muted); }
.pw-rules { margin:4px 0 0; padding:0; list-style:none; color:var(--muted); }
.pw-rules li::before { content:'✗ '; color:#dc2626; }
.pw-rules li.ok { color:#15803d; }
.pw-rules li.ok::before { content:'✓ '; color:#15803d; }
.hash { display:block; margin-top:6px; word-break:break-all; font:12px/1.4 ui-monospace, monospace; }
button.danger { color:var(--danger); }
button:disabled { opacity:.6; cursor:default; }
.msg { min-height:1.4em; margin:6px 0; }
.msg.error { color:var(--danger); }
.msg.ok { color:var(--ok); }
table.list { width:100%; border-collapse:collapse; }
table.list th, table.list td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
table.list th { font-size:13px; color:var(--muted); font-weight:600; }
.badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; background:#eef2ff; color:#3730a3; }
.badge.private { background:#f3f4f6; color:#374151; }
.badge.public { background:#ecfdf5; color:#065f46; }
.code { font:600 17px/1 ui-monospace, monospace; letter-spacing:2px; }
.secret { padding:12px; border:2px dashed var(--accent); border-radius:8px; text-align:center; font:700 20px/1.3 ui-monospace, monospace; letter-spacing:2px; background:#eff6ff; }
.empty { color:var(--muted); padding:8px 0; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); }
.tabs button { border:none; border-bottom:2px solid transparent; border-radius:0; background:none; padding:8px 12px; }
.tabs button.active { border-bottom-color:var(--accent); color:var(--accent); font-weight:600; }