/* --- Variables (thème sobre, moderne : harmonisé avec header/footer noirs, accent blanc) --- */
:root {
    --color-bg: #111318;
    --color-surface: #161a22;
    --color-surface-hover: #1c222c;
    --color-surface-elevated: #1a1f28;
    --color-border: #252d3d;
    --color-border-subtle: rgba(255, 255, 255, 0.07);
    --color-text: #e8e6e3;
    --color-text-muted: #8b9cb3;
    --color-accent: #e8e8e8;
    --color-accent-hover: #ffffff;
    --color-accent-subtle: rgba(255, 255, 255, 0.1);
    --color-accent-glow: 0 0 20px rgba(255, 255, 255, 0.12);
    --color-accent-glow-strong: 0 0 24px rgba(255, 255, 255, 0.2);
    --header-footer-bg: #161517;
    --header-footer-border: rgba(255, 255, 255, 0.06);
    /* Touche turquoise/bleu badge Compagnon pour liens et accents secondaires */
    --color-compagnon: #2dd4bf;
    --color-compagnon-subtle: rgba(45, 212, 191, 0.2);
    /* Badges grades : Apprenti sombre + ombre claire, Compagnon turquoise + glow, Maître blanc + glow */
    --grade-apprenti-bg: linear-gradient(135deg, #252a35 0%, #1a1d28 100%);
    --grade-apprenti-color: #e8e8e8;
    --grade-apprenti-border: rgba(255, 255, 255, 0.12);
    --grade-apprenti-shadow: 0 3px 16px rgba(255, 255, 255, 0.15), 0 1px 4px rgba(255, 255, 255, 0.1);
    --grade-compagnon-bg: linear-gradient(135deg, #5eead4 0%, #2dd4bf 50%, #14b8a6 100%);
    --grade-compagnon-color: #0f172a;
    --grade-compagnon-border: rgba(255, 255, 255, 0.35);
    --grade-compagnon-shadow: 0 0 24px rgba(94, 234, 212, 0.5), 0 0 40px rgba(45, 212, 191, 0.25);
    --grade-maitre-bg: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    --grade-maitre-color: #1a1a1a;
    --grade-maitre-border: rgba(0, 0, 0, 0.08);
    --grade-maitre-shadow: 0 0 24px rgba(255, 255, 255, 0.55), 0 0 48px rgba(255, 255, 255, 0.2);
    --color-success: #4a7c59;
    --color-error: #b54a4a;
    --font: Aptos, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", monospace;
    --radius: 6px;
    --radius-lg: 10px;
    --radius-pill: 9999px;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    --header-height: 5.5rem;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Utilitaires */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Surcharge du style de remplissage automatique (éviter fond blanc/jaune) */
input:autofill,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:autofill,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--color-bg) inset !important;
    -webkit-text-fill-color: var(--color-text) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border);
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

/* Titres toujours en majuscules */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}

/* --- Header (fond sombre logo ETHEON, pleine largeur) --- */
.site-header {
    background: var(--header-footer-bg);
    border-bottom: 1px solid var(--header-footer-border);
    min-height: var(--header-height);
    padding: 0.85rem 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    width: 100%;
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.logo {
    font-family: var(--font);
    font-size: 1.85rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    letter-spacing: 0.08em;
    padding: 0.5rem 0;
    transition: opacity 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo-img {
    height: 4.5rem;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    vertical-align: middle;
}

.logo:hover {
    opacity: 0.9;
}

.logo:hover .logo-img {
    opacity: 0.95;
}

/* Header : texte et icônes en blanc / léger glow au survol */
.site-header .nav-item-label,
.site-header .nav-link {
    color: rgba(255, 255, 255, 0.88);
}
.site-header .nav-item-link:hover .nav-item-label,
.site-header .nav-link:hover {
    color: #fff;
    text-shadow: var(--color-accent-glow);
}
.site-header .nav-item-link--current .nav-item-label,
.site-header .nav-link--current {
    color: #fff;
    text-shadow: var(--color-accent-glow);
}
.site-header .nav-item-link--current:hover .nav-item-label {
    color: #fff;
    text-shadow: var(--color-accent-glow-strong);
}
.site-header .icon--nav,
.site-header .icon--search-nav {
    color: rgba(255, 255, 255, 0.75);
}
.site-header .nav-item-link:hover .icon--nav,
.site-header .nav-item-link--current .icon--nav {
    color: rgba(255, 255, 255, 0.95);
}
.site-header .nav-group + .nav-group::before {
    background: rgba(255, 255, 255, 0.12);
}
.site-header .nav-search-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.site-header .nav-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.site-header .nav-search-input:focus {
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.site-header .nav-search-input-wrap .icon--search-nav {
    color: rgba(255, 255, 255, 0.5);
}
.site-header .nav-admin-btn .nav-item-label,
.site-header .nav-admin-btn .icon--nav {
    color: rgba(255, 255, 255, 0.88);
}
.site-header .nav-admin-dropdown {
    background: var(--header-footer-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.site-header .nav-admin-dropdown-item {
    color: rgba(255, 255, 255, 0.9);
}
.site-header .nav-admin-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.site-header .nav-item-link--logout .nav-item-label {
    color: rgba(255, 255, 255, 0.7);
}
.site-header .nav-item-link--logout:hover .nav-item-label {
    color: #fff;
}
.site-header .nav-messages-badge,
.site-header .nav-notifications-badge {
    background: rgba(255, 255, 255, 0.9);
    color: var(--header-footer-bg);
}

/* Barre de navigation — groupe principal */
.nav-main {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.nav-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Recherche dans le header */
.nav-search-wrap {
    flex: 1;
    max-width: 62rem;
    min-width: 0;
}

.nav-search-form {
    display: flex;
    align-items: stretch;
    position: relative;
    width: 100%;
}

.nav-search-input-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.nav-search-input-wrap .icon--search-nav {
    position: absolute;
    left: 0.85rem;
    width: 1rem;
    height: 1rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.nav-search-input {
    flex: 1;
    min-width: 16rem;
    padding: 0.55rem 0.9rem 0.55rem 2.5rem;
    font-family: var(--font);
    font-size: 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-text);
}

.nav-search-input::placeholder {
    color: var(--color-text-muted);
}

.nav-search-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* Dropdown suggestions */
.nav-search-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    max-height: 20rem;
    overflow-y: auto;
    z-index: 200;
}

.nav-search-suggest--hidden {
    display: none;
}

.nav-search-suggest-section {
    padding: 0.35rem 0 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.nav-search-suggest-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--font);
    font-size: 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.nav-search-suggest-item:hover,
.nav-search-suggest-item:focus {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.nav-search-suggest-item + .nav-search-suggest-section {
    margin-top: 0.25rem;
    border-top: 1px solid var(--color-border);
}

.nav-group + .nav-group::before {
    content: "";
    width: 1px;
    height: 1.75rem;
    background: var(--color-border);
    margin: 0 0.5rem;
    opacity: 0.8;
}

.nav-link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
}

.nav-link--current {
    color: var(--color-accent);
    background: var(--color-accent-subtle);
}

.nav-link--current:hover {
    color: var(--color-accent-hover);
    background: var(--color-accent-subtle);
}

.nav-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.nav-link.nav-link--logout {
    color: var(--color-text-muted);
    margin-left: 0.25rem;
}

.nav-link.nav-link--logout:hover {
    color: var(--color-error);
    background: rgba(181, 74, 74, 0.15);
}

/* Liens nav : icône + libellé en dessous — largeur fixe pour espacement régulier */
.nav-item-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 4.75rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    font-family: inherit;
    border: none;
    box-sizing: border-box;
}

a.nav-item-link {
    text-decoration: none;
}

.nav-item-link:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
}

.nav-item-link--current {
    color: var(--color-accent);
    background: var(--color-accent-subtle);
}

.nav-item-link--current:hover {
    color: var(--color-accent-hover);
    background: var(--color-accent-subtle);
}

.nav-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nav-item-link .icon--nav {
    width: 1.6rem;
    height: 1.6rem;
}

.nav-item-label {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.1;
}

/* Boutons nav en icône seule (logout, admin) */
.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.nav-icon-btn:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
}

.nav-item-link--logout:hover {
    color: var(--color-error);
    background: rgba(181, 74, 74, 0.15);
}

.nav-icon-btn .icon--nav {
    width: 1.25rem;
    height: 1.25rem;
}

.nav-notifications-btn,
.nav-messages-btn {
    position: relative;
}

.nav-notifications-badge,
.nav-messages-badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background: var(--color-error);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-pill);
    min-width: 1.2rem;
    text-align: center;
    line-height: 1.2;
}

/* Menu contextuel admin */
.nav-admin-wrap {
    position: relative;
}

.nav-admin-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.35rem;
    min-width: 12rem;
    padding: 0.5rem 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 200;
}

.nav-admin-dropdown--hidden {
    display: none;
}

.nav-admin-dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s, background 0.2s;
}

.nav-admin-dropdown-item:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
}

/* --- Main --- */
.main-content {
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    width: 100%;
}

.main-content.main-content--wide {
    max-width: 1400px;
}

/* --- Toasts éphémères (remplace les bandeaux flash) --- */
.toast-container {
    position: fixed;
    top: calc(var(--header-height) + 1rem);
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}

.toast {
    padding: 0.65rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: var(--shadow);
    border: 1px solid;
    pointer-events: auto;
    animation: toast-in 0.3s ease forwards;
}

.toast--dismissing {
    animation: toast-out 0.3s ease forwards;
}

.toast--success {
    background: var(--color-surface-elevated);
    border-color: var(--color-success);
    color: #a8d4b4;
}

.toast--error {
    background: var(--color-surface-elevated);
    border-color: var(--color-error);
    color: #e8a0a0;
}

.toast--warning {
    background: var(--color-surface-elevated);
    border-color: #b8860b;
    color: #e8c97a;
}

.toast--info,
.toast--message {
    background: var(--color-surface-elevated);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* --- Page d'accueil --- */
.hero {
    text-align: center;
    padding: 3rem 1rem;
}

.hero h1 {
    font-family: var(--font);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 0.5rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hero p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    max-width: 480px;
    margin: 0 auto;
}

/* --- Feed (fil d'actualité) --- */
.feed-page {
    max-width: 680px;
    margin: 0 auto;
}

.feed-title {
    font-size: 1.5rem;
    margin: 0 0 1.5rem;
    color: var(--color-accent);
}

.feed-search {
    margin-bottom: 1.5rem;
}

.feed-search-form {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.feed-search-input {
    flex: 1;
    min-width: 200px;
    padding: 0.6rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 1rem;
}

.feed-search-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.feed-section {
    margin-bottom: 2rem;
}

.feed-section--search h2 {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.feed-empty {
    color: var(--color-text-muted);
    margin-top: 1rem;
}

/* Post create */
.post-create {
    margin-bottom: 1.5rem;
}

/* Encart dédié création de publication (type capture) */
.post-create-encart {
    margin-bottom: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow);
}
.post-create-encart-inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.post-create-encart-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.post-create-encart-avatar {
    flex-shrink: 0;
}
.post-create-encart-input {
    flex: 1;
}
.post-create-encart-avatar-img {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
}
.post-create-encart-avatar-placeholder {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.post-create-encart-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-family: var(--font);
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.post-create-encart-input:hover {
    border-color: var(--color-compagnon);
    color: var(--color-text);
    box-shadow: 0 0 0 1px var(--color-compagnon-subtle);
}
.post-create-encart-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}
.post-create-encart-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-family: var(--font);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.post-create-encart-option:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}
.post-create-encart-option-icon {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
}
.post-create-encart-option-icon .icon {
    width: 100%;
    height: 100%;
}
.post-create-encart-option-icon--post { color: var(--color-accent); }
.post-create-encart-option-icon--sondage { color: #5eb3d6; }
.post-create-encart-option-icon--travail { color: #9b8bb3; }

/* Overlay création publication */
.post-create-overlay[hidden] {
    display: none !important;
}
.post-create-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}
.post-create-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}
.post-create-overlay-panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.post-create-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
    flex-shrink: 0;
}
.post-create-overlay-poster {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.post-create-overlay-poster-avatar {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg);
}
.post-create-overlay-poster-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.post-create-overlay-poster-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-bg);
}
.post-create-overlay-poster-info {
    min-width: 0;
    flex: 1;
    position: relative;
}
.post-create-overlay-poster-name,
.post-create-overlay-poster-name-static {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    text-align: left;
}
.post-create-overlay-poster-name {
    width: 100%;
    padding: 0.25rem 0;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.post-create-overlay-poster-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 10;
    min-width: 12rem;
}
.post-create-overlay-poster-dropdown--hidden {
    display: none !important;
}
.post-create-overlay-poster-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text);
}
.post-create-overlay-poster-dropdown-item:hover {
    background: var(--color-surface-hover);
}
.post-create-overlay-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}
.post-create-overlay-body {
    padding: 1rem 1.25rem;
    overflow: auto;
    flex: 1;
    min-height: 0;
}
.post-create-overlay-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}
.post-create-overlay-footer-icons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.post-create-overlay-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius);
    color: var(--color-text-muted);
    cursor: pointer;
}
.post-create-overlay-icon-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}
.post-create-overlay-icon-btn .icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Aperçus et réglages dans l'overlay post */
.post-create-overlay-previews {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}
.post-create-overlay-previews--hidden {
    display: none !important;
}
.post-create-overlay-preview-media,
.post-create-overlay-preview-attachment {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.post-create-overlay-preview--hidden {
    display: none !important;
}
.post-create-overlay-preview-media-inner {
    flex: 1;
    min-width: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg);
    max-height: 200px;
}
.post-create-overlay-preview-media-inner img,
.post-create-overlay-preview-media-inner video {
    display: block;
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.post-create-overlay-preview-attachment-name {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-create-overlay-settings-btn {
    flex-shrink: 0;
}
.post-create-overlay-settings-btn--hidden {
    display: none !important;
}
.post-create-overlay-settings-btn-toolbar--hidden {
    display: none !important;
}
.post-create-overlay-options {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9rem;
}
.post-create-overlay-options--hidden {
    display: none !important;
}
.post-create-overlay-option-attachment,
.post-create-overlay-option-media {
    margin-bottom: 0.5rem;
}
.post-create-overlay-option--hidden {
    display: none !important;
}
.post-create-overlay-option-attachment:last-child,
.post-create-overlay-option-media:last-child {
    margin-bottom: 0;
}
.post-create-overlay-option-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text);
    cursor: pointer;
}
.post-create-overlay-option-label input[type="checkbox"] {
    margin-right: 0.5rem;
}
.post-create-overlay-options select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
}

.post-create-overlay-panel-content--hidden {
    display: none !important;
}
.post-create-overlay-form .form-group {
    margin-bottom: 1rem;
}
.post-create-overlay-media-label {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}
.post-create-overlay-media-input {
    font-size: 0.9rem;
    color: var(--color-text);
}
.post-create-overlay-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.post-create-overlay-coming {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.post-create-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.post-create-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 1rem;
    resize: vertical;
    min-height: 80px;
}

.post-create-form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}
#post-sondage-options,
#post-sondage-options-empty {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
#post-sondage-options input,
#post-sondage-options-empty input {
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 1rem;
}

.post-create-as {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.post-create-as-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.post-create-as-select {
    padding: 0.35rem 0.6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 0.9rem;
}

.post-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.post-card-wrap {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Post card */
.post-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}

.post-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.post-card-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.post-card-action-form {
    margin: 0;
}

.post-card-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius);
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    vertical-align: middle;
}

.post-card-action-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-accent);
}

.post-card-action-btn--danger:hover {
    color: var(--color-error);
}

.post-author-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}

.post-author-link:hover {
    color: var(--color-accent);
}

.post-author-link:hover .post-author-as {
    color: var(--color-text-muted);
}

