/* Composants et styles de modules. Les fondations communes vivent dans app-base.css. */

.ghost-btn,
.primary-btn,
.menu-toggle,
.mobile-home-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    border-radius: 999px;
    padding: 10px 16px;
    border: 1px solid transparent;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.button-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.button-icon svg {
    width: 16px;
    height: 16px;
}

.button-label {
    min-width: 0;
}

a.ghost-btn,
a.primary-btn {
    text-decoration: none;
}

.section-head-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

.section-head-actions .primary-btn,
.section-head-actions .ghost-btn {
    max-width: 100%;
}

.section-head-actions > * {
    min-height: 44px;
}

.form-grid .primary-btn,
.form-grid .ghost-btn,
.upload-form .primary-btn {
    justify-self: start;
}

.ghost-btn {
    background: rgba(255, 248, 241, 0.12);
    color: inherit;
    border-color: rgba(124, 80, 48, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.warm-ghost {
    color: var(--brown);
    background: rgba(255, 242, 232, 0.92);
    border: 1px solid rgba(200, 107, 57, 0.16);
}

.primary-btn {
    color: white;
    background: linear-gradient(135deg, var(--accent), #e29653);
    border-color: rgba(167, 84, 39, 0.26);
    box-shadow: 0 14px 28px rgba(200, 107, 57, 0.24);
}

.primary-btn:hover,
.ghost-btn:hover,
.metric-card:hover,
.shortcut-card:hover,
.stack-item button:hover,
.note-item button:hover,
.menu-toggle:hover,
.mobile-home-btn:hover {
    transform: translateY(-1px);
}

.content-shell {
    display: grid;
    gap: 14px;
    min-width: 0;
}

body.auth-locked .page-shell,
body.auth-locked .mobile-topbar {
    filter: blur(10px);
    pointer-events: none;
    user-select: none;
}

.tab-panel {
    display: none;
    gap: 14px;
    --module-surface: rgba(255, 250, 244, 0.9);
    --module-primary-surface: linear-gradient(180deg, rgba(255, 248, 241, 0.98), rgba(247, 237, 225, 0.96));
    --module-secondary-surface: rgba(255, 252, 248, 0.9);
    --module-strip: linear-gradient(180deg, rgba(200, 107, 57, 0.72), rgba(245, 200, 94, 0.18));
}

.tab-panel.active {
    display: flex;
    flex-direction: column;
    animation: panel-in 0.25s ease;
}

.tab-panel,
.home-board,
.panel-card,
.home-heading,
.home-hero,
.home-hero-copy,
.home-hero-panel,
.home-highlight-grid,
.weather-card,
.ephemeris-card,
.section-head,
.split-head,
.planner-head-actions,
.agenda-view-actions,
.agenda-calendar-toolbar,
.agenda-view-panel,
.agenda-display-card article,
.notes-grid,
.note-list-card {
    min-width: 0;
}

#tab-accueil {
    --module-surface: linear-gradient(180deg, rgba(255, 250, 245, 0.96), rgba(251, 243, 233, 0.94));
    --module-primary-surface: linear-gradient(180deg, rgba(255, 248, 239, 0.98), rgba(247, 236, 224, 0.96));
    --module-secondary-surface: rgba(255, 252, 248, 0.92);
}

#tab-agenda {
    --module-surface: linear-gradient(180deg, rgba(255, 249, 242, 0.96), rgba(248, 240, 230, 0.94));
    --module-primary-surface: linear-gradient(180deg, rgba(255, 245, 234, 0.98), rgba(245, 233, 220, 0.96));
    --module-secondary-surface: rgba(255, 252, 248, 0.92);
}

#tab-tasks {
    --module-surface: linear-gradient(180deg, rgba(255, 248, 241, 0.96), rgba(246, 238, 228, 0.94));
    --module-primary-surface: linear-gradient(180deg, rgba(255, 244, 234, 0.98), rgba(244, 230, 216, 0.96));
    --module-secondary-surface: rgba(255, 252, 248, 0.92);
}

#tab-courses {
    --module-surface: linear-gradient(180deg, rgba(255, 249, 243, 0.96), rgba(249, 240, 231, 0.94));
    --module-primary-surface: linear-gradient(180deg, rgba(255, 244, 233, 0.98), rgba(243, 229, 214, 0.96));
    --module-secondary-surface: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(249, 242, 233, 0.94));
}

#tab-menus {
    --module-surface: linear-gradient(180deg, rgba(255, 250, 244, 0.96), rgba(250, 242, 233, 0.94));
    --module-primary-surface: linear-gradient(180deg, rgba(255, 246, 236, 0.98), rgba(247, 236, 222, 0.96));
    --module-secondary-surface: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(248, 240, 229, 0.94));
}

#tab-notes {
    --module-surface: linear-gradient(180deg, rgba(255, 250, 245, 0.96), rgba(248, 240, 232, 0.94));
    --module-primary-surface: linear-gradient(180deg, rgba(255, 246, 238, 0.98), rgba(247, 234, 223, 0.96));
    --module-secondary-surface: rgba(255, 252, 248, 0.92);
}

#tab-recettes {
    --module-surface: linear-gradient(180deg, rgba(255, 249, 241, 0.96), rgba(249, 238, 225, 0.94));
    --module-primary-surface: linear-gradient(180deg, rgba(255, 245, 232, 0.98), rgba(245, 231, 213, 0.96));
    --module-secondary-surface: linear-gradient(180deg, rgba(255, 252, 246, 0.96), rgba(250, 242, 231, 0.94));
    --module-accent: var(--accent);
}

#tab-repertoire {
    --module-surface: linear-gradient(180deg, rgba(255, 250, 245, 0.96), rgba(250, 242, 233, 0.94));
}

#tab-finances {
    --module-surface: linear-gradient(180deg, rgba(255, 249, 243, 0.96), rgba(247, 239, 230, 0.94));
}

#tab-documents {
    --module-surface: linear-gradient(180deg, rgba(255, 249, 242, 0.97), rgba(247, 239, 228, 0.94));
    --module-primary-surface: linear-gradient(180deg, rgba(255, 246, 236, 0.99), rgba(243, 231, 215, 0.96));
    --module-secondary-surface: rgba(255, 252, 247, 0.92);
}

#tab-photos {
    --module-surface: linear-gradient(180deg, rgba(255, 248, 240, 0.97), rgba(246, 237, 225, 0.94));
    --module-primary-surface: linear-gradient(180deg, rgba(255, 245, 233, 0.99), rgba(243, 228, 212, 0.96));
    --module-secondary-surface: rgba(255, 251, 246, 0.92);
}

#tab-membres {
    --module-surface: linear-gradient(180deg, rgba(255, 249, 244, 0.96), rgba(248, 240, 231, 0.94));
}

@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-board,
.panel-card,
.metric-card,
.shortcut-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
}

.panel-card,
.metric-card,
.shortcut-card,
.focus-card,
.weather-card,
.note-list-card,
.summary-tile,
.stack-item,
.member-chip,
.note-item {
    position: relative;
    overflow: hidden;
}

.home-stack {
    display: grid;
    gap: 18px;
}

.home-heading,
.home-highlight-grid,
.dashboard-grid,
.quick-access-board {
    position: relative;
    z-index: 1;
}

.home-heading {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.home-hero-compact {
    gap: 22px;
}

.home-hero-topline {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.home-notification-chip {
    text-decoration: none;
    gap: 8px;
}

.notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent-strong, #a8501e);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}

.notif-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--accent-strong, #a8501e);
    transition: color 0.2s;
}

.home-chip.home-notification-chip.is-active {
    background: var(--accent-strong, #ae572a);
    color: #fff;
    border-color: rgba(120, 50, 10, 0.4);
    box-shadow: 0 6px 20px rgba(168, 80, 30, 0.35);
    padding: 8px 16px 8px 10px;
}

.home-chip.home-notification-chip.is-active .notif-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.home-chip.home-notification-chip.is-active .notif-label {
    color: #fff;
}

.home-compact-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.home-compact-card {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 116px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(124, 80, 48, 0.1);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
    text-align: left;
}

.home-compact-card-button {
    width: 100%;
    cursor: pointer;
}

.home-compact-label {
    color: var(--muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.home-compact-card strong {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    line-height: 1.3;
}

.home-compact-card small {
    color: var(--muted);
    line-height: 1.45;
}

.home-compact-meta-line {
    display: block;
}

.home-notifications-card {
    position: relative;
    z-index: 1;
    border-color: rgba(200, 107, 57, 0.22);
    background: linear-gradient(170deg, rgba(255, 248, 238, 0.98), rgba(255, 240, 220, 0.92));
    box-shadow: 0 8px 28px rgba(200, 107, 57, 0.1);
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.home-notifications-card.is-highlighted {
    border-color: rgba(200, 107, 57, 0.5);
    box-shadow: 0 0 0 3px rgba(200, 107, 57, 0.14), 0 24px 52px rgba(200, 107, 57, 0.26);
    background: linear-gradient(170deg, rgba(255, 246, 234, 0.99), rgba(255, 232, 200, 0.96));
}

.home-notifications-card .section-head h3 {
    color: var(--accent-strong);
}

.home-notifications-card.is-highlighted .section-head h3 {
    color: var(--accent-strong);
    font-size: 1.15rem;
}

.home-heading h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

.home-highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.home-hero {
    position: relative;
    width: 100%;
    display: grid;
    gap: 18px;
    padding: clamp(20px, 4vw, 30px);
    border: 1px solid rgba(124, 80, 48, 0.14);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at top left, rgba(255, 222, 170, 0.62), transparent 34%),
        linear-gradient(135deg, rgba(255, 246, 234, 0.98), rgba(249, 239, 228, 0.94));
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.home-hero::after {
    content: '';
    position: absolute;
    right: -42px;
    top: -54px;
    width: 156px;
    height: 156px;
    border-radius: 50%;
    background: rgba(245, 200, 94, 0.18);
}

.home-hero-copy,
.home-hero-panel {
    position: relative;
    z-index: 1;
}

.home-hero-copy {
    display: grid;
    align-content: start;
    gap: 12px;
}

.home-date-line {
    margin: 0;
    max-width: 48ch;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.6;
}

.home-chip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.home-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--brown);
    border: 1px solid rgba(124, 80, 48, 0.12);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.home-chip.subtle {
    background: rgba(246, 230, 213, 0.94);
}

.home-hero-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.home-hero-note {
    min-height: 124px;
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid rgba(124, 80, 48, 0.1);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
    display: grid;
    align-content: start;
    gap: 8px;
}

.home-hero-note::before {
    content: '';
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(200, 107, 57, 0.35);
}

.home-hero-note[data-tone='warm'] {
    background: linear-gradient(180deg, rgba(255, 247, 236, 0.96), rgba(255, 239, 220, 0.9));
}

.home-hero-note[data-tone='warm']::before {
    background: rgba(200, 107, 57, 0.48);
}

.home-hero-note[data-tone='sage'] {
    background: linear-gradient(180deg, rgba(238, 248, 242, 0.96), rgba(225, 241, 234, 0.92));
}

.home-hero-note[data-tone='sage']::before {
    background: rgba(121, 168, 148, 0.5);
}

.home-hero-note[data-tone='clay'] {
    background: linear-gradient(180deg, rgba(251, 244, 238, 0.96), rgba(244, 231, 220, 0.92));
}

.home-hero-note[data-tone='clay']::before {
    background: rgba(143, 101, 77, 0.5);
}

.home-hero-note-label {
    color: var(--muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
}

.home-hero-note strong {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    line-height: 1.25;
}

.home-hero-note small {
    color: var(--muted);
    line-height: 1.5;
}

.focus-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.today-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.today-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 252, 248, 0.9);
    box-shadow: var(--shadow-soft);
}

.today-card[data-tone="sage"] {
    background: linear-gradient(135deg, rgba(239, 248, 242, 0.96), rgba(252, 248, 242, 0.94));
}

.today-card[data-tone="clay"] {
    background: linear-gradient(135deg, rgba(250, 241, 234, 0.96), rgba(252, 248, 242, 0.94));
}

.today-card[data-tone="sun"] {
    background: linear-gradient(135deg, rgba(255, 248, 227, 0.96), rgba(252, 248, 242, 0.94));
}

.today-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.today-card-head small {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
}

.today-card-head h3 {
    margin: 6px 0 0;
    font-family: var(--font-heading);
    font-size: 1.18rem;
    line-height: 1.3;
}

.today-card-body {
    display: grid;
    gap: 10px;
}

.today-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.today-item {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(124, 80, 48, 0.08);
}

.today-item-copy {
    display: grid;
    gap: 4px;
}

.today-item-copy strong {
    font-size: 0.98rem;
}

.today-item-copy span {
    color: var(--muted);
    line-height: 1.45;
}

.today-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.today-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.member-responsibility-badge {
    display: inline-grid;
    gap: 2px;
    padding: 7px 10px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--member-accent, #2a9d8f) 14%, white);
    border: 1px solid color-mix(in srgb, var(--member-accent, #2a9d8f) 26%, white);
    color: var(--text);
}

.member-responsibility-badge strong {
    font-size: 0.82rem;
    line-height: 1.1;
}

.member-responsibility-badge small {
    color: var(--muted);
    font-size: 0.7rem;
}

.member-responsibility-badge.compact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
}

.member-badge-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    vertical-align: middle;
}

.timeline-summary-row,
.timeline-all-day-row,
.timeline-entry-meta,
.timeline-free-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.timeline-list {
    display: grid;
    gap: 10px;
}

.timeline-entry {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 255, 255, 0.78);
    text-align: left;
}

.timeline-entry.is-conflict {
    border-color: rgba(200, 107, 57, 0.38);
    background: rgba(255, 243, 235, 0.88);
}

.timeline-time-col {
    display: grid;
    gap: 4px;
    align-content: start;
}

.timeline-time-col strong {
    font-size: 1rem;
}

.timeline-time-col span,
.timeline-entry-type,
.timeline-free-slots span {
    color: var(--muted);
    font-size: 0.78rem;
}

.timeline-copy-col {
    display: grid;
    gap: 6px;
}

.timeline-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.timeline-all-day-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(143, 101, 77, 0.1);
    color: var(--brown);
    font-size: 0.78rem;
    font-weight: 700;
}

.responsibility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.responsibility-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--member-accent, #2a9d8f) 20%, white);
    background: color-mix(in srgb, var(--member-accent, #2a9d8f) 8%, white);
}

.responsibility-metrics {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.84rem;
}

.budget-alert-row[data-level='warning'] {
    border-left: 4px solid rgba(200, 107, 57, 0.9);
}

.budget-alert-row[data-level='critical'] {
    border-left: 4px solid rgba(167, 56, 34, 0.9);
}

.budget-alert-value {
    color: var(--accent-strong);
}

.bottom-gap-sm {
    margin-bottom: 12px;
}

.history-section {
    display: grid;
    gap: 10px;
}

.history-section + .history-section {
    margin-top: 14px;
}

.history-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(121, 168, 148, 0.08);
    border: 1px solid rgba(121, 168, 148, 0.14);
}

.history-section-head strong {
    display: block;
    font-size: 0.95rem;
}

.history-section-head span,
.history-section-count {
    color: var(--muted);
    font-size: 0.86rem;
}

.focus-card {
    padding: 18px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    border-radius: var(--radius-lg);
    background: rgba(255, 252, 248, 0.88);
    box-shadow: var(--shadow-soft);
    text-align: left;
}

.focus-card strong,
.focus-card span {
    display: block;
}

.focus-card strong {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin: 10px 0 6px;
}

.focus-card span,
.focus-card small {
    color: var(--muted);
}

.weather-card {
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 244, 232, 0.98), rgba(252, 248, 242, 0.95));
    box-shadow: var(--shadow-soft);
}

.weather-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.weather-card h3 {
    font-size: 1.3rem;
    overflow-wrap: anywhere;
}

