/* ============================================
   CARREFOUR MARKET MIRANDE - ÉTUDE MARKETING
   Design Ultra-Professionnel Premium
   ============================================ */

/* === DESIGN TOKENS === */
:root {
    /* Couleurs Carrefour */
    --primary: #004E9A;
    --primary-light: #2563eb;
    --primary-dark: #003366;
    --secondary: #E5002D;
    --accent: #ff6b35;

    /* Couleurs sémantiques */
    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --info: #3b82f6;
    --info-light: #dbeafe;

    /* Neutres */
    --dark: #0f172a;
    --gray-900: #1e293b;
    --gray-700: #334155;
    --gray-500: #64748b;
    --gray-300: #cbd5e1;
    --gray-100: #f1f5f9;
    --white: #ffffff;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #004E9A 0%, #2563eb 100%);
    --gradient-secondary: linear-gradient(135deg, #E5002D 0%, #f97316 100%);
    --gradient-success: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --gradient-dark: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    --gradient-hero: linear-gradient(135deg, #004E9A 0%, #1e40af 50%, #004E9A 100%);

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 30px rgba(0, 78, 154, 0.3);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Layout */
    --sidebar-width: 280px;
}

/* === RESET & BASE === */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--gray-100);
    color: var(--dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* === LAYOUT === */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--gradient-dark);
    color: var(--white);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    box-shadow: var(--shadow-xl);
}

.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
}

/* === SIDEBAR === */
.sidebar-header {
    padding: 24px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.logo-icon {
    width: 48px;
    height: 48px;
    background: var(--gradient-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(229, 0, 45, 0.3);
}

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

.logo-text .brand {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
}

.logo-text .location {
    font-size: 0.8rem;
    opacity: 0.7;
}

.nav-section {
    padding: 20px;
}

.nav-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--gray-500);
    margin-bottom: 12px;
    display: block;
}

.nav-menu {
    list-style: none;
}

.nav-menu li {
    margin-bottom: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--gray-300);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition-fast);
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    transform: translateX(4px);
}

.nav-link.active {
    background: var(--gradient-primary);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(0, 78, 154, 0.4);
}

.nav-icon {
    font-size: 1.1rem;
}

.sidebar-footer {
    margin-top: auto;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.author-details {
    display: flex;
    flex-direction: column;
}

.author-role {
    font-size: 0.85rem;
    font-weight: 600;
}

.author-date {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* === SECTIONS === */
.section {
    display: none;
    animation: fadeIn 0.5s ease;
}

.section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* === HERO SECTION === */
.hero {
    background: var(--gradient-hero);
    color: var(--white);
    padding: 60px 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-title .highlight {
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 24px;
    max-width: 500px;
}

.hero-meta {
    display: flex;
    gap: 24px;
    font-size: 0.9rem;
    opacity: 0.8;
}

.stats-showcase {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.stat-ring {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    min-width: 130px;
    transition: var(--transition-normal);
}

.stat-ring:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.4);
}

.stat-ring.danger {
    border-color: var(--danger);
}

.stat-ring.warning {
    border-color: var(--warning);
}

.stat-ring.info {
    border-color: var(--info);
}

.ring-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}

.ring-value small {
    font-size: 0.9rem;
    font-weight: 600;
}

.ring-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.ring-sub {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* === EXECUTIVE CARDS === */
.executive-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 48px;
    background: var(--white);
}

.exec-card {
    padding: 32px;
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.exec-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.exec-card.problem {
    background: var(--danger-light);
}

.exec-card.problem::before {
    background: var(--danger);
}

.exec-card.opportunity {
    background: var(--warning-light);
}

.exec-card.opportunity::before {
    background: var(--warning);
}

.exec-card.solution {
    background: var(--success-light);
}

.exec-card.solution::before {
    background: var(--success);
}

.exec-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.exec-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.exec-card h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: var(--dark);
}

.exec-card p {
    font-size: 0.95rem;
    color: var(--gray-700);
    line-height: 1.6;
}

/* === METRICS === */
.key-metrics {
    padding: 48px;
    background: var(--gray-100);
}

.section-subtitle {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 32px;
    color: var(--dark);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.metric-card {
    background: var(--white);
    padding: 32px 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--gray-100);
    transition: var(--transition-normal);
}

.metric-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-glow);
}

.metric-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.metric-before {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--danger);
}

.metric-arrow {
    font-size: 1.5rem;
    color: var(--gray-500);
}

.metric-after {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--success);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 500;
}

/* === CTA === */
.cta-section {
    text-align: center;
    padding: 48px;
    background: var(--white);
}

.cta-button {
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    padding: 18px 48px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: 0 4px 20px rgba(0, 78, 154, 0.4);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 78, 154, 0.5);
}

/* === SECTION HEADER === */
.section-header {
    background: var(--gradient-primary);
    color: var(--white);
    padding: 48px;
    position: relative;
    overflow: hidden;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.section-number {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.section-header h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.section-header p {
    font-size: 1rem;
    opacity: 0.9;
}

.subsection-title {
    font-size: 1.3rem;
    color: var(--dark);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--primary);
    display: inline-block;
}

/* === INFO CARDS === */
.info-grid {
    display: grid;
    gap: 24px;
    padding: 48px;
    background: var(--white);
}

.info-grid.three-col {
    grid-template-columns: repeat(3, 1fr);
}

.info-card {
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 28px;
    border: 2px solid transparent;
    transition: var(--transition-normal);
}

.info-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.info-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.info-icon {
    font-size: 2rem;
}

.info-header h4 {
    font-size: 1.1rem;
    color: var(--dark);
}

.info-list {
    list-style: none;
}

.info-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-300);
    font-size: 0.9rem;
}

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

/* === CHALLENGES === */
.challenges-section {
    padding: 48px;
    background: var(--gray-100);
}

.challenges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.challenge-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    border-top: 4px solid var(--danger);
}

.challenge-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.challenge-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background: var(--danger);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
}

.challenge-icon {
    font-size: 3rem;
    margin: 24px 0 16px;
}

.challenge-card h4 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: var(--dark);
}

.challenge-card p {
    font-size: 0.9rem;
    color: var(--gray-700);
    margin-bottom: 16px;
    line-height: 1.6;
}

.challenge-impact {
    background: var(--danger-light);
    color: var(--danger);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
}

/* === NAVIGATION BUTTONS === */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    padding: 32px 48px;
    background: var(--gray-100);
    border-top: 1px solid var(--gray-300);
}

.nav-btn {
    background: var(--white);
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
}

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

.nav-btn.next {
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
}

.nav-btn.next:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* === AXIS DIAGRAM === */
.map-visual {
    padding: 48px;
    background: var(--white);
}

.axis-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    background: var(--gray-100);
    border-radius: var(--radius-lg);
}

.axis-city {
    text-align: center;
    padding: 24px 32px;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.axis-city.highlight {
    background: var(--gradient-primary);
    color: var(--white);
    box-shadow: var(--shadow-glow);
    transform: scale(1.1);
}

.city-name {
    font-size: 1.3rem;
    font-weight: 800;
}

.city-info {
    font-size: 0.8rem;
    opacity: 0.8;
    margin: 4px 0;
}

.city-pop {
    font-size: 0.9rem;
    font-weight: 600;
}

.axis-distance {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.distance-line {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--gray-300) 0%, var(--primary) 50%, var(--gray-300) 100%);
    position: relative;
}

.distance-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--white);
    padding: 4px 12px;
    border-radius: var(--radius-full);
}

/* === DATA TABLE === */
.zone-table-wrapper {
    padding: 0 48px 48px;
    background: var(--white);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.data-table th,
.data-table td {
    padding: 16px 20px;
    text-align: left;
}

.data-table th {
    background: var(--dark);
    color: var(--white);
    font-weight: 600;
    font-size: 0.9rem;
}

.data-table tr:nth-child(even) {
    background: var(--gray-100);
}

.data-table tr:hover {
    background: var(--info-light);
}

.zone-badge {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
}

.zone-badge.primary {
    background: var(--primary);
    color: white;
}

.zone-badge.secondary {
    background: var(--info);
    color: white;
}

.zone-badge.tertiary {
    background: var(--gray-500);
    color: white;
}

.zone-badge.total {
    background: var(--success);
    color: white;
}

/* === DEMOGRAPHICS === */
.demographic-section {
    padding: 48px;
    background: var(--gray-100);
}

.demo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.demo-item {
    background: var(--white);
    padding: 32px 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    border-top: 4px solid var(--primary);
}

.demo-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 8px;
}

.demo-value small {
    font-size: 1.2rem;
}

.demo-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.demo-insight {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-style: italic;
}

/* === INSIGHT BOX === */
.insight-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--warning-light);
    border: 2px solid var(--warning);
    border-radius: var(--radius-lg);
    padding: 24px 32px;
    margin: 0 48px 48px;
}

