/* ============================================================
   TousLesCastings — Member CSS v6
   Shell sidebar + topbar + dashboard grid
   Préfixe .mb- pour éviter conflits avec main.css
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
    --mb-bg:          #050816;
    --mb-panel:       rgba(255,255,255,.045);
    --mb-panel-2:     rgba(255,255,255,.06);
    --mb-border:      rgba(255,255,255,.08);
    --mb-border-b:    rgba(98,178,255,.18);
    --mb-text:        #f5f7fb;
    --mb-muted:       #aeb8cb;
    --mb-blue-1:      #012f5f;
    --mb-blue-2:      #388dd9;
    --mb-blue-3:      #62b2ff;
    --mb-green:       #2fba7a;
    --mb-amber:       #ffb347;
    --mb-red:         #ff6b6b;
    --mb-shadow:      0 20px 55px rgba(0,0,0,.28);
    --mb-radius-xl:   24px;
    --mb-radius-lg:   18px;
    --mb-radius-md:   14px;
    --mb-sidebar-w:   270px;
    --mb-topbar-h:    70px;
}

/* ── App shell ───────────────────────────────────────────────── */
.mb-app {
    display: grid;
    grid-template-columns: var(--mb-sidebar-w) 1fr;
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, rgba(56,141,217,.10), transparent 28%),
        linear-gradient(180deg, #050816 0%, #091223 100%);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.mb-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 18px 14px 24px;
    background: linear-gradient(180deg, rgba(7,13,27,.99), rgba(8,18,34,.97));
    border-right: 1px solid rgba(255,255,255,.05);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mb-brand {
    padding: 10px 10px 18px;
}
.mb-brand a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.mb-brand img { height: 34px; width: auto; }

/* Profile mini */
.mb-profile-mini {
    margin: 0 6px 18px;
    padding: 14px;
    border-radius: var(--mb-radius-lg);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}
.mb-profile-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.mb-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.12);
    flex-shrink: 0;
}
.mb-profile-name { font-size: .92rem; font-weight: 800; color: var(--mb-text); }
.mb-profile-meta { font-size: .78rem; color: var(--mb-muted); margin-top: 2px; }

.mb-progress-line {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: var(--mb-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    margin-bottom: 7px;
}
.mb-progress-bar {
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.mb-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mb-blue-3), rgba(255,255,255,.85));
    border-radius: 999px;
    transition: width .4s ease;
}

/* Nav */
.mb-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 6px;
}
.mb-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: var(--mb-radius-md);
    color: rgba(255,255,255,.75);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
    transition: all .16s ease;
}
.mb-nav-link svg { flex-shrink: 0; opacity: .75; }
.mb-nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.07);
}
.mb-nav-link:hover svg { opacity: 1; }
.mb-nav-link.active {
    color: #fff;
    background: rgba(56,141,217,.14);
    border-color: rgba(98,178,255,.22);
}
.mb-nav-link.active svg { opacity: 1; }
.mb-nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(56,141,217,.22);
    color: #cfe7ff;
    font-size: .65rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mb-divider {
    height: 1px;
    margin: 10px 14px;
    background: rgba(255,255,255,.06);
}

/* ── Main ────────────────────────────────────────────────────── */
.mb-main {
    min-width: 0;
    padding: 20px 24px 48px;
}
.mb-container {
    width: min(100%, 1400px);
    margin: 0 auto;
}

/* ── Topbar ──────────────────────────────────────────────────── */
.mb-topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    min-height: var(--mb-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    margin-bottom: 22px;
    border-radius: var(--mb-radius-lg);
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(5,8,22,.75);
    backdrop-filter: blur(16px);
    box-shadow: var(--mb-shadow);
}
.mb-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.mb-topbar-left h1 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--mb-text);
}
.mb-topbar-left p {
    margin: 3px 0 0;
    color: var(--mb-muted);
    font-size: .86rem;
}
.mb-topbar-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.mb-mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.mb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: var(--mb-radius-md);
    border: 0;
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease;
}
.mb-btn:hover { transform: translateY(-1px); }
.mb-btn-primary {
    background: linear-gradient(90deg, var(--mb-blue-1) 0%, var(--mb-blue-2) 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(56,141,217,.20);
}
.mb-btn-secondary {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--mb-text);
}
.mb-btn-sm {
    min-height: 34px;
    padding: 0 14px;
    font-size: .80rem;
}

/* ── Dashboard grid ──────────────────────────────────────────── */
.mb-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.mb-stack { display: grid; gap: 20px; }

/* ── Cards ───────────────────────────────────────────────────── */
.mb-card {
    background: var(--mb-panel);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius-xl);
    box-shadow: var(--mb-shadow);
}
.mb-section-card { padding: 20px; }

.mb-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.mb-section-head h3 {
    margin: 0;
    font-size: .88rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mb-text);
}
.mb-section-head p {
    margin: 4px 0 0;
    font-size: .80rem;
    color: var(--mb-muted);
}
.mb-link-more {
    font-size: .80rem;
    font-weight: 700;
    color: var(--mb-blue-3);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.mb-link-more:hover { text-decoration: underline; }

/* ── Casting cards (recommandations) ─────────────────────────── */
.mb-castings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.mb-casting-card {
    border-radius: var(--mb-radius-lg);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mb-casting-thumb {
    display: block;
    height: 150px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.mb-casting-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.mb-casting-card:hover .mb-casting-thumb img { transform: scale(1.04); }
.mb-compat-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(47,186,122,.9);
    color: #fff;
    font-size: .70rem;
    font-weight: 900;
    padding: 3px 9px;
    border-radius: 999px;
}
.mb-casting-body {
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.mb-meta-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mb-pill {
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.70);
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
}
.mb-casting-title {
    margin: 0;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.4;
    flex: 1;
}
.mb-casting-title a { color: var(--mb-text); text-decoration: none; }
.mb-casting-title a:hover { color: var(--mb-blue-3); }

/* ── List rows (candidatures / alertes) ──────────────────────── */
.mb-list { display: flex; flex-direction: column; }
.mb-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.mb-list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mb-list-row--compact { grid-template-columns: minmax(0, 1fr) auto; }
.mb-list-row strong {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--mb-text);
    margin-bottom: 3px;
    line-height: 1.3;
}
.mb-list-row small {
    display: block;
    font-size: .74rem;
    color: rgba(255,255,255,.42);
}

/* ── Statuts ─────────────────────────────────────────────────── */
.mb-status {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.70);
}
.mb-status.green  { background: rgba(47,186,122,.12); border-color: rgba(47,186,122,.20); color: #9ce5bf; }
.mb-status.amber  { background: rgba(255,179,71,.12);  border-color: rgba(255,179,71,.20);  color: #ffd49a; }
.mb-status.red    { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.20); color: #ffc4c4; }

/* ── Profile card (complétion) ───────────────────────────────── */
.mb-profile-card { display: flex; flex-direction: column; gap: 14px; }
.mb-profile-head { display: flex; align-items: center; gap: 14px; }
.mb-avatar-lg {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.12);
    flex-shrink: 0;
}
.mb-profile-head h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; }
.mb-profile-head p  { margin: 0; font-size: .82rem; color: var(--mb-muted); }

.mb-meter-row { display: flex; flex-direction: column; gap: 6px; }
.mb-meter-top {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    color: rgba(255,255,255,.72);
}
.mb-meter-top strong { font-weight: 800; }
.mb-meter-bar {
    height: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.mb-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mb-blue-3), rgba(255,255,255,.85));
    transition: width .4s ease;
}
.mb-meter-fill.green { background: linear-gradient(90deg, var(--mb-green), rgba(255,255,255,.85)); }
.mb-meter-fill.amber { background: linear-gradient(90deg, var(--mb-amber), rgba(255,255,255,.85)); }
.mb-complete-msg { margin: 4px 0 0; color: var(--mb-green); font-size: .84rem; font-weight: 700; }

/* ── Premium nudge ───────────────────────────────────────────── */
.mb-premium-nudge {
    background: linear-gradient(135deg, rgba(1,47,95,.6), rgba(56,141,217,.15));
    border-color: rgba(98,178,255,.20);
}
.mb-premium-nudge h3 { margin: 10px 0 8px; font-size: 1rem; }
.mb-premium-nudge p  { margin: 0 0 14px; font-size: .86rem; color: rgba(255,255,255,.75); line-height: 1.5; }
.mb-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(56,141,217,.16);
    border: 1px solid rgba(98,178,255,.24);
    color: var(--mb-blue-3);
    font-size: .72rem;
    font-weight: 800;
    margin-bottom: 2px;
}

