html, body {
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}

button {
    cursor: pointer;
    color: white;
    font-weight: bold;
}

:root {
    --topbar-height: 100px;
    --margin-at-top: 10px;

    --bg-color: white;
    --menu-bg-color: rgb(80, 80, 80);

    --btn-green: rgb(10, 180, 10);
    --btn-red: rgb(210, 10, 10);
    --btn-gray: rgb(140,140,140);

    --emoji-btn-font-size: 30px;

    --dark-theme: false;
    --align-articles-mode: 0;
}

.cell {
    border: 2px gray solid;
    border-radius: 2px;
    background-color: white;
    color: var(--menu-bg-color);
    padding: 12px; /* on all sides */
    display: flex;
    gap: 8px; /* between image and info */
    width: 500px;
}

.articlelist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 1064px;
    margin-top: 20px;
    margin-left: max(300px, calc(50% - 532px))
    /* margin-left: max(300px, calc(50% - 392px)) */
}

.cellimg {
    height: 200px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
}

.inforow {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
    align-items: center flex-start;
}

.name {
    text-justify: inter-word;
    font-size: 20px;
}

.cell .btnrow {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0px;
}

.btnrow .cartsection {
    display: flex;
}

.infobtn {
    aspect-ratio: 1 / 1;
    font-size: var(--emoji-btn-font-size);
}

.countinput {
    height: 47px;
    font-size: 20px;
    /* aspect-ratio: 3 / 2; */
    width: 66px; /* fixes very long countinput on chromium */
}

.cellinfo {
    display: block;
    font-size: larger;
    width: 288px;
    position: relative;
}

#topbar {
    width: 100%;
    background-color: var(--menu-bg-color);
    height: var(--topbar-height);
    z-index: 42;
}

.fixed {
    position: fixed;
    top: 0px;
}

.scrollbtn {
    aspect-ratio: 1 / 1;
    font-size: var(--emoji-btn-font-size);
    background-color: var(--btn-gray);
    position: absolute;
    left: 15px;
    top: var(--margin-at-top);
}

.sidebar {
    font-size: 30px;
    text-align: center;
    color: white;
    font-weight: bold;
    height: 100%;
    width: 230px;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: var(--menu-bg-color);
    padding: 15px;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 67;
}

.searchbar {
    border-radius: 30px;
    top: 27px;
    width: calc(100% - 300px);
    min-width: 200px;
    margin-left: 20px;
    margin-right: 20px;
    height: 100%;
    left: 300px;
    background-color: white;
    z-index: 999;
}

.searchbar input {
    width: calc(100% - 50px);
    margin-left: 24px;
    margin-right: 24px;
    height: 60px;
    outline: none;
    border: none;
    background-color: transparent;
    font-size: 20px;
}

.toprowbuttons {
    width: calc(100% - 270px);
    display: flex;
    gap: 20px;
    position: absolute;
    top: var(--margin-at-top);
    right: 15px;
    align-items: center;
}

/* .toprowbuttons div {
    display: flex;
    flex-direction: column;
    gap: 0px;
} */

.toprowbox {
    height: 80px;
}

.toprowboxhorizontal {
    display: flex;
    justify-content: center;
}

.toprowboxvertical {
    display: flex;
    flex-direction: column;
}

.maininnerbox {
    height: 100%;
}

