body {
    font-family: Arial, sans-serif;
    margin: 30px;
}

/*les éléments continuent sur la ligne et reprennent sur la suivante quand elle est pleine */
#liste-produits {
    display: flex; 
    gap: 20px;
    flex-wrap: wrap;
}

.produit {
    border: 1px solid #ddd; /*ajoute une bordure*/
    border-radius: 12px;  /* arrondi les bords*/
    padding: 20px;  /* ajoute de l'espace à l'intérieur pour pas que le texte soit collé*/
    width: 100%;  /*permet à la carte d'utiliser toute la largeur disponible*/
    max-width: 250px;  /* va adapter la taille des cartes à celle du tel sans dépasser 250px*/
}

.produit img {
    width: 100%;
    border-radius: 8px;
}

@media (max-width: 600px) {  /*ne fait ce qui suit que si l'écran fait moins de 600px*/

    #liste-produits {
        gap: 15px;  /*Réduit l'espace entre les cartes*/
    }

    .produit {
        max-width: none;  /*Autorise la carte à prendre toute la largeur du tel*/
    }
}

#recherche {
    width: 100%;                    /*Permet à la barre de prendre toute la largeur*/
    max-width: 500px;               /*Sans être trop longue sur PC*/
    padding: 12px;                  /*Agrandit l'intérieur de la barre*/
    margin: 20px 0;                 /*Ajoute de l'espace au-dessus et en-dessous*/
    border: 1px solid #ddd;       /*Ajoute une bordure*/
    border-radius: 10px;            /*Arrondit les angles*/
    font-size: 16px;                /*Agrandit la taille du texte*/
}

.aucun-resultat {
    font-size: 18px;                /*Agrandit le texte*/
    margin-top: 20px;               /*Ajoute un espace pour ne pas coller le message à la recherche*/
}

.detail {
    max-width: 700px;               /*Limite la taille max de la fiche*/
    margin-top: 20px;               /*Ajoute un espace pour séparer le boutton*/
}

.image-detail {
    width: 100%;
    border-radius: 12px;
    display: block;                 /*Permet à l'image de se comporter comme un bloc et évite les espaces innutiles*/
}

.informations-detail {
    padding: 20px 0;
}

.prix {
    font-size: 24px;
    font-weight: bold;              /*Met le prix en gras*/
}

#retour {
    padding: 10px 15px;             /*Rends le boutton plus facile à cliquer*/
    border: none;
    border-radius: 8px;
    cursor: pointer;                /*Change le curseur pour montrer que c'est cliqueable*/
}

@media (max-width: 600px) {
    body {
        margin: 20px;
    }
    #recherche {
        box-sizing: border-box;
    }
    .produit {
        width: 100%;
        box-sizing: border-box;
    }
    #retour {
        font-size: 16px;
        padding: 12px 166px;
    }
}