/**
 * Piqo App — app.css
 * Styles de tous les composants Vue
 * Se base sur les variables de global.css
 */

/* ============================================================
   LAYOUT AUTH — écrans login/register/forgot
   ============================================================ */

.auth-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-lg);
    background: var(--color-light-bg);
}

.auth-container {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.auth-container--wide {
    max-width: 480px;
}

.auth-logo {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.auth-logo img {
    height: 48px;
    margin: 0 auto;
}

.auth-title {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--color-light-text);
    margin-bottom: var(--space-lg);
    text-align: center;
}

.auth-link {
    text-align: center;
    font-size: var(--font-sm);
    color: var(--color-light-text-sub);
    cursor: pointer;
    padding: var(--space-sm);
    transition: color var(--transition-fast);
}

.auth-link:hover {
    color: var(--color-primary);
}

.register-company-option {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--color-light-text);
    text-align: left;
    padding: 10px 12px;
    font-size: var(--font-base);
    font-weight: var(--font-medium);
    line-height: 1.35;
    cursor: pointer;
}

.register-company-option + .register-company-option {
    border-top: 1px solid #eef1f5;
}

.register-company-option:hover {
    background: #f7f9fc;
}

.register-company-option:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(19, 35, 53, 0.16);
}

/* ============================================================
   APP LAYOUT — structure principale
   ============================================================ */

.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
}

/* HEADER */
.app-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    position: relative;
    background: var(--color-dark-bg);
    border-bottom: 1px solid var(--color-dark-border);
}

.app-header--overlay {
    background: transparent;
    border-bottom-color: transparent;
}

.title-topbar-wrap {
    position: relative;
}

.title-topbar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    height: 76px;
    padding: calc(env(safe-area-inset-top) + 10px) var(--space-sm) var(--space-sm);
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: var(--space-sm);
    background: #071722;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    z-index: var(--z-sticky);
}

.title-topbar__spacer {
    height: calc(76px + env(safe-area-inset-top));
}

.title-topbar__back {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--color-dark-text);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.title-topbar__back svg {
    width: 22px;
    height: 22px;
}

.title-topbar__title {
    margin: 0;
    text-align: center;
    font-size: clamp(18px, 4.6vw, 24px);
    line-height: 1;
    font-weight: var(--font-bold);
    color: var(--color-dark-text);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-topbar__ghost {
    width: 40px;
    height: 40px;
}

.title-topbar__action {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: var(--color-dark-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.title-topbar__action span {
    font-size: 17px;
    font-weight: var(--font-bold);
    line-height: 1;
    transform: translateY(-1px);
}

.title-topbar__action:hover {
    transform: scale(1.04);
    border-color: rgba(255,255,255,0.36);
    background: rgba(255,255,255,0.14);
}

.app-header__avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-sm);
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    text-transform: uppercase;
}

.app-header__search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-dark-surface);
    border: 1px solid var(--color-dark-border);
    border-radius: var(--radius-full);
    padding: var(--space-sm) var(--space-md);
    color: var(--color-dark-text-sub);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.app-header__search:hover {
    border-color: var(--color-primary);
}

.app-header__search svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.app-header__actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.app-header__notif,
.app-header__settings {
    position: relative;
    background: none;
    border: none;
    color: var(--color-dark-text-sub);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
    display: flex;
    align-items: center;
}

.app-header__notif:hover,
.app-header__settings:hover {
    color: var(--color-dark-text);
}

.app-header__notif-count {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-primary-dark);
    border: 2px solid var(--color-dark-bg);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: var(--font-bold);
    line-height: 1;
}

/* MAIN */
.app-main {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
}

/* NAV BOTTOM */
.app-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: space-between;
    background:
        linear-gradient(180deg, rgba(17, 30, 53, 0.78), rgba(17, 30, 53, 0.9));
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    z-index: var(--z-sticky);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    overflow: visible;
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.app-nav::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    width: 110px;
    height: 64px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 70%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.app-nav__item {
    position: relative;
    flex: 1 1 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 6px 2px;
    background: none;
    border: none;
    color: var(--color-dark-text-sub);
    font-size: var(--font-xs);
    font-family: var(--font-family);
    cursor: pointer;
    transition: color var(--transition-fast);
    gap: 4px;
}

.app-nav__item--active {
    color: var(--color-dark-text);
}

.app-nav__item:hover {
    color: var(--color-dark-text);
}

.app-nav__item--static {
    cursor: default;
}

.app-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-bottom: 2px;
}

.app-nav__icon svg {
    width: 20px;
    height: 20px;
}

.app-nav__label {
    font-size: 10px;
    font-weight: var(--font-medium);
    line-height: 1;
}

.app-nav__item--center {
    transform: translateY(-10px);
    color: #ffffff;
}

.app-nav__item--center .app-nav__icon {
    width: 56px;
    height: 56px;
    margin-bottom: 0;
    border-radius: 50%;
    background: linear-gradient(160deg, #324c78 0%, #243a5f 55%, #1b2f52 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.app-nav__item--center .app-nav__icon svg {
    width: 22px;
    height: 22px;
}

.app-nav__item--center.app-nav__item--active .app-nav__icon {
    background: linear-gradient(160deg, #ff6f74 0%, #fc4f55 55%, #e03e44 100%);
}

.app-nav__item--center:hover .app-nav__icon {
    filter: brightness(1.08);
}

/* ============================================================
   FORMULAIRES
   ============================================================ */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    width: 100%;
}

.form-page {
    padding: var(--space-lg);
    max-width: 480px;
    margin: 0 auto;
}

.form-page__title {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--color-light-text);
    margin-bottom: var(--space-xl);
    margin-top: var(--space-md);
}

.label {
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--color-light-text-sub);
}

.form-note {
    font-size: var(--font-xs);
    color: var(--color-light-text-sub);
    margin: 0;
}

.input {
    width: 100%;
    padding: 14px var(--space-md);
    background: var(--color-light-surface);
    border: 1.5px solid var(--color-light-border);
    border-radius: var(--radius-md);
    color: var(--color-light-text);
    font-size: 16px; /* iOS anti-zoom : >= 16px sur tout champ texte */
    font-family: var(--font-family);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.input::placeholder {
    color: var(--color-light-text-sub);
    opacity: 0.7;
}

.input--textarea {
    resize: vertical;
    min-height: 80px;
}

/* Input dans contexte dark */
.screen-dark .input {
    background: var(--color-dark-input-bg);
    border-color: var(--color-dark-border);
    color: var(--color-dark-text);
}

.screen-dark .input::placeholder {
    color: var(--color-dark-text-sub);
}

.screen-dark .input:focus {
    border-color: var(--color-primary);
}

.input-hint {
    font-size: var(--font-xs);
    color: var(--color-light-text-sub);
    margin-top: calc(var(--space-xs) * -1);
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--font-sm);
    color: var(--color-light-text-sub);
    cursor: pointer;
    line-height: 1.5;
}

.checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    margin-top: 2px;
    cursor: pointer;
}

.link {
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

/* ============================================================
   BOUTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 14px var(--space-xl);
    border-radius: var(--radius-full);
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    font-family: var(--font-family);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn--full {
    width: 100%;
}

.btn--primary {
    background: var(--color-primary);
    color: #fff;
}

.btn--primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(252, 79, 85, 0.4);
}

.btn--secondary {
    background: transparent;
    color: var(--color-light-text);
    border: 1.5px solid var(--color-light-border);
}

.btn--secondary:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.screen-dark .btn--secondary {
    color: var(--color-dark-text);
    border-color: var(--color-dark-border);
}

.screen-dark .btn--secondary:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--ghost {
    background: transparent;
    color: var(--color-dark-text-sub);
    border: 1.5px solid var(--color-dark-border);
}

.btn--ghost:hover:not(:disabled) {
    color: var(--color-dark-text);
    border-color: var(--color-dark-text-sub);
}

.btn--outline-light {
    background: transparent;
    color: var(--color-dark-text);
    border: 1px solid rgba(240, 244, 255, 0.78);
}

.btn--outline-light:hover:not(:disabled) {
    border-color: #ffffff;
    color: #ffffff;
}

.btn--sm {
    padding: 8px var(--space-md);
    font-size: var(--font-sm);
}

.btn-back {
    background: none;
    border: none;
    font-size: var(--font-xl);
    color: var(--color-light-text-sub);
    cursor: pointer;
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
    display: inline-flex;
    align-items: center;
    transition: color var(--transition-fast);
}

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

.btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-sm);
    font-family: var(--font-family);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.btn-icon {
    background: none;
    border: none;
    color: var(--color-dark-text-sub);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    display: inline-flex;
    transition: color var(--transition-fast);
}

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

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

.alert {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    line-height: 1.5;
}

.alert--success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.alert--error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.alert--warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.alert-card {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.alert-card:hover {
    opacity: 0.85;
}

.alert-card--warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ============================================================
   BADGES & STATUTS
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    white-space: nowrap;
}

.badge--active,
.badge--approved,
.badge--done {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
}

.badge--pending,
.badge--pending_review {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning);
}

.badge--in_progress {
    background: rgba(59, 130, 246, 0.15);
    color: var(--color-info);
}

.badge--revision_requested,
.badge--waiting_client {
    background: rgba(252, 79, 85, 0.15);
    color: var(--color-primary);
}

.badge--cancelled,
.badge--suspended {
    background: rgba(107, 114, 128, 0.15);
    color: var(--color-light-text-sub);
}

.badge--delay_requested {
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

.badge--auto_approved {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success);
}

/* ============================================================
   SECTIONS & HEADERS
   ============================================================ */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.section-header__title {
    font-size: var(--font-lg);
    font-weight: var(--font-bold);
    color: var(--color-dark-text);
}

.section-header__link {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-sm);
    font-family: var(--font-family);
    cursor: pointer;
    padding: 0;
    font-weight: var(--font-medium);
}

.section-title {
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: var(--color-dark-text-sub);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-xs);
}

.screen-light .section-title {
    color: var(--color-light-text-sub);
}

.view-header {
    margin-bottom: var(--space-xl);
}

.view-header__title {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--color-dark-text);
    margin-bottom: var(--space-xs);
}

.view-header__sub {
    color: var(--color-dark-text-sub);
    font-size: var(--font-sm);
}

.view-header__hint {
    margin-top: var(--space-sm);
    font-size: var(--font-xs);
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.dashboard__greeting {
    margin-bottom: var(--space-2xl);
}

.dashboard__greeting-title {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--color-dark-text);
    line-height: 1.2;
}

.dashboard__greeting-sub {
    color: var(--color-dark-text-sub);
    font-size: var(--font-sm);
    margin-top: var(--space-xs);
}

.dashboard__section {
    margin-bottom: var(--space-2xl);
}

/* ============================================================
   DASHBOARD V2
   ============================================================ */

.dashboard-v2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.dashboard-v2__greeting {
    margin-top: var(--space-sm);
}

.dashboard-v2__title {
    font-size: clamp(1.6rem, 5.6vw, 2.1rem);
    line-height: 1.05;
}

.dashboard-v2__sub {
    margin-top: var(--space-sm);
    color: rgba(240, 244, 255, 0.9);
    font-size: clamp(0.92rem, 3.6vw, 1.2rem);
    line-height: 1.25;
}

.dashboard-v2__coins {
    min-height: 104px;
    border-radius: 30px;
    padding: 0 16px 0 0;
    background: linear-gradient(180deg, #110d20 0%, #7a0000 100%);
    border: 1px solid rgba(255,255,255,0.08);
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
}

.dashboard-v2__coins-badge {
    width: 110px;
    height: 100%;
    min-height: 104px;
    background-image: url("../img/piqocoin-home-element.png");
    background-repeat: no-repeat;
    background-size: auto 96%;
    background-position: 8px center;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
}

.dashboard-v2__coins-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    padding: 8px 0;
}

.dashboard-v2__coins-label {
    font-size: clamp(0.96rem, 3.2vw, 1.36rem);
    line-height: 1.05;
}

.dashboard-v2__coins-value {
    font-size: clamp(1.85rem, 7.2vw, 2.62rem);
    font-weight: var(--font-bold);
    line-height: 1.05;
}

.dashboard-v2__coins-level {
    font-size: clamp(1.15rem, 4.3vw, 1.85rem);
    line-height: 1.05;
}

.dashboard-v2__grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.dashboard-v2__grid-checkpoint {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-md);
    align-items: stretch;
}

.dashboard-card {
    background: #07243b;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 26px;
    padding: var(--space-lg);
}

.dashboard-card--clickable {
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dashboard-card--clickable:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}

.dashboard-card--compact {
    min-height: 188px;
}

.dashboard-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.dashboard-card__title {
    font-size: clamp(1.05rem, 3.8vw, 1.35rem);
    font-weight: var(--font-medium);
}

.dashboard-v2__month {
    font-size: clamp(1.4rem, 5.2vw, 1.9rem);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-sm);
}