.weather-location-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.weather-summary {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.weather-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.weather-actions > * {
    min-width: 0;
    max-width: 100%;
}

.weather-now {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.weather-now strong {
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1;
}

.weather-now-values {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.weather-detail-icon,
.weather-compact-icon,
.weather-day-icon {
    display: inline-grid;
    place-items: center;
    color: var(--accent);
}

.weather-detail-icon {
    width: 46px;
    height: 46px;
}

.weather-compact-icon {
    width: 30px;
    height: 30px;
}

.weather-day-icon {
    width: 28px;
    height: 28px;
    margin: 0 auto;
}

.weather-detail-icon svg,
.weather-compact-icon svg,
.weather-day-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.weather-range-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.weather-now small,
.weather-now span,
.weather-day small {
    color: var(--muted);
}

.weather-week {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 10px;
}

.weather-day {
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    text-align: center;
    display: grid;
    gap: 8px;
}

.weather-day strong {
    display: block;
    margin-bottom: 0;
}

.weather-day-range {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
}

.home-modal-card {
    box-shadow: none;
    border-color: rgba(124, 80, 48, 0.1);
}

.weather-day small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.4;
}

.home-hero-panel::-webkit-scrollbar,
.focus-board::-webkit-scrollbar,
.weather-week::-webkit-scrollbar {
    display: none;
}

.ephemeris-card {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(121, 168, 148, 0.18);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(238, 248, 242, 0.98), rgba(252, 248, 242, 0.95));
    box-shadow: var(--shadow-soft);
}

.ephemeris-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ephemeris-head-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ephemeris-nav-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ephemeris-nav-btn {
    padding: 4px 10px;
    font-size: 0.9rem;
    border-radius: 999px;
    min-width: 36px;
}

.ephemeris-card h3 {
    font-size: 1.3rem;
}

.ephemeris-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ephemeris-item {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    display: grid;
    gap: 8px;
}

.ephemeris-item.wide {
    grid-column: span 2;
}

.ephemeris-label {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}

.ephemeris-item strong {
    font-family: var(--font-heading);
    font-size: 1.05rem;
}

.ephemeris-item small,
.ephemeris-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.ephemeris-note {
    font-size: 0.88rem;
}

.ephemeris-saying {
    margin: 0;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 252, 248, 0.9);
    border-left: 4px solid rgba(200, 107, 57, 0.4);
    color: var(--brown);
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.6;
}

.dashboard-grid,
.content-grid,
.notes-grid,
.member-grid,
.summary-cards,
.quick-access-board {
    display: grid;
    gap: 14px;
}

.dashboard-grid,
.quick-access-board,
.home-compact-strip {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.metric-card {
    width: 100%;
    min-height: 176px;
    padding: 20px;
    display: grid;
    gap: 14px;
    grid-template-rows: auto 1fr auto;
    align-content: stretch;
    text-align: left;
    background: linear-gradient(180deg, rgba(255, 250, 245, 0.96), rgba(252, 245, 237, 0.94));
}

.metric-card[data-tone='warm'] {
    background: linear-gradient(160deg, rgba(255, 239, 224, 1), rgba(255, 249, 243, 0.98));
}

.metric-card[data-tone='sage'] {
    background: linear-gradient(160deg, rgba(234, 246, 241, 1), rgba(255, 250, 245, 0.98));
}

.metric-card[data-tone='sun'] {
    background: linear-gradient(160deg, rgba(252, 240, 208, 1), rgba(255, 249, 243, 0.98));
}

.metric-card[data-tone='clay'] {
    background: linear-gradient(160deg, rgba(246, 228, 214, 1), rgba(255, 249, 243, 0.98));
}

.metric-head,
.shortcut-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.metric-icon,
.shortcut-icon {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 0 0 1px rgba(200, 107, 57, 0.12);
}

.metric-label,
.shortcut-copy small,
.item-meta,
.summary-list span,
.summary-list li {
    color: var(--muted);
}

.metric-value {
    font-size: clamp(2rem, 4vw, 2.7rem);
    line-height: 0.95;
    color: var(--text);
}

.metric-meta {
    font-size: 0.9rem;
    color: var(--brown-soft);
}

.quick-access-board {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.shortcut-card {
    width: 100%;
    min-height: 130px;
    padding: 16px 18px;
    display: grid;
    gap: 10px;
    grid-template-rows: auto 1fr;
    align-content: stretch;
    text-align: left;
    background: rgba(255, 251, 247, 0.86);
}

.shortcut-label {
    font-size: 1rem;
    line-height: 1.2;
}

.shortcut-info {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-content: start;
}

.shortcut-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 44px;
}

.shortcut-stat-val {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
}

.shortcut-stat.is-alert .shortcut-stat-val {
    color: var(--accent);
}

.shortcut-stat-key {
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shortcut-today-menus {
    width: 100%;
    display: grid;
    gap: 2px;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.3;
}

.shortcut-actions {
    display: none;
}

.home-compact-card {
    height: 100%;
    grid-template-rows: auto auto 1fr;
}

.shortcut-copy {
    display: grid;
    gap: 4px;
}

.shortcut-copy strong {
    font-size: 1.1rem;
}

.shortcut-copy small {
    color: var(--muted);
    line-height: 1.4;
}

.shortcut-badge {
    justify-self: start;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(200, 107, 57, 0.1);
    color: var(--accent-strong);
    font-size: 0.82rem;
    font-weight: 800;
}

.content-grid.two-columns,
.content-grid.home-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agenda-display-card {
    display: grid;
    gap: 18px;
}

.planner-toolbar {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.module-primary-toolbar {
    align-items: flex-start;
}

.module-primary-toolbar .planner-head-actions {
    flex: 1 1 420px;
}

.module-primary-toolbar .section-head-actions {
    flex: 1 1 320px;
    justify-content: flex-end;
}

.planner-head-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    flex-wrap: wrap;
}

.planner-toolbar-cluster {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.planner-toolbar-cluster-main {
    flex: 1 1 420px;
    justify-content: flex-start;
}

.planner-toolbar-cluster-actions {
    flex: 0 1 auto;
    justify-content: flex-end;
}

.toolbar-menu {
    position: relative;
}

.toolbar-menu summary {
    list-style: none;
    cursor: pointer;
}

.toolbar-menu summary::-webkit-details-marker {
    display: none;
}

.toolbar-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 5;
    display: grid;
    gap: 8px;
    min-width: min(320px, calc(100vw - 40px));
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(200, 107, 57, 0.12);
    background: rgba(255, 250, 244, 0.98);
    box-shadow: 0 20px 38px rgba(49, 36, 29, 0.14);
}

.planner-toggle-menu {
    grid-template-columns: 1fr;
}

.toolbar-menu:not([open]) .toolbar-menu-panel {
    display: none;
}

.toolbar-icon-btn {
    width: 44px;
    min-width: 44px;
    padding: 0;
    aspect-ratio: 1;
}

.settings-modal-source[hidden] {
    display: none !important;
}

.planner-toggles {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.planner-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 245, 236, 0.92);
    border: 1px solid rgba(200, 107, 57, 0.12);
    font-weight: 700;
    color: var(--brown);
}

.planner-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.agenda-view-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}


.agenda-filter-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255, 245, 236, 0.92);
    border: 1px solid rgba(200, 107, 57, 0.12);
}

/* Groupes de dates dans la vue liste — style Planning */
.agenda-date-group {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(200, 107, 57, 0.1);
    margin-bottom: 0;
    scroll-margin-top: 80px;
}

.agenda-date-group:last-child {
    border-bottom: none;
}

.agenda-date-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    gap: 2px;
}

.agenda-date-marker-dayname {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.agenda-date-marker-daynum {
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agenda-date-group.is-today .agenda-date-marker-daynum {
    background: var(--accent, #c86b39);
    color: white;
    border-radius: 50%;
}

.agenda-date-items {
    min-width: 0;
    padding-top: 8px;
    padding-bottom: 4px;
    display: grid;
    gap: 6px;
}

.planning-month-separator {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    padding: 16px 0 6px;
    border-top: 1px solid rgba(200, 107, 57, 0.15);
}

.planning-month-separator:first-child {
    border-top: none;
    padding-top: 4px;
}

.agenda-display-card .content-grid.two-columns {
    gap: 18px;
}

/* Par défaut, les événements occupent toute la largeur (quand tâches/menus masqués) */
.agenda-display-card .content-grid.two-columns > article:first-child {
    grid-column: 1 / -1;
}

/* Si une colonne optionnelle est visible, les événements reprennent leur colonne normale */
.agenda-display-card .content-grid.two-columns:has(> article:not([hidden]):nth-child(n+2)) > article:first-child {
    grid-column: auto;
}

.agenda-display-card article {
    display: grid;
    gap: 12px;
}

.view-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255, 245, 236, 0.96);
    border: 1px solid rgba(200, 107, 57, 0.12);
}

.view-switch-btn {
    padding: 10px 14px;
    border-radius: 999px;
    background: transparent;
    color: var(--brown-soft);
    font-weight: 800;
}

.view-switch-btn.active {
    background: linear-gradient(135deg, var(--accent), #e29653);
    color: #fffdf9;
    box-shadow: 0 10px 22px rgba(200, 107, 57, 0.2);
}

.agenda-view-panel {
    display: grid;
    gap: 16px;
}

.agenda-view-panel[hidden] {
    display: none !important;
}

.agenda-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.agenda-calendar-toolbar strong {
    font-size: 1.05rem;
    text-transform: capitalize;
    overflow-wrap: anywhere;
    text-align: center;
}

.agenda-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.agenda-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}

.agenda-calendar-weekday {
    padding: 0 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: var(--brown-soft);
    font-weight: 800;
}

.agenda-calendar-day {
    min-height: 160px;
    padding: 12px;
    border-radius: 20px;
    background: rgba(255, 251, 247, 0.92);
    border: 1px solid rgba(200, 107, 57, 0.12);
    display: grid;
    gap: 10px;
    align-content: start;
    cursor: pointer;
}

.agenda-week-day {
    min-height: 260px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255, 251, 247, 0.92);
    border: 1px solid rgba(200, 107, 57, 0.12);
    display: grid;
    gap: 12px;
    align-content: start;
    cursor: pointer;
}

.agenda-calendar-day.is-outside {
    opacity: 0.45;
}

.agenda-calendar-day.is-today {
    border-color: rgba(200, 107, 57, 0.42);
    box-shadow: inset 0 0 0 1px rgba(200, 107, 57, 0.16);
}

.agenda-week-day.is-today {
    border-color: rgba(200, 107, 57, 0.42);
    box-shadow: inset 0 0 0 1px rgba(200, 107, 57, 0.16);
}

.agenda-calendar-day.is-selected {
    background: rgba(255, 241, 229, 0.96);
    border-color: rgba(200, 107, 57, 0.3);
}

.agenda-week-day.is-selected {
    background: rgba(255, 241, 229, 0.96);
    border-color: rgba(200, 107, 57, 0.3);
}

.agenda-calendar-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 800;
}

.agenda-week-day-head {
    display: grid;
    gap: 4px;
}

.agenda-week-day-head strong {
    font-size: 0.98rem;
}

.agenda-week-day-head span {
    font-size: 0.82rem;
    color: var(--muted);
}

.agenda-calendar-day-head small {
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(200, 107, 57, 0.12);
    color: var(--accent-strong);
}

.agenda-calendar-day-body {
    display: grid;
    gap: 8px;
}

.agenda-week-day-body {
    display: grid;
    gap: 8px;
    align-content: start;
}

.agenda-calendar-item {
    display: grid;
    gap: 3px;
    padding: 8px 9px;
    border-radius: 14px;
    background: rgba(255, 213, 178, 0.9);
    border: 1px solid rgba(200, 107, 57, 0.28);
    text-align: left;
    width: 100%;
    min-height: 60px;
    cursor: pointer;
    touch-action: manipulation;
}

/* Couleur propre au calendrier Google (variable injectée via style inline) */
.agenda-calendar-item[style*="--event-calendar-color"] {
    background: color-mix(in srgb, var(--event-calendar-color) 18%, white 82%);
    border-color: color-mix(in srgb, var(--event-calendar-color) 35%, transparent 65%);
    border-left: 4px solid var(--event-calendar-color);
}

.data-row-agenda[style*="--event-calendar-color"] {
    border-left: 4px solid var(--event-calendar-color);
}

.agenda-openable {
    cursor: pointer;
}

.agenda-openable:hover {
    box-shadow: 0 14px 28px rgba(105, 67, 42, 0.12);
}

.agenda-calendar-item.task {
    background: rgba(185, 228, 210, 0.95);
    border-color: rgba(39, 140, 100, 0.28);
}

.agenda-calendar-item.birthday {
    background: rgba(255, 188, 178, 0.95);
    border-color: rgba(192, 57, 43, 0.32);
}

.agenda-calendar-item.menuPlan {
    background: rgba(170, 240, 200, 0.95);
    border-color: rgba(39, 174, 96, 0.32);
}

.agenda-calendar-item.secondary {
    opacity: 0.88;
}

.agenda-calendar-item.is-past,
.agenda-calendar-item.is-completed {
    opacity: 0.6;
}

.agenda-calendar-item.is-past strong,
.agenda-calendar-item.is-completed strong {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(104, 79, 58, 0.55);
}

.agenda-calendar-item.shared {
    box-shadow: inset 0 0 0 1px rgba(200, 107, 57, 0.18);
}

.agenda-calendar-item strong {
    font-size: 0.86rem;
    line-height: 1.25;
}

.agenda-calendar-item-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: rgba(84, 96, 106, 0.1);
    color: #41505a;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.agenda-calendar-item.compact-preview strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #31241d;
}

.agenda-calendar-item span,
.agenda-calendar-empty,
.agenda-calendar-more {
    font-size: 0.78rem;
    color: var(--muted);
}

.agenda-calendar-empty {
    padding-top: 4px;
}

.agenda-calendar-more {
    font-weight: 700;
}

.compact-policy-note {
    margin-top: 14px;
}

.discreet-settings {
    padding: 0;
    overflow: hidden;
}

.discreet-settings summary {
    list-style: none;
    display: grid;
    gap: 4px;
    padding: 16px 48px 16px 16px;
    cursor: pointer;
    position: relative;
}

.discreet-settings summary::-webkit-details-marker {
    display: none;
}

.discreet-settings summary::after {
    content: '+';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(200, 107, 57, 0.1);
    color: var(--accent-strong);
    font-size: 1rem;
    font-weight: 800;
}

.discreet-settings[open] summary::after {
    content: '−';
}

.discreet-settings summary small {
    color: var(--muted);
}

.discreet-settings-body {
    display: grid;
    gap: 14px;
    padding: 0 16px 16px;
}

.danger-btn {
    color: #8a2828;
    border: 1px solid rgba(138, 40, 40, 0.18);
    background: rgba(138, 40, 40, 0.08);
}

.panel-card {
    padding: 16px;
    background: var(--module-surface, var(--surface));
}

.module-primary-card {
    background: var(--module-primary-surface) !important;
    border-color: rgba(124, 80, 48, 0.16);
}

.module-secondary-card {
    background: var(--module-secondary-surface) !important;
}

.nested-panel-card {
    padding: 14px;
    background: rgba(255, 255, 255, 0.72) !important;
    border-radius: 20px;
}

.nested-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.panel-card::before,
.metric-card::before,
.shortcut-card::before,
.focus-card::before,
.weather-card::before,
.note-list-card::before,
.summary-tile::before,
.stack-item::before,
.member-chip::before,
.note-item::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--module-strip, linear-gradient(180deg, rgba(200, 107, 57, 0.72), rgba(245, 200, 94, 0.18)));
    opacity: 0.7;
}

.accent-card {
    background: linear-gradient(180deg, rgba(255, 248, 241, 0.98), rgba(247, 237, 225, 0.96));
}

.roles-panel {
    background: linear-gradient(180deg, rgba(255, 248, 241, 0.94), rgba(255, 252, 248, 0.96));
}

.section-head,
.split-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.section-head > div:not(.section-head-actions):not(.planner-head-actions) {
    display: grid;
    gap: 2px;
}

.module-tab > .section-head,
#tab-repertoire > .section-head,
#tab-finances > .section-head,
#tab-membres > .section-head {
    align-items: flex-start;
}

.module-top-actions {
    margin: -2px 0 14px;
}

