/* =====================================================
   Back-office plateforme — surcouche de style.css
   Palette volontairement plus sobre que celle des agences :
   on distingue au premier coup d'œil l'administration de
   l'espace d'un client.
   ===================================================== */

.admin-body {
    --accent: #4A5B6E;
    --accent-soft: #E2E8EE;
    --gold: #8A7E6D;
    --bg-app: #F4F5F7;
}

.admin-body .sidebar-brand .mark { background: #4A5B6E; color: #fff; }

.confidentialite {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: var(--accent-soft);
    color: #34424F;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 11.4px;
    line-height: 1.45;
}

.admin-body .stat-card .value { font-size: 22px; }
.admin-body .data-table td { vertical-align: middle; }

/* =====================================================
   Aperçu du thème d'une agence (éditeur, temps réel)
   ===================================================== */
.apercu-theme {
    --a: #C98D92; --as: #F3DADC; --or: #C9A66B;
    --fond: #F7F2EC; --surface: #FFFFFF; --encre: #2B2622; --r: 16px;
    display: flex;
    height: 250px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E3E1DE;
    background: var(--fond);
    transition: background .2s;
}

.apercu-sidebar {
    width: 62px;
    background: var(--surface);
    border-right: 1px solid rgba(0, 0, 0, .06);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

.apercu-mark {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--a);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px;
}

.apercu-nav { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.apercu-nav span { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .07); display: block; }
.apercu-nav span.on { background: var(--as); }

.apercu-contenu { flex: 1; padding: 16px; overflow: hidden; }
.apercu-titre { font-size: 15px; font-weight: 700; color: var(--encre); margin-bottom: 12px; }

.apercu-carte {
    background: var(--surface);
    border-radius: var(--r);
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(43, 38, 34, .06);
}

.apercu-ligne { height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .08); margin-bottom: 7px; width: 55%; }
.apercu-ligne.large { width: 80%; background: rgba(0, 0, 0, .13); }

.apercu-badge {
    display: inline-block;
    background: var(--as);
    color: var(--a);
    font-size: 10px; font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
}

.apercu-bouton {
    display: inline-block;
    background: var(--a);
    color: #fff;
    font-size: 10.5px; font-weight: 600;
    padding: 6px 12px;
    border-radius: calc(var(--r) / 2);
    margin-top: 4px;
}