:root {
    --color-primary: #1d4ed8;
    --color-primary-dark: #1e3a8a;
    --color-primary-light: #eff6ff;
    --color-bg: #f3f4f6;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-border-input: #9ca3af;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-danger: #dc2626;
    --radius: 8px;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
    --topbar-height: 64px;
    --mobile-tabbar-height: 56px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
}

a {
    color: inherit;
    text-decoration: none;
}

/* ---------- Barre supérieure ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--topbar-height);
    background: var(--color-primary);
    color: #fff;
}

.topbar-inner {
    height: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    color: #fff;
    white-space: nowrap;
}

.topbar-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* ---------- Nav en icônes (façon ruban, sans les onglets) ---------- */

.iconnav {
    flex: 1;
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 100%;
    min-width: 0;
    flex-wrap: wrap;
}

.iconnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 10px;
    border-radius: var(--radius);
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
    align-self: center;
    flex-shrink: 0;
}

.iconnav-item:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.iconnav-item.is-active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.iconnav-icon {
    position: relative;
    display: inline-block;
    font-size: 1.15rem;
    line-height: 1;
}

/* Pastille numérique de notifications non vues, sur une icône de nav (haut
   de page desktop, .iconnav-icon, ou barre du bas mobile,
   .mobile-tabbar-icon-wrap — voir includes/header.php). */
.nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
}

.iconnav-label {
    font-size: 0.66rem;
    line-height: 1;
}

.iconnav-dropdown {
    position: relative;
    align-self: center;
}

.iconnav-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 6px;
    z-index: 30;
}

.iconnav-panel.is-open {
    display: block;
}

.iconnav-panel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--color-text);
}

.iconnav-panel-item:hover,
.iconnav-panel-item.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.drawer-section-title {
    margin: 12px 12px 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.topbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Invite à définir un mot de passe (compte connecté via lien d'accès sans
   mot de passe, voir acces.php) : reste visible sur toutes les pages tant
   que password_hash est NULL. */
.topbar-password-prompt {
    padding: 6px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.user-menu-trigger {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.9);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius);
}

.user-menu-trigger:hover,
.user-menu-trigger.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.iconnav-panel-right {
    left: auto;
    right: 0;
    transform: none;
}

.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.burger span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

/* ---------- Barre d'icônes mobile (bas d'écran) ---------- */

.mobile-tabbar {
    display: none;
}

.mobile-tabbar-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--color-text-muted);
}

.mobile-tabbar-icon-wrap {
    position: relative;
    display: inline-block;
    line-height: 1;
}

.mobile-tabbar-item.is-active {
    color: var(--color-primary);
}

/* ---------- Tiroir mobile ---------- */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 29;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    max-width: 85vw;
    background: var(--color-surface);
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    z-index: 30;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
}

.drawer.is-open {
    transform: translateX(0);
}

.drawer-header {
    height: var(--topbar-height);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--color-primary);
    color: #fff;
}

.drawer-title {
    font-weight: 600;
}

.drawer-close {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 8px;
    overflow-y: auto;
}

.drawer-link {
    padding: 12px 12px;
    border-radius: var(--radius);
    font-size: 0.95rem;
}

.drawer-link:hover,
.drawer-link.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.drawer-link-logout {
    margin-top: 8px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    color: var(--color-danger);
}

@media (max-width: 767px) {
    .iconnav,
    .topbar-user {
        display: none;
    }

    /* Sélecteur qualifié (pas juste ".topbar-password-prompt") : ce lien
       porte aussi la classe ".btn" (display: inline-flex, définie plus bas
       dans ce fichier) — à spécificité égale, la règle qui apparaît en
       dernier dans le fichier l'emporte, donc un simple ".topbar-password-prompt
       { display: none; }" ici se faisait silencieusement écraser par ".btn"
       plus bas. Qualifier avec le parent augmente la spécificité et règle
       le problème quel que soit l'ordre des règles dans le fichier. */
    .topbar-inner .topbar-password-prompt {
        display: none;
    }

    .burger {
        display: flex;
    }

    .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 25;
        height: var(--mobile-tabbar-height);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
    }

    /* Sans cette marge, la barre fixe recouvrirait le bas du contenu de
       chaque page (le pied de page reste dans le flux normal, lui). */
    .content {
        padding-bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0px) + 24px);
    }
}

/* ---------- Fenêtre modale (popups de création) ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 49;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.modal.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.05rem;
}

.modal-close {
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
}

.modal-close:hover {
    color: var(--color-text);
}

.modal-body {
    padding: 20px;
}

@media (max-width: 600px) {
    .modal {
        width: calc(100% - 32px);
    }
}

/* ---------- Bandeau migrations en attente ---------- */

