/* ZONZI — styles custom (sans build npm/Vite)
   Palette : navy #181541, orange #EA580C, periwinkle #BABCCF, neutres clairs */

:root {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    --color-orange: #ea580c;
    --color-orange-hover: #c2410c;
    --color-ai: #ea580c;
    --color-indigo: #181541;
    --color-indigo-deep: #12102f;
    --color-indigo-active: #2a2660;
    --color-lavender: #eef0f8;
    --color-lavender-hover: #e2e5f0;
    --color-on-dark-muted: #babccf;
    --color-page: #f8f9fa;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-border-soft: #eceef1;
    --color-ink: #1f2937;
    --color-muted: #6b7280;
    --color-success: #10b981;
    --color-warning: #ea580c;
    --color-online: #10b981;

    /* aliases legacy */
    --color-accent: var(--color-ai);
    --color-accent-2: var(--color-indigo);
    --color-accent-3: var(--color-warning);
    --color-panel: var(--color-surface);
    --color-panel-border: var(--color-border);

    --scrollbar-size: 6px;
    --scrollbar-thumb: rgba(31, 41, 55, 0.22);
    --scrollbar-thumb-hover: rgba(31, 41, 55, 0.38);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-page);
    color: var(--color-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

.auth-guest {
    isolation: isolate;
}

.auth-guest__backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--color-indigo-deep);
    background-image: none;
}

.auth-guest--solid .auth-guest__backdrop {
    background-color: var(--color-indigo-deep);
    background-image: none;
}

.auth-guest__content {
    z-index: 1;
}

.auth-guest .glass-panel {
    background-color: rgba(255, 255, 255, 0.94);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 24px 60px rgba(24, 21, 65, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.auth-guest .glass-card {
    background-color: rgba(248, 249, 250, 0.88);
}


.glass-panel {
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    box-shadow: 0 10px 30px rgba(31, 41, 55, 0.06);
}

.glass-card {
    border-radius: 0.75rem;
    border: 1px solid var(--color-border-soft);
    background-color: #fafbfc;
}

/* Equal-height cards in grids: stretch + truncate variable text + pin footer */
.entity-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.entity-card__title,
.entity-card__label,
.entity-card__meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Events list: always reserve exactly 2 title lines */
.entity-card__title--2lines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.35;
    min-height: calc(1.35em * 2);
}

.entity-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.5em;
}

.entity-card__actions {
    margin-top: auto;
}

.neon-border {
    box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.28), 0 0 18px rgba(234, 88, 12, 0.08);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    border: none;
    background: var(--color-ai);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    transition: background-color 0.15s ease, filter 0.15s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--color-orange-hover);
}

.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.35);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-live-force:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-indigo);
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: var(--color-lavender);
}

.btn-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(61, 58, 110, 0.18);
}

.btn-live-force {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    border: none;
    background: #e11d48;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    transition: background-color 0.15s ease, filter 0.15s ease;
    cursor: pointer;
}

.btn-live-force:hover {
    background: #be123c;
}

.btn-live-force:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.35);
}

.live-force-hint {
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.22);
    padding: 0.12rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.input-field {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--color-ink);
}

.input-field::placeholder {
    color: #9ca3af;
}

.input-field:focus {
    border-color: rgba(61, 58, 110, 0.45);
    outline: none;
    box-shadow: 0 0 0 3px rgba(61, 58, 110, 0.12);
}

.password-field {
    position: relative;
}

.password-field__input {
    padding-right: 2.75rem;
}

.password-field__toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.password-field__toggle:hover {
    color: var(--color-indigo);
    background: var(--color-lavender);
}

.password-field__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(61, 58, 110, 0.18);
}

.password-field__icon {
    display: inline-flex;
}

/* Shell : scroll ind?pendant sidebar / contenu */
body.app-shell {
    height: 100dvh;
    overflow: hidden;
}

.app-shell__frame {
    display: flex;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.app-shell__sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    width: 16rem;
    transition: width 0.2s ease;
}

body.sidebar-is-collapsed .app-shell__sidebar,
.sidebar.sidebar--collapsed {
    width: 4.75rem;
}

.app-shell__nav {
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.app-shell__nav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.28);
}

.app-shell__nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.45);
}

.app-shell__column {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.app-shell__column>header {
    flex-shrink: 0;
}

.app-shell__main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.sidebar {
    background-color: var(--color-indigo);
}

.sidebar-brand-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.5rem 1.25rem;
}

.sidebar--collapsed .sidebar-brand-wrap {
    justify-content: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.sidebar-brand {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    min-width: 0;
}

.sidebar-brand__short {
    display: none;
    text-align: center;
}

.sidebar--collapsed .sidebar-brand__full {
    display: none;
}

.sidebar--collapsed .sidebar-brand__short {
    display: block;
}

.sidebar-brand-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-left: auto;
    flex-shrink: 0;
}

.sidebar-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 0.55rem;
    background: var(--color-orange);
    color: #1f2937;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sidebar-home-btn:hover {
    background: var(--color-orange-hover);
    color: #fff;
}

.sidebar-home-btn svg {
    width: 1.05rem;
    height: 1.05rem;
}

.sidebar--collapsed .sidebar-brand-actions {
    display: none;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar--collapsed .nav-link {
    justify-content: center;
    gap: 0;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.sidebar--collapsed .nav-label {
    display: none;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.nav-link-active {
    background-color: var(--color-indigo-active);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--color-orange);
}

.nav-link .nav-icon {
    display: flex;
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.9;
}

.nav-link-active .nav-icon {
    opacity: 1;
}

.sidebar-ai {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    transition: background-color 0.15s ease;
}

.sidebar--collapsed .sidebar-ai {
    justify-content: center;
    gap: 0;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.sidebar-ai:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.sidebar-ai-active {
    background-color: var(--color-indigo-active);
}

.sidebar-ai-badge {
    display: inline-flex;
    height: 1.75rem;
    width: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--color-ai);
    font-size: 0.625rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

.sidebar-toggle {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #fff;
    color: var(--color-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sidebar-toggle:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: var(--color-indigo);
}

.sidebar-toggle__icon {
    display: none;
    width: 1.15rem;
    height: 1.15rem;
}

.sidebar-toggle__icon svg {
    width: 100%;
    height: 100%;
}

.sidebar-toggle[aria-expanded="false"] .sidebar-toggle__icon--open,
.sidebar-toggle[aria-expanded="true"] .sidebar-toggle__icon--close {
    display: block;
}

.header-icon-btn {
    position: relative;
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--color-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.header-icon-btn:hover,
.header-icon-btn--active {
    background: #f1f5f9;
    color: var(--color-indigo);
}

.header-icon-btn--live-on {
    color: #e11d48;
    animation: header-live-blink 1.1s ease-in-out infinite;
}

.header-icon-btn--live-on:hover,
.header-icon-btn--live-on.header-icon-btn--active {
    background: #fff1f2;
    color: #be123c;
}

.header-live-dot {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    height: 0.45rem;
    width: 0.45rem;
    border-radius: 9999px;
    background: #e11d48;
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.55);
    animation: header-live-dot-pulse 1.1s ease-in-out infinite;
}

@keyframes header-live-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

@keyframes header-live-dot-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.55);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 4px rgba(225, 29, 72, 0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .header-icon-btn--live-on,
    .header-live-dot {
        animation: none;
        opacity: 1;
    }
}

.role-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: var(--color-lavender);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-indigo);
}

.kpi-icon {
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
}

.kpi-progress {
    height: 0.375rem;
    overflow: hidden;
    border-radius: 9999px;
    background: #e5e7eb;
}

.kpi-progress>span {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--color-success);
}

.step-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
}

.step-row-urgent {
    background: #fff7ed;
}

.step-row-upcoming {
    background: #f3f0ff;
}

.step-row-planned {
    background: #ecfdf5;
}

.step-dot {
    height: 0.5rem;
    width: 0.5rem;
    flex-shrink: 0;
    border-radius: 9999px;
}

.ai-rec {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.ai-rec-info {
    background: #eef2ff;
    color: #3730a3;
}

.ai-rec-warning {
    background: #fffbeb;
    color: #92400e;
}

.ai-rec-success {
    background: #ecfdf5;
    color: #065f46;
}

.app-header {
    position: relative;
    overflow: visible;
}

.app-header__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.app-header__bar {
    position: relative;
    z-index: 1;
}

.header-avatar {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--color-lavender);
    color: var(--color-indigo);
    font-size: 0.75rem;
    font-weight: 700;
}

.header-avatar--lg {
    height: 3.5rem;
    width: 3.5rem;
    font-size: 1rem;
}

.header-user {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.15rem 0.35rem 0.15rem 0.15rem;
    border-radius: 9999px;
    color: var(--color-muted);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.header-user:hover,
.header-user[aria-expanded="true"] {
    background: #f8fafc;
    color: var(--color-indigo);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-lavender);
}

.header-user__chevron {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.header-user__chevron svg {
    width: 100%;
    height: 100%;
}

.header-user[aria-expanded="true"] .header-user__chevron {
    transform: rotate(180deg);
}

.user-menu-wrap {
    position: relative;
}

.user-menu {
    position: fixed;
    z-index: 70;
    min-width: 15.5rem;
    max-width: calc(100vw - 1.5rem);
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    padding: 0.35rem;
    animation: user-menu-in 0.16s ease-out;
}

.user-menu[hidden] {
    display: none !important;
}

.user-menu__head {
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0.25rem;
    padding: 0.65rem 0.75rem 0.75rem;
}

.user-menu__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink);
}

.user-menu__email {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    word-break: break-all;
}

.user-menu__role {
    margin-top: 0.35rem;
    display: inline-flex;
    border-radius: 9999px;
    background: var(--color-lavender);
    color: var(--color-indigo);
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
}

.user-menu__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.65rem;
    border: none;
    border-radius: 0.55rem;
    background: transparent;
    padding: 0.55rem 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.user-menu__item:hover,
.user-menu__item:focus-visible {
    background: #f8fafc;
    color: var(--color-indigo);
    outline: none;
}

.user-menu__item--active {
    background: var(--color-lavender);
    color: var(--color-indigo);
}

.user-menu__item--danger {
    color: #b91c1c;
}

.user-menu__item--danger:hover,
.user-menu__item--danger:focus-visible {
    background: #fef2f2;
    color: #991b1b;
}

.user-menu__icon {
    display: inline-flex;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    opacity: 0.85;
}

.user-menu__icon svg {
    width: 100%;
    height: 100%;
}

.user-menu__sep {
    height: 1px;
    margin: 0.25rem 0.4rem;
    background: #f1f5f9;
}

.user-menu__logout {
    margin: 0;
}

@keyframes user-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* Contextual actions menu (detail pages + cards) */
.actions-menu-wrap {
    position: relative;
    display: inline-flex;
}

.actions-menu__toggle {
    gap: 0.4rem;
}

.actions-menu__toggle--compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.actions-menu__toggle--compact:hover,
.actions-menu__toggle--compact:focus-visible,
.actions-menu-wrap.is-open .actions-menu__toggle--compact {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: var(--color-indigo);
    outline: none;
}

.actions-menu__dots {
    display: inline-flex;
    width: 1.15rem;
    height: 1.15rem;
}

.actions-menu__dots svg {
    width: 100%;
    height: 100%;
}

.actions-menu__chevron {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.actions-menu__chevron svg {
    width: 100%;
    height: 100%;
}

.actions-menu-wrap.is-open .actions-menu__chevron {
    transform: rotate(180deg);
}

.context-filter-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
    padding: 0.7rem 1rem;
    border: 1px solid #e0e7ff;
    border-radius: 0.75rem;
    background: #f5f3ff;
}