/* ── Empty states ────────────────────────────────────────────── */
.mb-empty {
    padding: 20px;
    border-radius: var(--mb-radius-md);
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(255,255,255,.09);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.mb-empty p { margin: 0; color: var(--mb-muted); font-size: .86rem; line-height: 1.5; }

/* ── Responsive 980px — sidebar mobile ───────────────────────── */
@media (max-width: 980px) {
    .mb-app { grid-template-columns: 1fr; }

    .mb-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(82vw, 300px);
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 20px 0 60px rgba(0,0,0,.4);
    }
    .mb-sidebar.open { transform: translateX(0); }

    .mb-mobile-toggle { display: inline-flex; }

    .mb-main { padding: 14px 14px 32px; }
    .mb-topbar { margin-bottom: 16px; }
}

/* ── Responsive 760px — grille 1 colonne ─────────────────────── */
@media (max-width: 760px) {
    .mb-dashboard-grid { grid-template-columns: 1fr; }
    .mb-castings-grid  { grid-template-columns: 1fr; }
    .mb-topbar-actions { display: none; }
    .mb-list-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
    .mb-list-row .mb-btn { display: none; } /* masquer le bouton "Voir" sur mobile */
    .mb-list-row--compact { grid-template-columns: minmax(0,1fr) auto; }
    /* Statut : wrap pour les libellés longs */
    .mb-list-row .mb-status { white-space: normal; text-align: right; max-width: 110px; line-height: 1.2; }
    /* Forcer pleine largeur sur chaque section card */
    .mb-section-card { width: 100%; box-sizing: border-box; }
}

/* ============================================================
   PROFIL
   ============================================================ */

.mb-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* Nudge bar */
.mb-nudge-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    margin-bottom: 18px;
    border-radius: var(--mb-radius-md);
    background: rgba(255,179,71,.08);
    border: 1px solid rgba(255,179,71,.22);
    color: #ffd49a;
    font-size: .86rem;
}
.mb-nudge-bar svg { flex-shrink: 0; }
.mb-nudge-bar a { color: #ffd49a; font-weight: 700; margin-left: auto; text-decoration: underline; }

/* Optional hint in section title */
.mb-optional-hint {
    font-size: .72rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mb-muted);
    margin-left: 8px;
}

/* Profile section wrappers — strip native section styles */
.mb-section-card .profile-section,
.mb-section-card .form-section { border: 0; padding: 0; margin: 0; background: none; }
.mb-section-card .profile-section h2,
.mb-section-card .form-section h2,
.mb-section-card .form-section__title { display: none; } /* titre déjà dans section-head */

/* Photo slots dans le shell v6 */
.profile-section--photos {
    background: var(--mb-panel) !important;
    border: 1px solid var(--mb-border) !important;
    border-radius: var(--mb-radius-xl) !important;
    padding: 20px !important;
    margin: 0 !important;
}
.profile-section--photos h2.section-title {
    display: block !important;
    font-size: .88rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 14px;
    color: var(--mb-text);
}
.profile-photo-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.profile-photo-slot { display: flex; flex-direction: column; gap: 8px; }
.profile-photo-slot__label {
    font-size: .70rem;
    font-weight: 800;
    color: var(--mb-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.profile-photo-slot__img-wrap {
    position: relative;
    border-radius: var(--mb-radius-lg);
    overflow: hidden;
    aspect-ratio: 3/4;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
.profile-photo-slot__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-slot-change-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(5,8,22,.85);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    transition: background .15s;
}
.profile-slot-change-btn:hover { background: rgba(56,141,217,.6); }

/* Profile tip */
.mb-profile-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: var(--mb-blue-3);
    padding: 10px 12px;
    border-radius: var(--mb-radius-md);
    background: rgba(98,178,255,.08);
    border: 1px solid rgba(98,178,255,.14);
    margin-top: 4px;
}

/* Tips card */
.mb-tips-card .mb-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mb-tips-list li {
    font-size: .84rem;
    color: rgba(255,255,255,.72);
    padding-left: 20px;
    position: relative;
}
.mb-tips-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--mb-green);
    font-weight: 700;
}

/* Save bar */
/* Bouton Enregistrer — même gabarit que le bouton Candidater des annonces */
.profile-save-btn-large {
    min-height: 52px;
    padding: 0 36px;
    font-size: 1rem;
    font-weight: 800;
    border-radius: 14px;
    letter-spacing: .02em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    width: 100%;
}

.mb-save-bar {
    position: sticky;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 14px 20px;
    margin-top: 20px;
    border-radius: var(--mb-radius-lg);
    background: rgba(5,8,22,.85);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(14px);
    box-shadow: var(--mb-shadow);
    z-index: 10;
}
.save-feedback { font-size: .84rem; color: var(--mb-green); }

/* Form groups dans les sections profil */
.mb-section-card .form-group,
.mb-section-card .form-row { margin-bottom: 14px; }
.mb-section-card .form-group:last-child,
.mb-section-card .form-row:last-child { margin-bottom: 0; }
.mb-section-card .form-group label { font-size: .72rem; font-weight: 800; color: var(--mb-muted); text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 6px; }
.mb-section-card .form-group input,
.mb-section-card .form-group select,
.mb-section-card .form-group textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--mb-radius-md);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: #fff;
    font: inherit;
    font-size: .88rem;
    color-scheme: dark;
}
.mb-section-card .form-group input:focus,
.mb-section-card .form-group select:focus { outline: none; border-color: rgba(98,178,255,.4); }
.mb-section-card .form-row--2col { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }

/* Checkboxes et chips alertes */
.mb-section-card .region-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}
.mb-section-card .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--mb-radius-md);
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.03);
    transition: background .14s;
}
.mb-section-card .checkbox-label:hover { background: rgba(255,255,255,.06); }
.mb-section-card .chips-group { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-section-card .chip-label { cursor: pointer; }
.mb-section-card .chip-label input { display: none; }
.mb-section-card .chip-label input:checked + .chip {
    background: rgba(56,141,217,.20);
    border-color: rgba(98,178,255,.30);
    color: #fff;
}
.mb-section-card .chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.72);
    font-size: .78rem;
    font-weight: 700;
    transition: all .14s;
}
.mb-section-card .frequency-options { display: flex; flex-direction: column; gap: 10px; }
.mb-section-card .radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--mb-radius-md);
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.03);
    font-size: .88rem;
    cursor: pointer;
    transition: background .14s;
}
.mb-section-card .radio-label:hover { background: rgba(255,255,255,.06); }
.mb-section-card .radio-label--disabled { opacity: .45; cursor: not-allowed; }
.mb-section-card .radio-hint { font-size: .74rem; color: var(--mb-muted); margin-left: auto; }

/* ============================================================
   CANDIDATURES
   ============================================================ */

.mb-apps-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.mb-apps-kpi {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: .86rem;
    color: var(--mb-muted);
    padding: 8px 16px;
    border-radius: var(--mb-radius-md);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
}
.mb-apps-kpi strong { font-size: 1.4rem; font-weight: 800; color: var(--mb-text); line-height: 1; }
.mb-apps-kpi--green strong { color: var(--mb-green); }
.mb-apps-kpi--amber strong { color: var(--mb-amber); }

.mb-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.mb-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.70);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s;
}
.mb-filter-tab:hover { background: rgba(255,255,255,.08); color: #fff; }
.mb-filter-tab.active {
    background: rgba(56,141,217,.16);
    border-color: rgba(98,178,255,.28);
    color: #fff;
}
.mb-filter-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    font-size: .68rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* App rows */
.mb-apps-list { gap: 0; }
.mb-app-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.mb-app-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mb-app-thumb {
    width: 72px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
}
.mb-app-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mb-app-thumb--empty { background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.10); }
.mb-app-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mb-app-title {
    font-size: .90rem;
    font-weight: 700;
    color: var(--mb-text);
    text-decoration: none;
    line-height: 1.3;
    display: block;
}
.mb-app-title:hover { color: var(--mb-blue-3); }
.mb-app-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mb-app-date { font-size: .74rem; color: rgba(255,255,255,.40); }
.mb-app-status-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }

/* Pagination */
.mb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 20px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.05);
}
.mb-pagination-info { font-size: .82rem; color: var(--mb-muted); }

/* ============================================================
   ALERTES
   ============================================================ */