.insight-icon {
    font-size: 2.5rem;
}

.insight-content h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--dark);
}

.insight-content p {
    margin-top: 11px;
    font-size: 0.95rem;
    color: var(--gray-700);
}

/* === COMPETITOR CARDS === */
.competitor-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 48px;
    background: var(--white);
}

.competitor-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.competitor-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.competitor-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
}

.competitor-card.intermarche .competitor-header {
    background: #cc0000;
}

.competitor-card.carrefour .competitor-header {
    background: var(--primary);
}

.competitor-card.lidl .competitor-header {
    background: #0050aa;
}

.competitor-header h4 {
    font-size: 1.1rem;
}

.competitor-rating {
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: var(--radius-full);
}

.competitor-body {
    padding: 24px;
    background: var(--white);
}

.competitor-stat {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

.competitor-stat:last-child {
    border-bottom: none;
}

.stat-label {
    color: var(--gray-500);
    font-size: 0.9rem;
}

.stat-value {
    font-weight: 600;
    font-size: 0.9rem;
}

.stat-value.good {
    color: var(--success);
}

.stat-value.medium {
    color: var(--warning);
}

.stat-value.bad {
    color: var(--danger);
}

.competitor-footer {
    padding: 16px 24px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    margin-top: auto;
}

.competitor-footer.threat {
    background: var(--danger-light);
    color: var(--danger);
}

.competitor-footer.neutral {
    background: var(--info-light);
    color: var(--info);
}

/* === TRAFFIC FLOW === */
.flow-diagram-section {
    padding: 48px;
    background: var(--gray-100);
}

.dual-traffic-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    margin-bottom: 32px;
    align-items: stretch;
}

.traffic-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.traffic-header {
    background: var(--white);
    padding: 16px;
    border-radius: var(--radius-md);
    text-align: center;
    border-bottom: 4px solid transparent;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.traffic-header.north {
    border-color: #3b82f6;
}

.traffic-header.south {
    border-color: #ef4444;
}

.traffic-header .direction-arrow {
    font-size: 1.5rem;
}

.traffic-header h4 {
    color: var(--dark);
    font-size: 1.1rem;
    margin: 4px 0;
}

.city-badge {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--gray-600);
    background: var(--gray-100);
    padding: 4px 10px;
    border-radius: var(--radius-full);
}

.traffic-flow {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.flow-item {
    background: var(--white);
    padding: 16px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    box-shadow: var(--shadow-sm);
    position: relative;
    border-left: 4px solid var(--gray-300);
}

.flow-item.start {
    border-left-color: var(--gray-500);
}

.flow-item.threat {
    border-left-color: var(--danger);
    background: #fef2f2;
}

.flow-item.current {
    border-left-color: var(--primary);
    background: #eff6ff;
}

.flow-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.flow-icon {
    font-size: 1.2rem;
}

.flow-text {
    font-size: 0.95rem;
    color: var(--dark);
    font-weight: 500;
}

.flow-sub {
    font-size: 0.8rem;
    color: var(--gray-500);
    padding-left: 34px;
    /* Align with text */
}

.flow-sub.danger {
    color: var(--danger);
    font-weight: 600;
}

.flow-arrow {
    text-align: center;
    color: var(--gray-400);
    font-size: 1.2rem;
    font-weight: 700;
}

/* Separator */
.traffic-separator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 70px;
}

.separator-line {
    width: 2px;
    flex: 1;
    background: repeating-linear-gradient(to bottom, var(--gray-300), var(--gray-300) 8px, transparent 8px, transparent 16px);
}

.separator-icon {
    font-size: 2rem;
    background: var(--white);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    z-index: 2;
    margin: -10px 0;
    border: 3px solid var(--white);
}

.separator-text {
    text-align: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--dark);
    background: var(--white);
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    margin: 8px 0;
    white-space: nowrap;
}

/* Conclusion & Insight */
.flow-conclusion {
    background: var(--white);
    padding: 16px;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--danger);
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: var(--shadow-sm);
    margin-top: auto;
    /* Push to bottom */
}

.flow-conclusion.danger {
    background: #fff1f2;
    color: #991b1b;
}

.flow-insight-box {
    display: flex;
    gap: 16px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-md);
    padding: 24px;
    align-items: flex-start;
}

.flow-insight-box .insight-icon {
    font-size: 1.8rem;
}

.flow-insight-box h4 {
    color: #92400e;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 992px) {
    .dual-traffic-flow {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .traffic-separator {
        display: none;
    }
}

/* === ADVANTAGE BOX === */
.advantage-box {
    margin: 0 48px 48px;
    background: var(--success-light);
    border: 2px solid var(--success);
    border-radius: var(--radius-lg);
    padding: 32px;
}

.advantage-box h4 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--dark);
}

.advantages-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.advantage-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    padding: 16px 20px;
    border-radius: var(--radius-md);
}

.adv-icon {
    font-size: 1.5rem;
}

.adv-text {
    font-weight: 500;
}

/* === REVIEWS === */
.reviews-hero {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 32px;
    padding: 48px;
    background: var(--white);
}

.rating-showcase {
    background: var(--gray-100);
    padding: 40px;
    border-radius: var(--radius-lg);
    text-align: center;
}

.big-rating {
    margin-bottom: 12px;
}

.rating-number {
    font-size: 4rem;
    font-weight: 800;
    color: var(--dark);
}

.rating-max {
    font-size: 2rem;
    color: var(--gray-500);
}

.rating-stars {
    font-size: 2rem;
    color: var(--warning);
    margin-bottom: 8px;
}

.rating-count {
    font-size: 0.95rem;
    color: var(--gray-500);
    margin-bottom: 16px;
}

.rating-verdict {
    display: inline-block;
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
}

.rating-verdict.danger {
    background: var(--danger-light);
    color: var(--danger);
}

.sentiment-chart {
    padding: 40px;
    background: var(--gray-100);
    border-radius: var(--radius-lg);
}

.sentiment-chart h4 {
    margin-bottom: 24px;
}

.sentiment-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.sentiment-label {
    width: 100px;
    font-size: 0.9rem;
}

.sentiment-track {
    flex: 1;
    height: 24px;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.sentiment-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: var(--transition-slow);
}

.sentiment-fill.positive {
    background: var(--success);
}

.sentiment-fill.neutral {
    background: var(--gray-500);
}

.sentiment-fill.negative {
    background: var(--danger);
}

.sentiment-pct {
    width: 50px;
    font-weight: 600;
    text-align: right;
}

/* === FEEDBACK GRID === */
.feedback-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    padding: 0 48px 48px;
    background: var(--white);
}

.feedback-card {
    padding: 32px;
    border-radius: var(--radius-lg);
}

.feedback-card.positive {
    background: var(--success-light);
    border: 2px solid var(--success);
}

.feedback-card.negative {
    background: var(--danger-light);
    border: 2px solid var(--danger);
}

.feedback-card h4 {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.feedback-card ul {
    list-style: none;
}

.feedback-card li {
    padding: 10px 0;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.feedback-card li:last-child {
    border-bottom: none;
}

/* === QUOTE BOX === */
.quote-box {
    background: var(--gray-100);
    padding: 40px 60px;
    margin: 0 48px;
    border-radius: var(--radius-lg);
    position: relative;
}

.quote-icon {
    font-size: 5rem;
    position: absolute;
    top: 10px;
    left: 20px;
    color: var(--gray-300);
    font-family: Georgia, serif;
}

.quote-box blockquote {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--gray-700);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.quote-box cite {
    font-size: 0.9rem;
    color: var(--gray-500);
}

/* === PRIORITY LIST === */
.action-priorities {
    padding: 48px;
    background: var(--white);
}

.priority-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.priority-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--gray-100);
    padding: 24px;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
}

.priority-num {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
}

.priority-content strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 4px;
}

.priority-content p {
    font-size: 0.9rem;
    color: var(--gray-500);
}

/* === SWOT MATRIX === */
.swot-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 48px;
    background: var(--white);
}

.swot-quadrant {
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 3px solid;
}

.swot-quadrant.strengths {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: var(--success);
}

.swot-quadrant.weaknesses {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: var(--danger);
}

.swot-quadrant.opportunities {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: var(--primary);
}

.swot-quadrant.threats {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: var(--warning);
}

.swot-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.swot-icon {
    font-size: 2rem;
}

.swot-quadrant h4 {
    font-size: 1.2rem;
}

.swot-quadrant ul {
    list-style: none;
}

