/* == Variables de Thème (Sombre Uniquement) == */
:root {
    --primary-color: #007aff;
    --primary-color-hover: #0056b3;
    --bg-color: #1a1d20;         
    --bg-alt-color: #25282c;     
    --card-bg: #25282c;          
    --text-color: #f0f0f0;       
    --text-secondary-color: #a0a0a0; 
    --header-bg: rgba(26, 29, 32, 0.85); 
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* == ANIMATION DE CHARGEMENT == */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* == Réglages Globaux == */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

/* ... (Le reste du CSS est inchangé) ... */
.container { max-width: 1000px; margin: 0 auto; padding: 0 2rem; }
section { padding: 6rem 0; }
section.light-bg { background-color: var(--bg-alt-color); transition: background-color 0.3s ease; }
h1, h2, h3, h4 { margin-bottom: 1rem; line-height: 1.3; }
h1 { font-size: 3rem; }
h2 { font-size: 2.2rem; border-bottom: 2px solid var(--primary-color); display: inline-block; padding-bottom: 5px; }
h3 { font-size: 1.5rem; color: var(--primary-color); }
h4 { font-size: 1.1rem; font-style: italic; color: #a0a0a0; margin-bottom: 1.5rem; }
p { margin-bottom: 1rem; color: var(--text-secondary-color); max-width: 60ch; }
a { color: var(--primary-color); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: inside; padding-left: 5px; }
li { margin-bottom: 0.5rem; color: var(--text-secondary-color); }

/* == Superposition Mot de Passe (Utilisée par index.php) == */
#password-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 1000; }
#password-box { background: var(--card-bg); padding: 2rem; border-radius: 8px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
#password-box h2 { border: none; }
#password-box input { display: block; width: 100%; padding: 0.75rem; margin: 1rem 0; border-radius: 5px; border: 1px solid #ccc; }
#password-box button { background: var(--primary-color); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; }
#password-box button:hover { background: var(--primary-color-hover); }
#password-error { color: #e74c3c; margin-top: 1rem; display: none; }

/* == Contenu Principal (Caché) == */
#main-content { /* Le display est géré par l'attribut style */ }

/* == Header & Navigation == */
header { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 1rem 5%; background: var(--header-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 100; box-shadow: var(--shadow); transition: background-color 0.3s ease; }
header .logo a { font-size: 1.5rem; font-weight: bold; text-decoration: none; color: var(--text-color); }
.nav-links ul { display: flex; list-style: none; }
.nav-links li { margin: 0 1rem; }
.nav-links a { text-decoration: none; color: var(--text-color); font-weight: 500; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--primary-color); text-decoration: none; }
.header-controls { display: flex; align-items: center; }
.menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; color: var(--text-color); }

/* == Barre de Progression == */
.progress-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: transparent; z-index: 101; }
.progress-bar { height: 100%; width: 0%; background-color: var(--primary-color); border-radius: 0 2px 2px 0; }

/* == Section Accueil (Hero) == */
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2rem; padding: 6rem 5% 4rem 5%; }
.hero-content {
    flex: 1; min-width: 300px; max-width: 600px;
    /* Animation au chargement */
    animation: fadeInUp 0.8s ease-out;
}
.hero-content h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 1rem; }
.hero-content h1 span { color: var(--primary-color); display: block; font-weight: 500; font-size: 2.5rem; }
.hero-content p { font-size: 1.1rem; margin-bottom: 2rem; }
.contact-details { margin: 2rem 0; display: flex; flex-direction: column; gap: 1rem; }
.contact-item { display: flex; align-items: center; gap: 1rem; font-size: 1rem; }
.contact-item i { color: var(--primary-color); width: 20px; text-align: center; }
.cta-button { display: inline-block; background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); padding: 0.75rem 1.5rem; border-radius: 5px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; }
.cta-button:hover { background: var(--primary-color); color: var(--bg-color); transform: translateY(-3px); text-decoration: none; }
.hero-image-container {
    flex: 0.8; min-width: 300px; max-width: 400px; text-align: center;
    /* Animation au chargement avec un délai */
    animation: fadeInUp 0.8s ease-out 0.2s;
    animation-fill-mode: backwards; /* S'assure qu'il est invisible avant l'anim */
}
.hero-image-container img { width: 100%; max-width: 100%; border-radius: 12px; box-shadow: var(--shadow); margin-bottom: 2rem; }
.stats-container { display: flex; justify-content: space-around; gap: 1rem; }
.stat-box { background: var(--card-bg); padding: 1rem; border-radius: 8px; width: 150px; box-shadow: var(--shadow); }
.stat-box h3 { font-size: 2.5rem; margin-bottom: 0.25rem; text-align: center; }
.stat-box p { font-size: 0.9rem; text-align: center; margin-bottom: 0; color: var(--text-secondary-color); }