.mb-alerts-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.mb-alerts-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mb-btn-delete {
    background: none;
    border: 0;
    color: rgba(255,107,107,.65);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    padding: 8px;
    border-radius: var(--mb-radius-md);
    transition: color .15s, background .15s;
}
.mb-btn-delete:hover { color: #ff6b6b; background: rgba(255,107,107,.06); }

/* Sections alertes natives wrappées */
.mb-section-card .alerts-section--essentials,
.mb-section-card .alerts-section--frequency { border: 0; padding: 0; margin: 0; background: none; }
.mb-section-card .alerts-section--essentials h2,
.mb-section-card .alerts-section--frequency h2 { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {
    .mb-profile-layout  { grid-template-columns: 1fr; }
    .mb-alerts-layout   { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .mb-apps-summary    { gap: 10px; }
    /* Mobile : thumb fixée à 56×56 (carré, plus naturel pour des covers
       carrées de castings) + gap généreux à 24px pour respirer entre
       l'image et le titre. La règle inclut .mb-app-thumb pour overrider
       la taille desktop 72×48 qui peut "fuir" si la grid est mal cadrée. */
    .mb-app-row         { grid-template-columns: 56px minmax(0,1fr); gap: 24px; align-items: flex-start; }
    .mb-app-thumb       { width: 56px !important; height: 56px !important; flex-shrink: 0; }
    .mb-app-status-col  { display: none; } /* masqué sur mobile — statut visible via filtre */
    .profile-photo-slots { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mb-section-card .form-row--2col { grid-template-columns: 1fr; }
}

/* ============================================================
   POLISH — Expériences en chips + corrections transversales
   ============================================================ */

/* Chips expériences */
.mb-exp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.mb-exp-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.68);
    font-size: .80rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .14s ease;
    user-select: none;
}
.mb-exp-chip input { display: none; }
.mb-exp-chip:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: #fff;
}
.mb-exp-chip.checked,
.mb-exp-chip:has(input:checked) {
    background: rgba(56,141,217,.18);
    border-color: rgba(98,178,255,.32);
    color: #fff;
}

/* Inline checkbox */
.mb-inline-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--mb-radius-md);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    transition: background .14s;
}
.mb-inline-check:hover { background: rgba(255,255,255,.08); }
.mb-inline-check input { width: 16px; height: 16px; accent-color: var(--mb-blue-3); }

/* Textarea dans les sections profil */
.mb-section-card .form-group textarea {
    width: 100%;
    min-height: 70px;
    padding: 10px 14px;
    border-radius: var(--mb-radius-md);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: #fff;
    font: inherit;
    font-size: .88rem;
    color-scheme: dark;
    resize: vertical;
}
.mb-section-card .form-group textarea:focus { outline: none; border-color: rgba(98,178,255,.4); }

/* Réduction de l'aspect "tunnel" du profil :
   sections identity/matching en une seule card desktop large */
.mb-section-card .profile-section--matching,
.mb-section-card .profile-section--identity { padding: 0 !important; }

/* Polish général : homogénéisation des gaps internes */
.mb-section-card { padding: 20px; }
.mb-section-head  { margin-bottom: 18px; }
.mb-section-card .form-group { margin-bottom: 16px; }
.mb-section-card .form-group:last-child { margin-bottom: 0; }
.mb-section-card .form-row--2col { gap: 14px; }

/* Espacement uniforme entre toutes les lignes de formulaire.
   Sans cette règle, les .form-group enfants d'une .form-row héritaient
   de leur propre margin-bottom (16px) qui s'ajoutait au margin-bottom
   du .form-row parent (14px) → 30px entre 2 rows alors que 2 .form-group
   d'un même row n'ont que le gap de 14px. Visuellement les espacements
   à partir de la 2e ligne paraissaient plus larges que la 1re.
   Solution : neutraliser le margin-bottom des .form-group à l'intérieur
   d'une .form-row — seul le margin-bottom du .form-row compte. */
.mb-section-card .form-row .form-group { margin-bottom: 0; }
.mb-section-card .form-row { margin-bottom: 14px; }
.mb-section-card .form-row:last-child { margin-bottom: 0; }

/* Cohérence des titres de section-head */
.mb-section-head h3 {
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mb-text);
    margin: 0;
}
.mb-section-head p {
    font-size: .78rem;
    color: var(--mb-muted);
    margin: 4px 0 0;
    font-weight: 400;
}

/* Harmonisation des statuts dans les filtres candidatures */
.mb-filter-tab.active .mb-filter-count {
    background: rgba(255,255,255,.15);
}

/* Placeholder styles dans les inputs membre */
.mb-section-card .form-group input::placeholder,
.mb-section-card .form-group textarea::placeholder {
    color: rgba(255,255,255,.35);
    opacity: 1;
}

@media (max-width: 760px) {
    .mb-exp-chips { gap: 6px; }
    .mb-exp-chip  { min-height: 32px; padding: 0 12px; font-size: .76rem; }
}

/* ============================================================
   PROFIL v2 — grille horizontale + photos compactes
   ============================================================ */

/* Grille 4 colonnes info */
.mb-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.mb-fg { display: flex; flex-direction: column; gap: 6px; }
.mb-fg label {
    font-size: .70rem;
    font-weight: 800;
    color: var(--mb-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.mb-fg input,
.mb-fg select,
.mb-fg textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: var(--text);
    font: inherit;
    font-size: .88rem;
    color-scheme: dark;
    transition: border-color .15s;
}

.mb-fg select option { background: #0e1f3a; color: var(--text); }
.mb-fg select optgroup { background: #0e1f3a; color: rgba(255,255,255,.5); font-style: normal; font-weight: 800; }
.mb-fg select option[value=""],
.mb-fg select option:first-child:not(:checked) { color: rgba(255,255,255,.55); }
.mb-fg input::placeholder,
.mb-fg textarea::placeholder { color: rgba(255,255,255,.55); opacity: 1; }
.mb-fg input:focus,
.mb-fg select:focus,
.mb-fg textarea:focus { outline: none; border-color: rgba(98,178,255,.4); }
.mb-fg input.error,
.mb-fg select.error,
.mb-fg textarea.error,
.dob-wrap input.error {
    border: 1px solid #ff6b6b !important;
    box-shadow: 0 0 0 3px rgba(255,107,107,.30) !important;
    outline: none !important;
}

.mb-fg textarea { min-height: 70px; resize: vertical; }

/* Checkbox véhiculé — compact */
.mb-fg--checkbox { justify-content: flex-end; }
.mb-toggle-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--mb-radius-md);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255,255,255,.80);
    transition: background .14s;
}
.mb-toggle-check:hover { background: rgba(255,255,255,.08); }
.mb-toggle-check input[type=checkbox] {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    accent-color: var(--mb-blue-3);
    flex-shrink: 0;
}

/* Photos — rangée horizontale compacte */
.mb-photos-card { }
.mb-photo-row {
    display: grid;
    grid-template-columns: 140px 140px 1fr;
    gap: 20px;
    align-items: start;
}
.mb-photo-slot { display: flex; flex-direction: column; gap: 8px; }
.mb-photo-label {
    font-size: .68rem;
    font-weight: 800;
    color: var(--mb-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.mb-photo-wrap {
    position: relative;
    width: 140px;
    aspect-ratio: 3/4;
    border-radius: var(--mb-radius-lg);
    overflow: hidden;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
.mb-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-photo-change-btn {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(5,8,22,.82);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(6px);
}
.mb-photo-change-btn:hover { background: rgba(56,141,217,.5); }
.mb-photo-tips { padding: 0 0 0 4px; }
.mb-photo-tips .mb-tips-title {
    font-size: .72rem;
    font-weight: 800;
    color: var(--mb-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 10px;
}
.mb-photo-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mb-photo-tips li {
    font-size: .82rem;
    color: rgba(255,255,255,.65);
    padding-left: 18px;
    position: relative;
    line-height: 1.4;
}
.mb-photo-tips li::before { content: '✓'; position: absolute; left: 0; color: var(--mb-green); font-weight: 700; }

/* Mini score badge dans section-head */
.mb-mini-score {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .80rem;
    font-weight: 800;
    color: var(--mb-text);
}

/* Mensurations — section accordéon propre dans le shell v6 */
.profile-section--measurements {
    background: var(--mb-panel) !important;
    border: 1px solid var(--mb-border) !important;
    border-radius: var(--mb-radius-xl) !important;
    padding: 0 !important;
    margin: 16px 0 0 !important;
    overflow: hidden;
}
.profile-section--measurements .form-section__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: none;
    border: 0;
    color: var(--mb-text);
    cursor: pointer;
    font: inherit;
    gap: 10px;
}
.profile-section--measurements .form-section__toggle .section-title {
    font-size: .82rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
}
.profile-section--measurements .form-section__toggle::after {
    content: '⌄';
    font-size: 1.1rem;
    color: var(--mb-muted);
    flex-shrink: 0;
    transition: transform .2s;
}
.profile-section--measurements .form-section__toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}
.profile-section--measurements .form-section__body--closed { display: none; }
.profile-section--measurements .form-section__body--open {
    padding: 0 20px 20px;
}
.profile-section--measurements .form-section__chevron { display: none; }
.profile-section--measurements .section-hint {
    font-size: .82rem;
    color: var(--mb-muted);
    margin: 0 0 14px;
}
.profile-section--measurements .form-row--3col {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin-bottom: 0;
}
.profile-section--measurements .form-group { margin-bottom: 12px; }
.profile-section--measurements .form-group:last-child { margin-bottom: 0; }
.profile-section--measurements label {
    font-size: .68rem;
    font-weight: 800;
    color: var(--mb-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: block;
    margin-bottom: 6px;
}
.profile-section--measurements input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: var(--mb-radius-md);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: #fff;
    font: inherit;
    font-size: .86rem;
    color-scheme: dark;
}
.profile-section--measurements input:not([type="checkbox"]):not([type="radio"]):focus { outline: none; border-color: rgba(98,178,255,.4); }

/* Optionnel tag sur le bouton mensurations */
.profile-section--measurements .form-section__toggle .mb-muted-tag {
    font-size: .72rem;
    font-weight: 400;
    color: var(--mb-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================================
   ALERTES — régions et production correctement stylés
   ============================================================ */
.mb-section-card .form-section {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}
.mb-section-card .form-section h2,
.mb-section-card .form-section__title { display: none !important; }

/* Forcer le style sur les checkboxes régions dans les sections alertes */
.mb-section-card .region-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 4px;
}
.mb-section-card .region-checkboxes .checkbox-label,
.mb-section-card .checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: .83rem !important;
    padding: 8px 12px !important;
    border-radius: var(--mb-radius-md) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    background: rgba(255,255,255,.03) !important;
    cursor: pointer !important;
    color: rgba(255,255,255,.78) !important;
    transition: background .14s !important;
    margin: 0 !important;
}
.mb-section-card .checkbox-label input[type=checkbox] {
    width: 15px !important;
    height: 15px !important;
    min-height: 0 !important;
    padding: 0 !important;
    accent-color: var(--mb-blue-3);
    flex-shrink: 0;
}
.mb-section-card .chips-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Form-group dans sections alertes */
.mb-section-card .form-group {
    margin-bottom: 16px;
}
.mb-section-card .form-group:last-child { margin-bottom: 0; }
.mb-section-card .form-group > label:first-child {
    font-size: .70rem !important;
    font-weight: 800 !important;
    color: var(--mb-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    display: block !important;
    margin-bottom: 7px !important;
}

/* IMPORTANT — neutralisation du margin-bottom des .form-group QUAND ils sont
   dans une .form-row. Cette règle DOIT être après la règle "alertes"
   ci-dessus (ligne 1391) qui redéfinit le margin-bottom à 16px sur tous les
   .form-group de .mb-section-card sans tenir compte du contexte form-row.
   Sans cette neutralisation, on cumule margin-bottom du .form-group +
   margin-bottom du .form-row → écarts inégaux entre lignes du formulaire profil. */
.mb-section-card .form-row .form-group { margin-bottom: 0 !important; }
.mb-section-card .form-group input[type=text],
.mb-section-card .form-group input[type=number],
.mb-section-card .form-group select {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--mb-radius-md);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: #fff;
    font: inherit;
    font-size: .88rem;
    color-scheme: dark;
}
.mb-section-card .form-group input:focus,
.mb-section-card .form-group select:focus { outline: none; border-color: rgba(98,178,255,.4); }
.mb-section-card .form-row--2col { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }

/* ============================================================
   RESPONSIVE PROFIL
   ============================================================ */
@media (max-width: 1100px) {
    .mb-info-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .mb-info-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mb-photo-row { grid-template-columns: 120px 120px 1fr; gap: 14px; }
    .mb-photo-wrap { width: 120px; }
    .profile-section--measurements .form-row--3col { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .mb-info-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mb-photo-row { grid-template-columns: 1fr 1fr; }
    .mb-photo-tips { display: none; }
}

/* ============================================================
   FIX SELECTS — dropdown blanc sur certains OS/navigateurs
   ============================================================ */
.mb-fg select,
.mb-info-grid select,
.mb-section-card select,
.mb-alerts-form select {
    color-scheme: dark;
    background-color: #0b1222;
}
.mb-fg select option,
.mb-info-grid select option,
.mb-section-card select option,
.mb-alerts-form select option {
    background: #0b1222;
    color: #f5f7fb;
}

/* photo-slot — s'assurer que le data-slot est accessible pour le JS */
.mb-photo-wrap.js-photo-slot { }

/* Prefill apply btn */
.prefill-apply-btn {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: #fff;
    font: inherit;
    font-size: .80rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: 10px;
    transition: background .15s;
}
.prefill-apply-btn:hover { background: rgba(56,141,217,.20); }
.prefill-apply-btn:disabled { opacity: .55; cursor: default; }

/* Profil — s'assurer que detail.js n'est pas requis */
.mb-section-card input[type=date] { color-scheme: dark; }

/* ============================================================
   PROFIL v3 — Layout master côte à côte
   ============================================================ */

/* Layout principal : photos gauche (180px fixe) + formulaires droite */
.mb-profile-master {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    align-items: start;
}

/* Colonne photos */
.mb-profile-photos-col {
    position: sticky;
    top: calc(var(--mb-topbar-h) + 20px);
}

/* Score badge compact */
.mb-profile-score-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: var(--mb-radius-md);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
}
.mb-profile-score-badge .mb-meter-bar { flex: 1; }
.mb-score-pct { font-size: .92rem; font-weight: 900; color: var(--mb-blue-3); white-space: nowrap; }
.mb-score-label { font-size: .68rem; color: var(--mb-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Slot photo vertical */
.mb-photo-slot-v { display: flex; flex-direction: column; gap: 0; }
.mb-photo-slot-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}
.mb-photo-slot-label span {
    font-size: .68rem;
    font-weight: 800;
    color: var(--mb-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.mb-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: var(--mb-radius-lg);
    overflow: hidden;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}
.mb-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-photo-change-btn {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90.2deg, rgb(1,47,95) -0.4%, rgb(56,141,217) 106.1%);
    border: 0;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(56,141,217,.3);
}
.mb-photo-change-btn:hover { opacity: .88; }

/* Bouton ? tooltip */
.mb-photo-tip-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(98,178,255,.35);
    background: rgba(98,178,255,.10);
    color: var(--mb-blue-3);
    font: inherit;
    font-size: .70rem;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .14s;
}
.mb-photo-tip-btn:hover { background: rgba(98,178,255,.22); }

/* Tooltip contenu */
.mb-photo-tooltip {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: var(--mb-radius-md);
    background: rgba(1,47,95,.5);
    border: 1px solid rgba(98,178,255,.20);
    font-size: .78rem;
    color: rgba(255,255,255,.82);
    line-height: 1.5;
}
.mb-photo-tooltip strong {
    display: block;
    color: var(--mb-blue-3);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.mb-photo-tooltip ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mb-photo-tooltip li::before { content: '· '; color: var(--mb-blue-3); }

/* Colonne formulaires */
.mb-profile-forms-col { min-width: 0; }
.mb-profile-forms-col .profile-section--measurements {
    margin-top: 16px !important;
}

/* Section Informations avec gradient accent */
.mb-profile-section-gradient {
    background: linear-gradient(135deg, rgba(1,47,95,.55) 0%, rgba(56,141,217,.12) 100%) !important;
    border-color: rgba(98,178,255,.18) !important;
}

/* Label standalone (hors mb-fg) */
.mb-fg-label {
    font-size: .70rem;
    font-weight: 800;
    color: var(--mb-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: block;
}
.mb-profile-forms-col textarea {
    width: 100%;
    min-height: 66px;
    padding: 10px 14px;
    border-radius: var(--mb-radius-md);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    color: #fff;
    font: inherit;
    font-size: .88rem;
    color-scheme: dark;
    resize: vertical;
}
.mb-profile-forms-col textarea:focus { outline: none; border-color: rgba(98,178,255,.4); }

/* Gradient accent sur topbar dashboard */
.mb-topbar { background: linear-gradient(90.2deg, rgba(1,47,95,.85) -0.4%, rgba(8,18,34,.90) 106.1%) !important; border-color: rgba(98,178,255,.14) !important; }

/* Gradient accent sur section candidatures en cours (dashboard) */
.mb-card.mb-section-card:first-child { border-color: rgba(98,178,255,.12); }

/* Gradient sidebar active item */
.mb-nav-link.active {
    background: linear-gradient(90.2deg, rgba(1,47,95,.8) -0.4%, rgba(56,141,217,.25) 106.1%) !important;
    border-color: rgba(98,178,255,.28) !important;
}

/* Responsive */
@media (max-width: 1000px) {
    .mb-profile-master { grid-template-columns: 160px 1fr; }
}
@media (max-width: 760px) {
    .mb-profile-master {
        grid-template-columns: 1fr;
    }
    .mb-profile-photos-col {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
    .mb-profile-score-badge { grid-column: 1 / -1; }
}

/* ============================================================
   PROFIL — Couleurs formulaire identiques aux annonces
   (linear-gradient bleu, border subtle, inputs arrondis)
   ============================================================ */

/* Inputs/selects profil — même style que .field dans les annonces */
.mb-fg input,
.mb-fg select,
.mb-info-grid input,
.mb-info-grid select,
.mb-profile-forms-col textarea,
.mb-section-card .mb-fg input,
.mb-section-card .mb-fg select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    font: inherit;
    font-size: .88rem;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: #f5f7fb;
    border-radius: 14px;
    color-scheme: dark;
    transition: border-color .15s;
}
.mb-fg input:focus,
.mb-fg select:focus,
.mb-info-grid input:focus,
.mb-info-grid select:focus { outline: none; border-color: rgba(98,178,255,.45); box-shadow: 0 0 0 2px rgba(98,178,255,.12); }
.mb-fg input::placeholder { color: rgba(255,255,255,.45); opacity: 1; }
.mb-fg select,
.mb-info-grid select { background-color: rgba(255,255,255,.06); }
.mb-fg select option,
.mb-info-grid select option { background: #0e1f3a; color: #f5f7fb; }
.mb-fg input[type=date] { color-scheme: dark; }

/* Section card profil avec gradient comme sidebar annonce */
.mb-profile-section-gradient {
    background: linear-gradient(90.2deg, rgba(1,47,95,.65) -0.4%, rgba(56,141,217,.18) 106.1%) !important;
    border-color: rgba(98,178,255,.18) !important;
}
/* Section matching : gradient plus subtil */
#matching.mb-card {
    background: linear-gradient(135deg, rgba(1,47,95,.35) 0%, rgba(56,141,217,.08) 100%);
    border-color: rgba(98,178,255,.10);
}

/* Mensurations accordion - forcer visibilité */
.profile-section--measurements {
    margin-top: 16px !important;
}
.profile-section--measurements .form-section__body--open {
    display: block !important;
}
.profile-section--measurements .form-section__body--closed {
    display: none !important;
}
/* Ouvrir les mensurations par défaut si le toggle ne fonctionne pas */

/* ============================================================
   MENSURATIONS — grille 2 colonnes, toujours visible
   ============================================================ */
.mb-meas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 760px) {
    .mb-meas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .mb-meas-grid { grid-template-columns: 1fr; }
}

/* Supprimer les anciens styles accordéon */
.profile-section--measurements.mb-card {
    background: var(--mb-panel) !important;
    border: 1px solid var(--mb-border) !important;
    border-radius: var(--mb-radius-xl) !important;
    padding: 20px !important;
    margin: 0 !important;
    overflow: visible !important;
}
.profile-section--measurements.mb-card .form-section__toggle { display: none !important; }
.profile-section--measurements.mb-card .form-section__body--closed,
.profile-section--measurements.mb-card .form-section__body--open,
.profile-section--measurements.mb-card #measurements-content { display: block !important; }

/* ── Photos mobile — égalisation des hauteurs ─────────────────────────── */
@media (max-width: 760px) {
    .mb-profile-photos-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: start;
    }
    .mb-profile-score-badge {
        grid-column: 1 / -1;
    }
    /* Les deux slots font exactement la même taille */
    .mb-photo-slot-v {
        margin-top: 0 !important;
    }
    .mb-photo-wrap {
        width: 100% !important;
        aspect-ratio: 3/4;
    }
}

/* ============================================================
   GRADIENT GLOBAL mb-card + couleurs formulaires identiques
   aux annonces sidebar
   ============================================================ */

/* Gradient sur toutes les cards membre */
.mb-card {
    background: linear-gradient(90.2deg, rgb(1,47,95) -0.4%, rgb(56,141,217) 106.1%) !important;
    border-color: rgba(255,255,255,.10) !important;
}

/* Labels identiques aux annonces (.field label) */
.mb-fg label,
.mb-fg-label,
.mb-info-grid .mb-fg label,
.mb-meas-grid .mb-fg label,
.mb-section-card .mb-fg label {
    display: block;
    font-size: .73rem;
    font-weight: 800;
    color: rgba(255,255,255,.80);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.15;
}

/* Inputs/selects identiques aux annonces (.field input / select) */
.mb-fg input,
.mb-fg select,
.mb-fg textarea,
.mb-info-grid input,
.mb-info-grid select,
.mb-meas-grid input,
.mb-meas-grid select,
.mb-profile-forms-col textarea {
    display: block;
    width: 100%;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    color: #fff;
    border-radius: 14px;
    min-height: 44px;
    padding: 11px 13px;
    font: inherit;
    font-size: .88rem;
    color-scheme: dark;
    transition: border-color .15s;
}
.mb-fg input:focus,
.mb-fg select:focus,
.mb-fg textarea:focus,
.mb-info-grid input:focus,
.mb-info-grid select:focus,
.mb-meas-grid input:focus {
    outline: none;
    border-color: rgba(98,178,255,.45);
    box-shadow: 0 0 0 2px rgba(98,178,255,.12);
}

/* Placeholders identiques */
.mb-fg input::placeholder,
.mb-fg textarea::placeholder,
.mb-info-grid input::placeholder,
.mb-meas-grid input::placeholder {
    color: rgba(255,255,255,.55);
    opacity: 1;
}

/* Options select */
.mb-fg select option,
.mb-info-grid select option,
.mb-meas-grid select option {
    background: #0e1f3a;
    color: #fff;
}

/* Section-head h3 et p sur fond gradient */
.mb-card .mb-section-head h3 { color: #fff; }
.mb-card .mb-section-head p  { color: rgba(255,255,255,.72); }
.mb-card .mb-link-more       { color: rgba(255,255,255,.85); }
.mb-card .mb-link-more:hover { color: #fff; }

/* Chips expériences sur fond gradient */
.mb-card .mb-exp-chip {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
    color: rgba(255,255,255,.85);
}
.mb-card .mb-exp-chip:hover,
.mb-card .mb-exp-chip.checked,
.mb-card .mb-exp-chip:has(input:checked) {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.40);
    color: #fff;
}

/* Toggle véhiculé sur fond gradient */
.mb-card .mb-toggle-check {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
    color: #fff;
}
.mb-card .mb-toggle-check:hover { background: rgba(255,255,255,.18); }

/* Meter bar sur fond gradient */
.mb-card .mb-meter-bar { background: rgba(255,255,255,.15); }

/* Status badges sur fond gradient */
.mb-card .mb-status { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.20); color: #fff; }
.mb-card .mb-status.green { background: rgba(47,186,122,.25); border-color: rgba(47,186,122,.40); }
.mb-card .mb-status.amber { background: rgba(255,179,71,.25); border-color: rgba(255,179,71,.40); }
.mb-card .mb-status.red   { background: rgba(255,107,107,.25); border-color: rgba(255,107,107,.40); }

/* App rows sur fond gradient */
.mb-card .mb-app-title { color: #fff; }
.mb-card .mb-app-date  { color: rgba(255,255,255,.55); }
.mb-card .mb-pill {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.18);
    color: rgba(255,255,255,.90);
}

/* List rows sur fond gradient */
.mb-card .mb-list-row { border-bottom-color: rgba(255,255,255,.10); }
.mb-card .mb-list-row strong { color: #fff; }
.mb-card .mb-list-row small  { color: rgba(255,255,255,.55); }

/* Empty state sur fond gradient */
.mb-card .mb-empty {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
}
.mb-card .mb-empty p { color: rgba(255,255,255,.75); }

/* Casting cards sur fond gradient */
.mb-casting-card {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.16) !important;
}
.mb-casting-title a { color: #fff !important; }

/* Premium nudge sur fond gradient */
.mb-premium-nudge { background: rgba(255,255,255,.08) !important; }
.mb-premium-nudge h3, .mb-premium-nudge p { color: #fff; }

/* Tips list sur fond gradient */
.mb-card .mb-tips-list li { color: rgba(255,255,255,.80); }

/* ============================================================
   FIXES v1.1.81
   ============================================================ */

/* 1. Mensurations — forcer le gradient comme les autres cards */
.profile-section--measurements.mb-card {
    background: linear-gradient(90.2deg, rgb(1,47,95) -0.4%, rgb(56,141,217) 106.1%) !important;
    border-color: rgba(255,255,255,.10) !important;
}

/* 2. Véhiculé(e) — checkbox compact, sans fond bleu natif géant */
.mb-toggle-check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    color: #fff !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100% !important;
}
.mb-toggle-check input[type=checkbox] {
    width: 16px !important;
    height: 16px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    accent-color: #62b2ff !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

/* 3. Menus déroulants — fond identique aux annonces (#0e1f3a) partout */
.mb-fg select,
.mb-info-grid select,
.mb-meas-grid select,
.mb-section-card select,
.mb-alerts-form select,
.mb-profile-forms-col select {
    background-color: rgba(5,8,22,.70) !important;
    color-scheme: dark !important;
}
/* Options identiques aux annonces */
.mb-fg select option,
.mb-info-grid select option,
.mb-meas-grid select option,
.mb-section-card select option,
.mb-alerts-form select option,
.mb-profile-forms-col select option {
    background: #0e1f3a !important;
    color: #f5f7fb !important;
}
/* Premier option (placeholder) */
.mb-fg select option[value=""],
.mb-section-card select option[value=""] {
    color: rgba(255,255,255,.55) !important;
}

/* ============================================================
   FIX v1.1.84 — selects fond identique aux inputs (annonces)
   ============================================================ */
.mb-fg select,
.mb-info-grid select,
.mb-meas-grid select,
.mb-section-card select,
.mb-alerts-form select,
.mb-profile-forms-col select,
.mb-dashboard-grid select {
    background: rgba(255,255,255,.06) !important;
    background-color: rgba(255,255,255,.06) !important;
    color: #fff !important;
    color-scheme: dark !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px !important;
}
/* Options dans le dropdown natif */
.mb-fg select option,
.mb-info-grid select option,
.mb-meas-grid select option,
.mb-section-card select option,
.mb-alerts-form select option {
    background: #0e1f3a !important;
    color: #f5f7fb !important;
}

/* Matches alertes — rangées compactes */
.mb-match-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mb-match-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mb-match-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mb-match-title {
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mb-match-title:hover { text-decoration: underline; }
.mb-match-info small { font-size: .73rem; color: rgba(255,255,255,.55); }
.mb-match-score {
    flex-shrink: 0;
    min-width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(47,186,122,.20);
    border: 1px solid rgba(47,186,122,.30);
    color: #9ce5bf;
    font-size: .75rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mensurations — séparation avec le bloc Matching */
#measurements.profile-section--measurements { margin-top: 16px !important; }

/* ============================================================
   PROFIL EXPRESS — bloc dashboard
   ============================================================ */
.mb-profil-express { }

/* Avatar + nom */
.mb-pe-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.mb-pe-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.20);
    flex-shrink: 0;
}
.mb-pe-name {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}
.mb-pe-details {
    font-size: .80rem;
    color: rgba(255,255,255,.72);
    line-height: 1.4;
}

/* Barres de progression */
.mb-pe-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}
.mb-pe-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 40px;
    align-items: center;
    gap: 12px;
}
.mb-pe-bar-label {
    font-size: .82rem;
    color: rgba(255,255,255,.85);
    font-weight: 500;
}
.mb-pe-bar-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    overflow: hidden;
}
.mb-pe-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .5s ease;
}
.mb-pe-bar-green  { background: linear-gradient(90deg, #2fba7a, #8fe0b5); }
.mb-pe-bar-blue   { background: linear-gradient(90deg, #388dd9, #a8d4f5); }
.mb-pe-bar-amber  { background: linear-gradient(90deg, #ffb347, #ffd49a); }
.mb-pe-bar-purple { background: linear-gradient(90deg, #9b59b6, #d7a9e3); }
.mb-pe-bar-pct {
    font-size: .80rem;
    font-weight: 800;
    color: #fff;
    text-align: right;
}

/* CTA */
.mb-pe-cta {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    font-size: .90rem;
}

/* Override gradient — fond neutre semi-transparent */
.mb-card {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.10) !important;
}

/* ============================================================
   DASHBOARD — ordre mobile
   Mobile : Profil Express → Alertes → Castings → Candidatures
   ============================================================ */
@media (max-width: 760px) {
    .mb-dashboard-grid {
        display: flex;
        flex-direction: column;
    }
    /* Colonne principale (recommandations + candidatures) */
    .mb-dashboard-grid > .mb-stack:first-child {
        display: contents; /* les enfants participent directement au flex parent */
    }
    /* Colonne secondaire (profil express + alertes + nudge) */
    .mb-dashboard-grid > .mb-stack:last-child {
        display: contents;
    }

    /* Ordre explicite sur chaque article */
    /* 1. Optimiser vos candidatures */
    .mb-onboarding                                                       { order: 1; }
    /* 2. Profil express */
    .mb-profil-express                                                   { order: 2; }
    /* 3. Alertes — 2e article de la colonne secondaire */
    .mb-dashboard-grid > .mb-stack:last-child > article:nth-child(2)    { order: 3; }
    /* 4. Mes candidatures — 2e article de la colonne principale (après onboarding) */
    .mb-dashboard-grid > .mb-stack:first-child > article:last-child     { order: 4; }
    /* 5. Castings pour vous — autres articles de la colonne principale */
    .mb-dashboard-grid > .mb-stack:first-child > article:not(.mb-onboarding):not(:last-child) { order: 5; }
    /* Premium nudge en dernier */
    .mb-dashboard-grid > .mb-stack:last-child > article:nth-child(3)    { order: 6; }
}

/* ============================================================
   PROFIL — gradient bleu sur Informations + Matching uniquement
   Ciblage par ID pour ne pas impacter les autres .mb-card
   ============================================================ */
article#identity.mb-card,
article#matching.mb-card {
    background: linear-gradient(90.2deg, rgb(1,47,95) -0.4%, rgb(56,141,217) 106.1%) !important;
    border-color: rgba(255,255,255,.10) !important;
}

/* ── Alertes — régions checkboxes ───────────────────────────────────── */
.mb-region-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.mb-region-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--mb-radius-md);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    cursor: pointer;
    font-size: .83rem;
    color: rgba(255,255,255,.80);
    transition: background .14s;
}
.mb-region-chip:hover { background: rgba(255,255,255,.10); }
.mb-region-chip input[type=checkbox] {
    width: 15px; height: 15px;
    min-height: 0; padding: 0; margin: 0;
    accent-color: var(--mb-blue-3);
    flex-shrink: 0;
}
.mb-region-chip:has(input:checked) {
    background: rgba(56,141,217,.18);
    border-color: rgba(98,178,255,.30);
    color: #fff;
}

/* ── Alertes — fréquence radio ──────────────────────────────────────── */
.mb-freq-options { display: flex; flex-direction: column; gap: 10px; }
.mb-freq-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: var(--mb-radius-md);
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    cursor: pointer;
    transition: background .14s;
}
.mb-freq-option:hover { background: rgba(255,255,255,.09); }
.mb-freq-option input[type=radio] {
    width: 16px; height: 16px;
    min-height: 0; padding: 0; margin: 0;
    accent-color: var(--mb-blue-3);
    flex-shrink: 0;
}
.mb-freq-label { font-size: .88rem; font-weight: 700; color: #fff; flex: 1; }
.mb-freq-hint  { font-size: .75rem; color: var(--mb-muted); }
.mb-freq-disabled { opacity: .45; cursor: not-allowed; }

/* ============================================================
   ALERT CHIPS — pills sélectionnables (régions, productions)
   Identiques à la référence : texte seul, sans checkbox visible
   ============================================================ */
.mb-alert-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.mb-alert-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.82);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background .14s, border-color .14s, color .14s;
    white-space: nowrap;
}
/* Cacher complètement le checkbox natif */
.mb-alert-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
}
.mb-alert-chip:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.mb-alert-chip.active {
    background: rgba(56,141,217,.25);
    border-color: rgba(98,178,255,.55);
    color: #fff;
    font-weight: 700;
}

/* Fix centrage vertical chips alertes */
.mb-alert-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* ============================================================
   PROFIL UX POLISH — hiérarchie visuelle casting
   ============================================================ */

/* Photos — colonne élargie + eyebrow priorité */
.mb-profile-master { grid-template-columns: 200px 1fr; }

.mb-photos-priority-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    font-weight: 800;
    color: var(--mb-amber);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
}
.mb-photos-priority-label svg { flex-shrink: 0; }

.mb-photos-score {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: .76rem;
    color: var(--mb-muted);
}
.mb-photos-score .mb-meter-bar { flex: 1; height: 5px; }

/* Section step number */
.mb-section-head--flush { margin-bottom: 16px; }
.mb-section-head--flush > div { display: flex; align-items: center; gap: 10px; }
.mb-section-step {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.70);
    font-size: .70rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mb-profile-section-gradient .mb-section-step {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.30);
    color: #fff;
}
.mb-section-desc {
    font-size: .78rem;
    color: var(--mb-muted);
    margin: 4px 0 0;
    padding-left: 0;
}

/* Groupes de champs avec séparateur */
.mb-field-group + .mb-field-group--separated {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.mb-field-group--separated:first-child { margin-top: 0; }

/* Espacement uniforme entre 2 .mb-field-group consécutifs (sans --separated).
   Sans cette règle, le profil "Mes informations" affichait des écarts inégaux
   entre lignes : 12px entre 2 .mb-info-grid d'un même .mb-field-group (via
   style="margin-top:12px" inline) mais ~0 ou marges d'enfants entre 2
   .mb-field-group → écart visuel anormalement grand entre Date et Genre.
   Avec margin-top: 12px on aligne tous les écarts entre lignes du formulaire. */
.mb-field-group + .mb-field-group { margin-top: 12px; }

/* Grilles variantes */
.mb-info-grid--3col {
    grid-template-columns: repeat(3, minmax(0,1fr));
}
.mb-info-grid--2col {
    grid-template-columns: repeat(2, minmax(0,1fr));
}

/* Chips label */
.mb-chips-label {
    font-size: .72rem;
    font-weight: 800;
    color: var(--mb-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 10px;
}

/* Label muted pour champs optionnels */
.mb-label-muted {
    font-size: .72rem;
    font-weight: 600;
    color: var(--mb-muted);
    display: block;
    margin-bottom: 6px;
}
.mb-label-muted em { font-style: normal; }

/* Mensurations — visuellement dégradées (secondaires) */
.profile-section--measurements.mb-card {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.07) !important;
    border-style: dashed !important;
    margin-top: 14px !important;
}
.profile-section--measurements .mb-section-head h3 {
    color: var(--mb-muted) !important;
    font-size: .80rem !important;
}
.profile-section--measurements .mb-section-head p {
    color: rgba(255,255,255,.40) !important;
}
.profile-section--measurements .mb-fg label {
    color: rgba(255,255,255,.55) !important;
}
.profile-section--measurements .mb-fg input {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.80) !important;
}

