:root {
    --cmz-1:        #198754;
    --cmz-dark-1:   #146c43;
    --cmz-light-1:  #d1e7dd;
    --cmz-xlight-1: #f0faf5;
    --cmz-glow-1:   rgba(25,135,84,.18);

    --border-1:  #e2e8f0;
    --bg-soft-1: #f8fafc;
    --txt-1:     #1e293b;
    --muted-1:   #64748b;
    --soft-1:    #94a3b8;
}

/* ── Formulaire ── */
.ft-form {
    display: flex; flex-direction: column;
    background: #fff;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

/* ── Couverture ── */
.ft-cover-wrap { position: relative; margin-bottom: 8rem; }
.ft-cover { width: 100%; height: 140px; overflow: hidden; background: var(--cmz-light-1); }
.ft-cover img { width: 100%; height: 100%; display: block; }

/* ── Avatar ── */
.ft-avatar-label {
    position: absolute; bottom: -2.2rem; left: 1.25rem;
    width: 150px; height: 150px; border-radius: 12px;
    border: 3px solid #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.18);
    overflow: hidden; cursor: pointer; display: block;
    background: whitesmoke;
}
.ft-avatar-img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft-avatar-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.42); color: #fff; font-size: 1.1rem;
    opacity: 0; transition: opacity .2s;
}
.ft-avatar-label:hover .ft-avatar-overlay { opacity: 1; }
.ft-file-hidden { display: none !important; }

/* ── Corps ── */
.ft-body { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.25rem; }

/* ── Labels ── */
.ft-label {
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .055em; color: var(--muted-1);
    display: block; margin-bottom: .3rem;
}

/* ── Inputs ── */
.ft-field { display: flex; flex-direction: column; }
.ft-input-wrap { position: relative; }
.ft-ico {
    position: absolute; left: .85rem; top: 50%;
    transform: translateY(-50%);
    color: var(--soft-1); font-size: .82rem; pointer-events: none;
}
.ft-ico--top { top: .78rem; transform: none; }
.ft-input {
    width: 100%; box-sizing: border-box;
    padding: .6rem .9rem .6rem 2.4rem;
    border: 1.5px solid var(--border-1); border-radius: 10px;
    font-size: .88rem; color: var(--txt-1); background: var(--bg-soft-1);
    transition: border-color .2s, box-shadow .2s;
}
.ft-input:focus {
    outline: none;
    border-color: var(--cmz-1);
    box-shadow: 0 0 0 3px var(--cmz-glow-1);
    background: #fff;
}
.ft-textarea { resize: none; overflow: hidden; }

/* ── Visibilité ── */
.ft-vis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ft-vis-btn {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .75rem .5rem; border: 2px solid var(--border-1); border-radius: 12px;
    background: var(--bg-soft-1); cursor: pointer; transition: all .2s;
}
.ft-vis-btn i { font-size: 1.2rem; color: var(--soft-1); transition: color .2s; }
.ft-vis-name { font-size: .82rem; font-weight: 700; color: var(--muted-1); transition: color .2s; }
.ft-vis-hint { font-size: .67rem; color: var(--soft-1); text-align: center; line-height: 1.3; }


.ft-vis-btn--active#ft-btn-public, .ft-vis-btn--active#ft-upd-btn-public {
    border-color: var(--cmz-1); background: var(--cmz-xlight-1);
}
.ft-vis-btn--active#ft-btn-public i, .ft-vis-btn--active#ft-upd-btn-public i    { color: var(--cmz-1); }
.ft-vis-btn--active#ft-btn-public .ft-vis-name, .ft-vis-btn--active#ft-upd-btn-public .ft-vis-name { color: var(--cmz-dark-1); }

.ft-vis-btn--active#ft-btn-private, .ft-vis-btn--active#ft-upd-btn-private {
    border-color: #f97316; background: #fff7ed;
}
.ft-vis-btn--active#ft-btn-private i, .ft-vis-btn--active#ft-upd-btn-private i    { color: #ea580c; }
.ft-vis-btn--active#ft-btn-private .ft-vis-name, .ft-vis-btn--active#ft-upd-btn-private .ft-vis-name { color: #c2410c; }

.ft-vis-btn:not(.ft-vis-btn--active):hover { border-color: #cbd5e1; background: #f1f5f9; }

/* ── Extensions ── */
.ft-ext-list { display: flex; flex-direction: column; gap: .5rem; }

.ft-ext-card {
    display: flex; align-items: center; gap: .85rem;
    padding: .75rem 1rem;
    border: 1.5px solid var(--border-1); border-radius: 12px;
    background: var(--bg-soft-1); cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
    user-select: none;
}
.ft-ext-card:hover { border-color: #cbd5e1; background: #f1f5f9; }

/* Masquer le vrai checkbox */
.ft-ext-check { display: none !important; }

/* Icône extension */
.ft-ext-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 10px; background: var(--cmz-light-1);
    display: flex; align-items: center; justify-content: center;
    color: var(--cmz-1); font-size: .95rem;
    transition: background .2s, color .2s;
}

/* Texte */
.ft-ext-info { flex: 1; min-width: 0; }
.ft-ext-name {
    display: block; font-size: .86rem; font-weight: 600;
    color: var(--txt-1); margin: 0 !important; cursor: pointer;
}
.ft-ext-desc { font-size: .72rem; color: var(--muted-1); }

/* Toggle pill */
.ft-ext-toggle { flex-shrink: 0; }
.ft-toggle-pill {
    display: block; width: 40px; height: 22px; border-radius: 999px;
    background: #cbd5e1; position: relative;
    transition: background .25s;
}
.ft-toggle-pill::after {
    content: ''; position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: transform .25s;
}

/* État coché */
.ft-ext-check:checked ~ * .ft-ext-icon,
.ft-ext-card:has(.ft-ext-check:checked) .ft-ext-icon {
    background: var(--cmz-1); color: #fff;
}
.ft-ext-card:has(.ft-ext-check:checked) {
    border-color: var(--cmz-1); background: var(--cmz-xlight-1);
    box-shadow: 0 0 0 3px var(--cmz-glow-1);
}
.ft-ext-card:has(.ft-ext-check:checked) .ft-toggle-pill {
    background: var(--cmz-1);
}
.ft-ext-card:has(.ft-ext-check:checked) .ft-toggle-pill::after {
    transform: translateX(18px);
}

/* ── Submit ── */
.ft-submit {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; padding: .78rem; margin-top: .25rem;
    border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--cmz-1), var(--cmz-dark-1));
    color: #fff; font-size: .9rem; font-weight: 700;
    cursor: pointer; transition: opacity .2s, transform .15s;
}
.ft-submit:hover  { opacity: .88; transform: translateY(-1px); }
.ft-submit:active { transform: translateY(0); }
#uploadImage img {
    width: 150px;
    height: 150px;
    border-radius: 0 !important;
}
.ft-cover-wrap {
    margin-bottom: 3rem !important;
}