.context-filter-banner__text {
    margin: 0;
    font-size: 0.875rem;
    color: #475569;
}

.context-filter-banner__text strong {
    color: #312e81;
    font-weight: 600;
}

.context-filter-banner__clear {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-indigo);
    text-decoration: none;
}

.context-filter-banner__clear:hover {
    text-decoration: underline;
}

.actions-menu {
    position: fixed;
    z-index: 65;
    min-width: 14.5rem;
    max-width: calc(100vw - 1.5rem);
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    padding: 0.35rem;
    animation: user-menu-in 0.16s ease-out;
}

.actions-menu[hidden] {
    display: none !important;
}

.actions-menu__group-label {
    padding: 0.45rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.actions-menu__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.65rem;
    border: none;
    border-radius: 0.55rem;
    background: transparent;
    padding: 0.55rem 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.actions-menu__item:hover,
.actions-menu__item:focus-visible {
    background: #f8fafc;
    color: var(--color-indigo);
    outline: none;
}

.actions-menu__item--primary {
    color: var(--color-ai);
    font-weight: 600;
}

.actions-menu__item--primary:hover,
.actions-menu__item--primary:focus-visible {
    background: #fff7ed;
    color: var(--color-orange-hover);
}

.actions-menu__item--danger {
    color: #b91c1c;
}

.actions-menu__item--danger:hover,
.actions-menu__item--danger:focus-visible {
    background: #fef2f2;
    color: #991b1b;
}

.actions-menu__icon {
    display: inline-flex;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    opacity: 0.85;
}

.actions-menu__icon svg {
    width: 100%;
    height: 100%;
}

.actions-menu__sep {
    height: 1px;
    margin: 0.25rem 0.4rem;
    background: #f1f5f9;
}

.actions-menu__form {
    margin: 0;
}

.notif-bell {
    position: relative;
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.notif-bell:hover,
.notif-bell[aria-expanded="true"] {
    background: #f3f4f6;
    color: var(--color-indigo);
}

.notif-count {
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    display: inline-flex;
    min-width: 1.125rem;
    height: 1.125rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #ef4444;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: #fff;
}

.notif-bell-wrap {
    position: relative;
}

/* -------------------------------------------------------------------------- */
/* Notifications panel (top-right)                                             */
/* -------------------------------------------------------------------------- */

.notif-panel {
    position: fixed;
    inset: 0;
    z-index: 70;
}

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

.notif-panel__backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}

.notif-panel__dialog {
    position: absolute;
    top: 4.25rem;
    right: 1rem;
    z-index: 1;
    display: flex;
    width: min(22.5rem, calc(100vw - 1.5rem));
    max-height: min(32rem, calc(100vh - 5.5rem));
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid var(--color-border-soft);
    background: #f3f4f6;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    animation: notif-panel-in 0.18s ease-out;
}

.notif-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.1rem 0.75rem;
}

.notif-panel__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-ink);
}

.notif-panel__close {
    display: inline-flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9999px;
    background: #e5e7eb;
    color: #4b5563;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.notif-panel__close:hover {
    background: #d1d5db;
    color: var(--color-ink);
}

.notif-panel__close svg {
    width: 0.95rem;
    height: 0.95rem;
}

.notif-panel__list {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.65rem;
    overflow-y: auto;
    padding: 0 1rem 0.75rem;
}

.notif-panel__empty {
    padding: 1.5rem 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.notif-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-top: 1px solid #e5e7eb;
    padding: 0.75rem 1.1rem 1rem;
}

.notif-panel__link {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-indigo);
    transition: color 0.15s ease;
}

.notif-panel__link:hover {
    color: var(--color-indigo-deep);
}

.notif-card {
    display: flex;
    gap: 0.75rem;
    border-radius: 0.9rem;
    padding: 0.85rem 0.9rem;
}

.notif-card--warning {
    background: #fff3e8;
}

.notif-card--success {
    background: #e8f8ef;
}

.notif-card--info {
    background: #eceaf8;
}

.notif-card--read {
    opacity: 0.72;
}

.notif-card__icon {
    display: inline-flex;
    height: 1.75rem;
    width: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.45rem;
}

.notif-card--warning .notif-card__icon {
    color: var(--color-warning);
}

.notif-card--success .notif-card__icon {
    border-radius: 0.4rem;
    background: #22c55e;
    color: #fff;
}

.notif-card--info .notif-card__icon {
    color: var(--color-indigo);
}

.notif-card__icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.notif-card__body {
    min-width: 0;
    flex: 1;
}

.notif-card__title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-card__meta {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-card__time {
    color: #9ca3af;
}

.notif-card__action {
    margin-top: 0.45rem;
}

.notif-card__mark {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-indigo);
    transition: color 0.15s ease;
}

.notif-card__mark:hover {
    color: var(--color-indigo-deep);
    text-decoration: underline;
}

@keyframes notif-panel-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

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

@media (min-width: 640px) {
    .notif-panel__dialog {
        right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .notif-panel__dialog {
        right: 2rem;
    }
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.table-shell {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.table-shell table {
    width: 100%;
    min-width: 36rem;
    text-align: left;
    font-size: 0.875rem;
}

.table-shell thead {
    background-color: #f3f4f6;
    color: #4b5563;
}

.table-shell th,
.table-shell td {
    padding: 0.75rem 1rem;
}

.table-shell tbody tr {
    border-top: 1px solid var(--color-border-soft);
}

.table-shell tbody tr:hover {
    background-color: #f9fafb;
}

.budget-category-row {
    display: grid;
    grid-template-columns: 7.5rem 1fr 5.5rem;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.budget-category-row:hover {
    background-color: #f8f9fb;
}

.budget-category-row.is-active {
    border-color: color-mix(in srgb, var(--color-indigo) 28%, transparent);
    background-color: color-mix(in srgb, var(--color-lavender) 70%, white);
}

.budget-items-panel {
    border-top: 1px solid var(--color-border-soft);
    padding-top: 1.25rem;
    scroll-margin-top: 1.5rem;
}

.budget-items-panel[hidden],
[data-budget-item-category][hidden] {
    display: none !important;
}

@media (min-width: 640px) {
    .budget-category-row {
        grid-template-columns: 9rem 1fr 6.5rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Confirmation modal                                                          */
/* -------------------------------------------------------------------------- */

body.confirm-modal-open {
    overflow: hidden;
}

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
}

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

.confirm-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(31, 41, 55, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.confirm-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(26rem, calc(100vw - 1.5rem));
    max-height: min(90dvh, 100%);
    overflow-y: auto;
    padding: 1.5rem;
    text-align: center;
    animation: confirm-modal-in 0.18s ease-out;
}

.confirm-modal__dialog--form {
    text-align: left;
    max-width: 28rem;
}

.confirm-modal__dialog--form .confirm-modal__actions {
    justify-content: flex-end;
    margin-top: 0;
}

.confirm-modal__icon {
    margin: 0 auto 1rem;
    display: flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--color-lavender);
    color: var(--color-indigo);
}

.confirm-modal__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.confirm-modal__icon--danger {
    background: rgba(244, 63, 94, 0.12);
    color: #e11d48;
}

.confirm-modal__icon--warning {
    background: rgba(234, 88, 12, 0.14);
    color: var(--color-orange-hover);
}

.confirm-modal__icon--info {
    background: var(--color-lavender);
    color: var(--color-indigo);
}

.confirm-modal__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-ink);
}

.confirm-modal__message {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-muted);
    white-space: pre-wrap;
    word-break: break-word;
}

.confirm-modal__actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.confirm-modal__actions>* {
    min-width: 7.5rem;
}

.btn-confirm-danger {
    background: #e11d48 !important;
    color: #fff !important;
}

.btn-confirm-warning {
    background: var(--color-orange-hover) !important;
    color: #fff !important;
}

@keyframes confirm-modal-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

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

/* -------------------------------------------------------------------------- */
/* Toasts (top-right)                                                          */
/* -------------------------------------------------------------------------- */

.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 90;
    display: flex;
    width: min(22rem, calc(100vw - 2rem));
    flex-direction: column;
    gap: 0.65rem;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 0.9rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 0.85rem 0.95rem;
    box-shadow: 0 12px 32px rgba(31, 41, 55, 0.12);
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast--visible {
    opacity: 1;
    transform: translateX(0);
}

.toast--leaving {
    opacity: 0;
    transform: translateX(12px);
}

.toast__message {
    flex: 1;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-ink);
}

.toast__dismiss {
    flex-shrink: 0;
    display: inline-flex;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    color: var(--color-muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.toast__dismiss:hover {
    background: #f3f4f6;
    color: var(--color-ink);
}

.toast--success {
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: 0 12px 32px rgba(31, 41, 55, 0.1), inset 3px 0 0 #22c55e;
}

.toast--success .toast__message {
    color: #166534;
}

.toast--error {
    border-color: rgba(244, 63, 94, 0.35);
    box-shadow: 0 12px 32px rgba(31, 41, 55, 0.1), inset 3px 0 0 #f43f5e;
}

.toast--error .toast__message {
    color: #9f1239;
}

.toast--warning {
    border-color: rgba(234, 88, 12, 0.4);
    box-shadow: 0 12px 32px rgba(31, 41, 55, 0.1), inset 3px 0 0 var(--color-warning);
}

.toast--warning .toast__message {
    color: #92400e;
}

.toast--info {
    border-color: rgba(61, 58, 110, 0.25);
    box-shadow: 0 12px 32px rgba(31, 41, 55, 0.1), inset 3px 0 0 var(--color-indigo);
}

.toast--info .toast__message {
    color: var(--color-indigo);
}

/* -------------------------------------------------------------------------- */
/* Assistant IA ? chat simulation                                              */
/* -------------------------------------------------------------------------- */

/* Chat page: footer pinned to bottom, messages scroll */
body.page-chat {
    height: 100dvh;
    overflow: hidden;
}

body.page-chat .page-chat__shell {
    display: flex;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

body.page-chat .page-chat__column {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100dvh;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

body.page-chat .page-chat__column>header {
    flex-shrink: 0;
}

body.page-chat .page-chat__main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

body.page-chat .ai-chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid var(--color-border);
    background: #f3f4f6;
    box-shadow: 0 12px 40px rgba(31, 41, 55, 0.08);
}

.ai-chat {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid var(--color-border);
    background: #f3f4f6;
    box-shadow: 0 12px 40px rgba(31, 41, 55, 0.08);
}

.ai-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    padding: 0.9rem 1.1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-soft);
}

.ai-chat__header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ai-chat__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
}

.ai-chat__back:hover {
    background: #f3f4f6;
    color: var(--color-indigo);
}

.ai-chat__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: var(--color-indigo);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ai-chat__avatar--sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.65rem;
}

.ai-chat__title-wrap {
    min-width: 0;
}

.ai-chat__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.ai-chat__online {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--color-online);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.ai-chat__expert {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    border: none;
    border-radius: 0.75rem;
    background: var(--color-orange);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    text-decoration: none;
}

.ai-chat__expert:hover {
    background: var(--color-orange-hover);
    color: #fff;
}

.ai-chat__messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-chat__empty {
    margin: auto;
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.ai-chat__empty-hint {
    margin-top: 0.35rem;
    font-size: 0.78rem;
}

.ai-chat__row {
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
    max-width: min(92%, 36rem);
}

.ai-chat__row--ai {
    align-self: flex-start;
}

.ai-chat__row--user {
    align-self: flex-end;
}

.ai-chat__bubble {
    margin: 0;
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-chat__bubble--ai {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-ink);
    border-radius: 1.15rem 1.15rem 1.15rem 0.35rem;
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.04);
}

