body {
    font-family: 'Sansation', sans-serif;
    background-color: #F4F4F4;
    margin: 0;
    padding: 0;
}



/* Header */

header {
    background-color: #fda707;
    padding: 10px;
    text-align: center;
    position: relative;
    user-select: none;

}

header img {
    max-width: 800px;
    width: 100%;
}

/* Button for login */

.login-button {
    position: absolute;
    right: 20px;
    top: 20px;
    padding: 10px 20px;
    background-color: #333;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.login-button:hover {
    background-color: #575757;
}

/* Navigation */
nav {
    display: flex;
    justify-content: space-around;
    background-color: #333;
    color: white;
    padding: 10px 0;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 14px 20px;
    font-weight: bold;
}

nav a:hover {
    background-color: #fda707;
    color: #333;
}

main {
    display: flex;
    flex-wrap: wrap;
    margin: 20px;
}

.sidebar {
    background-color: #fda707;
    padding: 20px;
    margin-right: 20px;
    height: 100%;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar ul li {
    margin: 10px 0;
    font-size: 16px;
}

.sidebar ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    padding: 10px;
    display: block;
}

.sidebar ul li a:hover {
    background-color: #0003ad;
    color: #339e44;
    border-radius: 5px;
}

.welcome {
    flex: 3;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('../image/welcome.png');
    /* Replace with your image path */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 20px;
    font-size: 18px;
    border: 3px solid #fda707;
    text-align: center;
    line-height: 1.6;
}