.swot-quadrant li {
    padding: 10px 0;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.swot-quadrant li:last-child {
    border-bottom: none;
}

.swot-conclusion {
    margin: 0 48px 48px;
    background: var(--gradient-primary);
    color: var(--white);
    padding: 32px;
    border-radius: var(--radius-lg);
    text-align: center;
}

.swot-conclusion h4 {
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.swot-conclusion p {
    font-size: 1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* === PILLARS === */
.pillars-showcase {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 48px;
    background: var(--white);
}

.pillar-card {
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    position: relative;
    border: 2px solid var(--gray-300);
    transition: var(--transition-normal);
}

.pillar-card:hover {
    border-color: var(--primary);
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.pillar-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    background: var(--gradient-primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.pillar-icon {
    font-size: 3rem;
    margin: 20px 0 16px;
}

.pillar-card h4 {
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--dark);
}

.pillar-card p {
    font-size: 0.85rem;
    color: var(--gray-700);
    margin-bottom: 16px;
}

.pillar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pillar-actions span {
    background: var(--white);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 500;
}

/* === STRATEGY DETAILS === */
.strategy-details {
    padding: 48px;
    background: var(--gray-100);
}

.strategy-block {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 32px;
    box-shadow: var(--shadow-md);
}

.strategy-header {
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--white);
}

.strategy-header.priority-1 {
    background: var(--gradient-success);
}

.strategy-header.priority-2 {
    background: var(--gradient-primary);
}

.strategy-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.strategy-header h4 {
    font-size: 1.2rem;
}

.strategy-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 28px;
}

.strategy-why,
.strategy-actions {
    background: var(--gray-100);
    padding: 24px;
    border-radius: var(--radius-md);
}

.strategy-content h5 {
    font-size: 0.95rem;
    color: var(--primary);
    margin-bottom: 12px;
}

.strategy-content ul {
    list-style: none;
}

.strategy-content li {
    padding: 8px 0;
    font-size: 0.9rem;
}

.strategy-impact {
    grid-column: 1 / -1;
    background: var(--gradient-primary);
    color: var(--white);
    padding: 20px 28px;
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.impact-value {
    font-weight: 700;
    font-size: 1.1rem;
}

/* === TIMELINE === */
.action-timeline {
    padding: 48px;
    background: var(--white);
}

.timeline-phase {
    margin-bottom: 32px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.phase-header {
    display: flex;
    align-items: center;
    padding: 24px 32px;
    gap: 20px;
    color: var(--white);
}

.timeline-phase.immediate .phase-header {
    background: var(--gradient-success);
}

.timeline-phase.short .phase-header {
    background: var(--gradient-primary);
}

.timeline-phase.medium .phase-header {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.phase-icon {
    font-size: 2rem;
}

.phase-info {
    flex: 1;
}

.phase-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.phase-info h4 {
    font-size: 1.1rem;
}

.phase-cost {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 700;
}

.phase-actions {
    background: var(--gray-100);
    padding: 24px 32px;
}

.action-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: var(--white);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    transition: var(--transition-fast);
}

.action-row:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.action-checkbox {
    width: 24px;
    height: 24px;
    accent-color: var(--success);
    cursor: pointer;
    margin-top: 4px;
}

.action-row label {
    flex: 1;
    cursor: pointer;
}

.action-row label strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.action-detail {
    display: block;
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.action-meta {
    display: block;
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 500;
}

/* === BUDGET === */
.budget-hero {
    padding: 48px;
    background: var(--gradient-primary);
    text-align: center;
    color: var(--white);
}

.budget-total .budget-label {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 12px;
}

.budget-total .budget-amount {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.budget-total .budget-note {
    font-size: 0.9rem;
    opacity: 0.7;
}

.budget-breakdown {
    padding: 48px;
    background: var(--white);
}

.budget-table {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.budget-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--gray-100);
    align-items: center;
}

.budget-row.header {
    background: var(--dark);
    color: var(--white);
    font-weight: 600;
}

.budget-row.free {
    background: var(--success-light);
}

.budget-row.total {
    background: var(--primary);
    color: var(--white);
    font-weight: 700;
}

.budget-cost {
    font-weight: 600;
}

.budget-impact {
    font-size: 0.9rem;
}

/* === ROI === */
.roi-section {
    padding: 48px;
    background: var(--gray-100);
}

.roi-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.roi-card {
    background: var(--white);
    padding: 32px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    border-top: 4px solid var(--gray-300);
}

.roi-card.highlight {
    background: var(--gradient-success);
    color: var(--white);
    border: none;
}

.roi-card h4 {
    font-size: 1rem;
    margin-bottom: 20px;
}

.roi-detail p {
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.roi-result {
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 16px;
    color: var(--primary);
}

.roi-card.highlight .roi-result {
    color: var(--white);
}

.roi-result.giant {
    font-size: 3rem;
}

.roi-explanation {
    display: flex;
    gap: 20px;
    background: var(--warning-light);
    border: 2px solid var(--warning);
    border-radius: var(--radius-lg);
    padding: 24px 32px;
    margin: 0 48px;
}

.explanation-icon {
    font-size: 2.5rem;
}

.explanation-content h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

/* === SIMULATOR === */
.simulator-container {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 32px;
    padding: 48px;
    background: var(--white);
}

.simulator-controls {
    background: var(--gray-100);
    padding: 32px;
    border-radius: var(--radius-lg);
    position: sticky;
    top: 24px;
    height: fit-content;
}

.simulator-controls h3 {
    font-size: 1.2rem;
    margin-bottom: 24px;
    color: var(--dark);
}

.control-group {
    margin-bottom: 24px;
}

.control-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--dark);
}

.control-group input[type="month"] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-family: inherit;
}

.slider-container {
    background: var(--white);
    padding: 16px;
    border-radius: var(--radius-md);
}

.slider-container input[type="range"] {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    outline: none;
    margin-bottom: 12px;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: var(--gradient-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.slider-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
}

.simulate-btn {
    width: 100%;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
    font-family: inherit;
}

.simulate-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.simulator-results {
    background: var(--gray-100);
    padding: 32px;
    border-radius: var(--radius-lg);
}

.simulator-results h3 {
    font-size: 1.2rem;
    margin-bottom: 24px;
}

.results-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.result-card {
    background: var(--white);
    padding: 24px;
    border-radius: var(--radius-md);
    text-align: center;
}

.result-label {
    display: block;
    font-size: 0.85rem;
    color: #ffffff;
    margin-bottom: 8px;
}

.result-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #000000;
}

.result-value.highlight {
    color: var(--success);
}

.result-value.success {
    color: var(--primary);
}

.chart-container {
    background: var(--white);
    padding: 24px;
    border-radius: var(--radius-md);
    margin-bottom: 32px;
}

.year-breakdown h4 {
    font-size: 1rem;
    margin-bottom: 16px;
}

.year-table {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.year-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.2fr 1.2fr;
    gap: 12px;
    padding: 14px 20px;
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
}

.year-row.header {
    background: var(--dark);
    color: var(--white);
    font-weight: 600;
}

.year-row .gain {
    color: var(--success);
    font-weight: 600;
}

/* === SIMULATOR NOTE === */
.simulator-note {
    display: flex;
    gap: 20px;
    background: var(--info-light);
    border: 2px solid var(--info);
    border-radius: var(--radius-lg);
    padding: 24px 32px;
    margin: 0 48px 48px;
}

.note-icon {
    font-size: 2rem;
}

.note-content h4 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.note-content p {
    font-size: 0.9rem;
    color: var(--gray-700);
}

/* === FINAL CTA === */
.final-cta {
    padding: 48px;
    background: var(--white);
}

.final-cta h3 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 32px;
}

.recap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.recap-item {
    background: var(--gray-100);
    padding: 32px 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    border: 2px solid var(--gray-300);
    transition: var(--transition-normal);
}

.recap-item:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.recap-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
}

.recap-text {
    display: block;
    font-size: 0.9rem;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.recap-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary);
}

/* === CONCLUSION === */
.conclusion-box {
    margin: 0 48px 48px;
    background: var(--gradient-primary);
    color: var(--white);
    padding: 48px;
    border-radius: var(--radius-xl);
    text-align: center;
}

