/* Stacked Cards Section Styles */
:root {
    --card-height: 500px;
    --card-top-offset: 120px;
    --card-margin: 2.5rem;
}

/* Fix for sticky positioning: The parent section must have overflow: visible */
/* Note: This is only needed for stacked cards, not for the methode grid section */
#methode.stacked-section {
    overflow: visible !important;
}

/* Fallback for browsers that don't support CSS variables */
@supports not (--css: variables) {
    :root {
        --card-height: 500px;
        --card-top-offset: 120px;
        --card-margin: 4rem;
    }
}

.stacked-section {
    padding: 4rem 0 8rem;
    /* Removed background-color and background-image to let body gradient show through */
    background: transparent;
    position: relative;
    overflow: visible;
}

.stacked-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

.stacked-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
}

.stacked-title {
    font-family: 'Inter', sans-serif;
    font-size: 4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary, #fff);
    letter-spacing: -0.03em;
}

.stacked-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: var(--text-secondary, #a1a1aa);
    font-weight: 400;
}

/* Cards Container */
.stacked-cards-wrapper {
    position: relative;
    /* Ensure the wrapper has visible overflow just in case */
    overflow: visible;
    /* Add padding to ensure the last card has time to stack and stay pinned before the section ends */
    padding-bottom: var(--space-24);
    /* Force hardware acceleration for better rendering in embedded browsers */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: scroll-position;
}

/* Individual Card */
.stacked-card {
    /* Fallback for browsers that don't support sticky */
    position: relative;
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: var(--card-top-offset);
    /* Height will be overridden per child to ensure they all exit together */
    height: var(--card-height);
    margin-bottom: var(--card-margin);

    /* Opaque background to prevent purple accumulation */
    background: var(--bg-secondary, #13131a);
    background: #13131a; /* Fallback for browsers without CSS variables */
    border: 1px solid var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border-radius: 24px;
    /* Subtle blur for edges if any transparency exists, but mostly opaque */
    /* backdrop-filter fallback - only apply if supported */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);

    overflow: hidden;
    display: flex;
    flex-direction: row;
    transform-origin: center top;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Force hardware acceleration for better rendering in embedded browsers */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
    /* Create a new stacking context to prevent rendering issues */
    isolation: isolate;
}

/* Fallback for browsers that don't support sticky positioning */
@supports not (position: sticky) {
    .stacked-card {
        position: relative;
        margin-bottom: 2rem;
    }
    
    .stacked-cards-wrapper {
        display: flex;
        flex-direction: column;
    }
}

/* Hover effect similar to bento cards */
.stacked-card:hover {
    border-color: var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    box-shadow: 0 20px 60px var(--purple-400-rgba-15), 0 0 40px var(--purple-400-rgba-05);
    /* Utilise les variables du thème */
    transform: translateY(-2px);
    /* Slight lift on hover */
}

/* Stacking Logic & Synchronized Exit 
   We increase the height of earlier cards so their bottom edge aligns with the last card.
   This ensures the container pushes them all up at the exact same scroll position.
*/
.stacked-card:nth-child(1) {
    top: calc(var(--card-top-offset) + 0px);
    height: calc(var(--card-height) + 40px);
    z-index: 1;
}

.stacked-card:nth-child(2) {
    top: calc(var(--card-top-offset) + 10px);
    height: calc(var(--card-height) + 30px);
    z-index: 2;
}

.stacked-card:nth-child(3) {
    top: calc(var(--card-top-offset) + 20px);
    height: calc(var(--card-height) + 20px);
    z-index: 3;
}

.stacked-card:nth-child(4) {
    top: calc(var(--card-top-offset) + 30px);
    height: calc(var(--card-height) + 10px);
    z-index: 4;
}

.stacked-card:nth-child(5) {
    top: calc(var(--card-top-offset) + 40px);
    height: var(--card-height);
    z-index: 5;
}

/* Card Content Layout */
.stacked-card-content {
    flex: 0 0 45%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    border-right: 1px solid var(--purple-400-rgba-1);
    /* Subtle purple separator - utilise la variable du thème */
    /* Slight gradient for depth */
    background: linear-gradient(to right, rgba(255, 255, 255, 0.01), transparent);
}