.dashboard-v2__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.dashboard-v2__list-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: var(--space-sm);
    font-size: clamp(0.92rem, 3vw, 1.08rem);
}

.dashboard-v2__list-row:first-child {
    border-top: none;
    padding-top: 0;
}

.dashboard-v2__list-row--muted {
    color: var(--color-dark-text-sub);
}

.dashboard-v2__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: rgba(0,0,0,0.24);
}

.dashboard-v2__day--primary {
    background: var(--color-primary);
    color: #fff;
}

.dashboard-v2__folder {
    width: 22px;
    height: 17px;
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 3px;
    position: relative;
}

.dashboard-v2__folder::before {
    content: '';
    position: absolute;
    top: -7px;
    left: -2px;
    width: 10px;
    height: 8px;
    border-top: 2px solid rgba(255,255,255,0.9);
    border-left: 2px solid rgba(255,255,255,0.9);
    border-right: 2px solid rgba(255,255,255,0.9);
    border-radius: 3px 3px 0 0;
}

.dashboard-v2__bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.dashboard-v2__bullets li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: clamp(0.98rem, 3.2vw, 1.2rem);
}

.dashboard-v2__bullets--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md) var(--space-lg);
}

.dashboard-v2__dot {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.92);
    border-radius: var(--radius-full);
}

.dashboard-v2__checkpoint-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.dashboard-v2__checkpoint-row--single {
    grid-template-columns: 1fr;
}

.dashboard-v2__kpi-label {
    margin-bottom: var(--space-xs);
    font-size: clamp(0.9rem, 3.1vw, 1.05rem);
}

.dashboard-v2__kpi-value {
    margin-top: var(--space-xs);
    font-size: clamp(1.05rem, 3.6vw, 1.3rem);
}

.dashboard-v2__kpi-value--exceeded {
    color: var(--color-error);
    font-weight: 700;
}

.dashboard-v2__kpi-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: rgba(239, 68, 68, 0.18);
    color: var(--color-error);
    font-size: clamp(0.62rem, 2.4vw, 0.72rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    vertical-align: middle;
}

.dashboard-v2__validation-value {
    font-size: clamp(0.95rem, 3.1vw, 1.12rem);
    margin-top: var(--space-md);
}

.dashboard-v2__validation-box {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-sm);
}

.dashboard-v2__validation-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(240, 244, 255, 0.82);
}

.dashboard-v2__validation-empty-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(79, 202, 172, 0.9);
    color: #4fcaac;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}

.dashboard-v2__validation-empty-text {
    font-size: clamp(0.84rem, 3vw, 0.98rem);
    line-height: 1.2;
}

/* Ancre le ruban .stats-v3__demo-ribbon (réutilisé depuis la page Statistiques)
   en coin de la carte "Statistiques de campagne" du dashboard. */
.dashboard-v2__stats-card {
    position: relative;
}

.dashboard-v2__stats-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: clamp(0.96rem, 3.2vw, 1.15rem);
    margin-bottom: var(--space-sm);
}

.dashboard-v2__stats-delta {
    color: #4fcaac;
    font-weight: var(--font-semibold);
}

.dashboard-v2__chart-wrap {
    margin-top: var(--space-sm);
}

.mini-area-chart {
    width: 100%;
    height: 190px;
    display: block;
}

.mini-area-chart__area {
    fill: rgba(78, 119, 145, 0.52);
}

.mini-area-chart__line {
    fill: none;
    stroke: #4fcaac;
    stroke-width: 2;
}

.dashboard-v2__chart-labels {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    color: rgba(240,244,255,0.48);
    font-size: clamp(0.82rem, 2.7vw, 0.95rem);
    margin-top: var(--space-xs);
}

