/* ===================================
   MY FILMLAB - DASHBOARD APP
   Darkroom Luxe Theme
   =================================== */

/* CSS Variables - Darkroom Luxe */
:root {
    /* Palette Chambre Noire */
    --void: #0a0a0f;
    --darkroom: #12121a;
    --surface: #1a1a26;
    --surface-elevated: #222230;
    --surface-hover: #2a2a3a;

    /* Lumiere Inactinique - Ambre/Or */
    --safelight: #d4a574;
    --safelight-bright: #e8c9a0;
    --safelight-dim: #b8956a;
    --safelight-glow: rgba(212, 165, 116, 0.15);
    --safelight-intense: rgba(212, 165, 116, 0.4);

    /* Accents Chimie */
    --silver: #c0c0c0;
    --silver-dim: rgba(192, 192, 192, 0.6);
    --developer-green: #4ade80;
    --stop-amber: #fbbf24;
    --fixer-blue: #60a5fa;
    --danger: #ef4444;

    /* Texte */
    --text-primary: #f5f5f5;
    --text-secondary: rgba(245, 245, 245, 0.7);
    --text-muted: rgba(245, 245, 245, 0.4);

    /* Effets */
    --border-subtle: rgba(212, 165, 116, 0.12);
    --border-glow: rgba(212, 165, 116, 0.3);
    --shadow-ambient: 0 0 60px rgba(212, 165, 116, 0.08);
    --grain-opacity: 0.03;
}

/* ═══════════════════════════════════════════════════════════════
   ÉCRAN DE CHARGEMENT GLOBAL
   ═══════════════════════════════════════════════════════════════ */
.app-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--void);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.app-loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-loading-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Logo */
.loading-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.loading-logo .logo-icon {
    width: 60px;
    height: 60px;
    background: var(--surface);
    border: 2px solid var(--safelight);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 0 20px var(--safelight-glow);
}

.loading-logo .logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.loading-logo .logo-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.loading-logo .logo-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--safelight);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Animation bobine */
.loading-animation {
    width: 100px;
    height: 100px;
    filter: drop-shadow(0 0 25px var(--safelight-glow));
}

/* Texte de chargement */
.loading-text {
    color: var(--safelight);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    animation: pulse-text 1.5s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Film Grain Overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--grain-opacity);
    pointer-events: none;
    z-index: 10000;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Ambient Safelight Glow */
.ambient-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--safelight-glow) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: ambientPulse 8s ease-in-out infinite;
}

.ambient-glow.top-right {
    top: -200px;
    right: -200px;
}

.ambient-glow.bottom-left {
    bottom: -300px;
    left: -200px;
    animation-delay: -4s;
}

@keyframes ambientPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* Layout */
.app-container {
    display: flex;
    min-height: 100vh;
}

/* ===================================
   SIDEBAR
   =================================== */

.sidebar {
    width: 300px;
    background: linear-gradient(180deg, var(--darkroom) 0%, var(--void) 100%);
    border-right: 1px solid var(--border-subtle);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
}

/* Logo Link */
.logo-link {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
    transition: transform 0.3s ease;
}

.logo-link:hover {
    transform: scale(1.02);
}

.logo-text-container {
    display: flex;
    flex-direction: column;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-subtle);
}

.logo-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 0 30px var(--safelight-glow), inset 0 1px 0 rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}

.logo-icon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--safelight-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    color: var(--safelight);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 4px;
    font-weight: 500;
}

/* Navigation */
.nav-section {
    margin-bottom: 36px;
}

.nav-title {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding-left: 16px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 4px;
    position: relative;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--safelight);
    border-radius: 0 2px 2px 0;
    transition: height 0.3s ease;
}

.nav-item:hover {
    background: var(--safelight-glow);
    color: var(--text-primary);
    transform: translateX(4px);
}

.nav-item:hover::before {
    height: 24px;
}

.nav-item.active {
    background: linear-gradient(90deg, var(--safelight-glow) 0%, transparent 100%);
    color: var(--safelight-bright);
}

.nav-item.active::before {
    height: 32px;
    box-shadow: 0 0 12px var(--safelight);
}

.nav-icon {
    width: 22px;
    height: 22px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
    opacity: 1;
}

.nav-badge {
    margin-left: auto;
    background: var(--safelight);
    color: var(--void);
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    box-shadow: 0 0 12px var(--safelight-glow);
}

/* Session Timer - Compact */
.session-timer {
    margin-top: auto;
    padding: 8px 16px;
    background: var(--surface);
    border-radius: 10px;
    text-align: center;
    margin-bottom: 12px;
    border: 1px solid var(--border-subtle);
}

.session-timer-label {
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.session-timer-value {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--safelight);
    text-shadow: 0 0 15px var(--safelight-glow);
    font-variant-numeric: tabular-nums;
}

.session-timer-hint {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Sidebar Footer */
.sidebar-footer {
    padding-top: 20px;
    margin-top: auto;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-license-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.back-to-home {
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.back-to-home:hover {
    color: var(--safelight);
}

.sidebar-pro-btn {
    display: block;
    text-align: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    color: var(--void);
    border-radius: 10px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
}

.sidebar-pro-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--safelight-glow);
}

/* Logo Icon SVG */
.logo-icon-svg {
    filter: drop-shadow(0 0 8px rgba(212, 165, 116, 0.3));
    flex-shrink: 0;
}

.license-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.license-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.license-dot.pro {
    background: var(--developer-green);
    box-shadow: 0 0 8px var(--developer-green);
}

.license-dot.free {
    background: var(--stop-amber);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}

.lang-toggle {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lang-toggle:hover {
    border-color: var(--safelight);
    color: var(--safelight);
}

/* ===================================
   HEADER PRINCIPAL FIXE
   =================================== */

.main-header {
    position: fixed;
    top: 0;
    left: 300px;
    right: 0;
    height: 120px;
    z-index: 100;
    background: linear-gradient(180deg, var(--void) 0%, var(--darkroom) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    border-bottom: 1px solid var(--border-subtle);
}

.main-header .header-title-block {
    flex: 1;
}

.main-header .header-title-block .page-title {
    margin-bottom: 4px;
}

.main-header .header-title-block .page-subtitle {
    margin-bottom: 2px;
}

.main-header .header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ===================================
   MAIN CONTENT
   =================================== */

.main-content {
    flex: 1;
    margin-left: 300px;
    margin-top: 120px;
    padding: 32px 40px;
    position: relative;
    min-height: calc(100vh - 120px);
}

/* Section Header (titre interne avec animation) */
.section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 24px;
}

.section-header h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Legacy page-header support */
.page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 24px;
}

.page-title {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: var(--text-primary);
}

.page-title span {
    color: var(--safelight);
}

.page-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    margin-top: 8px;
    font-style: italic;
}

.header-date {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 12px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    color: var(--void);
    box-shadow: 0 4px 20px var(--safelight-glow), 0 0 40px var(--safelight-glow);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px var(--safelight-intense), 0 0 60px var(--safelight-glow);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

.btn-secondary:hover {
    border-color: var(--safelight);
    background: var(--surface-elevated);
    box-shadow: 0 0 20px var(--safelight-glow);
}

.btn-sm {
    padding: 10px 20px;
    font-size: 13px;
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    padding: 8px 16px;
}

.btn-ghost:hover {
    color: var(--safelight);
    background: var(--safelight-glow);
}

/* Amazon Affiliate Button */
.btn-amazon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #ff9900 0%, #e68a00 100%);
    color: #000;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3);
}

.btn-amazon:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 153, 0, 0.4);
    background: linear-gradient(135deg, #ffad33 0%, #ff9900 100%);
}

.data-card-amazon {
    padding: 12px 16px;
    border-top: 1px solid var(--border-subtle);
}

.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Header User Block */
.header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

.header-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.header-user-info .user-email {
    font-size: 0.8rem;
    color: var(--text-secondary);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Conteneur des badges de plan */
.user-plan-badge {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-user-info .plan-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
}

.header-user-info .plan-badge.plan-free {
    background: var(--surface-elevated);
    color: var(--text-muted);
}

.header-user-info .plan-badge.plan-pro {
    background: linear-gradient(135deg, var(--safelight), var(--safelight-dim));
    color: var(--void);
}

/* Badge Early Adopter */
.header-user-info .early-badge {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: var(--void);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
}

.header-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
    object-fit: cover;
}

.btn-logout-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.btn-logout-small:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger);
    color: var(--danger);
}

.header-separator {
    width: 1px;
    height: 32px;
    background: var(--border-subtle);
    margin: 0 4px;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS WebM — Titres de section
   ═══════════════════════════════════════════════════════════════ */

/* Container titre + animation */
.page-title-with-animation {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-title-with-animation h1 {
    margin: 0;
}

/* Animation de section — TAILLE AUGMENTÉE */
.section-animation {
    height: 70px;
    width: auto;
    opacity: 0.9;
    filter: drop-shadow(0 0 12px rgba(212, 165, 116, 0.4));
    pointer-events: none;
    flex-shrink: 0;
}

/* Animation header — aussi agrandie */
.header-animation {
    height: 50px;
    width: auto;
    opacity: 0.9;
    margin: 0 1.5rem;
    filter: drop-shadow(0 0 12px rgba(212, 165, 116, 0.4));
    vertical-align: middle;
    pointer-events: none;
}

/* Responsive — Tablette */
@media (max-width: 768px) {
    .section-animation {
        height: 55px;
    }

    .header-animation {
        height: 40px;
        margin: 0 0.75rem;
    }

    .page-title-with-animation {
        gap: 0.75rem;
    }
}

/* Responsive — Mobile */
@media (max-width: 480px) {
    .section-animation {
        height: 45px;
    }

    .header-animation {
        display: none;
    }

    .page-title-with-animation {
        gap: 0.5rem;
    }
}

/* Language Selector */
.language-selector {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
}

.lang-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.lang-btn:hover {
    background: var(--safelight-glow);
    color: var(--text-primary);
}

.lang-btn.active {
    background: var(--safelight);
    color: var(--void);
    box-shadow: 0 0 10px var(--safelight-glow);
}

/* ===================================
   STATS GRID + ACTIVITY ROW
   =================================== */

/* KPI (2x2) + Activity Row Container */
.kpi-activity-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
}

/* Stats Grid - 2x2 square KPIs */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 200px;
    flex-shrink: 0;
}

.activity-card {
    flex: 1;
    max-height: 220px;
    display: flex;
    flex-direction: column;
}

.activity-card .card-header {
    padding: 12px 16px;
    flex-shrink: 0;
}

.activity-card .card-body {
    padding: 10px 16px;
    flex: 1;
    overflow-y: auto;
}

/* Square stat cards */
.stat-card {
    background: linear-gradient(145deg, var(--surface) 0%, var(--darkroom) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 12px;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s ease backwards;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

/* Hover effect disabled */

.stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    position: relative;
}

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

.stat-icon::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    background: inherit;
    opacity: 0.3;
    filter: blur(8px);
    z-index: -1;
}