.stacked-card-visual {
    flex: 1;
    /* Transparent background to let blur effect work */
    background: transparent;
    position: relative;
    overflow: visible; /* Permettre aux ombres et animations de sortir */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

/* Card Typography */
.card-icon-wrapper {
    width: 48px;
    height: 48px;
    background: var(--purple-400-rgba-1);
    /* Purple tint bg - utilise la variable du thème */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    border: 1px solid var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.card-icon-wrapper svg {
    stroke: var(--purple-300, #c4b5fd);
    /* Lighter purple for icons */
}

.card-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    /* Match bento bold */
    color: #ffffff;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.card-description {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    /* Match bento text opacity */
    line-height: 1.5;
}

/* Visual Mockup Styles - Matching Bento Inner Cards */
.visual-mockup-container {
    width: 100%;
    height: 100%;
    /* Inner card style from bento */
    background: rgba(255, 255, 255, 0.03);
    background: rgba(26, 19, 37, 0.6); /* Fallback for browsers without backdrop-filter */
    border-radius: 16px;
    border: 1px solid var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    position: relative;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
    .visual-mockup-container {
        background: rgba(26, 19, 37, 0.8);
    }
    
    .stacked-card {
        background: #13131a;
    }
}

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

.mockup-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mockup-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mockup-title {
    font-size: 1rem;
    color: #fff;
    font-weight: 500;
}

.mockup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.mockup-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.mockup-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
}

.mockup-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.mockup-value {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 600;
}

/* Badges - Consistent Purple Theme */
.mockup-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Unified Purple Badge Style */
.badge-green,
.badge-red,
.badge-blue {
    background: var(--purple-400-rgba-1);
    /* Utilise la variable du thème */
    color: var(--purple-300, #c4b5fd);
    border: 1px solid var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
}

/* Progress bars and colored text overrides */
.mockup-value[style*="color: #10b981"] {
    color: var(--purple-400, #a78bfa) !important;
}

/* Script Generator Phases - 3 Animated Phases */
.script-generator-phases {
    position: relative;
    height: 100%;
    min-height: 400px;
    background: transparent !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible; /* Permettre aux ombres et animations de sortir */
    padding: 0.5rem 2rem 2rem;
}

.script-phase {
    position: absolute;
    top: 110px;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.script-phase.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 2;
}

.script-phase-1.active {
    animation: phase1Show 0.8s ease-out;
}

.script-phase-2.active {
    animation: phase2Show 0.8s ease-out;
}

.script-phase-3.active {
    animation: phase3Show 0.8s ease-out;
}

@keyframes phase1Show {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes phase2Show {
    0% { opacity: 0; transform: translateX(30px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes phase3Show {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.script-phase-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.script-phase-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 2px solid var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    box-shadow: 0 0 20px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    transition: all 0.3s ease;
}

.script-phase.active .script-phase-number {
    background: var(--purple-400);
    /* Utilise la variable du thème */
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 25px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
}

.script-phase-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    transition: all 0.3s ease;
}

.script-phase.active .script-phase-title {
    color: var(--purple-400);
    /* Utilise la variable du thème */
    font-weight: 600;
}

.script-phase-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    height: 100%;
}

.script-phase-content.script-phase-center {
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
}

.script-phase-content.script-phase-result {
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Phase 1 - Buttons Selection */
.script-phase-content.script-phase-buttons {
    grid-template-columns: 1fr;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1rem;
    overflow: visible; /* Permettre aux ombres de sortir */
}

.script-buttons-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    overflow: visible; /* Permettre aux ombres de sortir */
}

.script-button-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.script-button-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    transform: translateY(-1px);
}

.script-button-selected {
    background: var(--purple-400-rgba-08);
    /* Utilise la variable du thème */
    border-color: var(--purple-400-rgba-5);
    /* Utilise la variable du thème */
    box-shadow: 0 0 20px var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
}

.script-button-clicking {
    transform: scale(0.98);
    box-shadow: 0 0 30px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    border-color: var(--purple-400-rgba-8);
    /* Utilise la variable du thème */
}

.script-button-clicked {
    animation: buttonClickPulse 0.5s ease-out;
}

@keyframes buttonClickPulse {
    0% {
        transform: scale(0.98);
        box-shadow: 0 0 30px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 40px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 20px var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    }
}

.script-button-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--purple-400-rgba-1);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    flex-shrink: 0;
}

.script-button-selected .script-button-icon {
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border-color: var(--purple-400-rgba-5);
    /* Utilise la variable du thème */
    box-shadow: 0 0 12px var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
}

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

.script-button-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.25rem;
}

.script-button-description {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

.script-button-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--purple-400);
    /* Utilise la variable du thème */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 0 12px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    flex-shrink: 0;
}

