/* CONFIGURATION DES COULEURS ET POLICES */
:root {
    --turquoise: #3E6BB0;    /* ex-turquoise → bleu marial clair (alias conservé) */
    /* Charte Katho : bleu marial + doré liturgique. Sobre et moderne.
       Une seule famille, déclinée : action (profond) / marque (clair) / accent (doré) / fond. */
    --orange: #1E3D6B;       /* ACTION : boutons, CTA, ♥ actif (bleu profond, lisible) */
    --terracotta: #3E6BB0;   /* MARQUE : liens, titres accent, dégradés clairs (bleu marial) */
    --sun: #C7A14A;          /* ACCENT doré liturgique */
    --sand: #F4EFE6;         /* FOND doux : survols, encarts (blanc cassé chaud) */
    --teal: #4A6B5A;         /* VERT liturgique (secondaire) */
    --dark: #1C2733;
    --white: #ffffff;
    --bg-light: #F8FAFD;
}

/* Mode nuit : mêmes rôles, teintes éclaircies pour rester lisibles sur fond ardoise. */
body.site-theme-night,
body.community-theme-night {
    --orange: #5B8AD6;
    --terracotta: #7FA6DD;
    --sand: #1A2634;
    --teal: #6FA891;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video {
    max-width: 100%;
}

html {
    overflow-x: clip;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-light);
    color: var(--dark);
    overflow-x: clip;
}

body.site-theme-night {
    background:
        radial-gradient(circle at top left, rgba(73, 127, 122, 0.18), transparent 28%),
        radial-gradient(circle at top right, rgba(52, 92, 112, 0.24), transparent 30%),
        linear-gradient(180deg, #0f1b1f 0%, #16272c 46%, #1c3036 100%);
    color: #deecea;
}

body.auth-page {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* EN-TÊTE */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 5%;
    background: var(--white);
    border-bottom: 1px solid #e8eff0;
}

body.site-theme-night .site-header,
html.site-theme-night .site-header {
    background: rgba(16, 29, 33, 0.88);
    border-bottom-color: rgba(112, 160, 159, 0.18);
    backdrop-filter: blur(16px);
}

.logo {
    flex: 0 0 auto;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 98px;
    height: 98px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 28px rgba(32, 64, 68, 0.08);
    border: 1px solid rgba(216, 228, 228, 0.9);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logo-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
}

.logo:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(32, 64, 68, 0.12);
}

body.site-theme-night .logo,
html.site-theme-night .logo {
    background: linear-gradient(180deg, rgba(24, 40, 45, 0.9) 0%, rgba(19, 33, 37, 0.94) 100%);
    border-color: rgba(112, 160, 159, 0.22);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
}

body.site-theme-night .logo,
body.site-theme-night .nav-link,
body.site-theme-night .nav-welcome,
html.site-theme-night .logo,
html.site-theme-night .nav-link,
html.site-theme-night .nav-welcome {
    color: #e9f6f4;
}

.nav-link {
    text-decoration: none;
    color: var(--dark);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.nav-link-messages {
    position: relative;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 10px 18px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 520px;
}

body.home-page .site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
    background: transparent;
    border-bottom: 0;
    padding-top: 18px;
}

body.home-page .logo {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(216, 228, 228, 0.78);
}

body.home-page .site-nav {
    flex: 0 1 auto;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(216, 228, 228, 0.72);
    box-shadow: 0 12px 28px rgba(32, 64, 68, 0.08);
    backdrop-filter: blur(12px);
}

body.home-page.site-theme-night .site-nav .nav-link,
body.home-page.site-theme-night .site-nav .nav-welcome {
    color: var(--dark);
}

body.home-page.site-theme-night .site-nav .nav-link.is-active {
    color: var(--orange, #1E3D6B);
}

.nav-link.is-active {
    color: var(--orange, #1E3D6B);
}

.nav-welcome {
    color: #5b677a;
    font-weight: 600;
}

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

/* ── Bouton hamburger (caché sur desktop) ─────────────────────────── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    z-index: 1001;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--dark);
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.site-theme-night .nav-toggle span,
html.site-theme-night .nav-toggle span { background: #e9f6f4; }

/* ── Responsive mobile ────────────────────────────────────────────── */
@media (max-width: 680px) {
    .site-header {
        padding: 10px 5%;
        flex-wrap: nowrap;
        align-items: center;
        position: relative;
        z-index: 600;
    }

    .logo {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

    .logo-image {
        width: 100%;
        height: 100%;
    }

    .nav-toggle {
        display: flex;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 8px 0 12px;
        background: var(--white);
        border-bottom: 1px solid #e8eff0;
        box-shadow: 0 8px 24px rgba(32, 64, 68, 0.1);
        z-index: 1000;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav .nav-link,
    .site-nav .nav-welcome {
        width: 100%;
        padding: 12px 5%;
        border-bottom: 1px solid #f0f4f4;
        font-size: 1rem;
    }

    .site-nav .nav-link:last-child,
    .site-nav .nav-welcome:last-child {
        border-bottom: none;
    }

    body.site-theme-night .site-nav {
        background: #101d21;
        border-bottom-color: rgba(112, 160, 159, 0.18);
    }

    body.site-theme-night .site-nav .nav-link,
    body.site-theme-night .site-nav .nav-welcome {
        border-bottom-color: rgba(112, 160, 159, 0.12);
    }

    /* Page d'accueil : nav pill reste visible */
    body.home-page .site-nav {
        position: absolute;
        top: 100%;
        border-radius: 0 0 16px 16px;
    }
}

/* BAS DE PAGE */
.site-footer {
    margin-top: 56px;
    padding: 26px 20px 34px;
    border-top: 1px solid #e6eceb;
    background: rgba(255, 255, 255, 0.88);
}

.site-footer-inner {
    width: min(1120px, calc(100% - 24px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.site-footer-brand strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1rem;
}

.site-footer-brand p,
.site-footer-meta span,
.site-footer-meta a {
    margin: 0;
    color: #617277;
    line-height: 1.6;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.site-footer-links a,
.site-footer-meta a {
    color: #2f4f4f;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.site-footer-links a:hover,
.site-footer-meta a:hover {
    text-decoration: underline;
}

.site-footer-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.site-footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #1877f2;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: opacity 0.15s;
    min-height: 44px;
}

.site-footer-social-link:hover {
    opacity: 0.8;
    text-decoration: none;
}

body.site-theme-night .site-footer-social-link {
    color: #5b9cf6;
}

body.site-theme-night .site-footer {
    background: rgba(14, 26, 30, 0.86);
    border-top-color: rgba(112, 160, 159, 0.16);
}

body.site-theme-night .site-footer-brand p,
body.site-theme-night .site-footer-meta span,
body.site-theme-night .site-footer-meta a,
body.site-theme-night .site-footer-links a,
body.site-theme-night .site-footer-brand strong {
    color: #dceceb;
}

.admin-page {
    padding: 40px 5% 80px;
}

.login-page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.login-card {
    width: 100%;
    max-width: 460px;
    background: white;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    padding: 32px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.login-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c8d2e1;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 16px;
}

.login-button {
    margin-top: 8px;
}

.form-switch-text {
    margin: 22px 0 0;
    color: #5b677a;
}

.auth-helper-links {
    margin: 18px 0 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: #5b677a;
}

.auth-helper-links a {
    color: var(--orange);
    font-weight: bold;
    text-decoration: none;
}

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

.confirmation-text {
    margin: 18px 0 0;
    color: #5b677a;
}

.signup-checkbox {
    margin-top: 4px;
}

.honeypot-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.resend-form {
    margin-top: 14px;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--orange);
    font-weight: bold;
    cursor: pointer;
}

.turnstile-wrap {
    margin-top: 4px;
}

.admin-panel {
    background: white;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    padding: 32px;
    margin-bottom: 32px;
}

.admin-import-form {
    margin-top: 24px;
}

.field-label {
    display: block;
    font-weight: bold;
    margin-bottom: 12px;
}

.admin-help-text {
    margin: 0 0 14px;
    color: #5b677a;
}

.admin-search-row {
    max-width: 820px;
    margin: 0;
}

.admin-select {
    border: 1px solid #c8d2e1;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 15px;
    background: white;
    color: var(--dark);
}

.admin-type-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 4px;
}

.admin-type-filters a {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dbe6e8;
    border-radius: 999px;
    background: #f7fbfc;
    color: var(--dark);
    padding: 9px 13px;
    font-weight: 700;
    text-decoration: none;
}

.admin-type-filters a.is-active {
    border-color: rgba(239, 134, 84, 0.42);
    background: rgba(239, 134, 84, 0.14);
    color: #9b4d2e;
}

.manual-form {
    margin-top: 24px;
}

.manual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.manual-full {
    grid-column: 1 / -1;
}

.admin-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #c8d2e1;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 15px;
    background: white;
    color: var(--dark);
}

.admin-multiselect {
    min-height: 12rem;
}

.file-input {
    padding: 12px;
}

.admin-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.manual-checkboxes {
    display: flex;
    gap: 20px;
    margin: 20px 0 24px;
    flex-wrap: wrap;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dark);
}

.flash-success,
.flash-error {
    padding: 14px 18px;
    border-radius: 12px;
    margin-top: 18px;
}

.flash-success {
    background: #ecfff8;
    color: #156a4d;
}

.flash-error {
    background: #fff1f1;
    color: #8c2f39;
}

.anon-notice {
    padding: 12px 16px;
    border-radius: 10px;
    background: #eef5ff;
    color: #2c5282;
    font-size: 0.88rem;
    margin-top: 14px;
    margin-bottom: 4px;
}

.signup-benefits {
    margin: 16px 0 22px;
    padding: 18px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #edfaf6 0%, #f0f7ff 100%);
    border: 1px solid #d4ead9;
}

.signup-benefits-title {
    margin: 0 0 12px;
    font-weight: 800;
    color: #1a3a36;
    font-size: 1rem;
}

.signup-benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.signup-benefits-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #2d4a45;
    font-size: 0.95rem;
    line-height: 1.35;
}

.signup-benefits-list li svg {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    color: #2f8f6f;
}

.signup-benefits-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(45, 74, 69, 0.12);
    color: #5b677a;
    font-size: 0.85rem;
    font-weight: 600;
}

.signup-benefits-trust svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

.import-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.import-stats p {
    margin: 0;
    background: var(--bg-light);
    padding: 14px 16px;
    border-radius: 14px;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.admin-relation-list {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.admin-relation-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    border: 1px solid #dbe6e8;
    border-radius: 14px;
    padding: 14px 16px;
}

.admin-relation-row strong,
.admin-relation-row span {
    display: block;
}

.admin-relation-row span,
.admin-relation-row p {
    color: #5b677a;
    margin: 4px 0 0;
}

.admin-relation-row .btn-search {
    min-width: 104px;
}

body.site-theme-night .admin-panel {
    background: rgba(23, 39, 44, 0.92);
    border: 1px solid rgba(110, 154, 152, 0.14);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
    color: #deecea;
}

body.site-theme-night .admin-panel h1,
body.site-theme-night .admin-panel h2,
body.site-theme-night .admin-panel h3,
body.site-theme-night .admin-relation-row strong {
    color: #eef8f7;
}

body.site-theme-night .admin-panel p,
body.site-theme-night .admin-help-text,
body.site-theme-night .admin-relation-row span,
body.site-theme-night .admin-relation-row p {
    color: #b9cfcd;
}

body.site-theme-night .admin-relation-row {
    background: rgba(14, 27, 31, 0.68);
    border-color: rgba(110, 154, 152, 0.18);
}

body.site-theme-night .admin-input,
body.site-theme-night .admin-select {
    background: rgba(11, 21, 24, 0.84);
    border-color: rgba(117, 165, 163, 0.22);
    color: #eef8f7;
}

body.site-theme-night .admin-input option,
body.site-theme-night .admin-select option {
    background: #17272c;
    color: #eef8f7;
}

.admin-card .card {
    width: auto;
    margin: 0;
}

.admin-proposal-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.admin-proposal-photo-thumb {
    position: relative;
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    text-decoration: none;
}

.admin-proposal-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .15s;
}

.admin-proposal-photo-thumb:hover img {
    opacity: 0.8;
}

.admin-proposal-photo-thumb span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 0.65rem;
    text-align: center;
    padding: 2px 4px;
}

.review-actions {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.btn-secondary {
    background: var(--dark);
}

.btn-secondary:hover {
    background: #254141;
}

.btn-danger {
    background: #c0392b;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.btn-danger:hover {
    background: #96281b;
}

/* CONFIGURATION DES COULEURS ET POLICES */
:root {
    --turquoise: #3E6BB0;
    --orange: var(--orange, #1E3D6B);
    --dark: #1C2733;
    --white: #ffffff;
    --bg-light: #F8FAFD;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video {
    max-width: 100%;
}

html {
    overflow-x: clip;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-light);
    color: var(--dark);
    overflow-x: clip;
}

body.site-theme-night {
    background:
        radial-gradient(circle at top left, rgba(73, 127, 122, 0.18), transparent 28%),
        radial-gradient(circle at top right, rgba(52, 92, 112, 0.24), transparent 30%),
        linear-gradient(180deg, #0f1b1f 0%, #16272c 46%, #1c3036 100%);
    color: #deecea;
}

body.auth-page {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* EN-TÊTE */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 5%;
    background: var(--white);
    border-bottom: 1px solid #e8eff0;
}

body.site-theme-night .site-header,
html.site-theme-night .site-header {
    background: rgba(16, 29, 33, 0.88);
    border-bottom-color: rgba(112, 160, 159, 0.18);
    backdrop-filter: blur(16px);
}

.logo {
    flex: 0 0 auto;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 98px;
    height: 98px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 28px rgba(32, 64, 68, 0.08);
    border: 1px solid rgba(216, 228, 228, 0.9);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logo-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
}

.logo:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(32, 64, 68, 0.12);
}

body.site-theme-night .logo,
html.site-theme-night .logo {
    background: linear-gradient(180deg, rgba(24, 40, 45, 0.9) 0%, rgba(19, 33, 37, 0.94) 100%);
    border-color: rgba(112, 160, 159, 0.22);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
}

body.site-theme-night .logo,
body.site-theme-night .nav-link,
body.site-theme-night .nav-welcome,
html.site-theme-night .logo,
html.site-theme-night .nav-link,
html.site-theme-night .nav-welcome {
    color: #e9f6f4;
}

.nav-link {
    text-decoration: none;
    color: var(--dark);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.nav-link-messages {
    position: relative;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 10px 18px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 520px;
}

body.home-page .site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
    background: transparent;
    border-bottom: 0;
    padding-top: 18px;
}

body.home-page .logo {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(216, 228, 228, 0.78);
}

body.home-page .site-nav {
    flex: 0 1 auto;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(216, 228, 228, 0.72);
    box-shadow: 0 12px 28px rgba(32, 64, 68, 0.08);
    backdrop-filter: blur(12px);
}

body.home-page.site-theme-night .site-nav .nav-link,
body.home-page.site-theme-night .site-nav .nav-welcome {
    color: var(--dark);
}

body.home-page.site-theme-night .site-nav .nav-link.is-active {
    color: var(--orange, #1E3D6B);
}

.nav-link.is-active {
    color: var(--orange, #1E3D6B);
}

.nav-welcome {
    color: #5b677a;
    font-weight: 600;
}

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

/* ── Bouton hamburger (caché sur desktop) ─────────────────────────── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    z-index: 1001;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--dark);
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.site-theme-night .nav-toggle span,
html.site-theme-night .nav-toggle span { background: #e9f6f4; }

/* ── Responsive mobile ────────────────────────────────────────────── */
@media (max-width: 680px) {
    .site-header {
        padding: 10px 5%;
        flex-wrap: nowrap;
        align-items: center;
        position: relative;
    }

    .logo {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

    .logo-image {
        width: 100%;
        height: 100%;
    }

    .nav-toggle {
        display: flex;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 8px 0 12px;
        background: var(--white);
        border-bottom: 1px solid #e8eff0;
        box-shadow: 0 8px 24px rgba(32, 64, 68, 0.1);
        z-index: 1000;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav .nav-link,
    .site-nav .nav-welcome {
        width: 100%;
        padding: 12px 5%;
        border-bottom: 1px solid #f0f4f4;
        font-size: 1rem;
    }

    .site-nav .nav-link:last-child,
    .site-nav .nav-welcome:last-child {
        border-bottom: none;
    }

    body.site-theme-night .site-nav {
        background: #101d21;
        border-bottom-color: rgba(112, 160, 159, 0.18);
    }

    body.site-theme-night .site-nav .nav-link,
    body.site-theme-night .site-nav .nav-welcome {
        border-bottom-color: rgba(112, 160, 159, 0.12);
    }

    /* Page d'accueil : nav pill reste visible */
    body.home-page .site-nav {
        position: absolute;
        top: 100%;
        border-radius: 0 0 16px 16px;
    }
}

/* BAS DE PAGE */
.site-footer {
    margin-top: 56px;
    padding: 26px 20px 34px;
    border-top: 1px solid #e6eceb;
    background: rgba(255, 255, 255, 0.88);
}

.site-footer-inner {
    width: min(1120px, calc(100% - 24px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.site-footer-brand strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1rem;
}

.site-footer-brand p,
.site-footer-meta span,
.site-footer-meta a {
    margin: 0;
    color: #617277;
    line-height: 1.6;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.site-footer-links a,
.site-footer-meta a {
    color: #2f4f4f;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.site-footer-links a:hover,
.site-footer-meta a:hover {
    text-decoration: underline;
}

.site-footer-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.site-footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: #1877f2;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: opacity 0.15s;
    min-height: 44px;
}

.site-footer-social-link:hover {
    opacity: 0.8;
    text-decoration: none;
}

body.site-theme-night .site-footer-social-link {
    color: #5b9cf6;
}

body.site-theme-night .site-footer {
    background: rgba(14, 26, 30, 0.86);
    border-top-color: rgba(112, 160, 159, 0.16);
}

body.site-theme-night .site-footer-brand p,
body.site-theme-night .site-footer-meta span,
body.site-theme-night .site-footer-meta a,
body.site-theme-night .site-footer-links a,
body.site-theme-night .site-footer-brand strong {
    color: #dceceb;
}
/* BANNIÈRE PRINCIPALE AVEC IMAGE */
.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #143e45;
    padding: 80px 5% 58px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-radius: 0 0 34px 34px;
    min-height: 480px;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(7, 22, 27, 0.78) 0%, rgba(11, 38, 45, 0.66) 48%, rgba(13, 45, 53, 0.48) 100%);
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body.home-page .hero {
    padding-top: 170px;
}

.hero-text {
    flex: 1;
    min-width: 300px;
    max-width: 1100px;
    color: white;
    position: relative;
    z-index: 2;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
    background: rgba(9, 24, 28, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-text h1 {
    font-size: 3.35rem;
    line-height: 1.05;
    max-width: 900px;
    margin: 0 0 18px;
    text-shadow: 0 10px 28px rgba(8, 18, 24, 0.35);
}

.hero-subtitle {
    font-size: 1.14rem;
    max-width: 720px;
    margin: 0 0 24px;
    line-height: 1.6;
    text-shadow: 0 6px 22px rgba(8, 18, 24, 0.28);
    color: #f6fffe;
}

.hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -4px 0 22px;
}

.hero-benefits span {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(10, 28, 32, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f5fffe;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

.hero-emoji-block {
    flex: 1;
    text-align: center;
    min-width: 300px;
}

.hero-emoji {
    font-size: 150px;
}

/* BARRE DE RECHERCHE */
.search-container {
    background: white;
    padding: 12px;
    border-radius: 14px;
    display: flex;
    gap: 10px;
    max-width: 690px;
    margin-top: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    box-sizing: border-box;
}

.search-container input {
    border: none;
    padding: 12px 14px;
    flex: 1;
    font-size: 16px;
    outline: none;
    min-width: 220px;
    box-sizing: border-box;
}

.search-container-page {
    margin: 30px auto 0;
}

.btn-search {
    background: var(--orange, #1E3D6B);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
}

.btn-search:hover {
    background: var(--orange, #1E3D6B);
}

.hero-actions {
    display: flex;
    gap: 12px 16px;
    align-items: center;
    margin-top: 18px;
    flex-wrap: wrap;
}

.hero-secondary-link {
    color: white;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.hero-secondary-link-ghost {
    display: inline-flex;
    align-items: center;
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-decoration: none;
    box-sizing: border-box;
}

.hero-reassurance {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
}

.hero-paths {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 900px;
    margin-top: 24px;
}

.hero-path-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 44px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(9, 24, 28, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: transform 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.hero-path-card:hover {
    transform: translateY(-2px);
    background: rgba(9, 24, 28, 0.56);
}

.hero-path-card span {
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.92rem;
    font-weight: 700;
}

.hero-path-card strong {
    color: #fff;
    font-size: 1.02rem;
    line-height: 1.3;
}

.hero-community-card {
    margin-top: 22px;
    max-width: 760px;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(9, 24, 28, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(10px);
}

.hero-community-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #dffaf7;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hero-community-card h2 {
    margin: 14px 0 10px;
    font-size: 1.65rem;
    line-height: 1.2;
    color: #fff;
}

.hero-community-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.65;
    max-width: 680px;
}

.hero-community-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.hero-community-points span {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 700;
}

.hero-community-cta {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-community-cta strong {
    display: block;
    margin-bottom: 6px;
    color: #fff;
}

.hero-community-cta span {
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.55;
}

.hero-signup-reasons {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-signup-reasons strong {
    display: block;
    margin-bottom: 10px;
    color: #fff;
}

.hero-signup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hero-signup-grid span {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.94);
    font-weight: 600;
}

/* CARTES DE L'ANNUAIRE ET BLOG */
.home-community-section {
    width: min(1380px, 90%);
    margin: -26px auto 18px;
    padding: 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
    gap: 28px;
    align-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(47, 79, 79, 0.08);
    box-shadow: 0 22px 50px rgba(32, 57, 70, 0.1);
    position: relative;
    z-index: 5;
    box-sizing: border-box;
}

.home-community-copy h2 {
    margin: 12px 0 12px;
    max-width: 760px;
    font-size: 2rem;
    line-height: 1.16;
    color: var(--dark);
}

.home-community-copy p {
    margin: 0;
    max-width: 760px;
    color: #536873;
    line-height: 1.7;
    font-size: 1.03rem;
}

.home-community-actions {
    display: flex;
    align-items: center;
    gap: 14px 18px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.home-community-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.home-community-item {
    min-height: 112px;
    padding: 18px;
    border-radius: 14px;
    background: #f5fbfb;
    border: 1px solid rgba(47, 79, 79, 0.08);
    box-sizing: border-box;
}

.home-community-item--facebook {
    text-decoration: none;
    background: #eef4fe;
    border-color: rgba(24, 119, 242, 0.18);
    transition: background 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
}

.home-community-item--facebook:hover {
    background: #deeafd;
    transform: translateY(-2px);
}

.home-community-item--facebook strong {
    color: #1877f2;
}

.home-community-item strong {
    display: block;
    margin-bottom: 8px;
    color: var(--dark);
    font-size: 1.04rem;
}

.home-community-item span {
    color: #60717c;
    line-height: 1.55;
}

.home-members-section {
    padding: 24px 5% 8px;
}

.home-member-grid {
    max-width: 1380px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-member-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(47, 79, 79, 0.08);
    box-shadow: 0 14px 32px rgba(32, 57, 70, 0.07);
    text-decoration: none;
    color: var(--dark);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.home-member-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(32, 57, 70, 0.12);
}

.home-member-card-preview {
    cursor: default;
}

.home-member-card-preview:hover {
    transform: none;
    box-shadow: 0 14px 32px rgba(32, 57, 70, 0.07);
}

.home-member-avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #e7f5f0, #f9ead9);
    color: #2f6f5b;
    font-weight: 800;
    font-size: 1.35rem;
}

.home-member-avatar-blurred {
    filter: blur(6px);
    opacity: 0.78;
    transform: scale(0.96);
}

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

.home-member-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.home-member-copy strong,
.home-member-copy span,
.home-member-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-member-copy strong {
    color: var(--dark);
    font-size: 1rem;
}

.home-member-copy span {
    color: #2f6f5b;
    font-weight: 700;
    font-size: 0.88rem;
}

.home-member-copy small {
    color: #60717c;
    font-size: 0.86rem;
}

.home-featured-section {
    padding: 42px 5% 12px;
}

.features {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 10px 0 24px;
    margin: 0 auto;
    flex-wrap: wrap;
    max-width: 1380px;
}

.home-directory-section {
    padding: 28px 5% 10px;
}

.home-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin: 0 auto 22px;
    max-width: 1380px;
}

.home-section-heading h2 {
    margin: 10px 0 8px;
    font-size: 2rem;
}

.home-section-heading p {
    margin: 0;
    max-width: 760px;
    line-height: 1.6;
    color: #5b677a;
}

.home-section-link {
    color: var(--dark);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.home-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 18px;
    flex-wrap: wrap;
}

.home-classifieds-cta {
    max-width: 1380px;
    margin: 0 auto 6px;
}

.home-classifieds-cta-text {
    margin: 0;
    max-width: 760px;
    line-height: 1.6;
    color: #5b677a;
}

.home-classifieds-cta-link {
    color: var(--orange, #1E3D6B);
    font-weight: 700;
    text-decoration: none;
}

.home-classifieds-cta-link:hover {
    text-decoration: underline;
}

body.site-theme-night .home-classifieds-cta-text {
    color: #dceceb;
}

.home-directory-grid {
    max-width: 1380px;
    margin: 0 auto;
}

.home-link-grid {
    max-width: 1380px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.home-link-card {
    background: #fff;
    border-radius: 22px;
    padding: 24px 24px 22px;
    text-decoration: none;
    color: var(--dark);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    border: 1px solid rgba(47, 79, 79, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-link-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0,0,0,0.1);
}

.home-link-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.home-link-card span {
    color: #60717c;
    line-height: 1.55;
}
/* Caché sur desktop — visible uniquement via le media query mobile */
.mobile-bottom-nav { display: none; }

@media (max-width: 1024px) {
    .hero {
        padding: 64px 5% 48px;
    }

    .hero-text h1 {
        font-size: 2.85rem;
    }

    .hero-paths {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-link-grid,
    .home-member-grid,
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-community-section {
        grid-template-columns: 1fr;
    }

    .community-public-hero,
    .community-feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Tablettes portrait & grands téléphones (≤768 px) ── */
@media (max-width: 768px) {

    /* Fiche lieu : passer en colonne une étape plus tôt */
    .camping-showcase,
    .camping-layout {
        grid-template-columns: 1fr;
    }

    .camping-showcase-media {
        min-height: 280px;
        max-height: 320px;
    }

    .camping-showcase-copy {
        padding: 26px 22px;
    }

    .camping-similar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Layout communauté : passer en colonne sur tablettes étroites */
    .community-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .community-main,
    .community-sidebar {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .community-main {
        order: 1;
    }

    .community-sidebar {
        order: 2;
    }

}


@media (max-width: 720px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
    }

    .logo {
        width: 76px;
        height: 76px;
        padding: 0;
    }

    .logo-image {
        width: 100%;
        height: 100%;
        max-width: none;
    }

    /* Annuaire mobile : supprimer hero et stats */
    .directory-page {
        padding-top: 16px;
    }

    .directory-hero,
    .directory-hero-stats {
        display: none;
    }

    .directory-grid {
        grid-template-columns: 1fr;
    }

    /* Carte : masquer tout le header, garder juste les boutons + carte */
    .directory-map-head {
        display: none;
    }

    /* Boutons filtre carte : scroll horizontal */
    .directory-map-tools {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .directory-map-tools::-webkit-scrollbar { display: none; }

    /* Filtres rapides : scroll horizontal (1 ligne propre) */
    .directory-theme-options {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
        gap: 8px;
    }

    .directory-theme-options::-webkit-scrollbar { display: none; }

    .directory-check,
    .directory-theme-pill {
        flex: 0 0 auto;
    }

    .directory-check span,
    .directory-theme-pill span {
        white-space: nowrap;
    }

    /* Carte : titre seul, compact */
    .directory-map-head {
        margin-bottom: 10px;
    }

    .directory-filters-card {
        padding: 18px;
    }

    .directory-filters {
        gap: 14px;
    }

    .directory-search-main,
    .directory-advanced-grid {
        grid-template-columns: 1fr;
    }

    .directory-submit-field {
        width: 100%;
    }

    .directory-submit-field .btn-search {
        width: 100%;
    }

    .directory-results-bar {
        align-items: flex-start;
    }

    .directory-map-head {
        flex-direction: column;
    }

    /* Carte pleine largeur sur mobile : retirer le cadre blanc */
    .directory-map-panel {
        background: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    .directory-map-tools {
        padding: 0 4% 10px;
    }

    .directory-map {
        height: 360px;
        min-height: 300px;
        border-radius: 0;
    }

    .directory-results-count {
        width: 100%;
    }

    .directory-reset-link-inline {
        margin-left: 0;
    }

    .directory-grid .card-head {
        flex-direction: column;
    }

    .camping-showcase,
    .camping-layout {
        grid-template-columns: 1fr;
    }

    .camping-showcase-media {
        min-height: 280px;
    }

    .camping-showcase-copy {
        padding: 26px 22px;
    }

    .camping-similar-grid {
        grid-template-columns: 1fr;
    }

    .camping-facts-grid,
    .camping-detail-grid {
        grid-template-columns: 1fr;
    }

    .camping-photo-grid {
        grid-template-columns: 1fr;
    }

    .camping-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .camping-action-bar-controls,
    .camping-rating-row {
        width: 100%;
        justify-content: flex-start;
    }

    .camping-action-bar-header {
        align-items: center;
    }

    .camping-rating-head {
        width: 100%;
        align-items: flex-start;
    }

    .camping-rating-row {
        flex-direction: column;
        align-items: stretch;
    }

    .camping-rating-panel-compact {
        flex-basis: 100%;
    }

    .camping-review-head {
        flex-direction: column;
    }

    .camping-review-side {
        text-align: left;
    }

    .hero {
        padding: 40px 5% 34px;
        min-height: auto;
        border-radius: 0 0 24px 24px;
    }

    .hero::before {
        background: linear-gradient(180deg, rgba(7, 22, 27, 0.84) 0%, rgba(11, 38, 45, 0.72) 58%, rgba(13, 45, 53, 0.64) 100%);
    }

    .hero-media img {
        object-position: center top;
    }

    body.home-page .site-header {
        padding-top: 14px;
    }

    body.home-page .site-nav {
        width: auto;
        padding: 10px 12px;
        border-radius: 20px;
    }

    body.home-page .hero {
        padding-top: 130px;
    }

    .hero-text h1 {
        font-size: 2.05rem;
        line-height: 1.08;
        margin-bottom: 18px;
    }

    .hero-kicker {
        margin-bottom: 14px;
    }

    .hero-subtitle {
        margin-bottom: 18px;
    }

    .search-container {
        padding: 10px;
    }

    .search-container input {
        min-width: 0;
        width: 100%;
    }

    .search-container .btn-search {
        width: 100%;
        min-height: 48px;
    }

    .hero-benefits {
        margin-bottom: 18px;
    }

    .hero-emoji {
        font-size: 96px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 16px;
    }

    .hero-actions .btn-search.btn-link {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 15px 18px;
        font-size: 1rem;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
    }

    .hero-actions .hero-secondary-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-secondary-link-ghost {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .hero-reassurance {
        width: 100%;
        text-align: center;
        font-size: 0.95rem;
    }

    .hero-paths {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 18px;
    }

    .hero-path-card {
        padding: 14px 16px;
    }

    .home-community-section {
        width: calc(100% - 28px);
        max-width: 640px;
        margin-top: -18px;
        padding: 22px;
        border-radius: 18px;
    }

    .home-community-copy h2 {
        font-size: 1.55rem;
    }

    .home-community-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .home-community-actions .btn-search,
    .home-community-actions .home-section-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .home-community-grid {
        grid-template-columns: 1fr;
    }

    .home-community-item {
        min-height: auto;
    }

    .community-public-main {
        width: calc(100% - 28px);
        padding-top: 24px;
    }

    .community-public-hero,
    .community-public-cta {
        padding: 24px;
        border-radius: 20px;
    }

    .community-public-hero h1 {
        font-size: 2.25rem;
    }

    .community-public-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .community-public-actions .btn-search,
    .community-public-actions .home-section-link,
    .community-public-cta .btn-search {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .community-public-side {
        min-height: auto;
    }

    .hero-community-card {
        margin-top: 18px;
        padding: 18px 18px 16px;
        border-radius: 20px;
    }

    .hero-community-card h2 {
        font-size: 1.35rem;
        margin: 12px 0 8px;
    }

    .hero-community-card p {
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .hero-community-points {
        gap: 8px;
        margin-top: 14px;
    }

    .hero-community-points span {
        width: 100%;
        justify-content: center;
        padding: 11px 12px;
    }

    .hero-community-cta {
        padding: 14px;
    }

    .hero-signup-grid {
        grid-template-columns: 1fr;
    }

    .home-section-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-link-grid {
        grid-template-columns: 1fr;
    }

    .home-member-grid {
        grid-template-columns: 1fr;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .seo-hub-facts,
    .seo-hub-faq-list {
        grid-template-columns: 1fr;
    }

    .blog-hero,
    .article-card {
        padding: 0;
    }

    .blog-hero h1,
    .article-header h1 {
        font-size: 2.2rem;
    }

    .blog-hero {
        padding: 26px 22px;
    }

    .article-hero-visual,
    .article-hero-illustration {
        min-height: 260px;
    }

    .article-header-copy {
        margin: -34px 18px 0;
        padding: 22px 20px 22px;
        border-radius: 24px 24px 0 0;
    }

    .article-content {
        padding: 24px 22px 0;
    }

    .article-footer {
        padding: 18px 22px 26px;
    }

    .search-container {
        flex-direction: column;
    }

    .site-nav {
        width: 100%;
        justify-content: flex-start;
    }

    .nav-welcome {
        margin-left: 0;
    }

    .card-actions {
        flex-direction: column;
    }

    .card-action-group {
        justify-content: center;
    }

    .admin-panel {
        padding: 24px;
    }

    .manual-grid {
        grid-template-columns: 1fr;
    }

    .admin-relation-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .member-hero {
        padding: 28px 24px;
    }

    .community-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .community-main,
    .community-sidebar {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .community-main {
        order: 1;
    }

    .community-sidebar {
        order: 2;
    }

    .community-card,
    .community-hero {
        padding: 24px;
    }

    .onboarding-score {
        width: 100%;
        box-sizing: border-box;
    }

    .onboarding-step {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start;
    }

    .onboarding-step-link,
    .onboarding-step-status {
        grid-column: 2;
        justify-self: flex-start;
    }

    .post-header,
    .member-list-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .community-hero {
        align-items: flex-start;
    }

    .community-hero-actions {
        width: 100%;
    }

    .community-hero-actions .btn-search,
    .community-hero-actions .mini-action {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .community-hero-stats {
        justify-content: flex-start;
    }

    .member-tabs {
        display: none;
    }

    /* ── Barre de navigation mobile fixée en bas ── */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #e8eff0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        z-index: 500;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mobile-bottom-nav::-webkit-scrollbar { display: none; }

    .mbn-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 7px 2px 9px;
        text-decoration: none;
        color: #9aa5b4;
        position: relative;
        transition: color 0.15s;
    }

    .mbn-item.is-active { color: var(--orange, var(--orange, #1E3D6B)); }

    .mbn-icon  { width: 22px; height: 22px; flex-shrink: 0; }

    .mbn-label {
        font-size: 0.6rem;
        font-weight: 700;
        white-space: nowrap;
        letter-spacing: 0.01em;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .mbn-badge {
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translateX(4px);
        background: #e74c3c;
        color: #fff;
        border-radius: 999px;
        min-width: 16px;
        height: 16px;
        font-size: 0.6rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid #fff;
    }

    /* Page communauté : padding réduit sur mobile */
    .community-page {
        padding-top: 16px;
        padding-left: 4%;
        padding-right: 4%;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* Cards : padding et gap réduits */
    .community-card,
    .community-hero {
        padding: 20px;
    }

    .community-main,
    .community-sidebar,
    .community-feed {
        gap: 14px;
    }

    /* Hero : masqué sur mobile (info redondante) */
    .community-hero {
        display: none;
    }

    /* Page profil : sidebar (infos membre) avant les posts */
    .community-layout--profile .community-sidebar {
        order: 1;
    }
    .community-layout--profile .community-main {
        order: 2;
    }

    /* Sidebar fil : masquer la fiche perso (redondante sur le feed, mais PAS sur /profil) */
    .community-layout:not(.community-layout--profile) .community-sidebar .profile-card,
    .community-sidebar .sidebar-feed-link {
        display: none;
    }

    .community-sidebar .member-list .member-list-item:nth-child(n+4) {
        display: none;
    }

    /* Formulaire recherche membres : 1 colonne sur mobile */
    .member-search-row {
        grid-template-columns: 1fr;
    }

    .member-search-btn {
        width: 100%;
    }

    /* Grille membres : 2 colonnes fixes */
    .member-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Messagerie : compose actions scrollable */
    .message-compose-actions {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
}

.katho-member-page {
    margin: 0;
    background: #f6f8f7;
    color: #203735;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.katho-member-page * { box-sizing: border-box; }
.katho-member-page a { color: inherit; }
.katho-shell { width: min(100% - 40px, 1080px); margin-inline: auto; }
.katho-topbar { background: #163d38; color: #fff; }
.katho-topbar-inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.katho-wordmark { font-size: 1.35rem; font-weight: 750; text-decoration: none; }
.katho-account { display: flex; align-items: center; gap: 22px; min-width: 0; }
.katho-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.katho-account a { font-size: .88rem; text-underline-offset: 3px; }
.katho-nav-wrap { background: #fff; border-bottom: 1px solid #d8e2df; }
.katho-nav { display: flex; gap: 28px; overflow-x: auto; }
.katho-nav a { min-height: 52px; display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; color: #425c57; border-bottom: 3px solid transparent; }
.katho-nav a[aria-current="page"] { color: #12604e; border-bottom-color: #168065; font-weight: 700; }
.katho-main { padding-block: 28px 64px; }
.katho-main h1 { margin: 0 0 24px; font-size: 1.65rem; line-height: 1.2; }
.katho-main h2 { margin: 0 0 16px; font-size: 1.1rem; line-height: 1.35; }
.katho-main p { margin-top: 0; }
.katho-notice, .katho-error { padding: 12px 16px; margin-bottom: 20px; border-left: 3px solid #168065; background: #e8f5ef; }
.katho-error { border-left-color: #b94b39; background: #fff0eb; }
.katho-empty { color: #667b76; padding: 14px 0; }
.katho-member-page label { display: block; margin-bottom: 7px; font-weight: 650; }
.katho-member-page textarea, .katho-member-page input:not([type="hidden"]):not([type="file"]) {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #a8bbb5;
    border-radius: 4px;
    background: #fff;
    color: #203735;
    font: inherit;
}
.katho-member-page textarea { resize: vertical; min-height: 88px; }
.katho-member-page input[type="file"] { display: block; max-width: 100%; margin: 10px 0 16px; }
.katho-member-page button, .katho-secondary-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid #12604e;
    border-radius: 4px;
    background: #12604e;
    color: #fff;
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}
.katho-member-page button:hover { background: #0d4e40; }
.katho-secondary-button { background: #fff; color: #12604e; }
.katho-secondary-button:hover { background: #e7f2ed; }
.katho-member-page :focus-visible { outline: 3px solid #b65435; outline-offset: 2px; }
.katho-form-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.katho-compose { padding: 0 0 22px; border-bottom: 1px solid #d8e2df; }
.katho-feed { margin-top: 20px; display: grid; gap: 12px; }
.katho-post { padding: 18px 20px; background: #fff; border: 1px solid #dce5e1; border-radius: 4px; }
.katho-post-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.katho-post-heading div { min-width: 0; }
.katho-post-heading strong { display: block; }
.katho-post-heading span, .katho-post-heading time { color: #657a74; font-size: .85rem; }
.katho-post-heading time { flex: 0 0 auto; }
.katho-post p { margin-bottom: 0; overflow-wrap: anywhere; white-space: normal; }
.katho-post-actions { margin-top: 12px; }
.katho-member-page .katho-text-button { min-height: auto; padding: 0; border: 0; background: transparent; color: #a33e31; font-size: .9rem; }
.katho-member-page .katho-text-button:hover { background: transparent; text-decoration: underline; }
.katho-member-list { border-top: 1px solid #d8e2df; }
.katho-member-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid #d8e2df; }
.katho-member-avatar, .katho-profile-avatar { display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #d7ebe4; color: #12604e; font-weight: 700; }
.katho-member-avatar { width: 48px; height: 48px; }
.katho-member-avatar img, .katho-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.katho-member-details { min-width: 0; }
.katho-member-details h2 { margin: 0; }
.katho-member-details p { margin: 3px 0; }
.katho-member-details small { color: #657a74; }
.katho-member-details .katho-bio { margin-top: 8px; overflow-wrap: anywhere; }
.katho-requests { margin-bottom: 26px; }
.katho-request-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid #d8e2df; }
.katho-inline-actions { display: flex; gap: 8px; }
.katho-messages-layout { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 28px; }
.katho-conversation-list { border-right: 1px solid #d8e2df; padding-right: 20px; }
.katho-conversation-list a { display: block; padding: 12px; border-bottom: 1px solid #d8e2df; text-decoration: none; }
.katho-conversation-list a[aria-current="true"] { background: #e8f5ef; }
.katho-conversation-list strong { display: inline; }
.katho-conversation-list small { display: block; color: #657a74; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.katho-unread { display: inline-block; min-width: 20px; margin-left: 5px; padding-inline: 5px; border-radius: 9px; background: #ad5b3e; color: #fff; font-size: .7rem; text-align: center; }
.katho-thread { min-width: 0; }
.katho-message-list { display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow-y: auto; margin-bottom: 20px; }
.katho-message { width: fit-content; max-width: min(85%, 540px); padding: 10px 14px; background: #fff; border: 1px solid #dce5e1; border-radius: 4px; }
.katho-message.is-own { align-self: flex-end; background: #e8f5ef; border-color: #c4ded3; }
.katho-message p { margin: 0 0 4px; overflow-wrap: anywhere; }
.katho-message time { color: #657a74; font-size: .75rem; }
.katho-profile-layout { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 40px; }
.katho-profile-photo { border-right: 1px solid #d8e2df; padding-right: 32px; }
.katho-profile-avatar { width: 104px; height: 104px; margin-bottom: 20px; font-size: 2.5rem; }
.katho-profile-form form { max-width: 620px; }
.katho-profile-form input, .katho-profile-form textarea { margin-bottom: 18px; }
.katho-account-name { font-weight: 700; }

@media (max-width: 720px) {
    .katho-shell { width: min(100% - 28px, 1080px); }
    .katho-topbar-inner { min-height: 58px; }
    .katho-account { gap: 12px; font-size: .85rem; }
    .katho-nav { gap: 20px; }
    .katho-main { padding-top: 22px; }
    .katho-main h1 { font-size: 1.45rem; }
    .katho-post-heading { flex-wrap: wrap; gap: 3px 12px; }
    .katho-member-row { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
    .katho-member-avatar { width: 42px; height: 42px; }
    .katho-member-row > .katho-secondary-button { grid-column: 2; justify-self: start; }
    .katho-messages-layout, .katho-profile-layout { grid-template-columns: 1fr; gap: 24px; }
    .katho-conversation-list, .katho-profile-photo { border-right: 0; border-bottom: 1px solid #d8e2df; padding-right: 0; padding-bottom: 20px; }
    .katho-request-row { align-items: flex-start; flex-wrap: wrap; }
}

/* BANNIÈRE PRINCIPALE AVEC IMAGE */
.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #143e45;
    padding: 80px 5% 58px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-radius: 0 0 34px 34px;
    min-height: 480px;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(7, 22, 27, 0.78) 0%, rgba(11, 38, 45, 0.66) 48%, rgba(13, 45, 53, 0.48) 100%);
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body.home-page .hero {
    padding-top: 170px;
}

.hero-text {
    flex: 1;
    min-width: 300px;
    max-width: 1100px;
    color: white;
    position: relative;
    z-index: 2;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
    background: rgba(9, 24, 28, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-text h1 {
    font-size: 3.35rem;
    line-height: 1.05;
    max-width: 900px;
    margin: 0 0 18px;
    text-shadow: 0 10px 28px rgba(8, 18, 24, 0.35);
}

.hero-subtitle {
    font-size: 1.14rem;
    max-width: 720px;
    margin: 0 0 24px;
    line-height: 1.6;
    text-shadow: 0 6px 22px rgba(8, 18, 24, 0.28);
    color: #f6fffe;
}

.hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -4px 0 22px;
}

.hero-benefits span {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(10, 28, 32, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f5fffe;
    font-weight: 700;
    backdrop-filter: blur(6px);
}

.hero-emoji-block {
    flex: 1;
    text-align: center;
    min-width: 300px;
}

.hero-emoji {
    font-size: 150px;
}

/* BARRE DE RECHERCHE */
.search-container {
    background: white;
    padding: 12px;
    border-radius: 14px;
    display: flex;
    gap: 10px;
    max-width: 690px;
    margin-top: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    box-sizing: border-box;
}

.search-container input {
    border: none;
    padding: 12px 14px;
    flex: 1;
    font-size: 16px;
    outline: none;
    min-width: 220px;
    box-sizing: border-box;
}

.search-container-page {
    margin: 30px auto 0;
}

.btn-search {
    background: var(--orange, #1E3D6B);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
}

.btn-search:hover {
    background: var(--orange, #1E3D6B);
}

.hero-actions {
    display: flex;
    gap: 12px 16px;
    align-items: center;
    margin-top: 18px;
    flex-wrap: wrap;
}

.hero-secondary-link {
    color: white;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.hero-secondary-link-ghost {
    display: inline-flex;
    align-items: center;
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-decoration: none;
    box-sizing: border-box;
}

.hero-reassurance {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
}

.hero-paths {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 900px;
    margin-top: 24px;
}

.hero-path-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 44px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(9, 24, 28, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: transform 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.hero-path-card:hover {
    transform: translateY(-2px);
    background: rgba(9, 24, 28, 0.56);
}

.hero-path-card span {
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.92rem;
    font-weight: 700;
}

.hero-path-card strong {
    color: #fff;
    font-size: 1.02rem;
    line-height: 1.3;
}

.hero-community-card {
    margin-top: 22px;
    max-width: 760px;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(9, 24, 28, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(10px);
}

.hero-community-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #dffaf7;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hero-community-card h2 {
    margin: 14px 0 10px;
    font-size: 1.65rem;
    line-height: 1.2;
    color: #fff;
}

.hero-community-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.65;
    max-width: 680px;
}

.hero-community-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.hero-community-points span {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 700;
}

.hero-community-cta {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-community-cta strong {
    display: block;
    margin-bottom: 6px;
    color: #fff;
}

.hero-community-cta span {
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.55;
}

.hero-signup-reasons {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-signup-reasons strong {
    display: block;
    margin-bottom: 10px;
    color: #fff;
}

.hero-signup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hero-signup-grid span {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.94);
    font-weight: 600;
}

/* CARTES DE L'ANNUAIRE ET BLOG */
.home-community-section {
    width: min(1380px, 90%);
    margin: -26px auto 18px;
    padding: 30px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
    gap: 28px;
    align-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(47, 79, 79, 0.08);
    box-shadow: 0 22px 50px rgba(32, 57, 70, 0.1);
    position: relative;
    z-index: 5;
    box-sizing: border-box;
}

.home-community-copy h2 {
    margin: 12px 0 12px;
    max-width: 760px;
    font-size: 2rem;
    line-height: 1.16;
    color: var(--dark);
}

.home-community-copy p {
    margin: 0;
    max-width: 760px;
    color: #536873;
    line-height: 1.7;
    font-size: 1.03rem;
}

.home-community-actions {
    display: flex;
    align-items: center;
    gap: 14px 18px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.home-community-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.home-community-item {
    min-height: 112px;
    padding: 18px;
    border-radius: 14px;
    background: #f5fbfb;
    border: 1px solid rgba(47, 79, 79, 0.08);
    box-sizing: border-box;
}

.home-community-item--facebook {
    text-decoration: none;
    background: #eef4fe;
    border-color: rgba(24, 119, 242, 0.18);
    transition: background 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
}

.home-community-item--facebook:hover {
    background: #deeafd;
    transform: translateY(-2px);
}

.home-community-item--facebook strong {
    color: #1877f2;
}

.home-community-item strong {
    display: block;
    margin-bottom: 8px;
    color: var(--dark);
    font-size: 1.04rem;
}

.home-community-item span {
    color: #60717c;
    line-height: 1.55;
}

.home-members-section {
    padding: 24px 5% 8px;
}

.home-member-grid {
    max-width: 1380px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-member-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(47, 79, 79, 0.08);
    box-shadow: 0 14px 32px rgba(32, 57, 70, 0.07);
    text-decoration: none;
    color: var(--dark);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.home-member-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(32, 57, 70, 0.12);
}

.home-member-card-preview {
    cursor: default;
}

.home-member-card-preview:hover {
    transform: none;
    box-shadow: 0 14px 32px rgba(32, 57, 70, 0.07);
}

.home-member-avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, #e7f5f0, #f9ead9);
    color: #2f6f5b;
    font-weight: 800;
    font-size: 1.35rem;
}

.home-member-avatar-blurred {
    filter: blur(6px);
    opacity: 0.78;
    transform: scale(0.96);
}

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

.home-member-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.home-member-copy strong,
.home-member-copy span,
.home-member-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-member-copy strong {
    color: var(--dark);
    font-size: 1rem;
}

.home-member-copy span {
    color: #2f6f5b;
    font-weight: 700;
    font-size: 0.88rem;
}

.home-member-copy small {
    color: #60717c;
    font-size: 0.86rem;
}

.home-featured-section {
    padding: 42px 5% 12px;
}

.features {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 10px 0 24px;
    margin: 0 auto;
    flex-wrap: wrap;
    max-width: 1380px;
}

.home-directory-section {
    padding: 28px 5% 10px;
}

.home-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin: 0 auto 22px;
    max-width: 1380px;
}

.home-section-heading h2 {
    margin: 10px 0 8px;
    font-size: 2rem;
}

.home-section-heading p {
    margin: 0;
    max-width: 760px;
    line-height: 1.6;
    color: #5b677a;
}

.home-section-link {
    color: var(--dark);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.home-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 18px;
    flex-wrap: wrap;
}

.home-classifieds-cta {
    max-width: 1380px;
    margin: 0 auto 6px;
}

.home-classifieds-cta-text {
    margin: 0;
    max-width: 760px;
    line-height: 1.6;
    color: #5b677a;
}

.home-classifieds-cta-link {
    color: var(--orange, #1E3D6B);
    font-weight: 700;
    text-decoration: none;
}

.home-classifieds-cta-link:hover {
    text-decoration: underline;
}

.home-directory-grid {
    max-width: 1380px;
    margin: 0 auto;
}

.home-link-grid {
    max-width: 1380px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.home-link-card {
    background: #fff;
    border-radius: 22px;
    padding: 24px 24px 22px;
    text-decoration: none;
    color: var(--dark);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    border: 1px solid rgba(47, 79, 79, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-link-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0,0,0,0.1);
}

.home-link-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.home-link-card span {
    color: #60717c;
    line-height: 1.55;
}

.blog-page,
.article-page {
    padding: 36px 5% 80px;
}

.blog-hero,
.article-card {
    max-width: 1180px;
    margin: 0 auto 28px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(32, 57, 70, 0.08);
}

.blog-hero {
    padding: 34px 36px;
    background:
        radial-gradient(circle at top right, rgba(64, 224, 208, 0.18), transparent 34%),
        linear-gradient(140deg, rgba(255,255,255,0.98), rgba(242,250,251,0.94));
}

.blog-hero h1,
.article-header h1 {
    margin: 10px 0 12px;
    font-size: 3rem;
    line-height: 1.08;
}

.blog-hero p,
.article-intro,
.article-meta {
    color: #5b677a;
}

.blog-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.blog-grid-home {
    max-width: 1380px;
}

.blog-card {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(32, 57, 70, 0.08);
    border: 1px solid rgba(47, 79, 79, 0.06);
}

.blog-card-hero {
    min-height: 160px;
    padding: 28px 24px 22px;
    background:
        radial-gradient(circle at top right, rgba(64, 224, 208, 0.22), transparent 34%),
        linear-gradient(135deg, rgba(233, 255, 251, 0.95), rgba(242, 250, 251, 0.92));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
}

.blog-card-illustration {
    display: block;
    width: 100%;
    max-height: 156px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 16px 22px rgba(35, 65, 63, 0.12));
}

.blog-card-emoji {
    font-size: 2.4rem;
}

.blog-card-label {
    display: inline-flex;
    align-self: flex-start;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(21, 125, 112, 0.12);
    color: #157d70;
    font-weight: 700;
}

.blog-card-body {
    padding: 24px;
}

.blog-card-meta {
    margin: 0 0 10px;
    color: #6b7f89;
    font-size: 0.9rem;
    font-weight: 700;
}

.blog-card h2,
.blog-card h3 {
    margin: 0 0 12px;
    font-size: 1.35rem;
    line-height: 1.28;
}

.blog-card h2 a,
.blog-card h3 a {
    color: var(--dark);
    text-decoration: none;
}

.blog-card-body p {
    color: #60717c;
    line-height: 1.65;
}

.article-card {
    padding: 0;
    overflow: hidden;
}

.article-header {
    position: relative;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf2f3;
}

.article-hero-emoji {
    font-size: 3rem;
    margin: 18px 0 6px;
}

.article-hero-visual {
    position: relative;
    min-height: 460px;
    background: #deebe7;
    overflow: hidden;
}

.article-hero-illustration {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 460px;
    object-fit: cover;
    object-position: center;
}

.article-hero-scrim {
    position: absolute;
    inset: auto 0 0 0;
    height: 44%;
    background: linear-gradient(180deg, rgba(17, 31, 35, 0) 0%, rgba(17, 31, 35, 0.14) 34%, rgba(17, 31, 35, 0.54) 100%);
    pointer-events: none;
}

.article-header-copy {
    position: relative;
    z-index: 1;
    margin: -78px 36px 0;
    padding: 28px 30px 30px;
    border-radius: 30px 30px 0 0;
    background: linear-gradient(180deg, rgba(252, 255, 254, 0.985), rgba(245, 251, 250, 0.965));
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.32), 0 24px 40px rgba(17, 36, 40, 0.12);
}

.article-meta {
    margin: 0 0 16px;
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.01em;
}

.article-intro {
    margin: 0;
    max-width: 980px;
    font-size: 1.12rem;
    line-height: 1.8;
}

.article-content {
    padding: 28px 36px 0;
}

.article-section + .article-section {
    margin-top: 28px;
}

.article-section h2 {
    margin: 0 0 14px;
    font-size: 1.55rem;
    line-height: 1.18;
}

.article-section p {
    margin: 0 0 14px;
    color: #405660;
    font-size: 1.02rem;
    line-height: 1.9;
}

.article-section-links {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.article-section-links li {
    margin: 0;
}

.article-section-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--orange, #1E3D6B);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 79, 41, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.article-section-links a::before {
    content: "→";
    font-weight: 700;
    opacity: 0.75;
}

.article-section-links a:hover {
    color: var(--orange, #1E3D6B);
    border-bottom-color: var(--orange, #1E3D6B);
}

.article-footer {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px 36px 34px;
}

.share-panel {
    margin: 10px 36px 0;
    padding: 20px 22px;
    border-radius: 22px;
    background: #f7fbfc;
    border: 1px solid rgba(55, 90, 98, 0.1);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.share-panel-compact {
    margin: 16px 0 0;
    padding: 14px 0 0;
    border: 0;
    border-top: 1px solid rgba(55, 90, 98, 0.14);
    border-radius: 0;
    background: transparent;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
}

.share-panel-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.share-panel-copy strong {
    color: #29414a;
    font-size: 1rem;
}

.share-panel-copy span {
    color: #5d7680;
    font-size: 0.95rem;
}

.share-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.share-panel-compact .share-panel-copy span {
    display: none;
}

.share-panel-compact .share-panel-copy strong {
    font-size: 0.96rem;
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: #eef5f7;
    border: 1px solid rgba(70, 108, 117, 0.12);
    color: #35525c;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.share-button-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
}

.share-button-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.share-button:hover {
    background: #e4eef1;
    border-color: rgba(70, 108, 117, 0.2);
    transform: translateY(-1px);
}

.share-button-copy.is-copied {
    background: rgba(85, 190, 178, 0.16);
    border-color: rgba(85, 190, 178, 0.42);
    color: #1f6d57;
}

.share-button-copy {
    appearance: none;
    -webkit-appearance: none;
}

.selection-page {
    padding-top: 28px;
}

.selection-page .camping-breadcrumbs {
    max-width: 1320px;
}

.selection-hero {
    max-width: 1320px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(47, 79, 79, 0.09);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(242, 250, 247, 0.95) 58%, rgba(255, 248, 241, 0.9));
    box-shadow: 0 24px 70px rgba(24, 54, 60, 0.11);
}

.selection-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 28px;
    align-items: stretch;
    padding: clamp(30px, 5vw, 58px);
}

.selection-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.selection-hero h1 {
    max-width: 880px;
    margin-top: 14px;
    font-size: clamp(2.35rem, 5vw, 4.35rem);
    line-height: 1.02;
}

.selection-hero p {
    max-width: 840px;
    font-size: 1.08rem;
    line-height: 1.76;
}

.seo-hub-hero .seo-hub-paragraph {
    max-width: 840px;
    margin: 12px 0 0;
    color: #5b677a;
    line-height: 1.76;
}

.seo-hub-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.selection-hero-panel {
    align-self: center;
    padding: 22px;
    border: 1px solid rgba(70, 108, 117, 0.12);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 18px 44px rgba(24, 56, 64, 0.08);
    backdrop-filter: blur(14px);
}

.selection-panel-label {
    display: block;
    margin: 0 0 14px;
    color: #294b4d;
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
}

.seo-hub-related-links {
    max-width: 1320px;
    margin: 0 auto;
}

.seo-hub-section {
    padding-top: 0;
}

.selection-page .seo-hub-section {
    padding-bottom: 26px;
}

.selection-page .home-section-heading {
    max-width: 1320px;
    align-items: flex-start;
    padding-top: 6px;
    border-top: 1px solid rgba(70, 108, 117, 0.12);
}

.selection-page .home-section-heading h2 {
    margin-top: 12px;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.08;
}

.seo-hub-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0;
}

.seo-hub-fact {
    display: grid;
    grid-template-columns: minmax(92px, 0.45fr) minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid rgba(70, 108, 117, 0.12);
}

.seo-hub-fact:last-child {
    border-bottom: 0;
}

.seo-hub-fact dt {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 900;
    color: #6a7688;
    text-transform: uppercase;
}

.seo-hub-fact dd {
    margin: 0;
    color: #294b4d;
    font-weight: 900;
    line-height: 1.32;
}

.seo-hub-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    max-width: 1320px;
    margin: 0 auto;
}

.seo-hub-choice-card {
    position: relative;
    display: flex;
    min-height: 232px;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border: 1px solid rgba(70, 108, 117, 0.12);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 251, 0.98));
    color: #294b4d;
    text-decoration: none;
    box-shadow: 0 18px 46px rgba(24, 56, 64, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.seo-hub-choice-card::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #4A6B5A, var(--orange, #1E3D6B));
}

.seo-hub-choice-card:hover {
    transform: translateY(-4px);
    border-color: rgba(210, 91, 51, 0.24);
    box-shadow: 0 24px 58px rgba(24, 56, 64, 0.13);
}

.seo-hub-choice-label {
    align-self: flex-start;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(42, 122, 110, 0.12);
    color: #1f6d57;
    font-size: 0.78rem;
    font-weight: 900;
}

.seo-hub-choice-card strong {
    color: #213c3f;
    font-size: 1.24rem;
    line-height: 1.16;
}

.seo-hub-choice-card small {
    color: #5f7983;
    font-weight: 850;
    line-height: 1.35;
}

.seo-hub-choice-card p {
    margin: auto 0 0;
    color: #5b677a;
    line-height: 1.62;
}

.seo-hub-map-panel {
    max-width: 1320px;
    margin-top: 0;
    box-shadow: 0 22px 58px rgba(24, 56, 64, 0.09);
}

.seo-hub-map-panel .directory-map {
    height: min(52vh, 560px);
}

.selection-page .home-directory-grid {
    max-width: 1320px;
}

.seo-hub-faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 1320px;
    margin: 0 auto;
}

.seo-hub-faq-item {
    padding: 24px;
    border: 1px solid rgba(70, 108, 117, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 42px rgba(24, 56, 64, 0.07);
}

.seo-hub-faq-item h3 {
    margin: 0 0 10px;
    color: #294b4d;
    font-size: 1.1rem;
    line-height: 1.25;
}

.seo-hub-faq-item p {
    margin: 0;
    color: #5b677a;
    line-height: 1.68;
}

.card {
    background: white;
    padding: 40px 30px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    width: 320px;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.card-entierement-cliquable {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.card-entierement-cliquable:focus-visible {
    outline: 3px solid rgba(239, 134, 84, 0.65);
    outline-offset: 4px;
}

body.site-theme-night .card,
body.site-theme-night .login-card,
body.site-theme-night .directory-hero,
body.site-theme-night .directory-filters-card,
body.site-theme-night .directory-stat-card,
body.site-theme-night .camping-showcase-copy,
body.site-theme-night .camping-showcase-media,
body.site-theme-night .camping-section-card,
body.site-theme-night .camping-side-card,
body.site-theme-night .search-container {
    background: rgba(23, 39, 44, 0.92);
    border: 1px solid rgba(110, 154, 152, 0.14);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

body.site-theme-night .directory-page,
body.site-theme-night .camping-page,
body.site-theme-night .login-page {
    color: #deecea;
}

body.site-theme-night .card h3 {
    color: #7ed8cf;
}

body.site-theme-night .card-title,
body.site-theme-night .card-title-link,
body.site-theme-night .directory-hero-copy h1,
body.site-theme-night .camping-showcase-copy h1,
body.site-theme-night .camping-section-card h2,
body.site-theme-night .camping-faq-item h3,
body.site-theme-night .login-card h1,
body.site-theme-night .field-label {
    color: #eef8f7;
}

body.site-theme-night .card-meta,
body.site-theme-night .card-rating,
body.site-theme-night .card-description,
body.site-theme-night .directory-hero-copy p,
body.site-theme-night .directory-results-bar,
body.site-theme-night .camping-hero-location,
body.site-theme-night .camping-hero-meta-line,
body.site-theme-night .camping-story,
body.site-theme-night .camping-detail-card p,
body.site-theme-night .camping-highlights-list,
body.site-theme-night .camping-breadcrumbs,
body.site-theme-night .camping-back-link,
body.site-theme-night .camping-faq-item p,
body.site-theme-night .share-panel-copy span,
body.site-theme-night .login-card p,
body.site-theme-night .form-switch-text,
body.site-theme-night .auth-helper-links,
body.site-theme-night .link-button {
    color: #b9cfcd;
}

body.site-theme-night .card-distance {
    background: rgba(85, 190, 178, 0.14);
    color: #8fe7dc;
}

body.site-theme-night .checkbox-label {
    color: #eef8f7;
}

body.site-theme-night .camping-faq-item,
body.site-theme-night .camping-fact,
body.site-theme-night .camping-detail-card,
body.site-theme-night .camping-location-card,
body.site-theme-night .share-panel {
    background: rgba(14, 27, 31, 0.7);
}

body.site-theme-night .camping-hero-summary,
body.site-theme-night .camping-action-bar,
body.site-theme-night .fiche-meteo-widget {
    background: rgba(14, 27, 31, 0.78);
    border-color: rgba(110, 154, 152, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.site-theme-night .camping-hero-summary li {
    color: #d5e7e4;
}

body.site-theme-night .camping-summary-label,
body.site-theme-night .fiche-meteo-loading,
body.site-theme-night .fiche-meteo-error {
    color: #8fb7b2;
}

body.site-theme-night .fiche-meteo-current {
    border-bottom-color: rgba(110, 154, 152, 0.18);
}

body.site-theme-night .fiche-meteo-now-temp,
body.site-theme-night .fiche-meteo-day-temps,
body.site-theme-night .fiche-meteo-day-temps strong {
    color: #eef8f7;
}

body.site-theme-night .fiche-meteo-now-wind,
body.site-theme-night .fiche-meteo-day {
    background: rgba(255, 255, 255, 0.08);
    color: #d5e7e4;
}

body.site-theme-night .fiche-meteo-day:hover {
    background: rgba(255, 255, 255, 0.12);
}

body.site-theme-night .fiche-meteo-day-label {
    color: #9ad7cc;
}

body.site-theme-night .fiche-meteo-day-min,
body.site-theme-night .fiche-meteo-day-rain,
body.site-theme-night .fiche-meteo-source,
body.site-theme-night .fiche-meteo-source a {
    color: #8fb7b2;
}

body.site-theme-night .camping-location-card {
    border-color: rgba(110, 154, 152, 0.18);
}

body.site-theme-night .camping-action-bar-copy strong {
    color: #eef8f7;
}

body.site-theme-night .camping-action-bar-copy span {
    color: #b9cfcd;
}

body.site-theme-night .camping-member-card,
body.site-theme-night .camping-rating-panel-compact,
body.site-theme-night .camping-propose-card {
    background: rgba(14, 27, 31, 0.78);
    border-color: rgba(110, 154, 152, 0.18);
}

body.site-theme-night .camping-favorite-star {
    background: rgba(19, 35, 40, 0.94);
    border-color: rgba(117, 165, 163, 0.24);
    color: #8fb7b2;
}

body.site-theme-night .camping-favorite-star.is-active {
    background: rgba(255, 190, 82, 0.14);
    border-color: rgba(255, 190, 82, 0.42);
    color: #ffc55f;
}

body.site-theme-night .camping-member-card-copy,
body.site-theme-night .camping-rating-title,
body.site-theme-night .camping-propose-card strong {
    color: #d5e7e4;
}

body.site-theme-night .camping-rating-help,
body.site-theme-night .camping-rating-hint,
body.site-theme-night .camping-rating-inline-label,
body.site-theme-night .camping-propose-card span {
    color: #8fb7b2;
}

body.site-theme-night .camping-member-card-label {
    color: #8fb7b2;
}

body.site-theme-night .camping-rating-star-label {
    color: #49666a;
}

body.site-theme-night .camping-rating-star-label:hover,
body.site-theme-night .camping-rating-star-label:hover ~ .camping-rating-star-label,
body.site-theme-night .camping-rating-star-input:checked ~ .camping-rating-star-label {
    color: #ffc55f;
}

body.site-theme-night .camping-review-card {
    background: rgba(14, 27, 31, 0.78);
    border-color: rgba(110, 154, 152, 0.18);
}

body.site-theme-night .camping-review-card strong,
body.site-theme-night .camping-review-text,
body.site-theme-night .camping-reviews-summary {
    color: #d5e7e4;
}

body.site-theme-night .camping-review-meta,
body.site-theme-night .camping-review-date {
    color: #8fb7b2;
}

body.site-theme-night .camping-review-rating {
    background: rgba(85, 190, 178, 0.14);
    color: #eef8f7;
}

body.site-theme-night .camping-location-card-head strong {
    color: #eef8f7;
}

body.site-theme-night .camping-location-card-head span {
    color: #b9cfcd;
}

body.site-theme-night .camping-location-map {
    border-color: rgba(110, 154, 152, 0.18);
}

body.site-theme-night .share-panel-copy strong,
body.site-theme-night .share-button {
    color: #eef8f7;
}

body.site-theme-night .share-button {
    background: rgba(23, 39, 44, 0.88);
    border-color: rgba(110, 154, 152, 0.18);
}

body.site-theme-night .share-button:hover {
    background: rgba(33, 54, 60, 0.96);
}

body.site-theme-night .directory-filters input,
body.site-theme-night .directory-filters select,
body.site-theme-night .login-input,
body.site-theme-night .camping-review-textarea,
body.site-theme-night .rating-select {
    background: rgba(11, 21, 24, 0.84);
    color: #eef8f7;
    border-color: rgba(117, 165, 163, 0.22);
}

body.site-theme-night .directory-check span,
body.site-theme-night .directory-filter-label,
body.site-theme-night .directory-theme-pill span,
body.site-theme-night .directory-reset-link,
body.site-theme-night .directory-advanced-summary,
body.site-theme-night .directory-advanced-summary strong,
body.site-theme-night .directory-advanced-summary small,
body.site-theme-night .home-section-heading p,
body.site-theme-night .home-classifieds-cta-text,
body.site-theme-night .home-link-card span,
body.site-theme-night .home-member-copy small {
    color: #dceceb;
}

body.site-theme-night .home-link-card,
body.site-theme-night .home-member-card {
    background: rgba(23, 39, 44, 0.92);
    border-color: rgba(110, 154, 152, 0.14);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
    color: #eef8f7;
}

body.site-theme-night .home-member-copy strong {
    color: #eef8f7;
}

body.site-theme-night .home-member-copy span {
    color: #a7e0d0;
}

body.site-theme-night .home-member-avatar {
    background: linear-gradient(135deg, rgba(55, 110, 97, 0.8), rgba(136, 101, 65, 0.72));
    color: #eef8f7;
}

body.site-theme-night .home-community-section {
    background: rgba(23, 39, 44, 0.94);
    border-color: rgba(110, 154, 152, 0.14);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
}

body.site-theme-night .home-community-copy h2,
body.site-theme-night .home-community-item strong {
    color: #eef8f7;
}

body.site-theme-night .home-community-copy p,
body.site-theme-night .home-community-item span {
    color: #dceceb;
}

body.site-theme-night .home-community-item {
    background: rgba(14, 27, 31, 0.64);
    border-color: rgba(110, 154, 152, 0.14);
}

body.site-theme-night .home-section-link {
    color: #eef8f7;
}

body.site-theme-night .blog-hero,
body.site-theme-night .blog-card,
body.site-theme-night .article-card {
    background: rgba(23, 39, 44, 0.92);
    border: 1px solid rgba(110, 154, 152, 0.14);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

body.site-theme-night .blog-hero {
    background:
        radial-gradient(circle at top right, rgba(69, 155, 148, 0.14), transparent 34%),
        linear-gradient(140deg, rgba(23, 39, 44, 0.96), rgba(19, 33, 37, 0.92));
}

body.site-theme-night .blog-hero h1,
body.site-theme-night .article-header h1,
body.site-theme-night .blog-card h2 a,
body.site-theme-night .blog-card h3 a,
body.site-theme-night .article-section h2 {
    color: #eef8f7;
}

body.site-theme-night .blog-hero p,
body.site-theme-night .blog-card-meta,
body.site-theme-night .blog-card-body p,
body.site-theme-night .article-meta,
body.site-theme-night .article-intro,
body.site-theme-night .article-section p,
body.site-theme-night .seo-hub-hero .seo-hub-paragraph {
    color: #c7d8d6;
}

body.site-theme-night .article-section-links a {
    color: #f0906d;
    border-bottom-color: rgba(240, 144, 109, 0.4);
}

body.site-theme-night .article-section-links a:hover {
    color: #f6a888;
    border-bottom-color: #f6a888;
}

body.site-theme-night .seo-hub-fact,
body.site-theme-night .seo-hub-choice-card,
body.site-theme-night .seo-hub-faq-item {
    background: rgba(14, 27, 31, 0.72);
    border-color: rgba(110, 154, 152, 0.16);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

body.site-theme-night .seo-hub-fact dt,
body.site-theme-night .seo-hub-choice-card p,
body.site-theme-night .seo-hub-choice-card small,
body.site-theme-night .seo-hub-faq-item p {
    color: #c7d8d6;
}

body.site-theme-night .seo-hub-fact dd,
body.site-theme-night .seo-hub-choice-card strong,
body.site-theme-night .seo-hub-faq-item h3 {
    color: #eef8f7;
}

body.site-theme-night .seo-hub-choice-label {
    background: rgba(85, 190, 178, 0.14);
    color: #8fe7dc;
}

body.site-theme-night .blog-card-hero {
    background:
        radial-gradient(circle at top right, rgba(69, 155, 148, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(29, 50, 55, 0.95), rgba(24, 41, 46, 0.92));
}

body.site-theme-night .blog-card-label {
    background: rgba(85, 190, 178, 0.14);
    color: #8fe7dc;
}

body.site-theme-night .article-header {
    border-bottom-color: rgba(123, 170, 168, 0.16);
}

body.site-theme-night .article-header-copy {
    background: linear-gradient(180deg, rgba(21, 34, 38, 0.96), rgba(20, 32, 36, 0.985));
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04), 0 26px 44px rgba(0, 0, 0, 0.24);
}

.card h3 {
    color: var(--teal, #4A6B5A);
    margin-top: 20px;
    font-size: 1.5rem;
}

.icon {
    font-size: 50px;
}

.home-cta-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.home-cta-card p {
    margin: 0;
    color: #60717c;
    line-height: 1.6;
}

.home-cta-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

body.site-theme-night .home-cta-card p {
    color: #dceceb;
}

.card-image-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 15px;
}

.card-image {
    width: 100%;
    height: 100%;
    object-position: center;
}

.card-image--cover {
    object-fit: cover;
}

.card-image--contain {
    object-fit: contain;
    background: #f5f7f4;
}

.card-image--fallback {
    background:
        radial-gradient(circle at top right, rgba(241, 217, 154, 0.2), transparent 28%),
        linear-gradient(135deg, #edf2ea 0%, #eef4f1 52%, #e4f0ef 100%);
    padding: 16px;
}

.card-image-placeholder {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at top right, rgba(241, 217, 154, 0.28), transparent 28%),
        linear-gradient(135deg, #edf2ea 0%, #eef4f1 52%, #e4f0ef 100%);
}

.card-title {
    margin: 10px 0;
}

.card-meta {
    color: var(--teal, #4A6B5A);
    font-weight: bold;
    margin-bottom: 5px;
}

.card-distance {
    display: inline-flex;
    align-items: center;
    margin: 8px 0 0;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(85, 190, 178, 0.12);
    color: #1f6d57;
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.2;
}

.card-rating {
    margin: 12px 0;
    color: #5b677a;
    font-size: 0.92rem;
}

.card-rating strong {
    color: var(--dark);
}

.card-description {
    font-size: 0.9rem;
    color: #666;
    margin: 15px 0;
    min-height: 45px;
}

.card-services {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.card-footer {
    border-top: 1px solid #eee;
    margin-top: 15px;
    padding-top: 15px;
}

.card-updated {
    margin: 0 0 10px;
    color: #718287;
    font-size: 0.82rem;
}

.content-page {
    width: min(920px, calc(100% - 32px));
    margin: 0 auto;
    padding: 36px 0 12px;
}

.content-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(222, 232, 232, 0.96);
    border-radius: 28px;
    padding: 32px;
    box-shadow: 0 26px 50px rgba(31, 58, 60, 0.08);
}

.content-card h1 {
    margin-top: 0;
    margin-bottom: 12px;
}

.content-intro {
    color: #617277;
    font-size: 1.02rem;
    line-height: 1.7;
    margin-bottom: 24px;
}

.content-section + .content-section {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid #edf2f1;
}

.content-section h2 {
    margin: 0 0 10px;
}

.content-section p,
.content-section li {
    color: #44565b;
    line-height: 1.75;
}

.content-section ul {
    padding-left: 20px;
    margin: 12px 0 0;
}

.content-card a {
    color: var(--orange, #1E3D6B);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 79, 41, 0.4);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.content-card a:hover,
.content-card a:focus {
    color: var(--orange, #1E3D6B);
    border-bottom-color: var(--orange, #1E3D6B);
}

.contact-form {
    display: grid;
    gap: 12px;
}

.contact-textarea {
    min-height: 180px;
    resize: vertical;
}

.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body.site-theme-night .content-card {
    background: rgba(20, 34, 39, 0.9);
    border-color: rgba(102, 145, 145, 0.18);
    box-shadow: 0 28px 52px rgba(0, 0, 0, 0.28);
}

body.site-theme-night .content-intro,
body.site-theme-night .content-section p,
body.site-theme-night .content-section li {
    color: #d8e7e4;
}

body.site-theme-night .content-section + .content-section {
    border-top-color: rgba(102, 145, 145, 0.16);
}

body.site-theme-night .content-card a {
    color: #f0a07e;
    border-bottom-color: rgba(240, 160, 126, 0.4);
}

body.site-theme-night .content-card a:hover,
body.site-theme-night .content-card a:focus {
    color: #ffb897;
    border-bottom-color: #ffb897;
}

.community-public-main {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    padding: 42px 0 8px;
}

.community-public-hero,
.community-public-cta {
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(64, 224, 208, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 251, 251, 0.96));
    border: 1px solid rgba(47, 79, 79, 0.08);
    box-shadow: 0 26px 56px rgba(31, 58, 60, 0.1);
}

.community-public-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
    gap: 28px;
    align-items: stretch;
    padding: 42px;
}

.community-public-hero h1,
.community-public-cta h2 {
    margin: 12px 0 14px;
    color: var(--dark);
    line-height: 1.08;
}

.community-public-hero h1 {
    max-width: 820px;
    font-size: clamp(2.2rem, 5vw, 4.7rem);
}

.community-public-hero p,
.community-public-side span,
.community-public-cta p,
.community-feature-card p {
    color: #536873;
    line-height: 1.7;
}

.community-public-hero p {
    max-width: 760px;
    font-size: 1.08rem;
}

.community-public-actions {
    display: flex;
    align-items: center;
    gap: 14px 18px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.community-public-side {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 240px;
    padding: 24px;
    border-radius: 22px;
    background: rgba(47, 79, 79, 0.08);
}

.community-public-side strong {
    margin-bottom: 10px;
    color: var(--dark);
    font-size: 1.3rem;
}

.community-public-section {
    margin-top: 46px;
}

.community-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.community-feature-card {
    min-height: 150px;
    padding: 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(47, 79, 79, 0.08);
    box-shadow: 0 18px 38px rgba(31, 58, 60, 0.07);
}

.community-feature-card p {
    margin: 0;
    font-weight: 600;
}

.community-public-cta {
    margin-top: 48px;
    padding: 32px;
    text-align: center;
}

.community-public-cta p {
    max-width: 720px;
    margin: 0 auto 22px;
}

body.site-theme-night .community-public-hero,
body.site-theme-night .community-public-cta,
body.site-theme-night .community-feature-card {
    background: rgba(23, 39, 44, 0.92);
    border-color: rgba(110, 154, 152, 0.14);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
}

body.site-theme-night .community-public-hero h1,
body.site-theme-night .community-public-side strong,
body.site-theme-night .community-public-cta h2 {
    color: #eef8f7;
}

body.site-theme-night .community-public-hero p,
body.site-theme-night .community-public-side span,
body.site-theme-night .community-public-cta p,
body.site-theme-night .community-feature-card p {
    color: #dceceb;
}

body.site-theme-night .community-public-side {
    background: rgba(14, 27, 31, 0.64);
}

.card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.card-action-group {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.rating-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rating-select {
    border: 1px solid #c8d2e1;
    border-radius: 999px;
    padding: 8px 12px;
    background: white;
    color: var(--dark);
    font-size: 0.85rem;
}

.card-price {
    font-weight: bold;
    color: var(--dark);
}

.card-button,
.coming-soon-link {
    color: var(--orange, #1E3D6B);
    font-weight: bold;
    text-decoration: none;
}

.card-button {
    background: var(--orange, #1E3D6B);
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.favorite-button {
    border: 1px solid #ffd1c3;
    background: #fff7f3;
    color: var(--orange, #1E3D6B) !important;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
}

.favorite-button.is-active {
    background: var(--orange, #1E3D6B);
    color: #fff !important;
    border-color: var(--orange, #1E3D6B);
}

.card-cta-wrap {
    position: relative;
    margin-bottom: 10px;
}

.card-cta-main {
    display: flex !important;
    width: 100%;
    justify-content: center;
}

.card-fav-photo-form {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.card-icon-btn--photo {
    background: rgba(255,255,255,0.85);
    border: none;
    backdrop-filter: blur(4px);
    color: var(--orange, #1E3D6B);
}

.card-icon-btn--photo.is-active {
    background: rgba(255,255,255,0.95);
    color: var(--orange, #1E3D6B);
}

.card-site-row {
    text-align: center;
}

.card-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #ffd1c3;
    background: #fff7f3;
    color: var(--orange, #1E3D6B);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    padding: 0;
    text-decoration: none;
}

.card-icon-btn.is-active {
    background: var(--orange, #1E3D6B);
    color: white;
    border-color: var(--orange, #1E3D6B);
}

.card-ext-link {
    color: #5f7983;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card-ext-link:hover { color: var(--dark); }

.card-rating-stars {
    color: #e8a020;
    font-weight: 700;
    margin-right: 4px;
}

.card-rating-count {
    color: #7a9097;
    font-size: 0.82rem;
}

.center-cta {
    text-align: center;
    margin: 40px 0;
}

.btn-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.page-intro {
    padding: 50px 5%;
    text-align: center;
}

.search-result-text {
    margin-top: 20px;
    color: #666;
}

.member-promo-text {
    margin-top: 18px;
    color: #5b677a;
}

.member-promo-text a,
.form-switch-text a {
    color: var(--orange, #1E3D6B);
    font-weight: bold;
    text-decoration: none;
}

.community-anon-section {
    margin-top: 28px;
}

.community-anon-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.community-anon-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
    border-radius: 14px;
    background: #eef5ff;
    border: 1px solid #d0e3ff;
}

.community-anon-item strong {
    font-size: 0.97rem;
    color: #1a3a5c;
}

.community-anon-item span {
    font-size: 0.87rem;
    color: #3d5a80;
    line-height: 1.5;
}

body.site-theme-night .community-anon-item {
    background: rgba(20, 40, 70, 0.55);
    border-color: rgba(80, 130, 200, 0.18);
}

body.site-theme-night .community-anon-item strong {
    color: #c8deff;
}

body.site-theme-night .community-anon-item span {
    color: #90b4e0;
}

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

.features-listing {
    margin-top: 0;
}

.directory-page {
    padding: 36px 5% 80px;
}

.directory-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.directory-hero-copy,
.directory-filters-card,
.directory-empty-state {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(32, 57, 70, 0.08);
}

.directory-hero-copy {
    padding: 34px 36px;
    background:
        radial-gradient(circle at top right, rgba(64, 224, 208, 0.18), transparent 34%),
        linear-gradient(140deg, rgba(255,255,255,0.98), rgba(242,250,251,0.94));
}

.directory-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: #e9fffb;
    color: #157d70;
    font-weight: 700;
    margin-bottom: 14px;
}

.directory-hero-copy h1 {
    margin: 0 0 14px;
    font-size: 3rem;
    line-height: 1.05;
}

.directory-hero-copy p {
    margin: 0;
    max-width: 780px;
    color: #56707a;
    font-size: 1.05rem;
    line-height: 1.7;
}

.directory-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.directory-hero-link {
    color: #35535d;
    font-weight: 800;
    text-decoration: none;
}

.directory-hero-link:hover {
    color: var(--orange, #1E3D6B);
}

.directory-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.directory-stat-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(240,248,249,0.95));
    border-radius: 24px;
    padding: 28px 20px;
    box-shadow: 0 14px 34px rgba(32, 57, 70, 0.07);
}

.directory-stat-card strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 10px;
}

.directory-stat-card span {
    color: #637984;
    font-weight: 600;
}

.directory-map-panel {
    width: 100%;
    max-width: 1180px;
    margin: 18px auto 0;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(32, 57, 70, 0.08);
    padding: 22px;
    scroll-margin-top: 120px;
}

.directory-map-panel.seo-hub-map-panel {
    max-width: 1380px;
    margin-top: 0;
}

.directory-map-panel:focus {
    outline: none;
}

.directory-map-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.directory-map-head strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.05rem;
}

.directory-map-head p,
.directory-map-count {
    margin: 0;
    color: #5f7582;
}

.directory-map-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}

.directory-map-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #d8e5e3;
    background: #ffffff;
    color: #334a4f;
    border-radius: 999px;
    padding: 8px 12px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.directory-map-filter strong {
    color: #5f7582;
    font-size: 0.9rem;
}

.directory-map-filter.is-active {
    border-color: #2f8f6f;
    background: #e9f8f2;
    color: #25484a;
}

.directory-map-filter:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.directory-map-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(51, 74, 79, 0.22);
}

.directory-map-dot-all {
    background: linear-gradient(90deg, #2f8f6f 0 50%, #f0c443 50% 100%);
}

.directory-map-dot-place {
    background: #2f8f6f;
}

.directory-map-dot-beach {
    background: #f0c443;
}

.directory-map {
    height: min(54vh, 480px);
    min-height: 380px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e5edec;
}

.directory-map.is-directory-map-placeholder {
    display: grid;
    place-items: center;
    background:
        linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
        linear-gradient(135deg, #d9ecea 0 25%, #eaf4f1 25% 50%, #dcebe8 50% 75%, #eef6f4 75%);
    background-size: auto, 140px 140px;
}

.directory-map-placeholder {
    width: min(100%, 360px);
    padding: 28px 20px;
    text-align: center;
    color: #5f7582;
}

.directory-map-placeholder strong {
    display: block;
    margin-bottom: 8px;
    color: #25484a;
    font-size: 1.18rem;
}

.directory-map-placeholder p {
    margin: 0 0 18px;
}

.directory-map-load-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    background: var(--orange, #1E3D6B);
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(212, 102, 63, 0.2);
}

.directory-map-load-button:hover {
    background: var(--orange, #1E3D6B);
}

.directory-map-load-button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.directory-map-status,
.directory-map-empty {
    margin: 12px 0 0;
    color: #5f7582;
}

.directory-map-popup {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.directory-map-popup strong {
    font-size: 0.98rem;
}

.directory-map-popup span,
.directory-map-popup small {
    color: #5f7582;
}

.directory-map-popup a {
    margin-top: 4px;
    color: var(--orange, #1E3D6B);
    font-weight: 700;
    text-decoration: none;
}

.directory-map-popup a:hover {
    text-decoration: underline;
}

.directory-filters-card {
    padding: 28px;
    margin-bottom: 28px;
}

.directory-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.directory-search-main {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(190px, 0.8fr) minmax(190px, 0.75fr) auto;
    gap: 16px;
    align-items: end;
}

.directory-search-field,
.directory-filter-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.directory-search-field label,
.directory-filter-field label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #58717b;
}

.directory-search-field input,
.directory-filter-field select {
    border: 1px solid #dbe7ea;
    background: #fdfefe;
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 0.98rem;
    color: var(--dark);
    outline: none;
}

.directory-search-field input:focus,
.directory-filter-field select:focus {
    border-color: rgba(64, 224, 208, 0.9);
    box-shadow: 0 0 0 4px rgba(64, 224, 208, 0.12);
}

.directory-search-field-main input {
    font-size: 1rem;
    padding-block: 16px;
}

.directory-submit-field {
    display: flex;
    align-items: flex-end;
}

.directory-submit-field .btn-search {
    min-height: 52px;
    padding-inline: 24px;
}

.directory-quick-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.directory-filter-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #58717b;
}

.directory-theme-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.directory-theme-pill,
.directory-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #f7fbfc;
    border: 1px solid #dfe9ed;
    color: #35535d;
    font-weight: 600;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.directory-theme-pill:hover,
.directory-check:hover {
    background: #ffffff;
    border-color: #c8dde2;
}

.directory-theme-pill:has(input:checked),
.directory-check:has(input:checked) {
    background: rgba(64, 224, 208, 0.12);
    border-color: rgba(64, 224, 208, 0.48);
    color: #1b6562;
    box-shadow: 0 12px 22px rgba(64, 224, 208, 0.12);
}

.directory-theme-pill input,
.directory-check input {
    margin: 0;
    accent-color: #ef8654;
}

.directory-advanced-filters {
    margin: 2px 0 0;
    border: 1px solid #e7eff1;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(250, 253, 253, 0.92), rgba(245, 250, 250, 0.96));
}

.directory-advanced-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: #38555f;
}

.directory-advanced-summary::-webkit-details-marker {
    display: none;
}

.directory-advanced-summary strong,
.directory-advanced-summary small {
    color: #6a7c84;
    font-weight: 700;
}

.directory-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0 16px 16px;
}

.directory-reset-link {
    color: #6f7d87;
    text-decoration: none;
    font-weight: 700;
}

.directory-results-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #edf2f3;
    flex-wrap: wrap;
}

.directory-results-count {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.directory-results-bar strong {
    font-size: 1.4rem;
}

.directory-results-bar span {
    color: #637984;
}

.directory-reset-link-inline {
    margin-left: auto;
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.directory-grid .card {
    width: auto;
    padding: 0;
    overflow: hidden;
    border-radius: 28px;
    text-align: left;
    box-shadow: 0 18px 40px rgba(32, 57, 70, 0.09);
}

.directory-grid .card:hover {
    transform: translateY(-6px);
}

.directory-grid .card-image-wrapper {
    position: relative;
    height: 250px;
    margin-bottom: 0;
    border-radius: 28px 28px 0 0;
}

.card-image-overlay {
    position: absolute;
    inset: 18px 18px auto 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.card-image-link,
.card-title-link {
    color: inherit;
    text-decoration: none;
}

.card-image-link {
    display: block;
    height: 100%;
}

.card-overlay-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(19, 34, 40, 0.68);
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.directory-grid .card-head,
.directory-grid .card-rating,
.directory-grid .card-location,
.directory-grid .card-description,
.directory-grid .card-services,
.directory-grid .card-footer {
    padding-left: 24px;
    padding-right: 24px;
}

.directory-grid .card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding-top: 22px;
}

.directory-grid .card-title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    color: var(--dark);
}

.directory-grid .card-meta {
    margin: 0;
    color: #5f7983;
}

.directory-grid .card-rating {
    margin: 14px 0 0;
}

.directory-grid .card-location {
    margin-bottom: 0;
}

.directory-grid .card-map-link {
    color: #5d6770;
}

body.site-theme-night .directory-hero-copy,
body.site-theme-night .directory-filters-card,
body.site-theme-night .directory-map-panel,
body.site-theme-night .directory-empty-state,
body.site-theme-night .directory-stat-card,
body.site-theme-night .directory-grid .card {
    background: rgba(23, 39, 44, 0.92);
    border: 1px solid rgba(110, 154, 152, 0.14);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

body.site-theme-night .directory-hero-copy {
    background:
        radial-gradient(circle at top right, rgba(69, 155, 148, 0.14), transparent 34%),
        linear-gradient(140deg, rgba(23, 39, 44, 0.96), rgba(19, 33, 37, 0.92));
}

body.site-theme-night .directory-badge {
    background: rgba(85, 190, 178, 0.14);
    color: #8fe7dc;
}

body.site-theme-night .directory-stat-card strong,
body.site-theme-night .directory-results-bar strong,
body.site-theme-night .directory-grid .card-title,
body.site-theme-night .directory-grid .card-title-link {
    color: #eef8f7;
}

body.site-theme-night .directory-stat-card span,
body.site-theme-night .directory-map-head p,
body.site-theme-night .directory-map-count,
body.site-theme-night .directory-map-status,
body.site-theme-night .directory-map-empty,
body.site-theme-night .directory-grid .card-meta,
body.site-theme-night .directory-grid .card-rating,
body.site-theme-night .directory-grid .card-description,
body.site-theme-night .card-updated,
body.site-theme-night .member-promo-text,
body.site-theme-night .directory-empty-state p {
    color: #b9cfcd;
}

body.site-theme-night .directory-map {
    border-color: rgba(110, 154, 152, 0.14);
}

body.site-theme-night .directory-map.is-directory-map-placeholder {
    background:
        linear-gradient(rgba(17, 30, 34, 0.72), rgba(17, 30, 34, 0.72)),
        linear-gradient(135deg, #183236 0 25%, #14282c 25% 50%, #1a3438 50% 75%, #13262a 75%);
}

body.site-theme-night .directory-map-placeholder {
    color: #b9cfcd;
}

body.site-theme-night .directory-map-placeholder strong {
    color: #eef8f7;
}

body.site-theme-night .directory-map-filter {
    background: rgba(236, 246, 246, 0.08);
    border-color: rgba(123, 170, 168, 0.18);
    color: #e6f2f1;
}

body.site-theme-night .directory-map-filter strong {
    color: #b9cfcd;
}

body.site-theme-night .directory-map-filter.is-active {
    background: rgba(85, 190, 178, 0.14);
    border-color: rgba(85, 190, 178, 0.42);
    color: #f0fffc;
}

body.site-theme-night .directory-check,
body.site-theme-night .directory-theme-pill {
    background: rgba(236, 246, 246, 0.08);
    border-color: rgba(123, 170, 168, 0.18);
    color: #e6f2f1;
}

body.site-theme-night .directory-theme-pill:has(input:checked),
body.site-theme-night .directory-check:has(input:checked) {
    background: rgba(85, 190, 178, 0.16);
    border-color: rgba(115, 219, 208, 0.28);
    color: #f0fbfa;
}

body.site-theme-night .directory-advanced-filters {
    background: linear-gradient(180deg, rgba(18, 31, 35, 0.9), rgba(13, 24, 27, 0.92));
    border-color: rgba(110, 154, 152, 0.14);
}

body.site-theme-night .directory-grid .card-footer,
body.site-theme-night .directory-results-bar {
    border-top-color: rgba(123, 170, 168, 0.16);
}

.directory-grid .card-description {
    min-height: auto;
    line-height: 1.65;
}

.directory-grid .card-services {
    margin-bottom: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.card-service-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f3faf9;
    color: #2f5d67;
    font-size: 0.8rem;
    font-weight: 700;
}

.card-themes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 24px 0;
}

.card-theme-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eef6ff;
    color: #305b86;
    font-size: 0.76rem;
    font-weight: 700;
}

.directory-grid .card-footer {
    margin-top: 18px;
    padding-top: 18px;
    padding-bottom: 24px;
}

.directory-grid .card-sans-actions {
    padding-bottom: 24px;
}

.directory-grid .card-actions {
    align-items: flex-start;
}

.directory-grid .card-action-group {
    justify-content: flex-start;
}

.directory-empty-state {
    padding: 52px 28px;
    text-align: center;
}

.directory-empty-state h2 {
    margin: 0 0 12px;
}

.directory-empty-state p {
    margin: 0 0 24px;
    color: #5f7983;
}

.directory-load-more {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 8px 0 4px;
}

.directory-load-more[hidden] {
    display: none;
}

.directory-load-more .card-button:disabled {
    cursor: progress;
    opacity: 0.72;
}

.directory-load-more.has-error .card-button {
    background: #ffe9e2;
    color: #92422d;
}

html.directory-js-enabled .directory-pagination[data-directory-pagination] {
    display: none;
}

.directory-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 26px 0 12px;
}

.directory-page-link,
.directory-page-gap {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #dbe8ea;
    background: #ffffff;
    color: #38555f;
    font-weight: 800;
    text-decoration: none;
}

.directory-page-link:hover {
    border-color: #91c7c1;
    color: #1f6f6a;
}

.directory-page-link.is-current {
    background: #315f68;
    border-color: #315f68;
    color: #ffffff;
}

.directory-page-link.is-disabled {
    color: #9aa9ae;
    pointer-events: none;
}

.directory-page-gap {
    border-color: transparent;
    background: transparent;
    color: #8b9ba1;
    min-width: 24px;
    padding: 0 4px;
}

body.site-theme-night .directory-page-link,
body.site-theme-night .directory-page-gap {
    background: rgba(236, 246, 246, 0.08);
    border-color: rgba(123, 170, 168, 0.18);
    color: #e6f2f1;
}

body.site-theme-night .directory-page-link.is-current {
    background: rgba(85, 190, 178, 0.22);
    border-color: rgba(115, 219, 208, 0.36);
    color: #f0fffc;
}

body.site-theme-night .directory-page-link.is-disabled,
body.site-theme-night .directory-page-gap {
    color: #88a19f;
}

.camping-page {
    padding: 30px 5% 80px;
}

.camping-breadcrumbs {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
    color: #71818a;
    font-size: 0.92rem;
}

.camping-breadcrumbs a {
    color: #5f7983;
    text-decoration: none;
}

.camping-showcase {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1fr);
    gap: 24px;
    align-items: start;
    margin-bottom: 28px;
}

.camping-showcase-no-media {
    grid-template-columns: 1fr;
}

.camping-showcase-media,
.camping-showcase-copy,
.camping-section-card {
    background: rgba(255, 255, 255, 0.94);
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(32, 57, 70, 0.08);
    min-width: 0; /* empêche les enfants de grille de dépasser */
}

.camping-showcase-media {
    overflow: hidden;
    min-height: 0;
    height: clamp(520px, 68vh, 720px);
    position: sticky;
    top: 24px;
}

.camping-hero-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    display: block;
    object-position: center;
}

.camping-hero-image--cover {
    object-fit: contain;
    background: #0d1e22;
}

.camping-hero-image--contain {
    object-fit: contain;
    background: #f5f7f4;
}

.camping-hero-image--fallback {
    box-sizing: border-box;
    padding: 34px;
    background:
        radial-gradient(circle at top right, rgba(241, 217, 154, 0.2), transparent 28%),
        linear-gradient(135deg, #edf2ea 0%, #eef4f1 52%, #e4f0ef 100%);
}

.camping-showcase-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.camping-inline-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef5f7;
    color: #35535d;
    font-size: 0.8rem;
    font-weight: 700;
}

.camping-inline-pill-link {
    text-decoration: none;
    color: #2f6f5b;
    background: #edf7f1;
}

.camping-inline-pill-link:hover {
    color: #214f40;
    background: #dff1e7;
}

.camping-showcase-copy {
    padding: 32px;
}

.camping-showcase-topline {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
}

.camping-back-link {
    color: #5d7883;
    text-decoration: none;
    font-weight: 700;
    justify-self: end;
}

.share-inline {
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-inline-label {
    color: #607983;
    font-size: 0.84rem;
    font-weight: 700;
}

.share-inline .share-panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    flex-wrap: nowrap;
}

.share-inline .share-button-icon {
    width: 32px;
    height: 32px;
}

.share-inline .share-button-icon svg {
    width: 14px;
    height: 14px;
}

.camping-showcase-copy h1 {
    margin: 14px 0 8px;
    font-size: clamp(2.15rem, 3vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: 0;
}

@media (max-width: 920px) {
    .camping-showcase-topline {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .camping-back-link {
        justify-self: start;
    }

    .share-inline {
        justify-content: flex-start;
    }

    .share-inline .share-panel-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .camping-page {
        padding: 16px 12px 92px;
    }

    .camping-breadcrumbs {
        gap: 6px;
        margin-bottom: 14px;
        font-size: 0.84rem;
    }

    .camping-showcase {
        gap: 14px;
        margin-bottom: 18px;
    }

    .camping-showcase-media,
    .camping-showcase-copy,
    .camping-section-card,
    .camping-location-card,
    .camping-action-bar,
    .camping-propose-card {
        border-radius: 22px;
    }

    .camping-showcase-media {
        position: static;
        height: auto;
        max-height: none;
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    .camping-hero-image--cover,
    .camping-hero-image--contain {
        height: 100%;
        object-fit: cover;
    }

    .camping-showcase-copy {
        padding: 20px 18px;
    }

    .camping-showcase-topline {
        gap: 10px;
    }

    .share-inline {
        width: 100%;
        justify-content: flex-start;
    }

    .share-inline .share-panel-actions {
        gap: 8px;
    }

    .camping-showcase-copy h1 {
        margin: 10px 0 6px;
        font-size: 1.95rem;
        line-height: 1.02;
    }

    .camping-hero-location {
        margin-bottom: 10px;
        font-size: 0.98rem;
    }

    .camping-hero-meta-line {
        gap: 10px;
        margin-bottom: 14px;
        font-size: 0.94rem;
    }

    .camping-showcase-pills {
        gap: 8px;
        margin-bottom: 14px;
    }

    .camping-inline-pill,
    .camping-inline-pill-link,
    .card-theme-badge {
        padding: 7px 10px;
        font-size: 0.74rem;
    }

    .camping-theme-row {
        gap: 6px;
        margin-bottom: 14px;
    }

    .camping-hero-summary {
        margin: 2px 0 16px;
        padding: 14px 14px 15px;
        border-radius: 16px;
    }

    .camping-hero-summary ul {
        gap: 10px;
    }

    .camping-hero-summary li {
        padding-left: 18px;
        font-size: 0.94rem;
        line-height: 1.5;
    }

    .camping-action-bar {
        padding: 14px;
        margin-bottom: 16px;
        border-radius: 18px;
    }

    .camping-action-bar-header {
        align-items: center;
        gap: 12px;
        margin-bottom: 0;
    }

    .camping-action-bar-copy strong {
        font-size: 0.98rem;
    }

    .camping-action-bar-copy span {
        font-size: 0.86rem;
        line-height: 1.45;
    }

    .camping-favorite-star {
        width: 44px;
        height: 44px;
        font-size: 1.65rem;
    }

    .camping-propose-card {
        align-items: stretch;
        padding: 14px;
        margin-bottom: 16px;
        border-radius: 18px;
    }

    .camping-propose-card div {
        gap: 6px;
    }

    .camping-propose-card span {
        font-size: 0.88rem;
    }

    .camping-propose-card .card-button,
    .camping-action-bar-guest-controls .card-button,
    .camping-action-bar-controls .card-button,
    .camping-action-bar-controls .card-button-secondary {
        width: 100%;
        justify-content: center;
    }

    .camping-section-card {
        padding: 20px 18px;
    }

    .camping-section-card h2 {
        margin-bottom: 14px;
        font-size: 1.28rem;
    }

    .camping-location-card {
        gap: 12px;
        margin-top: 0;
        padding: 16px;
        border-radius: 18px;
    }

    .camping-location-card-head {
        gap: 6px;
    }

    .camping-location-card-head strong {
        font-size: 0.96rem;
    }

    .camping-location-card-head span {
        font-size: 0.84rem;
    }

    .camping-action-bar-controls {
        grid-template-columns: 1fr;
        flex: 1 1 auto;
    }

    .camping-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .camping-photo-card:first-child {
        grid-column: span 2;
        grid-row: auto;
    }

    .camping-photo-image {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    /* Carte : remplacer aspect-ratio par une hauteur fixe pour éviter
       que min-height force une largeur > viewport */
    .camping-location-map {
        aspect-ratio: unset;
        min-height: unset;
        height: 260px;
        width: 100%;
        border-radius: 16px;
    }

    /* Sécurité images et conteneurs */
    .camping-page img,
    .camping-section-card,
    .camping-showcase-media,
    .camping-showcase-copy {
        max-width: 100%;
    }

    .camping-showcase-media,
    .camping-showcase-copy {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .camping-showcase-copy {
        padding: 18px 16px;
    }

    .camping-showcase-copy h1 {
        font-size: 1.8rem;
    }

    .camping-hero-summary {
        padding: 13px 13px 14px;
    }

    .camping-inline-pill,
    .camping-inline-pill-link,
    .card-theme-badge {
        font-size: 0.72rem;
    }
}

.camping-hero-meta-line {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    color: #5f7983;
    font-weight: 600;
}

.camping-hero-meta-line span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.camping-hero-location {
    margin: 0 0 14px;
    color: #58717b;
    font-size: 1.02rem;
    font-weight: 600;
}

.camping-summary-label {
    display: block;
    margin-bottom: 8px;
    color: #627983;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.camping-theme-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.camping-hero-summary {
    margin: 4px 0 20px;
    padding: 18px 20px;
    border: 1px solid #e3edef;
    border-radius: 20px;
    background: #f7fbfc;
}

.camping-hero-summary ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.camping-hero-summary li {
    position: relative;
    padding-left: 22px;
    color: #425c66;
    line-height: 1.5;
}

.camping-hero-summary li::before {
    content: "";
    position: absolute;
    top: 0.68em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff7a4f;
}

.camping-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin: 0 0 22px;
    border-radius: 22px;
    background: #f5fafb;
    border: 1px solid #e3edef;
}

.camping-action-bar-member {
    display: block;
    padding: 18px;
}

.camping-action-bar-guest {
    background: linear-gradient(135deg, #edfaf6 0%, #f0f7ff 100%);
    border-color: #c3ede4;
}

.camping-action-bar-guest-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.camping-action-bar-guest-controls .card-button {
    white-space: nowrap;
}

body.site-theme-night .camping-action-bar-guest {
    background: rgba(21, 36, 39, 0.92);
    border-color: rgba(101, 132, 136, 0.3);
}

.camping-action-bar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.camping-action-bar-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.camping-action-bar-copy strong {
    font-size: 1rem;
}

.camping-action-bar-copy span {
    color: #647d87;
    font-size: 0.9rem;
}

.camping-action-bar-controls {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    flex: 1 1 700px;
}

.camping-favorite-star-form {
    flex: 0 0 auto;
    margin: 0;
}

.camping-favorite-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #ffd1c3;
    border-radius: 50%;
    background: #fff7f3;
    color: var(--orange, #1E3D6B);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.camping-favorite-star:hover {
    transform: translateY(-1px);
    background: #ffe8de;
}

.camping-favorite-star.is-active {
    background: #fffbeb;
    color: #f5a623;
    border-color: #ffd46f;
}

.camping-propose-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin: 0 0 20px;
    border-radius: 22px;
    background: #fff7f3;
    border: 1px solid #ffd1c3;
}

.camping-propose-card div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 620px;
}

.camping-propose-card strong {
    color: #30515b;
}

.camping-propose-card span {
    color: #647d87;
    font-size: 0.9rem;
    line-height: 1.5;
}

.camping-member-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #e3edef;
}

.camping-member-card-label {
    color: #607983;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.camping-member-card-copy {
    margin: 0;
    color: #4f6771;
    line-height: 1.6;
    font-size: 0.95rem;
}

.camping-location-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
    padding: 18px;
    border-radius: 22px;
    background: #f7fbfc;
    border: 1px solid #e3edef;
}

.camping-location-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.camping-location-card-head strong {
    color: #29414a;
    font-size: 1rem;
}

.camping-location-card-head span {
    color: #607983;
    font-size: 0.9rem;
    font-weight: 600;
}

.camping-location-map {
    aspect-ratio: 1 / 1;
    min-height: 520px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #dce8eb;
}

@media (max-width: 768px) {
    .camping-location-map {
        aspect-ratio: unset;
        min-height: unset;
        height: 260px;
        width: 100%;
        border-radius: 16px;
    }
}

.camping-resource-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.card-button-secondary {
    background: #eff5f7;
    color: #30515b;
}

.camping-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr);
    gap: 24px;
}

.camping-layout-single {
    grid-template-columns: minmax(0, 1fr);
}

.camping-main,
.camping-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.camping-section-card {
    padding: 28px;
}

.camping-section-card h2 {
    margin: 0 0 18px;
    font-size: 1.5rem;
}

.camping-story {
    color: #425c66;
    line-height: 1.8;
    font-size: 1.02rem;
}

.camping-story p + p {
    margin-top: 16px;
}

.camping-highlights-list {
    margin: 0;
    padding-left: 22px;
    color: #425c66;
    line-height: 1.8;
}

.camping-highlights-list li + li {
    margin-top: 10px;
}

.camping-search-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.camping-search-card {
    padding: 20px 24px;
    opacity: 0.78;
}

.camping-search-card h2 {
    margin-bottom: 12px;
    font-size: 1rem;
    color: #607983;
}

.camping-search-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef5f7;
    color: #44616b;
    font-size: 0.78rem;
    font-weight: 600;
}

.camping-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.camping-fact {
    padding: 18px;
    border-radius: 18px;
    background: #f7fbfc;
}

.camping-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.camping-detail-card {
    padding: 18px;
    border-radius: 18px;
    background: #f7fbfc;
}

.camping-detail-card p {
    margin: 0;
    color: #425c66;
    line-height: 1.7;
}

.camping-fact-label {
    display: block;
    margin-bottom: 8px;
    color: #607983;
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.camping-service-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.camping-official-link {
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.camping-official-link:hover {
    background: #e4f3f0;
    color: #244e55;
    transform: translateY(-1px);
}

.camping-section-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.camping-section-intro {
    max-width: 760px;
    margin: -6px 0 18px;
    color: #5f737c;
    line-height: 1.65;
}

.camping-link-group {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.camping-link-group-label {
    color: #627983;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.camping-selection-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.camping-faq-list {
    display: grid;
    gap: 16px;
}

.camping-faq-item {
    padding: 18px 20px;
    border-radius: 18px;
    background: #f7fbfc;
}

.camping-faq-item h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
    color: #29414a;
}

.camping-faq-item p {
    margin: 0;
    color: #4a626b;
    line-height: 1.75;
}

.camping-similar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.camping-similar-grid .card {
    width: auto;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    text-align: left;
    box-shadow: 0 12px 26px rgba(32, 57, 70, 0.08);
}

.camping-similar-grid .card-image-wrapper {
    height: 150px;
    margin-bottom: 0;
    border-radius: 20px 20px 0 0;
}

.camping-similar-grid .card-head,
.camping-similar-grid .card-rating,
.camping-similar-grid .card-location,
.camping-similar-grid .card-description,
.camping-similar-grid .card-services,
.camping-similar-grid .card-themes,
.camping-similar-grid .card-footer {
    padding-left: 16px;
    padding-right: 16px;
}

.camping-similar-grid .card-head {
    padding-top: 14px;
}

.camping-similar-grid .card-title {
    font-size: 1.08rem;
    margin-bottom: 6px;
}

/* Cartes « à découvrir » sur les fiches lieu : reproduire les couleurs de l'annuaire
   (sinon le titre et le lieu héritent du turquoise) et retirer le lien bleu souligné. */
.camping-page .card-title {
    color: var(--dark);
}

.camping-page .card-meta {
    color: #5f7983;
}

.camping-page .card-title-link,
.camping-page .card-image-link {
    color: inherit;
    text-decoration: none;
}

body.site-theme-night .camping-page .card-title,
body.site-theme-night .camping-page .card-title-link {
    color: #eef8f7;
}

body.site-theme-night .camping-page .card-meta {
    color: #b9cfcd;
}

.camping-similar-grid .card-meta,
.camping-similar-grid .card-rating,
.camping-similar-grid .card-location,
.camping-similar-grid .card-description,
.camping-similar-grid .card-phone {
    font-size: 0.84rem;
}

.camping-similar-grid .card-description {
    line-height: 1.5;
}

.camping-similar-grid .card-services {
    justify-content: flex-start;
}

.camping-similar-grid .card-footer {
    margin-top: 12px;
    padding-top: 14px;
    padding-bottom: 16px;
}

.camping-similar-grid .card-button,
.camping-similar-grid .favorite-button,
.camping-similar-grid .rating-select {
    font-size: 0.75rem;
}

.camping-inline-form,
.camping-rating-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.camping-inline-form-compact,
.camping-rating-panel-compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

.camping-rating-panel-compact {
    flex: 1 1 420px;
    align-items: stretch;
    padding: 18px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #dfe9ec;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.camping-rating-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.camping-rating-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.camping-rating-title {
    color: #35535d;
    font-weight: 700;
    font-size: 1.1rem;
}

.camping-rating-help,
.camping-rating-hint,
.camping-rating-inline-label {
    color: #647d87;
    font-size: 0.92rem;
}

.camping-rating-inline-label {
    font-weight: 600;
}

.camping-rating-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.camping-rating-stars {
    position: relative;
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 3px;
}

.camping-rating-star-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.camping-rating-star-label {
    color: #c7d7da;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    transition: color 0.18s ease, transform 0.18s ease;
}

.camping-rating-star-label:hover,
.camping-rating-star-label:hover ~ .camping-rating-star-label,
.camping-rating-star-input:checked ~ .camping-rating-star-label {
    color: #f5a623;
}

.camping-rating-star-label:hover {
    transform: translateY(-1px);
}

.camping-rating-star-input:focus-visible + .camping-rating-star-label {
    outline: 3px solid rgba(255, 118, 77, 0.28);
    outline-offset: 3px;
    border-radius: 6px;
}

.camping-review-textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid #dfe9ec;
    background: #f9fcfd;
    color: #35535d;
    font: inherit;
    line-height: 1.6;
}

.camping-review-textarea:focus {
    outline: none;
    border-color: rgba(255, 118, 77, 0.55);
    box-shadow: 0 0 0 4px rgba(255, 118, 77, 0.12);
}

.camping-rating-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.camping-rating-panel-compact .card-button {
    border: 0;
    cursor: pointer;
}

.camping-reviews-summary {
    color: #607983;
    font-weight: 700;
}

.camping-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.camping-review-card {
    padding: 18px 20px;
    border-radius: 20px;
    background: #f7fbfc;
    border: 1px solid #e7f0f2;
}

.camping-review-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
}

.camping-review-meta,
.camping-review-date {
    display: block;
    color: #69818b;
    font-size: 0.9rem;
    margin-top: 4px;
}

.camping-review-side {
    text-align: right;
}

.camping-review-rating {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ecf6f7;
    color: #2d5966;
    font-weight: 700;
}

.camping-review-text {
    margin: 0;
    color: #415b65;
    line-height: 1.7;
}

.camping-empty-text {
    margin: 0;
    color: #5f7983;
    line-height: 1.7;
}

.camping-sidebar-text {
    margin: 0;
    color: #5f7983;
    line-height: 1.6;
    font-size: 0.94rem;
}

.camping-photo-grid {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr;
    grid-template-rows: repeat(2, 155px);
    gap: 8px;
}

.camping-photo-card {
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    background: #0d1e22;
    min-height: 0;
}

/* Grande photo à gauche sur toute la hauteur */
.camping-photo-card:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    border-radius: 18px;
}


.camping-photo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease, opacity .3s ease;
}

.camping-photo-card:hover .camping-photo-image {
    transform: scale(1.04);
    opacity: .85;
}

.camping-photo-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 28px 14px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,.62));
    color: #fff;
    font-size: 0.82rem;
    opacity: 0;
    transition: opacity .25s ease;
}

.camping-photo-card:hover .camping-photo-caption {
    opacity: 1;
}

.camping-photo-caption strong {
    color: #fff;
    font-size: 0.88rem;
}

/* Lightbox */
.camping-photo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: zoom-out;
    padding: 20px;
}

.camping-photo-lightbox img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 8px 48px rgba(0,0,0,.5);
}

.camping-photo-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #e7f0f2;
}

.camping-photo-form h3 {
    margin: 0;
    font-size: 1.1rem;
}

/* Bloc événements sur fiche lieu */
.fiche-events-list {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.fiche-event-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(42, 76, 78, 0.12);
    border-radius: 14px;
    background: rgba(239, 247, 246, 0.6);
}

.fiche-event-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fiche-event-title {
    font-size: 0.95rem;
    color: var(--dark);
}

.fiche-event-title a {
    color: inherit;
    text-decoration: none;
}

.fiche-event-title a:hover {
    text-decoration: underline;
}

.fiche-event-meta {
    font-size: 0.82rem;
    color: #5b677a;
}

.fiche-events-more {
    margin: 0;
}

/* ── Widget météo ─────────────────────────────────────────────────── */

.fiche-meteo-widget {
    background: linear-gradient(135deg, #e6f3f8 0%, #eaf6f2 55%, #e2f0ec 100%);
    border-radius: 20px;
    padding: 22px 24px 16px;
    overflow: hidden;
}

.fiche-meteo-loading,
.fiche-meteo-error {
    color: #5f7983;
    font-size: 0.92rem;
    margin: 0;
}

/* Conditions actuelles */
.fiche-meteo-current {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(50, 120, 100, 0.14);
}

.fiche-meteo-now-icon {
    font-size: 3rem;
    line-height: 1;
    flex-shrink: 0;
}

.fiche-meteo-now-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fiche-meteo-now-temp {
    font-size: 2.4rem;
    font-weight: 700;
    color: #1a3a2f;
    line-height: 1;
}

.fiche-meteo-now-wind {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 0.8rem;
    color: #3a5a4f;
    font-weight: 600;
    width: fit-content;
}

/* Prévisions 4 jours */
.fiche-meteo-days {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.fiche-meteo-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.68);
    border-radius: 14px;
    padding: 12px 8px;
    text-align: center;
    transition: background 0.15s ease;
}

.fiche-meteo-day:hover {
    background: rgba(255, 255, 255, 0.88);
}

.fiche-meteo-day-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #3a5a4f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fiche-meteo-day-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.fiche-meteo-day-temps {
    font-size: 0.88rem;
    color: #1a3a2f;
    font-weight: 600;
}

.fiche-meteo-day-temps strong {
    font-size: 1rem;
}

.fiche-meteo-day-min {
    color: #6a8a7f;
    font-weight: 400;
}

.fiche-meteo-day-rain {
    font-size: 0.75rem;
    color: #4a7a8a;
}

/* Source */
.fiche-meteo-source {
    margin: 14px 0 0;
    font-size: 0.72rem;
    color: #6a8a7f;
    text-align: right;
}

.fiche-meteo-source a {
    color: #2f6f5b;
    text-decoration: none;
}

.fiche-meteo-source a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .fiche-meteo-widget {
        padding: 18px 16px 12px;
    }
    .fiche-meteo-days {
        grid-template-columns: repeat(2, 1fr);
    }
    .fiche-meteo-now-temp {
        font-size: 2rem;
    }
}

/* ── Séjours déclarés « J'y serai » ──────────────────────────────── */
.camping-stays-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(135deg, #edfaf6 0%, #f0faf8 100%);
    border: 1px solid #c3ede4;
    box-shadow: 0 4px 18px rgba(47, 143, 111, 0.08);
}

.camping-stays-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.camping-stays-head strong {
    font-size: 1.15rem;
    color: #1a3a36;
}

.camping-stays-weekly-presence {
    margin: 0;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(47, 143, 111, 0.11);
    color: #315f58;
    font-size: 0.92rem;
    line-height: 1.45;
}

.camping-stays-weekly-presence strong {
    color: #176b60;
}

.camping-stays-cta {
    display: inline-flex;
    align-items: center;
    background: var(--orange, #1E3D6B);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(211, 84, 0, 0.35);
    transition: transform 0.15s, filter 0.15s;
}

.camping-stays-cta:hover {
    transform: scale(1.04);
    filter: brightness(1.06);
}

.camping-stays-teaser,
.camping-stays-empty {
    margin: 0;
    color: #5b677a;
    line-height: 1.55;
}

.camping-stays-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.camping-stay-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e3edef;
    border-radius: 12px;
    padding: 8px 12px;
}

.camping-stay-member {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.camping-stay-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.camping-stay-avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e3edef;
    color: #5b677a;
    font-size: 0.75rem;
    font-weight: 800;
}

.camping-stay-period {
    color: #2f8f6f;
    font-weight: 700;
    font-size: 0.9rem;
}

.camping-stay-visibility {
    color: #8a9aac;
    font-size: 0.78rem;
}

.camping-stay-delete-form {
    margin-left: auto;
}

.camping-stay-delete {
    background: none;
    border: none;
    color: #8a9aac;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 4px 6px;
    border-radius: 6px;
}

.camping-stay-delete:hover {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.camping-stay-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: #fff;
    border: 1px dashed #c8d8db;
    border-radius: 14px;
}

.camping-stay-form-fields {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.camping-stay-form-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: #5b677a;
    flex: 1 1 140px;
}

.camping-stay-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

body.site-theme-night .camping-stays-card {
    background: rgba(21, 36, 39, 0.92);
    border-color: rgba(101, 132, 136, 0.3);
}

body.site-theme-night .camping-stay-item,
body.site-theme-night .camping-stay-form {
    background: rgba(13, 30, 34, 0.85);
    border-color: rgba(101, 132, 136, 0.3);
}

body.site-theme-night .camping-stays-teaser,
body.site-theme-night .camping-stays-empty,
body.site-theme-night .camping-stay-form-fields label {
    color: #a9bebd;
}

body.site-theme-night .camping-stay-period {
    color: #75ddc7;
}

body.site-theme-night .camping-stays-head strong {
    color: #e8f6f2;
}

body.site-theme-night .camping-stays-weekly-presence {
    background: rgba(44, 104, 97, 0.32);
    color: #c6ddda;
}

body.site-theme-night .camping-stays-weekly-presence strong {
    color: #75ddc7;
}

.member-page {
    padding: 48px 5% 80px;
}

.member-hero {
    max-width: 760px;
    margin: 0 auto;
    background: white;
    border-radius: 28px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    text-align: center;
}

.member-badge {
    display: inline-block;
    margin: 0 0 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ecfff8;
    color: #156a4d;
    font-weight: bold;
}

.member-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.directory-page {
    padding: 36px 5% 80px;
}

.directory-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.directory-hero-copy,
.directory-filters-card,
.directory-empty-state,
.directory-map-panel,
.directory-stat-card,
.directory-grid .card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(32, 57, 70, 0.08);
}

.directory-hero-copy {
    padding: 34px 36px;
    background:
        radial-gradient(circle at top right, rgba(64, 224, 208, 0.18), transparent 34%),
        linear-gradient(140deg, rgba(255,255,255,0.98), rgba(242,250,251,0.94));
}

.directory-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: #e9fffb;
    color: #157d70;
    font-weight: 700;
    margin-bottom: 14px;
}

.directory-hero-copy h1 {
    margin: 0 0 14px;
    font-size: 3rem;
    line-height: 1.05;
}

.directory-hero-copy p {
    margin: 0;
    max-width: 780px;
    color: #56707a;
    font-size: 1.05rem;
    line-height: 1.7;
}

.directory-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.directory-hero-link {
    color: #35535d;
    font-weight: 800;
    text-decoration: none;
}

.directory-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.directory-stat-card {
    padding: 28px 20px;
}

.directory-stat-card strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 10px;
}

.directory-stat-card span {
    color: #637984;
    font-weight: 600;
}

.directory-filters-card {
    padding: 28px;
    margin-bottom: 28px;
}

.directory-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.directory-search-main {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(190px, 0.8fr) minmax(190px, 0.75fr) auto;
    gap: 16px;
    align-items: end;
}

.directory-search-field,
.directory-filter-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.directory-search-field label,
.directory-filter-field label,
.directory-filter-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #58717b;
}

.directory-search-field input,
.directory-filter-field select {
    border: 1px solid #dbe7ea;
    background: #fdfefe;
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 0.98rem;
    color: var(--dark);
    outline: none;
}

.directory-search-field-main input {
    font-size: 1rem;
    padding-block: 16px;
}

.directory-submit-field {
    display: flex;
    align-items: flex-end;
}

.directory-submit-field .btn-search {
    min-height: 52px;
    padding-inline: 24px;
}

.directory-quick-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.directory-theme-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.directory-theme-pill,
.directory-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #f7fbfc;
    border: 1px solid #dfe9ed;
    color: #35535d;
    font-weight: 600;
}

.directory-theme-pill input,
.directory-check input {
    margin: 0;
    accent-color: #ef8654;
}

.directory-advanced-filters {
    margin: 2px 0 0;
    border: 1px solid #e7eff1;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(250, 253, 253, 0.92), rgba(245, 250, 250, 0.96));
}

.directory-advanced-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: #38555f;
}

.directory-advanced-summary::-webkit-details-marker {
    display: none;
}

.directory-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0 16px 16px;
}

.directory-advanced-filters .directory-quick-filters--advanced {
    padding: 0 16px 16px;
    gap: 10px;
}

.directory-advanced-filters .directory-quick-filters--advanced .directory-theme-options {
    margin: 0;
}

.directory-results-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #edf2f3;
    flex-wrap: wrap;
}

.directory-results-count {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.directory-results-bar strong {
    font-size: 1.4rem;
}

.directory-results-bar span,
.search-result-text,
.member-promo-text {
    color: #637984;
}

.directory-reset-link,
.directory-reset-link-inline {
    color: #6f7d87;
    text-decoration: none;
    font-weight: 700;
}

.directory-reset-link-inline {
    margin-left: auto;
}

.directory-map-panel {
    width: 100%;
    max-width: 1180px;
    margin: 18px auto 0;
    padding: 22px;
    scroll-margin-top: 120px;
}

.directory-map-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.directory-map-head strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.05rem;
}

.directory-map-head p,
.directory-map-count,
.directory-map-status,
.directory-map-empty {
    margin: 0;
    color: #5f7582;
}

.directory-map-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}

.directory-map-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #d8e5e3;
    background: #ffffff;
    color: #334a4f;
    border-radius: 999px;
    padding: 8px 12px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.directory-map-filter strong {
    color: #5f7582;
    font-size: 0.9rem;
}

.directory-map-filter.is-active {
    border-color: #2f8f6f;
    background: #e9f8f2;
    color: #25484a;
}

.directory-map-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(51, 74, 79, 0.22);
}

.directory-map-dot-all {
    background: linear-gradient(90deg, #2f8f6f 0 50%, #f0c443 50% 100%);
}

.directory-map-dot-place {
    background: #2f8f6f;
}

.directory-map-dot-beach {
    background: #f0c443;
}

.directory-map {
    display: block;
    width: 100%;
    height: min(54vh, 480px);
    min-height: 380px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e5edec;
}

.directory-map.is-directory-map-placeholder {
    display: grid;
    place-items: center;
    background:
        linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.74)),
        linear-gradient(135deg, #d9ecea 0 25%, #eaf4f1 25% 50%, #dcebe8 50% 75%, #eef6f4 75%);
    background-size: auto, 140px 140px;
}

.directory-map-placeholder {
    width: min(100%, 360px);
    padding: 28px 20px;
    text-align: center;
    color: #5f7582;
}

.directory-map-placeholder strong {
    display: block;
    margin-bottom: 8px;
    color: #25484a;
    font-size: 1.18rem;
}

.directory-map-placeholder p {
    margin: 0 0 18px;
}

.directory-map-load-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    background: var(--orange, #1E3D6B);
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(212, 102, 63, 0.2);
}

.directory-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.directory-grid .card {
    width: auto;
    padding: 0;
    overflow: hidden;
    text-align: left;
}

.directory-grid .card-image-wrapper {
    position: relative;
    height: 250px;
    margin-bottom: 0;
    border-radius: 28px 28px 0 0;
}

.card-image-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.card-image-overlay {
    position: absolute;
    inset: 18px 18px auto 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.card-overlay-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(19, 34, 40, 0.68);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.directory-grid .card-head,
.directory-grid .card-rating,
.directory-grid .card-location,
.directory-grid .card-description,
.directory-grid .card-services,
.directory-grid .card-footer {
    padding-left: 24px;
    padding-right: 24px;
}

.directory-grid .card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding-top: 22px;
}

.directory-grid .card-title {
    margin: 0 0 8px;
    font-size: 1.5rem;
    color: var(--dark);
}

.directory-grid .card-title-link {
    color: inherit;
    text-decoration: none;
}

.directory-grid .card-meta,
.directory-grid .card-rating,
.directory-grid .card-description {
    color: #5f7983;
}

.directory-grid .card-description {
    line-height: 1.65;
}

.directory-grid .card-services,
.card-themes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.directory-grid .card-footer {
    margin-top: 18px;
    padding-top: 18px;
    padding-bottom: 24px;
    border-top: 1px solid #edf2f3;
}

.directory-grid .card-sans-actions {
    padding-bottom: 24px;
}

.directory-empty-state {
    padding: 52px 28px;
    text-align: center;
}

body.site-theme-night .directory-hero-copy,
body.site-theme-night .directory-filters-card,
body.site-theme-night .directory-empty-state,
body.site-theme-night .directory-map-panel,
body.site-theme-night .directory-stat-card,
body.site-theme-night .directory-grid .card {
    background: rgba(23, 39, 44, 0.92);
    border: 1px solid rgba(110, 154, 152, 0.14);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

body.site-theme-night .directory-hero-copy h1,
body.site-theme-night .directory-grid .card-title,
body.site-theme-night .directory-grid .card-title-link,
body.site-theme-night .directory-results-bar strong {
    color: #eef8f7;
}

body.site-theme-night .directory-hero-copy p,
body.site-theme-night .directory-map-head p,
body.site-theme-night .directory-map-count,
body.site-theme-night .directory-map-status,
body.site-theme-night .directory-map-empty,
body.site-theme-night .directory-grid .card-meta,
body.site-theme-night .directory-grid .card-rating,
body.site-theme-night .directory-grid .card-description,
body.site-theme-night .search-result-text,
body.site-theme-night .member-promo-text,
body.site-theme-night .directory-empty-state p {
    color: #b9cfcd;
}

body.site-theme-night .directory-check,
body.site-theme-night .directory-theme-pill,
body.site-theme-night .directory-map-filter {
    background: rgba(236, 246, 246, 0.08);
    border-color: rgba(123, 170, 168, 0.18);
    color: #e6f2f1;
}

body.site-theme-night .directory-advanced-filters,
body.site-theme-night .directory-map {
    border-color: rgba(110, 154, 152, 0.14);
}

body.site-theme-night .directory-map-filter strong,
body.site-theme-night .directory-map-placeholder {
    color: #b9cfcd;
}

body.site-theme-night .directory-map-filter.is-active {
    background: rgba(85, 190, 178, 0.14);
    border-color: rgba(85, 190, 178, 0.42);
    color: #f0fffc;
}

body.site-theme-night .directory-map.is-directory-map-placeholder {
    background:
        linear-gradient(rgba(17, 30, 34, 0.74), rgba(17, 30, 34, 0.74)),
        linear-gradient(135deg, #183236 0 25%, #14282c 25% 50%, #1a3438 50% 75%, #13262a 75%);
}

body.site-theme-night .directory-map-placeholder strong {
    color: #eef8f7;
}

body.site-theme-night .directory-grid .card-footer,
body.site-theme-night .directory-results-bar {
    border-top-color: rgba(123, 170, 168, 0.16);
}

@media (max-width: 700px) {
    .directory-page {
        padding: 16px 12px 92px;
    }

    .directory-hero,
    .directory-hero-stats {
        display: none;
    }

    .directory-filters-card {
        padding: 16px;
        margin-bottom: 18px;
        border-radius: 24px;
    }

    .directory-filters {
        gap: 12px;
    }

    .directory-search-main,
    .directory-advanced-grid,
    .directory-grid {
        grid-template-columns: 1fr;
    }

    .directory-search-field input,
    .directory-filter-field select {
        min-height: 52px;
        border-radius: 18px;
        padding: 14px 16px;
        font-size: 0.98rem;
    }

    .directory-submit-field,
    .directory-submit-field .btn-search,
    .directory-results-count {
        width: 100%;
    }

    .directory-filters-card .directory-theme-options {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 8px;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .directory-quick-filters {
        gap: 10px;
    }

    .directory-check,
    .directory-theme-pill,
    .directory-map-filter {
        min-height: 42px;
        padding: 9px 13px;
        border-radius: 16px;
    }

    .directory-filters-card .directory-check,
    .directory-filters-card .directory-theme-pill {
        flex: 1 1 auto !important;
        justify-content: flex-start;
    }

    .directory-check {
        max-width: 100%;
    }

    .directory-check span,
    .directory-theme-pill span {
        white-space: normal;
        line-height: 1.2;
    }

    .directory-theme-options::-webkit-scrollbar,
    .directory-map-tools::-webkit-scrollbar {
        display: none;
    }

    .directory-filters-card .directory-theme-pill {
        min-width: max-content;
    }

    .directory-results-bar,
    .directory-grid .card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .directory-results-bar {
        gap: 12px;
        margin-top: 18px;
        padding-top: 14px;
    }

    .directory-results-bar strong {
        font-size: 1.95rem;
        line-height: 1;
    }

    .directory-results-bar span,
    .search-result-text,
    .member-promo-text {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .directory-results-count {
        gap: 8px;
        align-items: baseline;
    }

    .directory-results-count span {
        font-size: 1rem;
    }

    .directory-advanced-filters {
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 251, 0.94));
        border-color: rgba(205, 221, 224, 0.95);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
    }

    .directory-advanced-summary {
        min-height: 48px;
        padding: 12px 14px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.72);
        color: #264246;
    }

    .directory-advanced-summary strong,
    .directory-advanced-summary small {
        color: #5f7582;
        font-size: 0.84rem;
    }

    .directory-advanced-grid {
        gap: 12px;
        padding: 0 14px 14px;
    }

    .directory-advanced-filters .directory-quick-filters--advanced {
        padding: 0 14px 14px;
    }

    .directory-map-filter strong {
        font-size: 0.84rem;
    }

    .directory-map-panel {
        margin-top: 8px;
        padding: 12px;
        border-radius: 22px;
    }

    .directory-map-head {
        display: none;
    }

    .directory-map-tools {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 0 10px;
        padding: 0 2px 2px;
    }

    .directory-map {
        height: 280px;
        min-height: 280px;
        border-radius: 18px;
    }

    .directory-reset-link-inline {
        margin-left: 0;
    }

    .directory-map-placeholder {
        padding: 18px 16px;
    }

    .directory-map-placeholder strong {
        font-size: 1rem;
    }

    .directory-map-placeholder p {
        font-size: 0.92rem;
        line-height: 1.45;
    }

    .directory-load-more,
    .directory-pagination {
        padding-bottom: 8px;
    }

    body.site-theme-night .directory-advanced-filters {
        background: linear-gradient(180deg, rgba(32, 49, 54, 0.98), rgba(25, 40, 44, 0.96));
        border-color: rgba(110, 154, 152, 0.22);
    }

    body.site-theme-night .directory-advanced-summary {
        background: rgba(255, 255, 255, 0.04);
        color: #eef8f7;
    }

    body.site-theme-night .directory-advanced-summary strong,
    body.site-theme-night .directory-advanced-summary small {
        color: #9fb8b5;
    }
}

.profile-public-layout {
    align-items: start;
}

.album-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Création d'un album ─────────────────────────────────────────── */

.album-create-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(42, 128, 119, 0.16);
    background:
        radial-gradient(circle at 100% 0, rgba(108, 213, 199, 0.13), transparent 34%),
        #fff;
}

.album-create-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #278077, #70d2c5 55%, var(--orange, #1E3D6B));
}

.album-create-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.album-create-heading h3 {
    margin: 5px 0 7px;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.12;
}

.album-create-heading p {
    max-width: 620px;
    margin: 0;
    color: #657588;
    line-height: 1.5;
}

.album-create-eyebrow,
.album-create-duration {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.album-create-eyebrow {
    color: #1e766d;
    background: rgba(83, 190, 176, 0.14);
}

.album-create-duration {
    flex: 0 0 auto;
    color: #708294;
    background: rgba(111, 130, 148, 0.09);
    text-transform: none;
    letter-spacing: 0;
}

.album-create-form {
    gap: 0;
}

.album-create-layout {
    display: grid;
    grid-template-columns: minmax(230px, 0.78fr) minmax(0, 1.55fr);
    gap: 26px;
    align-items: start;
}

.album-photo-picker-wrap {
    position: relative;
    min-width: 0;
}

.album-photo-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.album-photo-picker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 290px;
    overflow: hidden;
    border: 2px dashed rgba(39, 128, 119, 0.38);
    border-radius: 22px;
    color: #28504c;
    background:
        radial-gradient(circle at 50% 30%, rgba(102, 211, 196, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(239, 249, 247, 0.96), rgba(248, 251, 251, 0.98));
    cursor: pointer;
    isolation: isolate;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.album-photo-picker:hover {
    border-color: #278077;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(33, 107, 99, 0.12);
}

.album-photo-input:focus-visible + .album-photo-picker {
    outline: 3px solid rgba(96, 206, 192, 0.55);
    outline-offset: 3px;
}

.album-photo-picker-placeholder {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 24px;
    text-align: center;
}

.album-photo-picker-placeholder strong {
    font-size: 0.98rem;
    line-height: 1.25;
}

.album-photo-picker-placeholder > span:last-child {
    color: #728395;
    font-size: 0.8rem;
    line-height: 1.35;
}

.album-photo-picker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 4px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #31988d, #23756d);
    box-shadow: 0 12px 24px rgba(35, 117, 109, 0.22);
}

.album-photo-picker-icon svg {
    width: 29px;
    height: 29px;
}

.album-photo-preview {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-photo-preview[hidden] {
    display: none;
}

.album-photo-picker.has-preview {
    border-style: solid;
    border-color: rgba(39, 128, 119, 0.48);
    background: #dce9e7;
}

.album-photo-picker.has-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 54%, rgba(12, 30, 32, 0.72));
}

.album-photo-picker.has-preview .album-photo-picker-placeholder {
    display: none;
}

.album-photo-change {
    position: relative;
    z-index: 2;
    display: none;
    align-self: flex-end;
    margin: 0 0 16px;
    padding: 8px 13px;
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 34, 36, 0.68);
    font-size: 0.78rem;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

.album-photo-picker.has-preview .album-photo-change {
    display: inline-flex;
}

.album-upload-rotate {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 34, 36, 0.72);
    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(15, 34, 36, 0.2);
}

.album-upload-rotate[hidden] {
    display: none !important;
}

.album-create-upload-rotate {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 4;
    backdrop-filter: blur(8px);
}

.album-create-fields {
    display: flex;
    flex-direction: column;
    gap: 19px;
    min-width: 0;
}

.album-create-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.album-create-field .field-label,
.album-visibility-fieldset legend {
    color: #294c4d;
    font-size: 0.88rem;
    font-weight: 800;
}

.album-create-field .field-label > span {
    color: #8b98a7;
    font-size: 0.76rem;
    font-weight: 600;
}

.album-create-field .admin-input {
    min-height: 50px;
    border-color: rgba(79, 112, 116, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.album-create-field .admin-input:focus {
    border-color: #39998e;
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(57, 153, 142, 0.12);
}

.album-visibility-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.album-visibility-fieldset legend {
    margin-bottom: 9px;
}

.album-visibility-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.album-visibility-option {
    min-width: 0;
    cursor: pointer;
}

.album-visibility-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.album-visibility-option-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 132px;
    padding: 13px;
    border: 1px solid rgba(79, 112, 116, 0.2);
    border-radius: 16px;
    background: rgba(248, 251, 251, 0.8);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.album-visibility-option:hover .album-visibility-option-body {
    transform: translateY(-1px);
    border-color: rgba(39, 128, 119, 0.42);
}

.album-visibility-option input:checked + .album-visibility-option-body {
    border-color: #319187;
    background: rgba(231, 248, 245, 0.92);
    box-shadow: 0 8px 20px rgba(38, 126, 117, 0.1), inset 0 0 0 1px rgba(49, 145, 135, 0.12);
}

.album-visibility-option input:focus-visible + .album-visibility-option-body {
    outline: 3px solid rgba(96, 206, 192, 0.48);
    outline-offset: 2px;
}

.album-visibility-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: #23756d;
    background: rgba(67, 174, 160, 0.14);
    font-size: 1rem;
}

.album-visibility-icon--members::before { content: '●●'; font-size: 0.58rem; letter-spacing: -0.1em; }
.album-visibility-icon--lock::before { content: '◆'; font-size: 0.72rem; }
.album-visibility-icon--approval::before { content: '✓'; font-weight: 900; }

.album-visibility-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.album-visibility-copy strong {
    color: #294c4d;
    font-size: 0.85rem;
}

.album-visibility-copy small {
    color: #758597;
    font-size: 0.7rem;
    line-height: 1.3;
}

.album-visibility-check {
    position: absolute;
    top: 11px;
    right: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border: 1px solid rgba(99, 124, 127, 0.24);
    border-radius: 50%;
    color: transparent;
    background: #fff;
    font-size: 0.68rem;
    font-weight: 900;
}

.album-visibility-option input:checked + .album-visibility-option-body .album-visibility-check {
    border-color: #278077;
    color: #fff;
    background: #278077;
}

.album-create-more {
    overflow: hidden;
    border: 1px solid rgba(79, 112, 116, 0.17);
    border-radius: 16px;
    background: rgba(247, 250, 250, 0.72);
}

.album-create-more summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
    color: #294c4d;
    cursor: pointer;
    list-style: none;
}

.album-create-more summary::-webkit-details-marker {
    display: none;
}

.album-create-more summary > span:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.album-create-more summary strong {
    font-size: 0.84rem;
}

.album-create-more summary small {
    color: #82909f;
    font-size: 0.72rem;
}

.album-create-more-chevron {
    font-size: 1.2rem;
    transition: transform 160ms ease;
}

.album-create-more[open] .album-create-more-chevron {
    transform: rotate(180deg);
}

.album-create-more-fields {
    display: grid;
    gap: 15px;
    padding: 4px 14px 15px;
}

.album-create-more .admin-textarea {
    min-height: 94px;
}

.album-create-submit {
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 12px 18px;
    border-radius: 15px;
    box-shadow: 0 12px 24px rgba(201, 79, 41, 0.18);
}

.album-create-submit > span:last-child {
    font-size: 1.15rem;
    transition: transform 160ms ease;
}

.album-create-submit:hover > span:last-child,
.album-create-submit:focus-visible > span:last-child {
    transform: translateX(3px);
}

/* ── Grille 2 colonnes sur la page profil ── */
.album-list-public {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.album-list-public .album-cover {
    height: 130px;
}

.album-list-public .album-card-body {
    padding: 10px 12px 12px;
}

.album-list-public .album-card-header {
    margin-bottom: 4px;
}

.album-list-public .album-card-header h4 {
    font-size: 0.85rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-list-public .album-meta {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-list-public .empty-text {
    font-size: 0.78rem;
}

.album-list-public .mini-action {
    font-size: 0.78rem;
    padding: 6px 10px;
}

/* ── Bibliothèque et gestion des albums ─────────────────────────── */

.album-library-card {
    border: 1px solid rgba(42, 128, 119, 0.12);
}

.album-library-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.album-library-heading h3 {
    margin: 5px 0 7px;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.album-library-heading p {
    margin: 0;
    color: #657588;
    line-height: 1.45;
}

.album-library-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 11px;
    border-radius: 999px;
    color: #386f6a;
    background: rgba(72, 173, 160, 0.12);
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.album-manage-card {
    border-color: rgba(71, 112, 116, 0.17);
    box-shadow: 0 10px 28px rgba(24, 62, 64, 0.07);
}

.album-manage-card .album-card-body {
    padding: 16px;
}

.album-manage-overview {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 17px;
    align-items: center;
}

.album-manage-cover.album-thumb-zoom,
.album-manage-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 142px;
    height: 108px;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, #e2efed, #d5e6e3);
    cursor: zoom-in;
    line-height: normal;
}

.album-manage-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
}

.album-manage-cover:hover img,
.album-manage-cover:focus-visible img {
    transform: scale(1.035);
}

.album-manage-cover--empty {
    color: #5f8d88;
    font-size: 1.7rem;
    cursor: default;
}

.album-manage-summary {
    min-width: 0;
}

.album-manage-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.album-manage-title-row h4 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 1.08rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.album-manage-visibility {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #386f6a;
    background: rgba(72, 173, 160, 0.12);
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}

.album-manage-visibility--private {
    color: #687687;
    background: rgba(104, 118, 135, 0.12);
}

.album-manage-visibility--approval {
    color: #9b5d24;
    background: rgba(223, 145, 69, 0.14);
}

.album-manage-stats {
    display: flex;
    align-items: center;
    gap: 7px 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    color: #758597;
    font-size: 0.76rem;
}

.album-manage-stats span {
    position: relative;
}

.album-manage-stats span + span::before {
    content: '·';
    position: absolute;
    left: -8px;
}

.album-manage-stats strong,
.album-manage-pending {
    color: var(--orange, #1E3D6B);
    font-size: inherit;
}

.album-manage-pending {
    display: inline-flex;
    align-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.album-manage-pending:hover,
.album-manage-pending:focus-visible {
    text-decoration: underline;
}

.album-manage-summary .album-description {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.album-manage-actions {
    display: grid;
    grid-template-columns: 0.9fr 1.25fr 0.72fr;
    gap: 9px;
    margin-top: 15px;
}

.album-manage-actions--system {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.album-manage-view,
.album-manage-action,
.album-manage-actions .album-add-photo-toggle > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid rgba(45, 128, 119, 0.2);
    border-radius: 13px;
    color: #286f68;
    background: rgba(237, 248, 246, 0.86);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.album-manage-action {
    font-family: inherit;
}

.album-manage-action--primary {
    border-color: var(--orange, #1E3D6B);
    color: #fff;
    background: linear-gradient(135deg, var(--orange, #1E3D6B), var(--orange, #1E3D6B));
    box-shadow: 0 8px 18px rgba(201, 79, 41, 0.16);
}

.album-manage-actions .album-add-photo-toggle > summary {
    border-color: var(--orange, #1E3D6B);
    color: #fff;
    background: linear-gradient(135deg, var(--orange, #1E3D6B), var(--orange, #1E3D6B));
    box-shadow: 0 8px 18px rgba(201, 79, 41, 0.16);
}

.album-manage-view:hover,
.album-manage-view:focus-visible,
.album-manage-action:not(.album-manage-action--primary):hover,
.album-manage-action:not(.album-manage-action--primary):focus-visible {
    color: #205c56;
    background: #e3f5f2;
    text-decoration: none;
}

.album-manage-action--primary:hover,
.album-manage-action--primary:focus-visible {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.album-manage-actions .album-add-photo-toggle {
    margin: 0;
    padding: 0;
    border: 0;
}

.album-manage-actions .album-add-photo-toggle[open] {
    grid-column: 1 / -1;
}

.album-manage-actions .album-add-photo-form {
    margin-top: 10px;
    padding: 13px;
    border: 1px solid rgba(71, 112, 116, 0.16);
    border-radius: 14px;
    background: rgba(247, 250, 250, 0.92);
}

.album-manage-toggle {
    margin-top: 11px;
    overflow: hidden;
    overflow-anchor: none;
    border: 1px solid rgba(71, 112, 116, 0.15);
    border-radius: 14px;
    background: rgba(248, 251, 251, 0.72);
}

.album-manage-toggle > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 9px 14px;
    color: #294c4d;
    cursor: pointer;
    list-style: none;
}

.album-manage-toggle > summary::-webkit-details-marker {
    display: none;
}

.album-manage-toggle > summary > span:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.album-manage-toggle > summary strong {
    font-size: 0.84rem;
}

.album-manage-toggle > summary small {
    color: #82909f;
    font-size: 0.71rem;
}

.album-manage-chevron {
    font-size: 1.2rem;
    transition: transform 160ms ease;
}

.album-manage-toggle[open] .album-manage-chevron {
    transform: rotate(180deg);
}

.album-manage-content {
    padding: 0 14px 15px;
    overflow-anchor: none;
    transform-origin: top center;
}

.album-manage-toggle[open] .album-manage-content {
    animation: album-manage-open-down 150ms ease-out;
}

@keyframes album-manage-open-down {
    from {
        opacity: 0;
        transform: translateY(-6px) scaleY(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .album-manage-toggle[open] .album-manage-content {
        animation: none;
    }
}

.album-manage-content .album-photos-section {
    margin-top: 4px;
}

/* ── Gestion dédiée d'un album ───────────────────────────────────── */

.album-manager-dialog {
    width: min(920px, calc(100vw - 32px));
    max-width: none;
    height: min(820px, calc(100dvh - 48px));
    max-height: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(71, 112, 116, 0.2);
    border-radius: 24px;
    color: #294c4d;
    background: #fff;
    box-shadow: 0 28px 90px rgba(17, 49, 52, 0.3);
}

.album-manager-dialog::backdrop {
    background: rgba(13, 35, 38, 0.62);
    backdrop-filter: blur(5px);
}

.album-manager-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.album-manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex: 0 0 auto;
    padding: 20px 22px 15px;
    border-bottom: 1px solid rgba(71, 112, 116, 0.12);
    background: rgba(255, 255, 255, 0.96);
}

.album-manager-heading {
    min-width: 0;
}

.album-manager-kicker {
    display: block;
    margin-bottom: 3px;
    color: #7a8998;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.album-manager-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.album-manager-title-row h4 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 1.2rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.album-manager-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(71, 112, 116, 0.18);
    border-radius: 50%;
    color: #536b6c;
    background: #f4f8f7;
    font: inherit;
    cursor: pointer;
}

.album-manager-close:hover,
.album-manager-close:focus-visible {
    color: #234c4c;
    background: #e8f2f0;
}

.album-manager-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    flex: 0 0 auto;
    padding: 10px 22px;
    border-bottom: 1px solid rgba(71, 112, 116, 0.12);
    background: #fff;
}

.album-manager-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    color: #718190;
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.album-manager-tabs button > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(99, 119, 130, 0.1);
    font-size: 0.68rem;
}

.album-manager-tabs button[aria-selected="true"] {
    color: #236f67;
    background: #e9f6f3;
}

.album-manager-tabs button[aria-selected="true"] > span {
    color: #fff;
    background: #2e8b81;
}

.album-manager-body {
    min-height: 0;
    flex: 1 1 auto;
    padding: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: #f7faf9;
}

.album-manager-panel[hidden] {
    display: none;
}

.album-manager-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 17px;
}

.album-manager-panel-heading h5 {
    margin: 0 0 4px;
    color: #294c4d;
    font-size: 1.03rem;
}

.album-manager-panel-heading p {
    margin: 0;
    color: #718190;
    font-size: 0.82rem;
    line-height: 1.45;
}

.album-manager-upload {
    display: grid;
    grid-template-columns: minmax(190px, 0.9fr) minmax(200px, 1.35fr) auto;
    gap: 9px;
    align-items: center;
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid rgba(48, 137, 127, 0.18);
    border-radius: 16px;
    background: #edf7f5;
}

.album-manager-upload-file {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    overflow: hidden;
    border: 1px dashed rgba(39, 128, 119, 0.46);
    border-radius: 12px;
    color: #236f67;
    background: rgba(255, 255, 255, 0.76);
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.album-manager-upload-file-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.album-manager-upload-file-wrap .album-manager-upload-file {
    flex: 1 1 auto;
    min-width: 0;
}

.album-manager-upload-rotate {
    flex: 0 0 auto;
    background: #2d8178;
}

.album-manager-upload-file input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.album-manager-upload .admin-input {
    min-height: 44px;
    border-radius: 12px;
    background: #fff;
}

.album-manager-upload .mini-action {
    min-height: 44px;
    margin: 0;
    padding-inline: 18px;
}

.album-photo-grid.album-manager-photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 0;
}

.album-manager-photo-grid .album-photo-thumb {
    position: relative;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(28, 68, 70, 0.06);
}

.album-manager-photo-grid .album-thumb-image {
    aspect-ratio: 4 / 3;
}

.album-manager-photo-grid .album-cover-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    color: #fff;
    background: rgba(28, 112, 102, 0.88);
    box-shadow: 0 5px 14px rgba(12, 46, 43, 0.2);
    backdrop-filter: blur(6px);
}

.album-manager-photo-grid .album-thumb-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 8px;
}

.album-manager-photo-grid .album-photo-thumb--cover .album-thumb-actions {
    grid-template-columns: auto minmax(0, 1fr);
}

.album-manager-photo-grid .album-thumb-actions .inline-form,
.album-manager-photo-grid .album-thumb-actions .mini-action {
    min-width: 0;
    width: 100%;
}

.album-manager-photo-grid .album-thumb-actions .mini-action {
    min-height: 34px;
    padding: 5px 8px;
    border-radius: 9px;
    font-size: 0.68rem;
}

.album-manager-photo-grid figcaption {
    padding: 0 10px 9px;
    font-size: 0.75rem;
}

.album-manager-empty,
.album-access-no-result {
    margin: 0;
    padding: 26px 18px;
    border: 1px dashed rgba(71, 112, 116, 0.25);
    border-radius: 16px;
    color: #718190;
    background: rgba(255, 255, 255, 0.66);
    font-size: 0.86rem;
    text-align: center;
}

.album-access-search-wrap {
    display: block;
    margin-bottom: 12px;
}

.album-access-search {
    min-height: 46px;
    border-radius: 14px;
    background: #fff;
}

.album-access-grant {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(71, 112, 116, 0.14);
}

.album-access-grant-input {
    min-height: 46px;
    border-radius: 14px;
    background: #fff;
}

.album-access-grant-results {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.album-access-grant-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 8px 9px;
    border: 1px solid rgba(71, 112, 116, 0.14);
    border-radius: 13px;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.album-access-grant-result:hover {
    border-color: #4A6B5A;
    background: #f5fbfa;
}

.album-access-grant-result .album-access-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.album-access-grant-result .mini-action {
    flex: 0 0 auto;
    pointer-events: none;
}

.album-access-pending {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(71, 112, 116, 0.14);
}

.album-access-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: #244847;
    font-size: 0.9rem;
    font-weight: 900;
}

.album-access-section-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 28px;
    padding: 2px 10px;
    border-radius: 999px;
    color: var(--orange, #1E3D6B);
    background: #fff0e9;
    font-size: 0.78rem;
    font-weight: 900;
}

.album-manager-dialog .album-access-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.album-manager-dialog .album-access-member {
    min-width: 0;
    min-height: 62px;
    padding: 8px 9px;
    border-radius: 13px;
    background: #fff;
}

.album-manager-dialog .album-access-member--pending {
    border: 1px solid rgba(196, 83, 49, 0.18);
    background: #fffaf6;
}

.album-manager-dialog .album-access-avatar,
.album-manager-dialog .album-access-initials {
    width: 42px;
    height: 42px;
}

.album-access-decision-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.album-access-decision-actions .mini-action {
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 10px;
    font-size: 0.72rem;
}

.album-access-revoke,
.album-panel-link,
.album-delete-button {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.album-access-revoke {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 10px;
    color: #a64742;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 800;
}

.album-access-revoke:hover,
.album-access-revoke:focus-visible {
    background: #fff0ee;
}

.album-access-summary-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(71, 112, 116, 0.16);
    border-radius: 16px;
    background: #fff;
}

.album-access-summary-card p {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    color: #627585;
    font-size: 0.84rem;
}

.album-panel-link {
    flex: 0 0 auto;
    padding: 8px 11px;
    border-radius: 10px;
    color: #236f67;
    background: #e9f6f3;
    font-size: 0.76rem;
    font-weight: 800;
}

.album-settings-form.album-manager-settings-form {
    display: grid;
    gap: 0;
    max-width: 760px;
    margin: 0;
    padding: 20px;
    border: 1px solid rgba(71, 112, 116, 0.16);
    border-radius: 18px;
    background: #fff;
}

.album-manager-field-label {
    display: block;
    margin: 0 0 6px;
    color: #294c4d;
    font-size: 0.82rem;
    font-weight: 800;
}

.album-manager-field-label:not(:first-of-type) {
    margin-top: 14px;
}

.album-manager-field-label span {
    color: #8a9aac;
    font-weight: 600;
}

.album-manager-settings-form .admin-input {
    width: 100%;
    border-radius: 13px;
}

.album-manager-visibility-fieldset {
    margin-top: 18px;
}

.album-manager-settings-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
}

.album-manager-settings-actions > a {
    color: #4A6B5A;
    font-size: 0.76rem;
    font-weight: 700;
    text-decoration: none;
}

.album-settings-save {
    min-height: 44px;
    padding-inline: 17px;
}

.album-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    max-width: 760px;
    margin-top: 20px;
    padding: 17px 18px;
    border: 1px solid rgba(180, 65, 58, 0.2);
    border-radius: 16px;
    background: #fff7f6;
}

.album-danger-zone strong {
    color: #8f3633;
    font-size: 0.86rem;
}

.album-danger-zone p {
    margin: 3px 0 0;
    color: #8d7371;
    font-size: 0.75rem;
}

.album-danger-zone .album-delete-form {
    flex: 0 0 auto;
    margin: 0;
}

.album-delete-button {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid rgba(180, 65, 58, 0.32);
    border-radius: 11px;
    color: #a43e39;
    background: #fff;
    font-size: 0.76rem;
    font-weight: 800;
}

.album-card {
    border: 1px solid #eef2f7;
    border-radius: 20px;
    overflow: hidden;
    background: var(--white);
}

.album-thumb-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.album-card-body {
    padding: 18px;
}

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

.album-card-header h4 {
    margin: 0 0 6px;
}

.album-meta {
    margin: 0;
    color: #5b677a;
    font-size: 0.92rem;
}

.album-cover {
    overflow: hidden;
    height: 200px;
    background: #f5f7f4;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.album-cover .album-cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
}

.album-cover--locked {
    background: #ececec;
    overflow: hidden;
}
.album-cover--locked .album-cover-image {
    filter: blur(18px);
    transform: scale(1.1);
    transform-origin: center;
}

.album-cover--empty {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .album-cover-image--blurred : plus utilisé, le flou est généré côté serveur */

/* ── Cover floutée dans le post-card ── */
.post-album-cover-wrap {
    position: relative;
    overflow: hidden;
    display: block;
    min-height: 280px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(113, 231, 218, 0.22), transparent 34%),
        linear-gradient(145deg, #163235 0%, #27464b 100%);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    text-decoration: none;
    isolation: isolate;
}
.post-album-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
}
.post-album-cover-sheen,
.post-album-cover-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.post-album-cover-sheen {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.05) 28%, transparent 48%);
    mix-blend-mode: screen;
    opacity: 0.5;
}
.post-album-cover-gradient {
    background:
        linear-gradient(180deg, rgba(10, 20, 22, 0.06) 0%, rgba(10, 20, 22, 0.18) 26%, rgba(10, 20, 22, 0.72) 100%),
        linear-gradient(0deg, rgba(16, 29, 31, 0.55), rgba(16, 29, 31, 0.08));
    z-index: 1;
}
.post-album-cover-head,
.post-album-cover-body {
    position: absolute;
    left: 18px;
    right: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.post-album-cover-head {
    top: 18px;
    align-items: flex-start;
}
.post-album-cover-body {
    bottom: 18px;
    align-items: flex-start;
    justify-content: flex-start;
}
.post-album-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(248, 251, 251, 0.94);
    color: #1d4548;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(12, 24, 26, 0.16);
}
.post-album-pill--ghost {
    background: rgba(19, 38, 41, 0.48);
    color: #f5fbfb;
    backdrop-filter: blur(8px);
}
.post-album-cover-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    max-width: min(calc(100% - 92px), 420px);
}
.post-album-cover-title {
    color: #fff;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 900;
    line-height: 1.02;
    text-shadow: 0 10px 24px rgba(7, 17, 19, 0.42);
}
.post-album-cover-sub {
    color: rgba(240, 249, 248, 0.9);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 6px 20px rgba(7, 17, 19, 0.36);
}
.post-album-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(247, 250, 250, 0.94);
    color: #173f42;
    font-size: 0.92rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 14px 34px rgba(9, 20, 22, 0.22);
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.post-album-cover-count {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(14, 29, 31, 0.44);
    color: #f2fbfa;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgba(8, 17, 19, 0.18);
}
.post-album-cover-count svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.post-album-cover-wrap:hover .post-album-cta,
.post-album-cover-wrap:focus-visible .post-album-cta {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(9, 20, 22, 0.28);
    background: #ffffff;
}
.post-album-cover-lock {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(16, 31, 34, 0.54);
    color: #fff;
    font-size: 1.2rem;
    opacity: 1;
    backdrop-filter: blur(10px);
    pointer-events: none;
    z-index: 3;
}

.post-album-cover-wrap--locked {
    background:
        radial-gradient(circle at top left, rgba(118, 228, 221, 0.12), transparent 28%),
        linear-gradient(145deg, #142729 0%, #22383b 100%);
}
.post-album-cover-wrap--locked .post-album-cover-img {
    filter: blur(18px);
    transform: scale(1.1);
    transform-origin: center;
}
.post-album-cover-wrap--empty {
    min-height: 220px;
}

.post-album-spotlight {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.post-album-summary {
    display: block;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(239, 249, 248, 0.42);
    border: 1px solid rgba(115, 218, 207, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}
.post-album-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.post-album-summary-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(123, 206, 196, 0.16);
    color: #4f8480;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.post-album-summary-chip--count {
    background: rgba(18, 39, 42, 0.08);
    color: #274f52;
}
.post-album-summary-text {
    margin: 10px 0 0;
    color: #557173;
    font-size: 0.88rem;
    line-height: 1.4;
}

.album-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    opacity: 0.75;
    pointer-events: none;
}

.album-cover-image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.album-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.album-photo-thumb {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-light);
    border: 1px solid rgba(201, 214, 228, 0.85);
    display: flex;
    flex-direction: column;
}

.album-photo-thumb figcaption {
    padding: 8px 10px;
    color: #5b677a;
    font-size: 0.84rem;
    line-height: 1.4;
}

.album-thumb-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid rgba(201, 214, 228, 0.75);
    background: rgba(255, 255, 255, 0.92);
}

.album-thumb-actions .inline-form {
    width: 100%;
}

.album-thumb-actions .mini-action,
.album-delete-form .mini-action {
    width: 100%;
    justify-content: center;
}

.album-cover-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #dff7f2;
    color: #1b6d63;
    font-size: 0.82rem;
    font-weight: 700;
    align-self: center;
}

.album-delete-form {
    margin-top: 14px;
}

.album-description {
    margin: 5px 0 0;
    color: #5b677a;
    font-size: 0.88rem;
    line-height: 1.5;
}

.album-photos-section {
    margin-top: 14px;
}

.album-access-management {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(201, 214, 228, 0.6);
}

.album-access-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.album-access-heading h5 {
    margin: 0;
    font-size: 0.95rem;
}

.album-access-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #d5eeea;
    color: #1b6d63;
    font-size: 0.76rem;
    font-weight: 700;
}

.album-access-empty {
    margin: 0;
    color: #718096;
    font-size: 0.86rem;
}

.album-access-list {
    display: grid;
    gap: 8px;
}

.album-access-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid #e3eaf1;
    border-radius: 14px;
    background: #f8fafb;
}

.album-access-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.album-access-profile > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.album-access-profile strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.album-access-profile small {
    color: #718096;
    font-size: 0.75rem;
}

.album-access-avatar,
.album-access-initials {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
}

.album-access-avatar {
    display: block;
    object-fit: cover;
}

.album-access-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d5eeea;
    color: #1b6d63;
    font-size: 0.75rem;
    font-weight: 700;
}


.album-add-photo-toggle,
.album-settings-toggle {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(201, 214, 228, 0.6);
}

.album-add-photo-toggle > summary,
.album-settings-toggle > summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--orange, #1E3D6B);
    font-weight: 600;
    list-style: none;
    outline: none;
    user-select: none;
}

.album-add-photo-toggle > summary::-webkit-details-marker,
.album-settings-toggle > summary::-webkit-details-marker {
    display: none;
}

.album-add-photo-form,
.album-settings-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.album-settings-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.album-thumb-zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    line-height: 0;
}

.album-lightbox {
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: min(92vw, 960px);
    max-height: 92vh;
    overflow: hidden;
    background: #000;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    position: fixed;
    inset: 0;
    margin: auto;
}

.album-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.78);
}

.album-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 92vh;
    object-fit: contain;
}

.album-lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    line-height: 1;
}

.album-lightbox-close:hover {
    background: rgba(0, 0, 0, 0.85);
}

/* ── Galerie communautaire ────────────────────────────────────────── */

.gallery-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.gallery-page-title {
    margin: 0 0 4px;
    font-size: 1.25rem;
}

.gallery-page-sub {
    margin: 0;
    font-size: 0.9rem;
    color: #5b677a;
}

.gallery-create-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 7px 12px 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--terracotta, #3E6BB0) 0%, var(--orange, #1E3D6B) 100%);
    box-shadow: 0 12px 28px rgba(201, 79, 41, 0.24);
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.gallery-create-action:visited {
    color: #fff;
}

.gallery-create-action:hover,
.gallery-create-action:focus-visible {
    color: #fff;
    filter: brightness(1.04);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(201, 79, 41, 0.3);
}

.gallery-create-action:focus-visible {
    outline: 3px solid rgba(112, 215, 201, 0.72);
    outline-offset: 3px;
}

.gallery-create-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.17);
}

.gallery-create-action-icon svg {
    width: 23px;
    height: 23px;
}

.gallery-create-action-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
    min-width: 0;
    line-height: 1.1;
}

.gallery-create-action-copy strong {
    font-size: 0.93rem;
    font-weight: 850;
    white-space: nowrap;
}

.gallery-create-action-copy small {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.71rem;
    font-weight: 650;
    white-space: nowrap;
}

.gallery-create-action-arrow {
    margin-left: 3px;
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 160ms ease;
}

.gallery-create-action:hover .gallery-create-action-arrow,
.gallery-create-action:focus-visible .gallery-create-action-arrow {
    transform: translateX(2px);
}

.gallery-filters {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 12px;
    margin-bottom: 20px;
    border: 1px solid rgba(39, 128, 119, 0.18);
    border-radius: 12px;
    background: rgba(244, 250, 249, 0.68);
}

.gallery-filter-group {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.gallery-filter-group + .gallery-filter-group {
    flex: 1;
    padding-left: 20px;
    border-left: 1px solid rgba(39, 128, 119, 0.18);
}

.gallery-filter-label {
    flex: 0 0 auto;
    color: #5b677a;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.gallery-filter-options {
    display: flex;
    gap: 2px;
    min-width: 0;
    padding: 3px;
    overflow-x: auto;
    border: 1px solid rgba(39, 128, 119, 0.2);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.76);
    scrollbar-width: none;
}

.gallery-filter-options::-webkit-scrollbar {
    display: none;
}

.gallery-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 6px 11px;
    border: 0;
    border-radius: 6px;
    color: #28504c;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.gallery-filter-chip:hover {
    background: #edf8f6;
}

.gallery-filter-chip.is-active {
    color: #fff;
    background: #278077;
    box-shadow: 0 1px 3px rgba(24, 89, 82, 0.2);
}

.gallery-cta-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #f0fdf9, #e6f7f4);
    border: 1px solid rgba(39, 176, 152, 0.22);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.gallery-cta-icon {
    font-size: 2rem;
    line-height: 1;
}

.gallery-cta-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gallery-cta-copy strong {
    font-size: 0.95rem;
}

.gallery-cta-copy span {
    font-size: 0.85rem;
    color: #5b677a;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.gallery-card {
    border-radius: 14px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgba(201, 214, 228, 0.7);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.gallery-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.gallery-card--locked {
    opacity: 0.85;
}

.gallery-card-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f0f5f4;
    text-decoration: none;
}

.gallery-card-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.gallery-card:not(.gallery-card--locked):hover .gallery-card-img {
    transform: scale(1.04);
}

.gallery-card-cover--empty {
    background: linear-gradient(135deg, #edf5f4, #e0eeec);
}

.gallery-card-cover--locked {
    background: linear-gradient(135deg, #ececec, #d8d8d8);
    cursor: default;
    position: relative;
}

.gallery-card-cover--locked .gallery-card-img {
    filter: blur(18px);
    transform: scale(1.1);
    transform-origin: center;
}

.gallery-card-cover--locked .gallery-cover-icon {
    position: relative;
    z-index: 1;
}

.gallery-cover-icon {
    font-size: 2.2rem;
    opacity: 0.55;
    line-height: 1;
}

.gallery-card-body {
    padding: 12px 14px 14px;
}

.gallery-card-title {
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-card-title-link {
    color: inherit;
    text-decoration: none;
}
.gallery-card-title-link:hover {
    text-decoration: underline;
}

.gallery-locked-label {
    color: #8a9aac;
    font-style: italic;
    font-weight: 500;
}

.gallery-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #5b677a;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.gallery-member-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}

.gallery-member-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.gallery-member-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d5eeea;
    color: #1b6d63;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

.gallery-photo-count {
    color: #8a9aac;
    font-size: 0.78rem;
}

.gallery-views-count {
    color: #708294;
    font-size: 0.78rem;
    white-space: nowrap;
}

.gallery-likes-count {
    color: var(--orange, #1E3D6B);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.gallery-card-action {
    font-size: 0.8rem;
    padding: 5px 12px;
}

.gallery-pending-label {
    font-size: 0.8rem;
    color: #8a9aac;
    font-style: italic;
}

@media (max-width: 600px) {
    .album-library-card {
        padding: 22px 16px;
        border-radius: 20px;
    }
    .album-library-heading {
        margin-bottom: 17px;
    }
    .album-library-heading p {
        font-size: 0.84rem;
    }
    .album-library-count {
        display: none;
    }
    .album-manage-card .album-card-body {
        padding: 12px;
    }
    .album-manage-overview {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
    }
    .album-manage-cover.album-thumb-zoom,
    .album-manage-cover {
        width: 88px;
        height: 88px;
        border-radius: 13px;
    }
    .album-manage-title-row {
        flex-direction: column;
        gap: 6px;
    }
    .album-manage-title-row h4 {
        width: 100%;
        font-size: 0.98rem;
    }
    .album-manage-visibility {
        min-height: 24px;
        padding: 4px 8px;
        font-size: 0.62rem;
    }
    .album-manage-stats {
        gap: 4px 10px;
        margin-top: 6px;
        font-size: 0.69rem;
    }
    .album-manage-summary .album-description {
        display: none;
    }
    .album-manage-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 12px;
    }
    .album-manage-action--primary {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .album-manage-view,
    .album-manage-action,
    .album-manage-actions .album-add-photo-toggle > summary {
        min-height: 42px;
        padding: 8px 10px;
        font-size: 0.76rem;
    }
    .album-manage-toggle > summary {
        min-height: 51px;
        padding: 8px 12px;
    }
    .album-manage-content {
        padding: 0 10px 12px;
    }
    .album-create-card {
        padding: 22px 16px;
        border-radius: 20px;
    }
    .album-create-heading {
        margin-bottom: 18px;
    }
    .album-create-heading h3 {
        font-size: 1.38rem;
    }
    .album-create-heading p {
        font-size: 0.86rem;
    }
    .album-create-duration {
        display: none;
    }
    .album-create-layout {
        grid-template-columns: 1fr;
        gap: 19px;
    }
    .album-photo-picker {
        min-height: 220px;
    }
    .album-visibility-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .album-visibility-option-body {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) 22px;
        align-items: center;
        gap: 10px;
        min-height: 70px;
        padding: 10px 12px;
    }
    .album-visibility-check {
        position: static;
    }
    .album-create-submit {
        min-height: 54px;
    }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .gallery-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .gallery-create-action {
        width: 100%;
        min-height: 60px;
    }
    .gallery-create-action-arrow {
        margin-left: auto;
    }
    .gallery-filters {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    .gallery-filter-group {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }
    .gallery-filter-group + .gallery-filter-group {
        padding-top: 10px;
        padding-left: 0;
        border-top: 1px solid rgba(39, 128, 119, 0.18);
        border-left: 0;
    }
    .gallery-filter-options {
        width: 100%;
    }

    .album-access-member {
        align-items: stretch;
        flex-direction: column;
    }

    .album-access-member .inline-form,
    .album-access-member .mini-action {
        width: 100%;
    }

    .album-manager-dialog {
        width: 100vw;
        height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
    }
    .album-manager-header {
        padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 11px;
    }
    .album-manager-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
    .album-manager-title-row h4 {
        max-width: calc(100vw - 86px);
        font-size: 1.03rem;
    }
    .album-manager-close {
        width: 40px;
        height: 40px;
    }
    .album-manager-tabs {
        gap: 4px;
        padding: 7px 10px;
    }
    .album-manager-tabs button {
        min-height: 40px;
        padding: 7px 6px;
        font-size: 0.74rem;
    }
    .album-manager-tabs button > span {
        min-width: 19px;
        height: 19px;
        padding-inline: 5px;
        font-size: 0.62rem;
    }
    .album-manager-body {
        padding: 16px 14px calc(18px + env(safe-area-inset-bottom, 0px));
        scrollbar-gutter: auto;
    }
    .album-manager-panel-heading {
        margin-bottom: 14px;
    }
    .album-manager-panel-heading h5 {
        font-size: 0.95rem;
    }
    .album-manager-upload {
        grid-template-columns: 1fr;
        margin-bottom: 16px;
        padding: 10px;
    }
    .album-manager-upload-file-wrap,
    .album-manager-upload-file,
    .album-manager-upload .admin-input,
    .album-manager-upload .mini-action {
        width: 100%;
        min-height: 46px;
    }
    .album-manager-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }
    .album-manager-photo-grid .album-thumb-actions,
    .album-manager-photo-grid .album-photo-thumb--cover .album-thumb-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .album-manager-photo-grid .album-photo-thumb:not(.album-photo-thumb--cover) .album-thumb-actions .inline-form:first-of-type {
        grid-column: 1 / -1;
    }
    .album-manager-photo-grid .album-cover-badge {
        top: 7px;
        left: 7px;
        padding: 3px 7px;
        font-size: 0.65rem;
    }
    .album-manager-dialog .album-access-list {
        grid-template-columns: 1fr;
    }
    .album-manager-dialog .album-access-member {
        align-items: center;
        flex-direction: row;
        min-height: 58px;
    }
    .album-manager-dialog .album-access-member .inline-form,
    .album-manager-dialog .album-access-revoke {
        width: auto;
    }
    .album-access-summary-card,
    .album-manager-settings-actions,
    .album-danger-zone {
        align-items: stretch;
        flex-direction: column;
    }
    .album-access-summary-card .album-manage-visibility {
        align-self: flex-start;
    }
    .album-panel-link,
    .album-settings-save,
    .album-delete-button {
        width: 100%;
        justify-content: center;
    }
    .album-manager-settings-form {
        padding: 15px;
    }
    .album-manager-settings-actions > a {
        text-align: center;
    }
    .album-danger-zone {
        padding: 15px;
    }
    .album-danger-zone .album-delete-form {
        width: 100%;
    }
}

/* Nuit */
body.community-theme-night .gallery-page-sub,
body.community-theme-night .gallery-card-meta,
body.community-theme-night .gallery-photo-count,
body.community-theme-night .gallery-views-count,
body.community-theme-night .gallery-filter-label,
body.community-theme-night .gallery-cta-copy span {
    color: #a9bebd;
}

body.community-theme-night .album-create-card {
    border-color: rgba(101, 132, 136, 0.3);
    background:
        radial-gradient(circle at 100% 0, rgba(73, 157, 147, 0.13), transparent 34%),
        rgba(21, 36, 39, 0.96);
}

body.community-theme-night .album-library-card,
body.community-theme-night .album-manage-card {
    border-color: rgba(101, 132, 136, 0.3);
}

body.community-theme-night .album-library-heading p,
body.community-theme-night .album-manage-stats,
body.community-theme-night .album-manage-toggle > summary small {
    color: #a9bebd;
}

body.community-theme-night .album-library-count,
body.community-theme-night .album-manage-visibility {
    color: #aee4dc;
    background: rgba(67, 153, 142, 0.2);
}

body.community-theme-night .album-manage-visibility--private {
    color: #becac9;
    background: rgba(152, 169, 174, 0.13);
}

body.community-theme-night .album-manage-visibility--approval {
    color: #f1bf85;
    background: rgba(201, 130, 60, 0.17);
}

body.community-theme-night .album-manage-view,
body.community-theme-night .album-manage-action:not(.album-manage-action--primary),
body.community-theme-night .album-manage-toggle,
body.community-theme-night .album-manage-actions .album-add-photo-form {
    border-color: rgba(101, 132, 136, 0.3);
    color: #d7e9e7;
    background: rgba(22, 43, 45, 0.78);
}

body.community-theme-night .album-manage-toggle > summary {
    color: #e1efed;
}

body.community-theme-night .album-manage-cover {
    background: linear-gradient(135deg, rgba(40, 71, 72, 0.92), rgba(28, 53, 55, 0.96));
}

body.community-theme-night .album-manager-dialog,
body.community-theme-night .album-manager-tabs,
body.community-theme-night .album-manager-header {
    border-color: rgba(101, 132, 136, 0.3);
    color: #e1efed;
    background: #172a2d;
}

body.community-theme-night .album-manager-body {
    background: #102326;
}

body.community-theme-night .album-manager-kicker,
body.community-theme-night .album-manager-panel-heading p,
body.community-theme-night .album-access-profile small,
body.community-theme-night .album-danger-zone p {
    color: #a9bebd;
}

body.community-theme-night .album-manager-title-row h4,
body.community-theme-night .album-manager-panel-heading h5,
body.community-theme-night .album-manager-field-label {
    color: #e1efed;
}

body.community-theme-night .album-manager-close,
body.community-theme-night .album-manager-tabs button,
body.community-theme-night .album-manager-settings-form,
body.community-theme-night .album-manager-dialog .album-access-member,
body.community-theme-night .album-access-summary-card,
body.community-theme-night .album-manager-photo-grid .album-photo-thumb {
    border-color: rgba(101, 132, 136, 0.3);
    color: #d7e9e7;
    background: #1d3538;
}

body.community-theme-night .album-access-pending {
    border-bottom-color: rgba(101, 132, 136, 0.26);
}

body.community-theme-night .album-access-section-heading {
    color: #e1efed;
}

body.community-theme-night .album-access-section-heading > span {
    color: #f1bf85;
    background: rgba(201, 130, 60, 0.18);
}

body.community-theme-night .album-manager-dialog .album-access-member--pending {
    border-color: rgba(201, 130, 60, 0.24);
    background: rgba(54, 39, 33, 0.74);
}

body.community-theme-night .album-manager-tabs button[aria-selected="true"] {
    color: #aee4dc;
    background: rgba(67, 153, 142, 0.2);
}

body.community-theme-night .album-manager-upload {
    border-color: rgba(101, 173, 164, 0.28);
    background: rgba(35, 85, 80, 0.32);
}

body.community-theme-night .album-manager-upload-file,
body.community-theme-night .album-manager-upload .admin-input,
body.community-theme-night .album-manager-settings-form .admin-input,
body.community-theme-night .album-access-search {
    border-color: rgba(101, 132, 136, 0.34);
    color: #e6f2f0;
    background: #142a2d;
}

body.community-theme-night .album-danger-zone {
    border-color: rgba(203, 94, 83, 0.34);
    background: rgba(109, 43, 39, 0.2);
}

body.community-theme-night .album-create-heading p,
body.community-theme-night .album-photo-picker-placeholder > span:last-child,
body.community-theme-night .album-visibility-copy small,
body.community-theme-night .album-create-more summary small {
    color: #a9bebd;
}

body.community-theme-night .album-create-eyebrow {
    color: #99e1d7;
    background: rgba(83, 190, 176, 0.13);
}

body.community-theme-night .album-create-duration {
    color: #b7c8c6;
    background: rgba(188, 213, 210, 0.08);
}

body.community-theme-night .album-photo-picker {
    border-color: rgba(107, 205, 192, 0.34);
    color: #daf2ef;
    background:
        radial-gradient(circle at 50% 30%, rgba(71, 167, 156, 0.15), transparent 34%),
        rgba(24, 45, 47, 0.86);
}

body.community-theme-night .album-create-field .field-label,
body.community-theme-night .album-visibility-fieldset legend,
body.community-theme-night .album-visibility-copy strong,
body.community-theme-night .album-create-more summary {
    color: #e1efed;
}

body.community-theme-night .album-visibility-option-body,
body.community-theme-night .album-create-more {
    border-color: rgba(113, 155, 151, 0.28);
    background: rgba(23, 43, 45, 0.72);
}

body.community-theme-night .album-visibility-option input:checked + .album-visibility-option-body {
    border-color: #72d0c3;
    background: rgba(37, 91, 84, 0.5);
    box-shadow: inset 0 0 0 1px rgba(114, 208, 195, 0.12);
}

body.community-theme-night .album-visibility-check {
    border-color: rgba(141, 179, 175, 0.34);
    background: rgba(18, 34, 36, 0.9);
}

body.community-theme-night .album-visibility-option input:checked + .album-visibility-option-body .album-visibility-check {
    border-color: #72d0c3;
    color: #12302d;
    background: #72d0c3;
}

body.community-theme-night .gallery-filters {
    background: rgba(21, 42, 43, 0.72);
    border-color: rgba(101, 132, 136, 0.3);
}

body.community-theme-night .gallery-filter-chip {
    color: #d7e9e7;
    background: transparent;
}

body.community-theme-night .gallery-filter-options {
    background: rgba(18, 34, 36, 0.76);
    border-color: rgba(113, 155, 151, 0.3);
}

body.community-theme-night .gallery-filter-chip:hover {
    background: rgba(36, 73, 70, 0.9);
}

body.community-theme-night .gallery-filter-chip.is-active {
    color: #102927;
    background: #72d0c3;
    border-color: #72d0c3;
}

body.community-theme-night .gallery-card {
    background: rgba(21, 36, 39, 0.92);
    border-color: rgba(101, 132, 136, 0.3);
}

body.community-theme-night .gallery-card-cover {
    background: rgba(30, 50, 54, 0.9);
}

body.community-theme-night .gallery-card-cover--empty {
    background: linear-gradient(135deg, rgba(30, 55, 58, 0.9), rgba(24, 44, 47, 0.9));
}

body.community-theme-night .gallery-card-cover--locked {
    background: linear-gradient(135deg, rgba(35, 45, 48, 0.9), rgba(28, 38, 40, 0.9));
}

body.community-theme-night .gallery-cta-banner {
    background: rgba(27, 60, 56, 0.55);
    border-color: rgba(39, 176, 152, 0.2);
}

body.community-theme-night .gallery-member-initials {
    background: rgba(44, 104, 97, 0.42);
    color: #d5f3ec;
}

body.community-theme-night .gallery-locked-label {
    color: #6a8a88;
}

.member-list-item-stack {
    align-items: flex-start;
    flex-direction: column;
}

body.community-theme-night .album-thumb-actions {
    background: rgba(20, 33, 36, 0.92);
    border-top-color: rgba(101, 132, 136, 0.35);
}

body.community-theme-night .album-cover-badge {
    background: rgba(44, 104, 97, 0.42);
    color: #d5f3ec;
}


body.community-theme-night .album-add-photo-toggle,
body.community-theme-night .album-settings-toggle {
    border-top-color: rgba(101, 132, 136, 0.35);
}

body.community-theme-night .album-description {
    color: #a9bebd;
}

body.community-theme-night .album-access-management {
    border-top-color: rgba(101, 132, 136, 0.35);
}

body.community-theme-night .album-access-heading > span,
body.community-theme-night .album-access-initials {
    background: rgba(44, 104, 97, 0.42);
    color: #d5f3ec;
}

body.community-theme-night .album-access-member {
    border-color: rgba(101, 132, 136, 0.35);
    background: rgba(20, 33, 36, 0.72);
}

body.community-theme-night .album-access-empty,
body.community-theme-night .album-access-profile small {
    color: #a9bebd;
}

body.community-theme-night .album-add-photo-toggle > summary,
body.community-theme-night .album-settings-toggle > summary {
    color: #f5a554;
}

body.community-theme-night .notification-item {
    background: rgba(33, 54, 58, 0.96);
}

body.community-theme-night .notification-item.is-unread {
    border-color: rgba(126, 216, 207, 0.28);
    background: rgba(27, 46, 49, 0.98);
}

body.community-theme-night .notification-item-badge {
    background: rgba(21, 36, 39, 0.92);
    color: #9fe5dd;
}

body.community-theme-night .notification-item-text {
    color: #f2f8f7;
}

body.community-theme-night .notification-item-meta {
    color: #a9bebd;
}

/* Discussion associée à chaque photo dans la visionneuse d'album. */
.photo-comment-count {
    position: absolute;
    right: 8px;
    bottom: 46px;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.56);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    pointer-events: none;
}

.album-photo-dialog {
    width: min(96vw, 1600px);
    max-width: none;
    height: min(92vh, 920px);
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #122225;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}

.album-photo-dialog::backdrop {
    background: rgba(0, 0, 0, 0.88);
}

.album-photo-dialog-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 26vw, 460px);
    width: 100%;
    height: 100%;
}

.album-photo-dialog-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 24px;
    background: #080d0f;
}

.album-photo-dialog-stage > img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: translate3d(0, 0, 0);
    transition: transform 180ms ease, opacity 180ms ease;
    user-select: none;
    -webkit-user-drag: none;
}

.album-photo-dialog-stage > img.is-swiping {
    transition: none;
}

.album-photo-dialog-stage > img.slide-in-from-right {
    animation: album-photo-slide-in-right 220ms ease-out;
}

.album-photo-dialog-stage > img.slide-in-from-left {
    animation: album-photo-slide-in-left 220ms ease-out;
}

@keyframes album-photo-slide-in-right {
    from { transform: translate3d(18%, 0, 0); opacity: 0.45; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes album-photo-slide-in-left {
    from { transform: translate3d(-18%, 0, 0); opacity: 0.45; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
}

.album-photo-dialog-stage:fullscreen,
.album-photo-dialog-stage:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    padding: 0;
    background: #000;
}

.album-photo-dialog-stage:fullscreen > img,
.album-photo-dialog-stage:-webkit-full-screen > img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

body.album-photo-fullscreen-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.album-photo-dialog.is-photo-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    min-width: 100vw;
    height: var(--album-fullscreen-height, 100dvh);
    min-height: var(--album-fullscreen-height, 100dvh);
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    outline: 0;
    background: #000;
    box-shadow: none;
}

.album-photo-dialog.is-photo-fullscreen::backdrop {
    background: #000;
}

.album-photo-dialog.is-photo-fullscreen .album-photo-dialog-shell {
    display: block;
}

.album-photo-dialog.is-photo-fullscreen .album-photo-dialog-stage {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    background: #000;
}

.album-photo-dialog.is-photo-fullscreen .album-photo-dialog-stage > img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

.album-photo-dialog.is-photo-fullscreen .album-photo-comments-panel {
    display: none;
}

.album-photo-dialog.is-photo-fullscreen .album-photo-dialog-fullscreen {
    top: calc(12px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
}

.album-photo-dialog.is-photo-fullscreen .album-photo-dialog-close {
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
}

.album-photo-dialog.is-photo-fullscreen .album-photo-dialog-counter {
    top: calc(14px + env(safe-area-inset-top));
}

.album-photo-dialog-close,
.album-photo-dialog-fullscreen,
.album-photo-dialog-nav,
.album-photo-dialog-counter {
    position: absolute;
    z-index: 3;
    background: rgba(0, 0, 0, 0.58);
    color: #fff;
}

.album-photo-dialog-close,
.album-photo-dialog-fullscreen,
.album-photo-dialog-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.album-photo-dialog-fullscreen {
    top: 12px;
    left: 12px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.album-photo-dialog-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
}

.album-photo-dialog-counter {
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
}

.album-photo-dialog-report {
    position: absolute;
    z-index: 3;
    bottom: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    color: #f2d0c8;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.album-photo-dialog-report:hover {
    background: rgba(201, 79, 41, 0.92);
    color: #fff;
}

.album-photo-dialog-nav {
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    font-size: 1.6rem;
}

.album-photo-dialog-prev {
    left: 8px;
}

.album-photo-dialog-next {
    right: 8px;
}

.album-photo-comments-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #f8fbfa;
    color: #243b39;
}

.album-photo-comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px;
    border-bottom: 1px solid #dce8e5;
}

.album-photo-comments-head > span {
    min-width: 25px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #e1f0ed;
    color: #176b60;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.album-photo-comments-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

.album-photo-comments-empty,
.album-photo-comment-login {
    margin: 0;
    color: #71817f;
    font-size: 0.86rem;
    line-height: 1.5;
}

.album-photo-comment {
    padding: 10px 0;
    border-bottom: 1px solid #e1eae8;
}

.album-photo-comment:last-child {
    border-bottom: 0;
}

.album-photo-comment-head,
.album-photo-comment-profile {
    display: flex;
    align-items: center;
    gap: 7px;
}

.album-photo-comment-head {
    justify-content: space-between;
}

.album-photo-comment-profile {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.album-photo-comment-profile img,
.album-photo-comment-profile > span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.album-photo-comment-profile img {
    object-fit: cover;
}

.album-photo-comment-profile > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dcecea;
    color: #176b60;
    font-size: 0.65rem;
    font-weight: 700;
}

.album-photo-comment-head time {
    flex-shrink: 0;
    color: #899997;
    font-size: 0.68rem;
}

.album-photo-comment > p {
    margin: 7px 0 0 35px;
    color: #324b48;
    font-size: 0.86rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.album-photo-comment-form {
    display: grid;
    gap: 9px;
    padding: 14px;
    border-top: 1px solid #dce8e5;
}

.album-photo-comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 78px;
    max-height: 150px;
    padding: 10px;
    border: 1px solid #c9d8d5;
    border-radius: 10px;
    background: #fff;
    color: #243b39;
    font: inherit;
}

.album-photo-comment-form .mini-action {
    justify-self: start;
}

.album-photo-comment-error {
    margin: 0;
    color: #b83232;
    font-size: 0.78rem;
}

.album-photo-comment-login {
    padding: 14px;
    border-top: 1px solid #dce8e5;
}

body.site-theme-night .album-photo-comments-panel {
    background: #142629;
    color: #edf6f4;
}

body.site-theme-night .album-photo-comments-head,
body.site-theme-night .album-photo-comment-form,
body.site-theme-night .album-photo-comment-login {
    border-color: rgba(113, 151, 150, 0.3);
}

body.site-theme-night .album-photo-comments-head > span,
body.site-theme-night .album-photo-comment-profile > span {
    background: rgba(44, 104, 97, 0.45);
    color: #c9f0ea;
}

body.site-theme-night .album-photo-comment {
    border-color: rgba(113, 151, 150, 0.22);
}

body.site-theme-night .album-photo-comment > p {
    color: #d9e8e5;
}

body.site-theme-night .album-photo-comments-empty,
body.site-theme-night .album-photo-comment-login,
body.site-theme-night .album-photo-comment-head time {
    color: #a9bebd;
}

body.site-theme-night .album-photo-comment-form textarea {
    border-color: #35575a;
    background: #20383b;
    color: #eef6f5;
}

@media (max-width: 760px) {
    .album-photo-dialog {
        width: 96vw;
        height: 94vh;
    }

    .album-photo-dialog-shell {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(42vh, 55%) minmax(0, 1fr);
    }

    .album-photo-dialog-stage {
        padding: 46px 48px 18px;
        touch-action: pan-y pinch-zoom;
    }

    .album-photo-dialog.is-photo-fullscreen {
        width: 100vw;
        height: var(--album-fullscreen-height, 100dvh);
    }

    .album-photo-dialog.is-photo-fullscreen .album-photo-dialog-stage {
        padding: 0;
    }

    .album-photo-dialog.is-photo-fullscreen .album-photo-dialog-fullscreen {
        top: calc(8px + env(safe-area-inset-top));
        left: calc(8px + env(safe-area-inset-left));
        min-height: 34px;
        padding: 0 11px;
        font-size: 0.72rem;
    }

    .album-photo-dialog.is-photo-fullscreen .album-photo-dialog-close {
        top: calc(8px + env(safe-area-inset-top));
        right: calc(8px + env(safe-area-inset-right));
        width: 34px;
        height: 34px;
    }

    .album-photo-dialog.is-photo-fullscreen .album-photo-dialog-counter {
        top: auto;
        bottom: calc(10px + env(safe-area-inset-bottom));
    }

    .album-photo-dialog.is-photo-fullscreen .album-photo-dialog-prev {
        left: calc(4px + env(safe-area-inset-left));
    }

    .album-photo-dialog.is-photo-fullscreen .album-photo-dialog-next {
        right: calc(4px + env(safe-area-inset-right));
    }

    .album-photo-comments-head {
        padding: 12px 14px;
    }

    .album-photo-comments-list {
        padding: 8px 14px;
    }

    .album-photo-comment-form {
        padding: 10px 14px;
    }
}

/* Page détail album : header marketing masqué sur mobile → on colle le slide
   de navigation tout en haut (pas de gap community-page). Scopé album-detail. */
@media (max-width: 720px) {
    body.album-detail .community-page {
        padding-top: 0;
    }
}

.classified-form-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    width: fit-content;
}

.classified-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.classified-form-actions,
.classified-actions,
.classified-tags,
.classified-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.classified-filters {
    margin-bottom: 18px;
}

.classified-filters .admin-input {
    flex: 1 1 180px;
}

.classified-list,
.classifieds-list {
    display: grid;
    gap: 16px;
}

.classified-card {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid #eef2f7;
    border-radius: 20px;
    background: #fff;
}

.classified-card-no-image {
    grid-template-columns: 1fr;
}

.classified-card.is-closed {
    opacity: .74;
}

/* Petite annonce DANS LE FIL : liseré orange fin pour la distinguer des publications */
.community-feed .classified-card,
body.community-theme-night .community-feed .classified-card,
body.site-theme-night .community-feed .classified-card {
    border-color: var(--orange, #1E3D6B);
    border-width: 2px;
}

.classified-image {
    min-height: 100%;
    background: var(--bg-light);
}

.classified-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
}

.classified-body {
    padding: 18px;
}

.classified-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
}

.classified-head h3 {
    margin: 8px 0 0;
    color: var(--dark);
}

.classified-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf9f7;
    color: #26766c;
    font-size: .8rem;
    font-weight: 800;
}

.classified-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff3ec;
    color: var(--orange, #1E3D6B);
    white-space: nowrap;
}

.classified-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    color: #5b677a;
    line-height: 1.55;
}

.classified-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8f5f3;
    color: #4A6B5A;
    font-weight: 800;
    font-size: .82rem;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
}

.classified-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.classified-meta-text {
    min-width: 0;
    flex: 1 1 auto;
}

.classified-description {
    margin: 0 0 16px;
    color: var(--dark);
    line-height: 1.65;
}

.classified-availability {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 2px 0 12px;
    padding: 5px 12px;
    background: #e8f5f3;
    color: #4A6B5A;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
}

.classified-availability svg {
    flex: 0 0 auto;
}

body.community-theme-night .classified-availability,
body.site-theme-night .classified-availability {
    background: #1f3b38;
    color: #7fd8c9;
}

/* Petites annonces affichées sur le profil de leur auteur */
.profile-classifieds {
    margin-bottom: 18px;
}

.profile-classifieds-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    font-size: 1.15rem;
    color: var(--dark);
}

.profile-classifieds-title svg {
    flex: 0 0 auto;
    color: var(--orange, #1E3D6B);
}

/* Hébergements & locations entre membres : traitement distinctif (point fort communauté) */
.classified-card--stay {
    border: 1px solid #f2c19f;
    box-shadow: 0 8px 26px rgba(214, 110, 58, .12);
}

.classified-stay-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 6px 14px;
    background: #fdeee3;
    color: var(--orange, #1E3D6B);
    border-radius: 999px;
    font-weight: 800;
    font-size: .88rem;
    letter-spacing: .01em;
}

.classified-stay-banner svg {
    flex: 0 0 auto;
}

.classified-stay-pinned {
    margin-left: 4px;
    padding: 2px 9px;
    background: var(--orange, #1E3D6B);
    color: #fff;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.classified-stay-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 2px 0 12px;
}

.classified-stay-info .classified-availability {
    margin: 0;
}

.classified-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
}

.classified-chip svg {
    flex: 0 0 auto;
}

.classified-chip--place {
    background: #fdeee3;
    color: var(--orange, #1E3D6B);
}

body.community-theme-night .classified-card--stay,
body.site-theme-night .classified-card--stay {
    border-color: #7a4a2e80;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .25);
}

body.community-theme-night .classified-stay-banner,
body.site-theme-night .classified-stay-banner,
body.community-theme-night .classified-chip--place,
body.site-theme-night .classified-chip--place {
    background: #3a2517;
    color: #f0a877;
}

.classifieds-publish-card,
.classifieds-list-card {
    overflow: hidden;
}

body.community-theme-night .classified-card {
    background: #192a2ef5;
    border-color: #65848842;
}

body.community-theme-night .classified-head h3,
body.community-theme-night .classified-description {
    color: #f2f8f7;
}

body.community-theme-night .classified-meta {
    color: #a9bebd;
}

body.community-theme-night .classified-tags span {
    background: #254643;
    color: #c7f3ed;
}

body.community-theme-night .classified-price {
    background: #553026;
    color: #ffd8c8;
}

body.site-theme-night .classified-card {
    background: #192a2ef5;
    border-color: #65848842;
}

body.site-theme-night .classified-head h3,
body.site-theme-night .classified-description {
    color: #f2f8f7;
}

body.site-theme-night .classified-meta {
    color: #a9bebd;
}

body.site-theme-night .classified-tags span {
    background: #254643;
    color: #c7f3ed;
}

body.site-theme-night .classified-price {
    background: #553026;
    color: #ffd8c8;
}

body.site-theme-night .mini-action-secondary {
    background: rgba(31, 49, 53, 0.96);
    color: #eef6f5;
}

@media (max-width: 720px) {
    .community-card.classifieds-publish-card,
    .community-card.classifieds-list-card {
        border-radius: 22px;
        padding: 22px 18px;
    }

    .classifieds-publish-card .section-heading,
    .classifieds-list-card .section-heading {
        margin-bottom: 16px;
    }

    .classifieds-publish-card .section-heading h2,
    .classifieds-list-card .section-heading h2 {
        margin-bottom: 8px;
        font-size: 1.5rem;
        line-height: 1.08;
    }

    .classifieds-publish-card .section-heading p,
    .classifieds-list-card .section-heading p {
        font-size: 0.95rem;
        line-height: 1.5;
        max-width: 30rem;
    }

    .classified-form-toggle {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        border-radius: 16px;
        box-shadow: 0 14px 30px rgba(201, 79, 41, 0.22);
    }

    .classified-form-grid,
    .classified-card {
        grid-template-columns: 1fr;
    }

    .classified-filters {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(120, 146, 150, 0.16);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    .classified-filters .admin-input {
        flex: 1 1 auto;
        min-height: 48px;
        border-radius: 16px;
    }

    .classified-filters .mini-action,
    .classified-filters .mini-action-secondary {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        border-radius: 14px;
    }

    .classified-list {
        gap: 14px;
    }

    .classified-card {
        border-radius: 22px;
        border-color: rgba(120, 146, 150, 0.18);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
    }

    .classified-image img {
        min-height: 190px;
        max-height: 220px;
    }

    .classified-body {
        padding: 16px;
    }

    .classifieds-list-card > .section-heading {
        padding-bottom: 2px;
    }

    .classified-head {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 12px;
    }

    .classified-head h3 {
        margin-top: 6px;
        font-size: 1.6rem;
        line-height: 1.08;
    }

    .classified-tags {
        gap: 8px;
    }

    .classified-tags span {
        min-height: 30px;
        padding: 6px 11px;
        font-size: 0.78rem;
    }

    .classified-price {
        min-height: 32px;
        padding: 6px 11px;
        font-size: 0.88rem;
    }

    .classified-price {
        white-space: normal;
    }

    .classified-meta {
        margin-bottom: 12px;
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .classified-description {
        margin-bottom: 14px;
        font-size: 1rem;
        line-height: 1.62;
    }
    /* Le clamp est porté par .is-clamped (ajouté/retiré par le JS « Voir plus »),
       pas par la classe de base — sinon « Voir plus » ne déplie jamais. */
    .classified-description.is-clamped {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .classified-actions {
        gap: 8px;
        align-items: stretch;
    }

    .classified-actions .inline-form,
    .classified-actions .report-form {
        width: 100%;
    }

    .classified-actions .mini-action,
    .classified-actions .report-select,
    .classified-form-actions .btn-search,
    .classified-form-actions .mini-action {
        width: 100%;
        justify-content: center;
    }

    .classified-actions .mini-action {
        min-height: 44px;
        border-radius: 14px;
    }

    .classified-actions .report-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(120, 146, 150, 0.14);
    }

    .classified-actions .report-select {
        min-height: 42px;
        border-radius: 12px;
        font-size: 0.9rem;
        opacity: 0.88;
    }

    .classified-actions .mini-action-secondary {
        background: rgba(255, 255, 255, 0.04);
    }

    body.community-page-annonces .fab-container {
        right: 14px;
        bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }

    body.community-page-annonces .fab-btn {
        width: 48px;
        height: 48px;
        box-shadow: 0 10px 24px rgba(201, 79, 41, 0.28);
    }

    body.community-page-annonces .fab-actions {
        gap: 8px;
        bottom: calc(100% + 8px);
    }
}

/* ── Mes événements ── */
.my-event-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.my-event-card--past { opacity: 0.72; }

.my-event-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.my-event-card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--dark);
}
.my-event-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #5b677a;
}
.my-event-card-sep { color: #c9d1d9; }
.my-event-card-count { font-size: 0.82rem; color: #9ca3af; }
.my-event-card-desc {
    margin: 0;
    font-size: 0.88rem;
    color: #6b7280;
    line-height: 1.55;
}
.my-event-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

/* dark mode */
body.community-theme-night .my-event-card {
    background: #192a2ef5;
    border-color: #65848842;
}
body.community-theme-night .my-event-card-title { color: #f2f8f7; }
body.community-theme-night .my-event-card-meta  { color: #a9bebd; }
body.community-theme-night .my-event-card-sep   { color: #3d5c60; }
body.community-theme-night .my-event-card-count { color: #6b8e8c; }
body.community-theme-night .my-event-card-desc  { color: #8fb0ae; }
body.community-theme-night .my-event-card-actions { border-top-color: #2a4347; }

.post-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.message-thread-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef2f7;
}

.message-thread-header > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.message-thread-header span {
    color: #5b677a;
    font-size: 0.92rem;
}

/* ── Nouveau header de conversation ──────────────────────────────── */

.conv-thread-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid #eef2f7;
}

.conv-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-light, #f0f4f2);
    color: #3a9e8d;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s;
}

.conv-back-btn:hover {
    background: #d8f0ea;
}

.conv-thread-header-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    display: block;
    text-decoration: none;
}

.conv-thread-header-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a9e8d, #2d7a6e);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}

.conv-thread-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.conv-thread-online {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #27ae60;
    border: 2px solid #fff;
}

.conv-thread-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.conv-thread-header-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.conv-thread-header-name strong {
    font-size: 1rem;
    color: var(--dark, #1a2e2b);
}

.conv-thread-age {
    font-size: 0.82rem;
    color: #5b8c84;
    font-weight: 500;
}

.conv-thread-status-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #27ae60;
    background: rgba(39,174,96,0.1);
    border-radius: 999px;
    padding: 1px 8px;
}

.conv-thread-header-meta {
    display: flex;
    gap: 4px;
    font-size: 0.83rem;
    color: #8fa0a8;
}

.conv-thread-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.conv-keyboard-actions-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #d7e1e6;
    border-radius: 50%;
    background: #fff;
    color: #587078;
    cursor: pointer;
    flex-shrink: 0;
}

.conv-member-block-form {
    margin: 0;
}

.conv-member-block-btn,
.conv-thread-header .btn-block-videocall,
.conv-thread-header .conv-mute-toggle-btn,
.conv-media-gallery-btn,
.conv-delete-conversation-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Le bouton blocage hérite de .icon-action (36px, défini ailleurs) : on le force
   à 40px avec une icône 18px, pour qu'il ait exactement la même taille que les
   autres icônes d'action de l'en-tête de conversation. */
.conv-thread-header-actions .conv-member-block-btn {
    width: 40px;
    height: 40px;
}
.conv-thread-header-actions .conv-member-block-btn svg {
    width: 18px;
    height: 18px;
}

.conv-media-gallery-btn {
    border: 1px solid #c8d2e1;
    border-radius: 50%;
    background: #fff;
    color: #397f75;
    cursor: pointer;
}

.conv-media-gallery-btn:hover {
    background: #eef7f5;
    border-color: #83bcb2;
}

.conv-delete-conversation-btn {
    border: 1px solid #e7aaa5;
    border-radius: 50%;
    background: #fff4f3;
    color: #bd443c;
    cursor: pointer;
}

.conv-delete-conversation-btn:hover {
    border-color: #d86b63;
    background: #fde7e5;
}

.conv-delete-conversation-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.conv-member-block-btn {
    opacity: 1;
    background: #d66d64;
    color: #fff;
}

.conv-member-block-btn:hover {
    opacity: 1;
    background: #c9574e;
}

.conv-member-block-btn.is-blocked {
    background: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

body.community-theme-night .conv-thread-header {
    border-bottom-color: #2e5450;
}

body.community-theme-night .conv-back-btn {
    background: rgba(255,255,255,0.07);
    color: #5ec9b6;
}

body.community-theme-night .conv-back-btn:hover {
    background: rgba(58,158,141,0.2);
}

body.community-theme-night .conv-thread-online {
    border-color: #1b3235;
}

body.community-theme-night .conv-thread-header-name strong {
    color: #e8f4f2;
}

body.community-theme-night .conv-member-block-btn {
    background: #c9574e;
}

body.community-theme-night .conv-delete-conversation-btn {
    border-color: #854b48;
    background: rgba(189, 68, 60, 0.16);
    color: #f08b83;
}

@media (max-width: 560px) {
    .conv-thread-header {
        gap: 8px;
    }

    .conv-thread-header-actions {
        gap: 6px;
    }

    .conv-member-block-btn,
    .conv-thread-header .btn-block-videocall,
    .conv-media-gallery-btn,
    .conv-delete-conversation-btn {
        width: 36px;
        height: 36px;
    }
}

.messages-inbox-card.has-active-conversation {
    position: relative;
}

.conversation-media-gallery[hidden] {
    display: none !important;
}

.conversation-media-gallery {
    position: absolute;
    inset: 0;
    z-index: 780;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 22px;
    border-radius: inherit;
    background: #fff;
    color: #244844;
}

.conversation-media-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5eeec;
}

.conversation-media-gallery-header > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conversation-media-gallery-header strong {
    font-size: 1.15rem;
}

.conversation-media-gallery-header span,
.conversation-media-gallery-item time,
.conversation-media-gallery-empty {
    color: #7d9198;
    font-size: 0.8rem;
}

.conversation-media-gallery-header button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #edf3f2;
    color: #496164;
    cursor: pointer;
}

.conversation-media-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
    padding-top: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.conversation-media-gallery-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.conversation-media-gallery-item button,
.conversation-media-gallery-item video {
    width: 100%;
    aspect-ratio: 1;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #edf2f1;
}

.conversation-media-gallery-item button {
    padding: 0;
    cursor: zoom-in;
}

.conversation-media-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.conversation-media-gallery-item video {
    display: block;
    object-fit: cover;
}

body.tn-conversation-gallery-open .message-compose-form {
    display: none !important;
}

body.community-theme-night .conversation-media-gallery,
body.community-theme-night .msg-media-library {
    border-color: #31514f;
    background: #17262b;
    color: #e5f1ef;
}

body.community-theme-night .conversation-media-gallery-header {
    border-bottom-color: #31514f;
}

body.community-theme-night .conversation-media-gallery-header button,
body.community-theme-night .msg-media-library-close {
    background: #243b3e;
    color: #d8e8e5;
}

body.community-theme-night .msg-media-library-head {
    color: #d8e8e5;
}

@media (max-width: 720px) {
    .conversation-media-gallery {
        position: fixed;
        padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
        border-radius: 0;
    }

    .conversation-media-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }
}

@media (max-width: 720px) {
    .community-card.messages-inbox-card.has-active-conversation {
        padding: 10px 12px 12px;
    }

    .messages-inbox-card.has-active-conversation .conv-thread-header {
        position: relative;
        gap: 6px;
        min-height: 46px;
        padding-bottom: 7px;
        margin-bottom: 0;
    }

    .messages-inbox-card.has-active-conversation .conv-back-btn {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .messages-inbox-card.has-active-conversation .conv-thread-header-avatar {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }

    .messages-inbox-card.has-active-conversation .conv-thread-online {
        width: 10px;
        height: 10px;
    }

    .messages-inbox-card.has-active-conversation .conv-thread-header-info,
    .messages-inbox-card.has-active-conversation .conv-thread-header-name,
    .messages-inbox-card.has-active-conversation .conv-thread-header-name .profile-link {
        min-width: 0;
    }

    .messages-inbox-card.has-active-conversation .conv-thread-header-name {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .messages-inbox-card.has-active-conversation .conv-thread-header-name .profile-link {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .messages-inbox-card.has-active-conversation .conv-thread-header-name strong {
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .messages-inbox-card.has-active-conversation .conv-thread-age,
    .messages-inbox-card.has-active-conversation .conv-thread-status-label,
    .messages-inbox-card.has-active-conversation .conv-thread-header-meta {
        display: none;
    }

    .messages-inbox-card.has-active-conversation .conv-keyboard-actions-toggle {
        display: inline-flex;
    }

    .messages-inbox-card.has-active-conversation .conv-thread-header-actions {
        display: none;
        position: absolute;
        z-index: 30;
        top: 42px;
        right: 0;
        gap: 7px;
        padding: 7px;
        border: 1px solid #dfe8eb;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(28, 54, 58, 0.18);
    }

    .messages-inbox-card.has-active-conversation .conv-thread-header-actions.is-open {
        display: flex;
    }

    body.community-theme-night .messages-inbox-card.has-active-conversation .conv-keyboard-actions-toggle,
    body.community-theme-night .messages-inbox-card.has-active-conversation .conv-thread-header-actions {
        border-color: #31514f;
        background: #17262b;
        color: #d6e5e3;
    }
}

.message-request-list {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef2f7;
}

.message-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
    max-height: 480px;
    overflow-y: auto;
}

.message-bubble {
    max-width: 78%;
    padding: 14px 16px;
    border: 1px solid rgba(221, 235, 237, 0.82);
    border-radius: 18px;
    background:
        radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, #fbfefe 0%, #eef7f6 56%, #e7f1f0 100%);
    box-shadow: 0 10px 24px rgba(43, 79, 83, 0.08);
}

.message-bubble.is-mine {
    align-self: flex-end;
    border-color: rgba(255, 220, 206, 0.78);
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, #fff4ee 0%, #ffe5d8 52%, #f8d0c4 100%);
    box-shadow: 0 10px 24px rgba(156, 87, 65, 0.12);
}

.message-bubble.is-mine time {
    color: rgba(116, 79, 70, 0.68);
}

.message-bubble p {
    margin: 0;
    line-height: 1.5;
}

/* Liens dans les bulles : la couleur de lien globale (orange) est illisible sur
   la bulle terracotta « envoyé » (surtout en nuit). On reprend la couleur du
   texte de la bulle + soulignement — lisible dans les 4 cas jour/nuit × envoyé/reçu. */
.message-bubble a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.message-bubble a:hover {
    text-decoration-thickness: 2px;
}

.message-bubble time {
    display: block;
    margin-top: 8px;
    color: #5b677a;
    font-size: 0.8rem;
}

.post-header {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.post-header .friendship-actions {
    position: absolute;
    top: 0;
    right: 0;
}

.post-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    padding-right: 48px;
}

.post-meta span,
.post-meta time {
    color: #5b677a;
    font-size: 0.92rem;
}

/* Pastille « publié dans le groupe X » dans le fil (posts des groupes du membre). */
.post-group-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    margin-top: 1px;
    padding: 2px 9px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #4A6B5A;
    background: rgba(42, 122, 110, 0.12);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease;
}

.post-group-tag:hover {
    background: rgba(42, 122, 110, 0.22);
}

.post-group-tag svg {
    flex-shrink: 0;
}

.post-content {
    margin: 0;
    line-height: 1.7;
    color: var(--dark);
}

.post-place-link {
    color: var(--orange, #1E3D6B);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-place-link:hover {
    text-decoration: none;
}

/* Liens externes saisis par les membres : masqués (anti-sites douteux) */
.post-link-removed {
    color: var(--text-muted, #8a98a0);
    font-style: italic;
    font-size: 0.92em;
}

/* Liens autorisés (réseaux sociaux de confiance) : cliquables */
.post-link {
    color: var(--orange, #1E3D6B);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.post-link:hover {
    text-decoration: none;
}

/* Avertissement composer : profil privé/amis → publication non visible (ou limitée) dans le fil */
.post-composer-visibility-note {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fdf6e3;
    border: 1px solid #f0e2bf;
    color: #8a6d3b;
    font-size: 0.88rem;
    line-height: 1.5;
}

.post-composer-visibility-note a {
    color: #8a6d3b;
    font-weight: 600;
}

.post-stay {
    margin: 16px 0 4px;
    overflow: hidden;
    border: 1px solid #d6e4e1;
    border-radius: 16px;
    background: #f7fbfa;
}

.post-stay-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.post-stay-toggle::-webkit-details-marker {
    display: none;
}

.post-stay-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.post-stay-weekly-presence {
    width: fit-content;
    margin-bottom: 3px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(47, 143, 111, 0.12);
    color: #176b60;
    font-size: 0.76rem;
    font-weight: 700;
}

.post-stay-copy strong {
    color: #233d3a;
    font-size: 0.94rem;
}

.post-stay-copy small {
    color: #617572;
    font-size: 0.8rem;
    line-height: 1.4;
}

.post-stay-open-label {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: #e6f2ef;
    color: #176b60;
    font-size: 0.8rem;
    font-weight: 700;
}

.post-stay[open] .post-stay-toggle {
    border-bottom: 1px solid #d6e4e1;
}

.post-stay[open] .post-stay-open-label {
    background: transparent;
    color: #71817f;
    font-size: 0;
}

.post-stay[open] .post-stay-open-label::before {
    content: "Refermer";
    font-size: 0.8rem;
}

.post-stay-form {
    padding: 16px;
}

.post-stay-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 180px)) minmax(180px, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.post-stay-fields label {
    display: grid;
    gap: 5px;
    color: #536865;
    font-size: 0.8rem;
    font-weight: 600;
}

.post-stay-fields input,
.post-stay-fields select {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cbd9d6;
    border-radius: 10px;
    background: #fff;
    color: #253a38;
    font-size: 0.88rem;
}

body.community-theme-night .post-stay {
    border-color: rgba(101, 132, 136, 0.38);
    background: rgba(25, 46, 48, 0.72);
}

body.community-theme-night .post-stay-copy strong {
    color: #f2f8f7;
}

body.community-theme-night .post-stay-copy small,
body.community-theme-night .post-stay-fields label {
    color: #a9bebd;
}

body.community-theme-night .post-stay-weekly-presence {
    background: rgba(44, 104, 97, 0.42);
    color: #c9f0ea;
}

body.community-theme-night .post-stay-open-label {
    background: rgba(44, 104, 97, 0.42);
    color: #c9f0ea;
}

body.community-theme-night .post-stay[open] .post-stay-toggle {
    border-bottom-color: rgba(101, 132, 136, 0.38);
}

body.community-theme-night .post-stay[open] .post-stay-open-label {
    color: #a9bebd;
}

body.community-theme-night .post-stay-fields input,
body.community-theme-night .post-stay-fields select {
    border-color: rgba(101, 132, 136, 0.55);
    background: #20383b;
    color: #f2f8f7;
}

@media (max-width: 700px) {
    .post-stay-toggle {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .post-stay-open-label {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .post-stay-fields {
        grid-template-columns: 1fr;
    }

    .post-stay-form .mini-action {
        width: 100%;
    }
}

/* ── Bloc "nouveau membre" ─────────────────────────────────────── */
.post-meta-joined-label {
    font-size: 0.9rem;
    color: #3a9e8d;
    font-weight: 600;
}

.post-joined-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #edfaf6 0%, #f0faf8 100%);
    border: 1px solid #c3ede4;
    border-radius: 18px;
    padding: 16px 20px;
}

.post-joined-wave {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.post-joined-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.post-joined-welcome {
    flex: 1;
    margin: 0;
    font-size: 0.93rem;
    color: #2d5a54;
    line-height: 1.5;
}

.post-joined-welcome-name {
    font-weight: 700;
    color: #1a3a36;
    text-decoration: none;
}

.post-joined-welcome-name:hover {
    text-decoration: underline;
}

.post-joined-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.post-joined-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--dark);
    text-decoration: none;
}

.post-joined-name:hover {
    text-decoration: underline;
}

.post-joined-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: #3a9e8d;
    background: rgba(58, 158, 141, 0.12);
    border: 1px solid rgba(58, 158, 141, 0.28);
    border-radius: 20px;
    padding: 2px 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.post-joined-sub {
    font-size: 0.88rem;
    color: #5b8c84;
}

body.community-theme-night .post-joined-banner {
    background: linear-gradient(135deg, rgba(37, 70, 65, 0.55) 0%, rgba(30, 55, 52, 0.55) 100%);
    border-color: #2e6460;
}

body.community-theme-night .post-joined-name {
    color: #e8f4f2;
}

body.community-theme-night .post-joined-sub {
    color: #8bbfb8;
}

body.site-theme-night .post-joined-banner {
    background: linear-gradient(135deg, rgba(37, 70, 65, 0.55) 0%, rgba(30, 55, 52, 0.55) 100%);
    border-color: #2e6460;
}

body.site-theme-night .post-joined-name {
    color: #e8f4f2;
}

body.site-theme-night .post-joined-sub {
    color: #8bbfb8;
}

.post-lieu-image {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: 12px;
    margin-bottom: 10px;
    background: #0d1e22;
}

body.community-theme-night .post-meta-joined-label {
    color: #5ec9b6;
}

body.site-theme-night .post-meta-joined-label {
    color: #5ec9b6;
}

.post-engagement {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.post-engagement .favorite-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid #ffd1c3;
    border-radius: 999px;
    background: #fff7f3;
    color: var(--orange, #1E3D6B) !important;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.post-engagement .favorite-button:hover,
.post-engagement .favorite-button.is-active {
    border-color: var(--orange, #1E3D6B);
    background: var(--orange, #1E3D6B);
    color: #fff !important;
}

body.community-theme-night .post-engagement .favorite-button {
    border-color: rgba(212, 102, 63, 0.55);
    background: rgba(212, 102, 63, 0.14);
    color: #f2a184 !important;
}

body.community-theme-night .post-engagement .favorite-button:hover,
body.community-theme-night .post-engagement .favorite-button.is-active {
    border-color: var(--orange, #1E3D6B);
    background: var(--orange, #1E3D6B);
    color: #fff !important;
}

.comment-own-actions {
    display: flex;
    gap: 10px;
    margin-top: 0;
}

.comment-action-btn {
    background: none;
    border: none;
    font-size: 0.76rem;
    color: #b0b8c4;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
}

.comment-action-btn:hover {
    color: #5b8c84;
}

.comment-action-btn--delete:hover,
.comment-action-btn--confirm {
    color: #c0392b;
    font-weight: 600;
}

.comment-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.comment-edit-textarea {
    min-height: 64px;
    resize: vertical;
}

.comment-editor-btns {
    display: flex;
    gap: 10px;
    align-items: center;
}

.post-delete-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: #b0b8c4;
    font-size: 0.78rem;
    cursor: pointer;
    padding: 4px 2px;
    transition: color 0.15s;
}

.post-delete-btn:hover {
    color: #c0392b;
}

.post-delete-btn--confirm {
    color: #c0392b;
    font-weight: 600;
}

/* Actions discrètes sur ses propres posts (modifier / supprimer) */
.post-own-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Quand la poubelle (modération) et le drapeau (signaler) coexistent, on les
   regroupe à droite au lieu de laisser la poubelle flotter au milieu. */
.post-engagement .post-own-actions ~ .report-toggle-wrap {
    margin-left: 8px;
}

.post-action-icon {
    background: none;
    border: none;
    color: #b0b8c4;
    cursor: pointer;
    padding: 5px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}

.post-action-icon svg {
    width: 16px;
    height: 16px;
}

.post-action-icon:hover {
    color: #5b677a;
    background: rgba(0, 0, 0, 0.05);
}

.post-action-icon--delete:hover {
    color: #c0392b;
    background: rgba(192, 57, 43, 0.09);
}

.post-action-icon.is-confirming {
    color: #fff;
    background: #c0392b;
}

.post-comments-count {
    color: #5b677a;
    font-size: 0.92rem;
}

/* Cœur « like » statique (posts non likables, ex. ses propres posts) : orange comme le bouton like */
.post-likes-static {
    color: var(--orange, #1E3D6B) !important;
}

.post-avatar-new-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0 4px;
}

.post-avatar-new {
    width: 300px;
    height: 300px;
    min-width: 300px;
    min-height: 300px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 4px solid #e8f5f3;
    box-shadow: 0 4px 20px rgba(0,0,0,0.13);
    cursor: zoom-in;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.post-avatar-new:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.profile-photo-lightbox {
    border: none;
    padding: 0;
    box-sizing: border-box;
    width: min(96vw, 1600px);
    max-width: none;
    height: min(92vh, 920px);
    max-height: none;
    border-radius: 18px;
    background: #101d20;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    position: fixed;
    inset: 0;
    margin: auto;
}

.profile-photo-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.78);
}

.profile-photo-lightbox:not(.has-profile-panel) {
    width: min(86vw, 700px);
    height: auto;
    max-height: 82vh;
}

.profile-photo-lightbox-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 26vw, 460px);
    width: 100%;
    height: 100%;
}

.profile-photo-lightbox:not(.has-profile-panel) .profile-photo-lightbox-shell {
    display: block;
    height: auto;
}

.profile-photo-lightbox:not(.has-profile-panel) .profile-photo-lightbox-stage {
    height: auto;
    max-height: 82vh;
}

.profile-photo-lightbox-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    padding: 24px;
    background: #05090a;
    overflow: hidden;
}

.profile-photo-imgwrap {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    max-height: 100%;
}

.profile-photo-lightbox #avatar-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 14px;
}

.profile-photo-lightbox:not(.has-profile-panel) #avatar-lightbox-img {
    max-height: calc(82vh - 36px);
}

.profile-photo-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.profile-photo-lightbox-close:hover,
.profile-photo-lightbox-close:focus-visible {
    background: rgba(0, 0, 0, 0.86);
}

.profile-photo-lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.56);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.profile-photo-lightbox-nav:hover,
.profile-photo-lightbox-nav:focus-visible {
    background: rgba(0, 0, 0, 0.82);
}

.profile-photo-lightbox-nav[hidden] {
    display: none;
}

.profile-photo-lightbox-prev {
    left: 12px;
}

.profile-photo-lightbox-next {
    right: 12px;
}

.profile-photo-floating-like {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 9;
    min-width: 64px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
}

.profile-photo-floating-like[hidden] {
    display: none;
}

.profile-photo-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #f8fbfa;
    color: #223836;
}

.profile-photo-panel[hidden] {
    display: none;
}

.profile-photo-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid #dce8e5;
}

.profile-photo-panel-head .favorite-button {
    flex-shrink: 0;
    min-width: 70px;
}

.profile-photo-panel-count {
    padding: 10px 16px;
    color: #71817f;
    font-size: 0.82rem;
    border-bottom: 1px solid #e7efed;
}

.profile-photo-comments {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
}

.profile-photo-comments .comment-item {
    margin-bottom: 12px;
}

.profile-photo-lightbox .comment-avatar img,
.profile-photo-lightbox .comment-avatar span {
    width: 32px;
    height: 32px;
    max-width: none;
    max-height: none;
    border-radius: 50%;
    object-fit: cover;
}

.profile-photo-comments-empty {
    margin: 0;
    color: #71817f;
    font-size: 0.86rem;
    line-height: 1.5;
}

.profile-photo-comment-form {
    display: grid;
    gap: 9px;
    padding: 14px;
    border-top: 1px solid #dce8e5;
}

.profile-photo-comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 82px;
}

.profile-photo-comment-form .mini-action {
    justify-self: start;
}

.profile-photo-comment-error {
    margin: 0;
    color: #b83232;
    font-size: 0.78rem;
}

body.community-theme-night .profile-photo-panel {
    background: #142629;
    color: #edf6f4;
}

body.community-theme-night .profile-photo-panel-head,
body.community-theme-night .profile-photo-panel-count,
body.community-theme-night .profile-photo-comment-form {
    border-color: rgba(113, 151, 150, 0.3);
}

body.community-theme-night .profile-photo-comments-empty,
body.community-theme-night .profile-photo-panel-count {
    color: #a9bebd;
}

@media (max-width: 760px) {
    .profile-photo-lightbox,
    .profile-photo-lightbox:not(.has-profile-panel) {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }

    .profile-photo-lightbox-shell {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 62dvh) minmax(0, 1fr);
    }

    .profile-photo-lightbox-stage {
        align-items: flex-start;
        padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    }

    .profile-photo-lightbox #avatar-lightbox-img {
        max-height: 100%;
        border-radius: 10px;
    }

    .profile-photo-lightbox-close {
        top: calc(8px + env(safe-area-inset-top));
        right: 10px;
    }

    .profile-photo-lightbox-nav {
        width: 42px;
        height: 42px;
        font-size: 1.75rem;
    }

    .profile-photo-lightbox-prev {
        left: 10px;
    }

    .profile-photo-lightbox-next {
        right: 10px;
    }

    .profile-photo-floating-like {
        right: 14px;
        bottom: 14px;
        min-width: 58px;
        padding: 10px 14px;
    }

    .profile-photo-panel-count {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .profile-photo-comments {
        padding: 8px 12px;
        /* Aucun plafond de hauteur ici : les commentaires remplissent tout l'espace
           restant du panneau (flex:1 dans la 2e rangée de la grille). Un ancien
           max-height les écrasait à ~1 commentaire, laissant un grand vide en dessous. */
    }

    .profile-photo-comment-form {
        gap: 7px;
        padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
    }

    .profile-photo-comment-form textarea {
        min-height: 48px;
        max-height: 76px;
    }
}

.post-image-wrapper {
    border-radius: 18px;
    overflow: visible;
}

.post-image-wrapper.post-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.post-image-card {
    position: relative;
    background: var(--bg-light);
}

.post-image-visual {
    position: relative;
    border-radius: 18px;
    overflow: visible;
}

.post-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 720px;
    object-fit: contain;
    border-radius: 18px;
}

.post-image-visual--moderation-blurred {
    cursor: default;
}

.post-image-visual--moderation-blurred::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(to top, rgba(8, 23, 22, .42), rgba(8, 23, 22, .06));
    pointer-events: none;
}


.post-video {
    background: #101b1c;
}

.post-image-grid .post-image {
    height: 220px;
    max-height: 220px;
    object-fit: cover;
}

.post-image-grid > .post-image-card:first-child:last-child {
    grid-column: span 2;
}

.post-image-grid > .post-image-card:first-child:last-child .post-image {
    height: auto;
    max-height: 720px;
    object-fit: contain;
}

.post-image-grid > .post-image-card:first-child:nth-last-child(3),
.post-image-grid > .post-image-card:first-child:nth-last-child(3) ~ .post-image-card:nth-child(2) {
    grid-column: span 1;
}
.post-image-grid > .post-image-card:nth-child(3):last-child {
    grid-column: span 2;
}

.post-image-share {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.post-image-share[open] {
    z-index: 8;
}

.post-image-share-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    background: linear-gradient(180deg, rgba(21, 35, 38, 0.82), rgba(13, 24, 26, 0.76));
    color: #f7fbfa;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    width: fit-content;
    letter-spacing: 0.01em;
    backdrop-filter: blur(12px) saturate(1.1);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.post-image-share-summary::-webkit-details-marker {
    display: none;
}

.post-image-share-summary::before {
    content: '↗';
    font-size: 0.9rem;
    color: currentColor;
    transition: transform 0.16s ease;
}

.post-image-share[open] .post-image-share-summary::before {
    transform: rotate(45deg);
}

.post-image-share-form {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding: 14px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(246, 252, 251, 0.68));
    border: 1px solid rgba(216, 232, 229, 0.62);
    box-shadow:
        0 20px 38px rgba(18, 32, 35, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);
    max-width: min(348px, calc(100vw - 48px));
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.post-image-share-head {
    display: grid;
    gap: 2px;
}

.post-image-share-head strong {
    color: #243a3d;
    font-size: 0.96rem;
    line-height: 1.2;
}

.post-image-share-head span {
    color: #6d7d84;
    font-size: 0.78rem;
    line-height: 1.35;
}

.post-image-share-field {
    display: grid;
    gap: 6px;
}

.post-image-share-field > span {
    color: #4f6468;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.post-image-share-form .admin-input {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 15px;
    border: 1px solid rgba(186, 204, 209, 0.9);
    background: rgba(255, 255, 255, 0.92);
    color: #243a3d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.post-image-share-form .admin-input::placeholder {
    color: #97a4ab;
}

.post-image-share-form input[list] {
    padding-right: 16px;
}

.post-image-share-actions {
    display: flex;
    justify-content: flex-end;
}

.post-image-share-actions .mini-action {
    min-width: 116px;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 10px 20px rgba(211, 84, 0, 0.18);
}

body.community-theme-night .post-image-card,
body.site-theme-night .post-image-card {
    background: rgba(20, 33, 36, 0.92);
}

body.community-theme-night .post-image-share-summary,
body.site-theme-night .post-image-share-summary {
    color: #e8f4f2;
    border-color: rgba(180, 217, 212, 0.38);
    background: linear-gradient(180deg, rgba(13, 23, 25, 0.82), rgba(9, 16, 18, 0.8));
}

body.community-theme-night .post-image-share-summary::before,
body.site-theme-night .post-image-share-summary::before {
    color: #9fd6ce;
}

body.community-theme-night .post-image-share-form,
body.site-theme-night .post-image-share-form {
    background: linear-gradient(180deg, rgba(20, 33, 36, 0.78), rgba(16, 28, 31, 0.7));
    border-color: rgba(122, 155, 159, 0.24);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
}

body.community-theme-night .post-image-share-head strong,
body.site-theme-night .post-image-share-head strong {
    color: #edf6f4;
}

body.community-theme-night .post-image-share-head span,
body.community-theme-night .post-image-share-field > span,
body.site-theme-night .post-image-share-head span,
body.site-theme-night .post-image-share-field > span {
    color: #9fb3b6;
}

body.community-theme-night .post-image-share-form .admin-input,
body.site-theme-night .post-image-share-form .admin-input {
    background: rgba(9, 17, 19, 0.62);
    border-color: rgba(103, 131, 135, 0.36);
    color: #edf6f4;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.community-theme-night .post-image-share-form .admin-input::placeholder,
body.site-theme-night .post-image-share-form .admin-input::placeholder {
    color: #7f9699;
}

@media (max-width: 760px) {
    .post-image-share {
        left: 12px;
        right: 12px;
        top: 12px;
        bottom: auto;
    }

    .post-image-share-summary {
        min-height: 38px;
        padding: 7px 13px;
        font-size: 0.83rem;
    }

    .post-image-share-form {
        max-width: none;
        width: min(100%, 296px);
        padding: 12px;
        border-radius: 18px;
        gap: 10px;
    }

    .post-image-share-head strong {
        font-size: 0.9rem;
    }

    .post-image-share-head span {
        font-size: 0.74rem;
    }

    .post-image-share-form .admin-input {
        min-height: 42px;
        padding: 0 14px;
        border-radius: 13px;
        font-size: 0.94rem;
    }

    .post-image-share-actions .mini-action {
        min-width: 92px;
        min-height: 38px;
        padding: 8px 15px;
        font-size: 0.9rem;
    }
}

.comments-block {
    border-top: 1px solid #eef2f7;
    padding-top: 18px;
}

.comments-block h4 {
    margin: 0 0 14px;
}

.comment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.comment-item {
    padding: 12px 0;
    border-top: 1px solid #eef2f3;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    position: relative;
}

.comment-item:first-child {
    border-top: 0;
    padding-top: 4px;
}

.comment-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: #dff5f1;
    color: #2f554f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
    flex-shrink: 0;
}

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

.comment-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comment-author-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.comment-date {
    color: #8a99a8;
    font-size: 0.76rem;
}

.comment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}

.comment-like-btn,
.comment-like-static {
    border: 0;
    border-radius: 999px;
    background: rgba(197, 91, 53, 0.10);
    color: #9c4f36;
    font-weight: 800;
    font-size: 0.78rem;
    line-height: 1;
    padding: 7px 10px;
    text-decoration: none;
}

.comment-like-btn {
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

.comment-like-btn:hover,
.comment-like-btn.is-active {
    background: var(--orange, #1E3D6B);
    color: #fff;
}

.comment-like-btn:hover {
    transform: translateY(-1px);
}

.comment-item .report-discreet-form {
    position: absolute;
    top: 8px;
    right: 10px;
    margin-left: 0;
}

.report-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}

.report-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.report-form-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0;
}

/* Menu « motif du signalement » : compact, s'insère dans le popover de signalement. */
.report-form-inline .report-reason-select {
    min-height: 34px;
    padding: 5px 9px;
    font-size: .82rem;
}

.report-form-inline[hidden] {
    display: none;
}

.report-toggle-cancel {
    background: none;
    border: none;
    padding: 2px 5px;
    font-size: 0.75rem;
    color: #b0b8c8;
    cursor: pointer;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s;
}

.report-toggle-cancel:hover {
    color: #e06060;
}

.profile-report-form {
    justify-content: center;
    margin-top: 14px;
}

.report-confirm-btn {
    background: none;
    border: 1px solid #e0a0a0;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c0392b;
    cursor: pointer;
    line-height: 1.6;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.report-confirm-btn:hover {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}

.report-discreet-form {
    display: inline-flex;
    margin-top: 0;
    margin-left: auto;
}

.report-discreet-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #b0b8c8;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    border-radius: 4px;
    transition: color 0.15s;
}

.report-discreet-btn:hover {
    color: #e06060;
}

.report-admin-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.online-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #27ae60;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #fff;
}

.btn-compose-attach {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f4f8;
    color: #4a5568;
    border: 1.5px solid #c8d2e1;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-compose-attach:hover {
    background: #e2e8f0;
}

.btn-video-call {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.35);
}

.btn-video-call:hover {
    background: #219a52;
    transform: scale(1.04);
}

.btn-ephemeral-compose {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(230, 126, 34, 0.12);
    color: var(--orange, #1E3D6B);
    border: 2px solid var(--orange, #1E3D6B);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    white-space: nowrap;
}

.btn-ephemeral-compose:hover {
    background: rgba(230, 126, 34, 0.22);
    transform: scale(1.04);
}

.btn-ephemeral-compose.is-active {
    background: var(--orange, #1E3D6B);
    color: #fff;
    border-color: var(--orange, #1E3D6B);
    box-shadow: 0 2px 8px rgba(230, 126, 34, 0.4);
}

.msg-emoji-wrap {
    position: relative;
}

.msg-emoji-panel {
    display: none;
}

.msg-emoji-panel.is-open {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 10px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.msg-emoji-btn {
    background: none;
    border: none;
    padding: 4px 5px;
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 6px;
    line-height: 1;
    transition: background 0.1s;
}

.msg-emoji-btn:hover {
    background: var(--bg-light, #f4f7f9);
}

.btn-emoji-toggle {
    font-size: 1.1rem;
}

body.community-theme-night .msg-emoji-panel.is-open {
    background: #1a2e35;
    border-color: #2a4450;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

body.community-theme-night .msg-emoji-btn:hover {
    background: #243d47;
}

@media (max-width: 720px) {
    .btn-emoji-toggle { display: none; }
}

.message-compose-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
}

.message-compose-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.message-media-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.msg-img-zoom-btn {
    display: block;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    line-height: 0;
}

.message-bubble-image {
    display: block;
    max-width: 100%;
    max-height: 280px;
    border-radius: 12px;
    object-fit: contain;
}

.message-bubble-video {
    display: block;
    max-width: 100%;
    max-height: 280px;
    border-radius: 12px;
}

.message-bubble-audio {
    position: relative;
    display: block;
    width: min(420px, 76vw);
    max-width: 100%;
    padding: 13px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 18px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, rgba(250, 254, 253, 0.92), rgba(235, 244, 242, 0.82));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 12px 26px rgba(26, 53, 57, 0.12);
}

.message-bubble.is-mine .message-bubble-audio {
    border-color: rgba(255, 236, 224, 0.22);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 40%),
        linear-gradient(135deg, rgba(196, 100, 80, 0.84), rgba(135, 75, 75, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 12px 28px rgba(58, 29, 27, 0.2);
}

.message-bubble-audio-label {
    color: #314f50;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
}

.message-bubble.is-mine .message-bubble-audio-label {
    color: rgba(255, 255, 255, 0.96);
}

.message-bubble-audio-native {
    display: block;
    width: 100%;
    height: 36px;
}

.message-bubble-audio.is-enhanced .message-bubble-audio-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.message-audio-custom {
    position: relative;
    z-index: 1;
    display: none;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.message-bubble-audio.is-enhanced .message-audio-custom {
    display: flex;
}

.message-audio-play {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #2f8c7c;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(26, 53, 57, 0.16);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.message-audio-play:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(26, 53, 57, 0.2);
}

.message-bubble.is-mine .message-audio-play {
    background: #fff7f2;
    color: var(--orange, #1E3D6B);
}

.message-audio-icon-pause,
.message-bubble-audio.is-playing .message-audio-icon-play {
    display: none;
}

.message-bubble-audio.is-playing .message-audio-icon-pause {
    display: block;
}

.message-audio-body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.message-audio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.message-audio-time {
    flex: 0 0 auto;
    color: #7f9499;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1;
}

.message-bubble.is-mine .message-audio-time {
    color: rgba(255, 255, 255, 0.72);
}

.message-audio-track {
    position: relative;
    display: block;
    width: 100%;
    height: 24px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: rgba(49, 79, 80, 0.1);
    color: #2f8c7c;
    cursor: pointer;
}

.message-audio-track::before {
    content: "";
    position: absolute;
    inset: 7px 10px;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 8px);
    opacity: 0.34;
}

.message-audio-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(47, 140, 124, 0.34), rgba(210, 104, 63, 0.3));
    transition: width 0.12s linear;
}

.message-bubble.is-mine .message-audio-track {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.86);
}

.message-bubble.is-mine .message-audio-progress {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 219, 199, 0.28));
}

.msg-compose-bar .msg-bar-voice {
    width: 44px;
    height: 44px;
    background: #f7fbfa;
    border: 1.5px solid #d5dde2;
    color: #496164;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;
}

.msg-compose-bar .msg-bar-voice:hover {
    border-color: var(--orange, #1E3D6B);
    color: var(--orange, #1E3D6B);
    transform: translateY(-1px);
}

.msg-compose-bar .msg-bar-voice.is-recording {
    background: var(--orange, #1E3D6B);
    border-color: var(--orange, #1E3D6B);
    color: #fff;
    animation: tnVoicePulse 1s ease-in-out infinite;
}

.msg-voice-status {
    display: block;
    min-height: 16px;
    margin-left: 54px;
    color: #7e9298;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.msg-media-preview.is-audio-preview {
    max-width: 100%;
    margin-bottom: 10px;
}

.msg-media-preview-frame.is-audio {
    display: flex;
    width: 100%;
    min-height: 104px;
    aspect-ratio: auto;
    align-items: center;
    padding: 13px;
    border-color: rgba(87, 132, 143, 0.55);
    border-radius: 24px;
    background:
        radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, rgba(30, 55, 63, 0.96), rgba(18, 37, 43, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 14px 32px rgba(0, 0, 0, 0.16);
}

.msg-preview-audio-card {
    position: relative;
    width: 100%;
    padding: 13px 52px 13px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        rgba(255, 255, 255, 0.04);
}

.msg-preview-audio-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.msg-preview-audio-shell {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.msg-preview-audio-play {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: var(--orange, #1E3D6B);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.msg-preview-audio-play:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}

.msg-preview-audio-icon-pause,
.msg-preview-audio-card.is-playing .msg-preview-audio-icon-play {
    display: none;
}

.msg-preview-audio-card.is-playing .msg-preview-audio-icon-pause {
    display: block;
}

.msg-preview-audio-body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.msg-preview-audio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.msg-preview-audio-label {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-preview-audio-time {
    flex: 0 0 auto;
    color: rgba(226, 238, 240, 0.72);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1;
}

.msg-preview-audio-track {
    position: relative;
    display: block;
    width: 100%;
    height: 24px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
}

.msg-preview-audio-track::before {
    content: "";
    position: absolute;
    inset: 7px 10px;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 8px);
    opacity: 0.34;
}

.msg-preview-audio-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(210, 104, 63, 0.36));
    transition: width 0.12s linear;
}

.msg-media-preview-frame.is-audio .msg-media-preview-clear {
    top: 12px;
    right: 12px;
    z-index: 4;
    width: 34px;
    height: 34px;
    background: rgba(10, 25, 31, 0.86);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.msg-media-preview-frame.is-audio + .msg-media-preview-info,
.msg-media-preview.is-audio-preview .msg-media-preview-info {
    margin-top: 7px;
    color: #8fa7ad;
    font-size: 0.8rem;
    letter-spacing: 0;
}

@keyframes tnVoicePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(210, 104, 63, 0.32); }
    50% { box-shadow: 0 0 0 8px rgba(210, 104, 63, 0); }
}

body.community-theme-night .message-bubble-audio {
    border-color: rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 40%),
        linear-gradient(135deg, rgba(32, 55, 62, 0.94), rgba(22, 39, 46, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.24);
}

body.community-theme-night .message-bubble-audio-label,
body.community-theme-night .msg-voice-status {
    color: #b9cbd0;
}

body.community-theme-night .message-audio-time {
    color: #8fa7ad;
}

body.community-theme-night .message-audio-play {
    background: #d8e8ea;
    color: #1d5960;
}

body.community-theme-night .message-audio-track {
    background: rgba(255, 255, 255, 0.11);
    color: rgba(216, 232, 234, 0.82);
}

body.community-theme-night .msg-compose-bar .msg-bar-voice,
body.community-theme-night .msg-media-preview-frame.is-audio {
    background: #1a2e35;
    border-color: #2a4450;
    color: #d8e8ea;
}

body.community-theme-night .msg-media-preview-frame.is-audio {
    background:
        radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, rgba(26, 46, 53, 0.98), rgba(15, 30, 36, 0.98));
}

body.community-theme-night .msg-compose-bar .msg-bar-voice.is-recording {
    background: var(--orange, #1E3D6B);
    border-color: var(--orange, #1E3D6B);
    color: #fff;
}

@media (max-width: 720px) {
    .msg-compose-bar .msg-bar-voice {
        width: 38px;
        height: 38px;
    }

    .msg-voice-status {
        margin-left: 43px;
    }
}

/* Barre de chargement (indeterminee) pendant l'envoi d'une video. */
.msg-upload-bar {
    height: 4px;
    margin: 0 0 8px;
    border-radius: 999px;
    background: rgba(120, 150, 150, 0.22);
    overflow: hidden;
}

.msg-upload-bar.is-hidden {
    display: none;
}

.msg-upload-bar-fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: #39a894;
    transition: width 0.25s ease;
}

/* --- Photos éphémères --- */

.ephemeral-container {
    position: relative;
    display: inline-block;
    border-radius: 12px;
    overflow: hidden;
}

.ephemeral-blur-wrap {
    position: relative;
    display: inline-block;
}

.ephemeral-blur-bg {
    width: 220px;
    height: 160px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8d8c8 0%, #d4c0a8 40%, #c0a888 100%);
    display: block;
}

.ephemeral-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0,0,0,0.28);
    border-radius: 12px;
}

.ephemeral-overlay span {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.ephemeral-view-btn {
    background: rgba(255,255,255,0.92);
    color: #1a1a1a;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.ephemeral-view-btn:hover {
    background: #fff;
}

.ephemeral-view-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.ephemeral-reveal {
    display: block;
    max-width: 100%;
    max-height: 280px;
    border-radius: 12px;
    object-fit: contain;
}

.ephemeral-timer {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--orange, #1E3D6B);
    font-weight: 700;
    text-align: center;
}

.ephemeral-expired {
    display: inline-block;
    padding: 8px 14px;
    background: #f5f0eb;
    border-radius: 10px;
    font-size: 13px;
    color: #888;
}

.ephemeral-sent {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(230,126,34,0.1);
    border-radius: 10px;
    font-size: 13px;
    color: #c0392b;
    font-weight: 600;
}

.ephemeral-sent-status {
    font-size: 11px;
    color: #888;
    font-weight: 400;
}

.ephemeral-toggle-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.ephemeral-toggle-btn.is-active {
    background: var(--orange, #1E3D6B);
    border-color: var(--orange, #1E3D6B);
    color: #fff;
}

/* --- Indicateur "en train d'écrire" --- */

.typing-indicator {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 0.85rem;
    color: #5b677a;
    font-style: italic;
}

.typing-dots {
    display: inline-flex;
    gap: 3px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a0aab8;
    animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
    40%            { transform: scale(1);   opacity: 1;   }
}

/* --- "Voir plus" de messages --- */

.voir-plus-messages {
    display: block;
    text-align: center;
    padding: 8px;
    font-size: 0.85rem;
    color: #5b677a;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 8px;
    text-decoration: none;
}

.voir-plus-messages:hover {
    color: var(--orange, #1E3D6B);
}

/* --- Appel vidéo WebRTC --- */

.video-call-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-call-modal {
    width: 100%;
    max-width: 720px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.video-call-status {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.video-container {
    position: relative;
    width: 100%;
    background: #111;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

/* Remote video : position absolute pour empiler sans pousser le flux */
#remote-video,
#global-remote-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}

/* Local video : PiP en bas à droite par-dessus la remote */
#local-video,
#global-local-video {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 25%;
    max-width: 160px;
    min-width: 80px;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    object-fit: cover;
    background: #333;
    z-index: 2;
}

/* Plein écran — classe CSS (fonctionne sur iOS + desktop) */
.video-call-overlay.is-fs {
    align-items: stretch;
}

.video-call-overlay.is-fs .video-call-modal {
    height: 100%;
    max-width: 100%;
    padding: 16px 20px 20px;
    box-sizing: border-box;
    justify-content: space-between;
}

.video-call-overlay.is-fs .video-container {
    flex: 1;
    aspect-ratio: unset;
    border-radius: 0;
    min-height: 0;
}

/* Plein écran natif (Android/desktop) */
html:fullscreen          .video-call-overlay,
html:-webkit-full-screen .video-call-overlay { align-items: stretch; }

html:fullscreen          .video-call-modal,
html:-webkit-full-screen .video-call-modal {
    height: 100%; max-width: 100%;
    padding: 16px 20px 20px;
    box-sizing: border-box;
    justify-content: space-between;
}

html:fullscreen          .video-container,
html:-webkit-full-screen .video-container {
    flex: 1; aspect-ratio: unset; border-radius: 0; min-height: 0;
}

.video-call-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.btn-control {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-control:hover {
    background: rgba(255, 255, 255, 0.22);
}

.btn-control.is-active {
    background: rgba(231, 76, 60, 0.45);
    border-color: rgba(231, 76, 60, 0.7);
}

.video-call-actions {
    display: flex;
    gap: 12px;
}

.btn-hangup {
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-hangup:hover {
    background: #c0392b;
}

.incoming-call-banner {
    display: none;
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 8000;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(145deg, rgba(30, 32, 54, 0.94), rgba(17, 19, 36, 0.97));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow:
        0 24px 64px -16px rgba(0, 0, 0, 0.65),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    color: #fff;
    min-width: 320px;
    max-width: 380px;
    animation: call-slide-in 0.42s cubic-bezier(0.22, 1.2, 0.36, 1);
}

@keyframes call-slide-in {
    from { transform: translateY(30px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

.incoming-call-avatar {
    position: relative;
    font-size: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1fc8ae 0%, #12a08b 100%);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 6px 18px -4px rgba(18, 160, 139, 0.7);
    animation: call-pulse 1.6s infinite ease-out;
}

.incoming-call-avatar::before {
    content: '';
    width: 27px;
    height: 27px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M23%207l-7%205%207%205V7z'/%3E%3Crect%20x='1'%20y='5'%20width='15'%20height='14'%20rx='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

@keyframes call-pulse {
    0%   { box-shadow: 0 6px 18px -4px rgba(18, 160, 139, 0.7), 0 0 0 0 rgba(31, 200, 174, 0.55); }
    70%  { box-shadow: 0 6px 18px -4px rgba(18, 160, 139, 0.7), 0 0 0 14px rgba(31, 200, 174, 0); }
    100% { box-shadow: 0 6px 18px -4px rgba(18, 160, 139, 0.7), 0 0 0 0 rgba(31, 200, 174, 0); }
}

.incoming-call-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.incoming-call-info strong {
    color: #fff;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.incoming-call-info span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9fb2c6;
    font-size: 0.82rem;
}

.incoming-call-info span::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    animation: call-dot 1.4s infinite;
}

@keyframes call-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    50%      { box-shadow: 0 0 0 5px rgba(46, 204, 113, 0); }
}

.incoming-call-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-accept-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #2ee06f 0%, #22a757 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(39, 174, 96, 0.75);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    white-space: nowrap;
}

.btn-accept-call:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 24px -6px rgba(39, 174, 96, 0.85);
}

.btn-accept-call:active {
    transform: translateY(0);
}

.btn-block-call {
    background: rgba(255, 255, 255, 0.06);
    color: #b9c4d0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    white-space: nowrap;
}

.btn-block-call:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.btn-block-videocall {
    background: none;
    border: 1px solid #c8d2e1;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 1rem;
    cursor: pointer;
    color: #5b677a;
    transition: background 0.2s, border-color 0.2s;
    line-height: 1;
}

.btn-block-videocall:hover {
    background: #f0f4f8;
}

.btn-block-videocall.is-blocked {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}

.conv-mute-toggle-btn {
    background: none;
    border: 1px solid #c8d2e1;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 1rem;
    cursor: pointer;
    color: #5b677a;
    transition: background 0.2s, border-color 0.2s;
    line-height: 1;
}

.conv-mute-toggle-btn:hover {
    background: #f0f4f8;
}

.conv-mute-toggle-btn.is-muted {
    background: rgba(91, 103, 122, 0.1);
    border-color: rgba(91, 103, 122, 0.35);
    color: #4f5f70;
}

.btn-decline-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(231, 76, 60, 0.14);
    color: #ff7a6b;
    border: 1px solid rgba(231, 76, 60, 0.4);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}

.btn-decline-call:hover {
    background: rgba(231, 76, 60, 0.28);
    transform: translateY(-1px);
}

/* Mobile : bannière d'appel en haut, pleine largeur, boutons tactiles — ne
   chevauche plus le champ de saisie ni la barre de navigation du bas. */
@media (max-width: 680px) {
    .incoming-call-banner {
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        left: 10px;
        right: 10px;
        bottom: auto;
        min-width: 0;
        max-width: none;
        flex-wrap: wrap;
        gap: 12px 14px;
        padding: 14px 16px;
        animation: call-slide-down 0.42s cubic-bezier(0.22, 1.2, 0.36, 1);
    }

    .incoming-call-actions {
        flex-basis: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .incoming-call-actions > * {
        flex: 1 1 40%;
        padding-top: 13px;
        padding-bottom: 13px;
        font-size: 0.95rem;
    }
}

@keyframes call-slide-down {
    from { transform: translateY(-24px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0)     scale(1);    opacity: 1; }
}

/* ── Bannière d'activation des notifications push ─────────────────── */
.push-optin {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(94vw, 640px);
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}

.push-optin-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--dark, #1a3a36);
    line-height: 1.35;
}

.push-optin-enable {
    background: var(--orange, #1E3D6B);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.push-optin-enable:hover {
    filter: brightness(1.08);
}

.push-optin-close {
    background: none;
    border: none;
    color: #5b677a;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .push-optin {
        bottom: 76px; /* au-dessus de la barre de navigation mobile */
    }
}

body.community-theme-night .push-optin {
    background: #1a2e35;
    border-color: #2a4450;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

body.community-theme-night .push-optin-text {
    color: #e8f2ef;
}

body.community-theme-night .push-optin-close {
    color: #9fb6b0;
}

/* ── Toasts de notification ───────────────────────────────────────── */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-notif {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e2eaea;
    border-left: 4px solid #3a9e8d;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
    padding: 13px 16px;
    min-width: 260px;
    max-width: 340px;
    pointer-events: all;
    animation: toast-in 0.3s cubic-bezier(.22,.68,0,1.2) both;
}

.toast-notif.is-hiding {
    animation: toast-out 0.3s ease forwards;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(40px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(40px) scale(0.95); }
}

.toast-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    background: #edf7f5;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #3a9e8d;
}

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

.toast-message {
    font-size: 0.88rem;
    color: #1e3130;
    line-height: 1.4;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.toast-link {
    font-size: 0.8rem;
    color: #3a9e8d;
    font-weight: 600;
    text-decoration: none;
}

.toast-link:hover { text-decoration: underline; }

.toast-close {
    background: none;
    border: none;
    color: #9aa5b4;
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    flex-shrink: 0;
}

.toast-close:hover { color: #5b677a; }

body.community-theme-night .toast-notif,
body.site-theme-night .toast-notif {
    background: #1b3235;
    border-color: #2e5450;
    border-left-color: #3a9e8d;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

body.community-theme-night .toast-message,
body.site-theme-night .toast-message {
    color: #e8f4f2;
}

body.community-theme-night .toast-icon,
body.site-theme-night .toast-icon {
    background: rgba(58,158,141,0.18);
}

/* ── Infinite scroll ── */
.feed-loading {
    display: flex;
    justify-content: center;
    padding: 1.4rem 0;
}

.feed-loading[hidden],
.feed-end-label[hidden],
.feed-new-banner[hidden] {
    display: none !important;
}

/* ── Bannière nouveaux posts ── */
.feed-new-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 20px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #edfaf6 0%, #e6f7f3 100%);
    border: 1px solid #b2e4d8;
    border-radius: 14px;
    color: #2a7a6c;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.feed-new-banner:hover {
    background: linear-gradient(135deg, #d8f5ef 0%, #d0f0ea 100%);
    transform: translateY(-1px);
}

body.community-theme-night .feed-new-banner,
body.site-theme-night .feed-new-banner {
    background: linear-gradient(135deg, rgba(37,70,65,0.6) 0%, rgba(30,55,52,0.6) 100%);
    border-color: #2e6460;
    color: #7ecfc4;
}
.feed-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0,0,0,0.08);
    border-top-color: #3a9e8d;
    border-radius: 50%;
    animation: feed-spin 0.7s linear infinite;
    display: inline-block;
}
@keyframes feed-spin {
    to { transform: rotate(360deg); }
}
.feed-end-label {
    text-align: center;
    color: #8fa0a8;
    font-size: 0.82rem;
    padding: 1.2rem 0 0.6rem;
    letter-spacing: 0.02em;
}
body.community-theme-night .feed-loading-spinner,
body.site-theme-night .feed-loading-spinner {
    border-color: rgba(255,255,255,0.08);
    border-top-color: #3a9e8d;
}
body.community-theme-night .feed-end-label,
body.site-theme-night .feed-end-label {
    color: #5a7a80;
}
/* ── Messages officiels ToutNu dans le fil ─────────────────────── */

.site-update-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(216, 91, 53, 0.28);
    border-radius: 24px;
    color: #f7fbfa;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 42%),
        linear-gradient(140deg, #163b3e 0%, #20585a 65%, #285f5b 100%);
    box-shadow: 0 18px 42px rgba(17, 49, 51, 0.18);
}

.site-update-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #f28a59, var(--orange, #1E3D6B));
}

.site-update-card-glow {
    position: absolute;
    z-index: -1;
    top: -90px;
    right: -70px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(109, 226, 210, 0.24), transparent 68%);
    pointer-events: none;
}

.site-update-card-header {
    display: flex;
    align-items: center;
    gap: 11px;
}

.site-update-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--orange, #1E3D6B), var(--orange, #1E3D6B));
    box-shadow: 0 10px 22px rgba(9, 30, 31, 0.24);
    font-size: 1.15rem;
    font-weight: 900;
}

.site-update-card-origin {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.site-update-card-origin strong {
    color: #fff;
    font-size: 0.94rem;
}

.site-update-card-origin span {
    color: rgba(231, 244, 242, 0.7);
    font-size: 0.69rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-update-card-type {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    margin-left: auto;
    padding: 5px 10px;
    border-radius: 999px;
    color: #d7f7f2;
    background: rgba(115, 211, 198, 0.14);
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
}

.site-update-card--maintenance .site-update-card-icon {
    background: linear-gradient(135deg, #71828d, #4d606b);
}

.site-update-card--info .site-update-card-icon {
    background: linear-gradient(135deg, #3f9489, #286e67);
}

.site-update-card-body {
    max-width: 680px;
    margin-top: 18px;
}

.site-update-card-body h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.18rem, 2.2vw, 1.48rem);
    line-height: 1.15;
}

.site-update-card-body p {
    margin: 0;
    color: rgba(235, 246, 244, 0.84);
    font-size: 0.9rem;
    line-height: 1.58;
}

.site-update-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.site-update-card-footer time {
    color: rgba(223, 239, 237, 0.58);
    font-size: 0.72rem;
}

.site-update-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 13px;
    color: #184649;
    background: #f4fbfa;
    box-shadow: 0 10px 22px rgba(7, 25, 27, 0.16);
    font-size: 0.8rem;
    font-weight: 850;
    text-decoration: none;
}

.site-update-card-cta:hover,
.site-update-card-cta:focus-visible {
    color: #123b3e;
    background: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .site-update-card {
        padding: 17px 16px 18px;
        border-radius: 20px;
    }

    .site-update-card-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 12px;
    }

    .site-update-card-type {
        max-width: 112px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .site-update-card-body {
        margin-top: 15px;
    }

    .site-update-card-body h3 {
        font-size: 1.15rem;
    }

    .site-update-card-body p {
        font-size: 0.84rem;
    }

    .site-update-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .site-update-card-cta {
        width: 100%;
    }
}

/* ═══════════ Salons (messages groupés) — réutilisent les classes de la messagerie ═══════════ */

/* Nom de l'expéditeur au-dessus des bulles de groupe */
.message-bubble-sender {
    display: block; font-size: 0.75rem; font-weight: 700;
    color: var(--teal, #4A6B5A); margin-bottom: 2px;
}


/* Panneau de création de salon */
/* Formulaire de création empilé : nom (obligatoire) puis ajout d'amis */
#salon-create-panel { display: flex; flex-direction: column; gap: 10px; }
/* Résultats de recherche d'amis (liste sous le champ) */
.salon-friend-results { list-style: none; margin: 6px 0 0; padding: 4px; display: flex; flex-direction: column; gap: 2px; border: 1px solid #e3ebe9; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px rgba(20,50,45,0.10); }
.salon-friend-results[hidden] { display: none; }
.salon-friend-option {
    display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 9px;
    border: none; background: #fff; cursor: pointer; text-align: left; width: 100%;
}
.salon-friend-option:hover { background: #eef7f4; }
.salon-friend-avatar {
    width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    background: #3a8c7e; color: #fff; font-weight: 700; font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
}
.salon-friend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.salon-friend-name { font-weight: 600; color: #2a3b38; }
.salon-selected { display: flex; flex-wrap: wrap; gap: 6px; }
.salon-chip {
    display: inline-flex; align-items: center; gap: 6px; background: #e8f5f2; color: #23423c;
    font-weight: 600; padding: 4px 6px 4px 12px; border-radius: 999px; font-size: 0.85rem;
}
.salon-chip-remove {
    border: none; background: rgba(0,0,0,0.08); color: #23423c; width: 18px; height: 18px;
    border-radius: 50%; cursor: pointer; line-height: 1; font-size: 0.9rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.salon-create-actions { display: flex; gap: 8px; justify-content: flex-end; }
.salon-create-error { color: #c0392b; font-size: 0.85rem; margin: 0; }

/* En-tête messagerie : deux liens soulignés « Messagerie » / « Salons » */
.messages-heading-nav { display: flex; gap: 20px; align-items: baseline; margin: 0; flex-wrap: wrap; }
.messages-heading-nav a {
    text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
    color: #9aada9; cursor: pointer;
}
.messages-heading-nav a.is-active { color: #23423c; }

/* Aperçu de la photo jointe dans un salon */
.salon-media-preview { position: relative; width: fit-content; margin: 0 0 8px; }
.salon-media-preview[hidden] { display: none; }
.salon-media-preview img { max-width: 180px; max-height: 180px; border-radius: 14px; display: block; }
.salon-media-clear {
    position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: none;
    border-radius: 50%; background: rgba(18,32,37,0.72); color: #fff; font-size: 16px; line-height: 1;
    cursor: pointer; display: grid; place-items: center;
}

/* Page groupes : on masque la sidebar globale uniquement dans l'onglet Groupes. */
body.community-page-groupes .community-sidebar{display:none !important}
body.community-page-groupes .community-layout{grid-template-columns:1fr !important}
.groups-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.group-tile{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid rgba(42,122,110,.2);border-radius:14px;overflow:hidden;background:#fff;transition:transform .12s ease,box-shadow .12s ease}
.group-tile:hover,.group-tile:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px rgba(23,49,46,.16);outline:none}
.group-tile-cover{height:88px;background:linear-gradient(135deg,#1f5049,#4A6B5A);display:flex;align-items:center;justify-content:center;position:relative}
.group-tile-cover img{width:100%;height:100%;object-fit:cover;display:block}
.group-tile-cover .gt-ph{color:rgba(255,255,255,.9);font-size:26px;font-weight:800}
.group-tile-cover .gt-badge{position:absolute;top:9px;left:9px;background:rgba(255,255,255,.94);color:#21433f;font-weight:800;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.group-tile-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
.group-tile-body strong{color:#223836;font-size:1.02rem;line-height:1.25}
.group-tile-meta{color:#7a8b92;font-size:.84rem}
.group-tile-open{margin-top:7px;color:#4A6B5A;font-weight:700;font-size:.86rem}
.group-cover-card{padding:0;overflow:hidden}
.group-cover-slot{position:relative;min-height:230px;border-radius:inherit;background:#17312e;display:flex;align-items:center;justify-content:center;overflow:hidden}
.group-cover-slot img{width:100%;height:100%;min-height:230px;object-fit:cover;display:block}
.group-cover-placeholder{width:100%;min-height:230px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#15302d,#285f58);color:#d7efeb;font-weight:800}
.group-cover-form{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:14px;gap:8px}
.group-cover-file{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0}
.group-cover-button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:rgba(255,255,255,.94);color:#21433f;font-size:.92rem;line-height:1.1;font-weight:800;padding:9px 13px;box-shadow:0 8px 22px rgba(0,0,0,.16);cursor:pointer}
.group-cover-save{position:relative;z-index:3;display:none;align-items:center;justify-content:center;border:0;border-radius:999px;background:#4A6B5A;color:#fff;font-size:.92rem;line-height:1.1;font-weight:800;padding:9px 13px;box-shadow:0 8px 22px rgba(0,0,0,.16);cursor:pointer}
.group-cover-form.is-ready .group-cover-save{display:inline-flex}
.group-collapsible-card summary{cursor:pointer;list-style:none}
.group-collapsible-card summary::-webkit-details-marker{display:none}
.group-posts-list{display:grid;gap:16px}
.group-photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:12px}
.group-photo-cell{padding:0;border:0;border-radius:10px;overflow:hidden;cursor:zoom-in;background:#12312e;aspect-ratio:1/1}
.group-photo-cell img{width:100%;height:100%;object-fit:cover;display:block}
.group-photo-more{display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:10px;aspect-ratio:1/1;background:linear-gradient(135deg,#e8f5f3,#fff);color:#4A6B5A;font-size:1.8rem;font-weight:900;letter-spacing:.08em;cursor:pointer}
.group-photo-more:hover,.group-photo-more:focus-visible{outline:2px solid rgba(42,122,110,.35);outline-offset:2px;background:#e8f5f3}
.group-photo-more:disabled{opacity:.55;cursor:wait}
#group-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:none;align-items:center;justify-content:center}
#group-lightbox.open{display:flex}
#group-lightbox img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:6px}
#group-lightbox button{position:absolute;background:rgba(255,255,255,.16);color:#fff;border:0;cursor:pointer;font-size:1.6rem;line-height:1;width:48px;height:48px;border-radius:50%}
#group-lightbox button:hover{background:rgba(255,255,255,.28)}
#group-lb-close{top:18px;right:18px}
#group-lb-prev{left:18px;top:50%;transform:translateY(-50%)}
#group-lb-next{right:18px;top:50%;transform:translateY(-50%)}
.group-empty{margin:0;color:#7a8b92}
.group-members-list{display:grid;gap:8px;margin-top:12px}
.group-member-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:9px 0;border-bottom:1px solid rgba(42,122,110,.1)}
.group-member-avatar{width:34px;height:34px;border-radius:50%;overflow:hidden;background:#e8f5f3;color:#4A6B5A;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;flex:0 0 auto}
.group-member-avatar img{width:100%;height:100%;object-fit:cover}
.group-member-body{min-width:0;flex:1}
.group-member-body strong{display:block;color:#223836}
.group-member-body span{display:block;color:#788891;font-size:.84rem}
.group-member-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.group-member-actions form{margin:0}
.group-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#223836;font-weight:800}
.group-summary span{display:grid;gap:4px}
.group-summary small{color:#7a8b92;font-weight:600}
.group-summary::after{content:"+";flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e8f5f3;color:#4A6B5A;font-size:1.35rem;line-height:1}
.group-collapsible-card[open] .group-summary::after{content:"-"}
body.community-theme-night .group-summary,body.site-theme-night .group-summary{color:#eaf4f2}
.group-collapsible-inner{margin-top:18px}
.group-invite-form{margin:0 0 14px;padding:12px;border:1px solid rgba(42,122,110,.14);border-radius:14px;background:#f7fbfa}
/* Carte « Inviter un ami » : rester sombre en mode nuit (elle était blanche). */
body.community-theme-night .group-invite-form,body.site-theme-night .group-invite-form{background:rgba(16,34,38,.6);border-color:rgba(128,211,194,.16)}
body.community-theme-night .group-invite-form .field-label,body.site-theme-night .group-invite-form .field-label{color:#9fd8cc}
.group-invite-row{display:grid;gap:10px}
.group-invite-picker{position:relative;min-width:0}
.group-friend-search{position:relative}
.group-friend-input{padding-right:42px}
.group-friend-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;border-radius:50%;background:rgba(34,56,54,.08);color:#223836;font-weight:800;cursor:pointer;display:none}
.group-friend-picker.has-value .group-friend-clear{display:inline-flex;align-items:center;justify-content:center}
.group-friend-menu{display:none;position:absolute;z-index:30;left:0;right:0;top:calc(100% + 7px);max-height:280px;overflow:auto;padding:7px;border:1px solid rgba(42,122,110,.22);border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(23,49,46,.22)}
.group-friend-picker.is-open .group-friend-menu{display:grid;gap:6px}
.group-friend-option{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:1px solid rgba(42,122,110,.12);border-radius:12px;background:#fff;color:inherit;text-align:left;cursor:pointer}
.group-friend-option:hover,.group-friend-option:focus-visible{outline:none;border-color:rgba(42,122,110,.45);background:#f4faf9}
.group-friend-option.is-selected{border-color:#4A6B5A;background:#e8f5f3;box-shadow:0 0 0 2px rgba(42,122,110,.12)}
.group-friend-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;background:#e8f5f3;color:#4A6B5A;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;flex:0 0 auto}
.group-friend-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.group-friend-copy{min-width:0;display:grid;gap:2px}
.group-friend-copy strong{color:#223836;font-size:.94rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-friend-copy small{color:#788891;font-size:.8rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-friend-check{margin-left:auto;width:26px;height:26px;border-radius:50%;background:#4A6B5A;color:#fff;display:none;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}
.group-friend-option.is-selected .group-friend-check{display:inline-flex}
.group-friend-selected{display:none;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(42,122,110,.2);border-radius:12px;background:#fff;margin-top:8px}
.group-friend-picker.has-selection .group-friend-selected{display:flex}
.group-friend-selected .group-friend-copy{flex:1}
/* Multi-sélection : amis choisis affichés en chips retirables. */
.group-friend-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.group-friend-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 12px;border-radius:999px;background:#e8f5f3;border:1px solid rgba(42,122,110,.28);color:#1f5d61;font-size:.85rem;font-weight:700}
.group-friend-chip-remove{width:20px;height:20px;border:0;border-radius:50%;background:rgba(42,122,110,.16);color:#1f5d61;font-size:15px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.group-friend-chip-remove:hover{background:#c0392b;color:#fff}
body.community-theme-night .group-friend-chip,body.site-theme-night .group-friend-chip{background:rgba(44,104,97,.35);border-color:rgba(128,211,194,.3);color:#c9f0ea}
body.community-theme-night .group-friend-chip-remove,body.site-theme-night .group-friend-chip-remove{background:rgba(128,211,194,.2);color:#c9f0ea}
.group-friend-selected .group-friend-remove{border:0;border-radius:999px;background:#edf4f2;color:#223836;font-weight:800;padding:7px 10px;cursor:pointer}
.group-friend-empty{display:none;margin:2px 4px 4px;color:#788891;font-size:.84rem}
.group-friend-picker.no-result .group-friend-empty{display:block}
.group-member-stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.group-member-stat{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(42,122,110,.14);border-radius:999px;background:#f7fbfa;color:#223836;font-size:.82rem;font-weight:800;padding:7px 10px}
.group-member-stat strong{color:#4A6B5A}
.group-invite-heading,.group-members-section-title{display:grid;gap:2px;margin:0 0 9px}
.group-invite-heading strong,.group-members-section-title strong{color:#223836;font-size:.98rem}
body.community-theme-night .group-invite-heading strong,body.site-theme-night .group-invite-heading strong,body.community-theme-night .group-members-section-title strong,body.site-theme-night .group-members-section-title strong{color:#eaf4f2}
.group-invite-heading span,.group-members-section-title span{color:#788891;font-size:.83rem}
.group-invite-empty{padding:10px;color:#788891;font-size:.86rem}
.group-invite-submit[disabled]{opacity:.48;cursor:not-allowed;filter:saturate(.65)}
.group-invitation-card{border-color:rgba(211,84,0,.18);background:linear-gradient(145deg,#fff,#fff8f3)}
.group-invitation-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.group-pending-list{margin-top:14px;padding-top:12px;border-top:1px solid rgba(42,122,110,.12)}
.group-pending-list h4{margin:0 0 8px;color:#223836;font-size:.95rem}
.group-cover-placeholder[hidden]{display:none}
.group-cover-overlay{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:46px 18px 18px;background:linear-gradient(to top,rgba(10,26,24,.85),rgba(10,26,24,.35) 55%,rgba(10,26,24,0));pointer-events:none}
.group-cover-overlay .group-header-top{gap:12px}
.group-cover-name{margin:0;font-size:1.6rem;line-height:1.15;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.group-cover-badge{display:inline-flex;align-items:center;background:rgba(255,255,255,.92);color:#21433f;font-weight:800;font-size:.68rem;padding:4px 11px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.group-cover-meta{margin:8px 0 0;color:#eafaf8;font-weight:700;font-size:.92rem;text-shadow:0 1px 5px rgba(0,0,0,.5)}
@media(max-width:520px){.group-cover-overlay{padding-right:150px}.group-cover-name{font-size:1.25rem}}
.group-back-link{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;color:#4A6B5A;text-decoration:none;font-weight:700;font-size:.9rem}
.group-back-link:hover{text-decoration:underline}
.group-header-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.group-header-desc{margin:12px 0 0;color:#3f5a5a;line-height:1.6;white-space:pre-wrap}
.group-header-rules{margin:14px 0 0}
.group-header-rules summary{cursor:pointer;font-weight:700;color:#4A6B5A;list-style:none}
.group-header-rules summary::-webkit-details-marker{display:none}
.group-header-rules .rules-body{margin-top:8px;color:#4a5a5a;line-height:1.6;white-space:pre-wrap;background:#f7faf9;border-radius:10px;padding:12px 14px;font-size:.92rem}
@media(max-width:760px){.groups-grid{grid-template-columns:1fr}.group-member-row{align-items:flex-start}.group-cover-slot,.group-cover-slot img,.group-cover-placeholder{min-height:180px}.group-friend-menu{position:static;margin-top:8px}.group-invite-submit{width:100%;justify-content:center}.group-invitation-actions .mini-action{flex:1 1 140px;justify-content:center}.group-member-actions{flex-basis:100%;margin-left:0;box-sizing:border-box;padding-left:44px;justify-content:stretch}.group-member-actions form{flex:1 1 0;min-width:0}.group-member-actions .mini-action{width:100%;justify-content:center;white-space:normal;padding-left:10px;padding-right:10px}}
.group-visibility-choice{display:grid;gap:10px;margin:6px 0 4px}
@media(min-width:520px){.group-visibility-choice{grid-template-columns:1fr 1fr}}
.group-visibility-option{display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border:1.5px solid rgba(42,122,110,.22);border-radius:12px;background:#fff;cursor:pointer}
.group-visibility-option:hover{border-color:#4A6B5A}
.group-visibility-option input{margin-top:3px;flex:0 0 auto;accent-color:#4A6B5A}
.group-visibility-option:has(input:checked){border-color:#4A6B5A;box-shadow:0 0 0 2px rgba(42,122,110,.14);background:#f4faf9}
.group-visibility-option.is-locked{cursor:default;opacity:.9}
.group-visibility-option.is-locked:hover{border-color:rgba(42,122,110,.22)}
.group-visibility-body{display:grid;gap:3px}
.group-visibility-body strong{color:#223836;font-size:.98rem}
.group-visibility-body small{color:#6f7f89;font-size:.83rem;line-height:1.45}
.group-discover-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:14px}
.group-discover-card{display:flex;flex-direction:column;border:1px solid rgba(42,122,110,.2);border-radius:14px;overflow:hidden;background:#fff}
.group-discover-cover{height:96px;background:linear-gradient(135deg,#1f5049,#4A6B5A);display:flex;align-items:center;justify-content:center;position:relative}
.group-discover-cover img{width:100%;height:100%;object-fit:cover}
.group-discover-cover .gd-badge{position:absolute;top:9px;left:9px;background:rgba(255,255,255,.94);color:#21433f;font-weight:800;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.group-discover-cover .gd-ph{color:rgba(255,255,255,.85);font-size:26px;font-weight:800}
.group-discover-body{padding:12px 13px 14px;display:flex;flex-direction:column;flex:1}
.group-discover-body h3{margin:0;font-size:1rem;color:#223836;line-height:1.25}
.group-discover-meta{margin:5px 0 0;color:#7a8b92;font-size:.82rem}
.group-discover-desc{margin:8px 0 0;color:#4a5a5a;font-size:.86rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.group-discover-desc.is-expanded{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.group-discover-more{align-self:flex-start;margin-top:4px;padding:2px 0;background:none;border:0;color:#4A6B5A;font-weight:700;font-size:.82rem;cursor:pointer}
.group-discover-more:hover{text-decoration:underline}
body.community-theme-night .group-discover-more,body.site-theme-night .group-discover-more{color:#80d3c2}
.group-discover-owner{margin:6px 0 0;display:flex;align-items:center;gap:7px;color:#5c6d6d;font-size:.8rem}
.group-discover-owner strong{color:#4A6B5A;font-weight:700}
.group-discover-owner-avatar{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:grid;place-items:center;background:#4A6B5A;text-decoration:none}
.group-discover-owner-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.group-discover-owner-avatar-ph{color:#fff;font-size:.72rem;font-weight:700}
.group-discover-body form,.group-discover-pending{margin-top:auto;padding-top:12px}
.group-discover-join{width:100%;justify-content:center}
.group-discover-pending{margin-top:12px;text-align:center;color:#4A6B5A;font-weight:700;font-size:.86rem;background:#e8f5f3;border-radius:999px;padding:9px}
.group-discover-rules{margin-top:10px}
.group-discover-rules summary{cursor:pointer;list-style:none;color:#4A6B5A;font-weight:700;font-size:.84rem}
.group-discover-rules summary::-webkit-details-marker{display:none}
.group-discover-rules summary::before{content:"📋 "}
.group-discover-rules-body{margin-top:8px;color:#4a5a5a;font-size:.84rem;line-height:1.5;white-space:pre-wrap;background:#f7faf9;border:1px solid rgba(42,122,110,.14);border-radius:10px;padding:10px 12px;max-height:180px;overflow:auto}
body.community-theme-night .group-discover-card,
body.site-theme-night .group-discover-card{background:#14292d;border-color:rgba(128,211,194,.32);box-shadow:0 18px 42px rgba(0,0,0,.26)}
body.community-theme-night .group-discover-cover,
body.site-theme-night .group-discover-cover{border-bottom:1px solid rgba(128,211,194,.18)}
body.community-theme-night .group-discover-body h3,
body.site-theme-night .group-discover-body h3{color:#f3fbfa}
body.community-theme-night .group-discover-meta,
body.site-theme-night .group-discover-meta{color:#9fb3b7}
body.community-theme-night .group-discover-desc,
body.site-theme-night .group-discover-desc{color:#dbe9e7}
body.community-theme-night .group-discover-owner,
body.site-theme-night .group-discover-owner{color:#9fb3b7}
body.community-theme-night .group-discover-owner strong,
body.site-theme-night .group-discover-owner strong{color:#80d3c2}
body.community-theme-night .group-discover-rules summary,
body.site-theme-night .group-discover-rules summary{color:#82d7c8}
body.community-theme-night .group-discover-rules-body,
body.site-theme-night .group-discover-rules-body{background:#102226;border-color:rgba(128,211,194,.22);color:#cfe1df}
/* Description + règles d'un groupe : lisibles en mode nuit (sinon #3f5a5a sombre
   sur fond sombre = quasi invisible). Mêmes teintes que le reste de la page nuit. */
body.community-theme-night .group-header-desc,
body.site-theme-night .group-header-desc{color:#dbe9e7}
body.community-theme-night .group-header-rules summary,
body.site-theme-night .group-header-rules summary{color:#82d7c8}
body.community-theme-night .group-header-rules .rules-body,
body.site-theme-night .group-header-rules .rules-body{background:#102226;color:#cfe1df}
body.community-theme-night .group-discover-pending,
body.site-theme-night .group-discover-pending{background:rgba(128,211,194,.14);color:#8fe0d0}
.group-delete-form{margin-top:14px;padding-top:14px;border-top:1px solid rgba(192,57,43,.18)}
.group-delete-btn{width:100%;border:1.5px solid rgba(192,57,43,.5);background:#fff;color:#c0392b;font-weight:700;font-size:.92rem;padding:11px;border-radius:12px;cursor:pointer}
.group-delete-btn:hover{background:#fdecea}
.groups-hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.groups-hub--main{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:18px}
.ghc-text{display:flex;flex-direction:column;gap:2px;min-width:0}
@media(max-width:520px){
.groups-hub{gap:10px}
.groups-hub--main{grid-template-columns:1fr}
.groups-hub-card{min-height:0;padding:13px;gap:8px}
.groups-hub-card .ghc-icon{width:36px;height:36px}
.groups-hub-card strong{font-size:1rem}
.ghc-sub{font-size:.8rem}
}
.groups-hub-card{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:inherit;background:#1e3b37;border:1px solid rgba(42,122,110,.28);border-radius:14px;padding:16px;min-height:112px;transition:transform .12s ease,box-shadow .12s ease}
.groups-hub-card:hover,.groups-hub-card:focus-visible{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.22);outline:none}
.ghc-icon{width:40px;height:40px;border-radius:11px;background:rgba(42,122,110,.2);color:#7fd3c2;display:flex;align-items:center;justify-content:center}
.ghc-icon svg{width:22px;height:22px}
.ghc-icon-warm{background:rgba(193,90,52,.18);color:#e0906f}
.groups-hub-card strong{color:#fff;font-size:1.05rem}
.ghc-sub{color:#9fb9b3;font-size:.86rem}
.ghc-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--orange, #1E3D6B);color:#fff;font-size:.7rem;font-weight:800}

.member-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.member-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 999px;
    background: white;
    color: #5b677a;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

.member-tab.is-active {
    background: var(--orange, #1E3D6B);
    color: white;
}

.member-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 7px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 800;
}

.member-tab-mobile-only {
    display: none;
}

.community-hero {
    background: white;
    border-radius: 28px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px 28px;
    margin-bottom: 28px;
    padding: 22px 28px;
    flex-wrap: wrap;
}

.community-hero-copy h1 {
    margin: 0 0 6px;
}

.community-hero-copy p {
    margin: 0;
    color: #5b677a;
}

.community-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.community-hero-actions .mini-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.community-hero-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    color: #5b677a;
    font-size: 0.95rem;
}

.community-hero-stats span {
    background: var(--bg-light);
    border-radius: 999px;
    padding: 10px 14px;
    white-space: nowrap;
}

.community-hero-stats strong {
    color: var(--dark);
    margin-right: 4px;
}

.community-layout {
    display: grid;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.community-layout--messages-full {
    grid-template-columns: 1fr;
    max-width: 660px;
}

.community-layout--messages-full .community-sidebar {
    display: none;
}

.community-sidebar,
.community-main,
.community-feed {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

@media (max-width: 720px) {
    .community-layout {
        grid-template-columns: 1fr;
    }
    .community-sidebar {
        order: 2;
    }
    .community-main,
    .community-feed {
        order: 1;
    }
}

.community-card {
    background: white;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    padding: 28px;
}

/* Post publié dans un groupe (fil du membre) : fond légèrement teinté + liseré
   turquoise en inset (épouse les coins arrondis) pour le distinguer d'un post classique. */
.community-card.post-card--group {
    background: linear-gradient(180deg, #e8f5f2 0%, #ffffff 78%);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06), inset 0 0 0 2px rgba(42,122,110,0.40);
}

.blog-page .community-card {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.flash-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.onboarding-card {
    margin-bottom: 16px;
    padding: 14px 20px;
}

/* État replié : fine barre */
.onboarding-card.is-collapsed {
    padding: 8px 16px;
    border-radius: 14px;
}

.onboarding-card.is-collapsed .directory-badge {
    display: none;
}

.onboarding-card.is-collapsed .onboarding-head h2 {
    font-size: 0.9rem;
}

.onboarding-collapsed-next {
    display: none;
}

.onboarding-card.is-collapsed .onboarding-collapsed-next {
    display: inline-flex;
    color: var(--orange, #1E3D6B);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
}

.onboarding-card.is-collapsed .onboarding-collapsed-next:hover {
    text-decoration: underline;
}

.onboarding-card.is-collapsed .onboarding-score {
    padding: 3px 10px;
}

.onboarding-card.is-collapsed .onboarding-score strong {
    font-size: 0.92rem;
}

.onboarding-card.is-collapsed .onboarding-score span {
    display: none;
}

.onboarding-card.is-collapsed .onboarding-toggle {
    width: 30px;
    height: 30px;
}

.onboarding-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.onboarding-head > div:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.onboarding-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.onboarding-head p {
    margin: 0;
    color: #5b677a;
    line-height: 1.55;
}

.onboarding-score {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 12px;
    background: #f3faf9;
    color: var(--dark);
    min-width: auto;
}

.onboarding-score strong {
    font-size: 1.05rem;
    line-height: 1;
}

.onboarding-score span {
    margin-top: 0;
    color: #5b677a;
    font-size: 0.82rem;
    font-weight: 700;
}

.onboarding-head-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.onboarding-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #d1e0df;
    border-radius: 50%;
    background: #f3faf9;
    color: #5b8a7a;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.onboarding-toggle:hover {
    background: #e2f0ee;
}

.onboarding-progress {
    height: 10px;
    margin: 22px 0 18px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5eff0;
}

.onboarding-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--turquoise), var(--orange, #1E3D6B));
}

.onboarding-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #fff7ec;
    color: #5d4a35;
}

.onboarding-next span {
    font-weight: 800;
}

.onboarding-list {
    display: grid;
    gap: 0;
}

.onboarding-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #eef2f7;
}

.onboarding-step:first-child {
    border-top: none;
}

.onboarding-step-marker {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf6f5;
    color: #2f6870;
    font-weight: 900;
}

.onboarding-step.is-done .onboarding-step-marker {
    background: rgba(64, 224, 208, 0.2);
    color: #1e796e;
}

.onboarding-step-copy {
    display: grid;
    gap: 4px;
}

.onboarding-step-copy strong {
    color: var(--dark);
}

.onboarding-step-copy small {
    color: #5b677a;
    line-height: 1.45;
}

.onboarding-step-link,
.onboarding-step-status {
    font-weight: 800;
    white-space: nowrap;
}

.onboarding-step-link {
    color: var(--orange, #1E3D6B);
    text-decoration: none;
}

.onboarding-step-status {
    color: #2f887e;
}

.section-heading {
    margin-bottom: 18px;
}

.section-heading h2,
.section-heading h3 {
    margin: 0 0 8px;
}

.section-heading p {
    margin: 0;
    color: #5b677a;
    line-height: 1.5;
}

.section-heading-feed {
    padding: 0 6px;
}

.section-heading-feed a {
    color: var(--orange, #1E3D6B);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 79, 41, 0.35);
}

.section-heading-feed a:hover,
.section-heading-feed a:focus {
    border-bottom-color: var(--orange, #1E3D6B);
}

body.community-theme-night .section-heading-feed a {
    color: #f0a07e;
    border-bottom-color: rgba(240, 160, 126, 0.35);
}

body.community-theme-night .section-heading-feed a:hover,
body.community-theme-night .section-heading-feed a:focus {
    border-bottom-color: #f0a07e;
}

.member-proposal-list {
    display: grid;
    gap: 12px;
}

.member-proposal-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(42, 76, 78, 0.12);
    border-radius: 16px;
    background: rgba(239, 247, 246, 0.7);
}

.member-proposal-item p {
    margin: 6px 0 0;
    color: #5b677a;
}

.member-proposal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.member-proposal-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.member-proposal-photo-preview {
    margin-top: 10px;
}

.member-proposal-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.member-proposal-photo-choice {
    position: relative;
}

.member-proposal-photo-delete-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.member-proposal-photo-thumb {
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(42, 76, 78, 0.12);
    border-radius: 14px;
    background: rgba(239, 247, 246, 0.72);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.member-proposal-photo-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
}

.member-proposal-photo-thumb.is-main {
    max-width: 190px;
}

.member-proposal-photo-thumb figcaption {
    margin-top: 7px;
    color: #5b677a;
    font-size: 0.78rem;
    font-weight: 800;
}

.member-proposal-photo-delete {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ff764d;
    color: white;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(0,0,0,0.16);
}

.member-proposal-photo-delete-checkbox:checked + .member-proposal-photo-thumb {
    opacity: 0.38;
    filter: grayscale(1);
}

.member-proposal-photo-delete-checkbox:checked ~ .member-proposal-photo-delete {
    background: #8f2f3f;
}

.proposal-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 8px 12px;
    background: #e8eef3;
    color: var(--dark);
    font-size: 0.88rem;
    font-weight: 800;
}

.proposal-status-published,
.proposal-status-manager {
    background: rgba(77, 153, 132, 0.16);
    color: #2a6c5f;
}

.proposal-status-refused,
.proposal-status-hidden {
    background: rgba(161, 59, 73, 0.14);
    color: #8f2f3f;
}

/* Badges catégorie événement */
.event-category {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    background: #eef2f7;
    color: #5b677a;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

a.event-category:hover {
    filter: brightness(0.92);
}

.event-category--rassemblement { background: rgba(64, 224, 208, 0.15); color: #1e796e; }
.event-category--journee-plage  { background: rgba(255, 180, 60, 0.18); color: #7a4e10; }
.event-category--porte-ouverte  { background: rgba(100, 149, 237, 0.2); color: #2a4a8f; }
.event-category--sortie-club    { background: rgba(147, 112, 219, 0.2); color: #5a2d82; }
.event-category--spectacle      { background: rgba(220, 80, 120, 0.15); color: #8b2040; }

.event-extra-dates {
    display: inline-block;
    color: #5b677a;
    font-size: 0.88rem;
}
.event-extra-dates::before {
    content: ' · ';
}

/* Navigation catégorie sur /agenda */
.event-category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
}

.event-cat-tab {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: white;
    color: #5b677a;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: background 0.15s ease, color 0.15s ease;
}

.event-cat-tab.is-active,
.event-cat-tab:hover {
    background: var(--orange, #1E3D6B);
    color: white;
}

/* Page individuelle événement */
.event-hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.event-counters {
    margin: 10px 0 0;
    color: #5b677a;
    font-size: 0.95rem;
}

.event-attend-section { }

.event-attend-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Event cards (agenda listing) ── */

.event-card {
    grid-template-columns: 200px minmax(0, 1fr);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* ── Événement flou pour visiteurs non connectés ── */
.event-card--guest {
    position: relative;
    pointer-events: none;
}
.event-card--guest > *:not(.event-card-guest-overlay) {
    filter: blur(4px);
    user-select: none;
}
.event-card-guest-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.18);
    pointer-events: all;
    text-decoration: none;
    border-radius: inherit;
    transition: background 0.2s;
}
.event-card-guest-overlay:hover {
    background: rgba(0,0,0,0.32);
}
.event-card-guest-label {
    background: #fff;
    color: #222;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    white-space: nowrap;
}

.event-card:hover {
    box-shadow: 0 20px 48px rgba(0,0,0,0.13);
    transform: translateY(-2px);
}

.classified-card-no-image.event-card {
    grid-template-columns: 1fr;
}

.event-card-poster {
    position: relative;
    overflow: hidden;
    background: #111;
    min-height: 280px;
}

.event-card-poster-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.3s ease;
}

.event-card:hover .event-card-poster-img {
    transform: scale(1.04);
}

.event-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
}

.event-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.event-card-count {
    font-size: 0.78rem;
    color: #9aa5b4;
    font-weight: 600;
    margin-left: auto;
}

.event-card-title {
    margin: 6px 0 8px;
    font-size: 1.15rem;
    line-height: 1.3;
}

.event-card-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef2f7;
}

.event-meta-date {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--dark);
}

.event-countdown {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(211, 84, 0, 0.1);
    color: var(--orange, #1E3D6B);
    font-size: 0.78rem;
    font-weight: 800;
    vertical-align: middle;
}

.event-meta-location {
    margin: 0;
    font-size: 0.85rem;
    color: #5b677a;
}

.event-meta-author {
    margin: 0;
    font-size: 0.8rem;
    color: #9aa5b4;
}

body.site-theme-night .event-card-meta {
    border-bottom-color: rgba(110, 154, 152, 0.14);
}

body.community-theme-night .event-card-meta {
    border-bottom-color: rgba(110, 154, 152, 0.14);
}

@media (max-width: 600px) {
    .event-card {
        grid-template-columns: 1fr;
    }
    .event-card-poster {
        min-height: 240px;
        max-height: 300px;
        border-radius: 20px 20px 0 0;
    }
}

/* ── Page détail événement ── */

.event-detail-layout {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.event-detail-layout--no-poster {
    grid-template-columns: minmax(0, 1fr);
}

.event-detail-poster-col {
    position: sticky;
    top: 24px;
}

.event-detail-poster-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
}

.event-detail-main-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.event-detail-card {
    background: white;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    padding: 28px 32px;
}

.event-detail-title {
    margin: 10px 0 14px;
    font-size: 2rem;
    line-height: 1.15;
}

.event-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}

.event-detail-section {
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    padding: 22px 28px;
}

.event-detail-section-title {
    margin: 0 0 14px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--dark);
}

/* Night mode */
body.site-theme-night .event-detail-card,
body.site-theme-night .event-detail-section {
    background: rgba(21, 36, 39, 0.92);
    box-shadow: 0 18px 38px rgba(0,0,0,0.28);
}

body.site-theme-night .event-detail-title,
body.site-theme-night .event-detail-section-title {
    color: #f2f8f7;
}

body.site-theme-night .event-detail-meta {
    border-bottom-color: rgba(110, 154, 152, 0.14);
}

body.site-theme-night .event-detail-card-share {
    border-top-color: rgba(110, 154, 152, 0.14) !important;
}

.event-detail-card-share .share-inline {
    justify-content: flex-start;
    gap: 10px;
}

body.site-theme-night .blog-content {
    color: #deecea;
}

@media (max-width: 760px) {
    .event-detail-layout {
        grid-template-columns: 1fr;
    }
    .event-detail-poster-col {
        position: static;
        max-width: 280px;
        margin: 0 auto;
    }
    .event-detail-card {
        padding: 20px;
    }
    .event-detail-title {
        font-size: 1.6rem;
    }
}

.event-map {
    width: 100%;
    height: 280px;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 14px;
    background: #eef2f7;
}

.event-address-label {
    margin: 0 0 4px;
    color: #5b677a;
    font-size: 0.92rem;
}

.event-camping-ref {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: #5b677a;
    font-size: 0.95rem;
}

.event-own-note {
    color: #5b677a;
    font-size: 0.95rem;
}

.blog-section-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: #5b677a;
    margin-left: 8px;
}

.link-subtle { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,0.2); }
.link-dark   { color: var(--dark); text-decoration: none; }
.link-dark:hover { text-decoration: underline; }

/* ── Night mode – page agenda publique (body.site-theme-night) ── */

body.site-theme-night .community-card {
    background: rgba(21, 36, 39, 0.92);
    box-shadow: 0 18px 38px rgba(0,0,0,0.28);
}

body.site-theme-night .community-card.post-card--group {
    background: linear-gradient(180deg, rgba(38, 110, 100, 0.32), rgba(21, 36, 39, 0.92) 72%);
    box-shadow: 0 18px 38px rgba(0,0,0,0.28), inset 0 0 0 2px rgba(64, 170, 150, 0.52);
}

body.site-theme-night .community-card h2,
body.site-theme-night .community-card h3,
body.site-theme-night .community-card h4 {
    color: #f2f8f7;
}

body.site-theme-night .community-card .link-dark {
    color: #f2f8f7;
}

body.site-theme-night .section-heading p {
    color: #a9bebd;
}

body.site-theme-night .event-meta-date {
    color: #deecea;
}

body.site-theme-night .event-meta-location,
body.site-theme-night .event-meta-author,
body.site-theme-night .event-counters,
body.site-theme-night .event-address-label,
body.site-theme-night .event-own-note {
    color: #a9bebd;
}

body.site-theme-night .event-extra-dates {
    color: #8faeb3;
}

body.site-theme-night .event-category {
    background: rgba(170, 200, 200, 0.12);
    color: #c7d8d6;
}

body.site-theme-night .event-category--rassemblement { background: rgba(64,224,208,0.18);  color: #76e5da; }
body.site-theme-night .event-category--journee-plage  { background: rgba(255,180,60,0.16);  color: #f5c57a; }
body.site-theme-night .event-category--porte-ouverte  { background: rgba(100,149,237,0.18); color: #8fb3f5; }
body.site-theme-night .event-category--sortie-club    { background: rgba(147,112,219,0.18); color: #c9a8f7; }
body.site-theme-night .event-category--spectacle      { background: rgba(220,80,120,0.18);  color: #f08aaa; }

/* BLOC "PRÈS DE CHEZ TOI" */
.nearby-campings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.nearby-camping-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f5fbfb;
    border: 1px solid rgba(47, 79, 79, 0.08);
    text-decoration: none;
    color: var(--dark);
    transition: background 0.15s, transform 0.15s;
}

.nearby-camping-item:hover {
    background: #e8f5f5;
    transform: translateY(-2px);
}

.nearby-camping-name {
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nearby-camping-meta {
    font-size: 0.8rem;
    color: #5f7983;
}

.nearby-camping-see-all {
    display: inline-block;
    margin-top: 14px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--dark);
    text-decoration: none;
}

.nearby-camping-see-all:hover {
    text-decoration: underline;
}

body.community-theme-night .nearby-camping-item {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #deecea;
}

body.community-theme-night .nearby-camping-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.community-theme-night .nearby-camping-meta {
    color: #8ab0b0;
}

body.community-theme-night .nearby-camping-see-all {
    color: #9dd0cc;
}

/* ── Carte mini dans la sidebar ─────────────────────────── */
.sidebar-map-canvas {
    width: 100%;
    height: 210px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.sidebar-map-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #2f8f6f;
    text-decoration: none;
}

.sidebar-map-link:hover {
    text-decoration: underline;
}

body.community-theme-night .sidebar-map-link {
    color: #9dd0cc;
}

.notifications-toolbar {
    margin-bottom: 18px;
}

.notif-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.notif-filter-chip {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid rgba(42, 122, 110, 0.18);
    background: #f4faf8;
    color: #33534d;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.notif-filter-chip:hover {
    border-color: rgba(42, 122, 110, 0.38);
    background: #e9f4f1;
    color: #234840;
}

.notif-filter-chip.is-active {
    background: #4A6B5A;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 5px 14px rgba(42, 122, 110, 0.30);
}

.notif-prefs-block {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e4ecec;
}

.notif-prefs-summary {
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: var(--dark);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notif-prefs-summary::before {
    content: '▶';
    font-size: 0.7em;
    transition: transform 0.2s;
}

details[open] .notif-prefs-summary::before {
    transform: rotate(90deg);
}

.notif-prefs-form {
    margin-top: 16px;
}

.notif-prefs-hint {
    margin: 0 0 16px;
    font-size: 14px;
    color: #5b677a;
}

.notif-prefs-table-header {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #eef2f7;
    margin-bottom: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #5b677a;
    text-align: center;
}

.notif-prefs-table-header span:first-child {
    text-align: left;
}

.notif-prefs-group-label {
    margin: 14px 0 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #5b677a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.notif-prefs-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f2f4f8;
}

.notif-prefs-type-name {
    font-size: 0.9rem;
    color: var(--dark);
}

.notif-pref-toggle {
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.notification-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--bg-light);
    border: 1px solid transparent;
    transition: border-color 0.15s, transform 0.18s ease, box-shadow 0.18s ease;
}

.notification-item::before {
    content: '';
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(121, 214, 199, 0.9) 0%, rgba(74, 176, 160, 0.18) 100%);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.notification-item:hover {
    border-color: rgba(64, 224, 208, 0.3);
    transform: translateY(-1px);
}

.notification-item:hover::before,
.notification-item.is-unread::before {
    opacity: 1;
}

.notification-item.is-unread {
    border-color: rgba(64, 224, 208, 0.28);
    background: #f4fcfb;
}

.notification-item-main {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.notification-item-badge {
    position: relative;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-item-icon-circle {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f5f3;
    color: #4A6B5A;
    line-height: 1;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    isolation: isolate;
}

.notification-item-icon-circle::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    pointer-events: none;
    opacity: 0.9;
}

.notification-item-icon-circle svg {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
}

.notification-item-icon-circle--like { color: #e0566a; }
.notification-item-icon-circle--message { color: #4A6B5A; }
.notification-item-icon-circle--friend { color: #3a7bd5; }
.notification-item-icon-circle--album { color: #9b59b6; }
.notification-item-icon-circle--place { color: var(--orange, #1E3D6B); }

.notification-item-icon-circle--like {
    background: linear-gradient(180deg, rgba(255, 245, 247, 0.98) 0%, rgba(253, 236, 241, 0.98) 100%);
}

.notification-item-icon-circle--message {
    background: linear-gradient(180deg, rgba(240, 251, 248, 0.98) 0%, rgba(228, 246, 241, 0.98) 100%);
}

.notification-item-icon-circle--friend {
    background: linear-gradient(180deg, rgba(243, 247, 255, 0.98) 0%, rgba(233, 240, 255, 0.98) 100%);
}

.notification-item-icon-circle--album {
    background: linear-gradient(180deg, rgba(251, 244, 255, 0.98) 0%, rgba(245, 236, 255, 0.98) 100%);
}

.notification-item-icon-circle--place {
    background: linear-gradient(180deg, rgba(255, 246, 241, 0.98) 0%, rgba(252, 237, 228, 0.98) 100%);
}

.notification-item-count {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--orange, #1E3D6B);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.notification-item-copy {
    min-width: 0;
}

.notification-item-text {
    margin: 0;
    color: var(--dark);
    line-height: 1.55;
    font-weight: 600;
}

.notification-item-meta {
    margin: 6px 0 0;
    color: #5b677a;
    font-size: 0.9rem;
}

.notification-item-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-left: 52px;
}

/* Barre filtres + "tout marquer lu" (anciennement en <style> inline dans la vue). */
.notif-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 16px;
}

.notif-controls .notif-filter-bar,
.notif-controls .notifications-toolbar {
    margin: 0;
}

.notif-controls .notifications-toolbar {
    flex: 0 0 auto;
}

.friend-request-panel--notifications {
    margin: 0 0 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e4ecec;
}

.friend-request-panel--notifications .section-heading {
    margin-bottom: 12px;
}

.friend-request-panel--notifications .section-heading h3 {
    margin: 0 0 6px;
    font-size: 1.08rem;
    color: var(--dark);
}

.notification-item-link {
    cursor: pointer;
}

.notif-actor-link {
    color: #4A6B5A;
    text-decoration: none;
    font-weight: 700;
}

.notif-prefs-save {
    margin-top: 14px;
}

.notif-prefs-email-head {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e4ecec;
}

.notif-prefs-email-head h3 {
    font-size: 15px;
    margin: 0 0 8px;
}

.notif-prefs-email-head p {
    margin: 0 0 12px;
    font-size: 14px;
    color: #5b677a;
}

body.community-theme-night .notifications-card {
    overflow: hidden;
}

body.community-theme-night .notif-filter-chip {
    border-color: rgba(128, 152, 157, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: #eaf5f3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.community-theme-night .notif-filter-chip.is-active,
body.community-theme-night .notif-filter-chip:hover {
    background: #2f7d72;
    border-color: transparent;
    color: #eaf5f3;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
}

body.community-theme-night .notification-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(129, 154, 158, 0.14);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

body.community-theme-night .notification-item.is-unread {
    background: linear-gradient(180deg, rgba(121, 214, 199, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-color: rgba(121, 214, 199, 0.2);
}

body.community-theme-night .notification-item-icon-circle {
    background: rgba(236, 245, 244, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 18px rgba(5, 12, 14, 0.16);
}

@media (max-width: 720px) {
    .community-card.notifications-card {
        border-radius: 18px;
        padding: 16px 14px 18px;
    }

    .notifications-card .section-heading {
        margin-bottom: 14px;
    }

    .notifications-card .section-heading h2 {
        margin-bottom: 6px;
        font-size: 1.3rem;
        line-height: 1.08;
    }

    .notifications-card .section-heading p {
        max-width: 29rem;
        font-size: 0.96rem;
        line-height: 1.5;
    }

    .notifications-toolbar .mini-action {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        border-radius: 14px;
    }

    /* Filtres : grille 3 colonnes alignees, compacte et rangee. */
    .notif-filter-bar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 14px;
    }

    .notif-filter-chip {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 6px;
        font-size: 0.8rem;
        text-align: center;
    }

    .notification-list {
        gap: 8px;
    }

    .notification-item {
        gap: 8px;
        padding: 10px 12px 10px 14px;
        border-radius: 14px;
    }

    .notification-item-main {
        gap: 10px;
        align-items: center;
    }

    .notification-item-badge {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }

    .notification-item-icon-circle {
        width: 36px;
        height: 36px;
    }

    .notification-item-icon-circle svg {
        width: 17px;
        height: 17px;
    }

    .notification-item-text {
        font-size: 0.92rem;
        line-height: 1.3;
    }

    .notification-item-meta {
        margin-top: 2px;
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .notification-item-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        padding-left: 0;
        padding-top: 4px;
    }

    .notification-item-actions .report-form-inline,
    .notification-item-actions .mini-action {
        width: 100%;
    }

    .notification-item-actions .report-form-inline {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .notification-item-actions .mini-action {
        justify-content: center;
        min-height: 44px;
        border-radius: 14px;
    }

    body.community-page-notifications .fab-container {
        right: 14px;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    body.community-page-notifications .fab-btn {
        width: 48px;
        height: 48px;
        box-shadow: 0 10px 24px rgba(201, 79, 41, 0.28);
    }
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-form > button[type="submit"] {
    align-self: flex-start;
}

.comment-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-image-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-light);
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background 0.15s;
}

.comment-image-label:hover {
    background: #dde5f0;
}

.comment-image-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.comment-emoji-toggle {
    border: none;
    padding: 0;
}

.comment-emoji-panel {
    display: none;
}

.comment-emoji-panel.is-open {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 10px;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.comment-emoji-btn {
    background: none;
    border: none;
    padding: 4px 5px;
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 6px;
    line-height: 1;
}

.comment-emoji-btn:hover {
    background: var(--bg-light, #f4f7f9);
}

@media (max-width: 720px) {
    .comment-emoji-toggle { display: none; }
}

body.community-theme-night .comment-emoji-panel.is-open {
    background: #1a2e35;
    border-color: #2a4450;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

body.community-theme-night .comment-emoji-btn:hover {
    background: #243d47;
}

.comment-image {
    display: block;
    max-width: 100%;
    max-height: 360px;
    border-radius: 12px;
    object-fit: contain;
    margin-top: 4px;
}

.comment-image-filename {
    font-size: 0.78rem;
    color: #5b677a;
    margin-left: 4px;
}

.compact-form {
    gap: 10px;
}

.comment-textarea {
    min-height: 84px;
    resize: vertical;
}

.empty-text {
    margin: 0;
    color: #5b677a;
}

.empty-feed-card {
    text-align: center;
}

.profile-card {
    text-align: center;
}

/* Spécificité plus haute pour battre .community-card dans responsive.css */
.community-card.profile-card {
    overflow: hidden;
    padding-top: 0;
}

/* ── Hero bannière profil ── */
.pcv2-hero {
    height: 110px;
    margin: 0 -28px;
    position: relative;
    background: linear-gradient(135deg, #1a6963 0%, #2a4e55 100%);
    flex-shrink: 0;
    overflow: hidden;
}

.pcv2-hero-bg {
    position: absolute;
    inset: -12%;
    width: 124%;
    height: 124%;
    max-width: none;
    min-width: 124%;
    min-height: 124%;
    object-fit: cover;
    display: block;
    filter: blur(26px) brightness(0.45) saturate(1.4);
    pointer-events: none;
    user-select: none;
}

/* Avatar qui chevauchee la bannière */
.pcv2-hero + .pcv2-avatar-wrap {
    margin-top: -46px;
    position: relative;
    z-index: 1;
}

.pcv2-hero + .pcv2-avatar-wrap .profile-avatar {
    border: 3.5px solid #fff;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.26);
}

/* ── Nouvelle présentation profil public (pcv2) ── */

.pcv2-avatar-wrap {
    position: relative;
    width: fit-content;
    margin: 0 auto 14px;
}

.pcv2-online-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #27ae60;
    border: 2.5px solid #fff;
    z-index: 1;
}

.pcv2-name {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 4px;
    line-height: 1.2;
}

.pcv2-online-label {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #27ae60;
}

.pcv2-lastseen {
    margin: 0 0 10px;
    font-size: 0.78rem;
    color: #9aa5b4;
}

.pcv2-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}

.pcv2-type-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(32, 178, 170, 0.12);
    color: #1a7a74;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pcv2-headline {
    font-size: 0.97rem;
    font-style: italic;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 8px;
    line-height: 1.5;
}

.pcv2-location {
    font-size: 0.85rem;
    color: #5b677a;
    margin: 0 0 16px;
}

.pcv2-stats {
    display: flex;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    margin: 0 0 16px;
    padding: 14px 0;
}

.pcv2-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pcv2-stat-link {
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background-color 160ms ease, transform 160ms ease;
}

.pcv2-stat-link:hover,
.pcv2-stat-link:focus-visible {
    background: rgba(230, 126, 34, 0.1);
    outline: none;
    transform: translateY(-1px);
}

.pcv2-stat + .pcv2-stat {
    border-left: 1px solid #eef2f7;
}

.pcv2-stat strong {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--dark);
}

.pcv2-stat span {
    font-size: 0.72rem;
    color: #9aa5b4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pcv2-bio {
    font-size: 0.9rem;
    color: #5b677a;
    line-height: 1.65;
    margin: 0 0 16px;
}

.pcv2-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.pcv2-actions .btn-search,
.pcv2-actions .mini-action {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
}

.pcv2-block-btn {
    font-size: 0.8rem;
    padding: 6px 14px;
    opacity: 0.75;
}

.pcv2-block-btn:hover {
    opacity: 1;
}

.profile-avatar,
.post-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #3a8c7e;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: bold;
    overflow: hidden;
}

.post-avatar {
    width: 56px;
    height: 56px;
    font-size: 1rem;
    flex-shrink: 0;
}

.post-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    display: block;
    text-decoration: none;
}

.post-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #27ae60;
    border: 2px solid #fff;
    z-index: 1;
}

.profile-avatar {
    margin: 0 auto;
}

.profile-avatar-quick-form {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.profile-avatar-quick-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profile-avatar-quick-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.profile-avatar-quick-badge {
    position: absolute;
    right: -1px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--orange, #1E3D6B) 0%, var(--orange, #1E3D6B) 100%);
    color: #fff;
    box-shadow: 0 6px 14px rgba(201, 79, 41, 0.22);
    border: 2px solid #fff;
    pointer-events: none;
}

.profile-avatar-quick-badge svg {
    width: 11px;
    height: 11px;
    display: block;
}

.pcv2-avatar-wrap .profile-avatar {
    width: 86px;
    height: 86px;
    font-size: 1.6rem;
}

.profile-avatar-image,
.post-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-meta {
    color: var(--teal, #4A6B5A);
    font-weight: bold;
    margin: 0 0 10px;
}

.profile-headline {
    margin: 0 0 10px;
    color: var(--dark);
    font-weight: 700;
    line-height: 1.5;
}

.profile-submeta {
    margin: 0 0 10px;
    color: #5b677a;
    font-size: 0.95rem;
}

.trust-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef7f6;
    color: #2b6f69;
    font-size: 0.78rem;
    font-weight: 800;
}

.trust-badge-verified {
    background: #eaf3ff;
    color: #315b8c;
}

.profile-visibility-note {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff7e9;
    color: #7a5a18;
    line-height: 1.5;
}

.profile-tag,
.member-list-tag,
.moderation-meta {
    color: #5b677a;
}

.profile-tag,
.member-list-tag {
    margin: 0 0 8px;
    font-weight: 700;
}

.profile-bio {
    color: #5b677a;
    line-height: 1.6;
    margin: 0;
}

.interest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-interest-tags {
    margin-top: 16px;
    justify-content: center;
}

.interest-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--bg-light);
    color: var(--dark);
    font-size: 0.88rem;
    font-weight: 700;
}

.profile-interest-item {
    align-items: flex-start;
}

.profile-link {
    color: var(--orange, #1E3D6B);
    text-decoration: none;
    font-weight: 700;
}

/* Mention @pseudo cliquable dans les posts, commentaires et messages. */
.mention {
    color: var(--orange, #1E3D6B);
    text-decoration: none;
    font-weight: 600;
}

.mention:hover {
    text-decoration: underline;
}

/* Menu d'autocomplétion des mentions @pseudo */
.mention-suggest {
    position: absolute;
    z-index: 4000;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e3ebe9;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(20, 50, 45, 0.16);
    padding: 6px;
}

.mention-suggest.is-open {
    display: block;
}

.mention-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 9px;
    cursor: pointer;
}

.mention-suggest-item.is-active,
.mention-suggest-item:hover {
    background: #f0f7f5;
}

.mention-suggest-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: #3a8c7e;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.mention-suggest-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: #2a3b38;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-suggest-tag {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--teal, #4A6B5A);
    background: #e8f5f2;
    padding: 2px 7px;
    border-radius: 999px;
}

.community-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Raccourcis personnels en tête du profil ────────────────────── */

.profile-space-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(51, 137, 126, 0.18);
    background:
        radial-gradient(circle at 100% 0, rgba(91, 201, 187, 0.15), transparent 34%),
        linear-gradient(145deg, #ffffff, #f6fbfa);
}

.profile-space-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #2e8a7f, #68c9bc 62%, var(--orange, #1E3D6B));
}

.profile-space-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.profile-space-heading h3 {
    margin: 4px 0 4px;
    color: #234d4e;
    font-size: 1.35rem;
}

.profile-space-heading p {
    margin: 0;
    color: #6f818e;
    font-size: 0.88rem;
    line-height: 1.45;
}

.profile-space-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #22736a;
    background: rgba(67, 171, 158, 0.13);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.profile-space-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
    gap: 10px;
}

.profile-space-link {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 76px;
    padding: 11px 12px;
    border: 1px solid rgba(77, 119, 122, 0.16);
    border-radius: 16px;
    color: #294c4d;
    background: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    box-shadow: 0 7px 20px rgba(29, 71, 72, 0.045);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.profile-space-link:hover,
.profile-space-link:focus-visible {
    color: #205f59;
    border-color: rgba(46, 138, 127, 0.42);
    background: #fff;
    box-shadow: 0 12px 26px rgba(29, 91, 84, 0.11);
    text-decoration: none;
    transform: translateY(-2px);
}

.profile-space-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: #277b72;
    background: #e4f4f1;
}

.profile-space-icon svg {
    width: 21px;
    height: 21px;
}

.profile-space-link--highlight .profile-space-icon {
    color: var(--orange, #1E3D6B);
    background: #fff0e9;
}

.profile-space-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.profile-space-copy strong {
    overflow: hidden;
    font-size: 0.86rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-space-copy small {
    overflow: hidden;
    color: #7d8d99;
    font-size: 0.7rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-space-arrow {
    color: #7ba69f;
    font-size: 1rem;
    transition: transform 160ms ease;
}

.profile-space-link:hover .profile-space-arrow,
.profile-space-link:focus-visible .profile-space-arrow {
    transform: translateX(3px);
}

.profile-account-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.profile-account-heading .section-heading {
    margin: 0;
}

.profile-logout-link {
    flex: 0 0 auto;
    text-decoration: none;
}

.profile-delete-account {
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid rgba(109, 128, 139, 0.14);
    opacity: 0.68;
}

.profile-delete-account > summary {
    color: #8e9ba5;
    font-size: 0.8rem;
    cursor: pointer;
    list-style: none;
}

.profile-delete-account > summary::-webkit-details-marker {
    display: none;
}

.profile-change-password {
    margin-top: 4px;
}

.profile-change-password > summary {
    color: #45556b;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.profile-change-password > summary::-webkit-details-marker {
    display: none;
}

.profile-change-password > summary::before {
    content: "\1F511\00a0\00a0";
}

.profile-password-form {
    margin-top: 12px;
    max-width: 340px;
}

.profile-password-form .admin-input {
    max-width: 340px;
}

.profile-password-hint {
    margin: 2px 0 12px;
    font-size: 0.8rem;
    color: #8e9ba5;
}

body.community-theme-night .profile-change-password > summary,
body.site-theme-night .profile-change-password > summary {
    color: #cdddda;
}

body.community-theme-night .profile-password-hint,
body.site-theme-night .profile-password-hint {
    color: #9fb2b1;
}

.profile-editor-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.profile-editor-heading .section-heading {
    margin-bottom: 0;
}

.profile-editor-preview-link {
    flex-shrink: 0;
    text-decoration: none;
    white-space: nowrap;
}

.profile-editor-intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(70, 200, 193, 0.12), rgba(255, 255, 255, 0.94));
    border: 1px solid rgba(70, 200, 193, 0.22);
    margin-bottom: 6px;
}

.profile-editor-intro p {
    margin: 0;
    color: #67808c;
    line-height: 1.55;
}

.profile-editor-intro-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(18, 56, 62, 0.9);
    color: #e9fffb;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-editor-form {
    gap: 18px;
}

.profile-editor-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(104, 141, 152, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 250, 0.92));
    box-shadow: 0 12px 32px rgba(28, 63, 68, 0.06);
}

.profile-editor-section-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-editor-section-head h4 {
    margin: 0;
    color: #1c4b52;
    font-size: 1.2rem;
    font-weight: 800;
}

.profile-editor-section-head p {
    margin: 0;
    color: #71848d;
    line-height: 1.5;
}

.profile-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.profile-editor-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.profile-editor-field--full {
    grid-column: 1 / -1;
}

.profile-interaction-toggle {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid rgba(52, 145, 132, 0.28);
    border-radius: 16px;
    background: rgba(52, 145, 132, 0.08);
    cursor: pointer;
}

.profile-interaction-toggle input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex: 0 0 20px;
    accent-color: #349184;
}

.profile-interaction-toggle--disabled {
    color: #87949a;
    border-color: rgba(135, 148, 154, 0.24);
    background: rgba(135, 148, 154, 0.08);
    cursor: not-allowed;
}

.profile-interaction-toggle--disabled input {
    accent-color: #aab3b8;
    cursor: not-allowed;
}

.profile-interaction-toggle-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.profile-interaction-toggle-copy strong {
    color: inherit;
    line-height: 1.3;
}

.profile-interaction-toggle-copy small {
    color: #8a9aa1;
    font-size: 0.88rem;
    line-height: 1.45;
}

.profile-editor-help {
    margin: -2px 0 2px;
    color: #8a9aa1;
    font-size: 0.88rem;
    line-height: 1.45;
}

.profile-character-count {
    align-self: flex-end;
    margin-top: -3px;
    color: #8a9aa1;
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: color 0.15s ease;
}

.profile-character-count.is-near-limit {
    color: var(--orange, #1E3D6B);
}

.profile-character-count.is-at-limit {
    color: #b43b47;
}

.profile-interest-options,
.profile-custom-interests {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-custom-interests:empty {
    display: none;
}

.profile-interest-option,
.profile-custom-interest-chip {
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid #cddbd9;
    border-radius: 999px;
    background: #fff;
    color: #456166;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.profile-interest-option:hover,
.profile-custom-interest-chip:hover {
    border-color: #3c8a80;
    color: #267368;
}

.profile-interest-option.is-selected {
    border-color: #2f8377;
    background: #e3f4f0;
    color: #236c62;
}

.profile-interest-option:disabled,
#add-custom-interest:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.profile-custom-interest-chip {
    border-color: #e5b1a0;
    background: #fff4ef;
    color: #9b4b31;
}

.profile-interest-custom-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.profile-interest-custom-row .mini-action {
    min-height: 44px;
}

.profile-interest-status {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    min-height: 18px;
    color: #84959c;
    font-size: 0.76rem;
}

#profile-interest-feedback {
    color: var(--orange, #1E3D6B);
}

#profile-interest-count {
    margin-left: auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.profile-editor-avatar-preview {
    width: 112px;
    height: 112px;
    border-radius: 30px;
    object-fit: cover;
    box-shadow: 0 12px 28px rgba(32, 57, 61, 0.14);
    border: 3px solid rgba(255, 255, 255, 0.9);
}

.profile-avatar-editor {
    display: flex;
    align-items: center;
    gap: 14px;
}

.profile-editor-avatar-shell {
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    border-radius: 30px;
    position: relative;
    background: linear-gradient(135deg, rgba(70, 200, 193, 0.18), rgba(223, 230, 239, 0.82));
    box-shadow: 0 12px 28px rgba(32, 57, 61, 0.12);
}

.profile-editor-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    color: #2f6768;
    font-size: 1.6rem;
    font-weight: 800;
}

.profile-editor-avatar-placeholder[hidden],
.profile-avatar-save-hint[hidden] {
    display: none !important;
}

.profile-avatar-file-actions {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.profile-avatar-file-button {
    padding-inline: 13px;
    font-size: 0.9rem;
    text-decoration: none;
}

.profile-avatar-edit-badge {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 3px solid white;
    border-radius: 50%;
    background: var(--orange, #1E3D6B);
    color: white;
    box-shadow: 0 8px 18px rgba(95, 47, 31, 0.2);
    cursor: pointer;
}

.profile-avatar-edit-badge:hover {
    filter: brightness(0.95);
}

.profile-avatar-file-name {
    max-width: 100%;
    color: #5b677a;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.profile-avatar-save-hint {
    color: #8a9aa1;
    line-height: 1.4;
}

.profile-editor-note {
    margin: -2px 0 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(70, 200, 193, 0.1);
    color: #56707b;
    line-height: 1.5;
}

.profile-editor-submit {
    display: flex;
    justify-content: flex-start;
    padding-top: 4px;
}

.profile-editor-submit .btn-search {
    min-width: 220px;
}

.profile-save-floating {
    display: none;
}

body.community-theme-night .profile-editor-intro {
    background: linear-gradient(135deg, rgba(50, 132, 128, 0.22), rgba(22, 38, 41, 0.92));
    border-color: rgba(93, 172, 166, 0.24);
}

body.community-theme-night .profile-space-card {
    border-color: rgba(101, 157, 153, 0.28);
    background:
        radial-gradient(circle at 100% 0, rgba(73, 157, 147, 0.15), transparent 34%),
        linear-gradient(145deg, #182d30, #132528);
}

body.community-theme-night .profile-space-heading h3,
body.community-theme-night .profile-space-link {
    color: #e3f1ef;
}

body.community-theme-night .profile-space-heading p,
body.community-theme-night .profile-space-copy small {
    color: #a2b7b8;
}

body.community-theme-night .profile-space-eyebrow {
    color: #9fe0d7;
    background: rgba(67, 171, 158, 0.17);
}

body.community-theme-night .profile-space-link {
    border-color: rgba(112, 150, 151, 0.25);
    background: rgba(25, 47, 50, 0.82);
}

body.community-theme-night .profile-space-link:hover,
body.community-theme-night .profile-space-link:focus-visible {
    color: #f0fbf9;
    border-color: rgba(86, 186, 172, 0.48);
    background: #203b3e;
}

body.community-theme-night .profile-space-icon {
    color: #a8e4dc;
    background: rgba(54, 145, 132, 0.24);
}

body.community-theme-night .profile-space-link--highlight .profile-space-icon {
    color: #f2b299;
    background: rgba(173, 74, 43, 0.24);
}

body.community-theme-night .profile-editor-intro p,
body.community-theme-night .profile-editor-section-head p,
body.community-theme-night .profile-editor-help,
body.community-theme-night .profile-character-count,
body.community-theme-night .profile-editor-note {
    color: #9eb7bc;
}

body.community-theme-night .profile-character-count.is-near-limit {
    color: #e5a35f;
}

body.community-theme-night .profile-character-count.is-at-limit {
    color: #ee7f89;
}

body.community-theme-night .profile-interest-option {
    border-color: rgba(136, 175, 174, 0.3);
    background: rgba(25, 46, 49, 0.86);
    color: #b7cece;
}

body.community-theme-night .profile-interest-option.is-selected {
    border-color: rgba(84, 187, 171, 0.68);
    background: rgba(54, 145, 132, 0.25);
    color: #b9eee5;
}

body.community-theme-night .profile-custom-interest-chip {
    border-color: rgba(224, 133, 99, 0.48);
    background: rgba(137, 68, 43, 0.24);
    color: #f1b79f;
}

body.community-theme-night .profile-editor-section {
    background: linear-gradient(180deg, rgba(23, 41, 45, 0.96), rgba(20, 33, 37, 0.92));
    border-color: rgba(97, 128, 132, 0.26);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

body.community-theme-night .profile-editor-section-head h4 {
    color: #eefaf8;
}

body.community-theme-night .profile-editor-note {
    background: rgba(56, 149, 143, 0.14);
}

.community-post-textarea {
    min-height: 140px;
    resize: vertical;
}

@media (max-width: 820px) {
    .profile-space-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-editor-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-editor-preview-link {
        width: 100%;
    }

    .profile-editor-section {
        padding: 18px;
        border-radius: 20px;
    }

    .profile-editor-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .profile-editor-avatar-preview {
        width: 96px;
        height: 96px;
        border-radius: 26px;
    }

    .profile-editor-avatar-shell {
        width: 96px;
        height: 96px;
        flex-basis: 96px;
        border-radius: 26px;
    }

    .profile-avatar-editor {
        gap: 12px;
    }

    .profile-avatar-file-button {
        padding-inline: 12px;
        font-size: 0.88rem;
    }

    .profile-editor-submit .btn-search {
        width: 100%;
        min-width: 0;
    }

    .profile-save-floating:not([hidden]) {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        z-index: 680;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 10px 10px 16px;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 20px;
        background: rgba(24, 55, 59, 0.96);
        color: white;
        box-shadow: 0 18px 42px rgba(18, 43, 47, 0.28);
        opacity: 0;
        pointer-events: none;
        transform: translateY(14px);
        transition: opacity 0.18s ease, transform 0.18s ease;
        backdrop-filter: blur(12px);
    }

    .profile-save-floating.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .profile-save-floating span {
        font-size: 0.86rem;
        font-weight: 800;
        line-height: 1.25;
    }

    .profile-save-floating .btn-search {
        flex-shrink: 0;
        min-height: 44px;
        padding: 10px 15px;
        font-size: 0.9rem;
    }

    .profile-account-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-logout-link {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 560px) {
    .profile-space-card {
        padding: 20px 15px;
    }

    .profile-space-heading {
        margin-bottom: 13px;
    }

    .profile-space-heading h3 {
        font-size: 1.18rem;
    }

    .profile-space-heading p {
        font-size: 0.8rem;
    }

    .profile-space-grid {
        gap: 8px;
    }

    .profile-space-link {
        grid-template-columns: 38px minmax(0, 1fr);
        min-height: 66px;
        padding: 9px;
        border-radius: 14px;
    }

    .profile-space-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .profile-space-icon svg {
        width: 19px;
        height: 19px;
    }

    .profile-space-copy strong {
        font-size: 0.78rem;
        /* Sur mobile les cartes sont étroites : on laisse le titre passer sur 2 lignes
           au lieu de le tronquer par « … » (ex. « Proposer un lieu », « Mon agenda »). */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .profile-space-copy small,
    .profile-space-arrow {
        display: none;
    }
}

@media (max-width: 360px) {
    .profile-avatar-editor {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Post composer */
.post-composer-card {
    padding: 18px 20px;
    border: 1px solid rgba(61, 124, 118, 0.12);
    border-radius: 22px;
}

.post-composer {
    gap: 11px;
}

.post-composer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1px;
}

.post-composer-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    max-width: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.post-composer-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary, #3a8a7a);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.post-composer-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark, #1a2e2b);
}

.post-composer-hint {
    margin-left: auto;
    font-size: 0.75rem;
    color: #8a9ab0;
    font-style: italic;
}

.post-composer-textarea {
    min-height: 82px;
    max-height: 190px;
    padding: 13px 15px;
    border-radius: 15px;
    font-size: 0.96rem;
    line-height: 1.45;
    resize: none;
    overflow-y: auto;
}

.post-composer-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.post-composer-photo-zone {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 46px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 13px;
    border: 1px solid #c8dbd8;
    background: rgba(244, 250, 249, 0.78);
    color: #3a8a7a;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    position: relative;
    overflow: hidden;
}

.post-composer-photo-zone:hover {
    background: #e8f5f3;
    border-color: #3a8a7a;
}

.post-composer-photo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 9px;
    background: rgba(58, 138, 122, 0.11);
}

.post-composer-photo-icon svg {
    width: 17px;
    height: 17px;
}

.post-composer-photo-text {
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 750;
    color: #3a8a7a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-composer-photo-max {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    min-height: 24px;
    margin-left: auto;
    padding: 3px 7px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.68rem;
    color: #4d887e;
    background: rgba(58, 138, 122, 0.11);
}

.post-composer-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.post-composer-actions {
    display: flex;
}

.post-composer-toolbar .post-composer-photo-zone {
    flex: 1 1 auto;
}

.post-composer-submit {
    margin-left: auto;
    min-width: 116px;
    min-height: 46px;
    padding: 10px 22px;
    border-radius: 13px;
}

.post-composer-preview {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 1px 0 3px;
    scrollbar-width: none;
}

.post-composer-preview[hidden] {
    display: none;
}

.post-composer-preview::-webkit-scrollbar {
    display: none;
}

.post-composer-preview-item {
    position: relative;
    display: block;
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    overflow: hidden;
    border: 1px solid rgba(68, 116, 113, 0.2);
    border-radius: 11px;
    background: #edf5f4;
}

.post-composer-preview-item img,
.post-composer-preview-item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-composer-preview-remove,
.post-composer-preview-rotate {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 50%;
    color: #fff;
    background: rgba(20, 31, 32, 0.76);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.post-composer-preview-remove {
    top: 4px;
    right: 4px;
}

.post-composer-preview-rotate {
    left: 4px;
    bottom: 4px;
    color: #eafdf9;
    background: rgba(42, 122, 110, 0.84);
    font-size: 0.92rem;
}

.post-composer-preview-remove:hover,
.post-composer-preview-remove:focus-visible {
    background: var(--orange, #1E3D6B);
    outline: none;
}

.post-composer-preview-rotate:hover,
.post-composer-preview-rotate:focus-visible {
    background: #2a8b7d;
    outline: none;
}

.member-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.member-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #eef2f7;
}

.member-list-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.member-list-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.member-list-initials {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3a8c7e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}
.member-list-avatar-wrap .post-online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
}


.member-list-item:first-child {
    border-top: none;
    padding-top: 0;
}

.member-list-item > div:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.member-list-item p {
    margin: 3px 0 0;
    color: #5b677a;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- "Mieux connaître ce membre" : 2 colonnes alignées --- */

.profile-details-list .member-list-item {
    display: grid;
    grid-template-columns: minmax(130px, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: 16px;
    justify-content: initial;
    padding: 14px 16px;
    border: 1px solid #e3eceb;
    border-radius: 14px;
    background: #f8fbfb;
}

.profile-details-list .member-list-item p {
    margin: 0;
    text-align: left;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    font-size: 0.92rem;
    line-height: 1.45;
}

.profile-details-list .member-list-item strong {
    line-height: 1.3;
}

.profile-details-list .profile-interest-item {
    align-items: start;
}

@media (max-width: 520px) {
    .profile-details-list .member-list-item {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 12px 14px;
    }
}

.conversation-list-item {
    align-items: flex-start;
}

.conversation-list-item.is-active {
    background: #f6fbff;
    border-radius: 16px;
    padding: 14px;
}

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

.conversation-badge {
    background: var(--orange, #1E3D6B);
    color: white;
    border-radius: 999px;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
}

/* ── Recherche de membre (messagerie) ───────────────────────────── */

.conv-search-wrap {
    position: relative;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(244, 250, 249, 0.96) 0%, rgba(236, 245, 243, 0.96) 100%);
    border: 1px solid rgba(210, 226, 222, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.conv-list-tools {
    position: relative;
    margin-bottom: 16px;
}

.conv-list-tools .conv-search-wrap {
    margin-bottom: 10px;
}

.conv-filter-bar {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 1px 1px 3px;
    scrollbar-width: none;
}

.conv-filter-bar::-webkit-scrollbar {
    display: none;
}

.conv-filter-btn {
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #d8e5e2;
    border-radius: 999px;
    background: #fff;
    color: #58706d;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

.conv-filter-btn.is-active {
    border-color: #2f8c7c;
    background: #2f8c7c;
    color: #fff;
}

.conv-swipe-hint {
    margin: 7px 2px 0;
    color: #7b918e;
    font-size: 0.75rem;
    text-align: center;
}

body.community-theme-night .conv-filter-btn {
    border-color: #365754;
    background: rgba(255,255,255,0.05);
    color: #a9c2bf;
}

body.community-theme-night .conv-filter-btn.is-active {
    border-color: #4fb8a6;
    background: #347f73;
    color: #fff;
}

.conv-search-label {
    display: inline-flex;
    margin-bottom: 10px;
    color: #52706d;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.conv-search-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 11px 16px 11px 44px;
    border: 1.5px solid #d4e0dc;
    border-radius: 999px;
    font-size: 0.95rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238fa0a8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 16px center;
    color: var(--dark, #1a2e2b);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.conv-search-input:focus {
    border-color: #3a9e8d;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(58, 158, 141, 0.12);
}

.conv-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d4e0dc;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    z-index: 200;
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow: hidden;
}

.conv-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.12s;
}

.conv-search-item:hover {
    background: #f0faf7;
}

.conv-search-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a9e8d, #2d7a6e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.conv-search-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.conv-search-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.conv-search-info strong {
    font-size: 0.92rem;
    color: var(--dark, #1a2e2b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-search-info span {
    font-size: 0.78rem;
    color: #8fa0a8;
}

.conv-search-action {
    font-size: 0.75rem;
    font-weight: 600;
    color: #3a9e8d;
    white-space: nowrap;
    flex-shrink: 0;
}

.conv-search-empty {
    padding: 12px 14px;
    font-size: 0.88rem;
    color: #8fa0a8;
    text-align: center;
}

body.community-theme-night .conv-search-input {
    background-color: rgba(255,255,255,0.05);
    border-color: #2e5450;
    color: #e8f4f2;
}

body.community-theme-night .conv-search-wrap {
    background: linear-gradient(180deg, rgba(28, 47, 50, 0.94) 0%, rgba(24, 42, 45, 0.94) 100%);
    border-color: rgba(98, 134, 133, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.community-theme-night .conv-search-label {
    color: #8db5ae;
}

body.community-theme-night .conv-search-input:focus {
    border-color: #3a9e8d;
    background-color: rgba(255,255,255,0.08);
}

body.community-theme-night .conv-search-dropdown {
    background: #1b3235;
    border-color: #2e5450;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

body.community-theme-night .conv-search-item:hover {
    background: rgba(58,158,141,0.12);
}

body.community-theme-night .conv-search-info strong {
    color: #e8f4f2;
}

body.community-theme-night .conv-list-heading p {
    color: #93adab;
}

body.community-theme-night .conv-list-count {
    background: rgba(54, 96, 90, 0.3);
    color: #aee6df;
}

/* ── Liste de conversations enrichie ────────────────────────────── */

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

.conv-list-heading {
    min-width: 0;
}

.conv-list-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.conv-list-heading p {
    margin: 6px 0 0;
    color: #6f868a;
    font-size: 0.92rem;
    line-height: 1.45;
}

.conv-list-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #edf7f5;
    color: #2a7468;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}

.conversation-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conv-item-row {
    --conv-action-width: 258px;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.conv-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 14px 14px 12px;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, transform 0.12s, box-shadow 0.18s, border-color 0.18s;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
    touch-action: pan-y;
}

.conv-item-row.is-swiped .conv-item {
    transform: translateX(calc(-1 * var(--conv-action-width)));
}

.conv-item-row.is-swiped .conv-item-actions {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    transition: transform 0.16s ease, opacity 0.16s ease, visibility 0s;
    pointer-events: auto;
}

.conv-item-row.is-dragging .conv-item-actions {
    transition: none;
}

.conv-item-row.is-removing {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.conv-row-more {
    display: none;
    position: absolute;
    z-index: 6;
    top: 50%;
    right: 9px;
    width: 34px;
    height: 34px;
    padding: 0 0 5px;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e4e1;
    border-radius: 50%;
    background: rgba(255,255,255,0.94);
    color: #617a77;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1;
    transform: translateY(-50%);
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(41, 69, 66, 0.1);
}

.conv-item-row.is-swiped .conv-row-more {
    opacity: 0;
    pointer-events: none;
}

.conv-item-row.is-archived-view .conv-item {
    background: rgba(47, 140, 124, 0.045);
}

@media (hover: hover) and (pointer: fine) {
    .conv-item-row:not(.is-archived-view) .conv-item {
        padding-right: 52px;
    }

    .conv-item-row:not(.is-archived-view) .conv-row-more {
        display: inline-flex;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.14s ease, background-color 0.14s ease;
    }

    .conv-item-row:not(.is-archived-view):hover .conv-row-more,
    .conv-row-more:focus-visible {
        opacity: 1;
        pointer-events: auto;
    }
}

.conv-item + .conv-item::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 82px;
    right: 14px;
    height: 1px;
    background: rgba(17, 35, 38, 0.06);
}

.conv-item:hover {
    background: var(--bg-light, #f6f9f8);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(20, 38, 41, 0.08);
}

.conv-item--active {
    background: #e6f5f1;
    border-color: rgba(58, 158, 141, 0.22);
    box-shadow: 0 14px 32px rgba(20, 38, 41, 0.10);
}

.conv-item--active .conv-item-name {
    color: #1a6b5e;
    font-weight: 700;
}

.conv-item--active .conv-item-type {
    color: #547c76;
}

.conv-item--active .conv-item-preview {
    color: #52706b;
}

.conv-item--unread {
    background: #f0faf7;
    border-color: rgba(58, 158, 141, 0.14);
}

/* Sidebar : avatars légèrement plus petits */
.sidebar-conv-list .conv-item-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
}

.sidebar-conv-list .conv-item {
    padding: 10px 10px;
}

.conv-item--unread:hover {
    background: #e4f5f0;
}

.conv-item-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.conv-item-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a9e8d, #2d7a6e);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    box-shadow: 0 10px 18px rgba(38, 94, 85, 0.14);
}

.conv-item-avatar-fallback {
    position: relative;
    z-index: 1;
}

.conv-item-avatar img {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.conv-item-online {
    position: absolute;
    bottom: 1px;
    right: 1px;
    z-index: 5;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #27ae60;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(18, 36, 34, 0.08);
}

.conv-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.conv-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.conv-item-name-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.conv-item-name {
    font-size: 1rem;
    color: var(--dark, #1a2e2b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}

.conv-item-type {
    font-size: 0.74rem;
    color: #8ea5a1;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.conv-item--unread .conv-item-name {
    font-weight: 700;
}

.conv-item-time {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(234, 241, 241, 0.92);
    font-size: 0.74rem;
    color: #678086;
    flex-shrink: 0;
    white-space: nowrap;
}

.conv-item--unread .conv-item-time {
    color: #3a9e8d;
    font-weight: 600;
}

.conv-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.conv-item-preview {
    font-size: 0.88rem;
    color: #6f8387;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.conv-item-preview--empty,
.conv-item--empty .conv-item-preview {
    color: #3a9e8d;
    font-style: italic;
    opacity: 0.75;
}

.conv-item-preview--ephemeral {
    color: var(--orange, #1E3D6B);
    font-weight: 700;
}

.conv-item-preview--media {
    color: #597b88;
    font-weight: 600;
}

.conv-item--unread .conv-item-preview {
    color: #3a7a6e;
    font-weight: 500;
}

.conv-item-meta-trail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.conv-item-state {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(233, 242, 241, 0.95);
    color: #678086;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.conv-item-state.is-online {
    background: rgba(39, 174, 96, 0.12);
    color: #21864b;
}

.conv-item-state.is-empty {
    background: rgba(58, 158, 141, 0.12);
    color: #4A6B5A;
}

.conv-item-state.is-muted {
    background: rgba(91, 103, 122, 0.12);
    color: #536374;
}

.conv-item-badge {
    background: var(--orange, #1E3D6B);
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0 5px;
    flex-shrink: 0;
}

.conv-item-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--conv-action-width);
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateX(calc(100% + 8px));
    transition: transform 0.16s ease, opacity 0.16s ease, visibility 0s linear 0.16s;
    pointer-events: none;
}

.conv-item-archive,
.conv-item-mute,
.conv-item-delete {
    flex: 1 1 33.333%;
    border: none;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    cursor: pointer;
}

.conv-item-archive {
    border-radius: 16px 0 0 16px;
    background: linear-gradient(180deg, #65827e 0%, #506d69 100%);
}

.conv-item-mute {
    background: linear-gradient(180deg, #7d8b9b 0%, #617082 100%);
}

.conv-item-mute.is-muted {
    background: linear-gradient(180deg, #4f5f70 0%, #3f4d5c 100%);
}

.conv-item-delete {
    border-radius: 0 16px 16px 0;
    background: linear-gradient(180deg, var(--orange, #1E3D6B) 0%, #b83f37 100%);
}

.conv-archive-toast {
    position: fixed;
    left: 50%;
    bottom: 86px;
    transform: translateX(-50%) translateY(16px);
    z-index: 700;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    width: min(92vw, 360px);
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(25, 40, 43, 0.96);
    color: #eef6f5;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.conv-archive-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.conv-archive-toast button {
    border: none;
    background: rgba(121, 214, 199, 0.18);
    color: #aaf0e6;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 800;
}

/* Night mode */
body.community-theme-night .conv-item + .conv-item::before {
    background: rgba(255,255,255,0.06);
}

body.community-theme-night .conv-item-type {
    color: #5a7a78;
}

body.community-theme-night .conv-item--empty .conv-item-preview {
    color: #4a9e90;
}

body.community-theme-night .conv-item:hover {
    background: rgba(255,255,255,0.05);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

body.community-theme-night .conv-item--unread {
    background: rgba(58, 158, 141, 0.1);
}

body.community-theme-night .conv-item--active {
    background: linear-gradient(180deg, rgba(38, 58, 61, 0.94), rgba(31, 50, 53, 0.96));
    border-color: rgba(104, 202, 188, 0.44);
    box-shadow: 0 16px 34px rgba(5, 15, 17, 0.28);
}

body.community-theme-night .conv-item--active .conv-item-name {
    color: #eef8f7;
}

body.community-theme-night .conv-item--active .conv-item-type,
body.community-theme-night .conv-item--active .conv-item-time,
body.community-theme-night .conv-item--active .conv-item-preview {
    color: #9fc2be;
}

body.community-theme-night .conv-item--unread:hover {
    background: rgba(58, 158, 141, 0.16);
}

body.community-theme-night .conv-item-name {
    color: #e8f4f2;
}

body.community-theme-night .conv-item-preview {
    color: #6a8a86;
}

body.community-theme-night .friend-request-card {
    background: linear-gradient(180deg, rgba(34, 53, 56, 0.96), rgba(27, 44, 47, 0.98));
    border-color: rgba(94, 188, 174, 0.2);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

body.community-theme-night .friend-request-name {
    color: #eef8f7;
}

body.community-theme-night .friend-request-meta {
    color: #89c9c0;
}

body.community-theme-night .friend-request-note {
    color: #9cb7b4;
}

body.community-theme-night .icon-action-cooldown {
    background: rgba(255, 255, 255, 0.08);
    color: #aebbc9;
}

body.community-theme-night .conv-item-time {
    background: rgba(255, 255, 255, 0.06);
    color: #9cb4b1;
}

body.community-theme-night .conv-item--unread .conv-item-preview {
    color: #7ecfc4;
}

body.community-theme-night .conv-item-online {
    border-color: #13282c;
    box-shadow: 0 0 0 1px rgba(39, 174, 96, 0.18);
}

body.community-theme-night .conv-item-archive {
    background: linear-gradient(180deg, #587773 0%, #405e5a 100%);
}

body.community-theme-night .conv-item-delete {
    background: linear-gradient(180deg, #c94f46 0%, #a7352e 100%);
}

body.community-theme-night .conv-item-state {
    background: rgba(255, 255, 255, 0.06);
    color: #9ab5b2;
}

body.community-theme-night .conv-item-state.is-online {
    background: rgba(39, 174, 96, 0.18);
    color: #8de0a9;
}

body.community-theme-night .conv-item-state.is-empty {
    background: rgba(58, 158, 141, 0.18);
    color: #9ce3d7;
}

.inline-form {
    margin: 0;
}

.friendship-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mini-action {
    border: none;
    background: var(--orange, #1E3D6B);
    color: white;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.mini-action-secondary {
    background: #dfe6ef;
    color: var(--dark);
}

.mini-action-danger {
    background: #a13b49;
}

.member-list-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.member-list-actions .friendship-actions {
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.icon-action {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--orange, var(--orange, #1E3D6B));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity .15s;
}
.icon-action:hover { opacity: .82; }

.icon-action-secondary {
    background: #dfe6ef;
    color: #5b677a;
}

.icon-action-pending {
    background: #e8ede6;
    color: #7a8a70;
}

.icon-action-cooldown {
    background: #eef0f4;
    color: #6f7b8d;
}

.icon-action-write {
    background: var(--teal, #4A6B5A);
    color: #fff;
}

.icon-action-block {
    background: #c0392b;
    color: #fff;
}

.pcv2-icon-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.pcv2-icon-row .friendship-actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.pcv2-icon-row .icon-action {
    width: 52px;
    height: 52px;
}

.pcv2-icon-row .icon-action svg {
    width: 22px;
    height: 22px;
}

.pcv2-avatar-zoomable {
    cursor: zoom-in;
}

.profile-action-disabled {
    cursor: default;
    pointer-events: none;
}

.profile-action-sent {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #a0b0b0 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
}


.moderation-grid {
    margin-top: 20px;
}

.moderation-card h3 {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Cartes de modération (publications, commentaires, annonces, groupes…).
   Chaque item est une vraie carte encadrée, empilée en colonne : en-tête +
   contenu (média/texte) + barre d'action séparée. L'action est toujours sur sa
   propre ligne (jamais tassée à côté d'un média haut).
   --------------------------------------------------------------------------- */
.moderation-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.moderation-list .moderation-list-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 16px;
    border: 1px solid #e3eceb;
    border-radius: 16px;
    background: #fbfdfd;
    box-shadow: 0 1px 3px rgba(31, 61, 56, 0.05);
}

/* La 1re carte n'hérite plus du reset (border-top:none / padding-top:0) de .member-list-item. */
.moderation-list .moderation-list-item:first-child {
    padding-top: 16px;
    border-top: 1px solid #e3eceb;
}

/* Le bloc de contenu prend toute la largeur (plus de colonne étroite à côté de l'action). */
.moderation-list .moderation-list-item > div:first-child {
    flex: none;
    min-width: 0;
}

/* En-tête et lignes de méta : retour à la ligne propre au lieu d'être coupés (…). */
.moderation-list .member-list-tag,
.moderation-list .moderation-list-item p {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.moderation-meta {
    margin: 6px 0 0;
    font-size: 0.92rem;
}

/* Média : rentre toujours dans la carte (le !important bat le max-width:320px inline
   posé par la vue), plafonné à 320px sur grand écran. */
.moderation-list .moderation-list-item img,
.moderation-list .moderation-list-item video {
    max-width: min(100%, 320px) !important;
    height: auto;
    border: 1px solid #e3eceb;
}

/* Barre d'action : ligne dédiée, séparée du contenu ; boutons à droite en desktop. */
.moderation-list .moderation-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px dashed #e6edec;
    padding-top: 12px;
    margin-top: 2px;
}

/* Boutons d'action compacts et sobres (fini les gros pills pleine largeur). */
.moderation-list .moderation-actions .mini-action {
    min-height: 0;
    width: auto;
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 700;
}
/* « Interdire de commenter » : bouton discret bordé (l'action forte visible = Supprimer). */
.moderation-list .moderation-actions .mini-action-secondary {
    background: #fff;
    color: #45556b;
    border: 1px solid #d5dde2;
}

/* Mobile : marge négative scopée pour récupérer de la largeur. Les boutons restent
   compacts et alignés à droite (ils passent à la ligne si besoin, pas en pleine largeur). */
@media (max-width: 640px) {
    .moderation-list {
        margin-left: -10px;
        margin-right: -10px;
    }
    .moderation-list .moderation-list-item {
        padding: 14px;
    }
    .moderation-list .moderation-actions .inline-form,
    .moderation-list .moderation-actions form {
        flex: 0 0 auto;
        margin: 0;
    }
}

/* ===== Carte commentaire en modération : classes (jour) ===== */
.mod-chip {
    display: inline-block;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: 0.03em;
}
.mod-chip--comment { background: #e4f4f1; color: #2F5A4C; text-transform: uppercase; }
.mod-chip--post { background: #e8eef7; color: #3a5b8c; text-transform: uppercase; }
.mod-chip--group { background: #fdeede; color: #b45f26; margin-left: 4px; }
.mod-byline { margin: 6px 0 0; font-size: 0.9rem; color: #6d7d88; }
.mod-byline-name { font-weight: 800; color: #1f3d38; text-decoration: none; }
.mod-byline-meta { color: #6d7d88; }
/* Média (photo/vidéo) et texte d'une publication. */
.mod-media { display: block; max-height: 360px; border-radius: 10px; margin: 8px 0; background: #000; }
.mod-text { margin: 6px 0; white-space: pre-wrap; color: #2a3b39; }
.mod-quote {
    margin: 8px 0;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e3eceb;
    border-left: 3px solid #2f8c7c;
    border-radius: 10px;
    white-space: pre-wrap;
    color: #233b38;
    font-weight: 600;
}
.mod-context {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 2px 0 0;
    padding: 8px 10px;
    background: #f6faf9;
    border: 1px solid #eef3f2;
    border-radius: 10px;
    font-size: 0.86rem;
}
.mod-context-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: #000; flex: 0 0 auto; }
.mod-context-text { min-width: 0; }
.mod-context-under { color: #6d7d88; }
.mod-context-under strong { color: #1f3d38; }
.mod-context-group { color: #b45f26; }
.mod-context-label { color: #45556b; }
.mod-context-link { font-size: 0.82rem; font-weight: 700; color: var(--orange, #1E3D6B); text-decoration: none; }

/* ===== Mode NUIT (body.site-theme-night) : cartes de modération refaites en
   classes (.mod-card). Scopé à .mod-card pour ne pas toucher les vues encore
   en styles inline (fond sombre + texte sombre inline = illisible). ===== */
body.site-theme-night .mod-card {
    background: #1a2c32;
    border-color: rgba(112, 160, 159, 0.22);
    box-shadow: none;
}
body.site-theme-night .mod-card .moderation-actions { border-top-color: rgba(112, 160, 159, 0.22); }
body.site-theme-night .mod-card .moderation-actions .mini-action-secondary {
    background: transparent;
    color: #cdddda;
    border-color: rgba(112, 160, 159, 0.4);
}
body.site-theme-night .mod-card .mod-context-thumb,
body.site-theme-night .mod-card .mod-media { border-color: rgba(112, 160, 159, 0.25); }
body.site-theme-night .mod-card .mod-text { color: #dbe7e4; }
body.site-theme-night .mod-card .moderation-meta { color: #9fb4b2; }
body.site-theme-night .mod-chip--post { background: rgba(90, 130, 180, 0.24); color: #a9c4e8; }

body.site-theme-night .mod-chip--comment { background: rgba(47, 140, 124, 0.2); color: #8fdccb; }
body.site-theme-night .mod-chip--group { background: rgba(210, 104, 63, 0.22); color: #f0a98a; }
body.site-theme-night .mod-byline,
body.site-theme-night .mod-byline-meta { color: #9fb4b2; }
body.site-theme-night .mod-byline-name { color: #eaf4f2; }
body.site-theme-night .mod-quote { background: #13242a; border-color: rgba(112, 160, 159, 0.25); border-left-color: #2f8c7c; color: #e7f1ef; }
body.site-theme-night .mod-context { background: #13242a; border-color: rgba(112, 160, 159, 0.2); }
body.site-theme-night .mod-context-under { color: #9fb4b2; }
body.site-theme-night .mod-context-under strong { color: #eaf4f2; }
body.site-theme-night .mod-context-group { color: #f0a98a; }
body.site-theme-night .mod-context-label { color: #c3d3d1; }
body.site-theme-night .mod-context-link { color: #f0a06a; }

.moderation-inbox-panel {
    padding: clamp(24px, 4vw, 44px);
}

.moderation-inbox-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.moderation-inbox-header h2 {
    margin: 2px 0 6px;
}

.moderation-eyebrow {
    margin: 0;
    color: var(--teal, #4A6B5A);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.moderation-inbox-subtitle {
    margin: 0;
    color: #6f8090;
    font-size: 0.95rem;
}

.moderation-inbox-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 14px;
    border-radius: 999px;
    background: #fbe9e5;
    color: var(--orange, #1E3D6B);
    font-size: 1.1rem;
    font-weight: 800;
}

.moderation-case-list {
    gap: 18px;
}

.moderation-case {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 24px;
    padding: 24px;
    border: 1px solid #dce8e7;
    border-left: 4px solid var(--orange, #1E3D6B);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(30, 65, 65, 0.07);
}

.moderation-case-main {
    min-width: 0;
}

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

.moderation-case-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.moderation-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.moderation-badge-type {
    background: #e5f3f0;
    color: #21695f;
}

.moderation-badge-alert {
    background: #fff0e7;
    color: var(--orange, #1E3D6B);
}

.moderation-case-time {
    flex-shrink: 0;
    color: #8395a1;
    font-size: 0.8rem;
}

.moderation-reporter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 12px;
    color: #617482;
    font-size: 0.86rem;
}

.moderation-reporter a,
.moderation-target-links a {
    color: var(--teal, #4A6B5A);
    text-decoration: none;
    font-weight: 700;
}

.moderation-reporter a:hover,
.moderation-target-links a:hover {
    text-decoration: underline;
}

.moderation-report-note {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff8e8;
    color: #765b22;
    font-size: 0.87rem;
}

.moderation-report-note p {
    margin: 4px 0 0;
}

.moderation-target-card {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid #dbe5e9;
    border-radius: 14px;
    background: #f6f9fa;
}

.moderation-target-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e8eb;
}

.moderation-target-header > div:first-child {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.moderation-target-label {
    flex-basis: 100%;
    color: #81919b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.moderation-target-email {
    color: #84939e;
    font-size: 0.78rem;
}

.moderation-target-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: #84939e;
    font-size: 0.76rem;
    white-space: nowrap;
}

.moderation-target-content,
.moderation-target-title,
.moderation-target-empty {
    margin: 14px 0 0;
    color: #334e57;
    font-size: 0.96rem;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

.moderation-target-title {
    font-size: 1rem;
    font-weight: 800;
}

.moderation-target-empty {
    color: #8997a0;
    font-style: italic;
}

.moderation-target-quote {
    padding: 2px 0 2px 14px;
    border-left: 3px solid var(--orange, #1E3D6B);
    font-size: 1.03rem;
}

.moderation-target-image {
    display: block;
    width: min(280px, 100%);
    max-height: 280px;
    margin-top: 14px;
    border-radius: 10px;
    object-fit: cover;
}

.moderation-target-video {
    background: #111;
}

.moderation-target-category {
    display: inline-flex;
    margin-top: 8px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #e6efef;
    color: #52706e;
    font-size: 0.75rem;
    font-weight: 700;
}

.moderation-profile-summary {
    display: flex;
    gap: 14px;
    margin-top: 14px;
}

.moderation-profile-summary > img {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.moderation-profile-summary p {
    margin: 0;
}

.moderation-target-missing {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid #efd1cb;
    border-radius: 12px;
    background: #fff5f3;
    color: #94483c;
    font-size: 0.86rem;
}

.moderation-case-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding-left: 20px;
    border-left: 1px solid #e6ecee;
}

.moderation-case-actions form {
    margin: 0;
}

.moderation-case-actions .mini-action {
    width: 100%;
    min-height: 42px;
    padding: 9px 13px;
    text-align: center;
}

.mini-action-success {
    background: #287965;
}

.mini-action-warning {
    background: var(--orange, #1E3D6B);
}

.mini-action-ghost-danger {
    border: 1px solid #e2c2c6;
    background: transparent;
    color: #a13b49;
}

.moderation-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 32px;
    border: 1px dashed #c8dbd7;
    border-radius: 18px;
    color: #456861;
    text-align: center;
}

.moderation-empty-state > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #dff1eb;
    color: #287965;
    font-size: 1.35rem;
    font-weight: 900;
}

.moderation-empty-state p {
    margin: 4px 0 0;
    color: #7c8f8b;
}

@media (max-width: 820px) {
    .moderation-case {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px;
    }

    .moderation-case-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 16px 0 0;
        border-top: 1px solid #e6ecee;
        border-left: 0;
    }
}

@media (max-width: 560px) {
    .moderation-inbox-panel {
        padding: 20px 16px;
    }

    .moderation-inbox-header,
    .moderation-case-header,
    .moderation-target-header {
        align-items: flex-start;
    }

    .moderation-case-header,
    .moderation-target-header {
        flex-direction: column;
    }

    .moderation-target-links {
        align-items: flex-start;
        white-space: normal;
    }

    .moderation-case-actions {
        grid-template-columns: 1fr;
    }
}

/* --- Parrainage repliable sur le profil --- */

.referral-card-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    list-style: none;
    cursor: pointer;
}

.referral-card-summary::-webkit-details-marker {
    display: none;
}

.referral-card-summary .section-heading {
    display: block;
    margin: 0;
}

.referral-card-summary h3 {
    margin: 0 0 4px;
}

.referral-card-summary-copy {
    display: block;
    color: #71818c;
    font-size: 0.88rem;
    line-height: 1.4;
}

.referral-card-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: #edf4f2;
    color: #366c68;
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}

.referral-card-collapsible[open] .referral-card-chevron {
    transform: rotate(180deg);
}

.referral-card-content {
    margin-top: 16px;
}

/* --- Recherche membres --- */

.member-search-form {
    margin-bottom: 22px;
}

.member-search-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(260px, 1.2fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.member-search-row .member-search-name {
    grid-column: auto;
}

.member-search-row .member-search-location {
    grid-column: auto;
}

.member-search-row .member-search-name,
.member-search-row .member-search-location {
    min-width: 0;
    background: #f2f6f6;
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 0.95rem;
    box-shadow: none;
}

.member-search-row .member-search-name:focus,
.member-search-row .member-search-location:focus {
    background: #fff;
    border-color: var(--turquoise);
}

.member-search-radius-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 12px;
    border: 1.5px solid #d0d8e4;
    background: #fff;
    color: #4a5568;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    box-sizing: border-box;
    min-height: 34px;
    flex: 0 0 auto;
}

.member-search-radius-select {
    appearance: none;
    border: 0;
    background: transparent;
    color: #273946;
    font: inherit;
    font-weight: 700;
    line-height: 1.5;
    padding: 2px 18px 2px 0;
    min-width: 72px;
    background-image: linear-gradient(45deg, transparent 50%, #6b7788 50%),
        linear-gradient(135deg, #6b7788 50%, transparent 50%);
    background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.member-search-radius-select:focus {
    outline: 2px solid rgba(43, 122, 120, 0.26);
    outline-offset: 2px;
}

.member-search-form .member-search-btn {
    white-space: nowrap;
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--orange, #1E3D6B), var(--orange, #1E3D6B));
    border: none;
    border-radius: 12px;
    padding: 13px 22px;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    box-shadow: 0 6px 16px rgba(201, 79, 41, 0.26);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

@media (max-width: 1180px) and (min-width: 769px) {
    .member-search-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .member-search-row .member-search-name {
        grid-column: 1;
        grid-row: 1;
    }

    .member-search-row .member-search-location {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .member-search-form .member-search-btn {
        grid-column: 2;
        grid-row: 1;
    }
}

.member-search-form .member-search-btn:hover {
    box-shadow: 0 8px 20px rgba(201, 79, 41, 0.32);
    filter: brightness(1.03);
}

.member-search-btn-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    flex: 0 0 auto;
}

/* --- Barre de filtres pills --- */

.member-search-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.member-search-geo-filters {
    gap: 10px;
    margin-bottom: 12px;
}

.member-search-type-filters {
    gap: 8px;
}

.member-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.member-type-pills input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

.member-type-pills label {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1.5px solid #d0d8e4;
    font-size: 0.82rem;
    cursor: pointer;
    color: #4a5568;
    background: #fff;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    line-height: 1.5;
    user-select: none;
}

.member-type-pills input[type="radio"]:checked + label {
    background: #2b7a78;
    color: #fff;
    border-color: #2b7a78;
    font-weight: 600;
}

.member-type-pills label:hover {
    border-color: #2b7a78;
    color: #2b7a78;
}

/* --- Pill "En ligne" --- */

.member-search-online-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1.5px solid #d0d8e4;
    font-size: 0.82rem;
    color: #4a5568;
    background: #fff;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    line-height: 1.5;
}

.member-search-online-label:has(input:checked) {
    background: #e9f5f4;
    border-color: #2b7a78;
    color: #2b7a78;
    font-weight: 600;
}

.member-search-certified-label:has(input:checked) {
    background: #eef5ff;
    border-color: #4c78bd;
    color: #28568f;
}

.certified-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #e8f0ff;
    color: #3569ad;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.member-search-online-label input[type="checkbox"] {
    display: none;
}

.member-search-all-link {
    margin-left: auto;
    color: var(--orange, #1E3D6B);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.member-search-all-link:hover {
    text-decoration: underline;
}

.online-dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c0ccd8;
    flex-shrink: 0;
    transition: background 0.15s;
}

.member-search-online-label:has(input:checked) .online-dot-indicator {
    background: #22c55e;
}

.nearby-dot-indicator {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #9aa8b7;
    box-shadow: inset 0 0 0 2px #fff;
    background: #d8e1e8;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.member-search-nearby-label:has(input:checked) .nearby-dot-indicator {
    border-color: #2b7a78;
    background: #2b7a78;
}

.member-search-count {
    margin: 0 0 16px;
    font-size: 0.9rem;
    color: #5b677a;
}

.member-search-notice {
    margin: -4px 0 16px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 0.86rem;
    line-height: 1.45;
}

.friend-request-panel {
    margin-bottom: 18px;
}

.friend-request-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.friend-request-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #3a9e8d, #2d7a6e);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(33, 107, 95, 0.22);
    flex-shrink: 0;
}

.friend-request-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.friend-request-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(236, 247, 245, 0.94), rgba(230, 243, 241, 0.94));
    border: 1px solid rgba(58, 158, 141, 0.16);
    box-shadow: 0 12px 28px rgba(27, 70, 73, 0.08);
}

.friend-request-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.friend-request-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: #3a8c7e;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.friend-request-avatar span {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}

.friend-request-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.friend-request-name {
    font-size: 1rem;
    color: var(--dark);
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-request-meta {
    font-size: 0.82rem;
    color: #4f8d85;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-request-note {
    margin: 0;
    font-size: 0.86rem;
    color: #637d7a;
    line-height: 1.35;
}

.friend-request-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.friend-request-view {
    text-decoration: none;
}

/* --- Grille de cartes membres --- */

.member-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: 14px;
    min-width: 0;
}

@media (max-width: 480px) {
    .member-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.member-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    min-width: 0;
}

.member-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 20px 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    border: 1px solid transparent;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    height: 100%;
    box-sizing: border-box;
}

.member-card-link:hover .member-card {
    border-color: var(--turquoise);
    box-shadow: 0 8px 24px rgba(64, 224, 208, 0.22);
    transform: translateY(-3px);
}

.friend-remove-x {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #8a99a8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.friend-remove-x:hover {
    background: rgba(161, 59, 73, 0.15);
    color: #a13b49;
}

.member-card-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: fit-content;
}

.member-card-online-dot {
    position: absolute;
    bottom: 9%;
    right: 9%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #27ae60;
    border: 2px solid #fff;
    z-index: 1;
}

.member-card-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #3a8c7e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

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

.member-card-avatar-initials {
    color: white;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1;
}

.member-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    width: 100%;
}

.member-card-name {
    font-size: 0.93rem;
    color: var(--dark);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

.member-card-self-badge {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    font-size: 0.68rem;
    font-weight: 600;
    color: #2b7a78;
    background: #e9f5f4;
    border: 1px solid #b2d8d6;
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 4px;
    text-transform: none;
    letter-spacing: 0;
    position: relative;
    top: -1px;
}

.member-card-type {
    font-size: 0.78rem;
    color: var(--teal, #4A6B5A);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.member-card-location {
    font-size: 0.8rem;
    color: #5b677a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.member-card-headline {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: #7d8899;
    line-height: 1.4;
    font-style: italic;
}

.member-card-lastseen {
    font-size: 0.72rem;
    color: #9babb8;
    margin-top: 1px;
}

/* --- Compteur "En ligne" dans la pill --- */

.online-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #2b7a78;
    color: #fff;
    font-size: 0.71rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
    flex-shrink: 0;
}

.member-search-online-label:has(input:checked) .online-count-badge {
    background: #fff;
    color: #2b7a78;
}

/* --- Voir plus --- */

.member-search-more-wrap {
    text-align: center;
    margin-top: 22px;
}

.member-search-more-btn {
    display: inline-block;
    padding: 9px 28px;
    border-radius: 20px;
    border: 1.5px solid #d0d8e4;
    font-size: 0.88rem;
    color: #4a5568;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.member-search-more-btn:hover {
    border-color: var(--turquoise);
    color: var(--teal, #4A6B5A);
    background: rgba(64, 224, 208, 0.06);
}

/* ── Mode nuit pcv2 ── */
body.community-theme-night .pcv2-name,
body.community-theme-night .pcv2-stat strong {
    color: #f2f8f7;
}

body.community-theme-night .pcv2-headline {
    color: #deecea;
}

body.community-theme-night .pcv2-bio,
body.community-theme-night .pcv2-location,
body.community-theme-night .pcv2-stat span,
body.community-theme-night .pcv2-lastseen {
    color: #a9bebd;
}

body.community-theme-night .pcv2-type-chip {
    background: rgba(32, 178, 170, 0.18);
    color: #7ae8e0;
}

body.community-theme-night .pcv2-stats,
body.community-theme-night .pcv2-stat + .pcv2-stat {
    border-color: rgba(101, 132, 136, 0.35);
}

/* Hero : bordure avatar en mode nuit */
body.community-theme-night .pcv2-hero + .pcv2-avatar-wrap .profile-avatar {
    border-color: #1a3035;
}

body.community-theme-night .pcv2-online-dot {
    border-color: rgba(21, 36, 39, 0.92);
}

/* ── Suggestion du jour — composer ──────────────────────────────── */

.post-composer-prompt-wrap {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: #f0faf7;
    border: 1px solid #c8e8e2;
    border-radius: 14px;
    padding: 9px 10px 9px 12px;
}

.post-composer-prompt-text {
    flex: 1;
    min-width: 0;
    padding: 5px 0;
    font-size: 0.86rem;
    color: #1a3a2f;
    font-style: italic;
    line-height: 1.35;
}

.post-composer-prompt-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.post-composer-prompt-change,
.post-composer-prompt-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 34px;
    padding: 5px 8px;
    flex-shrink: 0;
    background: none;
    border: 1px solid #b0d8d0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1;
}

.post-composer-prompt-change {
    color: #2f7060;
}

.post-composer-prompt-dismiss {
    color: #c0392b;
    border-color: #e8a89e;
}

.post-composer-prompt-change > span:first-child,
.post-composer-prompt-dismiss > span:first-child {
    font-size: 0.86rem;
}

.post-composer-prompt-change:hover {
    background: #d8f0ea;
    border-color: #3a8a7a;
    color: #1a4f42;
}

.post-composer-prompt-dismiss:hover {
    background: #fce4e0;
    border-color: #c0392b;
    color: #8b1a12;
}

body.community-theme-night .post-composer-name {
    color: #d8eee8;
}

body.community-theme-night .post-composer-prompt-wrap {
    background: rgba(27, 55, 50, 0.55);
    border-color: rgba(80, 160, 140, 0.3);
}

body.community-theme-night .post-composer-prompt-text {
    color: #c8eae4;
}

body.community-theme-night .post-composer-prompt-change {
    border-color: rgba(80, 160, 140, 0.4);
    color: #9fddd5;
}

body.community-theme-night .post-composer-prompt-dismiss {
    border-color: rgba(200, 80, 60, 0.4);
    color: #e88070;
}

body.community-theme-night .post-composer-photo-zone {
    border-color: rgba(104, 165, 157, 0.34);
    color: #9fddd5;
    background: rgba(28, 56, 54, 0.56);
}

body.community-theme-night .post-composer-photo-text,
body.community-theme-night .post-composer-photo-max {
    color: #9fddd5;
}

body.community-theme-night .post-composer-photo-icon,
body.community-theme-night .post-composer-photo-max {
    background: rgba(93, 181, 168, 0.12);
}

body.community-theme-night .post-composer-preview-item {
    border-color: rgba(101, 154, 150, 0.34);
    background: rgba(22, 43, 45, 0.88);
}

@media (max-width: 600px) {
    .post-composer-card {
        padding: 15px;
        border-radius: 19px;
    }

    .post-composer-header {
        gap: 9px;
    }

    .post-composer-avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px;
        max-width: 34px;
    }

    .post-composer-name {
        font-size: 0.88rem;
    }

    .post-composer-prompt-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .post-composer-prompt-text {
        font-size: 0.81rem;
    }

    .post-composer-prompt-change,
    .post-composer-prompt-dismiss {
        width: 34px;
        padding: 5px;
    }

    .post-composer-prompt-change > span:last-child,
    .post-composer-prompt-dismiss > span:last-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .post-composer-textarea {
        min-height: 76px;
        padding: 12px 13px;
        font-size: 0.92rem;
    }

    .post-composer-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(104px, 0.72fr);
        gap: 10px;
        align-items: stretch;
    }

    .post-composer-photo-zone {
        min-width: 0;
        min-height: 44px;
        padding: 7px 9px;
    }

    .post-composer-photo-text {
        min-width: 0;
        font-size: 0;
    }

    .post-composer-photo-text::after {
        content: "Photos";
        font-size: 0.86rem;
        font-weight: 800;
    }

    .post-composer-photo-max {
        flex: 0 0 auto;
    }

    .post-composer-submit {
        width: auto;
        min-width: 104px;
        min-height: 44px;
        margin-left: 0;
        padding: 9px 17px;
        border-radius: 13px;
    }
}

@media (max-width: 380px) {
    .post-composer-photo-text {
        max-width: 74px;
    }

    .post-composer-submit {
        min-width: 92px;
        padding-inline: 13px;
    }
}

/* ── Tag question dans les posts ─────────────────────────────────── */

.post-prompt-tag {
    display: inline-block;
    background: #f0faf7;
    border: 1px solid #c8e8e2;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.82rem;
    color: #2f7060;
    font-style: italic;
    margin-bottom: 8px;
}

body.community-theme-night .post-prompt-tag {
    background: rgba(27, 55, 50, 0.55);
    border-color: rgba(80, 160, 140, 0.3);
    color: #9fddd5;
}

/* Fenêtre de choix du motif de modération (avertissement au membre) */
.tn-modreason-overlay {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(20, 34, 32, 0.55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.tn-modreason-box {
    background: #fff; border-radius: 16px; padding: 20px; width: 100%; max-width: 480px;
    max-height: 86vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.tn-modreason-title { margin: 0 0 4px; font-size: 1.2rem; color: #23423c; }
.tn-modreason-sub { margin: 0 0 14px; font-size: 0.88rem; color: #6d7d88; }
.tn-modreason-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tn-modreason-opt {
    display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px;
    border: 1px solid #e3ebe9; border-radius: 10px; cursor: pointer; font-size: 0.9rem; color: #2a3b38;
}
.tn-modreason-opt:hover { background: #f0f7f5; }
.tn-modreason-opt input { margin-top: 3px; flex: 0 0 auto; }
.tn-modreason-customlab { display: block; font-weight: 700; font-size: 0.85rem; color: #3a4c48; margin: 4px 0 4px; }
.tn-modreason-custom {
    width: 100%; box-sizing: border-box; border: 1px solid #dce7e4; border-radius: 10px;
    padding: 9px 12px; font: inherit; resize: vertical; color: #23423c;
}
.tn-modreason-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.tn-modreason-cancel, .tn-modreason-ok {
    border: none; border-radius: 999px; padding: 9px 18px; font-weight: 700; cursor: pointer; font-size: 0.9rem;
}
.tn-modreason-cancel { background: #eef2f3; color: #3a4c48; }
.tn-modreason-ok { background: var(--orange, #1E3D6B); color: #fff; }
.tn-modreason-ok:hover { background: #9c4f31; }

.community-page {
    padding: 40px 5% 80px;
    min-height: calc(100vh - 88px);
    transition: background 0.35s ease, color 0.35s ease;
}

body.community-theme-day .community-page {
    background:
        radial-gradient(circle at 12% 14%, rgba(64, 224, 208, 0.20), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(255, 186, 120, 0.22), transparent 24%),
        radial-gradient(circle at 60% 72%, rgba(164, 230, 207, 0.22), transparent 28%),
        linear-gradient(180deg, #f6fbfb 0%, #e6f0ef 48%, #edf5f3 100%);
}

body.community-theme-night .community-page {
    background:
        radial-gradient(circle at 18% 18%, rgba(72, 195, 183, 0.18), transparent 26%),
        radial-gradient(circle at 78% 14%, rgba(95, 117, 255, 0.14), transparent 24%),
        radial-gradient(circle at 50% 78%, rgba(26, 68, 74, 0.34), transparent 30%),
        linear-gradient(180deg, #1d2f32 0%, #20383b 42%, #172629 100%);
}

body.community-theme-night .community-hero,
body.community-theme-night .community-card,
body.community-theme-night .member-tab,
body.site-theme-night .member-tab {
    background: rgba(21, 36, 39, 0.92);
    box-shadow: 0 18px 38px rgba(0,0,0,0.28);
}

body.community-theme-night .member-tab,
body.site-theme-night .member-tab {
    color: #d8e6e5;
}

body.community-theme-night .member-tab.is-active,
body.site-theme-night .member-tab.is-active {
    background: var(--orange, #1E3D6B);
    color: white;
}

body.community-theme-night .community-hero-copy h1,
body.community-theme-night .community-card h2,
body.community-theme-night .community-card h3,
body.community-theme-night .community-card h4,
body.community-theme-night .profile-card h2,
body.community-theme-night .post-content,
body.community-theme-night .message-bubble p,
body.community-theme-night .comment-item strong,
body.community-theme-night .conversation-link strong,
body.community-theme-night .member-proposal-item strong,
body.community-theme-night .member-list-item strong,
body.community-theme-night .profile-link {
    color: #f2f8f7;
}

body.community-theme-night .mention {
    color: var(--terracotta, #e2a184);
}

body.community-theme-night .mention-suggest {
    background: #16211f;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

body.community-theme-night .mention-suggest-item.is-active,
body.community-theme-night .mention-suggest-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.community-theme-night .mention-suggest-name {
    color: #e7efed;
}

body.community-theme-night .mention-suggest-tag {
    color: #7ed8cf;
    background: rgba(126, 216, 207, 0.14);
}

body.community-theme-night .community-hero-copy p,
body.community-theme-night .community-hero-stats,
body.community-theme-night .onboarding-head p,
body.community-theme-night .onboarding-score span,
body.community-theme-night .onboarding-step-copy small,
body.community-theme-night .section-heading p,
body.community-theme-night .member-proposal-item p,
body.community-theme-night .profile-bio,
body.community-theme-night .profile-tag,
body.community-theme-night .member-list-tag,
body.community-theme-night .member-list-item p,
body.community-theme-night .post-meta span,
body.community-theme-night .post-meta time,
body.community-theme-night .post-comments-count,
body.community-theme-night .comment-item span,
body.community-theme-night .comment-date,
body.community-theme-night .comment-like-btn,
body.community-theme-night .comment-like-static,
body.community-theme-night .empty-text,
body.community-theme-night .message-thread-header span,
body.community-theme-night .message-bubble time {
    color: #a9bebd;
}

body.community-theme-night .community-hero-stats span,
body.community-theme-night .stat-card,
body.community-theme-night .onboarding-score,
body.community-theme-night .onboarding-step-marker,
body.community-theme-night .member-proposal-item,
body.community-theme-night .message-bubble,
body.community-theme-night .conversation-list-item.is-active {
    background: rgba(33, 54, 58, 0.96);
}

body.community-theme-night .comment-item {
    border-top-color: rgba(255, 255, 255, 0.08);
}

body.community-theme-night .message-bubble {
    border-color: rgba(89, 133, 139, 0.22);
    background:
        radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, rgba(34, 63, 66, 0.98), rgba(24, 50, 54, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 28px rgba(0, 0, 0, 0.18);
}

body.community-theme-night .comment-avatar {
    background: rgba(94, 201, 182, 0.18);
    color: #dff5f1;
}

body.community-theme-night .comment-avatar span,
body.community-theme-night .comment-like-btn span {
    color: inherit;
}

body.community-theme-night .comment-like-btn,
body.community-theme-night .comment-like-static {
    background: rgba(255, 255, 255, 0.07);
    color: #c8dedd;
}

body.community-theme-night .comment-like-btn:hover,
body.community-theme-night .comment-like-btn.is-active {
    background: rgba(198, 90, 54, 0.92);
    color: #fff;
}

body.community-theme-night .message-bubble.is-mine {
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, rgba(190, 97, 78, 0.96), rgba(135, 75, 75, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 12px 28px rgba(30, 15, 12, 0.22);
}

body.community-theme-night .message-bubble.is-mine time {
    color: rgba(255, 238, 232, 0.68);
}

body.community-theme-night .mini-action-secondary,
body.community-theme-night .report-select,
body.community-theme-night .admin-input,
body.community-theme-night .admin-textarea {
    background: rgba(31, 49, 53, 0.96);
    color: #eef6f5;
    border-color: #35575a;
}

/* Champs de recherche membres EN FOCUS : garder le fond sombre en mode nuit.
   La règle jour « .member-search-row .member-search-name:focus { background:#fff } »
   a une spécificité qui gagnait sinon → champ blanc + texte clair invisible. */
body.community-theme-night .member-search-row .member-search-name:focus,
body.community-theme-night .member-search-row .member-search-location:focus {
    background: rgba(31, 49, 53, 0.96);
    color: #eef6f5;
    border-color: var(--turquoise);
}

body.community-theme-night .report-select option,
body.community-theme-night .admin-input option {
    background: #203437;
    color: #eef6f5;
}

body.community-theme-night .member-list-item,
body.community-theme-night .onboarding-step,
body.community-theme-night .member-proposal-item,
body.community-theme-night .member-proposal-photo-thumb,
body.community-theme-night .comments-block,
body.community-theme-night .message-request-list,
body.community-theme-night .message-thread-header {
    border-color: rgba(111, 145, 145, 0.18);
}

body.community-theme-night .profile-details-list .member-list-item {
    background: rgba(30, 51, 54, 0.78);
    border-color: rgba(111, 145, 145, 0.24);
}

body.community-theme-night .member-proposal-photo-thumb {
    background: rgba(33, 54, 58, 0.96);
}

body.community-theme-night .member-proposal-photo-thumb figcaption {
    color: #a9bebd;
}

body.community-theme-night .profile-meta,
body.community-theme-night .member-card-type {
    color: #7ed8cf;
}

body.community-theme-night .profile-headline,
body.community-theme-night .onboarding-step-copy strong,
body.community-theme-night .interest-tag {
    color: #eef6f5;
}

body.community-theme-night .onboarding-progress {
    background: rgba(111, 145, 145, 0.18);
}

body.community-theme-night .onboarding-next {
    background: rgba(83, 53, 38, 0.72);
    color: #f4d8c5;
}

body.community-theme-night .onboarding-step.is-done .onboarding-step-marker {
    background: rgba(64, 224, 208, 0.18);
    color: #94eee5;
}

body.community-theme-night .onboarding-step-status {
    color: #94eee5;
}

body.community-theme-night .profile-submeta {
    color: #a9bebd;
}

body.community-theme-night .interest-tag {
    background: rgba(33, 54, 58, 0.96);
}

body.community-theme-night .trust-badge {
    background: rgba(64, 224, 208, 0.16);
    color: #baf7f1;
}

body.community-theme-night .trust-badge-verified {
    background: rgba(92, 129, 207, 0.2);
    color: #c7dcff;
}

body.community-theme-night .profile-visibility-note {
    background: rgba(92, 72, 30, 0.34);
    color: #f2d792;
}

body.community-theme-night .album-card {
    background: rgba(21, 36, 39, 0.92);
    border-color: rgba(111, 145, 145, 0.18);
}

body.community-theme-night .album-cover,
body.community-theme-night .album-photo-thumb,
body.community-theme-night .album-photo-thumb figcaption {
    background: rgba(33, 54, 58, 0.96);
}

body.community-theme-night .album-meta,
body.community-theme-night .album-photo-thumb figcaption {
    color: #a9bebd;
}

body.community-theme-night .post-album-summary {
    background: rgba(21, 36, 39, 0.42);
    border-color: rgba(111, 145, 145, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.community-theme-night .post-album-summary-kicker {
    color: #7fc2bb;
}

body.community-theme-night .post-album-summary-chip {
    background: rgba(108, 194, 184, 0.14);
    color: #9dd8d2;
}

body.community-theme-night .post-album-summary-chip--count {
    background: rgba(228, 241, 240, 0.08);
    color: #d3e9e6;
}

body.community-theme-night .post-album-summary-text {
    color: #a7bfbd;
}

body.community-theme-night .post-album-cover-count {
    background: rgba(8, 18, 20, 0.52);
    color: #f4fbfb;
}

body.community-theme-night .post-album-pill {
    background: rgba(237, 247, 246, 0.96);
    color: #173f42;
}

body.community-theme-night .post-album-pill--ghost {
    background: rgba(18, 34, 37, 0.54);
    color: #edf8f7;
}

/* ── Mode nuit : cartes membres ── */

body.community-theme-night .member-card {
    background: rgba(21, 36, 39, 0.92);
    border-color: rgba(111, 145, 145, 0.18);
}

body.community-theme-night .member-card-link:hover .member-card {
    border-color: rgba(64, 224, 208, 0.45);
}

body.community-theme-night .member-card-name {
    color: #f2f8f7;
}

body.community-theme-night .member-card-location {
    color: #a9bebd;
}

body.community-theme-night .member-card-headline {
    color: #7fa8a5;
}

body.community-theme-night .member-card-online-dot {
    border-color: rgba(21, 36, 39, 0.92);
}

body.community-theme-night .member-card-self-badge {
    background: rgba(43, 122, 120, 0.25);
    border-color: rgba(43, 122, 120, 0.5);
    color: #7ae8e0;
}

body.community-theme-night .member-search-count {
    color: #7fa8a5;
}

body.community-theme-night .member-search-notice {
    background: rgba(83, 53, 38, 0.72);
    border-color: rgba(242, 166, 91, 0.34);
    color: #f2d792;
}

/* ── Mode nuit : pills de filtre ── */

body.community-theme-night .member-type-pills label {
    background: rgba(31, 49, 53, 0.96);
    border-color: #35575a;
    color: #c8dedd;
}

body.community-theme-night .member-type-pills label:hover {
    border-color: #7ae8e0;
    color: #7ae8e0;
}

body.community-theme-night .member-type-pills input[type="radio"]:checked + label {
    background: #2b7a78;
    color: #fff;
    border-color: #2b7a78;
}

body.community-theme-night .member-search-online-label {
    background: rgba(31, 49, 53, 0.96);
    border-color: #35575a;
    color: #c8dedd;
}

body.community-theme-night .member-search-radius-label {
    background: rgba(31, 49, 53, 0.96);
    border-color: #35575a;
    color: #c8dedd;
}

body.community-theme-night .member-search-radius-select {
    color: #eef6f5;
    background-image: linear-gradient(45deg, transparent 50%, #a9bebd 50%),
        linear-gradient(135deg, #a9bebd 50%, transparent 50%);
}

body.community-theme-night .member-search-radius-select option {
    background: #203437;
    color: #eef6f5;
}

body.community-theme-night .member-search-online-label:has(input:checked) {
    background: rgba(43, 122, 120, 0.28);
    border-color: #2b7a78;
    color: #7ae8e0;
}

body.community-theme-night .online-dot-indicator {
    background: #3d5a5d;
}

body.community-theme-night .member-search-online-label:has(input:checked) .online-dot-indicator {
    background: #22c55e;
}

body.community-theme-night .nearby-dot-indicator {
    border-color: #789194;
    box-shadow: inset 0 0 0 2px rgba(31, 49, 53, 0.96);
    background: #3d5a5d;
}

body.community-theme-night .member-search-nearby-label:has(input:checked) .nearby-dot-indicator {
    border-color: #7ae8e0;
    background: #7ae8e0;
}

body.community-theme-night .online-count-badge {
    background: #2b7a78;
    color: #fff;
}

body.community-theme-night .member-search-online-label:has(input:checked) .online-count-badge {
    background: rgba(255, 255, 255, 0.9);
    color: #2b7a78;
}

body.community-theme-night .member-card-lastseen {
    color: #4e6e6e;
}

body.community-theme-night .member-search-more-btn {
    background: rgba(31, 49, 53, 0.96);
    border-color: #35575a;
    color: #c8dedd;
}

body.community-theme-night .member-search-more-btn:hover {
    border-color: #7ae8e0;
    color: #7ae8e0;
    background: rgba(43, 122, 120, 0.18);
}

/* ── Salons (messages groupés) — mode nuit (spécifique ; le reste hérite de la messagerie) ── */
body.community-theme-night .salon-friend-results {
    background: #16211f;
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}
body.community-theme-night .salon-friend-option { background: transparent; }
body.community-theme-night .salon-friend-option:hover { background: rgba(255,255,255,0.06); }
body.community-theme-night .salon-friend-name { color: #e7efed; }
body.community-theme-night .salon-chip { background: rgba(126,216,207,0.14); color: #cfeee9; }
body.community-theme-night .message-bubble-sender { color: #7ed8cf; }

/* En-tête messagerie (liens Messagerie/Salons) — mode nuit */
body.community-theme-night .messages-heading-nav a { color: #7f9591; }
body.community-theme-night .messages-heading-nav a.is-active { color: #f2f8f7; }

/* Fenêtre motif de modération — mode nuit */
body.community-theme-night .tn-modreason-box { background: #16211f; box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
body.community-theme-night .tn-modreason-title { color: #eef5f3; }
body.community-theme-night .tn-modreason-sub { color: #9fb3ae; }
body.community-theme-night .tn-modreason-opt { border-color: rgba(255,255,255,0.12); color: #e7efed; }
body.community-theme-night .tn-modreason-opt:hover { background: rgba(255,255,255,0.06); }
body.community-theme-night .tn-modreason-customlab { color: #cfe0db; }
body.community-theme-night .tn-modreason-custom { background: #10201d; border-color: rgba(255,255,255,0.14); color: #eef5f3; }
body.community-theme-night .tn-modreason-cancel { background: rgba(255,255,255,0.1); color: #e7efed; }

/* Caché sur desktop — visible uniquement via le media query mobile */
.mobile-bottom-nav { display: none; }
.online-strip { display: none; }
.fab-container { display: none; }

@media (max-width: 1024px) {
    .hero {
        padding: 64px 5% 48px;
    }

    .hero-text h1 {
        font-size: 2.85rem;
    }

    .hero-paths {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-link-grid,
    .home-member-grid,
    .blog-grid,
    .seo-hub-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-community-section {
        grid-template-columns: 1fr;
    }

    .community-public-hero,
    .community-feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Tablettes portrait & grands téléphones (≤768 px) ── */
@media (max-width: 768px) {

    /* Fiche lieu : passer en colonne une étape plus tôt */
    .camping-showcase,
    .camping-layout {
        grid-template-columns: 1fr;
    }

    .camping-showcase-media {
        min-height: 280px;
        max-height: 320px;
        position: relative;
        top: auto;
    }

    .camping-showcase-copy {
        padding: 26px 22px;
    }

    .camping-similar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Layout communauté : passer en colonne sur tablettes étroites */
    .community-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .community-main,
    .community-sidebar {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .community-main {
        order: 1;
    }

    .community-sidebar {
        order: 2;
    }

}


@media (max-width: 720px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
    }

    .logo {
        width: 76px;
        height: 76px;
        padding: 0;
    }

    /* Pages hors accueil : logo plus compact pour libérer le haut de l'écran */
    body:not(.home-page) .logo {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    body:not(.home-page) .site-header {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .logo-image {
        width: 100%;
        height: 100%;
        max-width: none;
    }

    /* Annuaire mobile : supprimer hero et stats */
    .directory-page {
        padding-top: 16px;
    }

    .directory-hero,
    .directory-hero-stats {
        display: none;
    }

    .directory-grid {
        grid-template-columns: 1fr;
    }

    /* Carte : masquer tout le header, garder juste les boutons + carte */
    .directory-map-head {
        display: none;
    }

    /* Boutons filtre carte : scroll horizontal */
    .directory-map-tools {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .directory-map-tools::-webkit-scrollbar { display: none; }

    /* Filtres rapides : scroll horizontal (1 ligne propre) */
    .directory-theme-options {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
        gap: 8px;
    }

    .directory-theme-options::-webkit-scrollbar { display: none; }

    .directory-check,
    .directory-theme-pill {
        flex: 0 0 auto;
    }

    .directory-check span,
    .directory-theme-pill span {
        white-space: nowrap;
    }

    /* Carte : titre seul, compact */
    .directory-map-head {
        margin-bottom: 10px;
    }

    .directory-filters-card {
        padding: 18px;
    }

    .directory-filters {
        gap: 14px;
    }

    .directory-search-main,
    .directory-advanced-grid {
        grid-template-columns: 1fr;
    }

    .directory-submit-field {
        width: 100%;
    }

    .directory-submit-field .btn-search {
        width: 100%;
    }

    .directory-results-bar {
        align-items: flex-start;
    }

    .directory-map-head {
        flex-direction: column;
    }

    /* Carte pleine largeur sur mobile : retirer le cadre blanc */
    .directory-map-panel {
        background: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    .directory-map-tools {
        padding: 0 4% 10px;
    }

    .directory-map {
        height: 360px;
        min-height: 300px;
        border-radius: 0;
    }

    .directory-results-count {
        width: 100%;
    }

    .directory-reset-link-inline {
        margin-left: 0;
    }

    .directory-grid .card-head {
        flex-direction: column;
    }

    .camping-showcase,
    .camping-layout {
        grid-template-columns: 1fr;
    }

    .camping-showcase-media {
        min-height: 280px;
    }

    .camping-showcase-copy {
        padding: 26px 22px;
    }

    .camping-similar-grid {
        grid-template-columns: 1fr;
    }

    .camping-facts-grid,
    .camping-detail-grid {
        grid-template-columns: 1fr;
    }

    .camping-photo-grid {
        grid-template-columns: 1fr;
    }

    .camping-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .camping-action-bar-controls,
    .camping-rating-row {
        width: 100%;
        justify-content: flex-start;
    }

    .camping-action-bar-header {
        align-items: center;
    }

    .camping-rating-head {
        width: 100%;
        align-items: flex-start;
    }

    .camping-rating-row {
        flex-direction: column;
        align-items: stretch;
    }

    .camping-rating-panel-compact {
        flex-basis: 100%;
    }

    .camping-review-head {
        flex-direction: column;
    }

    .camping-review-side {
        text-align: left;
    }

    .hero {
        padding: 40px 5% 34px;
        min-height: auto;
        border-radius: 0 0 24px 24px;
    }

    .hero::before {
        background: linear-gradient(180deg, rgba(7, 22, 27, 0.84) 0%, rgba(11, 38, 45, 0.72) 58%, rgba(13, 45, 53, 0.64) 100%);
    }

    .hero-media img {
        object-position: center top;
    }

    body.home-page .site-header {
        padding-top: 14px;
    }

    body.home-page .site-nav {
        width: auto;
        padding: 10px 12px;
        border-radius: 20px;
    }

    body.home-page .hero {
        padding-top: 130px;
    }

    .hero-text h1 {
        font-size: 2.05rem;
        line-height: 1.08;
        margin-bottom: 18px;
    }

    .hero-kicker {
        margin-bottom: 14px;
    }

    .hero-subtitle {
        margin-bottom: 18px;
    }

    .search-container {
        padding: 10px;
    }

    .search-container input {
        min-width: 0;
        width: 100%;
    }

    .search-container .btn-search {
        width: 100%;
        min-height: 48px;
    }

    .hero-benefits {
        margin-bottom: 18px;
    }

    .hero-emoji {
        font-size: 96px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 16px;
    }

    .hero-actions .btn-search.btn-link {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 15px 18px;
        font-size: 1rem;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
    }

    .hero-actions .hero-secondary-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-secondary-link-ghost {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .hero-reassurance {
        width: 100%;
        text-align: center;
        font-size: 0.95rem;
    }

    .hero-paths {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 18px;
    }

    .hero-path-card {
        padding: 14px 16px;
    }

    .home-community-section {
        width: calc(100% - 28px);
        max-width: 640px;
        margin-top: -18px;
        padding: 22px;
        border-radius: 18px;
    }

    .home-community-copy h2 {
        font-size: 1.55rem;
    }

    .home-community-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .home-community-actions .btn-search,
    .home-community-actions .home-section-link {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .home-community-grid {
        grid-template-columns: 1fr;
    }

    .home-community-item {
        min-height: auto;
    }

    .community-public-main {
        width: calc(100% - 28px);
        padding-top: 24px;
    }

    .community-public-hero,
    .community-public-cta {
        padding: 24px;
        border-radius: 20px;
    }

    .community-public-hero h1 {
        font-size: 2.25rem;
    }

    .community-public-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .community-public-actions .btn-search,
    .community-public-actions .home-section-link,
    .community-public-cta .btn-search {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .community-public-side {
        min-height: auto;
    }

    .hero-community-card {
        margin-top: 18px;
        padding: 18px 18px 16px;
        border-radius: 20px;
    }

    .hero-community-card h2 {
        font-size: 1.35rem;
        margin: 12px 0 8px;
    }

    .hero-community-card p {
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .hero-community-points {
        gap: 8px;
        margin-top: 14px;
    }

    .hero-community-points span {
        width: 100%;
        justify-content: center;
        padding: 11px 12px;
    }

    .hero-community-cta {
        padding: 14px;
    }

    .hero-signup-grid {
        grid-template-columns: 1fr;
    }

    .home-section-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-link-grid {
        grid-template-columns: 1fr;
    }

    .home-member-grid {
        grid-template-columns: 1fr;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .seo-hub-facts,
    .seo-hub-choice-grid,
    .seo-hub-faq-list {
        grid-template-columns: 1fr;
    }

    .blog-hero,
    .article-card {
        padding: 0;
    }

    .blog-hero h1,
    .article-header h1 {
        font-size: 2.2rem;
    }

    .blog-hero {
        padding: 26px 22px;
    }

    .article-hero-visual,
    .article-hero-illustration {
        min-height: 260px;
    }

    .article-header-copy {
        margin: -34px 18px 0;
        padding: 22px 20px 22px;
        border-radius: 24px 24px 0 0;
    }

    .article-content {
        padding: 24px 22px 0;
    }

    .article-footer {
        padding: 18px 22px 26px;
    }

    .search-container {
        flex-direction: column;
    }

    .site-nav {
        width: 100%;
        justify-content: flex-start;
    }

    .nav-welcome {
        margin-left: 0;
    }

    .card-actions {
        flex-direction: column;
    }

    .card-action-group {
        justify-content: center;
    }

    .admin-panel {
        padding: 24px;
    }

    .manual-grid {
        grid-template-columns: 1fr;
    }

    .admin-relation-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .member-hero {
        padding: 28px 24px;
    }

    .community-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .community-main,
    .community-sidebar {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .community-main {
        order: 1;
    }

    .community-sidebar {
        order: 2;
    }

    .community-card,
    .community-hero {
        padding: 24px;
    }

    .onboarding-score {
        width: 100%;
        box-sizing: border-box;
    }

    .onboarding-step {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start;
    }

    .onboarding-step-link,
    .onboarding-step-status {
        grid-column: 2;
        justify-self: flex-start;
    }

    .post-header,
    .member-list-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .community-hero {
        align-items: flex-start;
    }

    .community-hero-actions {
        width: 100%;
    }

    .community-hero-actions .btn-search,
    .community-hero-actions .mini-action {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .community-hero-stats {
        justify-content: flex-start;
    }

    .member-tabs {
        position: sticky;
        top: 0;
        z-index: 90;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 -4% 14px;
        padding: 8px 4%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        background: rgba(248, 251, 250, 0.92);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(42, 76, 78, 0.08);
    }

    .member-tabs::-webkit-scrollbar {
        display: none;
    }

    .member-tab {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 9px 13px;
        border-radius: 999px;
        border: 1px solid rgba(42, 76, 78, 0.1);
        background: rgba(255, 255, 255, 0.82);
        box-shadow: none;
        color: #52636a;
        font-size: 0.82rem;
        line-height: 1;
        white-space: nowrap;
    }

    .member-tab.is-active {
        border-color: transparent;
        box-shadow: 0 8px 20px rgba(213, 91, 53, 0.18);
    }

    .post-album-cover-wrap {
        min-height: 234px;
        border-radius: 18px;
    }

    .post-album-cover-head,
    .post-album-cover-body {
        left: 14px;
        right: 14px;
    }

    .post-album-cover-head {
        top: 14px;
    }

    .post-album-cover-body {
        bottom: 14px;
        align-items: stretch;
        flex-direction: column;
    }

    .post-album-cover-copy {
        max-width: 100%;
    }

    .post-album-cover-title {
        font-size: 1.2rem;
    }

    .post-album-cover-sub {
        font-size: 0.82rem;
    }

    .post-album-cta {
        width: fit-content;
        min-height: 42px;
        padding: 0 16px;
        font-size: 0.84rem;
    }

    .post-album-cover-count {
        right: 14px;
        bottom: 14px;
        min-height: 30px;
        padding: 5px 10px;
        font-size: 0.74rem;
    }

    .post-album-summary {
        padding: 12px 14px;
        border-radius: 18px;
    }

    .post-album-summary-meta {
        gap: 7px;
    }

    .post-album-summary-text {
        margin-top: 9px;
        font-size: 0.84rem;
    }

    /* ── Onglets haut : masquer les doublons présents dans la bottom nav ── */
    .member-tabs a[href*="tab=messages"],
    .member-tabs a[href*="tab=notifications"],
    .member-tabs a[href*="tab=profile"] {
        display: none;
    }

    /* ── Hero profil : ajuster le margin au padding mobile (16px) ── */
    .pcv2-hero {
        margin: 0 -16px;
        height: 90px;
    }

    /* Forcer padding-top:0 même après l'override .community-card de ce fichier */
    .community-card.profile-card {
        padding-top: 0;
    }

    /* ── Touch targets : agrandir les boutons icônes pour mobile ── */
    .icon-action {
        width: 40px;
        height: 40px;
    }

    /* ── Member list : garder la ligne sur mobile (avatar + texte + icônes) ── */
    .member-list-item {
        flex-direction: row;
        align-items: center;
    }

    /* ── Barre de navigation mobile fixée en bas ── */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #e8eff0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        z-index: 500;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        min-height: calc(58px + env(safe-area-inset-bottom, 0px));
        backdrop-filter: blur(14px);
    }

    .mobile-bottom-nav::-webkit-scrollbar { display: none; }

    /* Fil et Membres figurent deja dans la barre du bas ci-dessus -> les retirer
       de la slide bar du haut sur mobile pour eviter le doublon. */
    .member-tab-desktop-only {
        display: none;
    }

    /* Pages en "app shell" (espace membre + profil) : la navigation est assuree par
       la slide bar / la barre du bas. Le header marketing (logo + hamburger) fait
       doublon -> masque sur mobile. Classe posee explicitement sur ces pages. */
    body.member-app-shell .site-header {
        display: none;
    }

    .mbn-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 7px 2px 9px;
        text-decoration: none;
        color: #9aa5b4;
        position: relative;
        transition: color 0.15s;
    }

    .mbn-item.is-active { color: var(--orange, var(--orange, #1E3D6B)); }

    .mbn-icon  { width: 22px; height: 22px; flex-shrink: 0; }

    .mbn-label {
        font-size: 0.6rem;
        font-weight: 700;
        white-space: nowrap;
        letter-spacing: 0.01em;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .mbn-badge {
        position: absolute;
        top: 4px;
        left: 50%;
        transform: translateX(4px);
        background: #e74c3c;
        color: #fff;
        border-radius: 999px;
        min-width: 16px;
        height: 16px;
        font-size: 0.6rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid #fff;
    }

    /* Page communauté : padding réduit sur mobile */
    .community-page {
        padding-top: 0; /* barre d'onglets collée en haut sur tous les onglets (fil, profil, groupes…) */
        padding-left: 4%;
        padding-right: 4%;
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    /* Cards : padding et gap réduits */
    .community-card,
    .community-hero {
        padding: 16px;
        border-radius: 18px;
        box-shadow: 0 10px 28px rgba(0,0,0,0.07);
    }

    .community-main,
    .community-sidebar,
    .community-feed {
        gap: 12px;
    }

    .post-card {
        gap: 14px;
    }

    .section-heading {
        margin-bottom: 12px;
    }

    .section-heading h2,
    .section-heading h3 {
        font-size: 1.18rem;
        line-height: 1.18;
        margin-bottom: 5px;
    }

    .section-heading p {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .post-composer {
        gap: 8px;
    }

    .post-composer-header {
        margin-bottom: 0;
    }

    .post-composer-textarea {
        min-height: 78px;
        border-radius: 14px;
        font-size: 0.98rem;
    }

    .post-composer-prompt-wrap {
        padding: 8px 10px;
        border-radius: 12px;
        gap: 8px;
    }

    .post-composer-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(104px, 0.72fr);
        gap: 10px;
        align-items: stretch;
    }

    .post-composer-photo-zone {
        min-width: 0;
        padding: 11px 12px;
        border-radius: 12px;
    }

    .post-composer-photo-icon {
        font-size: 1.25rem;
    }

    .post-composer-photo-text {
        min-width: 0;
        font-size: 0;
    }

    .post-composer-photo-text::after {
        content: "Photos";
        font-size: 0.86rem;
        font-weight: 800;
    }

    .post-composer-photo-max {
        flex: 0 0 auto;
    }

    .post-composer-submit {
        width: auto;
        min-width: 104px;
        min-height: 44px;
        margin-left: 0;
        border-radius: 13px;
    }

    .post-header {
        align-items: flex-start;
        gap: 10px;
    }

    .post-avatar {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 0.92rem;
    }

    .post-online-dot {
        width: 10px;
        height: 10px;
        bottom: 1px;
        right: 1px;
    }

    .post-meta {
        min-width: 0;
        gap: 2px;
    }

    .post-meta strong,
    .post-meta .profile-link {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .post-meta span,
    .post-meta time {
        font-size: 0.82rem;
        line-height: 1.25;
    }

    .post-content {
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .post-joined-banner {
        gap: 10px;
        padding: 12px;
        border-radius: 14px;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    /* Bouton "Voir l'événement / la fiche" : pleine largeur sous le texte */
    .post-joined-banner > .mini-action {
        width: 100%;
        order: 10;
        text-align: center;
        box-sizing: border-box;
    }

    .post-avatar-new-wrap {
        padding: 4px 0 0;
    }

    .post-avatar-new {
        width: min(68vw, 220px);
        height: min(68vw, 220px);
        min-width: 0;
        min-height: 0;
        border-width: 3px;
    }

    .post-image-wrapper {
        border-radius: 14px;
    }

    .post-image-grid .post-image {
        height: 150px;
        max-height: 150px;
    }

    .post-engagement {
        gap: 8px 10px;
    }

    .post-delete-btn {
        margin-left: 0;
    }

    .comments-block {
        padding-top: 14px;
    }

    .comments-block h4 {
        margin-bottom: 10px;
        font-size: 1rem;
    }

    .comment-list {
        gap: 8px;
        margin-bottom: 12px;
    }

    .comment-item {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .comment-avatar {
        width: 34px;
        height: 34px;
    }

    .comment-actions {
        gap: 8px;
    }

    .comment-form > button[type="submit"] {
        width: 100%;
        min-height: 42px;
        justify-content: center;
    }

    /* Hero : masqué sur mobile (info redondante) */
    .community-hero {
        display: none;
    }

    /* Page profil : sidebar (infos membre) avant les posts */
    .community-layout--profile .community-sidebar {
        order: 1;
    }
    .community-layout--profile .community-main {
        order: 2;
    }

    /* Sidebar fil : masquer la fiche perso (redondante sur le feed, mais PAS sur /profil) */
    .community-layout:not(.community-layout--profile) .community-sidebar .profile-card,
    .community-sidebar .sidebar-feed-link {
        display: none;
    }

    .community-sidebar .member-list .member-list-item:nth-child(n+4) {
        display: none;
    }

    /* Recherche membres compacte : tout sur une ligne, bouton loupe seul,
       filtres sur une rangée qui défile, sous-titre masqué (gain de hauteur). */
    .member-directory-card .section-heading p {
        display: none;
    }

    .member-directory-card .section-heading h2 {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }

    .member-search-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        margin-bottom: 10px;
    }

    .member-search-row .member-search-name,
    .member-search-row .member-search-location {
        padding: 11px 13px;
        font-size: 0.9rem;
    }

    .member-search-row .member-search-name {
        grid-column: 1;
        grid-row: 1;
    }

    .member-search-row .member-search-location {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .member-search-radius-label {
        min-height: 44px;
    }

    .member-search-form .member-search-btn {
        grid-column: 2;
        grid-row: 1;
        width: 46px;
        min-width: 46px;
        height: 46px;
        padding: 0;
    }

    .member-search-btn-label {
        display: none;
    }

    .member-search-filters {
        flex-wrap: wrap;
        overflow: visible;
        gap: 8px;
        padding-bottom: 0;
    }

    .member-search-geo-filters,
    .member-search-type-filters {
        margin-bottom: 8px;
    }

    .member-search-filters::-webkit-scrollbar {
        display: none;
    }

    .member-type-pills {
        flex-wrap: wrap;
        gap: 7px;
    }

    .member-type-pills label,
    .member-search-online-label {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .member-search-geo-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .member-search-geo-filters > * {
        justify-content: center;
        min-width: 0;
    }

    .member-search-radius-label {
        justify-content: space-between;
    }

    .member-search-type-filters {
        display: block;
    }

    .member-type-pills {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .member-type-pills label {
        text-align: center;
        padding: 8px 6px;
        border-radius: 10px;
    }

    /* Grille membres : 2 colonnes fixes */
    .member-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-card {
        padding: 12px;
        border-radius: 16px;
        gap: 10px;
    }

    .friend-request-panel-head {
        align-items: center;
    }

    .friend-request-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .friend-request-actions {
        justify-content: stretch;
    }

    .friend-request-actions .mini-action,
    .friend-request-actions .friend-request-view {
        flex: 1 1 calc(33.333% - 6px);
        min-width: 0;
    }

    .member-card-avatar {
        width: 84px;
        height: 84px;
        min-width: 84px;
    }

    /* Messagerie : actions secondaires scrollables, Envoyer en pleine largeur dessous */
    .message-compose-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .message-compose-actions .btn-search {
        width: 100%;
        order: 10;
    }

    .message-compose-actions #msg-media-name {
        display: none;
    }

    .community-card.messages-inbox-card {
        border-radius: 24px;
        padding: 22px 16px 24px;
        overflow: hidden;
    }

    .conv-list-header {
        align-items: flex-start;
        margin-bottom: 14px;
    }

    .conv-list-header h3 {
        font-size: 1.6rem;
        line-height: 1.02;
    }

    .conv-list-heading p {
        font-size: 0.95rem;
    }

    .conv-list-count {
        min-height: 30px;
        padding: 5px 10px;
        font-size: 0.76rem;
    }

    .conv-search-wrap {
        margin-bottom: 14px;
        padding: 12px;
        border-radius: 18px;
    }

    .conv-search-input {
        min-height: 46px;
        font-size: 0.94rem;
    }

    .conversation-list {
        gap: 10px;
    }

    .conv-item + .conv-item::before {
        display: none;
    }

    .conv-item {
        padding: 13px 12px 13px 10px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.04);
    }

    .conv-item-avatar {
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }

    .conv-item-body {
        gap: 5px;
    }

    .conv-item-name {
        font-size: 1.02rem;
    }

    .conv-item-type {
        font-size: 0.72rem;
    }

    .conv-item-time {
        min-height: 22px;
        padding: 0 8px;
        font-size: 0.72rem;
    }

    .conv-item-preview {
        font-size: 0.9rem;
    }

    .conv-item-state {
        min-height: 21px;
        padding: 0 7px;
        font-size: 0.68rem;
    }

    .conv-item-row {
        border-radius: 18px;
    }

    .conv-item-actions {
        display: flex;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .conv-item-row.is-swiped .conv-item-actions {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .conv-item-archive,
    .conv-item-mute,
    .conv-item-delete {
        width: 86px;
        min-width: 0;
        border-radius: 18px;
    }

    .conv-archive-toast {
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        width: min(92vw, 340px);
    }

    body.community-page-messages .fab-container {
        right: 14px;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    body.community-page-messages .fab-btn {
        width: 48px;
        height: 48px;
        box-shadow: 0 10px 24px rgba(201, 79, 41, 0.28);
    }

    body.community-theme-night .member-tabs,
    body.site-theme-night .member-tabs {
        background: rgba(18, 35, 38, 0.92);
        border-bottom-color: rgba(117, 221, 199, 0.12);
    }

    body.community-theme-night .member-tab,
    body.site-theme-night .member-tab {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(255, 255, 255, 0.08);
        color: #c8d8d5;
    }

    body.community-theme-night .member-tab.is-active,
    body.site-theme-night .member-tab.is-active {
        color: #fff;
    }

    body.community-theme-night .mobile-bottom-nav,
    body.site-theme-night .mobile-bottom-nav {
        background: rgba(20, 36, 39, 0.96);
        border-top-color: rgba(117, 221, 199, 0.12);
    }

    /* ── Strip "En ligne" style Stories ── */
    .online-strip {
        display: block;
        margin: 0 -4% 12px;
        padding: 10px 4% 12px;
        border-bottom: 1px solid rgba(42, 76, 78, 0.07);
        background: rgba(248, 251, 250, 0.6);
    }

    .online-strip--collapsible {
        padding-top: 8px;
    }

    .online-strip-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 42px;
        max-width: 100%;
        padding: 8px 12px 8px 14px;
        border: 1px solid rgba(42, 122, 110, 0.2);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: #234541;
        font: inherit;
        font-size: 0.95rem;
        font-weight: 850;
        line-height: 1;
        box-shadow: 0 8px 22px rgba(22, 48, 52, 0.08);
        appearance: none;
        -webkit-appearance: none;
    }

    .online-strip-toggle span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .online-strip-toggle i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #27ae60;
        box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.12);
        flex: 0 0 auto;
    }

    .online-strip-toggle strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 26px;
        padding: 0 8px;
        border-radius: 999px;
        background: #e8f5f3;
        color: #4A6B5A;
        font-size: 0.82rem;
        font-weight: 900;
    }

    .online-strip-toggle svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        transition: transform 0.18s ease;
    }

    .online-strip--collapsible:not(.is-collapsed) .online-strip-toggle svg {
        transform: rotate(180deg);
    }

    .online-strip--collapsible.is-collapsed .online-strip-scroll {
        display: none;
    }

    .online-strip-scroll {
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .online-strip-scroll::-webkit-scrollbar { display: none; }

    .online-strip-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        text-decoration: none;
        color: inherit;
        flex-shrink: 0;
    }

    .online-strip-avatar-wrap {
        position: relative;
        width: 52px;
        height: 52px;
    }

    .online-strip-avatar,
    .online-strip-initials {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        object-fit: cover;
        border: 2.5px solid #2a9d8f;
        display: block;
    }

    .online-strip-avatar {
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    .online-strip-initials {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #3a8c7e;
        color: #fff;
        font-size: 1.05rem;
        font-weight: 700;
    }

    .online-strip-dot {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 11px;
        height: 11px;
        background: #27ae60;
        border-radius: 50%;
        border: 2px solid #fff;
    }

    .online-strip-name {
        font-size: 0.7rem;
        font-weight: 600;
        color: #52636a;
        max-width: 52px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1;
    }

    /* Mode nuit */
    body.community-theme-night .online-strip {
        background: rgba(15, 28, 31, 0.6);
        border-bottom-color: rgba(117, 221, 199, 0.08);
    }

    body.community-theme-night .online-strip-toggle {
        border-color: rgba(117, 221, 199, 0.18);
        background: rgba(21, 39, 42, 0.92);
        color: #dff6f2;
    }

    body.community-theme-night .online-strip-toggle strong {
        background: rgba(117, 221, 199, 0.14);
        color: #9fe4da;
    }

    body.community-theme-night .online-strip-dot {
        border-color: #0f1c1f;
    }

    body.community-theme-night .online-strip-name {
        color: #9bbab6;
    }

    /* ── FAB speed dial ── */
    .fab-container {
        display: block;
        position: fixed;
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
        right: 18px;
        z-index: 490;
    }

    .fab-btn {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--orange, var(--orange, #1E3D6B));
        color: #fff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 4px 18px rgba(201, 79, 41, 0.42);
        transition: transform 0.22s ease, box-shadow 0.22s ease;
        position: relative;
        z-index: 2;
    }

    .fab-icon-plus {
        transition: transform 0.22s ease;
    }

    .fab-open .fab-icon-plus {
        transform: rotate(45deg);
    }

    .fab-open .fab-btn {
        box-shadow: 0 6px 24px rgba(201, 79, 41, 0.55);
    }

    /* Backdrop semi-transparent */
    .fab-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.28);
        z-index: 1;
        backdrop-filter: blur(2px);
    }

    .fab-open .fab-backdrop {
        display: block;
    }

    /* Actions speed dial */
    .fab-actions {
        position: absolute;
        bottom: calc(100% + 10px);
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        pointer-events: none;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 2;
    }

    .fab-open .fab-actions {
        pointer-events: auto;
        opacity: 1;
        transform: translateY(0);
    }

    .fab-action {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: inherit;
    }

    .fab-action-label {
        background: #fff;
        color: #1a2e32;
        font-size: 0.88rem;
        font-weight: 600;
        padding: 7px 14px;
        border-radius: 999px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.14);
        white-space: nowrap;
    }

    .fab-action-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #fff;
        color: #4A6B5A;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 12px rgba(0,0,0,0.16);
        flex-shrink: 0;
    }

    .fab-action-icon--primary {
        background: var(--orange, var(--orange, #1E3D6B));
        color: #fff;
    }

    /* Mode nuit */
    body.community-theme-night .fab-action-label {
        background: #1a3035;
        color: #e0f0ec;
        box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }

    body.community-theme-night .fab-action-icon {
        background: #1e3a3f;
        color: #75ddc7;
        box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }

    /* Onglet annonces : garder le FAB discret et hors du bloc filtres */
    body.community-page-annonces .classifieds-list-card {
        padding-bottom: 88px;
    }

    body.community-page-annonces .fab-container {
        right: 14px;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    body.community-page-annonces .fab-btn {
        width: 48px;
        height: 48px;
        box-shadow: 0 10px 24px rgba(201, 79, 41, 0.28);
    }

    body.community-page-annonces .fab-actions {
        bottom: calc(100% + 8px);
        gap: 8px;
    }
}

@media (max-width: 460px) {
    /* Annuaire membres : liste en lignes horizontales, blanc premium
       (plus léger et plus « app » que les grosses cartes verticales). */
    .member-cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .member-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 14px;
        padding: 12px 34px 12px 14px;
        background: #fff;
        border: none;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(20, 40, 40, 0.05), 0 6px 16px rgba(20, 40, 40, 0.04);
    }

    /* Chevron d'accès au profil */
    .member-card::after {
        content: "";
        position: absolute;
        right: 15px;
        top: 50%;
        width: 7px;
        height: 7px;
        border-right: 2px solid #cbd5d8;
        border-bottom: 2px solid #cbd5d8;
        transform: translateY(-60%) rotate(-45deg);
    }

    .member-card-avatar-wrap {
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.16));
    }

    .member-card-avatar {
        width: 120px;
        height: 120px;
        min-width: 120px;
    }

    .member-card-avatar-initials {
        font-size: 2.1rem;
    }

    .member-card-online-dot {
        width: 18px;
        height: 18px;
        border: 3px solid #fff;
        bottom: 9%;
        right: 9%;
    }

    .member-card-body {
        align-items: flex-start;
        text-align: left;
        gap: 1px;
        flex: 1;
        min-width: 0;
    }

    .member-card-name {
        text-align: left;
        font-size: 0.98rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .member-card-type {
        text-align: left;
        text-transform: none;
        letter-spacing: 0;
        color: #33a79c;
        font-weight: 600;
        font-size: 0.83rem;
    }

    .member-card-location {
        text-align: left;
        color: #7a8794;
        font-size: 0.82rem;
    }

    .member-card-headline {
        font-style: normal;
        color: #94a0ad;
        font-size: 0.8rem;
        margin-top: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .member-card-link:hover .member-card,
    .member-card-link:active .member-card {
        transform: none;
        box-shadow: 0 2px 6px rgba(20, 40, 40, 0.08), 0 10px 24px rgba(20, 40, 40, 0.07);
    }

    .post-image-grid .post-image {
        height: 132px;
        max-height: 132px;
    }
}

/* ── Hamburger flottant fixe (≤ 680px) ─────────────────────────────── */
@media (max-width: 680px) {

    /* Supprimer le stacking context du header sur mobile.
       Note : backdrop-filter sur .site-header (mode nuit) créait un containing-block
       pour position:fixed → le bouton était fixe par rapport au header, pas au viewport.
       Fix JS dans site-render-functions.php : appendChild(navToggle, body) sur mobile. */
    .site-header {
        z-index: auto;
    }

    /* Bouton fixe en haut à droite — dans le root stacking context */
    .nav-toggle {
        position: fixed;
        top: 62px;
        right: 14px;
        z-index: 9999;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 50%;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14);
        border: 1px solid rgba(0, 0, 0, 0.06);
        /* width/height 44px hérités de base.css */
    }

    /* Menu fixe depuis le haut de l'écran */
    .site-nav,
    body.home-page .site-nav {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9998;
        border-radius: 0 0 22px 22px;
        padding: 62px 0 14px;
        box-shadow: 0 8px 32px rgba(20, 50, 55, 0.2);
    }

    /* Espace à droite dans la barre d'onglets pour ne pas
       que le hamburger cache le dernier onglet */
    .member-tabs {
        padding-right: 58px;
    }

    /* Mode nuit */
    body.site-theme-night .nav-toggle {
        background: rgba(18, 35, 38, 0.94);
        border-color: rgba(117, 221, 199, 0.15);
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    }

    body.site-theme-night .site-nav,
    body.site-theme-night.home-page .site-nav {
        background: #101d21;
    }
}