.ai-chat__bubble--user {
    background: var(--color-indigo);
    color: #fff;
    border-radius: 1.15rem 1.15rem 0.35rem 1.15rem;
}

.ai-chat__bubble strong {
    font-weight: 650;
}

.ai-chat__typing {
    display: none;
    flex-shrink: 0;
    align-self: stretch;
    align-items: flex-end;
    gap: 0.55rem;
    padding: 0 1.1rem 0.35rem;
}

.ai-chat__typing.is-visible {
    display: flex;
}

.ai-chat__typing-dots {
    display: inline-flex;
    gap: 0.28rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
}

.ai-chat__typing-dots span {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: #9ca3af;
    animation: ai-chat-dot 1s infinite ease-in-out;
}

.ai-chat__typing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.ai-chat__typing-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes ai-chat-dot {

    0%,
    80%,
    100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

.ai-chat__footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 0.85rem 1.1rem 1.1rem;
    background: #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-chat__chips {
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ai-chat__chips.is-open {
    display: flex;
}

.ai-chat__chip {
    border: none;
    border-radius: 9999px;
    background: var(--color-lavender);
    color: var(--color-indigo);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ai-chat__chip:hover {
    background: var(--color-lavender-hover);
}

.ai-chat__composer {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.45rem 0.4rem 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    box-shadow: 0 2px 10px rgba(31, 41, 55, 0.04);
}

.ai-chat__attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    flex-shrink: 0;
}

.ai-chat__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--color-ink);
    outline: none;
    padding: 0.55rem 0.25rem;
}

.ai-chat__input::placeholder {
    color: #9ca3af;
}

.ai-chat__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.ai-chat__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: none;
    border-radius: 9999px;
    color: #fff;
    cursor: pointer;
}

.ai-chat__icon-btn--suggestions {
    background: var(--color-lavender);
    color: var(--color-indigo);
}

.ai-chat__icon-btn--suggestions.is-active,
.ai-chat__icon-btn--suggestions:hover {
    background: var(--color-lavender-hover);
    color: var(--color-indigo-deep);
}

.ai-chat__icon-btn--mic {
    background: var(--color-indigo);
}

.ai-chat__icon-btn--send {
    background: var(--color-orange);
}

.ai-chat__icon-btn--mic:hover {
    background: var(--color-indigo-deep);
}

.ai-chat__icon-btn--send:hover {
    background: var(--color-orange-hover);
}

@media (max-width: 640px) {
    body.page-chat .page-chat__main {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    body.page-chat .ai-chat,
    .ai-chat {
        border-radius: 1rem;
    }

    .ai-chat__expert span {
        display: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Messagerie utilisateur ? utilisateur                                        */
/* -------------------------------------------------------------------------- */

body.page-messenger {
    height: 100dvh;
    overflow: hidden;
}

body.page-messenger .page-messenger__shell {
    display: flex;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

body.page-messenger .page-messenger__column {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100dvh;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

body.page-messenger .page-messenger__column>header {
    flex-shrink: 0;
}

body.page-messenger .page-messenger__main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.messenger {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 12px 40px rgba(31, 41, 55, 0.08);
}

.messenger__sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--color-border-soft);
    background: #fbfcfd;
}

.messenger__sidebar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.1rem 0.65rem;
}

.messenger__eyebrow {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.messenger__sidebar-title {
    margin: 0.15rem 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-ink);
}

.messenger__new {
    position: relative;
}

.messenger__new-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9999px;
    background: var(--color-indigo);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    list-style: none;
    cursor: pointer;
}

.messenger__new-btn::-webkit-details-marker {
    display: none;
}

.messenger__new-btn:hover {
    background: var(--color-indigo-deep);
}

.messenger__new-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 20;
    width: min(18rem, 78vw);
    padding: 0.75rem;
    border-radius: 0.9rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 16px 40px rgba(31, 41, 55, 0.12);
}

.messenger__new-label {
    margin: 0 0 0.55rem;
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--color-muted);
}

.messenger__new-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 14rem;
    overflow-y: auto;
}

.messenger__new-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.5rem;
    border: none;
    border-radius: 0.7rem;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.messenger__new-item:hover {
    background: var(--color-lavender);
}

.messenger__new-name,
.messenger__new-meta {
    display: block;
}

.messenger__new-name {
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--color-ink);
}

.messenger__new-meta {
    margin-top: 0.1rem;
    font-size: 0.72rem;
    color: var(--color-muted);
}

.messenger__search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 1rem 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 0.82rem;
}

.messenger__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.messenger__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--color-border-soft);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.messenger__item:hover {
    background: #f5f3fb;
}

.messenger__item.is-active {
    background: var(--color-lavender);
}

.messenger__item.has-unread .messenger__item-name,
.messenger__item.has-unread .messenger__item-preview {
    font-weight: 700;
    color: var(--color-ink);
}

.messenger__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 9999px;
    background: var(--color-indigo);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.messenger__avatar--sm {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.62rem;
}

.messenger__item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.messenger__item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.messenger__item-name {
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messenger__item-time {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--color-muted);
}

.messenger__item-preview {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.messenger__you {
    color: var(--color-indigo);
}

.messenger__badge {
    flex-shrink: 0;
    min-width: 1.25rem;
    padding: 0.1rem 0.35rem;
    border-radius: 9999px;
    background: var(--color-ai);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}

.messenger__empty-list,
.messenger__empty-thread {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.messenger__empty-hint {
    margin-top: 0.35rem;
    font-size: 0.78rem;
}

.messenger__pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #f3f4f6;
}

.messenger__pane-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.9rem 1.1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-soft);
}

.messenger__back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    color: #9ca3af;
    text-decoration: none;
}

.messenger__back:hover {
    background: #f3f4f6;
    color: var(--color-indigo);
}

.messenger__pane-titles {
    min-width: 0;
}

.messenger__pane-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--color-ink);
}

.messenger__pane-status {
    margin: 0.15rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-muted);
}

.messenger__online {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: var(--color-online);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.messenger__messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.messenger__row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: min(92%, 34rem);
}

.messenger__row--mine {
    align-self: flex-end;
}

.messenger__row--theirs {
    align-self: flex-start;
}

.messenger__bubble {
    margin: 0;
    padding: 0.75rem 0.95rem 0.45rem;
    box-shadow: 0 2px 8px rgba(31, 41, 55, 0.04);
}

.messenger__bubble p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.messenger__bubble time {
    margin: 0;
    font-size: 0.68rem;
    opacity: 0.75;
}

.messenger__bubble--theirs {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-ink);
    border-radius: 1.1rem 1.1rem 1.1rem 0.35rem;
}

.messenger__bubble--mine {
    background: var(--color-indigo);
    color: #fff;
    border-radius: 1.1rem 1.1rem 0.35rem 1.1rem;
}

.messenger__footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 0.85rem 1.1rem 1.1rem;
    background: #f3f4f6;
}

.messenger__composer {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.45rem 0.4rem 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    box-shadow: 0 2px 10px rgba(31, 41, 55, 0.04);
}

.messenger__attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    flex-shrink: 0;
}

.messenger__attach:disabled {
    cursor: default;
    opacity: 0.7;
}

.messenger__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--color-ink);
    outline: none;
    padding: 0.55rem 0.25rem;
}

.messenger__input::placeholder {
    color: #9ca3af;
}

.messenger__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.messenger__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: none;
    border-radius: 9999px;
    color: #fff;
    cursor: pointer;
}

.messenger__icon-btn--mic {
    background: var(--color-indigo);
}

.messenger__icon-btn--mic:disabled {
    cursor: default;
    opacity: 0.85;
}

.messenger__icon-btn--send {
    background: var(--color-orange);
}

.messenger__icon-btn--send:hover {
    background: var(--color-orange-hover);
}

.messenger__placeholder {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background:
        radial-gradient(circle at top right, rgba(233, 229, 245, 0.85), transparent 42%),
        #f3f4f6;
}

.messenger__placeholder-card {
    max-width: 22rem;
    text-align: center;
}

.messenger__placeholder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    background: var(--color-lavender);
    color: var(--color-indigo);
}

.messenger__placeholder-card h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-ink);
}

.messenger__placeholder-card p {
    margin: 0.55rem 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-muted);
}

@media (max-width: 900px) {
    .messenger {
        grid-template-columns: 1fr;
        border-radius: 1rem;
    }

    .messenger__sidebar {
        border-right: none;
    }

    .messenger--active .messenger__sidebar {
        display: none;
    }

    .messenger:not(.messenger--active) .messenger__pane {
        display: none;
    }

    .messenger__back {
        display: inline-flex;
    }
}

@media (max-width: 640px) {
    body.page-messenger .page-messenger__main {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* -------------------------------------------------------------------------- */
/* WhatsApp-like media (chat / AI / comments)                                   */
/* -------------------------------------------------------------------------- */

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

.messenger__composer-wrap,
.ai-chat__composer-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.messenger__bubble--media,
.ai-chat__bubble--media {
    padding: 0.35rem;
    overflow: hidden;
    max-width: min(18.5rem, 78vw);
    white-space: normal;
}

.messenger__bubble--media .wa-media__caption time,
.ai-chat__bubble--media .wa-media__caption time {
    color: inherit;
}

.messenger__bubble--mine.messenger__bubble--media .wa-media__file,
.ai-chat__bubble--user.ai-chat__bubble--media .wa-media__file {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.messenger__bubble--mine.messenger__bubble--media .wa-media__file-sub,
.ai-chat__bubble--user.ai-chat__bubble--media .wa-media__file-sub {
    color: rgba(255, 255, 255, 0.78);
}

.wa-media {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.wa-media__grid {
    display: grid;
    gap: 0.2rem;
    border-radius: 0.75rem;
    overflow: hidden;
    max-height: 17rem;
}

.wa-media__grid--1 {
    grid-template-columns: 1fr;
}

.wa-media__grid--2,
.wa-media__grid--3,
.wa-media__grid--4 {
    grid-template-columns: 1fr 1fr;
}

.wa-media__grid--1 .wa-media__cell {
    aspect-ratio: 4 / 3;
    max-height: 17rem;
}

.wa-media__grid--2 .wa-media__cell,
.wa-media__grid--3 .wa-media__cell,
.wa-media__grid--4 .wa-media__cell {
    aspect-ratio: 1 / 1;
    max-height: 8.4rem;
}

.wa-media__grid--3 .wa-media__cell:nth-child(3) {
    grid-column: 1 / 2;
}

.wa-media__cell {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: #111827;
    cursor: pointer;
    overflow: hidden;
}

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

.wa-media__cell--more img {
    filter: brightness(0.45);
}

.wa-media__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

.wa-media__file {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.7rem;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}

.wa-media__file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0 0.35rem;
    border-radius: 0.55rem;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.wa-media__file--other .wa-media__file-icon {
    background: #e0e7ff;
    color: #3730a3;
}

.wa-media__file-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.wa-media__file-name {
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-media__file-sub {
    font-size: 0.7rem;
    color: var(--color-muted);
}

.wa-media__caption {
    padding: 0.15rem 0.45rem 0.2rem;
}

.wa-media__caption p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.wa-media__caption .wa-meta,
.wa-media__caption time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    text-align: right;
    opacity: 0.75;
}

.wa-composer-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border-radius: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.wa-composer-preview[hidden] {
    display: none !important;
}

.wa-composer-preview__item {
    position: relative;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 0.55rem;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid var(--color-border);
}

.wa-composer-preview__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wa-composer-preview__item--file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.35rem;
    text-align: center;
}

.wa-composer-preview__ext {
    font-size: 0.65rem;
    font-weight: 700;
    color: #b91c1c;
}

.wa-composer-preview__name {
    font-size: 0.58rem;
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.wa-composer-preview__remove {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    border: none;
    border-radius: 9999px;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
}

.wa-viewer[hidden] {
    display: none !important;
}

.wa-viewer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.wa-viewer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
}

.wa-viewer__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: min(90vh, 880px);
    background: #0f172a;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.wa-viewer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
}

.wa-viewer__title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-viewer__actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.wa-viewer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.7rem;
    border: none;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    font-size: 0.78rem;
    cursor: pointer;
}

.wa-viewer__btn--close {
    font-size: 1.25rem;
    line-height: 1;
}

.wa-viewer__body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #020617;
}