.conclusion-box h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.conclusion-box p {
    font-size: 1.1rem;
    margin-bottom: 16px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.signature {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.signature p {
    font-size: 0.95rem;
}

/* === RESPONSIVE === */
@media (max-width: 1400px) {

    .pillars-showcase,
    .competitor-cards,
    .recap-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 1200px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .stats-showcase {
        justify-content: center;
    }

    .simulator-container {
        grid-template-columns: 1fr;
    }

    .simulator-controls {
        position: relative;
    }
}

@media (max-width: 992px) {
    .sidebar {
        width: 260px;
    }

    .main-content {
        margin-left: 260px;
    }

    .info-grid.three-col,
    .challenges-grid {
        grid-template-columns: 1fr;
    }

    .swot-matrix,
    .strategy-content,
    .feedback-grid,
    .reviews-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --sidebar-width: 0;
    }

    .sidebar {
        transform: translateX(-100%);
    }

    .main-content {
        margin-left: 0;
    }

    .hero {
        padding: 40px 24px;
    }

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

    .executive-cards,
    .info-grid,
    .challenges-section,
    .navigation-buttons {
        padding: 24px;
    }

    .pillars-showcase,
    .competitor-cards,
    .roi-cards,
    .results-summary,
    .recap-grid,
    .metrics-grid,
    .demo-grid {
        grid-template-columns: 1fr;
    }

    .year-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .year-row.header span:nth-child(n+3) {
        display: none;
    }
}

/* === PRINT === */
@media print {
    .sidebar {
        display: none;
    }

    .main-content {
        margin-left: 0;
    }

    .section {
        display: block !important;
        page-break-after: always;
    }

    .navigation-buttons {
        display: none;
    }
}

/* ============================================
   SECTION ANALYSE DES AVIS - ULTRA DÉTAILLÉE
   ============================================ */

/* Executive Summary */
.analysis-executive {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    padding: 48px;
    margin: 0;
}

.exec-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: var(--white);
    padding: 10px 24px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.exec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.exec-metric {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: var(--transition-normal);
}

.exec-metric:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.exec-metric.primary {
    background: var(--gradient-primary);
    border: none;
    box-shadow: 0 8px 32px rgba(0, 78, 154, 0.4);
}

.exec-metric .metric-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    margin-bottom: 8px;
}

.exec-metric .metric-value small {
    font-size: 1.2rem;
    font-weight: 600;
    opacity: 0.8;
}

.exec-metric .metric-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    margin-bottom: 8px;
}

.exec-metric .metric-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.exec-metric .metric-sub.danger {
    color: #fca5a5;
}

.exec-metric .metric-trend {
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-top: 8px;
}

.exec-metric .metric-trend.danger {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* Ratings Breakdown */
.ratings-breakdown {
    padding: 48px;
    background: var(--white);
}

.ratings-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
    align-items: start;
}

.rating-bars {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rating-row {
    display: grid;
    grid-template-columns: 120px 1fr 80px 60px;
    align-items: center;
    gap: 16px;
}

.rating-stars {
    font-size: 0.85rem;
    letter-spacing: 2px;
}

.rating-bar-track {
    height: 24px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.rating-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 1s ease-out;
}

.rating-bar-fill.excellent {
    background: linear-gradient(90deg, #059669, #10b981);
}

.rating-bar-fill.good {
    background: linear-gradient(90deg, #0d9488, #14b8a6);
}

.rating-bar-fill.neutral {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

.rating-bar-fill.warning {
    background: linear-gradient(90deg, #ea580c, #f97316);
}

.rating-bar-fill.danger {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.rating-count {
    font-size: 0.9rem;
    color: var(--gray-700);
    font-weight: 500;
}

.rating-pct {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark);
}

.ratings-insight {
    position: sticky;
    top: 20px;
}

.insight-card {
    background: linear-gradient(135deg, var(--info-light), #e0f2fe);
    border-radius: var(--radius-lg);
    padding: 24px;
    border-left: 4px solid var(--info);
}

.insight-card h4 {
    color: var(--info);
    margin-bottom: 12px;
    font-size: 1.1rem;
}

.insight-card p {
    font-size: 0.95rem;
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: 12px;
}

.insight-action {
    background: rgba(59, 130, 246, 0.1);
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

/* Problems Analysis */
.problems-analysis {
    padding: 48px;
    background: var(--gray-100);
}

.subsection-desc {
    color: var(--gray-500);
    font-size: 0.95rem;
    margin-top: -16px;
    margin-bottom: 32px;
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.problem-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.problem-card.critical::before {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.problem-card.high::before {
    background: linear-gradient(90deg, #ea580c, #f97316);
}

.problem-card.medium::before {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

.problem-card.urgent::before {
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    animation: pulse-bar 2s infinite;
}

@keyframes pulse-bar {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.problem-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.problem-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.problem-rank {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gray-300);
}

.problem-severity {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.problem-severity.critical {
    background: var(--danger-light);
    color: var(--danger);
}

.problem-severity.high {
    background: #ffedd5;
    color: #ea580c;
}

.problem-severity.medium {
    background: var(--warning-light);
    color: #b45309;
}

.problem-severity.urgent {
    background: #ede9fe;
    color: #7c3aed;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.problem-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.problem-card h4 {
    font-size: 1.2rem;
    color: var(--dark);
    margin-bottom: 12px;
}

.problem-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.problem-stats .stat {
    background: var(--gray-100);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--gray-700);
}

.problem-quotes {
    background: var(--gray-100);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
}

.problem-quotes blockquote {
    font-size: 0.85rem;
    color: var(--gray-700);
    font-style: italic;
    padding-left: 12px;
    border-left: 3px solid var(--gray-300);
    margin-bottom: 12px;
}

.problem-quotes blockquote:last-child {
    margin-bottom: 0;
}

.problem-root {
    margin-bottom: 20px;
}

.problem-root h5,
.problem-solution h5 {
    font-size: 0.9rem;
    color: var(--gray-700);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.problem-root ul {
    list-style: none;
    padding-left: 0;
}

.problem-root li {
    font-size: 0.85rem;
    color: var(--gray-600);
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
}

.problem-root li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--danger);
}

.problem-solution {
    border-top: 1px solid var(--gray-200);
    padding-top: 20px;
}

.solution-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--success-light);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
}

.solution-item:last-of-type {
    margin-bottom: 0;
}

.solution-priority {
    background: var(--success);
    color: var(--white);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    height: fit-content;
}

.solution-priority.urgent {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    animation: pulse 2s infinite;
}

.solution-item strong {
    display: block;
    font-size: 0.9rem;
    color: var(--dark);
    margin-bottom: 4px;
}

.solution-item p {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 6px;
}

.solution-cost {
    font-size: 0.8rem;
    color: var(--success);
    font-weight: 600;
}

.problem-impact {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: var(--radius-md);
}

.impact-label {
    font-size: 0.85rem;
    color: var(--gray-600);
}

.impact-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--success);
}

.impact-note {
    font-size: 0.8rem;
    color: var(--gray-500);
}

/* Strengths Analysis */
.strengths-analysis {
    padding: 48px;
    background: var(--white);
}

.strengths-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.strength-card {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-align: center;
    border: 2px solid transparent;
    transition: var(--transition-normal);
}

.strength-card:hover {
    border-color: var(--success);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.2);
}

.strength-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.strength-count {
    background: var(--success);
    color: var(--white);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 12px;
}

.strength-card h4 {
    font-size: 1rem;
    color: var(--dark);
    margin-bottom: 12px;
}

.strength-card p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 16px;
}

.strength-action {
    background: rgba(16, 185, 129, 0.15);
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--gray-700);
    text-align: left;
}

/* Critical Reviews */
.critical-reviews {
    padding: 48px;
    background: var(--gray-100);
}

.critical-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.critical-item {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    border-left: 4px solid var(--danger);
    box-shadow: var(--shadow-sm);
}

.critic-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.critic-name {
    font-weight: 700;
    color: var(--dark);
}

.critic-rating {
    color: var(--warning);
    letter-spacing: 2px;
}

.critic-date {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-left: auto;
}

.critical-item blockquote {
    font-style: italic;
    color: var(--gray-700);
    padding: 16px;
    background: var(--gray-100);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.critic-action {
    background: linear-gradient(135deg, #dbeafe, #e0f2fe);
    padding: 16px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--gray-700);
}

/* Analysis Synthesis */
.analysis-synthesis {
    padding: 48px;
    background: var(--white);
}

.synthesis-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}

.synthesis-current,
.synthesis-target {
    background: var(--gray-100);
    padding: 32px;
    border-radius: var(--radius-lg);
    min-width: 280px;
}

.synthesis-current {
    border: 2px solid var(--danger);
}

.synthesis-target {
    border: 2px solid var(--success);
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
}

.synthesis-current h4,
.synthesis-target h4 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    text-align: center;
}

.synthesis-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

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

.synthesis-item .label {
    color: var(--gray-600);
}

.synthesis-item .value {
    font-weight: 700;
}

.synthesis-item .value.danger {
    color: var(--danger);
}

.synthesis-item .value.success {
    color: var(--success);
}

.synthesis-arrow {
    font-size: 3rem;
    color: var(--primary);
    font-weight: 700;
}

.impact-summary {
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    border-radius: var(--radius-lg);
    padding: 32px;
    color: var(--white);
}

.impact-summary h4 {
    text-align: center;
    margin-bottom: 24px;
    font-size: 1.2rem;
}

.impact-calc {
    max-width: 500px;
    margin: 0 auto;
}

.impact-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.95rem;
}

.impact-pts {
    font-weight: 700;
    color: var(--success);
}

.impact-total {
    display: flex;
    justify-content: space-between;
    padding: 20px 0 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.impact-total .impact-pts.highlight {
    color: #fbbf24;
    font-size: 1.2rem;
}

/* Responsive for analysis section */
@media (max-width: 1200px) {
    .exec-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    .ratings-container {
        grid-template-columns: 1fr;
    }
}

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

    .rating-row {
        grid-template-columns: 80px 1fr 60px;
    }

    .rating-pct {
        display: none;
    }

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

    .synthesis-grid {
        flex-direction: column;
    }

    .synthesis-arrow {
        transform: rotate(90deg);
    }
}

/* ============================================
   SECTION BENCHMARKS ÉCONOMIQUES
   ============================================ */

.economic-benchmarks {
    padding: 48px;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}

.benchmarks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.benchmark-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    transition: var(--transition-normal);
}