/* Responsive */
@media (max-width: 1000px) {
    .mb-profile-master { grid-template-columns: 180px 1fr; }
    .mb-info-grid--3col { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .mb-profile-master { grid-template-columns: 1fr; }
    .mb-info-grid--3col,
    .mb-info-grid--2col { grid-template-columns: 1fr; }
    .mb-photos-priority-label { justify-content: center; }
}

/* ── Profil mobile — photos côte à côte ─────────────────────────────── */
@media (max-width: 760px) {
    .mb-profile-master {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    /* Photos : 2 colonnes égales côte à côte */
    .mb-profile-photos-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: start;
    }
    .mb-photo-slot-v {
        margin-top: 0 !important;
    }
    .mb-photo-wrap {
        width: 100% !important;
        aspect-ratio: 3/4;
    }
}

/* Mensurations — gradient bleu comme les autres blocs */
.profile-section--measurements.mb-card {
    background: linear-gradient(90.2deg, rgb(1,47,95) -0.4%, rgb(56,141,217) 106.1%) !important;
    border-color: rgba(255,255,255,.10) !important;
    border-style: solid !important;
}
.profile-section--measurements .mb-section-head h3 { color: #fff !important; }
.profile-section--measurements .mb-section-head p   { color: rgba(255,255,255,.72) !important; }
.profile-section--measurements .mb-fg label         { color: rgba(255,255,255,.80) !important; }
.profile-section--measurements .mb-fg input         {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #fff !important;
}

/* ── Pills "Particularités physiques visibles" — override casing + sizing ─
   La page profil applique uppercase/letter-spacing à tous les labels
   via .profile-section--measurements label (ligne 1319), et auparavant
   `.profile-section--measurements input` ajoutait min-height:42px et
   padding:9px 12px à TOUS les input — y compris les checkboxes ! Du coup
   les pills paraissaient 3× plus grosses que sur la candidature.

   Cette classe blinde tout : casing naturel, sizing identique au wide form
   de candidature (font-size .85rem, padding 8/12, gap 8, min-height auto). */
.tlc-particularity-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: .85rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: rgba(255,255,255,.92) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 0 !important;
    cursor: pointer;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    padding: 8px 12px !important;
    transition: background .15s, border-color .15s;
}
.tlc-particularity-pill:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
}
.tlc-particularity-pill input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
}

