.box2 {
    background-color: #555555; /* Fond gris */
    border-radius: 10px; /* Bordures arrondies */
    padding: 20px; /* Espacement interne */
    margin-bottom: 20px; /* Espacement externe */
    display: flex; /* Utilisation de flexbox */
    flex-wrap: wrap; /* Permet le passage à la ligne si nécessaire */
    justify-content: center; /* Centre les éléments horizontalement */
    text-align: center;
}

.box2 h3 {
    margin-top: 0; /* Supprimer la marge supérieure par défaut */
    color: #ffffff; /* Couleur du titre */
    width: 100%; /* Largeur maximale pour occuper toute la largeur disponible */
}

.box2 .item {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    flex-direction: column; /* Empile les éléments les uns sur les autres */
    align-items: center; /* Centrer horizontalement les éléments */
    text-align: center; /* Centrer le texte */
    margin: 20px 25px 20px; /* Espacement autour de chaque item */
}

.box2 img {
    width: 180px;
    height: 180px;
    border-radius: 10px; /* Bordure ronde pour l'image */
}
.box2 p {
    margin: 5px; /* Corrigé : ajoute une unité */
    color: #ffffff; /* Couleur blanche par défaut */
}



.box3 {
    background-color: #555555; /* Fond gris */
    border-radius: 10px; /* Bordures arrondies */
    padding: 20px; /* Espacement interne */
    margin-bottom: 20px; /* Espacement externe */
    display: flex; /* Utilisation de flexbox */
    flex-wrap: wrap; /* Permet le passage à la ligne si nécessaire */
    justify-content: center; /* Centre les éléments horizontalement */
    text-align: center;
}

.box3 h3 {
    margin-top: 0; /* Supprimer la marge supérieure par défaut */
    color: #ffffff; /* Couleur du titre */
    width: 100%; /* Largeur maximale pour occuper toute la largeur disponible */
}

.box3 .item {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    flex-direction: column; /* Empile les éléments les uns sur les autres */
    align-items: center; /* Centrer horizontalement les éléments */
    text-align: center; /* Centrer le texte */
    margin: 20px 25px 20px; /* Espacement autour de chaque item */
}

.box3 img {
    width: 280px;
    height: 397px;
    border-radius: 10px; /* Bordure ronde pour l'image */
}

.box3 p {
    margin: 5;
    color: #ffffff; /* Couleur du texte */
}


/* box4 */

.box4 {
    background-color: #555555;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    position: relative; /* nécessaire pour les icônes */
    padding-top: 40px; /* nécessaire pour laisser la place aux icônes */
}

/* Pour afficher la fausse barre "terminal" */
.box4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 29px;
    width: 100%;
    background-color: #2e2e2e;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.box4::after {
    content: "🗕 🗖 ✕";
    position: absolute;
    top: 0;
    right: -1px;
    font-size: 16px;
    color: #cfcfcf;
    font-family: Arial, sans-serif;
    letter-spacing: 10px;
    background-color: rgba(36, 36, 36, 0.6);
    border-top-right-radius: 10px;
    padding: 4px;
    padding-left: 15px;
}

/* Les items à l'intérieur */
.box4 .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 20px 25px 20px;
}

.box4 img {
    width: 280px;
    height: 397px;
    border-radius: 10px;
}

.box4 p {
    margin: 5px;
    color: #ffffff;
}