/* ── CSS Variables : light / dark ── */
:root {
    --cd-bg:        #0e1018;
    --cd-surface:   #161b27;
    --cd-surface2:  rgba(255,255,255,.05);
    --cd-border:    rgba(255,255,255,.08);
    --cd-text:      #f0f4ff;
    --cd-text2:     rgba(255,255,255,.6);
    --cd-text3:     rgba(255,255,255,.35);
    --cd-text4:     rgba(255,255,255,.25);
    --cd-purple:    #6c5ce7;
    --cd-purple2:   #a29bfe;
    --cd-input-bg:  rgba(255,255,255,.06);
    --cd-input-bd:  rgba(255,255,255,.1);
    --cd-hero-grad: linear-gradient(135deg,#1a1f30,#0e1018);
    --cd-overlay:   linear-gradient(to bottom,rgba(0,0,0,.1) 0%,rgba(0,0,0,.65) 100%);
    --cd-popup-bg:  #1a1f2e;
    --cd-dropdown:  #1e2235;
    --cd-toast-bg:  #1e2235;
    --cd-toast-bd:  rgba(255,255,255,.12);
    --cd-shadow:    0 8px 32px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: light) {
    :root {
        --cd-bg:        #f2f3f7;
        --cd-surface:   #ffffff;
        --cd-surface2:  rgba(0,0,0,.03);
        --cd-border:    rgba(0,0,0,.09);
        --cd-text:      #0f1117;
        --cd-text2:     #444;
        --cd-text3:     #888;
        --cd-text4:     #aaa;
        --cd-input-bg:  rgba(0,0,0,.04);
        --cd-input-bd:  rgba(0,0,0,.12);
        --cd-hero-grad: linear-gradient(135deg,#c9d2e8,#e4e8f5);
        --cd-overlay:   linear-gradient(to bottom,rgba(0,0,0,.05) 0%,rgba(0,0,0,.45) 100%);
        --cd-popup-bg:  #ffffff;
        --cd-dropdown:  #ffffff;
        --cd-toast-bg:  #1e2235;
        --cd-toast-bd:  rgba(255,255,255,.12);
        --cd-shadow:    0 8px 32px rgba(0,0,0,.15);
    }
}

/* ── Reset & base ── */
.cd-wrap { max-width:100%; background: var(--cd-bg); min-height:100vh; }

/* ── Hero cover ── */
.cd-hero {
    position: relative;
    height: 260px;
    background: var(--cd-hero-grad);
    overflow: hidden;
}
.cd-hero-img {
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    display:block;
}
.cd-hero-overlay {
    position:absolute; inset:0;
    background: var(--cd-overlay);
}
.cd-hero-placeholder {
    width:100%; height:100%;
    background: var(--cd-hero-grad);
    display:flex; align-items:center; justify-content:center;
    font-size:4rem; opacity:.3;
}

/* ── Identity bar ── */
.cd-identity {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 0 20px 16px;
    margin-top: -36px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
    background: var(--cd-bg);
}
.cd-icon {
    width: 72px; height: 72px;
    border-radius: 18px;
    border: 3px solid var(--cd-bg);
    background: linear-gradient(135deg,var(--cd-purple),var(--cd-purple2));
    flex-shrink: 0;
    overflow: hidden;
    display: flex; align-items:center; justify-content:center;
    font-size: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.cd-icon img { width:100%; height:100%; object-fit:cover; }
.cd-identity-body { flex:1; min-width:0; padding-bottom:4px; }
.cd-identity-body h1 {
    margin:0; font-size:1.35rem; font-weight:700;
    color: var(--cd-text); letter-spacing:-.3px; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media(max-width:600px){
    .cd-identity-body h1 {
        white-space:normal; overflow:visible; text-overflow:unset;
        font-size:1.2rem; word-break:break-word;
    }
}
.cd-stats { display:flex; gap:16px; margin-top:4px; flex-wrap:wrap; }
.cd-stat { font-size:.78rem; color: var(--cd-text3); display:flex; align-items:center; gap:4px; }
.cd-stat strong { color: var(--cd-text2); font-weight:600; }
.cd-join-wrap { padding-bottom:6px; flex-shrink:0; }
.cd-btn-join {
    display:inline-flex; align-items:center; gap:6px;
    padding: 9px 22px;
    background: linear-gradient(135deg,var(--cd-purple),var(--cd-purple2));
    color:#fff; border:none; border-radius:12px;
    font-size:.88rem; font-weight:600; cursor:pointer;
    transition: opacity .2s, transform .1s;
    text-decoration:none; white-space:nowrap;
}
.cd-btn-join:hover { opacity:.9; transform:translateY(-1px); color:#fff; }
.cd-btn-join.joined {
    background: var(--cd-surface2);
    border: 1px solid var(--cd-border);
    color: var(--cd-text2);
}
.cd-btn-join.joined:hover { background:rgba(220,53,69,.1); color:#e84545; border-color:rgba(220,53,69,.25); }

/* ── Description strip ── */
.cd-desc-strip {
    padding: 0 20px 18px;
    font-size: .85rem; color: var(--cd-text2);
    line-height: 1.5;
    background: var(--cd-bg);
}
.cd-region-badge {
    display:inline-flex; align-items:center; gap:5px;
    background: var(--cd-surface2); border:1px solid var(--cd-border);
    border-radius:20px; padding:3px 10px; font-size:.75rem;
    color: var(--cd-text3); margin-top:6px;
}

/* ── Layout ── */
.cd-body { display:flex; gap:20px; padding:16px 20px 48px; align-items:flex-start; background: var(--cd-bg); }
.cd-main { flex:1; min-width:0; }
.cd-sidebar { width:280px; flex-shrink:0; }
@media(max-width:991px){ .cd-sidebar{display:none;} }
@media(max-width:600px){
    .cd-body { padding:10px 12px 48px; gap:12px; }
    .cd-hero  { height:200px; }
    .cd-identity { padding:0 12px 14px; gap:12px; margin-top:-30px; }
    .cd-icon  { width:62px; height:62px; border-radius:14px; }
    .cd-stats { gap:10px; }
    .cd-desc-strip { padding:0 12px 14px; font-size:.88rem; }
    .cd-join-wrap { width:auto; align-self:flex-start; margin-top:4px; }
    .cd-btn-join { padding:9px 20px; font-size:.85rem; }
    .cd-composer { padding:14px 12px; }
    .cd-composer-input { min-height:56px; font-size:.95rem; padding:12px 14px; }
    .cd-composer-bar { padding:12px 0 0; }
    .cd-btn-publish { padding:10px 20px; font-size:.9rem; }
    .cd-composer-av { width:34px; height:34px; }
}

/* ── Card base ── */
.cd-card {
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow:hidden;
}

/* ── Composer ── */
.cd-composer { padding:16px; }
.cd-composer-row { display:flex; gap:10px; align-items:flex-start; }
.cd-composer-av {
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--cd-purple),var(--cd-purple2));
    display:flex; align-items:center; justify-content:center;
    font-size:.9rem; font-weight:700; color:#fff; overflow:hidden;
}
.cd-composer-av img { width:100%; height:100%; object-fit:cover; }
.cd-composer-input {
    flex:1; background: var(--cd-input-bg); border:1px solid var(--cd-input-bd);
    border-radius:12px; padding:10px 14px;
    font-size:.9rem; color: var(--cd-text); resize:none; min-height:44px;
    outline:none; transition:border-color .2s; font-family:inherit; line-height:1.4;
}
.cd-composer-input::placeholder { color: var(--cd-text4); }
.cd-composer-input:focus { border-color:rgba(108,92,231,.5); }
.cd-composer-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0 0; margin-top:8px;
    border-top:1px solid var(--cd-border);
}
.cd-composer-tool {
    display:inline-flex; align-items:center; gap:6px;
    font-size:.8rem; color: var(--cd-text3);
    cursor:pointer; padding:6px 10px; border-radius:8px;
    transition:background .2s; user-select:none;
}
.cd-composer-tool:hover { background: var(--cd-surface2); color: var(--cd-text2); }
.cd-btn-publish {
    background:linear-gradient(135deg,var(--cd-purple),var(--cd-purple2));
    color:#fff; border:none; border-radius:10px;
    padding:7px 18px; font-size:.85rem; font-weight:600;
    cursor:pointer; transition:opacity .2s;
}
.cd-btn-publish:disabled { opacity:.35; cursor:default; }
.cd-btn-publish:not(:disabled):hover { opacity:.85; }
.cd-img-preview { display:none; padding:8px 0 0; position:relative; }
.cd-img-preview img { max-height:180px; border-radius:10px; max-width:100%; }
.cd-img-remove {
    position:absolute; top:12px; right:4px;
    background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%;
    width:24px; height:24px; font-size:.75rem; cursor:pointer; line-height:1;
}

/* ── CTA non-membre ── */
.cd-cta { padding:28px 20px; text-align:center; }
.cd-cta p { color: var(--cd-text3); margin:0 0 14px; font-size:.9rem; }

/* ── Post ── */
.cd-post { padding:16px; }
.cd-post + .cd-post { border-top:1px solid var(--cd-border); }
.cd-post-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cd-post-av {
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--cd-purple),var(--cd-purple2));
    display:flex; align-items:center; justify-content:center;
    font-size:.88rem; font-weight:700; color:#fff; overflow:hidden;
}
.cd-post-av img { width:100%; height:100%; object-fit:cover; }
.cd-post-info { flex:1; min-width:0; }
.cd-post-name {
    font-size:.88rem; font-weight:600; color: var(--cd-text);
    text-decoration:none; display:block;
}
.cd-post-name:hover { color: var(--cd-purple2); }
.cd-post-time { font-size:.74rem; color: var(--cd-text3); margin-top:1px; }
.cd-post-menu-btn {
    background:none; border:none; color: var(--cd-text3);
    cursor:pointer; padding:4px 8px; border-radius:8px; font-size:1rem;
    transition:background .2s;
}
.cd-post-menu-btn:hover { background: var(--cd-surface2); color: var(--cd-text2); }
.cd-post-dropdown {
    display:none; position:absolute; right:0; top:32px;
    background: var(--cd-dropdown); border:1px solid var(--cd-border);
    border-radius:12px; box-shadow: var(--cd-shadow);
    z-index:100; min-width:160px; overflow:hidden;
}
.cd-post-dropdown button {
    display:block; width:100%; text-align:left;
    padding:10px 14px; border:none; background:none;
    color: var(--cd-text2); cursor:pointer; font-size:.85rem;
    transition:background .15s;
}
.cd-post-dropdown button:hover { background: var(--cd-surface2); color:#e84545; }
.cd-post-text {
    font-size:.9rem; color: var(--cd-text2);
    line-height:1.6; margin:0 0 10px; white-space:pre-wrap; word-break:break-word;
}
.cd-post-img { width:100%; border-radius:12px; max-height:400px; object-fit:cover; margin-bottom:10px; display:block; }
.cd-post-actions {
    display:flex; gap:4px;
    padding-top:10px; border-top:1px solid var(--cd-border); margin-top:4px;
}
.cd-action-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border:none; background:none;
    color: var(--cd-text3); font-size:.82rem; cursor:pointer;
    border-radius:8px; transition:background .2s, color .2s; font-family:inherit;
}
.cd-action-btn:hover { background: var(--cd-surface2); color: var(--cd-text2); }
.cd-action-btn.liked { color:#e84545; }
.cd-action-btn.liked:hover { color:#c0392b; }

/* ── Commentaires ── */
.cd-comments-section { padding:10px 0 0; }
.cd-comment { display:flex; gap:8px; margin-bottom:10px; }
.cd-comment-av {
    width:30px; height:30px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--cd-purple),var(--cd-purple2));
    display:flex; align-items:center; justify-content:center;
    font-size:.75rem; font-weight:700; color:#fff; overflow:hidden; text-decoration:none;
}
.cd-comment-av img { width:100%; height:100%; object-fit:cover; }
.cd-comment-bubble {
    background: var(--cd-surface2); border-radius:12px 12px 12px 4px;
    padding:8px 12px; flex:1;
}
.cd-comment-author { font-size:.78rem; font-weight:600; color: var(--cd-purple); display:flex; align-items:center; justify-content:space-between; }
.cd-comment-body { font-size:.83rem; color: var(--cd-text2); line-height:1.4; margin-top:2px; }
.cd-comment-time { font-size:.7rem; color: var(--cd-text4); margin-top:3px; }
.cd-comment-form { display:flex; gap:8px; align-items:center; padding-top:8px; }
.cd-comment-field {
    flex:1; background: var(--cd-input-bg); border:1px solid var(--cd-input-bd);
    border-radius:20px; padding:7px 14px; font-size:.83rem; color: var(--cd-text);
    outline:none; font-family:inherit;
}
.cd-comment-field:focus { border-color:rgba(108,92,231,.4); }
.cd-comment-send {
    width:34px; height:34px; border-radius:50%; border:none;
    background:linear-gradient(135deg,var(--cd-purple),var(--cd-purple2));
    cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:opacity .2s;
}
.cd-comment-send:hover { opacity:.85; }
.cd-comment-delete {
    background:none; border:none; color: var(--cd-text4);
    cursor:pointer; font-size:.7rem; padding:2px 4px; border-radius:4px;
    line-height:1; flex-shrink:0; transition:color .15s;
}
.cd-comment-delete:hover { color:#e84545; }

/* ── Empty state ── */
.cd-empty { text-align:center; padding:40px 20px; }
.cd-empty-icon { font-size:2.5rem; margin-bottom:12px; opacity:.4; }
.cd-empty h3 { color: var(--cd-text3); font-size:1rem; margin:0 0 6px; font-weight:500; }
.cd-empty p { color: var(--cd-text4); font-size:.85rem; margin:0; }

/* ── Sidebar widgets ── */
.cd-widget {
    background: var(--cd-surface);
    border:1px solid var(--cd-border);
    border-radius:16px; padding:16px;
    margin-bottom:14px;
}
.cd-widget-title {
    font-size:.78rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color: var(--cd-text3);
    margin:0 0 12px;
}
.cd-widget-stat-row { display:flex; gap:12px; }
.cd-widget-stat {
    flex:1; background: var(--cd-surface2); border-radius:12px;
    padding:10px; text-align:center;
}
.cd-widget-stat-val { font-size:1.2rem; font-weight:700; color: var(--cd-text); }
.cd-widget-stat-lbl { font-size:.7rem; color: var(--cd-text3); margin-top:2px; }
.cd-widget-desc { font-size:.85rem; color: var(--cd-text2); line-height:1.5; margin:0; }
.cd-widget-badge {
    display:inline-flex; align-items:center; gap:5px;
    background: var(--cd-surface2); border:1px solid var(--cd-border);
    border-radius:20px; padding:4px 10px; font-size:.75rem;
    color: var(--cd-text3); margin-top:8px;
}
.cd-members-grid { display:flex; flex-wrap:wrap; gap:6px; }
.cd-member-chip {
    display:flex; align-items:center; gap:6px;
    background: var(--cd-surface2); border-radius:20px;
    padding:4px 10px 4px 4px; text-decoration:none;
    transition:background .2s;
}
.cd-member-chip:hover { background: var(--cd-border); }
.cd-member-chip-av {
    width:26px; height:26px; border-radius:50%;
    background:linear-gradient(135deg,var(--cd-purple),var(--cd-purple2));
    display:flex; align-items:center; justify-content:center;
    font-size:.65rem; font-weight:700; color:#fff; overflow:hidden;
}
.cd-member-chip-av img { width:100%; height:100%; object-fit:cover; }
.cd-member-chip-name { font-size:.75rem; color: var(--cd-text2); white-space:nowrap; }
.cd-back-link {
    display:flex; align-items:center; gap:6px; justify-content:center;
    color: var(--cd-text3); font-size:.82rem; text-decoration:none;
    padding:8px; border-radius:10px; transition:background .2s,color .2s;
}
.cd-back-link:hover { background: var(--cd-surface2); color: var(--cd-purple); }

/* ── Modal signalement ── */
.cd-report-overlay {
    position:fixed; inset:0; z-index:10000;
    background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
}
.cd-report-box {
    background: var(--cd-popup-bg); border:1px solid var(--cd-border);
    border-radius:18px; padding:24px; width:min(360px,90vw);
    box-shadow: var(--cd-shadow);
}
.cd-report-box h3 { margin:0 0 6px; color: var(--cd-text); font-size:1rem; font-weight:700; }
.cd-report-box p  { margin:0 0 14px; color: var(--cd-text3); font-size:.82rem; }
.cd-report-textarea {
    width:100%; box-sizing:border-box;
    background: var(--cd-input-bg); border:1px solid var(--cd-input-bd);
    border-radius:10px; padding:10px 12px; color: var(--cd-text); font-size:.88rem;
    resize:none; outline:none; font-family:inherit;
}
.cd-report-textarea:focus { border-color:rgba(108,92,231,.4); }
.cd-report-actions { display:flex; gap:10px; margin-top:14px; justify-content:flex-end; }
.cd-report-cancel {
    padding:8px 18px; border-radius:10px; border:1px solid var(--cd-border);
    background:none; color: var(--cd-text2); cursor:pointer; font-size:.85rem;
}
.cd-report-submit {
    padding:8px 20px; border-radius:10px; border:none;
    background:linear-gradient(135deg,#e84545,#ff6b6b);
    color:#fff; cursor:pointer; font-size:.85rem; font-weight:600;
}

/* ── Toast ── */
.cd-toast {
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(16px);
    background: var(--cd-toast-bg); border:1px solid var(--cd-toast-bd);
    border-radius:12px; padding:10px 20px;
    font-size:.85rem; color:#f0f4ff; pointer-events:none;
    opacity:0; transition:opacity .25s,transform .25s; z-index:9999;
    box-shadow: var(--cd-shadow);
}
.cd-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }