* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color:rgb(235,235,235);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            transition: background 0.5s ease;
        }

        body.theme-sondago {
            background: linear-gradient(135deg, #8f0165 0%, #e01f72 100%);
        }

        body.theme-quizhit {
            background: linear-gradient(135deg, #75057f 0%, #f30d48 50%, #ff7e01 100%);
        }

        body.theme-ascenders {
            background: linear-gradient(135deg, #020f1d 0%, #00536e 100%);
        }

        .contents-card.half-width {
            grid-column: span 1;
        }
        .container {
            width: 100%;
            max-width: 2300px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        .login-screen {
            padding: 60px 40px;
            text-align: center;
        }

        .login-screen h1 {
            color: #667eea;
            margin-bottom: 40px;
            font-size: 2em;
        }

        .login-form {
            max-width: 400px;
            margin: 0 auto;
        }

        .form-group {
            margin-bottom: 25px;
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 600;
        }

        .form-group input {
            width: 100%;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .btn-login {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
        }

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

        .error-message {
            color: #e74c3c;
            margin-top: 15px;
            font-size: 14px;
        }

        .app-selection {
            padding: 40px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f0f0f0;
        }

        .header h2 {
            color: #333;
            font-size: 1.8em;
        }

        .btn-logout {
            padding: 10px 20px;
            background: #e74c3c;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
        }

        .app-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }

        .app-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 40px;
            border-radius: 15px;
            color: white;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .app-card.sondago {
            background: linear-gradient(135deg, #8f0165 0%, #e01f72 100%);
        }

        .app-card.quizhit {
            background: linear-gradient(135deg, #75057f 0%, #f30d48 50%, #ff7e01 100%);
        }

        .app-card.ascenders {
            background: linear-gradient(135deg, #020f1d 0%, #00536e 100%);
        }

        .app-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .app-card-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5em;
        }

        .app-card-icon img {
            width: 60px;
            height: 60px;
            object-fit: contain;
        }

        .app-card h3 {
            font-size: 1.8em;
            margin-bottom: 15px;
        }

        .app-card p {
            opacity: 0.9;
        }

        .dashboard {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .dashboard-header {
            background: white;
            color: black;
            padding: 15px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            transition: background 0.5s ease;
        }

        .dashboard-header.theme-sondago {
            background: linear-gradient(135deg, #8f0165 0%, #e01f72 100%);
            color:#8f0165;
        }

        .dashboard-header.theme-quizhit {
            background: linear-gradient(135deg, #75057f 0%, #f30d48 50%, #ff7e01 100%);
              color:#f30d48;
        }

        .dashboard-header.theme-ascenders {
            background: linear-gradient(135deg, #020f1d 0%, #00536e 100%);
            color:#00536e;
        }

        .dashboard-header h2 {
            font-size: 1.8em;
        }

        .header-buttons {
            display: flex;
            gap: 10px;
        }

        .btn-back {
            padding: 10px 20px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
        }

        .btn-back:hover, .btn-logout:hover {
            opacity: 0.8;
        }

        .date-selector {
            background: #f8f9fa;
            padding: 20px 40px;
            border-bottom: 2px solid #e0e0e0;
        }

        .date-selector-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            flex-wrap: wrap;
        }

        .date-selector-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .date-display-compact {
            display: flex;
            align-items: center;
            gap: 20px;
            flex: 1;
        }

        .date-display-compact .date-info-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .date-display-compact label {
            font-size: 12px;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .date-display-compact .date-value {
            font-size: 16px;
            color: #333;
            font-weight: 600;
            padding: 10px 15px;
            background: white;
            border-radius: 8px;
            border: 2px solid #e0e0e0;
        }

        .btn-toggle-calendar {
            padding: 10px 20px;
            background: white;
            color: #667eea;
            border: 2px solid #667eea;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-toggle-calendar:hover {
            background: #667eea;
            color: white;
        }

        .calendar-wrapper {
            display: flex;
            gap: 30px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .calendar-wrapper.hidden {
            display: none;
        }

        .calendar-container {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

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

        .calendar-header h3 {
            font-size: 16px;
            color: #333;
            margin: 0;
        }

        .calendar-nav {
            display: flex;
            gap: 10px;
        }

        .calendar-nav button {
            background: #667eea;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s;
        }

        .calendar-nav button:hover {
            background: #5568d3;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
        }

        .calendar-day-name {
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: #666;
            padding: 8px;
        }

        .calendar-day {
            text-align: center;
            padding: 10px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            background: white;
            border: 2px solid transparent;
            transition: all 0.2s;
            min-width: 40px;
        }

        .calendar-day:hover:not(.disabled):not(.other-month) {
            background: rgba(102, 126, 234, 0.1);
        }

        .calendar-day.disabled {
            color: #ccc;
            cursor: not-allowed;
        }

        .calendar-day.other-month {
            color: #ddd;
            cursor: default;
        }

        .calendar-day.selected {
            background: #667eea;
            color: white;
            font-weight: 600;
        }

        .calendar-day.in-range {
            background: rgba(102, 126, 234, 0.2);
            color: #333;
        }

        .calendar-day.start-date, .calendar-day.end-date {
            background: #667eea;
            color: white;
            font-weight: 600;
            border-bottom: 3px solid #4a5fc1;
        }

        .date-info {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .date-info-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .date-info-item label {
            font-size: 12px;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .date-info-item .date-value {
            font-size: 16px;
            color: #333;
            font-weight: 600;
            padding: 10px 15px;
            background: white;
            border-radius: 8px;
            border: 2px solid #e0e0e0;
        }

        .btn-load {
            padding: 12px 30px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s;
            align-self: flex-end;
        }

        .btn-load:hover {
            background: #5568d3;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
        }

        .btn-load:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        .tabs {
            display: flex;
            background: #f8f9fa;
            padding: 0 40px;
            overflow-x: auto;
            border-bottom: 2px solid #e0e0e0;
        }

        .tab {
            padding: 20px 25px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all 0.3s;
            white-space: nowrap;
            color: #666;
            font-weight: 600;
        }

        .tab:hover {
            background: rgba(102, 126, 234, 0.1);
        }

        .tab.active {
            color: #667eea;
            border-bottom-color: #667eea;
            background: white;
        }

        .content {
            padding: 40px;
            flex: 1;
            max-height: calc(100vh - 350px);
            overflow-y: auto;
        }

        .charts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 25px;
        }

        .vue-ensemble-container{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .chart-container {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
            padding: 25px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .chart-container h3 {
            margin-bottom: 20px;
            color: #333;
            font-size: 18px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .chart-container .percent {
            font-weight: bold;
            margin-left: 10px;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 14px;
            display: inline-block;
        }

        .chart-container .percent.positive {
            background: rgba(39, 174, 96, 0.2);
            color: #27ae60;
        }

        .chart-container .percent.negative {
            background: rgba(231, 76, 60, 0.2);
            color: #e74c3c;
        }

        canvas {
            width: 100% !important;
            height: 300px !important;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #667eea;
            font-size: 18px;
        }

        .hidden {
            display: none;
        }

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

        @media (max-width: 768px) {
              .vue-ensemble-container{
                grid-template-columns: repeat(1, 1fr);
            }
            .content .charts-grid {
                grid-template-columns: 1fr;
            }
            
            .date-selector {
                padding: 15px 20px;
            }
            
            .content {
                padding: 20px;
            }

            .tabs {
                padding: 0 20px;
            }
        }

        .registers-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 25px;
        }
        
        .register-card {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
            padding: 25px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }
        
        .register-card h3 {
            margin-bottom: 20px;
            color: #333;
            font-size: 18px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .percent-badge {
            font-weight: bold;
            margin-left: 10px;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 14px;
            display: inline-block;
        }
        
        .percent-badge.positive {
            background: rgba(39, 174, 96, 0.2);
            color: #27ae60;
        }
        
        .percent-badge.negative {
            background: rgba(231, 76, 60, 0.2);
            color: #e74c3c;
        }
        
        .age-container {
            display: flex;
            flex-direction: row;
            gap: 20px;
            flex: 1;
            align-items: center;
        }
        
        .age-average {
            display: flex;
            flex-direction: column;
            flex: 1;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .age-average p:first-child {
            color: #666;
            font-size: 14px;
            font-weight: 600;
            margin: 0 0 10px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .age-average p:last-child {
            color: #333;
            font-size: 32px;
            font-weight: bold;
            margin: 0;
        }
        
        .age-chart {
            display: flex;
            flex: 1;
            flex-direction: column;
            border-left: 2px solid rgba(102, 126, 234, 0.2);
            padding-left: 20px;
            align-items: center;
            justify-content: center;
        }
        
        .retention-display {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 20px;
        }
        
        .retention-display p:first-child {
            color: #667eea;
            font-size: 48px;
            font-weight: bold;
            margin: 0 0 10px 0;
        }
        
        .retention-display p:last-child {
            color: #666;
            font-size: 16px;
            font-weight: 600;
            margin: 0;
        }
        
        canvas {
            width: 100% !important;
            height: 300px !important;
        }
        
        @media (max-width: 768px) {
            .registers-container {
                grid-template-columns: 1fr;
            }
            
            .age-container {
                flex-direction: column;
            }
            
            .age-chart {
                border-left: none;
                border-top: 2px solid rgba(102, 126, 234, 0.2);
                padding-left: 0;
                padding-top: 20px;
            }
        }
        
/* Ajoutez ce CSS à la fin de votre fichier style.css */

.user-activity-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 25px;
}

.activity-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.activity-card h3 {
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.demographic-row {
    display: flex;
    gap: 20px;
    flex: 1;
}

.demographic-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.demographic-col canvas {
    height: 250px !important;
    max-width: 250px;
}

.demographic-label {
    color: #333;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

@media (max-width: 1200px) {
    .user-activity-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .demographic-row {
        flex-direction: column;
    }
    
    .demographic-col canvas {
        max-width: 100%;
    }
}

.inactives-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 25px;
}

.inactive-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.inactive-card.large-card {
    grid-column: span 2;
}

.activity-card.large-card {
    grid-column: span 2;
}

.inactive-card h3 {
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

.inactivity-comparison {
    display: flex;
    gap: 40px;
    flex: 1;
    align-items: center;
    justify-content: space-around;
}

.inactivity-period {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.period-label {
    color: #666;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 10px;
}

.period-value {
    font-size: 40px;
    font-weight: bold;
    margin: 10px 0;
}

.period-value.previous {
    color: rgba(0,0,0, 0.7);
}

.period-value.current {
    color: #333;
}

.period-value.positive {
    color: green;
}

.period-value.negative {
    color: red;
}

.period-diff {
    font-size: 13px;
    margin-top: 5px;
}

.period-diff.positive {
    color: green;
}

.period-diff.negative {
    color: red;
}

.deletion-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.deletion-percent {
    font-size: 40px;
    font-weight: bold;
    margin: 10px 0;
}

.deletion-percent.positive {
    color: green;
}

.deletion-percent.negative {
    color: red;
}

.deletion-detail {
    font-size: 13px;
    color: #666;
    text-align: center;
    margin-top: 10px;
}

@media (max-width: 1200px) {
    .inactives-container {
        grid-template-columns: 1fr;
    }
    
    .inactive-card.large-card {
        grid-column: span 1;
    }
    .activity-card.large-card {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .inactivity-comparison {
        flex-direction: column;
        gap: 20px;
    }
}
.retention-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 25px;
}

.retention-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.retention-card.large-card {
    grid-column: span 2;
}

#chartsContent.large-card {
    grid-column: span 2;
}

.retention-card.full-width {
    grid-column: 1 / -1;
}

.retention-card h3 {
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

.retention-evolution {
    display: flex;
    gap: 40px;
    flex: 1;
    align-items: center;
    justify-content: space-around;
}

.retention-period {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.period-label {
    color: #333;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 10px;
}

.period-label-secondary {
    color: rgba(102, 126, 234, 0.7);
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 10px;
}

.period-value {
    font-size: 40px;
    font-weight: bold;
    margin: 10px 0;
}

.period-value.current {
    color: #333;
}

.period-value.positive {
    color: green;
}

.period-value.negative {
    color: red;
}

.period-diff {
    font-size: 13px;
    margin-top: 5px;
}

.period-diff.positive {
    color: green;
}

.period-diff.negative {
    color: red;
}

@media (max-width: 1200px) {
    .retention-container {
        grid-template-columns: 1fr;
    }
    
    .retention-card.large-card,
    .retention-card.full-width {
        grid-column: span 1;
    }
    #chartsContent.large-card {
    grid-column: span 1;
}
}

@media (max-width: 768px) {
    .retention-evolution {
        flex-direction: column;
        gap: 20px;
    }
}
.economy-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 25px;
}

.economy-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.economy-card.large-card {
    grid-column: span 2;
}

.economy-card h3 {
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

/* Revenus */
.revenue-comparison {
    display: flex;
    gap: 40px;
    flex: 1;
    align-items: center;
    justify-content: space-around;
}

.revenue-period {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.revenue-period .period-label {
    color: #333;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.revenue-period .period-label-secondary {
    color: rgba(0,0,0, 0.7);
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.revenue-period .period-value {
    font-size: 40px;
    font-weight: bold;
    margin: 10px 0;
}

.revenue-period .period-value.current {
    color: #333;
}

.revenue-period .period-value.previous {
    color: rgba(0,0,0, 0.7);
}

.revenue-period .period-value.positive {
    color: green;
}

.revenue-period .period-value.negative {
    color: red;
}

.revenue-period .period-diff {
    font-size: 13px;
    margin-top: 5px;
}

.revenue-period .period-diff.positive {
    color: green;
}

.revenue-period .period-diff.negative {
    color: red;
}

/* Premiers achats */
.first-purchase-comparison {
    display: flex;
    gap: 40px;
    flex: 1;
    align-items: center;
    justify-content: space-around;
}

.purchase-period {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.purchase-period .period-label {
    color: #333;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.purchase-period .period-label-secondary {
    color: rgba(0,0,0, 0.7);
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.purchase-period .period-value {
    font-size: 40px;
    font-weight: bold;
    margin: 10px 0;
}

.purchase-period .period-value.current {
    color: #333;
}

.purchase-period .period-value.previous {
    color: rgba(0,0,0, 0.7);
}

.purchase-period .period-value.positive {
    color: green;
}

.purchase-period .period-value.negative {
    color: red;
}

.purchase-period .purchase-detail {
    font-size: 13px;
    color: #666;
    margin-top: 5px;
}

/* Types d'achats */
.types-comparison {
    display: flex;
    gap: 40px;
    flex: 1;
    align-items: center;
    justify-content: space-around;
    padding: 20px;
}

.type-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.type-col .period-label {
    color: #333;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 15px;
}

.type-col .period-label-secondary {
    color: rgba(0,0,0, 0.7);
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 15px;
}

.type-col canvas {
    height: 300px !important;
    max-width: 300px;
}

/* Responsive */
@media (max-width: 1200px) {
    .economy-container {
        grid-template-columns: 1fr;
    }
    
    .economy-card.large-card {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .revenue-comparison,
    .first-purchase-comparison,
    .types-comparison {
        flex-direction: column;
        gap: 20px;
    }
    
    .type-col canvas {
        max-width: 100%;
    }
}
.contents-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 25px;
}

.contents-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.contents-card.large-card {
    grid-column: span 2;
}

.contents-card h3 {
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contents-comparison {
    display: flex;
    gap: 40px;
    flex: 1;
    align-items: center;
    justify-content: space-around;
}

.contents-period {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.contents-period .period-label {
    color: #333;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.contents-period .period-label-secondary {
    color: rgba(0, 0, 0, 0.7);
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.contents-period .period-value {
    font-size: 40px;
    font-weight: bold;
    margin: 10px 0;
}

.contents-period .period-value.current {
    color: #333;
}

.contents-period .period-value.previous {
    color: rgba(0, 0, 0, 0.7);
}

.contents-period .period-value.positive {
    color: green;
}

.contents-period .period-value.negative {
    color: red;
}

.contents-period .period-detail {
    font-size: 13px;
    color: #666;
    text-align: center;
    margin-top: 5px;
}

/* Loading spinner */
.loading-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.spinner {
    border: 4px solid rgba(102, 126, 234, 0.3);
    border-top: 4px solid #667eea;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1200px) {
    .contents-container {
        grid-template-columns: 1fr;
    }
    
    .contents-card.large-card {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .contents-comparison {
        flex-direction: column;
        gap: 20px;
    }
}
/* ========== WEB STATISTICS SECTION ========== */

.web-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 25px;
}

.web-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.web-card.large-card {
    grid-column: span 2;
}

.web-card h3 {
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

/* Taux de clic (CTR) */
.web-comparison {
    display: flex;
    gap: 40px;
    flex: 1;
    align-items: center;
    justify-content: space-around;
}

.web-period {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.web-period .period-label {
    color: #333;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.web-period .period-label-secondary {
    color: rgba(0, 0, 0, 0.7);
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.web-period .period-value {
    font-size: 40px;
    font-weight: bold;
    margin: 10px 0;
}

.web-period .period-value.current {
    color: #333;
}

.web-period .period-value.previous {
    color: rgba(0, 0, 0, 0.7);
}

.web-period .period-value.positive {
    color: green;
}

.web-period .period-value.negative {
    color: red;
}

.web-period .period-diff {
    font-size: 13px;
    margin-top: 5px;
}

.web-period .period-diff.positive {
    color: green;
}

.web-period .period-diff.negative {
    color: red;
}

/* Responsive Web Section */
@media (max-width: 1200px) {
    .web-container {
        grid-template-columns: 1fr;
    }
    
    .web-card.large-card {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .web-comparison {
        flex-direction: column;
        gap: 20px;
    }
}
.ut-card {
    grid-column: 1 / -1;
    min-width: 0; /* évite que le tableau large n'agrandisse la grille */
}
 
.ut-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #666;
    margin: 4px 0 12px;
}
.ut-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ut-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
 
.ut-empty { font-size: 13px; color: #888; margin: 6px 0; }
 
.ut-scroll { overflow: auto; max-height: 80vh; min-height: 400px; }
.ut-table { min-width: calc(240px + var(--n) * 52px); }
 
.ut-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.ut-head {
    position: sticky;
    top: 0;
    background: #ece9f7; /* opaque, proche du fond des cards (dégradé translucide) */
    z-index: 1;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
 
.ut-user { display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; padding-right: 8px; }
.ut-user strong { font-size: 14px; color: #222; }
.ut-user .ut-pseudo { font-size: 13px; font-weight: 600; color: #5568d3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-user span { color: #777; }
.ut-user-deleted strong { color: #c0392b; }
 
.ut-bars {
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(44px, 1fr));
    gap: 4px;
}
 
.ut-day-label { font-size: 12px; }
 
.ut-cell { height: 80px; display: flex; align-items: flex-end; }
.ut-cell.ut-before {
    border-bottom: 2px dashed #d5d5e0;
}
 
.ut-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ut-bar span { font-size: 11px; }
 
.ut-green  { background: #2ecc71; }
.ut-orange { background: #f39c12; }
.ut-red    { background: #e74c3c; }