/*!
 * AcadémieCo Commerce — Public Styles v1.4.0
 *
 * Palette : pop art / neon (alignée sur /mon-academie/ de Claude-Plugin + Arène)
 * Principes Calm UX 2026 : focus-visible, prefers-reduced-motion, WCAG AA
 * Tokens unifiés --aca-* (Design System commun)
 *
 * Copyright (c) 2024-2026 Entreprises Miron & Co. All rights reserved.
 */

/* ═══════════ DESIGN TOKENS (shared ACA palette) ═══════════ */
.mcf-root,
.aca-catalog,
.aca-checkout-success {
    /* Surfaces */
    --aca-bg-deep:     #0f0f1e;
    --aca-bg-1:        #1a1a2e;
    --aca-bg-2:        #22223e;
    --aca-bg-3:        #2a2a4e;
    --aca-border:      rgba(255, 255, 255, 0.08);
    --aca-border-2:    rgba(255, 255, 255, 0.12);

    /* Neon colors */
    --aca-pink:        #e94560;
    --aca-pink-glow:   rgba(233, 69, 96, 0.4);
    --aca-blue:        #0f3460;
    --aca-blue-2:      #2a5298;
    --aca-yellow:      #f5c518;
    --aca-yellow-glow: rgba(245, 197, 24, 0.5);
    --aca-cyan:        #00d2ff;
    --aca-cyan-glow:   rgba(0, 210, 255, 0.4);
    --aca-purple:      #b44aff;
    --aca-purple-glow: rgba(180, 74, 255, 0.4);
    --aca-green:       #52d060;
    --aca-green-glow:  rgba(82, 208, 96, 0.4);

    /* Text */
    --aca-text:        #ffffff;
    --aca-text-dim:    #b0bace;
    --aca-text-muted:  #6a7490;

    /* Misc */
    --aca-radius:      16px;
    --aca-radius-sm:   10px;
    --aca-radius-pill: 999px;
    --aca-font:        'Nunito', 'Segoe UI', system-ui, sans-serif;
    --aca-motion-fast: 120ms;
    --aca-motion-base: 220ms;
}

/* Calm UX : respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mcf-root *,
    .aca-catalog *,
    .aca-checkout-success * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════ FAMILY DASHBOARD — /mon-compte-famille/ ═══════════ */
.mcf-root {
    background: var(--aca-bg-1);
    color: var(--aca-text);
    font-family: var(--aca-font);
    border-radius: var(--aca-radius);
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.mcf-root *, .mcf-root *::before, .mcf-root *::after { box-sizing: border-box; }
.mcf-root :focus-visible {
    outline: 2px solid var(--aca-cyan);
    outline-offset: 2px;
    border-radius: var(--aca-radius-sm);
}

/* Toast success */
.mcf-toast {
    background: var(--aca-green);
    color: #0a1a0a;
    padding: 14px 20px;
    font-weight: 800;
    text-align: center;
    animation: mcf-slidein 0.3s ease-out;
}
@keyframes mcf-slidein {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ─── PIN Gate ─── */
.mcf-gate {
    padding: 60px 20px;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2a1a4e 0%, #1a1a2e 50%, #0f3460 100%);
    position: relative;
    overflow: hidden;
}
.mcf-gate::before {
    content: '';
    position: absolute;
    top: -30%; right: -10%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--aca-pink-glow) 0%, transparent 60%);
    pointer-events: none;
}
.mcf-gate::after {
    content: '';
    position: absolute;
    bottom: -30%; left: -10%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--aca-cyan-glow) 0%, transparent 60%);
    pointer-events: none;
}
.mcf-gate-card {
    position: relative;
    z-index: 1;
    background: var(--aca-bg-2);
    border: 1px solid var(--aca-border-2);
    border-radius: var(--aca-radius);
    padding: 32px 28px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.mcf-gate-card-wide { max-width: 600px; }
.mcf-gate-note {
    font-size: 0.8rem;
    color: var(--aca-text-muted);
    margin: var(--aca-space-md, 16px) 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--aca-border-2);
}
.mcf-divider {
    border: none;
    border-top: 1px solid var(--aca-border-2);
    margin: 10px 0 4px;
}
.mcf-activate-form {
    text-align: left;
}
.mcf-activate-form input[type="email"],
.mcf-activate-form input[type="text"],
.mcf-activate-form select {
    padding: 10px 12px;
    background: var(--aca-bg-deep);
    border: 1px solid var(--aca-border-2);
    border-radius: var(--aca-radius-sm);
    color: var(--aca-text);
    font-size: 0.95rem;
    font-family: var(--aca-font);
    width: 100%;
}
.mcf-activate-form input:focus,
.mcf-activate-form select:focus {
    outline: none;
    border-color: var(--aca-cyan);
    box-shadow: 0 0 10px var(--aca-cyan-glow);
}
.mcf-gate-icon {
    font-size: 56px;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 20px var(--aca-yellow-glow));
}
.mcf-gate-card h2 {
    font-size: 1.4rem;
    font-weight: 900;
    margin: 0 0 10px;
    color: var(--aca-text);
}
.mcf-gate-card > p {
    color: var(--aca-text-dim);
    font-size: 0.9rem;
    margin: 0 0 20px;
}
.mcf-pin-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.mcf-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--aca-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}
.mcf-pin-form input {
    padding: 14px 16px;
    background: var(--aca-bg-deep);
    border: 2px solid var(--aca-border-2);
    border-radius: var(--aca-radius-sm);
    color: var(--aca-text);
    font-size: 1.4rem;
    font-family: var(--aca-font);
    letter-spacing: 10px;
    text-align: center;
    font-weight: 900;
    transition: border-color var(--aca-motion-fast);
}
.mcf-pin-form input:focus {
    outline: none;
    border-color: var(--aca-cyan);
    box-shadow: 0 0 15px var(--aca-cyan-glow);
}
.mcf-error {
    color: var(--aca-pink);
    font-size: 0.85rem;
    margin: 6px 0 0;
    font-weight: 700;
    background: rgba(233, 69, 96, 0.1);
    padding: 8px 12px;
    border-radius: var(--aca-radius-sm);
    border-left: 3px solid var(--aca-pink);
}

/* ─── Buttons ─── */
.mcf-btn,
.aca-catalog .button,
.aca-checkout-success .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--aca-radius-sm);
    font-family: var(--aca-font);
    font-weight: 800;
    font-size: 0.9rem;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--aca-motion-fast), box-shadow var(--aca-motion-fast), background var(--aca-motion-fast);
    text-decoration: none;
    line-height: 1.2;
}
.mcf-btn-primary,
.aca-catalog .button-primary,
.aca-checkout-success .button-primary {
    background: linear-gradient(135deg, var(--aca-pink), var(--aca-purple));
    color: #fff;
    border-color: var(--aca-pink);
    box-shadow: 0 4px 20px var(--aca-pink-glow);
}
.mcf-btn-primary:hover,
.aca-catalog .button-primary:hover,
.aca-checkout-success .button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px var(--aca-pink-glow);
    color: #fff;
}
.mcf-btn-ghost {
    background: transparent;
    color: var(--aca-text);
    border-color: var(--aca-border-2);
}
.mcf-btn-ghost:hover {
    background: var(--aca-bg-3);
    border-color: var(--aca-cyan);
    color: var(--aca-cyan);
}

/* ─── Hero ─── */
.mcf-hero {
    position: relative;
    padding: 32px 28px 40px;
    background: linear-gradient(135deg, #2a1a4e 0%, #1a1a2e 50%, #0f3460 100%);
    overflow: hidden;
}
.mcf-hero::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--aca-pink-glow) 0%, transparent 60%);
    pointer-events: none;
}
.mcf-hero::after {
    content: '';
    position: absolute;
    bottom: -40%; left: -10%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--aca-cyan-glow) 0%, transparent 60%);
    pointer-events: none;
}
.mcf-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}
.mcf-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aca-pink), var(--aca-purple));
    border: 4px solid var(--aca-yellow);
    box-shadow: 0 0 30px var(--aca-yellow-glow), inset 0 0 20px rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.mcf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcf-avatar img.mcf-avatar-placeholder-logo { object-fit: contain; padding: 14%; box-sizing: border-box; }
.mcf-avatar-fallback { text-transform: uppercase; }
.mcf-hero-name {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    color: #fff;
}
.mcf-hero-title {
    font-size: 0.82rem;
    color: var(--aca-yellow);
    font-weight: 700;
    font-style: italic;
    text-shadow: 0 0 12px var(--aca-yellow-glow);
}

/* ─── Family stats ─── */
.mcf-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 20px 28px;
    background: var(--aca-bg-deep);
    border-bottom: 1px solid var(--aca-border);
}
.mcf-stat {
    background: var(--aca-bg-2);
    border: 1px solid var(--aca-border);
    border-radius: var(--aca-radius-sm);
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
}
.mcf-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}
.mcf-stat-children::before { background: linear-gradient(90deg, var(--aca-green), var(--aca-cyan)); }
.mcf-stat-xp::before       { background: linear-gradient(90deg, var(--aca-cyan), var(--aca-blue-2)); }
.mcf-stat-pierres::before  { background: linear-gradient(90deg, var(--aca-yellow), var(--aca-pink)); }
.mcf-stat-label {
    font-size: 0.72rem;
    color: var(--aca-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 6px;
}
.mcf-stat-value {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mcf-stat-icon { font-size: 1.2rem; }

.mcf-pierres-icon {
    width: 1.4em;
    height: 1.4em;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

/* ─── Sections ─── */
.mcf-section {
    padding: 24px 28px;
    border-bottom: 1px solid var(--aca-border);
}
.mcf-section:last-child { border-bottom: none; }
.mcf-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}
.mcf-section-title {
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin: 0;
}
.mcf-section-title span {
    background: linear-gradient(90deg, var(--aca-pink), var(--aca-yellow));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ─── Empty state ─── */
.mcf-empty {
    text-align: center;
    padding: 30px 20px;
    background: var(--aca-bg-2);
    border: 2px dashed var(--aca-border-2);
    border-radius: var(--aca-radius-sm);
}
.mcf-empty-icon {
    font-size: 48px;
    margin-bottom: 8px;
}
.mcf-empty p {
    color: var(--aca-text-dim);
    margin: 0 0 12px;
}

/* ─── Child cards ─── */
.mcf-children-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.mcf-child-card {
    background: var(--aca-bg-2);
    border: 2px solid var(--aca-border);
    border-radius: var(--aca-radius);
    padding: 18px;
    transition: transform var(--aca-motion-fast), box-shadow var(--aca-motion-fast);
}
.mcf-child-card:hover {
    transform: translateY(-2px);
}
.mcf-rarity-epic {
    border-color: var(--aca-purple);
    box-shadow: 0 0 12px var(--aca-purple-glow);
}
.mcf-rarity-legendary {
    border-color: var(--aca-yellow);
    box-shadow: 0 0 15px var(--aca-yellow-glow);
}

.mcf-child-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}
.mcf-child-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aca-cyan), var(--aca-purple));
    border: 3px solid var(--aca-yellow);
    box-shadow: 0 0 12px var(--aca-yellow-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.mcf-child-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mcf-child-identity { flex: 1; min-width: 0; }
.mcf-child-identity h3 {
    margin: 0 0 3px;
    font-size: 1.1rem;
    font-weight: 900;
}
.mcf-child-grade {
    font-size: 0.78rem;
    color: var(--aca-text-muted);
}
.mcf-child-pin {
    font-size: 0.72rem;
    color: #6b7280;
    margin-top: 2px;
}
.mcf-child-pin strong {
    font-family: 'SF Mono', 'Consolas', monospace;
    letter-spacing: 0.12em;
    color: #1a1a2e;
}
.mcf-child-level {
    text-align: center;
    padding: 6px 12px;
    background: var(--aca-bg-deep);
    border-radius: var(--aca-radius-sm);
    border: 1px solid var(--aca-yellow);
    box-shadow: 0 0 10px var(--aca-yellow-glow);
}
.mcf-level-num {
    display: block;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--aca-yellow);
    line-height: 1;
}
.mcf-level-lbl {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--aca-text-muted);
    letter-spacing: 0.1em;
    margin-top: 2px;
}

/* Child stats row */
.mcf-child-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.mcf-cs-item {
    background: var(--aca-bg-deep);
    border-radius: var(--aca-radius-sm);
    padding: 10px 12px;
    position: relative;
    overflow: hidden;
}
.mcf-cs-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}
.mcf-cs-xp::before      { background: linear-gradient(90deg, var(--aca-cyan), var(--aca-blue-2)); }
.mcf-cs-pierres::before { background: linear-gradient(90deg, var(--aca-yellow), var(--aca-pink)); }
.mcf-cs-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--aca-text-muted);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.mcf-cs-label .mcf-pierres-icon { width: 12px; height: 12px; }
.mcf-cs-value {
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.mcf-xp-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}
.mcf-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--aca-cyan), var(--aca-blue-2));
    box-shadow: 0 0 6px var(--aca-cyan-glow);
    transition: width var(--aca-motion-base) ease-out;
}

/* Pass chips */
.mcf-child-passes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.mcf-pass-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--aca-radius-pill);
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--aca-bg-deep);
    color: var(--aca-text-dim);
    border: 1px solid var(--aca-border-2);
}
.mcf-pass-chip--coventure {
    background: rgba(245, 197, 24, 0.12);
    color: var(--aca-yellow);
    border-color: var(--aca-yellow);
    box-shadow: 0 0 8px var(--aca-yellow-glow);
}
.mcf-pass-chip--product {
    background: rgba(0, 210, 255, 0.12);
    color: var(--aca-cyan);
    border-color: var(--aca-cyan);
}
.mcf-pass-chip--free {
    color: var(--aca-text-muted);
}

.mcf-child-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mcf-child-actions .mcf-btn {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font-size: 0.8rem;
}

/* ─── Child parents section (v1.5.1) ─── */
.mcf-child-parents {
    margin: 14px 0 12px;
    padding: 12px;
    background: var(--aca-bg-deep);
    border-radius: var(--aca-radius-sm);
    border: 1px solid var(--aca-border);
}
.mcf-child-parents h4 {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--aca-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
}
.mcf-parents-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}
.mcf-parent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--aca-border);
}
.mcf-parent-item:last-child { border-bottom: none; }
.mcf-parent-item--primary { color: var(--aca-yellow); }
.mcf-parent-item--visitor { color: var(--aca-text-dim); }
.mcf-parent-badge { font-size: 0.9rem; }
.mcf-parent-name { flex: 1; }
.mcf-parent-name em { color: var(--aca-cyan); font-style: normal; font-size: 0.75rem; }
.mcf-parent-name small { color: var(--aca-text-muted); font-size: 0.7rem; }

.mcf-inline-form { display: inline-flex; margin: 0; padding: 0; }
.mcf-link-btn {
    background: transparent;
    border: none;
    color: var(--aca-text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color var(--aca-motion-fast), background var(--aca-motion-fast);
}
.mcf-link-btn:hover { color: var(--aca-cyan); background: rgba(0, 210, 255, 0.08); }
.mcf-link-btn-danger:hover { color: var(--aca-pink); background: rgba(233, 69, 96, 0.08); }

.mcf-btn-small {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    width: 100%;
}

/* ─── Passes list ─── */
.mcf-passes-list {
    background: var(--aca-bg-deep);
    border: 1px solid var(--aca-border);
    border-radius: var(--aca-radius-sm);
    overflow: hidden;
}
.mcf-pass-row {
    display: grid;
    grid-template-columns: 1fr 1fr 100px 100px 120px;
    gap: 12px;
    padding: 14px 16px;
    align-items: center;
    border-bottom: 1px solid var(--aca-border);
    font-size: 0.88rem;
}
.mcf-pass-row:last-child { border-bottom: none; }
.mcf-pass-cell-amount { font-weight: 900; color: var(--aca-yellow); }
.mcf-pass-cell-date { color: var(--aca-text-muted); font-size: 0.82rem; }

.mcf-status-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--aca-radius-pill);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mcf-status-chip--active    { background: rgba(82, 208, 96, 0.15); color: var(--aca-green); }
.mcf-status-chip--cancelled { background: rgba(233, 69, 96, 0.15); color: var(--aca-pink); }
.mcf-status-chip--expired   { background: var(--aca-bg-2); color: var(--aca-text-muted); }
.mcf-status-chip--pending   { background: rgba(245, 197, 24, 0.15); color: var(--aca-yellow); }
.mcf-status-chip--paused    { background: rgba(180, 74, 255, 0.15); color: var(--aca-purple); }

/* ═══════════ CATALOG — /nos-produits/ ═══════════ */
.aca-catalog {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    font-family: var(--aca-font);
    color: var(--aca-text);
    background: var(--aca-bg-1);
    border-radius: var(--aca-radius);
}
.aca-catalog * { box-sizing: border-box; }

.aca-catalog-header {
    text-align: center;
    margin-bottom: 24px;
    padding: 24px 20px;
    background: linear-gradient(135deg, #2a1a4e 0%, #1a1a2e 50%, #0f3460 100%);
    border-radius: var(--aca-radius);
    position: relative;
    overflow: hidden;
}
.aca-catalog-header::before {
    content: '';
    position: absolute;
    top: -30%; right: -10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, var(--aca-pink-glow) 0%, transparent 60%);
    pointer-events: none;
}
.aca-catalog-header h1 {
    font-size: 2rem;
    font-weight: 900;
    margin: 0 0 4px;
    position: relative;
    background: linear-gradient(90deg, var(--aca-pink), var(--aca-yellow), var(--aca-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.aca-catalog-subtitle {
    color: var(--aca-text-dim);
    margin: 0;
    position: relative;
}

.aca-catalog-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px;
    background: var(--aca-bg-2);
    border: 1px solid var(--aca-border);
    border-radius: var(--aca-radius-sm);
    margin-bottom: 24px;
}
.aca-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
    flex: 1;
}
.aca-filter-group label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--aca-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.aca-filter {
    padding: 10px 12px;
    background: var(--aca-bg-deep);
    border: 1px solid var(--aca-border-2);
    border-radius: var(--aca-radius-sm);
    color: var(--aca-text);
    font-size: 0.9rem;
    font-family: var(--aca-font);
}
.aca-filter:focus { outline: 2px solid var(--aca-cyan); outline-offset: 2px; }

.aca-product-grid { display: grid; gap: 18px; }
@media (max-width: 900px) { .aca-product-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .aca-product-grid { grid-template-columns: 1fr !important; } }

.aca-product-card {
    background: var(--aca-bg-2);
    border: 1px solid var(--aca-border);
    border-radius: var(--aca-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--aca-motion-fast), box-shadow var(--aca-motion-fast);
}
.aca-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px var(--aca-cyan-glow);
    border-color: var(--aca-cyan);
}
.aca-product-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--aca-bg-deep);
    overflow: hidden;
}
.aca-product-media img { width: 100%; height: 100%; object-fit: cover; }
.aca-product-media--placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 48px;
    background: linear-gradient(135deg, var(--aca-purple), var(--aca-cyan));
}
.aca-product-badges {
    position: absolute;
    top: 12px; left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.aca-product-badge {
    padding: 4px 10px;
    border-radius: var(--aca-radius-pill);
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #1B2A47;
    color: #fff;
    box-shadow: 0 2px 8px rgba(27,42,71,0.18);
}
.aca-product-badge--warning { background: var(--parent-accent-deep, #855B00); color: #fff; }

.aca-product-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.aca-product-body h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--aca-text);
}
.aca-product-excerpt {
    color: var(--aca-text-dim);
    font-size: 0.88rem;
    margin: 0 0 12px;
}
.aca-product-meta {
    display: flex; flex-wrap: wrap; gap: 10px;
    font-size: 0.8rem;
    color: var(--aca-text-muted);
    margin-bottom: 12px;
}
.aca-product-sessions {
    background: var(--aca-bg-deep);
    padding: 10px 12px;
    border-radius: var(--aca-radius-sm);
    font-size: 0.8rem;
    color: var(--aca-text-dim);
    margin-bottom: 12px;
}
.aca-product-sessions strong {
    display: block;
    color: var(--aca-text);
    font-size: 0.7rem;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.aca-product-price { margin: 12px 0; }
.aca-price-amount {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--aca-yellow);
    text-shadow: 0 0 12px var(--aca-yellow-glow);
}
.aca-price-free {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--aca-green);
}
.aca-product-promo { margin-bottom: 10px; }
.aca-promo-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--aca-bg-deep);
    border: 1px solid var(--aca-border-2);
    border-radius: var(--aca-radius-sm);
    color: var(--aca-text);
    font-size: 0.85rem;
    font-family: var(--aca-font);
}
.aca-promo-input:focus { outline: 2px solid var(--aca-cyan); }
.aca-promo-result { font-size: 0.82rem; margin-top: 4px; display: block; }
.aca-btn-checkout, .aca-btn-full { width: 100%; }
.aca-product-full {
    text-align: center;
    padding: 12px;
    background: rgba(233, 69, 96, 0.12);
    border: 1px solid var(--aca-pink);
    border-radius: var(--aca-radius-sm);
    color: var(--aca-pink);
    font-weight: 800;
}

.aca-catalog-empty-filter,
.aca-empty-state {
    text-align: center;
    padding: 40px 20px;
    background: var(--aca-bg-2);
    border: 2px dashed var(--aca-border-2);
    border-radius: var(--aca-radius-sm);
    color: var(--aca-text-muted);
}
.aca-empty-icon { font-size: 48px; margin-bottom: 12px; }
.aca-empty-state h3 { color: var(--aca-text); margin: 0 0 8px; }

/* ═══════════ CHECKOUT SUCCESS — /checkout/success/ ═══════════ */
.aca-checkout-success {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
    font-family: var(--aca-font);
    color: var(--aca-text);
}
.aca-checkout-success * { box-sizing: border-box; }

.aca-success-hero {
    position: relative;
    text-align: center;
    padding: 40px 24px;
    background: linear-gradient(135deg, #2a1a4e 0%, #1a1a2e 50%, #0f3460 100%);
    border-radius: var(--aca-radius);
    margin-bottom: 24px;
    overflow: hidden;
}
.aca-success-hero::before {
    content: '';
    position: absolute;
    top: -30%; right: -10%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--aca-pink-glow) 0%, transparent 60%);
    pointer-events: none;
}
.aca-success-hero::after {
    content: '';
    position: absolute;
    bottom: -30%; left: -10%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--aca-cyan-glow) 0%, transparent 60%);
    pointer-events: none;
}
.aca-success-icon {
    font-size: 72px;
    margin-bottom: 12px;
    position: relative;
    animation: aca-bounce 1s ease;
    filter: drop-shadow(0 0 30px var(--aca-yellow-glow));
}
.aca-success-hero h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    margin: 0 0 8px;
    position: relative;
}
.aca-success-subtitle {
    font-size: 1.1rem;
    color: var(--aca-yellow);
    margin: 0;
    position: relative;
    text-shadow: 0 0 12px var(--aca-yellow-glow);
}
.aca-success-subtitle strong { color: #fff; }

@keyframes aca-bounce {
    0%   { transform: scale(0.3); opacity: 0; }
    50%  { transform: scale(1.15); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

.aca-confetti {
    position: absolute;
    top: -10px;
    width: 8px; height: 14px;
    border-radius: 2px;
    animation: aca-fall linear forwards;
    pointer-events: none;
}
@keyframes aca-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
}

.aca-success-summary { margin-bottom: 24px; }
.aca-success-card {
    background: var(--aca-bg-2);
    border: 1px solid var(--aca-border);
    border-radius: var(--aca-radius);
    padding: 20px;
}
.aca-success-card h3 {
    margin: 0 0 14px;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--aca-text);
}
.aca-success-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 20px;
    margin: 0;
}
.aca-success-list dt { color: var(--aca-text-muted); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.aca-success-list dd { margin: 0; font-size: 0.9rem; color: var(--aca-text); }

/* Welcome pack */
.aca-welcome-pack {
    background: linear-gradient(135deg, rgba(245, 197, 24, 0.08), rgba(233, 69, 96, 0.08));
    border: 2px solid var(--aca-yellow);
    box-shadow: 0 0 30px var(--aca-yellow-glow);
    border-radius: var(--aca-radius);
    padding: 28px;
    margin-bottom: 24px;
}
.aca-welcome-pack-header { text-align: center; margin-bottom: 20px; }
.aca-gift-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 10px;
    animation: aca-wiggle 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px var(--aca-yellow-glow));
}
@keyframes aca-wiggle {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(5deg); }
}
.aca-welcome-pack-header h2 {
    margin: 0 0 6px;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--aca-yellow);
}
.aca-welcome-pack-header p { margin: 0; color: var(--aca-text-dim); }

.aca-welcome-stats { display: flex; justify-content: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.aca-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--aca-bg-deep);
    border: 2px solid var(--aca-border-2);
    border-radius: var(--aca-radius-pill);
}
.aca-stat-pill .aca-stat-icon { font-size: 1.4rem; }
.aca-stat-pill .aca-stat-value { font-size: 1.4rem; font-weight: 900; }
.aca-stat-pill .aca-stat-label { font-size: 0.7rem; color: var(--aca-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.aca-stat-xp { border-color: var(--aca-cyan); }
.aca-stat-xp .aca-stat-value { color: var(--aca-cyan); }
.aca-stat-pierres { border-color: var(--aca-yellow); }
.aca-stat-pierres .aca-stat-value { color: var(--aca-yellow); }

.aca-welcome-section { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--aca-border-2); }
.aca-welcome-section h4 {
    margin: 0 0 14px;
    color: var(--aca-yellow);
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
}
.aca-welcome-avatars { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.aca-avatar-item { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100px; }
.aca-avatar-item img,
.aca-avatar-placeholder {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--aca-bg-2);
    border: 2px solid var(--aca-cyan);
    box-shadow: 0 0 12px var(--aca-cyan-glow);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    object-fit: cover;
}
.aca-avatar-item img.aca-avatar-placeholder-logo {
    object-fit: contain;
    padding: 10px;
    box-sizing: border-box;
}
.aca-avatar-item span { font-size: 0.78rem; color: var(--aca-text-dim); text-align: center; }

.aca-welcome-titles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.aca-title-badge {
    padding: 6px 14px;
    background: var(--aca-bg-deep);
    border: 1px solid var(--aca-purple);
    box-shadow: 0 0 10px var(--aca-purple-glow);
    border-radius: var(--aca-radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--aca-purple);
}

/* Next steps */
.aca-next-steps h3 { text-align: center; margin: 0 0 16px; font-size: 1.3rem; font-weight: 900; color: var(--aca-text); }
.aca-next-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.aca-next-step {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 20px 14px;
    background: var(--aca-bg-2);
    border: 1px solid var(--aca-border);
    border-radius: var(--aca-radius);
    text-decoration: none;
    color: var(--aca-text);
    text-align: center;
    transition: transform var(--aca-motion-fast), box-shadow var(--aca-motion-fast), border-color var(--aca-motion-fast);
}
.aca-next-step:hover {
    transform: translateY(-3px);
    border-color: var(--aca-cyan);
    box-shadow: 0 0 15px var(--aca-cyan-glow);
    color: var(--aca-text);
    text-decoration: none;
}
.aca-step-icon { font-size: 2rem; }
.aca-next-step strong { font-size: 0.95rem; font-weight: 800; }
.aca-next-step small { color: var(--aca-text-muted); font-size: 0.75rem; }

/* ═══════════ v1.5.4 — PAGES SPÉCIALISÉES (child-space, purchases, settings) ═══════════ */
.cs-root { /* inherits from .mcf-root */ }

.cs-breadcrumb {
    padding: 12px 20px;
    font-size: 0.88rem;
}
.cs-breadcrumb a {
    color: var(--aca-cyan);
    text-decoration: none;
    font-weight: 600;
}
.cs-breadcrumb a:hover { text-decoration: underline; }

.cs-hero { padding-top: 24px; }

/* Achievements */
.cs-achievements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.cs-achievement {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--aca-bg-deep);
    border-radius: var(--aca-radius-sm);
    border: 1px solid var(--aca-border);
    transition: transform 0.15s, border-color 0.15s;
}
.cs-achievement:hover {
    transform: translateY(-2px);
    border-color: var(--aca-yellow);
}
.cs-ach-icon { font-size: 28px; }
.cs-ach-body { flex: 1; min-width: 0; }
.cs-ach-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--aca-text);
    margin-bottom: 4px;
}
.cs-ach-date {
    font-size: 0.75rem;
    color: var(--aca-text-muted);
}

/* Passes list in child-space */
.cs-passes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cs-pass-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: var(--aca-bg-deep);
    border-radius: var(--aca-radius-sm);
    border-left: 3px solid var(--aca-cyan);
}
.cs-pass-icon { font-size: 24px; }
.cs-pass-body { flex: 1; min-width: 0; }
.cs-pass-title {
    font-weight: 800;
    margin-bottom: 4px;
}
.cs-pass-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.82rem;
    color: var(--aca-text-muted);
}

/* Actions row */
.cs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Settings */
.cs-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.cs-setting-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--aca-bg-deep);
    border-radius: var(--aca-radius-sm);
}
.cs-setting-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--aca-text-muted);
    font-weight: 700;
}
.cs-setting-value {
    font-size: 0.95rem;
    color: var(--aca-text);
}
.cs-setting-value code {
    background: var(--aca-bg-2);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Notification form */
.cs-notif-form { margin-top: 4px; }
.cs-notif-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
@media (min-width: 600px) {
    .cs-notif-list { grid-template-columns: 1fr 1fr; }
}
.cs-notif-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--aca-bg-deep);
    border: 1px solid var(--aca-border-2);
    border-radius: var(--aca-radius-sm);
    cursor: pointer;
    transition: border-color 0.15s;
}
.cs-notif-item:hover { border-color: var(--aca-cyan); }
.cs-notif-item input { width: 18px; height: 18px; accent-color: var(--aca-cyan); }
.cs-notif-icon { font-size: 1.2rem; }
.cs-notif-label { flex: 1; font-size: 0.9rem; }

/* ═══════════ MODAL (ADD CHILD) ═══════════ */
.mcf-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mcf-modal[hidden] { display: none; }
.mcf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 20, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: mcf-fadein 0.2s ease-out;
}
@keyframes mcf-fadein { from { opacity: 0; } to { opacity: 1; } }
.mcf-modal-dialog {
    position: relative;
    background: var(--aca-bg-1);
    border: 1px solid var(--aca-border-2);
    border-radius: var(--aca-radius);
    padding: 28px 24px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px var(--aca-cyan-glow);
    animation: mcf-rise 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--aca-text);
    font-family: var(--aca-font);
}
@keyframes mcf-rise {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mcf-modal-close {
    position: absolute;
    top: 12px; right: 12px;
    background: transparent;
    border: none;
    color: var(--aca-text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all var(--aca-motion-fast);
}
.mcf-modal-close:hover { background: var(--aca-bg-3); color: var(--aca-text); }
.mcf-modal-header {
    text-align: center;
    margin-bottom: 20px;
}
.mcf-modal-icon {
    font-size: 48px;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 20px var(--aca-cyan-glow));
}
.mcf-modal-header h3 {
    font-size: 1.3rem;
    font-weight: 900;
    margin: 0 0 6px;
    background: linear-gradient(90deg, var(--aca-cyan), var(--aca-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mcf-modal-header p {
    color: var(--aca-text-dim);
    font-size: 0.88rem;
    margin: 0;
}
.mcf-modal-form { display: flex; flex-direction: column; gap: 14px; }
.mcf-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 500px) { .mcf-form-row { grid-template-columns: 1fr; } }
.mcf-form-field { display: flex; flex-direction: column; gap: 4px; }
.mcf-form-field input[type="text"],
.mcf-form-field input[type="date"],
.mcf-form-field select {
    padding: 10px 12px;
    background: var(--aca-bg-deep);
    border: 1px solid var(--aca-border-2);
    border-radius: var(--aca-radius-sm);
    color: var(--aca-text);
    font-size: 0.95rem;
    font-family: var(--aca-font);
}
.mcf-form-field input:focus,
.mcf-form-field select:focus {
    outline: none;
    border-color: var(--aca-cyan);
    box-shadow: 0 0 10px var(--aca-cyan-glow);
}
.mcf-form-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 10px 12px;
    background: var(--aca-bg-deep);
    border: 1px solid var(--aca-border-2);
    border-radius: var(--aca-radius-sm);
}
.mcf-form-checkbox input { width: 18px; height: 18px; accent-color: var(--aca-cyan); }
.mcf-req { color: var(--aca-pink); }
.mcf-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 10px;
}

/* ═══════════ MOBILE ═══════════ */
@media (max-width: 640px) {
    .mcf-hero { padding: 20px 16px 28px; }
    .mcf-hero-inner { flex-direction: column; text-align: center; gap: 14px; }
    .mcf-hero-name { font-size: 1.3rem; }
    .mcf-stats { grid-template-columns: 1fr; padding: 16px; }
    .mcf-section { padding: 18px 16px; }
    .mcf-pass-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px;
    }
    .aca-success-hero h1 { font-size: 1.5rem; }
    .aca-catalog-header h1 { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════
   v1.9.0 — Analytiques parent (child-space.php)
   ═══════════════════════════════════════════════════════════ */

.cs-analytics .cs-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.cs-kpi {
    background: var(--aca-bg-deep, #0f0f1a);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: var(--aca-radius-sm, 12px);
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
}
.cs-kpi-streak    { border-color: var(--aca-pink, #ff2d87); }
.cs-kpi-xp        { border-color: var(--aca-yellow, #ffd400); }
.cs-kpi-pierres   { border-color: var(--aca-cyan, #00e5ff); }
.cs-kpi-arena     { border-color: var(--aca-purple, #a855f7); }
.cs-kpi-label     { font-size: 0.78rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }
.cs-kpi-value     { font-size: 1.75rem; font-weight: 800; line-height: 1.1; margin-top: 4px; }
.cs-kpi-hint      { font-size: 0.78rem; opacity: 0.7; margin-top: 2px; }
.cs-kpi-spark     { margin-top: 6px; color: var(--aca-yellow, #ffd400); opacity: 0.9; }
.cs-sparkline     { display: block; width: 100%; height: auto; }

/* Coach messages */
.cs-coach-messages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.cs-coach-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--aca-radius-sm, 12px);
    background: rgba(255,255,255,0.04);
    border-left: 4px solid var(--aca-cyan, #00e5ff);
    font-size: 0.92rem;
}
.cs-coach-msg--success { border-left-color: var(--aca-green, #2ecc71); }
.cs-coach-msg--warning { border-left-color: var(--aca-pink, #ff2d87); }
.cs-coach-msg--info    { border-left-color: var(--aca-cyan, #00e5ff); }
.cs-coach-icon { font-size: 1.1rem; line-height: 1.3; flex-shrink: 0; }
.cs-coach-text { line-height: 1.4; }

/* Forces / Faiblesses */
.cs-sw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.cs-sw-col {
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: var(--aca-radius-sm, 12px);
    padding: 14px 16px;
}
.cs-sw-col h3 { font-size: 0.95rem; margin: 0 0 10px; }
.cs-sw-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.cs-sw-item:last-child { border-bottom: none; }
.cs-sw-label { font-weight: 600; }
.cs-sw-score { font-weight: 800; font-size: 1rem; }
.cs-sw-score--good { color: var(--aca-green, #2ecc71); }
.cs-sw-score--bad  { color: var(--aca-pink, #ff2d87); }
.cs-sw-empty { opacity: 0.6; font-size: 0.88rem; margin: 0; }

/* Erreurs constantes */
.cs-errors-block {
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: var(--aca-radius-sm, 12px);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.cs-errors-block h3 { font-size: 0.95rem; margin: 0 0 10px; }
.cs-errors-list { list-style: none; padding: 0; margin: 0; }
.cs-errors-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.cs-errors-list li:last-child { border-bottom: none; }
.cs-errors-list code {
    background: rgba(255,212,0,0.15);
    color: var(--aca-yellow, #ffd400);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
}
.cs-err-count {
    background: var(--aca-pink, #ff2d87);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
}
.cs-err-ctx { opacity: 0.6; font-size: 0.82rem; }

/* Cours + Coventures */
.cs-completions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cs-compl-col {
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: var(--aca-radius-sm, 12px);
    padding: 14px 16px;
}
.cs-compl-col h3 { font-size: 0.95rem; margin: 0 0 10px; }
.cs-compl-list { list-style: none; padding: 0; margin: 0; }
.cs-compl-list li {
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
    font-size: 0.92rem;
}
.cs-compl-list li:last-child { border-bottom: none; }
.cs-compl-list small { opacity: 0.65; }

/* Notif categories (parent-settings) */
.cs-notif-cat-title {
    margin: 18px 0 8px;
    font-size: 0.95rem;
    opacity: 0.9;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.cs-notif-cat-title:first-child { margin-top: 0; }

@media (max-width: 640px) {
    .cs-sw-grid, .cs-completions-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   v1.9.1 — Objectifs parent→enfant (child-space.php)
   ═══════════════════════════════════════════════════════════ */

.cs-goals-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.cs-goal-card {
    background: var(--aca-bg-deep, #0f0f1a);
    border: 2px solid var(--aca-yellow, #ffd400);
    border-radius: var(--aca-radius-sm, 12px);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cs-goal-head { display: flex; align-items: flex-start; gap: 10px; }
.cs-goal-icon { font-size: 1.5rem; line-height: 1; }
.cs-goal-info { flex: 1; min-width: 0; }
.cs-goal-title { font-weight: 800; font-size: 1rem; line-height: 1.2; }
.cs-goal-meta  { font-size: 0.8rem; opacity: 0.7; margin-top: 2px; }
.cs-goal-desc  { font-size: 0.88rem; margin: 0; opacity: 0.9; }
.cs-goal-progress { display: flex; flex-direction: column; gap: 4px; }
.cs-goal-bar {
    height: 10px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
}
.cs-goal-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--aca-cyan, #00e5ff), var(--aca-yellow, #ffd400));
    transition: width 0.4s ease;
}
.cs-goal-progress-txt { font-size: 0.85rem; font-weight: 700; }
.cs-goal-pct { opacity: 0.6; font-weight: 500; }
.cs-goal-reward {
    background: rgba(255,212,0,0.12);
    color: var(--aca-yellow, #ffd400);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
}
.cs-goal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mcf-btn.mcf-btn-small { font-size: 0.82rem; padding: 6px 12px; }

.cs-goals-history {
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: var(--aca-radius-sm, 12px);
    padding: 12px 16px;
    margin-top: 12px;
}
.cs-goals-history summary { cursor: pointer; font-weight: 700; }
.cs-goals-done-list { list-style: none; padding: 0; margin: 10px 0 0; }
.cs-goals-done-list li {
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
    font-size: 0.9rem;
}
.cs-goals-done-list li:last-child { border-bottom: none; }
.cs-goal-reward-done { color: var(--aca-green, #2ecc71); margin-left: 8px; font-size: 0.8rem; }

/* Modal création */
.cs-goal-modal {
    background: var(--aca-bg-deep, #0f0f1a);
    color: #fff;
    border: 2px solid var(--aca-pink, #ff2d87);
    border-radius: var(--aca-radius-md, 16px);
    padding: 24px;
    max-width: 560px;
    width: 90vw;
}
.cs-goal-modal::backdrop { background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
.cs-goal-form h3 { margin: 0 0 16px; font-size: 1.2rem; }
.cs-goal-form input[type="text"],
.cs-goal-form input[type="number"],
.cs-goal-form textarea,
.cs-goal-form select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 10px;
}
.cs-goal-form .mcf-label { display: block; margin-top: 6px; margin-bottom: 4px; font-weight: 600; font-size: 0.85rem; }
.cs-goal-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.cs-goal-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

@media (max-width: 640px) {
    .cs-goal-form-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   v1.10.0 — Confidentialité / Loi 25 (privacy.php)
   ═══════════════════════════════════════════════════════════ */

.cs-consent-renew {
    border: 2px solid var(--aca-pink, #ff2d87);
    background: rgba(255,45,135,0.06);
}
.cs-renewal-warning {
    background: rgba(255,212,0,0.1);
    border-left: 4px solid var(--aca-yellow, #ffd400);
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-weight: 600;
}
.cs-consent-form { display: flex; flex-direction: column; gap: 12px; }
.cs-consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,0.08);
    transition: border-color 0.2s;
}
.cs-consent-check:hover { border-color: var(--aca-cyan, #00e5ff); }
.cs-consent-check input[type="checkbox"] {
    width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
    accent-color: var(--aca-cyan, #00e5ff);
}
.cs-consent-check small { opacity: 0.75; font-size: 0.85rem; display: block; margin-top: 4px; }

.cs-consent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.cs-consent-table th,
.cs-consent-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cs-consent-table th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    opacity: 0.8;
}
.cs-consent-row--active   { background: rgba(46,204,113,0.05); }
.cs-consent-row--expired  { background: rgba(255,212,0,0.05); }
.cs-consent-row--revoked  { background: rgba(255,45,135,0.05); opacity: 0.7; }
.cs-consent-row--declined { opacity: 0.5; }
.cs-consent-table code {
    background: rgba(255,255,255,0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.82rem;
}

.cs-consent-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ═══════════════════════════════════════════════════════════
   v1.11.0 — Droit à l'oubli (privacy.php danger zone)
   ═══════════════════════════════════════════════════════════ */

.cs-danger-zone {
    border: 2px solid var(--aca-pink, #ff2d87);
    background: rgba(255,45,135,0.04);
}
.cs-danger-warning {
    font-weight: 700;
    font-size: 1rem;
    color: var(--aca-pink, #ff2d87);
    margin-bottom: 8px;
}
.cs-danger-list {
    list-style: none;
    padding: 12px 16px;
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: 10px;
    margin: 0 0 16px;
}
.cs-danger-list li {
    padding: 4px 0;
    font-size: 0.92rem;
}
.cs-danger-details {
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: 10px;
    padding: 16px;
    border: 1px dashed rgba(255,45,135,0.3);
}
.cs-danger-details summary {
    cursor: pointer;
    font-weight: 700;
    padding: 8px 0;
    color: var(--aca-pink, #ff2d87);
}
.cs-danger-details[open] summary { margin-bottom: 12px; }
.cs-delete-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,0.1);
}
.cs-btn-danger {
    background: var(--aca-pink, #ff2d87);
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}
.cs-btn-danger:hover {
    background: #ff1a7a;
    box-shadow: 0 4px 16px rgba(255,45,135,0.4);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   v1.11.2 — Raccourci stats sur dashboard famille
   ═══════════════════════════════════════════════════════════ */
.mcf-stats-shortcut {
    background: linear-gradient(135deg, rgba(255,212,0,0.08), rgba(0,229,255,0.08));
    border: 2px solid var(--aca-yellow, #ffd400);
}
.mcf-stats-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.mcf-stats-shortcut-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: 12px;
    border: 2px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}
.mcf-stats-shortcut-card:hover {
    border-color: var(--aca-yellow, #ffd400);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,212,0,0.25);
}
.mcf-stats-shortcut-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--aca-pink, #ff2d87);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.mcf-stats-shortcut-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mcf-stats-shortcut-body { flex: 1; min-width: 0; }
.mcf-stats-shortcut-name { font-weight: 800; font-size: 1.05rem; }
.mcf-stats-shortcut-cta {
    font-size: 0.85rem;
    color: var(--aca-yellow, #ffd400);
    margin-top: 4px;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   v1.12.0 — Deep Analytics page (child-deep-stats.php)
   ═══════════════════════════════════════════════════════════ */

.deep-root { max-width: 1100px; margin: 0 auto; padding: 20px; }
.deep-hero { margin-bottom: 20px; }

.cs-deep-cta {
    background: linear-gradient(135deg, rgba(0,229,255,0.12), rgba(168,85,247,0.12));
    border: 2px solid var(--aca-cyan, #00e5ff);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
    text-align: center;
}
.cs-deep-cta-btn { font-size: 1.05rem; padding: 12px 24px; }
.cs-deep-cta p { margin: 10px 0 0; }

.deep-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 20px;
    overflow-x: auto;
}
.deep-tab {
    flex: 1;
    min-width: 140px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    border-radius: 8px;
    white-space: nowrap;
    transition: all 0.2s;
}
.deep-tab:hover { background: rgba(255,255,255,0.06); }
.deep-tab.active {
    background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
    color: #fff;
    font-weight: 800;
}

.deep-panel { display: none; }
.deep-panel.active { display: block; animation: deep-fade 0.3s ease-out; }
@keyframes deep-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* KPI cards */
.deep-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.deep-kpi {
    background: var(--aca-bg-deep, #0f0f1a);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 14px;
}
.deep-kpi-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }
.deep-kpi-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; margin-top: 4px; }
.deep-kpi-value small { font-size: 0.65em; opacity: 0.6; }
.deep-kpi-hint { font-size: 0.72rem; opacity: 0.7; margin-top: 2px; }
.deep-kpi-trend-up    { border-color: var(--aca-green, #2ecc71); }
.deep-kpi-trend-down  { border-color: var(--aca-pink, #ff2d87); }
.deep-kpi-trend-stable{ border-color: var(--aca-cyan, #00e5ff); }

/* Charts */
.deep-chart-title {
    font-size: 1rem;
    margin: 24px 0 8px;
    font-weight: 700;
}
.deep-chart-wrap {
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: 12px;
    padding: 16px;
    overflow-x: auto;
    color: var(--aca-yellow, #ffd400);
}
.deep-chart-wrap svg { display: block; width: 100%; height: auto; max-height: 220px; }
.aca-heatmap { min-width: 800px; }
.deep-heatmap-wrap { color: var(--aca-yellow, #ffd400); }

.deep-legend {
    display: flex;
    gap: 16px;
    font-size: 0.82rem;
    opacity: 0.8;
    margin: 8px 0;
}
.deep-legend-item { display: flex; align-items: center; gap: 6px; }
.deep-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.deep-dot-off    { background: rgba(255,255,255,0.1); }
.deep-dot-light  { background: rgba(255,212,0,0.4); }
.deep-dot-strong { background: var(--aca-yellow, #ffd400); }

.deep-empty {
    background: var(--aca-bg-deep, #0f0f1a);
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    opacity: 0.75;
}

/* Par matière */
.deep-subject {
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.deep-subject-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.deep-subject-head h3 { margin: 0; font-size: 1.05rem; }
.deep-subject-attempts { font-size: 0.8rem; opacity: 0.6; }
.deep-subject-bars { display: flex; flex-direction: column; gap: 8px; }
.deep-bar-row { display: grid; grid-template-columns: 90px 1fr 60px; gap: 10px; align-items: center; }
.deep-bar-label { font-size: 0.82rem; opacity: 0.8; }
.deep-bar {
    height: 14px;
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.deep-bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s; }
.deep-bar-child { background: linear-gradient(90deg, var(--aca-cyan, #00e5ff), var(--aca-yellow, #ffd400)); }
.deep-bar-pop   { background: rgba(255,255,255,0.3); }
.deep-bar-insufficient {
    padding: 1px 10px;
    font-size: 0.78rem;
    color: var(--aca-pink, #ff2d87);
}
.deep-bar-value { font-weight: 700; font-size: 0.85rem; text-align: right; }

.deep-comparison { margin: 10px 0 0; font-size: 0.9rem; padding: 8px 12px; border-radius: 8px; }
.deep-comparison-good    { background: rgba(46,204,113,0.12); color: var(--aca-green, #2ecc71); }
.deep-comparison-bad     { background: rgba(255,45,135,0.12); color: var(--aca-pink, #ff2d87); }
.deep-comparison-neutral { background: rgba(0,229,255,0.08); color: var(--aca-cyan, #00e5ff); }

/* Difficultés */
.deep-error-card {
    background: var(--aca-bg-deep, #0f0f1a);
    border-left: 4px solid var(--aca-pink, #ff2d87);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
}
.deep-error-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.deep-error-label {
    background: rgba(255,212,0,0.15);
    color: var(--aca-yellow, #ffd400);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
}
.deep-error-count {
    background: var(--aca-pink, #ff2d87);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
}
.deep-error-ctx { opacity: 0.6; }
.deep-error-suggestion { margin: 4px 0 0; font-size: 0.9rem; opacity: 0.9; }

/* Curriculum MEQ */
.deep-meq-summary {
    background: linear-gradient(135deg, rgba(255,212,0,0.08), rgba(168,85,247,0.08));
    border: 2px solid var(--aca-yellow, #ffd400);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.deep-meq-summary h3 { margin: 0 0 12px; font-size: 1.05rem; }
.deep-meq-bar {
    height: 16px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
}
.deep-meq-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--aca-green, #2ecc71), var(--aca-yellow, #ffd400));
    transition: width 0.6s;
}
.deep-meq-tally { margin: 0; font-size: 0.9rem; }
.deep-meq-tally em { opacity: 0.6; margin-left: 4px; }

.deep-meq-subject {
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
}
.deep-meq-subject h4 { margin: 0 0 10px; font-size: 1rem; }
.deep-meq-list { list-style: none; padding: 0; margin: 0; }
.deep-meq-item {
    display: grid;
    grid-template-columns: 24px 1fr 50px;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
    font-size: 0.9rem;
}
.deep-meq-item:last-child { border-bottom: none; }
.deep-meq-item--mastered .deep-meq-label   { font-weight: 600; }
.deep-meq-item--not_started { opacity: 0.6; }
.deep-meq-score { text-align: right; font-weight: 700; font-size: 0.82rem; opacity: 0.8; }

@media (max-width: 700px) {
    .deep-tab { min-width: 110px; padding: 8px 10px; font-size: 0.85rem; }
    .deep-bar-row { grid-template-columns: 70px 1fr 50px; }
    .deep-meq-item { grid-template-columns: 20px 1fr 40px; font-size: 0.85rem; }
}
.deep-demo-banner {
    background: linear-gradient(135deg, #ff2d87, #a855f7);
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════
   v1.13.0 — Placeholder parent banner
   ═══════════════════════════════════════════════════════════ */

.mcf-placeholder-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, rgba(255,212,0,0.12), rgba(255,45,135,0.10));
    border: 2px solid var(--aca-yellow, #ffd400);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.mcf-placeholder-icon { font-size: 1.8rem; flex-shrink: 0; }
.mcf-placeholder-body { flex: 1; min-width: 0; }
.mcf-placeholder-body strong { display: block; font-size: 0.95rem; margin-bottom: 4px; }
.mcf-placeholder-body p { margin: 0; font-size: 0.85rem; opacity: 0.85; }
.mcf-placeholder-action { flex-shrink: 0; }

@media (max-width: 640px) {
    .mcf-placeholder-banner { flex-direction: column; text-align: center; gap: 10px; }
}

/* v1.13.0 — Nouveaux badges catalogue */
.aca-product-badge--onsale  { background: #2E7D43 !important; color: #fff !important; }
.aca-product-badge--preorder{ background: #314B7A !important; color: #fff !important; }
.aca-product-badge--soon    { background: var(--parent-accent-soft, #FFF4CF) !important; color: var(--parent-accent-deep, #855B00) !important; border: 1px solid rgba(27,42,71,0.14); }
@keyframes aca-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ═══════════════════════════════════════════════════════════
   v1.14.0 — Demo Landing + Demo Preview Widget
   ═══════════════════════════════════════════════════════════ */

/* Demo Landing */
.aca-demo-intro {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a0f2e 100%);
    color: #fff;
    padding: 60px 20px;
    text-align: center;
    border-radius: 0 0 40px 40px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
.aca-demo-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255,45,135,0.15), transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(0,229,255,0.12), transparent 50%);
    pointer-events: none;
}
.aca-demo-intro-inner { max-width: 860px; margin: 0 auto; position: relative; }
.aca-demo-eyebrow {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255,212,0,0.15);
    color: var(--aca-yellow, #ffd400);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.aca-demo-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1.1;
    font-weight: 900;
    margin: 0 0 16px;
    background: linear-gradient(135deg, #ffd400, #ff2d87 60%, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.aca-demo-lede {
    font-size: 1.1rem;
    max-width: 680px;
    margin: 0 auto 24px;
    opacity: 0.9;
    line-height: 1.5;
}
.aca-demo-bullets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 28px;
}
.aca-demo-bullets span {
    padding: 8px 16px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
}
.aca-demo-cta-top, .aca-demo-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.aca-demo-cta-primary {
    font-size: 1.05rem !important;
    padding: 14px 28px !important;
    box-shadow: 0 8px 32px rgba(255,45,135,0.35) !important;
}
.aca-demo-disclaimer {
    font-size: 0.82rem;
    opacity: 0.6;
    margin: 8px 0 0;
}

/* Bottom CTA */
.aca-demo-cta-bottom {
    background: linear-gradient(135deg, #ff2d87, #a855f7);
    color: #fff;
    padding: 60px 20px;
    border-radius: 40px;
    margin: 40px 20px;
    text-align: center;
}
.aca-demo-cta-inner { max-width: 720px; margin: 0 auto; }
.aca-demo-cta-inner h2 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    margin: 0 0 12px;
    font-weight: 900;
}
.aca-demo-cta-inner p { font-size: 1.1rem; margin: 0 0 24px; opacity: 0.95; }
.aca-demo-trust {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.88rem;
    opacity: 0.85;
    margin-top: 16px;
}

/* Demo Preview Widget (embeddable) */
.aca-demo-widget {
    max-width: 720px;
    margin: 24px auto;
    padding: 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, #0f0f1a, #1a0f2e);
    color: #fff;
    border: 2px solid rgba(255,212,0,0.3);
    box-shadow: 0 12px 48px rgba(0,0,0,0.4);
}
.aca-demo-widget--light {
    background: linear-gradient(135deg, #fff, #f5f5fa);
    color: #1a1a2e;
    border-color: rgba(255,45,135,0.3);
}
.aca-demo-widget-header { text-align: center; margin-bottom: 20px; }
.aca-demo-widget-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255,212,0,0.15);
    color: #ffd400;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.aca-demo-widget--light .aca-demo-widget-badge { background: rgba(255,45,135,0.1); color: #ff2d87; }
.aca-demo-widget-header h3 { font-size: 1.4rem; margin: 0 0 6px; font-weight: 900; }
.aca-demo-widget-header p { opacity: 0.8; margin: 0; font-size: 0.95rem; }

.aca-demo-widget-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.aca-demo-widget-kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
}
.aca-demo-widget--light .aca-demo-widget-kpi { background: rgba(0,0,0,0.04); }
.aca-demo-widget-kpi-icon { font-size: 1.6rem; }
.aca-demo-widget-kpi-value { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.aca-demo-widget-kpi-value small { font-size: 0.6em; opacity: 0.6; }
.aca-demo-widget-kpi-label { font-size: 0.72rem; opacity: 0.7; margin-top: 2px; }

.aca-demo-widget-chart {
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 20px;
    color: #ffd400;
}
.aca-demo-widget--light .aca-demo-widget-chart { background: rgba(255,212,0,0.08); color: #e0a800; }
.aca-demo-widget-chart-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
}
.aca-demo-widget--light .aca-demo-widget-chart-label { color: #1a1a2e; }
.aca-demo-widget-trend { color: #2ecc71; }
.aca-demo-widget-chart svg { width: 100%; height: auto; }

.aca-demo-widget-insights {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.aca-demo-widget-insight {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.9rem;
}
.aca-demo-widget-insight--good { background: rgba(46,204,113,0.12); color: #2ecc71; }
.aca-demo-widget-insight--work { background: rgba(255,45,135,0.12); color: #ff2d87; }

.aca-demo-widget-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.aca-demo-widget-btn {
    flex: 1;
    min-width: 180px;
    text-align: center;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}
.aca-demo-widget-btn-primary {
    background: linear-gradient(135deg, #ff2d87, #a855f7);
    color: #fff;
    box-shadow: 0 4px 20px rgba(255,45,135,0.3);
}
.aca-demo-widget-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,45,135,0.5); }
.aca-demo-widget-btn-ghost {
    background: transparent;
    color: inherit;
    border: 2px solid rgba(255,255,255,0.2);
}
.aca-demo-widget--light .aca-demo-widget-btn-ghost { border-color: rgba(0,0,0,0.15); }

@media (max-width: 600px) {
    .aca-demo-intro { padding: 40px 16px; border-radius: 0 0 24px 24px; }
    .aca-demo-bullets { gap: 6px; }
    .aca-demo-bullets span { padding: 6px 12px; font-size: 0.8rem; }
    .aca-demo-widget-kpis { grid-template-columns: 1fr 1fr; }
}

/* v1.22.0 — Bouton certificat dans portfolio */
.cs-ach-cert-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #ff2d87, #a855f7);
    color: #fff !important;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 6px;
    transition: transform 0.15s;
}
.cs-ach-cert-btn:hover { transform: translateY(-1px); }

/* v1.23.0 — Pause passes UI */
.cs-pass-item--paused {
    opacity: 0.85;
    border-left: 3px solid var(--aca-yellow, #ffd400);
    padding-left: 12px;
}
.cs-pass-actions details summary::-webkit-details-marker { display: none; }

/* ═══════════════════════════════════════════════════════════
   v1.33.8 — Paywall visuel Co+ (soft-gate)
   ═══════════════════════════════════════════════════════════ */

.aca-coplus-locked {
    position: relative;
    overflow: hidden;
}
.aca-coplus-locked > .aca-coplus-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,26,46,0.92), rgba(42,26,78,0.92));
    backdrop-filter: blur(3px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    border-radius: inherit;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
}
.aca-coplus-locked > .aca-coplus-overlay:hover {
    background: linear-gradient(135deg, rgba(42,26,78,0.95), rgba(15,52,96,0.95));
}
.aca-coplus-lock-icon {
    font-size: 32px;
    margin-bottom: 8px;
}
.aca-coplus-lock-title {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
    background: linear-gradient(90deg, #ffd400, #ff2d87);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.aca-coplus-lock-sub {
    font-size: 0.78rem;
    opacity: 0.85;
    line-height: 1.3;
    max-width: 240px;
}
.aca-coplus-lock-cta {
    margin-top: 12px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #ff2d87, #a855f7);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
}

/* Petit badge Co+ à poser inline sur les liens verrouillés */
.aca-coplus-badge {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, #ff2d87, #a855f7);
    color: #fff !important;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 6px;
    vertical-align: middle;
}

/* ═════════════════════════════════════════════════════════════
 * v1.35.0 — School / Group accounts (préfixe .sch-*)
 * ═════════════════════════════════════════════════════════════ */
.sch-root {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 40px;
    color: #1a1a2e;
}
.sch-empty {
    text-align: center;
    padding: 48px 20px;
    background: #fff;
    border-radius: var(--aca-radius-sm, 12px);
}
.sch-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #1B2A47;
    color: #fff;
    padding: 32px 28px;
    margin-bottom: 18px;
    box-shadow: 0 10px 28px rgba(27,42,71,0.12);
}
/* ⛔ MIGRATION FINIE, PAS UN CHOIX DE COULEUR. La MEME bande a la l. 3212 de
   ce fichier utilise deja `var(--parent-accent, #FFB612)`. Deux copies du
   meme element portaient donc deux dores differents : #D8A953 ici, #FFB612
   la-bas. `--parent-accent` vaut #FFB612 dans les 4 feuilles du greffon,
   mesure le 2026-08-24, et le Gerant ACA a nomme #D8A953 « historique ».
   Le repli garde la valeur canonique, jamais l'ancienne. */
.sch-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #C32136 0 33.33%, #DF5F35 33.33% 66.66%, var(--parent-accent, #FFB612) 66.66% 100%); }
.sch-hero-inner { position: relative; z-index: 2; }
.sch-hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.sch-hero-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    margin: 0 0 8px;
    font-weight: 900;
    color: #fff;
}
.sch-hero-stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 0.95rem;
    opacity: 0.95;
}
.sch-school-switcher {
    margin-top: 16px;
}
.sch-school-switcher select {
    background: rgba(255,255,255,0.9);
    color: #1a1a2e;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 700;
}

.sch-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(168,85,247,0.15);
}
.sch-tab {
    padding: 10px 18px;
    text-decoration: none;
    color: #1a1a2e;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    transition: background 0.2s;
}
.sch-tab:hover { background: rgba(168,85,247,0.08); }
.sch-tab--active {
    background: var(--aca-pink, #ff2d87);
    color: #fff;
}

.sch-panel {
    background: #fff;
    padding: 22px;
    border-radius: var(--aca-radius-sm, 12px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.sch-notice {
    background: #eefbf2;
    border-left: 4px solid var(--aca-green, #2ecc71);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-weight: 600;
}
.sch-notice--error {
    background: #fbeaec;
    border-left-color: #C32136;
}

.sch-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.sch-metric {
    background: linear-gradient(135deg, #fff 0%, #fafbff 100%);
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    text-align: center;
}
.sch-metric-lbl {
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.65;
    letter-spacing: 0.03em;
}
.sch-metric-val {
    font-size: 1.6rem;
    font-weight: 800;
    margin-top: 4px;
    color: var(--aca-purple, #a855f7);
}

.sch-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}
.sch-table th, .sch-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.sch-table th {
    background: rgba(168,85,247,0.06);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sch-seat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.sch-seat {
    background: #fff;
    border: 2px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    padding: 14px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.sch-seat:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.sch-seat-id {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.5;
}
.sch-seat-name {
    font-weight: 700;
    margin-top: 4px;
}
.sch-seat--vacant {
    opacity: 0.55;
    border-style: dashed;
    background: #fafafa;
}
.sch-seat--pending {
    border-color: var(--aca-yellow, #ffd400);
    background: #fffdf0;
}
.sch-seat--assigned {
    border-color: var(--aca-green, #2ecc71);
    background: #f3fff7;
}

.sch-invite-form textarea {
    width: 100%;
    min-height: 160px;
    padding: 10px;
    border: 2px solid rgba(168,85,247,0.2);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    margin: 10px 0;
}
.sch-invite-form textarea:focus {
    border-color: var(--aca-pink, #ff2d87);
    outline: none;
}

.sch-claim-form label {
    display: block;
    margin: 10px 0 4px;
    font-weight: 600;
}
.sch-claim-form input,
.sch-claim-form select {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(27,42,71,0.14);
    border-radius: 8px;
    font-size: 1rem;
    background: #fff;
}

.sch-btn {
    display: inline-block;
    padding: 14px 28px;
    background: #314B7A;
    color: #fff !important;
    text-decoration: none;
    border: 1.5px solid transparent;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    font-size: 1rem;
    margin-top: 12px;
}
.sch-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27,42,71,0.22); }
.sch-btn--outline {
    background: transparent;
    color: #1B2A47 !important;
    border: 1.5px solid rgba(27,42,71,0.2);
}

.sch-settings > div {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

@media (max-width: 640px) {
    .sch-hero { padding: 22px 18px; }
    .sch-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .sch-tab { white-space: nowrap; }
}

/* ═══════════ v1.36.0 — Events + Calendar ═══════════ */
.evt-root {
    --aca-bg-deep: #0f0f1a;
    --aca-pink: #ff2d87;
    --aca-cyan: #00e5ff;
    --aca-yellow: #ffd400;
    --aca-purple: #a855f7;
    --aca-green: #2ecc71;
    font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
    color: #1e1e2d;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.evt-root *, .evt-root *::before, .evt-root *::after { box-sizing: border-box; }

.evt-hero {
    background: linear-gradient(135deg, var(--aca-pink), var(--aca-purple));
    color: #fff;
    padding: 40px 28px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 28px;
    box-shadow: 0 12px 40px rgba(255, 45, 135, 0.25);
}
.evt-hero h1 { font-size: 2.2rem; margin: 0 0 10px; font-weight: 900; }
.evt-hero p { font-size: 1.08rem; margin: 0; opacity: 0.95; }

.evt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    justify-content: center;
}
.evt-filter {
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.1);
    color: var(--aca-purple);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    transition: all 0.2s;
}
.evt-filter:hover { background: var(--aca-purple); color: #fff; }
.evt-filter.is-active { background: var(--aca-pink); color: #fff; }

.evt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.evt-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
}
.evt-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,0.12); border-color: var(--aca-cyan); }
.evt-card--full { opacity: 0.75; }
.evt-card--waitlist { border-color: var(--aca-yellow); }

.evt-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-color: var(--aca-bg-deep);
}
.evt-card-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: linear-gradient(135deg, var(--aca-cyan), var(--aca-purple));
    color: #fff;
}
.evt-card-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.evt-card-body h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.evt-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.85rem; color: #555; margin: 0; }
.evt-card-desc { font-size: 0.9rem; color: #666; line-height: 1.4; margin: 0; }

.evt-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.12);
    color: var(--aca-cyan);
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: 4px;
}
.evt-badge--waitlist { background: rgba(255, 212, 0, 0.18); color: #a88a00; }
.evt-badge--free { background: rgba(46, 204, 113, 0.15); color: var(--aca-green); }
.evt-badge--price { background: rgba(255, 45, 135, 0.12); color: var(--aca-pink); }

.evt-cta {
    display: inline-block;
    padding: 12px 22px;
    background: linear-gradient(135deg, var(--aca-pink), var(--aca-purple));
    color: #fff;
    border: 0;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(255, 45, 135, 0.3);
    transition: transform 0.15s;
}
.evt-cta:hover { transform: translateY(-2px); color: #fff; }

.evt-cta-secondary {
    display: inline-block;
    padding: 8px 14px;
    background: rgba(168, 85, 247, 0.1);
    color: var(--aca-purple);
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.88rem;
    margin: 2px;
}
.evt-cta-secondary:hover { background: var(--aca-purple); color: #fff; }

.evt-empty { text-align: center; padding: 50px 20px; background: #fff; border-radius: 12px; opacity: 0.75; }

/* ─── Single event ─── */
.evt-single-hero {
    background: linear-gradient(135deg, var(--aca-bg-deep), #1a1a2e);
    color: #fff;
    padding: 36px 28px;
    border-radius: 16px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.evt-single-banner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: 0;
}
.evt-single-hero h1,
.evt-single-hero p,
.evt-countdown { position: relative; z-index: 1; }
.evt-single-hero h1 { margin: 0 0 8px; font-size: 2rem; font-weight: 900; }
.evt-single-meta { font-size: 1rem; opacity: 0.9; margin: 0 0 14px; }

.evt-countdown {
    display: inline-block;
    padding: 10px 18px;
    background: rgba(255, 212, 0, 0.2);
    color: var(--aca-yellow);
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.95rem;
}

.evt-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 28px;
    align-items: start;
}

.evt-single-body {
    background: #fff;
    padding: 28px;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    line-height: 1.6;
}
.evt-single-body h3 { color: var(--aca-pink); margin-top: 28px; }
.evt-recording { margin-top: 24px; padding: 18px; background: rgba(0, 229, 255, 0.08); border-radius: 10px; }
.evt-participants ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.evt-participants li { padding: 6px 12px; background: rgba(168, 85, 247, 0.08); border-radius: 6px; font-size: 0.9rem; }

.evt-single-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 20px;
}
.evt-box {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.evt-box--registered { border: 2px solid var(--aca-green); }
.evt-box--info ul { list-style: none; padding: 0; margin: 10px 0 0; }
.evt-box--info li { padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 0.92rem; }
.evt-box--info li:last-child { border-bottom: 0; }

.evt-register-form label { display: block; margin-bottom: 12px; font-size: 0.9rem; font-weight: 700; }
.evt-register-form select,
.evt-register-form input[type="text"] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-top: 6px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 0.95rem;
}
.evt-register-form button { width: 100%; margin-top: 8px; }

.evt-calendar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

/* ─── My events ─── */
.evt-my h1 { font-size: 1.9rem; margin-bottom: 18px; }
.evt-my-feed {
    background: rgba(0, 229, 255, 0.08);
    padding: 16px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid var(--aca-cyan);
}
.evt-feed-url {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.85rem;
    margin-top: 8px;
    background: #fff;
}

.evt-my-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid rgba(0,0,0,0.08);
    margin-bottom: 20px;
}
.evt-my-tab {
    padding: 10px 16px;
    color: #555;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 0.95rem;
}
.evt-my-tab:hover { color: var(--aca-pink); }
.evt-my-tab.is-active { color: var(--aca-pink); border-bottom-color: var(--aca-pink); }

.evt-my-list { display: flex; flex-direction: column; gap: 10px; }
.evt-my-empty { padding: 30px; text-align: center; opacity: 0.7; background: #fff; border-radius: 10px; }
.evt-my-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 16px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 10px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border-left: 4px solid var(--aca-cyan);
}
.evt-my-item--waitlisted { border-left-color: var(--aca-yellow); }
.evt-my-item--cancelled { border-left-color: #ccc; opacity: 0.7; }
.evt-my-item--attended { border-left-color: var(--aca-green); }
.evt-my-date { text-align: center; }
.evt-my-date strong { display: block; font-size: 1.3rem; color: var(--aca-pink); font-weight: 900; }
.evt-my-date small { font-size: 0.72rem; opacity: 0.7; }
.evt-my-content h3 { margin: 0 0 4px; font-size: 1.05rem; }
.evt-my-content h3 a { color: inherit; text-decoration: none; }
.evt-my-content h3 a:hover { color: var(--aca-pink); }
.evt-my-content p { margin: 0; font-size: 0.85rem; color: #666; }
.evt-my-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.12);
    color: var(--aca-purple);
    font-size: 0.75rem;
    font-weight: 700;
}
.evt-my-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

@media (max-width: 800px) {
    .evt-single-layout { grid-template-columns: 1fr; }
    .evt-single-sidebar { position: static; }
    .evt-my-item { grid-template-columns: 60px 1fr; }
    .evt-my-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.38.0 — Parent Portal (/parent/ login + activation magic-link)
 * ═══════════════════════════════════════════════════════════════════ */
.pp-root {
    max-width: 560px;
    margin: 2rem auto;
    padding: 0 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1a1a2e;
}
.pp-hero {
    position: relative;
    text-align: center;
    padding: 32px 20px 28px;
    margin-bottom: 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #2a1a4e 55%, #0f3460 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.pp-hero-bg {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(circle at 15% 25%, rgba(255,45,135,0.35), transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(0,229,255,0.28), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(168,85,247,0.22), transparent 55%);
    opacity: 0.95;
}
.pp-hero-title {
    margin: 0 0 8px;
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    background: linear-gradient(90deg, var(--aca-pink), var(--aca-yellow), var(--aca-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pp-hero-icon {
    display: inline-block;
    margin-right: 6px;
    -webkit-text-fill-color: initial;
    background: none;
}
.pp-hero-sub { margin: 0; font-size: 0.98rem; opacity: 0.88; }
.pp-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 10px 40px rgba(26, 26, 46, 0.08), 0 2px 8px rgba(26, 26, 46, 0.04);
    border: 1px solid rgba(26, 26, 46, 0.06);
}
.pp-alert {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.92rem;
    margin-bottom: 14px;
    line-height: 1.45;
}
.pp-alert-error { background: #fde8ef; color: #8c1a1a; border-left: 3px solid var(--aca-pink); }
.pp-alert-info  { background: #e7f5ff; color: #0c4a6e; border-left: 3px solid var(--aca-cyan); }

.pp-form { display: flex; flex-direction: column; gap: 10px; }
.pp-form-inline { margin-top: 10px; }
.pp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.pp-form-field { display: flex; flex-direction: column; gap: 6px; }
.pp-label {
    font-weight: 700;
    font-size: 0.86rem;
    color: #2a1a4e;
    letter-spacing: 0.01em;
}
.pp-req { color: var(--aca-pink); }
.pp-input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid rgba(26, 26, 46, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    background: #fafbfc;
    color: #1a1a2e;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    font-family: inherit;
    box-sizing: border-box;
}
.pp-input:focus {
    outline: none;
    border-color: var(--aca-pink);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 45, 135, 0.15);
}
.pp-help { margin: 0; font-size: 0.8rem; color: #6a7490; line-height: 1.4; }

.pp-btn {
    display: inline-block;
    padding: 13px 22px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: inherit;
    text-align: center;
    transition: transform 0.12s, box-shadow 0.18s, filter 0.18s;
    margin-top: 6px;
}
.pp-btn:focus-visible { outline: 3px solid var(--aca-cyan); outline-offset: 2px; }
.pp-btn-primary {
    background: linear-gradient(135deg, var(--aca-pink), var(--aca-purple));
    color: #fff;
    box-shadow: 0 6px 20px rgba(255, 45, 135, 0.3);
}
.pp-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.pp-btn-secondary {
    background: rgba(0, 229, 255, 0.12);
    color: #0c4a6e;
    border: 1px solid rgba(0, 229, 255, 0.4);
}
.pp-btn-ghost {
    background: transparent;
    color: #6a7490;
    border: 1px solid rgba(26, 26, 46, 0.14);
    margin-left: 8px;
}
.pp-btn-ghost:hover { background: rgba(26, 26, 46, 0.03); }

.pp-forgot { margin: 16px 0 0; padding: 10px 0; border-top: 1px dashed rgba(26, 26, 46, 0.1); }
.pp-forgot summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--aca-purple);
    font-weight: 600;
    padding: 4px 0;
}
.pp-forgot summary:hover { color: var(--aca-pink); }

.pp-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #fafbfc;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #4a4a5e;
    margin: 6px 0 4px;
    border: 1px solid rgba(26, 26, 46, 0.06);
}
.pp-checkbox input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.pp-checkbox a { color: var(--aca-pink); }

.pp-note {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: #fff8e1;
    border-left: 3px solid var(--aca-yellow);
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #5a4a00;
}
.pp-note-small { font-size: 0.8rem; margin-top: 10px; background: none; border-left: none; padding: 2px 0; color: #6a7490; }
.pp-note a { color: var(--aca-pink); font-weight: 600; }

.pp-redirect { text-align: center; padding: 24px; font-size: 1rem; color: var(--aca-green); }

@media (max-width: 540px) {
    .pp-form-row { grid-template-columns: 1fr; }
    .pp-hero-title { font-size: 1.55rem; }
    .pp-card { padding: 22px 18px; border-radius: 16px; }
    .pp-btn-ghost { margin-left: 0; margin-top: 4px; display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-btn, .pp-input { transition: none; }
    .pp-btn-primary:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.39.0 — Parent Onboarding (foundation)
   Prefix : .po-* — pop-art / neon, mobile-first.
   Rendered by ACA_Parent_Onboarding::render_onboarding_form() inside
   /mon-compte-famille/ when a child account has not yet been onboarded as parent.
   ═══════════════════════════════════════════════════════════════════════════ */

.po-root {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px;
    color: #1B2A47;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    letter-spacing: -0.011em;
}

.po-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 36px 20px 30px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #1B2A47;
    color: #fff;
}
.po-hero::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, #C32136 0 33.33%, #DF5F35 33.33% 66.66%, var(--parent-accent, #FFB612) 66.66% 100%);
}
.po-hero-badge {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 8px;
}
.po-hero-title {
    margin: 0 0 6px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #fff;
}
.po-hero-sub {
    margin: 0 auto;
    max-width: 52ch;
    color: rgba(244,245,247,0.82);
    font-size: 0.98rem;
    line-height: 1.5;
}

.po-card {
    background: #FFFFFF;
    border: 1px solid rgba(27,42,71,0.14);
    border-radius: 14px;
    padding: 24px 22px;
    box-shadow: 0 10px 28px rgba(27,42,71,0.06);
}

.po-section-title {
    margin: 20px 0 8px;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #314B7A;
}
.po-section-title:first-child { margin-top: 0; }

.po-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.po-form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.po-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1B2A47;
}
.po-req { color: #C32136; }

.po-input {
    width: 100%;
    padding: 11px 13px;
    border-radius: 8px;
    border: 1px solid rgba(27,42,71,0.14);
    background: #FFFFFF;
    color: #1B2A47;
    font-size: 1rem;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
}
.po-input:focus {
    outline: none;
    border-color: #314B7A;
    box-shadow: 0 0 0 3px rgba(168,127,47,0.22);
}
select.po-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(27,42,71,0.55) 50%), linear-gradient(135deg, rgba(27,42,71,0.55) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }

.po-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.po-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(27,42,71,0.14);
    border-radius: 8px;
    background: #F4F5F7;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
}
.po-radio:hover { border-color: #314B7A; }
.po-radio input[type="radio"] {
    margin-top: 3px;
    accent-color: #314B7A;
}
.po-radio-body { display: flex; flex-direction: column; gap: 2px; }
.po-radio-body strong { font-size: 0.96rem; color: #1B2A47; }
.po-radio-body em { font-style: normal; font-size: 0.84rem; color: rgba(27,42,71,0.6); }

.po-email-custom { display: none; margin-top: 4px; }

.po-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 18px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid rgba(27,42,71,0.14);
    border-left: 4px solid #314B7A;
    font-size: 0.92rem;
    color: #1B2A47;
    line-height: 1.45;
}
.po-checkbox input[type="checkbox"] {
    margin-top: 3px;
    accent-color: #314B7A;
    flex-shrink: 0;
}
.po-checkbox a { color: #314B7A; text-decoration: underline; }

.po-help {
    margin: -2px 0 8px;
    font-size: 0.86rem;
    color: rgba(27,42,71,0.6);
}

.po-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.18s;
    text-decoration: none;
}
.po-btn-primary {
    width: 100%;
    background: #314B7A;
    color: #fff;
}
.po-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27,42,71,0.22); }

.po-fineprint {
    margin: 12px 0 0;
    font-size: 0.82rem;
    text-align: center;
    color: rgba(27,42,71,0.5);
}

.po-alert {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 0.95rem;
}
.po-alert-error {
    background: rgba(255,45,135,0.12);
    border: 1px solid rgba(255,45,135,0.38);
    color: #ffd9e8;
}

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

@media (max-width: 600px) {
    .po-form-row { grid-template-columns: 1fr; }
    .po-hero-title { font-size: 1.4rem; }
    .po-card { padding: 18px 14px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .po-btn, .po-input, .po-radio { transition: none; }
    .po-btn-primary:hover { transform: none; }
}

/* ───────────────────────── v1.40.0 ───────────────────────── */

/* Parent login — citation inspirante */
.pp-quote-card {
    max-width: 720px;
    margin: 0 auto 24px;
    padding: 28px 32px;
    border-radius: var(--aca-radius-sm, 12px);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(0, 229, 255, 0.06) 100%);
    border: 1px solid rgba(255, 45, 135, 0.25);
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.08), 0 12px 40px rgba(0, 0, 0, 0.18);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pp-quote-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 45, 135, 0.18), transparent);
    mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    border-radius: inherit;
    opacity: 0.6;
}
.pp-quote-brand { margin-bottom: 14px; }
.pp-quote-logo { max-height: 36px; width: auto; opacity: 0.95; }
.pp-quote-wordmark {
    display: inline-block;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--aca-pink, #ff2d87), var(--aca-cyan, #00e5ff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pp-quote-text {
    margin: 0 0 12px;
    padding: 0;
    font-size: 1.18rem;
    font-style: italic;
    line-height: 1.55;
    font-weight: 500;
    color: inherit;
}
.pp-quote-mark {
    display: inline-block;
    margin-right: 4px;
    font-size: 1.6em;
    line-height: 0;
    vertical-align: -0.35em;
    color: var(--aca-pink, #ff2d87);
    font-style: normal;
}
.pp-quote-author {
    display: block;
    font-size: 0.92rem;
    font-style: normal;
    opacity: 0.78;
    letter-spacing: 0.02em;
}
@media (max-width: 640px) {
    .pp-quote-card { padding: 22px 18px; margin-bottom: 18px; }
    .pp-quote-text { font-size: 1.04rem; }
}

/* Events catalog — vue liste (v1.40.0 atts support) */
.evt-grid--list { grid-template-columns: 1fr !important; }
.evt-grid--list .evt-card { display: flex; gap: 16px; align-items: stretch; }
.evt-grid--list .evt-card-img { flex: 0 0 220px; min-height: 140px; }
.evt-grid--list .evt-card-body { flex: 1 1 auto; }
@media (max-width: 640px) {
    .evt-grid--list .evt-card { flex-direction: column; }
    .evt-grid--list .evt-card-img { flex: 0 0 auto; }
}

/* Child Space — embed academy stats wrapper (v1.40.0) */
.cs-academy-stats {
    margin: 24px 0;
    padding: 20px;
    border-radius: var(--aca-radius-sm, 12px);
    background: var(--aca-bg-deep, #0f0f1a);
    border: 1px solid rgba(0, 229, 255, 0.18);
}
.cs-academy-stats > h3 {
    margin: 0 0 14px;
    font-size: 1.05rem;
    color: var(--aca-cyan, #00e5ff);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Family multi-child switcher (v1.40.0 — kill switch UI) */
.fam-switcher {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 14px;
    background: var(--aca-bg-deep, #0f0f1a);
    border-radius: var(--aca-radius-sm, 12px);
    border: 1px solid rgba(168, 85, 247, 0.22);
    overflow-x: auto;
    scrollbar-width: thin;
}
.fam-switcher-list {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
    overflow-x: auto;
}
.fam-switcher-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none;
    color: inherit;
    font-size: 0.92rem;
    white-space: nowrap;
    transition: border-color 0.15s, transform 0.15s;
    cursor: pointer;
}
.fam-switcher-card:hover { border-color: var(--aca-cyan, #00e5ff); transform: translateY(-1px); }
.fam-switcher-card--active {
    border-color: var(--aca-pink, #ff2d87);
    background: linear-gradient(90deg, rgba(255, 45, 135, 0.15), rgba(0, 229, 255, 0.08));
    box-shadow: 0 0 0 1px rgba(255, 45, 135, 0.4);
}
.fam-switcher-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--aca-purple, #a855f7);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; color: #fff;
    overflow: hidden;
}
.fam-switcher-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fam-switcher-add {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px dashed rgba(0, 229, 255, 0.5);
    background: transparent;
    color: var(--aca-cyan, #00e5ff);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.15s;
}
.fam-switcher-add:hover { background: rgba(0, 229, 255, 0.08); }
.fam-add-modal { border: none; border-radius: var(--aca-radius-sm, 12px); padding: 0; max-width: 480px; width: 92%; }
.fam-add-modal::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); }
.fam-add-form { padding: 24px; background: var(--aca-bg-deep, #0f0f1a); color: #fff; }
.fam-add-form h3 { margin: 0 0 14px; }
.fam-add-form label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: 0.9rem; }
.fam-add-form input[type=text], .fam-add-form input[type=email] {
    width: 100%; padding: 10px 12px; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04); color: #fff;
}
.fam-add-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ───────────────────────── v1.41.0 ───────────────────────── */
/* v1.41.0 — Immersif Pré-vente Cohorte 0 Pionnier */

.imm-preorder-wrap {
    max-width: 1180px;
    margin: 32px auto;
    padding: 0 16px;
    color: #1a1a2e;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.imm-pioneer-banner {
    background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
    color: #fff;
    padding: 14px 22px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 24px;
    font-size: 15px;
    box-shadow: 0 6px 18px rgba(255, 45, 135, 0.25);
}
.imm-pioneer-banner--regular {
    background: #1a1a2e;
}

.imm-checkout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 36px;
}

.imm-card {
    background: #fff;
    border: 2px solid #e8eaf2;
    border-radius: 16px;
    padding: 28px 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 14px rgba(15, 15, 26, 0.04);
}
.imm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(15, 15, 26, 0.10);
}

.imm-card--recommended {
    border-color: var(--aca-pink, #ff2d87);
    background: linear-gradient(180deg, #fff 0%, #fff8fb 100%);
    box-shadow: 0 8px 24px rgba(255, 45, 135, 0.18);
}

.imm-card-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.imm-card-title {
    font-size: 18px;
    font-weight: 800;
    margin: 6px 0 14px;
    color: #1a1a2e;
}

.imm-card-price {
    font-size: 36px;
    font-weight: 900;
    color: #1a1a2e;
    margin-bottom: 18px;
    line-height: 1;
}
.imm-card-price-suffix {
    font-size: 14px;
    font-weight: 600;
    color: #6a7490;
    margin-left: 4px;
}

.imm-card-features {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    flex: 1;
}
.imm-card-features li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f1f6;
    font-size: 14px;
    color: #1a1a2e;
}
.imm-card-features li:last-child { border-bottom: 0; }

.imm-card-cta {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
    color: #fff;
    border: 0;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: filter 0.15s ease;
    text-align: center;
    text-decoration: none;
}
.imm-card-cta:hover { filter: brightness(1.08); }

.imm-policies {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 12px;
}
.imm-policy {
    background: #fafbfc;
    border: 1px solid #e8eaf2;
    border-radius: 12px;
    padding: 22px 18px;
    text-align: center;
}
.imm-policy-icon {
    font-size: 32px;
    margin-bottom: 8px;
}
.imm-policy h4 {
    margin: 4px 0 8px;
    font-size: 15px;
    color: #1a1a2e;
    font-weight: 800;
}
.imm-policy p {
    margin: 0;
    font-size: 13px;
    color: #4a4a5e;
    line-height: 1.5;
}

@media (max-width: 880px) {
    .imm-checkout-grid,
    .imm-policies {
        grid-template-columns: 1fr;
    }
    .imm-card-price { font-size: 30px; }
}

/* ───────────────────────── v1.42.0 ───────────────────────── */
/* v1.42.0 — Immersif 2 formats (online + hybride) */

.imm-formats-title {
    text-align: center;
    margin: 24px 0 18px;
    font-size: 24px;
    color: var(--aca-bg-deep, #0f0f1a);
}

.imm-formats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.imm-format-card {
    position: relative;
    background: #fff;
    border: 2px solid #e8eaf2;
    border-radius: var(--aca-radius-sm, 12px);
    padding: 28px 24px;
    box-shadow: 0 4px 14px rgba(15, 15, 26, 0.06);
    transition: transform 0.18s, box-shadow 0.18s;
}

.imm-format-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15, 15, 26, 0.12);
}

.imm-format-card--online {
    border-color: var(--aca-cyan, #00e5ff);
}

.imm-format-card--hybride {
    border-color: var(--aca-pink, #ff2d87);
}

.imm-format-card--recommended {
    background: linear-gradient(180deg, #fff 0%, #fff5fa 100%);
    box-shadow: 0 8px 22px rgba(255, 45, 135, 0.18);
}

.imm-format-badge {
    position: absolute;
    top: -12px;
    right: 18px;
    background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
    color: #fff;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.imm-format-card h3 {
    margin: 0 0 10px;
    font-size: 22px;
    color: var(--aca-bg-deep, #0f0f1a);
}

.imm-format-tag {
    margin: 0 0 14px;
    font-size: 13px;
    color: #6a7490;
    font-weight: 600;
}

.imm-format-price {
    font-size: 32px;
    font-weight: 900;
    margin: 6px 0 4px;
    color: var(--aca-pink, #ff2d87);
    line-height: 1;
}

.imm-format-card--online .imm-format-price {
    color: var(--aca-cyan, #00e5ff);
}

.imm-format-price-strike {
    margin: 0 0 8px;
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
}

.imm-format-total {
    font-size: 15px;
    font-weight: 700;
    color: var(--aca-bg-deep, #0f0f1a);
    margin: 4px 0 10px;
}

.imm-format-installments {
    font-size: 13px;
    color: #6a7490;
    margin: 0 0 8px;
    font-style: italic;
}

.imm-format-counter {
    background: #fff7e6;
    border: 1px solid #ffd400;
    padding: 8px 12px;
    border-radius: 8px;
    margin: 10px 0 12px;
    font-size: 13px;
    color: #7a4a00;
}

.imm-format-features {
    list-style: none;
    padding: 0;
    margin: 14px 0 18px;
    font-size: 14px;
    color: #1a1a2e;
}

.imm-format-features li {
    padding: 6px 0;
    border-bottom: 1px solid #f0f1f6;
}

.imm-format-features li:last-child { border-bottom: 0; }

.imm-mode-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #d0d3df;
    margin-bottom: 12px;
    font-size: 14px;
    background: #fff;
}

.imm-format-cta {
    display: block;
    width: 100%;
    padding: 14px 22px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    transition: filter 0.15s, transform 0.15s;
}

.imm-format-card--online .imm-format-cta {
    background: linear-gradient(135deg, var(--aca-cyan, #00e5ff), var(--aca-purple, #a855f7));
}

.imm-format-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

.imm-format-form { margin: 0; }

@media (max-width: 880px) {
    .imm-formats-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .imm-format-price { font-size: 28px; }
    .imm-format-card { padding: 22px 18px; }
}

/* ============================================================
   v1.42.1 — Pass Selection Grid (.psg-*)
   Cards rendered by ACA_Signup_Pass_Grant::render_pass_cards_html()
   Embedded in wizard signup step 4 (Plugin) + admin previews.
   ============================================================ */
.psg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 20px 0;
}
.psg-grid--with-skip {
    grid-template-columns: repeat(2, 1fr);
}
.psg-grid--compact { gap: 12px; }

.psg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: var(--aca-radius-sm, 12px);
    padding: 22px 20px 20px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    overflow: hidden;
}
.psg-card:hover { border-color: var(--aca-purple, #a855f7); box-shadow: 0 4px 18px rgba(168, 85, 247, 0.10); transform: translateY(-1px); }
.psg-card:focus-within { outline: 3px solid rgba(255, 45, 135, 0.25); outline-offset: 2px; }

.psg-card.is-checked,
.psg-card:has(input.psg-card-radio:checked) {
    border-color: var(--aca-pink, #ff2d87);
    box-shadow: 0 4px 22px rgba(255, 45, 135, 0.18);
    background: linear-gradient(180deg, #fff 0%, #fff5fa 100%);
}

.psg-card--recommended { border-color: var(--aca-pink, #ff2d87); }

.psg-card-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}

.psg-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(255, 45, 135, 0.25);
}

.psg-card-beta {
    display: inline-block;
    background: var(--aca-yellow, #ffd400);
    color: #1a1a2e;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.psg-card-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 900;
    color: #1a1a2e;
    letter-spacing: -0.01em;
}
.psg-card-tagline {
    margin: 0 0 10px;
    font-size: 13px;
    color: #6a7490;
    line-height: 1.4;
}
.psg-card-price {
    font-size: 26px;
    font-weight: 900;
    color: var(--aca-pink, #ff2d87);
    margin: 8px 0 12px;
    line-height: 1.1;
}
.psg-card-desc {
    font-size: 13px;
    color: #4a4a5e;
    line-height: 1.55;
    margin: 0 0 14px;
}
.psg-card-features {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    flex: 1;
}
.psg-card-features li {
    position: relative;
    padding: 4px 0 4px 22px;
    font-size: 13px;
    color: #1a1a2e;
    line-height: 1.5;
}
.psg-card-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--aca-green, #2ecc71);
    font-weight: 900;
}

.psg-card-cta {
    display: inline-block;
    margin-top: auto;
    padding: 10px 16px;
    background: #f4f5fa;
    color: #4a4a5e;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.psg-card.is-checked .psg-card-cta,
.psg-card:has(input.psg-card-radio:checked) .psg-card-cta {
    background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
    color: #ffffff;
}

.psg-card--skip {
    border-style: dashed;
    background: #fafbfc;
}
.psg-card--skip .psg-card-title { font-size: 18px; }
.psg-card--skip .psg-card-price { display: none; }

.psg-fallback {
    background: #fff8e6;
    border: 1px solid #ffd400;
    border-radius: 10px;
    padding: 14px 16px;
    color: #1a1a2e;
}

@media (max-width: 720px) {
    .psg-grid,
    .psg-grid--with-skip { grid-template-columns: 1fr; }
    .psg-card-title { font-size: 20px; }
    .psg-card-price { font-size: 24px; }
}

/* ============================================================
   v1.43.0 — H5P Teaser Co+
   Affiché aux users Co qui rencontrent une reco H5P gatée.
   ============================================================ */
.aca-h5p-teaser {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--aca-bg-deep, #0f0f1a), #1a1a2e);
    border: 2px solid var(--aca-pink, #ff2d87);
    border-radius: var(--aca-radius-sm, 12px);
    margin: 16px 0;
    color: #fff;
    box-shadow: 0 0 24px rgba(255, 45, 135, 0.18);
}
.aca-h5p-teaser-icon {
    font-size: 36px;
    line-height: 1;
    flex-shrink: 0;
}
.aca-h5p-teaser-body { flex: 1 1 auto; }
.aca-h5p-teaser-title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--aca-yellow, #ffd400);
}
.aca-h5p-teaser-desc {
    margin: 0 0 12px;
    font-size: 0.95rem;
    line-height: 1.45;
    opacity: 0.92;
}
.aca-h5p-teaser-cta {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--aca-pink, #ff2d87), var(--aca-purple, #a855f7));
    color: #fff !important;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: transform .15s ease;
}
.aca-h5p-teaser-cta:hover { transform: translateY(-1px); }

@media (max-width: 540px) {
    .aca-h5p-teaser { flex-direction: column; align-items: stretch; }
    .aca-h5p-teaser-icon { font-size: 28px; }
}

/* ─────────────────────────────────────────────────────────────────
 * v1.50.0 — Mirror tabs zone parent (.fam-tabs-*)
 * Nav unifiée en haut de chaque page /mon-compte-famille/.
 * NASApunk Light : papier + navy + bande tricolore, sticky, mobile scroll, lock icon.
 * ────────────────────────────────────────────────────────────────*/
.fam-tabs {
    position: sticky;
    top: 32px; /* WP admin bar offset; ajusté côté JS si needed */
    z-index: 50;
    background: #FFFFFF;
    border: 1px solid rgba(27,42,71,0.14);
    border-radius: 14px;
    padding: 10px 10px 8px;
    margin: 0 0 24px;
    box-shadow: 0 10px 28px rgba(27,42,71,0.06);
}
.fam-tabs::before { /* bande tricolore signature NASApunk */
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, #C32136 0 33.33%, #DF5F35 33.33% 66.66%, var(--parent-accent, #FFB612) 66.66% 100%);
}
.fam-tabs-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.fam-tabs-list::-webkit-scrollbar { height: 4px; }
.fam-tabs-list::-webkit-scrollbar-thumb {
    background: rgba(27,42,71,0.2);
    border-radius: 4px;
}
.fam-tab-item { flex: 0 0 auto; }
.fam-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 8px;
    color: rgba(27,42,71,0.72);
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
    border: 1px solid transparent;
}
.fam-tab:hover {
    background: #F4F5F7;
    color: #1B2A47;
    transform: translateY(-1px);
}
.fam-tab:focus-visible {
    outline: 2px solid var(--parent-accent-deep, #855B00);
    outline-offset: 2px;
    border-radius: 8px;
}
.fam-tab.is-active {
    background: #314B7A;
    color: #fff;
    box-shadow: 0 6px 16px rgba(27,42,71,0.22);
    border-color: #314B7A;
}
.fam-tab.is-active:hover { transform: none; color: #fff; }
.fam-tab.is-locked {
    color: rgba(27,42,71,0.5);
    cursor: pointer;
    position: relative;
}
.fam-tab.is-locked .fam-tab-label {
    text-decoration: line-through;
    text-decoration-color: rgba(168,127,47,0.6);
    text-decoration-thickness: 1px;
}
.fam-tab.is-locked:hover {
    background: var(--parent-accent-soft, #FFF4CF);
    color: var(--parent-accent-deep, #855B00);
}
.fam-tab-icon { font-size: 16px; }
.fam-tab-label { font-size: 13px; letter-spacing: 0.01em; }
.fam-tab-lock {
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.85;
}

/* Loading state — set by JS during AJAX swap */
body.fam-tabs-loading .mcf-root {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity .15s ease;
}
body.fam-tabs-loading .fam-tabs::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #C32136, #DF5F35, var(--parent-accent, #FFB612));
    background-size: 200% 100%;
    animation: famTabsLoad 1.2s linear infinite;
}
@keyframes famTabsLoad {
    0% { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}

/* Mobile — un peu plus compact */
@media (max-width: 720px) {
    .fam-tabs { padding: 8px 6px 6px; margin: 0 0 16px; top: 0; }
    .fam-tab { padding: 9px 13px; font-size: 13px; }
    .fam-tab-label { font-size: 12px; }
    .fam-tab-icon { font-size: 15px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fam-tab, body.fam-tabs-loading .mcf-root { transition: none; }
    body.fam-tabs-loading .fam-tabs::after { animation: none; }
}

/* ===================================================================
 * v2.0.39 - Inline signup wizard (.ais-*) - NASApunk Light
 * Onboarding non-membre, config par contexte (accent par produit via --ais-accent).
 * Papier + navy + bande tricolore signature (rouge/orange/or). Self-scope .ais-wizard.
 * =================================================================== */
.ais-wizard {
    --ais-accent: #314B7A;   /* navy par defaut, override inline par contexte */
    --ais-accent-2: #1B2A47;
    --ais-ink: #1B2A47;
    --ais-paper: #F4F5F7;
    --ais-white: #FFFFFF;
    --ais-line: rgba(27,42,71,0.14);
    --ais-line-soft: rgba(27,42,71,0.08);
    --ais-dim: rgba(27,42,71,0.72);
    --ais-muted: rgba(27,42,71,0.5);
    --ais-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --ais-disp: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    color: var(--ais-ink);
    letter-spacing: -0.011em;
}
.ais-wizard * { -webkit-font-smoothing: antialiased; }

/* Hero = panneau navy + bande tricolore signature */
.ais-hero {
    position: relative;
    text-align: center;
    padding: 40px 22px 30px;
    margin: 0 0 26px;
    background: var(--ais-ink);
    color: #fff;
    border-radius: 14px;
    overflow: hidden;
}
.ais-hero::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, #C32136 0 33.33%, #DF5F35 33.33% 66.66%, var(--parent-accent, #FFB612) 66.66% 100%);
}
.ais-hero-emoji { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.ais-hero-title {
    margin: 0 0 10px;
    font-family: var(--ais-disp);
    font-size: 26px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.12;
    color: #fff;
}
.ais-hero-sub {
    margin: 0 auto; max-width: 54ch;
    font-size: 15px; line-height: 1.6;
    color: rgba(244,245,247,0.82);
}

.ais-error {
    background: #fbeaec;
    border: 1px solid #C32136;
    color: #7a1521;
    padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; font-size: 14px;
}

.ais-form { display: block; }
.ais-step {
    position: relative;
    border: 1px solid var(--ais-line);
    border-radius: 12px;
    padding: 24px 22px;
    margin: 0 0 16px;
    background: var(--ais-white);
    box-shadow: 0 10px 28px rgba(27,42,71,0.06);
}
/* Legend = etiquette HUD mono + numero telemetrie */
.ais-legend {
    display: inline-flex; align-items: center; gap: 12px;
    margin: 0 0 18px;
    font-family: var(--ais-mono);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ais-accent);
}
.ais-step-num {
    background: var(--ais-accent);
    color: #fff;
    width: 26px; height: 26px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--ais-mono); font-size: 13px; font-weight: 700;
}

.ais-row { display: flex; gap: 12px; }
.ais-row-2 > .ais-field { flex: 1 1 0; }
.ais-field { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; }
.ais-field-half { max-width: 240px; }
.ais-field > span { font-size: 13px; font-weight: 600; color: var(--ais-ink); }
.ais-field > span small { color: var(--ais-muted); font-weight: 400; }
.ais-field input[type="text"],
.ais-field input[type="email"],
.ais-field input[type="password"],
.ais-field select {
    padding: 11px 13px;
    border: 1px solid var(--ais-line);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: var(--ais-white);
    color: var(--ais-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    box-sizing: border-box;
}
.ais-field input:focus,
.ais-field select:focus {
    outline: none;
    border-color: var(--ais-accent);
    box-shadow: 0 0 0 3px rgba(168,127,47,0.22);
}

.ais-field-checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    padding: 12px 14px;
    background: var(--ais-paper);
    border: 1px solid var(--ais-line);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.45;
}
.ais-field-checkbox input { margin: 2px 0 0; accent-color: var(--ais-accent); }
.ais-field-checkbox span { flex: 1; }
.ais-consent { background: var(--ais-white); border: 1px solid var(--ais-line); border-left: 4px solid var(--ais-accent); }
.ais-consent a { color: var(--ais-accent); font-weight: 600; }

.ais-features { list-style: none; margin: 0 0 16px; padding: 0; }
.ais-features li {
    padding: 9px 2px;
    font-size: 14px;
    color: var(--ais-ink);
    border-bottom: 1px solid var(--ais-line-soft);
}
.ais-features li:last-child { border-bottom: none; }

.ais-submit-row { text-align: center; margin: 24px 0 12px; }
.ais-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    font-family: var(--ais-disp);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.ais-btn-primary { background: var(--ais-accent); color: #fff; }
.ais-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27,42,71,0.22); }
.ais-btn-ghost { background: transparent; color: var(--ais-ink); border-color: var(--ais-line); }
.ais-btn-ghost:hover { border-color: var(--ais-accent); color: var(--ais-accent); }
.ais-btn-large { padding: 16px 34px; font-size: 16px; }

.ais-login-toggle { text-align: center; margin: 0 0 18px; }
.ais-login-link { text-align: center; font-size: 13px; color: var(--ais-muted); margin: 16px 0 0; }
.ais-login-link a { color: var(--ais-accent); font-weight: 600; }

.ais-already {
    position: relative;
    overflow: hidden;
    max-width: 520px;
    margin: 32px auto;
    text-align: center;
    padding: 34px 24px 30px;
    background: var(--ais-white);
    border: 1px solid var(--ais-line);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(27,42,71,0.06);
}
.ais-already::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #C32136 0 33.33%, #DF5F35 33.33% 66.66%, var(--parent-accent, #FFB612) 66.66% 100%);
}
.ais-already-title {
    font-family: var(--ais-disp);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin: 0 0 12px;
    color: var(--ais-ink);
}

@media (max-width: 600px) {
    .ais-wizard { padding: 16px 12px; }
    .ais-hero { padding: 32px 18px 26px; }
    .ais-hero-title { font-size: 22px; }
    .ais-hero-sub { font-size: 14px; }
    .ais-row { flex-direction: column; gap: 0; }
    .ais-step { padding: 18px 16px; }
    .ais-btn-large { padding: 14px 24px; font-size: 15px; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ais-btn:hover, .ais-btn-primary:hover { transform: none; }
}

/* ═══════════ v1.54.0 — Fix global <option> blanc-sur-blanc ═══════════
   Bug : sur certains OS / navigateurs (notamment Safari/Chrome en dark mode
   ou quand un <select> hérite d'un parent à fond foncé), les <option> du
   menu déroulant natif héritent color:white sur background:white → invisibles.
   Fix : forcer un contraste lisible globalement. Affecte tous les selects
   (rôles parent père/mère/tuteur, niveaux scolaires, formulaires école/event).
*/
option {
    background-color: #fff !important;
    color: #1a1a2e !important;
}
option:checked,
option:hover {
    background-color: #f4f5f7 !important;
    color: #1a1a2e !important;
}
option:disabled {
    color: #9aa0ae !important;
}

/* ═══════════════════════════════════════════════════════════
   Product Discovery Engine — v1.75.0
   Dashboard recommendation cards + Co+ nudge banner
   ═══════════════════════════════════════════════════════════ */
.mcf-discovery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.mcf-discovery-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(27,42,71,0.14);
    text-decoration: none;
    color: #1B2A47;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(27,42,71,0.06);
}
.mcf-discovery-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--disc-c1, #314B7A);
}
.mcf-discovery-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(27,42,71,0.12);
}
.mcf-discovery-icon {
    font-size: 1.8rem;
    line-height: 1;
}
.mcf-discovery-title {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #1B2A47;
}
.mcf-discovery-reason {
    font-size: 0.82rem;
    color: rgba(27,42,71,0.72);
    line-height: 1.4;
    margin: 0;
}
.mcf-discovery-cta {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--disc-c1, #314B7A);
    margin-top: auto;
}
.mcf-coplus-nudge {
    margin: 14px 0 18px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(27,42,71,0.14);
    border-left: 4px solid #314B7A;
    padding: 16px 18px;
}
.mcf-coplus-nudge-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.mcf-coplus-nudge-icon {
    font-size: 2rem;
    flex-shrink: 0;
}
.mcf-coplus-nudge-body {
    flex: 1;
    min-width: 200px;
}
.mcf-coplus-nudge-body strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 4px;
    color: #1B2A47;
}
.mcf-coplus-nudge-body p {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(27,42,71,0.72);
    line-height: 1.4;
}
/* Catalogue product badge (smart) */
.aca-product-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
}
@media (max-width: 600px) {
    .mcf-discovery-grid { grid-template-columns: 1fr; }
    .mcf-coplus-nudge-inner { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.79.0 — PARENT HYBRID THEME (LEGACY — kept for sub-pages)
 * Dark header/nav + light content. Superseded by .mcf-bento v1.83.0
 * on the main dashboard, but still used by stats/portfolio/settings.
 * ═══════════════════════════════════════════════════════════════════ */
.mcf-root.mcf-hybrid {
    --ph-dark: #0f0f1a;
    --ph-dark-2: #181830;
    --ph-dark-3: #1e1e3a;
    --ph-bg: #f3f4f6;
    --ph-bg-card: #ffffff;
    --ph-border: #e5e7eb;
    --ph-text: #1a1a2e;
    --ph-text-dim: #6b7280;
    --ph-text-muted: #9ca3af;
    --ph-text-light: rgba(255,255,255,0.95);
    --ph-text-light-dim: rgba(255,255,255,0.6);
    --ph-accent: #4f46e5;
    --ph-accent-light: rgba(79, 70, 229, 0.08);
    --ph-pink: #ff2d87;
    --ph-cyan: #00e5ff;
    --ph-green: #059669;
    --ph-green-light: rgba(5, 150, 105, 0.08);
    --ph-red: #dc2626;
    --ph-red-light: rgba(220, 38, 38, 0.08);
    --ph-yellow: #d97706;
    --ph-yellow-light: rgba(217, 119, 6, 0.08);
    --ph-radius: 12px;
    --ph-radius-sm: 8px;
    --ph-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    background: var(--ph-bg);
    color: var(--ph-text);
    font-family: var(--ph-font);
    border-radius: var(--ph-radius);
    overflow: hidden;
}

/* ─── Focus ─── */
.mcf-hybrid :focus-visible {
    outline: 2px solid var(--ph-accent);
    outline-offset: 2px;
}

/* ─── Notices / Toasts ─── */
.mcf-hybrid .mcf-notice {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-radius: var(--ph-radius-sm); font-size: 0.9rem; margin: 0 20px 8px;
    animation: phSlideDown 0.3s ease;
}
@keyframes phSlideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.mcf-hybrid .mcf-notice--success { background: var(--ph-green-light); color: var(--ph-green); border: 1px solid rgba(5,150,105,0.15); }
.mcf-hybrid .mcf-notice--info    { background: var(--ph-accent-light); color: var(--ph-accent); border: 1px solid rgba(79,70,229,0.15); }
.mcf-hybrid .mcf-notice--warn    { background: var(--ph-yellow-light); color: var(--ph-yellow); border: 1px solid rgba(217,119,6,0.15); }
.mcf-hybrid .mcf-notice--error   { background: var(--ph-red-light); color: var(--ph-red); border: 1px solid rgba(220,38,38,0.15); }
.mcf-hybrid .mcf-notice-icon { font-size: 1.1rem; flex-shrink: 0; }
.mcf-hybrid .mcf-notice div { flex: 1; }
.mcf-hybrid .mcf-notice strong { display: block; font-weight: 600; }
.mcf-hybrid .mcf-notice span { font-size: 0.82rem; opacity: 0.85; }

/* ─── Gates (PIN, onboarding) ─── */
.mcf-hybrid .mcf-gate { display: flex; justify-content: center; padding: 60px 20px; }
.mcf-hybrid .mcf-gate-card { background: var(--ph-bg-card); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); padding: 36px 32px; max-width: 440px; width: 100%; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.mcf-hybrid .mcf-gate-card-wide { max-width: 560px; }
.mcf-hybrid .mcf-gate h2 { font-size: 1.3rem; font-weight: 700; color: var(--ph-text); margin: 0 0 8px; }
.mcf-hybrid .mcf-gate p { color: var(--ph-text-dim); font-size: 0.9rem; margin: 0 0 20px; line-height: 1.5; }
.mcf-hybrid .mcf-gate-note { font-size: 0.8rem; color: var(--ph-text-muted); margin: 12px 0 0; }

/* ─── Forms inside gates ─── */
.mcf-hybrid .mcf-pin-form { display: flex; flex-direction: column; gap: 10px; }
.mcf-hybrid .mcf-label { font-size: 0.85rem; font-weight: 500; color: var(--ph-text); margin-bottom: 2px; }
.mcf-hybrid .mcf-req { color: var(--ph-red); }
.mcf-hybrid .mcf-hint { font-size: 0.8rem; color: var(--ph-text-muted); line-height: 1.4; }
.mcf-hybrid .mcf-divider { border: none; border-top: 1px solid var(--ph-border); margin: 8px 0; }
.mcf-hybrid .mcf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mcf-hybrid .mcf-form-field { display: flex; flex-direction: column; gap: 4px; }
.mcf-hybrid .mcf-form-checkbox label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.mcf-hybrid .mcf-error { color: var(--ph-red); font-size: 0.85rem; margin: 8px 0 0; }

.mcf-hybrid input[type="text"],
.mcf-hybrid input[type="email"],
.mcf-hybrid input[type="tel"],
.mcf-hybrid input[type="password"],
.mcf-hybrid input[type="number"],
.mcf-hybrid input[type="date"],
.mcf-hybrid select {
    height: 38px; padding: 6px 12px; font-size: 0.9rem; font-family: var(--ph-font);
    border: 1px solid var(--ph-border); border-radius: var(--ph-radius-sm);
    background: var(--ph-bg-card); color: var(--ph-text);
    transition: border 0.2s, box-shadow 0.2s; outline: none; width: 100%;
}
.mcf-hybrid input:focus, .mcf-hybrid select:focus {
    border-color: var(--ph-accent); box-shadow: 0 0 0 3px var(--ph-accent-light);
}

/* ─── Buttons ─── */
.mcf-hybrid .mcf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 18px; font-size: 0.875rem; font-weight: 600; font-family: var(--ph-font);
    border-radius: var(--ph-radius-sm); border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; }
.mcf-hybrid .mcf-btn-primary { background: var(--ph-accent); color: #fff; }
.mcf-hybrid .mcf-btn-primary:hover { background: #4338ca; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(79,70,229,0.3); }
.mcf-hybrid .mcf-btn-ghost { background: transparent; color: var(--ph-accent); border: 1px solid var(--ph-border); }
.mcf-hybrid .mcf-btn-ghost:hover { background: var(--ph-accent-light); border-color: var(--ph-accent); }
.mcf-hybrid .mcf-btn-sm { padding: 5px 12px; font-size: 0.8rem; }
.mcf-hybrid .mcf-badge-coplus { background: linear-gradient(135deg, var(--ph-pink), #a855f7); color: #fff; font-size: 0.65rem; padding: 1px 6px; border-radius: 10px; font-weight: 700; vertical-align: middle; }

/* ═══════════════════════════════════════════════════
   HEADER BAR — Dark gradient (top section)
   ═══════════════════════════════════════════════════ */
.mcf-hybrid .mcf-header-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--ph-dark) 0%, var(--ph-dark-2) 50%, var(--ph-dark-3) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mcf-hybrid .mcf-header-user { display: flex; align-items: center; gap: 14px; }
.mcf-hybrid .mcf-header-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.15); flex-shrink: 0; }
.mcf-hybrid .mcf-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mcf-hybrid .mcf-header-avatar span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--ph-pink), #a855f7); color: #fff; font-size: 1.4rem; font-weight: 700; }
.mcf-hybrid .mcf-header-name { font-size: 1.25rem; font-weight: 700; color: var(--ph-text-light); margin: 0; }
.mcf-hybrid .mcf-header-sub { font-size: 0.82rem; color: var(--ph-text-light-dim); margin-top: 2px; }

.mcf-hybrid .mcf-header-stats { display: flex; gap: 24px; }
.mcf-hybrid .mcf-header-stat { display: flex; flex-direction: column; align-items: center; }
.mcf-hybrid .mcf-header-stat-val { font-size: 1.3rem; font-weight: 700; color: var(--ph-text-light); line-height: 1; }
.mcf-hybrid .mcf-header-stat-lbl { font-size: 0.7rem; color: var(--ph-text-light-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

/* ═══════════════════════════════════════════════════
   TABS NAV — Dark continuation of header
   ═══════════════════════════════════════════════════ */
.mcf-hybrid .mcf-tabs-nav,
.mcf-hybrid .family-tabs-nav {
    background: var(--ph-dark);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mcf-hybrid .mcf-tabs-nav a,
.mcf-hybrid .family-tabs-nav a {
    color: var(--ph-text-light-dim);
}
.mcf-hybrid .mcf-tabs-nav a.active,
.mcf-hybrid .family-tabs-nav a.active,
.mcf-hybrid .mcf-tabs-nav a[aria-current="page"],
.mcf-hybrid .family-tabs-nav a[aria-current="page"] {
    color: var(--ph-text-light);
    border-bottom-color: var(--ph-pink);
}

/* ═══════════════════════════════════════════════════
   SECTIONS — Light content area
   ═══════════════════════════════════════════════════ */
.mcf-hybrid .mcf-section {
    padding: 20px 24px;
}
.mcf-hybrid .mcf-section + .mcf-section {
    border-top: 1px solid var(--ph-border);
}
.mcf-hybrid .mcf-section-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
}
.mcf-hybrid .mcf-section-title {
    font-size: 1rem; font-weight: 700; color: var(--ph-text); margin: 0;
    letter-spacing: -0.01em;
}
.mcf-hybrid .mcf-empty { text-align: center; padding: 32px 16px; }
.mcf-hybrid .mcf-empty p { color: var(--ph-text-dim); font-size: 0.9rem; }

/* ═══════════════════════════════════════════════════
   CHILDREN CARDS — Compact, colored accent tops
   ═══════════════════════════════════════════════════ */
.mcf-hybrid .mcf-children-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.mcf-hybrid .mcf-child-card {
    background: var(--ph-bg-card); border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius); overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
}
.mcf-hybrid .mcf-child-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--ph-pink), var(--ph-cyan));
}
.mcf-hybrid .mcf-child-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px);
}
.mcf-hybrid .mcf-child-header {
    display: flex; align-items: center; gap: 10px; padding: 14px 14px 8px;
}
.mcf-hybrid .mcf-child-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--ph-border); }
.mcf-hybrid .mcf-child-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mcf-hybrid .mcf-child-avatar span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--ph-cyan), var(--ph-accent)); color: #fff; font-weight: 700; font-size: 1rem; }
.mcf-hybrid .mcf-child-identity { flex: 1; min-width: 0; }
.mcf-hybrid .mcf-child-identity h3 { font-size: 0.95rem; font-weight: 700; color: var(--ph-text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcf-hybrid .mcf-child-grade { font-size: 0.75rem; color: var(--ph-text-dim); }
.mcf-hybrid .mcf-child-pin { font-size: 0.72rem; color: var(--ph-text-dim); margin-top: 2px; }
.mcf-hybrid .mcf-child-pin strong { font-family: 'SF Mono', 'Consolas', monospace; letter-spacing: 0.12em; color: var(--ph-text); }
.mcf-hybrid .mcf-child-level { display: flex; flex-direction: column; align-items: center; background: var(--ph-accent-light); border-radius: var(--ph-radius-sm); padding: 4px 8px; }
.mcf-hybrid .mcf-level-num { font-size: 1.1rem; font-weight: 800; color: var(--ph-accent); line-height: 1; }
.mcf-hybrid .mcf-level-lbl { font-size: 0.6rem; text-transform: uppercase; color: var(--ph-accent); letter-spacing: 0.05em; }

/* Child stats */
.mcf-hybrid .mcf-child-stats { display: flex; gap: 12px; padding: 4px 14px 8px; }
.mcf-hybrid .mcf-cs-item { flex: 1; }
.mcf-hybrid .mcf-cs-label { font-size: 0.65rem; text-transform: uppercase; color: var(--ph-text-muted); letter-spacing: 0.04em; }
.mcf-hybrid .mcf-cs-value { font-size: 0.85rem; font-weight: 700; color: var(--ph-text); display: block; }
.mcf-hybrid .mcf-xp-bar { height: 3px; background: var(--ph-border); border-radius: 2px; margin-top: 3px; }
.mcf-hybrid .mcf-xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--ph-accent), var(--ph-cyan)); border-radius: 2px; transition: width 0.5s; }

/* Pass chips */
.mcf-hybrid .mcf-child-passes { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 14px 8px; }
.mcf-hybrid .mcf-pass-chip { padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; }
.mcf-hybrid .mcf-pass-chip--coventure { background: rgba(168,85,247,0.1); color: #7c3aed; }
.mcf-hybrid .mcf-pass-chip--product { background: rgba(255,45,135,0.1); color: #e0257a; }
.mcf-hybrid .mcf-pass-chip--free { background: rgba(107,114,128,0.08); color: var(--ph-text-dim); }

/* Goals on child cards */
.mcf-hybrid .mcf-child-goals { padding: 0 14px 8px; display: flex; flex-direction: column; gap: 6px; }
.mcf-hybrid .mcf-goal-row { display: grid; grid-template-columns: 1fr auto 60px; gap: 6px; align-items: center; }
.mcf-hybrid .mcf-goal-label { font-size: 0.75rem; color: var(--ph-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcf-hybrid .mcf-goal-pct { font-size: 0.7rem; font-weight: 700; color: var(--ph-accent); }
.mcf-hybrid .mcf-goal-bar { height: 3px; background: var(--ph-border); border-radius: 2px; }
.mcf-hybrid .mcf-goal-bar-fill { height: 100%; background: var(--ph-accent); border-radius: 2px; transition: width 0.5s; }

/* Child card actions */
.mcf-hybrid .mcf-child-actions { display: flex; gap: 6px; padding: 8px 14px 14px; border-top: 1px solid var(--ph-border); margin-top: 4px; }

/* ═══════════════════════════════════════════════════
   QUICK ACTIONS GRID — Compact tiles
   ═══════════════════════════════════════════════════ */
.mcf-hybrid .mcf-quick-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
}
.mcf-hybrid .mcf-quick-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 16px; background: var(--ph-bg-card); border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-sm); text-decoration: none; transition: all 0.2s;
}
.mcf-hybrid .mcf-quick-item:hover { border-color: var(--ph-accent); background: var(--ph-accent-light); transform: translateY(-1px); }
.mcf-hybrid .mcf-quick-item strong { font-size: 0.85rem; font-weight: 600; color: var(--ph-text); }
.mcf-hybrid .mcf-quick-item small { font-size: 0.72rem; color: var(--ph-text-dim); }

/* ═══════════════════════════════════════════════════
   PASSES LIST — Compact table
   ═══════════════════════════════════════════════════ */
.mcf-hybrid .mcf-passes-list { display: flex; flex-direction: column; gap: 2px; }
.mcf-hybrid .mcf-pass-row {
    display: grid; grid-template-columns: 1fr 1fr auto auto auto; gap: 8px; align-items: center;
    padding: 10px 14px; background: var(--ph-bg-card); border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-sm); font-size: 0.85rem;
}
.mcf-hybrid .mcf-pass-row strong { font-weight: 600; color: var(--ph-text); }
.mcf-hybrid .mcf-pass-row span { color: var(--ph-text-dim); }
.mcf-hybrid .mcf-pass-amount { font-weight: 600; color: var(--ph-text); }
.mcf-hybrid .mcf-pass-date { font-size: 0.78rem; color: var(--ph-text-muted); }
.mcf-hybrid .mcf-status-chip { padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; }
.mcf-hybrid .mcf-status-chip--active { background: var(--ph-green-light); color: var(--ph-green); }
.mcf-hybrid .mcf-status-chip--cancelled { background: var(--ph-red-light); color: var(--ph-red); }
.mcf-hybrid .mcf-status-chip--expired { background: rgba(107,114,128,0.08); color: var(--ph-text-dim); }

/* ═══════════════════════════════════════════════════
   COLLAPSIBLES — Referral, Events
   ═══════════════════════════════════════════════════ */
.mcf-hybrid .mcf-collapsible { border: none; }
.mcf-hybrid .mcf-collapsible-trigger {
    cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
    user-select: none; padding: 0;
}
.mcf-hybrid .mcf-collapsible-trigger::before {
    content: '\25B8'; font-size: 0.7rem; color: var(--ph-text-muted); transition: transform 0.2s; flex-shrink: 0;
}
.mcf-hybrid .mcf-collapsible[open] > .mcf-collapsible-trigger::before { transform: rotate(90deg); }
.mcf-hybrid .mcf-collapsible-trigger::-webkit-details-marker { display: none; }
.mcf-hybrid .mcf-collapsible-meta { margin-left: auto; font-size: 0.75rem; font-weight: 500; color: var(--ph-text-muted); }
.mcf-hybrid .mcf-collapsible-body { padding: 12px 0 0 16px; }

/* Referral */
.mcf-hybrid .mcf-ref-copy { display: flex; gap: 8px; align-items: center; }
.mcf-hybrid .mcf-ref-input {
    flex: 1; height: 36px; padding: 0 10px; font-size: 0.8rem;
    border: 1px solid var(--ph-border); border-radius: var(--ph-radius-sm);
    background: var(--ph-bg); color: var(--ph-text); cursor: text;
}
.mcf-hybrid .mcf-ref-stats { display: flex; gap: 16px; margin-top: 8px; font-size: 0.8rem; color: var(--ph-text-dim); }

/* Events */
.mcf-hybrid .mcf-events-list { display: flex; flex-direction: column; gap: 4px; }
.mcf-hybrid .mcf-event-row {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    background: var(--ph-bg-card); border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-sm); text-decoration: none; transition: border-color 0.2s;
}
.mcf-hybrid .mcf-event-row:hover { border-color: var(--ph-accent); }
.mcf-hybrid .mcf-event-date { font-size: 0.78rem; font-weight: 700; color: var(--ph-accent); white-space: nowrap; min-width: 44px; }
.mcf-hybrid .mcf-event-title { flex: 1; font-size: 0.85rem; color: var(--ph-text); font-weight: 500; }
.mcf-hybrid .mcf-event-loc { font-size: 0.75rem; color: var(--ph-text-muted); }
.mcf-hybrid .mcf-link-all { display: inline-block; margin-top: 8px; font-size: 0.8rem; color: var(--ph-accent); text-decoration: none; font-weight: 500; }
.mcf-hybrid .mcf-link-all:hover { text-decoration: underline; }

/* Schools */
.mcf-hybrid .mcf-schools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mcf-hybrid .mcf-school-card {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
    background: var(--ph-bg-card); border: 1px solid var(--ph-border);
    border-radius: var(--ph-radius-sm); text-decoration: none; transition: all 0.2s;
}
.mcf-hybrid .mcf-school-card:hover { border-color: var(--ph-accent); background: var(--ph-accent-light); }
.mcf-hybrid .mcf-school-card small { font-size: 0.7rem; text-transform: uppercase; color: var(--ph-text-muted); letter-spacing: 0.04em; }
.mcf-hybrid .mcf-school-card strong { font-size: 0.9rem; color: var(--ph-text); }
.mcf-hybrid .mcf-school-card span { font-size: 0.78rem; color: var(--ph-text-dim); }

/* ═══════════════════════════════════════════════════
   MODALS & DIALOGS
   ═══════════════════════════════════════════════════ */
.mcf-hybrid .mcf-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.mcf-hybrid .mcf-modal[hidden] { display: none; }
.mcf-hybrid .mcf-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
.mcf-hybrid .mcf-modal-dialog {
    position: relative; background: var(--ph-bg-card); border-radius: var(--ph-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12); max-width: 520px; width: 90%; max-height: 85vh; overflow-y: auto;
    padding: 28px 24px; animation: phModalIn 0.25s ease;
}
@keyframes phModalIn { from { opacity:0; transform: scale(0.96) translateY(8px); } to { opacity:1; transform: scale(1) translateY(0); } }
.mcf-hybrid .mcf-modal-close { position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 1.5rem; color: var(--ph-text-muted); cursor: pointer; line-height: 1; padding: 4px; }
.mcf-hybrid .mcf-modal-close:hover { color: var(--ph-text); }
.mcf-hybrid .mcf-modal-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--ph-text); margin: 0 0 4px; }
.mcf-hybrid .mcf-modal-header p { font-size: 0.85rem; color: var(--ph-text-dim); margin: 0 0 16px; }
.mcf-hybrid .mcf-modal-form { display: flex; flex-direction: column; gap: 10px; }
.mcf-hybrid .mcf-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ph-border); margin-top: 8px; }

/* Dialog (split parent) */
.mcf-hybrid .mcf-dialog { border: none; border-radius: var(--ph-radius); box-shadow: 0 8px 32px rgba(0,0,0,0.12); max-width: 460px; width: 90%; padding: 28px 24px; }
.mcf-hybrid .mcf-dialog::backdrop { background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
.mcf-hybrid .mcf-dialog h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 12px; }
.mcf-hybrid .mcf-dialog-form { display: flex; flex-direction: column; gap: 10px; }
.mcf-hybrid .mcf-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .mcf-hybrid .mcf-header-bar { flex-direction: column; align-items: flex-start; padding: 20px; }
    .mcf-hybrid .mcf-header-stats { width: 100%; justify-content: space-around; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
    .mcf-hybrid .mcf-section { padding: 16px; }
    .mcf-hybrid .mcf-children-grid { grid-template-columns: 1fr; }
    .mcf-hybrid .mcf-quick-grid { grid-template-columns: 1fr 1fr; }
    .mcf-hybrid .mcf-pass-row { grid-template-columns: 1fr 1fr; gap: 4px 8px; font-size: 0.82rem; }
    .mcf-hybrid .mcf-pass-row > :nth-child(n+3) { font-size: 0.78rem; }
    .mcf-hybrid .mcf-ref-copy { flex-direction: column; }
    .mcf-hybrid .mcf-form-row { grid-template-columns: 1fr; }
    .mcf-hybrid .mcf-notice { margin: 0 12px 6px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.84.0 — BENTO GRID DASHBOARD (Apple Monochrome refonte)
 * Refonte calm/light : fond gris très clair Apple, cells blanches,
 * borders subtiles, 1 seul accent ACA pink utilisé avec parcimonie.
 * Fini les gradients flashy partout. Scoped .mcf-bento.
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Root tokens ─── */
.mcf-root.mcf-bento {
    /* v2.0.44 — NASApunk Light : papier + navy + tricolore. Zéro neon. */
    --parent-accent: #FFB612;
    --parent-accent-deep: #855B00;
    --parent-accent-soft: #FFF4CF;
    --parent-accent-rgb: 255, 182, 18;
    --bn-bg: #F4F5F7;                  /* Papier NASApunk */
    --bn-cell: #ffffff;                /* Cartes papier-blanc */
    --bn-cell-border: #d7dce4;         /* Bord navy-clair subtil */
    --bn-cell-border-soft: #e7eaf0;    /* Séparateurs encore plus doux */
    --bn-text: #1B2A47;                /* Encre navy profond */
    --bn-text-dim: #3a4b66;            /* Texte secondaire navy-gris */
    --bn-text-muted: #6b7689;          /* Tertiaire / labels */
    --bn-text-label: #6b7689;          /* Mini labels majuscules */
    --bn-accent: #314B7A;              /* Navy NASApunk (accent unique) */
    --bn-accent-soft: rgba(49,75,122,0.08);
    --bn-blue: #314B7A;                /* Navy (CTAs secondaires) */
    --bn-green: #3E7D5A;               /* Vert maîtrise (muté, success) */
    --bn-orange: #DF5F35;              /* Orange tricolore (streak) */
    --bn-purple: #314B7A;              /* Navy (niveau, ex-violet neon) */
    --bn-red: #C32136;                 /* Rouge tricolore (erreurs) */
    --bn-yellow: var(--parent-accent-deep); /* Accent parent lisible sur clair */
    --bn-tricolore: linear-gradient(90deg, #C32136 0 33.33%, #DF5F35 33.33% 66.66%, var(--parent-accent) 66.66% 100%);
    --bn-radius: 18px;
    --bn-radius-sm: 12px;
    --bn-radius-xs: 8px;
    --bn-radius-pill: 100px;
    --bn-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
    --bn-shadow-soft: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
    --bn-shadow-hover: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);

    background: var(--bn-bg);
    color: var(--bn-text);
    font-family: var(--bn-font);
    -webkit-font-smoothing: antialiased;
    padding: 24px;
    border-radius: 0;
}

/* ─── Focus ─── */
.mcf-bento :focus-visible {
    outline: 2px solid var(--bn-accent);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════
   NOTICES / TOASTS — Apple light style
   ═══════════════════════════════════════════════════ */
.mcf-bento .mcf-notice {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    border-radius: var(--bn-radius-sm); font-size: 0.9rem; margin: 0 0 8px;
    background: var(--bn-cell);
    border: 1px solid var(--bn-cell-border);
    animation: bnSlideDown 0.3s ease;
}
@keyframes bnSlideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.mcf-bento .mcf-notice--success { background: rgba(52,199,89,0.08); color: #248a3d; border-color: rgba(52,199,89,0.2); }
.mcf-bento .mcf-notice--info    { background: rgba(49,75,122,0.06); color: #314B7A; border-color: rgba(49,75,122,0.15); }
.mcf-bento .mcf-notice--warn    { background: rgba(223,95,53,0.08); color: #b85d00; border-color: rgba(223,95,53,0.2); }
.mcf-bento .mcf-notice--error   { background: rgba(255,59,48,0.08); color: #c8281f; border-color: rgba(255,59,48,0.2); }
.mcf-bento .mcf-notice-icon { font-size: 1.1rem; flex-shrink: 0; }
.mcf-bento .mcf-notice div { flex: 1; }
.mcf-bento .mcf-notice strong { display: block; font-weight: 600; }
.mcf-bento .mcf-notice span { font-size: 0.82rem; opacity: 0.85; }

/* ═══════════════════════════════════════════════════
   GATES (PIN, onboarding) — Apple light card
   ═══════════════════════════════════════════════════ */
.mcf-bento .mcf-gate { display: flex; justify-content: center; padding: 60px 20px; }
.mcf-bento .mcf-gate-card {
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius); padding: 36px 32px;
    max-width: 440px; width: 100%; box-shadow: var(--bn-shadow-soft);
}
.mcf-bento .mcf-gate-card-wide { max-width: 560px; }
.mcf-bento .mcf-gate h2 { font-size: 1.4rem; font-weight: 700; color: var(--bn-text); margin: 0 0 8px; letter-spacing: -0.02em; }
.mcf-bento .mcf-gate p { color: var(--bn-text-dim); font-size: 0.9rem; margin: 0 0 20px; line-height: 1.5; }
.mcf-bento .mcf-gate-note { font-size: 0.8rem; color: var(--bn-text-muted); margin: 12px 0 0; }

/* ─── Forms ─── */
.mcf-bento .mcf-pin-form { display: flex; flex-direction: column; gap: 10px; }
.mcf-bento .mcf-label { font-size: 0.85rem; font-weight: 500; color: var(--bn-text); margin-bottom: 2px; }
.mcf-bento .mcf-req { color: var(--bn-accent); }
.mcf-bento .mcf-hint { font-size: 0.8rem; color: var(--bn-text-muted); line-height: 1.4; }
.mcf-bento .mcf-divider { border: none; border-top: 1px solid var(--bn-cell-border-soft); margin: 8px 0; }
.mcf-bento .mcf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mcf-bento .mcf-form-field { display: flex; flex-direction: column; gap: 4px; }
.mcf-bento .mcf-form-checkbox label {
    display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer;
    color: var(--bn-text);
    /* v2.0.124.0 — surcharge la règle sombre de base (--aca-bg-deep) : sans fond
       ni bordure --bn-*, la case s'affichait en bande noire illisible. */
    padding: 10px 12px;
    background: var(--bn-cell);
    border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-xs);
}
.mcf-bento .mcf-form-checkbox input { accent-color: var(--bn-accent); }
.mcf-bento .mcf-error { color: var(--bn-red); font-size: 0.85rem; margin: 8px 0 0; }

/* v2.0.124.0 — Cartes sombres héritées (--aca-bg-deep) rendues en bande noire
   dans le contexte bento. Surcharges en tokens NASApunk : page Loi 25
   (cs-danger-*) et stats détaillées (deep-meq-subject). */
.mcf-bento .cs-danger-list,
.mcf-bento .deep-meq-subject {
    background: var(--bn-cell);
    border: 1px solid var(--bn-cell-border);
}
.mcf-bento .cs-danger-details {
    background: var(--bn-cell);
    border: 1px dashed var(--bn-red);
}
.mcf-bento .cs-danger-warning,
.mcf-bento .cs-danger-details summary { color: var(--bn-red); }

.mcf-bento input[type="text"],
.mcf-bento input[type="email"],
.mcf-bento input[type="tel"],
.mcf-bento input[type="password"],
.mcf-bento input[type="number"],
.mcf-bento input[type="date"],
.mcf-bento select {
    height: 40px; padding: 6px 12px; font-size: 0.9rem; font-family: var(--bn-font);
    border: 1px solid var(--bn-cell-border); border-radius: var(--bn-radius-xs);
    background: var(--bn-cell); color: var(--bn-text);
    transition: border 0.2s, box-shadow 0.2s; outline: none; width: 100%;
}
.mcf-bento input:focus, .mcf-bento select:focus {
    border-color: var(--bn-accent); box-shadow: 0 0 0 3px var(--bn-accent-soft);
}
.mcf-bento option { background: #fff; color: var(--bn-text); }

/* ─── Buttons ─── */
.mcf-bento .mcf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 20px; font-size: 0.875rem; font-weight: 600; font-family: var(--bn-font);
    border-radius: var(--bn-radius-sm); border: none; cursor: pointer;
    transition: all 0.15s; text-decoration: none;
}
.mcf-bento .mcf-btn-primary {
    background: var(--bn-text); color: #fff; box-shadow: none;
}
.mcf-bento .mcf-btn-primary:hover {
    background: #000; transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.mcf-bento .mcf-btn-ghost {
    background: var(--bn-cell); color: var(--bn-text);
    border: 1px solid var(--bn-cell-border);
}
.mcf-bento .mcf-btn-ghost:hover { background: #fafafa; }
.mcf-bento .mcf-btn-sm { padding: 6px 14px; font-size: 0.8rem; }
.mcf-bento .mcf-badge-coplus {
    background: var(--bn-text); color: #fff;
    font-size: 0.65rem; padding: 1px 6px;
    border-radius: 10px; font-weight: 700; vertical-align: middle;
}

/* ═══════════════════════════════════════════════════
   BENTO HEADER BAR
   ═══════════════════════════════════════════════════ */
.bn-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; padding: 0 4px;
    max-width: 1200px; margin-left: auto; margin-right: auto;
}
.bn-header-left {
    display: flex; align-items: center; gap: 14px;
}
.bn-header-logo {
    font-size: 24px; font-weight: 700; letter-spacing: -0.03em;
    color: var(--bn-text);
}
.bn-header-logo span {
    color: var(--bn-accent);
}
.bn-header-sub {
    font-size: 14px; color: var(--bn-text-muted);
    border-left: 1px solid var(--bn-cell-border); padding-left: 14px;
}
.bn-header-right {
    display: flex; align-items: center; gap: 8px;
}
.bn-pill {
    padding: 8px 16px; border-radius: var(--bn-radius-pill);
    background: var(--bn-cell); font-size: 13px; font-weight: 500;
    color: var(--bn-text-dim); border: 1px solid var(--bn-cell-border);
    cursor: pointer; transition: all 0.15s;
    text-decoration: none; display: inline-block;
}
.bn-pill:hover {
    background: #fafafa; color: var(--bn-text);
    border-color: #c7c7cc;
}
.bn-pill--accent {
    background: var(--bn-text); border-color: transparent; color: #fff;
}
.bn-pill--accent:hover {
    background: #000; color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Sélecteur familial partagé par le suivi et les espaces enfant. Les anciennes
 * couleurs en ligne supposaient un fond sombre et rendaient le titre invisible
 * dans la coquille parent claire. */
.mcf-child-picker {
    --mcf-picker-ink: #1b2a47;
    --mcf-picker-muted: #667085;
    --mcf-picker-line: #d8dde8;
    --mcf-picker-paper: #fff;
    --mcf-picker-gold: #ffb612;
    max-width: 780px;
    margin: 34px auto;
    padding: 0 20px;
    color: var(--mcf-picker-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.mcf-child-picker__head { margin-bottom: 22px; }
.mcf-child-picker__eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #855b00;
    font: 800 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .12em;
}
.mcf-child-picker__head h1 {
    margin: 0;
    color: var(--mcf-picker-ink);
    font: 600 clamp(2rem, 4vw, 3rem)/1.04 "Iowan Old Style", Baskerville, Georgia, serif;
    letter-spacing: -.04em;
}
.mcf-child-picker__head p {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--mcf-picker-muted);
    font-size: .92rem;
    line-height: 1.5;
}
.mcf-child-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}
.mcf-child-picker__card {
    min-height: 156px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mcf-picker-line);
    border-top: 5px solid var(--mcf-picker-gold);
    border-radius: 16px;
    background: var(--mcf-picker-paper);
    color: var(--mcf-picker-ink);
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}
.mcf-child-picker__card:hover,
.mcf-child-picker__card:focus-visible {
    border-color: var(--mcf-picker-accent, #314b7a);
    transform: translateY(-2px);
}
.mcf-child-picker__name {
    color: var(--mcf-picker-ink);
    font: 600 1.55rem/1.05 "Iowan Old Style", Baskerville, Georgia, serif;
}
.mcf-child-picker__meta {
    margin-top: 8px;
    color: var(--mcf-picker-muted);
    font-size: .82rem;
    line-height: 1.45;
}
.mcf-child-picker__meta small {
    display: block;
    margin-top: 2px;
    color: inherit;
    font-size: inherit;
}
.mcf-child-picker__cta {
    margin-top: auto;
    padding-top: 16px;
    color: var(--mcf-picker-accent, #314b7a);
    font-size: .78rem;
    font-weight: 750;
}

/* État fermé commun aux modules propriétaires absents. Il informe sans que
 * Commerce ne simule leur contenu ni leurs actions. */
.mcf-module-empty {
    max-width: 780px;
    min-height: 190px;
    margin: 34px auto;
    padding: 30px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    border: 1px solid #d8dde8;
    border-top: 5px solid #ffb612;
    border-radius: 16px;
    background: #fff;
    color: #1b2a47;
}
.mcf-module-empty__mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #fff4cf;
    color: #855b00;
    font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.mcf-module-empty__eyebrow {
    margin: 0 0 7px;
    color: #855b00;
    font: 800 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .1em;
}
.mcf-module-empty h1 {
    margin: 0;
    color: #1b2a47;
    font: 600 clamp(1.45rem, 3vw, 2.15rem)/1.08 "Iowan Old Style", Baskerville, Georgia, serif;
    letter-spacing: -.035em;
}
.mcf-module-empty h1 + p {
    margin: 8px 0 0;
    color: #667085;
    font-size: .88rem;
    line-height: 1.5;
}
@media (max-width: 560px) {
    .mcf-child-picker { margin-block: 20px; padding-inline: 0; }
    .mcf-child-picker__grid { grid-template-columns: 1fr; }
    .mcf-module-empty { grid-template-columns: 1fr; margin-block: 20px; padding: 24px; }
}

/* ═══════════════════════════════════════════════════
   BENTO GRID
   ═══════════════════════════════════════════════════ */
.bn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(160px, auto);
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ─── Cell base — uniformly white ─── */
.bn-cell {
    background: var(--bn-cell);
    border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius);
    padding: 24px;
    position: relative; overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--bn-shadow-soft);
}
.bn-cell:hover {
    transform: translateY(-1px);
    box-shadow: var(--bn-shadow-hover);
}

/* ═══════════════════════════════════════════════════
   CELL: HERO CHILD (2×2) — featured, but still light
   ═══════════════════════════════════════════════════ */
.bn-cell--hero {
    grid-column: span 2; grid-row: span 2;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    position: relative;
}
/* v2.0.44 — bande tricolore signature NASApunk en tête de la carte hero */
.bn-cell--hero::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--bn-tricolore);
    border-radius: var(--bn-radius) var(--bn-radius) 0 0;
}
.bn-hero-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: auto;
}
.bn-hero-avatar {
    width: 64px; height: 64px; border-radius: 18px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); flex-shrink: 0;
    background: #fafafa;
}
.bn-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bn-hero-avatar img.is-placeholder { object-fit: contain; padding: 9px; box-sizing: border-box; }
.bn-hero-avatar span {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: var(--bn-accent-soft);
    color: var(--bn-accent); font-size: 26px; font-weight: 700;
}
.bn-hero-switcher { display: flex; gap: 6px; }
.bn-sw-btn {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--bn-cell);
    border: 1px solid var(--bn-cell-border);
    color: var(--bn-text-dim); font-weight: 600; font-size: 13px;
    cursor: pointer; transition: all 0.15s;
    text-decoration: none; display: flex;
    align-items: center; justify-content: center;
}
.bn-sw-btn:hover { background: #fafafa; color: var(--bn-text); }
.bn-sw-btn.active {
    background: var(--bn-text); color: #fff; border-color: var(--bn-text);
}
.bn-hero-name {
    font-size: 38px; font-weight: 700; letter-spacing: -0.03em;
    margin: 16px 0 4px; color: var(--bn-text);
}
.bn-hero-meta { font-size: 14px; color: var(--bn-text-muted); margin: 0; }
.bn-hero-stats {
    display: flex; gap: 32px; margin-top: 24px;
}
.bn-hero-stat { display: flex; flex-direction: column; }
.bn-hero-val {
    font-size: 30px; font-weight: 700; letter-spacing: -0.03em;
    color: var(--bn-text);
}
.bn-hero-lbl {
    font-size: 11px; color: var(--bn-text-muted); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-top: 2px;
}
.bn-hero-actions {
    display: flex; gap: 8px; margin-top: 20px;
}
.bn-hero-action {
    padding: 8px 16px; border-radius: var(--bn-radius-xs);
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    color: var(--bn-text); font-size: 13px; font-weight: 500;
    text-decoration: none; transition: all 0.15s;
    /* v2.0.124.0 — la classe sert aussi à un <button> (Inviter un parent) */
    cursor: pointer; font-family: inherit;
}
.bn-hero-action:hover {
    background: #fafafa; border-color: #c7c7cc;
}

/* ═══════════════════════════════════════════════════
   CELL: STREAK / LEVEL — minimal, label + big number
   ═══════════════════════════════════════════════════ */
.bn-cell--streak,
.bn-cell--level {
    display: flex; flex-direction: column;
    justify-content: space-between;
}

.bn-cell-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--bn-text-label);
    margin-bottom: 8px; display: block;
}
.bn-cell-sub { font-size: 14px; color: var(--bn-text-muted); display: block; margin-top: 4px; }

.bn-big-num {
    font-size: 56px; font-weight: 700; letter-spacing: -0.04em;
    display: block; line-height: 1;
    color: var(--bn-text);
}
.bn-big-num--fire { color: var(--bn-orange); }
.bn-big-num--purple { color: var(--bn-purple); }

.bn-streak-dots { display: flex; gap: 6px; margin-top: 12px; }
.bn-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--bn-cell-border);
}
.bn-dot--on { background: var(--bn-orange); }

.bn-title-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px;
    background: rgba(49,75,122,0.08);
    font-size: 12px; color: var(--bn-purple); font-weight: 500;
    align-self: flex-start;
    border: 1px solid rgba(49,75,122,0.15);
}

/* ═══════════════════════════════════════════════════
   CELL: ACTIVITY FEED (2 cols)
   ═══════════════════════════════════════════════════ */
.bn-cell--activity {
    grid-column: span 2;
}
.bn-activity-list { margin-top: 12px; }
.bn-cell--activity .aca-activity-row,
.bn-cell--activity .mcf-activity-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bn-cell-border-soft);
}
.bn-cell--activity .aca-activity-row:last-child,
.bn-cell--activity .mcf-activity-row:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════
   CELL: BUDDYBOSS / PARENT ACTIVITY FEED
   ═══════════════════════════════════════════════════ */
.bn-cell--social {
    grid-column: span 2;
}
.bn-social-tabs {
    display: flex; gap: 4px; margin-top: 8px; margin-bottom: 12px;
    border-bottom: 1px solid var(--bn-cell-border-soft);
}
.bn-social-tab {
    padding: 8px 14px; background: none; border: none;
    color: var(--bn-text-muted); font-size: 13px; font-weight: 500;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: all 0.15s; font-family: var(--bn-font);
}
.bn-social-tab.active {
    color: var(--bn-text); border-bottom-color: var(--bn-accent);
}
.bn-social-tab:hover:not(.active) { color: var(--bn-text); }
.bn-social-content { padding: 4px 0; }
.bn-social-item {
    display: flex; gap: 10px; padding: 10px 0;
    border-bottom: 1px solid var(--bn-cell-border-soft);
}
.bn-social-item:last-child { border-bottom: none; }
.bn-social-avatar {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
    flex-shrink: 0; background: #f5f5f7;
}
.bn-social-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bn-social-avatar span {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: var(--bn-text-dim);
    font-weight: 600; font-size: 14px;
}
.bn-social-body { flex: 1; min-width: 0; }
.bn-social-meta { font-size: 12px; color: var(--bn-text-muted); margin-bottom: 2px; }
.bn-social-meta strong { color: var(--bn-text); font-weight: 600; }
.bn-social-text { font-size: 13px; color: var(--bn-text-dim); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bn-social-empty {
    text-align: center; padding: 20px 12px;
    color: var(--bn-text-muted); font-size: 13px;
}
.bn-social-empty a { color: var(--bn-accent); text-decoration: none; }
.bn-social-empty a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════
   CELL: PASSES
   ═══════════════════════════════════════════════════ */
.bn-pass-stack { margin-top: 12px; }
.bn-pass-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: var(--bn-radius-xs);
    background: #fafafa;
    border: 1px solid var(--bn-cell-border-soft);
    margin-bottom: 6px; font-size: 13px; font-weight: 500;
    color: var(--bn-text);
}
.bn-pass-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.bn-pass-status {
    margin-left: auto; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════
   CELL: GOALS
   ═══════════════════════════════════════════════════ */
.bn-goals-list { margin-top: 10px; }
.bn-goal-item { margin-bottom: 14px; }
.bn-goal-item:last-child { margin-bottom: 0; }
.bn-goal-meta {
    font-size: 12px; font-weight: 500; color: var(--bn-text-dim);
    margin-bottom: 6px; display: flex; justify-content: space-between;
}
.bn-goal-bar {
    height: 4px; border-radius: 2px;
    background: var(--bn-cell-border-soft); overflow: hidden;
}
.bn-goal-fill {
    height: 100%; border-radius: 2px;
    background: var(--bn-text);
    transition: width 0.5s ease;
}

/* ═══════════════════════════════════════════════════
   CELL: QUICK ACTIONS (2 cols)
   ═══════════════════════════════════════════════════ */
.bn-cell--actions {
    grid-column: span 2;
}
.bn-actions-wrap {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 12px;
}
.bn-action-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: var(--bn-radius-xs);
    background: #fafafa;
    border: 1px solid var(--bn-cell-border-soft);
    font-size: 13px; font-weight: 500; color: var(--bn-text);
    cursor: pointer; transition: all 0.15s;
    text-decoration: none;
}
.bn-action-btn:hover {
    background: #fff; border-color: var(--bn-cell-border);
    transform: translateY(-1px);
}
.bn-action-icon { font-size: 15px; opacity: 0.8; }

/* ═══════════════════════════════════════════════════
   CELL: DISCOVER CTA (2 cols)
   ═══════════════════════════════════════════════════ */
.bn-cell--discover {
    grid-column: span 2;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.bn-cell--discover .mcf-coplus-nudge { margin: 0 0 16px; border-radius: var(--bn-radius-sm); }
.bn-cell--discover .mcf-discovery-card { background: transparent; border: none; padding: 0; box-shadow: none; }
.bn-cell--discover .mcf-discovery-title { color: var(--bn-text); }
.bn-cell--discover .mcf-discovery-sub { color: var(--bn-text-muted); }
.bn-cell--discover .mcf-discovery-grid { gap: 12px; }

/* ═══════════════════════════════════════════════════
   CELL: OTHER CHILDREN (compact)
   ═══════════════════════════════════════════════════ */
.bn-cell--child-sm {
    display: flex; flex-direction: column;
    justify-content: space-between;
}
.bn-csm-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.bn-csm-avatar {
    width: 44px; height: 44px; border-radius: 14px; overflow: hidden;
    flex-shrink: 0; background: #f5f5f7;
}
.bn-csm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bn-csm-avatar img.is-placeholder { object-fit: contain; padding: 6px; box-sizing: border-box; }
.bn-csm-avatar span {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: var(--bn-accent-soft);
    color: var(--bn-accent); font-weight: 700; font-size: 1rem;
}
.bn-csm-header strong {
    display: block; font-size: 0.95rem; font-weight: 600; color: var(--bn-text);
}
.bn-csm-header small {
    display: block; font-size: 0.75rem; color: var(--bn-text-muted);
}
.bn-csm-stats {
    display: flex; gap: 16px; margin-bottom: 12px;
}
.bn-csm-stats > div { display: flex; flex-direction: column; }
.bn-csm-val { font-size: 1rem; font-weight: 700; color: var(--bn-text); line-height: 1.1; }
.bn-csm-lbl { font-size: 0.65rem; color: var(--bn-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* ══════════════════════════════════════════════════
   BANDEAU D'ÉLAN — série + barre vers le prochain niveau
   v2.0.177.0 — le même pour TOUS les enfants, vedette comprise.
   Avant, seul l'enfant en vedette avait sa série : un parent de trois
   enfants voyait l'élan d'un seul des trois, et pouvait croire que les
   deux autres n'en avaient pas.

   NASApunk Light : à plat. Aucun dégradé, aucune lueur, aucune ombre
   colorée. Les couleurs viennent des jetons `--bn-*`, jamais d'un hex.

   ⚠️ CONTRASTE MESURÉ AVANT D'ÊTRE CHOISI, sur la carte blanche :
     · `--bn-text-muted` #6b7689 = 4,59:1, donc AA pour du petit texte.
     · `--bn-orange` #DF5F35 = 3,60:1, SOUS le seuil 4,5 du petit texte.
       Il ne porte donc que le CHIFFRE, mis à 1,2rem gras (19,2 px), ce qui
       le fait passer en « gros caractère » dont le seuil est 3:1.
   ══════════════════════════════════════════════════ */
.bn-pulse {
    display: flex; flex-direction: column; gap: 5px;
    margin: 10px 0 12px;
}
.bn-pulse-streak {
    display: flex; align-items: baseline; gap: 5px;
    font-size: 0.75rem; color: var(--bn-text-muted);
}
.bn-pulse-streak strong {
    font-size: 1.2rem; font-weight: 700; line-height: 1;
    color: var(--bn-text);
}
.bn-pulse-streak.est-en-cours strong { color: var(--bn-orange); }
.bn-pulse-bar {
    height: 6px; border-radius: 3px;
    background: var(--bn-cell-border-soft);
    overflow: hidden;
}
.bn-pulse-bar > span {
    display: block; height: 100%;
    background: var(--bn-accent);
}
.bn-pulse-next {
    font-size: 0.7rem; color: var(--bn-text-muted);
}
.bn-csm-actions {
    display: flex; gap: 6px;
    border-top: 1px solid var(--bn-cell-border-soft); padding-top: 10px;
}
.bn-csm-actions a,
.bn-csm-actions button.mcf-btn-invite {
    padding: 5px 12px; border-radius: 8px;
    background: #fafafa;
    border: 1px solid var(--bn-cell-border-soft);
    color: var(--bn-text); font-size: 12px; font-weight: 500;
    text-decoration: none; transition: all 0.15s;
    cursor: pointer; font-family: inherit;
}
.bn-csm-actions a:hover,
.bn-csm-actions button.mcf-btn-invite:hover { background: #fff; border-color: var(--bn-cell-border); }

/* ═══════════════════════════════════════════════════
   CHILD GUARD BANNER — Inside Bento
   ═══════════════════════════════════════════════════ */
.mcf-bento .mcf-child-guard-banner {
    border-radius: var(--bn-radius-sm);
    margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════
   MODALS & DIALOGS — Apple light
   ═══════════════════════════════════════════════════ */
.mcf-bento .mcf-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.mcf-bento .mcf-modal[hidden] { display: none; }
.mcf-bento .mcf-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.35); backdrop-filter: blur(6px);
}
.mcf-bento .mcf-modal-dialog {
    position: relative; background: var(--bn-cell);
    border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius);
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    max-width: 520px; width: 90%; max-height: 85vh; overflow-y: auto;
    padding: 28px 24px; animation: bnModalIn 0.25s ease;
}
@keyframes bnModalIn { from { opacity:0; transform: scale(0.96) translateY(8px); } to { opacity:1; transform: scale(1) translateY(0); } }
.mcf-bento .mcf-modal-close {
    position: absolute; top: 12px; right: 12px; background: none;
    border: none; font-size: 1.5rem; color: var(--bn-text-muted);
    cursor: pointer; line-height: 1; padding: 4px;
}
.mcf-bento .mcf-modal-close:hover { color: var(--bn-text); }
.mcf-bento .mcf-modal-header h3 { font-size: 1.15rem; font-weight: 700; color: var(--bn-text); margin: 0 0 4px; letter-spacing: -0.01em; }
.mcf-bento .mcf-modal-header p { font-size: 0.85rem; color: var(--bn-text-muted); margin: 0 0 16px; }
.mcf-bento .mcf-modal-form { display: flex; flex-direction: column; gap: 10px; }
.mcf-bento .mcf-modal-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    padding-top: 12px; border-top: 1px solid var(--bn-cell-border-soft); margin-top: 8px;
}

.mcf-bento .mcf-dialog {
    border: 1px solid var(--bn-cell-border); border-radius: var(--bn-radius);
    background: var(--bn-cell); color: var(--bn-text);
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    max-width: 460px; width: 90%; padding: 28px 24px;
}
.mcf-bento .mcf-dialog::backdrop { background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); }
.mcf-bento .mcf-dialog h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 12px; }
.mcf-bento .mcf-dialog-form { display: flex; flex-direction: column; gap: 10px; }
.mcf-bento .mcf-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Bento
   ═══════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .bn-grid { grid-template-columns: repeat(2, 1fr); }
    .bn-cell--hero { grid-column: span 2; }
}
@media (max-width: 640px) {
    .mcf-root.mcf-bento { padding: 12px; }
    .bn-grid { grid-template-columns: 1fr; gap: 10px; }
    .bn-cell--hero,
    .bn-cell--activity,
    .bn-cell--social,
    .bn-cell--actions,
    .bn-cell--discover { grid-column: span 1; }
    .bn-cell--hero { grid-row: span 1; }
    .bn-hero-stats { gap: 20px; }
    .bn-hero-val { font-size: 24px; }
    .bn-hero-name { font-size: 30px; }
    .bn-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .bn-header-sub { border-left: none; padding-left: 0; }
    .bn-actions-wrap { gap: 6px; }
    .bn-action-btn { padding: 8px 12px; font-size: 12px; }
    .mcf-bento .mcf-form-row { grid-template-columns: 1fr; }
    .mcf-bento .mcf-notice { margin: 0 0 6px; }
}

/* ═══════════════════════════════════════════════════
 * v1.84.0 — Family tabs nav inside Bento (Apple monochrome)
 * ═══════════════════════════════════════════════════ */
.mcf-bento .fam-tabs {
    background: #FFFFFF;
    border: 1px solid rgba(27,42,71,0.14);
    border-radius: 14px;
    padding: 10px 10px 8px;
    max-width: 1200px;
    margin: 0 auto 18px;
    box-shadow: 0 10px 28px rgba(27,42,71,0.06);
    position: sticky; top: 12px; z-index: 50;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255,255,255,0.92);
}
.mcf-bento .fam-tabs::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    border-radius: 14px 14px 0 0;
    background: var(--bn-tricolore);
}
.mcf-bento .fam-tabs-list {
    display: flex; gap: 6px; padding: 4px 0 0; margin: 0;
    list-style: none; overflow-x: auto;
    scrollbar-width: thin;
}
.mcf-bento .fam-tabs-list::-webkit-scrollbar { height: 4px; }
.mcf-bento .fam-tabs-list::-webkit-scrollbar-thumb { background: rgba(27,42,71,0.2); border-radius: 2px; }
.mcf-bento .fam-tab-item { flex: 0 0 auto; list-style: none; }
.mcf-bento .fam-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border-radius: 8px;
    color: rgba(27,42,71,0.72); font-size: 14px; font-weight: 600;
    text-decoration: none; transition: background-color .15s ease, color .15s ease, transform .12s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}
.mcf-bento .fam-tab:hover {
    background: #F4F5F7; color: #1B2A47;
    transform: translateY(-1px); box-shadow: none;
}
.mcf-bento .fam-tab.is-active {
    background: #314B7A; color: #fff;
    border-color: #314B7A;
    box-shadow: 0 6px 16px rgba(27,42,71,0.22);
}
.mcf-bento .fam-tab.is-active:hover {
    background: #1B2A47; color: #fff; transform: none;
}
.mcf-bento .fam-tab.is-locked {
    color: rgba(27,42,71,0.5); opacity: 0.85;
}
.mcf-bento .fam-tab-icon { font-size: 16px; opacity: 0.95; }
.mcf-bento .fam-tab-label { font-size: 13px; }
.mcf-bento .fam-tab-lock { font-size: 11px; opacity: 0.8; }

@media (max-width: 640px) {
    .mcf-bento .fam-tabs { padding: 8px 6px 6px; margin: 0 0 12px; top: 0; }
    .mcf-bento .fam-tab { padding: 9px 13px; }
    .mcf-bento .fam-tab-label { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════
 * v1.83.0 — [aca_signup_cta] shortcode buttons
 * ═══════════════════════════════════════════════════ */
.aca-cta-btn {
    display: inline-block; padding: 12px 28px; border-radius: 100px;
    font-size: 1rem; font-weight: 600; text-decoration: none;
    transition: all 0.2s; cursor: pointer; text-align: center;
}
.aca-cta-btn--primary {
    background: #314B7A;
    color: #fff; border: none;
}
.aca-cta-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27,42,71,0.28);
}
.aca-cta-btn--ghost {
    background: transparent; color: #314B7A;
    border: 2px solid #314B7A;
}
.aca-cta-btn--ghost:hover {
    background: rgba(49,75,122,0.08);
}
.aca-cta-already {
    display: inline-block; padding: 10px 24px; border-radius: 100px;
    background: rgba(62,125,90,0.1); color: #3E7D5A;
    font-size: 0.9rem; font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.85.0 — MINICO INSIGHTS (Réussites + difficultés + tips)
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Bento dashboard cell ─── */
.bn-cell--insights {
    grid-column: span 2;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.bn-insights-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-top: 12px;
}
.bn-insight-col { display: flex; flex-direction: column; gap: 6px; }
.bn-insight-col-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--bn-text-muted);
    margin-bottom: 2px;
}
.bn-insight-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-radius: var(--bn-radius-xs);
    background: #fafafa; border: 1px solid var(--bn-cell-border-soft);
}
.bn-insight-icon {
    font-size: 18px; line-height: 1; flex-shrink: 0;
    width: 24px; height: 24px; display: flex;
    align-items: center; justify-content: center;
}
.bn-insight-item strong {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--bn-text); line-height: 1.3;
}
.bn-insight-item small {
    font-size: 11px; color: var(--bn-text-muted);
}
.bn-insight-win { border-left: 3px solid var(--bn-green); }
.bn-insight-struggle { border-left: 3px solid var(--bn-orange); }

/* MiniCo speech bubble (dashboard) — Bulle bleue ACA */
.bn-minico-bubble {
    display: flex; gap: 12px; align-items: flex-start;
    margin-top: 12px; padding: 12px 14px;
    background: rgba(49,75,122,0.06);
    border: 1px solid rgba(49,75,122,0.18);
    border-radius: var(--bn-radius-sm);
}
.bn-minico-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(49,75,122,0.25);
    overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 2px;
    box-shadow: 0 2px 6px rgba(49,75,122,0.15);
}
.aca-minico-avatar-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bn-minico-text { flex: 1; }
.bn-minico-text strong {
    display: block; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: #314B7A; margin-bottom: 4px;
}
.bn-minico-text p {
    font-size: 13px; color: var(--bn-text); line-height: 1.4;
    margin: 0;
}
.bn-minico-text small {
    display: block; margin-top: 4px;
    font-size: 12px; color: var(--bn-text-dim); font-style: italic;
}
.bn-insights-cta {
    display: inline-block; margin-top: 12px;
    font-size: 13px; color: var(--bn-text); font-weight: 500;
    text-decoration: none;
}
.bn-insights-cta:hover { color: var(--bn-accent); }

/* ─── Stats page Highlights section ─── */
.minico-highlights {
    font-family: var(--bn-font, -apple-system, sans-serif);
    color: var(--bn-text, #1d1d1f);
}

.minico-hero-tip {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 20px; margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(49,75,122,0.06), rgba(49,75,122,0.03));
    border: 1px solid rgba(49,75,122,0.16);
    border-radius: 18px;
}
.minico-hero-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(49,75,122,0.3);
    overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 4px;
    box-shadow: 0 4px 14px rgba(49,75,122,0.18);
}
.minico-hero-body { flex: 1; }
.minico-hero-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: #314B7A;
    display: block; margin-bottom: 6px;
}
.minico-hero-quote {
    font-size: 18px; font-weight: 500; color: var(--bn-text, #1d1d1f);
    line-height: 1.4; margin: 0 0 8px;
}
.minico-hero-action {
    font-size: 14px; color: var(--bn-text-dim, #515154);
    font-style: italic; margin: 0;
}

.minico-section { margin-bottom: 28px; }
.minico-section-title {
    font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--bn-text, #1d1d1f); margin-bottom: 12px;
}
.minico-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.minico-card {
    padding: 18px; border-radius: 14px;
    background: #fff; border: 1px solid var(--bn-cell-border, #d2d2d7);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    display: flex; flex-direction: column; gap: 6px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.minico-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.minico-card-icon {
    font-size: 28px; line-height: 1; margin-bottom: 4px;
}
.minico-card strong {
    font-size: 15px; font-weight: 600; color: var(--bn-text, #1d1d1f);
    line-height: 1.3;
}
.minico-card p {
    font-size: 13px; color: var(--bn-text-dim, #515154);
    margin: 0; line-height: 1.4;
}
.minico-card-detail { color: var(--bn-text-muted, #707075); }
.minico-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--bn-cell-border-soft, #e5e5e7);
}
.minico-source-chip {
    font-size: 11px; font-weight: 500; color: var(--bn-text-muted, #707075);
    background: #fafafa; padding: 2px 8px; border-radius: 100px;
}
.minico-score {
    font-size: 13px; font-weight: 700; color: var(--bn-green, #34c759);
}

.minico-card-win { border-left: 3px solid var(--bn-green, #34c759); }
.minico-card-struggle { border-left: 3px solid var(--bn-orange, #DF5F35); }
.minico-card-struggle.minico-sev-high { border-left-color: var(--bn-red, #ff3b30); }

.minico-tip-block {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 10px; padding: 10px 12px;
    background: rgba(49,75,122,0.07);
    border: 1px solid rgba(49,75,122,0.15);
    border-radius: 10px;
}
.minico-tip-mascot {
    width: 28px; height: 28px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(49,75,122,0.25);
    overflow: hidden; flex-shrink: 0; padding: 2px;
    display: flex; align-items: center; justify-content: center;
}
.minico-tip-text {
    font-size: 13px; color: var(--bn-text, #1d1d1f);
    line-height: 1.4; margin: 0;
}
.minico-tip-action {
    display: block; margin-top: 4px;
    font-size: 12px; color: var(--bn-text-dim, #515154);
    font-style: italic;
}

.minico-empty {
    text-align: center; padding: 24px 12px;
    color: var(--bn-text-muted, #707075);
    font-size: 14px;
}

@media (max-width: 640px) {
    .bn-insights-grid { grid-template-columns: 1fr; }
    .minico-hero-tip { flex-direction: column; gap: 12px; }
    .minico-hero-avatar { width: 48px; height: 48px; font-size: 24px; }
    .minico-hero-quote { font-size: 16px; }
    .minico-cards-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.85.2 — Deep Stats Apple Monochrome Override (under .mcf-bento)
 * Converts the dark gradient .deep-* styling to Apple monochrome
 * to match the rest of the parent space. Inside .mcf-bento only.
 * ═══════════════════════════════════════════════════════════════════ */

.mcf-bento .deep-root {
    max-width: 1200px; margin: 0 auto; padding: 0;
    background: transparent; color: var(--bn-text);
}

.mcf-bento .deep-hero,
.mcf-bento .deep-hero-compact {
    background: var(--bn-cell);
    border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius);
    padding: 20px 24px; margin-bottom: 16px;
    box-shadow: var(--bn-shadow-soft);
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    flex-wrap: wrap;
}
.mcf-bento .deep-hero h1,
.mcf-bento .deep-hero-compact h1 {
    font-size: 1.5rem; font-weight: 700; color: var(--bn-text);
    letter-spacing: -0.02em; margin: 0;
}
.mcf-bento .deep-hero-meta { font-size: 0.85rem; color: var(--bn-text-muted); }

.mcf-bento .deep-mini-kpi {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 14px;
}
.mcf-bento .deep-mini-val {
    font-size: 1.2rem; font-weight: 700; color: var(--bn-text);
    line-height: 1.1;
}
.mcf-bento .deep-mini-lbl {
    font-size: 0.7rem; color: var(--bn-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px;
}
.mcf-bento .deep-hero-kpis { display: flex; gap: 8px; }

/* Tabs row */
.mcf-bento .deep-tabs {
    background: var(--bn-cell);
    border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius);
    padding: 6px; margin-bottom: 16px;
    box-shadow: var(--bn-shadow-soft);
    display: flex; gap: 2px; flex-wrap: wrap; overflow-x: auto;
}
.mcf-bento .deep-tab {
    flex: 1; min-width: 130px; padding: 10px 14px;
    background: transparent; color: var(--bn-text-dim);
    font-weight: 500; font-size: 0.88rem;
    border: 1px solid transparent; border-radius: var(--bn-radius-xs);
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
    font-family: var(--bn-font);
}
.mcf-bento .deep-tab:hover {
    background: #fafafa; color: var(--bn-text);
}
.mcf-bento .deep-tab.active {
    background: var(--bn-text); color: #fff;
    border-color: var(--bn-text); font-weight: 600;
}

/* Panels */
.mcf-bento .deep-panel { display: none; }
.mcf-bento .deep-panel.active {
    display: block;
    animation: bnFadeIn 0.25s ease-out;
}
@keyframes bnFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* KPI cards */
.mcf-bento .deep-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px; margin-bottom: 16px;
}
.mcf-bento .deep-kpi {
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-sm); padding: 14px 16px;
    box-shadow: var(--bn-shadow-soft);
}
.mcf-bento .deep-kpi-label {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--bn-text-muted);
}
.mcf-bento .deep-kpi-value {
    font-size: 1.6rem; font-weight: 700; color: var(--bn-text);
    letter-spacing: -0.02em; line-height: 1.1; margin-top: 4px;
}
.mcf-bento .deep-kpi-value small { font-size: 0.65em; color: var(--bn-text-muted); font-weight: 500; }
.mcf-bento .deep-kpi-hint { font-size: 0.72rem; color: var(--bn-text-muted); margin-top: 2px; }
.mcf-bento .deep-kpi-trend-up    { border-left: 3px solid var(--bn-green); }
.mcf-bento .deep-kpi-trend-down  { border-left: 3px solid var(--bn-red); }
.mcf-bento .deep-kpi-trend-stable{ border-left: 3px solid var(--bn-blue); }

/* Charts wrappers */
.mcf-bento .deep-chart-title {
    font-size: 1rem; font-weight: 700; color: var(--bn-text);
    margin: 20px 0 10px; letter-spacing: -0.01em;
}
.mcf-bento .deep-chart-wrap {
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-sm); padding: 14px;
    box-shadow: var(--bn-shadow-soft); color: var(--bn-text-dim);
}
.mcf-bento .deep-chart-wrap svg { display: block; width: 100%; height: auto; max-height: 220px; }

/* Activity feed */
.mcf-bento .deep-activity-feed {
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-sm); padding: 8px 14px;
    box-shadow: var(--bn-shadow-soft);
}
.mcf-bento .deep-activity-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--bn-cell-border-soft);
    font-size: 0.88rem;
}
.mcf-bento .deep-activity-item:last-child { border-bottom: none; }
.mcf-bento .deep-activity-date { font-size: 0.75rem; color: var(--bn-text-muted); min-width: 50px; }
.mcf-bento .deep-activity-desc { flex: 1; color: var(--bn-text); }
.mcf-bento .deep-activity-xp { font-size: 0.78rem; color: var(--bn-green); font-weight: 600; }

/* Multiplication grid */
.mcf-bento .deep-mult-grid {
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-sm); padding: 12px;
    box-shadow: var(--bn-shadow-soft);
    display: grid; gap: 2px;
}
.mcf-bento .deep-mult-header,
.mcf-bento .deep-mult-row {
    display: grid; grid-template-columns: 30px repeat(12, 1fr); gap: 2px;
}
.mcf-bento .deep-mult-col-header,
.mcf-bento .deep-mult-row-header {
    font-size: 0.7rem; font-weight: 600; color: var(--bn-text-muted);
    text-align: center; padding: 4px;
}
.mcf-bento .deep-mult-cell {
    aspect-ratio: 1; border-radius: 4px;
    border: 1px solid var(--bn-cell-border-soft);
}
.mcf-bento .deep-legend {
    display: flex; gap: 14px; font-size: 0.78rem; color: var(--bn-text-muted);
    margin-bottom: 10px;
}
.mcf-bento .deep-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mcf-bento .deep-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Subject scores (bars) */
.mcf-bento .deep-subject {
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-sm); padding: 14px 16px;
    margin-bottom: 8px; box-shadow: var(--bn-shadow-soft);
}
.mcf-bento .deep-subject-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px;
}
.mcf-bento .deep-subject-head h4 {
    font-size: 0.95rem; font-weight: 600; color: var(--bn-text); margin: 0;
}
.mcf-bento .deep-subject-attempts { font-size: 0.78rem; color: var(--bn-text-muted); }
.mcf-bento .deep-bar-row {
    display: grid; grid-template-columns: 80px 1fr 48px;
    gap: 10px; align-items: center; margin-bottom: 6px;
}
.mcf-bento .deep-bar-label { font-size: 0.78rem; color: var(--bn-text-dim); }
.mcf-bento .deep-bar {
    height: 8px; background: var(--bn-cell-border-soft);
    border-radius: 4px; overflow: hidden;
}
.mcf-bento .deep-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s; }
.mcf-bento .deep-bar-child { background: var(--bn-text); }
.mcf-bento .deep-bar-pop { background: var(--bn-blue); }
.mcf-bento .deep-bar-value { font-size: 0.85rem; font-weight: 600; color: var(--bn-text); text-align: right; }

.mcf-bento .deep-comparison {
    font-size: 0.82rem; margin-top: 8px; padding: 8px 10px;
    border-radius: 8px;
}
.mcf-bento .deep-comparison-good { background: rgba(52,199,89,0.08); color: #248a3d; }
.mcf-bento .deep-comparison-bad { background: rgba(223,95,53,0.08); color: #b85d00; }
.mcf-bento .deep-comparison-neutral { background: #fafafa; color: var(--bn-text-dim); }

/* Alerts */
.mcf-bento .deep-alerts { margin-bottom: 16px; }
.mcf-bento .deep-alert {
    padding: 10px 14px; border-radius: var(--bn-radius-sm);
    margin-bottom: 6px; font-size: 0.88rem;
    border: 1px solid var(--bn-cell-border);
}
.mcf-bento .deep-alert--warn    { background: rgba(223,95,53,0.08); color: #b85d00; border-color: rgba(223,95,53,0.2); }
.mcf-bento .deep-alert--info    { background: rgba(49,75,122,0.06); color: #314B7A; border-color: rgba(49,75,122,0.15); }
.mcf-bento .deep-alert--success { background: rgba(52,199,89,0.08); color: #248a3d; border-color: rgba(52,199,89,0.2); }

/* Difficulties cards */
.mcf-bento .deep-difficulties-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px; margin-top: 12px;
}
.mcf-bento .deep-error-card {
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-left: 3px solid var(--bn-orange);
    border-radius: var(--bn-radius-sm); padding: 14px;
    box-shadow: var(--bn-shadow-soft);
}
.mcf-bento .deep-error-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 6px; gap: 8px;
}
.mcf-bento .deep-error-label {
    font-size: 0.85rem; font-weight: 600; color: var(--bn-text);
    font-family: 'SF Mono', 'Consolas', monospace;
    background: #fafafa; padding: 2px 6px; border-radius: 4px;
}
.mcf-bento .deep-error-count {
    font-size: 0.75rem; color: var(--bn-red); font-weight: 600;
    background: rgba(255,59,48,0.08); padding: 2px 8px; border-radius: 100px;
}
.mcf-bento .deep-error-ctx { font-size: 0.78rem; color: var(--bn-text-muted); display: block; margin-bottom: 6px; }
.mcf-bento .deep-error-suggestion {
    background: rgba(49,75,122,0.06); border: 1px solid rgba(49,75,122,0.15);
    border-radius: 8px; padding: 8px 10px; margin-top: 8px;
    font-size: 0.82rem; color: var(--bn-text);
}
.mcf-bento .deep-tip-box {
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-sm); padding: 14px;
    margin-top: 14px; box-shadow: var(--bn-shadow-soft);
}
.mcf-bento .deep-tip-box strong { font-size: 0.92rem; color: var(--bn-text); display: block; margin-bottom: 4px; }
.mcf-bento .deep-tip-box p { font-size: 0.85rem; color: var(--bn-text-dim); margin: 0; line-height: 1.4; }

/* Empty states */
.mcf-bento .deep-empty,
.mcf-bento .deep-empty-state {
    text-align: center; padding: 32px 20px;
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-sm); color: var(--bn-text-muted);
    box-shadow: var(--bn-shadow-soft);
}
.mcf-bento .deep-empty-icon { font-size: 2rem; margin-bottom: 8px; opacity: 0.5; }
.mcf-bento .deep-empty-state h3 { font-size: 1.1rem; font-weight: 700; color: var(--bn-text); margin: 0 0 6px; }
.mcf-bento .deep-empty-state p { font-size: 0.88rem; color: var(--bn-text-dim); margin: 0; }
.mcf-bento .deep-section-intro {
    font-size: 0.92rem; color: var(--bn-text-dim);
    margin: 0 0 12px; line-height: 1.5;
}

/* Demo banner */
.mcf-bento .deep-demo-banner {
    background: rgba(var(--parent-accent-rgb),0.08); border: 1px solid rgba(var(--parent-accent-rgb),0.25);
    color: var(--parent-accent-deep); padding: 10px 14px; border-radius: var(--bn-radius-sm);
    font-size: 0.88rem; margin-bottom: 12px;
}

/* Co+ CTA (now should rarely show since stats are accessible) */
.mcf-bento .cs-deep-cta {
    background: linear-gradient(135deg, rgba(49,75,122,0.07), rgba(49,75,122,0.03));
    border: 1px solid rgba(49,75,122,0.18);
    border-radius: var(--bn-radius);
    padding: 18px 20px; margin-bottom: 16px;
    text-align: center; color: var(--bn-text);
}

@media (max-width: 640px) {
    .mcf-bento .deep-hero-compact { flex-direction: column; align-items: flex-start; }
    .mcf-bento .deep-hero-kpis { width: 100%; justify-content: space-around; }
    .mcf-bento .deep-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .mcf-bento .deep-tab { min-width: 110px; font-size: 0.82rem; padding: 8px 12px; }
    .mcf-bento .deep-difficulties-grid { grid-template-columns: 1fr; }
    .mcf-bento .deep-mult-header,
    .mcf-bento .deep-mult-row { grid-template-columns: 20px repeat(12, 1fr); }
    .mcf-bento .deep-mult-col-header,
    .mcf-bento .deep-mult-row-header { font-size: 0.6rem; padding: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.85.2 — Common parent sub-pages Apple Monochrome Override
 * Cible : .cs-* classes (purchases, settings, privacy, achievements)
 * sous .mcf-bento (additif, n'affecte pas .mcf-root standalone)
 * ═══════════════════════════════════════════════════════════════════ */

/* Hero / header */
.mcf-bento .cs-hero { padding: 20px 0; }
.mcf-bento .cs-hero h1 {
    font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--bn-text);
}
.mcf-bento .cs-breadcrumb {
    font-size: 0.82rem; color: var(--bn-text-muted); margin-bottom: 12px;
}
.mcf-bento .cs-breadcrumb a {
    color: var(--bn-text-dim); text-decoration: none;
}
.mcf-bento .cs-breadcrumb a:hover { color: var(--bn-text); text-decoration: underline; }

/* Achievements grid */
.mcf-bento .cs-achievements {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.mcf-bento .cs-achievement {
    display: flex; gap: 12px; padding: 14px;
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-sm); box-shadow: var(--bn-shadow-soft);
    transition: transform 0.15s, box-shadow 0.15s;
}
.mcf-bento .cs-achievement:hover {
    transform: translateY(-1px); box-shadow: var(--bn-shadow-hover);
}
.mcf-bento .cs-ach-icon { font-size: 24px; opacity: 0.9; }
.mcf-bento .cs-ach-title { font-size: 0.9rem; font-weight: 600; color: var(--bn-text); margin-bottom: 4px; }
.mcf-bento .cs-ach-date { font-size: 0.75rem; color: var(--bn-text-muted); }

/* Passes list */
.mcf-bento .cs-passes { display: flex; flex-direction: column; gap: 8px; }
.mcf-bento .cs-pass-item {
    display: flex; gap: 12px; padding: 14px 16px;
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-left: 3px solid var(--bn-blue);
    border-radius: var(--bn-radius-sm); box-shadow: var(--bn-shadow-soft);
}
.mcf-bento .cs-pass-icon { font-size: 22px; opacity: 0.85; }
.mcf-bento .cs-pass-title { font-weight: 600; color: var(--bn-text); margin-bottom: 4px; }
.mcf-bento .cs-pass-meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 0.78rem; color: var(--bn-text-muted);
}

/* Actions row */
.mcf-bento .cs-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Settings grid */
.mcf-bento .cs-settings-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.mcf-bento .cs-setting-field {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px;
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-sm); box-shadow: var(--bn-shadow-soft);
}
.mcf-bento .cs-setting-field label { font-size: 0.78rem; color: var(--bn-text-muted); font-weight: 500; }
.mcf-bento .cs-setting-field strong { font-size: 0.95rem; color: var(--bn-text); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
 * v1.86.0 — DRAWER SYSTEM (Apple slide-over panel)
 * Ouvre les sous-pages parent dans un panneau latéral sans quitter
 * le dashboard. Iframe avec ?embed=1, backdrop-blur, ESC pour fermer.
 * ═══════════════════════════════════════════════════════════════════ */
.bn-drawer {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; justify-content: flex-end;
}
.bn-drawer[hidden] { display: none; }
.bn-drawer-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    animation: bnFade 0.25s ease;
}
.bn-drawer-panel {
    position: relative; height: 100vh; width: min(880px, 92vw);
    background: #f5f5f7;
    border-left: 1px solid #d2d2d7;
    box-shadow: -16px 0 48px rgba(0,0,0,0.18);
    display: flex; flex-direction: column;
    animation: bnSlideIn 0.32s cubic-bezier(.32,.72,0,1);
}
@keyframes bnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bnSlideIn {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.bn-drawer-header {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px; height: 56px;
    background: rgba(255,255,255,0.85);
    border-bottom: 1px solid #e5e5e7;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    z-index: 2;
}
.bn-drawer-close {
    width: 36px; height: 36px; border-radius: 50%;
    background: #fafafa; border: 1px solid #d2d2d7;
    color: #1d1d1f; font-size: 18px; line-height: 1;
    cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bn-drawer-close:hover {
    background: #fff; border-color: #c7c7cc;
    transform: translateX(-2px);
}
.bn-drawer-title {
    flex: 1; min-width: 0;
    font-size: 1rem; font-weight: 600; color: #1d1d1f;
    letter-spacing: -0.01em; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bn-drawer-fullpage {
    font-size: 0.78rem; color: #515154;
    text-decoration: none; font-weight: 500;
    padding: 6px 12px; border-radius: 8px;
    background: transparent; transition: all 0.15s;
    white-space: nowrap; flex-shrink: 0;
}
.bn-drawer-fullpage:hover { background: #fafafa; color: #1d1d1f; }

.bn-drawer-loader {
    position: absolute; top: 56px; left: 0; right: 0;
    height: 2px; overflow: hidden;
    background: #e5e5e7;
    opacity: 0; transition: opacity 0.2s;
    z-index: 3;
}
.bn-drawer-loader.is-loading { opacity: 1; }
.bn-drawer-loader-bar {
    height: 100%; width: 30%;
    background: linear-gradient(90deg, transparent, #314B7A, transparent);
    animation: bnLoaderSweep 1.1s infinite ease-in-out;
}
@keyframes bnLoaderSweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

.bn-drawer-iframe {
    flex: 1; width: 100%; height: 100%;
    border: none; background: #f5f5f7;
    display: block;
}

@media (max-width: 640px) {
    .bn-drawer-panel { width: 100vw; }
    .bn-drawer-header { padding: 10px 14px; height: 52px; }
    .bn-drawer-fullpage { display: none; }
    .bn-drawer-loader { top: 52px; }
}

/* ═══════════════════════════════════════════════════
 * v1.86.2 — Invitation claim page [aca_invitation_claim]
 * ═══════════════════════════════════════════════════ */
.aca-invitation-card {
    max-width: 560px; margin: 60px auto; padding: 32px 28px;
    background: #fff; border: 1px solid #d2d2d7;
    border-radius: 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
    color: #1d1d1f;
}
.aca-invitation-card h1 {
    font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.aca-invitation-card h2 {
    font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em;
    margin: 0 0 12px; color: #1d1d1f;
}
.aca-invitation-hello { color: #515154; margin: 0 0 8px; font-size: 1.05rem; }
.aca-invitation-body { color: #515154; line-height: 1.5; margin: 0 0 24px; }
.aca-invitation-error h2 { color: #c8281f; }
.aca-invitation-card p { margin: 0 0 12px; }
.aca-invitation-card .aca-cta-btn { margin-right: 8px; margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════
 * v1.87.0 — Bento rich cells (passes détaillés, referral, events)
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Passes détaillés ─── */
.bn-pass-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bn-cell-border-soft);
}
.bn-pass-row:last-of-type { border-bottom: none; }
.bn-pass-info { flex: 1; min-width: 0; }
.bn-pass-info strong {
    display: block; font-size: 0.92rem; font-weight: 600;
    color: var(--bn-text); line-height: 1.2;
}
.bn-pass-info small {
    display: block; font-size: 0.72rem; color: var(--bn-text-muted);
    margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bn-pass-tag {
    font-size: 0.65rem; font-weight: 700; padding: 3px 8px;
    border-radius: 100px; text-transform: uppercase; letter-spacing: 0.04em;
    flex-shrink: 0;
}
.bn-pass-tag--active { background: rgba(52,199,89,0.12); color: #248a3d; }
.bn-pass-tag--cancelled { background: rgba(223,95,53,0.12); color: #b85d00; }
.bn-pass-link {
    display: inline-block; margin-top: 10px;
    font-size: 0.78rem; font-weight: 500; color: var(--bn-text-dim);
    text-decoration: none; transition: color 0.15s;
}
.bn-pass-link:hover { color: var(--bn-accent); }
.bn-pass-empty { padding: 8px 0; }
.bn-pass-empty p { font-size: 0.85rem; color: var(--bn-text-muted); margin: 0 0 6px; line-height: 1.4; }
.bn-pass-empty a { font-size: 0.85rem; color: var(--bn-accent); text-decoration: none; font-weight: 500; }

/* ─── Referral ─── */
.bn-cell--referral {
    display: flex; flex-direction: column;
}
.bn-referral-pitch {
    font-size: 0.82rem; color: var(--bn-text-dim); line-height: 1.4;
    margin: 4px 0 12px;
}
.bn-referral-copy {
    display: flex; gap: 6px; margin-bottom: 12px;
}
.bn-referral-copy input {
    flex: 1; height: 34px; padding: 0 10px;
    font-size: 0.78rem; color: var(--bn-text);
    background: #fafafa; border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-xs);
    font-family: 'SF Mono', 'Consolas', monospace;
    overflow: hidden; text-overflow: ellipsis;
}
.bn-ref-btn {
    height: 34px; padding: 0 14px;
    background: var(--bn-text); color: #fff;
    border: none; border-radius: var(--bn-radius-xs);
    font-size: 0.78rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s; flex-shrink: 0;
    font-family: var(--bn-font);
}
.bn-ref-btn:hover { background: #000; }
.bn-referral-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--bn-cell-border-soft);
}
.bn-referral-stats > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bn-referral-stats strong {
    font-size: 1.1rem; font-weight: 700; color: var(--bn-text);
    line-height: 1.1;
}
.bn-referral-stats small {
    font-size: 0.65rem; color: var(--bn-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px;
}

/* ─── Events à venir ─── */
.bn-cell--events { display: flex; flex-direction: column; }
.bn-events-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bn-event-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; border-radius: var(--bn-radius-xs);
    background: #fafafa; border: 1px solid var(--bn-cell-border-soft);
    text-decoration: none; transition: all 0.15s;
}
.bn-event-row:hover {
    background: #fff; border-color: var(--bn-cell-border);
    transform: translateX(2px);
}
.bn-event-date {
    display: flex; flex-direction: column; align-items: center;
    min-width: 36px; padding: 4px 0;
    border-right: 1px solid var(--bn-cell-border-soft);
    padding-right: 10px;
    flex-shrink: 0;
}
.bn-event-day {
    font-size: 1.1rem; font-weight: 700; color: var(--bn-text); line-height: 1;
}
.bn-event-month {
    font-size: 0.62rem; font-weight: 600;
    color: var(--bn-accent); letter-spacing: 0.06em;
    margin-top: 2px;
}
.bn-event-info { flex: 1; min-width: 0; }
.bn-event-info strong {
    display: block; font-size: 0.85rem; font-weight: 600;
    color: var(--bn-text); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bn-event-info small {
    display: block; font-size: 0.72rem; color: var(--bn-text-muted);
    margin-top: 2px;
}
.bn-events-empty { padding: 12px 0; }
.bn-events-empty p { font-size: 0.85rem; color: var(--bn-text-muted); margin: 0 0 4px; }
.bn-events-empty a { font-size: 0.85rem; color: var(--bn-accent); text-decoration: none; font-weight: 500; }
.bn-cell-link {
    display: inline-block; margin-top: 10px;
    font-size: 0.78rem; font-weight: 500; color: var(--bn-text-dim);
    text-decoration: none; transition: color 0.15s;
}
.bn-cell-link:hover { color: var(--bn-accent); }

/* ═══════════════════════════════════════════════════
 * v1.88.0 — Bento empty state (no children yet)
 * ═══════════════════════════════════════════════════ */
.bn-empty-hero {
    max-width: 540px; margin: 60px auto;
    background: var(--bn-cell); border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius); padding: 48px 32px;
    text-align: center; box-shadow: var(--bn-shadow-soft);
}
.bn-empty-icon {
    font-size: 56px; line-height: 1; margin-bottom: 16px;
    opacity: 0.85;
}
.bn-empty-hero h2 {
    font-size: 1.6rem; font-weight: 700; color: var(--bn-text);
    letter-spacing: -0.02em; margin: 0 0 12px;
}
.bn-empty-hero p {
    font-size: 0.95rem; color: var(--bn-text-dim);
    line-height: 1.5; margin: 0 0 24px;
}
.bn-empty-hero .mcf-btn {
    padding: 12px 24px; font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.91.0 — Compact child cards expandable + Co+ nudge MiniCo
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Compact child card devient <details> ─── */
.bn-cell--child-sm[open] { padding-bottom: 14px; }
.bn-csm-summary {
    cursor: pointer; list-style: none;
    display: block; padding: 0;
}
.bn-csm-summary::-webkit-details-marker { display: none; }
.bn-csm-summary:hover { color: var(--bn-text); }
.bn-csm-expand {
    margin-left: auto;
    font-size: 14px; color: var(--bn-text-muted);
    transition: transform 0.2s;
    align-self: flex-start;
}
.bn-cell--child-sm[open] .bn-csm-expand { transform: rotate(180deg); }

.bn-csm-preview {
    padding: 12px 0;
    margin-top: 8px;
    border-top: 1px solid var(--bn-cell-border-soft);
    display: flex; flex-direction: column; gap: 6px;
}
.bn-csm-insight {
    display: flex; gap: 8px; align-items: center;
    padding: 6px 8px; border-radius: 6px;
    font-size: 12px; line-height: 1.3;
    background: #fafafa;
}
.bn-csm-insight-icon { font-size: 14px; }
.bn-csm-insight-win { border-left: 3px solid var(--bn-green); }
.bn-csm-insight-struggle { border-left: 3px solid var(--bn-orange); }
.bn-csm-tip {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 8px 10px; margin-top: 4px;
    background: var(--aca-minico-soft, rgba(49,75,122,0.07));
    border: 1px solid var(--aca-minico-border, rgba(49,75,122,0.18));
    border-radius: 6px;
}
.bn-csm-tip img {
    border-radius: 50%; padding: 2px; background: #fff;
    border: 1px solid rgba(49,75,122,0.2);
    flex-shrink: 0;
}
.bn-csm-tip span {
    font-size: 11px; color: var(--bn-text); line-height: 1.35;
}
.bn-csm-empty {
    font-size: 12px; color: var(--bn-text-muted);
    text-align: center; margin: 8px 0; font-style: italic;
}
.bn-csm-action-primary {
    background: var(--bn-text) !important; color: #fff !important;
    border-color: var(--bn-text) !important;
}
.bn-csm-action-primary:hover { background: #000 !important; }

/* ─── Co+ smart upsell nudge (in stats highlights) ─── */
.minico-coplus-nudge {
    display: flex; gap: 14px; align-items: center;
    padding: 16px 18px; margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(49,75,122,0.07), rgba(var(--parent-accent-rgb),0.06));
    border: 1px solid rgba(49,75,122,0.18);
    border-radius: 14px;
}
.minico-coplus-nudge-icon {
    font-size: 28px; flex-shrink: 0;
}
.minico-coplus-nudge-body { flex: 1; }
.minico-coplus-nudge-body strong {
    display: block; font-size: 15px; font-weight: 700;
    color: var(--bn-text); margin-bottom: 4px;
}
.minico-coplus-nudge-body p {
    font-size: 13px; color: var(--bn-text-dim);
    margin: 0; line-height: 1.4;
}
.minico-coplus-cta {
    display: inline-block; padding: 10px 18px; flex-shrink: 0;
    background: #314B7A;
    color: #fff; font-size: 13px; font-weight: 600;
    text-decoration: none; border-radius: 100px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.minico-coplus-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(49,75,122,0.3);
}

@media (max-width: 640px) {
    .minico-coplus-nudge { flex-direction: column; align-items: flex-start; }
    .minico-coplus-cta { width: 100%; text-align: center; }
}

/* Cursor pointer sur tip blocks (signale clickable pour analytics) */
[data-minico-topic] { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════
 * v1.92.0 — Goal quickadd form + Print styles
 * ═══════════════════════════════════════════════════════════════════ */

.bn-goal-empty {
    font-size: 13px; color: var(--bn-text-muted);
    text-align: center; padding: 16px 0; margin: 0;
}
.bn-goal-quickadd {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bn-cell-border-soft);
}
.bn-goal-quickadd summary {
    cursor: pointer; list-style: none;
    font-size: 12px; font-weight: 500;
    color: var(--bn-text-dim);
    padding: 6px 0;
    user-select: none;
}
.bn-goal-quickadd summary::-webkit-details-marker { display: none; }
.bn-goal-quickadd summary:hover { color: var(--bn-text); }
.bn-goal-quickadd[open] summary { color: var(--bn-text); }
.bn-goal-form {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 8px;
}
.bn-goal-form input[type="text"] {
    height: 32px; padding: 0 10px;
    font-size: 0.85rem;
    border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-xs);
    background: #fff;
}
.bn-goal-form-row { display: flex; gap: 6px; }
.bn-goal-form select {
    flex: 1; height: 32px; padding: 0 8px;
    font-size: 0.82rem;
    border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-xs);
    background: #fff;
}

/* ─── MiniCo print styles ─── */
.minico-print-actions {
    display: flex; justify-content: flex-end;
    margin-bottom: 16px;
}
.minico-print-btn {
    padding: 8px 16px; background: #fafafa;
    border: 1px solid #d2d2d7; border-radius: 8px;
    font-size: 0.85rem; color: #1d1d1f; cursor: pointer;
    font-family: -apple-system, sans-serif;
    transition: background 0.15s;
}
.minico-print-btn:hover { background: #fff; }

@media print {
    .no-print, .fam-tabs, .bn-header, .bn-drawer, .bn-pill,
    body > #wpadminbar, body > header, body > footer, body > nav { display: none !important; }
    body { background: #fff !important; padding: 0 !important; }
    .minico-highlights { max-width: 100% !important; }
    .minico-card { break-inside: avoid; page-break-inside: avoid; }
    .minico-coplus-nudge { display: none !important; }
    a { color: #1d1d1f !important; text-decoration: none !important; }
    /* Add a page header */
    .minico-highlights::before {
        content: "Récap MiniCo — " attr(data-child-name) " · " attr(data-date);
        display: block;
        font-size: 18px; font-weight: 700;
        color: #1d1d1f; margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid #1d1d1f;
    }
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.93.0 — Co+ upgrade page (Apple Monochrome refonte)
 * ═══════════════════════════════════════════════════════════════════ */

.mcf-bento.upg-root { padding: 24px; max-width: 1100px; margin: 0 auto; }

/* Hero */
.upg-hero {
    text-align: center;
    padding: 48px 24px 32px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border: 1px solid #d2d2d7;
    border-radius: 22px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
}
.upg-hero-badge { margin-bottom: 14px; }
.upg-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 12px; font-weight: 600;
    background: var(--bn-accent-soft); color: var(--bn-accent);
    letter-spacing: 0.04em;
}
.upg-badge--beta { background: rgba(49,75,122,0.08); color: #314B7A; }

.upg-title {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700; letter-spacing: -0.03em;
    color: var(--bn-text); margin: 0 0 12px;
    line-height: 1.1;
}
.upg-lede {
    font-size: 1.05rem; color: var(--bn-text-dim);
    max-width: 560px; margin: 0 auto;
    line-height: 1.5;
}

/* CTA card */
.upg-cta-card {
    text-align: center;
    background: #ffffff; border: 1px solid #d2d2d7;
    border-radius: 22px; padding: 36px 28px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
}
.upg-cta-card--success { background: linear-gradient(180deg, #ffffff, rgba(52,199,89,0.04)); border-color: rgba(52,199,89,0.25); }
.upg-cta-card h2 {
    font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--bn-text); margin: 0 0 8px;
}
.upg-cta-card > p {
    color: var(--bn-text-dim); margin: 0 0 24px;
    font-size: 0.95rem; line-height: 1.5;
}
.upg-cta-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(52,199,89,0.12); color: #248a3d;
    font-size: 28px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}

/* Buttons */
.upg-btn {
    display: inline-block; padding: 12px 28px;
    border-radius: 100px; font-size: 0.95rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: all 0.15s; border: none;
    font-family: var(--bn-font);
}
.upg-btn--primary {
    background: var(--bn-text); color: #ffffff;
}
.upg-btn--primary:hover {
    background: #000; transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.upg-btn--secondary {
    background: #fafafa; color: var(--bn-text);
    border: 1px solid var(--bn-cell-border);
}
.upg-btn--secondary:hover { background: #fff; border-color: #c7c7cc; }
.upg-btn--full { display: block; width: 100%; }

.upg-btn-link {
    display: inline-block; padding: 10px 16px;
    color: var(--bn-text-muted); text-decoration: none;
    font-size: 0.9rem; font-weight: 500;
    margin-left: 8px;
}
.upg-btn-link:hover { color: var(--bn-text); text-decoration: underline; }

.upg-form-inline {
    display: inline-flex; align-items: center; gap: 8px;
    flex-wrap: wrap; justify-content: center;
}

.upg-fineprint {
    font-size: 0.82rem; color: var(--bn-text-muted);
    margin: 18px 0 0;
}

/* Pricing grid */
.upg-pricing-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; max-width: 560px; margin: 0 auto;
}
.upg-price-card {
    background: #fafafa; border: 1px solid var(--bn-cell-border);
    border-radius: 16px; padding: 20px;
    position: relative; text-align: left;
}
.upg-price-card--featured {
    background: #ffffff; border-color: var(--bn-text);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.upg-price-badge {
    position: absolute; top: -10px; right: 14px;
    background: var(--bn-text); color: #fff;
    padding: 3px 10px; border-radius: 100px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.upg-price-label {
    font-size: 11px; font-weight: 600;
    color: var(--bn-text-muted); text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 8px;
}
.upg-price-amount {
    font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--bn-text); margin-bottom: 4px; line-height: 1;
}
.upg-price-amount small {
    font-size: 0.7rem; font-weight: 500; color: var(--bn-text-muted);
}
.upg-price-equiv {
    font-size: 0.78rem; color: var(--bn-text-muted);
    margin-bottom: 14px;
}
.upg-savings { color: #248a3d; }

/* Compare */
.upg-compare {
    background: #ffffff; border: 1px solid #d2d2d7;
    border-radius: 22px; padding: 32px 28px;
    margin-bottom: 24px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
}
.upg-compare h2 {
    text-align: center; font-size: 1.3rem; font-weight: 700;
    letter-spacing: -0.02em; color: var(--bn-text);
    margin: 0 0 24px;
}
.upg-compare-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.upg-compare-col {
    padding: 20px;
    background: #fafafa; border: 1px solid var(--bn-cell-border);
    border-radius: 14px;
}
.upg-compare-col--featured {
    background: linear-gradient(180deg, #ffffff, rgba(49,75,122,0.04));
    border-color: var(--bn-accent);
    box-shadow: 0 4px 16px rgba(27,42,71,0.10);
}
.upg-compare-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 1px solid var(--bn-cell-border-soft);
}
.upg-compare-head h3 {
    font-size: 1.2rem; font-weight: 700; color: var(--bn-text);
    margin: 0; letter-spacing: -0.01em;
}
.upg-compare-price {
    font-size: 0.85rem; color: var(--bn-text-muted); font-weight: 600;
}
.upg-compare-col--featured .upg-compare-price { color: var(--bn-accent); }
.upg-compare-list {
    list-style: none; padding: 0; margin: 0;
}
.upg-compare-list li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 6px 0; font-size: 0.9rem;
    color: var(--bn-text);
}
.upg-li-check {
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(52,199,89,0.12); color: #248a3d;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
}
.upg-li-plus {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--bn-accent-soft); color: var(--bn-accent);
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
}

/* Pat signature */
.upg-pat {
    text-align: center; font-size: 0.88rem;
    color: var(--bn-text-dim);
    margin: 32px 0 12px;
}
.upg-pat a { color: var(--bn-accent); text-decoration: none; font-weight: 600; }
.upg-pat a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .upg-title { font-size: 1.8rem; }
    .upg-pricing-grid, .upg-compare-grid { grid-template-columns: 1fr; }
    .upg-cta-card { padding: 28px 20px; }
    .upg-compare { padding: 24px 18px; }
    .upg-form-inline { flex-direction: column; gap: 8px; }
    .upg-btn-link { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.93.0 — Dashboard tour overlay
 * (v2.0.124.0 — les styles du téléversement de photo sont retirés avec
 * la fonctionnalité : l'avatar vient de l'Académie, jamais d'une photo.)
 * ═══════════════════════════════════════════════════════════════════ */

/* Dashboard tour overlay
 *
 * 🔴 2026-08-17 — LA BULLE PASSAIT SOUS LA CELLULE QU'ELLE MONTRE, et l'étape
 * « Actions rapides » devenait un cul-de-sac : on ne pouvait plus cliquer
 * « Suivant », donc plus terminer le tour. Signalé par Patrice, reproduit et
 * mesuré : en posant la bulle sur la cellule éclairée,
 * `document.elementFromPoint()` au centre du bouton rend
 * `bn-cell--actions aca-tour-highlight`, jamais le bouton.
 *
 * ⛔ La cause n'était pas le `z-index: 2` de la bulle, qui a l'air minuscule
 * mais ne l'est pas : `.aca-tour-overlay` portait `z-index: 10001`, ce qui
 * CRÉE un contexte d'empilement. Tout ce qu'il contient est donc plafonné à
 * 10001 vis-à-vis de la page, quelle que soit sa valeur interne. Or
 * `.aca-tour-highlight` vaut 10002 et vit, lui, dans le contexte racine :
 * l'élément mis en vedette passait au-dessus de la visite au complet.
 *
 * La correction ne monte pas les chiffres au hasard, elle range les trois
 * couches dans le seul ordre qui a du sens, toutes dans le MÊME contexte :
 *
 *     voile 10001  <  élément en vedette 10002  <  bulle 10003
 *
 * L'ordre se lit : le voile assombrit la page, l'élément montré perce le
 * voile, et la bulle qui l'explique reste au-dessus de tout. C'est aussi
 * pourquoi l'enveloppe ne doit porter AUCUN `z-index` : lui en donner un
 * réenfermerait la bulle et ramènerait le défaut.
 */
.aca-tour-overlay {
    /* ⛔ NI z-index, NI position, et la seconde a coûté une correction ratée.
     * Retirer le `z-index: 10001` ne suffisait pas : `position: fixed` crée un
     * contexte d'empilement À ELLE SEULE, même sans z-index. La bulle restait
     * donc enfermée, et l'élément en vedette continuait de passer par-dessus.
     * Remesuré après ce premier essai : bouton toujours inatteignable.
     *
     * `display: contents` fait disparaître l'enveloppe de la mise en page. Ses
     * deux enfants, le voile et la bulle, se placent alors directement dans le
     * contexte racine, où leurs z-index veulent enfin dire quelque chose. Elle
     * reste dans le HTML comme poignée : le script la masque d'un coup pour
     * terminer la visite. */
    display: contents;
}
.aca-tour-backdrop {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    pointer-events: auto;
}
/* v2.0.197.0 — LA FENÊTRE EST AU CENTRE, ET ELLE N'EN BOUGE PLUS.
 *
 * Demande de Pat : « les capsules ne sont jamais à la bonne place, jamais
 * collées sur la tuile ». Toute la géométrie est partie avec l'ancienne bulle :
 * plus de `top`/`left` calculés, plus de rattrapage dans l'écran, donc plus de
 * bulle qui se décolle de ce qu'elle explique. La tuile n'est plus désignée par
 * la POSITION du texte, elle est MONTRÉE juste au-dessus de lui. */
.aca-tour-modal {
    position: fixed; z-index: 10003;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: #fff; border: 1px solid #d2d2d7;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.32);
    width: 420px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    overflow: auto;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
    color: #1d1d1f;
    pointer-events: auto;
    animation: acaTourIn 0.25s ease;
}
.aca-tour-modal:focus { outline: none; }
.aca-tour-modal:focus-visible { outline: 3px solid #314B7A; outline-offset: 3px; }
.aca-tour-corps { padding: 18px 20px; }

/* La scène : la COPIE de la tuile, posée au-dessus de son explication.
 * `pointer-events: none` parce qu'elle n'est pas la vraie tuile : un parent
 * qui cliquerait dedans croirait agir sans que rien ne se passe. */
.aca-tour-stage {
    background: #f5f5f7;
    border-bottom: 1px solid #e3e3e8;
    border-radius: 18px 18px 0 0;
    padding: 16px;
    max-height: 46vh; overflow: hidden;
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
}
.aca-tour-stage[hidden] { display: none; }
.aca-tour-copie {
    max-width: 100%;
    margin: 0 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border-radius: 14px;
}

/* La jauge ne part jamais de zéro : dès la 1re étape une part est faite. */
.aca-tour-jauge {
    display: block; height: 4px; border-radius: 999px;
    background: #e3e3e8; overflow: hidden; margin-bottom: 10px;
}
.aca-tour-jauge-barre {
    display: block; height: 100%; width: 20%;
    background: #314B7A; border-radius: 999px;
    transition: width 0.28s ease;
}
@media (prefers-reduced-motion: reduce) {
    .aca-tour-modal { animation: none; }
    .aca-tour-jauge-barre { transition: none; }
}
@keyframes acaTourIn {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.aca-tour-progress {
    font-size: 11px; font-weight: 600;
    color: #707075; letter-spacing: 0.06em;
    text-transform: uppercase; margin-bottom: 8px;
}
.aca-tour-title {
    font-size: 1.05rem; font-weight: 700;
    color: #1d1d1f; margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.aca-tour-body {
    font-size: 0.88rem; color: #515154;
    line-height: 1.5; margin: 0 0 16px;
}
.aca-tour-actions {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px;
}
.aca-tour-skip {
    font-size: 0.78rem; color: #707075;
    text-decoration: none;
}
.aca-tour-skip:hover { color: #1d1d1f; text-decoration: underline; }
.aca-tour-nav { display: flex; gap: 6px; }
.aca-tour-btn {
    padding: 8px 14px; border-radius: 8px;
    font-size: 0.82rem; font-weight: 500;
    border: none; cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.aca-tour-btn--ghost {
    background: transparent; color: #515154;
}
.aca-tour-btn--ghost:hover:not(:disabled) {
    background: #fafafa; color: #1d1d1f;
}
.aca-tour-btn--ghost:disabled { opacity: 0.4; cursor: not-allowed; }
.aca-tour-btn--primary {
    background: #1d1d1f; color: #fff;
}
.aca-tour-btn--primary:hover { background: #000; }

/* Highlight target elements during tour */
/* v2.0.197.0 — `.aca-tour-highlight` est RETIRÉE, et pas seulement inutilisée.
 * Elle perçait le voile pour désigner la vraie tuile, et c'est elle qui a causé
 * la bataille de z-index documentée plus haut : posée dans le contexte racine à
 * 10002, elle passait par-dessus la visite entière. La tuile étant maintenant
 * COPIÉE dans la fenêtre, plus rien n'a besoin de percer le voile. */

/* ═══════════════════════════════════════════════════════════════════
 * v1.94.0 — Command Palette (Cmd+K) + Family Timeline
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Command Palette ─── */
.aca-cmdk {
    position: fixed; inset: 0; z-index: 10005;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 80px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
}
.aca-cmdk[hidden] { display: none; }
.aca-cmdk-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.aca-cmdk-panel {
    position: relative; width: 560px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 160px);
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid #d2d2d7;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25);
    display: flex; flex-direction: column;
    animation: acaCmdkIn 0.18s ease;
}
@keyframes acaCmdkIn {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
.aca-cmdk-input-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e5e7;
}
.aca-cmdk-icon { font-size: 18px; color: #707075; }
.aca-cmdk-input {
    flex: 1; border: none; outline: none;
    background: transparent; font-size: 1rem;
    color: #1d1d1f; font-family: inherit;
}
.aca-cmdk-kbd, .aca-cmdk-footer kbd {
    display: inline-block; padding: 2px 6px;
    background: #fafafa; border: 1px solid #d2d2d7;
    border-radius: 4px; font-size: 0.7rem;
    font-family: 'SF Mono', 'Consolas', monospace;
    color: #707075;
}
.aca-cmdk-list {
    list-style: none; margin: 0; padding: 6px 8px;
    overflow-y: auto; flex: 1;
}
.aca-cmdk-cat {
    font-size: 0.68rem; font-weight: 600;
    color: #707075; text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 10px 6px;
    margin-top: 4px;
}
.aca-cmdk-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; border-radius: 8px;
    cursor: pointer; transition: background 0.1s;
}
.aca-cmdk-item.is-selected {
    background: rgba(49,75,122,0.08);
}
.aca-cmdk-item-icon { font-size: 18px; width: 22px; text-align: center; }
.aca-cmdk-item-label { font-size: 0.92rem; color: #1d1d1f; }
.aca-cmdk-empty {
    text-align: center; padding: 30px 10px;
    color: #707075; font-size: 0.88rem;
}
.aca-cmdk-footer {
    display: flex; gap: 12px;
    padding: 8px 16px; font-size: 0.75rem;
    color: #707075; border-top: 1px solid #e5e5e7;
}

/* ─── Family Timeline ─── */
.ftl-root { max-width: 800px; margin: 0 auto; padding: 24px; }
.ftl-hero {
    text-align: center; padding: 24px 0 32px;
}
.ftl-hero h1 {
    font-size: 1.8rem; font-weight: 700;
    letter-spacing: -0.02em; color: var(--bn-text);
    margin: 0 0 8px;
}
.ftl-hero p {
    color: var(--bn-text-dim); font-size: 1rem;
    margin: 0;
}
.ftl-timeline {
    position: relative;
}
.ftl-timeline::before {
    content: ''; position: absolute;
    left: 80px; top: 8px; bottom: 8px;
    width: 2px; background: var(--bn-cell-border-soft);
}
.ftl-day {
    display: grid; grid-template-columns: 100px 1fr; gap: 0;
    margin-bottom: 24px;
}
.ftl-day-marker {
    position: relative; padding-top: 4px;
    text-align: right; padding-right: 28px;
}
.ftl-day-marker::after {
    content: ''; position: absolute;
    right: -7px; top: 8px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--bn-accent);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--bn-cell-border);
}
.ftl-day-label {
    display: block; font-size: 0.88rem; font-weight: 600;
    color: var(--bn-text); margin-bottom: 4px;
}
.ftl-day-count {
    display: inline-block; font-size: 0.7rem;
    background: var(--bn-cell-border-soft);
    padding: 2px 8px; border-radius: 100px;
    color: var(--bn-text-muted); font-weight: 500;
}
.ftl-day-events {
    display: flex; flex-direction: column; gap: 8px;
}
.ftl-event {
    display: flex; gap: 12px; align-items: flex-start;
    background: #fff; border: 1px solid var(--bn-cell-border);
    border-radius: 12px; padding: 12px 14px;
    box-shadow: var(--bn-shadow-soft);
    transition: transform 0.15s, box-shadow 0.15s;
}
.ftl-event:hover {
    transform: translateY(-1px);
    box-shadow: var(--bn-shadow-hover);
}
.ftl-event-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: #fafafa; display: flex;
    align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.ftl-event-body { flex: 1; min-width: 0; }
.ftl-event-title {
    font-size: 0.92rem; font-weight: 600;
    color: var(--bn-text); margin-bottom: 2px;
}
.ftl-event-detail {
    font-size: 0.8rem; color: var(--bn-text-dim);
    margin-bottom: 4px;
}
.ftl-event-meta {
    display: flex; gap: 8px; align-items: center;
    font-size: 0.7rem;
}
.ftl-event-child {
    background: var(--bn-accent-soft); color: var(--bn-accent);
    padding: 1px 8px; border-radius: 100px;
    font-weight: 600;
}
.ftl-event-source {
    color: var(--bn-text-muted);
}
.ftl-event-time {
    color: var(--bn-text-muted); margin-left: auto;
}
.ftl-empty {
    text-align: center; padding: 60px 20px;
    background: #fff; border: 1px solid var(--bn-cell-border);
    border-radius: 18px; box-shadow: var(--bn-shadow-soft);
}
.ftl-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.6; }
.ftl-empty h3 {
    font-size: 1.2rem; font-weight: 700;
    color: var(--bn-text); margin: 0 0 8px;
}
.ftl-empty p {
    color: var(--bn-text-dim); font-size: 0.92rem;
    line-height: 1.5; margin: 0; max-width: 400px; margin: 0 auto;
}

@media (max-width: 640px) {
    .ftl-timeline::before { left: 14px; }
    .ftl-day { grid-template-columns: 1fr; gap: 8px; }
    .ftl-day-marker { padding-right: 0; padding-left: 28px; text-align: left; }
    .ftl-day-marker::after { right: auto; left: 7px; }
    .aca-cmdk { padding-top: 20px; }
    .aca-cmdk-panel { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.96.0 — Daily Briefing (welcome back greeting + smart morning summary)
 * ═══════════════════════════════════════════════════════════════════ */

.aca-briefing {
    max-width: 1200px; margin: 0 auto 16px;
    font-family: var(--bn-font, -apple-system, sans-serif);
}

/* Full mode — first visit of day */
.aca-briefing--full {
    background: linear-gradient(135deg, #ffffff, #fafafa);
    border: 1px solid var(--bn-cell-border, #d2d2d7);
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
    animation: acaBriefingIn 0.35s cubic-bezier(.32,.72,0,1);
}
@keyframes acaBriefingIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

.aca-briefing-greeting {
    display: flex; align-items: flex-start; gap: 16px;
}
.aca-briefing-emoji {
    font-size: 36px; line-height: 1; flex-shrink: 0;
    margin-top: 2px;
}
.aca-briefing-greeting > div { flex: 1; min-width: 0; }
.aca-briefing-greeting h2 {
    font-size: 1.5rem; font-weight: 700;
    letter-spacing: -0.02em; color: var(--bn-text, #1d1d1f);
    margin: 0 0 4px;
}
.aca-briefing-sub {
    font-size: 0.95rem; color: var(--bn-text-dim, #515154);
    margin: 0; line-height: 1.4;
}
.aca-briefing-close {
    background: none; border: none;
    font-size: 1.5rem; color: var(--bn-text-muted, #707075);
    cursor: pointer; line-height: 1; padding: 4px 8px;
    text-decoration: none; flex-shrink: 0;
    border-radius: 8px; transition: background 0.15s;
}
.aca-briefing-close:hover {
    background: rgba(0,0,0,0.05);
    color: var(--bn-text, #1d1d1f);
}

.aca-briefing-reco {
    display: flex; gap: 12px; align-items: flex-start;
    margin-top: 14px; padding: 12px 14px;
    background: var(--aca-minico-soft, rgba(49,75,122,0.07));
    border: 1px solid var(--aca-minico-border, rgba(49,75,122,0.18));
    border-radius: 12px;
}
.aca-briefing-reco-icon {
    font-size: 18px; flex-shrink: 0;
    margin-top: 1px;
}
.aca-briefing-reco p {
    margin: 0; font-size: 0.9rem;
    color: var(--bn-text, #1d1d1f); line-height: 1.45;
}
.aca-briefing-reco strong { font-weight: 600; }

/* Compact mode — repeat visits same day */
.aca-briefing--compact {
    display: flex; gap: 10px; align-items: center;
    padding: 0 4px;
    margin-bottom: 12px;
}
.aca-briefing-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 100px;
    background: #ffffff; border: 1px solid var(--bn-cell-border, #d2d2d7);
    font-size: 0.82rem; font-weight: 500;
    color: var(--bn-text, #1d1d1f);
    box-shadow: var(--bn-shadow-soft);
}
.aca-briefing-pill-meta {
    font-size: 0.78rem; color: var(--bn-text-muted, #707075);
}

@media (max-width: 640px) {
    .aca-briefing-greeting { flex-wrap: wrap; }
    .aca-briefing-emoji { font-size: 28px; }
    .aca-briefing-greeting h2 { font-size: 1.2rem; }
    .aca-briefing-sub { font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.98.0 — MiniCo Ask cell (parent question → Pat répond)
 * ═══════════════════════════════════════════════════════════════════ */

.bn-cell--ask-minico {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.bn-ask-intro {
    display: flex; gap: 10px; align-items: center;
    margin: 10px 0 14px;
}
.bn-ask-avatar {
    border-radius: 50%; background: #fff;
    border: 1px solid var(--aca-minico-border, rgba(49,75,122,0.18));
    padding: 2px; flex-shrink: 0;
}
.bn-ask-intro p {
    font-size: 0.85rem; color: var(--bn-text-dim);
    margin: 0; line-height: 1.4;
}
.bn-ask-form {
    display: flex; flex-direction: column; gap: 8px;
}
.bn-ask-form textarea {
    width: 100%; font-size: 0.88rem;
    padding: 10px 12px; border: 1px solid var(--bn-cell-border);
    border-radius: 10px; background: #fff;
    color: var(--bn-text); font-family: var(--bn-font);
    resize: vertical; min-height: 70px;
    transition: border 0.15s, box-shadow 0.15s;
}
.bn-ask-form textarea:focus {
    outline: none; border-color: var(--aca-minico, #314B7A);
    box-shadow: 0 0 0 3px rgba(49,75,122,0.08);
}
.bn-ask-actions {
    display: flex; justify-content: space-between; align-items: center;
}
.bn-ask-counter { font-size: 0.7rem; color: var(--bn-text-muted); }
.bn-ask-btn {
    padding: 8px 16px; border-radius: 100px;
    background: var(--bn-text); color: #fff;
    border: none; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; transition: background 0.15s;
    font-family: var(--bn-font);
}
.bn-ask-btn:hover:not(:disabled) { background: #000; }
.bn-ask-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bn-ask-status {
    font-size: 0.8rem; padding: 8px 10px;
    border-radius: 8px; margin: 0;
}
.bn-ask-status--success { background: rgba(52,199,89,0.08); color: #248a3d; border: 1px solid rgba(52,199,89,0.2); }
.bn-ask-status--warn    { background: rgba(223,95,53,0.08); color: #b85d00; border: 1px solid rgba(223,95,53,0.2); }
.bn-ask-status--error   { background: rgba(255,59,48,0.08); color: #c8281f; border: 1px solid rgba(255,59,48,0.2); }

.bn-ask-history {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--bn-cell-border-soft);
}
.bn-ask-history summary {
    cursor: pointer; list-style: none;
    font-size: 12px; font-weight: 500;
    color: var(--bn-text-dim);
    user-select: none;
}
.bn-ask-history summary::-webkit-details-marker { display: none; }
.bn-ask-history-list {
    display: flex; flex-direction: column; gap: 12px;
    margin-top: 10px;
}
.bn-ask-item {
    background: #fafafa; border: 1px solid var(--bn-cell-border-soft);
    border-radius: 10px; padding: 10px 12px;
}
.bn-ask-item--answered { border-left: 3px solid var(--bn-green); }
.bn-ask-item--pending  { border-left: 3px solid var(--bn-orange); }
.bn-ask-q, .bn-ask-a { font-size: 0.82rem; }
.bn-ask-q { margin-bottom: 8px; }
.bn-ask-a { padding-top: 8px; border-top: 1px solid var(--bn-cell-border-soft); }
.bn-ask-q-label, .bn-ask-a-label {
    display: block; font-size: 0.7rem; font-weight: 600;
    color: var(--bn-text-muted); margin-bottom: 3px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.bn-ask-a-label { color: var(--bn-accent); }
.bn-ask-q p, .bn-ask-a p {
    margin: 0; color: var(--bn-text); line-height: 1.4;
}
.bn-ask-pending {
    font-size: 0.78rem; color: var(--bn-text-muted);
    font-style: italic; margin: 6px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════
 * v1.99.0 — Family Notes + Birthday Reminders
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Family Notes cell ─── */
.bn-cell--notes { display: flex; flex-direction: column; }
.bn-notes-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.bn-note-item {
    padding: 10px 12px; background: #fafafa;
    border-left: 3px solid var(--parent-accent, #FFB612);
    border-radius: 8px; position: relative;
}
.bn-note-body {
    font-size: 0.85rem; color: var(--bn-text);
    line-height: 1.4;
}
.bn-note-meta {
    display: flex; gap: 6px; align-items: center;
    margin-top: 6px;
    font-size: 0.7rem; color: var(--bn-text-muted);
}
.bn-note-delete {
    background: none; border: none; cursor: pointer;
    margin-left: auto; padding: 2px 6px;
    font-size: 14px; line-height: 1;
    color: var(--bn-text-muted); border-radius: 4px;
    transition: all 0.15s;
}
.bn-note-delete:hover { color: var(--bn-red); background: rgba(255,59,48,0.08); }
.bn-notes-empty {
    font-size: 0.82rem; color: var(--bn-text-muted);
    font-style: italic; margin: 10px 0 12px;
    line-height: 1.4;
}
.bn-notes-add {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--bn-cell-border-soft);
}
.bn-notes-add summary {
    cursor: pointer; list-style: none;
    font-size: 12px; font-weight: 500;
    color: var(--bn-text-dim);
    user-select: none;
}
.bn-notes-add summary::-webkit-details-marker { display: none; }
.bn-notes-form {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 8px;
}
.bn-notes-form textarea {
    width: 100%; font-size: 0.82rem;
    padding: 8px 10px; border: 1px solid var(--bn-cell-border);
    border-radius: 8px; background: #fff;
    color: var(--bn-text); font-family: var(--bn-font);
    resize: vertical; min-height: 50px;
}
.bn-notes-form textarea:focus {
    outline: none; border-color: var(--bn-accent);
    box-shadow: 0 0 0 3px var(--bn-accent-soft);
}

/* ─── Birthday Reminder banner ─── */
.aca-birthday-banner {
    max-width: 1200px; margin: 0 auto 12px;
    display: flex; gap: 14px; align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(var(--parent-accent-rgb),0.12), rgba(223,95,53,0.06));
    border: 1px solid rgba(var(--parent-accent-rgb),0.32);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    font-family: var(--bn-font);
}
.aca-birthday-banner--today {
    background: linear-gradient(135deg, rgba(195,33,54,0.10), rgba(var(--parent-accent-rgb),0.08));
    border-color: rgba(195,33,54,0.28);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(195,33,54,0.12);
    animation: acaBirthdayPulse 2.4s ease-in-out infinite;
}
@keyframes acaBirthdayPulse {
    0%, 100% { box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(195,33,54,0.12); }
    50%      { box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 24px rgba(var(--parent-accent-rgb),0.22); }
}
.aca-birthday-emoji {
    font-size: 32px; line-height: 1; flex-shrink: 0;
}
.aca-birthday-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.aca-birthday-body strong {
    font-size: 0.95rem; font-weight: 600;
    color: var(--bn-text);
}
.aca-birthday-body span {
    font-size: 0.82rem; color: var(--bn-text-dim);
}
.aca-birthday-more {
    background: var(--bn-cell);
    border: 1px solid var(--bn-cell-border);
    border-radius: 100px;
    padding: 4px 10px;
    font-size: 0.78rem; font-weight: 600;
    color: var(--bn-text-muted);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .aca-birthday-banner { padding: 12px 14px; gap: 10px; }
    .aca-birthday-emoji { font-size: 28px; }
    .aca-birthday-body strong { font-size: 0.88rem; }
    .aca-birthday-body span { font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v2.0.0 — Activity Heatmap + Achievement Showcase
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Activity Heatmap (GitHub-style 12 weeks × 7 days) ─── */
.bn-cell--heatmap { grid-column: span 2; }
.bn-heatmap { margin-top: 10px; }
.bn-heatmap-grid {
    display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    padding: 6px 0;
}
.bn-heatmap-week {
    display: grid; grid-template-rows: repeat(7, 1fr);
    gap: 3px;
}
.bn-heatmap-day {
    width: 100%; aspect-ratio: 1;
    border-radius: 3px;
    background: #ebebef;
    transition: transform 0.15s;
    display: inline-block;
}
.bn-heatmap-day:hover { transform: scale(1.3); cursor: help; }
.bn-heatmap-day.is-future { background: #f5f5f7; opacity: 0.4; }
.bn-heatmap-day--l0 { background: #ebebef; }
.bn-heatmap-day--l1 { background: #c7e2c0; }
.bn-heatmap-day--l2 { background: #8fcc7f; }
.bn-heatmap-day--l3 { background: #4ca238; }
.bn-heatmap-day--l4 { background: #1d6b1d; }

.bn-heatmap-legend {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px;
    font-size: 0.75rem; color: var(--bn-text-muted);
}
.bn-heatmap-scale {
    display: flex; align-items: center; gap: 4px;
}
.bn-heatmap-scale .bn-heatmap-day {
    width: 12px; height: 12px;
}
.bn-heatmap-scale small {
    font-size: 0.7rem; color: var(--bn-text-muted);
}

/* ─── Achievement Showcase ─── */
.bn-achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 10px;
}
.bn-ach-item {
    position: relative;
    background: linear-gradient(180deg, #fff, #fafafa);
    border: 1px solid var(--bn-cell-border-soft);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
}
.bn-ach-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--bn-shadow-soft);
    border-color: var(--bn-cell-border);
}
.bn-ach-icon {
    font-size: 24px; line-height: 1;
    margin-bottom: 4px;
}
.bn-ach-title {
    font-size: 0.72rem; font-weight: 600;
    color: var(--bn-text); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    max-height: 1.8em;
}
.bn-ach-cert {
    position: absolute; top: 4px; right: 4px;
    font-size: 11px; text-decoration: none;
    opacity: 0; transition: opacity 0.15s;
}
.bn-ach-item:hover .bn-ach-cert { opacity: 0.7; }
.bn-ach-cert:hover { opacity: 1; }
.bn-ach-empty {
    font-size: 0.85rem; color: var(--bn-text-muted);
    font-style: italic; margin: 12px 0 0; line-height: 1.4;
}

@media (max-width: 960px) {
    .bn-cell--heatmap { grid-column: span 2; }
}
@media (max-width: 640px) {
    .bn-cell--heatmap { grid-column: span 1; }
    .bn-heatmap-grid { gap: 2px; }
    .bn-heatmap-week { gap: 2px; }
    .bn-achievements-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * v2.0.126.0 — ESPACE FAMILLE : LE VÊTEMENT APPLE MONOCHROME
 *
 * Demandé par Pat le 2026-08-02 : « ça ressemble à l'ancien visuel, à du code
 * de base ». Il avait raison, et il avait aussi raison de dire qu'on l'avait
 * DÉJÀ fait : `aca-shared-tokens.css` porte la palette Apple Monochrome depuis
 * la v1.90.0.
 *
 * ⚠️ CE QUI A ÉTÉ VÉRIFIÉ AVANT D'ÉCRIRE CE BLOC, parce que la première
 * explication était fausse : les jetons `--aca-text` et `--aca-border` SONT
 * bien écrasés par le vieux thème néon sur `.mcf-root` (public.css l. 12-46).
 * Mais les rendre corrects ne change RIEN : mesuré en direct sur le banc,
 * 0 élément sur 385 bouge. Aucun composant de l'espace famille ne lit ces
 * jetons, ils ont tous leur couleur écrite à la main. Réparer les jetons
 * aurait été un correctif qui ne répare rien.
 *
 * On habille donc les composants eux-mêmes. Bloc ADDITIF, en fin de fichier,
 * scopé à l'espace famille : rien d'autre sur le site n'est touché, et il
 * suffit de le retirer pour revenir en arrière.
 * ═══════════════════════════════════════════════════════════════════════════ */

.mcf-root.mcf-bento {
    --fam-bg:      #f5f5f7;
    --fam-card:    #ffffff;
    --fam-sub:     #fafafa;
    --fam-tx:      #1d1d1f;
    --fam-dim:     #515154;
    --fam-mut:     #707075;
    --fam-bd:      #d2d2d7;
    --fam-bds:     #e8e8ed;
    --fam-sf:      -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    --bn-surface-week:     #fff2d8;
    --bn-surface-effort:   #ffece3;
    --bn-surface-coplus:   #efebff;
    --bn-surface-insights: #ffedf4;
    --bn-surface-next:     #e8f2ff;
    --bn-surface-activity: #eaf7ee;
    --bn-surface-passes:   #fff5ca;
    --bn-surface-actions:  #edf2f7;

    background: var(--fam-bg);
    color: var(--fam-tx);
    font-family: var(--fam-sf);
    -webkit-font-smoothing: antialiased;
}

/* ── La barre d'onglets ────────────────────────────────────────────────────
 * La bande tricolore part d'ici. Elle est la signature des pages de VENTE ;
 * dans un espace où un parent revient tous les jours, elle crie. */
.mcf-bento ~ .fam-tabs::before,
.fam-tabs::before { display: none; }

.fam-tabs {
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid #e8e8ed;
    border-radius: 16px;
    padding: 7px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.fam-tab,
.mcf-bento .fam-tab {
    gap: 7px;
    padding: 9px 14px;
    border-radius: 10px;
    color: #515154;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: -.01em;
}
/* ⚠️ On double le `.mcf-bento` : une refonte antérieure (l. 5594-5611) repeint
 * déjà ces onglets avec cette portée-là. Sans le même poids, notre règle perd
 * en silence, et l'onglet actif reste marine. Mesuré sur le banc. */
.fam-tab:hover,
.mcf-bento .fam-tab:hover { background: rgba(0,0,0,.045); color: #1d1d1f; transform: none; }
.fam-tab.is-active,
.mcf-bento .fam-tab.is-active {
    background: rgba(0,0,0,.055);
    color: #1d1d1f;
    font-weight: 600;
    box-shadow: none;
    border-color: transparent;
}
.fam-tab.is-active:hover,
.mcf-bento .fam-tab.is-active:hover { background: rgba(0,0,0,.075); color: #1d1d1f; transform: none; }
.mcf-bento .fam-tab-icon { font-size: inherit; opacity: 1; }
.fam-tab:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
.fam-tab.is-locked { color: #707075; }
.fam-tab.is-locked:hover { background: rgba(0,0,0,.04); color: #515154; }

/* Les tracés maison : ils prennent la couleur du texte, donc ils suivent
 * l'état actif sans qu'on ait à les redessiner. Un émoji ne peut pas faire ça. */
.fam-tab-icon--trace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}
.fam-tab-icon--trace svg { width: 100%; height: 100%; display: block; }
.fam-tab-label { font-size: 13px; letter-spacing: -.005em; }

/* ── Les cartes du Bento ──────────────────────────────────────────────────── */
.mcf-bento .bn-cell {
    background: var(--fam-card);
    border: 1px solid var(--fam-bds);
    border-radius: 17px;
    box-shadow: none;
}
.mcf-bento .bn-cell::before { display: none; }

/* ── Les boutons : un seul foncé par écran, et il est presque noir ────────── */
.mcf-bento .mcf-btn-primary,
.mcf-bento .bn-ask-btn,
.mcf-bento .bn-ref-btn,
.mcf-bento .bn-pill--accent {
    background: #1d1d1f;
    border-color: #1d1d1f;
    color: #fff;
    border-radius: 11px;
    font-weight: 550;
    letter-spacing: -.01em;
    box-shadow: none;
}
.mcf-bento .mcf-btn-primary:hover,
.mcf-bento .bn-ask-btn:hover,
.mcf-bento .bn-ref-btn:hover { background: #000; border-color: #000; transform: none; }

/* ── Les chiffres, et la règle du zéro ────────────────────────────────────── */
.mcf-bento .bn-big-num {
    color: var(--fam-tx);
    font-weight: 640;
    letter-spacing: -.045em;
}
.mcf-bento .bn-minico-bubble {
    background: var(--fam-sub);
    border: 1px solid var(--fam-bds);
    border-radius: 13px;
    color: var(--fam-dim);
}

@media (prefers-reduced-motion: reduce) {
    .fam-tab { transition: none; }
}

/* ── L'accent qui glisse, et l'animation d'échange ─────────────────────────
 * Pat, 2026-08-02 : « des accents de couleur sur certains points qu'on veut
 * mettre de l'avant » et « des bonnes animations entre le switch des slides ».
 * Une seule pièce répond aux deux. Le fond gris de l'onglet actif reste (c'est
 * lui qui porte la lisibilité, contraste 16,8:1) ; l'accent, lui, ne porte
 * aucune information seul, donc personne ne perd rien s'il ne le voit pas. */
.fam-tabs-list { position: relative; }
.fam-tabs-ink {
    position: absolute;
    bottom: 2px;
    left: 0;
    height: 3px;
    width: 0;
    border-radius: 999px;
    background: var(--bn-tricolore);
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
    transition: transform .42s cubic-bezier(.22,.61,.36,1),
                width .42s cubic-bezier(.22,.61,.36,1),
                opacity .2s ease;
}
.fam-tabs-ink.is-ready { opacity: 1; }

/* L'icône de l'onglet actif prend l'accent. Une seule icône colorée à l'écran :
 * c'est un accent, pas un arc-en-ciel. Le libellé reste presque noir. */
.mcf-bento .fam-tab.is-active .fam-tab-icon--trace,
.fam-tab.is-active .fam-tab-icon--trace { color: #C32136; }
.mcf-bento .fam-tab:hover .fam-tab-icon--trace,
.fam-tab:hover .fam-tab-icon--trace { color: #DF5F35; }

/* L'échange de contenu du SPA (family-tabs.js v1.50) : on lui donne enfin une
 * transition. `fam-tabs-loading` existait depuis la v1.50 et ne servait qu'à un
 * trait de chargement. */
.mcf-root { animation: fam-entree .34s cubic-bezier(.22,.61,.36,1) both; }
@keyframes fam-entree {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
body.fam-tabs-loading .mcf-root { opacity: .55; transition: opacity .16s ease; }

/* Les accents sur les chiffres qu'on met de l'avant. Neutre par défaut :
 * la couleur ne se dépense que quand la valeur veut dire quelque chose. */
.mcf-bento .bn-cell .bn-big-num.est-en-cours { color: #DF5F35; }
.mcf-bento .bn-cell .bn-big-num.est-un-record { color: #C32136; }
.mcf-bento .bn-cell .bn-big-num.est-un-palier { color: var(--parent-accent-deep); }

@media (prefers-reduced-motion: reduce) {
    .fam-tabs-ink { transition: opacity .2s ease; }
    .mcf-root { animation: none; }
}

/* v2.0.162.0: magasin avatars et titres orchestré par Commerce, écrit par Core. */
.aca-core-look {
    margin: 24px 0;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--aca-purple);
    border-radius: var(--aca-radius-sm);
    background: var(--aca-bg-deep);
    color: var(--aca-text);
}
.aca-core-look__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.aca-core-look__header h2,
.aca-core-look__group h3,
.aca-core-look__card h4 { margin: 0; }
.aca-core-look__eyebrow,
.aca-core-look__rarity {
    margin: 0 0 6px;
    color: var(--aca-cyan);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.aca-core-look__balance {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 8px;
    align-items: center;
    min-width: 140px;
    padding: 12px 16px;
    border: 1px solid var(--aca-yellow);
    border-radius: var(--aca-radius-sm);
}
.aca-core-look__balance strong { font-size: 1.35rem; }
.aca-core-look__balance span:last-child { grid-column: 1 / -1; font-size: .78rem; }
.aca-core-look__notice,
.aca-core-look__empty,
.aca-core-look__boundary {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: var(--aca-radius-sm);
    background: color-mix(in srgb, var(--aca-bg-deep) 82%, var(--aca-cyan));
}
.aca-core-look__group { margin-top: 26px; }
.aca-core-look__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 12px;
}
.aca-core-look__card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    min-width: 0;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--aca-purple) 70%, transparent);
    border-radius: var(--aca-radius-sm);
    background: color-mix(in srgb, var(--aca-bg-deep) 90%, var(--aca-purple));
}
.aca-core-look__card.is-equipped { border-color: var(--aca-green); }
.aca-core-look__visual {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px dashed var(--aca-cyan);
    border-radius: 50%;
    color: var(--aca-cyan);
    font-size: 1.4rem;
}

.aca-core-look__visual img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.aca-core-look__visual img.is-placeholder {
    object-fit: contain;
    padding: 9px;
    box-sizing: border-box;
}

.aca-core-look__card.is-visual-blocked {
    opacity: .72;
}
.aca-core-look__copy { min-width: 0; }
.aca-core-look__copy > p:last-child { margin: 7px 0 0; font-size: .86rem; }
.aca-core-look__action { grid-column: 1 / -1; }
.aca-core-look__button {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--aca-radius-sm);
    background: linear-gradient(135deg, var(--aca-pink), var(--aca-purple));
    color: var(--aca-text);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.aca-core-look__button:focus-visible { outline: 3px solid var(--aca-cyan); outline-offset: 3px; }
.aca-core-look__equipped { color: var(--aca-green); }
.aca-core-look__locked { font-size: .82rem; }
.aca-core-look--closed { border-style: dashed; }
@media (max-width: 560px) {
    .aca-core-look__header { flex-direction: column; }
    .aca-core-look__balance { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
 * 2026-08-17 — UN PANNEAU REPLIÉ DOIT VRAIMENT SE REPLIER
 *
 * Patrice, en essayant l'espace parent : « c'était tellement de choses,
 * tellement long à scroller que je ne pense pas que c'était convivial pour le
 * parent », et « les boutons ne sont même pas inscrits, c'est blanc sur blanc ».
 *
 * Les deux plaintes n'en font qu'une, et voici la mesure. Sur l'accueil
 * parent, QUATRE `<details>` fermés laissaient quand même leur contenu occuper
 * la page : `bn-notes-add` (85 px), `bn-goal-quickadd` (72 px) et les deux
 * cartes d'enfant `bn-cell--child-sm` (229 et 244 px). Soit **630 px sur une
 * page de 3 221**, un cinquième de la hauteur, pour du contenu que personne
 * n'a demandé à voir. Et dix boutons y restaient cliquables et tabulables sans
 * afficher leur libellé : « Enregistrer », « Créer », « En vedette »,
 * « Stats », « Portfolio », « Inviter un parent ».
 *
 * ⛔ LA CAUSE N'EST PAS UN OUBLI, C'EST UNE SURCHARGE. Le navigateur replie
 * nativement un `<details>` fermé par une règle interne
 * `details:not([open]) > *:not(summary) { display: none }`. Mais
 * `.bn-notes-form`, `.bn-goal-form`, `.bn-csm-preview` et `.bn-csm-actions`
 * déclarent `display: flex`, ce qui **gagne sur la règle du navigateur** et
 * rouvre le contenu. Vingt-quatre autres `<details>` de la même page se
 * ferment très bien : ce sont exactement ceux dont les enfants ne forcent
 * aucun `display`.
 *
 * La règle ci-dessous rend au repli son effet, sans toucher à aucune des
 * quatre déclarations `flex` : ouvertes, elles reprennent la main telles
 * quelles. On répare le repli, on ne redessine rien.
 *
 * ⚠️ La spécificité est calculée, pas espérée : `details:not([open]) >
 * *:not(summary)` vaut 0,1,2 contre 0,1,0 pour une classe simple. Elle passe
 * devant sans qu'on ait besoin d'un `!important`, qui aurait aussi écrasé
 * l'état OUVERT et cassé les panneaux pour de bon.
 * ═══════════════════════════════════════════════════════════════════ */
.mcf-root details:not([open]) > *:not(summary),
.aca-espace-parents details:not([open]) > *:not(summary) {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
 * 2026-08-17 — UNE CARTE QUI N'A RIEN À DIRE NE PREND PLUS LA PLACE
 * D'UNE CARTE PLEINE
 *
 * Patrice : « c'était tellement de choses, tellement long à scroller que je ne
 * pense pas que c'était convivial pour le parent », et « peut-être mettre des
 * trucs par toggle pour que ça se développe, que ça ne soit pas trop
 * embourbant ».
 *
 * Mesuré sur son accueil : sur DIX-HUIT cartes, SIX ne disent rien d'autre que
 * « il n'y a rien », et elles occupent **1 708 px sur 3 221**, soit plus de la
 * MOITIÉ de la page. Notes 401 px, Événements 338 px, puis Trophées,
 * Abonnements et Objectifs à 251 px chacun. Une famille qui commence voit donc
 * d'abord une page de vide.
 *
 * ⛔ ON NE CACHE RIEN. Un parent qui ne voit plus « Objectifs » croit que la
 * fonction n'existe pas, et on aurait échangé une page trop longue contre un
 * produit qui paraît plus pauvre. La carte reste, son titre reste, son bouton
 * d'action reste. Elle cesse simplement de réclamer la hauteur d'une carte
 * pleine.
 *
 * ⚠️ LE CIBLAGE PASSE PAR LES MARQUEURS DÉJÀ DÉCLARÉS DANS LE GABARIT
 * (`bn-notes-empty`, `bn-ach-empty`, `bn-pass-empty`, `bn-goal-empty`,
 * `bn-events-empty`), jamais par le TEXTE de la carte. Un ciblage sur les mots
 * « aucun » ou « pas encore » se serait défait à la première passe de copy,
 * sans que personne ne le voie : le jour où « Aucun objectif actif » devient
 * « Rien de commencé », la carte reprendrait silencieusement sa hauteur.
 *
 * ℹ️ `bn-cell--activity` est le sixième cas et il ne porte AUCUN marqueur. Il
 * n'est donc pas visé ici : lui déclarer un marqueur appartient au gabarit,
 * pas à la feuille de style. Signalé plutôt que deviné.
 * ═══════════════════════════════════════════════════════════════════ */
.mcf-root .bn-cell:has(.bn-notes-empty),
.mcf-root .bn-cell:has(.bn-ach-empty),
.mcf-root .bn-cell:has(.bn-pass-empty),
.mcf-root .bn-cell:has(.bn-goal-empty),
.mcf-root .bn-cell:has(.bn-events-empty),
.mcf-root .bn-cell:has(.bn-activity-empty) {
    grid-row: span 1;
    min-height: 0;
    align-self: start;
    padding: 16px 20px;
}

/* Le message d'attente se met sur une ligne au lieu d'un bloc centré. */
.mcf-root .bn-notes-empty,
.mcf-root .bn-ach-empty,
.mcf-root .bn-pass-empty,
.mcf-root .bn-goal-empty,
.mcf-root .bn-events-empty,
.mcf-root .bn-activity-empty {
    padding: 0;
    margin: 6px 0 0;
    text-align: left;
    font-size: 0.86rem;
    line-height: 1.4;
}

/* L'illustration d'attente disparaît : c'est la seule partie purement
   décorative, et c'est elle qui coûtait le plus de hauteur. */
.mcf-root .bn-cell:has(.bn-notes-empty) .bn-empty-icon,
.mcf-root .bn-cell:has(.bn-ach-empty) .bn-empty-icon,
.mcf-root .bn-cell:has(.bn-pass-empty) .bn-empty-icon,
.mcf-root .bn-cell:has(.bn-goal-empty) .bn-empty-icon,
.mcf-root .bn-cell:has(.bn-events-empty) .bn-empty-icon {
    display: none;
}

/* ⚠️ RÉDUIRE LA CARTE NE SUFFISAIT PAS, ET LA MESURE L'A DIT.
 *
 * Après le repli ci-dessus, les six cartes vides sont passées de 1 708 px à
 * 856 px. La PAGE, elle, n'avait pas bougé d'un pixel : 3 221 px avant, 3 221
 * après. Une grille dimensionne chaque rangée sur sa carte la PLUS HAUTE, donc
 * une carte vide coincée à côté d'une carte pleine ne libère rien.
 *
 * Elles sont donc renvoyées en fin de grille, où elles se regroupent entre
 * elles et forment des rangées courtes. `order` ne touche ni au HTML ni à
 * l'ordre de lecture au clavier, qui suit le document.
 *
 * ℹ️ Effet secondaire voulu : le parent voit d'abord ce qui a du contenu. Une
 * famille qui commence ne tombe plus sur une page de « il n'y a rien ». */
.mcf-root .bn-grid .bn-cell:has(.bn-notes-empty),
.mcf-root .bn-grid .bn-cell:has(.bn-ach-empty),
.mcf-root .bn-grid .bn-cell:has(.bn-pass-empty),
.mcf-root .bn-grid .bn-cell:has(.bn-goal-empty),
.mcf-root .bn-grid .bn-cell:has(.bn-events-empty) {
    order: 90;
}

/* ══════════════════════════════════════════════════
   CELLULE : MATIÈRE PAR MATIÈRE (v2.0.177.0)
   Les enfants en rang sur une matière. Triée par écart, donc ce qui remonte
   est là où la famille est la plus inégale, pas qui gagne.
   Tokens `--bn-*` uniquement, à plat, aucun dégradé.
   ══════════════════════════════════════════════════ */
.bn-cell--comparaison { grid-column: span 2; }
.bn-cmp-sous {
    margin: 2px 0 12px;
    font-size: 0.78rem;
    color: var(--bn-text-muted);
}
/* Le tableau défile DANS sa cellule : la page ne part jamais de côté. */
.bn-cmp-defile { overflow-x: auto; }
.bn-cmp {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.bn-cmp th,
.bn-cmp td {
    text-align: left;
    padding: 8px 10px 8px 0;
    border-bottom: 1px solid var(--bn-cell-border-soft);
    vertical-align: middle;
}
.bn-cmp tbody tr:last-child th,
.bn-cmp tbody tr:last-child td { border-bottom: 0; }
.bn-cmp thead th {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bn-text-muted);
    padding-bottom: 6px;
}
.bn-cmp tbody th {
    font-weight: 600;
    color: var(--bn-text);
    padding-right: 14px;
    white-space: nowrap;
}
.bn-cmp-val {
    display: block;
    font-weight: 700;
    color: var(--bn-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.bn-cmp-pc { font-size: 0.7em; font-weight: 600; margin-left: 1px; }
.bn-cmp-jauge {
    display: block;
    height: 4px;
    margin-top: 4px;
    min-width: 42px;
    border-radius: 2px;
    background: var(--bn-cell-border-soft);
    overflow: hidden;
}
.bn-cmp-jauge > span { display: block; height: 100%; background: var(--bn-accent); }
/* `--bn-text-muted` rend 4,59 pour 1 sur la carte blanche, donc AA en petit
   texte. Un gris plus clair aurait été illisible, et c'est justement la case
   qu'un parent scrute. */
.bn-cmp-vide { color: var(--bn-text-muted); font-size: 0.78rem; }

/* Lu par les lecteurs d'écran, invisible à l'oeil. */
.bn-hors-ecran {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════
   SUR QUOI IL A TRAVAILLÉ (v2.0.177.0)
   Deux comptes par matière, jamais un pourcentage : comparer deux périodes
   demande une prise que le greffon ACA Système n'expose pas encore.
   La couleur ne porte AUCUNE information seule : les deux nombres sont
   toujours écrits, donc l'écran reste lisible sans distinguer les teintes.
   ══════════════════════════════════════════════════ */
.bn-tend {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bn-tend-l {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.75rem;
    padding: 3px 0;
    border-bottom: 1px solid var(--bn-cell-border-soft);
}
.bn-tend-l:last-child { border-bottom: 0; }
.bn-tend-m { color: var(--bn-text); font-weight: 600; }
.bn-tend-c { color: var(--bn-text-muted); white-space: nowrap; }
.bn-tend-p { margin: 0 3px; opacity: .5; }
/* `--bn-green` rend 4,90 pour 1 sur la carte blanche, donc AA en petit texte.
   `--bn-orange` ne rendrait que 3,60 : il est réservé aux gros chiffres. */
.bn-tend-l.est-mieux strong { color: var(--bn-green); }
.bn-tend-l.est-attention strong { color: var(--bn-text); }

/* ══════════════════════════════════════════════════
   LA CARTE DE L'ENFANT PREND UN TIERS DE MOINS (v2.0.177.0)
   Demande de Patrice : « la bulle de l'enfant prend beaucoup trop de place,
   elle pourrait prendre littéralement un tiers moins ».
   Le vide venait surtout de `space-between`, qui étirait le contenu sur toute
   la hauteur imposée par la cellule voisine des offres.
   ══════════════════════════════════════════════════ */
/**
 * 🪤 LE VIDE NE VENAIT PAS DE `justify-content`, ET LE MESURER A CHANGÉ LE
 * CORRECTIF. Première tentative : `justify-content: flex-start`. Elle a bien
 * pris, et il restait 245 px de vide. Mesure au navigateur :
 * `.bn-hero-top` portait `margin-bottom: 234.977px`, une valeur qu'aucun
 * humain n'écrit. C'est un `margin: auto` qui absorbe l'espace restant, et
 * `justify-content` ne peut RIEN contre lui : les marges automatiques se
 * servent AVANT la justification.
 *
 * Deuxième cause, mesurée aussi : la carte occupe deux rangées de la grille,
 * dont la hauteur est fixée par les cartes voisines. `align-self: start` la
 * laisse redescendre à la hauteur de son contenu.
 */
.bn-cell--hero {
    justify-content: flex-start;
    align-self: start;
    gap: 0;
}
.bn-cell--hero .bn-hero-top { margin-bottom: 12px; }
.bn-cell--hero .bn-hero-avatar { width: 54px; height: 54px; }
.bn-cell--hero .bn-hero-name { font-size: 1.6rem; margin: 10px 0 2px; }
.bn-cell--hero .bn-hero-meta { margin-bottom: 10px; }
.bn-cell--hero .bn-hero-stats { margin-bottom: 4px; }
.bn-cell--hero .bn-hero-val { font-size: 24px; }
.bn-cell--hero .bn-hero-actions { margin-top: 12px; padding-top: 10px; }

/* Le survol donne le détail, mais il n'est pas le seul chemin : `tabindex="0"`
   met la case dans le parcours au clavier, et le foyer doit se voir. */
.bn-cmp-vide[tabindex]:focus-visible {
    outline: 2px solid var(--bn-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* La porte Co+ sur le suivi des difficultés (v2.0.177.0).
   Elle se VOIT : une porte fermée qu'on ne voit pas ne se franchit jamais.
   À plat, sans dégradé, et le texte reste lisible (--bn-text-muted = 4,59). */
.bn-tend-verrou {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px dashed var(--bn-cell-border);
    border-radius: var(--bn-radius-xs);
    text-decoration: none;
    background: transparent;
}
.bn-tend-verrou:hover,
.bn-tend-verrou:focus-visible { border-color: var(--bn-accent); background: var(--bn-accent-soft); }
.bn-tend-verrou:focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 2px; }
.bn-tend-verrou-t { font-size: 0.8rem; font-weight: 700; color: var(--bn-text); }
.bn-tend-verrou-s { font-size: 0.72rem; color: var(--bn-text-muted); }

/* ══════════════════════════════════════════════════
   LA PASSE Co+ TIENT SUR UNE LIGNE (v2.0.177.0)
   Demande de Patrice, deux fois le 2026-08-19 : « beaucoup plus petit,
   à la limite il peut peser dessus pour développer ».
   Le prix reste visible replié : cacher un prix derrière un clic, c'est ce
   que font les offres dont on n'est pas fier.
   ══════════════════════════════════════════════════ */
.bn-cell--discover .mcf-coplus-nudge {
    margin: 0 0 14px;
    padding: 0;
    border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-sm);
    background: var(--bn-cell);
}
.mcf-coplus-sum {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
    font-size: 0.85rem;
}
.mcf-coplus-sum::-webkit-details-marker { display: none; }
.mcf-coplus-sum:focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 2px; border-radius: var(--bn-radius-sm); }
.mcf-coplus-sum-i { flex: 0 0 auto; font-size: 0.95rem; }
.mcf-coplus-sum-t { flex: 1 1 auto; font-weight: 700; color: var(--bn-text); }
/* « Voir » plutôt qu'un chevron seul : un symbole ne se lit pas, un mot oui. */
.mcf-coplus-sum-v {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: var(--bn-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.mcf-coplus-nudge[open] .mcf-coplus-sum-v { opacity: .55; }
.mcf-coplus-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 12px;
    border-top: 1px solid var(--bn-cell-border-soft);
    padding-top: 10px;
}
.mcf-coplus-detail p { margin: 0; font-size: 0.78rem; color: var(--bn-text-dim); }

/* ══════════════════════════════════════════════════
   COURBE DES NOTIONS RÉGLÉES (v2.0.177.0)
   Six lignes au plus, dessinées à la main. La légende écrit le nom ET le
   compte de chaque matière : la couleur ne porte jamais l'information seule.
   ══════════════════════════════════════════════════ */
.bn-courbe { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.bn-courbe-t {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--bn-text-muted); font-weight: 600;
}
.bn-courbe-svg {
    width: 100%; height: 54px; display: block;
    background: var(--bn-cell-border-soft); border-radius: 4px;
}
.bn-courbe-l { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
/* Six teintes prises dans les jetons NASApunk, jamais des hex inventés. */
.bn-courbe-l0 { stroke: var(--bn-accent); }
.bn-courbe-l1 { stroke: var(--bn-red); }
.bn-courbe-l2 { stroke: var(--bn-orange); }
.bn-courbe-l3 { stroke: var(--bn-green); }
.bn-courbe-l4 { stroke: var(--bn-yellow); }
.bn-courbe-l5 { stroke: var(--bn-text-dim); }
.bn-courbe-leg {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    font-size: 0.7rem; color: var(--bn-text-muted);
}
.bn-courbe-leg li { display: flex; align-items: center; gap: 5px; }
.bn-courbe-leg strong { color: var(--bn-text); font-variant-numeric: tabular-nums; }
.bn-courbe-p { width: 12px; height: 2px; border-radius: 1px; background: currentColor; flex: 0 0 auto; }
.bn-courbe-p.bn-courbe-l0 { background: var(--bn-accent); }
.bn-courbe-p.bn-courbe-l1 { background: var(--bn-red); }
.bn-courbe-p.bn-courbe-l2 { background: var(--bn-orange); }
.bn-courbe-p.bn-courbe-l3 { background: var(--bn-green); }
.bn-courbe-p.bn-courbe-l4 { background: var(--bn-yellow); }
.bn-courbe-p.bn-courbe-l5 { background: var(--bn-text-dim); }

/* ══════════════════════════════════════════════════
   « RECOMMANDÉ POUR VOTRE FAMILLE » DEVIENT UNE LISTE (v2.0.177.0)

   Correction de Patrice, 2026-08-19 : c'est CE bloc qu'il trouvait de trop,
   pas la passe Co+.

   Mesuré : la grille demande des colonnes de 260 px minimum. Dans la cellule
   du tableau de bord, qui en fait 266, elle n'en tient donc qu'UNE, et les
   trois cartes s'empilent sur environ 700 px. C'est ce bloc qui étirait la
   rangée et laissait les trous à côté.

   Il devient une liste de rangées : icône, nom, flèche. La phrase
   d'explication part, parce que c'est elle qui fait la hauteur, et parce que
   « Tout voir » ouvre déjà le panneau complet qui la porte.

   ⛔ Portée à `.bn-cell--discover` seulement. Le même bloc sert ailleurs, et
   ailleurs il a la place de respirer.
   ══════════════════════════════════════════════════ */
.bn-cell--discover .mcf-discovery-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.bn-cell--discover .mcf-discovery-card {
    flex-direction: row;
    align-items: center;
    gap: 9px;
    padding: 9px 2px;
    border: 0;
    border-bottom: 1px solid var(--bn-cell-border-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-height: 0;
}
.bn-cell--discover .mcf-discovery-card::before,
.bn-cell--discover .mcf-discovery-card::after { display: none; }
.bn-cell--discover .mcf-discovery-grid > :last-child { border-bottom: 0; }
.bn-cell--discover .mcf-discovery-icon { font-size: 1rem; flex: 0 0 auto; margin: 0; }
.bn-cell--discover .mcf-discovery-body { flex: 1 1 auto; min-width: 0; }
.bn-cell--discover .mcf-discovery-title {
    font-size: 0.82rem; line-height: 1.25; color: var(--bn-text);
    display: block;
}
/* La phrase d'explication est ce qui faisait la hauteur. Elle vit dans le
   panneau « Tout voir », qui a la place de la porter. */
.bn-cell--discover .mcf-discovery-reason { display: none; }
.bn-cell--discover .mcf-discovery-cta {
    flex: 0 0 auto;
    font-size: 0; /* le libellé varie par offre; la flèche seule suffit ici */
    color: var(--bn-accent);
}
.bn-cell--discover .mcf-discovery-cta::after { content: "→"; font-size: 0.9rem; }
.bn-cell--discover .mcf-section-title { font-size: 0.78rem; }
.bn-cell--discover .mcf-discovery-section { margin: 0; }

/* 🪤 Le bloc de données des cartes est un ENFANT DE LA GRILLE (v2.0.177.0).
   Mesuré : `.bn-grid > *` rendait une cellule fantôme de 0 px. Invisible à
   l'oeil, mais elle occupe une case de la grille et décale tout ce qui suit.
   C'est une des sources des trous. Un `<script>` n'est pas du contenu. */
.bn-grid > script { display: none; }

/* ══════════════════════════════════════════════════
   « À TRAVAILLER PLUS SOUVENT » (v2.0.178.0)
   Une matière et une année, choisies par le parent pour un enfant.
   La note sous le bouton n'est pas décorative : sans elle, un parent croit
   qu'il vient de programmer la semaine de son enfant.
   ══════════════════════════════════════════════════ */
.bn-focus {
    margin: 0 0 12px;
    border: 1px solid var(--bn-cell-border);
    border-radius: var(--bn-radius-xs);
}
.bn-focus-sum {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; cursor: pointer; list-style: none;
    font-size: 0.76rem;
}
.bn-focus-sum::-webkit-details-marker { display: none; }
.bn-focus-sum:focus-visible { outline: 2px solid var(--bn-accent); outline-offset: 2px; border-radius: var(--bn-radius-xs); }
.bn-focus-sum-t { flex: 1 1 auto; font-weight: 700; color: var(--bn-text); }
.bn-focus-sum-v { flex: 0 0 auto; color: var(--bn-accent); font-weight: 700; }
.bn-focus-f {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 10px 10px;
    border-top: 1px solid var(--bn-cell-border-soft); padding-top: 10px;
}
.bn-focus-f select {
    flex: 1 1 120px; min-width: 0;
    padding: 6px 8px; font-size: 0.78rem;
    border: 1px solid var(--bn-cell-border); border-radius: var(--bn-radius-xs);
    background: var(--bn-cell); color: var(--bn-text); font-family: inherit;
}
.bn-focus-b {
    flex: 0 0 auto;
    padding: 6px 14px; font-size: 0.78rem; font-weight: 700;
    border: 0; border-radius: var(--bn-radius-xs);
    background: var(--bn-accent); color: #fff; cursor: pointer;
    font-family: inherit;
}
.bn-focus-b:focus-visible { outline: 2px solid var(--bn-text); outline-offset: 2px; }
.bn-focus-note {
    flex: 1 1 100%; margin: 2px 0 0;
    font-size: 0.7rem; line-height: 1.45; color: var(--bn-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUIVI Co+ — une tuile par produit (v2.0.234.0)
   ───────────────────────────────────────────────────────────────────────────
   🎨 Structure : la grille bento de TODO, MESURÉE dans son paquet
      (aca-pi-missions-v2/assets/css/v3-bento-v3.58.css) : repeat(N,1fr),
      grid-auto-rows minmax(160px,auto), gap 16px, 2 colonnes sous 980px,
      gap 11px sous 560px, tuile radius 14px, padding 16px 18px,
      box-shadow NONE, min-height 124px, cubic-bezier(.32,.72,0,1).

   ⛔ MAIS PAS SES COULEURS. Copier les jetons Apple gris de TODO aurait posé
      un îlot #f2f2f7 au milieu d'un écran NASApunk navy. On peint donc avec
      les jetons `--bn-*` de l'espace parent, tranchés par Pat le 2026-08-19.
      ➡️ On copie la MÉTHODE, pas l'apparence. C'est la ligne fine qui sépare,
      jamais l'ombre.

   ⭐ Et la méthode de TODO, c'est d'écrire le RATIO DE CONTRASTE DANS le
      jeton. Fait ci-dessous, mesuré, pas estimé.

   🔴 DÉFAUT TROUVÉ EN MESURANT, et il n'est pas à moi : `--bn-text-muted`
      (#6b7689) rend 4.59:1 sur une carte blanche, mais seulement **4.21:1 sur
      le papier #F4F5F7**, donc SOUS le seuil AA de 4.5. Ce panneau ne s'en
      sert donc jamais sur le papier. Signalé au Dev Log.
   ═══════════════════════════════════════════════════════════════════════════ */

.aca-sco {
    --sco-papier:  var(--bn-bg, #F4F5F7);
    --sco-carte:   var(--bn-cell, #ffffff);
    --sco-ligne:   var(--bn-cell-border, #d7dce4);
    --sco-ligne-d: var(--bn-cell-border-soft, #e7eaf0);
    --sco-encre:   var(--bn-text, #1B2A47);        /* 14.30:1 carte · 13.11:1 papier */
    --sco-encre-2: var(--bn-text-dim, #3a4b66);    /*  8.83:1 carte ·  8.09:1 papier */
    --sco-encre-3: var(--bn-text-muted, #6b7689);  /*  4.59:1 carte · ⛔ 4.21:1 papier, JAMAIS sur papier */
    --sco-revoir:  var(--bn-orange, #DF5F35);
    --sco-reussi:  var(--bn-green, #3E7D5A);
    --sco-accent:  var(--bn-accent, #314B7A);
	--sco-jaune:    #FFF0BD;
	--sco-bleu:     #DCE9F8;
	--sco-rouge:    #F8DFE3;
	--sco-mauve:    #EAE2F6;
    --sco-r:       14px;

    color: var(--sco-encre);
    font-family: var(--bn-font, -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif);
}

/* ─── Entête ─── */
.aca-sco-tete { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.aca-sco-tete-t { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--sco-encre); margin: 0; }
/* ⛔ `--sco-encre-2` et pas `-3` : ce texte est sur le PAPIER. */
.aca-sco-tete-s { font-size: 0.9rem; line-height: 1.5; color: var(--sco-encre-2); margin: 4px 0 0; }

.aca-sco-ico { font-size: 1.4rem; line-height: 1; }
.aca-sco-ico-lg { font-size: 2rem; line-height: 1; }

.aca-sco-retour {
    display: inline-block; margin: 0 0 14px;
    font-size: 0.85rem; font-weight: 600; color: var(--sco-accent); text-decoration: none;
}
.aca-sco-retour:hover { text-decoration: underline; }

/* ─── Identité d'un produit : vrai logo compact, jamais un logo géant ─── */
.aca-sco-theme-jaune { --sco-tuile-fond: var(--sco-jaune); --sco-tuile-accent: var(--bn-yellow, #7A5700); }
.aca-sco-theme-bleu  { --sco-tuile-fond: var(--sco-bleu);  --sco-tuile-accent: var(--bn-blue, #314B7A); }
.aca-sco-theme-rouge { --sco-tuile-fond: var(--sco-rouge); --sco-tuile-accent: var(--bn-red, #C32136); }
.aca-sco-theme-mauve { --sco-tuile-fond: var(--sco-mauve); --sco-tuile-accent: var(--bn-purple, #314B7A); }

.aca-sco-logo-cadre {
    width: 58px; height: 58px; flex: 0 0 58px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--sco-encre) 16%, transparent);
    border-radius: 16px; background: var(--sco-carte); overflow: hidden;
}
.aca-sco-logo { display: block; width: 44px; height: 44px; object-fit: contain; }
.aca-sco-produit-hero {
    display: flex; align-items: stretch; justify-content: space-between; gap: 18px;
    padding: 20px; margin: 0 0 16px; background: var(--sco-tuile-fond);
    border: 1px solid color-mix(in srgb, var(--sco-tuile-accent) 30%, var(--sco-ligne));
    border-radius: calc(var(--sco-r) + 4px);
}
.aca-sco-produit-marque { display: flex; align-items: center; gap: 15px; min-width: 0; }
.aca-sco-produit-sec {
    margin: 0 0 4px; color: var(--sco-encre-2); font-size: .72rem;
    font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
}
.aca-sco-produit-t { margin: 0; color: var(--sco-encre); font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.05; }
.aca-sco-produit-res { margin: 7px 0 0; color: var(--sco-encre-2); font-size: .88rem; line-height: 1.45; }
.aca-sco-repere {
    min-width: 150px; padding: 12px 15px; display: flex; flex-direction: column;
    justify-content: center; border-radius: var(--sco-r); color: var(--sco-encre);
    background: color-mix(in srgb, var(--sco-carte) 76%, var(--sco-tuile-fond));
}
.aca-sco-repere strong { font-size: clamp(1.65rem, 4vw, 2.45rem); line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.aca-sco-repere span { margin-top: 6px; color: var(--sco-encre-2); font-size: .76rem; font-weight: 700; line-height: 1.3; }

/* ─── La grille bento, valeurs mesurées chez TODO ─── */
.aca-sco-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(160px, auto);
    gap: 16px;
}
.aca-sco-bento-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) {
    .aca-sco-bento, .aca-sco-bento-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .aca-sco-bento, .aca-sco-bento-2 {
        grid-template-columns: 1fr; gap: 11px; grid-auto-rows: minmax(140px, auto);
    }
}

/* ─── La tuile ─── */
.aca-sco-w {
    background: var(--sco-carte);
    border: 1px solid var(--sco-ligne);
    border-radius: var(--sco-r);
    padding: 16px 18px;
    box-shadow: none;               /* ⛔ La ligne sépare. Jamais l'ombre. */
    min-height: 124px;
    display: flex; flex-direction: column; gap: 8px;
    transition: transform .15s cubic-bezier(.32,.72,0,1), border-color .15s;
}
.aca-sco-w-large { grid-column: 1 / -1; }
.aca-sco-w-t {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--sco-encre-3); margin: 0;
}
.aca-sco-p { font-size: 0.9rem; line-height: 1.55; color: var(--sco-encre-2); margin: 0; }

.aca-sco-galerie { grid-auto-rows: minmax(250px, auto); }
.aca-sco-tuile {
    min-height: 250px; padding: 18px; display: flex; flex-direction: column; gap: 9px;
    text-decoration: none; color: var(--sco-encre); cursor: pointer;
    background: var(--sco-tuile-fond); border: 1px solid color-mix(in srgb, var(--sco-tuile-accent) 32%, var(--sco-ligne));
    border-radius: calc(var(--sco-r) + 4px); overflow: hidden;
    transition: transform .15s cubic-bezier(.32,.72,0,1), border-color .15s, box-shadow .15s;
}
.aca-sco-tuile:hover { transform: translateY(-3px); border-color: var(--sco-tuile-accent); box-shadow: 0 8px 0 color-mix(in srgb, var(--sco-tuile-accent) 12%, transparent); }
.aca-sco-tuile:focus-visible { outline: 2px solid var(--sco-accent); outline-offset: 3px; }
.aca-sco-tuile-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.aca-sco-tuile-nom { margin-top: 4px; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; }
.aca-sco-tuile-sec {
    max-width: 60%; padding: 5px 9px; border-radius: var(--bn-radius-pill, 100px);
    background: color-mix(in srgb, var(--sco-carte) 72%, transparent);
    font-size: 0.7rem; font-weight: 750; line-height: 1.25; color: var(--sco-encre-2); text-align: right;
}
.aca-sco-tuile-repere { display: flex; align-items: baseline; gap: 8px; color: var(--sco-encre); }
.aca-sco-tuile-repere strong { font-size: 2rem; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.aca-sco-tuile-repere span { max-width: 21ch; font-size: .74rem; font-weight: 700; line-height: 1.25; color: var(--sco-encre-2); }
.aca-sco-tuile-res { font-size: 0.84rem; line-height: 1.45; color: var(--sco-encre-2); }
.aca-sco-tuile-cta {
    margin-top: auto; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--sco-tuile-accent) 22%, transparent);
    color: var(--sco-encre); font-size: .78rem; font-weight: 800;
}

.aca-sco-puce {
    align-self: flex-start; margin-top: auto;
    font-size: 0.72rem; font-weight: 700; padding: 4px 10px;
    border-radius: var(--bn-radius-pill, 100px);
    border: 1px solid var(--sco-ligne);
}
/* ⛔ La couleur ne porte AUCUNE information seule : la puce écrit toujours
   « Terminé » ou « Étape N ». Un parent qui ne distingue pas deux teintes lit
   exactement la même chose. */
.aca-sco-puce.est-fini    { color: var(--sco-reussi); border-color: var(--sco-reussi); }
.aca-sco-puce.est-encours { color: var(--sco-encre-2); }

/* ─── MiniCo parle ─── */
.aca-sco-minico {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--sco-carte);
    border: 1px solid var(--sco-ligne);
    border-radius: var(--sco-r);
    padding: 14px 16px; margin: 0 0 16px;
}
.aca-sco-minico-face {
    display: block;
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px;
    object-fit: cover;
    border-radius: 50%;
}
.aca-sco-minico-p { font-size: 0.95rem; line-height: 1.6; color: var(--sco-encre); margin: 0; }

.aca-sco-note { font-size: 0.8rem; line-height: 1.5; color: var(--sco-encre-2); margin: 12px 0 0; }

/* ─── Le détail reste un bento : chaque famille se repère aussi par son titre ─── */
.aca-sco-detail-bento { margin-top: 16px; }
.aca-sco-w--signal   { background: var(--sco-rouge); }
.aca-sco-w--force    { background: var(--sco-bleu); }
.aca-sco-w--creation { background: var(--sco-mauve); }
.aca-sco-w--calme    { background: var(--sco-jaune); }
.aca-sco-section-t { margin: 0 0 10px; color: var(--sco-encre); font-size: 1rem; }
.aca-sco-contextes, .aca-sco-preuves { margin-top: 18px; }
.aca-sco-bento-contextes { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(130px, auto); }
.aca-sco-w--contexte { background: var(--sco-mauve); }
.aca-sco-contexte-repere { color: var(--sco-accent); font-size: 1.7rem; line-height: 1; }
.aca-sco-contexte-t { margin: 0; color: var(--sco-encre); font-size: .95rem; }

.aca-sco-preuves {
    padding: 18px; background: var(--sco-bleu); border: 1px solid var(--sco-ligne); border-radius: calc(var(--sco-r) + 4px);
}
.aca-sco-preuves-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.aca-sco-preuves-n {
    min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--sco-carte); color: var(--sco-encre); font-size: 1.1rem; font-weight: 800;
}
.aca-sco-preuves-liste { display: grid; gap: 10px; }
.aca-sco-preuve { padding: 13px 14px; background: var(--sco-carte); border: 1px solid var(--sco-ligne); border-left: 4px solid var(--sco-accent); border-radius: 11px; }
.aca-sco-preuve.est-correcte { border-left-color: var(--sco-reussi); }
.aca-sco-preuve.est-a-revoir { border-left-color: var(--sco-revoir); }
.aca-sco-preuve-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--sco-encre-3); font-size: .7rem; }
.aca-sco-preuve-q { margin: 5px 0 8px; color: var(--sco-encre); font-size: .9rem; }
.aca-sco-preuve-r, .aca-sco-preuve-a { margin: 3px 0 0; color: var(--sco-encre-2); font-size: .8rem; line-height: 1.4; }

/* ─── Les listes de notions ─── */
.aca-sco-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aca-sco-l {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 0 8px 12px;
    border-left: 3px solid var(--sco-ligne-d);
}
.aca-sco-l.est-revoir { border-left-color: var(--sco-revoir); }
.aca-sco-l.est-reussi { border-left-color: var(--sco-reussi); }
.aca-sco-l-nom    { font-size: 0.92rem; font-weight: 600; color: var(--sco-encre); }
.aca-sco-l-compte { font-size: 0.8rem; font-weight: 600; color: var(--sco-encre-2); }
.aca-sco-l-exp    { font-size: 0.82rem; line-height: 1.5; color: var(--sco-encre-2); }
.aca-sco-l-ou     { font-size: 0.75rem; color: var(--sco-encre-3); }

/* ─── Creuser : le niveau du chiffre brut ─── */
.aca-sco-creuser {
    margin: 16px 0 0;
    background: var(--sco-carte);
    border: 1px solid var(--sco-ligne);
    border-radius: var(--sco-r);
}
.aca-sco-creuser-t {
    cursor: pointer; padding: 14px 18px;
    font-size: 0.88rem; font-weight: 700; color: var(--sco-accent);
}
.aca-sco-creuser-t:focus-visible { outline: 2px solid var(--sco-accent); outline-offset: -2px; }
.aca-sco-creuser-corps { padding: 0 18px 16px; overflow-x: auto; }

.aca-sco-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.aca-sco-table-cap {
    caption-side: top; text-align: left;
    font-size: 0.8rem; line-height: 1.5; color: var(--sco-encre-2); padding: 0 0 10px;
}
.aca-sco-table th, .aca-sco-table td {
    text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--sco-ligne-d);
}
.aca-sco-table thead th {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sco-encre-3);
}
.aca-sco-table tbody th { font-weight: 600; color: var(--sco-encre); }
.aca-sco-table tbody td { color: var(--sco-encre-2); font-variant-numeric: tabular-nums; }

/* ─── La porte Co+, fermée mais visible ─── */
.aca-sco-verrou {
    background: var(--sco-carte);
    border: 1px solid var(--sco-ligne);
    border-radius: var(--sco-r);
    padding: 28px 24px; text-align: center;
}
.aca-sco-verrou-cle { font-size: 2rem; line-height: 1; display: block; margin-bottom: 10px; }
.aca-sco-verrou-t { font-size: 1.3rem; font-weight: 700; color: var(--sco-encre); margin: 0 0 8px; }
.aca-sco-verrou-p { font-size: 0.92rem; line-height: 1.6; color: var(--sco-encre-2); margin: 0 auto 18px; max-width: 46ch; }
.aca-sco-verrou-cta {
    display: inline-block; padding: 11px 22px;
    background: var(--sco-accent); color: #fff; text-decoration: none;
    border-radius: var(--bn-radius-pill, 100px); font-size: 0.9rem; font-weight: 700;
}
.aca-sco-verrou-cta:hover { filter: brightness(1.1); color: #fff; }
.aca-sco-verrou-cta:focus-visible { outline: 2px solid var(--sco-encre); outline-offset: 3px; }
.aca-sco-verrou-liste {
    list-style: none; margin: 22px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.aca-sco-verrou-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border: 1px solid var(--sco-ligne); border-radius: var(--bn-radius-pill, 100px);
}
.aca-sco-verrou-nom { font-size: 0.85rem; font-weight: 600; color: var(--sco-encre); }
.aca-sco-verrou-sec { font-size: 0.75rem; color: var(--sco-encre-3); }
.aca-sco-verrou-note { font-size: 0.8rem; color: var(--sco-encre-2); margin: 14px 0 0; }

/* ─── Rien n'est arrivé ─── */
.aca-sco-vide { text-align: center; padding: 44px 20px; }
.aca-sco-vide-ico { font-size: 2.6rem; line-height: 1; display: block; margin-bottom: 12px; }
.aca-sco-vide-t { font-size: 1.15rem; font-weight: 700; color: var(--sco-encre); margin: 0 0 8px; }
.aca-sco-vide .aca-sco-p { max-width: 46ch; margin: 0 auto; }

/* ⛔ Un mouvement qu'on n'a pas demandé peut rendre malade. */
@media (prefers-reduced-motion: reduce) {
    .aca-sco-w, .aca-sco-tuile { transition: none; }
    .aca-sco-tuile:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v2.0.259.0 — L'ACCUEIL PARENT REFAIT EN BENTO (demande de Pat, 2026-08-24)
   « Refais-moi ça, genre Bento, très bien fait, très visuellement le fun. »

   ⛔ On reste dans la charte parent : fond clair, une seule couleur d'accent
   (--parent-accent, #FFB612), la bande tricolore en signature. Pas de néon :
   l'espace enfant est pop-art, l'espace parent est calme et lisible.
   ⚠️ Le doré ne sert JAMAIS de couleur de texte sur fond clair : mesuré à
   1,76 pour 1, sous le seuil. Il sert de fond, de filet et d'accent.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le rythme bento : des tailles VARIÉES, sinon c'est un tableau, pas un bento. */
.bn-cell--semaine         { grid-column: span 2; }
.bn-cell--coplus          { grid-column: span 2; }
.bn-cell--semaine-a-venir { grid-column: span 2; grid-row: span 2; }
.bn-cell--activity        { grid-column: span 2; }
.bn-cell--passes          { grid-column: span 1; }
.bn-cell--actions         { grid-column: span 1; }

/* ─── ① Sa semaine ─── */
.bn-cell--semaine::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--bn-tricolore);
    border-radius: var(--bn-radius) var(--bn-radius) 0 0;
}
.bn-semaine-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bn-semaine-ligne {
    display: grid; grid-template-columns: minmax(0, 7rem) auto 1fr;
    align-items: baseline; gap: 10px;
    padding: 10px 12px; border-radius: 12px; background: #fafafa;
}
.bn-semaine-nom   { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-semaine-serie {
    font-size: 0.82rem; padding: 3px 9px; border-radius: 999px;
    background: #f0f0f0; color: #444; white-space: nowrap;
}
.bn-semaine-serie.is-on {
    background: var(--parent-accent-soft, #FFF4CF);
    color: var(--parent-accent-deep, #855B00);
    font-weight: 700;
}
.bn-semaine-serie strong { font-size: 1rem; }
/* ⚠️ min-width:0 est indispensable : sans lui, une longue description force la
   grille à déborder au lieu de couper. Le défaut ne se voit qu'avec un vrai
   texte long, jamais avec un mot d'essai. */
.bn-semaine-quoi {
    min-width: 0; font-size: 0.88rem; color: #333;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bn-semaine-quoi em { color: #666; }

/* ─── ② Suivi Co+ ─── */
.bn-cell--coplus { background: linear-gradient(180deg, #ffffff 0%, #fffdf6 100%); }
.bn-coplus-bloc {
    display: block; text-decoration: none; color: inherit;
    padding: 12px; border-radius: 14px; margin-top: 10px;
    border: 1px solid rgba(255, 182, 18, 0.28);
    transition: border-color 0.15s, transform 0.15s;
}
.bn-coplus-bloc:hover { border-color: var(--parent-accent, #FFB612); transform: translateY(-1px); }
.bn-coplus-bloc:focus-visible { outline: 2px solid var(--parent-accent-deep, #855B00); outline-offset: 2px; }
.bn-coplus-nom   { display: block; font-weight: 700; margin-bottom: 6px; }
.bn-coplus-ligne { display: flex; gap: 9px; align-items: flex-start; margin: 6px 0; }
.bn-coplus-icone { font-size: 1.1rem; line-height: 1.3; flex-shrink: 0; }
.bn-coplus-texte { font-size: 0.9rem; line-height: 1.45; color: #222; }
.bn-coplus-suite {
    display: inline-block; margin-top: 8px; font-size: 0.82rem; font-weight: 700;
    color: var(--parent-accent-deep, #855B00);
}

/* ─── ④ Cette semaine : à faire + événements ─── */
.bn-taches { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bn-taches li {
    display: flex; gap: 9px; align-items: baseline;
    padding: 9px 12px; border-radius: 12px; background: #fafafa;
}
.bn-tache-qui  {
    font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--parent-accent-deep, #855B00); flex-shrink: 0;
}
.bn-tache-quoi { min-width: 0; font-size: 0.9rem; }
.bn-vide       { margin-top: 12px; color: #555; font-size: 0.9rem; }
.bn-lien-suite {
    display: inline-block; margin-top: 10px; font-size: 0.82rem; font-weight: 700;
    color: var(--parent-accent-deep, #855B00); text-decoration: none;
}
.bn-lien-suite:hover { text-decoration: underline; }
.bn-evenements { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bn-cell-border); }
.bn-rendez-vous { display: flex; flex-direction: column; gap: 10px; }
.bn-booking-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--bn-cell-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
}
.bn-booking-status { display: block; margin-top: 3px; font-size: .72rem; font-weight: 700; color: #1e6b50; }
.bn-booking-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 10px;
    background: #1d1d1f;
    color: #fff;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
}
.bn-booking-notes { grid-column: 2 / -1; font-size: .8rem; }
.bn-booking-notes summary { cursor: pointer; font-weight: 700; }
.bn-booking-notes p { margin: 5px 0 9px; color: #515154; }
@media (max-width: 560px) {
    .bn-booking-row { grid-template-columns: auto minmax(0, 1fr); }
    .bn-booking-action, .bn-booking-notes { grid-column: 1 / -1; }
    .bn-booking-action { justify-content: center; }
}
.bn-sous-titre {
    display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: #555; margin-bottom: 8px;
}

/* ─── ⑥ Abonnements ─── */
/* 2.0.351.66 : la carte du Club de maths sur l'accueil parent */
.bn-cell--club { grid-column: span 2; }
.bn-club { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--bn-cell-border, #e6e6ea); }
.bn-club:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
.bn-club-titre { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; }
.bn-club-quand, .bn-club-ou { margin: 0 0 4px; font-size: 0.92rem; opacity: 0.85; }
.bn-club-compteur { margin: 10px 0 0; font-size: 1rem; color: #1B2A47; }
.bn-club-etat { margin: 6px 0 0; font-size: 0.95rem; line-height: 1.4; }
.bn-club-prochaine { margin: 8px 0 0; font-size: 0.95rem; }
.bn-club-compte { opacity: 0.7; font-size: 0.88rem; }
.bn-club-apporter { margin: 6px 0 0; font-size: 0.92rem; }
.bn-club-dates { margin: 6px 0 0; font-size: 0.88rem; }
.bn-club-dates summary { cursor: pointer; }
.bn-club-notes { margin: 12px 0 0; padding: 10px 12px; background: #f7f8fb; border-radius: 10px; }
.bn-club-notes-titre { margin: 0 0 6px; font-size: 0.95rem; font-weight: 800; }
.bn-club-notes-vide { margin: 0; font-size: 0.9rem; opacity: 0.75; }
.bn-club-notes-liste { list-style: none; margin: 0; padding: 0; }
.bn-club-note { padding: 6px 0; border-top: 1px solid #e6e6ea; font-size: 0.92rem; }
.bn-club-note:first-child { border-top: 0; padding-top: 0; }
.bn-club-note-date { font-weight: 700; }
.bn-club-note-niveau { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.8rem; font-weight: 700; background: #e9ecf3; }
.bn-club-note-niveau--solide { background: #d9f5e5; color: #0b5a30; }
.bn-club-note-niveau--en_route { background: #fff1c9; color: #6b4d00; }
.bn-club-note-niveau--a_consolider { background: #ffe3e3; color: #7a1f1f; }
.bn-club-note-texte { margin: 4px 0 0; line-height: 1.4; }
.bn-club-liens { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.bn-club-geste { font-weight: 800; }
@media (max-width: 640px) { .bn-cell--club { grid-column: span 1; } }
.bn-passes-compte { margin: 14px 0 0; font-size: 0.95rem; }
.bn-passes-compte strong { font-size: 2rem; line-height: 1; display: block; margin-bottom: 2px; }

/* ─── ⑦ Actions rapides : de MINI boutons ─── */
.bn-actions-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bn-mini-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 999px;
    border: 1px solid var(--bn-cell-border); background: #fff;
    font-size: 0.82rem; font-weight: 600; color: #1b2a47; text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.bn-mini-btn:hover { background: var(--parent-accent-soft, #FFF4CF); border-color: var(--parent-accent, #FFB612); }
.bn-mini-btn:focus-visible { outline: 2px solid var(--parent-accent-deep, #855B00); outline-offset: 2px; }

/* ─── Écrans étroits : le bento se déplie, il ne se comprime pas ─── */
@media (max-width: 1000px) {
    .bn-cell--semaine, .bn-cell--coplus, .bn-cell--activity,
    .bn-cell--semaine-a-venir { grid-column: span 4; }
    .bn-cell--semaine-a-venir { grid-row: auto; }
    .bn-cell--passes, .bn-cell--actions { grid-column: span 2; }
}
@media (max-width: 640px) {
    .bn-cell--semaine, .bn-cell--coplus, .bn-cell--activity,
    .bn-cell--semaine-a-venir, .bn-cell--passes, .bn-cell--actions { grid-column: 1 / -1; }
    /* La ligne « Sa semaine » s'empile : trois colonnes sur 375px illisibles. */
    .bn-semaine-ligne { grid-template-columns: 1fr; gap: 4px; }
    .bn-semaine-quoi  { white-space: normal; }
}

/* ─── v2.0.260.0 · L'effort de la semaine (barres d'XP, demande de Pat) ───
   ⛔ Les trois bandes existent, mais elles ne s'appliquent QUE si un barème a
   été fourni. Sans seuils, la barre reste neutre : colorier au hasard
   reviendrait à porter un jugement sur l'enfant à partir de rien. */
.bn-cell--effort { grid-column: span 2; }
.bn-effort-note { margin: 6px 0 0; font-size: 0.82rem; color: #555; }
.bn-effort-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bn-effort-ligne {
    display: grid; grid-template-columns: minmax(0, 6.5rem) 1fr minmax(0, 6rem);
    align-items: center; gap: 10px;
}
.bn-effort-nom {
    font-weight: 700; font-size: 0.9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bn-effort-maison { font-size: 0.82rem; }
.bn-effort-piste {
    position: relative; height: 12px; border-radius: 999px;
    background: #f0f0f0; overflow: hidden; min-width: 0;
}
.bn-effort-barre {
    display: block; height: 100%; border-radius: 999px;
    /* Teinte NEUTRE par défaut : elle dit « voici l'effort », pas « c'est bien »
       ou « c'est faible ». */
    background: var(--parent-accent, #FFB612);
    transition: width 0.3s ease;
}
/* Les trois bandes de Pat, prêtes, inertes tant que le barème est vide. */
.bn-effort-barre.est-orange { background: #DF5F35; }
.bn-effort-barre.est-jaune  { background: var(--parent-accent, #FFB612); }
.bn-effort-barre.est-verte  { background: #2E9E5B; }
.bn-effort-chiffre { font-size: 0.85rem; text-align: right; white-space: nowrap; }
.bn-effort-chiffre strong { font-size: 1.05rem; }
.bn-effort-chiffre em { color: #666; font-size: 0.8rem; }

@media (prefers-reduced-motion: reduce) { .bn-effort-barre { transition: none; } }
@media (max-width: 1000px) { .bn-cell--effort { grid-column: span 4; } }
@media (max-width: 640px) {
    .bn-cell--effort { grid-column: 1 / -1; }
    /* Sur téléphone, la piste passe sous le nom : trois colonnes sur 375px
       écrasent la barre à quelques pixels et elle ne veut plus rien dire. */
    .bn-effort-ligne { grid-template-columns: 1fr auto; }
    .bn-effort-piste { grid-column: 1 / -1; order: 3; }
    .bn-effort-chiffre { text-align: right; }
}

@media (max-width: 700px) {
    .aca-sco-produit-hero { flex-direction: column; }
    .aca-sco-repere { min-width: 0; }
    .aca-sco-bento-contextes { grid-template-columns: 1fr; }
}

/* ─── v2.0.334.0 · repères opaques de l'accueil Parent ────────────────────
   Chaque famille d'information garde une surface pleine et stable. Les
   couleurs vivent dans les jetons `.mcf-bento` plus haut : aucune donnée ni
   importance métier n'est déduite de la couleur. */
.mcf-bento .bn-grid > .bn-cell--semaine         { background: var(--bn-surface-week); }
.mcf-bento .bn-grid > .bn-cell--effort          { background: var(--bn-surface-effort); }
.mcf-bento .bn-grid > .bn-cell--coplus          { background: var(--bn-surface-coplus); }
.mcf-bento .bn-grid > .bn-cell--insights        { background: var(--bn-surface-insights); }
.mcf-bento .bn-grid > .bn-cell--semaine-a-venir { background: var(--bn-surface-next); }
.mcf-bento .bn-grid > .bn-cell--activity        { background: var(--bn-surface-activity); }
.mcf-bento .bn-grid > .bn-cell--passes          { background: var(--bn-surface-passes); }
.mcf-bento .bn-grid > .bn-cell--actions         { background: var(--bn-surface-actions); }