.module-top-actions-track {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

.module-top-actions-track-inline {
    width: 100%;
    justify-content: flex-end;
}

.agenda-toolbar-actions {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}

.module-action-chip {
    min-height: 46px;
    justify-content: flex-start;
    flex: 0 1 auto;
}

.agenda-action-icon-btn {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    overflow: visible;
}

.agenda-action-icon-btn[data-create-entity]::after,
#documents-drive-upload-btn::after {
    content: '+';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    color: var(--accent, #c86b39);
    font-size: 12px;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
    border: 1.5px solid rgba(200, 107, 57, 0.3);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.module-action-chip.is-primary {
    min-width: 0;
}

.module-action-chip[data-mobile-icon-only="true"] .button-icon {
    width: 18px;
    height: 18px;
}

.module-action-chip[data-mobile-icon-only="true"] .button-label {
    display: inline-flex;
}

.module-action-chip .button-icon {
    width: 18px;
    height: 18px;
}

.module-action-chip .button-icon svg {
    width: 18px;
    height: 18px;
}

.agenda-action-icon-btn .button-icon,
.agenda-action-icon-btn .button-icon svg,
.icon-only-control .button-icon,
.icon-only-control .button-icon svg {
    width: 20px;
    height: 20px;
}

.agenda-action-icon-btn .button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.agenda-toolbar-actions .toolbar-icon-btn {
    box-shadow: inset 0 0 0 1px rgba(200, 107, 57, 0.08);
}

.agenda-toolbar-actions #agenda-create-event-btn {
    box-shadow: 0 14px 26px rgba(200, 107, 57, 0.22);
}

.agenda-toolbar-actions #agenda-create-birthday-btn {
    border-color: rgba(196, 104, 131, 0.22);
    color: #9b4660;
    background: rgba(253, 238, 243, 0.96);
}

.agenda-toolbar-actions #agenda-sync-btn.is-busy,
.agenda-toolbar-actions #tasks-sync-btn.is-busy,
.agenda-toolbar-actions #menus-sync-btn.is-busy {
    color: #1a5c8a;
    background: rgba(219, 234, 248, 0.96);
    border-color: rgba(91, 153, 208, 0.36);
    animation: sync-pulse 1.2s ease-in-out infinite;
}

.agenda-action-icon-btn.is-busy {
    animation: sync-pulse 1.2s ease-in-out infinite;
}

@keyframes sync-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.agenda-action-icon-btn .button-label,
.icon-only-control .button-label {
    display: none;
}

.module-action-chip.module-action-compact {
    width: 46px;
    min-width: 46px;
    padding: 0;
    justify-content: center;
}

.module-action-chip.module-action-compact .button-label {
    display: none;
}

.settings-center-shell {
    display: grid;
    gap: 14px;
}

.settings-center-toolbar {
    display: grid;
    gap: 10px;
}

.settings-center-search {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 255, 255, 0.82);
}

.settings-center-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-filter-chip {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 247, 239, 0.84);
    color: var(--brown);
    font-weight: 800;
}

.settings-filter-chip.is-active {
    background: linear-gradient(135deg, var(--accent), #e29653);
    color: #fffdf9;
    border-color: rgba(167, 84, 39, 0.26);
}

.settings-center-list {
    display: grid;
    gap: 10px;
}

.settings-entry-card {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 255, 255, 0.76);
}

.settings-entry-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.settings-entry-copy {
    display: grid;
    gap: 4px;
}

.settings-entry-copy strong {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
}

.settings-entry-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 244, 234, 0.92);
    color: var(--accent-strong);
}

.settings-entry-meta {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.settings-entry-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-entry-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(200, 107, 57, 0.1);
    color: var(--accent-strong);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stack-list,
.content-grid,
.members-layout,
.course-lists-grid,
.mini-metric-grid,
.summary-cards,
.notes-grid,
.post-it-wall,
.responsibility-grid {
    align-items: stretch;
}

.nested-panel-card,
.store-group-card,
.course-list-card,
.mini-metric-card,
.prep-card,
.journal-entry-card,
.finance-budget-card,
.post-it-card,
.summary-tile,
.note-list-card,
.member-chip,
.stack-item {
    height: 100%;
}

.nested-panel-card,
.store-group-card,
.mini-metric-card,
.prep-card,
.journal-entry-card,
.finance-budget-card,
.post-it-card,
.summary-tile,
.note-list-card {
    display: grid;
    align-content: start;
}

.course-list-card,
.stack-item,
.member-chip,
.note-item,
.summary-list li {
    min-height: 84px;
}

.course-list-card {
    align-items: stretch;
}

.course-list-card-main,
.stack-item-content,
.prep-card-body,
.shortcut-copy,
.settings-entry-copy {
    align-content: start;
}

.post-it-card-head,
.store-group-head,
.finance-visual-header,
.menu-plan-card-head {
    align-items: flex-start;
}

.mini-metric-card,
.summary-tile,
.finance-budget-card,
.prep-card,
.journal-entry-card,
.store-group-card,
.nested-panel-card {
    box-shadow: 0 10px 24px rgba(49, 36, 29, 0.06);
}

.settings-entry-empty {
    padding: 18px;
    border-radius: 20px;
    border: 1px dashed rgba(124, 80, 48, 0.2);
    color: var(--muted);
    background: rgba(255, 252, 248, 0.78);
}

.action-btn.is-active {
    background: rgba(200, 107, 57, 0.16);
    color: var(--accent-strong);
}

.section-head h2 {
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1.05;
}

.section-head h3 {
    font-size: 1rem;
}

.form-grid {
    display: grid;
    gap: 10px;
}

.panel-toolbar {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.panel-toolbar-split {
    grid-template-columns: minmax(0, 1.6fr) minmax(160px, 0.8fr);
}

.panel-toolbar-notes {
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(150px, 0.7fr));
    align-items: center;
}

.panel-toolbar-notes input[type="search"],
.panel-toolbar-notes select {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.toolbar-inline-group,
.session-actions,
.compact-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.toolbar-inline-group > *,
.session-actions > *,
.compact-actions > * {
    max-width: 100%;
}

.inline-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.inline-field span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.wide-panel-card,
.finance-history-panel,
.directory-table-host,
.summary-cards,
.stack-list.compact {
    min-width: 0;
}

.note-member-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -2px 0 4px;
}

.note-member-chip {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 250, 244, 0.88);
    border: 1px solid rgba(124, 80, 48, 0.12);
    color: var(--brown);
    font-size: 0.84rem;
    font-weight: 700;
}

.note-member-chip[data-tone='mine'] {
    background: rgba(255, 242, 232, 0.94);
}

.note-member-chip.active {
    background: linear-gradient(135deg, var(--accent), #e29653);
    color: #fffdf9;
    box-shadow: 0 10px 22px rgba(200, 107, 57, 0.18);
}

.directory-toolbar {
    margin-bottom: 10px;
}

.directory-alpha-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.directory-letter-btn {
    min-width: 38px;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 247, 239, 0.92);
    border: 1px solid rgba(200, 107, 57, 0.14);
    color: var(--brown-soft);
    font-weight: 800;
}

.directory-letter-btn.active {
    background: linear-gradient(135deg, var(--accent), #e29653);
    color: #fffdf9;
    box-shadow: 0 10px 22px rgba(200, 107, 57, 0.2);
}

.directory-letter-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.directory-results-meta {
    margin-bottom: 12px;
}

.directory-table-host {
    display: grid;
}

.directory-table-wrap {
    overflow-x: auto;
    border-radius: 22px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 255, 255, 0.72);
}

.directory-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.directory-table th,
.directory-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(124, 80, 48, 0.1);
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}

.directory-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(247, 237, 225, 0.98);
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brown-soft);
}

.directory-table tbody tr:hover {
    background: rgba(255, 248, 241, 0.72);
}

.directory-empty-cell {
    color: var(--muted);
    text-align: center;
}

.directory-notes-cell {
    min-width: 220px;
    max-width: 320px;
    color: var(--muted);
}

.directory-contact-stack {
    display: grid;
    gap: 8px;
}

.directory-contact-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.directory-primary-link {
    color: var(--brown-strong);
    font-weight: 700;
    text-decoration: none;
}

.directory-primary-link:hover {
    text-decoration: underline;
}

.directory-copy-btn,
.directory-quick-btn {
    padding: 6px 10px;
    min-height: auto;
    border-radius: 999px;
    font-size: 0.78rem;
}

.directory-selectable {
    user-select: text;
    white-space: pre-wrap;
}

.directory-actions-cell {
    min-width: 124px;
}

.directory-actions-cell .item-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.load-more-btn {
    margin-top: 12px;
    width: 100%;
    justify-content: center;
}

.inline-grid,
.address-grid,
.finance-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: center;
}

.members-layout,
.member-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid rgba(124, 80, 48, 0.14);
    border-radius: 16px;
    padding: 11px 13px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

textarea {
    min-height: 88px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(200, 107, 57, 0.18);
    border-color: rgba(200, 107, 57, 0.38);
}

.stack-list,
.summary-list,
.note-items {
    display: grid;
    gap: 10px;
}

.summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-list li,
.stack-item,
.member-chip,
.note-list-card,
.note-item,
.summary-tile {
    border-radius: var(--radius-md);
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 255, 255, 0.72);
}

.summary-list li,
.stack-item,
.member-chip,
.note-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 10px 12px;
}

.stack-item,
.note-item {
    align-items: flex-start;
}

.stack-item-content {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 4px;
}

.item-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
}

.planner-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
}

.planner-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(124, 80, 48, 0.12);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.planner-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    background: rgba(200, 107, 57, 0.35);
}

.planner-legend-dot.event {
    background: rgba(200, 107, 57, 0.65);
}

.planner-legend-dot.birthday {
    background: rgba(192, 57, 43, 0.85);
}

.planner-legend-dot.task {
    background: rgba(121, 168, 148, 0.78);
}

.planner-legend-dot.menu {
    background: rgba(39, 174, 96, 0.82);
}

.planner-legend-dot.shared {
    background: linear-gradient(135deg, rgba(200, 107, 57, 0.9), rgba(121, 168, 148, 0.85));
}

.planner-legend-dot.past {
    background: rgba(104, 79, 58, 0.45);
}

.planner-support-grid,
.planner-support-grid-single {
    margin-top: 14px;
}


.inline-template-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-bottom: 12px;
}

.inline-template-form input {
    min-height: 42px;
}

.template-row,
.routine-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.routine-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 2px;
}

.is-muted {
    opacity: 0.66;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(104, 79, 58, 0.08);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.status-pill[data-tone="warm"] {
    background: rgba(200, 107, 57, 0.12);
    color: var(--accent-strong);
}

.status-pill[data-tone="success"] {
    background: rgba(121, 168, 148, 0.15);
    color: #2f6e57;
}

.mini-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mini-metric-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(124, 80, 48, 0.1);
    background: rgba(255, 255, 255, 0.76);
}

.mini-metric-card span {
    color: var(--muted);
    font-size: 0.82rem;
}

.mini-metric-card strong {
    font-size: 1.35rem;
    line-height: 1.1;
}

.mini-metric-card[data-tone="warm"] {
    background: rgba(246, 228, 214, 0.74);
}

.mini-metric-card[data-tone="sun"] {
    background: rgba(248, 236, 204, 0.8);
}

.mini-metric-card[data-tone="sage"] {
    background: rgba(215, 235, 227, 0.84);
}

.mini-metric-card[data-tone="clay"] {
    background: rgba(238, 226, 215, 0.84);
}

.prep-board,
.journal-entries-list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.prep-card,
.journal-entry-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(124, 80, 48, 0.1);
    background: rgba(255, 255, 255, 0.78);
}

.prep-card[data-status="to_buy"] {
    background: rgba(248, 236, 204, 0.82);
}

.prep-card[data-status="to_cook"] {
    background: rgba(246, 228, 214, 0.76);
}

.prep-card[data-status="ready"] {
    background: rgba(215, 235, 227, 0.84);
}

.prep-card-head,
.journal-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.prep-card-body {
    display: grid;
    gap: 10px;
}

.prep-card-copy {
    color: var(--text);
    line-height: 1.45;
}

.prep-card-checklist {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.prep-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.prep-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(124, 80, 48, 0.08);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.prep-tag.success {
    background: rgba(121, 168, 148, 0.16);
    color: #2f6e57;
}

.compact-journal-editor {
    gap: 8px;
}

.journal-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.notification-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding-left: 18px;
}

.notification-row::before {
    content: '';
    position: absolute;
    inset: 10px auto 10px 0;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(200, 107, 57, 0.95), rgba(245, 200, 94, 0.65));
}

.notification-row.is-urgent {
    background: linear-gradient(180deg, rgba(255, 248, 241, 0.98), rgba(255, 239, 226, 0.92));
    border-color: rgba(200, 107, 57, 0.18);
}

.notification-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.notification-type-badge,
.notification-date {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
}

.notification-type-badge {
    color: var(--brown);
    background: rgba(255, 241, 228, 0.98);
    border: 1px solid rgba(200, 107, 57, 0.16);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.notification-date {
    color: var(--muted);
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(124, 80, 48, 0.08);
}

.modal-advanced-section {
    margin: 4px 0 0;
    border-radius: 16px;
    border: 1px solid rgba(124, 80, 48, 0.1);
    background: rgba(255, 255, 255, 0.56);
}

.modal-advanced-section summary {
    cursor: pointer;
    padding: 11px 12px;
    font-weight: 700;
}

.modal-advanced-body {
    display: grid;
    gap: 12px;
    padding: 0 12px 12px;
}

.searchable-select-wrapper {
    display: grid;
    gap: 4px;
}

.searchable-select-filter {
    padding: 6px 10px;
    border: 1px solid rgba(124, 80, 48, 0.22);
    border-radius: 8px;
    font-size: 0.875rem;
    background: rgba(255, 255, 255, 0.7);
}

.searchable-select-wrapper select {
    width: 100%;
}

.stack-item strong,
.note-list-card h3,
.member-chip strong {
    font-size: 1rem;
}

.data-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.9fr) minmax(180px, 0.9fr) auto;
    gap: 14px;
}

.data-row-task,
.data-row-note-list,
.data-row-note-item,
.data-row-finance-breakdown {
    grid-template-columns: minmax(0, 1.2fr) minmax(160px, 0.8fr) minmax(140px, 0.7fr) auto;
}

.data-row-agenda .action-btn,
.data-row-task .action-btn {
    width: 44px;
    height: 44px;
}

.data-row-birthday {
    background: rgba(255, 188, 178, 0.6);
    border-color: rgba(192, 57, 43, 0.25);
    --module-strip: linear-gradient(180deg, rgba(192, 57, 43, 0.88), rgba(255, 120, 100, 0.2));
}

.data-row-birthday.is-past {
    opacity: 0.72;
}

.data-row-meal,
.data-row-menu-plan,
.data-row-address {
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 1fr) minmax(180px, 0.8fr) auto;
}