/* Phase 2 - Questions */
.script-phase-content.script-phase-questions {
    grid-template-columns: 1fr;
    height: 100%;
    overflow-y: visible;
}

.script-questions-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.script-question-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.script-question-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--purple-400-rgba-1);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border-radius: 6px;
}

.script-question-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    flex: 1;
}

.script-question-required {
    color: rgba(239, 68, 68, 0.8);
    font-weight: 600;
}

.script-question-answer {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    min-height: 1.75rem;
    display: flex;
    align-items: center;
    position: relative;
}

.script-question-answer.script-question-empty {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.script-typing-text {
    display: inline-block;
}

.script-typing-cursor {
    display: inline-block;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    font-weight: 300;
    animation: typingCursor 1s ease-in-out infinite;
    margin-left: 2px;
    vertical-align: baseline;
}

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

.script-typing-text.typing-complete + .script-typing-cursor {
    display: none;
}

.script-question-duration {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.5rem;
    margin-top: 0.375rem;
}

.script-duration-slider {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.script-duration-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    text-align: center;
}

.script-duration-track {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    cursor: pointer;
}

.script-duration-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--purple-400-rgba-6), var(--purple-400));
    /* Utilise les variables du thème */
    border-radius: 3px;
    box-shadow: 0 0 10px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    transition: width 0.3s ease;
}

.script-duration-fill-animated {
    width: 0% !important;
    animation: durationFill 1.5s ease-out forwards;
    animation-delay: 2.5s;
}

.script-duration-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--purple-400);
    /* Utilise la variable du thème */
    border: 2px solid white;
    box-shadow: 0 0 10px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    cursor: grab;
    transition: left 0.3s ease;
}

.script-duration-handle-animated {
    left: 0% !important;
    animation: durationHandle 1.5s ease-out forwards;
    animation-delay: 2.5s;
}

.script-duration-handle:active {
    cursor: grabbing;
}

.script-duration-typing {
    display: inline-block;
    min-width: 20px;
    text-align: right;
}

@keyframes durationFill {
    from { width: 0%; }
    to { width: 50%; }
}

@keyframes durationHandle {
    from { left: 0%; }
    to { left: 50%; }
}

/* Phase 1 & 2 & 3 - Chatbot Styles */
.script-phase-content.script-phase-chatbot {
    grid-template-columns: 1fr;
    height: 100%;
}

.script-chatbot-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
}

.script-chatbot-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.script-chatbot-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 2px solid var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
}

.script-chatbot-name {
    flex: 1;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.script-chatbot-status {
    font-size: 0.75rem;
    color: var(--purple-400-rgba-8);
    /* Utilise la variable du thème */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.script-chatbot-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--purple-400);
    /* Utilise la variable du thème */
    box-shadow: 0 0 10px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    animation: statusPulse 2s ease-in-out infinite;
}

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

.script-chatbot-messages {
    flex: 1;
    overflow: hidden;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-height: 0;
}

.script-message {
    display: flex;
    gap: 0.5rem;
    animation: messageSlideIn 0.4s ease-out;
    flex-shrink: 0;
}

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

.script-message-user {
    justify-content: flex-end;
}

.script-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    flex-shrink: 0;
}

.script-message-content {
    max-width: 70%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.script-message-user .script-message-content {
    align-items: flex-end;
}

.script-message-text {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.script-message-bot .script-message-text {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-bottom-left-radius: 4px;
}

.script-message-user .script-message-text {
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    color: var(--purple-400);
    /* Utilise la variable du thème */
    border-bottom-right-radius: 4px;
    box-shadow: 0 0 15px var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
}

.script-message-time {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    padding: 0 0.5rem;
}

.script-message.typing .script-message-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.script-typing-indicator {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.script-typing-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    animation: typingDot 1.4s ease-in-out infinite;
}

.script-typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.script-typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

.script-chatbot-input {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.script-chatbot-input input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    outline: none;
    transition: all 0.3s ease;
}

.script-chatbot-input input:focus {
    border-color: var(--purple-400-rgba-5);
    /* Utilise la variable du thème */
    box-shadow: 0 0 10px var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
}

.script-chatbot-input input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.script-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    color: var(--purple-400);
    /* Utilise la variable du thème */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.script-send-btn:hover:not(:disabled) {
    background: var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    box-shadow: 0 0 15px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    transform: translateY(-2px);
}

.script-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Phase 1 Styles (old - keeping for reference) */
.script-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.script-panel-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.script-option {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.script-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
}

.script-option-selected {
    background: var(--purple-400-rgba-15);
    /* Utilise la variable du thème */
    border-color: var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    color: var(--purple-400);
    /* Utilise la variable du thème */
    box-shadow: 0 0 20px var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
}

.script-option-glow {
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    filter: blur(8px);
    z-index: -1;
}

.script-detail-field {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
}

.script-field-content {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    flex: 1;
}

.script-field-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    flex: 1;
}

.script-edit-icon {
    flex-shrink: 0;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.script-edit-icon:hover {
    opacity: 1;
}

/* Phase 2 Styles */
.script-generating-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.script-generating-dots {
    display: flex;
    gap: 0.5rem;
}

.script-generating-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--purple-400-rgba-8);
    /* Utilise la variable du thème */
    box-shadow: 0 0 15px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    animation: generatingDot 1.4s ease-in-out infinite;
}