.dashboard-v2__loading {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ============================================================
   TASKS SCREEN
   ============================================================ */

.tasks-screen {
    display: flex;
    flex-direction: column;
}

.tasks-tab-panels {
    display: flex;
    flex-direction: column;
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.tasks-tab-switch-enter-active,
.tasks-tab-switch-leave-active {
    transition: opacity 240ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tasks-tab-switch-enter-from {
    opacity: 0;
    transform: translateY(8px);
}

.tasks-tab-switch-enter-to {
    opacity: 1;
    transform: translateY(0);
}

.tasks-tab-switch-leave-from {
    opacity: 1;
    transform: translateY(0);
}

.tasks-tab-switch-leave-to {
    opacity: 0;
    transform: translateY(-8px);
}

.tasks-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    margin-bottom: var(--space-xl);
    background: linear-gradient(180deg, rgba(7, 31, 52, 0.95), rgba(3, 24, 40, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.tasks-segment__item {
    border: none;
    border-radius: 999px;
    padding: 10px 12px;
    color: rgba(240, 244, 255, 0.55);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tasks-segment__item:not(.tasks-segment__item--active):hover {
    color: rgba(240, 244, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
}

.tasks-segment__item--active {
    color: #ffffff;
    background: var(--color-primary);
    box-shadow: 0 2px 10px rgba(252, 79, 85, 0.4);
    font-weight: var(--font-semibold);
}

.tasks-group {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-xl);
}

.tasks-group--done {
    margin-top: calc(var(--space-3xl) + var(--space-xl));
}

.tasks-group__title {
    margin: 0 0 var(--space-lg);
    font-size: clamp(1.72rem, 7.4vw, 2.25rem);
    line-height: 1.04;
    font-weight: var(--font-bold);
    color: var(--color-dark-text);
}

.tasks-rows {
    border-top: 1px solid rgba(255, 255, 255, 0.68);
}

.tasks-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-sm);
    min-height: 76px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.68);
    position: relative;
    overflow: hidden;
}

.tasks-row__main {
    min-width: 0;
}

.tasks-row__label {
    margin: 0;
    color: var(--color-dark-text);
    font-size: clamp(1rem, 4.3vw, 1.95rem);
    line-height: 1.15;
}

.tasks-row__sub {
    margin: 4px 0 0;
    color: rgba(240, 244, 255, 0.68);
    font-size: clamp(0.78rem, 3.15vw, 1.08rem);
    line-height: 1.15;
}

.tasks-row__label--done {
    text-decoration: line-through;
    color: rgba(240, 244, 255, 0.9);
}

.task-check {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1.6px solid rgba(240, 244, 255, 0.95);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all var(--transition-fast);
}

.task-check--open:disabled {
    opacity: 0.9;
    cursor: default;
}

.task-check--clickable {
    cursor: pointer;
}

.task-check--clickable:hover:not(:disabled) {
    background: rgba(240, 244, 255, 0.14);
    transform: scale(1.03);
}

.task-progress-badge {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1.6px solid rgba(240, 244, 255, 0.48);
    background: rgba(240, 244, 255, 0.08);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.task-progress-badge::before {
    content: '';
    width: 15px;
    height: 15px;
    border: 2px solid rgba(79, 202, 172, 0.9);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-radius: 999px;
    transform: rotate(-25deg);
}

.task-check--done {
    border-color: rgba(240, 244, 255, 0.96);
    background: rgba(240, 244, 255, 0.96);
}

.task-check--pop {
    animation: task-check-pop 520ms cubic-bezier(0.2, 0.95, 0.25, 1.15);
}

.tasks-row--just-done {
    animation: task-row-flash 980ms ease-out;
}

.tasks-row--just-done::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(240, 244, 255, 0.18) 48%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-120%);
    animation: task-row-sheen 860ms ease-out;
    pointer-events: none;
}

.task-jump-out-leave-active {
    transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease;
}

.task-jump-out-enter-active {
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
}

.task-jump-out-enter-from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
}

.task-jump-out-enter-to {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.task-jump-out-leave-from {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.task-jump-out-leave-to {
    opacity: 0;
    transform: translateY(-22px) scale(0.95);
}

.task-jump-out-move {
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.task-jump-in-enter-active {
    animation: task-row-jump-in 560ms cubic-bezier(0.2, 0.88, 0.22, 1.14);
}

.task-jump-in-leave-active {
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 260ms ease;
}

.task-jump-in-leave-from {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.task-jump-in-leave-to {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
}

.task-jump-in-enter-from {
    opacity: 0;
    transform: translateY(-24px) scale(0.92);
}

.task-jump-in-enter-to {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.task-jump-in-move {
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.task-progress-badge {
    animation: task-progress-badge-breathe 2.2s ease-in-out infinite;
}

.task-progress-badge::before {
    animation: task-progress-arc-spin 1.6s linear infinite;
    transform-origin: center;
}

.task-progress-badge::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(79, 202, 172, 0.95);
    box-shadow: 0 0 0 0 rgba(79, 202, 172, 0.55);
    animation: task-progress-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes task-row-jump-in {
    0% {
        opacity: 0;
        transform: translateY(-24px) scale(0.92);
    }
    58% {
        opacity: 1;
        transform: translateY(5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes task-check-pop {
    0% {
        transform: scale(0.72);
        box-shadow: 0 0 0 0 rgba(240, 244, 255, 0.6);
    }
    62% {
        transform: scale(1.12);
        box-shadow: 0 0 0 11px rgba(240, 244, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(240, 244, 255, 0);
    }
}

@keyframes task-row-flash {
    0% {
        background: rgba(240, 244, 255, 0.05);
    }
    100% {
        background: transparent;
    }
}

@keyframes task-progress-arc-spin {
    from {
        transform: rotate(-25deg);
    }
    to {
        transform: rotate(335deg);
    }
}

@keyframes task-progress-dot-pulse {
    0%,
    100% {
        transform: scale(0.85);
        box-shadow: 0 0 0 0 rgba(79, 202, 172, 0.55);
        opacity: 0.92;
    }
    60% {
        transform: scale(1.06);
        box-shadow: 0 0 0 8px rgba(79, 202, 172, 0);
        opacity: 1;
    }
}

@keyframes task-progress-badge-breathe {
    0%,
    100% {
        background: rgba(240, 244, 255, 0.08);
        border-color: rgba(240, 244, 255, 0.48);
    }
    50% {
        background: rgba(79, 202, 172, 0.13);
        border-color: rgba(79, 202, 172, 0.52);
    }
}

@keyframes task-row-sheen {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .task-check--pop,
    .tasks-row--just-done,
    .tasks-row--just-done::after,
    .task-jump-in-enter-active,
    .task-progress-badge,
    .task-progress-badge::before,
    .task-progress-badge::after {
        animation: none;
    }

    .task-jump-out-enter-active,
    .task-jump-out-leave-active,
    .task-jump-out-move,
    .task-jump-in-leave-active,
    .task-jump-in-move,
    .tasks-tab-switch-enter-active,
    .tasks-tab-switch-leave-active {
        transition: none;
    }
}

/* ============================================================
   TABS (shared)
   ============================================================ */

.tabs {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    background: var(--color-dark-surface);
    border-radius: var(--radius-md);
    padding: var(--space-xs);
    border: 1px solid var(--color-dark-border);
}

.tabs--secondary {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: var(--space-md);
}

.tabs__item {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    font-family: var(--font-family);
    color: var(--color-dark-text-sub);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    white-space: nowrap;
}

.tabs__item--active {
    background: var(--color-primary);
    color: #fff;
}

.tabs__item:not(.tabs__item--active):hover {
    color: var(--color-dark-text);
}

.tabs--secondary .tabs__item {
    background: transparent;
    flex: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
}

.tabs--secondary .tabs__item--active {
    background: transparent;
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* ============================================================
   EVENTS
   ============================================================ */

.event-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.event-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-dark-surface);
    border: 1px solid var(--color-dark-border);
    border-radius: var(--radius-md);
}

.event-card--today {
    border-color: rgba(252, 79, 85, 0.3);
    background: rgba(252, 79, 85, 0.05);
}

.event-card__date {
    font-size: var(--font-xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.event-card__time {
    font-size: var(--font-xs);
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    min-width: 40px;
    flex-shrink: 0;
}

.event-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.event-card__title {
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    color: var(--color-dark-text);
}

.event-card__location {
    font-size: var(--font-xs);
    color: var(--color-dark-text-sub);
}

/* ============================================================
   STATS
   ============================================================ */

.stats-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.stats-quick__item {
    background: var(--color-dark-surface);
    border: 1px solid var(--color-dark-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats-quick__value {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--color-dark-text);
}

.stats-quick__label {
    font-size: var(--font-xs);
    color: var(--color-dark-text-sub);
}

.stats-quick__delta {
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
}

.stats-quick__delta--up   { color: var(--color-success); }
.stats-quick__delta--down { color: var(--color-error); }

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
}

.stat-card {
    background: var(--color-dark-surface);
    border: 1px solid var(--color-dark-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-card--wide {
    grid-column: span 2;
}

.stat-card__value {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--color-dark-text);
}

.stat-card__label {
    font-size: var(--font-xs);
    color: var(--color-dark-text-sub);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-card__delta {
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
}

.stat-card__delta--up   { color: var(--color-success); }
.stat-card__delta--down { color: var(--color-error); }

/* DÉMOGRAPHIE */
.stats-demo {
    margin-top: var(--space-2xl);
}

.demo-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.demo-bar__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}

.demo-bar__label {
    font-size: var(--font-sm);
    color: var(--color-dark-text);
    font-weight: var(--font-medium);
}

.demo-bar__pct {
    font-size: var(--font-sm);
    color: var(--color-dark-text-sub);
}

.demo-bar__track {
    height: 6px;
    background: var(--color-dark-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.demo-bar__fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

/* STATS V3 */
.stats-v3 {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4.4vh, 44px);
    padding-top: clamp(8px, 2vh, 18px);
}

.stats-v3__hero {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-v3__title {
    margin: 0;
    font-size: clamp(2.15rem, 10vw, 3.35rem);
    line-height: 1.02;
    font-weight: var(--font-bold);
    letter-spacing: -0.02em;
    max-width: 12ch;
}

.stats-v3__updated {
    margin: 0;
    color: rgba(240, 244, 255, 0.86);
    font-size: clamp(0.95rem, 3.9vw, 1.2rem);
}

/* B-F5 : bandeau "Démo" factorisé, posé en coin haut droit de chaque carte
   de graphique quand les données sont de démonstration (is_demo). */
.stats-v3__demo-ribbon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-size: 0.68rem;
    font-weight: var(--font-semibold, 600);
    letter-spacing: 0.02em;
    color: #1a1206;
    background: var(--color-warning);
    border-radius: var(--radius-sm);
    pointer-events: none;
}

/* Variante non absolue du ruban, alignée avec le titre de section quand
   il n'y a pas de carte à bordure pour l'ancrer (démographie, acquisition). */
.stats-v3__demo-ribbon--inline {
    position: static;
    flex-shrink: 0;
    margin-top: 4px;
}

.stats-v3__loading {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.stats-v3__section {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

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

.stats-v3__section-title {
    margin: 0;
    font-size: clamp(1.6rem, 8vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: var(--font-medium);
}

.stats-v3__subsection {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stats-v3__sub-title {
    margin: 0;
    font-size: clamp(1.2rem, 5.8vw, 1.8rem);
    line-height: 1.08;
    font-weight: var(--font-medium);
    color: rgba(240, 244, 255, 0.95);
}

.stats-v3__carousel {
    position: relative;
}

.stats-v3__visibility-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.stats-v3__visibility-track:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-primary-light);
    border-radius: 20px;
}

.stats-v3__visibility-track::-webkit-scrollbar {
    display: none;
}

.stats-v3__visibility-card {
    position: relative;
    scroll-snap-align: center;
    background: rgba(4, 24, 43, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 14px 14px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.stats-v3__carousel-arrow {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: rgba(10, 22, 40, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-full);
    color: var(--color-dark-text);
    cursor: pointer;
    transform: translateY(-50%);
}

.stats-v3__carousel-arrow svg {
    width: 18px;
    height: 18px;
}

.stats-v3__carousel-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.stats-v3__carousel-arrow--prev {
    left: 2px;
}

.stats-v3__carousel-arrow--next {
    right: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .stats-v3__carousel-arrow.is-visible {
        display: inline-flex;
    }
}

.stats-v3__visibility-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 4px 12px;
}

.stats-v3__visibility-name {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(1rem, 4.5vw, 1.35rem);
    color: rgba(240, 244, 255, 0.95);
}

.stats-v3__visibility-card:has(.stats-v3__demo-ribbon) .stats-v3__visibility-name {
    padding-right: 52px;
}

.stats-v3__visibility-value {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(1.75rem, 8.3vw, 2.8rem);
    line-height: 1;
    font-weight: var(--font-medium);
}

.stats-v3__visibility-delta {
    grid-column: 2;
    grid-row: 2;
    color: #48c6a3;
    font-size: clamp(0.98rem, 4vw, 1.2rem);
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.stats-v3__visibility-delta.is-down {
    color: #fc7077;
}

.stats-v3__visibility-chart {
    display: flex;
    flex-direction: column;
    margin: 0 -14px;
}

.stats-v3__visibility-chart .interactive-chart {
    border-radius: 0;
}

.stats-v3__visibility-chart--flush {
    margin: 0;
}

.stats-v3__visibility-chart--flush .interactive-chart {
    border-radius: 14px 14px 0 0;
}

.stats-v3__visibility-chart--flush .stats-v3__x-labels {
    padding: 0;
}

.stats-v3__x-labels {
    margin-top: -2px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
    padding: 0 14px;
}

.stats-v3__x-labels span {
    text-align: center;
    font-size: clamp(0.8rem, 3vw, 1rem);
    color: rgba(240, 244, 255, 0.54);
}

.stats-v3__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.stats-v3__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: none;
    background: rgba(240, 244, 255, 0.34);
    padding: 0;
}

.stats-v3__dot.is-active {
    background: rgba(240, 244, 255, 0.95);
}

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

.stats-v3__quick-card {
    position: relative;
    background: rgba(4, 24, 43, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-v3__quick-title {
    margin: 0;
    font-size: clamp(0.86rem, 3.6vw, 1.05rem);
    font-weight: var(--font-medium);
}

.stats-v3__quick-card .stats-v3__demo-ribbon {
    top: 6px;
    right: 6px;
    padding: 2px 6px;
    font-size: 0.58rem;
}

.stats-v3__quick-card:has(.stats-v3__demo-ribbon) .stats-v3__quick-title {
    padding-right: 34px;
}

.stats-v3__quick-value {
    margin: 0;
    font-size: clamp(1.05rem, 4.6vw, 1.4rem);
    line-height: 1.2;
    color: rgba(240, 244, 255, 0.95);
}

.stats-v3__quick-delta {
    margin: 0;
    font-size: clamp(0.92rem, 3.8vw, 1.1rem);
    color: #48c6a3;
}

.stats-v3__quick-delta.is-down {
    color: #fc7077;
}

.stats-v3__gender-wrap {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 18px;
    align-items: center;
}

.stats-v3__gender-chart {
    width: 104px;
    height: 104px;
    border-radius: 999px;
    background: rgba(4, 24, 43, 0.44);
}

.stats-v3__gender-legend {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stats-v3__gender-line {
    position: relative;
    text-align: right;
    font-size: clamp(0.92rem, 3.6vw, 1.1rem);
    color: rgba(240, 244, 255, 0.9);
    border-bottom: 1px solid rgba(240, 244, 255, 0.24);
    padding-bottom: 6px;
}

.stats-v3__ages {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}

.stats-v3__age-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.stats-v3__age-value {
    font-size: clamp(0.95rem, 3.6vw, 1.1rem);
    color: rgba(240, 244, 255, 0.9);
}

.stats-v3__age-bar {
    width: min(40px, 80%);
    min-height: 40px;
    border-radius: 999px;
    background: #1f8fff;
}

.stats-v3__age-label {
    font-size: clamp(0.96rem, 3.7vw, 1.24rem);
    color: rgba(240, 244, 255, 0.94);
    white-space: nowrap;
}

.stats-v3__bar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-v3__bar-row {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 10px;
    align-items: center;
}

.stats-v3__bar-name {
    font-size: clamp(1rem, 4vw, 1.24rem);
}

.stats-v3__bar-track {
    width: 100%;
    height: 16px;
    border-radius: 999px;
    background: rgba(31, 143, 255, 0.14);
    overflow: hidden;
}

.stats-v3__bar-fill {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #1f8fff;
}

.stats-v3__bar-value {
    min-width: 42px;
    text-align: right;
    font-size: clamp(0.98rem, 3.9vw, 1.2rem);
    color: rgba(240, 244, 255, 0.92);
}

.stats-v3__acq-head {
    margin-top: -4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: clamp(1.1rem, 4.6vw, 1.45rem);
}

.stats-v3__acq-delta {
    color: #48c6a3;
    font-size: clamp(1rem, 4vw, 1.24rem);
}

.interactive-chart {
    position: relative;
    width: 100%;
    height: 166px;
    border-radius: 14px;
    overflow: hidden;
    touch-action: pan-x;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.interactive-chart__svg {
    width: 100%;
    height: 100%;
    display: block;
}

.interactive-chart__area {
    fill: rgba(31, 143, 255, 0.16);
}

.interactive-chart__area--green {
    fill: rgba(79, 202, 172, 0.2);
}

.interactive-chart__line {
    fill: none;
    stroke: rgba(176, 195, 223, 0.95);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.interactive-chart__line--soft {
    stroke: rgba(176, 195, 223, 0.72);
}

.interactive-chart__cursor {
    stroke: rgba(240, 244, 255, 0.28);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.interactive-chart__dot {
    fill: #f0f4ff;
    stroke: #184f7d;
    stroke-width: 2;
}

.interactive-chart__tooltip {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    background: rgba(5, 18, 36, 0.75);
    border: 1px solid rgba(240, 244, 255, 0.12);
    border-radius: 10px;
    padding: 6px 9px;
    pointer-events: none;
}

.interactive-chart__tooltip-label {
    font-size: 0.72rem;
    color: rgba(240, 244, 255, 0.65);
}

.interactive-chart__tooltip-value {
    font-size: 0.82rem;
    color: rgba(240, 244, 255, 0.96);
    font-weight: var(--font-medium);
}

@media (max-width: 420px) {
    .stats-v3__quick-grid {
        gap: 8px;
    }

    .stats-v3__quick-card {
        padding: 10px 8px;
    }

    .stats-v3__gender-wrap {
        grid-template-columns: 88px 1fr;
        gap: 12px;
    }

    .stats-v3__gender-chart {
        width: 88px;
        height: 88px;
    }

    .stats-v3__bar-row {
        grid-template-columns: 72px 1fr auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stats-v3__visibility-track,
    .stats-v3__dot {
        scroll-behavior: auto;
    }
}

/* ============================================================
   VALIDATION (LIVRABLES)
   ============================================================ */

.validation-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.validation-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding-top: var(--space-md);
}

.validation-hero__title {
    font-size: clamp(2rem, 9.2vw, 2.7rem);
    line-height: 1.02;
    font-weight: var(--font-bold);
    color: #f0f4ff;
}

.validation-hero__text {
    font-size: clamp(0.98rem, 4.9vw, 1.65rem);
    line-height: 1.2;
    color: rgba(240, 244, 255, 0.95);
    max-width: 90%;
}

.validation-hero__bar {
    width: min(325px, 85%);
    height: 14px;
    border-radius: var(--radius-full);
    background: #0e4d89;
}

.validation-cta {
    width: 100%;
    border-radius: var(--radius-full);
    border: 1.6px solid transparent;
    background:
        linear-gradient(rgba(4, 35, 60, 0.92), rgba(4, 35, 60, 0.92)) padding-box,
        linear-gradient(90deg, #004dff 0%, #7b4bff 52%, #fc4f55 100%) border-box;
    color: var(--color-dark-text);
    font-size: clamp(1rem, 4.8vw, 1.6rem);
    font-weight: var(--font-medium);
    padding: 14px 16px;
    margin-top: var(--space-lg);
    cursor: pointer;
}

.validation-list {
    margin-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.34);
}

.validation-item {
    padding: var(--space-xl) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.34);
}

.validation-item__top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-sm);
    align-items: start;
}

.validation-item__title {
    margin: 0;
    font-size: clamp(1.2rem, 5.6vw, 2.1rem);
    line-height: 1.1;
    font-weight: var(--font-medium);
    color: var(--color-dark-text);
}

.validation-item__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.validation-item__status {
    color: #39c79f;
    font-size: clamp(0.9rem, 4vw, 1.5rem);
    font-weight: var(--font-medium);
}

.validation-item__days {
    color: var(--color-dark-text);
    font-size: clamp(1rem, 4.4vw, 1.7rem);
    white-space: nowrap;
}

.validation-item__days--urgent {
    color: #ff8f95;
}

.validation-item__desc {
    margin-top: var(--space-md);
    color: rgba(240, 244, 255, 0.86);
    font-size: clamp(0.98rem, 4.1vw, 1.55rem);
    line-height: 1.35;
}

.validation-item__feedback {
    margin-top: var(--space-sm);
    color: rgba(240, 244, 255, 0.74);
    font-size: var(--font-sm);
    line-height: 1.35;
}

.validation-item__comment {
    margin-top: var(--space-md);
}

.validation-item__comment .input {
    border-radius: 14px;
    padding: 11px 12px;
}

.validation-item__actions {
    margin-top: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-sm);
}

.validation-item__actions-left {
    display: contents;
}

.validation-item__actions .btn--sm {
    width: 100%;
    padding: 8px clamp(8px, 2vw, 14px);
    font-size: clamp(0.78rem, 2.9vw, 1rem);
    line-height: 1.1;
    white-space: nowrap;
}

.validation-item__approve {
    min-width: 0;
    grid-column: 3;
}

.validation-item__delay-note {
    margin-top: var(--space-sm);
    font-size: var(--font-sm);
    color: rgba(240, 244, 255, 0.74);
}

.validation-history {
    margin-top: var(--space-2xl);
    border-top: 1px solid rgba(255, 255, 255, 0.34);
}

.validation-history__title {
    margin: var(--space-lg) 0 var(--space-sm);
    font-size: var(--font-base);
    font-weight: var(--font-medium);
    color: rgba(240, 244, 255, 0.82);
}

.validation-history__row {
    padding: var(--space-md) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
}

.validation-history__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.validation-history__name {
    color: var(--color-dark-text);
    font-size: var(--font-lg);
}

.validation-history__comment {
    color: rgba(240, 244, 255, 0.66);
    font-size: var(--font-sm);
    line-height: 1.3;
}

.validation-history__status {
    font-size: var(--font-sm);
    font-weight: var(--font-medium);
    white-space: nowrap;
    margin-top: 2px;
}

.validation-history__status--approved,
.validation-history__status--auto_approved {
    color: #39c79f;
}

.validation-history__status--revision_requested {
    color: #ffd27e;
}

.validation-history__status--delay_requested {
    color: #83bbff;
}

.validation-reminder {
    margin-top: var(--space-lg);
    color: rgba(240, 244, 255, 0.84);
    font-size: var(--font-lg);
    line-height: 1.2;
}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */

.notif-list {
    display: flex;
    flex-direction: column;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-dark-border);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.notif-item:hover {
    opacity: 0.8;
}

.notif-item--unread .notif-item__title {
    font-weight: var(--font-semibold);
    color: var(--color-dark-text);
}

.notif-item__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    flex-shrink: 0;
    margin-top: 6px;
}

.notif-item__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-item__title {
    font-size: var(--font-sm);
    color: var(--color-dark-text-sub);
}

.notif-item__text {
    font-size: var(--font-xs);
    color: var(--color-dark-text-sub);
    opacity: 0.7;
}

.notif-item__time {
    font-size: var(--font-xs);
    color: var(--color-dark-text-sub);
    opacity: 0.6;
    flex-shrink: 0;
}

/* ============================================================
   CALENDRIER
   ============================================================ */

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
}

.calendar-nav__btn {
    background: var(--color-dark-surface);
    border: 1px solid var(--color-dark-border);
    border-radius: var(--radius-sm);
    color: var(--color-dark-text);
    font-size: var(--font-lg);
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.calendar-nav__btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.calendar-nav__month {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: var(--color-dark-text);
    text-transform: capitalize;
}

.calendar-section {
    margin-bottom: var(--space-2xl);
}

/* CALENDAR V2 */
.calendar-v2 {
    display: flex;
    flex-direction: column;
    gap: clamp(80px, 8vh, 100px);
    padding-top: clamp(12px, 3vh, 26px);
}

.calendar-v2__loading {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.calendar-v2__section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.calendar-v2__title {
    margin: 0;
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.02;
    font-weight: var(--font-bold);
    color: var(--color-dark-text);
}

.calendar-v2__list {
    border-top: none;
}

.calendar-v2__row {
    min-height: 62px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.62);
}

.calendar-v2__day {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.15rem, 4.2vw, 1.45rem);
    line-height: 1;
    color: rgba(240, 244, 255, 0.9);
}

.calendar-v2__day.is-today {
    background: #ff5a63;
    color: #fff;
}

.calendar-v2__name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(1rem, 4.2vw, 1.85rem);
    color: var(--color-dark-text);
}

.calendar-v2__meta {
    margin-left: var(--space-sm);
    text-align: right;
    white-space: nowrap;
    font-size: clamp(0.98rem, 4vw, 1.75rem);
    color: rgba(240, 244, 255, 0.9);
}

/* ============================================================
   PIQOCOINS
   ============================================================ */

.piqocoins-hero {
    background: linear-gradient(135deg, var(--color-dark-surface), rgba(252, 79, 85, 0.1));
    border: 1px solid rgba(252, 79, 85, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    margin-bottom: var(--space-2xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
}

.piqocoins-hero__badge {
    font-size: 48px;
}

.piqocoins-hero__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.piqocoins-hero__balance {
    font-size: var(--font-4xl);
    font-weight: var(--font-bold);
    color: var(--color-dark-text);
    line-height: 1;
}

.piqocoins-hero__label {
    font-size: var(--font-sm);
    color: var(--color-dark-text-sub);
}

.piqocoins-hero__level {
    display: inline-block;
    margin-top: var(--space-xs);
    padding: 4px var(--space-md);
    background: rgba(252, 79, 85, 0.15);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
}

.piqocoins-hero__progress {
    width: 100%;
}

.piqocoins-hero__next {
    font-size: var(--font-xs);
    color: var(--color-dark-text-sub);
    margin-top: var(--space-xs);
    display: block;
}

.piqo-onboarding {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    height: 100dvh;
    z-index: calc(var(--z-modal) + 8);
    background: linear-gradient(180deg, #061c2b 0%, #071722 100%);
}

.piqo-onboarding__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top) + clamp(68px, 14vh, 124px)) clamp(18px, 6vw, 40px) calc(env(safe-area-inset-bottom) + 16px);
}

.piqo-onboarding__content {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-end;
}

.piqo-onboarding__slide {
    width: 100%;
    max-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.piqo-onboarding__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.piqo-onboarding__title {
    font-size: clamp(1.72rem, 7vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: var(--font-bold);
    max-width: 12ch;
}

.piqo-onboarding__desc {
    font-size: clamp(0.94rem, 3.8vw, 1.36rem);
    line-height: 1.3;
    color: rgba(240, 244, 255, 0.92);
    max-width: 33ch;
}

.piqo-onboarding__accent {
    width: min(240px, 60%);
    height: 12px;
    border-radius: var(--radius-full);
    margin-top: var(--space-lg);
    background: linear-gradient(90deg, rgba(28, 117, 201, 0.95), rgba(28, 117, 201, 0.7));
}

.piqo-onboarding__points-list {
    list-style: none;
    margin-top: var(--space-xl);
    max-height: 45vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}

.piqo-onboarding__points-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.24);
    font-size: clamp(0.96rem, 3.9vw, 1.2rem);
    line-height: 1.2;
}

.piqo-onboarding__points-row strong {
    font-weight: var(--font-medium);
}

.piqo-onboarding__points-list::-webkit-scrollbar {
    width: 5px;
}

.piqo-onboarding__points-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
}

.piqo-onboarding__points-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.34);
    border-radius: var(--radius-full);
}

.piqo-onboarding__footer {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 5vh, 32px);
    padding-top: calc(clamp(12px, 3vh, 20px) + 20px);
}

.piqo-onboarding__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.piqo-onboarding__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.piqo-onboarding__dot {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: var(--radius-full);
    background: rgba(240,244,255,0.42);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.piqo-onboarding__dot--active {
    background: #ffffff;
    transform: scale(1.06);
}

.piqo-onboarding__nav {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.66);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

.piqo-onboarding__nav:disabled {
    opacity: 0;
    pointer-events: none;
}

.piqo-onboarding__nav:not(:disabled):hover {
    color: #fff;
    transform: scale(1.08);
}

.piqo-onboarding__cta {
    min-height: 62px;
    border-radius: var(--radius-full);
    font-size: clamp(1.05rem, 4.4vw, 1.55rem);
    font-weight: var(--font-medium);
}

.piqo-onboarding-forward-enter-active,
.piqo-onboarding-forward-leave-active,
.piqo-onboarding-backward-enter-active,
.piqo-onboarding-backward-leave-active {
    transition: opacity 320ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.piqo-onboarding-forward-enter-from,
.piqo-onboarding-backward-leave-to {
    opacity: 0;
    transform: translateX(20px) scale(0.995);
}

.piqo-onboarding-forward-leave-to,
.piqo-onboarding-backward-enter-from {
    opacity: 0;
    transform: translateX(-20px) scale(0.995);
}

.piqo-onboarding-overlay-enter-active,
.piqo-onboarding-overlay-leave-active {
    transition: opacity 220ms ease;
}

.piqo-onboarding-overlay-enter-from,
.piqo-onboarding-overlay-leave-to {
    opacity: 0;
}

.piqo-progress {
    width: 100%;
    --piqo-progress-height: 10px;
}

.piqo-progress__track {
    position: relative;
    width: 100%;
    height: var(--piqo-progress-height);
    border-radius: var(--radius-full);
    background: rgba(252, 79, 85, 0.26);
    overflow: hidden;
}

.piqo-progress__fill {
    position: relative;
    height: 100%;
    width: 0%;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 75%);
    transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: width;
}

.piqo-progress__fill--glow::after {
    content: '';
    position: absolute;
    top: -40%;
    left: -35%;
    width: 22%;
    height: 180%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.48), rgba(255,255,255,0));
    filter: blur(2px);
    transform: translateX(-180%);
    animation: progress-glow-sweep 2.9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes progress-glow-sweep {
    0%, 58% {
        transform: translateX(-180%);
        opacity: 0;
    }
    66% {
        opacity: 0.95;
    }
    85% {
        transform: translateX(620%);
        opacity: 0.7;
    }
    100% {
        transform: translateX(620%);
        opacity: 0;
    }
}

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

    .piqo-progress__fill--glow::after {
        animation: none;
    }
}

.rewards-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.reward-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-dark-surface);
    border: 1px solid var(--color-dark-border);
    border-radius: var(--radius-md);
}

.reward-card__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reward-card__title {
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--color-dark-text);
}

.reward-card__cost {
    font-size: var(--font-xs);
    color: var(--color-primary);
    font-weight: var(--font-semibold);
}

.reward-card__desc {
    font-size: var(--font-xs);
    color: var(--color-dark-text-sub);
}

.transactions-list {
    display: flex;
    flex-direction: column;
}

.transaction-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-dark-border);
    gap: var(--space-md);
}

.transaction-item__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.transaction-item__reason {
    font-size: var(--font-sm);
    color: var(--color-dark-text);
}

.transaction-item__date {
    font-size: var(--font-xs);
    color: var(--color-dark-text-sub);
}

.transaction-item__points {
    font-size: var(--font-base);
    font-weight: var(--font-bold);
    flex-shrink: 0;
}

.transaction-item__points--pos { color: var(--color-success); }
.transaction-item__points--neg { color: var(--color-error); }

/* ============================================================
   PIQOCOINS V2
   ============================================================ */

.piqocoins-home {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 10vw, 5rem);
}

.piqocoins-home__hero {
    border-radius: 26px;
    background-color: #1a1a34;
    background-image:
        linear-gradient(
            90deg,
            rgba(10, 18, 40, 0.08) 0%,
            rgba(26, 26, 52, 0.18) 38%,
            rgba(20, 19, 47, 0.58) 56%,
            rgba(23, 17, 41, 0.78) 68%,
            rgba(35, 18, 36, 0.84) 100%
        ),
        linear-gradient(180deg, rgba(26,26,52,0.18) 0%, rgba(36,23,45,0.24) 54%, rgba(105,16,25,0.46) 100%),
        var(--piqocoins-hero-image);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%, auto 145%;
    background-position: center center, center center, -6px 48%;
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-end;
    min-height: 190px;
    overflow: hidden;
}

.piqocoins-home__hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 55%;
    min-width: 132px;
    padding: var(--space-md) var(--space-sm) var(--space-md) var(--space-md);
    margin-left: 0;
}

.piqocoins-home__balance {
    font-size: clamp(1.34rem, 5.4vw, 2.22rem);
    line-height: 1.05;
    font-weight: var(--font-bold);
}

.piqocoins-home__balance-label {
    font-size: clamp(0.82rem, 3.1vw, 1.05rem);
    color: rgba(240,244,255,0.92);
    line-height: 1.15;
}

.piqocoins-home__level {
    margin-top: var(--space-sm);
    font-size: clamp(1.18rem, 4.9vw, 1.95rem);
    line-height: 1.12;
    font-weight: var(--font-bold);
}

.piqocoins-home__next {
    margin-top: 2px;
    font-size: clamp(0.82rem, 3.05vw, 1rem);
    line-height: 1.18;
    color: rgba(240,244,255,0.92);
}

.piqocoins-home__level-link {
    margin: 0;
    margin-top: var(--space-xs);
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.piqocoins-home__hero--skeleton {
    min-height: 170px;
    background: rgba(7, 27, 43, 0.55);
}

.piqocoins-home__hero--skeleton .skeleton {
    margin-bottom: 0;
    height: 100%;
}

.piqocoins-home__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.piqocoins-home__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.piqocoins-home__section-title {
    margin: 0;
    font-size: clamp(1.2rem, 5.1vw, 1.55rem);
    line-height: 1.14;
    font-weight: var(--font-regular);
    letter-spacing: -0.02em;
}

.piqocoins-home__link {
    border: none;
    background: transparent;
    color: rgba(240,244,255,0.9);
    text-decoration: underline;
    font-size: var(--font-base);
    line-height: 1.2;
    min-width: 82px;
    white-space: nowrap;
    text-align: right;
    cursor: pointer;
    padding: 0;
}

.piqocoins-home__rewards-skeleton {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: var(--space-md);
}

.piqocoins-home__rewards-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 46%);
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-xs);
}

.piqocoins-home__rewards-track::-webkit-scrollbar {
    height: 0;
}

.piqocoins-home__reward-card {
    min-height: 170px;
    border-radius: 24px;
    padding: var(--space-md);
    background: #061c2c;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    scroll-snap-align: start;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.piqocoins-home__reward-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.18);
}

.piqocoins-home__reward-card--disabled {
    opacity: 0.65;
}

.piqocoins-home__reward-card--photo {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.piqocoins-home__reward-card--photo::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(6, 28, 44, 0.35) 0%, rgba(6, 28, 44, 0.78) 62%, rgba(6, 28, 44, 0.94) 100%);
    pointer-events: none;
}

.piqocoins-home__reward-card--photo > * {
    position: relative;
    z-index: 1;
}

.piqocoins-home__reward-pill {
    border: 1px solid rgba(240,244,255,0.7);
    border-radius: var(--radius-full);
    padding: 6px 18px;
    font-size: clamp(1rem, 4.1vw, 1.25rem);
    line-height: 1;
}

.piqocoins-home__reward-title {
    margin: 0;
    font-size: clamp(1.05rem, 4.5vw, 1.55rem);
    line-height: 1.15;
    font-weight: var(--font-regular);
}

.piqocoins-home__dots-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.piqocoins-home__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.piqocoins-home__dot {
    width: 11px;
    height: 11px;
    border: none;
    border-radius: var(--radius-full);
    background: rgba(240,244,255,0.4);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.piqocoins-home__dot--active {
    background: #ffffff;
    transform: scale(1.06);
}

.piqocoins-home__dots-next {
    border: none;
    background: transparent;
    color: rgba(240,244,255,0.8);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.piqocoins-home__history {
    border-top: 1px solid rgba(255,255,255,0.1);
}

.piqocoins-home__history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid rgba(255,255,255,0.22);
}

.piqocoins-home__history-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.piqocoins-home__tx-icon {
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    flex-shrink: 0;
}

.piqocoins-home__tx-icon--earned {
    border-bottom: 20px solid #4fcaac;
}

.piqocoins-home__tx-icon--spent {
    border-top: 20px solid #ff5a63;
}

.piqocoins-home__tx-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.piqocoins-home__tx-meta strong {
    font-size: clamp(1.25rem, 5.2vw, 1.8rem);
    line-height: 1.05;
    font-weight: var(--font-medium);
}

.piqocoins-home__tx-meta small {
    font-size: clamp(0.96rem, 3.8vw, 1.2rem);
    line-height: 1.05;
    color: rgba(240,244,255,0.86);
}

.piqocoins-home__tx-value {
    font-size: clamp(1.4rem, 6vw, 2rem);
    line-height: 1;
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.piqocoins-home__tx-value.is-earned {
    color: var(--color-dark-text);
}

.piqocoins-home__tx-value.is-spent {
    color: #ffd6d9;
}

.piqocoins-home__empty {
    padding: var(--space-md) 0;
    color: var(--color-dark-text-sub);
}

.piqocoins-home__info {
    background: rgba(8, 33, 52, 0.86);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    padding: var(--space-xl) var(--space-lg);
}

.piqocoins-home__info h3 {
    margin: 0;
    font-size: clamp(1.15rem, 5vw, 1.45rem);
    line-height: 1.2;
    font-weight: var(--font-regular);
}

.piqocoins-home__info p {
    margin: var(--space-md) 0 0;
    color: rgba(240,244,255,0.9);
    font-size: clamp(1rem, 4vw, 1.3rem);
}

.piqocoins-home__link--inline {
    margin-top: var(--space-lg);
}

.piqocoins-levels {
    display: flex;
    flex-direction: column;
    gap: clamp(1.8rem, 6vw, 2.8rem);
}

.piqocoins-levels__summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.piqocoins-levels__summary-image {
    width: 150px;
    height: 150px;
    border-radius: 999px;
    object-fit: cover;
    object-position: center;
    align-self: center;
    border: 1px solid rgba(255,255,255,0.12);
}

.piqocoins-levels__summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.piqocoins-levels__summary-value {
    margin: 0;
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    line-height: 1;
    font-weight: var(--font-bold);
}

.piqocoins-levels__summary-title {
    margin: 0;
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    line-height: 1.02;
    font-weight: var(--font-bold);
}

.piqocoins-levels__summary-label {
    margin: 0;
    margin-top: 2px;
    font-size: clamp(1rem, 3.8vw, 1.22rem);
    line-height: 1.16;
    color: rgba(240,244,255,0.92);
}

.piqocoins-levels__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-md);
}

.piqocoins-levels__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.piqocoins-levels__image-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #061c2c;
}