.menu-plan-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.menu-plan-card-body {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.menu-plan-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.menu-plan-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.menu-plan-title {
    display: block;
    font-size: 1.02rem;
    margin-bottom: 4px;
}

.menu-plan-source {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.34rem 0.75rem;
    background: rgba(41, 67, 78, 0.08);
    color: #29434e;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.menu-plan-card-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.menu-plan-card-section {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(124, 80, 48, 0.1);
}

.data-row-note-list,
.data-row-note-item,
.data-row-finance-breakdown {
    align-items: center;
}

.finance-import-actions {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(124, 80, 48, 0.1);
    background: linear-gradient(180deg, rgba(255, 249, 242, 0.92), rgba(248, 239, 228, 0.88));
}

.inline-help {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.finance-report-section {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.finance-mobile-month-controls[hidden] {
    display: none !important;
}

.finance-mobile-month-nav {
    display: none;
}

/* ── Tuiles résumé 3 mois (mobile) ──────────────────────────────────────── */
.finance-mobile-months-summary {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.finance-mobile-month-tile {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 8px 6px;
    border-radius: 12px;
    border: 1px solid rgba(124, 80, 48, 0.10);
    background: rgba(255, 255, 255, 0.72);
    text-align: center;
}

.finance-mobile-month-tile.is-active {
    background: linear-gradient(135deg, rgba(200, 107, 57, 0.09), rgba(245, 200, 94, 0.07));
    border-color: rgba(200, 107, 57, 0.25);
    box-shadow: 0 2px 8px rgba(200, 107, 57, 0.08);
}

.finance-mobile-month-tile-name {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brown-soft);
}

.finance-mobile-month-tile-data {
    display: grid;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.fmmt-rev {
    color: #2a7a42;
    font-size: 0.72rem;
}

.fmmt-dep {
    color: #b44c2a;
    font-size: 0.72rem;
}

.fmmt-sol {
    font-size: 0.8rem;
    font-weight: 700;
    padding-top: 2px;
    border-top: 1px solid rgba(124, 80, 48, 0.1);
    margin-top: 2px;
}

.finance-mobile-nav-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    flex-shrink: 0;
    justify-content: center;
    font-size: 0.9rem;
}

.finance-mobile-month-range {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.finance-mobile-month-range strong {
    font-size: 0.95rem;
    line-height: 1.2;
}

.finance-mobile-month-range small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.finance-report-table th,
.finance-report-table td {
    white-space: nowrap;
    font-size: 0.71rem;
    padding: 4px 6px;
}

.finance-report-table thead th:first-child,
.finance-report-table tbody td:first-child,
.finance-report-table tfoot th:first-child {
    position: sticky;
    left: 0;
    background: rgba(255, 250, 245, 0.98);
    z-index: 1;
}

/* Unified finance report table */
.finance-report-unified .finance-group-header-row td {
    background: rgba(124, 80, 48, 0.06);
    border-top: 2px solid rgba(124, 80, 48, 0.14);
    padding-top: 5px;
    padding-bottom: 5px;
}

.finance-report-unified .finance-group-label {
    font-weight: 600;
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    border-left: 3px solid rgba(124, 80, 48, 0.28);
}

.finance-report-unified .finance-child-cell {
    padding-left: 20px;
}

.finance-report-unified .finance-subtotal-row .finance-poste-cell,
.finance-report-unified .finance-solde-row .finance-poste-cell {
    border-left: none;
}

.finance-report-unified .finance-poste-cell {
    min-width: 140px;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-report-unified .finance-num-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
    width: 66px;
    min-width: 60px;
    max-width: 80px;
}

.finance-report-unified .finance-total-cell {
    font-weight: 600;
}

.finance-report-unified .finance-row-revenu td {
    background: rgba(220, 240, 220, 0.18);
}

.finance-report-unified .finance-row-depense td {
    background: rgba(255, 240, 235, 0.25);
}

.finance-report-unified .finance-row-depense .finance-num-cell {
    color: #b44c2a;
}

.finance-report-unified .finance-row-neutral td {
    background: transparent;
}

.finance-report-unified .finance-subtotal-row td {
    font-weight: 600;
    background: rgba(124, 80, 48, 0.06);
    border-top: 1px solid rgba(124, 80, 48, 0.15);
    border-bottom: 2px solid rgba(124, 80, 48, 0.18);
}

.finance-report-unified .finance-subtotal-revenu .finance-num-cell {
    color: #2a7a42;
}

.finance-report-unified .finance-subtotal-depense .finance-num-cell {
    color: #b44c2a;
}

.finance-cell-positive {
    color: #2a7a42;
}

.finance-cell-negative {
    color: #b44c2a;
}

.finance-report-unified .finance-subtotal-label,
.finance-report-unified .finance-solde-label {
    font-weight: 700;
}

.finance-report-unified .finance-solde-row td {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.04);
    border-top: 2px solid rgba(124, 80, 48, 0.3);
}

.finance-report-unified .finance-solde-cheques-repas-row td {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.04);
    border-top: 12px solid transparent;
}

.finance-report-unified .finance-solde-finale2-row td {
    border-top: 2px solid rgba(124, 80, 48, 0.3);
}

.finance-solde-positive {
    color: #2a7a42;
}

.finance-solde-negative {
    color: #b44c2a;
}

.finance-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 4px;
    background: rgba(124, 80, 48, 0.10);
    color: var(--muted);
    font-size: 0.75rem;
    cursor: pointer;
    margin-right: 5px;
    vertical-align: middle;
    transition: transform 0.18s ease, background 0.15s;
    flex-shrink: 0;
}

.finance-expand-btn:hover {
    background: rgba(124, 80, 48, 0.20);
}

.finance-expand-btn--open {
    transform: rotate(180deg);
    background: rgba(124, 80, 48, 0.16);
}

.finance-expand-btn--empty {
    opacity: 0.18;
    cursor: default;
    pointer-events: none;
}

.finance-view-selector {
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--border-subtle, #ddd);
    background: var(--surface, #fff);
    color: var(--text-primary, #222);
    cursor: pointer;
}

.finance-cat-type-header {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary, #666);
    padding: 0.6rem 0.75rem 0.2rem;
    border-top: 1px solid var(--border-subtle, #eee);
    margin-top: 0.25rem;
}
.finance-cat-type-header:first-child {
    border-top: none;
    margin-top: 0;
}

.finance-cat-poste1-row {
    background: var(--surface-raised, #f9f9f9);
    font-weight: 600;
}

.finance-cat-poste2-row {
    padding-left: 1.25rem;
    border-left: 2px solid var(--border-subtle, #eee);
    margin-left: 0.5rem;
}

.finance-cat-account-specific {
    border-left-color: var(--accent, #4a80f5);
    background: color-mix(in srgb, var(--accent, #4a80f5) 6%, transparent);
}

.badge-account {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    background: var(--accent, #4a80f5);
    color: #fff;
    border-radius: 3px;
    padding: 0 4px;
    vertical-align: middle;
    margin-right: 4px;
    letter-spacing: 0.03em;
}

.compact-select {
    font-size: 0.82rem;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border, #ccc);
    background: var(--surface, #fff);
    color: var(--text, #222);
    height: 28px;
    cursor: pointer;
}

.field-info {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Extrait bancaire ─────────────────────────────────────── */
.bank-import-preview {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bank-import-summary {
    font-size: 0.9rem;
    color: var(--text, #222);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.bank-import-format-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--surface-raised, #f0f0f0);
    border: 1px solid var(--border, #ccc);
    border-radius: 4px;
    padding: 1px 7px;
    color: var(--text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bank-import-dup-count {
    color: var(--warning, #c07a00);
    font-size: 0.85rem;
}

.bank-import-table-actions {
    display: flex;
    gap: 0.5rem;
}

.bank-import-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
}

.bank-import-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.bank-import-table thead th {
    background: var(--surface-raised, #f6f6f6);
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-secondary, #666);
    border-bottom: 1px solid var(--border, #e0e0e0);
    white-space: nowrap;
}

.bank-import-table tbody tr {
    border-bottom: 1px solid var(--border-subtle, #f0f0f0);
}

.bank-import-table tbody tr:last-child {
    border-bottom: none;
}

.bank-import-table tbody tr:hover {
    background: var(--surface-hover, #fafafa);
}

.bank-import-row-dup {
    background: color-mix(in srgb, var(--warning, #c07a00) 6%, transparent);
}

.bank-import-table td {
    padding: 6px 10px;
    vertical-align: middle;
}

.bank-import-check-cell {
    width: 28px;
    text-align: center;
}

.bank-import-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary, #666);
    font-size: 0.82rem;
}

.bank-import-libelle {
    max-width: 260px;
    word-break: break-word;
}

.bank-import-contrepartie {
    color: var(--text-secondary, #888);
    font-size: 0.75rem;
}

.bank-import-amount {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}

.bank-import-amount.amount-positive { color: var(--income-color, #2e8b57); }
.bank-import-amount.amount-negative { color: var(--expense-color, #c0392b); }

.badge-warning {
    background: var(--warning-bg, #fff3cd);
    color: var(--warning-text, #856404);
    border: 1px solid var(--warning-border, #ffc107);
}

.bank-import-dup-badge {
    cursor: help;
    font-size: 0.7rem;
    white-space: nowrap;
}

.bank-import-confirm-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 0.25rem;
}

#bank-import-selected-count {
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}


.finance-group-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.07);
    color: var(--muted);
    font-size: 0.72rem;
    cursor: pointer;
    margin-right: 5px;
    vertical-align: middle;
    transition: transform 0.18s ease, background 0.15s;
    flex-shrink: 0;
}

.finance-group-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.14);
}

.finance-group-toggle-btn--collapsed {
    transform: rotate(-90deg);
}

.finance-transactions-row td {
    padding: 4px 6px !important;
    background: rgba(255, 248, 240, 0.9) !important;
    position: static !important;
    vertical-align: top !important;
}

.finance-tx-empty-cell {
    background: rgba(255, 248, 240, 0.9) !important;
}

.finance-tx-month-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
}

/* Expansion automatique des colonnes mois quand une ligne est ouverte */
.finance-report-table--detail-open .finance-num-cell {
    min-width: 160px;
    width: auto;
    max-width: none;
    white-space: normal;
}

.finance-tx-month-total {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--brown-soft);
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(124, 80, 48, 0.18);
}

.finance-tx-link {
    display: block;
    background: none;
    border: none;
    padding: 1px 0;
    font-size: 0.82rem;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s;
}

.finance-tx-link:hover {
    text-decoration-color: currentColor;
    color: var(--brown-soft);
}

.finance-tx-link--modal {
    font-size: 0.9rem;
    padding: 2px 0;
}

/* ── Modal transactions d'un poste ─────────────────────────────────────── */

.finance-tx-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.finance-tx-modal-panel {
    background: var(--surface);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    max-width: 96vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 320px;
}

.finance-tx-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.finance-tx-modal-head h3 {
    margin: 0;
    font-size: 1rem;
}

.finance-tx-modal-body {
    overflow: auto;
    padding: 16px 20px 20px;
    flex: 1;
}

.finance-tx-modal-grid {
    display: flex;
    gap: 0;
    min-width: max-content;
}

.finance-tx-modal-col {
    min-width: 88px;
    display: flex;
    flex-direction: column;
    padding: 0 10px 0 0;
    border-right: 1px solid var(--border);
    margin-right: 10px;
}

.finance-tx-modal-col:last-child {
    border-right: none;
    margin-right: 0;
}

.finance-tx-modal-col--empty {
    opacity: 0.35;
}

.finance-tx-modal-col-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    white-space: nowrap;
}

.finance-tx-modal-col-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.finance-tx-modal-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0 8px;
}

.finance-tx-modal-note {
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.finance-tx-modal-dash {
    color: var(--muted);
    font-size: 0.85rem;
}

.finance-tx-modal-col-total {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--brown-soft);
    padding-top: 6px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
    text-align: right;
    white-space: nowrap;
}

.finance-tx-month-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
}

.finance-visual-card {
    display: grid;
    gap: 14px;
    margin: 14px 0 0;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(124, 80, 48, 0.1);
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(248, 240, 230, 0.9));
}

.finance-visual-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.finance-visual-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.finance-visual-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.finance-visual-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.finance-visual-legend i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.finance-visual-legend i[data-tone="revenu"] {
    background: #4b9c78;
}

.finance-visual-legend i[data-tone="depense"] {
    background: #c96a3d;
}

.finance-trend-chart-wrap {
    overflow-x: auto;
}

.finance-trend-chart {
    width: 100%;
    min-width: 560px;
    height: auto;
}

.finance-trend-chart text {
    fill: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.finance-trend-line {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.finance-trend-line.revenu {
    stroke: #4b9c78;
}

.finance-trend-line.depense {
    stroke: #c96a3d;
}

.finance-mobile-month-summary {
    margin-bottom: 0;
}

.finance-mobile-month-controls {
    margin-top: 10px;
}

.finance-balance-bars {
    display: grid;
    gap: 10px;
}

.finance-balance-row {
    display: grid;
    grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.finance-balance-row.compact {
    grid-template-columns: 52px minmax(0, 1fr) auto;
}

.finance-balance-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.finance-budget-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.finance-budget-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(124, 80, 48, 0.1);
}

.finance-budget-card[data-tone="revenu"] {
    box-shadow: inset 0 0 0 1px rgba(75, 156, 120, 0.08);
}

.finance-budget-card[data-tone="depense"] {
    box-shadow: inset 0 0 0 1px rgba(201, 106, 61, 0.08);
}

.finance-budget-meters {
    display: grid;
    gap: 10px;
}

.finance-budget-meters span,
.finance-budget-meters small {
    color: var(--muted);
}

.finance-budget-meters small {
    display: block;
    margin-top: 6px;
    font-weight: 700;
}

.finance-balance-meter-fill-strong {
    opacity: 1;
    filter: saturate(1.15) brightness(0.95);
}

.finance-balance-copy span {
    color: var(--muted);
    font-size: 0.8rem;
}

.finance-balance-meter {
    position: relative;
    min-height: 14px;
    border-radius: 999px;
    background: rgba(124, 80, 48, 0.1);
    overflow: hidden;
}

.finance-balance-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(75, 156, 120, 0.88), rgba(111, 191, 154, 0.92));
}

.finance-balance-meter[data-tone="negative"] .finance-balance-meter-fill {
    background: linear-gradient(90deg, rgba(201, 106, 61, 0.88), rgba(232, 151, 103, 0.92));
}

.finance-balance-value {
    white-space: nowrap;
}

.compact-chart-bars {
    margin-top: 4px;
}

.data-cell {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.data-cell strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-value {
    font-weight: 700;
    color: var(--text);
    overflow-wrap: anywhere;
}

.location-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.inline-maps-link {
    color: var(--accent-strong);
    font-weight: 700;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}

.inline-maps-link:hover {
    color: var(--brown);
}

.linked-contact-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--panel-bg, #fdf9f5);
    border: 1px solid var(--border-soft, #e8e0d6);
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
}

.linked-contact-card strong {
    font-size: 0.95rem;
}

.linked-contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
    color: var(--text-soft, #666);
}

.linked-contact-details a {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}


.data-cell-label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brown-soft);
}

.amount-actions {
    align-items: flex-end;
    flex-direction: column;
}

.amount-value {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--text);
}

.stack-item.done,
.note-item.done {
    opacity: 0.62;
}

.data-row.is-past {
    opacity: 0.72;
}

.data-row.done .data-cell:first-child strong,
.data-row.is-past .data-cell:first-child strong {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(104, 79, 58, 0.55);
}

.stack-item button,
.note-item button {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(200, 107, 57, 0.1);
    color: var(--accent-strong);
    font-weight: 800;
    font-size: 0.8rem;
}

.action-btn {
    min-width: 30px;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(200, 107, 57, 0.08);
    color: var(--accent-strong);
    font-weight: 800;
    font-size: 0.78rem;
    line-height: 1;
}

.quick-inline-btn {
    width: auto !important;
    height: auto !important;
    min-width: 0;
    padding: 7px 10px;
    line-height: 1.2;
}

.action-btn svg {
    width: 14px;
    height: 14px;
}

.action-btn.danger {
    background: rgba(207, 116, 101, 0.12);
    color: #9c4336;
}

.item-meta {
    font-size: 0.92rem;
    line-height: 1.45;
}

.item-meta strong {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brown-soft);
}

.notes-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
}

.note-list-card {
    padding: 14px;
    display: grid;
    gap: 12px;
}

.note-list-card[data-note-type='note'] {
    background: linear-gradient(180deg, rgba(255, 249, 240, 0.96), rgba(255, 255, 255, 0.82));
}

.note-list-card[data-note-type='liste_simple'] {
    background: linear-gradient(180deg, rgba(247, 251, 246, 0.96), rgba(255, 255, 255, 0.82));
}

.note-list-card[data-note-type='checklist'] {
    background: linear-gradient(180deg, rgba(248, 244, 238, 0.96), rgba(255, 255, 255, 0.82));
}

.note-item {
    padding: 10px 12px;
}

.note-note-body {
    padding: 2px 4px;
}

.note-note-text {
    white-space: normal;
    line-height: 1.7;
    color: var(--text);
}

.note-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.note-card-side-actions {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.note-collapse-btn {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 250, 244, 0.9);
    border: 1px solid rgba(124, 80, 48, 0.12);
    color: var(--brown);
    font-size: 0.82rem;
    font-weight: 700;
}

.note-card-body {
    display: grid;
    gap: 12px;
}

.note-card-main {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.note-card-title-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.note-card-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.note-card-copy h3 {
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

.note-card-summary {
    font-size: 0.94rem;
    line-height: 1.45;
    color: var(--muted);
}

.note-card-meta-row,
.note-assignee-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.note-type-pill,
.note-meta-pill,
.note-assignee-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brown);
}

.note-assignee-chip-muted {
    color: var(--brown-soft);
    background: rgba(248, 244, 238, 0.86);
}

.note-assignee-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.member-checkbox-picker {
    gap: 8px;
}

.routine-exception-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.routine-exception-chip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 14px;
    background: rgba(255, 248, 241, 0.9);
    border: 1px solid rgba(200, 107, 57, 0.12);
}

.note-assignee-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid rgba(124, 80, 48, 0.1);
    background: rgba(255, 255, 255, 0.8);
}

.note-assignee-option input {
    margin: 0;
}

.note-item-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.note-item-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.note-item-copy strong {
    white-space: normal;
    overflow-wrap: anywhere;
}

.note-item.done .note-item-copy strong {
    text-decoration: line-through;
}

.note-item-bullet {
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--accent-strong);
    flex-shrink: 0;
}

.note-check-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
    flex-shrink: 0;
}

.note-check-toggle-input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent-strong);
    cursor: pointer;
}

.note-drag-handle {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(200, 107, 57, 0.1);
    color: var(--accent-strong);
}

.note-drag-handle svg {
    width: 16px;
    height: 16px;
}

.note-inline-editor {
    display: grid;
    gap: 8px;
}

.note-inline-textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.65;
}

.note-inline-textarea[data-save-state='pending'],
.note-inline-textarea[data-save-state='saving'] {
    border-color: rgba(200, 107, 57, 0.38);
    box-shadow: 0 0 0 3px rgba(200, 107, 57, 0.08);
}

.note-inline-textarea[data-save-state='error'] {
    border-color: rgba(156, 67, 54, 0.42);
    box-shadow: 0 0 0 3px rgba(156, 67, 54, 0.08);
}

.note-inline-status {
    font-size: 0.82rem;
    color: var(--muted);
}

.note-items[data-note-items-container] {
    display: grid;
    gap: 10px;
}

.note-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
}

.note-item .item-actions,
.note-card-top .item-actions {
    flex-shrink: 0;
}

.note-item .item-actions {
    justify-content: flex-end;
}

.note-quick-add-form {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px dashed rgba(124, 80, 48, 0.18);
    background: rgba(255, 255, 255, 0.72);
}

.note-quick-add-input {
    min-height: 40px;
}

.note-quick-add-hint {
    font-size: 0.8rem;
    color: var(--muted);
}

.note-dragging {
    opacity: 0.52;
}

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

.upload-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.upload-form input {
    min-width: 0;
}

.member-grid {
    grid-template-columns: 1fr;
}

.member-chip {
    grid-template-columns: minmax(220px, 1.1fr) minmax(150px, 0.7fr) minmax(240px, 1fr) auto;
    gap: 16px;
    padding: 14px 16px 14px 18px;
    border-left: 6px solid var(--accent);
}

.member-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: center;
}

.member-meta-grid {
    display: grid;
    gap: 4px;
}

.member-cell {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.member-cell-responsibility {
    min-width: 180px;
}

.member-cell strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-cell-label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brown-soft);
}

.member-pill {
    justify-self: start;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(200, 107, 57, 0.1);
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 800;
}

.summary-cards {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: 12px;
}

.summary-tile {
    padding: 14px;
}

.summary-tile strong {
    display: block;
    margin-top: 6px;
    font-size: 1.5rem;
}

.compact .stack-item {
    padding: 10px 12px;
}

.compact .stack-item,
.compact .member-chip {
    background: rgba(255, 255, 255, 0.76);
}

.empty-state {
    padding: 16px;
    border-radius: 16px;
    border: 1px dashed rgba(124, 80, 48, 0.22);
    background: rgba(255, 252, 248, 0.72);
    color: var(--muted);
}

.toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    max-width: 320px;
    padding: 14px 16px;
    border-radius: 18px;
    color: white;
    background: rgba(55, 36, 26, 0.94);
    box-shadow: var(--shadow);
    z-index: 40;
}

.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(55, 36, 26, 0.48);
    backdrop-filter: blur(10px);
}

.auth-overlay[hidden] {
    display: none;
}

.auth-card {
    width: min(460px, 100%);
    padding: 24px;
    border-radius: 28px;
    border: 1px solid rgba(124, 80, 48, 0.14);
    background: rgba(255, 250, 244, 0.98);
    box-shadow: var(--shadow);
    display: grid;
    gap: 14px;
}

.auth-feedback {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(138, 40, 40, 0.1);
    border: 1px solid rgba(138, 40, 40, 0.22);
    color: #8a2828;
    font-weight: 700;
    line-height: 1.45;
}

.auth-card h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 4vw, 2.2rem);
    line-height: 1.05;
}

.auth-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.auth-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.auth-password-wrap {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(124, 80, 48, 0.14);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
}

.auth-password-wrap:focus-within {
    outline: 2px solid rgba(200, 107, 57, 0.18);
    border-color: rgba(200, 107, 57, 0.38);
}

.auth-password-wrap input {
    flex: 1;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
}

.auth-password-wrap input:focus {
    outline: none;
    border: none;
}

.auth-pwd-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    background: transparent;
    color: var(--muted);
    border: none;
    padding: 0;
    transition: color 0.15s;
}