.script-generating-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.script-generating-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes generatingDot {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.script-generating-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.script-progress-bar {
    width: 100%;
    max-width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.script-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple-400-rgba-6), var(--purple-400));
    /* Utilise les variables du thème */
    border-radius: 2px;
    width: 0%;
    animation: progressFill 3s ease-in-out infinite;
    box-shadow: 0 0 10px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
}

@keyframes progressFill {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

.script-generate-btn {
    padding: 0.875rem 2rem;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    border-radius: 12px;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    transition: all 0.3s ease;
}

.script-generate-btn:hover {
    box-shadow: 0 0 30px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    transform: translateY(-2px);
}

.script-btn-glow {
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    background: var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    filter: blur(10px);
    z-index: -1;
    animation: btnGlow 2s ease-in-out infinite;
}

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

/* Phase 3 - Chat Result Styles (Design réel de l'app) */
.script-chat-result {
    padding: 0;
    background: transparent !important;
    border: none !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: flex-start;
}

.script-chat-result .script-chatbot-messages {
    padding: 0.75rem 1rem;
    gap: 0.75rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    align-items: flex-start;
}

.script-message {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.script-message-bot {
    justify-content: flex-start;
}

.script-message-user {
    flex-direction: row;
    justify-content: flex-start;
}

.script-message-avatar-bot {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--purple-400), var(--purple-500));
    /* Utilise les variables du thème */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.script-message-avatar-bot svg {
    width: 14px;
    height: 14px;
}

.script-message-avatar-user {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--purple-400), var(--purple-500));
    /* Utilise les variables du thème */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.script-message-bubble {
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    max-width: calc(100% - 2rem);
    word-wrap: break-word;
    min-width: 0;
    text-align: left;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    width: auto;
}

.script-message-bubble-bot {
    background: rgba(255, 255, 255, 0.05);
    border-top-left-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.script-message-bubble-user {
    background: var(--purple-400-rgba-15);
    /* Utilise la variable du thème */
    border-top-right-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
}

.script-message-text-content {
    font-size: 0.75rem;
    line-height: 1.4;
    color: inherit;
    text-align: left !important;
    display: block;
    width: 100%;
}

.script-message-text-simple {
    white-space: normal;
    text-align: left !important;
    display: block;
    width: 100%;
    word-wrap: break-word;
}

.script-generating-indicator {
    display: inline-block;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    animation: generatingPulse 1s ease-in-out infinite;
    margin-left: 2px;
}

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

.script-message-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.375rem;
    gap: 0.5rem;
}

.script-message-info {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.script-message-copy-btn {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.script-message-copy-btn svg {
    width: 11px;
    height: 11px;
}

.script-message-copy-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

.script-chat-result .script-chatbot-input {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

.script-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(255, 255, 255, 0.05);
    flex: 1;
    min-width: 0;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
}

.script-input-icon {
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.script-input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    min-width: 0;
    padding: 0.25rem 0;
}

.script-input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.script-input-count {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.script-input-circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.script-input-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.script-input-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

.script-send-btn-purple {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--purple-400);
    /* Utilise la variable du thème */
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 15px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    flex-shrink: 0;
    padding: 0;
}

.script-send-btn-purple:hover {
    background: var(--purple-400-rgba-9);
    /* Utilise la variable du thème */
    box-shadow: 0 0 20px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
}

/* Phase Indicator */
.script-phase-indicator {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 10;
}

.script-phase-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.script-phase-dot.active {
    background: var(--purple-400);
    /* Utilise la variable du thème */
    box-shadow: 0 0 15px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    width: 30px;
    border-radius: 5px;
}

.script-steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    margin-top: 0;
    padding: 0.5rem 0 0 0;
    flex-shrink: 0;
    z-index: 10;
    position: relative;
}

.script-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.script-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.script-step-item.active .script-step-circle {
    background: var(--purple-400);
    /* Utilise la variable du thème */
    border-color: var(--purple-400);
    /* Utilise la variable du thème */
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 15px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
}

.script-step-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    text-align: center;
}