.piqocoins-levels__image {
    width: 100%;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.piqocoins-levels__card.is-locked .piqocoins-levels__image {
    filter: brightness(0.5);
}

.piqocoins-levels__lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1;
}

.piqocoins-levels__lock-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.piqocoins-levels__meta {
    margin: 0;
    margin-top: 2px;
    font-size: clamp(1rem, 3.7vw, 1.2rem);
    line-height: 1.05;
}

.piqocoins-levels__title {
    margin: 0;
    font-size: clamp(1rem, 3.8vw, 1.24rem);
    line-height: 1.1;
}

.piqocoins-list-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.piqocoins-list-page__balance {
    font-size: var(--font-lg);
    color: rgba(240,244,255,0.9);
}

.piqocoins-list-page__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.piqocoins-list-page__items .skeleton--card {
    height: auto;
    aspect-ratio: 4 / 5;
    margin-bottom: 0;
}

.piqocoins-list-page__history {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.piqocoins-list-page__reward {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 4 / 5;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(7, 27, 43, 0.82);
}

.piqocoins-list-page__reward--disabled {
    opacity: 0.7;
}

.piqocoins-list-page__reward--photo {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.piqocoins-list-page__reward--photo::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(4, 15, 24, 0.55) 0%, rgba(4, 15, 24, 0.72) 45%, rgba(4, 15, 24, 0.92) 100%);
    pointer-events: none;
}