.auth-pwd-toggle:hover {
    color: var(--brown);
}

.auth-pwd-toggle svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.auth-remember-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text);
}

/* PIN quick login */
.auth-pin-section { display: grid; gap: 12px; }
.auth-pin-members { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.auth-pin-member-chip {
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.7); border: 2px solid;
    border-radius: 12px; padding: 6px 12px; cursor: pointer;
    font-size: 0.82rem; transition: transform 0.15s, box-shadow 0.15s;
}
.auth-pin-member-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.auth-pin-member-avatar {
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: 0.85rem; color: #fff;
}
.auth-pin-member-name { font-weight: 600; font-size: 0.82rem; }
.auth-pin-input-wrap { display: grid; gap: 10px; text-align: center; }
.auth-pin-label { font-weight: 600; margin: 0; }
.auth-pin-boxes { display: flex; gap: 10px; justify-content: center; }
.auth-pin-box {
    width: 52px; height: 58px; border-radius: 14px; border: 2px solid rgba(124,80,48,0.22);
    background: rgba(255,255,255,0.85); font-size: 1.5rem; text-align: center;
    font-family: var(--font-mono, monospace); letter-spacing: 0.1em; transition: border-color 0.15s;
}
.auth-pin-box:focus { border-color: rgba(200,107,57,0.55); outline: none; box-shadow: 0 0 0 3px rgba(200,107,57,0.15); }
.auth-pin-back { margin-top: 4px; font-size: 0.85rem; }

/* Google login footer */
.auth-google-login-footer { display: flex; justify-content: center; margin-top: 4px; border-top: 1px solid var(--border-color, #e0e0e0); padding-top: 12px; }
.auth-google-btn { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 0.82rem; padding: 6px 12px; }
.auth-google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Invitation result */
.auth-invite-result { padding: 12px; border-radius: 14px; background: rgba(72,122,96,0.07); border: 1px solid rgba(72,122,96,0.18); display: grid; gap: 8px; }
.auth-invite-link-row { display: flex; gap: 8px; align-items: center; }
.auth-invite-link-input { flex: 1; font-size: 0.82rem; min-width: 0; }

/* Credentials section inside account modal */
.cred-section { border: 1px solid var(--border); border-radius: var(--radius-md, 8px); overflow: hidden; margin-top: 1rem; }
.cred-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; }
.cred-row + .cred-row,
.cred-edit-wrap + .cred-row { border-top: 1px solid var(--border); }
.cred-label { font-size: 0.75rem; color: var(--text-muted); min-width: 90px; flex-shrink: 0; }
.cred-value { font-family: monospace; letter-spacing: 0.12em; flex: 1; font-size: 0.9rem; }
.cred-eye-btn { background: none; border: none; cursor: pointer; padding: 0.25rem; color: var(--text-muted); line-height: 1; flex-shrink: 0; }
.cred-eye-btn:hover { color: var(--text); }
.cred-eye-btn svg { width: 1rem; height: 1rem; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cred-action-btn { font-size: 0.78rem; padding: 0.2rem 0.55rem; flex-shrink: 0; }
.cred-edit-wrap { padding: 0.75rem; background: var(--surface-raised, #f9f9f9); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; }

.auth-remember-label input[type="checkbox"],
.auth-remember-label input[type="radio"] {
    width: auto;
    flex-shrink: 0;
}

.auth-member-mode-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.field-block-span-2 {
    grid-column: 1 / -1;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(55, 36, 26, 0.42);
    backdrop-filter: blur(8px);
}

.modal-overlay[hidden] {
    display: none;
}

.modal-card {
    width: min(760px, 100%);
    max-height: calc(100vh - 36px);
    overflow: auto;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 250, 244, 0.98);
    box-shadow: var(--shadow);
}

.modal-card[data-modal-kind="ephemeris"],
.modal-card[data-modal-kind="weather"] {
    width: min(920px, 100%);
}

.modal-card[data-modal-kind="readonly"] {
    width: min(820px, 100%);
}

.modal-settings-layout {
    display: grid;
    gap: 16px;
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.modal-card h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.5rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.field-block {
    display: grid;
    gap: 6px;
}

.field-block label {
    font-weight: 700;
    color: var(--brown);
}

.ingredient-builder {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 255, 255, 0.7);
}

.ingredient-suggestions {
    display: grid;
    gap: 8px;
}

.ingredient-suggestions-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brown-soft);
}

.ingredient-suggestions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ingredient-suggestion-btn {
    display: inline-grid;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(200, 107, 57, 0.1);
    color: var(--accent-strong);
    font-weight: 800;
    text-align: left;
}

.ingredient-suggestion-btn small {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brown-soft);
}

.ingredient-builder-add,
.ingredient-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(120px, 0.6fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.ingredient-builder-list {
    display: grid;
    gap: 10px;
}

.ingredient-builder-helper {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--muted);
}

.ingredient-row {
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 250, 244, 0.82);
}

.ingredient-name-block {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.ingredient-match-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(69, 123, 157, 0.12);
    color: #315973;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.store-group-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 255, 255, 0.72);
}

.store-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.store-group-title {
    font-size: 1rem;
}

.course-lists-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 10px;
}

.course-list-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 255, 255, 0.74);
}

.course-list-card.active {
    border-color: rgba(69, 123, 157, 0.35);
    box-shadow: 0 14px 32px rgba(69, 123, 157, 0.14);
}

.course-list-card-main {
    display: grid;
    gap: 6px;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
}

.course-list-card-main strong {
    font-family: var(--font-heading);
    font-size: 1.05rem;
}

.panel-toolbar-courses {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.courses-advanced-filters {
    grid-column: 1 / -1;
    border: 1px solid rgba(124, 80, 48, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.4);
}

.courses-advanced-filters summary {
    cursor: pointer;
    padding: 7px 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-warm-text, #7c5030);
    user-select: none;
}

.courses-advanced-filters-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    padding: 8px 10px 10px;
}

.course-store-dropzone {
    min-height: 72px;
}

.course-store-dropzone [data-course-store-items] {
    min-height: 72px;
}

.course-draggable-item {
    cursor: grab;
}

/* Simplified course item row */
.course-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 14px;
}

.course-item-name {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 600;
    font-size: 0.97rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-item-label {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.course-item-label .course-item-name {
    flex: none;
}

.course-item-qty {
    font-size: 0.88rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.course-item-qty-btn {
    font-size: 0.88rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
    background: transparent;
    border: 1px dashed transparent;
    border-radius: 6px;
    padding: 1px 6px;
    cursor: pointer;
    transition: border-color 0.15s;
    line-height: 1.4;
}

.course-item-qty-btn:hover {
    border-color: var(--border);
}

.course-item-qty-btn.course-item-qty-empty {
    opacity: 0.4;
    font-size: 0.78rem;
}

.course-item-qty-input {
    width: 72px;
    flex-shrink: 0;
    font-size: 0.88rem;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid var(--module-accent, var(--color-warm-text, #7c5030));
    background: white;
}

.courses-quick-add {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.courses-quick-add input[type="search"] {
    flex: 1 1 0;
    min-width: 0;
}

.courses-quick-add input[type="text"] {
    flex: 0 0 90px;
    width: 90px;
}

.courses-catalog-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--muted);
    padding: 4px 2px 8px;
}

.courses-catalog-hint .link-btn {
    font-size: 0.82rem;
    padding: 0;
    color: var(--accent);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
}

.course-item-meta {
    font-size: 0.82rem;
    color: var(--muted);
}

.course-item-row.done .course-item-name {
    text-decoration: line-through;
    opacity: 0.55;
}

.course-toggle-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    position: relative;
}

.course-item-row.done .course-toggle-btn {
    border-color: var(--module-accent, var(--success));
    background: var(--module-accent, var(--success));
}

/* Settings inner tabs */
.settings-inner-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.settings-inner-tabs::-webkit-scrollbar {
    display: none;
}

.settings-inner-tab {
    padding: 8px 18px;
    border: none;
    background: transparent;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: var(--radius) var(--radius) 0 0;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.settings-inner-tab:hover {
    color: var(--text);
}

.settings-inner-tab.active {
    color: var(--module-accent, var(--accent));
    border-bottom-color: var(--module-accent, var(--accent));
    font-weight: 600;
}

.catalog-filter-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    padding: 6px 2px;
}

.catalog-filter-toggle input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.course-dragging {
    opacity: 0.55;
    border-style: dashed;
}

.course-drag-grip {
    margin-left: 8px;
    letter-spacing: 0.18em;
    color: var(--muted);
    font-weight: 700;
}

.ingredient-row .action-btn,
.ingredient-builder-add .ghost-btn {
    align-self: center;
    min-height: 44px;
}

.recipe-overview-grid {
    margin-bottom: 18px;
}

.recipe-filter-actions {
    align-items: center;
}

.recipe-filter-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--muted);
}

.recipe-filter-field span {
    font-weight: 700;
    color: var(--brown-soft);
    white-space: nowrap;
}

.recipe-filter-field select {
    min-width: 200px;
}

.recipe-category-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 255, 255, 0.76);
}

.recipe-category-card.active {
    border-color: rgba(69, 123, 157, 0.28);
    box-shadow: 0 14px 30px rgba(69, 123, 157, 0.12);
}

.recipe-category-card-main {
    display: grid;
    gap: 6px;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0;
}

.recipe-category-card-main strong {
    font-family: var(--font-heading);
    font-size: 1.02rem;
}

.recipe-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.recipe-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(200, 107, 57, 0.1);
    color: var(--accent-strong);
    border: 1px solid rgba(200, 107, 57, 0.16);
    font-weight: 700;
}

.recipe-chip.static {
    padding-right: 12px;
}

.recipe-chip.muted {
    background: rgba(124, 80, 48, 0.08);
    color: var(--brown-soft);
}

.recipe-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(69, 123, 157, 0.12);
    color: #315973;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.recipe-resource-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.recipe-resource-summary a,
.recipe-resource-row a {
    color: var(--accent-strong);
    text-decoration: none;
    font-weight: 700;
}

.recipe-resource-summary a:hover,
.recipe-resource-row a:hover {
    text-decoration: underline;
}

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

.recipe-card {
    display: grid;
    grid-template-rows: 200px minmax(0, 1fr);
    min-height: 100%;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 251, 247, 0.98), rgba(249, 239, 228, 0.96));
    border: 1px solid rgba(124, 80, 48, 0.12);
    box-shadow: 0 18px 36px rgba(124, 80, 48, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recipe-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 52px rgba(124, 80, 48, 0.18);
}

.recipe-card-cover {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top left, rgba(200, 107, 57, 0.28), transparent 45%), linear-gradient(135deg, #f4cfb7, #efdcc9 50%, #f7efe5);
}

.recipe-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.recipe-card-cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(124, 80, 48, 0.68);
}

.recipe-card-cover-fallback svg {
    width: 70px;
    height: 70px;
}

.recipe-card-body {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.recipe-card-head {
    display: grid;
    gap: 10px;
}

.recipe-card-head h3 {
    margin: 8px 0 0;
    font-family: var(--font-heading);
    font-size: 1.18rem;
}

.recipe-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--muted);
    font-size: 0.88rem;
}

.recipe-card-description,
.recipe-card-section p {
    margin: 0;
    color: var(--brown-soft);
}

.recipe-card-section {
    display: grid;
    gap: 6px;
}

.recipe-card-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(124, 80, 48, 0.10);
}

.recipe-card .item-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.recipe-suggestion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.recipe-suggestion-card {
    display: grid;
    gap: 10px;
}

.recipe-suggestion-section {
    display: grid;
    gap: 12px;
}

.recipe-suggestion-section + .recipe-suggestion-section {
    margin-top: 16px;
}