/* == Section Alternance & Projets == */
#alternance { /* Fond par défaut */ }
#projets { background-color: var(--bg-alt-color); }
.experience-card { background: var(--bg-color); padding: 2rem; border-radius: 8px; margin-bottom: 2rem; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; }
.experience-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
.experience-card.alt { border-left: 5px solid var(--primary-color); background: var(--card-bg); }
.experience-card ul { margin-top: 0; padding-left: 10px; }
.experience-card p.card-description { margin-top: -0.5rem; margin-bottom: 1.5rem; font-style: italic; }

/* == Styles pour les Logos des Cartes == */
.card-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.card-logo { flex-shrink: 0; width: 80px; height: 80px; background-color: #ffffff; border-radius: 10px; display: flex; justify-content: center; align-items: center; padding: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset; overflow: hidden; }
.card-logo img { width: 100%; height: 100%; object-fit: contain; display: block; max-width: 100%; }
.card-title-group { flex-grow: 1; }
.card-title-group h3, .card-title-group h4 { margin-bottom: 0.25rem; }

/* == Section Compétences == */
#competences { /* Fond par défaut (var(--bg-color)) */ }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.skill-item { background: var(--card-bg); padding: 1.5rem; border-radius: 8px; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow); transition: transform 0.3s ease; }
.skill-item:hover { transform: translateY(-5px); }
.skill-item i { font-size: 2rem; color: var(--primary-color); width: 30px; text-align: center; }
.skill-item span { font-size: 1.1rem; font-weight: 500; color: var(--text-color); }

/* == Section Langues == */
#langues { /* Fond alternatif (var(--bg-alt-color)) */ }
.language-container { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.language-item { background: var(--bg-color); padding: 1.5rem; border-radius: 8px; box-shadow: var(--shadow); }
.language-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.language-header h4 { font-size: 1.2rem; color: var(--text-color); margin-bottom: 0; font-style: normal; }
.language-header span { font-size: 0.9rem; color: var(--text-secondary-color); font-style: italic; }
.progress-bar-container { width: 100%; height: 10px; background: var(--bg-alt-color); border-radius: 5px; overflow: hidden; }
.progress-bar-fill { height: 100%; background-color: var(--primary-color); border-radius: 5px; transition: width 0.5s ease-in-out; }


/* == NOUVEAUX STYLES POUR L'ANIMATION AU DÉFILEMENT == */
.fade-in-section {
    /* Cache l'élément par défaut */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
    /* Le JS ajoute cette classe pour le rendre visible */
    opacity: 1;
    transform: translateY(0);
}


/* == Footer == */
.site-footer { background-color: var(--bg-alt-color); color: var(--text-secondary-color); padding: 3rem 5% 1rem 5%; margin-top: 4rem; border-top: 1px solid var(--card-bg); }
.footer-container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.footer-about, .footer-links, .footer-social { flex: 1; min-width: 200px; }
.footer-about h3 { color: var(--text-color); margin-bottom: 1rem; }
.footer-about p { font-size: 0.9rem; max-width: 40ch; }
.footer-links h3, .footer-social h3 { color: var(--text-color); margin-bottom: 1rem; }
.footer-links ul { list-style: none; padding-left: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: var(--text-secondary-color); text-decoration: none; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--primary-color); text-decoration: none; }
.footer-social a { color: var(--text-secondary-color); font-size: 1.5rem; margin-right: 1rem; transition: color 0.3s ease; }
.footer-social a:hover { color: var(--primary-color); text-decoration: none; }
.footer-bottom { text-align: center; border-top: 1px solid var(--card-bg); padding-top: 1rem; font-size: 0.9rem; }


/* == Responsive (Mobile) == */
@media (max-width: 768px) {
    .hero { flex-direction: column; padding-top: 8rem; text-align: center; }
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content h1 span { font-size: 2rem; }
    .contact-item { justify-content: center; }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    
    .menu-toggle { display: block; z-index: 1001; }
    .nav-links { position: fixed; top: 0; right: -100%; width: 70%; height: 100vh; background: var(--card-bg); flex-direction: column; justify-content: center; align-items: center; transition: right 0.3s ease-in-out; box-shadow: -5px 0 15px rgba(0,0,0,0.1); }
    .nav-links.active { right: 0; }
    .nav-links ul { flex-direction: column; text-align: center; }
    .nav-links li { margin: 1.5rem 0; }
    .nav-links a { font-size: 1.3rem; }

    .footer-container { flex-direction: column; text-align: center; }
    .footer-social { margin-top: 1rem; }

    .card-header { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
    .card-logo { width: 60px; height: 60px; }

    .skill-item { flex-direction: column; text-align: center; padding: 1rem; gap: 0.5rem; }
    .skill-item i { margin-bottom: 0.5rem; }

    .language-header { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .language-header h4 { font-size: 1.1rem; }
}