.piqocoins-list-page__reward--photo > * {
    position: relative;
    z-index: 1;
}

.piqocoins-list-page__reward-main {
    min-width: 0;
}

.piqocoins-list-page__reward-main strong {
    display: block;
    font-size: var(--font-lg);
    line-height: 1.2;
}

.piqocoins-list-page__reward-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: var(--space-xs);
    font-size: var(--font-xs);
    line-height: 1.35;
    color: var(--color-dark-text-sub);
}

.piqocoins-list-page__reward-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
}

.piqocoins-list-page__reward-side span {
    font-size: var(--font-lg);
    font-weight: var(--font-semibold);
    color: rgba(240,244,255,0.95);
}

.piqocoins-list-page__reward-side .btn {
    width: 100%;
}

.piqocoins-list-page__history-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding: var(--space-md) 0;
}

.piqocoins-list-page__history-main {
    display: flex;
    flex-direction: column;
}

.piqocoins-list-page__history-main strong {
    font-size: var(--font-lg);
}

.piqocoins-list-page__history-main small {
    color: var(--color-dark-text-sub);
    font-size: var(--font-sm);
}

.piqocoins-list-page__history-main p {
    margin-top: var(--space-xs);
    color: rgba(240,244,255,0.85);
    font-size: var(--font-sm);
}

.piqocoins-list-page__history-value {
    font-size: var(--font-xl);
    font-weight: var(--font-semibold);
    white-space: nowrap;
}

.piqocoins-list-page__history-value.is-earned {
    color: var(--color-dark-text);
}

.piqocoins-list-page__history-value.is-spent {
    color: #ffd6d9;
}

.piqocoins-list-page__empty {
    color: var(--color-dark-text-sub);
}