.welcome h2 {
    font-size: 50px;
    background-color: #fda707;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome h1 {
    font-size: 40px;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 2px;
    margin-bottom: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome p {
    font-size: 30px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 2px;
}

.quality-info {
    flex: 3;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('../image/quality-info.png');
    /* Replace with your image path */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 20px;
    font-size: 18px;
    border: 3px solid #fda707;
    text-align: center;
    line-height: 1.6;
}

.quality-info h2 {
    font-size: 50px;
    background-color: #fda707;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.quality-info h1 {
    font-size: 40px;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 2px;
    margin-bottom: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.quality-info p {
    font-size: 30px;
    color: #333;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 2px;
}

.delivery-info {
    flex: 3;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url('../image/delivery-info.png');
    /* Replace with your image path */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 20px;
    font-size: 18px;
    border: 3px solid #fda707;
    text-align: center;
    line-height: 1.6;
}

.delivery-info h2 {
    font-size: 50px;
    background-color: #fda707;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}



.delivery-info h1 {
    font-size: 40px;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 2px;
    margin-bottom: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.delivery-info p {
    font-size: 25px;
    color: #333;
    font-weight: bold;
    margin-top: 1px;
    margin-bottom: 1px;
}

.contact-info {
    flex: 3;
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
        url('../image/contact-info.png');
    /* Replace with your image path */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 20px;
    font-size: 18px;
    border: 3px solid #fda707;
    text-align: center;
    line-height: 1.6;
}

.contact-info h2 {
    font-size: 50px;
    background-color: #fda707;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-info h1 {
    font-size: 40px;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 2px;
    margin-bottom: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-info p {
    font-size: 25px;
    color: #333;
    font-weight: bold;
    margin-top: 1px;
    margin-bottom: 1px;
}

.repair-info {
    position: relative;
    flex: 3;
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
        url('../image/repair.png');
    /* Replace with your image path */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 20px;

    font-size: 18px;

    border: 3px solid #fda707;

    text-align: center;

    line-height: 1.6;

}



.repair-info h2 {

    font-size: 50px;

    background-color: #fda707;

    color: #333;

    font-weight: bold;

    text-transform: uppercase;

    margin-top: 10px;

    margin-bottom: 10px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

}



.repair-info h1 {

    font-size: 40px;

    color: #333;

    font-weight: bold;

    text-transform: uppercase;

    margin-top: 2px;

    margin-bottom: 2px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

}



.repair-info a {

    position: absolute;
    /* Permet de positionner l'élément par rapport à .repair-info */

    bottom: 10px;
    /* Place l'élément à 10px du bas */

    right: 10px;
    /* Place l'élément à 10px de la droite */

    font-size: 16px;
    /* Ajuste la taille du texte si nécessaire */

    color: #333;
    /* Couleur du texte */

    text-align: right;
    /* Alignement à droite du texte à l'intérieur du <a> */

}



.repair-info a:hover {

    background-color: #fda707;

    color: white;

}

/* Product section */

.products {

    flex: 3;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    /* Définis la hauteur maximale de la section */

    overflow-y: auto;
    /* Active le scroll vertical si le contenu dépasse */

    padding: 10px;

    border: 1px solid #ddd;
    /* Ajoute une bordure pour mieux définir la zone */



}

.no-scroll {
    overflow: hidden;
}




.product {

    padding: 20px;

    text-align: center;

    position: relative;

    cursor: pointer;

}

.highlight {
    color: white;
    background-color: red;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    display: inline-block;
    font-size: 20px;
}



.productPromo {

    position: absolute;
    top: -1px;
    left: -1px;
    max-width: 120px;
    height: auto;

}


.product img {

    width: 100%;

    max-height: 220px;

    object-fit: contain;

    background-color: #ffffff;

}


.product p {

    margin: 2px 0;

    font-size: 14px;

    line-height: 1.2;
    /* Réduit la hauteur de ligne pour un espacement plus serré */

}


.product:hover {
    transform: scale(1.01);
}


.edit {
    max-width: 100px;
    height: auto;
    margin-bottom: 0px;
    position: relative;
    cursor: pointer;
}

.modal-button {
    position: relative;
    padding: 10px 20px;
    background-color: #333;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.modal-button:hover {
    background-color: #575757;
    cursor: pointer;
}

.modalinput input,
.modalinput select {
    width: 100%;
    padding: 10px;
    margin: 5px 0 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.modalinput button {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.modalinput button:hover {
    background-color: #575757;
    cursor: pointer;
}

/* Footer */

footer {

    background-color: #333;

    color: white;

    text-align: center;

    padding: 10px 0;

    margin-top: 20px;

}



/* Social icons */

.social-icon {

    width: 30px;

    height: 30px;

    margin: 0 10px;

    vertical-align: middle;

    transition: transform 0.3s ease;

}



.social-icon:hover {

    transform: scale(1.2);

}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.modal.active {
    display: block;
    opacity: 1;
    transform: scale(1);
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: none;
    width: 100%;
    max-width: 900px;
    padding-left: 20px;
    display: flex;
    flex-wrap: nowrap;
    /* Empêche les éléments de passer en dessous */
    gap: 20px;
    /* Espace entre les images et les informations */
    box-sizing: border-box;
    /* S'assure que la largeur inclut les bordures et les padding */
    transition: transform 0.4s ease;
    align-items: flex-start;
    /* Aligne le contenu en haut */
    border-radius: 15px;
}




label {
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
}

input[type="number"] {
    width: 100%;
    padding: 10px;
    margin: 5px 0 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-width: 75px;
}




/* Pour masquer de manière fluide */





.modal-content2 {

    background-color: #fefefe;



    margin: 10% auto;

    padding: 20px;

    border: none;

    width: 100%;

    max-width: 900px;

    padding-left: 20px;

    align-items: flex-start;
    /* Aligne le contenu en haut */

    border-radius: 15px;

}


.modal-content2 {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    text-align: center;
}

.btnValider {
    background-color: #fda707;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.btnValider:hover {
    background-color: #ffa600;
    transform: scale(1.009);
}

.btnSupp {
    background-color: #e91414;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.btnSupp:hover {
    background-color: #ff0000;
    transform: scale(1.009);
}

.rienPanier {
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
}




.modal-images-container {

    display: grid;

    grid-template-columns: 1, 1fr;
    /* 1 images par ligne */

    gap: 10px;
    /* Espace entre les images */

    width: 50%;
    /* Limite à 50% de la largeur */

}



.modal-image {

    width: 100%;

    height: auto;

    object-fit: cover;

}



.modal-info {

    width: 50%;
    /* Limite la section des infos à 50% de la largeur */

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;
    /* Aligne le contenu en haut */

    margin-top: 0;
    /* Supprime la marge supérieure */

}

.modal-info p {

    margin: 5px 0;
    /* Réduit l'espace entre les paragraphes */



}



.modal-info h3 {

    margin-top: 0;
    /* Supprime la marge supérieure */

    margin-bottom: 10px;
    /* Optionnel: Ajuste l'espacement en bas si nécessaire */

    padding: 0;
    /* Supprime le padding */

}

/* Image principale */

.main-image {

    width: 100%;

    height: auto;

    object-fit: contain;
    /* Ajuste l'image principale à l'espace tout en maintenant ses proportions */

    margin-bottom: 20px;

}





#modalPanier {
    position: absolute;
    bottom: 300px;
    right: 50px;
    width: 350px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    /* Correction ici */
    height: 500px;
}

#modalPanier.active {
    display: block;
}

#modalPanier .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

/* Conteneur pour les miniatures */

.thumbnail-container {

    display: flex;

    gap: 10px;

    justify-content: space-around;

    margin-top: 10px;

    margin-bottom: 20px;

}

.panierImg:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.nb-produit {
    background-color: red;
    padding: 5px;
    border-radius: 24px;
    color: white;
    position: absolute;
    top: -20px;
    right: 20px;
}



/* Miniatures */

.thumbnail {

    width: 20%;

    height: auto;

    cursor: pointer;

    border: 2px solid transparent;

    object-fit: contain;
    /* Ajuste l'image principale à l'espace tout en maintenant ses proportions */

    transition: border 0.3s ease;

}



.thumbnail:hover {

    border: 2px solid #ccc;
    /* Changer la bordure quand la souris passe sur la miniature */

}

.close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    cursor: pointer;
    background-color: #fda707;
    border-radius: 90px;
    user-select: none;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    zoom: 1.009;
}

.product-info-table {

    width: 100%;
    /* Prend toute la largeur disponible */

    border-collapse: collapse;
    /* Supprime les espaces entre les bordures */

    border: 2px solid #ddd;
    /* Changer la bordure quand la souris passe sur la miniature */

    font-size: 16px;
    /* Ajuste la taille du texte */

    margin-top: 10px;

    background-color: white;

}



.product-info-table th,
.product-info-table td {

    text-align: left;

    padding: 8px 12px;
    /* Ajoute du padding aux cellules */

    border-bottom: 1px solid #ddd;
    /* Ajoute une bordure en bas des cellules */

}



.product-info-table th {

    background-color: #fda707;
    /* Couleur de fond pour les en-têtes */

    font-weight: bold;
    /* Met les en-têtes en gras */

}



.product-info-table td {

    color: #333333;
    /* Couleur du texte des cellules */

}

/* Media Queries for Mobile Devices */


@media (max-width: 1200px) {

    .products {

        grid-template-columns: repeat(2, 1fr);
        /* Affiche une colonne pour les produits */

    }

}

@media (max-width: 950px) {

    /* Styles de base de la modale */

    .modal {

        display: none;

        position: fixed;

        z-index: 1;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        overflow: auto;

        background-color: rgba(0, 0, 0, 0.4);

        opacity: 0;

        transform: scale(0.9);

        transition: opacity 0.4s ease, transform 0.4s ease;

        padding: 0;

    }




    .modal.active {

        display: block;

        opacity: 1;

        transform: scale(1);

    }



    .modal-content {

        background-color: #fefefe;

        margin: 10% auto;

        padding: 10px;

        border: none;

        width: 90%;

        padding: 10px;

        max-width: 900px;

        display: flex;

        flex-wrap: nowrap;

        gap: 20px;

        box-sizing: border-box;

        align-items: flex-start;

        transition: transform 0.4s ease;

    }



    .modal-images-container {

        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        width: 50%;

    }



    .modal-image {

        width: 100%;

        height: auto;

        object-fit: cover;

    }



    .modal-info {

        width: 50%;

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        align-items: flex-start;

    }



    .product-info-table {

        width: 100%;

        border-collapse: collapse;

        font-size: 16px;

        margin-top: 10px;

    }



    .product-info-table th,
    .product-info-table td {

        text-align: left;

        padding: 8px 12px;

        border-bottom: 1px solid #ddd;

    }



    .product-info-table th {

        background-color: #fda707;

        font-weight: bold;

    }



    .product-info-table td {

        color: #333333;

    }



    .thumbnail-container {

        display: flex;

        gap: 10px;

        justify-content: space-around;

        margin-top: 10px;

        margin-bottom: 20px;

    }


    .product-img {
        left: -8px;
    }



    .thumbnail {

        width: 20%;

        height: auto;

        cursor: pointer;

        border: 2px solid transparent;

        object-fit: contain;

        transition: border 0.3s ease;

    }



    .thumbnail:hover {

        border: 2px solid #ccc;

    }



    .close {

        position: absolute;

        top: 10px;

        right: 10px;

        font-size: 24px;

        cursor: pointer;

    }



    .close:hover,

    .close:focus {

        color: black;

        text-decoration: none;

        cursor: pointer;

    }



    /* Media Queries pour mobile */

    @media (max-width: 950px) {

        .modal-content {

            flex-direction: column;

            width: 90%;

            margin: 5% auto;

            padding: 15px;

        }



        .modal-images-container {

            width: 100%;
            /* La section des images prendra toute la largeur sur mobile */

        }



        .modal-info {

            width: 100%;
            /* Les informations prennent également toute la largeur */

            margin-top: 15px;

        }



        .thumbnail {

            width: 24%;
            /* Réduit la taille des miniatures pour qu'elles s'alignent mieux */

        }



        .main-image {

            width: 100%;
            /* L'image principale s'ajustera à la largeur disponible */

        }



        .product-info-table {

            font-size: 14px;
            /* Réduit légèrement la taille des textes pour les petits écrans */

        }

    }



    nav {

        flex-direction: column;

        text-align: center;



    }

    nav a {

        font-size: 14px;
        /* Réduit la taille de police sur petits écrans */

        padding: 4px 8px;
        /* Réduit encore le padding pour les mobiles */

    }



    main {

        flex-direction: column;

        margin: 10px;

    }



    .sidebar {

        margin-right: 0;

        margin-bottom: 20px;

        width: 100%;


    }



    .products {

        grid-template-columns: 1fr;
        /* Affiche une colonne pour les produits */

    }

    .login-button {

        position: absolute;

        right: 2px;

        top: 2px;

        padding: 5px 5px;

        background-color: #333;

        color: white;

        text-decoration: none;

        border-radius: 5px;

    }

    .welcome {

        flex: 3;

        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),

            url('../image/welcome.png');
        /* Replace with your image path */

        background-size: cover;

        background-position: center bottom;

        background-repeat: no-repeat;

        padding: 20px;

        font-size: 18px;

        border: 3px solid #fda707;

        text-align: center;

        line-height: 1.6;

    }

    .quality-info {

        position: relative;

        flex: 3;

        background-image: none;

        background-size: cover;

        background-position: center bottom;

        background-repeat: no-repeat;

        padding: 20px;

        font-size: 18px;

        border: 3px solid #fda707;

        text-align: center;

        line-height: 1.6;

    }



    .delivery-info {

        position: relative;

        flex: 3;

        background-image: none;

        background-size: cover;

        background-position: center bottom;

        background-repeat: no-repeat;

        padding: 20px;

        font-size: 18px;

        border: 3px solid #fda707;

        text-align: center;

        line-height: 1.6;



    }

    .contact-info {

        position: relative;

        flex: 3;

        background-image: none;

        background-size: cover;

        background-position: center bottom;

        background-repeat: no-repeat;

        padding: 20px;

        font-size: 18px;

        border: 3px solid #fda707;

        text-align: center;

        line-height: 1.6;





    }

    .contact-info img {

        max-width: 50%;
        /* L'image prendra toute la largeur disponible sans toucher à ses proportions */

    }



    .repair-info {

        position: relative;

        flex: 3;

        background-image: none;

        background-size: cover;

        background-position: center bottom;

        background-repeat: no-repeat;

        padding: 20px;

        font-size: 18px;

        border: 3px solid #fda707;

        text-align: center;

        line-height: 1.6;

    }

    .welcome h1,
    .quality-info h1,
    .delivery-info h1,
    .contact-info h1,
    .repair-info h1 {

        font-size: 20px;
        /* Réduire la taille du texte pour mobile */

    }



    .welcome h2,
    .quality-info h2,
    .delivery-info h2,
    .contact-info h2,
    .repair-info h2 {

        font-size: 30px;
        /* Ajuste les titres en fonction de l'écran */

    }

    .welcome p,
    .quality-info p,
    .delivery-info p,
    .contact-info p,
    .repair-info p {

        font-size: 15px;
        /* Ajuste les titres en fonction de l'écran */

    }



    .welcome a,
    .quality-info a,
    .delivery-info a,
    .contact-info a,
    .repair-info a {

        font-size: 10px;
        /* Réduire la taille du lien dans la section réparation */

        text-align: center;

    }











    /* Footer icons */

    footer .social-icon {

        width: 20px;

        height: 20px;
        /* Réduire la taille des icônes sur mobile */

    }

    .sidebar {

        display: none;
        /* Masque la sidebar par défaut sur mobile */

        position: absolute;

        width: 90%;

        top: 60px;
        /* Ajuste selon la hauteur de ton header */

        left: 0;

        z-index: 1000;

        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

        min-height: fit-content;

    }



    /* Affiche le bouton pour ouvrir la sidebar */

    .toggle-sidebar {



        font-weight: bold;

        margin-bottom: 20px;
        /* Ajoute une marge sous le bouton */

        margin-top: 10px;
        /* Si vous souhaitez aussi ajouter une marge au-dessus */

        display: block;

        background-color: #fda707;

        color: #333;

        font-size: 18px;

        padding: 10px;

        border: none;

        cursor: pointer;

        text-align: center;

        width: 100%;

    }



    /* Styles optionnels pour la sidebar lorsqu'elle est affichée */

    .sidebar.open {

        display: block;

        background-color: #fda707;

        color: #333;

        font-size: 18px;

        padding: 10px;

        border: none;

        cursor: pointer;

        text-align: center;

        width: 95%;

        height: auto;

    }



    /* Style des éléments du menu pour ressembler à un menu déroulant */

    .sidebar ul {

        padding: 10px;

    }



    .sidebar ul li {

        padding: 10px 0;

        border-bottom: 1px solid #ddd;


    }



    .sidebar ul li a {

        color: #333;

        text-decoration: none;

        display: block;

    }

}