.benchmark-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.benchmark-card.primary {
    background: linear-gradient(135deg, #004E9A, #1e40af);
    color: var(--white);
}

.benchmark-card.tourism {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #f59e0b;
}

.benchmark-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.benchmark-icon {
    font-size: 2rem;
}

.benchmark-header h4 {
    font-size: 1.1rem;
    font-weight: 700;
}

.benchmark-card.primary h4 {
    color: var(--white);
}

.benchmark-content {
    /* Content styling */
}

.benchmark-calc {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.95rem;
}

.calc-row.total {
    border-bottom: none;
    padding-top: 16px;
    font-weight: 600;
}

.calc-value {
    font-weight: 700;
}

.calc-value.highlight {
    font-size: 1.2rem;
    color: #fbbf24;
}

.benchmark-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    text-align: center;
}

.bstat {
    padding: 16px 8px;
    background: var(--gray-100);
    border-radius: var(--radius-md);
}

.bstat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 4px;
}

.bstat-label {
    font-size: 0.75rem;
    color: var(--gray-600);
    line-height: 1.3;
}

.benchmark-events {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: var(--radius-md);
}

.event-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.event-impact {
    font-size: 0.85rem;
    color: #b45309;
    font-weight: 700;
}

.benchmark-source {
    margin-top: 16px;
    font-size: 0.75rem;
    opacity: 0.7;
    font-style: italic;
}

.benchmark-card.primary .benchmark-source {
    color: rgba(255, 255, 255, 0.7);
}

.benchmark-insight {
    display: flex;
    gap: 20px;
    padding: 28px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary);
}

.benchmark-insight .insight-icon {
    font-size: 2.5rem;
}

.benchmark-insight .insight-content h4 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 12px;
}

.benchmark-insight .insight-content p {
    font-size: 0.95rem;
    color: var(--gray-700);
    line-height: 1.7;
    margin-bottom: 12px;
}

.benchmark-insight .insight-action {
    background: rgba(0, 78, 154, 0.1);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
}

@media (max-width: 1024px) {
    .benchmarks-grid {
        grid-template-columns: 1fr;
    }

    .benchmark-stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SECTION ANALYSE DES FLUX CLIENTS
   ============================================ */

.flux-kpi-section {
    padding: 48px;
    background: var(--white);
}

.flux-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.flux-kpi {
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 28px;
    text-align: center;
    border: 2px solid transparent;
    transition: var(--transition-normal);
}

.flux-kpi:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.flux-kpi.highlight {
    background: linear-gradient(135deg, #004E9A, #1e40af);
    color: var(--white);
}

.flux-kpi.warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #f59e0b;
}

.flux-kpi .kpi-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.flux-kpi.highlight .kpi-value {
    color: #fbbf24;
}

.flux-kpi .kpi-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.flux-kpi .kpi-insight {
    display: block;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Graphique Affluence */
.affluence-chart-section {
    padding: 48px;
    background: var(--gray-100);
}

.affluence-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.day-column {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 16px 8px;
    text-align: center;
}

.day-column.sunday {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.day-label {
    font-weight: 800;
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: var(--primary);
}

.hour-bars {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: flex-end;
    height: 120px;
    padding: 0 4px;
}

.hour-bar {
    flex: 1;
    background: linear-gradient(180deg, #93c5fd, #3b82f6);
    border-radius: 3px 3px 0 0;
    min-width: 6px;
    max-width: 12px;
    transition: var(--transition-fast);
    position: relative;
}

.hour-bar:hover {
    background: linear-gradient(180deg, #60a5fa, #2563eb);
    transform: scaleY(1.05);
}

.hour-bar.peak {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
    font-size: 0.6rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    color: var(--dark);
    font-weight: 800;
}

.hour-bar.closed {
    background: #e5e7eb;
    min-height: 4px;
}

.day-status {
    margin-top: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--radius-full);
}

.hour-labels {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 6px;
    padding: 0 4px;
}

.hour-labels span {
    flex: 1;
    font-size: 0.5rem;
    color: var(--gray-500);
    text-align: center;
    min-width: 6px;
    max-width: 12px;
}

.day-status.high {
    background: var(--success-light);
    color: var(--success);
}

.day-status.medium {
    background: var(--info-light);
    color: var(--info);
}

.day-status.low {
    background: var(--warning-light);
    color: #b45309;
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.legend-color.peak {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

.legend-color.high {
    background: var(--success);
}

.legend-color.medium {
    background: var(--info);
}

.legend-color.low {
    background: var(--warning);
}

/* Insights Grid */
.flux-insights {
    padding: 48px;
    background: var(--white);
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.insight-box {
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 24px;
    border-left: 4px solid var(--primary);
}

.insight-box.planning {
    border-left-color: #8b5cf6;
}

.insight-box.marketing {
    border-left-color: #ec4899;
}

.insight-box.operations {
    border-left-color: #f59e0b;
}

.insight-box.opportunity {
    border-left-color: #10b981;
}

.insight-box .insight-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.insight-box .insight-icon {
    font-size: 1.5rem;
}

.insight-box h4 {
    font-size: 1rem;
    color: var(--dark);
}

.insight-list {
    list-style: none;
    padding: 0;
}

.insight-list li {
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200);
}

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

/* Action Prioritaire */
.flux-action-priority {
    margin: 0 48px 48px;
    display: flex;
    gap: 24px;
    padding: 32px;
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    border-radius: var(--radius-lg);
    color: var(--white);
}

.flux-action-priority .action-icon {
    font-size: 3rem;
}

.flux-action-priority .action-content h4 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: #fbbf24;
}

.flux-action-priority .action-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
    opacity: 0.9;
}

.flux-action-priority .action-solution {
    background: rgba(16, 185, 129, 0.2);
    padding: 16px;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--success);
}

@media (max-width: 1200px) {
    .flux-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .affluence-week {
        grid-template-columns: repeat(4, 1fr);
    }

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

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

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

    .flux-action-priority {
        flex-direction: column;
        margin: 0 24px 24px;
    }
}

/* ============================================
   DUAL TRAFFIC FLOW DIAGRAM
   ============================================ */

.dual-traffic-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: start;
}

.traffic-column {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
}

.traffic-header {
    text-align: center;
    padding: 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.traffic-header.north {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border: 2px solid var(--primary);
}

.traffic-header.south {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 2px solid var(--danger);
}

.direction-arrow {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 8px;
}

.traffic-header h4 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.city-badge {
    font-size: 0.75rem;
    opacity: 0.8;
}

.flow-item.advantage {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 2px solid var(--success);
}

.flow-sub.success {
    color: var(--success);
    font-weight: 600;
}

.flow-sub.danger {
    color: var(--danger);
    font-weight: 600;
}

.flow-conclusion {
    text-align: center;
    padding: 16px;
    border-radius: var(--radius-md);
    margin-top: 16px;
    font-size: 0.9rem;
}

.flow-conclusion.success {
    background: var(--success-light);
    color: var(--success);
    border: 2px solid var(--success);
}

.flow-conclusion.danger {
    background: var(--danger-light);
    color: var(--danger);
    border: 2px solid var(--danger);
}

/* Traffic Separator */
.traffic-separator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.separator-line {
    width: 2px;
    height: 80px;
    background: linear-gradient(180deg, transparent, var(--gray-300), transparent);
}

.separator-icon {
    font-size: 2.5rem;
    margin: 16px 0;
}

.separator-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-500);
    text-align: center;
    line-height: 1.4;
}

/* Flow Insight Box */
.flow-insight-box {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary);
    margin-top: 32px;
}

.flow-insight-box .insight-icon {
    font-size: 2rem;
}

.flow-insight-box .insight-content h4 {
    font-size: 1rem;
    color: var(--primary);
    margin-bottom: 8px;
}