.confirm-popup {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 24);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.confirm-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.confirm-popup__panel {
    position: relative;
    width: min(420px, calc(100vw - 32px));
    border-radius: 20px;
    padding: var(--space-xl);
    background: linear-gradient(180deg, #0f2a41 0%, #081e31 100%);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 40px rgba(0,0,0,0.35);
}

.confirm-popup__title {
    margin: 0;
    font-size: clamp(1.2rem, 4.8vw, 1.65rem);
}

.confirm-popup__message {
    margin: var(--space-sm) 0 0;
    color: rgba(240,244,255,0.86);
    font-size: var(--font-base);
    line-height: 1.35;
}

.confirm-popup__actions {
    margin-top: var(--space-lg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.confirm-popup-enter-active,
.confirm-popup-leave-active {
    transition: opacity 180ms ease;
}

.confirm-popup-enter-from,
.confirm-popup-leave-to {
    opacity: 0;
}

@media (max-width: 420px) {
    .piqocoins-home__hero {
        min-height: 180px;
        background-size: 100% 100%, 100% 100%, auto 150%;
        background-position: center center, center center, -14px 48%;
    }

    .confirm-popup__actions {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   COMPTE
   ============================================================ */

.account-v2 {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3.5vh, 30px);
    padding-top: clamp(14px, 2.4vh, 26px);
}

.account-v2__profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.account-v2__avatar {
    width: clamp(94px, 24vw, 124px);
    height: clamp(94px, 24vw, 124px);
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.8rem, 6.2vw, 2.4rem);
    font-weight: 350;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.account-v2__name {
    margin: 0;
    font-size: clamp(2.2rem, 8.2vw, 3.5rem);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.account-v2__company {
    margin: 0;
    font-size: clamp(1.25rem, 4.7vw, 1.9rem);
    color: rgba(240, 244, 255, 0.92);
}

.account-v2__add-admin {
    align-self: flex-start;
    margin-top: 40px;
    min-height: 58px;
    padding-inline: 26px;
    font-size: clamp(1.05rem, 4.5vw, 1.55rem);
    border-width: 1.6px;
}

.account-v2__menu {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(240, 244, 255, 0.72);
}

.account-v2__item {
    width: 100%;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0 2px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(240, 244, 255, 0.72);
    color: var(--color-dark-text);
    text-align: left;
    cursor: pointer;
}

.account-v2__item-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.account-v2__icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(240, 244, 255, 0.94);
}

.account-v2__icon svg {
    width: 26px;
    height: 26px;
}

.account-v2__label {
    font-size: clamp(1.2rem, 4.8vw, 1.8rem);
    line-height: 1.2;
    color: rgba(240, 244, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-v2__chevron {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(240, 244, 255, 0.85);
}

.account-v2__chevron svg {
    width: 22px;
    height: 22px;
}

.account-v2__item:hover .account-v2__label,
.account-v2__item:hover .account-v2__chevron,
.account-v2__item:hover .account-v2__icon {
    color: #ffffff;
}

/* DETAILS COMPTE V3 */
.account-detail-v3 {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 3.8vh, 34px);
    padding-top: clamp(10px, 2vh, 20px);
}

.account-detail-v3__hero {
    display: flex;
    justify-content: center;
}

.account-detail-v3__avatar-wrap {
    position: relative;
}

.account-detail-v3__avatar {
    width: clamp(116px, 30vw, 154px);
    height: clamp(116px, 30vw, 154px);
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 7vw, 2.9rem);
    font-weight: 350;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.account-detail-v3__avatar-edit {
    position: absolute;
    right: -2px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(76, 26, 46, 0.9);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.account-detail-v3__avatar-edit svg {
    width: 18px;
    height: 18px;
}

.account-detail-v3__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.account-detail-v3__section-title {
    margin: 0;
    font-size: clamp(1.2rem, 5vw, 1.7rem);
    line-height: 1.1;
    font-weight: var(--font-medium);
    color: rgba(240, 244, 255, 0.95);
}

.account-detail-v3__separator {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(240, 244, 255, 0.05), rgba(240, 244, 255, 0.64), rgba(240, 244, 255, 0.05));
    margin: 8px 0;
}

.account-detail-v3__input {
    min-height: 58px;
    border-radius: 14px;
    background: rgba(7, 28, 44, 0.48);
    border: 1.4px solid rgba(240, 244, 255, 0.75);
    color: rgba(240, 244, 255, 0.97);
    font-size: clamp(1.02rem, 4.2vw, 1.3rem);
}

.account-detail-v3__input::placeholder {
    color: rgba(240, 244, 255, 0.58);
    opacity: 1;
}

.account-detail-v3__select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(240, 244, 255, 0.72) 50%),
        linear-gradient(135deg, rgba(240, 244, 255, 0.72) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% + 1px),
        calc(100% - 14px) calc(50% + 1px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.account-detail-v3 .alert {
    margin-bottom: 4px;
}

/* FACTURATION V3 */
.billing-v3 {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 5vh, 54px);
    padding-top: clamp(14px, 2.4vh, 24px);
}

.billing-v3__hero {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.billing-v3__title {
    margin: 0;
    font-size: clamp(1.9rem, 8.2vw, 2.7rem);
    line-height: 1.02;
    font-weight: var(--font-medium);
    letter-spacing: -0.02em;
}

.billing-v3__bar {
    margin-top: 8px;
    width: min(250px, 70%);
    height: 14px;
    border-radius: 999px;
    background: #0e4d89;
}

.billing-v3__section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.billing-v3__section-title {
    margin: 0;
    font-size: clamp(1.45rem, 6.6vw, 2.1rem);
    line-height: 1.05;
    font-weight: var(--font-medium);
}

.billing-v3__section-title--address {
    margin-top: 52px;
}

.billing-v3__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.billing-v3__input {
    min-height: 60px;
    border-radius: 14px;
    background: rgba(7, 28, 44, 0.48);
    border: 1.4px solid rgba(240, 244, 255, 0.75);
    color: rgba(240, 244, 255, 0.97);
    font-size: clamp(1.05rem, 4.3vw, 1.45rem);
}

.billing-v3__input::placeholder {
    color: rgba(240, 244, 255, 0.58);
    opacity: 1;
}

.billing-v3__bank-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.billing-v3__share {
    flex-shrink: 0;
}

.billing-v3__section--bank {
    margin-top: 84px;
}

.billing-v3__bank-list {
    border-top: 1px solid rgba(240, 244, 255, 0.66);
}

.billing-v3__bank-row {
    min-height: 82px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-md);
    align-items: center;
    border-bottom: 1px solid rgba(240, 244, 255, 0.66);
}

.billing-v3__bank-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.billing-v3__bank-label {
    color: rgba(240, 244, 255, 0.58);
    font-size: clamp(0.95rem, 3.8vw, 1.1rem);
}

.billing-v3__bank-value {
    color: rgba(240, 244, 255, 0.98);
    font-size: clamp(1.2rem, 4.8vw, 1.62rem);
    line-height: 1.2;
    word-break: break-word;
}

.billing-v3__copy {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(240, 244, 255, 0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.billing-v3__copy svg {
    width: 20px;
    height: 20px;
}

.billing-v3__copied {
    font-size: 0.82rem;
    color: #48c6a3;
    font-weight: var(--font-medium);
}

/* CENTRE D'ASSISTANCE */
.support-v2 {
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 4.6vh, 46px);
    padding-top: clamp(12px, 2.4vh, 24px);
}

.support-v2__hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.support-v2__title {
    margin: 0;
    font-size: clamp(2.25rem, 10vw, 3.5rem);
    line-height: 1.02;
    font-weight: var(--font-bold);
    letter-spacing: -0.02em;
}

.support-v2__sub {
    margin: 0;
    max-width: 18ch;
    color: rgba(240, 244, 255, 0.92);
    font-size: clamp(1.2rem, 5.1vw, 1.85rem);
    line-height: 1.18;
}

.support-v2__bar {
    margin-top: 12px;
    width: min(250px, 70%);
    height: 14px;
    border-radius: 999px;
    background: #0e4d89;
}

.support-v2__list {
    border-top: 1px solid rgba(240, 244, 255, 0.7);
}

.support-v2__item {
    border-bottom: 1px solid rgba(240, 244, 255, 0.7);
}

.support-v2__q {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--color-dark-text);
    text-align: left;
    min-height: 86px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 0 2px;
    cursor: pointer;
}

.support-v2__chevron {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(240, 244, 255, 0.9);
    transform: rotate(0deg);
    transition: transform var(--transition-base), color var(--transition-fast);
    flex-shrink: 0;
}

.support-v2__chevron svg {
    width: 24px;
    height: 24px;
}

.support-v2__item.is-open .support-v2__chevron {
    transform: rotate(90deg);
    color: #ffffff;
}

.support-v2__question {
    font-size: clamp(1.2rem, 5vw, 1.85rem);
    line-height: 1.2;
    color: rgba(240, 244, 255, 0.97);
}

.support-v2__answer-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 290ms cubic-bezier(0.22, 0.65, 0.22, 1);
}

.support-v2__answer-wrap.is-open {
    grid-template-rows: 1fr;
}

.support-v2__answer {
    min-height: 0;
    overflow: hidden;
    margin: 0 0 20px 42px;
    max-width: 95%;
    color: rgba(240, 244, 255, 0.9);
    font-size: clamp(1rem, 4.2vw, 1.5rem);
    line-height: 1.26;
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top left;
    transition: opacity 230ms ease, transform 280ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.support-v2__answer-wrap.is-open .support-v2__answer {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.support-v2__empty {
    margin: 20px 0;
    color: rgba(240, 244, 255, 0.76);
    font-size: clamp(1rem, 4.1vw, 1.4rem);
}

.support-v2__piqobot {
    padding: 0 0 var(--space-md);
}

.support-v2__piqobot-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px var(--space-md);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
}

.support-v2__piqobot-card:hover {
    background: rgba(255, 255, 255, 0.1);
}

.support-v2__piqobot-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--color-primary, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.support-v2__piqobot-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 2px;
}

.support-v2__piqobot-sub {
    font-size: 0.8rem;
    opacity: 0.55;
    margin: 0;
}

.support-v2__piqobot-card > svg:last-child {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.4;
}

/* INFO CARD (abonnement) */
.info-card {
    background: var(--color-light-surface);
    border: 1px solid var(--color-light-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-xl);
}

.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-light-border);
    font-size: var(--font-sm);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row__label {
    color: var(--color-light-text-sub);
}

.services-list {
    margin-top: var(--space-xl);
}

.service-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-light-border);
    font-size: var(--font-sm);
    color: var(--color-light-text);
}

.service-item__check {
    color: var(--color-success);
    font-weight: var(--font-bold);
}

.service-item__name {
    flex: 1;
}

.service-item__qty {
    color: var(--color-light-text-sub);
    font-size: var(--font-xs);
}

/* MON ABO V2 */
.subscription-v2 {
    display: flex;
    flex-direction: column;
    gap: clamp(34px, 8vw, 52px);
}

.subscription-v2__loading {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.subscription-v2__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.subscription-v2__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subscription-v2__meta-label {
    margin: 0;
    color: rgba(240, 244, 255, 0.9);
    font-size: clamp(1.1rem, 4.6vw, 1.5rem);
    line-height: 1.1;
    font-weight: var(--font-regular);
}

.subscription-v2__meta-value {
    margin: 0;
    color: rgba(240, 244, 255, 0.95);
    font-size: clamp(0.95rem, 3.9vw, 1.18rem);
    line-height: 1.25;
}

.subscription-v2__meta-value.is-active {
    color: #57d0ae;
}

.subscription-v2__meta-value.is-pending {
    color: #ffd687;
}

.subscription-v2__meta-value.is-suspended,
.subscription-v2__meta-value.is-cancelled {
    color: rgba(240, 244, 255, 0.78);
}

.subscription-v2__status-dot {
    display: inline-flex;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-left: 7px;
    background: currentColor;
    transform: translateY(-1px);
}

.subscription-v2__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.subscription-v2__section--cta {
    margin-top: -6px;
}

.subscription-v2__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
}

.subscription-v2__section-title {
    margin: 0;
    color: var(--color-dark-text);
    font-size: clamp(1.26rem, 5.2vw, 1.75rem);
    line-height: 1.1;
    font-weight: var(--font-medium);
}

.subscription-v2__usage {
    margin: 0;
    color: rgba(240, 244, 255, 0.88);
    font-size: clamp(0.9rem, 3.8vw, 1.1rem);
}

.subscription-v2__usage--exceeded {
    color: var(--color-error);
    font-weight: 700;
}

.subscription-v2__services {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.subscription-v2__service {
    background: rgba(7, 29, 47, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.subscription-v2__service-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
}

.subscription-v2__service-name,
.subscription-v2__service-count {
    margin: 0;
    font-size: clamp(0.95rem, 3.8vw, 1.12rem);
}

.subscription-v2__service-count {
    color: rgba(240, 244, 255, 0.84);
}

.subscription-v2__section-note {
    margin: calc(var(--space-xs) * -1) 0 var(--space-sm);
    color: rgba(240, 244, 255, 0.6);
    font-size: clamp(0.78rem, 3.1vw, 0.88rem);
    line-height: 1.4;
}

.subscription-v2__service-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.subscription-v2__service-bonus {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(240, 244, 255, 0.72);
    font-size: clamp(0.72rem, 2.9vw, 0.8rem);
    white-space: nowrap;
}

.subscription-v2__service-bonus-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.subscription-v2__service--exceeded {
    border-color: rgba(239, 68, 68, 0.55);
    background: rgba(54, 16, 22, 0.6);
}

.subscription-v2__service-count--exceeded {
    color: var(--color-error);
    font-weight: 700;
}

.subscription-v2__service-warning {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-error);
    font-size: clamp(0.8rem, 3.2vw, 0.92rem);
    font-weight: 600;
}

.subscription-v2__service-warning::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-error);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.subscription-v2__bonus-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.subscription-v2__bonus-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(8, 34, 53, 0.72);
}

.subscription-v2__bonus-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.subscription-v2__bonus-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.subscription-v2__bonus-content {
    min-width: 0;
}

.subscription-v2__bonus-title {
    margin: 0;
    color: var(--color-dark-text);
    font-size: clamp(0.95rem, 3.9vw, 1.1rem);
    line-height: 1.2;
}

.subscription-v2__bonus-sub {
    margin: 2px 0 0;
    color: rgba(240, 244, 255, 0.82);
    font-size: clamp(0.78rem, 3.2vw, 0.95rem);
    line-height: 1.25;
}

.subscription-v2__delivered-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 72%);
    gap: var(--space-sm);
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
}

.subscription-v2__delivered-track::-webkit-scrollbar {
    height: 0;
}

.subscription-v2__delivered-card {
    scroll-snap-align: start;
    min-height: 84px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(7, 29, 47, 0.7);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.subscription-v2__delivered-title {
    margin: 0;
    color: var(--color-dark-text);
    font-size: clamp(0.95rem, 3.9vw, 1.1rem);
    line-height: 1.2;
}

.subscription-v2__delivered-meta {
    margin: 0;
    color: rgba(240, 244, 255, 0.8);
    font-size: clamp(0.78rem, 3.1vw, 0.92rem);
    line-height: 1.2;
}

.subscription-v2__empty-inline {
    margin: 0;
    color: rgba(240, 244, 255, 0.78);
    font-size: var(--font-sm);
}

.subscription-v2__quote-btn {
    min-height: 56px;
    border-radius: 999px;
    font-size: clamp(1.22rem, 5vw, 1.58rem);
    font-weight: var(--font-medium);
    padding: 14px 18px;
    box-shadow: 0 10px 24px rgba(252, 79, 85, 0.24);
}

.subscription-v2__meta-value--highlight {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem);
    font-weight: var(--font-semibold);
    color: rgba(240, 244, 255, 1);
}

.subscription-v2__abo-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.subscription-v2__abo-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    background: rgba(7, 29, 47, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: var(--space-md);
}

.subscription-v2__abo-amount {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
    font-weight: var(--font-semibold);
    color: rgba(240, 244, 255, 0.96);
    white-space: nowrap;
}

.subscription-v2__abo-amount span {
    font-size: clamp(0.8rem, 3.2vw, 1rem);
    font-weight: var(--font-regular);
    color: rgba(240, 244, 255, 0.6);
    margin-left: 3px;
}

.subscription-v2__abo-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.subscription-v2__abo-end {
    font-size: clamp(0.82rem, 3.3vw, 1rem);
    color: rgba(240, 244, 255, 0.7);
}

/* CONTRACT FLOW */
.contract-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding-bottom: var(--space-3xl);
}

.contract-flow__loading {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contract-flow__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contract-flow__step--done {
    gap: var(--space-xl);
}

.contract-flow__title {
    margin: 0;
    font-size: clamp(2rem, 7.2vw, 3rem);
    line-height: 1.08;
    font-weight: var(--font-medium);
}

.contract-flow__lead {
    margin: 0;
    font-size: clamp(1rem, 4.2vw, 1.35rem);
    line-height: 1.3;
    color: rgba(240, 244, 255, 0.95);
}

.contract-flow__subtitle {
    margin: 0;
    font-size: clamp(1rem, 4.1vw, 1.3rem);
    color: rgba(240, 244, 255, 0.92);
}

.contract-flow__paragraph {
    margin: 0;
    font-size: clamp(0.95rem, 3.9vw, 1.15rem);
    line-height: 1.35;
    color: rgba(240, 244, 255, 0.86);
}

.contract-flow__intro-meta p,
.contract-flow__intro-meta span {
    margin: 0;
}

.contract-flow__intro-meta p {
    font-size: clamp(1rem, 4vw, 1.2rem);
}

.contract-flow__intro-meta span {
    font-size: clamp(0.8rem, 3.4vw, 0.96rem);
    color: rgba(240, 244, 255, 0.72);
}

.contract-flow__progress {
    margin-bottom: var(--space-sm);
}

.contract-flow__progress-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(252, 79, 85, 0.4);
    overflow: hidden;
}