.stat-icon.gold {
    background: linear-gradient(135deg, var(--safelight-glow), rgba(212, 165, 116, 0.3));
    color: var(--safelight);
}
.stat-icon.green {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(74, 222, 128, 0.3));
    color: var(--developer-green);
}
.stat-icon.blue {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(96, 165, 250, 0.3));
    color: var(--fixer-blue);
}
.stat-icon.purple {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(167, 139, 250, 0.3));
    color: #a78bfa;
}

.stat-value {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 2px;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--silver) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 10px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-trend {
    display: none; /* Hidden in square layout */
}

.stat-trend.up {
    background: rgba(74, 222, 128, 0.12);
    color: var(--developer-green);
}

.stat-trend.down {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
}

.stat-trend.warning {
    background: rgba(251, 191, 36, 0.12);
    color: var(--stop-amber);
}

/* ===================================
   TOP ROW: Alertes + Chimie (3 colonnes 1/3)
   =================================== */

.top-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Chimie Box (même style que alert-box) */
.chimie-box {
    background: linear-gradient(145deg, var(--surface) 0%, var(--darkroom) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chimie-box-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chimie-box-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--safelight);
}

.chimie-box-icon svg {
    width: 100%;
    height: 100%;
}

.chimie-box-title {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--safelight);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chimie-box-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 100px;
    overflow-y: auto;
}

.chimie-box-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.chimie-box-btn:hover {
    border-color: var(--safelight);
    color: var(--safelight);
    background: var(--safelight-glow);
}

/* Legacy alerts-row */
.alerts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

/* Legacy alerts-banner (kept for compatibility) */
.alerts-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.alert-box {
    background: linear-gradient(145deg, var(--surface) 0%, var(--darkroom) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-box.has-alerts {
    border-color: rgba(251, 191, 36, 0.4);
}

.alert-box.has-danger {
    border-color: rgba(239, 68, 68, 0.4);
}

.alert-box-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-box-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--safelight);
}

.alert-box-icon svg {
    width: 100%;
    height: 100%;
}

.alert-box.has-alerts .alert-box-icon {
    color: var(--stop-amber);
}

.alert-box.has-danger .alert-box-icon {
    color: var(--danger);
}

.alert-box-title {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alert-box-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
}

.alert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--void);
    border-radius: 8px;
    font-size: 13px;
}

.alert-item-name {
    color: var(--text-primary);
    font-weight: 500;
}

.alert-item-info {
    font-size: 12px;
    font-weight: 600;
}

.alert-item-info.warning {
    color: var(--stop-amber);
}

.alert-item-info.danger {
    color: var(--danger);
}

.alert-box-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 10px 16px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.alert-box-btn:hover {
    border-color: var(--safelight);
    color: var(--safelight);
    background: var(--safelight-glow);
}

.alert-box.has-alerts .alert-box-btn {
    border-color: var(--stop-amber);
    color: var(--stop-amber);
}

.alert-box.has-alerts .alert-box-btn:hover {
    background: rgba(251, 191, 36, 0.15);
}

.alert-box.has-danger .alert-box-btn {
    border-color: var(--danger);
    color: var(--danger);
}

.alert-box.has-danger .alert-box-btn:hover {
    background: rgba(239, 68, 68, 0.15);
}

@media (max-width: 768px) {
    .alerts-banner {
        grid-template-columns: 1fr;
    }
}

/* Legacy expiration alert (kept for compatibility) */
.expiration-alert.danger {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-color: rgba(239, 68, 68, 0.3);
}

.expiration-alert.danger .expiration-alert-value {
    color: var(--danger);
}

.expiration-alert.danger .expiration-alert-btn {
    border-color: var(--danger);
    color: var(--danger);
}

.expiration-alert.danger .expiration-alert-btn:hover {
    background: rgba(239, 68, 68, 0.15);
}

/* ===================================
   CONTENT GRID
   =================================== */

/* Dashboard Grid (2 colonnes égales) */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Legacy content-grid */
.content-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 28px;
}

.right-panel {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Cards */
.card {
    background: linear-gradient(145deg, var(--surface) 0%, var(--darkroom) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    overflow: hidden;
    animation: fadeInUp 0.6s ease backwards;
    animation-delay: 0.5s;
}

/* Card hover effect disabled */

.card-compact {
    border-radius: 12px;
}

.card-compact .card-header {
    padding: 16px 20px;
}

.card-compact .card-body {
    padding: 16px 20px;
    max-height: 280px;
    overflow-y: auto;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-subtle);
}

.card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
}

.card-body {
    padding: 24px 28px;
}

/* Rouleaux Card Full Width */
.rouleaux-card-full {
    width: 100%;
}

.rouleaux-card-full .card-body {
    padding: 16px 20px;
}

/* Rouleaux List (horizontal scroll for full-width card) */
.rouleaux-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.rouleaux-list::-webkit-scrollbar {
    height: 6px;
}

.rouleaux-list::-webkit-scrollbar-track {
    background: var(--void);
    border-radius: 3px;
}

.rouleaux-list::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 3px;
}

.rouleau-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--void);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    min-width: 180px;
    flex-shrink: 0;
}

/* Rouleau item hover effect disabled */

.rouleau-info {
    flex: 1;
    min-width: 0;
}

.rouleau-film {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rouleau-project {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rouleau-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rouleau-progress-bar {
    width: 60px;
    height: 6px;
    background: var(--surface);
    border-radius: 3px;
    overflow: hidden;
}

.rouleau-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--safelight-dim), var(--safelight));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.rouleau-progress-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 35px;
}

.rouleau-status {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.rouleau-status.en-cours {
    background: rgba(251, 191, 36, 0.15);
    color: var(--stop-amber);
}

.rouleau-status.expose {
    background: rgba(96, 165, 250, 0.15);
    color: var(--fixer-blue);
}

.rouleau-status.developpe {
    background: rgba(74, 222, 128, 0.15);
    color: var(--developer-green);
}

.card-body-table {
    padding: 0;
}

/* ===================================
   DATA TABLE
   =================================== */

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    text-align: left;
    padding: 14px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

.data-table td {
    padding: 20px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    transition: background 0.3s ease;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr {
    transition: all 0.3s ease;
}

.data-table tr:hover td {
    background: var(--safelight-glow);
}

/* Film Row */
.film-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.film-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid var(--border-subtle);
    position: relative;
}

.film-icon::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed var(--border-subtle);
    border-radius: 6px;
}

.film-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.film-details {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 24px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
}

.status-badge.en-cours {
    background: rgba(251, 191, 36, 0.12);
    color: var(--stop-amber);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.status-badge.expose {
    background: rgba(251, 146, 60, 0.12);
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, 0.2);
}

.status-badge.a-developper {
    background: rgba(96, 165, 250, 0.12);
    color: var(--fixer-blue);
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.status-badge.developpe {
    background: rgba(74, 222, 128, 0.12);
    color: var(--developer-green);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

/* Progress Bar */
.progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-text {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 45px;
    font-variant-numeric: tabular-nums;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: var(--surface-elevated);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    min-width: 80px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--safelight-dim), var(--safelight-bright));
    border-radius: 3px;
    position: relative;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
    animation: progressGlow 2s ease-in-out infinite;
}

@keyframes progressGlow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* ===================================
   ACTIVITY LIST (Compact)
   =================================== */

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--void);
    border-radius: 8px;
    border-left: 2px solid var(--safelight);
    position: relative;
}

/* Activity item hover effect disabled */

.activity-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.activity-icon.dev { background: rgba(74, 222, 128, 0.15); }
.activity-icon.tirage { background: rgba(167, 139, 250, 0.15); }
.activity-icon.film { background: var(--safelight-glow); }

.activity-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.activity-title {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-time {
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

/* Rating Stars */
.rating {
    display: flex;
    gap: 1px;
    flex-shrink: 0;
}

.rating .star {
    color: var(--safelight);
    font-size: 10px;
}

.rating .star.empty {
    color: var(--surface);
}

/* ===================================
   CHIMIE GAUGES
   =================================== */

.chimie-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.chimie-item:last-child {
    border-bottom: none;
}

/* Hover effect disabled */

.chimie-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.chimie-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.chimie-icon.revelateur { background: rgba(74, 222, 128, 0.15); }
.chimie-icon.fixateur { background: rgba(96, 165, 250, 0.15); }
.chimie-icon.arret { background: rgba(251, 191, 36, 0.15); }

.chimie-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.chimie-type {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

.chimie-level {
    text-align: right;
}

.chimie-percent {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}

.chimie-percent.low { color: var(--danger); }
.chimie-percent.medium { color: var(--stop-amber); }
.chimie-percent.high { color: var(--developer-green); }

.chimie-warning {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--danger);
    margin-top: 4px;
}

/* ===================================
   QUICK ACTIONS
   =================================== */

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

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.quick-action::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--safelight-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.quick-action:hover {
    border-color: var(--safelight);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--safelight-glow);
}

.quick-action:hover::before {
    opacity: 1;
}

.quick-action-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
    color: var(--safelight);
}

.quick-action-icon svg {
    width: 100%;
    height: 100%;
}

.quick-action:hover .quick-action-icon {
    transform: scale(1.15);
}

.quick-action-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.quick-action:hover .quick-action-label {
    color: var(--text-primary);
}

/* ===================================
   QUICK ACTIONS BAR (Horizontal)
   =================================== */

.quick-actions-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

.quick-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.quick-action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, var(--safelight-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.quick-action-btn:hover {
    border-color: var(--safelight);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--safelight-glow);
}

.quick-action-btn:hover::before {
    opacity: 1;
}

.quick-action-btn-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
    color: var(--safelight);
}

.quick-action-btn-icon svg {
    width: 100%;
    height: 100%;
}

.quick-action-btn:hover .quick-action-btn-icon {
    transform: scale(1.1);
}

.quick-action-btn-text {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.quick-action-btn:hover .quick-action-btn-text {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .quick-actions-bar {
        flex-wrap: wrap;
    }

    .quick-action-btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 140px;
    }
}

@media (max-width: 480px) {
    .quick-action-btn {
        flex: 1 1 100%;
    }
}

/* ===================================
   CHIMIE STRIP (Bandeau horizontal fin)
   =================================== */

.chimie-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(145deg, var(--surface) 0%, var(--darkroom) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 20px;
}

/* Hover effect disabled */

.chimie-strip-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--safelight);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    padding-right: 16px;
    border-right: 1px solid var(--border-subtle);
}

.chimie-strip-label svg {
    width: 18px;
    height: 18px;
}

.chimie-strip-gauges {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
    padding: 4px 0;
}

.chimie-strip-gauges::-webkit-scrollbar {
    height: 4px;
}

.chimie-strip-gauges::-webkit-scrollbar-track {
    background: var(--void);
    border-radius: 2px;
}

.chimie-strip-gauges::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 2px;
}