/* ============================================================
   PARAMÈTRES
   ============================================================ */
.mb-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.mb-settings-action {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.mb-settings-feedback {
    font-size: .84rem;
    font-weight: 700;
}
.mb-settings-hint {
    font-size: .78rem;
    color: var(--mb-muted);
    margin: 10px 0 0;
    font-style: italic;
}

/* Danger zone */
.mb-danger-card {
    border-color: rgba(255,107,107,.18) !important;
}
.mb-danger-card .mb-section-head h3 { color: #ffc4c4; }
.mb-danger-block { display: flex; flex-direction: column; gap: 14px; }
.mb-danger-info strong {
    display: block;
    font-size: .90rem;
    color: #ffc4c4;
    margin-bottom: 6px;
}
.mb-danger-info p {
    font-size: .82rem;
    color: rgba(255,255,255,.65);
    line-height: 1.5;
    margin: 0;
}
.mb-danger-details {
    margin-top: 4px;
}
.mb-danger-details summary {
    font-size: .84rem;
    font-weight: 700;
    color: rgba(255,107,107,.80);
    cursor: pointer;
    padding: 8px 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mb-danger-details summary::before { content: '▶'; font-size: .60rem; }
.mb-danger-details[open] summary::before { content: '▼'; }
.mb-danger-details summary:hover { color: #ff6b6b; }

.mb-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: var(--mb-radius-md);
    border: 1px solid rgba(255,107,107,.40);
    background: rgba(255,107,107,.12);
    color: #ffc4c4;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    width: 100%;
}
.mb-btn-danger:hover { background: rgba(255,107,107,.22); color: #fff; }
.mb-btn-danger:disabled { opacity: .5; cursor: wait; }

@media (max-width: 980px) {
    .mb-settings-layout { grid-template-columns: 1fr; }
}

/* ── Champs obligatoires — étoile rouge ─────────────────────────────── */
.mb-req {
    color: #ff6b6b;
    font-weight: 900;
    margin-left: 3px;
    font-size: .85em;
}
/* Input en erreur */
.mb-fg input[style*="ff6b6b"],
.mb-fg select[style*="ff6b6b"] {
    border-color: #ff6b6b !important;
}

/* ── Bandeau onboarding inscription ──────────────────────────────────────── */
.mb-onboarding-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(90.2deg, rgba(1,47,95,.55) -0.4%, rgba(56,141,217,.2) 106.1%);
    border: 1px solid rgba(98,178,255,.25);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    color: #e5efff;
}
.mb-onboarding-banner svg {
    flex-shrink: 0;
    margin-top: 2px;
    stroke: #62b2ff;
}
.mb-onboarding-banner div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mb-onboarding-banner strong {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
}
.mb-onboarding-banner span {
    font-size: .84rem;
    color: rgba(229,239,255,.7);
}

/* ============================================================
   MOBILE NAV — sticky tab bar sous le header
   ============================================================ */

/* Desktop : masquée */
.mb-mobile-nav { display: none; }

@media (max-width: 760px) {

    /* Masquer sidebar + burger interne du dashboard */
    .mb-sidebar         { display: none !important; }
    .mb-mobile-toggle   { display: none !important; }

    /* mb-app : une seule colonne */
    .mb-app {
        display: block !important;
        grid-template-columns: none !important;
    }

    /* Décaler le contenu principal pour la tab bar */
    .mb-main {
        padding-top: 0 !important;
    }

    /* Tab bar visible */
    .mb-mobile-nav {
        display: block;
        position: sticky;
        top: 62px; /* hauteur header mobile */
        z-index: 80;
        background: rgba(4, 10, 24, 0.97);
        border-bottom: 1px solid rgba(98, 178, 255, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .mb-mobile-nav__track {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        gap: 0;
        padding: 0 4px;
    }
    .mb-mobile-nav__track::-webkit-scrollbar { display: none; }

    .mb-mobile-nav__tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 16px 9px;
        min-width: 72px;
        flex-shrink: 0;
        scroll-snap-align: start;
        color: rgba(229, 239, 255, .5);
        text-decoration: none;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .02em;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
        transition: color .15s, border-color .15s;
    }

    .mb-mobile-nav__tab svg {
        flex-shrink: 0;
        transition: stroke .15s;
    }

    .mb-mobile-nav__tab:hover {
        color: rgba(229, 239, 255, .85);
    }

    .mb-mobile-nav__tab.is-active {
        color: #62b2ff;
        border-bottom-color: #62b2ff;
    }

    /* Topbar interne du dashboard sur mobile : simplifier */
    .mb-topbar {
        padding: 16px 16px 4px;
    }
    .mb-topbar h1 {
        font-size: 1.3rem;
    }
    .mb-container {
        padding: 0 12px 32px;
    }
}

/* ── Mobile nav — flèches de navigation ─────────────────────────────────── */
.mb-mobile-nav__arrow {
    display: none; /* Desktop : masquées */
}

@media (max-width: 760px) {
    /* Wrapper relatif pour positionner les flèches */
    .mb-mobile-nav {
        position: sticky;
        top: 62px;
        z-index: 80;
    }

    .mb-mobile-nav__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 36px;
        border: none;
        cursor: pointer;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s ease;
        background: none;
        color: rgba(229, 239, 255, .7);
    }

    /* Flèche gauche — fondu vers la droite */
    .mb-mobile-nav__arrow--left {
        left: 0;
        background: linear-gradient(to right, rgba(4,10,24,1) 40%, rgba(4,10,24,0));
        padding-left: 4px;
        justify-content: flex-start;
    }

    /* Flèche droite — fondu vers la gauche */
    .mb-mobile-nav__arrow--right {
        right: 0;
        background: linear-gradient(to left, rgba(4,10,24,1) 40%, rgba(4,10,24,0));
        padding-right: 4px;
        justify-content: flex-end;
    }

    /* Visible uniquement quand le JS ajoute .is-visible */
    .mb-mobile-nav__arrow.is-visible {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ============================================================
   MON COMPTE — Plan + Premium CTA + Factures
   ============================================================ */

/* Plan badge */
.mb-account-plan {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-wrap: wrap;
}
.mb-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.mb-plan-badge--boost {
    background: linear-gradient(90.2deg, rgb(1,47,95) -0.4%, rgb(56,141,217) 106.1%);
    color: #fff;
}
.mb-plan-badge--free {
    background: rgba(255,255,255,.08);
    color: var(--muted);
    border: 1px solid rgba(255,255,255,.1);
}
.mb-plan-details { flex: 1; min-width: 0; }
.mb-plan-name { font-weight: 700; font-size: .95rem; }
.mb-plan-meta { font-size: .82rem; color: var(--muted); margin-top: 2px; }

/* CTA Premium upgrade */
.mb-boost-upgrade {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(90.2deg, rgba(1,47,95,.5) -0.4%, rgba(56,141,217,.15) 106.1%);
    border: 1px solid rgba(56,141,217,.3);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.mb-boost-upgrade__content {
    display: flex;
    align-items: center;
    gap: 14px;
}
.mb-boost-upgrade__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(56,141,217,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #62b2ff;
}
.mb-boost-upgrade__title { font-weight: 700; font-size: 1rem; }
.mb-boost-upgrade__desc  { font-size: .82rem; color: var(--muted); margin-top: 2px; }

.mb-btn-boost {
    background: linear-gradient(90.2deg, rgb(1,47,95) -0.4%, rgb(56,141,217) 106.1%);
    color: #fff;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity .15s;
}
.mb-btn-boost:hover { opacity: .85; }

/* Factures */
.mb-invoices { margin-top: 24px; }
.mb-invoices__title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin: 0 0 10px;
}
.mb-invoices__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mb-invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.03);
    transition: background .12s;
}
.mb-invoice-row:hover { background: rgba(255,255,255,.06); }
.mb-invoice-row__left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
}
.mb-invoice-row__left svg { flex-shrink: 0; }
.mb-invoice-row__num  { font-size: .88rem; font-weight: 600; display: block; }
.mb-invoice-row__date { font-size: .76rem; color: var(--muted); }
.mb-invoice-row__right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mb-invoice-row__amount {
    font-weight: 700;
    font-size: .9rem;
}
.mb-invoice-row__dl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: var(--blue-3);
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(98,178,255,.25);
    transition: background .12s;
}
.mb-invoice-row__dl:hover { background: rgba(98,178,255,.08); }
.mb-empty-inline { font-size: .85rem; color: var(--muted); margin: 0; }

@media (max-width: 600px) {
    .mb-boost-upgrade { flex-direction: column; align-items: flex-start; }
    .mb-account-plan  { flex-direction: column; align-items: flex-start; }
}

/* ── Page Mon compte ────────────────────────────────────────────────────── */
.mb-account-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 680px;
}
.mb-account-section__title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin: 0 0 16px;
}
.mb-plan-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.mb-boost-section { padding: 0 !important; overflow: hidden; }
.mb-boost-section .mb-boost-upgrade { border: none; border-radius: 0; margin: 0; border-radius: 12px; }