.contract-flow__progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
    transition: width 220ms ease;
}

.contract-flow__quote-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contract-flow__quote-block h3 {
    margin: 0;
    font-size: clamp(1.08rem, 4.5vw, 1.45rem);
    font-weight: var(--font-medium);
}

.contract-flow__quote-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-sm);
    align-items: baseline;
    font-size: clamp(0.95rem, 3.8vw, 1.15rem);
}

.contract-flow__quote-row strong {
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.contract-flow__quote-total {
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(240, 244, 255, 0.24);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-sm);
    align-items: baseline;
    font-size: clamp(1rem, 4.1vw, 1.25rem);
}

.contract-flow__quote-total strong {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
}

.contract-flow__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.contract-flow__terms {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid rgba(240, 244, 255, 0.24);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: var(--space-md);
}

.contract-flow__terms pre {
    margin: 0;
    white-space: pre-wrap;
    font-family: var(--font-family);
    font-size: clamp(0.9rem, 3.7vw, 1.08rem);
    line-height: 1.35;
    color: rgba(240, 244, 255, 0.92);
}

.contract-flow__check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: clamp(0.92rem, 3.8vw, 1.05rem);
}

.contract-flow__check input {
    margin-top: 2px;
}

.contract-flow__signature-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.contract-flow__signature-head h2 {
    margin: 0;
    font-size: clamp(1.2rem, 4.8vw, 1.6rem);
    font-weight: var(--font-medium);
}

.contract-flow__clear {
    border: 1px solid rgba(240, 244, 255, 0.34);
    border-radius: 999px;
    background: transparent;
    color: var(--color-dark-text);
    padding: 6px 10px;
    font-size: var(--font-sm);
    cursor: pointer;
}

.contract-flow__signature-wrap {
    border-radius: 14px;
    background: #eef1f5;
    min-height: 170px;
    padding: 8px;
}

.contract-flow__signature-canvas {
    width: 100%;
    height: 154px;
    border-radius: 10px;
    touch-action: none;
    display: block;
    background: #eef1f5;
}

.contract-flow__hold-btn {
    position: relative;
    width: 100%;
    min-height: 68px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(252, 79, 85, 0.52);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
}

.contract-flow__hold-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.contract-flow__hold-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--color-primary);
    transition: width 40ms linear;
}

.contract-flow__hold-main,
.contract-flow__hold-btn small {
    position: relative;
    z-index: 1;
}

.contract-flow__hold-main {
    font-size: clamp(1.05rem, 4.2vw, 1.45rem);
    font-weight: var(--font-medium);
}

.contract-flow__hold-btn small {
    font-size: clamp(0.82rem, 3.4vw, 1rem);
}

.contract-flow__error {
    margin: 0;
    color: #ffd0d2;
    font-size: clamp(0.85rem, 3.5vw, 1rem);
}

/* BANK DETAILS */
.bank-details {
    background: var(--color-light-surface);
    border: 1px solid var(--color-light-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.bank-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-light-border);
    font-size: var(--font-sm);
    color: var(--color-light-text);
}

.bank-detail-row:last-child {
    border-bottom: none;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    color: var(--color-dark-text-sub);
    font-size: var(--font-sm);
}

/* ============================================================
   SKELETON LOADERS
   ============================================================ */

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-dark-surface) 25%,
        rgba(255,255,255,0.05) 50%,
        var(--color-dark-surface) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton--title {
    height: 32px;
    width: 60%;
    margin-bottom: var(--space-lg);
}

.skeleton--block {
    height: 120px;
    margin-bottom: var(--space-md);
}

.skeleton--card {
    height: 80px;
    margin-bottom: var(--space-sm);
}

.skeleton--row {
    height: 48px;
    margin-bottom: var(--space-sm);
}

.skeleton--inline {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.skeleton--coins-value {
    width: clamp(130px, 42vw, 190px);
    height: clamp(26px, 6vw, 38px);
}

.skeleton--coins-level {
    width: clamp(88px, 28vw, 140px);
    height: clamp(16px, 4.2vw, 22px);
}

.skeleton--month {
    width: min(100%, 110px);
    height: clamp(24px, 5.5vw, 30px);
}

.skeleton--day {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
}

.skeleton--list-line {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1;
    height: 14px;
}

.skeleton--task-line {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 14px;
    flex: 1;
}

.skeleton--client-count {
    width: clamp(110px, 38vw, 180px);
    height: 16px;
}

.skeleton--kpi {
    width: 64px;
    height: 18px;
}

.skeleton--validation {
    width: clamp(92px, 26vw, 130px);
    height: 18px;
}

.skeleton--stats-main {
    width: clamp(130px, 46vw, 210px);
    height: 18px;
}

.skeleton--stats-delta {
    width: 34px;
    height: 16px;
}

/* ============================================================
   RESPONSIVE — desktop minimal
   ============================================================ */

@media (min-width: 480px) {
    .app-layout {
        border-left: 1px solid var(--color-dark-border);
        border-right: 1px solid var(--color-dark-border);
    }
}

/* ============================================================
   CONTRACT SIGN FLOW
   ============================================================ */

.contract-sign {
    min-height: 100vh;
    background: #f3f3f5;
    color: #132335;
}

.contract-sign__header,
.contract-sign__main {
    max-width: 480px;
    margin: 0 auto;
}

.contract-sign__header {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--space-sm);
    align-items: center;
    padding: calc(env(safe-area-inset-top) + 10px) var(--space-lg) var(--space-sm);
}

.contract-sign__back {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #132335;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    cursor: pointer;
}

.contract-sign__back svg {
    width: 20px;
    height: 20px;
}

.contract-sign__progress {
    height: 10px;
    border-radius: var(--radius-full);
    background: #f1a2ab;
    overflow: hidden;
    margin-right: 4px;
}

.contract-sign__progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.contract-sign__main {
    padding: var(--space-sm) var(--space-lg) calc(env(safe-area-inset-bottom) + var(--space-2xl));
}

.contract-sign__loading {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contract-sign__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contract-sign__title {
    margin: 0;
    font-size: clamp(2.1rem, 9vw, 3.5rem);
    line-height: 1.04;
    font-weight: var(--font-medium);
    color: #132335;
}

.contract-sign__subtitle {
    margin: 0;
    font-size: clamp(1.08rem, 4.5vw, 1.56rem);
    line-height: 1.25;
    color: #132335;
}

.contract-sign__text {
    margin: 0;
    font-size: clamp(1.08rem, 4.2vw, 1.45rem);
    line-height: 1.28;
    color: #132335;
}

.contract-sign__text--spaced {
    margin-top: clamp(24px, 8vh, 84px);
}

.contract-sign__meta {
    margin-top: clamp(40px, 12vh, 140px);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contract-sign__meta p,
.contract-sign__meta span {
    margin: 0;
}

.contract-sign__meta p {
    font-size: clamp(1rem, 4vw, 1.36rem);
}

.contract-sign__meta span {
    font-size: clamp(0.95rem, 3.8vw, 1.2rem);
}

/* Empty state dans contract (fond clair, texte forcé foncé) */
.contract-sign .empty-state {
    color: #132335;
}
.contract-sign .empty-state p {
    color: #132335;
}

.contract-sign__divider {
    width: min(250px, 58%);
    height: 12px;
    border-radius: var(--radius-full);
    background: #dadbdd;
}

.contract-sign__quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contract-sign__quote h2 {
    margin: 0;
    font-size: clamp(1.8rem, 7vw, 3rem);
    line-height: 1.08;
    font-weight: var(--font-medium);
}

.contract-sign__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contract-sign__group h3 {
    margin: 0;
    font-size: clamp(1.2rem, 4.8vw, 1.8rem);
    line-height: 1.2;
    font-weight: var(--font-medium);
}

.contract-sign__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: baseline;
    font-size: clamp(1rem, 4.1vw, 1.3rem);
    line-height: 1.24;
}

.contract-sign__line span {
    min-width: 0;
}

.contract-sign__line strong {
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.contract-sign__total {
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid #d7d8db;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: var(--space-sm);
}

.contract-sign__total-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.contract-sign__total-title {
    font-size: clamp(1.12rem, 4.5vw, 1.45rem);
    font-weight: var(--font-semibold);
    line-height: 1.2;
}

.contract-sign__total-sub {
    font-size: clamp(0.82rem, 3.3vw, 1rem);
    color: var(--color-light-text-sub);
    line-height: 1.2;
}

.contract-sign__total strong {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
    font-weight: var(--font-semibold);
    white-space: nowrap;
}

.contract-sign__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.contract-sign__terms {
    border: 1px solid rgba(19, 35, 53, 0.4);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.35);
    min-height: 190px;
    max-height: 320px;
    overflow: auto;
    padding: 14px 14px 16px;
}

.contract-sign__terms pre {
    margin: 0;
    white-space: pre-wrap;
    font-family: var(--font-family);
    font-size: clamp(0.95rem, 3.8vw, 1.08rem);
    line-height: 1.28;
    color: #132335;
}

.contract-sign__check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: clamp(0.96rem, 3.8vw, 1.12rem);
    line-height: 1.28;
}

.contract-sign__check input {
    margin-top: 2px;
}

.contract-sign__signature-title {
    margin: 0;
    font-size: clamp(1.5rem, 6vw, 2.2rem);
    line-height: 1.14;
    font-weight: var(--font-medium);
}

.contract-sign__signature-wrap {
    border-radius: 14px;
    background: #dbdde0;
    min-height: 170px;
    padding: 8px;
}

.contract-sign__signature-canvas {
    width: 100%;
    height: 154px;
    border-radius: 10px;
    touch-action: none;
}

.contract-sign__hold-btn {
    position: relative;
    width: 100%;
    min-height: 68px;
    border: 0;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: #f19aa1;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    align-items: center;
    margin-top: var(--space-sm);
}

.contract-sign__hold-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.contract-sign__hold-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--color-primary);
    transition: width 40ms linear;
}

.contract-sign__hold-main,
.contract-sign__hold-btn small {
    position: relative;
    z-index: 1;
}

.contract-sign__hold-main {
    font-size: clamp(1.02rem, 4.2vw, 1.45rem);
    font-weight: var(--font-medium);
}

.contract-sign__hold-btn small {
    font-size: clamp(0.82rem, 3.4vw, 1rem);
}

.contract-sign__error {
    margin: 0;
    color: #cb3043;
    font-size: clamp(0.9rem, 3.6vw, 1.02rem);
}

.contract-sign__step--done {
    gap: var(--space-xl);
}

/* ============================================================
   QUOTE REQUEST (DEMANDE D'OFFRE)
   ============================================================ */

.quote-request {
    min-height: 100vh;
    background: #f3f3f5;
    color: #132335;
}

.quote-request__device {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f3f3f5;
}

.quote-request__header {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--space-sm);
    align-items: center;
    padding: calc(env(safe-area-inset-top) + 10px) var(--space-lg) var(--space-sm);
}

.quote-request__back {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #132335;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    cursor: pointer;
}

.quote-request__back svg {
    width: 20px;
    height: 20px;
}

.quote-request__bar-wrap {
    padding-right: 6px;
}

.quote-request__bar-track {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(252, 79, 85, 0.25);
}

.quote-request__bar-fill {
    height: 100%;
    border-radius: inherit;
    background: #fc4f55;
    transition: width 260ms ease;
}

.quote-request__main {
    padding: 6px var(--space-lg) calc(24px + env(safe-area-inset-bottom));
}