.wa-viewer__image {
    max-width: 100%;
    max-height: calc(90vh - 4rem);
    object-fit: contain;
}

.wa-viewer__pdf {
    width: 100%;
    height: calc(90vh - 4rem);
    border: none;
    background: #fff;
}


/* -------------------------------------------------------------------------- */
/* Planning ? Kanban / Calendrier / Timeline / Checklist                     */
/* -------------------------------------------------------------------------- */

.planning-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.planning-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.planning-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.planning-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
    border-radius: 0.85rem;
    border: 1px solid var(--color-border);
    background: #fff;
    padding: 0.7rem 1.05rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.planning-filter-trigger:hover,
.planning-filter-trigger[aria-expanded="true"] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.planning-filter-trigger svg {
    width: 1.05rem;
    height: 1.05rem;
}

.planning-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    border-radius: 0.85rem;
    border: 1px solid var(--color-border);
    background: #fff;
    padding: 0.7rem 1.15rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.planning-tab:visited {
    color: #334155;
}

.planning-tab:hover {
    background: #f8fafc;
}

.planning-tab:not(.is-active):focus,
.planning-tab:not(.is-active):focus-visible {
    background: #fff;
    color: #334155;
    outline: 2px solid #23235b;
    outline-offset: 2px;
}

.planning-tab.is-active,
.planning-tab.is-active:visited,
.planning-tab.is-active:hover,
.planning-tab.is-active:focus {
    border-color: transparent;
    background: #23235b;
    color: #fff;
    box-shadow: 0 8px 18px rgba(35, 35, 91, 0.28);
    outline: none;
}

.planning-tab__dot {
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 2px #fff;
}

.planning-tab.is-active .planning-tab__dot {
    box-shadow: 0 0 0 2px #23235b;
}

.planning-kanban {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.planning-summary {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .planning-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .planning-summary {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.planning-summary__card {
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background: #fff;
    padding: 1rem 1.1rem;
    box-shadow: 0 8px 22px rgba(31, 41, 55, 0.05);
}

.planning-summary__label {
    font-size: 0.84rem;
    color: #64748b;
}

.planning-summary__value {
    margin-top: 0.45rem;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #0f172a;
}

.planning-summary__value--blue {
    color: #2563eb;
}

.planning-summary__value--green {
    color: #16a34a;
}

.planning-summary__value--amber {
    color: var(--color-orange-hover);
}

.planning-summary__value--rose {
    color: #e11d48;
}

.planning-summary__value--violet {
    color: #6d28d9;
}

.planning-summary__meta {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #94a3b8;
}

.planning-summary__meta--green {
    color: #16a34a;
}

.planning-summary__meta--rose {
    color: #e11d48;
}

.planning-summary__meta--violet {
    color: #7c3aed;
}

.planning-summary__bar {
    margin-top: 0.7rem;
    height: 0.4rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.planning-summary__bar>span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #3b82f6;
}

.planning-filters-panel {
    position: fixed;
    inset: 0;
    z-index: 70;
}

.planning-filters-panel[hidden] {
    display: none !important;
}

.planning-filters-panel__backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}

.planning-filters-panel__dialog {
    position: absolute;
    top: 4.25rem;
    right: 1rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(22rem, calc(100vw - 1.5rem));
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    animation: planning-filters-in 0.18s ease-out;
}

.planning-filters-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.05rem 1.1rem 0.7rem;
}

.planning-filters-panel__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.planning-filters-panel__close {
    display: inline-flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.55rem;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
}

.planning-filters-panel__close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.planning-filters-panel__close svg {
    width: 0.95rem;
    height: 0.95rem;
}

.planning-filters {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0 1.1rem 1.15rem;
}

.planning-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid var(--color-border);
    background: #fff;
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.planning-filter:hover {
    background: #f8fafc;
}

.planning-filter.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.planning-filter__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
}

.planning-filter__dot--high {
    background: #ef4444;
}

.planning-filter__dot--medium {
    background: var(--color-warning);
}

.planning-filter__dot--low {
    background: #22c55e;
}

.planning-filter__icon {
    width: 0.95rem;
    height: 0.95rem;
    color: #ef4444;
}

.planning-filter__icon--ai {
    color: var(--color-ai);
}

@keyframes planning-filters-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

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

@media (min-width: 768px) {
    .planning-filters-panel__dialog {
        right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .planning-filters-panel__dialog {
        right: 2rem;
    }
}

.planning-board-card {
    border-radius: 1.15rem;
    border: 1px solid var(--color-border);
    background: #fff;
    box-shadow: 0 10px 28px rgba(31, 41, 55, 0.06);
    overflow: hidden;
}

.planning-board {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .planning-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .planning-board {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.planning-column {
    padding: 1.1rem 1rem 1.2rem;
}

@media (min-width: 768px) {
    .planning-column:nth-child(odd) {
        border-right: 1px solid #cbd5e1;
    }

    .planning-column:nth-child(-n+2) {
        border-bottom: 1px solid #cbd5e1;
    }
}

@media (min-width: 1280px) {
    .planning-column {
        border-right: 1px solid #cbd5e1;
        border-bottom: none;
    }

    .planning-column:nth-child(odd) {
        border-right: 1px solid #cbd5e1;
    }

    .planning-column:last-child {
        border-right: none;
    }
}

.planning-column__head {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.planning-column__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
}

.planning-column__count {
    font-size: 0.78rem;
    color: #94a3b8;
}

.planning-column__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 4rem;
}

.planning-column__empty {
    border: 1px dashed var(--color-border);
    border-radius: 0.9rem;
    padding: 1rem;
    font-size: 0.82rem;
    color: #94a3b8;
    text-align: center;
    background: #f8fafc;
}

.planning-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    border-radius: 0.9rem;
    border: 1px solid var(--color-border);
    background: #fff;
    padding: 0.9rem 0.95rem;
    box-shadow: 0 4px 14px rgba(31, 41, 55, 0.04);
}

.planning-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}

.planning-card__title {
    font-size: 0.92rem;
    font-weight: 650;
    color: #0f172a;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-card__title a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-card__title.is-done {
    text-decoration: line-through;
    color: #64748b;
}

.planning-card__assignee {
    margin-top: 0.35rem;
    margin-left: 1.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-card__progress-block {
    margin-top: auto;
    padding-top: 0.75rem;
}

.planning-card__progress {
    height: 0.35rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.planning-card__progress>span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #3b82f6;
}

.planning-card__progress-label {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.planning-panel {
    padding: 1.35rem 1.4rem 1.5rem;
}

.planning-panel__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e1b4b;
}

.planning-empty-note {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: #94a3b8;
}

.planning-calendar {
    margin-top: 1.25rem;
}

.planning-calendar__weekdays,
.planning-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.planning-calendar__weekdays {
    margin-bottom: 0.55rem;
}

.planning-calendar__weekdays span {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
}

.planning-calendar__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    border-radius: 0.65rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: #0f172a;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

a.planning-calendar__cell {
    cursor: pointer;
}

a.planning-calendar__cell:visited {
    color: inherit;
}

.planning-calendar__cell.is-muted {
    color: #cbd5e1;
    background: transparent;
}

.planning-calendar__cell.is-free {
    background: #f8fafc;
    color: #94a3b8;
}

.planning-calendar__cell.is-taken {
    background: #eef2ff;
    color: #312e81;
    font-weight: 650;
}

.planning-calendar__cell.is-today {
    box-shadow: inset 0 0 0 2px #0f172a;
    background: #fff7ed;
}

.planning-calendar__cell.is-today.is-taken {
    background: #ffedd5;
    box-shadow: inset 0 0 0 2px #c2410c;
}

.planning-calendar__cell.is-selected {
    background: #23235b;
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 0 0 2px #23235b;
}

.planning-calendar__cell.is-selected.is-today,
.planning-calendar__cell.is-selected.is-taken,
.planning-calendar__cell.is-selected.is-free {
    background: #23235b;
    color: #fff;
}

.planning-calendar__cell.is-selected .planning-calendar__day,
.planning-calendar__cell.is-selected .planning-calendar__pill {
    color: #fff;
    background: transparent;
    box-shadow: none;
}

.planning-calendar__cell.is-selected.is-today {
    box-shadow: inset 0 0 0 2px #fdba74;
}

.planning-calendar__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
}

.planning-calendar__day.is-today {
    font-weight: 700;
    color: #c2410c;
}

.planning-calendar__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-weight: 650;
}

.planning-calendar__pill--urgent {
    background: #ffedd5;
    color: #c2410c;
}

.planning-calendar__pill--normal {
    background: #e0e7ff;
    color: #4338ca;
}

.planning-calendar__pill.is-today {
    box-shadow: 0 0 0 2px #c2410c;
    background: #fdba74;
    color: #7c2d12;
}