.chimie-inline-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--void);
    border-radius: 6px;
}

.chimie-inline-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chimie-inline-bar {
    width: 50px;
    height: 5px;
    background: var(--surface);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.chimie-inline-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.chimie-inline-fill.high { background: var(--developer-green); }
.chimie-inline-fill.medium { background: var(--stop-amber); }
.chimie-inline-fill.low { background: var(--danger); }

.chimie-inline-percent {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 700;
    min-width: 28px;
    text-align: right;
}

.chimie-inline-percent.high { color: var(--developer-green); }
.chimie-inline-percent.medium { color: var(--stop-amber); }
.chimie-inline-percent.low { color: var(--danger); }

.chimie-inline-warning {
    color: var(--danger);
    font-size: 10px;
    flex-shrink: 0;
}

.chimie-strip-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 6px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.chimie-strip-btn:hover {
    background: var(--safelight-glow);
    border-color: var(--safelight);
    color: var(--safelight);
}

@media (max-width: 768px) {
    .chimie-strip {
        flex-wrap: wrap;
    }

    .chimie-strip-label {
        border-right: none;
        padding-right: 0;
        width: 100%;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-subtle);
    }

    .chimie-strip-gauges {
        width: 100%;
    }
}

/* ===================================
   DATA GRID (for sections)
   =================================== */

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

.data-card {
    background: linear-gradient(145deg, var(--surface) 0%, var(--darkroom) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    overflow: hidden;
}

/* Hover effect disabled */

.data-card-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.data-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--safelight-bright);
}

.data-card-body {
    padding: 20px;
}

.data-card-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.data-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.data-label {
    color: var(--text-muted);
    font-size: 13px;
}

.data-value {
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
}

.badge-gold {
    background: var(--safelight-glow);
    color: var(--safelight);
    border: 1px solid rgba(212, 165, 116, 0.3);
}