.quote-request__step {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.quote-request__title {
    margin: 0;
    font-size: clamp(32px, 8vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #132335;
}

.quote-request__title--small {
    font-size: clamp(30px, 7vw, 36px);
}

.quote-request__lead {
    margin: 0;
    font-size: clamp(26px, 6.6vw, 34px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #132335;
}

.quote-request__subtitle {
    margin: -8px 0 0;
    color: rgba(19, 35, 53, 0.72);
    font-size: 17px;
}

.quote-request__paragraph {
    margin: 0;
    color: #26374b;
    font-size: 17px;
    line-height: 1.35;
}

.quote-request__intro-meta {
    margin-top: 8px;
}

.quote-request__intro-meta p {
    margin: 0;
    font-size: 34px;
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.quote-request__intro-meta span {
    display: block;
    margin-top: 4px;
    color: rgba(19, 35, 53, 0.62);
    font-size: 13px;
}

.quote-request__field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quote-request__step > .quote-request__field + .quote-request__field {
    margin-top: 6px;
}

.quote-request__field h2 {
    margin: 0;
    color: #132335;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.012em;
}

.quote-request__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.quote-request__chip {
    border: 1px solid rgba(19, 35, 53, 0.34);
    background: transparent;
    color: #132335;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.quote-request__chip.is-active {
    background: #0c2238;
    border-color: #0c2238;
    color: #ffffff;
}

.quote-request__textarea {
    min-height: 110px;
    background: rgba(255, 255, 255, 0.7);
    color: #132335;
    border-color: rgba(19, 35, 53, 0.24);
}

.quote-request__catalog {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quote-request__catalog-category {
    border-bottom: 1px solid rgba(19, 35, 53, 0.16);
    padding-bottom: 10px;
}

.quote-request__catalog-title {
    width: 100%;
    border: none;
    background: transparent;
    color: #132335;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 500;
    padding: 6px 0;
    cursor: pointer;
}

.quote-request__catalog-title svg {
    width: 18px;
    height: 18px;
}

.quote-request__catalog-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
}

.quote-request__service-pill {
    border: 1px solid rgba(19, 35, 53, 0.24);
    background: rgba(255, 255, 255, 0.68);
    border-radius: 12px;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    color: #132335;
    cursor: pointer;
}

.quote-request__service-pill span {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
}

.quote-request__service-pill small {
    font-size: 12px;
    line-height: 1.2;
    color: rgba(19, 35, 53, 0.74);
}

.quote-request__service-pill.is-active {
    background: #0d243a;
    border-color: #0d243a;
}

.quote-request__service-pill.is-active span,
.quote-request__service-pill.is-active small {
    color: #ffffff;
}

.quote-request__range-value {
    margin: 0;
    color: #132335;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.quote-request__range {
    width: 100%;
    accent-color: #0c2238;
}

.quote-request__binary {
    display: flex;
    gap: 8px;
}

.quote-request__summary-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quote-request__summary-block h3 {
    margin: 0;
    color: #132335;
    font-size: 22px;
    font-weight: 500;
}

.quote-request__summary-text {
    margin: 0;
    color: rgba(19, 35, 53, 0.84);
    white-space: pre-wrap;
    line-height: 1.38;
}

.quote-request__summary-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
}

.quote-request__summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.quote-request__summary-grid h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 500;
}

.quote-request__summary-grid p {
    margin: 0;
    color: rgba(19, 35, 53, 0.84);
}

.quote-request__actions {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.quote-request__error {
    margin: 0;
    color: #b6232a;
    font-size: 14px;
}

.quote-request__estimate {
    margin: 12px calc(var(--space-lg) * -1) 18px;
    padding: 24px var(--space-lg);
    border-radius: 0;
    background: #071722;
    color: #f0f4ff;
}

.quote-request__estimate h2 {
    margin: 0;
    color: #f0f4ff;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.12;
}

.quote-request__estimate-sub {
    margin: 8px 0 14px;
    color: rgba(240, 244, 255, 0.76);
    font-size: 13px;
}

.quote-request__estimate-card {
    background: #f2f5f8;
    border-radius: 8px;
    padding: 10px 12px;
    display: grid;
    gap: 8px;
}

.quote-request__estimate-card div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
}

.quote-request__estimate-card span {
    color: rgba(19, 35, 53, 0.75);
    font-size: 14px;
}

.quote-request__estimate-card strong {
    color: #132335;
    font-size: 18px;
    font-weight: 600;
}

.quote-request__final-switch {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.quote-request__final-switch-title {
    margin: 0;
    color: #132335;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.quote-request__final-switch-sub {
    margin: 8px 0 0;
    color: rgba(19, 35, 53, 0.72);
    font-size: 14px;
    line-height: 1.32;
}

.quote-request__toggle {
    width: 54px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(19, 35, 53, 0.2);
    background: rgba(19, 35, 53, 0.18);
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    transition: background 220ms ease, border-color 220ms ease;
    flex-shrink: 0;
}

.quote-request__toggle span {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    transition: transform 220ms ease;
}

.quote-request__toggle.is-on {
    background: #45be9b;
    border-color: #45be9b;
}

.quote-request__toggle.is-on span {
    transform: translateX(22px);
}

.quote-request__toggle.is-saving {
    opacity: 0.7;
}

/* ============================================
   Search Panel (T11)
   ============================================ */

.search-panel {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 64px;
}

.search-panel__box {
    width: 90%;
    max-width: 480px;
    background: var(--color-surface, #0b2239);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.search-panel__input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.search-panel__input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 1rem;
}

.search-panel__input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.search-panel__close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 2px;
    display: flex;
}

.search-panel__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.search-panel__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.15s;
}

.search-panel__item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.search-panel__item-icon {
    flex-shrink: 0;
    opacity: 0.5;
}

.search-panel__item-label {
    flex: 1;
}

.search-panel__item-remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.search-panel__item:hover .search-panel__item-remove {
    opacity: 1;
}

.search-panel__item-remove:hover {
    color: rgba(255, 255, 255, 0.8);
}

.search-panel__hint {
    padding: 8px 16px 2px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}

.search-panel__empty {
    padding: 16px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    text-align: center;
}

/* ============================================
   Piqobot (T6)
   ============================================ */

.piqobot {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
}

.piqobot__messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.piqobot__message {
    display: flex;
}

.piqobot__message--user {
    justify-content: flex-end;
}

.piqobot__message--assistant {
    justify-content: flex-start;
}

.piqobot__bubble {
    max-width: 78%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.piqobot__message--user .piqobot__bubble {
    background: var(--color-primary, #2563eb);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.piqobot__message--assistant .piqobot__bubble {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border-bottom-left-radius: 4px;
}

.piqobot__bubble--typing {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 14px 18px;
}

.piqobot__bubble--typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    animation: piqobot-dot 1.2s infinite;
}

.piqobot__bubble--typing span:nth-child(2) { animation-delay: 0.2s; }
.piqobot__bubble--typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes piqobot-dot {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

.piqobot__input-area {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.piqobot__input {
    flex: 1;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #fff;
    padding: 10px 14px;
    font-size: 16px; /* iOS anti-zoom */
    resize: none;
    outline: none;
    max-height: 120px;
    overflow-y: auto;
}

.piqobot__input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.piqobot__send {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-primary, #2563eb);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.piqobot__send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================
   Admin Views
   ============================================ */

.admin-view__menu {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.admin-view__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #fff;
    text-align: left;
    cursor: pointer;
    border-radius: 12px;
    margin-bottom: 8px;
    transition: background 0.15s;
}

.admin-view__item:hover { background: rgba(255, 255, 255, 0.09); }
.admin-view__item-label { font-weight: 600; margin-bottom: 2px; }
.admin-view__item-desc { font-size: 0.82rem; opacity: 0.55; }

.admin-levels__list { display: flex; flex-direction: column; gap: 16px; padding: 16px 0; }
.admin-levels__card { background: rgba(255,255,255,0.05); border-radius: 12px; overflow: hidden; }
.admin-levels__preview {
    height: 80px;
    display: flex;
    align-items: flex-end;
    padding: 8px 12px;
    background-color: rgba(255,255,255,0.04);
    background-size: cover;
    background-position: center;
}
.admin-levels__label { font-weight: 600; font-size: 0.9rem; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.admin-levels__form { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.admin-levels__field-label { font-size: 0.82rem; opacity: 0.6; }

.admin-widgets__tabs { display: flex; gap: 8px; padding: 16px 16px 0; }
.admin-widgets__tab {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 0.9rem;
}
.admin-widgets__tab.is-active { background: rgba(255,255,255,0.1); color: #fff; }
.admin-widgets__create, .admin-widgets__list, .admin-widgets__assign { padding: 16px; }
.admin-widgets__create h2, .admin-widgets__list h2, .admin-widgets__assign h2 { font-size: 0.95rem; opacity: 0.7; margin-bottom: 12px; }
.admin-widgets__form { display: flex; flex-direction: column; gap: 8px; }
.admin-widgets__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    margin-bottom: 8px;
}
.admin-widgets__row-title { font-weight: 500; font-size: 0.95rem; }
.admin-widgets__row-meta { font-size: 0.8rem; opacity: 0.5; }

/* Invite section AccountView */
.account-v2__invite { padding: 0 16px 16px; }
.account-v2__invite-row { display: flex; gap: 8px; }
.account-v2__invite-input { flex: 1; }
.account-v2__invite-success { color: #4ade80; font-size: 0.85rem; margin-top: 6px; }

/* B-F1 : arrivée gamifiée d'un bonus */
.subscription-v2__service-right { position: relative; }

.subscription-v2__service--bonus-arrived .subscription-v2__service-count {
    animation: bonus-count-pop 450ms ease-out;
}

.subscription-v2__bonus-float {
    position: absolute;
    top: -4px;
    right: 0;
    color: var(--color-success);
    font-weight: 700;
    font-size: 0.85rem;
    pointer-events: none;
    animation: bonus-float-up 600ms ease-out forwards;
}

.subscription-v2__service--bonus-arrived .subscription-v2__service-bonus {
    animation: bonus-badge-pulse 300ms ease-out 2;
}

.subscription-v2__service--enter {
    animation: bonus-line-enter 450ms ease-out;
}

@keyframes bonus-count-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes bonus-float-up {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-22px); opacity: 0; }
}

@keyframes bonus-badge-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes bonus-line-enter {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .subscription-v2__service--bonus-arrived .subscription-v2__service-count,
    .subscription-v2__service--bonus-arrived .subscription-v2__service-bonus {
        animation: none;
    }

    .subscription-v2__bonus-float {
        animation: bonus-float-fade 600ms ease-out forwards;
    }

    .subscription-v2__service--enter {
        animation: none;
        transition: opacity 300ms ease-out;
    }

    @keyframes bonus-float-fade {
        0% { opacity: 1; }
        100% { opacity: 0; }
    }
}
.account-v2__invite-error { color: #f87171; font-size: 0.85rem; margin-top: 6px; }

/* ============================================================
   BONUS CELEBRATION — overlay plein écran après activation d'un bonus
   ============================================================ */

.bonus-celebration {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal) + 50);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 22, 40, 0.88);
    padding: var(--space-xl);
    cursor: pointer;
}

.bonus-celebration-overlay-enter-active {
    transition: opacity 200ms ease-out;
}

.bonus-celebration-overlay-leave-active {
    transition: opacity var(--transition-slow) ease-out;
}

.bonus-celebration-overlay-enter-from,
.bonus-celebration-overlay-leave-to {
    opacity: 0;
}

.bonus-celebration__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    cursor: default;
}

.bonus-celebration__coin {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: var(--space-md);
    z-index: calc(var(--z-modal) + 51);
    animation: bonus-celebration-coin-bounce 550ms cubic-bezier(0.34, 1.56, 0.32, 1);
}

.bonus-celebration__title {
    font-family: var(--font-family);
    font-size: var(--font-4xl);
    font-weight: var(--font-extrabold);
    color: var(--color-dark-text);
}

.bonus-celebration__subtitle {
    font-family: var(--font-family);
    font-size: var(--font-lg);
    font-weight: var(--font-medium);
    /* Contraste renforcé (AA) sur le voile plein écran : --color-dark-text-sub
       (opacité 0.45) est trop faible ici, contrairement à son usage habituel
       sur les surfaces --color-dark-surface plus claires. */
    color: rgba(240, 244, 255, 0.72);
    max-width: 30ch;
}

@keyframes bonus-celebration-coin-bounce {
    0% { transform: scale(0.2); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Étincelles : particules CSS pures, positions et délais variés */
.bonus-celebration__sparkles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.bonus-celebration__sparkle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-warning);
    opacity: 0;
    animation: bonus-celebration-sparkle 1200ms ease-out forwards;
}

.bonus-celebration__sparkle--0 { --sx: -140px; --sy: -90px; animation-delay: 80ms; }
.bonus-celebration__sparkle--1 { --sx: 130px;  --sy: -110px; animation-delay: 160ms; }
.bonus-celebration__sparkle--2 { --sx: -170px; --sy: 40px;  animation-delay: 240ms; }
.bonus-celebration__sparkle--3 { --sx: 160px;  --sy: 60px;  animation-delay: 40ms; }
.bonus-celebration__sparkle--4 { --sx: -60px;  --sy: -160px; animation-delay: 320ms; }
.bonus-celebration__sparkle--5 { --sx: 70px;   --sy: -170px; animation-delay: 200ms; }
.bonus-celebration__sparkle--6 { --sx: -110px; --sy: 130px; animation-delay: 120ms; }
.bonus-celebration__sparkle--7 { --sx: 110px;  --sy: 140px; animation-delay: 280ms; }

@keyframes bonus-celebration-sparkle {
    0% { transform: translate(-50%, -50%) translate(0, 0) scale(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) scale(1); opacity: 0; }
}

/* Bandeau discret (reduced-motion) */
.bonus-celebration-banner {
    position: fixed;
    top: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--z-modal) + 50);
    background: var(--color-dark-surface);
    border: 1px solid var(--color-dark-border);
    color: var(--color-dark-text);
    font-family: var(--font-family);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    max-width: calc(100vw - 2 * var(--space-lg));
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .bonus-celebration__coin {
        animation: none;
    }

    .bonus-celebration__sparkle {
        display: none;
    }

    .bonus-celebration-overlay-enter-active,
    .bonus-celebration-overlay-leave-active {
        transition: none;
    }
}