:root {
    --main-astral-cream: #ad9d87;
    --main-astral-white: #ffffff;
    --main-astral-dark: #285461;
    --main-astral-green: #c1ff72;
    --main-astral-purple: #2a1d37;
    --main-astral-blue: #001f52;
    --main-astral-z: #3bc411;
}

* {
    box-sizing: border-box;
    font-family: 'Poppins';
    text-decoration: none!important;
    font-family: 'Alterwavebold';
    font-family: 'Alterwave';
    font-family: 'Alterwavelight';
}
@font-face {
    font-family: 'Alterwave';
    font-style: normal;
    font-weight: normal;
    src: url('../font/Alterwave/OTF/Alterwave-Regular.otf');
}
@font-face {
    font-family: 'Alterwavebold';
    font-style: normal;
    font-weight: normal;
    src: url('../font/Alterwave/OTF/Alterwave-Bold.otf');
}
@font-face {
    font-family: 'Alterwavelight';
    font-style: normal;
    font-weight: normal;
    src: url('../font/Alterwave/TTF/Alterwave-Light.ttf');
}
@font-face {
    font-family: 'Eightone';
    font-style: normal;
    font-weight: normal;
    src: url('../font/eight_one/Eight\ One.ttf');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: normal;
    src: url('../font/Poppins-X-Free/neuropolxfree.ttf');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: normal;
    src: url('../font/Poppins/Poppins-Regular.ttf');
}

/* Style généraux */
.neonStyle {
    color: #fff;
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px var(--main-astral-green),
      0 0 82px var(--main-astral-green),
      0 0 92px var(--main-astral-green),
      0 0 102px var(--main-astral-green),
      0 0 151px var(--main-astral-green);
    /* font-size: 6.2rem; */
    animation: pulsate 1.5s infinite alternate;  
    border: 0.2rem solid #fff;
    border-radius: 0.2rem;
    padding: 0.4em;
    box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem var(--main-astral-green),
              0 0 0.8rem var(--main-astral-green),
              0 0 2.8rem var(--main-astral-green),
              inset 0 0 1.3rem var(--main-astral-green); 
}

.flex {
    display: flex;
}
/* Correction theme.css */
.btn-primary.focus, .btn-primary:focus, .btn-primary:hover,
.btn-primary{
    background-color: transparent;
    color: var(--main-astral-purple);
}
.btn-primary.focus, .btn-primary:focus, .btn-primary:hover, .btn-primary{
    border-color: unset;
}
.alert-warning {
    background-color: rgb(255 255 255);
    border-color: #00102B;
    color: #00102B;
}
.products-sort-order .select-list:hover,
.btn-tertiary:hover{
    background-color: var(--main-astral-purple);
    color: var(--main-astral-white);
    box-shadow: none;
}
.custom-radio input[type=radio]:checked+span{
    background-color: var(--main-astral-purple);
}
.block-promo .cart-summary-line .label, .block-promo .promo-name,
a{
    color: var(--main-astral-purple);
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.btn-primary.dropdown-toggle.focus, .open>.btn-primary.dropdown-toggle:focus, .open>.btn-primary.dropdown-toggle:hover,
.btn-primary.active, .btn-primary:active, .open>.btn-primary.dropdown-toggle{
    background-color: var(--main-astral-green);
}
/* .page-content.page-cms ul, p{
    color: unset;
} */
/* Loader */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #8080809c;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loaderrob-container {
    position: relative;
}
.circl-container {
    width: 26%;
    height: 100%;
}
.loaderrob-container {
    width: 14%;
}
.loaderrob {
    width: 100%;
    height: auto;
}
.loader .circl {
    height: 5.5vh;
    z-index: 200;
    border: 17px solid #f3f3f3;
    border-top: 17px solid #2c5672;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    animation: spin 2s linear infinite;
    background-color: transparent;
}
.loader .circle{
    width: 100%;
    height: 18.37%;
    text-align: -webkit-center;
    position: absolute;
    top: 52%;
    transform: translate(0.5%, -2%);
}
.loader.hidden {
  display: none;
}
#wrapper {
    width: 100%;
    background: none;
}
#divso {
    position: relative;
    top: 45%;
    left: 50%;
    text-align: center;
    width: auto;
    animation: flt 2s infinite ease-in-out;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes flt {
    0%,
    100% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, -44%);
    }
}
@keyframes flotter {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0);
    }
}

#wrapper #screen {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
}

#vso {
    width: 65%;
    height: auto;
    position: relative;
    top: 0;
    transform: scaleX(-1);
}
.lightF{
    font-family: 'Alterwavelight';
}

#divbtn {
    position: absolute;
    text-align: center;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);    
    color: #fff;
    text-shadow:
      0 0 3px #fff,
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 21px var(--main-astral-green),
      0 0 41px var(--main-astral-green),
      0 0 46px var(--main-astral-green),
      0 0 51px var(--main-astral-green),
      0 0 75px var(--main-astral-green);
    border: 0.2rem solid #fff;
    border-radius: 0.2rem;
    padding: 0.4em;
    box-shadow: 0 0 .1rem #fff,
              0 0 .1rem #fff,
              0 0 1rem var(--main-astral-green),
              0 0 0.4rem var(--main-astral-green),
              0 0 1.4rem var(--main-astral-green),
              inset 0 0 1.3rem var(--main-astral-green); 
    animation: all 0.3s ease-in-out;
}
/* #divbtn {
    position: absolute;
    text-align: center;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);    
    color: #fff;
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #000,
      0 0 82px #000,
      0 0 92px #000,
      0 0 102px #000,
      0 0 151px #000;
    animation: pulsate 1.5s infinite alternate;  
    border: 0.2rem solid #fff;
    border-radius: 0.2rem;
    padding: 0.4em;
    box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem #000,
              0 0 0.8rem #000,
              0 0 2.8rem #000,
              inset 0 0 1.3rem #000; 
    animation: 0.3 ease-in-out;
} */
#divbtn,
#divbtn p{
    font-size: 2.5rem;
    line-height: 2.5rem;
}

#divbtn:hover {
    color: #fff;
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px var(--main-astral-green),
      0 0 82px var(--main-astral-green),
      0 0 92px var(--main-astral-green),
      0 0 102px var(--main-astral-green),
      0 0 151px var(--main-astral-green);
    animation: pulsate 1.5s infinite alternate;  
    border: 0.2rem solid #fff;
    border-radius: 0.2rem;
    padding: 0.4em;
    box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem var(--main-astral-green),
              0 0 0.8rem var(--main-astral-green),
              0 0 2.8rem var(--main-astral-green),
              inset 0 0 1.3rem var(--main-astral-green); 
}

#btnland {
    width: 35%;
}
#video-background {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
}
#module-mw_accordeoncategories-catalogue .container {
    background-color: #fff0;
    margin: none;
    width: 100%;
}
#footer {
    background: #fff;
}


/* Ancre Toutes les pages */
#header{
    position: sticky;
    top: 0;
}
#header>.header-top {
    padding: 0;
}

.block-social .instagram{
    background: url('../img/picto/instagram.svg')no-repeat;
    background-size: contain;
    margin: 0;
}
.block-social .facebook{
    background: url('../img/picto/fb.svg')no-repeat;
    background-size: contain;
    margin: 0;
}
.block-social li{
    margin: 0;
}
.block-social li:hover{
    background-color: transparent;
    filter: invert(56%) sepia(68%) saturate(2837%) hue-rotate(70deg) brightness(107%) contrast(87%);
}

a:hover{
    color: unset;
}


/* Storytelling */
.swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-align: center;
    /* Ajustez la taille de police selon vos besoins */
}

#blocstory {
    /* height: 94.414%; */
    margin: auto;
    background: url('../img/background/fondCMS.png');
    background-size: cover;
    z-index: -2;
}
#blocstory::before{
    content: "";
    background: url('../img/storytelling/nebuleuse.png');
    position: absolute;
    top: 70px;
    right: 0;
    bottom: 0px;
    left: -13%;
    opacity: 0.8;
    z-index: 0;
}


.fltme {
    animation-name: flotter;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.centerer{
    text-align: center;
}
.astralTitle{
    color: var(--main-astral-white);
}

/* Barre de défilement verticale */

::-webkit-scrollbar {
    width: 12px;
    /* Largeur de la barre de défilement */
}


/* Flèche haut */

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: none;
}


/* Piste */

::-webkit-scrollbar-track {
    background-color: #ffffff;
    /* Couleur de fond de la piste */
}


/* Poignée (thumb) de la barre de défilement */

::-webkit-scrollbar-thumb {
    background-color: rgb(154, 154, 154);
    /* Couleur de la poignée */
    border-radius: 6px;
    /* Coins arrondis de la poignée */
}


/* Flèches haut/bas au survol */

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
    /* Couleur de la poignée au survol */
}
#footer {
    padding-top: 0;
}

#footer>.container {
    display: none;
}

.footer-container {
    margin: 0;
    padding: 0;
    background-color: var(--main-astral-white);
}

.footer-container>.container ul {
    display: flex;
    justify-content: space-around;
    margin-top: 0.7rem;
}
.footer-container>.container{
    position: relative;
    width: 100%;
}
.footer-container .collab{
    position: absolute;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.footer-container .collab img{
    height: auto;
}
.footer-container .collab a{
    display: contents;
}
.footer-container>.container>.row:first-child{
    padding: 0.6rem 0 0.6rem 0;
}
.footer-container>.container>.row:first-child ul li,
.footer-container>.container>.row:first-child ul{
    margin: 0;
    z-index: 40;
}
.footer-container li a:hover{
    color: var(--main-astral-purple);
}
/* mobile */

@media(max-width:600px) {
    #video-background {
        display: none!important;
    }
}


/* Page Index */

#index {
    height: 100%;
    display: flex;
}

#index #wrapper a {
    width: 33.3%;
    transition: 0.3s ease-in-out;
}
#index main{
    width: 100%;
    overflow: hidden;
}
#index #wrapper, #index #content-wrapper{
    padding: 0;
}
#index .container{
    width: 100%;
    height: 100%;
    padding: 0;
}
body>.user-info {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.clmtitle {
    color: white;
    font-weight: bolder;
    font-size: 2.5rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.column {
    position: relative;
    overflow: hidden;
}

.column.expanded {
    flex-basis: 130%;
}

.column {
    /* width: 33.33%; */
    overflow: hidden;
    height: 100%;
    transition: 0.3s ease-in-out;
    display: flex;
    /* Ajout de cette ligne */
    align-items: center;
    /* Ajout de cette ligne */
    justify-content: center;
}

#index #wrapper a:hover {
    width: 60%;
}

#index #wrapper a:hover .clmtitle {
    font-size: 4rem;
    transition: font-size 0.6s ease-in-out;
}

#index .clm1 {
    background: url('../img/background/fondstoryclm.png');
    background-position: 80%;
    background-size: cover;
    height: 97vh;
}

#index #content-wrapper .clm2 {
    background: url('../img/background/fondcatclm.png');
    background-position: center;
    background-size: cover;
    width: 33.38%;
}

.clm3 {
    background: url('../img/background/fondventeclm.png');
    background-position: center;
    background-size: cover;
}


