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

		body {
		    font-family: 'Source Sans Pro', 'Segoe UI', sans-serif;
		    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #ff6b35 25%, #4facfe 100%);
		    min-height: 100vh;
		    padding: 20px;
		    position: relative;
		    overflow-x: hidden;
		    margin: 0;
		    background-attachment: fixed;
		}
		 
		 /* Container principal du header avec logo */
		.header-content {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    gap: 30px;
		    position: relative;
		    z-index: 2;
		    flex-wrap: wrap;
		}

		/* Logo universitaire */
		.header-logo {
		    width: 80px;
		    height: 80px;
		    border-radius: 50%;
		    border: 3px solid rgba(255, 255, 255, 0.3);
		    box-shadow: 
			0 10px 20px rgba(0, 0, 0, 0.3),
			0 0 0 5px rgba(255, 255, 255, 0.1);
		    transition: transform 0.3s ease, box-shadow 0.3s ease;
		    object-fit: cover;
		    background: white;
		    padding: 5px;
		}

		.header-logo:hover {
		    transform: scale(1.1) rotate(5deg);
		    box-shadow: 
			0 15px 30px rgba(0, 0, 0, 0.4),
			0 0 0 8px rgba(255, 255, 255, 0.2);
		}

		/* Conteneur du texte */
		.header-text {
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    text-align: center;
		}

		.header-text h1 {
		    font-size: 3.5em;
		    margin-bottom: 10px;
		    text-shadow: 
			3px 3px 6px rgba(0,0,0,0.4),
			0 0 20px rgba(255,255,255,0.2);
		    background: linear-gradient(45deg, #ffffff, #f0f0f0, #ffffff);
		    -webkit-background-clip: text;
		    -webkit-text-fill-color: transparent;
		    background-clip: text;
		    animation: titleGlow 3s ease-in-out infinite;
		    font-weight: 800;
		    letter-spacing: 2px;
		}

		.header-text p {
		    font-size: 1.4em;
		    opacity: 0.95;
		    font-weight: 300;
		    letter-spacing: 1px;
		    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
		    margin: 0;
		}

		/* Responsive Design */
		@media (max-width: 768px) {
		    .header-content {
			flex-direction: column;
			gap: 20px;
		    }
		    
		    .header-logo {
			width: 80px;
			height: 80px;
		    }
		    
		    .header-text h1 {
			font-size: 2.5em;
		    }
		    
		    .header-text p {
			font-size: 1.1em;
		    }
		}

		@media (max-width: 480px) {
		    .header-logo {
			width: 50px;
			height: 50px;
		    }
		    
		    .header-text h1 {
			font-size: 2em;
		    }
		    
		    .header-text p {
			font-size: 1em;
		    }
		}

		@keyframes titleGlow {
		    0%, 100% { 
			text-shadow: 
			    3px 3px 6px rgba(0,0,0,0.4),
			    0 0 20px rgba(255,255,255,0.2);
		    }
		    50% { 
			text-shadow: 
			    3px 3px 6px rgba(0,0,0,0.4),
			    0 0 30px rgba(255,255,255,0.4),
			    0 0 40px rgba(255,255,255,0.2);
		    }
		}    	
			
		/* Particules flottantes dans le background */
		body::before {
		    content: '';
		    position: fixed;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    background: 
		        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
		        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
		        radial-gradient(circle at 40% 40%, rgba(255,255,255,0.05) 0%, transparent 50%);
		    animation: floatParticles 20s ease-in-out infinite;
		    pointer-events: none;
		    z-index: -1;
		}

		@keyframes floatParticles {
		    0%, 100% { transform: translateY(0px) rotate(0deg); }
		    33% { transform: translateY(-10px) rotate(120deg); }
		    66% { transform: translateY(5px) rotate(240deg); }
		}

		.container {
		    max-width: 1600px;
		    margin: 0 auto;
    		    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 20%, #ff6b35 35%, #764ba3 50%, #4facfe 60%, #ff6b35 80%, #ff6b35 100%);
		 
		    border-radius: 5px;
		    box-shadow: 
		        0 25px 50px rgba(0,0,0,0.15),
		        0 0 0 1px rgba(255,255,255,0.1),
		        inset 0 1px 0 rgba(255,255,255,0.2);
		    overflow: hidden;
		    margin-bottom: 80px;
		    backdrop-filter: blur(20px);
		    border: 1px solid rgba(255, 255, 255, 0.2);
		}
		
		.header {
		    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #4facfe 100%);
		    color: white;
		    padding: 60px 30px;
		    text-align: center;
		    position: relative;
		    overflow: hidden;
		}

		/* Effet de vagues animées */
		.header::before {
		    content: '';
		    position: absolute;
		    top: -50%;
		    left: -50%;
		    width: 200%;
		    height: 200%;
		    background: 
		        radial-gradient(ellipse at center, rgba(255,255,255,0.15) 0%, transparent 50%),
		        radial-gradient(ellipse at 30% 70%, rgba(255,255,255,0.1) 0%, transparent 60%);
		    animation: waveMotion 8s ease-in-out infinite;
		    z-index: 1;
		}

		.header::after {
		    content: '';
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    width: 100%;
		    height: 100px;
		    background: linear-gradient(to top, rgba(255,255,255,0.1), transparent);
		    clip-path: polygon(0 100%, 100% 100%, 100% 0%, 0 20%);
		    animation: shimmer 3s ease-in-out infinite;
		}

		@keyframes waveMotion {
		    0%, 100% { 
		        transform: scale(1) rotate(0deg); 
		        opacity: 0.8;
		    }
		    25% { 
		        transform: scale(1.1) rotate(90deg); 
		        opacity: 0.6;
		    }
		    50% { 
		        transform: scale(1.2) rotate(180deg); 
		        opacity: 0.8;
		    }
		    75% { 
		        transform: scale(1.1) rotate(270deg); 
		        opacity: 0.6;
		    }
		}

		@keyframes shimmer {
		    0%, 100% { opacity: 0.3; transform: translateX(-10px); }
		    50% { opacity: 0.6; transform: translateX(10px); }
		}

		.header h1 {
		    font-size: 3.5em;
		    margin-bottom: 20px;
		    text-shadow: 
		        3px 3px 6px rgba(0,0,0,0.4),
		        0 0 20px rgba(255,255,255,0.2);
		    position: relative;
		    z-index: 2;
		    background: linear-gradient(45deg, #ffffff, #f0f0f0, #ffffff);
		    -webkit-background-clip: text;
		    -webkit-text-fill-color: transparent;
		    background-clip: text;
		    animation: titleGlow 3s ease-in-out infinite;
		    font-weight: 800;
		    letter-spacing: 2px;
		}

		@keyframes titleGlow {
		    0%, 100% { 
		        text-shadow: 
		            3px 3px 6px rgba(0,0,0,0.4),
		            0 0 20px rgba(255,255,255,0.2);
		    }
		    50% { 
		        text-shadow: 
		            3px 3px 6px rgba(0,0,0,0.4),
		            0 0 30px rgba(255,255,255,0.4),
		            0 0 40px rgba(255,255,255,0.2);
		    }
		}

		.header p {
		    font-size: 1.4em;
		    opacity: 0.95;
		    position: relative;
		    z-index: 2;
		    font-weight: 300;
		    letter-spacing: 1px;
		    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
		    margin-bottom: 30px;
		}

		/* Éléments décoratifs flottants */
		.header-decoration {
		    position: absolute;
		    z-index: 1;
		}

		.decoration-1 {
		    top: 10%;
		    left: 10%;
		    width: 60px;
		    height: 60px;
		    background: radial-gradient(circle, rgba(255,255,255,0.2), transparent);
		    border-radius: 50%;
		    animation: float1 6s ease-in-out infinite;
		}

		.decoration-2 {
		    top: 20%;
		    right: 15%;
		    width: 40px;
		    height: 40px;
		    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent);
		    border-radius: 50%;
		    animation: float2 8s ease-in-out infinite;
		}

		.decoration-3 {
		    bottom: 15%;
		    left: 20%;
		    width: 50px;
		    height: 50px;
		    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent);
		    border-radius: 50%;
		    animation: float3 7s ease-in-out infinite;
		}

		@keyframes float1 {
		    0%, 100% { transform: translateY(0px) rotate(0deg); }
		    50% { transform: translateY(-20px) rotate(180deg); }
		}

		@keyframes float2 {
		    0%, 100% { transform: translateY(0px) rotate(0deg); }
		    50% { transform: translateY(-15px) rotate(-180deg); }
		}

		@keyframes float3 {
		    0%, 100% { transform: translateY(0px) rotate(0deg); }
		    50% { transform: translateY(-25px) rotate(180deg); }
		}

		/* Badge informatif */
		.header-badge {
		    position: absolute;
		    top: 20px;
		    right: 20px;
		    background: rgba(255, 255, 255, 0.2);
		    color: white;
		    padding: 8px 16px;
		    border-radius: 20px;
		    font-size: 0.9em;
		    font-weight: 600;
		    backdrop-filter: blur(10px);
		    border: 1px solid rgba(255, 255, 255, 0.3);
		    z-index: 3;
		    animation: badgePulse 2s ease-in-out infinite;
		}

		@keyframes badgePulse {
		    0%, 100% { transform: scale(1); }
		    50% { transform: scale(1.05); }
		}

		/* Responsive Design */
		@media (max-width: 768px) {
		    .header {
		        padding: 40px 20px;
		    }
		    
		    .header h1 {
		        font-size: 2.5em;
		        margin-bottom: 15px;
		    }
		    
		    .header p {
		        font-size: 1.1em;
		    }
		    
		    .header-badge {
		        top: 10px;
		        right: 10px;
		        font-size: 0.8em;
		        padding: 6px 12px;
		    }
		    
		    .decoration-1, .decoration-2, .decoration-3 {
		        display: none;
		    }
		}

		@media (max-width: 480px) {
		    .header h1 {
		        font-size: 2em;
		    }
		    
		    .header p {
		        font-size: 1em;
		    }
		}
		.content {
		    padding: 15px;
		}

		.mode-selection {
		    text-align: center;
		    margin-bottom: 30px;
		    padding: 20px;
		    background: linear-gradient(135deg,  #1e3c72 10%, #2a5298 25%, 0%, #e9ecef 90%);
		    border-radius: 10px;
		    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
		}

		.mode-selection h2 {
		    color: #333;
		    margin-bottom: 30px;
		    font-size: 1.8em;
		}

		.mode-buttons {
		    display: flex;
		    gap: 30px;
		    justify-content: center;
		    flex-wrap: wrap;
		}

		.mode-btn {
		    padding: 20px 40px;
		    font-size: 1.2em;
		    border: none;
		    border-radius: 15px;
		    cursor: pointer;
		    transition: all 0.3s ease;
		    background: linear-gradient(135deg, #667eea 0%, #2a5298 25% , #764ba2 100%);
		    color: white;
		    font-weight: bold;
		    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
		    position: relative;
		    overflow: hidden;
		}

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

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

		.mode-btn:hover {
		    transform: translateY(-3px);
		    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
		}

		.mode-btn.active {
		    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
		    transform: translateY(-2px);
		}

		.semester-section {
		    margin-bottom: 40px;
		    padding: 70px;
		    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
		    border-radius: 10px;
		    border: 2px solid #e9ecef;
		    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
		    position: relative;
		}

		.semester-section::before {
		    content: '';
		    position: absolute;
		    top: 0;
		    left: 0;
		    right: 0;
		    height: 5px;
		    background: linear-gradient(90deg, #4CAF50, #667eea, #764ba2);
		    border-radius: 20px 20px 0 0;
		}

		.semester-title {
		    font-size: 1.8em;
		    color: #333;
		    margin-bottom: 25px;
		    font-weight: bold;
		    text-align: center;
		}

		.subjects-count {
		    margin-bottom: 25px;
		    text-align: center;
		}

		.subjects-count label {
		    display: block;
		    margin-bottom: 10px;
		    font-weight: bold;
		    color: #555;
		    font-size: 1.1em;
		}

		.subjects-count input {
		    padding: 15px;
		    border: 2px solid #ddd;
		    border-radius: 10px;
		    font-size: 1.1em;
		    width: 250px;
		    max-width: 100%;
		    transition: all 0.3s ease;
		    text-align: center;
		    box-sizing: border-box;
		}

		.subjects-count input:focus {
		    outline: none;
		    border-color: #4CAF50;
		    box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
		}

		.subjects-container {
		    display: none;
		    margin-top: 20px;
		}

		.subject-row {
		    display: grid;
		    grid-template-columns: 2fr 1fr 1fr;
		    gap: 20px;
		    margin-bottom: 20px;
		    align-items: center;
		    padding: 15px;
		    background: white;
		    border-radius: 10px;
		    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
		    transition: transform 0.2s ease;
		}

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

		.subject-row:first-child {
		    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
		    color: white;
		    font-weight: bold;
		    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
		}

		.subject-row:first-child:hover {
		    transform: none;
		}

		.subject-row input {
		    padding: 15px;
		    border: 2px solid #ddd;
		    border-radius: 10px;
		    font-size: 1.1em;
		    transition: all 0.3s ease;
		    width: 100%;
		    box-sizing: border-box;
		}

		.subject-row input:focus {
		    outline: none;
		    border-color: #4CAF50;
		    box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
		}

		.subject-row label {
		    font-weight: bold;
		    color: inherit;
		    padding: 15px;
		    text-align: center;
		}

		.calculate-btn {
		    background: linear-gradient(135deg, #FF6B6B 0%, #ee5a52 100%);
		    color: white;
		    border: none;
		    padding: 20px 50px;
		    font-size: 1.3em;
		    border-radius: 8px;
		    cursor: pointer;
		    transition: all 0.3s ease;
		    font-weight: bold;
		    margin: 30px auto;
		    display: block;
		    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
		    position: relative;
		    overflow: hidden;
		}

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

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

		.calculate-btn:hover {
		    transform: translateY(-3px);
		    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
		}

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

		.results {
		    margin-top: 50px;
		    padding: 60px;
		    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		    color: white;
		    border-radius: 20px;
		    display: none;
		    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
		    position: relative;
		    overflow: hidden;
		}

		.results::before {
		    content: '';
		    position: absolute;
		    top: -50%;
		    right: -50%;
		    width: 200%;
		    height: 200%;
		    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
		    animation: pulse 6s ease-in-out infinite reverse;
		}

		.results h3 {
		    font-size: 2.2em;
		    margin-bottom: 30px;
		    text-align: center;
		    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
		    position: relative;
		    z-index: 1;
		}

		.result-item {
		    margin-bottom: 30px;
		    font-size: 1.2em;
		    padding: 25px;
		    background: rgba(255,255,255,0.15);
		    border-radius: 20px;
		    backdrop-filter: blur(10px);
		    border: 1px solid rgba(255,255,255,0.2);
		    position: relative;
		    z-index: 1;
		}

		.semester-result {
		    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
		    border-left: 5px solid #4CAF50;
		}

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

		.semester-header h4 {
		    margin: 0;
		    font-size: 1.3em;
		    color: white;
		}

		.semester-stats, .final-stats {
		    display: flex;
		    gap: 15px;
		    flex-wrap: wrap;
		}

		.stat-item {
		    display: flex;
		    align-items: center;
		    gap: 5px;
		    background: rgba(255,255,255,0.1);
		    padding: 8px 12px;
		    border-radius: 10px;
		    font-size: 0.9em;
		}

		.stat-icon {
		    font-size: 1.1em;
		}

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

		.stat-value {
		    font-weight: bold;
		    color: #FFB750;
		}

		.mgp-display {
		    display: grid;
		    grid-template-columns: 1fr 1fr;
		    gap: 20px;
		    margin-top: 15px;
		}

		.mgp-score, .note-score {
		    text-align: center;
		    background: rgba(255,255,255,0.1);
		    padding: 15px;
		    border-radius: 15px;
		    border: 1px solid rgba(255,255,255,0.2);
		}

		.mgp-label, .note-label {
		    display: block;
		    font-size: 0.9em;
		    margin-bottom: 5px;
		    opacity: 0.8;
		}

		.mgp-value, .note-value {
		    display: block;
		    font-size: 1.8em;
		    font-weight: bold;
		    color: #EEE750;
		    margin-bottom: 2px;
		}

		.mgp-scale, .note-scale {
		    font-size: 0.9em;
		    opacity: 0.7;
		}

		.final-result {
		    background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,193,7,0.2));
		    border: 2px solid #FFD700;
		    box-shadow: 0 0 20px rgba(255,215,0,0.3);
		    animation: finalGlow 2s ease-in-out infinite alternate;
		}

		@keyframes finalGlow {
		    0% { box-shadow: 0 0 20px rgba(255,215,0,0.3); }
		    100% { box-shadow: 0 0 30px rgba(255,215,0,0.5); }
		}

		.final-header {
		    text-align: center;
		    margin-bottom: 25px;
		}

		.final-header h4 {
		    margin: 0 0 15px 0;
		    font-size: 1.5em;
		    color: #FFD700;
		    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
		}

		.final-mgp-display {
		    display: grid;
		    grid-template-columns: 1fr 1fr;
		    gap: 25px;
		    margin-bottom: 20px;
		}

		.final-mgp-score, .final-note-score {
		    text-align: center;
		    background: rgba(255,255,255,0.2);
		    padding: 20px;
		    border-radius: 15px;
		    border: 1px solid rgba(255,215,0,0.3);
		}

		.final-mgp-label, .final-note-label {
		    display: block;
		    font-size: 1em;
		    margin-bottom: 8px;
		    font-weight: bold;
		    color: #FFD700;
		}

		.final-mgp-value, .final-note-value {
		    display: block;
		    font-size: 2.2em;
		    font-weight: bold;
		    color: #FFD700;
		    margin-bottom: 5px;
		    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
		}

		.final-mgp-scale, .final-note-scale {
		    font-size: 1em;
		    opacity: 0.8;
		    color: white;
		}

		.performance-indicator {
		    margin-top: 20px;
		    text-align: center;
		}

		.performance-bar {
		    width: 100%;
		    height: 12px;
		    background: rgba(255,255,255,0.2);
		    border-radius: 6px;
		    overflow: hidden;
		    margin-bottom: 10px;
		}

		.performance-fill {
		    height: 100%;
		    background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7, #DDA0DD, #98D8C8);
		    border-radius: 6px;
		    transition: width 1s ease-in-out;
		}

		.performance-text {
		    font-size: 1.1em;
		    font-weight: bold;
		    padding: 10px;
		    background: rgba(255,255,255,0.1);
		    border-radius: 10px;
		    color: white;
		}

		/* Media queries pour la responsivité */
		@media (max-width: 768px) {
		    .semester-section {
			padding: 25px 20px;
			margin-bottom: 30px;
		    }
		    
		    .semester-title {
			font-size: 1.5em;
			margin-bottom: 20px;
		    }
		    
		    .subjects-count input {
			width: 200px;
		    }
		    
		    .subject-row {
			grid-template-columns: 1fr;
			gap: 15px;
			padding: 15px;
		    }
		    
		    .subject-row input {
			padding: 12px;
			font-size: 1em;
		    }
		    
		    .subject-row label {
			padding: 10px;
			font-size: 1em;
		    }
		    
		    .calculate-btn {
			padding: 15px 35px;
			font-size: 1.1em;
		    }
		    
		    .results {
			padding: 30px 20px;
			margin-top: 30px;
		    }
		    
		    .results h3 {
			font-size: 1.8em;
			margin-bottom: 20px;
		    }
		    
		    .result-item {
			padding: 20px;
			font-size: 1.1em;
		    }
		    
		    .semester-header {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
		    }
		    
		    .semester-header h4 {
			font-size: 1.2em;
		    }
		    
		    .semester-stats, .final-stats {
			width: 100%;
			justify-content: center;
		    }
		    
		    .mgp-display, .final-mgp-display {
			grid-template-columns: 1fr;
			gap: 15px;
		    }
		    
		    .mgp-score, .note-score, .final-mgp-score, .final-note-score {
			padding: 15px;
		    }
		    
		    .mgp-value, .note-value {
			font-size: 1.5em;
		    }
		    
		    .final-mgp-value, .final-note-value {
			font-size: 1.8em;
		    }
		    
		    .final-header h4 {
			font-size: 1.3em;
		    }
		}

		@media (max-width: 480px) {
		    .semester-section {
			padding: 20px 15px;
			margin-bottom: 25px;
			border-radius: 15px;
		    }
		    
		    .semester-title {
			font-size: 1.3em;
			margin-bottom: 15px;
		    }
		    
		    .subjects-count input {
			width: 180px;
			padding: 12px;
			font-size: 1em;
		    }
		    
		    .subject-row {
			gap: 10px;
			padding: 12px;
		    }
		    
		    .subject-row input {
			padding: 10px;
			font-size: 0.9em;
		    }
		    
		    .subject-row label {
			padding: 8px;
			font-size: 0.9em;
		    }
		    
		    .calculate-btn {
			padding: 12px 25px;
			font-size: 1em;
			margin: 25px auto;
		    }
		    
		    .results {
			padding: 25px 15px;
			margin-top: 25px;
			border-radius: 15px;
		    }
		    
		    .results h3 {
			font-size: 1.5em;
			margin-bottom: 15px;
		    }
		    
		    .result-item {
			padding: 15px;
			font-size: 1em;
			margin-bottom: 20px;
		    }
		    
		    .semester-header h4 {
			font-size: 1.1em;
		    }
		    
		    .stat-item {
			padding: 6px 10px;
			font-size: 0.8em;
		    }
		    
		    .mgp-score, .note-score, .final-mgp-score, .final-note-score {
			padding: 12px;
		    }
		    
		    .mgp-value, .note-value {
			font-size: 1.3em;
		    }
		    
		    .final-mgp-value, .final-note-value {
			font-size: 1.5em;
		    }
		    
		    .final-header h4 {
			font-size: 1.2em;
		    }
		    
		    .performance-text {
			font-size: 1em;
			padding: 8px;
		    }
		}
		.correspondence-table {
		    margin: 20px;
		    margin-top: 15px;
		    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
		    border-radius: 10px;
		    padding: 30px;
		    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
		    border: 2px solid #e9ecef;
		    /* Ajout pour la responsivité */
		    overflow-x: auto;
		}

		.correspondence-table h3 {
		    color: #333;
		    margin-bottom: 25px;
		    text-align: center;
		    font-size: 1.8em;
		}

		.correspondence-table table {
		    width: 100%;
		    border-collapse: collapse;
		    border-radius: 10px;
		    overflow: hidden;
		    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
		    /* Ajout pour éviter le rétrécissement */
		    min-width: 600px;
		}

		.correspondence-table th,
		.correspondence-table td {
		    padding: 15px;
		    text-align: center;
		    border-bottom: 1px solid #e9ecef;
		    /* Ajout pour la responsivité */
		    white-space: nowrap;
		}

		.correspondence-table th {
		    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
		    font-weight: bold;
		    color: white;
		    font-size: 1.1em;
		}

		.correspondence-table tr:nth-child(even) {
		    background: #f8f9fa;
		}

		.correspondence-table tr:hover {
		    background: #e9ecef;
		    transform: scale(1.02);
		    transition: all 0.2s ease;
		}

		/* Media queries pour les écrans plus petits */
		@media (max-width: 768px) {
		    .correspondence-table {
			padding: 20px;
			margin-top: 20px;
		    }
		    
		    .correspondence-table h3 {
			font-size: 1.5em;
			margin-bottom: 20px;
		    }
		    
		    .correspondence-table th,
		    .correspondence-table td {
			padding: 10px 8px;
			font-size: 0.9em;
		    }
		    
		    .correspondence-table th {
			font-size: 1em;
		    }
		}

		@media (max-width: 480px) {
		    .correspondence-table {
			padding: 15px;
			border-radius: 15px;
		    }
		    
		    .correspondence-table h3 {
			font-size: 1.3em;
		    }
		    
		    .correspondence-table th,
		    .correspondence-table td {
			padding: 8px 5px;
			font-size: 0.8em;
		    }
		    
		    .correspondence-table table {
			min-width: 500px;
		    }
		}

		/* Alternative: Table responsive avec restructuration sur mobile */
		@media (max-width: 600px) {
		    .correspondence-table-mobile {
			display: block;
		    }
		    
		    .correspondence-table-mobile table,
		    .correspondence-table-mobile thead,
		    .correspondence-table-mobile tbody,
		    .correspondence-table-mobile th,
		    .correspondence-table-mobile td,
		    .correspondence-table-mobile tr {
			display: block;
		    }
		    
		    .correspondence-table-mobile thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		    }
		    
		    .correspondence-table-mobile tr {
			border: 1px solid #ccc;
			margin-bottom: 10px;
			border-radius: 10px;
			padding: 10px;
			background: white;
		    }
		    
		    .correspondence-table-mobile td {
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50% !important;
			text-align: left;
		    }
		    
		    .correspondence-table-mobile td:before {
			content: attr(data-label) ": ";
			position: absolute;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
			font-weight: bold;
			color: #333;
		    }
		}

		.footer {
		    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
		    color: white;
		    position: relative;
		    overflow: hidden;
		}

		.footer::before {
		    content: '';
		    position: absolute;
		    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 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="80" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grain)"/></svg>');
		    opacity: 0.3;
		}

		.footer-content {
		    position: relative;
		    z-index: 1;
		    max-width: 1200px;
		    margin: 0 auto;
		    padding: 60px 20px 20px;
		}

		.footer-wave {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100px;
		    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		    clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
		}

		.footer-info {
		    display: grid;
		    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		    gap: 40px;
		    margin-bottom: 40px;
		}

		.footer-section {
		    background: rgba(255, 255, 255, 0.1);
		    padding: 30px;
		    border-radius: 15px;
		    margin-bottom: 15px;
		    backdrop-filter: blur(10px);
		    border: 1px solid rgba(255, 255, 255, 0.2);
		    transition: transform 0.3s ease, box-shadow 0.3s ease;
		}

		.footer-section:hover {
		    transform: translateY(-5px);
		    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
		}

		.footer-section h4 {
		    font-size: 1.4em;
		    margin-bottom: 15px;
		    color: #fff;
		    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
		    display: flex;
		    align-items: center;
		    gap: 10px;
		}

		.footer-section p {
		    line-height: 1.6;
		    color: rgba(255, 255, 255, 0.9);
		    font-size: 1.1em;
		}

		.social-links {
		    display: flex;
		    gap: 15px;
		    margin-top: 20px;
		    flex-wrap: wrap;
		}

		.social-links a {
		    color: white;
		    text-decoration: none;
		    padding: 10px 20px;
		    background: rgba(255, 255, 255, 0.2);
		    border-radius: 25px;
		    border: 1px solid rgba(255, 255, 255, 0.3);
		    transition: all 0.3s ease;
		    font-size: 0.9em;
		    backdrop-filter: blur(5px);
		}

		.social-links a:hover {
		    background: rgba(255, 255, 255, 0.3);
		    transform: translateY(-2px);
		    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		}

		.footer-bottom {
		    text-align: center;
		    padding: 30px 20px;
		    /* CORRECTION : Retiré la largeur fixe et ajouté une largeur responsive */
		    width: 100%;
		    max-width: 1150px;
		    margin: 20px auto 0;
		    border-top: 1px solid rgba(255, 255, 255, 0.2);
		    background: rgba(0, 0, 0, 0.2);
		    border-radius: 15px;
		    backdrop-filter: blur(10px);
		    /* Ajout pour éviter le débordement */
		    box-sizing: border-box;
		}

		.footer-bottom p {
		    margin: 8px 0;
		    color: rgba(255, 255, 255, 0.9);
		    font-size: 1.1em;
		}

		.creator-badge {
		    display: inline-flex;
		    align-items: center;
		    gap: 10px;
		    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
		    padding: 10px 20px;
		    border-radius: 25px;
		    color: white;
		    font-weight: bold;
		    margin-top: 15px;
		    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
		    animation: pulse 2s infinite;
		}

		@keyframes pulse {
		    0% { transform: scale(1); }
		    50% { transform: scale(1.05); }
		    100% { transform: scale(1); }
		}

		.creator-badge::before {
		    content: "👨‍💻";
		    font-size: 1.2em;
		}

		.floating-elements {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    pointer-events: none;
		    overflow: hidden;
		}

		.floating-elements::before,
		.floating-elements::after {
		    content: '';
		    position: absolute;
		    border-radius: 50%;
		    background: rgba(255, 255, 255, 0.1);
		    animation: float 6s ease-in-out infinite;
		}

		.floating-elements::before {
		    width: 60px;
		    height: 60px;
		    top: 20%;
		    left: 10%;
		    animation-delay: 0s;
		}

		.floating-elements::after {
		    width: 80px;
		    height: 80px;
		    top: 60%;
		    right: 15%;
		    animation-delay: 3s;
		}

		@keyframes float {
		    0%, 100% { transform: translateY(0px) rotate(0deg); }
		    50% { transform: translateY(-20px) rotate(180deg); }
		}

		/* Media queries améliorées */
		@media (max-width: 1200px) {
		    .footer-bottom {
			max-width: 95%;
			margin: 20px auto 0;
		    }
		}

		@media (max-width: 768px) {
		    .footer-content {
			padding: 40px 15px 15px;
		    }
		    
		    .footer-info {
			grid-template-columns: 1fr;
			gap: 25px;
			/* Réduire la largeur minimale sur mobile */
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		    }
		    
		    .footer-section {
			padding: 20px;
		    }
		    
		    .footer-section h4 {
			font-size: 1.2em;
		    }
		    
		    .social-links {
			justify-content: center;
		    }
		    
		    .footer-bottom {
			padding: 20px 15px;
			margin: 20px 10px 0;
			border-radius: 10px;
		    }
		    
		    .footer-bottom p {
			font-size: 1em;
		    }
		}

		@media (max-width: 480px) {
		    .footer-content {
			padding: 30px 10px 10px;
		    }
		    
		    .footer-info {
			grid-template-columns: 1fr;
			gap: 20px;
		    }
		    
		    .footer-section {
			padding: 15px;
			margin: 0 5px;
		    }
		    
		    .footer-section h4 {
			font-size: 1.1em;
		    }
		    
		    .footer-section p {
			font-size: 1em;
		    }
		    
		    .social-links a {
			padding: 8px 15px;
			font-size: 0.8em;
		    }
		    
		    .footer-bottom {
			padding: 15px 10px;
			margin: 15px 5px 0;
			border-radius: 8px;
		    }
		    
		    .creator-badge {
			padding: 8px 15px;
			font-size: 0.9em;
		    }
		}
		
		/* Styles pour l'export PDF */
		.export-section {
		    background: rgba(255, 255, 255, 0.95);
		    border-radius: 15px;
		    padding: 25px;
		    margin: 20px 0;
		    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		    text-align: center;
		}

		.export-section h3 {
		    color: #667eea;
		    margin-bottom: 15px;
		    font-size: 1.3em;
		}

		.export-buttons {
		    display: flex;
		    gap: 15px;
		    justify-content: center;
		    flex-wrap: wrap;
		}

		.export-btn {
		    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		    color: white;
		    border: none;
		    padding: 12px 25px;
		    border-radius: 25px;
		    cursor: pointer;
		    font-size: 16px;
		    font-weight: 600;
		    transition: all 0.3s ease;
		    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
		    display: flex;
		    align-items: center;
		    gap: 8px;
		}

		.export-btn:hover {
		    transform: translateY(-2px);
		    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
		}

		.export-btn:active {
		    transform: translateY(0);
		}

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

		.export-btn i {
		    font-size: 18px;
		}

		/* Animation pour les boutons d'export */
		@keyframes exportSuccess {
		    0% { transform: scale(1); }
		    50% { transform: scale(1.1); }
		    100% { transform: scale(1); }
		}

		.export-btn.success {
		    animation: exportSuccess 0.5s ease;
		    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
		}
		
		
		.translation-controls {
		    position: fixed;
		    top: 10px;
		    right: 10px;
		    z-index: 1000;
		    display: flex;
		    gap: 5px;
		}
		
		.lang-btn {
		    padding: 5px 10px;
		    border: none;
		    border-radius: 4px;
		    cursor: pointer;
		    display: flex;
		    align-items: center;
		    gap: 5px;
		    font-weight: 600;
		    font-size: 0.8rem;
		    transition: all 0.3s ease;
		    display: flex;
		}
		.lang-btn.active {
		    background: #007bff;
		    color: white;
		}