.planning-calendar__keys {
    margin-top: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.planning-calendar__keys span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.planning-calendar__key {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.25rem;
}

.planning-calendar__key--free {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.planning-calendar__key--taken {
    background: #e0e7ff;
    border: 1px solid #a5b4fc;
}

.planning-calendar__key--today {
    background: #ffedd5;
    box-shadow: inset 0 0 0 2px #c2410c;
}

.planning-calendar__key--selected {
    background: #23235b;
}

.planning-calendar__legend {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.planning-calendar__list-title {
    margin-top: 1.5rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: #1e1b4b;
}

.planning-calendar__legend li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.92rem;
    color: #334155;
}

.planning-calendar__legend-text.is-done {
    text-decoration: line-through;
    color: #64748b;
}

.planning-calendar__swatch {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.2rem;
    flex-shrink: 0;
}

.planning-calendar__swatch--urgent {
    background: #fdba74;
}

.planning-calendar__swatch--normal {
    background: #a5b4fc;
}

.planning-timeline {
    margin-top: 1.4rem;
    position: relative;
    padding-left: 0.35rem;
}

.planning-timeline::before {
    content: '';
    position: absolute;
    left: 0.55rem;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 2px;
    background: #e2e8f0;
}

.planning-timeline__item {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 0 0 1.35rem 0.15rem;
}

.planning-timeline__item:last-child {
    padding-bottom: 0;
}

.planning-timeline__dot {
    position: relative;
    z-index: 1;
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.3rem;
    border-radius: 999px;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px #fff;
}

.planning-timeline__item--done .planning-timeline__dot {
    background: #22c55e;
}

.planning-timeline__item--past .planning-timeline__dot {
    background: #94a3b8;
}

.planning-timeline__item--current .planning-timeline__dot {
    background: #ea580c;
    box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(234, 88, 12, 0.28);
}

.planning-timeline__item--future .planning-timeline__dot {
    background: #6366f1;
}

.planning-timeline__item--upcoming .planning-timeline__dot {
    background: #818cf8;
}

.planning-timeline__item--urgent .planning-timeline__dot {
    background: #ea580c;
}

.planning-timeline__item--event_day .planning-timeline__dot {
    background: #ec4899;
}

.planning-timeline__body {
    min-width: 0;
    flex: 1;
    border-radius: 0.75rem;
    padding: 0.15rem 0.55rem 0.2rem 0;
}

.planning-timeline__item--past .planning-timeline__body {
    opacity: 0.72;
}

.planning-timeline__item--current .planning-timeline__body {
    background: #fff7ed;
    padding: 0.45rem 0.7rem;
    border: 1px solid #fed7aa;
}

.planning-timeline__item--future .planning-timeline__body {
    border-left: 2px solid #c7d2fe;
    padding-left: 0.65rem;
}

.planning-timeline__title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
}

.planning-timeline__item--past .planning-timeline__title {
    color: #64748b;
    font-weight: 600;
}

.planning-timeline__item--current .planning-timeline__title {
    color: #9a3412;
}

.planning-timeline__item--future .planning-timeline__title {
    color: #312e81;
}

.planning-timeline__sub {
    margin-top: 0.2rem;
    font-size: 0.86rem;
    color: #94a3b8;
}

.planning-timeline__item--past .planning-timeline__sub {
    color: #94a3b8;
}

.planning-timeline__item--current .planning-timeline__sub {
    color: #c2410c;
}

.planning-timeline__item--future .planning-timeline__sub {
    color: #6366f1;
}

.planning-timeline__item--urgent .planning-timeline__sub {
    color: #ea580c;
}

.planning-timeline__item--event_day .planning-timeline__sub {
    color: #db2777;
}

.planning-checklist {
    margin-top: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.planning-checklist__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 0.75rem;
    padding: 0.85rem 0.95rem;
    background: #fff;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
}

.planning-checklist__row.is-past {
    background: #f8fafc;
    border-left-color: #94a3b8;
}

.planning-checklist__row.is-current {
    background: #fff7ed;
    border-color: #fed7aa;
    border-left-color: #ea580c;
}

.planning-checklist__row.is-future {
    background: #f8fafc;
    border-left-color: #818cf8;
}

.planning-checklist__row.is-done {
    background: #f0fdf4;
    border-color: transparent;
    border-left-color: #22c55e;
}

.planning-checklist__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.planning-checklist__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.28rem;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    flex-shrink: 0;
}

.planning-checklist__box.is-checked {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

.planning-checklist__box svg {
    width: 0.75rem;
    height: 0.75rem;
}

.planning-checklist__text {
    font-size: 0.94rem;
    color: #334155;
}

.planning-checklist__row.is-past:not(.is-done) .planning-checklist__text {
    color: #64748b;
}

.planning-checklist__row.is-current:not(.is-done) .planning-checklist__text {
    color: #9a3412;
    font-weight: 600;
}

.planning-checklist__row.is-future:not(.is-done) .planning-checklist__text {
    color: #312e81;
}

.planning-checklist__row.is-done .planning-checklist__text {
    text-decoration: line-through;
    color: #64748b;
}

.planning-checklist__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.planning-checklist__when {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.planning-checklist__when--past {
    color: #64748b;
}

.planning-checklist__when--current {
    color: #c2410c;
}

.planning-checklist__when--future {
    color: #4f46e5;
}

.planning-checklist__tag {
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: #94a3b8;
}

.planning-checklist__tag.is-done {
    color: #16a34a;
}

.planning-done-form {
    display: inline-flex;
    flex-shrink: 0;
}

.planning-done-toggle {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
}

.planning-done-toggle__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.28rem;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    color: #fff;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.planning-done-toggle:hover .planning-done-toggle__box {
    border-color: #94a3b8;
}

.planning-done-toggle.is-checked .planning-done-toggle__box {
    border-color: #2563eb;
    background: #2563eb;
}

.planning-done-toggle__box svg {
    width: 0.75rem;
    height: 0.75rem;
}

.planning-card.is-filtered-out {
    display: none;
}

/* -------------------------------------------------------------------------- */
/* WhatsApp-like chat extras (dates, ticks, reactions, emoji picker)           */
/* -------------------------------------------------------------------------- */

.chat-date-sep {
    align-self: center;
    margin: 0.35rem 0 0.15rem;
    z-index: 1;
}

.chat-date-sep span {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(229, 231, 235, 0.95);
    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.06);
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.01em;
}

.wa-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.22rem;
    margin-top: 0.35rem;
    font-size: 0.68rem;
    opacity: 0.8;
}

.messenger__bubble .wa-meta time,
.ai-chat__bubble .wa-meta time {
    margin: 0;
    opacity: 1;
}

.wa-ticks {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 1rem;
    height: 0.7rem;
    color: rgba(255, 255, 255, 0.72);
    flex-shrink: 0;
}

.messenger__bubble--theirs .wa-ticks,
.ai-chat__bubble--ai .wa-ticks {
    color: #9ca3af;
}

.wa-ticks__check {
    position: absolute;
    right: 0;
    top: 0;
}

.wa-ticks__check--second {
    right: 0.28rem;
}

.wa-ticks--delivered {
    color: rgba(255, 255, 255, 0.72);
}

.wa-ticks--read {
    color: #53bdeb;
}

.messenger__bubble-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: inherit;
    max-width: 100%;
}

.messenger__row--mine .messenger__bubble-wrap {
    align-items: flex-end;
}

.messenger__row--theirs .messenger__bubble-wrap {
    align-items: flex-start;
}

.messenger__hover-bar {
    position: absolute;
    top: -1.55rem;
    display: none;
    align-items: center;
    gap: 0.25rem;
    z-index: 3;
}

.messenger__row--mine .messenger__hover-bar {
    right: 0;
}

.messenger__row--theirs .messenger__hover-bar {
    left: 0;
}

.messenger__bubble-wrap:hover .messenger__hover-bar,
.messenger__bubble-wrap:focus-within .messenger__hover-bar {
    display: flex;
}

.messenger__quick-react {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.15rem 0.25rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 14px rgba(31, 41, 55, 0.12);
}

.messenger__quick-react form {
    margin: 0;
    display: inline-flex;
}

.messenger__quick-emoji {
    width: 1.7rem;
    height: 1.7rem;
    border: none;
    background: transparent;
    border-radius: 9999px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}

.messenger__quick-emoji:hover,
.messenger__quick-emoji.is-active {
    background: #f3f4f6;
}

.messenger__quick-emoji--more {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 600;
}

.messenger__msg-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(31, 41, 55, 0.1);
}

.messenger__msg-action:hover {
    color: #dc2626;
    border-color: #fecaca;
}

.messenger__bubble--deleted {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0.85;
}

.messenger__tombstone {
    font-style: italic;
    color: inherit;
    opacity: 0.85;
}

.messenger__bubble--mine.messenger__bubble--deleted {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(62, 59, 140, 0.55) !important;
}

.messenger__bubble--theirs.messenger__bubble--deleted {
    color: #6b7280;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
}

/* Pastilles de r?actions style WhatsApp (1 message ? N r?acteurs) */
.messenger__reactions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    margin-top: -0.55rem;
    margin-bottom: 0.2rem;
    padding: 0 0.15rem;
    position: relative;
    z-index: 2;
    max-width: 100%;
}

/* Vos messages (droite) : pastilles vers l?int?rieur (bas-gauche) */
.messenger__row--mine .messenger__reactions {
    align-self: flex-start;
    margin-left: 0.15rem;
}

/* Messages re?us (gauche) : pastilles vers l?int?rieur (bas-droite) */
.messenger__row--theirs .messenger__reactions {
    align-self: flex-end;
    margin-right: 0.15rem;
}

.messenger__reaction-chip {
    position: relative;
    display: inline-flex;
}

.messenger__reaction-form {
    margin: 0;
}

.messenger__reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    min-height: 1.35rem;
    padding: 0.1rem 0.35rem;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-shadow: 0 1px 2px rgba(11, 20, 26, 0.12), 0 0 0 0.5px rgba(11, 20, 26, 0.06);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.messenger__reaction:hover {
    background: #f8fafc;
}

.messenger__reaction.is-mine {
    border-color: rgba(37, 211, 102, 0.45);
    background: #e7fce3;
}

.messenger__reaction-emoji {
    display: inline-block;
    line-height: 1;
}

.messenger__reaction-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: #54656f;
    font-variant-numeric: tabular-nums;
    min-width: 0.65rem;
}

.messenger__reaction-tip {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 7.5rem;
    max-width: 12rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.55rem;
    background: #111827;
    color: #fff;
    font-size: 0.72rem;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 20;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

.messenger__reaction-tip strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.95rem;
}

.messenger__reaction-tip ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.messenger__reaction-chip:hover .messenger__reaction-tip,
.messenger__reaction-tip:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.messenger__emoji-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    flex-shrink: 0;
}

.messenger__emoji-btn:hover,
.messenger__emoji-btn.is-open {
    color: #6b7280;
}

.messenger__footer {
    position: relative;
}

.emoji-picker {
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: calc(100% - 0.15rem);
    z-index: 30;
    display: flex;
    flex-direction: column;
    max-height: 18.5rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(31, 41, 55, 0.16);
    overflow: hidden;
}

.emoji-picker[hidden] {
    display: none !important;
}

.emoji-picker__search {
    padding: 0.65rem 0.75rem 0.35rem;
    border-bottom: 1px solid #f3f4f6;
}

.emoji-picker__search input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    outline: none;
    background: #f9fafb;
}

.emoji-picker__search input:focus {
    border-color: #c7d2fe;
    background: #fff;
}

.emoji-picker__tabs {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.55rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.emoji-picker__tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0 0.25rem;
    border-radius: 0.45rem;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    overflow: visible;
}

.emoji-picker__tab.is-active,
.emoji-picker__tab:hover {
    background: #f3f4f6;
}

.emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.2rem;
    padding: 0.45rem 0.55rem 0.7rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.emoji-picker__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 0.4rem;
    min-height: 2.1rem;
    aspect-ratio: 1;
    font-size: 1.35rem;
    cursor: pointer;
    line-height: 1;
    overflow: visible;
    padding: 0.15rem;
}

.emoji-picker__item:hover {
    background: #f3f4f6;
}

.emoji-picker__empty {
    grid-column: 1 / -1;
    padding: 1rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.85rem;
}

.ai-chat__messages .chat-date-sep {
    margin: 0.5rem 0;
}

/* Plan de salle ? visualisation canvas */
.seating-plan-card {
    background: #fff;
}

.seating-plan-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.seating-plan-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.seating-plan-occupation {
    font-size: 0.95rem;
    font-weight: 600;
    color: #4caf50;
}

.seating-plan-hint {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: #94a3b8;
}

.seating-plan-layout {
    display: grid;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .seating-plan-layout {
        grid-template-columns: minmax(0, 1fr) 17.5rem;
        align-items: start;
    }
}

.seating-plan-canvas {
    position: relative;
    min-height: 440px;
    border: 1px solid #e0e0e0;
    border-radius: 1rem;
    background: #fafafa;
    overflow: hidden;
    touch-action: none;
}

.seating-plan-node {
    cursor: grab;
    user-select: none;
    touch-action: none;
    z-index: 1;
}

.seating-plan-node.is-dragging {
    cursor: grabbing;
    z-index: 5;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

.seating-plan-node.is-selected {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
    z-index: 4;
}

.seating-plan-editor {
    border: 1px solid #e0e0e0;
    border-radius: 1rem;
    background: #fff;
    padding: 1rem;
}

.seating-plan-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.seating-plan-editor__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    color: #64748b;
    font-size: 1.25rem;
    line-height: 1;
}