.post-author-as {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-avatar-placeholder {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.post-author-name {
    font-weight: 600;
    color: var(--color-text);
}

.post-date {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
}

.post-content {
    white-space: pre-line;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Sondage : résultats ou formulaire de vote */
.post-poll {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--color-surface);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.post-poll-results {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.post-poll-result-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}

.post-poll-result-row--voted {
    color: var(--color-accent);
}

.post-poll-result-label {
    min-width: 0;
}

.post-poll-result-bar-wrap {
    min-width: 80px;
    height: 8px;
    background: var(--color-bg);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.post-poll-result-bar {
    display: block;
    height: 100%;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
}

.post-poll-result-row--voted .post-poll-result-bar {
    background: var(--color-accent);
}

.post-poll-result-count {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.post-poll-total {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.post-poll-vote {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.post-poll-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.post-poll-option:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-accent-subtle);
}

.post-poll-option input[type="radio"] {
    margin: 0;
    accent-color: var(--color-accent);
}

.post-poll-vote .btn {
    margin-top: 0.25rem;
    align-self: flex-start;
}

.post-media {
    margin-bottom: 1rem;
    border-radius: var(--radius);
    overflow: hidden;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.post-media-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.post-media-img--small {
    max-width: 200px;
}
.post-media-img--medium {
    max-width: 400px;
}
.post-media-img--large {
    max-width: 100%;
}

.post-media-video {
    display: block;
    max-width: 100%;
    height: auto;
}

.post-attachment {
    margin-bottom: 1rem;
}

.post-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.post-attachment-link:hover {
    text-decoration: underline;
}

.post-repost-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
}

.post-original {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.post-original-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.post-comment-on-repost {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 0.5rem;
}

.post-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.post-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.post-action-count {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--color-text-muted);
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.btn-icon .icon {
    flex-shrink: 0;
}

.btn-icon:hover {
    color: var(--color-accent);
}

.btn-icon--liked {
    color: var(--color-error);
}

.btn-icon--liked .icon {
    fill: currentColor;
    stroke: none;
}

.post-comment-form {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.post-comment-form form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Commenter en tant que : même style que le sélecteur de compte des posts (avatar + dropdown) */
.post-comment-poster {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.post-comment-poster-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-comment-poster-avatar img,
.post-comment-poster-avatar .post-comment-poster-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-comment-poster-avatar-placeholder {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.post-comment-poster-info {
    position: relative;
    overflow: visible;
}

.post-comment-poster-name {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-family: var(--font);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.post-comment-poster-name:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border);
    color: var(--color-text);
}

.post-comment-poster-name .icon--chevron-sm {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

.post-comment-poster-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 2px;
    min-width: 180px;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
}

.post-comment-poster-dropdown--hidden {
    display: none;
}

.post-comment-poster-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 0.9rem;
    font-family: var(--font);
    cursor: pointer;
    transition: background-color 0.2s;
}

.post-comment-poster-dropdown-item:hover {
    background: var(--color-surface-hover);
}

.post-comment-form-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}
.post-comment-form-row input {
    flex: 1;
}

.post-comment-form input[type="text"] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 0.95rem;
}

.post-comment-form input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.post-comments {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

.post-comments-show-more {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-family: var(--font);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.post-comments-show-more:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.post-comments-show-more--hidden,
.post-comments-show-more[hidden] {
    display: none !important;
}

.post-comments-show-less {
    display: block;
    margin-top: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-family: var(--font);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s, color 0.2s;
}

.post-comments-show-less:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.post-comments-show-less--hidden,
.post-comments-show-less[hidden] {
    display: none !important;
}

.post-comments-more--hidden,
.post-comments-more[hidden] {
    display: none !important;
}

.post-comment-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1;
}

.post-comment-actions .post-comment-like-count {
    line-height: 1.4;
}

.post-comment-action-form {
    display: inline;
}

.post-comment-action-form[hidden] {
    display: none !important;
}

.post-comment-like-btn,
.post-comment-reply-btn,
.post-comment-edit-btn,
.post-comment-delete-btn {
    padding: 0.2rem;
}

.post-comment-like-btn--liked {
    color: var(--color-error);
}

.post-comment-like-btn--liked .icon {
    fill: currentColor;
}

.post-comment-delete-btn:hover {
    color: var(--color-error);
}

/* Édition inline d'un commentaire */
.post-comment-main {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    position: relative;
}

.post-comment-view {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.post-comment-edit-wrap {
    margin-top: 0.35rem;
}

.post-comment-edit-wrap--hidden[hidden] {
    display: none !important;
}

.post-comment-edit-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.post-comment-edit-textarea {
    width: 100%;
    min-height: 4rem;
    padding: 0.5rem 0.6rem;
    font-family: var(--font);
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    resize: vertical;
}

.post-comment-edit-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.post-comment-edit-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Réponses et formulaire de réponse : en dessous du commentaire (nouvelle ligne), avec indentation */
.post-comment-show-replies-btn {
    flex-basis: 100%;
    width: 100%;
    margin-top: 0.35rem;
    margin-left: 2.75rem;
    padding: 0.35rem 0;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-family: var(--font);
    cursor: pointer;
    text-align: left;
    transition: color 0.2s;
}

.post-comment-show-replies-btn:hover {
    color: var(--color-accent);
}

.post-comment-show-replies-btn--hidden,
.post-comment-show-replies-btn[hidden] {
    display: none !important;
}

.post-comment-show-less-replies-btn {
    flex-basis: 100%;
    width: 100%;
    margin-top: 0.35rem;
    margin-left: 0;
    padding: 0.35rem 0;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-family: var(--font);
    cursor: pointer;
    text-align: left;
    transition: color 0.2s;
}

.post-comment-show-less-replies-btn:hover {
    color: var(--color-accent);
}

.post-comment-show-less-replies-btn--hidden,
.post-comment-show-less-replies-btn[hidden] {
    display: none !important;
}

.post-comment-replies {
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
    margin-top: 0.5rem;
    padding-left: 2.75rem; /* même indentation que le formulaire de réponse (avatar + gap) */
    border-left: 2px solid var(--color-border);
}

.post-comment-replies--hidden,
.post-comment-replies[hidden] {
    display: none !important;
}

/* Formulaire de réponse : en dessous du commentaire, avec indentation (aligné sur le corps du commentaire) */
.post-comment-reply-form-wrap {
    flex-basis: 100%;
    width: 100%;
    margin-top: 0.5rem;
    margin-left: 2.75rem; /* avatar (2rem) + gap (0.75rem) = aligné sous le texte du commentaire */
}

.post-comment-reply-form {
    margin-top: 0.25rem;
}

.post-comment-reply-form.post-comment-form form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.post-comment-reply-form.post-comment-form .post-comment-form-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.post-comment-reply-form.post-comment-form input[type="text"] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 0.95rem;
}

.post-comment-reply-form.post-comment-form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-accent);
}

.post-comment-reply-form .post-comment-poster--inline {
    margin-bottom: 0;
}

.post-comment-reply-form-wrap.post-comment-reply-form--hidden,
.post-comment-reply-form-wrap[hidden] {
    display: none !important;
}

.post-comment,
.post-comment-link {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.95rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.post-comment-link:hover {
    background: var(--color-surface-hover);
}

.post-comment:last-child,
.post-comment-link:last-child {
    border-bottom: none;
}

.post-comment-avatar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface-hover);
}

.post-comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-comment-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.post-comment-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.post-comment-author {
    font-weight: 600;
    color: var(--color-accent);
    margin-right: 0.25rem;
}

a.post-comment-author {
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s;
}
a.post-comment-author:hover {
    text-decoration-color: var(--color-accent);
}
.post-comment-as-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-right: 0.25rem;
}
.post-comment-avatar a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}
.post-comment-avatar-placeholder--lodge {
    background: var(--color-primary-muted, var(--color-bg));
}

.post-comment-content {
    color: var(--color-text);
    width: 100%;
    flex-basis: 100%;
}

.post-comment-date {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* User list (recherche, abonnés, etc.) */
.user-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.user-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.user-list-item:last-child {
    border-bottom: none;
}

.user-list-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}

.user-list-link:hover {
    color: var(--color-accent);
}

.user-list-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-list-avatar-placeholder {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.user-list-name {
    font-weight: 600;
}

.user-list-meta {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    display: block;
    margin-top: 0.15rem;
}

/* Page recherche globale */
.search-page {
    max-width: 720px;
    margin: 0 auto;
}

.search-page h1 {
    font-family: var(--font);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 1.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.search-form-wrap {
    margin-bottom: 2rem;
}

.search-form {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.search-input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.85rem;
    font-family: var(--font);
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.search-results .search-section {
    margin-bottom: 2rem;
}

.search-results .search-section h2 {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
    letter-spacing: 0.03em;
}

.search-results-title {
    font-family: var(--font);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 1.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.search-empty,
.search-hint {
    color: var(--color-text-muted);
    margin: 1rem 0 0;
}

/* --- Profil (layout élargi, répercuté sur mon profil + voir membre + listes) --- */
.profile-page,
.post-edit-page {
    max-width: 960px;
    margin: 0 auto;
}

.post-edit-page h1 {
    font-family: var(--font);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.profile-page h1 {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 1.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.profile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    position: relative;
    overflow: visible;
}

/* Profil style LinkedIn : bannière + photo à cheval + infos */
.profile-view {
    position: relative;
    overflow: visible;
}

/* Bannière : largeur du conteneur (carte profil) */
.profile-banner-outer {
    margin: -2rem -2rem 0 -2rem;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}

.profile-banner {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.profile-banner--placeholder {
    background: var(--color-surface-hover);
}

.profile-content-wrap {
    position: relative;
    overflow: visible;
    padding-top: 1px; /* ancrage pour le chevauchement de la photo */
}

/* Colonne gauche : photo à cheval, puis nom/bio/grade plus bas */
.profile-head-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Baisser prénom/nom, bio, grade et étiquettes par rapport à la bannière */
.profile-head-left .profile-name--large {
    margin-top: 1.5rem;
}

.profile-head-left .profile-bio {
    margin-top: 0.25rem;
}

/* Encart À propos (même style que profile-activity-container) */
.profile-about-encart {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.profile-about-encart-title {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-about-encart-content {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    white-space: pre-line;
}

.profile-about-encart-content--collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.profile-about-toggle {
    margin-top: 0.5rem;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-accent);
    cursor: pointer;
    transition: color 0.2s;
}

.profile-about-toggle:hover {
    text-decoration: underline;
}

.profile-about-toggle--hidden {
    display: none;
}

.profile-head-left .profile-grade-inline {
    margin-top: 0.75rem;
}

.profile-head-right {
    margin-top: 2.5rem;
}

.profile-head-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

/* Photo à cheval entre bannière et conteneur (plus sur la bannière) */
.profile-avatar-overlap {
    margin-top: -115px;
    margin-bottom: 0;
    z-index: 2;
}

/* Taille forcée pour la photo de profil (priorité sur .avatar-wrap) */
.profile-avatar-overlap .avatar-wrap--profile,
.profile-view .avatar-wrap--profile {
    width: 190px !important;
    height: 190px !important;
    border: 4px solid var(--color-surface);
    box-shadow: var(--shadow);
}

.profile-head-left .profile-name--large {
    margin: 1.5rem 0 0.25rem 0;
}

/* Bio : une phrase entre nom et grade, couleur plus sombre, sans libellé */
.profile-bio {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 400;
    line-height: 1.4;
    max-width: 36rem;
}

/* Étiquettes obédience / loge : empilées (obédience au-dessus, loge en dessous), plus discrètes */
.profile-head-right {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.profile-name--large {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.35rem;
    letter-spacing: 0.02em;
}

.profile-head-left .profile-grade-inline {
    margin: 0.75rem 0 0 0;
}

/* Onglets activité (Posts, Travaux, Commentaires) */
.profile-activity-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

.profile-activity-tab {
    padding: 0.6rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}

.profile-activity-tab:hover {
    color: var(--color-text);
}

.profile-activity-tab--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.profile-activity-panel {
    display: none;
}

.profile-activity-panel--active {
    display: block;
}

.profile-comments-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-comment-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.profile-comment-item:last-child {
    border-bottom: none;
}

.profile-comment-text {
    margin: 0 0 0.35rem;
    color: var(--color-text);
}

.profile-comment-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Étiquettes commentaires (profils) : carte cliquable vers le post */
.profile-comments-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-comment-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.profile-comment-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.profile-comment-card-content {
    margin: 0 0 0.75rem;
    color: var(--color-text);
    line-height: 1.5;
    white-space: pre-line;
}

.profile-comment-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.profile-comment-card-author {
    font-weight: 500;
    color: var(--color-text);
}

.profile-comment-card-date {
    color: var(--color-text-muted);
}

.profile-comment-card-post-ref {
    margin-left: auto;
    color: var(--color-accent);
}

/* Édition : aperçu bannière */
.banner-preview {
    margin: 0.5rem 0 0.75rem;
    max-width: 100%;
    max-height: 180px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.banner-preview-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Page obédience publique : même layout que profil loge / profil perso */
.obedience-profil-page .profile-card,
.obedience-profil-page .obedience-profil-card {
    padding: 2rem;
}

.obedience-profil-banner-outer {
    margin: -2rem -2rem 0 -2rem;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}

.obedience-profil-banner {
    height: 200px;
}

.obedience-avatar-overlap .obedience-avatar-wrap {
    width: 190px !important;
    height: 190px !important;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg);
    border: 4px solid var(--color-surface);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.obedience-avatar-overlap .obedience-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.obedience-avatar-overlap .avatar-placeholder {
    font-size: 3rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.obedience-profil-page .obedience-avatar-overlap {
    margin-top: -115px;
    margin-bottom: 0;
    z-index: 2;
}

.obedience-profil-head-left .obedience-profil-name {
    margin-top: 1.5rem;
}

.obedience-profil-head-right {
    margin-top: 1.5rem;
    align-self: center;
    margin-left: auto;
}

.obedience-profil-page .obedience-description,
.obedience-profil-page .lodge-description {
    white-space: pre-wrap;
    line-height: 1.5;
    margin: 1rem 0;
}

.obedience-lodges-section {
    margin-top: 1.5rem;
}

.obedience-lodges-section .profile-about-encart-title {
    margin: 0 0 0.75rem;
}

.obedience-lodge-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.obedience-lodge-tag {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    font-size: 0.9rem;
    color: var(--color-accent);
    background: var(--color-accent-subtle);
    border: 1px solid var(--color-accent);
    border-radius: 2rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.obedience-lodge-tag:hover {
    background: var(--color-accent);
    color: var(--color-bg);
}

/* Édition obédience (admin) : encarts comme profil / ma loge */
.obedience-edit-page .profile-card {
    padding: 2rem;
}

.obedience-edit-page .profile-card--editing {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.edit-card-appearance--obedience {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: stretch;
}

.edit-card-appearance--obedience .edit-appearance-banner {
    flex: 1 1 0;
    min-width: 0;
    min-height: 140px;
}

.edit-card-appearance--obedience .edit-appearance-banner .profile-edit-banner-label {
    min-height: 140px;
    height: 140px;
}

.edit-appearance-avatar--obedience .obedience-logo-edit-wrap {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.edit-appearance-avatar--obedience .obedience-logo-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid var(--color-border);
    background: var(--color-surface-hover);
}

.edit-appearance-avatar--obedience .obedience-logo-edit-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-appearance-avatar--obedience .obedience-logo-placeholder-edit {
    font-size: 1rem;
    color: var(--color-text-muted);
}

.edit-appearance-avatar--obedience .profile-edit-avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.edit-appearance-avatar--obedience .obedience-logo-edit-wrap:hover .profile-edit-avatar-overlay {
    opacity: 1;
}

/* Bouton rond édition (Mon Profil, mode affichage) */
.profile-edit-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.profile-edit-btn:hover {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Tooltips pour les boutons de profil */
.profile-edit-btn,
.profile-triplet-btn {
    position: relative;
}

/* Utiliser data-tooltip au lieu de title pour éviter le tooltip système */
.profile-edit-btn[data-tooltip]:hover::after,
.profile-triplet-btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    animation: tooltip-fade-in 0.2s ease forwards;
}

.profile-edit-btn[data-tooltip]:hover::before,
.profile-triplet-btn[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 0.25rem);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--color-border);
    pointer-events: none;
    z-index: 101;
    opacity: 0;
    animation: tooltip-fade-in 0.2s ease forwards;
}

@keyframes tooltip-fade-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(2px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.profile-edit-btn[data-tooltip]:hover::before {
    animation: tooltip-fade-in 0.2s ease forwards;
}

/* Icônes SVG (sprite) : tailles selon contexte */
.icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.profile-edit-btn .icon,
.profile-triplet-btn .icon {
    width: 1.2rem;
    height: 1.2rem;
}

.icon--action {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
    vertical-align: middle;
}

.icon--sm {
    width: 1rem;
    height: 1rem;
    display: block;
    vertical-align: middle;
}

.profile-header {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
    align-items: flex-start;
}

/* Profil centré (Mon Profil, mode affichage) */
.profile-header--centered {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1rem;
}

.avatar-section--centered {
    display: flex;
    justify-content: center;
    width: 100%;
}

.avatar-wrap--large {
    width: 160px;
    height: 160px;
}

.profile-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    letter-spacing: 0.02em;
}

.avatar-section {
    flex-shrink: 0;
}

.avatar-wrap {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 2.5rem;
    font-family: var(--font);
    text-transform: uppercase;
}

.avatar-upload {
    margin-top: 0.75rem;
}

.avatar-upload input[type="file"] {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.avatar-upload input[type="file"]::file-selector-button {
    font-family: var(--font);
    padding: 0.4rem 0.75rem;
    margin-right: 0.75rem;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    cursor: pointer;
}

.avatar-upload input[type="file"]::file-selector-button:hover {
    background: var(--color-border);
}

.profile-fields {
    flex: 1;
    min-width: 200px;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="search"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-group input[type="date"] {
    box-sizing: border-box;
    min-height: 2.5rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.form-group select {
    cursor: pointer;
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-actions {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

/* Bouton principal centré sur les pages auth */
.auth-page .form-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-page .form-actions .btn-primary {
    min-width: 12rem;
}

.btn {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* --- Profil : état affichage --- */
.profile-view .profile-header {
    margin-bottom: 1.5rem;
}

.profile-view .profile-field {
    margin-bottom: 1rem;
}

.profile-view .profile-field-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.profile-view .profile-field-value {
    color: var(--color-text);
    font-size: 1rem;
}

.profile-view .profile-field-value.empty {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Stats (abonnés, suivis, posts) : alignées à gauche, même largeur (calée sur la plus large) */
.profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    justify-content: flex-start;
    align-items: stretch;
}

.profile-stats--centered {
    justify-content: flex-start;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    grid-template-columns: unset;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    min-width: 18rem; /* largeur minimale pour que chaque pill = largeur « Abonnés » */
}

/* Même largeur pour les 3 étiquettes (calée sur la plus large) */
.profile-stats--centered .profile-stat-pill {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    text-align: center;
}

.profile-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.4rem 0.75rem;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.profile-stat-pill:hover {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.profile-stat-pill--plain {
    cursor: default;
}

.profile-stat-pill--plain:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border);
    color: inherit;
}

.profile-stat-pill .profile-stat-value {
    font-size: 1rem;
    font-weight: 600;
}

.profile-stat-pill .profile-stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.profile-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.profile-tag-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.profile-tag-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Étiquettes obédience / loge style LinkedIn (larges, logo à gauche) */
.profile-tags-row--linkedin {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* Colonne étiquettes : même largeur pour les deux (celle de la plus longue) */
.profile-tags-column {
    display: inline-flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    width: max-content;
}

.profile-tags-column .profile-tag-linkedin {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.profile-follow-wrap {
    margin-top: 0.75rem;
}

/* Étiquettes plus discrètes (taille réduite), nom en entier */
.profile-tag-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 8rem;
    padding: 0.35rem 0.75rem;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    font-size: 0.85rem;
    transition: background 0.2s, border-color 0.2s;
}

.profile-tag-linkedin:hover:not([aria-disabled="true"]) {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.profile-tag-linkedin[aria-disabled="true"] {
    cursor: default;
    pointer-events: none;
}

.profile-tag-linkedin-logo {
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    object-fit: cover;
    flex-shrink: 0;
}

.profile-tag-linkedin-placeholder {
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.profile-tag-linkedin-text {
    font-weight: 500;
    color: var(--color-text);
    flex: 1;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
}

.profile-tag--obedience,
.profile-tag--lodge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.profile-grade-inline {
    margin: 0.5rem 0 0;
}

.profile-grade-inline .profile-badge {
    margin: 0;
}

/* Boutons en haut à droite : édition + triplet */
.profile-top-actions,
.profile-view-top-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    z-index: 10;
}

/* Mon profil : boutons encore plus à droite (près du bord droit) */
.profile-page .profile-card .profile-view .profile-top-actions {
    right: 0.25rem;
}

/* Profil public (voir un membre) : menu admin en haut à droite */
.profile-view-top-actions.profile-admin-actions {
    right: 0.25rem;
}

.profile-admin-menu-wrap {
    position: relative;
    display: inline-block;
}

.profile-admin-menu-wrap .profile-admin-menu-trigger {
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-admin-menu-wrap .profile-admin-dropdown {
    right: 0;
    left: auto;
    min-width: 14rem;
}

.profile-triplet-wrap {
    position: relative;
}

.profile-triplet-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.profile-triplet-btn:hover {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Wrapper pour le bouton triplet (pour positionner le tooltip correctement) */
.profile-triplet-wrap {
    position: relative;
}

/* Popover triplet (contextuel au clic) */
.profile-triplet-popover {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 14rem;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 50;
}

.profile-triplet-popover--hidden {
    display: none;
}

.profile-triplet-popover .triplet-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
}

.profile-triplet-popover .triplet-words {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Triplet : 3 mots empilés verticalement */
.profile-triplet-popover .triplet-words--stacked {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}

.profile-triplet-popover .triplet-words--stacked .triplet-word {
    display: block;
    text-align: center;
}

.profile-triplet-popover .profile-triplet-regenerer-form {
    margin-top: 0.75rem;
}
.profile-triplet-popover .triplet-word {
    padding: 0.35rem 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-weight: 600;
    color: var(--color-accent);
}

.profile-stat-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.profile-stat-link:hover {
    color: var(--color-accent);
}

.profile-stat-link--plain {
    cursor: default;
}

.profile-stat-link--plain:hover {
    color: inherit;
}

.profile-stats--centered .profile-stat-link {
    align-items: center;
}

.profile-stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

.profile-stat-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-stats--centered .profile-stat-label {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.profile-follow-block {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* Section activité dans un conteneur séparé */
.profile-activity-container {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.profile-activity {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Bouton Contact + popover (même niveau que grade, à droite) */
.profile-contact-wrap {
    position: relative;
    margin-bottom: 0.5rem;
}

.profile-contact-btn {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent);
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.profile-contact-btn:hover {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
}

.profile-contact-popover {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 20rem;
    max-width: 26rem;
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 50;
    overflow: hidden;
}

.profile-contact-popover--hidden {
    display: none;
}

.profile-contact-popover-header {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-hover);
}

.profile-contact-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.profile-contact-list li {
    margin: 0;
}

.profile-contact-list li + li {
    border-top: 1px solid var(--color-border);
}

.profile-contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

.profile-contact-link:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.profile-contact-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--color-surface-hover);
}

.profile-contact-link:hover .profile-contact-icon-wrap {
    background: var(--color-surface);
}

.profile-contact-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.profile-contact-icon--email { color: var(--color-text-muted); }
.profile-contact-icon--linkedin { color: #0a66c2; }
.profile-contact-icon--twitter { color: var(--color-text); }
.profile-contact-icon--facebook { color: #1877f2; }
.profile-contact-icon--instagram { color: #e4405f; }
.profile-contact-icon--globe { color: var(--color-text-muted); }

.profile-contact-text {
    font-weight: 500;
    min-width: 5rem;
}

.profile-contact-url {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.profile-contact-link:hover .profile-contact-url {
    color: var(--color-text);
}

/* --- Layout édition épuré (profil + loge) --- */
.edit-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

.edit-page-inner {
    width: 100%;
}

.edit-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.edit-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.edit-form-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-text);
}

.edit-form-subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

.edit-form-back {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.edit-form-back:hover {
    color: var(--color-accent);
}

/* Profil perso : pas de gros bloc, encarts distincts sur le fond de la page */
.profile-card--editing {
    padding: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Actions en dehors des encarts (profil perso) */
.edit-form-actions--outside {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.profile-card--editing .edit-form-actions--outside {
    padding: 1.5rem 0 0;
    margin: 0;
}

.edit-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.edit-card-title {
    margin: 0;
    padding: 1.25rem 1.5rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.edit-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem 0;
}

.edit-card-head .edit-card-title {
    padding: 0;
}

.edit-card-desc {
    margin: 0.5rem 1.5rem 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.edit-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.edit-card-appearance {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.edit-appearance-banner {
    flex: 1 1 0;
    min-width: 0;
    min-height: 160px;
}

.edit-appearance-banner .profile-edit-banner-label {
    display: block;
    width: 100%;
    min-height: 160px;
    height: 160px;
    cursor: pointer;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface-hover);
}

.edit-appearance-banner .profile-edit-banner-preview,
.edit-appearance-banner .profile-edit-banner-placeholder {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.edit-appearance-banner .profile-edit-banner-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--color-text-muted);
}

.edit-appearance-banner .profile-edit-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.edit-appearance-banner .profile-edit-banner-label:hover .profile-edit-banner-overlay {
    opacity: 1;
}

.edit-appearance-avatar {
    flex-shrink: 0;
}

/* Sur petit écran : bannière et photo empilés (profil) */
@media (max-width: 520px) {
    .edit-card-appearance:not(.edit-card-appearance--lodge) {
        flex-direction: column;
    }
    .edit-card-appearance:not(.edit-card-appearance--lodge) .edit-appearance-banner {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

.edit-fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.edit-fields--identity {
    max-width: 100%;
}

.edit-field-row {
    display: grid;
    gap: 1rem;
}

.edit-field-row--half {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 520px) {
    .edit-field-row--half {
        grid-template-columns: 1fr;
    }
}

.edit-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}

.edit-field input,
.edit-field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font);
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.2s;
}

.edit-field input:focus,
.edit-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.edit-field textarea {
    resize: vertical;
    min-height: 6rem;
}

.edit-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0.75rem 0 0;
    line-height: 1.5;
}

.edit-form-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
}

.edit-form-actions .btn {
    min-height: 2.75rem;
    padding: 0.6rem 1.25rem;
}

.edit-card > .edit-card-desc {
    padding: 0 1.5rem;
    margin: 0.5rem 0 0;
}

.edit-card-head .profile-edit-contact-add-btn {
    width: auto;
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
    font-size: 0.9rem;
}

/* Profil : formulaire en mode édition dans la card existante */
.profile-page .profile-card .edit-form {
    padding: 0;
}

/* Profil perso : header et chaque section = encart séparé, espacés */
.profile-page .profile-card .edit-form .edit-form-header {
    margin: 0 0 1.25rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.profile-page .profile-card .edit-form .edit-card {
    margin: 0 0 1.25rem 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.profile-page .profile-card .edit-form .edit-card:last-of-type {
    margin-bottom: 0;
}

/* Loge : apparence bannière + photo côte à côte sur grand écran */
.edit-card-appearance--lodge {
    flex-direction: row;
    align-items: stretch;
}

.edit-card-appearance--lodge .edit-appearance-banner {
    flex: 1 1 50%;
    min-height: 140px;
}

.edit-appearance-photo--lodge {
    flex-shrink: 0;
    width: 160px;
}

.edit-appearance-photo--lodge .lodge-photo-preview-wrap {
    width: 160px;
    height: 160px;
}

@media (max-width: 640px) {
    .edit-card-appearance--lodge {
        flex-direction: column;
    }
    .edit-card-appearance--lodge .edit-appearance-banner {
        flex: 1 1 100%;
        min-height: 120px;
    }
    .edit-appearance-photo--lodge {
        width: 100%;
    }
    .edit-appearance-photo--lodge .lodge-photo-preview-wrap {
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }
    .edit-appearance-photo--lodge .lodge-photo-label {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .edit-appearance-photo--lodge .lodge-photo-overlay {
        inset: auto;
        top: 0;
        left: 50%;
        margin-left: -100px;
        width: 200px;
        height: 200px;
    }
}

/* Bannière / avatar dans les cartes d'édition */
.edit-appearance-banner .profile-edit-banner {
    height: 140px;
    margin: 0;
    border-radius: var(--radius-lg);
}

.edit-appearance-banner .profile-edit-banner-label {
    border-radius: var(--radius-lg);
}

.edit-appearance-banner .profile-edit-banner-preview,
.edit-appearance-banner .profile-edit-banner-placeholder {
    border-radius: var(--radius-lg);
}

/* Page d'édition du profil (structure alignée sur la vue) */
.profile-edit-form {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    box-sizing: border-box;
}

.profile-edit-banner {
    position: relative;
    height: 160px;
    margin: 0 0 2rem 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface-hover);
}

.profile-edit-banner-label {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
}

.profile-edit-banner-preview,
.profile-edit-banner-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.profile-edit-banner-placeholder {
    background: var(--color-surface-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.profile-edit-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.profile-edit-banner-label:hover .profile-edit-banner-overlay {
    opacity: 1;
}

.profile-edit-file-hidden {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.profile-edit-content {
    padding-top: 2rem;
}

.profile-edit-head-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    align-items: flex-start;
    margin-bottom: 2.5rem;
}

.profile-edit-left {
    flex-shrink: 0;
}

.profile-edit-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    width: 120px;
    position: relative;
}

.profile-edit-avatar-preview-wrap {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-border);
    position: relative;
    background: var(--color-bg);
}

.profile-edit-avatar-preview-wrap .profile-edit-avatar-img,
.profile-edit-avatar-preview-wrap .profile-edit-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.profile-edit-avatar-wrap .profile-edit-avatar-img,
.profile-edit-avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: none;
    object-fit: cover;
}

.profile-edit-avatar-preview-wrap .profile-edit-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-text-muted);
}

.profile-edit-avatar-overlay {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.profile-edit-avatar-wrap:hover .profile-edit-avatar-overlay {
    opacity: 1;
}

.profile-edit-avatar-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.profile-edit-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

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

.profile-edit-field input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-family: var(--font);
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
}

.profile-edit-field input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.profile-edit-field textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-family: var(--font);
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    resize: vertical;
    min-height: 6rem;
}

.profile-edit-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.profile-edit-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 1rem 0 0;
    line-height: 1.45;
}

.profile-edit-section {
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-border);
}

.profile-edit-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.profile-edit-section-head .profile-edit-section-title {
    margin: 0;
}

.profile-edit-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.profile-edit-section-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 1.5rem;
    line-height: 1.55;
}

/* Contact : lignes affichées à la demande */
.profile-edit-contact-rows {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.profile-edit-contact-row--hidden {
    display: none;
}

.profile-edit-contact-row-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.profile-edit-contact-row-inner .profile-edit-contact-label {
    flex: 0 0 10rem;
    font-size: 0.9rem;
    margin: 0;
}

.profile-edit-contact-row-inner .profile-edit-contact-input {
    flex: 1;
    min-width: 12rem;
    padding: 0.6rem 0.85rem;
    font-family: var(--font);
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
}

.profile-edit-contact-row-inner .profile-edit-contact-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.profile-edit-contact-remove {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.profile-edit-contact-remove:hover {
    background: rgba(181, 74, 74, 0.2);
    color: var(--color-error);
}

.profile-edit-contact-add-dropdown-wrap {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.profile-edit-contact-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.profile-edit-contact-add-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.profile-edit-contact-add-btn .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: inherit;
}

.profile-edit-contact-add-menu {
    position: absolute;
    left: 0;
    bottom: 100%;
    top: auto;
    margin-top: 0;
    margin-bottom: 0.35rem;
    min-width: 14rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 20;
}

/* Section Contact : laisser le menu dépasser au-dessus */
.edit-card--contact {
    overflow: visible;
}

.profile-edit-contact-add-menu--hidden {
    display: none;
}

.profile-edit-contact-add-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    font-family: var(--font);
    font-size: 0.95rem;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.profile-edit-contact-add-menu-item:hover:not(:disabled) {
    background: var(--color-surface-hover);
}

.profile-edit-contact-add-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.profile-edit-contact-add-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.profile-edit-contact-add-icon--email { color: var(--color-text-muted); }
.profile-edit-contact-add-icon--linkedin { color: #0a66c2; }
.profile-edit-contact-add-icon--twitter { color: var(--color-text); }
.profile-edit-contact-add-icon--facebook { color: #1877f2; }
.profile-edit-contact-add-icon--instagram { color: #e4405f; }
.profile-edit-contact-add-icon--globe { color: var(--color-text-muted); }

.profile-edit-actions {
    margin-top: 2.5rem;
    padding-top: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.profile-activity-title {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-activity-empty {
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
}

/* Section Travaux : Topics + Contributions */
.profile-travaux-sections {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.profile-travaux-subsection {
    margin: 0;
}

.profile-travaux-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.75rem;
}

.profile-travaux-topics-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-travaux-topics-list a {
    color: var(--color-accent);
    text-decoration: underline;
}

.profile-travaux-count {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Grille topics : étiquettes design (agrandies) */
.profile-travaux-topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.topic-etiquette {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

.topic-etiquette:hover {
    border-color: var(--color-accent);
    background: var(--color-surface-elevated);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.topic-etiquette-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.topic-etiquette-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-text);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.topic-etiquette-grade {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-primary-muted, rgba(139, 92, 246, 0.12));
    color: var(--color-accent);
    border-radius: var(--radius-pill, 999px);
    flex-shrink: 0;
}

.topic-etiquette-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.topic-etiquette-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.topic-etiquette-stat .icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Vue détail travail */
.work-detail-page {
    max-width: 900px;
    margin: 0 auto;
}

.work-detail-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.work-detail-header {
    margin-bottom: 1.5rem;
}

.work-detail-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.work-detail-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 1rem;
    line-height: 1.3;
}

.work-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.work-detail-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.work-detail-topic-wrap {
    margin-bottom: 1rem;
}

.work-detail-author-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.work-detail-author-link:hover .work-detail-author-name {
    color: var(--color-accent);
    text-decoration: underline;
}

.work-detail-author-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface-hover);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-detail-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work-detail-author-avatar-placeholder {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.work-detail-author-avatar--lodge .work-detail-author-avatar-placeholder {
    background: var(--color-primary-muted, var(--color-bg));
}

.work-detail-author-name {
    font-weight: 600;
    color: var(--color-text);
    transition: color 0.15s;
}

.work-detail-date {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-left: auto;
}

.work-detail-topic-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: calc(var(--radius) * 1.5);
    text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
}

.work-detail-topic-badge:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.work-detail-topic-badge--apprenti {
    background: var(--grade-apprenti-bg);
    color: var(--grade-apprenti-color);
    border: 1px solid var(--grade-apprenti-border);
    box-shadow: var(--grade-apprenti-shadow);
}

.work-detail-topic-badge--compagnon {
    background: var(--grade-compagnon-bg);
    color: var(--grade-compagnon-color);
    border: 1px solid var(--grade-compagnon-border);
    box-shadow: var(--grade-compagnon-shadow);
}

.work-detail-topic-badge--maitre {
    background: var(--grade-maitre-bg);
    color: var(--grade-maitre-color);
    border: 1px solid var(--grade-maitre-border);
    box-shadow: var(--grade-maitre-shadow);
}

.work-detail-topic-badge--none {
    background: var(--color-surface-elevated);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.work-detail-description {
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.5;
    white-space: pre-line;
    margin: 0;
}

.work-detail-preview {
    margin-bottom: 1.5rem;
}

.work-detail-preview-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
}

.work-detail-pdf-iframe {
    width: 100%;
    height: 1123px; /* Hauteur approximative d'un A4 en pixels (297mm à 96dpi) */
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}

.work-detail-preview-link {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}

.work-detail-preview-link a {
    color: var(--color-accent);
    text-decoration: underline;
}

.work-detail-comments-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

.work-comments-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.work-comments-tab {
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.work-comments-tab:hover {
    color: var(--color-text);
}

.work-comments-tab--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.work-comments-tab-count {
    font-weight: 600;
    opacity: 0.8;
}

.work-comments-panels {
    position: relative;
}

.work-comments-panel {
    display: block;
}

.work-comments-panel[hidden] {
    display: none !important;
}

.work-comment-input-trigger {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-family: var(--font);
    font-size: 0.95rem;
    cursor: pointer;
}

.work-comment-input-trigger:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.work-comment-input-trigger:focus {
    outline: none;
    border-color: var(--color-accent);
    color: var(--color-text);
}

.work-comment-modal {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.work-comment-modal[hidden] {
    display: none !important;
}

.work-comment-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.work-comment-modal .modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    max-height: 90vh;
    overflow-y: auto;
}

.work-comment-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
    position: sticky;
    top: 0;
    z-index: 1;
}

.work-comment-modal .modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}

.work-comment-modal .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.work-comment-modal-form {
    padding: 1.25rem;
}

.post-repost-modal {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.post-repost-modal[hidden] {
    display: none !important;
}

.post-repost-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.post-repost-modal .modal-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.post-repost-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
}

.post-repost-modal .modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}

.post-repost-modal .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.post-repost-modal-form {
    padding: 1.25rem;
}

.post-repost-modal-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 1rem;
    resize: vertical;
    min-height: 80px;
}

.work-comments-empty {
    color: var(--color-text-muted);
    font-style: italic;
    margin: 1rem 0;
    padding: 1rem;
    text-align: center;
}

/* Vue détail topic */
.topic-detail-page {
    max-width: 800px;
    margin: 0 auto;
}

.topic-detail-header {
    margin-bottom: 1.5rem;
}

.topic-detail-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.25rem;
}

.topic-detail-count {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
}

.topic-works-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.topic-work-card {
    margin: 0;
}

.topic-work-link {
    display: block;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.topic-work-link:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.topic-work-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.topic-work-description {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 0.35rem;
    line-height: 1.4;
}

.topic-work-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Grille travaux (page topic) : étiquettes design (agrandies) */
.topic-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.profile-travaux-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.work-etiquette {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.5rem 1.65rem;
    background: linear-gradient(145deg, var(--color-surface) 0%, var(--color-bg) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s ease;
}

.work-etiquette:hover {
    border-color: var(--color-accent);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.work-etiquette-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-muted, rgba(139, 92, 246, 0.12));
    border-radius: var(--radius);
    color: var(--color-accent);
}

.work-etiquette-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.work-etiquette-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.work-etiquette-link:hover .work-etiquette-title {
    color: var(--color-accent);
}

.work-etiquette-reprendre {
    margin-top: 0.5rem;
}

.work-etiquette--small .work-etiquette-icon {
    width: 2rem;
    height: 2rem;
}

.work-etiquette--small .work-etiquette-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.work-etiquette-title {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--color-text);
    line-height: 1.4;
}

.work-etiquette-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.work-etiquette-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: auto;
}

.topic-works-empty {
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
    grid-column: 1 / -1;
}

/* Carte travail dans le feed */
.post-card--work-feed.work-feed-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.work-feed-content-link {
    display: block;
    color: inherit;
    text-decoration: none;
    flex: 1;
}

.work-feed-content-link:hover .work-feed-title {
    color: var(--color-accent);
}

.work-feed-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.work-feed-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.work-feed-actions .work-reprendre-form {
    margin: 0;
}

.work-feed-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin: 0 0 0.35rem;
}

.work-feed-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.work-feed-topic {
    margin: 0 0 0.5rem;
}

.work-feed-topic-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--color-primary-muted, rgba(139, 92, 246, 0.12));
    color: var(--color-accent);
    border-radius: var(--radius-pill, 999px);
}

.work-feed-description {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.45;
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.work-feed-link {
    font-size: 0.9rem;
    color: var(--color-accent);
    margin: 0;
}

/* Work detail: Republier, sections commentaires */
.work-detail-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.work-detail-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.topic-detail-header-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.topic-detail-header-row .topic-detail-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.topic-detail-delete-form {
    margin: 0;
}

.btn-icon.btn-edit-icon {
    padding: 0.4rem;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: var(--radius);
    cursor: pointer;
}

.btn-icon.btn-edit-icon:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.btn-icon.btn-edit-icon .icon {
    width: 1.1rem;
    height: 1.1rem;
}

.btn-icon.btn-danger-icon {
    padding: 0.4rem;
    background: transparent;
    border: 1px solid var(--color-danger, #dc3545);
    color: var(--color-danger, #dc3545);
    border-radius: var(--radius);
    cursor: pointer;
}

.btn-icon.btn-danger-icon:hover {
    background: var(--color-danger, #dc3545);
    color: #fff;
}

.btn-icon.btn-danger-icon .icon {
    width: 1.1rem;
    height: 1.1rem;
}

.work-detail-repris-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--color-primary-muted, rgba(139, 92, 246, 0.12));
    color: var(--color-accent);
    border-radius: var(--radius-pill, 999px);
}

.work-detail-reprendre-form {
    margin: 0;
}

/* Modal Republier travail */
.work-reprendre-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}
.work-reprendre-modal[hidden] {
    display: none !important;
}
.work-reprendre-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}
.work-reprendre-modal .modal-content {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.work-reprendre-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
}
.work-reprendre-modal .modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}
.work-reprendre-modal .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
}
.work-reprendre-modal .work-reprendre-form-inner {
    padding: 1rem 1.25rem;
}
.work-reprendre-modal .form-group {
    margin-bottom: 1rem;
}
.work-reprendre-modal .form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}
.work-reprendre-modal .form-group select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}
.work-reprendre-modal .modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.work-reprendre-as-select {
    position: relative;
}
.work-reprendre-as-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    color: var(--color-text);
    cursor: pointer;
}
.work-reprendre-as-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    min-width: 200px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 10;
}
.work-reprendre-as-dropdown--hidden {
    display: none;
}
.work-reprendre-as-option {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    background: none;
    border: none;
    font-size: 0.95rem;
    color: var(--color-text);
    cursor: pointer;
}
.work-reprendre-as-option:hover {
    background: var(--color-surface-hover);
}

.work-reprendre-topic-hint {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.profile-travaux-topics-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.profile-travaux-topics-head .profile-travaux-subtitle {
    margin: 0;
}

.btn-add-topic {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn-add-topic:hover {
    background: var(--color-accent-hover, #dbb42e);
    color: #fff;
    border-color: var(--color-accent-hover, #dbb42e);
}

.work-topic-row .work-topic-select-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.work-topic-row .work-topic-select {
    flex: 1;
    min-width: 0;
}

.btn-add-topic--in-form {
    flex-shrink: 0;
}

/* Style pour les inputs file PDF dans les formulaires de travail */
.form-group input[type="file"] {
    font-family: var(--font);
    font-size: 0.95rem;
    color: var(--color-text);
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.form-group input[type="file"]:hover {
    border-color: var(--color-accent);
    background: var(--color-surface-hover);
}

.form-group input[type="file"]::file-selector-button {
    font-family: var(--font);
    padding: 0.4rem 0.75rem;
    margin-right: 0.75rem;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.form-group input[type="file"]::file-selector-button:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
}

.profile-topic-create-form {
    margin-bottom: 1rem;
}

.profile-topic-create-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.profile-topic-create-row input[name="name"] {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
}

/* Modal Créer un topic (réutilise le style work-reprendre-modal) */
.topic-create-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.topic-create-modal[hidden] {
    display: none !important;
}

.topic-create-modal .modal-content {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.topic-create-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
}

.topic-create-modal .modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}

.topic-create-modal .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
}

.topic-create-form-inner {
    padding: 1rem 1.25rem;
}

.topic-create-form-inner .form-group {
    margin-bottom: 1rem;
}

.topic-create-form-inner .form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.topic-create-form-inner .form-group input,
.topic-create-form-inner .form-group select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}

.form-hint {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.topic-create-form-inner .modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid var(--color-danger, #dc3545);
    color: var(--color-danger, #dc3545);
}

.btn-outline-danger:hover {
    background: var(--color-danger, #dc3545);
    color: #fff;
}

/* Modal Modifier un topic (overlay comme topic-create-modal) */
.topic-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.topic-edit-modal[hidden] {
    display: none !important;
}

.topic-edit-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.topic-edit-modal .modal-content {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.topic-edit-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
}

.topic-edit-modal .modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}

.topic-edit-modal .modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.topic-edit-form-inner {
    padding: 1rem 1.25rem;
}

.topic-edit-form-inner .form-group {
    margin-bottom: 1rem;
}

.topic-edit-form-inner .modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}


.list-follow-page .user-list-item {
    flex-wrap: wrap;
}

.list-follow-empty {
    color: var(--color-text-muted);
    margin: 0;
}

.profile-actions {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

/* Menu "..." sur Mon profil (fenêtre contextuelle) */
.profile-actions-menu-wrap {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.profile-actions-menu {
    position: relative;
    display: inline-block;
}

.btn-menu-trigger {
    min-width: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.profile-actions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.35rem;
    min-width: 12rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 50;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.profile-actions-dropdown--open {
    display: flex;
}

.profile-actions-dropdown-item {
    display: block;
    padding: 0.6rem 1rem;
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.2s;
}

.profile-actions-dropdown-item:hover {
    background: var(--color-surface-hover);
    color: var(--color-accent);
}

.dropdown-form {
    margin: 0;
}

.profile-actions-dropdown-btn {
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.profile-actions-dropdown-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-accent);
}

.profile-actions-dropdown-btn--danger:hover {
    background: rgba(181, 74, 74, 0.2);
    color: var(--color-error);
}

/* Menu "..." dans le tableau Membres */
.actions-cell.actions-cell-menu {
    display: table-cell;
    vertical-align: middle;
    grid-template-columns: none;
}

.admin-member-menu {
    position: relative;
    display: inline-block;
}

.admin-member-menu .btn-menu-trigger {
    min-width: 2.5rem;
    padding: 0.5rem 0.75rem;
}

.admin-member-menu .profile-actions-dropdown {
    right: 0;
    left: auto;
    min-width: 14rem;
}

.profile-tag {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.btn-secondary {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.profile-grade-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem;
    font-style: italic;
}

/* Boutons primaires dans le contenu : fond sombre, texte/icône clairs (visible sur surfaces) */
.btn-primary {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-primary .icon {
    color: inherit;
}

/* Bouton connexion/inscription : blanc élégant avec léger glow au survol */
.auth-page .btn-primary {
    background: linear-gradient(135deg, #f2f2f2 0%, #e0e0e0 100%);
    color: #1a1a1a;
    border: 1px solid transparent;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 16px rgba(255, 255, 255, 0.1);
    transition: box-shadow 0.25s ease, transform 0.2s ease, background 0.2s ease;
}

.auth-page .btn-primary:hover {
    background: #fff;
    color: #1a1a1a;
    box-shadow: var(--color-accent-glow-strong), 0 0 40px rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.auth-page .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 12px rgba(255, 255, 255, 0.15);
}

/* --- Footer (fond sombre logo, texte blanc élégant) --- */
.site-footer {
    background: var(--header-footer-bg);
    border-top: 1px solid var(--header-footer-border);
    padding: 1.25rem 2rem;
    margin-top: auto;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.site-footer p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.site-footer a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
    text-shadow: var(--color-accent-glow);
    text-decoration: underline;
}

/* --- Auth (connexion / inscription) --- */
.auth-page {
    max-width: 440px;
    margin: 0 auto;
}

.auth-page h1 {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 1.5rem;
    text-transform: uppercase;
}

.auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
}

/* --- Page CGU / Conditions générales --- */
.legal-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.legal-inner h1 {
    font-family: var(--font);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 0.5rem;
}

.legal-updated,
.legal-footer {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.legal-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.legal-section {
    margin-bottom: 2rem;
}

.legal-section h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.75rem;
}

.legal-section p,
.legal-section ul {
    margin: 0 0 0.75rem;
    color: var(--color-text);
    line-height: 1.65;
}

.legal-section ul {
    padding-left: 1.5rem;
}

.form-group input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.form-group-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.form-group-checkbox label {
    flex: 1;
    margin-bottom: 0;
    cursor: pointer;
}

.auth-info {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin: 0 0 1.25rem;
}

.auth-info.first-user {
    color: var(--color-accent);
    font-weight: 500;
}

.auth-switch {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.auth-page .auth-switch--forgot {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: none;
    font-size: 0.85rem;
}

.auth-switch a {
    color: var(--color-accent);
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

.triplet-group .triplet-inputs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.triplet-group .triplet-inputs input {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 1rem;
}

.triplet-group .triplet-inputs input:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* Exigences mot de passe (inscription) */
.password-requirements {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.password-requirement {
    display: block;
    margin-bottom: 0.25rem;
    padding-left: 1.35rem;
    position: relative;
}
.password-requirement::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 0.6em;
    height: 0.6em;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background: var(--color-bg);
}
.password-requirement[data-valid="true"]::before {
    background: var(--color-success);
    border-color: var(--color-success);
}
.password-requirement[data-valid="true"]::after {
    content: "";
    position: absolute;
    left: 0.2em;
    top: 0.25em;
    width: 0.35em;
    height: 0.6em;
    border: solid var(--color-bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.password-requirement[data-valid="true"] {
    color: var(--color-text);
}
.password-strength-wrap {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.password-strength-bar-wrap {
    height: 6px;
    background: var(--color-bg);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.password-strength-bar {
    height: 100%;
    width: 0;
    border-radius: var(--radius-pill);
    transition: width 0.2s ease, background-color 0.2s ease;
    background: var(--color-border);
}
.password-strength-bar[data-level="faible"] {
    background: var(--color-error);
}
.password-strength-bar[data-level="moyen"] {
    background: var(--color-accent);
}
.password-strength-bar[data-level="fort"] {
    background: var(--color-success);
}
.password-strength-label-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.password-strength-label {
    margin-right: 0;
}
.password-strength {
    font-weight: 600;
}
.password-strength[data-level="faible"] {
    color: var(--color-error);
}
.password-strength[data-level="moyen"] {
    color: var(--color-accent);
}
.password-strength[data-level="fort"] {
    color: var(--color-success);
}
.field-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
}
.field-hint--error {
    color: var(--color-error);
}
.auth-page .btn-primary:disabled,
.auth-page .btn-primary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.auth-page .btn-primary:disabled:hover,
.auth-page .btn-primary[disabled]:hover {
    background: linear-gradient(135deg, #f2f2f2 0%, #e0e0e0 100%);
    transform: none;
    box-shadow: 0 2px 16px rgba(255, 255, 255, 0.1);
}

/* --- Vérification email (inscription) --- */
.auth-page--verify {
    max-width: 420px;
}
.auth-card--verify {
    padding: 2rem 2rem 1.5rem;
}
.auth-info--verify {
    margin-bottom: 1.5rem;
}
.verify-email-display {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}
.verify-email-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}
.verify-email-masked {
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: 0.02em;
}
.verify-code-group {
    margin-bottom: 1.25rem;
}
.verify-code-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: var(--color-text);
}
.verify-code-input {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-align: center;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.verify-code-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}
.verify-code-input::placeholder {
    color: var(--color-text-muted);
    letter-spacing: 0.2em;
}
.verify-code-hint {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.verify-actions {
    margin-bottom: 1.5rem;
}
.verify-submit {
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
}
.verify-change-email {
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.verify-change-email-text {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.verify-change-email-form {
    display: inline-block;
}
.verify-change-email-btn,
.btn-ghost {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-family: var(--font);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.verify-change-email-btn:hover,
.btn-ghost:hover {
    background: rgba(201, 162, 39, 0.08);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* --- Filiation (parrain / invités) --- */
.filiation {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.invites-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--color-text);
}

.invites-list li {
    margin-bottom: 0.25rem;
}

.triplet-display .triplet-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
}

.triplet-words {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.triplet-word {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-weight: 500;
    color: var(--color-accent);
}

.triplet-words--hidden {
    display: none !important;
}

.triplet-words:not(.triplet-words--hidden) {
    margin-top: 0.75rem;
}

.btn-hold-triplet {
    margin-top: 0.35rem;
}

.profile-actions--top {
    margin-bottom: 1rem;
    padding-bottom: 0;
    border-bottom: none;
}

/* --- Arbre de filiation --- */
.filiation-page {
    max-width: 1150px;
}

.filiation-page .btn-secondary {
    margin-bottom: 1.5rem;
}

.filiation-tree-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.filiation-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0 auto;
}

.tree-node {
    text-align: center;
    padding: 0.75rem 1.25rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.tree-node--link {
    text-decoration: none;
    color: inherit;
    transition: background 0.2s, border-color 0.2s;
}

.tree-node--link:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-accent);
}

.tree-node__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tree-node__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tree-node__avatar-placeholder {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.tree-node__label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tree-node__user {
    font-weight: 600;
    color: var(--color-text);
}

.tree-node__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
}

.tree-node__badges .profile-badge {
    min-height: 1.5rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

.tree-node--me {
    border-color: var(--color-accent);
    background: rgba(201, 162, 39, 0.1);
    text-decoration: none;
}

.tree-node--me:hover {
    text-decoration: none;
}

.tree-node--me * {
    text-decoration: none;
}

.tree-connector {
    width: 2px;
    min-height: 1.5rem;
    background: var(--color-border);
}

.tree-connector--down {
    margin: 0.25rem 0;
}

.tree-children {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.tree-children-label {
    margin-bottom: 0.25rem;
}

.tree-children-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.tree-children-list > .tree-node-wrapper,
.tree-children-list > .tree-invite-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    max-width: 15rem !important;
    width: 12rem !important;
    min-width: 12rem !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    box-sizing: border-box;
}

.tree-invite-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.tree-node--parent,
.tree-node--child {
    border-style: dashed;
}

/* Admin : arbre multi-générations */
.filiation-tree-card--admin {
    max-width: 100%;
    overflow: hidden;
    justify-content: center;
}

.filiation-tree--admin {
    align-items: center;
    gap: 2rem;
    min-width: 100%;
    min-height: 100%;
    user-select: none;
    margin: 0 auto;
}

.filiation-tree--admin:active {
    cursor: grabbing;
}

/* Forcer l'affichage horizontal dans le contexte admin */
.filiation-tree--admin .tree-children-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.filiation-tree--admin .tree-children-list > .tree-node-wrapper,
.filiation-tree--admin .tree-children-list > .tree-invite-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    max-width: 15rem !important;
    width: 12rem !important;
    min-width: 12rem !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    box-sizing: border-box;
}

.tree-node-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* --- FiliationView : design system (couleurs, radius), indicateurs A/B, lien profil explicite --- */
:root {
    --color-filiation-line: var(--color-accent);
}

.filiation-view {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem 2.5rem;
    margin: 0 auto;
    max-width: 1100px;
    min-height: 320px;
    overflow: auto;
}

/* Hauteur fixe pour éviter le saut de layout avec/sans bouton Retour */
.filiation-view__back-wrap {
    margin-bottom: 1.25rem;
    min-height: 2.5rem;
    box-sizing: border-box;
}

.filiation-view__back-wrap--hidden {
    visibility: hidden;
    pointer-events: none;
}

.filiation-view__back {
    font-size: 0.9rem;
}

.filiation-view__alert {
    background: rgba(181, 74, 74, 0.15);
    border: 1px solid var(--color-error);
    color: var(--color-text);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.filiation-view__empty {
    color: var(--color-text-muted);
    margin: 0;
}

.filiation-view__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 5rem;
    position: relative;
    min-height: 240px;
    padding: 1.25rem 0;
}

/* Règle stable : focus toujours à gauche (order 1), enfants à droite (order 2). Pas d’héritage du slot de l’ancien focus. */
.filiation-view__focus-wrap {
    order: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.filiation-view__children-wrap {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
    position: relative;
    z-index: 1;
}

.filiation-view__curves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}

.filiation-view__children-list {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    position: relative;
    z-index: 1;
}

.filiation-view__child-item {
    position: relative;
}

/* Cartes : largeur fixe (alignement global), forme rectangulaire, avatar dominant */
.filiation-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0.85rem 0 0.75rem 1rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    color: inherit;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    box-sizing: border-box;
    position: relative;
}

.filiation-card--navigable {
    cursor: pointer;
}

.filiation-card--navigable:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

.filiation-card--no-descendants {
    cursor: default;
}

.filiation-card--no-descendants:hover {
    background: var(--color-surface-elevated);
    border-color: var(--color-border);
    transform: none;
}

.filiation-card--focus {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}

.filiation-card--focus:hover {
    background: var(--color-accent-subtle);
}

.filiation-card__main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    flex: 1;
}

/* Avatar plus dominant dans la carte */
.filiation-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filiation-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.filiation-card__avatar-placeholder {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.filiation-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.filiation-card__label {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.filiation-card__name {
    font-weight: 700;
    color: var(--color-text);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Badges grade : plus compacts pour tenir dans la largeur fixe */
.filiation-card__badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    line-height: 1.2;
    min-height: 1.25rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Zone actions dédiée : même slot sur toutes les cartes (alignement pixel-perfect) */
.filiation-card__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    width: 52px;
    padding: 0.35rem 0.5rem 0.35rem 0.25rem;
    box-sizing: border-box;
}

/* Bouton "Afficher la descendance" : même slot sur toutes les cartes */
.filiation-card__explore-btn,
.filiation-card__indicator-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--radius);
    margin-top: auto;
    border: none;
    cursor: pointer;
    background: transparent;
    font: inherit;
    padding: 0;
}

.filiation-card__explore-btn {
    pointer-events: auto;
}

.filiation-card__explore-btn:disabled {
    cursor: default;
    pointer-events: auto;
}

.filiation-card__indicator-icon {
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
}


.filiation-card__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
}

.filiation-card__explore-btn.filiation-card__indicator--a,
.filiation-card__indicator--a {
    color: var(--color-accent);
    background: var(--color-accent-subtle);
}

.filiation-card__explore-btn.filiation-card__indicator--a:hover:not(:disabled) {
    background: var(--color-accent-hover, var(--color-accent));
    color: var(--color-bg);
}

.filiation-card__explore-btn.filiation-card__indicator--b,
.filiation-card__indicator--b {
    color: var(--color-text-muted);
    background: var(--color-bg);
}

.filiation-card__explore-btn:disabled.filiation-card__indicator--b {
    opacity: 0.7;
}

/* Tooltip custom sur le bouton explore (pas de title natif) */
.filiation-card__explore-btn[data-tooltip]:hover::after,
.filiation-card__indicator-wrap[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.45rem 0.7rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    animation: tooltip-fade-in 0.2s ease forwards;
}

/* Lien profil : en haut de la colonne actions */
.filiation-card__profile-link-wrap {
    flex-shrink: 0;
}

.filiation-card__profile-link-wrap[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.5rem);
    right: 0;
    left: auto;
    transform: none;
    padding: 0.45rem 0.7rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    animation: tooltip-fade-in 0.2s ease forwards;
}

/* Lien profil : action explicite dans la colonne actions */
.filiation-card__profile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    color: var(--color-text-muted);
    background: transparent;
    transition: color 0.2s, background 0.2s;
    text-decoration: none;
}

.filiation-card__profile-link:hover {
    color: var(--color-accent);
    background: var(--color-accent-subtle);
}

.filiation-card__profile-link::after {
    content: "↗";
    font-size: 0.9rem;
    font-weight: 700;
}


.tree-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.tree-node--admin {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    min-width: auto;
}

.tree-node--admin.tree-node--link {
    text-decoration: none;
    color: inherit;
}

.tree-node--admin.tree-node--link:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-accent);
}

.tree-node--admin .tree-node__avatar {
    width: 2.25rem;
    height: 2.25rem;
}

.tree-node--admin .tree-node__avatar-placeholder {
    font-size: 1rem;
}

.tree-node__link-text {
    font-weight: 600;
    color: var(--color-accent);
}

.tree-node--admin .tree-node__badges .profile-badge {
    min-height: 1.35rem;
    padding: 0.15rem 0.45rem;
    font-size: 0.7rem;
}

.tree-children--admin {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--color-border);
    margin-left: 0.5rem;
}

.tree-branch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tree-connector--horizontal {
    width: 1rem;
    height: 2px;
    min-height: 0;
    margin-bottom: -1px;
    align-self: stretch;
    max-height: 2px;
}

/* --- Admin --- */
.admin-page {
    max-width: 1280px;
    margin: 0 auto;
}

.admin-page h1 {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 1.5rem;
    text-transform: uppercase;
}

.admin-members-search {
    margin-bottom: 1.25rem;
}

.admin-search-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-search-input {
    flex: 1;
    max-width: 20rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    font-family: var(--font);
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
}

.admin-search-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.admin-page.profile-view-page .profile-card {
    margin-top: 1rem;
}

.members-table {
    width: 100%;
    border-collapse: collapse;
}

.members-table th,
.members-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.members-table th {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.members-table tr.banned {
    opacity: 0.7;
}

.members-table tr.banned td {
    color: var(--color-text-muted);
}

.actions-cell {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
}

.actions-cell .btn-small,
.actions-cell .inline-form {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.actions-cell .btn-action,
.actions-cell .inline-form .btn-action {
    width: 100%;
    min-width: 0;
    height: 2rem;
    line-height: 1;
    padding: 0 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
}

.actions-cell a.btn-action {
    text-decoration: none;
    width: 100%;
    min-width: 0;
}

.inline-form {
    display: inline-flex;
    align-items: center;
}

.inline-form button {
    margin: 0;
}

.btn-small {
    padding: 0 0.6rem;
    font-size: 0.85rem;
    height: 2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Menus déroulants grade / statut dans le tableau */
.members-table .select-form {
    display: inline;
}

.members-table .select-cell {
    min-width: 7rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-family: var(--font);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    cursor: pointer;
    box-sizing: border-box;
}

.members-table .select-cell:focus {
    outline: none;
    border-color: var(--color-accent);
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--radius);
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
}

.badge-admin {
    color: var(--color-accent);
}

.badge-modo {
    color: var(--color-accent);
    opacity: 0.9;
}

.badge-error {
    background: rgba(181, 74, 74, 0.25);
    color: #e8a0a0;
}

.badge-success {
    background: rgba(74, 124, 89, 0.25);
    color: #a8d4b4;
}

.badge-warning {
    background: rgba(201, 162, 39, 0.25);
    color: #e5c158;
}

/* Étiquettes grade sur le profil (variables globales) */
.badge-grade-apprenti {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius);
    color: var(--grade-apprenti-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--grade-apprenti-bg);
    border: 1px solid var(--grade-apprenti-border);
    box-shadow: var(--grade-apprenti-shadow);
}

.badge-grade-compagnon {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius);
    color: var(--grade-compagnon-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--grade-compagnon-bg);
    border: 1px solid var(--grade-compagnon-border);
    box-shadow: var(--grade-compagnon-shadow);
}

.badge-grade-maitre {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius);
    color: var(--grade-maitre-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--grade-maitre-bg);
    border: 1px solid var(--grade-maitre-border);
    box-shadow: var(--grade-maitre-shadow);
}

/* Profil : statut & grade côte à côte, même taille */
.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.profile-badges .profile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-sizing: border-box;
}

.profile-badges .badge-admin,
.profile-badges .badge-modo {
    min-height: 2rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
}

/* --- Ma Loge --- */
.lodge-page {
    max-width: 720px;
    margin: 0 auto;
}

.lodge-page h1 {
    font-family: var(--font);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 1.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Présentation loge : photo + nom + obédience */
.lodge-presentation {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.lodge-photo-wrap {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

.lodge-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lodge-header {
    margin-bottom: 0;
    flex: 1;
    min-width: 200px;
}

.lodge-header h2 {
    font-size: 1.5rem;
    margin: 0 0 0.25rem;
    color: var(--color-text);
}

.lodge-obedience {
    color: var(--color-text-muted);
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.lodge-edit-link {
    display: inline-block;
    margin-top: 0.5rem;
}

.lodge-description {
    white-space: pre-line;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
}

.lodge-actions {
    margin-bottom: 1.5rem;
}

.lodge-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.lodge-section h3 {
    font-size: 1rem;
    margin: 0 0 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lodge-request-list,
.lodge-members-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lodge-request-item,
.lodge-member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.lodge-request-item:last-child,
.lodge-member-item:last-child {
    border-bottom: none;
}

.lodge-request-actions {
    display: flex;
    gap: 0.5rem;
}

.lodge-member-name {
    font-weight: 500;
}

.lodge-member-role.badge-vm {
    background: rgba(201, 162, 39, 0.25);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}

.lodge-member-role.badge-ps,
.lodge-member-role.badge-ss {
    background: rgba(74, 124, 89, 0.25);
    border: 1px solid var(--color-success);
    color: #a8d4b4;
}

.lodge-member-role.badge-membre {
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

/* Page modifier présentation loge */
.lodge-edit-form .profile-edit-content {
    padding-top: 1.5rem;
}

.lodge-edit-photo-section {
    margin-bottom: 2rem;
}

.lodge-photo-label {
    display: inline-block;
    cursor: pointer;
    position: relative;
}

.lodge-photo-preview-wrap {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid var(--color-border);
    background: var(--color-surface-hover);
}

.lodge-photo-preview-wrap .lodge-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lodge-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-align: center;
    padding: 1rem;
}

.lodge-photo-overlay {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.lodge-photo-label:hover .lodge-photo-overlay {
    opacity: 1;
}

.lodge-edit-card .profile-edit-actions {
    margin-top: 2rem;
}

.lodge-photo-preview {
    margin: 0.5rem 0 0.75rem;
    max-width: 280px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.lodge-photo-preview .lodge-photo-img {
    width: 100%;
    height: auto;
    display: block;
}

.form-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0.25rem 0 0.5rem;
}

/* Obédiences (admin) : logo */
.obedience-logo-thumb {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
}

.obedience-logo-placeholder {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.obedience-logo-preview {
    margin: 0.5rem 0 0.75rem;
    max-width: 120px;
}

.obedience-logo-preview .obedience-logo-img {
    width: 100%;
    height: auto;
    display: block;
}

.lodge-photo-input {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.lodge-form-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Page Administration loge (convocations) */
.lodge-admin-page .page-subtitle {
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.lodge-admin-btn {
    margin-left: 0.5rem;
}

.lodge-admin-card {
    padding: 1.5rem 2rem;
}

.lodge-admin-nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.lodge-admin-nav-link {
    color: var(--color-text-muted);
    text-decoration: none;
}

.lodge-admin-nav-link:hover,
.lodge-admin-nav-link--current {
    color: var(--color-accent);
}

/* Styles pour les onglets d'administration utilisant profile-activity-tab */
.lodge-admin-nav .profile-activity-tab {
    text-decoration: none;
    display: inline-block;
}

.lodge-admin-section-title {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
}

.lodge-admin-section-desc {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.lodge-admin-block {
    margin-bottom: 2rem;
}

.lodge-admin-block-title {
    font-size: 1rem;
    margin: 0 0 1rem;
    color: var(--color-text-muted);
}

.lodge-admin-header-logos {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.lodge-admin-logo-group label {
    display: block;
    margin-bottom: 0.5rem;
}

.lodge-admin-logo-preview {
    margin: 0.5rem 0 0.75rem;
}

.lodge-admin-logo-preview img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}

.lodge-admin-file-input {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.lodge-admin-insert-hint {
    margin-bottom: 0.5rem;
}

.lodge-admin-insert-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.lodge-admin-insert-btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    white-space: nowrap;
}

/* Maquette convocation : encarts cliquables + zones fixes */
.convocation-canvas {
    max-width: 640px;
    margin: 0 auto 2rem;
    padding: 2rem;
    background: var(--color-surface-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
}

.convocation-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: stretch;
}

.convocation-row--header {
    margin-bottom: 1.25rem;
}

.convocation-zone {
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: background-color 0.15s, border-color 0.15s;
}

.convocation-zone--editable {
    border: 2px dashed var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    color: var(--color-text);
}

.convocation-zone--editable:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}

.convocation-zone--fixed {
    border: 1px solid rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.08);
    color: var(--color-text-muted);
}

.convocation-zone--fixed .convocation-zone-fixed-label {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.convocation-zone--fixed .convocation-zone-fixed-desc {
    font-size: 0.8rem;
    opacity: 0.9;
}

.convocation-zone--logo {
    width: 100px;
    min-width: 100px;
    height: 100px;
    min-height: 100px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.convocation-zone--logo .convocation-zone-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius);
}

.convocation-zone-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.convocation-zone-placeholder {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.2;
}

.convocation-zone--text {
    flex: 1;
    min-width: 0;
}

.convocation-zone--full {
    flex: 1;
    min-width: 0;
}

.convocation-zone--half {
    flex: 1;
    min-width: 0;
    max-width: 50%;
}

.convocation-zone--tall {
    min-height: 5rem;
}

.convocation-zone-preview {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text);
}

.convocation-file-hidden {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.convocation-form-actions {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

/* Modal édition zone */
.convocation-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.convocation-modal[hidden] {
    display: none;
}

.convocation-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.convocation-modal-content {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: auto;
    background: var(--color-surface-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

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

.convocation-modal-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    text-transform: none;
}

.convocation-modal-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
}

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

.convocation-modal-body {
    padding: 1.25rem;
    flex: 1;
    min-height: 0;
}

.convocation-modal-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
}

.convocation-modal-vars {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.convocation-modal-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.convocation-modal-style-label {
    font-size: 0.9rem;
    color: var(--color-text);
}

.convocation-modal-select {
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
}

.convocation-modal-hint--small {
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.convocation-modal-hint--small code {
    font-size: 0.85em;
    padding: 0.1rem 0.25rem;
    background: var(--color-surface);
    border-radius: 3px;
}

.convocation-var-pill {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
}

.convocation-var-pill:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
    color: var(--color-accent);
}

.convocation-modal-editor-wrap textarea,
.convocation-modal-editor-wrap .convocation-modal-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
}

.convocation-modal-editor-wrap textarea {
    resize: vertical;
    min-height: 100px;
}

.convocation-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-border);
}

.lodge-intro,
.lodge-hint {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.lodge-actions-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.lodge-search-form {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.lodge-search-form .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 200px;
}

.lodge-results {
    margin-top: 1.5rem;
}

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

.lodge-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.lodge-list-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lodge-list-actions {
    flex-shrink: 0;
}

.lodge-list-obedience {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.lodge-list-name {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
}

.lodge-list-name:hover {
    color: var(--color-accent);
}

.lodge-list-badge {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-surface-hover);
    border-radius: var(--radius);
}

/* Profil public loge & Ma Loge : même layout que profil perso (bannière + photo à cheval) */
.lodge-profil-page .profile-card,
.lodge-ma-loge-page .profile-card {
    padding: 2rem;
}

.lodge-profil-banner-outer,
.lodge-ma-loge-page .lodge-profil-banner-outer {
    margin: -2rem -2rem 0 -2rem;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}

.lodge-profil-banner {
    height: 200px;
}

.lodge-avatar-overlap .lodge-avatar-wrap {
    width: 190px !important;
    height: 190px !important;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg);
    border: 4px solid var(--color-surface);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lodge-avatar-overlap .lodge-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lodge-avatar-overlap .avatar-placeholder {
    font-size: 3rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.lodge-profil-page .lodge-avatar-overlap,
.lodge-ma-loge-page .lodge-avatar-overlap {
    margin-top: -115px;
    margin-bottom: 0;
    z-index: 2;
}

.lodge-obedience-inline {
    color: var(--color-text-muted);
    font-size: 1rem;
    margin: 0.5rem 0 0;
}

.lodge-profil-head-left .lodge-profil-name {
    margin-top: 1.5rem;
}

.lodge-profil-head-right {
    margin-top: 1.5rem;
    align-self: center;
    margin-left: auto;
}

.lodge-profil-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Vue publique : boutons Suivre et Rejoindre superposés, même largeur, plus épais */
.lodge-profil-page .lodge-profil-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    min-width: 10rem;
}

.lodge-profil-page .lodge-profil-actions .lodge-action-form,
.lodge-profil-page .lodge-profil-actions .btn {
    width: 100%;
    display: block;
    text-align: center;
    padding: 0.6rem 1rem;
}

.lodge-profil-page .lodge-profil-actions .lodge-action-form button {
    width: 100%;
    padding: 0.6rem 1rem;
}

/* Layout loge : même largeur pour vue publique et vue privée */
.lodge-view-layout {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.lodge-action-form {
    margin: 0;
    display: inline;
}

.lodge-join-pending {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.lodge-profil-description {
    margin-top: 0;
    padding-top: 1rem;
}

.lodge-ma-loge-actions {
    position: absolute;
    top: 1rem;
    right: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    z-index: 10;
}

.lodge-ma-loge-actions .lodge-quit-form {
    margin: 0;
    display: block;
}

.profile-edit-btn--danger:hover {
    background: rgba(181, 74, 74, 0.15);
    color: var(--color-error);
    border-color: var(--color-error);
}

.lodge-section-title {
    font-size: 1rem;
    margin: 0 0 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lodge-ma-loge-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.lodge-member-item .lodge-member-name {
    color: var(--color-text);
    text-decoration: none;
}

.lodge-member-item .lodge-member-name:hover {
    color: var(--color-accent);
}

.lodge-no-results {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Section Événements à venir — carrousel horizontal, 3 cartes visibles */
.lodge-events-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.lodge-events-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.lodge-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.lodge-events-header .lodge-events-title {
    margin: 0;
}
.lodge-event-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
}
.lodge-event-create-btn .icon {
    width: 1.2rem;
    height: 1.2rem;
}

/* Carrousel horizontal — 3 cartes visibles, défilement fluide */
.lodge-events-carousel-inner {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    position: relative;
}
.lodge-carousel-btn {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.lodge-carousel-btn:hover {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: scale(1.05);
}
.lodge-carousel-btn .icon {
    width: 1.25rem;
    height: 1.25rem;
}
.lodge-events-track {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.lodge-events-list.lodge-events-list--carousel {
    list-style: none;
    padding: 0.25rem 0 0.5rem;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lodge-events-list.lodge-events-list--carousel::-webkit-scrollbar {
    display: none;
}
/* Une carte = 1/3 de la largeur moins les gaps (2 gaps pour 3 cartes) */
.lodge-event-item {
    flex-shrink: 0;
    margin: 0;
    width: calc((100% - 2.5rem) / 3);
    min-width: 200px;
    display: flex;
    align-items: stretch;
}

/* Carte événement — design moderne, épuré (date au-dessus, titre lisible) ; hauteur harmonisée = celle de l'étiquette la plus haute (align-items: stretch sur la liste) */
.lodge-event-card.lodge-event-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    flex: 1;
    min-height: 0;
    background: linear-gradient(145deg, #252d3d 0%, #1e2532 100%);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.lodge-event-card.lodge-event-link:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(201, 162, 39, 0.15);
    transform: translateY(-2px);
}
/* Bloc date en haut (mois en CAPS, jour en dessous) */
.lodge-event-card-date {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #1a1d24;
    padding: 0.5rem 0.75rem;
    gap: 0;
}
.lodge-event-card .lodge-event-month {
    font-size: 0.7rem;
    font-weight: 700;
    color: #4b5563;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.lodge-event-card .lodge-event-day {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}
/* Corps de la carte */
.lodge-event-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.85rem 1rem 1rem;
    gap: 0.5rem;
}
.lodge-event-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.01em;
}
.lodge-event-card-time {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.lodge-event-card-time .icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.85;
}
/* Ligne badges : grades (lettre) + lieu */
.lodge-event-card-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.lodge-event-grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 9999px;
    text-transform: uppercase;
}
.lodge-event-grade-badge.badge-grade-apprenti {
    background: var(--grade-apprenti-bg);
    color: var(--grade-apprenti-color);
    box-shadow: var(--grade-apprenti-shadow);
}
.lodge-event-grade-badge.badge-grade-compagnon {
    background: var(--grade-compagnon-bg);
    color: var(--grade-compagnon-color);
    box-shadow: var(--grade-compagnon-shadow);
}
.lodge-event-grade-badge.badge-grade-maitre {
    background: var(--grade-maitre-bg);
    color: var(--grade-maitre-color);
    box-shadow: var(--grade-maitre-shadow);
}
.lodge-event-card .lodge-event-place-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    color: #1a1d24;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 9999px;
}
.lodge-event-card .lodge-event-place-badge .icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}
.lodge-event-place-badge--temple {
    background: #f5bf42;
}
.lodge-event-place-badge--parvis_numeriques {
    background: #5eb3d6;
}
.lodge-event-place-badge--autre {
    background: #9b8bb3;
    color: #fff;
}
.lodge-events-empty {
    color: var(--color-text-muted);
    font-size: 1rem;
    margin: 0;
}

/* Création d'événement — étapes */
.event-form-step {
    outline: none;
}
.event-form-step--hidden {
    display: none !important;
}
.event-form-step-heading {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}
.event-form-step-desc {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.event-form-step-convocation-intro {
    margin-bottom: 1.25rem;
}
.event-form-step-convocation-text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.4;
}

/* Création d'événement — date/heure pleine largeur */
.event-form-date-time-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: 100%;
}
.event-form-date-group,
.event-form-time-group {
    min-width: 0;
}
.event-form-date-group input,
.event-form-time-group .event-time-select {
    width: 100%;
    box-sizing: border-box;
}

.event-form-date-group input:focus {
    border-color: var(--color-compagnon);
    box-shadow: 0 0 0 1px var(--color-compagnon-subtle);
}
@media (max-width: 480px) {
    .event-form-date-time-row {
        grid-template-columns: 1fr;
    }
}
.event-create-card .form-group {
    margin-bottom: 1.25rem;
}
.event-description-group .event-description-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.event-description-group .event-description-presets .event-description-preset {
    min-width: 0;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
    padding: 0.4rem 0.5rem;
}
.event-description-group .event-description-presets .event-description-preset--custom {
    grid-column: 1 / -1;
}
.event-description-group #description {
    width: 100%;
    min-height: 4.5rem;
    box-sizing: border-box;
}
.event-place-group .event-place-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.event-place-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.95rem;
}
.event-place-option input[type="radio"] {
    accent-color: var(--color-accent);
}
.event-place-option:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}
.event-place-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}
.event-place-other-wrap {
    margin-top: 0.75rem;
}
.event-grade-shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
}
.event-grade-shortcuts-label {
    font-size: 0.9rem;
    color: var(--color-text);
    margin-right: 0.5rem;
    font-weight: 500;
}
/* Convoquer par grade : étiquettes cliquables (pas de case), même style que profil, brillant si sélectionné */
.event-grade-shortcut {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    transition: box-shadow 0.2s, transform 0.15s;
}
.event-grade-shortcut input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.event-grade-shortcut--apprenti {
    background: var(--grade-apprenti-bg);
    color: var(--grade-apprenti-color);
    border-color: var(--grade-apprenti-border);
    box-shadow: var(--grade-apprenti-shadow);
}
.event-grade-shortcut--apprenti,
.event-grade-shortcut--apprenti * {
    color: var(--grade-apprenti-color) !important;
    font-weight: 700;
}
.event-grade-shortcut--compagnon {
    background: var(--grade-compagnon-bg);
    color: var(--grade-compagnon-color);
    border-color: var(--grade-compagnon-border);
    box-shadow: var(--grade-compagnon-shadow);
}
.event-grade-shortcut--compagnon,
.event-grade-shortcut--compagnon * {
    color: var(--grade-compagnon-color) !important;
    font-weight: 700;
}
.event-grade-shortcut--maitre {
    background: var(--grade-maitre-bg);
    color: var(--grade-maitre-color);
    border-color: var(--grade-maitre-border);
    box-shadow: var(--grade-maitre-shadow);
}
.event-grade-shortcut--maitre,
.event-grade-shortcut--maitre * {
    color: var(--grade-maitre-color) !important;
    font-weight: 700;
}
.event-grade-shortcut:has(input:checked) {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 14px rgba(255, 255, 255, 0.25);
}
.event-grade-shortcut:hover {
    transform: scale(1.02);
}
.event-grade-check-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--color-text);
}
.event-grade-check-wrap input {
    margin: 0;
    accent-color: var(--color-accent);
}
.event-grade-shortcuts .event-grade-badge {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius);
    font-weight: 500;
}
.event-grade-badge--apprenti { background: var(--grade-apprenti-bg); color: var(--grade-apprenti-color); box-shadow: var(--grade-apprenti-shadow); }
.event-grade-badge--compagnon { background: var(--grade-compagnon-bg); color: var(--grade-compagnon-color); box-shadow: var(--grade-compagnon-shadow); }
.event-grade-badge--maitre { background: var(--grade-maitre-bg); color: var(--grade-maitre-color); box-shadow: var(--grade-maitre-shadow); }
.event-invites-header {
    margin-bottom: 0.75rem;
}
.event-form-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.event-members-by-grade {
    margin-top: 0.75rem;
}
.event-grade-block {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface-hover, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.event-grade-block:last-child {
    margin-bottom: 0;
}
.event-grade-block:has(.event-members-list:empty) {
    display: none;
}
.event-grade-block-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0 0 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.event-members-list--labels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
    margin: 0;
}
.event-members-list--labels li {
    margin: 0;
    min-width: 0;
}
/* Étiquette : photo à gauche | nom + badge en colonne à droite (via .event-invite-label-inner en grille) */
.event-invite-label {
    display: block;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    min-height: 2.5rem;
    width: 100%;
    box-sizing: border-box;
}
.event-invite-label:hover {
    background: var(--color-surface-elevated);
    border-color: var(--color-border);
}
.event-invite-label:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}
.event-invite-label--pill {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--color-invite-pill-bg, #1a2332);
    border: 1px solid var(--color-invite-pill-border, #2d3d52);
    border-radius: 0.5rem;
    padding: 0.65rem 0.85rem 0.65rem 0.65rem;
    min-height: 4.25rem;
    width: 100%;
    max-width: 100%;
}
.event-invite-label-inner {
    flex: 1;
    min-width: 0;
}
.event-invite-label--pill:hover {
    background: var(--color-invite-pill-hover, #243044);
    border-color: var(--color-invite-pill-border, #2d3d52);
}
.event-invite-label--pill:has(input:checked) {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-subtle), 0 0 12px rgba(201, 162, 39, 0.35);
    background: var(--color-invite-pill-selected, #243044);
}
.event-invite-label input.event-invite-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.event-invite-label--pill {
    position: relative;
}
/* Conteneur grille : colonne 1 = photo, colonne 2 = nom + badge */
.event-invite-label--pill .event-invite-label-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0 0.75rem;
}
/* Colonne 1 : avatar à gauche */
.event-invite-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-bg);
}
.event-invite-avatar--circle {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.event-invite-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.event-invite-avatar-placeholder {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
/* Colonne 2 : bloc nom + badge en colonne */
.event-invite-label-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.4rem;
    min-width: 0;
}
.event-invite-name {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.25;
}
.event-invite-label--pill .event-invite-name {
    color: #e8e6e3;
}
.event-invite-grade-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-muted);
}
.event-invite-grade-badge--pill {
    border-radius: 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.5rem;
}
/* Mêmes couleurs que profil (variables grades) */
.event-invite-grade-badge.badge-grade-apprenti {
    background: var(--grade-apprenti-bg);
    color: var(--grade-apprenti-color);
    border: 1px solid var(--grade-apprenti-border);
    box-shadow: var(--grade-apprenti-shadow);
}
.event-invite-grade-badge.badge-grade-compagnon {
    background: var(--grade-compagnon-bg);
    color: var(--grade-compagnon-color);
    border: 1px solid var(--grade-compagnon-border);
    box-shadow: var(--grade-compagnon-shadow);
}
.event-invite-grade-badge.badge-grade-maitre {
    background: var(--grade-maitre-bg);
    color: var(--grade-maitre-color);
    border: 1px solid var(--grade-maitre-border);
    box-shadow: var(--grade-maitre-shadow);
}
.event-invite-grade-badge.badge-grade-visitor {
    background: linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.event-invite-badges-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.event-invite-grade-badge--letter {
    min-width: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 0.35rem;
}
.event-invite-grade-badge--letter.badge-grade-apprenti { color: var(--grade-apprenti-color); }
.event-invite-grade-badge--letter.badge-grade-compagnon { color: var(--grade-compagnon-color); }
.event-invite-grade-badge--letter.badge-grade-maitre { color: var(--grade-maitre-color); }
.event-form-stepper {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.event-form-stepper-track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}
.event-form-stepper-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    transition: transform 0.2s;
}
.event-form-stepper-dot:hover {
    transform: scale(1.05);
}
.event-form-stepper-dot-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.event-form-stepper-dot:hover .event-form-stepper-dot-num {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.event-form-stepper-dot--current .event-form-stepper-dot-num {
    background: var(--color-compagnon);
    border-color: var(--color-compagnon);
    color: #0f172a;
    box-shadow: 0 0 12px rgba(45, 212, 191, 0.35);
}
.event-form-stepper-dot--done .event-form-stepper-dot-num {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}
.event-form-stepper-dot-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}
.event-form-stepper-dot--current .event-form-stepper-dot-label {
    color: var(--color-accent);
}
.event-form-stepper-dot--done .event-form-stepper-dot-label {
    color: var(--color-success);
}
.event-form-stepper-line {
    width: 2.5rem;
    height: 3px;
    margin-top: 0.9rem;
    background: var(--color-border);
    flex-shrink: 0;
    border-radius: 2px;
    transition: background 0.3s;
}
.event-form-stepper-line--filled {
    background: var(--color-success);
}

/* Étape 3 — Récapitulatif (refonte) */
.event-form-summary-v2 {
    margin-bottom: 1.5rem;
}
.event-form-summary-hero {
    padding: 1.25rem 1.25rem 1rem;
    background: linear-gradient(135deg, var(--color-invite-pill-bg, #1a2332) 0%, rgba(26, 35, 50, 0.95) 100%);
    border: 1px solid var(--color-invite-pill-border, #2d3d52);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}
.event-form-summary-hero-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
}
.event-form-summary-hero-meta {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
}
.event-form-summary-hero-sep {
    opacity: 0.6;
}
.event-form-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 520px) {
    .event-form-summary-grid {
        grid-template-columns: 1fr;
    }
}
.event-form-summary-tile {
    padding: 1rem 1.1rem;
    background: var(--color-surface-hover, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.event-form-summary-tile-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0 0 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.event-form-summary-tile-content {
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.5;
}
.event-form-summary-order {
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.5;
    white-space: pre-wrap;
    margin: 0;
}
.event-form-summary-counts {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text);
}
.event-form-summary-grades-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.event-form-summary-grades-wrap .event-form-summary-grade-badge {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 999px;
}
.event-form-summary-grade-badge--apprenti { background: var(--grade-apprenti-bg); color: var(--grade-apprenti-color); box-shadow: var(--grade-apprenti-shadow); }
.event-form-summary-grade-badge--compagnon { background: var(--grade-compagnon-bg); color: var(--grade-compagnon-color); box-shadow: var(--grade-compagnon-shadow); }
.event-form-summary-grade-badge--maitre { background: var(--grade-maitre-bg); color: var(--grade-maitre-color); box-shadow: var(--grade-maitre-shadow); }
.event-form-separator {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.5rem 0 1rem;
}
.event-form-separator--before-invites {
    margin: 1.25rem 0 1rem;
}
.event-form-separator--before-visitors {
    margin: 1.25rem 0 1rem;
}
.event-visitors-encart {
    padding: 0.85rem 1rem;
    background: var(--color-surface-hover, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-top: 0.5rem;
}
.event-visitors-encart .event-visitors-selected {
    margin-top: 0;
}
.event-visitors-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.event-visitors-header--row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 1rem;
}
.event-visitors-header--row .event-form-section-title {
    flex-shrink: 0;
    margin: 0;
    padding: 0.4rem 0 0;
    line-height: 1.3;
    font-size: 0.85rem;
}
.event-visitors-header--row .event-visitor-search-panel {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}
.event-visitors-header--row .event-visitor-search-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.event-visitors-header--row .event-visitor-search-input {
    height: 2rem;
    padding: 0 0.65rem;
    line-height: normal;
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
}
.event-visitors-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.event-visitor-search-panel--inline {
    margin-top: 0;
    flex: 1;
    min-width: 0;
    max-width: 280px;
    display: flex;
    align-items: center;
}
.event-visitors-header--row .event-visitor-search-wrap {
    max-width: none;
    width: 100%;
}
.event-visitor-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-accent);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.event-visitor-add-btn:hover {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
}
.event-visitor-add-btn .icon {
    width: 1.1rem;
    height: 1.1rem;
}
.event-visitor-search-panel {
    margin-top: 0.5rem;
}
.event-visitor-search-panel--hidden {
    display: none;
}
.event-members-list,
.event-visitors-selected {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}
.event-members-list li,
.event-visitors-selected li {
    margin-bottom: 0.4rem;
}
.event-invite-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
}
.event-visitor-search-wrap {
    position: relative;
    max-width: 320px;
}
.event-visitor-search-input {
    width: 100%;
    height: 2.25rem;
    padding: 0 0.75rem;
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 0.95rem;
    box-sizing: border-box;
}
.event-visitor-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    max-height: 220px;
    overflow-y: auto;
    z-index: 20;
    display: none;
}
.event-visitor-search-results.event-visitor-results--open {
    display: block;
}
.event-visitor-result-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    background: none;
    border: none;
    color: var(--color-text);
    font-family: var(--font);
    font-size: 0.95rem;
    cursor: pointer;
}
.event-visitor-result-item:hover {
    background: var(--color-surface-hover);
}

/* Overlay détail événement */
.event-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}
.event-overlay[hidden] {
    display: none !important;
}
.event-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}
.event-overlay-panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* Barre de chargement (création / modification / suppression événement) */
.overlay-loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-surface-hover, rgba(255, 255, 255, 0.05));
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.overlay-loading-bar[hidden] {
    display: none !important;
}
.overlay-loading-bar:not([hidden]) {
    display: block !important;
    opacity: 1;
}
.overlay-loading-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: var(--color-accent);
    animation: overlay-loading-bar 1.2s ease-in-out infinite;
}
@keyframes overlay-loading-bar {
    0% { left: -40%; }
    100% { left: 100%; }
}

/* Voile pendant le chargement (assombrit et bloque les clics) */
.overlay-loading-veil {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
    pointer-events: all;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.overlay-loading-veil[hidden] {
    display: none !important;
}
.overlay-loading-veil:not([hidden]) {
    display: block !important;
    opacity: 1;
}

.event-overlay-body {
    padding: 0;
}
.event-overlay-partial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
}
.event-overlay-partial-lodge {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.event-overlay-close {
    flex-shrink: 0;
}

/* Modal suppression événement (dans overlay détail) */
.event-overlay-modal {
    position: fixed;
    inset: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.event-overlay-modal[hidden] {
    display: none !important;
}
.event-overlay-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.event-overlay-modal-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}
.event-overlay-modal-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}
.event-delete-modal-text {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.event-delete-modal-reason-group {
    margin-bottom: 1rem;
}
.event-delete-modal-reason-group .event-delete-modal-reason,
.event-delete-modal-reason {
    width: 100%;
    min-height: 4.5rem;
    padding: 0.6rem 0.75rem;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 0.95rem;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.event-delete-modal-reason-group .event-delete-modal-reason::placeholder,
.event-delete-modal-reason::placeholder {
    color: var(--color-text-muted);
}
.event-delete-modal-reason-group .event-delete-modal-reason:focus,
.event-delete-modal-reason:focus {
    outline: none;
    border-color: var(--color-accent);
}
.event-overlay-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Overlay édition post */
.post-edit-overlay .post-edit-overlay-panel {
    max-width: 720px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.post-edit-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
    flex-shrink: 0;
}
.post-edit-overlay-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}
.post-edit-overlay-body {
    padding: 1rem 1.25rem;
    overflow: auto;
    flex: 1;
    min-height: 0;
}
.post-edit-overlay-existing {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--color-bg);
    border-radius: var(--radius);
    font-size: 0.9rem;
}
.post-edit-overlay-existing-label {
    display: block;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}
.post-edit-overlay-existing-img {
    max-width: 200px;
    max-height: 120px;
    display: block;
    border-radius: var(--radius);
}
.post-edit-overlay-existing-video {
    max-width: 100%;
    border-radius: var(--radius);
}
.post-edit-overlay-form .form-group,
.work-edit-overlay-form .form-group {
    margin-bottom: 1rem;
}
.post-edit-overlay-form textarea,
.work-edit-overlay-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 1rem;
    resize: vertical;
    min-height: 80px;
}

.work-edit-overlay-form input[type="text"] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: normal;
}
.post-edit-overlay-footer {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}
.post-edit-overlay-loading,
.post-edit-overlay-error {
    color: var(--color-text-muted);
    margin: 0;
}

/* Overlay vue pièce jointe (PDF en grand) */
.attachment-view-overlay .attachment-view-overlay-panel {
    max-width: 98vw;
    max-height: 98vh;
    width: 1100px;
    height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.attachment-view-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
    flex-shrink: 0;
}
.attachment-view-overlay-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}
.attachment-view-overlay-body {
    flex: 1;
    min-height: 0;
    padding: 0;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.attachment-view-pdf-slider {
    flex: 1;
    min-height: 82vh;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
}
.attachment-view-pdf-slider .post-pdf-slider-view {
    flex: 1;
    min-height: 78vh;
    max-height: none;
}
.attachment-view-pdf-slider .post-pdf-slider-canvas-wrap {
    max-height: none;
    flex: 1;
    min-height: 72vh;
    overflow: auto;
}
.attachment-view-pdf-slider .post-pdf-slider-arrow {
    width: 2.5rem;
    height: 2.5rem;
}
.attachment-view-pdf-slider .post-pdf-slider-arrow .icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Aperçu PDF dans le post */
.post-attachment-pdf {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* Slider PDF (une page + flèches) */
.post-pdf-slider {
    width: 100%;
    max-width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.post-pdf-slider-view {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 620px;
    padding: 0.5rem;
    position: relative;
}
.post-pdf-slider-canvas-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 620px;
    overflow: auto;
}
.post-pdf-slider-canvas {
    max-width: 100%;
    height: auto;
    display: block;
}
.post-pdf-slider-arrow {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    cursor: pointer;
}
.post-pdf-slider-arrow:hover {
    background: var(--color-surface-hover);
}
.post-pdf-slider-arrow .icon {
    width: 1.25rem;
    height: 1.25rem;
}
.post-pdf-slider-arrow--prev { order: -1; }
.post-pdf-slider-arrow--next { order: 1; }
.post-pdf-slider-page-num {
    display: block;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    padding: 0.35rem 0;
}

.post-attachment-pdf-agrandir {
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    cursor: pointer;
}
.post-attachment-pdf-agrandir:hover {
    background: var(--color-surface-hover);
}
.post-attachment-pdf .post-attachment-link {
    margin-top: 0.25rem;
}

/* Overlay changer mot de passe (Mon Profil) */
.password-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
}
.password-overlay[hidden] {
    display: none !important;
}
.password-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}
.password-overlay-panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.password-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
}
.password-overlay-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}
.password-overlay-panel .password-overlay-close {
    flex-shrink: 0;
}
.password-overlay-form {
    padding: 1.25rem 1.5rem;
}
.password-overlay-form .form-group {
    margin-bottom: 1rem;
}
.password-overlay-form .form-group:last-of-type {
    margin-bottom: 0.5rem;
}
.password-overlay-hint {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--color-error);
}
.password-overlay-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.password-overlay-actions .btn {
    flex: 1;
}