/* Ancre Page catalogue */
#module-mw_accordeoncategories-catalogue .titlCat{
    margin-left: 2em;
    color: var(--main-astral-white);
}
#module-mw_accordeoncategories-catalogue .titlCat h1{
    font-size: xxx-large;
}
#checkout,
#cart,
#module-mw_accordeoncategories-catalogue {
    background: url('../img/background/fondcat.png');
    background-attachment: fixed;
    background-size: cover;
}
#module-mw_accordeoncategories-catalogue #main {
    width: 100%;
}

#module-mw_accordeoncategories-catalogue #wrapper>.container{
    width: 70%;
    margin-left: 0;
    margin-right: auto;
}
.full_category[data-category-label="Alimentaires"] .featuresContainer,
.full_category[data-category-label="Graines"] .featuresContainer{
    padding-top: 2.5rem;
}
/* .accordion {
    max-width: 1200px;
} */

.accordion .category-heading .btnfilter,
.accordion .category-heading {
    cursor: pointer;
    margin: 10px;
    /* border: 1px solid #ccc; */
    /* background-color: #f9f9f9; */
}

.accordion .category-heading h2 {
    margin: 0;
}

.accordion .category-content .nbrArt {
    color: white;
    margin-left: 3.5%;
    font-size: 1.4rem;
}

.accordion .category-content .category-products {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; */
    margin-bottom: 1rem;
}

.accordion .category-products {
    margin: auto;
}

#module-mw_accordeoncategories-catalogue #products .product-miniature {
    margin: 0;
    margin-bottom: 1rem;
    flex-direction: column;
}

.category-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    /* Durée et type de transition */
}

.category-content-open {
    max-height: 1000px;
    /* Hauteur maximale ouverte (ajustez selon vos besoins) */
}

/* #module-mw_accordeoncategories-catalogue #wrapper { */
    /* padding-top: 8vh; */
/* } */

.dropdownsort {
    background-color: white;
    max-height: 0;
    transition: 0.3s ease;
    visibility: hidden;
}

#module-mw_accordeoncategories-catalogue header .header-top {
    position: sticky;
  top: 0;
  z-index: 1000;
}

.header-top .rowindex {
    justify-content: space-between;
    align-items: center;
    margin-left: 1rem;
    margin-right: 1rem;
}

#module-mw_accordeoncategories-catalogue #header .header-top {
    padding-bottom: 0;
}

#module-mw_accordeoncategories-catalogue #header .header-nav {
    display: none;
}

#module-mw_accordeoncategories-catalogue .accordion .category-heading i {
    transition: 0.3s ease;
    font-size: 2.5rem;
    font-weight: bolder;
    transform: rotateZ(180deg);
    color: white;
    vertical-align: text-bottom;
}

#module-mw_accordeoncategories-catalogue .accordion .category-heading .flex {
    align-items: baseline;
    flex-wrap: wrap;
}

#module-mw_accordeoncategories-catalogue .accordion .category-heading .divfiltre {
    margin-left: 1rem;
}

#module-mw_accordeoncategories-catalogue .accordion .category-heading h2,
#module-mw_accordeoncategories-catalogue .accordion .category-heading .divfiltre {
    font-size: 2rem;
    color: white;
    font-weight: bolder;
    line-height: 1;
}

#search_filters .clmArom p {
    text-align: center;
}

#search_filters .clmArom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    width: 100%;
}

#search_filters .clmArom .collapse {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.nomfeatur,
.nomfeatur * {
    opacity: 0;
    max-height: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.2s ease, max-width 0.2s ease;
}

#search_filters .clmArom a:hover .nomfeatur,
#search_filters .clmArom a:hover .nomfeatur * {
    opacity: 1;
    max-height: 2rem;
    max-width: 500px;
    margin-bottom: 0;
}
#search_filters .clmArom a:hover .nomfeatur>p{
    margin-left: 0.5rem;
}

#search_filters .nomfeatur.activfi *,
#search_filters .nomfeatur.activfi {
    opacity: 1;
    max-width: max-content;
    max-height: 1rem;
    /* margin-right: 0.3rem; */
}

/* #search_filters .nomfeatur.activfi p { */
    /* margin-right: 0; */
/* } */

.facet  .emojfeatur { 
    font-size: 1.5rem;
} 
.thumbnail-container  .emojfeatur { 
    text-align: left;
} 
#search_filters .facet .facet-title, #search_filters_brands .facet .facet-title, #search_filters_suppliers .facet .facet-title,
#search_filters p {
    margin-bottom: 0.3rem;
    color: var(--main-astral-white);
    font-size: 1.2rem;
    width: 100%;
}

#search_filters .facet-label:hover p{
    color: var(--main-astral-z);
}

.labelselect {
    background-color: var(--main-astral-z);
    border-radius: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.clmArom .labelfiltr {
    /* min-width: 14.28%; */
    flex-basis: 14.28%;
    text-align: center;
    min-height: 2rem;
}

.rotat {
    transition: 0.3s ease;
    transform: rotateZ(0deg)!important;
}

#module-mw_accordeoncategories-catalogue .accordion .category-heading .btnfilter {
    background-color: rgba(255, 255, 255, 0);
    border-radius: 2rem;
    color: white;
    outline: none;
    vertical-align: middle;
    font-family: 'Eightone';
    border: white solid 1px;
    width: 30px;
    text-align: center;
    padding-bottom: 0;
}


.accordion .full_category:last-child {
    margin-bottom: 3rem;
}

.accordion .btnProduct .qtyCart {
    color: var(--main-astral-blue);
    align-self: center;
    font-family: 'Poppins';
    font-weight: bold;
}
#cart .qtyCart,
#module-mw_accordeoncategories-catalogue .qtyCart{
    width: 3rem;
}
.accordion .modalopen {
    position: absolute;
    top: 0.45rem;
    right: 1.2rem;
    font-size: 3rem;
    color: var(--main-astral-purple);
    z-index: 100;
}
.modal-body{
   padding: 37px;
   padding-top: 0;

}
#module-mw_accordeoncategories-catalogue .sortBy{
    float: right;
    width: auto;
    margin-right: 8%;
    border: solid 1px white;
}
#module-mw_accordeoncategories-catalogue .sortBy .sort-by-row .products-sort-order .select-title{
    background-color: #ffffff00;
    color: white;
    font-family: 'Poppins';
}

/* Filtres catalogue */
#search_filters .facet .facet-label a{
    width: 100%;
}

#_desktop_search_filters_clear_all {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
}

#_desktop_search_filters_clear_all button {
    background-color: #f7f7f700;
    color: var(--main-astral-white);
    text-transform: none;
}

#search_filters {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background-color: #2a1d37b0;
    color: var(--main-astral-white);
    position: relative;
}
#search_filters .facet, #search_filters_brands .facet, #search_filters_suppliers .facet{
    margin-right: auto;
    margin-left: auto;
    color: white;
    display: block;
}
#search_filters_wrapper {
    width: 100%;
    position: relative;
}

#search_filters .Gourmand,
#search_filters .Odorantes {
    display: none;
    transition: up 0.3s ease;
}

.btnfilter {
    margin-left: 1rem;
}

.divfiltre {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    /* Ajoutez une transition pour l'opacity et le max-height */
}

.show-divfiltre {
    opacity: 1;
    /* Rend l'élément visible */
    max-height: 200px;
    /* Vous pouvez remplacer 200px par une valeur appropriée */
}

.searchfilters {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease;
}

.accordion-wrapper {
    transition: max-height 0.3s ease;
    max-height: auto!important;
}


/* Produits catalogue */

#module-mw_accordeoncategories-catalogue .product-miniature .thumbnail-container {
    overflow: hidden;
    margin: auto;
    background: rgba(0, 0, 0, 0.55);
    border-right: solid 2px #e4dacc;
    border-left: solid 2px #e4dacc;
    width: 257px;
    height: 318px;
}

#module-mw_accordeoncategories-catalogue .product-description .product-title {
    margin: 0;
    padding: 0.8rem;
    padding-bottom: 0.3rem;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#module-mw_accordeoncategories-catalogue .product-description .product-title a{
    font-size: 1.4rem;
}
#module-mw_accordeoncategories-catalogue .product-description {
    z-index: 11;
    position: relative;
    top: 0;
    /* box-shadow: 0 5px 10px -5px rgb(149 141 141 / 46%); */
    background: none;
}
.product-description *{
    color: var(--main-astral-white)!important;
    font-family: 'Alterwavelight';
    font-weight: 700!important;
}
.thumnail-top img{
    width: 160px;
    height: initial;
    transform: translateX(-12%);
}
/* .product-line-grid-right .qtyblocksup { */
    /* padding-left: 1rem!important; */
/* } */

/* #module-mw_accordeoncategories-catalogue .cart-summary-line .value,
#module-mw_accordeoncategories-catalogue .cart-summary-line * {
    color: white;
} */


#module-mw_accordeoncategories-catalogue .cart-summary{
    color: var(--main-astral-purple);
    background-color: white;
}
#module-mw_accordeoncategories-catalogue .cart-summary .cart-detailed-totals .card-block:first-child{
    background-color: var(--main-astral-purple);
    margin-bottom: 0;
}

#module-mw_accordeoncategories-catalogue .product-miniature .thumbnail-container .highlighted-informations {
    height: calc(100% - 32px);
    bottom: -16rem;
    background: rgb(255 255 255 / 70%);
    z-index: 10;
    padding: 0.3rem;
    overflow: auto;
}
.featuresContainer{
    padding: 0.6rem 5px 0px 5px;
}
.featuresContainer .flex{
    justify-content: space-between;
}
.featuresContainer p{
    color: var(--main-astral-purple);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.featuresContainer .flex p:first-child{
    text-align: left;
}

#module-mw_accordeoncategories-catalogue .product-miniature .thumbnail-container .highlighted-informations .testIcon {
    vertical-align: -webkit-baseline-middle;
}

#products .thumbnail-container:focus .highlighted-informations.no-variants,
#products .thumbnail-container:hover .highlighted-informations.no-variants,
.featured-products .thumbnail-container:focus .highlighted-informations.no-variants,
.featured-products .thumbnail-container:hover .highlighted-informations.no-variants,
.product-accessories .thumbnail-container:focus .highlighted-informations.no-variants,
.product-accessories .thumbnail-container:hover .highlighted-informations.no-variants,
.product-miniature .thumbnail-container:focus .highlighted-informations.no-variants,
.product-miniature .thumbnail-container:hover .highlighted-informations.no-variants {
    bottom: 32px;
    padding-top: 0;
    top: unset;
}


.btnProduct-container{
    background-color: var(--main-astral-white);
    margin-bottom: 0.2rem;
}
.btnProduct-container::before {
    content: "";
    background: url('../img/background/topodark.svg');
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 23px;
    left: 0px;
    opacity: 0.2;
}
.ptsproduct {
    text-align: center;
    background-color: none;
    line-height: normal;
    color: var(--main-astral-white);
}

.listProducts .btnProduct {
    position: relative;
    display: flex;
    width: 60%;
    margin: auto;
    justify-content: space-between;
    align-items: center;
}

.listProducts .btnProduct .btn-primary {
    background-color: #ffffff00;
    box-shadow: none;
    padding: 0 10px;
    font-size: x-large;
    color: var(--main-astral-purple);
    font-family: 'Eightone';
}

