/* ── Pages anonymes ─────────────────────────────────────── */

/* Landing */
.anon-landing {
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3em; padding: 2em;
}
.anon-landing-head { text-align: center; display: flex; flex-direction: column; gap: .6em; }
.anon-sub { font-size: .75rem; letter-spacing: .25em; color: var(--text-dim); text-transform: uppercase; }

.anon-cards {
    display: flex; gap: 2em; flex-wrap: wrap; justify-content: center;
}
.anon-card {
    width: 240px; padding: 2em 1.5em;
    border: 1px solid var(--border); background: var(--bg2);
    display: flex; flex-direction: column; gap: 1em;
    cursor: default;
    transition: border-color var(--trans), background var(--trans);
}
.anon-card:hover { border-color: rgba(119,255,136,.35); background: rgba(119,255,136,.03); }

.anon-card-icon  { font-size: 1.4rem; color: var(--accent); letter-spacing: 0; }
.anon-card-title { font-size: .85rem; letter-spacing: .25em; text-transform: uppercase; }
.anon-card-desc  { font-size: .72rem; color: var(--text-dim); line-height: 1.5; }

/* Form commun */
.form-block { display: flex; flex-direction: column; gap: 1em; }

/* Salon anonyme */
.anon-room-shell {
    display: flex; flex-direction: column; height: 100vh;
}
.anon-room-header {
    display: flex; align-items: center; gap: 1em;
    padding: .8em 1.2em; border-bottom: 1px solid var(--border);
    flex-shrink: 0; background: var(--bg2);
}
.anon-room-icon   { font-size: 1.2rem; }
.anon-room-title  { flex: 1; font-size: .9rem; letter-spacing: .12em; }
.anon-room-code   { font-size: .7rem; letter-spacing: .2em; color: var(--text-dim); }

.anon-room-share {
    display: flex; align-items: center; gap: .5em;
    padding: .5em 1.2em;
    background: rgba(119,255,136,.04);
    border-bottom: 1px solid var(--border);
    font-size: .72rem; color: var(--text-dim);
    flex-shrink: 0;
}
.share-link { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copy-btn   { flex-shrink: 0; }

.anon-messages { flex: 1; overflow-y: auto; padding: 1em 1.2em; display: flex; flex-direction: column; }

.anon-compose {
    flex-shrink: 0; border-top: 1px solid var(--border); background: var(--bg2);
}
.anon-compose-inner {
    display: flex; align-items: flex-end; gap: .5em; padding: .7em 1em;
}
.anon-compose-input {
    flex: 1; background: var(--bg3); border: 1px solid var(--border);
    color: var(--text); font-size: .85rem; padding: .6em .8em;
    outline: none; resize: none; max-height: 120px; line-height: 1.4;
    transition: border-color var(--trans);
}
.anon-compose-input:focus { border-color: rgba(119,255,136,.35); }

/* ── Bouton pièce jointe (anon) ── */
.attach-btn {
    background: transparent; border: none;
    color: var(--text-dim); font-size: 1.1rem;
    padding: .4em .5em; cursor: pointer; flex-shrink: 0;
    transition: color var(--trans);
}
.attach-btn:hover { color: var(--accent); }

/* ── Preview fichier avant envoi (anon) ── */
.media-preview { border-top: 1px solid var(--border); background: var(--bg2); padding: .5em 1em; }
.media-preview-inner {
    display: flex; align-items: center; gap: .7em;
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: 4px; padding: .4em .6em;
}
.media-preview-inner img, .media-preview-inner video {
    max-height: 60px; max-width: 100px; object-fit: cover; border-radius: 3px;
}
.media-preview-name {
    flex: 1; font-size: .75rem; color: var(--text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media-remove-btn {
    background: transparent; border: none; color: var(--text-dim);
    font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 .2em;
}
.media-remove-btn:hover { color: #ff6b6b; }

/* styles médias dans base.css */

/* Badge modal "entrer le mot de passe du salon" */
.pw-gate {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 300;
}
.pw-gate-box {
    background: var(--bg2); border: 1px solid rgba(119,255,136,.25);
    padding: 2.5em 3em; display: flex; flex-direction: column; gap: 1.2em;
    min-width: 280px;
}
.pw-gate-label { font-size: .85rem; letter-spacing: .15em; color: var(--accent); text-transform: uppercase; }
.pw-gate-error  { font-size: .75rem; color: var(--danger); min-height: 1em; letter-spacing: .1em; }

/* QR code */
.qr-wrap { text-align: center; }
.qr-wrap img { max-width: 160px; border: 1px solid var(--border); padding: .5em; background: #fff; }