.recipe-suggestion-section-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.recipe-suggestion-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.recipe-suggestion-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--muted);
    font-size: 0.9rem;
}

.recipe-match-group {
    display: grid;
    gap: 8px;
}

.recipe-web-suggestion-card {
    background: rgba(255, 250, 244, 0.86);
    border: 1px solid rgba(200, 107, 57, 0.12);
}

.recipe-web-suggestion-layout {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.recipe-web-suggestion-thumb {
    width: 92px;
    height: 92px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(200, 107, 57, 0.18), rgba(69, 123, 157, 0.12));
    border: 1px solid rgba(124, 80, 48, 0.12);
}

.recipe-web-suggestion-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.recipe-web-suggestion-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(124, 80, 48, 0.62);
}

.recipe-web-suggestion-thumb-placeholder svg {
    width: 36px;
    height: 36px;
}

.recipe-web-suggestion-content {
    min-width: 0;
}

.recipe-web-search-links {
    margin-top: 2px;
}

.recipe-import-preview {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 250, 244, 0.82);
}

.recipe-import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.recipe-import-preview img {
    width: 100%;
    max-width: 280px;
    max-height: 220px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

@media (max-width: 640px) {
    .recipe-web-suggestion-layout {
        grid-template-columns: 1fr;
    }

    .recipe-web-suggestion-thumb {
        width: 100%;
        max-width: 180px;
        height: 120px;
    }
}

.recipe-link-row,
.recipe-link-add-row {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto;
    gap: 10px;
    align-items: start;
}

.recipe-resource-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(124, 80, 48, 0.12);
    background: rgba(255, 250, 244, 0.82);
}

@media (max-width: 1180px) {
    .recipe-library-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 1040px) {
    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 35;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: rgba(247, 239, 229, 0.92);
        border-bottom: 1px solid rgba(124, 80, 48, 0.08);
        backdrop-filter: blur(16px);
    }

    .mobile-topbar .brand-lockup.compact {
        flex: 1 1 auto;
    }

    .mobile-topbar h1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.02rem;
    }

    .menu-toggle,
    .mobile-home-btn {
        width: 46px;
        height: 46px;
        padding: 0;
        background: transparent;
        color: var(--accent-strong);
        border: 1px solid transparent;
        box-shadow: none;
    }

    .page-shell {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 10px 12px 14px;
    }

    .recipe-card {
        grid-template-rows: 150px minmax(0, 1fr);
    }

    .content-shell {
        gap: 12px;
    }

    .home-board {
        padding: 18px;
    }

    .sidebar {
        position: fixed;
        top: 10px;
        left: 10px;
        bottom: 10px;
        width: min(336px, calc(100vw - 20px));
        min-height: auto;
        padding: 16px;
        border-radius: 28px;
        transform: translateX(-120%);
        transition: transform 0.22s ease;
        z-index: 50;
        overflow-y: auto;
    }

    .nav-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .nav-tab {
        min-height: 62px;
        align-items: flex-start;
        padding: 12px;
    }

    .nav-tab:hover,
    .nav-tab.active {
        transform: none;
    }

    .nav-copy {
        min-width: 0;
        align-items: flex-start;
    }

    .nav-copy strong {
        font-size: 0.92rem;
        line-height: 1.2;
        white-space: normal;
    }

    .status-card {
        padding: 14px;
    }

    .sidebar-top,
    .sidebar-bottom {
        min-width: 0;
    }

    .sidebar-bottom {
        display: grid;
        gap: 12px;
        overflow-y: auto;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 45;
        background: rgba(55, 36, 26, 0.3);
    }

    body.sidebar-open .mobile-overlay {
        display: block;
    }
}

@media (max-width: 860px) {
    .content-grid.two-columns,
    .content-grid.home-columns,
    .members-layout,
    .member-chip,
    .data-row {
        grid-template-columns: 1fr;
    }

    .home-highlight-grid,
    .focus-board {
        grid-template-columns: 1fr;
    }

    .panel-toolbar-split {
        grid-template-columns: 1fr;
    }

    .panel-toolbar-notes {
        grid-template-columns: 1fr;
    }

    .panel-toolbar input,
    .panel-toolbar select,
    .panel-toolbar textarea {
        min-height: 40px;
    }

    .member-chip {
        padding-left: 16px;
    }

    .amount-actions {
        align-items: flex-start;
    }

    .agenda-calendar-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .agenda-calendar-grid,
    .agenda-week-grid {
        min-width: 720px;
    }

    .directory-table {
        min-width: 0;
    }

    .directory-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .directory-table thead {
        display: none;
    }

    .directory-table,
    .directory-table tbody,
    .directory-table tr,
    .directory-table td {
        display: block;
        width: 100%;
    }

    .directory-table tbody {
        display: grid;
        gap: 12px;
    }

    .directory-table tr {
        padding: 14px;
        border-radius: 18px;
        border: 1px solid rgba(124, 80, 48, 0.12);
        background: rgba(255, 255, 255, 0.72);
        box-shadow: var(--shadow-soft);
    }

    .directory-table td {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 0;
        border-bottom: 0;
        align-items: start;
    }

    .directory-table td + td {
        margin-top: 10px;
    }

    .directory-table td::before {
        content: attr(data-label);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--brown-soft);
    }

    .directory-notes-cell {
        min-width: 0;
        max-width: none;
    }

    .directory-actions-cell .item-actions {
        justify-content: flex-start;
    }

    .directory-contact-line {
        align-items: flex-start;
    }

    .notes-grid {
        grid-template-columns: 1fr;
    }

    .note-member-quick-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .note-member-quick-filters::-webkit-scrollbar {
        display: none;
    }

    .note-member-chip {
        flex: 0 0 auto;
    }

    .note-card-top,
    .note-item {
        display: grid;
        grid-template-columns: 1fr;
    }

    .agenda-view-actions,
    .agenda-quick-actions,
    .agenda-filter-banner {
        width: 100%;
    }

    .planner-head-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .module-primary-toolbar .section-head-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .agenda-calendar-day {
        min-height: 180px;
    }

    .agenda-week-day {
        min-height: 220px;
    }

    .panel-card,
    .weather-card,
    .ephemeris-card,
    .metric-card,
    .shortcut-card,
    .note-list-card,
    .store-group-card {
        border-radius: 22px;
    }

    .note-card-side-actions {
        justify-items: stretch;
    }

    .note-card-side-actions .item-actions,
    .note-collapse-btn,
    .nested-inline-actions .primary-btn,
    .nested-inline-actions .ghost-btn {
        width: 100%;
    }

    .timeline-entry {
        grid-template-columns: 1fr;
    }

    .timeline-entry-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .ingredient-builder-add,
    .ingredient-row {
        grid-template-columns: 1fr;
    }

    .recipe-link-row,
    .recipe-link-add-row {
        grid-template-columns: 1fr;
    }

    /* ── Finance : responsive tablette (≤ 860px) ──────────────────────────── */
    /* Sidebar catégories passe sous les écritures */
    .finance-monthly-layout {
        grid-template-columns: 1fr;
    }
    .finance-category-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 200px;
        overflow-y: auto;
    }
    /* Tuiles résumé mensuel : 3 colonnes égales */
    .finance-monthly-summary-tiles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .finance-monthly-summary-tiles .summary-tile {
        min-width: 0;
    }
    /* Écritures : montant affiché en premier, date & affectation après */
    .data-row.data-row-finance .data-cell:nth-child(2),
    .data-row.data-row-finance .data-cell:nth-child(3) {
        order: 1;
    }
    .data-row.data-row-finance .item-actions.amount-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }
    .data-row.data-row-finance .item-actions.amount-actions > .item-actions {
        width: auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
    /* Rapport annuel : tableau scrollable (override du mode « cards ») */
    .finance-report-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid rgba(124, 80, 48, 0.12);
        background: rgba(255, 255, 255, 0.72);
        border-radius: 16px;
    }
    .directory-table.finance-report-table {
        display: table;
        min-width: 600px;
        width: max-content;
    }
    .directory-table.finance-report-table thead {
        display: table-header-group;
    }
    .directory-table.finance-report-table tbody {
        display: table-row-group;
        gap: 0;
    }
    .directory-table.finance-report-table tr {
        display: table-row;
        padding: 0;
        border: none;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }
    .directory-table.finance-report-table th,
    .directory-table.finance-report-table td {
        display: table-cell;
        width: auto;
        margin-top: 0;
    }
    .directory-table.finance-report-table td + td {
        margin-top: 0;
    }
    .directory-table.finance-report-table td::before {
        content: none;
    }
    /* Comparaison: chaque période prend au moins 260px, wrap si besoin */
    .finance-comparaison-period {
        flex: 1 1 260px;
        min-width: 260px;
    }
}

