/* 1. CONFIGURATION GLOBALE */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police moderne */
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* Fond Blanc */
    color: #3d3939;
}

/* 2. LE MENU (HEADER)  */
header {
    background-color: #2c3e50; /* Bleu foncé */
    padding: 1rem 0;
}

nav ul {
    list-style: none; /* Enlève les puces */
    padding: 0;
    margin: 0;
    display: flex; /* Aligne le menu horizontalement */
    justify-content: center; /* Centre le menu */
    gap: 30px; /* Espace entre les liens */
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    
}

/*  3. MISE EN PAGE (WRAPPER)  */
.wrapper {
    display: flex ;       /* Met mon Main et Aside côte à côte */
    max-width: 1100px;   /* Largeur max de la page */
    margin: 40px auto;   /* Centré avec de l'espace en haut et en bas */
    gap: 30px;           /* Espace entre les deux colonnes */
    
}


/*  4. COLONNE PRINCIPALE (MAIN)  */
main {
    flex: 3; /* Prend 75% de la largeur */
    background-color: white;   
}

h1 {
    color: #2c3e50;
    border-bottom: solid #3498db;
    display: inline-block;
     
}

h2 {
    color: #2c3e50;
    border-bottom: solid #eee;
    padding-bottom: 10px;
}

/* Style des Articles (CV Items) */
.cv-item {
    margin-bottom: 25px;
    padding-left: 20px;
    border-left: 4px solid #3498db; /* Barre bleue verticale */
}

.cv-item h3 {  
    color: #222;
}

.date {
    font-style: italic;
    color: #777;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 10px;
}

/* 5. COLONNE LATÉRALE (ASIDE) */
aside {
    flex: 1; /* Prend 25% de la largeur */
    background-color: #2c3e50; /* Fond foncé pour le profil */
    padding: 30px;
    border-radius: 8px;
    height: fit-content;
    text-align: center;
}

aside h3 {
    color: #3498db;
    border-bottom: solid rgba(255,255,255,0.2);
    padding-bottom: 10px;
}

aside p, aside a {
    color: #bdc3c7;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.6;
}


/* Image de profil */
aside img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%; /* Image ronde */
    border: 4px solid white;
    margin-bottom: 20px;
}

.contact-info {
    text-align: left; /* Remet le texte aligné à gauche pour le contact */
    margin-top: 20px;
}

/* 6. PIED DE PAGE (FOOTER) */
footer {
    text-align: center;
    padding: 20px;
    color: #777;
    font-size: 0.9rem;
    margin-top: 20px;
}


/* Style pour la page Culture */
.culture-img {
    width: 100%;       /* Prend toute la largeur disponible */
    max-width: 400px;  /* Mais ne dépasse pas 400px */
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: block;
    margin: 10px auto; /* Centré */
}

.image-container {
    text-align: center; /* Centre la légende sous l'image */
    margin-bottom: 20px;
}




/* --- Style Spécial YouTube --- */
.youtube-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 pour la vidéo */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 10px;
    border-radius: 8px;
}

.youtube-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}