#module-mw_accordeoncategories-catalogue .accordion .category-products .product {
    margin-bottom: 1rem;
    margin-top: 1rem;
}

#module-mw_accordeoncategories-catalogue .accordion .product-flags li {
    left: 0.3rem!important;
}

#module-mw_accordeoncategories-catalogue .listProducts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: auto;
    width: 90%;
    margin-top: 1rem;
}

.imgproduct img {
    z-index: 2;
    position: relative;
    margin-left: 0!important;
    margin: auto;
    width: 100%;
    object-fit: none;
    height: 195px;
    
}
#module-mw_accordeoncategories-catalogue .product-description hr{
    margin: 0;
    border-bottom: var(--main-astral-white) solid 1px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.featuresProduct {
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: var(--main-astral-purple);
    align-items: flex-start;
    text-align: left;
}

.packFeatures {
    text-align: end;
    max-width: 60%;
    min-width: 35%;
}


/* Panier Catalogue */


.product-line-grid.verpasdebase{
    justify-content: space-between;
    margin-left:2%;
}
.product-line-grid .product-line-actions{
    justify-content: space-between;
    width: 68%;
}
.product-line-grid .product-line-actions>div{
    width: auto;
}
.product-line-grid .product-line-actions .qtyCart{width:2rem;}
#module-mw_accordeoncategories-catalogue .cart-voucher p{
    display: none;
}
 /* Ancre Cadre */
.cadreTop{
    transform: translateY(17%);
    width: 100%;
}
.cadreContainer img{
    width:264px;
    margin-left:0!important;
    z-index: 100000;

}
.cadreBottom{
    width:100%;
    transform: rotateZ(180deg) translateY(25%);

}
.cadreContainer{
    text-align: center;
}
#module-mw_accordeoncategories-catalogue .productssumary{
    margin-right: 8%;
    justify-content: space-between;
    width: 61%;
}
/* Ancre Panier commun */

.product-line-grid-right .price div {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 110%;
}
#module-mw_accordeoncategories-catalogue .product-line-grid-right .nbrPts{
    color: var(--main-astral-z);
}
.cart-item .testqty {
    display: flex;
    align-items: center;
    padding: 0;
    margin: auto;
    text-align: center;

}

.cart-item .product-line-grid-right .text-xs-right {
    text-align: center!important;
}

.productssumary {
    padding: 0;
    justify-content: space-between;
    width: 65%;
    margin-right: 4%;
}

.productssumary div {
    text-align: center;
}

.qtyblocksup {
    justify-content: inherit!important;
}

#cart .qtyblocksup {
    padding-left: 5.5%!important;
}

#cart .productLineHeader,
#module-mw_accordeoncategories-catalogue .productLineHeader {
    text-align: center;
    justify-content: space-between;
    margin-left: 5%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
#cart .cart-item .product-line-grid-body,
#module-mw_accordeoncategories-catalogue .cart-item .product-line-grid-body{
    width : 27%;
}


/* Ancre Panier Page Catalogue */

.decoCart img {
    width: 100%;
}
.containerCart{
    position: absolute;
    bottom: 10%;
}
.barprogress-container{
    background-color: var(--main-astral-purple);
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 96%;
    margin: auto;
    border: solid 2px var(--main-astral-green);
}
.barprogress {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.progress-container {
    height: 30px;
    margin-bottom: 1rem;
    padding: 3px;
    border-radius: 15px;
    border: solid 3px white;
}



.level-indicator {
    color: white;
    margin-top: 1rem;
}


@keyframes pulsate {
    
100% {

    text-shadow:
    0 0 4px #fff,
    0 0 11px #fff,
    0 0 19px #fff,
    0 0 40px var(--main-astral-green),
    0 0 80px var(--main-astral-green),
    0 0 90px var(--main-astral-green),
    0 0 100px var(--main-astral-green),
    0 0 150px var(--main-astral-green);

}

0% {

    text-shadow:
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 6px #fff,
    0 0 10px var(--main-astral-green),
    0 0 45px var(--main-astral-green),
    0 0 55px var(--main-astral-green),
    0 0 70px var(--main-astral-green),
    0 0 80px var(--main-astral-green);

    }
}

#module-mw_accordeoncategories-catalogue #mwcc-mini-cart #cart-subtotal-shipping .value,
.cart-summary .cart-detailed-totals #cart-subtotal-discount .value{
    color: var(--main-astral-green)!important;
}
#module-mw_accordeoncategories-catalogue .cart-summary .cart-detailed-totals .card-block:first-child *{
    color: #e4dacc;
}
#module-mw_accordeoncategories-catalogue .cart-summary-line.cart-total .value,
#module-mw_accordeoncategories-catalogue .cart-summary-line.cart-total .label{
    text-transform: uppercase;
    font-size: 1.3rem;
    font-weight: 600;
}
#module-mw_accordeoncategories-catalogue #containerCart .no-items{
    text-align: center;
    margin: 1rem;
}
#module-mw_accordeoncategories-catalogue .caillou{
    position: fixed;
    bottom: 0;
    z-index: -1;
    width: 28%;
}
#module-mw_accordeoncategories-catalogue .rockL{
    left: 0;
}
#module-mw_accordeoncategories-catalogue .rockR{
    right: 0;
    bottom: -18px;
}
/* Ancre Page panier */

#cart .cart-item .current-price {
    text-align: center;
}

#cart .cart-item .add-button-container button,
#cart .cart-item .remove-button-container button {
    background-color: transparent;
    color: rgb(0, 0, 0);
    box-shadow: none;
}
.add-button-container.neonStyle{
    padding: 0;
}

#cart #wrapper .cart-container .cart-overview>a,
#cart #wrapper .cart-container #toggleCartButton {
    display: none;
}

#cart #toggleCartButton {
    display: none;
}

.points-to-next-level {
    color: white;
}

#cart .cart-container .containerCart{
    display: none;
}

#cart .card.cart-summary .cart-voucher *,
#cart .cart-container .cart-items *{
    color: var(--main-astral-purple);
    align-items: center;
}
#cart .card.cart-summary .cart-voucher button{
    background-color: var(--main-astral-purple);
}
#cart .card.cart-summary .cart-voucher .promo-code .btn-primary span{
    color: var(--main-astral-white);
}
#cart .card{
    background-color: unset;
    border: none;
    box-shadow: none;
}
#cart .cart-grid-body>.cart-container>.card-block{
    background: none;
}
#cart .cart-grid-body>a.label,
#cart .cart-grid-body .nbrPts,
#cart .cart-grid-body>.cart-container>.card-block h1{
    color: var(--main-astral-white);
}
#block-reassurance,
#cart .card.cart-summary,
#cart .cart-container .cart-overview{
    background-color: #ffffffa3;
    padding:0;
}
#cart .cart-container .productLineHeader{
    margin: 0;
    padding: 1rem;
    background-color: var(--main-astral-purple);
    color: var(--main-astral-z);
}
#cart .cart-overview .cart-summary{
    display: none;
}

#cart .checkout a,
#cart .checkout,
#cart button{
    margin-top: 0px;
    font-family: 'Poppins';
}
#cart .checkout a{
    font-family: 'Poppins';
    padding: 1rem 3rem;
    color: var(--main-astral-white);
}

#cart .cart-total .label,
#cart .cart-total .value{
    font-weight: 600;
    text-transform: uppercase;
}
#block-reassurance li{
    border: none;
    color: var(--main-astral-blue);
}
#cart .cartImg {
    position: absolute;
    width: 13%;
    left: -10%; 
}


/* Ancre Page compte client */

#my-account .page-header h1{
    margin-top: 2rem;
}
#my-account .header-nav {
    display: none;
}

#my-account #wrapper {
    height: 100vh;
}

#my-account #wrapper>.container {
    width: 100%;
    padding: 0;
}

#my-account .hexa {
    position: relative;
}

#my-account #content .hexa a {
    width: 100%;
    padding: 0;
    margin: 0;
}

#my-account .hexa svg {
    position: relative;
    width: 100%;
    transition: 0.35s;
    height: auto;
}

#my-account .hexa img {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 38%;
    height: 27%;
    max-height: 120px;
}

#my-account .hexa span {
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

#my-account .hex-wrap {
    width: 100%;
    position: relative;
    height: auto;
    display: flex;
    justify-content: center;
    margin: 6rem 0;
}

#my-account #adresscustomers {
    transform: translate(62.3%, -0.5%) scale(0.85);
}

#my-account #historycustomers {
    transform: translate(-27.5%, 37.3%) scale(0.85);
}

#my-account #creditscustomers {
    transform: translate(-62.9%, 0%) scale(0.85);
}

#my-account #infoscustomers .hexa img{
    width: 40%;
    height: 37%;
    max-height: none;
}   

#my-account #psgdprcustomers {
    transform: translate(27.7%, -37.8%) scale(0.85);
}

#my-account #testcustomers {
    position: absolute;
    top: 75.5%;
    right: 18.8%;
}

#my-account #acustomers {
    position: absolute;
}

#my-account #acustomers img {
    width: 100px;
}

#my-account #feuillecustomers {
    transform: translate(60%, 32%);
}

#my-account #bookcustomers {
    transform: translate(0%, -35%);
}
.hex-wrap a:hover svg g path{
    transition: all 0.1s ease-in-out;
}
.hex-wrap a:hover span{
    color: #3BC411;
}
.hex-wrap a:hover img{
    filter: invert(55%) sepia(13%) saturate(7500%) hue-rotate(71deg) brightness(108%) contrast(87%);
}
.hex-wrap a:hover svg g path:first-child {
    fill: var(--main-astral-green);
}
.hex-wrap a:hover svg g:last-child path{
    fill: var(--main-astral-purple);
}


#my-account {
    overflow: hidden;
}
#my-account .page-footer .neonStyle{
    width: fit-content;
    margin: auto;
    bottom: 10%;
    position: relative;
    font-size: 2rem;
}
#my-account .page-footer .neonStyle a{
    color: var(--main-astral-white);
    padding: 1rem 2rem;
    font-family: 'Poppins';
}
@media only screen and (max-width: 1200px) {
    #my-account .hex-wrap{
        flex-direction: column;
            position: relative;
        height: 67vh;
        display: initial;
    }
    #my-account .hex-wrap>div{
        width: 20%;
    }
    #my-account .hex-wrap>div {
        /* transform: translate(-50%, -50%) scale(0.6)!important; */
    }
    #my-account #adresscustomers {
        transform: translate(91.7%, 28.2%) scale(0.85);
    }
    #my-account #psgdprcustomers {
        transform: translate(26.7%, -35.4%) scale(0.85);
    }
    #my-account .hexa img {
        top: 15%;
        width: 38%;
    }
    #my-account #creditscustomers {
        transform: translate(27.3%, -262%) scale(0.85);
    }
    #my-account #infoscustomers {
        transform: translate(23%, -215%);
    }
    #my-account #historycustomers {
        transform: translate(92.5%, -198.8%) scale(0.85);

        /* translate: translate(19.5%, -43.8%) scale(0.85); */
    }
}


/* Ancre page contact */

#contact #wrapper {
    padding: 0;
    margin: 0;
}