@media (max-width: 640px) {
    .mobile-topbar {
        gap: 10px;
        padding: 10px;
    }

    .menu-toggle,
    .mobile-home-btn {
        width: 42px;
        height: 42px;
    }

    #family-name-mobile {
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
    }

    .page-shell {
        gap: 10px;
        padding: 10px;
    }

    .home-board,
    .panel-card,
    .metric-card,
    .shortcut-card {
        padding: 14px;
    }

    .home-board {
        gap: 14px;
        border-radius: 22px;
    }

    .panel-card,
    .weather-card,
    .ephemeris-card,
    .metric-card,
    .shortcut-card,
    .note-list-card,
    .store-group-card {
        border-radius: 20px;
    }

    .dashboard-grid,
    .quick-access-board {
        grid-template-columns: 1fr;
    }

    .module-top-actions {
        margin-bottom: 12px;
    }

    .module-top-actions-track {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .module-top-actions-track::-webkit-scrollbar {
        display: none;
    }

    .module-action-chip {
        flex: 0 0 auto;
        min-width: 46px;
    }

    .module-action-chip[data-mobile-icon-only="true"] {
        width: 46px;
        min-width: 46px;
        padding: 0;
        justify-content: center;
    }

    .module-action-chip[data-mobile-icon-only="true"] .button-label {
        display: none;
    }

    .shortcut-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shortcut-actions .ghost-btn,
    .shortcut-actions .primary-btn {
        width: 100%;
    }

    .shortcut-actions .button-label {
        display: none;
    }

    .shortcut-actions .ghost-btn,
    .shortcut-actions .primary-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .course-list-card,
    .stack-item,
    .member-chip,
    .note-item,
    .summary-list li {
        min-height: 0;
    }

    .settings-center-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .settings-center-filters::-webkit-scrollbar {
        display: none;
    }

    .home-hero,
    .home-highlight-grid,
    .ephemeris-grid {
        grid-template-columns: 1fr;
    }

    .home-hero {
        gap: 14px;
        padding: 16px;
    }

    .home-hero-panel {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 100%);
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: 4px;
        margin: 0;
    }

    .home-hero-note,
    .focus-card,
    .weather-day {
        scroll-snap-align: start;
    }

    .home-hero-note {
        min-height: 136px;
        padding: 16px;
    }

    .focus-board {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 100%);
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: 4px;
    }

    .focus-card {
        min-height: 126px;
        padding: 16px;
    }

    .section-head h2 {
        font-size: 1.45rem;
        line-height: 1.1;
    }

    .section-head h3 {
        font-size: 0.96rem;
    }

    .panel-toolbar,
    .panel-toolbar-notes {
        gap: 8px;
    }

    .module-primary-card > .content-grid.two-columns,
    .module-secondary-card .nested-panel-card,
    .module-secondary-card .discreet-settings-body {
        gap: 12px;
    }

    .panel-toolbar input[type="search"],
    .panel-toolbar select {
        min-height: 38px;
        padding: 7px 10px;
    }

    .panel-toolbar,
    .toolbar-inline-group,
    .session-actions,
    .compact-actions,
    .inline-field {
        width: 100%;
    }

    .toolbar-inline-group,
    .session-actions,
    .compact-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .toolbar-inline-group .ghost-btn,
    .toolbar-inline-group .primary-btn,
    .session-actions .ghost-btn,
    .session-actions .primary-btn,
    .compact-actions .ghost-btn,
    .compact-actions .primary-btn,
    .inline-field select,
    .inline-field input {
        width: 100%;
    }

    .summary-cards,
    .mini-metric-grid,
    .home-compact-strip,
    .finance-balance-bars {
        grid-template-columns: 1fr;
    }

    /* Compact strip stays on 3 cols even at 640px (3×180px = 540px fits) */
    .home-compact-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .home-compact-card {
        min-height: 90px;
        padding: 10px 8px;
    }
    .home-compact-card strong { font-size: 0.95rem; }
    .home-compact-card small { font-size: 0.72rem; }

    .agenda-view-panel {
        min-width: 0;
    }

    .agenda-calendar-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-tap-highlight-color: transparent;
    }

    .planner-head-actions {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .module-primary-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .finance-balance-row,
    .finance-balance-row.compact,
    .history-section-head,
    .metric-head,
    .shortcut-head {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .finance-balance-value,
    .history-section-count {
        width: 100%;
    }

    .nav-tabs {
        grid-template-columns: 1fr;
    }

    .nav-tab {
        min-height: 58px;
    }

    .status-card,
    .finance-visual-card,
    .panel-card,
    .nested-panel-card {
        min-width: 0;
    }

    .finance-trend-chart {
        min-width: 480px;
    }

    .finance-report-table {
        min-width: 380px;
    }

    /* Navigation mobile compacte : flèches + mois actif centré */
    .finance-mobile-month-nav {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(124, 80, 48, 0.1);
    }

    /* Colonnes budget masquées sur mobile (disponibles via le panneau Budget) */
    .finance-report-table thead th:nth-child(2),
    .finance-report-table thead th:nth-child(3),
    .finance-report-table tbody td:nth-child(2),
    .finance-report-table tbody td:nth-child(3) {
        display: none;
    }

    .finance-mobile-month-summary {
        grid-template-columns: 1fr;
        margin-bottom: 0;
    }

    .finance-mobile-month-summary .summary-tile {
        padding: 12px;
        border-radius: 16px;
    }

    .finance-report-section {
        gap: 8px;
    }

    .finance-report-section h4 {
        font-size: 0.92rem;
    }

    .ephemeris-item.wide {
        grid-column: auto;
    }

    .weather-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-actions .ghost-btn {
        width: 100%;
        flex: none;
    }

    .weather-week {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, calc(50% - 6px));
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: 4px;
    }

    .weather-day {
        min-height: 108px;
        display: grid;
        align-content: start;
    }

    .metric-card,
    .shortcut-card {
        min-height: 144px;
    }

    .weather-card-head,
    .home-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-card {
        width: 100%;
        max-height: calc(100dvh - 20px);
        padding: 16px;
        border-radius: 20px;
    }

    .modal-card[data-modal-kind="ephemeris"],
    .modal-card[data-modal-kind="weather"],
    .modal-card[data-modal-kind="readonly"],
    .modal-card[data-modal-kind="form"] {
        width: 100%;
        max-height: calc(100dvh - 8px);
        padding: 14px;
        border-radius: 18px;
    }

    .modal-card[data-modal-kind="ephemeris"] .ephemeris-grid {
        grid-template-columns: 1fr;
    }

    .modal-card[data-modal-kind="ephemeris"] .ephemeris-item.wide {
        grid-column: auto;
    }

    .modal-card[data-modal-kind="weather"] .weather-week {
        grid-auto-columns: minmax(0, 82%);
    }

    .modal-card[data-modal-kind="readonly"] .field-grid,
    .modal-card[data-modal-kind="form"] .field-grid,
    .finance-budget-grid {
        grid-template-columns: 1fr;
    }

    .modal-overlay,
    .auth-overlay {
        padding: 10px;
    }

    .section-head,
    .split-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .split-head > .ghost-btn,
    .split-head > .primary-btn,
    .split-head > .section-head-actions {
        width: 100%;
    }

    .item-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .inline-template-form,
    .template-row,
    .routine-row,
    .mini-metric-grid {
        grid-template-columns: 1fr;
    }

    .prep-card-head,
    .journal-entry-head {
        flex-direction: column;
    }

    .notification-row {
        grid-template-columns: 1fr;
    }

    .section-head-actions {
        width: 100%;
    }

    .planner-toolbar,
    .planner-toolbar-cluster,
    .planner-toolbar-cluster-actions,
    .planner-toolbar-cluster-main,
    .planner-head-actions {
        width: 100%;
    }

    .planner-toolbar-cluster-actions {
        justify-content: stretch;
    }

    .toolbar-menu {
        width: 100%;
    }

    .toolbar-menu summary {
        width: 100%;
    }

    .toolbar-menu-panel {
        position: static;
        min-width: 0;
        margin-top: 8px;
    }

    .section-head-actions .primary-btn,
    .section-head-actions .ghost-btn {
        width: 100%;
    }

    .planner-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .planner-toolbar-cluster-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
    }

    .planner-display-menu,
    .planner-display-menu summary {
        width: auto;
    }

    .planner-toolbar-cluster-actions.agenda-toolbar-actions {
        width: auto;
        justify-content: flex-end;
        gap: 8px;
    }

    .agenda-toolbar-actions {
        flex-wrap: nowrap;
        overflow-x: visible;
        margin-left: auto;
    }

    .agenda-toolbar-actions .agenda-action-icon-btn {
        width: 42px;
        min-width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }

    .agenda-toolbar-actions .primary-btn,
    .agenda-toolbar-actions .ghost-btn,
    .agenda-toolbar-actions .toolbar-icon-btn {
        width: 42px;
        min-width: 42px;
        padding: 0;
    }

    .agenda-toolbar-actions .button-label {
        display: none;
    }

    .section-head-actions.agenda-toolbar-actions {
        width: auto;
    }

    .toolbar-menu.planner-display-menu .toolbar-menu-panel {
        position: absolute;
        right: 0;
        left: auto;
        top: calc(100% + 8px);
        min-width: 220px;
        margin-top: 0;
    }

    .agenda-toolbar-actions + .toolbar-menu-panel {
        right: 0;
    }

    .settings-entry-head,
    .settings-entry-actions {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .nested-inline-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .primary-btn,
    .ghost-btn {
        min-height: 44px;
    }

    .button-mobile-hidden {
        display: none;
    }

    .icon-only-mobile {
        width: 44px;
        min-width: 44px;
        padding: 0;
        aspect-ratio: 1;
    }

    .view-switch {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .directory-alpha-bar {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .directory-alpha-bar::-webkit-scrollbar {
        display: none;
    }

    .directory-letter-btn {
        min-width: 34px;
        min-height: 34px;
        padding: 6px 8px;
    }

    .planner-toggle {
        width: 100%;
        justify-content: center;
        padding: 9px 12px;
    }

    .planner-toggles {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .view-switch-btn {
        flex: 1 1 0;
        padding: 9px 10px;
        font-size: 0.86rem;
    }

    .agenda-calendar-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }

    .agenda-calendar-toolbar strong {
        flex: 1;
        text-align: center;
        font-size: 0.95rem;
    }

    .agenda-calendar-toolbar .ghost-btn {
        flex: 0 0 auto;
        width: 40px;
        min-width: 40px;
        padding: 0;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
    }

    .agenda-calendar-weekday {
        padding-bottom: 4px;
        font-size: 0.68rem;
        letter-spacing: 0.06em;
    }

    .agenda-quick-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .agenda-calendar-item {
        min-height: 68px;
        padding: 10px;
    }

    .agenda-calendar-grid {
        min-width: 480px;
        gap: 6px;
    }

    .agenda-calendar-day {
        min-height: 132px;
        padding: 9px;
        gap: 8px;
    }

    .agenda-calendar-day-head {
        gap: 6px;
        font-size: 0.9rem;
    }

    .agenda-calendar-day-head small {
        padding: 2px 6px;
        font-size: 0.72rem;
    }

    .agenda-calendar-day-body {
        gap: 6px;
    }

    .agenda-week-grid {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .agenda-week-day {
        min-height: 130px;
    }

    .agenda-calendar-item {
        min-height: 0;
        padding: 7px 8px;
        gap: 2px;
        border-radius: 12px;
    }

    .agenda-calendar-item.compact-preview {
        min-height: 46px;
        align-content: center;
        padding: 8px 9px;
        gap: 4px;
        border-color: rgba(84, 96, 106, 0.18);
        box-shadow: 0 8px 16px rgba(49, 36, 29, 0.08);
    }

    .agenda-calendar-item.event.compact-preview {
        background: rgba(255, 213, 178, 0.98);
        border-color: rgba(200, 107, 57, 0.32);
    }

    .agenda-calendar-item.task.compact-preview {
        background: rgba(185, 228, 210, 0.98);
        border-color: rgba(39, 140, 100, 0.32);
    }

    .agenda-calendar-item.menuPlan.compact-preview {
        background: rgba(170, 240, 200, 0.98);
        border-color: rgba(39, 174, 96, 0.36);
    }

    .agenda-calendar-item.birthday.compact-preview {
        background: rgba(255, 188, 178, 0.98);
        border-color: rgba(192, 57, 43, 0.36);
    }

    .agenda-calendar-item strong {
        font-size: 0.8rem;
        line-height: 1.18;
    }

    .agenda-calendar-item.compact-preview strong {
        font-size: 0.78rem;
        line-height: 1.15;
    }

    .agenda-calendar-item span,
    .agenda-calendar-empty,
    .agenda-calendar-more {
        font-size: 0.72rem;
        line-height: 1.2;
    }

    .agenda-calendar-item-kind {
        font-size: 0.7rem;
        padding: 0.16rem 0.42rem;
    }

    .agenda-calendar-item.compact-preview span {
        display: none;
    }

    .directory-table {
        min-width: 0;
    }

    .directory-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .directory-table thead {
        display: none;
    }

    .directory-table,
    .directory-table tbody,
    .directory-table tr,
    .directory-table td {
        display: block;
        width: 100%;
    }

    .directory-table tbody {
        display: grid;
        gap: 12px;
    }

    .directory-table tr {
        padding: 14px;
        border-radius: 18px;
        border: 1px solid rgba(124, 80, 48, 0.12);
        background: rgba(255, 255, 255, 0.72);
        box-shadow: var(--shadow-soft);
    }

    .directory-table td {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 0;
        border-bottom: 0;
        align-items: start;
    }

    .directory-table td + td {
        margin-top: 10px;
    }

    .directory-table td::before {
        content: attr(data-label);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--brown-soft);
    }

    .directory-notes-cell {
        min-width: 0;
        max-width: none;
    }

    .directory-actions-cell .item-actions {
        justify-content: flex-start;
    }

    .directory-contact-line {
        align-items: flex-start;
    }

    .upload-form {
        grid-template-columns: 1fr;
    }

    .upload-form .primary-btn,
    .modal-actions .primary-btn,
    .modal-actions .ghost-btn {
        width: 100%;
    }

    .auth-card {
        width: 100%;
        padding: 18px;
        border-radius: 20px;
    }

    .auth-name-row {
        grid-template-columns: 1fr;
    }

}

    .post-it-wall {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .post-it-card {
        min-height: 180px;
        padding: 1rem;
        border-radius: 1.1rem;
        box-shadow: 0 12px 30px rgba(44, 58, 74, 0.12);
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        transform: rotate(-1deg);
    }

    .post-it-card[data-tone="sun"] {
        background: linear-gradient(180deg, #fff8bf 0%, #f5e58a 100%);
    }

    .post-it-card[data-tone="sage"] {
        background: linear-gradient(180deg, #e6f0de 0%, #cfe0bf 100%);
    }

    .post-it-card[data-tone="clay"] {
        background: linear-gradient(180deg, #f7d5bf 0%, #e8bb9f 100%);
    }

    .post-it-card[data-tone="warm"] {
        background: linear-gradient(180deg, #f7e1d9 0%, #efc7ba 100%);
    }

    .post-it-card-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .post-it-card-body {
        margin: 0;
        white-space: pre-wrap;
        line-height: 1.5;
        color: #493a2b;
    }

    .indispensable-option {
        display: flex;
        gap: 0.85rem;
        align-items: flex-start;
        padding: 0.85rem 0.95rem;
        border: 1px solid rgba(84, 96, 106, 0.18);
        border-radius: 0.95rem;
        background: rgba(255, 255, 255, 0.7);
    }

    .indispensable-option.is-pending {
        background: rgba(242, 235, 218, 0.95);
    }

    .indispensable-option input {
        margin-top: 0.25rem;
    }

    .drive-config-form {
        margin-bottom: 1rem;
    }

    .module-tab-documents .module-primary-card,
    .module-tab-photos .module-primary-card {
        gap: 14px;
        background: var(--module-primary-surface);
    }

    .module-tab-documents .drive-config-form,
    .module-tab-documents .drive-inline-form,
    .module-tab-photos .drive-config-form,
    .module-tab-photos .drive-inline-form {
        padding: 0.9rem;
        border: 1px solid rgba(84, 96, 106, 0.14);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .module-tab-documents .drive-config-form input,
    .module-tab-documents .drive-inline-form input,
    .module-tab-photos .drive-config-form input,
    .module-tab-photos .drive-inline-form input {
        background: rgba(255, 255, 255, 0.96);
    }

    .photos-library-form-grid {
        align-items: end;
    }

    .compact-field {
        gap: 0.45rem;
    }

    .compact-field span {
        font-size: 0.84rem;
        font-weight: 700;
        color: #5d5147;
    }

    .drive-inline-form {
        margin-bottom: 0;
    }

    .drive-actions-grid {
        display: grid;
        gap: 0.85rem;
        margin-bottom: 1rem;
    }

    .drive-breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        align-items: center;
        margin-bottom: 1rem;
    }

    .module-tab-documents .drive-breadcrumbs,
    .module-tab-photos .drive-breadcrumbs {
        padding: 0.7rem 0.8rem;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.58);
        border: 1px solid rgba(84, 96, 106, 0.1);
    }

    .module-tab-documents #documents-drive-status,
    .module-tab-photos #photos-drive-status,
    .module-tab-photos #photos-library-warning {
        margin: 0;
        padding: 0.8rem 0.95rem;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid rgba(84, 96, 106, 0.1);
    }

    .settings-push-panel {
        grid-column: 1 / -1;
        display: grid;
        gap: 0.9rem;
        padding: 1rem;
        border: 1px solid rgba(15, 23, 42, 0.12);
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.03), rgba(11, 110, 79, 0.08));
    }

    .settings-push-head {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: flex-start;
    }

    .settings-push-status-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.55rem;
        margin-top: 0.55rem;
    }

    .settings-status-badge {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0.35rem 0.8rem;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: rgba(86, 102, 117, 0.12);
        color: #465260;
    }

    .settings-status-badge[data-state='ready'] {
        background: rgba(31, 122, 90, 0.14);
        color: #176a4c;
    }

    .settings-status-badge[data-state='pending'] {
        background: rgba(210, 133, 44, 0.16);
        color: #9b5d11;
    }

    .settings-status-badge[data-state='warning'] {
        background: rgba(179, 74, 74, 0.14);
        color: #9f2f2f;
    }

    .settings-status-badge[data-state='unsupported'] {
        background: rgba(84, 96, 106, 0.12);
        color: #51606d;
    }

    .settings-push-meta {
        font-size: 0.84rem;
        font-weight: 700;
        color: #5b6773;
    }

    .settings-push-copy {
        margin: 0.35rem 0 0;
        color: var(--muted-text, #52606d);
    }

    .settings-push-next-step {
        margin: 0.15rem 0 0;
        font-size: 0.92rem;
        color: #2e4b44;
        font-weight: 600;
    }

    .settings-push-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .settings-push-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 0.75rem;
    }

    .toggle-card {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 56px;
        padding: 0.85rem 1rem;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(15, 23, 42, 0.08);
        transition: opacity 120ms ease, background 120ms ease;
    }

    .toggle-card:has(input:disabled) {
        opacity: 0.62;
        background: rgba(248, 247, 244, 0.88);
    }

    .toggle-card input {
        width: 18px;
        height: 18px;
        margin: 0;
    }

    @media (max-width: 760px) {
        .settings-push-head {
            flex-direction: column;
        }

        .settings-push-actions {
            display: grid;
            width: 100%;
            grid-template-columns: 1fr;
        }

        .settings-push-actions .ghost-btn {
            width: 100%;
            justify-content: center;
        }

        .settings-push-panel {
            padding: 0.9rem;
        }
    }

    .breadcrumb-btn {
        border: 0;
        background: rgba(217, 230, 227, 0.8);
        color: #29434e;
        border-radius: 999px;
        padding: 0.35rem 0.8rem;
        cursor: pointer;
        font: inherit;
    }

    .breadcrumb-separator {
        color: rgba(84, 96, 106, 0.65);
    }

    .drive-document-list {
        display: grid;
        gap: 0.85rem;
    }

    .drive-document-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.95rem 1rem;
        border: 1px solid rgba(84, 96, 106, 0.16);
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.82);
    }

    .module-tab-documents .drive-document-row {
        border-radius: 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 249, 248, 0.86));
        box-shadow: 0 10px 24px rgba(54, 74, 82, 0.08);
    }

    .drive-document-main {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        min-width: 0;
    }

    .drive-document-icon {
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .drive-document-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .inline-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.6rem;
    }

    .photos-month-card {
        padding: 1rem;
        border: 1px solid rgba(84, 96, 106, 0.16);
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.78);
    }

    .module-tab-photos .photos-month-card {
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(249, 241, 233, 0.82));
        box-shadow: 0 10px 24px rgba(76, 61, 51, 0.08);
    }

    .photos-mobile-album-controls[hidden] {
        display: none !important;
    }

    .photos-mobile-album-nav {
        display: none;
    }

    .compact-head {
        margin-bottom: 0.9rem;
    }

    .drive-photo-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .drive-photo-card {
        overflow: hidden;
        border-radius: 1rem;
        border: 1px solid rgba(84, 96, 106, 0.16);
        background: rgba(255, 255, 255, 0.88);
    }

    .module-tab-photos .drive-photo-card {
        border-radius: 20px;
        box-shadow: 0 10px 24px rgba(76, 61, 51, 0.08);
    }

    .drive-photo-thumb {
        display: block;
        aspect-ratio: 4 / 3;
        background: linear-gradient(135deg, #efe6d5 0%, #d9e6e3 100%);
    }

    .drive-photo-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .drive-photo-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #53626d;
    }

    .drive-photo-placeholder svg {
        width: 2.5rem;
        height: 2.5rem;
    }

    .drive-photo-meta {
        padding: 0.85rem 0.95rem 1rem;
    }

    @media (max-width: 720px) {
        .drive-document-row {
            flex-direction: column;
            align-items: stretch;
        }

        .module-tab-documents .module-primary-card,
        .module-tab-photos .module-primary-card {
            gap: 12px;
        }

        .drive-config-form,
        .photos-library-form-grid,
        .drive-inline-form {
            grid-template-columns: 1fr;
        }

        .module-tab-documents .drive-config-form,
        .module-tab-documents .drive-inline-form,
        .module-tab-photos .drive-config-form,
        .module-tab-photos .drive-inline-form {
            padding: 0.78rem;
            border-radius: 18px;
        }

        .drive-config-form .primary-btn,
        .photos-library-form-grid .primary-btn,
        .drive-inline-form .primary-btn,
        .drive-inline-form .ghost-btn {
            width: 100%;
        }

        .module-tab-documents .section-head.split-head,
        .module-tab-photos .section-head.split-head {
            gap: 10px;
        }

        .module-tab-documents #documents-drive-status,
        .module-tab-photos #photos-drive-status,
        .module-tab-photos #photos-library-warning {
            padding: 0.72rem 0.82rem;
            border-radius: 14px;
        }

        .drive-actions-grid {
            gap: 0.7rem;
        }

        .drive-photo-grid {
            grid-template-columns: 1fr;
        }

        .photos-mobile-album-nav {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            padding: 10px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(84, 96, 106, 0.1);
            margin-bottom: 10px;
        }

        .photos-mobile-album-nav strong {
            grid-column: 1 / -1;
            order: -1;
            font-size: 0.98rem;
        }

        .photos-mobile-album-nav .ghost-btn {
            width: 100%;
        }

        .module-tab-photos .photos-month-card {
            padding: 0.9rem;
            border-radius: 18px;
        }

            .menu-plan-card {
                grid-template-columns: 1fr;
            }

        .post-it-card {
            transform: none;
        }
    }

/* ===== Drawer profil membre =============================================== */
.side-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(420px, 100vw);
    background: var(--surface);
    border-inline-start: 1px solid var(--border);
    z-index: 500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.side-drawer-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.side-drawer-title {
    flex: 1;
    min-width: 0;
}