.script-step-item.active .script-step-label {
    color: var(--purple-400);
    /* Utilise la variable du thème */
    font-weight: 600;
}

.script-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.script-step-dot.active {
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border-color: var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    color: var(--purple-400);
    /* Utilise la variable du thème */
    box-shadow: 0 0 15px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
}

.script-step-line {
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
}

.script-step-line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    animation: stepLineFill 2s ease-in-out infinite;
}

.script-steps-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    position: relative;
}

.script-step-preview {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    opacity: 0.5;
    transition: all 0.3s ease;
    transform: scale(0.95);
}

.script-step-preview.active {
    opacity: 1;
    border-color: var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    box-shadow: 0 4px 20px var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    transform: scale(1);
}

.script-step-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--purple-400-rgba-8);
    /* Utilise la variable du thème */
    margin-bottom: 0.75rem;
    text-align: center;
}

.script-mini-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.script-mini-option {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.script-mini-option.selected {
    background: var(--purple-400-rgba-15);
    /* Utilise la variable du thème */
    border-color: var(--purple-400-rgba-5);
    /* Utilise la variable du thème */
    color: var(--purple-400);
    /* Utilise la variable du thème */
    box-shadow: 0 0 10px var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
}

.script-mini-field {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.script-mini-panel.script-mini-center {
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 80px;
}

.script-mini-status {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.script-mini-btn {
    padding: 0.5rem 1rem;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-5);
    /* Utilise la variable du thème */
    border-radius: 8px;
    font-size: 0.7rem;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    text-align: center;
    box-shadow: 0 0 15px var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
}

.script-mini-panel.script-mini-preview {
    gap: 0.4rem;
}

.script-mini-text {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.script-mini-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.script-preview-lines {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    pointer-events: none;
    z-index: 0;
}

@keyframes stepLineFill {
    0% { width: 0; }
    50% { width: 100%; }
    100% { width: 0; }
}

@media (max-width: 968px) {
    .script-steps-preview {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .script-steps-indicator {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .script-step-line {
        width: 20px;
    }
}

.script-panel {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.script-panel-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.script-option {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.script-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
}

.script-option-selected {
    background: var(--purple-400-rgba-1);
    /* Utilise la variable du thème */
    border-color: var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    color: var(--purple-400);
    /* Utilise la variable du thème */
    box-shadow: 0 0 20px var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
}

.script-option-glow {
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    filter: blur(8px);
    z-index: -1;
}

.script-panel-center {
    justify-content: space-between;
    align-items: center;
}

.script-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.script-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--purple-400-rgba-8);
    /* Utilise la variable du thème */
    box-shadow: 0 0 10px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
}

.script-step {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.script-panel-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    justify-content: center;
}

.script-scenario-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.script-generate-btn {
    padding: 0.75rem 2rem;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    border-radius: 12px;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    transition: all 0.3s ease;
}

.script-generate-btn:hover {
    box-shadow: 0 0 30px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    transform: translateY(-2px);
}

.script-btn-glow {
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    background: var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    filter: blur(10px);
    z-index: -1;
}

.script-detail-field {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
}

.script-field-content {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    flex: 1;
}

.script-field-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    flex: 1;
}

.script-edit-icon {
    flex-shrink: 0;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.script-edit-icon:hover {
    opacity: 1;
}

.script-connection-line {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.script-line-bottom {
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 150px;
}

.script-line-right {
    top: 20%;
    left: -1.5rem;
    width: 100px;
    height: 200px;
}

.script-lead-magnet-icon {
    position: absolute;
    bottom: -2rem;
    left: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--purple-400-rgba-8);
    /* Utilise la variable du thème */
    font-size: 0.7rem;
    z-index: 2;
}

.script-lead-magnet-icon svg {
    filter: drop-shadow(0 0 8px var(--purple-400-rgba-6));
    /* Utilise la variable du thème */
}

@media (max-width: 968px) {
    .script-buttons-list {
        max-width: 100%;
    }
    
    .script-questions-container {
        max-width: 100%;
    }
}

/* Formation Modules Interface Styles */
.formation-modules {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    padding: 0.5rem;
    overflow: hidden;
}

.formation-modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
    height: 100%;
}


.formation-module-card {
    width: 100%;
    min-width: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.625rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    position: relative;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    justify-content: space-between;
}

.formation-module-card:hover {
    transform: translateY(-2px);
    border-color: var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 12px var(--purple-400-rgba-15);
    /* Utilise la variable du thème */
}

.formation-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}

.formation-module-menu {
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.formation-new-lesson-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.4rem;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    border-radius: 4px;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.formation-new-lesson-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.formation-new-lesson-btn:hover {
    background: var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    border-color: var(--purple-400-rgba-5);
    /* Utilise la variable du thème */
    transform: scale(1.05);
    box-shadow: 0 2px 8px var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
}

.formation-new-lesson-btn:hover::before {
    width: 100px;
    height: 100px;
}

.formation-new-lesson-btn:active {
    transform: scale(0.98);
}

.formation-new-lesson-btn:hover {
    background: var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
}

.formation-new-lesson-btn svg {
    width: 11px;
    height: 11px;
    color: var(--purple-400);
    /* Utilise la variable du thème */
}

.formation-favorite-btn svg {
    width: 13px;
    height: 13px;
}

.formation-favorite-btn {
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.formation-favorite-btn:hover {
    color: rgba(239, 68, 68, 0.8);
    transform: scale(1.15);
}

.formation-favorite-btn:active {
    transform: scale(1.3);
    color: rgba(239, 68, 68, 1);
}

.formation-module-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.25rem 0;
}

.formation-module-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--purple-400-rgba-2), var(--purple-500-rgba-2));
    /* Utilise les variables du thème */
    border: 1px solid var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    box-shadow: 0 0 20px var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
}