/* ── Onboarding steps ──────────────────────────────────────────────────── */
.mb-onboarding {
    padding: 20px 22px;
}

.mb-onboarding-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.mb-onboarding-header-text h3 {
    font-size: .95rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 2px;
}

.mb-onboarding-header-text p {
    font-size: .78rem;
    color: var(--muted);
    margin: 0;
}

.mb-onboarding-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mb-onboarding-progress-track {
    width: 90px;
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
}

.mb-onboarding-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #388dd9, #62b2ff);
    border-radius: 999px;
    transition: width .4s ease;
}

.mb-onboarding-pct {
    font-size: .75rem;
    font-weight: 700;
    color: var(--blue-3, #62b2ff);
    min-width: 28px;
}

/* Steps */
.mb-onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mb-onboarding-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,.05);
    transition: opacity .2s;
}

.mb-onboarding-step.is-done {
    opacity: .5;
}

.mb-onboarding-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 800;
    margin-top: 1px;
    background: rgba(98,178,255,.12);
    border: 1.5px solid rgba(98,178,255,.25);
    color: var(--blue-3, #62b2ff);
}

.mb-onboarding-step.is-done .mb-onboarding-step-num {
    background: rgba(40,167,69,.15);
    border-color: rgba(40,167,69,.4);
    color: #4caf72;
}

.mb-onboarding-step-body {
    flex: 1;
    min-width: 0;
}

.mb-onboarding-step-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.3;
}

.mb-onboarding-step.is-done .mb-onboarding-step-title {
    color: var(--muted);
}

.mb-onboarding-step-text {
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.55;
    margin: 0 0 10px;
}

@media (max-width: 600px) {
    .mb-onboarding-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .mb-onboarding-progress-track { width: 120px; }
}

/* Compat badge binaire */
.mb-compat-badge--ok {
    background: rgba(40,167,69,.85);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: .02em;
}

/* ── Compétences : grille select + sous-champs inline (profil) ─────────── */
.tlc-skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}
.tlc-skill-unit {
    display: flex;
    flex-direction: column;
    gap: 0;
}
@media (max-width: 640px) {
    .tlc-skills-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   Sections pliables sur le formulaire Profil
   ============================================================
   Utilisé pour "Description physique et mensurations" et
   "Compétences" — repliées par défaut quand vides, dépliées
   sinon. Header cliquable avec chevron qui pivote.

   Le bouton .mb-card-toggle remplace la div .mb-section-head
   pour rester accessible (ARIA expanded/controls + button
   sémantique). Aucune perte de style — on ré-applique les
   propriétés de mb-section-head pour cohérence visuelle. */

.mb-card--collapsible .mb-card-toggle {
    /* Reset du look "bouton" pour qu'il ressemble au header standard */
    -webkit-appearance: none;
    appearance: none;
    transition: opacity .15s ease;
}
.mb-card--collapsible .mb-card-toggle:hover { opacity: .85; }
.mb-card--collapsible .mb-card-toggle:focus-visible {
    outline: 2px solid rgba(98,178,255,.5);
    outline-offset: 4px;
    border-radius: 6px;
}
.mb-card--collapsible .mb-card-toggle h3 {
    /* Conserver la typo des autres section-head h3 */
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mb-text);
    margin: 0;
}
.mb-card--collapsible .mb-card-chevron {
    flex-shrink: 0;
    color: var(--mb-muted);
    transition: transform .25s ease;
}
.mb-card--collapsible .mb-card-toggle[aria-expanded="false"] .mb-card-chevron {
    transform: rotate(-90deg);
}
.mb-card--collapsible .mb-card-toggle[aria-expanded="true"] .mb-card-chevron {
    transform: rotate(0deg);
}
/* Body : fade-in propre quand on déplie */
.mb-card--collapsible .mb-card-body[hidden] { display: none !important; }
.mb-card--collapsible .mb-card-body:not([hidden]) {
    animation: tlcCardBodyFadeIn .25s ease-out;
}
@keyframes tlcCardBodyFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}