.emojibtn {
    aspect-ratio: 1 / 1;
    background-color: var(--btn-gray);
    font-size: var(--emoji-btn-font-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#transferbtn {
    height: 66.66%;
    /* height: 200%; */
    width: 100%;
    background: linear-gradient(30deg in oklch, yellow, blue, red, yellow);
    cursor: help;
    box-sizing: border-box;
}

#transferbtn::after {
    width: 625px;
    display: block;
    overflow-wrap: break-word;
    text-align: justify;
    text-align-last: center;
    /* content: "⚠️ PETIT GUIDE POUR LE TRANSFERT ⚠️\A Infos bien utiles LISEZ BIEN AVANT DE TRANSFÉRER !!!\A\ALE TRANSFERT MARCHE BEAUCOUP MIEUX SUR CHROME QUE FIREFOX\A\A SANS UNE BONNE CONNEXION INTERNET CERTAINS ARTICLES PEUVENT NE PAS ÊTRE AJOUTÉS\A\A Beaucoup d'onglets vont s'ouvrir, 1 onglet ouvert = 1 fois 1 article transféré. Faites au moins 1 fois le test popups et activez les popups, sinon ça ne MARCHERA PAS.\A\A Une fois que les onglets ont fini de s'ouvrir, fermez-les tous, ouvrez un nouvel onglet, et allez sur votre panier Folygraphie. C'est celui où tout a été transféré. Les paniers des autres onglets existent dans leur monde à part et ne sont pas sauvegardés.\A\A Le transfert sera sûrement long, mais ça marche (sinon bah RIP). Pour arrêter le transfert, fermez la page. Rien ne sera perdu, le panier ici est sauvegardé tant que le navigateur reste ouvert."; */
    content: "GROS GUIDE DU TRANSFERT - BIEN LIRE AU MOINS UNE FOIS\A(Non parce que c'est bizarre comme manière de faire)\A\ALe transfert marche beaucoup mieux sur Chrome que Firefox et c'est pas contournable, vraiment si vous êtes sur Firefox exportez votre panier, importez-le sur Chrome et faites le transfert sur Chrome (ou Chromium c'est la même).\A\A Faites le test popups AVANT le transfert : cliquez sur le bouton \"POPUPS 😳\", c'est censé ouvrir 2 onglets vers le panier Folygraphie, si les 2 ne s'ouvrent pas, revenez ici et autorisez les popups SINON LE TRANSFERT NE FONCTIONNERA PAS.\A\A Pour limiter les articles non transférés, il faut ouvrir son panier Folygraphie juste avant le transfert (le test popups le fait très bien) et attendre jusqu'à ce que la page ait fini de charger. Le transfert va ouvrir plein d'onglets vers le panier, charger la page avant va réduire le temps de chargement des onglets et donc les erreurs qui vont avec.\A\APendant le transfert, chaque onglet qui s'ouvre ajoute un article au panier Folygraphie. Autant d'onglets vont s'ouvrir que d'articles différents dans la commande.\A\AUne fois tous les onglets ouverts, il faut tous les fermer puis en rouvrir un NOUVEAU et aller sur le panier Folygraphie. Chaque onglet ouvert lors du transfert a une copie fantôme du panier qui est et reste dans son monde à part, rouvrir un nouvel onglet évite tous souci lié à ça.\A\A Ensuite, revenez sur l'interface (ici), et cliquez sur le bouton \"Code #️⃣\" pour copier la commande à exécuter. Retournez dans le nouvel onglet avec le panier Folygraphie, et exécutez la commande dans la console.\A\A C'est fini !!!\ASi tout ne s'est pas transféré, gardez en tête que les articles en rupture sur Folygraphie ne sont pas affichés comme tels sur l'interface, et que si deux onglets chargent en même temps, ils vont essayer d'ajouter deux articles en même temps, au final ça va buguer et en n'ajouter qu'un seul.";
    white-space: pre-wrap;
    font-size: 16px;
    background-color: var(--menu-bg-color);
    padding: 20px;
    color: white;
    position: absolute;
    top: 100%;
    visibility: hidden;
}

#transferbtn:hover::after {
    opacity: 1;
    visibility: visible;
}

.totalcount {
    font-size: 20px;
    height: 50%;
    cursor: default;
    background-color: rgb(110, 110, 110);
    border: none;
    padding-left: 15px;
    padding-right: 15px;
    white-space: nowrap;
    align-items: center;
    pointer-events: none;
    justify-content: center;
}

#cartbtn {
    height: 50%;
}

.toprowbigbtn {
    font-size: 20px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    background-color: var(--btn-gray);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.toprowbigbtn span {
    margin-left: 15px;
    font-size: 25px;
}

.toprowsmallbtn {
    height: 33.33%;
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    background-color: var(--btn-gray);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.toprowsmallbtn span {
    margin-left: 10px;
    font-size: 18px;
}

.menucontainer {
    font-size: 24px;
    display: grid;
    gap: 2px;
    height: auto;
}

.sidebar img {
    width: 92%;
}

.menucontainer button {
    width: 100%;
    color: white;
    height: 35px;
    font-size: 20px;
    background-color: var(--btn-gray);
}

/********************************************/
.menucontainer .menubtn {
    font-size: 20px;
    height: 35px;
    background-color: var(--btn-green);
}

.menucontainer .menubtn.toggled {
    background-color: var(--btn-red);
}

.filtercontainer {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.addtextinput {
    height: 50%;
    font-size: 16px;
    outline: none;
    border: none;
    padding-left: 10px;
    padding-right: 10px;
}

.addtextfontselect {
    height: 100%;
    background-color: white;
    font-size: 15px;
}

#addtexttocartbtn {
    height: 100%;
}

.errormsg {
    font-size: 18px;
    color:var(--menu-bg-color);
    font-weight: bold;
    margin-top: 50px;
    width: 1000px;
}

.wordinfo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 20px;
}