.mainContent { position: relative; }
#conteneur-moteur-HP{position: relative;z-index: 10;}
#HP_Sidebar, #conteneur-moteur-HP .open-moteur .openbtn { position: fixed; z-index: 3; top: 30%; color: #fff; box-shadow: rgb(17 34 51 / 16%) 0 3px 14px; background: #383838; }
#conteneur-moteur-HP .open-moteur .openbtn { width: 50px; font-size: 18px; cursor: pointer; padding: 15px; right: 0; font-weight: 600; border-bottom-left-radius: 18px; border-top-left-radius: 18px; display: flex; flex-direction: column-reverse; align-items: center; }
#conteneur-moteur-HP .open-moteur .openbtn::after { top: 50%; left: -23px; margin-top: -14px; transform: translateX(16px) rotate(-90deg); }
#conteneur-moteur-HP .open-moteur .openbtn .wording { writing-mode: vertical-lr; text-transform: uppercase; }
#HP_Sidebar .closebtn::after, #conteneur-moteur-HP .open-moteur .openbtn::after { content: url('//idkidsmedia.blob.core.windows.net/media/oxybul/common/moteur_cadeau/fleche-grise.svg'); display: block; position: absolute; width: 26px; }
#HP_Sidebar .btn-intro, #HP_Sidebar .loader, #HP_Sidebar .msg_erreur { display: none; }
#HP_Sidebar .closebtn { position: absolute; top: 30%; left: 0; margin-left: -11px; cursor: pointer; }
#HP_Sidebar { height: fit-content; right: 0; overflow-x: unset; border-top-left-radius: 20px; border-bottom-left-radius: 20px; display: flex; align-items: center; justify-content: center; width: 250px; visibility: visible; pointer-events: auto; padding: 20px 0; }
#HP_Sidebar.hidden { visibility: hidden; pointer-events: none; }
#HP_Sidebar .closebtn::after { top: 31px; left: 50%; transform: translateX(-5px) rotate(90deg); }
#HP_Sidebar .moteur_cadeau { display: flex; flex-direction: column; }
#HP_Sidebar .moteur_cadeau form { margin-top: 5px; }
#HP_Sidebar .intro { display: flex; align-items: center; justify-content: center; }
#HP_Sidebar .title { font-size: 22px; text-transform: uppercase; margin-left: 10px; }
#HP_Sidebar #wrapper_moteur_kdo .styled-select-button { overflow: hidden; margin: 0 0 10px; background: #fff; width: 100%; border-radius: 30px; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1)); }
#HP_Sidebar #wrapper_moteur_kdo .styled-select-button .select-btn { background: url("//idkidsmedia.blob.core.windows.net/media/oxybul/common/moteur_cadeau/fleche.svg") right center / 20px no-repeat #fff; cursor: pointer; height: 44px; line-height: 44px; overflow: hidden; border-radius: 30px; width: 97%; }
#HP_Sidebar #wrapper_moteur_kdo .styled-select-button .select-btn select { appearance: none; background-color: transparent; background-image: none; border: none; box-shadow: none; cursor: pointer; font-size: 15px; padding-left: 5%; width: 100%; color: #272b43; }
#HP_Sidebar select:focus-visible { outline: 0 !important; }
#HP_Sidebar #wrapper_moteur_kdo .findGift { cursor: pointer; display: flex; text-transform: uppercase; height: 43px; line-height: 40px; font-weight: 600; margin-top: 5px; justify-content: center; border: 2px solid #fff; }
#HP_Sidebar #wrapper_moteur_kdo .loader { position: absolute; bottom: 6%; right: 63%; display: none; animation: 2s linear infinite spin !important; }
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
#HP_Sidebar #wrapper_moteur_kdo .msg_erreur { color: #e63737; line-height: 1.4; font-size: 0.9em; margin-top: 0.4em; display: none; }
@media screen and (max-width: 768px) { 
#conteneur-moteur-HP .open-moteur .openbtn { height: 52px; width: 70%; cursor: pointer; padding: 11px 8px 4px; top: inherit; bottom: 0; left: 50%; transform: translate(-50%, 0); border-bottom-left-radius: 0; border-top-right-radius: 18px; flex-direction: row-reverse; justify-content: center; align-items: center; }
#conteneur-moteur-HP .open-moteur .openbtn .icon-mkdo { width: 25px; margin-right: 10px; }
#conteneur-moteur-HP .open-moteur .openbtn::after { top: 0%; left: 50%; margin-top: -12px; transform: translateX(0) rotate(0deg); }
#conteneur-moteur-HP .open-moteur .openbtn .wording { writing-mode: initial; transform: rotate(0); }
#HP_Sidebar { width: 80%; padding: 20px; border-top-right-radius: 18px; border-bottom-left-radius: 0; top: inherit; bottom: 0; left: 50%; transform: translate(-50%, 0); }
#HP_Sidebar #giftEngine { width: 100%; }
#HP_Sidebar .closebtn::after { transform: translateX(10px) rotate(-180deg); top: -23px; }
#HP_Sidebar .closebtn { top: 0; left: 50%; transform: translateY(5px) rotate(0); }
}