#contact #wrapper>.container {
    width: 100%;
    height: 100%;
    padding: 0;
}

#contact section,
#contact #content-wrapper {
    width: 100%;
    height: 100%;
    background: url('../img/background/fondventeclm.png');
    background-size: cover;
    padding: 0;
    overflow: hidden;
}

#contact #contactpdv {
    width: 99%;
    height: 60%;
    margin: auto;
    display: flex;
    justify-content: space-around;
}

#contact #content * {
    color: white;
}

#contact .contactclm h2 {
    font-weight: bolder;
}

#contact .contactclm {
    height: 100%;
    background-color: rgb(44 88 101 / 79%);
    width: 32%;
    text-align: center;
    color: #fff;
    display: grid;
    padding: 2rem;
    align-content: space-between;
}

#contact .contactclm img {
    height: 30vh;
}

#contact h1 {
    text-align: center;
    color: #fff;
    font-size: 1.6rem;
    margin-top: 1rem;
    text-transform: uppercase;
}

#contact .contactclm .separat {
    height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#contact .contactclm .separat>div * {
    font-size: 1.7rem;
    line-height: 1.7rem;
}

#contact #contactmail {
    bottom: 10%;
    text-align: center;
    background-color: rgb(44, 88, 101);
    color: white;
    position: absolute;
    width: 100%;
    padding: 1rem;
    font-size: xx-large;
}

#contact .shopContainer{
    width: 100%;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-30%);
}
#contact .shopContainer div{
    height: auto;
    position: relative;
}
#contact .shopContainer img{
    width: 100%;
    height: auto;
}
#contact .shopContainer div a{
    width: 49%;
    height: 84%;
    position: absolute;
    top: 8%;
    left: 25%;
    right: 0;
}   
#contact #content{
    background: unset;
}
#contact #content{
    height: 100%;
    .shopContainer div:nth-child(1){
        transform: translate(108.5%, -50%) scale(0.75);
        z-index: 10;
    }
    .shopContainer div:nth-child(2){
        transform: translate(9%, 79%) scale(0.75);
        z-index: 10;
    }
    .shopContainer div:nth-child(3){
        transform: translate(-14.7%, 14%) scale(1.5);
    }
    .shopContainer div:nth-child(4){
        transform: translate(-0%, -50%) scale(1.5);
    }
    .shopContainer div:nth-child(5){
        transform: translate(-176.7%, -114%) scale(0.75);
        z-index: 10;
    }
    .shopContainer div:nth-child(6){
        transform: translate(-85%, 14%) scale(1.5);
    }
    .shopContainer div:nth-child(7){
        transform: translate(-108%, -50%) scale(0.75);
        z-index: 10;
    }
}
@media (max-width:700px), (orientation:portrait) and (min-height:800px){
    #contact .shopContainer{
        flex-direction: column;
        height: 100%;
        width: 100%;
        top: 0;
        transform: translate(-50%, 2%);
        align-items: center;
        justify-content: center;
        left: 50%;
    }
    #contact .shopContainer div {
        width: 33%;
        height: auto;
    } 
    #contact .shopContainer img{
        width: 100%;
        height: auto;
    }
    #contact .shopContainer div a{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0%;
        left: 0%;
        right: 0;
    }  
    #contact #content{
        .shopContainer div:nth-child(1){
            transform: translate(77%, 366%) scale(0.75);
            z-index: 10;
        }
        .shopContainer div:nth-child(2){
            transform: translate(-95%, 167%) scale(0.75);
            z-index: 10;
        }
        .shopContainer div:nth-child(3){
            transform: translate(-0%, 100%) scale(1.5);
        }
        .shopContainer div:nth-child(4){
            transform: translate(-0%, -131%) scale(1.5);
        }
        .shopContainer div:nth-child(5){
            transform: translate(77%, -295%) scale(0.75);
            z-index: 10;
        }
        .shopContainer div:nth-child(6){
            transform: translate(0%, -69%) scale(1.5);
        }
        .shopContainer div:nth-child(7){
            transform: translate(78.5%, -106%) scale(0.75);
            z-index: 10;
        }
    }
    .featuresContainer p{
        color: var(--main-astral-white);
    }
}
@media (max-width:1300px) and (min-height:800px) and (orientation:paysage) {
    #contact .shopContainer{
        width: 146%;
        left: 50%;
        transform: translate(-50%,-8%);
    }

}

@media (min-height:800px) and (max-width:400px){
    #contact .shopContainer{
        width: 100%;
        transform: translate(-50%,3%);
    }
    #contact .shopContainer div{
        width: 37%;
    }
}

@media (orientation:portrait) and (min-height:800px){
    #contact .shopContainer div{
        width: 37%;        
    }
}


/* Page de redirection */

#planet {
    position: absolute;
    width: 191%;
    top: -72%;
    left: 72%;
}

.planetmovible {
    animation: planet 20s linear;
}

@keyframes planet {
    0% {
        left: 72%;
        /* Commencez et terminez avec une opacité de 1 */
    }
    100% {
        left: -163%;
        /* À mi-chemin, l'opacité est légèrement réduite pour simuler un clignotement */
    }
}


/* Page Storytelling */

.header-top>.container {
    width: 100%;
}

#blocstory #lightbase {
    width: 19%;
    position: absolute;
    top: 29%;
    left: 44.5%;
    animation: lightbase 1.5s infinite;
}

#blocstory #lightvso {
    width: 37%;
    position: absolute;
    bottom: 42%;
    left: 12.5%; 
    animation: lightbase 1.5s infinite;
}

@keyframes lightbase {
    0%,
    100% {
        opacity: 1;
        /* Commencez et terminez avec une opacité de 1 */
    }
    50% {
        opacity: 0.5;
        /* À mi-chemin, l'opacité est légèrement réduite pour simuler un clignotement */
    }
}

.redPt {
    position: absolute;
    top: 70%;
    left: 56.5%;
    z-index: 50;
}

.led-box {
    position: absolute;
    top: 4%;
    left: 53.8%;
    z-index: 50;
    margin: 10px 0;
}

.led-box p {
    font-size: 12px;
    text-align: center;
    margin: 1em;
}

.led-red {
    width: 1px;
    height: 1px;
    background-color: #F00;
    border-radius: 50%;
    box-shadow: 0 0 15px 6px #ffffffa3, 0 0 100px 60px rgb(217 0 0 / 47%), 0 0 140px 90px #ff000040;
    animation: flicker 1.5s infinite;
}

@keyframes flicker {
    0%,
    100% {
        opacity: 1;
        /* Commencez et terminez avec une opacité de 1 */
    }
    50% {
        opacity: 0.2;
        /* À mi-chemin, l'opacité est légèrement réduite pour simuler un clignotement */
    }
}

.storyright {
    position: absolute;
    bottom: 0;

}

.storyright .containerBase {
    text-align: right;
}

.storyright img {
    width: 100%;
}

.storyctrright {
    position: absolute;
    top: 6%;
    right:-4%;
    width: 41%;
    z-index: -5;
    animation: voyage 120s linear;
}

@keyframes voyage {
    0%{
        transform: translateY(0%) translateX(0%)
    }
    100% {
        transform: translateY(0%) translateX(-250%)
    }
}
.storyctrright img{
    width: 33%;
}
#strpilot {
    position: absolute;
    left: -11%;
    bottom: 0%;
    width: 26%;
    animation: vygPilot 60s infinite;
    z-index: 10;
}

@keyframes vygPilot {
    0%,
    100% {
        transform: translateY(0%) translateX(50%);
    }
    50% {
        transform: translateY(-20%) translateX(50%);
    }
}

#strCayou {
    position: absolute;
    left: 0;
    top: -11%;
    width: 17%;
    animation: vygCayou 60s infinite;
}

@keyframes vygCayou {
    0%,
    100% {
        transform: translateX(0%);
    }
    50% {
        transform: translateX(110%);
    }
}

.strastr {
    width: 15%;
    position: absolute;
    bottom: 1%;
    right: 0%;
    animation: vygCayouTwo 20s infinite;
}
.astero3 {
    position: absolute;
    top: 10%;
    right: 0%;
    animation: vygCayouTwo 120s linear;
}

@keyframes vygCayouTwo {
    0%,
    100% {
        right: 0%;
    }
    50% {
        right: 20%;
    }
}

#testholo {
    position: absolute;
}

.holo {
    position: relative;
    z-index: 20000;
    width: 300px;
    height: 17px;
    margin: -5px auto 0;
    background-color: rgba(0, 252, 252, 0.35);
    border-radius: 100%;
    filter: blur(2.5px);
    transform: perspective(86px) rotateX(-30deg);
    transform-style: preserve-3d;
    -webkit-animation: holographic 2.5s infinite alternate;
    animation: holographic 2.5s infinite alternate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@-webkit-keyframes holographic {
    from {
        will-change: box-shadow;
        box-shadow: 0 -75px 5px rgba(0, 252, 252, 0.15), 0 -1px 2px rgba(0, 252, 252, 0.5), 0 -45px 5px rgba(0, 252, 252, 0.15), 0 -2px 3px rgba(0, 252, 252, 0.5), 0 -3px 4px rgba(0, 252, 252, 0.5), 0 -4px 6px rgba(0, 252, 252, 0.5), 0 -5px 10px rgba(0, 252, 252, 0.75), 0 -7px 20px rgba(0, 252, 252, 0.75), 0 -10px 30px rgba(0, 252, 252, 0.75), 0 -15px 40px rgba(0, 252, 252, 0.75), 0 -25px 50px rgba(0, 252, 252, 0.75), 0 -35px 60px rgba(0, 252, 252, 0.85), 0 -45px 70px rgba(0, 252, 252, 0.95), 0 -65px 80px #00fcfc, 0 -75px 90px #00fcfc;
    }
    to {
        will-change: unset;
        box-shadow: 0 -1px 5px rgba(0, 252, 252, 0.15), 0 -1px 2px rgba(0, 252, 252, 0.5), 0 -1px 5px rgba(0, 252, 252, 0.15), 0 -2px 3px rgba(0, 252, 252, 0.5), 0 -3px 4px rgba(0, 252, 252, 0.5), 0 -4px 6px rgba(0, 252, 252, 0.5), 0 -5px 7px rgba(0, 252, 252, 0.75), 0 -7px 10px rgba(0, 252, 252, 0.75), 0 -10px 15px rgba(0, 252, 252, 0.75), 0 -15px 20px rgba(0, 252, 252, 0.75), 0 -25px 25px rgba(0, 252, 252, 0.75), 0 -35px 30px rgba(0, 252, 252, 0.85), 0 -45px 35px rgba(0, 252, 252, 0.95), 0 -65px 40px #00fcfc, 0 -75px 50px #00fcfc;
    }
}

@keyframes holographic {
    from {
        will-change: box-shadow;
        box-shadow: 0 -75px 5px rgba(0, 252, 252, 0.15), 0 -1px 2px rgba(0, 252, 252, 0.5), 0 -45px 5px rgba(0, 252, 252, 0.15), 0 -2px 3px rgba(0, 252, 252, 0.5), 0 -3px 4px rgba(0, 252, 252, 0.5), 0 -4px 6px rgba(0, 252, 252, 0.5), 0 -5px 10px rgba(0, 252, 252, 0.75), 0 -7px 20px rgba(0, 252, 252, 0.75), 0 -10px 30px rgba(0, 252, 252, 0.75), 0 -15px 40px rgba(0, 252, 252, 0.75), 0 -25px 50px rgba(0, 252, 252, 0.75), 0 -35px 60px rgba(0, 252, 252, 0.85), 0 -45px 70px rgba(0, 252, 252, 0.95), 0 -65px 80px #00fcfc, 0 -75px 90px #00fcfc;
    }
    to {
        will-change: unset;
        box-shadow: 0 -1px 5px rgba(0, 252, 252, 0.15), 0 -1px 2px rgba(0, 252, 252, 0.5), 0 -1px 5px rgba(0, 252, 252, 0.15), 0 -2px 3px rgba(0, 252, 252, 0.5), 0 -3px 4px rgba(0, 252, 252, 0.5), 0 -4px 6px rgba(0, 252, 252, 0.5), 0 -5px 7px rgba(0, 252, 252, 0.75), 0 -7px 10px rgba(0, 252, 252, 0.75), 0 -10px 15px rgba(0, 252, 252, 0.75), 0 -15px 20px rgba(0, 252, 252, 0.75), 0 -25px 25px rgba(0, 252, 252, 0.75), 0 -35px 30px rgba(0, 252, 252, 0.85), 0 -45px 35px rgba(0, 252, 252, 0.95), 0 -65px 40px #00fcfc, 0 -75px 50px #00fcfc;
    }
}

#projecteur {
    width: 85%;
    height: 129vh;
    position: absolute;
    top: -34%;
    left: 33%;
    background: conic-gradient(at 50% 110%, rgb(255 255 248 / 77%) 0deg, rgb(0 0 0 / 0%) 25deg 335deg, rgb(255 255 248 / 77%) 360deg);
    transform: rotateZ(180deg);
}

