/* Styles de base pour un rendu propre et moderne */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    line-height: 1.6; 
    margin: 0; 
    padding: 0; 
    color: #333; 
    background-color: #e3e1d9; 
}

/* --- SECTION HEADER --- */
header { 
    background: #2c3e50; 
    color: #fff; 
    padding: 3rem 0; 
}

.header-container {
    display: flex;
    align-items: center;  /* Centre l'image et le texte verticalement */
    width: 85%; 
    max-width: 900px; 
    margin: auto;
    gap: 40px;            /* Crée un espace fixe entre l'image et le texte */
}

.header-logo {
    width: 250px;         /* Votre grande taille d'image */
    height: auto;
    flex-shrink: 0;       /* TRÈS IMPORTANT : Empêche l'image de rétrécir si l'écran est petit */
}

.header-text {
    flex-grow: 1;         /* Demande au bloc de texte de prendre tout l'espace restant */
    text-align: center;   /* Centre votre texte dans cet espace restant */
}

.header-text h1 { 
    margin: 0; 
    font-size: 2.8rem; 
}

.header-text p { 
    margin: 0.5rem 0 0; 
    font-size: 1.3rem; 
    color: #1abc9c; 
}

/* --- CONTENU PRINCIPAL --- */
.container { 
    width: 85%; 
    max-width: 900px; 
    margin: auto; 
    overflow: hidden; 
    padding: 2rem 0; 
}

section { 
    background: #fff; 
    margin-bottom: 2rem; 
    padding: 2.5rem; 
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
}

h2 { 
    color: #2c3e50; 
    border-bottom: 2px solid #1abc9c; 
    padding-bottom: 0.5rem; 
    margin-top: 0;
}

h3 {
    color: #34495e;
    margin-bottom: 0.2rem;
}

/* --- COMPÉTENCES --- */
.skills { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    margin-top: 1rem;
}

.skill-tag { 
    background: #ecf0f1; 
    color: #2c3e50;
    padding: 8px 16px; 
    border-radius: 20px; 
    font-weight: 600; 
    font-size: 0.95rem; 
}

/* --- FOOTER & LIENS --- */
footer { 
    background: #2c3e50; 
    color: #bdc3c7; 
    text-align: center; 
    padding: 1.5rem 0; 
    margin-top: 2rem; 
}

a {
    color: #1abc9c;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

/* --- RESPONSIVE DESIGN (Adaptation pour tablettes et mobiles) --- */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column; /* Empile l'image au-dessus du texte */
        gap: 20px;              /* Réduit un peu l'espace pour mobile */
    }

    .header-logo {
        width: 180px;           /* Réduit légèrement la taille du logo sur mobile pour aérer l'écran */
    }

    .header-text h1 {
        font-size: 2.2rem;      /* Diminue un peu la taille du titre pour éviter qu'il ne déborde */
    }
    
    .header-text p {
        font-size: 1.1rem;
    }
}