.formation-rocket-icon {
    background: linear-gradient(135deg, var(--purple-400-rgba-3), var(--purple-500-rgba-3));
    /* Utilise les variables du thème */
    box-shadow: 0 0 20px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    animation: rocketPulse 2s ease-in-out infinite;
}

@keyframes rocketPulse {
    0%, 100% {
        box-shadow: 0 0 20px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    }
    50% {
        box-shadow: 0 0 30px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
    }
}

.formation-module-card:hover .formation-rocket-icon {
    animation: rocketFly 0.6s ease-in-out;
    transform: translateY(-3px);
}

@keyframes rocketFly {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-5px) rotate(-5deg);
    }
    100% {
        transform: translateY(-3px) rotate(0deg);
    }
}

.formation-rocket-icon svg {
    width: 26px;
    height: 26px;
}

.formation-module-icon svg {
    width: 22px;
    height: 22px;
}

.formation-module-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.25rem 0;
}

.formation-module-stat {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
}

.formation-module-card:hover .formation-module-stat {
    color: rgba(255, 255, 255, 0.8);
}

.formation-module-stat svg {
    width: 11px;
    height: 11px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

.formation-module-card:hover .formation-module-stat svg {
    color: var(--purple-400-rgba-8);
    /* Utilise la variable du thème */
    transform: scale(1.1);
}

.formation-module-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    line-height: 1.2;
    transition: color 0.2s ease;
    margin: 0.125rem 0;
}

.formation-module-card:hover .formation-module-title {
    color: var(--purple-400);
    /* Utilise la variable du thème */
}

.formation-module-description {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    line-height: 1.2;
    transition: color 0.2s ease;
    margin-bottom: 0.25rem;
}

.formation-module-card:hover .formation-module-description {
    color: rgba(255, 255, 255, 0.8);
}

.formation-module-progress {
    margin-top: auto;
    padding-top: 0.25rem;
}

.formation-module-progress-bar {
    width: 100%;
    height: 12px;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.formation-module-card:hover .formation-module-progress-bar {
    height: 13px;
    box-shadow: 0 0 8px var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
}

.formation-module-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple-400-rgba-6), var(--purple-400));
    /* Utilise les variables du thème */
    border-radius: 3px;
    transition: width 0.5s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    position: relative;
    overflow: hidden;
}

.formation-module-progress-fill::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 2s infinite;
}

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

.formation-module-card:hover .formation-module-progress-fill {
    box-shadow: 0 0 15px var(--purple-400-rgba-6);
    /* Utilise la variable du thème */
}