/* Overlay formulaire événement (création / édition) */
.event-form-overlay[hidden] {
    display: none !important;
}
.event-form-overlay-panel {
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.event-form-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
    flex-shrink: 0;
}
.event-form-overlay-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}
.event-form-overlay-body {
    padding: 1rem 1.25rem;
    overflow: auto;
    flex: 1;
    min-height: 420px;
}
.event-form-overlay-body .event-form-step:not(.event-form-step--hidden) {
    min-height: 360px;
}
.event-form-overlay-body .form-group {
    margin-bottom: 1rem;
}
.event-form-overlay-body .event-form-overlay-actions,
.event-form-overlay-body .lodge-form-actions,
.event-form-overlay-body .event-form-step-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}
.event-form-overlay-error {
    margin: 0 0 1rem;
    padding: 0.75rem;
    background: rgba(181, 74, 74, 0.15);
    border: 1px solid var(--color-error);
    border-radius: var(--radius);
    color: var(--color-error);
    font-size: 0.95rem;
}

/* Détail événement (page et overlay) — refonte v2 + design overlay */
.event-detail-v2 {
    padding: 0;
}
.event-detail-v2 .event-detail-main {
    position: relative;
    padding-right: 4rem;
}
.event-detail-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 0.5rem;
}

/* Hero refonte : métadonnées en haut, titre en dessous */
.event-detail-hero.event-detail-hero--refonte {
    padding: 0 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.25rem;
}
.event-detail-hero-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.event-detail-hero-meta-row .icon--hero {
    width: 1.1rem;
    height: 1.1rem;
    opacity: 0.9;
    margin-right: 0.35rem;
    vertical-align: middle;
}
.event-detail-hero-date,
.event-detail-hero-time {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.event-detail-hero-place {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1a1d24;
}
.event-detail-hero-place--temple { background: #f5bf42; }
.event-detail-hero-place--parvis_numeriques { background: #5eb3d6; }
.event-detail-hero-place--autre { background: #9b8bb3; color: #fff; }
.event-detail-hero.event-detail-hero--refonte .event-detail-hero-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* CTA Meet (Parvis) — bien visible */
.event-detail-cta-meet {
    margin-bottom: 1.5rem;
}
.event-detail-meet-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 1rem;
}

/* Grille contenu (description, ordre du jour) */
.event-detail-grid.event-detail-grid--refonte {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.event-detail-tile {
    padding: 1.1rem 1.25rem;
    background: var(--color-surface-hover, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
.event-detail-tile-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin: 0 0 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.event-detail-tile-content {
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.55;
}
.event-detail-tile-content p {
    margin: 0;
}
.event-detail-order-text {
    white-space: pre-wrap;
}

/* Compat ancien hero (badges) */
.event-detail-hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.event-detail-hero-badges .event-detail-badge { margin: 0; }
.event-detail-hero-meta { font-size: 0.9rem; color: var(--color-text-muted); display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.event-detail-hero-sep { opacity: 0.7; }
.event-detail-hero-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.event-detail-triggers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 1.25rem;
}
.event-form-separator--after-grades {
    margin: 1rem 0;
}
.event-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.event-detail-invites-by-grade {
    margin-bottom: 1rem;
}
.event-detail-v2 .event-grade-block:has(.event-detail-invites-list:empty) {
    display: none;
}
.event-detail-v2 .event-invite-label--readonly {
    cursor: default;
    pointer-events: none;
}
.event-detail-pending-visits .event-detail-tile-title {
    margin-bottom: 0.5rem;
}
.event-pending-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.event-pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}
.event-pending-item:last-child {
    border-bottom: none;
}
.event-pending-actions {
    display: flex;
    gap: 0.5rem;
}

/* Ancien détail (conservé pour compat) */
.event-detail-page {
    max-width: 720px;
    margin: 0 auto;
}
.event-detail-card {
    padding: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.event-detail-card--inner {
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.event-overlay-body .event-detail-card--inner,
.event-overlay-body .event-detail-v2 {
    padding: 1.25rem 1.5rem;
}
.event-detail-card--inner .event-detail-title {
    padding-right: 4rem;
}
.event-detail-card--inner {
    position: relative;
}
.event-detail-title {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    color: var(--color-text);
    font-weight: 600;
}
.event-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0 0 1rem;
}
.event-detail-meta--badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.25rem;
}
.event-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-bg);
}
.event-detail-badge .icon {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}
.event-detail-badge--date {
    background: var(--color-surface-elevated);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.event-detail-badge--time {
    background: var(--color-surface-elevated);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.event-detail-badge--place.event-detail-badge--place-temple { background: #f5bf42; border: none; }
.event-detail-badge--place.event-detail-badge--place-parvis_numeriques { background: #5eb3d6; border: none; }
.event-detail-badge--place.event-detail-badge--place-autre { background: #9b8bb3; border: none; }
.event-detail-place {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--color-text);
    font-size: 1rem;
}
.event-detail-place .event-place-icon .icon {
    width: 1.2rem;
    height: 1.2rem;
}
.event-detail-heading {
    font-size: 0.95rem;
    margin: 1.25rem 0 0.5rem;
    color: var(--color-text-muted);
}
.event-detail-description p,
.event-order-text {
    white-space: pre-line;
    margin: 0;
}
.event-detail-notice {
    margin: 1rem 0;
    padding: 0.75rem;
    background: var(--color-accent-subtle);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    color: var(--color-text);
}
.event-detail-main[hidden] {
    display: none !important;
}
.event-detail-invites-trigger {
    margin-top: 1.25rem;
}
.event-detail-invites-panel--hidden,
.event-detail-invites-panel[aria-hidden="true"] {
    display: none !important;
}
.event-detail-invites-panel {
    padding: 0;
}
.event-detail-invites-panel-header {
    margin-bottom: 0.75rem;
}
.event-detail-invites-panel-title {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.event-detail-grades-encart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--color-surface-hover, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.event-detail-grades-encart-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-right: 0.25rem;
}
.event-detail-grades-encart .event-invite-grade-badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.55rem;
}
.event-detail-invites-panel-header .event-detail-heading {
    margin: 0;
    font-size: 1.1rem;
}
.event-detail-invites-grades {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.event-detail-invites-grades-label {
    color: var(--color-text-muted);
    margin-right: 0.25rem;
}
.event-detail-invites-grade-badge {
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
}
.event-detail-invites-grade-badge--checked::after {
    content: " ✓";
    opacity: 0.9;
}
.event-detail-action {
    margin-top: 1.25rem;
}
.event-invites-list,
.event-pending-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}
.event-invites-list li,
.event-pending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}
.event-invite-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: var(--color-surface-hover);
    border-radius: var(--radius);
    color: var(--color-text-muted);
}
.event-invite-badge--visitor { background: rgba(74, 124, 89, 0.2); color: var(--color-success); }
.event-invite-badge--pending { color: var(--color-accent); }
.event-invite-badge--approved { color: var(--color-success); }
.event-pending-actions {
    display: flex;
    gap: 0.5rem;
}
.icon--inline,
.icon--small {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.2em;
}
.icon--place {
    display: inline-flex;
}
.icon--place .icon {
    width: 1.1rem;
    height: 1.1rem;
}

.admin-hint,
.admin-empty {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

/* --- Titres de page harmonisés --- */
.page-title {
    font-family: var(--font);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 1.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-subtitle {
    color: var(--color-text-muted);
    font-size: 1rem;
    margin: -0.75rem 0 1.5rem;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .site-header {
        padding: 0 1.25rem;
    }

    .nav-main {
        gap: 0.15rem;
    }

    .nav-link {
        padding: 0.45rem 0.75rem;
        font-size: 0.9rem;
    }

    .nav-group + .nav-group::before {
        margin: 0 0.35rem;
    }
}

@media (max-width: 600px) {
    .site-header {
        min-height: auto;
        padding: 0.75rem 1rem;
    }

    .header-inner {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .logo-img {
        height: 3.5rem;
        max-width: 180px;
    }

    .nav-main {
        width: 100%;
        justify-content: flex-start;
        order: 3;
        padding-top: 0.5rem;
        border-top: 1px solid var(--color-border);
    }

    .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .avatar-upload {
        display: flex;
        justify-content: center;
    }

    .triplet-group .triplet-inputs {
        flex-direction: column;
    }

    .main-content {
        padding: 1.5rem 1rem;
    }
}

/* --- Notifications --- */
.notifications-page {
    max-width: 50rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.notifications-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    transition: background 0.2s, border-color 0.2s;
    display: block;
    text-decoration: none;
    color: inherit;
}

.notification-item--link {
    cursor: pointer;
}

.notification-item:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border);
}

.notification-item--unread {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
}

.notification-content {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.notification-actor {
    flex-shrink: 0;
}

.notification-actor-avatar,
.notification-actor-avatar-placeholder {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.notification-actor-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-elevated);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 1rem;
}

.notification-text {
    flex: 1;
    min-width: 0;
}

.notification-text p {
    margin: 0 0 0.25rem 0;
    color: var(--color-text);
    line-height: 1.5;
}


.notification-time {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.notifications-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 3rem 1rem;
    font-size: 1.1rem;
}

/* ===== MESSAGERIE ===== */

.messages-page {
    height: calc(100vh - var(--header-height));
    overflow: hidden;
}

.messages-container {
    display: flex;
    height: 100%;
    background: var(--color-bg);
}

/* Sidebar des conversations */
.messages-sidebar {
    width: 360px;
    min-width: 360px;
    max-width: 360px;
    height: calc(100vh - var(--header-height) - 2rem);
    border-right: 1px solid var(--color-border);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin: 1rem;
    margin-right: 0.5rem;
}

.messages-sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.messages-sidebar-header h1 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-text);
    flex: 1;
}

.messages-sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    padding: 0 1rem;
    gap: 0;
}

.messages-tab {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}

.messages-tab:hover {
    color: var(--color-text);
}

.messages-tab--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.messages-new-conversation-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.messages-new-conversation-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.3);
}

