main {
        width: 100%;
        transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 7vh;
        background-color: rgb(255, 255, 255);
        z-index: 10;
    }

    .right-icons, .left-icons, .logo {
        box-sizing: border-box;
        transition: 0.2s ease-in-out;
    }

    .right-icons, .left-icons {
        display: flex;
        height: 100%;
        align-items: center;
        width: 30vw;
        }
        .right-icons {
            position: relative;
            transition: 1s ease-in-out;
        }

    .menu-icon, .search-icon, .shop-icon, .cross-icon {
        width: auto;
        height: 100%; /* Hauteur de l'icône ajustée à celle du header */
        display: flex;
        align-items: center; /* Centrer l'icône verticalement dans le header */
        z-index: 11;
        cursor: pointer;
    }
    .cross-icon {
        position: absolute;
        cursor: pointer;
        right: -30vw;
        transition: 0.2s ease-in-out;
        border-radius: 50%;


    }
    .cross-icon.open {
        right: 0px;
    }


    .right-icons-false {
        width: 0vw;
        background-color: rgb(255, 0, 0, 0);
        height: 100%;
        transition: 0.2s ease-in-out;
    }
    .right-icons-color {
        right: 0px;
        background-color: rgba(255, 255, 255, 1);
        position: absolute;
        width: 0vw;
        height: 100%;
        z-index: 10;
        transition: 0.2s ease-in-out;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
        .input-field {
        display: none;
        width: 60%;
        padding: 10px;
        margin: 0px 10px 0px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 24px;
        outline: none;
        box-sizing: border-box;
        font-family: 'GT America';
        font-style: normal;
    }
        .right-icons-color.open .input-field {
        display: block;
    }



    .menu-icon {
        position: relative;
        width: 35px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 30px;
        z-index: 10;
        transition: 0.3s ease;
        }

        .menu-icon span {
            background-color: black;
            height: 5px;
            width: 100%;
            border-radius: 3px;
            transition: 0.3s ease;
            z-index: 10;
            transform-origin: center;
        }

        @media (min-width:1000px) {
            .menu-icon span {border-radius: 100%; height: 4px; width: 38px;}
        }
        @media (max-width:1000px) {
            .menu-icon span {border-radius: 100%;}
        }

        .menu-icon.open {
            transform: translate(-10px);
        }

        /* Styles pour transformer les trois barres en croix */
        .menu-icon.open span:nth-child(1) {
            transform: rotate(45deg) translate(13px, 5px);
            width: 40px;
        }

        .menu-icon.open span:nth-child(2) {
            opacity: 0; /* Cache la barre du milieu */
            transform: translate(10px);
        }

        .menu-icon.open span:nth-child(3) {
            transform: rotate(-45deg) translate(13px, -5px);
            width: 40px;
        }


    .logo {
        position: relative;
        text-decoration: none;
        flex: 1;
        text-align: center;
        color: black;
        font-weight: 700;
        height: 100%; /* La hauteur de l'élément logo est liée au header */
        display: flex; /* Flexbox pour centrer l'image à l'intérieur */
        justify-content: center; /* Centrage horizontal de l'image */
        align-items: center; /* Centrage vertical de l'image */
        }
        @media (hover: hover) { .logo img:hover {
        opacity: 80%;
        } }

        .logo picture,
        .logo img {
            display: flex; /* Flexbox pour centrer l'image à l'intérieur */
            justify-content: center; /* Centrage horizontal de l'image */
            align-items: center; /* Centrage vertical de l'image */
            height: 90%; /* L'image prend toute la hauteur du logo */
            width: 90%; /* La largeur s'adapte pour conserver le ratio d'aspect */
            padding: 5px;
            box-sizing: border-box;
            object-fit: contain; /* Logo wird nie verzerrt, auch nicht in Safari */
            object-position: center;
        }
        .search-icon svg, .shop-icon svg, .cross-icon svg {
        width: auto;
        height: 100%; /* Conserve le ratio d'aspect */
        display: flex; /* Flexbox pour centrer l'image à l'intérieur */
        justify-content: center; /* Centrage horizontal de l'image */
        align-items: center; /* Centrage vertical de l'image */
        box-sizing: border-box;
    }



        /* Menu shop caché par défaut */
        .search-results,
        .shop-menu {
            position: fixed;
            top: 7vh;
            right: -30vw; /* Masqué par défaut */
            width: 30vw;
            height: calc(170% - 7vh); /* Ajustez cette valeur en fonction de vos besoins */
            overflow-y: auto; /* Permet le défilement vertical permanent */
            background-color: rgba(255, 255, 255, 1);
            color: black;
            z-index: 11;
            transition: right 0.2s ease-in-out;
            display: flex;
            flex-direction: column; /* Assure une disposition verticale */
            justify-content: flex-start;
            align-items: flex-start;
        }





    @media (min-width:1000px) {

            main.shop-open, main.search-open {
                width: 70vw;
                opacity: 0.7;
            }
            .shop-icon, .search-icon, .cross-icon {
                position: absolute;
                padding: 10px 20px 10px 0px;
                box-sizing: border-box;
                transition: 0.2s ease-in-out;
                opacity: 1;
            }
            .search-icon {right: 0px; visibility: visible;}
            .search-icon.open {transform: translateX(calc(-30vw + 100%));}

            .shop-icon {right: 0px; visibility: visible;}
            .shop-icon.open {right: calc(30vw - 90px);}

            .search-icon.hidden, .shop-icon.hidden {visibility: hidden; opacity: 0; transition: 0.2s ease-in-out;}





            .right-icons, .left-icons, .logo {
                padding: 10px 30px;
            }
            .right-icons, .left-icons {
                gap: 30px;
            }
            .logo picture, .logo img {
                padding: 2px;
            }
            .search-icon svg, .shop-icon svg, .cross-icon svg {
                padding: 3px;
            }
            .shop-menu, .search-results {
                top: 7vh;
                right: -30vw;
                width: 30vw;
                height: calc(170% - 7vh);
                font-size: 60px;
                overflow-y: auto;
            }
            .right-icons-color.open {
                width: 30vw;
                height: 2000px;
            }
            .right-icons-false.open, .left-icons.open, .logo.open  {
                width: 23.333vw;
            }

            .shop-menu.open, .search-results.open {
                right: 0;
                width: 30vw;
                height: 93%;
                overflow-y: auto;
                }
        }



    @media (max-width:1000px) {

            main.shop-open, main.search-open {
                width: 0vw;
            }
            .header {
                padding: 10px 20px;
                height: var(--hh);
            }
            .right-icons, .left-icons {
                gap: 15px;
            }
            .search-icon svg, .shop-icon svg, .cross-icon svg {
                padding: 4px;
            }
            .logo picture,
            .logo img {
                padding: 10px;
                height: 100px; /* L'image prend toute la hauteur du logo */
                width: 180px; /* La largeur s'adapte pour conserver le ratio d'aspect */
            }

            .menu-icon {
                width: 27px;
                height: 22px;
                padding-bottom: 5px;
            }

            .menu-icon span {
                height: 2.5px;
                width: 100%;
            }

            .menu-icon.open {
                transform: translate(-10px);
            }

            /* Styles pour transformer les trois barres en croix */
            .menu-icon.open span:nth-child(1) {
                transform: rotate(45deg) translate(12.5px, 2px);
                width: 30px;
            }

            .menu-icon.open span:nth-child(2) {
                opacity: 0; /* Cache la barre du milieu */
                transform: translate(10px);
            }

            .menu-icon.open span:nth-child(3) {
                transform: rotate(-45deg) translate(12.5px, -2px);
                width: 30px;
            }
            .shop-icon, .search-icon, .cross-icon {
                position: absolute;
                padding: 0px 0px 0px 0px;
                box-sizing: border-box;
                transition: 0.2s ease-in-out;
                opacity: 1;
            }
            .search-icon {right: 0px; visibility: visible;}
            .search-icon.open {right: calc(100vw - 70px);}

            .shop-icon {right: 0vw; visibility: visible;}
            .shop-icon.open {right: calc(100vw - 70px);}

            .search-icon.hidden, .shop-icon.hidden {visibility: hidden; opacity: 0; transition: 0.2s ease-in-out;}

            .shop-menu, .search-results {
                top: var(--hh);
                right: -100vw;
                width: 100vw;
                height: calc(100% - var(--hh));
                font-size: 40px;
            }
            .right-icons-color.open {
                width: 100vw;
                height: 2000px;
            }
            .right-icons-false.open, .left-icons.open, .logo.open  {
                width: 0vw;
                opacity: 0;
            }

            .shop-menu.open, .search-results.open {
                right: 0;
                width: 100vw;
                height: calc(100% - var(--hh));
                }
        }

    .shop-active, .search-active {
        height: 100%;
        transition: 0.2s ease-in-out;
    }
    main.shop-open, main.search-open  {
    width: 70vw;
    }
    @media (max-width:1000px) {
        main.shop-open, main.search-open  {
        width: 0vw;
        }
        #toggleView.shop-open, #toggleView.search-open {
        right: 100vw;

        }
    }



    .highlight {
        color: red; /* Change la couleur du texte mis en surbrillance */
        font-weight: bold; /* Met en gras le texte surligné */
    }

    #articlesList, #productsList  {
        width: 100%;
    }
    ul {
        list-style: none; /* Supprime les puces */
        padding: 0;        /* Supprime l'espacement intérieur par défaut */
        margin: 0;         /* Supprime les marges extérieures par défaut */
    }
    .search-item, .search-item a {
    border: 1px solid black;
    box-sizing: border-box;
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: space-between; /* Répartit l'espace entre les deux parties */
    align-items: center; /* Centre verticalement les éléments */
}
    .search-item a {
        padding: 20px;
        border: 0px;
    }

    .item-written {
        width: 60%;
        height: 100%;
        text-align: left;
        padding-right: 20px;
        font-size: clamp(17px, 1.3vw, 20px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Aligner les éléments en haut */
        position: relative; /* Pour permettre le positionnement absolu */
    }

    .title {
        font-size: clamp(20px, 1.7vw, 25px);
        margin-bottom: 5px; /* Espacement sous le titre */
    }

    .date, .contributors {
        margin-bottom: 5px; /* Espacement entre chaque élément */
    }

    .item-type {
        color: #888; /* Gris clair */
        font-style: italic;
        text-align: right;
        position: absolute; /* Fixe l'élément au bas du conteneur */
        bottom: -4px;
        right: 15px; /* Optionnel : aligner à droite */
    }




    .searchbar-image-container {
    width: 40%;
    height: 100%;
    position: relative; /* Assure que le positionnement interne fonctionne */
    display: flex;
    justify-content: center;
    align-items: center; /* Centre l'image verticalement */
    overflow: hidden; /* Empêche les débordements */
}

.searchbar-product-image, .searchbar-article-image {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* Centre bien l'image */
}

.searchbar-product-image img, .searchbar-article-image img, .searchbar-product-image picture  {
    max-width: 100%; /* Image s'ajuste horizontalement */
    max-height: 100%; /* Limite la hauteur */
    width: 100%;
    height: 100%;
    object-fit: contain;
}


    @media (max-width:1000px) {
        .search-item, .search-item a {
            border: 0.5px solid black;
            height: 120px;
        }
        .search-item a {
            padding: 15px;
        }

        .item-written {
            padding-right: 10px;
            font-size: clamp(16px, 3vw, 20px);

        }

        .title {
            font-size: clamp(18px, 2.4vw, 24px);
            margin-bottom: 5px; /* Espacement sous le titre */
        }

        .date, .contributors {
            margin-bottom: 3px; /* Espacement entre chaque élément */
        }

        .item-type {
            color: #888; /* Gris clair */
            font-style: italic;
            text-align: right;
            position: absolute; /* Fixe l'élément au bas du conteneur */
            bottom: -4px;
            right: 10px; /* Optionnel : aligner à droite */
        }
    }