.formation-module-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.6rem;
    font-weight: 700;
    color: white;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    padding: 0 2px;
    min-width: 28px;
    text-align: center;
}

/* Responsive pour la grille de modules */
@media (max-width: 768px) {
    .formation-modules-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .formation-modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Assets Interface Styles */
.assets-interface {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    gap: 1rem;
}

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

.assets-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.assets-title-icon {
    color: var(--purple-400);
    /* Utilise la variable du thème */
    width: 20px;
    height: 20px;
}

.assets-title {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--purple-400), var(--purple-500));
    /* Utilise les variables du thème (remplace le rose par du mauve pour la cohérence) */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.assets-header-buttons {
    display: flex;
    gap: 0.5rem;
}

.assets-header-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assets-header-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.assets-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
}

.assets-search-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.assets-search-bar svg {
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.assets-search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
}

.assets-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.assets-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.assets-filter-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assets-filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.assets-filter-btn svg {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.assets-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    overflow: hidden;
    position: relative;
    padding-bottom: 1rem;
}

.assets-list-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(18, 18, 23, 1), rgba(18, 18, 23, 0));
    pointer-events: none;
    z-index: 1;
}

.assets-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.assets-card-fade {
    opacity: 0.6;
    transform: scale(0.95);
}

.assets-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.assets-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    flex-shrink: 0;
}

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

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

.assets-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.125rem;
}

.assets-card-description {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
}

.assets-card-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.assets-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assets-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
}

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

.assets-action-btn:first-child svg {
    fill: rgba(239, 68, 68, 1);
    color: rgba(239, 68, 68, 1);
}

/* Leaderboards Interface Styles */
.leaderboards-interface {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.75rem;
    padding-bottom: 1rem;
    gap: 0.625rem;
    overflow: hidden;
}

.leaderboards-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.leaderboards-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.leaderboards-title-icon {
    color: var(--purple-400);
    /* Utilise la variable du thème */
    width: 16px;
    height: 16px;
}

.leaderboards-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    margin: 0;
}

.leaderboards-badges {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

.leaderboards-badge {
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.leaderboards-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.leaderboards-metric-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.leaderboards-metric-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    flex-shrink: 0;
}

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

.leaderboards-metric-label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.125rem;
}

.leaderboards-metric-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.leaderboards-main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Compact Ranking Section */
.leaderboards-ranking-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.leaderboards-ranking-header-compact {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.leaderboards-ranking-header-compact svg {
    width: 12px;
    height: 12px;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    flex-shrink: 0;
}

.leaderboards-ranking-card-compact {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.leaderboards-ranking-avatar-compact {
    flex-shrink: 0;
}

.leaderboards-ranking-avatar-bg-compact {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--purple-400-rgba-3), var(--purple-500-rgba-3));
    /* Utilise les variables du thème */
    border: 1px solid var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--purple-400);
    /* Utilise la variable du thème */
}

.leaderboards-ranking-content-compact {
    flex: 1;
    min-width: 0;
}

.leaderboards-ranking-name-compact {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.125rem;
}

.leaderboards-ranking-level-compact {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
}

.leaderboards-ranking-badge-compact {
    padding: 0.25rem 0.5rem;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    flex-shrink: 0;
}

.leaderboards-grade-card,
.leaderboards-streak-card {
    padding: 0.625rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.leaderboards-grade-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.leaderboards-grade-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.leaderboards-grade-title svg {
    width: 12px;
    height: 12px;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    flex-shrink: 0;
}

.leaderboards-grade-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.4rem;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--purple-400);
    /* Utilise la variable du thème */
}

.leaderboards-grade-badge svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.leaderboards-grade-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.125rem;
}

.leaderboards-grade-progress-text {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.375rem;
}

.leaderboards-grade-progress {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.leaderboards-grade-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.leaderboards-grade-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple-400-rgba-6), var(--purple-400));
    /* Utilise les variables du thème */
    border-radius: 3px;
    transition: width 0.3s ease;
}

.leaderboards-grade-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
}

.leaderboards-streak-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.leaderboards-streak-header svg {
    width: 12px;
    height: 12px;
    color: rgba(255, 165, 0, 1);
    flex-shrink: 0;
}

.leaderboards-streak-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
    margin: 0.25rem 0;
}

.leaderboards-streak-message {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
}

.leaderboards-streak-message svg {
    width: 10px;
    height: 10px;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    flex-shrink: 0;
}

.leaderboards-ranking-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.leaderboards-ranking-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.leaderboards-ranking-header svg {
    width: 18px;
    height: 18px;
    color: var(--purple-400);
    /* Utilise la variable du thème */
}