.led-alarm {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(255, 0, 0);
    background: radial-gradient(circle, rgb(255 22 22 / 49%) 0%, rgba(255, 0, 0, 0) 100%);
    animation: flicker 4s infinite;
}

#strpnt {
    width: 40%;
    bottom: -1px;
    right: 5%;
    z-index: 10;
}

.imgquatre {
    width: 10%;
    position: absolute;
}

.lighton {
    animation: lighton 10s linear;
}

@keyframes lighton {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.swiper-slide[aria-label="3 / 8"]::before{
    content: "";
    background: url('../img/storytelling/slide03/math.svg');
    position: absolute;
    top: 0%;
    right: 0;
    bottom: 0;
    left: 0%;
    opacity: 0.4;
    z-index: 0;
}

.swiper-slide[aria-label="4 / 8"] .astre01 {
    position: absolute;
    width: 21%;
    bottom: 0%;
    left: 5%;
}
.astre01 img:first-child{
    position: unset;
    width: 100%;
    height: auto;
    
}
.swiper-slide[aria-label="4 / 8"]:before{
    content: "";
    background: url(../img/storytelling/slide04/anneaux.png) no-repeat;
    position: absolute;
    background-size: contain;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    opacity: 0.7;
}
.swiper-slide[aria-label="4 / 8"] .astre03 {
    position: absolute;
    top: 20%;
    left: 4%;
    z-index: 1;
    /* animation: slid4-2 30s infinite; */
    width: auto;
}
.astre03 img{
    width: 95%;
    height: auto;
    position: unset;
}
.astre02 {
    position: absolute;
    width: auto;
    height: auto;
    bottom: 1%;
    right: 28%;
    z-index: 1;
}
.astre02 img{
    position: unset;
    width: 100%;
    height: auto;
}
.swiper-slide:nth-child(4) {
    
    .imgquatre:nth-child(3) {
        top: 20%;
        left: 5%;
        z-index: 1;
        width: 10%;
        /* animation: slid4-3 30s infinite; */
    }
    .imgquatre:nth-child(4) {
        bottom: -3%;
        right: 5%;
        height: 85vh;
        width: auto;
        z-index: 10;
        /* animation: slid4-4 30s infinite; */
    }
    .imgquatre:nth-child(5) {
        top: 2%;
        right: 1%;
        animation-delay: 0.5s;
        width: 15%;
        z-index: 1;
        /* animation: slid4-5 30s infinite; */
    }
    
}

@keyframes slid4-2 {
    0%,
    100% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(10%);
    }
}

@keyframes slid4-3 {
    0%,
    100% {
        transform: translateX(0%);
    }
    50% {
        transform: translateX(24%);
    }
}

@keyframes slid4-4 {
    0%,
    100% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-5%);
    }
}

@keyframes slid4-5 {
    0%,
    100% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-13%);
    }
}

.swiper-slide[aria-label="5 / 8"]:before{
    content: "";
    background: url(../img/storytelling/slide05/fondchamp.png) no-repeat;
    position: absolute;
    background-size: contain;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}
.led-slid0 {
    position: absolute;
    bottom: -15%;
    left: 33%;
    width: 26%;
    height: 50%;
    background: radial-gradient(circle, #4eff02 -11%, rgba(153, 142, 30, 0) 68%);
    animation: breath 7s infinite;
    z-index: -1;
}
.led-slid00 {
    position: absolute;
    bottom: -16%;
    left: 28%;
    width: 19%;
    height: 50%;
    background: radial-gradient(circle, #4eff02  -11%, rgba(153, 142, 30, 0) 68%);
    animation: breath 7s infinite;
    animation-delay: 0.5s;
    z-index: -1;
}
.led-slid0-1 {
    position: absolute;
    bottom: 10%;
    right: 1.2%;
    width: 16%;
    height: 35%;
    background: radial-gradient(circle, rgba(253, 255, 169, 1) -11%, rgba(153, 142, 30, 0) 68%);
    animation: breath 7s infinite;
    z-index: -1;
}
.led-slid0-2 {
    position: absolute;
    bottom: 29%;
    left: 56%;
    width: 22%;
    height: 39%;
    background: radial-gradient(circle, rgba(253, 255, 169, 1) -11%, rgba(153, 142, 30, 0) 68%);
    animation: breath 7s infinite;
    z-index: -1;
}
.led-slid0-3 {
    position: absolute;
    bottom: 27%;
    left: 31%;
    width: 31%;
    height: 90%;
    background: radial-gradient(circle, rgba(253, 255, 169, 1) -11%, rgba(153, 142, 30, 0) 68%);
    animation: breath 2.7s infinite;
    z-index: -1;
}


.led-slid4-01 {
    position: absolute;
    top: 15%;
    left: 8%;
    width: 9%;
    height: 24%;
    background: radial-gradient(circle, rgba(174, 177, 12, 1) -11%, rgba(153, 142, 30, 0) 68%);
    animation: breath 4s infinite;
}

.led-slid4-02 {
    position: absolute;
    top: -14%;
    left: 27%;
    width: 27%;
    height: 51%;
    background: radial-gradient(circle, rgba(153, 142, 30, 1) -11%, rgba(153, 142, 30, 0) 68%);
}

.led-slid4-02 {
    position: absolute;
    top: -15%;
    left: 70%;
    width: 28%;
    height: 54%;
    background: radial-gradient(circle, rgba(46, 179, 130, 1) -11%, rgba(153, 142, 30, 0) 68%);
}

.astre01 .flashlight {
    position: absolute;
    top: -27%;
    right: -34%;
    width: 177%;
    height: 90%;
    z-index: -1;
}
.astre01 .led-astre01{
    position: absolute;
    bottom: 17%;
    left: 38%;
    width: 67%;
    height: 50%;
    background: radial-gradient(circle, rgba(46, 179, 130, 1) -11%, rgba(153, 142, 30, 0) 68%);
    z-index: -1;
    animation: breath 6s infinite;

}

.swiper-slide[aria-label="5 / 8"] img {
    height: 80%;
    position: absolute;
    bottom: -4px;
    right: 5%;
}

.led-slid5 {
    position: absolute;
    top: -7%;
    right: 14%;
    width: 99%;
    height: 72%;
    background: radial-gradient(circle, rgba(174, 177, 12, 1) -11%, rgba(153, 142, 30, 0) 68%);
    animation: blink 2.7s infinite;
}

.led-slid6 {
    position: absolute;
    top: 4%;
    left: 34%;
    width: 12%;
    height: 65%;
    background: radial-gradient(circle, rgba(46, 179, 130, 1) -11%, rgba(153, 142, 30, 0) 68%);
    animation: blink 6s infinite;
}
.led-slid6-1 {
    position: absolute;
    top: 1%;
    left: 40%;
    width: 15%;
    height: 72%;
    background: radial-gradient(circle, rgba(46, 179, 130, 1) -11%, rgba(153, 142, 30, 0) 68%);
}

.led-slid7 {
    position: absolute;
    top: 26%;
    left: 28%;
    width: 35%;
    height: 65%;
    background: radial-gradient(circle, rgba(174, 177, 12, 1) -11%, rgba(153, 142, 30, 0) 68%);
    animation: breath 2.7s infinite;
}

.led-slid7-2 {
    position: absolute;
    top: 30%;
    left: -3%;
    width: 35%;
    height: 63%;
    background: radial-gradient(circle, rgba(38, 163, 116, 1) -11%, rgba(153, 142, 30, 0) 68%);
    animation: breath 2.7s infinite;
}

@keyframes breath {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.7);
    }
}

.swiper-slide[aria-label="6 / 8"] .animation-container {
    width: 80%;
    position: absolute;
    height: 40vh;
    bottom: 2%;
    left: 10%;
}

.vsoA {  
    width: auto;
    height: 100%;
    background-image: url('../img/Ship.png');
    background-size: 300%, 100%;
    background-position: left;
    background-repeat: no-repeat;
    animation-name: eye-fill;
    animation-duration: 0.3s;
    animation-timing-function: steps(2);
    animation-iteration-count: infinite;
    transform: scaleX(-1);
}

@keyframes eye-fill {
from {
    background-position: left;
}
to { 
    background-position: right;
}
}
.swiper-slide[aria-label="6 / 8"] img {
    width: 70%;
    position: relative;
    height: auto;
    transform: scaleX(-1);
}

#bulsix {
    height: 23%;
    bottom: 8.5%;
    right: 3%;
}

#bulsix .bubbles {
    width: auto;
    height: 80%;
}

#divbubl {
    position: fixed;
    bottom: 0;
    right: 0;
    width: auto;
    height: 91%;
}

#bul {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: auto;
    height: 100vh;
}
#bul .flashlight{
    position: absolute;
    width: 100%;
    left: 2%;
    top: -10%;
    z-index: -1;
}
#divbubl img {
    width: auto;
    height: 100%;
    position: relative;
    bottom: 0;
    right: 2%;
    z-index: 1;
}

#bul .squad{
    height: 85%;
    margin-top: 15%;
}

#bul .bubbles-container {
    position: absolute;
    bottom: -2%;
    right: 15%;
    transform: translate(-50%, -50%);
    height: 22%;
    width: 19%;
}