.migration-banner {
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
    color: #92400e;
    padding: 10px 16px;
    text-align: center;
    font-size: 0.88rem;
}

.migration-banner a {
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- Contenu ---------- */

.content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.page-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 20px;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 20px;
    margin-bottom: 20px;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 16px;
}

/* ---------- Formulaires ---------- */

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--color-text-muted);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius);
    font-size: 0.95rem;
    background: #fff;
}

.field input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ---------- Zone de texte enrichie (gras/italique/emoji) ---------- */

.richtext-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    position: relative;
}

.richtext-toolbar button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-border-input);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}

.richtext-toolbar button:hover {
    background: var(--color-primary-light);
}

.richtext-content p {
    margin: 0 0 10px;
}

.richtext-content p:last-child {
    margin-bottom: 0;
}

.richtext-content ul,
.richtext-content ol {
    margin: 0 0 10px;
    padding-left: 22px;
}

.richtext-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.richtext-input {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    /* "resize" n'a aucun effet tant que overflow reste "visible" (valeur par
       défaut) — sans ceci, la poignée de redimensionnement n'apparaît jamais. */
    overflow: auto;
    padding: 9px 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius);
    font: inherit;
    background: #fff;
}

.richtext-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.richtext-emoji-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 6px;
    width: 220px;
}

/* Le "display: grid" ci-dessus est une règle auteur : elle l'emporte sur la
   règle "[hidden] { display: none }" de la feuille du navigateur (même sans
   plus forte spécificité, l'origine "auteur" gagne toujours sur l'origine
   "user agent"), donc sans cette règle explicite le panneau reste visible en
   permanence quel que soit l'attribut "hidden" posé par le JS. */
.richtext-emoji-panel[hidden] {
    display: none;
}

.richtext-emoji-panel button {
    border: 0;
    background: transparent;
    font-size: 1.1rem;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
}

.richtext-emoji-panel button:hover {
    background: var(--color-primary-light);
}

/* ---------- Champ mot de passe avec bouton afficher/masquer ---------- */

.password-field {
    position: relative;
}

.password-field input[type="password"],
.password-field input[type="text"] {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
}

.password-toggle:hover {
    color: var(--color-text);
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.alert {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 0.88rem;
    margin-bottom: 16px;
}

.alert-error {
    background: #fef2f2;
    color: var(--color-danger);
    border: 1px solid #fecaca;
}

.alert-success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.alert-info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* ---------- Page de connexion ---------- */

.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.auth-logo {
    width: 64px;
    height: 64px;
    border-radius: 12px;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 28px 24px;
}

/* ---------- Filtres à onglets (page événements) ---------- */

.filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-tab {
    padding: 8px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border-input);
    background: #fff;
    color: var(--color-text);
    font-size: 0.88rem;
}

.filter-tab:hover {
    border-color: var(--color-primary);
}

.filter-tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ---------- Cartes d'événements ---------- */

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.event-card {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 14px;
}

.event-card:hover {
    border-color: var(--color-primary);
}

.event-card-date {
    flex-shrink: 0;
    width: 52px;
    text-align: center;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-radius: 8px;
    padding: 6px 0;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.15;
}

.event-card-date span {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
}

.event-card-body {
    flex: 1;
    min-width: 0;
    padding-right: 60px;
}

.event-card-body h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: var(--color-text);
}

