* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: 'Tajawal';

        }

        

        body {

            font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            min-height: 100vh;

            padding: 20px;

            position: relative;

        }

        

        body::before {

            content: '';

            position: fixed;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.05)" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') repeat-x bottom;

            pointer-events: none;

            z-index: 0;

        }

        

        .container {

            max-width: 1400px;

            margin: 0 auto;

            background: white;

            border-radius: 20px;

            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35);

            overflow: hidden;

            position: relative;

            z-index: 1;

        }

        

        .header {

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            color: white;

            padding: 30px;

            text-align: center;

            position: relative;

        }

        

        .header::before {

            content: '📚';

            position: absolute;

            font-size: 120px;

            opacity: 0.1;

            bottom: -30px;

            left: 20px;

            transform: rotate(-15deg);

        }

        

        .header h1 {

            font-size: 32px;

            margin-bottom: 10px;

        }

        

        .header p {

            opacity: 0.9;

        }

        

        /* User Bar */

        .user-bar {

            background: rgba(255,255,255,0.95);

            padding: 12px 25px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            flex-wrap: wrap;

            gap: 15px;

            border-bottom: 1px solid #e0e0e0;

        }

        

        .user-info {

            display: flex;

            align-items: center;

            gap: 15px;

            flex-wrap: wrap;

        }

        

        .welcome-text {

            color: #333;

        }

        

        .welcome-text i {

            color: #667eea;

        }

        

        .btn-connect {

            background: #28a745;

            color: white;

            padding: 8px 16px;

            border-radius: 8px;

            text-decoration: none;

            font-size: 13px;

            font-weight: 600;

            transition: all 0.3s;

            display: inline-flex;

            align-items: center;

            gap: 8px;

        }

        

        .btn-connect:hover {

            background: #218838;

            transform: translateY(-2px);

        }

        

        .btn-demandes {

            background: #667eea;

            color: white;

            padding: 8px 16px;

            border-radius: 8px;

            text-decoration: none;

            font-size: 13px;

            font-weight: 600;

            transition: all 0.3s;

            display: inline-flex;

            align-items: center;

            gap: 8px;

        }

        

        .btn-demandes:hover {

            background: #5a67d8;

            transform: translateY(-2px);

        }

        

        .btn-logout {

            background: #dc3545;

            color: white;

            padding: 8px 16px;

            border-radius: 8px;

            text-decoration: none;

            font-size: 13px;

            font-weight: 600;

            transition: all 0.3s;

            display: inline-flex;

            align-items: center;

            gap: 8px;

        }

        

        /* Filters */

        .filters {

            padding: 20px 25px;

            background: #744fa8;

            border-bottom: 1px solid #e0e0e0;

        }

        

        .filters-form {

            display: flex;

            gap: 15px;

            flex-wrap: wrap;

            align-items: flex-end;

        }

        

        .filter-group {

            flex: 1;

            min-width: 150px;

        }

        

        .filter-group label {

            display: block;

            margin-bottom: 5px;

            font-weight: 600;

            color: wheat;

            font-size: 13px;

        }

        

        .filter-group select, .filter-group input {

            width: 100%;

            padding: 8px 12px;

            border: 2px solid #e0e0e0;

            border-radius: 8px;

            font-size: 14px;

            transition: all 0.3s;

        }

        

        .filter-group select:focus, .filter-group input:focus {

            outline: none;

            border-color: #667eea;

        }

        

        .btn-filter {

            background: #667eea;

            color: white;

            border: none;

            padding: 8px 20px;

            border-radius: 8px;

            cursor: pointer;

            font-weight: 600;

            transition: all 0.2s;

        }

        

        .btn-filter:hover {

            background: #5a67d8;

            transform: translateY(-1px);

        }

        

        .btn-reset {

            background: #95a5a6;

            color: white;

            border: none;

            padding: 8px 20px;

            border-radius: 8px;

            cursor: pointer;

            font-weight: 600;

            transition: all 0.2s;

        }

        

        .btn-reset:hover {

            background: #7f8c8d;

        }

        

        .classes-list {

            padding: 25px;

        }

        

        .classes-list h2 {

            color: #333;

            margin-bottom: 20px;

            display: flex;

            align-items: center;

            gap: 10px;

        }

        

        .classes-list h2 .count {

            background: #667eea;

            color: white;

            padding: 5px 12px;

            border-radius: 20px;

            font-size: 14px;

        }

        

        /* Stats */

        .stats {

            display: flex;

            gap: 15px;

            margin-bottom: 25px;

            flex-wrap: wrap;

        }

        

        .stat-card {

            background: #f8f9fa;

            padding: 10px 15px;

            border-radius: 10px;

            display: inline-flex;

            align-items: center;

            gap: 10px;

        }

        

        .stat-card .number {

            font-weight: bold;

            color: #667eea;

            font-size: 18px;

        }

        

        /* Search */

        .search-box {

            margin-bottom: 20px;

            display: flex;

            gap: 10px;

        }

        

        .search-box input {

            flex: 1;

            padding: 10px 15px;

            border: 2px solid #e0e0e0;

            border-radius: 10px;

            font-size: 14px;

        }

        

        .search-box input:focus {

            outline: none;

            border-color: #667eea;

        }

        

        /* Table */

        .table-container {

            overflow-x: auto;

            border-radius: 12px;

            border: 1px solid #e0e0e0;

        }

        

        table {

            width: 100%;

            border-collapse: collapse;

        }

        

        th {

            background: #f8f9fa;

            padding: 12px;

            text-align: right;

            font-weight: 600;

            color: #333;

            border-bottom: 2px solid #e0e0e0;

        }

        

        td {

            padding: 12px;

            border-bottom: 1px solid #e0e0e0;

            vertical-align: top;

        }

        

        tr:hover {

            background: #f8f9fa;

        }

        

        /* Badges */

        .badge {

            display: inline-block;

            padding: 4px 10px;

            border-radius: 12px;

            font-size: 12px;

            font-weight: 600;

        }

        

        .badge.ouvert {

            background: #d4edda;

            color: #155724;

        }

        

        .badge.ferme {

            background: #f8d7da;

            color: #721c24;

        }

        

        /* Matieres */

        .matieres-cell {

            min-width: 200px;

            max-width: 300px;

        }

        

        .matiere-list {

            display: flex;

            flex-direction: column;

            gap: 5px;

        }

        

        .matiere-item {

            padding: 6px 10px;

            margin: 2px 0;

            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

            border-radius: 6px;

            font-size: 12px;

            border-right: 3px solid #667eea;

            transition: all 0.2s;

            text-align: right;

        }

        

        .classe-libelle {

            font-size: 11px;

            color: #667eea;

            margin-top: 6px;

            text-align: right;

            font-weight: normal;

            padding: 4px 8px;

            background: #f0f0f0;

            border-radius: 4px;

            display: inline-block;

        }

        

        /* Prix styles */

        .prix-ouvert {

            color: #28a745;

            font-weight: 600;

        }

        

        .prix-ferme {

            color: #dc3545;

            font-weight: 600;

            text-decoration: line-through;

        }

        

        /* Inscription buttons */

        .inscription-buttons {

            display: flex;

            flex-direction: column;

            gap: 8px;

        }

        

        .btn-inscription {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            padding: 8px 12px;

            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);

            color: white;

            text-decoration: none;

            border-radius: 8px;

            font-size: 12px;

            font-weight: 600;

            transition: all 0.2s;

            border: none;

            cursor: pointer;

        }

        

        .btn-inscription:hover {

            transform: translateY(-2px);

            box-shadow: 0 5px 15px rgba(40,167,69,0.3);

        }

        

        .btn-inscription-disabled {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            padding: 8px 12px;

            background: #dc3545;

            color: white;

            border-radius: 8px;

            font-size: 12px;

            font-weight: 600;

            cursor: not-allowed;

            opacity: 0.7;

        }

        

        .empty-state {

            text-align: center;

            padding: 60px;

            color: #999;

        }

        

        .empty-state i {

            font-size: 60px;

            margin-bottom: 15px;

            opacity: 0.5;

        }

        

        @media (max-width: 768px) {

            .filters-form {

                flex-direction: column;

            }

            

            .filter-group {

                width: 100%;

            }

            

            th, td {

                font-size: 12px;

                padding: 8px;

            }

            

            .matieres-cell {

                min-width: 180px;

            }

            

            .btn-inscription, .btn-inscription-disabled {

                padding: 6px 10px;

                font-size: 10px;

            }

            

            .user-bar {

                flex-direction: column;

                text-align: center;

            }

        }