#divbubl .bubbles-container {
    position: absolute;
    top: 34%;
    left: 36%;
    transform: translate(-50%, -50%);
    height: 38%;
    z-index: 5;
    width: auto;
}
.containerClmStory{
    margin: auto;
    position: absolute;
    height: auto;
    width: 90%;
    display: flex;
    justify-content: space-evenly;
    color: var(--main-astral-white);
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -35%);
}
.containerClmStory .storyClm{
    height: auto;
    width: 33%;
}
.containerClmStory .storyClm img{
    height: auto;
    width: 60%;
    margin: 1rem;
    margin-top: 0.8rem;
}
.containerClmStory .storyClm img:first-child{
    width: 50px;
}
.bubbles {
    width: 95%;
    height: 100%;
    >g>g:nth-of-type(3n) circle {
        stroke: #ffffff;
    }
    >g>g:nth-of-type(4n) circle {
        stroke: #ffffff;
    }
}

@keyframes bellMotion {
    0% {
        transform: translate3d(154vh, 4vh, 0);
    }
    100% {
        transform: translate3d(-10vh, 4vh, 0);
    }
}

#typed-text.cursor::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: white;
    animation: blink 0.7s infinite;
    opacity: 0;
    /* Commence avec une opacité de 0 */
}

@keyframes blink {
    0%,
    100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

#typed-text.show-cursor::after {
    opacity: 1;
    /* Ajoute l'opacité de 1 quand la classe show-cursor est présente */
}


/* Utilisation de la classe .bell-motion pour appliquer l'animation */

.slaideur {
    animation-name: bellMotion;
    animation-duration: 30s;
    /* Durée totale de l'animation en secondes */
    animation-timing-function: linear;
    /* Fonction de temporisation de l'animation */
    animation-iteration-count: 1;
    /* Répétition infinie de l'animation */
}

.animation-container {
    width: 72%;
    margin: auto;
}

#png-animation {
    width: 150px;
    height: 100px;
}

#text-container {
    z-index: 10;
    display: none;
    left: 5%;
    position: absolute;
    top: 12%;
    width: 50%;
    border-left: solid 2px white;
}

#typed-text {
    transition: 0.5s ease-in-out;
    font-size: 1.6rem;
    padding-left: 1rem;
    padding-right: 1rem;
    line-height: initial;
    color: white;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.image-background {
    width: 30000px;
    height: 100%;
    position: absolute;
    margin-top: -1px;
    top: -2px;
    left: 0;
    background: url('../img/background.png') repeat-x 0 100%;
    background-size: contain;
    background-position: left top;
}

.image-background:hover {
    animation: scroll 60s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
        /* Ajustez le pourcentage en fonction du nombre de répétitions souhaitées */
    }
}

.clmtitle {
    position: relative;
    z-index: 1;
    text-decoration: none;
    text-align: center;
    line-height: normal;
}

.product-miniature .thumbnail-container.reflect::after  {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, .8)), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transform: skew(30deg);
    animation: shine 3s infinite linear;
}

@keyframes shine {
    0% {
        left: -50%;
        opacity: 0;
    }
    50% {
        left: 25%;
        opacity: .5;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes reflet {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}


/* animation */

@keyframes slide {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes slide2 {
    0% {
        transform: translateY(100%) translateX(-100%);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%) translateX(100%);
        opacity: 0;
    }
}

@keyframes testtest {
    0% {
        /* transform: translateY(-100%) translateX(-100%); */
        opacity: 0;
        width: 0%;
        height: 0%;
    }
    100% {
        /* transform: translateY(0%) translateX(0%); */
        opacity: 1;
        width: 100%;
        height: 100%;
    }
}


/* Fin du test */

@media (max-width:650px) {
    #blockcart-modal .divide-right {
        display: none!important;
    }
    #blockcart-modal .cart-products-count {
        display: none!important;
    }
    #blockcart-modal .cart-content p {
        display: none!important;
    }
    #blockcart-modal .cart-content-btn button,
    #blockcart-modal .cart-content-btn a {
        font-size: 12px;
    }
    #blockcart-modal .cart-content-btn a:after {
        content: " →";
        line-height: 5px;
        font-size: 50px;
    }
    #blockcart-modal .cart-content-btn .material-icons {
        display: none!important;
    }
}

#storytelling g:nth-of-type(2) {
    animation: up 5.25s 250ms infinite;
    g {
        transform: translateX(450px);
    }
    circle {
        animation: wobble 3s infinite ease-in-out;
    }
}

g:nth-of-type(3) {
    animation: up 6s 750ms infinite;
    g {
        transform: translateX(700px);
    }
    circle {
        animation: wobble 3s infinite ease-in-out;
    }
}

g:nth-of-type(4) {
    animation: up 5.5s 1.5s infinite;
    g {
        transform: translateX(500px);
    }
    circle {
        animation: wobble 3s infinite ease-in-out;
    }
}

g:nth-of-type(5) {
    animation: up 6.5s 4s infinite;
    g {
        transform: translateX(675px);
    }
    circle {
        animation: wobble 3s infinite ease-in-out;
    }
}

.bubbles-small {
    overflow: visible;
    >g {
        transform: translateY(2048px);
        opacity: 0;
        will-change: transform, opacity;
    }
    g circle {
        transform: scale(0);
    }
    g:nth-of-type(1) {
        animation: up 5.25s infinite;
        g {
            transform: translateX(350px);
        }
        circle {
            animation: wobble 3s infinite ease-in-out;
        }
    }
    g:nth-of-type(2) {
        animation: up 5.75s infinite;
        g {
            transform: translateX(750px);
        }
        circle {
            animation: wobble 3s infinite ease-in-out;
        }
    }
    g:nth-of-type(3) {
        animation: up 5.25s 250ms infinite;
        g {
            transform: translateX(350px);
        }
        circle {
            animation: wobble 3s 250ms infinite ease-in-out;
        }
    }
    g:nth-of-type(4) {
        animation: up 5.75s 325ms infinite;
        g {
            transform: translateX(180px);
        }
        circle {
            animation: wobble 3s 325ms infinite ease-in-out;
        }
    }
    g:nth-of-type(5) {
        animation: up 6s 125ms infinite;
        g {
            transform: translateX(350px);
        }
        circle {
            animation: wobble 3s 250ms infinite ease-in-out;
        }
    }
    g:nth-of-type(6) {
        animation: up 5.13s 250ms infinite;
        g {
            transform: translateX(650px);
        }
        circle {
            animation: wobble 3s 125ms infinite ease-in-out;
        }
    }
    g:nth-of-type(7) {
        animation: up 6.25s 350ms infinite;
        g {
            transform: translateX(480px);
        }
        circle {
            animation: wobble 3s 325ms infinite ease-in-out;
        }
    }
    g:nth-of-type(8) {
        animation: up 7s 200ms infinite;
        g {
            transform: translateX(330px);
        }
        circle {
            animation: wobble 3s 325ms infinite ease-in-out;
        }
    }
    g:nth-of-type(9) {
        animation: up 6.25s 233ms infinite;
        g {
            transform: translateX(230px);
        }
        circle {
            animation: wobble 3s 275ms infinite ease-in-out;
        }
    }
    g:nth-of-type(10) {
        animation: up 6s 900ms infinite;
        g {
            transform: translateX(730px);
        }
        circle {
            animation: wobble 2s 905ms infinite ease-in-out;
        }
    }
}

@keyframes wobble {
    33% {
        transform: translateX(-50px);
    }
    66% {
        transform: translateX(50px);
    }
}

@keyframes up {
    0% {
        opacity: 0;
    }
    10%,
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-1024px);
    }
}

.bubbles-container {
    position: absolute;
    height: 40%;
    bottom: 28%;
    right: 17%;
    width: 100%;
    max-width: 15rem;
    opacity: 0.75;
}

circle {
    /* stroke: white; */
    stroke: rgb(255, 255, 255);
    fill: none;
}

.bubbles-large {
    overflow: visible;
    >g {
        transform: translateY(2048px);
        opacity: 0;
        will-change: transform, opacity;
    }
    g:nth-of-type(1) {
        animation: up 6.5s infinite;
        g {
            transform: translateX(350px);
        }
        circle {
            animation: wobble 3s infinite ease-in-out;
        }
    }
    g:nth-of-type(2) {
        animation: up 5.25s 250ms infinite;
        g {
            transform: translateX(450px);
        }
        circle {
            animation: wobble 3s infinite ease-in-out;
        }
    }
    g:nth-of-type(3) {
        animation: up 6s 750ms infinite;
        g {
            transform: translateX(700px);
        }
        circle {
            animation: wobble 3s infinite ease-in-out;
        }
    }
    g:nth-of-type(4) {
        animation: up 5.5s 1.5s infinite;
        g {
            transform: translateX(500px);
        }
        circle {
            animation: wobble 3s infinite ease-in-out;
        }
    }
    g:nth-of-type(5) {
        animation: up 6.5s 4s infinite;
        g {
            transform: translateX(675px);
        }
        circle {
            animation: wobble 3s infinite ease-in-out;
        }
    }
}

.bubbles-small {
    overflow: visible;
    >g {
        transform: translateY(2048px);
        opacity: 0;
        will-change: transform, opacity;
    }
    g circle {
        transform: scale(0);
    }
    g:nth-of-type(1) {
        animation: up 5.25s infinite;
        g {
            transform: translateX(350px);
        }
        circle {
            animation: wobble 3s infinite ease-in-out;
        }
    }
    g:nth-of-type(2) {
        animation: up 5.75s infinite;
        g {
            transform: translateX(750px);
        }
        circle {
            animation: wobble 3s infinite ease-in-out;
        }
    }
    g:nth-of-type(3) {
        animation: up 5.25s 250ms infinite;
        g {
            transform: translateX(350px);
        }
        circle {
            animation: wobble 3s 250ms infinite ease-in-out;
        }
    }
    g:nth-of-type(4) {
        animation: up 5.75s 325ms infinite;
        g {
            transform: translateX(180px);
        }
        circle {
            animation: wobble 3s 325ms infinite ease-in-out;
        }
    }
    g:nth-of-type(5) {
        animation: up 6s 125ms infinite;
        g {
            transform: translateX(350px);
        }
        circle {
            animation: wobble 3s 250ms infinite ease-in-out;
        }
    }
    g:nth-of-type(6) {
        animation: up 5.13s 250ms infinite;
        g {
            transform: translateX(650px);
        }
        circle {
            animation: wobble 3s 125ms infinite ease-in-out;
        }
    }
    g:nth-of-type(7) {
        animation: up 6.25s 350ms infinite;
        g {
            transform: translateX(480px);
        }
        circle {
            animation: wobble 3s 325ms infinite ease-in-out;
        }
    }
    g:nth-of-type(8) {
        animation: up 7s 200ms infinite;
        g {
            transform: translateX(330px);
        }
        circle {
            animation: wobble 3s 325ms infinite ease-in-out;
        }
    }
    g:nth-of-type(9) {
        animation: up 6.25s 233ms infinite;
        g {
            transform: translateX(230px);
        }
        circle {
            animation: wobble 3s 275ms infinite ease-in-out;
        }
    }
    g:nth-of-type(10) {
        animation: up 6s 900ms infinite;
        g {
            transform: translateX(730px);
        }
        circle {
            animation: wobble 2s 905ms infinite ease-in-out;
        }
    }
}

