:root {
    --main-color: #12273a;
    --bg-color: #fcfcfc; /* Fond quasi blanc pour plus de clarté */
    --padding: 25px;
    --transition: all 0.3s ease;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.4;
    background-color: var(--bg-color);
    color: var(--main-color);
}

main { display: flex; flex-direction: column; }

@media (min-width: 768px) {
    main { 
        flex-direction: row; 
        min-height: 100vh; /* S'assure que le contenu prend au moins tout l'écran */
    }
    aside { 
        position: sticky; 
        top: 0; 
        height: 100vh; /* Garde la colonne fixe au scroll */
        max-width: 320px; 
        border-right: 1px solid #ddd; 
    }
}

/* --- COLONNE GAUCHE (ASIDE) --- */
aside {
    background-color: var(--main-color);
    color: white;
    padding: var(--padding);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les blocs dans la colonne */
}

aside img {
    width: 130px;
    height: 130px;
    border-radius: 5px;
    object-fit: cover;
    margin-bottom: 15px;
    border: 2px solid white;
}

aside .intro {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

aside h1 {
    font-size: 1.5em;
    width: 100%;
    text-align: center;
}

aside h2 {
    font-size: 1.05em;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    margin: 15px 0 10px 0;
    width: 100%;
    padding-bottom: 5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center; /* Centre l'icône et le titre */
}

/* --- LISTES ASIDE --- */
aside ul {
    width: 100%;
    list-style: none;
}

aside ul li { 
    margin-bottom: 8px; 
    font-size: 0.85em; 
    display: flex; 
    align-items: center; 
    justify-content: center; /* Centre les éléments de contact */
}

/* --- CORRECTION FORMATIONS --- */
.formations-aside ul li {
    display: block; 
    text-align: center; 
    margin-bottom: 15px; /* Garde l'espace entre deux diplômes différents */
    line-height: 1.1;    /* Réduit l'espace créé par le <br> */
}

.formations-aside ul li strong {
    display: block; 
    margin-bottom: 0px;  /* Supprime tout décalage sous l'année */
    font-size: 1.05em;   /* Taille conforme à votre style actuel */
}

/* --- COLONNE DROITE (CONTENT) --- */
content { flex: 2; padding: var(--padding); background-color: white; }

.intro h1 { font-size: 2em; margin-bottom: 5px; }
.intro h2 em { display: block; font-size: 0.7em; color: #666; font-style: normal; }
.intro p { font-size: 1em; margin-bottom: 25px; line-height: 1.5; }

/* --- CARTES EXPERIENCES --- */
.card {
    padding: 15px;
    margin-bottom: 15px;
    border-left: 3px solid #eee;
    transition: var(--transition);
}

.card:hover { border-left: 3px solid var(--main-color); background: #f9f9f9; }

.company {
    display: flex;
    justify-content: space-between; /* Pousse la date à l'opposé du nom */
    align-items: flex-start;        /* Aligne le haut des textes */
    width: 100%;
    margin-bottom: 5px;
}

.company strong {
    flex: 1; /* Permet au nom de prendre tout l'espace restant */
    padding-right: 15px; /* Espace de sécurité avant la date */
}

.company strong small {
    display: block; /* Force le secteur d'activité à la ligne SOUS le nom */
    font-weight: normal;
    font-size: 0.85em;
    color: #666;
    font-style: italic;
    margin-top: 2px;
}

.company span {
    white-space: nowrap; /* Empêche la date de passer à la ligne */
    text-align: right;
    font-size: 0.9em;
    color: var(--main-color);
    font-weight: 600;
}

.poste { font-style: italic; font-weight: 600; margin-bottom: 10px; font-size: 0.9em; }
.missions ul { list-style: square; margin-left: 18px; }
.missions ul li { margin-bottom: 5px; font-size: 0.9em; }

/* --- BADGES ET ICONES --- */
.badge-container { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.badge {
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.65em;
    font-weight: bold;
    border: 1px solid white;
}

.material-symbols-outlined { font-size: 18px; margin-right: 8px; }