.side-drawer-title h2 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 24px;
}

.side-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 490;
}

.member-timeline-section {
    margin-bottom: 24px;
}

.member-timeline-section-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.member-timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.member-timeline-item {
    background: var(--surface-raised);
    border-radius: 8px;
    padding: 8px 12px;
    border-left: 3px solid var(--accent);
}

.member-timeline-item.is-done {
    opacity: .55;
}

/* ===== Tags =============================================================== */
.tag-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0 4px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--tag-chip-color, var(--accent)) 12%, transparent);
    color: color-mix(in srgb, var(--tag-chip-color, var(--accent)) 80%, var(--text));
    border: 1px solid color-mix(in srgb, var(--tag-chip-color, var(--accent)) 30%, transparent);
    cursor: default;
    white-space: nowrap;
    line-height: 1.3;
}

button.tag-chip {
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

button.tag-chip:hover,
button.tag-chip-active {
    background: color-mix(in srgb, var(--tag-chip-color, var(--accent)) 25%, transparent);
    border-color: color-mix(in srgb, var(--tag-chip-color, var(--accent)) 60%, transparent);
}

.tag-chip-sm {
    padding: 2px 7px;
    font-size: .72rem;
}

.tag-chip-delete-btn {
    background: none;
    border: none;
    padding: 0;
    margin-inline-start: 2px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    opacity: .6;
}

.tag-chip-delete-btn:hover {
    opacity: 1;
}

.item-tag-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.tag-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    min-height: 24px;
}

.tag-manager {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tag-create-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.tag-create-form .field-block {
    flex: 1;
    min-width: 150px;
}

/* ===== Modal assignation tags ============================================= */
.floating-modal {
    position: fixed;
    inset-block-end: 80px;
    inset-inline-end: 20px;
    width: min(360px, calc(100vw - 32px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    z-index: 510;
    overflow: hidden;
}

.floating-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--border);
}

.floating-modal-item-name {
    margin: 0;
    padding: 8px 16px 4px;
    font-size: .85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-assign-list {
    padding: 8px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.tag-assign-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 0;
}

.tag-assign-row input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.drive-photo-card {
    position: relative;
}

.drive-photo-tag-btn {
    position: absolute;
    inset-block-end: 4px;
    inset-inline-end: 4px;
    padding: 4px 6px;
    opacity: 0;
    transition: opacity .15s;
    background: rgba(0,0,0,.45);
    color: #fff;
    border-radius: 6px;
    min-width: 0;
    min-height: 0;
}

.drive-photo-card:hover .drive-photo-tag-btn,
.drive-photo-card:focus-within .drive-photo-tag-btn {
    opacity: 1;
}

@media (hover: none) {
    .drive-photo-tag-btn {
        opacity: 0.9;
    }
}

.drive-photo-tag-btn svg {
    width: 16px;
    height: 16px;
}

/* ===== Bottom nav : personnalisation ====================================== */

.bottom-nav-pref-hint {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
}

.bottom-nav-pref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.bottom-nav-pref-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px 10px;
    border-radius: 16px;
    background: rgba(124, 80, 48, 0.06);
    border: 2px solid transparent;
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bottom-nav-pref-chip .nav-icon {
    width: 22px;
    height: 22px;
    color: var(--muted);
    transition: color 0.15s;
}

.bottom-nav-pref-chip:hover:not(.is-disabled) {
    background: rgba(124, 80, 48, 0.12);
}

.bottom-nav-pref-chip.is-selected {
    background: rgba(200, 107, 57, 0.12);
    border-color: var(--accent-strong);
    color: var(--accent-strong);
}

.bottom-nav-pref-chip.is-selected .nav-icon {
    color: var(--accent-strong);
}

.bottom-nav-pref-chip.is-disabled {
    opacity: 0.38;
    cursor: default;
}

.bottom-nav-pref-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-strong);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.bottom-nav-pref-reset {
    font-size: 0.82rem;
}

/* ===== Focus visible ====================================================== */
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ===== Reduced motion ===================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Boîte de confirmation ============================================== */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(55, 36, 26, 0.45);
    backdrop-filter: blur(8px);
}

.confirm-dialog {
    background: rgba(255, 250, 244, 0.98);
    border-radius: 24px;
    padding: 28px;
    max-width: 380px;
    width: 100%;
    box-shadow: var(--shadow);
    border: 1px solid rgba(124, 80, 48, 0.12);
}

.confirm-message {
    margin: 0 0 22px;
    line-height: 1.6;
    font-size: 0.97rem;
    color: var(--text);
}

.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ===== Barre de navigation bas (mobile) =================================== */
.bottom-nav {
    display: none;
}

body.auth-locked .bottom-nav {
    display: none !important;
}

/* ===== Responsive: toolbar intégrée onglets non-planner =================== */
@media (max-width: 640px) {
    .panel-toolbar-courses {
        grid-template-columns: 1fr;
    }

    .panel-toolbar-notes {
        grid-template-columns: 1fr;
    }

    .panel-toolbar-split.directory-toolbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 36;
        background: rgba(247, 239, 229, 0.96);
        backdrop-filter: blur(16px);
        border-top: 1px solid rgba(124, 80, 48, 0.10);
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -2px 16px rgba(55, 36, 26, 0.08);
    }

    .bottom-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 10px 4px 12px;
        background: transparent;
        color: rgba(80, 55, 38, 0.50);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1;
        border: none;
        cursor: pointer;
        transition: color 0.18s ease;
    }

    .bottom-nav-btn .nav-icon {
        width: 22px;
        height: 22px;
    }

    .bottom-nav-btn.active {
        color: var(--accent-strong);
    }

    #toast {
        bottom: calc(72px + env(safe-area-inset-bottom, 0));
    }

    .content-shell {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
    }
}

/* ── Finance monthly view ─────────────────────────────────────────────────── */

.finance-monthly-card {
    padding-bottom: 0;
}

.finance-monthly-summary-tiles {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-sm) 0;
}

.finance-monthly-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    min-height: 400px;
    border-top: 1px solid var(--border);
}

.finance-category-sidebar {
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: var(--space-sm) 0;
}

.finance-cat-section {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border-light, var(--border));
}

.finance-cat-section-head {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.finance-cat-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
    border-radius: 0;
    transition: background 0.1s;
}

.finance-cat-btn:hover {
    background: var(--surface-hover, var(--surface-alt));
}

.finance-cat-btn.active {
    background: var(--accent-light, #e8f0fe);
    color: var(--accent-strong);
    font-weight: 600;
}

.finance-cat-btn span:first-of-type {
    flex: 1;
}

.finance-cat-btn strong {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.finance-cat-btn.active strong {
    color: var(--accent-strong);
}

.finance-cat-toggle {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s;
    flex-shrink: 0;
    margin-right: 2px;
}

.finance-cat-group.open > .finance-cat-btn .finance-cat-toggle {
    transform: rotate(45deg);
}

.finance-cat-children {
    display: none;
}

.finance-cat-group.open > .finance-cat-children {
    display: block;
}

.finance-cat-child {
    padding-left: calc(var(--space-sm) + 1rem);
    font-size: 0.8rem;
}

.finance-monthly-entries-panel {
    padding: var(--space-sm);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.finance-annual-details {
    margin-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.finance-account-tile-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.finance-account-releve-btn {
    font-size: .72rem;
    padding: 2px 8px;
    align-self: center;
}

/* ── Relevé de caisse ────────────────────────────────────────────────────── */

.finance-comparaison-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
}

.finance-comparaison-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
}

.finance-comparaison-period legend {
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0 4px;
}

.releve-cash-section {
    margin-bottom: var(--space-md);
}

.releve-cash-section > strong {
    display: block;
    margin-bottom: 6px;
    font-size: .82rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.releve-cash-row {
    display: grid;
    grid-template-columns: 56px 80px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.releve-cash-denom {
    font-weight: 600;
    text-align: right;
}

.releve-cash-qty {
    text-align: center;
    width: 100%;
}

.releve-cash-subtotal {
    font-size: .85rem;
    color: var(--text-muted);
}

.releve-cash-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--space-sm);
    border-top: 2px solid var(--border);
    margin-top: var(--space-sm);
    font-size: 1.05rem;
}

/* ── Finance account tiles ───────────────────────────────────────────────── */

.finance-account-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
}

.finance-account-tile-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}

.finance-account-tile {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 0;
}

.finance-account-tile:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px var(--shadow);
}

.finance-account-tile.selected {
    border-color: var(--accent);
    background: var(--accent-tint, var(--surface-raised));
    box-shadow: 0 0 0 2px var(--accent);
}

.finance-account-tile-type {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-account-tile-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-account-tile-balance {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-account-tile-balance.negative {
    color: var(--color-danger, #c0392b);
}

.finance-account-tile-all .finance-account-tile-name {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 400;
    font-style: italic;
    margin: auto 0;
}

.finance-account-tile-actions {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.finance-account-iban-btn {
    font-size: .65rem;
    padding: 2px 6px;
    color: var(--muted);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 13rem;
}

.finance-account-iban-btn:hover {
    color: var(--color-primary, #457b9d);
}

.finance-account-releve-btn {
    font-size: .68rem;
    padding: 2px 6px;
    align-self: center;
}

.finance-account-tile-total {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 10px 4px;
    gap: 2px;
    border-bottom: 1px solid var(--border, #e0e0e0);
    margin-bottom: 4px;
}

.finance-account-tile-total-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.finance-account-tile-total-balance {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

.finance-account-tile-total-balance.negative {
    color: var(--color-danger, #c0392b);
}

/* ── Finance suivis ──────────────────────────────────────────────────────── */

.finance-suivi-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.finance-suivi-header-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.finance-suivi-header-main strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-suivi-meta {
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finance-suivi-header-side {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.finance-suivi-last-chip {
    font-size: 0.8rem;
    color: var(--muted);
    white-space: nowrap;
}

.finance-suivi-item > summary {
    padding: var(--space-sm);
    cursor: pointer;
    list-style: none;
}

.finance-suivi-item > summary::after {
    content: '›';
    font-size: 1.1rem;
    color: var(--muted);
    margin-left: var(--space-xs);
    transition: transform 0.15s ease;
    display: inline-block;
    flex-shrink: 0;
}

.finance-suivi-item[open] > summary::after {
    transform: rotate(90deg);
}

.finance-suivi-body {
    padding: var(--space-sm);
    border-top: 1px solid var(--border);
}

.finance-suivi-entrees {
    margin-top: var(--space-xs);
    overflow-x: auto;
    /* Scrollbar visible et stylée */
    scrollbar-width: thin;
    scrollbar-color: var(--muted, #999) transparent;
}
.finance-suivi-entrees::-webkit-scrollbar {
    height: 6px;
}
.finance-suivi-entrees::-webkit-scrollbar-track {
    background: transparent;
}
.finance-suivi-entrees::-webkit-scrollbar-thumb {
    background: var(--muted, #999);
    border-radius: 3px;
}

.suivi-year-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    flex: 1;
}
.suivi-year-filter-bar .chip {
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.15s, background 0.15s;
    user-select: none;
}
.suivi-year-filter-bar .chip.active {
    opacity: 1;
}

.finance-suivi-table {
    width: 100%;
}

.finance-suivi-table td {
    vertical-align: middle;
    white-space: nowrap;
}

.finance-suivi-valeur {
    font-weight: 600;
    text-align: right;
}

.finance-suivi-valeur--negative {
    color: var(--color-danger, #c0392b);
}

.finance-suivi-total {
    border-left: 1px solid var(--border);
}

.finance-suivi-tiers {
    color: var(--muted);
    font-size: 0.85rem;
}

.finance-suivi-empty {
    color: var(--muted);
    text-align: center;
}

.finance-suivi-notes {
    color: var(--muted);
    font-size: 0.85rem;
    white-space: normal;
}

.finance-suivi-actions {
    text-align: right;
}

/* ── Responsive finance monthly ─────────────────────────────────────────── */

/* Budget dépassé */
.finance-cat-btn.over-budget {
    color: var(--color-danger, #c0392b);
}

.finance-cat-btn.over-budget strong {
    color: var(--color-danger, #c0392b);
    font-weight: 700;
}

.finance-cat-btn.over-budget small {
    opacity: 0.7;
}

/* Sparkline suivi de charge */
.finance-sparkline {
    width: 80px;
    height: 24px;
    color: var(--color-accent, #6b7a8d);
    flex-shrink: 0;
}

/* Post-it actions */
.post-it-card-actions {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.post-it-card-actions .ghost-btn {
    font-size: 0.78rem;
    padding: 2px 8px;
}

/* Toast undo button */
.toast-undo-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
}

.toast-undo-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 640px) {
    /* Finance header: boutons icônes restent compacts en rangée, alignés à droite */
    .module-tab-finances .split-head > .section-head-actions {
        width: auto;
        margin-left: auto;
        flex-wrap: nowrap;
        align-self: flex-end;
    }

    /* Finance monthly card toolbar: empiler mois + sélecteur de vue */
    .finance-monthly-card .module-primary-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    /* Sélecteur de vue pleine largeur quand empilé */
    #finance-view-selector,
    .finance-view-selector {
        width: 100%;
        display: block;
    }

    .finance-month-toolbar {
        width: 100%;
    }

    .finance-month-toolbar select,
    #finance-account-filter {
        width: 100%;
    }

    /* Tuiles résumé mensuel: égales en largeur */
    .finance-monthly-summary-tiles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .finance-monthly-summary-tiles .summary-tile {
        min-width: 0;
    }

    /* Table suivi de charges: défilement horizontal */
    .finance-suivi-entrees {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .finance-suivi-table {
        min-width: 280px;
    }

    /* Panneau catégories: encore plus compact sur petits mobiles */
    .finance-category-sidebar {
        max-height: 140px;
    }

    /* Boutons catégorie: taille cible tactile minimum */
    .finance-cat-btn {
        min-height: 40px;
    }

    /* Tuiles résumé mensuel: texte compact */
    .finance-monthly-summary-tiles .summary-tile {
        padding: 10px 8px;
    }
    .finance-monthly-summary-tiles .summary-tile span {
        font-size: 0.7rem;
    }
    .finance-monthly-summary-tiles .summary-tile strong {
        font-size: 1.1rem;
        margin-top: 3px;
    }

    /* Suivis de charges: boutons compacts, pas pleine largeur */
    .finance-suivi-body .section-head-actions {
        width: auto;
        flex-wrap: wrap;
    }

    /* Comparaison de périodes: chaque période prend toute la largeur */
    .finance-comparaison-toolbar {
        flex-direction: column;
    }
    .finance-comparaison-period {
        width: 100%;
        box-sizing: border-box;
    }

    /* Rapport annuel: wrapper scrollable pleine largeur */
    .finance-report-table-wrap {
        border-radius: 12px;
    }
}
/* ===== Budget cadeaux ===================================================== */
.finance-budget-cadeaux-table {
    min-width: unset;
    width: 100%;
}

.budget-cadeaux-mois {
    white-space: nowrap;
    width: 120px;
}

.budget-cadeaux-nb,
.budget-cadeaux-montant {
    white-space: nowrap;
    width: 80px;
    text-align: right !important;
}

.budget-cadeaux-personnes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-block: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 16px;
    font-size: .78rem;
    font-weight: 500;
    background: rgba(124, 80, 48, 0.10);
    color: var(--brown-strong, #5c3319);
    border: 1px solid rgba(124, 80, 48, 0.2);
    white-space: nowrap;
}

.chip-delete {
    background: none;
    border: none;
    padding: 0;
    margin-inline-start: 2px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    opacity: .5;
    transition: opacity .15s;
}

.chip-delete:hover {
    opacity: 1;
}

.budget-cadeau-chip {
    cursor: pointer;
    transition: background .15s;
}
.budget-cadeau-chip:hover {
    background: rgba(124, 80, 48, 0.18);
}
.chip-amount {
    font-weight: 400;
    opacity: .65;
    margin-inline-start: 4px;
}

.budget-cadeaux-total td,
.budget-cadeaux-avg td {
    border-top: 2px solid rgba(124, 80, 48, 0.25);
    padding-block: 10px;
}

.budget-cadeaux-avg td {
    font-size: .85rem;
    color: var(--brown-soft, #8b6553);
    border-top: 1px dashed rgba(124, 80, 48, 0.15);
}

.text-right {
    text-align: right !important;
}