@keyframes wobble {
    33% {
        transform: translateX(-50px);
    }
    66% {
        transform: translateX(50px);
    }
}

@keyframes up {
    0% {
        opacity: 0;
    }
    10%,
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-1024px);
    }
}

.holographic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(249,34,147,0.5) 0%, 
    rgba(230,101,196,0.5) 3%, rgba(203,1,237,0.5) 7%, 
    rgba(142,3,166,0.5) 15%, rgba(149,0,247,0.5) 28%, 
    rgba(93,0,255,0.5) 40%, rgba(21,167,242,0.5) 59%, 
    rgba(17,202,236,0.5) 69%, rgba(30,250,255,0.5) 77%, 
    rgba(0,255,85,0.5) 85%, rgba(3,186,64,0.5) 96%);
    background-size: 600%;
    z-index: -1;
    /* Animation en continue a proposer */
    animation: animatedBackground 10s linear infinite;
}

@keyframes animatedBackground {
    0%,
    100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
}

/* Ancre Pages CMS */
body{
    background: url('../img/background/fondCMS.png') fixed;
    background-size: cover;
    /* color: var(--main-astral-white); */
}
.header-top{
    background-color: white;
}
#cart .card,
.page-customer-account #content,
#authentication #main .page-content,#authentication #main .page-header,
#pagenotfound .page-not-found, #products .page-not-found{
    background: none;
    box-shadow: none;
    border: none;
}
#module-mw_fusion-fusion #wrapper .page-footer a,
#addresses #wrapper .addresses-footer a,
#addresses #wrapper .page-footer a,
#history #wrapper .page-footer a,
#address #wrapper *,
#password #wrapper *,
#authentication #wrapper *,
#pagenotfound #wrapper *,
#identity #wrapper *{
    color: var(--main-astral-white);
}
#authentication #wrapper i{
    color: var(--main-astral-purple);
}
.sizeFCmsTitle,
.sizeFCmsTitle *{
    font-size: 2.6rem;
    margin-top: 2rem;
    text-transform: uppercase;
}
.sizeFCms,
.sizeFCms *{
    font-size: 1.3rem;
}
#identity #divbubl,
#authentication #divbubl{
    position: absolute;
    width: 20%;
    height: unset;
}
#identity #divbubl img,
#authentication #divbubl img{
    width: 100%;
}

#identity #wrapper .form-control,
#address #wrapper .form-control,
#password #wrapper .form-control,
#authentication #wrapper .form-control{
    color: var(--main-astral-blue);
}
.form-control:focus, .input-group.focus{
    outline: none;
}
#identity .form-group .form-control-valign,
#authentication .register-form .form-group .form-control-valign{
    display: flex;
    justify-content: space-around;
}
/* Ancre page connexion */
#password .forgotten-password .form-group,
#authentication #login-form .form-group{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#authentication #login-form .form-group label{
    text-align: center;
    float: none;
    font-size: 1.6rem;
    width: unset;
}
#authentication .form-group .form-control-label{
    text-transform: uppercase;
}
#address .form-footer button,
#identity .form-footer button,
#password .forgotten-password .form-control-submit,
#authentication .register-form .form-control-submit,
#authentication #login-form #submit-login{
    color: var(--main-astral-white);
    background-color: var(--main-astral-blue);
    padding: 0.8em 3.2rem;
    box-shadow: none;
}
#identity .form-footer{
    text-align: center;
}
.neonButton{
    background: none;
    color: #fff;
    font-size: 1.6rem;
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px var(--main-astral-green),
      0 0 82px var(--main-astral-green),
      0 0 92px var(--main-astral-green),
      0 0 102px var(--main-astral-green),
      0 0 151px var(--main-astral-green);
    animation: pulsate 1.5s infinite alternate;  
    border: 0.2rem solid #fff;
    border-radius: 0.2rem;
    padding: 0.8em 3.2rem;
    box-shadow: 0 0 .2rem #fff,
              0 0 .2rem #fff,
              0 0 2rem var(--main-astral-green),
              0 0 0.8rem var(--main-astral-green),
              0 0 2.8rem var(--main-astral-green),
              inset 0 0 1.3rem var(--main-astral-green); 
} 
.asteroLeft,
.asteroRight{
    position: absolute;
}
.asteroLeft{
    left: -22vw;
}
.asteroRight{
    bottom: -20vh;
    right: -16vw;
}
/* Ancre Page 404 */
.robot404{
    width: 50%;
    margin-bottom: 2rem;
}
#pagenotfound .page-not-found, #products .page-not-found{
    padding: 0;
}
/* Ancre Page Mot de passe oublié */
#password .forgotten-password .form-group label{
    width: unset;
}
#password .forgotten-password .form-fields .email{
    margin-bottom: 5px;
}
#password .forgotten-password .form-control-submit{
    width: 430px;
    height: auto;
}
#password .passwordImg{
    position: absolute;
    width: 15vw;
    right: 1vw;
    z-index: -1;
    top: 8vh;
}
/* Ancre Page Mentions légales et CGU */
#cms.cms-id-2 #content *,
#cms.cms-id-3 #content *{
    color: var(--main-astral-blue);
}
#cms.cms-id-2 #content,
#cms.cms-id-3 #content{
    background-color: #d4dbdda3;
    height: 66vh;
    overflow: auto;
    color: var(--main-astral-blue);
}
/* Ancre Page Données personelles */
#module-psgdpr-gdpr #exportDataToCsv,
#module-psgdpr-gdpr #exportDataToPdf{
    color: var(--main-astral-white);
    background-color: var(--main-astral-blue);
    
}
#module-psgdpr-gdpr .psgdprinfo17{
    background-color: #d4dbdda3;
    text-align: center;
    padding: 0;
}
#module-psgdpr-gdpr .psgdprinfo17 p{
    color: var(--main-astral-blue);
}
#module-psgdpr-gdpr .psgdprinfo17 p a{
    color: var(--main-astral-blue);
    text-decoration: underline!important;
}
#module-psgdpr-gdpr h2{
    text-align: left;
    background-color: var(--main-astral-blue);
    padding: 1rem;
    color: var(--main-astral-white);
}
#module-psgdpr-gdpr .page-footer a{
    margin-left: 2rem;
    color: var(--main-astral-white);
}
/* Ancre Page Infos Persos */

#authentication .custom-checkbox input[type=checkbox]+span,
#identity .custom-checkbox input[type=checkbox]+span{
    border: 2px solid var(--main-astral-white);
    border-radius: 1rem;
    background-color: var(--main-astral-white);
}
#identity .custom-checkbox span i{
    color: var(--main-astral-blue)!important;
}
/* Ancre Page Adresses */
#addresses .address-body{
    padding: 0;
}
#addresses .address-body h4{
    padding: 1rem;
    text-align: center;
    background-color: #001f52;
    color: var(--main-astral-white);
    text-transform: uppercase;
}
#addresses .address-body address{
    padding: 1rem;
}
#addresses .address .address-footer{
    border: none;
    display: flex;
    justify-content: space-between;
}
/* Ancre Page Historique */

#module-mw_fusion-fusion .table *,
#module-mw_fusion-fusion .table,
#history .table *,
#history .table {
    border: none;
    text-align: center;
}
#module-mw_fusion-fusion .table .thead-default th,
#history .table .thead-default th{
    background-color: #00102B;
    color: var(--main-astral-white);
    font-family: 'Poppins';
    border: none;
    text-align: center;
}
#module-mw_fusion-fusion .table .odd *,
#history .table .odd *{
    background-color: var(--main-astral-white);
    color: var(--main-astral-blue);
}
#module-mw_fusion-fusion .table .even *,
#history .table .even *{
    color: var(--main-astral-white);
    background-color: var(--main-astral-blue);
}



/* Ancre toute dimensions */
/* Toutes pages */
#header .logo,
.header-top .logo {
    height: 30px;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}