.messages-new-conversation-btn .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: inherit;
}

.messages-new-conversation-search {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.messages-search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.messages-search-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.messages-search-results {
    position: absolute;
    top: 100%;
    left: 1.5rem;
    right: 1.5rem;
    margin-top: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.messages-search-results--open {
    display: block;
}

.messages-search-result-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    box-sizing: border-box;
}

a.messages-search-result-item {
    color: inherit;
}

.messages-search-result-item:last-child {
    border-bottom: none;
}

.messages-search-result-item:hover {
    background: var(--color-surface-hover);
}

.messages-search-result-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
}

.messages-search-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.messages-search-result-name {
    flex: 1;
    font-weight: 500;
    font-size: 0.95rem;
}

.messages-search-result-type {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding: 0.25rem 0.5rem;
    background: var(--color-surface-elevated);
    border-radius: var(--radius);
}

.messages-conversations-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* Important pour que flex fonctionne correctement */
}

.messages-conversation-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.2s;
    position: relative;
}

.messages-conversation-item:hover {
    background: var(--color-surface-hover);
}

.messages-conversation-item--active {
    background: var(--color-accent-subtle);
    border-left: 3px solid var(--color-accent);
}

.messages-conversation-item--active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-accent);
}

.messages-conversation-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
}

.messages-conversation-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.messages-avatar-placeholder {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.messages-conversation-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.messages-conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.messages-conversation-name {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
}

.messages-conversation-time {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.messages-conversation-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.messages-conversation-text {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.messages-conversation-text--empty {
    font-style: italic;
}

.messages-unread-badge {
    background: var(--color-accent);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-pill);
    min-width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.messages-empty-state {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-muted);
}

/* Zone principale de conversation */
.messages-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin: 1rem;
    margin-left: 0.5rem;
    height: calc(100vh - var(--header-height) - 2rem);
    min-height: 0;
}

.messages-empty-selection {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.messages-empty-selection-content {
    text-align: center;
}

.messages-empty-selection-content .icon--large {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.messages-conversation-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.messages-conversation-header-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.messages-conversation-avatar--large {
    width: 56px;
    height: 56px;
}

.messages-conversation-header-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.messages-conversation-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}

.messages-conversation-status {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.messages-conversation-status--online {
    color: var(--color-success);
}

.messages-conversation-header-actions {
    display: flex;
    gap: 0.5rem;
    position: relative;
}

.messages-header-actions-menu {
    position: relative;
}

.messages-header-action-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
}

.messages-header-action-btn:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
}

.messages-header-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 12rem;
    padding: 0.5rem 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 200;
}