.leaderboards-tabs {
    display: flex;
    gap: 0.5rem;
}

.leaderboards-tab {
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.leaderboards-tab.active {
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border-color: var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
    color: var(--purple-400);
    /* Utilise la variable du thème */
}

.leaderboards-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.leaderboards-ranking-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.leaderboards-ranking-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: var(--purple-400-rgba-1);
    /* Utilise la variable du thème */
    border: 2px solid var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    border-radius: 8px;
}

.leaderboards-ranking-avatar {
    flex-shrink: 0;
}

.leaderboards-ranking-avatar-bg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 193, 7, 1), rgba(255, 152, 0, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.9);
    font-weight: 700;
    font-size: 0.875rem;
}

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

.leaderboards-ranking-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.25rem;
}

.leaderboards-ranking-level {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

.leaderboards-ranking-points {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    flex-shrink: 0;
}

/* Sales Page Interface Styles */
.sales-page-interface {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.75rem;
    padding-bottom: 1rem;
    gap: 0.625rem;
    overflow: hidden;
}

.sales-page-header {
    margin-bottom: 0.25rem;
}

.sales-page-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.sales-page-title-icon {
    color: var(--purple-400);
    /* Utilise la variable du thème */
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sales-page-title {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.sales-page-section {
    padding: 0.625rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sales-page-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
}

.sales-page-section-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.sales-page-section-icon {
    width: 12px;
    height: 12px;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    flex-shrink: 0;
}

.sales-page-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.sales-page-section-settings {
    width: 12px;
    height: 12px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.sales-page-section-settings:hover {
    color: rgba(255, 255, 255, 0.7);
}

.sales-page-section-description {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.sales-page-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.sales-page-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sales-page-required {
    color: rgba(239, 68, 68, 1);
}

.sales-page-hint {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: normal;
    margin-left: 0.25rem;
}

.sales-page-input {
    padding: 0.5rem 0.625rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    outline: none;
    transition: all 0.2s ease;
}

.sales-page-input:focus {
    border-color: var(--purple-400-rgba-5);
    /* Utilise la variable du thème */
    box-shadow: 0 0 0 3px var(--purple-400-rgba-1);
    /* Utilise la variable du thème */
}

.sales-page-input[readonly] {
    background: rgba(255, 255, 255, 0.03);
    cursor: not-allowed;
}

.sales-page-hint-text {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.sales-page-link-wrapper {
    display: flex;
    gap: 0.375rem;
    align-items: stretch;
}

.sales-page-link-input {
    flex: 1;
    padding: 0.5rem 0.625rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
    font-family: monospace;
    outline: none;
    transition: all 0.2s ease;
}

.sales-page-link-input:focus {
    border-color: var(--purple-400-rgba-5);
    /* Utilise la variable du thème */
    box-shadow: 0 0 0 3px var(--purple-400-rgba-1);
    /* Utilise la variable du thème */
}

.sales-page-copy-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.625rem;
    background: var(--purple-400-rgba-2);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    border-radius: 6px;
    color: var(--purple-400);
    /* Utilise la variable du thème */
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sales-page-copy-btn:hover {
    background: var(--purple-400-rgba-3);
    /* Utilise la variable du thème */
    border-color: var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
}

.sales-page-copy-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.sales-page-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sales-page-save-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--purple-400);
    /* Utilise la variable du thème */
    border: 1px solid var(--purple-400);
    /* Utilise la variable du thème */
    border-radius: 6px;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sales-page-save-btn:hover {
    background: var(--purple-500);
    /* Utilise la variable du thème */
    border-color: var(--purple-500);
    /* Utilise la variable du thème */
    box-shadow: 0 0 15px var(--purple-400-rgba-4);
    /* Utilise la variable du thème */
}

.sales-page-save-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.sales-page-cancel-btn {
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sales-page-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

/* Mobile Responsiveness */
@media (max-width: 968px) {
    .stacked-card {
        flex-direction: column;
        height: auto;
        min-height: 600px;
    }

    .stacked-card-content {
        flex: none;
        width: 100%;
        padding: 1.5rem;
        border-right: none;
        border-bottom: 1px solid var(--purple-400-rgba-1);
    /* Utilise la variable du thème */
    }

    .stacked-card-visual {
        min-height: 300px;
        padding: 1rem;
    }

    .stacked-title {
        font-size: 2rem;
    }
}