.seating-plan-editor__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.seating-plan-editor__form {
    display: grid;
    gap: 0.75rem;
}

.seating-plan-editor__status {
    font-size: 0.75rem;
    color: #16a34a;
}

.seating-plan-editor__status--error {
    color: #e11d48;
}

.seating-plan-editor__delete {
    color: #e11d48;
}

.seating-plan-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    border: 1px solid #e0e0e0;
    border-radius: 1rem;
    background: #fafafa;
    text-align: center;
    padding: 2rem;
}

.seating-plan-table {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    border: 2px solid transparent;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.15;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.seating-plan-table--full {
    background: #4caf50;
    border-color: #43a047;
    color: #fff;
}

.seating-plan-table--partial {
    background: #ffc107;
    border-color: #ffb300;
    color: #3d3420;
}

.seating-plan-table--empty {
    background: #e0e0e0;
    border-color: #d5d5d5;
    color: #475569;
}

.seating-plan-vip {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    padding: 0.65rem 1.1rem;
    border-radius: 0.65rem;
    border: 1.5px solid #90caf9;
    background: #e3f2fd;
    color: #1565c0;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.2;
}

.seating-plan-stage {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transform: translateX(-50%);
    min-width: 7.5rem;
    justify-content: center;
    padding: 0.65rem 1.25rem;
    border-radius: 0.65rem;
    border: 1.5px solid #90caf9;
    background: #e3f2fd;
    color: #1565c0;
    font-weight: 600;
    font-size: 0.9rem;
}

.seating-plan-stage-icon {
    display: inline-flex;
    color: #1976d2;
}

.seating-plan-label {
    font-size: 0.8rem;
    font-weight: 700;
}

.seating-plan-fraction {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.95;
}

.seating-plan-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #64748b;
}

.seating-plan-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.seating-plan-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 9999px;
}

.seating-plan-dot--full {
    background: #4caf50;
}

.seating-plan-dot--partial {
    background: #ffc107;
}

.seating-plan-dot--empty {
    background: #e0e0e0;
    border: 1px solid #d0d0d0;
}

@media (min-width: 768px) {
    .seating-plan-canvas {
        min-height: 520px;
    }

    .seating-plan-table {
        width: 5.25rem;
        height: 5.25rem;
    }

    .seating-plan-label {
        font-size: 0.9rem;
    }

    .seating-plan-fraction {
        font-size: 0.78rem;
    }
}


/* -------------------------------------------------------------------------- */
/* Parametres ? onglets dossiers                                               */
/* -------------------------------------------------------------------------- */

.settings-folders__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.35rem;
    padding: 0 0.35rem;
    position: relative;
    z-index: 1;
}

.settings-folders__tab {
    appearance: none;
    border: 1px solid var(--color-border);
    border-bottom: none;
    background: #eef1f5;
    color: var(--color-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: -1px;
    padding: 0.7rem 1.15rem 0.85rem;
    position: relative;
    border-radius: 0.75rem 0.75rem 0 0;
    box-shadow: inset 0 -1px 0 transparent;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.settings-folders__tab:hover {
    color: var(--color-indigo);
    background: #f5f6f8;
}

.settings-folders__tab.is-active {
    background: var(--color-surface);
    color: var(--color-indigo);
    z-index: 2;
    padding-top: 0.85rem;
    box-shadow: 0 -1px 0 var(--color-surface);
}

.settings-folders__tab.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--color-surface);
}

.settings-folders__body {
    position: relative;
    z-index: 0;
    border: 1px solid var(--color-border);
    border-radius: 0 1rem 1rem 1rem;
    background: var(--color-surface);
    box-shadow: 0 10px 30px rgba(31, 41, 55, 0.06);
    min-height: 12rem;
}

.settings-folders__panel {
    padding: 1.5rem;
}

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

.settings-folders__panel-head {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--color-border-soft);
}

.settings-folders__panel-title {
    font-size: 1.125rem;
    font-weight: 650;
    color: var(--color-ink);
}

.settings-folders__panel-desc {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.settings-avatar {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 9999px;
    overflow: hidden;
    border: 2px solid var(--color-lavender);
    background: var(--color-lavender);
    flex-shrink: 0;
}

.settings-avatar__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Toggle switch (hors checklists planning) */
.settings-check,
.ui-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.35rem;
    margin: 0;
    flex-shrink: 0;
    vertical-align: middle;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.22s ease, border-color 0.22s ease;
}

.settings-check::before,
.ui-switch::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #cbd5e1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    transform: translateY(-50%);
    transition: transform 0.22s ease, background-color 0.22s ease;
}

.settings-check:checked,
.ui-switch:checked {
    background: var(--color-orange);
    border-color: var(--color-orange);
}

.settings-check:checked::before,
.ui-switch:checked::before {
    background: #fff;
    transform: translate(1.05rem, -50%);
}

.settings-check:focus-visible,
.ui-switch:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-orange) 45%, transparent);
    outline-offset: 2px;
}

.settings-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    cursor: pointer;
}

.settings-toggle .settings-check {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.settings-toggle__title {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
}

.settings-toggle__hint {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: #64748b;
}

.settings-notify-table th,
.settings-notify-table td {
    vertical-align: middle;
}

@media (max-width: 640px) {
    .settings-folders {
        max-width: none;
    }

    .settings-folders__tab {
        flex: 1 1 auto;
        text-align: center;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
        font-size: 0.8125rem;
    }

    .settings-folders__body {
        border-radius: 0 0 1rem 1rem;
    }

    .settings-folders__panel {
        padding: 1.15rem;
    }
}

/* -------------------------------------------------------------------------- */
/* Chat links + WhatsApp-style link previews                                   */
/* -------------------------------------------------------------------------- */

.chat-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    word-break: break-all;
}

.chat-link:hover {
    opacity: 0.88;
}

.messenger__bubble--mine .chat-link,
.ai-chat__bubble--user .chat-link {
    color: #fff;
}

.messenger__bubble--theirs .chat-link,
.ai-chat__bubble--ai .chat-link,
.chat-text-block .chat-link {
    color: var(--color-indigo);
}

.link-preview {
    margin-top: 0.55rem;
    max-width: 20rem;
}

.link-preview__card {
    display: block;
    overflow: hidden;
    border-radius: 0.65rem;
    text-decoration: none;
    color: inherit;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.08);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.link-preview__card:hover {
    background: rgba(15, 23, 42, 0.07);
    border-color: rgba(15, 23, 42, 0.14);
}

.messenger__bubble--mine .link-preview__card,
.ai-chat__bubble--user .link-preview__card {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
}

.messenger__bubble--mine .link-preview__card:hover,
.ai-chat__bubble--user .link-preview__card:hover {
    background: rgba(255, 255, 255, 0.2);
}

.link-preview__media {
    display: block;
    aspect-ratio: 1.91 / 1;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.06);
}

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

.link-preview__body {
    padding: 0.55rem 0.7rem 0.65rem;
}

.link-preview__site {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.72;
    margin-bottom: 0.2rem;
}

.link-preview__favicon {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.15rem;
    object-fit: cover;
    flex-shrink: 0;
}

.link-preview__title {
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.link-preview__desc {
    margin-top: 0.2rem;
    font-size: 0.76rem;
    line-height: 1.35;
    opacity: 0.8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wa-media__caption .link-preview {
    margin-top: 0.45rem;
}

/* Subscription plans */
.subscription-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .subscription-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .subscription-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.subscription-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 1.25rem;
    min-height: 100%;
}

.subscription-card--featured {
    border-color: rgba(234, 88, 12, 0.45);
    box-shadow: 0 10px 30px rgba(234, 88, 12, 0.12);
}

.subscription-card--current {
    outline: 2px solid rgba(16, 185, 129, 0.35);
    outline-offset: 1px;
}

.subscription-card__badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    border-radius: 999px;
    background: rgba(234, 88, 12, 0.12);
    color: var(--color-orange-hover);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
}

.subscription-card__title {
    font-size: 1.125rem;
    font-weight: 650;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subscription-card__tagline {
    font-size: 0.8125rem;
    color: #64748b;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.subscription-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.subscription-card__period {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}

.subscription-card__features {
    margin: 0.25rem 0 1rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.subscription-card__features li {
    position: relative;
    padding-left: 1.15rem;
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.35;
}

.subscription-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--color-ai);
}

.subscription-card button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.subscription-card a.btn-primary,
.subscription-card a.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/* Phone input (indicatif pays + num?ro national)                             */
/* -------------------------------------------------------------------------- */

.phone-input__row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.phone-input__dial {
    flex: 0 0 auto;
    width: 7.75rem;
}

.phone-input__dial-select {
    padding-left: 0.65rem;
    padding-right: 0.5rem;
    font-weight: 600;
    cursor: default;
}

.phone-input__national {
    flex: 1 1 auto;
    min-width: 0;
}

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

/* -------------------------------------------------------------------------- */
/* Payment checkout page                                                      */
/* -------------------------------------------------------------------------- */

.payment-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.payment-page__intro {
    max-width: 40rem;
}

.payment-page__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s ease;
}

.payment-page__back:hover {
    color: #0f172a;
}

.payment-page__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.payment-page__description {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #64748b;
}

.payment-page__grid {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 900px) {
    .payment-page__grid {
        /* Produit ~col-6, paiement ~col-6 */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.5rem;
    }
}

.payment-page__summary,
.payment-page__panel {
    padding: 1.5rem;
}

@media (min-width: 640px) {

    .payment-page__summary,
    .payment-page__panel {
        padding: 1.75rem;
    }
}

.payment-page__summary-label {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.payment-page__amount {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 750;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.payment-page__amount-hint {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
}

.payment-page__meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.payment-page__meta-row {
    display: grid;
    gap: 0.15rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border-soft);
}

.payment-page__meta-row dt {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
}

.payment-page__meta-row dd {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
}

.payment-page__features {
    margin: 1.25rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--color-border-soft);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.payment-page__features li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.4;
}

.payment-page__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--color-ai);
}

.payment-page__form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.payment-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.25rem;
}

.payment-page__submit {
    min-width: 12rem;
}

.payment-page__cancel {
    text-decoration: none;
}

/* -------------------------------------------------------------------------- */
/* Payment methods (carte / mobile money)                                     */
/* -------------------------------------------------------------------------- */

.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.payment-methods--page {
    gap: 0.35rem;
}

.payment-methods__header {
    margin-bottom: 0.85rem;
}

.payment-methods__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0f172a;
}

.payment-methods__lead,
.payment-methods__section-note,
.payment-methods__hint {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748b;
}

.payment-methods__section-head {
    margin: 1.35rem 0 0.75rem;
}

.payment-methods__subtitle {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 650;
    color: #0f172a;
}

.payment-methods__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 560px) {
    .payment-methods__options {
        grid-template-columns: 1fr 1fr;
    }
}

.payment-methods__option,
.payment-methods__provider {
    position: relative;
    display: block;
}

.payment-methods__option {
    cursor: pointer;
}

.payment-methods__provider {
    pointer-events: none;
    user-select: none;
}

.payment-methods__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-methods__option-body,
.payment-methods__provider-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 5.5rem;
    padding: 1rem 0.85rem;
    border-radius: 1rem;
    border: 1px solid var(--color-border);
    background: #fafbfc;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.payment-methods__option-body:hover {
    border-color: rgba(62, 59, 140, 0.35);
    background: #fff;
}

.payment-methods__provider-body {
    opacity: 0.4;
    min-height: 0;
    gap: 0;
    padding: 0.55rem;
}