.flow-insight-box .insight-content p {
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .dual-traffic-flow {
        grid-template-columns: 1fr;
    }

    .traffic-separator {
        flex-direction: row;
        padding: 20px;
    }

    .separator-line {
        width: 80px;
        height: 2px;
    }
}

/* ============================================
   BUSINESS CASE - ACQUISITION CLIENTS
   ============================================ */

/* Section padding fix */
#budget .business-context,
#budget .acquisition-strategy,
#budget .realistic-roi,
#budget .global-impact {
    margin-top: 48px;
    margin-left: 48px;
    margin-right: 48px;
}

#budget .decision-summary {
    margin-left: 48px;
    margin-right: 48px;
}

/* Context Grid */
.business-context {
    margin-bottom: 40px;
}

.context-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.context-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.context-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 12px;
}

.context-card h4 {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.context-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.context-detail {
    font-size: 0.75rem;
    color: var(--gray-400);
    margin-top: 8px;
}

/* Levers Grid */
.acquisition-strategy {
    margin-bottom: 40px;
}

.levers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.lever-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.lever-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, var(--primary), #0066cc);
    color: white;
}

.lever-card.notoriety .lever-header {
    background: linear-gradient(135deg, #059669, #10b981);
}

.lever-card.events .lever-header {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.lever-num {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.lever-header h4 {
    flex: 1;
    font-size: 1rem;
    margin: 0;
}

.lever-cost {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
}

.lever-body {
    padding: 20px;
}

.lever-actions {
    margin-bottom: 20px;
}

.lever-action {
    margin-bottom: 16px;
}

.lever-action strong {
    display: block;
    margin-bottom: 8px;
    color: var(--gray-700);
}

.lever-action ul {
    margin: 0;
    padding-left: 20px;
}

.lever-action li {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.lever-projection {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 16px;
}

.lever-projection h5 {
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: var(--gray-700);
}

.projection-table {
    width: 100%;
    font-size: 0.85rem;
}

.projection-table td {
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-200);
}

.projection-table td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--primary);
}

/* ROI Scenarios */
.realistic-roi {
    margin-bottom: 40px;
}

.roi-scenarios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.scenario-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
}

.scenario-card.featured {
    border-color: var(--primary);
    transform: scale(1.02);
}

.scenario-header {
    padding: 20px;
    text-align: center;
    background: var(--gray-50);
}

