/* Styles uniquement pour smartphones */
@media screen and (max-width: 768px) {

    /* Exemple : changer la bannière */
    #banner .content {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1rem;
    }

    /* Réduire taille du texte */
    h2 {
        font-size: 1.4rem;
    }

    /* Masquer une section (ex : image trop large ou inutile) */
    .image {
        display: none;
    }

    /* Réorganiser les blocs profil/skills en colonne */
    #profil .row.aln-middle {
        flex-direction: column;
    }

    /* Menu plus accessible */
    #nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    /* Projets en pile */
    #projets .row.gtr-uniform {
        display: flex;
        flex-direction: column;
    }

    /* Espacements réduits */
    section {
        padding: 2rem 1rem !important;
    }

    /* CV button plus large et espacé */
    #banner .actions.special {
        margin-top: 1.5rem;
    }

    #banner .actions.special li {
        width: 100%;
        text-align: center;
    }

    #banner .actions.special a.button {
        width: 90%;
        max-width: 300px;
        margin: auto;
    }

    /* (Facultatif) Ajoute un peu d'espace sous la bannière si besoin */
    #banner {
        margin-bottom: 2rem;
    }


    /* Enlever les puces dans la section Formations & Compétences DevOps */
    #formations ul {
        list-style: none;
        padding-left: 0;
    }

        /* Enlever les puces dans la section Formations & Compétences DevOps */
    #experiences ul {
        list-style: none;
        padding-left: 0;
    }

    #projets .row.gtr-uniform {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin: 0 !important;
    }

    #projets .row.gtr-uniform > * {
    width: 100% !important;
    max-width: 500px;
    padding: 0 !important;
    text-align: center;
    }


    /* Masquer l'image de fond DevOps */
    #formations .image,
    #experiences .image {
        display: none !important;
    }


}