.badge-green {
    background: rgba(74, 222, 128, 0.12);
    color: var(--developer-green);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.badge-blue {
    background: rgba(96, 165, 250, 0.12);
    color: var(--fixer-blue);
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.badge-amber {
    background: rgba(251, 191, 36, 0.12);
    color: var(--stop-amber);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.badge-success {
    background: rgba(74, 222, 128, 0.15);
    color: var(--developer-green);
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.badge-muted {
    background: rgba(245, 245, 245, 0.05);
    color: var(--text-muted);
    border: 1px solid rgba(245, 245, 245, 0.1);
}

/* Pellicule utilisée (grisée) */
.data-card.used {
    opacity: 0.6;
    filter: grayscale(30%);
}

.data-card.used:hover {
    opacity: 0.8;
}

/* ===================================
   SECTIONS
   =================================== */

.section {
    display: none;
}

.section.active {
    display: block;
    animation: fadeInUp 0.4s ease;
}

/* ===================================
   SCROLLBAR
   =================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--void);
}

::-webkit-scrollbar-thumb {
    background: var(--surface-elevated);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--safelight-dim);
}

/* ===================================
   ANIMATIONS
   =================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.5s ease forwards;
}

/* ===================================
   UTILITIES
   =================================== */

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.flex { display: flex; }
.gap-sm { gap: 8px; }

/* ===================================
   MOBILE TOGGLE
   =================================== */

.sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    color: var(--void);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 200;
    box-shadow: 0 4px 20px var(--safelight-glow);
}

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

@media (max-width: 1400px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        padding: 24px;
    }

    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        gap: 20px;
    }

    .header-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .header-actions .btn {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }

    .header-user {
        width: 100%;
        justify-content: center;
        order: -1;
        margin-bottom: 8px;
    }

    .header-separator {
        display: none;
    }

    .page-title {
        font-size: 32px;
    }

    /* Top row: stack vertically */
    .top-row {
        grid-template-columns: 1fr;
    }

    /* Legacy alerts row */
    .alerts-row {
        grid-template-columns: 1fr;
    }

    /* KPI + Activity: stack vertically */
    .kpi-activity-row {
        flex-direction: column;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
    }

    .stat-card {
        aspect-ratio: auto;
        padding: 12px;
    }

    /* Rouleaux list: vertical on mobile */
    .rouleaux-list {
        flex-direction: column;
    }

    .rouleau-item {
        flex-direction: row;
        min-width: auto;
    }

    .rouleau-info {
        flex: 1;
    }

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

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

@media (max-width: 480px) {
    .main-content {
        padding: 16px;
    }

    .card-header,
    .card-body {
        padding: 16px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-value {
        font-size: 18px;
    }

    .stat-label {
        font-size: 9px;
    }

    .data-table th,
    .data-table td {
        padding: 12px;
        font-size: 12px;
    }

    .film-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .status-badge {
        padding: 6px 10px;
        font-size: 10px;
    }
}

/* ===================================
   PRO CTA BAR
   =================================== */

.pro-cta-bar {
    position: fixed;
    bottom: 0;
    left: 300px;
    right: 0;
    background: linear-gradient(90deg, var(--surface) 0%, var(--darkroom) 100%);
    border-top: 1px solid var(--safelight);
    padding: 16px 32px;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.pro-cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.pro-cta-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pro-cta-icon {
    font-size: 24px;
}

.pro-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pro-cta-text strong {
    color: var(--safelight);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.pro-cta-text span {
    color: var(--text-secondary);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
}

.pro-cta-btn {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 4px 20px var(--safelight-glow); }
    50% { box-shadow: 0 4px 30px var(--safelight-intense); }
}

@media (max-width: 1024px) {
    .pro-cta-bar {
        left: 0;
        padding: 12px 16px;
    }

    .pro-cta-content {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .pro-cta-info {
        flex-direction: column;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MY FILMLAB — CSS DASHBOARD V4
   À AJOUTER À LA FIN DE public/css/app.css
   NE PAS SUPPRIMER L'EXISTANT
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MODE CHAMBRE NOIRE (Lumière Inactinique Rouge)
   Appliqué quand body a la classe "darkroom-mode"
   ═══════════════════════════════════════════════════════════════ */
body.darkroom-mode {
    --void: #0d0000;
    --darkroom: #120000;
    --surface: #1a0505;
    --surface-elevated: #250808;
    --surface-hover: #300a0a;

    --safelight: #cc3333;
    --safelight-bright: #ff4444;
    --safelight-dim: #992222;
    --safelight-glow: rgba(204, 51, 51, 0.2);
    --safelight-intense: rgba(204, 51, 51, 0.5);

    --developer-green: #993333;
    --stop-amber: #cc4444;
    --fixer-blue: #993333;

    --text-primary: #ff8888;
    --text-secondary: rgba(255, 100, 100, 0.7);
    --text-muted: rgba(255, 80, 80, 0.4);

    --border-subtle: rgba(204, 51, 51, 0.15);
    --border-glow: rgba(204, 51, 51, 0.4);
}

/* Override des éléments colorés en mode chambre noire */
body.darkroom-mode .btn-pro,
body.darkroom-mode .badge-pro,
body.darkroom-mode .rouleau-status,
body.darkroom-mode .btn-primary,
body.darkroom-mode .next-action-cta,
body.darkroom-mode .btn-upgrade {
    background: linear-gradient(135deg, #cc3333 0%, #992222 100%) !important;
}

body.darkroom-mode .step-icon {
    border-color: #cc3333 !important;
}

body.darkroom-mode .step:hover .step-icon {
    box-shadow: 0 0 12px rgba(204, 51, 51, 0.4) !important;
}

body.darkroom-mode .rouleau-bar-fill,
body.darkroom-mode .stock-fill.good {
    background: linear-gradient(90deg, #cc3333 0%, #ff4444 100%) !important;
}

body.darkroom-mode .stock-fill.warning {
    background: #cc4444 !important;
}

body.darkroom-mode .session-timer {
    font-size: 1.6rem !important;
    animation: timer-pulse-red 1.5s ease-in-out infinite;
}

body.darkroom-mode .session-status {
    color: #ff4444;
}

@keyframes timer-pulse-red {
    0%, 100% { text-shadow: 0 0 10px rgba(204, 51, 51, 0.5); }
    50% { text-shadow: 0 0 30px rgba(255, 68, 68, 0.8), 0 0 60px rgba(204, 51, 51, 0.4); }
}

/* ═══════════════════════════════════════════════════════════════
   BANNIÈRE MODE CHAMBRE NOIRE
   ═══════════════════════════════════════════════════════════════ */
.darkroom-warning {
    display: none;
    position: fixed;
    top: 0;
    left: var(--sidebar-width, 220px);
    right: 0;
    background: linear-gradient(90deg, #1a0505 0%, #250808 100%);
    border-bottom: 1px solid rgba(204, 51, 51, 0.3);
    padding: 0.5rem 2rem;
    z-index: 100;
    font-size: 0.8rem;
    color: #ff8888;
    text-align: center;
}

body.darkroom-mode .darkroom-warning {
    display: block;
}

body.darkroom-mode .header {
    margin-top: 36px;
}

/* ═══════════════════════════════════════════════════════════════
   BADGE PRO (à côté du logo)
   ═══════════════════════════════════════════════════════════════ */
.badge-pro {
    display: none;
    background: linear-gradient(135deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    color: var(--void);
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

body.user-pro .badge-pro {
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   SESSION LABO (version compacte)
   ═══════════════════════════════════════════════════════════════ */
.session-labo {
    margin: 0.75rem;
    padding: 0.75rem;
    background: var(--surface);
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.session-toggle:hover {
    color: var(--text-secondary);
}

.session-toggle:hover .toggle-switch {
    border-color: var(--safelight);
}

body.darkroom-mode .session-labo {
    border-color: #cc3333;
    box-shadow: 0 0 15px rgba(204, 51, 51, 0.3);
}

.session-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.session-timer {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--safelight);
    font-variant-numeric: tabular-nums;
    transition: all 0.5s ease;
    line-height: 1.2;
}

.session-status {
    font-size: 0.65rem;
    color: var(--developer-green);
    margin-top: 0.15rem;
    transition: color 0.5s ease;
}

.session-toggle {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.65rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
}

.toggle-switch {
    width: 32px;
    height: 18px;
    background: var(--surface-elevated);
    border-radius: 9px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.3s ease;
}

body.darkroom-mode .toggle-switch {
    background: #cc3333;
}

body.darkroom-mode .toggle-switch::after {
    left: 16px;
    background: #fff;
}

/* Session controls (play/pause/reset) */
.session-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.session-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--safelight);
    cursor: pointer;
    transition: all 0.3s ease;
}

.session-btn:hover {
    background: var(--surface-hover);
    border-color: var(--safelight);
    transform: scale(1.1);
}

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

/* ═══════════════════════════════════════════════════════════════
   HEADER LAYOUT (bobine + titre + actions)
   ═══════════════════════════════════════════════════════════════ */
.header-animation-large {
    width: 60px;
    height: 60px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.header-title-block {
    flex: 1;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   BOUTONS HEADER
   ═══════════════════════════════════════════════════════════════ */
.btn-calculator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--surface);
    border: 1px solid var(--developer-green);
    color: var(--developer-green);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-calculator:hover {
    background: var(--developer-green);
    color: var(--void);
}

.btn-feedback {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-feedback:hover {
    border-color: var(--fixer-blue);
    color: var(--fixer-blue);
}

/* Bouton Passer Pro */
.btn-pro {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--stop-amber) 0%, #f59e0b 100%);
    border: none;
    color: var(--void);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-pro:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.4);
}

.btn-pro.pulse {
    animation: btn-pro-pulse 2s ease-in-out infinite;
}

@keyframes btn-pro-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
    50% { box-shadow: 0 0 20px 5px rgba(251, 191, 36, 0.4); }
}

/* Effet shimmer sur bouton Pro */
.btn-pro::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Masquer bouton Pro si utilisateur Pro */
body.user-pro .btn-pro {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   STEPPER WORKFLOW
   ═══════════════════════════════════════════════════════════════ */
.workflow-section {
    margin-bottom: 1.5rem;
}

.stepper-card {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

.stepper-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--safelight) 0%, var(--safelight-bright) 50%, transparent 50%);
    transition: all 0.5s ease;
}

.stepper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.stepper-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

.stepper-hint {
    font-size: 0.75rem;
    color: var(--safelight);
}

.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.stepper-line {
    position: absolute;
    top: 20px;
    left: 50px;
    right: 50px;
    height: 2px;
    background: var(--safelight-dim);
    opacity: 0.4;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.step:hover {
    transform: translateY(-2px);
}

.step-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-elevated);
    border: 2px solid var(--safelight-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    position: relative;
}

.step:hover .step-icon {
    border-color: var(--safelight);
    box-shadow: 0 0 12px var(--safelight-glow);
}

.step-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: var(--stop-amber);
    color: var(--void);
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-label {
    font-size: 0.7rem;
    color: var(--safelight);
    transition: color 0.3s ease;
}

/* Step Counter Badge - Always visible */
.step-counter {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--safelight);
    color: var(--void);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.step-counter.highlight {
    background: var(--stop-amber);
    animation: counter-pulse 1s ease-in-out infinite;
}

@keyframes counter-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.step {
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION PROJETS EN COURS
   ═══════════════════════════════════════════════════════════════ */

.projets-section {
    margin-bottom: 2rem;
}

.projets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.projets-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.btn-nouveau-projet {
    background: var(--safelight);
    color: var(--void);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-nouveau-projet:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--safelight-glow);
}

/* Filtres */
.projets-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.projet-filter {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.projet-filter:hover {
    border-color: var(--safelight);
    color: var(--safelight);
}

.projet-filter.active {
    background: var(--safelight);
    border-color: var(--safelight);
    color: var(--void);
}

/* Liste */
.projets-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   ÉTAT VIDE — A du stock mais pas de projet
   ═══════════════════════════════════════════════════════════════ */

.projets-empty {
    background: linear-gradient(135deg, var(--surface) 0%, var(--darkroom) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Illustration avec glow */
.empty-illustration {
    margin-bottom: 1.5rem;
}

.empty-icon-container {
    position: relative;
    display: inline-block;
}

.projets-empty .empty-icon {
    font-size: 4rem;
    display: block;
    animation: empty-bounce 2s ease-in-out infinite;
}

@keyframes empty-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.empty-icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    animation: empty-glow-pulse 3s ease-in-out infinite;
    filter: blur(10px);
}

@keyframes empty-glow-pulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.2); }
}

/* Titre et sous-titre */
.projets-empty .empty-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.projets-empty .empty-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Bouton CTA attractif */
.btn-create-project {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    color: var(--void);
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 15px rgba(212, 165, 116, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.btn-create-project::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-create-project:hover::before {
    left: 100%;
}

.btn-create-project:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 25px rgba(212, 165, 116, 0.5),
        0 4px 10px rgba(0, 0, 0, 0.3);
}

.btn-create-project:active {
    transform: translateY(-1px);
}

.btn-create-project .btn-icon {
    font-size: 1.3rem;
}

.btn-create-project .btn-text {
    letter-spacing: 0.3px;
}

.btn-create-project .btn-arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-create-project:hover .btn-arrow {
    transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING CARD
   ═══════════════════════════════════════════════════════════════ */

.onboarding-card {
    background: linear-gradient(135deg, var(--surface) 0%, var(--darkroom) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   ILLUSTRATION ONBOARDING — NÉGATIF PREMIUM
   Film strip horizontal avec perforations latérales
   ═══════════════════════════════════════════════════════════════ */

.onboarding-illustration {
    position: relative;
    height: 100px;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Glow ambré en arrière-plan */
.film-glow {
    position: absolute;
    width: 280px;
    height: 120px;
    background: radial-gradient(ellipse, rgba(212, 165, 116, 0.25) 0%, rgba(212, 165, 116, 0.08) 50%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: glow-pulse 4s ease-in-out infinite;
    filter: blur(15px);
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Conteneur principal du film strip */
.film-strip-premium {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg,
        #1a1a26 0%,
        #12121a 50%,
        #0a0a0f 100%
    );
    border-radius: 4px;
    padding: 8px 0;
    z-index: 2;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.film-strip-premium:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.6),
        0 4px 12px rgba(212, 165, 116, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Bandes de perforations latérales */
.perforation-strip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 8px;
    background: linear-gradient(90deg,
        rgba(26, 26, 38, 0.8) 0%,
        rgba(18, 18, 26, 0.9) 100%
    );
}

.perforation-strip.left {
    border-right: 1px solid rgba(212, 165, 116, 0.1);
}

.perforation-strip.right {
    border-left: 1px solid rgba(212, 165, 116, 0.1);
}

/* Perforations individuelles */
.perf {
    width: 6px;
    height: 10px;
    background: var(--void);
    border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Conteneur des frames */
.film-frames {
    display: flex;
    gap: 10px;
    padding: 0 12px;
}

/* Frame individuelle */
.frame {
    width: 55px;
    height: 55px;
    background: linear-gradient(145deg,
        rgba(212, 165, 116, 0.08) 0%,
        rgba(42, 42, 58, 0.6) 50%,
        rgba(26, 26, 38, 0.8) 100%
    );
    border: 1px solid rgba(212, 165, 116, 0.2);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.frame:hover {
    border-color: rgba(212, 165, 116, 0.5);
    box-shadow:
        inset 0 0 15px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(212, 165, 116, 0.15);
}

/* Numéro de frame */
.frame-number {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(212, 165, 116, 0.5);
    text-shadow: 0 0 10px rgba(212, 165, 116, 0.3);
}

/* Effet shimmer qui traverse le film */
.film-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 165, 116, 0.08) 40%,
        rgba(212, 165, 116, 0.15) 50%,
        rgba(212, 165, 116, 0.08) 60%,
        transparent 100%
    );
    animation: shimmer-slide 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer-slide {
    0% { left: -100%; }
    50%, 100% { left: 200%; }
}

/* Titre et sous-titre */
.onboarding-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.onboarding-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING — ÉTAPES HORIZONTALES
   ═══════════════════════════════════════════════════════════════ */

.onboarding-steps.horizontal {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    margin: 0 0 1.5rem;
    flex-wrap: wrap;
    max-width: none;
}

.onboarding-steps.horizontal .onboarding-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 1.25rem;
    background: var(--darkroom);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    flex: 1;
    min-width: 140px;
    max-width: 180px;
    transition: all 0.3s ease;
}

.onboarding-steps.horizontal .onboarding-step:hover {
    border-color: var(--safelight-dim);
    transform: translateY(-2px);
}

.onboarding-steps.horizontal .step-number {
    width: 32px;
    height: 32px;
    background: var(--safelight);
    color: var(--void);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.onboarding-steps.horizontal .step-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.onboarding-steps.horizontal .step-content strong {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
}

.onboarding-steps.horizontal .step-content span {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.3;
}

/* CTA Onboarding */
.onboarding-cta {
    display: flex;
    justify-content: center;
}

.btn-onboarding-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--safelight);
    color: var(--void);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--safelight-glow);
}

.btn-onboarding-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--safelight-intense);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE ONBOARDING
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .onboarding-steps.horizontal {
        flex-direction: column;
        align-items: center;
    }

    .onboarding-steps.horizontal .onboarding-step {
        flex-direction: row;
        text-align: left;
        max-width: 100%;
        width: 100%;
        padding: 0.75rem 1rem;
    }

    .onboarding-steps.horizontal .step-number {
        margin-bottom: 0;
        margin-right: 0.75rem;
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER PROJETS — Actions et toggle
   ═══════════════════════════════════════════════════════════════ */

.projets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.projets-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.projets-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Toggle vue */
.view-toggle {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 2px;
}

.view-btn {
    background: transparent;
    border: none;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.view-btn.active {
    background: var(--safelight);
    color: var(--void);
}

/* Bouton intelligent */
.btn-nouveau-intelligent {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--safelight);
    color: var(--void);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-nouveau-intelligent:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--safelight-glow);
}

.btn-nouveau-intelligent .btn-icon {
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS COMPACTES — Vue par défaut
   ═══════════════════════════════════════════════════════════════ */

.projets-list.view-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.projet-card-compact {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.projet-card-compact:hover {
    border-color: var(--safelight-dim);
    background: var(--surface-elevated);
}

/* Emoji projet */
.projet-card-compact .projet-emoji {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--darkroom);
    border-radius: 8px;
    flex-shrink: 0;
}

/* Info projet */
.projet-card-compact .projet-info {
    min-width: 0;
    overflow: hidden;
}

.projet-card-compact .projet-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.projet-card-compact .projet-film {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
}

.projet-card-compact .projet-separator {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.projet-card-compact .projet-nom {
    color: var(--safelight);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projet-card-compact .projet-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0;
}

.projet-card-compact .projet-appareil {
    color: var(--text-secondary);
}

.projet-card-compact .projet-date {
    color: var(--text-muted);
}

.projet-card-compact .projet-notes {
    font-size: 0.75rem;
    opacity: 0.6;
    cursor: help;
    margin-left: 0.35rem;
    transition: opacity 0.2s ease;
}

.projet-card-compact .projet-notes:hover {
    opacity: 1;
}

/* Mini stepper compact */
.projet-card-compact .mini-stepper {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.projet-card-compact .mini-stepper .step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--surface-elevated);
    border: 1.5px solid var(--border-subtle);
}

.projet-card-compact .mini-stepper .step-dot.completed {
    background: var(--developer-green);
    border-color: var(--developer-green);
}

.projet-card-compact .mini-stepper .step-dot.active {
    background: var(--safelight);
    border-color: var(--safelight);
    box-shadow: 0 0 6px var(--safelight-glow);
}

.projet-card-compact .mini-stepper .step-line {
    width: 12px;
    height: 2px;
    background: var(--border-subtle);
}

.projet-card-compact .mini-stepper .step-line.completed {
    background: var(--developer-green);
}

.projet-card-compact .stepper-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 0.5rem;
    white-space: nowrap;
}

/* Badge statut — Style Gen Z */
.projet-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.projet-badge.shooting {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.1) 100%);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.projet-badge.developper {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    animation: badge-urgent 2s ease-in-out infinite;
}

@keyframes badge-urgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.projet-badge.tirer {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.1) 100%);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.projet-badge.termine {
    background: linear-gradient(135deg, rgba(245, 245, 245, 0.15) 0%, rgba(245, 245, 245, 0.05) 100%);
    color: var(--text-muted);
    border: 1px solid rgba(245, 245, 245, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   CTA GEN Z — Boutons attractifs et engageants
   ═══════════════════════════════════════════════════════════════ */

.projet-card-compact .projet-cta {
    background: linear-gradient(135deg, var(--safelight) 0%, #e8a54d 100%);
    color: var(--void);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(212, 165, 116, 0.3);
    position: relative;
    overflow: hidden;
}

/* Effet shimmer au repos */
.projet-card-compact .projet-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: cta-shimmer 3s ease-in-out infinite;
}

@keyframes cta-shimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.projet-card-compact .projet-cta:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow:
        0 6px 20px rgba(212, 165, 116, 0.5),
        0 0 30px rgba(212, 165, 116, 0.2);
}

.projet-card-compact .projet-cta:active {
    transform: translateY(-1px) scale(1.02);
}

/* CTA prioritaire (développer) — Rouge/orange qui pulse */
.projet-card-compact .projet-cta.primary {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    animation: cta-pulse 2s ease-in-out infinite;
}

@keyframes cta-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(238, 90, 36, 0.3); }
    50% { box-shadow: 0 4px 20px rgba(238, 90, 36, 0.6); }
}

.projet-card-compact .projet-cta.primary:hover {
    box-shadow:
        0 6px 25px rgba(238, 90, 36, 0.6),
        0 0 40px rgba(238, 90, 36, 0.3);
}

/* Favoris indicator */
.projet-card-compact .favoris-badge {
    font-size: 0.7rem;
    color: var(--safelight);
    margin-left: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   VUE TABLEAU
   ═══════════════════════════════════════════════════════════════ */

.projets-list.view-table {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
}

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

.projets-table thead {
    background: var(--darkroom);
}

.projets-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-subtle);
}

.projets-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.projets-table tbody tr {
    transition: background 0.2s ease;
}

.projets-table tbody tr:hover {
    background: var(--surface-hover);
}

.projets-table tbody tr:last-child td {
    border-bottom: none;
}

/* Cellule projet */
.table-projet-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-projet-cell .emoji {
    font-size: 1.25rem;
}

.table-projet-cell .info {
    display: flex;
    flex-direction: column;
}

.table-projet-cell .film {
    font-weight: 600;
    color: var(--text-primary);
}

.table-projet-cell .nom {
    font-size: 0.75rem;
    color: var(--safelight);
}

/* Cellule progrès */
.table-progress-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-progress-cell .dots {
    display: flex;
    gap: 2px;
}

.table-progress-cell .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-subtle);
}

.table-progress-cell .dot.completed {
    background: var(--developer-green);
}

.table-progress-cell .dot.active {
    background: var(--safelight);
}

.table-progress-cell .label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Cellule statut — Style Gen Z */
.table-status-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 16px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.table-status-badge.shooting {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.1) 100%);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.table-status-badge.developper {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    animation: badge-urgent 2s ease-in-out infinite;
}

.table-status-badge.tirer {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.1) 100%);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

/* Cellule action — Style Gen Z */
.table-action-btn {
    background: linear-gradient(135deg, var(--safelight) 0%, #e8a54d 100%);
    color: var(--void);
    border: none;
    padding: 0.4rem 0.9rem;
    border-radius: 16px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 6px rgba(212, 165, 116, 0.3);
    position: relative;
    overflow: hidden;
}

.table-action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: cta-shimmer 3s ease-in-out infinite;
}

.table-action-btn:hover {
    transform: translateY(-2px) scale(1.08);
    box-shadow:
        0 4px 15px rgba(212, 165, 116, 0.5),
        0 0 20px rgba(212, 165, 116, 0.2);
}

/* No results */
.no-results {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE PROJETS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .projet-card-compact {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: 0.5rem;
    }

    .projet-card-compact .mini-stepper {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .projet-card-compact .projet-cta {
        grid-column: 3;
        grid-row: 1;
    }
}

@media (max-width: 600px) {
    .projets-header {
        flex-direction: column;
        align-items: stretch;
    }

    .projets-header-actions {
        justify-content: space-between;
    }

    .projets-list.view-table {
        overflow-x: auto;
    }

    .projets-table {
        min-width: 500px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   CARD PROCHAINE ÉTAPE (LEGACY)
   ═══════════════════════════════════════════════════════════════ */
.next-action-section {
    margin-bottom: 1.5rem;
}

.next-action-card {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%);
    border: 1px solid var(--border-glow);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
    transition: all 0.5s ease;
}

.next-action-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    border-radius: 4px 0 0 4px;
    transition: all 0.5s ease;
}

.next-action-icon {
    width: 48px;
    height: 48px;
    background: var(--safelight-glow);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.5s ease;
}

.next-action-content {
    flex: 1;
}

.next-action-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--safelight);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.next-action-label .arrow {
    animation: arrow-bounce 1s ease-in-out infinite;
}

@keyframes arrow-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

.next-action-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.next-action-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.next-action-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    color: var(--void);
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    animation: cta-pulse 2.5s ease-in-out infinite;
}

@keyframes cta-pulse {
    0%, 100% { box-shadow: 0 2px 10px var(--safelight-glow); }
    50% { box-shadow: 0 4px 25px var(--safelight-intense); }
}

.next-action-cta:hover {
    transform: scale(1.03);
}

/* ═══════════════════════════════════════════════════════════════
   CARD PROCHAINE ÉTAPE - VERSION COMPLÈTE AVEC SUGGESTIONS
   ═══════════════════════════════════════════════════════════════ */

.completed-card {
    flex-direction: column !important;
    gap: 1rem;
    padding: 1.5rem !important;
}

.completed-card::before {
    display: none;
}

.completed-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.completed-icon {
    width: 56px;
    height: 56px;
    background: var(--safelight-glow);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.completed-title-wrap {
    flex: 1;
}

.completed-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: var(--safelight-glow);
    color: var(--safelight);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
    margin-bottom: 0.25rem;
}

.completed-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

/* Grille de suggestions */
.suggestions-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.suggestion-card {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.suggestion-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-color, var(--safelight));
}