.logoUser.connect{
    filter: invert(60%) sepia(37%) saturate(2396%) hue-rotate(65deg) brightness(99%) contrast(90%);
}
.logoUser{
    filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
    height: 40px;
}
.linkMenu{
    display: flex;
}
.linkMenuRight{
    width: 33%;
    text-align: end;
    display: flex;
    justify-content: flex-end;
}
.linkMenuRight ul{
    margin: 0;
}
.pictoMenu{
    height:40px;
}
.pictoMenu:hover{
    filter: invert(56%) sepia(68%) saturate(2837%) hue-rotate(70deg) brightness(107%) contrast(87%);
}
.pictoMenuClm{
    height:5rem;
    margin-bottom: 1rem;
    filter: invert(1);
}
.shareBtn i{
    cursor:pointer;
    font-size: 40px;
}
.block-social:hover .listShare{
    max-width: 100%;
}
.block-social{
    display: flex;
    justify-content: flex-end;
    color: var(--main-astral-purple);
}
.listShare{  
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.3s ease-in-out;
    height: 40px;
}
.userLogin,
.block-social *{
    align-self: center;
}
#module-mw_accordeoncategories-catalogue .titlCat,
.accordion .category-heading .btnfilter, .accordion .category-heading{
    margin: 0;
    /* margin-bottom: 1rem; */
}
.sort-by-row>.products-sort-order{
    /* width: 90%; */
    margin: auto;
    height: auto;
}
/*Ancre mobile small */
@media(max-width:767px){
    .pictoMenu{
        height:36px;
    }
    .header-top .linkMenu{
        width: 45%;
    }
    .header-top>.container{
        padding: 0;
    }
    .header-top .rowindex{
        margin: 0;
    }
    .sizeFCmsTitle, .sizeFCmsTitle *{
        font-size: 1.6rem;
    }
    .product-line-grid-left,
    .shareBtn i,
    .listShare li{
        display:none;
    }
    .listShare .instagram{
        display:block;
        background-color: #ffffff00;
        margin-right: 0.3rem;
    }
    .block-social{
        display: flex;
        justify-content: flex-end;
    }
    .listShare{  
        max-width: 100%;
    }
    .footer-container .collab{
        position: absolute;
        padding-left: 0;
        padding-right: 0;
        top: 0;
        justify-content: flex-start;
    }
    .footer-container .collab img{
        height: auto;
    }
    .footer-container>.container ul {
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-evenly;
        margin-top: 0.7rem;
        margin-bottom: 1rem;
    }
    .footer-container>.container>.row:first-child{
        padding: 0.6rem 0 0.6rem 0;
    }
    .footer-container>.container>.row:first-child ul li,
    .footer-container>.container>.row:first-child ul{
        margin: 0;
        margin-right: 0.5rem;
        z-index: 1;
    }
    #identity #divbubl, #authentication #divbubl{
        display: none;
    }
    /* mobile index */
    body #index{
        height: 97vh;
        flex-direction: column;
    }
    #main #index>a{
        width: 100%!important;
        height: 33.33%;
    }
    .loaderrob-container {
        width: 55%;
    }
    /* mobile storytelling */
    #text-container{
        width: 90%;
        top: 25%;
    }
    #typed-text{
        font-size: 1rem;
    }
    .storyctrright {
        top: 57%;
        right: -16%;
        width: 75%;
        z-index: -5;
        animation: none;
    }
    .storyctrright img{
        width: 42%;
    }
    .storyright{
        width: 136%;
        transform: translateX(-23%);
    }
    #strpnt{
        width: 100%;
        right: 0;
        transform: none;
    }
    #strpilot{
        right: 47%;
        left: unset;
        width: 60%;
    }
    #strCayou{
        width: 47%;
        top: 49%;
    }
    .astero3{
        top: -4%;
        right: -5%;
    }
    .strastr{
        width: 26%;
    }
    .swiper-slide{
        overflow: hidden;
    }
    .swiper-slide:nth-child(4) {
    
        .imgquatre:nth-child(3) {
            top: 20%;
            left: 5%;
            z-index: 1;
            width: 10%;
            /* animation: slid4-3 30s infinite; */
        }
        .imgquatre:nth-child(4) {
            bottom: -3%;
            right: 0%;
            height: 54%;
            width: auto;
            z-index: 10;
            transform: translateX(5%);
            /* animation: slid4-4 30s infinite; */
        }
        .imgquatre:nth-child(5) {
            top: 0%;
            left: 59%;
            animation-delay: 0.5s;
            width: 25%;
            z-index: 1;
            /* animation: slid4-5 30s infinite; */
        }
        .astre01{
            width: 37%;
            top: 42%;
            bottom: unset;
        }
        .astre02{
            /* bottom: 1%;
            left: -20%;
            width: auto; */
            display: none;
        }
        .astre02 img{
            width: 40%;
        }
        .astre03{
            top: 58%;
            left: 19%;
            width: 35%;
            transform: scaleX(-1);
        }
        .led-slid4-01{
            top: 57.5%;
            left: 21%;
            width: 12%;
            height: 9%;
        }
        .led-slid4-02{
            top: -2%;
            left: 58%;
            height: 13%;
        }
    }
    .swiper-slide[aria-label="5 / 8"]:before{
        /* background: url(../img/storytelling/slide05/fondchampmobile.svg) no-repeat; */
        /* background-size: cover; */
        left: -32px;
    }
    #divbubl{
        height: 47%;
        bottom: -3px;
    }
    .swiper-slide[aria-label="6 / 8"] .animation-container{
        bottom: 12%;
        left: -5%;
        width: 100%;
    }
    .swiper-slide[aria-label="6 / 8"] img{
        width: 100%;
    }
    .led-slid6 {
        top: 31%;
        left: 34%;
        width: 12%;
        height: 22%;
    }
    .led-slid6-1 {
        top: 32%;
        left: 40%;
        width: 15%;
        height: 23%;
    }
    .led-slid0 {
        bottom: -11%;
    }
    .led-slid00 {
    
        width: 19%;
        
    }
    #blocstory #lightvso{
        left: 13%;
    }
    #bul{
        height: auto;

    }
    #bul .squad {
        width: 100%;
        height: auto;
    }
    .containerClmStory{
        flex-direction: column;
        align-items: center;
        transform: translate(-50%, -12%);
        height: 70%;
        justify-content: space-between;
    }
    .containerClmStory .storyClm img{
        width: 23%;
    }
    .containerClmStory .storyClm>img:last-child{
        display: none;
    }
    .containerClmStory .storyClm{
        width: 100%;
        height: auto;
    }
    .containerClmStory .storyClm .storyClmMobile{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
    .containerClmStory .storyClm .storyClmMobile h2{
        margin-bottom: 0;
    }

    
    /* mobile catalogue */
    #module-mw_accordeoncategories-catalogue .titlCat h1 {
        font-size: x-large;
    }
    #module-mw_accordeoncategories-catalogue main>#wrapper>.container{
        width: 100%;
    }
    #module-mw_accordeoncategories-catalogue .listProducts{
        width: 100%;
    }
    .product{
        width: 100%;
    }
    #module-mw_accordeoncategories-catalogue .product-miniature .thumbnail-container{
        width: 100%;
        height: 100%;
        border: none;
    }
    .modalopen{
        position: absolute;
        top: 0.45rem;
        left: 1.2rem;
        font-size: 3rem;
        color: var(--main-astral-purple);
        z-index: 100;
    }
    #products .thumbnail-container .product-description{
        width: 100%;
        height: auto;
        background-color: var(--main-astral-purple);
        color: #FFFFFF;
        text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px var(--main-astral-purple), 0 0 30px var(--main-astral-purple), 0 0 40px var(--main-astral-purple), 0 0 55px var(--main-astral-purple), 0 0 75px var(--main-astral-purple);
    }
    
    #module-mw_accordeoncategories-catalogue .product-miniature .thumbnail-container .featuresProduct{
        padding-left:5px;
        padding-right:5px;
        margin-top: 0.7rem;
        color: white;

    }
    .mobile_container{
        display: flex;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
    }
    .pricePoints{
        justify-content: space-between;
        margin: 0 1rem;
    }
    .mobile_container .imgproduct{
        width: 40%;
        align-self: center;
    }
    .imgproduct img{
        width: 100%;
        object-fit: contain;
        height: auto;
    }
    #module-mw_accordeoncategories-catalogue .product-miniature .thumbnail-container .highlighted-informations{    
        text-align: left;
        position: absolute;
        height: 84%;
        background: none;
        box-shadow: none;
        top: 0!important;
        width: 70%;
        right: 0;
        display: initial;
        bottom: 0 !important;
        padding: 0.5rem 0.3rem!important;
    }
    .packFeatures{
        text-align: right;
        margin-left: 1rem;
    }
    .product .thumbnail-top img{
        width: 160px;
        height: auto;
        transform: translateX(-15%);
    }
    #module-mw_accordeoncategories-catalogue .bottomProductContainer{
        position: unset;
        width: 19%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #module-mw_accordeoncategories-catalogue .btnProduct-container::before{
        content: none;
    }
    #module-mw_accordeoncategories-catalogue .sortBy{
        width: 100%;
        margin-right: 0;
    }
    .full_category[data-category-label="Alimentaires"] .featuresContainer, .full_category[data-category-label="Graines"] .featuresContainer{
        padding-top: 0rem;
    }
    .featuresContainer{
        padding: 0;
    }
    #module-mw_accordeoncategories-catalogue .featureMobile{
        width: 10%;
        text-align: end;
        margin-right: 2%;
        color: var(--main-astral-white);
        place-self: center;
    }
    #module-mw_accordeoncategories-catalogue .featureMobile i{
        transition: 0.3s ease-in-out;
    }
    #module-mw_accordeoncategories-catalogue .accordion .btnProduct .qtyCart,
    #module-mw_accordeoncategories-catalogue .mobile_container .ptsproduct,
    #products .product-price-and-shipping{
        color: white;
    }
    #module-mw_accordeoncategories-catalogue .listProducts .btnProduct{
        width: 100%;
        justify-content: center;
        flex-direction: column-reverse;
    }
    #module-mw_accordeoncategories-catalogue .cart-items{
        width: 100%;
        max-height: 20%;
        padding: 0;
    }
    #module-mw_accordeoncategories-catalogue .cart-item *{
        min-width: unset;
        margin-bottom: 0;
    }
    #module-mw_accordeoncategories-catalogue .cart-item .qtyCustom{
        margin: 0;
    }
    #module-mw_accordeoncategories-catalogue .productssumary{
        margin-right: 13%;
        justify-content: space-evenly;
    }
    
    .listProducts .btnProduct .btn-primary{
        color: var(--main-astral-white);
    }
    .listProducts .btnProduct .btn-primary,
    #module-mw_accordeoncategories-catalogue .btnProduct-container{
        background: none;
    }
    #module-mw_accordeoncategories-catalogue .mobile_container .priceMobile{
        text-align: center;
        padding: 3px;
        width: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .mobile_container .imgproduct,
    .mobile_container .priceMobile,
    .mobile_container .bottomProductContainer{
        border-right: 2px solid var(--main-astral-green);
    }
    .products-sort-order .dropdown-menu{
        width: 100%;
    }
    #cart .productLineHeader, #module-mw_accordeoncategories-catalogue .productLineHeader{
        margin-left: 2%;
    }
    .quick-view{
        /* width: 100%;
        position: absolute; */
    }
    .accordion .modalopen .material-icons{
        color: white;
    }
    /* Mobile panier */
    #cart .cartImg {
        position: absolute;
        width: 23%;
        left: -8%;
    }
    #module-mw_accordeoncategories-catalogue .containerCart {
        bottom: 23%;
    }
    #module-mw_accordeoncategories-catalogue #btnCartCat {
        bottom: 14.5%;
    }
    
   #cart .product-line-grid .product-line-grid-right .qty{
    width: 65%;
   } 
   #cart .product-line-grid .col-xs-6{
    width: 75%;
   }
    /* Mobile page client */
    #my-account .hex-wrap{
        left: -6%;
        margin: 0;
    }
    #my-account .hex-wrap>div{
        width: 55%;
    }
    #my-account .hexa img {
        top: 20%;
        width: 38%;
    }
    #my-account .hexa span {
        top: 66%;
    }
    /* Mobile pages CMS */
    #module-psgdpr-gdpr #exportDataToCsv,
    #module-psgdpr-gdpr #exportDataToPdf{
        margin: 0;
        padding-top: 0.3rem;
        width: 100%;
        height: 2rem;
        padding-bottom: 0.3rem;
        margin-top: 0.3rem;
        font-family: 'Poppins';
    }
    .page-customer-account #content{
        /* background-color: var(--main-astral-white); */
    }
    .asteroLeft, .asteroRight{
        display: none;
    }
    #authentication .form-footer{
        text-align: center;
    }
}
/*Ancre desktop medium */
@media(min-width:768px){
    #module-psgdpr-gdpr #exportDataToCsv,
    #module-psgdpr-gdpr #exportDataToPdf{
        color: var(--main-astral-white);
        background-color: var(--main-astral-blue);
        padding: 0.8em 3.2rem;
        float: unset;
        margin-bottom: 1rem;
    }
    #my-account .hex-wrap {
        margin: 3rem 0 4rem;
    }

}
/*Ancre desktop Large */
@media(min-width:992px){
    /* Desktop Catalogue */
    #module-mw_accordeoncategories-catalogue #products .product{
        width: 50%;
        
    }

}
/*Ancre desktop xl */
@media(min-width:1200px){
    /* Desktop Catalogue */
    /* #module-mw_accordeoncategories-catalogue #products .product-miniature {

    } */
}
/*Ancre desktop xxl */
@media(min-width:1400px){
    /* Desktop Catalogue */
    #module-mw_accordeoncategories-catalogue #products .product {
        width: 33%;
        
    }

}
@media(min-width:1675px){
    /* Desktop Catalogue */
    #module-mw_accordeoncategories-catalogue #products .product {
        width: 25%;
        
    }

}


/* Ancre réunion 16/10/2023 a trier */
.swiper-button-next:after, .swiper-button-prev:after{
    color: white;
}
.plntStory{
    display: none;
}
@media(max-width:767px){

    .swiper-button-prev,
    .swiper-button-next{
    top: 12%!important;
    }

    .plntStory{
        width: 164%;
        position: absolute;
        top: 73%;
        left: -33%;
        animation: spin 120s infinite linear;
        display: block;
    }
}

.cart-item .js-cart-line-product-quantity {
    width: 1rem;
    text-align: center;
}