.event-card-lieu,
.event-card-heure {
    margin: 2px 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.event-card-status {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.event-card-status-oui {
    background: #dcfce7;
    color: #15803d;
}

.event-card-status-non {
    background: #fee2e2;
    color: #b91c1c;
}

.event-card-status-peut_etre {
    background: #fef9c3;
    color: #854d0e;
}

.event-card-status-aucune {
    background: #e5e7eb;
    color: #4b5563;
}

/* ---------- Cartes membres (annuaire) ---------- */

.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.member-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 14px;
}

.member-card-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.member-card-body {
    flex: 1;
    min-width: 0;
}

.member-card-body h3 {
    margin: 0 0 2px;
    font-size: 0.95rem;
    color: var(--color-text);
}

.member-card-groupes {
    margin: 0 0 8px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.member-card-contact {
    margin: 3px 0;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.member-card-contact a {
    color: var(--color-text);
}

.member-card-contact a:hover {
    color: var(--color-primary);
}

/* ---------- Table de droits ---------- */

.perm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.perm-table th,
.perm-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.perm-table th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.perm-table td.perm-check {
    text-align: center;
}

.perm-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.page-key {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Repère "message jamais vu par ce compte" — tableau de bord (dashboard.php)
   et fil d'un salon (includes/discussion_message.php). */
.badge-nouveau {
    display: inline-block;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 6px;
    border-radius: 999px;
    vertical-align: middle;
}

/* ---------- Galerie photo ---------- */

.dossier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.dossier-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    color: inherit;
}

.dossier-card:hover {
    border-color: var(--color-primary);
}

.dossier-card-strip {
    display: flex;
    gap: 4px;
    padding: 8px;
    background: var(--color-primary-light);
}

.dossier-card-thumb {
    flex: 1;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.dossier-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dossier-card-thumb-vide {
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    opacity: 0.5;
}

.dossier-card-more {
    flex: 1;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--color-primary-dark);
}

.dossier-card-badge {
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
    background: #fef9c3;
    color: #854d0e;
    white-space: nowrap;
}

.dossier-card-body {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dossier-card-body h3 {
    margin: 0 0 2px;
    font-size: 0.95rem;
    color: var(--color-text);
}

.dossier-card-body p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 8px;
}

/* ---------- Blocs de la page d'accueil (dashboard.php) ---------- */

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.card-header .card-title {
    margin: 0;
}

.home-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.home-photo-grid a {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-primary-light);
}

.home-photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-document-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-document-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.home-document-list li:last-child {
    border-bottom: 0;
}

.home-document-list .page-key {
    display: inline;
    margin-left: 6px;
}

/* ---------- Cartes de documents ---------- */

.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.document-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 14px;
    color: inherit;
}

.document-card:hover {
    border-color: var(--color-primary);
}

.document-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--color-primary-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    line-height: 1;
}

.document-card-ext {
    margin-top: 2px;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-primary-dark);
}

.document-card-body {
    flex: 1;
    min-width: 0;
}

.document-card-body h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.document-card-desc {
    margin: 0 0 4px;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.document-card-meta {
    margin: 2px 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.photo-grid-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-primary-light);
    cursor: pointer;
    padding: 0;
}

.photo-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-grid-item-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.62rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    background: #fef9c3;
    color: #854d0e;
}

.photo-grid-item-auteur {
    display: block;
    margin-top: 3px;
    font-size: 0.68rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lightbox plein écran : structure identique aux modales (voir
   includes/footer.php pour #modal-overlay) mais overlay + contenu confondus
   pour occuper tout l'écran. */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    padding: 10px 14px;
    border-radius: 50%;
    cursor: pointer;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.25);
}

.lightbox-close {
    top: 16px;
    right: 16px;
}

.lightbox-prev {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-caption {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 12px;
    border-radius: 12px;
    max-width: 80vw;
    text-align: center;
}

@media (max-width: 600px) {
    .lightbox-prev,
    .lightbox-next {
        padding: 8px 12px;
        font-size: 1.3rem;
    }
}

/* ---------- Barre de filtre (recherche + onglets) ---------- */

.filter-bar {
    margin-bottom: 12px;
}

.filter-search-input {
    width: 100%;
    max-width: 420px;
    padding: 9px 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius);
    font: inherit;
}

.filter-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Variante tout-sur-une-ligne (bouton + recherche + select), voir
   admin/licencies.php — repasse en colonne sur mobile. */
.filter-bar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.filter-bar-row .filter-search-input {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}

.filter-select {
    padding: 9px 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius);
    font: inherit;
    background: #fff;
}

.filter-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ---------- Modale large 2 colonnes (admin/licencies.php) ---------- */

.modal-wide {
    max-width: 1040px;
}

.modal-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
}

@media (max-width: 700px) {
    .modal-columns {
        grid-template-columns: 1fr;
    }
}

/* ---------- Discussion (discussion.php) ---------- */

.discussion-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.discussion-page-header .page-title {
    margin: 0;
}

.discussion-layout {
    display: flex;
    height: calc(100vh - var(--topbar-height) - 160px);
    min-height: 420px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    position: relative;
}

.discussion-salons-panel {
    width: 260px;
    flex-shrink: 0;
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
}

.discussion-salons-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
}

.discussion-salons-header h2 {
    margin: 0;
    font-size: 1rem;
}

.discussion-salon-create {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}

.discussion-salon-create input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.85rem;
}

.discussion-salon-create .btn {
    padding: 8px 12px;
    font-size: 0.85rem;
}

.discussion-salons-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.discussion-salon-item {
    display: block;
    margin-bottom: 6px;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--color-text);
    word-break: break-word;
    background: var(--color-bg);
}