.messages-header-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.2s, background 0.2s;
}

.messages-header-menu-item:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
}

.messages-header-menu-item--danger:hover {
    color: var(--color-error);
    background: rgba(181, 74, 74, 0.15);
}

.messages-header-menu-item .icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.messages-conversation-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.messages-message {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.messages-message--sent {
    flex-direction: row-reverse;
}

.messages-message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
}

.messages-message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.messages-message-content {
    flex: 1;
    max-width: 70%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.messages-message--sent .messages-message-content {
    align-items: flex-end;
}

.messages-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.messages-message-sender {
    font-weight: 600;
    color: var(--color-text);
}

.messages-message-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.messages-message-time {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.messages-delete-form {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.messages-delete-btn {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s, background 0.2s;
}

.messages-message:hover .messages-delete-btn {
    opacity: 1;
}

.messages-delete-btn:hover {
    color: var(--color-error);
    background: rgba(181, 74, 74, 0.15);
}

.messages-delete-btn .icon--small {
    width: 0.9rem;
    height: 0.9rem;
}

.messages-message-lodge-indicator {
    font-size: 0.75rem;
    color: var(--color-accent);
    font-style: italic;
    margin-bottom: 0.25rem;
}

.messages-message-text {
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border-radius: var(--radius);
    color: var(--color-text);
    line-height: 1.5;
    word-wrap: break-word;
}

.messages-message--sent .messages-message-text {
    background: var(--color-accent-subtle);
    color: var(--color-text);
}

/* Zone de saisie */
.messages-conversation-input {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 1rem 1.5rem;
}

.messages-send-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.messages-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.messages-input-textarea {
    width: 100%;
    min-height: 2.5rem;
    max-height: 200px;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 0.95rem;
    resize: none;
    overflow-y: auto;
    transition: border-color 0.2s;
}

.messages-input-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.messages-input-textarea::placeholder {
    color: var(--color-text-muted);
}

.messages-input-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.messages-input-action-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
    font-size: 0.85rem;
}

.messages-input-action-btn:hover {
    color: var(--color-text);
    background: var(--color-surface-hover);
}

.messages-input-action-btn .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.messages-input-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.messages-input-action-btn:disabled:hover {
    background: transparent;
    color: var(--color-text-muted);
}

.messages-send-actions {
    display: flex;
    justify-content: flex-end;
}

.messages-send-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}

.messages-send-btn:hover:not(:disabled) {
    background: var(--color-accent-hover);
}

.messages-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.messages-send-btn .icon {
    width: 1rem;
    height: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .messages-sidebar {
        width: 100%;
        min-width: 100%;
    }
    
    .messages-main {
        display: none;
    }
    
    .messages-container:has(.messages-conversation-item--active) .messages-sidebar {
        display: none;
    }
    
    .messages-container:has(.messages-conversation-item--active) .messages-main {
        display: flex;
    }
}

/* --- Flatpickr (calendrier date) : style harmonisé avec l'app --- */
.flatpickr-calendar {
    background: var(--color-surface-elevated) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow) !important;
    border-radius: var(--radius-lg) !important;
}

.flatpickr-calendar.flatpickr-open {
    z-index: 10000 !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
}

.flatpickr-weekdays,
span.flatpickr-weekday {
    background: var(--color-surface) !important;
    color: var(--color-text-muted) !important;
}

.flatpickr-days {
    background: var(--color-surface-elevated) !important;
}

.dayContainer {
    background: var(--color-surface-elevated) !important;
}

.flatpickr-day {
    color: var(--color-text) !important;
    border-color: transparent !important;
}

.flatpickr-day:hover {
    background: var(--color-surface-hover) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--color-compagnon) !important;
    border-color: var(--color-compagnon) !important;
    color: #0f172a !important;
    box-shadow: 0 0 12px rgba(45, 212, 191, 0.4) !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--color-compagnon) !important;
    color: #0f172a !important;
}

.flatpickr-day.flatpickr-disabled {
    color: var(--color-text-muted) !important;
    opacity: 0.5;
}

.flatpickr-time input {
    color: var(--color-text) !important;
    background: var(--color-bg) !important;
}

.flatpickr-input[readonly] {
    cursor: pointer !important;
}