.suggestion-card.main {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%);
    border-color: var(--border-glow);
}

.suggestion-card.main::before {
    width: 4px;
}

.suggestion-card:hover {
    border-color: var(--border-glow);
    transform: translateX(2px);
}

.suggestion-icon {
    width: 44px;
    height: 44px;
    background: color-mix(in srgb, var(--accent-color, var(--safelight)) 15%, transparent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.suggestion-icon.small {
    width: 36px;
    height: 36px;
    font-size: 1rem;
}

.suggestion-content {
    flex: 1;
    min-width: 0;
}

.suggestion-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.suggestion-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.suggestion-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    border: none;
    border-radius: 8px;
    color: var(--void);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.suggestion-cta:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px var(--safelight-glow);
}

.suggestion-cta-small {
    padding: 0.4rem 0.8rem;
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.suggestion-cta-small:hover {
    background: var(--surface-hover);
    border-color: var(--border-glow);
    color: var(--safelight);
}

/* Suggestions secondaires */
.secondary-suggestions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
}

.suggestion-card.secondary {
    padding: 0.75rem 1rem;
}

.suggestion-card.secondary .suggestion-title {
    font-size: 0.8rem;
}

/* Lab summary */
.lab-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
    width: 100%;
}

.summary-stat {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.summary-divider {
    color: var(--border-subtle);
}

/* Celebration mode */
.completed-card.celebration {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--developer-green) 8%, var(--surface)) 0%,
        var(--surface-elevated) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--developer-green) 30%, var(--border-glow)) !important;
}

.completed-card.celebration .completed-badge {
    background: color-mix(in srgb, var(--developer-green) 20%, transparent);
    color: var(--developer-green);
}

.completed-card.celebration .completed-icon {
    background: color-mix(in srgb, var(--developer-green) 15%, transparent);
    animation: celebrate-bounce 1s ease-in-out infinite;
}

@keyframes celebrate-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.celebration-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 16px;
}

.celebration-particles::before,
.celebration-particles::after {
    content: '✨';
    position: absolute;
    font-size: 1rem;
    opacity: 0.6;
    animation: float-particle 3s ease-in-out infinite;
}

.celebration-particles::before {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.celebration-particles::after {
    top: 30%;
    right: 15%;
    animation-delay: 1.5s;
}

@keyframes float-particle {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-10px) rotate(180deg);
        opacity: 0.7;
    }
}

/* Responsive completed card */
@media (max-width: 768px) {
    .completed-header {
        flex-direction: column;
        text-align: center;
    }

    .suggestion-card {
        flex-direction: column;
        text-align: center;
    }

    .suggestion-card::before {
        display: none;
    }

    .secondary-suggestions {
        grid-template-columns: 1fr;
    }

    .lab-summary {
        flex-wrap: wrap;
    }
}

/* Responsive Flux */
@media (max-width: 768px) {
    .flux-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .flux-filters {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .flux-item {
        flex-wrap: wrap;
    }

    .flux-item-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-subtle);
    }
}

/* ═══════════════════════════════════════════════════════════════
   MODALES
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 15, 0.85);
    z-index: 500;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--surface);
    border: 1px solid var(--border-glow);
    border-radius: 20px;
    max-width: 480px;
    width: 100%;
    padding: 2rem;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.modal-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.form-label .required {
    color: var(--danger);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--darkroom);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--safelight);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.modal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.modal-btn {
    flex: 1;
    padding: 0.75rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-btn.secondary {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.modal-btn.secondary:hover {
    border-color: var(--safelight);
    color: var(--safelight);
}

.modal-btn.primary {
    background: linear-gradient(135deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    border: none;
    color: var(--void);
    font-weight: 600;
}

.modal-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px var(--safelight-glow);
}

/* Modale Calculateur (plus large) */
.calculator-modal .modal {
    max-width: 600px;
}

.calc-result {
    background: var(--darkroom);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    margin-top: 1.5rem;
}

.calc-time {
    font-size: 3rem;
    font-weight: 700;
    color: var(--safelight);
}

.calc-time span {
    font-size: 1rem;
    color: var(--text-muted);
}

.calc-details {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Modale Licence */
.license-summary {
    background: var(--darkroom);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.license-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.license-name {
    font-size: 1.1rem;
    font-weight: 600;
}

.license-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--safelight);
}

