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

/* Base */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333
}

/* Layout */
.layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
aside {
    width: 260px;
    background-color: #f4f4f4;
    padding: 1em;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*
aside img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 1em;
}
*/

aside img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1em;
}


aside h2 {
    font-size: 1.4em;
    margin-bottom: 0.5em;
    text-align: center;
}

aside p {
    font-size: 0.95em;
    margin-bottom: 1em;
    text-align: center;
}

aside ul {
    list-style: none;
    width: 100%;
    padding: 0;
    position: relative;
    top: 30px;
}

aside i {
    margin-right: 0.5em;
    color: #007acc;
}

aside ul li {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

aside ul li img {
    width: 20px;
    height: 20px;
    position: relative;
    top: 8px;
}


a {
    color: black;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
    outline: none;
}

/* Responsive */
@media (max-width: 25900px) {
    /*
    La partie "Moi" se situe dans une iframe collé sur la page.
    Sur un affichage horizontal assez grand, l'iframe va prendre par défaut 260px en horizontal.

    Si la page détecte qu'elle est sur mobile, alors on va forcer la taille horizontale de l'iframe à moins de 260.
    Le contenu de l'iframe va donc basculer sur un affichage de type mobile (cette bascule doit aussi se faire sur la page).
    --> On arrive donc ici
     */
    .layout {
        /*flex-direction: column;*/
        display: flex;
        /*min-height: 100vh;*/
    }

    aside {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ccc; /*trait de délimitation sur le côté bas*/
        border-right: 1px solid #ccc; /*trait de délimitation sur le côté droit*/
    }

    nav ul {
        flex-direction: column;
        align-items: flex-start;
    }

    nav ul li {
        margin-right: 0;
        margin-bottom: 0.5em;
    }

}