.scenario-card.conservative .scenario-header {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.scenario-card.realistic .scenario-header {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.scenario-card.optimistic .scenario-header {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}

.scenario-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.scenario-card.conservative .scenario-badge {
    background: #f59e0b;
    color: white;
}

.scenario-card.realistic .scenario-badge {
    background: var(--primary);
    color: white;
}

.scenario-card.optimistic .scenario-badge {
    background: var(--success);
    color: white;
}

.scenario-header h4 {
    font-size: 1rem;
    margin: 0;
}

.scenario-body {
    padding: 20px;
}

.calc-block {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
}

.calc-block:last-of-type {
    border-bottom: none;
}

.calc-block h5 {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.9rem;
}

.calc-row.total {
    font-weight: 700;
    border-top: 2px solid var(--gray-300);
    padding-top: 10px;
    margin-top: 6px;
}

.calc-row.highlight {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    margin: 8px -12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-weight: 700;
    color: var(--primary);
}

.scenario-result {
    background: var(--primary);
    color: white;
    padding: 20px;
    text-align: center;
    margin: 0 -20px -20px;
}

.scenario-card.conservative .scenario-result {
    background: #f59e0b;
}

.scenario-card.optimistic .scenario-result {
    background: var(--success);
}

.result-label {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-bottom: 4px;
}

.result-value {
    font-size: 2.5rem;
    font-weight: 800;
}

.result-detail {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 4px;
}

/* Global Impact */
.global-impact {
    margin-bottom: 40px;
}

.impact-visualization {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
}

.impact-bar {
    display: grid;
    grid-template-columns: 250px 120px 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
}

.impact-bar.featured {
    background: linear-gradient(90deg, rgba(0, 78, 154, 0.05), transparent);
    margin: 0 -24px;
    padding: 12px 24px;
}

.bar-label {
    font-size: 0.9rem;
    font-weight: 500;
}

.bar-value {
    font-size: 0.9rem;
    font-weight: 700;
    text-align: right;
}

.bar-fill {
    height: 24px;
    border-radius: var(--radius-md);
    background: var(--gray-200);
}

.bar-fill.current {
    background: var(--gray-400);
}

.bar-fill.conservative {
    background: linear-gradient(90deg, var(--gray-400), #f59e0b);
}

.bar-fill.realistic {
    background: linear-gradient(90deg, var(--gray-400), var(--primary));
}

.bar-fill.optimistic {
    background: linear-gradient(90deg, var(--gray-400), var(--success));
}

.impact-note {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: #fef3c7;
    border-radius: var(--radius-md);
    border-left: 4px solid #f59e0b;
}

.note-icon {
    font-size: 1.5rem;
}

.impact-note p {
    font-size: 0.9rem;
    color: var(--gray-700);
    margin: 0;
    line-height: 1.6;
}

/* Decision Summary */
.decision-summary {
    display: flex;
    gap: 24px;
    padding: 32px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: var(--radius-lg);
    border: 2px solid var(--success);
    margin-bottom: 32px;
}

.decision-icon {
    font-size: 3rem;
}

.decision-content h4 {
    font-size: 1.2rem;
    color: var(--success);
    margin-bottom: 16px;
}

.decision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.decision-item {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.95rem;
}

.decision-item .check {
    font-size: 1.2rem;
}

.decision-conclusion {
    font-size: 0.95rem;
    color: var(--gray-700);
    line-height: 1.6;
    margin: 0;
    padding: 16px;
    background: white;
    border-radius: var(--radius-md);
}

/* Responsive */
@media (max-width: 1200px) {
    .context-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .levers-grid,
    .roi-scenarios {
        grid-template-columns: 1fr;
    }

    .scenario-card.featured {
        transform: none;
    }
}

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

    .impact-bar {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .decision-summary {
        flex-direction: column;
    }

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

/* ============================================
   SIMULATEUR - NOUVEAUX ÉLÉMENTS
   ============================================ */

/* Parameter sections */
.param-section {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 20px;
}

.param-section h4 {
    font-size: 0.9rem;
    margin-bottom: 16px;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Preset buttons */
.preset-buttons {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.preset-btn {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--gray-200);
    background: var(--white);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preset-btn:hover {
    border-color: var(--primary);
    background: var(--gray-50);
}

.preset-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

/* ROI Summary */
.roi-summary {
    display: flex;
    gap: 16px;
    margin: 24px 0;
}

.roi-box {
    flex: 1;
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
}

.roi-box.featured {
    border-color: var(--primary);
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.roi-label {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.roi-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
}

.roi-box.featured .roi-value {
    color: var(--primary);
}

/* Year table improvements */
.year-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.85rem;
}

.year-row.header {
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    background: var(--gray-50);
    margin: 0 -20px;
    padding: 12px 20px;
}

.year-row.total {
    font-weight: 700;
    border-top: 2px solid var(--gray-300);
    background: var(--gray-50);
    margin: 0 -20px;
    padding: 12px 20px;
}

.year-row .success {
    color: var(--success);
}

.year-row .warning {
    color: #f59e0b;
}

.year-row .danger {
    color: var(--danger);
}

/* Results summary improvements */
.results-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 992px) {
    .results-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .roi-summary {
        flex-direction: column;
    }

    .year-row {
        grid-template-columns: repeat(3, 1fr);
        font-size: 0.75rem;
    }

    .year-row.header span:nth-child(4),
    .year-row.header span:nth-child(5),
    .year-row span:nth-child(4),
    .year-row span:nth-child(5) {
        display: none;
    }
}

@media (max-width: 768px) {
    .preset-buttons {
        flex-direction: column;
    }
}

/* ============================================
   SECTION SEO / RÉFÉRENCEMENT GOOGLE
   ============================================ */

.seo-current-state {
    padding: 48px;
    background: var(--white);
}

.seo-alert-box {
    display: flex;
    gap: 20px;
    padding: 24px 32px;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 2px solid #ef4444;
    border-radius: var(--radius-lg);
    margin-bottom: 32px;
}

.seo-alert-box .alert-icon {
    font-size: 2.5rem;
}

.seo-alert-box .alert-content h3 {
    color: #dc2626;
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.seo-alert-box .alert-content p {
    color: var(--gray-700);
    line-height: 1.6;
}

.seo-ranking-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.ranking-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    border: 3px solid transparent;
    transition: var(--transition-normal);
    position: relative;
}

.ranking-card.position-1 {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

.ranking-card.position-2 {
    border-color: #9ca3af;
    background: linear-gradient(135deg, #f9fafb, #f3f4f6);
}

.ranking-card.position-3.current {
    border-color: var(--primary);
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.ranking-card.competitor::before {
    content: '⚠️';
    position: absolute;
    top: 2px;
    right: 12px;
    font-size: 1.5rem;
}

.rank-badge {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.rank-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 12px;
}

.rank-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.rank-rating {
    font-size: 0.9rem;
    color: var(--gray-600);
}

.rank-status {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    display: inline-block;
    width: fit-content;
}

.rank-status.bad {
    background: #fef3c7;
    color: #b45309;
}

.rank-status.neutral {
    background: var(--gray-100);
    color: var(--gray-600);
}

.rank-status.danger {
    background: #fee2e2;
    color: #dc2626;
}

.rank-insight {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-style: italic;
    padding-top: 8px;
    border-top: 1px solid var(--gray-200);
}

.seo-impact-box {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--success);
}

.seo-impact-box .impact-icon {
    font-size: 2rem;
}

.seo-impact-box .impact-content h4 {
    color: #166534;
    margin-bottom: 8px;
}

.seo-impact-box .impact-content p {
    color: var(--gray-700);
    line-height: 1.6;
}

/* Section Mots-clés */
.seo-keywords-section {
    padding: 48px;
    background: var(--gray-100);
}

.keywords-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.keyword-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    transition: var(--transition-normal);
}

.keyword-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.keyword-card.primary {
    border-color: var(--primary);
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.keyword-term {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 12px;
    font-family: 'Courier New', monospace;
    background: var(--gray-100);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

.keyword-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.keyword-volume {
    font-size: 0.85rem;
    color: var(--gray-600);
}

.keyword-difficulty {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    width: fit-content;
}

.keyword-difficulty.easy {
    background: #d1fae5;
    color: #059669;
}

.keyword-difficulty.medium {
    background: #fef3c7;
    color: #b45309;
}

.keyword-position,
.keyword-target {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--gray-200);
    font-size: 0.9rem;
}

.keyword-position .label,
.keyword-target .label {
    color: var(--gray-600);
}

.keyword-position .value,
.keyword-target .value {
    font-weight: 700;
}

.keyword-position .value.danger {
    color: #dc2626;
}

.keyword-position .value.warning {
    color: #f59e0b;
}

.keyword-position .value.success,
.keyword-target .value.success {
    color: #059669;
}

.keywords-total {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #004E9A, #1e40af);
    color: var(--white);
    border-radius: var(--radius-lg);
    font-size: 1rem;
}

.keywords-total .highlight {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fbbf24;
}

/* Section Backlinks */
.seo-backlinks-section {
    padding: 48px;
    background: var(--white);
}

.backlinks-explanation {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: var(--radius-lg);
    margin-bottom: 32px;
    border-left: 4px solid #0284c7;
}

.backlinks-explanation .explain-icon {
    font-size: 2rem;
}

.backlinks-explanation .explain-content h4 {
    color: #0369a1;
    margin-bottom: 8px;
}

.backlinks-explanation .explain-content p {
    color: var(--gray-700);
    line-height: 1.6;
}

.backlinks-strategy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.strategy-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--gray-200);
    transition: var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.strategy-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.strategy-card.free {
    border-color: #10b981;
}

.strategy-card.paid.featured {
    border-color: var(--primary);
    box-shadow: 0 0 30px rgba(0, 78, 154, 0.2);
    transform: scale(1.02);
}

.strategy-card.premium {
    border-color: #8b5cf6;
}

.strategy-header {
    padding: 20px;
    text-align: center;
}

.strategy-card.free .strategy-header {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}

.strategy-card.paid.featured .strategy-header {
    background: linear-gradient(135deg, #004E9A, #1e40af);
    color: var(--white);
}

.strategy-card.premium .strategy-header {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
}

.strategy-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    margin-bottom: 8px;
}

.strategy-card.free .strategy-badge {
    background: #059669;
    color: white;
}

.strategy-card.paid.featured .strategy-badge {
    background: #fbbf24;
    color: var(--dark);
}

.strategy-card.premium .strategy-badge {
    background: #7c3aed;
    color: white;
}

.strategy-header h4 {
    font-size: 1.1rem;
    margin: 0;
}

.strategy-card.paid.featured .strategy-header h4 {
    color: var(--white);
}

.strategy-list {
    list-style: none;
    padding: 20px;
    margin: 0;
}

.strategy-list li {
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-200);
}

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

.strategy-list li strong {
    display: block;
    font-size: 0.95rem;
    color: var(--dark);
    margin-bottom: 4px;
}

.strategy-list li .impact {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 6px;
}

.strategy-list li p {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

.strategy-list li .price {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    margin-top: 6px;
}

.strategy-cost {
    padding: 20px;
    background: var(--gray-100);
    text-align: center;
    margin-top: auto;
}

.strategy-cost .cost-label {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.strategy-cost .cost-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 4px;
}

.strategy-cost .cost-value.free {
    color: #059669;
}

.strategy-cost .cost-value.premium {
    color: #7c3aed;
}

.strategy-cost .cost-time {
    display: block;
    font-size: 0.8rem;
    color: var(--gray-500);
}

/* Section Timeline */
.seo-timeline-section {
    padding: 48px;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
}

.timeline-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.timeline-item {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
}

.timeline-item:hover {
    transform: translateY(-5px);
}

.timeline-item.featured {
    border: 3px solid var(--success);
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
}

.timeline-marker {
    background: linear-gradient(135deg, #004E9A, #1e40af);
    color: var(--white);
    padding: 12px;
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
}

.timeline-item.featured .timeline-marker {
    background: linear-gradient(135deg, #059669, #10b981);
}

.timeline-content {
    padding: 20px;
}

.timeline-content h4 {
    font-size: 1rem;
    color: var(--dark);
    margin-bottom: 12px;
}

.timeline-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.timeline-content ul li {
    font-size: 0.85rem;
    color: var(--gray-600);
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
}

.timeline-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: bold;
}

.timeline-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.timeline-result .position {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.timeline-result .value {
    font-size: 0.9rem;
    font-weight: 700;
}

.timeline-result .value.warning {
    color: #f59e0b;
}

.timeline-result .value.success {
    color: #059669;
}

.timeline-cost {
    text-align: center;
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 600;
}

.timeline-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.summary-item {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.summary-item.highlight {
    background: linear-gradient(135deg, #004E9A, #1e40af);
    color: var(--white);
}

.summary-item .summary-label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 8px;
    opacity: 0.8;
}

.summary-item .summary-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
}

.summary-item.highlight .summary-value {
    color: #fbbf24;
}

/* Section ROI SEO */
.seo-roi-section {
    padding: 48px;
    background: var(--white);
}

.roi-calculation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
    align-items: stretch;
    margin-bottom: 32px;
}

.roi-input,
.roi-output {
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.roi-output {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.roi-input h4,
.roi-output h4 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.roi-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.95rem;
}

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

.roi-row.total {
    border-top: 2px solid var(--dark);
    padding-top: 16px;
    font-weight: 700;
}

.roi-row .value {
    font-weight: 600;
}

.roi-row .value.highlight {
    color: #059669;
    font-size: 1.1rem;
    font-weight: 800;
}

.roi-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--primary);
}

.roi-conclusion {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: center;
    padding: 32px;
    background: linear-gradient(135deg, #0f172a, #1e3a5f);
    border-radius: var(--radius-lg);
    color: var(--white);
}

.roi-metric {
    text-align: center;
    padding: 24px 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
}

.roi-metric .metric-value {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: #fbbf24;
}

.roi-metric .metric-label {
    display: block;
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 8px;
}

.roi-metric .metric-detail {
    display: block;
    font-size: 0.85rem;
    opacity: 0.7;
}

.roi-note {
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* Section Recommandation */
.seo-recommendation {
    margin: 0 48px 48px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 3px solid var(--primary);
}

.recommendation-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    background: linear-gradient(135deg, #004E9A, #1e40af);
    color: var(--white);
}

.recommendation-header .rec-icon {
    font-size: 2rem;
}

.recommendation-header h3 {
    font-size: 1.3rem;
    margin: 0;
}

.recommendation-content {
    padding: 32px;
}

.rec-budget {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--white);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}

.budget-label {
    font-size: 1rem;
    color: var(--gray-700);
}

.budget-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
}

.rec-actions {
    margin-bottom: 24px;
}

.rec-actions h4 {
    font-size: 1rem;
    margin-bottom: 16px;
    color: var(--dark);
}

.rec-actions ol {
    padding-left: 20px;
    margin: 0;
}

.rec-actions ol li {
    padding: 10px 0;
    font-size: 0.95rem;
    color: var(--gray-700);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.zone-note {
    margin-top: 20px;
}

.rec-actions ol li:last-child {
    border-bottom: none;
}

.rec-result {
    padding: 20px 24px;
    background: var(--white);
    border-radius: var(--radius-lg);
    font-size: 0.95rem;
    line-height: 1.6;
    box-shadow: var(--shadow-md);
}

/* Responsive SEO Section */
@media (max-width: 1200px) {

    .seo-ranking-grid,
    .keywords-grid,
    .backlinks-strategy-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .roi-calculation {
        grid-template-columns: 1fr;
    }

    .roi-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {

    .seo-ranking-grid,
    .keywords-grid,
    .backlinks-strategy-grid,
    .timeline-container,
    .timeline-summary {
        grid-template-columns: 1fr;
    }

    .seo-alert-box {
        flex-direction: column;
        text-align: center;
    }

    .roi-conclusion {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .seo-recommendation {
        margin: 0 24px 24px;
    }

    .rec-budget {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}

/* ===========================================
   INSIGHTS PREMIUM SECTION - ULTRA DYNAMIQUE
   =========================================== */

.insights-premium-section {
    padding: 48px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 50%, #f1f5f9 100%);
    position: relative;
    overflow: hidden;
}

.insights-premium-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--success), var(--warning), var(--secondary));
    background-size: 300% 100%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Header Premium */
.insights-premium-header {
    text-align: center;
    margin-bottom: 48px;
    position: relative;
}

.insights-title-wrapper {
    display: inline-block;
}

.insights-badge-animated {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(0, 78, 154, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
    border: 1px solid rgba(0, 78, 154, 0.2);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--primary);
    margin-bottom: 16px;
    animation: floatBadge 3s ease-in-out infinite;
}

@keyframes floatBadge {

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

    50% {
        transform: translateY(-5px);
    }
}

.pulse-dot {
    width: 10px;
    height: 10px;
    background: var(--success);
    border-radius: 50%;
    position: relative;
    animation: pulseDot 2s ease-in-out infinite;
}

.pulse-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: var(--success);
    border-radius: 50%;
    animation: pulseRing 2s ease-in-out infinite;
}

@keyframes pulseDot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes pulseRing {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

.insights-main-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.title-icon {
    font-size: 2.5rem;
    animation: bounce 2s ease infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.insights-subtitle {
    font-size: 1.1rem;
    color: var(--gray-500);
    max-width: 500px;
    margin: 0 auto;
}

/* Dashboard Grid */
.insights-dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-bottom: 40px;
}

/* Premium Card */
.insight-card-premium {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.insight-card-premium:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.insight-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.insight-card-premium:hover::before {
    opacity: 1;
}

.insight-card-premium[data-category="planning"]::before {
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

.insight-card-premium[data-category="marketing"]::before {
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
}

.insight-card-premium[data-category="operations"]::before {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.insight-card-premium[data-category="opportunity"]::before {
    background: linear-gradient(90deg, #10b981, #22d3ee);
}

/* Card Glow Effect */
.card-glow {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.insight-card-premium:hover .card-glow {
    opacity: 0.15;
}

.insight-card-premium[data-category="planning"] .card-glow {
    background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
}

.insight-card-premium[data-category="marketing"] .card-glow {
    background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
}

.insight-card-premium[data-category="operations"] .card-glow {
    background: radial-gradient(circle, #f59e0b 0%, transparent 70%);
}

.insight-card-premium[data-category="opportunity"] .card-glow {
    background: radial-gradient(circle, #10b981 0%, transparent 70%);
}

/* Featured Card */
.insight-card-premium.featured {
    border: 2px solid #10b981;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.03) 0%, var(--white) 100%);
}

.insight-card-premium.featured::before {
    opacity: 1;
    height: 6px;
}

.featured-ribbon {
    display: none;
}

/* Card Header */
.card-header-premium {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 16px;
}

.icon-container {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.icon-bg {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    transition: opacity 0.3s ease;
}

.icon-container:hover .icon-bg {
    opacity: 0.25;
}

.planning-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
}

.planning-icon .icon-bg {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
}

.marketing-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(236, 72, 153, 0.15) 100%);
}

.marketing-icon .icon-bg {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
}

.operations-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(239, 68, 68, 0.15) 100%);
}

.operations-icon .icon-bg {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

.opportunity-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(34, 211, 238, 0.15) 100%);
}

.opportunity-icon .icon-bg {
    background: linear-gradient(135deg, #10b981 0%, #22d3ee 100%);
}

.animated-icon {
    font-size: 1.8rem;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.icon-container:hover .animated-icon {
    transform: scale(1.15) rotate(5deg);
}

.header-content {
    flex: 1;
}

.category-tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--gray-500);
    text-transform: uppercase;
}

.header-content h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-top: 4px;
}

/* Priority Indicator */
.priority-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.priority-indicator.high {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.priority-indicator.medium {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.priority-indicator.urgent {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(34, 211, 238, 0.15) 100%);
    color: #059669;
    animation: pulseUrgent 2s ease infinite;
}

@keyframes pulseUrgent {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
}

.priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: blink 1.5s ease infinite;
}

.priority-indicator.high .priority-dot {
    background: #dc2626;
}

.priority-indicator.medium .priority-dot {
    background: #d97706;
}

.priority-indicator.urgent .priority-dot {
    background: #059669;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Card Body */
.card-body-premium {
    padding: 0 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.insight-item-premium {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--gray-100);
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: default;
}

.insight-item-premium:hover {
    background: #e2e8f0;
    transform: translateX(6px);
}

.item-indicator {
    width: 4px;
    height: 36px;
    border-radius: 4px;
    flex-shrink: 0;
}

.item-indicator.success {
    background: linear-gradient(180deg, #10b981 0%, #34d399 100%);
}

.item-indicator.warning {
    background: linear-gradient(180deg, #f59e0b 0%, #fbbf24 100%);
}

.item-indicator.info {
    background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 100%);
}

.item-indicator.danger {
    background: linear-gradient(180deg, #ef4444 0%, #f87171 100%);
}

.item-indicator.neutral {
    background: linear-gradient(180deg, #64748b 0%, #94a3b8 100%);
}

.item-indicator.opportunity {
    background: linear-gradient(180deg, #10b981 0%, #22d3ee 100%);
}

.item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-action {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark);
}

.item-detail {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.item-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.item-badge.success {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.item-badge.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.item-badge.info {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.item-badge.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.item-badge.neutral {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
}

.item-badge.opportunity {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(34, 211, 238, 0.2) 100%);
    color: #059669;
}

/* Card Footer */
.card-footer-premium {
    display: none;
}

.impact-meter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.impact-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c5f5f;
    white-space: nowrap;
}

.impact-bar {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.impact-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--success) 100%);
    border-radius: 10px;
    transition: width 1s ease;
    position: relative;
}

.impact-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

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

    100% {
        transform: translateX(100%);
    }
}

.impact-value {
    font-size: 0.85rem;
    font-weight: 800;
    color: #00ff26;
    min-width: 40px;
    text-align: right;
}

/* Featured Footer */
.featured-footer {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(34, 211, 238, 0.1) 100%);
    border-top: 1px solid rgba(16, 185, 129, 0.2);
}

.potential-gain {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gain-icon {
    font-size: 2rem;
    animation: pulseGain 2s ease infinite;
}

@keyframes pulseGain {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.gain-content {
    display: flex;
    flex-direction: column;
}

.gain-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 500;
}

.gain-value {
    font-size: 1.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stats Bar */
.insights-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    background: var(--white);
    padding: 24px 40px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.stat-item-premium {
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-icon-container {
    width: 48px;
    height: 48px;
    background: var(--gray-100);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all 0.3s ease;
}

.stat-item-premium:hover .stat-icon-container {
    transform: scale(1.1) rotate(5deg);
}

.stat-icon-container.urgent {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(34, 211, 238, 0.15) 100%);
}

.stat-icon-container.success {
    background: rgba(16, 185, 129, 0.15);
}

.stat-icon-container.info {
    background: rgba(59, 130, 246, 0.15);
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.1;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent 0%, var(--gray-300) 50%, transparent 100%);
}

/* Responsive */
@media (max-width: 1200px) {
    .insights-dashboard {
        grid-template-columns: 1fr;
    }

    .insights-stats-bar {
        flex-wrap: wrap;
        gap: 20px;
    }

    .stat-divider {
        display: none;
    }
}

@media (max-width: 768px) {
    .insights-premium-section {
        padding: 32px 20px;
    }

    .insights-main-title {
        font-size: 1.6rem;
        flex-direction: column;
        gap: 8px;
    }

    .card-header-premium {
        flex-wrap: wrap;
        gap: 12px;
    }

    .priority-indicator {
        order: -1;
        width: 100%;
        justify-content: center;
    }

    .insights-stats-bar {
        padding: 20px;
    }

    .stat-item-premium {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }
}