.discussion-salon-item:last-child {
    margin-bottom: 0;
}

.discussion-salon-item:hover {
    background: var(--color-border);
}

.discussion-salon-item.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 600;
}

.discussion-salon-badge {
    color: var(--color-danger);
    font-weight: 600;
}

.discussion-salons-empty {
    padding: 12px;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.discussion-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.discussion-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    text-align: center;
    padding: 24px;
    overflow-y: auto;
}

/* Reprend .discussion-salons-list (volet latéral) mais sans son
   comportement "occupe toute la hauteur restante" (flex:1, scroll interne) —
   ici c'est un bloc de taille naturelle, centré dans le corps de page. */
.discussion-salons-list-main {
    flex: none;
    overflow: visible;
    width: 100%;
    max-width: 320px;
    text-align: left;
}

.discussion-salon-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
}

/* Retour à la liste des salons — utile seulement sur mobile, où le volet
   latéral est masqué (voir plus bas) : sur desktop il reste visible en
   permanence, ce lien n'y a pas d'utilité. */
.discussion-back-to-list {
    display: none;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Affichée uniquement sur mobile (voir plus bas) : reprend le contenu du
   volet latéral (masqué sur mobile) directement dans le corps de page. */
.discussion-body-salons {
    display: none;
}

.discussion-body-salons .discussion-salon-create {
    width: 100%;
    max-width: 320px;
    border-bottom: 0;
    padding: 0 0 16px;
}

.discussion-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.discussion-load-more-wrap {
    text-align: center;
    margin-bottom: 8px;
}

.discussion-message {
    max-width: 75%;
    background: var(--color-bg);
    border-radius: var(--radius);
    padding: 8px 12px;
    align-self: flex-start;
}

.discussion-message-moi {
    align-self: flex-end;
    background: var(--color-primary-light);
}

.discussion-message-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.78rem;
    margin-bottom: 4px;
    color: var(--color-text-muted);
}

.discussion-message-header strong {
    color: var(--color-text);
    font-size: 0.82rem;
}

.discussion-message-delete {
    margin-left: auto;
}

.discussion-message-delete button {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    line-height: 1;
}

.discussion-message-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.92rem;
}

.discussion-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
}

.discussion-emoji-wrap {
    position: relative;
    flex-shrink: 0;
}

.discussion-emoji-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1.1rem;
    padding: 6px 10px;
    cursor: pointer;
    line-height: 1;
}

.discussion-emoji-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 10;
    width: 220px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
}

/* Même piège que .richtext-emoji-panel plus haut : "display: grid" est une
   règle auteur qui l'emporte sur "[hidden] { display: none }" (règle de la
   feuille du navigateur), donc sans cette règle explicite le panneau reste
   visible en permanence quel que soit l'attribut "hidden" posé par le JS. */
.discussion-emoji-picker[hidden] {
    display: none;
}

.discussion-emoji-picker button {
    background: transparent;
    border: 0;
    font-size: 1.2rem;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
}

.discussion-emoji-picker button:hover {
    background: var(--color-bg);
}

.discussion-texte {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.9rem;
}

.discussion-composer .btn {
    flex-shrink: 0;
}

@media (max-width: 767px) {
    /* La barre d'icônes fixe en bas d'écran (.mobile-tabbar) prend de la
       place en plus du haut de page déjà déduit dans la règle de base. */
    .discussion-layout {
        height: calc(100vh - var(--topbar-height) - var(--mobile-tabbar-height) - 160px);
    }

    /* Plus de volet superposé sur mobile (voir discussion.php) : la liste
       des salons vit directement dans le corps de page
       (.discussion-body-salons) quand aucun salon n'est sélectionné, et un
       lien "←" dans l'en-tête du fil permet d'y revenir sinon. */
    .discussion-salons-panel {
        display: none;
    }

    .discussion-body-salons {
        display: flex;
    }

    .discussion-back-to-list {
        display: inline-block;
    }

    .discussion-message {
        max-width: 88%;
    }
}

/* ---------- Aide (aide.php) ---------- */

.page-help-link {
    margin: 24px 0 0;
    text-align: center;
}

.page-help-link a {
    color: var(--color-primary);
    font-size: 0.9rem;
}

/* Sans ceci, un lien vers une ancre (#section) amène le titre visé tout en
   haut de la page, caché derrière la barre supérieure "position: sticky"
   (--topbar-height) — ce décalage réserve la place nécessaire au-dessus du
   titre visé. */
.aide-section-title {
    scroll-margin-top: calc(var(--topbar-height) + 16px);
}