.payment-methods__option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgba(62, 59, 140, 0.08);
    color: var(--color-indigo);
}

.payment-methods__option-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.payment-methods__option-label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
}

.payment-methods__option-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    text-align: center;
}

.payment-methods__option input:checked+.payment-methods__option-body,
.payment-methods__provider.is-auto-selected .payment-methods__provider-body {
    border-color: rgba(62, 59, 140, 0.55);
    background: rgba(233, 229, 245, 0.55);
    box-shadow: 0 0 0 3px rgba(62, 59, 140, 0.12);
}

.payment-methods__provider.is-auto-selected .payment-methods__provider-body {
    opacity: 1;
}

.payment-methods__providers-wrap {
    margin-top: 1.15rem;
}

.payment-methods__providers-label {
    margin: 0 0 0.65rem;
    font-size: 0.8125rem;
    font-weight: 650;
    color: #475569;
}

.payment-methods__providers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.payment-methods__provider-logo {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    max-width: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
    background: #fff;
}

.payment-methods__phone {
    margin-top: 1.15rem;
}

.payment-methods__card {
    margin-top: 1.15rem;
}

.payment-methods__card-fields {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.payment-methods__card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.payment-methods__field {
    min-width: 0;
}

@media (max-width: 560px) {
    .payment-methods__providers {
        gap: 0.45rem;
    }

    .payment-methods__provider-logo {
        width: 2.25rem;
        height: 2.25rem;
    }

    .phone-input__dial {
        width: 6.75rem;
    }

    .payment-page__actions {
        flex-direction: column;
    }

    .payment-page__submit,
    .payment-page__cancel {
        width: 100%;
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------- */
/* Couche responsive globale (320 / 480 / 640 / 768 / 1024 / 1280)            */
/* -------------------------------------------------------------------------- */

html {
    overflow-x: clip;
}

img,
video {
    max-width: 100%;
    height: auto;
}

.header-avatar img,
.header-avatar--lg img,
.settings-avatar__img,
.messenger__avatar img,
.wa-media img,
.link-preview__media img,
.wa-viewer__image {
    height: 100%;
}

button,
a,
[role="button"] {
    touch-action: manipulation;
}

.kpi-card__value {
    font-size: clamp(1.25rem, 5vw, 1.875rem);
    line-height: 1.15;
}

canvas[data-chart] {
    display: block;
    width: 100%;
    max-width: 100%;
}

.app-header__title {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header__event-bar {
    display: none;
    position: relative;
    z-index: 1;
    padding: 0 0.75rem 0.65rem;
    border-top: 1px solid #f1f5f9;
}

.sidebar-backdrop {
    display: none;
}

.sidebar-drawer-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
}

.sidebar-drawer-close svg {
    width: 1.15rem;
    height: 1.15rem;
}

.sidebar-drawer-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

.seating-plan-scroller {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.table-shell td,
.table-shell th {
    overflow-wrap: anywhere;
}

.table-shell .input-field {
    min-width: 7.5rem;
}

/* --- mini téléphone (~320–479) + téléphone (~480–639) ------------------- */

@media (max-width: 767.98px) {

    .sidebar-toggle,
    .header-icon-btn,
    .notif-bell {
        min-height: 2.75rem;
        min-width: 2.75rem;
        height: 2.75rem;
        width: 2.75rem;
    }

    .btn-primary,
    .btn-secondary,
    .btn-live-force {
        min-height: 2.75rem;
    }

    input.input-field,
    select.input-field,
    textarea.input-field,
    .input-field {
        font-size: 16px;
    }

    .app-shell__frame,
    body.page-chat .page-chat__shell,
    body.page-messenger .page-messenger__shell {
        display: flex;
    }

    .app-shell__sidebar,
    body.sidebar-is-collapsed .app-shell__sidebar,
    .sidebar.sidebar--collapsed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 60;
        width: min(18.5rem, calc(100vw - 3rem)) !important;
        height: 100dvh;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translateX(-105%);
        transition: transform 0.22s ease, box-shadow 0.22s ease;
        pointer-events: none;
        box-shadow: none;
    }

    body.sidebar-is-open .app-shell__sidebar {
        transform: translateX(0);
        pointer-events: auto;
        box-shadow: 16px 0 40px rgba(15, 23, 42, 0.28);
    }

    .sidebar--collapsed .sidebar-brand-wrap,
    .sidebar .sidebar-brand-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 1.1rem 1rem;
    }

    .sidebar--collapsed .sidebar-brand__full {
        display: inline;
    }

    .sidebar--collapsed .sidebar-brand__short {
        display: none;
    }

    .sidebar--collapsed .sidebar-brand-actions {
        display: flex;
    }

    .sidebar--collapsed .nav-link,
    .sidebar--collapsed .sidebar-ai {
        justify-content: flex-start;
        gap: 0.75rem;
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }

    .sidebar--collapsed .nav-label {
        display: inline;
    }

    .sidebar-drawer-close {
        display: inline-flex;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(15, 23, 42, 0.46);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    .sidebar-backdrop[hidden] {
        display: none;
    }

    body.sidebar-is-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .app-header {
        z-index: 50;
    }

    .app-header__bar {
        padding-top: max(0.55rem, env(safe-area-inset-top));
        padding-bottom: 0.55rem;
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }

    .app-header__event-bar {
        display: block;
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
        padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px) * 0);
    }

    .app-header__title {
        font-size: 0.95rem;
    }

    .nav-link,
    .sidebar-ai {
        min-height: 2.75rem;
    }

    .page-header__actions {
        width: 100%;
    }

    .page-header__actions>.btn-primary,
    .page-header__actions>.btn-secondary,
    .page-header__actions>.btn-live-force,
    .page-header__actions form,
    .page-header__actions form .btn-primary,
    .page-header__actions form .btn-secondary,
    .page-header__actions form .btn-live-force,
    .page-header__actions a.btn-primary,
    .page-header__actions a.btn-secondary,
    .page-header__actions a.btn-live-force {
        width: 100%;
        justify-content: center;
    }

    .page-header__actions form {
        flex: 1 1 100%;
    }

    .confirm-modal {
        align-items: flex-end;
        padding: 0;
    }

    .confirm-modal__dialog,
    .confirm-modal__dialog--form {
        max-width: 100%;
        max-height: min(92dvh, 100%);
        border-radius: 1.15rem 1.15rem 0 0;
        padding: 1.25rem 1.15rem max(1.25rem, env(safe-area-inset-bottom));
    }

    .confirm-modal__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .confirm-modal__actions>* {
        min-width: 0;
        width: 100%;
    }

    .notif-panel__close,
    .planning-filters-panel__close {
        min-width: 2.75rem;
        min-height: 2.75rem;
        width: 2.75rem;
        height: 2.75rem;
    }

    .planning-filters-panel__dialog {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        border-radius: 1.15rem 1.15rem 0 0;
    }

    .toast-container {
        top: auto;
        right: 0.75rem;
        left: 0.75rem;
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        width: auto;
    }

    .user-menu,
    .actions-menu {
        min-width: min(18rem, calc(100vw - 1.5rem));
    }

    .step-row {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.5rem 0.75rem;
        padding: 0.75rem;
    }

    .planning-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .planning-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.15rem;
        scrollbar-width: thin;
    }

    .planning-tab {
        min-width: max-content;
        flex: 0 0 auto;
        padding: 0.6rem 0.9rem;
        font-size: 0.85rem;
    }

    .planning-filter-trigger {
        margin-left: 0;
        justify-content: center;
        min-height: 2.75rem;
    }

    .planning-toolbar>.btn-primary {
        width: 100%;
        justify-content: center;
    }

    .planning-checklist__row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .planning-checklist__meta {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .planning-panel {
        padding: 1rem;
    }

    .planning-summary__value {
        font-size: 1.45rem;
    }

    .planning-calendar__weekdays span {
        font-size: 0.68rem;
    }

    .planning-calendar__cell {
        min-height: 2.15rem;
        font-size: 0.78rem;
        border-radius: 0.45rem;
    }

    .planning-calendar__day,
    .planning-calendar__pill {
        min-width: 1.6rem;
        height: 1.6rem;
        padding: 0 0.2rem;
        font-size: 0.72rem;
    }

    .seating-plan-title {
        font-size: 1.05rem;
    }

    .seating-plan-canvas {
        min-width: 28rem;
        min-height: 18rem;
    }

    .seating-plan-table {
        width: 3.65rem;
        height: 3.65rem;
    }

    .seating-plan-vip {
        min-width: 5.25rem;
        width: auto;
        height: auto;
        padding: 0.4rem 0.65rem;
    }

    .seating-plan-label {
        font-size: 0.68rem;
    }

    .seating-plan-fraction {
        font-size: 0.6rem;
    }

    .wa-viewer {
        padding: 0;
        align-items: stretch;
    }

    .wa-viewer__dialog {
        width: 100%;
        max-width: 100%;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }

    .wa-viewer__image {
        max-height: calc(100dvh - 3.5rem);
    }

    .wa-viewer__pdf {
        height: calc(100dvh - 3.5rem);
    }

    .settings-folders__panel {
        padding: 1rem;
    }

    .emoji-picker__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .messenger__new-panel {
        right: 0;
        left: auto;
        width: min(18rem, calc(100vw - 2rem));
    }

    .ai-chat__header,
    .messenger__sidebar-head {
        gap: 0.5rem;
    }

    .ai-chat__title {
        font-size: 0.92rem;
    }

    .phone-input__row {
        flex-wrap: wrap;
    }

    .phone-input__dial {
        width: 100%;
    }
}

@media (max-width: 479.98px) {
    .app-shell__main {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0.9rem;
        padding-bottom: 1.1rem;
    }

    .table-shell th,
    .table-shell td {
        padding: 0.55rem 0.7rem;
        font-size: 0.8125rem;
    }

    .budget-category-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.35rem 0.75rem;
    }

    .budget-category-row> :nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .glass-panel.p-6,
    .app-shell__main .p-6 {
        padding: 1rem;
    }

    .seating-plan-stage {
        min-width: 0;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .subscription-card__tagline {
        min-height: 0;
    }

    .app-shell__main .text-3xl {
        font-size: 1.5rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    #comment-composer .btn-primary,
    #comment-composer .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 480px) and (max-width: 767.98px) {
    .app-header__title {
        font-size: 1.05rem;
    }

    .seating-plan-canvas {
        min-height: 22rem;
    }
}

@media (min-width: 640px) {
    .app-header__title {
        font-size: 1.25rem;
    }
}

@media (min-width: 768px) {
    .app-header__event-bar {
        display: none;
    }

    .sidebar-drawer-close {
        display: none;
    }

    .sidebar-backdrop {
        display: none !important;
    }
}

@media (max-width: 899.98px) {

    .messenger__composer,
    .ai-chat__composer {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    .messenger__bubble--media,
    .ai-chat__bubble--media {
        max-width: min(16.5rem, 82vw);
    }
}

@media (min-width: 1024px) {
    .app-header__title {
        font-size: 1.25rem;
    }
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 9999px;
    background: #f1f5f9;
    padding: 0.4rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #64748b;
}

.live-badge--on {
    background: #fff1f2;
    color: #be123c;
}

.live-badge__dot {
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    background: currentColor;
}

.live-badge--on .live-badge__dot {
    animation: header-live-dot-pulse 1.1s ease-in-out infinite;
}

.live-stage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 0.75rem 0.9rem;
}

.live-stage--current {
    border-color: rgba(234, 88, 12, 0.45);
    background: #fff7ed;
}

.live-stage--done {
    opacity: 0.72;
}

.live-guest-list {
    max-height: 22rem;
    overflow: auto;
}

.live-guest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    padding: 0.65rem 0.8rem;
}

.live-guest--arrived {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

@media (prefers-reduced-motion: reduce) {
    .live-badge--on .live-badge__dot {
        animation: none;
    }
}

/* —— Inscription (stats invités) —— */
.guest-form-fields__badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.inscription-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.inscription-list-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-indigo);
    text-decoration: none;
}