.license-period {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.license-features {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    list-style: none;
    padding: 0;
}

.license-features li {
    margin-bottom: 0.4rem;
}

.btn-buy {
    display: block;
    text-align: center;
    padding: 1rem;
    background: linear-gradient(135deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    color: var(--void);
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.btn-buy:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px var(--safelight-glow);
}

.license-activate {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.license-activate p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.license-activate button {
    background: none;
    border: none;
    color: var(--safelight);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIQUE FREE / PRO
   ═══════════════════════════════════════════════════════════════ */
/* Masquer bannière freemium si Pro */
body.user-pro .freemium-banner {
    display: none;
}

body.user-pro .main-content {
    padding-bottom: 2rem;
}

/* Version badge dans sidebar */
body.user-pro .version-badge {
    color: var(--safelight);
}

body.user-pro .version-badge .dot {
    background: var(--safelight);
}

/* ═══════════════════════════════════════════════════════════════
   MODE CHAMBRE NOIRE - ICÔNES ET ÉLÉMENTS SUPPLÉMENTAIRES
   ═══════════════════════════════════════════════════════════════ */
body.darkroom-mode .nav-icon,
body.darkroom-mode .stat-icon svg,
body.darkroom-mode .alert-box-icon svg,
body.darkroom-mode .chimie-box-icon svg,
body.darkroom-mode .quick-action-icon svg,
body.darkroom-mode .quick-action-btn-icon svg {
    stroke: #cc3333 !important;
    color: #cc3333 !important;
}

body.darkroom-mode .nav-badge {
    background: #992222 !important;
    color: #ff8888 !important;
}

body.darkroom-mode .stat-icon {
    background: rgba(204, 51, 51, 0.15) !important;
}

body.darkroom-mode .stat-icon.gold,
body.darkroom-mode .stat-icon.blue,
body.darkroom-mode .stat-icon.green,
body.darkroom-mode .stat-icon.purple {
    background: rgba(204, 51, 51, 0.15) !important;
}

body.darkroom-mode .stat-icon.gold svg,
body.darkroom-mode .stat-icon.blue svg,
body.darkroom-mode .stat-icon.green svg,
body.darkroom-mode .stat-icon.purple svg {
    stroke: #cc3333 !important;
}

body.darkroom-mode .btn-primary {
    background: linear-gradient(135deg, #cc3333 0%, #992222 100%) !important;
    border-color: #cc3333 !important;
}

body.darkroom-mode .btn-secondary {
    border-color: rgba(204, 51, 51, 0.3) !important;
    color: #ff8888 !important;
}

body.darkroom-mode .btn-calculator {
    border-color: #cc3333 !important;
    color: #cc3333 !important;
}

body.darkroom-mode .btn-calculator:hover {
    background: #cc3333 !important;
    color: #0d0000 !important;
}

body.darkroom-mode a {
    color: #ff8888 !important;
}

body.darkroom-mode .logo-text,
body.darkroom-mode .logo-subtitle {
    color: #ff8888 !important;
}

body.darkroom-mode .sidebar-pro-btn {
    background: linear-gradient(135deg, #cc3333 0%, #992222 100%) !important;
}

body.darkroom-mode .license-dot {
    background: #cc3333 !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .darkroom-warning {
        left: 0;
    }

    .header-actions .btn-text {
        display: none;
    }

    .next-action-card {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .next-action-card::before {
        display: none;
    }

    .stepper {
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GESTION POSES ROULEAU
   ═══════════════════════════════════════════════════════════════ */

/* Contrôle des poses (+/-) */
.poses-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}

.poses-control .btn-poses {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.poses-control .btn-poses:hover {
    background: var(--safelight);
    color: var(--void);
    border-color: var(--safelight);
}

.poses-control .btn-poses:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.poses-control .btn-poses:disabled:hover {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.poses-control .poses-display {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-width: 80px;
    text-align: center;
}

.poses-control .poses-current {
    font-size: 20px;
    color: var(--safelight);
}

.poses-control .poses-total {
    font-size: 14px;
    color: var(--text-muted);
}

/* Input poses éditable */
.poses-input {
    width: 50px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--safelight);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 4px 8px;
    -moz-appearance: textfield;
}

.poses-input::-webkit-outer-spin-button,
.poses-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.poses-input:focus {
    outline: none;
    border-color: var(--safelight);
    box-shadow: 0 0 0 2px var(--safelight-glow);
}

/* Bouton Enregistrer poses */
.btn-save-poses {
    width: 100%;
    padding: 10px 16px;
    margin-top: 12px;
    background: var(--safelight);
    border: none;
    color: var(--void);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save-poses:hover {
    background: var(--safelight-bright);
    transform: translateY(-1px);
}

.btn-save-poses:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Barre de progression poses */
.poses-progress {
    width: 100%;
    height: 6px;
    background: var(--surface);
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}

.poses-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--safelight-dim), var(--safelight));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.poses-progress-bar.complete {
    background: linear-gradient(90deg, var(--developer-green), #6ee7a0);
}

/* Checkbox pellicule terminée */
.checkbox-terminee {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    cursor: pointer;
}

.checkbox-terminee input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--safelight);
    cursor: pointer;
}

.checkbox-terminee label {
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

/* Section poses dans card rouleau */
.rouleau-poses-section {
    padding: 12px 0;
    border-top: 1px solid var(--border-subtle);
    margin-top: 12px;
}

.rouleau-poses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.rouleau-poses-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rouleau-poses-percent {
    font-size: 12px;
    color: var(--safelight);
    font-weight: 500;
}

/* Bouton mettre à jour */
.btn-update-poses {
    width: 100%;
    padding: 10px;
    margin-top: 12px;
    background: transparent;
    border: 1px solid var(--safelight);
    color: var(--safelight);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-update-poses:hover {
    background: var(--safelight);
    color: var(--void);
}

/* ═══════════════════════════════════════════════════════════════
   MODALE WARNING (Confirmation fin rouleau)
   ═══════════════════════════════════════════════════════════════ */

.modal.modal-warning {
    text-align: center;
    max-width: 420px;
}

.modal-icon-warning {
    font-size: 56px;
    margin-bottom: 16px;
    line-height: 1;
}

.modal-warning-text {
    color: var(--text-primary);
    font-size: 16px;
    margin-bottom: 8px;
    line-height: 1.5;
}

.modal-warning-text strong {
    color: var(--stop-amber);
}

.modal-warning-subtext {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

.modal-actions-center {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.btn-warning {
    background: var(--stop-amber);
    color: var(--void);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-warning:hover {
    background: #e5a820;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--text-muted);
}

/* Bouton danger (suppression) */
.btn-danger {
    background: var(--danger);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Liste suppression dans modale */
.delete-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    text-align: left;
}

.delete-list li {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.delete-list li:last-child {
    border-bottom: none;
}

.delete-list li strong {
    color: var(--safelight);
}

.delete-irreversible {
    color: var(--danger);
    font-weight: 600;
    text-align: center;
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════
   MODALE NOUVEAU DÉVELOPPEMENT AVEC CALCULATEUR
   ═══════════════════════════════════════════════════════════════ */

.dev-modal-content {
    max-height: 70vh;
    overflow-y: auto;
}

/* Section Calculateur */
.calculator-section {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.calculator-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.calculator-header:hover {
    background: var(--surface-hover);
}

.calculator-toggle-icon {
    color: var(--safelight);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.calculator-hint {
    color: var(--text-muted);
    font-size: 12px;
    margin-left: auto;
}

.calculator-body {
    padding: 16px;
    border-top: 1px solid var(--border-subtle);
    background: var(--darkroom);
}

.calc-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.calc-field label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.calc-field select {
    width: 100%;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
}

.calc-field select:focus {
    outline: none;
    border-color: var(--safelight);
}

.calc-field input {
    width: 100%;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
}

.calc-field input:focus {
    outline: none;
    border-color: var(--safelight);
}

.calc-result-field {
    display: flex;
    flex-direction: column;
}

.calc-time-display {
    font-size: 28px;
    font-weight: 700;
    color: var(--safelight);
    font-variant-numeric: tabular-nums;
    text-align: center;
    padding: 8px;
    background: var(--safelight-glow);
    border-radius: 6px;
    border: 1px solid var(--safelight);
}

.calc-info {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 8px 0;
    min-height: 28px;
}

.calc-actions {
    display: flex;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 8px;
}

.calc-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--safelight-glow);
    border-radius: 8px;
    border: 1px solid var(--safelight);
}

.calc-time {
    font-size: 20px;
    font-weight: 600;
    color: var(--safelight);
}

/* Formulaire développement */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--safelight);
    box-shadow: 0 0 0 2px var(--safelight-glow);
}

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

/* Rating étoiles */
.rating-input {
    display: flex;
    gap: 4px;
}

.rating-input .star {
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

.rating-input .star.active,
.rating-input .star:hover {
    color: var(--safelight);
}

/* Modal large */
.modal-large {
    max-width: 600px;
    width: 90%;
}

/* Responsive */
@media (max-width: 600px) {
    .calc-row {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .calc-result {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIN CSS DASHBOARD V4
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   MODALE NOUVEAU TIRAGE - AVEC ASSISTANCE ET TIMER
   ═══════════════════════════════════════════════════════════════ */

.tirage-modal-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Toggle Assistance */
.assistance-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
}

.assistance-label {
    font-weight: 500;
}

.toggle-switch {
    position: relative;
    width: 48px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--surface-hover);
    border-radius: 24px;
    transition: 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-muted);
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--safelight);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
    background-color: var(--void);
}

.assistance-status {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Sections Tirage */
.tirage-section {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 16px;
}

.tirage-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--safelight);
}

/* Notes textarea pleine largeur */
.tirage-section textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    background: var(--darkroom);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
}

.tirage-section textarea:focus {
    outline: none;
    border-color: var(--safelight);
    box-shadow: 0 0 0 2px var(--safelight-glow);
}

/* Grade Control */
.grade-control {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-grade {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--safelight);
    background: transparent;
    color: var(--safelight);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-grade:hover {
    background: var(--safelight);
    color: var(--void);
}

.grade-value {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 40px;
    text-align: center;
}

/* Guide Pas à Pas */
.guide-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.guide-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--darkroom);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 13px;
}

.guide-step:hover {
    background: var(--surface-hover);
}

.guide-step input[type="checkbox"] {
    accent-color: var(--safelight);
    width: 16px;
    height: 16px;
}

.guide-tip {
    padding: 12px;
    background: var(--safelight-glow);
    border: 1px solid var(--safelight);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Suggestions */
.suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suggestions-empty, .suggestions-tip {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0;
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--darkroom);
    border-radius: 6px;
}

.suggestion-time {
    font-weight: 600;
    color: var(--safelight);
    min-width: 60px;
}

.suggestion-rating {
    color: var(--stop-amber);
    font-size: 12px;
}

.suggestion-notes {
    flex: 1;
    color: var(--text-muted);
    font-size: 12px;
}

/* Timer d'exposition */
.timer-section {
    text-align: center;
}

.timer-display {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 48px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--safelight);
    background: var(--void);
    padding: 20px 40px;
    border-radius: 12px;
    border: 2px solid var(--safelight);
    margin-bottom: 16px;
    display: inline-block;
    min-width: 160px;
}

.timer-warning {
    animation: timer-pulse 0.5s ease-in-out infinite;
}

.timer-finished {
    animation: timer-blink 1s infinite;
}

@keyframes timer-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes timer-blink {
    0%, 49% { opacity: 1; color: #cc3333; border-color: #cc3333; }
    50%, 100% { opacity: 0.3; }
}

.timer-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.btn-timer-adjust {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-timer-adjust:hover {
    border-color: var(--safelight);
    color: var(--safelight);
}

.timer-value-label {
    font-size: 16px;
    color: var(--text-secondary);
    min-width: 60px;
}

.timer-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.btn-timer-start, .btn-timer-stop {
    min-width: 120px;
}

/* Bandes d'essai */
.test-strips-section .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin: -16px;
    padding: 16px;
    border-radius: 8px;
    transition: background 0.2s;
}

.test-strips-section .accordion-header:hover {
    background: var(--surface-hover);
}

.test-strips-section .accordion-header h4 {
    margin: 0;
}

.accordion-icon {
    color: var(--text-muted);
    font-size: 12px;
}

.accordion-content {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.test-strips-controls {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.form-group-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.form-group-inline input {
    width: 60px;
    padding: 6px 8px;
    text-align: center;
    background: var(--darkroom);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-primary);
}

.form-group-inline input:focus {
    outline: none;
    border-color: var(--safelight);
}

.test-strips-preview {
    margin-bottom: 16px;
}

.strips-visual {
    display: flex;
    gap: 4px;
}

.strip-box {
    flex: 1;
    padding: 12px 8px;
    background: var(--darkroom);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.3s;
}

.strip-box.strip-active {
    background: var(--safelight-glow);
    border-color: var(--safelight);
    color: var(--safelight);
    animation: strip-pulse 1s ease-in-out infinite;
}

@keyframes strip-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--safelight-glow); }
    50% { box-shadow: 0 0 10px 2px var(--safelight-glow); }
}

.strip-box.strip-exposed {
    background: var(--surface-hover);
    color: var(--text-muted);
    opacity: 0.6;
}

.test-strips-status {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    min-height: 20px;
}

.test-complete {
    color: var(--developer-green);
    font-weight: 500;
}

/* Responsive Tirage Modal */
@media (max-width: 600px) {
    .timer-display {
        font-size: 36px;
        padding: 16px 24px;
    }

    .test-strips-controls {
        flex-direction: column;
        gap: 12px;
    }

    .strips-visual {
        flex-wrap: wrap;
    }

    .strip-box {
        min-width: 50px;
    }

    .suggestion-item {
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIN CSS MODALE TIRAGE
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PLANCHE CONTACT VIRTUELLE
   ═══════════════════════════════════════════════════════════════ */

.planche-contact-section {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
}

.planche-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.planche-header h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.planche-title-clickable {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.planche-title-clickable:hover {
    background: var(--safelight-glow);
    color: var(--safelight);
}

.planche-title-clickable .expand-icon {
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.planche-title-clickable:hover .expand-icon {
    opacity: 1;
}

.planche-stats {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Grille planche contact */
.planche-contact {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
    margin-bottom: 1rem;
}

.planche-vue {
    aspect-ratio: 1;
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-size: 0.65rem;
}

.planche-vue:hover {
    border-color: var(--safelight);
    transform: scale(1.1);
    z-index: 10;
}

/* Mini planche dans la carte développement - non cliquable */
.planche-contact-section .planche-vue {
    cursor: default;
}
.planche-contact-section .planche-vue:hover {
    transform: none;
}

.planche-vue-num {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.planche-vue-icon {
    font-size: 0.75rem;
}

/* États des vues */
.planche-vue.vierge .planche-vue-icon::after {
    content: '○';
    color: var(--text-muted);
}

.planche-vue.a-tirer {
    background: rgba(251, 191, 36, 0.1);
    border-color: var(--stop-amber);
}
.planche-vue.a-tirer .planche-vue-icon::after {
    content: '☆';
    color: var(--stop-amber);
}

.planche-vue.favori {
    background: rgba(212, 165, 116, 0.15);
    border-color: var(--safelight);
}
.planche-vue.favori .planche-vue-icon::after {
    content: '★';
    color: var(--safelight);
}

.planche-vue.tire {
    background: rgba(74, 222, 128, 0.1);
    border-color: var(--developer-green);
}
.planche-vue.tire .planche-vue-icon::after {
    content: '●';
    color: var(--developer-green);
}

.planche-vue.tire.favori {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.1) 50%, rgba(212, 165, 116, 0.15) 50%);
}
.planche-vue.tire.favori .planche-vue-icon::after {
    content: '★';
    color: var(--developer-green);
}

.planche-vue.rejete {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.5);
    opacity: 0.5;
}
.planche-vue.rejete .planche-vue-num {
    text-decoration: line-through;
    color: var(--text-muted);
}
.planche-vue.rejete .planche-vue-icon::after {
    content: '✕';
    color: #ef4444;
}

/* Badge nombre de tirages */
.planche-vue-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--developer-green);
    color: var(--void);
    font-size: 0.5rem;
    font-weight: 700;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Légende */
.planche-legende {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Actions */
.planche-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-tertiary {
    background: transparent;
    border: 1px dashed var(--border-subtle);
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-tertiary:hover {
    border-color: var(--safelight);
    border-style: solid;
    color: var(--safelight);
}

/* ═══════════════════════════════════════════════════════════════
   PLANCHE CONTACT FULLSCREEN — Style Négatif Argentique Premium
   ═══════════════════════════════════════════════════════════════ */

/* Container modal */
.modal-fullscreen {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 15, 0.98);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-fullscreen.active {
    opacity: 1;
    visibility: visible;
}

.planche-contact-modal {
    width: 95vw;
    max-width: 1400px;
    height: 92vh;
    background: var(--darkroom);
    border-radius: 16px;
    border: 1px solid rgba(212, 165, 116, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}

/* Header modale plein écran */
.planche-contact-modal .planche-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(212, 165, 116, 0.2);
    background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface) 100%);
    margin-bottom: 0;
}

.planche-contact-modal .planche-header h2 {
    flex: 1;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--safelight);
    margin: 0;
}

.planche-contact-modal .planche-info {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.planche-contact-modal .planche-header .btn-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.planche-contact-modal .planche-header .btn-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Barre de mode */
.planche-mode-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--void);
    border-bottom: 1px solid var(--border-subtle);
}

.planche-mode-bar > span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.mode-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    border: 2px solid var(--border-subtle);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s ease;
}

.mode-btn:hover {
    border-color: var(--safelight-dim);
    background: var(--surface-hover);
}

.mode-btn.active[data-mode="favori"] {
    border-color: var(--safelight);
    background: rgba(212, 165, 116, 0.15);
    color: var(--safelight);
    box-shadow: 0 0 15px rgba(212, 165, 116, 0.2);
}

.mode-btn.active[data-mode="rejete"] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   GRILLE DES NÉGATIFS
   ═══════════════════════════════════════════════════════════════ */

.planche-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    padding: 1.25rem;
    overflow-y: auto;
    align-content: start;
    background: linear-gradient(180deg, rgba(10,10,15,0.5) 0%, rgba(20,20,30,0.3) 100%);
    border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════
   CELLULE NÉGATIF — Design Film 35mm
   ═══════════════════════════════════════════════════════════════ */

.vue-cell {
    aspect-ratio: 3 / 2;
    min-height: 70px;
    background: linear-gradient(180deg, #151515 0%, #0d0d0d 100%);
    border: 3px solid #333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Perforations gauche */
.vue-cell::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 10%;
    bottom: 10%;
    width: 6px;
    background: repeating-linear-gradient(
        to bottom,
        #0a0a0f 0px,
        #0a0a0f 4px,
        transparent 4px,
        transparent 8px
    );
    border-radius: 1px;
}

/* Perforations droite */
.vue-cell::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 10%;
    bottom: 10%;
    width: 6px;
    background: repeating-linear-gradient(
        to bottom,
        #0a0a0f 0px,
        #0a0a0f 4px,
        transparent 4px,
        transparent 8px
    );
    border-radius: 1px;
}

/* Zone image centrale */
.vue-cell .vue-content {
    position: absolute;
    top: 6px;
    left: 14px;
    right: 14px;
    bottom: 6px;
    background: linear-gradient(145deg, #1e1e28 0%, #15151d 100%);
    border: 1px solid #2a2a3a;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* Effet grain de film */
.vue-cell .vue-content::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Numéro de vue */
.vue-cell .vue-numero {
    font-size: 1.1rem;
    font-weight: 700;
    color: #c0c0c0;
    font-family: 'Courier New', monospace;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    z-index: 1;
}

/* Icône statut */
.vue-cell .vue-statut {
    font-size: 0.9rem;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   ÉTATS DES NÉGATIFS
   ═══════════════════════════════════════════════════════════════ */

/* Disponible - état par défaut */
.vue-cell.disponible {
    border-color: #333;
}

.vue-cell.disponible:hover {
    border-color: #555;
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.vue-cell.disponible .vue-statut {
    color: #666;
}

/* FAVORI — Glow doré premium */
.vue-cell.favori {
    border-color: var(--safelight);
    box-shadow:
        0 0 20px rgba(212, 165, 116, 0.4),
        inset 0 0 30px rgba(212, 165, 116, 0.1);
    transform: scale(1.02);
}

.vue-cell.favori .vue-content {
    background: linear-gradient(145deg, rgba(212, 165, 116, 0.15) 0%, rgba(212, 165, 116, 0.05) 100%);
    border-color: rgba(212, 165, 116, 0.3);
}

.vue-cell.favori .vue-numero {
    color: var(--safelight-bright);
    text-shadow: 0 0 10px rgba(212, 165, 116, 0.5);
}

.vue-cell.favori .vue-statut {
    color: var(--safelight);
    text-shadow: 0 0 8px rgba(212, 165, 116, 0.6);
}

/* TIRÉ — Vert succès */
.vue-cell.tire {
    border-color: var(--developer-green);
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}

.vue-cell.tire .vue-content {
    background: linear-gradient(145deg, rgba(74, 222, 128, 0.1) 0%, rgba(74, 222, 128, 0.05) 100%);
    border-color: rgba(74, 222, 128, 0.3);
}

.vue-cell.tire .vue-numero {
    color: var(--developer-green);
}

.vue-cell.tire .vue-statut {
    color: var(--developer-green);
}

/* REJETÉ — Rouge barré */
.vue-cell.rejete {
    border-color: rgba(239, 68, 68, 0.5);
    opacity: 0.5;
}

.vue-cell.rejete .vue-content {
    background: repeating-linear-gradient(
        -45deg,
        transparent 0px,
        transparent 8px,
        rgba(239, 68, 68, 0.1) 8px,
        rgba(239, 68, 68, 0.1) 16px
    );
}

.vue-cell.rejete .vue-numero {
    color: #888;
    text-decoration: line-through;
}

.vue-cell.rejete .vue-statut {
    color: #ef4444;
}

.vue-cell.rejete:hover {
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   LÉGENDE ET FOOTER
   ═══════════════════════════════════════════════════════════════ */

.planche-contact-modal .planche-legende {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 0.75rem;
    background: var(--void);
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

.planche-contact-modal .legende-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.planche-contact-modal .legende-item .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid;
}

.dot.disponible {
    background: #333;
    border-color: #555;
}
.dot.favori {
    background: rgba(212, 165, 116, 0.3);
    border-color: var(--safelight);
    box-shadow: 0 0 8px rgba(212, 165, 116, 0.5);
}
.dot.tire {
    background: rgba(74, 222, 128, 0.3);
    border-color: var(--developer-green);
}
.dot.rejete {
    background: rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
}

/* Footer modale plein écran */
.planche-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-elevated) 100%);
    border-top: 1px solid rgba(212, 165, 116, 0.2);
}

.planche-resume {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.planche-resume span {
    margin-right: 0.5rem;
}

.planche-footer .planche-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE PLANCHE FULLSCREEN
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .planche-grid {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: 8px;
        padding: 1rem;
    }

    .vue-cell .vue-numero {
        font-size: 0.95rem;
    }

    .planche-contact-modal .planche-legende {
        gap: 1rem;
    }

    .planche-footer {
        flex-direction: column;
        gap: 1rem;
    }

    .planche-mode-bar {
        flex-wrap: wrap;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MENU CONTEXTUEL
   ═══════════════════════════════════════════════════════════════ */

.context-menu {
    position: fixed;
    background: var(--surface-elevated);
    border: 1px solid var(--border-glow);
    border-radius: 8px;
    padding: 0.5rem 0;
    min-width: 180px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.context-menu-item {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.context-menu-item:hover {
    background: var(--surface-hover);
    color: var(--safelight);
}

.context-menu-separator {
    height: 1px;
    background: var(--border-subtle);
    margin: 0.5rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   MODALE DÉTAIL VUE
   ═══════════════════════════════════════════════════════════════ */

.modal-small {
    max-width: 360px;
}

.vue-detail-status {
    text-align: center;
    padding: 1rem;
    background: var(--darkroom);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.vue-detail-favori {
    margin-bottom: 1rem;
}

.vue-detail-favori label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.vue-detail-favori input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--safelight);
}

.vue-detail-tirages {
    margin-bottom: 1rem;
}

.vue-detail-tirages h5 {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.tirage-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: var(--darkroom);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

.tirage-item-info {
    color: var(--text-secondary);
}

.tirage-item-rating {
    color: var(--safelight);
}

/* ═══════════════════════════════════════════════════════════════
   MODALE GESTION FAVORIS
   ═══════════════════════════════════════════════════════════════ */

.modal-large {
    max-width: 600px;
}

.modal-subtitle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.gestion-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gestion-section {
    background: var(--darkroom);
    border-radius: 10px;
    padding: 1rem;
}

.gestion-section h4 {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    color: var(--safelight);
}

.gestion-vues-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    min-height: 40px;
}

.gestion-vue-badge {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gestion-vue-badge:hover {
    border-color: var(--safelight);
}

.gestion-section-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-small {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    background: var(--safelight);
    color: var(--void);
    border: none;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-small:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--safelight-glow);
}

.btn-small.secondary {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.btn-small.secondary:hover {
    border-color: var(--safelight);
    color: var(--safelight);
    box-shadow: none;
}

.gestion-separator {
    height: 1px;
    background: var(--border-subtle);
    margin: 1.5rem 0;
}

.gestion-selection-rapide h4 {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.gestion-selection-rapide .hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.planche-mini {
    gap: 3px;
}

.planche-mini .planche-vue {
    font-size: 0.55rem;
}

.planche-mini .planche-vue-num {
    font-size: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE PLANCHE CONTACT
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .planche-contact {
        grid-template-columns: repeat(6, 1fr);
    }

    .gestion-sections {
        grid-template-columns: 1fr;
    }

    .planche-actions {
        flex-direction: column;
    }

    .planche-actions button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .planche-contact {
        grid-template-columns: repeat(4, 1fr);
    }

    .planche-legende {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   USER INFO — Authentification Clerk (Header)
   ═══════════════════════════════════════════════════════════════ */

.plan-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-badge.free,
.plan-badge.plan-free {
    background: rgba(245, 245, 245, 0.1);
    color: var(--text-muted);
}

.plan-badge.pro,
.plan-badge.plan-pro {
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.25) 0%, rgba(212, 165, 116, 0.15) 100%);
    color: var(--safelight);
    border: 1px solid rgba(212, 165, 116, 0.3);
    box-shadow: 0 0 10px rgba(212, 165, 116, 0.2);
}

/* Badge Early Adopter (générique) */
.early-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: var(--void);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────────────────────────────
   Classes utilitaires pour affichage conditionnel Pro/Free
   ───────────────────────────────────────────────────────────────── */

.hide-if-pro {
    /* Masqué dynamiquement par auth.js si user.plan === 'pro' */
}

.show-if-pro {
    display: none;
    /* Affiché dynamiquement par auth.js si user.plan === 'pro' */
}

/* ═══════════════════════════════════════════════════════════════
   WIDGET EARLY ADOPTER — Sidebar
   ═══════════════════════════════════════════════════════════════ */

.early-adopter-widget {
    background: linear-gradient(145deg, var(--surface) 0%, var(--surface-elevated) 100%);
    border: 1px solid var(--safelight-dim);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    position: relative;
    overflow: hidden;
    animation: widgetPulse 3s ease-in-out infinite;
}

.early-adopter-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 165, 116, 0.1),
        transparent
    );
    animation: widgetShimmer 3s ease-in-out infinite;
}

@keyframes widgetPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(212, 165, 116, 0.1); }
    50% { box-shadow: 0 0 30px rgba(212, 165, 116, 0.2); }
}

@keyframes widgetShimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.widget-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    color: var(--void);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.widget-title {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.widget-progress {
    margin-bottom: 12px;
}

.widget-progress .progress-bar {
    width: 100%;
    height: 8px;
    background: var(--surface);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.widget-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--developer-green) 0%, var(--safelight) 100%);
    border-radius: 4px;
    transition: width 0.5s ease-out;
    position: relative;
}

.widget-progress .progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: progressShimmer 2s ease-in-out infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.widget-progress .progress-text {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.widget-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.widget-price .price-old {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-decoration: line-through;
}

.widget-price .price-current {
    color: var(--safelight-bright);
    font-size: 1.5rem;
    font-weight: 700;
}

.widget-urgency {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-bottom: 12px;
    line-height: 1.4;
}

.widget-urgency strong {
    color: var(--safelight);
}

.widget-cta {
    width: 100%;
    background: linear-gradient(135deg, var(--safelight) 0%, var(--safelight-dim) 100%);
    color: var(--void);
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.widget-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 165, 116, 0.3);
}

.widget-cta:active {
    transform: translateY(0);
}

.widget-benefits {
    color: var(--text-muted);
    font-size: 0.65rem;
    text-align: center;
    margin-top: 10px;
    line-height: 1.4;
}

/* États d'urgence */
.early-adopter-widget.urgency-high {
    border-color: var(--danger);
    animation: urgentPulse 1s ease-in-out infinite;
}

.early-adopter-widget.urgency-high .widget-badge {
    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
}

@keyframes urgentPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.4); }
}

.early-adopter-widget.urgency-medium {
    border-color: var(--stop-amber);
}

.early-adopter-widget.urgency-medium .widget-badge {
    background: linear-gradient(135deg, var(--stop-amber) 0%, #f59e0b 100%);
}

/* État sold-out */
.early-adopter-widget.sold-out {
    border-color: var(--developer-green);
    animation: none;
}

.early-adopter-widget.sold-out .widget-badge {
    background: linear-gradient(135deg, var(--developer-green) 0%, #22c55e 100%);
}

.early-adopter-widget.sold-out .widget-cta {
    background: var(--surface-hover);
    color: var(--text-secondary);
    cursor: default;
}

.early-adopter-widget.sold-out .widget-cta:hover {
    transform: none;
    box-shadow: none;
}

.early-adopter-widget.sold-out .price-old {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .early-adopter-widget {
        margin: 12px 0;
        padding: 14px;
    }
}

/* ============================================
   LABO PARTAGÉ - RECETTES
   ============================================ */

/* Badge NEW dans la sidebar */
.nav-badge.badge-new {
    background: linear-gradient(135deg, var(--safelight), var(--safelight-bright));
    color: var(--void);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}

/* Filtres */
.recipes-filters {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-group {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.filter-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.filter-input:focus {
    outline: none;
    border-color: var(--safelight);
}

.filter-input::placeholder {
    color: var(--text-muted);
}

/* Limite info */
.recipes-limit-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--safelight-dim);
    border-radius: 10px;
    margin-bottom: 24px;
}

.limit-icon {
    font-size: 1.2rem;
}

.limit-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.limit-upgrade {
    margin-left: auto;
    color: var(--safelight);
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 500;
}

.limit-upgrade:hover {
    text-decoration: underline;
}

/* Grille des recettes */
.recipes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* Card recette */
.recipe-card {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.recipe-card:hover {
    border-color: var(--safelight-dim);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.recipe-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.recipe-film {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--safelight);
}

.recipe-rating {
    color: var(--safelight);
    font-size: 0.9rem;
}

.recipe-developer {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.recipe-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.recipe-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.recipe-detail-icon {
    color: var(--text-muted);
}

.recipe-detail-value {
    color: var(--text-primary);
    font-weight: 500;
}

.recipe-notes {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 16px;
    line-height: 1.4;
    max-height: 60px;
    overflow: hidden;
}

.recipe-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.recipe-author {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.recipe-actions {
    display: flex;
    gap: 8px;
}

.recipe-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.recipe-btn:hover {
    background: var(--surface-hover);
    border-color: var(--safelight-dim);
    color: var(--safelight);
}

.recipe-btn.liked {
    background: var(--safelight-glow);
    border-color: var(--safelight);
    color: var(--safelight);
}

.recipe-btn-report {
    color: var(--text-muted);
}

.recipe-btn-report:hover {
    color: var(--danger);
    border-color: var(--danger);
}

/* Empty state */
.recipes-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.recipes-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.recipes-empty-text {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.recipes-empty-hint {
    font-size: 0.9rem;
}

/* Pagination */
.recipes-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}

.pagination-info {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Responsive recettes */
@media (max-width: 768px) {
    .recipes-filters {
        flex-direction: column;
    }

    .filter-group {
        max-width: 100%;
    }

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