/* Frank Spring
12.01.2026
Css correspondant a la page d'interview avec Yuki */
/* .interview_main : conteneur principal de la section interview, disposition en ligne pour article
 + aside */
.interview_main {
    display: flex;
}

/* Premier enfant de .interview_main prend plus de place (flex 2) */
.interview_main:first-child {
    flex: 2;
}

/* Dernier article de l’interview prend moins de place (flex 1) */
.interview_article:last-child {
    flex: 1;
}

/* aside : colonne latérale contenant infos ou images, largeur fixe */
aside {
    width: 30%;
}

/* article : section principale de l’interview, prend le reste de l’espace */
article {
    width: 70%;
}

/* image dans aside : taille fixe et coins arrondis pour un style doux */
aside div img {
    width: 120px;
    height: auto;
    border-radius: 18px;
}

/* .image_Frank : style pour les images des questions, rondes et légèrement espacées */
.image_Frank {
    width: 100px;
    height: auto;
    border-radius: 50%;
    margin-right: 8px;
    margin-bottom: 8px;
}

/* .racoon : style pour les réponses, rondes et espacées ; images doivent être carrées (1:1) */
.racoon {
    width: 100px;
    height: auto;
    border-radius: 50%;
    margin-right: 8px;
    margin-bottom: 8px;
}

/* .listinterview : chaque question/réponse affichée en ligne, alignement vertical centré */
.listinterview {
    display: flex;
    align-items: center;
}

/* .interview_div : conteneur flexible pour aligner correctement les éléments internes */
.interview_div {
    display: flex;
    align-self: baseline;
}

/* .interview_article : disposition verticale des questions/réponses */
.interview_article {
    display: flex;
    flex-direction: column;
}

/* styles responsive pour écrans plus petits que 750px */
@media only screen and (max-width: 750px) {

    /* réduit la taille des images des questions */
    .image_Frank {
        width: 50px;
        height: auto;
        border-radius: 50%;
        margin-bottom: 16px;
        margin-left: 0;
    }

    /* réduit la taille des images des réponses */
    .racoon {
        width: 50px;
        height: auto;
        border-radius: 50%;
        margin-bottom: 16px;
        margin-left: 0;
    }

    /* masque la colonne aside sur petits écrans */
    aside {
        display: none;
    }

    /* ajoute un peu d’espacement vertical entre les items de liste */
    li {
        margin-top: 20px;
    }
}