.inscription-list-link:hover {
    text-decoration: underline;
}

.inscription-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
}

.inscription-status-badge__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: #94a3b8;
}

.inscription-status-badge--success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #047857;
}

.inscription-status-badge--success .inscription-status-badge__dot {
    background: #10b981;
}

.inscription-status-badge--warning {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.inscription-status-badge--warning .inscription-status-badge__dot {
    background: #f97316;
}

.inscription-status-badge--muted {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: #64748b;
}

.inscription-funnel__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.inscription-funnel__label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
}

.inscription-funnel__value {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.inscription-funnel__track {
    height: 0.7rem;
    overflow: hidden;
    border-radius: 999px;
    background: #f1f5f9;
}

.inscription-funnel__bar {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-indigo) 0%, var(--color-ai) 100%);
    min-width: 0.5rem;
    transition: width 0.25s ease;
}

.inscription-reminder-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.75rem 0.9rem;
}

.inscription-reminder-status {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.inscription-reminder-status--sent {
    background: #ecfdf5;
    color: #047857;
}

.inscription-reminder-status--planned {
    background: var(--color-lavender);
    color: var(--color-indigo);
}

.inscription-reminder-status--pending {
    background: #fff7ed;
    color: #c2410c;
}

.inscription-reminder-status--disabled {
    background: #f1f5f9;
    color: #64748b;
}

.inscription-reminder-disabled {
    border-radius: 0.85rem;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    padding: 0.9rem 1rem;
}

.inscription-reminder-cta {
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--color-indigo) 18%, transparent);
    background: color-mix(in srgb, var(--color-lavender) 55%, #fff);
    padding: 1rem 1.05rem;
}

.inscription-insight {
    border-radius: 0.9rem;
    border: 1px solid transparent;
    padding: 1rem 1.05rem;
}

.inscription-insight--info {
    border-color: color-mix(in srgb, var(--color-indigo) 20%, transparent);
    background: color-mix(in srgb, var(--color-lavender) 70%, #fff);
}

.inscription-insight--success {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.inscription-insight--warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

/* -------------------------------------------------------------------------- */
/* Documents — carte d’import drag & drop                                       */
/* -------------------------------------------------------------------------- */

.doc-upload {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.doc-upload[hidden] {
    display: none !important;
}

.doc-upload__header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.doc-upload__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    background: var(--color-lavender);
    color: var(--color-indigo);
    flex-shrink: 0;
}

.doc-upload__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.doc-upload__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-indigo);
    line-height: 1.3;
}

.doc-upload__subtitle {
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.doc-upload__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.doc-upload__actions {
    display: flex;
    justify-content: flex-end;
}

.doc-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 11.5rem;
    padding: 1.75rem 1.25rem;
    border-radius: 1rem;
    border: 1.5px dashed color-mix(in srgb, var(--color-indigo) 22%, #cbd5e1);
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--color-lavender) 80%, transparent), transparent 70%),
        linear-gradient(180deg, #fafbfd 0%, #f4f5f9 100%);
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
    outline: none;
}

.doc-dropzone:hover,
.doc-dropzone:focus-visible {
    border-color: color-mix(in srgb, var(--color-orange) 55%, #cbd5e1);
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1), 0 12px 28px rgba(24, 21, 65, 0.06);
}

.doc-dropzone:focus-visible {
    border-color: var(--color-orange);
}

.doc-dropzone.is-dragging {
    border-color: var(--color-orange);
    border-style: solid;
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, rgba(234, 88, 12, 0.1), transparent 65%),
        linear-gradient(180deg, #fff7ed 0%, #fff 100%);
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.14), 0 16px 36px rgba(234, 88, 12, 0.1);
    transform: scale(1.01);
}

.doc-dropzone.has-file {
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-indigo) 18%, #e5e7eb);
    background: #fff;
    min-height: auto;
    padding: 1rem 1.15rem;
    align-items: stretch;
}

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

.doc-dropzone__idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.doc-dropzone__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 0.9rem;
    border-radius: 1rem;
    background: #fff;
    color: var(--color-orange);
    box-shadow:
        0 1px 0 rgba(24, 21, 65, 0.04),
        0 8px 20px rgba(24, 21, 65, 0.08);
    transition: transform 0.25s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.doc-dropzone.is-dragging .doc-dropzone__visual {
    transform: translateY(-4px);
    color: var(--color-indigo);
    box-shadow: 0 12px 28px rgba(234, 88, 12, 0.18);
}

.doc-dropzone__cloud {
    width: 1.5rem;
    height: 1.5rem;
}

.doc-dropzone__headline {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-indigo);
    line-height: 1.35;
}

.doc-dropzone__hint {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.doc-dropzone__browse {
    color: var(--color-orange);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.doc-dropzone__formats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1rem;
}

.doc-dropzone__formats span {
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-lavender) 70%, #fff);
    color: var(--color-indigo);
    padding: 0.2rem 0.65rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.doc-dropzone__file {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    position: relative;
    z-index: 2;
}

.doc-dropzone__file[hidden] {
    display: none;
}

.doc-dropzone__file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    background: var(--color-lavender);
    color: var(--color-indigo);
    flex-shrink: 0;
}

.doc-dropzone__file-icon.is-image {
    background: #fff7ed;
    color: var(--color-orange);
}

.doc-dropzone__file-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.doc-dropzone__file-meta {
    min-width: 0;
    flex: 1;
}

.doc-dropzone__file-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-indigo);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-dropzone__file-size {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-muted);
}

.doc-dropzone__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    border: 1px solid var(--color-border);
    background: #fff;
    color: #94a3b8;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.doc-dropzone__clear:hover {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #e11d48;
}

@media (max-width: 640px) {
    .doc-upload {
        padding: 1.15rem;
    }

    .doc-dropzone {
        min-height: 10rem;
        padding: 1.35rem 1rem;
    }

    .doc-upload__actions {
        justify-content: stretch;
    }

    .doc-upload__actions .btn-primary {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------- */
/* Page loader (navigation authentifiée)                                       */
/* -------------------------------------------------------------------------- */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.page-loader[hidden] {
    display: none;
}

.page-loader.is-active {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.page-loader__backdrop {
    position: absolute;
    inset: 0;
    background-color: #fff;
}

.page-loader__panel {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.75rem 2rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(24, 21, 65, 0.08);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 48px rgba(24, 21, 65, 0.12);
    animation: page-loader-in 0.28s ease-out;
}

.page-loader__spinner {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
}

.page-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2.5px solid transparent;
}

.page-loader__ring--indigo {
    border-top-color: var(--color-indigo);
    border-right-color: var(--color-indigo);
    animation: page-loader-spin 0.85s linear infinite;
}

.page-loader__ring--orange {
    inset: 0.35rem;
    border-bottom-color: var(--color-orange);
    border-left-color: var(--color-orange);
    animation: page-loader-spin 1.15s linear infinite reverse;
}

.page-loader__mark {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-indigo);
}

@keyframes page-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes page-loader-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
    }

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

@media (prefers-reduced-motion: reduce) {
    .page-loader,
    .page-loader__panel {
        transition: none;
        animation: none;
    }

    .page-loader__ring--indigo,
    .page-loader__ring--orange {
        animation: none;
        border-color: var(--color-indigo) var(--color-orange) var(--color-indigo) var(--color-orange);
    }

    .page-loader__ring--orange {
        border-color: var(--color-orange);
    }
}

/* Pages d'erreur HTTP (standalone, même fond que l'auth) */
.error-shell {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    overflow-x: clip;
    padding: 1.25rem 1rem 2rem;
    background-color: var(--color-indigo-deep);
}

.error-shell__backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--color-indigo-deep);
}

.error-page {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    display: flex;
    max-width: 32rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding-top: 0.5rem;
}

.error-page__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    align-self: center;
    text-decoration: none;
    color: #fff;
}

.error-page__brand-mark {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
}

.error-page__brand-name {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.error-page__card {
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.94);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 24px 60px rgba(24, 21, 65, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

@media (min-width: 640px) {
    .error-page__card {
        padding: 2rem 2rem 1.75rem;
    }
}

.error-page__visual {
    margin: 0 auto 1.25rem;
    display: flex;
    height: 5.5rem;
    width: 5.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--color-lavender);
    color: var(--color-indigo);
}

.error-page__visual svg {
    height: 4.25rem;
    width: 4.25rem;
}

.error-page__code {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid var(--color-border-soft);
    background: #fafbfc;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.error-page__code-value {
    font-variant-numeric: tabular-nums;
    color: var(--color-indigo);
    letter-spacing: 0.04em;
}

.error-page__title {
    margin: 0 0 0.625rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-ink);
}

.error-page__message {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-muted);
}

.error-page__hint {
    margin: 0.875rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-muted);
    opacity: 0.92;
}

.error-page__actions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 1.5rem;
}

@media (min-width: 480px) {
    .error-page__actions {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}

.error-page__actions .btn-primary,
.error-page__actions .btn-secondary {
    min-width: 10.5rem;
}

.error-page__footnote {
    margin: 0;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-on-dark-muted);
}

/* —— Sondage builder —— */
.survey-builder {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.survey-builder__scroll {
    flex: 1 1 auto;
    max-height: min(32rem, calc(100vh - 18rem));
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.25rem 0.35rem 0.25rem 0;
    overscroll-behavior: contain;
    border: 1px solid var(--color-panel-border, #e5e7eb);
    border-radius: 1rem;
    background: #f8f9fa;
}

/*
 * Cartes en blocs verticaux (col-6) :
 * elles se placent sur la ligne ; s’il n’y a plus de place,
 * la suivante descend sur une nouvelle ligne.
 */
.survey-builder__list {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    gap: 1rem;
    margin: 0;
    padding: 1rem;
    height: auto;
    list-style: none;
}

.survey-builder__col,
.survey-builder__col.col-6,
.survey-builder__col.col-md-6 {
    flex: 0 0 calc(50% - 0.5rem);
    width: calc(50% - 0.5rem) !important;
    max-width: calc(50% - 0.5rem) !important;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .survey-builder__col,
    .survey-builder__col.col-6,
    .survey-builder__col.col-md-6 {
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100% !important;
    }
}

.survey-builder__card {
    height: 100%;
    border: 1px solid var(--color-panel-border, #e5e7eb);
    box-sizing: border-box;
}

.survey-builder__card-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.survey-builder__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-panel-border, #e5e7eb);
    border-radius: 0.5rem;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.survey-builder__icon-btn:hover:not(:disabled) {
    background: #f8fafc;
    color: var(--color-indigo, #181541);
    border-color: #cbd5e1;
}

.survey-builder__icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.survey-builder__icon-btn--danger {
    color: #dc2626;
}

.survey-builder__icon-btn--danger:hover:not(:disabled) {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.survey-builder__add-card {
    display: flex;
    align-items: stretch;
    border-style: dashed;
    background: #fff;
    min-height: 14rem;
}

.survey-builder__add-card-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.survey-builder__add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.75rem;
    border-radius: 9999px;
    background: #eef0f8;
    color: var(--color-indigo, #181541);
}

.survey-builder__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-panel-border, #e5e7eb);
}

.survey-switch {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-accent, #ea580c);
}